/* ==========================================================================
   Filter Sidebar
   ========================================================================== */

.filter-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--color-vault);
    border: 1px solid var(--color-olive-deep);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    max-height: calc(100dvh - var(--header-height) - var(--space-12));
    overflow-y: auto;
    /* Reserve space for the scrollbar so content never merges with the edge */
    scrollbar-gutter: stable;
}

.filter-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
    position: sticky;
    top: 0;
    background: var(--color-vault);
    z-index: 1;
}

.filter-sidebar__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-olive-light);
}

.filter-sidebar__clear {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-purple-light);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color var(--transition-fast);
}

.filter-sidebar__clear:hover { color: var(--color-gold); }

/* -------------------------------------------------------------------------- */
/* Individual filter group                                                      */
/* -------------------------------------------------------------------------- */
.filter-group {
    /* Gold hairline replaces the default --color-border-subtle divider */
    border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}

.filter-group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-5);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
    /* Demoted to body-font label — same weight as static .filter-group__label */
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-stone-mid);
}

.filter-group__toggle:hover {
    background: rgba(107, 106, 78, 0.06);
    color: var(--color-parchment);
}

.filter-group__label {
    display: block;
    padding: var(--space-3) var(--space-5) var(--space-1);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-stone-mid);
}

.filter-group__chevron {
    width: 18px;
    height: 18px;
    color: var(--color-olive-light);
    transition: transform var(--transition-base), color var(--transition-fast);
    flex-shrink: 0;
}

.filter-group__toggle:hover .filter-group__chevron {
    color: var(--color-gold);
}

.filter-group.is-collapsed .filter-group__chevron {
    transform: rotate(-90deg);
}

.filter-group__body {
    padding: var(--space-1) var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.filter-group.is-collapsed .filter-group__body {
    display: none;
}

/* Active count indicator */
.filter-group__count {
    min-width: 18px;
    height: 18px;
    background: var(--color-purple);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-1);
    margin-left: var(--space-2);
}

.filter-group__count:empty { display: none; }

/* -------------------------------------------------------------------------- */
/* Color toggle buttons (W/U/B/R/G/C)                                          */
/* HTML uses .filter-color-toggles / .filter-color-btn                         */
/* -------------------------------------------------------------------------- */
.color-filter-grid,
.filter-color-toggles {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-1) 0 var(--space-2);
}

.color-btn,
.filter-color-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* mana-font symbols are sized by font-size */
    font-size: 1.35rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.color-btn:hover,
.filter-color-btn:hover  { transform: scale(1.12); }

.color-btn.active,
.filter-color-btn.active,
.filter-color-btn[aria-pressed="true"] {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-gold-glow), 0 0 0 1px var(--color-gold);
}

/* MTG mana colours — slugs match WooCommerce pa_color taxonomy (Scryfall sync) */
.color-btn[data-color="white"],      .filter-color-btn[data-color="white"]      { background: #f9faf4; color: #5a4a20; }
.color-btn[data-color="blue"],       .filter-color-btn[data-color="blue"]       { background: #1a6fa8; color: #fff; }
.color-btn[data-color="black"],      .filter-color-btn[data-color="black"]      { background: #1a1a1a; color: #bfb59a; border: 2px solid #555; }
.color-btn[data-color="red"],        .filter-color-btn[data-color="red"]        { background: #c0392b; color: #fff; }
.color-btn[data-color="green"],      .filter-color-btn[data-color="green"]      { background: #27673a; color: #fff; }
.color-btn[data-color="colorless"],  .filter-color-btn[data-color="colorless"]  { background: linear-gradient(135deg, #9a9a9a, #c8c8c8); color: #111; }
/* Multicolour — classic MTG gold card frame: rich amber-gold, dark border */
.color-btn[data-color="multicolor"], .filter-color-btn[data-color="multicolor"] {
    background: radial-gradient(ellipse at 40% 35%, #f0d060 0%, #c9a84c 45%, #8a6820 100%);
    color: #3a2800;
    border: 2px solid #8a6820;
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

/* -------------------------------------------------------------------------- */
/* Filter checkboxes — used throughout sidebar filter groups                    */
/* HTML: <label class="filter-checkbox"><input type="checkbox"><span class      */
/*        ="filter-checkbox__label">…</span></label>                            */
/* -------------------------------------------------------------------------- */
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2-5, 0.625rem);
    cursor: pointer;
    user-select: none;
    /* 32px on desktop — compact for sidebar; 44px restored in mobile drawer below */
    min-height: 32px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.filter-checkbox:hover {
    background: rgba(245, 243, 238, 0.04); /* parchment tint */
}

.filter-checkbox input[type="checkbox"],
.filter-checkbox input[type="radio"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-vault-raised);
    border: 1.5px solid var(--color-olive-mid);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
    position: relative;
}

.filter-checkbox input[type="radio"] {
    border-radius: var(--radius-full);
}

.filter-checkbox input[type="checkbox"]:checked,
.filter-checkbox input[type="radio"]:checked {
    background: var(--color-purple);
    border-color: var(--color-purple);
}

.filter-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.filter-checkbox input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: var(--radius-full);
    transform: translate(-50%, -50%);
}

.filter-checkbox:hover input[type="checkbox"],
.filter-checkbox:hover input[type="radio"] {
    border-color: var(--color-purple-light);
}

.filter-checkbox__label {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-parchment);
    opacity: 0.78;
    line-height: var(--leading-snug);
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.filter-checkbox:hover .filter-checkbox__label {
    opacity: 1;
}

.filter-checkbox:has(input:checked) .filter-checkbox__label {
    color: var(--color-gold);
    opacity: 1;
    font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/* noUiSlider overrides (price range / CMC)                                     */
/* -------------------------------------------------------------------------- */
.slider-wrap {
    padding: var(--space-3) var(--space-2) var(--space-1);
}

.noUi-target {
    background: var(--color-vault-raised) !important;
    border: 1px solid var(--color-olive-deep) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    height: 4px !important;
}

.noUi-connect {
    background: var(--color-purple) !important;
}

.noUi-handle {
    width: 16px !important;
    height: 16px !important;
    top: -7px !important;
    right: -8px !important;
    border-radius: 50% !important;
    background: var(--color-stone-light) !important;
    border: 2px solid var(--color-gold) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.5) !important;
    cursor: grab !important;
}

.noUi-handle:active { cursor: grabbing !important; }

.noUi-handle:focus-visible {
    outline: 2px solid var(--color-gold) !important;
    outline-offset: 2px !important;
}

.noUi-handle::before,
.noUi-handle::after { display: none !important; }

.noUi-pips {
    color: var(--color-olive-light) !important;
    font-size: 0.65rem !important;
    font-family: var(--font-body) !important;
}

.noUi-marker {
    background: var(--color-olive-deep) !important;
}

.slider-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-3);
    font-weight: 600;
}

.slider-separator { color: var(--color-text-muted); }

/* -------------------------------------------------------------------------- */
/* Inset padding — inputs, select, colour buttons, sliders                     */
/* Keeps content clear of sidebar edges and the scrollbar gutter               */
/* -------------------------------------------------------------------------- */

/* Text / search inputs */
.filter-input {
    display: block;
    width: 100%;
    /* Use box-sizing so padding is included in the 100% width */
    box-sizing: border-box;
    /* Inset from sidebar edges, right side extra for scrollbar */
    padding: var(--space-2) var(--space-3);
    margin: 0 var(--space-4) var(--space-3);
    width: calc(100% - var(--space-4) * 2);
    background: var(--color-vault-raised);
    border: 1px solid var(--color-olive-deep);
    border-radius: var(--radius-md);
    color: var(--color-parchment);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
}

.filter-input::placeholder {
    color: var(--color-stone-dark);
    opacity: 1;
}

.filter-input:focus {
    outline: none;
    border-color: var(--color-gold);
}

/* Edition / Set select */
.filter-select {
    display: block;
    box-sizing: border-box;
    width: calc(100% - var(--space-4) * 2);
    margin: 0 var(--space-4) var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-vault-raised);
    border: 1px solid var(--color-olive-deep);
    border-radius: var(--radius-md);
    color: var(--color-parchment);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    /* Custom dropdown arrow */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A8A870' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-gold);
}

.filter-select option {
    background: var(--color-vault-raised);
    color: var(--color-parchment);
}

/* Colour toggle buttons row — inset from both edges */
.color-filter-grid,
.filter-color-toggles {
    padding-left:   var(--space-5);
    padding-right:  var(--space-5);
    padding-bottom: var(--space-3);
}

/* -------------------------------------------------------------------------- */
/* Printing / foil radio group                                                  */
/* HTML: <div class="filter-toggle-group"><label class="filter-radio">…        */
/* -------------------------------------------------------------------------- */
.filter-toggle-group {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: 0 var(--space-5) var(--space-4);
}

.filter-radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}

.filter-radio span {
    font-size: var(--text-sm);
    color: var(--color-parchment);
    opacity: 0.78;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.filter-radio:hover span         { opacity: 1; }

.filter-radio:has(input:checked) span {
    color: var(--color-gold);
    opacity: 1;
    font-weight: 500;
}

/* noUiSlider — inset the wrapper div only.
   Do NOT apply margin/width to .noUi-target — noUiSlider manages that internally
   and fighting it causes the track/handle misalignment.
   Use margin-bottom (not padding-bottom): noUiSlider adds .noUi-target to this
   element with height:4px !important, and box-sizing:border-box means padding
   would be swallowed into that 4px — the handle would still overlap the divider.
   margin-bottom sits outside the element's box so it reliably clears the handle. */
.noui-slider {
    margin-left:   var(--space-5);
    margin-right:  var(--space-5);
    margin-bottom: var(--space-6);   /* clears 16px handle + breathing room */
    overflow: visible;
}

/* -------------------------------------------------------------------------- */
/* Active-group indicator — left inset gold bar when a group has selections    */
/* -------------------------------------------------------------------------- */
.filter-group:has(input:checked),
.filter-group:has(.filter-color-btn.active),
.filter-group:has(.filter-color-btn[aria-pressed="true"]) {
    box-shadow: inset 2px 0 0 var(--color-gold);
    background: rgba(201, 168, 76, 0.03);
}

/* -------------------------------------------------------------------------- */
/* In-Stock toggle switch (iOS-style, museum palette)                           */
/* FIX: previously had zero rules — this is the headline visual bug fix.        */
/* HTML structure:                                                               */
/*   <label class="filter-toggle-switch" for="filter-in-stock">                 */
/*     <input type="checkbox" …>                                                 */
/*     <span class="filter-toggle-switch__track" aria-hidden="true"></span>      */
/*     <span class="filter-toggle-switch__label">In Stock Only</span>            */
/*   </label>                                                                    */
/* The input sits BEFORE .filter-toggle-switch__track in the DOM, so             */
/* `input:checked ~ .filter-toggle-switch__track` works without JS.             */
/* -------------------------------------------------------------------------- */
.filter-toggle-switch {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Visually hide the native checkbox — it stays in the DOM for accessibility */
.filter-toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    overflow: hidden;
}

/* Track — the pill housing */
.filter-toggle-switch__track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--color-vault-raised);
    border: 1px solid var(--color-olive-mid);
    transition:
        background var(--transition-base),
        border-color var(--transition-base);
    flex-shrink: 0;
}

/* Knob — the circular thumb */
.filter-toggle-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-parchment);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition:
        transform var(--transition-base),
        background var(--transition-base);
}

/* Checked: track turns purple, knob slides right and turns gold */
.filter-toggle-switch input:checked ~ .filter-toggle-switch__track {
    background: var(--color-purple);
    border-color: var(--color-gold);
}

.filter-toggle-switch input:checked ~ .filter-toggle-switch__track::after {
    transform: translateX(20px);
    background: var(--color-gold);
}

/* Focus ring on track when navigated via keyboard */
.filter-toggle-switch input:focus-visible ~ .filter-toggle-switch__track {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* Hover: warm up the border before interaction */
.filter-toggle-switch:hover .filter-toggle-switch__track {
    border-color: var(--color-gold);
}

/* Label text alongside the track */
.filter-toggle-switch__label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-parchment);
    line-height: var(--leading-snug);
}

/* -------------------------------------------------------------------------- */
/* Mobile — sidebar becomes a drawer                                            */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        max-height: 100dvh;
        width: min(var(--sidebar-width), 85vw);
        z-index: var(--z-overlay);
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
    }

    /* Restore full 44px tap targets inside the mobile drawer */
    .filter-checkbox {
        min-height: 44px;
        padding: var(--space-2) var(--space-2);
    }

    .filter-sidebar.is-open {
        transform: translateX(0);
    }

    .filter-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(28, 28, 24, 0.6);
        z-index: calc(var(--z-overlay) - 1);
        display: none;
    }

    .filter-sidebar-backdrop.is-visible {
        display: block;
        animation: fade-in var(--transition-base) forwards;
    }
}