/* ============================================================================
   STEPPER ISO — Полностью изолированный stepper для checkouts 1, 2, 3, 4.
   Все классы с уникальным префиксом `pds-` — не пересекаются ни с одним
   существующим селектором в проекте. Никакие inline `<style>` правила в
   шаблонах НЕ ВЛИЯЮТ на этот stepper (они не таргетят `pds-*` классы).

   Markup пример:
     <aside class="pds-stepper" aria-label="Checkout progress">
       <a href="..." class="pds-step pds-step--done" data-step="1">
         <span class="pds-circle pds-circle--filled">
           <i class="bi bi-check-lg"></i>
         </span>
         <span class="pds-step-text">
           <span class="pds-step-name">Service</span>
           <span class="pds-step-edit"><i class="bi bi-arrow-left-short"></i>Edit</span>
         </span>
       </a>
       <span class="pds-line-holder"><span class="pds-line pds-line--done"></span></span>
       <div class="pds-step pds-step--current" data-step="2">
         <span class="pds-circle pds-circle--filled">2</span>
         <span class="pds-step-text"><span class="pds-step-name">Sender Details<br/>Receiver Details</span></span>
       </div>
       ...
     </aside>

   2026-05-14
   ============================================================================ */

/* === Container === */
.pds-stepper {
	box-sizing: border-box;
	font-family: inherit;
	color: #1a1d22;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
	border: 1px solid #eef0f3;
	border-radius: 16px;
	padding: 22px 16px;
	box-shadow: 0 1px 3px rgba(15,17,21,.04), 0 6px 18px -10px rgba(15,17,21,.06);
	position: relative;
	overflow: hidden;
	margin: 0;
}
.pds-stepper * { box-sizing: border-box; }
.pds-stepper::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, #F01A26 0%, #ff3b41 50%, #c11018 100%);
	opacity: .9;
	pointer-events: none;
}

/* === Carrier logo (опционально, если есть в markup) === */
.pds-stepper .pds-carrier {
	margin: 0 0 18px 0;
	padding: 0 0 16px 0;
	border-bottom: 1px solid #eef0f3;
	text-align: left;
	display: block;
}
.pds-stepper .pds-carrier img {
	display: block;
	max-height: 42px; width: auto; max-width: 100%;
	object-fit: contain;
	margin: 0;
}
.pds-stepper .pds-carrier-tagline {
	display: block;
	font-size: 11px; font-weight: 600;
	color: #6a7280; line-height: 1.3;
	margin: 6px 0 0 0;
	letter-spacing: .015em;
}

/* === Step row === */
.pds-stepper .pds-step {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border-radius: 12px;
	background: transparent;
	border: 1px solid transparent;
	color: #1a1d22;
	text-decoration: none;
	transition: background .25s cubic-bezier(.4,0,.2,1), border-color .25s, transform .25s, box-shadow .25s;
	position: relative;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.3;
	cursor: default;
}

/* === Circle === */
.pds-stepper .pds-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	min-width: 40px; max-width: 40px;
	flex: 0 0 40px;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 800;
	font-family: inherit;
	line-height: 1;
	padding: 0;
	margin: 0;
	transition: all .3s cubic-bezier(.4,0,.2,1);
	position: relative;
	z-index: 2;
	color: #fff;
	border: none;
}
.pds-stepper .pds-circle--filled {
	background: linear-gradient(135deg, #ff3b41 0%, #F01A26 50%, #c11018 100%);
	color: #fff;
	box-shadow: 0 6px 16px -6px rgba(15,17,21,0.18),
	            inset 0 1px 0 rgba(255,255,255,.25);
}
.pds-stepper .pds-circle--filled i {
	font-size: 18px;
	font-weight: 900;
	color: inherit;
	line-height: 1;
}
.pds-stepper .pds-circle--outline {
	background: #ffffff;
	color: #9ca3af;
	border: 2px solid #e6e8ec;
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.pds-stepper .pds-circle img {
	display: block;
	width: 18px; height: 18px;
	max-width: 18px; max-height: 18px;
	object-fit: contain;
}

/* === Step text === */
.pds-stepper .pds-step-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1;
	align-items: flex-start;
	margin: 0;
	padding: 0;
}
.pds-stepper .pds-step-name {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 700;
	color: #1a1d22;
	line-height: 1.3;
	letter-spacing: -.005em;
	white-space: normal;
	word-break: keep-all;
	margin: 0;
	padding: 0;
}

/* === Edit hint (на DONE step с <a>) === */
.pds-stepper .pds-step-edit {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 10.5px;
	font-weight: 800;
	color: #F01A26;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .2s ease, transform .2s ease;
	margin: 4px 0 0 0;
	padding: 0;
}
.pds-stepper .pds-step-edit i {
	font-size: 14px;
	margin-left: -3px;
	color: inherit;
}

/* === DONE step (clickable <a>) === */
.pds-stepper a.pds-step--done { cursor: pointer; }
.pds-stepper a.pds-step--done:hover {
	background: linear-gradient(135deg, #ffffff 0%, #ffffff 70%);
	border-color: rgba(240,26,38,.2);
	transform: translateX(2px);
	box-shadow: 0 6px 16px -8px rgba(15,17,21,0.11);
}
.pds-stepper a.pds-step--done:hover .pds-circle--filled {
	transform: scale(1.08) rotate(-6deg);
	box-shadow: 0 10px 24px -6px rgba(15,17,21,0.19);
}
.pds-stepper a.pds-step--done:hover .pds-step-edit {
	opacity: 1;
	transform: translateX(0);
}
.pds-stepper a.pds-step--done:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(15,17,21,0.07);
}
.pds-stepper a.pds-step--done:active {
	transform: translateX(1px) scale(.99);
}

/* === CURRENT step (red gradient bg + left accent + pulse) === */
.pds-stepper .pds-step--current {
	background: linear-gradient(135deg, rgba(15,17,21,.04) 0%, rgba(15,17,21,.04) 80%);
	border-color: rgba(240,26,38,.18);
}
.pds-stepper .pds-step--current::before {
	content: "";
	position: absolute;
	left: -1px; top: 10px; bottom: 10px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(180deg, #ff3b41 0%, #F01A26 50%, #c11018 100%);
	box-shadow: 0 4px 12px -2px rgba(15,17,21,0.21);
	pointer-events: none;
}
.pds-stepper .pds-step--current .pds-step-name {
	color: #0f1115;
	font-weight: 800;
}
.pds-stepper .pds-step--current .pds-circle {
	animation: pdsPulse 2.4s ease-in-out infinite;
}
@keyframes pdsPulse {
	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);
	}
}

/* === PENDING step (muted) === */
.pds-stepper .pds-step--pending { opacity: .75; }
.pds-stepper .pds-step--pending .pds-step-name {
	color: #9aa1ad;
	font-weight: 600;
}

/* === Line between steps (vertical 2px on desktop) === */
.pds-stepper .pds-line-holder {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 18px; min-height: 18px;
	padding-left: 31px;
	margin: 0;
	background: transparent;
	border: none;
}
.pds-stepper .pds-line {
	display: block;
	width: 2px;
	height: 18px;
	min-height: 18px;
	background: #e6e8ec;
	border-radius: 2px;
	margin: 0;
	transition: background .3s;
}
.pds-stepper .pds-line--done {
	background: linear-gradient(180deg, #F01A26 0%, rgba(240,26,38,.35) 100%);
}

/* ============================================================================
   Desktop ≥992px — sidebar sticky 240px
   ============================================================================ */
/* 2026-07-25 (п.22): было min-width:1200px — в диапазоне 992–1199px панель
   шагов не липла при скролле (хотя заголовок секции всегда обещал ≥992px).
   Единый брейкпоинт 992px — как на checkout0/1/2 (checkout-progress-global.css,
   stepper-premium.css) и как у самой формы (checkout_form_v2.css, ≤991px). */
@media (min-width: 992px) {
	.pds-stepper {
		position: sticky;
		/* 2026-07-25 (C6): отступ под фиксированный хэдер (fallback-путь,
		   если checkoutStepperShadow.js не отработал и виден оригинальный aside). */
		top: var(--psr-sticky-top, 96px);
		flex: 0 0 250px;
		width: 250px;
		max-width: 250px;
		min-width: 250px;
		align-self: flex-start;
		height: auto;
	}
}

/* ============================================================================
   Mobile ≤991px — horizontal row, hidden labels, compact circles
   ============================================================================ */
/* 2026-07-25 (п.22): было max-width:1199px — диапазон 992–1199px уходил в эту
   мобильную ветку с position:static, из-за чего панель не липла. Теперь ≤991px. */
@media (max-width: 991px) {
	.pds-stepper {
		flex-direction: row;
		gap: 0;
		overflow-x: visible;
		padding: 14px 4px;
		align-items: center;
		justify-content: space-between;
		position: static;
		top: auto;
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
		margin: 0 0 14px 0;
		background: transparent !important;
		background-image: none !important;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
	.pds-stepper::before { display: none; }
	.pds-stepper .pds-carrier { display: none; }
	.pds-stepper .pds-step {
		flex-direction: row;
		min-width: 0;
		padding: 0;
		gap: 0;
		text-align: center;
		flex: 0 0 auto;
		background: transparent !important;
		border: none !important;
		transform: none !important;
		box-shadow: none !important;
	}
	.pds-stepper .pds-step-text { display: none; }
	.pds-stepper .pds-step-edit { display: none; }
	.pds-stepper .pds-step--current::before { display: none; }
	.pds-stepper .pds-circle {
		width: 36px; height: 36px;
		min-width: 36px; max-width: 36px;
		flex: 0 0 36px;
		font-size: 14px;
	}
	.pds-stepper .pds-circle--filled {
		background: #F01A26 !important;
		background-image: none !important;
	}
	.pds-stepper .pds-circle--outline {
		background: #ffffff !important;
		color: #F01A26;
		border: 2px solid #F01A26;
	}
	.pds-stepper .pds-circle img {
		width: 18px; height: 18px;
		filter: brightness(0) invert(1);
	}
	.pds-stepper .pds-circle--filled i {
		color: #fff;
	}
	.pds-stepper .pds-line-holder {
		padding: 0;
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		height: 2px;
		min-height: 2px;
		margin: 0 6px;
		align-self: center;
	}
	.pds-stepper .pds-line {
		width: 100%;
		height: 2px;
		min-height: 2px;
		background: #F01A26;
		border-radius: 0;
	}
	.pds-stepper .pds-line--done {
		background: #F01A26;
	}
	.pds-stepper a.pds-step--done:hover {
		transform: none;
		background: transparent;
	}
}

/* === Form holder layout (parent of pds-stepper) ===
   Уверенно перекрываем inline-стили (которые могут ставить flex-direction:column
   или иные значения) через высокую specificity + !important. Не используем :has()
   так как поддержка неравномерная. Цель: stepper слева, form справа на desktop. */
/* 2026-07-25 (п.22): было min-width:1200px — sidebar-раскладка (а вместе с ней
   и sticky на .pds-stepper / .x-checkout-stepper-host) включалась только с 1200px.
   Теперь с 992px, единообразно с остальными чекаутами. */
@media (min-width: 992px) {
	html body section.main-section > .form-and-steps-holder {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 36px !important;
		width: 100% !important;
		max-width: 1440px !important;
	}
	/* ВАЖНО: checkoutStepperShadow.js прячет оригинальный <aside class="pds-stepper">
	   (display:none) и вставляет вместо него <div class="x-checkout-stepper-host">
	   с inline width:100% (степпер рендерится внутри его Shadow DOM). Поэтому
	   реальная видимая боковая колонка — это .x-checkout-stepper-host, и ширину
	   надо задавать ЕЙ (а не .pds-stepper, который скрыт). */
	html body section.main-section > .form-and-steps-holder > .pds-stepper,
	html body section.main-section > .form-and-steps-holder > .x-checkout-stepper-host {
		order: 0 !important;
		margin: 0 !important;
		flex: 0 0 250px !important;
		width: 250px !important;
		max-width: 250px !important;
		align-self: flex-start !important;
		position: sticky !important;
		/* 2026-07-25 (C6): хэдер position:fixed (64/72px) — липнем НИЖЕ него.
		   Первая строка — fallback для браузеров без CSS-переменных. */
		top: 96px !important;
		top: var(--psr-sticky-top, 96px) !important;
	}
	/* Form/main content справа от stepper, забирает оставшееся пространство.
	   Исключаем .x-checkout-stepper-host — иначе хост степпера тоже попадал под
	   :not(.pds-stepper), получал flex:1 и растягивался на ~50% (это и был баг). */
	html body section.main-section > .form-and-steps-holder > :not(.pds-stepper):not(.x-checkout-stepper-host) {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		max-width: calc(100% - 250px - 36px) !important;
	}
}
/* 2026-07-25 (п.22): было max-width:1199px — колоночная (мобильная) раскладка
   захватывала 992–1199px. Теперь ≤991px, см. комментарий выше. */
@media (max-width: 991px) {
	html body section.main-section > .form-and-steps-holder {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}
}