/* ============================================================
   VOW FLOW MEDIA — BOOKING COMPONENTS
   Additive. Load AFTER tokens.css and forms.css.
   ============================================================ */

.booking{ margin-top:var(--s7); max-width:72ch; }

.booking__loading{
  display:flex;
  align-items:center;
  gap:var(--s3);
  padding-block:var(--s7);
  color:var(--ink-muted);
  font-size:16px;
  border-top:1px solid var(--rule);
}
.spinner{
  width:14px; height:14px;
  border:1.5px solid var(--rule);
  border-top-color:var(--bronze);
  border-radius:50%;
  flex:none;
  animation:vfmspin 700ms linear infinite;
}
@keyframes vfmspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .spinner{ animation:none; border-top-color:var(--bronze); }
}

.booking__error{
  padding-block:var(--s6);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.booking__error p{ color:var(--ink-body); margin-bottom:var(--s5); max-width:52ch; }

/* ---------- date strip ---------- */
.datestrip{
  display:flex;
  gap:var(--s2);
  margin-top:var(--s4);
  overflow-x:auto;
  padding-bottom:var(--s3);
  scrollbar-width:thin;
}
.datestrip::-webkit-scrollbar{ height:3px; }
.datestrip::-webkit-scrollbar-thumb{ background:var(--rule); }

.datechip{
  flex:none;
  width:72px;
  padding:var(--s3) var(--s2);
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  cursor:pointer;
  font-family:var(--sans);
  text-align:center;
  transition:border-color 160ms ease, background-color 160ms ease;
}
.datechip:hover{ border-color:var(--bronze); }
.datechip.is-active{
  background:var(--ink);
  border-color:var(--ink);
}
.datechip__dow{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.datechip__day{
  display:block;
  font-family:var(--display);
  font-size:24px;
  line-height:1.2;
  color:var(--ink);
  margin-top:2px;
}
.datechip__mon{
  display:block;
  font-size:12px;
  color:var(--ink-muted);
}
.datechip.is-active .datechip__dow,
.datechip.is-active .datechip__mon{ color:var(--bronze-lift); }
.datechip.is-active .datechip__day{ color:var(--paper); }

/* ---------- slot grid ---------- */
.slotgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
  gap:var(--s3);
  margin-top:var(--s4);
}
.slot{
  height:56px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  font-family:var(--sans);
  font-size:16px;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  transition:border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.slot:hover{ border-color:var(--bronze); color:var(--bronze-text); }
.slot.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

.booking__none{
  margin-top:var(--s5);
  color:var(--ink-muted);
  font-style:italic;
}

/* ---------- summary ---------- */
.booking__summary{
  margin-top:var(--s8);
  padding-top:var(--s6);
  border-top:1px solid var(--rule);
}
.booking__chosen{
  font-family:var(--display);
  font-size:clamp(22px,3vw,28px);
  line-height:1.3;
  color:var(--ink);
  margin-top:var(--s3);
  max-width:34ch;
}
.booking__note{ margin-top:var(--s5); color:var(--ink-muted); }

/* ---------- confirmed state ---------- */
.confirmed{
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);
  padding-block:var(--s6) var(--s7);
  max-width:60ch;
}
.confirmed__when{
  font-family:var(--display);
  font-size:clamp(26px,4vw,38px);
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-top:var(--s4);
}
.confirmed__meta{
  margin-top:var(--s4);
  color:var(--ink-muted);
  font-size:16px;
}

@media (max-width:520px){
  .slotgrid{ grid-template-columns:repeat(2,1fr); }
  .datechip{ width:64px; }
}