/* =============================================================================
   SAKURA International Clinic — Booking form components (new /visitors/ LP)
   Indigo brand, ported from the prototype. Loaded AFTER form.css so a few
   overrides (progress bar / buttons) win. Scoped under #contact throughout.
   ========================================================================== */
#contact {
  --bk-brand: #6a4fb3;
  --bk-brand-2: #8a6ff0;
  --bk-soft: #efeafe;
  --bk-softer: #f7f4ff;
  --bk-card: #ffffff;
  --bk-line: #e8e4f2;
  --bk-ink: #1c1830;
  --bk-muted: #706c86;
  --bk-now: #e8823a;
  --bk-radius: 14px;
  --bk-shadow: 0 1px 2px rgba(28,24,48,.05), 0 8px 22px rgba(28,24,48,.07);
}

/* --- required marker ------------------------------------------------------ */
#contact .req { color: var(--bk-brand); font-weight: 700; }
#contact .small.inline-block,
#contact .inline-block { display: inline-block; }
#contact .margin-top05 { margin-top: .3em; }

/* --- progress + buttons: retint from coral to indigo ---------------------- */
#contact .ms-progress__bar-fill { background: linear-gradient(90deg, var(--bk-brand), var(--bk-brand-2)) !important; }
#contact .ms-progress .dot.is-active { background: var(--bk-brand) !important; }
#contact .button,
#contact input.button,
#contact .button-input input { background: var(--bk-brand) !important; }
#contact .button:hover,
#contact input.button:hover,
#contact .button-input input:hover { filter: brightness(1.06); }
#contact .button.button--ghost { background: transparent !important; color: var(--bk-brand) !important; border: 2px solid var(--bk-brand) !important; }
#contact .button.button--ghost:hover { background: var(--bk-softer) !important; }

/* =============================================================================
   Consultation type cards  (.ct-cards / .ct-card)  — also reused for insurance
   ========================================================================== */
#contact .ct-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#contact .ins-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

#contact .ct-card {
  position: relative;
  /* !important beats form.css `#contact label{display:inline-block!important}` */
  display: flex !important; flex-direction: column !important; align-items: flex-start;
  gap: 6px; line-height: 1.45 !important;
  padding: 16px; cursor: pointer;
  background: var(--bk-card);
  border: 1.5px solid var(--bk-line);
  border-radius: var(--bk-radius);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
#contact .ct-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
#contact .ct-card:hover { transform: translateY(-2px); border-color: var(--bk-brand-2); }
#contact .ct-card:focus-within,
#contact .ct-card:has(input:focus-visible) { outline: 2px solid var(--bk-brand); outline-offset: 2px; }
#contact .ct-card:has(input:checked) {
  border-color: var(--bk-brand);
  background: var(--bk-softer);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-brand) 18%, transparent);
}
#contact .ct-ic { font-size: 26px; line-height: 1; }
#contact .ct-t { font-weight: 700; font-size: 15px; color: var(--bk-ink); }
#contact .ct-d { font-size: 12.5px; color: var(--bk-muted); line-height: 1.4; }

/* --- In-person starter card + online link-out ---------------------------- */
/* Single full-width card (no parallel Online card). Tapping it starts the
   guided flow and the progress ring; nothing is revealed until then. */
#contact .ct-cards--single { grid-template-columns: 1fr; }
/* "Prefer online?" link-out sits below the In-person card. */
#contact .ct-online-switch {
  margin: 12px 2px 0; font-size: 13.5px; color: var(--bk-muted); line-height: 1.6;
}
#contact .ct-online-link {
  font-weight: 700; color: var(--bk-brand);
  text-decoration: underline; text-underline-offset: 3px;
}
#contact .ct-online-link:hover { color: var(--bk-brand-2); }

/* =============================================================================
   Slot picker
   ========================================================================== */
#contact .slot-note { font-size: 12.5px; color: var(--bk-muted); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#contact .slot-note .jst {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-weight: 700; color: var(--bk-brand);
  background: var(--bk-soft); border-radius: 999px; padding: 3px 10px;
}
#contact .slot-days { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#contact .slot-day { border: 1px solid var(--bk-line); border-radius: var(--bk-radius); padding: 12px; background: var(--bk-softer); }
#contact .slot-day-h { font-size: 12.5px; font-weight: 700; color: var(--bk-muted); margin: 0 0 10px; padding: 0 2px; }
#contact .slot-day-h b { color: var(--bk-ink); }
/* horizontal sliding carousel: fixed-height viewport, pages slide sideways */
#contact .slot-view { overflow: hidden; }
#contact .slot-track { display: flex; transition: transform .28s ease; }
#contact .slot-page { flex: 0 0 100%; min-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }

#contact .slot {
  position: relative; cursor: pointer;
  font-variant-numeric: tabular-nums; font-weight: 650; font-size: 14px;
  color: var(--bk-ink); background: var(--bk-card);
  border: 1.5px solid var(--bk-line); border-radius: 10px;
  padding: 11px 6px; text-align: center;
  transition: transform .1s ease, border-color .1s ease, background .1s ease;
}
#contact .slot:hover { transform: translateY(-1px); border-color: var(--bk-brand-2); }
#contact .slot:focus-visible { outline: 2px solid var(--bk-brand); outline-offset: 2px; }
#contact .slot[aria-pressed="true"] {
  background: var(--bk-brand); border-color: var(--bk-brand); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--bk-brand) 35%, transparent);
}
#contact .slot.is-earliest { border-style: dashed; border-color: var(--bk-now); }
#contact .slot .slot-tag { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--bk-now); margin-top: 2px; }
#contact .slot[aria-pressed="true"] .slot-tag { color: #ffe; }
#contact .slot-empty { grid-column: 1 / -1; font-size: 12.5px; color: var(--bk-muted); }

/* Pager — "More times →" slides forward, "←" slides back; column height is fixed */
#contact .slot-pager { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#contact .slot-prev {
  flex: 0 0 auto; width: 46px; padding: 9px 0; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--bk-brand);
  background: var(--bk-soft); border: none; border-radius: 9px;
  transition: filter .12s ease;
}
#contact .slot-next {
  flex: 1 1 auto; padding: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--bk-brand);
  background: var(--bk-soft); border: none; border-radius: 9px;
  transition: filter .12s ease;
}
#contact .slot-prev:hover, #contact .slot-next:hover { filter: brightness(.97); }

/* Other dates — solid subtle toggle with a chevron that flips when open */
#contact .slot-other {
  width: 100%; margin-top: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 650; font-size: 13.5px; color: var(--bk-muted);
  background: var(--bk-card); border: 1.5px solid var(--bk-line); border-radius: 12px; padding: 13px;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
#contact .slot-other:hover { border-color: var(--bk-brand-2); color: var(--bk-brand); background: var(--bk-softer); }
#contact .slot-other[aria-expanded="true"] { border-color: var(--bk-brand); color: var(--bk-brand); background: var(--bk-softer); }
#contact .slot-other .chev { font-size: 11px; line-height: 1; transition: transform .15s ease; }
#contact .slot-other[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Inline month calendar for "other dates" */
#contact .slot-cal {
  margin-top: 10px; padding: 14px;
  background: var(--bk-softer); border: 1px solid var(--bk-line); border-radius: 14px;
}
#contact .cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
#contact .cal-title { flex: 1; text-align: center; font-weight: 750; font-size: 15px; color: var(--bk-ink); }
#contact .cal-nav {
  flex: 0 0 auto; width: 34px; height: 34px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--bk-brand);
  background: var(--bk-card); border: 1px solid var(--bk-line); border-radius: 9px;
  transition: background .12s ease, border-color .12s ease;
}
#contact .cal-nav:hover:not(:disabled) { background: var(--bk-soft); border-color: var(--bk-brand-2); }
#contact .cal-nav:disabled { opacity: .35; cursor: not-allowed; }
#contact .cal-sub { text-align: center; font-size: 12px; color: var(--bk-muted); margin-bottom: 10px; }
#contact .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
#contact .cal-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--bk-muted); padding: 4px 0; }
#contact .cal-cell {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600; color: var(--bk-ink); cursor: pointer;
  background: var(--bk-card); border: 1px solid var(--bk-line); border-radius: 9px;
  transition: background .1s ease, border-color .1s ease, color .1s ease;
}
#contact .cal-cell.is-empty { background: transparent; border: none; cursor: default; }
#contact .cal-cell:hover:not(.is-past):not(.is-empty):not(.is-sel):not(.is-viewing) { border-color: var(--bk-brand-2); background: var(--bk-softer); }
#contact .cal-cell.is-past { color: var(--bk-muted); opacity: .4; cursor: not-allowed; background: transparent; border-color: transparent; }
#contact .cal-cell.is-sel { background: var(--bk-brand); border-color: var(--bk-brand); color: #fff; }
/* "Viewing" a date's slots (tapped to browse) — active outline, NOT the filled
   selected state, so it never looks like a second selection. */
#contact .cal-cell.is-viewing { background: var(--bk-softer); border-color: var(--bk-brand); color: var(--bk-brand); box-shadow: inset 0 0 0 1.5px var(--bk-brand); }
#contact .cal-slots { margin-top: 12px; }
#contact .cal-slots-h { font-size: 13px; font-weight: 700; color: var(--bk-brand); margin: 0 0 10px; }
#contact .cal-slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 560px) { #contact .cal-slot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { #contact .cal-slot-grid { grid-template-columns: repeat(2, 1fr); } }
#contact .slot-foot { text-align: center; font-size: 12px; color: var(--bk-muted); margin: 14px 0 0; }

/* =============================================================================
   Symptom grid
   ========================================================================== */
#contact .symp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#contact .symp-tile {
  position: relative; cursor: pointer;
  /* !important beats form.css `#contact label{display:inline-block!important}` so
     the emoji stacks above the label; min-height keeps every tile the same size */
  display: flex !important; flex-direction: column !important; align-items: center; justify-content: center;
  gap: 8px; text-align: center; line-height: 1.3 !important;
  min-height: 96px; padding: 12px 8px;
  background: var(--bk-card); border: 1.5px solid var(--bk-line); border-radius: 14px;
  transition: transform .1s ease, border-color .1s ease, background .1s ease, box-shadow .1s ease;
}
#contact .symp-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
#contact .symp-tile:hover { transform: translateY(-2px); border-color: var(--bk-brand-2); }
#contact .symp-tile:has(input:focus-visible) { outline: 2px solid var(--bk-brand); outline-offset: 2px; }
/* selected: inset ring instead of an outer ring, so tiles never visually collide */
#contact .symp-tile:has(input:checked) {
  border-color: var(--bk-brand); background: var(--bk-softer);
  box-shadow: inset 0 0 0 1px var(--bk-brand);
}
#contact .symp-ic { font-size: 24px; line-height: 1; }
#contact .symp-lbl { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--bk-ink); }
/* free-text detail: a proper multi-line field, aligned with the tiles */
#contact #symp-detail { margin-top: 12px; min-height: 82px; line-height: 1.5 !important; resize: vertical; }

/* =============================================================================
   Step 2 — Date of birth + searchable nationality
   ========================================================================== */
/* Date of birth — custom wheel-picker trigger + bottom sheet (locale-independent yyyy/mm/dd) */
#contact .dob-field {
  width: 100%; box-sizing: border-box; cursor: pointer; text-align: left;
  min-height: 48px; padding: 12px 14px; font-size: 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1.5px solid var(--bk-line); border-radius: 12px;
  background: var(--bk-card); color: var(--bk-ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
#contact .dob-field:hover { border-color: var(--bk-brand-2); }
#contact .dob-field:focus-visible { outline: none; border-color: var(--bk-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-brand) 15%, transparent); }
#contact .dob-field .dob-value { color: var(--bk-muted); }
#contact .dob-field .dob-value.has-val { color: var(--bk-ink); font-weight: 600; }
#contact .dob-field::after { content: "📅"; opacity: .6; font-size: 15px; }

/* Bottom-sheet wheel picker (appended to <body>, so it carries its own tokens) */
.dob-sheet {
  --bk-brand:#6a4fb3; --bk-brand-2:#8a6ff0; --bk-soft:#efeafe; --bk-softer:#f7f4ff;
  --bk-card:#ffffff; --bk-line:#e8e4f2; --bk-ink:#1c1830; --bk-muted:#706c86;
  position: fixed; inset: 0; z-index: 1000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", sans-serif;
}
.dob-sheet[hidden] { display: none; }
.dob-backdrop { position: absolute; inset: 0; background: rgba(20,16,40,.45); animation: dobFade .15s ease; }
.dob-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto;
  background: var(--bk-card); border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(20,16,40,.22); animation: dobUp .22s ease;
}
@keyframes dobFade { from { opacity: 0; } }
@keyframes dobUp { from { transform: translateY(100%); } }
.dob-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--bk-line); margin: 6px auto 2px; }
.dob-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 12px; border-bottom: 1px solid var(--bk-line); }
.dob-title { font-size: 13px; font-weight: 700; color: var(--bk-muted); letter-spacing: .01em; }
.dob-done { background: none; border: none; color: var(--bk-brand); font-weight: 750; font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.dob-done:hover { background: var(--bk-softer); }
.dob-wheels { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 6px 0 4px; }
.dob-colh { text-align: center; font-size: 12px; font-weight: 700; color: var(--bk-ink); height: 24px; line-height: 24px; }
.dob-scroll { position: relative; z-index: 1; height: 200px; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dob-scroll::-webkit-scrollbar { display: none; }
.dob-pad { height: 80px; }
.dob-item { height: 40px; line-height: 40px; text-align: center; scroll-snap-align: center; font-size: 19px; font-variant-numeric: tabular-nums; color: var(--bk-muted); transition: color .1s ease; }
.dob-item.is-on { color: var(--bk-ink); font-weight: 750; }
.dob-band {
  position: absolute; left: 6px; right: 6px; top: 110px; height: 40px; z-index: 0;
  background: color-mix(in srgb, var(--bk-brand) 8%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--bk-brand) 32%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--bk-brand) 32%, transparent);
  border-radius: 8px; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .dob-backdrop, .dob-panel { animation: none; } }

#contact .nat-combo { position: relative; }
#contact .nat-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--bk-card); border: 1px solid var(--bk-line); border-radius: 12px;
  box-shadow: var(--bk-shadow); max-height: 240px; overflow: auto; padding: 6px; display: none;
}
#contact .nat-list.is-open { display: block; }
#contact .nat-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--bk-ink);
}
#contact .nat-opt:hover { background: var(--bk-softer); }
#contact .nat-fl { font-size: 17px; }
/* A–Z rows carry no flag; align their name where the top group's flag sits. */
#contact .nat-opt--plain { padding-left: 12px; }
/* separates the pinned "main" travel origins from the full A–Z list */
#contact .nat-divider { height: 1px; background: var(--bk-line); margin: 6px 8px; }
#contact .nat-noopt { padding: 10px; color: var(--bk-muted); font-size: 13px; }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 640px) {
  #contact .ins-cards { grid-template-columns: 1fr; }
  #contact .symp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  #contact .ct-cards { grid-template-columns: 1fr; }
  #contact .slot-days { grid-template-columns: 1fr; }
  #contact .symp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #contact .ct-card,
  #contact .slot,
  #contact .symp-tile,
  #contact .slot-other { transition: none !important; }
}

/* =============================================================================
   Narrow, card-style layout — pull the whole booking block into a tidy,
   centered column and stack each row (label above field) at every width.
   ========================================================================== */
/* Center + narrow the section content (index.php uses .container, page-top uses .contents) */
#contact .container,
#contact .contents {
  max-width: 832px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#contact .container > h5,
#contact .container > h2 { text-align: center !important; }

/* Progress + form share one centered measure */
#contact .ms-progress {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The form itself becomes a clean card */
#contact #booking-form {
  max-width: 780px;
  margin: 0 auto;
  background: var(--bk-card);
  border: 1px solid var(--bk-line);
  border-radius: 22px;
  padding: 28px 28px 32px;
  box-shadow: 0 1px 2px rgba(28,24,48,.05), 0 18px 50px rgba(28,24,48,.10);
}
@media (max-width: 640px) {
  #contact #booking-form { padding: 20px 16px 24px; border-radius: 18px; }
}

/* Stack table rows at ALL widths: label on top, full-width field below */
#contact .contacttable,
#contact .contacttable tbody,
#contact .contacttable tr { display: block !important; width: 100% !important; }
/* ...but `display:block !important` above must NOT defeat the hidden attribute
   (row-datetime / row-symptoms, slot-otherwrap are toggled via .hidden; the
   consultation-type radio is hidden too). Needs higher priority to stay hidden. */
#contact .contacttable tr[hidden] { display: none !important; }
#contact [hidden] { display: none !important; }
#contact .contacttable th,
#contact .contacttable__left {
  display: block !important;
  width: 100% !important;
  padding: 16px 0 8px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  color: var(--bk-ink) !important;
  text-align: left !important;
}
#contact .contacttable tr:first-child th,
#contact .contacttable tr:first-child .contacttable__left { padding-top: 2px !important; }
#contact .contacttable td,
#contact .contacttable__right {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: left !important;
}
/* consent row has an empty label cell — drop its dead top padding */
#contact .contacttable th.th-doui { padding: 0 !important; }

/* Unify all text fields / selects / textarea with the indigo card aesthetic */
#contact .contacttable td input[type=text],
#contact .contacttable td input[type=tel],
#contact .contacttable td input[type=email],
#contact .contacttable td input[type=number],
#contact .contacttable td select,
#contact .contacttable td textarea {
  box-sizing: border-box !important;
  border: 1.5px solid var(--bk-line) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  background-color: var(--bk-card) !important;
  transition: border-color .12s ease, box-shadow .12s ease !important;
}
#contact .contacttable td input[type=text]:focus,
#contact .contacttable td input[type=tel]:focus,
#contact .contacttable td input[type=email]:focus,
#contact .contacttable td input[type=number]:focus,
#contact .contacttable td select:focus,
#contact .contacttable td textarea:focus {
  outline: none !important;
  border-color: var(--bk-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-brand) 15%, transparent) !important;
}

/* Step heading a touch tighter inside the card */
#contact #booking-form .main__subtitle { margin-top: 0 !important; }

/* =============================================================================
   Guided flow — one continuous form (steps flattened), progressive reveal,
   and a fixed circular % ring (bottom-right) that appears once In-person begins.
   ========================================================================== */
#contact form.is-guided .ms-step { display: block !important; }
#contact form.is-guided #next1-btn,
#contact form.is-guided #next2-btn,
#contact form.is-guided .button--ghost { display: none !important; }
#contact form.is-guided .ms-progress { display: none !important; }      /* ring replaces the dots */
#contact form.is-guided .ms-step[data-step="2"] > .main__subtitle,
#contact form.is-guided .ms-step[data-step="3"] > .main__subtitle { display: none !important; }
#contact form.is-guided .ms-nav { margin-top: 20px !important; justify-content: stretch !important; }
#contact form.is-guided #form-bottun { width: 100% !important; }
/* beat form.css `#contact input.button` so the hidden submit truly hides until the end */
#contact #form-bottun[hidden] { display: none !important; }

/* auto-scroll target clears the sticky site-header (~112px) so the active question
   lands just below it; answered questions stack out of view above it */
#contact form.is-guided .contacttable tr,
#contact form.is-guided #form-bottun { scroll-margin-top: 124px; }

/* during the In-person flow, hide the redundant fixed "Book now" banner
   (it would otherwise collide with the progress ring at bottom-right) */
body.flow-active #floating-banner,
body.form-in-view #floating-banner { display: none !important; }

/* =============================================================================
   Responsive refinements (phones)
   ========================================================================== */
@media (max-width: 600px) {
  /* the theme's booking <h2> is huge and overflows narrow screens — cap + wrap it */
  #contact .container > h2,
  #contact .contents > h2 { font-size: clamp(26px, 8vw, 40px) !important; line-height: 1.14 !important; overflow-wrap: anywhere; }
  #contact .slot-note { font-size: 12px; }
  #contact .cal-slots-h { font-size: 12.5px; }
  .dob-item { font-size: 18px; }
}
@media (max-width: 400px) {
  #contact #booking-form { padding: 16px 12px 20px; }
  #contact .slot-page { gap: 6px; }
  #contact .slot { padding: 10px 4px; font-size: 13.5px; }
  #contact .slot .slot-tag { font-size: 9px; }
  #contact .cal-cell { font-size: 12.5px; border-radius: 7px; }
  #contact .ct-ic { font-size: 22px; }
}

/* =============================================================================
   Type scale & vertical rhythm harmony (esp. phone/email/insurance/contact/
   accommodation/consent). One scale: labels 13.5 · values 15 · notes 12.5.
   ========================================================================== */
/* even gap between EVERY question (kills the tight 2px first-row-of-table quirk
   that made Full name / Phone sit closer than their siblings) */
#contact form.is-guided .contacttable__left { padding: 20px 0 8px !important; font-size: 13.5px !important; }
#contact form.is-guided .ms-step[data-step="1"] .contacttable tr:first-child .contacttable__left { padding-top: 2px !important; }
/* inline hint inside a label (Accommodation, DOB…) — smaller & muted, not bold */
#contact .contacttable__left .small { font-size: 12.5px !important; font-weight: 500 !important; color: var(--bk-muted) !important; }

/* radio / checkbox rows: indigo accent, aligned, even spacing, matched text size */
#contact .contacttable__right .flex-c { gap: 9px !important; padding: 5px 0 !important; line-height: 1.45 !important; }
#contact .contacttable__right input[type=radio],
#contact .contacttable__right input[type=checkbox] {
  width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important;
  accent-color: var(--bk-brand); flex: 0 0 auto; vertical-align: middle !important;
}
#contact .radiotext { font-size: 15px !important; padding-right: 0 !important; line-height: 1.45 !important; color: var(--bk-ink); }

/* consent row: align the checkbox to the top of its wrapping text */
#contact .douitext { display: flex !important; align-items: flex-start !important; gap: 9px !important; margin-top: 4px !important; }
#contact .douitext .radiotext { font-size: 14px !important; line-height: 1.5 !important; }
#contact .douitext input[type=checkbox] { margin-top: 2px !important; }

/* helper notes under fields — one consistent size */
#contact .contacttable__right .small,
#contact .accommodation-note { font-size: 12.5px !important; color: var(--bk-muted) !important; font-weight: 500 !important; }

/* =============================================================================
   LPO: hero "earliest slot" chip + trust strip above the form
   ========================================================================== */
/* hero earliest-slot chip (outside #contact, so it stands alone) */
.hero-earliest {
  margin: 14px 0 0; font-size: 14px; font-weight: 700; color: #6a4fb3;
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff; border-radius: 999px; padding: 8px 15px;
  box-shadow: 0 4px 16px rgba(28,24,48,.14);
}
.hero-earliest[hidden] { display: none; }

/* trust + no-payment strip just under the booking heading */
#contact .booking-trust {
  max-width: 640px; margin: 4px auto 18px; text-align: center;
  font-size: 13.5px; line-height: 1.6; color: var(--bk-muted);
}
#contact .booking-trust strong { color: var(--bk-ink); font-weight: 800; }
@media (max-width: 480px) { #contact .booking-trust { font-size: 12.5px; } }
/* #11 doctor credibility line under the trust strip */
#contact .booking-doctor { max-width: 640px; margin: -8px auto 18px; text-align: center; font-size: 12.5px; color: var(--bk-muted); }

/* #15 comfortable tap targets on phones */
@media (max-width: 480px) {
  #contact .slot { min-height: 46px; }
  #contact .cal-cell { min-height: 40px; }
  #contact .slot-prev, #contact .slot-next, #contact .slot-other { min-height: 44px; }
}

/* each newly revealed question fades/slides in */
@keyframes qIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#contact .q-in { animation: qIn .38s cubic-bezier(.2,.7,.3,1); }

/* circular progress ring + "your answers" review panel — fixed, own tokens */
.flow-ring {
  --bk-brand:#6a4fb3; --bk-brand-2:#8a6ff0; --bk-card:#ffffff; --bk-line:#e8e4f2; --bk-ink:#1c1830; --bk-muted:#706c86; --bk-softer:#f7f4ff;
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  animation: ringPop .28s ease;
}
.flow-ring[hidden] { display: none; }
@keyframes ringPop { from { opacity: 0; transform: scale(.7); } }
/* flex:0 0 auto so a constrained container never squishes the circle into an
   ellipse; aspect-ratio locks it round regardless of theme button rules. */
.ring-btn {
  flex: 0 0 auto; width: 84px; height: 84px; aspect-ratio: 1 / 1;
  cursor: pointer; position: relative; padding: 0;
  display: grid; place-items: center;
  background: var(--bk-card); border: none; border-radius: 50%;
  box-shadow: 0 8px 26px rgba(28,24,48,.22);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ring-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(28,24,48,.28); }
.ring-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-btn .ring-bg { fill: none; stroke: var(--bk-line); stroke-width: 4; }
.ring-btn .ring-fg { fill: none; stroke: var(--bk-brand); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .45s cubic-bezier(.2,.7,.3,1); }
.ring-btn .ring-pct { font-size: 22px; font-weight: 800; color: var(--bk-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.ring-panel { width: 244px; max-height: 52vh; overflow: auto; background: var(--bk-card); border: 1px solid var(--bk-line); border-radius: 14px; box-shadow: 0 14px 36px rgba(28,24,48,.24); padding: 12px; }
.ring-panel[hidden] { display: none; }
.ring-panel-h { font-size: 11.5px; font-weight: 700; color: var(--bk-muted); margin: 0 0 8px; }
.ring-panel-list { display: flex; flex-direction: column; gap: 6px; }
.ring-chip { text-align: left; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--bk-ink); background: var(--bk-softer); border: 1px solid var(--bk-line); border-radius: 9px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ring-chip:hover { border-color: var(--bk-brand-2); }
.ring-chip-ic { color: var(--bk-brand); }
.ring-empty { font-size: 12px; color: var(--bk-muted); padding: 4px; }
@media (max-width: 480px) { .ring-btn { width: 76px; height: 76px; } .ring-btn .ring-pct { font-size: 20px; } .ring-panel { width: 220px; } }
@media (prefers-reduced-motion: reduce) { .flow-ring, #contact .q-in { animation: none; } .ring-btn:hover { transform: none; } }