/* ============================================================
   THE SIDE OUT — Booking & Light-World Styles
   ============================================================ */

/* Light-world surface reset */
.light-world {
  background: var(--paper-100);
  color: var(--ink-900);
  min-height: 100vh;
}
.light-world .site-header {
  background: var(--paper-50);
  border-bottom: 1px solid rgba(10, 22, 38, 0.1);
}
.light-world .site-header a { color: var(--ink-900); }
.light-world .site-header__nav a { color: var(--ink-900); opacity: .7; }
.light-world .site-header__nav a:hover { color: var(--ink-900); opacity: 1; }

/* World switch (dark→light page transition) */
.world-switch-enter {
  animation: worldSwitch 400ms var(--ease-out) forwards;
}
@keyframes worldSwitch {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Booking container */
.booking-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(80px + var(--section-py)) var(--gutter) var(--section-py);
}

/* Step indicator */
.booking-steps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.booking-step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--concrete-400);
}
.booking-step--active { color: var(--court-600); }
.booking-step--done   { color: var(--ok); }
.booking-step__num {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-micro);
  font-weight: 700;
  background: rgba(139,149,163,.15);
  color: var(--concrete-400);
  flex-shrink: 0;
}
.booking-step--active .booking-step__num { background: var(--court-500); color: white; }
.booking-step--done .booking-step__num   { background: var(--ok); color: white; }
.booking-sep { flex: 1; height: 1px; background: rgba(10,22,38,.1); }

/* Day strip */
.day-strip {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.day-strip::-webkit-scrollbar { display: none; }
.day-strip__day {
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(10,22,38,.12);
  cursor: pointer;
  font-family: var(--font-body);
  background: var(--paper-50);
  transition: border-color 120ms, background 120ms;
}
.day-strip__day:hover { border-color: var(--court-500); }
.day-strip__day--selected { border-color: var(--court-500); background: rgba(30,116,230,.08); }
.day-strip__day--unavailable { opacity: .4; cursor: not-allowed; }
.day-strip__dow { font-size: .7rem; font-weight: 600; color: var(--concrete-400); text-transform: uppercase; }
.day-strip__date { font-size: 1.1rem; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* Court selector */
.court-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.court-option {
  padding: var(--sp-6);
  border-radius: var(--r-md);
  border: 2px solid rgba(10,22,38,.12);
  cursor: pointer;
  background: var(--paper-50);
  text-align: center;
  transition: border-color 120ms;
  font-family: var(--font-body);
}
.court-option:hover { border-color: var(--court-500); }
.court-option--selected { border-color: var(--court-500); background: rgba(30,116,230,.06); }
.court-option__name { font-weight: 700; font-size: 1rem; color: var(--ink-900); }
.court-option__status { font-size: var(--t-small); color: var(--concrete-400); margin-top: var(--sp-1); }

/* Slot list */
.slot-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--sp-3);
}
.slot {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(10,22,38,.12);
  text-align: center;
  cursor: pointer;
  background: var(--paper-50);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-900);
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 120ms, background 120ms, transform 120ms;
}
.slot:hover { border-color: var(--court-500); }
.slot--selected {
  border-color: var(--court-500);
  background: var(--court-500);
  color: white;
  transform: scale(1.02);
}
.slot--unavailable { opacity: .35; cursor: not-allowed; pointer-events: none; }
.slot--in-range { background: rgba(30,116,230,.08); border-color: rgba(30,116,230,.3); }

/* Sticky price bar */
.sticky-price-bar {
  position: sticky;
  bottom: 0;
  background: var(--paper-50);
  border-top: 1px solid rgba(10,22,38,.1);
  padding: var(--sp-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  z-index: 10;
  box-shadow: 0 -4px 16px rgba(10,22,38,.08);
}
.sticky-price-bar__price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.sticky-price-bar__breakdown { font-size: var(--t-small); color: var(--concrete-400); }

/* Form */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-group label {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-900);
}
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink-900);
  background: var(--paper-50);
  border: 1.5px solid rgba(10,22,38,.18);
  border-radius: var(--r-sm);
  padding: .75em 1em;
  width: 100%;
  min-height: 44px;
  transition: border-color 120ms;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--court-500);
  box-shadow: 0 0 0 3px rgba(30,116,230,.15);
}
.form-group input.error,
.form-group select.error { border-color: var(--error); }
.form-error {
  font-size: var(--t-small);
  color: var(--error);
  display: flex; align-items: center; gap: var(--sp-1);
}
.form-error::before { content: "!"; font-weight: 700; }
.form-help { font-size: var(--t-small); color: var(--concrete-400); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 479px) { .form-row { grid-template-columns: 1fr; } }

/* Policy acknowledgment */
.policy-check {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  background: rgba(10,22,38,.04);
  border-radius: var(--r-sm);
}
.policy-check input[type=checkbox] {
  width: 20px; height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--court-500);
}
.policy-check label { font-size: var(--t-small); color: var(--ink-900); cursor: pointer; }

/* Status page */
.booking-status-card {
  background: var(--paper-50);
  border-radius: var(--r-lg);
  border: 1px solid rgba(10,22,38,.1);
  padding: var(--sp-12);
  box-shadow: 0 4px 32px rgba(10,22,38,.08);
}
.booking-status-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(10,22,38,.08);
}
.booking-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(10,22,38,.05);
  font-size: var(--t-small);
}
.booking-detail-row:last-child { border-bottom: none; }
.booking-detail-row__label { color: var(--concrete-400); font-weight: 500; }
.booking-detail-row__value { font-weight: 600; color: var(--ink-900); text-align: right; }

/* Hold countdown */
.hold-countdown {
  background: rgba(244,180,26,.08);
  border: 1px solid rgba(244,180,26,.25);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.hold-countdown__time {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
  min-width: 80px;
}
.hold-countdown__label { font-size: var(--t-small); color: var(--ink-900); }