/* ============================================================================
   modern.css — современная главная (index2.php), независимая от main.css
   Mobile-first, CSS-переменные, кастомный календарь, без сторонних зависимостей.
   ============================================================================ */

:root {
   /* Единый бренд-цвет — оранжевый Good Riddance (синий убран). См. DESIGN-COLORS.md. */
   --brand:      #ff5a3c;  /* основной бренд: кнопки, выбор, акценты, ссылки */
   --brand-dark: #d8472b;  /* нажатие/hover тёмный */
   --brand-2:    #ff8a5c;  /* светлый тёплый оттенок (подсветки), не бирюза */
   --accent:     #ff7a45;  /* доп. тёплый акцент (выходные в календаре) */
   --logo:       #43b0e4;  /* цвет логотипа GR (небесно-голубой) — вторичный акцент */
   --ink:        #0f1f33;
   --muted:      #66758c;
   --line:       #e7ecf3;
   --bg:         #f4f7fc;
   --card:       #ffffff;
   --radius:     18px;
   --radius-sm:  12px;
   --shadow:     0 8px 28px rgba(15,31,51,.09);
   --shadow-lg:  0 30px 70px rgba(20,25,60,.26);
   --maxw:       1160px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.m2 {
   font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
   color: var(--ink);
   background: var(--bg);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}
.m2 a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.m2 a:hover { text-decoration: underline; }
/* без подчёркивания — логотип и карточки-плитки направлений */
.m2-logo, .m2-logo:hover, .m2-dest, .m2-dest:hover, .m2-ticket, .m2-ticket:hover, .m2-weekend-btn, .m2-weekend-btn:hover, .m2-wk-card, .m2-wk-card:hover { text-decoration: none !important; }
.m2 .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Кликабельные объекты (лого, ссылки, кнопки, не-инпуты) — всегда курсор-рука.
   Глобальная страховка, чтобы новые элементы не забывали её. См. CLAUDE.md. */
.m2 a[href], .m2 button, .m2 label, .m2 summary, .m2 select,
.m2 [role="button"], .m2 [role="tab"], .m2 [onclick], .m2 [tabindex]:not(input):not(textarea) { cursor: pointer; }
.m2 button:disabled, .m2 [disabled], .m2 [aria-disabled="true"] { cursor: default; }

/* ============================================================================
   НОВЫЙ ГЕРОЙ + ПОИСК (по форме «Good Riddance v2»): тёплый градиент,
   оранжевый акцент, шрифт Manrope, карточка-герой со светящимся глобусом.
   Применяется только к шапке, hero и строке поиска — нижние блоки не меняются.
   ============================================================================ */
:root { --gr: #ff5a3c; }

/* Обёртка верхнего экрана: светлый фон, единый внутренний контейнер */
/* overflow-x:clip режет горизонтальный вылет декора, но НЕ создаёт скролл-контейнер
   по вертикали — попапы (пассажиры/автокомплит/календарь) свободно выходят вниз */
/* фон = как у секций ниже (var(--bg)), чтобы стык блоков был незаметным.
   overflow-x:clip режет горизонтальный вылет декора, но не мешает попапам
   (пассажиры/автокомплит/календарь) выходить вниз */
.m2-top { background: linear-gradient(180deg, #e6f0fe 0%, #eef4fd 34%, var(--bg) 66%); padding: 0 0 34px; overflow-x: clip; overflow-y: visible; }
.m2-top .wrap { max-width: 1300px; }
.m2-header, .m2-hero, .m2-hero-content, .m2-search-card, .m2-fields,
.m2-logo, .m2-nav, .m2-check { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }

/* ---------- Header ---------- */
.m2-header {
   position: relative; z-index: 50; background: transparent; border: 0;
   display: flex; align-items: center; gap: 18px; padding: 24px 4px;
}
.m2-logo { display: flex; align-items: center; }
.m2-logo img { height: 42px; width: auto; display: block; }
.m2-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.m2-nav a { color: #4a4f63; font-size: 16px; font-weight: 600; padding: 10px 16px; border-radius: 11px; text-decoration: none; transition: background .15s; }
.m2-nav a:hover { background: #e7e9f2; color: #4a4f63; text-decoration: none; }
.m2-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.m2-burger span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; }

/* ---------- Hero (карточка с градиентом) ---------- */
.m2-hero {
   position: relative; color: var(--ink); overflow: visible; border-radius: 0;
   padding: 6px 4px 0; background: none; box-shadow: none;
}
.m2-hero-blob, .m2-hero-globe { display: none; }
.m2-hero-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.m2-hero-blob.a { top: -120px; right: -60px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255,180,120,.55), transparent 62%); }
.m2-hero-blob.b { bottom: -160px; left: -80px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(120,90,220,.45), transparent 65%); }
.m2-hero-globe { position: absolute; inset: 0; pointer-events: none; }
.m2-hero-globe svg { width: 100%; height: 100%; display: block; }
.m2-hero-content { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; text-align: center; }
.m2-hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.m2-hero-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #7bff9e; box-shadow: 0 0 10px #7bff9e; }
.m2-hero h1 { margin: 0; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -1px; }
.m2-hero h1 .hl { color: var(--brand); }
.m2-hero p { margin: 12px auto 0; max-width: 520px; color: var(--muted); font-size: clamp(14px, 1.6vw, 17px); font-weight: 500; line-height: 1.5; }
.m2-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.m2-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); padding: 11px 20px; border-radius: 14px; font-size: 16px; font-weight: 600; }

/* ---------- Search card (одна строка-«пилюля») ---------- */
/* ширина формы = ширине контента секций (напр. «Горячие билеты»): --maxw минус
   боковой padding .wrap (2×20px) → боковые отступы совпадают. */
.m2-search { position: relative; z-index: 5; margin: 20px auto 0; max-width: calc(var(--maxw) - 40px); padding: 0; }
/* Плоский стиль (как на мобиле): без тени, карточку очерчивает волосок-рамка
   (рамку задаём только на десктопе, см. @media min-width:641 — на мобиле карточка
   прозрачная, рамка там на .m2-fieldbox). */
.m2-search-card { position: relative; background: #fff; border-radius: 22px; box-shadow: none; padding: 8px; }
.m2-fields { display: flex; align-items: stretch; gap: 8px; }
/* Обёртки .m2-fieldbox/.m2-daterow нужны только для мобильной «связанной карточки».
   На десктопе/планшете они прозрачны (display:contents) — их дети остаются прямыми
   флекс-элементами .m2-fields, раскладка одной строки не меняется. */
.m2-fieldbox, .m2-daterow { display: contents; }
.m2-city-clear { display: none; }
.m2-field {
   position: relative; flex: 1.2; display: flex; align-items: center; gap: 12px;
   border: 0; border-radius: 18px; padding: 16px 16px; background: #fff; min-height: 0;
   transition: background .15s; cursor: text;
}
.m2-field.m2-date-field { flex: .85; }
.m2-field.f-pass { flex: .95; }
.m2-field.m2-date-field, .m2-field.f-pass { cursor: pointer; }
.m2-field:hover { background: #f6f7fb; }
.m2-field:not(.m2-date-field):focus-within, .m2-field.active { background: #f6f7fb; box-shadow: inset 0 0 0 2px rgba(255,90,60,.35); }
/* Поля дат: рамка только у .active (куда встанет дата, ставит JS) — иначе :focus-within
   кликнутого поля давал ВТОРУЮ рамку одновременно с полем-целью. Для клавиатуры фокус
   на триггере даты показываем отдельно (:focus-visible — мышиный клик его не включает). */
.m2-date-trigger:focus-visible { outline: 2px solid rgba(255,90,60,.5); outline-offset: 2px; border-radius: 8px; }
.m2-field-ic { flex: 0 0 auto; display: flex; }
.m2-field-body { flex: 1; min-width: 0; }
.m2-field label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9aa3b8; margin-bottom: 3px; }
.m2-field label .opt { text-transform: none; letter-spacing: 0; font-weight: 600; color: #b3bdca; }
.m2-field input, .m2-pass-trigger, .m2-date-trigger {
   width: 100%; border: 0; outline: 0; font-size: 16px; font-weight: 600; color: #1c2030;
   background: transparent; padding: 0; font-family: inherit;
}
/* Длинные названия городов не должны наезжать на iata-бейдж/свап — обрезаем троеточием. */
.m2-field input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 40px; }
.m2-field.has-swap input { padding-right: 46px; }
.m2-field input::placeholder { color: #9aa3b8; font-weight: 500; }
.m2-date-trigger.empty { color: #9aa3b8; font-weight: 500; }
.m2-iata { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 800; color: var(--gr); }
.m2-pass-trigger, .m2-date-trigger { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-field-div { width: 1px; background: #eceef5; margin: 14px 2px; flex: 0 0 auto; }

/* Крестик очистки даты — виден при открытом календаре у заполненного поля */
.m2-date-clear {
   display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   width: 26px; height: 26px; border: 0; border-radius: 50%; padding: 0;
   background: #eef0f5; color: #5b6177; font-size: 0; cursor: pointer; z-index: 2;
}
/* Крестик рисуем двумя палочками — идеально по центру независимо от шрифта. */
.m2-date-clear::before, .m2-date-clear::after {
   content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.7px;
   background: currentColor; border-radius: 2px;
}
.m2-date-clear::before { transform: translate(-50%, -50%) rotate(45deg); }
.m2-date-clear::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.m2-date-clear:hover { background: #ffe9e2; color: var(--gr); }
/* Крестик очистки виден всегда, когда дата выбрана (не только при открытом календаре) —
   можно убрать дату (напр. обратную) и запустить поиск, не открывая календарь. */
.m2-date-clear.has { display: inline-flex; }
/* Место под крестик резервируем ВСЕГДА (как padding-right у полей города под IATA),
   чтобы при открытии календаря/выборе даты текст не сдвигался — форма статична. */
.m2-date-field .m2-date-trigger { padding-right: 32px; }

.m2-swap {
   position: absolute; right: -21px; top: 50%; transform: translateY(-50%); z-index: 6;
   width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1.5px solid #e7e9f2;
   cursor: pointer; display: flex; align-items: center; justify-content: center; color: #5b6177;
   box-shadow: 0 3px 8px rgba(15,31,51,.10); font-size: 18px;
}
.m2-swap:hover { border-color: var(--gr); background: #fff5f2; color: var(--gr); }
.m2-field.has-swap { z-index: 4; }
/* Десктоп (одна строка): разводим «Откуда»/«Куда» шире, чтобы круглый своп ⇄ сидел
   в собственном промежутке между полями и не наезжал на IATA-бейдж (MOW). На планшете
   (2 колонки) и мобиле у свопа своя раскладка ниже — их не трогаем. */
@media (min-width: 1041px) {
   .m2-field.has-swap { margin-right: 34px; }
   .m2-swap { right: -42px; }
}

/* Десктоп/планшет: компактная строка без иконок и лейблов (по мотивам Aviasales).
   Лейблы остаются в DOM (их использует JS на мобиле), просто скрыты. Пустые даты
   подписываются самим значением («Туда»/«Обратно» — см. modern-search.js). */
@media (min-width: 641px) {
   .m2-field-ic { display: none; }
   .m2-field label { display: none; }
   .m2-field { padding: 15px 16px; }
   /* Плоская карточка формы: волосок-рамка вместо тени. */
   .m2-search-card { border: 1px solid #e7e9f2; }
}

/* Кнопка «Найти» — плоская (как на мобиле): сплошной цвет, без градиента и тени. */
.m2-submit {
   flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px;
   border: 0; border-radius: 18px; padding: 0 46px; cursor: pointer;
   background: var(--brand); color: #fff; font-size: 18px; font-weight: 700;
   box-shadow: none; transition: background .12s;
}
.m2-submit:hover { background: #ff4f2e; }
.m2-submit:active { background: var(--brand-dark); }

/* «Сравнить с поиском Aviasales» — прижат вправо (под кнопкой «Найти»), единообразно
   на всех страницах с формой. На мобиле — слева (см. @media ниже). */
.m2-check { display: flex; width: fit-content; align-items: center; gap: 12px; margin: 18px 0 0 auto; color: #4a4f63; font-size: 15px; font-weight: 500; cursor: pointer; user-select: none; }
/* Свой чекбокс: нативный (accent-color) в Chrome игнорирует border-radius и рисуется
   острым квадратом — в Safari скруглён. Рисуем сами: appearance:none + галочка на ::after,
   чтобы скруглённые углы были одинаковые во всех браузерах. */
.m2-check input {
   -webkit-appearance: none; appearance: none;
   width: 22px; height: 22px; margin: 0; flex: 0 0 auto;
   border: 1.5px solid #cfd6e2; border-radius: 7px; background: #fff;
   position: relative; cursor: pointer; transition: background .12s, border-color .12s;
}
.m2-check input:checked { background: var(--brand); border-color: var(--brand); }
.m2-check input:checked::after {
   content: ''; position: absolute; left: 7px; top: 3px;
   width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

/* ---------- Инлайн-обзор направления (появляется при выборе двух городов) ---------- */
.m2-direction { display: none; }
.m2-direction.open { display: block; max-width: 1040px; margin: 18px auto 0; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px -34px rgba(45,25,90,.28); padding: 22px 26px; animation: m2fade .2s ease; }
.m2-direction a { color: var(--ink); text-decoration: none; }
.m2-direction a:hover { text-decoration: none; }
.m2-dir-grid { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
.m2-dir-side-title { font-weight: 800; font-size: 20px; line-height: 1.12; margin-bottom: 14px; }
.m2-dir-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.m2-dir-item + .m2-dir-item { border-top: 1px solid var(--line); }
.m2-dir-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.m2-dir-item b { display: block; font-weight: 600; font-size: 15px; }
.m2-dir-item small { color: var(--muted); font-size: 13px; }
.m2-dir-main { min-width: 0; }
.m2-dir-sec-title { font-weight: 700; font-size: 15px; margin-bottom: 12px; }
@media (max-width: 760px) { .m2-dir-grid { grid-template-columns: 1fr; gap: 18px; } }
.m2-dir-load { color: var(--muted); padding: 14px 0; }
.m2-dir-head { font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.m2-dir-head b { font-weight: 800; }
.m2-dir-cards { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.m2-dir-cards::-webkit-scrollbar { display: none; }
.m2-dir-card { flex: 0 0 auto; min-width: 216px; background: #f6f7fb; border-radius: 16px; padding: 15px 17px; text-decoration: none; color: var(--ink); transition: background .15s; }
.m2-dir-card:hover { background: #eef1f8; text-decoration: none; }
.m2-dir-price { font-weight: 800; font-size: 20px; letter-spacing: -.01em; margin-bottom: 12px; }
.m2-dir-row { display: flex; align-items: center; gap: 10px; }
.m2-dir-av { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #e4e9f2; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.m2-dir-av.logo { background: #fff; border: 1px solid var(--line); }
.m2-dir-av img { width: 24px; height: 24px; object-fit: contain; }
.m2-dir-when { font-size: 13px; font-weight: 600; white-space: nowrap; }
.m2-dir-info { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.m2-dir-chart-head { margin: 22px 0 12px; font-weight: 700; font-size: 15px; }
.m2-dir-chart { display: flex; align-items: flex-end; gap: 4px; height: 140px; overflow-x: auto; scrollbar-width: none; }
.m2-dir-chart::-webkit-scrollbar { display: none; }
.m2-dir-bar { flex: 1 0 26px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; text-decoration: none; }
.m2-dir-bar .v { width: 68%; max-width: 22px; min-height: 4px; background: #dfe4ee; border-radius: 6px 6px 0 0; transition: background .15s; }
.m2-dir-bar:hover .v, .m2-dir-bar.min .v { background: var(--gr); }
.m2-dir-bar .d { font-size: 11px; color: var(--muted); margin-top: 5px; }
.m2-dir-chart { position: relative; }
.m2-dir-tip { position: absolute; transform: translateX(-50%); background: #1f2a44; color: #fff; padding: 7px 10px; border-radius: 10px; font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 5; box-shadow: 0 8px 20px -8px rgba(20,15,40,.5); }
.m2-dir-tip.on { opacity: 1; }
.m2-dir-tip .p { display: block; font-weight: 700; font-size: 13px; }
.m2-dir-tip .m { display: block; color: #c7d0e4; }
@media (max-width: 640px) { .m2-direction.open { margin: 16px 12px 0; padding: 18px 16px; } .m2-dir-bar { flex-basis: 20px; } .m2-dir-chart, .m2-dir-chart-head, .m2-dir-tip, .m2-dir-side { display: none; } }

/* Выпадашки поиска (автокомплит / пассажиры / календарь) наследуют
   оранжевый акцент новой формы — переопределяем --brand только внутри верха. */
.m2-top { --brand: #ff5a3c; --brand-dark: #ff4f2e; }
.m2-top .m2-ac-item:hover, .m2-top .m2-ac-item.active { background: #fff1ec; }
.m2-top .m2-ac-item .iata { background: #fff1ec; }
.m2-top .m2-class button.sel { background: #fff1ec; }
.m2-top .m2-cal-day:not(.sel):hover { background: #fff1ec; }
.m2-top .m2-cal-day.in-range { background: #ffe6df; }
.m2-top .m2-cal-day.sel { box-shadow: 0 6px 14px rgba(255,90,60,.4); }

/* ---------- Autocomplete ---------- */
.m2-ac {
   position: absolute; left: 0; top: calc(100% + 7px); z-index: 60; width: 340px; max-width: calc(100vw - 40px);
   background: #fff; border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; display: none;
}
.m2-ac.open { display: block; }
.m2-ac-item { display: flex; align-items: center; gap: 10px; padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--line); }
.m2-ac-item:last-child { border-bottom: 0; }
.m2-ac-item:hover, .m2-ac-item.active { background: #eef4ff; }
.m2-ac-item .pin { color: var(--brand); opacity: .7; }
.m2-ac-item .city { font-weight: 700; }
.m2-ac-item .country { font-size: 12.5px; color: var(--muted); }
.m2-ac-item .iata { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--brand); background: #eef4ff; padding: 4px 8px; border-radius: 7px; }
/* Вложенная строка аэропорта под городом: отступ, приглушённый вид, меньший «билетик» IATA */
.m2-ac-air { padding-left: 40px; padding-top: 9px; padding-bottom: 9px; }
.m2-ac-air .pin { color: var(--muted); opacity: .55; font-size: 12px; }
.m2-ac-air .city { font-weight: 500; font-size: 13.5px; color: #414b60; }
.m2-ac-air .iata { color: #5b6177; background: #eef0f5; font-weight: 700; }

/* ---------- Полноэкранное окно выбора города (мобила) ----------
   Открывается по тапу на «Откуда»/«Куда» (js/modern-search.js). Плоский стиль.
   На десктопе не показывается (JS снимает [hidden] только на ≤640px). */
.m2-picker { position: fixed; inset: 0; z-index: 600; background: #fff; flex-direction: column; }
.m2-picker[hidden] { display: none; }
.m2-picker:not([hidden]) { display: flex; }
.m2-picker-head { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; border-bottom: 1px solid #eef0f5; }
.m2-picker-back { flex: 0 0 auto; width: 40px; height: 40px; border: 0; background: transparent; color: #1c2030; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.m2-picker-inp { flex: 1; display: flex; align-items: center; gap: 8px; background: #f4f6fb; border-radius: 12px; padding: 10px 12px; min-width: 0; }
.m2-picker-search { flex: 0 0 auto; }
.m2-picker-inp input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; font-weight: 500; color: #1c2030; font-family: inherit; }
.m2-picker-inp input::placeholder { color: #9aa3b8; font-weight: 400; }
.m2-picker-clear { flex: 0 0 auto; display: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #e2e6ee; color: #5b6177; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.m2-picker-clear.has { display: inline-flex; align-items: center; justify-content: center; }
.m2-picker-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.m2-pk-city, .m2-pk-air { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: #fff; cursor: pointer; font-family: inherit; padding: 13px 16px; border-bottom: 1px solid #f1f3f8; }
.m2-pk-city:active, .m2-pk-air:active { background: #f6f7fb; }
.m2-pk-pin { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #fff2ee; color: #ff5a3c; display: flex; align-items: center; justify-content: center; }
.m2-pk-tx { flex: 1; min-width: 0; }
.m2-pk-tx b { display: block; font-size: 15px; font-weight: 600; color: #1c2030; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-pk-tx s { display: block; font-size: 13px; color: #9aa3b8; text-decoration: none; }
.m2-pk-iata { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #c23d24; background: #fff2ee; border-radius: 6px; padding: 4px 8px; }
.m2-pk-air { padding-left: 58px; }
.m2-pk-air .m2-pk-tx b { font-size: 14px; font-weight: 500; color: #414b60; }
.m2-pk-air .m2-pk-iata { color: #5b6177; background: #eef0f5; }
.m2-picker-empty { padding: 30px 16px; text-align: center; color: #9aa3b8; font-weight: 500; }

/* ---------- Passengers popover ---------- */
.m2-pass-pop {
   position: absolute; right: 0; top: calc(100% + 7px); z-index: 60; width: 310px; max-width: calc(100vw - 40px);
   background: #fff; border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); padding: 10px; display: none;
}
.m2-pass-pop.open { display: block; }
.m2-pass-row { display: flex; align-items: center; padding: 11px 8px; border-bottom: 1px solid var(--line); }
.m2-pass-row .t { flex: 1; }
.m2-pass-row .t b { display: block; font-size: 15px; }
.m2-pass-row .t span { font-size: 12px; color: var(--muted); }
.m2-step { display: flex; align-items: center; gap: 12px; }
.m2-step button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-size: 19px; line-height: 1; color: var(--brand); cursor: pointer; }
.m2-step button:disabled { color: #cdd5e0; cursor: default; }
.m2-step .n { width: 20px; text-align: center; font-weight: 800; }
.m2-class { display: flex; gap: 8px; padding: 12px 8px 4px; }
.m2-class button { flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--muted); }
.m2-class button.sel { border-color: var(--brand); color: var(--brand); background: #eef4ff; }

/* Шапка/кнопки мобильных шторок (календарь/пассажиры). По умолчанию скрыты —
   показываются только на ≤640px, где попапы становятся полноэкранными. */
.m2-sheet-head { display: none; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.m2-sheet-title { font-size: 18px; font-weight: 800; color: var(--ink); }
.m2-sheet-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: #eef0f5; color: #333; font-size: 22px; line-height: 1; cursor: pointer; }
.m2-sheet-close:hover { background: #e3e6ee; }
.m2-sheet-done { display: none; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ff7a52, #ff4f2e); color: #fff; font-weight: 700; font-size: 17px; padding: 15px; cursor: pointer; align-items: center; justify-content: center; }

/* ---------- Большой календарь (inline) ---------- */
.m2-cal { display: none; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 16px; }
.m2-cal.open { display: block; animation: m2fade .18s ease; }
@keyframes m2fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.m2-cal-nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 12px; } /* стрелки месяцев — справа */
.m2-cal-nav .navbtn { width: 38px; height: 38px; border-radius: 11px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-size: 18px; color: var(--ink); }
.m2-cal-nav .navbtn:hover { border-color: var(--brand); color: var(--brand); }
.m2-cal-nav .hint { margin-left: auto; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.m2-cal-months { display: flex; gap: 36px; }
.m2-cal-month { flex: 1; min-width: 0; }
.m2-cal-title { text-align: center; font-weight: 800; font-size: 16px; margin-bottom: 12px; text-transform: capitalize; }
.m2-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.m2-cal-week span { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; padding: 4px 0; }
.m2-cal-week span.we { color: var(--accent); }
.m2-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.m2-cal-day { height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 11px; cursor: pointer; font-weight: 700; font-size: 15px; position: relative; }
.m2-cal-day:not(.sel):hover { background: #eef4ff; }
.m2-cal-day.empty { pointer-events: none; }
.m2-cal-day.we { color: var(--accent); }
/* .past ПОСЛЕ .we: прошедший день всегда серый, даже если это суббота/воскресенье */
.m2-cal-day.past { color: #cdd5e0; pointer-events: none; }
.m2-cal-day.in-range { background: #e8f1ff; border-radius: 0; }
.m2-cal-day.sel { background: var(--brand); color: #fff; box-shadow: 0 6px 14px rgba(255,90,60,.4); }
.m2-cal-day.sel.start { border-radius: 11px 0 0 11px; }
.m2-cal-day.sel.end { border-radius: 0 11px 11px 0; }
.m2-cal-day.sel.single { border-radius: 11px; }
.m2-cal-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.m2-cal .oneway { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.m2-cal .oneway input { width: 17px; height: 17px; accent-color: var(--brand); }
.m2-cal-nav .oneway { margin-left: auto; }
.m2-cal-done { margin-left: auto; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 800; font-size: 15.5px; padding: 15px 38px; cursor: pointer; }
.m2-cal-done:disabled { background: var(--line); color: var(--muted); cursor: default; } /* активна после выбора первой даты */

/* ---------- Stats band ---------- */
.m2-stats { background: var(--ink); }
.m2-stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 30px 20px; }
.m2-stat { color: #fff; text-align: center; }
.m2-stat b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(135deg, #fff, #9fd0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.m2-stat span { font-size: 13.5px; color: #9fb0c8; }

/* ---------- Sections ---------- */
.m2-section { padding: 56px 0; }
.m2-section h2 { font-size: clamp(23px, 3.6vw, 32px); margin: 0 0 6px; font-weight: 800; letter-spacing: -.02em; }
.m2-section .sub { color: var(--muted); margin: 0 0 28px; font-size: 16px; }

.m2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.m2-stepc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: relative; }
.m2-stepc .num { width: 46px; height: 46px; border-radius: 13px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; margin-bottom: 14px; box-shadow: 0 8px 18px rgba(255,90,60,.32); }
.m2-stepc h3 { margin: 0 0 7px; font-size: 18px; }
.m2-stepc p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ---------- Destination cards ---------- */
.m2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.m2-dest { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 250px; display: block; color: #fff !important; box-shadow: var(--shadow); background: #1c2c44; transition: transform .18s, box-shadow .18s; }
.m2-dest:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.m2-dest .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s ease; }
.m2-dest:hover .img { transform: scale(1.07); }
.m2-dest .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,16,33,.92) 4%, rgba(6,16,33,.45) 45%, rgba(6,16,33,.1) 75%); }
.m2-dest .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; z-index: 2; }
.m2-dest .city { font-size: 21px; font-weight: 800; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); letter-spacing: -.01em; }
.m2-dest .date { font-size: 13px; color: rgba(255,255,255,.82); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.m2-dest .price { display: inline-block; margin-top: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 7px 13px; border-radius: 100px; font-size: 15px; font-weight: 800; color: #fff; }
.m2-dest .price small { font-weight: 600; opacity: .85; }

/* ---------- Карусели: горящие билеты / на выходные ---------- */
.m2-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.m2-sec-head h2 { margin: 0 0 4px; }
.m2-sec-head .sub { margin: 0; }
.m2-fire { font-size: .82em; }
.m2-cnav { display: flex; gap: 10px; flex: 0 0 auto; }
.m2-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ink); transition: border-color .15s, color .15s; }
.m2-arrow:hover { border-color: var(--brand); color: var(--brand); }

.m2-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: 4px 2px 6px; scrollbar-width: none; }
.m2-carousel::-webkit-scrollbar { display: none; }
.m2-carousel > * { scroll-snap-align: start; flex: 0 0 auto; }

/* точки-пагинация */
.m2-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.m2-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #ccd6e2; cursor: pointer; transition: width .2s ease, background .2s ease; }
.m2-dot.active { width: 22px; border-radius: 5px; background: var(--brand); }

/* «Горячие билеты»: без фона/паттерна (на белом). Оставлены ссылка в шапке и
   оранжевые точки-пагинация. Верхний отступ уменьшен — блок поднят выше. */
.m2-hot-sec { padding-top: 26px; }
.m2 a.m2-sec-link { flex: 0 0 auto; align-self: center; color: var(--gr); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.m2 a.m2-sec-link:hover { color: var(--gr); text-decoration: underline; text-decoration-color: var(--gr); }
.m2-hot-sec .m2-dot.active { background: var(--gr); }

/* Карточка-билет (горящие) — светлая, оранжевый ценник, бейдж-лейбл сверху */
/* Запас, чтобы горизонтальный скроллер не подрезал hover-тень карточек.
   Отрицательные поля ложатся в padding .wrap (20px) — скролла страницы нет.
   scroll-padding-left обязателен: без него scroll-snap стартует со scrollLeft,
   равным padding-left, «съедает» левый отступ и первая карточка уезжает влево
   под заголовок. С ним первая карточка ровно под заголовком, тень цела. */
.m2-hot-sec .m2-carousel { padding: 14px 20px 32px; margin: -14px -20px -32px; scroll-padding-left: 20px; }
.m2-ticket { position: relative; width: calc((100% - 48px) / 4); min-width: 250px; background: #fff; border: 1px solid #e9edf3; border-radius: 18px; padding: 16px 18px 18px; box-shadow: none; display: block; color: #1f2733; transition: transform .15s, border-color .15s, box-shadow .15s; }
.m2-ticket:hover { transform: translateY(-3px); border-color: #ffd3c8; box-shadow: 0 8px 20px rgba(255,90,60,.12); text-decoration: none; }
.m2-ticket-tag { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8a94a3; margin-bottom: 10px; }
/* Бейдж-лейбл: 3 вида — down (зелёный), hot (оранжевый), new (бирюзовый) */
.m2-ticket-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px; margin-bottom: 11px; }
.m2-ticket-badge .ic { font-size: 12px; line-height: 1; }
.m2-ticket-badge.down { background: #e6f6ec; color: #1a8a45; }
.m2-ticket-badge.hot  { background: #fff0ec; color: #c23c22; }
.m2-ticket-badge.new  { background: #e6f4f7; color: #12839c; }
/* Строка авиакомпании: кружок-логотип фирменного цвета + название */
.m2-ticket-air { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.m2-ticket-av { position: relative; overflow: hidden; flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; }
.m2-ticket-av .l { position: relative; z-index: 1; }
.m2-ticket-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.m2-ticket-airname { font-size: 13.5px; font-weight: 600; color: #6b7482; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-ticket-pricerow { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.m2-ticket-price { font-size: 24px; font-weight: 800; color: var(--gr); letter-spacing: -.02em; }
.m2-ticket-old { font-size: 14.5px; font-weight: 600; color: #b3bcc9; text-decoration: line-through; }
.m2-ticket-route { margin-top: 8px; font-size: 16px; font-weight: 700; color: #1f2733; }
.m2-ticket-route .pl { color: #9aa5b4; margin: 0 5px; }
.m2-ticket-meta { margin-top: 5px; font-size: 13.5px; font-weight: 500; color: #8a94a3; }
.m2-ticket-meta .sep { color: #c9d0da; margin: 0 6px; }
.m2-ticket-stops.direct { color: #1a8a45; font-weight: 600; }

/* Блок «на выходные» — во всю ширину, светлый travel-стиль с тёплыми акцентами */
.m2-weekend-sec { padding: 18px 0; }
.m2-weekend {
   position: relative;
   border-radius: 28px;
   overflow: hidden;
   padding: 44px;
   color: var(--ink);
   background: linear-gradient(135deg, #fbfcff, #eef3fb);
   border: 1px solid rgba(255,90,60,.10);
   box-shadow: 0 18px 44px -22px rgba(20,25,60,.32), 0 4px 14px -8px rgba(20,25,60,.16);
}
.m2-weekend-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.m2-weekend-blob.a { top: -100px; right: 8%; width: 300px; height: 300px;
   background: radial-gradient(circle, rgba(255,122,69,.22), transparent 68%); }
.m2-weekend-blob.b { bottom: -120px; left: 28%; width: 320px; height: 320px;
   background: radial-gradient(circle, rgba(67,176,228,.16), transparent 68%); } /* мягкий блоб цвета логотипа */

.m2-weekend-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: center; }

.m2-weekend-head { display: flex; flex-direction: column; align-items: flex-start; }
.m2-weekend-badge { font-size: 12px; font-weight: 700; letter-spacing: .04em;
   color: var(--accent); background: rgba(255,122,69,.12); padding: 7px 12px; border-radius: 999px; }
.m2-weekend-head h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 16px 0 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.04; color: var(--ink); }
.m2-weekend-head h2 .grad { background: linear-gradient(100deg, #ff7a45, #ff4d6d);
   -webkit-background-clip: text; background-clip: text; color: transparent; }
.m2-weekend-head p { margin: 16px 0 24px; color: var(--muted); font-size: 16px; max-width: 300px; }
.m2 a.m2-weekend-btn, .m2-weekend-btn {
   display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer;
   background: linear-gradient(100deg, #ff7a45, #ff4d6d);
   color: #fff; font-size: 16px; font-weight: 700;
   padding: 16px 26px; border-radius: 16px;
   box-shadow: 0 12px 28px -10px rgba(255,90,80,.55);
   transition: transform .18s ease;
}
.m2 a.m2-weekend-btn:hover, .m2-weekend-btn:hover { transform: translateY(-2px); text-decoration: none; color: #fff; }
.m2-weekend-btn:active { transform: translateY(0); }
.m2-weekend-btn .ar { font-size: 18px; }

.m2-weekend-scroller { position: relative; min-width: 0; }
.m2-weekend .m2-carousel { gap: 18px; padding: 14px 24px 36px; margin: -14px -24px -36px; scroll-padding-left: 24px; }

.m2-wk-card { display: block; width: 256px; min-width: 256px; background: #fff; color: var(--ink);
   border: 0; border-radius: 22px; padding: 13px; overflow: hidden;
   box-shadow: 0 10px 26px -16px rgba(20,24,38,.3); transition: transform .25s ease, box-shadow .25s ease; }
.m2-wk-card:hover { text-decoration: none; transform: translateY(-7px); box-shadow: 0 20px 40px -20px rgba(20,24,38,.42); }
.m2-wk-img { position: relative; height: 190px; border-radius: 16px; overflow: hidden;
   background-size: cover; background-position: center; background-color: #eef1f5; }
.m2-wk-city { position: absolute; left: 12px; top: 12px; font-size: 14px; font-weight: 800; color: #fff;
   text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.m2-wk-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 14px 6px 6px; }
.m2-wk-info { min-width: 0; }
.m2-wk-route { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-wk-price { margin-top: 8px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.m2-wk-date { margin-top: 6px; font-size: 13px; color: var(--muted); }
.m2-wk-go { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
   background: linear-gradient(135deg, #ff7a45, #ff4d6d); color: #fff;
   display: flex; align-items: center; justify-content: center; font-size: 18px;
   box-shadow: 0 8px 18px -6px rgba(255,90,80,.6); }

.m2-wk-arrow { position: absolute; top: 38%; width: 46px; height: 46px; border-radius: 50%; border: 0;
   background: #fff; color: var(--accent); font-size: 24px; line-height: 1; cursor: pointer;
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 10px 24px -8px rgba(20,24,38,.3); transition: transform .2s ease; z-index: 2; }
.m2-wk-arrow:hover { transform: scale(1.08); }
.m2-wk-arrow.prev { left: -10px; }
.m2-wk-arrow.next { right: -10px; }

@media (max-width: 900px) {
   .m2-weekend-grid { grid-template-columns: 1fr; gap: 26px; }
   .m2-wk-arrow { display: none; }
   .m2-ticket { width: 70%; min-width: 230px; }
}
@media (max-width: 640px) {
   .m2-weekend { padding: 28px 20px; }
   .m2-ticket { width: 80%; }
   .m2-wk-card { width: 80%; min-width: 0; }
}

/* ---------- Текстовый блок «Поиск дешёвых авиабилетов» ---------- */
.m2-textcols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-bottom: 30px; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.m2-textcols p { margin: 0; }
@media (max-width: 640px) { .m2-textcols { grid-template-columns: 1fr; gap: 14px; margin-bottom: 26px; } }
.m2-gr { display: inline-block; width: 11px; height: 11px; margin-left: 4px; vertical-align: baseline; }

/* ---------- Популярные страны/города/авиакомпании (данные get_footer_info_menu) ----------
   Единый блок над футером (tpl/m2-footer.php) на главной, лендингах и статических
   страницах; на выдаче выключен флагом $M2_FOOTER_LINKS. Вид и списки — как были
   на главной; текущая страница у функции — .item.sel (жирная, без ссылки). */
.m2-links-sec { padding: 0 0 56px; }
.m2-links { display: flex; flex-wrap: wrap; gap: 28px; border-top: 1px solid var(--line); padding-top: 30px; }
.m2-links .cell { width: auto !important; flex: 1 1 240px; min-width: 0; }
.m2-links .cell[style*="3%"] { display: none !important; }
.m2-links b { display: block; font-size: 16px !important; font-weight: 800; margin-bottom: 6px; color: var(--ink); }
.m2-links br { display: none; }
.m2-links .footer-menu { max-height: none !important; margin-top: 0 !important; line-height: 1.65; }
.m2-links .footer-menu .item { display: inline-block; margin: 0 12px 1px 0; padding: 0; }
.m2-links .footer-menu .item.sel { font-weight: 700; color: var(--ink); }
.m2-links a { color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(102,117,140,.45); }
.m2-links a:hover { color: var(--brand); text-decoration-color: var(--brand); }
.m2-links .cell > div:last-child { margin-top: 10px !important; }
.m2-links a.blue-dark { color: var(--brand); font-weight: 700; text-decoration-color: rgba(255,90,60,.4); }

/* --- Футер, оформление v1 (2026-07-13): направления — плитки-кнопки сверху.
   Категории (Страны/Города/Авиакомпании) оставлены КАК РАНЬШЕ — инлайновые с
   переносом (вертикальный список растягивал страницу — откатили 13.07).
   Всё в скоупе .m2-links, поэтому старый basic-footer.php не затрагивается. --- */
/* Категории (Страны/Города/Авиакомпании) оставляем КАК РАНЬШЕ — инлайновые
   пункты с переносом (правило .m2-links .footer-menu .item выше), НЕ столбиком:
   вертикальный список растягивал страницу. Здесь их не трогаем. */
/* Полноширинная строка «Популярные направления» с плитками. */
.m2-links .m2-dir { flex: 1 1 100% !important; border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 4px; }
.m2-links .m2-dir .footer-menu { display: flex; flex-wrap: wrap; gap: 10px; line-height: 1.2; }
.m2-links .m2-dir .item { display: inline-flex; margin: 0 !important; }
.m2-links .m2-dir .item a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: border-color .15s, color .15s, box-shadow .15s; }
.m2-links .m2-dir .item a:hover { border-color: var(--brand); color: var(--brand) !important; box-shadow: 0 4px 14px rgba(15,31,51,.06); }
.m2-links .m2-dir .m2-dir-arr { color: var(--brand); font-weight: 800; }
.m2-links .m2-dir .item a:hover .m2-dir-arr { color: inherit; }

.m2-social { margin-top: 32px; }

/* ---------- Footer ---------- */
/* Дизайн «Небо»: мягкий градиент из голубого в песочный, паттерн-облака/самолёты
   в голубых тонах, оранжевый акцент бренда, акцент лого-голубым #43b0e4. */
.m2-footer {
   background: linear-gradient(180deg, #eaf4fa 0%, #f4efe7 100%);
   color: #3f4a52; padding: 46px 0; margin-top: 0;
   border-top: 1px solid #d6e6ef;
   position: relative;
}
.m2-footer::before {
   content: ""; position: absolute; inset: 0; pointer-events: none;
   background: url('/img/footer-pattern-sky.svg') repeat;
   background-size: 300px auto; opacity: .85;
}
.m2-footer .wrap { position: relative; }
.m2-footer .cols {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr;
   gap: 44px;
}
.m2-footer-brand { max-width: 260px; }
.m2-footer-logo { font-size: 18px; font-weight: 700; color: #25333c; cursor: pointer; }
.m2-footer-plane { color: #ff5a3c; }
.m2-footer-tag { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: #5c6a72; }
.m2-footer-copy { margin: 16px 0 0; font-size: 12.5px; color: #8ea0aa; }
.m2-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.m2-footer-head { font-weight: 600; color: #25333c; margin-bottom: 2px; }
.m2-footer-col a { color: #3f4a52; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #bcdcec; transition: color .15s, text-decoration-color .15s; }
.m2-footer-col a:hover { color: #ff5a3c; text-decoration-color: #ff5a3c; }
/* Текущая страница в колонках футера — жирная, без ссылки (перелинковка) */
.m2-footer-col b.m2f-cur { font-weight: 600; color: #25333c; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
   /* строку поиска складываем в сетку 2×N */
   .m2-fields { flex-wrap: wrap; }
   .m2-field { flex: 1 1 calc(50% - 4px); }
   .m2-field-div { display: none; }
   .m2-submit { flex: 1 1 100%; padding: 16px 0; }
   /* в 2-колоночной раскладке кнопка свопа висит на правом крае «Откуда» —
      сдвигаем бейдж IATA (MOW) левее, чтобы не перекрывался свопом */
   .m2-field.has-swap .m2-iata { right: 54px; }
}
@media (max-width: 900px) {
   .m2-hero { padding: 4px 4px 0; }
   .m2-steps { grid-template-columns: 1fr; }
   .m2-grid { grid-template-columns: repeat(2, 1fr); }
   .m2-stats .wrap { grid-template-columns: repeat(2, 1fr); }
   .m2-cal-months { gap: 0; }
   .m2-cal-month:nth-child(2) { display: none; }
}
@media (max-width: 640px) {
   .m2-top .wrap { padding: 0 14px; }
   /* Футер: колонки в стопку */
   .m2-footer { padding: 34px 0; }
   .m2-footer .cols { grid-template-columns: 1fr; gap: 26px; }
   .m2-footer-brand { max-width: none; }
   .m2-nav { display: none; }
   .m2-nav.open { display: flex; position: absolute; top: 72px; right: 0; left: 0; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 6px 16px; z-index: 60; }
   .m2-nav.open a { padding: 14px 0; border-bottom: 1px solid var(--line); }
   .m2-burger { display: flex; }
   .m2-header { padding: 18px 4px; }
   .m2-hero { padding: 2px 2px 0; text-align: center; }
   .m2-hero h1 { font-size: 24px; letter-spacing: -.4px; }
   .m2-hero p { display: none; }
   .m2-hero-content { max-width: none; }
   /* 6px + 14px padding .m2-top .wrap = 20px по бокам, как у «Горячих билетов». */
   .m2-search { margin: 24px 6px 0; }
   /* --- Мобильная форма: связанная карточка (плоский стиль) ---
      Карточка .m2-fieldbox: строка «Откуда» (самолёт взлёт + ↕ своп), волосок,
      строка «Куда» (самолёт посадка + × очистка), волосок, ряд «дата | пассажиры».
      Кнопка «Найти» — отдельным плоским блоком под карточкой.
      Единый источник для главной и выдачи. Без теней и градиентов. */
   .m2-search-card { background: transparent; border-radius: 0; box-shadow: none; padding: 0; }
   .m2-fields { flex-direction: column; gap: 10px; }

   /* overflow НЕ прячем: иначе выпадашка автокомплита обрежется краем карточки.
      Скругление внешних углов задаём самим крайним полям (ниже), чтобы фон при
      фокусе не вылезал за скруглённую рамку. */
   .m2-fieldbox { display: flex; flex-direction: column; background: #fff; border: 1px solid #e7e9f2; border-radius: 16px; }
   .m2-daterow { display: flex; border-top: 1px solid #eef0f5; }

   /* Поля внутри карточки — плоские, без своих рамок/фона. */
   .m2-fieldbox .m2-field { flex: 1 1 auto; border-radius: 0; background: transparent; padding: 12px 14px; gap: 11px; }
   #m2-origin-field { border-radius: 16px 16px 0 0; }
   .m2-fieldbox .m2-field:hover { background: transparent; }
   .m2-fieldbox .m2-field:focus-within, .m2-fieldbox .m2-field.active { background: #f6f7fb; box-shadow: none; }
   #m2-destination-field { border-top: 1px solid #eef0f5; }

   /* Лейблы полей не показываем — плейсхолдер/значение достаточно. */
   .m2-field label { display: none; }
   .m2-field input, .m2-pass-trigger, .m2-date-trigger { font-size: 15px; font-weight: 500; }
   #m2-origin, #m2-destination { padding-right: 40px; } /* место под ↕ / × */

   /* Самолётики взлёт/посадка в круглых фишках. */
   .m2-city-ic { display: flex; width: 32px; height: 32px; border-radius: 50%; background: #fff2ee; align-items: center; justify-content: center; }
   /* Иконки календаря/пассажиров — простыми (без фишки). */
   .m2-chip-ic { display: flex; }

   /* IATA-код — серым инлайн сразу после города («Город, NBC»); позицию (left) задаёт JS. */
   .m2-iata, .m2-field.has-swap .m2-iata { right: auto; left: 0; color: #9aa3b8; font-size: 15px; font-weight: 500; pointer-events: none; }

   /* Своп ↕ — в правом краю строки «Откуда», плоский. */
   .m2-swap { right: 12px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(90deg); width: 30px; height: 30px; background: transparent; border: 0; box-shadow: none; color: #8a93a8; font-size: 16px; }
   .m2-swap:hover { background: transparent; color: #ff5a3c; transform: translateY(-50%) rotate(90deg); }

   /* Крестик очистки города «Куда» (виден, когда есть значение — класс .has из JS). */
   .m2-city-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: #eef0f5; color: #5b6177; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
   .m2-city-clear.has { display: inline-flex; }
   .m2-city-clear:hover { background: #ffe9e2; color: #ff5a3c; }

   /* Нижний ряд «дата | пассажиры» — две ячейки с вертикальным волоском. */
   #m2-return-field { display: none; }
   .m2-field-div { display: none; }
   #m2-depart-field { flex: 1 1 50%; border-radius: 0 0 0 16px; }
   #m2-pass-field { flex: 1 1 50%; border-left: 1px solid #eef0f5; border-radius: 0 0 16px 0; }
   .m2-date-clear { display: none; }                    /* даты меняем через календарь */
   .m2-date-field .m2-date-trigger { padding-right: 0; }

   /* Кнопка «Найти» — плоская, отдельным блоком снизу. */
   .m2-submit { width: 100%; padding: 15px 0; border-radius: 14px; background: #ff5a3c; box-shadow: none; font-size: 16px; font-weight: 700; }
   .m2-submit:hover, .m2-submit:active { background: #ff5a3c; }

   .m2-check { margin-left: 14px; }
   .m2-grid { grid-template-columns: 1fr; }
   .m2-ac, .m2-pass-pop { width: 100%; }
   .m2-cal-day { height: 44px; }

   /* шторка заперта в контексте наложения .m2-search (z-index:5, ниже шапки) —
      пока открыта, поднимаем .m2-search над шапкой */
   body.m2-sheet-open .m2-search { z-index: 200; }

   /* --- Пассажиры: полноэкранная шторка --- */
   .m2-pass-pop.open {
      position: fixed; inset: 0; width: 100%; max-width: none; height: 100%;
      border: 0; border-radius: 0; z-index: 300; padding: 0;
      display: flex; flex-direction: column; overflow-y: auto;
   }
   .m2-pass-pop .m2-sheet-head { display: flex; }
   .m2-pass-pop .m2-sheet-done { display: flex; margin: auto 20px calc(20px + env(safe-area-inset-bottom)); }
   .m2-pass-pop .m2-pass-row { padding: 18px 20px; }
   .m2-pass-pop .m2-pass-row .t b { font-size: 17px; }
   .m2-pass-pop .m2-step button { width: 40px; height: 40px; font-size: 22px; }
   .m2-pass-pop .m2-class { padding: 8px 20px 4px; flex-direction: column; gap: 10px; }
   .m2-pass-pop .m2-class button { text-align: left; padding: 15px 16px; font-size: 15px; }

   /* --- Календарь: полноэкранная шторка (вертикальный скролл месяцев) --- */
   .m2-cal.open {
      position: fixed; inset: 0; z-index: 300; background: #fff;
      margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden;
   }
   .m2-cal .m2-sheet-head { display: flex; }
   .m2-cal-nav { padding: 12px 16px 4px; margin-bottom: 0; }
   .m2-cal-nav .navbtn { display: none; }
   .m2-cal-nav .oneway { margin-left: 0; }
   .m2-cal-months { flex-direction: column; gap: 0; overflow-y: auto; flex: 1 1 auto; padding: 4px 16px 16px; }
   .m2-cal.open .m2-cal-month { display: block; margin-bottom: 22px; }
   .m2-cal-foot { position: sticky; bottom: 0; background: #fff; margin-top: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
   .m2-cal-done { width: 100%; }
}