/* =============================================================================
 * FILE: assets/css/listings.css
 * Bluewater Yacht Sales – Plugin Styles
 * ============================================================================= */

/* Gallery height constraint */
.product-gallery .swiper-slide .img {
    height: 70vh;
    max-height: 873px;
}
.product-gallery .swiper-slide .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 768px) {
    .product-gallery .swiper-slide .img {
        height: 50vh;
    }
}

/* Google Places autocomplete dropdown */
.pac-container {
    z-index: 99999 !important;
}

/* AJAX loading state */
.bwys-results-area.bwys-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * PRINT STYLES — Single Listing
 * ═══════════════════════════════════════════════════════════════════════════════ */
@media print {

    /* ── Page Setup ─────────────────────────────────────────────────────── */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        margin: 0.4in 0.5in;
        size: letter;
    }

    body {
        background: #fff !important;
        color: #071323 !important;
        font-size: 10pt !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ── Hide everything not needed ─────────────────────────────────────── */
    .header,
    .footer,
    .sticky-sub-nav,
    .bg-preloader,
    .page-overlay,
    .skip-link,
    .menu-drop,
    .menu-opener,
    .header-btn,
    .block-filter,
    .block-modal,
    .panel-filter,
    .filtered-panel,
    .pagination,
    .swiper-bottom,
    .swiper-bottom-mobile,
    .swiper-pagination,
    .swiper-buttons,
    .swiper-button-prev,
    .swiper-button-next,
    .ico-favorite,
    .bwys-fav-btn,
    .bwys-saved-toggle,
    #bwys-print-listing,
    .btn-filter,
    .btn-toggle,
    [data-toggle],
    [data-toggle-close],
    .filter-block,
    .brand-nav,
    .brand-video,
    .section-brand-video,
    video,
    .bg-overlay,
    .bg-video,
    .btn[href="#section-inquire"] {
        display: none !important;
    }

    /* Hide Related Listings section entirely */
    .section:last-of-type:not(#section-overview):not(#section-details):not(#section-more-info):not(.bg-brand):not(.bg-coffee):not(.bg-sand) {
        display: none !important;
    }

    /* More targeted: hide section that contains "RELATED LISTINGS" */
    body .main > section:last-child {
        display: none !important;
    }
    /* Inquire section — show broker + listing summary, hide form */
    #section-inquire .form-wrapper,
    #section-inquire form {
        display: none !important;
    }

    #section-inquire .card-ref__img {
        display: block !important;
    }

    #section-inquire .card-ref__img img {
        max-height: 120pt !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* ── Remove backgrounds, keep text readable ─────────────────────────── */
    .bg-brand,
    .bg-coffee,
    .bg-sand,
    .section,
    .block-info,
    .card-ref {
        background: #fff !important;
        color: #071323 !important;
    }

    .color-white,
    .color-sand,
    .color-gray,
    .color-gray-dark,
    .color-coffee,
    .color-coffee-add,
    p, h1, h2, h3, h4, h5, h6, li, span, a, em, strong, cite {
        color: #071323 !important;
    }

    /* ── Animations / Transforms — kill them all ────────────────────────── */
    [data-reveal],
    [data-reveal-group],
    [data-reveal-group] > *,
    [data-reveal-img],
    [data-reveal-line],
    .swiper-wrapper,
    .swiper-slide {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* ── Layout ─────────────────────────────────────────────────────────── */
    .wrapper,
    .main,
    .container,
    .container-md {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .section {
        padding: 8pt 0 !important;
    }

    .offset-header {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .mb-4, .mb-lg-8 {
        margin-bottom: 8pt !important;
    }

    .mb-2, .mb-lg-4 {
        margin-bottom: 6pt !important;
    }

    .mb-1 {
        margin-bottom: 4pt !important;
    }

    .pt-2, .pt-lg-4, .pb-2, .pb-lg-4 {
        padding-top: 4pt !important;
        padding-bottom: 4pt !important;
    }

    .py-8, .py-lg-24 {
        padding-top: 8pt !important;
        padding-bottom: 8pt !important;
    }

    /* ── Grid — force columns to work ───────────────────────────────────── */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
    }

    .row > [class*="col"] {
        padding-left: 4pt !important;
        padding-right: 4pt !important;
    }

    [class*="col-lg-4"],
    [class*="col-md-6"].col-lg-4 {
        width: 33.333% !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }

    [class*="col-lg-6"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    [class*="col-lg-8"] {
        width: 66.666% !important;
        flex: 0 0 66.666% !important;
        max-width: 66.666% !important;
    }

    .col-12:only-child,
    .row-cols-1 > .col {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .row-cols-lg-auto > .col {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .gx-2, .gx-4, .gx-xl-8, .gy-2, .gy-4 {
        --bs-gutter-x: 8pt !important;
        --bs-gutter-y: 8pt !important;
    }

    /* ── Links & Buttons ────────────────────────────────────────────────── */
    a {
        color: #071323 !important;
        text-decoration: none !important;
    }

    a[href]::after {
        content: none !important;
    }

    .btn {
        display: none !important;
    }

    /* ── Line borders ───────────────────────────────────────────────────── */
    .line-border,
    hr.line-border {
        background: #ddd !important;
        height: 1px !important;
        border: none !important;
        margin: 4pt 0 !important;
    }

    /* ═══ SECTION 1: Header (Title + Badges) ═══════════════════════════════ */
    .section.bg-brand.color-white.pb-2.pb-lg-4 {
        padding-bottom: 4pt !important;
    }

    h1 {
        font-size: 16pt !important;
        margin-bottom: 4pt !important;
        line-height: 1.2 !important;
    }

    .badge {
        border: 1px solid #333 !important;
        background: transparent !important;
        color: #333 !important;
        padding: 1pt 5pt !important;
        font-size: 7pt !important;
        display: inline-block !important;
    }

    /* ═══ GALLERY — First image only, compact ══════════════════════════════ */
    .product-gallery {
        overflow: hidden !important;
        margin-bottom: 6pt !important;
    }

    .product-gallery .swiper-wrapper {
        transform: none !important;
        display: block !important;
    }

    .product-gallery .swiper-slide {
        display: none !important;
    }

    .product-gallery .swiper-slide:first-child {
        display: block !important;
    }

    .product-gallery .swiper-slide .img {
        height: auto !important;
        max-height: 220pt !important;
        overflow: hidden !important;
    }

    .product-gallery .swiper-slide .img a {
        pointer-events: none !important;
    }

    .product-gallery .swiper-slide .img img {
        width: 100% !important;
        height: auto !important;
        max-height: 220pt !important;
        object-fit: cover !important;
    }

    /* ═══ OVERVIEW — Card with price/location/vessel ═══════════════════════ */
    .card-ref {
        border: 1px solid #ccc !important;
        border-radius: 4pt !important;
        padding: 8pt !important;
        margin-bottom: 8pt !important;
        page-break-inside: avoid !important;
        background: #fff !important;
    }

    .card-ref__img {
        display: none !important;
    }

    .card-ref__content {
        padding: 0 !important;
    }

    .card-ref__head {
        margin-bottom: 4pt !important;
    }

    .card-ref__head h3 {
        font-size: 12pt !important;
        font-weight: bold !important;
    }

    .card-ref__head .ico {
        display: none !important;
    }

    .sm-info__ttl,
    .h5 {
        font-size: 10pt !important;
        font-weight: bold !important;
    }

    /* ═══ SPEC CARDS — Dimensions, Tanks, Engines side by side ═════════════ */
    .block-info {
        border: 1px solid #ccc !important;
        border-radius: 4pt !important;
        padding: 8pt !important;
        margin-bottom: 6pt !important;
        page-break-inside: avoid !important;
        background: #fafafa !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .block-info__head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 4pt !important;
    }

    .block-info__head h3 {
        font-size: 11pt !important;
        font-weight: bold !important;
        margin: 0 !important;
    }

    .block-info__head .ico {
        display: none !important;
    }

    .block-info .list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .block-info .list li {
        padding: 2pt 0 !important;
        margin: 0 !important;
    }

    .list-holder {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
    }

    .list-holder p {
        font-size: 9pt !important;
        margin: 0 !important;
    }

    /* Force spec card columns to be side by side */
    #section-overview .row.gx-2.gy-2 {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    #section-overview .row.gx-2.gy-2 > [class*="col"] {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
    }

    /* ═══ DETAILS — Description text ═══════════════════════════════════════ */
    #section-details {
        background: #fff !important;
        border-top: 1px solid #ddd !important;
    }

    #section-details .entry {
        font-size: 9pt !important;
        line-height: 1.4 !important;
    }

    #section-details .entry p {
        margin-bottom: 4pt !important;
    }

    .sub-title {
        font-size: 8pt !important;
        letter-spacing: 1pt !important;
        text-transform: uppercase !important;
        font-weight: bold !important;
        display: block !important;
        margin-bottom: 4pt !important;
    }

    /* ═══ MORE INFO — Accordion all open ═══════════════════════════════════ */
    #section-more-info {
        background: #fff !important;
        border-top: 1px solid #ddd !important;
    }

    /* color-sand class inherits on all children — force dark in print */
    #section-more-info,
    #section-more-info * {
        color: #071323 !important;
        fill: #071323 !important;
    }

    .accordion-nav {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .accordion-nav li {
        page-break-inside: avoid !important;
        margin-bottom: 4pt !important;
    }

    .accordion-opener {
        font-size: 11pt !important;
        font-weight: bold !important;
        padding: 4pt 0 2pt !important;
        margin: 0 !important;
        cursor: default !important;
    }

    .accordion-opener-ico {
        display: none !important;
    }

    /* Force ALL accordion panels open — high specificity to override client CSS */
    .accordion-nav > li > .accordion-slide,
    .accordion-nav > li > div.accordion-slide,
    div.entry.accordion-slide,
    .entry.accordion-slide {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 9pt !important;
        line-height: 1.4 !important;
        padding: 0 0 4pt 0 !important;
        clip: auto !important;
        clip-path: none !important;
        transform: none !important;
        position: static !important;
        pointer-events: none !important;
    }
    /* Inquire — nuclear override for side by side */
    #section-inquire .container > .row > .col-12 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        float: left !important;
    }

    #section-inquire .container > .row {
        display: block !important;
        overflow: hidden !important;
    }

    #section-inquire .card-ref__img {
        display: block !important;
    }

    #section-inquire .card-ref__img img {
        max-height: 80pt !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    #section-inquire .form-wrapper,
    #section-inquire form {
        display: none !important;
    }

    /* ═══ BROKER INFO — Show on print ══════════════════════════════════════ */
    .personal-info {
        display: flex !important;
        align-items: center !important;
        gap: 8pt !important;
        margin-bottom: 4pt !important;
    }

    .personal-info__img {
        flex-shrink: 0 !important;
    }

    .personal-info__img img {
        width: 40pt !important;
        height: 40pt !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .personal-info__txt h3,
    .personal-info__txt .h4 {
        font-size: 10pt !important;
        margin-bottom: 1pt !important;
    }

    .personal-info__txt p {
        font-size: 8pt !important;
        margin-bottom: 1pt !important;
    }


    /* ═══ Swiper — disable all swiper behavior ════════════════════════════ */
    .swiper {
        overflow: visible !important;
    }

    .swiper-wrapper {
        transform: none !important;
    }

    /* ═══ Page break control ══════════════════════════════════════════════ */
    #section-overview {
        page-break-inside: avoid !important;
    }

    #section-details {
        page-break-before: auto !important;
    }

    #section-more-info {
        page-break-before: auto !important;
    }

    /* ═══ Fancybox overlay — hide ════════════════════════════════════════ */
    .fancybox__container,
    .fancybox-container {
        display: none !important;
    }
}

/* ============================================================
   AJAX Loading State
   ============================================================ */

.bwys-results-area.bwys-loading {
    position: relative;
    pointer-events: none;
}

.bwys-results-area.bwys-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .6);
    z-index: 10;
}

.bwys-results-area.bwys-loading::before {
    content: '';
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border: 3px solid var(--bwys-border);
    border-top-color: var(--bwys-blue);
    border-radius: 50%;
    animation: bwys-spin .7s linear infinite;
    z-index: 11;
}

@keyframes bwys-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}