/* ============================================================================
   iz-forms.css — modular lead-form component (cascade-layer, hybrid).
   ----------------------------------------------------------------------------
   The fleet's forms are heterogeneous per-form (dark AND light, mixed within one
   site), so the dark-vs-light DECISION must be made at render time — CSS cannot.
   Split of concerns:
     * iz-forms.js (thin, self-guarding) = POLICY: for each lead form, decide if
       it needs darkening (light/blended/transparent fields on a dark card),
       compute the target shade from the form's own dark reference or its card,
       set it on the form as --iz-field-bg/--iz-field-text, and add data-iz-dark.
     * THIS FILE = MECHANISM: styles every field/prefix of a marked form from those
       per-form variables, inside @layer iz-forms so it wins the legacy unlayered
       !important war WITHOUT specificity hacks (verified: layered !important beats
       unlayered !important). Light forms are never marked -> never touched.
   Reversible: dequeue the loader. Replaces iz-contact-input-unify + iz-vdp-input-dark-match.
   ============================================================================ */
@layer iz-forms {

  /* real fields of a form the policy marked dark -> the form's own dark palette */
  form[data-iz-dark] :is(input,select,textarea):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]){
    background:var(--iz-field-bg)!important;
    color:var(--iz-field-text,#fff)!important;
    -webkit-text-fill-color:var(--iz-field-text,#fff)!important;   /* autofill legibility */
    border-color:color-mix(in srgb, var(--iz-field-text,#fff) 16%, transparent)!important;
  }

  /* dropdown option list */
  form[data-iz-dark] select option{ background:var(--iz-field-bg)!important; color:var(--iz-field-text,#fff)!important; }

  /* placeholders legible on the dark field */
  form[data-iz-dark] :is(input,textarea)::placeholder{ color:var(--iz-field-text,#fff)!important; opacity:.55!important; }

  /* phone "+1" prefix: match the field bg (keeps its own accent text colour) */
  form[data-iz-dark] .dag-phone-prefix, form[data-iz-dark] .phone-prefix{
    background:var(--iz-field-bg)!important;
    border-color:color-mix(in srgb, var(--iz-field-text,#fff) 16%, transparent)!important;
  }

}