/* booking.css — the parts of the booking dialog the contact form does not have.
 *
 * Everything shared — the dialog shell, fields, buttons, status line — is
 * enquiry.css and is reused as-is. Duplicating it here would mean two dialogs
 * that drift apart one hotfix at a time. What is genuinely new is the day
 * strip, the slot grid and the confirmation, and that is all this file holds.
 */

.bk-steps { display: flex; flex-direction: column; gap: 16px; }

/* Days run horizontally and scroll: a booking horizon of three weeks does not
   fit any dialog vertically, and a month grid asks the visitor to navigate
   when all they want is "soon". */
.bk-days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.bk-day {
  flex: 0 0 auto;
  min-width: 76px;
  padding: 9px 12px;
  font: inherit;
  text-align: center;
  cursor: pointer;
  background: var(--enq-field-bg);
  color: var(--enq-ink);
  border: 1px solid var(--enq-line);
  border-radius: 10px;
  transition: border-color .16s ease, background .16s ease;
}
.bk-day:hover { border-color: var(--enq-accent); }
.bk-day.is-active {
  background: var(--enq-accent);
  border-color: var(--enq-accent);
  color: #fff;
}
[data-theme="dark"] .bk-day.is-active { color: #08181d; }

.bk-day-weekday {
  display: block;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}
.bk-day-date { display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.bk-day-month { display: block; font-size: .7rem; opacity: .75; }

/* Times fill the width and wrap. Fixed columns would leave one lonely slot on
   its own row on the days that matter most. */
.bk-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 8px;
}

.bk-slot {
  font: inherit;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  padding: 10px 6px;
  cursor: pointer;
  background: var(--enq-field-bg);
  color: var(--enq-ink);
  border: 1px solid var(--enq-line);
  border-radius: 9px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.bk-slot:hover { border-color: var(--enq-accent); transform: translateY(-1px); }
.bk-slot:focus-visible { outline: 2px solid var(--enq-accent); outline-offset: 2px; }

.bk-tz {
  margin: 0;
  font-size: .78rem;
  color: var(--enq-ink-mut);
}

/* The slot the visitor picked, shown above the details form so the thing they
   are about to commit to is never off-screen. */
.bk-chosen {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--enq-field-bg);
  border: 1px solid var(--enq-line);
  border-left: 3px solid var(--enq-accent);
  border-radius: 9px;
}
.bk-chosen-time { font-size: 1.02rem; font-weight: 600; color: var(--enq-ink); }
.bk-chosen-meta { font-size: .82rem; color: var(--enq-ink-mut); }
.bk-chosen-change {
  margin-left: auto;
  font: inherit;
  font-size: .82rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--enq-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bk-empty {
  margin: 0;
  padding: 18px 0;
  font-size: .92rem;
  color: var(--enq-ink-mut);
}

.bk-fallback {
  font: inherit;
  font-size: .88rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--enq-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Confirmation. Deliberately quiet — the work is done, this is a receipt. */
.bk-done { display: flex; flex-direction: column; gap: 12px; }
.bk-done-when {
  font-family: var(--serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(1.3rem, 3.4vw, 1.6rem);
  line-height: 1.2;
  color: var(--enq-ink);
}
.bk-done-meet {
  display: inline-block;
  align-self: flex-start;
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--enq-accent);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
[data-theme="dark"] .bk-done-meet { color: #08181d; }

.bk-loading { margin: 0; padding: 18px 0; font-size: .92rem; color: var(--enq-ink-mut); }

@media (prefers-reduced-motion: reduce) {
  .bk-slot, .bk-day { transition: none; }
  .bk-slot:hover { transform: none; }
}