/* =========================================================
   Pediatric Care — umumiy navigatsiya

   Saytda uchta qobiq bor va ularning header markupi har xil:
     · ommaviy  — .header      (index, section, content)
     · v2       — .v2-header   (malaka, kabinet, login, obuna, admin)
     · standart — .standards-header (davolash-standartlari, standart,
                  farmakologiya, kitob)

   Mobil navigatsiya esa uchalasida ham bir xil bo'lishi kerak. Shuning
   uchun umumiy qismlar — mobil boshqaruvlar, tezkor plitkalar, drawer va
   uning harakati — faqat shu faylda yashaydi. Qobiqqa xos ranglar (ommaviy
   drawer qorong'i, v2/standart drawer mavzuga ergashadi) o'z fayllarida
   qoladi: menyu o'zi tushayotgan headerga o'xshab turishi kerak.

   Bu fayl style.css, paid-malaka-v2.css va standards.css dan KEYIN
   ulanadi — ulardagi qoidalarni bosib o'tishi kerak.

   Spec: docs/superpowers/specs/2026-07-28-nav-birlashtirish-design.md

   Animatsiya — Emil Kowalski qoidalari bo'yicha:
     · faqat `transform` va `opacity` (kompozitor bajaradi, layout
       qayta hisoblanmaydi, shuning uchun silliq)
     · `cubic-bezier(.32,.72,0,1)` — Vaul'dagi easing: tez boshlanib
       oxirida yumshoq to'xtaydi, shuning uchun "tirik" his qiladi
     · ochilish (260ms) yopilishdan (180ms) sekinroq — yopilish
       darhol bo'lgani yaxshi, foydalanuvchi kutib turmaydi
     · `transform-origin: top` — panel header'dan "o'sib" chiqadi,
       shunchaki suzib kelmaydi
     · `prefers-reduced-motion` da harakat butunlay o'chadi
   ========================================================= */

/* `hidden` atributi hurmat qilinishi shart.
   style.css dagi `.mobile-nav .nav-link{display:block}` muallif qoidasi
   brauzerning `[hidden]{display:none}` qoidasidan ustun turadi, shuning
   uchun feature flag o'chirilgan bo'lsa ham "Davolash standartlari"
   havolasi menyuda ko'rinib qolardi. Xoslik (0,3,0) — `!important`
   kerak emas. */
.mobile-nav .nav-link[hidden],
.mobile-nav [hidden],
.ent-mobile-drawer [hidden],
.ent-mobile-controls [hidden] {
  display: none;
}

/* ── Qobiqlararo ranglar ────────────────────────────────────
   Har bir qobiqning o'z o'zgaruvchi to'plami bor. Zanjir shu tartibda
   yechiladi: v2 → standart → ommaviy → qat'iy qiymat. Bitta komponent
   uchala qobiqda ham to'g'ri rangda chiqadi. */
.ent-mobile-controls,
.ent-nav-quick {
  --nav-text:    var(--v2-text,    var(--st-text,    #0a1628));
  --nav-muted:   var(--v2-muted,   var(--st-muted,   #4a5d7a));
  --nav-soft:    var(--v2-soft,    var(--st-soft,    #eaf3fb));
  --nav-primary: var(--v2-primary, var(--st-primary, #1565c0));
}

/* ── Logotip ostidagi "Bosh sahifa" yorlig'i ────────────────
   Uy ikonkasi olib tashlandi: logotipning o'zi bosh sahifaga olib boradi,
   ikonka shu vazifani ikkinchi marta bajarardi va mobil headerda til/tema
   uchun kerak bo'lgan joyni egallardi. Desktopda qobiq nomi ("O'quv
   platformasi", "Malaka platformasi", "Klinik bilim platformasi") qoladi,
   mobilda uning o'rniga manzil yozuvi chiqadi. */
/* Xoslik ataylab qobiq qoidalariga teng: `.v2-logo small` va
   `.standards-logo small` allaqachon `display:block` beradi, oddiy
   `.ent-logo-home` esa ulardan past turadi va desktopda ham ko'rinib
   qolardi. */
.ent-logo-home,
.v2-logo small.ent-logo-home,
.standards-logo small.ent-logo-home,
.logo-text .ent-logo-home { display: none; }

@media (max-width: 820px) {
  .ent-logo-home,
  .v2-logo small.ent-logo-home,
  .standards-logo small.ent-logo-home,
  .logo-text .ent-logo-home {
    display: block;
    margin-top: 2px;
    color: var(--v2-primary, var(--st-primary, #7dd3fc));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
  }

  /* Desktop uchun mo'ljallangan qobiq nomi mobilda o'rnini bo'shatadi. */
  .logo-text > span:not(.ent-logo-home),
  .v2-logo small:not(.ent-logo-home),
  .standards-logo small:not(.ent-logo-home) {
    display: none;
  }

  /* Logotip belgisi uchala qobiqda bir o'lchamda bo'ladi. */
  .logo-mark { width: 38px; height: 38px; }
  .logo-text strong { font-size: .95rem; }
  .logo { gap: 8px; }
  .standards-logo > span { width: 38px; height: 38px; }
  .standards-logo { gap: 8px; min-width: 0; }

  /* Header ichki chekkalari — safe-area bilan, uchala qobiqda bir xil. */
  .standards-header-inner {
    gap: 8px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .header-inner {
    gap: 8px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}

/* ── Mobil boshqaruvlar (header o'ng qanoti) ────────────────
   v2 va standartlar qobig'ida `.ent-mobile-controls`, ommaviy qobiqda esa
   mavjud `.header-actions` shu vazifani bajaradi. Ikkalasi ham bir xil
   o'lchamga keltiriladi: 44×44 — WCAG tap target minimumi. */
.ent-mobile-controls { display: none; }

/* Malaka yorlig'i faqat mobil headerda bo'ladi — desktopda sahifaning
   o'z navigatsiyasida yozuv bilan turadi. */
[data-ent-shortcut] { display: none; }

.ent-mobile-controls svg,
.ent-mobile-drawer svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 820px) {
  .ent-mobile-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    /* Boshqaruvlar hech qachon siqilmaydi — joy yetmasa logotip matni
       qisqaradi (pastdagi qoida), tugmalar esa 44px tap target'ida qoladi. */
    flex-shrink: 0;
  }

  /* Faqat to'g'ridan-to'g'ri farzandlar: til guruhi ichidagi tugmalar
     o'z o'lchamida qolishi kerak, aks holda guruh 88px dan oshib ketadi. */
  .ent-mobile-controls > a,
  .ent-mobile-controls > button {
    min-width: 44px; min-height: 44px;
    display: grid; place-items: center;
    padding: 0;
    border: 0; border-radius: 11px;
    background: transparent;
    color: var(--nav-muted);
    font: 900 12px inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .ent-mobile-controls > a:hover,
  .ent-mobile-controls > button:hover,
  .ent-mobile-controls > a[aria-current="page"] {
    background: var(--nav-soft);
    color: var(--nav-primary);
  }

  /* Til almashtirgich — v2 (paid-malaka-i18n.js yasaydi) va standartlar
     qobig'i (shared-navigation.js yasaydi) uchun bitta ko'rinish. */
  .ent-lang-switch,
  .ent-mobile-controls .v2-language-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--v2-line, var(--st-line, #d9e5f1));
    border-radius: 12px;
    background: var(--v2-soft, var(--st-soft, #eaf3fb));
    flex-shrink: 0;
  }

  .ent-lang-switch button,
  .ent-mobile-controls .v2-language-switch button {
    min-width: 32px;
    min-height: 38px;
    padding: 0 6px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--v2-muted, var(--st-muted, #61748b));
    font: 900 11px/1 inherit;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
  }

  .ent-lang-switch button.active,
  .ent-mobile-controls .v2-language-switch button.active {
    background: var(--v2-primary, var(--st-primary, #1565c0));
    color: #fff;
  }

  /* Joy yetmaganda logotip matni qisqaradi — gorizontal overflow bo'lmaydi. */
  .logo, .v2-logo, .standards-logo { min-width: 0; }
  .logo-text, .v2-logo > span:last-child, .standards-logo > strong { min-width: 0; }
  .logo-text strong,
  .v2-logo strong,
  .standards-logo > strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Ommaviy qobiqning tugmalari ham shu o'lchamga keladi — ilgari 38px
     edi, ya'ni tap target minimumidan past. */
  .header-actions { gap: 8px; }
  .header-actions .btn-icon { width: 44px; height: 44px; border-radius: 11px; }
  .header-actions .btn-icon svg { width: 20px; height: 20px; }

  /* Malaka yorliq ikonkasi. Malaka sahifasining o'zida va tor ekranda
     yashiriladi — o'lchov byudjeti 2026-07-28-nav-tuzatishlar 4-bo'limida. */
  [data-ent-shortcut="malaka"] { display: grid; }
  .v2-page[data-v2-page="malaka"] [data-ent-shortcut="malaka"] { display: none; }
}

/* Segmentli til guruhi bitta tugmadan ~30px keng. 400px dan tor ekranda
   Malaka yorlig'i o'rnini bo'shatadi: u menyu ichida plitka bo'lib turibdi,
   til va tema esa boshqa joyda yo'q. */
@media (max-width: 400px) {
  [data-ent-shortcut="malaka"] { display: none; }
}

/* Desktopda mobil boshqaruvlar yo'q, sahifaning o'z navigatsiyasi ishlaydi. */
@media (min-width: 821px) {
  .ent-mobile-controls { display: none; }
}

/* ── Navigatsiya ko'rinishi breakpointi ─────────────────────
   Ilgari uch xil edi (768 / 780 / 820) va oraliqda bir qobiq mobil,
   ikkinchisi desktop rejimida qolardi. Endi bitta chegara. */
@media (max-width: 820px) {
  .nav { display: none; }
  .hamburger { display: flex; }
  .standards-nav,
  .standards-header-lang,
  .standards-theme,
  .v2-nav { display: none; }
}


/* ── Tezkor plitkalar ───────────────────────────────────────
   Menyuning yuqorisidagi to'rt manzil. Ilgari style.css va
   paid-malaka-v2.css da alohida-alohida, o'lchamlari mos kelmagan holda
   yozilgan edi (76/82px, ikonka 36/42px). Endi bitta ta'rif. */
.ent-nav-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 16px 10px;
}

.ent-nav-card {
  position: relative;
  min-height: 78px;
  padding: 12px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #0f6cbf, #12a3cc);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}

.ent-nav-card.is-premium {
  background: linear-gradient(135deg, #312061, #7650b5);
}

.ent-nav-card-icon {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .16);
}

.ent-nav-card-icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.ent-nav-card strong,
.ent-nav-card small { display: block; }
.ent-nav-card strong { font-size: .86rem; line-height: 1.15; }
.ent-nav-card small {
  margin-top: 4px;
  color: rgba(255, 255, 255, .74);
  font-size: .66rem;
  line-height: 1.25;
}

/* Holat nishoni: PRO faol yoki adminlar uchun bo'lim ON/OFF holati. */
.ent-nav-card em {
  position: absolute; top: 7px; right: 7px;
  padding: 2px 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #fde68a);
  color: #382300;
  font-size: .48rem; font-weight: 900; font-style: normal;
  letter-spacing: .04em;
}

.ent-nav-card em.is-off {
  background: #fee2e2;
  color: #b91c1c;
}

/* Tor ekranda to'rt plitka bir ustunga tushadi. Izoh matni olib tashlanadi
   va balandlik kamayadi — aks holda plitkalar ekranni to'ldirib, ostidagi
   bo'limlar ro'yxati ko'rinmay qoladi. */
@media (max-width: 380px) {
  .ent-nav-quick { grid-template-columns: 1fr; }
  .ent-nav-card { min-height: 58px; }
  .ent-nav-card small { display: none; }
  .ent-nav-card-icon { width: 32px; height: 32px; flex: 0 0 32px; }
}

/* ── Drawer ─────────────────────────────────────────────────
   Yon paneldan emas — header ostidan pastga ochiladi.
   `--ent-header-h` ni shared-navigation.js header'ni o'lchab yozadi. */
/* Menyu, fon qoraytmasi va uning sarlavhasi faqat mobil ko'rinishda bo'ladi.
   Bazaviy `display:none` shart: 820px dan yuqorida drawer hech qanday
   qoida bilan yashirilmasa, u sahifa oqimida oddiy blok bo'lib chiziladi
   va to'rt plitka header ostida ochilib qoladi. */
.ent-mobile-drawer,
.ent-mobile-backdrop,
.ent-mobile-drawer-head { display: none; }

/* Menyu ochilganda ildizga `overflow:hidden` QO'YILMAYDI.

   `.v2-header` va `.standards-header` — `position: sticky`. Ildiz
   `overflow:hidden` bo'lsa u scrollport bo'lishdan to'xtaydi va sticky
   element o'zining statik joyiga — hujjat boshiga qaytadi. Sahifa pastga
   tushirilgan bo'lsa header ekrandan chiqib ketadi: menyu ochiladi, header
   esa yo'qoladi. (Ommaviy qobiqda header `fixed` bo'lgani uchun u yerda
   bilinmasdi.)

   Fon aylanmasligi o'rniga: qoraytmada `touch-action:none` — undan
   boshlangan surish harakati sahifani aylantirmaydi; menyuning o'zida esa
   `overscroll-behavior: contain` bor, ya'ni ichki aylantirish sahifaga
   o'tmaydi. */
.ent-nav-open .v2-header,
.ent-nav-open .standards-header {
  /* Qoraytma z-index:89 da; header undan yuqorida turishi kafolatlanadi. */
  z-index: 91;
}

@media (max-width: 820px) {

  .mobile-nav.ent-public-drawer,
  .ent-mobile-drawer {
    /* Yopiq holatda ham DOM da turadi — `display` almashsa animatsiya
       ishlamaydi, shuning uchun ko'rinish `opacity`+`visibility` bilan
       boshqariladi. */
    display: block;
    position: fixed;
    top: var(--ent-header-h, 60px);
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    max-height: calc(100dvh - var(--ent-header-h, 60px) - 10px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0 0 18px 18px;
    padding: 8px 0 12px;

    /* Yopiq holat. Chiqish kirishdan tez — foydalanuvchi yopishga qaror
       qilgan, kutib turishi shart emas. `ease-in` ishlatilmaydi: u
       harakatni kechiktiradi va butun interfeys sust his qilinadi. */
    transform-origin: top center;
    transform: translateY(-8px) scale(.985);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform .16s cubic-bezier(.32, .72, 0, 1),
      opacity .14s ease-out,
      visibility 0s linear .16s;
  }

  /* v2 va standartlar qobig'ida drawer o'z sahifasining mavzusiga
     ergashadi; ommaviy qobiqda u style.css dagi qorong'i fon bilan
     qoladi — menyu o'zi tushayotgan headerga o'xshashi kerak, ommaviy
     header esa qorong'i. Shu sababli quyidagi ochiq mavzu qoidalari
     `.ent-public-drawer` ni chetlab o'tadi. */
  .ent-mobile-drawer:not(.ent-public-drawer) {
    display: block;
    /* Fon qoraytmasi `z-index:89` da turadi va `backdrop-filter` bilan
       o'z stacking kontekstini yaratadi. Menyuda z-index bo'lmasa u
       qoraytmadan PASTDA chiziladi — ya'ni menyuning o'zi xiralashib,
       orqadagi kontent ustidan ko'rinib qoladi. */
    z-index: 90;
    background: var(--v2-surface, var(--st-surface, #fff));
    color: var(--v2-text, var(--st-text, #0a1628));
    border-bottom: 1px solid var(--v2-line, var(--st-line, #d9e5f1));
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  }

  .mobile-nav.ent-public-drawer.open,
  .ent-mobile-drawer.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform .24s cubic-bezier(.32, .72, 0, 1),
      opacity .18s ease-out,
      visibility 0s;
  }

  /* Ichki bloklar ozgina kechikib chiqadi — panel "ochilayotgandek"
     tuyuladi. Eng kech element 72 + 200 = 272ms da tugaydi, ya'ni butun
     harakat 300ms ichida qoladi. */
  .mobile-nav.ent-public-drawer.open > *,
  .ent-mobile-drawer.open > * {
    animation: entNavItemIn .2s cubic-bezier(.32, .72, 0, 1) both;
  }
  .mobile-nav.ent-public-drawer.open > *:nth-child(1),
  .ent-mobile-drawer.open > *:nth-child(1) { animation-delay: 0s; }
  .mobile-nav.ent-public-drawer.open > *:nth-child(2),
  .ent-mobile-drawer.open > *:nth-child(2) { animation-delay: .024s; }
  .mobile-nav.ent-public-drawer.open > *:nth-child(3),
  .ent-mobile-drawer.open > *:nth-child(3) { animation-delay: .048s; }
  .mobile-nav.ent-public-drawer.open > *:nth-child(n+4),
  .ent-mobile-drawer.open > *:nth-child(n+4) { animation-delay: .072s; }

  /* Fon qoraytmasi header ostidan boshlanadi — header bosiladigan
     holatda qoladi, tashqariga bosib yopish esa ishlayveradi. */
  .ent-mobile-backdrop {
    position: fixed;
    inset: var(--ent-header-h, 60px) 0 0;
    z-index: 89;
    background: rgba(2, 12, 24, .58);
    backdrop-filter: blur(4px);
    opacity: 0;
    /* Fon aylanmasligi shu yerdan ta'minlanadi — ildizga `overflow:hidden`
       qo'yish sticky headerni buzadi (yuqoridagi izoh). */
    touch-action: none;
    transition: opacity .2s ease-out;
  }

  /* Ommaviy qobiqda header 1000, menyu 1901, sahifada 2000–3000 li
     elementlar bor — qoraytma ular ostida qolib ketmasligi kerak. */
  .ent-public-backdrop { z-index: 1900; }

  .ent-mobile-backdrop.open {
    display: block;
    opacity: 1;
  }

  /* Panel ichidagi ro'yxat chetdan nafas olsin — ommaviy qobiqda ham. */
  .ent-mobile-drawer > nav,
  .ent-mobile-drawer > [data-ent-sections],
  .ent-mobile-drawer .ent-mobile-drawer-head {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ent-mobile-drawer > nav {
    display: grid;
    gap: 4px;
    padding-top: 12px;
  }

  /* Quyidagilar faqat ochiq mavzuli qobiqlar uchun: ommaviy drawer
     style.css dagi qorong'i uslubda qoladi. */
  .ent-mobile-drawer:not(.ent-public-drawer) > nav {
    border-top: 1px solid var(--v2-line, var(--st-line, #d9e5f1));
  }

  .ent-mobile-drawer:not(.ent-public-drawer) > nav a,
  .ent-mobile-drawer:not(.ent-public-drawer) > nav button {
    min-height: 48px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: transparent;
    color: var(--v2-text, var(--st-text, #0a1628));
    text-align: left;
    text-decoration: none;
    font: 800 13px inherit;
    cursor: pointer;
  }

  .ent-mobile-drawer:not(.ent-public-drawer) > nav a:hover,
  .ent-mobile-drawer:not(.ent-public-drawer) > nav button:hover,
  .ent-mobile-drawer:not(.ent-public-drawer) > nav a[aria-current="page"] {
    background: var(--v2-soft, var(--st-soft, #eaf3fb));
    color: var(--v2-primary, var(--st-primary, #087fc5));
  }

  /* Bo'limlar akkordeoni — v2/standart qobig'idagi ochiq mavzu uchun. */
  .ent-mobile-drawer:not(.ent-public-drawer) .mobile-nav-group {
    border-top: 1px solid var(--v2-line, var(--st-line, #d9e5f1));
  }
  .ent-mobile-drawer:not(.ent-public-drawer) .mobile-nav-group summary {
    min-height: 48px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--v2-text, var(--st-text, #0a1628));
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
  }
  .ent-mobile-drawer:not(.ent-public-drawer) .mobile-nav-group summary::-webkit-details-marker { display: none; }
  .ent-mobile-drawer:not(.ent-public-drawer) .mobile-nav-group summary::after {
    content: '›';
    color: var(--v2-muted, var(--st-muted, #61748b));
    font-size: 1.2rem;
  }
  .ent-mobile-drawer:not(.ent-public-drawer) .mobile-nav-group[open] summary::after {
    transform: rotate(90deg);
  }
  .ent-mobile-drawer:not(.ent-public-drawer) .mobile-nav-group-count {
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--v2-soft, var(--st-soft, #eaf3fb));
    color: var(--v2-muted, var(--st-muted, #61748b));
    font-size: 11px;
    text-align: center;
  }
  .ent-mobile-drawer:not(.ent-public-drawer) .mobile-nav-group-body .nav-link {
    display: block;
    padding: 11px 12px 11px 24px;
    border-radius: 10px;
    color: var(--v2-muted, var(--st-muted, #61748b));
    text-decoration: none;
    font-size: 12.5px;
  }
  .ent-mobile-drawer:not(.ent-public-drawer) .mobile-nav-group-body .nav-link:hover,
  .ent-mobile-drawer:not(.ent-public-drawer) .mobile-nav-group-body .nav-link.active {
    background: var(--v2-soft, var(--st-soft, #eaf3fb));
    color: var(--v2-primary, var(--st-primary, #087fc5));
  }
}

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

/* Harakatni kamaytirish so'ralgan bo'lsa siljish olib tashlanadi, lekin
   animatsiya nolga tushmaydi: qisqa xiralashuv panel qayerdan kelganini
   tushuntiradi va keskin almashuvdan yumshoqroq. */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav.ent-public-drawer,
  .ent-mobile-drawer,
  .mobile-nav.ent-public-drawer.open,
  .ent-mobile-drawer.open {
    transform: none;
    transition: opacity .12s ease-out, visibility 0s;
  }

  .mobile-nav.ent-public-drawer:not(.open),
  .ent-mobile-drawer:not(.open) {
    transition: opacity .12s ease-out, visibility 0s linear .12s;
  }

  .ent-mobile-backdrop { transition: opacity .12s ease-out; }

  .mobile-nav.ent-public-drawer.open > *,
  .ent-mobile-drawer.open > * {
    animation: none;
  }
}

/* ── Qidiruv overlayi ───────────────────────────────────────
   Ilgari bu qoidalar style.css da edi va shu sababli qidiruv faqat
   ommaviy qobiqda ko'rinardi. Endi u o'n uchala sahifada bor, demak
   uslublar ham shu yerda — nav-unified.css hamma joyda ulanadi.

   Ranglar qobiqlararo zanjir bilan: v2 → standart → ommaviy → qat'iy
   qiymat. Bitta overlay uchala qobiqda ham o'z muhitiga mos chiqadi. */
.search-overlay {
  --sr-surface: var(--v2-surface, var(--st-surface, var(--surface, #fff)));
  --sr-bg:      var(--v2-soft,    var(--st-soft,    var(--bg, #eaf3fb)));
  --sr-line:    var(--v2-line,    var(--st-line,    var(--border, #d7e3ef)));
  --sr-text:    var(--v2-text,    var(--st-text,    var(--text, #0a1628)));
  --sr-muted:   var(--v2-muted,   var(--st-muted,   var(--text-muted, #4a5d7a)));
  display: none; position: fixed; inset: 0;
  background: rgba(4, 14, 38, .75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 3000; padding: 80px 24px 24px;
  align-items: flex-start; justify-content: center;
}
.search-overlay.open { display: flex; }
.search-box {
  background: var(--sr-surface); border-radius: 18px;
  width: 100%; max-width: 640px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .35);
  border: 1.5px solid var(--sr-line); overflow: hidden;
  animation: entSearchIn .25s cubic-bezier(.32, .72, 0, 1) both;
  transform-origin: top;
}
@keyframes entSearchIn {
  from { opacity: 0; transform: translateY(-16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.search-input-wrap {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; border-bottom: 1px solid var(--sr-line);
}
.search-input-wrap svg { width: 18px; height: 18px; color: var(--sr-muted); flex-shrink: 0; }
.search-input-wrap input {
  flex: 1; border: none; outline: none; min-width: 0;
  font: inherit; font-size: 1.05rem; color: var(--sr-text); background: none;
}
.search-input-wrap kbd {
  font: inherit; font-size: .72rem; color: var(--sr-muted);
  background: var(--sr-bg); border: 1px solid var(--sr-line);
  border-radius: 6px; padding: 3px 9px; cursor: pointer;
}
.search-results { max-height: 440px; overflow-y: auto; }
.search-result-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; cursor: pointer; text-decoration: none;
  color: var(--sr-text); border-bottom: 1px solid var(--sr-line);
  transition: background .18s ease;
}
.search-result-item:hover { background: var(--sr-bg); }
.search-result-item:last-child { border-bottom: none; }
.sr-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--sr-bg); color: var(--v2-primary, var(--st-primary, var(--primary, #1565c0)));
}
.sr-icon svg { width: 19px; height: 19px; }
.sr-num { font-size: .72rem; font-weight: 700; white-space: nowrap; color: var(--v2-primary, var(--st-primary, var(--primary, #1565c0))); }
.sr-title { font-size: .88rem; font-weight: 600; }
.sr-sec { font-size: .75rem; color: var(--sr-muted); }
.search-empty { padding: 44px 20px; text-align: center; color: var(--sr-muted); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .search-box { animation: none; }
}
@media (max-width: 560px) {
  .search-overlay { padding: 64px 12px 12px; }
}

/* ── Qulflangan natija ──────────────────────────────────────
   Pullik natija ro'yxatda ko'rinadi, lekin ochilmaydi: bosilganda
   `shared-navigation.js` sahifaga o'tishni to'xtatib, nima kerakligini
   aytadigan panelni chizadi. Sahifaga yuborilsa `gatedPage` 404,
   `assetGate` esa 403 qaytarardi — foydalanuvchi uchun ikkalasi ham
   tushunarsiz. */
.search-result-item.is-locked .sr-title,
.search-result-item.is-locked .sr-sec { opacity: .72; }
.sr-lock {
  margin-left: auto; flex-shrink: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--sr-bg); color: var(--sr-muted);
}
.sr-lock svg { width: 15px; height: 15px; }

.search-lock { padding: 34px 26px; text-align: center; color: var(--sr-text); }
.search-lock-icon {
  width: 46px; height: 46px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--sr-bg); color: var(--v2-primary, var(--st-primary, var(--primary, #1565c0)));
}
.search-lock-icon svg { width: 22px; height: 22px; }
.search-lock strong { display: block; font-size: 1rem; }
.search-lock p { margin: 8px 0 18px; color: var(--sr-muted); font-size: .88rem; line-height: 1.6; }
.search-lock-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.search-lock-cta,
.search-lock-actions button {
  min-height: 42px; padding: 11px 17px; border-radius: 12px;
  border: 1px solid transparent; font: 800 13px inherit; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
}
.search-lock-cta {
  background: var(--v2-primary, var(--st-primary, var(--primary, #1565c0)));
  color: #fff;
}
.search-lock-actions button {
  background: transparent; border-color: var(--sr-line); color: var(--sr-muted);
}