/* ============================================================
   PREMIUM SEARCH CONSOLE — Progressive Disclosure v5
   Brand: #1A1D20 · #F58220 · #56C4F8

   v5 Changes:
   · #locChipRow — new STANDALONE ROW for multi-place chips.
     Sits between sac-row and the composite bar. Chips no longer
     live inside the composite → filters/search button always
     remain fully visible regardless of how many places are selected.
   · Chip text scales down + ellipsis as more places are added
     (handled in JS; CSS just provides the container constraints).
   · Border-radius stack managed by places.js (_updateRadii).
   · Old .loc-chip-strip removed.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. SEARCH CONSOLE WRAPPER
   ════════════════════════════════════════════════════════════ */
.search-console {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    z-index: 100; /* raised from 10 — must exceed DYK bar so price-panel dropdowns float above it */
    overflow: visible !important;
}

/* ════════════════════════════════════════════════════════════
   2. SEARCH ACROSS ROW  (multi-category chips)
   ════════════════════════════════════════════════════════════ */
.sac-row {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 18px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(200%) blur(24px);
    -webkit-backdrop-filter: saturate(200%) blur(24px);
    border: 1.5px solid rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(220, 228, 236, 0.7);
    border-radius: 20px 20px 0 0;
    min-height: 46px;
    overflow: hidden;
    position: relative;
    min-width: 0;
}

.search-console.multi-active .sac-row {
    display: flex;
    animation: sacRowReveal 0.28s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes sacRowReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-console.multi-active .sac-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 130, 32, 0.25) 30%, rgba(86, 196, 248, 0.25) 70%, transparent);
}

.sac-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b0bac6;
    flex-shrink: 0;
    white-space: nowrap;
}

.sac-divider {
    width: 1.5px;
    height: 18px;
    background: rgba(26, 29, 32, 0.28);
    border-radius: 2px;
    flex-shrink: 0;
}

.sac-chip-rail {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 2px 0;
}

    .sac-chip-rail::-webkit-scrollbar {
        display: none;
    }

.sac-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(245, 130, 32, 0.07);
    border: 1.5px solid rgba(245, 130, 32, 0.22);
    border-radius: 30px;
    padding: 4px 10px 4px 8px;
    font-size: 0.73rem;
    font-weight: 700;
    color: #1A1D20;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    animation: sacChipIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

    .sac-chip::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.55) 45%, transparent 100%);
        transform: translateX(-120%);
        transition: transform 0.4s ease;
        pointer-events: none;
    }

    .sac-chip:hover::before {
        transform: translateX(150%);
    }

    .sac-chip:hover {
        background: rgba(245, 130, 32, 0.13);
        border-color: rgba(245, 130, 32, 0.5);
        transform: translateY(-1.5px);
        box-shadow: 0 4px 12px rgba(245,130,32,0.2), 0 0 0 3px rgba(245,130,32,0.06);
    }

    .sac-chip i:first-child {
        font-size: 0.7rem;
        color: #F58220;
        flex-shrink: 0;
    }

    .sac-chip span {
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

.sac-chip-x {
    font-size: 0.55rem !important;
    color: #c4cdd6 !important;
    margin-left: 2px;
    transition: color 0.15s, transform 0.15s;
}

.sac-chip:hover .sac-chip-x {
    color: #ef4444 !important;
    transform: rotate(90deg);
}

.sac-reset {
    background: none;
    border: none;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c4cdd6;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
    transition: color 0.2s;
    white-space: nowrap;
}

    .sac-reset:hover {
        color: #ef4444;
    }

    .sac-reset.hidden {
        opacity: 0;
        pointer-events: none;
    }

@keyframes sacChipIn {
    0% {
        transform: scale(0.7) translateY(4px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Compact when many chips */
.sac-chip-rail:has(.sac-chip:nth-child(5)) .sac-chip {
    font-size: 0.68rem;
    padding: 3px 7px 3px 6px;
    gap: 3px;
}

    .sac-chip-rail:has(.sac-chip:nth-child(5)) .sac-chip span {
        max-width: 56px;
    }

/* ════════════════════════════════════════════════════════════
   3. LOCATION CHIP ROW  (multi-place — STANDALONE ROW)
   Sits between sac-row and the composite bar.
   Chips are rendered by places.js into #locChipRow.
   This prevents any layout shift in the search bar itself
   and keeps Filters / Search button always fully visible.
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   3. LOCATION CHIP ROW  (multi-place — STANDALONE ROW)
   Grows DOWNWARD — chips wrap across up to 3 rows.
   After MAX_VISIBLE_CHIPS, a "+N more" badge collapses the
   remainder. A modal lets users manage the full list without
   ever pushing out Filters or Search buttons.
   ════════════════════════════════════════════════════════════ */
.loc-chip-row {
    display: none;
    /* v10.2: flex-wrap allows the optional province-narrow toolbar
       to take a full row above the chip rail when 2+ provinces are present.
       When the narrow toolbar isn't there, the existing single-row layout
       behaves identically because no child opts into wrapping. */
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px 8px 18px;
    /* ── v11 FUSION FIX ────────────────────────────────────────────
       Previously this row used background rgba(255,255,255,0.96) while
       the composite below uses rgba(255,255,255,0.88). Against a busy
       background (the hero photo / video bleeds through), the 0.08
       opacity gap was visible as two distinct floating panels with a
       seam between them — especially obvious when only ONE chip was
       present and the row was short. The fix is to mirror the exact
       same translucent white + blur recipe the composite uses, so the
       two rows render as one continuous glass surface.  We also drop
       the bottom-border line and the gradient ::after divider, since
       those were the seam itself: the user sees the SAME panel from
       "Searching In" all the way down to the Filters / Search buttons.
       ──────────────────────────────────────────────────────────── */
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(200%) blur(28px);
    -webkit-backdrop-filter: saturate(200%) blur(28px);
    border-left: 1.5px solid rgba(255, 255, 255, 0.98);
    border-right: 1.5px solid rgba(255, 255, 255, 0.98);
    /* No bottom border — the composite sits flush below and we want
       a single uninterrupted glass surface. _updateRadii() in places.js
       still controls border-top, so multi-row stacks (sac + loc + bar)
       continue to behave correctly. */
    border-bottom: none;
    /* radius set dynamically by places.js _updateRadii() */
    position: relative;
    min-width: 0;
    /* Pull the next sibling up by 1px so any anti-aliasing hairline
       between rows disappears even on fractional pixel viewports. */
    margin-bottom: -1px;
    animation: sacRowReveal 0.26s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

    .loc-chip-row.visible {
        display: flex;
    }

    /* The ::after gradient divider was the visible seam between this row
       and the search bar below. With the new fused glass surface there's
       nothing to divide — keep the pseudo-element but make it inert so
       any other CSS targeting it doesn't break. */
    .loc-chip-row::after {
        content: none;
    }

/* ── Label ── */
.lcr-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b0bac6;
    flex-shrink: 0;
    white-space: nowrap;
    padding-top: 5px; /* align with first chip row */
}

/* ── Divider ── */
.lcr-divider {
    width: 1.5px;
    min-height: 18px;
    align-self: stretch;
    background: rgba(26, 29, 32, 0.28);
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 4px;
}

/* ── Chip rail — WRAPS into multiple rows ── */
.lcr-chip-rail {
    display: flex;
    align-items: center;
    gap: 5px;
    /* v11: was flex:1 1 0 which made the rail STRETCH across the whole
       row, leaving a huge empty void between the last chip and the
       right-edge actions cluster. flex:0 1 auto makes the rail shrink
       to its content's natural width when chips fit on one line, so
       the actions hug the chips directly. When chips need to wrap, the
       rail still consumes the full row width (limited by max-width). */
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    /* Wrap chips into rows — grows downward, never sideways truncates */
    flex-wrap: wrap;
    /* Max 3 rows before scroll kicks in */
    max-height: calc(3 * (28px + 5px) + 4px); /* ~3 rows of chips + gaps */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 0 2px 0;
    /* Thin elegant scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 196, 248, 0.35) transparent;
}

    .lcr-chip-rail::-webkit-scrollbar {
        width: 3px;
    }

    .lcr-chip-rail::-webkit-scrollbar-track {
        background: transparent;
    }

    .lcr-chip-rail::-webkit-scrollbar-thumb {
        background: rgba(86, 196, 248, 0.35);
        border-radius: 4px;
    }

/* ── Individual location chip ── */
.lcr-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, rgba(86,196,248,0.10), rgba(245,130,32,0.07));
    border: 1.5px solid rgba(86, 196, 248, 0.28);
    border-radius: 20px;
    padding: 3px 9px 3px 8px;
    font-size: 0.73rem;
    font-weight: 700;
    color: #1A1D20;
    flex-shrink: 0;
    white-space: nowrap;
    animation: sacChipIn 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    height: 26px;
}

    .lcr-chip:hover {
        background: linear-gradient(135deg, rgba(86,196,248,0.16), rgba(245,130,32,0.11));
        border-color: rgba(86, 196, 248, 0.5);
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(86,196,248,0.15);
    }

    .lcr-chip i:first-child {
        font-size: 0.66rem;
        color: #56C4F8;
        flex-shrink: 0;
    }

    .lcr-chip span {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ── Remove button inside chip ── */
.lcr-chip-remove {
    background: none;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: #c4cdd6;
    font-size: 0.52rem;
    line-height: 1;
    transition: color 0.15s, transform 0.15s;
    margin-left: 2px;
}

    .lcr-chip-remove:hover {
        color: #ef4444;
        transform: rotate(90deg);
    }

/* ── "+N more" overflow badge ── */
.lcr-overflow-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(245,130,32,0.10), rgba(86,196,248,0.08));
    border: 1.5px dashed rgba(245, 130, 32, 0.40);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.70rem;
    font-weight: 800;
    color: #F58220;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    height: 26px;
    letter-spacing: 0.02em;
}

    .lcr-overflow-badge:hover {
        background: linear-gradient(135deg, rgba(245,130,32,0.16), rgba(86,196,248,0.12));
        border-color: rgba(245, 130, 32, 0.65);
        box-shadow: 0 3px 10px rgba(245,130,32,0.18);
        transform: translateY(-1px);
    }

/* ── "Add area" ghost hint ── */
.lcr-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #c4cdd6;
    padding: 3px 8px;
    border: 1.5px dashed rgba(0,0,0,0.10);
    border-radius: 20px;
    flex-shrink: 0;
    cursor: default;
    white-space: nowrap;
    height: 26px;
    /* CRITICAL: no transform/transition that causes layout reflow loops */
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    transform: none !important;
}

    .lcr-hint i {
        font-size: 0.62rem;
        /* prevent icon from causing hover-reflow */
        pointer-events: none;
    }

    /* Clickable "Add area" variant — stable hover, NO transform to prevent cursor rattle */
    .lcr-hint.lcr-hint--clickable {
        cursor: pointer;
        color: #9ca3af;
        border-color: rgba(86, 196, 248, 0.25);
        background: rgba(86, 196, 248, 0.04);
        /* will-change prevents layout recalculation that causes the rattle */
        will-change: auto;
    }

        .lcr-hint.lcr-hint--clickable:hover {
            color: #56C4F8;
            border-color: rgba(86, 196, 248, 0.55);
            background: rgba(86, 196, 248, 0.10);
            /* NO transform here — transform shifts the element geometry which re-triggers
           mouseleave/mouseenter creating an infinite hover rattle loop */
            box-shadow: 0 2px 8px rgba(86, 196, 248, 0.15);
        }

        .lcr-hint.lcr-hint--clickable:active {
            background: rgba(86, 196, 248, 0.18);
        }

/* ── Actions bar (See all + Clear all) ──
   v11: was a vertical column on the far right, which forced a big
   empty gap between the chip rail and the actions. Now horizontal,
   aligned to chip baseline, and pulled tight against the last chip
   via margin-left:auto so unused horizontal space is minimised. */
.lcr-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* Push to far right of the row, but only as far as the chip
       rail naturally ends. Removed the wasted horizontal stretch
       that previously made multi-chip rows look half-empty. */
    margin-left: auto;
    /* Tiny top nudge so it visually sits on the chip baseline. */
    padding-top: 1px;
}

/* "All (N)" button */
.lcr-see-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(86, 196, 248, 0.09);
    border: 1.5px solid rgba(86, 196, 248, 0.28);
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 800;
    color: #56C4F8;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    letter-spacing: 0.02em;
}

    .lcr-see-all i {
        font-size: 0.6rem;
    }

    .lcr-see-all:hover {
        background: rgba(86, 196, 248, 0.16);
        border-color: rgba(86, 196, 248, 0.55);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(86,196,248,0.18);
    }

/* "Clear all" link — v11: sits inline next to "All (N)" rather
   than below it. Same look, just laid out horizontally now. */
.lcr-clear-all {
    background: none;
    border: none;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #c4cdd6;
    cursor: pointer;
    padding: 1px 2px;
    flex-shrink: 0;
    transition: color 0.2s;
    white-space: nowrap;
    /* Align with the "All (N)" pill optically; the pill has a
       border so its text sits ~1.5px lower than a bare button. */
    line-height: 1.4;
}

    .lcr-clear-all:hover {
        color: #ef4444;
    }

/* ════════════════════════════════════════════════════════════
   3a-1. PROVINCE-NARROW TOOLBAR (v10.2)
   ────────────────────────────────────────────────────────────
   Appears when the chip rail spans 2+ distinct provinces (e.g. after
   the Smart Search expands "by the beach" into 15 coastal locations
   across WC/KZN/EC). Lets the user keep only chips from one province
   in a single click. Sits as a small horizontal sub-row at the start
   of #locChipRow, before the chip rail itself.
   ════════════════════════════════════════════════════════════ */
.lcr-province-narrow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-basis: 100%; /* take a full row, push chip rail below */
    margin-bottom: 4px;
    padding: 2px 0;
    /* v11: When there are many province chips the row already fills.
       When there are few, the empty space on the right used to look
       like a layout bug. We leave it as-is structurally (these are
       discrete options, not a justified menu) but the visual emptiness
       is now minimised by the tighter chip-rail row sitting below. */
}

.lcr-province-narrow-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b0bac6;
    flex-shrink: 0;
}

    .lcr-province-narrow-label i {
        font-size: 0.7rem;
        color: #56C4F8;
    }

.lcr-province-narrow-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(86, 196, 248, 0.08);
    border: 1.5px solid rgba(86, 196, 248, 0.32);
    border-radius: 20px;
    padding: 3px 9px 3px 11px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1A6B9A;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    line-height: 1.15;
}

    .lcr-province-narrow-chip:hover {
        background: rgba(86, 196, 248, 0.18);
        border-color: rgba(86, 196, 248, 0.65);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(86, 196, 248, 0.22);
    }

    .lcr-province-narrow-chip .lcr-pn-name {
        font-weight: 800;
    }

    .lcr-province-narrow-chip .lcr-pn-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        background: #56C4F8;
        color: #fff;
        border-radius: 10px;
        font-size: 0.62rem;
        font-weight: 800;
    }

/* ════════════════════════════════════════════════════════════
   3b. LOCATIONS MODAL — full list manager
   Premium glass panel, never disrupts search layout
   ════════════════════════════════════════════════════════════ */
.lcr-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 29, 32, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.28s ease;
    padding: 20px;
}

    .lcr-modal-backdrop.open {
        opacity: 1;
    }

.lcr-modal {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(220%) blur(40px);
    -webkit-backdrop-filter: saturate(220%) blur(40px);
    border-radius: 24px;
    border: 1.5px solid rgba(255, 255, 255, 1);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 1);
    width: 100%;
    max-width: 440px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.lcr-modal-backdrop.open .lcr-modal {
    transform: translateY(0) scale(1);
}

.lcr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.lcr-modal-title {
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1A1D20;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .lcr-modal-title i {
        color: #56C4F8;
        font-size: 0.9rem;
    }

.lcr-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .lcr-modal-close:hover {
        background: rgba(239, 68, 68, 0.10);
        color: #ef4444;
        transform: rotate(90deg);
    }

.lcr-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    /* Thin styled scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 196, 248, 0.3) transparent;
}

    .lcr-modal-body::-webkit-scrollbar {
        width: 4px;
    }

    .lcr-modal-body::-webkit-scrollbar-thumb {
        background: rgba(86, 196, 248, 0.3);
        border-radius: 4px;
    }

.lcr-modal-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background 0.18s ease;
    animation: sacChipIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

    .lcr-modal-item:hover {
        background: rgba(86, 196, 248, 0.06);
    }

    .lcr-modal-item > i {
        font-size: 0.78rem;
        color: #56C4F8;
        flex-shrink: 0;
    }

.lcr-modal-item-name {
    flex: 1;
    font-size: 0.84rem;
    font-weight: 600;
    color: #1A1D20;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lcr-modal-item-remove {
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #c4cdd6;
    font-size: 0.75rem;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

    .lcr-modal-item-remove:hover {
        background: rgba(239, 68, 68, 0.09);
        color: #ef4444;
    }

.lcr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    gap: 10px;
}

.lcr-modal-clear {
    background: none;
    border: none;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c4cdd6;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

    .lcr-modal-clear:hover {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.07);
    }

.lcr-modal-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #F58220, #e07315);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 9px 22px;
    font-size: 0.80rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 14px rgba(245, 130, 32, 0.35);
}

    .lcr-modal-done:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(245, 130, 32, 0.48);
    }

    .lcr-modal-done:active {
        transform: scale(0.97);
    }

/* ── Mobile adjustments for modal ── */
@media (max-width: 480px) {
    .lcr-modal {
        border-radius: 20px 20px 0 0;
        max-height: 80vh;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
    }

    .lcr-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

        .lcr-modal-backdrop.open .lcr-modal {
            transform: translateY(0);
        }

    .lcr-modal:not(.open) {
        transform: translateY(60px);
    }
}

/* ════════════════════════════════════════════════════════════
   4. SEARCH BAR — radius managed by places.js
   The composite always has a flat bottom — it connects visually
   to the DYK bar below. JS (_updateRadii) only ever rounds the
   top corners depending on which rows are visible above it.
   ════════════════════════════════════════════════════════════ */
.search-console .search-bar-composite {
    overflow: visible !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.search-console.multi-active .search-bar-composite {
    border-radius: 0 !important;
    border-top: none !important;
    background: rgba(255, 255, 255, 0.96);
}

/* v11 — Match the multi-active background on the chip row too,
   so when both sac-row and loc-chip-row are stacked above the
   composite, all three layers share the same exact translucency
   and read as a single panel rather than three subtly different
   glass surfaces. */
.search-console.multi-active .loc-chip-row {
    background: rgba(255, 255, 255, 0.96);
}

/* When only sac-row is hidden (no multi-active) — do NOT force border-radius here.
   places.js _updateRadii() manages composite top-radius dynamically so that when
   #locChipRow is visible the composite gets flat-top, not a double-rounded edge.
   Border-top is still set by _updateRadii when needed. */
.search-console:not(.multi-active) .search-bar-composite {
    /* radius intentionally unset here — owned by _updateRadii() in places.js */
}

.search-console .search-bar-composite:focus-within {
    border-color: rgba(86, 196, 248, 0.55);
    box-shadow: 0 0 0 3px rgba(86,196,248,0.14), 0 12px 36px rgba(0,0,0,0.08);
}

/* ════════════════════════════════════════════════════════════
   5. OLD LOC-CHIP-STRIP — suppressed entirely
   ════════════════════════════════════════════════════════════ */
.loc-chip-strip,
#locChipStrip {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   6. QUICK PRICE FILTERS ROW
   v11: the previous version had its own border + heavy shadow,
   so each .qf-field card inside (which has its own grey border)
   looked like a "card inside a framed panel" — two nested
   wrappers. We keep the SAME translucent-white glass as the
   composite directly above (so the search bar's flat bottom
   edge still lands on something visually) but drop the border
   and shadow that made the panel feel like a separate frame.
   The individual .qf-field cards now provide the only visible
   borders inside the row.
   ════════════════════════════════════════════════════════════ */
.qf-row {
    display: none;
    padding: 10px 18px 14px;
    /* Match the composite's glass exactly so the seam between
       them is invisible. */
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(200%) blur(28px);
    -webkit-backdrop-filter: saturate(200%) blur(28px);
    border-left: 1.5px solid rgba(255, 255, 255, 0.98);
    border-right: 1.5px solid rgba(255, 255, 255, 0.98);
    border-top: none;
    border-bottom: none;
    border-radius: 0; /* always flat — dyk-bar immediately below provides 20px rounding */
    box-shadow: none;
    overflow: visible; /* allow price panel dropdowns to overflow downward */
    position: relative; /* establish stacking context for price panels */
    z-index: 50; /* within search-console — below qf-price-panel (20200) which is absolute */
}

    .qf-row.visible {
        display: block;
        animation: qfReveal 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

@keyframes qfReveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qf-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.qf-title {
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b0bac6;
}

/* ── Customize button ── */
.qf-customize-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(86, 196, 248, 0.08);
    border: 1.5px solid rgba(86, 196, 248, 0.22);
    border-radius: 20px;
    padding: 3px 10px 3px 8px;
    font-size: 0.67rem;
    font-weight: 700;
    color: #56C4F8;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

    .qf-customize-btn:hover {
        background: rgba(86, 196, 248, 0.15);
        border-color: rgba(86, 196, 248, 0.5);
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(86, 196, 248, 0.18);
    }

    .qf-customize-btn i {
        font-size: 0.72rem;
    }

/* ── QF Header right-side controls group ── */
.qf-header-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Collapse / Close buttons ── */
.qf-collapse-btn,
.qf-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    background: rgba(248, 249, 252, 0.9);
    color: #9ca3af;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    flex-shrink: 0;
}

    .qf-collapse-btn:hover {
        background: rgba(86, 196, 248, 0.10);
        border-color: rgba(86, 196, 248, 0.4);
        color: #56C4F8;
        transform: scale(1.1);
    }

    .qf-close-btn:hover {
        background: rgba(239, 68, 68, 0.09);
        border-color: rgba(239, 68, 68, 0.3);
        color: #ef4444;
        transform: scale(1.1);
    }

/* Collapsed state — header row only remains visible */
.qf-row.qf-collapsed .qf-inputs {
    display: none;
}

/* ── Quick-filter close confirmation dialog ── */
.qf-close-confirm {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid rgba(245, 130, 32, 0.35);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    padding: 10px 14px;
    margin: 6px 0 4px 0;
    animation: qfConfirmSlideIn 0.22s cubic-bezier(0.34,1.2,0.64,1) both;
    z-index: 900;
    position: relative;
}

@keyframes qfConfirmSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qf-close-confirm-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.qf-close-confirm-text {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1d20;
    white-space: nowrap;
}

.qf-close-confirm-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.qf-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1.5px solid transparent;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.qf-confirm-btn-keep {
    background: #F58220;
    color: #fff;
    border-color: #F58220;
}

    .qf-confirm-btn-keep:hover {
        background: #e07318;
        border-color: #e07318;
    }

.qf-confirm-btn-discard {
    background: transparent;
    color: #6b7280;
    border-color: rgba(0,0,0,0.15);
}

    .qf-confirm-btn-discard:hover {
        background: rgba(239,68,68,0.08);
        border-color: rgba(239,68,68,0.3);
        color: #ef4444;
    }

.qf-confirm-btn-cancel {
    background: transparent;
    color: #9ca3af;
    border-color: transparent;
    padding: 4px 6px;
}

    .qf-confirm-btn-cancel:hover {
        color: #374151;
    }

.qf-row.qf-collapsed {
    padding-bottom: 10px;
}

    /* Collapsed indicator on badge */
    .qf-row.qf-collapsed .qf-title::after {
        content: ' (collapsed)';
        font-weight: 400;
        opacity: 0.5;
        font-size: 0.58rem;
        letter-spacing: 0;
        text-transform: none;
    }

@media (max-width: 480px) {
    .qf-customize-btn span {
        display: none;
    }

    .qf-customize-btn {
        padding: 3px 7px;
    }
}

/* ── Chip filter (bedrooms, bathrooms, garages) ── */
.qf-chip-filter {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

    .qf-chip-filter::-webkit-scrollbar {
        display: none;
    }

.qf-chip-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 249, 252, 0.9);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap;
}

    .qf-chip-opt:hover {
        border-color: rgba(245, 130, 32, 0.35);
        color: #F58220;
        background: rgba(245, 130, 32, 0.06);
    }

    .qf-chip-opt.active {
        background: linear-gradient(135deg, rgba(245, 130, 32, 0.12), rgba(86, 196, 248, 0.10));
        border-color: rgba(245, 130, 32, 0.55);
        color: #F58220;
        font-weight: 800;
        box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.15);
    }

/* ════════════════════════════════════════════════════════════
   QUICK FILTERS CUSTOMIZE MODAL
   ════════════════════════════════════════════════════════════ */
.qf-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 29, 32, 0.45);
    backdrop-filter: blur(6px);
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.28s ease;
}

    .qf-modal-backdrop.open {
        opacity: 1;
    }

.qf-modal {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(200%) blur(32px);
    -webkit-backdrop-filter: saturate(200%) blur(32px);
    border-radius: 22px;
    border: 1.5px solid rgba(255, 255, 255, 0.98);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.10);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.qf-modal-backdrop.open .qf-modal {
    transform: translateY(0) scale(1);
}

.qf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.055);
}

.qf-modal-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #1A1D20;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .qf-modal-title i {
        color: #56C4F8;
    }

.qf-modal-close {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    color: #6b7280;
    transition: all 0.2s ease;
}

    .qf-modal-close:hover {
        background: rgba(239, 68, 68, 0.09);
        color: #ef4444;
    }

.qf-modal-hint {
    font-size: 0.76rem;
    color: #9ca3af;
    padding: 10px 20px 4px;
    margin: 0;
    font-weight: 500;
}

.qf-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 16px;
}

.qf-modal-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.07);
    background: rgba(248, 249, 252, 0.8);
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    user-select: none;
    overflow: hidden;
}

    .qf-modal-card:hover {
        border-color: rgba(86, 196, 248, 0.4);
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(86, 196, 248, 0.12);
    }

    .qf-modal-card.selected {
        background: linear-gradient(135deg, rgba(245, 130, 32, 0.10), rgba(86, 196, 248, 0.08));
        border-color: rgba(245, 130, 32, 0.50);
        box-shadow: 0 0 0 2.5px rgba(245, 130, 32, 0.15);
    }

.qf-modal-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #6b7280;
    flex-shrink: 0;
    transition: all 0.22s ease;
}

.qf-modal-card.selected .qf-modal-card-icon {
    background: linear-gradient(135deg, #F58220, #56C4F8);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(245, 130, 32, 0.30);
}

.qf-modal-card > span {
    font-size: 0.80rem;
    font-weight: 600;
    color: #374151;
    flex: 1;
    min-width: 0;
}

.qf-modal-card.selected > span {
    color: #1A1D20;
    font-weight: 800;
}

.qf-modal-card-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .qf-modal-card-check i {
        font-size: 0.55rem;
        color: transparent;
        transform: scale(0);
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

.qf-modal-card.selected .qf-modal-card-check {
    background: linear-gradient(135deg, #F58220, #E8711A);
    border-color: transparent;
    box-shadow: 0 2px 7px rgba(245, 130, 32, 0.45);
}

    .qf-modal-card.selected .qf-modal-card-check i {
        color: #fff;
        transform: scale(1);
    }

@keyframes qfCardShake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.qf-modal-card-shake {
    animation: qfCardShake 0.35s ease;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

.qf-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    gap: 12px;
}

.qf-modal-count {
    font-size: 0.74rem;
    font-weight: 700;
    color: #9ca3af;
}

.qf-modal-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #F58220, #e07315);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 9px 22px;
    font-size: 0.80rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 14px rgba(245, 130, 32, 0.35);
}

    .qf-modal-save:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(245, 130, 32, 0.48);
    }

    .qf-modal-save:active {
        transform: scale(0.97);
    }

@media (max-width: 480px) {
    .qf-modal-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 10px 12px;
    }

    .qf-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .qf-modal {
        border-radius: 22px 22px 0 0;
        max-width: 100%;
    }
}

.qf-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

    .qf-inputs::-webkit-scrollbar {
        display: none;
    }

.qf-separator {
    font-size: 0.72rem;
    color: #d1d5db;
    flex-shrink: 0;
}

.qf-field {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(248, 249, 252, 0.9);
    border: 1.5px solid rgba(0, 0, 0, 0.07);
    border-radius: 12px;
    padding: 6px 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 0;
    position: relative;
}

    .qf-field:focus-within,
    .qf-field.has-value {
        border-color: rgba(245, 130, 32, 0.4);
        box-shadow: 0 0 0 2.5px rgba(245, 130, 32, 0.10);
    }

.qf-field-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #b0bac6;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex-shrink: 0;
}

/* qf-ai-badge removed — replaced with qf-customize-btn */

/* ── Price dropdown button ── */
.qf-price-wrap {
    position: relative;
}

.qf-price-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 0.80rem;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}

    .qf-price-btn:hover {
        color: #F58220;
    }

.qf-price-chevron {
    font-size: 0.6rem;
    color: #9ca3af;
    transition: transform 0.25s ease;
}

.qf-price-panel {
    /* JS owns ALL positioning — top/left/width set via getBoundingClientRect.
       position:fixed is set inline by JS. This rule only provides visual styling. */
    position: fixed;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    min-width: 175px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,0.98);
    box-shadow: 0 18px 48px rgba(0,0,0,0.13), 0 4px 12px rgba(0,0,0,0.07);
    z-index: 99500;
    overflow-y: auto;
    max-height: 260px;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}

.qf-price-item {
    padding: 8px 14px;
    font-size: 0.79rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .qf-price-item:hover {
        background: rgba(245,130,32,0.07);
        color: #F58220;
    }

    .qf-price-item.active {
        background: linear-gradient(135deg, rgba(245,130,32,0.10), rgba(86,196,248,0.08));
        color: #F58220;
        font-weight: 800;
    }

.qf-price-custom-wrap {
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(248,249,252,0.9);
    border: 1.5px solid rgba(86,196,248,0.35);
    border-radius: 8px;
}

.qf-currency {
    font-size: 0.74rem;
    font-weight: 700;
    color: #c4cdd6;
    flex-shrink: 0;
}

.qf-input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1A1D20;
    width: 100%;
    min-width: 0;
    padding: 0;
    caret-color: #F58220;
}

    .qf-input::placeholder {
        color: #d1d5db;
        font-weight: 400;
    }

.qf-clear {
    background: none;
    border: none;
    color: #d1d5db;
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s;
    line-height: 1;
    display: none; /* hidden by default; shown only when field has a value */
}

.qf-field.has-value .qf-clear {
    display: inline-flex;
    align-items: center;
    color: #b0bac6;
}

.qf-clear:hover {
    color: #ef4444;
}

/* ════════════════════════════════════════════════════════════
   7. GEMINI PRICE INSIGHT ROW — REMOVED v4
   Price insight removed; DYK bar is the sole AI insight surface.
   These selectors kept as empty tombstones to prevent 404 errors
   from any lingering references in cached HTML.
   ════════════════════════════════════════════════════════════ */
.gpi-row {
    display: none !important;
}

.gpi-icon, .gpi-text, .gpi-muted, .gpi-pulse {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   8. BENTO DROPDOWN z-index
   The SPT dropdown must float above the qf-row which sits below
   the composite bar. Solution: raise composite z-index above qf-row,
   and use position:fixed on the dropdown so it escapes all
   stacking contexts entirely — works on both desktop and mobile.
   ════════════════════════════════════════════════════════════ */
.search-console .spt-dropdown {
    /* Use fixed positioning to escape ALL stacking contexts.
       JS in spt-multiselect.js positions it via getBoundingClientRect. */
    position: fixed !important;
    z-index: 99000 !important; /* above everything */
    top: auto; /* overridden by JS */
    left: auto; /* overridden by JS */
}

/* On mobile the bento already uses position:fixed — keep that behavior */
@media (max-width: 767px) {
    .search-console .spt-dropdown {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* qf-row sits below composite in z-order */
.qf-row {
    position: relative;
    z-index: 10;
}

/* ════════════════════════════════════════════════════════════
   9. OLD TAG STRIP — suppressed
   ════════════════════════════════════════════════════════════ */
#sptTagStrip, .spt-tag-strip {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   10. RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .sac-row {
        padding: 7px 14px;
        min-height: 42px;
    }

    .loc-chip-row {
        padding: 6px 14px;
        gap: 6px;
    }

    .qf-row.visible {
        padding: 9px 14px 12px;
    }

    .qf-field {
        padding: 5px 8px;
    }

    .qf-customize-btn span {
        display: none;
    }
}

@media (max-width: 767px) {
    .sac-row {
        padding: 6px 12px;
        min-height: 40px;
        gap: 7px;
        border-radius: 10px 10px 0 0;
    }

    .sac-label, .sac-divider {
        display: none;
    }

    .sac-chip-rail {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .sac-chip {
        font-size: 0.7rem;
        padding: 4px 9px 4px 7px;
    }

    .sac-reset {
        display: none;
    }

    .loc-chip-row {
        padding: 5px 12px;
        gap: 5px;
        align-items: flex-start;
    }

    .lcr-label, .lcr-divider {
        display: none;
    }

    .lcr-hint {
        display: none;
    }

    /* On mobile the actions stack compactly */
    .lcr-actions {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding-top: 4px;
    }

    .lcr-chip-rail {
        max-height: calc(2 * (26px + 5px) + 4px); /* 2 rows on mobile */
    }

    .search-console.multi-active .search-bar-composite {
        border-radius: 0 !important;
    }

    .qf-row {
        border-radius: 0;
        overflow: visible !important; /* price panel must not be clipped */
    }

        .qf-row.visible {
            padding: 8px 12px 12px;
            /* NO max-height — was truncating filters on small screens */
        }

    .qf-inputs {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible; /* allow price panel to overflow downward */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

        .qf-inputs::-webkit-scrollbar {
            display: none;
        }

    .qf-field {
        padding: 5px 8px;
        border-radius: 10px;
        flex-shrink: 0;
        /* Adaptive min-width: toggle (icon-first) fields need less space */
        min-width: 70px;
        max-width: 140px;
    }

        /* Toggle/boolean fields get tighter sizing on mobile */
        .qf-field[data-type="toggle"],
        .qf-field:has(.qf-toggle-opt) {
            min-width: 0;
            padding: 4px 6px;
        }

    .qf-field-label {
        display: none;
    }

    .qf-separator {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .sac-chip {
        font-size: 0.67rem;
        padding: 3px 8px 3px 6px;
        gap: 4px;
    }

    .qf-inputs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .qf-separator {
        display: none;
    }

    .qf-field {
        flex-shrink: 0;
        min-width: 90px;
    }

    /* Very small screens: even tighter chips */
    .lcr-chip {
        font-size: 0.68rem;
        padding: 2px 7px 2px 6px;
        gap: 4px;
    }
}

/* ============================================================
   QF ACTIVE BADGE — shows count of active quick filters
   ============================================================ */
.qf-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F58220, #e07315);
    color: #fff;
    border-radius: 20px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 6px rgba(245, 130, 32, 0.35);
}

    .qf-active-badge.visible {
        opacity: 1;
        transform: scale(1);
        pointer-events: none;
    }

/* ── Customize modal: no 6-cap, grid scrolls if many filters ── */
.qf-modal {
    max-height: 90vh;
    overflow-y: auto;
}

.qf-modal-grid {
    grid-template-columns: 1fr 1fr;
    max-height: 50vh;
    overflow-y: auto;
    padding: 12px 16px;
}

/* ── Chip filter — chips stay on ONE row, scrollable if needed ── */
.qf-chip-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}

    .qf-chip-filter::-webkit-scrollbar {
        display: none;
    }

/* ── Toggle filter — Yes/No only, for boolean features ── */
.qf-toggle-opt {
    white-space: nowrap;
    min-width: max-content;
    padding: 3px 10px;
    font-size: 0.73rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .qf-toggle-opt i {
        font-size: 0.7rem;
        color: #9ca3af;
        transition: color 0.2s;
    }

    .qf-toggle-opt:hover i,
    .qf-toggle-opt.active i {
        color: #F58220;
    }

    .qf-toggle-opt.active {
        background: linear-gradient(135deg, rgba(245, 130, 32, 0.14), rgba(86, 196, 248, 0.10));
        border-color: rgba(245, 130, 32, 0.6);
        color: #F58220;
        font-weight: 800;
        box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.18);
    }

/* ── Mobile icon-first toggle pill ── */
/* On ≤480px, toggle filters show ONLY icon + short keyword, no "Required" text */
@media (max-width: 480px) {
    .qf-toggle-opt .qf-toggle-label {
        display: none; /* hide "Required" text */
    }

    .qf-toggle-opt .qf-toggle-short {
        display: inline; /* show short label e.g. "Solar", "Pool" */
    }

    .qf-toggle-opt {
        padding: 4px 10px;
        gap: 5px;
        font-size: 0.72rem;
        min-width: 0;
        /* Frosted glass chip look */
        background: rgba(255, 255, 255, 0.85);
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        border-radius: 20px;
        backdrop-filter: blur(8px);
    }

        .qf-toggle-opt i {
            font-size: 0.82rem; /* larger icon on mobile for clarity */
        }

        .qf-toggle-opt.active {
            background: linear-gradient(135deg, rgba(245, 130, 32, 0.14), rgba(86, 196, 248, 0.10));
            box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.22), 0 3px 10px rgba(245, 130, 32, 0.15);
        }
}

/* Desktop: show full "Required" text, hide short label */
@media (min-width: 481px) {
    .qf-toggle-opt .qf-toggle-short {
        display: none;
    }

    .qf-toggle-opt .qf-toggle-label {
        display: inline;
    }
}

/* ── SPT dropdown z-index fix — above qf-row always ── */
/* NOTE: The dropdown is moved to <body> by JS (spt-multiselect.js),
   so position:fixed escapes ALL backdrop-filter stacking contexts.
   These z-index rules are belt-and-suspenders. */
.search-bar-composite {
    z-index: 200;
}

    .search-bar-composite .spt-dropdown,
    .search-console .spt-dropdown {
        z-index: 99500 !important; /* Matches spt-multiselect.css mobile value — consistent */
    }

/* ── Responsive: qf-inputs scrollable on mobile ── */
@media (max-width: 767px) {
    .qf-inputs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
    }

        .qf-inputs::-webkit-scrollbar {
            display: none;
        }

    .qf-field {
        flex-shrink: 0;
        min-width: 70px;
        max-width: 140px;
    }

        /* Toggle fields (solar/pool/security): icon + short label — minimal footprint */
        .qf-field:has(.qf-toggle-opt) {
            min-width: 0;
            padding: 4px 6px;
        }

    .qf-chip-filter {
        max-width: 100%;
        overflow-x: auto;
    }

    .qf-chip-opt {
        font-size: 0.72rem;
        padding: 2px 7px;
    }

    .qf-modal-grid {
        grid-template-columns: 1fr 1fr;
        max-height: 45vh;
    }
}

@media (max-width: 480px) {
    .qf-modal-grid {
        grid-template-columns: 1fr;
    }

    .qf-chip-opt {
        font-size: 0.70rem;
        padding: 2px 6px;
    }

    /* On ≤480px the toggle opts are already restyled by the icon-first block above */
    .qf-toggle-opt {
        padding: 4px 10px;
        font-size: 0.72rem;
    }
}


/* ════════════════════════════════════════════════════════════
     ALIGNMENT FIX v6 — Collapsed Smart Search row spacing
     Row stays full-width with its border. No margin-bottom gap
     needed since the border itself flows into DYK cleanly.
     Small-screen addition to prevent row overlap.
     ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .omni-nlp-row.omni-nlp-collapsed {
        margin-bottom: 2px;
    }
}