/*
 * Lead form — shared component.
 *
 * Structure and states only; every colour is a custom property with a light
 * default, so a host context re-skins the form by redefining ~10 variables
 * rather than the rules. The showcase decks map these to their dark palette
 * in css/ud-showcase.css.
 */

/* TEMP 2026-08-31: form hidden everywhere until FluentSMTP is configured on
   production. Remove this one rule to bring it back. */
.udlf-form{display:none !important}

.udlf-form{
  --lf-text:#14181f;
  --lf-label:#6b7280;
  --lf-field-bg:#fff;
  --lf-field-border:#d1d5db;
  --lf-field-focus-bg:#fff;
  --lf-accent:#0071b9;
  --lf-accent-hover:#0088da;
  --lf-accent-ink:#fff;
  --lf-note:#9ca3af;
  --lf-err:#c0392b;
  --lf-ok-bg:rgba(0,113,185,.08);
  --lf-ok-border:rgba(0,113,185,.4);

  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}

.udlf-fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.udlf-fld--wide{grid-column:1 / -1}
.udlf-fld label{
  font-family:"Google Sans",sans-serif;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--lf-label);
}
.udlf-fld input,
.udlf-fld select,
.udlf-fld textarea{
  font:inherit;font-size:15px;color:var(--lf-text);
  background:var(--lf-field-bg);border:1px solid var(--lf-field-border);border-radius:8px;
  padding:12px 14px;transition:border-color .3s,background .3s;
}
.udlf-fld textarea{resize:vertical;min-height:96px}
.udlf-fld input:focus,
.udlf-fld select:focus,
.udlf-fld textarea:focus{outline:none;border-color:var(--lf-accent);background:var(--lf-field-focus-bg)}

/* Honeypot: off-screen, never announced, never tab-stopped. A real visitor
   cannot reach it, a bot fills it, and the server drops anything that comes
   back with it set. */
.udlf-hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;opacity:0}

.udlf-foot{grid-column:1 / -1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.udlf-send{
  font:inherit;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  min-height:48px;padding:12px 30px;border-radius:6px;cursor:pointer;
  background:var(--lf-accent);color:var(--lf-accent-ink);border:1px solid var(--lf-accent);
  transition:background .3s,border-color .3s,opacity .3s;
}
.udlf-send:hover{background:var(--lf-accent-hover);border-color:var(--lf-accent-hover)}
.udlf-send[disabled]{opacity:.55;cursor:default}
.udlf-note{font-size:12px;color:var(--lf-note);max-width:44ch}

.udlf-consent{grid-column:1 / -1;margin:0;font-size:11px;line-height:1.5;color:var(--lf-note)}
.udlf-consent a{color:inherit;text-decoration:underline}

.udlf-err{grid-column:1 / -1;display:none;margin:0;font-size:14px;color:var(--lf-err)}
.udlf-form.is-err .udlf-err{display:block}

.udlf-done{
  grid-column:1 / -1;display:none;align-items:center;gap:12px;
  border:1px solid var(--lf-ok-border);background:var(--lf-ok-bg);
  border-radius:8px;padding:16px 18px;font-size:15px;color:var(--lf-text);
}
.udlf-form.is-sent .udlf-fld,
.udlf-form.is-sent .udlf-foot,
.udlf-form.is-sent .udlf-consent,
.udlf-form.is-sent .udlf-err{display:none}
.udlf-form.is-sent .udlf-done{display:flex}

@media (max-width:900px){
  .udlf-form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .udlf-fld input,
  .udlf-fld select,
  .udlf-fld textarea,
  .udlf-send{transition:none}
}