/* ==========================================================================
   MODERN HEADER COMPONENT
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

/* Header Container */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    /* Highest - always on top */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 80px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled state */
.main-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    height: 70px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

/* Header Left - Logo */
.header-left {
    flex-shrink: 0;
}

/* Ensure header logo styles override any other .logo styles */
.main-header .logo,
.header-container .logo {
    font-size: 20px;
    font-weight: 700;
    color: #5B6EF5;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
}

.main-header .logo:hover,
.header-container .logo:hover {
    color: #4C5FD5;
}

.logo-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Header Navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    justify-content: center;
}

/* Ensure header nav-link styles override any other nav-link styles */
.main-header .nav-link,
.header-nav .nav-link {
    font-size: 15px;
    font-weight: 500;
    color: #4B5563;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.main-header .nav-link:hover,
.header-nav .nav-link:hover {
    color: #2563EB;
}

.main-header .nav-link.active,
.header-nav .nav-link.active {
    color: #2563EB;
    font-weight: 600;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #2563EB;
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Vendor CTA Link in Header */
.vendor-cta-link {
    color: #667eea;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vendor-cta-link:hover {
    color: #764ba2;
    transform: translateY(-1px);
}

.vendor-cta-link i {
    font-size: 14px;
}

.vendor-cta-link.active {
    color: #667eea;
}

/* Trip Request (Get Offers) CTA — prominent pill in header */
.main-header .nav-link.trip-request-link,
.header-nav .nav-link.trip-request-link {
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 8px 16px;
    border-radius: 22px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.main-header .nav-link.trip-request-link:hover,
.header-nav .nav-link.trip-request-link:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(102, 126, 234, 0.40);
}

/* Suppress the default underline pseudo-element for the pill CTA */
.nav-link.trip-request-link::after { display: none; }

.trip-request-link i { font-size: 13px; }

/* Wishlist nav link */
.wishlist-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wishlist-nav-link .wishlist-text {
    display: inline-block;
}

.wishlist-badge {
    background-color: #5b6ef5;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* Header Right - User Section */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.user-email {
    font-size: 14px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.user-email-icon {
    font-size: 16px;
}

.btn-dashboard,
.btn-logout {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-dashboard {
    background: #5B6EF5;
    color: white;
}

.btn-dashboard:hover {
    background: #4C5FD5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 110, 245, 0.3);
}

.btn-logout {
    background: transparent;
    color: #6B7280;
    border: 1px solid #E5E7EB;
}

.btn-logout:hover {
    background: #F9FAFB;
    color: #374151;
    border-color: #D1D5DB;
}

.btn-login {
    background: #5B6EF5;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-login:hover {
    background: #4C5FD5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 110, 245, 0.3);
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    transition: opacity 0.3s ease;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    background: #1F2937;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* The burger stays put and becomes the close button: the drawer opens directly
   under the header, so an X on the logo's row is the natural way out — and the
   drawer needs no close bar of its own. */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    /* Start below header */
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 70px);
    /* Full viewport height minus header */
    min-height: calc(100vh - 70px);
    /* Ensure minimum height */
    max-height: calc(100vh - 70px);
    /* Prevent overflow */
    background: white;
    z-index: 1100;
    /* Above everything except header */
    padding: 32px 24px 24px;
    /* Reduced top padding, bottom padding for scroll */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Add shadow for depth */
    box-sizing: border-box;
    /* Include padding in height calculation */
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Overlay behind mobile menu */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1099;
    /* Below menu, above content */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

/* .mobile-menu-close styles removed with the drawer's close bar — the header
   burger morphs into the X instead. The JS treats the close button as optional
   (`if (menuClose)`), so nothing else needed changing. */

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px 0;
}

.mobile-nav-link {
    font-size: 18px;
    font-weight: 500;
    color: #1F2937;
    text-decoration: none;
    padding: 10px 20px;
    margin-bottom: 0;
    border-bottom: 1px solid #E5E7EB;
    transition: color 0.3s ease;
}

.mobile-nav-link.wishlist-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: #2563EB;
}

/* Small gap before Login/Register section */
.mobile-nav .vendor-cta-link {
    margin-bottom: 5px;
}

/* CRITICAL: Remove gap between Become a Vendor and Login/Register */
.mobile-user-section {
    margin-top: 0 !important;
    margin-bottom: 10px;
    padding: 5px 20px;
    border-top: 2px solid #E5E7EB;
}

.mobile-user-email {
    font-size: 16px;
    color: #6B7280;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-user-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 0;
}

.mobile-user-actions .btn-dashboard,
.mobile-user-actions .btn-logout {
    flex: 1;
    width: auto;
    padding: 10px 16px;
    text-align: center;
    justify-content: center;
}

.mobile-user-actions .mobile-nav-link,
.mobile-user-actions .btn-login {
    flex: 1;
    padding: 10px 16px;
    margin: 0;
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet */
@media (max-width: 992px) {
    .header-container {
        padding: 0 24px;
        gap: 24px;
    }

    .header-nav {
        gap: 32px;
    }

    .nav-link {
        font-size: 14px;
    }
}

/* Mobile */
@media (max-width: 768px) {

    /* Ensure body/html don't add padding/margin to header */
    body {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .main-header {
        height: 70px;
        margin-left: 0 !important;
        /* Remove any left margin */
        margin-right: 0 !important;
        /* Remove any right margin */
        padding-left: 0 !important;
        /* Remove any left padding */
        padding-right: 0 !important;
        /* Remove any right padding */
        width: 100% !important;
        /* Full width */
        max-width: 100% !important;
        /* Full width */
        left: 0 !important;
        /* Ensure starts from left edge */
        right: 0 !important;
        /* Ensure extends to right edge */
    }

    .header-container {
        padding: 0 20px;
        gap: 16px;
        justify-content: space-between !important;
        /* Space between logo and hamburger */
        align-items: center !important;
        /* Vertically center items */
        max-width: 100% !important;
        /* Full width on mobile */
        margin-left: 0 !important;
        /* Remove auto margin */
        margin-right: 0 !important;
        /* Remove auto margin */
        width: 100% !important;
        /* Full width */
    }

    .logo {
        font-size: 20px;
    }

    /* Hide desktop nav and user section */
    .header-nav,
    .header-right {
        display: none;
    }

    /* Hide language switcher on mobile (it's inside header-right) */
    .language-switcher {
        display: none;
    }

    /* Show mobile menu toggle - Force visibility */
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: auto;
        /* Push hamburger to the right */
        position: relative;
        z-index: 1002;
        width: 28px !important;
        height: 28px !important;
    }

    /* Open or closed, the toggle stays in place — it just morphs burger ↔ X */
    .mobile-menu-toggle.active,
    .mobile-menu-toggle:not(.active) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure language switcher is hidden on mobile */
    .header-right .language-switcher {
        display: none !important;
    }

    /* Show mobile menu */
    .mobile-menu {
        display: block;
    }

    /* Prevent white space when hamburger is hidden
       Container only takes space needed for logo, not full width */
    .header-left {
        flex-shrink: 0;
    }

    /* When menu is open and hamburger is hidden, ensure container doesn't leave white space */
    body.mobile-menu-open .header-container {
        justify-content: flex-start !important;
        max-width: 100% !important;
        /* Remove max-width constraint */
        margin-left: 0 !important;
        /* Remove auto margin */
        margin-right: 0 !important;
        /* Remove auto margin */
        width: 100% !important;
        /* Full width */
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .header-container {
        padding: 0 16px;
    }

    .logo {
        font-size: 18px;
    }

    .mobile-menu {
        padding: 60px 24px 24px;
        /* Reduced top padding on small screens */
        height: calc(100vh - 70px);
        /* Ensure full height */
        min-height: calc(100vh - 70px);
        max-height: calc(100vh - 70px);
    }

    .mobile-nav-link {
        font-size: 16px;
    }
}

/* ==========================================================================
   ACCESSIBILITY — Focus styles
   Outline shown ONLY on keyboard navigation (:focus-visible).
   Mouse/touch clicks produce no visible outline anywhere in the header.
   ========================================================================== */

/* Remove outline on mouse/touch for ALL header interactive elements */
.logo:focus,
.btn-dashboard:focus,
.btn-logout:focus,
.btn-login:focus,
.mobile-menu-toggle:focus,
.mobile-menu-close:focus,
.mobile-nav-link:focus,
.mobile-menu-language-buttons .lang-btn:focus,
.main-header .nav-link:focus,
.header-nav .nav-link:focus {
    outline: none;
}

/* Show outline only when navigating via keyboard (:focus-visible) */
.logo:focus-visible,
.btn-dashboard:focus-visible,
.btn-logout:focus-visible,
.btn-login:focus-visible,
.mobile-menu-toggle:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-nav-link:focus-visible,
.mobile-menu-language-buttons .lang-btn:focus-visible {
    outline: 3px solid #2563EB;
    outline-offset: 2px;
}

/* Skip link for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #1F2937;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
}

.skip-link:focus {
    top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .main-header,
    .nav-link,
    .btn-dashboard,
    .btn-logout,
    .btn-login,
    .mobile-menu-toggle span,
    .mobile-menu {
        transition: none;
    }
}

/* ==========================================================================
   MOBILE LANGUAGE SWITCHER
   ========================================================================== */

/* Language section container - compact for single-screen fit */
.mobile-menu-language {
    padding: 10px 20px;
    background-color: #f9fafb;
    border-radius: 8px;
    margin: 0 10px 5px 10px;
}

/* Language title with icon */
.mobile-menu-language-title {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-menu-language-title i {
    color: #3b82f6;
    font-size: 16px;
}

/* Language buttons container */
.mobile-menu-language-buttons {
    display: flex;
    gap: 5px;
    justify-content: space-between;
}

/* Individual language button - touch-friendly (min 44px) */
.mobile-menu-language-buttons .lang-btn {
    flex: 1;
    min-height: 44px;
    padding: 10px 6px;
    text-align: center;
    background-color: white;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-language-buttons .lang-btn:hover {
    background-color: #eff6ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

.mobile-menu-language-buttons .lang-btn.active {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* Small screens optimization */
@media (max-width: 360px) {
    .mobile-menu-language-buttons .lang-btn {
        font-size: 12px;
        padding: 8px 4px;
    }
}

/* Hide on desktop - desktop has its own language switcher */
@media (min-width: 768px) {
    .mobile-menu-language {
        display: none;
    }
}

/* ==========================================================================
   HEADER REDESIGN — navy / teal / warm orange (GeoTravelMarket brand)
   Based on header/Header Redesign.dc.html
   ========================================================================== */

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

/* ---- Type ---- */
.main-header { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.main-header .logo,
.header-container .logo { font-family: 'Sora', 'Plus Jakarta Sans', sans-serif; color: #12293f; }
.main-header .logo:hover,
.header-container .logo:hover { color: #2d7a8c; }
.main-header .logo .logo-accent { color: #667eea; }

/* ---- Tier 1: light utility strip ---- */
.main-header--tiered .header-topbar {
    background: #f5f8fc;
    border-bottom: 1px solid #e7ebf0;
    overflow: visible;
    opacity: 1;
    transition: opacity 0.25s ease, border-color 0.3s ease;
}
/* Fixed height so the row content is clipped (not squished) as its grid track shrinks on scroll */
.main-header--tiered .header-topbar .header-container { height: 48px; }

.topbar-link { color: #54637a; }
.topbar-link:hover { color: #12293f; }

.topbar-divider {
    width: 1px;
    height: 18px;
    background: #dde5ee;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Wishlist link (Tier 1) — pill with corner badge */
.topbar-link.wishlist-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #54637a;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 500;
}
.topbar-link.wishlist-nav-link:hover {
    color: #12293f;
}
.topbar-link.wishlist-nav-link i {
    font-size: 15px;
    transition: transform 0.2s ease;
}
/* Nudge the heart out from under the count badge so its shape stays readable */
.topbar-link.wishlist-nav-link.has-items i {
    transform: translate(-5px, 5px);
}
.topbar-link.wishlist-nav-link .wishlist-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    width: auto;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff6b35;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border: 2px solid #f5f8fc;
    box-sizing: content-box;
}

/* Wishlist count badge */
.wishlist-badge { background-color: #ff6b35; }

/* Log in (text) + Sign up (solid navy) */
.btn-login { background: #1e3a5f; border-radius: 999px; padding: 7px 16px; }
.btn-login:hover { background: #2d7a8c; box-shadow: 0 4px 12px rgba(45, 122, 140, 0.3); }

/* Dashboard button (logged-in state) */
.btn-dashboard { background: #1e3a5f; border-radius: 999px; }
.btn-dashboard:hover { background: #2d7a8c; box-shadow: 0 4px 12px rgba(45, 122, 140, 0.3); }

/* ---- Tier 2: white main nav ---- */
.main-header--tiered .header-mainbar { background: #ffffff; border-bottom: 1px solid #e7ebf0; transition: background 0.3s ease; }
.main-header--tiered .header-mainbar .header-container { height: 100%; }

.main-header .nav-link,
.header-nav .nav-link { color: #54637a; font-weight: 500; border-radius: 10px; padding: 8px 16px; }
.main-header .nav-link:hover,
.header-nav .nav-link:hover { color: #12293f; background: #f3f6fa; }
.main-header .nav-link.active,
.header-nav .nav-link.active { color: #12293f; font-weight: 700; }

/* Animated underline -> brand orange */
.main-header--tiered .nav-link::after {
    background: #ff6b35;
    height: 2.5px;
    bottom: 2px;
    left: 16px;
    width: 0;
}
.main-header--tiered .nav-link:hover::after,
.main-header--tiered .nav-link.active::after {
    width: calc(100% - 32px);
}

/* ---- "Become a Vendor" -> indigo primary pill (most prominent CTA) ---- */
.vendor-cta-link,
.header-nav .nav-link.vendor-cta-link,
.main-header .nav-link.vendor-cta-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: 600;
    padding: 10px 20px;
    border: 1.5px solid transparent;
    border-radius: 11px;
    box-shadow: 0 3px 8px -2px rgba(102, 126, 234, 0.35);
}
.vendor-cta-link:hover,
.header-nav .nav-link.vendor-cta-link:hover,
.main-header .nav-link.vendor-cta-link:hover {
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    filter: brightness(1.04);
    box-shadow: 0 4px 10px -2px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}
.main-header .nav-link.vendor-cta-link.active,
.header-nav .nav-link.vendor-cta-link.active { color: #fff; }
.vendor-cta-link i { color: #fff; }
.vendor-cta-link::after { display: none; }

/* ---- "Get Trip Offers" -> outline pill (teal), secondary CTA ---- */
.main-header .nav-link.trip-request-link,
.header-nav .nav-link.trip-request-link {
    color: #1e3a5f;
    background: transparent;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 11px;
    box-shadow: none;
    border: 1.5px solid #d6deea;
}
.main-header .nav-link.trip-request-link:hover,
.header-nav .nav-link.trip-request-link:hover {
    color: #2d7a8c;
    background: #f3fafb;
    border-color: #2d7a8c;
    box-shadow: none;
    transform: none;
}
.trip-request-link i { color: #2d7a8c; }

/* ---- Scrolled: compact blurred bar ---- */
.main-header--tiered.scrolled {
    box-shadow: 0 2px 12px rgba(18, 41, 63, 0.06);
}
.main-header--tiered.scrolled .header-topbar {
    overflow: hidden;
    opacity: 0;
    border-bottom-color: transparent;
    pointer-events: none;
}
.main-header--tiered.scrolled .header-mainbar {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.main-header--tiered.scrolled .header-mainbar .header-container {
    gap: 24px;
    justify-content: space-between;
}

/* Condensed logo — fades/expands in only when scrolled */
.main-header .logo.header-logo-condensed {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 10px;
    max-width: 0;
    opacity: 0;
    margin-right: 0;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease 0.05s, margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-header--tiered.scrolled .logo.header-logo-condensed {
    max-width: 220px;
    opacity: 1;
    margin-right: 8px;
    pointer-events: auto;
}
.main-header--tiered.scrolled .logo.header-logo-condensed span {
    font-size: 18px;
}
.main-header--tiered.scrolled .logo.header-logo-condensed .logo-icon {
    width: 26px;
    height: 26px;
}
.main-header--tiered.scrolled .header-mainbar .header-nav {
    flex: 1;
    gap: 2px;
    justify-content: center;
}
.main-header--tiered.scrolled .header-mainbar .header-nav .nav-link {
    padding: 7px 13px;
    font-size: 14.5px;
}
.main-header--tiered.scrolled .header-nav-cta {
    display: none;
}

/* Condensed utilities (lang + wishlist + trip CTA) in mainbar on scroll */
.header-mainbar-extras {
    display: none;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.main-header--tiered.scrolled .header-mainbar-extras {
    display: flex;
}

/* Mobile hamburger + drawer intentionally use the ORIGINAL base styles
   (blue #2563EB accents, 18px line-separated links). The redesign's mobile
   overrides were reverted per user request; desktop redesign is unaffected. */

/* Compact the mobile drawer so every item (incl. the language switcher)
   fits on a single screen without scrolling. */
@media (max-width: 768px) {
    .mobile-menu { padding-top: 22px; }
    .mobile-nav { gap: 6px; padding: 4px 0; }
    .mobile-nav-link { padding: 11px 20px; }
    .mobile-menu-language-buttons { margin-top: 14px; }
}

/* Focus outlines -> teal */
.logo:focus-visible,
.btn-dashboard:focus-visible,
.btn-logout:focus-visible,
.btn-login:focus-visible,
.mobile-menu-toggle:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-nav-link:focus-visible,
.mobile-menu-language-buttons .lang-btn:focus-visible,
.main-header .nav-link:focus-visible,
.header-nav .nav-link:focus-visible { outline-color: #2d7a8c; }

/* ==========================================================================
   TWO-TIER HEADER — structural scaffolding only.
   Visual theme (colours, backgrounds, badge, scroll behaviour) lives in the
   "HEADER REDESIGN" block above. These rules only provide the flex layout the
   redesign relies on, plus the mobile collapse.
   ========================================================================== */
/* The two tiers are grid rows so their heights can be smoothly interpolated
   on scroll (grid-template-rows animates as a single, GPU-friendly track
   resize instead of two independently-timed height/max-height transitions,
   which used to look like a jerky "snap"). */
.main-header--tiered,
.main-header--tiered.scrolled {
    height: auto;
    display: grid;
    grid-template-rows: 48px 64px;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-header--tiered.scrolled {
    grid-template-rows: 0px 62px;
}

.main-header--tiered .header-topbar .header-container {
    justify-content: space-between;
}
.main-header--tiered .header-mainbar .header-container {
    justify-content: space-between;
    gap: 24px;
}

.header-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
}

.main-header--tiered .header-mainbar .header-nav {
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: 22px;
}
.header-nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .main-header--tiered .header-mainbar .header-nav { gap: 16px; }
    .header-topbar-right { gap: 12px; }
}

/* Mobile: single utility row + hamburger; all links live in the mobile drawer. */
@media (max-width: 768px) {
    .main-header--tiered,
    .main-header--tiered.scrolled {
        display: block;
        height: 70px;
    }
    .main-header--tiered .header-mainbar {
        display: none !important;
    }
    .main-header--tiered .header-topbar,
    .main-header--tiered.scrolled .header-topbar {
        display: block !important;
        border-bottom: none;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .main-header--tiered .header-topbar .header-container {
        height: 70px;
        gap: 10px;
    }
    .header-topbar-right {
        display: none;
    }
}

/* ==========================================================================
   MOBILE DRAWER — FULL REDESIGN (2026-07-19)
   Layout: fixed brand head + scrollable nav + pinned footer.
   Guarantees the CTA, account actions and language switcher are ALWAYS
   visible on any phone height (short screens scroll the nav, not the footer).
   This block is intentionally last so it overrides the earlier drawer rules.
   ========================================================================== */
@media (max-width: 768px) {
    /* Kept displayed and hidden with visibility/opacity/transform instead of
       `display: none`, so BOTH opening and closing can animate — a display
       switch cancels transitions, which is why the drawer used to just pop in. */
    .mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px); /* track mobile browser chrome */
        min-height: 0;
        max-height: none;
        padding: 0;                  /* spacing handled by inner sections */
        background: #ffffff;
        overflow: hidden;            /* only the inner nav scrolls */
        box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-100%);
        transition:
            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.26s ease,
            visibility 0s linear 0.34s;
    }

    .mobile-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition:
            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.2s ease,
            visibility 0s;
    }

    /* Links fan in behind the panel so the open feels alive rather than flat */
    .mobile-menu.active .mobile-nav-link {
        animation: mobileNavLinkIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .mobile-menu.active .mobile-nav-link:nth-child(1) { animation-delay: 0.06s; }
    .mobile-menu.active .mobile-nav-link:nth-child(2) { animation-delay: 0.09s; }
    .mobile-menu.active .mobile-nav-link:nth-child(3) { animation-delay: 0.12s; }
    .mobile-menu.active .mobile-nav-link:nth-child(4) { animation-delay: 0.15s; }
    .mobile-menu.active .mobile-nav-link:nth-child(5) { animation-delay: 0.18s; }
    .mobile-menu.active .mobile-nav-link:nth-child(6) { animation-delay: 0.21s; }
    .mobile-menu.active .mobile-nav-link:nth-child(7) { animation-delay: 0.24s; }
    .mobile-menu.active .mobile-nav-link:nth-child(8) { animation-delay: 0.27s; }
    .mobile-menu.active .mobile-nav-link:nth-child(9) { animation-delay: 0.30s; }
    .mobile-menu.active .mobile-nav-link:nth-child(n+10) { animation-delay: 0.33s; }

    @keyframes mobileNavLinkIn {
        from { opacity: 0; transform: translateX(-14px); }
        to { opacity: 1; transform: translateX(0); }
    }

    /* --- Scrollable navigation --- */
    .mobile-nav {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 10px 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .mobile-nav-link {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 16px;
        font-weight: 600;
        color: #1F2937;
        padding: 13px 14px;
        margin: 0;
        border: none;
        border-bottom: none;
        border-radius: 12px;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .mobile-nav-link i {
        width: 22px;
        font-size: 16px;
        text-align: center;
        color: #9AA5B1;
        transition: color 0.2s ease;
        flex-shrink: 0;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link:active,
    .mobile-nav-link.active {
        background: #EFF4FF;
        color: #2563EB;
    }

    .mobile-nav-link:hover i,
    .mobile-nav-link:active i,
    .mobile-nav-link.active i {
        color: #2563EB;
    }

    /* "Get Trip Offers" stands out as the primary action */
    .mobile-nav-link.trip-request-link {
        color: #2563EB;
        background: #F1F5FF;
    }
    .mobile-nav-link.trip-request-link i {
        color: #2563EB;
    }

    /* --- Pinned footer --- */
    .mobile-menu-footer {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #EEF1F5;
        background: #ffffff;
        box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.06);
    }

    .mobile-cta-vendor {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 700;
        color: #ffffff;
        text-decoration: none;
        background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .mobile-cta-vendor:active {
        transform: translateY(1px);
        box-shadow: 0 3px 10px rgba(37, 99, 235, 0.24);
    }

    .mobile-auth-row {
        display: flex;
        gap: 10px;
    }
    .mobile-auth-row > a {
        flex: 1;
        text-align: center;
        padding: 12px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .mobile-auth-primary {
        background: #2563EB;
        color: #ffffff;
        border: 1.5px solid #2563EB;
    }
    .mobile-auth-primary:active {
        background: #1D4ED8;
    }
    .mobile-auth-secondary {
        background: #ffffff;
        color: #374151;
        border: 1.5px solid #D8DEE7;
    }
    .mobile-auth-secondary:active {
        background: #F3F4F6;
    }

    .mobile-menu-footer .mobile-menu-language-buttons {
        margin: 2px 0 0;
        gap: 8px;
    }
    .mobile-menu-footer .mobile-menu-language-buttons .lang-btn {
        min-height: 40px;
    }
}

/* Extra-short screens: tighten the nav so the footer keeps its full size */
@media (max-width: 768px) and (max-height: 700px) {
    .mobile-nav { gap: 1px; padding: 8px 12px; }
    .mobile-nav-link { padding: 11px 14px; }
}

/* Hide the floating chat bubble while the mobile burger menu is open
   (header.js toggles body.mobile-menu-open). Keeps the drawer clean. */
@media (max-width: 768px) {
    body.mobile-menu-open #gtm-chat-widget {
        display: none !important;
    }
}

/* ==========================================================================
   FX TICKER — official NBG rates in the top utility bar
   ========================================================================== */
.fx-ticker {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 560px;
    margin: 0 12px;
}

.fx-ticker-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 0 4px 0 2px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.fx-ticker-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #4c5fd5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fx-ticker-label i {
    font-size: 11px;
}

.fx-ticker-date {
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #5a6b9a;
    opacity: 0.9;
}

.fx-ticker-track {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.fx-ticker-seq {
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: fxTickerScroll 28s linear infinite;
}

.fx-ticker-link:hover .fx-ticker-seq,
.fx-ticker-link:focus-visible .fx-ticker-seq {
    animation-play-state: paused;
}

/* Each rate is its own pill: the flag gives it an anchor the eye can catch as
   the strip moves, which plain text separated by rules never did. */
.fx-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 5px;
    padding: 3px 10px 3px 4px;
    border: 1px solid #e6ecf5;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff 0%, #f6f8fd 100%);
    box-shadow: 0 1px 3px rgba(18, 41, 63, 0.05);
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    color: #12293f;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fx-ticker-link:hover .fx-ticker-item {
    border-color: #d3dcec;
    box-shadow: 0 2px 6px rgba(18, 41, 63, 0.09);
}

.fx-ticker-flag-wrap {
    display: inline-flex;
    flex-shrink: 0;
    width: 21px;
    height: 15px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(18, 41, 63, 0.12), 0 1px 2px rgba(18, 41, 63, 0.14);
}

.fx-ticker-flag {
    display: block;
    width: 100%;
    height: 100%;
}

.fx-ticker-pair {
    color: #54637a;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fx-ticker-eq {
    color: #9aa7b8;
    font-weight: 500;
}

.fx-ticker-value {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: #1e3a5f;
}

.fx-ticker-gel {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #5a6ee0;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(102, 126, 234, 0.11);
}

@keyframes fxTickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .fx-ticker-seq {
        animation: none;
    }
}

@media (max-width: 1100px) {
    .fx-ticker {
        max-width: 380px;
    }

    .fx-ticker-label .fx-ticker-full {
        display: none;
    }
}

@media (max-width: 768px) {
    .fx-ticker {
        display: none;
    }

    .main-header--tiered .header-topbar .header-container {
        gap: 10px;
    }

    .mobile-menu-toggle {
        flex-shrink: 0;
        margin-left: auto;
    }
}