/* My Bookings — Figma 516:6667.

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

.my-bookings {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* The header is a flex row so the two actions sit right of the title on desktop
   and drop under it on phones. */
.my-bookings__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.my-bookings__actions {
  display: flex;
  gap: 0.5rem;
}

/* The roommate and offer notices share one look — a quiet brand band with the
   sentence growing and the action pushed right — so --roommate/--offer carry no
   rules of their own. */
.my-bookings__notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-block: 0.75rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-text-normal);
}

.my-bookings__notice p {
  flex: 1;
  margin: 0;
}

/* The tab row is the only navigation on the page, so it keeps the hairline the
   list sits below. HMS-1435 — overflow-x lets a too-wide tab set scroll at any
   width (long translations, mid-size windows) instead of cropping. */
.my-bookings__tabs {
  display: flex;
  gap: 1.25rem;
  margin-block: 1rem;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  overflow-x: auto;
}

.my-bookings__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-block: 0.5rem;
  color: var(--wa-color-text-quiet);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  /* A tab's icon + label never wrap mid-tab; a wrapped tab reads as two. */
  white-space: nowrap;
}

.my-bookings__tab--active {
  color: var(--wa-color-text-normal);
  border-bottom-color: var(--wa-color-brand);
  font-weight: 600;
}

.my-bookings__title {
  margin: 0;
  font-size: 1.5rem;
  color: var(--wa-color-text-normal);
}

.my-bookings__subtitle {
  margin: 0.25rem 0 1.5rem;
  color: var(--wa-color-text-quiet);
}

.my-bookings__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.booking-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
}

.booking-row__thumbnail,
.booking-row__thumbnail img,
.booking-row__placeholder {
  width: 7.5rem;
  height: 5rem;
  border-radius: var(--wa-border-radius-s);
  object-fit: cover;
  flex-shrink: 0;
}

.booking-row__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-quiet);
  font-weight: 600;
}

.booking-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

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

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

/* HMS-255 — "Room N of group REF" sits between the stay line and the total as
   a fact about the booking, so it takes the stay line's quiet styling rather
   than body size. */
.booking-row__group {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

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

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

/* HMS-255 — "Your share" is the roommate line's second half, so it matches its
   quiet styling and tightens the gap the roommate margin-bottom leaves. */
.booking-row__roommate-share {
  margin: -0.5rem 0 0.75rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.booking-row__add-ons {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.booking-row__add-ons li {
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-s);
  padding: 0.125rem 0.375rem;
}

.booking-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.booking-row__status {
  padding: 0.25rem 0.625rem;
  border-radius: var(--wa-border-radius-s);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

.booking-row__status--confirmed,
.booking-row__status--checked_in {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

.booking-row__status--pending {
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
}

.booking-row__status--cancelled {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

/* Past is a neutral fact, not a failure — it takes the base badge's neutral
   tokens rather than the danger tone of --cancelled. */
.booking-row__status--past {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

/* A pending roommate request is a decision the attendee owes, so it is the only
   strip inside the card with a tint of its own. */
.booking-row__request {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem;
  margin-block: 0.5rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-warning-fill-quiet);
}

.booking-row__request-body {
  flex: 1 1 auto;
  min-width: 0;
}

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

.booking-row__request-body p:last-child {
  margin-bottom: 0;
}

.booking-row__request-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-text-normal);
  font-size: 0.75rem;
  font-weight: 600;
  flex: none;
}

.booking-row__request-badge {
  padding: 0.125rem 0.375rem;
  border-radius: var(--wa-border-radius-s);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
}

.booking-row__request-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* button_to emits a real <button> inside a wrapping <form>, and the class lands
   on the button itself — so these target the class directly, never a descendant
   (the .cancel-booking__confirm mistake, above). */
.booking-row__request-accept {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--wa-color-success-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.booking-row__request-decline {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--wa-color-danger-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-danger-on-quiet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Decline-with-reason form: optional input + button on one row, wraps narrow. */
.booking-row__request-decline-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.booking-row__request-reason {
  min-width: 8rem;
  max-width: 14rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font: inherit;
}

.booking-row__reference {
  margin: 0;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
}

/* HMS-1467 — every empty tab gets the full empty state: a quiet booking icon,
   a title naming the tab, and one supporting line, centred in the area. */
.my-bookings__empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--wa-color-text-quiet);
}

.my-bookings__empty-icon {
  display: block;
  margin: 0 auto 0.75rem;
  font-size: 2rem;
  color: var(--wa-color-text-quiet);
}

.my-bookings__empty-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.my-bookings__empty-body {
  margin: 0 0 1rem;
}

/* The upsell card is the empty state's shape with the copy left-aligned and the
   action on the trailing edge — it is a sales moment, not a dead end. */
.my-bookings__upsell {
  margin-top: 1.5rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  text-align: left;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
}

.my-bookings__upsell-text {
  flex: 1 1 15rem;
}

.my-bookings__upsell-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.my-bookings__upsell-copy {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

/* The CTA rides the flex row's trailing edge via justify-content above, and
   drops to a full-width line under the phone breakpoint (see ≤40rem block) —
   a float here would escape the card entirely because nothing clears it. */

/* Waitlist — Figma 516:6667. The card is the booking-row shape with a status
   pill and a right meta column of quiet facts. */

.waitlist-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
}

.waitlist-card__thumbnail,
.waitlist-card__thumbnail img {
  width: 6rem;
  height: 6rem;
  border-radius: var(--wa-border-radius-s);
  object-fit: cover;
  flex-shrink: 0;
}

/* The waitlist placeholder is the booking-group initials box grown to the
   waitlist photo's square. */
.waitlist-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-quiet);
  font-weight: 600;
  flex-shrink: 0;
}

.waitlist-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.waitlist-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.waitlist-card__hotel {
  margin: 0;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

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

.waitlist-card__status {
  padding: 0.25rem 0.625rem;
  border-radius: var(--wa-border-radius-s);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
}

/* A settled entry reads neutral, not amber — the warning tone belongs to a
   status that can still change. */
.waitlist-card__status--settled {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

.waitlist-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
  flex-shrink: 0;
}

.waitlist-card__position,
.waitlist-card__priority,
.waitlist-card__added {
  margin: 0;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
  text-align: right;
}

.waitlist-card__position {
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* Leaving the waitlist is destructive for the spot, so it takes the danger
   outline — and, like the request buttons, the class sits on the button_to
   <button> itself. */
.waitlist-card__leave {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--wa-color-danger-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-danger-on-quiet);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

/* Group card — Figma 516:6667. One bordered card holds the header band, the
   room rows, and the footer band; the hairline between rows is the only divider
   inside. */

.booking-group {
  margin-block: 1rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-l);
  overflow: hidden;
  list-style: none;
}

.booking-group__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--wa-color-neutral-fill-quiet);
}

.booking-group__count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--wa-color-brand);
  color: var(--wa-color-brand-on-loud);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

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

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

.booking-group__title-block {
  flex: 1 1 auto;
  min-width: 0;
}

.booking-group__totals {
  display: flex;
  gap: 1rem;
  margin-left: auto;
}

.booking-group__totals > div {
  text-align: right;
}

.booking-group__totals dt {
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

.booking-group__totals dd {
  margin: 0;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.booking-group__combined dd {
  font-weight: 700;
}

.booking-group__room {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}

.booking-group__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--wa-color-brand);
  color: var(--wa-color-brand-on-loud);
  font-size: 0.75rem;
  font-weight: 600;
  flex: none;
}

.booking-group__thumbnail,
.booking-group__photo {
  width: 5rem;
  height: 3.5rem;
  border-radius: var(--wa-border-radius-s);
  object-fit: cover;
  flex-shrink: 0;
}

/* No photo, no initials box: the room photo's box with the placeholder look of
   .booking-row__placeholder. */
.booking-group__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 3.5rem;
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-quiet);
  font-weight: 600;
  flex-shrink: 0;
}

.booking-group__room-body {
  flex: 1 1 auto;
  min-width: 0;
}

.booking-group__room-body h3 {
  margin: 0;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.booking-group__room-body p {
  margin: 0.125rem 0 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.booking-group__room-total {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.booking-group__room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.booking-group__room-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.booking-group__room-meta p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
  text-align: right;
}

.booking-group__linked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: var(--wa-color-surface-lowered);
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

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

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

.booking-group__footer-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* HMS-1435 — when the tabs can overflow, the right-edge fade is the cue that
   more tabs sit off screen. Same mask .hotel-table-wrap carries: 55% opacity,
   so the faded tab stays readable rather than vanishing. */
@media (max-width: 48rem) {
  .my-bookings__tabs {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), rgba(0, 0, 0, 0.55));
    mask-image: linear-gradient(to right, black calc(100% - 28px), rgba(0, 0, 0, 0.55));
  }
}

/* The row stacks below the phone breakpoint: photo on top, the status badge
   overlaid on its corner, and the meta row full-width under the body. */
@media (max-width: 40rem) {
  /* Mobile card: photo bleeds to the card's top corners (it sits inside the
     row's 1rem padding, so it pulls itself out) and the status pill overlays
     its top-right corner like the Figma badge. */
  .booking-row {
    position: relative;
    flex-direction: column;
  }

  .booking-row__thumbnail {
    width: calc(100% + 2rem);
    height: 9rem;
    margin: -1rem -1rem 0;
    border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0;
    overflow: hidden;
  }

  /* The base rule pins the img/placeholder to 7.5rem×5rem — the wrapper alone
     would stretch around a thumbnail-sized hole. */
  .booking-row__thumbnail img,
  .booking-row__placeholder {
    width: 100%;
    height: 100%;
  }

  /* HMS-1431 — scoped to pills INSIDE a .booking-row: _booking_group reuses
     the same classes in .booking-group__room-meta, where nothing establishes
     a containing block, so an unscoped rule pinned the pill to top/right
     0.75rem of the DOCUMENT — on top of the header avatar. Group rows keep
     their desktop treatment: a static pill in the meta column. */
  .booking-row .booking-row__status {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
  }

  .booking-row__meta {
    align-items: flex-start;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }

  /* Header actions share one full-width row under the title: two equal halves
     like the mobile design, not stacked and not squeezed. */
  .my-bookings__actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .my-bookings__actions wa-button {
    flex: 1;
  }

  /* HMS-1435 — five tabs no longer squeeze into equal slivers that crop their
     labels: each keeps its natural width and the row (overflow-x on the base
     rule) scrolls sideways. The active pill stays, now with inline padding so
     the fill reads as a chip instead of a tight highlight. */
  .my-bookings__tabs {
    gap: 0.25rem;
  }

  .my-bookings__tab {
    flex: 0 0 auto;
    justify-content: center;
    padding-inline: 0.625rem;
    border-bottom: none;
    margin-bottom: 0;
  }

  .my-bookings__tab--active {
    background: var(--wa-color-neutral-fill-quiet);
    border-radius: var(--wa-border-radius-s);
  }

  /* The notice sentence and its button stack rather than the button clipping.
     HMS-1433 — flex-basis:100% pushed the sentence to a second line UNDER the
     icon; basis 0 lets it share the icon's row so the icon leads the message
     (flex-start keeps it on the first line, not mid-box). */
  .my-bookings__notice {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .my-bookings__notice p {
    flex: 1;
    min-width: 0;
  }

  /* The request strip stacks: avatar + badge on top, the decision buttons full
     width below. */
  .booking-row__request {
    flex-direction: column;
  }

  .booking-row__request-actions {
    width: 100%;
  }

  /* button_to/form_with wrap their controls in a <form>; stretch the form so
     the decision controls stack full width. */
  .booking-row__request-actions form {
    flex: 1 1 100%;
  }

  .booking-row__request-actions form > button,
  .booking-row__request-actions form input[type="submit"],
  .booking-row__request-reason {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .waitlist-card,
  .booking-group__room {
    flex-wrap: wrap;
  }

  .waitlist-card__meta {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }

  .waitlist-card__meta p {
    text-align: left;
  }

  /* The totals become three even columns instead of trailing the header. */
  .booking-group__header {
    flex-wrap: wrap;
  }

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

  .booking-group__totals > div {
    flex: 1;
    text-align: left;
  }

  .booking-group__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .booking-group__footer-actions {
    width: 100%;
  }

  .booking-group__footer-actions wa-button {
    flex: 1 1 100%;
  }

  /* The upsell CTA drops to its own full-width line below the copy. */
  .my-bookings__upsell wa-button {
    flex: 1 1 100%;
  }

  /* HMS-1456 — the external panel's report CTA stacks full-width under the
     heading, matching the upsell CTA's treatment. */
  .my-bookings__external-header wa-button {
    flex: 1 1 100%;
  }
}

/* Cancel Booking — Figma 516:6953.

   Shares this file with My Bookings because it is the same journey and the same
   two BEM blocks would otherwise be split across files for no reason. */

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

/* The rebuilt screen is one centered white card on the page's quiet background;
   the block above only centers and pads. */
.cancel-booking__card {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
}

.cancel-booking__title {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  color: var(--wa-color-text-normal);
  text-align: center;
}

.cancel-booking__subtitle {
  margin: 0.25rem 0 1.5rem;
  color: var(--wa-color-text-quiet);
  text-align: center;
}

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

/* The fee callout is the modify price box's shape: the same quiet gray, the
   amount carrying the row's weight. surface-LOWERED, not raised — raised is
   white on this theme, which left the box invisible on the white card. */
.cancel-booking__fee-callout {
  padding: 0.875rem 1rem;
  background: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-m);
  margin-bottom: 1.5rem;
}

/* HMS-1458 — the callout's three <p>s are ONE fact (label / amount /
   deadline), not three paragraphs. The spacing was never UA margins:
   Web Awesome's native.css zeroes p margins then re-adds
   margin-block-end: var(--wa-content-spacing) (24px) on every p with a
   following sibling, and body leading is 1.6 — so the lines sat on a
   ~50px pitch and read as disconnected rows. QA's 2026-11-09 "not fixed"
   screenshot shows exactly that pre-fix pitch. Zero the margins, tighten
   leading to condensed inside the callout only, and set one consistent
   4px gap so the visible space between the text lands inside the
   ticket's 8–12px band (~11–12px ink-to-ink). Family, size and weight
   are unchanged — only the stacking got tighter. */
.cancel-booking__fee-callout > p {
  margin: 0;
  line-height: var(--wa-line-height-condensed);
}

.cancel-booking__fee-callout > p + p {
  margin-top: var(--wa-space-2xs);
}

.cancel-booking__fee-amount {
  font-weight: 700;
}

/* The note is the file's warning band (the request strip's tokens) grown a left
   accent so it reads as a callout rather than a status. */
.cancel-booking__note {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--wa-color-warning-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
  margin-bottom: 1.5rem;
}

.cancel-booking__sure {
  margin: 0 0 1.5rem;
  color: var(--wa-color-text-normal);
}

.cancel-booking__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* button_to emits a real <form><button>, so this styles the button rather than a
   <wa-button>. Danger tone because it is the destructive half of the pair, and it
   is deliberately NOT the first thing the eye lands on — Keep booking sits beside
   it at equal size.
   THE SELECTOR IS THE CLASS ITSELF, not a descendant. button_to puts the class on the
   BUTTON, not on the wrapping form, so `.cancel-booking__confirm button` matched
   nothing and this whole rule was dead — measured, the shipped button computed
   background rgb(47, 50, 63), the dark default, on the one destructive control in the
   attendee portal. */
.cancel-booking__confirm {
  padding: 0.75rem 1rem;
  border: 1px solid var(--wa-color-danger-fill-loud);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-danger-fill-loud);
  color: var(--wa-color-danger-on-loud);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.booking-row__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* HMS-625 — the review status line that replaces the vanished Leave a Review
   button. Sits inside the actions row as a flex item; takes the row's width. */
.booking-row__review {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.booking-row__review p {
  margin: 0;
}

/* HMS-1051 — the pending state stacks: a badge line, then the two actions on
   their own row below the buttons, so nothing crowds together. */
.booking-row__review--pending {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.booking-row__review-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--wa-border-radius-s);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
}

.booking-row__review-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* The two pending actions are small outlined controls, not bare text — the
   click targets have to read as separate, deliberate actions. */
.booking-row__review-action {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.booking-row__review-action:hover {
  background: var(--wa-color-surface-lowered);
  text-decoration: none;
}

.booking-row__review-action--danger {
  color: var(--wa-color-danger-on-quiet);
}

.booking-row__review-action--danger:hover {
  background: var(--wa-color-danger-fill-quiet);
}

/* button_to wraps its button in a form; keep it inert inside the flex row. */
.booking-row__review form {
  display: contents;
}

/* Modify Booking — Figma 516:6873. A main card and a sidebar card on the page's
   quiet background; the old single-column summary and preview markup is gone. */

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

.modify-booking__layout {
  display: grid;
  grid-template-columns: 1fr 19rem;
  gap: 1.25rem;
  align-items: start;
}

.modify-booking__main,
.modify-booking__sidebar {
  padding: 1.25rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
}

.modify-booking__title {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  color: var(--wa-color-text-normal);
}

/* The sidebar h2 was unstyled, so it fell back to the UA ~24px — nearly the
   page title's size for a supporting card. */
.modify-booking__sidebar-title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--wa-color-surface-border);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.modify-booking__subtitle {
  margin: 0.25rem 0 1.5rem;
  color: var(--wa-color-text-quiet);
}

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

/* The room list ends flush against a card edge in the markup, so the reminder
   carries the section gap on its own top — without it the heading touched the
   last room row (measured 0px). */
.modify-booking__reminder {
  margin: 1.5rem 0 0.75rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

/* The two date inputs sit side by side; the no-JS submit button spans the row
   beneath them, kept small and quiet because the JS flow is the real path. */
.modify-booking__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.modify-booking__dates h2 {
  grid-column: 1 / -1;
}

.modify-booking__price-box {
  padding: 0.875rem 1rem;
  background: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-m);
  margin-bottom: 1.5rem;
}

.modify-booking__price-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}

.modify-booking__price-row > span:first-child {
  color: var(--wa-color-text-quiet);
}

.modify-booking__price-row > span:last-child {
  margin: 0;
  color: var(--wa-color-text-normal);
}

.modify-booking__price-row--total > span:last-child {
  font-weight: 700;
}

.modify-booking__difference {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--wa-color-surface-border);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  font-weight: 700;
}

.modify-booking__error {
  color: var(--wa-color-danger-on-quiet);
  background: var(--wa-color-danger-fill-quiet);
  padding: 0.75rem 1rem;
  border-radius: var(--wa-border-radius-m);
}

/* HMS-1420 — the labels stack in a grid so Web Awesome's native.css rule
   `label:has(input[type=radio]) { display: inline-flex; width: fit-content }`
   (0,1,2) can no longer shrink-wrap each card to its own content: the child
   combinator's 0,2,0 wins without !important, grid items blockify to flex,
   and grid-auto-rows: 1fr resolves every row to the tallest card — the same
   fix HMS-1414 applied to the funnel's .room-select. gap replaces the old
   sibling margin, which would double-space grid items. */
.modify-booking__room-list {
  display: grid;
  gap: 0.5rem;
  grid-auto-rows: 1fr;
}

.modify-booking__room-list > .modify-booking__room-option {
  width: 100%;
}

/* The room options are bordered card rows: radio, name, badge, and the price
   riding the trailing edge. The brand tint follows only the checked radio
   (Current arrives checked); the --current badge still marks which room the
   guest has, but it no longer tints the card. */
.modify-booking__room-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  cursor: pointer;
}

/* HMS-1420 — name + badges share one flex line so the phone grid can place
   them as a unit (row 1 of the text column) with the price below on row 2.
   On desktop the heading is simply a flex item inside the option row. */
.modify-booking__room-heading {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}

.modify-booking__room-name {
  font-weight: 600;
}

.modify-booking__room-price {
  font-weight: 600;
  flex: none;
  white-space: nowrap;
}

.modify-booking__room-option > :last-child {
  margin-inline-start: auto;
  color: var(--wa-color-text-normal);
}

.modify-booking__room-option:has(:checked) {
  border-color: var(--wa-color-brand);
  background: var(--wa-color-brand-fill-quiet);
}

.modify-booking__room-option--sold-out {
  opacity: 0.55;
  cursor: not-allowed;
}

.modify-booking__badge {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

/* --current is the brand tint of the status pills above; --sold-out reuses the
   file's quiet danger pair. */
.modify-booking__badge--current {
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand);
}

.modify-booking__badge--sold-out {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

.modify-booking__radio {
  accent-color: var(--wa-color-brand);
}

.modify-booking__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Cancel and Save sit together at the right — the confirm button's shape with the
   brand fill, since this is the screen's primary action. */
.modify-booking__save {
  padding: 0.75rem 1rem;
  border: 1px solid var(--wa-color-brand);
  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;
}

/* The sidebar is a quiet dl: label left, value right, the total row carrying
   the weight. */
.modify-booking__sidebar dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
}

.modify-booking__sidebar dl > div {
  display: contents;
}

.modify-booking__sidebar dt {
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.modify-booking__sidebar dd {
  margin: 0;
  color: var(--wa-color-text-normal);
}

.modify-booking__sidebar dl > div:last-child dt,
.modify-booking__sidebar dl > div:last-child dd {
  font-weight: 700;
}

/* HMS-49 — the refund schedule tiers on the cancel screen. Same quiet list
   shape as the policy text above; today's window is called out beneath. */
.cancel-booking__tiers {
  margin-top: 1.5rem;
}

.cancel-booking__tier-list {
  margin: 0 0 0.75rem;
  display: grid;
  gap: 0;
}

/* Figma stacks each tier: quiet day-window line over its value line, hairlines
   between. The earlier two-column flex wrapped "check-/in" mid-word at every
   width. */
.cancel-booking__tier {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0;
}

.cancel-booking__tier + .cancel-booking__tier {
  border-top: 1px solid var(--wa-color-surface-border);
}

.cancel-booking__tier-label {
  color: var(--wa-color-text-quiet);
}

/* dd carries a 40px inline-start margin in the UA sheet — reset it or the
   value line indents under nothing. */
.cancel-booking__tier-value {
  margin: 0;
  font-weight: 400;
  color: var(--wa-color-text-normal);
}

/* Today's window is the one that applies, so its value carries more weight
   than the other tiers'. */
.cancel-booking__tier--current .cancel-booking__tier-value {
  font-weight: 700;
}

/* The modify layout stacks: the sidebar drops under the main card, the date
   grid goes single column, and the footer buttons take full-width rows.
   THIS BLOCK STAYS LAST ON PURPOSE — these rules share specificity with the
   base .modify-booking__* rules above, so they only win at small widths if
   they come later in source order. Nested in the file's earlier media block
   they lost to `1fr 19rem` and the sidebar overflowed the viewport at 390px. */
@media (max-width: 40rem) {
  .modify-booking__layout {
    grid-template-columns: 1fr;
  }

  .modify-booking__dates {
    grid-template-columns: 1fr;
  }

  .modify-booking__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .modify-booking__footer wa-button,
  .modify-booking__save {
    width: 100%;
  }

  /* HMS-1420 — the old flex-wrap skeleton put the price on a full-width
     second row flush under the radio: QA's "the room price is positioned
     below the radio button instead of aligning with the room name". A
     named-areas grid gives every option the same two-row shape instead —
     the radio spans both rows, centered against the room information;
     name + badges take row 1 of the text column; the price sits directly
     under the name on row 2, for plain and sold-out options alike. The
     child combinator (0,2,0) is what lets display:grid beat native.css's
     label:has(input[type=radio]) inline-flex (0,1,2) here. */
  .modify-booking__room-list > .modify-booking__room-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "radio heading"
      "radio price";
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    align-items: center;
  }

  .modify-booking__room-option > .modify-booking__radio { grid-area: radio; }
  .modify-booking__room-option > .modify-booking__room-heading { grid-area: heading; }

  /* The base rule's >:last-child auto margin would push the price to the
     text column's right edge; zero it so the price's left edge lands under
     the name. The selector ties that rule's (0,2,0) and wins on source
     order — this block is last in the file on purpose. */
  .modify-booking__room-option > .modify-booking__room-price {
    grid-area: price;
    margin-inline-start: 0;
  }

  /* The Current Booking summary precedes the form on mobile, matching the
     mobile frame — a grid item, so order works. */
  .modify-booking__sidebar {
    order: -1;
  }
}

/* Add Room — Figma 516:7972. The picker is a two-column page: the room chips,
   the candidate cards, and the actions on the left; the booking preview and the
   group's rules on the right. */

.add-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  align-items: start;
}

.add-room__title {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.add-room__subtitle {
  margin: 0 0 1.5rem;
  color: var(--wa-color-text-quiet);
}

.add-room__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Each chip is a compact card: the room number in a brand circle, the name and
   a quiet sub-line, and a status pill riding the trailing edge. */
.add-room__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-l);
  /* The three chips share the row evenly; long title/sub text wraps inside
     the chip rather than pushing a chip onto a second row. */
  flex: 1 1 0;
  min-width: 0;
}

.add-room__chip-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font-size: 0.75rem;
  font-weight: 600;
  flex: none;
}

/* Title and sub-line share one text column so a squeezed chip stacks them
   vertically instead of scattering each word into its own narrow column. */
.add-room__chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

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

.add-room__chip-sub {
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

.add-room__chip-badge {
  margin-inline-start: auto;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

/* --booked is the done state: a green check and the success pill. */
.add-room__chip--booked i {
  color: var(--wa-color-success-fill-normal);
}

.add-room__chip--booked .add-room__chip-badge {
  background: var(--wa-color-success-fill-normal);
  color: var(--wa-color-success-on-normal);
}

/* --adding is the in-flight state: the brand border marks the chip the attendee
   is acting on, and the pill takes the brand fill. */
.add-room__chip--adding {
  border-color: var(--wa-color-brand);
}

.add-room__chip--adding .add-room__chip-badge {
  background: var(--wa-color-brand);
  color: var(--wa-color-brand-on-loud);
}

/* --empty is a room with no one in it: greyed, not hidden. */
.add-room__chip--empty {
  opacity: 0.7;
}

.add-room__chip--empty .add-room__chip-badge {
  background: var(--wa-color-surface-lowered);
}

.add-room__linked {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-block: 0.75rem;
}

.add-room__linked-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.add-room__linked-copy {
  margin: 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

/* A candidate is a room the group could add: photo left, the facts and the
   status pill right. */
.add-room__candidate {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1rem;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-l);
}

.add-room__candidate-photo {
  width: 100%;
  height: 100%;
}

.add-room__candidate-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--wa-border-radius-m);
}

/* No photo: the brand-tinted placeholder carries the room's initials. */
.add-room__candidate-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-color-brand-90);
  border-radius: var(--wa-border-radius-m);
}

.add-room__candidate-initials {
  font-weight: 700;
  color: var(--wa-color-brand);
}

.add-room__candidate-name {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.add-room__candidate-meta {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.add-room__candidate-total {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.add-room__candidate-status {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

/* Confirmed, pending, and checked-in all read as "this room is good", so they
   share the success tone. */
.add-room__candidate-status--confirmed,
.add-room__candidate-status--pending,
.add-room__candidate-status--checked_in {
  background: var(--wa-color-success-fill-normal);
  color: var(--wa-color-success-on-normal);
}

.add-room__candidate-ref {
  display: block;
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

/* The search CTA is the page's primary action, so it takes the brand fill. */
.add-room__search {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  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;
}

/* Inside a candidate the CTA is the third grid child, so it rides the trailing
   auto track; center it against the body rather than pinning it to the top. */
.add-room__candidate .add-room__search {
  align-self: center;
}

/* The callout is the file's notice shape with a brand left accent — an info
   band, not a status. */
.add-room__callout {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--wa-color-brand);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-text-quiet);
}

/* The ready row is the summary card: the heading and copy left, the search
   button riding the trailing edge. */
.add-room__ready {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-l);
}

.add-room__ready-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.add-room__ready-copy {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.add-room__ready .add-room__search {
  margin-inline-start: auto;
}

.add-room__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--wa-color-text-quiet);
  text-decoration: none;
}

.add-room__back:hover,
.add-room__back:focus {
  color: var(--wa-color-text-normal);
  text-decoration: underline;
}

/* The preview is the sidebar section: what the booking will look like once the
   room is added. */
.add-room__preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.add-room__preview-card {
  padding: 1rem;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-l);
}

.add-room__preview-heading {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

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

.add-room__preview-event {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.add-room__preview-count {
  float: right;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

/* Room rows are label / ref / pill: the label owns the free space and
   wraps, the ref stays quiet and unbroken, the badge is a pill. */
.add-room__preview-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-normal);
}

.add-room__preview-ref {
  flex: none;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.add-room__preview-badge {
  flex: none;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

/* Each room row is label / ref / badge; the hairline between rows is the only
   divider inside the card. */
.add-room__preview-room {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.add-room__preview-room:last-child {
  border-bottom: none;
}

.add-room__preview-room > :last-child {
  margin-inline-start: auto;
}

/* A pending room is not confirmed yet: a quiet boxed row — a thin light-gray
   border on all four sides with slight rounding, a bed icon and stacked
   title/sub on the left, and the badge in the warning tone. The combined
   two-class selector matches .add-room__preview-room:last-child's specificity
   and appears later, so the box keeps its bottom border instead of taking the
   last row's border-bottom: none. */
.add-room__preview-room.add-room__preview-room--pending {
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
}

.add-room__preview-icon {
  flex: none;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.add-room__preview-pending-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.add-room__preview-pending-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.add-room__preview-pending-sub {
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

.add-room__preview-room--pending .add-room__preview-badge {
  background: var(--wa-color-warning-fill-normal);
  color: var(--wa-color-warning-on-normal);
}

/* The rules are the sidebar's quiet dl: label left, value right, hairlines
   between. */
.add-room__rules-heading {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.add-room__rules-list {
  margin: 0;
}

.add-room__rules-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.add-room__rules-list dt {
  color: var(--wa-color-text-quiet);
}

.add-room__rules-list dd {
  margin: 0;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* The page stacks under the sidebar breakpoint: the preview and rules drop
   under the main column. */
@media (max-width: 64rem) {
  .add-room {
    grid-template-columns: 1fr;
  }
}

/* The candidate card stacks under the phone breakpoint: the photo becomes a
   full-width band. */
@media (max-width: 40rem) {
  .add-room__candidate {
    grid-template-columns: 1fr;
  }

  .add-room__candidate-photo {
    aspect-ratio: 3 / 2;
    height: auto;
  }

  /* The CTA stacks below the body in the single column; keep it at its own
     width instead of stretching across the card. */
  .add-room__candidate .add-room__search {
    justify-self: start;
  }

  /* The chips stack full-width at this width instead of crushing mid-phrase. */
  .add-room__chips {
    flex-direction: column;
  }

  .add-room__chip {
    flex: none;
  }
}

/* HMS-1456 — reported external bookings moved off the top of the page into
   their own tab. The panel is the file's quiet card: a heading row with the
   report CTA riding the trailing edge, then one card per stay — hotel icon,
   name with a self-reported pill, and a wrapping meta line of dates, nights,
   confirmation and address, each rendered only when the report carries it. */

.my-bookings__external-panel {
  padding: 1rem;
  background: var(--wa-color-surface-lowered);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
}

.my-bookings__external-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.my-bookings__external-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.my-bookings__external-heading > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-quiet);
  flex: none;
}

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

.my-bookings__external-subtitle {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.my-bookings__external-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.external-booking {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
}

.external-booking__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-quiet);
  flex: none;
}

.external-booking__body {
  flex: 1 1 auto;
  min-width: 0;
}

.external-booking__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}

/* A self-reported hotel name is free text — guests paste full addresses — so
   the name wraps inside the row instead of pushing the badge out. */
.external-booking__name {
  font-weight: 600;
  color: var(--wa-color-text-normal);
  overflow-wrap: anywhere;
}

.external-booking__badge {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

.external-booking__meta {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.125rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

/* Each present fact after the first leads with a middot separator. */
.external-booking__meta > * + *::before {
  content: "·";
  margin-right: 0.5rem;
}

.external-booking__dates i {
  margin-right: 0.25rem;
}

/* HMS-591 — each candidate card is a <label> wrapping a hidden radio; the
   :has() ring marks the picked group. */
.add-room__candidate {
  position: relative;
  cursor: pointer;
}

.add-room__candidate:has(.add-room__pick:checked) {
  border-color: var(--wa-color-brand-fill-normal);
  box-shadow: 0 0 0 1px var(--wa-color-brand-fill-normal);
}

.add-room__pick {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}