/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   Architecture borrowed from Aviasales' shipped system (464 CSS variables,
   read off production), values our own:

     · two separate neutral ramps — one for light, one for dark. Dark is not
       the light ramp inverted; #141414-family greys read differently than
       tinted greys and inverting produces mud.
     · alpha steps are real tokens, never rgba() computed at use site
     · brand ramp weighted at the ends, sparse in the middle
     · elevation climbs blur AND opacity together
     · two fonts: display for brand voice, system stack for UI
     · a semantic layer on top of primitives — components only ever touch
       the semantic names, so theming happens in exactly one place

   Primitives are theme-independent. Semantics flip.
   ========================================================================== */

:root {
	/* ======================================================================
	   PRIMITIVES — never used directly by components
	   ====================================================================== */

	/* ---- neutral, light theme ------------------------------------------ */
	--ink-25: #f8f9fb;
	--ink-50: #f2f5f9;
	--ink-100: #e7ecf3;
	--ink-200: #d5dce7;
	--ink-300: #b7c1d1;
	--ink-400: #8b96a9;
	--ink-500: #626d80;
	--ink-600: #47516180;
	--ink-700: #2c3546;
	--ink-900: #0d1422;

	--ink-900-a72: #0d1422b8;
	--ink-900-a12: #0d14221f;
	--ink-900-a08: #0d142214;
	--ink-500-a60: #626d8099;

	/* ---- neutral, dark theme ------------------------------------------- */
	--slate-50: #eceef2;
	--slate-300: #8c93a3;
	--slate-400: #5b6172;
	--slate-500: #3c4254;
	--slate-600: #2b3145;
	--slate-700: #1f2438;
	--slate-800: #171b2c;
	--slate-900: #10131f;
	--slate-950: #0a0c16;

	--white: #fff;
	--white-a72: #ffffffb8;
	--white-a60: #fff9;
	--white-a12: #ffffff1f;
	--white-a08: #ffffff14;

	/* ---- brand: deep navy ---------------------------------------------- */
	--deep-25: #eef1fb;
	--deep-50: #dde3f7;
	--deep-100: #bcc6ef;
	--deep-300: #6f7fc9;
	--deep-500: #2f3d8f;
	--deep-700: #1a2260;
	--deep-900: #0b1030;
	--deep-1000: #060a20;

	/* ---- action: hot orange --------------------------------------------
	   #f4511e on white is 3.48:1 — passes AA for large text (18px/700+),
	   fails it for body copy. Button labels are sized accordingly.
	   --hot-700 is the variant for orange text on light backgrounds. */
	--hot-50: #fff1ec;
	--hot-100: #ffd9cc;
	--hot-400: #ff6134;
	--hot-500: #f4511e;
	--hot-600: #d93f11;
	--hot-700: #b3320b;

	/* ---- support: cool blue, for links and info ------------------------- */
	--sky-50: #e8f1ff;
	--sky-500: #2f7df6;
	--sky-600: #1b60d0;
	--sky-700: #14489c;

	/* ---- status --------------------------------------------------------- */
	--good-50: #e6f7ee;
	--good-500: #12a05c;
	--good-700: #0a6b3d;
	--warn-50: #fff6e3;
	--warn-500: #d98910;
	--warn-700: #965c06;
	--bad-50: #ffecec;
	--bad-500: #dc3535;
	--bad-700: #9b2020;

	/* ======================================================================
	   SEMANTICS — the only names components are allowed to use
	   ====================================================================== */

	--bg-page: var(--white);
	--bg-subtle: var(--ink-25);
	--bg-surface: var(--white);
	--bg-raised: var(--white);
	--bg-sunken: var(--ink-50);
	--bg-inverse: var(--deep-900);
	--bg-hover: var(--ink-50);
	--bg-active: var(--ink-100);

	--text-primary: var(--ink-900);
	--text-secondary: var(--ink-500);
	--text-tertiary: var(--ink-400);
	--text-inverse: var(--white);
	--text-inverse-muted: #a8b1d8;
	--text-link: var(--sky-600);
	--text-price: var(--ink-900);

	--border-subtle: var(--ink-100);
	--border-default: var(--ink-200);
	--border-strong: var(--ink-300);
	--border-inverse: #232c5e;

	--action-bg: var(--hot-500);
	--action-bg-hover: var(--hot-400);
	--action-bg-active: var(--hot-600);
	--action-text: var(--white);

	--focus-ring: #4c8dff;

	/* ---- elevation ------------------------------------------------------ */
	--shadow-xs: 0 1px 3px #0d142214;
	--shadow-s: 0 3px 8px #0d142218;
	--shadow-m: 0 8px 20px #0d14221f;
	--shadow-l: 0 16px 36px #0d142229;
	--shadow-xl: 0 26px 60px #0d142233;
	/* On the navy band, shadows need far more opacity to register at all. */
	--shadow-on-deep: 0 10px 34px #03061a80;

	/* ======================================================================
	   SCALES — theme-independent
	   ====================================================================== */

	/* 4px base. Every gap, pad and margin on the site comes from here. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-32: 128px;

	--radius-xs: 6px;
	--radius-s: 8px;
	--radius-m: 12px;
	--radius-l: 16px;
	--radius-xl: 20px;
	--radius-2xl: 28px;
	--radius-pill: 999px;

	/* Display face carries the brand voice and appears only in headlines.
	   Everything else is the system stack — zero webfont cost on the
	   critical path, which is most of the page. */
	--font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, sans-serif;
	--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	/* Type scale, 1.25 ratio, clamped so nothing needs a media query. */
	--text-2xs: 11px;
	--text-xs: 12px;
	--text-s: 13px;
	--text-m: 15px;
	--text-base: 16px;
	--text-l: 18px;
	--text-xl: clamp(20px, 1.6vw, 22px);
	--text-2xl: clamp(23px, 2.2vw, 28px);
	--text-3xl: clamp(27px, 3vw, 36px);
	--text-4xl: clamp(31px, 4.2vw, 46px);
	--text-5xl: clamp(36px, 5.4vw, 60px);

	--leading-tight: 1.1;
	--leading-snug: 1.28;
	--leading-normal: 1.5;
	--leading-relaxed: 1.65;

	--tracking-tight: -0.022em;
	--tracking-snug: -0.012em;
	--tracking-normal: 0;

	--container: 1200px;
	--container-wide: 1320px;
	--container-text: 720px;

	--header-h: 68px;

	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 0.14s;
	--dur-base: 0.22s;
	--dur-slow: 0.36s;
}

/* ==========================================================================
   Dark theme
   Only the semantic layer is redeclared. Primitives never move.

   Three states, per the platform contract: an explicit choice stamps
   data-theme on <html>; the default "system" setting stamps nothing and is
   decided by prefers-color-scheme. Both paths have to be covered, and the
   explicit one has to win in both directions.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg-page: var(--slate-950);
		--bg-subtle: var(--slate-900);
		--bg-surface: var(--slate-800);
		--bg-raised: var(--slate-700);
		--bg-sunken: var(--slate-900);
		--bg-inverse: var(--slate-900);
		--bg-hover: var(--slate-700);
		--bg-active: var(--slate-600);

		--text-primary: var(--slate-50);
		--text-secondary: var(--slate-300);
		--text-tertiary: var(--slate-400);
		--text-inverse: var(--slate-50);
		--text-inverse-muted: var(--slate-300);
		--text-link: #7fb0ff;
		--text-price: var(--slate-50);

		--border-subtle: var(--slate-700);
		--border-default: var(--slate-600);
		--border-strong: var(--slate-500);
		--border-inverse: var(--slate-600);

		--shadow-xs: 0 1px 3px #00000066;
		--shadow-s: 0 3px 8px #00000073;
		--shadow-m: 0 8px 20px #00000080;
		--shadow-l: 0 16px 36px #0000008c;
		--shadow-xl: 0 26px 60px #00000099;
	}
}

:root[data-theme="dark"] {
	--bg-page: var(--slate-950);
	--bg-subtle: var(--slate-900);
	--bg-surface: var(--slate-800);
	--bg-raised: var(--slate-700);
	--bg-sunken: var(--slate-900);
	--bg-inverse: var(--slate-900);
	--bg-hover: var(--slate-700);
	--bg-active: var(--slate-600);

	--text-primary: var(--slate-50);
	--text-secondary: var(--slate-300);
	--text-tertiary: var(--slate-400);
	--text-inverse: var(--slate-50);
	--text-inverse-muted: var(--slate-300);
	--text-link: #7fb0ff;
	--text-price: var(--slate-50);

	--border-subtle: var(--slate-700);
	--border-default: var(--slate-600);
	--border-strong: var(--slate-500);
	--border-inverse: var(--slate-600);

	--shadow-xs: 0 1px 3px #00000066;
	--shadow-s: 0 3px 8px #00000073;
	--shadow-m: 0 8px 20px #00000080;
	--shadow-l: 0 16px 36px #0000008c;
	--shadow-xl: 0 26px 60px #00000099;
}

/* ==========================================================================
   Base — reset, document defaults, layout primitives
   Components only ever reference semantic tokens from tokens.css.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--bg-page);
	color: var(--text-primary);
	font-family: var(--font-ui);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern", "liga";
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
	text-wrap: balance;
}

h1 {
	font-size: var(--text-4xl);
}
h2 {
	font-size: var(--text-3xl);
}
h3 {
	font-size: var(--text-xl);
	letter-spacing: var(--tracking-snug);
}
h4 {
	font-size: var(--text-l);
	letter-spacing: var(--tracking-snug);
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: var(--text-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	text-decoration-thickness: 2px;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

::selection {
	background: var(--hot-100);
	color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-6);
}

.container--wide {
	max-width: var(--container-wide);
}

.container--text {
	max-width: var(--container-text);
}

@media (max-width: 640px) {
	.container {
		padding-inline: var(--space-4);
	}
}

.section {
	padding-block: var(--space-20);
}

.section--tight {
	padding-block: var(--space-12);
}

@media (max-width: 640px) {
	.section {
		padding-block: var(--space-12);
	}

	.section--tight {
		padding-block: var(--space-8);
	}
}

.stack > * + * {
	margin-top: var(--space-4);
}

.stack-6 > * + * {
	margin-top: var(--space-6);
}

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.section-head__text {
	min-width: 0;
}

.section-head p {
	margin-top: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--text-m);
}

.grid {
	display: grid;
	gap: var(--space-4);
}

.grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1000px) {
	.grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Prices are compared vertically down a column — tabular figures keep the
   digits from dancing. */
.num {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Components

   Layout follows Tutu's block anatomy, measured off production:
     · page ground is grey (#F5F5F9), never white
     · navy hero, then a white sheet with 32px top corners riding up over it
     · content is a STACK OF BIG ROUNDED BLOCKS — radius 32 for feature
       blocks, 16 for cards, 24 for banners
     · blocks alternate colour: accent → white cards → navy → grey
     · the page closes with a dense internal-link block

   The reason this matters: naked sections floating on a white page read as
   empty no matter how good the type is. Density comes from the blocks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
	position: relative;
	z-index: 50;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: var(--bg-page);
	border-bottom: 1px solid var(--border-subtle);
}

.site-header--on-deep {
	background: var(--deep-900);
	border-bottom-color: transparent;
	color: #fff;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	width: 100%;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-l);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: inherit;
	text-decoration: none;
	flex: none;
}

.logo__mark {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 9px;
	background: var(--action-bg);
	display: grid;
	place-items: center;
	color: #fff;
}

.logo__mark svg {
	width: 18px;
	height: 18px;
}

.nav {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin-left: auto;
}

.nav a {
	color: inherit;
	opacity: 0.74;
	text-decoration: none;
	font-size: var(--text-m);
	font-weight: 500;
	white-space: nowrap;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.nav a:hover,
.nav a[aria-current="page"] {
	opacity: 1;
}

.theme-toggle {
	width: 36px;
	height: 36px;
	flex: none;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 10px;
	background: none;
	color: inherit;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover {
	opacity: 1;
}

.theme-toggle svg {
	width: 17px;
	height: 17px;
}

.theme-toggle__moon {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__sun {
	display: none;
}
:root[data-theme="dark"] .theme-toggle__moon {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle__sun {
		display: none;
	}
	:root:not([data-theme="light"]) .theme-toggle__moon {
		display: block;
	}
}

/* Service pills in the header — the multi-vertical row every RU travel site has */
/* `flex: none` here would make overflow-x pointless — the row would size to
   its content and push the whole header past the viewport instead of
   scrolling inside itself. It has to be allowed to shrink, and min-width:0
   is what actually lets a flex item go narrower than its content. */
.verticals {
	display: flex;
	gap: 6px;
	flex: 0 1 auto;
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.verticals::-webkit-scrollbar {
	display: none;
}

.vertical {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	font-size: var(--text-m);
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	background: #ffffff1a;
	transition: background var(--dur-fast) var(--ease-out);
}

.vertical:hover {
	background: #ffffff2e;
}

.vertical[aria-current="page"] {
	background: #fff;
	color: var(--deep-900);
}

.vertical svg {
	width: 16px;
	height: 16px;
	flex: none;
}

@media (max-width: 900px) {
	.nav a:not(.nav__keep) {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Hero — navy band that the white sheet then overlaps
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--deep-900);
	color: #fff;
	padding-block: var(--space-8) var(--space-16);
	overflow: clip;
}

.hero::before {
	content: "";
	position: absolute;
	inset: -50% 25% auto -15%;
	height: 150%;
	background: radial-gradient(50% 50% at 50% 50%, #4c8dff26, transparent 70%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
}

.hero__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-4xl);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.028em;
	color: #fff;
}

.hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

/* Trust chips, the way Tutu stacks «22 года работаем» next to the rating. */
.hero__facts li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: var(--radius-pill);
	background: #ffffff14;
	color: #d5dcf5;
	font-size: var(--text-s);
	font-weight: 500;
}

.hero__facts li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--hot-400);
	flex: none;
}

/* Promo strip above the headline */
.promo {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-l);
	background: linear-gradient(96deg, #2a1c6b, #3a2a86);
	color: #fff;
	font-size: var(--text-m);
	text-decoration: none;
}

.promo__tag {
	flex: none;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: var(--hot-500);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.promo__text {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Sheet — white surface with 32px top corners, pulled up over the hero.
   This single move is most of what makes the Tutu homepage feel built.
   -------------------------------------------------------------------------- */

.sheet {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--space-8) * -1);
	padding-block: var(--space-6) var(--space-16);
	border-radius: 32px 32px 0 0;
	background: var(--bg-page);
}

/* --------------------------------------------------------------------------
   Blocks
   -------------------------------------------------------------------------- */

.block {
	position: relative;
	padding: var(--space-8) var(--space-8) var(--space-10);
	border-radius: 32px;
	overflow: hidden;
}

.block + .block,
.sheet .block:not(:first-child) {
	margin-top: var(--space-6);
}

.block--accent {
	background: linear-gradient(140deg, var(--deep-500), #4636a8 70%, #5b3fb8);
	color: #fff;
}

.block--deep {
	background: var(--deep-900);
	color: #fff;
}

.block--plain {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
}

.block--sunken {
	background: var(--bg-sunken);
}

.block__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.block__title {
	margin: 0;
	font-size: var(--text-3xl);
	font-weight: 800;
	letter-spacing: -0.026em;
	line-height: 1.1;
	color: inherit;
}

.block__sub {
	margin-top: var(--space-2);
	font-size: var(--text-m);
	opacity: 0.72;
}

.block--accent .block__sub,
.block--deep .block__sub {
	opacity: 0.78;
}

.block__link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: var(--radius-pill);
	background: #ffffff1f;
	color: inherit;
	font-size: var(--text-m);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-out);
}

.block__link:hover {
	background: #ffffff33;
}

.block--plain .block__link,
.block--sunken .block__link {
	background: var(--bg-sunken);
	color: var(--text-primary);
}

.block--plain .block__link:hover,
.block--sunken .block__link:hover {
	background: var(--bg-active);
}

@media (max-width: 640px) {
	.block {
		padding: var(--space-6) var(--space-4) var(--space-8);
		border-radius: 24px;
	}

	.block__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
   Destination card
   -------------------------------------------------------------------------- */

.dest-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-4);
	list-style: none;
}

@media (max-width: 1000px) {
	.dest-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.dest-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.dest-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-surface);
	border-radius: var(--radius-l);
	overflow: hidden;
	text-decoration: none;
	color: var(--text-primary);
	box-shadow: var(--shadow-xs);
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.dest-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-l);
}

.dest-card__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--bg-sunken);
	overflow: hidden;
}

.dest-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.dest-card:hover .dest-card__img {
	transform: scale(1.045);
}

/* Fallback when no photo has been supplied for this destination. */
.dest-card__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	background: linear-gradient(
		150deg,
		hsl(var(--card-hue, 220) 44% 34%),
		var(--deep-900) 88%
	);
	color: #fff;
}

.dest-card__fallback::after {
	content: "";
	position: absolute;
	inset: -55% -20% auto -25%;
	height: 150%;
	background: radial-gradient(46% 46% at 50% 50%, #ffffff24, transparent 70%);
}

.dest-card__code {
	position: relative;
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: 0.07em;
	line-height: 1;
	opacity: 0.9;
}

.dest-card__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: var(--space-4);
	flex: 1 1 auto;
}

.dest-card__country {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--text-s);
	color: var(--text-secondary);
}

.dest-card__country .flag {
	flex: none;
	border-radius: 2px;
}

.dest-card__route {
	font-family: var(--font-display);
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.dest-card__route i {
	font-style: normal;
	color: var(--text-tertiary);
	padding-inline: 2px;
}

/* Tutu prints the fare at 24px/600 — it is the loudest thing on the card. */
.dest-card__price {
	margin-top: 2px;
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--text-price);
}

.dest-card__meta {
	font-size: var(--text-s);
	color: var(--text-tertiary);
}

.dest-card__go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: var(--space-3);
	font-size: var(--text-m);
	font-weight: 700;
	color: var(--hot-700);
}

.dest-card__go svg {
	width: 16px;
	height: 16px;
	transition: transform var(--dur-base) var(--ease-out);
}

.dest-card:hover .dest-card__go svg {
	transform: translateX(3px);
}

:root[data-theme="dark"] .dest-card__go {
	color: var(--hot-400);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .dest-card__go {
		color: var(--hot-400);
	}
}

/* --------------------------------------------------------------------------
   Services — the rest of the affiliate surface
   -------------------------------------------------------------------------- */

.services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
	list-style: none;
}

@media (max-width: 900px) {
	.services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.services {
		grid-template-columns: minmax(0, 1fr);
	}
}

.service {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	height: 100%;
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-l);
	background: var(--bg-surface);
	color: var(--text-primary);
	text-decoration: none;
	box-shadow: var(--shadow-xs);
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.service:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-m);
}

.service__icon {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: var(--bg-sunken);
	color: var(--deep-500);
}

:root[data-theme="dark"] .service__icon {
	color: #9db4ff;
}

.service__icon svg {
	width: 22px;
	height: 22px;
}

.service__text {
	min-width: 0;
	flex: 1 1 auto;
}

.service__name {
	display: block;
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.3;
}

.service__note {
	display: block;
	font-size: var(--text-s);
	color: var(--text-secondary);
}

.service__go {
	flex: none;
	color: var(--text-tertiary);
}

.service__go svg {
	width: 18px;
	height: 18px;
}

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */

.features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	list-style: none;
}

@media (max-width: 900px) {
	.features {
		grid-template-columns: minmax(0, 1fr);
	}
}

.feature {
	padding: var(--space-6);
	border-radius: var(--radius-l);
	background: #ffffff14;
}

.block--plain .feature,
.block--sunken .feature {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
}

.feature__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: var(--space-4);
	border-radius: 12px;
	background: #ffffff1f;
}

.block--plain .feature__icon,
.block--sunken .feature__icon {
	background: var(--bg-sunken);
	color: var(--deep-500);
}

.feature__icon svg {
	width: 21px;
	height: 21px;
}

.feature__title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-l);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: inherit;
}

.feature__text {
	font-size: var(--text-m);
	line-height: var(--leading-relaxed);
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Link farm — dense internal linking, the way Tutu closes its homepage
   -------------------------------------------------------------------------- */

.linkfarm {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-6) var(--space-4);
}

@media (max-width: 900px) {
	.linkfarm {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.linkfarm {
		grid-template-columns: minmax(0, 1fr);
	}
}

.linkfarm__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-s);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.linkfarm__col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.linkfarm__col a {
	color: var(--text-secondary);
	text-decoration: none;
	font-size: var(--text-m);
}

.linkfarm__col a:hover {
	color: var(--text-primary);
	text-decoration: underline;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: 48px;
	padding-inline: var(--space-6);
	border: 0;
	border-radius: var(--radius-m);
	font-family: var(--font-ui);
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: var(--tracking-snug);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.btn:active {
	transform: translateY(1px);
}

/* 18px keeps the label inside WCAG "large text", where the orange clears 3:1
   on white. Do not shrink without darkening --action-bg. */
.btn--primary {
	background: var(--action-bg);
	color: #fff;
	font-size: var(--text-l);
}

.btn--primary:hover {
	background: var(--action-bg-hover);
}

.btn--secondary {
	background: var(--bg-surface);
	color: var(--text-primary);
	border: 1px solid var(--border-default);
}

.btn--secondary:hover {
	background: var(--bg-hover);
}

.btn--sm {
	height: 38px;
	padding-inline: var(--space-4);
	font-size: var(--text-m);
}

/* --------------------------------------------------------------------------
   Price list — direction pages
   -------------------------------------------------------------------------- */

.price-list {
	list-style: none;
	border-radius: var(--radius-l);
	overflow: hidden;
	background: var(--bg-surface);
	box-shadow: var(--shadow-xs);
}

.price-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	text-decoration: none;
	color: inherit;
	transition: background var(--dur-fast) var(--ease-out);
}

.price-row + .price-row,
.price-list li + li .price-row {
	border-top: 1px solid var(--border-subtle);
}

.price-row:hover {
	background: var(--bg-hover);
}

.price-row__date {
	font-size: var(--text-base);
	font-weight: 600;
}

.price-row__sub {
	display: block;
	font-size: var(--text-s);
	color: var(--text-secondary);
}

.price-row__price {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 800;
	white-space: nowrap;
}

.price-row__go {
	color: var(--text-tertiary);
}

.price-row__go svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 520px) {
	.price-row {
		grid-template-columns: 1fr auto;
	}
	.price-row__go {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border-radius: var(--radius-pill);
	background: var(--bg-surface);
	color: var(--text-primary);
	font-size: var(--text-m);
	text-decoration: none;
	box-shadow: var(--shadow-xs);
	transition: transform var(--dur-fast) var(--ease-out);
}

.chip:hover {
	transform: translateY(-2px);
}

.chip small {
	color: var(--text-tertiary);
	font-size: var(--text-xs);
	font-weight: 700;
}

.chip .flag {
	flex: none;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Crumbs
   -------------------------------------------------------------------------- */

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	list-style: none;
	font-size: var(--text-s);
	color: #a8b1d8;
}

.crumbs a {
	color: inherit;
	text-decoration: none;
}

.crumbs a:hover {
	color: #fff;
	text-decoration: underline;
}

.crumbs li + li::before {
	content: "/";
	margin-right: var(--space-2);
	opacity: 0.45;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
	border-radius: var(--radius-l);
	overflow: hidden;
	background: var(--bg-surface);
	box-shadow: var(--shadow-xs);
}

.faq__item + .faq__item {
	border-top: 1px solid var(--border-subtle);
}

.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	font-size: var(--text-base);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--text-tertiary);
	border-bottom: 2px solid var(--text-tertiary);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--dur-base) var(--ease-out);
}

.faq__item[open] summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.faq__item summary:hover {
	background: var(--bg-hover);
}

.faq__answer {
	padding: 0 var(--space-5) var(--space-5);
	color: var(--text-secondary);
	line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	list-style: none;
}

@media (max-width: 860px) {
	.stats {
		grid-template-columns: minmax(0, 1fr);
	}
}

.stat {
	padding: var(--space-5);
	border-radius: var(--radius-m);
	background: var(--bg-surface);
	box-shadow: var(--shadow-xs);
}

.stat__value {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.stat__label {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-s);
	color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */

.prose {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--text-secondary);
}

.prose > * + * {
	margin-top: var(--space-4);
}

.prose h2 {
	margin-top: var(--space-10);
	font-size: var(--text-2xl);
	color: var(--text-primary);
}

.prose h3 {
	margin-top: var(--space-8);
	color: var(--text-primary);
}

.prose strong {
	color: var(--text-primary);
	font-weight: 600;
}

.prose ul,
.prose ol {
	padding-left: var(--space-5);
}

.prose li + li {
	margin-top: var(--space-2);
}

.prose code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--bg-sunken);
}

/* --------------------------------------------------------------------------
   Disclosure
   -------------------------------------------------------------------------- */

.disclosure {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-m);
	background: var(--bg-sunken);
	color: var(--text-secondary);
	font-size: var(--text-s);
	line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	padding-block: var(--space-16) var(--space-10);
	background: var(--deep-900);
	color: #fff;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: var(--space-8);
}

.footer-col h4 {
	margin-bottom: var(--space-4);
	font-size: var(--text-s);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #a8b1d8;
}

.footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.footer-col a {
	color: #fff;
	opacity: 0.76;
	text-decoration: none;
	font-size: var(--text-m);
}

.footer-col a:hover {
	opacity: 1;
	text-decoration: underline;
}

.footer-about {
	color: #a8b1d8;
	font-size: var(--text-m);
	line-height: var(--leading-relaxed);
	max-width: 42ch;
}

.footer-about .logo {
	color: #fff;
	margin-bottom: var(--space-4);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
	margin-top: var(--space-12);
	padding-top: var(--space-6);
	border-top: 1px solid #232c5e;
	color: #a8b1d8;
	font-size: var(--text-s);
}

@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.footer-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
	}
}

/* --------------------------------------------------------------------------
   Price calendar
   Bar height encodes price relative to the cheapest date in the set, so the
   good dates are findable at a glance instead of read one at a time.
   -------------------------------------------------------------------------- */

.calendar {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-bottom: var(--space-2);
	-webkit-overflow-scrolling: touch;
}

.calendar__track {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	list-style: none;
	min-width: min-content;
}

.calendar__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	width: 74px;
	padding: var(--space-3) 6px var(--space-3);
	border-radius: var(--radius-m);
	background: var(--bg-sunken);
	color: var(--text-primary);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.calendar__day:hover {
	background: var(--bg-active);
	transform: translateY(-2px);
}

.calendar__bar {
	width: 100%;
	border-radius: 5px;
	background: linear-gradient(180deg, var(--deep-300), var(--deep-500));
	opacity: 0.55;
}

.calendar__day:hover .calendar__bar {
	opacity: 0.8;
}

.calendar__price {
	font-family: var(--font-display);
	font-size: var(--text-m);
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.calendar__date {
	font-size: var(--text-xs);
	color: var(--text-secondary);
	white-space: nowrap;
}

.calendar__tag {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--good-700);
	white-space: nowrap;
}

.calendar__day.is-cheapest {
	background: var(--good-50);
	box-shadow: inset 0 0 0 2px var(--good-500);
}

.calendar__day.is-cheapest .calendar__bar {
	background: linear-gradient(180deg, #4bd08a, var(--good-500));
	opacity: 1;
}

:root[data-theme="dark"] .calendar__day.is-cheapest {
	background: #0f2a1e;
}

:root[data-theme="dark"] .calendar__tag {
	color: #4bd08a;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .calendar__day.is-cheapest {
		background: #0f2a1e;
	}
	:root:not([data-theme="light"]) .calendar__tag {
		color: #4bd08a;
	}
}

/* ==========================================================================
   click-tur — search form
   Direction: dark navy hero + hot CTA.
   Measured against Aviasales / Tutu / Skyscanner / Kayak / OneTwoTrip.

   Nothing here depends on Bootstrap or jQuery. Scoped under .ct- so it can
   sit next to the existing whitelabel.css without a fight.
   ========================================================================== */

/* Tokens live on :root, not on .ct-hero. The autocomplete and the passenger
   popover are portalled onto <body> — the bar sets overflow:hidden to keep its
   inner corners square, so a dropdown parented inside it would be clipped.
   Scoping the tokens to the hero would leave those layers unpainted. */
:root {
	/* ---- palette ---------------------------------------------------- */
	--ct-navy-900: #0b1030; /* hero ground */
	--ct-navy-800: #151c42; /* raised on hero: chips, checkbox boxes */
	--ct-navy-700: #232c5e; /* hairlines on hero */

	--ct-surface: #fff; /* bar segments */
	--ct-surface-2: #f5f7fb; /* segment hover */
	--ct-line: #e3e7ef; /* dividers, field borders */

	--ct-ink: #0c1220; /* value text */
	--ct-ink-2: #5a637a; /* labels */
	--ct-ink-3: #8a92a6; /* placeholders */

	--ct-on-navy: #fff;
	--ct-on-navy-2: #a3acd0;

	--ct-hot: #f4511e; /* the only saturated colour on the page */
	--ct-hot-hi: #ff6134;
	--ct-hot-lo: #d93f11;

	--ct-focus: #4c8dff;

	/* ---- geometry --------------------------------------------------- */
	--ct-field-h: 64px;
	--ct-radius: 16px;
	--ct-radius-sm: 10px;
	--ct-bar-shadow: 0 10px 34px rgba(3, 6, 26, 0.5);

	/* ---- type ------------------------------------------------------- */
	--ct-font: var(--font-ui, Inter, system-ui, sans-serif);
}

.ct-hero {
	position: relative;
	background: var(--ct-navy-900);
	color: var(--ct-on-navy);
	font-family: var(--ct-font);
	padding: 72px 24px 64px;
	overflow: clip;
}

/* One flat colour. The only allowed embellishment is a single soft light
   source, which costs nothing and keeps the navy from reading as dead. */
.ct-hero::before {
	content: "";
	position: absolute;
	inset: -40% 30% auto -10%;
	height: 140%;
	background: radial-gradient(
		50% 50% at 50% 50%,
		rgba(76, 141, 255, 0.16),
		transparent 70%
	);
	pointer-events: none;
}

.ct-hero__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Headline. Optional — delete this block if the page already has its own.
   -------------------------------------------------------------------------- */

.ct-hero__title {
	margin: 0 0 14px;
	font-size: clamp(28px, 4.2vw, 44px);
	line-height: 1.09;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ct-on-navy);
}

.ct-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ct-on-navy-2);
}

.ct-hero__facts li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ct-hero__facts li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ct-hot);
	flex: none;
}

/* --------------------------------------------------------------------------
   The bar.
   Grid, 1px gaps, --ct-line showing through as the dividers. Radius lives on
   the container with overflow:hidden, so inner corners stay square — the rule
   all five reference sites follow.
   -------------------------------------------------------------------------- */

.ct-search {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.ct-search__bar {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	/* Passengers gets the widest column — "3 пассажира, бизнес" is the longest
	   value any field has to hold, and truncating it looks broken. */
	grid-template-columns: 1.06fr 1.06fr 0.82fr 0.82fr 1.34fr;
	gap: 1px;
	background: var(--ct-line);
	border-radius: var(--ct-radius);
	box-shadow: var(--ct-bar-shadow);
	overflow: hidden;
}

.ct-field {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	height: var(--ct-field-h);
	padding: 0 14px;
	background: var(--ct-surface);
	cursor: text;
	transition: background 0.12s ease;
}

.ct-field:hover {
	background: var(--ct-surface-2);
}

/* The passengers field is a <button>, so it has to be talked out of its
   user-agent styling before it can pass for a field. */
.ct-field--button {
	border: 0;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Focus ring is drawn inside, because the bar clips its children. */
.ct-field:focus-within {
	background: var(--ct-surface);
	box-shadow: inset 0 0 0 2px var(--ct-focus);
	z-index: 3;
}

.ct-field__label {
	display: block;
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
	color: var(--ct-ink-2);
	margin-bottom: 5px;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The value sits under the label — a floating label, not a placeholder.
   Aviasales, Tutu, Skyscanner and OneTwoTrip all do exactly this. */
.ct-field__value,
.ct-field__input {
	display: block;
	width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	font-family: inherit;
	font-size: 17px;
	line-height: 21px;
	font-weight: 600;
	color: var(--ct-ink);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ct-field__input:focus {
	outline: none;
}

.ct-field__input::placeholder {
	color: var(--ct-ink-3);
	font-weight: 500;
}

.ct-field__value--muted {
	color: var(--ct-ink-3);
	font-weight: 500;
}

/* The passengers value is the longest string any field holds
   ("3 пассажира, бизнес"). One step down in size buys the ~12px that keeps it
   off the ellipsis without looking different from its neighbours. */
.ct-field--pax .ct-field__value {
	font-size: 16px;
	letter-spacing: -0.01em;
}

/* Keep long values off the IATA code and off the trailing icon. */
.ct-field--pax .ct-field__value,
.ct-field--depart .ct-field__value,
.ct-field--return .ct-field__value {
	padding-right: 26px;
}

.ct-field--from .ct-field__input {
	padding-right: 54px;
}

.ct-field--to .ct-field__input {
	padding-right: 38px;
}

/* IATA code parked on the right of the city fields, like Aviasales. */
.ct-field__code {
	position: absolute;
	right: 14px;
	bottom: 13px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ct-ink-3);
	pointer-events: none;
}

.ct-field--from .ct-field__code {
	right: 30px; /* clear the swap button */
}

.ct-field__icon {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 20px;
	height: 20px;
	color: var(--ct-ink-3);
	pointer-events: none;
}

/* Native date input, made invisible and stretched over the whole field, so
   phones get their own picker and we ship no calendar code. The formatted
   Russian date is painted by .ct-field__value above it. */
.ct-field__date {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-family: inherit;
}

.ct-field__date::-webkit-calendar-picker-indicator {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	cursor: pointer;
	opacity: 0;
}

/* --------------------------------------------------------------------------
   Swap button — sits ON the divider between Откуда and Куда.
   -------------------------------------------------------------------------- */

.ct-swap {
	position: absolute;
	top: 50%;
	/* Sits exactly on the Откуда/Куда divider: first column ÷ sum of columns. */
	left: calc((1.06 / 5.1) * 100%);
	transform: translate(-50%, -50%);
	z-index: 4;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--ct-line);
	border-radius: 50%;
	background: var(--ct-surface);
	color: var(--ct-ink-2);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(12, 18, 32, 0.14);
	transition: color 0.14s ease, border-color 0.14s ease, transform 0.22s ease;
}

.ct-swap:hover {
	color: var(--ct-ink);
	border-color: #c9d0de;
}

.ct-swap:active {
	transform: translate(-50%, -50%) scale(0.94);
}

.ct-swap:focus-visible {
	outline: 2px solid var(--ct-focus);
	outline-offset: 2px;
}

.ct-swap svg {
	width: 16px;
	height: 16px;
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ct-swap.is-flipped svg {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   CTA. Sole saturated colour, sitting outside the bar (Aviasales layout).
   18px/700 keeps it inside WCAG "large text", where #f4511e on white clears
   the 3:1 floor — a plain 16px label on this orange would not.
   -------------------------------------------------------------------------- */

.ct-submit {
	flex: 0 0 auto;
	min-width: 168px;
	height: var(--ct-field-h);
	padding: 0 26px;
	border: 0;
	border-radius: var(--ct-radius);
	background: var(--ct-hot);
	color: #fff;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	box-shadow: var(--ct-bar-shadow);
	transition: background 0.14s ease, transform 0.1s ease;
}

.ct-submit:hover {
	background: var(--ct-hot-hi);
}

.ct-submit:active {
	background: var(--ct-hot-lo);
	transform: translateY(1px);
}

.ct-submit:focus-visible {
	outline: 3px solid var(--ct-focus);
	outline-offset: 3px;
}

.ct-submit[aria-busy="true"] {
	pointer-events: none;
	opacity: 0.72;
}

/* --------------------------------------------------------------------------
   Quick dates — Tutu's trick, and the cheapest conversion win on the page.
   -------------------------------------------------------------------------- */

.ct-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.ct-quick__btn {
	padding: 7px 13px;
	border: 1px solid var(--ct-navy-700);
	border-radius: 999px;
	background: var(--ct-navy-800);
	color: var(--ct-on-navy-2);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.ct-quick__btn:hover {
	color: var(--ct-on-navy);
	border-color: #3a4581;
}

.ct-quick__btn:focus-visible {
	outline: 2px solid var(--ct-focus);
	outline-offset: 2px;
}

.ct-quick__btn.is-active {
	background: var(--ct-on-navy);
	border-color: var(--ct-on-navy);
	color: var(--ct-navy-900);
}

/* --------------------------------------------------------------------------
   Secondary options — below the bar, never inside it.
   -------------------------------------------------------------------------- */

.ct-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin-top: 16px;
	font-size: 14px;
}

.ct-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--ct-on-navy-2);
	cursor: pointer;
	user-select: none;
}

.ct-check input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ct-check__box {
	width: 20px;
	height: 20px;
	flex: none;
	display: grid;
	place-items: center;
	border: 1.5px solid var(--ct-navy-700);
	border-radius: 6px;
	background: var(--ct-navy-800);
	transition: background 0.14s ease, border-color 0.14s ease;
}

.ct-check__box svg {
	width: 12px;
	height: 12px;
	opacity: 0;
	color: var(--ct-navy-900);
	transition: opacity 0.12s ease;
}

.ct-check:hover .ct-check__box {
	border-color: #3a4581;
}

.ct-check input:checked + .ct-check__box {
	background: var(--ct-on-navy);
	border-color: var(--ct-on-navy);
}

.ct-check input:checked + .ct-check__box svg {
	opacity: 1;
}

.ct-check input:focus-visible + .ct-check__box {
	outline: 2px solid var(--ct-focus);
	outline-offset: 2px;
}

.ct-check input:checked ~ .ct-check__text {
	color: var(--ct-on-navy);
}

.ct-options__spacer {
	flex: 1 1 auto;
}

.ct-options__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ct-on-navy-2);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px dashed rgba(163, 172, 208, 0.45);
	transition: color 0.14s ease, border-color 0.14s ease;
}

.ct-options__link:hover {
	color: var(--ct-on-navy);
	border-bottom-color: var(--ct-on-navy);
}

.ct-error {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #ff9c85;
}

.ct-error:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Autocomplete dropdown
   -------------------------------------------------------------------------- */

.ct-ac {
	position: absolute;
	z-index: 60;
	min-width: 300px;
	max-width: 420px;
	max-height: 336px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px;
	background: var(--ct-surface);
	border-radius: var(--ct-radius-sm);
	box-shadow: 0 18px 44px rgba(3, 6, 26, 0.34), 0 0 0 1px var(--ct-line);
	color: var(--ct-ink);
	font-family: var(--ct-font);
}

.ct-ac[hidden] {
	display: none;
}

.ct-ac__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
}

.ct-ac__item[aria-selected="true"] {
	background: #eef3ff;
}

.ct-ac__pin {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--ct-ink-3);
}

.ct-ac__text {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
}

.ct-ac__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 19px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ct-ac__name b {
	font-weight: 700;
	color: var(--ct-hot-lo);
}

.ct-ac__meta {
	display: block;
	font-size: 13px;
	line-height: 17px;
	color: var(--ct-ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ct-ac__code {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ct-ink-2);
	background: #eef1f7;
	border-radius: 6px;
	padding: 4px 7px;
}

.ct-ac__empty {
	padding: 14px 12px;
	font-size: 14px;
	color: var(--ct-ink-2);
}

/* --------------------------------------------------------------------------
   Passengers popover
   -------------------------------------------------------------------------- */

.ct-pax {
	position: absolute;
	z-index: 60;
	width: 320px;
	padding: 8px;
	background: var(--ct-surface);
	border-radius: var(--ct-radius-sm);
	box-shadow: 0 18px 44px rgba(3, 6, 26, 0.34), 0 0 0 1px var(--ct-line);
	color: var(--ct-ink);
	font-family: var(--ct-font);
}

.ct-pax[hidden] {
	display: none;
}

.ct-pax__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
}

.ct-pax__text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.ct-pax__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 19px;
}

.ct-pax__hint {
	display: block;
	font-size: 13px;
	line-height: 17px;
	color: var(--ct-ink-2);
}

.ct-pax__stepper {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.ct-step {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--ct-line);
	border-radius: 50%;
	background: var(--ct-surface);
	color: var(--ct-ink);
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.14s ease, background 0.14s ease;
}

.ct-step:hover:not(:disabled) {
	border-color: #c9d0de;
	background: var(--ct-surface-2);
}

.ct-step:disabled {
	opacity: 0.38;
	cursor: default;
}

.ct-step:focus-visible {
	outline: 2px solid var(--ct-focus);
	outline-offset: 2px;
}

.ct-pax__count {
	min-width: 22px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ct-pax__classes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 10px 12px 4px;
	border-top: 1px solid var(--ct-line);
	margin-top: 4px;
}

.ct-pax__class {
	padding: 9px 10px;
	border: 1px solid var(--ct-line);
	border-radius: 8px;
	background: var(--ct-surface);
	color: var(--ct-ink-2);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.ct-pax__class:hover {
	border-color: #c9d0de;
}

.ct-pax__class[aria-pressed="true"] {
	border-color: var(--ct-ink);
	background: var(--ct-ink);
	color: #fff;
}

.ct-pax__done {
	width: calc(100% - 24px);
	margin: 10px 12px 8px;
	height: 44px;
	border: 0;
	border-radius: 10px;
	background: var(--ct-ink);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.ct-pax__done:hover {
	background: #1b2440;
}

/* --------------------------------------------------------------------------
   Screen-reader only
   -------------------------------------------------------------------------- */

.ct-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Tablet — CTA drops under the bar, bar keeps four columns.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.ct-search {
		flex-wrap: wrap;
	}

	.ct-search__bar {
		grid-template-columns: 1fr 1fr;
		flex: 1 1 100%;
	}

	.ct-swap {
		left: 50%;
		top: calc(var(--ct-field-h) / 2);
	}

	.ct-field--from .ct-field__code {
		right: 30px;
	}

	.ct-submit {
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------
   Phone — vertical stack. Dates stay side by side so the block does not
   turn into a five-storey tower.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.ct-hero {
		padding: 40px 16px 44px;
	}

	.ct-hero__facts {
		margin-bottom: 22px;
		font-size: 14px;
	}

	.ct-search__bar {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"from from"
			"to to"
			"depart return"
			"pax pax";
	}

	.ct-field--from {
		grid-area: from;
	}
	.ct-field--to {
		grid-area: to;
	}
	.ct-field--depart {
		grid-area: depart;
	}
	.ct-field--return {
		grid-area: return;
	}
	.ct-field--pax {
		grid-area: pax;
	}

	/* Swap moves off the centre line and parks at the right edge, the way
	   every mobile flight form does it. */
	.ct-swap {
		left: auto;
		right: 14px;
		top: var(--ct-field-h);
		transform: translate(0, -50%);
	}

	.ct-swap:active {
		transform: translate(0, -50%) scale(0.94);
	}

	.ct-field--from .ct-field__code,
	.ct-field--to .ct-field__code {
		right: 58px;
	}

	.ct-ac,
	.ct-pax {
		min-width: 0;
		max-width: none;
		width: calc(100vw - 32px);
	}

	.ct-options {
		gap: 10px 18px;
	}

	.ct-options__spacer {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-swap svg,
	.ct-swap,
	.ct-submit,
	.ct-field {
		transition: none;
	}
}