@charset "UTF-8";
/* ==========================================================================
   МинскЛайн — Booking UI 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Site-shell components
   Components that live outside the booking widget (hero, announcement
   banner, footer) but were reworked as part of the same redesign.
   -------------------------------------------------------------------------- */

/* --- Skip link -------------------------------------------------------------
   Появляется только при фокусе с клавиатуры (:focus-visible), уходит за
   пределы экрана при уходе фокуса. Позиционируется relative, а не fixed:
   поверх .fixed-top иначе шапка перекрывала бы её. */
.bk-skip {
  position: relative;
  z-index: 2000;
  display: inline-block;
  margin: 0.5rem 0 0 0.75rem;
  padding: 0.625rem 1rem;
  border-radius: 0 0 10px 0;
  background: #0b1220;
  color: #fff;
  font: 600 0.9375rem/1.2 var(--bk-font-sans, "Open Sans", system-ui, sans-serif);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.15s ease-out;
}

.bk-skip:focus {
  transform: translateY(0);
}

.bk-skip:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}

/* --- Hero ---------------------------------------------------------------- */
.bk-hero-title {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  color: #0b1220;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
  justify-items: center;  /* «МинскЛайн» и caption по одной центрированной оси */
}

/* Пара «обещание + маршрут»: flex-колонка шириной в самую длинную строку,
   а обе строки центрируются по одной оси. На телефоне элемент растягивается
   на колонку, и центрирование совпадает с прежним text-align: center. На
   десктопе (justify-self: start в блоке 992px) он сжимается по содержимому,
   и «Бобруйск — Минск» встаёт ровно под центром фразы, а не под центром
   колонки. */
.bk-hero-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bk-hero-brand {
  font-size: clamp(2.5rem, 1.6rem + 4.6vw, 4.25rem);
  font-weight: 800;
  background: linear-gradient(100deg, #1d4ed8 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bk-hero-sub {
  font-size: clamp(1.125rem, 0.95rem + 1.1vw, 1.875rem);
  font-weight: 700;
  color: #33415c;
  letter-spacing: -0.02em;
}

/* --- Hero route -----------------------------------------------------------
   The sub-line carries the promise ("regular trips between cities"); the route
   is the reason to act on it, so it gets its own grid row. Only the two city
   names take the gradient and the dash stays muted, so the names read as the
   content and the dash as punctuation. A step smaller than the sub-line, so
   the h1 still resolves brand > promise > route.
   Gradient is repeated from .bk-hero-brand rather than introduced, to keep
   the hero to a single accent. */
.bk-hero-route {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 0.25rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.75vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.bk-hero-route-name {
  background: linear-gradient(100deg, #1d4ed8 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* aria-hidden in the markup: announced as "Бобруйск Минск", without a dash. */
.bk-hero-route-sep {
  color: #7c8db5;
  font-weight: 600;
}

.bk-lead {
  margin: 1.5rem 0 0;
  color: #33415c;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  font-weight: 600;
}

/* --- News block -----------------------------------------------------------
   Новость о цене стоит перед модулем брони: человек узнаёт про неё именно
   тогда, когда собирается ехать.

   Цвета — литералами, как у .bk-store-btn (см. комментарий там): токены
   --bk-* объявлены внутри .reservation_form, а этот блок живёт снаружи.
   Вне формы переменная не определена, и объявление отбрасывается на
   computed-value time — фон тихо становится прозрачным. Именно так первый
   вариант этого блока и потерял карточку: правила были в CSSOM, а
   getComputedStyle отдавал background: transparent и border-radius: 0. */
.bk-news {
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.bk-news-card {
  display: grid;
  gap: clamp(1.125rem, 0.75rem + 1.6vw, 2rem);
  align-items: center;
  padding: clamp(1.125rem, 0.85rem + 1.2vw, 1.75rem);
  background: #ffffff;
  border: 1px solid #dfe6f2;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgb(11 18 32 / 0.04), 0 4px 12px rgb(11 18 32 / 0.06);
}

@media (min-width: 768px) {
  /* Тексту 1.15, картинке 0.85: текста больше, и он должен остаться
     главным. minmax(0, …) обязателен — иначе длинное слово в абзаце
     растолкнет колонку и даст горизонтальную прокрутку (кейс 9.23). */
  .bk-news-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.bk-news-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  margin-block-end: 0.625rem;
  border-radius: 50rem;
  background: #eef3ff;
  color: #1d4ed8;
  font-size: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bk-news-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.25rem, 1.14rem + 0.6vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #0b1220;
}

/* Цена и дата — смысловая суть новости, поэтому выделены цветом. */
.bk-news-lead {
  margin: 0 0 0.625rem;
  font-size: clamp(1.0625rem, 1rem + 0.36vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  color: #1d4ed8;
}

.bk-news-text {
  margin: 0 0 0.5rem;
  font-size: clamp(0.9375rem, 0.9rem + 0.24vw, 1.0625rem);
  line-height: 1.6;
  color: #33415c;
}

.bk-news-text:last-child {
  margin-block-end: 0;
}

.bk-news-media {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #f8fafc;
}

.bk-news-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  /* Пропорции задаёт width/height в разметке, и реальный кадр может быть
     любой: cover не даёт картинке вытянуть карточку по высоте. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Hero badge -----------------------------------------------------------
   Центрируется по блоку заголовка. Замерено до правки: колонка текста и h1
   занимают 65…595 (центр 330), а знак стоял 65…420 (центр 243) — на 87px
   левее, и подпись «официальный перевозчик» читалась как относящаяся к
   началу строки, а не ко всей шапке.

   Раньше это был `inline-flex` внутри блочного контейнера с text-align:start,
   поэтому он просто прижимался к левому краю. `justify-self: start` рядом
   с ним был мёртвым: работает только для грид- и флекс-элементов, а
   .text-container — display:block.

   Теперь это блочный флекс-контейнер, стянутый по содержимому
   (width:fit-content) и отцентрованный auto-margin'ами. Внутренняя
   раскладка «значок + текст» не меняется: flex-direction по умолчанию row.
   34px высотой вместе с рамкой — читается как ярлык, а не как ещё один
   заголовок. */
.bk-badge {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 0.875rem;
  padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
  border: 1px solid color-mix(in srgb, #1d4ed8 24%, transparent);
  border-radius: 50rem;
  background: color-mix(in srgb, #1d4ed8 7%, #fff);
  box-shadow: 0 1px 2px rgb(11 18 32 / 0.05);
  color: #1e3a8a;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-align: start;
}

.bk-badge-mark {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  border-radius: 50%;
  background: linear-gradient(140deg, #1d4ed8, #0ea5e9);
  color: #fff;
}

.bk-badge-mark svg {
  display: block;
  inline-size: 0.8125rem;
  block-size: 0.8125rem;
}

/* --- Hero vertical density ------------------------------------------------
   styles.css wraps .header in 7rem / 9rem / 11rem of top padding and 7rem /
   8rem of bottom padding — 224px on a phone, 304px on a desktop, wrapped around
   a 433-705px row. The top padding was sized to clear a fixed navbar that no
   longer exists, and the row is already `align-items: center`, so the extra
   space did nothing but push the fold down.

   One clamp replaces all of it. This file loads after styles.css and the
   selector is still the bare `.header` (0-1-0), so it wins over all three of
   the theme rules at once; media queries add no specificity, so the
   (min-width: 768px) and (min-width: 1200px) copies are overridden too.
   padding-block rather than the `padding` shorthand, because styles.css
   declares padding-top/-bottom as longhands and a shorthand would reset the
   inline axis for no reason. */
.header {
  padding-block: clamp(2.5rem, 1rem + 5vw, 5rem);
}

/* 4rem under the text column. While the two columns were stacked this was the
   only thing separating them; side by side it just inflated the column, which
   the row then centred. Kept, but much smaller, for the stacked case. */
.header .text-container {
  margin-block-end: 1.25rem;
}

/* Navbar is fixed-top, so its height is taken out of the hero's clearance
   rather than out of the page. The social links needed a 44px hit area (they
   had 20x20, well under the WCAG 2.5.8 AA floor), which made them the tallest
   item in the bar and pushed it from 72px to 80px — exactly the slack the
   hero badge had above the fold, so the badge ended up under the bar.
   styles.css @media (min-width: 992px) {.navbar { padding-top: 1.75rem }} is
   0-1-0 and this file loads later, so trimming the top padding by the 8px the
   targets cost restores the original 72px bar and the original clearance. */
@media (min-width: 992px) {
  .navbar {
    padding-block-start: 1.25rem;
  }
}

/* --- Navbar surface --------------------------------------------------------
   Шапка должна читаться как полоса, а не как текст, написанный поверх hero.
   Раньше фон был #f1f9fc (styles.css:446), а hero начинается с #c5eaf9
   (styles.css:592, linear-gradient в rgba(197,234,249,1)). Два соседних
   светло-голубых тона отличаются на пару ступеней, и на десктопе границы
   не было видно: логотип и пункты меню выглядели наложенными прямо на
   hero. Теперь полоса белая и почти непрозрачная — на любом фоне под ней
   она остаётся светлой, а backdrop-filter добавляет размытие того, что
   прокручивается под ней.

   Селектор продублирован для .top-nav-collapse (0-2-0), который при
   прокрутке снова ставит #f1f9fc из styles.css:1302 и без этого перебил бы
   фон обратно.

   Прозрачность 0.94, а не 0: полоса не должна зависеть от поддержки
   backdrop-filter — без неё остаётся просто плотный белый. */
.navbar,
.navbar.top-nav-collapse {
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 6px 24px -14px rgba(15, 23, 42, 0.35);
}

/* Отступ между пунктами меню и иконками соцсетей. У .navbar-nav стоит
   ml-auto, он прижимает список к правому краю, а следом идёт .bk-social-top
   без отступа — на 992px правый край списка и левый край иконок
   совпадали ровно, вплотную (замерено: 903px == 903px). Свободного места
   в строке с запасом (~355px), отступ ничего не сжимает. */
.navbar .bk-social-top {
  margin-inline-start: 1.25rem;
}

/* --- Мобильное меню: убрать горизонтальную прокрутку -------------------
   Закрытая панель висела в `left: 100%` (styles.css:470) — целиком за правым
   краем вьюпорта, и была только `visibility: hidden`. Элемент при этом
   остаётся в раскладке, а `position: fixed` не режется overflow предков, так
   что `overflow-x: clip` на html/body (core/head.php) его не спасал.
   Замерено в iframe 360px: documentElement.scrollWidth = 690 при вьюпорте
   345, то есть ровно вдвое. По этой области телефон и панорамировался:
   сайт уезжал, справа показывалось пустое белое поле.

   Лечится `display: none` в закрытом состоянии — панели просто нет в
   раскладке, overflow исчезает (scrollWidth становится 345). Это же
   состояние уже предполагалось в booking-2026.js:332 («панель display:none
   пока закрыта»), но в стилях его не было — только visibility.

   Анимация выезда не потеряна: display не анимируется, поэтому вход сделан
   через @keyframes, а transform приходит к тому же translateX(-100%), что
   даёт тема.

   Только для <992px. На десктопе styles.css:1305 сбрасывает панель в
   `position: static` и `visibility: visible`, но НЕ задаёт display — если бы
   display:none стоял в базовом правиле, навигация в шапке просто исчезла бы.
   Поэтому правило ограничено медиазапросом, а десктоп не трогаем. */
@media (max-width: 991.98px) {
  .offcanvas-collapse {
    display: none;
  }

  .offcanvas-collapse.open {
    display: block;
    animation: bk-offcanvas-in 0.3s ease-out;
  }
}

@keyframes bk-offcanvas-in {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Тап-таргеты шапки. Логотип был 36px, пункты меню 34px — оба ниже 44px,
   то есть на телефоне в них попадали неточно.
   Пункт меню добирает высоту вертикальными отступами (у ссылки в styles.css
   0.625rem сверху и снизу), логотип — центрированием картинки внутри рамки
   44px. Ширина не меняется, горизонтальная раскладка шапки сохраняется. */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

.navbar .nav-item .nav-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-block: 0.9375rem;
}

/* .bk-lead and .bk-phones each declare their own top margin, so the theme's
   extra bottom margins on the lead and the store buttons were stacking on top
   of that rhythm rather than creating it. */
.header .p-large {
  margin-block-end: 0;
}

/* The mockup is 344x612. Unconstrained it filled the 330px phone column and
   became 587px tall — 42% of the whole hero on a 375px screen. Capping the
   height scales the width down with it, so it still reads as a phone but stops
   pushing the booking form below the fold. `inline-size: auto` is required:
   without it the width="344" attribute hint wins and only the height is
   clamped, which would distort the image. */
.header .image-container img {
  inline-size: auto;
  max-block-size: clamp(15rem, 46vh, 19rem);
}

/* On phones the mockup is hidden outright. Even clamped to 19rem it measured
   304px — a third of the 931px hero, and the block immediately below it ("в
   твоём смартфоне!") repeats the same offer with the same two store buttons.
   A picture of a phone is worth less on a phone than the 304px it costs.
   Without it the hero measures ~627px, so the first screen reaches the
   dispatcher numbers instead of dying on the picture. From 768px the columns
   are wide enough for the mockup to sit beside the text. */
@media (max-width: 767.98px) {
  .header .image-container {
    display: none;
  }
}

/* The label is 32 characters wide. At the 0.875rem default it needs 355px,
   which clears every column from 414px up but overflows the 330px column at
   375px and the 275px column at 320px, where it would break onto two lines and
   stop reading as a single pill. Narrow phones get a step down in type plus a
   tighter box, which brings the single-line width to 302px — inside the 315px
   column at 360px with room to spare. 320px still wraps; the text is 260px at
   12px and there is no honest way to fit it in 275px without going illegible. */
@media (max-width: 400px) {
  .bk-badge {
    gap: 0.375rem;
    padding: 0.25rem 0.625rem 0.25rem 0.25rem;
    font-size: 0.75rem;
  }

  .bk-badge-mark {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .bk-badge-mark svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
  }
}

/* Stacked (phone/tablet): the two columns are one flow, so the badge and the
   hero title are centred by the theme's `text-align: center`. Once the columns
   sit side by side the text goes left-aligned, which is what a left-aligned
   badge next to a left-aligned headline needs to stay flush. */
@media (min-width: 992px) {
  .header {
    text-align: start;
  }

  /* styles.css does not centre this column — it hardcodes `margin-top: 8rem`
     at 992px and `10rem` at 1200px to fake the alignment, which pushed the
     headline 160px down the page and made the row 578px tall to accommodate
     the margin. Both columns are now top-aligned, so the margin has to go;
     leaving it would also mean the badge could never sit level with the
     mockup. */
  .header .text-container {
    margin-block: 0;
  }

  /* Обещание и маршрут живут в одной обёртке: строки внутри центрируются друг
     под другом (align-items: center из базового правила), а сама обёртка
     встаёт на ту же центральную ось, что и «МинскЛайн» (justify-items: center
     в базовом .bk-hero-title). С justify-self: start бренд оказывался по
     центру колонки, а подпись — у левого края: расхождение 32px на 1200px. */
  .header .bk-hero-caption {
    justify-self: center;
  }

  /* Лид центрируется по оси блока логотипов операторов: .bk-phones на ≥992
     растянут на всю колонку (max-inline-size: none ниже), поэтому центр
     строки лида совпадает с центром логотипов. */
  .header .bk-lead {
    text-align: center;
  }

  /* Lift the 26rem cap in step with .bk-phones so the store buttons keep
     sharing the phone list's box. */
  .header .bk-store-btns {
    max-inline-size: none;
  }

  /* Both columns hang from the same top line. The row centred them, so the
     badge sat 128px below the top of the phone mockup — the opposite of the
     mirror the markup is arranged for. Top-aligning the image column puts the
     badge and the mockup flush, which is what "symmetrical" needs to mean
     once the mockup is shorter than the text. */
  .header .row {
    align-items: start;
  }

  .header .image-container img {
    max-block-size: 30rem;
  }

  /* Three dispatcher numbers stacked one per row cost 148px of the hero
     (3 x 44px tap targets + 2 x 8px gaps). As three equal columns with the
     operator mark above the number they cost 87px, and the tap targets keep
     their full 44px height. The 26rem cap is lifted so the row can use the
     full column width. */
  .header .bk-phones {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.75rem;
    max-inline-size: none;
    margin-block: 1.375rem 1.5rem;
  }

  .header .bk-phones li {
    grid-template-columns: minmax(0, 1fr);
    /* Значок и номер по центру своей трети колонки. Без этого значки
       (64px-картинки) прижаты к левому краю ячейки, и их коллективный центр
       уезжает на ~50px влево от центра надписи «Ваше путешествие…» и от
       центра блока — надпись казалась сдвинутой вправо. */
    justify-items: center;
    gap: 0.1875rem;
  }
}

/* --- Dispatcher phone list ---------------------------------------------- */
.bk-phones {
  display: grid;
  gap: 0.5rem;
  margin: 1.75rem 0 2rem;
  padding: 0;
  list-style: none;
  /* Replaces the old `gap: 6rem/7.2rem/6.6rem` inline hack, which forced
     horizontal overflow on narrow phones. */
  max-inline-size: 26rem;
  /* The 26rem cap is narrower than the column between 480px and 991px, and a
     capped block sits at the inline-start edge — so the list was left-hugging
     while the h1 and lead above it are centred by the theme's text-align.
     Auto inline margins put the list back on the column's centre axis. */
  margin-inline: auto;
}

.bk-phones li {
  display: grid;
  /* 4rem is the exact width of the operator marks, the same column the
     dispatcher list in the contacts card uses — so the numbers on both sides of
     the page start at the same offset from their mark. */
  grid-template-columns: 4rem 1fr;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.0625rem;
}

/* Phone/tablet (<992): the hero text is centred by the theme's
   `text-align: center`, but the phone rows kept hugging the inline-start edge
   (64px mark + left-aligned number), so the list sat left of the centred
   headline. Centring each logo+number pair as a unit puts the dispatcher
   numbers back on the screen's centre axis. All three numbers are the same
   length, so the pairs stay aligned with each other. */
@media (max-width: 991.98px) {
  .header .bk-phones li {
    grid-template-columns: auto auto;
    justify-content: center;
  }
}

.bk-phones a {
  color: #0b1220;
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  /* Comfortable tap target on touch screens: 44px min height (WCAG 2.5.8) */
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgb(37 99 235 / 0.16);
  border-radius: 8px;
}

.bk-phones a:active {
  color: #12369c;
}

.bk-phones a:hover,
.bk-phones a:focus-visible {
  color: #1d4ed8;
  text-decoration: underline;
}

.bk-phones a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.28);
  border-radius: 8px;
}

/* --- Tappable phone links (contacts card) ----------------------------------
   Replaces the old inline `style="color: black; text-decoration: none;"` on
   every tel: link. Guarantees a >= 44x44 px hit area on touch screens
   (WCAG 2.5.8 Target Size (Minimum)) and kills the iOS long-press text
   selection / callout.

   .bk-mail is the mailto: address and is deliberately held to the same rule
   rather than given its own: the contacts card exists so a visitor can act on
   it, and a lone grey address next to four tappable phone numbers was the one
   row on the card that could not be used. Sharing the selector keeps the two
   from drifting apart. */
.bk-tel,
.bk-mail {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem; /* 44px */
  padding-inline: 0.25rem;
  margin-inline: -0.25rem;
  color: #0b1220;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgb(37 99 235 / 0.16);
  border-radius: 10px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Digits only — meaningless on the address, so it stays off the shared rule. */
.bk-tel {
  font-variant-numeric: tabular-nums;
}

/* The shared rule pulls a standalone link 4px left so its tap highlight can
   bleed. This link has a label in front of it, so that offset ate into
   "E-mail:" and, once the address wrapped onto its own line at 320px, hung
   4px outside the text column entirely. Keep the right-hand bleed (nothing
   follows it) and pin the left edge to the column. */
.bk-mail {
  margin-inline-start: 0;
}

.bk-tel:hover,
.bk-tel:focus-visible,
.bk-mail:hover,
.bk-mail:focus-visible {
  color: #1d4ed8;
  background-color: rgb(37 99 235 / 0.08);
  text-decoration: underline;
}

.bk-tel:focus-visible,
.bk-mail:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.28);
}

.bk-tel:active,
.bk-mail:active {
  background-color: rgb(37 99 235 / 0.16);
  color: #12369c;
}

/* Dispatcher list inside the contacts card */
.bk-dispatch-title {
  font-weight: 700;
  color: #0b1220;
}

.bk-dispatch {
  display: grid;
  gap: 0.125rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  /* The 20rem cap existed to tame a fixed 210px inline box. The rows are now
     as wide as their grid column, and the cap would leave the numbers stranded
     in a 320px island inside a 1090px card. */
  max-inline-size: none;
}

.bk-dispatch li {
  display: grid;
  /* 4rem is the exact width of the operator marks (64x40). Pinning the column
     to it is what keeps all three phone numbers on one shared vertical line.
     The 4px end padding absorbs .bk-tel's `padding-inline: 0.25rem` +
     `margin-inline: -0.25rem` pair: that negative margin widens the link by
     8px and pulls it 4px left, so without the padding every number hangs 4px
     past its own grid track. */
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  padding-inline-end: 0.25rem;
}

/* Belarusian mobile operators, drawn in the site's own palette rather than
   fetched: A1 (#d5001c), МТС (#e8121b), life:) (#4e7c00). All three passes
   WCAG AA for the white wordmark inside it, so the operator stays readable at
   40px instead of degrading to a coloured blob. */
.bk-op-logo {
  display: block;
  inline-size: 4rem;
  block-size: 2.5rem;
  border-radius: 0.875rem;
  object-fit: contain;
}

.bk-dispatch .bk-tel {
  justify-content: flex-start;
}

/* Whole row of the contacts card becomes tappable-friendly spacing */
.bk-contacts .media-body {
  min-inline-size: 0;
  overflow-wrap: break-word;
}

/* --- Store buttons -------------------------------------------------------
   $store_btns (core/setting.php) выводит эту же пару в трёх местах: шапка,
   блок «в твоём смартфоне!» и подвал, — и все три используют эти правила.

   Значок — отдельный SVG вместо Font Awesome: у .fab один глиф на весь сайт, и
   `fa-google-play` в теме пришлось ужимать до 16px, потому что он не влезал в
   кнопку 76px. Свой файл рисуется под тот размер, который реально стоит. */
.bk-store-btns {
  display: flex;
  flex-wrap: wrap;
  /* Centred on the same axis as .bk-phones, and capped at the same 26rem so
     the two blocks share one box instead of the buttons drifting to the
     column centre while the list sits off to one side. Both caps are lifted
     together at 992px, where the text column is wide enough to use in full. */
  justify-content: center;
  max-inline-size: 26rem;
  margin-inline: auto;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}

.bk-store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  padding: 0.5rem 1.125rem;
  /* Literal, not var(--bk-ink): the --bk-* variables are scoped to
     .reservation_form, and these buttons live in the header, the app-promo
     block and the footer — outside the booking card, where the custom
     property is undefined and the declaration would be dropped at
     computed-value time (background then falls back to transparent). */
  border: 1px solid #0b1220;
  border-radius: 12px;
  background-color: #0b1220;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  /* The theme sets `line-height: 0` on .btn-solid-lg, which relies on the
     padding to give the button its height and collapses the text's own line
     box. Padding comes from the height above now, so restore a real one. */
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bk-store-btn-icon {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  flex: none;
  object-fit: contain;
}

.bk-store-btn:hover,
.bk-store-btn:focus-visible {
  border-color: #1d4ed8;
  background-color: #1d4ed8;
  color: #fff;
  text-decoration: none;
}

.bk-store-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.28);
}

/* Светлая обкладка в подвале. app.css красит .footer в #2e2c2e (перекрывая
   светлый градиент темы), и тёмная кнопка #0b1220 на нём даёт ~1.9:1 — силуэт
   почти сливался бы с панелью. Тот же компонент, что и в шапке: та же высота,
   радиус и значки; инвертируем только цвет кнопки под тёмную подложку, как
   рядом стоящие белые кружки соцсетей. Яблоко закрашено currentColor и
   перекрашивается само; сегменты Play жёстко в своих цветах. */
.footer .bk-store-btn {
  border-color: #ffffff;
  background-color: #ffffff;
  color: #0b1220;
}

.footer .bk-store-btn:hover,
.footer .bk-store-btn:focus-visible {
  border-color: #dfe6f2;
  background-color: #dfe6f2;
  color: #0b1220;
}

/* --- Contrast floor (WCAG 1.4.3) -----------------------------------------
   Тема красит текст карточек-фактов в #767d85 — ~4.0:1 на заливке карточки,
   ниже AA. Затемняем до #5f686f (4.95:1). Рядом когда-то жил однотипный фикс
   для .btn-solid-lg.secondary (малиновая #eb427e, 3.74:1): кнопки магазинов
   переведены на .bk-store-btn, и правило больше не нужно. */
.cards-1 .card-body p,
.card-body > p {
  color: #5f686f;              /* 4.95:1 on #f1f9fc */
}

/* --------------------------------------------------------------------------
   Соцсети в шапке
   --------------------------------------------------------------------------
   Иконка была 20x20 и зона нажатия совпадала с ней: 20px против 24px, которые
   WCAG 2.5.8 (AA) требует хотя бы для цели. Ссылка растянута до 44px, глиф
   оставлен 24px и центрирован, поэтому он не «раздувается» вместе с мишенью. */
.bk-social-top a {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.bk-social-top .fa-instagram,
.bk-social-top .fa-vk {
  font-size: 1.5rem;           /* 24px, было 20px */
}

.bk-social-top a:hover,
.bk-social-top a:focus-visible {
  background-color: rgba(53, 81, 140, 0.1);
}

.bk-social-title {
  margin: 1rem 0 0;
  color: #1d4ed8;              /* 7.0:1 on #fff */
  font-size: 1.0625rem;
  font-weight: 600;
}

@media (max-width: 400px) {
  .bk-store-btns .bk-store-btn {
    flex: 1 1 100%;
  }
}

/* --- App promo -----------------------------------------------------------
   Текст и кнопки лежат в одной ячейке .bk-promo-line (index.php), поэтому
   незачем трогать отступы колонки: они одинаковы для обеих частей, и обе
   центрируются на одной оси. Раньше здесь стояло padding-inline: 0, из-за
   которого промо-блок вылезал на 30px шире ячеек шапки и подвала. */
.bk-app-promo {
  inline-size: 100%;
  /* Было 1.5rem/1.5rem. Нижний отступ отсёкся и не нужен: кнопки отбиты
     собственным margin-block-start, а 24px под ними — уже отступ секции. */
  margin-block: 0 0.5rem;
  text-align: center;
}

.bk-app-promo-title {
  margin-block-end: 0.75rem;
  color: #1d4ed8;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}

.bk-app-promo-text {
  color: #0b1220;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
}

/* --- Feature cards (the five facts under the booking widget) ---------------
   styles.css gives every one of these a full-width row: 50px/34px padding, a
   70px icon, a 24px icon margin, a 24px title and 16px body text, plus 56px of
   margin-bottom. Five of those came to 1678px on a phone and 776px on a
   desktop — the largest block on the page, for five short facts.

   As a grid the same content is one row of five from 992px up. Every rule here
   is ID-scoped (#features) rather than class-scoped (.cards-1) so it cannot
   reach a future block that reuses the theme's card classes. */
#features.cards-1 {
  /* Отступы секции: 25px сверху и снизу, по требованию. Раньше здесь стоял
     min-height: 400px — блок был выше своего содержимого на 238px, и
     flex-центрирование разносило 162px ряд карточек, оставляя под ним и над
     ним по 119px белого поля. Именно это и читалось как «раздутое белое
     поле». Теперь высоту задаёт только содержимое плюс эти 25px, а
     центрирование остаётся страховкой на случай, если ряд окажется ниже
     секции. !important перекрывает .cards-1 { padding-top: 4rem } из
     styles.css. */
  padding: 25px 0 !important;

  /* Свой фон вместо белого. Секция бронирования над этим блоком имеет
     background: transparent на белом body, и границы секций совпадают
     вплотную, поэтому два белых поля сливались в одно: карточки лежали в
     25px от верхнего края своего блока, но визуально — в ~190px от верха
     белого поля, и центровка не читалась. Свой тон делает границу блока
     видимой. Карточки (#f1f9fc) на этом фоне светлее, а не темнее, так что
     остаются панелями, а не сливаются. */
  background: #eaf2fb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Контейнер внутри flex-секции: width 100% удерживает его от схлопывания
   по align-items: center, max-width зеркалит --bk-max у бронирования,
   чтобы ряды карточек и карточка бронирования совпадали по центру. */
#features.cards-1 .container {
  width: 100%;
  max-width: 1160px;
  padding: 0;
  margin: 0;
}

/* Ряд внутри контейнера — тоже на всю ширину контейнера */
#features.cards-1 .row {
  width: 100%;
  margin: 0;
}

/* Убираем белую полосу между секцией бронирования и блоком преимуществ.
   Она складывалась ровно из трёх вещей, замерено 190px:

      77.75px  .reservation_form padding-bottom   → обнулено в «Shell / section»
      40px     .reservation_form margin-bottom   → здесь
      72px     .basic-2.bk-section padding-bottom → здесь

   Секция бронирования прозрачна на белом body, поэтому все три слагаемых
   рисуются белым и читаются как «полоса», хотя это просто отступы. Обнуляем
   их: оставшийся зазор между карточкой брони и тонированным блоком даёт
   собственный padding блока — те же 25px, что и снизу, ряд карточек
   остаётся отцентрованным.

   Внутренние отступы самой карточки брони (.bk-card, 30px снизу) не тронуты:
   обнуляется только внешняя обёртка, поэтому содержимое не прилипает к краю. */
.reservation_form.reservation_anchor {
  margin-block-end: 0;
}

.basic-2.bk-section {
  padding-block-end: 0;
}

/* Колонка-грид остаётся grid, но теперь центрируется внутри flex-секции */
#features .col-lg-12 {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(0.875rem, 0.35rem + 2.6vw, 2rem);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

/* Two columns from 400px, not from 576px: at 400px the container leaves 355px,
   so each card is 171px — enough for the longest title ("Стоимость проезда")
   on one line at 15px. Below that the cards stay full width, because 1fr of a
   320px screen is 148px and every title would break. */
@media (min-width: 400px) {
  #features .col-lg-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  #features .col-lg-12 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  /* One row of five. The 960px text column less four 12px gaps leaves 183px
     per card, which holds the longest description ("Интервал отправления по
     маршруту 30 минут.") on two lines at 14px. */
  #features .col-lg-12 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* The five cards are direct children of this column, so it is the grid. */
#features .card {
  /* Must be zeroed, not just overridden by the gap: grid tracks do not collapse
     margins, so the theme's 56px would sit inside every row as dead space. */
  /* Тема (≥576px) задаёт inline-block + width:296px + margins у :nth-of-type(3n+2)
     — в гриде это ломало ширину колонок и вызывало перекрытие карточек.
     display:block здесь стоял именно ради этого сброса, но он заодно убирал
     flex-колонку, которую задаёт bootstrap (.card), и тогда лишняя высота от
     растягивания грида уезжала вниз: замерено 18px сверху и 38px снизу —
     содержимое сидело выше середины. Flex-колонка с justify-content:center
     центрирует блок иконка+текст по вертикали при любой высоте карточки. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  margin-block-end: 0;
  margin-inline: 0;
  /* Отступы сверху и снизу одинаковые и вдвое уже прежних 1.125rem: полосы
     вокруг содержимого были заметно шире самих иконок. */
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
}

#features .card-image {
  margin-block-end: 0.625rem;
}

/* bootstrap задаёт .card-body { flex: 1 1 auto }. Внутри нашей flex-колонки
   это означало, что body забирал всю свободную высоту сам, и на
   justify-content:center её не оставалось — блок прижимался к верху, а
   лишние 20px уезжали под текст. Здесь body по высоте содержимого, и
   центровкой занимается карточка. */
#features .card-body {
  flex: 0 0 auto;
}

#features .card-image img {
  width: 44px;
  height: 44px;
}

#features .card-title {
  margin-block-end: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.3;
}

#features .card-body p {
  margin-block-end: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  /* 4.99:1 on the #f1f9fc card fill, so the smaller size is not trading
     contrast away. */
  color: #56606b;
}

/* --- Lower-page vertical rhythm ------------------------------------------
   styles.css budgets the contacts section for a pricing page: 8rem of top
   padding, 3.75rem under the subtitle, and 6rem of card margin-bottom. That
   last one is dead space here — it exists to make room for
   .cards-2 .button-wrapper, which is position:absolute at bottom:-1.5rem and
   does not exist in the contacts card.

   Only padding and margins move here. Font sizes, line heights and the 44px
   phone tap targets are deliberately untouched, so the contacts list keeps its
   touch ergonomics. `margin-block-end` / `padding-block` longhands are used
   wherever a shorthand would clobber a sibling axis (the card is centred with
   `margin-inline: auto`). */
#pricing {
  padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}

#pricing .p-heading {
  margin-block-end: 1.25rem;
}

/* styles.css sizes this card for a three-pricing-cards row: 330px on small
   screens, then `display:inline-block; width:302px` in a min-width query, and
   the markup carried an inline `style="width:auto"` on top of that. The result
   was a card whose width was decided by its own text — 330px at 375, but
   579px at 1440 with a ragged right edge and a large empty band beside it.
   None of those three mechanisms describe this page, which has exactly one
   card, so all of them are replaced by one explicit full-width block. */
#pricing .card {
  display: block;
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
  /* Not optional: `.cards-2 .card` still asks for 6rem here, for the
     button-wrapper that this card does not have. */
  margin-block-end: 0;
  text-align: start;
  border-color: rgb(255 255 255 / 0.22);
  border-radius: 14px;
  box-shadow: 0 18px 40px -28px rgb(0 0 0 / 0.6);
}

#pricing .card-body {
  padding: 1.5rem 1.5rem 1.375rem;
}

/* The white "horizon" band has to shrink along with the section, otherwise it
   climbs over the card's bottom edge now that the 6rem margin is gone. The
   ~40px of card-over-white overlap matches the original proportion. */
#pricing .decoration-bg {
  height: 6.5rem;
}

#pricing .li-space-lg li:last-child {
  margin-block-end: 0;
}

/* --- Contacts grid --------------------------------------------------------
   One column of stacked `li` elements was sized for a 330px card, so widening
   the card to the full 1140px container would have produced four short lines
   marooned on the left. Laying the four groups out as a grid keeps a single
   left edge for every text run and uses the width the background photo gives
   us. */
#pricing .bk-contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  text-align: start;
}

#pricing .bk-contacts > li {
  display: grid;
  /* The chevron becomes a real column rather than a margin-left on the body,
     so every text run starts at the same x at every column count. */
  grid-template-columns: 0.875rem minmax(0, 1fr);
  align-items: start;
  gap: 0.625rem;
  margin-block-end: 0;
}

#pricing .bk-contacts .fas {
  margin-block-start: 0.1875rem;
  font-size: 0.75rem;
  line-height: 1.5rem;
  color: #594cda;
}

#pricing .bk-contacts .media-body {
  margin-inline-start: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  /* The theme's #6b747b is 4.2:1 on white. On a card this wide the address runs
     to three lines, which is the worst possible place to be under AA. */
  color: #374151;
}

@media (min-width: 640px) {
  #pricing .bk-contacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
  }
}

@media (min-width: 1200px) {
  /* Four across only once the container is at its 1140px maximum. At 1024 the
     column would be 206px, and the dispatch row alone needs 204px for a
     64px mark plus an unbreakable phone number. */
  #pricing .bk-contacts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }
}

/* --- Footer density ------------------------------------------------------
   An earlier revision put `content-visibility: auto` + `contain-intrinsic-size:
   auto 520px` on the footer to skip its paint work. That backfired: the footer
   is below the fold, so it never rendered, and the 520px placeholder stood in
   for its real 310px — 274px of blank band, plus a jump once scrolled to. The
   optimisation bought nothing for a one-paragraph footer, so it is gone.

   Когда-то здесь же жила обрезалка `.footer .btn-solid-lg` под старые кнопки
   магазинов — она уехала вместе с классом: кнопки теперь общие `.bk-store-btn`
   из $store_btns, и их высота задаётся в одном месте. */
.footer {
  padding-block-end: 2rem;
}

.footer .fa-stack {
  /* styles.css gives these width:2em of a 1.5rem font (48x30) and icons-2026.css
     adds the glyphs. Round it up to a 44px square so the anchor hit area
     stretched over the stack clears the tap-target floor. */
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-end: 0.75rem;
}

/* Круг занимал 30px из 44px бокса — мишень была заметно крупнее картинки, и
   рядом с текстом иконка выглядела мелкой. Теперь круг заполняет бокс целиком,
   а глиф равен половине от него (22px), как и принято в кружках-аватарах. */
.footer .social-container .fa-stack-2x {
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.footer .social-container .fa-stack-1x {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.footer .social-container .fa-stack:hover .fa-stack-2x,
.footer .social-container .fa-stack:focus-within .fa-stack-2x {
  transform: translate(-50%, -50%) scale(1.07);
}

.bk-social-title {
  margin-block-start: 0.5rem;
}

/* ==========================================================================
   МинскЛайн — Booking UI 2026
   --------------------------------------------------------------------------
   Design system for the "Бронирование онлайн" widget.

   NOTES FOR MAINTAINERS
   - This file is intentionally NOT wrapped in @layer. The legacy sheet
     (css/app.css) is unlayered, and per the CSS cascade spec unlayered
     author styles always beat layered ones. Using a layer here would make
     every legacy rule win. Load this file AFTER app.css instead.
   - Everything is scoped to `.reservation_form` so it cannot leak into the
     rest of the site.
   - Legacy float-based layout is neutralised here; the widget is a real
     CSS Grid with container queries.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
.reservation_form {
  /* --- Typography --- */
  --bk-font-sans: "Open Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bk-font-numeric: ui-rounded, "SF Pro Rounded", var(--bk-font-sans);

  /* Fluid type scale — 360px → 1280px viewport */
  --bk-fs-2xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --bk-fs-xs: clamp(0.75rem, 0.72rem + 0.16vw, 0.8125rem);
  --bk-fs-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --bk-fs-md: clamp(0.9375rem, 0.9rem + 0.24vw, 1.0625rem);
  --bk-fs-lg: clamp(1.0625rem, 1rem + 0.36vw, 1.25rem);
  --bk-fs-xl: clamp(1.25rem, 1.14rem + 0.6vw, 1.625rem);
  --bk-fs-2xl: clamp(1.5rem, 1.3rem + 1.1vw, 2.25rem);

  /* --- Surfaces --- */
  --bk-bg: #f1f5fd;
  --bk-surface: #ffffff;
  --bk-surface-2: #f8fafc;
  --bk-surface-3: #eef2f9;
  --bk-surface-inset: #f4f7fc;

  /* --- Ink --- */
  --bk-ink: #0b1220;
  --bk-ink-2: #33415c;
  /* #64748b is only 4.35:1 on the tinted --bk-bg, below the 4.5:1 AA floor.
     #56637a clears 5.5:1 on --bk-bg and 6.0:1 on white. */
  --bk-ink-3: #56637a;
  --bk-ink-inverse: #ffffff;

  /* --- Lines --- */
  --bk-line: #dfe6f2;
  --bk-line-strong: #c3cee2;

  /* --- Brand --- */
  --bk-brand: #1d4ed8;
  --bk-brand-2: #2563eb;
  --bk-brand-3: #0ea5e9;
  --bk-brand-ink: #1e3a8a;
  --bk-brand-soft: #eef3ff;
  --bk-brand-soft-2: #e0ebff;

  /* --- Semantic --- */
  --bk-ok: #047857;
  --bk-ok-soft: #ecfdf5;
  --bk-warn: #b45309;
  --bk-warn-soft: #fffbeb;
  --bk-danger: #dc2626;
  --bk-danger-soft: #fef2f2;

  /* --- Radii --- */
  --bk-r-xs: 8px;
  --bk-r-sm: 10px;
  --bk-r-md: 14px;
  --bk-r-lg: 20px;
  --bk-r-xl: 28px;
  --bk-r-pill: 999px;

  /* --- Elevation (layered, low-spread) --- */
  --bk-e1: 0 1px 2px rgb(11 18 32 / 0.05), 0 1px 1px rgb(11 18 32 / 0.03);
  --bk-e2: 0 2px 4px rgb(11 18 32 / 0.04), 0 4px 12px rgb(11 18 32 / 0.06);
  --bk-e3: 0 4px 8px rgb(11 18 32 / 0.04), 0 12px 28px rgb(11 18 32 / 0.09);
  --bk-e4: 0 8px 16px rgb(11 18 32 / 0.06), 0 24px 56px rgb(11 18 32 / 0.14);
  --bk-ring: 0 0 0 3px rgb(37 99 235 / 0.28);

  /* --- Motion --- */
  --bk-dur-1: 120ms;
  --bk-dur-2: 200ms;
  --bk-dur-3: 320ms;
  --bk-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --bk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Metrics --- */
  --bk-ctl-h: 52px;
  --bk-ctl-h-sm: 46px;
  /* Height of one ticket button. The segmented control adds 0.375rem of padding
     and 2px of border around it, and the "К оплате" box is sized off the same
     token so the two controls land on exactly the same line. Bumped per
     breakpoint where the buttons get taller. */
  --bk-ticket-ctl: 2.25rem;
  --bk-gap: clamp(0.75rem, 0.55rem + 0.9vw, 1.5rem);
  --bk-pad-card: clamp(1.125rem, 0.8rem + 1.6vw, 2.5rem);
  --bk-max: 1160px;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Shell / section
   -------------------------------------------------------------------------- */
.reservation_form.reservation_anchor {
  /* The legacy inline style sets background-color; !important keeps the new
     canvas authoritative while PHP still controls $color_back_reservation.
     Both longhands need the flag: an !important shorthand outranks any
     following normal longhand, which would reset background-image to none. */
  background-color: var(--bk-bg) !important;
  background-image:
    radial-gradient(60rem 30rem at 8% -10%, #dbe9ff 0%, transparent 60%),
    radial-gradient(50rem 26rem at 102% 4%, #d7f2ff 0%, transparent 62%),
    linear-gradient(180deg, #f7faff 0%, #eef4fd 100%) !important;
  /* Keep the aurora pinned to the viewport on pointer devices only. On touch
     it forces a full repaint of a 3-layer gradient on every scroll frame,
     which is exactly the jank this block is supposed to be free of. */
  background-attachment: scroll;
  color: var(--bk-ink);
  font-family: var(--bk-font-sans);
  font-size: var(--bk-fs-md);
  line-height: 1.55;
  letter-spacing: -0.011em;
  /* Верхний отступ — по clamp, нижний обнулён: он давал 77.75px белого поля
     между карточкой брони и блоком преимуществ (см. правило для .basic-2
     ниже). Разрыв теперь даёт padding самого блока преимуществ. */
  padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) 0 0;
  /* Kill legacy float/width tricks */
  float: none;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  overflow: clip;
}

/* Re-pin the aurora only where repainting it is cheap. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .reservation_form.reservation_anchor {
    background-attachment: fixed;
  }
}

/* Legacy app.css sets proxima_nova / proxima_nova_semibold / mme directly on
   these class selectors, which out-specifies the inherited font on
   .reservation_form. Re-assert the design stack so the block stays on Open
   Sans and the browser stops downloading the 56 KB @font-face files. */
.reservation_form :is(.custom_form_control,
                       .custom_form_control_value,
                       .custom_form_control_input,
                       .bk-price,
                       .bk-panel-title,
                       .form_btn) {
  font-family: var(--bk-font-sans);
}

/* Legacy: .reservation_form_wrapper{display:none} + margin-top:50px */
.reservation_form .reservation_form_wrapper {
  display: block !important;
  margin: 0 auto;
  max-width: var(--bk-max);
  padding: 0 clamp(0.875rem, 0.35rem + 2.6vw, 2rem);
  width: 100%;
}

/* The page template already wraps this section in a Bootstrap .container
   (960px cap + 15px gutters). Neutralise it: the wrapper above owns the
   gutter and the --bk-max measure. Left in place, the cap throttled the card
   to 960px on desktop and the gutters ate 30px off every phone screen. */
.bk-section > .container {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Section heading
   -------------------------------------------------------------------------- */
.reservation_form .bk-head {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  text-align: center;
  margin: 0 0 clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
}

.reservation_form .bk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  border-radius: var(--bk-r-pill);
  background: var(--bk-surface);
  border: 1px solid var(--bk-line);
  box-shadow: var(--bk-e1);
  color: var(--bk-brand-ink);
  font-size: var(--bk-fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.reservation_form .bk-eyebrow::before {
  content: "";
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--bk-surface), var(--bk-surface)) padding-box,
    conic-gradient(from 210deg, var(--bk-brand-3), var(--bk-brand), #7c3aed, var(--bk-brand-3)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.08);
}

.reservation_form .bk-title {
  margin: 0;
  color: var(--bk-ink);
  font-size: var(--bk-fs-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.reservation_form .bk-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--bk-brand) 0%, var(--bk-brand-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.reservation_form .bk-sub {
  margin: 0;
  max-width: 56ch;
  color: var(--bk-ink-3);
  font-size: var(--bk-fs-md);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. Card
   -------------------------------------------------------------------------- */
.reservation_form .bk-card {
  position: relative;
  background: var(--bk-surface);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r-xl);
  box-shadow: var(--bk-e3);
  padding: var(--bk-pad-card);
  overflow: clip;
}

/* Soft brand wash along the top edge */
.reservation_form .bk-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 4px;
  background: linear-gradient(
    90deg,
    var(--bk-brand) 0%,
    var(--bk-brand-3) 45%,
    #7c3aed 100%
  );
}

/* --------------------------------------------------------------------------
   5. Progress rail
   -------------------------------------------------------------------------- */
.reservation_form .bk-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.375rem;
  list-style: none;
  margin: 0 0 clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  padding: 0;
  counter-reset: bk-step;
}

.reservation_form .bk-steps li {
  counter-increment: bk-step;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem;
  min-inline-size: 0;
  padding-block: 0.5rem 0.625rem;
  font-size: var(--bk-fs-xs);
  font-weight: 600;
  color: var(--bk-ink-3);
  transition: color var(--bk-dur-2) var(--bk-ease);
}

.reservation_form .bk-steps li::before {
  content: counter(bk-step);
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--bk-surface-3);
  color: var(--bk-ink-3);
  font-size: var(--bk-fs-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background var(--bk-dur-2) var(--bk-ease),
    color var(--bk-dur-2) var(--bk-ease),
    box-shadow var(--bk-dur-2) var(--bk-ease);
}

/* Connector rail */
.reservation_form .bk-steps li::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.375rem 2.25rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--bk-line);
}

.reservation_form .bk-steps li:last-child::after {
  display: none;
}

.reservation_form .bk-steps li[data-state="active"] {
  color: var(--bk-ink);
}

.reservation_form .bk-steps li[data-state="active"]::before {
  background: linear-gradient(140deg, var(--bk-brand-2), var(--bk-brand-3));
  color: #fff;
  box-shadow: 0 0 0 4px rgb(37 99 235 / 0.14);
}

.reservation_form .bk-steps li[data-state="done"] {
  color: var(--bk-ok);
}

.reservation_form .bk-steps li[data-state="done"]::before {
  content: "\2713";
  background: var(--bk-ok-soft);
  color: var(--bk-ok);
  box-shadow: inset 0 0 0 1px rgb(4 120 87 / 0.22);
}

.reservation_form .bk-steps li[data-state="done"]::after {
  background: var(--bk-ok);
  opacity: 0.4;
}

.reservation_form .bk-steps .bk-step-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Grid + fieldsets
   -------------------------------------------------------------------------- */
.reservation_form .bk-body {
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem);
}

.reservation_form .reservation_form_lines {
  display: grid;
  gap: var(--bk-gap);
  /* Legacy: float:left + overflow:hidden + padding:0 15px. The gutters are the
     card's job now — leaving them on cost 30px of a 320px screen, which is what
     pushed the ticket buttons below a 44px tap target. */
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: visible;
  position: static;
}

.reservation_form .bk-row {
  display: grid;
  gap: var(--bk-gap);
  grid-template-columns: 1fr;
  align-items: start;
}

.reservation_form .reservation_form_line {
  /* Legacy: padding 5px 0, margin-bottom 8px, overflow hidden */
  padding: 0;
  margin: 0;
  overflow: visible;
  position: static;
  display: grid;
  gap: var(--bk-gap);
}

.reservation_form .bk-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reservation_form .bk-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Route row: Откуда | ⟳ | Куда on one line, Дата spanning underneath. The swap
   button needs no explicit grid-column — with `1fr auto 1fr` the auto-placement
   cursor lands it in the middle lane on its own, in the order it appears in the
   DOM. The date cell's `1 / -1` is the only explicit placement and it resolves
   the same way against the single-column mobile grid. */
.reservation_form .bk-row--route {
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  /* The card hands this row more height than its content needs (the stretch
     chain runs .bk-card -> .bk-body -> .reservation_form_lines -> here), and a
     stretched row leaves `align-self: end` on the swap button overshooting the
     selects by ~10px. Sizing the rows to their content keeps the button's
     baseline tied to the select bottoms instead of to a leftover gap. */
  align-content: start;
}

.reservation_form .bk-row--route > .bk-field--date {
  grid-column: 1 / -1;
}
/* iPhone Safari выравнивает значение input[type=date] по левому краю и
   оставляет справа пустое поле под индикатор — на телефоне это читается как
   «поле сломано». Центрируем только там: на десктопе та же строка встаёт
   вровень с остальными полями, прижатыми к левому краю. */
@media (max-width: 767.98px) {
  .reservation_form .bk-row--route > .bk-field--date input[type="date"] {
    text-align: center;
    padding-inline-end: 0.5rem;
  }
}

/* Билеты | К оплате | Забронировать. Both of the first two cells are a caption
   plus a control, so stretching them and pinning the controls to the baseline
   puts "К оплате" exactly on the same line as the segmented control. */
.reservation_form .bk-row--pay {
  align-items: stretch;
}

/* Кнопка — не третья колонка ряда, а продолжение поля «К оплате»: селектная
   трактовка «третья ячейка на всю строку» ставила бы её шириной во всю форму
   под полем цены в треть ширины. Колонка 2 кладёт её ровно под «К оплате» —
   та же ширина, тот же левый край — на любой ширине экрана. На ≤767 следующий
   блок (grid-column: auto, одна колонка) возвращает кнопку в поток на всю
   ширину формы. */
.reservation_form .bk-row--pay > .reservation_form_item:nth-child(3) {
  grid-column: 2;
}

.reservation_form .reservation_form_item {
  /* Legacy: width 33.33333%; float:left; padding 0 20px */
  width: auto;
  float: none;
  padding: 0;
  /* Legacy also had `margin-bottom: 10px`. Grid rows do not collapse margins, so
     every cell was contributing a 10px-tall strip of dead space below itself,
     which grew each row and pushed the swap button 10px past the selects. */
  margin: 0;
  box-sizing: border-box;
  display: grid;
  gap: 0.4375rem;
  min-inline-size: 0;
}

.reservation_form .reservation_form_item.half {
  width: auto;
}

.reservation_form .reservation_form_item.full {
  width: auto;
}

.reservation_form .bk-field {
  display: grid;
  gap: 0.4375rem;
  min-inline-size: 0;
  /* Without this, a stretched cell hands its extra height to the caption row
     too: the "Билеты"/"К оплате" labels end up 32px tall instead of 19px and
     the control underneath is pushed off the shared baseline. */
  align-content: start;
}

.reservation_form .bk-label {
  display: flex;
  /* baseline, а не center: подпись «Номер телефона в международном
     формате:» на телефоне переносится на две строки, и при center красная
     звёздочка обязательности вставала посередине между ними (отступ от
     верха текста 12px). С baseline она садится на первую строку (3px).
     Для однострочных подписей разницы не видно — высота 17px та же. */
  align-items: baseline;
  gap: 0.375rem;
  margin: 0;
  font-size: var(--bk-fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--bk-ink-2);
  letter-spacing: -0.005em;
}

.reservation_form .bk-label .bk-req {
  color: var(--bk-danger);
  font-weight: 800;
  line-height: 1;
}

.reservation_form .bk-label .bk-opt {
  color: var(--bk-ink-3);
  font-weight: 500;
  font-size: var(--bk-fs-2xs);
}

.reservation_form .bk-hint {
  font-size: var(--bk-fs-xs);
  color: var(--bk-ink-3);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. Controls — one shape for input / select / textarea
   -------------------------------------------------------------------------- */
.reservation_form.reservation_anchor .bk-body .blue_skin,
.reservation_form.reservation_anchor .bk-body .custom_form_control {
  /* Legacy: height 50px; line-height 65px; border 3px; font proxima_nova */
  font-family: inherit;
  font-size: var(--bk-fs-md);
  font-weight: 600;
  color: var(--bk-ink);
  background: var(--bk-surface);
  border: 1.5px solid var(--bk-line-strong);
  border-radius: var(--bk-r-md);
  inline-size: 100%;
  block-size: var(--bk-ctl-h);
  min-block-size: var(--bk-ctl-h);
  padding: 0 0.9375rem;
  line-height: normal;
  box-shadow: var(--bk-e1);
  cursor: pointer;
  transition: border-color var(--bk-dur-1) var(--bk-ease),
    box-shadow var(--bk-dur-2) var(--bk-ease),
    background-color var(--bk-dur-2) var(--bk-ease);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.reservation_form.reservation_anchor .bk-body .custom_form_control.with_note {
  line-height: normal;
}

.reservation_form.reservation_anchor .bk-body .custom_form_control.textarea {
  block-size: auto;
  min-block-size: 0;
  padding: 0.75rem 0.9375rem;
}

.reservation_form.reservation_anchor .bk-body .custom_form_control.small {
  block-size: var(--bk-ctl-h-sm);
  min-block-size: var(--bk-ctl-h-sm);
  border-width: 1.5px;
  line-height: normal;
  padding: 0 0.8125rem;
}

.reservation_form.reservation_anchor .bk-body select.blue_skin,
.reservation_form.reservation_anchor .bk-body select.custom_form_control {
  /* Room for the chevron */
  padding-inline-end: 2.75rem;
  /* Native picker stays available but visually replaced */
  text-overflow: ellipsis;
  text-transform: none;
}

/* Chevron for selects */
.reservation_form .bk-select {
  position: relative;
  display: grid;
  min-inline-size: 0;
}

.reservation_form .bk-select::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1rem;
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  margin-block-start: -0.55rem;
  pointer-events: none;
  background: currentColor;
  color: var(--bk-ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat center / contain;
  transition: transform var(--bk-dur-2) var(--bk-ease), color var(--bk-dur-2) var(--bk-ease);
}

.reservation_form .bk-select:hover::after {
  color: var(--bk-brand);
}

.reservation_form .bk-select:focus-within::after {
  color: var(--bk-brand);
  transform: translateY(2px) rotate(180deg);
}

/* Inputs inside the boxed wrapper */
.reservation_form.reservation_anchor .bk-body .custom_form_control_input {
  background: transparent;
  border: 0;
  display: block;
  inline-size: 100%;
  padding: 0 0.9375rem;
  font-family: inherit;
  font-size: var(--bk-fs-md);
  font-weight: 600;
  color: var(--bk-ink);
  line-height: normal;
  border-radius: inherit;
}

.reservation_form.reservation_anchor .bk-body .custom_form_control.small .custom_form_control_input {
  padding: 0 0.8125rem;
  font-size: var(--bk-fs-sm);
}

.reservation_form.reservation_anchor .bk-body textarea.custom_form_control_input {
  padding: 0.75rem 0.9375rem;
  resize: vertical;
  min-block-size: 5.5rem;
  line-height: 1.5;
}

.reservation_form.reservation_anchor .bk-body .custom_form_control_input:focus {
  outline: 0;
}

.reservation_form.reservation_anchor .bk-body .custom_form_control_input::placeholder {
  color: #94a3b8;
  opacity: 1;
  font-weight: 500;
}

/* Date input */
.reservation_form input[type="date"].custom_form_control {
  padding-inline-end: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.reservation_form input[type="date"]::-webkit-calendar-picker-indicator {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--bk-dur-2) var(--bk-ease);
}

.reservation_form input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* --- Interaction states -------------------------------------------------- */
.reservation_form.reservation_anchor .bk-body .blue_skin:hover,
.reservation_form.reservation_anchor .bk-body .custom_form_control:hover {
  border-color: #a9bbd8;
  background: var(--bk-surface-2);
}

.reservation_form.reservation_anchor .bk-body select.blue_skin:hover,
.reservation_form.reservation_anchor .bk-body select.custom_form_control:hover {
  background: var(--bk-surface-2);
}

/* Focus ring: :focus-visible on the control, ring drawn by the wrapper */
.reservation_form.reservation_anchor .bk-body .blue_skin:focus,
.reservation_form.reservation_anchor .bk-body .blue_skin:focus-visible,
.reservation_form.reservation_anchor .bk-body .custom_form_control:focus,
.reservation_form.reservation_anchor .bk-body .custom_form_control:focus-visible,
.reservation_form.reservation_anchor .bk-body .custom_form_control_input:focus,
.reservation_form.reservation_anchor .bk-body .custom_form_control_input:focus-visible {
  outline: 0;
  border-color: var(--bk-brand-2);
  background: var(--bk-surface);
  box-shadow: var(--bk-ring);
}

.reservation_form.reservation_anchor .bk-body .blue_skin:focus-within,
.reservation_form.reservation_anchor .bk-body .custom_form_control:focus-within {
  border-color: var(--bk-brand-2);
  background: var(--bk-surface);
  box-shadow: var(--bk-ring);
}

.reservation_form.reservation_anchor .bk-body .custom_form_control_input:focus-visible {
  box-shadow: none;
}

/* Filled state — subtle tint so users can see what is set */
.reservation_form.reservation_anchor .bk-body .custom_form_control:has(.custom_form_control_input:not(:placeholder-shown)),
.reservation_form.reservation_anchor .bk-body .custom_form_control_input:not(:placeholder-shown) {
  background: color-mix(in srgb, var(--bk-brand-soft) 45%, var(--bk-surface));
  border-color: color-mix(in srgb, var(--bk-brand-2) 30%, var(--bk-line));
}

.reservation_form.reservation_anchor .bk-body .custom_form_control:has(.custom_form_control_input:focus) {
  background: var(--bk-surface);
  border-color: var(--bk-brand-2);
}

/* Invalid */
.reservation_form.reservation_anchor .bk-body [aria-invalid="true"],
.reservation_form.reservation_anchor .bk-body .blue_skin.invalid {
  border-color: var(--bk-danger);
  background: var(--bk-danger-soft);
}

.reservation_form.reservation_anchor .bk-body [aria-invalid="true"]:focus,
.reservation_form.reservation_anchor .bk-body [aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgb(220 38 38 / 0.24);
}

/* --- Option styling ------------------------------------------------------ */
.reservation_form.reservation_anchor .bk-body option {
  font-family: inherit;
  font-size: var(--bk-fs-md);
  color: var(--bk-ink);
  background: var(--bk-surface);
}

/* Legacy override: option:disabled{color:blue} */
.reservation_form.reservation_anchor .bk-body option:disabled,
.reservation_form.reservation_anchor .bk-body option:disabled .select_time_no_places {
  color: #9aa7bd;
}

.reservation_form.reservation_anchor .bk-body optgroup {
  color: var(--bk-ink-3);
  background: var(--bk-surface-2);
  font-family: inherit;
  font-size: var(--bk-fs-xs);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reservation_form .select_time_no_places {
  color: #9aa7bd;
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   8. Swap button (Откуда ↔ Куда)
   -------------------------------------------------------------------------- */
.reservation_form .reservation_form_direction_reverse {
  /* Legacy: position absolute, left 33%, top 63px. That floated the button over
     the middle of the "Откуда" field instead of sitting between the two. It is
     now a normal grid item in its own lane, so "Откуда | ⟳ | Куда" is literal
     at any width. It also lives between the two selects in the DOM, so the tab
     order and the accessibility tree match what is on screen. */
  align-self: end;
  margin-block-end: 0.125rem;
  /* Must be reset explicitly, not merely omitted: app.css still declares
     `position: absolute; left: calc(33% - 2px); top: 63px` on this element at
     a lower specificity, so dropping the property here would hand the legacy
     absolute positioning straight back. `inset: auto` clears its left/top. */
  position: static;
  inset: auto;
  z-index: 3;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--bk-line-strong);
  background: var(--bk-surface);
  color: var(--bk-brand);
  box-shadow: var(--bk-e2);
  cursor: pointer;
  font-size: 1.25rem;
  text-align: center;
  transition: transform var(--bk-dur-3) var(--bk-ease-out),
    background-color var(--bk-dur-2) var(--bk-ease),
    border-color var(--bk-dur-2) var(--bk-ease),
    color var(--bk-dur-2) var(--bk-ease);
}

/* Use a crisp inline arrow instead of the legacy icon font glyph */
.reservation_form .reservation_form_direction_reverse::before {
  content: "\21C4"; /* ⇄ */
  font-family: var(--bk-font-sans);
  line-height: 1;
}

.reservation_form .reservation_form_direction_reverse:hover {
  background: linear-gradient(140deg, var(--bk-brand-2), var(--bk-brand-3));
  border-color: transparent;
  color: #fff;
  transform: rotate(180deg);
}

.reservation_form .reservation_form_direction_reverse:active {
  transform: rotate(180deg) scale(0.92);
}

.reservation_form .reservation_form_direction_reverse:focus-visible {
  outline: 0;
  box-shadow: var(--bk-ring);
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.reservation_form .reservation_form_btn {
  margin: 0;
}

.reservation_form.reservation_anchor .bk-body .form_btn,
.reservation_form .form_btn {
  /* Legacy: 65px/72px line-height, #6CCE00, radius 5px, 1s transition */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  inline-size: 100%;
  block-size: 3.5rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--bk-r-md);
  background: linear-gradient(135deg, var(--bk-brand-2) 0%, var(--bk-brand-3) 100%);
  box-shadow: 0 2px 4px rgb(29 78 216 / 0.2), 0 10px 24px rgb(29 78 216 / 0.28);
  color: #fff;
  font-family: inherit;
  font-size: var(--bk-fs-lg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--bk-dur-1) var(--bk-ease),
    box-shadow var(--bk-dur-2) var(--bk-ease),
    filter var(--bk-dur-2) var(--bk-ease),
    opacity var(--bk-dur-2) var(--bk-ease);
}

.reservation_form .form_btn.small {
  block-size: var(--bk-ctl-h-sm);
  min-block-size: var(--bk-ctl-h-sm);
  font-size: var(--bk-fs-sm);
  padding: 0 1.125rem;
  inline-size: auto;
}

/* Secondary / ghost variant */
.reservation_form .form_btn.secondary {
  background: var(--bk-surface);
  color: var(--bk-brand);
  box-shadow: inset 0 0 0 1.5px var(--bk-line-strong);
}

.reservation_form .form_btn.secondary:hover {
  background: var(--bk-brand-soft);
  box-shadow: inset 0 0 0 1.5px var(--bk-brand-2);
}

.reservation_form .form_btn.yellow:not(.disabled) {
  background: linear-gradient(135deg, var(--bk-brand-2) 0%, var(--bk-brand-3) 100%);
}

.reservation_form .form_btn.yellow:not(.disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgb(29 78 216 / 0.22), 0 16px 36px rgb(29 78 216 / 0.34);
  filter: saturate(1.08);
}

.reservation_form .form_btn.yellow:not(.disabled):active {
  transform: translateY(0) scale(0.985);
}

/* Disabled: gradient desaturated, still legible */
.reservation_form .form_btn.disabled {
  background: var(--bk-surface-3);
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.reservation_form .form_btn:focus-visible {
  outline: 0;
  box-shadow: var(--bk-ring), 0 2px 4px rgb(29 78 216 / 0.2);
}

/* Inline loading state */
.reservation_form .form_btn[data-busy="true"] {
  pointer-events: none;
  color: transparent;
  position: relative;
}

.reservation_form .form_btn[data-busy="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: -0.625rem 0 0 -0.625rem;
  border-radius: 50%;
  border: 2.5px solid rgb(255 255 255 / 0.35);
  border-block-start-color: #fff;
  animation: bk-spin 700ms linear infinite;
}

@keyframes bk-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   10. Ticket counter + price
   -------------------------------------------------------------------------- */
.reservation_form .bk-tickets {
  display: grid;
  gap: 0.4375rem;
}

.reservation_form .bk-segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.25rem;
  padding: 0.1875rem;
  background: var(--bk-surface-inset);
  /* 1px, not 1.5px: the box height is arithmetic (label + 0.375rem padding +
     2px of border) and shares a token with .bk-price, so a half pixel here
     would put the two controls a fraction out of line. */
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r-md);
  box-shadow: inset 0 1px 2px rgb(11 18 32 / 0.04);
}

.reservation_form .bk-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  inline-size: 0;
  block-size: 0;
}

/* Narrow phones: the five ticket buttons have to share ~245px, so the gaps and
   padding get tightened and min-inline-size guarantees the floor. Worst case at
   320px is 5x36 + 6 gap + 6 padding = 192px inside 245px, so nothing overflows. */
@media (max-width: 22.5rem) {
  .reservation_form .bk-segment {
    gap: 0.125rem;
    padding-inline: 0.1875rem;
  }

  .reservation_form .bk-segment label {
    min-inline-size: 2.25rem;
  }
}

.reservation_form .bk-segment label {
  display: grid;
  place-items: center;
  /* app.css sets `margin-bottom: 10px` on `.reservation_form_item label`, which
     also matches the segment buttons. Inside a grid row that margin is not
     collapsed — it silently added 10px of dead space under every button and made
     the whole control 54px tall. */
  margin: 0;
  /* 36px floor. This used to be 44px, which made the "Билеты" cell taller than
     everything around it. 36px still clears WCAG 2.5.8 AA (24x24 CSS px) with
     room to spare, and the coarse-pointer query hands touch devices 40px.
     It is no longer WCAG 2.5.5 AAA (44px) — a deliberate trade for the shorter
     control, not an oversight. 768px portrait iPads report a fine-pointer-free
     environment, so this cannot be scoped to small screens only. */
  min-block-size: var(--bk-ticket-ctl);
  padding: 0 0.25rem;
  border-radius: calc(var(--bk-r-md) - 0.375rem);
  font-size: var(--bk-fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bk-ink-3);
  cursor: pointer;
  transition: background-color var(--bk-dur-2) var(--bk-ease),
    color var(--bk-dur-2) var(--bk-ease),
    box-shadow var(--bk-dur-2) var(--bk-ease);
}

.reservation_form .bk-segment label:hover {
  color: var(--bk-ink);
  background: rgb(255 255 255 / 0.7);
}

.reservation_form .bk-segment input:checked + label {
  background: linear-gradient(140deg, var(--bk-brand-2), var(--bk-brand-3));
  color: #fff;
  box-shadow: 0 1px 2px rgb(29 78 216 / 0.2), 0 4px 12px rgb(29 78 216 / 0.26);
}

.reservation_form .bk-segment input:focus-visible + label {
  outline: 0;
  box-shadow: var(--bk-ring);
}

/* Price summary block. The "К оплате" caption used to live inside this tinted
   box, so the box was a caption + a value and ended up taller than the ticket
   control next to it. The caption is now a sibling .bk-label, which makes this
   cell the same shape as the "Билеты" cell: caption on top, control below. The
   control is stretched to the row height (.bk-row--pay) and padded so the box
   lands on the same line as the segmented control. */
.reservation_form .bk-field--price .bk-price {
  display: grid;
  place-items: center;
  padding: 0 0.875rem;
  border-radius: var(--bk-r-md);
  background: linear-gradient(135deg, var(--bk-brand-soft) 0%, #e6f6ff 100%);
  border: 1px solid color-mix(in srgb, var(--bk-brand-2) 18%, transparent);
  /* Sized off the shared ticket token, so it tracks the segmented control at
     every breakpoint instead of being a magic number that drifts out of sync. */
  min-block-size: calc(var(--bk-ticket-ctl) + 0.5rem);
  align-self: start;
}

.reservation_form.reservation_anchor .bk-body .reservation_form_price,
.reservation_form .bk-price-value {
  float: none;
  inline-size: 100%;
  block-size: auto;
  margin: 0;
  padding: 0;
  /* Сумма по центру поля «К оплате» (выравнивание по центру всего поля). */
  text-align: center;
  font-family: var(--bk-font-numeric);
  font-size: var(--bk-fs-xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bk-brand-ink);
  font-variant-numeric: tabular-nums;
}

.reservation_form.reservation_anchor .bk-body .reservation_form_price span,
.reservation_form .bk-price-value span {
  font-family: inherit;
  font-weight: inherit;
}

.reservation_form .bk-price-value::after {
  /* Белорусский рубль: код BYN (знак Br в Unicode не закреплён).
     После \00A0 обязателен пробел: B — hex-цифра, и без разделителя CSS
     прочитал бы \00A0B как один код-пойнт (символ гуджарати, «квадрат»). */
  content: "\00A0 BYN";
  font-size: 0.6em;
  font-weight: 700;
  opacity: 0.7;
}

.reservation_form .bk-price-value[data-empty="true"] {
  color: var(--bk-ink-3);
}

/* --------------------------------------------------------------------------
   11. Comment disclosure
   -------------------------------------------------------------------------- */
.reservation_form .dashed_link,
.reservation_form a.dashed_link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--bk-brand);
  font-size: var(--bk-fs-sm);
  font-weight: 700;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  /* Тап-таргет: строка была 20.5px — ниже порога WCAG 2.5.8 (24px) и
     вообще не попадала под палец. Место отдаёт сам блочный контейнер, так
     что рамка минимальной высоты ничего не сдвигает. */
  min-block-size: 2.75rem;
}

.reservation_form .dashed_link::before {
  content: "+";
  display: grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  background: var(--bk-brand-soft-2);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  transition: transform var(--bk-dur-2) var(--bk-ease),
    background-color var(--bk-dur-2) var(--bk-ease);
}

.reservation_form .dashed_link[aria-expanded="true"]::before {
  content: "\2212";
  transform: rotate(180deg);
  background: var(--bk-brand-2);
  color: #fff;
}

.reservation_form .dashed_link:hover {
  color: var(--bk-brand-3);
}

.reservation_form .dashed_link:hover::before {
  background: var(--bk-brand-2);
  color: #fff;
}

.reservation_form .dashed_link:focus-visible {
  outline: 0;
  box-shadow: var(--bk-ring);
  border-radius: var(--bk-r-xs);
}

.reservation_form .bk-collapse {
  display: grid;
  gap: 0.4375rem;
  animation: bk-slide var(--bk-dur-3) var(--bk-ease-out);
}

.reservation_form .bk-collapse[style*="display: none"] {
  animation: none;
}

@keyframes bk-slide {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* --------------------------------------------------------------------------
   12. OTP / SMS code
   -------------------------------------------------------------------------- */
.reservation_form .code_form {
  inline-size: 100%;
  max-inline-size: 30rem;
  margin: 0;
  overflow: visible;
}

.reservation_form .code_form_line {
  display: grid;
  gap: var(--bk-gap);
  grid-template-columns: 1fr;
  align-items: end;
}

.reservation_form .code_form_input {
  margin: 0;
  overflow: visible;
  min-inline-size: 0;
}

.reservation_form .code_form_btn {
  padding: 0;
  display: flex;
}

.reservation_form .code_form_extra_actions {
  margin: 0;
  text-align: center;
}

/* Segmented OTP display */
.reservation_form .bk-otp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--bk-r-md);
  background: var(--bk-warn-soft);
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: var(--bk-fs-sm);
  font-weight: 600;
  line-height: 1.45;
}

.reservation_form .bk-otp::before {
  content: "";
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.reservation_form .bk-otp b {
  font-variant-numeric: tabular-nums;
}

.reservation_form .bk-resend {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: 0.625rem;
  color: var(--bk-brand);
  font-size: var(--bk-fs-sm);
  font-weight: 700;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
  text-decoration: none;
  /* 28.5px → 44px. Это и есть путь для тех, кто не получил SMS. */
  min-block-size: 2.75rem;
}

.reservation_form .bk-resend:hover {
  color: var(--bk-brand-3);
}

.reservation_form .bk-resend:focus-visible {
  outline: 0;
  box-shadow: var(--bk-ring);
  border-radius: var(--bk-r-xs);
}

/* --------------------------------------------------------------------------
   13. Account / trips panel
   -------------------------------------------------------------------------- */
.reservation_form .my_orders_form {
  margin-block-start: var(--bk-gap);
  padding: clamp(1rem, 0.75rem + 1.2vw, 1.5rem);
  border-radius: var(--bk-r-lg);
  background: var(--bk-surface-2);
  border: 1px solid var(--bk-line);
  display: grid;
  gap: 0.875rem;
}

.reservation_form .my_orders_form .times_note,
.reservation_form.reservation_anchor .bk-body .times_note {
  inline-size: 100%;
  max-inline-size: 62ch;
  margin: 0;
  text-align: start;
  font-size: var(--bk-fs-sm);
  color: var(--bk-ink-3);
  line-height: 1.5;
}

.reservation_form .bk-panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--bk-fs-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bk-ink);
}

.reservation_form .bk-panel-title::before {
  content: "";
  inline-size: 0.25rem;
  block-size: 1.25rem;
  border-radius: var(--bk-r-pill);
  background: linear-gradient(180deg, var(--bk-brand-2), var(--bk-brand-3));
}

/* --------------------------------------------------------------------------
   Кабинет пользователя — centred, and the "Получить код" action pushed clear
   of the phone field.
   -------------------------------------------------------------------------- */
.reservation_form .bk-user {
  justify-items: center;
  text-align: center;
}

/* The panel is a grid, so justify-items alone would shrink-wrap the caption
   row too — the accent bar and the title would drift apart. */
.reservation_form .bk-user .bk-panel-title {
  justify-content: center;
}

.reservation_form .bk-user .bk-hint {
  margin: 0;
  max-inline-size: 36ch;
}

/* .code_form is capped at 30rem, so it needs centring as well as the panel. */
.reservation_form .bk-user__form {
  margin-inline: auto;
}

.reservation_form .bk-user__actions {
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  margin-block-start: 1.375rem;
}

.reservation_form .bk-user__actions .form_btn {
  inline-size: 100%;
}

/* Trip cards */
.reservation_form .code_form_line .code_form_input:has(> div > div > div) {
  display: block;
}

.reservation_form .bk-trip {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border-radius: var(--bk-r-md);
  background: var(--bk-surface);
  border: 1px solid var(--bk-line);
  box-shadow: var(--bk-e1);
  font-size: var(--bk-fs-sm);
  line-height: 1.45;
  color: var(--bk-ink-2);
  margin-block-start: 0.5rem;
}

.reservation_form .bk-trip b {
  color: var(--bk-ink);
  font-weight: 700;
}

.reservation_form .bk-trip .form_btn {
  justify-self: start;
  margin-block-start: 0.5rem;
  background: var(--bk-surface);
  color: var(--bk-danger);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bk-danger) 35%, transparent);
  block-size: 2.5rem;
  min-block-size: 2.5rem;
  font-size: var(--bk-fs-sm);
}

.reservation_form .bk-trip .form_btn:hover {
  background: var(--bk-danger-soft);
  box-shadow: inset 0 0 0 1.5px var(--bk-danger);
}

/* --------------------------------------------------------------------------
   14. Notes / disclaimers / legend
   -------------------------------------------------------------------------- */
.reservation_form .bk-notes {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px dashed var(--bk-line-strong);
  padding-block-start: clamp(0.875rem, 0.7rem + 0.8vw, 1.25rem);
}

.reservation_form .bk-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  font-size: var(--bk-fs-xs);
  line-height: 1.5;
  color: var(--bk-ink-3);
  text-align: start;
}

.reservation_form .bk-note--warn {
  color: var(--bk-warn);
  background: var(--bk-warn-soft);
  border: 1px solid #fde68a;
  border-radius: var(--bk-r-sm);
  padding: 0.625rem 0.75rem;
}

.reservation_form .bk-note--pay {
  color: var(--bk-ink-2);
  font-weight: 600;
}

.reservation_form .bk-note b,
.reservation_form .bk-note strong {
  color: inherit;
}

.reservation_form .bk-note .bk-star {
  color: var(--bk-danger);
  font-weight: 800;
}

/* Legacy blink animation, now scoped and opt-in */
.reservation_form .blinking {
  animation: bk-blink 1s steps(1, end) 5;
  color: var(--bk-brand);
  font-weight: 700;
}

@keyframes bk-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* --------------------------------------------------------------------------
   15. Skeletons (API in-flight)
   -------------------------------------------------------------------------- */
.reservation_form .bk-skel {
  position: relative;
  overflow: hidden;
  border-radius: var(--bk-r-sm);
  background: var(--bk-surface-3);
  min-block-size: 1.25rem;
}

.reservation_form .bk-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(255 255 255 / 0.75) 50%,
    transparent 100%
  );
  animation: bk-shimmer 1.4s var(--bk-ease) infinite;
}

.reservation_form .bk-skel--ctl {
  block-size: var(--bk-ctl-h);
  border-radius: var(--bk-r-md);
}

.reservation_form .bk-skel--label {
  inline-size: 40%;
  min-block-size: 0.875rem;
}

@keyframes bk-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* Empty state (no trips on this date) */
.reservation_form .bk-empty {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: var(--bk-r-md);
  background: var(--bk-surface-2);
  border: 1px dashed var(--bk-line-strong);
  color: var(--bk-ink-3);
  font-size: var(--bk-fs-sm);
  font-weight: 600;
  line-height: 1.45;
}

.reservation_form .bk-empty::before {
  content: "";
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   16. Toasts (replaces window.alert)
   -------------------------------------------------------------------------- */
.reservation_form .bk-toasts {
  position: fixed;
  z-index: 1080;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(26rem, calc(100% - 2rem));
  display: grid;
  gap: 0.5rem;
  pointer-events: none;
}

.reservation_form .bk-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: var(--bk-r-md);
  background: var(--bk-ink);
  color: #fff;
  box-shadow: var(--bk-e4);
  font-size: var(--bk-fs-sm);
  font-weight: 600;
  line-height: 1.45;
  animation: bk-toast-in var(--bk-dur-3) var(--bk-ease-out);
}

.reservation_form .bk-toast::before {
  content: "";
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.0625rem;
  background: currentColor;
  -webkit-mask: var(--bk-ico-info) no-repeat center / contain;
  mask: var(--bk-ico-info) no-repeat center / contain;
}

.reservation_form .bk-toast[data-kind="ok"] {
  background: #064e3b;
}

.reservation_form .bk-toast[data-kind="ok"]::before {
  -webkit-mask: var(--bk-ico-check) no-repeat center / contain;
  mask: var(--bk-ico-check) no-repeat center / contain;
}

.reservation_form .bk-toast[data-kind="err"] {
  background: #7f1d1d;
}

.reservation_form .bk-toast[data-kind="err"]::before {
  -webkit-mask: var(--bk-ico-alert) no-repeat center / contain;
  mask: var(--bk-ico-alert) no-repeat center / contain;
}

.reservation_form .bk-toast[data-leaving="true"] {
  animation: bk-toast-out var(--bk-dur-2) var(--bk-ease) forwards;
}

@keyframes bk-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

@keyframes bk-toast-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

.reservation_form {
  --bk-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E");
  --bk-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --bk-ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   17. Mobile sticky action bar
   -------------------------------------------------------------------------- */
.reservation_form .bk-sticky {
  position: fixed;
  z-index: 1070;
  inset-inline: 0;
  inset-block-end: 0;
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem clamp(0.75rem, 0.4rem + 1.6vw, 1.25rem);
  padding-block-end: max(0.625rem, env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-block-start: 1px solid var(--bk-line);
  box-shadow: 0 -4px 24px rgb(11 18 32 / 0.1);
  transform: translateY(110%);
  transition: transform var(--bk-dur-3) var(--bk-ease-out);
}

.reservation_form .bk-sticky[data-visible="true"] {
  transform: translateY(0);
}

.reservation_form .bk-sticky-price {
  display: grid;
  gap: 0.0625rem;
  min-inline-size: 0;
}

.reservation_form .bk-sticky-price span:first-child {
  font-size: var(--bk-fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
}

.reservation_form .bk-sticky-price span:last-child {
  font-size: var(--bk-fs-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bk-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.reservation_form .bk-sticky .form_btn {
  flex: 1 1 auto;
  max-inline-size: 16rem;
  margin-inline-start: auto;
  block-size: 3rem;
  min-block-size: 3rem;
  font-size: var(--bk-fs-md);
  padding: 0 1rem;
}

/* Room so the sticky bar never covers the last row of the form */
.reservation_form .bk-body {
  padding-block-end: 0.5rem;
}

/* --------------------------------------------------------------------------
   18. Container queries — component-level responsiveness
   -------------------------------------------------------------------------- */
@container bk (max-width: 640px) {
  .reservation_form .bk-row--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   19. Breakpoints (viewport, in case container queries are unsupported)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .reservation_form .bk-row--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Три одинаковых селекта: время отправления | посадка | прибытие. Третьему
     нет равного соседа, поэтому он занимает всю вторую строку. Платящей строке
     правило не подходит — кнопка прибита к колонке 2 базовым правилом у
     .bk-row--pay выше. */
  .reservation_form .bk-row--3:not(.bk-row--pay) > .reservation_form_item:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  /* На широких экранах платящая строка тоже двухколоночная: Билеты | К оплате,
     кнопка из базового правила стоит под «К оплате». Без этого переопределения
     кнопка осталась бы в колонке 3 трёхколоночного ряда — сдвинутой вправо
     от поля цены на целую колонку. */
  .reservation_form .bk-row--pay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .reservation_form .bk-steps .bk-step-label {
    display: none;
  }

  .reservation_form .bk-steps li {
    grid-template-columns: auto;
    justify-items: center;
  }

  .reservation_form .bk-steps li::after {
    inset-inline: 0;
    inset-block: auto auto;
    inset-block-start: 1.5rem;
    inset-inline-start: calc(50% + 1.125rem);
    inline-size: calc(100% - 2.25rem);
    margin-inline-start: 0;
  }
}

@media (max-width: 767.98px) {
  .reservation_form {
    padding: 1.5rem 0 0;
  }

  .reservation_form .reservation_form_wrapper {
    padding: 0 0.75rem;
  }

  .reservation_form .bk-card {
    border-radius: var(--bk-r-lg);
    border-inline: 0;
    box-shadow: none;
  }

  .reservation_form .bk-card::before {
    display: none;
  }

  .reservation_form .bk-row,
  .reservation_form .bk-row--2,
  .reservation_form .bk-row--3 {
    grid-template-columns: 1fr;
  }

  .reservation_form .bk-row--3 > .reservation_form_item:nth-child(3) {
    grid-column: auto;
  }

  /* Bigger touch targets */
  .reservation_form.reservation_anchor .bk-body .blue_skin,
  .reservation_form.reservation_anchor .bk-body .custom_form_control {
    block-size: 3.25rem;
    min-block-size: 3.25rem;
    font-size: 1rem; /* prevents iOS zoom-on-focus */
    padding-inline: 1rem;
  }

  .reservation_form.reservation_anchor .bk-body select.blue_skin,
  .reservation_form.reservation_anchor .bk-body select.custom_form_control {
    padding-inline-end: 2.875rem;
  }

  .reservation_form.reservation_anchor .bk-body .custom_form_control_input {
    font-size: 1rem;
  }

  /* The swap button is a real grid item now, so it needs no reserved lane. */
  .reservation_form .bk-row--route {
    padding-block-start: 0;
  }

  .reservation_form .reservation_form_direction_reverse {
    justify-self: center;
    margin-block-end: 0;
  }

  .reservation_form.reservation_anchor .bk-body .form_btn {
    block-size: 3.25rem;
    min-block-size: 3.25rem;
  }

  .reservation_form .form_btn.small {
    block-size: 3rem;
    min-block-size: 3rem;
    inline-size: 100%;
  }

  /* Phones: 40px ticket buttons. The token moves rather than the rule, so
     .bk-price follows automatically. */
  .reservation_form {
    --bk-ticket-ctl: 2.5rem;
  }

  .reservation_form .bk-toasts {
    inset-block-end: calc(4.75rem + max(0.5rem, env(safe-area-inset-bottom)));
  }

  /* Show the sticky bar on phones */
  .reservation_form .bk-sticky {
    display: flex;
  }

  .reservation_form .bk-body {
    padding-block-end: 4.5rem;
  }
}

@media (max-width: 359.98px) {
  .reservation_form .bk-segment {
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* Coarse pointers: bigger hit areas */
@media (pointer: coarse) {
  .reservation_form .reservation_form_direction_reverse {
    inline-size: 3rem;
    block-size: 3rem;
  }

  /* Touch gets 40px ticket buttons instead of the 36px default. */
  .reservation_form {
    --bk-ticket-ctl: 2.5rem;
  }

  .reservation_form .bk-resend,
  .reservation_form .dashed_link {
    min-block-size: 2.75rem;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   20. User preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reservation_form *,
  .reservation_form *::before,
  .reservation_form *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reservation_form .bk-skel::after {
    display: none;
  }
}

@media (prefers-contrast: more) {
  .reservation_form {
    --bk-line: #94a3b8;
    --bk-line-strong: #475569;
    --bk-ink-3: #334155;
    --bk-ring: 0 0 0 3px rgb(29 78 216 / 0.55);
  }

  .reservation_form.reservation_anchor .bk-body .blue_skin,
  .reservation_form.reservation_anchor .bk-body .custom_form_control {
    border-width: 2px;
  }
}

@media (prefers-color-scheme: dark) {
  .reservation_form {
    color-scheme: dark;

    --bk-bg: #070b14;
    --bk-surface: #101828;
    --bk-surface-2: #141d31;
    --bk-surface-3: #1b2438;
    --bk-surface-inset: #0c1322;

    --bk-ink: #eef2fb;
    --bk-ink-2: #c3cde0;
    --bk-ink-3: #93a1ba;

    --bk-line: #253148;
    --bk-line-strong: #33415e;

    --bk-brand: #60a5fa;
    --bk-brand-2: #3b82f6;
    --bk-brand-3: #38bdf8;
    --bk-brand-ink: #bfdbfe;
    --bk-brand-soft: #16203a;
    --bk-brand-soft-2: #1d2b4a;

    --bk-ok: #34d399;
    --bk-ok-soft: #0c2a22;
    --bk-warn: #fbbf24;
    --bk-warn-soft: #2a2008;
    --bk-danger: #f87171;
    --bk-danger-soft: #2c1414;

    --bk-e1: 0 1px 2px rgb(0 0 0 / 0.4);
    --bk-e2: 0 2px 6px rgb(0 0 0 / 0.45);
    --bk-e3: 0 6px 16px rgb(0 0 0 / 0.5);
    --bk-e4: 0 12px 32px rgb(0 0 0 / 0.6);
    --bk-ring: 0 0 0 3px rgb(96 165 250 / 0.4);
  }

  /* The base rule below pins the light aurora with !important ("Both longhands
     need the flag…"), so a normal-priority dark image here can never win: in
     dark mode the card stayed light while --bk-ink flipped to #eef2fb, and
     «Билет за пару минут» dropped to ~1.2:1. Same flag, same rule of thumb:
     the later !important declaration of the pair wins. */
  .reservation_form.reservation_anchor {
    background-image:
      radial-gradient(60rem 30rem at 8% -10%, #10224a 0%, transparent 60%),
      radial-gradient(50rem 26rem at 102% 4%, #0b2f3d 0%, transparent 62%),
      linear-gradient(180deg, #080d18 0%, #0b1120 100%) !important;
  }

  .reservation_form .bk-card {
    background: color-mix(in srgb, var(--bk-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .reservation_form .bk-sticky {
    background: rgb(16 24 40 / 0.82);
    border-block-start-color: var(--bk-line);
  }

  .reservation_form .bk-toast {
    background: #1e293b;
  }

  .reservation_form .bk-otp {
    border-color: #713f12;
  }

  .reservation_form.reservation_anchor .bk-body option {
    background: #101828;
    color: var(--bk-ink);
  }

  .reservation_form.reservation_anchor .bk-body .custom_form_control:has(
      .custom_form_control_input:not(:placeholder-shown)
    ),
  .reservation_form.reservation_anchor .bk-body .custom_form_control_input:not(:placeholder-shown) {
    background: color-mix(in srgb, var(--bk-brand-soft) 70%, var(--bk-surface));
  }

  .reservation_form .bk-field--price .bk-price {
    background: linear-gradient(135deg, #16203a 0%, #10283a 100%);
    border-color: #2b3a5c;
  }
}

/* Windows High Contrast / forced colors */
@media (forced-colors: active) {
  .reservation_form .bk-card,
  .reservation_form.reservation_anchor .bk-body .blue_skin,
  .reservation_form.reservation_anchor .bk-body .custom_form_control,
  .reservation_form .form_btn,
  .reservation_form .bk-price,
  .reservation_form .bk-sticky,
  .reservation_form .bk-toast {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
    forced-color-adjust: none;
  }

  .reservation_form.reservation_anchor .bk-body .custom_form_control:focus,
  .reservation_form.reservation_anchor .bk-body .custom_form_control:focus-visible,
  .reservation_form .form_btn:focus-visible,
  .reservation_form .bk-segment input:focus-visible + label {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .reservation_form .bk-segment input:checked + label {
    background: Highlight;
    color: HighlightText;
  }

  .reservation_form .form_btn.disabled {
    color: GrayText;
    border-color: GrayText;
  }

  .reservation_form .bk-select::after,
  .reservation_form .bk-otp::before,
  .reservation_form .bk-empty::before,
  .reservation_form .bk-toast::before {
    background: CanvasText;
  }
}

/* --- Custom Datepicker ----------------------------------------------------- */
.bk-datepicker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  inline-size: 100%;
}

.bk-datepicker input {
  padding-inline-end: 2.875rem;
}

/* Иконка позиционируется от .bk-datepicker-control, а не от .bk-datepicker.
   Раньше `inset-block: 0` растягивало её по всей обёртке, а та кроме поля
   содержала ещё и подпись .bk-hint: замерено было 70.8px против 52px у поля,
   и центр глифа уезжал на 9.4px вниз (ровно на половину высоты подписи).
   Теперь контекст — бокс, в котором лежит только поле, поэтому иконка
   центрируется по его высоте при любой высоте поля. */
.bk-datepicker-control {
  position: relative;
  display: flex;
}

.bk-datepicker-icon {
  position: absolute;
  inset-inline-end: 0.75rem;
  inset-block: 0;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  color: var(--bk-ink-2);
  opacity: 0.7;
}

.bk-datepicker input:focus + .bk-datepicker-icon {
  color: var(--bk-brand);
  opacity: 1;
}

/* --- Custom datepicker -----------------------------------------------------
   Панель собрана на токенах сайта (--bk-brand, --bk-brand-soft, --bk-r-lg,
   --bk-e3, --bk-ring) — ни одного нового цвета, поэтому тёмная тема
   приходит сама: у токенов есть свои значения в prefers-color-scheme: dark.

   Ширина ограничена 100% — то есть шириной самого поля. Единственная
   граница, которая верна всегда: 100vw не годится, он включает полосу
   прокрутки (в iframe 360px при видимых 345px), а панель привязана к
   левому краю поля, а не вьюпорта, и уезжала за экран на 6px. Панель
   шире поля не должна быть: на десктопе срабатывает потолок 20rem. */
.bk-calendar {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 0.375rem);
  z-index: 100;
  inline-size: min(20rem, 100%);
  background: var(--bk-surface);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r-lg);
  box-shadow: var(--bk-e3);
  padding: 0.75rem;
  animation: bk-calendar-in 0.18s var(--bk-ease-out);
}

@keyframes bk-calendar-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bk-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* Мягкая заливка брендом повторяет градиент hero — панель читается частью
     сайта, а не чужой поплавок. Поверх padding, поэтому кнопки месяцев
     оказываются на своём фоне. */
  margin: -0.75rem -0.75rem 0.5rem;
  padding: 0.75rem 0.75rem 0.625rem;
  border-start-start-radius: calc(var(--bk-r-lg) - 1px);
  border-start-end-radius: calc(var(--bk-r-lg) - 1px);
  background: var(--bk-brand-soft);
}

.bk-calendar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--bk-surface);
  color: var(--bk-brand);
  cursor: pointer;
  transition: background-color var(--bk-dur-2) var(--bk-ease),
              color var(--bk-dur-2) var(--bk-ease),
              border-color var(--bk-dur-2) var(--bk-ease);
}

.bk-calendar-nav:hover {
  background: var(--bk-brand);
  border-color: var(--bk-brand);
  color: #fff;
}

.bk-calendar-nav:focus-visible {
  outline: 0;
  box-shadow: var(--bk-ring);
}

.bk-calendar-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--bk-brand);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.bk-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: var(--bk-fs-2xs);
  font-weight: 700;
  color: var(--bk-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-block: 0.25rem;
  margin-block-end: 0.25rem;
  border-block-end: 1px solid var(--bk-line);
}

.bk-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.125rem;
}

/* Скруглённый квадрат, а не круг: 42 круга в сетке 7×6 выглядят россыпью,
   а радиус 12px продолжает язык сайта (--bk-r-md 14px, --bk-r-lg 20px). */
.bk-calendar-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  border-radius: 12px;
  font-size: var(--bk-fs-sm);
  font-weight: 500;
  color: var(--bk-ink);
  cursor: pointer;
  transition: background-color var(--bk-dur-2) var(--bk-ease),
              color var(--bk-dur-2) var(--bk-ease),
              border-color var(--bk-dur-2) var(--bk-ease);
}

.bk-calendar-day:focus-visible {
  outline: 0;
  border-color: var(--bk-brand);
  box-shadow: var(--bk-ring);
}

.bk-calendar-day:hover:not(.disabled):not(.other-month) {
  background: var(--bk-brand-soft);
  color: var(--bk-brand);
  border-color: color-mix(in srgb, var(--bk-brand) 24%, transparent);
}

/* Сегодня — заливка брендом с обводкой, чтобы его нельзя было спутать с
   выбранным днём: у выбранного ниже градиент и тень. */
.bk-calendar-day.today:not(.selected) {
  background: var(--bk-brand-soft);
  border-color: color-mix(in srgb, var(--bk-brand) 40%, transparent);
  color: var(--bk-brand);
  font-weight: 700;
}

/* Градиент собран из --bk-brand, а не зашит синим: в тёмной теме токен
   становится #60a5fa, и зашитое значение осталось бы светлым пятном. */
.bk-calendar-day.selected {
  background: linear-gradient(135deg,
    var(--bk-brand),
    color-mix(in srgb, var(--bk-brand) 78%, #fff));
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--bk-brand) 35%, transparent);
}

.bk-calendar-day.disabled {
  color: var(--bk-ink-3);
  opacity: 0.4;
  cursor: not-allowed;
}

.bk-calendar-day.other-month {
  color: var(--bk-ink-3);
  opacity: 0.5;
}

.bk-calendar-day.other-month:hover {
  background: transparent;
  border-color: transparent;
  color: var(--bk-ink-3);
}

.bk-calendar-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-start: 0.625rem;
  padding-block-start: 0.625rem;
  border-block-start: 1px solid var(--bk-line);
}

/* Пилюли, как у значка «официальный перевозчик» и кнопок магазинов. */
.bk-calendar-today,
.bk-calendar-clear {
  font-family: inherit;
  font-size: var(--bk-fs-xs);
  font-weight: 700;
  color: var(--bk-brand);
  background: var(--bk-brand-soft);
  border: 1px solid color-mix(in srgb, var(--bk-brand) 20%, transparent);
  padding: 0.4375rem 0.875rem;
  cursor: pointer;
  border-radius: 50rem;
  transition: background-color var(--bk-dur-2) var(--bk-ease),
              color var(--bk-dur-2) var(--bk-ease);
}

.bk-calendar-today:hover,
.bk-calendar-clear:hover {
  background: var(--bk-brand);
  border-color: var(--bk-brand);
  color: #fff;
}

.bk-calendar-today:focus-visible,
.bk-calendar-clear:focus-visible {
  outline: 0;
  box-shadow: var(--bk-ring);
}

/* High contrast / forced colors */
@media (forced-colors: active) {
  .bk-calendar {
    border-color: CanvasText;
    background: Canvas;
  }
  .bk-calendar-day {
    color: CanvasText;
  }
  .bk-calendar-day.today,
  .bk-calendar-day.selected {
    background: Highlight;
    color: HighlightText;
  }
  .bk-calendar-day.disabled {
    opacity: 0.5;
  }
  .bk-calendar-day.other-month {
    color: GrayText;
  }
  .bk-calendar-nav {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }
  .bk-calendar-nav:hover {
    background: Highlight;
    color: HighlightText;
  }
  .bk-calendar-today,
  .bk-calendar-clear {
    color: CanvasText;
  }
  .bk-calendar-today:hover,
  .bk-calendar-clear:hover {
    background: Highlight;
    color: HighlightText;
  }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .reservation_form {
    background: #fff !important;
    color: #000;
  }

  .reservation_form .bk-sticky,
  .reservation_form .bk-toasts,
  .reservation_form .bk-skel,
  .reservation_form .dashed_link,
  .reservation_form .bk-resend {
    display: none !important;
  }

  .reservation_form .bk-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}