/* =============================================================
   Presco Delivery — Checkout Step 1 (Sender + Receiver) v2
   Layout based on /test.html (user-provided design)
   Подключается в catalog/view/theme/default/template/checkout/checkout1.twig
   Дополняет (не заменяет) Checkout_Common_Stylesheet.css
   ============================================================= */

/* ===== Дизайн-токены ===== */
:root {
	--brand: #F01A26;
	--brand-dark: #c11018;
	--brand-light: #ffe8ea;
	--ink: #0f1115;
	--ink-2: #1a1d22;
	--muted: #6a7280;
	--line: #e6e8ec;
	--line-2: #eef0f3;
	--bg: #f7f8fa;
	--card: #ffffff;
	--shadow-sm: 0 1px 2px rgba(15,17,21,.04), 0 1px 1px rgba(15,17,21,.03);
	--shadow-md: 0 8px 24px rgba(15,17,21,.06), 0 2px 6px rgba(15,17,21,.04);
	--shadow-lg: 0 24px 60px -20px rgba(15,17,21,.18), 0 12px 24px -12px rgba(15,17,21,.08);
	--radius: 14px;
	--radius-sm: 10px;
}

/* ============================================================ */
/* SENDER TYPE TABS — Myself / Pr.Person / Company              */
/* ============================================================ */
.sender-type-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 4px;
}
.sender-type-tabs.sender-type-tabs-2 {
	grid-template-columns: repeat(2, 1fr);
}
.sender-type-tab {
	position: relative;
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	cursor: pointer;
	text-align: left;
	transition: border-color .2s, background .2s, transform .15s, box-shadow .2s, color .2s;
	color: var(--ink-2);
	-webkit-tap-highlight-color: transparent;
}
.sender-type-tab:hover {
	border-color: rgba(240,26,38,.4);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -8px rgba(15,17,21,.12);
}
.sender-type-tab:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(15,17,21,0.05);
}
.sender-type-icon {
	width: 40px; height: 40px;
	min-width: 40px;
	display: flex; align-items: center; justify-content: center;
	background: var(--brand-light);
	color: var(--brand);
	border-radius: 10px;
	font-size: 20px;
	transition: background .2s, color .2s, transform .2s;
}
.sender-type-tab:hover .sender-type-icon { transform: scale(1.05); }
.sender-type-text {
	display: flex; flex-direction: column; gap: 2px;
	min-width: 0;
}
.sender-type-title {
	font-size: 14px; font-weight: 800;
	color: var(--ink); letter-spacing: -.005em;
	line-height: 1.2;
}
.sender-type-sub {
	font-size: 12px; font-weight: 600;
	color: var(--muted); line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sender-type-tab.is-active {
	border-color: var(--brand);
	background: linear-gradient(135deg, #fff 0%, #ffffff 100%);
	box-shadow: 0 12px 28px -14px rgba(15,17,21,0.18),
				inset 0 0 0 1px rgba(15,17,21,0.03);
}
.sender-type-tab.is-active .sender-type-icon {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
	color: #fff;
	box-shadow: 0 8px 18px -6px rgba(15,17,21,0.19);
}
.sender-type-tab.is-active .sender-type-title { color: var(--brand-dark); }
.sender-type-tab.is-active::after {
	content: "";
	position: absolute; left: 50%; bottom: -1.5px;
	transform: translateX(-50%);
	width: 36px; height: 3px;
	background: var(--brand);
	border-radius: 3px 3px 0 0;
	box-shadow: 0 -2px 8px rgba(15,17,21,0.14);
}
@media (max-width: 720px) {
	.sender-type-tabs { grid-template-columns: 1fr; gap: 8px; }
	.sender-type-tab { padding: 12px 14px; }
	.sender-type-sub { white-space: normal; }
}

/* ============================================================ */
/* MYSELF SUMMARY CARD                                          */
/* ============================================================ */
.sender-myself-card {
	display: flex; align-items: center; gap: 18px;
	padding: 20px 22px;
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(15,17,21,.04) 0%, transparent 50%),
		linear-gradient(135deg, #fff 0%, #fdfdfe 100%);
	border: 1.5px solid var(--line-2);
	border-radius: var(--radius);
	position: relative;
	overflow: hidden;
}
.sender-myself-card::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.sender-myself-avatar {
	width: 56px; height: 56px; min-width: 56px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
	color: #fff;
	border-radius: 50%;
	font-size: 20px; font-weight: 900;
	letter-spacing: .02em;
	box-shadow: 0 10px 24px -8px rgba(15,17,21,0.18);
}
.sender-myself-info { flex: 1; min-width: 0; }
.sender-myself-name {
	display: flex; align-items: center; gap: 10px;
	font-size: 17px; font-weight: 800;
	color: var(--ink);
	letter-spacing: -.005em;
	margin-bottom: 6px;
	flex-wrap: wrap;
}
.sender-myself-badge {
	display: inline-flex; align-items: center; gap: 4px;
	background: rgba(34,197,94,.1);
	color: #16a34a;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px; font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.sender-myself-badge i { font-size: 12px; }
.sender-myself-meta {
	display: flex; flex-wrap: wrap; gap: 6px 18px;
	font-size: 13px; color: var(--muted); font-weight: 600;
}
.sender-myself-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sender-myself-meta i { font-size: 13px; color: var(--brand); opacity: .8; }
.sender-myself-edit {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 13px; font-weight: 700;
	color: var(--ink-2); text-decoration: none;
	transition: all .2s;
	flex-shrink: 0;
}
.sender-myself-edit:hover {
	border-color: var(--brand);
	color: var(--brand);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -6px rgba(15,17,21,0.11);
}
.sender-myself-edit i { font-size: 14px; }
@media (max-width: 640px) {
	.sender-myself-card { flex-wrap: wrap; gap: 14px; padding: 16px 18px; }
	.sender-myself-edit { width: 100%; justify-content: center; }
	.sender-myself-meta { gap: 4px 14px; font-size: 12px; }
}
[data-sender-modes], [data-receiver-modes] {
	animation: senderFadeIn .25s ease-out;
}
@keyframes senderFadeIn {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ============================================================ */
/* IMG-HOLDER + multi-icon switching                            */
/* ============================================================ */
.img-holder {
	min-width: 96px; max-width: 110px; flex-shrink: 0;
	background:
		radial-gradient(120% 100% at 30% 20%, rgba(15,17,21,.04) 0%, transparent 60%),
		linear-gradient(135deg, #fff7f7 0%, #fff 100%);
	border-radius: 10px;
	padding: 10px;
	border: 1px solid rgba(240,26,38,.15);
	align-self: stretch;
	min-height: 100px;
	display: flex; align-items: center; justify-content: center;
}
.img-holder .psr-icon {
	max-width: 60px;
	max-height: 66px;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 12px 22px rgba(240,26,38,.28));
	transition: transform .25s ease;
}
.img-holder:hover .psr-icon { transform: translateY(-3px) scale(1.03); }
.img-holder.img-holder-house .psr-icon {
	filter: drop-shadow(0 14px 24px rgba(240,26,38,.32));
}
.img-holder img { mix-blend-mode: normal; opacity: 1; }

/* Multi-icon: показываем только активный режим */
.img-holder-multi .icon-mode { display: none; }
.img-holder-multi[data-current="myself"]  .icon-mode[data-mode="myself"]  { display: block; }
.img-holder-multi[data-current="person"]  .icon-mode[data-mode="person"]  { display: block; }
.img-holder-multi[data-current="company"] .icon-mode[data-mode="company"] { display: block; }

@media (max-width: 767px) {
	.img-holder { min-width: 72px; max-width: 80px; padding: 8px; }
	.img-holder .psr-icon { max-width: 48px; max-height: 52px; }
}

/* ============================================================ */
/* INPUT FIELDS                                                 */
/* ============================================================ */
.input-field {
	height: 36px;
	padding: 7px 11px;
	font-size: 12.5px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--ink);
	width: 100%;
	transition: border-color .15s, box-shadow .15s;
	font-family: inherit;
}
.input-field:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 4px rgba(15,17,21,0.03);
}
.input-field.error {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(15,17,21,0.04);
}
.input-field.phone-error { border-color: var(--brand); }
.input-field-readonly,
.input-field[readonly] {
	background: #f1f3f6 !important;
	border-color: #e1e4ea !important;
	color: var(--ink-2) !important;
	cursor: default;
	font-weight: 700;
}
select.input-field {
	height: 36px;
	background-color: #fff;
	padding: 5px 11px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236a7280'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	appearance: none;
	-webkit-appearance: none;
}
.fs-14 { font-size: 11px; color: var(--ink-2); font-weight: 600; }
.text-primary { color: var(--brand) !important; }

/* ============================================================ */
/* ADDRESS SECTION                                              */
/* ============================================================ */
.address-fields-wrap, .sender-fields-wrap { margin-top: 0 !important; }
.psr-addr-hint {
	font-size: 11px;
	font-weight: 700;
	color: #111827; /* 2026-08-05: ещё темнее по просьбе — метка должна читаться сразу */
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.2;
}
.psr-addr-hint em {
	font-style: normal;
	color: #374151; /* 2026-08-05: ещё темнее */
	text-transform: none;
	font-weight: 500;
	margin-left: 6px;
	letter-spacing: 0;
	font-size: 11px; /* 2026-08-05: +0.5px к читаемости */
}
.psr-addr-combined {
	font-weight: 600;
}

/* ============================================================ */
/* FORM CARD (.form.shadow123)                                  */
/* ============================================================ */
.form.shadow123 {
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.form.shadow123 .d-flex.gap-4 { gap: 16px !important; }
.form.shadow123.mt-3 { margin-top: 16px !important; }
.form.shadow123 > div > .fs-4.border-bottom {
	font-size: 16px !important;
	padding: 10px 22px 8px !important;
	margin: 14px -22px 4px !important;
	border-bottom: 1px solid var(--line-2) !important;
	background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
	letter-spacing: -.005em;
	color: var(--ink);
	font-weight: 800;
}
.form.shadow123 > div:first-child > .fs-4.border-bottom {
	margin-top: -22px !important;
	padding-top: 14px !important;
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}
.form.shadow123 .row.row-gap-3 { row-gap: 10px !important; }

/* ============================================================ */
/* C3 (2026-07-25): ошибка валидации не должна ломать сетку полей */
/* ============================================================ */
/* Ряды полей размечены как .row.row-gap-3.align-items-end — колонки
   выравнивались по НИЖНЕЙ границе. Как только под одним полем появлялся
   <span class="fs-14 text-primary">* Enter name, surname</span>, колонка
   становилась выше, и соседние (Phone number / Email) уезжали вниз —
   метки и инпуты переставали быть на одной линии.
   Выравниваем колонки по ВЕРХУ: метки и инпуты всегда на одной линии,
   а текст ошибки просто дорисовывается под своим полем.
   Класс align-items-end в разметке НЕ трогаем — на него завязаны
   мобильные @media-правила внутри самих checkout1_*.twig. */
.form.shadow123 .row.row-gap-3.align-items-end {
	align-items: flex-start !important;
}

.form.shadow123 .d-grid.row-gap-2,
.form.shadow123 .d-grid.row-gap-ms-3 { row-gap: 12px !important; }

/* ============================================================ */
/* TAB FIELDS GRID — стабильная высота                          */
/* ============================================================ */
.tab-fields-grid {
	display: flex !important;
	flex-direction: column !important;
	min-height: 168px;
	align-content: start;
	gap: 8px;
}
@media (max-width: 767px) {
	.tab-fields-grid { min-height: 220px; }
}
.sender-fields-wrap > .img-holder,
#receiverCard > .d-flex.gap-4.align-items-start:first-of-type > .img-holder {
	align-self: stretch;
}
.sender-fields-wrap, #receiverCard > .d-flex.gap-4.align-items-start:first-of-type {
	min-height: 168px;
}

/* ============================================================ */
/* CHOOSING STATE — стартовый экран выбора типа                 */
/* ============================================================ */
.choose-prompt {
	text-align: center;
	max-width: 520px;
	margin: 18px auto 6px;
	padding: 0 12px;
	opacity: 0;
	transform: translateY(-12px);
	animation: psrPromptIn .5s cubic-bezier(.16,1,.3,1) .05s forwards;
}
.choose-prompt-title {
	font-size: 24px; font-weight: 900;
	color: var(--ink);
	letter-spacing: -.02em;
	margin-bottom: 6px;
	background: linear-gradient(135deg, var(--ink) 0%, #2a2f38 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.choose-prompt-sub {
	font-size: 13.5px; color: var(--muted);
	line-height: 1.5; font-weight: 600;
}
.form.shadow123:not(.is-choosing) .choose-prompt { display: none; }
@keyframes psrPromptIn {
	to { opacity: 1; transform: translateY(0); }
}
.form.shadow123.is-choosing > input[type="hidden"] ~ * {
	display: none !important;
}
.form.shadow123.is-choosing { padding: 28px 28px 36px !important; gap: 6px !important; }
.form.shadow123.is-choosing > div:first-child > .fs-4.border-bottom {
	text-align: center;
	border-bottom: none !important;
	background: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	color: var(--brand) !important;
}
.form.shadow123.is-choosing .choose-prompt { display: block !important; }
.form.shadow123.is-choosing .sender-type-tabs {
	margin: 16px auto 0 !important;
	max-width: 760px;
	gap: 14px !important;
	display: grid !important;
}
.form.shadow123.is-choosing .sender-type-tab {
	padding: 28px 18px !important;
	flex-direction: column !important;
	text-align: center !important;
	align-items: center !important;
	gap: 14px !important;
	border-width: 2px !important;
	border-radius: 18px !important;
	min-height: 168px;
	opacity: 0;
	transform: translateY(24px);
	animation: psrTabIn .55s cubic-bezier(.16,1,.3,1) forwards;
	background: linear-gradient(180deg, #fff 0%, #fafbfd 100%) !important;
	display: flex !important;
}
.form.shadow123.is-choosing .sender-type-tab:nth-child(1) { animation-delay: .14s; }
.form.shadow123.is-choosing .sender-type-tab:nth-child(2) { animation-delay: .24s; }
.form.shadow123.is-choosing .sender-type-tab:nth-child(3) { animation-delay: .34s; }
@keyframes psrTabIn {
	to { opacity: 1; transform: translateY(0); }
}
.form.shadow123.is-choosing .sender-type-icon {
	width: 64px !important; height: 64px !important;
	min-width: 64px !important;
	font-size: 28px !important;
	border-radius: 16px !important;
	background: linear-gradient(135deg, rgba(15,17,21,.04) 0%, rgba(15,17,21,.04) 100%);
	color: var(--brand);
	position: relative;
	overflow: hidden;
}
.form.shadow123.is-choosing .sender-type-icon::after {
	content: "";
	position: absolute; inset: -2px;
	border-radius: inherit;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 60%);
	pointer-events: none;
}
.form.shadow123.is-choosing .sender-type-title {
	font-size: 16px !important;
	color: var(--ink) !important;
}
.form.shadow123.is-choosing .sender-type-sub {
	font-size: 12.5px !important;
	white-space: normal !important;
}
.form.shadow123.is-choosing .sender-type-tab.is-active::after { display: none !important; }
.form.shadow123.is-choosing .sender-type-tab:hover {
	transform: translateY(-6px) !important;
	border-color: var(--brand) !important;
	box-shadow:
		0 30px 60px -20px rgba(15,17,21,.18),
		0 12px 24px -12px rgba(15,17,21,0.09),
		inset 0 0 0 1px rgba(15,17,21,0.04) !important;
}
.form.shadow123.is-choosing .sender-type-tab:hover .sender-type-icon {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
	color: #fff !important;
	transform: scale(1.08) rotate(-3deg);
	box-shadow: 0 12px 24px -8px rgba(15,17,21,0.19);
}
.form.shadow123.is-choosing .sender-type-tab:hover .sender-type-title { color: var(--brand-dark) !important; }
.form.shadow123.is-choosing .sender-type-tab:active { transform: translateY(-2px) scale(.98) !important; }
@media (max-width: 720px) {
	.form.shadow123.is-choosing { padding: 22px 18px 28px !important; }
	.form.shadow123.is-choosing .sender-type-tabs { grid-template-columns: 1fr !important; gap: 10px !important; }
	.form.shadow123.is-choosing .sender-type-tab {
		flex-direction: row !important;
		text-align: left !important;
		padding: 18px 16px !important;
		min-height: 0 !important;
		gap: 16px !important;
	}
	.form.shadow123.is-choosing .sender-type-icon {
		width: 52px !important; height: 52px !important;
		min-width: 52px !important;
		font-size: 22px !important;
		border-radius: 12px !important;
	}
	.form.shadow123.is-choosing .sender-type-title { font-size: 15px !important; }
}

/* "Pop" эффект при выборе на choosing-экране */
.psr-just-picked {
	animation: psrPickPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes psrPickPop {
	0% { transform: scale(1); }
	50% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

/* ============================================================ */
/* COMPACT — после выбора режима                                */
/* ============================================================ */
.form.shadow123:not(.is-choosing) .sender-type-tabs { gap: 6px !important; }
.form.shadow123:not(.is-choosing) .sender-type-tab {
	padding: 8px 10px !important;
	gap: 8px !important;
}
.form.shadow123:not(.is-choosing) .sender-type-icon {
	width: 30px !important; height: 30px !important;
	min-width: 30px !important;
	font-size: 14px !important;
	border-radius: 7px !important;
}
.form.shadow123:not(.is-choosing) .sender-type-title { font-size: 12.5px !important; }
.form.shadow123:not(.is-choosing) .sender-type-sub   { font-size: 10.5px !important; }

/* ============================================================ */
/* MAIN SECTION + PROGRESS STEPS                                */
/* ============================================================ */
.main-section { padding: 28px 16px 60px; }
.form-and-steps-holder { gap: 24px !important; }

.progress-steps {
	padding: 16px 14px !important;
	max-width: 200px !important;
	min-width: 180px !important;
}
.circle-punct-check {
	width: 30px !important; height: 30px !important;
	min-width: 30px !important;
	font-size: 12px !important;
}
.line-between-steps { min-height: 12px !important; height: 12px !important; }
.progress-steps > .d-flex.gap-3.align-items-center > span { font-size: 12px !important; }

/* ============================================================ */
/* BUTTONS                                                      */
/* ============================================================ */
.button-holder-for-media {
	gap: 12px;
	background: #fafbfc;
	border-top: 1px solid var(--line-2);
	margin: 14px -22px -22px !important;
	padding: 16px 22px !important;
	border-radius: 0 0 var(--radius) var(--radius);
}
.button-back, #nextPage {
	height: 42px;
	font-weight: 800;
	letter-spacing: .01em;
	transition: transform .15s, box-shadow .15s;
	cursor: pointer;
	user-select: none;
}
.button-back:hover { transform: translateY(-1px); }
#nextPage:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(15,17,21,0.14); }
#nextPage[disabled] { opacity: .5; cursor: not-allowed; }


/* ============================================================ */
/* PROGRESS STEPS sidebar (shared across step 1-4)              */
/* ============================================================ */
.progress-steps { gap: 2px !important; }
.psr-step-logo {
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line-2);
}
.psr-step-logo img {
	display: block; max-height: 44px; width: auto; max-width: 100%;
	object-fit: contain;
}
.psr-step-tagline {
	font-size: 11px; font-weight: 600;
	color: var(--muted); line-height: 1.3;
	margin-top: 6px; letter-spacing: .01em;
	text-align: left;
}
@media (max-width: 991px) {
	.psr-step-tagline { display: none; }
}

.psr-step {
	display: flex; align-items: center; gap: 14px;
	padding: 10px 12px;
	border-radius: 10px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--ink-2);
	text-decoration: none;
	transition: all .2s cubic-bezier(.4,0,.2,1);
	position: relative;
}
.psr-step .circle-punct-check {
	width: 36px; height: 36px; min-width: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	font-size: 14px; font-weight: 800;
	flex-shrink: 0;
	transition: all .25s cubic-bezier(.4,0,.2,1);
}
.psr-step .circle-punct-check.bg-primary {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
	color: #fff !important; border: none !important;
	box-shadow: 0 8px 18px -8px rgba(15,17,21,0.19);
}
.psr-step .circle-punct-check.bg-white {
	background: #fff !important;
	color: var(--muted) !important;
	border: 2px solid var(--line) !important;
}
.psr-step-label {
	display: flex; flex-direction: column; gap: 1px;
	min-width: 0; flex: 1;
}
.psr-step-name {
	font-size: 14px; font-weight: 700;
	color: var(--ink-2); line-height: 1.25;
	letter-spacing: -.005em;
}
.psr-step-back-hint {
	font-size: 11px; font-weight: 700;
	color: var(--brand); line-height: 1;
	letter-spacing: .04em; text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 2px;
	opacity: 0; transform: translateX(-4px);
	transition: opacity .2s ease, transform .2s ease;
	margin-top: 3px;
}
.psr-step-back-hint i { font-size: 14px; margin-left: -2px; }

a.psr-step--done { cursor: pointer; }
a.psr-step--done:hover {
	background: linear-gradient(135deg, #fff 0%, #ffffff 100%);
	border-color: rgba(240,26,38,.18);
	transform: translateX(-2px);
	box-shadow: 0 4px 12px -6px rgba(15,17,21,0.09);
}
a.psr-step--done:hover .circle-punct-check.bg-primary {
	transform: scale(1.06) rotate(-4deg);
}
a.psr-step--done:hover .psr-step-back-hint {
	opacity: 1; transform: translateX(0);
}
a.psr-step--done:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(15,17,21,0.07);
}
a.psr-step--done:active { transform: translateX(-1px) scale(.99); }

.psr-step--current {
	background: linear-gradient(135deg, rgba(15,17,21,.04) 0%, transparent 60%);
	border-color: rgba(240,26,38,.12);
}
.psr-step--current::before {
	content: "";
	position: absolute; left: -2px; top: 8px; bottom: 8px;
	width: 3px; border-radius: 2px;
	background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
	box-shadow: 0 4px 10px -2px rgba(15,17,21,0.18);
}
.psr-step--current .psr-step-name { color: var(--ink); font-weight: 800; }
.psr-step--current .circle-punct-check {
	animation: psrCirclePulse 2.4s ease-in-out infinite;
}
@keyframes psrCirclePulse {
	0%, 100% { box-shadow: 0 8px 18px -8px rgba(15,17,21,0.19); }
	50%      { box-shadow: 0 8px 22px -4px rgba(15,17,21,0.23), 0 0 0 6px rgba(15,17,21,0.04); }
}

.psr-step--pending { opacity: .7; }
.psr-step--pending .psr-step-name { color: var(--muted); font-weight: 600; }

.progress-steps .line-holder {
	padding-left: 28px !important;
	min-height: 14px;
	justify-content: flex-start !important;
}
.progress-steps .line-between-steps {
	width: 2px; height: 14px; min-height: 14px;
	background: var(--line); border-radius: 2px;
	transition: background .25s;
}
.progress-steps .line-between-steps.psr-line--done {
	background: linear-gradient(180deg, var(--brand) 0%, rgba(240,26,38,.4) 100%);
}

@media (max-width: 991px) {
	.psr-step-logo { display: none; }
	.progress-steps {
		flex-direction: row !important;
		gap: 0 !important;
		overflow-x: auto;
		padding: 12px !important;
	}
	.psr-step {
		flex-direction: column;
		min-width: 100px;
		padding: 8px;
		gap: 6px;
		text-align: center;
	}
	.psr-step-label { align-items: center; }
	.psr-step-name { font-size: 11px; white-space: normal !important; }
	.psr-step-back-hint { display: none; }
	.psr-step--current::before { display: none; }
	.progress-steps .line-holder {
		padding: 0 !important;
		min-width: 14px; align-self: center;
	}
	.progress-steps .line-between-steps {
		width: 14px; height: 2px; min-height: 2px;
	}
	a.psr-step--done:hover { transform: none; }
}

/* ============================================================ */
/* READONLY ADDRESS FIELDS (lock icon)                          */
/* ============================================================ */
.psr-locked {
	display: inline-flex; align-items: center;
	font-size: 9px !important;
	color: #F01A26;
	margin-left: 4px;
	vertical-align: middle;
	opacity: .8;
}

/* ============================================================ */
/* SUMMARY CARDS (step 3 - payment review)                      */
/* ============================================================ */
.psr-summary-card {
	display: flex; gap: 18px; align-items: stretch;
	padding: 18px 20px;
	background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	transition: border-color .2s, box-shadow .2s;
}
.psr-summary-card:hover {
	border-color: rgba(240,26,38,.15);
	box-shadow: var(--shadow-sm);
}
.psr-summary-icon {
	flex: 0 0 64px;
	height: 64px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--brand-light) 0%, #fff 100%);
	border-radius: 12px;
	border: 1px solid rgba(240,26,38,.12);
	color: var(--brand);
	font-size: 28px;
}
.psr-summary-body {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; gap: 6px;
}
.psr-summary-title {
	font-size: 11px; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--muted);
}
.psr-summary-value {
	font-size: 14px; font-weight: 600;
	color: var(--ink); line-height: 1.5;
}
.psr-summary-value strong { color: var(--ink); font-weight: 800; }
.psr-summary-edit {
	flex: 0 0 auto;
	align-self: flex-start;
	font-size: 12px; font-weight: 700;
	color: var(--brand) !important; text-decoration: none;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 6px 12px;
	border-radius: 8px;
	transition: all .2s;
	border: 1px solid rgba(240,26,38,.18);
	background: #fff;
}
.psr-summary-edit:hover {
	background: var(--brand); color: #fff !important;
	border-color: var(--brand);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -6px rgba(15,17,21,0.14);
}
.psr-summary-edit i { font-size: 13px; }
@media (max-width: 600px) {
	.psr-summary-card { flex-direction: column; gap: 10px; }
	.psr-summary-edit { align-self: flex-end; }
}

.psr-invoice {
	background: #fff;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	padding: 18px 20px;
	box-shadow: var(--shadow-sm);
}
.psr-invoice-title {
	font-size: 13px; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--ink-2);
	padding-bottom: 12px; margin-bottom: 14px;
	border-bottom: 1px solid var(--line-2);
}
.psr-invoice-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 6px 0;
	font-size: 13px;
}
.psr-invoice-label { color: var(--muted); font-weight: 500; }
.psr-invoice-amount { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.psr-invoice-row.psr-invoice-total {
	border-top: 2px dashed var(--line-2);
	padding-top: 14px; margin-top: 8px;
	font-size: 16px;
}
.psr-invoice-row.psr-invoice-total .psr-invoice-label { color: var(--ink); font-weight: 800; }
.psr-invoice-row.psr-invoice-total .psr-invoice-amount {
	color: var(--brand); font-weight: 900; font-size: 19px;
}

/* ============================================================ */
/* SUCCESS card (step 4)                                         */
/* ============================================================ */
.psr-success-card {
	padding: 48px 32px !important;
	text-align: center;
}
.psr-success-icon {
	width: 120px; height: 120px;
	margin: 0 auto 24px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(15,17,21,.04) 0%, rgba(15,17,21,.04) 100%);
	border-radius: 50%;
	box-shadow: 0 24px 60px -20px rgba(15,17,21,0.16);
	position: relative;
	animation: psrSuccessPop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes psrSuccessPop {
	0%   { transform: scale(.6); opacity: 0; }
	50%  { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}
.psr-success-icon::before {
	content: "";
	position: absolute; inset: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, #fff 0%, #ffffff 100%);
}
.psr-success-icon i {
	position: relative; z-index: 1;
	font-size: 56px; color: var(--brand);
}
.psr-success-title {
	font-size: 32px; font-weight: 900;
	color: var(--ink);
	letter-spacing: -.02em;
	margin-bottom: 10px;
	background: linear-gradient(135deg, var(--ink) 0%, var(--brand-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.psr-success-subtitle {
	font-size: 16px; font-weight: 600;
	color: var(--muted);
	margin-bottom: 28px;
}
.psr-success-divider {
	width: 60px; height: 3px;
	background: linear-gradient(90deg, var(--brand), var(--brand-dark));
	border-radius: 2px;
	margin: 0 auto 24px;
}
.psr-success-content {
	font-size: 14px; line-height: 1.6;
	color: var(--ink-2);
	max-width: 480px; margin: 0 auto 32px;
}
.psr-success-actions {
	display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
	margin-bottom: 28px;
}
.psr-success-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 24px;
	border-radius: 10px;
	font-size: 14px; font-weight: 700;
	text-decoration: none;
	transition: all .2s;
}
.psr-success-btn-primary {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
	color: #fff !important;
	box-shadow: 0 12px 28px -10px rgba(15,17,21,0.18);
}
.psr-success-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -12px rgba(15,17,21,0.21);
}
.psr-success-btn-outline {
	background: #fff;
	color: var(--ink-2) !important;
	border: 1px solid var(--line);
}
.psr-success-btn-outline:hover {
	border-color: var(--brand);
	color: var(--brand) !important;
}
.psr-success-social {
	display: flex; gap: 10px; justify-content: center;
	padding-top: 24px;
	border-top: 1px solid var(--line-2);
}
.psr-success-social a {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--ink-2) !important;
	transition: all .2s;
}
.psr-success-social a:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -6px rgba(15,17,21,0.14);
}
.psr-success-social a i { font-size: 18px; }
.psr-success-copy {
	font-size: 11px; color: var(--muted);
	text-align: center; margin-top: 20px;
	letter-spacing: .04em;
}

/* ============================================================ */
/* PAYMENT METHOD selection (step 3)                             */
/* ============================================================ */
.payment-selection {
	display: flex; flex-direction: column; gap: 8px;
}
.payment-selection .radio,
.payment-selection > div {
	margin: 0;
}
.payment-selection label {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	cursor: pointer;
	transition: all .2s;
	font-weight: 600;
}
.payment-selection label:hover {
	border-color: rgba(240,26,38,.4);
	transform: translateY(-1px);
}

/* ============================================================================
   2026-05-19 — убрать "Sender & Receiver Details" header + цифры 01/02 у карточек
   Юзер: "цифры нахуй. и текст убрать сендер ресивер который не в карточке"
   ============================================================================ */
.psr-step2-header { display: none !important; }
.psr-block-num   { display: none !important; }
/* После удаления num — gap у card-header чуть больше, icon-pill вплотную к левому краю */
.psr-block-header {
	gap: 12px !important;
}

/* 2026-07-24 (v2, «поинтереснее»): Description & price — маршрут-«дорога» с едущей
   посылкой + премиальные точки, объединённая подпись, поля описание|цена рядом */
.psr-route-mini{
	display:flex;flex-direction:column;gap:14px;
	margin:2px 0 22px;padding:16px 20px;position:relative;overflow:hidden;
	background:
		radial-gradient(130% 150% at 0% 0%, rgba(240,26,38,.06), transparent 46%),
		linear-gradient(180deg,#ffffff,#fbfcfe);
	border:1px solid #eceff4;border-radius:16px;
	box-shadow:0 1px 2px rgba(15,17,21,.04),0 12px 26px -16px rgba(15,17,21,.18);
}
.psr-route-service{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:#16181d;}
.psr-route-service i{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:14px;color:#F01A26;background:#fff1f2;border:1px solid #ffd9dc;}
.psr-route-lane{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;}
.psr-route-parcels{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:#6a7280;padding-top:12px;border-top:1px dashed #e7ebf1;}
.psr-route-parcels i{color:#F01A26;font-size:14px;}
.psr-route-parcels strong{color:#16181d;font-weight:800;}
.psr-route-dot{color:#c7ccd4;}
.psr-route-pt{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto;}
.psr-route-ic{
	width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
	border-radius:13px;color:#fff;font-size:19px;
	background:linear-gradient(135deg,#ff6c75 0%,#F01A26 55%,#c11018 100%);
	box-shadow:0 5px 14px -4px rgba(240,26,38,.55),inset 0 1px 0 rgba(255,255,255,.4);
}
.psr-route-txt{display:flex;flex-direction:column;min-width:0;line-height:1.22;}
.psr-route-lbl{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#b0b6c0;}
.psr-route-place{font-size:14.5px;font-weight:800;color:#16181d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.psr-route-kind{font-size:11.5px;font-weight:600;color:#6a7280;}
/* «дорога» между точками: пунктир + едущая посылка */
.psr-route-arrow{flex:1 1 auto;position:relative;height:26px;min-width:54px;align-self:center;}
.psr-route-arrow i{display:none;}
.psr-route-arrow::before{
	content:'';position:absolute;left:2px;right:2px;top:50%;transform:translateY(-50%);
	height:0;border-top:2px dashed #f2c2c6;
}
.psr-route-mover{
	position:absolute;top:50%;left:0;width:28px;height:auto;
	transform:translate(-50%,-50%);
	filter:drop-shadow(0 3px 5px rgba(15,17,21,.25));
	animation:psrParcelRun 2.9s cubic-bezier(.55,.08,.5,.92) infinite;
}
/* 2026-07-26 — документ больше не static: тот же size (28px) и psrParcelRun, что у посылки */
@keyframes psrParcelRun{
	0%{left:2%;opacity:0;}
	14%{opacity:1;}
	86%{opacity:1;}
	100%{left:98%;opacity:0;}
}
@media (prefers-reduced-motion: reduce){
	.psr-route-mover{animation:none;left:50%;opacity:1;}
}
@media(max-width:560px){
	.psr-route-mini{padding:14px;}
	.psr-route-lane{flex-wrap:wrap;gap:10px;}
	.psr-route-pt{flex-basis:calc(50% - 5px);}
	.psr-route-arrow{flex-basis:100%;order:3;height:22px;min-width:0;transform:none;}
}

/* объединённая подпись + поля описание|цена рядом */
.psr-item-row{display:flex;flex-direction:column;gap:8px;}
.psr-item-label{font-weight:700;color:#16181d;}
.psr-item-fields{display:grid;grid-template-columns:1fr 172px;gap:12px;align-items:start;}
.psr-field{display:flex;flex-direction:column;gap:4px;min-width:0;}
.psr-price-wrap{position:relative;}
.psr-price-wrap .input-field{width:100%;padding-right:58px;text-align:left;}
.psr-price-cur{
	position:absolute;top:50%;right:8px;transform:translateY(-50%);
	font-size:11px;font-weight:800;letter-spacing:.03em;color:#F01A26;
	background:#fff1f2;border:1px solid #ffd9dc;border-radius:8px;padding:4px 9px;
	pointer-events:none;
}
@media(max-width:560px){.psr-item-fields{grid-template-columns:1fr;}}

/* 2026-07-25 — C2: эмблемы FROM/TO в мини-сводке маршрута теперь те же, что в видах
   отправки на шаге расчёта: красная птица Presco = курьер, сетка ячеек = пакомат.
   Плитку пришлось сделать светлой — птица залита #F01A26 и на красном градиенте не читалась. */
.psr-route-ic{
	box-sizing:border-box;
	background:#fff1f2;
	border:1px solid #ffd9dc;
	color:#F01A26;
	box-shadow:0 4px 12px -6px rgba(240,26,38,.35);
}
.psr-route-ic img.psr-svg-truck{width:34px;height:34px;object-fit:contain;flex-shrink:0;display:block;}
.psr-route-ic svg.psr-svg-locker{width:26px;height:26px;color:#F01A26;flex-shrink:0;}

/* 2026-08-05: подпись «FULL ADDRESS (...)» должна читаться одинаково во всех блоках.
   В шаблонах checkout1_* (10 файлов) есть инлайн-правило .psr-pakomat-block .psr-addr-hint em
   с более светлым #6a7280; инлайн-<style> идёт после этого файла и при равной
   специфичности побеждает — поэтому перебиваем !important здесь, а не правим 10 шаблонов. */
.psr-pakomat-block .psr-addr-hint em { color: #374151 !important; font-size: 11px !important; }