/* Public web-form booking page — self-contained, no framework. Adapts brand
   color from the tenant's saved config via a --accent CSS variable. */
:root {
  --accent: #0067b8;
  --accent-ink: #ffffff;
  --bg: #f3f6fa;
  --card: #ffffff;
  --ink: #1a2530;
  --ink-2: #526672;
  --border: #d7dfe6;
  --danger: #b8261f;
  --ok: #2e7d3f;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.loading { padding: 60px; text-align: center; color: var(--ink-2); }

/* Shared card container — narrow default for the single-column templates,
   overridden to wider for the two-panel `modern` template below. */
.bf-wrap { max-width: 640px; margin: 0 auto; padding: 32px 20px 80px; display: flex; flex-direction: column; }
body.tpl-modern .bf-wrap { max-width: 980px; }
.bf-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(20, 45, 70, .06);
  overflow: hidden;
  width: 100%;
}

/* Header — uses the brand accent as base + a subtle diagonal tint so it has
   depth without needing color-mix() (which older browsers don't support and
   which was making the header look flat/unstyled on classic). */
.bf-header {
  padding: 24px 28px;
  background-color: var(--accent);
  background-image: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(0,0,0,.18) 100%);
  color: var(--accent-ink);
}
.bf-header h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.bf-header p { margin: 0; font-size: 13px; opacity: .88; }
.bf-header-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; opacity: .95; }
.bf-header-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.bf-header-meta svg { flex: none; opacity: .85; }

/* Body */
.bf-body { padding: 24px 28px 28px; }
.bf-welcome { font-size: 13px; color: var(--ink-2); margin: 0 0 18px; line-height: 1.5; }

/* Fields */
.bf-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bf-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.bf-field { display: flex; flex-direction: column; gap: 4px; }
.bf-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.bf-field input, .bf-field select, .bf-field textarea {
  font: inherit;
  width: 100%;                 /* fill the flex/grid cell — native inputs
                                  otherwise render at their `size` default
                                  (20ch) and break out of the field card */
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.bf-field input:focus, .bf-field select:focus, .bf-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 103, 184, .22);   /* fallback */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.bf-field textarea { resize: vertical; min-height: 80px; }
.bf-hint { font-size: 11px; color: var(--ink-2); }

/* Service picker */
.bf-services { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: stretch; }
.bf-service {
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
  /* Vertically center the name when the tile is stretched to match a
     taller neighbour (e.g. one provider has a meta line, another doesn't). */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
}
.bf-service:hover { border-color: var(--accent); }
.bf-service.is-picked {
  border-color: var(--accent);
  background: rgba(0, 103, 184, .05);   /* neutral tint — brand color already drives the border */
}
.bf-service-name { font-weight: 600; font-size: 13px; color: var(--ink); }
.bf-service-meta { font-size: 11px; color: var(--ink-2); margin-top: 3px; }

/* Actions */
.bf-actions { margin-top: 22px; display: flex; align-items: center; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.bf-status { font-size: 12px; color: var(--ink-2); flex: 1; }
.bf-status.is-error { color: var(--danger); }
.bf-submit {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: filter .12s, transform .04s;
}
.bf-submit:hover:not(:disabled) { filter: brightness(1.05); }
.bf-submit:active:not(:disabled) { transform: translateY(1px); }
.bf-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Success state */
.bf-success {
  text-align: center;
  padding: 40px 28px;
}
.bf-success h2 { margin: 0 0 8px; color: var(--ok); font-size: 20px; }
.bf-success p  { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.bf-success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 12%, #fff);
  color: var(--ok);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700;
  margin-bottom: 14px;
}

/* Section title */
.bf-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--ink-2); margin: 20px 0 8px;
}
.bf-section-title:first-child { margin-top: 0; }

/* Footer */
.bf-footer { text-align: center; margin-top: 20px; font-size: 11px; color: var(--ink-2); }

/* ── Modern: Calendly-style wizard ───────────────────────────────
   Two-column layout: left sidebar with business/summary, right stage that
   swipes through the steps. Overrides .bf-wrap max-width since the wizard
   uses its own container. */
body.tpl-modern .bf-wrap { display: none; }   /* hide any classic markup that leaked in */
body.tpl-modern .bf-wiz-classic-header,
body.tpl-minimal .bf-wiz-classic-header { display: none; }
body.tpl-modern {
  background: #f2f5f9;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}

.bf-wiz-page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(20,45,70,.08);
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px 1fr;
}
@media (max-width: 820px) { .bf-wiz-page { grid-template-columns: 1fr; } }

/* Sidebar — uses the brand color as a hero panel (Calendly-style). Flexbox
   with center-alignment vertically centers the inner block so short content
   doesn't stick to the top of a tall panel. */
.bf-wiz-side {
  padding: 28px 24px;
  background-color: var(--accent);
  background-image: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.15) 100%);
  color: var(--accent-ink);
  border-right: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;         /* vertically centre the whole inner block */
}
.bf-wiz-side > .bf-wiz-side-inner { width: 100%; }
@media (max-width: 820px) { .bf-wiz-side { border-right: 0; border-bottom: 1px solid #eef2f5; } }
.bf-wiz-side-inner { text-align: left; }
.bf-wiz-brand { display: block; }
.bf-wiz-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.20); color: var(--accent-ink);
  font-weight: 700; font-size: 20px;
  border: 1px solid rgba(255,255,255,.30);
  margin-bottom: 14px;
}
.bf-wiz-brand h1 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--accent-ink); }
.bf-wiz-tagline { margin: 0; color: rgba(255,255,255,.80); font-size: 13px; }

.bf-wiz-summary { margin-top: 22px; display: grid; gap: 8px; text-align: left; }
.bf-wiz-sum-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
}
.bf-wiz-sum-item label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.75);
  min-width: 48px;
}
.bf-wiz-sum-item span { font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.bf-wiz-sum-empty { font-size: 12px; color: rgba(255,255,255,.75); padding: 12px 4px; }

.bf-wiz-welcome { margin: 20px 0 0; font-size: 12.5px; color: rgba(255,255,255,.85); line-height: 1.5; }

.bf-wiz-meta {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.85);
}
.bf-wiz-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.bf-wiz-meta svg { opacity: .8; }

/* Main stage */
.bf-wiz-main { padding: 28px 32px 22px; display: flex; flex-direction: column; }

.bf-wiz-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.bf-wiz-progress-dot {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2); font-size: 12px;
}
.bf-wiz-progress-dot > span {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: #e6ecf1; color: var(--ink-2);
  border: 1.5px solid transparent;
}
.bf-wiz-progress-dot em { font-style: normal; font-weight: 500; }
.bf-wiz-progress-dot.is-here > span { background: var(--accent); color: var(--accent-ink); }
.bf-wiz-progress-dot.is-here em    { color: var(--ink); font-weight: 700; }
.bf-wiz-progress-dot.is-done > span {
  background: rgba(0, 103, 184, .12);            /* fallback */
  background: color-mix(in srgb, var(--accent) 20%, #fff);
  color: var(--accent);
  border-color: var(--accent);
}
.bf-wiz-progress-dot.is-done em    { color: var(--ink); }
.bf-wiz-progress-line { flex: 1; height: 1.5px; background: #e6ecf1; margin: 0 2px; border-radius: 2px; }

/* Stage (swipe animation). Locked height matches the tallest step (the
   calendar with an expanded slot row) so the outer page doesn't jitter
   between steps. On mobile we relax the lock and let the stage grow. */
.bf-wiz-stage {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 640px) { .bf-wiz-stage { min-height: 460px; } }
.bf-wiz-slide {
  position: absolute;
  inset: 4px 0 12px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* details step overrides to center */
  overflow-y: auto;              /* scroll when content (e.g. calendar with
                                    an expanded slot row on the last week)
                                    exceeds the stage height */
  overflow-x: hidden;
  transition: transform .26s cubic-bezier(.4,.0,.2,1), opacity .22s ease;
  padding: 4px 2px 12px;
  scrollbar-gutter: stable;
}

.bf-wiz-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.bf-wiz-sub   { margin: 0 0 16px; color: var(--ink-2); font-size: 13px; }

/* Service picker (wizard) */
.bf-wiz-services { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 500px) {
  .bf-wiz-services { grid-template-columns: 1fr 1fr; }
  /* Odd count → promote the first tile to a full-width hero row so the
     remaining even count fills the 2-column grid cleanly. */
  .bf-wiz-services.is-odd > :first-child { grid-column: 1 / -1; }
}
.bf-wiz-svc {
  font: inherit;
  text-align: left;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .04s;
}
.bf-wiz-svc:hover { border-color: var(--accent); }
.bf-wiz-svc:active { transform: scale(.99); }
.bf-wiz-svc.is-picked {
  border-color: var(--accent);
  background: rgba(0, 103, 184, .06);            /* fallback */
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}
.bf-wiz-svc-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.bf-wiz-svc-meta { font-size: 12px; color: var(--ink-2); margin-top: 3px; }

/* Details form (wizard) — capped width and centered so the shorter step
   doesn't feel adrift in the tall stage. */
.bf-wiz-form {
  display: grid; gap: 14px; grid-template-columns: 1fr;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 560px) { .bf-wiz-form { grid-template-columns: 1fr 1fr; } .bf-wiz-form > .bf-field:nth-child(3), .bf-wiz-form > .bf-field:nth-child(4) { grid-column: 1 / -1; } }

/* Short steps (service, details, confirm) center vertically in the locked
   stage so they don't stick to the top of a tall panel. The calendar step
   is naturally tall and stays top-aligned. All content stays LEFT-aligned
   so it reads like a form, not a marketing card. */
.bf-wiz-slide-service,
.bf-wiz-slide-provider,
.bf-wiz-slide-details,
.bf-wiz-slide-confirm {
  justify-content: center;
  align-items: stretch;
  text-align: left;
}
.bf-wiz-slide-details .bf-wiz-form { margin: 0; max-width: none; }

/* Confirmation */
.bf-wiz-confirmation { text-align: center; padding: 30px 20px; }
.bf-wiz-check { color: var(--accent); display: inline-block; margin-bottom: 12px; }
.bf-wiz-conf-detail {
  margin: 14px auto;
  padding: 14px 22px;
  display: inline-block;
  border: 1px solid #e4edf3;
  border-radius: 12px;
  background: #f6fafd;
  font-size: 14px;
  color: var(--ink);
}
.bf-wiz-conf-detail > div + div { margin-top: 4px; color: var(--ink-2); font-weight: 500; }

/* Footer with Back / Continue */
.bf-wiz-footer { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef2f5; }
.bf-wiz-back, .bf-wiz-next {
  font: inherit; font-weight: 600; font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, filter .12s, transform .04s;
}
/* HTML's `hidden` attribute must beat display:inline-flex above (otherwise
   the confirm-step footer still shows the buttons). */
.bf-wiz-back[hidden], .bf-wiz-next[hidden] { display: none !important; }
.bf-wiz-back { background: transparent; border: 1.5px solid var(--border); color: var(--ink-2); }
.bf-wiz-back:hover { background: #f4f8fb; color: var(--ink); }
.bf-wiz-next {
  margin-left: auto;
  background: var(--accent); color: var(--accent-ink); border: 1.5px solid var(--accent);
}
.bf-wiz-next:hover:not(:disabled) { filter: brightness(1.08); }
.bf-wiz-next:disabled { opacity: .4; cursor: not-allowed; }
.bf-wiz-status { flex: 1; text-align: center; font-size: 12.5px; color: var(--ink-2); }
.bf-wiz-status.is-error { color: var(--danger); }

/* Modern calendar tweaks: tighter, circular day cells */
.bf-cal.bf-cal--modern { border: 0; box-shadow: none; padding: 0; }
.bf-cal.bf-cal--modern .bf-cal-head { padding: 0 2px 10px; margin-bottom: 8px; }
.bf-cal.bf-cal--modern .bf-cal-title { font-size: 14px; }
.bf-cal.bf-cal--modern .bf-cal-nav { width: 30px; height: 30px; border-radius: 8px; }
.bf-cal.bf-cal--modern .bf-cal-weekdays { gap: 2px; }
.bf-cal.bf-cal--modern .bf-cal-weekdays > span { font-size: 10px; padding: 4px 0; }
.bf-cal.bf-cal--modern .bf-cal-grid { gap: 2px; }
.bf-cal.bf-cal--modern .bf-cal-day {
  border-radius: 50%;
  min-height: 34px;
  font-size: 13px;
  border-width: 1px;
}
.bf-cal.bf-cal--modern .bf-cal-day.is-picked { box-shadow: 0 4px 10px rgba(0, 103, 184, .30); }
.bf-cal.bf-cal--modern .bf-cal-day.is-today::after { bottom: 3px; width: 3px; height: 3px; }
.bf-cal.bf-cal--modern .bf-cal-slotrow {
  margin: 8px 0 2px;
  padding: 12px 12px;
  border-radius: 10px;
}
.bf-cal.bf-cal--modern .bf-slots { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 5px; }
.bf-cal.bf-cal--modern .bf-slot { padding: 7px 8px; font-size: 12.5px; }

/* Calendar — custom design that spans the full form width with an inline
   slot expansion row appearing right below the week containing the picked
   date, so time selection stays in context. */
.bf-cal {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #ffffff;
  padding: 20px;
  user-select: none;
  box-shadow: 0 2px 8px rgba(20, 45, 70, .04);
}
.bf-cal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 4px 16px;
  border-bottom: 1px solid #eef2f5;
  margin-bottom: 14px;
}
.bf-cal-nav {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.bf-cal-nav:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bf-cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.bf-cal-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
  letter-spacing: -.015em;
}
.bf-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.bf-cal-weekdays > span {
  text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: #94a1ab;
  text-transform: uppercase;
  padding: 6px 0;
}
.bf-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.bf-cal-day {
  aspect-ratio: 1 / 1;
  min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .04s;
  position: relative;
}
.bf-cal-day:hover:not(:disabled) { background: rgba(0, 103, 184, .07); }
.bf-cal-day:active:not(:disabled) { transform: scale(0.95); }
.bf-cal-day.is-outside { color: #d3dae0; cursor: default; pointer-events: none; font-weight: 400; }
.bf-cal-day.is-past { color: #c3cbd2; cursor: not-allowed; opacity: .55; }
.bf-cal-day.is-today::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.bf-cal-day.is-picked {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 103, 184, .25);
}
.bf-cal-day.is-picked::after { background: var(--accent-ink); }
.bf-cal-day.is-picked:hover { background: var(--accent); }

/* Inline slot-row — spans all 7 columns and sits directly below the week
   that contains the selected date. */
.bf-cal-slotrow {
  grid-column: 1 / -1;
  margin: 6px 0 2px;
  padding: 16px 14px;
  background: linear-gradient(180deg, rgba(0, 103, 184, .04), rgba(0, 103, 184, .02));
  border: 1px solid rgba(0, 103, 184, .12);
  border-radius: 12px;
}
.bf-cal-slotrow-title {
  font-size: 11.5px; color: var(--ink-2);
  margin-bottom: 10px;
}
.bf-cal-slotrow-title strong { color: var(--ink); font-weight: 700; }

/* ── Mobile: tighter calendar + smaller slot chips so both fit narrow screens */
@media (max-width: 520px) {
  .bf-cal { padding: 14px; border-radius: 12px; }
  .bf-cal-head { padding: 0 2px 12px; margin-bottom: 10px; }
  .bf-cal-title { font-size: 14px; }
  .bf-cal-nav   { width: 30px; height: 30px; border-radius: 8px; }
  .bf-cal-weekdays > span { font-size: 9.5px; padding: 4px 0; }
  .bf-cal-day { min-height: 34px; font-size: 12.5px; border-radius: 8px; }
  .bf-cal.bf-cal--modern .bf-cal-day { min-height: 30px; font-size: 12px; }
  .bf-cal-slotrow { padding: 12px 10px; margin: 4px 0 2px; }
  .bf-cal-slotrow-title { font-size: 11px; margin-bottom: 8px; }
  .bf-slots { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px; }
  .bf-slot  { padding: 8px 6px; font-size: 12px; }
  /* Wizard chrome scales down too */
  .bf-wiz-page { border-radius: 12px; }
  .bf-wiz-main { padding: 18px 14px; }
  body.tpl-classic .bf-wiz-classic-header { padding: 16px 18px; }
  body.tpl-classic .bf-wiz-classic-header h1 { font-size: 18px; }
  body.tpl-classic .bf-wiz-classic-header p  { font-size: 12px; }
  .bf-wiz-title { font-size: 17px; }
  .bf-wiz-sub   { font-size: 12px; margin-bottom: 12px; }
  .bf-wiz-progress { gap: 4px; margin-bottom: 14px; overflow-x: auto; }
  .bf-wiz-progress-dot em { display: none; }   /* only show numbered dots on narrow */
  .bf-wiz-progress-line { min-width: 12px; }
}

/* Time-slot picker (populated after a date is chosen, rendered inside .bf-cal-slotrow) */
.bf-slot-status { font-size: 12px; color: var(--ink-2); padding: 4px 2px; }
.bf-slot-status.is-error { color: var(--danger); }
.bf-slots { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.bf-slot {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s, transform .04s;
}
.bf-slot:hover { border-color: var(--accent); color: var(--accent); }
.bf-slot:active { transform: scale(0.97); }
.bf-slot.is-picked { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bf-slot.is-picked:hover { color: var(--accent-ink); }

/* Classic + Minimal ALSO use the wizard now — single-column layout with the
   sidebar collapsed away, so the flow feels the same as Modern without the
   two-panel branding chrome. */
body.tpl-classic, body.tpl-minimal {
  background: #f2f5f9;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
body.tpl-minimal { background: #ffffff; }
body.tpl-classic .bf-wiz-page,
body.tpl-minimal .bf-wiz-page {
  grid-template-columns: 1fr;        /* no sidebar */
  max-width: 640px;
  min-height: auto;
}
body.tpl-classic .bf-wiz-side,
body.tpl-minimal .bf-wiz-side { display: none; }
body.tpl-classic .bf-wiz-main { padding: 24px 28px 22px; }
body.tpl-minimal .bf-wiz-main { padding: 22px 4px; }
body.tpl-minimal .bf-wiz-page {
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: block;
}
/* Classic uses a full brand-color header band above the wizard so the
   accent color is unmistakable, then the wizard content below on white.
   Header shows the business name + inline meta (hours / phone / address)
   the way the old classic single-page template did — parity with what
   Modern shows in its sidebar. */
body.tpl-classic .bf-wiz-page {
  border-radius: 14px;
  overflow: hidden;
  display: block;               /* stack header on top of the main stage */
}
body.tpl-classic .bf-wiz-classic-header {
  padding: 22px 28px;
  background-color: var(--accent);
  background-image: linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,.18));
  color: var(--accent-ink);
}
body.tpl-classic .bf-wiz-classic-header h1 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
body.tpl-classic .bf-wiz-classic-header p  { margin: 0; font-size: 13px; opacity: .88; }
body.tpl-classic .bf-wiz-classic-header .bf-header-meta {
  margin-top: 12px;
  color: var(--accent-ink);
  opacity: .95;
}
body.tpl-classic .bf-wiz-classic-header .bf-header-meta svg { color: currentColor; opacity: .85; }
/* Minimal: stripped-down progress dots + text — no card chrome around them. */
body.tpl-minimal .bf-wiz-progress-dot > span { background: #f0f4f8; }
body.tpl-minimal .bf-wiz-progress-line { background: #eef2f5; }

/* ── Classic template polish (legacy — retained for the single-page path,
   kept in case a tenant reverts) ────────────────────────────────
   Adds a bit more visual weight — softer background, deeper card shadow,
   accent-bar section titles, and a polished submit button. */
body.tpl-classic { background: #eef2f6; }
body.tpl-classic .bf-card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(20, 45, 70, .10), 0 2px 8px rgba(20, 45, 70, .04);
}
body.tpl-classic .bf-header { padding: 30px 32px 26px; }
body.tpl-classic .bf-header h1 { font-size: 23px; letter-spacing: -.015em; }
body.tpl-classic .bf-body { padding: 26px 32px 30px; }
body.tpl-classic .bf-section-title {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); font-size: 12px; letter-spacing: .05em;
}
body.tpl-classic .bf-section-title::before {
  content: ""; display: inline-block;
  width: 3px; height: 12px;
  background: var(--accent); border-radius: 2px;
}
body.tpl-classic .bf-service {
  padding: 14px 16px;
  transition: border-color .12s, background .12s, box-shadow .12s, transform .05s;
}
body.tpl-classic .bf-service:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(20,45,70,.06); }
body.tpl-classic .bf-service.is-picked { box-shadow: 0 4px 12px rgba(0, 103, 184, .18); }
body.tpl-classic .bf-service-name { font-size: 14px; }
body.tpl-classic .bf-submit {
  padding: 12px 26px;
  font-size: 14px;
  box-shadow: 0 6px 14px rgba(0, 103, 184, .22);
}
body.tpl-classic .bf-submit:hover:not(:disabled) { transform: translateY(-1px); }

/* ── Minimal template — genuinely minimal, no card chrome ───────
   Removes borders/shadows so the form reads as clean typography on white.
   Compact spacing, ink-black CTA, no gradient anywhere. */
body.tpl-minimal { background: #ffffff; }
body.tpl-minimal .bf-card {
  border: 0; box-shadow: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
body.tpl-minimal .bf-header {
  background: none;
  color: var(--ink);
  padding: 12px 0 20px;
  border-bottom: 1px solid #eef2f5;
}
body.tpl-minimal .bf-header h1 { font-size: 28px; letter-spacing: -.02em; font-weight: 700; }
body.tpl-minimal .bf-header p { color: var(--ink-2); font-size: 14px; opacity: 1; }
body.tpl-minimal .bf-header-meta { color: var(--ink-2); opacity: 1; margin-top: 12px; }
body.tpl-minimal .bf-header-meta svg { opacity: .7; }
body.tpl-minimal .bf-body { padding: 24px 0 8px; }
body.tpl-minimal .bf-welcome { color: var(--ink); font-size: 14px; }
body.tpl-minimal .bf-section-title {
  color: var(--ink); font-size: 12.5px;
  text-transform: none; letter-spacing: normal;
  font-weight: 700; margin: 26px 0 10px;
}
body.tpl-minimal .bf-service {
  border-width: 1px;
  border-radius: 6px;
  padding: 12px 14px;
}
body.tpl-minimal .bf-service.is-picked { background: transparent; }
body.tpl-minimal .bf-service.is-picked .bf-service-name { color: var(--accent); }
body.tpl-minimal .bf-field input, body.tpl-minimal .bf-field select, body.tpl-minimal .bf-field textarea {
  border-radius: 6px;
}
body.tpl-minimal .bf-cal { border-radius: 8px; padding: 16px; box-shadow: none; }
body.tpl-minimal .bf-submit {
  background: var(--ink); border-radius: 6px;
  padding: 12px 24px; box-shadow: none;
}
body.tpl-minimal .bf-submit:hover:not(:disabled) { background: #000; filter: none; }
body.tpl-minimal .bf-footer { color: #b8c1c9; margin-top: 12px; }