/* escape. — /akcii «Скидки и акции». Page frame, offers, steps, media,
   request form, messenger card, phone action bar. Tokens — the design
   system names (/root/CLAUDE.md), scoped to the page. */

.esc-ak {
	--bg: #1c1c1c;
	--bg-alt: #171717;
	--surface: #242424;
	--surface-2: #2b2b2b;
	--border: rgba(255, 255, 255, 0.08);
	--border-strong: rgba(255, 255, 255, 0.16);
	--muted: #b3b3b3;
	--caption: #7d7d7d;
	--accent: #ff0004;
	--accent-hover: #d40c10;
	--accent-soft: #ff6b6d;
	--accent-grad: linear-gradient(135deg, #ff3b3e 0%, #ff0004 100%);
	--ease: ease-in-out;
	position: relative;
	overflow: clip;
	background: var(--bg);
	color: #f2f2f2;
	font-family: 'Ubuntu', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.5;
}

.esc-ak,
.esc-ak *,
.esc-ak *::before,
.esc-ak *::after {
	box-sizing: border-box;
}

.esc-ak :where(h1, h2, h3, p, ul, ol) {
	margin: 0;
	padding: 0;
}

.esc-ak :focus-visible {
	outline: 2px solid var(--accent-soft);
	outline-offset: 2px;
}

.esc-ak-wrap {
	max-width: 1248px;
	margin: 0 auto;
	padding: 0 24px;
}

.esc-ak-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	color: var(--accent-soft);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.esc-ak-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--accent);
	opacity: 0.7;
}

.esc-ak-grad {
	background: var(--accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ---------- Buttons ---------- */

.esc-ak-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 6px;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.3s var(--ease);
}

.esc-ak-btn svg {
	flex: none;
	width: 20px;
	height: 20px;
	transition: transform 0.3s var(--ease);
}

.esc-ak-btn--primary {
	background: var(--accent);
	box-shadow: 0 10px 30px -10px rgba(255, 0, 4, 0.55);
	color: #fff;
}

.esc-ak-btn--primary:hover,
.esc-ak-btn--primary:focus-visible {
	background: var(--accent-hover);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

.esc-ak-btn--primary:hover svg {
	transform: translateX(3px);
}

.esc-ak-btn--ghost {
	border-color: var(--border-strong);
	background: rgba(255, 255, 255, 0.03);
	color: #fff;
}

.esc-ak-btn--ghost:hover,
.esc-ak-btn--ghost:focus-visible {
	border-color: #fff;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

.esc-ak-btn:active {
	transform: scale(0.975);
}

.esc-ak-btn--block {
	width: 100%;
}

.esc-ak-btn[disabled] {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

/* ---------- First screen ---------- */

.esc-ak-hero {
	position: relative;
	isolation: isolate;
	padding: clamp(28px, 4vw, 56px) 0 clamp(20px, 3vw, 40px);
}

.esc-ak-hero__glow {
	position: absolute;
	inset: -20% -30% auto;
	z-index: -1;
	height: 720px;
	background:
		radial-gradient(ellipse 45% 40% at 78% 35%, rgba(255, 0, 4, 0.16), transparent 70%),
		radial-gradient(ellipse 55% 50% at 10% 0%, rgba(255, 0, 4, 0.07), transparent 60%);
	pointer-events: none;
}

.esc-ak-hero__grid {
	display: grid;
	gap: clamp(36px, 5vw, 64px);
	align-items: center;
}

.esc-ak-hero__text {
	max-width: 640px;
}

.esc-ak h1 {
	color: #fff;
	font-size: clamp(36px, 5.6vw, 64px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.esc-ak-hero__lead {
	margin-top: 20px !important;
	color: var(--muted);
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.6;
}

.esc-ak-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* Messenger pick under the hero buttons (and above the phone bar). */
.esc-ak-pick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.esc-ak-pick[hidden] {
	display: none;
}

.esc-ak-pick__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 16px 0 6px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: var(--surface);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.2s var(--ease), transform 0.3s var(--ease);
}

.esc-ak-pick__btn:hover,
.esc-ak-pick__btn:focus-visible {
	border-color: #fff;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

.esc-ak-pick__btn[hidden] {
	display: none;
}

.esc-ak-pick__btn .esc-ak-msg__ico {
	width: 32px;
	height: 32px;
	border-radius: 999px;
}

.esc-ak-city {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.esc-ak-city__label {
	margin-right: 4px;
	color: var(--caption);
	font-size: 14px;
}

/* No city yet: the question is the first thing to answer. */
.esc-ak-city.is-unset .esc-ak-city__label {
	color: #f2f2f2;
	font-weight: 500;
}

.esc-ak-city.is-unset .esc-ak-city__pill {
	border-color: rgba(255, 0, 4, 0.45);
	color: #fff;
}

.esc-ak-city__pill {
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.esc-ak-city__pill:hover {
	border-color: #fff;
	color: #fff;
}

.esc-ak-city__pill[aria-pressed="true"] {
	border-color: var(--accent);
	background: rgba(255, 0, 4, 0.12);
	color: #fff;
}

/* Entrance of the first screen: CSS only, no layout shift. */
.esc-ak-in {
	animation: esc-ak-rise 0.55s var(--ease) both;
}

.esc-ak-hero__text > :nth-child(2) { animation-delay: 0.06s; }
.esc-ak-hero__text > :nth-child(3) { animation-delay: 0.12s; }
.esc-ak-hero__text > :nth-child(4) { animation-delay: 0.18s; }
.esc-ak-hero__text > :nth-child(5) { animation-delay: 0.24s; }

@keyframes esc-ak-rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

/* Coupon deck: four tickets fanned out, each floating on its own beat. */
.esc-ak-deck {
	position: relative;
	width: min(100%, 540px);
	height: 400px;
	margin: 0 auto;
}

.esc-ak-coupon {
	--r: 0deg;
	--x: 0px;
	--y: 0px;
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	gap: 2px;
	width: 250px;
	margin: -62px 0 0 -125px;
	padding: 18px 22px 18px 30px;
	border: 1px solid var(--border-strong);
	border-radius: 16px;
	background: linear-gradient(145deg, #2b2b2b 0%, #1f1f1f 100%);
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8);
	transform: translate(var(--x), var(--y)) rotate(var(--r));
	animation: esc-ak-deal 0.55s var(--ease) both, esc-ak-float 6s var(--ease) 0.6s infinite;
}

/* Perforation: the ticket notch on the left edge. */
.esc-ak-coupon::before {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 14px;
	border-left: 2px dashed rgba(255, 255, 255, 0.14);
}

.esc-ak-coupon__pct {
	color: #fff;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
}

.esc-ak-coupon__name {
	margin-top: 6px;
	color: #f2f2f2;
	font-size: 15px;
	font-weight: 700;
}

.esc-ak-coupon__what {
	color: var(--muted);
	font-size: 14px;
}

.esc-ak-coupon--1 { --r: -9deg; --x: -128px; --y: -92px; animation-delay: 0s, 0.6s; }
.esc-ak-coupon--2 { --r: 7deg; --x: 124px; --y: -70px; animation-delay: 0.08s, 1.8s; }
.esc-ak-coupon--3 { --r: -4deg; --x: -110px; --y: 88px; animation-delay: 0.16s, 3s; }
.esc-ak-coupon--4 { --r: 5deg; --x: 118px; --y: 104px; animation-delay: 0.24s, 4.2s; z-index: 1; border-color: rgba(255, 0, 4, 0.55); background: linear-gradient(145deg, #3a1415 0%, #241011 100%); }
.esc-ak-coupon--4 .esc-ak-coupon__pct { color: #fff; text-shadow: 0 0 24px rgba(255, 0, 4, 0.55); }

@keyframes esc-ak-deal {
	from { opacity: 0; transform: translate(0, 40px) rotate(0deg) scale(0.9); }
	to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}

@keyframes esc-ak-float {
	0%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
	50% { transform: translate(var(--x), calc(var(--y) - 8px)) rotate(calc(var(--r) * 0.6)); }
}

/* Phone: the fan becomes a tidy 2×2 grid — no ticket hides another one. */
@media (max-width: 559px) {
	.esc-ak-hero__cta .esc-ak-btn {
		flex: 1 1 100%;
	}

	.esc-ak-city__label {
		flex-basis: 100%;
	}

	.esc-ak-deck {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		width: 100%;
		height: auto;
		padding: 4px 2px;
	}

	.esc-ak-coupon {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		margin: 0;
		padding: 10px 10px 10px 22px;
	}

	.esc-ak-coupon::before {
		left: 11px;
	}

	/* Short tickets: the cards below carry the details. */
	.esc-ak-coupon__pct { font-size: 26px; }
	.esc-ak-coupon__name { font-size: 13px; line-height: 1.3; }
	.esc-ak-coupon__what { display: none; }
	.esc-ak-coupon--1 { --r: -2deg; --x: 0px; --y: 0px; }
	.esc-ak-coupon--2 { --r: 2deg; --x: 0px; --y: 6px; }
	.esc-ak-coupon--3 { --r: 1.5deg; --x: 0px; --y: 0px; }
	.esc-ak-coupon--4 { --r: -2deg; --x: 0px; --y: 6px; }
}

@media (min-width: 960px) {
	.esc-ak-hero__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}

}

/* ---------- Sections ---------- */

.esc-ak-sec {
	padding: clamp(52px, 6.5vw, 96px) 0;
	scroll-margin-top: calc(var(--nav-h, 76px) - 8px);
}

.esc-ak-sec--alt {
	background: var(--bg-alt);
}

.esc-ak-head {
	max-width: 680px;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.esc-ak h2 {
	color: #fff;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 700;
	line-height: 1.15;
}

.esc-ak-head p {
	margin-top: 14px;
	color: var(--muted);
}

/* Scroll reveal: script.js adds .is-in; without JS everything is visible. */
.esc-ak.js-ak .esc-ak-reveal,
.esc-ak.js-ak .gallery.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
	transition-delay: var(--esc-ak-d, 0ms);
}

.esc-ak.js-ak .esc-ak-reveal.is-in,
.esc-ak.js-ak .gallery.reveal.is-in {
	opacity: 1;
	transform: none;
}

.esc-ak.js-ak .esc-ak-reveal.is-settled {
	transition-delay: 0ms;
}

.esc-ak.js-ak .esc-ak-card.is-settled {
	transition: border-color 0.2s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

/* Stagger without style attributes (CSP-ready, like header.js). */
.esc-ak-grid > :nth-child(2),
.esc-ak-steps > :nth-child(2) { --esc-ak-d: 80ms; }
.esc-ak-grid > :nth-child(3),
.esc-ak-steps > :nth-child(3) { --esc-ak-d: 160ms; }
.esc-ak-grid > :nth-child(4) { --esc-ak-d: 240ms; }
.esc-ak-lead > :nth-child(2) { --esc-ak-d: 120ms; }

/* ---------- Offer cards ---------- */

.esc-ak-grid {
	display: grid;
	gap: 20px;
}

@media (min-width: 680px) {
	.esc-ak-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.esc-ak-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.esc-ak-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--surface);
	transition: border-color 0.2s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.55s var(--ease);
}

.esc-ak-card:hover {
	border-color: var(--border-strong);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}

.esc-ak.js-ak .esc-ak-card.is-in:hover {
	transform: translateY(-6px);
}

.esc-ak-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.esc-ak-card__ico {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(255, 0, 4, 0.12);
	color: var(--accent-soft);
}

.esc-ak-card__ico svg {
	width: 24px;
	height: 24px;
}

.esc-ak-card__pct {
	color: #fff;
	font-size: clamp(36px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.esc-ak-card__who {
	color: var(--accent-soft);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.esc-ak-card h3 {
	margin-top: 6px;
	color: #f2f2f2;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}

.esc-ak-card h3 span {
	display: block;
	color: var(--muted);
	font-size: 16px;
	font-weight: 400;
}

.esc-ak-card__cond {
	margin: 16px 0 20px;
}

.esc-ak-card__cond > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: #f2f2f2;
	font-size: 15px;
	font-weight: 500;
	list-style: none;
	cursor: pointer;
}

.esc-ak-card__cond > summary::-webkit-details-marker {
	display: none;
}

.esc-ak-card__cond > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin: -4px 0 0 4px;
	border-right: 2px solid var(--accent-soft);
	border-bottom: 2px solid var(--accent-soft);
	transform: rotate(45deg);
	transition: transform 0.3s var(--ease);
}

.esc-ak-card__cond[open] > summary::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* Wide screens: conditions are always shown, no toggle. */
@media (min-width: 680px) {
	.esc-ak-card__cond > summary {
		display: none;
	}
}

.esc-ak-card__how {
	display: grid;
	gap: 10px;
	margin: 0 !important;
	list-style: none;
}

@media (max-width: 679px) {
	.esc-ak-card__cond {
		margin: 6px 0 14px;
	}

	.esc-ak-card__how {
		padding-bottom: 6px !important;
	}

	.esc-ak-card {
		padding: 20px;
	}

	.esc-ak-card__top {
		margin-bottom: 12px;
	}
}

.esc-ak-card__how li {
	position: relative;
	padding-left: 26px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}

.esc-ak-card__how li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 2px;
	width: 12px;
	height: 7px;
	border-bottom: 2px solid var(--accent-soft);
	border-left: 2px solid var(--accent-soft);
	transform: rotate(-45deg);
}

.esc-ak-card__links {
	margin-top: 12px !important;
	color: var(--caption);
	font-size: 14px;
}

.esc-ak-card__links[hidden] {
	display: none;
}

.esc-ak-card__links a {
	color: var(--accent-soft);
	font-weight: 500;
	text-decoration: none;
}

.esc-ak-card__links a:hover,
.esc-ak-card__links a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.esc-ak-btn--card {
	width: 100%;
	margin-top: auto;
	border-color: var(--border-strong);
	background: var(--surface-2);
	color: #fff;
}

.esc-ak-btn--card:hover,
.esc-ak-btn--card:focus-visible {
	border-color: var(--accent);
	background: var(--accent);
	color: #fff;
	transform: translateY(-2px);
}

/* ---------- Steps and the note ---------- */

.esc-ak-steps {
	display: grid;
	gap: 20px;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 860px) {
	.esc-ak-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.esc-ak-step {
	display: grid;
	gap: 6px;
	padding: 22px 24px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--surface);
}

.esc-ak-step__n {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 8px;
	border-radius: 12px;
	background: var(--accent-grad);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}

.esc-ak-step b {
	color: #f2f2f2;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.esc-ak-step > span:last-child {
	color: var(--muted);
	font-size: 15px;
}

@media (max-width: 679px) {
	.esc-ak-steps {
		gap: 10px;
	}

	.esc-ak-step {
		grid-template-columns: 36px minmax(0, 1fr);
		column-gap: 14px;
		padding: 16px;
	}

	.esc-ak-step__n {
		grid-row: span 2;
		width: 36px;
		height: 36px;
		margin: 0;
		font-size: 16px;
	}

	.esc-ak-step b {
		font-size: 16px;
	}

	.esc-ak-note {
		padding: 16px;
	}
}

.esc-ak-note {
	display: flex;
	gap: 16px;
	margin-top: 20px;
	padding: 20px 24px;
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: 16px;
	background: #1f1f1f;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.6;
}

.esc-ak-note__ico {
	flex: none;
	color: var(--accent-soft);
}

.esc-ak-note__ico svg {
	width: 24px;
	height: 24px;
}

.esc-ak-note p + p,
.esc-ak-note details + p,
.esc-ak-note p + details {
	margin-top: 8px;
}

.esc-ak-note__more > summary {
	display: inline-flex;
	min-height: 32px;
	align-items: center;
	color: #f2f2f2;
	font-weight: 500;
	cursor: pointer;
}

.esc-ak-note__more p {
	margin-top: 4px;
}

.esc-ak-note b {
	color: #f2f2f2;
}

.esc-ak-note a {
	color: var(--accent-soft);
}

.esc-ak-note a:hover {
	color: #fff;
}

/* ---------- Video and photos ---------- */

.esc-ak-media[hidden] {
	display: none;
}

.esc-ak-video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin-bottom: 20px;
	border-radius: 24px;
	background: #111;
}

@media (max-width: 559px) {
	.esc-ak-video {
		margin-right: -24px;
		margin-left: -24px;
		border-radius: 0;
	}
}

.esc-ak-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.esc-ak-video__sound {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), transform 0.3s var(--ease);
}

.esc-ak-video__sound:hover {
	background: var(--accent);
	transform: translateY(-2px);
}

.esc-ak-video__sound[hidden] {
	display: none;
}

.esc-ak-video__sound svg {
	width: 22px;
	height: 22px;
}

.esc-ak-video__sound .esc-ak-on,
.esc-ak-video__sound[aria-pressed="true"] .esc-ak-off {
	display: none;
}

.esc-ak-video__sound[aria-pressed="true"] .esc-ak-on {
	display: block;
}

/* Gallery grid from partials/page-gallery.php; the shared photo viewer
   opens a tile by .gallery .g-item. */
.esc-ak .gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 768px) {
	.esc-ak .gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}
}

.esc-ak .g-item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	background: var(--surface);
	cursor: zoom-in;
}

.esc-ak .g-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s var(--ease);
}

.esc-ak .g-item:hover img {
	transform: scale(1.05);
}

/* ---------- Request form and messengers ---------- */

.esc-ak-lead {
	display: grid;
	gap: 20px;
	align-items: start;
}

@media (min-width: 960px) {
	.esc-ak-lead {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}

.esc-ak-form-card,
.esc-ak-msg {
	padding: clamp(24px, 3.5vw, 40px);
	border: 1px solid var(--border);
	border-radius: 24px;
	background: var(--surface);
}

.esc-ak-form-card {
	position: relative;
	overflow: hidden;
}

.esc-ak-form-card::before {
	content: "";
	position: absolute;
	inset: -40% -30% auto auto;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(255, 0, 4, 0.12), transparent 65%);
	pointer-events: none;
}

.esc-ak-sub {
	margin-top: 12px !important;
	color: var(--muted);
}

.esc-ak-form {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 24px;
}

.esc-ak-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.esc-ak-form .esc-smartcaptcha,
.esc-ak-form .esc-smartcaptcha > div {
	min-width: 0;
	max-width: 100%;
}

@media (min-width: 560px) {
	.esc-ak-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.esc-ak-field {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.esc-ak-field label {
	color: #f2f2f2;
	font-size: 14px;
	font-weight: 500;
}

.esc-ak-req {
	color: var(--accent-soft);
}

.esc-ak-field input,
.esc-ak-field select {
	width: 100%;
	min-height: 50px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-2);
	color: #fff;
	font: inherit;
	font-size: 16px;
	transition: border-color 0.2s var(--ease);
	-webkit-appearance: none;
	appearance: none;
}

.esc-ak-field select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 20px;
}

.esc-ak-field input::placeholder {
	color: var(--caption);
}

.esc-ak-field input:hover,
.esc-ak-field select:hover {
	border-color: var(--border-strong);
}

.esc-ak-field input:focus,
.esc-ak-field select:focus {
	border-color: var(--accent);
	outline: none;
}

.esc-ak-field input[type="date"] {
	color-scheme: dark;
}

.esc-ak-err {
	display: none;
	color: var(--accent-soft);
	font-size: 13px;
}

.esc-ak-field.is-error input,
.esc-ak-field.is-error select {
	border-color: var(--accent);
}

.esc-ak-field.is-error .esc-ak-err {
	display: block;
}

/* The offer picked on a card lights up the select for a moment. */
.esc-ak-field.is-picked select {
	border-color: var(--accent);
}

.esc-ak-consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.esc-ak-consent input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--accent);
}

.esc-ak-consent a {
	color: var(--accent-soft);
}

.esc-ak-form-err {
	display: none;
	color: var(--accent-soft);
	font-size: 14px;
}

.esc-ak-form-err.is-on {
	display: block;
}

.esc-ak-done {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 24px 12px;
	text-align: center;
	animation: esc-ak-rise 0.55s var(--ease) both;
}

.esc-ak-done[hidden] {
	display: none;
}

.esc-ak-done__ico {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--accent-grad);
	color: #fff;
}

.esc-ak-done__ico svg {
	width: 30px;
	height: 30px;
}

.esc-ak-done b {
	color: #fff;
	font-size: 22px;
}

.esc-ak-done p {
	color: var(--muted);
}

.esc-ak-form.is-sent > :not(.esc-ak-done) {
	display: none;
}

.esc-ak-msg h3 {
	color: #fff;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 700;
	line-height: 1.25;
}

.esc-ak-msg > p {
	margin-top: 10px;
	color: var(--muted);
	font-size: 15px;
}

.esc-ak-msg__list {
	display: grid;
	gap: 12px;
	margin-top: 22px;
}

.esc-ak-msg__btn {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 0 18px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-2);
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.3s var(--ease);
}

.esc-ak-msg__btn:hover,
.esc-ak-msg__btn:focus-visible {
	border-color: var(--border-strong);
	background: #323232;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

.esc-ak-msg__btn[hidden] {
	display: none;
}

.esc-ak-msg__ico {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
}

.esc-ak-msg__ico svg {
	width: 20px;
	height: 20px;
}

.esc-ak-msg__btn--call .esc-ak-msg__ico {
	background: rgba(255, 0, 4, 0.14);
	color: var(--accent-soft);
}

.esc-ak-msg__num {
	display: block;
	color: var(--muted);
	font-size: 14px;
	font-weight: 400;
}

.esc-ak-msg__btn--call {
	min-height: 64px;
}

.esc-ak-msg__club {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 15px;
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

.esc-ak-msg__club > span {
	min-width: 0;
}

.esc-ak-msg__club svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--accent-soft);
	transition: transform 0.3s var(--ease);
}

.esc-ak-msg__club:hover {
	color: #fff;
}

.esc-ak-msg__club:hover svg {
	transform: translateX(3px);
}

/* ---------- Phone action bar ---------- */

.esc-ak-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 900;
	display: flex;
	gap: 10px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--border);
	background: rgba(23, 23, 23, 0.94);
	opacity: 0;
	transform: translateY(110%);
	transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
	pointer-events: none;
}

.esc-ak-bar.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.esc-ak-bar .esc-ak-btn--primary {
	flex: 1;
}

.esc-ak-bar__msg {
	flex: none;
	padding: 0 16px;
}

.esc-ak-pick--bar {
	position: absolute;
	right: 16px;
	bottom: calc(100% + 8px);
	left: 16px;
	justify-content: center;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--border-strong);
	border-radius: 16px;
	background: #1f1f1f;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* The consent banner spans the bottom of a phone: stand above it,
   like the contact widget (--esc-ck-h is set by esclub-consent). */
@media (max-width: 760px) {
	html.esc-ck-open .esc-ak-bar {
		bottom: var(--esc-ck-h, 0px);
	}
}

@media (min-width: 960px) {
	.esc-ak-bar {
		display: none;
	}
}

@media print {
	.esc-ak-bar,
	.esc-ak-deck {
		display: none;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.esc-ak-in,
	.esc-ak-coupon,
	.esc-ak-done {
		animation: none;
	}

	.esc-ak-coupon {
		transform: translate(var(--x), var(--y)) rotate(var(--r));
	}

	.esc-ak.js-ak .esc-ak-reveal,
	.esc-ak.js-ak .gallery.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.esc-ak-btn,
	.esc-ak-btn svg,
	.esc-ak-pick__btn,
	.esc-ak-card__cond > summary::after,
	.esc-ak-card,
	.esc-ak .g-item img,
	.esc-ak-msg__btn,
	.esc-ak-msg__club svg,
	.esc-ak-video__sound,
	.esc-ak-bar {
		transition: none;
	}

	.esc-ak-btn:hover,
	.esc-ak-pick__btn:hover,
	.esc-ak-msg__btn:hover,
	.esc-ak.js-ak .esc-ak-card.is-in:hover,
	.esc-ak .g-item:hover img {
		transform: none;
	}
}