/* ============================================================
   OMNI-SEARCH — Living Editorial Glass × Spatial AI × Kinetic Luxury
   v4 — Non-Destructive NLP, Quantum Soft-Lift, Flush UI Layout
   Brand: #1A1D20 · #F58220 · #56C4F8
   ============================================================ */
:root {
    --omni-orange: #F58220;
    --omni-blue: #56C4F8;
    --omni-black: #1A1D20;
    --omni-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --omni-smooth: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ════════════════════════════════════════════════════════════
   1. "SMART SEARCH" NLP ROW (The Magic Ghost Input)
   Sits perfectly flush between the composite bar and Quick Filters
   ════════════════════════════════════════════════════════════ */
.omni-nlp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(200%) blur(24px);
    -webkit-backdrop-filter: saturate(200%) blur(24px);
    /* Side borders match composite, but bottom is borderless to flow into Quick Filters */
    border-left: 1.5px solid rgba(255, 255, 255, 0.98);
    border-right: 1.5px solid rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(220, 228, 236, 0.6);
    border-radius: 0; /* Flat bottom */

    position: relative;
    z-index: 98; /* Below composite (100), above qfRow (50) */
    margin-top: -2px; /* Flush with composite */
    animation: omni-nlp-row-in 0.35s var(--omni-spring) both;
}



/* ── Toggle button (expanded / normal state) ── */
.omni-nlp-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(26, 29, 32, 0.12);
    background: rgba(248, 249, 252, 0.9);
    color: #9ca3af;
    font-size: 0.65rem;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    order: 10;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
}

    .omni-nlp-toggle:hover {
        background: rgba(245, 130, 32, 0.08);
        border-color: rgba(245, 130, 32, 0.35);
        color: #F58220;
        transform: scale(1.12);
    }

/* Collapsed: entire row disappears; toggle becomes expand-tab pill */
.omni-nlp-row.omni-nlp-collapsed {
    height: 0;
    min-height: 0;
    padding: 0;
    margin-top: 0;
    border: none;
    background: transparent;
    overflow: visible;
    animation: none;
    pointer-events: none;
}

    .omni-nlp-row.omni-nlp-collapsed .omni-nlp-left,
    .omni-nlp-row.omni-nlp-collapsed .omni-nlp-body {
        display: none;
    }

    .omni-nlp-row.omni-nlp-collapsed .omni-nlp-toggle {
        position: absolute;
        right: 24px;
        top: 0;
        transform: none;
        width: auto;
        height: auto;
        padding: 5px 14px 5px 10px;
        border-radius: 0 0 12px 12px;
        border: 1.5px solid rgba(245, 130, 32, 0.3);
        border-top: none;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 6px 18px rgba(245, 130, 32, 0.12), 0 2px 8px rgba(0,0,0,0.06);
        color: #F58220;
        gap: 6px;
        order: unset;
        margin-left: 0;
        pointer-events: auto;
        z-index: 97;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        transition: box-shadow 0.22s ease, background 0.22s ease;
    }

        /* Pseudo-text: shows "* Describe It" in collapsed tab */
        .omni-nlp-row.omni-nlp-collapsed .omni-nlp-toggle::before {
            content: '\2736\A0 Describe It';
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            color: #F58220;
            text-transform: uppercase;
        }

        .omni-nlp-row.omni-nlp-collapsed .omni-nlp-toggle:hover {
            background: rgba(255, 252, 247, 0.99);
            box-shadow: 0 8px 24px rgba(245, 130, 32, 0.22), 0 2px 8px rgba(0,0,0,0.06);
            transform: none;
        }

        .omni-nlp-row.omni-nlp-collapsed .omni-nlp-toggle i {
            color: #F58220;
            font-size: 0.65rem;
        }

/* ── NLP Label (Left) ── */
.omni-nlp-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-right: 12px;
    /*    border-right: 1.5px solid rgba(26, 29, 32, 0.28);*/
    min-width: 120px;
}

.omni-nlp-star {
    color: var(--omni-orange);
    font-size: 0.85rem;
    animation: nlp-star-pulse 2s infinite alternate ease-in-out;
}

@keyframes nlp-star-pulse {
    0% {
        filter: drop-shadow(0 0 2px rgba(245,130,32,0.4));
        transform: scale(0.9);
    }

    100% {
        filter: drop-shadow(0 0 6px rgba(245,130,32,0.8));
        transform: scale(1.1);
    }
}

.omni-nlp-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* ── Ghost Input Wrapper ── */
.omni-nlp-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 36px;
    background: rgba(26, 29, 32, 0.04);
    /*  border: 1.5px solid rgba(26, 29, 32, 0.16);*/
    /*    border-radius: 10px;*/
    padding: 0 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    .omni-nlp-input-wrapper:focus-within {
        border-color: rgba(245, 130, 32, 0.55);
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.10);
        background: rgba(255, 255, 255, 0.9);
    }

/* Base text styling shared between real input and visualizer to ensure perfect alignment */
.omni-nlp-real-input, #omniNlpVisualizer {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0;
    margin: 0;
    line-height: 36px;
    letter-spacing: normal;
    word-spacing: normal;
    white-space: pre;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .omni-nlp-real-input::-webkit-scrollbar,
    #omniNlpVisualizer::-webkit-scrollbar {
        display: none;
    }

/* The real, transparent input */
.omni-nlp-real-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: transparent !important; /* Hides the native text */
    caret-color: #1A1D20; /* Dark caret — visible against both plain text and orange highlights */
    z-index: 2;
    padding-left: 5px;
}

    .omni-nlp-real-input::placeholder {
        color: #b0bac6;
        font-weight: 400;
        font-style: italic;
        transition: opacity 0.25s;
    }

    .omni-nlp-real-input:focus::placeholder {
        opacity: 0.3;
    }

/* The Visualizer (Layer below input) */
#omniNlpVisualizer {
    position: absolute;
    inset: 0;
    color: var(--omni-black);
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
}

/* Highlighted Matches */
.omni-nlp-highlight {
    color: var(--omni-orange);
    font-weight: 800;
    background: rgba(245, 130, 32, 0.1);
    border-radius: 4px;
    padding: 0 2px;
    margin: 0 -2px; /* Offsets padding so text alignment doesn't shift */
    transition: all 0.2s ease;
    animation: highlight-pop 0.3s var(--omni-spring);
}

@keyframes highlight-pop {
    0% {
        background: rgba(245, 130, 32, 0.4);
    }

    100% {
        background: rgba(245, 130, 32, 0.1);
    }
}

/* Clear Button */
.omni-nlp-clear {
    background: none;
    border: none;
    color: #c4cdd6;
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0 4px;
    z-index: 3;
}

    .omni-nlp-clear:hover {
        color: #ef4444;
    }

    .omni-nlp-clear.hidden {
        display: none;
    }

/* ════════════════════════════════════════════════════════════
   2. TYPING DOTS & FLYOUT PHYSICS
   ════════════════════════════════════════════════════════════ */
/* Typing Dots appended to visualizer */
.omni-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: 4px;
}

#omniNlpVisualizer.typing .omni-typing-dots {
    opacity: 1;
}

.omni-typing-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--omni-orange);
    animation: omni-dot-bounce 1s ease-in-out infinite;
}

    .omni-typing-dots span:nth-child(2) {
        animation-delay: 0.15s;
    }

    .omni-typing-dots span:nth-child(3) {
        animation-delay: 0.30s;
    }

@keyframes omni-dot-bounce {
    0%, 80%, 100% {
        transform: scale(0.7);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Physics Flyout Chip (Shoots from input to filters) */
.omni-flyout-chip {
    position: fixed;
    background: linear-gradient(135deg, #F58220, #ffb347);
    color: white;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 6px 18px rgba(245, 130, 32, 0.4);
    opacity: 0;
    transform: scale(0.6) translateY(0);
}

    .omni-flyout-chip.stage-1 {
        opacity: 1;
        transform: scale(1.1) translateY(-10px);
        transition: all 0.25s var(--omni-spring);
    }

    .omni-flyout-chip.stage-2 {
        opacity: 0;
        transform: scale(0.7) translateY(50px);
        transition: all 0.4s ease;
        filter: blur(2px);
    }

/* ════════════════════════════════════════════════════════════
   3. LIVING AI CORE (Digital Jewelry SVG)
   Replaces the old DYK lightbulb.
   ════════════════════════════════════════════════════════════ */
.omni-ai-core-wrap {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin-right: 4px;
}

.omni-ai-core {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.omni-core-ring {
    animation: core-spin 8s linear infinite;
    transform-origin: 32px 32px;
}

.omni-core-pulse {
    animation: core-breathe 3s ease-in-out infinite alternate;
    transform-origin: 32px 32px;
}

.omni-core-scan {
    animation: core-scan 2.5s ease-in-out infinite;
}

/* Thinking State - Speeds up */
.omni-ai-core.thinking .omni-core-ring {
    animation-duration: 3s;
}

.omni-ai-core.thinking .omni-core-pulse {
    animation-duration: 0.8s;
}

.omni-ai-core.thinking .omni-core-scan {
    animation-duration: 1s;
}

@keyframes core-spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes core-breathe {
    0% {
        transform: scale(0.85);
        opacity: 0.7;
    }

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

@keyframes core-scan {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(10px);
        opacity: 0;
    }
}

/* ════════════════════════════════════════════════════════════
   4. QUANTUM SOFT-LIFT BUTTONS (Overrides existing search.css styles)
   Removes aggressive magnetic tracking, implements premium Apple-esque lifts.
   ════════════════════════════════════════════════════════════ */

/* Search Action Button */
.search-action-btn {
    transition: transform 0.35s var(--omni-spring), box-shadow 0.35s ease, background 0.3s ease !important;
}

    .search-action-btn:hover {
        transform: translateY(-2px) scale(1.02) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
    }

    .search-action-btn:active {
        transform: scale(0.96) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }

/* Filter Button */
.filter-btn {
    transition: transform 0.35s var(--omni-spring), box-shadow 0.35s ease, border-color 0.3s ease !important;
}

    .filter-btn:hover {
        transform: translateY(-2px) scale(1.02) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1) !important;
        border-color: rgba(245, 130, 32, 0.35) !important;
    }

    .filter-btn:active {
        transform: scale(0.96) !important;
    }

/* Live Trends Button */
.btn-trends {
    transition: transform 0.35s var(--omni-spring), box-shadow 0.35s ease, border-color 0.3s ease !important;
}

    .btn-trends:hover {
        transform: translateY(-2px) scale(1.02) !important;
        box-shadow: 0 8px 20px rgba(86, 196, 248, 0.25) !important;
    }

    .btn-trends:active {
        transform: scale(0.96) !important;
    }

/* ════════════════════════════════════════════════════════════
   5. RESPONSIVE REFINEMENTS
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .omni-nlp-row {
        padding: 8px 12px;
    }

    .omni-nlp-left {
        padding-right: 8px;
    }

    .omni-nlp-label {
        display: none; /* Icon only on mobile */
    }

    .omni-nlp-real-input, #omniNlpVisualizer {
        font-size: 0.8rem;
    }
}

/* ════════════════════════════════════════════════════════════
   6. SMART SEARCH — CONFIRM / CLEAR ACTIONS (v7 additions)
   ════════════════════════════════════════════════════════════ */

/* Actions container — confirm ✓ and clear ✗ trailing the input */
.omni-nlp-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    animation: nlp-bar-in 0.22s var(--omni-spring, cubic-bezier(0.34,1.56,0.64,1)) both;
}

/* Shared base for both action buttons */
.omni-nlp-confirm,
.omni-nlp-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1;
    padding: 0;
    transition: background 0.18s ease, transform 0.2s var(--omni-spring, cubic-bezier(0.34,1.56,0.64,1)), box-shadow 0.18s ease;
}

/* Confirm ✓ — green tint */
.omni-nlp-confirm {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1.5px solid rgba(16, 185, 129, 0.3);
}

    .omni-nlp-confirm:hover {
        background: rgba(16, 185, 129, 0.22);
        border-color: rgba(16, 185, 129, 0.55);
        transform: scale(1.12);
        box-shadow: 0 3px 10px rgba(16, 185, 129, 0.22);
    }

    .omni-nlp-confirm:active {
        transform: scale(0.93);
    }

/* Clear ✗ — red/neutral tint */
.omni-nlp-clear {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border: 1.5px solid rgba(239, 68, 68, 0.2);
}

    .omni-nlp-clear:hover {
        background: rgba(239, 68, 68, 0.18);
        border-color: rgba(239, 68, 68, 0.5);
        transform: scale(1.12);
        box-shadow: 0 3px 10px rgba(239, 68, 68, 0.15);
    }

    .omni-nlp-clear:active {
        transform: scale(0.93);
    }

/* Confirmed state — brief green flash on the row */
.omni-nlp-row.omni-nlp-confirmed {
    background: rgba(16, 185, 129, 0.06) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* ════════════════════════════════════════════════════════════
   7. CUSTOMIZE MODAL — NLP & OVERFLOW CARD TAGS (v7)
   ════════════════════════════════════════════════════════════ */

/* NLP-detected tag (⭐) shown on cards in the customize modal */
.qf-modal-card-nlp-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--omni-orange, #F58220);
    font-size: 0.65rem;
    vertical-align: middle;
    animation: nlp-star-pulse 2s infinite alternate ease-in-out;
}

/* Overflow tag (⧉ filter icon) shown when filter goes to main panel */
.qf-modal-card-overflow-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: #64748b;
    font-size: 0.62rem;
    vertical-align: middle;
    opacity: 0.75;
}

/* Cards that are NLP-detected get a subtle warm border */
.qf-modal-card.qf-modal-card-nlp {
    border-color: rgba(245, 130, 32, 0.35) !important;
}

/* Overflow cards (applied in main filter, not quick filter) */
.qf-modal-card.qf-modal-card-overflow {
    opacity: 0.75;
    border-style: dashed !important;
}

/* Overflow disclaimer note in the modal */
.qf-modal-overflow-note {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 130, 32, 0.07);
    border: 1px solid rgba(245, 130, 32, 0.25);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.75rem;
    color: #7c5a2a;
    margin: 0 0 12px;
    line-height: 1.4;
}

    .qf-modal-overflow-note i {
        color: var(--omni-orange, #F58220);
        flex-shrink: 0;
        font-size: 0.8rem;
    }

/* ════════════════════════════════════════════════════════════
   8. RESPONSIVE ADDITIONS
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .omni-nlp-confirm,
    .omni-nlp-clear {
        width: 28px;
        height: 28px;
        font-size: 0.82rem;
    }

    .qf-modal-overflow-note {
        font-size: 0.7rem;
        padding: 7px 10px;
    }
}
/* ============================================================
   GEMINI UI ELEMENTS — Clarification & Insight Cards
   ============================================================ */

/* Clarification card (when AI needs more info) */
.gemini-clarify {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(86,196,248,0.12), rgba(245,130,32,0.08));
    border: 1.5px solid rgba(86,196,248,0.3);
    border-radius: 12px;
    margin: 4px 0 8px;
    animation: geminiSlideIn 0.3s cubic-bezier(0.34,1.2,0.64,1) both;
    /* v4.9 — relative positioning so .gemini-clarify-close can absolute-
       position to the top-right corner of the card. Right padding leaves
       room so wrapped content doesn't slide under the close button. */
    position: relative;
    padding-right: 36px;
}

/* v10.8 — Thinking pill. Shown while Gemini is taking >2.5s to respond.
   Same colour palette as the clarify card so it feels part of the same
   conversation, but lighter weight — small height, no border, no shadow.
   Three pulsing dots make the wait feel intentional rather than broken. */
.gemini-thinking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    background: linear-gradient(135deg, rgba(86,196,248,0.10), rgba(245,130,32,0.06));
    border-radius: 999px;
    margin: 4px 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #1A6B9A;
    width: max-content;
    animation: geminiSlideIn 0.25s cubic-bezier(0.34,1.2,0.64,1) both;
}

.gemini-thinking-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

    .gemini-thinking-dots span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #56C4F8;
        opacity: 0.5;
        animation: geminiThinkPulse 1.1s ease-in-out infinite;
    }

        .gemini-thinking-dots span:nth-child(2) {
            animation-delay: 0.18s;
        }

        .gemini-thinking-dots span:nth-child(3) {
            animation-delay: 0.36s;
        }

@keyframes geminiThinkPulse {
    0%, 60%, 100% {
        opacity: 0.35;
        transform: scale(0.85);
    }

    30% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.gemini-thinking-label {
    line-height: 1;
}

.gemini-clarify-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #56C4F8, #2b95ce);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.gemini-clarify-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.gemini-clarify-question {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1A1D20;
    line-height: 1.45;
    flex: 1;
}

.gemini-clarify-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.gemini-clarify-close {
    /* v4.9 — top-right absolute position. See first .gemini-clarify-close
       rule for rationale. Slightly different visual treatment (subtle
       darker background) but the positioning is identical. */
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    transition: all 0.18s;
    z-index: 1;
}

    .gemini-clarify-close:hover {
        background: rgba(239,68,68,0.15);
        color: #ef4444;
    }

/* Insight card (AI provides helpful tip) */
.gemini-insight {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: linear-gradient(135deg, rgba(245,130,32,0.08), rgba(86,196,248,0.06));
    border-left: 3px solid #F58220;
    border-radius: 10px;
    margin: 4px 0 8px;
    animation: geminiSlideIn 0.3s cubic-bezier(0.34,1.2,0.64,1) both;
}

.gemini-insight-icon {
    font-size: 0.9rem;
    color: #F58220;
    flex-shrink: 0;
}

.gemini-insight-text {
    flex: 1;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.45;
}

.gemini-insight-close {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #c4cdd6;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .gemini-insight-close:hover {
        color: #ef4444;
    }

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

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

/* Enhanced province prompt for coastal/estate queries */
.omni-prov-prompt-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(245,130,32,0.08), rgba(86,196,248,0.06));
    border: 1px solid rgba(245,130,32,0.2);
    border-radius: 12px;
    flex-wrap: wrap;
}

.omni-prov-prompt-text {
    font-size: 0.78rem;
    color: #6b7280;
    white-space: nowrap;
}

.omni-prov-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.omni-prov-pill {
    padding: 4px 10px;
    border: 1px solid rgba(245,130,32,0.3);
    border-radius: 20px;
    background: rgba(255,255,255,0.9);
    color: #374151;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .omni-prov-pill:hover {
        background: #F58220;
        color: #fff;
        border-color: #F58220;
    }

    .omni-prov-pill.selected {
        background: #F58220;
        color: #fff;
        border-color: #F58220;
    }

/* ── v10.7 PROVINCE DRILL-DOWN ──────────────────────────────
   Second-level row showing the top 7 cities of the chosen
   province. Sits inside #omniProvincePrompt directly below
   the province pills. Shares hover/selected styles with the
   province pills but uses a slightly cooler tint so the
   visual hierarchy reads as: province → city. */
.omni-prov-drilldown {
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(245, 130, 32, 0.25);
    animation: omniDrillFade 0.22s ease-out;
}

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

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

.omni-prov-drilldown-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.omni-prov-drilldown-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .omni-prov-drilldown-label i {
        color: #56C4F8;
        font-size: 0.85rem;
    }

.omni-prov-city-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.omni-prov-city-pill {
    padding: 4px 10px;
    border: 1px solid rgba(86, 196, 248, 0.4);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    color: #1A6B9A;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

    .omni-prov-city-pill:hover {
        background: #56C4F8;
        color: #fff;
        border-color: #56C4F8;
        transform: translateY(-1px);
    }

    .omni-prov-city-pill.selected {
        background: #1A6B9A;
        color: #fff;
        border-color: #1A6B9A;
    }

.omni-prov-dismiss {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px;
    font-size: 0.85rem;
    margin-left: auto;
}

    .omni-prov-dismiss:hover {
        color: #374151;
    }

@media (prefers-color-scheme: dark) {
    .gemini-clarify {
        background: linear-gradient(135deg, rgba(86,196,248,0.15), rgba(245,130,32,0.1));
        border-color: rgba(86,196,248,0.4);
    }

    .gemini-clarify-question {
        color: #e5e7eb;
    }

    .gemini-insight {
        background: linear-gradient(135deg, rgba(245,130,32,0.12), rgba(86,196,248,0.08));
    }

    .gemini-insight-text {
        color: #9ca3af;
    }

    .omni-prov-prompt-inner {
        background: linear-gradient(135deg, rgba(245,130,32,0.12), rgba(86,196,248,0.08));
        border-color: rgba(245,130,32,0.25);
    }

    .omni-prov-pill {
        background: rgba(30,30,30,0.9);
        color: #d1d5db;
        border-color: rgba(245,130,32,0.35);
    }

        .omni-prov-pill:hover, .omni-prov-pill.selected {
            background: #F58220;
            color: #fff;
        }
}

/* ============================================================
   GEMINI UI ELEMENTS — Clarification & Insight Cards
   ============================================================ */

.gemini-clarify {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(86,196,248,0.12), rgba(245,130,32,0.08));
    border: 1.5px solid rgba(86,196,248,0.3);
    border-radius: 12px;
    margin: 4px 0 8px;
    animation: geminiSlideIn 0.3s cubic-bezier(0.34,1.2,0.64,1) both;
    /* v4.9 — relative positioning so .gemini-clarify-close can absolute-
       position to the top-right corner of the card. Right padding leaves
       room so wrapped content doesn't slide under the close button. */
    position: relative;
    padding-right: 36px;
}

.gemini-clarify-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #56C4F8, #2b95ce);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.gemini-clarify-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.gemini-clarify-question {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1A1D20;
    line-height: 1.45;
    flex: 1;
}

.gemini-clarify-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.gemini-clarify-close {
    /* v4.9 — top-right absolute position. See first .gemini-clarify-close
       rule for rationale. Slightly different visual treatment (subtle
       darker background) but the positioning is identical. */
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    transition: all 0.18s;
    z-index: 1;
}

    .gemini-clarify-close:hover {
        background: rgba(239,68,68,0.15);
        color: #ef4444;
    }

.gemini-insight {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: linear-gradient(135deg, rgba(245,130,32,0.08), rgba(86,196,248,0.06));
    border-left: 3px solid #F58220;
    border-radius: 10px;
    margin: 4px 0 8px;
    animation: geminiSlideIn 0.3s cubic-bezier(0.34,1.2,0.64,1) both;
}

.gemini-insight-icon {
    font-size: 0.9rem;
    color: #F58220;
    flex-shrink: 0;
}

.gemini-insight-text {
    flex: 1;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.45;
}

.gemini-insight-close {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #c4cdd6;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .gemini-insight-close:hover {
        color: #ef4444;
    }

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

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

@media (prefers-color-scheme: dark) {
    .gemini-clarify {
        background: linear-gradient(135deg, rgba(86,196,248,0.15), rgba(245,130,32,0.1));
        border-color: rgba(86,196,248,0.4);
    }

    .gemini-clarify-question {
        color: #e5e7eb;
    }

    .gemini-insight {
        background: linear-gradient(135deg, rgba(245,130,32,0.12), rgba(86,196,248,0.08));
    }

    .gemini-insight-text {
        color: #9ca3af;
    }
}

/* ============================================================
   DESCRIBE IT — REFINEMENT CHIPS  (v2.0)
   Predictive tappable suggestions from the enrichment engine.
   ============================================================ */

.describe-refinements {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 6px;
    animation: geminiSlideIn 0.28s ease;
}

.describe-refinements-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
    flex-shrink: 0;
    margin-right: 2px;
}

.describe-refinement-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid rgba(245, 130, 32, 0.35);
    background: rgba(245, 130, 32, 0.06);
    color: #c2410c;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    line-height: 1.3;
}

    .describe-refinement-chip::before {
        content: '+';
        font-size: 0.78rem;
        font-weight: 800;
        opacity: 0.7;
    }

    .describe-refinement-chip:hover {
        background: rgba(245, 130, 32, 0.14);
        border-color: rgba(245, 130, 32, 0.65);
        color: #9a3412;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(245, 130, 32, 0.18);
    }

    .describe-refinement-chip:active {
        transform: translateY(0);
    }

@media (max-width: 600px) {
    .describe-refinements {
        padding: 6px 10px 4px;
        gap: 5px;
    }

    .describe-refinement-chip {
        font-size: 0.68rem;
        padding: 3px 8px;
    }
}

@media (prefers-color-scheme: dark) {
    .describe-refinements-label {
        color: #6b7280;
    }

    .describe-refinement-chip {
        border-color: rgba(245, 130, 32, 0.3);
        background: rgba(245, 130, 32, 0.08);
        color: #fb923c;
    }

        .describe-refinement-chip:hover {
            background: rgba(245, 130, 32, 0.16);
            border-color: rgba(245, 130, 32, 0.55);
            color: #fdba74;
        }
}

/* ============================================================
   BUDGET RANGE PICKER — Affordability clarification UI
   Shown instead of text clarification when "affordable" etc detected
   ============================================================ */

.gemini-clarify-budget .gemini-budget-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 4px;
}

.gemini-budget-opt {
    background: rgba(255, 255, 255, 0.72);
    border: 1.5px solid rgba(245, 130, 32, 0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #2d3748;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap;
}

    .gemini-budget-opt:hover {
        background: rgba(245, 130, 32, 0.10);
        border-color: rgba(245, 130, 32, 0.55);
        color: #c96d00;
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(245, 130, 32, 0.15);
    }

    .gemini-budget-opt.selected {
        background: linear-gradient(135deg, #F58220, #ffb347);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 4px 14px rgba(245, 130, 32, 0.35);
    }

    /* v4.23 — "Search all of {province}" pill style.
   Visually distinct from city pills: dashed border + globe icon. Reads as
   "the whole region" rather than another city peer. */
    .gemini-budget-opt.gemini-budget-opt-provincewide {
        border-style: dashed;
        border-color: rgba(99, 102, 241, 0.55);
        background: rgba(238, 242, 255, 0.78);
        color: #4338ca;
    }

        .gemini-budget-opt.gemini-budget-opt-provincewide i {
            margin-right: 5px;
            font-size: 0.85em;
            opacity: 0.85;
        }

        .gemini-budget-opt.gemini-budget-opt-provincewide:hover {
            background: rgba(224, 231, 255, 0.95);
            border-color: rgba(99, 102, 241, 0.85);
            color: #312e81;
            box-shadow: 0 3px 10px rgba(99, 102, 241, 0.20);
        }

        .gemini-budget-opt.gemini-budget-opt-provincewide.selected {
            background: linear-gradient(135deg, #6366f1, #818cf8);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
        }

/* v4.24 — SECONDARY clarification panel (stacked beneath primary).
   Lighter, slightly more compact treatment so the visual hierarchy reads
   as "primary question + supporting follow-up". Same pill style underneath
   so the user knows it works the same way. */
.gemini-clarify.gemini-clarify-secondary {
    margin-top: -4px; /* tuck closer to the primary */
    background: rgba(247, 250, 252, 0.78);
    border-color: rgba(245, 130, 32, 0.18);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

    .gemini-clarify.gemini-clarify-secondary .gemini-clarify-icon {
        background: rgba(99, 102, 241, 0.12);
        color: #6366f1;
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    .gemini-clarify.gemini-clarify-secondary .gemini-clarify-question {
        font-size: 0.85rem;
        opacity: 0.92;
    }

@media (max-width: 480px) {
    .gemini-budget-opt {
        font-size: 0.73rem;
        padding: 5px 11px;
    }
}

/* ============================================================
   OMNI NLP ACTIONS — clear-only (tick/edit removed)
   ============================================================ */

/* Hide confirm and edit buttons if they somehow remain in DOM */
#omniNlpConfirm,
#omniNlpEdit {
    display: none !important;
}


/* ============================================================
   LOCATION CONFLICT DIALOG — shown when NLP detects a second
   location while a manually-selected location already exists.
   ============================================================ */
.omni-loc-conflict-dialog {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, rgba(245,130,32,0.06), rgba(86,196,248,0.06));
    border: 1px solid rgba(245,130,32,0.3);
    border-radius: 12px;
    margin: 6px 0;
    padding: 12px 14px;
    animation: omni-nlp-row-in 0.3s var(--omni-spring) both;
    position: relative;
    z-index: 99;
}

.omni-loc-conflict-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.omni-loc-conflict-text {
    font-size: 0.82rem;
    color: var(--omni-black);
    flex: 1;
    min-width: 180px;
}

.omni-loc-conflict-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.omni-loc-btn {
    border: none;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 14px;
    transition: background 0.18s, transform 0.15s;
}

.omni-loc-btn-replace {
    background: var(--omni-orange);
    color: #fff;
}

    .omni-loc-btn-replace:hover {
        background: #d96c10;
        transform: scale(1.04);
    }

.omni-loc-btn-both {
    background: rgba(26,29,32,0.1);
    color: var(--omni-black);
}

    .omni-loc-btn-both:hover {
        background: rgba(26,29,32,0.18);
        transform: scale(1.04);
    }

.omni-loc-btn-cancel {
    background: transparent;
    color: #888;
    padding: 5px 8px;
    font-size: 0.9rem;
}

    .omni-loc-btn-cancel:hover {
        color: #333;
    }

@media (max-width: 520px) {
    .omni-loc-conflict-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .omni-loc-conflict-actions {
        width: 100%;
        justify-content: flex-start;
    }
}


/* DYK BAR ─ layout and distinctive pipe alignment */
/* ── DYK BAR — omni-search.css is the LAST stylesheet loaded, so these
   rules are the authoritative source of truth for the DYK component.
   Any truncation here will override every earlier fix in dyk.css /
   search.css. All rules below are set to allow full text wrapping. ── */
.dyk-bar {
    display: flex;
    /* align-items: flex-start so multi-line text doesn't stretch controls */
    align-items: flex-start;
    gap: 10px;
    padding-left: 14px;
    padding-right: 14px;
    /* Must be visible — overflow: hidden clips the bar before text can wrap */
    overflow: visible;
    height: auto;
    min-height: 42px;
}

    .dyk-bar .omni-ai-core-wrap {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 32px;
    }

.dyk-icon {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    width: 32px;
    padding-top: 2px;
}

.dyk-label {
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 88px;
    padding-right: 12px;
    padding-top: 3px;
}

.dyk-divider {
    width: 1.5px;
    align-self: stretch;
    min-height: 16px;
    background: rgba(26, 29, 32, 0.28);
    flex-shrink: 0;
    margin-right: 14px;
    border-radius: 2px;
}

.dyk-text {
    flex: 1;
    font-size: 0.78rem;
    color: #374151;
    /* ── CRITICAL: these three lines were the root cause of the ellipsis.
       omni-search.css loads LAST so its rules beat dyk.css and search.css.
       Text must wrap freely — never clip, never truncate. ── */
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
    min-width: 0;
}

.dyk-controls {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 8px;
    padding-top: 2px;
}

@media (max-width: 767px) {
    .omni-nlp-row.omni-nlp-collapsed .omni-nlp-toggle {
        right: 12px;
    }

    .omni-nlp-left {
        min-width: 80px;
    }

    .dyk-bar {
        padding-left: 12px;
        padding-right: 12px;
        min-height: 38px;
        height: auto;
    }

    .dyk-label {
        min-width: 60px;
    }

    .dyk-text {
        font-size: 0.73rem;
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .dyk-bar {
        padding-left: 10px;
        padding-right: 10px;
        min-height: 36px;
        height: auto;
    }

    .dyk-text {
        font-size: 0.70rem;
        line-height: 1.45;
        white-space: normal;
        word-break: break-word;
    }
}

/* ============================================================
   SMART SEARCH ENHANCEMENTS v8
   1. Continuous vertical divider spanning all 3 search rows
   2. Smart Search sublabel / microcopy
   3. Premium focus glow + subtle expansion micro-interaction
   4. Improved visual hierarchy across rows
   ============================================================ */

/* ── 1. Label block — stacked label + sublabel ─────────────── */
.omni-nlp-label-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
}

.omni-nlp-sublabel {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #b0bac6;
    text-transform: none;
    white-space: nowrap;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

/* Bring sublabel up on row hover/focus */
.omni-nlp-row:focus-within .omni-nlp-sublabel,
.omni-nlp-row:hover .omni-nlp-sublabel {
    opacity: 1;
    color: rgba(245, 130, 32, 0.75);
}

/* ── 2. Premium focus glow + subtle row expansion ──────────── */
.omni-nlp-input-wrapper {
    transition: border-color 0.25s ease, box-shadow 0.3s ease, background 0.25s ease, transform 0.28s var(--omni-spring), min-height 0.28s var(--omni-spring);
}

    .omni-nlp-input-wrapper:focus-within {
        border-color: rgba(245, 130, 32, 0.6) !important;
        box-shadow: 0 0 0 3.5px rgba(245, 130, 32, 0.13), 0 2px 12px rgba(245, 130, 32, 0.1) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        transform: scaleY(1.03);
        transform-origin: center;
    }

/* Whole NLP row softly expands on focus */
.omni-nlp-row {
    transition: padding 0.28s var(--omni-smooth), box-shadow 0.28s ease, background 0.25s ease;
}

    .omni-nlp-row:focus-within {
        padding-top: 13px;
        padding-bottom: 13px;
        box-shadow: 0 2px 12px rgba(245, 130, 32, 0.07), inset 0 -1px 0 rgba(245, 130, 32, 0.12);
        background: rgba(255, 255, 255, 0.98);
    }

/* ── 3. Continuous vertical divider line — all 3 rows ──────── */
/* The divider that separates the label region from the input
   area in the Smart Search row. Replaces individual pipe chars.
   We achieve a continuous visual line by using the .omni-nlp-left
   border-right and keeping it consistent height. */

.omni-nlp-left {
    /*   border-right: 1.5px solid rgba(26, 29, 32, 0.12);*/
    transition: border-color 0.25s ease;
}

.omni-nlp-row:focus-within .omni-nlp-left {
    border-right-color: rgba(245, 130, 32, 0.3);
}

/* Shared divider variable used by composite bar & QF row for continuity */
:root {
    --omni-divider: rgba(26, 29, 32, 0.13);
    --omni-divider-focus: rgba(245, 130, 32, 0.3);
}

/* ── 4. Visual hierarchy — row separation lines ────────────── */
/* Bottom border of the NLP row becomes a very subtle
   orange-tinted line to visually "flow" into the QF row below */
.omni-nlp-row {
    border-bottom: 1px solid rgba(220, 228, 236, 0.7);
}

    .omni-nlp-row:focus-within {
        border-bottom-color: rgba(245, 130, 32, 0.18);
    }

/* ── 5. Responsive adjustments ─────────────────────────────── */
@media (max-width: 767px) {
    .omni-nlp-sublabel {
        display: none;
    }

    .omni-nlp-label-block {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .omni-nlp-label-block {
        display: none;
    }
}

/* ============================================================
   v11 — OPT-IN LOCATION SUGGESTIONS PANEL
   ------------------------------------------------------------
   Replaces the silent auto-add behaviour where Gemini-suggested
   locations and semantic-region suburbs were being added to the
   user's "Searching in" pills without consent. The new panel
   shows them as tappable pills the user must approve.
   ============================================================ */
.gemini-suggest-locs {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(86, 196, 248, 0.10), rgba(245, 130, 32, 0.07));
    border: 1.5px solid rgba(245, 130, 32, 0.32);
    border-radius: 12px;
    margin: 4px 0 8px;
    animation: geminiSlideIn 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
    position: relative;
}

.gemini-suggest-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(245, 130, 32, 0.18);
    color: #F58220;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-top: 2px;
}

.gemini-suggest-content {
    flex: 1 1 auto;
    min-width: 0;
}

.gemini-suggest-question {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2c2c2a;
    line-height: 1.35;
    margin-bottom: 8px;
}

.gemini-suggest-group {
    margin-top: 6px;
}

.gemini-suggest-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #F58220;
    margin-bottom: 4px;
    opacity: 0.85;
}

.gemini-suggest-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.gemini-suggest-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: #ffffff;
    color: #2c2c2a;
    border: 1px solid rgba(245, 130, 32, 0.35);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .gemini-suggest-pill i {
        font-size: 0.78rem;
        color: #F58220;
    }

    .gemini-suggest-pill:hover {
        background: rgba(245, 130, 32, 0.08);
        border-color: rgba(245, 130, 32, 0.6);
    }

    .gemini-suggest-pill.added {
        background: rgba(86, 196, 248, 0.14);
        border-color: rgba(86, 196, 248, 0.5);
        color: #1A6B9A;
        cursor: default;
    }

        .gemini-suggest-pill.added i {
            color: #1A6B9A;
        }

.gemini-suggest-actions {
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
}

.gemini-suggest-dismiss {
    background: transparent;
    border: none;
    color: #888780;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 6px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .gemini-suggest-dismiss:hover {
        color: #2c2c2a;
    }

/* v4.9 — inline No-thanks dismiss that sits in the same flex-wrap row
   as the location suggestion pills. Compact, low-emphasis, matches pill
   height so it doesn't add a row. */
.gemini-suggest-dismiss-inline {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    background: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    color: #888780;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    margin-left: 2px;
}

    .gemini-suggest-dismiss-inline:hover {
        color: #2c2c2a;
        border-color: rgba(0, 0, 0, 0.3);
        background: rgba(0, 0, 0, 0.03);
    }

.gemini-suggest-close {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    color: #888780;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

    .gemini-suggest-close:hover {
        background: rgba(0, 0, 0, 0.06);
        color: #2c2c2a;
    }

@media (max-width: 600px) {
    .gemini-suggest-locs {
        padding: 8px 12px;
    }

    .gemini-suggest-pill {
        font-size: 0.72rem;
        padding: 4px 9px;
    }
}

/* ════════════════════════════════════════════════════════════
   DESCRIBE-IT v4.1 — UI ADDITIONS
   ────────────────────────────────────────────────────────────
   1. "Other (type it)" manual-entry input on clarification pills
   2. Per-pill bedroom badge for multi-location compound queries
   3. Exclusion strip — "✕ No pool" pills when user negates a feature
   4. "Tap Search" call-to-action strip with rotating clever copy
      across four tones (encouraging / confident / playful / urgent)
   ════════════════════════════════════════════════════════════ */

/* ── 1. "Other (type it)" manual-entry pill ──────────────────
   Replaces a pill in the clarification list when option.isOther
   is true. Renders as a dashed-border text input + check button
   so it visually reads as "do-it-yourself" rather than a preset
   choice. Lives in the same .gemini-budget-opts row as the pills,
   so flex-wrap keeps it inline with them. */

.spt-clarify-other-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.spt-clarify-other-input {
    height: 30px;
    padding: 0 10px;
    border: 1.5px dashed rgba(245, 130, 32, 0.55);
    border-radius: 20px;
    background: rgba(255, 248, 241, 0.85);
    font: 600 0.78rem system-ui, -apple-system, sans-serif;
    color: #2d3748;
    width: 180px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .spt-clarify-other-input::placeholder {
        color: #a98556;
        font-weight: 500;
        font-style: italic;
    }

    .spt-clarify-other-input:focus {
        border-style: solid;
        border-color: var(--omni-orange, #F58220);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.15);
    }

    /* Invalid-input feedback — brief horizontal wiggle when the user
       presses Enter on an empty input. Matches the spring easing of
       the rest of the omni-search system. */
    .spt-clarify-other-input.spt-shake {
        animation: spt-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
        border-color: #d04545;
        border-style: solid;
    }

@keyframes spt-shake {
    0%, 100% {
        transform: translateX(0);
    }

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

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

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

.spt-clarify-other-go {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    border: 1.5px solid var(--omni-orange, #F58220);
    background: var(--omni-orange, #F58220);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, background 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

    .spt-clarify-other-go:hover {
        transform: scale(1.08);
        box-shadow: 0 4px 12px rgba(245, 130, 32, 0.4);
    }

    .spt-clarify-other-go:active {
        transform: scale(0.96);
    }

@media (max-width: 480px) {
    .spt-clarify-other-input {
        width: 140px;
        font-size: 0.73rem;
        height: 28px;
    }

    .spt-clarify-other-go {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 13px;
    }
}

/* ── 2. Per-pill bedroom badge (compound queries) ────────────
   When "1 bed in cape town and 2 bed in sandton" creates two
   location pills, we tag each with its per-area bedroom count
   so the user can SEE we understood different criteria per area. */

.spt-loc-bedbadge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(245, 130, 32, 0.14);
    color: var(--omni-orange, #F58220);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.2px;
    vertical-align: middle;
    pointer-events: none; /* badge is informational, not clickable */
}

/* ── 3. "✕ No pool" exclusion strip ──────────────────────────
   Surfaces what the user told us NOT to include. Sits just below
   the chip bar in a thinner colour scheme so it reads as the
   "anti-filter" complement to the orange/blue "want" chips. */

.spt-exclusion-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px;
    padding: 0 2px;
    animation: geminiSlideIn 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

    .spt-exclusion-strip:empty {
        display: none;
    }

.spt-exclude-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px 3px 9px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(212, 76, 76, 0.08), rgba(212, 76, 76, 0.04));
    color: #a83c3c;
    border: 1px solid rgba(212, 76, 76, 0.28);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1px;
    transition: transform 0.15s ease, box-shadow 0.18s ease;
}

    .spt-exclude-chip:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(212, 76, 76, 0.18);
    }

.spt-exclude-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(212, 76, 76, 0.18);
    color: #a83c3c;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 13px;
}

/* ── 4. "Tap Search" CTA strip ───────────────────────────────
   The clever nudge that appears whenever 2+ filters are set.
   Renders BETWEEN the chip bar and the rest of the page. The
   tone attribute swaps the gradient and accent — same shape,
   different mood. */

.spt-cta-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 10px;
    padding: 11px 14px 11px 12px;
    /* v4.3 — All solid colours, no rgba alpha on background or border,
       and we promote to its own GPU layer via will-change so neighbour
       reflows do NOT repaint the strip. This was the source of the
       2px black-edge flash. */
    background: #FFF6EC;
    /* Use a solid colour (orange tinted, no alpha) for the border so
       compositor can't blend it with whatever's behind during reflow. */
    border: 1.5px solid #F2C8A0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(245, 130, 32, 0.10);
    position: relative;
    overflow: hidden;
    contain: layout paint style;
    will-change: transform;
    transform: translateZ(0); /* force its own layer */
    animation: spt-cta-in 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes spt-cta-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.985);
    }

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

/* Subtle shimmer that sweeps across the strip every few seconds —
   keeps the eye drawn to the Search button without being annoying. */
.spt-cta-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%);
    animation: spt-cta-shimmer 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes spt-cta-shimmer {
    0%, 100% {
        transform: translateX(0);
        opacity: 0;
    }

    35% {
        opacity: 0.7;
    }

    55% {
        transform: translateX(420%);
        opacity: 0;
    }
}

/* ── Tone: ENCOURAGING (default) — warm orange, friendly. ── */
.spt-cta-strip[data-tone="encouraging"] {
    background: linear-gradient(95deg, rgba(255, 248, 241, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
    border-color: rgba(245, 130, 32, 0.35);
}

    .spt-cta-strip[data-tone="encouraging"] .spt-cta-bolt {
        background: linear-gradient(135deg, #F58220, #ffa657);
    }

/* ── Tone: CONFIDENT — cool blue, trustworthy. ── */
.spt-cta-strip[data-tone="confident"] {
    background: linear-gradient(95deg, rgba(241, 247, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
    border-color: rgba(86, 196, 248, 0.42);
    box-shadow: 0 2px 12px rgba(86, 196, 248, 0.12);
}

    .spt-cta-strip[data-tone="confident"] .spt-cta-bolt {
        background: linear-gradient(135deg, #2196d6, #56C4F8);
    }

    .spt-cta-strip[data-tone="confident"] .spt-cta-lead {
        color: #1a4d6f;
    }

/* ── Tone: PLAYFUL — soft violet, fun. ── */
.spt-cta-strip[data-tone="playful"] {
    background: linear-gradient(95deg, rgba(253, 243, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
    border-color: rgba(160, 102, 200, 0.42);
    box-shadow: 0 2px 12px rgba(160, 102, 200, 0.12);
}

    .spt-cta-strip[data-tone="playful"] .spt-cta-bolt {
        background: linear-gradient(135deg, #8e54c2, #c084f0);
    }

    .spt-cta-strip[data-tone="playful"] .spt-cta-lead {
        color: #5a358a;
    }

/* ── Tone: URGENT — punchy red-orange, gently pulsing. ── */
.spt-cta-strip[data-tone="urgent"] {
    background: linear-gradient(95deg, rgba(255, 240, 237, 0.97) 0%, rgba(255, 255, 255, 0.98) 100%);
    border-color: rgba(229, 95, 70, 0.5);
    box-shadow: 0 2px 14px rgba(229, 95, 70, 0.16);
    animation: spt-cta-in 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) both, spt-cta-urgent-pulse 2.4s ease-in-out 0.5s infinite;
}

    .spt-cta-strip[data-tone="urgent"] .spt-cta-bolt {
        background: linear-gradient(135deg, #e25c46, #ff8a6e);
    }

    .spt-cta-strip[data-tone="urgent"] .spt-cta-lead {
        color: #8a2e1e;
    }

@keyframes spt-cta-urgent-pulse {
    0%, 100% {
        box-shadow: 0 2px 14px rgba(229, 95, 70, 0.16);
    }

    50% {
        box-shadow: 0 2px 22px rgba(229, 95, 70, 0.34);
    }
}

/* ── CTA components ──────────────────────────────────────────
   .bolt → the lightning-bolt icon in a circle (left).
   .copy → two-line text block (middle, flex:1).
   .button → the actual Search CTA (right).
   .dismiss → tiny × at far right. */

.spt-cta-bolt {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 1;
}

    .spt-cta-bolt svg {
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
    }

.spt-cta-copy {
    flex: 1 1 auto;
    min-width: 0; /* allow text-overflow on long leads */
    position: relative;
    z-index: 1;
}

.spt-cta-lead {
    font-size: 0.86rem;
    font-weight: 700;
    color: #2a2a2a;
    line-height: 1.3;
    letter-spacing: -0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spt-cta-tail {
    font-size: 0.74rem;
    color: #6a6a6a;
    margin-top: 2px;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── .spt-cta-button / .spt-cta-arrow — REMOVED in v4.4/v4.5 ─
   The original v4.0 design had a boxed "Search →" button on the
   right of the strip (.spt-cta-button containing .spt-cta-arrow).
   v4.4 replaced it with a bare magnifier glyph; v4.5 removed
   that too because it duplicated the main SEARCH button above.
   No JS or HTML still references either class — selectors safely
   deleted from this file. */

.spt-cta-dismiss {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    position: relative;
    z-index: 1;
}

    .spt-cta-dismiss:hover {
        background: rgba(0, 0, 0, 0.06);
        color: #444;
    }

    .spt-cta-dismiss i {
        line-height: 1;
    }

/* ── Mobile adjustments ──────────────────────────────────────
   The legacy v4.0 stacked-mobile rules (flex-wrap:wrap, absolute
   dismiss, column flex-direction at ≤380px, .spt-cta-button
   styling) were removed in v4.5. They referenced .spt-cta-button
   which no longer exists in the rendered DOM (replaced first by
   .spt-cta-glyph in v4.4, then removed entirely in v4.5 as the
   composite already carries a primary SEARCH button). The
   authoritative mobile recipe now lives in the "v4.5 MOBILE
   COMPRESSION" block further down — search for it. */

/* ── Reduced-motion fallback ─────────────────────────────────
   Respect users who've asked the system to minimise animation. */

@media (prefers-reduced-motion: reduce) {
    .spt-cta-strip,
    .spt-cta-strip[data-tone="urgent"],
    .spt-clarify-other-input.spt-shake,
    .spt-exclusion-strip {
        animation: none !important;
    }

        .spt-cta-strip::before {
            display: none;
        }

    .spt-clarify-other-go:hover {
        transform: none;
    }
}

/* ════════════════════════════════════════════════════════════
   v4.2 — MULTI-AREA NOTICE
   Replaces the v4.1 auto-applied "Searching In" pollution.
   The user sees an opt-in notice instead.
   ════════════════════════════════════════════════════════════ */

.spt-multiarea-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 8px;
    padding: 9px 12px;
    background: linear-gradient(135deg, rgba(86, 196, 248, 0.10), rgba(245, 130, 32, 0.06));
    border: 1.5px solid rgba(86, 196, 248, 0.30);
    border-radius: 12px;
    animation: geminiSlideIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) both;
    contain: layout paint style;
}

.spt-multiarea-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--omni-blue, #56C4F8), #2196d6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    font-size: 13px;
}

.spt-multiarea-body {
    flex: 1;
    min-width: 0;
}

.spt-multiarea-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a4d6f;
    margin-bottom: 6px;
    letter-spacing: -0.1px;
}

.spt-multiarea-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.spt-multiarea-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1.5px solid rgba(86, 196, 248, 0.40);
    border-radius: 18px;
    padding: 5px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #1a4d6f;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .spt-multiarea-pill:hover {
        background: rgba(86, 196, 248, 0.10);
        border-color: var(--omni-blue, #56C4F8);
        transform: translateY(-1px);
    }

    .spt-multiarea-pill.applied {
        background: linear-gradient(135deg, var(--omni-blue, #56C4F8), #2196d6);
        border-color: transparent;
        color: #fff;
        pointer-events: none;
    }

    .spt-multiarea-pill i {
        font-size: 11px;
        opacity: 0.8;
    }

.spt-multiarea-dismiss {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #6a8a9a;
    cursor: pointer;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}

    .spt-multiarea-dismiss:hover {
        background: rgba(0, 0, 0, 0.06);
        color: #2a4a5a;
    }

@media (max-width: 600px) {
    .spt-multiarea-notice {
        padding: 8px 10px;
        gap: 8px;
    }

    .spt-multiarea-pill {
        font-size: 0.72rem;
        padding: 4px 10px;
    }

    .spt-multiarea-title {
        font-size: 0.74rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spt-multiarea-notice,
    .spt-multiarea-pill:hover {
        animation: none !important;
        transform: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   v4.3 — Defensive overrides
   ════════════════════════════════════════════════════════════ */

/* Main-input X clear button: failsafe — if the input is empty AND
   describe-it is not active, never show the X (overrides any race
   in search.js where the .visible class was left stale). */
.search-bar-composite:not(.ai-mode) .btn-input-clear:not(.visible) {
    display: none !important;
}

/* When AI mode is OFF, force-hide the X regardless of .visible class.
   The legacy .visible class can linger after the user toggles off. */
.search-bar-composite:not(.ai-mode) #mainSearchClearBtn {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.search-bar-composite.ai-mode #mainSearchClearBtn.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* ════════════════════════════════════════════════════════════
   v4.4 — Bare-glyph search icon + visual join with Quick Filters
           + flex-wrap for long translations
   ════════════════════════════════════════════════════════════ */

/* ── BARE-GLYPH SEARCH ICON — REMOVED in v4.5 ───────────────
   The .spt-cta-glyph button was a tiny magnifier icon that
   duplicated the main SEARCH button sitting directly above
   the CTA strip. It read as decorative (users didn't realise
   it was clickable) and added visual noise. The glyph DOM
   element is no longer rendered by omni-search.js; the entire
   CSS block that styled it (~55 lines of rules + tone hover
   variants) has been dropped from this file in the same pass.
   The whole copy block (.spt-cta-copy) remains clickable and
   runs the search, so the affordance is preserved. */

/* ── JOINED CTA + QUICK FILTERS ────────────────────────────
   When the CTA strip is present alongside the qf-row, the two
   visually merge into a single panel. The CTA's bottom edge
   loses its rounding + bottom margin; the QF panel loses its
   top edge separator. Together they look like one card with
   the CTA as its top stripe.

   The .spt-has-cta class is added to #qfRow whenever the CTA
   strip is mounted (see spt_renderSearchCta()) and removed on
   dismiss or describe-it teardown. */

#qfRow.spt-has-cta {
    /* QF panel hugs the CTA above — no top gap. */
    margin-top: 0 !important;
}

    #qfRow.spt-has-cta::before {
        /* Hide whatever top border / divider the qf-row uses. */
        border-top-color: transparent !important;
    }

    #qfRow.spt-has-cta .qf-header-row {
        /* Lift the QF header very slightly so the orange CTA edge
       flows into it visually. */
        padding-top: 8px;
    }

.spt-cta-strip + #qfRow,
#qfRow.spt-has-cta {
    /* CSS Logical adjacency — when the CTA is the immediate
       previous sibling, snug it. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* The CTA strip, when followed by a QF row, drops its bottom
   rounding so the seam is invisible. */
#sptSearchCtaStrip {
    /* Always remove the bottom margin so the next element sits flush. */
    margin-bottom: 0;
    /* Bottom corners flat to fuse with the QF row below. */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* Remove the bottom border so the qf-row's top border (if any)
       carries the visual seam. */
    border-bottom: none;
    /* Tiny negative bottom to overlap any anti-aliasing gap. */
    margin-bottom: -1px;
}

/* ── FLEX-WRAP FOR LONG TRANSLATIONS ───────────────────────
   Zulu and some other languages produce longer text than
   English. The CTA strip now wraps gracefully onto two rows
   when needed, with adequate padding around each row.

   v4.5 — Default (desktop) keeps the comfortable two-line look:
   lead bold on row 1, tail muted on row 2. Mobile collapses
   the entire strip into a single short row (see below).

   v11 — User asked for single-row layout EVERYWHERE, not just
   mobile. The previous "two-line on desktop" was eating ~30px
   of vertical hero space for what is really a status nudge.
   So the single-row recipe (bolt + "Lead · Tail" + dismiss) is
   now the default for all viewports; the only special case is
   sub-360px phones, where we drop the tail entirely so the
   lead never gets clipped. */

.spt-cta-strip {
    flex-wrap: nowrap;
    /* Tighter padding now that the strip is always one row. */
    padding: 8px 12px;
    /* No artificial min-height — let the row hug its content. */
    min-height: 0;
    align-items: center;
}

/* Copy column is an inline flex row containing lead + tail so
   they share the same baseline and the middle-dot separator
   sits between them naturally. */
.spt-cta-copy {
    flex: 1 1 auto;
    min-width: 0; /* allow text-overflow on long leads */
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.spt-cta-lead {
    /* Single-line on all viewports. The base block at the top of
       this file already sets the typography (0.86rem / weight 700);
       these rules override only the overflow/wrap behaviour. */
    display: inline;
    -webkit-line-clamp: unset;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
}

/* Middle-dot separator between lead and tail. Lives on the tail's
   ::before so it disappears automatically when the tail is hidden
   (sub-360px phones, or empty translation). */
.spt-cta-tail::before {
    content: '\00b7'; /* · */
    margin-right: 6px;
    color: #9aa0a6;
    font-weight: 700;
}

.spt-cta-tail {
    display: inline;
    -webkit-line-clamp: unset;
    margin-top: 0;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
    color: #6a6a6a;
}

/* Buttons keep their compact footprint and never shrink. */
.spt-cta-dismiss {
    flex-shrink: 0;
}

/* ── v11 MOBILE — extra-tight padding and slightly smaller bolt
   on narrow viewports. The single-row layout is already the
   default; we just shave a few extra pixels of padding so the
   strip occupies the minimum height physics allows. */

@media (max-width: 600px) {
    .spt-cta-strip {
        gap: 8px;
        padding: 7px 10px;
    }

    .spt-cta-bolt {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }

        .spt-cta-bolt svg {
            width: 12px;
            height: 12px;
        }

    .spt-cta-lead {
        font-size: 0.78rem;
        line-height: 1.2;
    }

    .spt-cta-tail {
        font-size: 0.74rem;
        line-height: 1.2;
    }

    .spt-cta-dismiss {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }
}

/* On *very* narrow phones (≤360px), prioritise the lead and let
   the tail drop entirely rather than truncating both to nothing.
   The lead text alone still conveys the status. */
@media (max-width: 360px) {
    .spt-cta-tail {
        display: none !important;
    }
}

/* ── MULTI-AREA NOTICE WRAP SUPPORT ────────────────────────
   Same flex-wrap treatment for the multi-area notice so long
   translated labels and pills land cleanly. */

.spt-multiarea-notice {
    flex-wrap: wrap;
    row-gap: 8px;
}

.spt-multiarea-body {
    /* Take full width when wrapping so pills don't compete with
       the icon for horizontal space. */
    flex: 1 1 220px;
    min-width: 0;
}

.spt-multiarea-title {
    /* Wrap title naturally — Zulu "Ngithathe izindawo eziningi"
       is longer than the English one-liner. */
    white-space: normal;
    line-height: 1.35;
}

.spt-multiarea-pills {
    /* Already flex-wrap from v4.2 — confirm. */
    flex-wrap: wrap;
}

.spt-multiarea-pill {
    /* Allow individual pills to wrap their label text rather
       than getting clipped. */
    white-space: normal;
    max-width: 100%;
    text-align: left;
    line-height: 1.3;
    /* Slightly more vertical padding to accommodate two-line text. */
    padding: 6px 12px;
}

/* ── EXCLUSION STRIP WRAP SUPPORT ──────────────────────────
   "No swimming pool" can be longer than "No pool". Let pills
   wrap their text. */

.spt-exclude-chip {
    white-space: normal;
    max-width: 100%;
    line-height: 1.3;
    padding: 4px 11px 4px 9px;
}

/* ── Reduced-motion fallback ─────────────────────────────────
   The glyph hover/active rule was removed in v4.5 alongside the
   glyph element itself. No motion-driven hover effects remain on
   the CTA strip beyond the entrance animation, which is already
   suppressed by the earlier reduced-motion block. */

/* ════════════════════════════════════════════════════════════
   v4.5 — PREMIUM QUICK FILTERS REDESIGN
   ────────────────────────────────────────────────────────────
   Replaces the cramped horizontal pill row with a card-style
   layout: each filter is its own subtle-bordered card with the
   label stacked above the pill row. The active pill sits flush
   in its row (no "popping out"). A tiny × on the card appears
   when a value is set so clearing is one tap.
   ════════════════════════════════════════════════════════════ */

/* ── QF INPUTS ROW — base container ─────────────────────────
   Override any horizontal cramming. The fields are now actual
   cards with breathing room between them. Horizontal scroll
   still works on tiny screens; we just give the cards proper
   minimum widths so they stay readable. */
.qf-inputs {
    display: flex !important;
    align-items: stretch;
    gap: 8px;
    padding: 4px 2px;
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
}

@media (min-width: 992px) {
    .qf-inputs {
        /* Desktop: allow wrap when more than the row can fit. */
        flex-wrap: wrap;
    }
}

/* ── QF FIELD CARD — each filter is its own card ────────────
   Card has:
     • soft 1px border (no shadow when idle — too noisy at this
       density)
     • label slot ABOVE the pill row
     • subtle orange tint when has-value
     • mini × at top-right when has-value */
.qf-field {
    /* override any inline display from earlier markup */
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 12px 10px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    min-width: 0;
    flex: 0 0 auto;
    position: relative;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    /* Smooth the corner-rounding hand-off when adjacent cards
       sit close together. */
    contain: layout style;
}

    .qf-field:hover {
        border-color: #D1D5DB;
    }

    /* Active state — the WHOLE card subtly tints, not the pill alone.
       Replaces the "popping out" look where one pill had a vivid
       background while the rest of the row was plain. */
    .qf-field.has-value {
        background: linear-gradient(180deg, #FFF8F1 0%, #FFFFFF 100%);
        border-color: rgba(245, 130, 32, 0.45);
        box-shadow: 0 1px 4px rgba(245, 130, 32, 0.08);
    }

/* ── QF FIELD LABEL — small uppercase caption above the row ─
   Calmer typography: smaller, more tracked, less shouty than
   the old "BEDROOMS" with active-pill chrome to its right. */
.qf-field-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7280;
    line-height: 1;
    user-select: none;
    /* Truncate if a long translation lands and the card is narrow. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qf-field.has-value > .qf-field-label {
    color: var(--omni-orange, #F58220);
}

/* ── QF PRICE WRAP — the inner widget container ─────────────
   Used by both chip filters and price selects. Reset margins
   so the inner widget aligns properly to the card's left edge. */
.qf-price-wrap {
    margin: 0;
    display: flex;
    align-items: center;
}

/* ── PILL FILTER (beds / baths / garages / age) ─────────────
   Pills sit in a tight horizontal row with a subtle background
   strip behind them so the active pill blends in. */
.qf-chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    background: #F3F4F6;
    border-radius: 999px;
    padding: 3px;
    box-sizing: border-box;
}

.qf-chip-opt {
    /* Reset any inherited button chrome. */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 10px;
    font: 600 0.78rem -apple-system, system-ui, sans-serif;
    color: #4B5563;
    cursor: pointer;
    line-height: 1.2;
    min-width: 28px;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}

    .qf-chip-opt:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #1F2937;
    }

    .qf-chip-opt.active {
        background: var(--omni-orange, #F58220);
        color: #FFFFFF;
        border-color: var(--omni-orange, #F58220);
        box-shadow: 0 1px 3px rgba(245, 130, 32, 0.30);
    }

        .qf-chip-opt.active:hover {
            background: #E56F0E;
            color: #FFFFFF;
        }

    .qf-chip-opt:focus-visible {
        outline: 2px solid var(--omni-orange, #F58220);
        outline-offset: 1px;
    }

/* ── PRICE SELECT BUTTON — keep the dropdown look consistent ─
   Match the chip-row visual weight so a Min Price card next
   to a Bedrooms card reads as the same kind of thing. */
.qf-price-btn {
    appearance: none;
    -webkit-appearance: none;
    background: #F3F4F6;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 6px 12px 6px 14px;
    font: 600 0.8rem -apple-system, system-ui, sans-serif;
    color: #1F2937;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 90px;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .qf-price-btn:hover {
        background: #E5E7EB;
    }

    .qf-price-btn:focus-visible {
        outline: 2px solid var(--omni-orange, #F58220);
        outline-offset: 1px;
    }

.qf-field.has-value > .qf-price-wrap > .qf-price-btn {
    background: #FFFFFF;
    border-color: rgba(245, 130, 32, 0.45);
    color: var(--omni-orange, #F58220);
}

.qf-price-btn-label {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qf-price-chevron {
    flex: 0 0 auto;
    font-size: 11px;
    opacity: 0.6;
    transition: transform 0.18s ease;
}

.qf-price-btn[aria-expanded="true"] .qf-price-chevron {
    transform: rotate(180deg);
}

/* ── FIELD CLEAR (× icon, top-right of card) ────────────────
   Appears only when the field has a value. Stays out of the
   way otherwise. */
.qf-field-clear {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(245, 130, 32, 0.12);
    border: none;
    color: var(--omni-orange, #F58220);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    transition: background 0.15s ease, transform 0.18s ease;
    z-index: 2;
}

    .qf-field-clear:hover {
        background: var(--omni-orange, #F58220);
        color: #FFFFFF;
        transform: scale(1.08);
    }

    .qf-field-clear:focus-visible {
        outline: 2px solid var(--omni-orange, #F58220);
        outline-offset: 1px;
    }

    .qf-field-clear i {
        font-size: 11px;
        line-height: 1;
    }

/* When the clear button is visible, give the label a touch of
   right-padding so it never collides with the ×. */
.qf-field.has-value .qf-field-label {
    padding-right: 22px;
}

/* ── QF SEPARATOR — fully hidden in v4.5 ────────────────────
   The em-dash between fields was removed in JS but defensively
   hide any leftover in case the markup is cached. */
.qf-separator {
    display: none !important;
}

/* ── TOGGLE FILTERS (Pet Friendly / Pool / Solar / etc.) ────
   These use the same "qf-chip-opt qf-toggle-opt" class as the
   chip rows above, just a single chip instead of multiple. */
.qf-toggle-opt {
    background: #F3F4F6;
    padding: 6px 14px;
    font-size: 0.78rem;
}

    .qf-toggle-opt.active {
        background: var(--omni-orange, #F58220);
        color: #FFFFFF;
    }

/* ── DESKTOP — let cards breathe ─────────────────────────────
   Wider min-width when there's plenty of horizontal space so
   each card has visual presence. */
@media (min-width: 992px) {
    .qf-field {
        min-width: 130px;
    }

    .qf-chip-opt {
        padding: 5px 12px;
        font-size: 0.8rem;
    }
}

/* ── TABLET — tighter ───────────────────────────────────────  */
@media (min-width: 768px) and (max-width: 991px) {
    .qf-field {
        min-width: 120px;
        padding: 7px 10px 9px;
    }

    .qf-chip-opt {
        padding: 4px 9px;
        font-size: 0.76rem;
    }
}

/* ── MOBILE — horizontal scroll snap ────────────────────────  */
@media (max-width: 767px) {
    .qf-inputs {
        gap: 7px;
        padding: 4px 2px 6px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 4px;
    }

    .qf-field {
        scroll-snap-align: start;
        min-width: 132px;
        padding: 7px 10px 9px;
    }

    .qf-field-label {
        font-size: 0.6rem;
    }

    .qf-chip-opt {
        padding: 4px 9px;
        font-size: 0.74rem;
        min-width: 26px;
    }

    .qf-chip-filter {
        gap: 3px;
        padding: 2px;
    }
}

/* ── Reduced-motion fallback ─────────────────────────────────  */
@media (prefers-reduced-motion: reduce) {
    .qf-field,
    .qf-chip-opt,
    .qf-price-btn,
    .qf-field-clear {
        transition: none !important;
    }

        .qf-chip-opt:hover,
        .qf-field-clear:hover {
            transform: none !important;
        }
}

/* ============================================================
   v4.13 — QUESTIONS ZONE
   Top-of-qfRow container that hosts all AI clarifications,
   province prompts, location suggestions, and POI prompts.
   Keeps the conversational UI above the quick-filter widgets
   and the chip rail so the user sees what to answer first.
   ============================================================ */
.omni-nlp-questions-zone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
}

    .omni-nlp-questions-zone:empty {
        display: none;
        margin: 0;
    }

    .omni-nlp-questions-zone > * {
        /* Make sure panels inside the zone don't carry the legacy
           "8px top margin" they used when they were inserted after the
           chip bar — the zone's own `gap: 8px` already spaces them. */
        margin-top: 0 !important;
    }

/* v4.13 — POI prompt (top schools / hospitals / libraries / etc.)
   Renders inside the province drilldown after a city pick. Layout
   mirrors the existing province drilldown row but with its own
   accent so users see this is a new level of refinement. */
.omni-prov-poi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(86,196,248,0.06), rgba(245,130,32,0.04));
    border-top: 1px dashed rgba(86,196,248,0.3);
    border-radius: 0 0 8px 8px;
    font-size: 0.78rem;
}

.omni-prov-poi-label {
    color: #2c2c2a;
    font-weight: 600;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.omni-prov-poi-pill {
    background: #fff;
    border: 1px solid rgba(86,196,248,0.4);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    color: #2c2c2a;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

    .omni-prov-poi-pill:hover {
        background: rgba(86,196,248,0.1);
        border-color: rgba(86,196,248,0.7);
    }

    .omni-prov-poi-pill.selected {
        background: #F58220;
        color: #fff;
        border-color: #F58220;
    }

    .omni-prov-poi-pill.loading {
        opacity: 0.55;
        cursor: wait;
    }

.omni-prov-poi-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #888780;
    font-size: 0.72rem;
    font-style: italic;
}

/* ============================================================================
   v11.2 — QUICK-FILTERS COMPACT (~10% tighter)
   ----------------------------------------------------------------------------
   Trims the quick-filters row's vertical footprint so the whole Describe-It
   stack (questions + picker + qf row + chips) fits one viewport. Appended at
   the END so these win over the base .qf-* rules above without editing them;
   easy to remove as a block if ever needed. Targets ONLY the qf row, so the
   conversational anchor panels (compacted separately in the patch) and the
   rest of the page are untouched.
   ========================================================================== */
#qfRow .qf-inputs {
    gap: 6px !important;
    padding: 2px 2px !important;
}

#qfRow .qf-field {
    padding: 5px 9px 6px !important;
    gap: 4px !important;
    border-radius: 10px !important;
}

#qfRow .qf-field-label {
    font-size: 0.56rem !important;
}

#qfRow .qf-chip-filter {
    gap: 3px !important;
}

#qfRow .qf-price-wrap select,
#qfRow .qf-price-wrap input {
    font-size: 0.78rem !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

#qfRow .qf-chip-opt {
    padding: 3px 8px !important;
    font-size: 0.76rem !important;
}
/* Tighten the header row ("QUICK FILTERS n — DESCRIBE IT ACTIVE" + Customize) */
#qfRow .qf-header-row {
    margin-bottom: 3px !important;
}

/* ============================================================================
   v11.2 — CTA STRIP + CHIP ROW COMPACT (~10% tighter)
   ----------------------------------------------------------------------------
   Continues the one-viewport goal: the "you're one tap away" CTA strip and the
   Describe-It chip row were the last elements pushing content under the footer.
   Trims their vertical margin/padding only — colours, animation and layout are
   untouched. Appended at the end so it wins without editing the base rules.
   ========================================================================== */
.spt-cta-strip {
    margin: 4px 0 5px !important;
    padding: 7px 12px 7px 10px !important;
    gap: 9px !important;
}

    .spt-cta-strip .spt-cta-bolt {
        width: 26px !important;
        height: 26px !important;
    }

    .spt-cta-strip .spt-cta-lead {
        font-size: 0.82rem !important;
    }

    .spt-cta-strip .spt-cta-sub {
        font-size: 0.72rem !important;
    }

#qfRow .qf-chip-filter {
    margin-top: 4px !important;
}

#qfRow {
    row-gap: 4px !important;
}