/* ===========================================================================
   Booking page. Layers on home.css — same tokens, nav, buttons, footer.
   Only the booking flow itself is defined here.
   =========================================================================== */

:root{ --dark:#11110F; }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.trap{ position:absolute !important; left:-9999px; }

/* The booking page has no hero photograph, so the bar carries its own
   ground instead of relying on difference blending over an image. */
.nav--solid{
  mix-blend-mode:normal;
  background:rgba(9,9,9,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero--book{ min-height:76svh; background:var(--bg); }
.hero__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 18% 18%, rgba(214,255,63,.07), transparent 70%),
    radial-gradient(70% 60% at 88% 8%, rgba(238,234,225,.07), transparent 72%);
}
.hero--book .heroBottom{ color:var(--muted); }

/* ── Appointment intro ─────────────────────────────────────────────────── */
.intro{
  background:var(--paper); color:#111;
  padding:11vw 8vw; display:grid; grid-template-columns:1.2fr .8fr; gap:6vw; align-items:end;
}
.intro .eyebrow{ color:#5f5b53; }
.intro h2{ font-size:clamp(46px,7.5vw,112px); line-height:.87; letter-spacing:-.07em; margin-top:16px; }
.intro__service{ margin:0; padding-bottom:14px; }
.intro__service dt{ font-size:22px; font-weight:800; letter-spacing:-.03em; }
.intro__service dd{ margin:8px 0 0; color:#656057; font-size:15px; }

/* ── Flow ──────────────────────────────────────────────────────────────── */
.flow{ padding:11vw 8vw 13vw; }
.flow__note{ color:var(--muted); }
.flow__error{ margin:18px 0 0; color:#FF8A7A; font-size:15px; font-weight:600; }

.step{ display:grid; grid-template-columns:8% 1fr; gap:4vw; padding:46px 0; border-top:1px solid var(--line); }
.step:last-of-type{ border-bottom:1px solid var(--line); }
.step__num{ color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.18em; }
.step__title{
  margin:0 0 30px; font-size:clamp(24px,3.4vw,40px); font-weight:900;
  letter-spacing:-.045em; text-transform:uppercase;
}
.step__meta{ color:var(--lime); }

/* Day tiles — rectangular, hairline, no cards. */
.days{ display:flex; flex-wrap:wrap; gap:10px; }
.day{
  display:flex; flex-direction:column; gap:4px; min-width:84px;
  padding:14px 16px 13px; cursor:pointer; text-align:left;
  background:transparent; color:var(--paper); border:1px solid var(--line);
  font-family:inherit; transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.day__wd{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.day__date{ font-size:26px; font-weight:900; letter-spacing:-.05em; line-height:1; }
.day__count{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.day:hover{ border-color:var(--paper); }
.day[aria-pressed="true"]{ background:var(--dark, #11110F); border-color:var(--lime); color:var(--lime); }
.day[aria-pressed="true"] .day__wd, .day[aria-pressed="true"] .day__count{ color:var(--lime); }

.monthMark{
  flex-basis:100%; margin:12px 0 2px;
  font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* Time buttons — paper by default, inverted when chosen. */
.times{ display:flex; flex-wrap:wrap; gap:10px; }
.time{
  padding:14px 22px; cursor:pointer; font-family:inherit;
  font-size:15px; font-weight:700; letter-spacing:-.01em;
  background:var(--paper); color:#111; border:1px solid var(--paper);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.time:hover{ background:var(--lime); border-color:var(--lime); }
.time[aria-pressed="true"]{ background:#000; color:var(--lime); border-color:var(--lime); }

/* Loading placeholders, same footprint as the tiles. */
@keyframes sweep{ from{ background-position:180% 0; } to{ background-position:-80% 0; } }
.skeleton{
  display:block; width:84px; height:74px;
  background:linear-gradient(100deg,#141412 30%,#1e1e1a 50%,#141412 70%) 0 0 / 220% 100%;
  animation:sweep 1.3s ease-in-out infinite;
}

/* ── Details ───────────────────────────────────────────────────────────── */
.chosen{ margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.chosen--sub{ margin:6px 0 34px; font-size:13px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* Editorial underlined fields, not boxes. */
.field{ max-width:560px; margin-bottom:26px; }
.field label{
  display:block; font-size:10px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.field__opt{ font-weight:400; letter-spacing:.1em; }
.field input, .field textarea{
  display:block; width:100%; margin-top:10px; padding:10px 0;
  font:400 17px/1.5 var(--sans); color:var(--paper);
  background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0;
  transition:border-color .2s ease;
}
.field textarea{ resize:vertical; }
.field input:hover, .field textarea:hover{ border-bottom-color:var(--muted); }
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--lime); }
.btn--lg{ margin-top:8px; padding:20px 28px; font-size:11px; }

/* ── Confirmation ──────────────────────────────────────────────────────── */
.step--done .step__num{ color:var(--lime); font-size:18px; }
.done__title{ margin:16px 0 0; font-size:clamp(44px,7vw,104px); line-height:.88; letter-spacing:-.07em; }
.done__text{ margin:26px 0 34px; max-width:46ch; color:var(--muted); font-size:17px; line-height:1.6; }
.step--done:focus-visible{ outline:2px solid var(--lime); outline-offset:6px; }

/* ── Hours ─────────────────────────────────────────────────────────────── */
.hoursSec{
  background:#141410; padding:12vw 8vw;
  display:grid; grid-template-columns:.9fr 1.1fr; gap:7vw; align-items:start;
}
.hoursSec h2{ font-size:clamp(40px,6.4vw,92px); line-height:.9; letter-spacing:-.07em; margin-top:16px; }
.hoursSec .hours{ width:100%; border-collapse:collapse; }
.hoursSec .hours th, .hoursSec .hours td{ padding:17px 0; border-bottom:1px solid var(--line); font-weight:400; }
.hoursSec .hours th{ text-align:left; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.hoursSec .hours td{ text-align:right; font-size:15px; color:var(--paper); }
.hoursSec .hours tr.today th, .hoursSec .hours tr.today td{ color:var(--lime); }
.hoursSec__note{ margin-top:26px; color:var(--muted); font-size:13px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .intro{ grid-template-columns:1fr; gap:3vw; align-items:start; }
  .intro__service{ padding-bottom:0; }
  .hoursSec{ grid-template-columns:1fr; gap:6vw; }
}
@media (max-width:760px){
  .hero--book{ min-height:auto; padding-top:120px; }
  .intro{ padding:22vw 20px; }
  .intro h2{ font-size:clamp(38px,12vw,60px); }
  .flow{ padding:20vw 20px 24vw; }
  .step{ grid-template-columns:1fr; gap:14px; padding:34px 0; }
  .step__title{ margin-bottom:22px; }
  .days{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .day{ min-width:0; padding:12px 10px; align-items:center; text-align:center; }
  .day__count{ font-size:8px; }
  .skeleton{ width:auto; height:78px; }
  .time{ flex:1 1 calc(33.333% - 7px); text-align:center; padding:16px 10px; }
  .field{ max-width:none; }
  .hoursSec{ padding:22vw 20px; }
  .hoursSec .hours th, .hoursSec .hours td{ padding:14px 0; }
}
/* 4 across still fits at 375px; only the narrowest phones drop to 3. */
@media (max-width:340px){
  .days{ grid-template-columns:repeat(3,1fr); }
  .time{ flex-basis:calc(50% - 5px); }
}

@media (prefers-reduced-motion: reduce){
  .day, .time, .field input, .field textarea{ transition:none; }
  .skeleton{ animation:none; }
}