@charset "UTF-8";
/*$screen-lxl-min: 1678px;*/
/*
 * Booking bar — two presentations:
 *  - .bb-hero:   desktop bar embedded in the header banner (homepage + hotel pages)
 *  - .bb-mobile: fixed bottom bar on small screens (hotel picker + search only)
 */
/* Reserve space so the fixed mobile bar never masks the footer. */

/* Antialiased text across both presentations. Scoped to the component roots
   (NOT #booking-bar — booking-bar.js relocates .bb-hero into the banner). */

/* =====================================================================
   Shared hotel option (desktop dropdown + mobile sheet)
   ===================================================================== */

/* =====================================================================
   Desktop bar (embedded in the header banner)
   ===================================================================== */

/* Popovers can spill over content below the banner (e.g. the sticky sub-navigation). */

/* The text layout column is shrink-to-fit by default; stretch it when the bar
   is flowed inside so the bar can span and centre like the old absolute one.
   Also CENTRE the header text (like layout-3 / Belvedere) regardless of the
   page's layout-N — beats layout-1/2's align-items: flex-start (0,3,0 > 0,1,0). */

/* With the bar in the banner, the 32px title padding IS the heading→bar gap —
   it must beat layout-specific overrides (e.g. layout-3's 10px main-title).
   Also pin the main-title to the "Les Roches" (h2 heading-size-4) sizes so every
   booking-bar hotel matches — including on mobile — whatever its heading class. */

/* Sub-title → the "Les Roches" size-35 sizes (16 mobile / 20 desktop). Belvedere's
   subtitle is otherwise pinned to 32px by a 0,6,1 !important rule, so we match its
   full selector (prefixed, 0,7,1) to win. Les Roches' subtitle lacks heading-size-6,
   so it already renders at these sizes and is unaffected. */

/* 32px gap below the banner CTA button(s) — only when a button-container is
   actually rendered (Buttons.cshtml omits it entirely when there are no CTAs). */
.button-container + .bb-hero--flow {
  margin-top: 32px;
}

/* White frame around the whole bar; the fields' padding creates the gap
   (banner shows through) around the dark area. Search square flush right. */

/* Inside the frame at the far right, flush against the top/right/bottom borders;
   the fields' right padding forms the gap on its left. */

/* ---- popovers ---- */
.bb-pop.is-open {
  display: block;
}

/* =====================  calendar  ===================== */
.bb-cal__day--start, .bb-cal__day--end {
  background: #111;
  color: #fff;
}
.bb-cal__day--in-range {
  background: #e9e9e9;
}

/* =====================  guests  ===================== */

/* Group separator — a 1px line vertically centred in a 48px block. Inserted by
   booking-bar.js between stepper groups. */
.bb-ages:not(:empty) {
  padding: 18px 0 0;
}

.bb-age {
  position: relative;
  /* Label sits INSIDE the box, stacked above the value, both centred in 46px. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 46px;
  border: 1px solid #b9bfc6;
  border-radius: 4px;
  /* Right padding clears the 32px spinner column. */
  padding: 0 46px 0 14px;
}
.bb-age__label {
  display: block;
  font-family: "Baton Turbo Medium", sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: #5f6b76;
  margin-bottom: 2px;
}
.bb-age__input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  font-family: "Baton Turbo Medium", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #14202b;
  /* Native spinners are hover-only and unstylable — replaced by .bb-age__spins. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.bb-age__input::-webkit-outer-spin-button, .bb-age__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bb-age {
  /* Always-visible custom spinner column, split into up/down cells. */
}
.bb-age__spins {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #b9bfc6;
}
.bb-age__spin {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: rgb(178, 189, 201);
}
.bb-age__spin + .bb-age__spin {
  border-top: 1px solid #b9bfc6;
}
.bb-age__spin:hover {
  color: rgb(42, 50, 60);
}

/* =====================================================================
   Mobile bar (fixed bottom)
   ===================================================================== */
.bb-mobile--hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

.bb-mobile__sheet {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: #fff;
  padding: 12px;
  border-top: 1px solid #e5e5e5;
  /* dvh tracks the VISIBLE viewport on iOS Safari (100vh includes the area
     behind the collapsed toolbar, which pushed the sheet top off-screen). */
  max-height: calc(100vh - 200px);
  max-height: min(100dvh - 150px, 95dvh);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c9c9c9 #f1f1f1;
}
.bb-mobile__sheet::-webkit-scrollbar {
  width: 5px;
}
.bb-mobile__sheet::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.bb-mobile__sheet::-webkit-scrollbar-thumb {
  background: #c9c9c9;
}
.bb-mobile--open .bb-mobile__sheet {
  display: block;
}