/* ===================================================================
   Obuna va Premium bo'limi.

   Karta ataylab "qimmat" ko'rinadi: qorong'i fon, oltin gradient va
   nur. Bu — to'lov qilinadigan joy, shuning uchun u sahifadagi eng
   e'tiborli element bo'lishi kerak.
   =================================================================== */
.premium-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-l); padding: var(--sp-8);
  /* Brend gradienti — "qimmat" ko'rinish uchun. Tokenga bo'linmaydi
     va temaga qarab o'zgarmaydi: karta har ikki temada ham qorong'i,
     tungi variantda faqat ko'k tomonga suriladi (quyida). */
  background: linear-gradient(135deg, #0D1B16 0%, #142E25 55%, #08130F 100%);
  color: var(--white);
  border: 1px solid rgba(224, 192, 90, .28);
}
/* Yuqoridagi ingichka oltin chiziq */
.premium-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold-shine);
}
.premium-plan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill);
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
/* Holat ranglari QATTIQ yozilgan, `--ok`/`--danger` emas: ular doimiy
   qorong'i karta ustida turadi, tema tokenlari esa kunduzi to'qlashib,
   o'sha qorong'i fonda ko'rinmay qolardi. Och variantlar tanlangan —
   kontrast 8 dan yuqori. */
.premium-plan-trial { background: var(--gold-shine); color: var(--on-gold); box-shadow: var(--gold-glow); }
.premium-meta .item { display: flex; flex-direction: column; gap: 2px; }
.premium-meta .k { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.52); }
.premium-meta .v { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Qolgan kunlar chizig'i */
/* Chiziqning uchlari TO'LIQ yumaloq — `--radius-pill`. Ilgari 3 px
   edi, ya'ni yarim yumaloq: bali ko'rsatadigan `.trust-bar` esa o'sha
   balandlikda (6 px) to'liq yumaloq chizilardi va ikki chiziq yonma-yon
   turganda boshqa-boshqa shaklda ko'rinardi. */
.premium-bar { height: 6px; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); overflow: hidden; margin-top: var(--sp-5); }
/* Muddat tugayotganda chiziq qizaradi. Ranglar qattiq: chiziq doimiy
   qorong'i karta ustida turadi, `--danger` esa kunduzi to'qlashib,
   o'sha fonda ko'rinmay qolardi. */
.premium-bar.low span { background: linear-gradient(90deg, #EA7A85, #FFAFB6); }

/* Imkoniyatlar ro'yxati */
.premium-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-6); }
.premium-benefit .tick {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: 800;
  background: var(--gold-shine); color: var(--on-gold);
}

/* To'lov qadamlari */
.pay-steps { counter-reset: step; display: grid; gap: var(--sp-4); }
.pay-step { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-3); align-items: start; }
.pay-step::before {
  content: counter(step); grid-row: span 2;
  width: var(--ctl-h-sm); height: var(--ctl-h-sm); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm);
  background: var(--theme-accent-dim); color: var(--on-accent-dim);
}

/* ===================================================================
   Tariflar jadvali — to'rttala reja bitta oynada.

   Ikki ustun (restoran / to'yxona), har birida ikki qator (1 oy / 3 oy).
   Foydalanuvchi ikki qarorni birdan qabul qiladi: qaysi tur va qancha
   muddat. Ularni ikki ekranga bo'lish taqqoslashni qiyinlashtirardi.
   =================================================================== */
.plan-table {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4);
}
@media (max-width: 700px) { }
/* O'z turi bo'lmagan ustun so'niqroq — lekin YASHIRILMAYDI:
   egasi ikkinchi turni ham ochmoqchi bo'lishi mumkin. */
.plan-col.dim { opacity: .62; }
.plan-col.dim:hover { opacity: 1; }
.plan-col-head .ic { font-size: var(--fs-md); }
.plan-row .term { display: flex; flex-direction: column; gap: 1px; }
.plan-row .term b { font-size: var(--fs-md); }
.plan-row .amount { text-align: right; display: flex; align-items: baseline; gap: var(--sp-1); }
.plan-row .amount b {
  /* Jadval ichidagi narx — `--fs-xl` (26 px) dan ikki piksel kichik.
     Ataylab tokendan tashqarida: bu raqam ustundagi ikki qatorga
     sig'ishi kerak, 26 px da esa uzun summa ("1 200 000") o'raladi. */
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1;
}

/* Uzoq muddatli reja — foydaliroq, shuning uchun ajratib ko'rsatiladi */
.plan-row.best { background: var(--gold-100); }
.plan-row.best .amount b {
  background: var(--gold-shine);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan-row .save {
  position: absolute; top: 6px; right: var(--sp-4);
  padding: 2px var(--sp-2); border-radius: var(--radius-pill);
  background: var(--ok-dim); color: var(--ok);
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .04em;
}