/* Mobile-First Smart Navigation Styles */
/* Refactored to use CSS variables for better maintainability */
/* Using high specificity selectors to override Tailwind without !important */
/*
 * Phone / tablet cut (align Tailwind md + mobile-bottom-nav-offset.js width < 768):
 *   phone:  max-width: 767px
 *   tablet+: min-width: 768px
 * App tablet band: 768px–1023px (bottom nav stays visible for --host-tablet on hubs
 * and Discover shell; class name is historical).
 */

/* SwiftSpot logo styling in mobile navigation */
img[src*="Color logo - no background"],
img[src*="Color-logo-dark"],
img[alt="SwiftSpot Logo"] {
  opacity: 1 !important;
}

    /* CRITICAL: Prevent duplicate top bars on phone (≤767; JS/CSS exclusive pair) */
    @media (max-width: 767px) {
        /* Hide nav when discover-top-bar present, or direct child divs containing desktop nav */
        body.discover-page nav.swiftspot-main-nav[class*="navigation"],
        body.discover-page nav.swiftspot-main-nav.swiftspot-main-nav--outer,
        nav.swiftspot-main-nav.swiftspot-main-nav--outer > div.hidden,
        nav.swiftspot-main-nav[class*="navigation"] > div.hidden {
            display: none !important;
        }

        /* Full hide: chat top bar, desktop section on mobile, host pages on mobile */
        body:has(.chat-container) nav.swiftspot-main-nav.swiftspot-main-nav--outer > div.md\:hidden,
        body:has(.chat-container) nav.swiftspot-main-nav[class*="navigation"] > div.md\:hidden,
        body:has(.chat-container) nav.swiftspot-main-nav > div.md\:hidden > div.flex.justify-between.items-center.h-14,
        nav.swiftspot-main-nav > div.hidden[class*="md:block"],
        nav.swiftspot-main-nav > div[class*="hidden"][class*="md:block"],
        nav.swiftspot-main-nav div.hidden.md\:block,
        nav.swiftspot-main-nav .hidden.md\:block,
        nav.swiftspot-main-nav.swiftspot-main-nav--outer > div:first-child,
        nav.swiftspot-main-nav[class*="navigation"] > div:first-child,
        body.user-is-host nav.swiftspot-main-nav.swiftspot-main-nav--outer > div.hidden.md\:block,
        body.user-is-host nav.swiftspot-main-nav > div.hidden[class*="md:block"],
        body.user-is-host nav.swiftspot-main-nav > div[class*="hidden"][class*="md:block"],
        body.user-is-host nav.swiftspot-main-nav > div:first-child.hidden.md\:block,
        body.user-is-host nav.swiftspot-main-nav.swiftspot-main-nav--outer > div:first-child,
        body:has([href*="/host/dashboard"]) nav.swiftspot-main-nav > div.hidden.md\:block,
        body:has([href*="/host/listings"]) nav.swiftspot-main-nav > div.hidden.md\:block,
        body:has([href*="/host/orders"]) nav.swiftspot-main-nav > div.hidden.md\:block,
        body:has([href*="/host/edit"]) nav.swiftspot-main-nav > div.hidden.md\:block,
        body:has([href*="/host/dashboard"]) nav.swiftspot-main-nav > div:first-child,
        body:has([href*="/host/listings"]) nav.swiftspot-main-nav > div:first-child,
        body:has([href*="/host/orders"]) nav.swiftspot-main-nav > div:first-child,
        body:has([href*="/host/edit"]) nav.swiftspot-main-nav > div:first-child {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            overflow: hidden !important;
            margin: 0 !important;
            padding: 0 !important;
        }
    }

    /* Navigation Bar Base Styles — outer <nav> is transparent so page background shows around the floating shell */
    nav.swiftspot-main-nav.swiftspot-main-nav--outer {
        background-color: transparent !important;
        background: transparent !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .dark nav.swiftspot-main-nav.swiftspot-main-nav--outer {
        background-color: transparent !important;
        background: transparent !important;
        border-bottom: none !important;
    }

    /* Legacy: nav without --outer (should be rare) */
    nav.swiftspot-main-nav {
        background-color: transparent;
        border-bottom: none;
        box-shadow: none;
    }

    .dark nav.swiftspot-main-nav {
        background-color: transparent;
        border-bottom: none;
    }

    /* CRITICAL: Ensure consistent navigation container spacing across all pages */
    nav.swiftspot-main-nav > div.swiftspot-main-nav__desktop > div.max-w-6xl,
    nav.swiftspot-main-nav > div.hidden.md\:block > div.max-w-6xl {
        padding-left: 1rem !important; /* px-4 = 1rem */
        padding-right: 1rem !important;
    }

    @media (min-width: 1024px) {
        nav.swiftspot-main-nav > div.swiftspot-main-nav__desktop > div.max-w-6xl,
        nav.swiftspot-main-nav > div.hidden.md\:block > div.max-w-6xl {
            padding-left: 1.5rem !important; /* lg:px-6 = 1.5rem */
            padding-right: 1.5rem !important;
        }
    }

    /* Ensure navigation inner container has consistent height */
    nav.swiftspot-main-nav > div.swiftspot-main-nav__desktop > div.max-w-6xl > div.flex.justify-between.items-center,
    nav.swiftspot-main-nav > div.hidden.md\:block > div.max-w-6xl > div.flex.justify-between.items-center {
        height: 4rem !important; /* h-16 = 4rem */
        min-height: 4rem !important;
        align-items: center !important;
    }

    /* CRITICAL: Prevent logo from shifting */
    nav.swiftspot-main-nav a[href="/discover"] img,
    nav.swiftspot-main-nav a[href*="discover"] img {
        width: auto !important;
        height: var(--swiftspot-main-nav-logo-height) !important;
        transform: translateZ(0) !important; /* Force GPU layer */
        will-change: transform !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* CRITICAL: Prevent logo hover effects from causing layout shifts */
    nav.swiftspot-main-nav a[href="/discover"]:hover img,
    nav.swiftspot-main-nav a[href*="discover"]:hover img {
        transform: translateZ(0) scale(1.02) !important; /* Keep translateZ(0) to maintain GPU layer */
    }

    /* CRITICAL: Prevent avatar/profile button from shifting */
    nav.swiftspot-main-nav .dropdown-container .dropdown-trigger img,
    nav.swiftspot-main-nav .profile-menu-trigger img,
    nav.swiftspot-main-nav button[aria-controls="profile-dropdown-menu"] img {
        display: block !important;
        width: 2rem !important; /* h-8 w-8 = 2rem */
        height: 2rem !important;
        border-radius: 9999px !important; /* rounded-full */
        object-fit: cover !important;
        transform: translateZ(0) !important; /* Force GPU layer */
        will-change: transform !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* CRITICAL: Prevent dropdown button container from shifting */
    nav.swiftspot-main-nav .dropdown-container,
    nav.swiftspot-main-nav .dropdown-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: translateZ(0) !important; /* Force GPU layer */
        flex-shrink: 0 !important;
    }

    /* My Listings Link - All Screen Sizes */
    /* Using high specificity to override Tailwind without !important */
    nav.swiftspot-main-nav a.host-portal-link {
        display: inline-flex;
        align-items: center;
        padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
        font-size: var(--nav-font-size);
        font-weight: var(--nav-font-weight);
        color: var(--nav-host-text-light);
        transition: var(--nav-transition);
        border-radius: var(--nav-border-radius);
        text-decoration: none;
        background-color: transparent;
        border: 1px solid transparent !important; /* Reserve space for border to prevent shifts */
        margin: 0 !important; /* Remove any margins that could cause shifting */
        flex-shrink: 0 !important; /* Prevent button from shrinking */
        /* CRITICAL: Prevent layout shifts from transforms */
        will-change: transform;
        transform: translateZ(0); /* Force GPU acceleration and prevent layout shifts */
    }

    /* Ensure profile dropdown container doesn't cause shifting */
    nav.swiftspot-main-nav .dropdown-container {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .dark nav.swiftspot-main-nav a.host-portal-link {
        color: var(--nav-host-text-dark);
    }

    nav.swiftspot-main-nav a.host-portal-link:hover {
        color: var(--nav-host-text-hover-light);
        background-color: var(--nav-host-bg-hover-light);
        text-decoration: none;
        transform: translateZ(0);
    }

    .dark nav.swiftspot-main-nav a.host-portal-link:hover {
        color: var(--nav-host-text-hover-dark);
        background-color: var(--nav-host-bg-hover-dark);
    }

    /* Quiet selected pill — no glow (premium ops chrome) */
    nav.swiftspot-main-nav a.host-portal-link.active {
        color: var(--nav-host-text-hover-light);
        background-color: var(--nav-host-active-bg-light);
        font-weight: var(--nav-font-weight-active);
        box-shadow: none;
        border: 1px solid rgba(22, 163, 74, 0.22);
        transform: translateZ(0);
        margin: 0 !important;
    }

    .dark nav.swiftspot-main-nav a.host-portal-link.active {
        color: var(--nav-host-text-hover-dark);
        background-color: var(--nav-host-active-bg-dark);
        font-weight: var(--nav-font-weight-active);
        box-shadow: none;
        border: 1px solid rgba(74, 222, 128, 0.28);
    }

    /* Desktop Navigation Links */
    @media (min-width: 768px) {
        /* CRITICAL: Consistent 1.5rem spacing between nav items (buttons, logo section, space-x-6) */
        nav.swiftspot-main-nav > div.swiftspot-main-nav__desktop > div.max-w-6xl > div.flex.justify-between.items-center > div.flex.items-center:last-child,
        nav.swiftspot-main-nav > div.hidden.md\:block > div.max-w-6xl > div.flex.justify-between.items-center > div.flex.items-center:last-child,
        nav.swiftspot-main-nav > div.swiftspot-main-nav__desktop > div.max-w-6xl > div.flex.justify-between.items-center > div:last-child.flex.items-center,
        nav.swiftspot-main-nav > div.hidden.md\:block > div.max-w-6xl > div.flex.justify-between.items-center > div:last-child.flex.items-center {
            gap: 1.5rem !important;
            display: flex !important;
            align-items: center !important;
        }
        nav.swiftspot-main-nav > div.swiftspot-main-nav__desktop > div.max-w-6xl > div.flex.justify-between.items-center > div.flex-shrink-0.flex.items-center:first-child,
        nav.swiftspot-main-nav > div.hidden.md\:block > div.max-w-6xl > div.flex.justify-between.items-center > div.flex-shrink-0.flex.items-center:first-child,
        nav.swiftspot-main-nav > div.swiftspot-main-nav__desktop > div.max-w-6xl > div.flex.justify-between.items-center > div[class*="space-x-6"],
        nav.swiftspot-main-nav > div.hidden.md\:block > div.max-w-6xl > div.flex.justify-between.items-center > div[class*="space-x-6"] {
            gap: 1.5rem !important;
        }

        nav.swiftspot-main-nav a.nav-link,
        nav.swiftspot-main-nav button.nav-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            padding: var(--nav-item-padding-y, 0.5rem) var(--nav-item-padding-x, 0.75rem);
            font-size: var(--nav-font-size, 0.875rem);
            font-weight: var(--nav-font-weight, 500);
            color: var(--nav-text-light, #4b5563);
            transition: var(--nav-transition, all 0.2s ease);
            border-radius: var(--nav-border-radius, 0.375rem);
            text-decoration: none;
            background-color: transparent;
            border: none;
            margin: 0 !important; /* Remove any margins that could cause shifting */
            white-space: nowrap; /* CRITICAL: Prevent text wrapping in nav links */
            /* CRITICAL: Prevent layout shifts from transforms */
            will-change: transform;
            transform: translateZ(0); /* Force GPU acceleration and prevent layout shifts */
            cursor: pointer;
            font-family: inherit;
        }

        .dark nav.swiftspot-main-nav a.nav-link,
        .dark nav.swiftspot-main-nav button.nav-link {
            color: var(--nav-text-dark, #d1d5db);
        }

        nav.swiftspot-main-nav a.nav-link:hover,
        nav.swiftspot-main-nav button.nav-link:hover {
            color: var(--nav-text-hover-light, #111827);
            background-color: var(--nav-bg-hover-light, #f3f4f6);
            text-decoration: none;
            /* CRITICAL: Prevent layout shifts - use transform that doesn't affect layout flow */
            transform: translateZ(0) translateY(-1px); /* Keep translateZ(0) to maintain GPU layer */
        }

        .dark nav.swiftspot-main-nav a.nav-link:hover,
        .dark nav.swiftspot-main-nav button.nav-link:hover {
            color: var(--nav-text-hover-dark, #ffffff);
            background-color: var(--nav-bg-hover-dark, #374151);
        }

        nav.swiftspot-main-nav a.nav-link.active {
            color: var(--nav-active-text-light);
            background-color: var(--nav-active-bg-light);
            /* CRITICAL: Prevent layout shifts - maintain same dimensions */
            transform: translateZ(0); /* Keep GPU layer, no translateY on active state */
            margin: 0 !important; /* Ensure no margin changes */
        }

        .dark nav.swiftspot-main-nav a.nav-link.active {
            color: var(--nav-active-text-dark);
            background-color: var(--nav-active-bg-dark);
        }

        /* CRITICAL: Ensure nav-link SVG icons are properly sized */
        nav.swiftspot-main-nav a.nav-link svg {
            width: 0.875rem !important; /* w-3.5 = 14px to match HTML */
            height: 0.875rem !important; /* h-3.5 = 14px to match HTML */
            flex-shrink: 0 !important;
            display: inline-block !important;
        }

        /* CRITICAL: Ensure host chat button doesn't overflow or overlap */
        nav.swiftspot-main-nav a.nav-link[href*="host-chat"] {
            max-width: fit-content !important;
            white-space: nowrap !important;
            overflow: visible !important;
            padding: var(--nav-item-padding-y) var(--nav-item-padding-x) !important; /* Ensure consistent padding */
            display: inline-flex !important;
            align-items: center !important;
            flex-shrink: 0 !important;
        }

        /* CRITICAL: Ensure proper spacing between host chat and profile button */
        nav.swiftspot-main-nav .flex.items-center.space-x-6 > a.nav-link[href*="host-chat"] + .dropdown-container,
        nav.swiftspot-main-nav .flex.items-center[class*="space-x"] > a.nav-link[href*="host-chat"] + .dropdown-container {
            margin-left: 0 !important;
        }

        /* CRITICAL: Ensure host chat button icon has proper margin */
        nav.swiftspot-main-nav a.nav-link[href*="host-chat"] svg {
            margin-right: 0.375rem !important; /* mr-1.5 = 6px */
        }

        /* Unified nav notification badges — crisp, high-contrast pills */
        .swiftspot-nav-badge {
            display: none;
            align-items: center;
            justify-content: center;
            min-width: 1.125rem;
            min-height: 1.125rem;
            padding: 0 0.3125rem;
            border-radius: 9999px;
            font-size: 0.6875rem;
            font-weight: 600;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.01em;
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
            border: 1.5px solid var(--swiftspot-nav-badge-ring, #ffffff);
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
        }

        .swiftspot-nav-badge.is-visible:not(.hidden) {
            display: inline-flex;
        }

        .swiftspot-nav-badge--message,
        .swiftspot-nav-badge--renter-nav {
            background: #e11d48;
        }

        .swiftspot-nav-badge--host-message {
            background: #ea580c;
        }

        .swiftspot-nav-badge--host-booking {
            background: #d97706;
        }

        .swiftspot-nav-badge--booking {
            background: #2563eb;
        }

        .swiftspot-nav-badge--inline {
            position: static;
            margin-left: 0.25rem;
            font-size: 0.75rem;
            padding: 0.125rem 0.5rem;
        }

        .swiftspot-nav-badge--tab {
            position: static;
            margin-left: 0.375rem;
            vertical-align: middle;
        }

        .dark .swiftspot-nav-badge,
        html.dark .swiftspot-nav-badge {
            --swiftspot-nav-badge-ring: rgb(31 41 55);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
        }

        /* Host Messages unread: corner badge must sit above nav bar and stay visible */
        #desktop-host-unread-badge:not(.hidden),
        #desktop-host-bookings-unseen-badge:not(.hidden),
        .swiftspot-nav-badge.swiftspot-nav-badge--corner.is-visible:not(.hidden) {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            position: absolute !important;
            top: -0.375rem !important;
            right: -0.5rem !important;
            z-index: 60 !important;
            pointer-events: none !important;
        }

        /* CRITICAL: Ensure nav-link text is properly sized */
        nav.swiftspot-main-nav a.nav-link {
            font-size: var(--nav-font-size) !important; /* 0.875rem = 14px */
            line-height: 1.5 !important;
        }

        /* CRITICAL: Ensure host chat button text span is properly sized */
        nav.swiftspot-main-nav a.nav-link[href*="host-chat"] span.text-sm {
            font-size: 0.875rem !important; /* text-sm = 14px */
            line-height: 1.25rem !important;
        }

        /* CRITICAL: Ensure host chat button container doesn't cause overflow */
        nav.swiftspot-main-nav .flex.items-center.space-x-6,
        nav.swiftspot-main-nav .flex.items-center[class*="space-x"] {
            gap: 1.5rem !important; /* Ensure consistent spacing */
            align-items: center !important;
        }

        /* CRITICAL: Ensure nav-link badges are properly sized */
        nav.swiftspot-main-nav a.nav-link span[id*="badge"] {
            font-size: 0.75rem !important; /* text-xs = 12px */
            padding: 0.25rem 0.5rem !important; /* px-2 py-1 */
            line-height: 1 !important;
        }
    }

    /* Mobile bottom nav — fixed flush bottom; home-indicator inset via padding (iOS standard). */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--nav-bg-light);
        border-top: 1px solid var(--nav-border-light);
        z-index: 40;
        padding: var(--spacing-sm) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        box-shadow: var(--shadow-medium);
    }

    .dark .mobile-bottom-nav {
        background-color: var(--nav-bg-dark);
        border-top-color: var(--nav-border-dark);
    }

    .mobile-bottom-nav__items {
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        width: 100%;
    }

    /* Ensure mobile bottom nav container distributes items evenly */
    #mobile-bottom-nav > div,
    #mobile-bottom-nav .mobile-bottom-nav__items {
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        width: 100%;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1 1 0;
        min-width: 0;
        max-width: 5.5rem;
        /* Icon (~1.5rem) + gap + label (1rem) — stop flex thrash clipping labels. */
        min-height: 2.75rem;
        padding: var(--spacing-xs) 0.25rem;
        color: var(--color-gray-500);
        transition: var(--nav-transition);
        text-decoration: none;
        position: relative;
        border: none;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }

    .mobile-nav-item__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        line-height: 1rem;
        font-size: var(--font-size-xs);
        font-weight: var(--nav-font-weight);
        /* Stay above iOS liquid-glass fill; never shrink out of the icon column. */
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }

    .mobile-nav-item__badge:not(.hidden) {
        top: -0.375rem;
        right: 0.125rem;
    }

    .dark .mobile-nav-item {
        color: var(--color-gray-400);
    }

    .mobile-nav-item:hover {
        color: var(--color-gray-700);
        transform: translateY(-1px);
    }

    .dark .mobile-nav-item:hover {
        color: var(--color-gray-300);
    }

    .mobile-nav-item.active {
        color: var(--nav-active-text-light);
    }

    .dark .mobile-nav-item.active {
        color: var(--nav-active-text-dark);
    }

    /* Re-tap on current tab: visible fill flash + icon/label press (no page reload). */
    .mobile-nav-item.is-retap-ack {
        transition: none !important;
    }

    .mobile-nav-item.is-retap-ack::before {
        content: '';
        position: absolute;
        inset: 0.05rem 0.1rem;
        border-radius: 0.9rem;
        background: currentColor;
        opacity: 0;
        pointer-events: none;
        z-index: 0;
        animation: mobile-nav-retap-fill 450ms ease-out forwards;
    }

    .mobile-nav-item.is-retap-ack > * {
        position: relative;
        z-index: 1;
        animation: mobile-nav-retap-press 340ms cubic-bezier(0.34, 1.45, 0.64, 1);
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-nav-item.is-retap-ack,
        .mobile-nav-item.is-retap-ack::before,
        .mobile-nav-item.is-retap-ack > * {
            animation: none !important;
        }
    }

    @keyframes mobile-nav-retap-press {
        0% { transform: scale(1); }
        35% { transform: scale(0.86); }
        70% { transform: scale(1.08); }
        100% { transform: scale(1); }
    }

    @keyframes mobile-nav-retap-fill {
        0% { opacity: 0; transform: scale(0.75); }
        40% { opacity: 0.22; transform: scale(1); }
        100% { opacity: 0; transform: scale(1); }
    }

    .mobile-nav-item.host-portal-item {
        color: var(--nav-host-text-light);
    }

    .dark .mobile-nav-item.host-portal-item {
        color: var(--nav-host-text-dark);
    }

    .mobile-nav-item.host-portal-item.active {
        color: var(--nav-host-text-hover-light);
    }

    .dark .mobile-nav-item.host-portal-item.active {
        color: var(--nav-host-text-hover-dark);
    }

    .mobile-nav-item svg {
        width: var(--icon-lg);
        height: var(--icon-lg);
        margin-bottom: var(--spacing-xs);
    }

    .mobile-nav-item span {
        font-size: var(--font-size-xs);
        line-height: 1rem;
        font-weight: var(--nav-font-weight);
    }

    .mobile-bottom-nav--host-tablet .mobile-nav-item__label {
        font-size: 0.6875rem;
    }

    /* Mobile Profile Modal — swiftspot-overlay-modal + overlayModal.js */
    #mobile-profile-modal.swiftspot-overlay-modal {
        background-color: transparent;
        --mobile-profile-brand: var(--color-brand-accent, #0f5a56);
        --mobile-profile-brand-soft: color-mix(in srgb, var(--mobile-profile-brand) 10%, #ffffff);
        --mobile-profile-brand-border: color-mix(in srgb, var(--mobile-profile-brand) 18%, transparent);
        --mobile-profile-menu-surface: rgb(255 255 255 / 0.94);
        --mobile-profile-menu-muted-surface: rgb(248 250 252 / 0.92);
        --mobile-profile-menu-group-surface: rgb(255 255 255 / 0.88);
        --mobile-profile-menu-border: rgb(226 232 240 / 0.95);
        --mobile-profile-menu-divider: rgb(226 232 240 / 0.72);
        --mobile-profile-menu-text: rgb(15 23 42);
        --mobile-profile-menu-muted: rgb(100 116 139);
        --mobile-profile-menu-hover: rgb(241 245 249 / 0.95);
        --mobile-profile-menu-focus: color-mix(in srgb, var(--mobile-profile-brand) 35%, transparent);
        --mobile-profile-sheet-shadow:
            0 -1px 0 rgb(255 255 255 / 0.65) inset,
            0 -28px 56px -20px rgb(15 23 42 / 0.22),
            0 -10px 24px -14px rgb(15 23 42 / 0.1);
    }

    .dark #mobile-profile-modal.swiftspot-overlay-modal {
        --mobile-profile-brand-soft: color-mix(in srgb, var(--mobile-profile-brand) 18%, rgb(31 41 55));
        --mobile-profile-brand-border: color-mix(in srgb, var(--mobile-profile-brand) 24%, transparent);
        --mobile-profile-menu-surface: rgb(28 25 23 / 0.94);
        --mobile-profile-menu-muted-surface: rgb(41 37 36 / 0.72);
        --mobile-profile-menu-group-surface: rgb(41 37 36 / 0.55);
        --mobile-profile-menu-border: rgb(68 64 60 / 0.72);
        --mobile-profile-menu-divider: rgb(68 64 60 / 0.55);
        --mobile-profile-menu-text: rgb(250 250 249);
        --mobile-profile-menu-muted: rgb(168 162 158);
        --mobile-profile-menu-hover: rgb(68 64 60 / 0.42);
        --mobile-profile-menu-focus: color-mix(in srgb, var(--mobile-profile-brand) 42%, transparent);
        --mobile-profile-sheet-shadow:
            0 -1px 0 rgb(255 255 255 / 0.06) inset,
            0 -28px 56px -20px rgb(0 0 0 / 0.55),
            0 -10px 24px -14px rgb(0 0 0 / 0.32);
    }

    #mobile-profile-modal .mobile-profile-modal__backdrop {
        background: rgb(15 23 42 / 0.44);
        -webkit-backdrop-filter: blur(6px) saturate(120%);
        backdrop-filter: blur(6px) saturate(120%);
    }

    .dark #mobile-profile-modal .mobile-profile-modal__backdrop {
        background: rgb(0 0 0 / 0.58);
    }

    #mobile-profile-modal .mobile-profile-modal__sheet {
        display: flex;
        flex-direction: column;
        background: var(--mobile-profile-menu-surface);
        border: 1px solid var(--mobile-profile-menu-border);
        border-bottom: none;
        border-radius: 1.35rem 1.35rem 0 0;
        box-shadow: var(--mobile-profile-sheet-shadow);
        -webkit-backdrop-filter: blur(22px) saturate(165%);
        backdrop-filter: blur(22px) saturate(165%);
        max-height: min(82vh, calc(100dvh - max(0.75rem, env(safe-area-inset-top, 0px))));
        overflow: hidden;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        margin-bottom: var(--swiftspot-browser-chrome-bottom, 0px);
    }

    #mobile-profile-modal .mobile-profile-modal__chrome {
        position: relative;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 1.85rem;
        padding: 0.4rem 0.85rem 0;
    }

    #mobile-profile-modal .mobile-profile-modal__drag {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 6rem;
        min-height: 2.85rem;
        padding: 0.5rem 0.85rem 0.2rem;
        margin: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #mobile-profile-modal .mobile-profile-modal__drag-bar {
        display: block;
        width: clamp(2.25rem, 11vw, 2.75rem);
        height: 0.3125rem;
        border-radius: 9999px;
        background: rgb(148 163 184 / 0.55);
        box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset;
    }

    .dark #mobile-profile-modal .mobile-profile-modal__drag-bar {
        background: rgb(120 113 108 / 0.72);
        box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset;
    }

    #mobile-profile-modal .mobile-profile-modal__close {
        position: absolute;
        top: 0.45rem;
        right: 0.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 1px solid var(--mobile-profile-menu-border);
        border-radius: 9999px;
        background: var(--mobile-profile-menu-group-surface);
        color: var(--mobile-profile-menu-muted);
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
        cursor: pointer;
    }

    #mobile-profile-modal .mobile-profile-modal__close:hover,
    #mobile-profile-modal .mobile-profile-modal__close:focus-visible {
        background-color: var(--mobile-profile-menu-hover);
        border-color: color-mix(in srgb, var(--mobile-profile-brand) 22%, var(--mobile-profile-menu-border));
        color: var(--mobile-profile-menu-text);
        outline: none;
    }

    #mobile-profile-modal .mobile-profile-modal__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        /* Full-width row buttons otherwise capture vertical drag as activation. */
        touch-action: pan-y;
        padding: 0.15rem 1rem 0.65rem;
    }

    #mobile-profile-modal .mobile-profile-modal__body .mobile-menu-item,
    #mobile-profile-modal .mobile-profile-modal__body a,
    #mobile-profile-modal .mobile-profile-modal__body button,
    #mobile-profile-modal .account-menu-profile-header--mobile-sheet {
        touch-action: pan-y;
    }

    #mobile-profile-modal .mobile-profile-modal__hero {
        margin: 0 0 0.95rem;
        padding: 0.45rem;
        border-radius: 1rem;
        background:
            linear-gradient(
                165deg,
                var(--mobile-profile-brand-soft) 0%,
                color-mix(in srgb, var(--mobile-profile-menu-muted-surface) 88%, transparent) 100%
            );
        border: 1px solid var(--mobile-profile-brand-border);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55);
    }

    .dark #mobile-profile-modal .mobile-profile-modal__hero {
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
    }

    @media (prefers-reduced-motion: reduce) {
        #mobile-profile-modal .account-menu-profile-header--mobile-sheet:hover,
        #mobile-profile-modal .account-menu-profile-header--mobile-sheet:focus-visible {
            transform: none;
        }
    }

    .mobile-menu-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem var(--spacing-base);
        color: var(--color-gray-700);
        text-decoration: none;
        border-radius: var(--border-radius-base, 0.5rem);
        transition: var(--nav-transition);
        margin-bottom: 0.375rem;
        width: 100%;
        cursor: pointer;
        border: none;
        background: none;
        font-size: 0.875rem;
    }

    .dark .mobile-menu-item {
        color: var(--color-gray-300);
    }

    .mobile-menu-item:hover {
        background-color: var(--color-gray-100);
        color: var(--color-gray-900);
    }

    .dark .mobile-menu-item:hover {
        background-color: var(--color-gray-700);
        color: var(--color-gray-100);
    }

    .mobile-menu-item:active {
        background-color: var(--color-gray-200);
    }

    .dark .mobile-menu-item:active {
        background-color: var(--color-gray-600);
    }

    .mobile-menu-item.host-menu-item {
        color: var(--nav-host-text-hover-light);
        background-color: var(--nav-host-bg-hover-light);
    }

    .dark .mobile-menu-item.host-menu-item {
        color: var(--nav-host-text-hover-dark);
        background-color: var(--nav-host-bg-hover-dark);
    }

    .mobile-menu-item svg {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
        display: inline-block;
    }

    /* Ensure mobile menu items display icons to the left of text */
    #mobile-profile-modal .mobile-menu-item,
    .mobile-profile-modal .mobile-menu-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    /* Mobile profile sheet — card header + discover-style rows */
    #mobile-profile-modal .account-menu-profile-header--mobile-sheet {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin: 0;
        padding: 0.7rem 0.75rem;
        border-radius: 0.82rem;
        background: var(--mobile-profile-menu-group-surface);
        border: 1px solid rgb(255 255 255 / 0.72);
        box-shadow:
            0 1px 2px rgb(15 23 42 / 0.05),
            inset 0 1px 0 rgb(255 255 255 / 0.75);
        text-decoration: none;
        color: inherit;
        transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .dark #mobile-profile-modal .account-menu-profile-header--mobile-sheet {
        border-color: rgb(255 255 255 / 0.08);
        box-shadow:
            0 1px 2px rgb(0 0 0 / 0.18),
            inset 0 1px 0 rgb(255 255 255 / 0.04);
    }

    #mobile-profile-modal .account-menu-profile-header--mobile-sheet:hover,
    #mobile-profile-modal .account-menu-profile-header--mobile-sheet:focus-visible {
        background: rgb(255 255 255 / 0.98);
        color: inherit;
        outline: none;
        transform: translateY(-1px);
        box-shadow:
            0 4px 12px rgb(15 23 42 / 0.08),
            inset 0 1px 0 rgb(255 255 255 / 0.85);
    }

    .dark #mobile-profile-modal .account-menu-profile-header--mobile-sheet:hover,
    .dark #mobile-profile-modal .account-menu-profile-header--mobile-sheet:focus-visible {
        background: rgb(68 64 60 / 0.55);
        box-shadow:
            0 4px 12px rgb(0 0 0 / 0.22),
            inset 0 1px 0 rgb(255 255 255 / 0.05);
    }

    #mobile-profile-modal .account-menu-profile-header--mobile-sheet:focus-visible {
        box-shadow:
            0 0 0 2px var(--mobile-profile-menu-focus),
            0 4px 12px rgb(15 23 42 / 0.08);
    }

    #mobile-profile-modal .account-menu-profile-header__avatar {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        box-shadow:
            0 0 0 2px rgb(255 255 255),
            0 0 0 3px color-mix(in srgb, var(--mobile-profile-brand) 32%, transparent);
    }

    .dark #mobile-profile-modal .account-menu-profile-header__avatar {
        box-shadow:
            0 0 0 2px rgb(41 37 36),
            0 0 0 3px color-mix(in srgb, var(--mobile-profile-brand) 38%, transparent);
    }

    #mobile-profile-modal .account-menu-profile-header__name {
        font-size: 1rem;
        font-weight: 750;
        line-height: 1.25;
        letter-spacing: -0.02em;
        color: var(--mobile-profile-menu-text);
    }

    #mobile-profile-modal .account-menu-profile-header__contact {
        margin-top: 0.1rem;
        font-size: 0.8125rem;
        line-height: 1.35;
        color: var(--mobile-profile-menu-muted);
    }

    #mobile-profile-modal .account-menu-profile-header__action-hint {
        margin-top: 0.2rem;
        font-size: 0.6875rem;
        font-weight: 650;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--mobile-profile-brand) 78%, var(--mobile-profile-menu-muted));
    }

    #mobile-profile-modal .account-menu-profile-header__chevron {
        flex: 0 0 auto;
        width: 1rem;
        height: 1rem;
        color: color-mix(in srgb, var(--mobile-profile-brand) 65%, var(--mobile-profile-menu-muted));
        opacity: 0.85;
    }

    #mobile-profile-modal .account-menu-profile-header--mobile-sheet img,
    #mobile-profile-modal .account-menu-profile-header--mobile-sheet .h-10 {
        box-shadow: none;
    }

    #mobile-profile-modal .account-menu-profile-badge-row,
    #mobile-profile-modal .founding-host-badge-wrap {
        margin-top: 0.35rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        align-items: center;
    }

    #mobile-profile-modal .account-menu-profile-badge-row > span[title="Host with active listing"] {
        background: rgb(241 245 249) !important;
        color: rgb(71 85 105) !important;
        border-color: rgb(226 232 240) !important;
        font-weight: 500;
    }

    .dark #mobile-profile-modal .account-menu-profile-badge-row > span[title="Host with active listing"] {
        background: rgb(51 65 85 / 0.45) !important;
        color: rgb(203 213 225) !important;
        border-color: rgb(71 85 105 / 0.55) !important;
    }

    #mobile-profile-modal .account-menu-nav--mobile {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }

    #mobile-profile-modal .account-menu-mobile-section {
        margin-top: 0;
        padding: 0;
        border-top: none;
    }

    #mobile-profile-modal .account-menu-mobile-section-label {
        margin-bottom: 0.35rem;
        padding: 0 0.35rem;
        font-size: 0.625rem;
        font-weight: 750;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--mobile-profile-menu-muted);
    }

    #mobile-profile-modal .account-menu-mobile-section__group {
        overflow: hidden;
        border-radius: 0.95rem;
        border: 1px solid var(--mobile-profile-menu-border);
        background: var(--mobile-profile-menu-group-surface);
        box-shadow:
            0 1px 2px rgb(15 23 42 / 0.04),
            inset 0 1px 0 rgb(255 255 255 / 0.65);
    }

    .dark #mobile-profile-modal .account-menu-mobile-section__group {
        box-shadow:
            0 1px 2px rgb(0 0 0 / 0.16),
            inset 0 1px 0 rgb(255 255 255 / 0.04);
    }

    #mobile-profile-modal .account-menu-mobile-section__group .mobile-menu-item {
        margin: 0;
        padding: 0.72rem 0.85rem;
        min-height: 2.75rem;
        border-radius: 0;
        font-size: 0.875rem;
        font-weight: 650;
        letter-spacing: -0.01em;
        color: var(--mobile-profile-menu-text);
        background: transparent;
        transition: background-color 140ms ease;
    }

    #mobile-profile-modal .account-menu-mobile-section__group .mobile-menu-item + .mobile-menu-item {
        border-top: 1px solid var(--mobile-profile-menu-divider);
    }

    #mobile-profile-modal .account-menu-mobile-section__group .mobile-menu-item:hover,
    #mobile-profile-modal .account-menu-mobile-section__group .mobile-menu-item:focus-visible {
        background-color: var(--mobile-profile-menu-hover);
        color: var(--mobile-profile-menu-text);
        outline: none;
    }

    #mobile-profile-modal .account-menu-mobile-section__group .mobile-menu-item:active {
        background-color: color-mix(in srgb, var(--mobile-profile-menu-hover) 88%, var(--mobile-profile-brand) 12%);
    }

    #mobile-profile-modal .account-menu-mobile-section__group .mobile-menu-item:focus-visible {
        box-shadow: inset 0 0 0 2px var(--mobile-profile-menu-focus);
    }

    #mobile-profile-modal a.mobile-menu-item {
        justify-content: space-between;
    }

    #mobile-profile-modal a.mobile-menu-item::after {
        content: "";
        flex-shrink: 0;
        width: 0.375rem;
        height: 0.375rem;
        margin-left: 0.65rem;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        transform: rotate(45deg);
        opacity: 0.32;
    }

    #mobile-profile-modal .account-menu-nav--mobile > .mobile-menu-item.account-menu-mode-switch {
        margin: 0;
        padding: 0.78rem 1rem;
        min-height: 2.85rem;
        border-radius: 0.95rem;
        font-size: 0.875rem;
        font-weight: 750;
        letter-spacing: -0.01em;
        white-space: nowrap;
        text-align: center;
        justify-content: center;
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--mobile-profile-brand) 12%, #ffffff) 0%,
            color-mix(in srgb, var(--mobile-profile-brand) 6%, #ffffff) 100%
        );
        color: color-mix(in srgb, var(--mobile-profile-brand) 92%, #0f172a);
        box-shadow:
            inset 0 0 0 1px var(--mobile-profile-brand-border),
            0 1px 2px rgb(15 23 42 / 0.05);
    }

    #mobile-profile-modal .account-menu-nav--mobile > .mobile-menu-item.account-menu-mode-switch::after {
        display: none;
    }

    #mobile-profile-modal .account-menu-nav--mobile > .mobile-menu-item.account-menu-mode-switch:hover,
    #mobile-profile-modal .account-menu-nav--mobile > .mobile-menu-item.account-menu-mode-switch:focus-visible {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--mobile-profile-brand) 18%, #ffffff) 0%,
            color-mix(in srgb, var(--mobile-profile-brand) 10%, #ffffff) 100%
        );
        color: color-mix(in srgb, var(--mobile-profile-brand) 96%, #0f172a);
    }

    .dark #mobile-profile-modal .account-menu-nav--mobile > .mobile-menu-item.account-menu-mode-switch {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--mobile-profile-brand) 22%, rgb(41 37 36)) 0%,
            color-mix(in srgb, var(--mobile-profile-brand) 12%, rgb(28 25 23)) 100%
        );
        color: color-mix(in srgb, var(--mobile-profile-brand) 55%, #fafaf9);
        box-shadow:
            inset 0 0 0 1px var(--mobile-profile-brand-border),
            0 1px 2px rgb(0 0 0 / 0.2);
    }

    .dark #mobile-profile-modal .account-menu-nav--mobile > .mobile-menu-item.account-menu-mode-switch:hover,
    .dark #mobile-profile-modal .account-menu-nav--mobile > .mobile-menu-item.account-menu-mode-switch:focus-visible {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--mobile-profile-brand) 28%, rgb(41 37 36)) 0%,
            color-mix(in srgb, var(--mobile-profile-brand) 16%, rgb(28 25 23)) 100%
        );
    }

    #mobile-profile-modal .account-menu-nav--mobile > .mobile-menu-item.account-menu-mode-switch--browse {
        background: linear-gradient(
            180deg,
            rgb(248 250 252) 0%,
            rgb(241 245 249) 100%
        );
        color: rgb(51 65 85);
        box-shadow:
            inset 0 0 0 1px rgb(148 163 184 / 0.35),
            0 1px 2px rgb(15 23 42 / 0.05);
    }

    .dark #mobile-profile-modal .account-menu-nav--mobile > .mobile-menu-item.account-menu-mode-switch--browse {
        background: linear-gradient(
            180deg,
            rgb(68 64 60 / 0.55) 0%,
            rgb(41 37 36 / 0.72) 100%
        );
        color: rgb(231 229 228);
        box-shadow:
            inset 0 0 0 1px rgb(120 113 108 / 0.45),
            0 1px 2px rgb(0 0 0 / 0.2);
    }

    #mobile-profile-modal .mobile-menu-item.host-menu-item {
        color: var(--mobile-profile-menu-text);
        background-color: transparent;
    }

    #mobile-profile-modal .mobile-menu-item.host-menu-item--earnings {
        font-weight: 650;
        color: rgb(15 118 110);
        background: color-mix(in srgb, rgb(204 251 241) 55%, transparent);
    }

    .dark #mobile-profile-modal .mobile-menu-item.host-menu-item--earnings {
        color: rgb(94 234 212);
        background: color-mix(in srgb, rgb(19 78 74) 55%, transparent);
    }

    #mobile-profile-modal .mobile-menu-item.host-menu-item--earnings:hover,
    #mobile-profile-modal .mobile-menu-item.host-menu-item--earnings:focus-visible {
        background: color-mix(in srgb, rgb(153 246 228) 45%, transparent);
    }

    .dark #mobile-profile-modal .mobile-menu-item.host-menu-item--earnings:hover,
    .dark #mobile-profile-modal .mobile-menu-item.host-menu-item--earnings:focus-visible {
        background: color-mix(in srgb, rgb(19 78 74) 75%, transparent);
    }

    #mobile-profile-modal .account-menu-mobile-footer {
        flex-shrink: 0;
        padding: 0.65rem 1rem max(0.85rem, env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--mobile-profile-menu-border);
        background: color-mix(in srgb, var(--mobile-profile-menu-surface) 88%, transparent);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    #mobile-profile-modal .account-menu-mobile-sign-out {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.65rem 0.85rem;
        border: 1px solid rgb(254 202 202 / 0.85);
        border-radius: 0.95rem;
        background: rgb(255 255 255 / 0.72);
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: rgb(185 28 28);
        cursor: pointer;
        transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    }

    .dark #mobile-profile-modal .account-menu-mobile-sign-out {
        border-color: rgb(127 29 29 / 0.55);
        background: rgb(41 37 36 / 0.72);
        color: rgb(252 165 165);
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
    }

    #mobile-profile-modal .account-menu-mobile-sign-out:hover,
    #mobile-profile-modal .account-menu-mobile-sign-out:focus-visible {
        background: rgb(254 242 242);
        border-color: rgb(252 165 165);
        outline: none;
        box-shadow: 0 2px 8px rgb(185 28 28 / 0.08);
    }

    .dark #mobile-profile-modal .account-menu-mobile-sign-out:hover,
    .dark #mobile-profile-modal .account-menu-mobile-sign-out:focus-visible {
        background: rgb(69 10 10 / 0.42);
        border-color: rgb(248 113 113 / 0.45);
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.22);
    }

    #mobile-profile-modal .account-menu-mobile-sign-out:focus-visible {
        box-shadow: 0 0 0 2px rgb(248 113 113 / 0.35);
    }

    #mobile-profile-modal .account-menu-profile-badge-row .founding-host-badge,
    #mobile-profile-modal .founding-host-badge-wrap .founding-host-badge {
        max-width: 100%;
    }

    #mobile-profile-modal .text-sm.text-gray-500.dark\:text-gray-300.flex.items-center.gap-1\.5 {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    /* Corner notification badges — nudged up/right of nav item corner */
    #bottom-nav-host-messages-badge:not(.hidden),
    #bottom-nav-host-bookings-badge:not(.hidden),
    #bottom-nav-unread-badge:not(.hidden),
    .mobile-nav-item__badge.swiftspot-nav-badge.is-visible:not(.hidden) {
        top: -0.375rem;
        right: 0.125rem;
    }

    /* Badge Styles */
    .unread-badge {
        position: absolute;
        top: -0.25rem;
        right: -0.25rem;
        background-color: var(--color-error-red);
        color: var(--color-gray-100);
        font-size: var(--font-size-xs);
        font-weight: var(--nav-font-weight);
        padding: var(--spacing-xs) 0.375rem;
        border-radius: var(--border-radius-full);
        min-width: 1.25rem;
        text-align: center;
        line-height: 1;
    }

    .unread-badge.hidden {
        display: none;
    }

    /* Mobile Icon Buttons */
    .mobile-icon-btn {
        padding: var(--spacing-sm);
        color: var(--color-gray-500);
        border-radius: var(--nav-border-radius);
        transition: var(--nav-transition);
        position: relative;
    }

    .dark .mobile-icon-btn {
        color: var(--color-gray-400);
    }

    .mobile-icon-btn:hover {
        color: var(--color-gray-900);
        background-color: var(--nav-bg-hover-light);
    }

    .dark .mobile-icon-btn:hover {
        color: var(--color-gray-100);
        background-color: var(--nav-bg-hover-dark);
    }

    .mobile-icon-btn svg {
        width: var(--icon-base);
        height: var(--icon-base);
    }

    /* Profile Triggers */
    .profile-menu-trigger,
    .mobile-profile-trigger {
        padding: var(--spacing-xs);
        border-radius: var(--border-radius-full);
        transition: var(--nav-transition);
    }

    .profile-menu-trigger:hover,
    .mobile-profile-trigger:hover {
        background-color: var(--nav-bg-hover-light);
    }

    .dark .profile-menu-trigger:hover,
    .dark .mobile-profile-trigger:hover {
        background-color: var(--nav-bg-hover-dark);
    }

    /* Button Styles (scoped to main site nav from mobile_navigation.html) */
    nav[data-spots-count].swiftspot-main-nav .btn-primary {
        display: inline-flex;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-base);
        font-size: var(--type-button-size, var(--nav-font-size));
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-gray-100);
        background-color: var(--color-primary-blue);
        border-radius: var(--border-radius-base);
        transition: var(--nav-transition);
        text-decoration: none;
    }

    nav[data-spots-count].swiftspot-main-nav .btn-primary:hover {
        background-color: var(--color-primary-blue-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-medium);
    }

    nav[data-spots-count].swiftspot-main-nav .btn-primary-sm {
        display: inline-flex;
        align-items: center;
        padding: 0.375rem var(--spacing-lg);
        font-size: var(--type-label-size, 0.8125rem);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-gray-100);
        background-color: var(--color-primary-blue);
        border-radius: var(--nav-border-radius);
        transition: var(--nav-transition);
        text-decoration: none;
    }

    nav[data-spots-count].swiftspot-main-nav .btn-primary-sm:hover {
        background-color: var(--color-primary-blue-hover);
    }

    /* Responsive Adjustments */
    @media (max-width: 767px) {
        .mobile-nav-item {
            min-width: 0;
        }

        .mobile-nav-item span,
        .mobile-nav-item__label {
            font-size: var(--type-badge-size, 0.75rem);
        }

        .mobile-nav-item svg {
            width: var(--icon-base);
            height: var(--icon-base);
        }
    }

    /* Authenticated hubs: bottom nav stays through tablet (768–1023px); global top stays visible too (md+). */

    /* Animation for smooth transitions */
    .mobile-nav-item,
    .mobile-menu-item,
    .nav-link,
    .host-portal-link {
        transition: var(--nav-transition);
    }

    /* Focus rings for keyboard only — avoid sticky blue outline after tap on mobile */
    .mobile-nav-item:focus,
    .mobile-menu-item:focus,
    .nav-link:focus,
    .host-portal-link:focus {
        outline: none;
    }

    .mobile-nav-item:focus-visible,
    .mobile-menu-item:focus-visible,
    .nav-link:focus-visible,
    .host-portal-link:focus-visible {
        outline: 2px solid var(--color-primary-blue);
        outline-offset: 2px;
    }

/* Dark overlay/text contrast: themes/dark-mode.css */

/* ============================================================================
   SWIFTSPOT PREMIUM MAIN NAVIGATION
   Shared default nav system for non-Discover pages. Discover uses its own
   .discover-top-bar and is intentionally not targeted here.
   ============================================================================ */

/* Outer nav stays transparent; frosted treatment lives on .swiftspot-main-nav__shell (md+) */
nav[data-spots-count].swiftspot-main-nav,
nav[data-spots-count].swiftspot-main-nav.swiftspot-main-nav--outer {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.dark nav[data-spots-count].swiftspot-main-nav,
html.dark nav[data-spots-count].swiftspot-main-nav.swiftspot-main-nav--outer {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    nav[data-spots-count].swiftspot-main-nav:not(.swiftspot-main-nav--host) > div.swiftspot-main-nav__desktop,
    nav[data-spots-count].swiftspot-main-nav:not(.swiftspot-main-nav--host) > div.hidden.md\:block {
        padding: 0.5rem 0.75rem;
    }

    nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__container {
        max-width: min(72rem, calc(100vw - 1.5rem));
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__shell {
        position: relative;
        height: 3.75rem !important;
        min-height: 3.75rem !important;
        padding: 0 0.85rem 0 1.05rem;
        border: 1px solid var(--nav-shell-border-light);
        border-radius: var(--nav-shell-radius);
        background: var(--nav-shell-surface-light);
        box-shadow: var(--nav-shell-shadow-light), var(--nav-shell-inset-light);
        backdrop-filter: blur(var(--nav-shell-blur)) saturate(145%);
        -webkit-backdrop-filter: blur(var(--nav-shell-blur)) saturate(145%);
        overflow: visible;
    }

    html.dark nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__shell {
        border-color: var(--nav-shell-border-dark);
        background: var(--nav-shell-surface-dark);
        box-shadow: var(--nav-shell-shadow-dark), var(--nav-shell-inset-dark);
        backdrop-filter: blur(var(--nav-shell-blur)) saturate(145%);
        -webkit-backdrop-filter: blur(var(--nav-shell-blur)) saturate(145%);
    }

    nav[data-spots-count].swiftspot-main-nav.swiftspot-main-nav--host .swiftspot-main-nav__shell {
        border-color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 18%, var(--nav-shell-border-light));
    }

    html.dark nav[data-spots-count].swiftspot-main-nav.swiftspot-main-nav--host .swiftspot-main-nav__shell {
        border-color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 22%, var(--nav-shell-border-dark));
    }

    /* Host portal context wordmark next to the logo */
    nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__context-label {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        padding: 0.2rem 0.55rem;
        border: 1px solid color-mix(in srgb, var(--color-brand-accent, #0f5a56) 24%, transparent);
        border-radius: 999px;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 88%, #292524);
        background: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 8%, #ffffff);
    }

    html.dark nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__context-label {
        border-color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 32%, transparent);
        color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 55%, #fafaf9);
        background: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 14%, rgba(28, 25, 23, 0.6));
    }

    nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__brand {
        gap: 1rem !important;
        min-width: 0;
    }

    nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__logo {
        border-radius: 0.75rem;
        padding: 0.35rem 0.45rem;
    }

    nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__logo:hover {
        background: var(--nav-shell-link-hover-bg-light);
    }

    html.dark nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__logo:hover {
        background: var(--nav-shell-link-hover-bg-dark);
    }

    nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__actions {
        gap: 0.55rem !important;
        align-items: center !important;
    }

    nav[data-spots-count].swiftspot-main-nav a.nav-link,
    nav[data-spots-count].swiftspot-main-nav button.nav-link {
        min-height: 2.45rem;
        padding: 0.55rem 0.86rem;
        border: 1px solid transparent;
        border-radius: 999px;
        color: var(--nav-shell-link-text-light);
        font-weight: var(--nav-font-weight-active, 600);
        letter-spacing: -0.01em;
        background: transparent;
        transition: color var(--nav-transition), background-color var(--nav-transition),
            border-color var(--nav-transition), box-shadow var(--nav-transition);
    }

    html.dark nav[data-spots-count].swiftspot-main-nav a.nav-link,
    html.dark nav[data-spots-count].swiftspot-main-nav button.nav-link {
        color: var(--nav-shell-link-text-dark);
    }

    nav[data-spots-count].swiftspot-main-nav a.nav-link:hover,
    nav[data-spots-count].swiftspot-main-nav button.nav-link:hover {
        color: var(--nav-text-hover-light);
        border-color: var(--nav-shell-link-active-border-light);
        background: var(--nav-shell-link-hover-bg-light);
        box-shadow: none;
    }

    html.dark nav[data-spots-count].swiftspot-main-nav a.nav-link:hover,
    html.dark nav[data-spots-count].swiftspot-main-nav button.nav-link:hover {
        color: var(--nav-text-hover-dark);
        border-color: var(--nav-shell-link-active-border-dark);
        background: var(--nav-shell-link-hover-bg-dark);
        box-shadow: none;
    }

    nav[data-spots-count].swiftspot-main-nav a.nav-link.active,
    nav[data-spots-count].swiftspot-main-nav button.nav-link.active {
        color: var(--nav-shell-link-active-text-light);
        border-color: var(--nav-shell-link-active-border-light);
        background: var(--nav-shell-link-active-bg-light);
        box-shadow: none;
    }

    html.dark nav[data-spots-count].swiftspot-main-nav a.nav-link.active,
    html.dark nav[data-spots-count].swiftspot-main-nav button.nav-link.active {
        color: var(--nav-shell-link-active-text-dark);
        border-color: var(--nav-shell-link-active-border-dark);
        background: var(--nav-shell-link-active-bg-dark);
        box-shadow: none;
    }

    nav[data-spots-count].swiftspot-main-nav .btn-primary {
        min-height: 2.55rem;
        padding: 0.62rem 1.08rem;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: linear-gradient(135deg, #2563eb 0%, #4338ca 100%);
        box-shadow: 0 10px 24px -14px rgba(37, 99, 235, 0.55);
        font-weight: var(--nav-font-weight-active, 600);
        letter-spacing: -0.01em;
        transition: filter var(--nav-transition), box-shadow var(--nav-transition);
    }

    nav[data-spots-count].swiftspot-main-nav .btn-primary:hover {
        filter: brightness(1.03);
        box-shadow: 0 14px 28px -14px rgba(37, 99, 235, 0.62);
    }

    nav[data-spots-count].swiftspot-main-nav .profile-menu-trigger {
        width: 2.35rem !important;
        height: 2.35rem !important;
        padding: 0.175rem !important;
        margin-right: 7px !important;
        border: 1px solid var(--nav-shell-border-light);
        background: rgba(255, 255, 255, 0.82);
        box-shadow: none;
        transition: border-color var(--nav-transition), background-color var(--nav-transition);
    }

    html.dark nav[data-spots-count].swiftspot-main-nav .profile-menu-trigger {
        border-color: var(--nav-shell-border-dark);
        background: rgba(255, 255, 255, 0.06);
    }

    nav[data-spots-count].swiftspot-main-nav .profile-menu-trigger:hover {
        border-color: var(--nav-shell-link-active-border-light);
        background: var(--nav-shell-link-hover-bg-light);
    }

    nav[data-spots-count].swiftspot-main-nav .profile-menu-trigger.active {
        border-color: var(--nav-shell-link-active-border-light);
        background: var(--nav-shell-link-active-bg-light);
        box-shadow: 0 0 0 2px rgba(120, 113, 108, 0.12);
    }

    html.dark nav[data-spots-count].swiftspot-main-nav .profile-menu-trigger:hover {
        border-color: var(--nav-shell-link-active-border-dark);
        background: var(--nav-shell-link-hover-bg-dark);
    }

    html.dark nav[data-spots-count].swiftspot-main-nav .profile-menu-trigger.active {
        border-color: var(--nav-shell-link-active-border-dark);
        background: var(--nav-shell-link-active-bg-dark);
        box-shadow: 0 0 0 2px rgba(168, 162, 158, 0.14);
    }

    nav[data-spots-count].swiftspot-main-nav .dropdown-menu {
        border-radius: 1rem !important;
        border-color: var(--nav-shell-border-light) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: var(--nav-shell-shadow-light) !important;
        backdrop-filter: blur(var(--nav-shell-blur));
        -webkit-backdrop-filter: blur(var(--nav-shell-blur));
    }

    html.dark nav[data-spots-count].swiftspot-main-nav .dropdown-menu {
        border-color: var(--nav-shell-border-dark) !important;
        background: rgba(28, 25, 23, 0.98) !important;
        box-shadow: var(--nav-shell-shadow-dark) !important;
    }
}

@media (min-width: 1024px) {
    nav[data-spots-count].swiftspot-main-nav.swiftspot-main-nav--host > div.swiftspot-main-nav__desktop {
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 767px) {
    #mobile-bottom-nav {
        background: var(--nav-mobile-bar-surface-light) !important;
        border-top-color: var(--nav-mobile-bar-border-light) !important;
        box-shadow: 0 -1px 0 rgba(28, 25, 23, 0.04), 0 -8px 24px -16px rgba(28, 25, 23, 0.12);
        backdrop-filter: blur(var(--nav-shell-blur));
        -webkit-backdrop-filter: blur(var(--nav-shell-blur));
    }

    html.dark #mobile-bottom-nav {
        background: var(--nav-mobile-bar-surface-dark) !important;
        border-top-color: var(--nav-mobile-bar-border-dark) !important;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.18), 0 -8px 24px -16px rgba(0, 0, 0, 0.42);
    }

    #mobile-bottom-nav > div,
    #mobile-bottom-nav .mobile-bottom-nav__items {
        gap: 0.125rem !important;
        padding: 0.45rem 0.35rem 0.45rem !important;
    }

    #mobile-bottom-nav .mobile-nav-item {
        min-width: 0;
        max-width: none;
        border-radius: 0.95rem;
        padding: 0.42rem 0.2rem;
    }

    #mobile-bottom-nav .mobile-nav-item.active {
        background: var(--nav-shell-link-active-bg-light);
        color: var(--nav-shell-link-active-text-light);
        box-shadow: inset 0 0 0 1px var(--nav-shell-link-active-border-light);
    }

    html.dark #mobile-bottom-nav .mobile-nav-item.active {
        background: var(--nav-shell-link-active-bg-dark);
        color: var(--nav-shell-link-active-text-dark);
        box-shadow: inset 0 0 0 1px var(--nav-shell-link-active-border-dark);
    }

    #mobile-profile-modal .mobile-profile-modal__sheet {
        border-color: var(--nav-shell-border-light);
        box-shadow: var(--mobile-profile-sheet-shadow), var(--nav-shell-shadow-light);
    }

    html.dark #mobile-profile-modal .mobile-profile-modal__sheet {
        border-color: var(--nav-shell-border-dark);
        box-shadow: var(--mobile-profile-sheet-shadow), var(--nav-shell-shadow-dark);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-bottom-nav--host-tablet {
        background: var(--nav-mobile-bar-surface-light) !important;
        border-top-color: var(--nav-mobile-bar-border-light) !important;
        box-shadow: 0 -1px 0 rgba(28, 25, 23, 0.04), 0 -8px 24px -16px rgba(28, 25, 23, 0.12);
        backdrop-filter: blur(var(--nav-shell-blur));
        -webkit-backdrop-filter: blur(var(--nav-shell-blur));
    }

    html.dark .mobile-bottom-nav--host-tablet {
        background: var(--nav-mobile-bar-surface-dark) !important;
        border-top-color: var(--nav-mobile-bar-border-dark) !important;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.18), 0 -8px 24px -16px rgba(0, 0, 0, 0.42);
    }

    .mobile-bottom-nav--host-tablet .mobile-bottom-nav__items {
        gap: 0.25rem !important;
        padding: 0.5rem 0.5rem 0.5rem !important;
        max-width: 42rem;
    }

    .mobile-bottom-nav--host-tablet .mobile-nav-item {
        border-radius: 0.95rem;
        padding: 0.45rem 0.35rem;
    }

    .mobile-bottom-nav--host-tablet .mobile-nav-item.active {
        background: var(--nav-shell-link-active-bg-light);
        color: var(--nav-shell-link-active-text-light);
        box-shadow: inset 0 0 0 1px var(--nav-shell-link-active-border-light);
    }

    html.dark .mobile-bottom-nav--host-tablet .mobile-nav-item.active {
        background: var(--nav-shell-link-active-bg-dark);
        color: var(--nav-shell-link-active-text-dark);
        box-shadow: inset 0 0 0 1px var(--nav-shell-link-active-border-dark);
    }
}

@media (max-width: 640px) {
    nav.swiftspot-main-nav--guest-hub .guest-hub-tab-button {
        flex: 0 0 auto;
        min-height: 2.25rem;
        white-space: nowrap;
    }

    nav.swiftspot-main-nav--guest-hub .flex-1.flex.items-center.justify-center.space-x-1.px-4 {
        justify-content: flex-start !important;
        overflow-x: auto;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        scrollbar-width: none;
    }

    nav.swiftspot-main-nav--guest-hub .flex-1.flex.items-center.justify-center.space-x-1.px-4::-webkit-scrollbar {
        display: none;
    }
}

/* Admin environment banner — full width at top of admin pages */
.admin-environment-banner {
    position: relative;
    z-index: calc(var(--z-admin-indicator, 9998) + 2);
    display: block;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    line-height: 1.4;
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   GLOBAL MOBILE BOTTOM NAV — content offset (all authenticated pages)
   Height synced by js/shared/navigation/mobile-bottom-nav-offset.js
   ========================================================================== */

:root {
    --swiftspot-mobile-bottom-nav-offset: 0px;
    --swiftspot-mobile-bottom-nav-offset-fallback: 4.5rem;
    /* Fallback band: approx tab height + home-indicator + small breath (pre-JS) */
    --swiftspot-mobile-bottom-clearance: calc(
        var(--swiftspot-mobile-bottom-nav-offset-fallback)
        + env(safe-area-inset-bottom, 0px)
        + 0.5rem
    );
}

/* Fallback before mobile-bottom-nav-offset.js measures — avoids support FAB layout shift on refresh.
   Clearance keeps safe-area here because the 4.5rem fallback is content height only. */
@media (max-width: 767px) {
    body:not(.discover-page):has(#mobile-bottom-nav) {
        --swiftspot-mobile-bottom-nav-offset: var(--swiftspot-mobile-bottom-nav-offset-fallback);
        --swiftspot-mobile-bottom-clearance: calc(
            var(--swiftspot-mobile-bottom-nav-offset-fallback)
            + var(--swiftspot-browser-chrome-bottom, 0px)
            + env(safe-area-inset-bottom, 0px)
            + 0.5rem
        );
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body:not(.discover-page):has(#mobile-bottom-nav.mobile-bottom-nav--host-tablet) {
        --swiftspot-mobile-bottom-nav-offset: var(--swiftspot-mobile-bottom-nav-offset-fallback);
        --swiftspot-mobile-bottom-clearance: calc(
            var(--swiftspot-mobile-bottom-nav-offset-fallback)
            + var(--swiftspot-browser-chrome-bottom, 0px)
            + env(safe-area-inset-bottom, 0px)
            + 0.5rem
        );
    }
}

/* DDG/other: lift with browser chrome inset. iOS Safari: stable bottom:0.
   Avoid backdrop-filter on iOS fixed footers (compositor + Liquid Glass sampling). */
#mobile-bottom-nav.mobile-bottom-nav {
    bottom: var(--swiftspot-browser-chrome-bottom, 0px) !important;
    top: auto !important;
    /* No opacity/visibility transition — overlay hide/show used to fade the bar and flicker. */
}

/*
 * iOS Safari: fixed node transparent + absolute fill child. Scroll containment via
 * .swiftspot-ios-vv-lock keeps fixed footers aligned without painting past the VV
 * (Safari clips fixed paint that extends below the visual viewport).
 */
html.swiftspot-ios-safari #mobile-bottom-nav.mobile-bottom-nav {
    bottom: var(--swiftspot-ios-nav-bottom, 0px) !important;
    top: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
}

html.dark.swiftspot-ios-safari #mobile-bottom-nav.mobile-bottom-nav {
    background-color: transparent !important;
}

html.swiftspot-ios-safari #mobile-bottom-nav.mobile-bottom-nav::before {
    content: none;
}

html.swiftspot-ios-safari #mobile-bottom-nav.mobile-bottom-nav > [data-ios-nav-fill] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

html.swiftspot-ios-safari #mobile-bottom-nav.mobile-bottom-nav > div:not([data-ios-nav-fill]),
html.swiftspot-ios-safari #mobile-bottom-nav.mobile-bottom-nav .mobile-bottom-nav__items {
    position: relative;
    z-index: 1;
}

html.swiftspot-ios-safari.swiftspot-ios-safari-liquid-glass #mobile-bottom-nav.mobile-bottom-nav {
    bottom: var(--swiftspot-ios-nav-bottom, 0px) !important;
    background-color: transparent !important;
}

/* VV-lock: owned by base/ios-vv-lock.css (always loaded; hide_navigation pages need it). */

html.swiftspot-ios-safari.swiftspot-ios-safari-liquid-glass:not(:has(body.host-landing-body)):not(:has(body.marketing-landing-body)):not(:has(body.marketing-about-body)) {
    background-color: var(--nav-bg-light) !important;
}

html.dark.swiftspot-ios-safari.swiftspot-ios-safari-liquid-glass:not(:has(body.host-landing-body)):not(:has(body.marketing-landing-body)):not(:has(body.marketing-about-body)) {
    background-color: var(--nav-bg-dark) !important;
}

/* Discover: hide bottom tabs + account sheet only when desktop chrome takes over (≥1024).
 * Tablet (768–1023) keeps the same app tab contract as renter/host hubs. */
@media (min-width: 1024px) {
    body.discover-page #mobile-bottom-nav,
    body.discover-page #mobile-profile-modal {
        display: none !important;
    }
}

/*
 * After JS measures nav height, offset already includes safe-area padding on the bar.
 * JS also sets --swiftspot-mobile-bottom-clearance inline; this is the class-coupled fallback.
 * Include browser chrome: #mobile-bottom-nav sits on --swiftspot-browser-chrome-bottom.
 */
html.swiftspot-bottom-nav-visible {
    --swiftspot-mobile-bottom-clearance: calc(
        var(--swiftspot-mobile-bottom-nav-offset, var(--swiftspot-mobile-bottom-nav-offset-fallback, 4.5rem))
        + var(--swiftspot-browser-chrome-bottom, 0px)
        + 0.5rem
    );
    scroll-padding-bottom: var(--swiftspot-mobile-bottom-clearance);
}

/*
 * Document scroll: reserve space below in-flow content for the fixed bottom tab bar.
 * Excludes full-viewport chat (internal scroll), ListSpot wizard (spacer), Discover.
 */
body.swiftspot-bottom-nav-visible:not(:has(.chat-container)):not(.listspot-wizard):not(:has(#host-orders-root)):not(:has(.listings-page-container)) {
    padding-bottom: var(--swiftspot-mobile-bottom-clearance) !important;
}

/*
 * My Bookings embeds a hidden messaging .chat-container in the DOM, so :has(.chat-container)
 * skips the rule above even on the Bookings/Billing tabs. Reserve nav space unless the
 * messaging tab is active (fixed-height internal scroll).
 */
body.my-bookings-page.swiftspot-bottom-nav-visible:not(.my-bookings-messaging-tab) {
    padding-bottom: var(--swiftspot-mobile-bottom-clearance) !important;
}

/* CSS-only reserve when #mobile-bottom-nav is present (before JS adds .swiftspot-bottom-nav-visible) */
@media (max-width: 767px) {
    body:not(.discover-page):not(.listspot-wizard):not(.chat-page):not(.my-bookings-messaging-tab):not(:has(#host-orders-root)):not(:has(.listings-page-container)):has(#mobile-bottom-nav):not(:has(.chat-container[data-chat-page="true"])) {
        padding-bottom: var(--swiftspot-mobile-bottom-clearance) !important;
    }

    body.my-bookings-page:not(.my-bookings-messaging-tab):has(#mobile-bottom-nav) {
        padding-bottom: var(--swiftspot-mobile-bottom-clearance) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body:not(.discover-page):not(.listspot-wizard):not(.chat-page):not(.my-bookings-messaging-tab):not(:has(#host-orders-root)):not(:has(.listings-page-container)):has(#mobile-bottom-nav.mobile-bottom-nav--host-tablet):not(:has(.chat-container[data-chat-page="true"])) {
        padding-bottom: var(--swiftspot-mobile-bottom-clearance) !important;
    }

    body.my-bookings-page:not(.my-bookings-messaging-tab):has(#mobile-bottom-nav.mobile-bottom-nav--host-tablet) {
        padding-bottom: var(--swiftspot-mobile-bottom-clearance) !important;
    }
}

body.swiftspot-bottom-nav-visible:not(.listspot-wizard) #mainContent,
body.swiftspot-bottom-nav-visible:not(.listspot-wizard) main#main-content {
    scroll-padding-bottom: var(--swiftspot-mobile-bottom-clearance);
}

/*
 * Host portal (Incoming Bookings, My Listings): in-flow ::after spacer extends document
 * scroll height above the fixed bottom tab bar. Page-root padding fails in flex layouts;
 * scroll-margin alone does not add scroll extent.
 */
@media (max-width: 1023px) {
    body:has(#mobile-bottom-nav):not(.discover-page):not(.chat-page):not(.listspot-wizard):has(.host-dashboard-shell),
    body:has(#mobile-bottom-nav):not(.discover-page):not(.chat-page):not(.listspot-wizard):has(#host-orders-root) {
        padding-bottom: 0 !important;
    }

    body:has(#mobile-bottom-nav):not(.discover-page):not(.chat-page):not(.listspot-wizard) .host-dashboard-page::after,
    body:has(#mobile-bottom-nav):not(.discover-page):not(.chat-page):not(.listspot-wizard) .listings-page-container::after {
        content: "";
        display: block;
        flex-shrink: 0;
        width: 100%;
        height: var(--swiftspot-mobile-bottom-clearance);
        pointer-events: none;
    }

    body:has(#mobile-bottom-nav) #host-orders-root.host-dashboard-page,
    body:has(#mobile-bottom-nav) .listings-page-container {
        padding-bottom: 0 !important;
        min-height: auto !important;
    }

    body:has(#mobile-bottom-nav) .listings-page-container .host-dashboard-shell {
        flex: none !important;
        min-height: auto !important;
    }

    body:has(#mobile-bottom-nav) .listings-client-pagination,
    body:has(#mobile-bottom-nav) .host-orders-pagination,
    body:has(#mobile-bottom-nav) nav[aria-label="Listing pages"],
    body:has(#mobile-bottom-nav) nav[aria-label="Booking pages"] {
        scroll-margin-bottom: var(--swiftspot-mobile-bottom-clearance);
    }
}

/* ListSpot wizard: extra spacer when app tab bar stacks under step bar */
body.swiftspot-bottom-nav-visible.listspot-wizard:has(.listspot-navigation) .listspot-navigation-spacer {
    height: calc(
        var(--listspot-mobile-scroll-bottom, calc(var(--listspot-mobile-nav-height, 4.25rem) + env(safe-area-inset-bottom, 0px) + 0.75rem))
        + var(--swiftspot-mobile-bottom-nav-offset)
    );
}

/* ListSpot step bar: stable CSS stack above site tab bar (no VV pin) */
html.swiftspot-listspot-nav-vv-pinned .listspot-navigation {
    bottom: calc(
        var(--swiftspot-mobile-bottom-nav-offset, 0px)
        + var(--swiftspot-browser-chrome-bottom, 0px)
    ) !important;
    transition: none !important;
}

/* Sticky mobile exit bar (desktop top nav is hidden below md).
   Shown on legal for everyone; on About/Contact/FAQ for guests only (see base.html). */
.swiftspot-site-info-mobile-bar {
    position: sticky;
    top: 0;
    z-index: 45;
    border-bottom: 1px solid var(--nav-mobile-bar-border-light);
    background: var(--nav-mobile-bar-surface-light);
    backdrop-filter: blur(var(--nav-shell-blur));
    -webkit-backdrop-filter: blur(var(--nav-shell-blur));
    padding-top: env(safe-area-inset-top, 0px);
}

html.dark .swiftspot-site-info-mobile-bar {
    border-bottom-color: var(--nav-mobile-bar-border-dark);
    background: var(--nav-mobile-bar-surface-dark);
}

.swiftspot-site-info-mobile-bar__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0.625rem 0.75rem;
}

.swiftspot-site-info-mobile-bar__back {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem 0.375rem 0.25rem;
    margin: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: rgb(37 99 235);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
}

html.dark .swiftspot-site-info-mobile-bar__back {
    color: rgb(96 165 250);
}

.swiftspot-site-info-mobile-bar__back:active {
    background: rgb(241 245 249);
}

html.dark .swiftspot-site-info-mobile-bar__back:active {
    background: rgb(30 41 59);
}

.swiftspot-site-info-mobile-bar__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgb(15 23 42);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.dark .swiftspot-site-info-mobile-bar__title {
    color: rgb(241 245 249);
}

.swiftspot-site-info-mobile-bar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
}

/* Global preflight uses img { height: auto }; large brand PNGs can inflate the
   sticky bar unless height is forced (same pattern as stripe-payment-trust.css).
   Light/dark visibility: logo-switch.css */
img.swiftspot-site-info-mobile-bar__logo-img,
.swiftspot-site-info-mobile-bar__logo-img {
    width: auto !important;
    height: 2.5rem !important;
    max-height: 2.5rem !important;
    max-width: 12.5rem !important;
    object-fit: contain;
}

.swiftspot-site-info-mobile-bar__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    justify-content: flex-end;
}

.swiftspot-site-info-mobile-bar__link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgb(71 85 105);
    text-decoration: none;
    white-space: nowrap;
}

html.dark .swiftspot-site-info-mobile-bar__link {
    color: rgb(203 213 225);
}

.swiftspot-site-info-mobile-bar__link--primary {
    color: rgb(37 99 235);
}

html.dark .swiftspot-site-info-mobile-bar__link--primary {
    color: rgb(96 165 250);
}

@media (min-width: 768px) {
    .swiftspot-site-info-mobile-bar {
        display: none;
    }
}

/*
 * Logged-in phone chrome already has #mobile-bottom-nav. The Contact|About|FAQ|
 * Terms|Privacy document footer then sits in the reserved tab-bar gap and looks
 * like a second bar that rides with scroll. Guests keep the in-flow footer;
 * signed-in mobile uses the tab bar (legal links remain in Account / desktop).
 */
@media (max-width: 767px) {
  body.swiftspot-bottom-nav-visible:has(main.site-info-page) > footer.swiftspot-site-info-footer,
  body.swiftspot-bottom-nav-visible.marketing-about-body > footer.swiftspot-site-info-footer {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.swiftspot-bottom-nav-visible:has(#mobile-bottom-nav.mobile-bottom-nav--host-tablet):has(main.site-info-page) > footer.swiftspot-site-info-footer,
  body.swiftspot-bottom-nav-visible.marketing-about-body:has(#mobile-bottom-nav.mobile-bottom-nav--host-tablet) > footer.swiftspot-site-info-footer {
    display: none !important;
  }
}

/* ── Renter mobile brand bar (phone hubs) ─────────────────────────── */
.renter-mobile-brand-bar {
    display: none;
}

@media (max-width: 767px) {
    .renter-mobile-brand-bar {
        display: block;
        position: sticky;
        top: 0;
        z-index: 45;
        background: var(--nav-mobile-bar-surface-light);
        backdrop-filter: blur(var(--nav-shell-blur));
        -webkit-backdrop-filter: blur(var(--nav-shell-blur));
        border-bottom: 1px solid var(--nav-mobile-bar-border-light);
        padding-top: env(safe-area-inset-top, 0px);
    }

    html.dark .renter-mobile-brand-bar,
    .dark .renter-mobile-brand-bar {
        background: var(--nav-mobile-bar-surface-dark);
        border-bottom-color: var(--nav-mobile-bar-border-dark);
    }

    .renter-mobile-brand-bar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 2.75rem;
        padding: 0.375rem 0.875rem;
        gap: 0.75rem;
    }

    .renter-mobile-brand-bar__logo {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        text-decoration: none;
    }

    /* Match site-info / host brand bars: phone-safe height:auto balloons the brand PNG.
     * Light/dark visibility: logo-switch.css — never display:block both variants. */
    img.renter-mobile-brand-bar__logo-img,
    .renter-mobile-brand-bar__logo-img {
        width: auto !important;
        height: 1.75rem !important;
        min-height: 1.75rem !important;
        max-height: 1.75rem !important;
        max-width: 9rem !important;
        object-fit: contain;
    }

    .renter-mobile-brand-bar__account {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: 0;
        border-radius: 9999px;
        background: transparent;
        color: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        overflow: visible;
    }

    .renter-mobile-brand-bar__account:focus-visible {
        outline: 2px solid #0d9488;
        outline-offset: 2px;
    }

    body:has(#renter-mobile-brand-bar) {
        --swiftspot-renter-mobile-brand-bar-offset: calc(2.75rem + env(safe-area-inset-top, 0px));
    }
}

/* Discover: sheet + List FAB sit above the shared bottom tab bar (phone + tablet ≤1023). */
@media (max-width: 1023px) {
    /*
     * Root sets --swiftspot-mobile-bottom-nav-offset: 0px, so var(offset, fallback)
     * never uses the fallback. max(offset, fallback) keeps pre-JS clearance real until
     * mobile-bottom-nav-offset.js measures.
     */
    body.discover-page.swiftspot-bottom-nav-visible,
    body.discover-page:has(#mobile-bottom-nav) {
        --discover-bottom-nav-clearance: calc(
            max(
                var(--swiftspot-mobile-bottom-nav-offset, 0px),
                var(--swiftspot-mobile-bottom-nav-offset-fallback, 4.5rem)
            )
            + var(--swiftspot-browser-chrome-bottom, 0px)
        );
        /* Residual pad only — physical bottom clears the full nav height (incl. safe-area). */
        --discover-sheet-bottom-gap: 0.5rem;
    }

    body.discover-page.swiftspot-bottom-nav-visible #listings-sheet,
    body.discover-page:has(#mobile-bottom-nav) #listings-sheet,
    html body.discover-page.swiftspot-bottom-nav-visible #listings-sheet,
    html body.discover-page:has(#mobile-bottom-nav) #listings-sheet {
        bottom: var(--discover-bottom-nav-clearance) !important;
        height: calc(100vh - var(--discover-bottom-nav-clearance)) !important;
        height: calc(100svh - var(--discover-bottom-nav-clearance)) !important;
        max-height: calc(100vh - var(--discover-bottom-nav-clearance)) !important;
        max-height: calc(100svh - var(--discover-bottom-nav-clearance)) !important;
        padding-bottom: var(--discover-sheet-bottom-gap) !important;
    }

    /* Keep tabs tappable above the list sheet / map chrome */
    body.discover-page #mobile-bottom-nav {
        z-index: calc(var(--z-sheet, 100) + 20) !important;
    }

    /* Auth: account lives in bottom Profile tab. Guest: keep hamburger menu; Sign in is in the tab bar. */
    body.discover-page:not(:has(.mobile-bottom-nav--guest)) .discover-toolbar-account-wrap,
    body.discover-page #discover-topbar-bookings-link,
    body.discover-page #discover-topbar-signin-btn {
        display: none !important;
    }
}