/* 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__card {
  min-height: 2.5rem;
}

.payment-token__error {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-danger-fill-loud);
}

.payment-token__authorize-fields {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.payment-token__authorize-fields label {
  display: block;
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
}

.payment-token__input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 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;
}

.payment-token__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* 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);
}
.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;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
}
.booking-confirmation__reference-label { color: var(--wa-color-text-quiet); font-size: 0.8125rem; }
.booking-confirmation__reference-value {
  color: var(--wa-color-brand);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

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

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

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

@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 — bottom padding keeps Total/actions reachable above it. */
@media (max-width: 48rem) {
  .booking-confirmation { padding-bottom: 6.5rem; }
}

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

.booking-confirmation__add-ons li {
  margin-bottom: 0.25rem;
}

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

.booking-overflow__close {
  margin-left: auto;
  color: var(--wa-color-text-quiet);
  font-size: 0.9375rem;
}

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

.funnel__sidebar { position: sticky; top: 1rem; }
@media (max-width: 64rem) { .funnel__sidebar { position: static; order: -1; } }

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

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

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

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

/* Toggle cards (SMS opt-in, roommate matching). */
.funnel-toggle-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-m);
}
.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;
}
@media (max-width: 40rem) { .funnel-checks__grid { grid-template-columns: 1fr; } }

.funnel-wcag, .funnel-info-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  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;
}
.selected-addons__skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  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); }

/* 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; }
.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. */
.funnel-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin: 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; }
.funnel-summary-grid__quiet { color: var(--wa-color-text-quiet); font-size: 0.8125rem; }
@media (max-width: 40rem) { .funnel-summary-grid { grid-template-columns: 1fr; } }

/* Payment section — secured note and the not-configured fallback. */
.funnel-secure, .funnel-payment-off {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  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 { align-items: center; }
.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__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__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;
}

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

@media (max-width: 40rem) {
  /* The price drops under the body rather than squeezing the room name. */
  .room-select-card { flex-wrap: wrap; }
}