/* =========================================================================
   calwidget.css — native booking modal. No iframe, no Cal.com CSS.

   Theme via --cw-* on .calwidget / .bk-modal (defaults from config.example.json).
   Inner selectors stay .bk-*. Scroll lock: body.cw-open.
   ========================================================================= */

.calwidget,
.bk-modal {
  --cw-accent: #00e5a8;
  --cw-background: #0a1120;
  --cw-surface: #0d1526;
  --cw-text: #f2f5f3;
  --cw-muted: #9aa5a0;
  --cw-radius: 16px;

  --text: var(--cw-text);
  --text-muted: var(--cw-muted);
  --bg-deep: var(--cw-background);
  --stroke: color-mix(in srgb, var(--cw-text) 12%, transparent);
  --stroke-strong: color-mix(in srgb, var(--cw-text) 20%, transparent);
  --vos-blue: var(--cw-accent);

  /* Vaulted tokens.css values — kit hosts may not load that file */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-h3: clamp(1.125rem, 1.39vw, 1.25rem);
  --fs-h4: var(--fs-h3); /* booking.css uses --fs-h4; tokens.css does not define it */

  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: var(--cw-radius);
  --r-xl: var(--cw-radius);
  --r-pill: 9999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 240ms;
}

body.cw-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.calwidget .sr-only,
.bk-modal .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bk-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}
.bk-modal[hidden] { display: none; }

.bk-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 12, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.bk-modal.is-in .bk-modal__scrim { opacity: 1; }

/* Sized for OUR flow, not for Cal.com's iframe. The old window was 980px wide
   because Cal.com collapsed its two-pane layout below ~870px; we render one
   column, so it only has to hold a seven-day strip and a slot grid.

   Height is capped, not fixed: the steps are genuinely different heights (a
   slot grid vs a three-field form vs a confirmation) and pinning it would
   leave the confirmation floating in 400px of nothing. The SLOT AREA carries
   its own min-height instead, which is what stops the window resizing while
   times load — the no-layout-shift requirement, solved where it belongs. */
.bk-modal__window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(92dvh, 780px);
  background: linear-gradient(180deg, var(--cw-surface) 0%, var(--bg-deep) 60%);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px color-mix(in srgb, var(--vos-blue) 10%, transparent);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bk-modal.is-in .bk-modal__window { opacity: 1; transform: none; }
.bk-modal__window:focus { outline: none; }

/* ---- The bar ---------------------------------------------------------- */
.bk-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex: 0 0 auto;
  padding: 14px 14px 14px 20px;
  border-bottom: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--cw-surface) 60%, transparent);
}
.bk-modal__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  letter-spacing: .01em;
}
.bk-modal__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cw-surface) 80%, transparent);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bk-modal__close svg { width: 18px; height: 18px; }
.bk-modal__close:hover { color: var(--text); border-color: var(--stroke-strong); }
.bk-modal__close:focus-visible { outline: 2px solid var(--vos-blue); outline-offset: 2px; }

/* ---- The stage --------------------------------------------------------
   min-height:0 so the flex child can actually shrink and scroll internally
   rather than forcing the window past its cap. */
.bk-modal__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-5);
}

.bk-step { display: flex; flex-direction: column; gap: var(--sp-4); }
.bk-step[hidden] { display: none; }

/* ---- Zone line (EW) ----------------------------------------------------
   Times are always the visitor's own zone; this says which. Not a control. */
.bk-tzline {
  margin: -6px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-muted);
}

/* ---- Week nav --------------------------------------------------------- */
.bk-week { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.bk-week__label { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.bk-week__nav {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cw-surface) 80%, transparent);
  color: var(--text-muted);
  cursor: pointer;
}
.bk-week__nav svg { width: 16px; height: 16px; }
.bk-week__nav:hover:not(:disabled) { color: var(--text); border-color: var(--stroke-strong); }
.bk-week__nav:disabled { opacity: .35; cursor: default; }
.bk-week__nav:focus-visible { outline: 2px solid var(--vos-blue); outline-offset: 2px; }

/* ---- Day strip -------------------------------------------------------- */
.bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* 44px tall minimum: a date cell is a touch target before it is a label. */
  min-height: 52px;
  padding: 6px 2px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cw-surface) 60%, transparent);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bk-day__dow { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.bk-day__n { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.bk-day:hover:not(:disabled) { border-color: var(--stroke-strong); }
.bk-day:focus-visible { outline: 2px solid var(--vos-blue); outline-offset: 2px; }
/* Shut days stay VISIBLE and disabled rather than hidden — a week with holes
   in it tells the reader the calendar is real; a week with days missing looks
   broken. Contrast is held above the 3:1 non-text floor. */
.bk-day.is-shut { opacity: .32; cursor: default; }
.bk-day.is-on {
  border-color: var(--vos-blue);
  background: color-mix(in srgb, var(--vos-blue) 16%, transparent);
}

/* Optional mobile calendar presentation. The host opts in with
   CALWIDGET.mobileCalendarView; desktop keeps the compact week strip. */
.bk-days.is-calendar { row-gap: 5px; }
.bk-calendar__dow {
  padding: 0 0 3px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: var(--fw-medium);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.bk-days.is-calendar .bk-day {
  justify-content: center;
  min-height: 40px;
  aspect-ratio: 1;
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
}
.bk-days.is-calendar .bk-day__dow { display: none; }
.bk-days.is-calendar .bk-day__n { font-size: 13px; }
.bk-days.is-calendar .bk-day:not(.is-shut):hover {
  border-color: var(--stroke-strong);
  background: color-mix(in srgb, var(--cw-surface) 70%, transparent);
}
.bk-days.is-calendar .bk-day.is-on {
  border-color: color-mix(in srgb, var(--vos-blue) 75%, white 25%);
  background: var(--vos-blue);
  color: #04110d;
  box-shadow: 0 0 18px color-mix(in srgb, var(--vos-blue) 35%, transparent);
}

/* ---- Slots -------------------------------------------------------------
   THE ANTI-LAYOUT-SHIFT RULE. The wrapper reserves the height of a full slot
   grid before anything loads, so the skeleton, the times and the empty state
   all occupy the same box and the window never resizes under the reader. */
.bk-slotwrap { position: relative; min-height: 188px; }

.bk-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  align-content: start;
}
.bk-slot {
  min-height: 44px;
  padding: .55em .4em;
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cw-surface) 70%, transparent);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bk-slot:hover { border-color: var(--vos-blue); background: color-mix(in srgb, var(--vos-blue) 14%, transparent); }
.bk-slot:focus-visible { outline: 2px solid var(--vos-blue); outline-offset: 2px; }

/* Skeleton, not a spinner on blank: the shape of what is coming. */
.bk-skeleton { display: grid; }
.bk-slotskel {
  position: absolute;
  inset: 0;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  align-content: start;
  overflow: hidden;
}
.bk-slotskel[hidden] { display: none; }
.bk-sk__slot { height: 44px; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); }
.bk-slotskel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .05) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: bk-shimmer 1.6s linear infinite;
  pointer-events: none;
}
@keyframes bk-shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* ---- Empty ------------------------------------------------------------- */
.bk-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
}
.bk-empty[hidden] { display: none; }
.bk-empty__t { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- Form -------------------------------------------------------------- */
.bk-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.bk-back svg { width: 14px; height: 14px; }
.bk-back:hover { color: var(--text); }
.bk-back:focus-visible { outline: 2px solid var(--vos-blue); outline-offset: 2px; }

.bk-chosen {
  margin: 0;
  padding: .7em .8em;
  border: 1px solid color-mix(in srgb, var(--vos-blue) 28%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--vos-blue) 10%, transparent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.bk-req { color: var(--vos-blue); }
.bk-optional { font-weight: var(--fw-regular); opacity: .75; }
.bk-input,
.bk-textarea {
  width: 100%;
  padding: .65em .75em;
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cw-surface) 80%, transparent);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}
.bk-textarea { min-height: 76px; resize: vertical; }
.bk-input:focus-visible,
.bk-textarea:focus-visible { outline: 2px solid var(--vos-blue); outline-offset: 1px; }
.bk-input[aria-invalid="true"] { border-color: #FF5A66; }

.bk-error, .bk-formerr {
  margin: 0;
  font-size: var(--fs-xs);
  color: #FF5A66;   /* 6.2:1 on this panel — measured */
}
.bk-error:empty, .bk-formerr:empty { display: none; }

/* The honeypot. Off-screen, not display:none — a bot reading computed styles
   skips hidden fields, and this one has to look fillable. */
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Buttons — the site's own, not a new style ------------------------- */
.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .7em 1.2em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bk-btn--primary { background: var(--vos-blue); color: #04101f; }
.bk-btn--primary:hover { opacity: .9; }
.bk-btn--primary:disabled { opacity: .55; cursor: default; }
.bk-btn--ghost { background: transparent; border-color: var(--stroke); color: var(--text); }
.bk-btn--ghost:hover { border-color: var(--stroke-strong); }
.bk-btn:focus-visible { outline: 2px solid var(--vos-blue); outline-offset: 2px; }

/* ---- Done / dead ------------------------------------------------------- */
.bk-done, .bk-dead { align-items: center; text-align: center; padding: var(--sp-5) 0; }

.bk-done { position: relative; overflow: hidden; }
.bk-done > * { position: relative; z-index: 1; }
.bk-done__mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-pill);
  background: rgba(52, 199, 123, .16);
  color: #34C77B;
}
.bk-done__mark svg { width: 26px; height: 26px; }
.bk-done__t { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text); }
.bk-done__when {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bk-done__sub, .bk-dead__t { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- Fallback --------------------------------------------------------- */
.bk-modal__fallback {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 20px;
  border-top: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--cw-surface) 60%, transparent);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}
.bk-modal__fallback a { color: var(--text); text-decoration: underline; }
.bk-modal__fallback a:focus-visible { outline: 2px solid var(--vos-blue); outline-offset: 2px; }

/* ---- Phone ------------------------------------------------------------
   Near-fullscreen. Most demo bookings happen on a phone, so this is the
   layout that matters, not the desktop one. */
@media (max-width: 639px) {
  /* A SHEET THAT HUGS ITS CONTENT, not a forced full screen. The flow is
     short — timezone, seven days, a slot grid — and pinning the window to
     100dvh left ~500px of empty panel under it on a tall phone, which reads as
     a broken page rather than a compact booker. Auto height with a cap keeps
     it a sheet, and the form step simply grows into the room it needs. */
  .bk-modal { padding: var(--sp-3); }
  .bk-modal__window {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-lg);
  }
  .bk-modal__bar { padding: 10px 10px 10px 16px; }
  .bk-modal__stage { padding: var(--sp-4); }
  .bk-modal__fallback { padding: 8px 16px; }
  .bk-days { gap: 4px; }
  .bk-day { min-height: 48px; }
  .bk-slots, .bk-slotskel { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .calwidget, .bk-modal { --dur: 1ms; }
  .bk-modal__scrim,
  .bk-modal__window { transition: none; }
  .bk-modal__window { transform: none; }
  .bk-slotskel::after { animation: none; }
}

/* =========================================================================
   INLINE mode (EW install) — CalWidget.mount(el) renders the steps straight
   into a host panel: no window, no scrim, no bar. The host panel supplies
   the surface (EW: .bookcall-calendar__frame), so the widget is transparent.
   ========================================================================= */
.calwidget button,
.calwidget select,
.calwidget input,
.calwidget textarea { font-family: inherit; }

.cw-inline {
  position: relative;
  padding: var(--sp-5);
  color: var(--text);
  text-align: left;
}
.cw-inline .bk-fields { display: flex; flex-direction: column; gap: var(--sp-4); }
.cw-inline .bk-fields[hidden] { display: none; }

/* 44px targets for everything the visitor taps. */
.cw-inline .bk-week__nav { width: 44px; height: 44px; }
.cw-inline .bk-week__nav svg { width: 18px; height: 18px; }
.cw-inline .bk-back { min-height: 44px; font-size: var(--fs-sm); }
.cw-inline .bk-day { min-height: 56px; }
.cw-inline .bk-day__dow { font-size: 11px; }
.cw-inline .bk-day__n { font-size: 16px; }
.cw-inline .bk-slot { min-height: 44px; font-size: 15px; }
.cw-inline .bk-btn { min-height: 48px; font-size: 15px; }
.cw-inline .bk-step > .bk-btn--primary { width: 100%; }
.cw-inline .bk-chosen { font-size: 15px; line-height: 1.45; }
.cw-inline .bk-done { padding: var(--sp-4) 0; gap: var(--sp-3); }
.cw-inline .bk-done__t:focus { outline: none; }
.cw-inline .bk-done__t:focus-visible { outline: 2px solid var(--vos-blue); outline-offset: 4px; border-radius: 4px; }

/* Phones: a tighter panel so the seven-day strip keeps its width. */
@media (max-width: 768px) {
  .cw-inline { padding: var(--sp-4) 12px; }
  .cw-inline .bk-days { gap: 4px; }
  .cw-inline .bk-days.is-calendar { gap: 4px 5px; }
  .cw-inline .bk-days.is-calendar .bk-day { min-height: 39px; }
  .cw-inline .bk-slots,
  .cw-inline .bk-slotskel { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
.cw-inline .bk-done__mark {
  background: color-mix(in srgb, var(--vos-blue) 16%, transparent);
  color: var(--vos-blue);
}

/* [hidden] must win over the widget's own display rules: .bk-btn is
   inline-flex, which out-ranks the browser's [hidden] { display: none } and
   left "Email us to find a time" / "Show the next opening" on screen when
   hidden. The explicit button rule, then a catch-all for anything else in
   the widget that sets a display and is toggled with `hidden`. */
.calwidget .bk-btn[hidden] { display: none; }
.calwidget [hidden] { display: none; }