/* ================================================
   css/premium.css — страница тарифов
   ================================================ */

.sl-pricing__main {
  padding: var(--sl-s6) 0 var(--sl-s7);
}

.sl-pricing__head {
  max-width: 780px;
  margin-bottom: var(--sl-s5);
}

.sl-pricing__head h1 {
  margin: var(--sl-s2) 0 var(--sl-s3);
}

.sl-pricing__lead {
  font-size: var(--sl-fs-md);
  line-height: 1.6;
  max-width: 68ch;
}

.sl-pricing__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sl-s3);
}

.sl-pricing__state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--sl-s4);
}

.sl-account {
  margin: 0 0 var(--sl-s4);
  padding: var(--sl-s4);
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
}

.sl-account__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-s2);
  flex-wrap: wrap;
  margin-bottom: var(--sl-s3);
}

.sl-account__head h2 {
  margin: 0;
  font-size: var(--sl-fs-lg);
}

.sl-account__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.sl-account__stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
}

.sl-account__stat span,
.sl-account__stat small {
  color: var(--sl-text-faint);
  font-size: var(--sl-fs-xs);
}

.sl-account__stat strong {
  font-size: var(--sl-fs-md);
}

.sl-account__history {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sl-s3);
  margin-top: var(--sl-s3);
}

.sl-account__history h3 {
  margin: 0 0 6px;
  font-size: var(--sl-fs-sm);
}

.sl-account__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--sl-border);
  font-size: var(--sl-fs-sm);
}

.sl-account__row:first-of-type {
  border-top: 0;
}

.sl-account__row span {
  color: var(--sl-text-faint);
}

.sl-plan__actions {
  display: grid;
  gap: 6px;
}

.sl-plan__actions .sl-btn {
  width: 100%;
}

/* ===== Сравнение ===== */
.sl-pricing__compare {
  margin-top: var(--sl-s6);
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
  padding: var(--sl-s5);
}

.sl-compare {
  overflow-x: auto;
}

.sl-compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sl-fs-sm);
  min-width: 620px;
}

.sl-compare thead th {
  text-align: left;
  padding: var(--sl-s2) var(--sl-s3);
  font-size: var(--sl-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sl-text-faint);
  border-bottom: 1px solid var(--sl-border);
  white-space: nowrap;
}

.sl-compare thead th:not(:first-child) {
  text-align: center;
}

.sl-compare tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--sl-text);
  padding: var(--sl-s2) var(--sl-s3);
  border-bottom: 1px solid var(--sl-border);
}

.sl-compare tbody td {
  text-align: center;
  padding: var(--sl-s2) var(--sl-s3);
  border-bottom: 1px solid var(--sl-border);
}

.sl-compare tbody tr:last-child th,
.sl-compare tbody tr:last-child td {
  border-bottom: 0;
}

.sl-compare__yes {
  color: var(--sl-success);
  font-weight: 800;
}

.sl-compare__no {
  color: var(--sl-text-faint);
}

/* ===== FAQ ===== */
.sl-pricing__faq {
  margin-top: var(--sl-s6);
  display: grid;
  gap: var(--sl-s2);
  max-width: 900px;
}

.sl-pricing__faq h2 {
  margin-bottom: var(--sl-s2);
}

.sl-pricing__faq details {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: var(--sl-s3) var(--sl-s4);
}

.sl-pricing__faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--sl-fs-sm);
  color: var(--sl-text);
  /* Тач-цель вопроса в FAQ была 293x20 px — ниже норматива 24x24.
     Вертикальные отступы увеличивают область нажатия, вид не меняется. */
  padding: 7px 0;
  min-height: 24px;
}

.sl-pricing__faq summary::marker {
  color: var(--sl-teal);
}

.sl-pricing__faq p {
  margin: var(--sl-s2) 0 0;
  font-size: var(--sl-fs-sm);
  color: var(--sl-text-muted);
  line-height: 1.6;
}

@media (max-width: 720px) {
  .sl-pricing__main {
    padding: var(--sl-s5) 0 var(--sl-s6);
  }

  .sl-pricing__compare {
    padding: var(--sl-s4);
  }
}

/* ===== Резерв высоты витрины тарифов до загрузки каталога =====
   Карточки вставляются после ответа /api/plans, а на их месте раньше была
   одна строка «Загружаем тарифы…» (54–74px). Из-за этого сравнение, FAQ и
   подвал прыгали вниз: W2-42 фиксировал CLS 0.19–0.36 при пороге 0.1.
   Резерв равен реальной высоте сетки на каждом breakpoint (замер по
   premium.html: 453/781/1124/1783px), поэтому карточки встают на место
   без сдвига. Ошибка загрузки — короткий блок, ей резерв не нужен. */
#pricingGrid { min-height: 470px; }
@media (max-width: 1180px) { #pricingGrid { min-height: 800px; } }
@media (max-width: 860px) { #pricingGrid { min-height: 1140px; } }
@media (max-width: 560px) { #pricingGrid { min-height: 1800px; } }
#pricingGrid:has(.sl-plan-error) { min-height: 0; }

.sl-plan-status { grid-column: 1 / -1; margin: 0; }

.sl-plan--skeleton { pointer-events: none; }
.sl-plan--skeleton .sk {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--sl-bg-alt);
}
.sl-plan--skeleton .sk--badge { width: 42%; height: 16px; }
.sl-plan--skeleton .sk--title { width: 68%; height: 24px; margin-top: 6px; }
.sl-plan--skeleton .sk--price { width: 45%; height: 30px; margin-top: 8px; }
.sl-plan--skeleton .sk--line:nth-of-type(odd) { width: 92%; }
.sl-plan--skeleton .sk--cta { height: 44px; margin-top: auto; }