/* ═══════════════════════════════════════════════════════════════════════
   AnyTrain — ax
   Простір імен ax-* вільний: 0 збігів у premium.css / style-desktop.css /
   style-mob.css / JS. Легасі тут нема що матчити.
   ctl-* — тільки хуки JS. Ніколи не стилізувати по них.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
	--ax-blue:#3B6FD9;
	--ax-blue-d:#2F59B0;
	--ax-blue-l:#EEF3FD;
	--ax-amber:#FFB800;
	--ax-amber-d:#F0A800;
	--ax-amber-ink:#1A1200;

	--ax-ink:#0B1220;
	--ax-txt2:#39435A;
	--ax-txt3:#7A849B;
	--ax-bg:#F4F6FB;
	--ax-surface:#FAFBFE;
	--ax-line:#E7EBF3;
	--ax-line2:#CFD8E8;
	--ax-white:#fff;

	--ax-navy1:#1A2B57;
	--ax-navy2:#080D1C;

	--ax-ok:#0E8A5F;
	--ax-warn:#B26A00;
	--ax-err:#C7362F;
	--ax-live:#34D399;

	--ax-fh:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
	--ax-fb:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;

	--ax-1:4px; --ax-2:8px; --ax-3:12px; --ax-4:16px; --ax-5:20px;
	--ax-6:24px; --ax-8:32px; --ax-10:40px; --ax-12:48px; --ax-14:56px;
	--ax-16:64px; --ax-20:80px; --ax-24:96px;

	--ax-r-chip:999px;
	--ax-r-field:14px;
	--ax-r-card:20px;
	--ax-r-lg:26px;

	--ax-sh-1:0 1px 3px rgba(11,18,32,.04),0 4px 12px rgba(11,18,32,.04);
	--ax-sh-2:0 4px 10px rgba(11,18,32,.05),0 14px 34px rgba(11,18,32,.07);
	--ax-sh-3:0 10px 24px rgba(11,18,32,.08),0 30px 70px rgba(11,18,32,.12);
	--ax-sh-amber:0 6px 16px rgba(240,168,0,.32),0 14px 40px rgba(240,168,0,.22);

	--ax-t:.18s cubic-bezier(.2,.7,.2,1);
	--ax-t-s:.34s cubic-bezier(.16,.84,.24,1);
}

/* ═══ БАЗА ══════════════════════════════════════════════════════════════
   ДВА ПРАВИЛА РЕСЕТУ — обидва здобуті на живій сторінці, не з теорії:

   1. Ресет мусить бути вагою `.ax тег` (0,0,1,1), а не :where() (0,0,0,0).
      Bootstrap лишається підключеним і має власний `a{text-decoration:
      underline}` (0,0,0,1). Ресет у :where() програв навіть йому — і вся
      сторінка вкрилася підкресленнями (перевірено в браузері).

   2. Ресет оголошує ЛИШЕ те, чого не задає жоден компонент.
      Ресет має вагу 11, будь-який одинарний компонент — 10. Отже РЕСЕТ
      СИЛЬНІШИЙ ЗА КОМПОНЕНТ, і все, що він оголосить, він у компонента
      відбере. Заміряно на проді, коли в ресеті ще стояли border/padding:
        .ax button{border:0}  -> .ax-chip--dk border = 0px. Чипи лишились
             БЕЗ РАМОК і зливались у пляму на hero — я тричі приймав це за
             брак контрасту й «лікував» колір, хоча ламалась рамка.
        .ax button{padding:0} -> .ax-btn--lg padding-left = 0px.
        .ax a{color}          -> .ax-store color = синій на navy
             («Завантажити в» тонуло в темному тлі).
      Для button лишаються тільки font і cursor. Border, padding, background,
      color — справа компонента. Голий bootstrap-івський `button` (вага 1)
      компоненти перебивають самі, без !important.
      Виняток — <a>: колір лишається в ресеті (голі посилання в тексті теж
      мають бути сині), тому компонент-посилання пишеться з тегом:
      `a.ax-store` (вага 11) — рівна ресету, виграє порядком у файлі.
   ═══════════════════════════════════════════════════════════════════════ */
.ax{font-family:var(--ax-fb);color:var(--ax-ink);background:var(--ax-bg);
	-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.ax *,.ax *::before,.ax *::after{box-sizing:border-box}
.ax h1,.ax h2,.ax h3,.ax h4{font-family:var(--ax-fh);margin:0;letter-spacing:-.03em;line-height:1.1;color:var(--ax-ink)}
.ax h1{font-size:clamp(32px,4.4vw,52px);font-weight:800}
.ax h2{font-size:clamp(23px,2.6vw,33px);font-weight:800}
.ax h3{font-size:17px;font-weight:700;letter-spacing:-.015em}
.ax p{margin:0;line-height:1.6}
.ax a{color:var(--ax-blue);text-decoration:none;transition:color var(--ax-t)}
.ax a:hover{color:var(--ax-blue-d);text-decoration:none}
.ax ul,.ax ol{margin:0;padding:0;list-style:none}
/* Тільки font і cursor. Решту задають компоненти — див. правило 2 вище. */
.ax button{font:inherit;cursor:pointer}
.ax img,.ax svg{display:block;max-width:100%}
.ax .ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ax .tnum{font-variant-numeric:tabular-nums}
.ax :focus-visible{outline:3px solid var(--ax-blue);outline-offset:2px;border-radius:6px}
.ax :focus:not(:focus-visible){outline:none}

.ax-wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--ax-6)}
@media(max-width:640px){.ax-wrap{padding-inline:var(--ax-4)}}

.ax-sec{padding-block:var(--ax-16)}
.ax-sec--tight{padding-block:var(--ax-12)}
@media(max-width:860px){.ax-sec,.ax-sec--tight{padding-block:var(--ax-10)}}

/* Шапка секції */
.ax-sech{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--ax-4);margin-bottom:var(--ax-6)}
.ax-sech__more{display:inline-flex;align-items:center;gap:var(--ax-2);font-family:var(--ax-fh);
	font-weight:700;font-size:14px;color:var(--ax-blue);white-space:nowrap;padding-bottom:2px}
.ax-sech__more .ic{transition:transform var(--ax-t)}
.ax-sech__more:hover .ic{transform:translateX(3px)}
@media(max-width:640px){.ax-sech{flex-direction:column;align-items:flex-start;gap:var(--ax-2)}}

.ax-kick{display:inline-flex;align-items:center;gap:var(--ax-2);font-family:var(--ax-fh);
	font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
	color:var(--ax-txt3);margin-bottom:var(--ax-2)}
.ax-kick--amber{color:var(--ax-amber)}
.ax-kick--live{color:var(--ax-ok)}
.ax-lead{font-size:17px;color:var(--ax-txt2);line-height:1.6}
.ax-muted{color:var(--ax-txt3);font-size:13.5px;line-height:1.55}

/* ═══ КНОПКА ════════════════════════════════════════════════════════════ */
.ax-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ax-2);
	width:auto;min-height:46px;padding:0 var(--ax-6);border:1.5px solid transparent;
	border-radius:var(--ax-r-field);font-family:var(--ax-fh);font-weight:700;font-size:14.5px;
	line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;
	transition:background var(--ax-t),border-color var(--ax-t),transform var(--ax-t),box-shadow var(--ax-t),color var(--ax-t)}
.ax-btn:hover{text-decoration:none}
.ax-btn:active{transform:translateY(1px)}
.ax-btn[disabled]{opacity:.5;pointer-events:none}
/* Amber, але без сяйва на пів-екрана: кнопка — частина форми, а не
   окремий об'єкт, що перетягує увагу на себе. Світіння лишаємо тільки
   на hover, як відповідь на намір. */
.ax-btn--go{background:var(--ax-amber);color:var(--ax-amber-ink);
	box-shadow:0 1px 2px rgba(180,120,0,.2)}
.ax-btn--go:hover{background:#FFC629;color:var(--ax-amber-ink);
	box-shadow:0 4px 14px rgba(240,168,0,.4)}
.ax-btn--dark{background:var(--ax-ink);color:#fff}
.ax-btn--dark:hover{background:#1B2540;color:#fff}
.ax-btn--ghost{background:#fff;color:var(--ax-ink);border-color:var(--ax-line2)}
.ax-btn--ghost:hover{border-color:var(--ax-blue);color:var(--ax-blue)}
.ax-btn--lg{min-height:54px;padding:0 var(--ax-6);font-size:15px;border-radius:14px}
.ax-btn--block{width:100%}

/* ═══ ЧИП ═══════════════════════════════════════════════════════════════
   flex:0 0 auto — обов'язково. Чип живе у flex-рядку (hero__quick), а
   типовий flex-shrink:1 разом із white-space:nowrap чавив їх один в
   одного: текст вилазив за межі й напрямки налазили (видно в браузері). */
.ax-chip{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;min-height:38px;padding:0 var(--ax-4);
	border-radius:var(--ax-r-chip);border:1.5px solid var(--ax-line);background:#fff;
	font-family:var(--ax-fh);font-weight:600;font-size:13.5px;color:var(--ax-txt2);
	cursor:pointer;white-space:nowrap;transition:all var(--ax-t)}
.ax-chip:hover{border-color:var(--ax-line2);color:var(--ax-ink)}
.ax-chip.is-on{background:var(--ax-ink);border-color:var(--ax-ink);color:#fff}
/* На темному фоні. Контраст перевірено в браузері: при .07/.16 чіпи
   зливались із hero і напрямки просто не читались. */
.ax-chip--dk{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;font-weight:700}
.ax-chip--dk:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);color:#fff}
.ax-chip--dk.is-on{background:var(--ax-amber);border-color:var(--ax-amber);color:var(--ax-amber-ink)}

/* ═══ КАРТКА ════════════════════════════════════════════════════════════ */
.ax-card{background:#fff;border:1px solid var(--ax-line);border-radius:var(--ax-r-card);
	padding:var(--ax-5);box-shadow:var(--ax-sh-1)}
.ax-card--flat{box-shadow:none;background:var(--ax-surface)}
.ax-card--pad0{padding:0;overflow:hidden}
.ax-card--navy{background:linear-gradient(155deg,var(--ax-navy1),var(--ax-navy2));border-color:transparent;
	color:#fff;box-shadow:var(--ax-sh-3)}
.ax-card--navy h2,.ax-card--navy h3{color:#fff}
.ax-card--act{transition:transform var(--ax-t-s),box-shadow var(--ax-t-s),border-color var(--ax-t)}
.ax-card--act:hover{transform:translateY(-3px);box-shadow:var(--ax-sh-2);border-color:var(--ax-line2)}

.ax-grid{display:grid;gap:var(--ax-4)}
.ax-grid--2{grid-template-columns:repeat(2,1fr)}
.ax-grid--3{grid-template-columns:repeat(3,1fr)}
.ax-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.ax-grid--3,.ax-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ax-grid--2,.ax-grid--3,.ax-grid--4{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════
   КОНТЕЙНЕР СТОРІНКИ
   Єдине місце, де ax-ds.css чіпає легасі-клас. Він тут не за стилем, а за
   двома речами, які інакше не полагодити ізсередини компонентів.

   1. overflow:hidden -> clip.
      style-desktop.css:43 і style-mob.css:186 ставлять .wrapper{overflow:
      hidden}. Будь-який предок із overflow != visible створює scroll-
      контейнер і ВБИВАЄ position:sticky у всіх нащадках. Тому шапка не
      липла — і, що важливо, не липла НІКОЛИ: стара поводилась так само,
      просто цього ніхто не помічав.
      clip обрізає так само, але scroll-контейнера не створює. Порядок
      двох рядків — це фолбек: браузер, який не знає clip, візьме hidden
      і поведеться як раніше.

   2. max-width:1440px + padding:10px.
      Сайт жив у коробці з сірими полями по краях — так виглядали сайти
      2013 року, коли цей CSS і писався. Повноекранний hero — базова річ
      для будь-якого travel-продукту 2026-го; сітку тримає .ax-wrap, а не
      обгортка сторінки.

   :has() звужує зміну рівно до сторінок з новою шапкою — решта екранів
   лишається в старій коробці, поки не переїде.
   ═══════════════════════════════════════════════════════════════════════ */
.wrapper:has(header.ax-hd){
	overflow:hidden;
	overflow:clip;
	max-width:none;
	padding-left:0;
	padding-right:0;
	padding-bottom:0;
	background-image:none;
	background-color:var(--ax-bg)}

/* ═══════════════════════════════════════════════════════════════════════
   ШАПКА
   Прозора над hero, біла зі скла — щойно почався скрол. Причина не
   декоративна: над темним hero біла смуга різала екран навпіл і читалась
   як чужий сайт, приклеєний зверху. Тепер шапка — частина hero, доки
   людина не поїхала вниз.
   Цілі 44px (Apple HIG 44pt / Material 48dp): у старій шапці посилання
   мали висоту 22px — на телефоні в них не влучиш.
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠ `header.ax-hd`, а не `.ax-hd`. Шапка лишається всередині <div class="phx">
   (там же .phx-back і .phx-drawer — хуки flowUx.js), а premium.css має
   `.phx header{background:#fff;...}` вагою (0,0,1,1) проти нашої (0,0,1,0).
   Результат на живій сторінці: шапка виїжджала БІЛОЮ поверх темного hero, а
   на ній — біле лого і біле меню, тобто порожня смуга. Тег у селекторі
   вирівнює вагу, далі виграє порядок підключення. */
header.ax-hd{position:sticky;top:0;z-index:var(--ax-z-bar,60);
	background:transparent;border-bottom:1px solid transparent;box-shadow:none;
	transition:background var(--ax-t),border-color var(--ax-t),backdrop-filter var(--ax-t)}
header.ax-hd.is-stuck{background:rgba(255,255,255,.86);border-bottom-color:var(--ax-line);
	backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
.ax-hd__in{display:flex;align-items:center;gap:var(--ax-6);height:64px}
.ax-hd__logo{display:flex;align-items:center;flex:0 0 auto;height:44px}
.ax-hd__logo svg{height:26px;width:auto}
.ax-hd__nav{display:flex;align-items:center;gap:2px;margin-right:auto}
/* Ціль 44px за рахунок padding, а не висоти тексту */
.ax-hd__nav a{display:inline-flex;align-items:center;height:44px;padding:0 var(--ax-3);
	border-radius:10px;font-family:var(--ax-fh);font-weight:600;font-size:14.5px;
	color:#fff;opacity:.72;transition:opacity var(--ax-t),background var(--ax-t),color var(--ax-t)}
.ax-hd__nav a:hover{opacity:1;background:rgba(255,255,255,.1);color:#fff}
.ax-hd__nav a.on{opacity:1;color:#fff;background:rgba(255,255,255,.12)}
.ax-hd__right{display:flex;align-items:center;gap:var(--ax-3);flex:0 0 auto}
.ax-hd__lang{display:flex;align-items:center;gap:2px;padding:3px;border-radius:var(--ax-r-chip);
	background:rgba(255,255,255,.1)}
.ax-hd__lang a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:32px;
	border-radius:var(--ax-r-chip);font-family:var(--ax-fh);font-weight:700;font-size:12.5px;
	color:rgba(255,255,255,.6);transition:all var(--ax-t)}
.ax-hd__lang a.on{background:#fff;color:var(--ax-ink)}
.ax-hd__lang a:hover:not(.on){color:#fff}
a.ax-hd__cab{display:inline-flex;align-items:center;height:44px;padding:0 var(--ax-5);
	border-radius:var(--ax-r-chip);background:#fff;color:var(--ax-ink);
	font-family:var(--ax-fh);font-weight:700;font-size:14px;transition:all var(--ax-t)}
a.ax-hd__cab:hover{background:var(--ax-amber);color:var(--ax-amber-ink)}
.ax-hd__burger{display:none;width:44px;height:44px;place-items:center;border-radius:10px;
	background:rgba(255,255,255,.1);color:#fff}
.ax-hd__burger:hover{background:rgba(255,255,255,.18)}

/* Прокручена шапка — темний текст на склі */
.ax-hd.is-stuck .ax-hd__nav a{color:var(--ax-txt2);opacity:1}
.ax-hd.is-stuck .ax-hd__nav a:hover,.ax-hd.is-stuck .ax-hd__nav a.on{background:var(--ax-bg);color:var(--ax-ink)}
.ax-hd.is-stuck .ax-hd__logo svg .ax-logo-w{fill:var(--ax-ink)}
.ax-hd.is-stuck .ax-hd__lang{background:var(--ax-bg)}
.ax-hd.is-stuck .ax-hd__lang a{color:var(--ax-txt3)}
.ax-hd.is-stuck .ax-hd__lang a.on{background:var(--ax-ink);color:#fff}
.ax-hd.is-stuck a.ax-hd__cab{background:var(--ax-ink);color:#fff}
.ax-hd.is-stuck a.ax-hd__cab:hover{background:var(--ax-amber);color:var(--ax-amber-ink)}
.ax-hd.is-stuck .ax-hd__burger{background:var(--ax-bg);color:var(--ax-ink)}

@media(max-width:900px){
	.ax-hd__nav,.ax-hd__lang{display:none}
	.ax-hd__burger{display:grid}
	.ax-hd__in{gap:var(--ax-3)}
	.ax-hd__logo{margin-right:auto}
}

/* Шухляда */
.ax-dr__ov{position:fixed;inset:0;z-index:88;background:rgba(6,10,20,.5);
	backdrop-filter:blur(3px);opacity:0;transition:opacity var(--ax-t-s)}
.ax-dr__ov.on{opacity:1}
.ax-dr{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);z-index:90;
	background:#fff;display:flex;flex-direction:column;padding:var(--ax-4);
	transform:translateX(100%);transition:transform var(--ax-t-s);
	box-shadow:-20px 0 60px rgba(6,10,20,.3)}
.ax-dr.on{transform:none}
.ax-dr__hd{display:flex;align-items:center;justify-content:space-between;
	padding-bottom:var(--ax-4);border-bottom:1px solid var(--ax-line);margin-bottom:var(--ax-2)}
.ax-dr__x{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
	color:var(--ax-txt2);background:var(--ax-bg)}
.ax-dr__nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.ax-dr__nav a{display:flex;align-items:center;min-height:48px;padding:0 var(--ax-3);
	border-radius:12px;font-family:var(--ax-fh);font-weight:600;font-size:15px;color:var(--ax-ink)}
.ax-dr__nav a:hover,.ax-dr__nav a.on{background:var(--ax-bg);color:var(--ax-blue)}
.ax-dr__lang{display:flex;gap:var(--ax-2);padding:var(--ax-3) 0;border-top:1px solid var(--ax-line);margin-top:var(--ax-2)}
.ax-dr__lang a{flex:1;display:inline-flex;align-items:center;justify-content:center;height:44px;
	border-radius:12px;border:1.5px solid var(--ax-line);font-family:var(--ax-fh);font-weight:700;
	font-size:13px;color:var(--ax-txt2)}
.ax-dr__lang a.on{background:var(--ax-ink);border-color:var(--ax-ink);color:#fff}

/* ═══════════════════════════════════════════════════════════════════════
   HERO
   Форма — єдиний світлий об'єкт на темному. Усе інше тихіше за неї.
   ═══════════════════════════════════════════════════════════════════════ */
.ax-hero{position:relative;background:var(--ax-navy2);overflow:hidden;isolation:isolate}
/* Світло за формою — дає глибину без картинок */
.ax-hero::before{content:'';position:absolute;inset:0;z-index:-2;
	background:
		radial-gradient(1200px 520px at 72% 12%,rgba(59,111,217,.34),transparent 62%),
		radial-gradient(760px 420px at 12% 96%,rgba(255,184,0,.10),transparent 66%),
		linear-gradient(155deg,var(--ax-navy1) 0%,var(--ax-navy2) 68%)}
/* Сітка-рейки: ледь помітна, натяк на залізницю */
.ax-hero::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.5;
	background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
	background-size:100% 52px;
	-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);
	mask-image:linear-gradient(180deg,transparent,#000 40%,transparent)}
/* Висота: 80/64 -> 56/48. Форма має бути видною одразу, без скролу —
   hero не самоцінний, він рама для пошуку. */
.ax-hero__in{position:relative;padding-block:var(--ax-14) var(--ax-12)}
@media(max-width:860px){.ax-hero__in{padding-block:var(--ax-10) var(--ax-8)}}

.ax-hero .ax-kick{color:rgba(255,255,255,.72);margin-bottom:6px}
.ax-hero .ax-kick .ic{color:var(--ax-amber)}
.ax-hero__h1{color:#fff;max-width:20ch;margin-bottom:var(--ax-2);
	font-size:clamp(28px,3.4vw,42px)}
.ax-hero__h1 em{font-style:normal;background:linear-gradient(100deg,var(--ax-amber),#FFD873);
	-webkit-background-clip:text;background-clip:text;color:transparent}
.ax-hero__sub{color:rgba(255,255,255,.6);font-size:15.5px;max-width:52ch;margin-bottom:var(--ax-6)}

/* Форма в hero: підняти й підсвітити */
.ax-hero__search{position:relative;z-index:2;background:#fff;border-radius:var(--ax-r-lg);
	padding:var(--ax-4);box-shadow:0 20px 50px rgba(4,8,20,.42),0 2px 0 rgba(255,255,255,.5) inset;
	max-width:1000px}
@media(max-width:640px){.ax-hero__search{padding:var(--ax-3);border-radius:20px}}

.ax-hero__quick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:var(--ax-5)}
.ax-hero__sep{width:1px;height:22px;background:rgba(255,255,255,.16);margin-inline:var(--ax-2)}
@media(max-width:640px){.ax-hero__sep{display:none}}

/* Довіра під формою — ОДИН тихий рядок.
   Було два конкурентні ряди (чипи + чотири пункти довіри) — разом вони
   шуміли гучніше за саму форму. Тепер довіра дрібніша, ділиться крапкою
   і не претендує на увагу: її читають лише тоді, коли шукають привід
   засумніватись.
   ⚠ Селектор `.ax-hero .ax-trust` (0,0,2,0), а не `.ax-trust`: ресет
   `.ax ul` (0,0,1,1) б'є одинарний клас і margin-top мовчки зникає. */
.ax-trust{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--ax-3)}
.ax-hero .ax-trust{margin-top:var(--ax-5)}
.ax-trust li{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;font-size:12.5px;
	color:rgba(255,255,255,.5);white-space:nowrap}
/* Розділювач-крапка замість чотирьох іконок поспіль */
.ax-trust li+li::before{content:'';width:3px;height:3px;border-radius:50%;
	background:rgba(255,255,255,.25);margin-right:var(--ax-2)}
.ax-trust .ic{color:var(--ax-live);opacity:.85}

/* ═══════════════════════════════════════════════════════════════════════
   ПОШУК
   ═══════════════════════════════════════════════════════════════════════ */
.ax-search{display:block}
.ax-search__row{display:flex;align-items:stretch;gap:var(--ax-2)}
.ax-search__f{flex:1 1 200px;min-width:0}
.ax-search__f--date{flex:0 1 200px}

/* Поле: підпис зверху, всередині рамки — читається як один об'єкт */
.ax-field{position:relative;display:block;height:100%;background:var(--ax-surface);
	border:1.5px solid var(--ax-line);border-radius:16px;padding:9px var(--ax-4) 7px;
	cursor:text;transition:border-color var(--ax-t),background var(--ax-t),box-shadow var(--ax-t)}
.ax-field:hover{border-color:var(--ax-line2)}
.ax-field:focus-within{border-color:var(--ax-blue);background:#fff;box-shadow:0 0 0 4px rgba(59,111,217,.13)}
.ax-field__lb{display:block;font-family:var(--ax-fh);font-weight:700;font-size:10.5px;
	letter-spacing:.09em;text-transform:uppercase;color:var(--ax-txt3);margin-bottom:2px;pointer-events:none}
.ax-field__in{display:block;width:100%;border:0;background:transparent;outline:none;padding:0;
	font-family:var(--ax-fh);font-weight:700;font-size:16px;color:var(--ax-ink);
	line-height:1.35;text-overflow:ellipsis}

/* ⚠ ЄДИНИЙ !important у цьому файлі. Він тут не від безсилля — інакше не можна.
   На інпуті дати ЛИШАЄТЬСЯ легасі-клас .calendar: за нього тримається
   script.js ($('.calendar').datepicker()), прибрати не можна — це контракт.
   Але style-desktop.css цей же хук ще й стилізує, та ще й із !important:
     .calendar{background:url(../img/calendar_20.png) right 20px center
               no-repeat #404040 !important}
   Проти !important вага не працює: ні (0,0,2,0), ні (0,0,9,0). На проді поле
   дати виїжджало темно-сірою плашкою з чужою іконкою-картинкою поверх нашої
   SVG (знято в браузері, не з коду).
   Прибрати можна буде разом із style-desktop.css — тоді й цей рядок піде.

   Ширший висновок, який варто памʼятати: «чистий неймспейс» захищає лише
   від селекторів. Легасі-хук, який ОДНОЧАСНО є стильовим селектором
   (.calendar, .element, .search-item), пробиває будь-який неймспейс. */
.ax-field .ax-field__in.calendar{background:transparent !important;
	background-image:none !important;box-shadow:none !important}
.ax-field__in::placeholder{color:#B9C1D2;font-weight:600}
.ax-field__ic{position:absolute;right:var(--ax-4);top:50%;transform:translateY(-50%);
	color:var(--ax-txt3);pointer-events:none}
.ax-search__f--date .ax-field__in{padding-right:24px}

.ax-search__swap{flex:0 0 46px;align-self:stretch;min-height:46px;display:grid;place-items:center;
	cursor:pointer;background:var(--ax-surface);border:1.5px solid var(--ax-line);
	border-radius:14px;color:var(--ax-txt3);transition:all var(--ax-t)}
.ax-search__swap:hover{background:#fff;border-color:var(--ax-blue);color:var(--ax-blue);transform:rotate(180deg)}
.ax-search__swap .ic{transition:none}

.ax-search__go{flex:0 0 auto;width:auto;align-self:stretch}

@media(max-width:900px){
	.ax-search__row{flex-wrap:wrap}
	.ax-search__f{flex:1 1 100%}
	.ax-search__f--date{flex:1 1 100%}
	.ax-search__swap{flex:0 0 46px;align-self:center;transform:rotate(90deg)}
	.ax-search__swap:hover{transform:rotate(270deg)}
	.ax-search__go{flex:1 1 100%;width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   СМУГА НАПРЯМКІВ
   Було шість карток «квитки та розклад» на пів-екрана. Картка такого
   розміру обіцяє дані — ціну, час у дорозі, найближчий рейс. У нас їх
   немає (popular_routes зберігає лише станції), тож картка обіцяла і не
   давала:半 екрана заради шести посилань.
   Тепер це рядок — рівно те, чим воно є: швидкий шлях у видачу і SEO-
   перелінковка. Займає одну смугу, а не екран.
   ═══════════════════════════════════════════════════════════════════════ */
.ax-dir{display:flex;flex-wrap:wrap;gap:var(--ax-2)}
a.ax-dir__i{display:inline-flex;align-items:center;gap:var(--ax-2);min-height:44px;
	padding:0 var(--ax-4);border-radius:var(--ax-r-chip);background:#fff;
	border:1.5px solid var(--ax-line);color:var(--ax-ink);
	font-family:var(--ax-fh);font-weight:700;font-size:14px;white-space:nowrap;
	transition:border-color var(--ax-t),transform var(--ax-t),box-shadow var(--ax-t)}
a.ax-dir__i:hover{border-color:var(--ax-blue);color:var(--ax-ink);
	transform:translateY(-2px);box-shadow:var(--ax-sh-2)}
.ax-dir__a{color:var(--ax-txt3);transition:transform var(--ax-t),color var(--ax-t)}
a.ax-dir__i:hover .ax-dir__a{color:var(--ax-blue);transform:translateX(2px)}

/* ═══════════════════════════════════════════════════════════════════════
   НАПРЯМКИ (картки — лишаються для /routes, де є місце під дані)
   ═══════════════════════════════════════════════════════════════════════ */
/* Картка напрямку.
   ⚠ Ціни, часу в дорозі й найближчого рейсу тут НЕМАЄ свідомо: таблиця
   popular_routes містить лише станції (перевірено в Seo::getStations).
   Показати «від 250 грн» = вигадати ціну від імені офіційного агента УЗ.
   Тому картка живе рухом і рельєфом, а не вигаданими числами. Щойно бек
   почне віддавати ціну/тривалість — місце під них уже є (.ax-rt__facts). */
.ax-rt{position:relative;display:flex;flex-direction:column;gap:var(--ax-3);
	padding:var(--ax-5);height:100%;overflow:hidden}
/* Тонка рейка збоку — проявляється на hover, натяк на колію */
.ax-rt::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
	background:linear-gradient(180deg,var(--ax-blue),var(--ax-amber));
	transform:scaleY(0);transform-origin:top;transition:transform var(--ax-t-s)}
.ax-card--act:hover .ax-rt::before{transform:scaleY(1)}
.ax-rt__r{display:flex;align-items:center;gap:var(--ax-2);font-family:var(--ax-fh);
	font-weight:800;font-size:16.5px;color:var(--ax-ink);letter-spacing:-.02em}
.ax-rt__r b{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-rt__a{color:var(--ax-blue);opacity:.55;transition:transform var(--ax-t),opacity var(--ax-t)}
.ax-card--act:hover .ax-rt__a{transform:translateX(3px);opacity:1}
.ax-rt__m{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ax-txt3);margin-top:auto}
.ax-rt__go{display:inline-flex;align-items:center;gap:4px;font-family:var(--ax-fh);font-weight:700;
	font-size:12.5px;color:var(--ax-blue);margin-left:auto;opacity:0;transform:translateX(-4px);
	transition:opacity var(--ax-t),transform var(--ax-t)}
.ax-card--act:hover .ax-rt__go{opacity:1;transform:none}
/* Місце під реальні дані, коли бек їх віддасть. Порожнім не рендериться. */
.ax-rt__facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--ax-3);
	font-size:12.5px;color:var(--ax-txt2)}
.ax-rt__facts b{font-family:var(--ax-fh);font-weight:800;color:var(--ax-ink)}

/* ═══════════════════════════════════════════════════════════════════════
   ТАБЛО — живий дашборд, наш козир
   ═══════════════════════════════════════════════════════════════════════ */
.ax-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--ax-fh);font-weight:700;
	font-size:12px;color:var(--ax-live)}
.ax-live__dot{width:7px;height:7px;border-radius:50%;background:var(--ax-live);flex:0 0 auto;
	box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:ax-pulse 2.2s infinite}
@keyframes ax-pulse{
	0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}
	70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}
	100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

.ax-board__h{display:flex;align-items:center;gap:var(--ax-4);padding:var(--ax-4) var(--ax-5);
	border-bottom:1px solid rgba(255,255,255,.09)}
.ax-board__st{font-size:12px;color:rgba(255,255,255,.44)}
.ax-board__st:last-child{margin-left:auto}
.ax-board__list{display:flex;flex-direction:column}
.ax-board__r{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:var(--ax-4);
	padding:var(--ax-4) var(--ax-5);border-bottom:1px solid rgba(255,255,255,.055);
	transition:background var(--ax-t)}
.ax-board__r:hover{background:rgba(255,255,255,.035)}
.ax-board__r:last-child{border-bottom:0}
.ax-board__n{font-family:var(--ax-fh);font-weight:800;font-size:13px;color:rgba(255,255,255,.5)}
.ax-board__rt{min-width:0;display:flex;flex-direction:column;gap:3px}
.ax-board__rt b{font-family:var(--ax-fh);font-weight:700;font-size:14.5px;color:#fff;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-board__rt span{font-size:12px;color:rgba(255,255,255,.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-board__f{display:flex;align-items:center;justify-content:space-between;gap:var(--ax-4);
	padding:var(--ax-4) var(--ax-5);font-size:13px;color:rgba(255,255,255,.44)}
.ax-board__f a{color:var(--ax-amber);font-family:var(--ax-fh);font-weight:700}
.ax-board__f a:hover{color:#FFD873}
@media(max-width:640px){
	/* Номер потяга не ховаємо, а підіймаємо над маршрутом: на телефоні
	   колонка 72px з'їдала половину рядка, і назви станцій обрізались на
	   «Запоріжжя-1 → Ль…». Маршрут — головне, номер — довідка. */
	.ax-board__r{grid-template-columns:1fr auto;gap:var(--ax-2) var(--ax-3)}
	.ax-board__n{grid-column:1;grid-row:1;font-size:11px}
	.ax-board__rt{grid-column:1;grid-row:2}
	.ax-board__rt b{white-space:normal}
	.ax-sev{grid-column:2;grid-row:1/3;align-self:center;font-size:12.5px;padding:4px 9px}
	.ax-board__h{flex-wrap:wrap;gap:var(--ax-2)}
	.ax-board__st:last-child{margin-left:0}
}

.ax-sev{display:inline-flex;align-items:center;gap:5px;font-family:var(--ax-fh);font-weight:800;
	font-size:13.5px;padding:5px 11px;border-radius:var(--ax-r-chip);white-space:nowrap}
.ax-sev--low{background:rgba(255,255,255,.09);color:rgba(255,255,255,.8)}
.ax-sev--mid{background:rgba(255,184,0,.16);color:#FFC629}
.ax-sev--hi{background:rgba(239,68,68,.18);color:#FF8A80}

/* ═══════════════════════════════════════════════════════════════════════
   ЯК ЦЕ ПРАЦЮЄ
   ═══════════════════════════════════════════════════════════════════════ */
.ax-how{counter-reset:ax-step}
.ax-how__i{position:relative;display:flex;flex-direction:column;gap:7px;padding:var(--ax-5);
	overflow:hidden}
.ax-how__n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;
	background:var(--ax-blue-l);color:var(--ax-blue);font-family:var(--ax-fh);font-weight:800;
	font-size:14px;margin-bottom:var(--ax-1)}
.ax-how__i h3{color:var(--ax-ink)}

/* ═══════════════════════════════════════════════════════════════════════
   SOCIAL PROOF
   Не «три цитати в рамці», а доказ: агрегат зверху (оцінка + обсяг),
   далі окремі голоси з обличчям, іменем і маршрутом. Обличчя — ініціали
   в кружку: фото пасажирів у нас немає, а стокові обличчя під реальними
   іменами були б брехнею.
   ═══════════════════════════════════════════════════════════════════════ */
.ax-proof{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ax-4) var(--ax-8);
	padding:var(--ax-4) var(--ax-5);margin-bottom:var(--ax-5);
	background:var(--ax-white);border:1px solid var(--ax-line);border-radius:var(--ax-r-card);
	box-shadow:var(--ax-sh-1)}
.ax-proof__score{display:flex;align-items:center;gap:var(--ax-3);flex:0 0 auto}
.ax-proof__num{font-family:var(--ax-fh);font-weight:800;font-size:32px;letter-spacing:-.03em;
	color:var(--ax-ink);line-height:1}
.ax-proof__of{display:flex;flex-direction:column;gap:3px}
.ax-proof__sub{font-size:12.5px;color:var(--ax-txt3)}
.ax-proof__sep{width:1px;align-self:stretch;background:var(--ax-line);flex:0 0 auto}
.ax-proof__stat{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.ax-proof__stat b{font-family:var(--ax-fh);font-weight:800;font-size:17px;color:var(--ax-ink);
	letter-spacing:-.02em}
.ax-proof__stat span{font-size:12.5px;color:var(--ax-txt3)}
.ax-proof__stores{display:flex;align-items:center;gap:var(--ax-4);margin-left:auto}
.ax-proof__store{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ax-txt2)}
.ax-proof__store svg{color:var(--ax-txt2);opacity:.75}
@media(max-width:860px){
	.ax-proof__sep{display:none}
	.ax-proof__stores{margin-left:0;width:100%;padding-top:var(--ax-3);border-top:1px solid var(--ax-line)}
}

.ax-rev{display:flex;flex-direction:column;gap:var(--ax-3);height:100%}
.ax-stars{display:inline-flex;gap:2px;color:var(--ax-amber)}
.ax-stars svg{fill:currentColor;stroke:none}
.ax-rev__t{color:var(--ax-txt2);font-size:14.5px;line-height:1.65;flex:1}
.ax-rev__w{display:flex;align-items:center;gap:var(--ax-3);
	padding-top:var(--ax-3);border-top:1px solid var(--ax-line)}
/* Ініціали замість стокового фото */
.ax-rev__av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:0 0 auto;
	background:var(--ax-blue-l);color:var(--ax-blue);
	font-family:var(--ax-fh);font-weight:800;font-size:14px;letter-spacing:-.01em}
.ax-rev__id{display:flex;flex-direction:column;gap:1px;min-width:0}
.ax-rev__id b{font-family:var(--ax-fh);font-weight:700;font-size:13.5px;color:var(--ax-ink)}
.ax-rev__id span{font-size:12px;color:var(--ax-txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Підтверджена покупка — зелений, але зі знаком: колір не єдиний носій (WCAG 1.4.1) */
.ax-rev__ok{display:inline-flex;align-items:center;gap:4px;margin-left:auto;flex:0 0 auto;
	font-size:11.5px;font-weight:700;font-family:var(--ax-fh);color:var(--ax-ok)}
.ax-rev__ok .ic{stroke-width:2.5}

/* ═══════════════════════════════════════════════════════════════════════
   ЗАСТОСУНОК
   ═══════════════════════════════════════════════════════════════════════ */
/* Текст ліворуч фіксованої ширини, телефон — по центру решти.
   Було `1fr 300px`: текст (короткий) розтягувався на 900px і між ним та
   телефоном зяяла порожня діра пів-екрана. */
.ax-app{display:grid;grid-template-columns:minmax(0,460px) 1fr;align-items:center;gap:var(--ax-8);
	padding:var(--ax-10) var(--ax-12) 0;position:relative;overflow:hidden}
.ax-app__txt{padding-bottom:var(--ax-10)}
.ax-app__txt h2{margin-bottom:var(--ax-4);max-width:16ch}
.ax-app__list{display:flex;flex-direction:column;gap:var(--ax-2)}
.ax-app .ax-app__list{margin-bottom:var(--ax-6)}
.ax-app__list li{display:flex;align-items:center;gap:var(--ax-2);font-size:14.5px;color:rgba(255,255,255,.74)}
.ax-app__list .ic{color:var(--ax-live)}
.ax-app__badges{display:flex;flex-wrap:wrap;gap:var(--ax-2)}
/* ⚠ `a.ax-store`, а не `.ax-store` — компонент стоїть на <a>, а ресет
   `.ax a{color}` має вагу 11 проти 10 і забирав колір: на navy-картці
   «Завантажити в» / «Доступно в» виходили синіми і тонули у фоні.
   Тег у селекторі вирівнює вагу, далі виграє порядок у файлі. */
a.ax-store{display:inline-flex;align-items:center;gap:var(--ax-2);padding:9px var(--ax-4);
	border-radius:12px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
	color:#fff;transition:background var(--ax-t),transform var(--ax-t),border-color var(--ax-t)}
a.ax-store:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);
	color:#fff;transform:translateY(-2px)}
.ax-store span{display:flex;flex-direction:column;line-height:1.15}
.ax-store small{font-size:9.5px;color:rgba(255,255,255,.6);letter-spacing:.04em}
.ax-store b{font-family:var(--ax-fh);font-weight:700;font-size:13px;color:#fff}
/* Телефон «виїжджає» знизу картки (overflow:hidden у .ax-card--pad0).
   max-height обов'язковий: у повний зріст 840px він розтягував блок на
   пів-екрана, і текст ліворуч висів у порожнечі. */
.ax-app__shot{align-self:end;display:flex;justify-content:center}
.ax-app__shot img{width:auto;max-height:440px;height:auto;border-radius:20px 20px 0 0;
	box-shadow:0 -8px 60px rgba(0,0,0,.4)}
@media(max-width:900px){
	/* Заголовок і бейджі по центру, а СПИСОК — ліворуч.
	   Було text-align:center на всьому: пункти в дві стрічки ламались
	   так, що галочка зависала окремо від свого тексту, і список читався
	   як набір випадкових слів (видно на телефоні). Маркер мусить стояти
	   біля початку рядка, інакше він не маркер. */
	.ax-app{grid-template-columns:1fr;gap:var(--ax-6);padding:var(--ax-8) var(--ax-6) 0;text-align:center}
	.ax-app__txt{padding-bottom:0}
	.ax-app__txt h2{max-width:none}
	.ax-app__list{max-width:340px;margin-inline:auto;text-align:left}
	.ax-app__list li{justify-content:flex-start;align-items:flex-start}
	.ax-app__list .ic{margin-top:3px}
	.ax-app__badges{justify-content:center}
	.ax-app__shot{max-width:280px;margin-inline:auto}
}

/* ═══════════════════════════════════════════════════════════════════════
   РЕЖИМ ВИДАЧІ
   html.at-searching ставить resultsUx.js — це готовий JS-контракт, не наш
   клас. Стилізуємо по ньому вимушено: інакше hero лишиться на пів-екрана
   над результатами. Пошук зверху лишається — його ще правлять.
   ═══════════════════════════════════════════════════════════════════════ */
html.at-searching .ax-hero__in{padding-block:var(--ax-6) var(--ax-6)}
html.at-searching .ax-hero__h1,
html.at-searching .ax-hero__sub,
html.at-searching .ax-hero .ax-kick{display:none}
html.at-searching .ax-hero::after{opacity:0}

/* ═══════════════════════════════════════════════════════════════════════
   ПІДВАЛ
   Не «мапа сайту», а закриття угоди: хто ми юридично, чим платити,
   куди йти по допомогу. SEO-перелінки лишаються, але не кричать.
   ═══════════════════════════════════════════════════════════════════════ */
.ax-ft{background:var(--ax-navy2);color:rgba(255,255,255,.6);padding-block:var(--ax-12) var(--ax-6)}
.ax-ft__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--ax-8) var(--ax-6);
	padding-bottom:var(--ax-8);border-bottom:1px solid rgba(255,255,255,.08)}
.ax-ft__logo{height:26px;width:auto;margin-bottom:var(--ax-4)}
.ax-ft__about{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.5);max-width:34ch;
	margin-bottom:var(--ax-4)}
.ax-ft h4{font-family:var(--ax-fh);font-weight:700;font-size:11.5px;letter-spacing:.09em;
	text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:var(--ax-3)}
.ax-ft__col{display:flex;flex-direction:column;gap:2px}
.ax-ft__col a{display:inline-flex;align-items:center;min-height:32px;font-size:14px;
	color:rgba(255,255,255,.68);transition:color var(--ax-t)}
.ax-ft__col a:hover{color:#fff}
.ax-ft__soc{display:flex;gap:var(--ax-2)}
.ax-ft__soc a{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
	background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
	transition:background var(--ax-t),transform var(--ax-t)}
.ax-ft__soc a:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.ax-ft__soc img{width:18px;height:18px;opacity:.85}
.ax-ft__bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
	gap:var(--ax-3) var(--ax-6);padding-top:var(--ax-5);font-size:12.5px;color:rgba(255,255,255,.4)}
.ax-ft__pay{display:flex;flex-wrap:wrap;gap:6px}
.ax-ft__pay span{display:inline-flex;align-items:center;height:26px;padding:0 10px;
	border-radius:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
	font-family:var(--ax-fh);font-weight:600;font-size:10.5px;letter-spacing:.03em;
	color:rgba(255,255,255,.6)}
@media(max-width:900px){
	.ax-ft__grid{grid-template-columns:1fr 1fr}
	.ax-ft__brand{grid-column:1/-1}
	.ax-ft__about{max-width:none}
}
@media(max-width:560px){
	.ax-ft__grid{grid-template-columns:1fr;gap:var(--ax-6)}
	.ax-ft__bot{flex-direction:column;align-items:flex-start}
}

/* ═══ ДОСТУПНІСТЬ ═══════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
	.ax *,.ax *::before,.ax *::after{animation-duration:.01ms !important;
		animation-iteration-count:1 !important;transition-duration:.01ms !important}
	.ax-search__swap:hover{transform:none}
}