/* ============================================================
   Checkout progress steps — TRULY GLOBAL (2026-05-23 v2)
   ============================================================
   Selector pattern:
     html body .progress-steps:not(.__x) .psr-step:not(.__x)
   Specificity 0-4-2 — гарантированно перебивает stepper-premium.css
   (0-2-2), refresh.css (0-1-1) и любые inline `<style>` блоки на
   страницах checkout0/1/2/3 + per-carrier шаблонах.
   ============================================================ */

/* === Mobile bottom-sheet backdrop (checkout0 drawer) — отключаем dim навсегда === */
/* JS в checkout0.twig создаёт `.psr-sheet-backdrop` с rgba(15,17,21,.5) при открытии drawer'а — мешало юзеру. */
html body .psr-sheet-backdrop,
html body .psr-quote-modal-backdrop {
	display: none !important;
	background: transparent !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* === Контейнер степпера === */
html body .progress-steps:not(.__x) {
	gap: 0 !important;
	background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
	border: 1px solid #eef0f3 !important;
	border-radius: 16px !important;
	padding: 22px 16px !important;
	box-shadow:
		0 1px 3px rgba(15,17,21,.04),
		0 6px 18px -10px rgba(15,17,21,.06) !important;
	position: relative !important;
	overflow: hidden !important;
}
html body .progress-steps:not(.__x)::before {
	content: "" !important;
	position: absolute !important;
	top: 0; left: 0; right: 0;
	height: 3px !important;
	background: linear-gradient(90deg, #F01A26 0%, #ff3b41 50%, #c11018 100%) !important;
	opacity: .9 !important;
}

/* === Непрерывный track сквозь центры всех кругов === */
/* Один непрерывный line вместо отдельных line-between-steps между парами шагов.
   Цветовая граница на --done-pct: red 0..done, grey done..100. */
html body .progress-steps:not(.__x)::after {
	content: "" !important;
	position: absolute !important;
	left: 48px !important;         /* circle center relative to aside = padding-left 16 + step padding-left 12 + circle-half 20 = 48; minus half track = 47-48 */
	top: 38px !important;
	bottom: 38px !important;
	width: 2px !important;
	background: linear-gradient(180deg, #F01A26 0%, #ff5560 100%) !important;
	border-radius: 2px !important;
	z-index: 0 !important;
}

/* Прячем per-gap line-elements — track ::after уже всё рисует === */
html body .progress-steps:not(.__x) .line-holder,
html body .progress-steps:not(.__x) .line-between-steps {
	display: none !important;
}

/* === Шаг (карточка) === */
/* Гасит `psrStepFloat` animation из /css/mainPage/refresh.css */
html body .progress-steps:not(.__x) .psr-step:not(.__x) {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 12px 12px !important;
	border-radius: 12px !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	color: #1a1d22 !important;
	text-decoration: none !important;
	transition: background .25s ease, border-color .25s ease, box-shadow .25s ease !important;
	position: relative !important;
	z-index: 1 !important;            /* шаг (с круглым фоновым) лежит ПОВЕРХ continuous track */
	animation: none !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	margin: 0 0 18px 0 !important;    /* расстояние между шагами (вместо удалённой line-holder) */
	opacity: 1 !important;
}
html body .progress-steps:not(.__x) .psr-step:not(.__x):last-child {
	margin-bottom: 0 !important;
}

/* === Круг с цифрой === */
html body .progress-steps:not(.__x) .psr-step:not(.__x) .circle-punct-check {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	flex-shrink: 0 !important;
	transition: all .3s cubic-bezier(.4,0,.2,1) !important;
	position: relative !important;
	z-index: 2 !important;
	margin: 0 !important;
}
html body .progress-steps:not(.__x) .psr-step:not(.__x) .circle-punct-check.bg-primary {
	background: linear-gradient(135deg, #ff3b41 0%, #F01A26 50%, #c11018 100%) !important;
	color: #fff !important;
	border: none !important;
	box-shadow:
		0 6px 16px -6px rgba(15,17,21,0.18),
		inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html body .progress-steps:not(.__x) .psr-step:not(.__x) .circle-punct-check.bg-primary i {
	font-size: 18px !important;
	font-weight: 900 !important;
}
/* Pending: red-outlined transparent circle с red text (как на эталоне юзера) */
html body .progress-steps:not(.__x) .psr-step:not(.__x) .circle-punct-check.bg-white {
	background: #fff !important;
	color: var(--auth-red, #F01A26) !important;
	border: 2px solid var(--auth-red, #F01A26) !important;
	box-shadow: 0 1px 2px rgba(15,17,21,0.03) !important;
	opacity: .55 !important;             /* визуально мягче чем активный */
}

/* === Лейбл рядом с кругом === */
html body .progress-steps:not(.__x) .psr-step:not(.__x) .psr-step-label {
	display: flex !important;
	flex-direction: column !important;
	gap: 1px !important;
	min-width: 0 !important;
	flex: 1 !important;
}
html body .progress-steps:not(.__x) .psr-step:not(.__x) .psr-step-name {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #1a1d22 !important;
	line-height: 1.3 !important;
	letter-spacing: -.005em !important;
	white-space: normal !important;
	word-break: keep-all !important;
}

/* === Состояния === */
html body .progress-steps:not(.__x) .psr-step--current:not(.__x) {
	background: linear-gradient(135deg, rgba(15,17,21,.04) 0%, rgba(15,17,21,.04) 80%) !important;
	border-color: rgba(240,26,38,.18) !important;
}
html body .progress-steps:not(.__x) .psr-step--current:not(.__x)::before {
	content: "" !important;
	position: absolute !important;
	left: -1px !important;
	top: 10px !important;
	bottom: 10px !important;
	width: 4px !important;
	border-radius: 0 4px 4px 0 !important;
	background: linear-gradient(180deg, #ff3b41 0%, #F01A26 50%, #c11018 100%) !important;
	box-shadow: 0 4px 12px -2px rgba(15,17,21,0.21) !important;
}
html body .progress-steps:not(.__x) .psr-step--current:not(.__x) .psr-step-name {
	color: #0f1115 !important;
	font-weight: 800 !important;
}
html body .progress-steps:not(.__x) .psr-step--current:not(.__x) .circle-punct-check {
	animation: psrCirclePulse 2.4s ease-in-out infinite !important;
}
@keyframes psrCirclePulse {
	0%, 100% {
		box-shadow:
			0 6px 16px -6px rgba(15,17,21,0.18),
			inset 0 1px 0 rgba(255,255,255,.25),
			0 0 0 0 rgba(15,17,21,0.14);
	}
	50% {
		box-shadow:
			0 8px 22px -4px rgba(15,17,21,0.23),
			inset 0 1px 0 rgba(255,255,255,.25),
			0 0 0 8px rgba(15,17,21,0);
	}
}

html body .progress-steps:not(.__x) .psr-step--pending:not(.__x) {
	opacity: 1 !important;
}
html body .progress-steps:not(.__x) .psr-step--pending:not(.__x) .psr-step-name {
	color: #9aa1ad !important;
	font-weight: 600 !important;
}

/* (Per-gap .line-holder/.line-between-steps скрыты выше — заменены непрерывным ::after track) */

/* === Header degree-block в степпере (для checkout1/2 c logo+tagline) === */
html body .progress-steps:not(.__x) .psr-step-logo {
	margin-bottom: 18px !important;
	padding-bottom: 16px !important;
	border-bottom: 1px solid #eef0f3 !important;
}
html body .progress-steps:not(.__x) .psr-step-logo img {
	display: block !important;
	max-height: 42px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}
html body .progress-steps:not(.__x) .psr-step-tagline {
	font-size: 11.5px !important;
	color: #6a7280 !important;
	margin-top: 6px !important;
	line-height: 1.3 !important;
}

/* === Десктоп ≥992: vertical sidebar === */
@media (min-width: 992px) {
	html body .form-and-steps-holder > .progress-steps:not(.__x),
	html body .form-and-steps-holder > aside.progress-steps:not(.__x) {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
	}
}

/* === Мобайл/планшет ≤991: horizontal strip сверху === */
@media (max-width: 991px) {
	html body .form-and-steps-holder > .progress-steps:not(.__x),
	html body .form-and-steps-holder > aside.progress-steps:not(.__x) {
		flex-direction: row !important;
		justify-content: space-between !important;
		padding: 14px 16px !important;
		gap: 0 !important;
		overflow: visible !important;       /* критично: чтобы 4-й step не клипался */
	}
	/* На mobile КОНТЕЙНЕР степпера — без выраженной карточки, чтобы выглядел одинаково
	   на checkout0, checkout1 и других page'ах независимо от их собственных wrapper'ов */
	html body .progress-steps:not(.__x) {
		background: #fff !important;
		border: 1px solid #eef0f3 !important;
		border-radius: 14px !important;
		padding: 12px 16px !important;
		box-shadow: none !important;
	}
	/* Top stripe тоже скрываем на mobile — тоньше визуал */
	html body .progress-steps:not(.__x)::before {
		display: none !important;
	}
	/* На мобиле непрерывный track скрываем — между circles рисуем mini-connectors через line-holder */
	html body .progress-steps:not(.__x)::after {
		display: none !important;
	}
	html body .progress-steps:not(.__x) .psr-step:not(.__x) {
		flex-direction: column !important;
		gap: 0 !important;
		padding: 0 !important;
		text-align: center !important;
		margin: 0 !important;
		flex: 0 0 auto !important;          /* фикс ширины = только circle, не shrink/grow */
	}
	html body .progress-steps:not(.__x) .psr-step:not(.__x) .psr-step-label,
	html body .progress-steps:not(.__x) .psr-step:not(.__x) .psr-step-name {
		display: none !important;     /* На мобиле только круги + connectors, как на эталоне юзера */
	}
	html body .progress-steps:not(.__x) .psr-step:not(.__x) .circle-punct-check {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		max-width: 32px !important;
		font-size: 13px !important;
	}
	html body .progress-steps:not(.__x) .psr-step--current:not(.__x)::before {
		display: none !important;
	}
	/* На мобиле не нужен red-tint background на active step — карточка остаётся чистой */
	html body .progress-steps:not(.__x) .psr-step--current:not(.__x) {
		background: transparent !important;
		border-color: transparent !important;
	}
	/* На мобиле возвращаем line-holder/line-between-steps как horizontal connectors */
	/* Все connectors red (визуально единый horizontal pipe) — единый brand-look */
	html body .progress-steps:not(.__x) .line-holder {
		display: flex !important;
		padding: 0 8px !important;
		flex: 1 1 auto !important;
		min-width: 24px !important;
		min-height: 0 !important;
		height: 32px !important;            /* same as circle height для perfect vertical center */
		align-self: center !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
	}
	html body .progress-steps:not(.__x) .line-between-steps {
		display: block !important;
		width: 100% !important;
		height: 2px !important;
		min-height: 2px !important;
		background: linear-gradient(90deg, #F01A26 0%, #ff5560 100%) !important;
		border-radius: 2px !important;
		opacity: 1 !important;
	}
	/* Done connector (после уже пройденного шага) — same red, без opacity-разницы */
	html body .progress-steps:not(.__x) .line-between-steps.psr-line--done {
		background: linear-gradient(90deg, #F01A26 0%, #c11018 100%) !important;
		opacity: 1 !important;
	}
	html body .progress-steps:not(.__x) .psr-step-logo,
	html body .progress-steps:not(.__x) .psr-step-tagline {
		display: none !important;
	}
}

/* PSR 2026-07-24: прогресс-степпер прилипает при скролле на ВСЕХ чекаутах (десктоп).
   Sticky на flex-ребёнке .form-and-steps-holder (align-items:flex-start даёт ему
   не растягиваться на всю высоту, поэтому sticky работает). Видимый степпер —
   .x-checkout-stepper-host (checkoutStepperShadow.js), плюс fallback на .progress-steps. */
@media (min-width: 992px) {
	/* 2026-07-25 (п.22): в список добавлены .pds-stepper / aside.pds-stepper —
	   это класс панели на checkout2_payment и карьерных checkout1_* (stepper-iso.css).
	   Без него панель на этих страницах не липла, если checkoutStepperShadow.js
	   не отработал и виден оригинальный <aside>, а не .x-checkout-stepper-host. */
	html body .form-and-steps-holder > .progress-steps:not(.__x),
	html body .form-and-steps-holder > aside.progress-steps:not(.__x),
	html body .form-and-steps-holder > .pds-stepper,
	html body .form-and-steps-holder > aside.pds-stepper,
	html body .form-and-steps-holder > .x-checkout-stepper-host {
		position: sticky !important;
		/* 2026-07-25 (C6): offset берём из общей переменной (см. common/header.twig).
		   Было жёстко 96px; теперь 88px на 992–1366px и 96px на ≥1367px — по факт. высоте хэдера. */
		top: var(--psr-sticky-top, 96px) !important;
		align-self: flex-start !important;
	}
}

/* 2026-07-24: чтобы прогресс-степпер РЕАЛЬНО прилипал — на чекауте body не должен быть
   скролл-контейнером. У body и html стоит `overflow: hidden auto` → ОБА scrollport'ы;
   ближайший к степперу body (высота по контенту, сам не скроллится) перехватывал sticky,
   и степпер не липнул. Делаем body overflow:visible (горизонт клипает html, у него
   overflow-x:hidden остаётся) → sticky привязывается к html, который реально скроллит.
   Scoped через :has на чекаут-обёртку — главную/другие страницы не трогает. */
html body:has(.form-and-steps-holder) {
	overflow: visible !important;
}

/* 2026-07-24: на странице расчёта (checkout0 — есть .main-cards-holder с ценами)
   форма и сортировка тоже ЛИПНУТ, скроллятся только карточки цен.
   Только десктоп; на checkout1/2 этих элементов нет — правила инертны.
   2026-07-25 (P17а): overflow у .new-form-wrapper теперь ЕСТЬ — задаётся в
   inline <style> самого checkout/checkout0.twig (@media min-width:1200px),
   там же погашена побочка с обрезанием выпадашек (клампы .select-list). */
@media (min-width: 992px) {
	.form-and-steps-holder:has(.main-cards-holder) > .new-form-wrapper {
		position: sticky !important;
		top: 96px !important;
		align-self: flex-start !important;
	}
	/* 2026-07-26 — sticky сортировки снова включён, но реализация в
	   checkout/checkout0.twig (#psrSorting + .is-stuck), не здесь: там фон/blur
	   только в прилипшем состоянии, без постоянной белой плашки. */
}