/* Тема nova — покупка и продление (конфигуратор одним экраном), докупка и тарифы (чип D).
   Компоненты — themes/nova/_components/checkout.html, правила — .interface-design/system.md
   («Паттерн: конфигуратор покупки и продления»). Только токены из tokens.css, классы nv-*.
   Лайм здесь — только выбранный срок (рамка 1.5 px), фокус и одна кнопка оплаты. */

/* ── Раскладка ─────────────────────────────────────────────
   Телефон и планшет: колонка, итог закреплён снизу (над нижним меню на телефоне).
   sticky считается от родителя: у сетки — от своей ячейки, поэтому здесь flex-колонка.
   Десктоп (≥ 1024): .nv-split — выбор слева, итог карточкой справа (sticky сверху). */
@media (max-width: 1023px) {
  .nv-split.nv-cfg {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .nv-cfg__aside {
    position: sticky;
    bottom: calc(var(--nv-nav-h) + var(--nv-safe-bottom) + var(--nv-space-2));
    z-index: 40;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .nv-cfg__aside { bottom: calc(var(--nv-safe-bottom) + var(--nv-space-4)); }
}

/* ── Карточка выбора: строки «Срок» и «Устройства» с разделителем ── */
.nv-cfg-form {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-3);
  margin: 0;
}
.nv-cfg-card {
  gap: 0;
  container-type: inline-size;
}
.nv-cfg-row {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-3);
  min-width: 0;
  margin: 0;
  padding: var(--nv-space-4) 0;
  border: 0;
}
.nv-cfg-row:first-child { padding-top: 0; }
.nv-cfg-row:last-child { padding-bottom: 0; }
.nv-cfg-row + .nv-cfg-row { border-top: 1px solid var(--nv-line); }
.nv-cfg-row__head {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-1);
}
.nv-cfg-row__title {
  font-size: var(--nv-text-md);
  font-weight: var(--nv-weight-medium);
  line-height: 1.3;
  color: var(--nv-text);
}
.nv-cfg-row__hint {
  font-size: var(--nv-text-xs);
  color: var(--nv-text-3);
  text-wrap: pretty;
}
.nv-cfg-row__control {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-2);
  min-width: 0;
}
/* Широкая карточка: подпись слева, управление справа — ширина работает, пустот нет. */
@container (min-width: 560px) {
  .nv-cfg-row {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    column-gap: var(--nv-space-6);
    align-items: start;
    padding: var(--nv-space-5) 0;
  }
  /* Подпись — на линии середины переключателя/степпера (их высота 52 px). */
  .nv-cfg-row__head { padding-top: var(--nv-space-3); }
}

.nv-cfg-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nv-space-2) var(--nv-space-4);
  min-height: var(--nv-tap);
}
.nv-cfg-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nv-space-2);
  font-size: var(--nv-text-sm);
  color: var(--nv-text-2);
  font-variant-numeric: tabular-nums;
}
.nv-cfg-note {
  font-size: var(--nv-text-xs);
  color: var(--nv-text-3);
  text-wrap: pretty;
}
.nv-cfg-note__value { color: var(--nv-text-2); font-weight: var(--nv-weight-medium); }
.nv-cfg-quiet { display: flex; }
/* «Сейчас подключено 7. При продлении на 5 …» (MIG-304) — тёплым текстом в строке. */
.nv-cfg-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--nv-space-2);
  font-size: var(--nv-text-sm);
  line-height: var(--nv-leading);
  color: var(--nv-warn-text);
  text-wrap: pretty;
}
.nv-cfg-warn__icon { display: inline-flex; margin-top: 2px; color: var(--nv-warn-icon); }

/* Нейтральная метка: «−10 %» (скидка), без лайма. */
.nv-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--nv-space-2);
  border-radius: var(--nv-radius-pill);
  background: var(--nv-surface-3);
  color: var(--nv-text-2);
  font-size: var(--nv-text-xs);
  font-weight: var(--nv-weight-medium);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Тихая ссылка: белый/серый текст, подчёркивание — без лайма. */
.nv-cfg-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--nv-tap);
  font-size: var(--nv-text-sm);
  transition: color var(--nv-dur) var(--nv-ease), text-decoration-color var(--nv-dur) var(--nv-ease);
}
.nv-body a.nv-cfg-link {
  color: var(--nv-text-2);
  text-decoration: underline;
  text-decoration-color: var(--nv-line-strong);
  text-underline-offset: 3px;
}
.nv-body a.nv-cfg-link:hover { color: var(--nv-text); text-decoration-color: currentColor; }
.nv-cfg-note .nv-cfg-link { min-height: 0; font-size: inherit; }
.nv-cfg-note:has(.nv-cfg-link) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--nv-space-1);
  min-height: var(--nv-tap);
}

/* ── Срок: сегментный переключатель (radio под капотом) ── */
.nv-seg {
  display: grid;
  grid-template-columns: repeat(var(--nv-seg-n, 4), minmax(0, 1fr));
  gap: var(--nv-space-1);
  /* Два-три срока (корп) не растягиваются на всю карточку. */
  max-width: calc(var(--nv-seg-n, 4) * 136px);
  padding: var(--nv-space-1);
  border-radius: var(--nv-radius-sm);
  background: var(--nv-bg);
}
.nv-seg--1 { --nv-seg-n: 1; }
.nv-seg--2 { --nv-seg-n: 2; }
.nv-seg--3 { --nv-seg-n: 3; }
.nv-seg--5 { --nv-seg-n: 5; }
.nv-seg--6 { --nv-seg-n: 6; }
.nv-seg__item {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}
.nv-seg__input,
.nv-cfg-alt__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.nv-seg__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nv-tap);
  padding: 0 var(--nv-space-1);
  /* Вложенное скругление: внешний радиус дорожки минус её поле. */
  border-radius: calc(var(--nv-radius-sm) - var(--nv-space-1));
  color: var(--nv-text-2);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background-color var(--nv-dur) var(--nv-ease), color var(--nv-dur) var(--nv-ease), box-shadow var(--nv-dur) var(--nv-ease);
}
.nv-seg__item:hover .nv-seg__label { color: var(--nv-text); }
.nv-seg__input:checked + .nv-seg__label {
  background: var(--nv-surface-3);
  color: var(--nv-text);
  box-shadow: inset 0 0 0 1.5px var(--nv-accent);
}
.nv-seg__input:focus-visible + .nv-seg__label {
  outline: 2px solid var(--nv-accent);
  outline-offset: 2px;
}

/* «Или 7 дней — 149 ₽»: тот же выбор срока, но тихим текстом ниже переключателя. */
.nv-cfg-alt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-1);
  min-height: var(--nv-tap);
  font-size: var(--nv-text-sm);
  color: var(--nv-text-2);
  cursor: pointer;
}
.nv-cfg-alt__text {
  text-decoration: underline;
  text-decoration-color: var(--nv-line-strong);
  text-underline-offset: 3px;
  font-variant-numeric: tabular-nums;
}
.nv-cfg-alt:hover .nv-cfg-alt__text { color: var(--nv-text); text-decoration-color: currentColor; }
.nv-cfg-alt__check { display: none; color: var(--nv-accent); }
.nv-cfg-alt__input:checked ~ .nv-cfg-alt__text {
  color: var(--nv-text);
  font-weight: var(--nv-weight-medium);
  text-decoration: none;
}
.nv-cfg-alt__input:checked ~ .nv-cfg-alt__check { display: inline-flex; }
.nv-cfg-alt__input:focus-visible ~ .nv-cfg-alt__text {
  outline: 2px solid var(--nv-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.nv-cfg-row__control > .nv-cfg-alt { align-self: flex-start; }

/* ── Устройства: степпер «− N +» ── */
.nv-step {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-1);
  padding: var(--nv-space-1);
  border-radius: var(--nv-radius-sm);
  background: var(--nv-bg);
}
.nv-step__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nv-tap);
  height: var(--nv-tap);
  padding: 0;
  border: 0;
  border-radius: calc(var(--nv-radius-sm) - var(--nv-space-1));
  background: var(--nv-surface-3);
  color: var(--nv-text);
  cursor: pointer;
  transition: box-shadow var(--nv-dur) var(--nv-ease), transform 120ms var(--nv-ease), opacity var(--nv-dur) var(--nv-ease);
}
.nv-step__btn .nv-icon { width: 20px; height: 20px; stroke-width: 2; }
.nv-step__btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--nv-line-strong); }
.nv-step__btn:active:not(:disabled) { transform: scale(0.95); }
.nv-step__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.nv-step__value {
  width: 56px;
  height: var(--nv-tap);
  padding: 0;
  border: 0;
  border-radius: calc(var(--nv-radius-sm) - var(--nv-space-1));
  background: transparent;
  color: var(--nv-text);
  font: inherit;
  font-size: var(--nv-text-lg);
  font-weight: var(--nv-weight-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}
.nv-step__value::-webkit-inner-spin-button,
.nv-step__value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.nv-step__value[readonly] { color: var(--nv-text-2); }

/* ── Под карточкой: промокод и (без JS) «Показать итог» ── */
.nv-cfg-extra {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-3);
  padding: 0 var(--nv-space-1);
}
.nv-cfg-promo__toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--nv-tap);
  color: var(--nv-text-2);
  font-size: var(--nv-text-sm);
  text-decoration: underline;
  text-decoration-color: var(--nv-line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.nv-cfg-promo__toggle::-webkit-details-marker { display: none; }
.nv-cfg-promo__toggle:hover { color: var(--nv-text); text-decoration-color: currentColor; }
.nv-cfg-promo[open] .nv-cfg-promo__toggle { color: var(--nv-text); text-decoration: none; }
.nv-cfg-promo__body { max-width: 440px; padding-top: var(--nv-space-1); }
.nv-cfg-promo__line { display: flex; gap: var(--nv-space-2); }
.nv-cfg-promo__line .nv-input { flex: 1 1 auto; min-width: 0; }
.nv-cfg-promo__line .nv-btn { flex: 0 0 auto; }
.nv-cfg-promo-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--nv-space-2);
  min-height: var(--nv-tap);
  font-size: var(--nv-text-sm);
  color: var(--nv-text-2);
}
.nv-cfg-promo-ok__icon { display: inline-flex; color: var(--nv-text-2); }

/* ── Итог: «5 устройств · 3 месяца», крупная сумма, одна кнопка ──
   Это .nv-card: на десктопе — обычная карточка справа (поля как у всех карточек);
   на телефоне/планшете — плотная панель снизу (лист над содержимым: линия и мягкая тень). */
.nv-cfg-total { gap: var(--nv-space-4); }
@media (max-width: 1023px) {
  .nv-cfg-total {
    gap: var(--nv-space-3);
    padding: var(--nv-space-4);
    border: 1px solid var(--nv-line-strong);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  }
}
.nv-cfg-total__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nv-space-3);
}
.nv-cfg-total__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nv-cfg-total__what {
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-medium);
  color: var(--nv-text);
  font-variant-numeric: tabular-nums;
}
.nv-cfg-total__meta {
  font-size: var(--nv-text-xs);
  color: var(--nv-text-3);
  font-variant-numeric: tabular-nums;
}
.nv-cfg-total__sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  line-height: var(--nv-leading-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nv-cfg-total__now {
  font-size: var(--nv-text-xl);
  font-weight: var(--nv-weight-bold);
  letter-spacing: -0.01em;
}
.nv-cfg-total__old { font-size: var(--nv-text-xs); color: var(--nv-text-3); }
.nv-cfg-total__pay { margin: 0; }
/* «Пополнить на 1 080 ₽ и оплатить» на телефоне — в одну строку. */
@media (max-width: 767px) {
  .nv-cfg-total__topup { font-size: var(--nv-text-sm); text-wrap: balance; }
}
.nv-cfg-total__note {
  display: none;
  font-size: var(--nv-text-xs);
  color: var(--nv-text-3);
  text-align: center;
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .nv-cfg-total__head {
    display: grid;
    grid-template-areas: "what" "sum" "meta";
    justify-items: start;
    gap: var(--nv-space-1);
  }
  .nv-cfg-total__info { display: contents; }
  .nv-cfg-total__what { grid-area: what; font-size: var(--nv-text-md); }
  .nv-cfg-total__sum {
    grid-area: sum;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: var(--nv-space-2);
  }
  .nv-cfg-total__now { font-size: var(--nv-text-2xl); }
  .nv-cfg-total__old { font-size: var(--nv-text-sm); }
  .nv-cfg-total__meta { grid-area: meta; }
  .nv-cfg-total__note { display: block; }
}

/* Отказ (MIG-310), ошибка докупки — уведомление и кнопки колонкой. */
.nv-cfg-blocked {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-3);
  max-width: var(--nv-column);
}

/* ── Каталог /tariffs: строки сроков списком ── */
/* Обычные сроки и корп — две группы: между группами воздух (система: 32). */
.nv-split__main.nv-cat-page { gap: var(--nv-space-8); }
.nv-cat {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-3);
}
.nv-cat .nv-cfg-note { padding: 0 var(--nv-space-1); }
.nv-price-row__title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nv-space-2);
}
.nv-price-row__price {
  font-size: var(--nv-text-md);
  font-weight: var(--nv-weight-medium);
  color: var(--nv-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nv-cat__actions {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-2);
  margin-top: var(--nv-space-1);
}