/* booking.css : the call-request section shared by /watch and /book.

   Markup: a <section id="book" data-booking-page="watch|book"> holding .book-grid,
   a .book-intro column and the #form-card form (see watch.html or book.html; the
   form markup in the two pages is kept identical). Behaviour: booking.js.
   Tokens and .btn come from site.css, which must load first.
*/

.book-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
@media (max-width: 980px){ .book-grid{ grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.book-intro h1, .book-intro h2{
  font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 620;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05; letter-spacing: -0.028em;
  margin: 14px 0 18px; max-width: 16ch; text-wrap: balance;
}
.book-intro .lede{ color: var(--ink-2); font-size: 16.5px; line-height: 1.62; max-width: 46ch; margin: 0 0 32px; text-wrap: pretty; }
.next-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.next-list li{ display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; align-items: start; }
.next-list .n{ width: 38px; height: 38px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--green-700); border: 1px solid var(--green-line); border-radius: var(--r-md); background: var(--green-tint); }
.next-list p{ margin: 2px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.next-list p strong{ color: var(--ink); font-weight: 600; }

.form-card{ border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; background: var(--card); box-shadow: var(--shadow-card); min-width: 0; }
@media (max-width: 560px){ .form-card{ padding: 22px 16px; } }
.form-step{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-700); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.form-step::after{ content: ""; flex: 1; height: 1px; background: var(--line-faint); }
.form-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 560px){ .form-grid{ grid-template-columns: minmax(0, 1fr); } }
.field{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full{ grid-column: 1 / -1; }
.field label, .field .label{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); letter-spacing: 0.12em; text-transform: uppercase; }
.field .req{ color: var(--green-600); margin-left: 2px; }
.field .opt{ color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.input, .select, .textarea{
  width: 100%; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); font-family: var(--font-body); font-size: 16px; min-height: 46px;
  transition: border-color var(--d-state) var(--ease-out), box-shadow var(--d-state) var(--ease-out);
}
.input::placeholder, .textarea::placeholder{ color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus{ outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-tint); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"]{ border-color: #B42318; }
.textarea{ min-height: 108px; resize: vertical; line-height: 1.55; }
.select{
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2 4l4 4 4-4' stroke='%238A948E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.seg{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seg-opt{ position: relative; cursor: pointer; }
.seg-opt input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span{
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 11px 8px; min-height: 46px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  color: var(--ink-2); font-size: 14.5px;
  transition: border-color var(--d-state) var(--ease-out), background var(--d-state) var(--ease-out);
}
.seg-opt:hover span{ border-color: var(--line-strong); color: var(--ink); }
.seg-opt input:checked + span{ border-color: var(--green-600); background: var(--green-tint); color: var(--ink); }
.seg-opt input:focus-visible + span{ outline: 2px solid var(--green-600); outline-offset: 2px; }
.hp{ position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* slot picker */
.slots-wrap{ margin-top: 30px; }
.slots-tz{ margin: -6px 0 14px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.slots-status{ padding: 18px; border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--ink-2); font-size: 14px; line-height: 1.55; background: var(--paper-raised); }
.slots-status button{ margin-top: 10px; }
.slot-day{ border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.slot-day legend{ padding: 0; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.slot-row{ display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot{ position: relative; cursor: pointer; }
.slot input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.slot span{
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 6px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  font-family: var(--font-mono); font-size: 13.5px; color: var(--ink);
  transition: border-color var(--d-state) var(--ease-out), background var(--d-state) var(--ease-out);
}
.slot:hover span{ border-color: var(--green-600); }
.slot input:checked + span{ background: var(--green-600); border-color: var(--green-600); color: #fff; }
.slot input:focus-visible + span{ outline: 2px solid var(--green-600); outline-offset: 2px; }
.slots-more{ background: none; border: 0; padding: 6px 0; color: var(--green-700); font: inherit; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--green-line); }

/* the picker: a month calendar, then the chosen day's times (booking.js) */
.picker{ display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) and (min-width: 981px), (max-width: 600px){ .picker{ grid-template-columns: minmax(0, 1fr); } }
.cal{ border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 14px 14px 12px; }
.cal-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-title{ margin: 0; font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 620; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.cal-nav{ width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink); border: 1px solid transparent; transition: background var(--d-state) var(--ease-out), border-color var(--d-state) var(--ease-out); }
.cal-nav svg{ width: 15px; height: 15px; }
.cal-nav:hover:not(:disabled){ background: var(--card); border-color: var(--line); }
.cal-nav:disabled{ color: var(--ink-3); opacity: 0.4; cursor: default; }
.cal-nav:focus-visible{ outline: 2px solid var(--green-600); outline-offset: 1px; }
.cal-dow, .cal-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-dow span{ text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3); padding: 4px 0 6px; }
.cal-day{
  position: relative; aspect-ratio: 1; min-height: 38px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink-3);
  border: 1px solid transparent; transition: background var(--d-state) var(--ease-out), color var(--d-state) var(--ease-out), border-color var(--d-state) var(--ease-out), transform var(--d-micro) var(--ease-out);
}
.cal-day:disabled{ cursor: default; opacity: 0.55; }
.cal-day:not(:disabled){ color: var(--ink); font-weight: 600; background: var(--card); border-color: var(--line-faint); }
.cal-day:not(:disabled):hover{ border-color: var(--green-600); }
.cal-day:not(:disabled):active{ transform: scale(0.96); }
.cal-day i{ position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--green-600); }
.cal-day.is-today span{ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.cal-day.is-picked{ background: var(--green-600) !important; border-color: var(--green-600) !important; color: #fff !important; }
.cal-day.is-picked i{ background: var(--lime); }
.cal-day:focus-visible{ outline: 2px solid var(--green-600); outline-offset: 2px; }
.cal-pad{ aspect-ratio: 1; }

.times{ min-width: 0; }
.times-empty{ height: 100%; min-height: 200px; border: 1px dashed var(--line); border-radius: var(--r-lg); display: grid; place-content: center; justify-items: center; gap: 8px; padding: 22px; text-align: center; color: var(--ink-3); }
.times-empty svg{ width: 26px; height: 26px; color: var(--green-600); }
.times-empty p{ margin: 0; font-size: 14.5px; color: var(--ink-2); }
.times-empty span{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
@media (max-width: 600px){ .times-empty{ min-height: 0; } }
.times-day{ border: 0; padding: 0; margin: 0; min-width: 0; }
.times-day legend{ padding: 0; margin: 0 0 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.times .slot-row{ grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.times.pop .slot{ animation: slotIn 360ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 28ms); }
@keyframes slotIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .times.pop .slot{ animation: none; } }
.chosen{ margin: 6px 0 0; font-size: 14px; color: var(--ink-2); min-height: 21px; }
.chosen strong{ color: var(--ink); }

.form-actions{ margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.form-actions .btn{ width: 100%; }
.privacy-note{ font-size: 13px; color: var(--ink-2); line-height: 1.55; text-align: center; margin: 0; }
.privacy-note a{ color: var(--ink); border-bottom: 1px solid var(--green-line); }
.form-error{ margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: rgba(180,35,24,0.06); border: 1px solid rgba(180,35,24,0.28); color: #8A1C12; font-size: 14px; line-height: 1.55; }
.form-error a{ color: inherit; text-decoration: underline; }
.form-error[hidden]{ display: none; }

.form-success{ display: none; padding: 28px; border-radius: var(--r-md); background: var(--green-tint); border: 1px solid var(--green-line); }
.form-success.show{ display: block; }
.form-success h3{ font-family: var(--font-display); font-stretch: var(--stretch-display); font-size: 22px; font-weight: 620; margin: 0 0 10px; color: var(--ink); }
.form-success p{ margin: 0; color: var(--ink-2); line-height: 1.6; }
.form-success p + p{ margin-top: 10px; }
.form-card.is-sent .form-content{ display: none; }