/* ============================================================
   SEARCH & MAIN FEATURES — Enhanced Liquid Glass v2
   ============================================================ */

/* Search Section */
.search-section {
    position: relative;
    z-index: 1;
    min-height: 100%;
    padding-left: 90px !important;
}

@media (max-width: 991px) {
    .search-section {
        padding-left: 16px !important;
    }
}

.search-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, transparent, #F4F7F9);
    z-index: -1;
    pointer-events: none;
}

/* Top Bar */
.search-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ── NAV PILLS — Enhanced Visibility ── */
.bg-pill-container {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(200%) blur(24px);
    -webkit-backdrop-filter: saturate(200%) blur(24px);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
    padding: 5px !important;
    border-radius: 60px !important;
    /* Prevent any overflow clipping on small screens */
    flex-shrink: 0;
}

.scrollable-pills {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    gap: 2px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

    .scrollable-pills::-webkit-scrollbar {
        display: none;
    }

.nav-pill {
    background: transparent;
    border: none;
    color: #4A5568;
    /* Fluid padding — avoids clipping on small screens */
    padding: 9px clamp(14px, 3.5vw, 26px);
    border-radius: 50px;
    font-weight: 700;
    font-size: clamp(0.75rem, 2.2vw, 0.875rem);
    letter-spacing: 0.02em;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    cursor: pointer;
    z-index: 1;
    white-space: nowrap;
    /* Ensure text never clips */
    flex-shrink: 0;
    line-height: 1.2;
}

    .nav-pill:hover {
        color: #1A1D20;
        background: rgba(255, 255, 255, 0.65);
    }

    .nav-pill.active {
        background: #FFFFFF;
        color: #F58220;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
        transform: scale(1.03);
    }

/* ── SEARCH BAR COMPOSITE — Bright White Glass ── */
.search-bar-composite {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(200%) blur(28px);
    -webkit-backdrop-filter: saturate(200%) blur(28px);
    border: 1.5px solid rgba(255, 255, 255, 0.98);
    border-bottom: 1.5px solid rgba(230, 235, 240, 0.8);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: stretch;
    position: relative;
    width: 100%;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
    overflow: visible; /* Allow dropdown to escape */
}

    .search-bar-composite:focus-within {
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(86, 196, 248, 0.6);
        box-shadow: 0 0 0 3.5px rgba(86, 196, 248, 0.18), 0 12px 36px rgba(0, 0, 0, 0.10);
        /* BUG FIX: translateY removed — shifting the whole bar container causes
           child button hit-areas to drift, contributing to edge-hover rattle. */
        transform: none;
    }

    /* ── AI Smart Search MODE — active border indicator ─────
       Applied when the AI toggle is pressed. The 1px solid orange border
       signals to the user that natural-language smart-search is active.
       Wins over :focus-within via specificity (.ai-mode takes priority). */
    .search-bar-composite.ai-mode {
        border: 1px solid #F58220 !important;
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.14), 0 12px 36px rgba(0, 0, 0, 0.10);
        background: rgba(255, 255, 255, 0.98);
    }

/* ── Property Type Trigger ── */
.search-proptype-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: none;
    border-right: 1.5px solid rgba(26, 29, 32, 0.28);
    padding: 0 18px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: #2D3748;
    min-width: 13%;
    max-width: 24%;
    white-space: nowrap;
    transition: all 0.25s ease;
    border-radius: 20px 0 0 20px;
}

    .search-proptype-trigger:hover {
        background: rgba(245, 130, 32, 0.06);
        color: #F58220;
    }

    .search-proptype-trigger .spt-label {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .search-proptype-trigger .spt-chevron {
        font-size: 0.7rem;
        color: black;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        margin-left: auto;
        flex-shrink: 0;
    }

    .search-proptype-trigger.open .spt-chevron {
        transform: rotate(180deg);
    }

/* ── Mobile trigger: icon-only compact ── */
@media (max-width: 480px) {
    .search-proptype-trigger {
        min-width: 42px;
        max-width: 64px;
        padding: 0 10px 0 12px;
        gap: 4px;
    }

        /* Hide text label on ≤480px — icon + chevron is sufficient */
        .search-proptype-trigger .spt-label {
            display: none;
        }

        /* When multi-selection on mobile, show count label */
        .search-proptype-trigger.has-selection .spt-label {
            display: inline;
            font-size: 0.72rem;
            max-width: 48px;
        }
}

/* ── Property Type Dropdown ── */
.spt-dropdown {
    position: fixed; /* JS-positioned via getBoundingClientRect */
    top: auto;
    left: auto;
    min-width: 240px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(200%) blur(28px);
    -webkit-backdrop-filter: saturate(200%) blur(28px);
    border-radius: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.07);
    z-index: 99000; /* escapes all stacking contexts via fixed */
    overflow: hidden;
    display: none;
    animation: spt-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .spt-dropdown.open {
        display: block;
    }

@keyframes spt-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }

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

.spt-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: #2D3748;
    transition: all 0.18s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

    .spt-item:last-child {
        border-bottom: none;
    }

    .spt-item i {
        font-size: 1rem;
        color: #9ca3af;
        width: 20px;
        text-align: center;
        flex-shrink: 0;
        transition: color 0.2s;
    }

    .spt-item:hover {
        background: rgba(245, 130, 32, 0.06);
        color: #F58220;
        padding-left: 24px;
    }

        .spt-item:hover i,
        .spt-item.active i {
            color: #F58220;
        }

    .spt-item.active {
        background: rgba(245, 130, 32, 0.08);
        color: #F58220;
        font-weight: 800;
    }

/* ── Main Search Input ── */
.main-search-input {
    background: transparent !important;
    border: none !important;
    color: #1A1D20;
    padding: 16px 20px 16px 20px;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: none !important;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /* Right padding reserves space for: clear(X) + voice + AI + trends (all 34px icons) */
    padding-right: 170px;
}

    .main-search-input:focus {
        outline: none;
        background: transparent !important;
        box-shadow: none !important;
    }

    .main-search-input::placeholder {
        color: #B0BAC6;
        font-weight: 400;
    }

/* ── Clear Button ── */
.sa-input-clear {
    position: absolute;
    right: 180px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.07);
    color: #6b7280;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

    .sa-input-clear:hover {
        background: #ef4444;
        color: #fff;
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

/* ════════════════════════════════════════════════════════════
   INLINE ACTION ICONS CLUSTER
   ────────────────────────────────────────────────────────────
   Wraps the 4 inline buttons (clear / AI / voice / trends) in a
   single absolutely-positioned flex row anchored to the right
   edge of the search bar. The previous individual right:Npx
   positions are now neutralized for child buttons inside the
   cluster — flex-gap handles spacing automatically, so icons
   never overlap regardless of viewport width.

   The trends icon stays in this cluster at every breakpoint per
   user request (no more "moves outside the bar" behavior).
   ════════════════════════════════════════════════════════════ */
.search-input-icons {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    /* Fluid gap — tightens slightly on narrow screens */
    gap: clamp(4px, 1.2vw, 10px);
    z-index: 5;
    pointer-events: none; /* let the input under us still receive clicks in the gap */
}

    /* Re-enable pointer events on the actual buttons */
    .search-input-icons > button {
        pointer-events: auto;
    }

    /* Children: drop the absolute positioning when inside the cluster.
       The original rules set position:absolute + right:Npx; we override
       both so flex layout takes over and the buttons sit as siblings. */
    .search-input-icons .btn-voice-search,
    .search-input-icons .btn-ai-search,
    .search-input-icons .btn-trends-icon,
    .search-input-icons .btn-input-clear,
    .search-input-icons .sa-input-clear {
        position: static;
        right: auto;
        top: auto;
        /* Remove translateY — the cluster itself is centred via translateY */
        transform: none;
        flex-shrink: 0;
    }

        /* CRITICAL ALIGNMENT FIX (v10.2):
       The base .btn-input-clear.visible rule applies translateY(-50%) which
       belongs in the OLD absolute-positioned context where top:50% existed.
       Inside this flex cluster top:50% is gone, so translateY(-50%) shifts
       the X icon UP by half its height — which is exactly the misalignment
       the user reported (the X sits visibly higher than the AI sparkle).
       We force transform:none here AND raise specificity (.visible) so the
       cleared rule wins. align-items:center on the parent does the rest. */
        .search-input-icons .btn-input-clear,
        .search-input-icons .btn-input-clear.visible,
        .search-input-icons .btn-input-clear:hover,
        .search-input-icons .btn-input-clear.visible:hover,
        .search-input-icons .sa-input-clear,
        .search-input-icons .sa-input-clear:hover {
            position: static;
            top: auto;
            right: auto;
            transform: none;
        }

            /* Hover transforms — keep wrapper size stable to avoid edge rattle.
               v14: the AI button is locked OUT of the hover-scale list. It has
               its own moving parts inside the SVG (pulsing core + scan beam);
               a button-level scale on top of those reads as fidgety. Voice and
               trends keep their soft 1.08× scale — they're pure-stroke single-
               element glyphs with no inner motion of their own. */
            .search-input-icons .btn-voice-search:hover,
            .search-input-icons .btn-trends-icon:hover,
            .search-input-icons .btn-input-clear:hover,
            .search-input-icons .sa-input-clear:hover {
                transform: scale(1.08);
            }

        /* AI button: NO transform in any state.
           v14 reinstates the v10.2 lock-down idea, but for a different reason:
           the icon has internal SVG animations now (sj-anim-pulse-fast +
           btn-ai-glyph-scan), so adding a button-level transform on hover
           would compound motion. The shell stays still; the glyph parts move. */
        .search-input-icons .btn-ai-search,
        .search-input-icons .btn-ai-search:hover,
        .search-input-icons .btn-ai-search:focus,
        .search-input-icons .btn-ai-search:focus-visible,
        .search-input-icons .btn-ai-search:active,
        .search-input-icons .btn-ai-search.pressed,
        .search-input-icons .btn-ai-search.pressed:hover,
        .search-input-icons .btn-ai-search.pressed:focus,
        .search-input-icons .btn-ai-search.pressed:focus-visible,
        .search-input-icons .btn-ai-search.pressed:active {
            transform: none;
        }

        /* Trends pressed/active states — keep their scale-down feel. */
        .search-input-icons .btn-trends-icon.td-active {
            transform: scale(0.94);
        }

            .search-input-icons .btn-trends-icon.td-active:hover {
                transform: scale(0.96);
            }

        /* Voice listening pulse — translateY is gone, keep scale animation */
        .search-input-icons .btn-voice-search.listening {
            animation: voice-pulse-cluster 1.2s ease-in-out infinite;
        }

@keyframes voice-pulse-cluster {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* The right padding on the input is what the cluster occupies.
   Width is approximately: 4 × 34px buttons + 3 × 8px gaps + 10px right
   = ~150px on desktop. We keep the existing padding-right:170px on
   .main-search-input which gives the cluster a 20px breathing zone. */

/* ── Voice Search Button ──
   Positioned inline with the AI + Trends icons. Always visible on every
   breakpoint — mobile users need voice too. */
.btn-voice-search {
    position: absolute;
    right: 92px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    font-size: 1rem;
    border-radius: 50%;
    z-index: 4;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

    .btn-voice-search:hover {
        color: #F58220;
        background: rgba(245, 130, 32, 0.1);
        transform: translateY(-50%) scale(1.1);
    }

    .btn-voice-search.listening {
        color: white;
        background: #ef4444;
        animation: voice-pulse 1.2s ease-in-out infinite;
        box-shadow: 0 0 14px rgba(239, 68, 68, 0.45);
    }

@keyframes voice-pulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.15);
    }
}

/* ════════════════════════════════════════════════════════════
   DESCRIBE-IT TOGGLE BUTTON
   v15 — TRIO-MATCHED, CHARCOAL IDLE, ORANGE PRESSED
   --------------------------------------------------------------
   Earlier iterations went through a white-disc chip (v11), a
   bare orange glyph with an orange hover wash (v13), and a
   deepened-orange glyph with no chip (v14). The user's call for
   v15: drop the orange-as-default entirely. The Describe-It icon
   should be drawn in EXACTLY the same visual language as the
   bottom-trio (Privacy / Settings / Terms): charcoal #1A1A1F
   strokes with a brand-orange pulsing core jewel and a soft
   scan beam, all on a transparent shell. When the user toggles
   Describe-It on, the whole glyph flips charcoal → orange in
   one decisive colour shift — the pressed state is finally a
   real, unmistakable state change.

   Wrapperless commitments from v13/v14 stay in place:
     • Background is transparent in EVERY state. No chip.
     • No hover scale. The icon never moves position. Inner
       SVG animation (sj-anim-pulse-fast + btn-ai-glyph-scan)
       carries the motion.

   State strategy:
     • Idle      — charcoal #1A1A1F strokes (currentColor) on
                   the speech bubble + text lines + scan beam.
                   Pulsing core is hard-coded brand orange.
                   Reads as identical to the bottom-trio icons.
     • Hover     — strokes darken slightly to pure-black #000
                   for a quiet "you're on it" cue; subtle
                   colour-matched drop-shadow on the strokes.
                   Core jewel stays orange.
     • Pressed   — strokes flip to brand orange #F58220
                   (the icon becomes its own pop-colour). Core
                   deepens to #E66A0E so it still stands out
                   slightly against the now-orange strokes.
                   Scan beam tempo accelerates 3s → 1.6s.
                   Soft orange drop-shadow blooms beneath the
                   strokes. Clear, visible state change.
   ════════════════════════════════════════════════════════════ */
.btn-ai-search {
    position: absolute;
    right: 52px;
    top: 50%;
    /* Match the voice / trends footprint so the three icons line up. */
    transform: translateY(-50%) translateZ(0);
    width: 34px;
    height: 34px;
    /* IDLE: wrapperless. No disc, no border, no shadow, no halo. */
    background: transparent;
    /* v15 — charcoal default, matching the trio's stroke colour. The SVG
       inherits via stroke="currentColor" so every stroke (bubble path,
       three text lines, scan beam) picks this up. The core jewel circle
       has fill="#F58220" hard-coded inline, so it stays orange even when
       the rest of the glyph is charcoal — exactly the trio idiom. */
    color: #1A1A1F;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
    border-radius: 50%;
    z-index: 4;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: none;
    /* Transitions limited to colour + filter. NO transform transition. */
    transition: color 0.25s ease, filter 0.25s ease;
}

    /* Bootstrap icon glyph (legacy fallback if any other place still uses `<i>`) */
    .btn-ai-search i {
        position: relative;
        z-index: 2;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transition: filter 0.25s ease;
        color: inherit;
    }

    /* Speech-bubble SVG glyph. Stroke colour follows the parent's
       `color` property via currentColor (set on the SVG element
       attribute stroke="currentColor"). Width matches the trio's
       sizing rhythm relative to the 34×34 shell. */
    .btn-ai-search .btn-ai-glyph {
        position: relative;
        z-index: 2;
        width: 22px;
        height: 22px;
        color: inherit;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transition: filter 0.25s ease;
        overflow: visible;
    }

        /* v15 — the core jewel keeps its brand-orange fill regardless of
       button state. Hard-coded #F58220 in the SVG markup; restating
       here defensively in case a more specific rule elsewhere tries
       to zero it out. */
        .btn-ai-search .btn-ai-glyph .btn-ai-glyph-core,
        .btn-ai-search .btn-ai-glyph .sj-anim-pulse-fast {
            fill: #F58220;
            stroke: none;
            transition: fill 0.25s ease;
        }

        /* Scan beam inherits stroke from currentColor — flips colour
       with the rest of the glyph on press. */
        .btn-ai-search .btn-ai-glyph .btn-ai-glyph-scan {
            stroke: currentColor;
        }

/* Pulse halo — permanently disabled. The pulse element survives in
   markup for backwards compatibility but never renders. */
.btn-ai-pulse {
    display: none !important;
}

@keyframes ai-pulse {
    0%, 100% {
        transform: scale(0.7) translateZ(0);
        opacity: 0;
    }

    50% {
        transform: scale(0.7) translateZ(0);
        opacity: 0;
    }
}

/* Legacy breathing-halo keyframe kept as a no-op for any older code
   that still references the name. */
@keyframes ai-breathe {
    0%, 100% {
        box-shadow: none;
    }

    50% {
        box-shadow: none;
    }
}

/* Reduced-motion: strip filter transitions so the colour change is
   instant. The SVG animations (.sj-anim-pulse-fast / .btn-ai-glyph-scan)
   are killed globally by the @media block in site.css. */
@media (prefers-reduced-motion: reduce) {
    .btn-ai-search {
        transition: color 0.15s ease;
    }

        .btn-ai-search:hover .btn-ai-glyph,
        .btn-ai-search.pressed .btn-ai-glyph {
            filter: none;
        }
}

/* ── HOVER / FOCUS / ACTIVE — IDLE BUTTON ──────────────────────
   v15: strokes deepen from charcoal #1A1A1F → pure-black #000
   for a quiet "you're on it" cue. Background stays transparent.
   Geometry does not change. Core jewel stays orange. */
.btn-ai-search:hover,
.btn-ai-search:focus,
.btn-ai-search:focus-visible,
.btn-ai-search:active {
    background: transparent;
    color: #000000;
    border: none;
    /* Same translateY as idle — explicitly identical to defeat any
       inherited transform from cluster-level rules. */
    transform: translateY(-50%) translateZ(0);
    box-shadow: none;
}

    .btn-ai-search:hover i,
    .btn-ai-search:focus i,
    .btn-ai-search:active i,
    .btn-ai-search:hover .btn-ai-glyph,
    .btn-ai-search:focus .btn-ai-glyph,
    .btn-ai-search:active .btn-ai-glyph {
        color: #000000;
        /* Soft charcoal drop-shadow — premium "gaining presence" cue
           that doesn't move the icon. Matches the trio's hover idiom
           in auth-widget.css (.settings-btn:hover .fab-icon-svg gets a
           drop-shadow filter as well). */
        filter: drop-shadow(0 2px 6px rgba(26, 26, 31, 0.30));
    }

/* ── PRESSED / ACTIVE STATE ─────────────────────────────
   v15: Describe-It mode is engaged. The shell STAYS transparent
   (no disc, no chip). State communicates through a DRAMATIC,
   unmistakable colour shift: every charcoal stroke in the glyph
   flips to brand orange #F58220 in one go. The core deepens to
   #E66A0E so it still pops against the now-orange strokes. Scan
   beam tempo accelerates to 1.6s. A soft orange drop-shadow
   blooms beneath the strokes to read as "locked on". */
.btn-ai-search.pressed {
    background: transparent;
    color: #F58220; /* the colour flip — every stroke turns orange */
    border: none;
    box-shadow: none;
    animation: none;
}

    /* Core jewel deepens to a richer sunset orange in pressed state so
       it still stands out against the now-orange strokes. Without this
       it would visually merge with the stroke colour. */
    .btn-ai-search.pressed .btn-ai-glyph .btn-ai-glyph-core,
    .btn-ai-search.pressed .btn-ai-glyph .sj-anim-pulse-fast {
        fill: #E66A0E;
    }

    /* Speed up the scan beam when pressed — re-target the keyframe
       with a faster duration. Same idiom as the trio's fab-*-scan
       animations, just accelerated. */
    .btn-ai-search.pressed .btn-ai-glyph .btn-ai-glyph-scan {
        animation: btn-ai-glyph-scan-sweep 1.6s ease-in-out infinite;
        /* Bump opacity too — the active scan should feel more present
           than the ambient idle one. */
        opacity: 0.85;
    }

    .btn-ai-search.pressed i,
    .btn-ai-search.pressed .btn-ai-glyph {
        color: #F58220;
        /* Stronger glow announces "locked on". Two stacked shadows:
           a tight inner bloom and a softer lift, both colour-matched
           to the new orange stroke. */
        filter: drop-shadow(0 0 5px rgba(245, 130, 32, 0.55)) drop-shadow(0 1px 3px rgba(245, 130, 32, 0.40));
    }

    .btn-ai-search.pressed .btn-ai-pulse {
        display: none !important;
    }

    /* Pressed hover/focus — same look (the pressed state IS the
       affordance; hovering it shouldn't add or remove anything). */
    .btn-ai-search.pressed:hover,
    .btn-ai-search.pressed:focus,
    .btn-ai-search.pressed:focus-visible,
    .btn-ai-search.pressed:active {
        background: transparent;
        color: #F58220;
        border: none;
        box-shadow: none;
        transform: translateY(-50%) translateZ(0);
    }

        .btn-ai-search.pressed:hover i,
        .btn-ai-search.pressed:focus i,
        .btn-ai-search.pressed:active i,
        .btn-ai-search.pressed:hover .btn-ai-glyph,
        .btn-ai-search.pressed:focus .btn-ai-glyph,
        .btn-ai-search.pressed:active .btn-ai-glyph {
            color: #F58220;
            filter: drop-shadow(0 0 6px rgba(245, 130, 32, 0.65)) drop-shadow(0 1px 3px rgba(245, 130, 32, 0.40));
        }

/* ════════════════════════════════════════════════════════════
   INLINE CLEAR (X) BUTTON
   Sits at the far right inside the input. Hidden by default —
   shown only when AI mode is active AND the input has content.
   ════════════════════════════════════════════════════════════ */
.btn-input-clear {
    position: absolute;
    right: 132px;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 0.06);
    color: #6b7280;
    border: none;
    border-radius: 50%;
    display: none; /* toggled to flex via .visible */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s ease;
}

    .btn-input-clear.visible {
        display: flex;
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    .btn-input-clear:hover {
        background: #ef4444;
        color: #ffffff;
        transform: translateY(-50%) scale(1.1);
    }

/* ── Live Trends Button — always inside bar, never overflows input ── */
.btn-trends {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1.5px solid rgba(86, 196, 248, 0.45);
    color: #1A6B9A;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    /* Use padding + height rather than fixed px so it scales */
    padding: 6px 14px;
    height: auto;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(86, 196, 248, 0.18);
    transition: all 0.28s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    flex-shrink: 0;
}

    .btn-trends:hover {
        background: linear-gradient(135deg, #56C4F8 0%, #2b95ce 100%);
        color: #fff;
        border-color: transparent;
        /*
         * BUG FIX — cursor rattle on button edge hover:
         * translateY(-1px) lifts the button toward the cursor causing rapid
         * mouseenter/mouseleave on the top edge. Removed; box-shadow conveys lift.
         */
        transform: none;
        box-shadow: 0 6px 20px rgba(86, 196, 248, 0.35);
    }

    .btn-trends.td-active {
        background: #1A1D20;
        color: #FFF;
        border-color: transparent;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.2);
        transform: translateY(1px);
    }

/* Trends button position — legacy pill wrapper (kept for reference, now unused on desktop) */
.trends-btn-wrapper {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
}

/* ════════════════════════════════════════════════════════════
   LIVE TRENDS — ICON VARIANT (inside the search bar, desktop)
   Matches the voice + AI icon pattern: 34×34 circle, native [title]
   tooltip, subtle hover affordance, clear pressed state when the
   trends dashboard is open.
   ════════════════════════════════════════════════════════════ */
.btn-trends-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1A6B9A;
    font-size: 1.02rem;
    border-radius: 50%;
    z-index: 4;
    transition: color 0.22s ease, background 0.22s ease, transform 0.22s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.22s ease;
}

    .btn-trends-icon i {
        position: relative;
        z-index: 2;
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .btn-trends-icon:hover {
        color: #56C4F8;
        background: rgba(86, 196, 248, 0.12);
        transform: translateY(-50%) scale(1.1);
    }

        .btn-trends-icon:hover i {
            transform: translateY(-1px);
        }

    /* Pressed / active state — mirrors the AI button's "in-use" visual so
       all three icons share the same grammar: solid fill + scale 0.94. */
    .btn-trends-icon.td-active {
        background: linear-gradient(135deg, #56C4F8, #2b95ce);
        color: #ffffff;
        transform: translateY(-50%) scale(0.94);
        box-shadow: 0 2px 6px rgba(86, 196, 248, 0.45), inset 0 2px 4px rgba(0, 0, 0, 0.18);
    }

        .btn-trends-icon.td-active:hover {
            transform: translateY(-50%) scale(0.96);
        }

.btn-trends-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reserve input space for clear + voice + AI + trends icons */
.main-search-input.has-trends {
    padding-right: 170px;
}

/* ── Filter Button ── */
.filter-btn {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(200%) blur(20px);
    -webkit-backdrop-filter: saturate(200%) blur(20px);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    color: #2D3748;
    border-radius: 18px;
    padding: 0px 20px;
    font-weight: 700;
    font-size: 0.88rem;
    height: 50px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    transition: all 0.28s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    cursor: pointer;
}

    .filter-btn i {
        font-size: 1rem;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .filter-btn:hover {
        background: rgba(255, 255, 255, 0.98);
        color: #F58220;
        /*
         * BUG FIX — cursor rattle: translateY(-1px) removed for same reason
         * as search-action-btn and btn-trends. Box-shadow provides the lift feel.
         */
        transform: none;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
    }

        .filter-btn:hover i {
            transform: rotate(30deg);
        }

    .filter-btn.active,
    .filter-btn[aria-expanded="true"] {
        background: #FFFFFF;
        color: #F58220;
        border-color: rgba(245, 130, 32, 0.4);
        box-shadow: 0 6px 20px rgba(245, 130, 32, 0.15);
    }

.filter-count-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #F58220;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 3px 8px rgba(245, 130, 32, 0.4);
    z-index: 10;
    padding: 0 4px;
    animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .filter-count-badge.visible {
        display: flex;
    }

@keyframes badge-pop {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* ── Search Action Button ── */
.search-action-btn {
    background: linear-gradient(135deg, #1A1D20 0%, #2d3139 100%);
    color: white;
    border: none;
    border-radius: 18px;
    padding: 0 26px;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
    transition: all 0.28s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    .search-action-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(245,130,32,0) 0%, rgba(245,130,32,0.3) 100%);
        opacity: 0;
        transition: opacity 0.28s ease;
    }

    .search-action-btn:hover {
        /*
         * BUG FIX — cursor rattle on button edge hover:
         * transform: translateY(-2px) physically lifts the button toward the cursor.
         * When hovering near the top edge, the button moves up into the cursor,
         * which then exits the element's layout hit-area, triggering mouseleave,
         * which drops the button back — causing a rapid hover on/off rattle loop.
         *
         * Fix: remove the Y-axis translate. Use box-shadow depth change alone to
         * convey the "lift" feel without moving the hit-test boundary.
         */
        transform: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
        background: linear-gradient(135deg, #2d3139 0%, #F58220 100%);
        color: white;
    }

        .search-action-btn:hover::after {
            opacity: 1;
        }

    .search-action-btn:active {
        transform: translateY(1px);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    }

.search-btn-group {
    align-self: flex-start !important;
    padding-top: 0;
    overflow: visible;
    flex-shrink: 0;
}

/* ── Trends Hint ── */
.trends-hint {
    background: rgba(26, 29, 32, 0.88);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.83rem;
    color: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: top center;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

    .trends-hint::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: #F58220;
        border-radius: 14px 0 0 14px;
    }

    .trends-hint i.text-warning {
        color: #F58220 !important;
        font-size: 1.1rem;
        filter: drop-shadow(0 0 6px rgba(245, 130, 32, 0.5));
        flex-shrink: 0;
    }

    .trends-hint.hint-hidden {
        opacity: 0;
        transform: scaleY(0.8) translateY(-12px);
        pointer-events: none;
        margin-top: -56px;
    }

.trends-hint-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
    flex-shrink: 0;
}

    .trends-hint-close:hover {
        background: rgba(239, 68, 68, 0.8);
        transform: rotate(90deg);
    }

/* ── Autocomplete Dropdown ── */
.sa-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(200%) blur(28px);
    -webkit-backdrop-filter: saturate(200%) blur(28px);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.10), 0 6px 16px rgba(0, 0, 0, 0.06);
    z-index: 10000;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #F58220 rgba(0,0,0,0.04);
}

    .sa-autocomplete-dropdown::-webkit-scrollbar {
        width: 5px;
    }

    .sa-autocomplete-dropdown::-webkit-scrollbar-track {
        background: transparent;
    }

    .sa-autocomplete-dropdown::-webkit-scrollbar-thumb {
        background: rgba(245, 130, 32, 0.45);
        border-radius: 10px;
    }

.sa-ac-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 20px;
    cursor: pointer;
    transition: all 0.18s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

    .sa-ac-item:last-child {
        border-bottom: none;
    }

    .sa-ac-item:hover,
    .sa-ac-item--active {
        background: rgba(245, 130, 32, 0.05);
        padding-left: 24px;
    }

        .sa-ac-item:hover .sa-ac-main,
        .sa-ac-item--active .sa-ac-main {
            color: #F58220;
        }

.sa-ac-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.sa-ac-main {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a1d20;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.sa-ac-secondary {
    font-size: 0.74rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-ac-icon {
    color: #F58220;
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Geo tooltip ── */
.geo-tooltip-wrap {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
   ════════════════════════════════════════════════════════════ */

/* Tablet / iPad (768px – 1023px) */
@media (max-width: 1023px) {
    /* Reserve space for 3 in-bar icons + clear */
    .main-search-input.has-trends {
        padding-right: 160px;
    }

    .btn-trends-icon {
        right: 10px;
    }

    .btn-ai-search {
        right: 48px;
    }

    .btn-voice-search {
        right: 86px;
    }

    .btn-input-clear {
        right: 124px;
    }

    .sa-input-clear {
        right: 124px;
    }
}

/* Mobile large (≤767px) — trends now stays INSIDE the bar (the cluster
   handles all 4 icons together). The duplicate #trendsBtnMobile in the
   button group has been removed from the markup. */
@media (max-width: 767px) {
    .search-proptype-trigger {
        display: none;
    }

    .search-bar-composite {
        border-radius: 3px;
    }

    /* Reserve space for all 4 cluster icons: clear + AI + voice + trends.
       v12 — bumped from 158px to 172px so the floating .sa-input-clear
       (the X that appears after voice dictation) has its own slot to the
       LEFT of the cluster without overlapping any cluster icon. */
    .main-search-input.has-trends {
        padding-right: 172px;
    }

    .btn-voice-search {
        right: 44px;
    }

    .btn-ai-search {
        right: 8px;
    }

    .btn-input-clear {
        right: 82px;
    }

    /* BUG C fix — places.js appends .sa-input-clear OUTSIDE the
       .search-input-icons cluster, so it stays absolutely-positioned
       even on mobile. The previous right:82px landed it on top of the
       Describe-It icon when the voice mic flow filled the input. We now
       push it far enough left to clear the entire cluster footprint
       (AI 36 + voice 34 + trends 34 + 2×8 gap + 10 right ≈ 130px) plus a
       safety margin for the listening pulse animation (scale 1.15× on
       the mic = ~5px extra each side). */
    .sa-input-clear {
        right: 144px;
    }

    .sa-autocomplete-dropdown {
        max-height: 260px;
    }

    .search-btn-group {
        padding-top: 0;
    }
}

/* Mobile small — iPhone SE / 6 / 375px */
@media (max-width: 480px) {
    .nav-pill {
        padding: 8px clamp(10px, 4vw, 18px);
        font-size: 0.78rem;
    }

    .main-search-input {
        font-size: 0.92rem;
        padding-left: 14px;
        /* Cluster needs ~120px on this width: 3 icons (32+30+32) + 2×6 gap + 8 right ≈ 114px.
           Add 36px reserve for the floating .sa-input-clear sitting to the left of the cluster. */
        padding-right: 152px;
    }

    /* Tighten cluster gap on narrow screens */
    .search-input-icons {
        gap: 6px;
        right: 8px;
    }

    .btn-voice-search {
        right: 42px;
        width: 30px;
        height: 30px;
        font-size: 0.92rem;
    }

    .btn-ai-search {
        right: 8px;
        /* v13 — match the voice mic exactly so the cluster reads as a row
           of identical icons on small screens too. */
        width: 30px;
        height: 30px;
        font-size: 0.98rem;
    }

        .btn-ai-search .btn-ai-glyph {
            /* v13 — bumped (18→20) so the glyph stays generous without
               the old disc wrapper to give it weight. */
            width: 20px;
            height: 20px;
        }

    .btn-ai-pulse {
        width: 32px;
        height: 32px;
    }

    .btn-input-clear {
        right: 76px;
        width: 22px;
        height: 22px;
    }

    /* BUG C fix — see ≤767px rule above. On ≤480px the cluster is
       slightly tighter (~120px from the right edge), so 126px keeps the
       X clear of the AI icon even during the listening pulse animation. */
    .sa-input-clear {
        right: 126px;
        width: 24px;
        height: 24px;
    }

    .filter-btn,
    .search-action-btn {
        height: 44px;
        padding: 0 16px;
        font-size: 0.82rem;
    }

    .search-action-btn {
        padding: 0 18px;
    }
}

/* Very small — iPhone 5 / 320px */
@media (max-width: 360px) {
    .nav-pill {
        padding: 7px 10px;
        font-size: 0.72rem;
    }

    .filter-btn span,
    .search-action-btn span {
        display: none;
    }

    .filter-btn,
    .search-action-btn {
        padding: 0 14px;
        gap: 0;
    }
}

/* ============================================================
   SEARCH ROW GRID — cross-browser alignment fix
   Replaces the old flex-column/flex-lg-row approach that
   caused the button group to float above or below the bar
   depending on the browser and whether the hint was visible.

   Named grid areas make the layout explicit and deterministic:

   Desktop (≥992px):
     "hint   hint   ."
     "bar    bar    btns"
     "dyk    dyk    ."

   The button group is pinned to the "bar" row — it will
   always be vertically centred against the search composite,
   regardless of the hint being present or absent.

   Mobile (<992px): single column, everything stacks naturally.
   ============================================================ */

.search-row-grid {
    display: grid;
    /* Mobile default: single column with deterministic order:
       hint → bar → dyk → btns (Filters + Search drop BELOW the bar
       at every viewport <992px, never above it). */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "hint"
        "bar"
        "dyk"
        "btns";
    gap: 0;
    width: 100%;
    padding-top: 7px;
}

/* Slot assignments — mobile */
.search-hint-slot {
    grid-area: hint;
    margin-bottom: 12px;
}

.search-bar-slot {
    grid-area: bar;
}

.search-dyk-slot {
    grid-area: dyk;
}

.search-btn-slot {
    /* Explicit grid-area pins this row to the bottom of the stack
       on mobile — no more browser-dependent auto-placement. */
    grid-area: btns;
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Desktop layout ≥992px */
@media (min-width: 992px) {
    .search-row-grid {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "hint  ."
            "bar   btns"
            "dyk   .";
        column-gap: 8px;
        row-gap: 0;
        align-items: start;
    }

    .search-hint-slot {
        margin-bottom: 8px;
    }

    .search-btn-slot {
        grid-area: btns;
        /* Vertically centre buttons against the bar height */
        align-self: center;
        margin-top: 0;
        flex-direction: column;
        gap: 0;
        /* Lay buttons in a row inside their grid cell */
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        height: 100%;
    }
}

/* When the hint has been dismissed, collapse its row cleanly */
.search-hint-slot[style*="display: none"],
.search-hint-slot.hint-hidden {
    margin-bottom: 0;
}

/* ================================================================
   PLACES — Nearby Panel, Chip Rattle Fix, Add Area Button
   ================================================================ */

/* ── Chip rattle fix — stable dimensions, no layout shift ─────── */
.lcr-chip {
    position: relative;
    /* Prevent size changing on hover by using padding that
       accounts for the X button width at all times */
    padding-right: 30px !important;
}

.lcr-chip-geo {
    flex-shrink: 0;
}

.lcr-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    pointer-events: none;
}

.lcr-chip-remove-wrap {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    /* Fixed dimensions — no layout shift possible */
}

.lcr-chip-remove {
    /* Keep all existing lcr-chip-remove styles intact.
       The wrapper fixes the rattle, not the button itself. */
    pointer-events: all;
    /* Prevent button from changing chip size */
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

/* ── "Add area" — now a real clickable button ──────────────────── */
.lcr-hint--clickable {
    cursor: pointer !important;
    background: rgba(245, 130, 32, 0.07) !important;
    border: 1.5px dashed rgba(245, 130, 32, 0.45) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    color: #F58220 !important;
    font-weight: 700 !important;
    font-size: 0.74rem !important;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1 !important;
    -webkit-tap-highlight-color: transparent;
}

    .lcr-hint--clickable:hover {
        background: rgba(245, 130, 32, 0.14) !important;
        border-color: rgba(245, 130, 32, 0.7) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(245, 130, 32, 0.18) !important;
    }

    .lcr-hint--clickable i {
        font-size: 0.78rem;
    }

/* ── Nearby suggestions panel ──────────────────────────────────── */
.lcr-nearby-panel {
    background: rgba(255,255,255,0.98);
    backdrop-filter: saturate(200%) blur(24px);
    -webkit-backdrop-filter: saturate(200%) blur(24px);
    border: 1.5px solid rgba(255,255,255,0.97);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,1);
    width: 340px;
    max-width: 96vw;
    position: absolute;
    z-index: 9999;
    margin-top: 8px;
    overflow: hidden;
    animation: nearbyReveal 0.3s cubic-bezier(0.34,1.2,0.64,1) forwards;
}

@keyframes nearbyReveal {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }

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

.lcr-nearby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px 11px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: linear-gradient(135deg, rgba(245,130,32,0.05), transparent);
}

.lcr-nearby-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1A1D20;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .lcr-nearby-title i {
        color: #F58220;
        font-size: 0.85rem;
    }

    .lcr-nearby-title strong {
        color: #F58220;
    }

.lcr-nearby-close {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: #6b7280;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .lcr-nearby-close:hover {
        color: #ef4444;
        border-color: rgba(239,68,68,0.35);
        background: rgba(239,68,68,0.06);
    }

.lcr-nearby-body {
    padding: 8px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
}

.lcr-nearby-loading {
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lcr-nearby-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1.5px solid rgba(0,0,0,0.06);
    background: rgba(248,249,252,0.7);
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.25,1,0.5,1);
    text-align: left;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

    .lcr-nearby-item:hover {
        background: rgba(245,130,32,0.07);
        border-color: rgba(245,130,32,0.35);
        transform: translateX(3px);
    }

    .lcr-nearby-item i {
        color: #9ca3af;
        font-size: 0.88rem;
        flex-shrink: 0;
        transition: color 0.2s;
    }

    .lcr-nearby-item:hover i {
        color: #F58220;
    }

.lcr-nearby-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1A1D20;
    flex: 1;
    min-width: 0;
    /* Allow full name to show — never truncate with ellipsis */
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.lcr-nearby-sub {
    font-size: 0.7rem;
    color: #9ca3af;
    /* Allow sub-text to wrap on narrow panels instead of being hidden */
    white-space: normal;
    word-break: break-word;
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 4px;
    text-align: right;
    max-width: 40%;
    line-height: 1.3;
}

.lcr-nearby-add {
    font-size: 0.72rem;
    font-weight: 700;
    color: #F58220;
    background: rgba(245,130,32,0.1);
    border-radius: 20px;
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    transition: all 0.2s;
    margin-left: auto;
}

.lcr-nearby-item:hover .lcr-nearby-add {
    background: rgba(245,130,32,0.18);
}

.lcr-nearby-check {
    font-size: 0.78rem;
    font-weight: 700;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    border-radius: 20px;
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
}

.lcr-nearby-item--added {
    opacity: 0.75;
    cursor: default;
    /* Belt-and-suspenders: prevent any click from reaching the button
       even if a stale JS listener somehow survived */
    pointer-events: none;
}

    .lcr-nearby-item--added:hover {
        transform: none;
        background: rgba(248,249,252,0.7);
        border-color: rgba(0,0,0,0.06);
    }

.lcr-nearby-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ============================================================
   RESPONSIVE FIX v2 — Prevents truncation on resize & mobile
   Addresses: search bar, DYK, quick filters, autocomplete,
   locChipRow all truncating and not recovering on screen resize
   ============================================================ */

/* Global: ensure the search column never clips its children */
.search-bar-slot,
.search-console,
.search-row-grid {
    overflow: visible !important;
    min-width: 0;
}

/* Search bar composite — never clip, always adapt to container */
.search-bar-composite {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
}

/* Main search input — prevent overflow on very small screens */
.main-search-input {
    min-width: 0;
    flex: 1 1 0;
    width: 0; /* forces flex to compute width from parent */
    max-width: 100%;
}

/* Autocomplete dropdown — always full-width relative to composite */
.sa-autocomplete-dropdown {
    min-width: 0;
    box-sizing: border-box;
}

/* DYK bar — always fits width */
.dyk-bar {
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    /* visible — allows the bar to grow vertically when text wraps */
    overflow: visible;
}

/* Quick filters row — never clips, always scrollable on tiny screens */
.qf-row.visible {
    overflow: visible;
}

.qf-inputs {
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

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

/* Loc chip row — prevent truncation */
.loc-chip-row {
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
}

/* ── Tablet (768px–991px) — tighten spacing ── */
@media (max-width: 991px) {
    .search-bar-composite {
        border-radius: 12px;
    }

    .main-search-input {
        font-size: 0.9rem;
        padding-left: 14px;
    }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
    /* Search row: single column, no truncation */
    .search-row-grid {
        grid-template-columns: 1fr;
        width: 100%;
        overflow: visible;
    }

    /* Composite: full width, properly rounded */
    .search-bar-composite {
        width: 100%;
        border-radius: 14px 14px 0 0;
        min-height: 52px;
    }

    /* Input: never overflow */
    .main-search-input {
        font-size: 0.9rem;
        padding-left: 14px;
        padding-right: 80px;
    }

    /* Autocomplete — fill width, scrollable */
    .sa-autocomplete-dropdown {
        left: 0;
        right: 0;
        max-height: 55vh;
    }

    /* DYK fits width */
    .dyk-bar {
        border-radius: 0 0 12px 12px;
    }

    /* Quick filter: scroll horizontally, never clip */
    .qf-inputs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px; /* room for scrollbar */
    }

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

    /* qf-price-panel: position from bottom on mobile to avoid clipping */
    .qf-price-panel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 60vh;
        overflow-y: auto;
        z-index: 30000 !important;
    }
}

/* ── Small phones (≤480px) ── */
@media (max-width: 480px) {
    .main-search-input {
        font-size: 0.85rem;
        padding-left: 12px;
        padding-right: 72px;
    }

    .sa-autocomplete-dropdown {
        max-height: 50vh;
    }
}

/* ════════════════════════════════════════════════════════════
   HIDE LEGACY SMART SEARCH ROW
   — The standalone Smart Search row used to inject as a separate
     row below the main search bar. It is now consolidated into the
     main input (activated via #aiSearchBtn). The DOM node stays
     alive so omni-search.js can keep wiring to #omniNlpInput as a
     hidden mirror target, but the visual row is fully removed.
   ════════════════════════════════════════════════════════════ */
#omniNlpRow {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════════
   AI MODE — duplicate clear-button suppression
   ────────────────────────────────────────────────────────────
   Two clear buttons live inside the main search wrapper:
     • .btn-input-clear (#mainSearchClearBtn)  — handled by search.js
     • .sa-input-clear  (injected by places.js) — handled by places.js
   In normal (suburb) mode .btn-input-clear stays hidden and only
   .sa-input-clear shows when the user types.
   In AI smart-search mode .btn-input-clear takes over (it also
   fires nlpClearAll), so .sa-input-clear must be hidden to avoid
   the user seeing two × icons next to each other.
   ════════════════════════════════════════════════════════════ */
.search-bar-composite.ai-mode .sa-input-clear {
    display: none !important;
}

/* Also hide the omni-search internal NLP clear when its row is hidden,
   belt-and-braces in case any descendent CSS un-hides #omniNlpRow. */
#omniNlpRow .omni-nlp-clear,
#omniNlpRow #omniNlpActions {
    display: none !important;
}