/* Booking page — builds on the tokens and components in styles.css.
   (The account page also loads this file for .book-page, .text-btn, .status.) */

.book-page { background: var(--paper); }
.book-page [hidden] { display: none !important; }

.booking {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.6fr);
  min-height: 100vh;
  min-height: 100svh;
}

/* ---------- left panel: intro + live summary ---------- */
.booking-aside {
  background: var(--green);
  color: var(--cream);
  padding: 118px clamp(24px, 3.6vw, 56px) 64px;
}
.aside-inner { position: sticky; top: 112px; }
.aside-oval { position: relative; width: min(190px, 56%); margin: 0 0 40px 22px; }
.aside-oval .oval { width: 100%; }
.aside-oval .oval-ring { inset: -16px -14px; }
.booking-aside .display { font-size: clamp(34px, 3.2vw, 48px); }
.booking-aside .aside-copy { max-width: 360px; margin: 18px 0 34px; color: var(--cream-soft); }

.summary > .label { color: var(--cream-soft); margin-bottom: 10px; }
.summary > .label.accent { color: var(--red); }
.summary dl { margin: 0; }
.summary dl div {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--rule-green);
}
.summary dt { padding-top: 4px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.summary dd { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.3; transition: color 0.3s ease; }
.summary dd.is-empty { font-family: var(--font-italic); font-style: italic; font-size: 18px; color: rgba(246, 241, 222, 0.45); }
.facts-inline { display: none; }

/* ---------- right side ---------- */
.booking-main {
  position: relative;
  padding: 96px clamp(20px, 4vw, 64px) 80px;
  color: var(--ink);
}

/* Step bar: 1 Day, 2 Time, 3 Your details */
.steps {
  position: sticky;
  top: 66px;
  z-index: 20;
  display: flex;
  align-items: center;
  margin: 0 calc(clamp(20px, 4vw, 64px) * -1) 34px;
  padding: 18px clamp(20px, 4vw, 64px);
  list-style: none;
  background: rgba(251, 248, 236, 0.94);
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-paper);
}
.steps li { display: flex; flex: 1; align-items: center; }
.steps li:last-child { flex: 0 0 auto; }
.steps li:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 1px;
  margin: 0 18px;
  background: var(--rule-paper);
  transition: background 0.3s ease;
}
.steps li.is-done:not(:last-child)::after { background: var(--red); }
.steps button { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-soft); white-space: nowrap; }
.step-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule-paper);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 14px;
  transition: all 0.3s ease;
}
.step-label { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.steps .is-current button { color: var(--ink); }
.steps .is-current .step-num { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 4px rgba(226, 70, 42, 0.1); }
.steps .is-done button { color: var(--ink); }
.steps .is-done .step-num { border-color: var(--red); background: var(--red); color: var(--paper); }
.steps button:hover .step-label { color: var(--red); }

/* Soonest openings */
.soonest { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 40px; }
.soonest .label { color: var(--ink-soft); }
.soonest-list { display: flex; flex-wrap: wrap; gap: 10px; }
.soonest-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid var(--rule-paper);
  border-radius: 999px;
  background: rgba(46, 70, 54, 0.05);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.soonest-chip:hover { border-color: var(--red); background: rgba(226, 70, 42, 0.06); }
.sc-day { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.sc-time { font-family: var(--font-display); font-size: 18px; color: var(--red); }

.panel { scroll-margin-top: 150px; }
.panel-title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.1;
}

.picker {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
/* While the calendar loads, everything but the spinner (in the day grid) fades. */
.picker.loading { pointer-events: none; }
.picker.loading .month-head,
.picker.loading .weekdays,
.picker.loading .legend,
.picker.loading .panel-time > :not(.panel-title) { opacity: 0.35; }
.days-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 64px 0 72px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
}
.spinner {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(226, 70, 42, 0.2);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

/* month calendar */
.month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.month-title { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); }
.month-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--red); transition: background 0.2s ease; }
.month-arrow svg { width: 28px; }
.month-arrow:hover:not(:disabled) { background: rgba(226, 70, 42, 0.08); }
.month-arrow:disabled { color: var(--rule-paper); cursor: default; }

.weekdays, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.weekdays span {
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-paper);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.day.empty { visibility: hidden; }
.day:disabled { color: rgba(59, 36, 20, 0.25); cursor: default; }
/* Bookable days get a soft green disc so they read as tappable. */
.day.available { background: rgba(46, 70, 54, 0.08); }
.day.available::after {
  content: "";
  position: absolute;
  bottom: 14%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
}
.day.available:hover { box-shadow: inset 0 0 0 1px var(--red); }
.day.today:not(.selected) { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.day.selected { background: var(--red); color: var(--paper); }
.day.selected::after { background: var(--paper); }
.day:focus-visible, .slot:focus-visible, .month-arrow:focus-visible, .soonest-chip:focus-visible, .steps button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 13px; color: var(--ink-soft); }
.legend-open, .legend-today { width: 14px; height: 14px; border-radius: 50%; }
.legend-open { background: rgba(46, 70, 54, 0.12); }
.legend-today { margin-left: 14px; box-shadow: inset 0 0 0 1px var(--ink-soft); }

/* day schedule */
.panel-time { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--rule-paper); }
.schedule-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 4px; font-family: var(--font-display); font-size: 22px; line-height: 1.25; }
.open-count { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.tz-note { margin: 0 0 22px; font-size: 13px; color: var(--ink-soft); }
.time-group + .time-group { margin-top: 22px; }
.time-group-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.time-group-label::after { content: ""; flex: 1; height: 1px; background: var(--rule-paper); }
.times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slot {
  padding: 10px 4px;
  border: 1px solid rgba(226, 70, 42, 0.55);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.slot:hover { border-color: var(--red); background: rgba(226, 70, 42, 0.08); }
.slot.is-chosen { border-color: var(--red); background: var(--red); color: var(--paper); }

/* details */
.panel-details { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule-paper); }
.details-locked {
  max-width: 560px;
  margin: 0;
  padding: 22px 24px;
  border: 1px dashed var(--rule-paper);
  border-radius: 14px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
}
.details { max-width: 680px; }
.chosen-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 26px;
  padding: 20px 26px;
  border-radius: 18px;
  background: var(--green);
  color: var(--cream);
}
.chosen-card .label { color: var(--red); margin-bottom: 4px; }
.chosen { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 2vw, 26px); line-height: 1.25; }
.chosen-card .text-btn { color: var(--cream); }
.text-btn { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.account-hint { margin: 0 0 22px; font-size: 14px; color: var(--ink-soft); }
.account-hint a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.fields label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.fields label span { text-transform: none; letter-spacing: 0; }
.fields .full { grid-column: 1 / -1; }
.fields input, .fields textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--rule-paper);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  resize: vertical;
}
.fields input:focus, .fields textarea:focus { outline: none; border-bottom-color: var(--red); }
.fields .hp { position: absolute; left: -9999px; }
.form-error { min-height: 1.5em; margin: 16px 0 0; font-size: 14px; color: var(--red); }
.details .book-call { margin-top: 14px; border: 0; cursor: pointer; font-family: var(--font-sans); }
.details .book-call:disabled { opacity: 0.6; cursor: wait; }

/* booked */
.done { max-width: 640px; padding-top: 12px; }
.done-title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 104px);
  line-height: 0.95;
  color: var(--red);
}
.done-day { margin: 34px 0 6px; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); }
.done-time { margin: 18px 0 30px 14px; font-family: var(--font-display); font-size: clamp(40px, 4vw, 56px); line-height: 1; color: var(--red); }
.done-time span { position: relative; display: inline-block; }
.done-time span::before {
  content: "";
  position: absolute;
  inset: -0.3em -0.45em -0.22em;
  border: 1px solid var(--red);
  border-radius: 50%;
  transform: rotate(-6deg);
}
.done-copy { max-width: 480px; color: var(--ink-soft); }
.done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.done-actions .book-call { margin-top: 0; }

.status { margin: 0 0 20px; color: var(--ink-soft); }
.status:empty { display: none; }
.status.error { color: var(--red); }

@media (max-width: 1080px) {
  .booking { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .booking-aside { padding: 110px var(--pad) 44px; }
  .aside-inner { position: static; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 36px; align-items: start; }
  .aside-inner > :not(.aside-oval) { grid-column: 2; }
  .aside-oval { grid-row: 1 / span 5; width: 130px; margin: 12px 0 0 14px; }
  .booking-main { padding-top: 40px; }
}

@media (max-width: 760px) {
  .booking-aside { padding: calc(86px + env(safe-area-inset-top)) 20px 30px; }
  .aside-inner { display: block; }
  .aside-oval, .summary { display: none; }
  .booking-aside .display { font-size: 32px; }
  .booking-aside .aside-copy { margin: 12px 0 16px; }
  .facts-inline { display: block; margin: 0; font-size: 12px; letter-spacing: 0.1em; line-height: 1.7; text-transform: uppercase; color: var(--cream-soft); }

  .booking-main { padding: 0 20px 56px; }
  .steps {
    top: calc(60px + env(safe-area-inset-top));
    margin: 0 -20px 26px;
    padding: 12px 20px;
  }
  .steps li:not(:last-child)::after { margin: 0 8px; }
  .steps button { gap: 8px; }
  .step-num { width: 28px; height: 28px; font-size: 12px; }
  .step-label { font-size: 11px; letter-spacing: 0.1em; }
  .soonest { display: block; margin-bottom: 30px; }
  .soonest .label { margin-bottom: 10px; }
  .soonest-list {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 -20px;
    padding: 0 20px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .soonest-list::-webkit-scrollbar { display: none; }
  .soonest-chip { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 16px; border-radius: 16px; }

  .panel { scroll-margin-top: 124px; }
  .picker { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .panel-time { padding: 30px 0 0; border-left: 0; border-top: 1px solid var(--rule-paper); }
  .slot { padding: 11px 2px; font-size: 13.5px; }
  .panel-details { margin-top: 40px; padding-top: 30px; }
  .chosen-card { padding: 18px 20px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .done-actions { flex-direction: column; align-items: flex-start; }
  .done-time { margin-left: 12px; }
  .nav-cta { display: inline-grid; }
}