/* Website booking sheet (js/book.js + src/_partials/booking-sheet.html). Loaded only
   on pages that offer booking. A bottom sheet on phones, a centred dialog above that.
   Its shapes follow the app's booking screen (corner radios, First available first,
   a pinned action), so moving to the app after booking feels like the same product.
   book.js puts the current step on the sheet as data-step. */

.book-sheet {
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
}
.book-sheet[open] { animation: book-rise 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.book-sheet::backdrop {
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(3px);
  animation: book-fade 0.2s ease;
}
@keyframes book-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
}
@keyframes book-fade {
  from { opacity: 0; }
}

.book-panel { outline: none; } /* it only ever takes focus programmatically */
.book-panel {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 720px);
  max-height: min(88dvh, 720px);
}

/* ── Header ── */
.book-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 16px;
}
.book-head-text { flex: 1; min-width: 0; }
.book-head h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.book-subject {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--red-text);
  overflow-wrap: anywhere;
}
.book-subject:empty { display: none; }

.book-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--border);
}
.book-avatar-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.book-close {
  flex: none;
  align-self: flex-start;
  display: flex;
  width: 34px;
  height: 34px;
  padding: 9px;
  border: 0;
  border-radius: 50%;
  background: #f6f6f6;
  cursor: pointer;
  transition: background 0.15s;
}
.book-close:hover { background: var(--border); }
.book-close svg {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* How far along. It starts part-filled: giving a number is already progress. */
.book-progress {
  flex: none;
  height: 3px;
  background: var(--border);
}
.book-progress span {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: var(--red);
  transition: width 0.35s ease;
}
[data-step="otp"] .book-progress span { width: 50%; }
[data-step="loading"] .book-progress span { width: 62%; }
[data-step="details"] .book-progress span { width: 80%; }

/* ── Body ── */
.book-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 20px;
}
.book-body > * { flex: none; }
/* These steps pin their action to the bottom edge, which brings its own padding. */
[data-step="details"] .book-body,
[data-step="done"] .book-body { padding-bottom: 0; }

.book-sheet [data-book-step]:not([hidden]) > *:not(.book-foot) { animation: book-step 0.22s ease; }
@keyframes book-step {
  from { opacity: 0; transform: translateY(5px); }
}

/* The captcha sits between the field and the button on the phone and code steps.
   It's one widget shared by both, because moving its iframe between forms would
   reload it and cost another solve. So these forms dissolve into .book-body and
   `order` puts their controls either side of it. */
[data-book-step="phone"],
[data-book-step="otp"] { display: contents; }
.book-captcha,
.book-status { order: 1; }
[data-book-step="phone"] > .book-submit,
[data-book-step="phone"] > .book-fine,
[data-book-step="otp"] > .book-submit,
[data-book-step="otp"] > .book-under { order: 2; }

/* An author `display` would beat the attribute, so `hidden` is restated for these. */
.book-sheet [hidden] { display: none !important; }

.book-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.book-loading { display: grid; gap: 10px; padding: 4px 0 12px; }
.book-loading span {
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f6f6f6 25%, #fdf3f2 50%, #f6f6f6 75%) 0 0 / 200% 100%;
  animation: book-shimmer 1.3s linear infinite;
}
.book-loading span:last-of-type { width: 60%; }
@keyframes book-shimmer {
  to { background-position: -200% 0; }
}

.book-lead { margin-bottom: 16px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.book-lead strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.book-fine { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--ink-mute); }
.book-fine a { color: var(--ink-soft); }
.book-sub { margin: 14px 0 8px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }

.book-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--red-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.book-link:hover { text-decoration: none; }
.book-link:disabled { color: var(--ink-mute); text-decoration: none; cursor: default; }
.book-under { display: block; margin: 14px auto 0; font-size: 13px; }

/* ── Fields ── */
.book-field {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
/* 16px stops iOS zooming the page when a field takes focus. */
.book-field input,
.book-field select,
.book-field textarea {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 6px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: 0;
  background-color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.book-field select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23717171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 16px;
}
.book-field textarea {
  height: auto;
  min-height: 72px;
  padding: 11px 14px;
  line-height: 1.45;
  resize: vertical;
}
.book-field textarea::placeholder { color: #a8a8a8; }
.book-field input:focus,
.book-field select:focus,
.book-field textarea:focus,
.book-phone:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(238, 66, 57, 0.08);
}

.book-phone {
  display: flex;
  align-items: center;
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.book-cc {
  flex: none;
  padding: 0 12px 0 14px;
  border-right: 1px solid var(--border);
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--ink);
}
.book-field .book-phone input,
.book-field .book-phone input:focus {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.book-phone input::placeholder { font-weight: 400; letter-spacing: 0; color: #a8a8a8; }

/* Reassurance right where the number is asked for. Same green as "Free booking" on
   the page, the only non-red accent, so it reads as the same promise. */
.book-perks {
  display: grid;
  gap: 5px;
  margin: 2px 0 18px;
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.book-perks li { display: flex; align-items: center; gap: 7px; }
.book-perks svg,
.book-verified svg,
.book-free svg {
  flex: none;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #15803d;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The code boxes draw an invisible input laid over them. */
.book-otp { position: relative; margin-bottom: 16px; }
.book-otp input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: transparent;
  caret-color: transparent;
  -webkit-text-fill-color: transparent;
}
.book-otp input::selection { background: transparent; }
.book-otp-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.book-otp-cells span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.book-otp-cells span:not(:empty) { border-color: #bbb; }
.book-otp input:focus + .book-otp-cells .is-next {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(238, 66, 57, 0.08);
}
.book-otp input:disabled + .book-otp-cells span { background: #fafafa; }
.book-otp-cells.is-wrong { animation: book-shake 0.32s ease; }
.book-otp-cells.is-wrong span { border-color: var(--red-mid); background: var(--red-light); }
@keyframes book-shake {
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.book-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Actions ── */
.book-submit {
  position: relative;
  width: 100%;
  min-height: 50px;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(214, 52, 43, 0.22);
}
.book-submit svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.book-submit:hover svg { transform: translateX(2px); }
.book-submit .book-store-icon { width: 15px; height: 15px; fill: #fff; stroke: none; transform: none; }
.book-submit .book-store-icon + .book-store-icon { margin-right: 3px; }
.book-submit:disabled { opacity: 0.7; box-shadow: none; cursor: default; }
.book-submit.is-busy svg { display: none; }
.book-submit.is-busy::after {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: book-spin 0.7s linear infinite;
}
@keyframes book-spin {
  to { transform: rotate(360deg); }
}

/* The next step never scrolls out of reach, however long the form above it is. */
.book-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 6px -20px 0;
  padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: #fff;
}
.book-foot .book-status { margin: 0 0 10px; }
.book-free {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  color: #15803d;
}
.book-free strong { font-weight: 700; }

/* ── Choices ── */
.book-verified {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--ink-soft);
}
.book-verified strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.book-verified .book-link { margin-left: auto; font-size: 12.5px; }

/* A fieldset won't shrink below its content without min-width, and the day rail is wide. */
.book-group { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.book-group legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 600; }

.book-options { display: grid; gap: 8px; }
.book-options--pair { grid-template-columns: 1fr 1fr; }
.book-options--pair > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.book-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.book-option:hover { border-color: var(--red-mid); }
.book-option:has(input:checked) { border-color: var(--red); background: var(--red-light); }
.book-option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(238, 66, 57, 0.15); }
.book-option input {
  order: 1;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid #c8c8c8;
  border-radius: 50%;
  outline: 0;
  appearance: none;
  background: #fff;
  cursor: inherit;
  transition: border-color 0.15s, border-width 0.15s;
}
.book-option input:checked { border: 5px solid var(--red-btn); }
.book-option.is-off { background: #fafafa; cursor: default; }
.book-option.is-off:hover { border-color: var(--border); }
.book-option.is-off input { visibility: hidden; }
.book-option-text { min-width: 0; }
.book-option-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.book-option-detail { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-soft); }
.book-option.is-off .book-option-name { color: var(--ink-mute); }

/* A clinic to pick, as the app's clinic card: pin, name and address, radio in the
   corner, then the schedule and fee in a panel across the foot. */
.book-city {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.book-city:first-child { margin-top: 0; }
.book-city::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.book-city svg,
.book-clinic-pin svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.book-city svg { width: 14px; height: 14px; }

.book-clinic {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
}
.book-clinic > input { grid-column: 3; grid-row: 1; order: 0; }
.book-clinic-pin {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f6f6f6;
  color: var(--ink-soft);
}
.book-clinic-pin svg { width: 20px; height: 20px; }
.book-doctor-face {
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
}
.book-doctor-face img { width: 100%; height: 100%; object-fit: cover; }
.book-clinic .book-option-text { grid-column: 2; grid-row: 1; }
.book-clinic .book-option-name { font-size: 15px; }
.book-clinic .book-option-detail {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12.5px;
  line-height: 1.4;
}
.book-clinic-panel {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f6f6;
  transition: background 0.15s;
}
.book-option:has(input:checked) .book-clinic-panel { background: #fff; }
.book-clinic-panel > span { min-width: 0; }
.book-clinic-panel > span:last-child {
  flex: none;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  text-align: right;
}
.book-clinic-panel em {
  display: block;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.book-clinic-panel strong {
  display: -webkit-box;
  margin-top: 1px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* The fee never wraps; it keeps its own cell narrow so the schedule gets the width. */
.book-clinic-panel > span:last-child strong { white-space: nowrap; }
.book-clinic.is-off .book-clinic-panel { background: #f2f2f2; }
.book-clinic.is-off .book-clinic-panel strong { color: var(--ink-mute); }
.book-clinic.is-off .book-clinic-pin { opacity: 0.55; }
/* Phone: under the name and address. Desktop: in the radio's corner (below). */
.book-tag {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin-top: -5px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink-soft);
}

.book-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.book-chip { position: relative; flex: none; cursor: pointer; }
.book-chip input { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: inherit; }
.book-chip > span {
  display: block;
  height: 100%;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13.5px;
  transition: border-color 0.15s, background 0.15s;
}
.book-chip:hover > span { border-color: var(--red-mid); }
.book-chip em {
  display: block;
  margin-bottom: 1px;
  font-size: 11px;
  font-style: normal;
  color: var(--ink-mute);
}
.book-chip strong { display: block; font-weight: 600; white-space: nowrap; }
.book-chip small { display: block; margin-top: 1px; font-size: 11px; color: var(--ink-mute); }
.book-chip input:checked + span { border-color: var(--red); background: var(--red-light); }
.book-chip input:checked + span em,
.book-chip input:checked + span small { color: var(--red-text); }
.book-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(238, 66, 57, 0.15); }
.book-chip.is-off { cursor: default; }
.book-chip.is-off > span { border-color: var(--border); background: #fafafa; color: var(--ink-mute); }

/* First available or a specific date: the same switch as the app. */
.book-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 12px;
  background: #f6f6f6;
}
.book-modes label { position: relative; cursor: pointer; }
.book-modes input { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: inherit; }
.book-modes span {
  display: block;
  padding: 9px 8px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
}
.book-modes input:checked + span { background: var(--red-btn); color: #fff; }
.book-modes input:focus-visible + span { box-shadow: 0 0 0 3px rgba(238, 66, 57, 0.2); }

.book-info {
  padding: 11px 14px;
  border-radius: 12px;
  background: #fafafa;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.book-info strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }

.book-wait {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-mute);
}

.book-note { margin-bottom: 16px; }
.book-note > span { display: flex; justify-content: space-between; color: var(--ink); font-size: 14px; font-weight: 600; }
.book-note small { font-size: 12px; font-weight: 400; color: var(--ink-mute); }

.book-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  cursor: pointer;
}
.book-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--red-btn); cursor: inherit; }
.book-check strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }

/* ── Done: the request, then the app ── */
[data-step="done"] .book-head {
  flex-direction: column;
  gap: 10px;
  padding: 26px 48px 4px;
  text-align: center;
}
[data-step="done"] .book-close { position: absolute; top: 14px; right: 14px; }
[data-step="done"] .book-avatar,
[data-step="done"] .book-subject,
[data-step="done"] .book-progress,
[data-step="fallback"] .book-progress { display: none; }
[data-step="done"] .book-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.book-ref {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.book-ref strong { font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); }
[data-step]:not([data-step="done"]) .book-ref { display: none; }
[data-step="done"] .book-body { padding-top: 8px; }
[data-step="done"] .book-lead { margin-bottom: 14px; text-align: center; }
[data-step="done"] .book-lead strong { white-space: normal; }

.book-tick {
  display: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #e8f6ed;
}
.book-tick svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #15803d;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
}
[data-step="done"] .book-tick { display: flex; animation: book-pop 0.34s cubic-bezier(0.2, 1.4, 0.4, 1); }
[data-step="done"] .book-tick svg { animation: book-draw 0.34s 0.12s ease backwards; }
@keyframes book-pop {
  from { transform: scale(0.5); opacity: 0; }
}
@keyframes book-draw {
  from { stroke-dashoffset: 26; }
}

.book-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 16px;
  margin-bottom: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafafa;
  font-size: 13px;
}
.book-summary dt { color: var(--ink-mute); }
.book-summary dd { margin: 0; min-width: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* Same card as the page's "app CTA" band. It says what the app does for THIS booking
   rather than selling the app, and the button is pinned right under it. */
.book-handoff {
  margin-bottom: 12px;
  padding: 15px 16px;
  border: 1px solid var(--red-mid);
  border-radius: 14px;
  background: var(--red-light);
}
.book-handoff h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.book-handoff p { margin-top: 12px; font-size: 13px; color: var(--ink-soft); }

/* Where this request is now. Only real stages, so it reads as their booking in motion
   and shows what the app will go on tracking. */
.book-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 11px;
  padding: 12px 6px 10px;
  border-radius: 10px;
  background: #fff;
}
.book-track span {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-mute);
}
.book-track span + span::before {
  content: "";
  position: absolute;
  top: 10px;
  right: calc(50% + 15px);
  left: calc(-50% + 15px);
  height: 2px;
  border-radius: 2px;
  background: var(--border);
}
.book-track .is-now::before { background: #fcd9a0; }
.book-track i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: #fff;
}
.book-track .is-done { color: var(--ink); }
.book-track .is-done i { border-color: #15803d; background: #15803d; }
.book-track .is-done svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The app's amber (warn500). The label is a darker shade so it stays readable. */
.book-track .is-now { font-weight: 600; color: #b45309; }
.book-track .is-now i { border-color: #f59e0b; animation: book-now 1.8s ease-out infinite; }
.book-track .is-now i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
@keyframes book-now {
  from { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  to { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}
.book-handoff p strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.book-app-perks { display: grid; gap: 7px; margin-top: 9px; list-style: none; font-size: 13.5px; font-weight: 500; }
.book-app-perks li { display: flex; align-items: center; gap: 9px; }
.book-app-perks svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Present for anyone who wants it, but nothing competes with the button above it. */
.book-later { margin-top: 12px; color: var(--ink-mute); }

.book-captcha.is-open { margin-bottom: 12px; } /* it takes no space until a challenge shows */
.book-status {
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--red-light);
  font-size: 13px;
  line-height: 1.4;
  color: var(--red-text);
}
.book-status.is-quiet { padding: 0; background: none; color: var(--ink-soft); }
.book-status:empty { display: none; }

@media (min-width: 521px) {
  /* The dialog is short of width, not of height: three lines stay three lines. */
  .book-free { white-space: nowrap; }
  .book-clinic.is-off > input { display: none; }
  .book-tag { grid-column: 3; grid-row: 1; align-self: start; margin-top: 0; }
}

@media (max-width: 520px) {
  .book-sheet {
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }
  .book-sheet[open] { animation-name: book-slide; animation-duration: 0.28s; }
  /* The page behind must not scroll along with a thumb in the sheet. */
  html:has(.book-sheet[open]) { overflow: hidden; }

  /* Days run in one swipeable line, cut off at the edge so the next one shows there's more. */
  .book-chips--days {
    flex-wrap: nowrap;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .book-chips--days::-webkit-scrollbar { display: none; }
  .book-chips--days .book-chip { scroll-snap-align: start; }
}
@keyframes book-slide {
  from { transform: translateY(40px); opacity: 0.6; }
}

/* A visible Turnstile challenge is never narrower than 300px. */
@media (max-width: 340px) {
  .book-body { padding-inline: 10px; }
  .book-foot { margin-inline: -10px; padding-inline: 10px; }
  .book-chips--days { margin-inline: -10px; padding-inline: 10px; }
  .book-otp-cells { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .book-sheet *,
  .book-sheet,
  .book-sheet::backdrop { animation: none !important; transition: none !important; }
}