/* -----------------------------------------------------------------------------
   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-booking {
  --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-border:         rgba(42, 38, 32, 0.12);
  --bb-shadow:         0 4px 12px -2px rgba(42, 38, 32, 0.08);

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

/* ============================================================================
   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;
}

.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: check-in | check-out | adults | children | submit */
  .besa-search-form--inline .besa-search-form__fields {
    grid-template-columns: 1.4fr 1.4fr 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: 1.3fr 1.3fr 0.7fr 0.7fr 1.2fr auto;
  }
  /* 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);
  border-radius: var(--bb-radius);
  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-primary);
  box-shadow: 0 0 0 3px rgba(200, 160, 85, 0.2);
}

.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);
  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: #b91c1c;
}

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

/* ============================================================================
   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: 700;
  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);
  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: 700;
  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);
  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: 700;
  color: var(--bb-primary);
}

.besa-reserve__total-value {
  font-size: 1.375rem;
  font-weight: 700;
  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: #b3261e;
}

.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-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: 700;
  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%);
  }
}

.besa-checkout__progress {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  counter-reset: besa-step;
}

.besa-checkout__progress li {
  flex: 1;
  position: relative;
  padding: 0.75rem 0 0.75rem 2.25rem;
  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);
}

.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);
  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: #b91c1c;
}

.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);
  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);
  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);
}

/* ============================================================================
   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;
}
.besa-datepicker--ready .besa-field {
  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);
  border-radius: var(--bb-radius);
  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-primary);
  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;
}

/* 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));
  }
}

/* Mobile: full-screen sheet */
@media (max-width: 719px) {
  .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;
    max-height: 90vh;
    overflow-y: auto;
    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);
  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;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  /* Two months side-by-side on desktop (current + next). Was 4 at ≥1200px — too heavy for a
     booking flow; capped to 2 to match computeMonthsVisible() in date-picker.js. */
  .besa-datepicker__months {
    grid-template-columns: 1fr 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-primary);
  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: rgba(185, 28, 28, 0.6);
}

.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));
}

.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: #A34B2E;
}

.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);
  border-radius: var(--bb-radius);
  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: #A34B2E;
}

.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);
  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: 700;
}

/* 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: 700;
}

.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: 700;
}

/* 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;
  }
}