/* ===========================================================================
   SafeBets INVESTOR CAPTURE WATERFALL  -  presentation only
   ---------------------------------------------------------------------------
   Pairs with js/sb-invest-waterfall.js. Deliberately SMALL and deliberately
   inheriting: every field, checkbox, button and error box on step 3 is the
   page's OWN node, moved (or cloned from) the markup that was already there, so
   it keeps the page's own type, colour and focus treatment. This file only has
   to style the parts that did not exist before:

     - the three-step progress rail
     - the two micro-commitment panes (location, eligibility)
     - the requirements popover and its SEC link
     - the reveal transition on the personal-data waterfall
     - the popup delivery shell, when form_delivery resolves to popup

   COLOUR IS BORROWED, NOT DECLARED. The invest LPs are not one palette: five of
   them ground the form in navy and lp-premium grounds it in a lit orange slab
   with navy ink. So nothing here sets an opaque background or a literal text
   colour. Everything is currentColor, or a translucent tint of currentColor,
   which reads correctly on both grounds and cannot fight a page's own scheme.
   The one exception is the accent, which comes from --sbwf-accent and falls
   back to the SafeBets brand orange.
   ========================================================================= */

.sbwf {
  --sbwf-accent: var(--orange, #FF4D00);
  display: block;
}

/* ---------- the progress rail --------------------------------------------
   Mirrors the real safebets.world modal: numbered pills, the active one
   filled, the rest quiet. It is decorative for a screen reader (the live step
   is announced on the pane itself), so it is aria-hidden in the markup. */
.sbwf-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin: 0 0 20px;
  padding: 9px 12px;
  list-style: none;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
}
@supports not (background: color-mix(in srgb, red 9%, transparent)) {
  .sbwf-steps { background: rgba(128, 128, 128, .16); }
}
.sbwf-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: .5;
  font-style: italic;
}
.sbwf-steps li .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  flex: 0 0 auto;
}
.sbwf-steps li[data-state="done"] { opacity: .78; }
.sbwf-steps li[data-state="now"] { opacity: 1; }
.sbwf-steps li[data-state="now"] .n {
  background: var(--sbwf-accent);
  border-color: var(--sbwf-accent);
  color: #fff;
}
.sbwf-steps li[data-state="skipped"] { opacity: .3; text-decoration: line-through; }

/* ---------- panes --------------------------------------------------------
   One pane visible at a time. `hidden` alone is enough for correctness; the
   transition is a progressive nicety and is dropped under reduced motion. */
.sbwf-pane[hidden] { display: none; }
.sbwf-pane { animation: sbwf-in .26s ease both; }
@keyframes sbwf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sbwf-pane { animation: none; }
}

.sbwf-title {
  margin: 0 0 12px;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.sbwf-desc {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  opacity: .88;
  max-width: 56ch;
}

/* ---------- the location radios ------------------------------------------
   Big hit areas, one per line, exactly like the real form. */
.sbwf-radios { display: grid; gap: 10px; margin: 0 0 20px; }
.sbwf-radio {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  font-style: italic;
  opacity: .72;
  transition: opacity .16s ease, border-color .16s ease, background .16s ease;
}
.sbwf-radio:hover { opacity: .95; }
.sbwf-radio:has(input:checked) {
  opacity: 1;
  font-weight: 800;
  border-color: var(--sbwf-accent);
  background: color-mix(in srgb, var(--sbwf-accent) 10%, transparent);
}
.sbwf-radio input { accent-color: var(--sbwf-accent); width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- checkbox rows we author (step 2) ------------------------------ */
.sbwf-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 20px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
}
.sbwf-check input { accent-color: var(--sbwf-accent); width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; }

/* ---------- the requirements popover -------------------------------------- */
.sbwf-req-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 800;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--sbwf-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.sbwf-req-btn:focus-visible { outline: 2px solid var(--sbwf-accent); outline-offset: 3px; border-radius: 3px; }

.sbwf-req {
  position: relative;
  margin: 0 0 18px;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  max-width: 52ch;
}
@supports not (background: color-mix(in srgb, red 8%, transparent)) {
  .sbwf-req { background: rgba(128, 128, 128, .14); border-color: rgba(128, 128, 128, .3); }
}
.sbwf-req[hidden] { display: none; }
.sbwf-req p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; }
.sbwf-req a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--sbwf-accent);
  text-underline-offset: 3px;
}
.sbwf-req-close {
  appearance: none;
  background: none;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  padding: 5px 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}

/* ---------- the personal-data waterfall -----------------------------------
   A field that has not been earned yet is display:none, not merely faded: a
   hidden-but-present field is still tabbable and still submitted, which is the
   whole failure mode a waterfall exists to avoid. */
.sbwf-step[hidden] { display: none; }
.sbwf-step {
  animation: sbwf-in .24s ease both;
}
@media (prefers-reduced-motion: reduce) { .sbwf-step { animation: none; } }

/* The read-back of the step 1 answer. Not an input the visitor can contradict:
   the value is carried, shown, and submitted from the answer they gave. */
.sbwf-carried {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, currentColor 26%, transparent);
  font-size: 13.5px;
}
.sbwf-carried .k { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; opacity: .7; }
.sbwf-carried .v { font-weight: 700; }
.sbwf-carried button {
  appearance: none; background: none; border: 0; padding: 0; font: inherit;
  font-size: 12.5px; font-weight: 700; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--sbwf-accent);
}

/* ---------- footers, help lines, next buttons ----------------------------- */
.sbwf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.sbwf-help {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  font-style: italic;
  opacity: .82;
  max-width: 40ch;
}
.sbwf-help a {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--sbwf-accent);
  text-underline-offset: 3px;
}
.sbwf-next {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-height: 50px;
  padding: 13px 34px;
  border-radius: 10px;
  background: var(--sbwf-accent);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .005em;
  transition: filter .16s ease, transform .16s ease;
}
.sbwf-next:hover { filter: brightness(1.06); }
.sbwf-next:active { transform: translateY(1px); }
.sbwf-next:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sbwf-back {
  appearance: none; background: none; border: 0; padding: 6px 0; margin: 0 0 14px;
  font: inherit; font-size: 12.5px; font-weight: 700; color: inherit; cursor: pointer;
  opacity: .75; text-decoration: underline; text-underline-offset: 3px;
}
.sbwf-back:hover { opacity: 1; }

/* Our own inline error line, used only when the page has no error box of its
   own to borrow. */
.sbwf-err {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #ff9c74;
  display: none;
}
.sbwf-err.show { display: block; }

/* "(optional)" on the phone label. Same treatment on every page because the
   label it sits in is the page's own node. */
.sbwf-opt { font-weight: 500; opacity: .62; letter-spacing: 0; text-transform: none; }

/* First/Last name pair (2026-07-26). Two clones of the page's own name field
   side by side; collapses to one column on narrow screens. */
.sbwf-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 420px) {
  .sbwf-name-row { grid-template-columns: 1fr; }
}

/* Continue with LinkedIn (2026-07-26). LinkedIn's own brand blue is used
   deliberately, same as invest/assets/invest-form-modal.css's .sbif-li: a
   third-party auth affordance reads as that provider's mark, not this page's
   borrowed-currentColor palette. */
.sbwf-li-row { margin: 0 0 20px; }
.sbwf-li-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  border: 1px solid #0a66c2;
  background: #0a66c2;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  cursor: pointer;
  transition: background .16s ease;
}
/* The LinkedIn mark must be constrained HERE, on the base rule, not in a
   modal-scoped one. An inline SVG carrying no width/height stretches to fill its
   container, so on the embedded arm - which never gets the modal class - the icon
   rendered as a giant block and swallowed the button. */
.sbwf-li-btn svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
.sbwf-li-btn span { flex: 0 0 auto; }
.sbwf-li-btn:hover { background: #0854a0; }
.sbwf-li-btn:disabled { opacity: .7; cursor: default; }
.sbwf-li-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sbwf-li-or {
  text-align: center;
  margin: 10px 0 0;
  font-size: 12px;
  font-style: italic;
  opacity: .68;
}

/* The service mark, at the size the brand book draws it. */
.sbwf-tm { font-size: .52em; vertical-align: super; letter-spacing: 0; font-weight: 700; }

/* ---------- POPUP DELIVERY ------------------------------------------------
   The `popup` arm of the form_delivery split test. The overlay carries BOTH
   .lp-modal and .sbwf-modal: lib/lp-engine.js early-returns from its own
   openFormModal when it finds .lp-modal[data-open="true"] already in the
   document, so the two implementations can never stack two modals on one page.
   The form card itself is MOVED, never cloned, so every listener on it and the
   waterfall state inside it survive the trip. */
.sbwf-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(3, 2, 19, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: sbwf-fade .18s ease both;
}
@keyframes sbwf-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sbwf-modal { animation: none; } }

.sbwf-modal-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto;
}
.sbwf-modal-close {
  position: absolute;
  top: -14px;
  right: -6px;
  z-index: 2;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: #fff;
  color: #030213;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.sbwf-modal-close:focus-visible { outline: 2px solid var(--sbwf-accent); outline-offset: 3px; }
@media (max-width: 560px) {
  .sbwf-modal { padding: 44px 10px 24px; }
  .sbwf-modal-close { top: -34px; right: 0; }
}
html.sbwf-modal-open, body.sbwf-modal-open { overflow: hidden; }

/* In popup delivery the inline capture section is removed from the flow
   entirely, so the page does not carry a second copy of the form below the
   fold. */
[data-sbwf-delivery="popup"] .sbwf-inline-host { display: none !important; }

/* Nothing in this file may create a horizontal scrollbar on a 375px viewport. */
.sbwf, .sbwf * { max-width: 100%; }
.sbwf-steps { overflow-x: auto; -webkit-overflow-scrolling: touch; }