/**
 * Баланс и платежи (modules/payments/tpl/payments.balance.tpl)
 * Обёртка: .s24-balance-page — каркас .s24-profile-layout / вкладки / .s24-settings-section в s24-components.css
 */

/**
 * Плитки способов оплаты / вывода (payments.billing2.tpl, payments.payout.tpl; ранее inline style в шаблонах).
 * Рамка выбранного — var(--s24-primary); подпись в desc мельче, чем .s24-form-context--caption (0.9rem).
 */
.pay_system_block {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s24-space-3);
	align-items: flex-start;
}

.pay_system_row {
	margin: 0;
	display: inline-block;
	vertical-align: top;
	min-width: 0;
}

.pay_system_row.inactive {
	opacity: 0.5;
}

/* Выбранная плитка в «приглушённой» строке (JS вешает .inactive на .pay_system_row).
   Наш селектор (0,3,0) побеждает базовый .pay_system_img_block.active (0,2,0). */
.pay_system_row.inactive .pay_system_img_block.active {
	border-color: color-mix(in srgb, var(--s24-text-muted) 50%, var(--s24-border));
	box-shadow: none;
}

.pay_system_img_block {
	position: relative;
	display: inline-block;
	background: var(--s24-surface);
	padding: var(--s24-space-4);
	border-radius: var(--s24-radius-md);
	border: 2px solid var(--s24-border);
	box-shadow: var(--s24-shadow-soft);
	cursor: pointer;
	min-width: 140px;
	box-sizing: border-box;
	text-align: center;
	transition:
		border-color var(--s24-transition-fast),
		background-color var(--s24-transition-fast),
		box-shadow var(--s24-transition-fast),
		opacity var(--s24-transition-fast);
}

.pay_system_img_block > img {
	display: block;
	height: 80px;
	margin-inline: auto;
	transition: opacity 0.2s 0.2s;
}

.pay_system_img_block > desc {
	opacity: 0;
	transition: opacity 0.2s;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	text-align: center;
	max-width: calc(100% - var(--s24-space-4));
	padding-inline: var(--s24-space-1);
	box-sizing: border-box;
	max-height: 5.5rem;
	overflow: hidden;
	font-size: 0.75rem;
	line-height: var(--s24-lh-tight);
	color: var(--s24-text-secondary);
}

.pay_system_img_block:hover {
	background: var(--s24-surface-alt);
	border-color: color-mix(in srgb, var(--s24-primary) 38%, var(--s24-border));
	box-shadow: var(--s24-shadow-soft);
}

.pay_system_img_block:hover > img {
	opacity: 0;
	transition: opacity 0.2s;
}

.pay_system_img_block:hover > desc {
	opacity: 1;
	transition: opacity 0.2s 0.2s;
}

.pay_system_img_block.active {
	border-color: var(--s24-primary);
	background: var(--s24-surface);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--s24-primary) 32%, transparent);
	opacity: 1;
}

/* выбранная плитка при наведении: hover задаёт серый фон — оставляем белый как у active */
.pay_system_img_block.active:hover {
	background: var(--s24-surface);
}

@media (max-width: 480px) {
	.pay_system_block {
		justify-content: center;
	}
}

/*
 * Поле «Сумма пополнения/вывода» в чекаут-таблицах balance — исключение из дефолта
 * `.s24-input-money` (10rem/160px). В .s24-sumtable и в «карточке payoutform»
 * поле хочется иметь раскрытым (~12rem), потому что это главный input экрана.
 *
 * Реализовано как soft-default через селектор-хук (без !important): на десктопе
 * капсула ~12rem (min(18rem/1.5, 100%)), на мобиле — 100% ширины ячейки
 * (ячейка уже блочная, см. @media 767 в компоненте .s24-sumtable).
 *
 * Специфичность `:where()` = 0, поэтому любой конкретный модификатор
 * (`.s24-input-money--sm`, `.s24-input-money--fill`) без проблем переопределит.
 */
.s24-balance-page :where(.s24-sumtable, .s24-settings-section)
	.s24-input-money.s24-balance-billing__summ-field {
	max-width: min(calc(18rem / 1.5), 100%);
}

/* Номер карты / электронный кошелёк / счёт — простой input в #requisites;
   на десктопе компактная капсула ~14rem, на мобиле — 100% (см. @media ниже). */
.s24-balance-page #requisites :is(input[type="text"], input[type="tel"], input[type="email"], input:not([type])) {
	width: min(calc(22rem / 1.5), 100%);
	max-width: 100%;
	box-sizing: border-box;
}

.s24-balance-page #payoutform :is(input[type="text"], input[type="tel"], input[type="email"], input:not([type])) {
	width: min(calc(22rem / 1.5), 100%);
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.s24-balance-page :where(.s24-sumtable, .s24-settings-section)
		.s24-input-money.s24-balance-billing__summ-field {
		max-width: min(calc(20rem), 100%);
	}

	/* Номер карты и прочие поля реквизитов — на всю ширину td (он уже блочный
	   на мобиле). Без этого на мобильном скриншоте «XXXX XXXX XXXX XXXX» ужимался
	   до ~14rem, прижимаясь к правому краю card. */
	.s24-balance-page #requisites :is(input[type="text"], input[type="tel"], input[type="email"], input:not([type])),
	.s24-balance-page #payoutform :is(input[type="text"], input[type="tel"], input[type="email"], input:not([type])) {
		width: 100%;
		max-width: 100%;
	}
}

@scope (.s24-balance-page) {
	/* Обычный текст и поля — .s24-form-context--caption в s24-forms.css (корень: payments.balance.tpl) */

	.s24-balance-page__header {
		margin-bottom: var(--s24-space-6);
	}

	.s24-balance-page__totals {
		display: flex;
		flex-direction: column;
		gap: var(--s24-space-2);
	}

	/* Типографика заголовка — .s24-page-title; здесь только раскладка строки «Мой счёт: сумма валюта» */
	.s24-balance-page__header .s24-page-title.s24-balance-page__title-row {
		margin-bottom: 0;
	}

	.s24-balance-page__title-row {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--s24-space-2);
	}

	.s24-balance-page__title-label {
		font-weight: inherit;
		color: inherit;
	}

	.s24-balance-page__value {
		font-weight: 700;
		font-size: inherit;
		color: var(--s24-primary);
	}

	.s24-balance-page__curr {
		font-weight: 700;
		font-size: inherit;
		color: var(--s24-primary);
	}

	.s24-balance-page__hint {
		display: inline-block;
		font-size: var(--s24-caption);
		color: var(--s24-text-muted);
		font-weight: 500;
	}

	.s24-balance-page__bonus {
		margin: 0;
		line-height: 1.45;
	}

	.s24-balance-page__bonus-label {
		color: var(--s24-text-muted);
		font-weight: 500;
		margin-right: var(--s24-space-2);
	}

	.s24-balance-page__bonus .s24-balance-page__value,
	.s24-balance-page__bonus .s24-balance-page__curr {
		font-weight: 400;
	}

	.s24-balance-page__bonus-hint {
		display: inline-block;
		margin-left: var(--s24-space-2);
		font-size: var(--s24-caption);
		color: var(--s24-text-muted);
	}

	/* Заголовки секций баланса (карточка .s24-settings-section — s24-components.css) */
	.s24-settings-section > h3 {
		font-weight: 700;
		font-size: var(--s24-heading-sm);
		margin: 0 0 var(--s24-space-3);
		color: var(--s24-ink);
		line-height: 1.3;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--s24-space-2);
	}

	.s24-settings-section > h4 {
		font-weight: 700;
		font-size: var(--s24-body-sm);
		margin: 0 0 var(--s24-space-3);
		color: var(--s24-ink);
	}

	.s24-settings-section .summ {
		line-height: 1.45;
		color: var(--s24-text);
	}

	/* Таблицы внутри баланса */
	.s24-balance-page .table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: var(--s24-space-3);
	}

	/* Разделители строк — глобально сняты: s24-components.css (:where(...) .table:not(.s24-balance-history__table) td).
	   Правила визуала td (padding/align/font/color) вынесены ВНЕ `@scope`, см. ниже после закрытия scope. */

	.s24-balance-page .s24-settings-section .s24-balance-billing__summ-field input[type="text"],
	.s24-balance-page .s24-settings-section .s24-balance-billing__summ-field input.money-format {
		border: 1px solid var(--s24-border);
		border-radius: var(--s24-radius-sm);
		min-height: 2.5rem;
		padding-top: var(--s24-space-2);
		padding-bottom: var(--s24-space-2);
	}

	.s24-balance-page #fromBalanceTr {
		color: var(--s24-primary);
	}

	/* Ряд кнопок: .s24-form-actions (+ при необходимости .s24-form-actions--start) — s24-components.css */

	/* Предупреждение платёжки */
	.s24-balance-page #payment_warning .warning,
	.s24-balance-page .warning {
		padding: var(--s24-space-3) var(--s24-space-4);
		border-radius: var(--s24-radius-sm);
		background: var(--s24-warning);
		border: 1px solid hsl(43 70% 72%);
		color: hsl(33 69% 28%);
		font-size: var(--s24-caption);
		line-height: 1.5;
	}

	/* locationselector-селекты (country/region/city) внутри формы плательщика
	   унифицированы в самом компоненте `table.s24-payer-form` — см.
	   s24-components.css. Здесь дополнительных override'ов для balance нет,
	   чтобы форма выглядела идентично на всех страницах-потребителях. */

	/* Ожидающие платежи — карточки (как история), без поломанной таблицы 3+4 колонок */
	.s24-balance-wait-list {
		display: flex;
		flex-direction: column;
		gap: var(--s24-space-3);
		min-width: 0;
	}

	.s24-balance-wait-card {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--s24-space-3);
		margin: 0;
		padding: var(--s24-space-4);
		box-sizing: border-box;
		min-width: 0;
		background: var(--s24-surface);
		border: 1px solid var(--s24-border);
		border-radius: var(--s24-radius-md);
		box-shadow: var(--s24-shadow-soft);
	}

	/* Лейблы/значения — типографика из s24-form__label + s24-body-text; здесь только раскладка */
	.s24-balance-wait-card .s24-form__label {
		display: block;
		margin-bottom: var(--s24-space-1);
		line-height: 1.3;
	}

	.s24-balance-wait-card .s24-body-text {
		display: block;
		margin: 0;
		font-weight: 400;
	}

	.s24-balance-wait-card__field--num .s24-body-text,
	.s24-balance-wait-card__field--expiry .s24-body-text {
		font-variant-numeric: tabular-nums;
	}

	.s24-balance-wait-card__field--desc .s24-body-text {
		line-height: 1.55;
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	.s24-balance-page .waitButtonsBlock {
		width: auto;
		float: none;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--s24-space-2);
		padding-top: var(--s24-space-2);
		margin: 0;
		border-top: 1px solid var(--s24-border);
	}

	.s24-balance-page .waitButtonsBlock .btn,
	.s24-balance-page .waitButtonsBlock .s24-btn,
	.s24-balance-page .waitButtonsBlock input[type="submit"] {
		margin: 0;
	}

	@media (min-width: 768px) {
		.s24-balance-wait-card {
			grid-template-columns: minmax(0, 6.5rem) minmax(0, 10rem) minmax(0, 1fr) auto;
			align-items: start;
			gap: var(--s24-space-4);
			padding: var(--s24-space-4) var(--s24-space-5);
		}

		.s24-balance-page .waitButtonsBlock {
			padding-top: 0;
			border-top: none;
			justify-content: flex-end;
			align-self: center;
		}

		.s24-balance-wait-card__field--desc {
			min-width: 0;
		}
	}

	/* История платежей */
	.s24-balance-history__pagination {
		margin-top: var(--s24-space-5);
		margin-bottom: 0;
	}

	.s24-balance-history__empty {
		margin-top: var(--s24-space-3);
		margin-bottom: 0;
	}

	.s24-balance-history__table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0 var(--s24-space-2);
		margin-bottom: 0;
	}

	.s24-balance-history__table > tbody > tr > td {
		padding: var(--s24-space-3) var(--s24-space-4);
		vertical-align: top;
		background: var(--s24-surface);
		border-style: solid;
		border-color: var(--s24-border);
		border-width: 1px 0;
	}

	.s24-balance-history__row > td:first-child {
		width: 7.75rem;
		border-left-width: 3px;
		border-left-style: solid;
		border-radius: var(--s24-radius-md) 0 0 var(--s24-radius-md);
	}

	.s24-balance-history__row--in > td:first-child {
		border-left-color: var(--s24-success);
	}

	.s24-balance-history__row--out > td:first-child {
		border-left-color: var(--s24-danger-soft);
	}

	.s24-balance-history__row > td:last-child {
		border-right-width: 1px;
		border-radius: 0 var(--s24-radius-md) var(--s24-radius-md) 0;
	}

	.s24-balance-history__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--s24-space-1);
		margin-bottom: var(--s24-space-0);
	}

	.s24-balance-history__action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: var(--s24-radius-sm);
		/* только background-color: шорткат background сбрасывает background-image у .download-icon */
		background-color: var(--s24-surface-alt);
		border: 1px solid var(--s24-border);
		line-height: 0;
		opacity: 0.85;
		transition: opacity var(--s24-transition-fast), background-color var(--s24-transition-fast);
	}

	.s24-balance-history__action:hover {
		opacity: 1;
		background-color: var(--s24-surface);
	}

	.s24-balance-history__action--danger:hover {
		border-color: hsl(0 55% 82%);
	}

	/* Скачать: подложка + иконка (явно: иначе перебивается каскадом после смены background → background-color у __action) */
	.s24-balance-history__action.download-icon {
		width: 1.75rem;
		height: 1.75rem;
		margin: 0 0 0 var(--s24-space-2);
		vertical-align: middle;
		background-color: var(--s24-surface-alt);
		background-image: url(../../../images/icons/default/download-icon.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 14px;
		text-decoration: none;
		color: inherit;
	}

	.s24-balance-history__action.download-icon:hover {
		background-color: var(--s24-surface);
	}

	.s24-balance-history__date {
		display: block;
		font-size: var(--s24-caption);
		color: var(--s24-text-muted);
		line-height: 1.4;
		white-space: nowrap;
	}

	.s24-balance-history__desc {
		color: var(--s24-text);
		line-height: 1.55;
		min-width: 0;
		word-wrap: break-word;
		overflow-wrap: anywhere;
		max-width: none;
	}

	.s24-balance-history__inline-actions {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--s24-space-1);
		margin-left: var(--s24-space-2);
		vertical-align: middle;
	}

	.s24-balance-history__inline-actions .s24-balance-history__action.download-icon {
		margin-left: 0;
	}

	.s24-balance-history__amount {
		text-align: right;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}

	.s24-balance-history__amount-main {
		display: block;
		font-weight: 700;
	}

	.s24-balance-history__row--in .s24-balance-history__amount-main {
		color: var(--s24-success);
	}

	.s24-balance-history__row--out .s24-balance-history__amount-main {
		color: var(--s24-danger);
	}

	.s24-balance-page .usumm_class,
	.s24-balance-history__amount-alt {
		color: var(--s24-text-muted);
		font-size: var(--s24-caption);
		font-weight: 500;
		margin-top: var(--s24-space-1);
	}

	/* Оплата работ (админ) */
	.s24-balance-page .payforworkblock.ownlist {
		background: var(--s24-surface);
		border: 1px solid var(--s24-border);
		border-radius: var(--s24-radius-md);
		padding: var(--s24-space-4);
		margin-bottom: var(--s24-space-4);
		box-shadow: var(--s24-shadow-soft);
	}

	/* Кластер управлений строки payforwork (Подтвердить + Удалить + калькулятор) —
	   замена <div class="pull-right"> + inline float-ов на flex-колонку справа. */
	.s24-balance-page .payforworkblock .s24-payforwork-actions {
		float: right;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--s24-space-2);
	}

	/* Инлайн-калькулятор суммы к выводу — замена inline style='min-height: 24px; width: 150px'. */
	.s24-balance-page .payforworkblock .s24-payforwork-calc {
		min-height: 24px;
		width: 150px;
	}

	.s24-balance-page .payoutformtext {
		color: var(--s24-text-muted);
		font-weight: 600;
		font-size: var(--s24-caption);
		width: 175px;
	}

	/* Лейбл-колонка таблиц баланса — замена HTML-атрибута <td width="190"> / <td width=145>.
	   На balance ещё используется в #payoutform (форма «Сумма для вывода»).
	   В sum-таблицах — мигрировано на `.s24-sumtable` (свой default width). */
	.s24-balance-page .s24-balance-label-cell {
		width: 190px;
	}

	.s24-balance-page .s24-balance-label-cell--sm {
		width: 145px;
	}

	/* Выделение суммы «к оплате» в строке total_in_pay_sys_curr — замена inline style='font-weight: bold'. */
	.s24-balance-page .s24-summ--emphasis {
		font-weight: bold;
	}

	.s24-balance-page .help {
		margin-top: var(--s24-space-4);
		padding: var(--s24-space-3) var(--s24-space-4);
		background: var(--s24-surface-alt);
		border-radius: var(--s24-radius-sm);
		border: 1px solid var(--s24-border);
		font-size: var(--s24-caption);
		color: var(--s24-text-secondary);
		line-height: 1.55;
	}

	.s24-balance-page .s24-balance-move-form .textright {
		text-align: right;
		padding-right: var(--s24-space-3);
		white-space: nowrap;
	}

	/* Поля в секциях — как в профиле (компактно).
	   Используем :where() (специфичность 0), чтобы любой автономный компонент
	   внутри .s24-profile-layout (напр. table.s24-payer-form с собственными 320px
	   и radius-md) мог переопределить эти метрики без гонки специфичностей и
	   !important. До этого было :is(...) → (0,2,1) + scope-root; payer-form на
	   balance-странице визуально отличался от market-order/СБР. */
	.s24-profile-layout :where(
		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="tel"],
		select,
		textarea
	) {
		border-radius: var(--s24-radius-sm);
		max-width: 100%;
	}

	/* Таблицы-суммы (бывшие .billSummTable и <table class="table">) мигрированы
	   на компонент `.s24-sumtable` — его desktop+mobile визуал лежит в
	   s24-components.css. */

	@media (max-width: 640px) {
		.s24-balance-history__table {
			border-spacing: 0 var(--s24-space-3);
		}

		/* width/border-* перебивают presentation-hints (width=, align=) и базовые
		   правила .table td из s24-components.css. Специфичность (0,3,1+)+load-order
		   достаточны — !important не нужен. */
		.s24-balance-history__table > tbody > tr > td {
			display: block;
			width: 100%;
			box-sizing: border-box;
			border-width: 0 1px 1px 1px;
			border-radius: 0;
		}

		.s24-balance-history__row > td:first-child {
			border-top-width: 1px;
			border-radius: var(--s24-radius-md) var(--s24-radius-md) 0 0;
			border-left-width: 3px;
			width: 100%;
		}

		.s24-balance-history__row > td:last-child {
			border-radius: 0 0 var(--s24-radius-md) var(--s24-radius-md);
			border-bottom-width: 1px;
			text-align: left;
			padding-top: var(--s24-space-2);
		}

		.s24-balance-history__amount-main {
			display: inline;
		}

		.s24-balance-history__actions {
			margin-bottom: var(--s24-space-1);
		}

		.s24-balance-history__date {
			white-space: normal;
		}
	}

	@media (max-width: 480px) {
		.s24-balance-page .payoutformtext {
			display: none;
		}
	}
}

/**
 * Визуал таблиц-форм на balance-странице (реквизиты, payoutform, transferform).
 *
 * После введения компонента `.s24-sumtable` (s24-components.css) все
 * sum-таблицы (billSummTable / Доп.инфо / «Сумма для вывода») переехали на
 * `.s24-sumtable` и сами несут свой desktop + mobile визуал.
 *
 * Здесь остаются только правила для «других» `<table class="table">` на
 * balance — форм ввода реквизитов / перевода, где нужна одинаковая высота
 * ячеек и муте-цвет label-колонки.
 *
 * ВАЖНО: исключаем .s24-payer-form и .s24-sumtable — это самодостаточные
 * компоненты, их td-padding определяется в их собственных правилах. Без
 * `:not()` контекстное правило (специфичность 0,2,1) перебивало компонентные
 * `table.s24-payer-form > tbody > tr > td { padding: 0 }` (0,1,3), из-за чего
 * форма плательщика на balance-странице выглядела заметно «разжатее», чем
 * на market-order / sbr.confirm (там этого контекстного правила нет).
 */
.s24-balance-page .table:not(.s24-payer-form):not(.s24-sumtable) > tbody > tr > td {
	padding: var(--s24-space-3);
	vertical-align: middle;
	font-size: var(--s24-caption);
	color: var(--s24-text-secondary);
	line-height: 1.4;
}

/**
 * Мобильная раскладка оставшихся `<table class="table">` на balance —
 * `#requisites`, `#payoutform`, `#transferform`. Все они — двухколоночные
 * label/value-формы ввода.
 *
 * Исключения:
 *   - `.s24-balance-history__table` — своя layout в @scope
 *   - `.s24-payer-form`            — свои правила в s24-components.css
 *   - `.s24-sumtable`              — мобилка задана в самом компоненте
 *
 * На узких экранах горизонтальная раскладка рвётся (label жмёт input до
 * «XXX XX»); переводим ячейки в block: label сверху, input снизу, на всю
 * ширину.
 */
@media (max-width: 767px) {
	.s24-balance-page
		.table:not(.s24-balance-history__table):not(.s24-payer-form):not(.s24-sumtable)
		> tbody
		> tr
		> td {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: var(--s24-space-1) 0;
		text-align: left;
	}

	.s24-balance-page
		.table:not(.s24-balance-history__table):not(.s24-payer-form):not(.s24-sumtable)
		> tbody
		> tr
		> td:first-child {
		color: var(--s24-text-secondary);
		font-size: var(--s24-caption);
		padding-bottom: 0;
	}

	.s24-balance-page
		.table:not(.s24-balance-history__table):not(.s24-payer-form):not(.s24-sumtable)
		> tbody
		> tr
		> td:last-child {
		padding-top: var(--s24-space-1);
		padding-bottom: var(--s24-space-3);
	}

	.s24-balance-page
		.table:not(.s24-balance-history__table):not(.s24-payer-form):not(.s24-sumtable)
		> tbody
		> tr:last-child
		> td:last-child {
		padding-bottom: 0;
	}

	.s24-balance-page
		.table:not(.s24-balance-history__table):not(.s24-payer-form):not(.s24-sumtable)
		> tbody
		> tr
		> td[colspan="2"] {
		padding: 0;
	}
}

/**
 * Чекаут: магазин (marketorders m=neworder), СБР (sbr m=confirm)
 */
@scope (.s24-market-neworder-page, .s24-sbr-confirm-page, .s24-prjadd-page) {
	.s24-market-neworder__title {
		font-size: var(--s24-heading-md);
		font-weight: 700;
		color: var(--s24-ink);
		line-height: 1.3;
		margin: 0 0 var(--s24-space-5);
	}

	/* Card-обёртка .s24-mo-section слита с .s24-settings-section
	   в s24-components.css (общее определение через селектор с запятой).
	   Специфичный для чекаута тут — только __heading и __heading--center. */

	.s24-mo-section__heading {
		font-weight: 700;
		font-size: var(--s24-heading-sm);
		margin: 0 0 var(--s24-space-4);
		color: var(--s24-ink);
		line-height: 1.3;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--s24-space-2);
	}

	/* Промо-блок внутри таблицы «Стоимость» */
	a.s24-mo-promo-toggle {
		color: var(--s24-primary);
		text-decoration: none;
		font-weight: 600;
		font-size: var(--s24-caption);
	}

	a.s24-mo-promo-toggle:hover,
	a.s24-mo-promo-toggle:focus {
		color: var(--s24-primary-hover);
		text-decoration: none;
	}

	.s24-mo-promo-field {
		display: flex;
		flex-direction: column;
		gap: var(--s24-space-2);
		align-items: stretch;
		max-width: min(100%, 22rem);
	}

	.s24-mo-promo-label {
		display: block;
		margin: 0;
		font-size: var(--s24-caption);
		font-weight: 600;
		color: var(--s24-text);
	}

	.s24-mo-promo-label .s24-dotted-hint {
		font-weight: 600;
		color: var(--s24-text);
	}

	/* Fill-стиль (border/radius/background/padding/min-height/color/font-family/transition/
	   :focus/::placeholder) — из s24-forms.css (контекст `.s24-mo-promo-input-wrap` включён
	   в базовый `:where()`). Здесь — только override-специфика. */
	.s24-mo-promo-input-wrap :is(input[type="text"], input:not([type])) {
		width: 100%;
		max-width: 100%;
		font-size: var(--s24-body);
	}

	/* Значения сумм в чекауте — body + tabular (ячейка .s24-sumtable по умолчанию caption). */
	.s24-sumtable .summ {
		font-size: var(--s24-body);
		line-height: 1.45;
		color: var(--s24-text);
		font-variant-numeric: tabular-nums;
	}

	/* Подпись «Сумма оплаты в …» в чекауте — body-размер (компонент .s24-sumtable даёт caption на ячейках). */
	.s24-sumtable tr#total_in_pay_sys_curr .s24-mo-paycurr-label {
		font-size: var(--s24-body);
	}

	#payment_warning .warning {
		padding: var(--s24-space-3) var(--s24-space-4);
		border-radius: var(--s24-radius-sm);
		background: var(--s24-warning);
		border: 1px solid hsl(43 70% 72%);
		color: hsl(33 69% 28%);
		font-size: var(--s24-caption);
		line-height: 1.5;
	}

	/* Плательщик: разметка и стили — table.s24-payer-form (s24-components.css) */

	/* Подсказка первого заказа (СБР confirm) */
	.s24-mo-first-order-info {
		font-size: var(--s24-caption);
		color: var(--s24-text-secondary);
		line-height: 1.55;
	}

	.s24-mo-first-order-info p {
		margin: 0;
	}

	/* Верх задаёт .s24-form-actions; здесь только больший низ из‑за юридического текста под кнопкой */
	.s24-mo-actions.s24-form-actions--stack {
		margin-bottom: var(--s24-space-8);
	}

	.s24-mo-submit {
		min-width: 0;
	}

	@media (min-width: 641px) {
		.s24-mo-submit {
			min-width: 12.5rem;
		}
	}

	.s24-mo-legal {
		margin: var(--s24-space-5) auto 0;
		max-width: 36rem;
		font-size: var(--s24-caption);
		color: var(--s24-text-secondary);
		line-height: 1.55;
		text-align: center;
	}

	.s24-mo-legal__note {
		/* margin: 0 0 var(--s24-space-3); */
		margin: 0;
	}

	.s24-mo-legal__agree {
		margin: 0;
	}

	.s24-mo-legal a {
		font-weight: 600;
	}

	.s24-mo-agreement-dl {
		display: inline-block;
		vertical-align: middle;
		margin-left: var(--s24-space-2);
	}

	@media (max-width: 640px) {
		/* .s24-mo-section padding: var(--s24-space-4) — задан в общем правиле
		   с .s24-settings-section в s24-components.css. */

		.s24-market-neworder__title {
			font-size: var(--s24-heading-sm);
			text-align: center;
		}
	}
}