/* Lead form (SPEC §5.1) — lives in the dark navy #zapys sign-up section.
   Brand: flat, no shadows, rounded-pill motif. Reuses the page's :root tokens + .btn. */

.lead-form { display: flex; flex-direction: column; gap: 18px; }

.lf-field { display: flex; flex-direction: column; gap: 8px; }
.lf-field-age { max-width: 160px; }

.lf-label {
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: var(--fs-sm);
  color: #fff; letter-spacing: 0.01em;
}

/* Text / number inputs — white surface, navy ink, visible labels (never placeholder-as-label). */
.lf-input {
  width: 100%; min-height: 48px; border: 2px solid transparent; border-radius: 14px;
  padding: 12px 16px; font-family: 'Inter', sans-serif; font-size: var(--fs-base);
  background: #fff; color: var(--navy);
}
.lf-input::placeholder { color: var(--field-placeholder); }
.lf-input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lf-input[aria-invalid="true"] { border-color: var(--error); background: var(--error-bg); }
.lf-input-sm { max-width: 140px; }

/* Segmented + list pills (radiogroups): track, language, contact, level. */
.lf-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.lf-list { display: flex; flex-direction: column; gap: 8px; }

.lf-pill {
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: var(--fs-15);
  min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.06); color: #fff;
  border: 2px solid rgba(255,255,255,0.45);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lf-list .lf-pill { width: 100%; text-align: left; border-radius: 16px; }
.lf-pill:hover { border-color: #fff; }
.lf-pill:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lf-pill[aria-checked="true"], .lf-pill.is-active {
  background: var(--gold); border-color: var(--gold); color: var(--navy);
}
.lf-seg[aria-invalid="true"] .lf-pill,
.lf-list[aria-invalid="true"] .lf-pill { border-color: var(--error); }

.lf-sub { margin-top: 4px; }

/* Per-field format hints — helper text under a field (Copy Engine slots; NEVER placeholders). */
.lf-hint { display: block; font-size: var(--fs-xs); color: var(--on-navy-soft); margin-top: 2px; }
.lf-hint:empty { display: none; }

/* Consent rows. */
.lf-consent {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--on-navy-soft); font-size: var(--fs-sm); line-height: 1.45; cursor: pointer;
}
.lf-consent input { width: 20px; height: 20px; min-width: 0; margin-top: 2px; flex: none; accent-color: var(--gold); }
.lf-consent a { color: #fff; }
.lf-consent.lf-consent-opt { font-size: var(--fs-xs); color: var(--muted); }

/* Honeypot — removed from the visual + accessibility tree, still in the DOM for bots. */
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Submit + states. */
.lf-submit { width: 100%; justify-content: center; margin-top: 4px; }
.lf-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.lf-status:empty { display: none; }
.lf-status { margin-top: 6px; font-size: var(--fs-sm); color: var(--on-navy-soft); }
.lf-status.is-error { color: var(--error-text); }

/* ── Contact handle: leading prefix (@ for socials · flag+dial for phone) + input ── */
.lf-handle-wrap { position: relative; display: flex; align-items: stretch; }
.lf-handle-wrap .lf-input { flex: 1 1 auto; min-width: 0; }
/* With a visible prefix, the input drops its left rounding so they read as one control. */
.lf-handle-wrap:has(.lf-prefix:not([hidden])) .lf-input { border-radius: 0 14px 14px 0; }

.lf-prefix {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 48px; padding: 0 14px;
  background: #fff; color: var(--navy);
  border: 2px solid transparent; border-right: 1px solid var(--line);
  border-radius: 14px 0 0 14px;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: var(--fs-base);
}
.lf-prefix[hidden] { display: none; }
button.lf-prefix-dial { cursor: pointer; }
button.lf-prefix-dial:hover { background: var(--field-hover); }
.lf-prefix-dial:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lf-prefix .lf-caret { color: var(--navy-soft); font-size: var(--fs-xxs); margin-left: -1px; }
.lf-flag {
  width: 22px; height: 15px; border-radius: 2px; flex: none; display: block;
  object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
}

/* Country listbox popover. */
.lf-countries {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0;
  width: 290px; max-width: 100%; max-height: 264px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; color: var(--navy);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(31,45,92,0.20);
}
.lf-countries[hidden] { display: none; }
.lf-country {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 10px; border-radius: 10px; font-size: var(--fs-15);
}
.lf-country .lf-cname { flex: 1 1 auto; }
.lf-country .lf-cdial { color: var(--navy-soft); font-variant-numeric: tabular-nums; }
.lf-country:hover { background: var(--blue-soft); }
.lf-country:focus-visible { background: var(--blue-soft); outline: 2px solid var(--blue-ink); outline-offset: -2px; }
.lf-country[aria-selected="true"] { background: var(--gold-soft); }

/* The hidden attribute must always win over component display rules (e.g. .btn, .lf-prefix)
   so JS-driven show/hide stays reliable. */
[hidden] { display: none !important; }

/* ── Success modal (native <dialog>, top layer) ─────────────────────────────
   Never set an unconditional `display` on the dialog itself; the :not([open])
   rule below mirrors the UA's dialog:not([open]){display:none} for engines that
   don't recognise <dialog>. Dialog padding stays 0 so a click on the dialog
   element can only be the ::backdrop — the card carries the padding. */
.lf-modal {
  border: 0; border-radius: 20px; padding: 0;
  width: min(420px, calc(100vw - 32px));
  /* UA dialog colors are Canvas/CanvasText — pin the brand surface. */
  background: #fff; color: var(--navy);
  box-shadow: 0 12px 32px rgba(31,45,92,0.25);
}
.lf-modal:not([open]) { display: none; }
/* `block` only while open (closed state stays UA/guard-ruled): on pre-<dialog>
   engines the fallback `open` attribute would otherwise render it inline. */
.lf-modal[open] { display: block; animation: lf-modal-in .18s ease-out; }
/* Literal navy: ::backdrop + var() needs Chrome 122 / Safari 17.4. */
.lf-modal::backdrop { background: rgba(31,45,92,0.55); }
body:has(.lf-modal[open]) { overflow: hidden; } /* scroll-lock; page behind is inert but would still wheel-scroll */
.lf-modal-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 32px 24px 24px; text-align: center;
}
.lf-modal-card .btn { width: 100%; justify-content: center; }
.lf-modal-icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--navy);
  font-size: var(--fs-26); font-weight: 800; line-height: 1;
}
.lf-modal h3 { margin: 0; font-size: var(--fs-22); }
.lf-modal p { margin: 0; color: var(--navy-soft); }
.lf-modal-close {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; background: none; border-radius: 50%;
  cursor: pointer; color: var(--navy-soft); font-size: var(--fs-22); line-height: 1;
}
.lf-modal-close:hover { background: var(--blue-soft); }
.lf-modal-close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@keyframes lf-modal-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .lf-modal[open] { animation: none; }
}