/* The booking funnel — Review (Figma 516:6441) and Confirmation (Figma 516:6569).

   Two screens in one file for the same reason my_bookings.css holds three: they are
   one journey, and splitting them would separate rules that get read together.

   Every colour and radius is a --wa-* token. A brand hex here is a bug and there is
   a test asserting it. */

.booking-review {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.booking-review__summary {
  padding: 1rem;
  background: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-m);
  margin-bottom: 1.5rem;
}

.booking-review__hotel {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.booking-review__room-type {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.booking-review__rate {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

/* A saving reads as good news rather than as another grey line. */
.booking-review__discount {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--wa-color-success-on-quiet);
}

/* The number the guest is agreeing to, ruled off from the lines that build it. */
.booking-review__total {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--wa-color-surface-border);
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

/* A quiet secondary action, deliberately not a wa-button: it sits directly under the
   summary panel and competing with "Confirm booking" for weight would be the wrong
   emphasis on a screen whose job is to get one booking finished. */
.booking-review__change {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
}

.booking-review__guest {
  margin-bottom: 1.5rem;
}

.booking-review__guest p {
  margin: 0.25rem 0;
  color: var(--wa-color-text-normal);
}

/* Descendant-qualified deliberately. The note IS a <p> inside .booking-review__guest,
   so the bare class (specificity 0,1,0) lost its `color` to `.booking-review__guest p`
   (0,1,1) directly above — measured colour was text-normal, not the text-quiet this
   rule asks for. The font-size and line-height applied all along, which is what made
   it look intentional. Qualifying takes this to 0,2,0 and wins. */
.booking-review__guest .booking-review__guest-note {
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  line-height: 1.5;
}

/* HMS-255 — "This room joins your group under confirmation REF." takes the
   guest-note styling: a quiet line of context, not a peer of the field labels. */
.booking-review__group-note {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  line-height: 1.5;
}

/* NO .booking-review__alert RULE. The inline flash paragraph it styled was removed as
   a duplicate of the announced <wa-callout> the layout renders, so this rule matched
   nothing. Keeping CSS for markup that no longer exists is how a stylesheet starts
   lying about the page. */

.booking-review__label {
  display: block;
  margin: 1rem 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.booking-review__shoulder-note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

/* HMS-83 — the roommate opt-in. A label wrapping the input, so clicking the text
   toggles the box; the flex gap keeps box and text on one line. */
.booking-review__opt-in {
  display: flex;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
  cursor: pointer;
}

/* HMS-39 — payment tokenization. The card container is always present but only
   populated when a gateway is configured; without it, the block is hidden and
   the plain token input is shown. */
.payment-token__error {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-danger-fill-loud);
}

/* HMS-636 — Figma's payment card: number/expiry/CVV in one row, the cardholder
   name full-width below, and a hairline rule under the guarantee note. */
.funnel-payment__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.funnel-payment__name { grid-column: 1 / -1; }
.funnel-payment__divider {
  border: 0;
  border-top: 1px solid var(--wa-color-surface-border);
  margin: 0.75rem 0 1rem;
}
/* A mount slot is a div that takes the same outline as the text inputs so the
   hosted card element (Stripe) or the injected input (Authorize.net) reads as
   one of the Figma's outlined fields. */
.funnel-payment__slot {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
  box-sizing: border-box;
}
@media (max-width: 40rem) {
  .funnel-payment__grid { grid-template-columns: 1fr; }
}

/* NO RULE FOR .booking-review__date, deliberately, and it took measuring in a browser
   to learn why. Web Awesome's native.css already styles light-DOM form controls: the
   date inputs come out with the surface border, the radius-m corner, the surface
   background and the body font with no help from this file.
   Restyling them here duplicated the framework, and the focus ring I added was worse
   than the one I removed — 2px in a lighter colour where the default paints 3px, a
   downgrade against the WCAG 2.1 AA focus requirement. Measured with and without.
   The class stays in the markup as the hook booking-funnel.spec.ts locates. */

/* HMS-229 — native submit buttons replacing the wa-button default so implicit
   form submission works from date fields. Styled with the same brand tokens. */
.booking-review__submit {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-loud, var(--wa-color-brand));
  color: var(--wa-color-brand-on-loud);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Confirmation — Figma 516:6569. */

.booking-confirmation {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* Success hero — green check + heading + email copy. */
.booking-confirmation__hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.booking-confirmation__hero-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
  border: 1px solid var(--wa-color-success-border-quiet);
  font-size: 1.25rem;
}
.booking-confirmation__hero-check--neutral {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
  border: 1px solid var(--wa-color-neutral-border-quiet);
}
/* HMS-1061: cancelled hero — red calendar with a red X badge on a pale red disc. */
.booking-confirmation__hero-check--cancelled {
  position: relative;
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-fill-loud);
  border: 1px solid var(--wa-color-danger-border-quiet);
}
.booking-confirmation__hero-badge {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--wa-color-danger-fill-loud);
  color: var(--wa-color-danger-on-loud);
  box-shadow: 0 0 0 2px var(--wa-color-danger-fill-quiet);
  font-size: 0.5rem;
}
.booking-confirmation__hero-title { margin: 0; font-size: 1.5rem; }
.booking-confirmation__hero-copy { margin: 0.25rem 0 0; color: var(--wa-color-text-quiet); }

/* Reference box — bordered card: quiet label over the loud teal reference,
   copy control parked right. */
.booking-confirmation__reference-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 0.875rem 1rem;
  background: var(--wa-color-surface-lowered);
  border: 1px solid var(--wa-color-brand-fixed);
  border-radius: var(--wa-border-radius-m);
}
.booking-confirmation__reference-label { color: var(--wa-color-text-quiet); font-size: 0.8125rem; }
.booking-confirmation__reference-value {
  color: var(--wa-color-brand-fixed);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
/* HMS-1553 — a multi-room group lists each room's own reference under the
   master, quiet like the label, one per line. */
.booking-confirmation__room-references {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.125rem;
  color: var(--wa-color-text-quiet);
  font-size: 0.8125rem;
}
/* HMS-641 — Figma's copy affordance is a 16px text action in neutral-on-normal
   (#424554); BEM classes cannot reach the wa-button's internals, ::part can. */
.booking-confirmation__reference-box wa-button::part(base) {
  font-size: 1rem;
  color: var(--wa-color-neutral-on-normal);
}

/* Designed 2-column detail grid; phones get a single column. */
.booking-confirmation__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 1.5rem;
}
.booking-confirmation__cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0;
}
.booking-confirmation__cell dt { color: var(--wa-color-text-quiet); font-size: 0.8125rem; }
.booking-confirmation__cell dd { margin: 0; color: var(--wa-color-text-normal); }
.booking-confirmation__due { color: var(--wa-color-text-quiet); }

/* HMS-724 — the confirmation photo is the 400×300 thumb variant; the
   no-photo placeholder holds the same 4:3 box so the layout doesn't shift. */
.booking-confirmation__hotel-photo {
  display: block;
  width: 100%;
  max-width: 25rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
  margin: 0 0 1.5rem;
}
.booking-confirmation__hotel-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-color-brand-90);
}
.booking-confirmation__hotel-initials {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--wa-color-brand);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media (min-width: 40rem) {
  .booking-confirmation__grid { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}

.booking-confirmation__money {
  padding: 1rem;
  margin: 1.5rem 0;
  background: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-m);
}

.booking-confirmation__money dl {
  margin: 0;
}

.booking-confirmation__money dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}

.booking-confirmation__money-label {
  color: var(--wa-color-text-quiet);
}

.booking-confirmation__money-value {
  margin: 0;
  color: var(--wa-color-text-normal);
}

/* HMS-1539 — the rate line can hold two priced night types; when it wraps on
   a phone the second segment should still hug the value edge. */
.booking-confirmation__money-value--rates {
  text-align: right;
}

/* HMS-1539 — the itemized add-on lines under the Add-ons total: a detail row
   spanning the full width, so each name sits at the label edge and its price
   at the value edge like every other money row, but quieter. */
.booking-confirmation__add-ons-detail dd {
  margin: 0;
  flex: 1;
}
.booking-confirmation__add-ons-detail .booking-confirmation__add-ons {
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
}

/* HMS-778 — a saving reads as good news, same as the funnel's discount row. */
.booking-confirmation__money-value--discount {
  color: var(--wa-color-success-on-quiet);
}

.booking-confirmation__money-total {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--wa-color-surface-border);
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.booking-confirmation__money-total dd {
  margin: 0;
}

.booking-confirmation__guest {
  margin-bottom: 1.5rem;
}

.booking-confirmation__guest p {
  margin: 0.25rem 0;
  color: var(--wa-color-text-quiet);
}

/* Upsell + share cards — quiet filled cards with a trailing action. */
.booking-confirmation__upsell,
.booking-confirmation__share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-m);
}
.booking-confirmation__upsell-copy p { margin: 0.25rem 0 0; color: var(--wa-color-text-quiet); font-size: 0.875rem; }
.booking-confirmation__share p { margin: 0; flex: 1; color: var(--wa-color-text-normal); }
.booking-confirmation__share-icon { color: var(--wa-color-text-quiet); }
@media (max-width: 40rem) {
  .booking-confirmation__upsell,
  .booking-confirmation__share { flex-wrap: wrap; }
  /* flex-wrap alone was not enough: flex:1's zero basis let the copy shrink to
     a sliver beside the button rather than wrap. A real basis keeps the
     icon+text line readable and pushes the button onto its own row. */
  .booking-confirmation__share p { flex: 1 1 14rem; }
}

/* Actions: primary row splits calendar/pdf left, my-bookings right. Wraps rather
   than scrolls: on a 390px phone the buttons do not fit on one line, and a
   horizontally clipped Cancel is a button the guest cannot reach. */
.booking-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.booking-confirmation__actions-group { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.booking-confirmation__actions--secondary { margin-top: 0.5rem; }

/* HMS-1419 — phone action layout. At 390px the desktop row shrink-wrapped each
   button to its own label, the upsell's "Book Another Room" sat a card-padding
   inset off the action column's left edge, and the secondary links split
   space-between into ragged pairs. On phones the upsell/share cards flatten
   into plain sections and every action takes the same full-width column; the
   secondary links form a 2-column grid with equal cells. */
@media (max-width: 40rem) {
  .booking-confirmation__upsell,
  .booking-confirmation__share {
    padding: 0;
    background: none;
    border-radius: 0;
    margin-bottom: 1.5rem;
  }
  .booking-confirmation__upsell {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .booking-confirmation__share wa-copy-button { flex-basis: 100%; }
  .booking-confirmation__upsell wa-button,
  .booking-confirmation__share wa-copy-button,
  .booking-confirmation__share wa-button,
  .booking-confirmation__actions wa-button { width: 100%; }
  .booking-confirmation__actions,
  .booking-confirmation__actions-group {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .booking-confirmation__actions--secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
  }
}

@media (max-width: 40rem) {
  .booking-review,
  .booking-confirmation {
    padding: 1.5rem 1rem 2rem;
  }
}

/* The floating chatbot bubble sits bottom-right over the last content row on
   phones — the footer's own height keeps Total/actions reachable above it, so
   HMS-1419 took the 6.5rem clearance back to the base 3rem. */
@media (max-width: 48rem) {
  .booking-confirmation { padding-bottom: 3rem; }
}

/* HMS-49 — the refund schedule on the review screen. Quiet list; the tiers are
   context for the total above, not a second headline. */
.booking-review__policy {
  margin-top: 1.5rem;
}

.booking-review__policy-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--wa-color-text-normal);
}

.booking-review__tiers {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.booking-review__tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.booking-review__tier-label {
  color: var(--wa-color-text-quiet);
}

.booking-review__tier-value {
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* HMS-108 — add-on selection on the booking review page. */
.booking-review__add-ons {
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: 1rem;
  margin: 1rem 0;
}

.booking-review__add-ons-legend {
  font-weight: 600;
  color: var(--wa-color-text-normal);
  padding: 0 0.5rem;
}

.booking-review__add-on {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.booking-review__add-on:last-child {
  border-bottom: none;
}

.booking-review__add-on-label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--wa-color-text-normal);
  cursor: pointer;
}

.booking-review__add-on-description {
  display: block;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.booking-review__add-on-price {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.booking-confirmation__add-ons {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* HMS-617 — each line is name-left, price-right like every other money row. */
.booking-confirmation__add-ons li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.booking-confirmation__add-on-price {
  white-space: nowrap;
}

/* HMS-377 / Figma 516:7717 — the sold-out overflow page.
   The booking form is replaced wholesale; this is a standalone screen. */

.booking-overflow {
  max-width: 960px;
  margin: 0 auto;
}

.booking-overflow__banner {
  background: var(--wa-color-danger-fill-loud);
  color: var(--wa-color-danger-on-loud);
  border-radius: var(--wa-border-radius-l);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.booking-overflow__capacity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.375rem;
}

.booking-overflow__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.booking-overflow__waitlist {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-l);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.booking-overflow__waitlist-heading {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
  margin: 0;
}

.booking-overflow__position {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-color-text-quiet);
  margin: 0;
}

/* button_to puts the class on the BUTTON, but the flex item in this strip is the
   wrapping <form class="button_to">. The right-push and the mobile full-width have
   to land on the form — on the button they are dead code (inline-level box: auto
   margin resolves to 0, and width:100% of a shrink-to-fit form is cyclic). */
.booking-overflow__waitlist .button_to {
  margin-left: auto;
}

.booking-overflow__waitlist-btn {
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand);
  color: var(--wa-color-brand-on-loud);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.booking-overflow__heading {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
  margin: 0 0 0.75rem;
}

.booking-overflow__grid {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.booking-overflow__card {
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-l);
  overflow: hidden;
}

.booking-overflow__photo {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--wa-color-surface-lowered);
}

.booking-overflow__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.booking-overflow__distance {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-overlay-modal);
  color: var(--wa-color-danger-on-loud);
  font-size: 0.75rem;
  font-weight: 600;
}

.booking-overflow__body {
  padding: 0.875rem 1rem 1rem;
}

.booking-overflow__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.booking-overflow__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
  margin: 0;
}

.booking-overflow__stars {
  flex: none;
  font-size: 0.875rem;
}

.booking-overflow__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  /* wrap between the two spans, not inside them: "10 rooms / left" is a worse
     break than the price dropping to its own line. */
  flex-wrap: wrap;
  margin: 0.375rem 0 0.875rem;
}

.booking-overflow__rooms-left {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wa-color-text-quiet);
}

.booking-overflow__price {
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.booking-overflow__book {
  display: block;
  text-align: center;
  padding: 0.625rem 1rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand);
  color: var(--wa-color-brand-on-loud);
  font-weight: 600;
  text-decoration: none;
}

.booking-overflow__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
  padding-top: 1rem;
}

.booking-overflow__ota-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.booking-overflow__ota-link {
  color: var(--wa-color-brand);
  font-weight: 600;
  font-size: 0.9375rem;
}

.booking-overflow__heading--partners {
  font-size: 0.9375rem;
  color: var(--wa-color-text-quiet);
  margin-bottom: 0.375rem;
}

/* HMS-906 — the waitlist page's Close was a faint text link; it reads as a
   real control now: bordered button, right-aligned, full weight. */
.booking-overflow__close {
  display: block;
  width: fit-content;
  margin: 0.5rem 0 0 auto;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
  color: var(--wa-color-text-normal);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.booking-overflow__empty {
  color: var(--wa-color-text-quiet);
  margin-bottom: 1.5rem;
}

@media (max-width: 40rem) {
  .booking-overflow__grid {
    grid-template-columns: 1fr;
  }

  .booking-overflow__waitlist .button_to {
    margin-left: 0;
    width: 100%;
  }

  .booking-overflow__waitlist-btn {
    width: 100%;
  }
}

/* HMS-383 — the billing-kind fieldset had no rule at all: the browser default
   border ran straight through the legend text on the 390px form. Same card
   treatment as .booking-review__add-ons above it. */
.booking-review__billing {
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: 1rem;
  margin: 1rem 0;
}

.booking-review__billing-legend {
  font-weight: 600;
  color: var(--wa-color-text-normal);
  padding: 0 0.5rem;
}

.booking-review__billing-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
}
/* ===== HMS-370 — the multi-step funnel (Figma 516:7360/7487/6021/6441) ===== */

.funnel {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* Stepper — completed steps are real links back, the current step announces
   itself, upcoming steps are inert text rather than doors to screens whose
   inputs would be missing. */
.funnel-steps { margin-bottom: 1.5rem; }

.funnel-steps__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.funnel-steps__item {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.funnel-steps__item:last-child { flex: none; }

.funnel-steps__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.funnel-steps__badge {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--wa-color-surface-lowered);
  color: var(--wa-color-text-quiet);
}

.funnel-steps__item--done .funnel-steps__badge {
  background: var(--wa-color-success-fill-loud);
  color: var(--wa-color-success-on-loud);
}

.funnel-steps__item--done .funnel-steps__label {
  color: var(--wa-color-success-on-quiet);
  font-weight: 600;
}

.funnel-steps__item--current .funnel-steps__badge {
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

.funnel-steps__item--current .funnel-steps__label {
  color: var(--wa-color-text-normal);
  font-weight: 600;
}

.funnel-steps__label {
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
}

.funnel-steps__connector {
  flex: 1;
  height: 2px;
  margin: 0 0.75rem;
  min-width: 0.75rem;
  background: var(--wa-color-neutral-border-quiet);
}

.funnel-steps__item--done .funnel-steps__connector {
  background: var(--wa-color-success-fill-loud);
}

/* The labels crowd at phone width — shrink them rather than hiding a step
   the guest still needs to name. Shrinking alone was not enough: at 390px each
   flex-1 item is ~43px wide while the nowrap labels run 49–85px and, with
   overflow visible, bleed into the neighbouring steps until the row is
   unreadable. So under 40rem only the CURRENT step keeps its label; the rest
   collapse to their badges. The hidden labels are clipped, not display:none —
   they stay in the accessibility tree so the done-step links keep their
   accessible names (the badges are aria-hidden). */
@media (max-width: 40rem) {
  .funnel-steps__label { font-size: 0.6875rem; }
  .funnel-steps__badge { width: 1.375rem; height: 1.375rem; font-size: 0.6875rem; }
  .funnel-steps__connector { margin: 0 0.375rem; }
  .funnel-steps__link { position: relative; }
  .funnel-steps__item--current { flex: none; }
  .funnel-steps__item:not(.funnel-steps__item--current) .funnel-steps__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}

/* Two-column body: the step's cards on the left, the summary sidebar on the
   right. Stacks under the main column on tablets and phones. */
.funnel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 64rem) {
  .funnel__grid { grid-template-columns: 1fr; }
}

/* HMS-611 — stretch lets the Selected Add-Ons card fill the row's height so
   its Skip button can pin to the bottom like the Figma panel. */
.funnel__sidebar { position: sticky; top: 1rem; align-self: stretch; }
@media (max-width: 64rem) { .funnel__sidebar { position: static; order: -1; } }

/* HMS-1417 — on the add-ons step the summary belongs between the available
   cards and the nav buttons: main, sidebar, actions is already DOM order,
   so undo only the sidebar-first order for this step. */
@media (max-width: 64rem) { .funnel__grid--addons .funnel__sidebar { order: 0; } }

.funnel__main--solo { max-width: 38rem; margin: 0 auto; }

/* HMS-607 — breathing room for the room-limit warning under the stepper. */
.funnel__room-limit { display: block; margin-block: 0.75rem 1rem; }

.funnel-heading { margin-bottom: 1.25rem; }
.funnel-heading h1 { margin: 0; font-size: 1.5rem; color: var(--wa-color-text-normal); }
.funnel-heading p { margin: 0.375rem 0 0; font-size: 0.9375rem; color: var(--wa-color-text-quiet); }

.funnel-card {
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.funnel-card__title { margin: 0 0 0.75rem; font-size: 1.125rem; color: var(--wa-color-text-normal); }
.funnel-card__subtitle { margin: -0.375rem 0 1rem; font-size: 0.875rem; color: var(--wa-color-text-quiet); }

/* HMS-555 — the stay-dates strip on room selection. Keeps the two date fields
   and their apply button on one line, dropping to stacked only on phones. */
.funnel-stay { margin-bottom: 1.25rem; }
.funnel-stay__fields {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.funnel-stay__fields .stay-range { flex: 1 1 auto; min-width: 10rem; }
@media (max-width: 40rem) {
  .funnel-stay__fields { flex-direction: column; align-items: stretch; }
}

/* Form fields — the focus ring is deliberately NOT restyled: the default 3px
   ring is more visible than any thinner substitute (the funnel spec guards it). */
.funnel-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.funnel-field-row:last-child { margin-bottom: 0; }
.funnel-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
.funnel-field:last-child, .funnel-field-row .funnel-field { margin-bottom: 0; }
.funnel-field__label { font-size: 0.8125rem; font-weight: 600; color: var(--wa-color-text-normal); }

/* HMS-1369 — required-field marker on funnel labels. */
.funnel-field__required { color: var(--wa-color-danger-fill-loud); }
.funnel-field__hint { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
.funnel-field__input {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  font: inherit;
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-raised);
  width: 100%;
  box-sizing: border-box;
}

.funnel-field--error .funnel-field__input { border-color: var(--wa-color-danger-fill-loud); }
.funnel-field__error { margin: 0; font-size: 0.8125rem; color: var(--wa-color-danger-fill-loud); }

@media (max-width: 40rem) {
  .funnel-field-row { grid-template-columns: 1fr; }
}

/* Toggle cards (SMS opt-in, roommate matching). */
.funnel-toggle-card {
  padding: 1rem;
  background: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-m);
}
/* Figma 516:6021 — the tinted card holds the toggle row, the SMS phone field
   and the consent line; __top keeps the switch pinned right while the rest
   stacks below. */
.funnel-toggle-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.funnel-toggle-card__top:not(:last-child) { margin-bottom: 0.75rem; }
.funnel-toggle-card .funnel-field { margin-bottom: 0.75rem; }
.funnel-toggle-card .funnel-checks { margin-bottom: 0; }
.funnel-toggle-card__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.funnel-toggle-card__title { font-weight: 600; font-size: 0.9375rem; color: var(--wa-color-text-normal); }
.funnel-toggle-card__hint, .funnel-toggle-card__note { font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
.funnel-toggle-card__switch { flex-shrink: 0; }

.funnel-consent { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--wa-color-text-quiet); }

/* Checkbox groups (accessibility, bed preference). */
.funnel-checks { border: none; padding: 0; margin: 0 0 1rem; min-inline-size: 0; }
.funnel-checks__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem 1.5rem; }
.funnel-checks__row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.funnel-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--wa-color-text-normal);
  cursor: pointer;
}

/* HMS-1371 — policy acknowledgment line above the Back/Book row. */
.funnel-policy-ack { margin: 1rem 0 0.5rem; }
@media (max-width: 40rem) { .funnel-checks__grid { grid-template-columns: 1fr; } }

.funnel-wcag, .funnel-info-note {
  display: flex;
  gap: 0.5rem;
  /* HMS-503 — the icon must sit centered against the text line, not pinned
     to the top edge where it reads as dropping below it. */
  align-items: center;
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: var(--wa-border-radius-s);
  font-size: 0.8125rem;
}
.funnel-wcag {
  background: var(--wa-color-success-fill-quiet);
  border-left: 3px solid var(--wa-color-success-fill-loud);
  color: var(--wa-color-success-on-quiet);
}
.funnel-info-note {
  background: var(--wa-color-brand-fill-quiet);
  border-left: 3px solid var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-quiet);
}

/* Add-on card grid (step 2). The selected state class is toggled by the
   funnel-addons Stimulus controller — wa-switch state lives in its shadow
   DOM, so CSS alone cannot see it. */
.addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 48rem) { .addon-grid { grid-template-columns: 1fr; } }

.addon-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  cursor: pointer;
}
.addon-card--selected {
  border-color: var(--wa-color-brand-fill-loud);
  box-shadow: inset 0 0 0 1px var(--wa-color-brand-fill-loud);
}
.addon-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
}
.addon-card__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1; }
.addon-card__name { font-weight: 600; font-size: 0.9375rem; color: var(--wa-color-text-normal); }
.addon-card__description { font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
.addon-card__price { margin-top: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--wa-color-text-normal); }
.addon-card__toggle { flex-shrink: 0; }

/* Selected Add-Ons sidebar card. */
.selected-addons__title { margin: 0 0 0.75rem; font-size: 1rem; color: var(--wa-color-text-normal); }
.selected-addons__list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.selected-addons__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}
.selected-addons__amount { color: var(--wa-color-text-normal); font-weight: 600; white-space: nowrap; }
.selected-addons__empty { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
.selected-addons__subtotal {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--wa-color-surface-border);
  padding-top: 0.75rem;
  font-size: 0.9375rem;
}
/* The display rules above beat the UA [hidden] rule — the controller's
   hidden toggles would stay visible without the guard (same pattern as
   .rate-editor__newcat[hidden]). */
.selected-addons__list[hidden],
.selected-addons__empty[hidden],
.selected-addons__subtotal[hidden],
.selected-addons__skip[hidden] {
  display: none;
}
/* HMS-611 — Figma draws the card as a tall panel: flex column so Skip pins to
   its foot, and a filled neutral button (not a bare link) at the bottom. */
.selected-addons {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.selected-addons__skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-lowered);
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-size: 0.875rem;
  box-sizing: border-box;
}

/* Summary sidebar card (guest-details step). */
.funnel-summary__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--wa-border-radius-m);
  display: block;
}
.funnel-summary__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--wa-color-text-quiet);
  background: var(--wa-color-surface-lowered);
}

/* Stacked below 64rem the sidebar goes full width and the 16:10 placeholder
   balloons to ~330px of empty grey — taller than the summary beneath it. Cap
   the empty state; a real photo still gets the aspect ratio. */
@media (max-width: 64rem) {
  .funnel-summary__photo--placeholder { aspect-ratio: auto; height: 8rem; }
}
.funnel-summary__hotel { margin: 0.75rem 0 0.25rem; font-size: 1.125rem; color: var(--wa-color-text-normal); }
.funnel-summary__stay { margin: 0 0 1rem; font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
.funnel-summary__policy { margin-top: 1rem; border-top: 1px solid var(--wa-color-surface-border); padding-top: 1rem; }
.funnel-summary__policy h3 { margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--wa-color-text-normal); }
.funnel-summary__policy p { margin: 0; font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
/* The sidebar tier list is the same partial the review/cancel screens use,
   sized down to the sidebar's quiet type. */
.funnel-summary__policy .booking-review__tiers { margin-top: 0.5rem; font-size: 0.8125rem; }
.funnel-summary__policy .booking-review__tier-value { font-weight: 400; }

/* Price breakdown rows, shared by both sidebars. */
.funnel-price { margin: 0; padding: 0; }
.funnel-price__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}
.funnel-price__row dt, .funnel-price__row dd { margin: 0; }
.funnel-price__row dd { color: var(--wa-color-text-normal); white-space: nowrap; }
/* The flex rule above beats the UA [hidden] rule — the discount row is
   rendered hidden when the quote has none so room-select can unhide it. */
.funnel-price__row--discount[hidden] { display: none; }
.funnel-price__row--discount dd { color: var(--wa-color-success-on-quiet); }
.funnel-price__row--total {
  border-top: 1px solid var(--wa-color-surface-border);
  margin-top: 0.375rem;
  padding-top: 0.75rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}
.funnel-price__unavailable { font-size: 0.875rem; color: var(--wa-color-text-quiet); }
.funnel-charged-note { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--wa-color-text-quiet); }

/* Review & Pay summary grid. */
/* HMS-500 — row gap halves: 1rem between label/value rows read as an extra
   blank line on the confirmation the guest is signing off on. The columns
   are independent stacks — a shared grid row is as tall as its tallest cell,
   which stranded a visible gap under the neighbouring short cell. */
.funnel-summary-grid { display: flex; gap: 0 2rem; margin: 0; }
.funnel-summary-grid__col { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.funnel-summary-grid__cell dt { font-size: 0.8125rem; color: var(--wa-color-text-quiet); margin-bottom: 0.25rem; }
.funnel-summary-grid__cell dd { margin: 0; color: var(--wa-color-text-normal); font-size: 0.9375rem; }
/* HMS-505 — the composed requests carry a newline between each group
   (accessibility, bed preferences, free text). Without pre-line the dd
   collapses them into one unseparated run-on. */
.funnel-summary-grid__requests { white-space: pre-line; }
/* Same collapse on the confirmation page's Special Requests block. */
.booking-confirmation__special-requests p { white-space: pre-line; }
.funnel-summary-grid__quiet { color: var(--wa-color-text-quiet); font-size: 0.8125rem; }
@media (max-width: 40rem) { .funnel-summary-grid { flex-direction: column; gap: 0.5rem; } }

/* Payment section — secured note and the not-configured fallback. */
.funnel-secure, .funnel-payment-off {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--wa-color-brand-fill-quiet);
  border-left: 3px solid var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-s);
  font-size: 0.8125rem;
  color: var(--wa-color-brand-on-quiet);
}
.funnel-payment-off p { margin: 0 0 0.25rem; color: var(--wa-color-text-normal); font-size: 0.9375rem; }
.funnel-payment-off__note { font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
.funnel-payment-off__help {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-color-brand-fill-loud);
}

/* Back / Continue bar at the foot of every step. */
.funnel-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}
.funnel-actions__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-size: 0.875rem;
}
.funnel-actions__continue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

/* P3 fix — the "Who is billing this stay?" legend straddles the fieldset
   border by design, and at 390px its text collided with the border instead
   of wrapping. Floating the legend pulls it fully inside the box where it
   wraps like normal text. */
.booking-review__billing { min-inline-size: 0; }
.booking-review__billing-legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
  white-space: normal;
}
.booking-review__billing-option { clear: both; }

/* HMS-370 — Figma 516:6441's "Room held exclusively for you" strip. The banner
   only renders while a real RoomBlockHold is live; success-loud is the green
   the frame draws. The pill keeps the countdown visually pinned right. */
.funnel-hold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-success-fill-loud);
  color: var(--wa-color-success-on-loud);
}

.funnel-hold__text {
  min-width: 0;
}

.funnel-hold__title {
  margin: 0;
  font-weight: 700;
  font-size: 0.9375rem;
}

.funnel-hold__subtitle {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  opacity: 0.9;
}

.funnel-hold__cta {
  flex-shrink: 0;
  color: var(--wa-color-success-on-loud);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}

/* HMS-881 — My Bookings' manual release. A ghost button so it stays visually
   secondary to the Finish-booking CTA while reading as its own action. */
.funnel-hold__release-form {
  flex-shrink: 0;
  margin: 0;
}

.funnel-hold__release {
  padding: 0.375rem 0.875rem;
  border: 1px solid currentColor;
  border-radius: var(--wa-border-radius-m);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
  cursor: pointer;
}

.funnel-hold__release:hover {
  background: rgb(255 255 255 / 0.18);
}

.funnel-hold__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--wa-color-success-on-loud);
  color: var(--wa-color-success-fill-loud);
  font-weight: 600;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .funnel-hold {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
  }

  /* The countdown pill joins the row so the title and subtitle get the
     banner's full width instead of wrapping in a narrow column. */
  .funnel-hold__pill { order: -1; }

  /* Keep the refund value pinned right and give the policy label the
     remaining width — otherwise a 390px row breaks "check-in" at the
     hyphen. */
  .booking-review__tier-value { white-space: nowrap; }
}

/* ===== HMS-406 — room selection (funnel step 1) =====
   One card per sellable RoomBlock, radio inside the label so the whole card
   is the click target. :has() reads the radio state without JS. */

.room-select {
  display: grid;
  gap: 0.75rem;
  /* HMS-1414 — equalize the row tracks to the tallest card so a block with
     fewer meta lines doesn't render a shorter card. */
  grid-auto-rows: 1fr;
}

/* HMS-1414 — Web Awesome's native.css sizes label:has(input[type=radio])
   to fit-content (0,1,2), which shrink-wrapped every card to its own
   content: uneven widths that made the selected card look bigger. The
   child combinator's 0,2,0 wins without !important. */
.room-select > .room-select-card {
  width: 100%;
}

.room-select-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  cursor: pointer;
}

/* Selected: brand border + the same quiet brand tint the info notes use. */
.room-select-card:has(.room-select-card__radio:checked) {
  border-color: var(--wa-color-brand);
  background: var(--wa-color-brand-fill-quiet);
}

/* Sold out for the stay: dimmed and unclickable; the disabled radio keeps it
   out of the tab order too. */
.room-select-card--sold-out {
  opacity: 0.55;
  cursor: not-allowed;
}

.room-select-card__radio {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin: 0;
}

.room-select-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.room-select-card__name {
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.room-select-card__meta {
  font-size: 0.85rem;
  color: var(--wa-color-text-quiet);
}

/* "Sold out" reads as a status, not an error, but it is the one line on the
   card that must not be mistaken for availability. */
.room-select-card__meta--sold-out {
  color: var(--wa-color-danger-fill-loud);
}

.room-select-card__price {
  font-weight: 600;
  white-space: nowrap;
  color: var(--wa-color-text-normal);
}

.room-select-card__price-suffix {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--wa-color-text-quiet);
}

/* HMS-1547 — a stay priced at more than one nightly rate stacks each rate
   with its day bucket ("$210.00 Sun–Thu", "$410.00 Fri–Sat") in the price
   column: one segment per line so the list never squeezes the room name, and
   the "per night" suffix drops to its own line under them. */
.room-select-card__price--segments {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.35;
}

/* Each segment is one unbreakable run — a wrap inside "$210.00 Sun–Thu"
   would split the rate from the days it prices. */
.room-select-card__segment {
  white-space: nowrap;
}

@media (max-width: 40rem) {
  /* The price drops under the body rather than squeezing the room name. */
  .room-select-card { flex-wrap: wrap; }
  /* Under the left-aligned body the stacked rates flush left too — a
     right-pinned column reads as a stray under a full-width row. */
  .room-select-card__price--segments { align-items: flex-start; }
}

/* ===== HMS-559 — roommate preferences + suggested matches (Figma 516:6021) =====
   The region lives INSIDE the roommate funnel-card, below the availability
   note: a top border divides it from the toggle, and the two columns are
   the guest's own preferences and the candidate cards. */

.roommate-panel {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wa-color-surface-border);
}

.roommate-panel__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .roommate-panel__grid { grid-template-columns: 1fr; }
}

/* Each column is its own bordered card — the preferences on the left, the
   candidate list on the right — per Figma 516:6021. */
.roommate-prefs,
.roommate-suggestions {
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  padding: 1rem;
  background: var(--wa-color-surface-default);
}

.roommate-panel__title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* Preference groups: borderless fieldsets, the legend a small bold label,
   options stacked like the billing-kind options on the review screen. */
.roommate-prefs__group {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}

.roommate-prefs__group legend {
  padding: 0;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* Options sit side-by-side on one row (wrapping only when too narrow) rather
   than one per line: inline-flex takes each label out of the block flow, and
   the right margin is the gap between options. */
.roommate-prefs__group .booking-review__billing-option {
  clear: none;
  display: inline-flex;
  flex-direction: row;
  margin-right: 0.5rem;
  padding: 0.25rem 0;
}

.roommate-suggestions__sub {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.roommate-suggestions__empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

/* Candidate card — initials avatar left, name/group/chips middle, actions
   right; wraps under 640px where the action row drops below the body. */
.roommate-suggestion-card {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
}

.roommate-suggestion-card + .roommate-suggestion-card {
  margin-top: 0.75rem;
}

.roommate-suggestion-card__avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
}

.roommate-suggestion-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.roommate-suggestion-card__name {
  margin: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--wa-color-text-normal);
}

.roommate-suggestion-card__group {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.roommate-suggestion-card__chips {
  margin: 0.375rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Small pill: brand-tinted, quiet text. */
.roommate-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Same-dates match reads as good news, not as another brand chip. */
.roommate-chip--match {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

/* The Decline + Send Request pair sits in a row at the BOTTOM of the card,
   right-aligned — the width:100% + flex-wrap on the card drops it onto its
   own line below the body. */
.roommate-suggestion-card__actions {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Decline: light/subtle, the same quiet treatment as the funnel back button. */
.roommate-suggestion-card__decline {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
  color: var(--wa-color-text-normal);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

/* Send Request: the dark accent button, the funnel's primary action. */
.roommate-suggestion-card__send {
  padding: 0.375rem 0.75rem;
  border: none;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

/* HMS-822 — the preference note the roommate-prefs controller toggles:
   match reads affirmative, differs reads quiet. */
.roommate-suggestion-card__pref-note {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.roommate-suggestion-card__pref-note[data-tone="match"] {
  color: var(--wa-color-success-on-quiet, var(--wa-color-success-60, #1a7f37));
}

.roommate-suggestion-card__pref-note[data-tone="differs"] {
  color: var(--wa-color-text-quiet, #6b7280);
  font-weight: 400;
}

@media (max-width: 640px) {
  /* On phones the column can't hold options side-by-side; stacked rows are
     the better tap target than ragged partial wraps. */
  .roommate-prefs__group .booking-review__billing-option {
    display: flex;
    margin-right: 0;
  }
  .roommate-suggestion-card { flex-wrap: wrap; }
  .roommate-suggestion-card__actions {
    flex-direction: row;
    width: 100%;
  }
  .roommate-suggestion-card__actions button { flex: 1; }
}

/* HMS-576 — Figma 516:6021: the consent line reads fully bold (the locale
   string embeds a <strong>, so a uniform 700 keeps both parts matching); the
   checkbox takes the navy brand accent. The text wraps naturally — the funnel
   column never gets wide enough for one line. */
.funnel-check--sms-consent {
  align-items: flex-start;
}
.funnel-check--sms-consent input[type="checkbox"] {
  accent-color: var(--wa-color-brand-fill-loud);
  margin-top: 0.1875rem;
}
.funnel-check--sms-consent > span {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--wa-color-text-normal);
}

/* HMS-648 — add-on edit rows: stacked label text, qty control right */
.add-ons-form { display: flex; flex-direction: column; gap: var(--wa-space-s, 0.75rem); }

.add-on-row__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-m, 1rem);
  font-weight: 400;
  cursor: pointer;
  margin: 0;
}

.add-on-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.add-on-row__name {
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.add-on-description {
  font-size: var(--wa-font-size-s, 0.8125rem);
  font-weight: 400;
  color: var(--wa-color-text-quiet);
}

.add-on-price {
  font-size: var(--wa-font-size-s, 0.8125rem);
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.add-on-row__label input[type="number"] {
  width: 4.5rem;
  flex: none;
}

.add-on-row__remove {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-xs);
  font-size: var(--wa-font-size-s, 0.8125rem);
  color: var(--wa-color-text-quiet);
}

/* The qty field shares .funnel-field__input's chrome but must not take the
   full flex width inside .addon-card — cap it and keep the body flexible. */
.addon-card__qty {
  width: 4.5rem;
  flex-shrink: 0;
  text-align: center;
}

.addon-card--sold-out {
  opacity: 0.6;
  cursor: not-allowed;
}

.addon-card--sold-out .addon-card__qty {
  opacity: 0.7;
}

.addon-card__sold-out-badge {
  flex-shrink: 0;
  font-size: var(--wa-font-size-xs);
  font-weight: 600;
  color: var(--wa-color-danger-on-quiet, #b3261e);
  background: var(--wa-color-danger-fill-quiet, #fdeceb);
  border-radius: var(--wa-border-radius-pill, 999px);
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}

/* HMS-946 — the modify page uses .add-on-row markup; sold-out rows get the
   same dimmed, non-interactive treatment as the funnel's addon-cards. */
.add-on-row--sold-out {
  opacity: 0.6;
}

.add-on-row--sold-out .add-on-row__label {
  cursor: not-allowed;
}

.add-on-row__sold-out {
  flex-shrink: 0;
  font-size: var(--wa-font-size-xs);
  font-weight: 600;
  color: var(--wa-color-danger-on-quiet, #b3261e);
  background: var(--wa-color-danger-fill-quiet, #fdeceb);
  border-radius: var(--wa-border-radius-pill, 999px);
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}
/* HMS-1368 — the guest-identity confirm-or-clear card. Returning accounts
   are asked before their saved details fill the form; the summary line names
   exactly what "use my saved details" would enter. */
.guest-details-choice__summary {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}
.guest-details-choice__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.guest-details-choice__confirm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.guest-details-choice__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
  color: var(--wa-color-text-normal);
  font-size: 0.875rem;
  text-decoration: none;
}
/* HMS-1368/1369 — the asterisk marking fields the step enforces. */
.funnel-field__required { color: var(--wa-color-danger-fill-loud); }