/* ==========================================================================
   MOBILSET.UZ — ILOVA QOBIG'I (sayt Android ilova ko'rinishida)
   --------------------------------------------------------------------------
   2026-10-17 sessiyasi — foydalanuvchi talabi:

     *«Saytni ko'rinishi huddi android ilovaning yangi ko'rinishidek qilishimiz
     kerak. Header va bottom navigationlar qo'shilgan va o'zgarishlar bo'lgan.
     Telefon browserdan saytga kirilganda dizayn ko'rinishi, tugmalar joylashuvi,
     tariflarni ko'rsatilishi huddi ilova dizaynidek birga bir qilib qayta ishla.
     Saytdan foydalanganda ham ilovadan foydalangandek bo'lsin. Kompaniya
     logotiplari, Mobilset AI robot rasmini button uchun va sahifalarda
     foydalaniladigan rasmlarni ham ilova qildim. Huddi shuni kompyuter
     browserida ham tartibli holda joylashtirib chiq.»*

   Tuzilish (ilova ekranlari bilan bir xil):

       ┌──────────────────────────────┐
       │ SARLAVHA (app bar)           │  ← orqaga · logotip · amal
       ├──────────────────────────────┤
       │ EKRAN                        │
       │  · splash (kirish)           │
       │  · bosh menyu (xizmatlar)    │
       │  · operatorlar ro'yxati      │
       │  · operator tariflari        │
       │  · to'lov / AI (tez kunda)   │
       │  · yordam                    │
       ├──────────────────────────────┤
       │ PASTKI NAVIGATSIYA (5 band)  │  ← Bosh · To'lov · AI · Yordam · Til
       └──────────────────────────────┘

   ⚠️ Kompyuterda ham **aynan shu tuzilish** ishlatiladi: qobiq ekranning
      o'rtasida turadi (`--qobiq-kenglik`), sarlavha va pastki navigatsiya
      unga moslashadi. Shu sababli sayt keng ekranda ham ilovadek tartibli.
   ⚠️ Inline uslub va inline skript YO'Q (CSP: `style-src 'self'`,
      `script-src 'self'`) — barcha ranglar `asos.css` tokenlaridan olinadi.
   ========================================================================== */

:root {
  /* Telefon ko'rinishidagi qobiq kengligi (keng ekranda `desktop.css` ochadi) */
  --qobiq-kenglik: 620px;
  /*
    Sarlavha va pastki navigatsiya panelining foni.
    ⚠️ Foydalanuvchi talabi (2026-10-17): ular **asosiy sahifadan ajralib
    tursin, lekin to'q bo'lmasin** — kulrang-oq (`--fon` = #f6faff) fondan sal
    farq qiladigan deyarli oq ko'kimtir ohang. Tungi rejimda `qoshimcha.css`
    uni quyuq qiladi.
  */
  --panel-fon: #ffffff;
  /*
    ⚠️ Sahifa (kontent) foni — panellardan **ajralib turishi** uchun sal
    ko'kimtir. Foydalanuvchi talabi (2026-10-17): *«Day rejimida Header va
    Bottom navigation panel fon rangini asosiy saxifa rangidan ajrab
    turadigan qilish kerak.»*
  */
  --sahifa-fon: #eef3fa;
  /* Pastki navigatsiya balandligi — kontent chekkasi shunga tayanadi */
  --pastki-nav: 68px;
  --app-bar: 56px;
  /*
    ⚠️ Sarlavha paneli `position: fixed` bo'lgani uchun **oqimdan chiqadi**:
    uning balandligi qobiqqa chekka sifatida qo'shilishi shart, aks holda
    ekranning birinchi qatori panel ostida qolib ketadi (aynan shunday xato
    bo'lgan — «TARIFLAR» va operatorlar sarlavhasi ko'rinmagan).
    1px — panelning pastki chegarasi (`border-bottom`).
  */
  --app-bar-balandligi: calc(var(--app-bar) + 1px);
  /*
    ⚠️ Yopishib turuvchi panellar (kategoriya chiplari) **sarlavha panelining
    bevosita ostiga** yopishishi kerak (foydalanuvchi talabi, 2026-10-17):
    *«...kategoriyalar paneli Header navigation past tarafiga yopishib keyin
    qotirilsin.»* Ilgari `asos.css` dagi 72px ishlatilardi va panel sarlavha
    ostidan 16px pastda qotib qolardi.
  */
  --yopishqa-tepa: var(--app-bar-balandligi);
}

/* ==========================================================================
   1. QOBIQ (telefon ko'rinishi — keng ekranda `desktop.css` ochadi)
   ========================================================================== */

.app-qobiq {
  position: relative;
  width: 100%;
  max-width: var(--qobiq-kenglik);
  margin: 0 auto;
  /* ⚠️ Sahifa foni panellardan ajralib turadi (`--sahifa-fon`) */
  background: var(--sahifa-fon);
  /*
    ⚠️ Sarlavha paneli `position: fixed` — oqimda joy egallamaydi. Shu sababli
    uning balandligi shu yerda chekka sifatida qo'shiladi (aks holda ekranning
    birinchi qatori panel ostida qolardi).
  */
  padding-top: var(--app-bar-balandligi);
}

/*
  ⚠️ Qobiq ichidagi sarlavha va pastki navigatsiya **qobiq kengligida**
  qotib turadi: keng ekranda ular cho'zilib ketmaydi va kontent bilan bir
  chiziqda turadi.
*/
.app-qobiq .sarlavha,
.app-qobiq .pastki-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--qobiq-kenglik);
}

/*
  ⚠️ Ildiz (document) skrol qiladi, qobiq emas: shu sababli mobil brauzerda
  manzil qatori yashirinishi va `100vh` muammosi bo'lmasligi saqlanadi.
  Chetdagi kulrang fon — qobiq «telefon» bo'lib ajralib turishi uchun.
*/
@media (min-width: 761px) {
  body {
    background: #e9eff7;
  }

  .app-qobiq {
    box-shadow: 0 0 0 1px var(--ajratgich), 0 24px 60px rgba(11, 18, 40, 0.09);
    min-height: 100vh;
  }
}

html[data-mavzu="tungi"] body {
  background: var(--fon);
}

/* ==========================================================================
   2. SARLAVHA (app bar)
   ========================================================================== */

.app-qobiq .sarlavha {
  top: 0;
}

/*
  ⚠️ Foydalanuvchi talabi (2026-10-17): kunduzgi rejimda sarlavha va pastki
  navigatsiya **asosiy sahifa fonidan aniq ajralib tursin**, lekin to'q bo'lmasin
  — shuning uchun panellar **oq** (`--panel-fon`), sahifa esa sal ko'kimtir
  (`--sahifa-fon`).
*/
.sarlavha {
  background: var(--panel-fon);
}

/*
  ⚠️ Sarlavha **markazi** — operatorlar ekranida Mobilset logotipi
  (foydalanuvchi talabi, 2026-10-17). Panel markaziga absolyut joylashtiriladi,
  shunda ham chapdagi orqaga tugmasi, ham o'ngdagi amallar joyida qoladi.
*/
.sarlavha-ichi {
  position: relative;
  min-height: var(--app-bar);
  padding: var(--or-2) var(--or-3);
  gap: var(--or-2);
}

.sarlavha-markaz {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 26px;
  width: auto;
  max-width: 44%;
  object-fit: contain;
  pointer-events: none;
}

/* Sarlavha qatori — flex (orqaga · brend · amallar) */
.sarlavha-ichi {
  display: flex;
  align-items: center;
}

/* Orqaga tugmasi — faqat ichki ekranlarda ko'rinadi */
.sarlavha-orqa {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--matn);
  background: transparent;
  transition: background var(--otish), color var(--otish);
}

.sarlavha-orqa:hover {
  background: var(--yuza-xira);
}

/*
  ⚠️ Orqaga belgisi endi **liniyali, dumli strelka** (`#i-strelka-chap`) —
  chevron emas (foydalanuvchi talabi, 2026-10-17). Shu sababli `rotate(180deg)`
  ham olib tashlandi: strelka o'zi chapga qaragan.
*/

/*
  ⚠️ Filtr tugmasi — sarlavhada, **orqaga tugmasidan keyin**. Faqat keng ekranda
  ko'rinadi (`desktop.css`); telefonda qidiruv paneli sahifada o'zi ochiladi
  (`<details>` tugmasi bilan).
*/
.sarlavha-filtr {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--matn);
  background: transparent;
  transition: background var(--otish), color var(--otish);
}

.sarlavha-filtr:hover {
  background: var(--yuza-xira);
  color: var(--kok);
}

.sarlavha-filtr.faol {
  background: var(--kok);
  color: #ffffff;
}

/*
  Brend bloki — logotip + sarlavha. Ilovada sarlavha **logotip ostida emas**,
  yonida turadi (`asos.css` → `.brend` qatorli flex saqlanadi).
*/
.app-qobiq .brend {
  gap: var(--or-2);
  /* ⚠️ Keng ekranda ham sarlavha bloki **chapga** yopishib turadi */
  margin-right: auto;
}

.app-qobiq .brend-logo {
  height: 26px;
}

/*
  ⚠️ Telefon rejimida (foydalanuvchi talabi): **to'liq logotip** tor panelga
  sig'maydi — uning o'rniga **gul belgisi** turadi (`favicon.svg`).
  ⚠️ Sarlavha yozuvi telefon rejimida **faqat tariflar ekranida** ko'rinadi
  (foydalanuvchi talabi: *«Sayt Telefon rejimiga o'tganda Header Kompaniya nomi
  va uni yonida "tariflari" so'zi bo'lsin»*) — o'sha yerda operator logotipi va
  «{Kompaniya} tariflari» turadi. Boshqa ekranlarda u ekran sarlavhasi bilan
  to'qnashmasligi uchun yashiriladi.
*/
@media (max-width: 999px) {
  html:not([data-ekran="tariflar"]) .app-qobiq .brend-izoh,
  .app-qobiq .brend-logo:not(.kompaniya-logo-sarlavha) {
    display: none;
  }

  .app-qobiq .brend-belgi {
    display: block;
  }
}

/* Gul belgisi — faqat tor ekranda (keng ekranda to'liq logotip) */
.brend-belgi {
  height: 28px;
  width: 28px;
  display: block;
  flex: none;
}

.app-qobiq .brend-izoh {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /*
    ⚠️ Rang **CSS o'zgaruvchisidan** olinadi (`--sarlavha-nom-rang`), inline
    `color` dan EMAS: faqat shunda tungi rejimdagi «oq» qoidasi ustun keladi
    (inline uslub har qanday CSS qoidasini yengardi).
  */
  color: var(--sarlavha-nom-rang, var(--matn));
}

/*
  ⚠️ Operator logotipi (tariflar ekranida Mobilset logotipi o'rniga) — kichik
  yumaloq belgi. Ilovada ham sarlavhada operator belgisi turadi.
*/
.kompaniya-logo-sarlavha {
  height: 30px;
  width: 30px;
  border-radius: 9px;
  object-fit: cover;
}

/* Ekran sarlavhasi (orqaga tugmasi ostidagi qator) */
.ekran-sarlavha {
  display: flex;
  align-items: baseline;
  gap: var(--or-3);
  flex-wrap: wrap;
  margin-bottom: var(--or-4);
}

.ekran-sarlavha h1,
.ekran-sarlavha h2 {
  font-size: clamp(24px, 4.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--brend-toq);
}

html[data-kompaniya="beeline"] .ekran-sarlavha h1,
html[data-kompaniya="beeline"] .ekran-sarlavha h2 {
  color: var(--matn);
}

.ekran-sarlavha .chiziq {
  display: block;
  width: 62px;
  height: 4px;
  border-radius: 999px;
  background: var(--brend);
}

/* Sarlavhadagi amal tugmalari (ulashish · yangilash · menyu) */
.sarlavha-ong .tugma-ikon {
  width: 40px;
  height: 40px;
}

/* ==========================================================================
   3. EKRANLAR
   ========================================================================== */

.ekran {
  padding: var(--or-4) var(--or-4) calc(var(--pastki-nav) + var(--or-6));
  /*
    ⚠️ `main.asosiy` — flex emas, lekin `hidden` bilan boshqariladi; ekran
    ichidagi bloklar **to'liq kenglikni** egallashi kerak (aks holda flex/grid
    konteynerda ular mazmun bo'yicha qisqarib qolardi).
  */
  display: block;
}

.ekran[hidden] {
  display: none !important;
}

/*
  ⚠️ Qotib turuvchi sarlavha (app bar) kontent ustida turadi — shuning uchun
  **yopishib turuvchi** elementlarga (kategoriya chiplari) uning balandligi
  qo'shiladi, aks holda ular sarlavha ostiga kirib ketadi.
*/
.ekran .boshqaruv {
  top: var(--yopishqa-tepa);
}

/* Asosiy (tariflar) ekrani `main` — chekkasi qobiqqa moslashadi */
.app-qobiq .asosiy {
  max-width: none;
  margin: 0;
  padding: var(--or-4) var(--or-4) calc(var(--pastki-nav) + var(--or-6));
}

/*
  ⚠️ Splash (kirish) ekrani — `data-ekran="splash"` da sayt qobig'i yopiladi:
  ilovadagi welcome ekrani kabi faqat logotip, tasvir va «Davom etish».
*/
html[data-ekran="splash"] .sarlavha,
html[data-ekran="splash"] .pastki-nav,
html[data-ekran="splash"] .futer {
  display: none !important;
}

/*
  ⚠️ Boshqa ekranga o'tilgach kirish oynasi **hech qanday holatda** ustida
  qolmasligi kerak (ilova oqimida u bir marta yopiladi va qaytarilmaydi).
  Bu — `hidden` atributiga qo'shimcha to'r.
*/
html:not([data-ekran="splash"]) .splash:not(.yopilyapti) {
  display: none;
}

/* ==========================================================================
   4. BOSH MENYU (ilovadagi Home ekrani) — `data-ekran="uy"`
   ========================================================================== */

/*
  ⚠️ Bosh menyu ekranida sarlavhadagi **logotip yashiriladi**: ekranning o'zida
  katta logotip turadi (ilovadagidek) — ikkisi takrorlanmasin. Faqat tor
  ekranda u qoladi (matn sig'ishi uchun).
*/
html[data-ekran="uy"] .brend-logo,
html[data-ekran="splash"] .brend-logo {
  display: none;
}

@media (max-width: 760px) {
  html[data-ekran="uy"] .brend-logo {
    display: block;
  }
}

.uy-tepa {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--or-2);
  /*
    ⚠️ Yuqorida chekka **kichik** (0): ekran allaqachon app bar va panel
    chekkasidan keyin boshlanadi (`--or-4`). Ilgari bu yerda `--or-4` ham bor
    edi — logo sarlavha ostiga kirib ketardi.
  */
  padding: 0 0 var(--or-6);
}

/* ⚠️ `.ekran` — flex konteyner emas, shuning uchun bu yerda kenglik to'liq */
.xizmatlar,
.operatorlar,
.operatorlar-royxat {
  width: 100%;
  align-items: stretch;
}

.uy-logo {
  width: 210px;
  max-width: 70%;
  height: auto;
}

.uy-nom {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.uy-izoh {
  font-size: 15px;
  color: var(--matn-2);
}

.xizmatlar {
  display: flex;
  flex-direction: column;
  gap: var(--or-4);
  /*
    ⚠️ Foydalanuvchi talabi (2026-10-17): *«Xizmatlarni tanlash sahifasida
    "Tariflarni ko'rish" va "Sim karta yoki eSim ulash" panellari har biri birma
    ketin 2 qatorga ekran(sahifa) markaziga joylashsin. Panelda ikonka va uning
    to'g'risida Matn va pastida izoh yozilgan holda joylashsin.»*
    Shuning uchun kartalar **ekran markazida** va **ikki qator** bo'lib turadi.
  */
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.xizmat {
  width: 100%;
  min-height: 88px;
  /*
    ⚠️ Foydalanuvchi talabi (2026-10-17): *«Home sahifasida, "Tariflarni ko'rish"
    chevron panelida chap tarafda ikonka va uning o'ng tarafida Matnlar
    joylashsin, hozir bir ustunga joylashyapti. shu shart sim karta ulash uchun
    ham qo'llansin.»* — ya'ni **qator**: ikonka chapda, matn (nom + izoh) o'ngda.
  */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--or-4);
  padding: var(--or-4);
  border-radius: var(--r-karta);
  background: var(--yuza);
  text-align: left;
  box-shadow: var(--soya-1), inset 0 0 0 1px var(--ajratgich);
  transition: transform var(--otish), box-shadow var(--otish);
}

.xizmat:hover {
  transform: translateY(-2px);
  box-shadow: var(--soya-2), inset 0 0 0 1px var(--kok-och);
}

.xizmat-belgi {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--kok-yumshoq);
  color: var(--kok);
}

.xizmat-belgi .ik {
  width: 28px;
  height: 28px;
}

.xizmat-matn {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* ⚠️ Matnlar ustunda, lekin **chapga** tekislangan (ikonka o'ngida) */
  align-items: flex-start;
  gap: 2px;
}

.xizmat-nom {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.xizmat-izoh {
  font-size: 14px;
  color: var(--matn-2);
}

/* ⚠️ Strelka — o'ng chetda, vertikal markazda */
.xizmat-strelka {
  position: relative;
  flex: none;
  color: var(--matn-3);
}

.xizmat {
  position: relative;
}

/* ⚠️ «Tez kunda» belgisi — o'ng chetda (strelka o'rnida) */
.xizmat .tez-badge {
  align-self: center;
}

.xizmat.nofaol {
  background: var(--yuza-xira);
  box-shadow: inset 0 0 0 1px var(--ajratgich);
  cursor: default;
}

.xizmat.nofaol:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px var(--ajratgich);
}

.xizmat.nofaol .xizmat-belgi {
  background: var(--ajratgich);
  color: var(--matn-3);
}

.tez-badge {
  flex: none;
  padding: 6px var(--or-3);
  border-radius: var(--r-chip);
  background: var(--apelsin-yumshoq);
  color: var(--apelsin-toq);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* ==========================================================================
   5c. OPERATORLAR EKRANI (kompaniya tanlash — to'liq ro'yxat)
   --------------------------------------------------------------------------
   ⚠️ Foydalanuvchi talabi (2026-10-17): *«Kompaniyalar ro'yxati korsatilganda,
   har birinig oraliq intervallarini o'lchamini ko'tarish kerak, hozir yopihsib
   turibdi, oralari sal ochiq ho'lda korinsin.»*
   ========================================================================== */

.operatorlar {
  display: flex;
  flex-direction: column;
  /* ⚠️ Kartalar orasi **kengaytirildi** (8px → 16px) */
  gap: var(--or-5);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.operator-qator {
  width: 100%;
  min-height: 84px;
  display: flex;
  align-items: center;
  /*
    ⚠️ Foydalanuvchi talabi: *«Kompaniyalarning chevronlari orasi ozginadan
    ochilsin, hozir yopishib qolgan.»* — nom va strelka orasidagi masofa
    oshirildi.
  */
  gap: var(--or-5);
  padding: var(--or-3) var(--or-4);
  border-radius: var(--r-karta);
  background: var(--yuza);
  text-align: left;
  box-shadow: var(--soya-1), inset 0 0 0 1px var(--ajratgich);
  transition: transform var(--otish), box-shadow var(--otish);
}

.operator-qator:hover {
  transform: translateY(-1px);
  box-shadow: var(--soya-2), inset 0 0 0 1px var(--kok-och);
}

.operator-qator.faol {
  box-shadow: var(--soya-2), inset 0 0 0 2px var(--kompaniya-rang, var(--kok));
}

.operator-qator.nofaol {
  background: var(--yuza-xira);
  cursor: default;
}

.operator-qator.nofaol:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px var(--ajratgich);
}

.operator-logo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--yuza-xira);
}

.operator-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logotip yuklanmasa — brend rangidagi bosh harf */
.operator-logo.logo-yoq::after {
  content: attr(data-harf);
  font-size: 22px;
  font-weight: 800;
  color: var(--kompaniya-matn, var(--matn));
}

.operator-nom {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--kompaniya-matn, var(--matn));
}

/* ⚠️ Strelka — nomdan **ajralib** turadi (foydalanuvchi talabi) */
.operator-yon {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--or-3);
  color: var(--matn-3);
  padding-left: var(--or-1);
}

.operator-yon .ik {
  width: 22px;
  height: 22px;
}

.operator-yon .tez-badge {
  color: var(--matn-3);
  background: var(--ajratgich);
}

/* ==========================================================================
   6. TARIFLAR EKRANI
   ========================================================================== */

/*
  ⚠️ Foydalanuvchi talabi (2026-10-17): *«Tariflarni tanlashga kirilganda,
  titulga yozilgan "Qaysi operator..." matnini o'rniga "TARIFLAR" degan so'z
  o'zininig qatorining markazida va yuqori tarafdan ko'proq hamda past
  taraflarida ozroq intervallar bilan ajrab tursin.»*
*/
.tarif-bosh {
  /* Yuqoridan ko'proq, pastdan ozroq oraliq */
  padding: var(--or-5) 0 var(--or-3);
  text-align: center;
}

.tarif-bosh-nom {
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--matn);
}

/*
  ⚠️ Kategoriya chiplari (foydalanuvchi talabi): *«kategoriya buttonlaridan
  katta turibdi, shu buttonlarning balandligidan ozgina katta tursin, button
  chekkalariga yopishib qolmasin.»*
  Shuning uchun panel balandligi **chekka + chip balandligi** qadar, chip esa
  ixcham (34px) — panel «katta blok» bo'lib ko'rinmaydi.
*/
.app-qobiq .kategoriya-panel {
  margin-bottom: 0;
}

.app-qobiq .kategoriya-qator {
  gap: var(--or-2);
  /* Chetlarda ozgina bo'shliq — tugmalar chekkaga yopishmasin */
  padding: var(--or-2) var(--or-1) var(--or-3);
  margin: 0;
}

.app-qobiq .chip {
  height: 34px;
  padding: 0 var(--or-4);
  font-size: 14.5px;
}

.app-qobiq .boshqaruv {
  /*
    ⚠️ Chiplar qatori sarlavha ostida **qotib turadi** (foydalanuvchi talabi,
    2026-11-06): fon shaffof bo'lmasligi shart, aks holda ostidan o'tayotgan
    kartalar ko'rinib qoladi.
  */
  padding: var(--or-2) 0;
  margin: 0;
  background: var(--sahifa-fon);
  box-shadow: none;
}

.app-qobiq .tarif-tuzilma {
  display: block;
}

.app-qobiq .tarif-titul {
  margin-bottom: var(--or-3);
}

.app-qobiq .tarif-titul-izoh {
  font-size: 14px;
  color: var(--matn-2);
}

/* Qidiruv/saralash/sevimlilar — ixcham asboblar qatori */
.app-qobiq .vositalar {
  gap: var(--or-2);
}

.app-qobiq .vositalar-joy {
  margin-bottom: var(--or-4);
}
.app-qobiq .tarif-bosh { order: 0; }
.app-qobiq .boshqaruv { order: 1; }
.app-qobiq .titul-joy { order: 2; }
.app-qobiq .filtr-quti { order: 3; }
.app-qobiq .royxat-joy { order: 4; }

/* Kompaniyalar rayi — faqat keng ekranda (`desktop.css`) */
.app-qobiq .kompaniya-ray {
  display: none;
}

/* --- «Qidiruv va filtr» yig'ma qutisi (ilovada bunday panel ko'rinmaydi) --- */

.filtr-quti {
  margin-bottom: var(--or-4);
}

.filtr-tugma {
  display: inline-flex;
  align-items: center;
  gap: var(--or-2);
  min-height: 42px;
  padding: 0 var(--or-4);
  border-radius: var(--r-chip);
  background: var(--yuza);
  color: var(--matn-2);
  font-size: 15px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--ajratgich);
  cursor: pointer;
  list-style: none;
}

.filtr-tugma::-webkit-details-marker {
  display: none;
}

.filtr-quti[open] .filtr-tugma {
  color: var(--kok);
  box-shadow: inset 0 0 0 1.5px var(--kok-och);
}

.filtr-quti .vositalar-joy {
  margin-top: var(--or-3);
}

/* --- Tarif kartasi: ilovadagi `TariffKarta` tuzilishi --- */

.app-qobiq .tarif-tarmoq {
  grid-template-columns: 1fr;
  gap: var(--or-4);
}

.app-qobiq .tarif-karta {
  border-radius: var(--r-karta);
}

/* Sarlavha bloki — operator brend rangida, badge'lar o'ngda */
.app-qobiq .tarif-karta-tepa {
  align-items: center;
  padding: var(--or-4) var(--or-4) var(--or-4) calc(var(--or-4) + 6px);
}

.app-qobiq .tarif-karta-nom {
  font-size: 22px;
}

/* Tana: narx o'ngda, metrikalar chapda (ilova ko'rinishi) */
.app-qobiq .tarif-karta-tana {
  padding: var(--or-4) var(--or-4) var(--or-4) calc(var(--or-4) + 6px);
  gap: var(--or-3);
}

.app-qobiq .tarif-qiymatlar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--or-3);
  order: 2;
}

.app-qobiq .tarif-metrikalar {
  order: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--or-2);
}

.app-qobiq .tarif-metrika {
  padding: 8px var(--or-3);
  background: var(--metrika-fon);
}

.app-qobiq .tarif-metrika span {
  font-size: 14px;
}

.app-qobiq .tarif-metrika .ik {
  width: 18px;
  height: 18px;
}

.app-qobiq .tarif-narx-qator {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  text-align: right;
  padding: var(--or-2) var(--or-3);
  border-radius: var(--r-maydon);
  background: var(--brend-yumshoq);
}

.app-qobiq .tarif-narx {
  font-size: 24px;
}

.app-qobiq .tarif-narx-davri {
  font-size: 13px;
}

.app-qobiq .tarif-rasm {
  order: 3;
}

.app-qobiq .tarif-batafsil {
  min-height: 54px;
  padding-left: calc(var(--or-4) + 6px);
  padding-right: var(--or-4);
}

/*
  ⚠️ Sevimlilar (yurak) tugmasi — sarlavha blokidan **pastga**, «Tarif haqida
  batafsil» qatori bilan bir qatorda turadi: ilovada sarlavhada faqat nom va
  badge'lar bor, yurak esa joy egallab, badge'larni siqib qo'yardi
  (`chizish.js` → `tarifKarta`).
*/
.app-qobiq .tarif-past {
  display: flex;
  align-items: center;
  gap: var(--or-3);
  padding-right: var(--or-4);
  border-top: 1px solid var(--ajratgich);
}

.app-qobiq .tarif-past .tarif-batafsil {
  flex: 1 1 auto;
  width: auto;
  border-top: 0;
}

.app-qobiq .tarif-past .tarif-yurak {
  flex: none;
}

/* ==========================================================================
   7. «TEZ KUNDA» EKRANLARI (To'lov · Mobilset AI) va YORDAM
   ========================================================================== */

.tez-ekran {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--or-4);
  padding: var(--or-6) var(--or-4);
}

/*
  ⚠️ Yordam va Til ekranlarida takroriy sarlavha ko'rsatilmaydi: ekran nomi
  allaqachon **sarlavha panelida** turadi (ilovadagidek). Sarlavha matni
  bosh menyudan turli yo'llar bilan ochilishi mumkinligi uchun HTML da qoladi.
*/
#ekranYordam .ekran-sarlavha,
#ekranTil .ekran-sarlavha {
  display: none;
}

.til-ekran-tugmalar {
  margin-bottom: var(--or-5);
}

.til-amallar {
  display: flex;
  flex-direction: column;
  gap: var(--or-3);
}

.tez-rasm {
  width: 190px;
  max-width: 62%;
  height: auto;
}

.tez-sarlavha {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tez-izoh {
  font-size: 16px;
  line-height: 1.55;
  color: var(--matn-2);
  max-width: 420px;
}

/* --- Yordam ekrani (ma'lumotlar `asosiy.js` da server bazasidan olinadi) --- */

.yordam-ekran {
  display: flex;
  flex-direction: column;
  gap: var(--or-5);
  padding-top: var(--or-2);
}

.yordam-ekran .modal-tavsif {
  margin: 0;
}

/* ==========================================================================
   7b. SOZLAMALAR EKRANI — har bir sozlama **bitta qator**
   --------------------------------------------------------------------------
   Foydalanuvchi talabi (2026-10-17): *«Sozlamalarda Til paneliga globus ikonka
   "Til/Язык" UZ RU tanlovlari bo'lsin barchasi bir qatorda joylashsin.
   Sozlamalardagi qolganlari ham huddi shunday ikonka yozuv, switchlar barchasi
   bir qatorga joylashtirilsin.»*
   ========================================================================== */

.sozlama-royxat {
  display: flex;
  flex-direction: column;
  gap: var(--or-3);
}

.sozlama-qator {
  width: 100%;
  min-height: 58px;
  /* ⚠️ Ikonka · yozuv · boshqaruv — **bir qatorda** */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--or-4);
  padding: var(--or-3) var(--or-4);
  border-radius: var(--r-karta);
  background: var(--yuza);
  text-align: left;
  box-shadow: var(--soya-1), inset 0 0 0 1px var(--ajratgich);
  transition: box-shadow var(--otish), background var(--otish);
}

button.sozlama-qator:hover {
  box-shadow: var(--soya-2), inset 0 0 0 1px var(--kok-och);
}

.sozlama-belgi {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--kok-yumshoq);
  color: var(--kok);
}

.sozlama-matn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--matn);
}

.sozlama-boshqaruv,
.sozlama-yon {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--or-2);
  color: var(--matn-3);
}

/* Til tanlash tugmalari — qator ichida ixcham */
.til-tanlov .til-tugma {
  min-height: 38px;
  min-width: 56px;
  padding: 0 var(--or-4);
  border-radius: 11px;
  font-size: 14px;
}

/* --- Tungi rejim «switch» tugmasi --- */
.sozlama-switch {
  flex: none;
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: var(--ajratgich);
  transition: background var(--otish);
}

.sozlama-switch-tutqich {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(11, 18, 40, 0.28);
  transition: transform var(--otish);
}

.sozlama-switch[aria-checked="true"] {
  background: var(--kok);
}

.sozlama-switch[aria-checked="true"] .sozlama-switch-tutqich {
  transform: translateX(22px);
}

html[data-mavzu="tungi"] .sozlama-qator {
  background: var(--yuza);
  box-shadow: var(--soya-1), inset 0 0 0 1px var(--ajratgich);
}

/* --- «Qo'shimcha» oynasidagi til qatori (UZ/RU) --- */
.menyu-til {
  display: flex;
  gap: var(--or-2);
  margin-bottom: var(--or-4);
}

.menyu-til .til-tugma {
  flex: 1 1 0;
  min-height: 44px;
  font-size: 15px;
}

/* ==========================================================================
   8. PASTKI NAVIGATSIYA (5 band)
   ========================================================================== */

.pastki-nav {
  bottom: 0;
  z-index: 55;
  /*
    ⚠️ Foydalanuvchi talabi (2026-10-17): kunduzgi rejimda panel **asosiy
    fondan ajralib tursin, lekin to'q bo'lmasin** — shu sababli deyarli oq,
    sal ko'kimtir fon (`--panel-fon`) va aniq chegara.
  */
  background: var(--panel-fon);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--ajratgich);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.pastki-nav-ichi {
  min-height: var(--pastki-nav);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 2px;
  padding: 4px var(--or-2);
}

.nav-tugma {
  position: relative;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px;
  border-radius: 14px;
  color: var(--matn-2);
  font-size: 12px;
  font-weight: 700;
  transition: color var(--otish), background var(--otish);
}

.nav-tugma .ik {
  width: 24px;
  height: 24px;
}

.nav-tugma:hover {
  color: var(--kok);
  background: var(--yuza-xira);
}

.nav-tugma.faol {
  color: var(--kok);
}

/*
  ⚠️ Markazdagi «Mobilset AI» tugmasi — ilovadagi kabi **rasmli** tugma
  (`assets/img/ai-tugma.png`).
  ⚠️ Foydalanuvchi talabi (2026-10-17): *«AI button tagida "AI" so'zi kerak
  emas, shu so'zning o'rniga robot rasmni kattalashtirib, pastroqqa surib
  qo'yamiz.»* — yozuv olib tashlandi, rasm kattalashtirildi va pastga surildi.
*/
.nav-ai {
  gap: 0;
  overflow: visible;
}

.nav-ai-rasm {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  /* Rasm panel chekkasidan biroz chiqib, pastroqda turadi */
  margin-top: -20px;
  margin-bottom: -6px;
  filter: drop-shadow(0 6px 14px rgba(11, 18, 40, 0.18));
  transition: transform var(--otish);
}

.nav-ai:hover .nav-ai-rasm {
  transform: translateY(-2px) scale(1.05);
}

.nav-ai.faol .nav-ai-rasm {
  filter: drop-shadow(0 4px 12px rgba(8, 102, 235, 0.45));
}

/* ==========================================================================
   9. FUTER (faqat keng ekranda — tor ekranda navigatsiya uning o'rnida)
   ========================================================================== */

@media (max-width: 760px) {
  .futer {
    display: none;
  }
}

/* Ilova ekranlarida futer kerak emas (faqat tariflar sahifasida ko'rinadi) */
html[data-ekran="splash"] .futer,
html[data-ekran="uy"] .futer,
html[data-ekran="operatorlar"] .futer,
html[data-ekran="tolov"] .futer,
html[data-ekran="ai"] .futer,
html[data-ekran="yordam"] .futer,
html[data-ekran="til"] .futer {
  display: none;
}

/* Operatorlar ekranidagi «Aloqa kompaniyasi» yorlig'i — ilovada yo'q */
#ekranOperatorlar .bolim-yorliq {
  display: none;
}

/* ==========================================================================
   10. SPLASH (kirish ekrani) — ilovadagi welcome ko'rinishi
   --------------------------------------------------------------------------
   ⚠️ Foydalanuvchi talabi (2026-10-17): *«Sayt kompyuterda masshtabi 100%
   holatda ochilganda sahifani barcha komponentlari ekranda to'liq ko'rinib
   tursin. Notebookda ochsam, 100% ekran ko'rinishida davom etish tugmasi pastga
   tushib ko'rinmay qolgan.»*

   Shu sababli splash **ekran balandligiga moslashadi**: logotip va rasm
   `vh` ga bog'langan (`min()`), vertikal oraliqlar esa kichik ekranda
   qisqaradi. Natijada «Davom etish» tugmasi **har doim** ko'rinadi.
   ========================================================================== */

.splash-tarkib {
  max-width: 440px;
}

/* Logotip + «SIM karta ulash terminali» — bitta blok (yaqin turadi) */
.splash-brend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.splash-brend .splash-logo-oila {
  margin-bottom: var(--or-2);
  padding: var(--or-4) var(--or-5);
}

/* ⚠️ Yozuv **kattalashtirildi** va logotipga yaqinlashtirildi (talab) */
.splash-brend .splash-izoh {
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}

.kirish-tasvir {
  width: min(300px, 34vh);
  max-width: 80%;
  height: auto;
  margin: var(--or-2) auto var(--or-4);
  /* ⚠️ Rasm **o'z holida** — tungi rejimda ham filtr berilmaydi (talab) */
  filter: none;
}

.splash-salom {
  margin-top: var(--or-3);
  font-size: clamp(23px, 5vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--matn);
  animation: splash-matn 620ms cubic-bezier(0.2, 0, 0.2, 1) 300ms both;
}

.splash-izoh.kichik {
  font-size: 15px;
  margin-top: var(--or-2);
}

.splash-til {
  margin-top: var(--or-5);
}

.splash-davom {
  margin-top: var(--or-4);
}

/*
  ⚠️ Past ekranlar (notebook, 1366×768 va undan kichik balandlik): oraliqlar
  qisqartiriladi va logotip/rasm kichraytiriladi — hamma narsa bir ekranga
  sig'adi.
*/
@media (max-height: 780px) {
  .splash-brend .splash-logo {
    width: min(280px, 46vh);
  }

  .kirish-tasvir {
    width: min(240px, 30vh);
    margin: var(--or-1) auto var(--or-3);
  }

  .splash-salom {
    margin-top: var(--or-2);
    font-size: 22px;
  }

  .splash-til,
  .splash-davom {
    margin-top: var(--or-3);
  }

  .splash-brend .splash-logo-oila {
    padding: var(--or-2) var(--or-4);
  }
}

/*
  ⚠️ 2026-10-17 (24-sessiya): **kiosk paneli olib tashlandi** — kiosk ham saytning
  o'z app bar'ini ishlatadi (`kiosk.css` dagi `html.kiosk` qoidalari faqat keraksiz
  qismlarni yashiradi: futer, SEO, cookie, yurak/sevimlilar). Shu sababli bu yerda
  kioskka xos qobiq chekkasi ham kerak emas.
*/

/* ==========================================================================
   12. TUNGI REJIM
   ========================================================================== */

html[data-mavzu="tungi"] .xizmat,
html[data-mavzu="tungi"] .operator-qator {
  background: var(--yuza);
  box-shadow: var(--soya-1), inset 0 0 0 1px var(--ajratgich);
}

html[data-mavzu="tungi"] .xizmat.nofaol,
html[data-mavzu="tungi"] .operator-qator.nofaol {
  background: var(--yuza-xira);
}

html[data-mavzu="tungi"] .xizmat-belgi {
  background: #12294a;
  color: var(--kok-och);
}

html[data-mavzu="tungi"] .tez-badge {
  background: #3b2a08;
  color: #ffc266;
}

html[data-mavzu="tungi"] .operator-yon .tez-badge {
  background: #1b2440;
  color: var(--matn-2);
}

html[data-mavzu="tungi"] .app-qobiq .tarif-narx-qator {
  background: var(--brend-yumshoq-tungi);
}

html[data-mavzu="tungi"] .operator-logo {
  background: #1b2440;
}

/* Tungi rejimda panellar quyuq (kunduzgi `--panel-fon` ustidan yoziladi) */
html[data-mavzu="tungi"] {
  --panel-fon: rgba(14, 22, 44, 0.94);
  /* Tungi rejimda sahifa foni — panellardan sal to'qroq */
  --sahifa-fon: #0b1228;
}

/*
  ⚠️ TUZATILGAN XATO (foydalanuvchi shikoyati, 2026-10-17):
  *«Night rejimida "Beeline" kompaniya yozuvi ham qora bo'lgani uchun, bu yozuv
  ko'rinmay ketyapti…»*

  ⚠️ Foydalanuvchi talabi (2026-10-17, 3-qism): *«Night rejimida Barcha kompaniya
  nomlari hamma joyda, header va sahifalarda Oq rangda ko'rsatilsin.»*
  Shuning uchun tungi rejimda **hamma** kompaniya nomi oq — brend rangi faqat
  logotip/fon/hoshiyada qoladi. Logotiplar **o'z holida** (filtr berilmaydi).
*/
html[data-mavzu="tungi"] .operator-nom,
html[data-mavzu="tungi"] .kompaniya-nom,
html[data-mavzu="tungi"] .futer-kompaniya,
html[data-mavzu="tungi"] .futer-kompaniya.faol,
html[data-mavzu="tungi"] .futer-kompaniya:hover {
  color: #ffffff;
}

/*
  ⚠️ Sarlavha panelidagi kompaniya nomi («{Kompaniya} tariflari») — tungi
  rejimda **oq** (kunduzgi rejimda kompaniyaning o'z rangi, `--sarlavha-nom-rang`
  orqali `asosiy.js` dan beriladi).
*/
html[data-mavzu="tungi"] .app-qobiq .brend-izoh {
  color: #ffffff;
}

/* Tungi rejimda sarlavha panelidagi barcha yozuvlar ham oq */
html[data-mavzu="tungi"] .nav-tugma,
html[data-mavzu="tungi"] .nav-tugma span {
  color: #ffffff;
}

/* Logotiplar **o'z holida** qoladi — tungi rejimda ham filtr berilmaydi */
html[data-mavzu="tungi"] .operator-logo img,
html[data-mavzu="tungi"] .brend-logo,
html[data-mavzu="tungi"] .brend-belgi,
html[data-mavzu="tungi"] .sarlavha-markaz {
  filter: none;
}

/* ==========================================================================
   13. MOSLASHUV
   ========================================================================== */

@media (max-width: 400px) {
  .app-qobiq .brend-izoh {
    font-size: 14px;
  }

  .app-qobiq .brend-logo {
    height: 26px;
  }

  .nav-tugma {
    font-size: 11px;
  }

  .nav-ai-rasm {
    width: 48px;
    height: 48px;
  }
}

/* Harakatni kamaytirish (a11y) — `asos.css` bilan bir xil qoida */
@media (prefers-reduced-motion: reduce) {
  .xizmat,
  .operator-qator,
  .nav-ai-rasm {
    transition: none !important;
  }
}