/* CWF Ajax Filter v3.0 — Mobile toolbar matches Seed Heritage reference:
   [Filters | Sort]  <item count>  [grid][list]
   Filter drawer opens from the RIGHT, Sort drawer opens from the LEFT. */

/* ══════════════════════════════════════════
   DESKTOP SIDEBAR (Category only)
══════════════════════════════════════════ */
.cwf-wrap { font-family: inherit; font-size: 14px; color: #1a1a1a; }

/* The Sort drawer (#cwf-sort-sidebar) is mobile-only by design —
   desktop already has its own native "Sort By" dropdown in the
   theme's toolbar, so this second .cwf-wrap block must stay hidden
   on desktop entirely. */
#cwf-sort-sidebar { display: none; }

.cwf-group { border-bottom: 1px solid #e8ecef; }
.cwf-group:last-of-type { border-bottom: none; }

.cwf-head {
    width: 100%; background: none; border: none; padding: 14px 0;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 700; letter-spacing: .3px; color: #1a1a1a;
    cursor: pointer; text-align: left; text-transform: uppercase;
}
.cwf-head:hover { color: #3dbb5e; }
.cwf-arr { width: 14px; height: 14px; color: #9aa0ab; transition: transform .22s; flex-shrink: 0; }
.cwf-group.is-open .cwf-arr { transform: rotate(180deg); }

.cwf-body { display: none; padding: 0 0 14px; }
.cwf-group.is-open .cwf-body { display: block; }

.cwf-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; margin: 0; }

.cwf-box {
    width: 18px; height: 18px; border: 1.5px solid #c8cdd6; border-radius: 3px;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    transition: all .15s; position: relative;
}
.cwf-box input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cwf-box svg { display: none; width: 11px; height: 9px; }
.cwf-box.checked { background: #1a1a1a; border-color: #1a1a1a; }
.cwf-box.checked svg { display: block; }

.cwf-name {
    font-size: 13px; color: #444; text-decoration: none;
    flex: 1; display: flex; align-items: center; justify-content: space-between; transition: color .15s;
}
.cwf-name em { font-style: normal; font-size: 11.5px; color: #aaa; margin-left: 4px; }
.cwf-name.is-active, .cwf-row:hover .cwf-name { color: #1a1a1a; }

.cwf-apply {
    width: 100%; background: #1a1a1a; color: #fff; border: none;
    padding: 12px 0; font-size: 13px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; cursor: pointer; transition: background .2s; margin-top: 4px;
}
.cwf-apply:hover { background: #333; }

/* Active filter bar */
.cwf-action-bar { display: none; align-items: center; justify-content: space-between; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px 12px; margin-bottom: 12px; gap: 8px; }
.cwf-action-bar.is-visible { display: flex; }
.cwf-active-label { font-size: 12px; font-weight: 600; color: #444; flex: 1; }
.cwf-clear-top { font-size: 11.5px; font-weight: 700; color: #1a1a1a; text-decoration: underline; white-space: nowrap; background: none; border: none; cursor: pointer; padding: 0; }
.cwf-clear-top:hover { color: #555; }

/* Stars hidden */
.product-rating, .star-rating, .woocommerce .star-rating { display: none !important; }

/* Native WC pagination hidden */
body.woocommerce #cwf-pagination ~ .woocommerce-pagination,
body.woocommerce-page #cwf-pagination ~ .woocommerce-pagination { display: none !important; }

/* ACF badge */
.custom-product-card { position: relative; }
.prs-badge { position: absolute; top: 10px; left: 10px; z-index: 10; background: #3dbb5e; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; line-height: 1.3; pointer-events: none; box-shadow: 0 2px 6px rgba(61,187,94,.25); }
.prs-badge + .consult-badge { top: 38px; }

/* Panel header — desktop hidden */
.cwf-panel-header { display: none; }
.cwf-mobile-only-apply { display: none; }

/* ══════════════════════════════════════════
   MOBILE TOOLBAR + DRAWERS — hidden on desktop
══════════════════════════════════════════ */
#cwf-mobile-toolbar { display: none; }
#cwf-mobile-toggle, #cwf-sort-toggle { display: none; }
#cwf-backdrop       { display: none; }

/* ══════════════════════════════════════════
   GRID / LIST VIEW — product layout
══════════════════════════════════════════ */
.cwf-list-view ul.products,
.cwf-list-view .products-grid,
.cwf-list-view #product-container {
    display: block !important;
}
.cwf-list-view ul.products li.product,
.cwf-list-view .products-grid .product,
.cwf-list-view .custom-product-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 14px;
    width: 100% !important;
    margin-bottom: 12px;
    text-align: left !important;
}
.cwf-list-view .custom-product-card .product-image-wrap,
.cwf-list-view ul.products li.product img {
    width: 110px !important;
    height: 110px !important;
    flex-shrink: 0;
}
.cwf-list-view .custom-product-image,
.cwf-list-view ul.products li.product img {
    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
}

/* ══════════════════════════════════════════
   MOBILE ≤ 768px
══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Hide the theme's entire native toolbar row (Filters chevron,
       result count, native grid/list icons, "Sort By" dropdown) —
       we render our own replacement that matches the reference site. */
    .woocommerce-ordering { display: none !important; }

    /* The theme bar wrapper itself is hidden by JS (buildMobileToolbar
       calls .hide() on it directly) since its structure varies by theme
       and can't be reliably targeted by class name alone in CSS. */

    /* ── OUR MOBILE TOOLBAR ──
       [Filters | Sort]   <item count>   [grid][list]
    */
    #cwf-mobile-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 4px;
        margin-bottom: 4px;
    }

    /* LEFT: Filters | Sort */
    #cwf-toolbar-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
    }
    #cwf-mobile-toggle,
    #cwf-sort-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        padding: 0;
        font-size: 13px;
        font-weight: 500;
        color: #1a1a1a;
        cursor: pointer;
        position: relative;
        text-transform: none;
        letter-spacing: 0;
    }
    #cwf-mobile-toggle.is-open,
    #cwf-sort-toggle.is-open { color: #1a1a1a; font-weight: 700; }
    .cwf-toolbar-divider { color: #ccc; font-size: 13px; }

    /* Count badge next to "Filters" label */
    #cwf-toggle-badge {
        display: none;
        font-size: 9px;
        font-weight: 700;
        color: #fff;
        background: #1a1a1a;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        border-radius: 8px;
        line-height: 15px;
        text-align: center;
    }

    /* CENTER: item count */
    #cwf-toolbar-count {
        font-size: 12px;
        color: #888;
        text-align: center;
        flex: 1;
        white-space: nowrap;
    }

    /* RIGHT: grid + list icons */
    #cwf-toolbar-right {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 1;
        justify-content: flex-end;
    }
    .cwf-view-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        background: none;
        border: none;
        cursor: pointer;
        color: #c4c4c4;
        padding: 0;
        transition: color .15s;
    }
    .cwf-view-btn.cwf-active { color: #1a1a1a; }
    .cwf-view-btn svg { display: block; flex-shrink: 0; }

    /* ── BACKDROP (shared by both drawers) ── */
    #cwf-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 2147483645;
        opacity: 0;
        transition: opacity .28s ease;
        pointer-events: none;
    }
    #cwf-backdrop.cwf-visible {
        display: block;
        opacity: 1;
        pointer-events: all;
    }

    /* ── FILTER DRAWER — slides in from the RIGHT ── */
    #cwf-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 88% !important;
        max-width: 360px !important;
        height: 100% !important;
        height: 100dvh !important;
        background: #fff !important;
        z-index: 2147483647 !important;
        transform: translateX(100%) !important;
        -webkit-transform: translateX(100%) !important;
        transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
        will-change: transform !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: -4px 0 28px rgba(0,0,0,.13) !important;
        isolation: isolate !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #cwf-sidebar.cwf-visible {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }

    /* ── SORT DRAWER — slides in from the LEFT ── */
    #cwf-sort-sidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 80% !important;
        max-width: 320px !important;
        height: 100% !important;
        height: 100dvh !important;
        background: #fff !important;
        z-index: 2147483647 !important;
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
        will-change: transform !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: 4px 0 28px rgba(0,0,0,.13) !important;
        isolation: isolate !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #cwf-sort-sidebar.cwf-visible {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }

    /* ── PANEL HEADER (sticky, shared style for both drawers) ── */
    .cwf-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 56px;
        border-bottom: 1px solid #e8ecef;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 2;
        flex-shrink: 0;
    }
    .cwf-panel-header-title {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .7px;
        color: #1a1a1a;
    }
    #cwf-panel-close,
    #cwf-sort-panel-close {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        color: #666;
        padding: 0;
        transition: color .15s;
        -webkit-tap-highlight-color: transparent;
    }
    #cwf-panel-close:hover,
    #cwf-sort-panel-close:hover { color: #1a1a1a; }

    /* Inner content padding — Filter drawer */
    #cwf-sidebar .cwf-wrap,
    #cwf-sidebar form,
    #cwf-sidebar #cwf-form {
        padding: 4px 20px 32px !important;
    }

    /* Larger tap targets */
    .cwf-row  { padding: 10px 0; }
    .cwf-head { padding: 16px 0; }
    .cwf-apply { padding: 14px 0; font-size: 13px; margin-top: 12px; }

    #cwf-form {
        display: flex;
        flex-direction: column;
    }
    .cwf-mobile-only-apply {
        display: block !important;
        order: 6;
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: #fff;
        box-shadow: 0 -8px 12px -4px rgba(0,0,0,.06);
    }

    /* ── Sort drawer content: radio list ── */
    .cwf-sort-options {
        padding: 8px 20px 24px;
    }
    .cwf-sort-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 0;
        border-bottom: 1px solid #f0f1f3;
        cursor: pointer;
    }
    .cwf-sort-row:last-child { border-bottom: none; }
    .cwf-sort-radio {
        position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
    }
    .cwf-sort-radio-dot {
        width: 18px; height: 18px; border-radius: 50%;
        border: 1.5px solid #c8cdd6; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        transition: border-color .15s;
    }
    .cwf-sort-radio-dot::after {
        content: ''; width: 9px; height: 9px; border-radius: 50%;
        background: #1a1a1a; transform: scale(0); transition: transform .15s;
    }
    .cwf-sort-radio:checked + .cwf-sort-radio-dot {
        border-color: #1a1a1a;
    }
    .cwf-sort-radio:checked + .cwf-sort-radio-dot::after {
        transform: scale(1);
    }
    .cwf-sort-radio-label {
        font-size: 13.5px; color: #333;
    }
    .cwf-sort-radio:checked ~ .cwf-sort-radio-label {
        font-weight: 700; color: #1a1a1a;
    }

    /* Suppress stacking contexts on page elements while a drawer is open */
    body.cwf-drawer-open .site-header,
    body.cwf-drawer-open header,
    body.cwf-drawer-open #masthead,
    body.cwf-drawer-open .woocommerce ul.products li.product,
    body.cwf-drawer-open ul.products li.product,
    body.cwf-drawer-open .products-grid .product,
    body.cwf-drawer-open .custom-product-card,
    body.cwf-drawer-open .prs-badge,
    body.cwf-drawer-open #cwf-mobile-toolbar {
        z-index: auto !important;
    }

    /* Scroll-lock */
    body.cwf-drawer-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
}