/* =============================================================
   CWF – WooCommerce Product Filter  v8.0.0
   ALL colors via CSS variables — zero hardcoded brand colors
   ============================================================= */

/* ── CSS Variables (all overridable via Elementor) ── */
.cwf-wrap {
    /* ── Accent (Dark Gray) ── */
    --cwf-c:              #333333;   /* dark gray accent */
    --cwf-cl:             #f3f4f6;   /* light gray tint */

    /* ── Filter box ── */
    --cwf-box-bg:         #ffffff;
    --cwf-box-border:     #e2e8f0;
    --cwf-box-r:          12px;

    /* ── Dropdowns & Search ── */
    --cwf-sel-bg:         #ffffff;
    --cwf-sel-txt:        #1f2937;
    --cwf-sel-border:     #d1d5db;
    --cwf-sel-r:          10px;

    /* ── Interactive states ── */
    --cwf-hover-border:   #9ca3af;
    --cwf-focus-ring:     #333333;
    --cwf-active-bg:      #f3f4f6;
    --cwf-active-txt:     #333333;
    --cwf-opt-hover-bg:   #333333; /* Dark gray on hover as requested */
    --cwf-opt-hover-txt:  #ffffff;

    --cwf-mute:           #9ca3af;
    --cwf-gap:            18px;
    --cwf-cols:           3;
    --cwf-img-ratio:      1;

    /* ── Badges (safe fallbacks — override in Elementor) ── */
    --cwf-badge-new-bg:   #22c55e;
    --cwf-badge-sale-bg:  #ef4444;
    --cwf-badge-hot-bg:   #f97316;

    /* ── Typography ── */
    --cwf-title-lines:    2;
    --cwf-mute:           #6b7280;
    --cwf-b:              #e5e7eb;

    font-family: inherit;
    box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

/* ── Filter Box ── */
.cwf-box {
    background:    #ffffff;
    border:        1px solid #e2e8f0;
    border-radius: 12px;
    padding:       16px 20px;
    margin-bottom: 24px;
    display:       flex;
    flex-direction:column;
    gap:           12px;
}

/* ── Scrollable dropdown row ── */
.cwf-scroll-outer {
    position:       relative;
    overflow:       visible; /* Allow dropdowns to show over layout */
    margin-bottom:  -320px;  /* Offset the padding of the row below */
    pointer-events: none;    /* Allow clicks to pass through to elements below (like reset button) */
}
.cwf-scroll-row {
    display:            flex;
    gap:                8px;
    overflow-x:         auto !important;
    overflow-y:         hidden !important;
    padding-bottom:     320px; /* Space for absolute dropdowns (max-height: 280px + buffer) */
    scroll-behavior:    smooth;
    pointer-events:     none;
    scrollbar-width:    none;
    -ms-overflow-style: none;
    padding-top:        2px;
    -webkit-overflow-scrolling: touch; /* Momentum scroll for iOS */
}
.cwf-scroll-row::-webkit-scrollbar { display: none; }
.cwf-field {
    flex: 0 0 auto;
    position: relative; /* Context for absolute dropdown */
    pointer-events: auto; /* Restore interactivity for individual filters */
}

/* Fade hints */
.cwf-scroll-outer::before,
.cwf-scroll-outer::after {
    content:  '';
    position: absolute;
    top:0; bottom: 320px; /* Aligned to actual items, above the overflow hack area */
    width:    36px;
    pointer-events:none;
    opacity:  0;
    transition: opacity .2s;
    z-index:  1;
}
.cwf-scroll-outer::before { left:0;  background:linear-gradient(to right, var(--cwf-box-bg,#fff), transparent); }
.cwf-scroll-outer::after  { right:0; background:linear-gradient(to left,  var(--cwf-box-bg,#fff), transparent); }
.cwf-scroll-outer.cwf-fl::before { opacity:1; }
.cwf-scroll-outer.cwf-fr::after  { opacity:1; }

/* ── Base element reset ── */
.cwf-sel,
.cwf-search,
.cwf-ibtn {
    all:            unset;
    box-sizing:     border-box;
    font-family:    inherit;
    font-size:      13.5px;
    line-height:    1;
    cursor:         pointer;
    transition:     border-color .18s, box-shadow .18s, background .18s, color .18s;
}

/* ── Select dropdown ── */
/* Hide native selects immediately to prevent "shuru mea native wala drop down" */
.cwf-sel {
    opacity: 0;
}
/* Show when initialized or if JS fails */
.cwf-sel.cwf-sel--native {
    opacity: 0;
    pointer-events: none;
}
/* If JS is disabled, you might want them visible, but here we assume JS is required */

.cwf-sel {
    display:       inline-flex;
    align-items:   center;
    background:    var(--cwf-sel-bg);
    color:         var(--cwf-sel-txt);
    border:        1px solid var(--cwf-sel-border);
    border-radius: var(--cwf-sel-r);
    padding:       9px 32px 9px 12px;
    appearance:    none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
    min-width: 110px;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cwf-sel:hover  { border-color: var(--cwf-hover-border); }
.cwf-sel:focus  {
    border-color: var(--cwf-focus-ring);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--cwf-focus-ring) 18%, transparent);
    outline:      none;
}
.cwf-sel.cwf-on {
    background-color: var(--cwf-active-bg);
    border-color:     var(--cwf-active-txt);
    color:            var(--cwf-active-txt);
    font-weight:      600;
    box-shadow:       0 0 0 3px color-mix(in srgb, var(--cwf-active-txt) 12%, transparent);
}
.cwf-sel option:hover,
.cwf-sel option:checked {
    background-color: var(--cwf-opt-hover-bg) !important;
    color:            var(--cwf-opt-hover-txt) !important;
}

/* ── Custom dropdown shell (desktop) ── */
.cwf-dd {
    position: relative;
    display: inline-block;
    min-width: 110px;
    max-width: 180px;
}
.cwf-sel.cwf-sel--native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.cwf-wrap .cwf-dd-btn {
    all: unset;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.25;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 100px;
    background-color: #ffffff !important;
    color: #4b5563 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 7px 30px 7px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cwf-wrap .cwf-dd-btn:hover,
.cwf-wrap .cwf-dd-btn:active {
    border-color: #cbd5e1 !important;
    background-color: #f8fafc !important;
}
.cwf-wrap .cwf-dd-btn.cwf-on {
    border-color: #cbd5e1 !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
}
.cwf-dd-menu {
    position: absolute !important;
    left: 0;
    top: 100%;
    margin-top: 4px;
    width: 200px;
    min-width: 100%;
    z-index: 999;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 4px 12px -4px rgba(0, 0, 0, 0.05);
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    backdrop-filter: blur(8px); /* Modern glass-lite effect */
    background: rgba(255, 255, 255, 0.96);
    animation: cwf-fade-in 0.2s ease-out;
    pointer-events: auto;
}
@keyframes cwf-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.cwf-dd-opt {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    color: #374151;
    transition: background 0.15s, color 0.15s;
}
.cwf-dd-opt[aria-selected="true"] {
    background: #f3f4f6;
    color: #111827;
    font-weight: 600;
}
.cwf-dd-opt:hover,
.cwf-dd-opt:focus,
.cwf-dd-opt:active {
    background: #333333; /* Dark gray feedback */
    color: #ffffff;
}
.cwf-dd-opt--disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ── Row 2: Search + icon buttons ── */
.cwf-row2 {
    display:    flex;
    align-items:center;
    gap:        8px;
}

/* ── Search ── */
.cwf-search-wrap {
    flex:       1;
    position:   relative;
    display:    flex;
    align-items:center;
}
.cwf-search-icon {
    position:   absolute;
    left:       11px;
    width:      16px;
    height:     16px;
    color:      #9ca3af;
    pointer-events:none;
    flex-shrink:0;
}
.cwf-search {
    width:          100%;
    padding:        8px 12px 8px 36px;
    background:     #ffffff;
    color:          #1f2937;
    border:         1px solid #e2e8f0;
    border-radius:  8px;
    font-size:      13px;
    cursor:         text;
    transition:     border-color 0.2s;
}
.cwf-search::placeholder { color: #9ca3af; }
.cwf-search:focus {
    border-color: #cbd5e1;
    outline:      none;
}

/* ── Icon buttons (filter, reset) ── */
.cwf-ibtn {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    width:          36px;
    height:         36px;
    border:         1px solid #e2e8f0;
    border-radius:  8px;
    background:     #ffffff;
    color:          #6b7280;
    flex-shrink:    0;
    transition:     all 0.2s;
    cursor:         pointer;
}
.cwf-ibtn svg { width:16px; height:16px; }
.cwf-ibtn:hover,
.cwf-ibtn:active,
.cwf-ibtn.cwf-on {
    border-color: #cbd5e1;
    color:        #1f2937;
    background:   #f8fafc;
}
.cwf-ibtn:focus-visible { outline: 2px solid var(--cwf-focus-ring); outline-offset: 2px; }

/* ── Advanced panel ── */
.cwf-adv-panel {
    border-top:  1px solid var(--cwf-b);
    padding-top: 12px;
    margin-top:  2px;
}
.cwf-adv-title {
    font-size:   11px;
    font-weight: 700;
    color:       var(--cwf-mute);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:      0 0 10px;
}
.cwf-adv-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   10px;
}
.cwf-adv-full  { grid-column:1/-1; }
.cwf-adv-field { display:flex; flex-direction:column; gap:5px; }
.cwf-adv-label {
    font-size:  12px;
    font-weight:600;
    color:      var(--cwf-sel-txt);
}
.cwf-adv-input {
    all:           unset;
    box-sizing:    border-box;
    width:         100%;
    padding:       7px 12px;
    border:        1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color:         #4b5563 !important;
    font-size:     13px;
    transition:    border-color .2s;
}
.cwf-adv-input:focus {
    outline:      none;
    border-color: #cbd5e1 !important;
    box-shadow:   none !important;
}
.cwf-adv-input.cwf-on {
    border-color: #cbd5e1 !important;
    background-color: #ffffff !important;
}

/* ── Range slider — fully styled, cross-browser ── */
.cwf-adv-range {
    -webkit-appearance: none;
    appearance:         none;
    display:       block;
    width:         100%;
    cursor:        pointer;
    height:        6px;
    border-radius: 3px;
    background:    linear-gradient(
        to right,
        var(--cwf-c, #2563eb) 0%,
        var(--cwf-c, #2563eb) var(--cwf-range-pct, 0%),
        var(--cwf-b, #e5e7eb) var(--cwf-range-pct, 0%),
        var(--cwf-b, #e5e7eb) 100%
    );
    outline:  none;
    margin:   6px 0;
    padding:  0;
    border:   none;
    touch-action: pan-y;
}
/* Thumb — WebKit / Blink */
.cwf-adv-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:   none;
    width:        20px;
    height:       20px;
    border-radius:50%;
    background:   var(--cwf-c, #2563eb);
    border:       2px solid #fff;
    box-shadow:   0 1px 6px rgba(0,0,0,.25);
    cursor:       pointer;
    transition:   transform .15s;
}
.cwf-adv-range::-webkit-slider-thumb:hover  { transform: scale(1.15); }
.cwf-adv-range::-webkit-slider-thumb:active { transform: scale(1.25); }
/* Thumb — Firefox */
.cwf-adv-range::-moz-range-thumb {
    width:        20px;
    height:       20px;
    border-radius:50%;
    background:   var(--cwf-c, #2563eb);
    border:       2px solid #fff;
    box-shadow:   0 1px 6px rgba(0,0,0,.25);
    cursor:       pointer;
    transition:   transform .15s;
}
.cwf-adv-range::-moz-range-thumb:hover  { transform: scale(1.15); }
/* Track — Firefox */
.cwf-adv-range::-moz-range-track {
    height:       6px;
    border-radius:3px;
    background:   var(--cwf-b, #e5e7eb);
}
.cwf-adv-range::-moz-range-progress {
    height:       6px;
    border-radius:3px;
    background:   var(--cwf-c, #2563eb);
}
.cwf-range-labels {
    display:         flex;
    justify-content: space-between;
    font-size:       11px;
    color:           var(--cwf-mute);
}

/* In-stock toggle */
.cwf-toggle-row  { display:flex; align-items:center; gap:10px; }
.cwf-toggle {
    all:           unset;
    width:         40px;
    height:        22px;
    background:    var(--cwf-b);
    border-radius: 999px;
    position:      relative;
    cursor:        pointer;
    transition:    background .2s;
    flex-shrink:   0;
}
.cwf-toggle-thumb {
    position:   absolute;
    top:        3px;
    left:       3px;
    width:      16px;
    height:     16px;
    background: #fff;
    border-radius:50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cwf-toggle[aria-checked="true"]            { background: var(--cwf-c); }
.cwf-toggle[aria-checked="true"] .cwf-toggle-thumb { transform:translateX(18px); }
.cwf-toggle-label { font-size:13px; color:var(--cwf-sel-txt); font-weight:500; }
.cwf-toggle:focus-visible { outline:2px solid var(--cwf-focus-ring); outline-offset:2px; }
.cwf-sym { color:var(--cwf-mute); font-weight:400; }

/* ── Active filter chips ── */
.cwf-chips {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    min-height:    0;
    margin-bottom: 10px;
}
.cwf-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    background:    var(--cwf-active-bg, #eff6ff);
    color:         var(--cwf-active-txt, #2563eb);
    border:        1px solid color-mix(in srgb, var(--cwf-active-txt,#2563eb) 25%, transparent);
    border-radius: 20px;
    padding:       4px 10px 4px 11px;
    font-size:     12px;
    font-weight:   600;
}
.cwf-chip-x {
    all:        unset;
    cursor:     pointer;
    font-size:  14px;
    line-height:1;
    opacity:    .6;
    padding:    0 1px;
}
.cwf-chip-x:hover { opacity:1; }

/* ── Loading overlay ── */
.cwf-loader {
    display:        flex;
    justify-content:center;
    padding:        24px;
}
.cwf-spinner {
    display:          block;
    width:            28px;
    height:           28px;
    border:           3px solid var(--cwf-spinner-track, var(--cwf-b, #e5e7eb));
    border-top-color: var(--cwf-spinner-color, var(--cwf-c, #555));
    border-radius:    50%;
    animation:        cwf-spin .55s linear infinite;
}
@keyframes cwf-spin { to{ transform:rotate(360deg); } }

.cwf-results { min-height: 250px; }
.cwf-results.cwf-fading { opacity:.45; pointer-events:none; transition:opacity .15s; }

.cwf-no-products {
    text-align:  center;
    color:       var(--cwf-mute, #6b7280);
    font-size:   14px;
    padding:     48px 20px;
    line-height: 1.6;
}
.cwf-no-products::before {
    content:     '🔍';
    display:     block;
    font-size:   32px;
    margin-bottom: 10px;
}
/* Reset button — neutral when no filters, accent when active */
.cwf-ibtn[data-cwf="reset"] {
    color:        var(--cwf-mute, #6b7280);
    border-color: var(--cwf-sel-border, #d1d5db);
    background:   var(--cwf-sel-bg, #fff);
}
.cwf-box.cwf-active .cwf-ibtn[data-cwf="reset"] {
    border-color: var(--cwf-hover-border, var(--cwf-c));
    color:        var(--cwf-active-txt, var(--cwf-c));
    background:   var(--cwf-active-bg, var(--cwf-cl));
}

/* ── Responsive ── */
@media(max-width:600px){
    .cwf-adv-grid { grid-template-columns:1fr; }
    .cwf-sel { min-width:90px; }
}

/* ── Border control support ── */
.cwf-box { border-style: solid; }
.cwf-card { border-style: solid; }