/* ============================================================
   payment.css — экран «Оплата» (page-payment.js, классы pay-*).

   Отдельная страница оплаты выбранного тарифа: открывается со страницы
   «Подписка» кнопкой «Выбрать». Единственная валюта — рубли.

   Переиспользуются классы style.css: .page .sub-page .sub-head .sub-back
   .sub-back__arrow .page-title .sub-title .page-subtitle .sub-subtitle
   .card .btn .btn--cta .btn--ghost .btn-block .skeleton .skeleton--block;
   их правки под иконки лежат в css/profile.css (он подключается раньше).

   Иконки — inline-SVG из js/icons.js, наследуют цвет через currentColor,
   поэтому у контейнеров вместо кегля эмодзи задан font-size: 0 и
   осмысленный color. Заголовки секций и «Итого» — надзаголовки .eyebrow и
   сжатый шрифт, цена и сумма — крупные числа .num.

   ВСЁ ОФОРМЛЕНИЕ — ЧЕРЕЗ ТОКЕНЫ css/tokens.css: цвет только var(--...),
   кегль только из шкалы --fs-*, начертание --fw-*, межстрочный --lh-*,
   отступы — из сетки --s1…--s7 (шаг 4px). Прежняя версия файла жила на
   собственных числах (17/22/25/28px, отступы 6/10/14/18px) и два цвета
   держала полупрозрачными rgba — из-за этого экран оплаты выглядел
   набранным другим шрифтом, чем соседняя витрина подписки.
   Mobile-first: 360–430px без горизонтального переполнения.
   ============================================================ */

/* Корневая обёртка страницы (= .page.sub-page).
   Отступ под таббар и безопасную зону уже задан у #view в style.css
   (tabbar + safe-bottom + 44px), поэтому здесь добавляем лишь небольшой
   воздух под юридическим подвалом — иначе внизу висит пустая полоса. */
.pay-page {
  display: block;
  padding-bottom: var(--s2);
}

/* Атрибут hidden должен побеждать display у карточек и списков. */
.pay-page [hidden] {
  display: none !important;
}

/* Шапка страницы (наследует .sub-head). */
.pay-head {
  margin-bottom: var(--s4);
}

/* Тело страницы — перерисовывается при обновлении статуса. */
.pay-body {
  display: block;
}

/* Заголовок секции («Что входит», «Способ оплаты») — надзаголовок
   .eyebrow из style.css; здесь только отступ под ним. */
.pay-section-title {
  margin-bottom: var(--s3);
}

/* ---------- Карточка выбранного плана (итог заказа) ---------- */
.pay-plan {
  background: var(--surface);
}

.pay-plan__eyebrow {
  margin-bottom: var(--s2);
}

/* Верхняя строка: название и срок. */
.pay-plan__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

.pay-plan__info {
  min-width: 0;
}

/* Название тарифа — сжатым капсом, как заголовок секции. */
.pay-plan__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--text);
  line-height: var(--lh-tight);
}

/* Срок действия («30 дней доступа» / «Навсегда»). */
.pay-plan__term {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--s1);
  line-height: var(--lh-normal);
}

/* Цена крупно (.num) — главный элемент карточки. */
.pay-plan__price {
  font-size: var(--fs-display);
  color: var(--text);
  margin-top: var(--s3);
  /* Длинные суммы переносим, а не растягиваем карточку. */
  overflow-wrap: anywhere;
}

/* «≈ 466 ₽/мес · экономия 33%» — для тарифов длиннее месяца (3 месяца, год). */
.pay-plan__econ {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent-text);
  margin-top: var(--s1);
  line-height: var(--lh-normal);
}

/* «Разовый платёж, без автопродления». */
.pay-plan__once {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--s2);
  line-height: var(--lh-normal);
}

/* Заметка про текущую подписку («Дни добавятся…»).
   Вложенный блок внутри карточки: только заливка, без границы и тени. */
.pay-plan__note {
  font-size: var(--fs-sm);
  color: var(--text);
  margin-top: var(--s3);
  padding: var(--s3);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  line-height: var(--lh-normal);
}

/* ---------- Что входит ---------- */
.pay-includes {
  display: block;
}

.pay-includes__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* Один пункт: галочка в кружке + текст. */
.pay-include {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
}

.pay-include__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0;
}

.pay-include__text {
  font-size: var(--fs-body);
  color: var(--text);
  line-height: var(--lh-normal);
  min-width: 0;
}

/* ---------- Способ оплаты ---------- */
.pay-method {
  display: block;
}

/* Опция способа оплаты: контурная карточка внутри карточки. */
.pay-method__option {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
}

/* Выбранная опция (сейчас единственная) — акцент цветом CTA. */
.pay-method__option--active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Радио-метка слева. */
.pay-method__mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: var(--s1);
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-strong);
  background: transparent;
}

/* У выбранной опции — точка внутри метки. */
.pay-method__option--active .pay-method__mark {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 10px var(--accent);
}

/* Иконка карты. */
.pay-method__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--accent-text);
  font-size: 0;
}

.pay-method__body {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.pay-method__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: var(--lh-normal);
}

/* «Visa, Mastercard, МИР». */
.pay-method__hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-normal);
}

/* «Безопасная оплата через …» — подпись провайдера. */
.pay-method__provider {
  font-size: var(--fs-xs);
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

/* Честная заметка, когда приём карт ещё подключается. */
.pay-notice {
  margin-top: var(--s3);
  padding: var(--s3);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  /* Вложенный блок внутри карточки — мягкая поверхность. Прежний
     var(--white) был белым на белой карточке, то есть невидимым. */
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ---------- Итог и кнопка оплаты ---------- */
.pay-total {
  background: var(--surface);
}

/* Строка «Итого … сумма». */
.pay-total__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

/* «Итого» — надзаголовком, сумма — крупным числом (.num). */
.pay-total__label {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--muted);
}

.pay-total__sum {
  font-size: var(--fs-h1);
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Строка про оферту над кнопкой оплаты. */
.pay-total__offer {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: var(--lh-normal);
  margin-bottom: var(--s3);
}

/* Сообщение для владельцев вечного доступа (кнопки оплаты нет). */
.pay-total__lifetime {
  font-size: var(--fs-body);
  color: var(--text);
  line-height: var(--lh-normal);
  margin-bottom: var(--s3);
}

/* Кнопка «Оплатить N ₽» — наследует .btn .btn--cta .btn-block (52px). */
.pay-submit {
  margin-top: 0;
}

/* «Вернуться» — есть на экране успеха и у владельца вечного доступа.
   Наследует .btn .btn--cta/.btn--ghost .btn-block; тут лишь отступ сверху. */
.pay-return {
  margin-top: 0;
}

/* ---------- Юридический подвал ---------- */
.pay-legal {
  display: block;
  margin-top: var(--s1);
  padding: 0 var(--s1);
}

.pay-legal__line {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}

/* Строка со ссылками «Оферта · Политика конфиденциальности». */
.pay-legal__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

/* Разделитель между ссылками. */
.pay-legal__sep {
  color: var(--muted);
}

/* Ссылки подвала (оферта, политика, телеграм-контакт, e-mail). */
.pay-legal__link,
.pay-legal__mail {
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  overflow-wrap: anywhere;
}

/* Отдельная строка «Оферта · Политика» — это самостоятельные кнопки, а не
   ссылки внутри предложения: кегль 12px давал мишень высотой 19px.
   Растим только зону нажатия, кегль не трогаем. Ссылки внутри строк
   («Поддержка: …») остаются обычным инлайном, иначе они разорвут абзац. */
.pay-legal__links .pay-legal__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.pay-legal__link:active,
.pay-legal__mail:active {
  color: var(--accent-press);
}

/* Строка про возврат — показывается всегда. */
.pay-refund {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: var(--lh-normal);
  margin-top: var(--s3);
  padding: 0 var(--s1);
}

/* ---------- Экран успеха ---------- */
.pay-success {
  background: var(--surface);
  text-align: center;
}

/* Галочка успеха — белым на оранжевом круге: это результат, а не намёк. */
.pay-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s3);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0;
}

.pay-success__title {
  margin: 0;
  font-size: var(--fs-h2);
  color: var(--text);
}

.pay-success__until {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--accent-text);
  margin-top: var(--s1);
  margin-bottom: var(--s4);
  line-height: var(--lh-normal);
}

/* ---------- Пустое состояние (цена не загрузилась / тариф не выбран) ---------- */
.pay-empty {
  background: var(--surface);
  text-align: center;
}

.pay-empty p {
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: var(--lh-normal);
  margin-bottom: var(--s4);
}

/* «Повторить» — перезапрашивает статус подписки.
   Наследует .btn .btn--ghost .btn-block. */
.pay-retry {
  margin-top: 0;
}

/* «К тарифам» — возврат на страницу подписки. Между двумя блочными кнопками
   отступ даёт правило .btn-block + .btn-block из style.css. */
.pay-back-plans {
  margin-top: 0;
}

/* ---------- Узкие экраны (≤360px) ---------- */
@media (max-width: 360px) {
  /* Цена и итог — единственное, что реально распирает узкий экран:
     сбрасываем их на ступень ниже по той же шкале. */
  .pay-plan__price {
    font-size: var(--fs-h1);
  }

  .pay-total__sum {
    font-size: var(--fs-h2);
  }

  .pay-method__option {
    padding: var(--s3);
  }
}

/* ---------- Автопродление: отдельная галочка согласия ----------
   Не связана с кнопкой «Оплатить» и по умолчанию выключена: согласие на
   списания без участия человека должно быть явным. Текст — сумма, период
   и где отключить. */
.pay-autopay {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin: var(--s3) 0;
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
}

.pay-autopay input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.pay-autopay__text {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.pay-autopay__text b {
  color: var(--text);
  font-weight: var(--fw-semibold);
}