/* ============================================================
   Slivoteka · премиум — кабинет, тарифы, касса

   ⚠️ Грузится ТОЛЬКО на девяти страницах кабинета (slvt_is_page()).
   Правила для записей и листингов (плашка замка, точка подписки
   в шапке) живут в premium-public.css — класть новые туда.

   Только НОВЫЕ классы .slvt-* / .acc-* / .acc__*. Всё, что уже
   есть в дизайн-системе BAZA (.btn, .field, .status, .passport,
   .tech-grid, .empty, .pagination, .src-card, .pill, .count-chip,
   .report-box, .sec-head), переиспользуется как есть (владение
   файлами, BAZA_DESIGN_SPEC §7). Единственное исключение —
   `.acc-pay__status .status` (перенос строки в узкой колонке
   истории платежей): правка заперта внутри нашего блока, сам
   компонент .status в теме не меняется.

   Ни одного своего цвета: только var(--c-*) / var(--st*) из
   tokens.css, поэтому светлая и тёмная темы получаются сами.
   Точки останова — только 1024 / 900 / 768 / 600 / 480.
   Файл энкьюится с deps ['cy404-style'], то есть ПОСЛЕ style.css
   темы: при равной специфичности выигрывает он.
   ============================================================ */

/* ============================================================
   2. Кабинет: вкладки и две колонки
   ============================================================ */

.acc {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}

/* Полоса вкладок прокручивается сама, а не тянет за собой страницу. */
.acc__tabs {
	display: flex;
	gap: var(--s-2);
	padding-bottom: var(--s-2);
	overflow-x: auto;
	scrollbar-width: thin;
	border-bottom: 1px solid var(--c-border);
}

.acc__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	flex: 0 0 auto;
	padding: 10px var(--s-4);
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	color: var(--c-text-muted);
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r-ctl);
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}

.acc__tab:hover {
	color: var(--c-text);
	background: var(--c-surface-2);
}

.acc__tab.is-active {
	color: var(--c-primary);
	background: var(--c-primary-soft);
	border-color: color-mix(in srgb, var(--c-primary) 22%, transparent);
}

.acc__tab:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}

.acc__tab-ico {
	display: inline-flex;
	flex: 0 0 auto;
}

.acc__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start;
	gap: var(--s-6);
}

.acc__main {
	min-width: 0;
}

/* Вкладка «Избранное» рисует сетку темы (.entries--grid) внутри узкой колонки
   кабинета, а тема с 1025px жёстко ставит ПЯТЬ колонок — она рассчитана на всю
   ширину контейнера без сайдбара. В кабинете колонка на 320px + зазор уже, и
   те же пять карточек ужимались до 113px при 1025px и 150px при 1280px против
   182–219px на /favorites/. Возвращаем здесь расчётную сетку темы (её же
   базовое правило, минимум 190px на карточку).
   ⚠️ Только от 1025px: ниже у темы свои правила (2 колонки с 600px), и
   перебивать их этой специфичностью нельзя — на телефоне останется одна. */
@media (min-width: 1025px) {
	.acc__main .entries--grid {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}
}

.acc__aside {
	position: sticky;
	/* Шапка липкая — карточка не должна уезжать под неё. */
	top: calc(var(--header-h) + var(--s-4));
	min-width: 0;
}

/* Кнопка продления живёт внутри .passport, у которого своих
   отступов под кнопку нет — даём их обёрткой, а не правкой чужого класса. */
.acc__passport-cta {
	padding: 0 var(--s-5) var(--s-4);
}

.acc__panel {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

.acc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

.acc__note {
	margin-top: var(--s-2);
}

/* ============================================================
   3. История платежей
   Строка-карточка: на широком экране колонки, на узком — стопка
   с подписями. Таблицы нет намеренно: она не переносится.
   ============================================================ */

.acc-pay {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.acc-pay__row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 110px 150px 150px;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-left: 3px solid var(--st);
	border-radius: var(--r);
}

.acc-pay__date {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.acc-pay__plan {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.acc-pay__plan-name {
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--c-text);
	overflow-wrap: anywhere;
}

.acc-pay__plan-days {
	font-size: var(--fs-xs);
	color: var(--c-text-soft);
}

.acc-pay__sum {
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--c-text);
	white-space: nowrap;
}

.acc-pay__gw {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	overflow-wrap: anywhere;
}

.acc-pay__status {
	justify-self: start;
	min-width: 0;
}

/* Чип статуса в дизайн-системе — nowrap, а колонка тут 150 px.
   Самая длинная подпись («Ожидаем подтверждение», 191 px) вылезала
   за правую границу строки. Разрешаем перенос только в этой колонке:
   на широком экране чип встаёт в две строки, на узком (медиазапросы
   ниже кладут его на всю ширину) остаётся одной. Глобальный .status
   не трогаем — он общий для всей темы. */
.acc-pay__status .status {
	white-space: normal;
	max-width: 100%;
	text-align: left;
}

/* Номер заказа — та самая строка, которую копирайт просит переслать в поддержку.
   Моно здесь запрещён спекой (§3: моно только для буквального URL источника,
   числа — Inter + tabular-nums, вес 600); класс .num-t в шаблоне уже даёт
   tabular-nums. Цвет поднят до --c-text-muted: --c-text-soft на белой
   --c-surface даёт 3.36:1 при норме AA 4.5:1, muted — 5.85:1. */
.acc-pay__ref {
	grid-column: 1 / -1;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-text-muted);
	overflow-wrap: anywhere;
}

.acc-pay__note {
	grid-column: 1 / -1;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--c-text-muted);
}

.acc-pay__note a {
	color: var(--c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.acc-pay__hint {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--c-text-soft);
}

/* ============================================================
   4. Витрина тарифов
   Сетка .srcs и карточка .src-card берутся из темы; здесь только
   то, чего в них нет: цена, экономия, выбор способа оплаты.
   ============================================================ */

.slvt-pricing {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}

.slvt-plans {
	align-items: stretch;
}

.slvt-plan {
	position: relative;
}

/* Выделенный тариф считается по цене дня, а не назначается вручную. */
.slvt-plan--featured {
	border-color: color-mix(in srgb, var(--c-primary) 42%, transparent);
	box-shadow: var(--sh-md);
}

.slvt-plan__badge {
	position: absolute;
	top: calc(var(--s-3) * -1);
	left: var(--s-5);
	background: var(--c-surface);
}

.slvt-plan__price {
	margin: 0;
	font-family: var(--ff-display);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--c-text);
}

.slvt-plan__per {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.slvt-plan__save {
	align-self: flex-start;
	color: var(--c-primary);
	background: var(--c-primary-soft);
	border-color: color-mix(in srgb, var(--c-primary) 18%, transparent);
}

.slvt-plan__note {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-text-soft);
}

/* Форма прижимается к низу карточки: кнопки трёх тарифов встают в ряд
   даже при разной высоте текста. */
.slvt-plan__form {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-top: auto;
	padding-top: var(--s-2);
}

.slvt-gws {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	border: 0;
}

.slvt-gws__legend {
	padding: 0 0 var(--s-2);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--c-text-soft);
}

.slvt-gw {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r-ctl);
	cursor: pointer;
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease);
}

.slvt-gw:hover {
	border-color: var(--c-border-strong);
}

/* Родной кружок радио прячем от глаз, но НЕ от клавиатуры:
   display:none выкинул бы его из табуляции. */
.slvt-gw input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.slvt-gw__box {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	background: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-pill);
	transition:
		border-color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease);
}

.slvt-gw input:checked + .slvt-gw__box {
	border-color: var(--c-primary);
	box-shadow: inset 0 0 0 4px var(--c-primary);
}

.slvt-gw input:focus-visible + .slvt-gw__box {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}

.slvt-gw:has(input:checked) {
	background: var(--c-primary-soft);
	border-color: color-mix(in srgb, var(--c-primary) 32%, transparent);
}

.slvt-gw__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-2);
	min-width: 0;
}

.slvt-gw__label {
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-text);
}

.slvt-gw__sum {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-primary);
	white-space: nowrap;
}

/* ── Пояснения к способам оплаты ── */

.slvt-pricing__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--c-border);
	border: 1px solid var(--c-border);
	border-radius: var(--r);
	overflow: hidden;
}

.slvt-pricing__fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--s-3) var(--s-4);
	background: var(--c-surface);
}

.slvt-pricing__fact-k {
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--c-text);
}

.slvt-pricing__fact-v {
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--c-text-muted);
}

/* ── Зависшие попытки оплаты ── */

.slvt-stuck__title {
	margin: 0 0 var(--s-2);
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--c-text);
}

.slvt-stuck {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin: 0 0 var(--s-3);
	padding: 0;
	list-style: none;
}

.slvt-stuck__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-4);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* ============================================================
   5. Итог оплаты (/thanks/, /fail/)
   ============================================================ */

.slvt-result {
	display: flex;
	align-items: flex-start;
	gap: var(--s-5);
	padding: var(--s-7) var(--s-6);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-left: 3px solid var(--st);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
}

.slvt-result__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	color: var(--st);
	background: var(--st-soft);
	border-radius: var(--r-pill);
}

.slvt-result__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	min-width: 0;
}

.slvt-result__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--c-text);
	text-wrap: balance;
}

.slvt-result__text {
	max-width: 60ch;
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--c-text-muted);
	text-wrap: pretty;
}

.slvt-result__text a {
	color: var(--c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.slvt-result__state {
	margin: 0;
}

.slvt-result__order {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-6);
	margin: 0;
	padding: var(--s-3) var(--s-4);
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r);
}

.slvt-result__pair {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.slvt-result__pair dt {
	font-size: var(--fs-xs);
	color: var(--c-text-soft);
}

.slvt-result__pair dd {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--c-text);
	overflow-wrap: anywhere;
}

.slvt-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: var(--s-2);
}

/* ============================================================
   6. Гость в кабинете
   ============================================================ */

.slvt-guest__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
	margin-top: var(--s-2);
}

/* ============================================================
   7. Модальное подтверждение
   Геометрия и поведение — как у .search-overlay темы, но это
   отдельный компонент: чужой селектор не трогаем.
   ============================================================ */

.slvt-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gutter);
}

.slvt-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--c-overlay);
	opacity: 0;
	transition: opacity var(--t) var(--ease);
}

.slvt-modal.is-open .slvt-modal__backdrop {
	opacity: 1;
}

.slvt-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	width: min(440px, 100%);
	padding: var(--s-6);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity var(--t) var(--ease-out),
		transform var(--t) var(--ease-out);
}

.slvt-modal.is-open .slvt-modal__panel {
	opacity: 1;
	transform: none;
}

.slvt-modal__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--c-text);
}

.slvt-modal__text {
	margin: 0;
	font-size: var(--fs-md);
	line-height: 1.55;
	color: var(--c-text-muted);
}

.slvt-modal__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--s-3);
	margin-top: var(--s-2);
}

@media (prefers-reduced-motion: reduce) {
	.slvt-modal__backdrop,
	.slvt-modal__panel {
		transition: none;
	}
}

/* ============================================================
   9. Адаптив (1024 / 900 / 768 / 600 / 480)
   Проверено от 320 px.
   ⚠️ «Горизонтального скролла нет» — НЕ доказательство, что всё влезло:
   у html/body стоит overflow-x: hidden/clip, и вылезшее за экран просто
   срезается молча. Проверять шириной ряда (scrollWidth / getBoundingClientRect
   последнего элемента), а не наличием полосы прокрутки.
   ============================================================ */

@media (max-width: 1024px) {
	.acc__layout {
		grid-template-columns: minmax(0, 1fr) 280px;
	}

	.acc-pay__row {
		grid-template-columns: 140px minmax(0, 1fr) 100px 130px;
	}

	.acc-pay__status {
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	.acc__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Липкость на узком экране только мешает: карточка занимает пол-экрана. */
	.acc__aside {
		position: static;
	}
}

@media (max-width: 768px) {
	.acc-pay__row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--s-2);
	}

	.acc-pay__date {
		order: -1;
	}

	.acc-pay__sum {
		text-align: right;
	}

	.acc-pay__gw,
	.acc-pay__status {
		grid-column: 1 / -1;
	}

	.slvt-result {
		flex-direction: column;
		gap: var(--s-4);
		padding: var(--s-6) var(--s-5);
	}
}

@media (max-width: 600px) {
	.slvt-guest__actions .btn {
		flex: 1 1 100%;
	}

	.slvt-result__order {
		flex-direction: column;
		gap: var(--s-3);
	}

	.slvt-modal__actions .btn {
		flex: 1 1 100%;
	}
}

@media (max-width: 480px) {
	.acc__tab {
		padding: var(--s-2) var(--s-3);
	}

	.acc-pay__row {
		padding: var(--s-3);
	}

	.slvt-plan__badge {
		left: var(--s-4);
	}
}