/* booking-widget.css — self-hosted booking picker. Uses the site design tokens
   (variables.css). Box height is reserved so swapping states causes no CLS. */

.wb-booking {
  min-height: 540px;            /* reserve space -> no layout shift while loading */
  display: block;
}
.wb-booking[hidden] { display: none; }

.wb-card {
  background: var(--white, #fff);
  border: 1px solid var(--bg-3, #EDE5D9);
  border-radius: var(--rad, 20px);
  padding: var(--space-6, 24px);
  box-shadow: 0 18px 50px -28px rgba(27, 27, 47, 0.35);
  color: var(--ink, #1B1B2F);
  font-family: var(--sans, system-ui, sans-serif);
  text-align: left;
}

/* --- loading --- */
.wb-load {
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
  color: var(--ink-3, #6E6E85);
  font-size: var(--text-sm, 0.875rem);
}
.wb-spin {
  width: 30px; height: 30px;
  border: 3px solid var(--bg-3, #EDE5D9);
  border-top-color: var(--accent, #C45D3E);
  border-radius: 50%;
  animation: wb-spin 0.8s linear infinite;
}
@keyframes wb-spin { to { transform: rotate(360deg); } }

/* --- headings --- */
.wb-h {
  font-family: var(--serif, Georgia, serif);
  font-size: var(--text-2xl, 1.5rem);
  line-height: 1.15;
  margin: 0 0 var(--space-1, 4px);
  color: var(--ink, #1B1B2F);
}
.wb-sub { margin: 0 0 var(--space-4, 16px); color: var(--ink-3, #6E6E85); font-size: var(--text-sm, 0.875rem); }
.wb-when {
  margin: 0 0 var(--space-4, 16px);
  font-weight: 600;
  color: var(--accent-2, #A84B30);
  font-size: var(--text-lg, 1.125rem);
}

/* --- day tabs --- */
/* A wrapping grid, never a sideways scroller. Every open day is visible at once, because a strip
   that scrolls off the right edge hides most of the availability from the person choosing. */
.wb-days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-5, 20px);
}
.wb-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-3, 12px) var(--space-3, 12px);
  border: 1px solid var(--bg-3, #EDE5D9);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--duration-fast, 150ms), background var(--duration-fast, 150ms), transform var(--duration-fast, 150ms);
}
.wb-day:hover { border-color: var(--accent, #C45D3E); transform: translateY(-1px); }
.wb-day-top  { font-weight: 700; font-size: var(--text-sm, 0.875rem); color: var(--ink, #1B1B2F); }
.wb-day-date { font-size: var(--text-xs, 0.75rem); color: var(--ink-3, #6E6E85); }
.wb-day-n    { font-size: var(--text-xs, 0.75rem); color: var(--ink-3, #6E6E85); margin-top: 2px; }
.wb-day[aria-pressed="true"] {
  background: var(--accent, #C45D3E);
  border-color: var(--accent, #C45D3E);
}
.wb-day[aria-pressed="true"] .wb-day-top,
.wb-day[aria-pressed="true"] .wb-day-date,
.wb-day[aria-pressed="true"] .wb-day-n { color: #fff; }

/* A word from the person they are about to meet. */
.wb-note {
  background: var(--bg-2, #F5EFE6);
  border-radius: 12px;
  padding: var(--space-4, 16px);
  margin-bottom: var(--space-5, 20px);
}
.wb-note-t {
  margin: 0 0 6px; font-size: var(--text-xs, 0.75rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-2, #A84B30);
}
.wb-note-b { margin: 0; font-size: var(--text-sm, 0.875rem); line-height: 1.6; color: var(--ink-2, #2E2E45); }

/* Times, grouped by part of the day. */
.wb-part {
  margin: var(--space-4, 16px) 0 var(--space-2, 8px);
  font-size: var(--text-xs, 0.75rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3, #6E6E85);
}
.wb-part:first-child { margin-top: 0; }
.wb-part-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2, 8px); }
.wb-tz { margin: var(--space-4, 16px) 0 0; font-size: var(--text-xs, 0.75rem); color: var(--ink-3, #6E6E85); text-align: center; }

/* A plain container now: the grid lives on .wb-part-slots inside each Morning/Afternoon group. */
.wb-slots {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}
.wb-slot {
  padding: var(--space-3, 12px) var(--space-2, 8px);
  border: 1px solid var(--bg-3, #EDE5D9);
  border-radius: 12px;
  background: var(--white, #fff);
  color: var(--ink, #1B1B2F);
  font: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, transform var(--duration-fast, 150ms) ease;
}
.wb-slot:hover {
  border-color: var(--accent, #C45D3E);
  background: var(--accent-bg, #FDF0EB);
  transform: translateY(-1px);
}

/* --- details form --- */
.wb-back {
  border: 0; background: none; padding: 0;
  color: var(--ink-3, #6E6E85);
  font: inherit; font-size: var(--text-sm, 0.875rem);
  cursor: pointer; margin-bottom: var(--space-3, 12px);
}
.wb-back:hover { color: var(--accent, #C45D3E); }
.wb-form { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.wb-field { display: flex; flex-direction: column; gap: var(--space-1, 4px); }
.wb-field > span { font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--ink-2, #2E2E45); }
.wb-field input, .wb-field select {
  padding: var(--space-3, 12px);
  border: 1px solid var(--bg-3, #EDE5D9);
  border-radius: 12px;
  background: var(--bg, #FAF6F0);
  color: var(--ink, #1B1B2F);
  font: inherit;
  font-size: var(--text-base, 1rem);   /* >=16px avoids iOS input zoom */
}
.wb-field input:focus, .wb-field select:focus {
  outline: 2px solid var(--accent, #C45D3E);
  outline-offset: 1px;
  border-color: var(--accent, #C45D3E);
}
/* phone: country picker (flag + dial code) in front of the number (2026-09-13) */
/* A grid with an explicit zero minimum: under flex, Chromium still counts the input's intrinsic
   width toward the row's minimum, which pushed the hero card 38px past a 375px phone (2026-09-13). */
.wb-phone-row { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: var(--space-2, 8px); min-width: 0; }
.wb-phone-row .wb-cc { width: 100%; padding-left: var(--space-2, 8px); padding-right: var(--space-2, 8px); }
.wb-phone-row input { width: 100%; min-width: 0; }
.wb-msg .wb-fix { font: inherit; font-weight: 600; color: var(--accent, #C45D3E); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
/* honeypot — off-screen, not display:none (some bots skip hidden fields) */
.wb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wb-submit, .wb-meet {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: var(--space-4, 16px) var(--space-6, 24px);
  border: 0; border-radius: 999px;
  background: var(--accent, #C45D3E);
  color: #fff;
  font: inherit; font-weight: 700; font-size: var(--text-base, 1rem);
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease, transform var(--duration-fast, 150ms) ease;
}
.wb-submit:hover, .wb-meet:hover { background: var(--accent-2, #A84B30); }
.wb-submit:disabled { opacity: 0.7; cursor: progress; }
.wb-meet { margin-top: var(--space-4, 16px); }

.wb-msg { margin: var(--space-2, 8px) 0 0; min-height: 1.2em; color: var(--accent-2, #A84B30); font-size: var(--text-sm, 0.875rem); }
.wb-fine { margin: var(--space-1, 4px) 0 0; color: var(--ink-3, #6E6E85); font-size: var(--text-xs, 0.75rem); }
.wb-fine a { color: inherit; text-decoration: underline; }
/* The #book section is .sec-dark, whose "p { color: rgba(255,255,255,.6) }" out-ranks these classes and
   painted the card's heading, subline, error line and consent line white on the white card. */
.sec-dark .book-lead .wb-h { color: var(--ink, #1B1B2F); }
.sec-dark .book-lead .wb-sub, .sec-dark .book-lead .wb-fine, .sec-dark .book-lead .wb-steps { color: var(--ink-3, #6E6E85); }
.sec-dark .book-lead .wb-msg { color: var(--accent-2, #A84B30); }

/* --- confirmed --- */
.wb-done { text-align: center; padding: var(--space-8, 32px) var(--space-2, 8px); }
.wb-check {
  width: 56px; height: 56px; margin: 0 auto var(--space-4, 16px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--green-bg, #E8F5EE);
  color: var(--green, #2D7A5F);
  font-size: 28px; font-weight: 700;
}
.wb-done .wb-h { text-align: center; }
.wb-done .wb-h:focus { outline: none; }

/* --- lead form (funnel step 1): inline in the hero + #book, and inside the modal --- */
.wb-lead-form { display: flex; flex-direction: column; gap: var(--space-3, 12px); text-align: left; }
.wb-lead-form .wb-submit { width: 100%; }
.hero-cal-card .wb-lead-form { margin-top: 6px; }
.book-lead { max-width: 520px; margin: 0 auto; padding: 22px 16px 18px; text-align: left; }
.book-lead .wb-h { text-align: center; }
.book-lead .wb-sub { text-align: center; }
.wb-lead-slot { margin-top: var(--space-2, 8px); }

/* --- the four steps (2026-09-17) --- */
.wb-step { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.wb-step[hidden] { display: none; }
.wb-legend { padding: 0; margin: 0 0 2px; font-family: var(--serif, Georgia, serif); font-size: var(--text-xl, 1.25rem); color: var(--ink, #1B1B2F); }
.wb-steps { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-2, 8px); font-size: var(--text-xs, 0.75rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #6E6E85); }
.wb-step-bar { flex: 1 1 auto; height: 6px; border-radius: 6px; background: var(--bg-3, #EDE5D9); overflow: hidden; }
.wb-step-bar i { display: block; height: 100%; background: var(--accent, #C45D3E); border-radius: 6px; transition: width .3s ease; }
.wb-req { color: var(--accent, #C45D3E); font-weight: 800; }
.wb-field > span small { font-weight: 400; color: var(--ink-3, #6E6E85); }
.wb-two { display: grid; grid-template-columns: 1fr; gap: var(--space-3, 12px); }
@media (min-width: 480px) { .wb-two { grid-template-columns: 1fr 1fr; } }
.wb-nav { display: flex; gap: 10px; align-items: center; margin-top: var(--space-1, 4px); }
.wb-nav .wb-next, .wb-nav .wb-submit { flex: 1 1 auto; width: auto; }
.wb-next { width: 100%; }
.wb-back-btn { flex: 0 0 auto; background: none; border: 1px solid var(--bg-3, #EDE5D9); border-radius: 100px; padding: 12px 16px; font: inherit; font-weight: 600; color: var(--ink-2, #2E2E45); cursor: pointer; }
.wb-back-btn:hover { border-color: var(--ink-3, #6E6E85); }
.wb-back-btn:focus-visible { outline: 2px solid var(--accent, #C45D3E); outline-offset: 2px; }

/* --- the three tap picks on the last step (2026-11-03): radio groups that look like the time pills --- */
.wb-pick { border: 0; padding: 0; margin: 0 0 var(--space-3, 12px); min-width: 0; }
.wb-pick legend { padding: 0; margin: 0 0 var(--space-2, 8px); font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--ink-2, #2E2E45); }
.wb-pills { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.wb-pill-in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.wb-pill {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px var(--space-4, 16px);
  border: 1px solid var(--bg-3, #EDE5D9); border-radius: 100px;
  background: var(--white, #fff); color: var(--ink, #1B1B2F);
  font-size: var(--text-sm, 0.875rem); font-weight: 600; line-height: 1.2;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease;
}
.wb-pill:hover { border-color: var(--accent, #C45D3E); background: var(--accent-bg, #FDF0EB); }
.wb-pill-in:checked + .wb-pill { border-color: var(--accent, #C45D3E); background: var(--accent, #C45D3E); color: #fff; }
.wb-pill-in:focus-visible + .wb-pill { outline: 2px solid var(--accent, #C45D3E); outline-offset: 2px; }
.wb-pick + .wb-pick { margin-top: var(--space-4, 16px); }
.wb-form .wb-submit { margin-top: var(--space-2, 8px); }

/* --- trouble state (no Calendly fallback any more: retry + a human) --- */
.wb-trouble { text-align: center; padding: var(--space-6, 24px) var(--space-2, 8px); }
.wb-trouble .wb-h { text-align: center; font-size: var(--text-xl, 1.25rem); }
.wb-trouble .wb-sub a, .wb-msg a { color: var(--accent-2, #A84B30); font-weight: 700; }
.wb-retry { margin-top: var(--space-2, 8px); }

/* --- modal --- */
.wbm { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.wbm[hidden] { display: none; }
.wbm-backdrop { position: absolute; inset: 0; background: rgba(27, 27, 47, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.wbm-dialog {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--white, #fff); color: var(--ink, #1B1B2F); border-radius: var(--rad, 20px);
  padding: 30px 24px 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
  font-family: var(--sans, system-ui, sans-serif); text-align: left;
  animation: wbm-in 0.32s var(--easing-default, ease-out);
}
@keyframes wbm-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.wbm-dialog .wb-h { padding-right: 36px; }
.wbm-close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: var(--bg-2, #F5EFE6); color: var(--ink-2, #2E2E45);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.wbm-close:hover { background: var(--bg-3, #EDE5D9); }
.wbm-close:focus-visible { outline: 2px solid var(--accent, #C45D3E); outline-offset: 2px; }
.wb-privacy { text-align: center; margin-top: var(--space-3, 12px); }
html.wbm-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .wb-spin { animation: none; }
  .wb-slot:hover { transform: none; }
  .wbm-dialog { animation: none; }
}