/* Booking page (/book/) — ported from the standalone book.conferencecare.com.au site.
   Contact-modal styles dropped: this page links to /contact/ instead. */
/* Booking landing page — hero, patient steps, condition chips, consent + download cards.
   Only genuinely page-specific styles live here: the rebate callout uses the shared
   .callout/.callout-icon/.display-stat components and notes use .caption.
   The booking FORM moved to the portal (portal.conference.care/book, CC-1568); this page links
   to it, so all form/lookup/feedback styles are gone with it. */

/* Hero sits under the fixed header */
.bk-hero { padding-top: 128px; }

/* --- Choosing-the-patient steps --- */
.step-list {
  list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-s);
}
.step-list > li {
  counter-increment: step; position: relative;
  /* left inset clears the 32px number badge (+ its --space-m offset) */
  padding: var(--space-m) var(--space-m) var(--space-m) calc(var(--space-m) * 2 + 32px);
  background: var(--color-surface); border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
}
.step-list > li::before {
  content: counter(step);
  position: absolute; left: var(--space-m); top: var(--space-m);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--brand-25);
  border-radius: var(--radius-full);
  font-size: var(--text-md); font-weight: var(--weight-bold);
}
.step-list > li h3 { font-size: var(--text-md); margin: var(--space-3xs) 0 var(--space-2xs); }
.step-list > li p { font-size: var(--text-md); color: var(--color-ink); margin: 0 0 var(--space-2xs); }
.step-list > li p:last-child { margin-bottom: 0; }

/* Condition chips inside step 1 */
.cond-chips {
  list-style: none; margin: 0 0 var(--space-xs); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2xs);
}
.cond-chips li {
  padding: var(--space-3xs) var(--space-xs);
  background: var(--brand-50); border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-secondary);
}

/* --- Download cards --- */
.dl-list { display: flex; flex-direction: column; gap: var(--space-s); }
.dl-card {
  display: flex; align-items: center; gap: var(--space-m);
  padding: var(--space-m); background: var(--color-surface);
  border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl);
}
.dl-card .chip-ic { flex: none; }
.dl-card-body { flex: 1; }
.dl-card-body h3 { font-size: var(--text-md); margin: 0 0 var(--space-3xs); }
.dl-card-body p { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0; }
.dl-card.is-soon { opacity: .65; }
.dl-card.is-soon .btn { pointer-events: none; }

@media (max-width: 540px) {
  .dl-card { flex-direction: column; align-items: flex-start; }
  .step-list > li { padding-left: var(--space-m); padding-top: calc(var(--space-m) * 2 + 32px); }
  .cond-chips li { font-size: var(--text-2xs, 11px); }
}

/* --- Numbered cards (patient-consent trio) --- */
.num-card { position: relative; padding-top: var(--space-l, var(--space-m)); }
.card-num {
  position: absolute; top: calc(-1 * 16px); left: var(--space-m);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--brand-25);
  border-radius: var(--radius-full);
  font-size: var(--text-md); font-weight: var(--weight-bold);
  box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.15));
}

/* --- Consent ownership brackets (span 1-2 = GP, 3 = Conference.care) --- */
.consent-owners { margin-top: var(--space-s); row-gap: var(--space-2xs); }
.consent-owner {
  position: relative; margin: 0; padding-top: var(--space-2xs);
  border-top: 2px solid var(--color-primary);
  text-align: center;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-secondary);
}
.consent-owner::before, .consent-owner::after {
  content: ''; position: absolute; top: -7px; width: 2px; height: 9px;
  background: var(--color-primary);
}
.consent-owner::before { left: 0; }
.consent-owner::after { right: 0; }
@media (max-width: 760px) {
  .consent-owner { grid-column: auto !important; }
}

/* --- Download buttons: btn-ghost is a dark-background style (white on translucent white) —
   on the white dl-cards it was literally invisible. Light-surface variant, scoped here. --- */
.dl-card .btn-ghost {
  color: var(--color-primary);
  background: var(--brand-50);
  border: 1.5px solid var(--color-primary);
  backdrop-filter: none;
}
.dl-card .btn-ghost:hover { background: var(--brand-25, var(--brand-50)); }