/* ==========================================================================
   TARIFLAR BO'LIMI
   --------------------------------------------------------------------------
   Tuzilish ilovadagi `ui/home/TariffsScreen.kt` dan olingan:
     1. kompaniyalar paneli (keng ekranda — chap ray, tor ekranda — slayder)
     2. tarif kategoriyalari (chiplar)
     3. «{Kompaniya} tariflari» tituli + brend rangli chiziq
     4. tarif kartalari (`ui/home/TariffKarta.kt`)
   ========================================================================== */

/* --------------------------------------------------- 1. UMUMIY TUZILMA */

.tarif-tuzilma {
  display: grid;
  gap: var(--or-7);
  align-items: start;
  grid-template-columns: 1fr;
}

/* Keng ekranda ikki panelli ko'rinish (ilovadagi `TariffsWideLayout`, 900dp) */
@media (min-width: 1000px) {
  .tarif-tuzilma {
    grid-template-columns: var(--ray-kenglik) minmax(0, 1fr);
    gap: var(--or-8);
  }
}

.tarif-kontent {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Tor rejimda tartib: kompaniyalar + kategoriyalar → titul → ro'yxat */
.boshqaruv { order: 1; }
.titul-joy { order: 2; }
.royxat-joy { order: 3; }

/*
  ⚠️ Keng ekranda (chap ray bor) tartib ilovadagi `TariffsWideLayout` kabi:
  titul → kategoriyalar → ro'yxat.
*/
@media (min-width: 1000px) {
  .titul-joy { order: 1; }
  .boshqaruv { order: 2; }
  .royxat-joy { order: 3; }
}

/*
  Boshqaruv paneli (kompaniya slayderi + kategoriya chiplari) sarlavha ostiga
  yopishadi (ilovadagi «skrollda kompaniyalar paneli tepaga yopishadi» xatti-harakati).

  ⚠️ Foydalanuvchi talabi (2026-11-06): *«Tariflar kataloglar qatori sahifa pastga
  tushirilganda headerning pastida qatirib qo'yilsin, yuqoriga chiqib ketmasin.
  Qidiruv va filtr esa tepaga surilib, kataloglar panelining orqa tarafiga o'tib
  surilib ketsin»*.

  Buning uchun panel:
    · `position: sticky` + `top: var(--yopishqa-tepa)` — sarlavha ostida qotadi;
    · **shaffof bo'lmagan fon** (`var(--fon)`) — ostidan o'tayotgan qidiruv,
      saralash va tarif kartalari uning **orqasida** qoladi (aks holda matnlar
      bir-birining ustiga tushib aralashib ko'rinardi);
    · `z-index: 20` — sarlavhadan (`40`) past, kontentdan yuqori.
*/
.boshqaruv {
  position: sticky;
  top: var(--yopishqa-tepa);
  z-index: 20;
  background: var(--fon);
  padding-top: var(--or-2);
  margin-top: calc(var(--or-2) * -1);
}

/*
  ⚠️ Keng ekranda ham panel **yopishib turadi** (foydalanuvchi talabi, 2026-11-06).
  Ilgari bu yerda `position: static` edi: chiplar qatori skrollda yuqoriga chiqib
  ketardi va kategoriyani almashtirish uchun sahifani tepaga qaytarish kerak edi.

  Pastdagi yumshoq soya — panel «suzib turgani» va ostidagi qidiruv/kartalar
  undan **orqada** qolgani ko'rinib tursin.
*/
@media (min-width: 1000px) {
  .boshqaruv {
    padding: var(--or-3) 0;
    margin-top: 0;
    margin-bottom: var(--or-2);
    box-shadow: 0 10px 14px -12px rgba(11, 18, 40, 0.45);
  }
}

/* --------------------------------------------------- 2. KOMPANIYALAR RAYI */

.kompaniya-ray {
  display: none;
}

@media (min-width: 1000px) {
  .kompaniya-ray {
    display: block;
    position: sticky;
    top: calc(var(--sarlavha-balandligi) + var(--or-5));
    background: var(--yuza);
    border-radius: var(--r-karta);
    padding: var(--or-5);
    box-shadow: var(--soya-1);
  }

  /* Tor ekrandagi slayder keng rejimda kerak emas */
  .kompaniya-slayder-oila {
    display: none;
  }
}

.bolim-yorliq {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--matn-3);
  margin-bottom: var(--or-4);
}

.kompaniya-ray-royxat {
  display: grid;
  gap: var(--or-2);
}

/* Bitta kompaniya qatori — ilovadagi `CompanyRailRow` */
.kompaniya-qator {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--or-4);
  width: 100%;
  min-height: 56px;
  padding: var(--or-3) var(--or-4);
  border-radius: var(--r-maydon);
  text-align: left;
  transition: background var(--otish), box-shadow var(--otish);
}

.kompaniya-qator:hover {
  background: var(--yuza-xira);
}

.kompaniya-qator.faol {
  background: var(--kompaniya-yumshoq, var(--kok-yumshoq));
  box-shadow: inset 0 0 0 2px var(--kompaniya-chet, var(--kok));
}

.kompaniya-qator.faol:hover {
  background: var(--kompaniya-yumshoq, var(--kok-yumshoq));
}

.kompaniya-qator .kompaniya-logo {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 10px;
  background: var(--yuza);
  box-shadow: inset 0 0 0 1px var(--ajratgich);
  display: grid;
  place-items: center;
  padding: 5px;
}

.kompaniya-qator .kompaniya-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
  Logotip yuklanmasa — operatorning brend rangidagi bosh harfi.
  ⚠️ Aks holda chap rayda «bo'sh oq kvadrat» qolib, kompaniyalar ajralmasdi.
  Harf `data-harf` atributidan olinadi (`chizish.js`), rang esa `--brend` dan —
  ya'ni kompaniya almashganda avtomatik to'g'ri rangga o'tadi (`ranglarniQolla`).
*/
.kompaniya-logo.logo-yoq {
  padding: 0;
  background: var(--brend);
  box-shadow: none;
}

.kompaniya-logo.logo-yoq::after {
  content: attr(data-harf);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  color: var(--brend-matn);
}

.kompaniya-nom {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  /*
    ⚠️ Nom rangi `--kompaniya-matn` dan olinadi (brend rangidan EMAS): Beeline
    sariq bo'lgani uchun oq fonda o'qilmasdi. Qiymat har bir tugmaga
    `ranglarniQolla` orqali qo'yiladi (`chizish.js` → `kompaniyaMatnRangi`).
    Shu sababli **tanlov** nom rangiga ta'sir qilmaydi — u kompaniyaning
    o'ziga bog'langan (foydalanuvchi talabi, 2026-11-06).
  */
  color: var(--kompaniya-matn, var(--kompaniya-rang, var(--matn)));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tanlangan belgisi — brend rangli doira ichida oq ✓ (ilovadagidek) */
.kompaniya-belgi {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kompaniya-chet, var(--kok));
  color: #fff;
}

.kompaniya-belgi .ik {
  width: 15px;
  height: 15px;
}

/* --------------------------------------------------- 3. KOMPANIYA SLAYDERI */

.kompaniya-slayder-oila {
  position: relative;
  margin-bottom: var(--or-4);
}

.kompaniya-slayder {
  display: flex;
  gap: var(--or-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: var(--or-1) var(--or-1) var(--or-3);
  margin: calc(var(--or-1) * -1);
  -webkit-overflow-scrolling: touch;
}

.kompaniya-slayder::-webkit-scrollbar {
  display: none;
}

/* Slayder kartasi — logotip + nom, kompaniya rangida */
.kompaniya-karta {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--or-3);
  min-width: 168px;
  min-height: 58px;
  padding: var(--or-2) var(--or-5);
  border-radius: var(--r-maydon);
  background: var(--yuza);
  box-shadow: inset 0 0 0 1.5px var(--ajratgich);
  transition: background var(--otish), box-shadow var(--otish), transform var(--otish);
}

.kompaniya-karta:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1.5px var(--kompaniya-chet, var(--kok));
}

.kompaniya-karta.faol {
  background: var(--kompaniya-yumshoq, var(--kok-yumshoq));
  box-shadow: inset 0 0 0 2px var(--kompaniya-chet, var(--kok));
}

.kompaniya-karta .kompaniya-logo {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: var(--yuza);
  box-shadow: inset 0 0 0 1px var(--ajratgich);
  display: grid;
  place-items: center;
  padding: 3px;
}

.kompaniya-karta .kompaniya-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Slayderda ham logotip yuklanmasa — brend rangidagi bosh harf */
.kompaniya-karta .kompaniya-logo.logo-yoq {
  padding: 0;
  background: var(--brend);
  box-shadow: none;
}

.kompaniya-karta .kompaniya-logo.logo-yoq::after {
  content: attr(data-harf);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--brend-matn);
}

.kompaniya-karta .kompaniya-nom {
  flex: none;
  font-size: 16px;
  text-align: center;
}

/* Slayderdagi ✓ — kartaning o'ng yuqori burchagida */
.kompaniya-karta .kompaniya-belgi {
  position: absolute;
  top: -7px;
  right: -6px;
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 2.5px var(--fon);
}

/* Slayder strelkalari — faqat ro'yxat sig'maganda (ilovadagi `SliderArrowButton`) */
.slayder-strelka {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yuza);
  color: var(--apelsin);
  box-shadow: var(--soya-2), inset 0 0 0 1px var(--ajratgich);
  transition: background var(--otish), transform var(--otish), opacity var(--otish);
}

.slayder-strelka:hover {
  background: var(--apelsin-yumshoq);
}

.slayder-strelka.chap { left: -6px; }
.slayder-strelka.ong { right: -6px; }

.slayder-strelka[hidden] {
  display: none;
}

/* --------------------------------------------------- 4. KATEGORIYA CHIPLARI */

.kategoriya-panel {
  position: relative;
  margin-bottom: var(--or-5);
}

.kategoriya-qator {
  display: flex;
  gap: var(--or-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--or-1) var(--or-1) var(--or-3);
  margin: calc(var(--or-1) * -1);
  -webkit-overflow-scrolling: touch;
}

.kategoriya-qator::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------- 5. TITUL */
/*
  ⚠️ Foydalanuvchi talabi (2026-11-06): «{Kompaniya} tariflari» sarlavhasi va
  uning brend rangli chizig'i bu yerdan **olib tashlandi** — ular endi sahifa
  sarlavhasida (`.brend-izoh`, `index.html`). Bu blokda faqat tarif soni qoladi.
*/

.tarif-titul {
  margin-bottom: var(--or-5);
}

.tarif-titul-izoh {
  margin-top: var(--or-2);
  font-size: 15px;
  font-weight: 500;
  color: var(--matn-2);
}

/* --------------------------------------------------- 6. TARIF KARTALARI */

.tarif-tarmoq {
  display: grid;
  gap: var(--or-5);
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  /*
    ⚠️ `start` — foydalanuvchi talabi (2026-11-06): *«Tarif kartasi tarif rasmi
    o'lchamiga moslashib qolsin, ortiqcha bo'sh joylar imkon qadar yopilsin»*.

    Ilgari `stretch` edi: bir qatordagi barcha kartalar eng baland karta
    balandligiga cho'zilardi va rasmi past (masalan 1200×600) kartaning ostida
    katta bo'sh joy qolardi (uni `.tarif-ajratgich { margin-top: auto }` pastga
    surib, «Batafsil» qatorini pastga yopishib turardi). Endi har bir karta
    **o'z mazmuni qadar** baland: rasm nisbati qanday bo'lsa — karta ham shunday.

    ⚠️ Natijada bir qatordagi kartalar balandligi **har xil** bo'lishi mumkin
    («Batafsil» qatorlari bir chiziqqa tushmaydi) — bu ataylab: bo'sh joydan
    ko'ra har xil balandlik afzal (foydalanuvchi talabi).
  */
  align-items: start;
}

@media (max-width: 400px) {
  .tarif-tarmoq {
    grid-template-columns: 1fr;
  }
}

/* Karta — `TariffKarta.kt` bilan bir xil tuzilish */
.tarif-karta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--yuza);
  border-radius: var(--r-karta);
  overflow: hidden;
  box-shadow: var(--soya-1);
  transition: box-shadow var(--otish-sekin), transform var(--otish-sekin);
}

.tarif-karta:hover {
  transform: translateY(-2px);
  box-shadow: var(--soya-2);
}

/* Chapdagi ingichka operator aksenti — sarlavha bloki ostida ko'rinadi */
.tarif-karta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--brend);
  z-index: 1;
}

/* --- Sarlavha bloki: operator brend rangida --- */
.tarif-karta-tepa {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: var(--or-4);
  padding: var(--or-4) var(--or-5) var(--or-4) calc(var(--or-5) + 6px);
  background: var(--sarlavha-fon);
  color: var(--brend-matn);
}

.tarif-karta-nom {
  flex: 1;
  min-width: 0;
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--brend-matn);
  overflow-wrap: anywhere;
}

.tarif-badge-lar {
  display: flex;
  align-items: center;
  gap: var(--or-3);
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Badge — faqat axborot belgisi, bosilmaydi (ilovadagi `TariffBadge`) */
.tarif-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--r-chip);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(11, 18, 40, 0.14);
}

.tarif-badge .ik {
  width: 20px;
  height: 20px;
}

.tarif-badge.xit {
  background: var(--xit-fon);
  color: var(--xit-matn);
}

.tarif-badge.aksiya {
  background: var(--aksiya-fon);
  color: var(--aksiya-matn);
  box-shadow: 0 1px 4px rgba(11, 18, 40, 0.16), inset 0 0 0 1.5px currentColor;
}

/*
  VIP badge (2026-10-16) — oltin/amber, **birinchi** turadi (`.tarif-badge-lar`
  tartibi `chizish.js` → `badgeLar()` da). O'lcham, padding, radius va ikonka
  o'lchami `.tarif-badge` bilan bir xil; rang qiymatlari `asos.css` dagi
  `--vip-*` o'zgaruvchilaridan olinadi (tungi rejimda faqat matn o'zgaradi —
  `qoshimcha.css`). Soyalar `.aksiya` bilan bir xil — badge sarlavhadan
  ajralib turadi.
*/
.tarif-badge.vip {
  background: linear-gradient(180deg, var(--vip-fon), var(--vip-fon-2));
  color: var(--vip-matn);
  box-shadow: 0 1px 4px rgba(11, 18, 40, 0.16), inset 0 0 0 1.5px var(--vip-hoshiya);
}

/* --- Karta tanasi --- */
.tarif-karta-tana {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--or-4);
  padding: var(--or-5) var(--or-5) var(--or-5) calc(var(--or-5) + 6px);
}

/*
  Narx va metrikalar guruhi — ilovadagi qoida bo'yicha rasm yuklanganda
  butunlay yashirilishi mumkin (`RASM_BOLSA_YASHIR`).
*/
.tarif-qiymatlar {
  display: grid;
  gap: var(--or-4);
}

.tarif-narx-qator {
  display: flex;
  align-items: baseline;
  gap: var(--or-2);
  flex-wrap: wrap;
}

.tarif-narx {
  font-size: clamp(25px, 3.1vw, 30px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--matn);
}

.tarif-narx-davri {
  font-size: 15px;
  font-weight: 600;
  color: var(--matn-2);
}

/* Metrikalar — uchta katak (internet · daqiqa · SMS) */
.tarif-metrikalar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-3);
}

.tarif-metrika {
  display: inline-flex;
  align-items: center;
  gap: var(--or-2);
  padding: 9px var(--or-4);
  border-radius: var(--r-maydon);
  background: var(--metrika-fon);
}

.tarif-metrika .ik {
  width: 21px;
  height: 21px;
  color: var(--kok);
}

.tarif-metrika span {
  font-size: 16px;
  font-weight: 800;
  color: var(--matn);
  white-space: nowrap;
}

/*
  Reklama rasmi (infografika).
  ⚠️ Rasm alohida element bilan «yashirilmaydi»: u oddiy oqimda turadi, fon esa
  yuklanayotganda chiziqli «skelet» bo'lib ko'rinadi. Sabab: `display:none`
  qilingan «lazy» rasm brauzerda **umuman yuklanmaydi** va abadiy ko'rinmay
  qoladi (aynan shu xato bo'lgan).

  ⚠️ **Nisbat — foydalanuvchi talabi (2026-11-06):** *«Men 1200×600 px rasm
  yuklasam, tepa va past qismlarida bo'sh joylar bilan ko'rsatilyapti; karta rasm
  o'lchamiga moslashib qolsin»*.

  Shuning uchun `aspect-ratio: 4/3` endi faqat **yuklanayotganda** skelet
  o'lchami (rasm kelguncha karta «sakramasin»). Rasm chizilgach `asosiy.js`
  `.yuklandi` sinfini qo'shadi va nisbat `auto` bo'ladi — balandlikni
  **rasmning o'zi** belgilaydi (`img { height: auto }`), ya'ni 1200×600 rasm
  tepa/pastda bo'sh joy qoldirmaydi.

  ⚠️ `object-fit: contain` saqlanadi: kutilmagan nisbatdagi rasm ham
  **kesilmaydi** (faqat karta o'sha nisbatda cho'ziladi).
*/
.tarif-rasm {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border-radius: var(--r-maydon);
  overflow: hidden;
  background-color: var(--metrika-fon);
  background-image: linear-gradient(90deg, #eef3fa 25%, #e4ecf7 37%, #eef3fa 63%);
  background-size: 400% 100%;
  animation: siljish 1.4s ease infinite;
  cursor: zoom-in;
  transition: box-shadow var(--otish);
}

/* Rasm chizilgach: skelet to'xtaydi va balandlik rasm nisbatidan olinadi */
.tarif-rasm.yuklandi {
  animation: none;
  background-image: none;
  aspect-ratio: auto;
}

.tarif-rasm:hover {
  box-shadow: 0 0 0 2px var(--brend-chet);
}

/*
  ⚠️ `height: auto` (ilgari `100%` edi) — karta balandligini rasm nisbati
  belgilashi uchun. `width: 100%` + `height: auto` = rasm **proporsional**
  kengayadi, hech qanday bo'sh hoshiya qolmaydi (`object-fit: contain` zaxira
  sifatida qoladi — nisbat hisoblanmasa ham rasm kesilmaydi).
*/
.tarif-rasm img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.tarif-rasm.xato {
  display: none;
}

/* Ajratuvchi + «Tarif haqida batafsil» qatori */
.tarif-ajratgich {
  position: relative;
  z-index: 2;
  height: 1px;
  /* Kartani pastga yopishib turadi (qatordagi kartalar bir xil balandlikda) */
  margin-top: auto;
  background: var(--ajratgich);
}

.tarif-batafsil {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--or-4);
  width: 100%;
  min-height: 58px;
  padding: var(--or-3) var(--or-5) var(--or-3) calc(var(--or-5) + 6px);
  text-align: left;
  background: var(--yuza);
  transition: background var(--otish);
}

.tarif-batafsil:hover {
  background: var(--kok-yumshoq);
}

.tarif-batafsil .ik-hujjat {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--kok);
}

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

.tarif-batafsil .batafsil-doira {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--qator-doira-fon);
  color: var(--kok);
  transition: transform var(--otish);
}

.tarif-batafsil:hover .batafsil-doira {
  transform: translateX(2px);
}

.tarif-batafsil .batafsil-doira .ik {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------- 7. MODAL OYNALAR */

.parda {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--parda);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--or-5);
  animation: parda-kirish 220ms ease both;
}

.parda[hidden] {
  display: none;
}

@keyframes parda-kirish {
  from { opacity: 0; }
  to { opacity: 1; }
}

.parda.yopilyapti {
  animation: parda-chiqish 200ms ease both;
}

@keyframes parda-chiqish {
  from { opacity: 1; }
  to { opacity: 0; }
}

.modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  background: var(--yuza);
  border-radius: var(--r-oyna);
  overflow: hidden;
  box-shadow: var(--soya-4);
  animation: modal-kirish 300ms cubic-bezier(0.18, 1.1, 0.4, 1) both;
}

@keyframes modal-kirish {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.parda.yopilyapti .modal {
  animation: modal-chiqish 200ms ease both;
}

@keyframes modal-chiqish {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(12px) scale(0.98); }
}

.modal-tepa {
  display: flex;
  align-items: center;
  gap: var(--or-4);
  padding: var(--or-5) var(--or-5) var(--or-4);
  border-bottom: 1px solid var(--ajratgich);
}

.modal-sarlavha {
  flex: 1;
  min-width: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.modal-yopish {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yuza-xira);
  color: var(--matn-2);
  transition: background var(--otish), color var(--otish), transform var(--otish);
}

.modal-yopish:hover {
  background: var(--xato-fon);
  color: var(--xato);
  transform: rotate(90deg);
}

.modal-tana {
  padding: var(--or-5);
  overflow-y: auto;
  display: grid;
  gap: var(--or-4);
  -webkit-overflow-scrolling: touch;
}

.modal-rasm {
  width: 100%;
  border-radius: var(--r-maydon);
  overflow: hidden;
  background: var(--metrika-fon);
}

.modal-rasm img {
  width: 100%;
  height: auto;
}

.modal-rasm.yoq {
  aspect-ratio: 3 / 1;
  display: grid;
  place-items: center;
  color: var(--matn-3);
  font-size: 14px;
  font-weight: 600;
}

.modal-tavsif {
  font-size: 16px;
  color: var(--matn-2);
}

/* --------------------------------------------------------------------------
   YORDAM (CALL-CENTER) OYNASI — kontaktlar va «Mobilset hujjatlari» bloki
   --------------------------------------------------------------------------
   ⚠️ Foydalanuvchi talabi (2026-11-06): ma'lumotlar **server bazasidan** olinadi
   (`GET /api/v1/yordam` + `GET /katalog/oferta?company=mobilset`) va oyna
   ilovadagidek ko'rinadi: kontakt kartalari (telefon · Telegram · WhatsApp) va
   **alohida ajralib turgan** hujjatlar bloki.
   Barcha ranglar o'zgaruvchilardan olinadi — tungi rejimda o'zi moslashadi.
   -------------------------------------------------------------------------- */

/* Kontaktlar — ustma-ust, to'liq kenglikda */
.yordam-tugmalar {
  display: grid;
  gap: var(--or-3);
}

.yordam-tugmalar .ik {
  flex: none;
}

/* Hujjatlar bloki — och ko'k fon + chegara (ilovadagi `HelpScreen` bilan bir xil) */
.yordam-hujjatlar {
  display: grid;
  gap: var(--or-3);
  padding: var(--or-4);
  border-radius: var(--r-maydon);
  background: var(--kok-yumshoq);
  box-shadow: inset 0 0 0 1px var(--ajratgich);
}

.yordam-hujjatlar-sarlavha {
  display: flex;
  align-items: center;
  gap: var(--or-3);
  font-size: 15px;
  font-weight: 800;
  color: var(--matn);
}

.yordam-hujjatlar-sarlavha > .ik {
  color: var(--kok);
  flex: none;
}

/* Hujjatlar soni — o'ng chetda (ilovadagi son belgisi) */
.yordam-hujjatlar-soni {
  margin-left: auto;
  min-width: 26px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--yuza);
  color: var(--matn-2);
  font-size: 13px;
  font-weight: 800;
}

.yordam-hujjatlar-royxat {
  display: grid;
  gap: var(--or-2);
}

/* Bitta hujjat qatori — PDF **yangi oynada** ochiladi */
.yordam-hujjat {
  display: flex;
  align-items: center;
  gap: var(--or-3);
  padding: 12px var(--or-4);
  border-radius: var(--r-maydon);
  background: var(--yuza);
  box-shadow: inset 0 0 0 1.5px var(--ajratgich);
  color: var(--matn);
  font-size: 15px;
  font-weight: 600;
  transition: box-shadow var(--otish), transform var(--otish);
}

.yordam-hujjat:hover {
  box-shadow: inset 0 0 0 1.5px var(--kok);
  transform: translateY(-1px);
}

.yordam-hujjat > .ik-20 {
  color: var(--kok);
  flex: none;
}

.yordam-hujjat-nom {
  min-width: 0;
  overflow-wrap: anywhere;
}

.yordam-hujjat-ok {
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--matn-3);
}

/* Yuklanmoqda holati va zaxira ogohlantirishi */
.yordam-kutish {
  color: var(--matn-3);
}

.yordam-ogohlantirish {
  font-size: 14px;
  color: var(--ogohlantirish);
}

/* Slayder boshqaruvi: oldingi/keyingi + nuqtalar */
.modal-boshqaruv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--or-4);
  padding: var(--or-4) var(--or-5);
  border-top: 1px solid var(--ajratgich);
}

.modal-nuqtalar {
  display: flex;
  align-items: center;
  gap: var(--or-2);
  flex-wrap: wrap;
  justify-content: center;
}

.modal-nuqta {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ajratgich);
  transition: background var(--otish), width var(--otish);
}

.modal-nuqta.faol {
  width: 22px;
  border-radius: 999px;
  background: var(--brend);
}

.modal-strelka {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yuza-xira);
  color: var(--matn);
  transition: background var(--otish), color var(--otish);
}

.modal-strelka:hover:not(:disabled) {
  background: var(--kok-yumshoq);
  color: var(--kok);
}

.modal-strelka:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --------------------------------------------------- 8. RASM KO'RISH OYNASI */

.rasm-oyna {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6, 11, 26, 0.94);
  display: flex;
  flex-direction: column;
  animation: parda-kirish 200ms ease both;
}

.rasm-oyna[hidden] {
  display: none;
}

.rasm-oyna-tepa {
  display: flex;
  align-items: center;
  gap: var(--or-4);
  padding: var(--or-4) var(--or-5);
  color: #fff;
}

.rasm-oyna-sarlavha {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rasm-oyna-sanoq {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}

.rasm-oyna-yopish {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background var(--otish);
}

.rasm-oyna-yopish:hover {
  background: rgba(255, 255, 255, 0.24);
}

.rasm-oyna-sahna {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /*
    ⚠️ FLEX (grid emas) — bu shart.

    Ilgari bu yerda `display: grid; place-items: center` bor edi. Grid'da `1fr`
    qator konteyner balandligiga tenglashmadi: o'lchov ko'rsatdi — sahna
    880.5px, qator esa **900px** (rasmning o'z balandligi). Shu sababli rasmdagi
    `max-height: 100%` 900px ga nisbatan hisoblanib, hech narsani cheklamadi va
    rasm ekrandan chiqib ketdi (1200x900 rasm, 881px sahna).

    Flex'da `max-height: 100%` konteynerning **aniq** kontent balandligiga
    nisbatan hisoblanadi — rasm to'liq sig'adi.
  */
  overflow: hidden;
  touch-action: none;
  /*
    Yon strelkalar rasm ustiga tushmasligi uchun chekka bo'shliq:
    strelka 52px + chetdan `--or-5` -> shundan kattaroq qilib olamiz.
  */
  padding: var(--or-4) clamp(72px, 7vw, 104px);
}

.rasm-oyna-sahna img {
  /* ⚠️ `100%` — konteynerning kontent o'lchamiga nisbatan, ekranga emas */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--or-3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  transition: transform 120ms ease-out;
  user-select: none;
  -webkit-user-drag: none;
  /* ⚠️ Yon strelkalar rasm USTIDA turishi kerak (kattalashtirilganda ham) */
  position: relative;
  z-index: 1;
}

.rasm-oyna-sahna img.kattalashgan {
  cursor: grab;
}

/*
  ⚠️ Surish (swipe) paytida `transition` o'chiriladi — aks holda rasm barmoqdan
  orqada «kechikib» harakatlanadi.
*/
.rasm-oyna-sahna img.surilmoqda {
  transition: none;
}

.rasm-oyna-yon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* ⚠️ Rasm kattalashtirilganda ham strelka ustida qolishi uchun */
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /*
    ⚠️ Ilgari fon `rgba(255, 255, 255, 0.14)` edi — quyuq pardada yaxshi
    ko'rinardi, lekin rasm kattalashtirilib strelka rasmdan USTIGA tushganda
    (ayniqsa yorqin/sariq infografikada) butunlay bilinmay qolardi.

    Endi: quyuq yarim shaffof fon + oq ikonka + oq chegara + soya. Har qanday
    rasm ustida ham aniq ajralib turadi.
  */
  background: rgba(11, 18, 40, 0.66);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background var(--otish), box-shadow var(--otish);
}

.rasm-oyna-yon:hover,
.rasm-oyna-yon:focus-visible {
  background: rgba(11, 18, 40, 0.86);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.6),
    inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* Bosilganda — barmoq ostida javob beradi */
.rasm-oyna-yon:active {
  background: rgba(11, 18, 40, 0.95);
}

.rasm-oyna-yon.chap { left: var(--or-5); }
.rasm-oyna-yon.ong { right: var(--or-5); }

.rasm-oyna-yon[hidden] {
  display: none;
}

.rasm-oyna-past {
  padding: var(--or-4) var(--or-5) var(--or-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--or-3);
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
}

/* --------------------------------------------------- 9. MOSLASHUV */

@media (max-width: 620px) {
  .tarif-karta-tepa {
    padding: var(--or-3) var(--or-4) var(--or-3) calc(var(--or-4) + 6px);
  }

  .tarif-karta-tana {
    padding: var(--or-4) var(--or-4) var(--or-4) calc(var(--or-4) + 6px);
    gap: var(--or-3);
  }

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

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

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

  .tarif-metrika span {
    font-size: 15px;
  }

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

  .tarif-badge {
    padding: 7px 11px;
    font-size: 14px;
  }

  .tarif-badge .ik {
    width: 18px;
    height: 18px;
  }

  .parda {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--r-oyna) var(--r-oyna) 0 0;
    animation: modal-pastdan 320ms cubic-bezier(0.18, 1.1, 0.4, 1) both;
  }

  @keyframes modal-pastdan {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: none; }
  }

  .rasm-oyna-yon.chap { left: var(--or-3); }
  .rasm-oyna-yon.ong { right: var(--or-3); }

  /* Tor ekranda strelkalar kichrayadi — rasmga ko'proq joy qoladi */
  .rasm-oyna-sahna {
    padding: var(--or-3) clamp(58px, 15vw, 72px);
  }

  .rasm-oyna-yon {
    /* Barmoq uchun qulay o'lcham (kamida 44px) */
    width: 48px;
    height: 48px;
  }
}