/* ============================================================
   booking.css — Booking Flow Styles

   Styles for the 4-screen booking flow that replaces the event
   card's content area when the user clicks "Book Your Spot" and
   the card enters focus mode.

   Flow:
     .event-card--full.event-card--booking
         ├── .event-card__image            (step 1 only, hidden step 2–4)
         └── .event-card__right-section
               └── .booking-content-area   (replaces content-area + CTA)
                     ├── title + meta row  (persistent event context)
                     ├── step indicator    (1. Tickets › 2. Details › ...)
                     └── .booking-step     (one of the 4 screens)

   Design-system rule: all sizes, spacing, radii, colors come from
   tokens.css. No primitives inline, no magic numbers.
   ============================================================ */


/* ============================================================
   Card state: booking active
   ============================================================ */

/* When booking is active: the normal content-area + CTA stay in flow
   but become invisible (visibility: hidden, NOT display: none). This
   preserves the card's natural dimensions — whatever screen 0 would
   render at this viewport / card data is what sets the card's height.
   The booking content overlays this hidden layer absolutely.

   Note: the booking flow's own CTAs (.booking-cta) also use the
   .event-card__cta class — the :not() excludes them from the hide. */
.event-card--full.event-card--booking .event-card__content-area,
.event-card--full.event-card--booking .event-card__cta:not(.booking-cta) {
  visibility: hidden;
  pointer-events: none;
}

.event-card--full.event-card--booking .booking-content-area {
  display: flex;
  position: absolute;
  inset: 0;
  /* Bottom min-height safety: if screen 1's content is taller than
     screen 0 at this viewport, allow the card to grow. */
  min-height: 100%;
}

/* DESKTOP ONLY (≥1360px): screens 2–4 use a 30/70 two-column layout
   inside booking-content-area. The original .event-card__image stays
   visibility:hidden (preserves the card's natural dimensions); a
   mirror image is rendered in the left column. Booking-step occupies
   the right column.

   On tablet + mobile the image stays visible across all steps —
   it flexes to fill remaining height instead (see the
   "Tablet + Mobile" block below). */
@media (min-width: 1360px) {
  /* Hide the original image and release right-section as the
     positioning ancestor so booking-content-area fills the full card. */
  .event-card--full.event-card--booking.event-card--booking-no-image .event-card__image {
    visibility: hidden;
    pointer-events: none;
  }

  .event-card--full.event-card--booking.event-card--booking-no-image .event-card__right-section {
    position: static;
  }

  /* Two-column layout inside booking-content-area on screens 2–4
     AND the waitlist screen. */
  .event-card--full.event-card--booking[data-booking-step="1"] .booking-content-area,
  .event-card--full.event-card--booking[data-booking-step="2"] .booking-content-area,
  .event-card--full.event-card--booking[data-booking-step="3"] .booking-content-area,
  .event-card--full.event-card--booking[data-booking-mode="waitlist"] .booking-content-area {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-component-xl);
  }

  /* Left column (30%) — title + meta + image */
  .booking-left-column {
    flex: 0 0 30%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-component-xl);
  }

  /* Meta stacks vertically in the left column (no separator dots),
     16px between each line (date / time / location). */
  .event-card--full .booking-left-column .event-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-component-md);
    padding-left: var(--space-component-md);
  }

  .event-card--full .booking-left-column .booking-meta-sep {
    display: none;
  }

  /* Image fills whatever height is left in the left column after the
     header takes its natural size. Matches .event-card__image: rounded
     corners + object-fit cover. */
  .booking-left-image {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius-card-xl);
  }

  .booking-left-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Right column — fills the remaining width after the 30% left column
     and the column gap. (Using flex: 1 1 auto rather than a fixed 70%
     avoids overflow when the gap is factored in.) */
  .event-card--full.event-card--booking[data-booking-step="1"] .booking-step,
  .event-card--full.event-card--booking[data-booking-step="2"] .booking-step,
  .event-card--full.event-card--booking[data-booking-step="3"] .booking-step,
  .event-card--full.event-card--booking[data-booking-mode="waitlist"] .booking-step {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Screen 3 (Payment) — on desktop, the CTA and trust row sit
     side-by-side (centered, 44px gap) instead of stacked.
     Matches Figma node 1596:1100. */
  .event-card--full.event-card--booking[data-booking-step="2"] .booking-pay-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-component-xl);
    width: 100%;
  }

  /* Footer hugs its CTA (doesn't stretch full-width) so the row layout
     above can center CTA + trust as a compact group. */
  .event-card--full.event-card--booking[data-booking-step="2"] .booking-step__footer {
    width: auto;
  }

  /* Trust row splits into two lines on desktop (hide the inline
     separator, make each line a block, left-align). Also bumps the
     gap between the padlock icon and text from xs (4px) to sm (8px).
     Tablet/mobile keep the single-line "Secure payment via Stripe ·
     We never see…" format centered with xs gap. */
  .event-card--full.event-card--booking[data-booking-step="2"] .booking-trust {
    gap: var(--space-component-sm);
    text-align: left;
  }
  .event-card--full.event-card--booking[data-booking-step="2"] .booking-trust__line {
    display: block;
  }
  .event-card--full.event-card--booking[data-booking-step="2"] .booking-trust__sep {
    display: none;
  }

}


/* ============================================================
   Screen 4 only — success + add-to-calendar side-by-side row
   (desktop + tablet, ≥768px). Mobile stacks them vertically
   because .booking-success-row is an unstyled block by default.
   Matches the Figma Screen 4 layout (node 1595:371).
   ============================================================ */

/* Mobile: stack vertically with a 16px gap between success + calendar */
@media (max-width: 767px) {
  .event-card--full.event-card--booking[data-booking-step="3"] .booking-success-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-component-md);
    width: 100%;
  }
}

@media (min-width: 768px) {
  .event-card--full.event-card--booking[data-booking-step="3"] .booking-success-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-component-lg);
    width: 100%;
  }

  .event-card--full.event-card--booking[data-booking-step="3"] .booking-success-row > * {
    flex: 1 1 0;
    min-width: 0;
  }
}


/* ============================================================
   Booking content area — wraps everything inside the card
   ============================================================ */

.booking-content-area {
  display: none;                               /* shown via .event-card--booking */
  flex-direction: column;
  gap: var(--space-component-xl);
  width: 100%;
  padding: var(--space-component-xl);
  box-sizing: border-box;
  z-index: 1;
}

/* Tablet: match right-section tablet padding */
@media (max-width: 1359px) and (min-width: 768px) {
  .booking-content-area {
    gap: var(--space-component-md);
    padding: 0 var(--space-component-2xl) var(--space-component-xl);
  }
}

/* Mobile: match right-section mobile padding */
@media (max-width: 767px) {
  .booking-content-area {
    padding: 0 var(--space-component-lg) var(--space-component-xl);
  }
}

/* Persistent event context header — title + meta row always visible */
.booking-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
  width: 100%;
}

/* Meta row (date · time · location) — horizontal on booking, centered */
.booking-header .event-card__meta {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-component-sm);
}

.booking-header .event-card__meta p {
  margin: 0;
}

/* Thin separator dots between meta items */
.booking-header .event-card__meta .booking-meta-sep {
  color: var(--color-text-faint);
}

/* Screens 2–4 (Details / Payment / Confirmed) — extra top padding on
   the meta since the title is hidden on those steps. Step 0 (Tickets)
   keeps the natural booking-header gap. */
.event-card--full.event-card--booking:not([data-booking-step="0"]) .booking-header .event-card__meta {
  padding-top: var(--space-component-xl);
}


/* ============================================================
   Booking step — one per screen
   ============================================================ */

.booking-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-lg);
  width: 100%;
  flex: 1;                                      /* fill the booking-content-area */
  /* Fade-in transition for swaps */
  animation: booking-step-in 0.3s ease;
}

/* Three-zone layout within a step: header (pinned top),
   body (fills and centers), footer (pinned bottom). */
.booking-step__header,
.booking-step__body,
.booking-step__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-lg);
  width: 100%;
}

.booking-step__body {
  flex: 1;
  justify-content: center;
}

/* Screen 3 (Payment) body: more items (express pay, divider, payment
   element, promo, cancellation) — tighter gap so the card doesn't
   overflow while keeping the Stripe mock at its real dimensions. */
.event-card--full.event-card--booking[data-booking-step="2"] .booking-step__body {
  gap: var(--space-component-md);
}

/* Screen 3 (Payment) pay-footer: wraps booking-step__footer + trust row.
   Tablet + mobile: stacks vertically — preserves the 24px gap between
   CTA and trust row. Desktop (≥1360px) override lives in the top
   "DESKTOP ONLY" block (flex-row side-by-side, centered). */
@media (max-width: 1359px) {
  .event-card--full.event-card--booking[data-booking-step="2"] .booking-pay-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-component-lg);
    width: 100%;
  }
}

@keyframes booking-step-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   Step indicator — breadcrumb with back-nav on completed steps
   ============================================================ */

.booking-step-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-component-sm);
  padding-bottom: var(--space-component-md);
  border-bottom: 1px solid var(--color-border-subtle);
  width: 100%;
  flex-wrap: wrap;
}

.booking-step-indicator__item {
  background: none;
  border: none;
  padding: var(--space-component-xs) 0;
  cursor: default;
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-faint);
  font-weight: var(--type-weight-regular);
  white-space: nowrap;
}

.booking-step-indicator__item--completed {
  cursor: pointer;
  color: var(--color-text-link);
  text-decoration: underline;
}

.booking-step-indicator__item--current {
  color: var(--color-text-default);
  font-weight: var(--type-weight-semibold);
}

.booking-step-indicator__sep {
  color: var(--color-text-faint);
  font-size: var(--type-size-caption);
}


/* ============================================================
   Seat-hold timer — "Your spot is held for 10:00"
   ============================================================ */

.booking-seat-timer {
  display: flex;
  align-items: center;
  gap: var(--space-component-xs);
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-subtle);
  padding: var(--space-component-xs) 0;
}

.booking-seat-timer--urgent {
  color: var(--color-glaze-ember-600);
}

.booking-seat-timer svg {
  flex-shrink: 0;
}


/* ============================================================
   Quantity stepper — −/+ buttons with drop-shadow + image icons
   ============================================================ */

.booking-qty {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
}

.booking-qty__label {
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-muted);
}

.booking-qty__row {
  display: flex;
  align-items: center;
  gap: var(--space-component-md);
}

.booking-qty__btn {
  width: var(--space-11);                      /* 44px — matches primitive */
  height: var(--space-11);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(var(--shadow-card));
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.booking-qty__btn:hover {
  transform: scale(0.985);
}

.booking-qty__btn:active {
  transform: scale(0.97);
}

.booking-qty__btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

.booking-qty__btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.booking-qty__value {
  font-family: var(--type-family-display);
  letter-spacing: 0.03em;
  font-size: var(--type-size-h4);               /* 36px desktop / 24px mobile */
  min-width: calc(var(--space-11) + var(--space-component-xs));
  text-align: center;
  color: var(--color-text-default);
}


/* ============================================================
   Price panel — itemised breakdown with divider + total
   ============================================================ */

.booking-price-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
  padding: var(--space-component-md);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-card);
}

.booking-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--type-family-nav);
  font-size: var(--type-size-body);
  color: var(--color-text-default);
}

.booking-price-row--muted {
  font-size: var(--type-size-caption);
  color: var(--color-text-subtle);
}

.booking-price-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-component-sm);
  border-top: 1px solid var(--color-border-subtle);
}

.booking-price-total__label {
  font-family: var(--type-family-body);
  font-size: var(--type-size-body-md);
  font-weight: var(--type-weight-semibold);
  color: var(--color-text-default);
}

.booking-price-total__value {
  font-family: var(--type-family-nav);
  font-size: var(--type-size-h3);               /* 24px desktop / 20px mobile */
  color: var(--color-text-default);
}


/* ============================================================
   Running total row — compact summary on steps 2 + 3
   ============================================================ */

.booking-running-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-component-sm) var(--space-component-md);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-card);
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-muted);
  gap: var(--space-component-md);
  flex-wrap: wrap;
}


/* ============================================================
   Cancellation line — small muted line above each step's CTA
   ============================================================ */

.booking-cancellation {
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-subtle);
  margin: 0;
  line-height: 1.4;
}

.booking-cancellation a {
  color: var(--color-text-link);
}


/* ============================================================
   Form input — label, input, help/error text
   ============================================================ */

.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-md);
  width: 100%;
}

.booking-input-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
  width: 100%;
}

.booking-input-field__label {
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-muted);
  font-weight: var(--type-weight-regular);
}

.booking-input-field__optional {
  opacity: 0.5;
}

.booking-input-field input,
.booking-input-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--type-family-nav);
  font-size: var(--type-size-body);
  color: var(--color-text-default);
  padding: var(--space-component-md) var(--space-component-sm);
  background: var(--color-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.booking-input-field textarea {
  resize: vertical;
  min-height: calc(var(--space-20));            /* 80px desktop */
}

.booking-input-field input:focus,
.booking-input-field textarea:focus {
  border-color: var(--color-skin-700);
  background: var(--color-surface-subtle);
}

.booking-input-field--error input,
.booking-input-field--error textarea {
  border-color: var(--color-glaze-ember-600);
}

.booking-input-field__help {
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-faint);
}

.booking-input-field__error {
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  color: var(--color-glaze-ember-600);
  display: flex;
  align-items: center;
  gap: var(--space-component-xs);
}


/* ============================================================
   Booking CTA — reuses .event-card__cta (same image bg, label,
   drop-shadow, hover swap). Layout-only tweaks here.
   ============================================================ */

.booking-step .booking-cta {
  align-self: center;   /* natural-width inside a flex-col footer */
}


/* ============================================================
   Payment — Apple Pay / Google Pay row
   Uses .event-card__cta (image bg + drop-shadow + hover swap via
   navbar.js). The modifier below lays them out side-by-side with
   equal width and adjusts the label to sit next to a platform icon.
   ============================================================ */

.booking-pay-express {
  display: flex;
  justify-content: center;
  gap: var(--space-component-lg);
  width: 100%;
}

.booking-pay-express__btn {
  flex: 0 0 auto;                      /* hug contents */
  text-decoration: none;
}

/* Full Apple Pay / Google Pay logo — includes the brand mark AND "Pay"
   wordmark. Height matches the primary CTA's "PAY €N" text (h4 token:
   36px desktop / 24px mobile) for visual parity between the express
   and card-pay CTAs. Width auto-scales to the logo's proportions. */
.booking-pay-express__logo {
  position: relative;
  z-index: 1;                          /* above .event-card__cta-bg */
  height: var(--type-size-h4);
  width: auto;
  display: block;
  filter: brightness(0) invert(1);     /* SVGs are black → render white on the dark CTA */
}


/* ============================================================
   "or pay with card" divider
   ============================================================ */

.booking-divider {
  display: flex;
  align-items: center;
  gap: var(--space-component-md);
  width: 100%;
}

.booking-divider::before,
.booking-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-subtle);
}

.booking-divider__text {
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-faint);
  white-space: nowrap;
}


/* ============================================================
   Stripe Payment Element mock — card + iDEAL tabs

   Dimensions locked to match Stripe's real Payment Element output
   (Tabs layout, Card selected, Appearance API borderRadius=8px,
   fontSizeBase=16px, spacingGridRow=12px). Swap to the live Stripe
   Element later and it should slot into the same footprint.

   CRITICAL: flex-shrink: 0 — this element never compresses. Other
   content in the payment step must adjust to fit around it.
   ============================================================ */

.booking-payment-element {
  flex-shrink: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-neutral-0);
  padding: var(--space-component-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
}

/* Stripe Payment Element iframe lives inside this div. Stripe controls
   everything inside — we just give it space. */
.booking-stripe-mount {
  min-height: 60px;               /* space reserved while iframe loads */
}

/* Loading placeholder shown until Stripe's `ready` event fires. */
.booking-stripe-loading {
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-subtle);
  text-align: center;
  padding: var(--space-component-md) 0;
}

/* Error message shown under the Payment Element when Stripe or our
   Edge Function returns an error. */
.booking-payment-error {
  margin: 0;
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-danger, #d03535);
  line-height: 1.4;
}

/* "Paying…" state on the primary CTA — dims it + disables the hover
   scale so the user sees something is happening. */
.booking-cta--processing {
  pointer-events: none;
  opacity: 0.6;
}

.booking-payment-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Tab row: ~52px tall (14px vertical padding + 16px font + 2px active border) */
.booking-payment-tab {
  flex: 1;
  padding: 14px var(--space-component-sm);
  background: var(--color-neutral-0);
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.booking-payment-tab--active {
  border-bottom-color: var(--color-skin-700);
  color: var(--color-text-default);
  font-weight: var(--type-weight-semibold);
}

.booking-payment-tab:not(.booking-payment-tab--active) {
  background: var(--color-surface-subtle);
}

/* Content area: Stripe defaults — 20px top, 16px sides/bottom, 12px row gap */
.booking-payment-fields {
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each field: ~44px tall (12px vertical padding + 16px font + 2px borders),
   8px radius (matches our --radius-button → what we'd pass to Appearance API) */
.booking-payment-field {
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-button);
  background: var(--color-surface-subtle);
  font-family: var(--type-family-nav);
  font-size: var(--type-size-body);
  color: var(--color-text-faint);
}

.booking-payment-field--row {
  display: flex;
  justify-content: space-between;
}

.booking-payment-fields__duo {
  display: flex;
  gap: 12px;
}

.booking-payment-fields__duo > .booking-payment-field {
  flex: 1;
}

/* iDEAL bank list — mirrors .booking-payment-field dimensions */
.booking-ideal-bank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-button);
  background: var(--color-surface-subtle);
  font-family: var(--type-family-nav);
  font-size: var(--type-size-body);
  color: var(--color-text-default);
  cursor: pointer;
}


/* ============================================================
   Promo code collapse + input row
   ============================================================ */

.booking-promo-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-link);
  text-decoration: underline;
  text-align: left;
  align-self: flex-start;
}

.booking-promo-input {
  display: flex;
  gap: var(--space-component-sm);
}

.booking-promo-input input {
  flex: 1;
  padding: var(--space-component-sm) var(--space-component-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  outline: none;
}

.booking-promo-input button {
  padding: var(--space-component-sm) var(--space-component-md);
  background: var(--color-surface-muted);
  border: none;
  border-radius: var(--radius-card);
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  cursor: pointer;
}


/* ============================================================
   Trust row — padlock + "Secure payment via Stripe"
   ============================================================ */

.booking-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-component-xs);
  flex-wrap: wrap;
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-faint);
  text-align: center;
}

.booking-trust svg {
  flex-shrink: 0;
  color: var(--color-text-faint);
}


/* ============================================================
   Confirmation (step 4)
   ============================================================ */

.booking-success {
  text-align: center;
}

.booking-success__headline {
  font-family: var(--type-family-body);
  font-size: var(--type-size-h2);
  color: var(--color-text-success);
  margin: 0 0 var(--space-component-sm);
}

.booking-success__ref {
  font-family: var(--type-family-nav);
  font-size: var(--type-size-body);
  color: var(--color-text-muted);
  margin: 0;
}

.booking-success__email {
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-subtle);
  margin: var(--space-component-xs) 0 0;
}


/* Add-to-calendar + What-to-expect + Host card — all share shell */
.booking-info-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
  padding: var(--space-component-md);
  background: var(--color-surface-success-subtle);
  border-radius: var(--radius-card);
}

.booking-info-block__label {
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-muted);
  font-weight: var(--type-weight-semibold);
}

.booking-info-block__tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
}

.booking-info-block__tip {
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-default);
  margin: 0;
  line-height: 1.5;
  padding-left: var(--space-component-md);
  text-indent: calc(-1 * var(--space-component-md));
}


/* Calendar pill buttons — icon-only (Google / Apple / Outlook / .ics) */
.booking-calendar-row {
  display: flex;
  gap: var(--space-component-sm);
  flex-wrap: wrap;
}

.booking-calendar-btn {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-component-sm);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  background: var(--color-neutral-0);
  color: var(--color-text-default);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}

.booking-calendar-btn:hover {
  transform: scale(0.98);
  background: var(--color-surface-warm);
}

.booking-calendar-icon {
  display: block;
  flex-shrink: 0;
}


/* Host card */
.booking-host {
  display: flex;
  align-items: center;
  gap: var(--space-component-md);
  padding: var(--space-component-md);
  background: var(--color-surface-success-subtle);
  border-radius: var(--radius-card);
}

.booking-host__avatar {
  width: calc(var(--space-11) + var(--space-component-sm));     /* 52px */
  height: calc(var(--space-11) + var(--space-component-sm));
  border-radius: var(--radius-full);
  background: var(--color-skin-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--type-family-display);
  letter-spacing: 0.03em;
  font-size: var(--type-size-body-lg);
  color: var(--color-text-default);
}

.booking-host__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
}

.booking-host__name {
  font-family: var(--type-family-body);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-semibold);
  color: var(--color-text-default);
  margin: 0;
}

.booking-host__role {
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-subtle);
  margin: 0;
}


/* Venue block */
.booking-venue {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
}

.booking-venue__label {
  font-weight: var(--type-weight-semibold);
  color: var(--color-text-muted);
}

.booking-venue__address {
  color: var(--color-text-default);
}

.booking-venue__map {
  color: var(--color-text-link);
}


/* Contact footer */
.booking-contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: var(--space-component-md);
  row-gap: 0;
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-subtle);
  padding-top: var(--space-component-sm);
  padding-bottom: var(--space-component-md);
  border-top: 1px solid var(--color-border-subtle);
}

/* Each chunk ("Questions? hello@…" and "+31 6 1234 5678") stays on
   one line — when the line can't hold both, the phone wraps as a
   whole unit to the next row. */
.booking-contact__chunk {
  white-space: nowrap;
}

/* Mobile: hide the middle "·" so it doesn't sit orphaned at the end
   of line 1 after the phone chunk has wrapped. */
@media (max-width: 767px) {
  .booking-contact__sep {
    display: none;
  }
}


/* ============================================================
   Tablet + Mobile (< 1360px) — All booking screens: image flexes

   The card's total height is locked to its screen-0 natural size
   via a JS-set inline style (see scripts/booking.js →
   lockCardHeightForColumnLayout). Within that locked height:

     - the top image absorbs whatever vertical space is left after
       the booking content takes its natural height
     - the image's aspect-ratio constraint is removed so it can
       flex freely between very short and quite tall
     - the <img> uses object-fit: cover so cropping stays graceful
     - the screen-0 ghost layer is display:none'd (not just
       visibility:hidden) so right-section's height comes from the
       real booking content, not the original description area
     - booking-content-area is in flow (position: relative) instead
       of absolute-overlaying right-section

   Applies to ALL booking steps (0–3) — image stays visible across
   the whole flow on these viewports and flexes in/out to keep the
   CTA's bottom padding consistent.

   Net effect: content always fits, CTA's bottom padding stays
   consistent, image flexes to whatever's left.
   ============================================================ */

@media (max-width: 1359px) {

  /* Image container absorbs remaining vertical space */
  .event-card--full.event-card--booking .event-card__image {
    flex: 1 1 0;
    min-height: 0;
  }

  /* <img> fills the container (no aspect-ratio, crop gracefully) */
  .event-card--full.event-card--booking .event-card__image img {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Drop the screen-0 ghost layer entirely — right-section sizes to
     the booking content instead. */
  .event-card--full.event-card--booking .event-card__content-area,
  .event-card--full.event-card--booking .event-card__cta:not(.booking-cta) {
    display: none;
  }

  /* Booking content in flow (not absolute overlay) so right-section
     grows/shrinks with it and the image flexes inversely. */
  .event-card--full.event-card--booking .booking-content-area {
    position: relative;
    inset: auto;
    min-height: 0;
    padding: 0;                              /* right-section already provides padding */
  }

  /* If the booking content would leave <50px of actual image display,
     the JS adds this class. The image becomes invisible but KEEPS its
     flex space — content stays bottom-aligned to where right-section
     already was, and the card height stays locked. */
  .event-card--full.event-card--booking.event-card--booking-image-tiny .event-card__image {
    visibility: hidden;
  }
}


/* ============================================================
   Tablet (768–1359px) — per-step overrides
   ============================================================ */

@media (max-width: 1359px) and (min-width: 768px) {
  /* Drop the top padding on the meta for non-tickets steps */
  .event-card--full.event-card--booking:not([data-booking-step="0"]) .booking-header .event-card__meta {
    padding-top: 0;
  }
}


/* ============================================================
   Mobile adjustments (<768px)
   ============================================================ */

@media (max-width: 767px) {
  .booking-content-area {
    padding: var(--space-component-lg);
    gap: var(--space-component-md);
  }

  /* Step indicator: drop "1. / 2. / 3. / 4." numeric prefixes to save
     horizontal space. Visual state (bold current, underlined completed,
     faded upcoming) still communicates progression. */
  .booking-step-indicator__num {
    display: none;
  }

  /* Drop the top padding on the meta for non-tickets steps */
  .event-card--full.event-card--booking:not([data-booking-step="0"]) .booking-header .event-card__meta {
    padding-top: 0;
  }
}


/* ============================================================
   Sold-out full-card variant — waitlist mode
   Applied via .event-card--booking-sold-out on the card root when
   the booking flow starts on a card with data-booking-sold-out="true".
   Visual treatment:
     - Title faded to subtle (40% black)
     - Meta rows faded further to faint (25% black)
     - "Sold Out" line in meta emphasised (default black, bold)
     - Image at 50% opacity
   ============================================================ */

.event-card--booking.event-card--booking-sold-out .event-card__title-text {
  color: var(--color-text-subtle);
}

.event-card--booking.event-card--booking-sold-out .booking-header .event-card__meta p {
  color: var(--color-text-faint);
}

.event-card--booking.event-card--booking-sold-out .booking-header .event-card__meta .event-card__meta-sold-out {
  color: var(--color-text-default);
  font-weight: var(--type-weight-semibold);
}

/* Tablet — break "Sold Out" onto its own line below the date/time/location row */
@media (max-width: 1359px) and (min-width: 768px) {
  .event-card--booking.event-card--booking-sold-out .booking-header .event-card__meta .event-card__meta-sold-out {
    flex-basis: 100%;
    text-align: center;
  }
}

.event-card--booking.event-card--booking-sold-out .booking-left-image,
.event-card--booking.event-card--booking-sold-out .event-card__image img {
  opacity: 0.5;
}


/* ============================================================
   Waitlist screen — message, similar events, checkboxes
   ============================================================ */

/* Sorry message paragraph at the top of the waitlist right column */
.booking-waitlist-message {
  font-family: var(--type-family-body);
  font-size: var(--type-size-body-md);
  line-height: 1.5;
  color: var(--color-text-default);
  margin: 0;
}

/* Similar events — mini-list of related workshops */
.booking-similar-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
  padding: var(--space-component-md);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-card);
}

.booking-similar-events__label {
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-muted);
  font-weight: var(--type-weight-semibold);
  margin: 0;
}

.booking-similar-events__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: var(--space-component-sm);
}

.booking-similar-events__list > li {
  flex: 1 1 0;
  min-width: 0;
}

/* Mobile — stack vertically */
@media (max-width: 767px) {
  .booking-similar-events__list {
    flex-direction: column;
  }
}

.booking-similar-events__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
  padding: var(--space-component-md) var(--space-component-lg);
  background: transparent;
  border: none;
  text-decoration: none;
  height: 100%;
  box-sizing: border-box;
  isolation: isolate;
}

.booking-similar-events__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tile-bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(var(--shadow-card));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.booking-similar-events__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
  transition: transform 0.15s ease;
  transform-origin: center;
}

.booking-similar-events__link:hover::before {
  transform: scale(0.97);
  filter: drop-shadow(var(--shadow-card-hover));
}

.booking-similar-events__link:hover .booking-similar-events__content {
  transform: scale(0.95);
}

.booking-similar-events__list > li:nth-child(1) .booking-similar-events__link {
  --tile-bg: url("/public/images/ui/card-tile-mini-event-1.webp");
}

.booking-similar-events__list > li:nth-child(2) .booking-similar-events__link {
  --tile-bg: url("/public/images/ui/card-tile-mini-event-2.webp");
}


.booking-similar-events__meta {
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-muted);
}

.booking-similar-events__title {
  font-family: var(--type-family-body);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-semibold);
  color: var(--color-text-default);
}

.booking-similar-events__date {
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-subtle);
}

/* Waitlist checkboxes — both ticked by default */
.booking-waitlist-checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
}

.booking-waitlist-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-component-sm);
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  color: var(--color-text-default);
  cursor: pointer;
  line-height: 1.4;
  position: relative;
}

/* The native input is the accessibility source of truth but visually
   hidden — tab navigation + form submission still work. The two
   adjacent <img>s provide the visual state via CSS selectors. */
.booking-waitlist-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.booking-waitlist-checkbox__img {
  width: var(--space-component-lg);    /* 24px — matches the previous native box */
  height: var(--space-component-lg);
  flex-shrink: 0;
  display: block;
}

/* Default: show unchecked icon, hide checked icon */
.booking-waitlist-checkbox__img--checked   { display: none; }
.booking-waitlist-checkbox__img--unchecked { display: block; }

/* When the input is :checked — swap the two icons */
.booking-waitlist-checkbox__input:checked ~ .booking-waitlist-checkbox__img--checked   { display: block; }
.booking-waitlist-checkbox__input:checked ~ .booking-waitlist-checkbox__img--unchecked { display: none; }