/* ============================================================
 * AUTO108 v4 · Оформление заказа (/preview-v4/order/)
 * Дизайн: Claude Design «Оформление заказа» (NxQ76ei3KlF-gcLsEEFppA)
 * Адаптация CSS поверх Bitrix-классов intec.order.1 (.bx-soa-*),
 * без правки шаблона и JS. Условная видимость шагов:
 *   body.v4-co--initial → только Шаг 1 (плитки доставки)
 *   body.v4-co--pickup  → + получатель + оплата (Самовывоз, id=3)
 *   body.v4-co--pvz     → + карта ПВЗ + получатель + оплата (id=21)
 *   body.v4-co--courier → + город + получатель + оплата (id=20)
 * (см. js/checkout-v4.js)
 * ============================================================ */

/* ---------- Корневая обёртка страницы (.co-wrap) ---------- */
.v4-checkout-page {
	background: var(--bg, oklch(0.98 0.005 240));
	max-width: none;
	margin: 0;
	padding: 28px 32px 80px;
}

/* ---------- Hero (.co-head h1) ---------- */
.v4-checkout-page__title {
	font-family: var(--font-display, 'Manrope', sans-serif);
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.028em;
	line-height: 1.05;
	color: var(--ink-900, oklch(0.18 0.03 240));
	margin: 0 0 28px;
}

/* Eyebrow можно сгенерить — но в шаблоне нет. Оставляем заголовок чистым. */

.v4-checkout-wholesale-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 5px;
	background: var(--ok-soft, oklch(0.94 0.05 155));
	color: oklch(0.35 0.12 155);
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-left: 12px;
	vertical-align: middle;
}

/* ---------- Layout (.co-grid) ----------
 * Дизайн: 1fr + 420px sidebar. У Bitrix Bootstrap-сетка
 * #bx-soa-order.row > .col-sm-9 + .col-sm-3. Сводку (#bx-soa-total)
 * переносим вниз через order:9999 — но визуально она появится
 * только после выбора доставки (body.v4-co--has-delivery). */
.v4-checkout-page #bx-soa-order.row {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	margin: 0 !important;
	gap: 0;
}
.v4-checkout-page #bx-soa-order > .col-sm-9,
.v4-checkout-page #bx-soa-order > .col-md-7,
.v4-checkout-page #bx-soa-order > .col-lg-8,
.v4-checkout-page #bx-soa-order > .col-sm-3,
.v4-checkout-page #bx-soa-order > .col-md-5,
.v4-checkout-page #bx-soa-order > .col-lg-4 {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding: 0 !important;
}

/* ---------- Карточка-секция (.co-card) ---------- */
.v4-checkout-page .bx-soa-section {
	background: var(--panel, #fff);
	border: 1px solid var(--line, oklch(0.90 0.012 240));
	border-radius: 12px;
	padding: 18px 20px;
	margin: 0 0 10px !important;
	box-shadow: none;
	transition: none;
}
.v4-checkout-page .bx-soa-section.bx-active {
	border-color: var(--line, oklch(0.90 0.012 240));
	box-shadow: none;
}

/* Заголовок секции (.co-card-head h2) — без иконок, шаблонный шрифт */
.v4-checkout-page .bx-soa-section-title-container {
	padding: 0;
	background: transparent;
	border: 0;
	margin: 0 0 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.v4-checkout-page .bx-soa-section-title {
	font-family: var(--font-display, 'Manrope', sans-serif) !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	letter-spacing: -0.025em !important;
	color: var(--ink-900, oklch(0.18 0.03 240)) !important;
	margin: 0 !important;
	text-transform: none !important;
	line-height: 1.15 !important;
}

/* Удаляем иконки в заголовке: SVG/i/[class*=icon] от intec */
.v4-checkout-page .bx-soa-section-title-container svg,
.v4-checkout-page .bx-soa-section-title-container i,
.v4-checkout-page .bx-soa-section-title-container [class*="icon"]:not(.bx-soa-section-title-container),
.v4-checkout-page .bx-soa-section-title svg,
.v4-checkout-page .bx-soa-section-title i,
.v4-checkout-page .bx-soa-section-title::before,
.v4-checkout-page .bx-soa-section-title::after {
	display: none !important;
}
.v4-checkout-page .bx-soa-section-title-count {
	display: none; /* Bitrix-нумерация скрыта — нумерация в тексте «Шаг N» */
}
.v4-checkout-page .bx-soa-editstep,
.v4-checkout-page .bx-soa-section-title-container > a {
	font-family: var(--font-mono, monospace) !important;
	font-size: 11px !important;
	color: var(--ink-500, oklch(0.58 0.02 240)) !important;
	text-decoration: none !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	flex-shrink: 0;
}
.v4-checkout-page .bx-soa-editstep:hover {
	color: var(--accent, oklch(0.55 0.16 240)) !important;
}
.v4-checkout-page .bx-soa-section-content {
	padding: 0;
}

/* ---------- Sidebar (#bx-soa-total → .co-summary) ---------- */
.v4-checkout-page #bx-soa-total,
.v4-checkout-page .bx-soa-sidebar {
	order: 9999 !important;
	position: static !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 14px !important;
}
.v4-checkout-page .bx-soa-cart-total {
	background: var(--panel, #fff);
	border: 1px solid var(--line, oklch(0.90 0.012 240));
	border-radius: 14px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.v4-checkout-page .bx-soa-cart-total-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 20px;
	font-size: 13.5px;
	color: var(--ink-600, oklch(0.45 0.02 240));
	border: 0;
}
.v4-checkout-page .bx-soa-cart-total-line strong,
.v4-checkout-page .bx-soa-cart-total-line span:last-child {
	color: var(--ink-900, oklch(0.18 0.03 240));
	font-weight: 600;
}
.v4-checkout-page .bx-soa-cart-total-line-total {
	border-top: 1px solid var(--line-soft, oklch(0.94 0.01 240));
	padding-top: 16px !important;
	margin-top: 8px;
	font-family: var(--font-display, 'Manrope', sans-serif);
	font-size: 28px !important;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ink-900, oklch(0.18 0.03 240)) !important;
}

/* ============================================================
 * РАСКРЫВАЕМ ОБЁРТКИ DELIVERY+PAYMENT через display: contents
 * Это нужно чтобы delivery-обёртка и payment-обёртка стали прямыми
 * детьми .col-sm-9.bx-soa (общий flex-родитель), и flex order на них
 * сработал. Иначе payment навсегда жёстко привязан к delivery.
 * ============================================================ */
.v4-checkout-page .col-sm-9.bx-soa {
	display: flex !important;
	flex-direction: column !important;
}
.v4-checkout-page #bx-soa-paysystem-and-delivery.bx-soa-delivery-and-paysystem {
	display: contents !important;
}
.v4-checkout-page .bx-soa-delivery-and-paysystem-item {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: default !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: unset !important;
}
.v4-checkout-page .bx-soa-delivery-and-paysystem-item:hover {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
/* Заголовок внутри обёртки тоже не нужен (он дублирует bx-soa-section-title) */
.v4-checkout-page .bx-soa-delivery-and-paysystem-block-title {
	display: none !important;
}

/* ============================================================
 * ПЛИТКИ СПОСОБОВ ПОЛУЧЕНИЯ (.bx-soa-pp-company → .co-ship-tile)
 * Реальная разметка intec.order.1: внутри #bx-soa-delivery
 *   .bx-soa-pp-item-container > .bx-soa-pp-company × N
 * Реальные ID хранятся в input[name="DELIVERY_ID"] value="N",
 * JS проставляет data-v4-id на плитки.
 * Активные ID: 3 (Самовывоз), 21 (СДЭК ПВЗ), 20 (СДЭК до двери).
 * ============================================================ */

/* Контейнер плиток — Grid 3 в ряд. align-items:start → каждая плитка по
 * высоте своего контента (а не растягивается под самую высокую). Это убирает
 * пустоту снизу у плиток без кнопки (Самовывоз, СДЭК до двери). */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-item-container {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	grid-auto-rows: auto;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: start;
}

/* Сама плитка — fixed min-height, flex column.
 * Структура (сверху вниз):
 *   1. Название (smalltitle)
 *   2. Цена-чип (delivery-cost) — фиксированное место 26px, даже если цены нет
 *   3. Описание (description)
 *   4. ПУСТОЕ место (через margin-bottom:auto на description)
 *   5. Кнопка ПВЗ (parameters/btn) — только для выбранной */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company {
	display: flex !important;
	flex-direction: column !important;
	gap: 0;
	padding: 16px 14px !important;
	background: #fff;
	border: 1.5px solid var(--line, oklch(0.90 0.012 240));
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.15s;
	margin: 0 !important;
	position: relative;
	font-family: inherit;
	text-align: left;
}
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company:hover {
	border-color: var(--ink-400, oklch(0.72 0.015 240));
	background: #fff;
	box-shadow: none;
}
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected {
	border-color: var(--accent, oklch(0.55 0.16 240));
	background: #fff;
	box-shadow: 0 0 0 3px var(--accent-soft, oklch(0.94 0.04 240));
}

/* Скрываем нативный чекбокс intec — вся плитка кликабельна */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company-checkbox,
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company-graf-container {
	display: none !important;
}

/* 1. Заголовок плитки — самый верх */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company-smalltitle {
	font-family: var(--font-display, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink-900, oklch(0.18 0.03 240));
	margin: 0 !important;
	letter-spacing: -0.01em;
	order: 1 !important;
}

/* 2. Цена доставки — фиксированное место 26px под заголовком */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-delivery-cost {
	font-family: var(--font-display, 'Manrope', sans-serif);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-900, oklch(0.18 0.03 240));
	margin: 8px 0 0 !important;
	order: 2 !important;
	min-height: 22px;
	display: block;
}
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-delivery-cost span {
	display: inline-block;
	background: var(--ink-100, oklch(0.96 0.007 240));
	padding: 3px 10px;
	border-radius: 5px;
	font-size: 11px;
	color: var(--accent-ink, oklch(0.36 0.14 240));
	font-family: var(--font-mono, monospace);
	font-weight: 600;
	letter-spacing: 0.04em;
}
/* Эмуляция места под цену для плиток БЕЗ .bx-soa-pp-delivery-cost
 * (например СДЭК до двери, где стоимость рассчитывается позже).
 * :has() — современный CSS, поддерживается всеми браузерами 2024+. */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company:not(:has(.bx-soa-pp-delivery-cost)) .bx-soa-pp-company-smalltitle {
	margin-bottom: 30px !important;
}

/* 3. Описание плитки — сразу под ценой, маленький отступ */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company-description,
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company-desc {
	font-size: 12px;
	color: var(--ink-500, oklch(0.58 0.02 240));
	line-height: 1.35;
	margin: 8px 0 0 !important;
	order: 3 !important;
}

/* Скрываем пустые тех-контейнеры intec */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-desc-container {
	display: none !important;
}
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company-parameters:empty {
	display: none !important;
}

/* Кнопка «Выберите пункт выдачи» (СДЭК) приходит от модуля отдельным узлом
 * БЕЗ flex-order → по умолчанию order:0 → падала наверх плитки, над заголовком.
 * Уводим В НИЗ через flex order: ЛЮБОЙ неизвестный прямой потомок плитки
 * (всё, что не заголовок/цена/описание/тех-контейнеры) получает order:10 —
 * встаёт под описание. Надёжнее absolute: не зависит от тега/класса кнопки. */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company > *:not(.bx-soa-pp-company-smalltitle):not(.bx-soa-pp-delivery-cost):not(.bx-soa-pp-company-description):not(.bx-soa-pp-company-desc):not(.bx-soa-pp-company-graf-container):not(.bx-soa-pp-company-checkbox):not(.bx-soa-pp-company-image) {
	order: 10 !important;
	margin-top: 12px !important;
}

/* Стилизация любого кликабельного элемента в активной плитке */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected .bx-soa-pp-company-parameters .btn,
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected .bx-soa-pp-company-parameters button,
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected .bx-soa-pp-company-parameters a,
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected > button,
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected > a:not([href^="tel:"]),
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected > .btn,
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected > input[type="button"],
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected > input[type="submit"] {
	width: 100% !important;
	padding: 9px 12px !important;
	background: var(--accent, oklch(0.55 0.16 240)) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-family: var(--font-mono, monospace) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	cursor: pointer !important;
	text-align: center !important;
	text-decoration: none !important;
}
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected .btn:hover,
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected button:hover,
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected a:hover {
	background: var(--accent-hover, oklch(0.48 0.17 240)) !important;
}

/* Фильтр служб доставки — оставляем только 3/21/20 */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company:not([data-v4-id="3"]):not([data-v4-id="21"]):not([data-v4-id="20"]) {
	display: none !important;
}

/* ============================================================
 * ПЛИТКИ СПОСОБОВ ОПЛАТЫ (.co-pay)
 * Внутри #bx-soa-paysystem, обычно тоже .bx-soa-pp-company.
 * Меньше плиток чем доставка → grid 2 колонки.
 * ============================================================ */
.v4-checkout-page #bx-soa-paysystem .bx-soa-pp-item-container,
.v4-checkout-page #bx-soa-paysystem .bx-soa-pp {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.v4-checkout-page #bx-soa-paysystem .bx-soa-pp-company {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 14px 16px !important;
	background: #fff;
	border: 1px solid var(--line, oklch(0.90 0.012 240));
	border-radius: 11px;
	cursor: pointer;
	transition: all 0.15s;
	margin: 0 !important;
	font-family: inherit;
}
.v4-checkout-page #bx-soa-paysystem .bx-soa-pp-company:hover {
	border-color: var(--ink-400, oklch(0.72 0.015 240));
}
.v4-checkout-page #bx-soa-paysystem .bx-soa-pp-company.bx-selected {
	border-color: var(--accent, oklch(0.55 0.16 240));
	background: #fff;
	box-shadow: 0 0 0 3px var(--accent-soft, oklch(0.94 0.04 240));
}
.v4-checkout-page #bx-soa-paysystem .bx-soa-pp-company-smalltitle {
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-900, oklch(0.18 0.03 240));
	margin: 0;
}
.v4-checkout-page #bx-soa-paysystem .bx-soa-pp-company-description {
	font-size: 11.5px;
	color: var(--ink-500, oklch(0.58 0.02 240));
	font-family: var(--font-mono, monospace);
	margin: 2px 0 0;
}

/* ============================================================
 * ПОЛЯ ФОРМЫ (.co-field)
 * Внутри #bx-soa-properties.
 * ============================================================ */
.v4-checkout-page .bx-soa-customer .form-control,
.v4-checkout-page .bx-soa-customer input[type="text"],
.v4-checkout-page .bx-soa-customer input[type="email"],
.v4-checkout-page .bx-soa-customer input[type="tel"],
.v4-checkout-page .bx-soa-customer input[type="number"],
.v4-checkout-page .bx-soa-customer textarea,
.v4-checkout-page .bx-soa-customer select,
.v4-checkout-page #bx-soa-properties input[type="text"]:not(.basket-coupon-input),
.v4-checkout-page #bx-soa-properties input[type="email"],
.v4-checkout-page #bx-soa-properties input[type="tel"],
.v4-checkout-page #bx-soa-properties textarea {
	width: 100%;
	padding: 13px 14px;
	background: #fff;
	border: 1px solid var(--line, oklch(0.90 0.012 240));
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	color: var(--ink-900, oklch(0.18 0.03 240));
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.v4-checkout-page #bx-soa-properties input:hover,
.v4-checkout-page #bx-soa-properties select:hover,
.v4-checkout-page #bx-soa-properties textarea:hover {
	border-color: var(--ink-400, oklch(0.72 0.015 240));
}
.v4-checkout-page #bx-soa-properties input:focus,
.v4-checkout-page #bx-soa-properties select:focus,
.v4-checkout-page #bx-soa-properties textarea:focus {
	border-color: var(--accent, oklch(0.55 0.16 240));
	box-shadow: 0 0 0 3px var(--accent-soft, oklch(0.94 0.04 240));
}

.v4-checkout-page .bx-soa-customer label,
.v4-checkout-page .bx-soa-customer .control-label,
.v4-checkout-page #bx-soa-properties .form-group label {
	font-family: var(--font-mono, monospace);
	font-size: 10.5px;
	color: var(--ink-500, oklch(0.58 0.02 240));
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 6px;
	display: block;
}
.v4-checkout-page #bx-soa-properties .form-group {
	margin-bottom: 12px;
}

/* Профиль пользователя (.co-reference) */
.v4-checkout-page .bx-soa-reference {
	background: var(--ink-100, oklch(0.96 0.007 240));
	border: 1px solid var(--line, oklch(0.90 0.012 240));
	border-radius: 9px;
	padding: 12px 14px;
	font-size: 13px;
	color: var(--ink-800, oklch(0.28 0.025 240));
	margin-bottom: 14px;
	font-family: var(--font-mono, monospace);
}

/* ============================================================
 * КНОПКИ ШАГОВ И SUBMIT (.co-submit-btn)
 * ============================================================ */
.v4-checkout-page .bx-soa .btn,
.v4-checkout-page .bx-soa-section .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 9px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.15s;
	letter-spacing: 0.01em;
	text-transform: none;
}
.v4-checkout-page .bx-soa .btn-default {
	background: var(--ink-100, oklch(0.96 0.007 240));
	color: var(--ink-800, oklch(0.28 0.025 240));
	border-color: var(--line, oklch(0.90 0.012 240));
}
.v4-checkout-page .bx-soa .btn-default:hover {
	background: var(--ink-150, oklch(0.93 0.01 240));
}
.v4-checkout-page .bx-soa .btn-primary,
.v4-checkout-page #bx-soa-order-form .btn-primary {
	background: var(--accent, oklch(0.55 0.16 240));
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 16px 24px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	width: 100%;
	text-transform: none;
}
.v4-checkout-page .bx-soa .btn-primary:hover,
.v4-checkout-page #bx-soa-order-form .btn-primary:hover {
	background: var(--accent-hover, oklch(0.48 0.17 240));
}
.v4-checkout-page .bx-soa .btn-lg {
	padding: 16px 24px;
	font-size: 14px;
}

/* Согласие на обработку данных (.co-consent) */
.v4-checkout-page .bx-soa-customer-agreement,
.v4-checkout-page #bx-soa-orderSave .checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 0;
	font-size: 12.5px;
	color: var(--ink-600, oklch(0.45 0.02 240));
	line-height: 1.5;
	margin: 0;
}
.v4-checkout-page .bx-soa-customer-agreement a {
	color: var(--accent, oklch(0.55 0.16 240));
	text-decoration: none;
}
.v4-checkout-page .bx-soa-customer-agreement a:hover {
	text-decoration: underline;
}
input[type="checkbox"] {
	accent-color: var(--accent, oklch(0.55 0.16 240));
}

/* ---------- Карта ПВЗ ----------
 * Внутри #bx-soa-pickup. Видна только при v4-co--pvz. */
.v4-checkout-page #bx-soa-pickup .bx-soa-pickup-map,
.v4-checkout-page .bx-soa-pp-list-map {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--line, oklch(0.90 0.012 240));
	min-height: 380px;
}

/* ============================================================
 * АЛЕРТЫ
 * ============================================================ */
.v4-checkout-page .bx-soa .alert,
.v4-checkout-page .bx-soa-cart-warning,
.v4-checkout-page .bx-soa-order-warning {
	background: oklch(0.96 0.05 70);
	color: oklch(0.4 0.15 70);
	border: 1px solid oklch(0.85 0.12 70);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
	margin: 12px 0;
}
.v4-checkout-page .bx-soa .alert-danger {
	background: oklch(0.96 0.05 30);
	color: oklch(0.55 0.18 30);
	border-color: oklch(0.85 0.12 30);
}
.v4-checkout-page .bx-soa .alert-success {
	background: var(--ok-soft, oklch(0.94 0.05 155));
	color: oklch(0.35 0.12 155);
	border-color: oklch(0.85 0.12 155);
}

/* ============================================================
 * УСЛОВНАЯ ВИДИМОСТЬ ШАГОВ (см. js/checkout-v4.js)
 *   body.v4-co--initial → только Шаг 1 (delivery)
 *   body.v4-co--pickup  → + customer + payment + basket (Самовывоз)
 *   body.v4-co--pvz     → + #bx-soa-pickup + customer + payment + basket
 *   body.v4-co--courier → + customer + payment + basket (Курьер)
 * Все скрытия — display:none на уровне CSS, поля в DOM
 * сохраняются и корректно отправляются в админку Bitrix.
 * ============================================================ */

/* ============================================================
 * Штатный Bitrix-блок #bx-soa-pickup — это НЕ карта СДЭК, а
 * стандартный pickup-модуль с точками (которых у нас нет).
 * Скрываем ВСЕГДА и для всех режимов. СДЭК открывает свою
 * карту в попапе через кнопку «Выберите пункт выдачи».
 * ============================================================ */
.v4-checkout-page #bx-soa-pickup,
.v4-checkout-page #bx-soa-pickup-hidden,
.v4-checkout-page [id*="pickup"]:not([id*="hidden"]):not([class*="pp-"]),
.v4-checkout-page [class*="pickup-map"],
.v4-checkout-page .bx-soa-pickup-map,
.v4-checkout-page [class*="bx-soa-map"]:not(.bx-soa-map-attr):not(.bx-soa-map-tool),
.v4-checkout-page .ymap-container,
.v4-checkout-page [class*="ymaps"]:not([class*="copy"]):not([class*="balloon"]) {
	display: none !important;
}

/* Initial-режим скрывает следующие шаги (Местоположение/region виден всегда) */
body.v4-co--initial .v4-checkout-page [data-v4-step="customer"],
body.v4-co--initial .v4-checkout-page [data-v4-step="payment"],
body.v4-co--initial .v4-checkout-page [data-v4-step="basket"],
body.v4-co--initial .v4-checkout-page [data-v4-step="sidebar"],
body.v4-co--initial .v4-checkout-page #bx-soa-orderSave {
	display: none !important;
}

/* Появление сводки внизу после выбора доставки */
body.v4-co--has-delivery .v4-checkout-page [data-v4-step="sidebar"] {
	display: block !important;
}

/* ============================================================
 * ПОРЯДОК ШАГОВ через flex order
 * Родитель .col-sm-9.bx-soa = flex column (см. выше).
 * #bx-soa-paysystem-and-delivery = display:contents — разворачивает
 * delivery/payment обёртки в общий flex.
 *
 * Желаемый порядок (по требованию пользователя):
 *   0. Ваш заказ (basket)                 — корзина в самом верху
 *   1. Регион (region)                    — перед выбором способа
 *   2. Шаг 1: Способ получения (delivery)
 *   3. (опц.) Карта ПВЗ (pickup) для СДЭК ПВЗ
 *   4. Шаг 2: Данные получателя (customer)
 *   5. Шаг 3: Способ оплаты (payment)
 *   998. Согласие на ПДн + кнопка «Оформить заказ» (#bx-soa-orderSave)
 *   999. Sidebar итога (sidebar)
 * ============================================================ */
.v4-checkout-page [data-v4-step="basket"]    { order: 0 !important; }
.v4-checkout-page [data-v4-step="region"]    { order: 1 !important; }
.v4-checkout-page [data-v4-step="delivery"]  { order: 2 !important; }
.v4-checkout-page #bx-soa-pickup             { order: 3 !important; }
.v4-checkout-page [data-v4-step="customer"]  { order: 4 !important; }
.v4-checkout-page [data-v4-step="payment"]   { order: 5 !important; }

/* Блок согласия + submit (#bx-soa-orderSave) — в самый низ перед сводкой */
.v4-checkout-page #bx-soa-orderSave {
	order: 998 !important;
	margin-top: 8px;
}

.v4-checkout-page [data-v4-step="sidebar"]   { order: 9999 !important; }

/* ============================================================
 * ПЕРЕКЛЮЧАТЕЛЬ ФИЗ/ЮР ЛИЦО → сегментед-контрол (как в макете)
 * DOM (order_ajax.js, personTypesCount==2), внутри #bx-soa-region:
 *   .form-check-group
 *     > label.bx-soa-custom-label   (подпись «Тип плательщика» — скрываем)
 *     > .form-check (×2)
 *         > input.form-check-input[type=radio]   (прячем)
 *         > label.form-check-label                (сегмент-пилюля)
 * Активный сегмент — через :has(:checked): белая пилюля + тень.
 * ============================================================ */
.v4-checkout-page .form-check-group {
	display: inline-flex;
	gap: 4px;
	background: var(--ink-100, oklch(0.96 0.007 240));
	border: 1px solid var(--line, oklch(0.90 0.012 240));
	border-radius: 12px;
	padding: 4px;
	margin: 0 0 16px;
	max-width: 100%;
}
.v4-checkout-page .form-check-group > .bx-soa-custom-label {
	display: none !important;
}
.v4-checkout-page .form-check-group .form-check {
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	min-height: 0;
}
.v4-checkout-page .form-check-group .form-check-input {
	position: absolute !important;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0 !important;
	pointer-events: none;
}
.v4-checkout-page .form-check-group .form-check-label {
	display: block;
	margin: 0 !important;
	padding: 9px 22px;
	border-radius: 9px;
	font-family: var(--font-display, 'Manrope', sans-serif) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ink-500, oklch(0.58 0.02 240)) !important;
	cursor: pointer;
	transition: all 0.15s;
	white-space: nowrap;
}
.v4-checkout-page .form-check-group .form-check:has(.form-check-input:checked) .form-check-label {
	background: #fff;
	color: var(--ink-900, oklch(0.18 0.03 240)) !important;
	font-weight: 700 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .09), 0 0 0 1px rgba(0, 0, 0, .02);
}

/* ============================================================
 * ИКОНКИ ТИПОВ ДОСТАВКИ — бейдж справа от названия плитки.
 * Показываем ТОЛЬКО у плиток с известным data-v4-id (3/21/20),
 * иначе ::after без mask дал бы сплошной квадрат.
 *   ::before = подложка-квадрат (серая → синяя у выбранной)
 *   ::after  = иконка через CSS mask (серая → белая у выбранной)
 * Иконки Lucide: store (Самовывоз 3), truck (СДЭК ПВЗ 21), door (до двери 20).
 * data-v4-id проставляет checkout-v4.js из input[name=DELIVERY_ID].
 * ============================================================ */
.v4-checkout-page #bx-soa-delivery [data-v4-id="3"] .bx-soa-pp-company-smalltitle,
.v4-checkout-page #bx-soa-delivery [data-v4-id="21"] .bx-soa-pp-company-smalltitle,
.v4-checkout-page #bx-soa-delivery [data-v4-id="20"] .bx-soa-pp-company-smalltitle {
	position: relative;
	padding-right: 50px;
	min-height: 38px;
	display: flex;
	align-items: center;
}
.v4-checkout-page #bx-soa-delivery [data-v4-id="3"] .bx-soa-pp-company-smalltitle::before,
.v4-checkout-page #bx-soa-delivery [data-v4-id="21"] .bx-soa-pp-company-smalltitle::before,
.v4-checkout-page #bx-soa-delivery [data-v4-id="20"] .bx-soa-pp-company-smalltitle::before {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--ink-100, oklch(0.96 0.007 240));
	transition: background 0.15s;
}
.v4-checkout-page #bx-soa-delivery [data-v4-id="3"] .bx-soa-pp-company-smalltitle::after,
.v4-checkout-page #bx-soa-delivery [data-v4-id="21"] .bx-soa-pp-company-smalltitle::after,
.v4-checkout-page #bx-soa-delivery [data-v4-id="20"] .bx-soa-pp-company-smalltitle::after {
	content: '';
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background-color: var(--ink-500, oklch(0.58 0.02 240));
	-webkit-mask: center / contain no-repeat;
	        mask: center / contain no-repeat;
	transition: background-color 0.15s;
}
/* Выбранная плитка — синий бейдж + белая иконка */
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected .bx-soa-pp-company-smalltitle::before {
	background: var(--accent, oklch(0.55 0.16 240));
}
.v4-checkout-page #bx-soa-delivery .bx-soa-pp-company.bx-selected .bx-soa-pp-company-smalltitle::after {
	background-color: #fff;
}
/* Пер-тип иконки (mask-image) */
.v4-checkout-page #bx-soa-delivery [data-v4-id="3"] .bx-soa-pp-company-smalltitle::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m2%207%204.41-4.41A2%202%200%200%201%207.83%202h8.34a2%202%200%200%201%201.42.59L22%207%27/%3E%3Cpath%20d%3D%27M4%2012v8a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-8%27/%3E%3Cpath%20d%3D%27M15%2022v-4a2%202%200%200%200-2-2h-2a2%202%200%200%200-2%202v4%27/%3E%3Cpath%20d%3D%27M2%207h20%27/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m2%207%204.41-4.41A2%202%200%200%201%207.83%202h8.34a2%202%200%200%201%201.42.59L22%207%27/%3E%3Cpath%20d%3D%27M4%2012v8a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-8%27/%3E%3Cpath%20d%3D%27M15%2022v-4a2%202%200%200%200-2-2h-2a2%202%200%200%200-2%202v4%27/%3E%3Cpath%20d%3D%27M2%207h20%27/%3E%3C/svg%3E");
}
.v4-checkout-page #bx-soa-delivery [data-v4-id="21"] .bx-soa-pp-company-smalltitle::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%27/%3E%3Cpath%20d%3D%27M15%2018H9%27/%3E%3Cpath%20d%3D%27M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.62l-3.48-4.35A1%201%200%200%200%2017.52%208H14%27/%3E%3Ccircle%20cx%3D%277%27%20cy%3D%2718%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2718%27%20r%3D%272%27/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%27/%3E%3Cpath%20d%3D%27M15%2018H9%27/%3E%3Cpath%20d%3D%27M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.62l-3.48-4.35A1%201%200%200%200%2017.52%208H14%27/%3E%3Ccircle%20cx%3D%277%27%20cy%3D%2718%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2718%27%20r%3D%272%27/%3E%3C/svg%3E");
}
.v4-checkout-page #bx-soa-delivery [data-v4-id="20"] .bx-soa-pp-company-smalltitle::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%204h3a2%202%200%200%201%202%202v14%27/%3E%3Cpath%20d%3D%27M2%2020h3%27/%3E%3Cpath%20d%3D%27M13%2020h9%27/%3E%3Cpath%20d%3D%27M10%2012v.01%27/%3E%3Cpath%20d%3D%27M13%204.56v16.16a1%201%200%200%201-1.24.97L5%2020V5.56a2%202%200%200%201%201.51-1.94l4-1A2%202%200%200%201%2013%204.56Z%27/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%204h3a2%202%200%200%201%202%202v14%27/%3E%3Cpath%20d%3D%27M2%2020h3%27/%3E%3Cpath%20d%3D%27M13%2020h9%27/%3E%3Cpath%20d%3D%27M10%2012v.01%27/%3E%3Cpath%20d%3D%27M13%204.56v16.16a1%201%200%200%201-1.24.97L5%2020V5.56a2%202%200%200%201%201.51-1.94l4-1A2%202%200%200%201%2013%204.56Z%27/%3E%3C/svg%3E");
}

/* ============================================================
 * MOBILE (.co-grid → 1 колонка, плитки → 1 в ряд)
 * ============================================================ */
@media (max-width: 900px) {
	.v4-checkout-page {
		padding: 20px 16px 60px;
	}
	.v4-checkout-page__title {
		font-size: 26px;
		letter-spacing: -0.02em;
	}
	.v4-checkout-page .bx-soa-section {
		padding: 18px;
		border-radius: 12px;
	}
	.v4-checkout-page #bx-soa-delivery .bx-soa-pp-item-container {
		grid-template-columns: 1fr !important;
	}
	.v4-checkout-page #bx-soa-paysystem .bx-soa-pp-item-container,
	.v4-checkout-page #bx-soa-paysystem .bx-soa-pp {
		grid-template-columns: 1fr !important;
	}
	.v4-checkout-page .bx-soa-cart-total-line-total {
		font-size: 22px !important;
	}
}

@media (max-width: 1100px) and (min-width: 901px) {
	.v4-checkout-page #bx-soa-delivery .bx-soa-pp-item-container {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}