/* booking.css */

.booking-flow {
  --booking-line: #c6c1a1;
  --booking-progress-width: min(914px, 100%);
  --booking-progress-column: 294px;
  --booking-progress-gap: 8px;
  --booking-progress-line-left: 41px;
  --booking-progress-line-max: 255px;
  --booking-progress-dot-size: 30px;
  --booking-widget-search-padding: 18px 17px;
  --booking-widget-button-height: auto;
  --booking-transfer-action-width: 155px;
  --booking-transfer-step-indent: 62px;
  --booking-transfer-marker-size: 30px;
  --booking-transfer-line-left: 14px;
  --booking-transfer-line-top: 38px;
  --booking-total-actions-gap: 25px;
  --booking-total-button-padding: 0 25px;
  --booking-total-secondary-width: 213px;
  --booking-action-compact-height: 49px;
  --booking-action-compact-padding: 0 10px;
  --booking-action-compact-font-size: 12px;
  --booking-action-compact-secondary-width: 185px;
  --booking-action-compact-secondary-letter-spacing: 1.8px;
  --booking-action-compact-primary-width: 180px;
  --booking-action-compact-primary-letter-spacing: 2.4px;
  width: 100%;
  min-height: 100vh;
  padding: 192px 0 114px;
  background: #fffced;
}

/* Multi-room booking flow. */
.booking-widget:not(:has(.booking-widget__search)) {
  grid-template-columns: repeat(3, minmax(220px, 305px));
}

.booking-room-guests {
  display: grid;
}

.booking-room-guests__head[hidden],
.booking-room-guests__remove[hidden],
.booking-room-guests__add[hidden],
.booking-room-guests__limit[hidden] {
  display: none;
}

/* Availability pill (Figma 1685:8742): "We have N rooms left" above the card title. */
.room-card__availability {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  margin: 0 0 14px;
  padding: 7px 20px;
  border: 1px solid var(--booking-line, #c6c1a1);
  border-radius: 20px;
  color: #040404;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 16px;
}

.booking-room-guests__list {
  display: grid;
}

.booking-room-guests__room + .booking-room-guests__room {
  border-top: 1px solid var(--booking-line, #c6c1a1);
  padding-top: 18px;
}

.booking-room-guests__head {
  padding: 0 28px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.booking-room-guests__remove,
.booking-room-guests__add {
  border: 0;
  background: transparent;
  color: #141414;
  font: inherit;
  cursor: pointer;
}

.booking-room-guests__remove {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.booking-room-guests__add {
  min-height: 58px;
  border-top: 1px solid var(--booking-line, #c6c1a1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.booking-room-guests__add span {
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.booking-room-guests__limit {
  margin: 0;
  padding: 18px 28px 22px;
  border-top: 1px solid var(--booking-line, #c6c1a1);
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
}

.booking-room-guests__limit a {
  display: block;
  color: inherit;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.booking-dropdown--guest:has(.booking-room-guests) {
  width: min(602px, calc(100vw - 48px));
  height: auto;
  max-height: min(836px, calc(100vh - 160px));
  overflow-y: auto;
  background: #fffced;
}

.booking-room-switcher {
  position: relative;
  width: 100%;
  min-height: 118px;
  margin-top: 42px;
  padding: 20px clamp(36px, 8vw, 170px);
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  background: #e9e4c9;
  box-shadow: 0 0 0 100vmax #e9e4c9;
  clip-path: inset(-1px -100vmax);
}

/* No hairline top/bottom edges — the strip is a flat colour band per Figma
   1685:5360; the borders here read as an outline the design doesn't have. */
.booking-room-switcher::before,
.booking-room-switcher::after {
  content: none;
}

.booking-room-switcher__copy {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.booking-room-switcher__copy strong {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.booking-room-switcher__copy span {
  font-family: var(--font-heading);
  font-size: 20px;
}

.booking-room-switcher__arrow {
  position: relative;
  width: 44px;
  height: 44px;
}

.booking-room-switcher__arrow:not(.is-placeholder)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 1px solid #141414;
  border-right: 1px solid #141414;
}

.booking-room-switcher__arrow.is-prev::before {
  transform: translate(-50%, -50%) rotate(-135deg);
}

.booking-room-switcher__arrow.is-next::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.booking-edit-banner {
  width: min(1239px, calc(100vw - 48px));
  min-height: 96px;
  margin: 42px auto 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: 112px 1fr auto;
  /* The label sits on its own row above a details/cancel row so «Отменить
     редактирование» lands on the same line as the date/guest details (Figma
     1685:6175). The 1fr rows top and bottom absorb the band's slack, centring the
     label+details pair while the photo (grid-row 1/-1) still fills the full 96px. */
  grid-template-rows: 1fr auto auto 1fr;
  align-items: center;
  column-gap: 20px;
  row-gap: 6px;
  background: #e9e4c9;
  box-shadow: 0 0 0 100vmax #e9e4c9;
  clip-path: inset(0 -100vmax);
}

.booking-edit-banner__image {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  min-height: 96px;
  background-position: center;
  background-size: cover;
}

.booking-edit-banner__label {
  grid-column: 2 / -1;
  grid-row: 2;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.booking-edit-banner__copy {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.booking-edit-banner__copy h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
}

/* Room name • dates • guests, each detail led by a 2px dot with 8px either side
   (Figma 1685:6180). The details used to sit in auto-sized grid columns, so the
   dates started wherever the room name happened to end and jumped between rooms;
   as one flowing list the run reads as deliberate rather than adrift. */
.booking-edit-banner__copy span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
}

.booking-edit-banner__copy span::before {
  content: "";
  flex: none;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}

.booking-edit-banner__cancel,
.booking-room-card__change {
  min-height: var(--button-height);
  padding: 0 25px;
}

/* Qualified with .button-secondary — which this link also carries — purely to win
   on specificity. responsive.css loads after this file and pads every secondary
   button (padding-left/right: 22px below 1179, min-height: 44px below 768); a
   plain `.booking-edit-banner__cancel` ties on specificity and loses on order, so
   the link kept a 44px-wide gutter each side and stretched the banner. This is a
   text link, not a button, and must measure exactly its text. */
.booking-edit-banner__cancel.button-secondary {
  grid-column: 3;
  grid-row: 3;
  align-self: center;
  justify-self: end;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Desktop/tablet keep the full label; the compact «Отменить» is mobile-only. */
.booking-edit-banner__cancel-short {
  display: none;
}

/* «НОМЕР N» / «Убрать ✕» sit flush with the card (photo) edges at every width
   (Figma 1685:6780 desktop, 1685:8943 mobile) — no inner side padding. */
.booking-room-card__selection-head {
  grid-column: 1 / -1;
  min-height: 54px;
  padding: 0;
  border-bottom: 1px solid var(--booking-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Single room: keep the head as the grid's first row (so the media/body stay in
   the right cells) but flatten it — no «НОМЕР 1» label, no strip, no border. */
.booking-room-card__selection-head--empty {
  min-height: 0;
  border-bottom: 0;
  font-size: 0;
  line-height: 0;
}

.booking-room-card__selection-head a {
  color: inherit;
  letter-spacing: 0;
  text-transform: none;
}

/* Desktop «Убрать ×» reads at 17px per Figma 1685:6780; tablet/mobile keep
   their own sizes. */
@media (min-width: 1180px) {
  .booking-room-card__selection-head a {
    font-size: 17px;
  }
}

.booking-room-card__change {
  margin-left: auto;
}

/* Step-3 room list rhythm (Figma 1685:10833): tight head-to-card gap, thin
   divider after each card, moderate gap before the next room heading. */
.booking-confirm__rooms {
  display: grid;
  gap: 0;
}

.booking-confirm__rooms > .booking-confirm__room-label:not(:first-child) {
  margin-top: 40px;
}

.booking-confirm__rooms > .booking-confirm__room {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--booking-line, #c6c1a1);
}

.booking-confirm__rooms > .booking-confirm__room:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.booking-flow-loader {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  /* Slightly translucent cream (Figma 1685-7068): the page stays faintly
     visible behind the booking transition loader. The site's first-load
     preloader keeps its own opaque background. */
  background: rgba(255, 252, 237, 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

/* Appears instantly, and only fades on the way out. This loader exists to cover a
   real page navigation, so a fade-in races the browser: the click starts both the
   180ms fade and the navigation, and an engine that stops painting the old page as
   soon as the next one commits would show a barely-there loader, or none at all. */
.booking-flow-loader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

/* The transition loader reuses the site preloader ring, whose fill (see
   preloader.css: two rotating half-arcs, a transform so the compositor keeps
   it moving through the main-thread stalls of a page load) starts at paint —
   while this loader is still hidden. Suspend it until the loader is shown, so
   the fill starts from empty on every show. */
/* Кольцо (preloader.css) начинает заливку с первой отрисовки страницы — то есть
   пока этот лоадер ещё спрятан. Останавливаем до показа, чтобы каждый переход
   начинался с пустого кольца. */
.booking-flow-loader .site-preloader__value {
  animation: none;
}

/* Те же 1500 мс, что и у прелоадера сайта. Медленную заливку за 6 с пробовали —
   читалось как зависшее кольцо: переход длится 1–3 с, и заливка не успевала
   дойти до конца. */
.booking-flow-loader.is-visible .site-preloader__value {
  animation: site-preloader-fill 1500ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .booking-flow-loader.is-visible .site-preloader__value {
    animation: none;
    stroke-dashoffset: 0;
  }
}

html.is-booking-flow-loading {
  overflow: hidden;
}

@media (max-width: 767px) {
  /* The multi-room widget has no search button, so this selector is what wins
     for it on mobile (higher specificity than the plain `.booking-widget`
     compact rule further down). Give it the same compact three-column layout —
     date | guests | codes in one row — not a single stacked column, which is
     what `1fr` collapsed it to. */
  .booking-widget:not(:has(.booking-widget__search)) {
    grid-template-columns: minmax(80px, 0.85fr) minmax(112px, 1fr) minmax(128px, 1.15fr);
  }

  .booking-dropdown--guest:has(.booking-room-guests) {
    width: 100%;
    max-height: none;
  }

  .booking-room-guests__head,
  .booking-room-guests__limit {
    padding-inline: 18px;
  }

  .booking-room-switcher {
    min-height: 102px;
    margin-top: 28px;
    padding: 16px 12px;
    grid-template-columns: 36px 1fr 36px;
  }

  .booking-room-switcher__copy strong {
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .booking-room-switcher__copy span {
    font-size: 17px;
  }

  /* Mobile edit banner (Figma 1685:9593, drawn at 375): an 80px strip of
     photo | (label above, room name and underlined «Отменить» below). No
     date/guest rows; the cancel is a link, not a full-width outline button.
     Both lines are nowrap by design — the copy column is sized so they fit. */
  .booking-edit-banner {
    /* Full-bleed here, unlike the desktop band: the design runs the strip edge to
       edge and insets its contents by 16px, which is also what leaves the copy
       column the 238px both of its lines are sized against. */
    width: 100%;
    /* First track is the 90px photo plus its 16px gutter, so the copy still starts
       at 122px. The gutter lives in the track rather than in column-gap because the
       design's second row is a justify-between pair: the space between the room
       name and «Отменить» is whatever the name leaves over, not a fixed gutter, and
       a real column-gap here would steal from the name and clip the longer ones. */
    grid-template-columns: 106px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0;
    row-gap: 14px;
    min-height: 80px;
    padding: 0 16px;
  }

  .booking-edit-banner__image {
    grid-row: 1 / -1;
    align-self: stretch;
    width: 90px;
    min-height: 80px;
  }

  /* The label spans the full copy+cancel width on its own row; the room name and
     cancel link share the second row (Figma 1685:9593). */
  .booking-edit-banner__label {
    grid-column: 2 / -1;
    grid-row: 1;
    align-self: end;
    letter-spacing: 2.4px;
    line-height: 12px;
    white-space: nowrap;
  }

  .booking-edit-banner__copy {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    min-width: 0;
  }

  .booking-edit-banner__copy h2 {
    font-size: 14px;
    line-height: 16px;
    /* Every real room name fits on this line, which is why the design draws it
       nowrap. min-width/ellipsis only cover a name longer than any we have: with
       nowrap alone the column cannot shrink under the text, and it would shove
       «Отменить» past the clipped edge of the strip. */
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .booking-edit-banner__copy span {
    display: none;
  }

  .booking-edit-banner__cancel.button-secondary {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    width: auto;
    line-height: 16px;
    text-transform: none;
    white-space: nowrap;
  }

  .booking-edit-banner__cancel-full {
    display: none;
  }

  .booking-edit-banner__cancel-short {
    display: inline;
  }

  /* «НОМЕР N» and «Убрать ×» sit flush with the card/photo edges on mobile
     (Figma 1685:8943), matching the tablet head fix. */
  .booking-room-card__selection-head {
    min-height: 48px;
    padding-inline: 0;
  }

  /* …but a single room renders the head EMPTY, and the 48px above re-asserts a
     height the base collapse already zeroed — restate it here (same specificity,
     later wins) or the empty head eats 48px above the photo. */
  .booking-room-card__selection-head--empty {
    min-height: 0;
  }

  .booking-room-card__selection-head a {
    font-size: 16px;
  }

  .booking-room-card__change {
    width: 100%;
    margin: 16px 0 0;
  }
}

.booking-flow__head {
  width: min(1530px, calc(100vw - 48px));
  margin: 0 auto;
}

.booking-flow__title {
  margin: 0;
  color: #000;
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  line-height: 75px;
  text-align: center;
}

.booking-progress {
  width: var(--booking-progress-width, min(914px, 100%));
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(3, var(--booking-progress-column, 294px));
  column-gap: var(--booking-progress-gap, 8px);
}

.booking-progress__step {
  position: relative;
  padding-top: 38px;
  color: #040404;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}

.booking-progress__step.is-linkable {
  cursor: pointer;
}

.booking-progress__step.is-disabled {
  pointer-events: none;
}

.booking-progress__step::before {
  content: "";
  position: absolute;
  top: 15px;
  left: var(--booking-progress-line-left, 41px);
  width: 100%;
  max-width: var(--booking-progress-line-max, 255px);
  height: 2px;
  background: #dbd6c2;
}

.booking-progress__step.is-current::before,
.booking-progress__step.is-complete::before {
  background: #141414;
}

.booking-progress__number {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--booking-progress-dot-size, 30px);
  height: var(--booking-progress-dot-size, 30px);
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dbd6c2;
  color: #141414;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.booking-progress__step.is-current .booking-progress__number,
.booking-progress__step.is-complete .booking-progress__number {
  background: #141414;
  color: #fff;
}

.booking-progress__label {
  display: block;
  white-space: nowrap;
}

.booking-widget {
  position: relative;
  width: 100%;
  min-height: 123px;
  margin-top: 44px;
  padding: 19px 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 305px)) minmax(220px, 269px);
  justify-content: center;
  background: #fffced;
}

.booking-widget__field,
.booking-widget__search {
  position: relative;
  min-height: 86px;
  border: 1px solid var(--booking-line);
}

.booking-widget__field + .booking-widget__field,
.booking-widget__search {
  border-left: 0;
}

/* Only shown in the compact tablet/mobile row (see the max-width: 1179px block);
   on the desktop grid the fields' own side borders are the separators, and a
   stray grid item here would throw the column count off. */
.booking-widget__divider {
  display: none;
}

.booking-widget__toggle,
.booking-widget__field {
  color: #040404;
}

.booking-widget__toggle {
  width: 100%;
  height: 100%;
  padding: 15px 48px 15px 24px;
  border: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  background: transparent;
  text-align: left;
}

.booking-widget__toggle:hover,
.booking-widget__toggle:focus-visible {
  background: transparent;
}

.booking-widget__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.43;
  text-transform: uppercase;
}

.booking-widget__value {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.45;
}

.booking-widget__field:not(.booking-widget__field--date)::before {
  content: attr(data-label);
}

.booking-widget__field label {
  outline: 0;
}

.booking-widget__field > .booking-widget__label {
  position: absolute;
  top: 15px;
  left: 24px;
  pointer-events: none;
}

.booking-widget__field--special .booking-widget__label {
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}

.booking-widget__field--special .booking-widget__toggle .booking-widget__label {
  transform: none;
}

.booking-widget__field::after {
  content: "";
  position: absolute;
  right: 25px;
  top: 47px;
  width: 7px;
  height: 13px;
  background: #171513;
  mask: url("../images/figma/chevron-figma.svg") center / contain no-repeat;
  -webkit-mask: url("../images/figma/chevron-figma.svg") center / contain no-repeat;
  transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}

.booking-widget__field--special::after {
  top: 50%;
}

.booking-widget__field--date {
  z-index: 8;
}

.booking-widget__field--guest {
  z-index: 7;
}

.booking-widget__field--currency {
  z-index: 6;
}

.booking-widget__field--special {
  z-index: 5;
}

.booking-widget__search {
  padding: var(--booking-widget-search-padding, 18px 17px);
}

.booking-widget__button {
  width: 100%;
  min-height: var(--button-height);
  height: var(--booking-widget-button-height, auto);
  padding: 0 24px;
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
}

.booking-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  border: 1px solid var(--booking-line);
  background: #fffced;
  box-shadow: 0 18px 60px rgba(20, 20, 20, 0.12);
}

.booking-dropdown[hidden] {
  display: none;
}

.booking-dropdown__mobile-title,
.booking-dropdown__mobile-close,
.booking-dropdown__cancel-mobile,
.booking-calendar__nav--mobile-next {
  display: none;
}

.hero-booking-bar .hero-booking-bar__dropdown {
  border-bottom: 0;
}

.booking-widget .booking-dropdown {
  top: calc(100% + 1px);
  left: -1px;
  border-top: 0;
}

.booking-dropdown--calendar {
  border-color: var(--booking-line);
}

.booking-dropdown--calendar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: 1px;
  background: var(--booking-line);
  pointer-events: none;
}

.booking-dropdown--guest {
  box-sizing: border-box;
  width: min(609px, calc(100vw - 48px));
  min-height: 369px;
  padding: 36px 21px 22px 25px;
  display: flex;
  flex-direction: column;
}

.booking-guest-dropdown__row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  column-gap: 32px;
}

.booking-guest-dropdown__row + .booking-guest-dropdown__row {
  margin-top: 34px;
}

.booking-guest-dropdown__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: #040404;
  font-size: 18px;
  line-height: 1.12;
}

.booking-guest-dropdown__copy strong {
  font-family: var(--font-heading);
  font-weight: 400;
}

.booking-guest-dropdown__copy span {
  font-family: var(--font-body);
  font-weight: 300;
}

.booking-guest-dropdown__counter {
  min-width: 0;
  display: grid;
  grid-template-columns: 50px minmax(18px, auto) 50px;
  align-items: center;
  column-gap: 16px;
}

.booking-guest-dropdown__counter > span {
  min-width: 18px;
  color: #040404;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.booking-guest-dropdown__step {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid #c6c1a1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: #040404;
  cursor: pointer;
}

.booking-guest-dropdown__step:hover,
.booking-guest-dropdown__step:focus-visible {
  background: var(--button-hover-fill);
}

.booking-guest-dropdown__step::before,
.booking-guest-dropdown__step.is-plus::after {
  content: "";
  grid-area: 1 / 1;
  width: 13px;
  height: 1px;
  background: currentColor;
}

.booking-guest-dropdown__step.is-plus::after {
  width: 1px;
  height: 13px;
}

.booking-guest-dropdown__step:disabled {
  opacity: 0.42;
  cursor: default;
}

.booking-guest-dropdown__step:disabled:hover,
.booking-guest-dropdown__step:disabled:focus-visible {
  background: transparent;
}

.booking-guest-dropdown__actions {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  justify-content: flex-end;
}

.booking-guest-dropdown__actions .button-primary,
.booking-guest-dropdown__actions .button-secondary {
  width: 145px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
}

.booking-widget .booking-dropdown--currency {
  width: 305px;
  min-height: 173px;
  padding: 18px 0;
}

.booking-currency-dropdown__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.booking-currency-dropdown__option::after {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 8px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  opacity: 0;
  transform: rotate(-45deg);
}

.booking-currency-dropdown__option[aria-selected="true"]::after {
  opacity: 1;
}

.booking-dropdown .booking-calendar {
  width: 100%;
  margin: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-dropdown--calendar .booking-calendar {
  min-height: 100%;
}

.booking-dropdown--calendar .booking-calendar__month {
  border-color: var(--booking-line);
}

.booking-dropdown .booking-calendar__month {
  min-height: 360px;
  padding: 30px 28px 18px;
}

.booking-dropdown .booking-calendar__month + .booking-calendar__month {
  border-left: 1px solid var(--booking-line);
}

.booking-dropdown--calendar .booking-calendar__month + .booking-calendar__month {
  border-left: 0;
}

.booking-dropdown .booking-calendar__header {
  margin-bottom: 24px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
}

/* Month + year title (e.g. "MARCH 2026") — Jost, uppercase, letter-spaced, per
   Figma. Targets the title element directly so it reads the same in every
   calendar (main + transfer) and at every breakpoint, while the ‹ › nav arrows
   keep the header's own font. */
.booking-calendar__header [data-calendar-title] {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2.8px;
  text-transform: uppercase;
}

.booking-dropdown .booking-calendar__grid {
  column-gap: 2px;
  row-gap: 8px;
}

.booking-dropdown .booking-calendar__day {
  min-height: 38px;
  font-family: var(--font-heading);
  font-size: 18px;
}

.booking-dropdown .booking-calendar__day.is-selected-start,
.booking-dropdown .booking-calendar__day.is-selected-end {
  background: #141414;
  color: #fffced;
  box-shadow: inset 0 0 0 1px #141414;
}

.booking-dropdown .booking-calendar__day.is-selected-mid {
  background: #c6c1a1;
  color: #040404;
}

.booking-dropdown__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 26px 20px;
}

.booking-dropdown__actions .button-primary,
.booking-dropdown__actions .button-secondary {
  min-height: var(--button-height);
  padding: 0 26px;
  font-size: var(--button-font-size);
}

.booking-room-list,
.booking-services {
  width: min(1239px, calc(100vw - 48px));
  margin: 65px auto 0;
}

.booking-room-list {
  display: grid;
  gap: 60px;
}

.booking-no-rooms {
  position: relative;
  width: min(1239px, calc(100vw - 48px));
  min-height: 96px;
  margin: 48px auto 0;
  padding: 24px 42px;
  display: flex;
  align-items: center;
  background: #f7e6d8;
  color: #040404;
}

.booking-no-rooms::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 2px;
  height: 61px;
  border-radius: 999px;
  background: #ff5f4d;
  transform: translateY(-50%);
}

.booking-no-rooms__content {
  width: min(713px, 100%);
  display: grid;
  gap: 16px;
}

.booking-no-rooms__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.booking-no-rooms__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

.booking-no-rooms + .booking-room-list {
  margin-top: 48px;
}

.booking-flow .booking-room-card {
  min-height: 374px;
  display: grid;
  grid-template-columns: 442px minmax(0, 1fr);
  border-color: var(--booking-line);
  background: #fffced;
}

.booking-flow .room-card__media {
  position: relative;
  min-height: 100%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.booking-flow .room-card__gallery-track {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.booking-flow .room-card__gallery-track::-webkit-scrollbar {
  display: none;
}

.booking-flow .room-card__gallery-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* Opaque placeholder so a lazy slide whose <img> hasn't loaded yet shows a
     neutral fill — not the media's poster (the FIRST photo) bleeding through
     behind the empty image, which read as one slide overlapping another. */
  background-color: #e9e4c9;
}

.booking-flow .room-card__gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  transform-origin: center;
  transition: transform 180ms ease;
  will-change: transform;
  -webkit-user-drag: none;
}

.booking-flow .room-card__media.is-pinching .room-card__gallery-track {
  overflow: hidden;
  scroll-snap-type: none;
}

.booking-flow .room-card__media.is-pinching .room-card__gallery-image {
  transition: none;
}

.booking-flow .room-card__media.is-gallery-dragging .room-card__gallery-track {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.booking-flow .room-card__media::before {
  display: none;
}

.booking-flow .room-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background-image: var(--room-gallery-fade-image);
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.booking-flow .room-card__media.is-image-fading::after {
  opacity: 1;
}

.booking-flow .room-card__body {
  position: relative;
  display: grid;
  grid-template-rows: 262px 112px;
}

.booking-flow .room-card__top {
  padding: 18px 29px 0;
}

.booking-flow .room-card__copy {
  max-width: 480px;
}

.booking-flow .room-card__title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 400;
  /* 40px flat, per Figma — tightens the two-line titles (was 1.17 ≈ 49px). */
  line-height: 40px;
  letter-spacing: 0;
}

.booking-flow .room-card__text {
  max-width: 480px;
  color: #040404;
  font-size: 16px;
  line-height: 1.45;
}

.booking-flow .room-card__meta-link {
  font-family: var(--font-heading);
  font-size: 18px;
}

.booking-flow .room-card__price {
  position: absolute;
  top: 156px;
  right: 30px;
  padding: 0;
  color: #040404;
  text-align: right;
}

.booking-flow .room-card__price-current {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.18;
}

.booking-flow .room-card__price-old {
  color: #040404;
  font-family: var(--font-heading);
  font-size: 16px;
}

.booking-flow .room-card__price-note {
  color: #040404;
  font-size: 14px;
}

.booking-flow .room-card__bottom {
  --room-card-bottom-line-left: 29px;
  --room-card-bottom-line-right: 29px;
  position: relative;
  align-items: center;
  min-height: 112px;
  padding: 24px 29px 24px;
  border-top: 0;
  border-color: var(--booking-line);
}

.booking-flow .room-card__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--room-card-bottom-line-left);
  right: var(--room-card-bottom-line-right);
  height: 1px;
  background: var(--booking-line);
  pointer-events: none;
}

.booking-flow .room-card__details {
  color: #676767;
  font-size: 14px;
  line-height: 1.45;
}

.booking-flow .room-card__button,
.booking-flow .room-card__bottom .button-primary {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
}

.booking-services {
  display: grid;
  gap: 40px;
}

.booking-room-card--selected .booking-service-actions {
  display: flex;
  gap: 25px;
  align-items: center;
}

.booking-room-card--selected .button-secondary {
  min-height: var(--button-height);
  padding: 0 25px;
  border-color: var(--booking-line);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing-compact);
}

.booking-services__form {
  display: grid;
  gap: 40px;
}

.booking-gift-card {
  position: relative;
  min-height: 222px;
  border: 1px solid var(--booking-line);
  display: grid;
  grid-template-columns: 442px minmax(0, 1fr);
  background: #fffced;
  overflow: hidden;
}

.booking-gift-card__image {
  min-height: 220px;
  background-size: cover;
  background-position: center 62%;
}

.booking-gift-card--wine .booking-gift-card__image {
  background-position: center 58%;
}

.booking-gift-card__copy {
  max-width: 728px;
  padding: 31px 39px 28px;
}

.booking-gift-card__copy h2 {
  margin: 0;
  color: #040404;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.18;
}

.booking-gift-card__copy p {
  margin: 10px 0 0;
  color: #040404;
  font-size: 16px;
  line-height: normal;
}

.booking-gift-card__flag {
  position: absolute;
  top: 0;
  right: 31px;
  width: 31px;
  height: 51px;
  pointer-events: none;
}

.booking-extra {
  min-height: 222px;
  border: 1px solid var(--booking-line);
  display: grid;
  grid-template-columns: 222px minmax(0, 1fr) 214px;
  background: #fffced;
}

.booking-extra__image {
  width: 180px;
  height: 180px;
  margin: 21px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

.booking-extra__copy {
  padding: 31px 36px;
  border-left: 1px solid #c6c1a1;
}

.booking-extra__copy h2,
.booking-transfer h2,
.booking-total-card h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.18;
}

.booking-transfer h2 {
  font-size: 36px;
}

.booking-extra__copy p {
  margin: 10px 0 0;
  max-width: 540px;
  color: #040404;
  font-size: 16px;
  line-height: 1.45;
}

.booking-extra__side {
  padding: 68px 29px 28px 0;
  display: grid;
  justify-items: end;
  align-content: space-between;
}

.booking-extra__price,
.booking-transfer__price,
.booking-total-card__price {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.18;
  text-align: right;
}

.booking-extra__price span,
.booking-transfer__price span,
.booking-total-card__price em {
  display: block;
  margin-top: 1px;
  font-family: var(--font-body);
  font-size: 14px;
  font-style: normal;
}

.booking-extra__toggle,
.booking-transfer__button {
  min-height: var(--button-height);
  width: var(--booking-transfer-action-width, 155px);
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--button-font-size);
  font-weight: 500;
  letter-spacing: var(--button-letter-spacing-compact);
  text-transform: uppercase;
}

.booking-extra__toggle::before,
.booking-transfer__button::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  background:
    linear-gradient(currentColor, currentColor) center / 9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 9px no-repeat;
}

.booking-extra.is-selected .booking-extra__toggle,
.booking-transfer.is-selected .booking-transfer__button {
  background: var(--button-dark-bg);
  border-color: var(--button-dark-bg);
  color: #fff;
}

.booking-extra.is-selected .booking-extra__toggle:hover,
.booking-extra.is-selected .booking-extra__toggle:focus-visible,
.booking-transfer.is-selected .booking-transfer__button:hover,
.booking-transfer.is-selected .booking-transfer__button:focus-visible {
  background: var(--button-dark-bg-hover);
  border-color: var(--button-dark-bg-hover);
}

.booking-extra.is-selected .booking-extra__toggle::before,
.booking-transfer.is-selected .booking-transfer__button::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  background: linear-gradient(currentColor, currentColor) center / 9px 1px no-repeat;
}

.booking-extra:not(.is-selected) .booking-extra__toggle,
.booking-transfer:not(.is-selected) .booking-transfer__button {
  background: transparent;
  border-color: var(--booking-line);
  color: #040404;
}

.booking-extra:not(.is-selected) .booking-extra__toggle:hover,
.booking-extra:not(.is-selected) .booking-extra__toggle:focus-visible,
.booking-transfer:not(.is-selected) .booking-transfer__button:hover,
.booking-transfer:not(.is-selected) .booking-transfer__button:focus-visible {
  background: var(--button-hover-fill);
}

.booking-transfer {
  min-height: 85px;
  border: 1px solid var(--booking-line);
  background: #fffced;
  overflow: hidden;
}

.booking-transfer.is-open {
  min-height: 0;
}

.booking-transfer__head {
  min-height: 85px;
  padding: 17px 15px 17px 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--booking-line);
}

.booking-transfer__plus {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid var(--booking-line);
  border-radius: 50%;
  background: transparent;
}

.booking-transfer__plus:hover,
.booking-transfer__plus:focus-visible {
  background: var(--button-hover-fill);
}

.booking-transfer__plus::before,
.booking-transfer__plus::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 26px;
  height: 1px;
  background: #141414;
  transform-origin: center;
  transition: transform 220ms ease;
}

.booking-transfer__plus::after {
  transform: rotate(90deg);
}

.booking-transfer.is-open .booking-transfer__plus::before {
  transform: rotate(45deg);
}

.booking-transfer.is-open .booking-transfer__plus::after {
  transform: rotate(135deg);
}

.booking-rules.is-open .booking-transfer__plus::before {
  transform: rotate(45deg);
}

.booking-rules.is-open .booking-transfer__plus::after {
  transform: rotate(135deg);
}

.booking-rules {
  border: 1px solid var(--booking-line);
  background: #fffced;
  overflow: hidden;
}

.booking-rules__head {
  min-height: 83px;
  padding: 17px 15px 17px 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.booking-rules.is-open .booking-rules__head {
  border-bottom: 1px solid var(--booking-line);
}

.booking-rules h2 {
  margin: 0;
  color: #040404;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.18;
}

.booking-rules__body {
  padding: 48px 27px 27px;
}

.booking-rules__body[hidden] {
  display: none;
}

.booking-rules__content {
  width: min(725px, 100%);
}

.booking-rules__item + .booking-rules__item {
  margin-top: 47px;
}

.booking-rules__item h3 {
  margin: 0;
  color: #040404;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 22px;
  text-transform: uppercase;
}

.booking-rules__item p {
  margin: 8px 0 0;
  color: #040404;
  font-size: 15px;
  line-height: 23px;
}

.booking-rules__divider {
  width: 100%;
  height: 1px;
  margin-top: 96px;
  background: var(--booking-line);
}

.booking-transfer__body {
  position: static;
  min-height: 0;
  padding: 48px 27px 27px;
  display: block;
}

.booking-transfer__body[hidden] {
  display: none;
}

.booking-transfer__step[hidden] {
  display: none;
}

.booking-transfer__workflow {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  max-width: 972px;
}

.booking-transfer__step {
  position: relative;
  min-height: 170px;
  padding-left: var(--booking-transfer-step-indent, 62px);
}

.booking-transfer__step:not(:last-child)::after,
.booking-transfer__step--route::after {
  content: "";
  position: absolute;
  left: var(--booking-transfer-line-left, 14px);
  top: var(--booking-transfer-line-top, 38px);
  width: 1px;
  background: var(--booking-line);
  height: 100%;
}

.booking-transfer__step--route::after {
  height: calc(100% - 8px);
}

.booking-transfer__step-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-left: calc(0px - var(--booking-transfer-step-indent, 62px));
  margin-bottom: 35px;
}

.booking-transfer__step-head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.08;
}

.booking-transfer__step-number {
  width: var(--booking-transfer-marker-size, 30px);
  height: var(--booking-transfer-marker-size, 30px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.booking-transfer__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 32px;
  max-width: 477px;
}

.booking-transfer__choice {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: #040404;
  font-size: 18px;
  line-height: 1.44;
  white-space: nowrap;
  cursor: pointer;
}

.booking-transfer__choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.booking-transfer__choice-box {
  position: relative;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border: 1px solid #040404;
  background: transparent;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.booking-transfer__choice-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 10px;
  height: 15px;
  border-right: 2px solid #040404;
  border-bottom: 2px solid #040404;
  opacity: 0;
  transform: rotate(45deg);
}

.booking-transfer__choice input:checked + .booking-transfer__choice-box {
  background: #141414;
  border-color: #141414;
}

.booking-transfer__choice input:checked + .booking-transfer__choice-box::after {
  border-color: #fff;
  opacity: 1;
}

.booking-transfer__choice input:focus-visible + .booking-transfer__choice-box,
.booking-transfer-field input:focus,
.booking-transfer-field select:focus,
.booking-transfer-field textarea:focus {
  outline: 2px solid rgba(4, 4, 4, 0.28);
  outline-offset: 2px;
}

.booking-transfer__step--route {
  min-height: 443px;
}

.booking-transfer__fields {
  display: grid;
  grid-template-columns: 290px 291px 290px;
  gap: 26px 20px;
}

.booking-transfer-field {
  position: relative;
  display: grid;
  gap: 8px;
  color: #040404;
  font-size: 16px;
  line-height: 1.45;
}

.booking-transfer-field > label {
  cursor: pointer;
}

.booking-transfer-field input,
.booking-transfer-field select,
.booking-transfer-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--booking-line);
  border-radius: 5px;
  background: transparent;
  color: #040404;
  font: inherit;
}

.booking-transfer-field input::placeholder,
.booking-transfer-field textarea::placeholder {
  color: rgba(4, 4, 4, 0.48);
  opacity: 1;
}

.booking-transfer-field input,
.booking-transfer-field select {
  height: 51px;
  padding: 0 14px;
}

.booking-transfer-field select {
  padding-right: 29px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7L10 13L16 7' stroke='%23040404' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 5px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  cursor: pointer;
}

.booking-transfer-field select::-ms-expand {
  display: none;
}

.booking-transfer-field--date {
  z-index: 5;
}

.booking-transfer-field--date input {
  cursor: pointer;
}

.booking-dropdown--transfer-calendar {
  top: calc(100% + 8px);
  width: min(360px, calc(100vw - 48px));
}

.booking-dropdown--transfer-calendar .booking-calendar {
  grid-template-columns: 1fr;
}

.booking-dropdown--transfer-calendar .booking-calendar__month {
  min-height: auto;
  padding: 18px 20px 20px;
}

.booking-dropdown--transfer-calendar .booking-calendar__header {
  margin-bottom: 16px;
  font-size: 20px;
}

.booking-dropdown--transfer-calendar .booking-calendar__grid {
  gap: 5px;
}

.booking-dropdown--transfer-calendar .booking-calendar__day {
  min-height: 34px;
  font-size: 16px;
}

.booking-transfer-field textarea {
  height: 126px;
  padding: 12px 14px;
  resize: vertical;
}

.booking-transfer-field em {
  color: #040404;
  font-family: var(--font-heading);
  font-size: 12px;
  font-style: normal;
  line-height: 1.18;
}

.booking-transfer-field__split {
  display: grid;
  grid-template-columns: 135px 136px;
  gap: 20px;
}

.booking-transfer-field--flight {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.booking-transfer-field--flight span {
  grid-column: 1;
  grid-row: 1;
}

.booking-transfer-field--flight em {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.booking-transfer-field--flight input {
  grid-column: 1 / -1;
  grid-row: 2;
}

.booking-transfer-field--comments {
  grid-column: 1 / span 2;
}

.booking-transfer-field.is-invalid > label,
.booking-transfer-field.is-invalid > span {
  color: #b42318;
}

.booking-transfer-field.is-invalid input,
.booking-transfer-field.is-invalid select,
.booking-transfer-field.is-invalid textarea {
  border-color: #b42318;
}

.booking-transfer__summary {
  padding: 0 27px 27px;
}

.booking-transfer:not(.is-open) .booking-transfer__summary {
  display: none;
}

.booking-transfer__guests {
  position: static;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #040404;
  font-size: 16px;
}

.booking-transfer__guests::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: #dbd6c2 url("../images/figma/room-modal/icon-people.svg") center / 17px 17px no-repeat;
}

.booking-transfer__footer {
  padding: 17px 15px 17px 23px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--booking-transfer-action-width, 155px);
  column-gap: 24px;
  row-gap: 18px;
}

.booking-transfer__footer::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  margin: 0;
  background: var(--booking-line);
}

.booking-transfer:not(.is-open) .booking-transfer__footer::before {
  content: none;
}

.booking-transfer__price {
  position: static;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
}

.booking-transfer__button {
  position: static;
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
}

.booking-total-card {
  min-height: 210px;
  border: 1px solid var(--booking-line);
  padding: 17px 15px 17px 23px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 20px;
}

.booking-total-card__price strong {
  display: block;
  font-weight: 400;
}

.booking-total-card__price span {
  display: block;
  margin-top: 4px;
  text-decoration: line-through;
}

.booking-total-card__actions {
  grid-column: 2;
  align-self: end;
  display: flex;
  gap: var(--booking-total-actions-gap, 25px);
}

.booking-total-card__actions .button-secondary,
.booking-total-card__actions .button-primary {
  min-height: var(--button-height);
  padding: var(--booking-total-button-padding, 0 25px);
  font-size: var(--button-font-size);
}

.booking-total-card__actions .button-secondary {
  min-width: var(--booking-total-secondary-width, 213px);
  letter-spacing: var(--button-letter-spacing-compact);
}

.booking-total-card__actions .button-primary {
  letter-spacing: var(--button-letter-spacing);
}

.booking-confirm {
  width: min(1239px, calc(100vw - 48px));
  margin: 98px auto 0;
  display: grid;
  grid-template-columns: 445px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.booking-confirm__summary {
  min-height: 1182px;
  padding-left: 80px;
  border-left: 1px solid var(--booking-line, #c6c1a1);
}

.booking-confirm__error {
  grid-column: 1 / -1;
  margin-bottom: -32px;
  padding: 18px 22px;
  border: 1px solid #9f493d;
  background: #f6e8e2;
  color: #6f271f;
  font-size: 15px;
  line-height: 1.45;
}

.booking-confirm__mobile-summary-head,
.booking-confirm__mobile-total {
  display: none;
}

.booking-confirm__section-title,
.booking-confirm__summary-title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 1;
}

.booking-confirm__section-title span,
.booking-confirm__summary-title span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
}

.booking-confirm__section-title--payment {
  margin-top: 76px;
}

.booking-confirm__fields {
  display: grid;
  gap: 40px;
}

.booking-field {
  position: relative;
  display: block;
  width: 100%;
  min-height: 30px;
  color: #040404;
  font-family: var(--font-body);
  font-size: 14px;
}

.booking-field__control {
  width: 100%;
  min-height: 30px;
  padding: 10px 0 0;
  border: 0;
  border-bottom: 1px solid var(--booking-line, #c6c1a1);
  background: transparent;
  color: #040404;
  font: inherit;
  line-height: 1.2;
}

.booking-confirm .booking-field__control:-webkit-autofill,
.booking-confirm .booking-field__control:-webkit-autofill:hover,
.booking-confirm .booking-field__control:-webkit-autofill:focus {
  border-bottom-color: var(--booking-line, #c6c1a1);
  box-shadow: 0 0 0 1000px #fffced inset;
  -webkit-text-fill-color: #040404;
  caret-color: #040404;
  transition:
    background-color 9999s ease-out,
    color 9999s ease-out;
}

.booking-confirm .booking-field__control:autofill {
  border-bottom-color: var(--booking-line, #c6c1a1);
  box-shadow: 0 0 0 1000px #fffced inset;
  caret-color: #040404;
}

.booking-confirm .booking-field__control:-webkit-autofill {
  animation-duration: 1ms;
  animation-name: bookingAutofillStart;
}

@keyframes bookingAutofillStart {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

.booking-field__control:focus {
  outline: 0;
}

.booking-field__label {
  position: absolute;
  left: 0;
  top: 8px;
  z-index: 1;
  color: #040404;
  font: inherit;
  line-height: 1.2;
  pointer-events: none;
  transition:
    top 160ms ease,
    color 160ms ease;
}

.booking-field:focus-within .booking-field__label,
input.booking-field__control:not(:placeholder-shown) + .booking-field__label,
textarea.booking-field__control:not(:placeholder-shown) + .booking-field__label,
.booking-field.has-value .booking-field__label {
  top: -8px;
}

.booking-field__control:-webkit-autofill + .booking-field__label {
  top: -8px;
}

.booking-field__required {
  color: #c32828;
}

.booking-field--select::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 10px;
  width: 7px;
  height: 13px;
  background: #171513;
  mask: url("../images/figma/chevron-figma.svg") center / contain no-repeat;
  -webkit-mask: url("../images/figma/chevron-figma.svg") center / contain no-repeat;
  transform: rotate(90deg);
  pointer-events: none;
}

.booking-field--select .booking-field__control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 24px;
}

.booking-field--select .booking-field__control:focus + .booking-field__label {
  top: -8px;
}

.booking-field--textarea {
  min-height: 112px;
}

.booking-field--textarea .booking-field__label {
  top: 0;
}

.booking-field--textarea .booking-field__control {
  min-height: 82px;
  margin-top: 30px;
  padding: 10px;
  border: 1px solid #c1c1c1;
  border-radius: 5px;
  line-height: 1.35;
  resize: vertical;
}

.booking-confirm__fields textarea {
  min-height: 82px;
  resize: vertical;
}

/* Per-room comments accordion (step 3, multi-room) — Figma 1685:2125.
   A «НОМЕР N» label, the room title with a chevron toggle, and a comment field
   that opens below. Shown only when the booking has more than one room; a single
   room keeps the plain «Комментарии» field. */
.booking-room-comments {
  display: grid;
  gap: 24px;
}

.booking-room-comment__toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.booking-room-comment__label {
  display: block;
  margin-bottom: 6px;
  color: #040404;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.booking-room-comment__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.booking-room-comment__title {
  color: #040404;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.15;
}

.booking-room-comment__chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 13px;
  background: #040404;
  mask: url("../images/figma/chevron-figma.svg") center / contain no-repeat;
  -webkit-mask: url("../images/figma/chevron-figma.svg") center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.booking-room-comment.is-open .booking-room-comment__chevron {
  transform: rotate(-90deg);
}

.booking-room-comment__body {
  display: none;
  margin-top: 10px;
}

.booking-room-comment.is-open .booking-room-comment__body {
  display: block;
}

.booking-room-comment__field-label {
  display: block;
  margin-bottom: 10px;
  color: #040404;
  font-family: var(--font-body);
  font-size: 14px;
}

.booking-room-comment__control {
  width: 100%;
  min-height: 82px;
  padding: 10px;
  border: 1px solid #c1c1c1;
  border-radius: 5px;
  background: transparent;
  color: #040404;
  font-family: var(--font-body);
  /* 16px, not 14 — iOS Safari zooms the page when a focused field is under 16px
     (same reason the transfer comment field uses 16px). */
  font-size: 16px;
  line-height: 1.35;
  resize: vertical;
}

.booking-room-comment__control:focus {
  outline: 0;
  border-color: #040404;
}

/* Remove-room confirmation modal (steps 2 & 3), Figma 1778:1043. A fixed
   774×450 cream card centred on a dimmed page: serif title, a warning line, then
   a dark «Удалить» and an outline «Оставить». Sizes below are the desktop design;
   the title/text scale down on narrow screens (no separate mobile node). */
.booking-remove-modal {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(29, 29, 29, 0.5);
}

.booking-remove-modal[hidden] {
  display: none;
}

.booking-remove-modal__dialog {
  position: relative;
  width: 774px;
  max-width: calc(100vw - 40px);
  min-height: 450px;
  max-height: calc(100vh - 40px);
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  overflow: auto;
  background: #fffced;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.booking-remove-modal__close {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.booking-remove-modal__close::before,
.booking-remove-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  width: 22px;
  height: 1.5px;
  background: #040404;
}

.booking-remove-modal__close::before {
  transform: rotate(45deg);
}

.booking-remove-modal__close::after {
  transform: rotate(-45deg);
}

.booking-remove-modal__title {
  margin: 0;
  max-width: 466px;
  color: #000;
  font-family: var(--font-heading);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 400;
  line-height: 1;
}

.booking-remove-modal__text {
  margin: 0;
  max-width: 466px;
  color: #000;
  font-family: var(--font-body);
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.3;
}

.booking-remove-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 32px between the buttons side by side (desktop), 8px when they stack on a
     narrow screen (Figma) — row-gap only shows once wrapped. */
  gap: 8px 32px;
}

.booking-remove-modal__confirm,
.booking-remove-modal__keep {
  width: 158px;
  min-width: 0;
}

/* A dark primary button swaps its label for a spinner while its action is in
   flight (JS adds .is-loading on click/submit): «Удалить» in the remove-room
   modal, and «Завершить бронирование» on step 3. Without it the redirect reads
   as a freeze. */
.booking-remove-modal__confirm.is-loading,
.booking-confirm__submit.is-loading {
  position: relative;
  color: transparent;
  /* -webkit-text-fill-color wins over `color` for the glyph fill on WebKit, so
     the label is reliably invisible on Safari even if a text-fill is inherited. */
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

.booking-remove-modal__confirm.is-loading::after,
.booking-confirm__submit.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: booking-remove-modal-spin 0.7s linear infinite;
}

@keyframes booking-remove-modal-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion: don't spin, but still swap the label for a static ring. The
     label stays hidden (color: transparent from the base rule) so the button
     never sits there showing its text during the redirect — it just doesn't
     animate. */
  .booking-remove-modal__confirm.is-loading::after,
  .booking-confirm__submit.is-loading::after {
    animation: none;
  }
}

/* Special-codes dropdown "Код" field — floating-label input with an underline,
   mirroring .booking-field. These base styles were missing (only mobile overrides
   existed), so on desktop the label flowed inline next to the box. */
.booking-special-dropdown__field {
  position: relative;
  display: block;
  width: 100%;
  color: #040404;
  font-family: var(--font-heading);
  font-size: 18px;
}

.booking-special-dropdown__field + .booking-special-dropdown__field {
  margin-top: 20px;
}

.booking-special-dropdown__field input {
  width: 100%;
  min-height: 44px;
  padding: 22px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--booking-line, #c6c1a1);
  background: transparent;
  color: #040404;
  font: inherit;
  line-height: 1.2;
}

.booking-special-dropdown__field input:focus {
  outline: 0;
}

.booking-special-dropdown__label {
  position: absolute;
  left: 0;
  top: 22px;
  color: #040404;
  font: inherit;
  line-height: 1.2;
  pointer-events: none;
  transition: top 160ms ease;
}

.booking-special-dropdown__field input:focus + .booking-special-dropdown__label,
.booking-special-dropdown__field input:not(:placeholder-shown) + .booking-special-dropdown__label {
  top: 0;
}

/* Desktop popover (>=1025): the panel had no padding, so the "Код" field and the
   Apply button sat flush against the edges with no gap (the broken look). Inset
   the content and space the button below the field. (Below 1025 the dropdown is a
   full-screen overlay with its own layout.) */
@media (min-width: 1180px) {
  .booking-dropdown--special {
    padding: 24px 26px 28px;
  }

  .booking-special-dropdown__actions {
    margin-top: 24px;
  }
}

.booking-confirm__check {
  position: relative;
  display: grid;
  grid-template-columns: 21px minmax(0, 400px);
  align-items: start;
  gap: 20px;
  color: #040404;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.32;
}

.booking-confirm__check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.booking-confirm__check-box {
  position: relative;
  width: 21px;
  height: 21px;
  border: 1px solid #141414;
  background: transparent;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.booking-confirm__check-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 7px;
  height: 12px;
  border: solid transparent;
  border-width: 0 1px 1px 0;
  opacity: 0;
  transform: rotate(45deg);
}

.booking-confirm__check input:checked + .booking-confirm__check-box {
  background: #141414;
  border-color: #141414;
}

.booking-confirm__check input:checked + .booking-confirm__check-box::after {
  border-color: #fff;
  opacity: 1;
}

.booking-confirm__check input:focus-visible + .booking-confirm__check-box {
  outline: 1px solid rgba(20, 20, 20, 0.55);
  outline-offset: 3px;
}

.booking-confirm__submit {
  width: 100%;
  min-height: var(--button-height);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
}

.booking-confirm__summary-title {
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 56px;
}

.booking-confirm__summary-title strong {
  margin-left: auto;
  display: grid;
  gap: 5px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  text-align: right;
}

.booking-confirm__summary-title strong b,
.booking-confirm__summary-title strong time {
  font: inherit;
}

.booking-confirm__summary-title strong time {
  font-size: 16px;
}

.booking-confirm__room-label {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.booking-confirm__room-label button,
.booking-confirm__room-label a {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

.booking-confirm__room {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 23px;
}

.booking-confirm__image {
  width: 200px;
  height: 250px;
  background-size: cover;
  background-position: center;
}

.booking-confirm__room-body h2 {
  margin: 0 0 5px;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.booking-confirm__room-body em {
  display: block;
  margin-bottom: 46px;
  font-family: var(--font-heading);
  font-size: 16px;
}

.booking-confirm__service-list {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 16px;
}

.booking-confirm__room-body p {
  margin: 0 0 46px;
  display: flex;
  gap: 15px;
  font-family: var(--font-heading);
  font-size: 16px;
}

.booking-confirm__room-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-heading);
  font-size: 18px;
}

.booking-confirm__room-bottom a {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.booking-confirm__room-bottom strong {
  font-weight: 400;
}

.booking-confirm__total {
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid var(--booking-line, #c6c1a1);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 28px;
}

.booking-confirm__total strong {
  font-weight: 400;
}

.booking-session-expiry[hidden] {
  display: none;
}

.booking-session-expiry {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(87, 89, 80, 0.72);
}

.booking-session-expiry__dialog {
  position: relative;
  width: min(774px, calc(100vw - 48px));
  min-height: min(504px, calc(100svh - 48px));
  padding: 120px 70px 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff9ea;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
}

.booking-session-expiry__close {
  position: absolute;
  top: 34px;
  right: 34px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.booking-session-expiry__close::before,
.booking-session-expiry__close::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 8px;
  width: 17px;
  height: 1px;
  background: #1b1b1b;
}

.booking-session-expiry__close::before {
  transform: rotate(45deg);
}

.booking-session-expiry__close::after {
  transform: rotate(-45deg);
}

.booking-session-expiry__content {
  width: min(466px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.booking-session-expiry__title {
  margin: 0;
  color: #111;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}

.booking-session-expiry__text {
  width: min(273px, 100%);
  margin: 24px 0 0;
  color: #222;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.booking-session-expiry__refresh {
  width: 158px;
  min-height: 49px;
  margin-top: 35px;
  padding: 0 24px;
  border: 1px solid #1f1f1f;
  background: #1f1f1f;
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  line-height: 1;
  text-transform: uppercase;
}

.booking-session-expiry__refresh:hover,
.booking-session-expiry__refresh:focus-visible {
  background: #000;
  border-color: #000;
}

@media (max-width: 767px) {
  .booking-session-expiry {
    padding: 18px;
  }

  .booking-session-expiry__dialog {
    width: min(420px, calc(100vw - 36px));
    min-height: 360px;
    padding: 86px 28px 64px;
  }

  .booking-session-expiry__close {
    top: 22px;
    right: 22px;
  }

  .booking-session-expiry__title {
    font-size: 32px;
    line-height: 1.08;
  }

  .booking-session-expiry__text {
    margin-top: 20px;
  }

  .booking-session-expiry__refresh {
    margin-top: 30px;
  }
}

.booking-flow--success {
  min-height: 100vh;
  padding-top: 289px;
  padding-bottom: 120px;
  background: #fffcf3;
}

.booking-success {
  width: 100%;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 50px;
  text-align: center;
}

.booking-success__logo {
  display: block;
  width: min(794.086px, calc(100vw - 48px));
  max-width: 100%;
  aspect-ratio: 794.086 / 369;
  height: auto;
  object-fit: contain;
}

.booking-success p {
  margin: 0;
  color: #000;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  white-space: nowrap;
}

.booking-success .button-primary {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  background: var(--button-dark-bg);
  border-color: var(--button-dark-bg);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--button-font-size);
  font-weight: 500;
  letter-spacing: var(--button-letter-spacing);
}

@media (max-width: 1179px) {
  .booking-widget__field + .booking-widget__field,
  .booking-flow .booking-room-card,
  .booking-extra,
  .booking-confirm {
    grid-template-columns: 1fr;
  }

  /* Field separators, exactly per Figma (node 1685:8727). On desktop these are
     the fields' own full-height side borders; the compact tablet/mobile widget
     drops those, so here the row lays its three fields out with `space-between`
     — date hugging the left, codes hugging the right — and the dividers are
     real items sitting in the flow between them, so they land centred in each
     gap (a ::before pinned to a field's edge could only hug one side). The
     dividers themselves are 1×13px hairlines in the same line colour. */
  .booking-flow .booking-flow__head > .booking-widget:not(:has(.booking-widget__search)) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .booking-flow .booking-flow__head > .booking-widget:not(:has(.booking-widget__search)) .booking-widget__field {
    flex: 0 1 auto;
    min-width: 0;
  }

  .booking-widget__divider {
    display: block;
    flex: 0 0 auto;
    width: 1px;
    height: 13px;
    background: var(--booking-line);
  }

  .booking-flow .room-card__body {
    grid-template-rows: auto auto;
  }

  .booking-flow .room-card__price {
    position: static;
    padding: 0 29px 20px;
  }
}

@media (min-width: 1180px) {
  .booking-flow .booking-flow__head > .booking-widget {
    --booking-widget-search-width: clamp(220px, 17.6vw, 269px);
    grid-template-columns: repeat(3, minmax(180px, 305px)) minmax(220px, var(--booking-widget-search-width));
    justify-content: center;
  }

  .booking-flow .booking-widget__field + .booking-widget__field,
  .booking-flow .booking-widget__search {
    border-left: 0;
  }

  .booking-flow .booking-widget__field--date .booking-dropdown--calendar {
    width: min(834px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
  }

  .booking-flow .booking-widget__field--date .booking-dropdown--calendar .booking-dropdown__actions {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    width: auto;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 12px 26px 20px;
    border-top: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    background: transparent;
  }

  .booking-flow .booking-widget__field--guest .booking-dropdown--guest {
    width: min(calc(200% + 3px), calc(100vw - 48px));
  }

  .booking-flow .booking-widget__field--special .booking-dropdown--special {
    width: min(calc(100% + 2px), calc(100vw - 48px));
  }
}

@media (max-width: 980px) {
  .booking-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .booking-transfer.is-open {
    min-height: auto;
  }

  .booking-transfer__body {
    min-height: auto;
    padding-bottom: 36px;
  }

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

  .booking-transfer-field__split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-transfer__guests,
  .booking-transfer__price,
  .booking-transfer__button {
    position: static;
  }

  .booking-transfer__guests {
    margin-top: 28px;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .modal-backdrop {
    align-items: flex-start;
    padding: 14px;
  }

  .booking-flow {
    padding-top: 150px;
  }

  .booking-progress,
  .booking-widget {
    grid-template-columns: 1fr;
  }

  .booking-widget__field + .booking-widget__field,
  .booking-widget__search {
    border-left: 1px solid var(--booking-line);
    border-top: 0;
  }

  .booking-flow .room-card__top,
  .booking-flow .room-card__bottom,
  .booking-room-card--selected .booking-service-actions,
  .booking-total-card__actions,
  .booking-confirm__room {
    display: grid;
    grid-template-columns: 1fr;
  }

  .booking-extra {
    justify-items: start;
  }

  .booking-extra__side,
  .booking-total-card__actions {
    grid-column: auto;
    justify-items: start;
  }

  .booking-transfer__step::after {
    display: none;
  }

  .booking-transfer__step-head {
    margin-left: 0;
    margin-bottom: 22px;
  }

  .booking-transfer__choice {
    white-space: normal;
  }

  .booking-transfer__fields,
  .booking-transfer-field--comments {
    grid-template-columns: 1fr;
    grid-column: auto;
  }
}

/* Booking responsive rules moved from responsive.css */
@media (max-width: 1440px) {
  .booking-widget {
    padding-left: 18px;
    padding-right: 18px;
  }

  .booking-widget__toggle {
    padding-left: 18px;
  }

  .booking-room-list,
  .booking-services,
  .booking-confirm {
    width: min(1160px, calc(100vw - 48px));
  }
}

@media (min-width: 1367px) and (max-width: 1440px) {
  .booking-flow {
    --booking-progress-width: 860px;
    --booking-widget-button-height: 49px;
    padding-top: 167px;
  }

  .booking-flow__head {
    width: min(1312px, calc(100vw - 128px));
  }

  .booking-progress {
    width: 860px;
    margin-top: 44px;
    grid-template-columns: 280px 282px 282px;
    column-gap: 8px;
  }

  .booking-progress__step {
    min-height: 64px;
    padding-top: 38px;
    line-height: 18px;
  }

  .booking-progress__step::before {
    left: 38px;
    width: calc(100% - 38px);
    max-width: none;
  }

  .booking-widget {
    --booking-widget-search-padding: 16px 15px 12px;
    min-height: 113px;
    margin-top: 48px;
    padding: 17px 16px 17px 19px;
    grid-template-columns: 261px 261px 261px 231px;
    justify-content: center;
  }

  .booking-flow .booking-flow__head > .booking-widget {
    width: min(1138px, calc(100vw - 302px));
    margin-left: auto;
    margin-right: auto;
  }

  .booking-widget__field,
  .booking-widget__search {
    min-height: 77px;
  }

  .booking-widget__toggle {
    padding: 13px 48px 13px 20px;
  }

  .booking-widget__label {
    margin-bottom: 8px;
    line-height: 18px;
  }

  .booking-widget__value {
    line-height: 19px;
  }

  .booking-widget__field::after {
    right: 19px;
    top: 51px;
  }

  .booking-widget__field--special::after {
    top: 50%;
  }

  .booking-widget__button {
    padding: 0 32px;
    justify-self: end;
  }

  .booking-room-list {
    width: min(1138px, calc(100vw - 302px));
    margin-top: 55px;
    gap: 48px;
  }

  .booking-room-list .booking-room-card {
    height: 374px;
    min-height: 374px;
    grid-template-columns: 442px minmax(0, 1fr);
    box-sizing: border-box;
  }

  .booking-room-list .room-card__media {
    min-height: 100%;
  }

  .booking-room-list .room-card__gallery-dots {
    bottom: 20px;
    gap: 6.5px;
  }

  .booking-room-list .room-card__body {
    grid-template-rows: 262px 110px;
  }

  .booking-room-list .room-card__top {
    padding: 18px 25px 0 27px;
  }

  .booking-room-list .room-card__copy,
  .booking-room-list .room-card__text {
    max-width: 440px;
  }

  .booking-room-list .room-card__price {
    right: 22px;
  }

  .booking-room-list .room-card__bottom {
    --room-card-bottom-line-left: 27px;
    --room-card-bottom-line-right: 22px;
    min-height: 110px;
    padding: 8px 22px 0 27px;
  }

  .booking-room-list .room-card__button {
    width: 180px;
    min-height: 49px;
    height: 49px;
    padding: 0 32px;
  }

  .booking-services {
    width: min(1138px, calc(100vw - 302px));
    margin-top: 49px;
    gap: 40px;
  }

  .booking-services__form {
    width: 100%;
    gap: 40px;
  }

  /* The step-2 card frame (head row, 21px gap, ::before frame, 374px media/body)
     is owned by the shared `min-width: 1180px` desktop block near the end of this
     file — do not re-declare those here, they must stay in one place. */

  .booking-services > .booking-room-card .room-card__body {
    grid-template-rows: 262px 112px;
  }

  .booking-services > .booking-room-card .room-card__top {
    padding: 18px 25px 0 27px;
  }

  .booking-services > .booking-room-card .room-card__copy {
    max-width: 440px;
    padding-top: 4px;
  }

  .booking-services > .booking-room-card .room-card__title {
    margin-bottom: 10px;
  }

  .booking-services > .booking-room-card .room-card__text {
    max-width: 440px;
  }

  .booking-services > .booking-room-card .room-card__price {
    top: 156px;
    right: 24px;
  }

  .booking-services > .booking-room-card .room-card__bottom {
    --room-card-bottom-line-left: 27px;
    --room-card-bottom-line-right: 22px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    min-height: 112px;
    padding: 24px 22px 24px 27px;
    border: 0;
  }

  .booking-services > .booking-room-card .room-card__bottom::before {
    content: "";
  }

  .booking-services > .booking-room-card .room-card__details {
    position: static;
    flex: 1 1 269px;
    width: auto;
    max-width: 300px;
    min-width: 0;
  }

  .booking-room-card--selected .booking-service-actions {
    position: static;
    flex: 0 0 auto;
    gap: 16px;
  }

  .booking-extra {
    width: 100%;
    height: 222px;
    min-height: 222px;
    grid-template-columns: 223px minmax(0, 1fr) 190px;
  }

  .booking-extra__image {
    width: 180px;
    height: 180px;
    margin: 20px;
  }

  .booking-extra__copy {
    padding: 30px 23px;
  }

  .booking-extra__copy h2 {
    width: 475px;
    font-size: 40px;
    line-height: 47px;
  }

  .booking-extra__copy p {
    max-width: 475px;
    margin-top: 10px;
    line-height: normal;
  }

  .booking-extra__side {
    padding: 81px 23px 30px 0;
  }

  .booking-extra__price,
  .booking-transfer__price,
  .booking-total-card__price {
    font-size: 22px;
    line-height: 26px;
  }

  .booking-extra__price span,
  .booking-transfer__price span,
  .booking-total-card__price em {
    font-size: 16px;
    line-height: 19px;
  }

  .booking-extra__toggle,
  .booking-transfer__button {
    width: 142px;
    min-height: 49px;
    height: 49px;
    padding: 0 14px;
    flex-basis: 142px;
    letter-spacing: 1.8px;
  }

  .booking-transfer {
    width: 100%;
  }

  .booking-transfer.is-open {
    height: auto;
    min-height: 1157px;
  }

  .booking-transfer__head {
    height: 85px;
    min-height: 85px;
    padding: 19px 23px 20px 22px;
    align-items: flex-start;
  }

  .booking-transfer h2 {
    font-size: 36px;
    line-height: 42px;
  }

  .booking-transfer__plus {
    width: 50px;
    height: 50px;
    margin-top: -2px;
  }

  .booking-transfer__body {
    min-height: 0;
    height: auto;
    padding: 51px 23px 28px;
  }

  .booking-transfer__workflow {
    max-width: 881px;
    gap: 14px;
  }

  .booking-transfer__step {
    min-height: 170px;
    padding-left: 50px;
  }

  .booking-transfer__step--arrival {
    min-height: 443px;
    margin-top: -4px;
  }

  .booking-transfer__step:not(:last-child)::after {
    left: 14px;
    top: 43px;
    height: 127px;
  }

  .booking-transfer__step.booking-transfer__step--arrival::after {
    left: 14px;
    top: 43px;
    height: calc(100% - 8px);
  }

  .booking-transfer__step-head {
    margin-left: -50px;
    margin-bottom: 35px;
  }

  .booking-transfer__step--arrival .booking-transfer__step-head {
    margin-bottom: 20px;
  }

  .booking-transfer__step-head h3 {
    font-size: 28px;
    line-height: 33px;
  }

  .booking-transfer__choices {
    max-width: 474px;
  }

  .booking-transfer__fields {
    grid-template-columns: 260px 263px 260px;
    gap: 26px 24px;
  }

  .booking-transfer-field__split {
    grid-template-columns: 122px 125px;
    gap: 16px;
  }

  .booking-transfer__guests {
    display: flex;
    align-items: center;
    gap: 27px;
    font-size: 14px;
    line-height: 14px;
  }

  .booking-transfer__summary {
    padding: 0 23px 28px;
  }

  .booking-transfer__footer {
    padding: 24px 23px 28px;
  }

  .booking-transfer__guests::before {
    content: "";
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: #dbd6c2 url("../images/figma/room-modal/icon-people.svg") center / 17px 17px no-repeat;
  }

  .booking-transfer__price {
    right: 24px;
    bottom: 88px;
  }

  .booking-transfer__button {
    right: 23px;
    bottom: 24px;
  }

  .booking-total-card {
    position: relative;
    width: 100%;
    height: 210px;
    min-height: 210px;
    margin-top: 10px;
    padding: 0;
    display: block;
  }

  .booking-total-card h2 {
    position: absolute;
    left: 21px;
    top: 27px;
    width: 199px;
    font-size: 36px;
    line-height: 42px;
  }

  .booking-total-card__price {
    position: absolute;
    right: 23px;
    top: 41px;
    /* Shrink-to-fit, not a fixed 110px: a multi-room / multi-night total like
       «1 300.00 EUR» wrapped inside 110px, grew tall, and collided with the
       absolutely-positioned actions pinned to the bottom. auto keeps each line
       intact and lets the price extend left into empty space instead. */
    width: auto;
    white-space: nowrap;
    text-align: right;
  }

  .booking-total-card__price span {
    margin-top: 4px;
    font-size: 18px;
    line-height: 21px;
  }

  .booking-total-card__price strong {
    font-size: 22px;
    line-height: 26px;
  }

  .booking-total-card__actions {
    position: absolute;
    right: 24px;
    bottom: 26px;
    display: flex;
    gap: 16px;
  }

  .booking-room-card--selected .booking-service-actions .button-secondary,
  .booking-room-card--selected .booking-service-actions .button-primary,
  .booking-total-card__actions .button-secondary,
  .booking-total-card__actions .button-primary {
    min-height: var(--booking-action-compact-height, 49px);
    height: var(--booking-action-compact-height, 49px);
    padding: var(--booking-action-compact-padding, 0 10px);
    font-size: var(--booking-action-compact-font-size, 12px);
  }

  .booking-room-card--selected .booking-service-actions .button-secondary,
  .booking-total-card__actions .button-secondary,
  .booking-total-card__actions .button-secondary.button-icon-left.is-phone {
    width: var(--booking-action-compact-secondary-width, 185px);
    min-width: var(--booking-action-compact-secondary-width, 185px);
    letter-spacing: var(--booking-action-compact-secondary-letter-spacing, 1.8px);
  }

  .booking-room-card--selected .booking-service-actions .button-primary,
  .booking-total-card__actions .button-primary {
    width: var(--booking-action-compact-primary-width, 180px);
    min-width: var(--booking-action-compact-primary-width, 180px);
    letter-spacing: var(--booking-action-compact-primary-letter-spacing, 2.4px);
  }

  .booking-confirm {
    width: min(1138px, calc(100vw - 302px));
    margin-top: 72px;
    grid-template-columns: 446px 638px;
    gap: 54px;
  }

  .booking-confirm__column {
    width: 446px;
  }

  .booking-confirm__summary {
    width: 638px;
    min-height: 1192px;
    padding-top: 2px;
    padding-left: 56px;
    border-left: 1px solid var(--booking-line, #c6c1a1);
  }

  .booking-confirm__section-title,
  .booking-confirm__summary-title {
    gap: 20px;
    margin-bottom: 50px;
    font-size: 28px;
    line-height: 28px;
  }

  .booking-confirm__section-title span,
  .booking-confirm__summary-title span {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: normal;
  }

  .booking-confirm__section-title--payment {
    margin-top: 87px;
  }

  .booking-confirm__fields {
    gap: 40px;
  }

  .booking-confirm .booking-field {
    min-height: 30px;
    font-size: 14px;
    line-height: normal;
  }

  .booking-confirm .booking-field:not(.booking-field--textarea) {
    height: 30px;
  }

  .booking-confirm .booking-field__control {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 10px 0 0;
    line-height: normal;
  }

  .booking-confirm .booking-field__label {
    top: 0;
    line-height: normal;
  }

  .booking-confirm .booking-field:focus-within .booking-field__label,
  .booking-confirm input.booking-field__control:not(:placeholder-shown) + .booking-field__label,
  .booking-confirm textarea.booking-field__control:not(:placeholder-shown) + .booking-field__label,
  .booking-confirm .booking-field.has-value .booking-field__label,
  .booking-confirm .booking-field__control:-webkit-autofill + .booking-field__label {
    top: -10px;
  }

  .booking-confirm .booking-field--select::after {
    right: 2px;
    bottom: 10px;
  }

  .booking-confirm .booking-field--textarea {
    min-height: 117px;
  }

  .booking-confirm .booking-field--textarea .booking-field__label {
    top: 0;
  }

  .booking-confirm .booking-field--textarea .booking-field__control {
    min-height: 82px;
    height: 82px;
    margin-top: 30px;
    padding: 10px;
  }

  .booking-confirm__check {
    grid-template-columns: 21px 400px;
    gap: 20px;
    font-size: 16px;
    line-height: normal;
  }

  .booking-confirm__check--dark {
    margin-top: 10px;
  }

  .booking-confirm__check--light {
    margin-top: -10px;
  }

  .booking-confirm__submit {
    min-height: 49px;
    height: 49px;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 2.4px;
  }

  .booking-confirm__summary-title {
    width: 581px;
    margin-bottom: 50px;
  }

  .booking-confirm__summary-title strong {
    flex: 0 0 279px;
    width: 279px;
    font-size: 20px;
    line-height: normal;
  }

  .booking-confirm__room-label {
    width: 581px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: normal;
  }

  .booking-confirm__room {
    width: 581px;
    grid-template-columns: 200px 358px;
    gap: 23px;
    align-items: end;
  }

  .booking-confirm__image {
    width: 200px;
    height: 250px;
  }

  .booking-confirm__room-body {
    width: 358px;
  }

  .booking-confirm__room-body h2 {
    width: 100%;
    margin-bottom: 5px;
    font-size: 28px;
    line-height: normal;
    white-space: nowrap;
  }

  .booking-confirm__room-body em {
    width: 228px;
    margin-bottom: 52px;
    font-size: 16px;
    line-height: normal;
  }

  .booking-confirm__service-list {
    width: 257px;
    gap: 5px;
    margin-bottom: 5px;
    font-size: 16px;
    line-height: normal;
  }

  .booking-confirm__room-body p {
    width: 257px;
    margin-bottom: 52px;
    gap: 15px;
    font-size: 16px;
    line-height: normal;
  }

  .booking-confirm__room-bottom {
    width: 358px;
    gap: 20px;
    font-size: 18px;
    line-height: normal;
  }

  .booking-confirm__total {
    width: 581px;
    margin-top: 50px;
    padding-top: 24px;
    font-size: 28px;
    line-height: normal;
  }

  .booking-flow.booking-flow--success {
    min-height: 100svh;
    padding-top: clamp(180px, 22.87svh, 252px);
    padding-bottom: 0;
    background: #fffced;
  }

  .booking-flow--success .booking-success {
    width: 505px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  .booking-flow--success .booking-success__logo {
    width: 794.086px;
    max-width: none;
    height: auto;
  }

  .booking-flow--success .booking-success p {
    width: 371px;
    font-size: 32px;
    line-height: 40px;
  }

  .booking-flow--success .booking-success .button-primary {
    width: 165px;
    min-width: 165px;
    min-height: 49px;
    height: 49px;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 2.4px;
  }
}

@media (max-width: 1366px) {
  .booking-widget__field,
  .booking-widget__search {
    min-height: 78px;
  }

  .booking-widget__label {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
  }

  .booking-widget__value {
    font-size: 1rem;
  }

  .booking-flow {
    padding-top: 167px;
  }

  .booking-progress {
    margin-top: 36px;
  }
}

@media (min-width: 1180px) and (max-width: 1366px) {
  .booking-flow .booking-room-card {
    min-height: 402px;
  }

  .booking-services > .booking-room-card {
    min-height: 374px;
  }

  .booking-flow .room-card__body {
    grid-template-rows: 262px 140px;
  }

  .booking-services > .booking-room-card .room-card__body {
    grid-template-rows: 262px 112px;
  }

  .booking-flow .room-card__bottom {
    gap: 16px;
    min-height: 140px;
  }

  .booking-services > .booking-room-card .room-card__bottom {
    min-height: 112px;
  }

  .booking-services > .booking-room-card .room-card__details {
    flex: 1 1 285px;
    min-width: 0;
  }

  .booking-room-card--selected .booking-service-actions {
    gap: 16px;
    flex: 0 0 auto;
  }

  .booking-room-card--selected .booking-service-actions .button-secondary,
  .booking-total-card__actions .button-secondary,
  .booking-total-card__actions .button-secondary.button-icon-left.is-phone {
    width: var(--booking-action-compact-secondary-width, 185px);
    min-width: var(--booking-action-compact-secondary-width, 185px);
  }

  .booking-room-card--selected .booking-service-actions .button-primary,
  .booking-total-card__actions .button-primary {
    width: var(--booking-action-compact-primary-width, 180px);
    min-width: var(--booking-action-compact-primary-width, 180px);
  }
}

@media (max-width: 1179px) {
  .booking-flow__head {
    width: min(1180px, calc(100vw - 40px));
  }

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

  .booking-widget__field + .booking-widget__field,
  .booking-widget__search {
    border-left: 1px solid var(--booking-line);
  }

  .booking-confirm {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .booking-confirm__summary {
    min-height: auto;
    padding-left: 0;
    border-left: 0;
  }

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

@media (max-width: 767px) {
  .booking-widget {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .booking-widget__field + .booking-widget__field,
  .booking-widget__search {
    border-top: 0;
  }

  .booking-dropdown {
    width: min(100%, calc(100vw - 28px));
  }

  .booking-dropdown .booking-calendar,
  .booking-calendar {
    grid-template-columns: 1fr;
  }

  .booking-dropdown--calendar::before {
    content: none;
  }

  .booking-calendar__month + .booking-calendar__month,
  .booking-dropdown .booking-calendar__month + .booking-calendar__month {
    border-left: 0;
    border-top: 1px solid var(--booking-line, var(--color-line));
  }

  .booking-flow {
    padding-top: 136px;
    padding-bottom: 88px;
  }

  .booking-flow__title {
    font-size: 38px;
    line-height: 1.15;
  }

  .booking-progress {
    width: min(100%, 520px);
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .booking-progress__label {
    white-space: normal;
  }

  .booking-flow .booking-room-card,
  .booking-extra,
  .booking-total-card,
  .booking-confirm__room {
    grid-template-columns: 1fr;
  }

  .booking-flow .room-card__body {
    grid-template-rows: auto auto;
  }

  .booking-flow .room-card__price {
    position: static;
    padding: 0 29px 20px;
  }

  .booking-extra__side,
  .booking-total-card__actions {
    grid-column: auto;
    justify-items: start;
  }

  .booking-transfer__head {
    padding: 20px 24px;
  }

  .booking-transfer__body {
    padding: 32px 24px;
  }

  .booking-transfer__fields,
  .booking-transfer-field--comments {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .booking-transfer__guests,
  .booking-transfer__price,
  .booking-transfer__button {
    position: static;
  }

  .booking-confirm__image {
    width: 100%;
    height: min(72vw, 320px);
  }

  .booking-success p {
    white-space: normal;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .booking-flow__head,
  .booking-room-list,
  .booking-services,
  .booking-confirm {
    width: min(100vw - 28px, 760px);
  }

  .booking-room-card--selected .booking-service-actions,
  .booking-total-card__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 374px) {
  .booking-flow__head,
  .booking-room-list,
  .booking-services,
  .booking-confirm {
    width: min(100vw - 20px, 760px);
  }

  .booking-flow__title {
    font-size: 2.25rem;
  }

  .booking-widget {
    padding: 10px;
  }

  .booking-transfer__head,
  .booking-transfer__body,
  .booking-extra__copy,
  .booking-flow .room-card__top,
  .booking-flow .room-card__bottom,
  .booking-total-card {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .booking-guest-dropdown__step,
  .booking-transfer__plus {
    touch-action: manipulation;
  }
}

@media (min-width: 375px) and (max-width: 1179px) {
  .booking-flow .booking-widget .booking-dropdown:not(.booking-dropdown--transfer-calendar):not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 800;
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: 100vh;
    margin: 0;
    border: 0;
    background: #fffced;
    box-shadow: none;
  }

  @supports (height: 100dvh) {
    .booking-flow .booking-widget .booking-dropdown:not(.booking-dropdown--transfer-calendar):not([hidden]) {
      height: 100dvh;
    }
  }

  .booking-flow .booking-dropdown__mobile-title {
    margin: 0 0 48px;
    display: block;
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 28px;
  }

  .booking-flow .booking-dropdown__mobile-close {
    position: fixed;
    z-index: 802;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    display: block;
    background: transparent;
  }

  .booking-flow .booking-dropdown__mobile-close::before,
  .booking-flow .booking-dropdown__mobile-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 1px;
    background: #000;
  }

  .booking-flow .booking-dropdown__mobile-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .booking-flow .booking-dropdown__mobile-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .booking-flow .booking-dropdown__actions,
  .booking-flow .booking-guest-dropdown__actions,
  .booking-flow .booking-special-dropdown__actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 802;
    width: 100%;
    min-height: 92px;
    margin: 0;
    border-top: 1px solid var(--booking-line);
    background: #fffced;
  }

  .booking-flow .booking-dropdown__actions [data-booking-clear-dates] {
    display: none;
  }

  .booking-flow .booking-dropdown__cancel-mobile {
    display: flex;
  }

  .booking-flow .booking-dropdown__actions .button-primary,
  .booking-flow .booking-dropdown__actions .button-secondary,
  .booking-flow .booking-guest-dropdown__actions .button-primary,
  .booking-flow .booking-guest-dropdown__actions .button-secondary,
  .booking-flow .booking-special-dropdown__actions .button-primary {
    width: 100%;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .booking-flow {
    min-height: 100svh;
    padding: 98px 0 56px;
    background: #fffced;
  }

  .booking-flow__head {
    max-width: calc(100vw - 14px);
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .booking-flow__title {
    font-size: 28px;
    line-height: 28px;
  }

  .booking-progress {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
  }

  .booking-progress__step {
    min-width: 0;
    padding-top: 28px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-progress__step::before {
    top: 9px;
    left: 28px;
    width: calc(100% - 28px);
    max-width: none;
    height: 2px;
    background: #dbd6c2;
  }

  .booking-progress__number {
    width: 20px;
    height: 20px;
    background: #c6c1a1;
    color: #141414;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-progress__step.is-current .booking-progress__number,
  .booking-progress__step.is-complete .booking-progress__number {
    background: #141414;
    color: #fff;
  }

  .booking-progress__label {
    font-size: 0;
    line-height: 0;
    white-space: normal;
  }

  .booking-progress__label::after {
    content: attr(data-mobile-label);
    display: block;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
  }

  .booking-widget {
    width: 100%;
    min-height: 65px;
    margin: 0;
    padding: 0 16px;
    grid-template-columns: minmax(80px, 0.85fr) minmax(112px, 1fr) minmax(128px, 1.15fr);
    justify-content: stretch;
    border: 1px solid var(--booking-line);
  }

  .booking-widget__field,
  .booking-widget__search {
    min-height: 63px;
    border: 0;
  }

  .booking-flow .booking-widget,
  .booking-flow .booking-widget__field,
  .booking-flow .booking-widget__search {
    z-index: auto;
  }

  .booking-widget__field + .booking-widget__field,
  .booking-widget__search {
    border: 0;
  }

  .booking-widget__search {
    display: none;
  }

  .booking-widget__toggle {
    height: 63px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .booking-widget__label,
  .booking-widget__field::after {
    display: none;
  }

  /* Codes field on mobile: match the date/guests values — Jun serif (with
     serifs), same 14px, not the small caps sans label — and shorten «Специальные
     коды» to «Коды» so the compact row fits. The full text stays in the markup
     (font-size:0) and the short form is drawn from data-mobile-label, the same
     pattern the progress steps and currency use. */
  .booking-widget__field--special .booking-widget__label {
    display: block;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 0;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  .booking-widget__field--special .booking-widget__label::after {
    content: attr(data-mobile-label);
    font-size: 14px;
    line-height: 14px;
  }

  .booking-widget__value {
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
  }

  .booking-widget__field--guest .booking-widget__value {
    font-size: 13px;
  }

  .booking-widget__field--currency .booking-widget__value {
    font-size: 0;
    line-height: 0;
  }

  .booking-widget__field--currency .booking-widget__value::after {
    content: attr(data-mobile-label);
    font-size: 14px;
    line-height: 14px;
  }

  .booking-widget .booking-dropdown {
    left: -17px;
    max-width: calc(100vw - 14px);
    border-top: 1px solid var(--booking-line);
  }

  .booking-dropdown .booking-calendar {
    grid-template-columns: 1fr;
  }

  .booking-dropdown--calendar::before {
    content: none;
  }

  .booking-dropdown .booking-calendar__month + .booking-calendar__month {
    border-left: 0;
    border-top: 1px solid var(--booking-line);
  }

  .booking-flow .booking-widget .booking-dropdown:not(.booking-dropdown--transfer-calendar):not([hidden]) {
    padding: 69px 16px 120px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .booking-flow
    .booking-widget
    .booking-dropdown:not(.booking-dropdown--transfer-calendar):not([hidden])::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .booking-flow .booking-dropdown__mobile-title {
    font-size: 28px;
  }

  .booking-flow .booking-dropdown__mobile-close {
    top: 18px;
    right: 18px;
  }

  .booking-flow .booking-dropdown--calendar .booking-calendar {
    width: 100%;
    min-height: 0;
    height: auto;
    display: block;
    border: 1px solid var(--booking-line);
  }

  .booking-flow .booking-dropdown--calendar [data-booking-month] {
    min-height: 0;
    padding: 24px 24px 28px;
    border: 0;
  }

  .booking-flow .booking-dropdown--calendar [data-booking-month] + [data-booking-month] {
    display: none;
  }

  .booking-flow .booking-dropdown--calendar [data-booking-month]:first-child .booking-calendar__nav-placeholder {
    display: none;
  }

  .booking-flow .booking-dropdown--calendar .booking-calendar__nav--mobile-next {
    display: inline-grid;
  }

  .booking-flow .booking-dropdown--calendar .booking-calendar__header {
    margin-bottom: 25px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
  }

  .booking-flow .booking-dropdown--calendar .booking-calendar__grid {
    gap: 0;
  }

  .booking-flow .booking-dropdown--calendar .booking-calendar__day {
    min-height: 41px;
    font-size: 15px;
    line-height: 1;
  }

  .booking-flow .booking-dropdown__actions,
  .booking-flow .booking-guest-dropdown__actions,
  .booking-flow .booking-special-dropdown__actions {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .booking-flow .booking-dropdown__actions .button-primary,
  .booking-flow .booking-dropdown__actions .button-secondary,
  .booking-flow .booking-guest-dropdown__actions .button-primary,
  .booking-flow .booking-guest-dropdown__actions .button-secondary,
  .booking-flow .booking-special-dropdown__actions .button-primary {
    min-height: 45px;
    height: 45px;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-flow .booking-currency-dropdown__option {
    min-height: 24px;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 24px;
  }

  .booking-flow .booking-currency-dropdown__option + .booking-currency-dropdown__option {
    margin-top: 24px;
  }

  .booking-flow .booking-currency-dropdown__option:hover,
  .booking-flow .booking-currency-dropdown__option:focus-visible {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .booking-flow .booking-currency-dropdown__option[aria-selected="true"] {
    background: transparent;
    text-decoration: none;
  }

  .booking-flow .booking-special-dropdown__field {
    min-height: 65px;
    font-size: 18px;
  }

  .booking-flow .booking-special-dropdown__field + .booking-special-dropdown__field {
    margin-top: 16px;
  }

  .booking-flow .booking-special-dropdown__field input {
    height: 65px;
    padding-top: 22px;
  }

  .booking-room-list {
    max-width: calc(100vw - 14px);
    margin: 48px auto 0;
    gap: 48px;
  }

  .booking-flow .booking-room-card {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    background: #fffced;
  }

  .booking-flow .room-card__media {
    width: 100%;
    min-height: 240px;
    height: 240px;
    border: 1px solid var(--booking-line);
    border-bottom: 0;
    touch-action: pan-x pan-y;
  }

  /* Selected cards (step 2) carry a «НОМЕР N / Убрать» head with its own
     border-bottom right above the photo; the photo then drops its border-top so
     the two lines don't stack into a doubled 2px edge. */
  .booking-flow .booking-room-card__selection-head + .room-card__media {
    border-top: 0;
  }

  .booking-flow .room-card__gallery-dots {
    bottom: 16px;
    gap: 10px;
  }

  .booking-flow .room-card__gallery-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
  }

  .booking-flow .room-card__gallery-dot.is-active,
  .booking-flow .room-card__gallery-dot:hover,
  .booking-flow .room-card__gallery-dot:focus-visible {
    background: #fff;
  }

  .booking-flow .room-card__body {
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    border: 1px solid var(--booking-line);
    border-top: 0;
  }

  .booking-flow .booking-room-card .room-card__body::after {
    content: "";
    order: 6;
    width: 100%;
    height: 1px;
    margin-top: 24px;
    display: block;
    background: var(--booking-line);
    flex: 0 0 auto;
  }

  .booking-flow .room-card__top {
    padding: 0;
    display: contents;
  }

  .booking-flow .room-card__copy {
    order: 1;
    max-width: none;
  }

  .booking-flow .room-card__title {
    margin: 0;
    font-size: 28px;
    line-height: 28px;
  }

  .booking-flow .room-card__text {
    display: none;
  }

  .booking-flow .room-card__meta-link {
    order: 3;
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 14px;
    text-underline-offset: 2px;
  }

  .booking-flow .room-card__price {
    order: 4;
    position: static;
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--booking-line);
    text-align: left;
  }

  .booking-flow .room-card__price-current {
    font-size: 18px;
    line-height: 22px;
  }

  .booking-flow .room-card__price-old,
  .booking-flow .room-card__price-note {
    font-size: 12px;
    line-height: 16px;
  }

  .booking-flow .room-card__bottom {
    display: contents;
    min-height: 0;
    padding: 0;
    border: 0;
  }

  .booking-flow .room-card__bottom::before {
    content: none;
  }

  .booking-flow .room-card__details {
    order: 2;
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 17px;
  }

  .booking-flow .room-card__button,
  .booking-flow .room-card__bottom .button-primary {
    order: 5;
    width: 100%;
    min-height: 45px;
    height: 45px;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-flow:has(.booking-room-list) .room-card__button,
  .booking-flow:has(.booking-room-list) .room-card__bottom .button-primary {
    margin: 24px 0 0;
  }

  .booking-services,
  .booking-services__form {
    max-width: calc(100vw - 14px);
    margin: 48px auto 0;
    display: grid;
    gap: 48px;
  }

  .booking-services__form {
    margin-top: 0;
  }

  .booking-room-card--selected .booking-service-actions {
    order: 5;
    width: 100%;
    margin: 24px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .booking-room-card--selected .booking-service-actions .button-secondary,
  .booking-room-card--selected .booking-service-actions .button-primary,
  .booking-total-card__actions .button-secondary,
  .booking-total-card__actions .button-primary {
    width: 100%;
    min-height: 45px;
    height: 45px;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-extra {
    min-height: 0;
    padding: 0;
    border: 1px solid var(--booking-line);
    display: flex;
    flex-direction: column;
    background: #fffced;
  }

  .booking-gift-card {
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .booking-gift-card__image {
    min-height: 142px;
    height: 142px;
  }

  .booking-gift-card__copy {
    max-width: none;
    padding: 24px 16px;
  }

  .booking-gift-card__copy h2 {
    font-size: 28px;
    line-height: 28px;
  }

  .booking-gift-card__copy p {
    margin-top: 16px;
    font-size: 14px;
    line-height: normal;
  }

  .booking-gift-card__flag {
    right: 16px;
  }

  .booking-extra__copy {
    display: contents;
    padding: 0;
  }

  .booking-extra__copy h2 {
    order: 1;
    width: 100%;
    min-height: 75px;
    padding: 0 16px;
    border-bottom: 1px solid var(--booking-line);
    display: flex;
    align-items: center;
    font-size: 28px;
    line-height: 28px;
  }

  .booking-extra__image {
    order: 2;
    width: auto;
    height: 142px;
    margin: 16px 16px 0;
    border-radius: 0;
  }

  .booking-extra__copy p {
    order: 3;
    max-width: none;
    margin: 24px 16px 0;
    font-size: 14px;
    line-height: normal;
  }

  .booking-extra__side {
    order: 4;
    width: auto;
    margin: 24px 16px 0;
    padding: 24px 0;
    border-top: 1px solid var(--booking-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .booking-extra__price,
  .booking-transfer__price,
  .booking-total-card__price {
    font-size: 18px;
    line-height: 18px;
    text-align: left;
  }

  .booking-extra__price span,
  .booking-transfer__price span,
  .booking-total-card__price em {
    font-size: 12px;
    line-height: 12px;
  }

  .booking-extra__toggle,
  .booking-transfer__button {
    width: 155px;
    min-height: 45px;
    height: 45px;
    padding: 0 32px;
    flex: 0 0 155px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-transfer {
    min-height: 0;
    border: 1px solid var(--booking-line);
    background: #fffced;
    overflow: visible;
  }

  .booking-transfer.is-open {
    min-height: 0;
  }

  .booking-transfer__head {
    min-height: 75px;
    padding: 0 16px;
  }

  .booking-transfer h2 {
    font-size: 28px;
    line-height: 28px;
  }

  .booking-transfer__plus {
    width: 40px;
    height: 40px;
  }

  .booking-transfer__plus::before,
  .booking-transfer__plus::after {
    width: 20px;
  }

  .booking-transfer__body {
    position: static;
    min-height: 0;
    padding: 16px 16px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 155px;
    column-gap: 16px;
    row-gap: 24px;
  }

  .booking-transfer__body[hidden] {
    display: none;
  }

  .booking-transfer__workflow {
    grid-column: 1 / -1;
    max-width: none;
    gap: 8px;
  }

  .booking-transfer__step {
    min-height: 0;
    padding-left: 33px;
  }

  .booking-transfer__step:not(:last-child)::after {
    left: 12px;
    top: 33px;
    height: calc(100% - 25px);
  }

  .booking-transfer__step--arrival::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 33px;
    width: 1px;
    height: calc(100% - 8px);
    background: var(--booking-line);
  }

  .booking-transfer__step-head {
    min-height: 25px;
    margin: 0 0 16px -33px;
    gap: 8px;
    align-items: center;
  }

  .booking-transfer__step-head h3 {
    font-size: 22px;
    line-height: 22px;
  }

  .booking-transfer__step-number {
    width: 25px;
    height: 25px;
    font-size: 14px;
  }

  .booking-transfer__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    max-width: none;
    gap: 12px 24px;
  }

  .booking-transfer__choices--transport {
    grid-template-columns: 1fr;
  }

  .booking-transfer__choice {
    gap: 8px;
    font-size: 14px;
    line-height: normal;
  }

  .booking-transfer__choice-box {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .booking-transfer__choice-box::after {
    left: 4px;
    top: 0;
    width: 8px;
    height: 13px;
  }

  .booking-transfer__step--arrival {
    min-height: 0;
  }

  .booking-transfer__fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .booking-transfer-field {
    gap: 6px;
    font-size: 14px;
    line-height: 14px;
  }

  .booking-transfer-field input,
  .booking-transfer-field select {
    height: 45px;
    padding: 0 12px;
  }

  .booking-transfer-field textarea {
    height: 90px;
    padding: 12px;
  }

  .booking-transfer-field__split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .booking-transfer-field--comments {
    grid-column: auto;
  }

  .booking-transfer-field--flight {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .booking-transfer-field--flight span {
    grid-column: 1;
  }

  .booking-transfer-field--flight em {
    position: static;
    grid-column: 2;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-transfer-field--flight input {
    grid-column: 1 / -1;
  }

  .booking-dropdown--transfer-calendar {
    width: 100%;
    max-width: none;
  }

  .booking-transfer__guests {
    position: static;
    grid-column: 1 / -1;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--booking-line);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 14px;
  }

  .booking-transfer__guests::before {
    content: "";
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 50%;
    background: #dbd6c2 url("../images/figma/room-modal/icon-people.svg") center / 16px 12px no-repeat;
  }

  .booking-transfer__price {
    position: static;
    grid-column: 1;
    align-self: center;
  }

  .booking-transfer__button {
    position: static;
    grid-column: 2;
    justify-self: end;
  }

  .booking-total-card {
    min-height: 0;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .booking-total-card::after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: var(--booking-line);
  }

  .booking-total-card h2 {
    font-size: 28px;
    line-height: 28px;
  }

  .booking-total-card__price {
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid var(--booking-line);
  }

  .booking-total-card__price strong {
    font-size: 18px;
    line-height: 18px;
  }

  .booking-total-card__price span {
    margin-top: 2px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-total-card__actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.is-booking-summary-open {
    overflow: hidden;
  }

  .booking-confirm {
    max-width: calc(100vw - 14px);
    margin: 48px auto 0;
    padding-bottom: 110px;
    position: relative;
    display: block;
  }

  .booking-confirm__section-title,
  .booking-confirm__summary-title {
    gap: 16px;
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 28px;
  }

  .booking-confirm__section-title span,
  .booking-confirm__summary-title span {
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 16px;
  }

  .booking-confirm__section-title--payment {
    margin-top: 48px;
  }

  .booking-confirm__fields {
    gap: 16px;
  }

  .booking-confirm .booking-field {
    min-height: 60px;
    font-size: 14px;
    line-height: 14px;
  }

  .booking-confirm .booking-field__control {
    min-height: 60px;
    padding: 26px 8px 16px;
    border-bottom-color: #c1c1c1;
    font-size: 16px;
    line-height: 14px;
  }

  .booking-confirm .booking-field__label {
    left: 8px;
    top: 36px;
    line-height: 14px;
  }

  .booking-confirm .booking-field:focus-within .booking-field__label,
  .booking-confirm input.booking-field__control:not(:placeholder-shown) + .booking-field__label,
  .booking-confirm textarea.booking-field__control:not(:placeholder-shown) + .booking-field__label,
  .booking-confirm .booking-field.has-value .booking-field__label,
  .booking-confirm .booking-field__control:-webkit-autofill + .booking-field__label {
    top: 8px;
  }

  .booking-confirm .booking-field--select::after {
    right: 8px;
    bottom: 21px;
  }

  .booking-confirm .booking-field--textarea {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .booking-confirm .booking-field--textarea .booking-field__label {
    position: static;
    order: -1;
    padding-left: 8px;
  }

  .booking-confirm .booking-field--textarea .booking-field__control {
    min-height: 82px;
    height: 82px;
    margin-top: 0;
    padding: 10px;
    border: 1px solid #c1c1c1;
    font-size: 16px;
  }

  .booking-confirm__check {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 16px;
    font-size: 14px;
    line-height: normal;
  }

  .booking-confirm__check-box {
    width: 18px;
    height: 18px;
  }

  .booking-confirm__check-box::after {
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
  }

  .booking-confirm__submit {
    min-height: 45px;
    height: 45px;
    margin-top: 32px;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-confirm__summary {
    position: fixed;
    inset: 0;
    z-index: 800;
    width: 100%;
    max-width: none;
    height: 100vh;
    min-height: 100vh;
    padding: 20px 16px 0;
    border-left: 0;
    display: flex;
    flex-direction: column;
    background: #fffced;
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition:
      transform 280ms ease,
      visibility 0s linear 280ms;
    -webkit-overflow-scrolling: touch;
  }

  @supports (height: 100dvh) {
    .booking-confirm__summary {
      height: 100dvh;
      min-height: 100dvh;
    }
  }

  .booking-confirm.is-summary-open .booking-confirm__summary {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: transform 280ms ease;
  }

  .booking-confirm__mobile-summary-head {
    margin: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #040404;
    font-family: var(--font-heading);
    font-size: 20px;
    line-height: normal;
  }

  .booking-confirm__summary-close {
    width: 34px;
    height: 34px;
    border: 0;
    display: grid;
    place-items: center;
    background: transparent;
    color: #141414;
    cursor: pointer;
  }

  .booking-confirm__summary-close::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .booking-confirm__summary-title {
    margin: 0 0 48px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .booking-confirm__summary-title strong {
    flex: 0 0 calc(100% - 41px);
    margin: -8px 0 0 41px;
    font-size: 16px;
    line-height: normal;
    text-align: left;
  }

  .booking-confirm__room-label {
    margin-bottom: 24px;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 1.8px;
  }

  .booking-confirm__room-label button,
  .booking-confirm__room-label a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 18px;
  }

  .booking-confirm__room {
    grid-template-columns: 91px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
  }

  .booking-confirm__image {
    width: 91px;
    height: 136px;
  }

  .booking-confirm__room-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .booking-confirm__room-body h2 {
    margin: 0;
    font-size: 18px;
    line-height: 18px;
  }

  .booking-confirm__room-body em {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: normal;
  }

  .booking-confirm__service-list {
    gap: 0;
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-confirm__room-body p {
    margin: 0 0 15px;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-confirm__room-bottom {
    margin-top: auto;
    gap: 16px;
    align-items: flex-end;
    font-size: 14px;
    line-height: normal;
  }

  .booking-confirm__room-bottom strong {
    white-space: nowrap;
  }

  /* Air between the last room card and the total's divider so «Общий счет»
     never presses against the last card when the sheet fills (client fix). */
  .booking-confirm__rooms {
    margin-bottom: 10px;
  }

  .booking-confirm__total {
    min-height: 81px;
    margin: auto -16px 0;
    padding: 0 16px;
    border-top: 1px solid var(--booking-line, #c6c1a1);
    align-items: center;
    font-size: 20px;
    line-height: normal;
  }

  .booking-confirm__total strong {
    margin-left: auto;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
  }

  .booking-confirm__mobile-total {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 75;
    min-height: 81px;
    padding: 0 16px;
    border: 0;
    border-top: 1px solid var(--booking-line, #c6c1a1);
    display: flex;
    align-items: center;
    background: #fffced;
    color: #040404;
    font-family: var(--font-heading);
    cursor: pointer;
  }

  .booking-confirm.is-mobile-total-docked .booking-confirm__mobile-total {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .booking-confirm.is-summary-open .booking-confirm__mobile-total {
    visibility: hidden;
    pointer-events: none;
  }

  .booking-confirm__mobile-total span {
    width: 110px;
    font-size: 20px;
    line-height: normal;
    text-align: left;
  }

  .booking-confirm__mobile-total strong {
    margin-left: auto;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
  }

  .booking-confirm__mobile-total i {
    width: 9px;
    height: 9px;
    margin-left: 16px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    display: block;
    background: transparent;
    color: #141414;
    font-style: normal;
    transform: rotate(225deg);
  }

  .booking-confirm__mobile-total i::before {
    content: none;
  }

  .booking-flow--success {
    min-height: 100vh;
    min-height: 100svh;
    padding: 60px 0 0;
    display: flex;
    background: #fffced;
  }

  .booking-success {
    width: 100%;
    min-height: calc(100vh - 60px);
    min-height: calc(100svh - 60px);
    padding: 0 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .booking-success__logo {
    width: min(451.133px, calc(100vw - 32px));
    max-width: 100%;
    height: auto;
    margin-top: auto;
  }

  .booking-success p {
    width: min(451.133px, calc(100vw - 32px));
    margin: 27.905px 0 0;
    color: #000;
    font-size: clamp(24px, 7.467vw, 28px);
    line-height: clamp(30px, 8vw, 36px);
    white-space: normal;
  }

  .booking-success .button-primary {
    position: relative;
    width: min(452px, calc(100vw - 32px));
    min-height: 45px;
    height: 45px;
    margin-top: auto;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-success .button-primary::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -24px;
    width: 100vw;
    height: 1px;
    background: #c6c1a1;
    transform: translateX(-50%);
  }
}

@media (min-width: 375px) and (max-width: 414px) {
  .booking-flow .booking-flow__head > .booking-widget {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 10px;
    column-gap: 4px;
  }

  .booking-flow .booking-flow__head > .booking-widget .booking-widget__field {
    min-width: 0;
  }

  .booking-flow .booking-flow__head > .booking-widget .booking-widget__toggle {
    min-width: 0;
    padding: 0 4px;
    align-items: center;
  }

  .booking-flow .booking-flow__head > .booking-widget .booking-widget__value {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Shrink the short «Коды» label, not the (hidden) full one. Targeting the
     label itself here re-set its font-size and printed «Специальные коды»
     next to the ::after «Коды» — a doubled label on 375–414px phones. */
  .booking-flow .booking-flow__head > .booking-widget .booking-widget__field--special .booking-widget__label::after {
    font-size: 12px;
    line-height: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1179px) {
  .booking-flow.booking-flow--success {
    min-height: 100vh;
    min-height: 100svh;
    padding: 60px 0 0;
    display: flex;
    background: #fffced;
  }

  .booking-flow--success .booking-success {
    width: 100%;
    min-height: calc(100vh - 60px);
    min-height: calc(100svh - 60px);
    padding: 0 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .booking-flow--success .booking-success__logo {
    width: min(451.133px, calc(100vw - 32px));
    max-width: 100%;
    height: auto;
    margin-top: auto;
  }

  .booking-flow--success .booking-success p {
    width: min(451.133px, calc(100vw - 32px));
    margin: 27.905px 0 0;
    color: #000;
    font-size: 28px;
    line-height: 36px;
    white-space: normal;
  }

  .booking-flow--success .booking-success .button-primary {
    position: relative;
    width: min(452px, calc(100vw - 32px));
    min-width: 0;
    min-height: 45px;
    height: 45px;
    margin-top: auto;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-flow--success .booking-success .button-primary::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -24px;
    width: 100vw;
    height: 1px;
    background: #c6c1a1;
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) and (max-width: 1179px) {
  .booking-flow .booking-widget__field:has(.booking-dropdown:not([hidden])) {
    z-index: 1300;
  }

  .booking-flow .booking-widget .booking-dropdown:not(.booking-dropdown--transfer-calendar):not([hidden]) {
    padding: 72px 32px 92px;
    overflow: hidden;
  }

  .booking-flow .booking-dropdown--calendar::before {
    content: none;
  }

  .booking-flow .booking-dropdown__mobile-title {
    font-size: 32px;
  }

  .booking-flow .booking-dropdown__mobile-close {
    top: 24px;
    right: 32px;
  }

  .booking-flow .booking-dropdown--calendar .booking-calendar {
    width: 100%;
    min-height: 0;
    height: 389px;
    max-height: 389px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #c6c1a1;
    overflow: hidden;
  }

  .booking-flow .booking-dropdown--calendar [data-booking-month] {
    display: block;
    min-height: 0;
    height: 389px;
    padding: 24px 24px 0;
    border: 0;
  }

  .booking-flow .booking-dropdown--calendar [data-booking-month] + [data-booking-month] {
    display: block;
    border-top: 0;
    border-left: 1px solid #c6c1a1;
  }

  .booking-flow .booking-dropdown--calendar [data-booking-month]:first-child .booking-calendar__nav-placeholder {
    display: none;
  }

  .booking-flow .booking-dropdown--calendar .booking-calendar__nav--mobile-next {
    display: inline-grid;
  }

  .booking-flow .booking-dropdown--calendar .booking-calendar__header {
    margin-bottom: 46px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
  }

  .booking-flow .booking-dropdown--calendar .booking-calendar__grid {
    gap: 0;
  }

  .booking-flow .booking-dropdown--calendar .booking-calendar__day {
    min-height: 41px;
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1;
  }

  .booking-flow .booking-dropdown__actions,
  .booking-flow .booking-guest-dropdown__actions,
  .booking-flow .booking-special-dropdown__actions {
    height: 92px;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .booking-flow .booking-dropdown__cancel-mobile {
    order: -1;
  }
}

@media (min-width: 768px) and (max-width: 1179px) {
  .booking-flow:has(.booking-room-list) {
    --booking-progress-width: min(500px, 100%);
    min-height: 100svh;
    padding: 98px 0 56px;
    background: #fffced;
  }

  /* No width of its own: pinning the head to 500px while the list beside it ran
     `100vw - 64px` left the two centred on different axes (230px apart at 1024)
     and squeezed the title onto two lines. It shares the flow's width instead. */
  .booking-flow:has(.booking-room-list) .booking-flow__head {
    max-width: none;
  }

  .booking-flow:has(.booking-room-list) .booking-room-list {
    width: calc(100vw - 64px);
    max-width: none;
  }

  .booking-flow:has(.booking-room-list) .booking-flow__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .booking-flow:has(.booking-room-list) .booking-flow__title {
    padding: 10px;
    font-size: 32px;
    line-height: 28px;
  }

  .booking-flow:has(.booking-room-list) .booking-progress {
    width: min(500px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
  }

  .booking-flow:has(.booking-room-list) .booking-progress__step {
    min-width: 0;
    min-height: 36px;
    padding-top: 24px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-flow:has(.booking-room-list) .booking-progress__step::before {
    top: 9px;
    left: 28px;
    width: calc(100% - 28px);
    max-width: none;
    height: 2px;
  }

  .booking-flow:has(.booking-room-list) .booking-progress__number {
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-flow:has(.booking-room-list) .booking-progress__label {
    font-size: 0;
    line-height: 0;
    white-space: normal;
  }

  .booking-flow:has(.booking-room-list) .booking-progress__label::after {
    content: attr(data-mobile-label);
    display: block;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
  }

  .booking-flow:has(.booking-room-list) .booking-room-list {
    margin: 48px auto 0;
    gap: 48px;
  }

  .booking-flow:has(.booking-room-list) .booking-room-card {
    width: 100%;
    min-height: 0;
    height: auto;
    border: 0;
    display: flex;
    flex-direction: column;
    background: #fffced;
  }

  .booking-flow:has(.booking-room-list) .room-card__media {
    width: 100%;
    min-height: 400px;
    height: 400px;
    border: 1px solid var(--booking-line);
    border-bottom: 0;
    background-position: center;
  }

  .booking-flow:has(.booking-room-list) .room-card__gallery-dots {
    bottom: 16px;
  }

  .booking-flow:has(.booking-room-list) .room-card__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    padding: 24px 16px;
    border: 1px solid var(--booking-line);
    border-top: 0;
  }

  .booking-flow:has(.booking-room-list) .booking-room-card .room-card__body::after {
    content: "";
    order: 6;
    width: 100%;
    height: 1px;
    margin-top: 24px;
    display: block;
    background: var(--booking-line);
    flex: 0 0 auto;
  }

  .booking-flow:has(.booking-room-list) .room-card__top {
    padding: 0;
    display: contents;
  }

  .booking-flow:has(.booking-room-list) .room-card__copy {
    order: 1;
    max-width: none;
  }

  .booking-flow:has(.booking-room-list) .room-card__title {
    margin: 0;
    font-size: 28px;
    line-height: 28px;
  }

  .booking-flow:has(.booking-room-list) .room-card__text {
    display: none;
  }

  .booking-flow:has(.booking-room-list) .room-card__details {
    order: 2;
    width: 100%;
    margin: 16px 0 0;
    color: #676767;
    font-size: 12px;
    line-height: normal;
  }

  .booking-flow:has(.booking-room-list) .room-card__meta-link {
    order: 3;
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 14px;
    text-underline-offset: 2px;
  }

  .booking-flow:has(.booking-room-list) .room-card__price {
    order: 4;
    position: static;
    width: 100%;
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--booking-line);
    text-align: left;
  }

  .booking-flow:has(.booking-room-list) .room-card__price-current {
    font-size: 18px;
    line-height: 22px;
  }

  .booking-flow:has(.booking-room-list) .room-card__price-old,
  .booking-flow:has(.booking-room-list) .room-card__price-note {
    font-size: 12px;
    line-height: normal;
  }

  .booking-flow:has(.booking-room-list) .room-card__bottom {
    display: contents;
    min-height: 0;
    padding: 0;
    border: 0;
  }

  .booking-flow:has(.booking-room-list) .room-card__bottom::before {
    content: none;
  }

  .booking-flow:has(.booking-room-list) .room-card__button,
  .booking-flow:has(.booking-room-list) .room-card__bottom .button-primary {
    order: 5;
    width: 100%;
    min-height: 45px;
    height: 45px;
    margin: 24px 0 0;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-flow:has(.booking-services) {
    min-height: 100svh;
    padding: 98px 0 56px;
    background: #fffced;
  }

  .booking-flow:has(.booking-services) .booking-flow__head {
    width: min(500px, calc(100vw - 64px));
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .booking-flow:has(.booking-services) .booking-flow__title {
    padding: 10px;
    font-size: 32px;
    line-height: 28px;
  }

  .booking-flow:has(.booking-services) .booking-progress {
    width: 100%;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
  }

  .booking-flow:has(.booking-services) .booking-progress__step {
    min-width: 0;
    min-height: 36px;
    padding-top: 24px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-flow:has(.booking-services) .booking-progress__step::before {
    top: 9px;
    left: 28px;
    width: calc(100% - 28px);
    max-width: none;
    height: 2px;
  }

  .booking-flow:has(.booking-services) .booking-progress__number {
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-flow:has(.booking-services) .booking-progress__label {
    font-size: 0;
    line-height: 0;
    white-space: normal;
  }

  .booking-flow:has(.booking-services) .booking-progress__label::after {
    content: attr(data-mobile-label);
    display: block;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
  }

  .booking-flow:has(.booking-services) .booking-services,
  .booking-flow:has(.booking-services) .booking-services__form {
    width: calc(100vw - 64px);
    max-width: none;
    margin: 48px auto 0;
    display: grid;
    gap: 48px;
  }

  .booking-flow:has(.booking-services) .booking-services__form {
    margin-top: 0;
  }

  .booking-services > .booking-room-card {
    width: 100%;
    min-height: 0;
    height: auto;
    border: 0;
    display: flex;
    flex-direction: column;
    background: #fffced;
    overflow: visible;
  }

  .booking-services > .booking-room-card::before,
  .booking-services > .booking-room-card::after {
    content: none;
  }

  .booking-services > .booking-room-card .room-card__media {
    width: 100%;
    min-height: 440px;
    height: 440px;
    align-self: stretch;
    border: 1px solid var(--booking-line);
    border-bottom: 0;
    background-position: center;
  }

  .booking-services > .booking-room-card .room-card__gallery-dots {
    bottom: 16px;
  }

  .booking-services > .booking-room-card .room-card__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    padding: 24px 16px;
    border: 1px solid var(--booking-line);
    border-top: 0;
  }

  .booking-services > .booking-room-card .room-card__body::after {
    content: "";
    order: 6;
    width: 100%;
    height: 1px;
    margin-top: 24px;
    display: block;
    background: var(--booking-line);
    flex: 0 0 auto;
  }

  .booking-services > .booking-room-card .room-card__top {
    padding: 0;
    display: contents;
  }

  .booking-services > .booking-room-card .room-card__copy {
    order: 1;
    max-width: none;
    padding-top: 0;
  }

  .booking-services > .booking-room-card .room-card__title {
    margin: 0;
    font-size: 28px;
    line-height: 28px;
  }

  .booking-services > .booking-room-card .room-card__text {
    display: none;
  }

  .booking-services > .booking-room-card .room-card__details {
    order: 2;
    position: static;
    width: 100%;
    margin: 16px 0 0;
    color: #676767;
    font-size: 12px;
    line-height: normal;
  }

  .booking-services > .booking-room-card .room-card__meta-link {
    order: 3;
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 14px;
    text-underline-offset: 2px;
  }

  .booking-services > .booking-room-card .room-card__price {
    order: 4;
    position: static;
    width: 100%;
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--booking-line);
    text-align: left;
  }

  .booking-services > .booking-room-card .room-card__price-current {
    font-size: 18px;
    line-height: 22px;
  }

  .booking-services > .booking-room-card .room-card__price-old,
  .booking-services > .booking-room-card .room-card__price-note {
    font-size: 12px;
    line-height: normal;
  }

  .booking-services > .booking-room-card .room-card__bottom {
    display: contents;
    min-height: 0;
    padding: 0;
    border: 0;
  }

  .booking-services > .booking-room-card .room-card__bottom::before {
    content: none;
  }

  .booking-room-card--selected .booking-service-actions {
    order: 5;
    position: static;
    width: 100%;
    margin: 24px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .booking-room-card--selected .booking-service-actions .button-secondary,
  .booking-room-card--selected .booking-service-actions .button-primary,
  .booking-total-card__actions .button-secondary,
  .booking-total-card__actions .button-primary {
    width: 100%;
    min-width: 0;
    min-height: 45px;
    height: 45px;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-extra {
    min-height: 0;
    height: auto;
    padding: 0;
    border: 1px solid var(--booking-line);
    display: flex;
    flex-direction: column;
    background: #fffced;
  }

  .booking-gift-card {
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .booking-gift-card__image {
    min-height: 240px;
    height: 240px;
  }

  .booking-gift-card__copy {
    max-width: none;
    padding: 24px 16px;
  }

  .booking-gift-card__copy h2 {
    font-size: 28px;
    line-height: 28px;
  }

  .booking-gift-card__copy p {
    margin-top: 16px;
    font-size: 14px;
    line-height: normal;
  }

  .booking-gift-card__flag {
    right: 16px;
  }

  .booking-extra__copy {
    display: contents;
    padding: 0;
  }

  .booking-extra__copy h2 {
    order: 1;
    width: 100%;
    min-height: 75px;
    padding: 0 16px;
    border-bottom: 1px solid var(--booking-line);
    display: flex;
    align-items: center;
    font-size: 28px;
    line-height: 28px;
  }

  .booking-extra__image {
    order: 2;
    width: auto;
    height: 240px;
    margin: 16px 16px 0;
    border-radius: 0;
  }

  .booking-extra__copy p {
    order: 3;
    max-width: none;
    margin: 24px 16px 0;
    font-size: 14px;
    line-height: normal;
  }

  .booking-extra__side {
    order: 4;
    width: auto;
    margin: 24px 16px 0;
    padding: 24px 0;
    border-top: 1px solid var(--booking-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .booking-extra__price,
  .booking-transfer__price,
  .booking-total-card__price {
    font-size: 18px;
    line-height: 18px;
    text-align: left;
  }

  .booking-extra__price span,
  .booking-transfer__price span,
  .booking-total-card__price em {
    font-size: 12px;
    line-height: 12px;
  }

  .booking-extra__toggle,
  .booking-transfer__button {
    width: 155px;
    min-height: 45px;
    height: 45px;
    padding: 0 32px;
    flex: 0 0 155px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-transfer {
    min-height: 0;
    height: auto;
    border: 1px solid var(--booking-line);
    background: #fffced;
    overflow: hidden;
  }

  .booking-transfer.is-open {
    min-height: 0;
    height: auto;
  }

  .booking-transfer__head {
    min-height: 75px;
    height: 75px;
    padding: 0 16px;
  }

  .booking-transfer h2 {
    font-size: 28px;
    line-height: 28px;
  }

  .booking-transfer__plus {
    width: 40px;
    height: 40px;
  }

  .booking-transfer__plus::before,
  .booking-transfer__plus::after {
    width: 20px;
  }

  .booking-transfer__body {
    position: static;
    min-height: 0;
    height: auto;
    padding: 16px 16px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 155px;
    column-gap: 16px;
    row-gap: 24px;
  }

  .booking-transfer__body[hidden] {
    display: none;
  }

  .booking-transfer__workflow {
    grid-column: 1 / -1;
    max-width: none;
    gap: 8px;
  }

  .booking-transfer__step {
    min-height: 0;
    padding-left: 33px;
  }

  .booking-transfer__step--arrival {
    min-height: 0;
  }

  .booking-transfer__step:not(:last-child)::after {
    left: 12px;
    top: 33px;
    height: calc(100% - 25px);
  }

  .booking-transfer__step--arrival::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 33px;
    width: 1px;
    height: calc(100% - 8px);
    background: var(--booking-line);
  }

  .booking-transfer__step-head {
    min-height: 25px;
    margin: 0 0 16px -33px;
    gap: 8px;
    align-items: center;
  }

  .booking-transfer__step-head h3 {
    font-size: 22px;
    line-height: 22px;
  }

  .booking-transfer__step-number {
    width: 25px;
    height: 25px;
    font-size: 14px;
  }

  .booking-transfer__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    max-width: none;
    gap: 12px 24px;
  }

  .booking-transfer__choices--transport {
    grid-template-columns: 1fr;
  }

  .booking-transfer__choice {
    gap: 8px;
    font-size: 14px;
    line-height: normal;
  }

  .booking-transfer__choice-box {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .booking-transfer__choice-box::after {
    left: 4px;
    top: 0;
    width: 8px;
    height: 13px;
  }

  .booking-transfer__fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .booking-transfer-field {
    gap: 6px;
    font-size: 14px;
    line-height: 14px;
  }

  .booking-transfer-field input,
  .booking-transfer-field select {
    height: 45px;
    padding: 0 12px;
  }

  .booking-transfer-field textarea {
    height: 90px;
    padding: 12px;
  }

  .booking-transfer-field__split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .booking-transfer-field--comments {
    grid-column: auto;
  }

  .booking-transfer-field--flight {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .booking-transfer-field--flight span {
    grid-column: 1;
  }

  .booking-transfer-field--flight em {
    position: static;
    grid-column: 2;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-transfer-field--flight input {
    grid-column: 1 / -1;
  }

  .booking-transfer__guests {
    position: static;
    grid-column: 1 / -1;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--booking-line);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 14px;
  }

  .booking-transfer__guests::before {
    content: "";
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 50%;
    background: #dbd6c2 url("../images/figma/room-modal/icon-people.svg") center / 16px 12px no-repeat;
  }

  .booking-transfer__price {
    position: static;
    grid-column: 1;
    align-self: center;
  }

  .booking-transfer__button {
    position: static;
    grid-column: 2;
    justify-self: end;
  }

  .booking-total-card {
    position: static;
    min-height: 0;
    height: auto;
    margin-top: 0;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .booking-total-card::after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: var(--booking-line);
  }

  .booking-total-card h2 {
    position: static;
    width: 100%;
    font-size: 28px;
    line-height: 28px;
  }

  .booking-total-card__price {
    position: static;
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid var(--booking-line);
  }

  .booking-total-card__price strong {
    font-size: 18px;
    line-height: 18px;
  }

  .booking-total-card__price span {
    margin-top: 2px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-total-card__actions {
    position: static;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.booking-flow:has(.booking-confirm) .booking-widget {
  display: none;
}

@media (min-width: 768px) and (max-width: 1179px) {
  .booking-flow:has(.booking-confirm) {
    --booking-confirm-summary-side: max(32px, calc((100vw - 702px) / 2));
    --booking-confirm-summary-padding-x: 34px;
    min-height: 100svh;
    padding: 88px 0 129px;
    background: #fffced;
  }

  .booking-flow:has(.booking-confirm) .booking-flow__head {
    width: min(500px, calc(100vw - 64px));
    max-width: none;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .booking-flow:has(.booking-confirm) .booking-flow__title {
    width: 100%;
    padding: 10px;
    font-size: 32px;
    line-height: 28px;
    text-align: center;
  }

  .booking-flow:has(.booking-confirm) .booking-progress {
    width: min(500px, 100%);
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
  }

  .booking-flow:has(.booking-confirm) .booking-progress__step {
    min-width: 0;
    min-height: 36px;
    padding-top: 24px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-flow:has(.booking-confirm) .booking-progress__step::before {
    top: 9px;
    left: 28px;
    width: calc(100% - 28px);
    max-width: none;
    height: 2px;
  }

  .booking-flow:has(.booking-confirm) .booking-progress__number {
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-flow:has(.booking-confirm) .booking-progress__label {
    font-size: 0;
    line-height: 0;
    white-space: normal;
  }

  .booking-flow:has(.booking-confirm) .booking-progress__label::after {
    content: attr(data-mobile-label);
    display: block;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm {
    width: min(704px, calc(100vw - 64px));
    max-width: none;
    margin: 48px auto 0;
    padding-bottom: 110px;
    position: relative;
    display: block;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__column {
    width: 100%;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__section-title,
  .booking-flow:has(.booking-confirm) .booking-confirm__summary-title {
    gap: 16px;
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 28px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__section-title span,
  .booking-flow:has(.booking-confirm) .booking-confirm__summary-title span {
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 16px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__section-title--payment {
    margin-top: 48px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__fields {
    gap: 16px;
  }

  .booking-flow:has(.booking-confirm) .booking-field {
    min-height: 60px;
    font-size: 14px;
    line-height: 14px;
  }

  .booking-flow:has(.booking-confirm) .booking-field__control {
    min-height: 60px;
    padding: 26px 8px 16px;
    border-bottom-color: #c1c1c1;
    font-size: 16px;
    line-height: 14px;
  }

  .booking-flow:has(.booking-confirm) .booking-field__label {
    left: 8px;
    top: 36px;
    line-height: 14px;
  }

  .booking-flow:has(.booking-confirm) .booking-field:focus-within .booking-field__label,
  .booking-flow:has(.booking-confirm) input.booking-field__control:not(:placeholder-shown) + .booking-field__label,
  .booking-flow:has(.booking-confirm) textarea.booking-field__control:not(:placeholder-shown) + .booking-field__label,
  .booking-flow:has(.booking-confirm) .booking-field.has-value .booking-field__label,
  .booking-flow:has(.booking-confirm) .booking-field__control:-webkit-autofill + .booking-field__label {
    top: 8px;
  }

  .booking-flow:has(.booking-confirm) .booking-field--select::after {
    right: 8px;
    bottom: 21px;
  }

  .booking-flow:has(.booking-confirm) .booking-field--textarea {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .booking-flow:has(.booking-confirm) .booking-field--textarea .booking-field__label {
    position: static;
    order: -1;
    padding-left: 8px;
  }

  .booking-flow:has(.booking-confirm) .booking-field--textarea .booking-field__control {
    min-height: 82px;
    height: 82px;
    margin-top: 0;
    padding: 10px;
    border: 1px solid #c1c1c1;
    font-size: 16px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__check {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 16px;
    font-size: 14px;
    line-height: normal;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__check-box {
    width: 18px;
    height: 18px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__check-box::after {
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__submit {
    width: 100%;
    min-height: 45px;
    height: 45px;
    margin-top: 32px;
    padding: 0 32px;
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__summary {
    position: fixed;
    inset: 0;
    z-index: 800;
    width: 100%;
    max-width: none;
    height: 100vh;
    min-height: 100vh;
    padding: 20px var(--booking-confirm-summary-padding-x) 0;
    border-left: 0;
    display: flex;
    flex-direction: column;
    background: #fffced;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition:
      transform 280ms ease,
      visibility 0s linear 280ms;
    -webkit-overflow-scrolling: touch;
  }

  @supports (height: 100dvh) {
    .booking-flow:has(.booking-confirm) .booking-confirm__summary {
      height: 100dvh;
      min-height: 100dvh;
    }
  }

  .booking-confirm.is-summary-open .booking-confirm__summary {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: transform 280ms ease;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__mobile-summary-head {
    min-height: 24px;
    margin: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #040404;
    font-family: var(--font-heading);
    font-size: 20px;
    line-height: normal;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__summary-close {
    width: 34px;
    height: 24px;
    border: 0;
    display: grid;
    place-items: center;
    background: transparent;
    color: #141414;
    cursor: pointer;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__summary-close::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__summary-title {
    width: 100%;
    min-height: 28px;
    margin: 0 0 48px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    font-size: 24px;
    line-height: 28px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__summary-title strong {
    flex: 0 0 auto;
    width: 202px;
    margin: 0 0 0 auto;
    font-size: 16px;
    line-height: normal;
    text-align: right;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__room-label {
    width: 100%;
    margin-bottom: 24px;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 1.8px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__room-label button,
  .booking-flow:has(.booking-confirm) .booking-confirm__room-label a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 18px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__room {
    width: 100%;
    min-height: 200px;
    padding-bottom: 29px;
    border-bottom: 1px solid var(--booking-line, #c6c1a1);
    grid-template-columns: 247px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__image {
    width: 247px;
    height: 200px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__room-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__room-body h2 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 18px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__room-body em {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: normal;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__service-list {
    gap: 0;
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__room-body p {
    margin: 0 0 15px;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 12px;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__room-bottom {
    margin-top: auto;
    gap: 16px;
    align-items: flex-end;
    font-size: 14px;
    line-height: normal;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__room-bottom strong {
    white-space: nowrap;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__total {
    min-height: 81px;
    margin: auto calc(-1 * var(--booking-confirm-summary-padding-x)) 0;
    padding: 0 var(--booking-confirm-summary-padding-x);
    border-top: 0;
    align-items: center;
    font-size: 20px;
    line-height: normal;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__total strong {
    margin-left: auto;
    font-size: 18px;
    line-height: normal;
    white-space: nowrap;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__mobile-total {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 75;
    min-height: 81px;
    padding: 0 32px;
    border: 0;
    border-top: 1px solid var(--booking-line, #c6c1a1);
    display: flex;
    align-items: center;
    background: #fffced;
    color: #040404;
    font-family: var(--font-heading);
    cursor: pointer;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm.is-mobile-total-docked .booking-confirm__mobile-total {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .booking-confirm.is-summary-open .booking-confirm__mobile-total {
    visibility: hidden;
    pointer-events: none;
  }

  body.is-booking-summary-open {
    overflow: hidden;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__mobile-total span {
    width: 110px;
    font-size: 20px;
    line-height: normal;
    text-align: left;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__mobile-total strong {
    margin-left: auto;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__mobile-total i {
    width: 9px;
    height: 9px;
    margin-left: 16px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    display: block;
    background: transparent;
    color: #141414;
    font-style: normal;
    transform: rotate(225deg);
  }

  .booking-flow:has(.booking-confirm) .booking-confirm__mobile-total i::before {
    content: none;
  }

  @media (min-width: 1024px) {
    .booking-flow:has(.booking-confirm) {
      --booking-confirm-summary-side: 0;
      padding: 98px 0 80px;
    }

    .booking-flow:has(.booking-confirm) .booking-confirm {
      width: calc(100vw - 96px);
      max-width: none;
      margin: 48px auto 0;
      padding-bottom: 0;
      display: grid;
      grid-template-columns: 373px minmax(0, 1fr);
      gap: 51px;
      align-items: start;
    }

    .booking-flow:has(.booking-confirm) .booking-confirm__column {
      width: 373px;
    }

    .booking-flow:has(.booking-confirm) .booking-confirm__summary {
      position: static;
      inset: auto;
      z-index: auto;
      width: auto;
      max-width: none;
      height: auto;
      min-height: 1174px;
      padding: 0 0 0 51px;
      border-left: 1px solid var(--booking-line, #c6c1a1);
      display: block;
      background: transparent;
      overflow: visible;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      transition: none;
    }

    .booking-confirm.is-summary-open .booking-confirm__summary {
      visibility: visible;
      pointer-events: auto;
      transform: none;
      transition: none;
    }

    .booking-flow:has(.booking-confirm) .booking-confirm__mobile-summary-head,
    .booking-flow:has(.booking-confirm) .booking-confirm__mobile-total {
      display: none;
    }

    .booking-flow:has(.booking-confirm) .booking-confirm__summary-title {
      margin-bottom: 48px;
    }

    .booking-flow:has(.booking-confirm) .booking-confirm__room {
      min-height: 200px;
      padding-bottom: 0;
      border-bottom: 0;
      grid-template-columns: 135px minmax(0, 1fr);
      gap: 24px;
    }

    .booking-flow:has(.booking-confirm) .booking-confirm__image {
      width: 135px;
      height: 200px;
    }

    .booking-flow:has(.booking-confirm) .booking-confirm__total {
      min-height: 0;
      margin: 48px 0 0;
      padding: 24px 0 0;
      border-top: 1px solid var(--booking-line, #c6c1a1);
    }

    body.is-booking-summary-open {
      overflow: auto;
    }
  }

  .booking-flow .booking-flow__head > .booking-widget {
    width: min(500px, 100%);
    min-height: 65px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
    justify-content: stretch;
    border: 1px solid var(--booking-line);
  }

  .booking-flow .booking-widget__field,
  .booking-flow .booking-widget__search {
    min-width: 0;
    min-height: 63px;
    border: 0;
  }

  .booking-flow .booking-widget__field + .booking-widget__field,
  .booking-flow .booking-widget__search {
    border: 0;
  }

  .booking-flow .booking-widget__search {
    display: none;
  }

  .booking-flow .booking-widget__toggle {
    height: 63px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .booking-flow .booking-widget__field--guest .booking-widget__toggle {
    justify-content: center;
  }

  .booking-flow .booking-widget__field--currency .booking-widget__toggle {
    justify-content: flex-end;
  }

  .booking-flow .booking-widget__field--special .booking-widget__toggle {
    justify-content: flex-end;
    text-align: right;
  }

  .booking-flow .booking-widget__label,
  .booking-flow .booking-widget__field::after {
    display: none;
  }

  .booking-flow .booking-widget__field--special .booking-widget__label {
    display: block;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  .booking-flow .booking-widget__value {
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
  }

  .booking-flow .booking-widget__field--currency .booking-widget__value {
    font-size: 0;
    line-height: 0;
  }

  .booking-flow .booking-widget__field--currency .booking-widget__value::after {
    content: attr(data-mobile-label);
    font-size: 14px;
    line-height: 14px;
  }

  .booking-flow:has(.booking-confirm) .booking-flow__head > .booking-widget {
    display: none;
  }

  .booking-flow:has(.booking-services) .booking-transfer,
  .booking-flow:has(.booking-services) .booking-transfer.is-open {
    height: auto;
    min-height: 0;
  }

  .booking-flow:has(.booking-services) .booking-transfer__head {
    height: 75px;
    min-height: 75px;
  }

  .booking-flow:has(.booking-services) .booking-transfer__plus {
    margin-top: 0;
  }

  .booking-flow:has(.booking-services) .booking-transfer__body {
    height: auto;
    min-height: 1000px;
    grid-template-rows: minmax(700px, 1fr) auto 45px;
    align-content: stretch;
  }

  .booking-flow:has(.booking-services) .booking-transfer__workflow {
    max-width: 930px;
    min-height: 700px;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 524px;
  }

  .booking-flow:has(.booking-services) .booking-transfer__choices {
    width: min(381px, 100%);
  }

  .booking-flow:has(.booking-services) .booking-transfer__choices--transport {
    width: min(382px, 100%);
  }

  .booking-flow:has(.booking-services) .booking-transfer__step--arrival {
    width: min(506px, 100%);
    min-height: 524px;
  }

  .booking-flow:has(.booking-services) .booking-transfer-field--time {
    padding-right: 70px;
  }

  .booking-flow:has(.booking-services) .booking-transfer__guests {
    grid-row: 2;
  }

  .booking-flow:has(.booking-services) .booking-transfer__price,
  .booking-flow:has(.booking-services) .booking-transfer__button {
    grid-row: 3;
  }

  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__body {
    min-height: 421px;
    grid-template-rows: 220px auto 45px;
  }

  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__workflow {
    min-height: 220px;
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step {
    min-height: 0;
  }

  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step--arrival {
    width: auto;
    min-height: 0;
  }

  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step-head {
    margin-bottom: 0;
  }

  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__choices,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__fields {
    display: none;
  }

  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step--arrival::after {
    height: calc(100% - 8px);
  }
}

@media (max-width: 1179px) {
  .booking-flow .booking-transfer,
  .booking-flow .booking-transfer__head {
    height: auto;
    min-height: 85px;
    align-items: center;
  }

  .booking-flow .booking-transfer__plus {
    margin-top: 0;
  }

  .booking-flow .booking-transfer__body {
    position: static;
    height: auto;
    min-height: 0;
    padding: 51px 28px 28px 50px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 155px;
    grid-template-rows: none;
    column-gap: 24px;
    row-gap: 28px;
    align-content: start;
  }

  .booking-flow .booking-transfer__body[hidden] {
    display: none;
  }

  .booking-flow .booking-transfer__workflow {
    grid-column: 1 / -1;
    max-width: 972px;
    min-height: 0;
    display: grid;
    grid-template-rows: none;
    gap: 14px;
  }

  .booking-flow .booking-transfer__step,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step {
    min-height: 170px;
    padding-left: 62px;
  }

  .booking-flow .booking-transfer__step--arrival,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step--arrival {
    width: auto;
    min-height: 443px;
    margin-top: 0;
  }

  .booking-flow .booking-transfer__step:not(:last-child)::after {
    display: block;
    left: 14px;
    top: 43px;
    height: 127px;
  }

  .booking-flow .booking-transfer__step--arrival::after,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step--arrival::after {
    display: block;
    left: 14px;
    top: 43px;
    height: calc(100% - 8px);
  }

  .booking-flow .booking-transfer__step-head,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step-head {
    min-height: auto;
    margin: 0 0 35px -62px;
    gap: 20px;
    align-items: flex-start;
  }

  .booking-flow .booking-transfer__step-head h3 {
    font-size: 28px;
    line-height: 33px;
  }

  .booking-flow .booking-transfer__step-number {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }

  .booking-flow .booking-transfer__choices,
  .booking-flow .booking-transfer__choices--transport,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__choices {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    max-width: 477px;
    gap: 22px 32px;
  }

  .booking-flow .booking-transfer__choice {
    gap: 20px;
    font-size: 18px;
    line-height: 1.44;
    white-space: normal;
  }

  .booking-flow .booking-transfer__choice-box {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  .booking-flow .booking-transfer__choice-box::after {
    left: 4px;
    top: 1px;
    width: 10px;
    height: 15px;
  }

  .booking-flow .booking-transfer__fields,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
  }

  .booking-flow .booking-transfer-field {
    gap: 8px;
    font-size: 16px;
    line-height: 1.45;
  }

  .booking-flow .booking-transfer-field input,
  .booking-flow .booking-transfer-field select {
    height: 51px;
    padding: 0 14px;
  }

  .booking-flow .booking-transfer-field textarea {
    height: 126px;
    padding: 12px 14px;
  }

  .booking-flow .booking-transfer-field__split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .booking-flow .booking-transfer-field--comments {
    grid-column: 1 / -1;
  }

  .booking-flow .booking-transfer-field--flight {
    width: auto;
    grid-template-columns: 1fr auto;
    align-items: end;
    padding-right: 0;
  }

  .booking-flow .booking-transfer-field--flight span {
    grid-column: 1;
  }

  .booking-flow .booking-transfer-field--flight em {
    position: static;
    grid-column: 2;
    font-size: 12px;
    line-height: 1.18;
  }

  .booking-flow .booking-transfer-field--flight input {
    grid-column: 1 / -1;
  }

  .booking-flow .booking-transfer__guests {
    position: static;
    grid-column: 1;
    grid-row: auto;
    align-self: end;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 16px;
    line-height: normal;
  }

  .booking-flow .booking-transfer__guests::before {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    background-size: 17px 17px;
  }

  .booking-flow .booking-transfer__price,
  .booking-flow .booking-transfer__button {
    position: static;
    grid-column: 2;
    grid-row: auto;
    justify-self: end;
  }

  .booking-flow .booking-transfer__price {
    align-self: end;
  }

  .booking-flow .booking-transfer__button {
    align-self: start;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .booking-flow .booking-transfer__head {
    min-height: 75px;
    padding: 0 16px;
  }

  .booking-flow .booking-transfer h2 {
    font-size: 28px;
    line-height: 28px;
  }

  .booking-flow .booking-transfer__plus {
    width: 40px;
    height: 40px;
  }

  .booking-flow .booking-transfer__plus::before,
  .booking-flow .booking-transfer__plus::after {
    width: 20px;
  }

  .booking-flow .booking-transfer__body {
    padding: 16px 16px 24px;
    grid-template-columns: minmax(0, 1fr) 155px;
    column-gap: 16px;
    row-gap: 24px;
  }

  .booking-flow .booking-transfer__workflow {
    gap: 8px;
  }

  .booking-flow .booking-transfer__step,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step {
    min-height: 0;
    padding-left: 33px;
  }

  .booking-flow .booking-transfer__step--arrival,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step--arrival {
    min-height: 0;
  }

  .booking-flow .booking-transfer__step:not(:last-child)::after {
    left: 12px;
    top: 33px;
    height: calc(100% - 25px);
  }

  .booking-flow .booking-transfer__step--arrival::after,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step--arrival::after {
    left: 12px;
    top: 33px;
    height: calc(100% - 8px);
  }

  .booking-flow .booking-transfer__step-head,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step-head {
    min-height: 25px;
    margin: 0 0 16px -33px;
    gap: 8px;
    align-items: center;
  }

  .booking-flow .booking-transfer__step-head h3 {
    font-size: 22px;
    line-height: 22px;
  }

  .booking-flow .booking-transfer__step-number {
    width: 25px;
    height: 25px;
    font-size: 14px;
  }

  .booking-flow .booking-transfer__choices,
  .booking-flow .booking-transfer__choices--transport {
    max-width: none;
    gap: 12px 24px;
  }

  .booking-flow .booking-transfer__choice {
    gap: 8px;
    font-size: 14px;
    line-height: normal;
  }

  .booking-flow .booking-transfer__choice-box {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .booking-flow .booking-transfer__choice-box::after {
    left: 4px;
    top: 0;
    width: 8px;
    height: 13px;
  }

  .booking-flow .booking-transfer__fields,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .booking-flow .booking-transfer-field {
    gap: 6px;
    font-size: 14px;
    line-height: 14px;
  }

  .booking-flow .booking-transfer-field input,
  .booking-flow .booking-transfer-field select {
    height: 45px;
    padding: 0 12px;
  }

  .booking-flow .booking-transfer-field textarea {
    height: 90px;
    padding: 12px;
  }

  .booking-flow .booking-transfer-field__split {
    gap: 16px;
  }

  .booking-flow .booking-transfer-field--comments {
    grid-column: auto;
  }

  .booking-flow .booking-transfer-field--flight em {
    font-size: 12px;
    line-height: 12px;
  }

  .booking-flow .booking-transfer__guests {
    grid-column: 1 / -1;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--booking-line);
    gap: 8px;
    font-size: 14px;
    line-height: 14px;
  }

  .booking-flow .booking-transfer__guests::before {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    background-size: 16px 12px;
  }

  .booking-flow .booking-transfer__price {
    grid-column: 1;
    align-self: center;
    justify-self: start;
  }

  .booking-flow .booking-transfer__button {
    grid-column: 2;
    align-self: center;
  }
}

@media (max-width: 1179px) {
  .booking-flow:has(.booking-services) .booking-transfer__body {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 155px;
    grid-template-rows: none;
    align-content: start;
  }

  .booking-flow:has(.booking-services) .booking-transfer__workflow {
    max-width: 972px;
    min-height: 0;
    grid-template-rows: none;
  }

  .booking-flow:has(.booking-services) .booking-transfer__choices,
  .booking-flow:has(.booking-services) .booking-transfer__choices--transport {
    width: auto;
    max-width: 477px;
  }

  .booking-flow:has(.booking-services) .booking-transfer__step--arrival {
    width: auto;
    min-height: 443px;
  }

  .booking-flow:has(.booking-services) .booking-transfer-field--time {
    padding-right: 0;
  }

  .booking-flow:has(.booking-services) .booking-transfer__guests,
  .booking-flow:has(.booking-services) .booking-transfer__price,
  .booking-flow:has(.booking-services) .booking-transfer__button {
    grid-row: auto;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .booking-flow:has(.booking-services) .booking-transfer__body {
    grid-template-columns: minmax(0, 1fr) 155px;
  }

  .booking-flow:has(.booking-services) .booking-transfer__workflow {
    max-width: none;
  }

  .booking-flow:has(.booking-services) .booking-transfer__choices,
  .booking-flow:has(.booking-services) .booking-transfer__choices--transport {
    max-width: none;
  }

  .booking-flow:has(.booking-services) .booking-transfer__step--arrival {
    min-height: 0;
  }

  .booking-flow:has(.booking-services) .booking-transfer__price {
    grid-column: 1;
  }

  .booking-flow:has(.booking-services) .booking-transfer__button {
    grid-column: 2;
  }
}

@media (max-width: 1179px) {
  .booking-flow .booking-transfer,
  .booking-flow .booking-transfer.is-open {
    height: auto;
    min-height: 0;
  }

  .booking-flow .booking-transfer__body,
  .booking-flow:has(.booking-services) .booking-transfer__body {
    height: auto;
    min-height: 0;
    padding: 16px 16px 24px;
    display: block;
  }

  .booking-flow .booking-transfer__body[hidden],
  .booking-flow:has(.booking-services) .booking-transfer__body[hidden] {
    display: none;
  }

  .booking-flow .booking-transfer__step:not(:last-child)::after {
    top: 38px;
    height: calc(100% - -10px);
  }

  .booking-flow .booking-transfer__step--arrival::after,
  .booking-flow:has(.booking-services) .booking-transfer:not(.is-open) .booking-transfer__step--arrival::after {
    top: 38px;
    height: calc(100% - 8px);
  }

  .booking-flow .booking-transfer__summary {
    padding: 0 16px 24px;
  }

  .booking-flow .booking-transfer:not(.is-open) .booking-transfer__summary {
    display: none;
  }

  .booking-flow .booking-transfer__guests,
  .booking-flow:has(.booking-services) .booking-transfer__guests {
    padding: 0;
    border: 0;
  }

  .booking-flow .booking-transfer__footer {
    padding: 16px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 155px;
    column-gap: 24px;
    row-gap: 18px;
  }

  .booking-flow .booking-transfer__footer::before,
  .booking-flow:has(.booking-services) .booking-transfer__footer::before {
    content: none;
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--booking-line);
  }

  .booking-flow .booking-transfer.is-open .booking-transfer__footer::before,
  .booking-flow:has(.booking-services) .booking-transfer.is-open .booking-transfer__footer::before {
    content: "";
  }

  .booking-flow .booking-transfer__price,
  .booking-flow:has(.booking-services) .booking-transfer__price {
    grid-column: 1;
    grid-row: auto;
    align-self: center;
    justify-self: start;
  }

  .booking-flow .booking-transfer__button,
  .booking-flow:has(.booking-services) .booking-transfer__button {
    grid-column: 2;
    grid-row: auto;
    align-self: center;
    justify-self: end;
  }

  @media (min-width: 768px) {
    .booking-flow:has(.booking-services) .booking-transfer__fields {
      width: min(473px, 100%);
      grid-template-columns: 1fr;
      gap: 26px;
    }

    .booking-flow:has(.booking-services) .booking-transfer-field--comments {
      grid-column: auto;
    }

    .booking-flow:has(.booking-services) .booking-transfer__footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .booking-flow:has(.booking-services) .booking-transfer__footer::before {
      content: none;
    }

    .booking-flow:has(.booking-services) .booking-transfer__price {
      flex: 0 0 auto;
      align-self: center;
    }

    .booking-flow:has(.booking-services) .booking-transfer__button {
      flex: 0 0 155px;
      align-self: center;
    }
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .booking-flow .booking-transfer__body,
  .booking-flow:has(.booking-services) .booking-transfer__body {
    padding: 16px 16px 24px;
  }

  .booking-flow .booking-transfer__summary {
    padding: 0 16px 24px;
  }

  .booking-flow .booking-transfer:not(.is-open) .booking-transfer__summary {
    display: none;
  }

  .booking-flow .booking-transfer__footer {
    padding: 24px 16px;
    position: relative;
    grid-template-columns: minmax(0, 1fr) 155px;
    column-gap: 16px;
    border-top: 0;
  }

  .booking-flow .booking-transfer__footer::before,
  .booking-flow:has(.booking-services) .booking-transfer__footer::before {
    content: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 16px;
    height: 1px;
    background: var(--booking-line);
    width: 100%;
  }

  .booking-flow .booking-transfer.is-open .booking-transfer__footer::before,
  .booking-flow:has(.booking-services) .booking-transfer.is-open .booking-transfer__footer::before {
    content: "";
  }

  .booking-flow .booking-transfer__price,
  .booking-flow:has(.booking-services) .booking-transfer__price {
    grid-column: 1;
    grid-row: auto;
    align-self: center;
    justify-self: start;
  }

  .booking-flow .booking-transfer__button,
  .booking-flow:has(.booking-services) .booking-transfer__button {
    grid-column: 2;
    grid-row: auto;
    align-self: center;
  }
}

@media (max-width: 1179px) {
  .booking-transfer__step--route {
    min-height: 0;
  }

  .booking-transfer__step--route::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 33px;
    width: 1px;
    height: calc(100% - -10px);
    background: var(--booking-line);
  }
}

@media (max-width: 1440px) {
  .booking-no-rooms {
    width: min(1160px, calc(100vw - 48px));
  }
}

@media (min-width: 1367px) and (max-width: 1440px) {
  .booking-no-rooms {
    width: min(1138px, calc(100vw - 302px));
  }
}

@media (min-width: 1180px) and (max-width: 1366px) {
  .booking-flow .booking-flow__head > .booking-widget {
    width: min(1160px, calc(100vw - 48px));
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1024px) and (max-width: 1179px) {
  .booking-no-rooms {
    width: auto;
    max-width: none;
    margin: 24px 47px 0;
    min-height: 96px;
    padding: 24px 42px;
  }

  .booking-no-rooms__title {
    font-size: 12px;
    line-height: 14px;
  }

  .booking-no-rooms__text {
    font-size: 14px;
    line-height: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .booking-no-rooms {
    width: calc(100vw - 64px);
    max-width: none;
    min-height: 78px;
    padding: 15px 42px;
  }

  .booking-no-rooms__content {
    max-width: 555px;
  }

  .booking-no-rooms__title {
    font-size: 12px;
    line-height: 14px;
  }

  .booking-no-rooms__text {
    font-size: 14px;
    line-height: 18px;
  }
}

@media (max-width: 767px) {
  .booking-no-rooms {
    width: min(100vw - 28px, 760px);
    min-height: 126px;
    padding: 21px 27px 21px 34px;
  }

  .booking-no-rooms::before {
    left: 16px;
    height: 82px;
  }

  .booking-no-rooms__content {
    width: 100%;
  }

  .booking-no-rooms__title {
    font-size: 12px;
    line-height: 14px;
  }

  .booking-no-rooms__text {
    font-size: 14px;
    line-height: 18px;
    white-space: normal;
  }
}

@media (max-width: 374px) {
  .booking-no-rooms {
    width: min(100vw - 20px, 760px);
  }
}

@media (max-width: 1179px) {
  .booking-flow .booking-rules__head {
    min-height: 73px;
    padding: 0 15px;
  }

  .booking-flow .booking-rules h2 {
    font-size: 28px;
    line-height: 33px;
  }

  .booking-flow .booking-rules__body {
    padding: 48px 15px 25px;
  }

  .booking-flow .booking-rules__content {
    width: 100%;
  }

  .booking-flow .booking-rules__item + .booking-rules__item {
    margin-top: 43px;
  }

  .booking-flow .booking-rules__item p {
    font-size: 14px;
    line-height: 20px;
  }

  .booking-flow .booking-rules__divider {
    margin-top: 69px;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .booking-flow:has(.booking-services) .booking-rules {
    width: calc(100vw - 32px);
    justify-self: center;
  }

  .booking-flow .booking-rules__body {
    padding: 28px 23px 18px;
  }

  .booking-flow .booking-rules__item + .booking-rules__item {
    margin-top: 24px;
  }

  .booking-flow .booking-rules__item h3 {
    font-size: 12px;
    line-height: 15px;
  }

  .booking-flow .booking-rules__item p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
  }

  .booking-flow .booking-rules__divider {
    margin-top: 52px;
  }
}

@media (max-width: 1179px) {
  .booking-flow:has(.booking-services) .booking-gift-card {
    position: relative;
    width: 100%;
    min-height: 0;
    height: auto;
    border: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow: visible;
  }

  .booking-flow:has(.booking-services) .booking-gift-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 75px 0 0;
    border: 1px solid var(--booking-line);
    background: #fffced;
    pointer-events: none;
  }

  .booking-flow:has(.booking-services) .booking-gift-card__copy {
    display: contents;
  }

  .booking-flow:has(.booking-services) .booking-gift-card__copy h2 {
    position: relative;
    z-index: 1;
    order: 1;
    min-height: 75px;
    margin: 0;
    padding: 0 56px 0 16px;
    border: 1px solid var(--booking-line);
    border-bottom: 0;
    display: flex;
    align-items: center;
    background: #fffced;
    font-size: 28px;
    line-height: normal;
  }

  .booking-flow:has(.booking-services) .booking-gift-card__image {
    position: relative;
    z-index: 1;
    order: 2;
    width: calc(100% - 32px);
    min-height: 141px;
    height: 141px;
    margin: 16px 16px 0;
    flex: 0 0 141px;
  }

  .booking-flow:has(.booking-services) .booking-gift-card__copy p {
    position: relative;
    z-index: 1;
    order: 3;
    width: calc(100% - 32px);
    margin: 24px 16px 0;
    padding-bottom: 24px;
    font-size: 14px;
    line-height: normal;
  }

  .booking-flow:has(.booking-services) .booking-gift-card__copy p::after {
    content: "";
    width: 100%;
    height: 1px;
    margin-top: 24px;
    display: block;
    background: var(--booking-line);
  }

  .booking-flow:has(.booking-services) .booking-gift-card__flag {
    z-index: 2;
    top: -1px;
    right: 15px;
    width: 26px;
    height: 41px;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .booking-flow:has(.booking-services) .booking-gift-card {
    width: calc(100vw - 32px);
    justify-self: center;
  }
}

@media (max-width: 1179px) {
  .booking-flow:has(.booking-services) .booking-services > .booking-room-card,
  .booking-flow:has(.booking-services) .booking-services__form > .booking-gift-card,
  .booking-flow:has(.booking-services) .booking-services__form > .booking-extra,
  .booking-flow:has(.booking-services) .booking-services__form > .booking-transfer,
  .booking-flow:has(.booking-services) .booking-services__form > .booking-rules,
  .booking-flow:has(.booking-services) .booking-services__form > .booking-total-card {
    width: min(660px, 100%);
    max-width: 660px;
    justify-self: center;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .booking-flow:has(.booking-room-list) .booking-room-list,
  .booking-flow:has(.booking-services) .booking-services,
  .booking-flow:has(.booking-services) .booking-services__form {
    gap: 31px;
  }
}

/* ============================================================
   Search-widget desktop (>=1025, Figma 1515:33147): the search-widget bar spans
   EXACTLY the content band at every width 1025 -> 4K — ДАТА at the block's left
   edge, НАЙТИ НОМЕР at its right edge — and it is IDENTICAL on every step that
   shows it. Scoped to :has(.booking-widget) so it applies on step 1 (Выбрать
   номер) AND step 2 (Дополнительные услуги); previously only step 1 was fixed and
   step 2 kept the old 1530px / 125px bar. These rules (a) unify head + widget to
   one 1239 band (so it never grows wider than the cards and matches across steps),
   (b) make the bar 86px tall with the cells filling it (Figma), and (c) re-assert
   the 4-column bar with the visible search button in the 1025-1179 slice, where
   the 768-1179 tablet block otherwise collapses it to a centred 500px / 3-field
   box. Below 1025 the compact tablet bar (768-1024) is unchanged.
   ============================================================ */
@media (min-width: 1180px) {
  .booking-flow:has(.booking-widget) .booking-flow__head,
  .booking-flow:has(.booking-widget) .booking-flow__head > .booking-widget,
  .booking-flow:has(.booking-room-list) .booking-room-list {
    width: min(1239px, calc(100vw - 48px));
    max-width: none;
    margin-inline: auto;
  }

  /* 4 equal cells flush to the band edges (no side padding) so the first field's
     left edge and the search button's right edge land on the block edges */
  .booking-flow:has(.booking-widget) .booking-flow__head > .booking-widget {
    /* the bar is 86px tall (Figma) — the cells fill it, no extra padding */
    min-height: 86px;
    height: 86px;
    padding-block: 0;
    padding-inline: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    justify-content: stretch;
    align-items: stretch;
    border: 0;
  }

  .booking-flow:has(.booking-widget) .booking-widget__field,
  .booking-flow:has(.booking-widget) .booking-widget__search {
    min-height: 86px;
    border: 1px solid var(--booking-line);
  }

  .booking-flow:has(.booking-widget) .booking-widget__field + .booking-widget__field,
  .booking-flow:has(.booking-widget) .booking-widget__search {
    border-left: 0;
  }

  .booking-flow:has(.booking-widget) .booking-widget__search {
    display: block;
    width: auto;
  }

  /* restore the desktop cell (label above value + chevron); the 1025-1179 tablet
     block flattens each cell to a value-only flex row */
  .booking-flow:has(.booking-widget) .booking-widget__toggle,
  .booking-flow:has(.booking-widget) .booking-widget__field--guest .booking-widget__toggle,
  .booking-flow:has(.booking-widget) .booking-widget__field--currency .booking-widget__toggle,
  .booking-flow:has(.booking-widget) .booking-widget__field--special .booking-widget__toggle {
    height: 100%;
    padding: 15px 48px 15px 24px;
    display: grid;
    align-content: center;
    justify-items: start;
    text-align: left;
  }

  .booking-flow:has(.booking-widget) .booking-widget__label,
  .booking-flow:has(.booking-widget) .booking-widget__field::after {
    display: block;
  }

  .booking-flow:has(.booking-widget) .booking-widget__field--special .booking-widget__label {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1.43;
    text-transform: uppercase;
  }

  .booking-flow:has(.booking-widget) .booking-widget__value {
    font-size: 18px;
  }

  .booking-flow:has(.booking-widget) .booking-flow__head > .booking-widget:not(:has(.booking-widget__search)) {
    width: var(--booking-progress-width, min(914px, 100%));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .booking-flow .booking-room-card--selected .booking-room-card__change {
    order: 5;
    width: 100%;
    margin: 24px 0 0;
  }
}

/* Booking-page multi-room guest dropdown, Figma 1685:3865. */
.booking-flow .booking-dropdown--guest .booking-room-guests__remove {
  text-decoration: none;
}

@media (min-width: 1180px) {
  .booking-flow .booking-widget__field--guest .booking-dropdown--guest:has(.booking-room-guests):not([hidden]) {
    left: 0;
    width: min(620px, calc(200% + 2px));
    max-width: calc(100vw - 48px);
    min-height: 0;
    height: auto;
    max-height: none;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 183px;
    overflow: visible;
    background: #fffced;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests {
    display: contents;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__list {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 27px 29px 43px 23px;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__room + .booking-room-guests__room {
    margin-top: 46px;
    padding-top: 46px;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__room:only-child .booking-room-guests__head {
    display: none;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__head {
    padding: 0 0 24px;
    font-size: 14px;
    letter-spacing: 2.1px;
  }

  .booking-flow .booking-dropdown--guest [data-booking-room-edit-mode="true"] .booking-room-guests__head[hidden],
  .booking-flow .booking-dropdown--guest [data-booking-room-edit-mode="true"] .booking-room-guests__remove[hidden] {
    display: none;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 18px;
    text-decoration: none;
    text-transform: none;
  }

  .booking-flow .booking-dropdown--guest .booking-guest-dropdown__row + .booking-guest-dropdown__row {
    margin-top: 24px;
  }

  .booking-flow .booking-dropdown--guest .booking-guest-dropdown__counter {
    grid-template-columns: 48px minmax(11px, auto) 48px;
  }

  .booking-flow .booking-dropdown--guest .booking-guest-dropdown__step {
    width: 48px;
    height: 48px;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__add {
    grid-column: 1 / -1;
    grid-row: 2;
    width: max-content;
    min-height: 44px;
    margin: -31px 23px 31px;
    padding: 0;
    border: 0;
    justify-content: flex-start;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-underline-offset: 6px;
    text-transform: none;
  }

  .booking-flow
    .booking-dropdown--guest
    .booking-room-guests:has(.booking-room-guests__room:nth-child(2):last-child)
    .booking-room-guests__add {
    box-sizing: content-box;
    padding-bottom: 24px;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__add span {
    display: none;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__add[hidden] {
    display: none;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__limit {
    grid-column: 1;
    grid-row: 3;
    min-height: 89px;
    margin: 0 0 0 9px;
    padding: 32px 11px 20px;
    border-top: 1px solid var(--booking-line);
    display: block;
    background: #fffced;
    font-size: 12px;
    font-style: italic;
    line-height: 16px;
    text-align: left;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__limit a {
    display: inline;
    font: inherit;
    letter-spacing: 0;
    text-decoration: underline;
  }

  .booking-flow .booking-dropdown--guest .booking-guest-dropdown__actions {
    grid-column: 2;
    grid-row: 3;
    min-height: 89px;
    margin: 0 9px 0 0;
    padding: 20px;
    border-top: 1px solid var(--booking-line);
    align-items: center;
    justify-content: flex-end;
    background: #fffced;
  }

  .booking-flow .booking-dropdown--guest .booking-guest-dropdown__actions .button-primary {
    width: 143px;
    min-height: 49px;
    height: 49px;
  }
}

/* 768-1179: the guest dropdown opens as the same fullscreen modal as the
   date panel (client request) — the anchored tablet popover was removed. */

/* ===== Tablet band refinements (client corrections, July 2026) ===== */
@media (min-width: 768px) and (max-width: 1179px) {
  /* Room switcher: the title stays on one line and the arrows align with the
     edges of the compact search widget below (the switcher shares the same
     500px head column; only the inline padding pulled the arrows inward). */
  .booking-flow .booking-room-switcher {
    padding: 20px 0;
  }

  .booking-room-switcher__copy strong {
    white-space: nowrap;
  }

  /* Step-1 room cards: iPad cap at 660px, centered in the column. */
  .booking-flow .booking-room-list .booking-room-card {
    width: min(660px, 100%);
    margin-inline: auto;
  }

  /* Card heads: «НОМЕР N» and «Убрать ×» sit flush with the card edges and
     the remove link matches the heading size (Figma 08/09/14). */
  .booking-room-card__selection-head {
    padding: 0;
  }

  .booking-room-card__selection-head a {
    font-family: var(--font-body);
    font-size: 16px;
  }

  /* Step-2 selected card: «ИЗМЕНИТЬ НОМЕР» moves below the price block as a
     full-width outline button (mobile order per Figma 1685-8834). */
  .booking-flow .booking-room-card--selected .booking-room-card__change {
    order: 5;
    width: 100%;
    margin: 24px 0 0;
  }
}

/* Booking-page guest modal content (375-1179) mirrors the home/header modal
   (Figma 1685:10435): left underlined add-room link, italic phone hint. */
@media (min-width: 375px) and (max-width: 1179px) {
  /* Three rooms exceed the viewport: the guest modal scrolls its list while
     the close cross and the bottom action bar stay fixed. `overscroll-behavior`
     keeps the scroll from chaining to the page once the list hits an edge. */
  .booking-flow .booking-widget .booking-dropdown--guest:not(.booking-dropdown--transfer-calendar):not([hidden]) {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    /* The base `max-height: min(836px, calc(100vh - 160px))` belongs to the
       anchored desktop popover; on this band the guest dropdown is the same
       fullscreen modal as the date panel, so the clamp has to go or the panel
       stops short of the pinned action bar and the page shows through the seam
       (the <=767 band already lifts it — 768-1179 was missed). */
    max-height: none;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__remove {
    display: inline-flex;
    gap: 4px;
    text-decoration: none;
  }

  /* Pinned modal title (client request; same treatment as the header modal in
     header.css): the heading stays put while the rooms scroll underneath it and
     its opaque background hides the passing content. The per-band paddings below
     reproduce «scroll-container top padding + 36px gap», so the resting layout is
     byte-for-byte what the in-flow title produced. */
  .booking-flow .booking-dropdown--guest .booking-dropdown__mobile-title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 801;
    margin: 0;
    background: #fffced;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__head {
    padding: 0 0 16px;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__room {
    padding-bottom: 28px;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__room + .booking-room-guests__room {
    padding-top: 28px;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__add {
    width: auto;
    min-height: 0;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    display: inline-flex;
    justify-content: flex-start;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-underline-offset: 5px;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__add span {
    display: none;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__add[hidden] {
    display: none;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__limit {
    margin: 0;
    padding: 14px 0 0;
    border: 0;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
    text-align: left;
  }

  .booking-flow .booking-dropdown--guest .booking-room-guests__limit a {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-decoration: underline;
    white-space: nowrap;
  }
}

/* ============================================================
   Guest modal scroll frame — the pinned title and the pinned action bar are
   both OUT of the scroll flow, so the scroll container has to reserve their
   height as padding or the tail of the content (the «позвоните …» phone hint)
   can never be scrolled clear of them. Each band is one chain — change the
   numbers together:

   MOBILE (375-767)
     title    69px top pad + 28px line + 36px gap        = 133px  -> padding-top
     actions  24 + 45 + 8 + 45 + 24 + 1px border         = 147px
     padding-bottom = 147 + 24px breathing room          = 171px

   TABLET (768-1179)
     title    72px top pad + 28px line + 36px gap        = 136px  -> padding-top
     actions  92px fixed height + 1px border             =  93px
     padding-bottom = 93 + 23px breathing room           = 116px

   Specificity note: these must match the base
   `.booking-flow .booking-widget .booking-dropdown:not(...):not([hidden])`
   padding rule (0,5,0), hence the same :not() chain.
   ============================================================ */
@media (min-width: 375px) and (max-width: 767px) {
  .booking-flow .booking-widget .booking-dropdown--guest:not(.booking-dropdown--transfer-calendar):not([hidden]) {
    padding-top: 133px;
    padding-bottom: 171px;
  }

  .booking-flow .booking-dropdown--guest .booking-dropdown__mobile-title {
    padding: 69px 16px 36px;
  }
}

@media (min-width: 768px) and (max-width: 1179px) {
  .booking-flow .booking-widget .booking-dropdown--guest:not(.booking-dropdown--transfer-calendar):not([hidden]) {
    padding-top: 136px;
    padding-bottom: 116px;
  }

  .booking-flow .booking-dropdown--guest .booking-dropdown__mobile-title {
    padding: 72px 32px 36px;
  }
}

/* ============================================================
   Step-2 selected card frame — SINGLE SOURCE OF TRUTH for every desktop width
   (Figma 1685:6780). This block owns the whole vertical stack; the per-band
   blocks above (1180-1366, 1367-1440) must not re-declare any of it, or the
   absolutely-positioned frame and the grid rows drift apart.

   The «НОМЕР N» / «Убрать ×» head sits ABOVE the frame, flush with the photo
   edges, with 21px of air under it. The card element itself draws no border
   (the base `.room-card` 1px border would box the head in — that is what the
   1180-1366 and >=1441 bands used to do); the frame is a ::before rectangle.

   The three numbers below are one chain — change them together:
     head row      21px   (grid-template-rows row 1 == ::before top offset base)
     row-gap       21px   (the air the client asked for)
     ::before top  42px   == 21 head + 21 gap
   Card height therefore resolves to 21 + 21 + 374 = 416px.
   ============================================================ */
@media (min-width: 1180px) {
  .booking-services > .booking-room-card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    border: 0;
    display: grid;
    grid-template-columns: 442px minmax(0, 1fr);
    grid-template-rows: 21px 374px;
    row-gap: 21px;
    background: transparent;
    overflow: visible;
  }

  .booking-services > .booking-room-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 42px;
    z-index: 0;
    width: 100%;
    height: 374px;
    border: 1px solid var(--booking-line);
    pointer-events: none;
  }

  /* The head is pinned to exactly 21px so the 21px row-gap below it is the real
     gap. line-height matches the row so the 17px «Убрать ×» link (whose natural
     line box is ~25px) cannot overflow the row and eat into the gap; both
     children stay optically centred on the same axis as before. */
  .booking-services > .booking-room-card .booking-room-card__selection-head {
    height: 21px;
    min-height: 21px;
    padding: 0;
    border-bottom: 0;
    align-self: start;
    line-height: 21px;
  }

  /* A single room renders the head EMPTY. It has to stay a grid item — the card
     places its media and body by row, and dropping it from the DOM collapses them
     into the wrong cells — but it must occupy nothing. Zeroing its height is not
     enough on its own: the row is pinned in grid-template-rows and the 21px row-gap
     below it survives, which together left a 42px dent above the photo. ::before is
     the card's border and is offset by exactly that head + gap, so it re-seats to 0
     as well. */
  .booking-services > .booking-room-card:has(> .booking-room-card__selection-head--empty) {
    grid-template-rows: 0 374px;
    row-gap: 0;
  }

  .booking-services > .booking-room-card:has(> .booking-room-card__selection-head--empty)::before {
    top: 0;
  }

  .booking-services > .booking-room-card .booking-room-card__selection-head--empty {
    height: 0;
    min-height: 0;
    line-height: 0;
  }

  .booking-services > .booking-room-card .room-card__media,
  .booking-services > .booking-room-card .room-card__body {
    height: 374px;
    min-height: 374px;
    align-self: end;
    z-index: 1;
  }

  .booking-services > .booking-room-card .room-card__media {
    width: 442px;
  }
}