/* ============================================================
   VarleyLabs Booking Lite — widget styles
   ============================================================
   Every visual decision routes through a --bl-* variable with a
   neutral fallback, so each client site themes the widget by
   setting variables on the mount container — no CSS edits.

   Theming contract:
     --bl-accent          primary action colour
     --bl-accent-contrast text on the accent
     --bl-accent-soft     selected-state fills / focus tint
     --bl-surface         card + input background
     --bl-ink             main text
     --bl-ink-muted       secondary text
     --bl-line            borders
     --bl-radius          control corner radius
     --bl-radius-lg       card corner radius
     --bl-font-display    headings (inherits site font by default)
   ============================================================ */

.bl-widget {
  --_accent: var(--bl-accent, #1f2933);
  --_accent-contrast: var(--bl-accent-contrast, #ffffff);
  --_accent-soft: var(--bl-accent-soft, rgba(31, 41, 51, 0.08));
  --_surface: var(--bl-surface, #ffffff);
  --_ink: var(--bl-ink, #1f2933);
  --_muted: var(--bl-ink-muted, #6b7280);
  --_line: var(--bl-line, rgba(31, 41, 51, 0.16));
  --_radius: var(--bl-radius, 12px);
  --_radius-lg: var(--bl-radius-lg, 18px);

  color: var(--_ink);
  font-size: 1rem;
  line-height: 1.5;
}

.bl-step { display: grid; gap: 18px; }

/* ---------- progress ---------- */

.bl-progress {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bl-progress__dot {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--_muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--_line);
}

.bl-progress__dot.is-current {
  color: var(--_accent-contrast);
  background: var(--_accent);
  border-color: var(--_accent);
}

.bl-progress__dot.is-done {
  color: var(--_accent);
  border-color: var(--_accent);
}

/* ---------- booking type cards ---------- */

.bl-type-grid { display: grid; gap: 12px; }

.bl-type-card {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--_line);
  border-radius: var(--_radius-lg);
  background: var(--_surface);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.bl-type-card:hover {
  border-color: var(--_accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.bl-type-card__label {
  font-family: var(--bl-font-display, inherit);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--_ink);
}

.bl-type-card__hint { font-size: 0.88rem; color: var(--_muted); }

/* ---------- fields ---------- */

.bl-field { display: grid; gap: 7px; }

.bl-field__label {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--_ink);
}

.bl-input {
  width: 100%;
  min-height: 48px;               /* big tap targets */
  padding: 12px 14px;
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  background: var(--_surface);
  color: var(--_ink);
}

.bl-input:focus-visible {
  outline: 3px solid var(--_accent-soft);
  outline-offset: 2px;
  border-color: var(--_accent);
}

textarea.bl-input { min-height: 0; resize: vertical; }

.bl-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 540px) {
  .bl-grid-2 { grid-template-columns: 1fr; }
}

/* ---------- guests + slot pills ---------- */

.bl-guest-row { display: flex; flex-wrap: wrap; gap: 8px; }

.bl-pill {
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--_line);
  background: var(--_surface);
  font-weight: 700;
  color: var(--_ink);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.bl-pill.is-selected {
  background: var(--_accent);
  border-color: var(--_accent);
  color: var(--_accent-contrast);
}

.bl-input--guests { max-width: 120px; }

.bl-slot-group { display: grid; gap: 8px; margin-top: 4px; }

.bl-slot-group__name {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--_muted);
}

.bl-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.bl-slot {
  position: relative;
  min-height: 50px;
  border-radius: var(--_radius);
  border: 1px solid var(--_line);
  background: var(--_surface);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--_ink);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.bl-slot:hover { border-color: var(--_accent); }

.bl-slot.is-selected {
  background: var(--_accent);
  border-color: var(--_accent);
  color: var(--_accent-contrast);
}

/* the "only 2 left" scarcity badge — the moment this isn't a form */
.bl-slot__badge {
  position: absolute;
  top: -8px;
  right: -6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: var(--bl-badge, #b7791f);
  color: var(--bl-badge-contrast, #fff);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

/* ---------- notes / errors ---------- */

.bl-note { margin: 0; font-size: 0.9rem; color: var(--_muted); }

.bl-note--warn { color: var(--bl-warn, #9a3412); font-weight: 600; }

.bl-note--loading::after {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 8px;
  vertical-align: -0.12em;
  border: 2px solid var(--_line);
  border-top-color: var(--_accent);
  border-radius: 50%;
  animation: bl-spin 700ms linear infinite;
}

@keyframes bl-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bl-note--loading::after { animation: none; }
  .bl-type-card, .bl-pill, .bl-slot, .bl-btn { transition: none; }
}

.bl-error {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bl-warn, #9a3412);
}

.bl-error--global {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--_radius);
  background: color-mix(in srgb, var(--bl-warn, #9a3412) 10%, transparent);
}

/* ---------- checkboxes ---------- */

.bl-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--_ink);
}

.bl-check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--_accent);
}

.bl-check a { color: var(--_accent); text-decoration: underline; }

/* ---------- honeypot: off-screen, not display:none (fools more bots) */

.bl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- buttons ---------- */

.bl-btn {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 1rem;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.bl-btn--primary {
  background: var(--bl-btn-bg, var(--_accent));
  color: var(--_accent-contrast);
  box-shadow: var(--bl-btn-shadow, 0 12px 28px rgba(0, 0, 0, 0.16));
}

.bl-btn--primary:hover:not(:disabled) { transform: translateY(-2px); }

.bl-btn--primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.bl-btn--ghost {
  background: transparent;
  border-color: var(--_line);
  color: var(--_ink);
}

.bl-back {
  justify-self: start;
  padding: 4px 0;
  border: 0;
  background: none;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--_muted);
}

.bl-back:hover { color: var(--_accent); }

/* ---------- success ---------- */

.bl-done { text-align: center; padding: 12px 0 4px; }

.bl-done__mark {
  width: 68px;
  height: 68px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.9rem;
  background: var(--_accent-soft);
  color: var(--_accent);
}

.bl-done__mark.is-confirmed {
  background: var(--bl-success-soft, rgba(45, 107, 61, 0.12));
  color: var(--bl-success, #2d6b3d);
}

.bl-done__title {
  margin: 14px 0 6px;
  font-family: var(--bl-font-display, inherit);
  font-size: 1.7rem;
  color: var(--_ink);
}

.bl-done__text { margin: 0 auto; max-width: 42ch; color: var(--_muted); }

.bl-done__ref { margin: 14px 0 18px; font-size: 0.95rem; }