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

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

/* HMS-255 — "Add another room" is an action, not a fact: the link keeps its
   colour but shares the row's smaller type and the roommate line's spacing. */
.booking-row__add-room {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

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

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

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

/* The row stacks below the phone breakpoint, and the status badge moves under the
   text rather than squeezing it. */
@media (max-width: 40rem) {
  .booking-row {
    flex-wrap: wrap;
  }

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

/* Cancel Booking — Figma 576:4567.

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

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

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

.cancel-booking__hotel {
  margin: 0;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.cancel-booking__stay,
.cancel-booking__reference {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

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

.cancel-booking__actions {
  display: flex;
  gap: 0.75rem;
  align-items: 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-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

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

/* Modify Booking — Figma 576:4518. */

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

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

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

.modify-booking__hotel {
  margin: 0;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

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

.modify-booking__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* The preview is the reason this screen has two steps, so it is the loudest thing
   on it once it exists. */
.modify-booking__preview {
  padding: 1rem;
  border: 1px solid var(--wa-color-brand-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  margin-bottom: 1.5rem;
}

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

.modify-booking__figures {
  margin: 0 0 1rem;
}

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

.modify-booking__figures dt {
  color: var(--wa-color-text-quiet);
}

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

.modify-booking__difference {
  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-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.5rem;
}

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

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

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

.cancel-booking__policy-note {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}