/* =============================================================================
   PILATES HUNTER — booking & pricelist
   -----------------------------------------------------------------------------
   1. Booking form (progressive steps + price summary)
   2. Payment steps
   3. Pricelist cardholder
   ========================================================================== */

/* 1. -------------------------------------------------------- BOOKING FORM */
.booking {
  max-width: 52rem;
  margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}

.booking__step { min-width: 0; }
.booking__step[hidden] { display: none; }
.booking__step + .booking__step,
.booking__summary,
.booking__payment {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.booking__legend {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  font-family: var(--serif);
  font-weight: 470;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.booking__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--blush);
  color: var(--red-deep);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9rem;
}

.booking__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
  /* Every option the same height, across rows as well as within one. Grid
     rows size to their own content by default, so a package row that wrapped
     onto a second line came out shorter than the first (measured 130px then
     111px) and the grid read as ragged. These cards are small and their
     content varies by a line or two, so one uniform row height costs almost
     no space and removes the raggedness entirely. */
  grid-auto-rows: 1fr;
}
.booking__options--types { grid-template-columns: repeat(3, 1fr); }

.booking__option {
  position: relative;
  display: grid;
  gap: 0.15rem;
  cursor: pointer;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
/* The radio is visually hidden but stays a real, hit-testable, keyboard-
   focusable control: it fills the option so a click (or a forced test click)
   anywhere on the card lands on the input itself. `pointer-events: none` +
   a 1px box (as first drafted) routed clicks to the grid container instead,
   so neither a mouse click nor Playwright's check({force:true}) ever toggled
   it. Selected / focus state is still driven by :has() on the label. */
.booking__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.booking__option:hover { border-color: var(--mist); }
.booking__option:has(input:checked) {
  border-color: var(--red);
  background: var(--blush);
  box-shadow: var(--shadow-sm);
}
.booking__option:has(input:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.booking__option-name { font-weight: 600; color: var(--ink); }
.booking__option-meta { font-size: 0.95rem; font-weight: 600; color: var(--red-deep); }
.booking__option-hint { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45; }

/* Certification chip (booking step 4). Same idiom and tokens as
   .instructor-card__badge on the roster cards — blush ground, --red-deep text,
   pill radius — so a credential looks the same wherever it appears. Only the
   instructor group opts in (ui.optionMarkup's 6th argument); every other
   step's meta stays the price line above.
   `align-self: start` keeps it hugging its text instead of stretching to the
   grid column, and the checked-state override matters: .booking__option's own
   selected background IS --blush, so a blush chip would vanish into a selected
   card. On paper it stays readable at the same contrast. */
/* A bullet line, not a pill. These are the studio's verbatim certification
   sentences and they run to three lines for several instructors — inside a
   rounded chip that reads as a block of text with a border, not as a tag. A
   marker plus a hanging indent stays clean whatever the length, and matches
   the red-marker list idiom already used in the detail modal. */
.booking__option-tag {
  position: relative;
  align-self: stretch;
  margin-top: 0.35rem;
  padding-left: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}
.booking__option-tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
}

.booking__totals { margin: 0; }
.booking__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.booking__row dt { color: var(--ink-soft); font-size: 0.92rem; }
.booking__row dd { font-weight: 600; text-align: right; }

.booking__grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  background: var(--blush);
  border-radius: var(--radius-sm);
}
.booking__grand span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.booking__grand strong {
  font-family: var(--serif);
  font-weight: 470;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  color: var(--red-deep);
}
.booking__validity {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* The trailing studio details + map stand-in. Previously this block also
   carried .container (which centred it); after Task 7 split #contact into a
   section head + form + details, .contact__inner needs to centre itself. */
.contact__inner { margin-inline: auto; }

@media (max-width: 620px) {
  .booking__options--types { grid-template-columns: 1fr; }
  .booking__row { flex-direction: column; gap: 0.1rem; }
  .booking__row dd { text-align: left; }
}

/* 2. ------------------------------------------------------------- PAYMENT */
.booking__legend--sub { margin-top: 1.75rem; }

.booking__bank {
  margin: 1rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
.booking__bank[hidden] { display: none; }
.booking__bank .booking__row:last-child { border-bottom: 0; }

.booking__hint {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.booking__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}
.booking__field { display: grid; gap: 0.35rem; margin: 0; }
.booking__field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.booking__field input {
  padding: 0.75rem 0.95rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  transition: border-color 0.2s var(--ease);
}
.booking__field input:focus-visible {
  border-color: var(--red);
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.booking__field-hint { font-size: 0.8rem; color: var(--mist); }

/* Under the WhatsApp CTA: what the buyer is agreeing to, one click away. */
.booking__terms {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--ink-soft);
}
.booking__terms a { color: var(--red); border-bottom: 1px solid currentColor; }

.booking__noscript {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.booking__noscript a { color: var(--red); border-bottom: 1px solid currentColor; }

/* 3. --------------------------------------------------- PRICELIST CARDHOLDER */
/* Standing payment-method card, above the pricelist in #contact. Deliberately
   quiet — it is reference information a visitor reads once, not a call to
   action — so it borrows the booking card's own surface rather than
   introducing a new one. The rows reuse .booking__row, which is why the
   account number aligns with the totals further down. */
.payment-method {
  max-width: 52rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.payment-method .eyebrow { margin-bottom: 0.75rem; }
.payment-method__lead {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.payment-method__details { margin: 0; }
.payment-method__details dd { font-weight: 600; }

.pricelist { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.pricelist__note {
  max-width: 52rem;
  margin: 0 auto 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  text-align: center;
}
.pricelist__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  /* Stretch, not start. With `align-items: start` each card sized to its own
     content, so three cards sitting side by side in the same row ended at
     three different heights (measured 830 / 800 / 824px) and their bottom
     edges and CTAs never lined up. Stretching equalises the cards in a row
     without forcing every ROW to match, which matters because the
     appointment-only card sits alone on its own row and must stay short. */
  align-items: stretch;
}

.pricecard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.pricecard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pricecard__media { aspect-ratio: 16 / 10; overflow: hidden; }
.pricecard__media img { width: 100%; height: 100%; object-fit: cover; }
/* flex-grow so the body fills whatever height the row settled on, and
   align-content: start so the content still stacks from the top rather than
   spreading out. .pricecard__actions then takes the leftover space with
   margin-top: auto and every card's buttons land on one line. */
.pricecard__body {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.pricecard__ratio {
  justify-self: start;
  padding: 0.25rem 0.7rem;
  background: var(--blush);
  color: var(--red-deep);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pricecard h3 {
  font-family: var(--serif);
  font-weight: 470;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.pricecard__text { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }

.pricecard__table-wrap { overflow-x: auto; margin-top: 0.5rem; }
.pricecard__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.pricecard__table th,
.pricecard__table td {
  padding: 0.5rem 0.4rem;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pricecard__table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}
.pricecard__table tbody th {
  text-align: left;
  font-weight: 600;
  display: grid;
  gap: 0.1rem;
}
.pricecard__sessions {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--mist);
  text-transform: none;
  letter-spacing: 0;
}
.pricecard__hint { font-size: 0.8rem; color: var(--ink-soft); }

.pricecard__sub {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.pricecard__instructors { display: grid; gap: 0.6rem; }
.pricecard__instructor h5 { font-size: 0.85rem; font-weight: 600; }
.pricecard__instructor ul {
  list-style: none;
  padding: 0;
  margin: 0.15rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.pricecard__instructor li {
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: var(--cream);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.pricecard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  margin-top: auto;
}
.pricecard__actions .link-cta { background: none; border: 0; padding: 0 0 2px; cursor: pointer; }
.pricecard--appointment { justify-content: center; }
.pricecard--appointment .pricecard__body { gap: 0.6rem; }