/* 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. */
.my-bookings__tabs {
  display: flex;
  gap: 1.25rem;
  margin-block: 1rem;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

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

.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__external-booking {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  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;
}

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

/* A tab with nothing in it gets one quiet line, not the full empty state. */
.my-bookings__none {
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.my-bookings__empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--wa-color-text-quiet);
}

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

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

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

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

  /* The tabs become a segmented row: equal width, and the active tab fills
     instead of underlining, which reads better at four per line. */
  .my-bookings__tabs {
    gap: 0;
  }

  .my-bookings__tab {
    flex: 1;
    justify-content: center;
    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. */
  .my-bookings__notice {
    flex-wrap: wrap;
  }

  .my-bookings__notice p {
    flex: 1 1 100%;
  }

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

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

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

/* 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 {
  margin-bottom: 1.5rem;
}

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

.cancel-booking__policy-text {
  margin: 0 0 0.5rem;
  color: var(--wa-color-text-quiet);
  line-height: 1.5;
}

/* An absent policy reads as an absence, not as a policy. */
.cancel-booking__policy-text--none {
  font-style: italic;
}

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

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

/* 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__update {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.25rem;
  padding: 0.375rem 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-quiet);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

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

/* The room options are bordered card rows: radio, name, badge, and the price
   riding the trailing edge. The checked option — Current arrives checked — and
   the --current row share the brand tint. */
.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;
}

.modify-booking__room-option + .modify-booking__room-option {
  margin-top: 0.5rem;
}

.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--current,
.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: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Outlined Cancel left, solid Save 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%;
  }

  /* The room rows' min-content — radio + name + nowrap badge + price — ran ~40px
     wider than a 390 card, pushing the whole card past the viewport. Let the row
     wrap instead: the badge or price drops to a second line, nothing clips. */
  .modify-booking__room-option {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  /* 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: flex-start;
  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
   truncates, 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;
  flex-wrap: wrap;
  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: the card is dashed, the label carries a
   plus rather than a check, and the badge takes the warning tone. */
.add-room__preview-room--pending {
  border-style: dashed;
}

.add-room__preview-room--pending .add-room__preview-label {
  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;
  }
}