/* ============================================================================
   subscription-change.css — блок «переход тарифа» (доплата за остаток периода
   и плановое понижение). Подключается всеми витринами тарифов: /pricing,
   /payment/subscribe.php, модалка в чате.

   Токены темы берутся из marketplace.css (--text, --text-2, --surface, --raised,
   --line, --btn, --btn-text, --pos, --dur, --ease), поэтому блок работает и в
   светлой, и в тёмной теме без отдельных правил под каждую.

   У каждого токена стоит фолбэк-значение: subscription-management.php живёт вне
   этой дизайн-системы (свой светлый фон, никаких --text и --line), и без запасных
   значений color-mix там становится невалидным — фон и рамка просто исчезали бы.

   Префикс .sb-up-. Иконки — только линейные (inline SVG в PHP-хелпере).
   ============================================================================ */

.sb-up{
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text, #16181d) 3.5%, var(--surface, #ffffff));
  border: 1px solid var(--line, #e6e4df);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-2, #55565b);
  animation: sbUpIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sbUpIn{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .sb-up{ animation: none; }
}

/* Переход вверх — единственное состояние, которое должно притягивать взгляд:
   в нём есть сумма к оплате. Подсвечиваем рамкой акцента, но без заливки —
   карточка тарифа и так конкурирует за внимание. */
.sb-up.is-upgrade{
  background: color-mix(in srgb, var(--btn, #16181d) 6%, var(--surface, #ffffff));
  border-color: color-mix(in srgb, var(--btn, #16181d) 30%, var(--line, #e6e4df));
}
.sb-up.is-current{ background: transparent; }
.sb-up.is-muted{ background: transparent; border-style: dashed; }

/* ── Шапка блока ──────────────────────────────────────────────────────────── */
.sb-up-head{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--text, #16181d);
}
.sb-up.is-current .sb-up-head{ margin-bottom: 4px; }
.sb-up.is-later .sb-up-head{ margin-bottom: 6px; }

.sb-up-ic{ flex-shrink: 0; opacity: 0.75; }
.sb-up.is-upgrade .sb-up-ic{ color: var(--btn, #16181d); opacity: 1; }
.sb-up.is-current .sb-up-ic{ color: var(--pos, currentColor); opacity: 1; }

/* ── Строки расчёта ───────────────────────────────────────────────────────── */
.sb-up-rows{
  display: flex; flex-direction: column; gap: 5px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line, #e6e4df);
}
.sb-up-row{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.sb-up-row span{ min-width: 0; }
.sb-up-row b{
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text, #16181d);
  /* Табличные цифры: суммы в столбце должны выравниваться по разрядам */
  font-variant-numeric: tabular-nums;
}
/* Зачёт — это вычитание, и оно должно читаться как выигрыш пользователя */
.sb-up-row.is-credit b{ color: var(--pos, #1f7a4d); }

/* ── Итог ─────────────────────────────────────────────────────────────────── */
.sb-up-total{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 9px;
  color: var(--text, #16181d);
}
.sb-up-total span{ font-weight: 500; }
.sb-up-total b{
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Примечания ───────────────────────────────────────────────────────────── */
.sb-up-note{
  margin-top: 8px;
  font-size: 0.79rem;
  line-height: 1.4;
  color: var(--text-2, #55565b);
  opacity: 0.9;
}
.sb-up-note.is-small{ font-size: 0.74rem; opacity: 0.7; margin-top: 4px; }
.sb-up.is-current .sb-up-note,
.sb-up.is-later .sb-up-note,
.sb-up.is-muted .sb-up-note{ margin-top: 0; }

/* ── Плашка запланированного понижения (кабинет, шапка витрины) ────────────── */
.sb-plan-banner{
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 760px; margin: 0 auto clamp(18px, 3vw, 28px);
  padding: 13px 16px; border-radius: 10px;
  background: color-mix(in srgb, var(--text, #16181d) 4%, var(--surface, #ffffff));
  border: 1px solid var(--line, #e6e4df);
  color: var(--text-2, #55565b); font-size: 0.88rem; line-height: 1.5;
}
.sb-plan-banner[hidden]{ display: none; }
.sb-plan-banner-ic{ flex-shrink: 0; margin-top: 2px; opacity: 0.7; }
.sb-plan-banner b{ color: var(--text, #16181d); font-weight: 600; }
.sb-plan-banner-body{ flex: 1 1 auto; min-width: 0; }
.sb-plan-banner-act{
  flex-shrink: 0;
  appearance: none; border: 1px solid var(--line, #e6e4df); background: transparent;
  color: var(--text, #16181d); cursor: pointer;
  padding: 7px 13px; border-radius: 8px;
  font: inherit; font-size: 0.82rem; font-weight: 500;
  transition: background var(--dur, 0.2s) var(--ease, ease), border-color var(--dur, 0.2s) var(--ease, ease);
}
.sb-plan-banner-act:hover{
  background: color-mix(in srgb, var(--text, #16181d) 7%, transparent);
  border-color: color-mix(in srgb, var(--text, #16181d) 26%, var(--line, #e6e4df));
}
.sb-plan-banner-act:disabled{ opacity: 0.55; cursor: default; }

/* ── Неактивная кнопка тарифа ─────────────────────────────────────────────────
   Нужна там, где нажимать нечего: текущий тариф с включённым автопродлением,
   запрещённое понижение с Партнёра, слишком длинный оплаченный период.
   В pricing.css состояния :disabled у .pr-cta не было — кнопка выглядела живой
   и подпрыгивала на наведении, хотя ничего не делала. */
.pr-cta:disabled,
.pr-cta[disabled]{
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.pr-cta:disabled .pr-cta-arrow,
.pr-cta[disabled] .pr-cta-arrow{ display: none; }

@media (max-width: 640px){
  .sb-plan-banner{ flex-wrap: wrap; }
  .sb-plan-banner-act{ width: 100%; }
  .sb-up-total b{ font-size: 1.08rem; }
}