/* public/book.css - the online booking page (2026-10-27 revamp).
   Page-only styles. Tokens from /tools/design-system.css; shared top bar and
   footer from /pricing-tool.css. Phone first: 98% of this page's traffic is a
   phone, most of it the Facebook in-app browser. Every tap target is 44px+. */

.bk-wrap { max-width: 520px; margin: 0 auto; padding: 0 var(--s-4) var(--s-8); }

/* Header (2026-10-29 redesign): the logo centered with room above it, the
   phone as a centered button under it. A full-width bar from a tablet up. */
.bk-header { padding: var(--s-5) var(--s-4) var(--s-1); }
.bk-header-in { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bk-row2-wide { display: flex; flex-direction: column; gap: 12px; }
.bk-logo { display: block; width: 168px; height: auto; }
.bk-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 2px solid var(--brand-royal);
  border-radius: var(--r-full); background: var(--surface); color: var(--brand-royal-ink); font-weight: 800; font-size: 1rem; text-decoration: none; }
.bk-call svg { width: 18px; height: 18px; color: var(--brand-royal); }
.bk-call:hover { background: var(--brand-royal-soft); }
.bk-step { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-4); }
.bk-step[hidden] { display: none; }

.bk-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  padding: 0 var(--s-2) 0 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.bk-back svg { width: 20px; height: 20px; }

.bk-progress { display: flex; flex-direction: column; gap: 6px; padding-top: var(--s-3); }
.bk-progress-bars { display: flex; gap: 6px; }
.bk-progress-bars span { flex: 1 1 0; height: 6px; border-radius: var(--r-full); background: var(--border); }
.bk-progress-bars span.on { background: var(--brand-royal-ink); }
.bk-progress-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); font-weight: 600; color: var(--ink-2); }

.bk-h1 { margin: 0; font-size: 1.6rem; line-height: 1.15; font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--ink); }
.bk-sub { margin: 4px 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.bk-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }

/* Service tiles */
.bk-tile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--ink);
  text-align: left; font: inherit; cursor: pointer; }
.bk-tile:hover, .bk-tile:focus-visible { border-color: var(--brand-royal); }
.bk-tile-icon { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--brand-royal-soft); color: var(--brand-royal-ink); }
.bk-tile-icon svg { width: 24px; height: 24px; }
.bk-tile-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.bk-tile-label { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.bk-tile-sub { font-size: var(--text-sm); font-weight: 600; color: var(--success-ink); }
.bk-tile-chev { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.bk-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-tile-grid .bk-tile { flex-direction: column; align-items: flex-start; min-height: 112px; gap: 10px; }
.bk-tile-grid .bk-tile-icon { width: 40px; height: 40px; }
.bk-tile-grid .bk-tile-sub { color: var(--ink-2); font-weight: 500; }

/* Chips (the one tap question) */
.bk-chips { display: flex; flex-direction: column; gap: 10px; }
.bk-chip { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 18px;
  border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 600; text-align: left; cursor: pointer; }
.bk-chip:hover, .bk-chip:focus-visible { border-color: var(--brand-royal); }
.bk-chip svg { width: 18px; height: 18px; color: var(--muted); }
.bk-note { margin: 0; font-size: var(--text-sm); color: var(--ink-2); }
.bk-note a { font-weight: 700; color: var(--brand-royal-ink); }

/* Summary row (service / address) */
.bk-summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); }
.bk-summary .bk-tile-icon { width: 40px; height: 40px; }
.bk-summary-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.bk-summary-text b { font-size: var(--text-sm); }
.bk-summary-text span { font-size: var(--text-sm); color: var(--ink-2); }
.bk-link { border: 0; background: none; padding: 0 4px; min-height: 44px; color: var(--brand-royal-ink); font: inherit;
  font-size: var(--text-sm); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Form */
.bk-form { display: flex; flex-direction: column; gap: 12px; }
.bk-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-row-cityzip { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; }
.bk-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.bk-field input { height: 48px; box-sizing: border-box; width: 100%; padding: 0 12px; border: 1.5px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; }
.bk-field input:focus { outline: none; border-color: var(--brand-royal); box-shadow: 0 0 0 3px var(--brand-royal-soft); }
.bk-field.bk-bad input { border-color: var(--danger); }
.bk-field-err { font-size: var(--text-xs); font-weight: 600; color: var(--danger-ink); }
/* The one REQUIRED consent box (2026-10-29): a card, so it reads as a step of
   the form and not small print; red when Continue was tapped without it. */
.bk-consent { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); font-size: var(--text-sm); color: var(--ink-2); line-height: 1.45; cursor: pointer; }
.bk-consent b { color: var(--ink); }
.bk-consent input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--brand-royal-ink); }
.bk-consent > span:first-of-type { flex: 1 1 0; min-width: 0; }
.bk-consent.bk-bad { border-color: var(--danger); }
.bk-consent .bk-field-err { flex-basis: 100%; padding-left: 36px; }
.bk-form-err { padding: 10px 12px; border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger-ink); font-size: var(--text-sm); font-weight: 600; }

/* Times */
.bk-soonest { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 16px;
  border: 1.5px solid var(--border); border-radius: var(--r-xl); background: var(--surface); color: var(--ink);
  text-align: left; font: inherit; cursor: pointer; }
.bk-soonest.on { border: 2.5px solid var(--brand-royal-ink); }
.bk-soonest-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.bk-badge { padding: 4px 10px; border-radius: var(--r-full); background: var(--brand-gold-b); color: var(--ink); font-size: var(--text-xs);
  font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.bk-check { width: 26px; height: 26px; border-radius: var(--r-full); background: var(--brand-royal-ink); color: #fff;
  display: flex; align-items: center; justify-content: center; }
.bk-check svg { width: 16px; height: 16px; }
.bk-soonest-day { font-size: 1.35rem; font-weight: 800; }
.bk-soonest-win { font-size: 1rem; color: var(--ink-2); }

.bk-cal { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; }
.bk-cal-head b { font-size: var(--text-md); }
.bk-cal-nav { display: flex; gap: 6px; }
.bk-cal-nav button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bk-cal-nav button:disabled { color: var(--muted); cursor: default; }
.bk-cal-nav svg { width: 16px; height: 16px; }
.bk-dow, .bk-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.bk-dow span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-2); }
.bk-day { height: 52px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; font: inherit; cursor: pointer; }
.bk-day b { font-size: 1.05rem; }
.bk-day i { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--success); }
.bk-day:disabled { background: var(--surface-2); border-color: transparent; color: var(--muted); text-decoration: line-through; cursor: default; }
.bk-day:disabled i { background: transparent; }
.bk-day.on { background: var(--brand-royal-ink); border-color: var(--brand-royal-ink); color: #fff; }
.bk-day.on i { background: #fff; }
.bk-legend { display: flex; gap: 14px; font-size: var(--text-xs); color: var(--ink-2); }
.bk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bk-legend i { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--success); }
.bk-legend s { color: var(--muted); }
.bk-wins-head { font-size: var(--text-sm); font-weight: 700; }
.bk-wins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-win { min-height: 56px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; cursor: pointer; }
.bk-win b { font-size: 0.95rem; }
.bk-win span { font-size: 11px; font-weight: 600; }
.bk-win:disabled { background: var(--surface-2); border-color: transparent; color: var(--muted); cursor: default; }
.bk-win.on { background: var(--brand-royal-ink); border-color: var(--brand-royal-ink); color: #fff; }
.bk-cal-sep { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.bk-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; color: var(--ink-2); font-size: var(--text-sm); }
.bk-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--brand-royal-ink);
  animation: bk-spin 0.8s linear infinite; }
@keyframes bk-spin { to { transform: rotate(360deg); } }
.bk-callout { padding: 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn-ink); font-size: var(--text-sm); line-height: 1.45; }
.bk-center-link { align-self: center; border: 0; background: none; min-height: 44px; font: inherit; font-size: var(--text-sm); color: var(--ink-2); cursor: pointer; }
.bk-center-link b { color: var(--brand-royal-ink); text-decoration: underline; }

/* Sticky CTA */
.bk-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); background: var(--surface);
  border-top: 1px solid var(--border); padding: 12px var(--s-4) calc(16px + env(safe-area-inset-bottom)); }
.bk-cta[hidden] { display: none; }
.bk-cta-inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.bk-cta-btn { height: 56px; width: 100%; border: 0; border-radius: 14px; background: var(--brand-royal-ink); color: #fff;
  font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; }
.bk-cta-btn:disabled { background: var(--border); color: var(--ink-2); cursor: default; }
.bk-cta-note { text-align: center; font-size: var(--text-xs); color: var(--ink-2); }

/* Done */
.bk-done-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; text-align: center; }
.bk-done-icon { width: 64px; height: 64px; border-radius: var(--r-full); background: var(--success-soft); color: var(--success-ink);
  display: flex; align-items: center; justify-content: center; }
.bk-done-icon svg { width: 34px; height: 34px; }
.bk-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.bk-card-row { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-md); color: var(--ink-2); }
.bk-card-row svg { width: 22px; height: 22px; color: var(--brand-royal-ink); flex-shrink: 0; }
.bk-card-row b { color: var(--ink); }
.bk-btn-outline { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 12px;
  border: 1.5px solid var(--brand-royal-ink); background: var(--surface); color: var(--brand-royal-ink); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; }
.bk-steps { display: flex; flex-direction: column; gap: 10px; }
.bk-steps div { display: flex; gap: 10px; font-size: var(--text-sm); color: var(--ink-2); }
.bk-steps i { font-style: normal; width: 24px; height: 24px; border-radius: var(--r-full); background: var(--brand-royal-soft); color: var(--brand-royal-ink);
  font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk-upsell { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--ink); color: #fff; text-decoration: none; }
.bk-upsell span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.bk-upsell small { color: var(--border); font-size: var(--text-sm); }
.bk-upsell svg { width: 20px; height: 20px; color: var(--brand-gold-b); }

@media (min-width: 640px) {
  .bk-h1 { font-size: 1.85rem; }
}
.bk-center { text-align: center; }

/* Footer (2026-10-29 redesign, Richard): the customer emails' look. The navy,
   teal and blue grey are services/email-layout.js BRAND (navy #0E2A47) so the
   page and the emails match; the design system has no navy token. Full width,
   outside .bk-wrap. Its bottom padding clears the sticky Continue/Book bar. */
.bk-footer { --bk-navy: #0E2A47; --bk-navy-2: #163A5F; --bk-teal-ink: #8FE3D8; --bk-on-navy: #BFD3E6;
  background: var(--bk-navy); color: #fff; padding: 30px var(--s-4) calc(120px + env(safe-area-inset-bottom)); text-align: center; }
.bk-footer-in { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bk-footer a { color: var(--bk-teal-ink); }
.bk-f-reviews { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bk-f-stars { color: var(--brand-gold-b); font-size: 22px; letter-spacing: 3px; }
.bk-f-reviews b { font-size: 1.1rem; }
.bk-f-reviews a { font-size: var(--text-sm); }
.bk-f-trust { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-f-trust li { background: var(--bk-navy-2); border-radius: 12px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bk-f-trust svg { width: 22px; height: 22px; color: var(--bk-teal-ink); }
.bk-f-trust b { font-size: var(--text-sm); }
.bk-f-trust span { font-size: var(--text-xs); line-height: 1.45; color: var(--bk-on-navy); }
.bk-f-follow { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bk-teal-ink); padding-top: 4px; }
.bk-f-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: -6px; }
.bk-f-social img { display: block; width: 40px; height: 40px; }
.bk-f-social-sm img { width: 30px; height: 30px; }
.bk-f-social a { display: block; border-radius: var(--r-full); }
.bk-f-also { margin: 0; font-size: var(--text-xs); line-height: 1.9; color: var(--bk-on-navy); }
.bk-f-also a { color: var(--bk-on-navy); }
.bk-f-company { width: 100%; border-top: 1px solid #24466B; padding-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: var(--text-sm); line-height: 1.6; color: #DCE8F3; }
.bk-f-company b { font-size: 1rem; color: #fff; }
.bk-f-company a { color: #DCE8F3; text-decoration: none; }
.bk-f-company .bk-f-phone { color: #fff; font-weight: 800; }
.bk-f-company .bk-f-site { color: var(--bk-teal-ink); }
@media (min-width: 640px) { .bk-f-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Tablet and computer (2026-10-29, Richard: on a computer the page was a
   phone-width strip with a page-wide footer). The header bar, the step panel
   and the footer share ONE column width (--bk-col) so every edge lines up;
   the panel becomes a white card on the grey page; choices spread into more
   columns; the Continue/Book bar puts the button on the right instead of a
   bar-wide button. A phone (under 720px) is unchanged. */
@media (min-width: 720px) {
  :root { --bk-col: 720px; }
  .bk-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px var(--s-6); }
  .bk-header-in { max-width: var(--bk-col); margin: 0 auto; flex-direction: row; justify-content: space-between; }
  .bk-logo { width: 140px; }
  .bk-wrap { max-width: calc(var(--bk-col) + 2 * var(--s-6)); padding: var(--s-8) var(--s-6) var(--s-10); }
  .bk-panel { display: block; padding: var(--s-2) var(--s-8) var(--s-8); border: 1px solid var(--border); border-radius: var(--r-xl);
    background: var(--surface); box-shadow: var(--shadow); }
  .bk-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-row2-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bk-wins { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .bk-done-head, .bk-steps, .bk-card { width: 100%; max-width: 560px; align-self: center; }
  .bk-upsell, #bk-step-called .bk-btn-outline { width: 100%; max-width: 560px; align-self: center; box-sizing: border-box; }
  .bk-cta { padding: 14px var(--s-6) calc(14px + env(safe-area-inset-bottom)); }
  .bk-cta-inner { max-width: var(--bk-col); flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .bk-cta-btn { width: auto; min-width: 300px; padding: 0 var(--s-8); }
  .bk-cta-note { text-align: left; font-size: var(--text-sm); }
  .bk-footer { padding-left: var(--s-6); padding-right: var(--s-6); padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .bk-footer-in { max-width: var(--bk-col); }
}
@media (min-width: 1024px) {
  :root { --bk-col: 920px; }
  .bk-logo { width: 156px; }
  .bk-panel { padding: var(--s-4) var(--s-12) var(--s-10); }
  .bk-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-h1 { font-size: 2rem; }
}