/* ═══════════════════════════════════════════════════════════════
   GUNNAAZ CUSTOM FILTERS — gz-filter.css
   Drop in /wp-content/themes/your-theme/assets/css/
   and enqueue in functions.php
═══════════════════════════════════════════════════════════════ */

/* ─── Palette (inherits from archive-product.php :root) ─── */
:root {
    --gz-gold:        #898226;
    --gz-gold-lt:     #fff8eb;
    --gz-gold-dk:     #6e6b1e;
    --gz-text:        #2A2A2A;
    --gz-muted:       rgba(42,42,42,.52);
    --gz-border:      rgba(137,130,38,.2);
    --gz-bg:          #ffffff;
    --gz-radius:      .75rem;
    --gz-radius-sm:   .45rem;
    --gz-ease:        .22s cubic-bezier(.4,0,.2,1);
    --gz-shadow:      0 2px 16px rgba(42,42,42,.07);
    --gz-ff-body:     'DM Sans', system-ui, sans-serif;
    --gz-ff-display:  'Playfair Display', Georgia, serif;
}

/* ─────────────────────────────────────────
   FILTER CONTAINER
───────────────────────────────────────── */
.gz-filter {
    font-family: var(--gz-ff-body);
    width: 100%;
}

/* ─────────────────────────────────────────
   MOBILE TOGGLE BAR
───────────────────────────────────────── */
.gz-filter__mobile-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: .6rem;
    background: var(--gz-bg);
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius);
    padding: .85rem 1.1rem;
    font-family: var(--gz-ff-body);
    font-size: .875rem;
    font-weight: 600;
    color: var(--gz-text);
    cursor: pointer;
    box-shadow: var(--gz-shadow);
    transition: border-color var(--gz-ease), box-shadow var(--gz-ease);
    text-align: left;
}
.gz-filter__mobile-toggle svg {
    width: 1rem; height: 1rem;
    stroke: var(--gz-gold);
    flex-shrink: 0;
}
.gz-filter__mobile-toggle span:nth-child(2) { flex: 1; }
.gz-filter__mobile-toggle:hover {
    border-color: var(--gz-gold);
    box-shadow: 0 4px 16px rgba(137,130,38,.15);
}
.gz-filter__mobile-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    background: var(--gz-gold);
    color: #fff;
    border-radius: 99px;
    font-size: .65rem;
    font-weight: 700;
    padding: 0 .35rem;
}
.gz-filter__mobile-chevron {
    width: .9rem !important;
    height: .9rem !important;
    stroke: var(--gz-muted) !important;
    transition: transform var(--gz-ease);
    flex-shrink: 0;
}
.gz-filter__mobile-toggle[aria-expanded="true"] .gz-filter__mobile-chevron {
    transform: rotate(180deg);
}

@media (max-width: 1023px) {
    .gz-filter__mobile-toggle { display: flex; }
    .gz-filter__body {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
    }
    .gz-filter__body.is-open {
        max-height: 9999px;
        opacity: 1;
        pointer-events: all;
    }
}

/* ─────────────────────────────────────────
   ACTIVE FILTER CHIPS
───────────────────────────────────────── */
.gz-filter__chips {
    background: var(--gz-gold-lt);
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius);
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    animation: gzFadeIn .25s ease both;
}
.gz-filter__chips-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}
.gz-chips-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gz-muted);
}
.gz-chips-clear-all {
    font-size: .72rem;
    font-weight: 600;
    color: var(--gz-gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--gz-ease);
}
.gz-chips-clear-all:hover { border-color: var(--gz-gold); }
.gz-filter__chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.gz-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--gz-bg);
    border: 1px solid var(--gz-border);
    border-radius: 99px;
    padding: .3rem .75rem .3rem .65rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--gz-text);
    text-decoration: none;
    transition: background var(--gz-ease), border-color var(--gz-ease), color var(--gz-ease);
}
.gz-chip svg { width: .65rem; height: .65rem; flex-shrink: 0; opacity: .6; }
.gz-chip:hover { background: var(--gz-gold); border-color: var(--gz-gold); color: #fff; }
.gz-chip:hover svg { opacity: 1; }

/* ─────────────────────────────────────────
   ACCORDION SECTIONS
───────────────────────────────────────── */
.gz-section {
    border-bottom: 1px solid var(--gz-border);
}
.gz-section:first-of-type { border-top: 1px solid var(--gz-border); }

.gz-section__head {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: .95rem 0;
    cursor: pointer;
    gap: .5rem;
    text-align: left;
    font-family: var(--gz-ff-body);
    transition: color var(--gz-ease);
}
.gz-section__head:hover .gz-section__label { color: var(--gz-gold); }

.gz-section__label {
    flex: 1;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--gz-text);
    transition: color var(--gz-ease);
}
.gz-section__active-dot {
    width: .45rem; height: .45rem;
    background: var(--gz-gold);
    border-radius: 50%;
    flex-shrink: 0;
}
.gz-section__arrow {
    width: .95rem; height: .95rem;
    stroke: var(--gz-muted);
    flex-shrink: 0;
    transition: transform var(--gz-ease), stroke var(--gz-ease);
}
.gz-section__head[aria-expanded="true"] .gz-section__arrow {
    transform: rotate(180deg);
    stroke: var(--gz-gold);
}
.gz-section__body {
    overflow: hidden;
    transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
.gz-section__body--hidden {
    max-height: 0 !important;
    opacity: 0;
    pointer-events: none;
}
.gz-section--open .gz-section__body { max-height: 999px; opacity: 1; }

/* ─────────────────────────────────────────
   CHECKBOX LIST
───────────────────────────────────────── */
.gz-list {
    list-style: none;
    margin: 0 0 .85rem;
    padding: 0;
}
.gz-list__item { }
.gz-list__item--d1 .gz-list__link { padding-left: 1.2rem; }

.gz-list__link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .2rem;
    text-decoration: none;
    border-radius: .35rem;
    transition: background var(--gz-ease);
}
.gz-list__link:hover { background: var(--gz-gold-lt); }

/* Custom checkbox */
.gz-list__check {
    flex-shrink: 0;
    width: 1.1rem; height: 1.1rem;
    border: 1.5px solid var(--gz-border);
    border-radius: .3rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--gz-bg);
    transition: background var(--gz-ease), border-color var(--gz-ease);
}
.gz-list__check svg { width: .7rem; height: .7rem; opacity: 0; stroke: #fff; transition: opacity var(--gz-ease); }

.gz-list__item.is-active .gz-list__check {
    background: var(--gz-gold);
    border-color: var(--gz-gold);
}
.gz-list__item.is-active .gz-list__check svg { opacity: 1; }

.gz-list__text {
    flex: 1;
    font-size: .82rem;
    color: var(--gz-text);
    line-height: 1.3;
    transition: color var(--gz-ease);
}
.gz-list__item.is-active .gz-list__text,
.gz-list__link:hover .gz-list__text { color: var(--gz-gold); font-weight: 600; }

.gz-list__count {
    font-size: .7rem;
    color: var(--gz-muted);
    background: rgba(42,42,42,.07);
    border-radius: 99px;
    padding: .1rem .45rem;
    flex-shrink: 0;
    transition: background var(--gz-ease), color var(--gz-ease);
}
.gz-list__item.is-active .gz-list__count {
    background: rgba(137,130,38,.15);
    color: var(--gz-gold-dk);
}

.gz-list__badge {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: .3rem;
    padding: .18rem .45rem;
    flex-shrink: 0;
}
.gz-list__badge--sale { background: var(--gz-gold); color: #fff; }

/* Stars row */
.gz-list__link--stars { gap: .4rem; }
.gz-stars { display: flex; gap: .1rem; }
.gz-star { width: .9rem; height: .9rem; fill: #D1D5DB; stroke: none; transition: fill var(--gz-ease); }
.gz-star--on { fill: #FBBF24; }
.gz-list__item.is-active .gz-star--on { fill: var(--gz-gold); }
.gz-stars-label { font-size: .75rem; color: var(--gz-muted); }

/* ─────────────────────────────────────────
   PRICE RANGE SLIDER
───────────────────────────────────────── */
.gz-price { padding-bottom: .85rem; }

/* Slider track */
.gz-price__slider-wrap {
    position: relative;
    height: 2.2rem;
    margin: .5rem .25rem 1rem;
}
.gz-price__track {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 3px;
    background: var(--gz-border);
    border-radius: 99px;
    transform: translateY(-50%);
    pointer-events: none;
}
.gz-price__range-fill {
    position: absolute;
    height: 100%;
    background: var(--gz-gold);
    border-radius: 99px;
}

/* Range inputs (both layered) */
.gz-price__range {
    position: absolute;
    width: 100%;
    top: 50%; left: 0;
    transform: translateY(-50%);
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    outline: none;
}
.gz-price__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.15rem; height: 1.15rem;
    border-radius: 50%;
    background: var(--gz-bg);
    border: 2.5px solid var(--gz-gold);
    box-shadow: 0 2px 8px rgba(137,130,38,.25);
    pointer-events: all;
    cursor: grab;
    transition: box-shadow var(--gz-ease), transform var(--gz-ease);
}
.gz-price__range::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.2);
    box-shadow: 0 0 0 5px rgba(137,130,38,.18);
}
.gz-price__range::-moz-range-thumb {
    width: 1.15rem; height: 1.15rem;
    border-radius: 50%;
    background: var(--gz-bg);
    border: 2.5px solid var(--gz-gold);
    box-shadow: 0 2px 8px rgba(137,130,38,.25);
    pointer-events: all;
    cursor: grab;
}

/* Input row */
.gz-price__inputs {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.gz-price__input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--gz-border);
    border-radius: .5rem;
    background: var(--gz-bg);
    overflow: hidden;
    transition: border-color var(--gz-ease), box-shadow var(--gz-ease);
}
.gz-price__input-wrap:focus-within {
    border-color: var(--gz-gold);
    box-shadow: 0 0 0 3px rgba(137,130,38,.12);
}
.gz-price__currency {
    padding: 0 .45rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--gz-muted);
    background: rgba(42,42,42,.04);
    border-right: 1.5px solid var(--gz-border);
    line-height: 2.1rem;
    user-select: none;
}
.gz-price__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: .45rem .5rem;
    font-size: .8rem;
    font-family: var(--gz-ff-body);
    font-weight: 600;
    color: var(--gz-text);
    background: transparent;
    -moz-appearance: textfield;
}
.gz-price__input::-webkit-inner-spin-button,
.gz-price__input::-webkit-outer-spin-button { -webkit-appearance: none; }
.gz-price__sep { font-size: .75rem; color: var(--gz-muted); flex-shrink: 0; }

/* Apply button */
.gz-price__apply {
    display: block;
    width: 100%;
    background: var(--gz-gold);
    color: #fff;
    border: none;
    border-radius: var(--gz-radius-sm);
    padding: .55rem 1rem;
    font-size: .78rem;
    font-weight: 700;
    font-family: var(--gz-ff-body);
    letter-spacing: .04em;
    cursor: pointer;
    transition: background var(--gz-ease), box-shadow var(--gz-ease), transform var(--gz-ease);
}
.gz-price__apply:hover {
    background: var(--gz-gold-dk);
    box-shadow: 0 4px 14px rgba(137,130,38,.3);
    transform: translateY(-1px);
}
.gz-price__apply:active { transform: translateY(0); }

/* ─────────────────────────────────────────
   COLOR SWATCHES
───────────────────────────────────────── */
.gz-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-bottom: .85rem;
}
.gz-swatch {
    position: relative;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: var(--swatch-color, var(--gz-gold-lt));
    border: 2px solid transparent;
    box-shadow: 0 1px 4px rgba(42,42,42,.15), inset 0 0 0 1.5px rgba(255,255,255,.6);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--gz-ease), box-shadow var(--gz-ease), border-color var(--gz-ease);
    text-decoration: none;
    overflow: hidden;
}
.gz-swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(42,42,42,.2);
}
.gz-swatch.is-active {
    border-color: var(--gz-gold);
    box-shadow: 0 0 0 3px rgba(137,130,38,.2), 0 2px 8px rgba(42,42,42,.15);
}
.gz-swatch__label {
    font-size: .55rem;
    font-weight: 700;
    color: var(--gz-text);
    text-transform: uppercase;
    user-select: none;
}
.gz-swatch__check {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    padding: .45rem;
    display: none;
}
.gz-swatch.is-active .gz-swatch__check { display: block; stroke: var(--gz-gold); filter: drop-shadow(0 0 2px rgba(0,0,0,.4)); }

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
@keyframes gzFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────
   LOADING STATE (AJAX)
───────────────────────────────────────── */
.gz-filter.is-loading .gz-filter__body { opacity: .45; pointer-events: none; }
.gz-filter.is-loading::after {
    content: '';
    display: block;
    width: 1.25rem; height: 1.25rem;
    border: 2px solid var(--gz-border);
    border-top-color: var(--gz-gold);
    border-radius: 50%;
    animation: gzSpin .7s linear infinite;
    margin: .75rem auto 0;
}
@keyframes gzSpin { to { transform: rotate(360deg); } }