/* ==========================================================================
   QO'SHIMCHA — qidiruv, saralash, sevimlilar, tungi rejim va boshqa qismlar
   --------------------------------------------------------------------------
   ⚠️ Bu fayl `asos.css` dan KEYIN yuklanadi: u yerdagi o'zgaruvchilarni
   (ayniqsa tungi rejimda) qayta belgilaydi.
   ========================================================================== */

/* ---------------------------------------------------- 0. YORDAMCHI */

/* Futerda cookie sozlamalarini qayta ochish */
.futer-cookie {
  font-size: 14px;
  font-weight: 600;
  color: var(--matn-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--otish);
}

.futer-cookie:hover {
  color: var(--kok);
}

/*
  Faqat keng ekranda ko'rinadigan elementlar (telefonda sarlavha sig'ishi uchun).
*/
@media (max-width: 619px) {
  .faqat-keng {
    display: none !important;
  }
}

/* Klaviatura bilan kelganda «Kontentga o'tish» havolasi */
.otkazish-havolasi {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--kok);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.otkazish-havolasi:focus {
  transform: none;
  text-decoration: none;
}

/* ---------------------------------------------------- 1. VOSITALAR PANELI */

.vositalar-joy {
  order: 3;
  margin-bottom: var(--or-5);
}

.vositalar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-3);
  align-items: center;
}

/* --- Qidiruv maydoni --- */
.qidiruv {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--or-3);
  height: 48px;
  padding: 0 var(--or-3) 0 var(--or-4);
  border-radius: var(--r-chip);
  background: var(--yuza);
  box-shadow: inset 0 0 0 1.5px var(--ajratgich);
  transition: box-shadow var(--otish);
}

.qidiruv:focus-within {
  box-shadow: inset 0 0 0 2px var(--kok);
}

.qidiruv > .ik {
  color: var(--matn-3);
  flex: none;
}

.qidiruv:focus-within > .ik {
  color: var(--kok);
}

.qidiruv-maydon {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--matn);
  font: inherit;
  font-size: 16px;
}

.qidiruv-maydon::placeholder {
  color: var(--matn-3);
}

/* Brauzerning o'z «tozalash» tugmasini yashiramiz — o'zimizniki bor */
.qidiruv-maydon::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.qidiruv-tozalash {
  width: 32px;
  height: 32px;
  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);
}

.qidiruv-tozalash:hover {
  background: var(--xato-fon);
  color: var(--xato);
}

/* --- Saralash --- */
.saralash {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--or-2);
  height: 48px;
  padding: 0 var(--or-4);
  border-radius: var(--r-chip);
  background: var(--yuza);
  box-shadow: inset 0 0 0 1.5px var(--ajratgich);
  transition: box-shadow var(--otish);
}

.saralash:hover,
.saralash:focus-within {
  box-shadow: inset 0 0 0 2px var(--kok);
}

.saralash > .ik {
  color: var(--matn-3);
  flex: none;
  pointer-events: none;
}

.saralash-tanla {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  background: none;
  color: var(--matn);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding-right: 4px;
  cursor: pointer;
  max-width: 210px;
}

/* --- Sevimlilar tugmasi --- */
.sevimlilar-tugma {
  height: 48px;
  gap: var(--or-2);
  padding: 0 var(--or-4);
  font-size: 15px;
}

.sevimlilar-tugma .ik {
  color: var(--matn-2);
}

.sevimlilar-tugma.faol {
  background: var(--kok-yumshoq);
  color: var(--kok);
  box-shadow: inset 0 0 0 2px var(--kok);
}

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

.sevimlilar-tugma [data-sevimlilar-soni] {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* --- Natija izohi --- */
.qidiruv-holati {
  margin-top: var(--or-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--matn-2);
}

/* ---------------------------------------------------- 2. SEVIMLILAR TUGMASI */

/*
  Tarif kartasining sarlavha blokidagi yurak belgisi.
  Rangi sarlavha matni rangida (`--brend-matn`) — har qanday brend fonda ko'rinadi.
*/
.tarif-yurak {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brend-matn);
  background: rgba(255, 255, 255, 0.22);
  transition: background var(--otish), transform var(--otish);
}

.tarif-yurak:hover {
  background: rgba(255, 255, 255, 0.42);
  transform: scale(1.06);
}

.tarif-yurak.faol {
  background: rgba(255, 255, 255, 0.95);
  color: var(--xato);
}

.tarif-yurak .ik {
  width: 21px;
  height: 21px;
}

/* Sarlavha bloki: nom + badge'lar + yurak bir qatorda */
.tarif-karta-tepa .tarif-badge-lar + .tarif-yurak {
  margin-left: var(--or-2);
}

/* ---------------------------------------------------- 3. YUQORIGA QAYTISH */

.yuqoriga-tugma {
  position: fixed;
  right: var(--or-5);
  bottom: var(--or-5);
  z-index: 45;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kok);
  color: #fff;
  box-shadow: var(--soya-3);
  transition: background var(--otish), transform var(--otish), opacity var(--otish);
  animation: yuqoriga-kirish 220ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes yuqoriga-kirish {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

.yuqoriga-tugma:hover {
  background: var(--kok-toq);
  transform: translateY(-3px);
}

@media (max-width: 620px) {
  .yuqoriga-tugma {
    right: var(--or-4);
    bottom: var(--or-4);
    width: 46px;
    height: 46px;
  }
}

/* ---------------------------------------------------- 4. XABAR (toast) */

.xabar {
  position: fixed;
  left: 50%;
  bottom: var(--or-8);
  z-index: 120;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--or-3);
  padding: 13px var(--or-5);
  border-radius: var(--r-chip);
  background: #0b1228;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--soya-3);
  animation: xabar-kirish 240ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

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

.xabar .ik {
  color: #4ade80;
}

@keyframes xabar-kirish {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes xabar-chiqish {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, 10px); }
}

/* ---------------------------------------------------- 5. COOKIE ROZILIGI */

.cookie {
  position: fixed;
  left: 50%;
  bottom: var(--or-5);
  z-index: 110;
  width: min(720px, calc(100% - var(--or-8)));
  transform: translateX(-50%);
  animation: cookie-kirish 320ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes cookie-kirish {
  from { opacity: 0; transform: translate(-50%, 24px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.cookie-ichi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--or-5);
  padding: var(--or-5);
  border-radius: var(--r-karta);
  background: var(--yuza);
  box-shadow: var(--soya-4), inset 0 0 0 1px var(--ajratgich);
}

.cookie-matn {
  flex: 1 1 340px;
  min-width: 0;
}

.cookie-matn strong {
  display: block;
  margin-bottom: var(--or-2);
  font-size: 16px;
  font-weight: 800;
  color: var(--matn);
}

.cookie-matn p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--matn-2);
}

.cookie-tugmalar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--or-3);
  margin-left: auto;
}

.cookie-tugmalar .tugma {
  min-height: 44px;
  padding: 0 var(--or-5);
  font-size: 15px;
}

@media (max-width: 620px) {
  .cookie {
    width: calc(100% - var(--or-5) * 2);
    bottom: var(--or-4);
  }

  .cookie-ichi {
    padding: var(--or-4);
    gap: var(--or-4);
  }

  .cookie-tugmalar {
    width: 100%;
    margin-left: 0;
  }

  .cookie-tugmalar .tugma {
    flex: 1;
  }
}

/* ---------------------------------------------------- 7. SEO MATNI */

/*
  Sahifaning mazmunli qismi (`index.html` → `[data-seo]`).
  ⚠️ Bu matn **bezak emas**: u qidiruv tizimlari uchun sahifaning asosiy
  mazmunini beradi.
*/
.seo-bolim {
  margin-top: var(--or-10);
  padding-top: var(--or-8);
  border-top: 1px solid var(--ajratgich);
}

.seo-sarlavha {
  font-size: clamp(24px, 3.2vw, 33px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--matn);
}

.seo-matn {
  margin-top: var(--or-4);
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--matn-2);
}

/*
  ⚠️ `.seo-ichki-sarlavha`, `.seo-karta*`, `.seo-savol*` uslublari olib tashlandi:
  «Operatorlar bo'yicha tariflar» va «Ko'p beriladigan savollar» bo'limlari
  foydalanuvchi talabi bilan saytdan o'chirildi. Endi SEO bo'limi faqat
  sarlavha va izoh matnidan iborat.
*/

/* ==========================================================================
   8. TUNGI REJIM
   --------------------------------------------------------------------------
   `data-mavzu` atributi `assets/js/mavzu.js` tomonidan **sahifa chizilishidan
   oldin** qo'yiladi (shu sababli «oq chaqnash» bo'lmaydi).
   Brend ranglari o'zgarmaydi — faqat fon/matn qatlamlari.
   ========================================================================== */

html[data-mavzu="tungi"] {
  /*
    ⚠️ Brauzerning native elementlari (scrollbar, `<select>` ro'yxati, sana
    tanlash) tungi rejimga o'tsin. Usiz `<select>` ochilganda ro'yxat oq
    fonda qoladi va och matn ko'rinmaydi.
  */
  color-scheme: dark;

  --fon: #0a1122;
  --yuza: #141d33;
  --yuza-xira: #1c2740;
  --matn: #eef3fb;
  --matn-2: #a3b1ca;
  --matn-3: #78879f;
  --ajratgich: #2a3554;
  --parda: rgba(3, 7, 18, 0.75);

  --metrika-fon: #1c2740;
  --qator-doira-fon: #1c2740;

  --kok-yumshoq: #16294a;
  --xato-fon: #3a1113;
  --muvaffaqiyat-fon: #0f2e1c;
  --ogohlantirish-fon: #3a2a0b;
  --apelsin-yumshoq: #3a2708;

  --soya-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --soya-2: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --soya-3: 0 14px 36px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);
  --soya-4: 0 24px 64px rgba(0, 0, 0, 0.7);

  /* Sarlavha paneli (shaffof fon) */
  --sarlavha-shaffof: rgba(20, 29, 51, 0.94);

  /*
    VIP badge — gradient oltin fon **o'zgarmaydi** (brend rangi), matn esa
    ochroq oltin bo'ladi: quyuq oltin matn tungi fonda kontrastni yo'qotardi
    (≈4:1), och oltin esa ≈9:1 beradi.

    ⚠️ Beeline (sariq sarlavha) `asos.css` da allaqachon **to'q fon + oltin
    matn** — bu yerda ustidan yozilmaydi, chunki
    `html[data-mavzu="tungi"][data-kompaniya="beeline"]` selektori
    `html[data-mavzu="tungi"]` dan **kuchliroq** (atribut soni ko'p).
  */
  --vip-matn: #fff3c4;
}

html[data-mavzu="tungi"] .sarlavha {
  background: var(--sarlavha-shaffof);
}

html[data-mavzu="tungi"] .tarif-ajratgich {
  background: var(--ajratgich);
}

html[data-mavzu="tungi"] .skelet-qator {
  background: linear-gradient(90deg, #1a2438 25%, #222f49 37%, #1a2438 63%);
  background-size: 400% 100%;
}

html[data-mavzu="tungi"] .tarif-rasm {
  background-color: #1c2740;
  background-image: linear-gradient(90deg, #1a2438 25%, #222f49 37%, #1a2438 63%);
}

html[data-mavzu="tungi"] .tarif-rasm.yuklandi {
  background-image: none;
}

html[data-mavzu="tungi"] .modal-rasm {
  background: #1c2740;
}

html[data-mavzu="tungi"] .splash {
  background:
    radial-gradient(1200px 720px at 50% -10%, #16203a 0%, rgba(22, 32, 58, 0) 62%),
    linear-gradient(168deg, #0c1428 0%, #0a1122 44%, #080e1c 100%);
}

html[data-mavzu="tungi"] .splash-tor {
  background-image: radial-gradient(rgba(120, 170, 255, 0.14) 1px, transparent 1px);
}

html[data-mavzu="tungi"] .til-tugma {
  background: rgba(20, 29, 51, 0.9);
}

/*
  Logotip tungi rejimda.
  ⚠️ Logotip — SVG rasm, uning rangi CSS o'zgaruvchisi bilan boshqarilmaydi.
  Brend ko'ki (`#1863D3`) quyuq fonda kontrasti past bo'ladi, shuning uchun
  yorqinlashtiramiz. Apelsin gul ham bir oz yorqinlashadi — bu brendga mos.
*/
html[data-mavzu="tungi"] .brend-logo {
  filter: brightness(1.45) saturate(1.05);
}

html[data-mavzu="tungi"] .splash-logo {
  filter: brightness(1.45) saturate(1.05)
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}

html[data-mavzu="tungi"] .tugma.ikkilamchi:hover {
  box-shadow: inset 0 0 0 1.5px #3b4a6e;
}

html[data-mavzu="tungi"] .tugma-pill,
html[data-mavzu="tungi"] .tugma-ikon,
html[data-mavzu="tungi"] .chip,
html[data-mavzu="tungi"] .qidiruv,
html[data-mavzu="tungi"] .saralash {
  background: var(--yuza);
}

/*
  ⚠️ `<select>` OCHILGANDA ko'rinadigan ro'yxat (`<option>` lar).
  Bu ro'yxatni brauzer **o'zi** chizadi va u sahifa CSS ini meros qilib oladi:
  `.saralash-tanla { color: var(--matn) }` tufayli variantlar matni tungi rejimda
  OCH kulrang bo'lib qolardi, fon esa oq — natijada yozuvlar o'qilmasdi.

  `color-scheme: dark` (yuqorida) buni ko'p brauzerda o'zi hal qiladi, lekin
  ba'zilari (masalan eski Chrome/Windows) baribir oq fon chizadi. Shuning uchun
  ranglarni **aniq** yozamiz — ishonchli zaxira.
*/
html[data-mavzu="tungi"] .saralash-tanla option {
  background-color: var(--yuza);
  color: var(--matn);
}

/* Tanlangan variant (ba'zi brauzerlar `:checked` ni qo'llab-quvvatlaydi) */
html[data-mavzu="tungi"] .saralash-tanla option:checked {
  background-color: var(--kok);
  color: #ffffff;
}

html[data-mavzu="tungi"] .chip:hover {
  box-shadow: inset 0 0 0 1.5px #3b4a6e;
}

html[data-mavzu="tungi"] .xabar {
  background: #eef3fb;
  color: #0b1228;
}

/* --- Tanlangan elementlar tungi rejimda (brend rangining quyuq ko'rinishi) --- */

html[data-mavzu="tungi"] .chip.faol,
html[data-mavzu="tungi"] .kompaniya-qator.faol,
html[data-mavzu="tungi"] .kompaniya-karta.faol,
html[data-mavzu="tungi"] .kompaniya-karta.faol:hover {
  background: var(--brend-yumshoq-tungi);
  box-shadow: inset 0 0 0 2px var(--brend-yorqin);
}

/*
  ⚠️ Foydalanuvchi talabi (2026-10-17): *«Tungi rejimda barcha kompaniyalar nomi
  va headerda ko'rsatiladigan yozuvlarning barchasini rangi OQ rangda bo'lsin.
  Logolar o'z holida saqlanib qolsin.»*

  Shuning uchun faol chip/qator **matni ham** brend rangiga o'tmaydi — u oq
  bo'lib qoladi (`app.css` dagi oq qoidalar). Brend rangi faqat **fon va
  hoshiya**da qoladi, logotiplar esa umuman tegilmagan.
*/
html[data-mavzu="tungi"] .chip.faol,
html[data-mavzu="tungi"] .chip.faol:hover,
html[data-mavzu="tungi"][data-kompaniya="beeline"] .chip.faol,
html[data-mavzu="tungi"][data-kompaniya="beeline"] .chip.faol:hover {
  color: #ffffff;
}

html[data-mavzu="tungi"] .kompaniya-qator {
  color: var(--matn-2);
}

/*
  ⚠️ TUZATILDI (foydalanuvchi talabi, 2026-11-06): *«Kompaniyalar tanlanganda
  kompaniya nomlari joylashgan kartada ularning yozuv ranglariga ta'sir qilmasin…
  tanlangandan boshqa kompaniya nomlariga ta'sir qilinmasin»*.

  ⚠️ 2026-10-17: rang endi **oq** (foydalanuvchi talabi) — `app.css` da,
  `--kompaniya-matn-tungi` dan olinadi. Bu yerda faqat ustuvorlik uchun
  qoida qoladi (ilova mavzusi brend rangiga o'tkazmasin).
*/
html[data-mavzu="tungi"] .kompaniya-qator .kompaniya-nom,
html[data-mavzu="tungi"] .kompaniya-karta .kompaniya-nom {
  color: var(--kompaniya-matn-tungi, var(--kompaniya-matn, var(--matn)));
}

html[data-mavzu="tungi"] .kompaniya-qator:hover {
  background: var(--yuza-xira);
}

html[data-mavzu="tungi"] .kompaniya-logo,
html[data-mavzu="tungi"] .kompaniya-karta .kompaniya-logo,
html[data-mavzu="tungi"] .kompaniya-qator .kompaniya-logo {
  background: #f4f7fc;
}

html[data-mavzu="tungi"] .sevimlilar-tugma.faol {
  background: var(--kok-yumshoq);
  color: var(--kok-och);
  box-shadow: inset 0 0 0 2px var(--kok-och);
}

html[data-mavzu="tungi"] .sevimlilar-tugma.faol .ik {
  color: var(--kok-och);
}

html[data-mavzu="tungi"] .slayder-strelka {
  background: var(--yuza);
}

html[data-mavzu="tungi"] .tugma-ikon:hover,
html[data-mavzu="tungi"] .tugma-pill:hover {
  background: var(--kok-yumshoq);
}

html[data-mavzu="tungi"] .tugma-ikon:hover {
  color: var(--kok-och);
}

html[data-mavzu="tungi"] .tugma-pill:hover {
  color: var(--kok-och);
}

/* Tungi rejimda futerdagi faol kompaniya — o'zining yorqin nom rangida */
html[data-mavzu="tungi"] .futer-kompaniya:hover,
html[data-mavzu="tungi"] .futer-kompaniya.faol {
  color: var(--kompaniya-matn-tungi, var(--kompaniya-matn, var(--kok-och)));
}

html[data-mavzu="tungi"] .tarif-batafsil:hover {
  background: var(--kok-yumshoq);
}

html[data-mavzu="tungi"] .tarif-batafsil .batafsil-doira {
  background: var(--yuza-xira);
  color: var(--kok-och);
}

html[data-mavzu="tungi"] .modal-yopish {
  background: var(--yuza-xira);
}

html[data-mavzu="tungi"] .holat,
html[data-mavzu="tungi"] .skelet {
  background: var(--yuza);
}