/* Narxlar sahifasi (price.html). Umumiy komponentlar: static/css/ui.css */

.pr { background: var(--ui-bg); }
.pr-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pr-hero .ui-h1 { margin-top: 14px; }

/* oylik / yillik almashtirgich */
.pr-cycle__switch { position: relative; display: inline-flex; padding: 4px; border-radius: 14px; border: 1px solid var(--ui-line-strong); background: var(--ui-chip); cursor: pointer; }
.pr-cycle__opt { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ui-muted); transition: color .25s; white-space: nowrap; }
.pr-cycle__opt b { height: 20px; padding: 0 6px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--ui-red); color: #fff; font-size: 11px; }
.pr-cycle__opt.is-active { color: var(--ui-bg); background: var(--ui-heading); }

/* rejalar */
.pr-plans-wrap { padding-top: 24px; padding-bottom: 80px; }
.pr-section-eyebrow { margin: 0 0 18px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ui-dim); }
.pr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pr-plan { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 24px; background: var(--ui-panel); border: 1px solid var(--ui-line); transition: opacity .6s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.pr-plan:hover { transform: translateY(-4px); border-color: var(--ui-line-strong); }
.pr-plan.is-featured { background: #0e1015; border: 1px solid var(--ui-red); box-shadow: 0 30px 70px -30px rgba(229,50,45,.55); }
.pr-plan__badge { position: absolute; top: -13px; left: 28px; height: 26px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; background: var(--ui-red); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pr-plan__code { margin: 0; font-size: 11px; letter-spacing: .16em; color: var(--ui-dim); }
.pr-plan__title { margin: 8px 0 0; font-family: Oswald, sans-serif; font-size: 28px; font-weight: 700; text-transform: uppercase; color: var(--ui-heading); }
.pr-plan__desc { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ui-muted); min-height: 2.6em; }
.pr-plan__price { margin-top: 22px; padding: 18px 0; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); min-height: 104px; }
.pr-plan__amount { display: flex; align-items: baseline; gap: 8px; }
.pr-plan__amount > span { font-family: Oswald, sans-serif; font-size: 46px; font-weight: 700; line-height: 1; color: var(--ui-heading); }
.pr-plan__amount small { font-size: 14px; color: var(--ui-muted); }
.price-monthly, .price-yearly { display: none; }
.price-monthly.active, .price-yearly.active { display: inline; }
.price-yearly-note { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.price-yearly-note.hidden { display: none; }
.pr-plan__features { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pr-plan__features li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ui-text-2); }
.pr-plan__features svg { flex-shrink: 0; margin-top: 2px; color: var(--ui-text-2); }
.pr-plan__features li.is-off { color: var(--ui-dim); }
.pr-plan__features li.is-off svg { color: var(--ui-dim); }
.pr-plan__cta { margin-top: auto; padding-top: 26px; }
.pr-plan__cta .hidden { display: none; }
.pr-plan__active { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 14px; background: var(--ui-free-soft); color: var(--ui-free-text); font-size: 15px; font-weight: 700; }
.pr-plan__locked { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 1px dashed var(--ui-line-strong); color: var(--ui-muted); font-size: 14px; font-weight: 600; cursor: not-allowed; }

/* obunasiz imkoniyatlar */
.pr-extras { border-top: 1px solid var(--ui-line); background: linear-gradient(180deg, var(--ui-bg-2), var(--ui-bg)); }
.pr-extras__inner { max-width: 960px; padding-top: 80px; padding-bottom: 96px; }
.pr-extras__head { text-align: center; }
.pr-extras__head .ui-lead { margin-left: auto; margin-right: auto; }
.pr-tabs { margin: 32px auto 0; display: flex; justify-content: center; gap: 4px; width: max-content; max-width: 100%; padding: 4px; border-radius: 14px; border: 1px solid var(--ui-line-strong); background: var(--ui-chip); }
.pricing-tab-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: none; color: var(--ui-muted); font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; white-space: nowrap; }
.pricing-tab-btn:hover { color: var(--ui-heading); }
.pricing-tab-btn.active { background: var(--ui-panel); color: var(--ui-heading); box-shadow: 0 6px 16px -10px rgba(0,0,0,.6); }
.pricing-tab-btn.active svg { color: var(--ui-red); }

.pr-panel { margin-top: 24px; padding: 28px; border-radius: 24px; background: var(--ui-panel); border: 1px solid var(--ui-line); animation: pr-in .35s ease both; }
.pr-panel.hidden { display: none; }
@keyframes pr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pr-panel__head h3 { margin: 0; font-family: Oswald, sans-serif; font-size: 24px; text-transform: uppercase; color: var(--ui-heading); }
.pr-panel__head p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ui-muted); }
.pr-points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pr-points li { position: relative; padding: 14px 16px 14px 44px; border-radius: 14px; background: var(--ui-chip); font-size: 14px; line-height: 1.55; color: var(--ui-text-2); }
.pr-points li::before { content: ''; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 5px; background: var(--ui-red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5322d' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pr-panel__cta { margin-top: 22px; }
.pr-panel__foot { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--ui-line); font-size: 13px; color: var(--ui-muted); text-align: center; }
.pr-empty { margin: 0; font-size: 14px; color: var(--ui-muted); }

.pr-series { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ui-line); display: grid; gap: 8px; }
.pr-series__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--ui-line); text-decoration: none; transition: border-color .2s; }
.pr-series__row:hover { border-color: var(--ui-line-strong); }
.pr-series__row b { display: block; font-size: 15px; color: var(--ui-heading); }
.pr-series__row small { font-size: 12px; color: var(--ui-muted); }
.pr-series__price { flex-shrink: 0; font-family: Oswald, sans-serif; font-size: 20px; font-weight: 700; color: var(--ui-gold); }
.pr-series__price s { font-family: Inter, sans-serif; font-size: 12px; font-weight: 400; color: var(--ui-dim); }

.pr-coins { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pr-coin { position: relative; padding: 22px; border-radius: 18px; border: 1px solid var(--ui-line); background: var(--ui-chip); text-align: center; }
.pr-coin.is-featured { border-color: var(--ui-gold); background: var(--ui-gold-soft); }
.pr-coin__ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ui-gold-soft); color: var(--ui-gold); }
.pr-coin__amount { margin: 12px 0 0; font-family: Oswald, sans-serif; font-size: 36px; font-weight: 700; line-height: 1; color: var(--ui-heading); }
.pr-coin__label { margin: 6px 0 0; font-size: 10px; letter-spacing: .16em; color: var(--ui-dim); }
.pr-coin__price { margin: 14px 0 0; font-size: 16px; font-weight: 700; color: var(--ui-gold); }

/* moslashuvchanlik */
@media (max-width: 1024px) {
  .pr-plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 26px; }
}
@media (max-width: 640px) {
  .pr-plans-wrap { padding-bottom: 56px; }
  .pr-plan { padding: 22px; }
  .pr-extras__inner { padding-top: 56px; padding-bottom: 64px; }
  .pr-tabs { width: 100%; }
  .pricing-tab-btn { flex: 1; justify-content: center; padding: 0 8px; font-size: 13px; }
  .pricing-tab-btn svg { display: none; }
  .pr-panel { padding: 20px; }
  .pr-points { grid-template-columns: 1fr; }
  .pr-coins { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pr-panel { animation: none; } }