/* header-mobile.css - mobile header (loads last after style.css / deferred)
   Fixed px only (no vw). Layout: [edge] logo ... [lang][8][country][16][burger] [edge]
   Language: sealed pill + bottom tongue (not side caret). */

.nav-menu-head { display: none; }

@media (max-width: 767px),
screen and (min-width: 769px) and (max-width: 1280px) and (max-height: 450px) and (min-height: 240px) and (hover: none) {

    :root {
        --header-h: 56px;
        --hdr-edge: 16px;
        --hdr-gap-logo-lang: 14px;
        --hdr-gap-lc: 8px;
        --hdr-gap-cb: 16px;
        --hdr-country-max: 8.5rem;
        --hdr-chip-h: 36px;
        --hdr-burger: 40px;
        --hdr-flag-w: 18px;
        --hdr-flag-h: 13px;
        --hdr-logo-h: 26px;
        --hdr-logo-max: 140px;
    }

    .header {
        overflow: visible !important;
        z-index: 10060 !important;
    }

    .header .nav-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: var(--header-h) !important;
        min-height: var(--header-h) !important;
        padding-left: max(
            var(--hdr-edge),
            env(safe-area-inset-left, 0px),
            var(--tg-safe-area-inset-left, 0px),
            var(--tg-content-safe-area-inset-left, 0px)
        ) !important;
        padding-right: max(
            var(--hdr-edge),
            env(safe-area-inset-right, 0px),
            var(--tg-safe-area-inset-right, 0px),
            var(--tg-content-safe-area-inset-right, 0px)
        ) !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .header .nav-container > .nav-menu {
        flex: 0 0 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        order: 99 !important;
    }

    .header .nav-container > .nav-actions {
        display: contents !important;
    }

    .header .nav-actions > .desktop-only-auth,
    .header .nav-actions > .user-menu,
    .header .nav-actions > a.auth-btn,
    .header .nav-actions > a.btn.auth-btn,
    .header .nav-actions > .notif-bell-wrapper,
    .header .nav-actions > .header-favorites-nav,
    .header .nav-actions > a.header-icon-btn,
    .header .nav-actions > script,
    .header .nav-container > script {
        display: none !important;
    }

    .header .nav-container > .logo,
    .header a.logo {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: var(--hdr-logo-max) !important;
        min-width: 0 !important;
        margin: 0 var(--hdr-gap-logo-lang) 0 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
    .header .logo-img,
    .header a.logo .logo-img {
        display: block !important;
        height: var(--hdr-logo-h) !important;
        width: auto !important;
        max-width: var(--hdr-logo-max) !important;
        max-height: var(--hdr-logo-h) !important;
        object-fit: contain !important;
        object-position: left center !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .header a.logo:hover .logo-img {
        transform: none !important;
        opacity: 0.92 !important;
    }

    /* ── Language pill (sealed) ── */
    .header .nav-container .language-switcher,
    .header .nav-actions .language-switcher,
    .header #languageSwitcher {
        order: 2 !important;
        position: relative !important;
        flex: 0 0 auto !important;
        margin: 0 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--hdr-chip-h) !important;
        min-height: var(--hdr-chip-h) !important;
        max-height: var(--hdr-chip-h) !important;
        padding: 2px !important;
        border: 1.5px solid rgba(30, 64, 175, 0.16) !important;
        border-radius: 999px !important;
        background: rgba(30, 64, 175, 0.07) !important;
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        font-size: 11px !important;
        line-height: 1 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        z-index: 2 !important;
    }

    .header .nav-container .language-switcher .lang-btn,
    .header .language-switcher a.lang-btn,
    .header #languageSwitcher .lang-btn {
        flex: 0 0 auto !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 4.5rem !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        gap: 5px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0.02em !important;
        border: none !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .header .nav-container .language-switcher .lang-btn.active,
    .header .nav-container .language-switcher .lang-btn.active:first-child,
    .header .nav-container .language-switcher .lang-btn.active:last-child,
    .header .nav-container .language-switcher a.lang-btn.active,
    .header .nav-container .language-switcher .lang-btn.lang-secondary.active,
    .header #languageSwitcher .lang-btn.active,
    .header #languageSwitcher .lang-btn.active:first-child,
    .header #languageSwitcher .lang-btn.active:last-child {
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 8px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        top: 0 !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .header .nav-container .language-switcher .lang-btn span,
    .header #languageSwitcher .lang-btn span {
        display: inline-block !important;
        line-height: 1 !important;
        max-width: 2.4rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .header .nav-container .language-switcher .lang-btn:not(.active) span,
    .header #languageSwitcher .lang-btn:not(.active) span {
        display: none !important;
    }
    .header .nav-container .language-switcher .lang-btn:not(.active),
    .header #languageSwitcher .lang-btn:not(.active) {
        padding: 0 7px !important;
        max-width: 2.4rem !important;
    }

    /* Same order as EN: flag then code (HTML may put span first for RU) */
    .header .nav-container .language-switcher .lang-btn.lang-secondary,
    .header #languageSwitcher .lang-btn.lang-secondary {
        flex-direction: row-reverse !important;
    }

    .header .nav-container .language-switcher .lang-flag,
    .header .nav-container .language-switcher .lang-btn .lang-flag,
    .header .nav-container .language-switcher img.lang-flag,
    .header #languageSwitcher .lang-flag,
    .header #languageSwitcher img.lang-flag {
        width: var(--hdr-flag-w) !important;
        height: var(--hdr-flag-h) !important;
        min-width: var(--hdr-flag-w) !important;
        min-height: var(--hdr-flag-h) !important;
        max-width: var(--hdr-flag-w) !important;
        max-height: var(--hdr-flag-h) !important;
        flex: 0 0 var(--hdr-flag-w) !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 2px !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* Bottom tongue under pill */
    .header .nav-container .language-switcher .lang-expand-btn,
    .header #languageSwitcher .lang-expand-btn {
        position: absolute !important;
        bottom: -11px !important;
        left: 50% !important;
        top: auto !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        flex: none !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 11px !important;
        min-height: 11px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 0 8px 8px !important;
        background: rgba(30, 64, 175, 0.14) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: auto !important;
        z-index: 3 !important;
        box-shadow: 0 1px 2px rgba(30, 64, 175, 0.12) !important;
    }
    .header .nav-container .language-switcher .lang-expand-btn:active,
    .header .nav-container .language-switcher .lang-expand-btn:focus,
    .header #languageSwitcher .lang-expand-btn:active,
    .header #languageSwitcher .lang-expand-btn:focus {
        transform: translateX(-50%) !important;
        bottom: -11px !important;
        background: rgba(30, 64, 175, 0.28) !important;
        outline: none !important;
    }
    .header .nav-container .language-switcher .lang-expand-btn svg,
    .header #languageSwitcher .lang-expand-btn svg {
        width: 10px !important;
        height: 10px !important;
        display: block !important;
        flex: none !important;
    }
    .header .nav-container .language-switcher.open .lang-expand-btn svg,
    .header #languageSwitcher.open .lang-expand-btn svg {
        transform: rotate(180deg) !important;
    }
    .header .nav-container .language-switcher .lang-dropdown-menu,
    .header #languageSwitcher .lang-dropdown-menu {
        top: calc(100% + 14px) !important;
        right: 0 !important;
        left: auto !important;
        min-width: 168px !important;
        z-index: 10080 !important;
        pointer-events: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
    }

    /* ── Country chip ── */
    .header .nav-container .country-dropdown,
    .header .nav-actions .country-dropdown,
    .header #countryDropdown {
        order: 3 !important;
        position: relative !important;
        flex: 0 1 var(--hdr-country-max) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: var(--hdr-country-max) !important;
        margin: 0 0 0 var(--hdr-gap-lc) !important;
        display: flex !important;
        z-index: 2 !important;
    }
    .header .country-dropdown-btn,
    .header #countryDropdownBtn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--hdr-chip-h) !important;
        min-height: var(--hdr-chip-h) !important;
        margin: 0 !important;
        padding: 0 10px !important;
        gap: 6px !important;
        border: 1.5px solid rgba(30, 64, 175, 0.18) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .header .country-dropdown-btn .globe-icon {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
    }
    .header .country-dropdown-btn .country-icon-container {
        width: 20px !important;
        height: 14px !important;
        min-width: 20px !important;
        flex: 0 0 20px !important;
        overflow: hidden !important;
    }
    .header .country-dropdown-btn .country-icon-container img,
    .header .country-dropdown-btn .country-icon-container .flag-icon {
        width: 20px !important;
        height: 14px !important;
        object-fit: cover !important;
        display: block !important;
    }
    .header .country-dropdown .country-name {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .header .country-dropdown-btn .dropdown-arrow {
        display: block !important;
        width: 11px !important;
        height: 11px !important;
        min-width: 11px !important;
        flex: 0 0 11px !important;
    }
    .header .country-dropdown-menu {
        z-index: 10080 !important;
        min-width: min(220px, 78vw) !important;
        max-height: min(70vh, 420px) !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
    }

    .header .nav-container .mobile-menu-toggle,
    .header .nav-actions .mobile-menu-toggle,
    .header .nav-container > .nav-actions > .mobile-menu-toggle,
    .header button.mobile-menu-toggle {
        order: 4 !important;
        flex: 0 0 var(--hdr-burger) !important;
        width: var(--hdr-burger) !important;
        min-width: var(--hdr-burger) !important;
        max-width: var(--hdr-burger) !important;
        height: var(--hdr-burger) !important;
        margin: 0 0 0 var(--hdr-gap-cb) !important;
        margin-left: var(--hdr-gap-cb) !important;
        margin-right: 0 !important;
        padding: 9px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .header .mobile-menu-toggle span {
        width: 22px !important;
        height: 2px !important;
        margin: 0 !important;
    }

    .header:has(.nav-menu.active) { z-index: 1100 !important; }

    .nav-menu .nav-menu-head {
        display: flex !important;
        align-items: center;
        height: 56px;
        padding: 0 1.25rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        position: sticky;
        top: 0;
        background: var(--z-surface-white, #fff);
        z-index: 2;
        box-sizing: border-box;
    }
    .nav-menu .nav-menu-head__brand {
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 1.02rem;
        letter-spacing: -0.02em;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .nav-menu .nav-link {
        padding: 0.95rem 1.25rem !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.045) !important;
        position: relative;
    }
    .nav-menu .nav-link.active {
        color: var(--color-primary) !important;
        background: rgba(73, 98, 117, 0.05) !important;
    }
    .nav-menu .nav-link::after { display: none !important; }
    .nav-menu .nav-link.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 9px;
        bottom: 9px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--color-primary);
    }
    .nav-menu .nav-link.nav-link--requests {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
    }
    .nav-dropdown > .nav-link { padding-right: 3.25rem !important; }

    .mobile-only-auth > .nav-link {
        margin: 12px 1.25rem 4px !important;
        padding: 0.7rem 1rem !important;
        background: var(--gradient-primary) !important;
        color: #fff !important;
        border-radius: 12px !important;
        justify-content: center !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        border-bottom: none !important;
        width: auto !important;
    }
    .mobile-only-auth > .nav-link.active::before { display: none; }
}

@media (max-width: 390px) {
    :root {
        --hdr-edge: 14px;
        --hdr-gap-lc: 6px;
        --hdr-gap-cb: 14px;
        --hdr-country-max: 7.25rem;
        --hdr-flag-w: 16px;
        --hdr-flag-h: 12px;
        --hdr-logo-max: 120px;
    }
}

@media (max-width: 340px) {
    :root {
        --hdr-edge: 12px;
        --hdr-gap-lc: 5px;
        --hdr-gap-cb: 12px;
        --hdr-country-max: 6.5rem;
        --hdr-flag-w: 16px;
        --hdr-flag-h: 12px;
        --hdr-logo-max: 100px;
    }
}