/* =========================================================
   MY BOOKINGS — no hand; the swirl carries the page.
   ========================================================= */
body[data-page="my-bookings"] {
  --cw: 44%;
  --cleft: 5.9%;
  /* --ctop unused — the block is centred (see below) */
}

body[data-page="my-bookings"] .swirl-back {
  opacity: .45;
}

/* the booking list — unique to this page */
body[data-page="my-bookings"] .bookings {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .55rem;
}

/* One card, stacked: the date anchors the top (full width, never squeezed
   into a one-word-per-line column), the details sit under it, and the
   Change / Cancel actions get their own full-width row below (see
   .booking-actions). The old two-column grid let a wide cancel-confirm strip
   in column 2 crush the date column to a vertical sliver. */
body[data-page="my-bookings"] .booking {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  background: rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: .8em 1em;
  font-size: clamp(.72rem, 1vw, .88rem);
}

/* the date + time — the thing they scan for, so it leads at a touch larger */
body[data-page="my-bookings"] .booking-when {
  font-size: 1.05em;
}

body[data-page="my-bookings"] .booking-what {
  opacity: .75;
  font-size: .9em;
}

/* wears the shared .inkline — wipes in on hover, like the landing's nav links,
   because this is an action you reach for rather than body copy you read */
body[data-page="my-bookings"] .booking-edit {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #fff;
  font-weight: 600;
  --ink-underline: var(--pink-soft);
}

/* ---- wired additions (booking.js) ------------------------------------- */

/* the nothing-here-yet state: one quiet full-width line */
body[data-page="my-bookings"] .booking--empty {
  grid-template-columns: 1fr;
  opacity: .85;
}

/* records whose booking moved on server-side (status reconciliation) */
body[data-page="my-bookings"] .booking--cancelled {
  opacity: .5;
}

body[data-page="my-bookings"] .booking--cancelled .booking-when {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Change / Cancel on a future one-time clean */
body[data-page="my-bookings"] .booking-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .35rem;
}

body[data-page="my-bookings"] .booking-act {
  font: inherit;
  font-size: clamp(.68rem, .9vw, .8rem);
  font-weight: 600;
  color: #fff;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .25em;
  opacity: .85;
}

body[data-page="my-bookings"] .booking-act--cancel {
  color: var(--pink-soft);
}

body[data-page="my-bookings"] .booking-act:disabled {
  opacity: .4;
  cursor: default;
}

body[data-page="my-bookings"] .booking-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: clamp(.68rem, .9vw, .8rem);
}

/* The lapsed-session note — a quiet line above the list. It reads as one
   sentence whose actionable clause is the link, so it flows as TEXT (a flex
   row would space the lead-in and the clause apart like two separate things). */
body[data-page="my-bookings"] .booking-signin {
  margin: 0 0 .8rem;
}

/* Straight underline like the top-right sign-out, and the same hover: the
   letters go pink (pink-soft here — it's on the blue panel). No nowrap: the
   clause is a whole sentence now and has to be allowed to break. */
body[data-page="my-bookings"] .booking-signin .booking-act {
  text-align: left;
  transition: color .25s ease, opacity .25s ease;
}

body[data-page="my-bookings"] .booking-signin .booking-act:hover,
body[data-page="my-bookings"] .booking-signin .booking-act:focus-visible {
  opacity: 1;
  color: var(--pink-soft);
}

/* The sign-out button is the shared top-right topbar control now (see
   .signout-link in input.css) — no page-specific override here. */

/* ---- the account list must FIT the screen (step-4's pattern) -----------
   Signed in, the list is the whole account history — it can outgrow a
   short viewport. The panel becomes a shrinkable flex column and the LIST
   scrolls internally; heading, button and sign-out always stay on screen. */
body[data-page="my-bookings"] .panel {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}

body[data-page="my-bookings"] .bookings {
  flex: 0 1 auto;
  min-height: 8rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 227, 198, .55) transparent;
}

/* ---- short viewports (landscape phones): the fixed column must scroll ----
   The flex fit keeps the panel on screen down to ~short-laptop heights, but
   below that the button and sign-out row fell off a page that CANNOT scroll
   (the column is position:fixed). Same escape hatch as the About page:
   the column itself scrolls, safe-centred where supported. */
@media (max-height: 480px) {
  body[data-page="my-bookings"] .content--fill {
    justify-content: center;
    justify-content: safe center;
    overflow-y: auto;
    scrollbar-width: none;
  }

  body[data-page="my-bookings"] .panel {
    max-height: none;
  }
}

/* ---- phones: the actions must be tappable ----
   The shared clamp bottomed out near 11px text in a 16px-tall hit area —
   fine for a mouse, hopeless for thumbs. Mirrors the 760px touch-target
   pass the rest of the chrome got. */
@media (max-width: 760px) {
  body[data-page="my-bookings"] .booking-act {
    font-size: 14px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }

  body[data-page="my-bookings"] .booking-confirm {
    font-size: 13px;
  }
}

/* a just-cancelled row: the row dims, but the word "cancelled" is the one
   part that must stay readable */
body[data-page="my-bookings"] .booking--cancelled .booking-what {
  opacity: 1;
}


/* touch: drags inside the bookings list (or the short-viewport column
   scroll) stay inside — no background rubber-banding */
body[data-page="my-bookings"] .bookings,
body[data-page="my-bookings"] .content--fill {
  overscroll-behavior: contain;
}

/* The quiet way through to the dedicated /payments page — a small link under
   the primary button, revealed by booking.js only when signed in. Quiet by
   default; the letters go pink on hover like the other in-panel links. */
body[data-page="my-bookings"] .paylink {
  align-self: center;
  margin-top: .9rem;
  color: #fff;
  font-weight: 600;
  font-size: clamp(.72rem, .95vw, .85rem);
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1.5px;
  opacity: .8;
  transition: color .25s ease, opacity .25s ease;
}

body[data-page="my-bookings"] .paylink:hover,
body[data-page="my-bookings"] .paylink:focus-visible {
  opacity: 1;
  color: var(--pink-soft);
}

@media (max-width: 760px) {
  body[data-page="my-bookings"] .paylink {
    font-size: 14px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
}