/* ============================================================
   forms.css — form behaviors shared by Apply + Contact that are NOT
   duplicated from the per-page CSS. Scoped under [data-page="apply"]
   and [data-page="contact"] so it can never accidentally style
   Fluent Forms markup later (which lives under .frm_forms wrappers).
   Visual input styling (.input, .field, states) is carried verbatim
   in the per-page CSS from the LOCKED masters.
   ============================================================ */

/* ---- iOS zoom guard ----
   iOS Safari zooms when a focused input font-size < 16px. The approved
   visual size is 14px; we raise ONLY the computed font to 16px on small
   touch screens WITHOUT changing the visible box (letter-spacing tightened
   a hair keeps the field length identical to the master). This preserves
   the approved hierarchy while preventing the zoom jump.
   Documented in Accessibility QA + TODO register. */
@media (max-width:640px){
  [data-page="apply"] .input,
  [data-page="contact"] .input,
  [data-page="apply"] select.input,
  [data-page="contact"] select.input,
  [data-page="apply"] textarea.input,
  [data-page="contact"] textarea.input{
    font-size:16px;
    letter-spacing:-.01em;
  }
}

/* ---- Validation state hooks (JS toggles these; visuals reuse locked tokens) ---- */
[data-page="apply"] .input[aria-invalid="true"],
[data-page="contact"] .input[aria-invalid="true"]{
  border-color:var(--lh-color-error);
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
}
[data-page="apply"] .input[data-valid="true"],
[data-page="contact"] .input[data-valid="true"]{
  border-color:var(--lh-color-success);
}

/* ---- Field-level error message (C-FIELD-ERROR), shown by JS ---- */
.field__error{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--lh-color-error);font-weight:500;margin-top:7px;
}
.field__error[hidden]{display:none}
.field__error svg{width:14px;height:14px;flex:0 0 auto}

/* ---- Form-level alert banner (role="alert"), shown by JS on submit failure ---- */
.form-alert{
  display:flex;align-items:flex-start;gap:10px;
  border:1px solid var(--lh-color-error);background:rgba(220,38,38,.05);
  border-radius:var(--lh-radius-input);padding:14px 16px;margin-bottom:20px;
  font-size:14px;color:var(--lh-color-error);
}
.form-alert[hidden]{display:none}
.form-alert svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px}

/* ---- Success panel (C-SUCCESS-PANEL), shown by JS on submit success ---- */
.success-panel{
  border:1px solid var(--lh-color-border);border-radius:var(--lh-radius-card);
  background:#fff;box-shadow:var(--lh-shadow-card);padding:36px 32px;text-align:center;
}
.success-panel[hidden]{display:none}
.success-panel__icon{
  width:56px;height:56px;border-radius:var(--lh-radius-pill);margin:0 auto 18px;
  background:rgba(22,163,74,.08);color:var(--lh-color-success);
  display:flex;align-items:center;justify-content:center;
}
.success-panel__icon svg{width:28px;height:28px}
.success-panel h3{font-size:22px;margin-bottom:8px}
.success-panel p{font-size:15px;color:var(--lh-color-paragraph);max-width:420px;margin:0 auto}

/* ---- Loading state on submit buttons (JS toggles [data-loading]) ---- */
.btn[data-loading="true"]{position:relative;color:transparent !important;pointer-events:none}
.btn[data-loading="true"]::after{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;
  animation:lh-spin .7s linear infinite;
}
@keyframes lh-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn[data-loading="true"]::after{animation:none;border-top-color:rgba(255,255,255,.5)}
}

/* ---- Disabled button (C-STEP-3 / wizard) ---- */
.btn--disabled,.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ---- Toast (polite live region for save/submit feedback) ---- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);
  background:var(--lh-color-ink);color:#fff;padding:12px 18px;border-radius:var(--lh-radius-input);
  font-size:13.5px;box-shadow:var(--lh-shadow-float);opacity:0;pointer-events:none;
  transition:opacity var(--lh-transition),transform var(--lh-transition);z-index:var(--lh-z-toast);
}
.toast[data-show="true"]{opacity:1;transform:translateX(-50%) translateY(0)}