/* car-battery.xyz booking form: the same form as mobile-auto-repair.net (booking.js drives it),
   styled with this site's colours. The main site's variable names are mapped onto this palette
   inside the booking section and its dialog only. Loaded by city pages that take bookings. */
.booking, .booking-modal {
  --amber: var(--volt);
  --amber-2: #dcff7a;
  --amber-ink: var(--ink);
  --chalk: #ffffff;
  --paper: #f3f5f0;
  --paper-2: #d3d9dd;
  --paper-3: #a3acb3;
  --muted: #a3acb3;
  --muted-2: #6f7a82;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.26);
  --display: var(--f-d);
  --body: var(--f-b);
  --mono: var(--f-m);
  --nav-h: var(--head-h);
  --gutter: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--chalk);
  font-family: var(--f-b);
}
.booking .t2 { color: #fff; }
/* the dialog is a sibling of .booking, not inside it, so it needs the dark-surface colours too */
.booking .kicker, .booking-modal .kicker { color: var(--volt); }
.booking :focus-visible, .booking-modal :focus-visible { outline-color: var(--volt); }
/* =====================================================================
   BOOKING (injected by the Worker for cities with a mechanic email)
   ===================================================================== */
.booking {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.booking-head h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin: 0.9rem 0 1.25rem; }
.booking-head h2 .stroke { display: block; }
.booking-lede { color: var(--paper-2); line-height: 1.7; font-size: 1.05rem; max-width: 30rem; }

.booking-points { list-style: none; margin-top: 1.5rem; display: grid; gap: 0.7rem; }
.booking-points li { position: relative; padding-left: 1.5rem; color: var(--muted); line-height: 1.55; }
.booking-points li b { color: var(--chalk); font-weight: 600; }
.booking-points li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 9px; height: 9px; background: var(--amber); transform: rotate(45deg); }

.booking-form {
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-top: 5px solid var(--amber);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.6rem;
}

.booking-form[hidden] { display: none; }

.bf-set { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0.9rem; }

.bf-set legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}

.bf-set legend::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }

.bf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.bf-grid .span-2 { grid-column: 1 / -1; }

.bf-field { display: grid; gap: 0.35rem; min-width: 0; }

.bf-field label,
.bf-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.bf-field label small { text-transform: none; letter-spacing: 0.04em; color: var(--muted-2); }

.bf-field input,
.bf-field select,
.bf-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.85rem;
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font: inherit;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bf-field select {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23c6f135' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

.bf-field select:disabled { color: var(--muted-2); }
.bf-field input[hidden] { display: none; }
.bf-field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.bf-field input::placeholder, .bf-field textarea::placeholder { color: var(--muted-2); }
.bf-field input[type="date"] { color-scheme: dark; }

.bf-field input:focus,
.bf-field select:focus,
.bf-field textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(198, 241, 53, 0.2); }

.bf-field.is-error input,
.bf-field.is-error select,
.bf-field.is-error textarea { border-color: #ff7a6a; }

.bf-error { font-size: 0.82rem; line-height: 1.35; color: #ff9a8c; min-height: 0; }
.bf-error:empty { display: none; }

.bf-windows { display: flex; gap: 0.5rem; }
.bf-window { position: relative; display: block; flex: 1 1 0; min-width: 0; cursor: pointer; }
.bf-window input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.bf-window span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 62px;
  height: 100%;
  padding: 0.4rem 0.25rem;
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper-2);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.bf-window small { font-family: var(--mono); font-weight: 400; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: none; color: var(--muted); }
.bf-window input:checked + span { border-color: var(--amber); background: rgba(198, 241, 53, 0.12); color: var(--amber-2); }
.bf-window input:focus-visible + span { box-shadow: 0 0 0 3px rgba(198, 241, 53, 0.3); }

.bf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.bf-actions .btn { min-width: 240px; }
.bf-note { font-size: 0.85rem; color: var(--muted); max-width: 22rem; line-height: 1.45; }
.bf-status { font-size: 0.95rem; color: var(--paper-2); }
.bf-status:empty { display: none; }
.bf-status.is-error { color: #ff9a8c; }
.cf-turnstile { min-height: 65px; }

.booking-done {
  display: none;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-top: 5px solid var(--amber);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.booking-done.is-visible { display: block; }
.booking-done h3 { font-size: clamp(2rem, 4vw, 3rem); margin: 0.75rem 0 0.75rem; }
.booking-done p { color: var(--paper-2); line-height: 1.6; }

.bd-summary { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid var(--line-strong); padding-top: 1.25rem; }
.bd-summary dt { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.bd-summary dd { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; color: var(--paper); }
.bd-actions { margin: 1.5rem 0 0; }

/* The page keeps a compact booking section; the form itself opens in a modal. */
.booking-grid { align-items: stretch; }
.booking-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.booking-cta .btn { min-width: 280px; min-height: 60px; font-size: 1.3rem; }
.booking-cta .bf-note { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* "How it works" board beside the pitch */
.booking-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-top: 5px solid var(--amber);
  overflow: hidden;
}
.booking-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.35;
  pointer-events: none;
}
.booking-rail > * { position: relative; }
.rail-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; padding: 1rem 1.6rem; border-bottom: 1px solid var(--line); }
.rail-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); }
.rail-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.65rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.rail-meta > * { white-space: nowrap; }
.rail-meta b { color: var(--paper); font-weight: 600; }
.rail-meta i { width: 6px; height: 6px; background: var(--amber); transform: rotate(45deg); }
.rail-steps { list-style: none; flex: 1; margin: 0; padding: 0.75rem 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.rail-steps li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.35rem 0; }
.rail-steps li + li { border-top: 1px dashed var(--line-strong); }
.rail-n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.9rem, 4vw, 3.8rem);
  line-height: 0.82;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--amber);
  transition: color 0.25s;
}
.rail-steps li:first-child .rail-n, .rail-steps li:hover .rail-n { color: var(--amber); }
.rail-steps h3 { margin: 0.15rem 0 0.4rem; font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; color: var(--paper); }
.rail-steps p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 1rem; max-width: 36rem; }
.rail-foot { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; padding: 1rem 1.6rem; border-top: 1px solid var(--line); background: var(--ink-2); }
.rail-foot span { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-2); }
.rail-foot span::before { content: ""; width: 7px; height: 7px; background: var(--amber); transform: rotate(45deg); }
@media (max-width: 768px) {
  .rail-steps li { grid-template-columns: 4rem minmax(0, 1fr); padding: 1.1rem 0; }
  .rail-steps h3 { font-size: 1.3rem; }
  .rail-top, .rail-steps, .rail-foot { padding-left: 1.1rem; padding-right: 1.1rem; }
}

.booking-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(840px, calc(100vw - 2rem));
  max-width: none;
  max-height: min(92vh, 1000px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  overflow: visible;
}
.booking-modal:not([open]) { display: none; }
.booking-modal::backdrop { background: rgba(6, 7, 11, 0.82); backdrop-filter: blur(3px); }
.bm-frame {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 1000px);
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-top: 5px solid var(--amber);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.bm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1.25rem, 3vw, 2rem) 1rem; border-bottom: 1px solid var(--line); }
.bm-head h3 { margin: 0.35rem 0 0; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; }
.bm-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
  color: var(--paper);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.bm-close:hover { border-color: var(--amber); color: var(--amber-2); }
.bm-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: clamp(1.25rem, 3vw, 2rem); }
.bm-body .booking-form, .bm-body .booking-done { border: 0; padding: 0; background: transparent; }
html.has-modal, html.has-modal body { overflow: hidden; }
@keyframes bm-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.booking-modal[open] .bm-frame { animation: bm-in 0.28s var(--ease) both; }
@media (max-width: 768px) {
  .booking-modal { width: 100vw; height: 100dvh; max-height: none; margin: 0; }
  .bm-frame { height: 100dvh; max-height: none; border-left: 0; border-right: 0; border-bottom: 0; }
  .bm-body { padding-bottom: 3rem; }
  .booking-cta .btn { min-width: 0; width: 100%; }
}

.bf-field[hidden] { display: none; }
/* Whatever windows are still available share one row equally: four squeeze in, three line up
   under the three day boxes, two go half and half. Never an empty slot. */
.bf-window[hidden] { display: none; }
.bf-field-windows { margin-top: -0.4rem; }

/* Vehicle: manual entry or VIN scan */
.bf-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.bf-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 62px;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-2);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.bf-mode-btn small { font-family: var(--mono); font-weight: 400; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: none; color: var(--muted); }
.bf-mode-btn.is-on { border-color: var(--amber); background: rgba(198, 241, 53, 0.12); color: var(--amber-2); }
.bf-mode-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(198, 241, 53, 0.3); }

.bf-vin { gap: 0.75rem; padding: 1rem; border: 1px dashed var(--line-strong); background: var(--ink-3); }
.bf-vin-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); gap: 0.75rem; align-items: center; }
.bf-vin-snap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.6rem 1rem;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}
.bf-vin-snap:hover { background: var(--amber-2); }
.bf-vin-snap:focus-within { box-shadow: 0 0 0 3px rgba(198, 241, 53, 0.3); }
.bf-vin-or { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: center; }
.bf-vin-type { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.bf-vin-type input { text-transform: uppercase; font-family: var(--mono); letter-spacing: 0.08em; }
.bf-vin-go {
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.bf-vin-go:hover { border-color: var(--amber); color: var(--amber-2); }
.bf-vin-go:disabled { opacity: 0.5; cursor: wait; }
.bf-vin-status { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--paper-2); }
.bf-vin-status:empty { display: none; }
.bf-vin-status.is-error { color: #ff9a8c; }
.bf-vin-status.is-warn { color: #ffd27a; }
.bf-vin-status.is-ok { color: var(--amber-2); }
.bf-vin-status.is-busy { color: var(--muted); }
.bf-vin-hint { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.bf-vehicle-grid[hidden] { display: none; }

/* phones: the smallest labels people actually read get a notch bigger (the decorative sign/flap bits stay) */
@media (max-width: 480px) {
  .f-tag, .exit-k, .to-top-label, .bd-summary dt, .bf-mode-btn small, .compare-table td::before { font-size: 0.66rem; }
}

/* Two-step form: 1 vehicle & you, 2 where & when */
.bf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.bf-steps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.bf-steps li b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0;
}
.bf-steps li.is-on { border-color: var(--amber); background: rgba(198, 241, 53, 0.1); color: var(--amber-2); }
.bf-steps li.is-done { color: var(--paper-2); }
.bf-steps li.is-done b { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.bf-page { display: grid; gap: inherit; }
.bf-page[hidden] { display: none; }
.bf-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.bf-nav .btn { min-width: 240px; }
.bf-actions .bf-back { min-width: 0; padding: 0 1.25rem; }

/* "Locate me" beside the street address */
.bf-addr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.bf-locate {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 48px;
  padding: 0 0.9rem;
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.bf-locate:hover { border-color: var(--amber); color: var(--amber-2); }
.bf-locate:disabled { opacity: 0.55; cursor: wait; }
.bf-locate svg { flex: none; }
.bf-locate.is-busy svg { animation: bf-spin 1s linear infinite; }
@keyframes bf-spin { to { transform: rotate(360deg); } }
.bf-error.is-warn { display: block; color: #ffd27a; }

.bf-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.bf-day.is-closed span { opacity: 0.45; cursor: not-allowed; }
.bf-day.is-closed small { color: #ff9a8c; }

.bf-split { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem; }

.bf-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  background: var(--ink-3);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--amber);
  user-select: none;
}

.callband-book {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}


@media (max-width: 980px) {
  .booking-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .bf-grid { grid-template-columns: minmax(0, 1fr); }
  .bf-window span { font-size: 0.84rem; letter-spacing: 0.02em; padding-inline: 0.15rem; }
  .bf-vin-actions { grid-template-columns: minmax(0, 1fr); }
  .bf-vin { padding: 0.75rem; }
  .bf-locate span { display: none; }
  .bf-locate { padding: 0 0.85rem; }
  .bf-steps li { font-size: 0.6rem; letter-spacing: 0.12em; padding-inline: 0.6rem; }
  .bf-nav .btn, .bf-actions .btn { min-width: 0; flex: 1 1 auto; }
  .bd-summary { grid-template-columns: minmax(0, 1fr); }
  .bf-actions .btn { width: 100%; min-width: 0; }
}