/* ============================================================
   Celva: Book a call, this page's own presentation.

   styles/book.css is shared with quiz-result.html (which embeds the same
   form), so it is left alone and this sheet sits on top of it, scoped to
   body.book. Nothing here hides, reorders or disables a field: it sets the
   two-column layout, plain labels in place of the mono capitals, 16px
   controls (so iOS does not zoom on focus), larger targets, and the
   "what happens next" list beside the form.
   ============================================================ */

.book main { overflow-x: clip; }

/* ---------- Layout ---------- */
.book .book-wrap {
  max-width: 760px;
  padding: clamp(28px, 4vw, 64px) clamp(22px, 5vw, 56px) clamp(56px, 7vw, 96px);
  min-height: calc(100vh - 120px);
}
.book .book-form { padding: 0; }

@media (min-width: 1040px) {
  .book .book-wrap {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(260px, 320px);
    justify-content: center;
    column-gap: clamp(56px, 7vw, 112px);
    align-items: start;
  }
  .book .book-next {
    position: sticky;
    top: 112px;
    margin-top: 56px;
  }
}

/* ---------- The headline and the sentence under it ---------- */
.book .book-step { animation: none; }
.book .book-step__title {
  font-size: clamp(2.75rem, 5.4vw, 4rem);
  line-height: 1.04;
  margin: 0 0 16px;
  animation: bk-rise 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.book .book-step__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 0 32px;
  animation: bk-fade 520ms ease-out 90ms both;
}
/* The fields only fade: nothing a finger is heading for changes place. */
.book .book-for-patient,
.book .book-fields,
.book .book-nav,
.book .book-legal { animation: bk-fade 480ms ease-out 170ms both; }

@keyframes bk-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bk-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Booking for someone else ---------- */
.book .book-for-patient {
  border: 0;
  border-radius: 4px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

/* ---------- Fields ---------- */
.book .book-fields { gap: 22px 24px; margin-bottom: 20px; }
.book .book-field { gap: 8px; }
.book .book-field label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--ink);
}
.book .book-field label .book-lbl-opt {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}
.book .book-field input[type="text"],
.book .book-field input[type="email"],
.book .book-field input[type="tel"],
.book .book-field select,
.book .book-field textarea {
  font-size: 16px;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 4px;
  border-color: rgba(11, 29, 58, 0.34);
}
.book .book-field select { padding-right: 44px; text-overflow: ellipsis; }
.book .book-field textarea { min-height: 128px; }
.book .book-field input::placeholder,
.book .book-field textarea::placeholder { color: #5f7088; opacity: 1; }
.book .book-field input:hover,
.book .book-field select:hover,
.book .book-field textarea:hover { border-color: rgba(11, 29, 58, 0.55); }
.book .book-field input:focus,
.book .book-field select:focus,
.book .book-field textarea:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(45, 110, 177, 0.28);
}
.book .book-field__hint { font-size: 13.5px; }

/* ---------- Errors (driven by form-errors.js; only dressed here) ---------- */
.book .book-field__err {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.45;
  color: #a8342a;
}
.book .book-field.is-error input,
.book .book-field.is-error textarea,
.book .book-field.is-error select {
  border-color: #b8392e;
  box-shadow: 0 0 0 3px rgba(184, 57, 46, 0.14);
}
.book #focus-field .book-field__err { margin-top: 0; }
.book .book-status {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 15px;
  color: #7f271f;
}

/* ---------- The button and the line under it ---------- */
.book .book-nav {
  justify-content: flex-start;
  border-top: 0;
  padding-top: 24px;
  margin-top: 0;
}
.book .book-primary {
  min-height: 56px;
  padding: 16px 32px;
  font-size: 16.5px;
  border-radius: 4px;
  justify-content: center;
}
.book .book-primary:focus-visible {
  outline: 3px solid rgba(45, 110, 177, 0.45);
  outline-offset: 3px;
}
.book .book-primary[disabled] { opacity: 0.6; }
.book .book-legal {
  margin: 20px 0 0;
  font-size: 13.5px;
  text-align: left;
  max-width: 60ch;
}
.book .book-legal a { padding: 6px 0; }

/* ---------- What happens next ---------- */
.book .book-next__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 22px;
}
.book .book-next__steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  position: relative;
}
.book .book-next__steps li {
  position: relative;
  padding: 0 0 22px 30px;
  animation: bk-fade 480ms ease-out both;
}
.book .book-next__steps li:nth-child(1) { animation-delay: 300ms; }
.book .book-next__steps li:nth-child(2) { animation-delay: 520ms; }
.book .book-next__steps li:nth-child(3) { animation-delay: 740ms; padding-bottom: 0; }
/* The line from one moment to the next, drawn once, top to bottom. */
.book .book-next__steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5px; top: 17px; bottom: -6px;
  width: 1px;
  background: var(--border-strong);
  transform-origin: top;
  animation: bk-draw 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: inherit;
}
.book .book-next__steps li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--accent-blue);
  box-sizing: border-box;
}
.book .book-next__what {
  display: block;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.book .book-next__when {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-muted);
}
@keyframes bk-draw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
/* Below the fold on a phone: book-page.js holds the drawing until it is
   reached. Without the script the class is never set and it simply shows. */
.book .book-next.is-wait .book-next__steps li,
.book .book-next.is-wait .book-next__steps li::after { animation-play-state: paused; }

/* Who is there right now: a card at the head of the column, so it is the
   first thing read beside the form. */
.book .book-next .book-form__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 2px;
  padding: 16px 18px;
  margin: 0 0 26px;
  background: #EEF8F1;
  border: 1px solid #BFE3CC;
  border-radius: 12px;
}
.book .book-next .book-form__status .v4-mono {
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.book .book-next .book-sysbar__ok {
  display: flex; align-items: center; gap: 14px;
  font-size: 18px; line-height: 1.35; font-weight: 600;
  color: #1B5A38 !important;
}
.book .book-next .book-form__status-sub {
  display: block; padding-left: 26px;
  font-size: 15px; line-height: 1.5; color: #3F5873;
}
/* The pulse only runs while it can be seen (book-page.js sets is-live). */
.book .book-next .book-sysbar__pulse { flex: none; width: 12px; height: 12px; background: #2f9e62; }
.book .book-next .book-sysbar__pulse::before,
.book .book-next .book-sysbar__pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #2f9e62; opacity: 0;
  animation: bk-live 2.2s ease-out infinite; animation-play-state: paused;
}
.book .book-next .book-sysbar__pulse::before { animation-delay: 1.1s; }
.book .book-form__status.is-live .book-sysbar__pulse::before,
.book .book-form__status.is-live .book-sysbar__pulse::after { animation-play-state: running; }
@keyframes bk-live {
  0%   { transform: scale(1);   opacity: 0.45; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* One column (phones, tablets): the card rides above the form, and the list
   stays below it. The column gives up its own box so the card can be placed
   first; its rule and spacing move to the list's heading. */
@media (max-width: 1039px) {
  .book .book-wrap { display: flex; flex-direction: column; }
  .book .book-next { display: contents; }
  .book .book-next .book-form__status { order: -1; margin: 0 0 28px; }
  .book .book-next__title { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
}

/* Once the confirmation is showing it carries this same list: show one. */
.book .book-wrap.is-sent .book-next { display: none; }
.book .book-wrap:has(#book-success.is-active) .book-next { display: none; }

/* ---------- Confirmation (shown by book-form.js; only dressed here) ---------- */
.book .book-success { padding: 8px 0 0; }
.book .book-success.is-active { animation: bk-fade 420ms ease-out both; }
.book .book-success.is-active .book-success__glyph {
  animation: bk-pop 520ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}
.book .book-success.is-active .book-success__glyph::after {
  animation: bk-fade 260ms ease-out 420ms both;
}
@keyframes bk-pop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: none; }
}
.book .book-success__glyph { margin-bottom: 26px; }
.book .book-success__case {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  margin: 0 0 30px;
}
.book .book-success__case b { color: var(--ink); font-weight: 500; }
.book .book-success__next h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 10px;
}
.book .book-success__next li {
  grid-template-columns: 34px 1fr;
  gap: 2px 12px;
  padding: 16px 0;
  border-bottom-style: solid;
}
.book .book-success__next .n {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0;
  line-height: 1.2;
  grid-row: span 2;
}
.book .book-success__next .t { font-size: 15.5px; overflow-wrap: anywhere; }
.book .book-success__next .when {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .book .book-wrap { padding-top: 20px; }
  .book .book-form { padding: 0; }
  .book .book-step__sub { font-size: 16.5px; margin-bottom: 24px; }
  .book .book-for-patient { margin-bottom: 24px; }
  .book .book-fields { gap: 18px; }
  .book .book-primary { width: 100%; padding: 16px 20px; font-size: 16.5px; }
}

/* ---------- Reduced motion, print ---------- */
@media (prefers-reduced-motion: reduce) {
  .book .book-step__title,
  .book .book-step__sub,
  .book .book-for-patient,
  .book .book-fields,
  .book .book-nav,
  .book .book-legal,
  .book .book-next__steps li,
  .book .book-next__steps li::after,
  .book .book-success.is-active,
  .book .book-success.is-active .book-success__glyph,
  .book .book-success.is-active .book-success__glyph::after { animation: none; }
  .book .book-next .book-sysbar__pulse::before { animation: none; opacity: 0; }
  .book .book-next .book-sysbar__pulse::after { animation: none; opacity: 0.25; transform: scale(1.8); }
}
@media print {
  .book *,
  .book *::before,
  .book *::after { animation: none !important; transition: none !important; }
  .book .book-wrap { display: block; min-height: 0; }
  .book .book-next .book-form__status { display: none; } /* a live status means nothing on paper */
  .book .book-next { position: static; }
  .book .book-step__title em,
  .book .book-next__what,
  .book .book-next__when,
  .book .book-step__sub { color: #000; }
}