/* Diego's Auto Body: booking app (/book/ + /book/manage/).
   Mounts into [data-booking-mount] (or [data-booking-root]) of the generated shell.
   Reuses site.css tokens (--navy, --red, --tape, --steel, --ink, --muted, --line, --r, --sans, --serif)
   and its .btn / .field / .form__status classes; everything here is prefixed .bk-. */

[data-booking-root].bk-mounted .book-shell__nojs,
[data-booking-root].bk-mounted .book-shell__soon { display: none; }
/* the day strip is a contained scroller: never let its min-content width widen the shell's grid/flex column */
[data-booking-root] [data-booking-mount], .bk, .bk-card, .bk-picker, .bk-sec, .bk form { min-width: 0; max-width: 100%; }

/* */
.bk { width: 100%; --bk-ok: #24532A; --bk-ok-bg: #E7F1E3; --bk-err: #8E1A20; --bk-err-bg: #FBE7E7; --bk-dis: #6B7480;
  position: relative; max-width: 720px; margin: 0 auto; color: var(--ink, #141D2B); font-family: var(--sans, system-ui, sans-serif); }
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
.bk button { font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bk [hidden] { display: none !important; }
.bk-card { padding: clamp(20px, 4vw, 36px); background: var(--white, #fff); border: 1px solid var(--line, rgba(28,43,60,.14));
  border-top: 4px solid var(--red, #C8202A); border-radius: var(--r, 4px); box-shadow: var(--shadow, 0 12px 32px -12px rgba(20,29,43,.18)); }

/* progress */
.bk-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.bk-progress__bar { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bk-progress__bar span { height: 5px; border-radius: 3px; background: var(--steel, #C2C6C4); transition: background-color .25s ease; }
.bk-progress__bar span.is-on { background: var(--red, #C8202A); }
.bk-progress__txt { margin: 0; font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #4A5560); white-space: nowrap; }

.bk-h { margin: 0 0 6px; font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); line-height: 1.2; color: var(--ink); }
.bk-h:focus { outline: none; }
.bk-h:focus-visible { outline: 3px solid var(--tape, #CCBF6A); outline-offset: 4px; }
.bk-sub { margin: 0 0 20px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.bk-sec { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.bk-sec > legend, .bk-legend { display: block; padding: 0; margin: 0 0 10px; font: 600 .95rem/1.3 var(--sans); color: var(--navy, #1C2B3C); }
.bk-legend small, .bk-sec > legend small { font-weight: 400; color: var(--muted); }
.bk-req { color: var(--red); }

/* service choices */
.bk-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.bk-choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
  border: 1.5px solid #B6BCB9; border-radius: var(--r); background: var(--white); cursor: pointer; line-height: 1.3;
  transition: border-color .2s ease, background-color .2s ease; }
.bk-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-choice__dot { flex: none; width: 20px; height: 20px; border: 2px solid var(--primer, #A3A3A3); border-radius: 50%; display: grid; place-items: center; transition: border-color .2s ease; }
.bk-choice__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .2s ease; }
.bk-choice:hover { border-color: var(--navy); }
.bk-choice:has(input:checked) { border-color: var(--navy); background: #F7F8F3; box-shadow: inset 0 0 0 1px var(--navy); }
.bk-choice input:checked + .bk-choice__dot { border-color: var(--red); }
.bk-choice input:checked + .bk-choice__dot::after { transform: scale(1); }
.bk-choice:has(input:focus-visible) { outline: 3px solid var(--tape); outline-offset: 2px; }

/* fields: build on site.css .field */
.bk .field { margin: 0 0 16px; }
.bk .field__l { font-size: .9rem; line-height: 1.3; }
.bk .field input, .bk .field textarea, .bk .field select { font-size: 1rem; min-height: 52px; }
.bk-help { margin: 0; font-size: .86rem; color: var(--muted); }
.bk-err { margin: 0; font-size: .88rem; font-weight: 600; color: var(--bk-err); }
.bk .field.is-bad input, .bk .field.is-bad textarea, .bk .field.is-bad select { border-color: var(--bk-err); }
.bk-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.bk-consent { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 0 0 6px; border: 1.5px solid #B6BCB9; border-radius: var(--r); background: var(--surface, #EFF3EE); cursor: pointer; line-height: 1.45; }
.bk-consent input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--red); cursor: pointer; }
.bk-consent.is-bad { border-color: var(--bk-err); }

/* day strip: contained horizontal scroller (the page itself never scrolls sideways) */
.bk-days { display: flex; gap: 8px; margin: 0 -4px 6px; padding: 4px 4px 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bk-day { flex: none; scroll-snap-align: start; width: 68px; min-height: 84px; padding: 8px 4px; display: grid; justify-items: center; align-content: center; gap: 2px;
  border: 1.5px solid #B6BCB9; border-radius: var(--r); background: var(--white); color: var(--ink); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.bk-day__wd { font: 600 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bk-day__n { font: 700 1.35rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.bk-day__m { font-size: .72rem; line-height: 1.1; color: var(--muted); }
.bk-day__st { font-size: .68rem; line-height: 1.1; font-weight: 600; color: var(--bk-ok); }
.bk-day:hover:not(:disabled) { border-color: var(--navy); }
.bk-day[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.bk-day[aria-pressed="true"] .bk-day__wd, .bk-day[aria-pressed="true"] .bk-day__m { color: #D9DEE4; }
.bk-day[aria-pressed="true"] .bk-day__st { color: var(--tape); }
.bk-day:disabled { cursor: not-allowed; background: #EEF0EE; border-style: dashed; color: var(--bk-dis); }
.bk-day:disabled .bk-day__st { color: var(--bk-dis); font-weight: 500; }
.bk-day:focus-visible, .bk-slot:focus-visible, .bk-choice:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; }
.bk-days-more { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 14px; }
.bk-days-more .btn { min-height: 44px; }

.bk-slots__group { margin: 14px 0 0; }
.bk-slots__h { margin: 0 0 8px; font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.bk-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bk-slot { min-height: 48px; padding: 8px 6px; border: 1.5px solid #B6BCB9; border-radius: var(--r); background: var(--white); color: var(--ink);
  font: 600 .98rem/1.2 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.bk-slot:hover { border-color: var(--navy); }
.bk-slot[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); }
.bk-empty { margin: 12px 0 0; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border-left: 3px solid var(--tape); color: var(--ink); }
.bk-chosen { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r); background: #F7F8F3; border: 1px dashed rgba(204,191,106,.9); font-weight: 600; }

/* skeleton */
.bk-skel { display: flex; gap: 8px; overflow: hidden; }
.bk-skel span { flex: none; width: 68px; height: 84px; border-radius: var(--r); background: linear-gradient(90deg, #E8EBE8 0%, #F4F5F2 50%, #E8EBE8 100%); background-size: 200% 100%; animation: bk-shim 1.2s linear infinite; }
.bk-skel--slots span { width: 96px; height: 48px; }
@keyframes bk-shim { to { background-position: -200% 0; } }

/* actions */
.bk-actions { display: flex; flex-wrap: wrap-reverse; gap: 10px; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.bk-actions .btn { min-height: 52px; }
.bk-actions .btn--red { flex: 1 1 220px; }
.bk-back { flex: 0 0 auto; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.bk-btn-danger { background: var(--bk-err); color: #fff; border-color: var(--bk-err); }
.bk-btn-danger:hover { background: #6E1218; color: #fff; }

/* status / messages */
.bk-status { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r); font-weight: 600; line-height: 1.45; }
.bk-status:empty { display: none; }
.bk-status.is-err { background: var(--bk-err-bg); color: var(--bk-err); }
.bk-status.is-ok { background: var(--bk-ok-bg); color: var(--bk-ok); }
.bk-status.is-info { background: var(--surface); color: var(--ink); border-left: 3px solid var(--tape); }
.bk-status a { color: inherit; }

/* summary + confirmation */
.bk-summary { margin: 0 0 20px; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); }
.bk-summary > div { display: grid; grid-template-columns: minmax(84px, 30%) 1fr; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.bk-summary > div:first-child { border-top: 0; }
.bk-summary dt { margin: 0; font: 600 .8rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bk-summary dd { margin: 0; overflow-wrap: anywhere; }
.bk-ref { display: inline-block; padding: 4px 10px; border-radius: 3px; background: var(--tape); color: var(--ink); font: 700 1.05rem/1.3 var(--sans); letter-spacing: .08em; }
.bk-done-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--bk-ok); font-weight: 700; }
.bk-done-badge svg { width: 26px; height: 26px; }
.bk-links { display: grid; gap: 10px; margin: 0; }
.bk-links .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }
.bk-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 .78rem/1.3 var(--sans); letter-spacing: .04em; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.bk-chip--booked { background: var(--bk-ok-bg); color: var(--bk-ok); border-color: transparent; }
.bk-chip--cancelled { background: var(--bk-err-bg); color: var(--bk-err); border-color: transparent; }
.bk-confirm { margin: 18px 0 0; padding: 16px; border: 2px solid var(--bk-err); border-radius: var(--r); background: #FFF8F8; }
.bk-confirm p { margin: 0 0 12px; font-weight: 600; }
.bk-confirm .bk-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-confirm .btn { flex: 1 1 160px; }
.bk-small { font-size: .9rem; color: var(--muted); }

@media (max-width: 420px) {
  .bk-card { padding: 18px 16px; }
  .bk-actions .btn { width: 100%; }
  .bk-back { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bk *, .bk *::before, .bk *::after { transition: none !important; animation: none !important; }
}

/* inside the generated shell the mount (.book-shell__mount, pages.css) is already the white card */
[data-booking-mount] .bk-card { padding: 0; background: none; border: 0; box-shadow: none; }
@media (max-width: 420px) { [data-booking-mount] .bk-card { padding: 0; } }

/* sticky mobile bar on the booking pages: Call only (its Free estimate button points at this page) */
.mbar-call-only .mbar { grid-template-columns: 1fr; }
.mbar-call-only .mbar__est { display: none; }