/* ============================================================
   ОТЕЛЬ «РОМАНТИК» — СТРАНИЦА «БРОНИРОВАНИЕ» (/booking)
   Полная форма бронирования TravelLine (оформление — в личном кабинете TravelLine). Хиро и крошки — 1-в-1 с docs.css,
   карточка модуля — как на действующем сайте (bp-card), в токенах нашей системы.
   ============================================================ */

/* ---------- 1. Верхняя тёмная полоса-хиро ----------
   Один-в-один с offers.html/rooms.html: тёмная хвойная секция под
   фиксированной шапкой, паттерн по бокам, водяной знак справа. */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(0, 91, 93, 0.55) 0%, transparent 60%),
    linear-gradient(160deg, var(--pine-900) 0%, var(--pine-800) 58%, var(--emerald-900) 100%);
  color: var(--fg);
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-8);
}
@media (min-width: 1024px) {
  .page-hero {
    padding-top: calc(var(--header-h) + var(--sp-9));
    padding-bottom: var(--sp-9);
  }
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .watermark--hero { top: 52%; }
.page-hero__inner { max-width: 62ch; }
.page-hero .eyebrow { color: var(--accent); }
.page-hero__title {
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.375rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.page-hero__lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--fg-muted);
  max-width: 56ch;
  text-wrap: pretty;
}
/* ---------- 2. Хлебные крошки (1-в-1 с offers.html) ---------- */
.breadcrumbs { margin-bottom: var(--sp-5); }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs a { color: var(--fg-muted); transition: color var(--dur-fast) var(--ease-out); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current="page"] { color: var(--fg); font-weight: var(--fw-medium); }
.breadcrumbs__sep {
  width: 0.62em;
  height: 0.62em;
  flex-shrink: 0;
  background-color: var(--accent);
  -webkit-mask-image: var(--star-src);
          mask-image: var(--star-src);
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: 0.8;
}

/* ---------- Модуль бронирования ---------- */
.booking-page { background: var(--bg-soft); padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 7vw, 4rem); }
.bp-card {
  position: relative; z-index: 2;
  margin-top: -2rem;
  background: var(--milk-50, #FBF9F4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -40px rgba(20, 35, 30, .4);
  padding: clamp(.5rem, 1.5vw, 1rem);
}
#tl-booking-form { width: 100%; max-width: 1150px; margin: 0 auto; z-index: 0; scroll-margin-top: calc(var(--header-h, 76px) + 20px); min-height: 320px; font-family: var(--font-body); color: var(--fg); }
@media (max-width: 767px) {
  .booking-page > .container { padding-inline: 0; }
  .bp-card { padding: 0; border-radius: 0; border-left: 0; border-right: 0; margin-top: -1.5rem; }
}