/* -----------------------------------------------------------------------------
   besa-booking — front-end stylesheet.
   Scoped under .besa-booking to avoid clashing with host theme styles.
   Uses CSS variables from the active theme (var(--site-*) with sane fallbacks).
   ----------------------------------------------------------------------------- */

/* `.besa-datepicker` is listed alongside `.besa-booking` because the picker attaches to whatever
   element carries data-besa-datepicker — and in a theme's own booking bar that is NOT inside a
   `.besa-booking` root. Scoped to `.besa-booking` alone, every one of these tokens resolved to
   nothing there, so `background: var(--bb-surface)` on the popover produced NO background at all:
   a transparent calendar with the page's headings and photographs legible straight through it.
   Found the moment the first theme adopted the picker (caelum, 2026-09-08). */
.besa-booking,
.besa-datepicker {
  --bb-text:           var(--site-text, #2A2620);
  --bb-text-muted:     var(--site-text-muted, #6B645B);
  --bb-surface:        var(--site-surface, #FAF7F2);
  --bb-surface-2:      var(--site-surface-2, #F2EDE4);
  --bb-primary:        var(--site-primary, #2A2620);
  --bb-primary-text:   var(--site-primary-contrast, #FAF7F2);
  --bb-accent:         var(--site-accent, #C8A055);
  --bb-radius:         var(--site-radius-md, 8px);
  --bb-radius-lg:      var(--site-radius-lg, 16px);
  --bb-shadow:         0 4px 12px -2px rgba(42, 38, 32, 0.08);

  /* Edges are DERIVED from the theme's own ink and ground (v1.11, 2026-10-03). The old fixed
     `rgba(42, 38, 32, 0.12)` measured 1.26:1 on the light default and 1.01:1 on a dark theme
     (maison-aura-v2's #232019) — inputs and cards simply vanished there. Two roles:
       --bb-border          hairlines, card edges, dividers — decorative, deliberately quiet (~1.35:1).
       --bb-border-control  the edge that IDENTIFIES a control (inputs, the date trigger, the
                            selectable board / payment cards, steppers): WCAG 1.4.11 asks 3:1.
     52% clears 3:1 on every fleet ground (kaonia lowest at 3.26:1) — re-run
     wp-content/_notes/fleet-tools/bb-contrast.py after changing either percentage. A theme can
     pin either with --site-border / --site-border-control. */
  --bb-border:         var(--site-border, color-mix(in oklab, var(--bb-text) 14%, var(--bb-surface)));
  --bb-border-control: var(--site-border-control, color-mix(in oklab, var(--bb-text) 52%, var(--bb-surface)));

  /* Focus, feedback and shape hooks. Every default is the value this file hard-coded before, so a
     theme that sets none of the --site-* names renders exactly as it did. */
  --bb-focus:          var(--site-focus, var(--bb-primary));
  --bb-error:          var(--site-error, #b91c1c);
  --bb-urgency:        var(--site-urgency, #A34B2E);
  --bb-radius-control: var(--site-radius-control, var(--bb-radius));
  --bb-radius-button:  var(--site-radius-button, var(--bb-radius));
  --bb-weight-strong:  var(--site-weight-strong, 700);

  color: var(--bb-text);
}

/* color-mix() is Baseline since 2023; a browser without it would drop every `border` that reads
   these two tokens (an invalid var() resets the whole shorthand). Give it the old literals. */
@supports not (color: color-mix(in oklab, red, blue)) {
  .besa-booking,
  .besa-datepicker {
    --bb-border:         rgba(42, 38, 32, 0.12);
    --bb-border-control: rgba(42, 38, 32, 0.5);
  }
}

/* Every width in this file is a BORDER-box width and always has been — `.besa-field__input` is
   `width: 100%` plus 0.75rem of padding plus a 1px border, which only fits its column under
   border-box. The declaration was simply never made, so the plugin was inheriting it from
   whichever theme happened to set it globally. On a theme that does not, every input overflows
   its container, and the first place that shows is a 320px phone. Scoped to the plugin's own
   subtrees, so a host theme's box model is untouched.

   `.besa-datepicker` is listed separately because the picker attaches to whatever wrapper
   carries data-besa-datepicker — in a theme's own booking bar that may sit outside .besa-booking,
   and the sheet is built by JS as its child. */
.besa-booking,
.besa-booking *,
.besa-booking *::before,
.besa-booking *::after,
.besa-datepicker,
.besa-datepicker *,
.besa-datepicker *::before,
.besa-datepicker *::after {
  box-sizing: border-box;
}

/* ============================================================================
   Search form
   ============================================================================ */

.besa-search-form {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--bb-shadow);
}

.besa-search-form--compact {
  padding: 0.75rem 1rem;
  box-shadow: none;
}

/* 1.5rem each side takes 48px off a 320px phone before a single field is drawn. The fields are
   already single-column here (the inline grid starts at 720px), so this is purely reclaimed
   width for the inputs and the submit. */
@media (max-width: 479px) {
  .besa-search-form {
    padding: 1rem;
  }
}

.besa-search-form__heading {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.besa-search-form__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: end;
}

@media (min-width: 720px) {
  /* Default inline layout: dates | adults | children | submit.
     Check-in and check-out are ONE grid item — `.besa-search-form__dates` wraps both, and the
     picker shows them as one trigger — so they share one track sized as the two used to be
     (1.4fr + 1.4fr). The old template still listed them as two tracks: every field slid one track
     left (Adults took the second date's width, the dates trigger wrapped onto two lines inside a
     1040px theme column) and an empty `auto` track + gap was left at the right edge. */
  .besa-search-form--inline .besa-search-form__fields {
    grid-template-columns: 2.8fr 0.8fr 0.8fr auto;
  }
  /* When the room-type selector is present, add a column for it before submit */
  .besa-search-form--inline.besa-search-form--has-roomtype .besa-search-form__fields {
    grid-template-columns: 2.6fr 0.7fr 0.7fr 1.2fr auto;
  }
  /* The trigger fills its track like every other input (it is content-sized by default, which
     left a blank gap before Adults in the wider track). */
  .besa-search-form--inline .besa-datepicker__trigger {
    width: 100%;
  }
  /* Occupancy columns are the narrowest fr tracks; a 0.7–0.8fr share against 1.4fr dates +
     an auto submit can collapse the number input so tight the value + native spinners clip
     (a 2-digit "13" looked empty on desktop). Floor each occupancy field at a readable width
     so the digits always show, without disturbing the fr ratios. Mobile (single column) is
     already full-width and unaffected. */
  .besa-search-form--inline .besa-field--occupancy {
    min-width: 4.5rem;
  }
}

/* Select inherits .besa-field__input; add the native dropdown affordance + caret room */
.besa-field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}

.besa-field {
  display: flex;
  flex-direction: column;
}

.besa-field__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bb-text-muted);
  margin-bottom: 0.25rem;
}

.besa-field__input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bb-border-control);
  border-radius: var(--bb-radius-control);
  background: var(--bb-surface);
  color: var(--bb-text);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.besa-field__input:focus,
.besa-field__input:focus-visible {
  outline: none;
  border-color: var(--bb-focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--bb-accent) 20%, transparent);
}

.besa-search-form__submit {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--bb-primary);
  color: var(--bb-primary-text);
  border-radius: var(--bb-radius-button);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms ease, transform 200ms ease;
}

.besa-search-form__submit:hover {
  background: var(--bb-accent);
}

.besa-search-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.besa-search-form__promo {
  /* Promo codes not offered for now — hidden site-wide. Remove this `display: none`
     to re-enable (the <details> in search-form.php is still rendered, just hidden). */
  display: none;
  margin-top: 1rem;
  font-size: 0.875rem;
}

.besa-search-form__promo summary {
  cursor: pointer;
  color: var(--bb-text-muted);
  padding: 0.25rem 0;
  user-select: none;
}

.besa-search-form__promo summary:hover {
  color: var(--bb-primary);
}

.besa-search-form__promo .besa-field {
  margin-top: 0.5rem;
}

.besa-search-form__feedback {
  margin-top: 1rem;
  min-height: 1.5em;
  font-size: 0.9375rem;
  color: var(--bb-text-muted);
}

.besa-search-form__feedback--error {
  color: var(--bb-error);
}

.besa-search-form__results {
  margin-top: 1.5rem;
}

/* Both are slots the JS fills — a validation message, or the inline results when the form has no
   results page. Empty, their margins + min-height drew ~62px of blank card under the fields on
   every theme. Collapse them while empty, but keep them RENDERED (no display:none): the feedback
   is an aria-live region and has to stay in the accessibility tree to be announced. */
.besa-search-form__feedback:empty,
.besa-search-form__results:empty {
  margin-top: 0;
  min-height: 0;
}

/* ============================================================================
   Room grid (shortcode variant; theme has its own section variant)
   ============================================================================ */

.besa-room-grid {
  margin: 2rem 0;
}

.besa-room-grid__header {
  text-align: center;
  margin-bottom: 2rem;
}

.besa-room-grid__heading {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
}

.besa-room-grid__intro {
  margin: 0 auto;
  max-width: 580px;
  color: var(--bb-text-muted);
}

.besa-room-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.besa-room-grid[data-columns="1"] .besa-room-grid__list { grid-template-columns: 1fr; }
.besa-room-grid[data-columns="2"] .besa-room-grid__list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.besa-room-grid[data-columns="3"] .besa-room-grid__list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.besa-room-grid[data-columns="4"] .besa-room-grid__list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.besa-room-card {
  background: var(--bb-surface);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  box-shadow: var(--bb-shadow);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.besa-room-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(42, 38, 32, 0.12);
}

.besa-room-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.besa-room-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bb-surface-2);
}

.besa-room-card__image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.besa-room-card:hover .besa-room-card__image-img {
  transform: scale(1.04);
}

.besa-room-card__body {
  padding: 1.25rem;
}

.besa-room-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}

.besa-room-card__excerpt {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--bb-text-muted);
  line-height: 1.5;
}

.besa-room-card__price {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bb-primary);
}

/* ============================================================================
   Room detail
   ============================================================================ */

.besa-room-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.besa-room-detail__header {
  margin-bottom: 1.5rem;
}

.besa-room-detail__title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
}

.besa-room-detail__hero {
  margin-bottom: 2rem;
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bb-surface-2);
}

.besa-room-detail__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.besa-room-detail__body {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .besa-room-detail__body {
    grid-template-columns: 1fr 320px;
    align-items: start;
  }
}

.besa-room-detail__description {
  font-size: 1rem;
  line-height: 1.7;
}

.besa-room-detail__sidebar {
  position: sticky;
  top: 2rem;
}

.besa-room-detail__price-card {
  background: var(--bb-surface-2);
  border-radius: var(--bb-radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--bb-border);
}

.besa-room-detail__price {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: var(--bb-weight-strong);
  color: var(--bb-primary);
}

.besa-room-detail__book-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.875rem 1.5rem;
  background: var(--bb-primary);
  color: var(--bb-primary-text);
  border-radius: var(--bb-radius-button);
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease;
}

.besa-room-detail__book-cta:hover {
  background: var(--bb-accent);
}

/* ============================================================================
   Reserve panel (room-detail sidebar) — dates + occupancy + extras + live total
   ============================================================================ */

.besa-reserve {
  background: var(--bb-surface-2);
  border-radius: var(--bb-radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--bb-border);
}

.besa-reserve__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bb-border);
}

.besa-reserve__title {
  font-size: 1.375rem;
  font-weight: var(--bb-weight-strong);
  color: var(--bb-primary);
}

.besa-reserve__from {
  font-size: 0.875rem;
  color: var(--bb-text-muted);
}

.besa-reserve__from strong {
  color: var(--bb-text);
}

.besa-reserve__notice {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--bb-text-muted);
}

.besa-reserve__fields {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.besa-reserve__occupancy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.besa-reserve__boards {
  margin: 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bb-border);
}

.besa-reserve__boards-title {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bb-primary);
}

.besa-reserve__boards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.besa-reserve__board {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bb-border-control);
  border-radius: var(--bb-radius);
  transition: border-color 150ms ease, background 150ms ease;
}

.besa-reserve__board:has(.besa-reserve__board-radio:checked) {
  border-color: var(--bb-accent);
  background: color-mix(in srgb, var(--bb-accent) 8%, transparent);
}

.besa-reserve__board-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9375rem;
  flex: 1;
}

.besa-reserve__board-radio {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--bb-accent);
  flex: 0 0 auto;
}

.besa-reserve__board-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bb-text);
  white-space: nowrap;
}

.besa-reserve__board-unit {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--bb-text-muted);
}

.besa-reserve__extras {
  margin: 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bb-border);
}

.besa-reserve__extras-title {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bb-primary);
}

.besa-reserve__extras-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.besa-reserve__extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.besa-reserve__extra-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9375rem;
}

.besa-reserve__extra-check {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--bb-accent);
  flex: 0 0 auto;
}

.besa-reserve__extra-price {
  font-size: 0.875rem;
  color: var(--bb-text-muted);
  white-space: nowrap;
}

.besa-reserve__extra-unit {
  font-size: 0.75rem;
}

.besa-reserve__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bb-border);
}

.besa-reserve__total-label {
  font-size: 1.25rem;
  font-weight: var(--bb-weight-strong);
  color: var(--bb-primary);
}

.besa-reserve__total-value {
  font-size: 1.375rem;
  font-weight: var(--bb-weight-strong);
  color: var(--bb-text);
}

.besa-reserve__hint {
  margin: 0 0 0.75rem;
  min-height: 1.2em;
  font-size: 0.8125rem;
  color: var(--bb-text-muted);
}

.besa-reserve__hint--error {
  color: var(--bb-error);
}

.besa-reserve__cta--disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* ============================================================================
   Amenity icon chips (AmenityIcons::chips) — result cards + room detail
   ============================================================================ */

.besa-room-result-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.75rem 0;
}

.besa-amenity {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--bb-text-muted);
}

.besa-amenity__icon {
  display: inline-flex;
  color: var(--bb-accent);
}

.besa-amenity__svg {
  display: block;
}

.besa-amenity__label {
  white-space: nowrap;
}

/* ============================================================================
   Search results — grid / zigzag / list layouts (data-layout on the section)
   Same card markup for all three; the [data-layout] attribute re-arranges it.
   ============================================================================ */

/* Breakout: the results usually render inside a narrow theme content column. On wide
   viewports, escape it (same full-bleed transform as .besa-checkout) so all layouts get
   real width, capped + centered on the viewport, no horizontal scroll. */
.besa-search-results {
  max-width: 1240px;
  width: 100%;
  margin-top: 2rem;   /* off the search form above it, now that the form's empty slots collapse */
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .besa-search-results {
    width: min(1240px, calc(100vw - 3rem));
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
  }
}

/* Header: count + summary + (JS) layout toggle on one row */
.besa-search-results__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}
.besa-search-results__header-text { min-width: 0; }
.besa-search-results__heading {
  margin: 0;
  font-size: 1.5rem;
}
.besa-search-results__summary {
  margin: 0.25rem 0 0;
  color: var(--bb-text-muted);
  font-size: 0.9375rem;
}

.besa-search-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.besa-search-results__item { min-width: 0; }

/* ---- The room card (shared base — was missing, hence the "messy" stacked look) ---- */
.besa-room-result-card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.besa-room-result-card:hover {
  border-color: var(--bb-accent);
  box-shadow: var(--bb-shadow);
}
.besa-room-result-card__image {
  position: relative;
  overflow: hidden;
  background: var(--bb-surface-2);
}
.besa-room-result-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.besa-room-result-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem 1.25rem;
  flex: 1 1 auto;
  min-width: 0;
}
.besa-room-result-card__name {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.25;
}
.besa-room-result-card__description {
  margin: 0;
  color: var(--bb-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  /* clamp long descriptions so cards stay even in grid/list */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Meta as inline pills (was a bare stacked <ul> — the Single/16 m²/Balcony stack) */
.besa-room-result-card__meta {
  list-style: none;
  margin: 0.125rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
}
.besa-room-result-card__meta li {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  background: var(--bb-surface-2);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--bb-text-muted);
  white-space: nowrap;
}
/* Footer (price + actions) pinned to the bottom so grid cards align */
.besa-room-result-card__footer {
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}
.besa-room-result-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.besa-room-result-card__price-per-night {
  font-size: 1.25rem;
  font-weight: var(--bb-weight-strong);
  color: var(--bb-text);
}
.besa-room-result-card__price-per-night small {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--bb-text-muted);
}
.besa-room-result-card__price-total {
  font-size: 0.8125rem;
  color: var(--bb-text-muted);
}

/* ---- GRID (default): responsive columns, card = image on top ---- */
.besa-search-results[data-layout="grid"] .besa-search-results__list {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.besa-search-results[data-layout="grid"] .besa-room-result-card__image {
  aspect-ratio: 3 / 2;
}

/* ---- LIST: one column of compact horizontal rows, small thumbnail left ---- */
.besa-search-results[data-layout="list"] .besa-search-results__list {
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
@media (min-width: 560px) {
  .besa-search-results[data-layout="list"] .besa-room-result-card {
    flex-direction: row;
    align-items: stretch;
  }
  .besa-search-results[data-layout="list"] .besa-room-result-card__image {
    flex: 0 0 200px;
    aspect-ratio: auto;
  }
  .besa-search-results[data-layout="list"] .besa-room-result-card__description {
    -webkit-line-clamp: 1;
  }
}

/* ---- ZIGZAG: wide single column, image | body, alternating sides ---- */
.besa-search-results[data-layout="zigzag"] .besa-search-results__list {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px) {
  .besa-search-results[data-layout="zigzag"] .besa-room-result-card {
    flex-direction: row;
    align-items: stretch;
  }
  .besa-search-results[data-layout="zigzag"] .besa-room-result-card__image {
    flex: 1 1 50%;
    aspect-ratio: auto;
    min-height: 320px;
  }
  .besa-search-results[data-layout="zigzag"] .besa-room-result-card__body {
    flex: 1 1 50%;
    justify-content: center;
    padding: 2rem;
  }
  /* every even card flips: image on the right */
  .besa-search-results[data-layout="zigzag"] .besa-search-results__item:nth-child(even) .besa-room-result-card {
    flex-direction: row-reverse;
  }
}

/* ---- Guest layout toggle (JS-injected into the header; hidden without JS) ---- */
.besa-layout-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bb-surface-2);
  border-radius: var(--bb-radius);
}
.besa-layout-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: calc(var(--bb-radius) - 2px);
  background: transparent;
  color: var(--bb-text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.besa-layout-toggle__btn:hover {
  color: var(--bb-text);
}
.besa-layout-toggle__btn[aria-pressed="true"] {
  background: var(--bb-surface);
  color: var(--bb-primary);
  box-shadow: var(--bb-shadow);
}
.besa-layout-toggle__btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ============================================================================
   Checkout — 4-step flow
   ============================================================================ */

.besa-checkout {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Breakout — the checkout is usually injected into a narrow theme content column
   (.entry-content ~700px). On wide viewports, break out of that column so all 4 steps
   get real width, capped, and centered on the viewport. Full-bleed transform pattern:
   margin-left:50% is relative to the (narrow) parent, translateX(-50%) re-centers, and
   width is viewport-based → true centered breakout with no horizontal scroll. Only
   ≥1024px so it never fights the already-full-width mobile/tablet layout. */
@media (min-width: 1024px) {
  .besa-checkout {
    width: min(1240px, calc(100vw - 3rem));
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
  }
}

/* One row at every width. Four equal pills need ~31rem once the longest translation is in
   ("Pagamento", "Riepilogo", "Rishikimi"); below 34rem (with margin) only the CURRENT step keeps
   its word and the others shrink to their numbered circle. A container query, not a viewport
   one: the checkout sits in whatever column the theme gives it. Without container queries the
   row still holds — labels ellipsise (min-width: 0) instead of pushing the page sideways. */
.besa-checkout__progress {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  counter-reset: besa-step;
  container: besa-progress / inline-size;
}

.besa-checkout__progress li {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 0.75rem 0.75rem 0.75rem 2.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bb-surface-2);
  border-radius: var(--bb-radius);
  font-size: 0.875rem;
  color: var(--bb-text-muted);
  counter-increment: besa-step;
}

.besa-checkout__progress li::before {
  content: counter(besa-step);
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--bb-surface);
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--bb-text-muted);
}

.besa-checkout__progress li.is-active {
  background: var(--bb-primary);
  color: var(--bb-primary-text);
}
.besa-checkout__progress li.is-active::before {
  background: var(--bb-primary-text);
  color: var(--bb-primary);
}

.besa-checkout__progress li.is-done {
  background: var(--bb-surface-2);
  color: var(--bb-text);
}
.besa-checkout__progress li.is-done::before {
  background: var(--bb-accent);
  color: var(--bb-primary-text);
}

@container besa-progress (max-width: 34rem) {
  .besa-checkout__progress li:not(.is-active) {
    flex: 0 0 2.25rem;
    padding-inline: 0;
  }
  .besa-checkout__progress li:not(.is-active)::before {
    left: 0.375rem;
  }
  /* Visually hidden, still read: the list keeps all four step names for screen readers. */
  .besa-checkout__progress li:not(.is-active) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

.besa-checkout__form {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 900px) {
  .besa-checkout__form {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

.besa-checkout__step {
  background: var(--bb-surface);
  border-radius: var(--bb-radius-lg);
  padding: 2rem;
  border: 1px solid var(--bb-border);
}

@media (max-width: 559px) {
  .besa-checkout__step {
    padding: 1.25rem;
  }
}

.besa-checkout__step:focus {
  outline: none;
}

.besa-checkout__step-heading {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
}

.besa-checkout__step-intro {
  margin: 0 0 1.25rem;
  color: var(--bb-text-muted);
}

.besa-checkout__dates-summary {
  background: var(--bb-surface-2);
  border-radius: var(--bb-radius);
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.besa-checkout__edit-dates {
  margin-bottom: 1rem;
}

.besa-checkout__edit-dates summary {
  cursor: pointer;
  color: var(--bb-text-muted);
  font-size: 0.9375rem;
  padding: 0.25rem 0;
  user-select: none;
}

.besa-checkout__edit-dates summary:hover {
  color: var(--bb-primary);
}

.besa-checkout__dates-fields {
  margin-top: 0.75rem;
  display: grid;
  /* Mobile: dates side-by-side on row 1, guest counts side-by-side on row 2. */
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.75rem;
}

/* Grid gotcha: a native <input type=date> has a large intrinsic min-width (to fit the
   value + picker icon). In a grid, `1fr` tracks default to min-width:auto = content
   min-content, so the date inputs overflow their track and squeeze the number fields
   (Adults collapsed to ~0). min-width:0 lets the tracks actually shrink to 1fr. */
.besa-checkout__dates-fields > .besa-field {
  min-width: 0;
}
.besa-checkout__dates-fields .besa-field__input {
  width: 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .besa-checkout__dates-fields {
    /* Dates get more room than the small guest-count steppers. */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  }
}

.besa-checkout__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem 1rem;
}
/* min-width:0 so long labels/inputs can't blow out a track (grid min-content trap). */
.besa-checkout__fields > .besa-field {
  min-width: 0;
}

@media (min-width: 600px) {
  .besa-checkout__fields {
    grid-template-columns: 1fr 1fr;
  }
}

/* Checkout Rate plan (board) selector — same pattern as the Reserve panel */
.besa-checkout__boards {
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border: 0;
  border-top: 1px solid var(--bb-border);
}

.besa-checkout__boards-title {
  padding: 0;
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bb-primary);
}

.besa-checkout__boards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.besa-checkout__board {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bb-border-control);
  border-radius: var(--bb-radius);
  transition: border-color 150ms ease, background 150ms ease;
}

.besa-checkout__board:has(.besa-checkout__board-radio:checked) {
  border-color: var(--bb-accent);
  background: color-mix(in srgb, var(--bb-accent) 8%, transparent);
}

.besa-checkout__board-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9375rem;
  flex: 1;
}

.besa-checkout__board-radio {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--bb-accent);
  flex: 0 0 auto;
}

.besa-checkout__board-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bb-text);
  white-space: nowrap;
}

.besa-checkout__board-unit {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--bb-text-muted);
}

/* Checkout Extra Services (handed over from the room-detail Reserve panel) */
.besa-checkout__extras {
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border: 0;
  border-top: 1px solid var(--bb-border);
}

.besa-checkout__extras-title {
  padding: 0;
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bb-primary);
}

.besa-checkout__extras-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.besa-checkout__extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.besa-checkout__extra-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9375rem;
}

.besa-checkout__extra-check {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--bb-accent);
  flex: 0 0 auto;
}

.besa-checkout__extra-price {
  font-size: 0.875rem;
  color: var(--bb-text-muted);
  white-space: nowrap;
}

.besa-checkout__extra-unit {
  font-size: 0.75rem;
}

.besa-field--full {
  grid-column: 1 / -1;
}

textarea.besa-field__input {
  resize: vertical;
  min-height: 4em;
  line-height: 1.5;
}

.besa-checkout__feedback {
  margin-top: 1rem;
  min-height: 1.5em;
  font-size: 0.9375rem;
  color: var(--bb-text-muted);
}

.besa-checkout__feedback--error {
  color: var(--bb-error);
}

.besa-checkout__actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Payment options — cards, not radio buttons (design-refinements §5.1) */
.besa-payment-options {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  /* Wide main column → let the payment cards sit 2-up instead of a tall single stack. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.besa-payment-option {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--bb-border-control);
  border-radius: var(--bb-radius);
  cursor: pointer;
  background: var(--bb-surface);
  transition: border-color 200ms ease, background 200ms ease;
}

.besa-payment-option:hover {
  border-color: var(--bb-accent);
}

.besa-payment-option input[type="radio"] {
  flex: 0 0 auto;
  margin-top: 0.25em;
}

.besa-payment-option:has(input:checked) {
  border-color: var(--bb-primary);
  background: var(--bb-surface-2);
}

.besa-payment-option__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.besa-payment-option__title {
  font-weight: 600;
}

.besa-payment-option__desc {
  font-size: 0.9375rem;
  color: var(--bb-text-muted);
}

/* Trust signals (research-cited +15% completion when present) */
.besa-trust-signals {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bb-surface-2);
  border-radius: var(--bb-radius);
}

.besa-trust-signals__primary {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
}

.besa-trust-signals__icon {
  margin-right: 0.375rem;
}

.besa-trust-signals__secondary {
  margin: 0;
  font-size: 0.875rem;
  color: var(--bb-text-muted);
}

/* Review step */
.besa-checkout__review-title {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.besa-checkout__review-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.375rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}

.besa-checkout__review-dl dt {
  color: var(--bb-text-muted);
  margin: 0;
}

.besa-checkout__review-dl dd {
  margin: 0;
  font-weight: 500;
}

.besa-checkout__terms {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 1rem 0;
  font-size: 0.9375rem;
  cursor: pointer;
}

.besa-checkout__terms input {
  margin-top: 0.25em;
  flex: 0 0 auto;
}

/* Sticky summary */
.besa-checkout__summary {
  background: var(--bb-surface-2);
  border-radius: var(--bb-radius-lg);
  padding: 1.25rem;
  border: 1px solid var(--bb-border);
}

@media (min-width: 900px) {
  .besa-checkout__summary {
    position: sticky;
    top: 1.5rem;
  }
}

.besa-checkout__summary-heading {
  margin: 0 0 0.875rem;
  font-size: 1.0625rem;
}

.besa-checkout__summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--bb-border);
}

.besa-checkout__summary-row:last-child {
  border-bottom: 0;
}

.besa-checkout__summary-label {
  color: var(--bb-text-muted);
  text-transform: capitalize;
}

.besa-checkout__summary-value {
  font-weight: 500;
  text-transform: capitalize;
}

/* Buttons (shared button helpers; the besa-search-form has its own submit style) */
.besa-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--bb-primary);
  color: var(--bb-primary-text);
  border: none;
  border-radius: var(--bb-radius-button);
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
}

.besa-button:hover {
  background: var(--bb-accent);
}

.besa-button:disabled,
.besa-button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.besa-button--ghost {
  background: transparent;
  color: var(--bb-primary);
  border: 1px solid currentColor;
}

.besa-button--ghost:hover {
  background: var(--bb-surface-2);
}

.besa-button--primary {
  background: var(--bb-primary);
}

/* "Book now" CTA — [besa_book_button] / the book-button block (v1.10). The anchor is its own
   .besa-booking root (the tokens live on that class) and, unlike every other .besa-button, it is
   dropped INTO a theme's content area, where `.entry-content a { color … underline }` (0,1,1)
   outranks a lone .besa-button (0,1,0). Two classes on one element win that without !important.
   The `style="link"` variant carries none of this on purpose: it is meant to look like the
   theme's other links. */
.besa-booking.besa-book-button,
.besa-booking.besa-book-button:visited {
  color: var(--bb-primary-text);
  text-decoration: none;
}

.besa-booking.besa-book-button:hover,
.besa-booking.besa-book-button:focus-visible {
  color: var(--bb-primary-text);
  background: var(--bb-accent);
  text-decoration: none;
}

/* ============================================================================
   Confirmation
   ============================================================================ */

.besa-confirmation {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.besa-confirmation__card {
  background: var(--bb-surface);
  border-radius: var(--bb-radius-lg);
  padding: 2rem;
  border: 1px solid var(--bb-border);
  text-align: center;
}

.besa-confirmation__heading {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

.besa-confirmation__spinner {
  display: inline-flex;
  gap: 0.375rem;
  margin: 0 auto 1rem;
}

.besa-confirmation__spinner span {
  width: 0.625rem;
  height: 0.625rem;
  background: var(--bb-primary);
  border-radius: 50%;
  animation: besa-bounce 1.2s ease-in-out infinite both;
}

.besa-confirmation__spinner span:nth-child(2) { animation-delay: 0.15s; }
.besa-confirmation__spinner span:nth-child(3) { animation-delay: 0.3s; }

@keyframes besa-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40%           { transform: scale(1);   opacity: 1; }
}

.besa-confirmation__tick {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--bb-accent);
  color: var(--bb-primary-text);
  font-size: 2rem;
  font-weight: 700;
}

.besa-confirmation__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1.5rem auto;
  max-width: 420px;
  text-align: left;
}

.besa-confirmation__details > div {
  display: flex;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--bb-border);
}

.besa-confirmation__details > div:last-child {
  border-bottom: 0;
}

.besa-confirmation__details dt {
  margin: 0;
  color: var(--bb-text-muted);
}

.besa-confirmation__details dd {
  margin: 0;
  font-weight: 600;
}

.besa-confirmation__email {
  margin-top: 1rem;
  color: var(--bb-text-muted);
  font-size: 0.9375rem;
}

/* ============================================================================
   Email-verify landing (v1.3)
   ============================================================================ */

.besa-verify {
  max-width: 480px;
  margin: 2rem auto;
}

.besa-verify__card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow);
  padding: 2rem;
  text-align: center;
}

.besa-verify__icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bb-accent);
  color: #fff;
  font-size: 1.5rem;
}

.besa-verify__title {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  color: var(--bb-primary);
}

.besa-verify__text {
  margin: 0 0 1rem;
  color: var(--bb-text-muted);
}

.besa-verify__action {
  margin: 1.25rem 0 0;
}

/* ============================================================================
   Date picker (Phase 3.5) — replaces native <input type=date>
   ============================================================================ */

.besa-datepicker {
  position: relative;
  display: inline-block;
}

/* Once the picker has bound (JS adds .besa-datepicker--ready), hide the native <input type=date>
   fields it wraps — the custom trigger + calendar replace them (dd/mm/yyyy locale display, min-night
   enforcement, Tirana-day floor). Without JS the class is absent, so the native inputs stay visible
   as the accessible no-JS fallback. The trigger button the picker injects is a direct child. */
.besa-datepicker--ready {
  display: inline-flex;
  gap: 0.75rem;
  align-items: end;
}
/* Hide whatever the wrapper already contained — NOT just `.besa-field`.
   The old selector named the plugin's own markup, so the picker could only ever replace the
   plugin's own two fields. A theme that wraps ITS date fields in data-besa-datepicker (caelum's
   `.cl-book__field` labels, for one) got the trigger button injected BESIDE its still-visible
   native inputs, which looks broken — so no theme could adopt the picker without writing its own
   hiding CSS. This hides the wrapper's original children whatever they are called, and spares
   the three elements the picker injects. Same result as before for the plugin's own template,
   whose children are `.besa-field` divs. */
.besa-datepicker--ready > *:not(.besa-datepicker__trigger):not(.besa-datepicker__sheet):not(.besa-datepicker__backdrop) {
  display: none;
}

.besa-datepicker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--bb-surface);
  border: 1px solid var(--bb-border-control);
  border-radius: var(--bb-radius-control);
  font-family: inherit;
  font-size: 1rem;
  color: var(--bb-text);
  cursor: pointer;
  transition: border-color 200ms ease;
  min-width: 220px;
  text-align: left;
}

.besa-datepicker__trigger:hover,
.besa-datepicker__trigger:focus-visible {
  border-color: var(--bb-focus);
  outline: none;
}

.besa-datepicker__trigger::before {
  content: "📅";
  font-size: 1.125rem;
}

.besa-datepicker__backdrop {
  display: none;
}

.besa-datepicker__sheet {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 100;
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  box-shadow: 0 12px 32px -8px rgba(42, 38, 32, 0.18);
  padding: 1.25rem;
  min-width: 300px;
}

/* 100 was too low to be a popover. It has to clear ordinary theme furniture — caelum alone uses
   120 and 999 — so it takes the same rank the mobile sheet already had rather than a number
   picked to beat one theme. Note z-index is only comparable INSIDE a stacking context: if a
   theme's bar sits in a transformed or z-indexed ancestor, the popover is trapped there whatever
   this says, and the theme must lift the bar itself while open — which is what the
   `.besa-datepicker--open` class below is for. */
.besa-datepicker__sheet {
  z-index: 9999;
}

/* Desktop: size the popover to the 2-month grid so it reads as a tidy card, not a
   min-width box the months float inside. Caps at the viewport so it never overflows. */
@media (min-width: 720px) {
  .besa-datepicker__sheet {
    width: min(640px, calc(100vw - 2rem));
    /* When the months stack (a narrow host column), the panel gets tall — let it scroll inside
       itself rather than running off the bottom of the page. positionSheet() in date-picker.js
       handles the horizontal half, which CSS cannot: it needs the anchor's measured position. */
    max-height: min(72vh, 40rem);
    overflow-y: auto;
  }
}

/* Mobile: full-screen sheet.
   Phones here start at 320px. The month grid is 7 columns, so every pixel of side padding costs
   ~3px of tap target per cell: at 320px, 1.25rem gutters left 38px cells; 0.75rem leaves 41px.
   (44px square is arithmetically impossible at 320px — 7 x 44 + gaps IS the whole screen — so
   the height is what gets guaranteed below, and the width is taken as far as it will go.) */
@media (max-width: 719px) {
  .besa-datepicker,
  .besa-datepicker--ready {
    display: flex;
    width: 100%;
  }
  .besa-datepicker__trigger {
    min-width: 0;   /* 220px floor is wider than the content box on a 320px phone */
    width: 100%;
  }
  .besa-datepicker__sheet {
    padding: 0.75rem;
  }
  .besa-datepicker__months {
    gap: 1rem;
  }
  .besa-datepicker__backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(42, 38, 32, 0.45);
    z-index: 9998;
  }
  .besa-datepicker__sheet:not([hidden]) {
    position: fixed;
    inset: 0;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;
    /* dvh, not vh: on mobile Safari and Chrome `vh` is the LARGE viewport (address bar hidden),
       so 90vh reached under the browser chrome and the footer — the flexible-dates control —
       sat below the fold with nothing to scroll to. vh stays first as the fallback for
       browsers without dvh. */
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    /* Without this, scrolling past the end of the calendar scrolls the PAGE behind the sheet. */
    overscroll-behavior: contain;
    z-index: 9999;
    box-shadow: 0 -8px 24px -4px rgba(42, 38, 32, 0.2);
  }
}

.besa-datepicker__header {
  margin-bottom: 0.75rem;
}

.besa-datepicker__title {
  font-weight: 600;
  font-size: 1rem;
}

.besa-datepicker__nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.besa-datepicker__nav-btn,
.besa-datepicker__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--bb-border-control);
  border-radius: 50%;
  background: var(--bb-surface);
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--bb-text);
  display: grid;
  place-items: center;
  transition: background 200ms ease;
}

.besa-datepicker__nav-btn:hover,
.besa-datepicker__close:hover {
  background: var(--bb-surface-2);
}

.besa-datepicker__close {
  margin-left: auto;
}

.besa-datepicker__months {
  display: grid;
  gap: 1.5rem;
  /* Container-driven, NOT viewport-driven. The old rule turned on two columns at a 720px
     VIEWPORT, but the picker is anchored inside whatever column hosts it — the Reserve card on
     a room page is ~300px wide on a 1400px screen. The viewport said "two months", the space
     said otherwise, and the second month was clipped. auto-fit asks the sheet itself, so the
     months sit side by side when they fit and stack when they do not, at any viewport.
     date-picker.js still decides how many months to RENDER; this decides how they lay out. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}

.besa-datepicker__month-title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
}

.besa-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: var(--bb-text-muted);
  text-align: center;
}

.besa-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.besa-datepicker__day {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--bb-radius);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--bb-text);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.besa-datepicker__day:hover:not(:disabled):not(.besa-datepicker__day--blank) {
  background: var(--bb-surface-2);
}

.besa-datepicker__day:focus-visible {
  outline: 2px solid var(--bb-focus);
  outline-offset: 1px;
}

.besa-datepicker__day--blank {
  cursor: default;
}

.besa-datepicker__day--out-of-bounds {
  color: var(--bb-text-muted);
  opacity: 0.35;
  cursor: not-allowed;
}

.besa-datepicker__day--unavailable {
  color: var(--bb-text-muted);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in oklab, var(--bb-error) 60%, transparent);
}

.besa-datepicker__day--start,
.besa-datepicker__day--end {
  background: var(--bb-primary);
  color: var(--bb-primary-text);
  font-weight: 600;
}

.besa-datepicker__day--in-range {
  background: var(--bb-surface-3, var(--bb-surface-2));
}

/* Touch targets. Keyed to the POINTER, not the viewport — a tablet with a 900px screen still
   gets fingers. 2.25rem (36px) day cells and 2rem (32px) nav buttons are comfortable with a
   mouse and under every touch guideline there is (WCAG 2.5.5, 44px; Android, 48dp). Picking the
   wrong date is the most expensive mis-tap in a booking flow. */
@media (pointer: coarse) {
  .besa-datepicker__day {
    min-height: 2.75rem;
  }
  .besa-datepicker__nav-btn,
  .besa-datepicker__close {
    width: 2.75rem;
    height: 2.75rem;
  }
  /* The label IS the hit area for its checkbox — give it one worth aiming at. */
  .besa-datepicker__flex {
    min-height: 2.75rem;
  }
}

.besa-datepicker__price {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.625rem;
  color: var(--bb-text-muted);
  font-weight: 500;
  pointer-events: none;
}

.besa-datepicker__footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bb-border);
}

.besa-datepicker__flex {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .besa-datepicker__day,
  .besa-datepicker__nav-btn,
  .besa-datepicker__close {
    transition: none;
  }
}

/* ============================================================================
   Multi-room cart (v1.4) — result-card stepper + sticky cart bar
   ============================================================================ */

.besa-room-result-card__scarcity {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bb-urgency);
}

.besa-room-result-card__fits-note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--bb-text-muted);
}

.besa-room-result-card__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.besa-cart-add {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.besa-cart-add__step {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--bb-border-control);
  border-radius: var(--bb-radius-control);
  background: var(--bb-surface);
  color: var(--bb-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.besa-cart-add__count {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 700;
}

.besa-cart-add__cta.is-in-cart {
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.besa-cart-add__cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.besa-cart-add__feedback {
  font-size: 0.8rem;
  color: var(--bb-urgency);
}

.besa-cart-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin-top: 1rem;
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;
  box-shadow: 0 -4px 12px rgba(42, 38, 32, 0.10);
  padding: 0.75rem 1rem;
}

.besa-cart-bar__lines {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 9rem;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

.besa-cart-bar__line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.besa-cart-bar__line-name {
  font-weight: 600;
}

.besa-cart-bar__line-meta {
  color: var(--bb-text-muted);
  margin-left: auto;
}

.besa-cart-bar__remove {
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--bb-border-control);
  border-radius: 50%;
  background: transparent;
  color: var(--bb-text);
  line-height: 1;
  cursor: pointer;
}

.besa-cart-bar__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.besa-cart-bar__total {
  font-weight: var(--bb-weight-strong);
}

/* Checkout cart lines (multi-room checkout — Step 1) */
.besa-checkout__cart-line {
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.besa-checkout__cart-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.besa-checkout__cart-line-name {
  font-weight: var(--bb-weight-strong);
}

.besa-checkout__cart-line-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.5rem;
  align-items: end;
}

.besa-checkout__cart-line-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--bb-text-muted);
}

/* Cart success panel (inline, replaces checkout steps after a multi-room booking) */
.besa-cart-success__rooms {
  margin: 1rem auto;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.besa-cart-success__room {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: 0.5rem 0.75rem;
}

.besa-cart-success__conf {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: var(--bb-weight-strong);
}

/* Group confirmation (multi-room) — room list on the confirmation page */
.besa-confirmation__group-rooms {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.besa-confirmation__group-room {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: 0.5rem 0.75rem;
}

/* ============================================================================
   Reduced motion: kill animations
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .besa-room-card,
  .besa-room-card__image-img,
  .besa-search-form__submit,
  .besa-room-detail__book-cta,
  .besa-button,
  .besa-payment-option {
    transition: none;
  }
  .besa-room-card:hover {
    transform: none;
  }
  .besa-room-card:hover .besa-room-card__image-img {
    transform: none;
  }
  .besa-confirmation__spinner span {
    animation: none;
    opacity: 1;
  }
}

/* ============================================================================
   Last-minute offers section ([besa_offers]) — single-offer cards + combo packages
   ============================================================================ */

.besa-offers__header {
  margin: 0 0 1.25rem;
}

.besa-offers__heading {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.besa-offers__intro {
  margin: 0;
  color: var(--bb-text-muted);
}

.besa-offers__subheading {
  margin: 2rem 0 1rem;
  font-size: 1.25rem;
}

.besa-offers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .besa-offers__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .besa-offers__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.besa-offer-card {
  position: relative;
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.besa-offer-card__badge {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  background: var(--bb-accent);
  color: var(--bb-primary);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.375rem 0.5rem;
  border-radius: var(--bb-radius);
}

.besa-offer-card__title {
  margin: 0;
  font-size: 1.125rem;
  padding-right: 3.5rem; /* keep clear of the badge */
}

.besa-offer-card__dates,
.besa-offer-card__board {
  margin: 0;
  color: var(--bb-text-muted);
  font-size: 0.9375rem;
}

.besa-offer-card__price {
  margin: 0.25rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.besa-offer-card__price-was {
  color: var(--bb-text-muted);
  font-size: 0.9375rem;
}

.besa-offer-card__price-now {
  font-size: 1.25rem;
}

.besa-offer-card__price-unit {
  color: var(--bb-text-muted);
  font-size: 0.875rem;
}

.besa-offer-card__total {
  margin: 0;
  font-size: 0.9375rem;
}

.besa-offer-card__cta {
  margin-top: 0.75rem;
  align-self: flex-start;
}

/* Combo package cards ------------------------------------------------------ */

.besa-offers__combos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 960px) {
  .besa-offers__combos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.besa-combo-card {
  position: relative;
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow);
  padding: 1.25rem;
}

.besa-combo-card__head {
  padding-right: 3.5rem; /* keep clear of the badge */
}

.besa-combo-card__title {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
}

.besa-combo-card__meta {
  margin: 0 0 0.75rem;
  color: var(--bb-text-muted);
  font-size: 0.9375rem;
}

.besa-combo-card__segments {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  border-top: 1px solid var(--bb-border);
}

.besa-combo-card__segment {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bb-border);
  font-size: 0.9375rem;
}

.besa-combo-card__segment-dates {
  color: var(--bb-text-muted);
}

.besa-combo-card__segment-room {
  font-weight: 600;
}

.besa-combo-card__total {
  margin: 0 0 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.besa-combo-card__paynote {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--bb-text-muted);
}

.besa-combo-card__form {
  margin-top: 1rem;
  border-top: 1px solid var(--bb-border);
  padding-top: 1rem;
}

.besa-combo-card__gone {
  margin: 0;
  color: var(--bb-text-muted);
}

.besa-combo-card__success .besa-cart-success__conf {
  font-size: 1.125rem;
}

/* Offer banner on the checkout (offer mode) -------------------------------- */

.besa-offer-banner {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  padding: 1rem;
  margin: 0 0 1rem;
}

.besa-offer-banner .besa-offer-card__badge {
  position: static;
  flex-shrink: 0;
}

.besa-offer-banner__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.besa-offer-banner__title,
.besa-offer-banner__price,
.besa-offer-banner__total {
  margin: 0;
}

.besa-offer-banner__note {
  margin: 0;
  color: var(--bb-text-muted);
  font-size: 0.875rem;
}