/* ============================================================================
   WAIVER FORM — Public-page-only chrome
   ----------------------------------------------------------------------------
   The shared waiver *document* presentation (header, sections, form fields,
   scenario cards, signature, consent) now lives in `waiver-sheet.css`, scoped
   under `.waiver-page` so the admin WYSIWYG editor can reuse it app-wide.

   This file keeps ONLY what the signing page needs and the admin preview never
   shows: the global reset/body, loading + error states, the initials *drawing*
   modal, validation `.field-error` states, the confirmation screen, and the
   address autocomplete dropdown. `waiver.html` loads BOTH sheets; the app loads
   only `waiver-sheet.css`.
   ============================================================================ */

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f6f8fa;
  color: #1a1a2e;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.d-none { display: none !important; }

/* ============================================================================
   reCAPTCHA BADGE (public form only)
   The invisible reCAPTCHA Enterprise loader injects a floating "protected by
   reCAPTCHA" badge in the bottom-right corner. Google's terms allow hiding it
   as long as the reCAPTCHA attribution is shown visibly in the signing flow
   (see .waiver-attribution below, rendered under the submit button). Use
   visibility:hidden — not display:none — so the widget still executes tokens.
   ============================================================================ */
.grecaptcha-badge { visibility: hidden !important; }

/* ============================================================================
   TEXT-SIZE CONTROL (public form only)
   Collapsed by default to a single fixed "A" in the top-right corner so it
   never blocks the header. Tapping it expands the SAME pill sideways into a
   slim row of the three presets — the trigger hides while open, so the open
   control keeps the exact same height and button size as the collapsed button
   (it just grows leftward to reveal the other two sizes, staying anchored to
   the same corner). Picking a preset scales the whole waiver by setting the
   root font-size (all waiver text is rem-based) and collapses back. The control
   is px-sized so it stays stable when the picker scales rem. Open/close +
   persistence live in the inline script in waiver.html.
   ============================================================================ */
.waiver-text-size {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: #fff;
  border: 1px solid #d1d9e0;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Trigger + preset buttons share identical geometry so the collapsed button
   and the open list are exactly the same width. */
.waiver-text-size .wts-toggle,
.waiver-text-size .wts-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #475569;
  cursor: pointer;
  line-height: 1;
}

.waiver-text-size .wts-toggle span,
.waiver-text-size .wts-btn span { font-weight: 700; }

.waiver-text-size .wts-toggle span { font-size: 14px; }

.waiver-text-size .wts-toggle:hover,
.waiver-text-size .wts-btn:hover:not(.is-active) {
  background: #f1f5f9;
}

.waiver-text-size .wts-btn.is-active {
  background: #0d6efd;
  color: #fff;
}

.waiver-text-size .wts-btn[data-size="normal"] span { font-size: 11px; }
.waiver-text-size .wts-btn[data-size="large"]  span { font-size: 13px; }
.waiver-text-size .wts-btn[data-size="xlarge"] span { font-size: 16px; }

/* Menu is chrome-free — it lives inside the shared pill and only toggles
   visibility. The trigger hides while open so the pill height never changes. */
.waiver-text-size .wts-menu {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.waiver-text-size.is-open .wts-toggle { display: none; }
.waiver-text-size.is-open .wts-menu { display: flex; }

/* ============================================================================
   reCAPTCHA ATTRIBUTION (public form only)
   Required text shown because the floating badge is hidden above. rem-based so
   it scales with the text-size control like the rest of the readable content.
   ============================================================================ */
.waiver-attribution {
  margin-top: 14px;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: #64748b;
  text-align: center;
}

.waiver-attribution a {
  color: #64748b;
}

/* Loading */
.waiver-loading {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
}

.waiver-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

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

/* Error */
.waiver-error-page {
  text-align: center;
  padding: 60px 20px;
}

.waiver-error-page h2 {
  color: #dc3545;
  margin: 0 0 8px;
}

/* ============================================================================
   VALIDATION ERROR STATES (public form only)
   Base element styling lives in waiver-sheet.css; these are the failed-
   validation highlights applied at submit time, which the admin preview
   never shows.
   ============================================================================ */

.scenario-card.field-error {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.initials-btn.field-error {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Error/invalid state must win over the green ".filled" confirmation border.
   That rule is scoped `.waiver-page .form-group [required].filled` (specificity
   0,4,1), so the [required] variants below match it and, loading after
   waiver-sheet.css, take the cascade — a filled-but-invalid field reads as an
   error, never as confirmed (no green showing under the red). `age-error` is
   the live under-18/over-18 DOB state; `field-error` is the submit-time state. */
.form-group input.field-error,
.form-group select.field-error,
.form-group select.age-error,
.waiver-page .form-group input[required].field-error,
.waiver-page .form-group select[required].field-error,
.waiver-page .form-group select[required].age-error {
  border-color: #dc3545;
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Live inline age warning shown under a DOB row the moment a complete date
   breaks its constraint (signer under 18 / minor 18+). Red text only, no
   accent stripe. A block sibling after the row, so it spans full width. */
.dob-age-warning {
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #dc3545;
}

.signature-canvas-wrapper.field-error {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.consent-section.field-error {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* ============================================================================
   ACCOMPANYING-PARENT RULE (public form only)
   Kids 6 and under need a parent on the floor with them, so the 'guardian'
   card is disabled while enforceAccompanyingParentRule (waiver-form.js) finds
   a listed participant that age, and that specific participant's own DOB row
   gets an inline note right where the parent is already looking (same
   sibling-of-.form-row.three-col mechanic as .dob-age-warning below).
   ============================================================================ */

.scenario-card.scenario-card-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.scenario-card.scenario-card-disabled:hover {
  border-color: #d1d9e0;
  background: #fff;
}

/* Nothing to fix here — this is resolution, not a warning, so it borrows the
   green "already handled" identity from .initials-confirmed above (same
   color/background/border) rather than .dob-age-warning's red. */
.dob-accompanying-parent-note {
  margin-top: 6px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
}

/* ============================================================================
   INITIALS DRAWING MODAL (public form only)
   Appended to document.body when a signer taps "sign initials" — outside the
   .waiver-page subtree and never used by the admin preview.
   ============================================================================ */

.initials-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.initials-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.initials-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 0.9375rem;
  border-bottom: 1px solid #e2e8f0;
}

.initials-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #64748b;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.initials-modal-canvas-wrap {
  padding: 16px;
  background: #f8fafc;
}

.initials-modal-canvas-wrap canvas {
  width: 100%;
  height: 120px;
  display: block;
  background: #fff;
  border: 2px solid #d1d9e0;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}

.initials-modal-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
}

.initials-modal-clear,
.initials-modal-done {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.initials-modal-clear {
  background: #f1f5f9;
  color: #475569;
}

.initials-modal-clear:hover {
  background: #e2e8f0;
}

.initials-modal-done {
  background: #0d6efd;
  color: #fff;
}

.initials-modal-done:hover {
  background: #0b5ed7;
}

/* ============================================================================
   VALIDATION ERROR LIST (public form only)
   ============================================================================ */

.validation-errors {
  margin-bottom: 16px;
}

.validation-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  color: #dc2626;
  margin-bottom: 6px;
}

/* ============================================================================
   CONFIRMATION PAGE (public form only)
   ============================================================================ */

.confirmation-page {
  text-align: center;
  padding: 40px 20px;
}

.confirmation-icon {
  width: 64px;
  height: 64px;
  background: #d4edda;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
  color: #28a745;
}

.confirmation-page h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  color: #0f172a;
}

.confirmation-page p {
  color: #475569;
  font-size: 0.9375rem;
  margin: 0 0 16px;
}

.confirmation-waiver-id {
  display: inline-block;
  background: #f1f5f9;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.875rem;
  color: #334155;
  word-break: break-all;
}

/* ============================================================================
   ADDRESS AUTOCOMPLETE DROPDOWN (public form only)
   The visible input is a normal .form-group input; the dropdown is our
   own DOM (built in waiver-form.js initAddressAutofill) so we get full
   styling control. Anchored absolutely to the form-group via the
   .addr-autocomplete-anchor class added at init time.
   ============================================================================ */
.addr-autocomplete-anchor {
  position: relative;
}

.addr-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border: 1.5px solid #0d6efd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  max-height: 260px;
  overflow-y: auto;
}

.addr-autocomplete-dropdown[hidden] {
  display: none;
}

.addr-autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.addr-autocomplete-item:first-child {
  border-top: none;
}

.addr-autocomplete-item:hover,
.addr-autocomplete-item.is-active {
  background: #f1f7ff;
}

.addr-autocomplete-main {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
}

.addr-autocomplete-secondary {
  font-size: 0.75rem;
  color: #64748b;
}