/* ─────────────────────────────────────────────────────────────────────
   engine.css — booking engine (Slice 2A) wizard chrome.

   The public booking wizard's calendar grid + step-indicator styling used
   to live in the legacy dark public.css (not loaded by the v4 engine). This
   file is the v4 light port: token-driven, no dark blocks, no naked hex.
   Two jobs:
     1. Structural CSS the wizard partials need (.bw-cal-grid is a 7-col grid;
        .booking-step-indicator state styling the JS toggles).
     2. Remap the handful of raw-blue Tailwind classes the date-picker /
        dives controllers inject (bg-blue-600 selected cells, text-blue-600
        prices, blue chips) onto the per-tenant accent token, so the funnel
        tracks the shop's brand instead of a hardcoded blue.

   @imported from application.css after booking-v2.css.
   ───────────────────────────────────────────────────────────────────── */

/* ── Calendar grid (7 columns) ──────────────────────────────────────── */
.bw-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* Remap the date-picker's JS-injected blue onto the tenant accent (light).
   Default (gray-700) + past (gray-300) cells already read fine on canvas. */
.booking-wizard .bw-cal-grid .bg-blue-600 {
  background-color: var(--accent) !important;
}
.booking-wizard .bw-cal-grid .ring-blue-600 {
  --tw-ring-color: var(--accent) !important;
}
.booking-wizard .bw-cal-grid .text-blue-600 {
  color: var(--accent) !important;
}
.booking-wizard .bw-cal-grid .hover\:bg-blue-50:hover {
  background-color: var(--accent-soft) !important;
}

/* Selected-date chips + product prices the controllers inject in raw blue. */
.booking-wizard .bg-blue-50 { background-color: var(--accent-soft) !important; }
.booking-wizard .border-blue-200 { border-color: var(--accent-border) !important; }
.booking-wizard .text-blue-700,
.booking-wizard .text-blue-600 { color: var(--accent) !important; }

/* ── Step indicator ─────────────────────────────────────────────────── */
/* Base = upcoming step. The wizard JS toggles .active / .completed (and the
   raw Tailwind state classes it also applies) to drive the journey. */
.booking-step-indicator {
  background-color: var(--surface-alt);
  color: var(--muted);
  cursor: pointer;
}

/* Current step — accent fill + focus ring. (base_wizard JS toggles .active.) */
.booking-step-indicator.active {
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.booking-step-indicator.active .bw-step-number { display: inline !important; }
.booking-step-indicator.active .bw-step-check { display: none !important; }

/* Completed step — accent fill + checkmark. (base_wizard JS toggles .completed.) */
.booking-step-indicator.completed {
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: none;
}
.booking-step-indicator.completed .bw-step-number { display: none !important; }
.booking-step-indicator.completed .bw-step-check { display: inline !important; }

/* Upcoming steps — base_wizard JS tags them bg-surface/border-2/
   border-hairline-strong/text-muted. Collapse to the engine's subtle fill so
   the step row stays on-system. Keyed on the stable .border-2 marker the JS
   still emits (the old bg-white/border-gray-300 palette hooks are gone). */
.booking-step-indicator.border-2 {
  background-color: var(--surface-alt) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  border: none !important;
}
.booking-step-indicator.text-white { color: #fff !important; }

/* Connectors — hairline default, accent once the step is completed. base_wizard
   now fills completed connectors with the bg-accent token (was bg-green-500). */
.booking-step-connector { background-color: var(--hairline); }
.booking-step-connector.bg-accent { background-color: var(--accent) !important; }

/* ── Waiver signature field ─────────────────────────────────────────── */
/* Mode toggle (Draw / Type); the signature controller toggles .active. */
.sig-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-btn, 6px);
  cursor: pointer;
  transition: color 150ms, background-color 150ms, border-color 150ms;
}
.sig-mode-btn:hover { background-color: var(--surface-alt); }
.sig-mode-btn.active {
  color: var(--accent);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}

/* Canvas — white surface with a subtle ruled guide line. */
.sig-canvas-container {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 39px, var(--hairline) 39px, var(--hairline) 40px
  );
}
.sig-canvas { cursor: crosshair; display: block; }

/* Typed signature — dashed field, cursive preview. */
.sig-typed-input {
  width: 100%;
  height: 3.25rem;
  padding: 0 0.875rem;
  font-family: "Brush Script MT", cursive;
  font-size: 1.25rem;
  color: var(--ink);
  background-color: var(--surface);
  border: 2px dashed var(--hairline-strong);
  border-radius: var(--radius-md, 8px);
}
.sig-typed-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Legacy boolean-toggle-buttons (bootstrap variant) ──────────────── */
/* The shared themes/legacy/_boolean_toggle_buttons partial emits Bootstrap
   btn-group classes; the boolean-toggle-buttons controller swaps btn-primary
   (active) ↔ btn-outline-secondary (inactive). The engine doesn't load
   Bootstrap, so we style those classes to v4 — scoped to .engine-body so it
   only affects the booking engine, never account/POS surfaces. */
.engine-body .btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.engine-body .btn-group .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--hairline);
  background-color: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: color 150ms, background-color 150ms, border-color 150ms;
}
.engine-body .btn-group .btn-outline-secondary:hover { background-color: var(--surface-alt); }
.engine-body .btn-group .btn-primary {
  color: var(--accent);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}

/* ── Wizard modals (product picker + accommodation) ─────────────────── */
/* base_dives / public-accommodation inject a .bw-modal-overlay > .bw-modal-panel
   dialog. The overlay/panel constraint CSS lived in the dark public.css; this is
   the light port, scoped to .engine-body. :not(.hidden) keeps the static
   accommodation modal hidden until the controller reveals it (the product modal
   is added to the DOM only while open, so it has no .hidden). The bw-modal-grid
   (product card grid) is reused inside the panel. */
.engine-body .bw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* The static accommodation modal ships with .hidden; keep it hidden until the
   controller reveals it (our scoped overlay rule outranks Tailwind's .hidden). */
.engine-body .bw-modal-overlay.hidden { display: none !important; }
.engine-body .bw-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90dvh;
  background-color: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(17, 24, 39, 0.25);
}
@media (min-width: 640px) {
  .engine-body .bw-modal-overlay { align-items: center; }
  .engine-body .bw-modal-panel {
    max-width: var(--bw-modal-max-width, 56rem);
    margin: 0 1rem;
    max-height: 85vh;
  }
}
.bw-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 576px) {
  .bw-modal-grid { grid-template-columns: 1fr 1fr; }
}