/*
 * Mobil header va menyu paneli (`app\assets\MobileHeaderAsset`), ≤991px.
 *
 * Yopiq: gerb, bayroq ranglaridagi chiziq, akademiya nomi va gamburger —
 * sahifa ustida shaffof, aylantirilganda (`.fixed-header`) to'q ko'k.
 * Ochiq (`.main-header.mh-open`): to'liq ekranli panel — menyu bandlari,
 * pastki menyu strelkalari, shior, ijtimoiy tarmoqlar va tillar.
 *
 * Shablon qoidalari (menu.css, responsive.css) bu yerda bekor qilinadi;
 * desktop (≥992px) ko'rinishi o'zgarmaydi.
 */

.mh-brand,
.mh-panel-foot {
    display: none;
}

@media (max-width: 991.98px) {

    /* ============================================================
       Header
       ============================================================ */

    .main-header,
    .main-header.home {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        padding: 14px 0;
        background: transparent;
        transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
    }

    .main-header.fixed-header,
    .main-header.mh-open {
        padding: 10px 0;
        background: #0a1f4d;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    }

    .main-header.mh-open {
        box-shadow: none;
    }

    /*
     * Shablon JS gamburger bosilganda `.bg-blue` (qora fon) qo'shadi/olib tashlaydi —
     * Esc yoki boshqa yo'l bilan yopilganda u qolib ketadi. Fon faqat panel ochiq
     * yoki sahifa aylantirilgan holatga bog'liq bo'lsin.
     */
    .main-header.bg-blue:not(.mh-open):not(.fixed-header) {
        background: transparent;
        box-shadow: none;
    }

    .main-header .header-upper .container {
        max-width: none;
        padding-right: 20px;
        padding-left: 20px;
    }

    .main-menu .navbar-header {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .main-menu .navbar-header::before,
    .main-menu .navbar-header::after {
        display: none;
    }

    /* ---- Brend ---- */

    .mh-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        color: #fff;
        text-decoration: none;
    }

    .mh-brand:hover,
    .mh-brand:focus-visible {
        color: #fff;
        text-decoration: none;
    }

    .mh-brand__logo {
        flex: 0 0 auto;
        width: 62px;
        height: auto;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
        transition: width 0.25s ease;
    }

    .main-header.fixed-header .mh-brand__logo,
    .main-header.mh-open .mh-brand__logo {
        width: 52px;
    }

    /* Bayroq ranglari: ko'k — qizil — yashil */
    .mh-brand__flag {
        flex: 0 0 4px;
        align-self: stretch;
        width: 4px;
        margin: 6px 2px;
        border-radius: 2px;
        background: linear-gradient(180deg, #1c8fe0 0 44%, #d62a2a 44% 56%, #22a447 56% 100%);
    }

    .mh-brand__name {
        display: flex;
        flex-direction: column;
        min-width: 0;
        color: #fff;
        font-size: 12px;
        font-weight: var(--fw-bold);
        line-height: 1.35;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    .mh-brand__last {
        align-self: center;
        margin-top: 3px;
        font-size: 16px;
        letter-spacing: 0.14em;
    }

    /* ---- Gamburger / X ---- */

    .main-menu .navbar-header .navbar-toggle.mh-toggle {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        float: none;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
    }

    .main-menu .navbar-header .navbar-toggle.mh-toggle:focus-visible {
        outline: 2px solid #3a78ff;
        outline-offset: 2px;
    }

    .main-menu .navbar-header .navbar-toggle .icon-bar {
        width: 34px;
        height: 2.5px;
        margin: 4px 0;
        border-radius: 2px;
        background: #fff;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .main-header.mh-open .navbar-toggle .icon-bar:nth-child(1) {
        transform: translateY(10.5px) rotate(45deg);
    }

    .main-header.mh-open .navbar-toggle .icon-bar:nth-child(2) {
        opacity: 0;
    }

    .main-header.mh-open .navbar-toggle .icon-bar:nth-child(3) {
        transform: translateY(-10.5px) rotate(-45deg);
    }

    /* ============================================================
       Menyu paneli
       ============================================================
       `responsive.css` 768–991px oralig'ida `.navbar-collapse.collapse`
       ni `display: none !important` qiladi — aniqroq selektor bilan
       bekor qilinadi; ko'rinish `visibility`/`opacity` bilan boshqariladi.
       ------------------------------------------------------------ */

    .main-header .main-menu .navbar-collapse.collapse {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        display: flex !important;
        flex-direction: column;
        /* Bootstrap 4 `.navbar-collapse { align-items: center }` ro'yxatni matn kengligigacha qisqartiradi */
        align-items: stretch;
        height: 100vh;
        height: 100dvh;
        padding: 112px 20px 28px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #0a1f4d;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    }

    .main-header.mh-open .main-menu .navbar-collapse.collapse {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.25s ease;
    }

    html.mh-lock,
    html.mh-lock body {
        overflow: hidden;
    }

    /* ---- Bandlar ---- */

    .main-menu .navigation {
        width: 100%;
        max-height: none;
        margin: 0;
        overflow: visible;
        background: transparent;
    }

    .main-menu .navigation > li,
    .main-menu .navigation > li:last-child {
        position: relative;
        float: none;
        padding: 0;
        border-top: 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.22);
    }

    /* Tillar panel pastida — shablon JS qo'shadigan desktop tanlagichi yashiriladi */
    .main-menu .navigation > li.lang-dropdown {
        display: none !important;
    }

    .main-menu .navigation > li > a {
        display: block;
        padding: 20px 64px 20px 4px;
        color: #fff;
        font-size: 18px;
        font-weight: var(--fw-medium);
        line-height: 26px;
    }

    .main-menu .navigation > li.current > a,
    .main-menu .navigation > li > a:hover {
        color: #fff;
    }

    /* Pastki menyu tugmasi (shablon JS qo'shadi): punktir ajratgich + strelka */
    .main-menu .navigation li.dropdown .dropdown-btn {
        top: 0;
        right: 0;
        width: 60px;
        height: 66px;
        border-left: 1px dashed rgba(255, 255, 255, 0.22);
        color: #fff;
        line-height: normal;
    }

    .main-menu .navigation li.dropdown .dropdown-btn span {
        display: none;
    }

    .main-menu .navigation li.dropdown .dropdown-btn::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translate(-50%, -70%) rotate(45deg);
        transition: transform 0.25s ease;
        content: "";
    }

    .main-menu .navigation li.dropdown.mh-sub-open > .dropdown-btn::before {
        transform: translate(-50%, -25%) rotate(225deg);
    }

    /* ---- Pastki menyu ---- */

    .main-menu .navigation li ul {
        margin: 0 0 14px;
        padding: 6px 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
    }

    .main-menu .navigation li ul li {
        padding: 0 16px;
        border: 0;
    }

    .main-menu .navigation li ul li a {
        padding: 10px 4px;
        color: #c9d5ee;
        font-size: 16px;
        font-weight: var(--fw-medium);
        line-height: 22px;
    }

    .main-menu .navigation li ul li a:hover,
    .main-menu .navigation li ul li a:focus-visible {
        color: #fff;
    }

    /* ============================================================
       Panel pasti: tillar (bayroq bilan)
       ============================================================ */

    .mh-panel-foot {
        display: block;
        margin-top: auto;
        padding-top: 30px;
    }

    .mh-langs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mh-langs a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        padding: 8px 6px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        color: #c9d5ee;
        font-size: 15px;
        font-weight: var(--fw-semibold);
        line-height: 20px;
        letter-spacing: 0.03em;
        text-decoration: none;
        transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

    .mh-langs a:hover,
    .mh-langs a:focus-visible {
        border-color: rgba(255, 255, 255, 0.45);
        color: #fff;
        text-decoration: none;
    }

    .mh-langs a.is-active {
        border-color: #3a78ff;
        background: rgba(58, 120, 255, 0.18);
        color: #fff;
    }

    .mh-langs__flag {
        flex: 0 0 auto;
        width: 24px;
        height: 16px;
        border-radius: 3px;
        object-fit: cover;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
    }
}

/* ---- Juda tor telefonlar ---- */
@media (max-width: 400px) {
    .mh-brand {
        gap: 8px;
    }

    .mh-brand__logo {
        width: 52px;
    }

    .mh-brand__name {
        font-size: 10.5px;
    }

    .mh-brand__last {
        font-size: 14px;
    }

    .mh-langs {
        gap: 8px;
    }

    .mh-langs a {
        gap: 6px;
        padding-right: 4px;
        padding-left: 4px;
        font-size: 14px;
    }

    .mh-langs__flag {
        width: 20px;
        height: 14px;
    }
}