/* Hide main content initially - prevents flash of content before loader */
/* Only hide the main wrapper content, not the entire body */
.main-content,
.header-strip,
.floating-engagement,
.a11y-btn,
.floating-settings-wrapper,
.chat-btn,
.modal,
.offcanvas {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s ease;
}

/* When loader is hidden, show main content */
body.loader-complete .main-content,
body.loader-complete .header-strip,
body.loader-complete .floating-engagement,
body.loader-complete .a11y-btn,
body.loader-complete .floating-settings-wrapper,
body.loader-complete .chat-btn,
body.loader-complete .modal,
body.loader-complete .offcanvas {
    opacity: 1;
    visibility: visible;
}

/* Ensure loader overlay is above everything */
.loader-overlay {
    z-index: 100000 !important;
}

:root {
    /* Logo Colors */
    --primary-blue: #56C4F8;
    --primary-orange: #F58220;
    /* Light Theme Palette */
    --bg-main: #F4F7F9;
    --surface-white: #FFFFFF;
    --text-main: #1A1D20;
    --text-muted: #6C757D;
    /* Borders & Shadows */
    --border-soft: rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.06);
}

/* ================= CUSTOM FONT ================= */
@font-face {
    font-family: 'Signature';
    src: url('/fonts/signature.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/* ================= ACCESSIBILITY OVERRIDES ================= */

/* ── Grayscale ── */
html.a11y-grayscale {
    filter: grayscale(100%) !important;
}

/* ── High Contrast ── */
html.a11y-high-contrast {
    filter: contrast(135%) saturate(160%) !important;
}

/* ── Font Scale — driven by CSS custom property set from the slider ──
   Applies to all readable text elements.
   The :root declaration sets the default; JS overrides it via
   documentElement.style.setProperty('--a11y-font-scale', val + '%')        */
:root {
    --a11y-font-scale: 100%;
}

html.a11y-custom-font body,
html.a11y-custom-font p,
html.a11y-custom-font span:not(.rn-lang-code):not(.rn-lang-native):not(.mel-avatar-letter):not(.header-tagline),
html.a11y-custom-font li,
html.a11y-custom-font a,
html.a11y-custom-font label,
html.a11y-custom-font button:not(.mel-trigger-btn):not(.rn-lang-trigger),
html.a11y-custom-font input,
html.a11y-custom-font textarea,
html.a11y-custom-font select,
html.a11y-custom-font h1,
html.a11y-custom-font h2,
html.a11y-custom-font h3,
html.a11y-custom-font h4,
html.a11y-custom-font h5,
html.a11y-custom-font h6 {
    font-size: var(--a11y-font-scale) !important;
}

/* ── Emphasise Links ── */
html.a11y-emphasize-links a,
html.a11y-emphasize-links [role="link"] {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    outline: 2px solid rgba(245, 130, 32, 0.55) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
    background-color: rgba(245, 130, 32, 0.06) !important;
}

/* ── Emphasise Headings ── */
html.a11y-emphasize-headings h1,
html.a11y-emphasize-headings h2,
html.a11y-emphasize-headings h3,
html.a11y-emphasize-headings h4,
html.a11y-emphasize-headings h5,
html.a11y-emphasize-headings h6 {
    border-left: 4px solid #F58220 !important;
    padding-left: 10px !important;
    background: rgba(245, 130, 32, 0.07) !important;
    border-radius: 0 4px 4px 0 !important;
    margin-left: -14px !important;
}

/* ── Screen Reader — visible focus ring when TTS is active ── */
html.a11y-screen-reader *:focus,
html.a11y-screen-reader *:hover {
    outline: 2.5px solid #F58220 !important;
    outline-offset: 3px !important;
    border-radius: 3px !important;
}

/* Keep the old large-text rule for backwards compatibility */
html.a11y-large-text {
    font-size: 115% !important;
}

/* Base Constraints - Strict Single View */
html, body.app-body {
    height: 100vh; /* fallback */
    height: 100dvh; /* dynamic viewport — tracks iOS Safari toolbars so
                               content is never trapped beneath browser chrome */
    width: 100vw;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-main);
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* Text utility classes */
.text-sm {
    font-size: 0.9rem !important;
}

.text-xs {
    font-size: 0.75rem !important;
}

/* ================= CANVAS TRANSITION ================= */
#patternTransition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;
}

/* Header - Premium Design */
.header-strip {
    background: var(--surface-white);
    height: 90px;
    flex-shrink: 0;
    z-index: 10;
    border-bottom: none;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 28px;
    /* Allow child tooltips (profile toast) to overflow below header and paint above gradient border */
    overflow: visible;
}

/* Premium Header Container */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
}

/* Brand Section */
.brand-section {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.brand-logo {
    flex-shrink: 0;
}

    /* The logo is wrapped in an <a href="/"> — strip all anchor chrome
       so it looks and behaves exactly like a plain image. */
    .brand-logo a {
        display: inline-block;
        line-height: 0;
        text-decoration: none !important;
        outline-offset: 4px;
    }

    .brand-logo img {
        height: 58px;
        width: auto;
        transition: transform 0.3s ease;
        display: block;
    }

        .brand-logo img:hover {
            transform: scale(1.03);
        }

/* Tagline Container - Centered in the middle */
.tagline-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    height: 100%;
}

/* Tagline - Signature Font */
.header-tagline {
    font-family: 'Signature', 'Playfair Display', cursive;
    font-size: 1rem;
    font-weight: 900;
    background: linear-gradient(135deg, #F58220 0%, #56C4F8 50%, #F58220 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    /*  color: transparent;*/
    letter-spacing: 0.07em;
    white-space: nowrap;
    animation: tagline-shimmer 4s linear infinite;
    position: relative;
    line-height: 1.8;
    padding: 15px 5px 0 5px;
    margin: 0;
    text-align: center;
}

@keyframes tagline-shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Optional: Add a subtle glow effect on hover */
.header-tagline:hover {
    animation: tagline-glow 1.5s ease-in-out infinite, tagline-shimmer 4s linear infinite;
}

@keyframes tagline-glow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(245,130,32,0.2);
    }

    50% {
        text-shadow: 0 0 15px rgba(245,130,32,0.4);
    }
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER BURGER MENU TRIGGER — mobile only (≤991px via d-lg-none)
   ════════════════════════════════════════════════════════════════════════
   Compact KQG-styled icon button. Sits as the FIRST item in
   .header-actions so it's the leftmost element on mobile. Triggers
   #headerNavDrawer.
*/
.header-burger-btn {
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(245, 130, 32, 0.35);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    flex-shrink: 0;
}

    .header-burger-btn:hover,
    .header-burger-btn:focus-visible {
        background: rgba(245, 130, 32, 0.10);
        border-color: rgba(245, 130, 32, 0.6);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(245, 130, 32, 0.18);
        outline: none;
    }

    .header-burger-btn:active {
        transform: translateY(0) scale(0.96);
    }

    /* When the drawer is open, the burger lights up. Bootstrap toggles
   aria-expanded automatically on the trigger. */
    .header-burger-btn[aria-expanded="true"] {
        background: linear-gradient(135deg, #F58220, #ffb347);
        border-color: #F58220;
    }

        .header-burger-btn[aria-expanded="true"] .header-burger-bar {
            stroke: #ffffff;
        }

        .header-burger-btn[aria-expanded="true"] .header-burger-pulse {
            fill: #ffffff;
        }

.header-burger-pulse {
    animation: header-burger-pulse 2.4s ease-in-out infinite;
}

@keyframes header-burger-pulse {
    0%, 100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-burger-pulse {
        animation: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM BURGER DRAWER — #headerNavDrawer
   ════════════════════════════════════════════════════════════════════════
   Slides in from the right, ~min(360px, 88vw) wide. Three vertical
   zones: header (fixed), scrollable body, sticky footer.

   Brand language:
     • Frosted-white glass surface (matches search bar / settings panel)
     • Orange ↦ blue ↦ orange gradient accent down the left edge
       (mirrors the .header-gradient-border on the page header)
     • KQG corners (16-20px radius), generous touch targets (≥44px)
     • Smooth cubic-bezier transitions
*/
.ikh-burger-drawer {
    /* Layout — natural width, no override; we tune via padding */
    width: min(360px, 88vw) !important;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.14), -2px 0 6px rgba(0, 0, 0, 0.06);
    border: none;
    /* Native flex column so footer can be sticky inside body and the
       header zone stays fixed at the top.  We swap Bootstrap's grid
       for explicit flex so all three zones behave predictably. */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* drawer itself doesn't scroll — the body does */
}

    /* Brand accent stripe down the left edge — mirrors the page header's
   horizontal gradient, rotated 90°. Subtle but unmistakably on-brand. */
    .ikh-burger-drawer::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        background: linear-gradient(180deg, #F58220 0%, #56C4F8 50%, #F58220 100%);
        background-size: 100% 200%;
        animation: ikh-burger-stripe 6s ease-in-out infinite;
        z-index: 1;
        pointer-events: none;
    }

@keyframes ikh-burger-stripe {
    0%, 100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ikh-burger-drawer::before {
        animation: none;
    }
}

/* ── ZONE 1: HEADER ─────────────────────────────────────────────────── */
.ikh-burger-header {
    flex-shrink: 0;
    padding: 20px 22px 14px 26px; /* extra left to clear the accent stripe */
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
}

.ikh-burger-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #F58220, #ffb347);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ikh-burger-close {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A1D20;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

    .ikh-burger-close:hover,
    .ikh-burger-close:focus-visible {
        background: rgba(245, 130, 32, 0.10);
        border-color: rgba(245, 130, 32, 0.4);
        color: #F58220;
        transform: rotate(90deg);
        outline: none;
    }

/* ── ZONE 2: SCROLLABLE BODY ────────────────────────────────────────── */
.ikh-burger-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 22px 18px 26px;
    /* Important: leave room above for the sticky footer to overlay
       comfortably. We add bottom padding equal to the footer's height
       so the last menu item is never trapped behind it. */
    padding-bottom: 110px;
    /* Smooth iOS scrolling */
    -webkit-overflow-scrolling: touch;
    /* Slim scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 130, 32, 0.3) transparent;
}

    .ikh-burger-body::-webkit-scrollbar {
        width: 4px;
    }

    .ikh-burger-body::-webkit-scrollbar-thumb {
        background: rgba(245, 130, 32, 0.3);
        border-radius: 4px;
    }

    .ikh-burger-body::-webkit-scrollbar-track {
        background: transparent;
    }

/* ── Section structure ──────────────────────────────────────────────── */
.ikh-burger-section + .ikh-burger-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* subtle, not harsh */
}

.ikh-burger-section-title {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin: 0 0 10px 4px;
}

/* ── Nav links / buttons (shared row treatment) ─────────────────────── */
.ikh-burger-nav-link {
    /* Reset for both <a> and <button> variants */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    text-decoration: none;
    color: #1A1D20;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    min-height: 52px; /* thumb-friendly */
    transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

    .ikh-burger-nav-link:hover,
    .ikh-burger-nav-link:focus-visible {
        background: rgba(245, 130, 32, 0.08);
        color: #F58220;
        outline: none;
    }

    .ikh-burger-nav-link:active {
        transform: scale(0.985);
    }

.ikh-burger-nav-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(245, 130, 32, 0.10);
    color: #F58220;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.18s ease;
}

.ikh-burger-nav-link:hover .ikh-burger-nav-icon {
    background: rgba(245, 130, 32, 0.18);
}

.ikh-burger-nav-label {
    flex: 1;
    min-width: 0;
}

.ikh-burger-nav-chev {
    flex-shrink: 0;
    color: #B0BAC6;
    font-size: 0.85rem;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s ease;
}

.ikh-burger-nav-link:hover .ikh-burger-nav-chev {
    color: #F58220;
    transform: translateX(2px);
}

/* Sign-out variant — danger tint on hover */
.ikh-burger-signout:hover,
.ikh-burger-signout:focus-visible {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

    .ikh-burger-signout:hover .ikh-burger-nav-icon {
        background: rgba(239, 68, 68, 0.16);
        color: #ef4444;
    }

    .ikh-burger-signout:hover .ikh-burger-nav-chev {
        color: #ef4444;
    }

/* ── Translations: collapsible row ──────────────────────────────────── */
.ikh-burger-collapse-trigger {
    /* Inherits ikh-burger-nav-link visual; Sass-style composition not
       used here so we duplicate the relevant rules. The structure is
       a flex row with icon, label, current pill, chevron. */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    text-decoration: none;
    color: #1A1D20;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 52px;
    transition: background 0.18s ease, color 0.18s ease;
}

    .ikh-burger-collapse-trigger:hover,
    .ikh-burger-collapse-trigger:focus-visible {
        background: rgba(245, 130, 32, 0.08);
        color: #F58220;
        outline: none;
    }

    /* When expanded, lock in the active visual so the row reads "open".
   The chevron rotates from right (▶) to down (▼). */
    .ikh-burger-collapse-trigger[aria-expanded="true"] {
        background: rgba(245, 130, 32, 0.10);
        color: #F58220;
    }

        .ikh-burger-collapse-trigger[aria-expanded="true"] .ikh-burger-nav-chev {
            transform: rotate(90deg);
            color: #F58220;
        }

        .ikh-burger-collapse-trigger[aria-expanded="true"] .ikh-burger-nav-icon {
            background: rgba(245, 130, 32, 0.18);
        }

/* The "current language" pill at the right of the collapse trigger.
   Indicates active state without expanding — premium UX touch. */
.ikh-burger-current-pill {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: #6C757D;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 10px;
    border-radius: 30px;
    letter-spacing: 0;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}

.ikh-burger-collapse-trigger:hover .ikh-burger-current-pill,
.ikh-burger-collapse-trigger[aria-expanded="true"] .ikh-burger-current-pill {
    background: rgba(245, 130, 32, 0.15);
    color: #F58220;
}

/* The collapsible body uses max-height for a smooth animation that
   doesn't jank when content height changes (CSS transitions can't
   animate height: auto cleanly). */
.ikh-burger-collapse-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.36s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.22s ease, margin-top 0.22s ease;
    opacity: 0;
    margin-top: 0;
}

.ikh-burger-collapse-trigger[aria-expanded="true"] + .ikh-burger-collapse-body {
    max-height: 800px; /* generous; content is ~430px */
    opacity: 1;
    margin-top: 8px;
}

/* Rainbow accent strip inside the language section — mirrors the
   existing .rn-panel-rainbow but tighter for the drawer. */
.ikh-burger-rainbow {
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    margin: 0 4px 12px;
}

    .ikh-burger-rainbow > span {
        flex: 1;
    }

/* The 11-language grid — 2-column layout fits well in a 360px-wide
   drawer. Each tile is ~145px wide, very thumb-friendly. */
.ikh-burger-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

    /* Override of .rn-lang-item inside the drawer — slightly tighter
   spacing and the active-state matches our new tinted-row look. */
    .ikh-burger-lang-grid .rn-lang-item {
        padding: 10px 12px;
        min-height: 52px;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        background: rgba(255, 255, 255, 0.6);
        text-align: left;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        overflow: hidden;
    }

        .ikh-burger-lang-grid .rn-lang-item:hover {
            background: rgba(245, 130, 32, 0.08);
            border-color: rgba(245, 130, 32, 0.25);
            transform: translateY(-1px);
        }

        .ikh-burger-lang-grid .rn-lang-item.active {
            background: linear-gradient(135deg, rgba(245, 130, 32, 0.12), rgba(255, 179, 71, 0.12));
            border-color: rgba(245, 130, 32, 0.45);
            box-shadow: 0 2px 8px rgba(245, 130, 32, 0.12);
        }

        .ikh-burger-lang-grid .rn-lang-item .rn-lang-name {
            font-size: 0.85rem;
            font-weight: 700;
            color: #1A1D20;
            line-height: 1.1;
        }

        .ikh-burger-lang-grid .rn-lang-item.active .rn-lang-name {
            color: #F58220;
        }

        .ikh-burger-lang-grid .rn-lang-item .rn-lang-native {
            font-size: 0.7rem;
            font-weight: 500;
            color: #9CA3AF;
            line-height: 1.1;
        }

/* ── ZONE 3: STICKY FOOTER ──────────────────────────────────────────── */
.ikh-burger-footer {
    /* sticky — remains visible at the bottom of the drawer at all times.
       The drawer itself is overflow:hidden + display:flex column, so
       this sits as a flex item below the body and never overlaps content. */
    flex-shrink: 0;
    padding: 14px 22px 18px 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 22%, rgba(255, 255, 255, 1) 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 2;
    /* Use safe-area-inset-bottom on iOS so the footer clears the home
       indicator on phones without home buttons. */
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

/* Anon (signed-out) CTA row */
.ikh-burger-cta-row {
    display: flex;
    gap: 10px;
}

.ikh-burger-cta {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Secondary — Sign In: outlined glass */
.ikh-burger-cta--secondary {
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(245, 130, 32, 0.45);
    color: #1A1D20;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

    .ikh-burger-cta--secondary:hover,
    .ikh-burger-cta--secondary:focus-visible {
        background: rgba(245, 130, 32, 0.10);
        border-color: #F58220;
        color: #F58220;
        transform: translateY(-1px);
        outline: none;
    }

/* Primary — Register: filled brand gradient (the dominant CTA) */
.ikh-burger-cta--primary {
    background: linear-gradient(135deg, #F58220 0%, #ffb347 100%);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(245, 130, 32, 0.32);
    border: 1.5px solid transparent;
}

    .ikh-burger-cta--primary:hover,
    .ikh-burger-cta--primary:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(245, 130, 32, 0.42);
        background: linear-gradient(135deg, #e5720f 0%, #F58220 100%);
        outline: none;
    }

    .ikh-burger-cta--primary:active {
        transform: translateY(0) scale(0.985);
    }

    .ikh-burger-cta--primary i {
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .ikh-burger-cta--primary:hover i {
        transform: translateX(3px);
    }

/* Authed user card (signed-in footer) */
.ikh-burger-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.08), rgba(86, 196, 248, 0.06));
    border: 1px solid rgba(245, 130, 32, 0.18);
}

.ikh-burger-user-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F58220, #ffb347);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(245, 130, 32, 0.32);
}

.ikh-burger-user-meta {
    flex: 1;
    min-width: 0;
}

.ikh-burger-user-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1A1D20;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.ikh-burger-user-email {
    font-size: 0.75rem;
    color: #6C757D;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* ── Backdrop tweak — softer than Bootstrap default ─────────────────── */
.offcanvas-backdrop.show {
    opacity: 0.42;
}

/* ── Smaller phones (≤380px) — tighten paddings so content fits ─────── */
@media (max-width: 380px) {
    .ikh-burger-drawer {
        width: 92vw !important;
    }

    .ikh-burger-header {
        padding: 18px 18px 12px 22px;
    }

    .ikh-burger-body {
        padding: 16px 18px 110px 22px;
    }

    .ikh-burger-footer {
        padding: 12px 18px 16px 22px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .ikh-burger-cta {
        font-size: 0.88rem;
        padding: 12px 12px;
    }
}

/* Animated gradient border-bottom on header */
.header-gradient-border::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-orange) 0%, var(--primary-blue) 33%, var(--primary-orange) 66%, var(--primary-blue) 100%);
    background-size: 200% 100%;
    animation: header-gradient-slide 4s linear infinite;
}

@keyframes header-gradient-slide {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

/* ════════════════════════════════════════════════════════
   KQG PROFILE BUTTON — Digital Jewelry rectangular glass tile
   Matches sj-tc-icon-wrap: 16px radius, frosted orange glass
════════════════════════════════════════════════════════ */
.profile-btn-kqg {
    width: 44px;
    height: 44px;
    text-decoration: none;
    /* Rectangular — matches sell tab card icon containers */
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,243,232,0.92), rgba(255,228,196,0.75));
    border: 1px solid rgba(245,130,32,0.25) !important;
    box-shadow: 0 4px 12px rgba(245,130,32,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* RATTLE FIX: separate transform from layout transitions */
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.22s cubic-bezier(0.34,1.3,0.64,1);
    will-change: transform;
    transform: translateZ(0);
    position: relative;
    flex-shrink: 0;
    /* Ensure tooltip (::after child) paints above the header gradient border ::after.
       Header z-index:10 — this element and its children need a higher z-index within
       the same stacking context to win the paint order. */
    z-index: 20;
    isolation: isolate;
}

    /* Hit-area buffer anchored to layout box — not affected by scale transform */
    .profile-btn-kqg::after {
        content: '';
        position: absolute;
        inset: -10px;
        border-radius: inherit;
    }

    /* Scale only — no translateY, eliminates rattle when cursor is at button edge */
    .profile-btn-kqg:hover {
        border-color: rgba(245,130,32,0.5) !important;
        box-shadow: 0 8px 28px rgba(245,130,32,0.32), inset 0 1px 0 rgba(255,255,255,1);
        transform: scale(1.07);
    }

        /* On hover: intensify the profile icon — deeper orange, brighter */
        .profile-btn-kqg:hover .profile-person-stroke {
            stroke: #E8740F;
            stroke-width: 2.5;
        }

        .profile-btn-kqg:hover .profile-person-fill {
            fill: #E8740F;
            opacity: 1;
        }

        .profile-btn-kqg:hover .profile-person-scan {
            stroke: #E8740F;
            opacity: 1;
        }

/* Profile core pulse — subtle heartbeat at head centre */
.profile-core-pulse {
    animation: profile-core-breathe 2.8s ease-in-out infinite alternate;
    transform-origin: 40px 25px;
}

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

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

/* Profile scan beam — sweeps across the bust like the sell tab agent icon */
.profile-scan-beam {
    stroke-dasharray: 28 18;
    animation: profile-scan-sweep 2.6s ease-in-out infinite;
}

@keyframes profile-scan-sweep {
    0% {
        stroke-dashoffset: 50;
        opacity: 0;
    }

    15% {
        opacity: 0.85;
    }

    85% {
        opacity: 0.85;
    }

    100% {
        stroke-dashoffset: -20;
        opacity: 0;
    }
}

.main-content {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* ================= BACKGROUNDS ================= */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: 0.95;
}

.bg-shape-strip {
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 400px;
    background: linear-gradient(90deg, rgba(86,196,248,0.2) 0%, rgba(245,130,32,0.15) 100%);
    transform: translateY(-50%) skewY(-3deg);
    filter: blur(60px);
    z-index: 1;
    pointer-events: none;
}

/* Nav Pills */
.w-fit {
    width: fit-content;
}

.bg-pill-container {
    background: rgba(255,255,255,0.92);
    border: none;
    /* Glassmorphic + neumorphic pill strip */
    box-shadow: 0 4px 20px rgba(0,0,0,0.14), -2px -2px 8px rgba(255,255,255,0.88), 0 1px 0 rgba(255,255,255,0.6) inset;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 4px !important;
    border: 1px solid rgba(255,255,255,0.7);
}

.scrollable-pills {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

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

.nav-pill {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 7px 22px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.83rem;
    letter-spacing: 0.01em;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

    .nav-pill:hover {
        color: var(--text-main);
        background: rgba(245,130,32,0.07);
    }

    /* Active: pressed-in + orange gradient — kept exactly as requested */
    .nav-pill.active {
        background: linear-gradient(135deg, var(--primary-orange) 0%, #ff9f4d 60%, #ffb347 100%);
        color: white;
        box-shadow: inset 2px 2px 5px rgba(0,0,0,0.18), 0 4px 18px rgba(245,130,32,0.4), 0 1px 0 rgba(255,255,255,0.3) inset;
        text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }

/* Main Search Input */
.main-search-input {
    background: rgba(255,255,255,0.97);
    border: 1.5px solid rgba(255,255,255,0.85);
    color: var(--text-main);
    border-radius: 16px;
    padding: 16px 20px 16px 48px;
    font-size: 1.05rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* When DYK bar is fused below, square off the bottom corners of the input */
.main-search-input--top {
    border-radius: 16px 16px 0 0 !important;
    border-bottom-color: rgba(0,0,0,0.05) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06), 0 8px 0 rgba(0,0,0,0) !important;
}

.main-search-input:focus {
    background: #ffffff;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(86,196,248,0.18), 0 8px 32px rgba(86,196,248,0.15), inset 0 1px 0 rgba(255,255,255,1);
    outline: none;
    color: var(--text-main);
    transform: translateY(-1px);
}

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

/* has-trends: right-padding reserves space for the overlaid Live Trends button.
   Uses text-overflow:ellipsis to clip long translated placeholders gracefully. */
@media (min-width: 576px) {
    .main-search-input.has-trends {
        padding-right: 150px !important;
        text-overflow: ellipsis;
    }
}

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

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

/* ── Search row button group: aligns to TOP of the flex row
   so buttons sit beside the input, not stretched to DYK height ── */
.search-input-stack ~ .d-flex.flex-shrink-0,
.search-btn-group {
    align-self: flex-start !important;
}

.filter-btn {
    background: rgba(255,255,255,0.92);
    border: 1.5px solid rgba(255,255,255,0.6);
    color: var(--text-main);
    border-radius: 14px;
    padding: 0 18px;
    font-weight: 700;
    font-size: 0.83rem;
    letter-spacing: 0.01em;
    height: 42px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    align-self: flex-start;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    /* RATTLE FIX: separate transform from other transitions */
    transition: box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.18s cubic-bezier(0.34,1.3,0.64,1);
    will-change: transform;
    transform: translateZ(0);
    position: relative;
}

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

    /* Stable buffer zone so upward shift doesn't lose hover */
    .filter-btn::after {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: inherit;
    }

    .filter-btn:hover {
        background: rgba(255,255,255,0.98);
        color: var(--primary-orange);
        box-shadow: 0 4px 16px rgba(0,0,0,0.14);
        transform: translateY(-1px);
    }

        /* Funnel SVG subtle tilt on hover — signals interactivity */
        .filter-btn:hover .kqg-btn-icon {
            transform: rotate(-8deg) scale(1.05);
            transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
        }

    .filter-btn.active,
    .filter-btn[aria-expanded="true"] {
        background: rgba(255,255,255,0.98);
        color: var(--primary-orange);
        border-color: rgba(245,130,32,0.3);
        box-shadow: 0 2px 8px rgba(245,130,32,0.15);
    }

.search-action-btn {
    background: linear-gradient(135deg, #1A1D20 0%, #2d3139 100%);
    color: white;
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 0 22px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    height: 42px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    align-self: flex-start;
    /* Clean shadow — no heavy neumorphic */
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    transition: box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease;
    position: relative;
    overflow: hidden;
}

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

    .search-action-btn:hover {
        color: white;
        box-shadow: 0 6px 20px rgba(0,0,0,0.28);
        transform: translateY(-1px);
        background: linear-gradient(135deg, #2d3139 0%, var(--primary-orange) 100%);
    }

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

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

/* Live Trends — overlaid inside the search input (sm+) */
/* ── Live Trends button — premium neumorphic + animated states ──
   RAISED (default): outer shadows lift + orange pulse glow on label.
   PRESSED (td-active): inset shadows + glowing underline accent.
──────────────────────────────────────────────────────────────── */
.btn-trends {
    background: linear-gradient(135deg, #fff8f0 0%, #fff3e6 100%);
    border: 1.5px solid rgba(245,130,32,0.22);
    color: #D4640A;
    border-radius: 10px;
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 6px 11px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    position: relative;
    /* Neumorphic warm raise */
    box-shadow: 3px 3px 9px rgba(0,0,0,0.14), -2px -2px 7px rgba(255,255,255,0.92), 0 0 0 0 rgba(245,130,32,0);
    transition: box-shadow 0.25s ease, color 0.2s ease, transform 0.15s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s ease;
}

    /* Subtle shimmer sweep on hover */
    .btn-trends::before {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
        transform: skewX(-20deg);
        transition: left 0s;
        pointer-events: none;
    }

    .btn-trends:hover::before {
        left: 150%;
        transition: left 0.5s ease;
    }

    .btn-trends:hover {
        color: #E8740F;
        border-color: rgba(245,130,32,0.4);
        box-shadow: 4px 4px 12px rgba(0,0,0,0.16), -3px -3px 9px rgba(255,255,255,0.95), 0 0 12px rgba(245,130,32,0.2);
        transform: translateY(-1px);
    }

    /* PRESSED — dashboard is open */
    .btn-trends.td-active {
        background: linear-gradient(135deg, #fff3e0 0%, #ffe8c8 100%);
        color: #D4640A;
        border-color: rgba(245,130,32,0.5);
        transform: translateY(1px);
        box-shadow: inset 3px 3px 8px rgba(0,0,0,0.13), inset -2px -2px 6px rgba(255,255,255,0.88), 0 0 14px rgba(245,130,32,0.25);
    }

        /* Glowing underline on pressed state */
        .btn-trends.td-active::after {
            content: '';
            position: absolute;
            bottom: 3px;
            left: 10%;
            right: 10%;
            height: 2px;
            background: linear-gradient(90deg, #F58220, #ffb347);
            border-radius: 2px;
            box-shadow: 0 0 6px rgba(245,130,32,0.6);
        }

/* Label text — truncate if translation is very long */
.btn-trends-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90px;
    display: inline-block;
    vertical-align: middle;
}

/* Legacy tiny dropdown — hidden, replaced by #trendsDashboard */
.trends-dropdown {
    display: none !important;
}

/* ================= ARCHITECTURE & SPLIT TRANSITIONS ================= */
/*
 * Toggle-button positioning and panel-collapsed states live in
 * ai-intelligence.css so they can be maintained as a self-contained
 * module.  Only the panel widths and wrapper transition belong here.
 */

#splitWrapper {
    position: relative; /* anchor for #aiToggleAnchor */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#leftPanel {
    width: 66.666%;
    flex-shrink: 0;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#rightPanel {
    width: 33.333%;
    flex-shrink: 0;
    /* Must be visible — .btn-ai-toggle bleeds left past this edge with left:-22px.
       overflow:hidden would clip it in Chrome/Chromium. */
    overflow: visible;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid var(--border-soft);
}

/* Collapsed State */
#splitWrapper.panel-collapsed #leftPanel {
    width: 100%;
}

#splitWrapper.panel-collapsed #rightPanel {
    width: 0%;
    border-left: none;
}

/* ================= FLOATING ECOSYSTEM ================= */
.btn-floating {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    padding: 0 !important;
    position: relative;
    /* RATTLE FIX: No translateY — moving the element up creates a gap below
       the new paint position where the cursor falls, triggering rapid hover
       enter/exit loops (the rattle). Scale from centre is safe; box-shadow
       gives the depth/lift perception instead. */
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
    will-change: transform;
    transform: translateZ(0);
}

    .btn-floating:hover {
        transform: scale(1.07);
        box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    }

    /* Hit-area buffer anchored to layout box — not affected by transform */
    .btn-floating::after {
        content: '';
        position: absolute;
        inset: -10px;
        border-radius: inherit;
    }

.floating-engagement {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 50;
    /* Ensure the gap between stacked buttons is covered — prevents cursor
       falling into empty space and triggering hover-exit/enter loops */
    gap: 10px !important;
}

/* ── Marketplace sub-page chrome trim ──
   The left-rail media icons (AI Location / Email / Walkthroughs) are
   useful on the marketplace landing — they're general-purpose CTAs for
   first-time visitors. On marketplace sub-pages (category, register,
   provider detail) they compete with the focused task on screen and
   feel like noise, so we hide them.

   marketplace-loader.js stamps <body data-mp-area="index|sub"> as early
   as possible (synchronous, runs at top of <body>) so this rule applies
   before first paint — no flash of the now-hidden icons. `display: none`
   is intentional: the reveal block above uses opacity/visibility for the
   loader-complete transition, and we need to override that, not just
   chain to it. */
body[data-mp-area="sub"] .floating-engagement {
    display: none !important;
}

/* ── KQG Engagement Buttons — pure white bg, coloured icon only ── */
.engagement-btn {
    background: #ffffff !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,1) !important;
    border-radius: 16px !important;
    will-change: transform;
    transform: translateZ(0);
    position: relative;
}

    /* Buffer zone covers gap between stacked buttons — vertical inset larger
       than horizontal so slowly-moving cursor never falls into dead space */
    .engagement-btn::after {
        content: '';
        position: absolute;
        inset: -14px -10px;
        border-radius: inherit;
    }

    /* Scale only — no translateY — eliminates the rattle entirely */
    .engagement-btn:hover {
        transform: scale(1.07) !important;
    }

    /* Location — green glow on hover only */
    .engagement-btn.loc-btn:hover {
        border-color: rgba(34,197,94,0.3) !important;
        box-shadow: 0 8px 28px rgba(34,197,94,0.25), inset 0 1px 0 rgba(255,255,255,1) !important;
    }

    /* Email — orange glow on hover only */
    .engagement-btn.email-btn:hover {
        border-color: rgba(245,130,32,0.3) !important;
        box-shadow: 0 8px 28px rgba(245,130,32,0.25), inset 0 1px 0 rgba(255,255,255,1) !important;
    }

    /* YouTube — red glow on hover only */
    .engagement-btn.yt-btn:hover {
        border-color: rgba(239,68,68,0.3) !important;
        box-shadow: 0 8px 28px rgba(239,68,68,0.25), inset 0 1px 0 rgba(255,255,255,1) !important;
    }

.a11y-btn {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 56px;
    height: 56px;
    border-radius: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    /* White tile — figure inside is black, clearly visible */
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 50;
    /* RATTLE FIX: no translateY — scale only, layout box stays in place */
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.25s ease !important;
    will-change: transform;
    transform: translateZ(0);
}

    /* Hit-area buffer anchored to layout box */
    .a11y-btn::after {
        content: '';
        position: absolute;
        inset: -10px;
        border-radius: inherit;
    }

    /* Default: figure is BLACK on white background */
    .a11y-btn .a11y-figure-stroke {
        stroke: #1A1D20;
        fill: none;
        transition: stroke 0.22s ease;
    }

    /* Head circle gets a very subtle dark fill tint */
    .a11y-btn circle.a11y-figure-stroke {
        fill: rgba(26,29,32,0.08);
    }

    .a11y-btn .a11y-figure-fill {
        fill: #1A1D20;
        stroke: none;
        transition: fill 0.22s ease;
    }

    /* Hover: blue background, figure stays BLACK, scale only (no translateY) */
    .a11y-btn:hover {
        background: #56C4F8 !important;
        border-color: rgba(86,196,248,0.5) !important;
        box-shadow: 0 8px 28px rgba(86,196,248,0.4), inset 0 1px 0 rgba(255,255,255,0.4) !important;
        transform: scale(1.07) !important;
    }

        .a11y-btn:hover .a11y-figure-stroke {
            stroke: #1A1D20;
        }

        .a11y-btn:hover .a11y-figure-fill {
            fill: #1A1D20;
        }

.floating-settings-wrapper {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    /* TRIO: render Privacy / Settings / Terms as a single horizontal cluster.
       Children (.settings-btn — both <button> and <a> variants) sit side by
       side with consistent spacing, matching the floating-engagement vertical
       column on the left for visual rhythm. */
    display: none; /* hidden by default, shown only on Buy/Rent via JS */
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* ── Visible class added by JS on Buy / Rent tabs ─────────────────── */
.floating-settings-wrapper--visible {
    display: inline-flex !important;
}

/* Anchor-tag variant of .settings-btn — strip the default underline and
   anchor color so <a> renders identically to <button>. The positional
   styling (size, gradient, shadow, border, hover) all comes from the
   shared .settings-btn rules below. */
.settings-trio-btn,
.settings-trio-btn:link,
.settings-trio-btn:visited,
.settings-trio-btn:hover,
.settings-trio-btn:active {
    color: inherit;
    text-decoration: none !important;
}

.settings-trio-btn {
    cursor: pointer;
}

.settings-btn {
    width: 56px;
    height: 56px;
    /* ALWAYS rectangular — locked at 16px, no browser rounding overrides */
    border-radius: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,243,232,0.95), rgba(255,228,196,0.85));
    border: 1px solid rgba(245,130,32,0.28) !important;
    box-shadow: 0 4px 12px rgba(245,130,32,0.15), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0 !important;
    /* RATTLE FIX: separate transform timing */
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.22s cubic-bezier(0.34,1.3,0.64,1) !important;
    will-change: transform;
    transform: translateZ(0);
    position: relative;
}

    /* Buffer hit-zone anchored to layout box */
    .settings-btn::after {
        content: '';
        position: absolute;
        inset: -10px;
        border-radius: inherit;
    }

    /* Scale only — no translateY, eliminates rattle at button edge */
    .settings-btn:hover {
        background: linear-gradient(135deg, rgba(255,237,215,0.98), rgba(255,218,168,0.92)) !important;
        border-color: rgba(245,130,32,0.6) !important;
        box-shadow: 0 8px 28px rgba(245,130,32,0.32), inset 0 1px 0 rgba(255,255,255,0.95) !important;
        transform: scale(1.07) !important;
    }

/* ── Shared FAB SVG container ── */
.fab-icon-svg {
    display: block;
    overflow: visible;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    /* Ensure SVG is visually centered within the flex button */
    margin: auto;
}

/* Mobile: shrink FAB icons to match sell card mobile icon size */
@media (max-width: 768px) {
    .fab-icon-svg {
        width: 30px;
        height: 30px;
    }

    /* Lock all floating buttons to rectangular at mobile — prevent any Bootstrap
       utility class (e.g. rounded-circle) from overriding KQG shape */
    .btn-floating,
    .a11y-btn,
    .settings-btn,
    .engagement-btn {
        border-radius: 16px !important;
    }

    /* Profile button stays rectangular on mobile too */
    .profile-btn-kqg {
        border-radius: 14px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE / iOS FOOTER STICK FIX
   ════════════════════════════════════════════════════════════════════════
   On desktop, .a11y-btn and .floating-settings-wrapper use position:absolute
   with bottom:20px so they sit at the bottom of the hero section. On iOS
   Safari (and any mobile browser with a dynamic bottom toolbar), absolute
   positioning resolves to the document/initial containing block — which on
   short hero sections leaves the buttons floating mid-page instead of stuck
   to the visible viewport bottom (see mobile screenshot vs desktop screenshot).

   Fix: on mobile, switch both elements to position:fixed so they anchor to
   the visual viewport bottom regardless of scroll or toolbar state. Use
   env(safe-area-inset-bottom) so they clear the iPhone home indicator and
   any dynamic Safari toolbar. Requires viewport-fit=cover in the meta tag
   (already set in _Layout.cshtml).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .a11y-btn {
        position: fixed !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        left: calc(16px + env(safe-area-inset-left, 0px)) !important;
        z-index: 60 !important;
    }

    .floating-settings-wrapper {
        position: fixed !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 60 !important;
    }

    /* Chat (robot) button — pin to bottom-right of the visible viewport so it
       stays aligned with the rest of the floating footer cluster on mobile.
       Same dynamic-toolbar reasoning as the a11y + settings buttons above. */
    .chat-btn {
        position: fixed !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        right: calc(16px + env(safe-area-inset-right, 0px)) !important;
        z-index: 60 !important;
    }

    /* Keep the left-rail engagement icons aligned with the new fixed footer
       row so the visual rhythm on mobile is preserved (engagement column,
       a11y on the left of the trio, settings trio centred). The engagement
       block already uses position:absolute with top:50% — that's fine on
       desktop but on mobile we want it to share the same fixed-footer plane
       so it doesn't drift mid-hero on short viewports. */
    .floating-engagement {
        position: fixed !important;
        top: auto !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        left: calc(80px + env(safe-area-inset-left, 0px)) !important;
        transform: none !important;
        flex-direction: row !important;
        z-index: 60 !important;
    }
}

/* iOS-specific extra cushion — the dynamic Safari bottom toolbar can briefly
   overlap fixed elements while collapsing. A small extra buffer keeps the
   tap targets clear of the toolbar edge without affecting Android/desktop. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .a11y-btn,
        .floating-settings-wrapper,
        .chat-btn,
        .floating-engagement {
            bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        }
    }
}

/* Reduced motion — disable all KQG scan/pulse/orbit for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .fab-a11y-scan,
    .fab-gear-scan,
    .fab-privacy-scan,
    .fab-terms-scan,
    .fab-loc-scan,
    .fab-email-scan,
    .fab-yt-scan,
    .rn-globe-scan,
    .rn-globe-pulse,
    .profile-core-pulse,
    .profile-scan-beam,
    .sj-anim-pulse-fast,
    .sj-anim-pulse,
    .sj-anim-spin {
        animation: none !important;
    }
}

/* ════════════════════════════════════════════════════════
   SHARED sj-anim BASE CLASSES
   (reused from sell journey — unify design language)
════════════════════════════════════════════════════════ */
.sj-anim-pulse {
    animation: pulse-scale 2s infinite alternate ease-in-out;
    transform-origin: center;
}

/* sj-anim-pulse-fast — faster heartbeat variant */
.sj-anim-pulse-fast {
    animation: pulse-scale 1.5s infinite alternate ease-in-out;
    transform-origin: center;
}

@keyframes pulse-scale {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }

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

/* sj-anim-spin — slow continuous rotation */
.sj-anim-spin {
    animation: sj-spin-global 12s linear infinite;
    transform-origin: center;
}

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

/* sj-anim-ripple — outward expanding ring */
@keyframes ripple-ring-out {
    0% {
        transform: scale(0.6);
        opacity: 0.7;
    }

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

.sj-anim-ripple {
    animation: ripple-ring-out 3s ease-out 0s infinite;
    transform-origin: center;
}

/* sj-anim-ripple-delay — staggered second ring */
.sj-anim-ripple-delay {
    animation: ripple-ring-out 3s ease-out 1.5s infinite;
    transform-origin: center;
}

/* ════════════════════════════════════════════════════════
   INSTANT CUSTOM TOOLTIP  — replaces browser title=""
   Zero delay, premium pill design, CSS-only
════════════════════════════════════════════════════════ */
.fab-has-tooltip {
    position: relative; /* already absolute, but ensure stacking */
}

.fab-tooltip {
    pointer-events: none;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    white-space: nowrap;
    background: #1A1D20;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 9999;
    /* Gap between button edge and tooltip — prevents hover stutter */
    margin-left: 2px;
}

/* Show instantly on hover/focus — no delay whatsoever */
.fab-has-tooltip:hover .fab-tooltip,
.fab-has-tooltip:focus-visible .fab-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ── Bottom-centered tooltip variant (for profile icon in header — prevents right-edge truncation) ──
   Positions tooltip directly below the icon, centered, so it never overflows right edge */
.fab-tooltip--bottom .fab-tooltip {
    /* Override the default right-side positioning */
    left: 50%;
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateX(-50%) translateY(-4px);
    margin-left: 0;
    /* Must paint above the header gradient border ::after (header z-index:10, its ::after inherits)
       Use isolation + explicit z-index to always be on top */
    z-index: 10500;
}

.fab-tooltip--bottom:hover .fab-tooltip,
.fab-tooltip--bottom:focus-visible .fab-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Top-centered tooltip variant ──────────────────────────────────────
   Used by the bottom-of-screen Privacy / Settings / Terms trio.
   The default tooltip position (right of icon) gets HIDDEN behind the
   sibling icon when the trio renders horizontally — privacy's tooltip
   was disappearing behind settings + terms.
   This variant positions the tooltip ABOVE the icon, centered, which:
     • never collides with horizontally-adjacent siblings
     • lifts above the floating-settings-wrapper without escaping the
       viewport (icons sit at bottom of screen with plenty of room above)
     • matches the same UX pattern as the header --bottom variant for
       visual consistency.
*/
.fab-tooltip--top .fab-tooltip {
    left: 50%;
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    margin-left: 0;
    z-index: 10500;
}

.fab-tooltip--top:hover .fab-tooltip,
.fab-tooltip--top:focus-visible .fab-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Right-anchored tooltip variant ────────────────────────────────────
   v14: built specifically for the Accessibility FAB at the bottom-left
   corner. The default rule already positions the tooltip to the right
   of the button — but the GENERIC mobile media query below collapses
   ALL tooltips to a top-centered position, which on a bottom-corner
   icon means "stacked above the icon" → safe in theory, but on small
   screens the trio veil + the icon stacking band sit right around the
   same vertical zone and the tooltip can read as glued to the veil.

   The --right variant pins the tooltip to the right of the icon on
   EVERY viewport (the icon is corner-anchored so there's always page
   width to the right), and elevates its z-index above the trio veil
   so it never paints behind the milky band.

   Result: hovering the a11y figure always pops a clean black pill
   immediately to its right, on every breakpoint, with no chance of
   being clipped by the top edge of the viewport or hidden behind the
   trio veil to its right. */
.fab-tooltip--right .fab-tooltip {
    /* Re-state the default right-positioned layout so the mobile
       override below can be neutralised cleanly. */
    left: calc(100% + 10px);
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translateY(-50%) translateX(-4px);
    margin-left: 2px;
    /* Above the trio veil (z-index: -1 within its wrapper but the
       wrapper itself sits at z:50). Belt-and-braces. */
    z-index: 10500;
}

.fab-tooltip--right:hover .fab-tooltip,
.fab-tooltip--right:focus-visible .fab-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ────────────────────────────────────────────────────────────────────────
   v15 MAXIMUM-DEFENCE TOOLTIP RULES — Settings (gear) + Accessibility (a11y)
   ────────────────────────────────────────────────────────────────────────
   The Settings gear and Accessibility figure are both <button> elements
   with data-bs-toggle="offcanvas". In production their .fab-tooltip
   children were not appearing on hover even though the markup matched
   the working Privacy / Terms anchors exactly. Versions 13 and 14 added
   restated show-on-hover rules with !important — and the issue persisted.

   v15 escalates: every visibility-related property is asserted at the
   highest practical specificity, every selector permutation that could
   trigger a "tooltip should show" condition is covered (:hover, :focus,
   :focus-visible, :focus-within, :active), and the tooltip's stacking,
   visibility, and pointer-events posture are nailed down explicitly so
   no inherited rule from a parent (e.g. visibility: hidden during the
   loader phase) can suppress it once the user actually hovers.

   The rules are scoped specifically to the two known-bad buttons so we
   don't broadcast !important across the entire tooltip system. */

/* IDLE — the tooltip span must be paintable but invisible. We assert
   visibility:visible (not hidden), pointer-events:none (so cursor
   doesn't snag), and z-index above any possible ancestor stacking. */
.floating-settings-wrapper .settings-btn .fab-tooltip,
.a11y-btn .fab-tooltip {
    visibility: visible !important;
    pointer-events: none;
    z-index: 10500;
}

/* SHOW — every hover/focus permutation that should reveal the tooltip.
   :focus-within fires on the button when ANY descendant takes focus
   (which Bootstrap's offcanvas plugin sometimes triggers programmatically
   on the trigger), giving us one more entry point for the show condition. */
.floating-settings-wrapper .settings-btn:hover .fab-tooltip,
.floating-settings-wrapper .settings-btn:focus .fab-tooltip,
.floating-settings-wrapper .settings-btn:focus-visible .fab-tooltip,
.floating-settings-wrapper .settings-btn:focus-within .fab-tooltip,
.floating-settings-wrapper .settings-btn:active .fab-tooltip,
.a11y-btn:hover .fab-tooltip,
.a11y-btn:focus .fab-tooltip,
.a11y-btn:focus-visible .fab-tooltip,
.a11y-btn:focus-within .fab-tooltip,
.a11y-btn:active .fab-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* SHOW — end-state transform for the trio's --top variant (centred
   above the icon). Asserted separately so it doesn't fight with the
   --right variant on a11y. */
.floating-settings-wrapper .settings-btn.fab-tooltip--top:hover .fab-tooltip,
.floating-settings-wrapper .settings-btn.fab-tooltip--top:focus .fab-tooltip,
.floating-settings-wrapper .settings-btn.fab-tooltip--top:focus-visible .fab-tooltip,
.floating-settings-wrapper .settings-btn.fab-tooltip--top:focus-within .fab-tooltip {
    transform: translateX(-50%) translateY(0) !important;
}

/* SHOW — end-state transform for the a11y's --right variant (to the
   right of the icon). On desktop AND mobile (the @media rule below
   normally collapses tooltips to top-centered on small screens; this
   --right override keeps the a11y pill anchored to the right where
   there's always horizontal room from the bottom-left corner). */
.a11y-btn.fab-tooltip--right:hover .fab-tooltip,
.a11y-btn.fab-tooltip--right:focus .fab-tooltip,
.a11y-btn.fab-tooltip--right:focus-visible .fab-tooltip,
.a11y-btn.fab-tooltip--right:focus-within .fab-tooltip {
    transform: translateY(-50%) translateX(0) !important;
}

/* On mobile, tooltip appears above the button instead of to the right —
   EXCEPT the --right variant which is explicitly pinned to the side. */
@media (max-width: 768px) {
    .fab-tooltip:not(.fab-tooltip--right-suppress-mobile) {
        left: 50%;
        top: auto;
        bottom: calc(100% + 8px);
        transform: translateX(-50%) translateY(4px);
    }

    .fab-has-tooltip:hover .fab-tooltip:not(.fab-tooltip--right-suppress-mobile),
    .fab-has-tooltip:focus-visible .fab-tooltip:not(.fab-tooltip--right-suppress-mobile) {
        transform: translateX(-50%) translateY(0);
    }

    /* --right variant on mobile: STILL pin to the right of the icon,
       since the a11y FAB lives at bottom-left and the top would be far
       from the cursor on small viewports. Re-assert the desktop layout. */
    .fab-tooltip--right .fab-tooltip,
    .a11y-btn.fab-tooltip--right .fab-tooltip {
        left: calc(100% + 10px);
        top: 50%;
        bottom: auto;
        transform: translateY(-50%) translateX(-4px);
    }

    .fab-tooltip--right:hover .fab-tooltip,
    .fab-tooltip--right:focus-visible .fab-tooltip,
    .a11y-btn.fab-tooltip--right:hover .fab-tooltip,
    .a11y-btn.fab-tooltip--right:focus-visible .fab-tooltip,
    .a11y-btn.fab-tooltip--right:focus-within .fab-tooltip {
        transform: translateY(-50%) translateX(0) !important;
    }

    /* Mobile: re-assert the trio's --top end-state transform too —
       the generic :not(...) rule above sets it, but we restate it
       with !important so the v15 defensive rules win unambiguously. */
    .floating-settings-wrapper .settings-btn.fab-tooltip--top:hover .fab-tooltip,
    .floating-settings-wrapper .settings-btn.fab-tooltip--top:focus-visible .fab-tooltip,
    .floating-settings-wrapper .settings-btn.fab-tooltip--top:focus-within .fab-tooltip {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────
   v15 ULTIMATE FALLBACK — pseudo-element tooltip on gear + a11y
   ────────────────────────────────────────────────────────────────────────
   If for any reason the .fab-tooltip <span> mechanism still fails on the
   gear or a11y buttons (e.g. some Bootstrap interaction we haven't seen),
   this rule paints a fully independent tooltip via ::before, sourcing the
   text from the button's aria-label attribute. It is positioned identically
   to the working .fab-tooltip pill so when both render the user sees one
   tooltip; if the <span> never paints, the ::before still does.

   This is belt-and-braces. Removing it later is safe — it duplicates the
   primary tooltip system rather than replacing it. */

/* Gear button — tooltip above */
.floating-settings-wrapper button.settings-btn[aria-label]::before {
    content: attr(aria-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    background: #1A1D20;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 10500;
}

/* For the gear specifically, the aria-label is "Preferences and settings"
   which is verbose. The .fab-tooltip span says "Preferences". To keep
   the ::before fallback short and matching, we content-replace via a
   specific selector. */
.floating-settings-wrapper button.settings-btn[aria-label="Preferences and settings"]::before {
    content: "Preferences";
}

.floating-settings-wrapper button.settings-btn:hover::before,
.floating-settings-wrapper button.settings-btn:focus-visible::before,
.floating-settings-wrapper button.settings-btn:focus-within::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* A11y button — tooltip to the right (corner-anchored, top would clip) */
button.a11y-btn[aria-label]::before {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    white-space: nowrap;
    background: #1A1D20;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 10500;
}

/* A11y aria-label is "Accessibility options" — friendlier as just
   "Accessibility" to match the .fab-tooltip span text. */
button.a11y-btn[aria-label="Accessibility options"]::before {
    content: "Accessibility";
}

button.a11y-btn:hover::before,
button.a11y-btn:focus-visible::before,
button.a11y-btn:focus-within::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* The ::after hit-zone pseudo-element on these buttons must NOT be
   overridden — both .settings-btn::after (auth-widget.css line 999)
   and .a11y-btn::after (auth-widget.css line 1126) define hit-zone
   buffers we want to keep. We use ::before instead — there's no
   conflict because ::before and ::after are distinct pseudo-elements.
   Sanity-checked: site.css does not use ::before on either button
   elsewhere. */

/* ════════════════════════════════════════════════════════
   ACCESSIBILITY FAB — KQG geometric line-art
   Light frosted blue glass · geometric figure · scan beam
   No heavy dark orbit dots — clean, airy, light theme
════════════════════════════════════════════════════════ */

/* Scanning beam — sweeps horizontally across the figure */
.fab-a11y-scan {
    stroke-dasharray: 32 36;
    animation: fab-scan-sweep 2.8s ease-in-out infinite;
}

@keyframes fab-scan-sweep {
    0% {
        stroke-dashoffset: 70;
        opacity: 0;
    }

    15% {
        opacity: 0.9;
    }

    80% {
        opacity: 0.9;
    }

    100% {
        stroke-dashoffset: -10;
        opacity: 0;
    }
}

/* ════════════════════════════════════════════════════════
   SETTINGS FAB — KQG gear icon
   Geometric polygon teeth · pulsing hub · scan beam
   Clearly distinct from the Filter equaliser bars
════════════════════════════════════════════════════════ */

/* Gear scan beam — horizontal sweep through centre */
.fab-gear-scan {
    stroke-dasharray: 28 22;
    animation: fab-gear-scan-sweep 3s ease-in-out infinite;
}

@keyframes fab-gear-scan-sweep {
    0% {
        stroke-dashoffset: 55;
        opacity: 0;
    }

    20% {
        opacity: 0.75;
    }

    75% {
        opacity: 0.75;
    }

    100% {
        stroke-dashoffset: -15;
        opacity: 0;
    }
}

/* Privacy shield scan beam — horizontal sweep through mid-shield.
   Mirrors the gear scan but offset by 0.6s so the trio doesn't pulse in
   unison (cleaner visual rhythm). */
.fab-privacy-scan {
    stroke-dasharray: 22 18;
    animation: fab-privacy-scan-sweep 3s ease-in-out 0.6s infinite;
}

@keyframes fab-privacy-scan-sweep {
    0% {
        stroke-dashoffset: 45;
        opacity: 0;
    }

    20% {
        opacity: 0.7;
    }

    75% {
        opacity: 0.7;
    }

    100% {
        stroke-dashoffset: -10;
        opacity: 0;
    }
}

/* Terms-of-use signature curl — gentle dash animation along the path so
   the curl feels like a hand drawing a signature. Different cadence from
   the linear scan beams — keeps it from feeling repetitive. */
.fab-terms-scan {
    stroke-dasharray: 36 36;
    animation: fab-terms-curl 3s ease-in-out 1.2s infinite;
}

@keyframes fab-terms-curl {
    0% {
        stroke-dashoffset: 36;
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -36;
        opacity: 0;
    }
}

/* ── Describe-It speech-bubble scan beam ──────────────────────────────
   v14: the inline scan beam inside the Describe-It glyph. Same idiom
   as the trio's scan beams (fab-gear-scan etc.) but tuned for the
   smaller 24-unit viewBox of the speech-bubble icon. The beam sweeps
   horizontally through the middle text line every 3s, offset by 1.8s
   so it doesn't lock-step with the trio's 0.6 / 0 / 1.2s schedule —
   visually the four icons together pulse like four heartbeats slightly
   out of sync, which reads as "alive" rather than "syncopated UI". */
.btn-ai-glyph-scan {
    stroke-dasharray: 8 8;
    animation: btn-ai-glyph-scan-sweep 3s ease-in-out 1.8s infinite;
}

@keyframes btn-ai-glyph-scan-sweep {
    0% {
        stroke-dashoffset: 16;
        opacity: 0;
    }

    20% {
        opacity: 0.7;
    }

    75% {
        opacity: 0.7;
    }

    100% {
        stroke-dashoffset: -4;
        opacity: 0;
    }
}

/* Reduced-motion users — strip both the glyph scan AND the core pulse
   used inside the Describe-It icon. The .sj-anim-pulse-fast rule above
   already covers the core pulse globally, but we restate the scan here
   for documentation clarity. */
@media (prefers-reduced-motion: reduce) {
    .btn-ai-glyph-scan {
        animation: none !important;
    }
}

/* ════════════════════════════════════════════════════════
   ENGAGEMENT FABs — KQG geometric line-art scan beams
════════════════════════════════════════════════════════ */

/* Location scan beam */
.fab-loc-scan {
    stroke-dasharray: 24 18;
    animation: fab-eng-scan 2.4s ease-in-out 0s infinite;
}

/* Email scan beam */
.fab-email-scan {
    stroke-dasharray: 28 22;
    animation: fab-eng-scan 2.6s ease-in-out 0.4s infinite;
}

/* YouTube scan beam */
.fab-yt-scan {
    stroke-dasharray: 28 22;
    animation: fab-eng-scan 2.5s ease-in-out 0.8s infinite;
}

@keyframes fab-eng-scan {
    0% {
        stroke-dashoffset: 54;
        opacity: 0;
    }

    18% {
        opacity: 0.7;
    }

    78% {
        opacity: 0.7;
    }

    100% {
        stroke-dashoffset: -18;
        opacity: 0;
    }
}

/* ════════════════════════════════════════════════════════
   LANGUAGE TRIGGER — KQG globe icon animations
════════════════════════════════════════════════════════ */

/* Globe scan beam — sweeps across the equator line */
.rn-globe-scan {
    stroke-dasharray: 14 12;
    animation: rn-globe-scan-sweep 3.2s ease-in-out infinite;
}

@keyframes rn-globe-scan-sweep {
    0% {
        stroke-dashoffset: 28;
        opacity: 0;
    }

    20% {
        opacity: 0.9;
    }

    75% {
        opacity: 0.9;
    }

    100% {
        stroke-dashoffset: -14;
        opacity: 0;
    }
}

/* Globe core pulse — gentle heartbeat */
.rn-globe-pulse {
    animation: rn-globe-pulse-beat 2.6s ease-in-out infinite alternate;
    transform-origin: 16px 16px;
}

@keyframes rn-globe-pulse-beat {
    0% {
        opacity: 0.55;
        transform: scale(0.8);
    }

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

/* fab-s-knob and fab-s-bar animations retired — settings icon is now a gear */


.chat-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-orange), #ff6b6b);
    border: none;
    z-index: 50;
}

/* ================= DYNAMIC TABS FIX ================= */
/* Completely stripped HTML of d-flex to ensure display:none strictly works */
.tab-content-area {
    display: none !important;
}

    .tab-content-area.active-tab {
        display: flex !important;
        flex-direction: column;
        animation: fadeIn 0.3s ease forwards;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Sell & Agent Cards */
.sell-card {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    transition: all 0.3s ease;
}

    .sell-card:hover {
        box-shadow: var(--shadow-lg) !important;
        border-color: rgba(86,196,248,0.3);
    }

.sell-input {
    background: var(--bg-main);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 10px;
}

    .sell-input:focus {
        box-shadow: none;
        border-color: var(--primary-blue);
    }

.pricing-card {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    height: 100%;
    transition: transform 0.3s;
}

    .pricing-card:hover {
        transform: translateY(-3px);
    }

.border-primary-blue {
    border: 2px solid var(--primary-blue) !important;
}

.guide-scroll-container {
    scrollbar-width: none;
}

    .guide-scroll-container::-webkit-scrollbar {
        display: none;
    }

.guide-card {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    width: 180px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .guide-card:hover {
        background: var(--primary-blue);
    }

        .guide-card:hover h6, .guide-card:hover p {
            color: white !important;
        }

/* ================= RESPONSIVENESS ================= */
@media (max-width: 991px) {
    #splitWrapper {
        flex-direction: column;
    }

    #leftPanel {
        width: 100%;
        padding: 15px !important;
    }

    #rightPanel {
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        height: 80vh;
        border-radius: 30px 30px 0 0;
        z-index: 1000;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
        transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
        padding-top: 35px !important;
    }

    #splitWrapper.mobile-panel-open #rightPanel {
        top: 20vh;
    }

    .floating-engagement {
        top: auto;
        bottom: 90px;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row !important;
        background: rgba(255,255,255,0.92);
        padding: 8px 10px;
        /* RECTANGULAR — matches the sell tab card blueprint theme, not pill/circle */
        border-radius: 20px;
        border: 1px solid rgba(0,0,0,0.07);
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        gap: 8px !important;
    }

        .floating-engagement .btn-floating {
            width: 40px;
            height: 40px;
            border-radius: 12px !important;
            /* Keep individual button borders visible on mobile */
            border: 1px solid rgba(0,0,0,0.07) !important;
        }

    .a11y-btn {
        bottom: 15px;
        left: 15px;
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .floating-settings-wrapper {
        bottom: 15px;
        left: 70px;
        transform: none;
        /* Tighter gap on mobile so the trio of three icons fits between the
           accessibility FAB on the left and the chat FAB on the right even
           on the smallest phones (≥320px). */
        gap: 8px;
    }

        .floating-settings-wrapper .settings-btn {
            width: 46px;
            height: 46px;
            border-radius: 13px;
        }

    .chat-btn {
        bottom: 15px;
        right: 15px;
    }

    .bg-shape-strip {
        display: none;
    }

    /* Header responsive adjustments */
    .header-strip {
        height: 80px;
        padding: 0 24px;
    }

    .header-container {
        gap: 20px;
    }

    .brand-logo img {
        height: 50px;
    }

    .header-tagline {
        font-size: 1.4rem;
        line-height: 1.35;
        padding: 8px 0;
    }

    .profile-btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 768px) {
    .header-strip {
        height: 72px;
        padding: 0 20px;
    }

    .brand-logo img {
        height: 44px;
    }

    .header-tagline {
        font-size: 1.2rem;
        line-height: 1.3;
        padding: 6px 0;
    }

    .header-actions {
        gap: 12px;
    }

    .profile-btn {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 576px) {
    .header-strip {
        padding: 0 16px;
        height: 64px;
    }

    .tagline-container {
        display: none; /* Hide tagline on very small screens */
    }

    .header-container {
        justify-content: space-between;
    }

    .brand-logo img {
        height: 40px;
    }

    .profile-btn {
        width: 36px;
        height: 36px;
    }

    .rn-lang-trigger {
        padding: 4px 8px 4px 6px;
        font-size: 0.7rem;
    }

    .rn-flag-stripe {
        width: 18px;
        height: 18px;
    }
}

/* ================================================================
   RAINBOW NATION LANGUAGE PICKER — v4 PREMIUM
   ----------------------------------------------------------------
   Brand palette (Ikhayalami):
     • Charcoal   #0E0E11 / #1A1A1F  — wordmark + house silhouette
     • Sunset     #F58220 / #F89622  — the sun, primary accent
     • Cyan       #56C4F8 / #3FA9D9  — the dot, the wave
     • Cloud      whites/greys       — atmosphere
   Adds: glass dropdown, "Did You Know" fact hero, premium toast,
   pulsing trigger spinner, full language names always visible.
================================================================ */

:root {
    --rn-charcoal: #0E0E11;
    --rn-charcoal-2: #1A1A1F;
    --rn-orange: #F58220;
    --rn-orange-2: #F89622;
    --rn-cyan: #56C4F8;
    --rn-cyan-2: #3FA9D9;
    --rn-cloud: #F6F7F9;
    --rn-cloud-2: #EEF1F4;
}

/* ── Wrapper & trigger ─────────────────────────────────────────── */
.rn-lang-wrapper {
    position: relative;
}

.rn-lang-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 9px;
    background: linear-gradient(135deg, #ffffff 0%, #fefcf7 100%);
    border: 1.5px solid rgba(245,130,32,0.28);
    border-radius: 60px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--rn-charcoal);
    transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(14,14,17,0.04), inset 0 1px 0 rgba(255,255,255,0.85);
    position: relative;
}

    .rn-lang-trigger:hover,
    .rn-lang-trigger:focus-visible {
        border-color: var(--rn-orange);
        box-shadow: 0 6px 16px rgba(245,130,32,0.22), inset 0 1px 0 rgba(255,255,255,0.9);
        transform: translateY(-2px);
        background: linear-gradient(135deg, #ffffff 0%, #fff5e8 100%);
        outline: none;
    }

    .rn-lang-trigger:active {
        transform: translateY(0);
    }

    /* Trigger BUSY state — pulses while a translation fetch is in-flight.
   This is a redundant, always-visible feedback channel — even if the
   toast is dismissed, scrolled off, or blocked, the picker itself
   tells the user something is happening. */
    .rn-lang-trigger.rn-trigger-busy {
        border-color: var(--rn-orange);
        box-shadow: 0 0 0 0 rgba(245,130,32,0.45);
        animation: rn-trigger-pulse 1.6s ease-in-out infinite;
    }

@keyframes rn-trigger-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245,130,32,0.45);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(245,130,32,0);
    }
}

.rn-lang-trigger.rn-trigger-busy .rn-chevron::before {
    /* Use a real spinner glyph in place of the chevron icon font. */
    content: '';
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(245,130,32,0.25);
    border-top-color: var(--rn-orange);
    animation: rn-spin 0.7s linear infinite;
}

.rn-lang-trigger.rn-trigger-busy .rn-chevron {
    /* Hide the bi-chevron-down arrow itself by suppressing its font */
    font-size: 0;
    transform: none !important;
}

@keyframes rn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Legacy class kept for the burger-drawer code path — preserved as
   a tiny SA flag conic-gradient circle. */
.rn-flag-stripe {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient( #E03C31 0deg 60deg, #007A4D 60deg 120deg, #FFB612 120deg 180deg, #002395 180deg 240deg, #FFFFFF 240deg 300deg, #000000 300deg 360deg);
    box-shadow: 0 1px 3px rgba(14,14,17,0.2);
}

/* The KQG quantum-globe orb inside the trigger (set in markup) */
.rn-kqg-orb {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rn-lang-code {
    letter-spacing: 0.06em;
    font-weight: 800;
    background: linear-gradient(135deg, var(--rn-charcoal), var(--rn-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rn-chevron {
    font-size: 0.7rem;
    color: var(--rn-orange);
    transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
}

.rn-lang-trigger[aria-expanded="true"] .rn-chevron {
    transform: rotate(180deg);
}

/* ── Dropdown panel — glassmorphism ──────────────────────────── */
.rn-lang-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 500px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    border-radius: 24px;
    border: 1px solid rgba(245,130,32,0.18);
    box-shadow: 0 25px 50px -12px rgba(14,14,17,0.25), 0 0 0 1px rgba(245,130,32,0.06);
    overflow: hidden;
    z-index: 10500;
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.34, 1.2, 0.64, 1), transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
}

    .rn-lang-panel.rn-panel-open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: all;
    }

/* ── Rainbow stripe across top — animated ─────────────────────── */
.rn-panel-rainbow {
    display: flex;
    height: 5px;
}

    .rn-panel-rainbow span {
        flex: 1;
        animation: rn-rainbow-glow 2.4s ease-in-out infinite;
    }

        .rn-panel-rainbow span:nth-child(1) {
            animation-delay: 0.0s;
        }

        .rn-panel-rainbow span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .rn-panel-rainbow span:nth-child(3) {
            animation-delay: 0.4s;
        }

        .rn-panel-rainbow span:nth-child(4) {
            animation-delay: 0.6s;
        }

        .rn-panel-rainbow span:nth-child(5) {
            animation-delay: 0.8s;
        }

        .rn-panel-rainbow span:nth-child(6) {
            animation-delay: 1.0s;
        }

@keyframes rn-rainbow-glow {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }

    50% {
        opacity: 0.8;
        filter: brightness(1.2);
    }
}

/* ── Panel header (compact single-row) ───────────────────────── */
/* Title and subline live on the same row, separated by a dot — */
/* CSS handles the dot and the wrap-down on very narrow screens. */
.rn-panel-header {
    padding: 14px 18px 12px;
    color: var(--rn-charcoal);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    background: linear-gradient(135deg, rgba(245,130,32,0.04), transparent);
}

    .rn-panel-header i {
        font-size: 1.1rem;
        color: var(--rn-orange);
        flex-shrink: 0;
    }

    .rn-panel-header > span:not(.rn-panel-sub) {
        font-weight: 800;
        font-size: 0.88rem;
        color: var(--rn-charcoal);
        white-space: nowrap;
        flex-shrink: 0;
    }

.rn-panel-sub {
    font-size: 0.66rem;
    font-weight: 500;
    color: #9CA3AF;
    letter-spacing: 0.01em;
    margin: 0;
    padding: 0 0 0 10px;
    width: auto;
    line-height: 1.3;
    position: relative;
}

    .rn-panel-sub::before {
        content: '·';
        position: absolute;
        left: 2px;
        top: -1px;
        color: #D1D5DB;
        font-weight: 800;
    }

/* ── "Did You Know" hero fact card ────────────────────────────── */
/* Sits between the header and the grid. Updates live as the user
   hovers each language, showing a culturally-grounded fact. */
.rn-fact-card {
    margin: 12px 16px 10px;
    padding: 12px 14px 14px;
    background: linear-gradient(135deg, #fff7ec 0%, #ffffff 60%, #eef9ff 100%);
    border: 1px solid rgba(245,130,32,0.18);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    /* No transform transition on the card itself — only the inner text
       cross-fades on change. Combined with the height lock on .rn-fact-text
       below, this guarantees the card never moves between hovers. */
}

    .rn-fact-card::before {
        /* A soft sun-orange aura in the top-right corner — the "sun" */
        content: '';
        position: absolute;
        top: -30px;
        right: -30px;
        width: 90px;
        height: 90px;
        background: radial-gradient(circle, rgba(245,130,32,0.28), transparent 70%);
        pointer-events: none;
    }

    .rn-fact-card::after {
        /* A cyan "wave" curl in the bottom-left — the brand's dot/wave */
        content: '';
        position: absolute;
        bottom: -22px;
        left: -22px;
        width: 70px;
        height: 70px;
        background: radial-gradient(circle, rgba(86,196,248,0.22), transparent 70%);
        pointer-events: none;
    }

    /* RATTLE FIX:
       Previously this animated transform:scale on the WHOLE card, which
       nudged sub-pixel layout each hover. The animation is now a pure
       opacity cross-fade on the inner text only — the card never moves,
       and combined with the height lock on .rn-fact-text the card size
       is constant across every language. */
    .rn-fact-card.rn-fact-card-pop .rn-fact-name,
    .rn-fact-card.rn-fact-card-pop .rn-fact-native,
    .rn-fact-card.rn-fact-card-pop .rn-fact-text {
        animation: rn-fact-pop 0.28s ease-out;
    }

@keyframes rn-fact-pop {
    0% {
        opacity: 0.35;
    }

    100% {
        opacity: 1;
    }
}

/* "DID YOU KNOW" label removed per design — the fact speaks for itself
   and the saved vertical space lets the full fact display without
   truncation. Kept in the DOM (aria-live) but visually hidden. */
.rn-fact-label {
    display: none;
}

.rn-fact-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--rn-charcoal);
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.rn-fact-native {
    font-size: 0.7rem;
    font-weight: 500;
    color: #6B7280;
    margin-top: 1px;
    position: relative;
    z-index: 1;
}

.rn-fact-text {
    font-size: 0.72rem;
    line-height: 1.55;
    color: #374151;
    margin-top: 8px;
    position: relative;
    z-index: 1;
    font-weight: 400;
    /* RATTLE FIX + FULL-FACT VISIBILITY:
       The clamp is set above the longest fact (isiZulu at ~6 lines in
       this column width) so NO fact gets truncated. The matching
       min-height is the floor that locks card height for shorter facts
       too — shorter ones simply leave a little white space at the
       bottom, but the card never resizes between hovers, so the grid
       below never shifts and the rattle can't return. */
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(0.72rem * 2.5 * 7);
}

/* ── Compact single-line language cards ──────────────────────── */
/* Native sub-label removed from each card; native name still surfaces
   in the fact card when that language is hovered, so nothing is lost. */
.rn-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px 14px 14px;
    background: transparent;
}

.rn-lang-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 14px;
    min-height: 40px;
    background: #ffffff;
    border: 1px solid rgba(14,14,17,0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.24s cubic-bezier(0.34, 1.2, 0.64, 1), border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

    .rn-lang-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--rn-orange), var(--rn-cyan));
        border-radius: 4px 0 0 4px;
        transform: scaleY(0);
        transform-origin: center;
        transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    .rn-lang-item:hover::before,
    .rn-lang-item.active::before,
    .rn-lang-item:focus-visible::before {
        transform: scaleY(1);
    }

    /* Hover nudges horizontally instead of lifting vertically — neighbour
       rows never move, so the rattle stays fixed. */
    .rn-lang-item:hover,
    .rn-lang-item:focus-visible {
        transform: translateX(2px);
        border-color: rgba(245,130,32,0.32);
        box-shadow: 0 4px 12px rgba(245,130,32,0.10);
        outline: none;
    }

    .rn-lang-item.active {
        background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
        border-color: rgba(245,130,32,0.45);
        box-shadow: 0 3px 10px rgba(245,130,32,0.14);
    }

.rn-lang-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--rn-charcoal);
    line-height: 1.2;
    transition: color 0.2s ease;
}

.rn-lang-item.active .rn-lang-name,
.rn-lang-item:hover .rn-lang-name {
    color: var(--rn-orange);
    font-weight: 800;
}

/* Native sub-label removed from cards — hidden defensively in case any
   legacy markup still emits it. */
.rn-lang-native {
    display: none;
}

/* ── Footer ──────────────────────────────────────────────────── */
.rn-panel-footer {
    padding: 12px 18px;
    font-size: 0.7rem;
    color: #9CA3AF;
    border-top: 1px solid rgba(14,14,17,0.06);
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--rn-cloud), #ffffff);
}

    .rn-panel-footer i {
        color: var(--rn-orange);
        font-size: 0.75rem;
        animation: rn-sparkle 2.4s ease-in-out infinite;
    }

@keyframes rn-sparkle {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ── Responsive: anchor to top of screen on small mobile ─────── */
@media (max-width: 480px) {
    .rn-lang-panel {
        position: fixed;
        top: 70px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        transform-origin: top right;
    }

    .rn-lang-wrapper {
        position: static;
    }

    .rn-lang-trigger {
        padding: 6px 12px 6px 8px;
        font-size: 0.78rem;
    }

    /* On very narrow screens the header subline wraps to a second row
       (without the dot separator) so the line never crowds. */
    .rn-panel-header {
        flex-wrap: wrap;
    }

    .rn-panel-sub {
        width: 100%;
        padding-left: 0;
        margin-top: 2px;
    }

        .rn-panel-sub::before {
            content: '';
            display: none;
        }

    /* Stay two-column on small mobile — cards are single-line now so
       they fit comfortably side-by-side. */
    .rn-lang-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 4px 12px 12px;
    }

    .rn-lang-item {
        padding: 9px 12px;
        min-height: 38px;
    }

    .rn-lang-name {
        font-size: 0.78rem;
    }

    .rn-fact-card {
        margin: 10px 12px 8px;
        padding: 10px 12px 12px;
    }

    /* Narrower column = more lines for the same fact, so give the clamp
       and min-height more room on mobile. */
    .rn-fact-text {
        font-size: 0.7rem;
        line-height: 1.5;
        -webkit-line-clamp: 11;
        min-height: calc(0.7rem * 1.5 * 10);
    }
}

/* ── Translation loading state — subtle dim of page content ─── */
body.rn-translating [data-i18n],
body.rn-translating [data-i18n-placeholder] {
    opacity: 0.5;
    transition: opacity 0.3s;
}

/* ================================================================
   RAINBOW NATION TOAST  (#_rnToast)
   ----------------------------------------------------------------
   PREVIOUS BUG: the toast was injected with inline styles that
   placed it at top:0, height:70px, background:transparent — sitting
   exactly behind the fixed header where users couldn't see it. The
   spinner technically rendered, but was invisibly covered.
   FIX: a proper floating card BELOW the header, with chrome.
================================================================ */
.rn-toast {
    position: fixed;
    top: 88px;
    left: 50%;
    transform: translate(-50%, -8px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 14px;
    background: #ffffff;
    border: 1px solid rgba(245,130,32,0.22);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(14,14,17,0.14), 0 2px 6px rgba(14,14,17,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rn-charcoal-2, #1A1A1F);
    white-space: nowrap;
    z-index: 10600;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.32s cubic-bezier(0.34, 1.2, 0.64, 1), transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
    max-width: calc(100vw - 24px);
}

    .rn-toast.rn-toast-show {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    .rn-toast.rn-toast-loading {
        border-color: rgba(245,130,32,0.32);
        background: linear-gradient(135deg, #ffffff 0%, #fff7ec 100%);
    }

    .rn-toast.rn-toast-success {
        border-color: rgba(34,197,94,0.32);
        background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    }

    .rn-toast.rn-toast-error {
        border-color: rgba(239,68,68,0.32);
        background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
    }

.rn-toast-spinner svg {
    animation: rn-spin 0.8s linear infinite;
    display: block;
}

.rn-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rn-toast-icon-success {
    color: #22C55E;
}

.rn-toast-icon-error {
    color: #EF4444;
}

.rn-toast-text {
    color: #374151;
    font-weight: 600;
}

@media (max-width: 480px) {
    .rn-toast {
        top: 76px;
        font-size: 0.78rem;
        padding: 10px 16px 10px 12px;
    }
}

/* Reduced-motion: kill the rainbow + sparkle + fact-pop + spin loops */
@media (prefers-reduced-motion: reduce) {
    .rn-panel-rainbow span,
    .rn-panel-footer i,
    .rn-fact-card.rn-fact-card-pop,
    .rn-lang-trigger.rn-trigger-busy {
        animation: none !important;
    }

        .rn-lang-trigger.rn-trigger-busy .rn-chevron::before {
            animation: rn-spin 1.2s linear infinite; /* keep one slow spinner so user knows it's working */
        }
}

/* ============================================================
   FILTER PANEL ADDITIONAL STYLES
   ============================================================ */

.filter-panel {
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(245,130,32,0.15);
    border-top: 3px solid var(--primary-orange);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    padding: 0;
    overflow: hidden;
    display: none;
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    max-height: none !important;
    overflow-y: visible !important;
    margin-top: -2px;
    width: 100%;
    position: relative;
    z-index: 9990;
    scrollbar-width: none;
}

    .filter-panel.show {
        display: block;
        opacity: 1;
        transform: translateY(0) scale(1);
    }

.filter-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.filter-tag {
    background: var(--surface-white);
    border: 1px solid #DEE2E6;
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
}

    .filter-tag:hover, .filter-tag.active {
        background: rgba(86,196,248,0.1);
        border-color: var(--primary-blue);
        color: var(--primary-blue);
    }

.filter-input, .filter-select {
    background: var(--surface-white);
    border: 1px solid #DEE2E6;
    color: var(--text-main);
    border-radius: 12px;
}

    .filter-input:focus, .filter-select:focus {
        border-color: var(--primary-blue);
        color: var(--text-main);
        box-shadow: 0 0 0 3px rgba(86,196,248,0.15);
    }

/* ════════════════════════════════════════════════════════
   KQG — KINETIC QUANTUM GLASS EXTENSION ANIMATIONS
   All new floating icons, language orb, profile, search & filter
════════════════════════════════════════════════════════ */

/* ── Location FAB: orbiting satellite ── */
.fab-loc-orbit-dot {
    animation: fab-loc-orbit 8s linear infinite;
    transform-origin: 40px 40px;
}

@keyframes fab-loc-orbit {
    100% {
        transform: rotate(360deg);
    }
}

/* ── Email FAB: scan beam sweep across envelope ── */
.fab-email-scan {
    stroke-dasharray: 22 20;
    animation: fab-email-sweep 2.6s ease-in-out infinite;
}

@keyframes fab-email-sweep {
    0% {
        stroke-dashoffset: 50;
        opacity: 0;
    }

    15% {
        opacity: 0.85;
    }

    80% {
        opacity: 0.85;
    }

    100% {
        stroke-dashoffset: -10;
        opacity: 0;
    }
}

.fab-email-orbit-dot {
    animation: fab-email-orbit 10s linear infinite;
    transform-origin: 40px 40px;
}

@keyframes fab-email-orbit {
    100% {
        transform: rotate(360deg);
    }
}

/* ── YouTube FAB: orbiting dot ── */
.fab-yt-orbit-dot {
    animation: fab-yt-orbit 7s linear infinite;
    transform-origin: 40px 40px;
}

@keyframes fab-yt-orbit {
    100% {
        transform: rotate(360deg);
    }
}

/* ── Language Trigger: orb orbit + translate beam + dot ── */
.rn-kqg-orb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rn-orb-spin {
    animation: sj-spin-global 14s linear infinite;
    transform-origin: 18px 18px;
}

.rn-orb-dot {
    animation: rn-orb-orbit 9s linear infinite;
    transform-origin: 18px 18px;
}

@keyframes rn-orb-orbit {
    100% {
        transform: rotate(360deg);
    }
}

.rn-orb-pulse {
    animation: pulse-scale 2.4s ease-in-out infinite alternate;
    transform-origin: 18px 18px;
}

.rn-translate-beam {
    stroke-dasharray: 10 8;
    animation: rn-beam-sweep 3s ease-in-out infinite;
}

@keyframes rn-beam-sweep {
    0% {
        stroke-dashoffset: 22;
        opacity: 0;
    }

    20% {
        opacity: 0.9;
    }

    75% {
        opacity: 0.9;
    }

    100% {
        stroke-dashoffset: -8;
        opacity: 0;
    }
}

/* ── KQG Funnel filter button SVG icon animations ── */

/* Funnel body outline draws in on load, then subtly breathes */
.kqg-funnel-body {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: kqg-funnel-draw 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards, kqg-funnel-breathe 4s ease-in-out 0.8s infinite;
}

@keyframes kqg-funnel-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes kqg-funnel-breathe {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.65;
    }
}

/* Tier bars cascade in top-to-bottom with staggered delays */
.kqg-funnel-t1 {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    animation: kqg-tier-draw 0.45s ease-out 0.25s forwards, kqg-tier-pulse 3.6s ease-in-out 0.7s infinite;
}

.kqg-funnel-t2 {
    stroke-dasharray: 12;
    stroke-dashoffset: 12;
    animation: kqg-tier-draw 0.45s ease-out 0.42s forwards, kqg-tier-pulse 3.6s ease-in-out 1.1s infinite;
}

.kqg-funnel-t3 {
    stroke-dasharray: 7;
    stroke-dashoffset: 7;
    animation: kqg-tier-draw 0.45s ease-out 0.58s forwards, kqg-tier-pulse 3.6s ease-in-out 1.5s infinite;
}

@keyframes kqg-tier-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes kqg-tier-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* Scan beam cascades through funnel tiers — top to bottom loop */
.kqg-funnel-scan {
    stroke-dasharray: 20 100;
    stroke-dashoffset: 0;
    animation: kqg-funnel-scan-sweep 2.6s ease-in-out infinite;
}

@keyframes kqg-funnel-scan-sweep {
    0% {
        stroke-dashoffset: 22;
        opacity: 0;
        transform: translateY(0px);
    }

    15% {
        opacity: 0.85;
    }

    50% {
        opacity: 0.85;
        transform: translateY(8px);
        stroke-width: 1;
    }

    85% {
        opacity: 0.4;
    }

    100% {
        stroke-dashoffset: -22;
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Hover: funnel tiers light up sequentially */
.filter-btn:hover .kqg-funnel-t1 {
    opacity: 1;
    stroke-width: 1.8;
}

.filter-btn:hover .kqg-funnel-t2 {
    opacity: 0.75;
    stroke-width: 1.6;
}

.filter-btn:hover .kqg-funnel-t3 {
    opacity: 0.5;
    stroke-width: 1.4;
}

/* ── KQG Search button SVG icon animations ── */
/* Lens pulse */
.kqg-search-pulse {
    animation: pulse-scale 1.8s ease-in-out infinite alternate;
    transform-origin: 12px 12px;
}

/* Scan beam across lens */
.kqg-search-scan {
    stroke-dasharray: 8 6;
    animation: kqg-search-sweep 2s ease-in-out infinite;
}

@keyframes kqg-search-sweep {
    0% {
        stroke-dashoffset: 18;
        opacity: 0;
    }

    20% {
        opacity: 0.9;
    }

    75% {
        opacity: 0.9;
    }

    100% {
        stroke-dashoffset: -6;
        opacity: 0;
    }
}

/* Orbiting dot around the magnifying glass */
.kqg-search-orbit {
    animation: kqg-search-orbit 5s linear infinite;
    transform-origin: 12px 12px;
}

@keyframes kqg-search-orbit {
    100% {
        transform: rotate(360deg);
    }
}

/* ── Reduced motion — silence all KQG animations ── */
@media (prefers-reduced-motion: reduce) {
    .fab-email-scan,
    .rn-speech-pulse,
    .profile-head-ring,
    .kqg-funnel-body,
    .kqg-funnel-t1, .kqg-funnel-t2, .kqg-funnel-t3,
    .kqg-funnel-scan,
    .kqg-search-pulse,
    .kqg-search-scan,
    .kqg-search-orbit {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* ============================================================
   FLOATING BUTTON ICON ALIGNMENT FIX
   Ensures SVGs are perfectly centered regardless of inherited styles.
   ============================================================ */

/* 1. Target the main action buttons and pills */
.search-btn,
.filter-btn,
.nav-pill,
.floating-engagement .btn,
.a11y-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important; /* Prevents text-line-height from pushing the icon down */
}

    /* 2. Force the SVG inside to act as a flex-item with no margins */
    .search-btn svg,
    .filter-btn svg,
    .nav-pill svg,
    .a11y-btn svg,
    .floating-engagement svg {
        display: block !important;
        margin: 0 !important;
        flex-shrink: 0 !important; /* Prevents the icon from squishing on small widths */
    }

/* 3. Specifically for the "Pill" buttons where you have Icon + Text */
.nav-pill {
    gap: 8px !important; /* Adjust this to your preferred spacing between icon and text */
}

/* 4. Fix for the specific KQG Search Pulse/Scan icons if they shifted */
.kqg-search-pulse, .kqg-search-scan {
    transform-origin: center center !important;
}

/* ============================================================================
   STAY TAB — uniform white stage
   ----------------------------------------------------------------------------
   When the Stay tab is active, the left panel becomes a single clean white
   surface for the Stay landing (its own illustration provides all colour).
   The Stay partial toggles `.stay-mode` on #leftPanel.

   ROOT CAUSE of the grey/navy frame that kept appearing around the Stay
   content: bg-video.js injects a SOLID DARK gradient layer, `.bg-video-fallback`
   (#1a2332 → #2a3548), at z-index:-4 inside #leftPanel. A negative-z child
   paints ABOVE its parent's own background colour, so simply setting
   #leftPanel { background:#fff } could never hide it — the dark gradient showed
   through the panel's 90px left gutter (.search-section padding-left) and the
   top/edges. The fix is to hide that fallback layer (and the video/poster/
   shape-strip) directly while Stay is active. Scoped to .stay-mode, so
   Buy/Rent/List/Tenant keep their video background untouched.
   ========================================================================== */
#leftPanel.stay-mode {
    background: #FFFFFF !important;
    /* Clip the full-bleed Stay scene at the true panel edges. */
    overflow: hidden !important;
    /* NOTE: we intentionally KEEP the panel's 90px left gutter (.search-section
       padding-left) so the tab pills sit in the exact same position as on
       Buy/Rent/List/Tenant. */
}

    /* Show the Stay scene — it lives as a direct child of #leftPanel (moved there
       by JS in _StayTab.cshtml at parse time, same level as .bg-video) and is
       display:none by default. Activating stay-mode reveals it. */
    #leftPanel.stay-mode .stay-scene {
        display: block !important;
    }

    /* Give #tab-stay a positioning context so #stayHostJourneyMount
       (position:absolute; inset:0 inside .shj-host-open) still fills
       the tab area correctly when the host journey is open. */
    #leftPanel.stay-mode #tab-stay {
        position: relative !important;
    }

    /* Inner wrappers must not clip the scene horizontally, BUT they must remain
       height-bounded so the Stay content has a real scroll container. The old
       rule set overflow:visible on the whole chain (incl. .stay-shell), which
       removed every scroll container — on phones the content is taller than the
       viewport, so the bottom of the search strip + Discover button became
       unreachable with no way to scroll. Fix: only the side wrappers stay
       overflow:visible (for the scene bleed), and they get min-height:0 so they
       can shrink to the available height instead of growing past it. */
    #leftPanel.stay-mode .search-wrapper,
    #leftPanel.stay-mode .dynamic-tabs-container,
    #leftPanel.stay-mode #tab-stay {
        overflow: visible !important;
        min-height: 0 !important; /* allow flex children to shrink-bound */
    }

    /* The SHELL is the genuine vertical scroll container for Stay content. It is
       bounded to the tab height and scrolls its overflow, so the entire search
       strip is always reachable on every device (incl. iOS, where the dynamic
       viewport is shorter than 100vh). overflow-x stays hidden (no sideways
       scrollbar); the scene bleed is clipped at the true panel edge by
       #leftPanel (overflow:hidden), which is fine — the shell spans the panel. */
    #leftPanel.stay-mode .stay-shell {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        min-height: 0 !important;
    }

    /* Hide EVERY background layer bg-video.js manages — including the solid
       dark `.bg-video-fallback`, which is the real source of the grey. */
    #leftPanel.stay-mode .bg-video,
    #leftPanel.stay-mode .bg-video-fallback,
    #leftPanel.stay-mode .bg-shape-strip,
    #leftPanel.stay-mode [class*="bg-video"] {
        display: none !important;
    }

    /* Kill the right-edge fade overlay on the search section. */
    #leftPanel.stay-mode.search-section::after,
    #leftPanel.stay-mode .search-section::after {
        display: none !important;
    }

    /* Make ALL inner wrappers transparent so the SVG scene (a direct child of
       #leftPanel at z-index:0) shows through. This covers the full chain:
       .search-wrapper → .dynamic-tabs-container → #tab-stay → .stay-shell →
       .stay-landing — every one of these previously painted opaque white. */
    #leftPanel.stay-mode .search-wrapper,
    #leftPanel.stay-mode .dynamic-tabs-container,
    #leftPanel.stay-mode #tab-stay,
    #leftPanel.stay-mode .stay-shell,
    #leftPanel.stay-mode .stay-landing {
        background: transparent !important;
    }

/* Belt-and-braces: also whiten the immediate stage behind the left panel so a
   parent's dark theme can never bleed into the Stay gutters. Uses :has() to
   stay fully scoped to when Stay is the active tab. */
#splitWrapper:has(#leftPanel.stay-mode) #leftPanel {
    background: #FFFFFF !important;
}