/* ══════════════════════════════════════════════════════════════════════════
   booking.css — styling for the native booking widget (js/booking.js).

   A SHARED COMPONENT, like nav.css and footer.css: one stylesheet, mounted
   wherever the widget is. /book/ uses it today; /contact/ and a future
   <dialog> modal will link the same file rather than restyling anything.

   Everything is namespaced under .ab and driven by custom properties declared
   on .ab itself, so the widget carries its own palette instead of inheriting
   whatever the host section happens to be. The dark values are the default
   (the Ant Assist site is dark by default); .ab--light flips the same tokens
   for a light host section such as #form-section on /contact/.

   Tokens, radii, focus rings and field metrics are lifted from the existing
   page CSS (.field-input / .form-submit on /contact/) on purpose — this is
   the site's form design, not a second one.
   ══════════════════════════════════════════════════════════════════════════ */

/* The card and the mount point are usually the SAME element, but the tokens are
   declared on both so a host page can wrap the widget in its own .ab-card
   without the palette silently resolving to nothing. */
.ab, .ab-card {
  --ab-accent:      #ff4c98;
  --ab-accent-deep: #C2185B;
  --ab-fg:          #fff;
  --ab-muted:       rgba(255,255,255,.62);
  --ab-card:        rgba(255,255,255,.025);
  --ab-card-solid:  #0F1119;
  --ab-border:      rgba(255,255,255,.10);
  --ab-border-soft: rgba(255,255,255,.07);
  --ab-input-bg:    rgba(255,255,255,.04);
  --ab-chip-bg:     rgba(255,255,255,.035);
  --ab-chip-hover:  rgba(255,255,255,.08);
  --ab-danger:      #F87171;
  --ab-danger-bg:   rgba(239,68,68,.07);
  --ab-danger-bd:   rgba(239,68,68,.22);

  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ab-fg);
  -webkit-font-smoothing: antialiased;
}

.ab--light {
  --ab-fg:          #000;
  --ab-muted:       rgba(0,0,0,.62);
  --ab-card:        #fff;
  --ab-card-solid:  #fff;
  --ab-border:      rgba(0,0,0,.16);
  --ab-border-soft: rgba(0,0,0,.09);
  --ab-input-bg:    #fff;
  --ab-chip-bg:     #fff;
  --ab-chip-hover:  #FBF2F6;
  --ab-danger:      #B91C1C;
  --ab-danger-bg:   rgba(220,38,38,.06);
  --ab-danger-bd:   rgba(220,38,38,.28);
}

.ab *, .ab *::before, .ab *::after { box-sizing: border-box; }

/* ── shell ─────────────────────────────────────────────────────────────── */
.ab-card {
  background: var(--ab-card);
  border: 1px solid var(--ab-border-soft);
  border-radius: 28px;
  padding: 38px 40px;
}
/* Both forms: card-is-the-mount (/book/) and card-wraps-the-mount. */
.ab-card.ab--light, .ab--light .ab-card { box-shadow: 0 4px 28px rgba(0,0,0,.06); }

/* Until the renderer fills it there is nothing to frame — and with JavaScript
   off there never will be, so an empty card must not sit above the noscript
   fallback. */
.ab-card:empty { display: none; }

.ab-hidden { display: none !important; }

/* Visually hidden but readable by assistive tech (the real radio inputs and
   the status region live here). Never display:none — that would take them
   out of the accessibility tree and off the keyboard path. */
.ab-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* honeypot */
.ab-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ── steps ─────────────────────────────────────────────────────────────── */
.ab-step { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.ab-step:last-of-type { margin-bottom: 0; }

.ab-legend {
  display: flex; align-items: center; gap: 11px;
  padding: 0; margin-bottom: 15px;
  font-size: .95rem; font-weight: 800; letter-spacing: -.01em; color: var(--ab-fg);
}
.ab-num {
  flex-shrink: 0;
  width: 25px; height: 25px; border-radius: 50%;
  background: rgba(255,76,152,.12); border: 1px solid rgba(255,76,152,.32);
  color: var(--ab-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
}
.ab--light .ab-num { background: rgba(194,24,91,.08); border-color: rgba(194,24,91,.25); color: var(--ab-accent-deep); }

.ab-hint { font-size: .82rem; color: var(--ab-muted); line-height: 1.6; margin: -6px 0 14px; }

/* ── date + time chips ─────────────────────────────────────────────────── */
/* Dates WRAP rather than scroll sideways. A horizontal strip hides most of the
   three-week window behind a gesture nobody is prompted to make — and on
   desktop, where overlay scrollbars are invisible until you scroll, the later
   dates simply look absent. Same grid as the times, for the same reason. */
.ab-dates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.ab-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}

.ab-opt { position: relative; display: block; }
.ab-opt input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0; top: 0; left: 0;
  cursor: pointer;
}
.ab-opt-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: 1.5px solid var(--ab-border);
  background: var(--ab-chip-bg);
  border-radius: 14px;
  padding: 12px 14px;
  /* 44px comfortably clears the 44×44 tap-target minimum on touch */
  min-height: 56px;
  text-align: center;
  transition: border-color .16s, background .16s, transform .16s;
  cursor: pointer;
}
.ab-opt input:hover + .ab-opt-face { background: var(--ab-chip-hover); border-color: rgba(255,76,152,.4); }
.ab-opt input:checked + .ab-opt-face {
  border-color: var(--ab-accent);
  background: rgba(255,76,152,.12);
  box-shadow: 0 0 0 1px var(--ab-accent) inset;
}
.ab--light .ab-opt input:checked + .ab-opt-face { background: rgba(194,24,91,.07); border-color: var(--ab-accent-deep); box-shadow: 0 0 0 1px var(--ab-accent-deep) inset; }
.ab-opt input:focus-visible + .ab-opt-face { outline: 2px solid var(--ab-accent); outline-offset: 3px; }


.ab-day  { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ab-muted); }
.ab-date { font-size: .96rem; font-weight: 700; letter-spacing: -.01em; }
.ab-time { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ab-time-alt { font-size: .68rem; color: var(--ab-muted); font-variant-numeric: tabular-nums; }
.ab-opt input:checked + .ab-opt-face .ab-day,
.ab-opt input:checked + .ab-opt-face .ab-time-alt { color: var(--ab-fg); }

/* ── chosen-slot summary ───────────────────────────────────────────────── */
.ab-chosen {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  background: rgba(255,76,152,.07);
  border: 1px solid rgba(255,76,152,.24);
  border-radius: 16px;
  padding: 15px 18px;
  margin-bottom: 24px;
}
.ab--light .ab-chosen { background: rgba(194,24,91,.05); border-color: rgba(194,24,91,.22); }
.ab-chosen-when { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; }
.ab-chosen-meta { font-size: .78rem; color: var(--ab-muted); margin-top: 3px; }
.ab-change {
  background: none; border: 0; padding: 4px 2px;
  color: var(--ab-accent); font: inherit; font-size: .82rem; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.ab--light .ab-change { color: var(--ab-accent-deep); }
.ab-change:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 3px; border-radius: 6px; }

/* ── fields ────────────────────────────────────────────────────────────── */
.ab-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ab-field { margin-bottom: 20px; }
.ab-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 7px; color: var(--ab-fg); }
.ab-opt-tag { font-weight: 400; color: var(--ab-muted); font-size: .75rem; margin-left: 4px; }
.ab-input {
  width: 100%; padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--ab-border);
  background: var(--ab-input-bg);
  color: var(--ab-fg);
  font-family: 'Inter', system-ui, sans-serif;
  /* 16px prevents iOS Safari zooming the viewport on focus */
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance: none;
}
.ab-input::placeholder { color: var(--ab-muted); }
.ab-input:focus { border-color: var(--ab-accent); background: rgba(255,76,152,.04); }
.ab--light .ab-input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(194,24,91,.12); }
.ab-input[aria-invalid="true"] { border-color: var(--ab-danger); }
.ab-input:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 1px; }
textarea.ab-input { resize: vertical; min-height: 104px; line-height: 1.6; }

.ab-err { font-size: .78rem; color: var(--ab-danger); margin-top: 5px; }
.ab-err:empty { display: none; }

/* ── submit + notices ──────────────────────────────────────────────────── */
.ab-submit {
  width: 100%; padding: 15px 28px;
  border: 0; border-radius: 12px;
  background: var(--ab-accent-deep); color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .975rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, opacity .18s;
}
.ab-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(255,76,152,.38); }
.ab-submit:active:not(:disabled) { transform: translateY(0); }
.ab-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ab-submit:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 3px; }

.ab-smallprint { font-size: .74rem; color: var(--ab-muted); line-height: 1.65; margin-top: 14px; text-align: center; }
.ab-smallprint a { color: inherit; }

.ab-notice {
  border-radius: 12px;
  padding: 14px 18px;
  font-size: .875rem;
  line-height: 1.6;
  margin-bottom: 20px;
  background: var(--ab-danger-bg);
  border: 1px solid var(--ab-danger-bd);
  color: var(--ab-danger);
}
.ab-notice a { color: inherit; text-decoration: underline; }
.ab-notice--warn {
  background: rgba(255,196,0,.07);
  border-color: rgba(255,196,0,.30);
  color: #FBBF24;
}
.ab--light .ab-notice--warn { background: rgba(180,83,9,.07); border-color: rgba(180,83,9,.35); color: #92400E; }
.ab-notice:empty { display: none; }

/* ── loading + empty ───────────────────────────────────────────────────── */
.ab-loading { display: flex; align-items: center; gap: 11px; font-size: .875rem; color: var(--ab-muted); padding: 8px 0; }
.ab-spin {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--ab-border);
  border-top-color: var(--ab-accent);
  border-radius: 50%;
  animation: ab-spin .7s linear infinite;
}
@keyframes ab-spin { to { transform: rotate(360deg); } }

/* ── success ───────────────────────────────────────────────────────────── */
.ab-success { text-align: center; padding: 18px 0 6px; }
.ab-success:focus { outline: none; }
.ab-tick {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,76,152,.1); border: 1px solid rgba(255,76,152,.25);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.ab--light .ab-tick { background: rgba(194,24,91,.08); border-color: rgba(194,24,91,.25); }
.ab-tick svg { stroke: var(--ab-accent-deep); }
.ab-success h3 { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.ab-success p { font-size: .9rem; color: var(--ab-fg); line-height: 1.7; margin: 0 auto 14px; max-width: 46ch; }
.ab-detail {
  display: inline-flex; flex-direction: column; gap: 6px;
  background: var(--ab-chip-bg);
  border: 1px solid var(--ab-border-soft);
  border-radius: 16px;
  padding: 18px 26px;
  margin: 4px 0 18px;
  text-align: left;
}
.ab-detail-when { font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; }
.ab-detail-meta { font-size: .82rem; color: var(--ab-muted); }
.ab-ref {
  font-size: .74rem; font-weight: 600; color: var(--ab-accent-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ab--light .ab-ref { color: var(--ab-accent-deep); }
.ab-ref b { color: var(--ab-fg); font-weight: 700; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ab-card { padding: 26px 22px; border-radius: 22px; }
  .ab-row { grid-template-columns: 1fr; gap: 0; }
  .ab-times, .ab-dates { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 9px; }
  .ab-chosen { padding: 14px 15px; }
}
@media (max-width: 380px) {
  .ab-card { padding: 22px 16px; }
  .ab-times, .ab-dates { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ab-opt-face, .ab-submit, .ab-input { transition: none; }
  .ab-spin { animation: none; }
}