/* TERMS-ACCEPTANCE-1 §B — scroll-to-accept Service Agreement clickwrap.
   Mirrors the A3-blessed garage-dialog treatment (ew-garage-dialog.css) for
   token + aesthetic consistency: monochrome panel, house-red top rule,
   44x44 close hit area, 220ms enter, reduced-motion respected.

   Two-signal protection: the Finish CTA uses .ew-btn--buy (fixed gold
   --ew-buy) — the established checkout color — NOT the green --success GO
   signal and NOT red. The inline error uses --ew-error (system red) because
   it IS a functional error signal. */

.ew-terms-modal {
  /* TERMS-ACCEPTANCE-1 §B fix — must sit ABOVE the cookie-consent banner
     (.ew-consent, z 2147483000 in ew-consent.css). A first-time visitor at
     checkout has the bottom-fixed consent banner painting over the modal
     footer, making the Finish CTA physically unclickable. This is a blocking
     legal gate; the cookie banner is non-blocking, so the gate wins while open
     and the banner is reachable again after accept/cancel. */
  position: fixed; inset: 0; z-index: 2147483001; /* just above .ew-consent (2147483000); also clears garage dialog (2000) */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px;
  pointer-events: none;
}
.ew-terms-modal.is-open { pointer-events: auto; }
/* Explicit hidden default — the panel has content so Dawn's div:empty rule
   never applies; the `hidden` attribute + this rule keep it off until opened. */
.ew-terms-modal[hidden] { display: none; }

.ew-terms-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  opacity: 0;
  transition: opacity var(--ew-dur-fast) var(--ew-ease);
}
.ew-terms-modal.is-open .ew-terms-modal__backdrop { opacity: 1; }

.ew-terms-modal__panel {
  position: relative;
  width: 100%; max-width: 640px;
  display: flex; flex-direction: column;
  background: var(--ew-panel);
  border: 1px solid var(--ew-steel);
  border-top: 2px solid var(--accent);
  padding: var(--ew-s-5);
  max-height: 90vh;
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}
.ew-terms-modal.is-open .ew-terms-modal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.ew-terms-modal__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ew-s-3);
  margin-bottom: var(--ew-s-4);
}
.ew-terms-modal__title {
  /* FIX 9 — match the house dialog title scale (--ew-garage-dialog__title). */
  font-size: var(--ew-text-lg); font-weight: 700;
  color: var(--ew-white);
  margin: 0; line-height: 1.25;
}
.ew-terms-modal__close {
  /* a11y (WCAG 2.5.8) — hit area >=44x44, matches .ew-garage-dialog__close. */
  flex: 0 0 auto;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--ew-paper);
  padding: var(--ew-s-1); cursor: pointer;
  line-height: 1;
}
.ew-terms-modal__close:hover { color: var(--ew-white); }

/* Scroll-affordance wrapper (FIX 3) — positions the progress rule + bottom
   fade over the pane. flex child of the panel; min-height:0 so it can shrink
   inside the bounded-height flex column instead of overflowing it. */
.ew-terms-modal__scroll-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* Scroll-progress rule (FIX 3b) — thin accent bar across the top of the pane
   that fills 0→100% as the user scrolls. Decorative measured-progress cue
   (same --accent as the garage-dialog active marker), not a two-signal color. */
.ew-terms-modal__scroll-progress {
  position: absolute; top: 0; left: 0; z-index: 2;
  height: 2px;
  width: 0; /* JS (updateProgress) sets inline width 0→100% on scroll */
  background: var(--accent);
  pointer-events: none;
  transition: width var(--ew-dur-fast) var(--ew-ease);
}

/* Bottom scroll fade (FIX 3a) — "more below" cue; disappears at scroll-end. */
.ew-terms-modal__scroll-fade {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 48px;
  background: linear-gradient(to top, var(--ew-panel-deep), transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--ew-dur-fast) var(--ew-ease);
}
.ew-terms-modal.is-scrolled-end .ew-terms-modal__scroll-fade { opacity: 0; }

/* Scrollable agreement pane — the scroll-wrap target. */
.ew-terms-modal__scroll {
  flex: 1 1 auto;
  /* FIX 2 — correct flex-child default so the pane scrolls instead of
     expanding past the bounded panel (default min-height:auto would push the
     footer/CTA off-screen on phones). */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 50vh;
  padding: var(--ew-s-4);
  background: var(--ew-panel-deep);
  border: 1px solid var(--ew-steel);
  color: var(--ew-paper);
  font-size: var(--ew-text-sm);
  line-height: 1.55;
}
.ew-terms-modal__scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ew-terms-modal__intro { margin: 0 0 var(--ew-s-4); }
.ew-terms-modal__clause { margin: 0 0 var(--ew-s-4); }
.ew-terms-modal__clause:last-child { margin-bottom: 0; }
.ew-terms-modal__clause strong { color: var(--ew-white); }

/* aria-live scroll-gate status — neutral until enabled. */
.ew-terms-modal__status {
  margin: var(--ew-s-3) 0 0;
  font-family: var(--ew-font-mono);
  font-size: var(--ew-text-xs); letter-spacing: 0.04em;
  color: var(--ew-aluminum);
  /* FIX 7 — ease the unlock instead of snapping. */
  transition: color var(--ew-dur-fast) var(--ew-ease);
}
.ew-terms-modal.is-scrolled-end .ew-terms-modal__status { color: var(--ew-paper); }

.ew-terms-modal__agree { margin-top: var(--ew-s-4); }
.ew-terms-modal__check-label {
  /* FIX 5 — guarantee a >=24px (AAA 2.5.5 / AA 2.5.8) target row; center the
     box within it. */
  display: flex; align-items: center; gap: var(--ew-s-3);
  min-height: 24px;
  color: var(--ew-aluminum);
  font-size: var(--ew-text-sm); line-height: 1.4;
  cursor: not-allowed;
  /* FIX 7 — ease the unlock; box-shadow eases the emphasis marker in/out. */
  transition: color var(--ew-dur-fast) var(--ew-ease),
              box-shadow var(--ew-dur-fast) var(--ew-ease);
}
.ew-terms-modal.is-scrolled-end .ew-terms-modal__check-label {
  color: var(--ew-paper);
  cursor: pointer;
  /* FIX 7 — accent emphasis on unlock, mirroring the garage-dialog active
     marker (inset accent left-edge). Decorative accent, not a two-signal. */
  box-shadow: inset 3px 0 0 0 var(--accent);
  padding-left: var(--ew-s-3);
}
.ew-terms-modal__check {
  flex: 0 0 auto;
  /* FIX 5 — 24x24 hit target. */
  width: 24px; height: 24px;
  margin-top: 1px;
  accent-color: var(--ew-buy);
}
.ew-terms-modal__check:disabled { cursor: not-allowed; }

.ew-terms-modal__error {
  margin: var(--ew-s-3) 0 0;
  color: var(--ew-error);
  font-size: var(--ew-text-sm);
}

.ew-terms-modal__actions {
  display: flex; justify-content: flex-end; align-items: center;
  gap: var(--ew-s-3);
  margin-top: var(--ew-s-5);
  flex-wrap: wrap;
}
.ew-terms-modal__finish[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 600px) {
  .ew-terms-modal { padding: 0; align-items: stretch; }
  /* Bounded-height flex column (caps near 100vh). The body scrolls inside the
     pane; the footer region stays pinned and visible. */
  .ew-terms-modal__panel { max-width: none; max-height: 100vh; border-top-width: 2px; }
  /* FIX 2 — let the pane take the remaining height and scroll internally
     (do NOT use max-height:none; that would expand it past the viewport and
     push the checkbox/CTA off-screen). The wrapper carries flex:1 1 auto. */
  .ew-terms-modal__scroll-wrap { flex: 1 1 auto; min-height: 0; }
  .ew-terms-modal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* FIX 2 — pin the footer region (status, checkbox, error, actions) so it
     never collapses or scrolls away while the agreement body scrolls. */
  .ew-terms-modal__status,
  .ew-terms-modal__agree,
  .ew-terms-modal__error,
  .ew-terms-modal__actions { flex: 0 0 auto; }
  .ew-terms-modal__actions .ew-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ew-terms-modal__backdrop,
  .ew-terms-modal__panel { transition: none; }
  .ew-terms-modal__panel { transform: none; }
  /* FIX 3 / FIX 7 — instant under reduce: no fade/progress/unlock easing. */
  .ew-terms-modal__scroll-fade,
  .ew-terms-modal__scroll-progress,
  .ew-terms-modal__status,
  .ew-terms-modal__check-label { transition: none; }
}