/* ============================================================
   BOOKING — the details step, time slots and confirmation.
   Everything is expressed in the page's own design tokens, so the
   same stylesheet renders as Enter Solaris on the night world and
   Solstice on the day world with no per-world overrides.
   ============================================================ */

/* --- time slots (the design never shipped a rule for these) --- */
.cal-tslot{
  display:flex; align-items:baseline; justify-content:center; gap:6px;
  padding:11px 8px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:13px; letter-spacing:.06em;
  cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.cal-tslot span{ font-size:9.5px; letter-spacing:.16em; color:var(--ink-faint); }
.cal-tslot:hover{
  border-color:color-mix(in srgb, var(--accent) 60%, var(--line));
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  transform:translateY(-1px);
}
.cal-tslot.sel{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 20%, transparent);
}
.cal-tslot.sel span{ color:var(--ink-soft); }

/* --- the details step --- */
.cal-details{
  display:flex; flex-direction:column; gap:10px;
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--line-soft);
  animation:calRise .45s var(--ease) both;
}
.cal-details[hidden]{ display:none; }
@keyframes calRise{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.cal-f{ display:flex; flex-direction:column; gap:5px; }
.cal-f > span{
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.cal-f > span i{ font-style:normal; opacity:.62; }

.cal-in{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  color:var(--ink);
  font-family:inherit; font-size:14.5px; line-height:1.3;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.cal-in::placeholder{ color:var(--ink-faint); opacity:.75; }
.cal-in:focus{
  outline:none;
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
}

/* --- confirmation / status --- */
.cal-conf .ok{ display:block; font-size:14px; line-height:1.5; color:var(--ink); }
.cal-conf .ok b{ font-weight:400; color:var(--accent); }
.cal-conf.warn{ color:var(--accent); font-size:13.5px; line-height:1.5; }

.cal-ics{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }
.cal-ics a{
  font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom:2px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.cal-ics a:hover{ color:var(--ink); border-color:var(--accent); }

/* once booked, quieten the picker so the confirmation reads first */
.cal-booker.is-booked .cal-pane:first-child{ opacity:.5; transition:opacity .5s var(--ease); }
.cal-booker.is-booked .cal-details{ display:none; }

/* the capture form is plumbing only — never shown */
.booking-capture{ position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px; }

@media (max-width:760px){
  .cal-details{ margin-top:14px; }
  .cal-tslot{ padding:10px 6px; font-size:12.5px; }
}