/* 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,
.modify-booking__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-normal);
  color: var(--wa-color-brand-on-normal);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* HMS-247 — sold-out state: the waitlist door plus the routed overflow
   destinations. The option list deliberately mirrors .waitlist-alt__* on the
   waitlist status screen — same destinations, same card treatment, so a guest
   moving between the two surfaces reads them identically. */

.booking-review__overflow {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wa-color-surface-border);
}

.booking-review__sold-out-note {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* Same fill as .booking-review__submit — it is the primary action on this
   state. Kept on its own rule rather than joining the selector above because
   the button_to wrapper means a shared margin-top would double up. */
.booking-review__waitlist {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-normal);
  color: var(--wa-color-brand-on-normal);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.booking-review__overflow-heading {
  margin: 1.5rem 0 0.25rem;
  font-size: 1rem;
  color: var(--wa-color-text-normal);
}

.booking-review__overflow-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.booking-review__overflow-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  text-decoration: none;
}

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

.booking-review__overflow-note {
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
  text-align: end;
}

.booking-review__overflow-empty {
  margin: 0.75rem 0 0;
  color: var(--wa-color-text-quiet);
}

/* Confirmation — Figma 516:6569. */

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

/* The code the guest reads out at the front desk, so it is the loudest thing on the
   page after the heading. */
.booking-confirmation__reference {
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--wa-color-brand-border-normal);
  border-radius: var(--wa-border-radius-l);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-text-normal);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

.booking-confirmation__details {
  margin: 0;
}

.booking-confirmation__details > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wa-color-surface-border);
}

.booking-confirmation__details > div:last-child {
  border-bottom: none;
}

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

.booking-confirmation__detail-value {
  margin: 0;
  color: var(--wa-color-text-normal);
  font-weight: 600;
  text-align: left;
}

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

/* Wraps rather than scrolls: on a 390px phone four 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;
}

/* Detail rows stack by default so labels and values do not compete on phones.
   Wider screens upgrade the rows to a side-by-side layout. */
@media (max-width: 40rem) {
  .booking-review,
  .booking-confirmation {
    padding: 1.5rem 1rem 2rem;
  }
}

@media (min-width: 40rem) {
  .booking-confirmation__details > div {
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
  }

  .booking-confirmation__detail-value {
    text-align: right;
  }
}

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