/* ==========================================================================
   Cardinal Star Healing — booking flow (assets/css/book.css)
   --------------------------------------------------------------------------
   Loaded on /book, /book/{slug}, /booking/{token} and /pay/{token} after
   site.css. Every color, radius and font comes from the theme variables
   printed by includes/theme.php, so the Theme Studio restyles the calendar
   and the confirmation along with the rest of the site.

   Contents
     1. Stage and card
     2. /book profile page
     3. /book/{slug}: side panel + main panel, steps
     4. Calendar (keyboard-accessible grid), time-zone picker
     5. Times column + "Next"
     6. Details form
     7. /booking/{token} manage + confirmation, /pay/{token}
     8. Motion, breakpoints
     9. 2.1: stepper, notification choice, payment notes, "opens soon"
    10. 2.1: Google Meet panel, check-in due panel, change rules, Contact Amy
    11. 2.1: the 7-week course (callout, progress panel, banner, class stepper)
    12. 2.1: workshops (date tiles, rows, seat states)
    13. 2.1: breakpoints, motion and print for the new parts
   ========================================================================== */

/* 1. Stage and card
   -------------------------------------------------------------------------- */
.book-stage { position: relative; background: var(--bg); overflow: hidden; }
.book-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background:
    radial-gradient(42rem 22rem at 8% -4%, rgba(var(--primary-rgb), .10), transparent 70%),
    radial-gradient(34rem 20rem at 96% 100%, rgba(var(--accent-rgb), .07), transparent 70%);
}
[data-decor="none"] .book-stage::before { display: none; }
.book-stage > .wrap { position: relative; }
.wrap-book { max-width: 66rem; }
.wrap-book-narrow { max-width: 46rem; }
.book-card {
  position: relative; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden;
  scroll-margin-top: calc(var(--head-h) + 1rem);
}
.book-step-title, .times-title, #form-error { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
[data-shadow="lifted"] .book-card { box-shadow: var(--shadow-hover); }
[data-shadow="none"] .book-card { box-shadow: none; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--accent); }
.avatar-fallback .star { width: 45%; height: 45%; }
.book-owner {
  margin: 0 0 .25rem; font-family: var(--font-body); font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* 2. /book — the profile page
   -------------------------------------------------------------------------- */
.book-profile-band { position: relative; height: 10rem; background-size: cover; background-position: center; background-color: var(--dark); }
.book-profile-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--dark-rgb), .12) 0%, rgba(var(--dark-rgb), .55) 100%);
}
.book-profile-stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; display: none; }
.book-profile-stars .star { position: absolute; color: #fff; opacity: .55; width: .9rem; height: .9rem; }
.book-profile-stars .star:nth-child(1) { left: 9%; top: 28%; }
.book-profile-stars .star:nth-child(2) { right: 12%; top: 22%; width: 1.3rem; height: 1.3rem; opacity: .4; }
.book-profile-stars .star:nth-child(3) { left: 24%; bottom: 22%; width: .55rem; height: .55rem; }
[data-decor="stars"] .book-profile-stars { display: block; }
.book-profile-in { padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }
.book-profile-head { position: relative; z-index: 2; text-align: center; margin-top: -4rem; }
.book-profile-head .book-avatar { margin: 0 auto 1rem; border-width: 4px; }
.book-profile-title { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); margin: 0 0 .75rem; }
.book-intro { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: var(--muted); max-width: 36rem; margin: 0 auto; }
.book-group { margin-top: 2.25rem; }
.book-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin: 0 0 .8rem; }
.book-group-title {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.book-group-title .star { width: .9em; height: .9em; }
.book-group-text { margin: 0; font-size: .92rem; color: var(--muted); }
.book-list { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.book-list li + li { border-top: 1px solid var(--line); }
.book-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: 1.05rem clamp(1rem, 3vw, 1.5rem); color: inherit; text-decoration: none;
  transition: background .18s var(--ease), padding-left .18s var(--ease);
}
.book-row:hover, .book-row:focus-visible { background: var(--primary-tint); color: inherit; }
.book-row:focus-visible { outline-offset: -3px; }
.book-row-dot { width: .85rem; height: .85rem; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12); }
.book-row-body { min-width: 0; }
.book-row-name { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: var(--heading-weight); line-height: 1.3; }
.book-row-tagline { display: block; font-family: var(--font-display); font-style: italic; font-size: .95rem; color: var(--muted); margin-top: .1rem; }
.book-row-meta { display: block; margin-top: .3rem; font-size: .86rem; font-weight: 600; color: var(--primary-strong); letter-spacing: .01em; }
.book-row-chevron { color: var(--muted-2); transition: transform .2s var(--ease), color .2s var(--ease); }
.book-row:hover .book-row-chevron { transform: translateX(4px); color: var(--primary-strong); }
.book-profile-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; justify-content: center; margin: 1.75rem 0 0; text-align: center; }
.book-profile-foot .icon { color: var(--primary); }

/* 3. /book/{slug} — two panels
   -------------------------------------------------------------------------- */
.book-flow { display: grid; grid-template-columns: minmax(0, 1fr); }
.book-side { position: relative; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2rem); min-width: 0; }
.book-side::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--card-accent, var(--primary)); }
.book-side-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.book-back, .book-back-btn {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem 0; border: 0; background: none;
  color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 4px;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.book-back:hover, .book-back-btn:hover { color: var(--primary-strong); }
.book-back:hover .icon, .book-back-btn:hover .icon { transform: translateX(-3px); }
.book-back .icon, .book-back-btn .icon { transition: transform .15s var(--ease); }
.book-logo { display: block; height: 2.6rem; width: auto; max-width: 9rem; object-fit: contain; }
.book-logo-mark { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); }
.book-logo-mark .star { width: 1.3rem; height: 1.3rem; }
.book-side-body .book-avatar { margin: 0 0 .85rem; }
.book-service-name { font-size: clamp(1.45rem, 1.25rem + .8vw, 1.85rem); line-height: 1.2; margin: .15rem 0 .5rem; }
.book-tagline { font-family: var(--font-display); font-style: italic; color: var(--muted); margin: 0 0 1rem; }
.book-meta { margin: 0 0 1.25rem; font-size: .95rem; }
.book-meta li { align-items: flex-start; }
.book-meta .icon { color: var(--primary); margin-top: .12rem; }
.book-meta-price span { font-weight: 700; }
.book-meta-when span, .book-meta-tz span { font-weight: 600; }
html.js [data-step="1"] .book-meta-when, html.js [data-step="1"] .book-meta-tz { display: none; }
.book-desc { font-size: .95rem; color: var(--muted); }
.book-desc p { margin-bottom: .75em; }
.book-delivery-note {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1rem; padding: .7rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-input); font-size: .88rem; color: var(--muted);
}
.book-delivery-note .icon { color: var(--primary); margin-top: .15rem; }
.book-policy { margin-top: .5rem; }
.book-policy summary { font-size: .95rem; padding-top: .85rem; padding-bottom: .85rem; }
.book-policy-title { flex: 1 1 auto; min-width: 0; }
.book-policy-hint { text-transform: none; font-variant: normal; letter-spacing: normal; font-weight: 400; }
.book-policy .accordion-body { color: var(--muted); }
.book-moving {
  display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 .5rem; padding: .9rem 1rem;
  background: var(--primary-tint); border: 1px solid var(--primary-soft); border-radius: var(--radius-input);
}
.book-moving > .star { width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.book-moving-when { font-family: var(--font-display); font-size: 1.05rem; margin: .1rem 0 .5rem; }

.book-main { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem); min-width: 0; }
.book-step { position: relative; }
.book-step-head { margin-bottom: .25rem; }
.book-step-eyebrow {
  margin: 0 0 .35rem; font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--primary-strong);
}
.book-step-title { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); margin: 0 0 1.25rem; outline: none; }
.book-step-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.book-step-head .book-back-btn { margin-bottom: .9rem; }
html.js[data-motion="on"] .book-step.is-entering { animation: book-step-in .4s var(--ease) both; }
@keyframes book-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 4. Calendar and time zone
   -------------------------------------------------------------------------- */
.pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pick-cal { min-width: 0; }
.cal { max-width: 24rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.cal-title { margin: 0; font-size: 1.15rem; font-weight: 600; text-align: center; }
.cal-nav {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.cal-nav:hover:not([disabled]) { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary-strong); transform: translateY(-1px); }
.cal-nav[disabled] { opacity: .32; cursor: default; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.cal-dow span { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .4rem 0 .55rem; }
.cal-dow abbr { text-decoration: none; }
.cal-body { display: grid; gap: .25rem; min-height: 15.75rem; align-content: start; transition: opacity .2s var(--ease); }
.cal-body.is-loading { opacity: .55; }
.day {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 3rem; aspect-ratio: 1;
  margin: 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted-2);
  font-family: var(--font-body); font-size: .98rem; font-weight: 500; line-height: 1; cursor: default;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
@supports not (aspect-ratio: 1) { .day { height: 2.75rem; } }
.day.is-blank { visibility: hidden; }
.day.is-open { background: var(--primary-soft); color: var(--primary-strong); font-weight: 700; cursor: pointer; }
.day.is-open:hover { background: var(--primary); color: var(--on-primary); transform: scale(1.06); }
.day.is-open:hover .star { color: var(--on-primary); }
.day.is-open .day-num { transform: translateY(-14%); }
.day .star { position: absolute; left: 50%; bottom: 13%; width: .42rem; height: .42rem; margin-left: -.21rem; color: var(--accent); }
.day.is-today { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.day.is-today.is-open { box-shadow: inset 0 0 0 1.5px rgba(var(--primary-rgb), .7); }
.day.is-selected, .day.is-selected:hover {
  background: var(--primary); color: var(--on-primary); font-weight: 700; transform: none;
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), .38);
}
.day.is-selected .star { color: var(--on-primary); }
.day.is-current { outline: 2px dashed var(--secondary); outline-offset: -3px; }
.day:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 1; }
.cal-status { min-height: 1.4rem; margin: .7rem 0 0; font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.cal-status:empty { margin-top: 0; min-height: 0; }
.cal-status.is-error { color: var(--danger); font-weight: 500; }
.cal-status.is-loading::before {
  content: ""; width: .9rem; height: .9rem; flex: none; border-radius: 50%;
  border: 2px solid rgba(var(--primary-rgb), .3); border-top-color: var(--primary); animation: book-spin .8s linear infinite;
}
@keyframes book-spin { to { transform: rotate(360deg); } }
.cal-legend { display: flex; align-items: center; gap: .45rem; margin: .5rem 0 0; font-size: .85rem; color: var(--muted); }
.cal-legend .star { width: .6rem; height: .6rem; }

.tz { position: relative; margin-top: 1.25rem; }
.tz-label { display: block; margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tz-btn {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; min-height: 2.6rem; padding: .4rem .85rem .4rem .8rem;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: .92rem; font-weight: 500; text-align: left; transition: border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.tz-btn:hover { border-color: var(--primary); color: var(--primary-strong); }
.tz-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18); }
.tz-btn .icon-globe { color: var(--primary); }
.tz-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-caret { color: var(--muted); transition: transform .2s var(--ease); }
.tz-btn[aria-expanded="true"] .tz-caret { transform: rotate(180deg); }
.tz-pop {
  position: absolute; z-index: 40; left: 0; top: calc(100% + .4rem); width: min(23rem, calc(100vw - 2 * var(--gutter)));
  padding: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-hover);
}
html.js[data-motion="on"] .tz-pop:not([hidden]) { animation: book-pop .18s var(--ease); }
@keyframes book-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tz-search { margin-bottom: .4rem; }
.tz-list { list-style: none; margin: 0; padding: 0; max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; }
.tz-group { padding: .65rem .6rem .25rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tz-opt {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem .65rem;
  border-radius: var(--radius-input); font-size: .92rem; cursor: pointer; color: var(--ink);
}
.tz-opt.is-active { background: var(--primary-soft); color: var(--primary-strong); }
.tz-opt[aria-selected="true"] { font-weight: 700; }
.tz-opt[aria-selected="true"] .tz-name::before { content: "\2726\00a0"; color: var(--accent); font-size: .8em; }
.tz-name { min-width: 0; }
.tz-now { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .86rem; }
.tz-opt.is-active .tz-now { color: inherit; }
.tz-empty { padding: .75rem .65rem; font-size: .9rem; color: var(--muted); }

/* 5. Times and the "Next" hand-off
   -------------------------------------------------------------------------- */
.pick-times { min-width: 0; }
.times-title { margin: 0 0 .75rem; font-family: var(--font-body); font-size: .98rem; font-weight: 600; outline: none; }
.times-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.time-row { display: flex; gap: .4rem; min-width: 0; }
.time {
  flex: 1 1 auto; min-width: 0; min-height: 2.9rem; padding: .5rem .75rem; border-radius: var(--radius-input);
  border: 1.5px solid rgba(var(--primary-rgb), .55); background: var(--surface); color: var(--primary-strong);
  font-family: var(--font-body); font-size: .98rem; font-weight: 700; letter-spacing: .01em; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.time:hover { border-color: var(--primary); background: var(--primary-tint); transform: translateY(-1px); }
.time:active { transform: none; }
.time-row.is-picked .time, .time-row.is-picked .time:hover { background: var(--dark); border-color: var(--dark); color: var(--on-dark); transform: none; }
.time-next { flex: 1 1 auto; min-height: 2.9rem; padding: .5rem .75rem; border-radius: var(--radius-input); font-size: .95rem; }
html.js[data-motion="on"] .time-next:not([hidden]) { animation: book-next-in .22s var(--ease) both; }
@keyframes book-next-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* 6. Details form (step 2)
   -------------------------------------------------------------------------- */
.book-chosen {
  display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 1.5rem; padding: .9rem 1rem;
  background: var(--primary-tint); border: 1px solid var(--primary-soft); border-radius: var(--radius-input);
}
.book-chosen > .icon { flex: none; color: var(--primary); margin-top: .15rem; }
.book-chosen-when { display: block; font-family: var(--font-display); font-size: 1.08rem; font-weight: var(--heading-weight); line-height: 1.35; }
.book-chosen-tz { display: block; margin-top: .15rem; }
.book-form { max-width: 36rem; }
.book-form .field { margin-bottom: 1.1rem; }
.book-form textarea.input { min-height: 7rem; }
.book-price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .25rem 0 1.25rem; padding: .85rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.book-price-label { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.book-consent .check { font-size: .95rem; }
.book-consent .check a { white-space: nowrap; }
.book-move-note { margin: 0 0 1.25rem; color: var(--muted); }
.book-form-error { margin: 0 0 1rem; }
.book-actions { margin-top: 1.5rem; }
.book-submit { width: 100%; }
.book-fine { display: flex; gap: .4rem; align-items: flex-start; margin: .9rem 0 0; }
.book-fine .icon { flex: none; margin-top: .2rem; color: var(--primary); }
.btn.is-busy { opacity: .8; }
.btn.is-busy::before {
  content: ""; width: 1em; height: 1em; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: book-spin .7s linear infinite;
}
html:not(.js) .book-step[hidden] { display: none; }

/* 7. Manage page, confirmation, payment
   -------------------------------------------------------------------------- */
.booking-card { padding: clamp(1.5rem, 4vw, 3rem); }
.booking-head { position: relative; text-align: center; margin: 0 0 2rem; }
.booking-head .eyebrow { justify-content: center; }
.booking-head h1 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem); margin-bottom: .5rem; }
.booking-head .lead { max-width: 34rem; margin: 0 auto; }
.booking-burst { display: flex; justify-content: center; align-items: flex-end; gap: .6rem; margin: 0 0 1.1rem; }
.booking-burst .star { width: 2.1rem; height: 2.1rem; }
.booking-burst .star:nth-child(1), .booking-burst .star:nth-child(3) { width: .95rem; height: .95rem; opacity: .7; }
html.js[data-motion="on"] .booking-burst .star { animation: book-burst .9s var(--ease) both; }
html.js[data-motion="on"] .booking-burst .star:nth-child(1) { animation-delay: .15s; }
html.js[data-motion="on"] .booking-burst .star:nth-child(3) { animation-delay: .3s; }
@keyframes book-burst {
  0% { transform: scale(.2) rotate(-40deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.booking-hold {
  display: inline-flex; align-items: center; gap: .55rem; margin: 1.1rem auto 0; padding: .55rem 1.1rem;
  background: var(--warn-soft); color: var(--warn); border-radius: var(--radius); font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.booking-hold.is-low { background: var(--danger-soft); color: var(--danger); }
.booking-hold.is-ended { background: var(--surface-2); color: var(--muted); }
/* 2.7 (stripe-down-on-return-invites-second-payment): "We are confirming your payment" (no Pay button, the page refreshes itself) */
.booking-hold.is-confirming { background: var(--surface-2); color: var(--ink); }
.pay-confirming { display: flex; align-items: flex-start; gap: .55rem; margin: 1.25rem 0 0; color: var(--muted); }
.pay-confirming svg { flex: none; margin-top: .15rem; color: var(--success); }
.pay-confirming strong { color: var(--ink); }
.booking-dl { display: grid; margin: 0 0 1.75rem; border-top: 1px solid var(--line); }
.booking-dl > div { display: grid; grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr); gap: .5rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.booking-dl dt { padding-top: .15rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.booking-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.booking-when { font-family: var(--font-display); font-size: 1.1rem; font-weight: var(--heading-weight); }
.booking-dl-answers { margin: 0; }
.booking-dl-answers dt { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.booking-answers { margin: -1rem 0 1.75rem; }
.booking-answers summary { font-size: .95rem; }
.booking-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.75rem; }
.booking-next { position: relative; overflow: hidden; margin: 0 0 1.75rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--tint); color: var(--on-tint); border-radius: var(--radius-card); }
.booking-next::after {
  content: ""; position: absolute; right: -2rem; top: -2rem; width: 9rem; height: 9rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--primary-rgb), .16), transparent 70%);
}
.booking-next h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; margin: 0 0 .6rem; }
.booking-next h2 .star { width: .9em; height: .9em; }
.booking-next p { position: relative; }
.booking-next .muted { color: var(--on-tint); opacity: .75; }
.booking-next a { color: inherit; }
.booking-change { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.booking-change h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.booking-change .booking-actions { margin-bottom: 1rem; }
.booking-cancel { margin-top: .5rem; }
.booking-cancel summary { font-size: .95rem; font-weight: 600; color: var(--muted); }
.booking-cancel summary:hover { color: var(--danger); }
.booking-cancel-form { max-width: 28rem; }
.booking-ref { margin: 1.75rem 0 0; text-align: center; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.booking-ref a { text-transform: none; letter-spacing: 0; }
.booking-foot { text-align: center; margin: 1.25rem 0 0; }
.is-booking-cancelled .booking-card { border-top: 4px solid var(--line-strong); }
.is-booking-live .booking-card { border-top: 4px solid var(--primary); }
.is-booking-pending .booking-card, .is-booking-expired .booking-card, .is-booking-paid_conflict .booking-card, .is-booking-pay .booking-card { border-top: 4px solid var(--secondary); }

/* One column inside the 46rem card: summary first, then the button. Two columns
   left the button narrower than its own label at desktop widths. */
.pay-grid { display: grid; gap: 1.5rem; align-items: start; margin: 0 0 .5rem; }
.pay-summary { padding: clamp(1.1rem, 3vw, 1.5rem); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-card); }
.pay-summary-title { font-size: 1.1rem; margin: 0 0 .75rem; }
.pay-dl { margin-bottom: 0; border-top: 0; }
.pay-dl > div { grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr); padding: .7rem 0; }
.pay-dl dd { overflow-wrap: break-word; }
.pay-dl > div:last-child { border-bottom: 0; }
.pay-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding-top: 1rem; border-top: 2px solid var(--line-strong); }
.pay-total-label { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pay-amount { font-family: var(--font-display); font-size: 2rem; font-weight: var(--heading-weight); line-height: 1; }
.pay-amount small { font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.pay-action { display: flex; flex-direction: column; gap: 1rem; }
.pay-button { white-space: normal; padding-left: 1.25rem; padding-right: 1.25rem; }
.pay-button .icon-lock { flex: none; width: 1.1em; height: 1.1em; }
.pay-secure { display: flex; align-items: flex-start; justify-content: center; gap: .4rem; margin: .8rem 0 0; font-size: .85rem; color: var(--muted); text-align: left; }
.pay-secure .icon { flex: none; color: var(--success); margin-top: .15rem; }
.pay-dev { text-align: center; }
.pay-fine { margin: 0; }
.pay-error { margin-bottom: 1.5rem; }

/* 8. Motion and breakpoints
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .book-step.is-entering, .tz-pop, .time-next, .booking-burst .star { animation: none !important; }
  .day, .time, .book-row, .cal-nav { transition: none !important; }
  .day.is-open:hover { transform: none; }
}
html[data-motion="off"] .day.is-open:hover { transform: none; }
html[data-motion="off"] .meet-spinner::after { animation: none; border-color: rgba(var(--primary-rgb), .45); }

@media (min-width: 480px) {
  .times-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .book-submit { width: auto; min-width: 16rem; }
  .booking-head h1 { margin-bottom: .6rem; }
}

@media (min-width: 760px) {
  .pay-grid { gap: 1.75rem; }
  .pay-secure { justify-content: center; }
}

@media (min-width: 900px) {
  .book-flow { grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr); align-items: stretch; }
  .book-side { border-bottom: 0; border-right: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.25rem); }
  .book-side::before { height: 100%; width: 4px; right: auto; }
  .book-main { padding: clamp(1.75rem, 3vw, 2.5rem); }
  .pick.has-day { grid-template-columns: minmax(0, 1fr) 12.5rem; gap: 1.75rem; }
  .pick.has-day .cal { max-width: none; }
  .times-list { grid-template-columns: minmax(0, 1fr); max-height: 25.5rem; overflow-y: auto; overscroll-behavior: contain; padding: .15rem .25rem .15rem .15rem; scrollbar-width: thin; }
  .time-row { flex-direction: row; }
  html.js[data-motion="on"] .pick.has-day .pick-times { animation: book-times-in .4s var(--ease) both; }
  @keyframes book-times-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
  .book-profile-band { height: 11.5rem; }
}

@media (min-width: 1200px) {
  .book-flow { grid-template-columns: 22rem minmax(0, 1fr); }
  .pick.has-day { grid-template-columns: minmax(0, 1fr) 13.5rem; }
}

@media print {
  .book-stage::before, .booking-burst, .book-profile-stars { display: none !important; }
  .book-card { box-shadow: none; border-color: #ccc; }
  .booking-actions, .booking-change, .booking-foot, .pay-action { display: none !important; }
}

/* 9. 2.1: stepper, notification choice, payment notes, "opens soon"
   -------------------------------------------------------------------------- */
.book-steps {
  display: flex; align-items: flex-start; gap: .25rem; margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: none;
}
.book-steps-item {
  position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); text-align: center;
}
.book-steps-item + .book-steps-item::before {
  content: ""; position: absolute; top: .95rem; right: calc(50% + 1.25rem); left: calc(-50% + 1.25rem); height: 2px;
  background: var(--line); border-radius: 2px;
}
.book-steps-item.is-done + .book-steps-item::before, .book-steps-item.is-current::before { background: rgba(var(--primary-rgb), .55); }
.book-steps-n {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; flex: none;
  border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); color: var(--muted);
  font-family: var(--font-body); font-size: .85rem; font-weight: 700; line-height: 1;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.book-steps-check { display: none; }
.book-steps-item.is-current .book-steps-n { border-color: var(--primary); background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .16); }
.book-steps-item.is-current { color: var(--ink); }
.book-steps-item.is-done .book-steps-n { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.book-steps-item.is-done .book-steps-num { display: none; }
.book-steps-item.is-done .book-steps-check { display: block; }
.book-steps-label { display: block; max-width: 100%; overflow-wrap: anywhere; }
.pay-card .book-steps { margin-bottom: 2rem; }

.book-step-lead { margin: -.6rem 0 1.25rem; color: var(--muted); }
.book-chosen-label { display: block; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-strong); font-size: .72rem; margin-bottom: .1rem; }
.book-meta-strong span { font-weight: 700; color: var(--ink); }
.book-row-badge { margin-top: .5rem; white-space: normal; }

/* Email / text choice: two tappable option cards */
.notify { margin: .5rem 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.notify-legend { display: block; margin: 0 0 .6rem; padding: 0; font-weight: 600; font-size: .95rem; line-height: 1.4; }
.notify-options { display: grid; gap: .6rem; }
.notify-opt {
  display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius-input); background: var(--surface);
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.notify-opt:hover { border-color: rgba(var(--primary-rgb), .55); }
.notify-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.notify-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus); }
.notify-opt input { margin-top: .2rem; }
.notify-opt-body { display: grid; gap: .2rem; min-width: 0; }
.notify-opt-title { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--ink); }
.notify-opt-title .icon { color: var(--primary); }
.notify-opt-text { font-size: .86rem; line-height: 1.5; color: var(--muted); }
.notify-addr { overflow-wrap: anywhere; color: var(--ink); }
.notify .field-error { margin-top: .5rem; }
.notify-mobile { margin: .85rem 0 0; }
.notify-mobile[hidden] { display: none; }

.book-pay-note, .book-pay-line {
  display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1rem; font-size: .92rem; color: var(--muted);
}
.book-pay-note .icon, .book-pay-line .icon { flex: none; margin-top: .2rem; color: var(--success); }
.book-pay-note strong { color: var(--ink); }
.book-pay-line { justify-content: center; text-align: left; margin: 1.5rem auto 0; max-width: 36rem; }
.book-actions .btn .icon-arrow { transition: transform .18s var(--ease); }
.book-actions .btn:hover .icon-arrow { transform: translateX(3px); }
.book-no-time {
  display: flex; gap: .75rem; align-items: flex-start; margin: -.25rem 0 1.5rem; padding: .9rem 1.1rem;
  background: var(--secondary-soft); border-radius: var(--radius-input); color: var(--ink);
}
.book-no-time > .icon { flex: none; margin-top: .15rem; color: var(--secondary-strong); }
.book-no-time p { margin: 0; }
.book-question textarea.input { min-height: 8.5rem; font-size: 1.02rem; }
.book-late-note { margin: 0 0 1.25rem; }

.book-closed {
  display: flex; gap: 1rem; align-items: flex-start; margin: 1.5rem 0; padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--tint); color: var(--on-tint); border-radius: var(--radius-card);
}
.book-closed-flow { margin-top: 0; }
.book-closed-mark { display: inline-flex; flex: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); color: var(--accent); }
.book-closed-mark .star { width: 1.2rem; height: 1.2rem; }
.book-closed-body { min-width: 0; }
.book-closed-title { font-size: 1.35rem; margin: .2rem 0 .5rem; color: inherit; }
.book-closed p { margin: 0 0 1rem; }
.book-closed .btn-outline { color: var(--on-tint); }
.book-closed .btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* 10. 2.1: Google Meet panel, check-in due panel, change rules, Contact Amy
   -------------------------------------------------------------------------- */
.meet-panel {
  position: relative; display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.75rem; padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 1.5px solid var(--line); border-radius: var(--radius-card); background: var(--surface-2);
}
.meet-panel.is-ready { border-color: rgba(var(--primary-rgb), .5); background: var(--primary-tint); }
.meet-panel.is-big { padding: clamp(1.4rem, 4vw, 2rem); }
.meet-icon {
  display: inline-flex; flex: none; width: 3rem; height: 3rem; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface); color: var(--primary); box-shadow: 0 0 0 1px var(--line);
}
.meet-panel.is-ready .meet-icon { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px rgba(var(--primary-rgb), .3); }
.meet-body { min-width: 0; flex: 1; }
.meet-title { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); margin: .25rem 0 .4rem; }
.meet-panel.is-big .meet-title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.meet-text { margin: 0 0 1rem; }
.meet-panel.is-later .meet-text, .meet-panel.is-pending .meet-text { margin-bottom: 0; color: var(--muted); }
.meet-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 .9rem; }
.meet-join { white-space: normal; }
/* 2.7: the Join button waits for the booked start ("Opens at 6:00 PM" under it) and is usable until the
   end + the time after, like the portal (csh_book_join_html; the same hooks inside the course stepper). */
.meet-join-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .4rem; max-width: 100%; }
.meet-join-wrap[hidden] { display: none; }
.meet-join-wrap.is-waiting .btn[disabled] { opacity: .62; }
.meet-join-opens { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; color: var(--muted); }
.meet-join-opens .icon { color: var(--primary); flex: none; }
.course-step-actions .meet-join-wrap { gap: .25rem; }
.course-step-actions .meet-join-opens { font-size: .82rem; }
.meet-link { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: 0 0 .75rem; font-size: .92rem; overflow-wrap: anywhere; }
.meet-link a { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; color: var(--link); }
.meet-copy {
  padding: .25rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.meet-copy:hover { border-color: var(--primary); color: var(--primary-strong); }
.meet-note { display: flex; gap: .45rem; align-items: flex-start; margin: 0; font-size: .88rem; color: var(--muted); }
.meet-note .icon { flex: none; margin-top: .15rem; color: var(--primary); }
.meet-buffer { display: flex; gap: .45rem; align-items: flex-start; margin: .6rem 0 0; font-size: .88rem; color: var(--muted); }
.meet-buffer .icon { flex: none; margin-top: .15rem; color: var(--primary); }
.meet-spinner::after {
  content: ""; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  border: 2.5px solid rgba(var(--primary-rgb), .25); border-top-color: var(--primary); animation: book-spin .9s linear infinite;
}

.order-due {
  display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.75rem; padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: var(--radius-card); background: var(--secondary-soft); color: var(--ink);
}
.order-due-icon { display: inline-flex; flex: none; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--secondary); color: var(--on-secondary); }
.order-due-label { margin: 0 0 .15rem; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--secondary-strong); }
.order-due-when { margin: 0 0 .5rem; font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: var(--heading-weight); line-height: 1.3; }

.booking-notice { margin: 0 0 1.5rem; }
.booking-change-text { margin: 0 0 1.1rem; color: var(--muted); max-width: 40rem; }
.booking-late-note { display: flex; gap: .4rem; align-items: flex-start; margin: -.4rem 0 1rem; }
.booking-late-note .icon { flex: none; margin-top: .2rem; }
.booking-cancel-confirm { margin: 0 0 1rem; }
.booking-calendar { margin-top: -.25rem; }
.booking-refund { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1.5rem; padding: .85rem 1rem; border-radius: var(--radius-input); background: var(--success-soft); color: var(--success); font-weight: 500; }
.booking-refund.is-pending { background: var(--warn-soft); color: var(--warn); }
.booking-refund .icon { flex: none; margin-top: .15rem; }
.booking-head-title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin-bottom: .5rem; }

.contact-amy {
  margin: 1.5rem 0 0; padding: clamp(1.1rem, 3vw, 1.5rem); border-radius: var(--radius-card);
  background: var(--surface-2); border: 1px solid var(--line); outline: none;
}
.contact-amy:target, .contact-amy:focus { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25); }
.contact-amy-title { display: flex; align-items: center; gap: .55rem; font-size: 1.2rem; margin: 0 0 .5rem; }
.contact-amy-title .icon { flex: none; color: var(--primary); }
.contact-amy-lead { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }
.contact-amy-form .form-actions { margin-top: .25rem; }

.booking-messages { margin: 1.5rem 0 0; }
.booking-messages-title { font-size: 1.05rem; margin: 0 0 .6rem; }
.booking-messages-list li { padding: .75rem 1rem; border-left: 3px solid var(--primary-soft); background: var(--surface-2); border-radius: 0 var(--radius-input) var(--radius-input) 0; }
.booking-messages-list li + li { margin-top: .5rem; }
.booking-message-meta { margin: 0 0 .2rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.booking-message-body { margin: 0; overflow-wrap: anywhere; }

.booking-prefs { margin-top: 1.75rem; }
.booking-prefs summary { flex-wrap: wrap; gap: .25rem 1rem; font-size: 1.05rem; }
.booking-prefs-now { margin-left: auto; font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--muted); }
.booking-prefs-form .form-actions { margin-top: 0; }

/* 11. 2.1: the 7-week course
   -------------------------------------------------------------------------- */
.course-callout {
  display: flex; gap: .9rem; align-items: flex-start; margin: 0 0 1.5rem; padding: 1rem 1.15rem;
  border-radius: var(--radius-input); background: var(--accent-soft); color: var(--ink);
  border: 1.5px solid rgba(var(--accent-rgb), .45); border-left-width: 5px;
}
.course-callout-mark { display: inline-flex; flex: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.course-callout-title { margin: .1rem 0 .3rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: var(--heading-weight); line-height: 1.3; }
.course-callout-text { margin: 0; font-size: .95rem; line-height: 1.55; }
.course-callout-text strong { font-weight: 800; letter-spacing: .04em; color: var(--accent-text, var(--accent)); }
.course-callout-side { margin: 0 0 1.25rem; padding: .85rem 1rem; }
.course-callout-side .course-callout-mark { width: 2.1rem; height: 2.1rem; }
.course-callout-side .course-callout-mark .icon { width: 18px; height: 18px; }
.course-callout-form { margin-top: .5rem; }
.course-callout-pay { margin-bottom: 1.75rem; }

.course-progress {
  position: relative; overflow: hidden; margin: 0 0 1.5rem; padding: clamp(1.5rem, 5vw, 2.75rem) clamp(1.25rem, 5vw, 2.75rem);
  border-radius: var(--radius-card); text-align: center; box-shadow: var(--shadow-card);
  border: 1px solid rgba(var(--primary-rgb), .35);
}
.course-progress-stars { position: absolute; inset: 0; pointer-events: none; display: none; }
[data-decor] .course-progress > .course-progress-stars { position: absolute; }
[data-decor="stars"] .course-progress-stars, [data-decor="moon"] .course-progress-stars { display: block; }
.course-progress-stars .star { position: absolute; color: var(--accent); opacity: .55; width: 1rem; height: 1rem; }
.course-progress-stars .star:nth-child(1) { left: 7%; top: 16%; }
.course-progress-stars .star:nth-child(2) { right: 8%; top: 12%; width: 1.5rem; height: 1.5rem; opacity: .35; }
.course-progress-stars .star:nth-child(3) { right: 4%; top: 58%; width: .65rem; height: .65rem; }
.course-progress-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .75rem;
  font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted);
}
.course-progress-eyebrow .star { width: .9em; height: .9em; color: var(--accent); }
.course-progress-title {
  margin: 0 auto .9rem; max-width: 30rem; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); line-height: 1.2; color: var(--on-dark); outline: none;
}
.course-track { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.course-track-dot {
  display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .45); color: var(--on-dark-muted); font-size: .85rem; font-weight: 700;
}
.course-track-item.is-booked .course-track-dot { border-style: solid; border-color: #fff; background: #fff; color: var(--accent); }
.course-track-item.is-booked .course-track-dot .star { width: 1rem; height: 1rem; }
.course-track-item.is-done .course-track-dot { border-style: solid; border-color: var(--success); background: var(--success); color: #fff; }
.course-progress-count { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.1rem; margin: 0 0 1rem; font-size: .9rem; font-weight: 600; color: var(--on-dark-muted); }
.course-progress-count .is-left { color: var(--on-dark); }
.course-progress-lead { max-width: 32rem; margin: 0 auto 1.4rem; color: var(--on-dark-muted); }
.course-progress-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.course-schedule-btn { white-space: normal; }

/* The small version on a class's own page and in the booking panel */
.course-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem 1rem; align-items: start; margin: 0 0 1.75rem; padding: 1rem 1.1rem;
  border-radius: var(--radius-input); background: var(--accent-soft); border: 1.5px solid rgba(var(--accent-rgb), .4); color: var(--ink);
}
.course-banner-mark { display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.course-banner-mark .star { width: 1rem; height: 1rem; color: inherit; }
.course-track-dot .star { color: inherit; }
.course-banner-text { margin: .15rem 0 .55rem; font-weight: 600; }
.course-banner .course-track { justify-content: flex-start; gap: .3rem; margin: 0; }
.course-banner .course-track-dot { width: 1.6rem; height: 1.6rem; font-size: .7rem; border-color: rgba(var(--accent-rgb), .5); color: var(--muted); }
.course-banner .course-track-item.is-booked .course-track-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.course-banner .course-track-item.is-booked .course-track-dot .star { width: .7rem; height: .7rem; }
.course-banner-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.book-side .course-banner { margin: .25rem 0 1.25rem; }

.course-notice { margin: 0 0 1.25rem; }
.course-card { padding-top: clamp(1.25rem, 3vw, 2rem); }
.course-intro { margin: 0 0 1.5rem; color: var(--muted); }
.course-classes-title { display: flex; align-items: center; gap: .5rem; font-size: 1.35rem; margin: 0 0 1rem; }
.course-classes-title .star { width: .85em; height: .85em; }
.course-steps { position: relative; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.course-step { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.25rem; }
.course-step:not(:last-child)::before {
  content: ""; position: absolute; left: 1.15rem; top: 2.5rem; bottom: .15rem; width: 2px; background: var(--line); border-radius: 2px;
}
.course-step.is-booked:not(:last-child)::before, .course-step.is-done:not(:last-child)::before { background: rgba(var(--primary-rgb), .4); }
.course-step-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 2px dashed var(--line-strong); background: var(--surface); color: var(--muted); font-weight: 700; font-size: .9rem;
}
.course-step.is-booked .course-step-mark { border: 0; background: var(--primary); color: var(--on-primary); }
.course-step.is-booked .course-step-mark .star { width: 1rem; height: 1rem; }
.course-step.is-done .course-step-mark { border: 0; background: var(--success-soft); color: var(--success); }
.course-step-body { min-width: 0; padding-top: .3rem; }
.course-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: 0 0 .2rem; }
.course-step-label { font-family: var(--font-display); font-size: 1.1rem; font-weight: var(--heading-weight); }
.course-step-when { margin: 0 0 .6rem; overflow-wrap: anywhere; }
.course-step.is-open .course-step-when { margin-bottom: .5rem; font-style: italic; }
.course-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.course-step-note { display: inline-flex; align-items: center; gap: .35rem; }
.course-credit { display: flex; gap: .4rem; align-items: flex-start; margin: 0 0 1rem; }
.course-credit .icon { flex: none; margin-top: .2rem; }
.course-dl { margin-top: 1.75rem; }

/* 12. 2.1: workshops
   -------------------------------------------------------------------------- */
.ws-date {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 3.4rem; height: 3.6rem; border-radius: var(--radius-input); overflow: hidden;
  background: var(--surface); border: 1.5px solid rgba(var(--primary-rgb), .4); line-height: 1;
}
.ws-date-m { display: block; width: 100%; padding: .22rem 0; background: var(--primary); color: var(--on-primary); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.ws-date-d { display: block; padding: .3rem 0 .2rem; font-family: var(--font-display); font-size: 1.45rem; font-weight: var(--heading-weight); color: var(--ink); }
.ws-date-lg { width: 4.4rem; height: 4.7rem; }
.ws-date-lg .ws-date-d { font-size: 2rem; }
.ws-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.ws-row .book-row-tagline time { font-style: normal; }
.ws-seats { color: var(--primary-strong); }
.ws-seats.is-full, .ws-seats-row.is-full span { color: var(--danger); font-weight: 700; }
.ws-row.is-full .ws-date { opacity: .6; }
.ws-hero { display: flex; gap: 1rem; align-items: center; margin: 0 0 .75rem; }
.ws-hero .book-service-name { margin: 0; }
.ws-hero .book-owner { margin-bottom: .2rem; }
.ws-state { padding: clamp(1.25rem, 4vw, 2rem); margin: 0 0 1.5rem; border-radius: var(--radius-card); background: var(--tint); color: var(--on-tint); text-align: center; }
.ws-state-mark { display: inline-flex; width: 3.25rem; height: 3.25rem; align-items: center; justify-content: center; margin: 0 0 .75rem; border-radius: 50%; background: var(--surface); color: var(--accent); }
.ws-state-mark .star { width: 1.3rem; height: 1.3rem; }
.ws-state .book-step-title { margin-bottom: .5rem; color: inherit; }
.ws-state p { margin: 0 auto; max-width: 30rem; }
.ws-others-title { font-size: 1.1rem; margin: 0 0 .75rem; }

/* 13. 2.1: breakpoints, motion and print for the new parts
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .notify-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-banner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .course-banner-actions { grid-column: auto; justify-content: flex-end; }
  .book-side .course-banner { grid-template-columns: auto minmax(0, 1fr); }
  .book-side .course-banner-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (min-width: 640px) {
  .book-steps-item { flex-direction: row; justify-content: center; text-align: left; font-size: .84rem; gap: .5rem; }
  .book-steps-item + .book-steps-item::before { top: 50%; right: auto; left: -1.1rem; width: 1.6rem; transform: translateY(-50%); }
  .book-steps { gap: 2rem; justify-content: flex-start; }
  .book-steps-item { flex: 0 1 auto; }
}
@media (max-width: 559px) {
  .course-progress-stars { display: none !important; }
}
@media (max-width: 380px) {
  .meet-panel, .order-due, .book-closed { flex-direction: column; }
  .course-track-dot { width: 2rem; height: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .meet-spinner::after { animation: none; border-color: rgba(var(--primary-rgb), .45); }
  .notify-opt, .book-steps-n { transition: none !important; }
}
@media print {
  .booking-prefs, .contact-amy, .course-progress-actions, .course-banner-actions, .meet-copy, .book-steps { display: none !important; }
  .course-progress { background: none !important; color: #000 !important; border: 1px solid #999; box-shadow: none; }
  .course-progress * { color: #000 !important; }
}

/* --------------------------------------------------------------------------
   2.5: embedded Stripe Checkout, the hosted-page fallback, "Have a gift card?"
   -------------------------------------------------------------------------- */
.checkout-embed { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.checkout-embed-mount { min-height: 2rem; border-radius: var(--radius-card); }
.checkout-embed-mount iframe { max-width: 100%; }
.checkout-embed-status { display: flex; gap: .55rem; align-items: center; margin: 0; }
.checkout-embed-status.is-error { color: var(--danger); font-weight: 500; }
.checkout-embed-status.is-error .checkout-spinner { display: none; }
.checkout-spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--primary); animation: checkout-spin .8s linear infinite; flex: none; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .checkout-spinner { animation: none; } }
.checkout-fake { padding: 1.1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-card); background: var(--surface); }
.checkout-fake-title { font-weight: 600; margin: 0 0 .35rem; }
.pay-alt { align-self: flex-start; margin-top: .25rem; }
.pay-form .pay-alt[hidden] { display: none; }

.book-gift { margin: 0 0 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.book-gift > summary { display: flex; gap: .6rem; align-items: center; padding: .85rem 1rem; cursor: pointer; font-weight: 600; list-style: none; min-height: 3rem; }
.book-gift > summary::-webkit-details-marker { display: none; }
.book-gift > summary::after { content: ''; margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); }
.book-gift[open] > summary::after { transform: rotate(-135deg); }
.book-gift > summary .icon { color: var(--primary-strong); }
.book-gift > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-card); }
.book-gift-body { padding: 0 1rem 1rem; }
.book-gift-row { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; }
.book-gift-row .input { flex: 1 1 12rem; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.book-gift-row .btn { flex: none; min-height: 3rem; }
.book-gift-result { margin: .6rem 0 0; font-size: .95rem; }
.book-gift-result.is-ok { color: var(--success); font-weight: 500; }

/* The gift card order's payment page */
.gift-pay-grid { display: grid; gap: 1.25rem; align-items: start; }
.gift-pay-card .gift-card-art[data-size="sm"] { margin: 0 0 1rem; }
@media (min-width: 640px) {
  .gift-pay-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}