/* ============================================================================
   iz-forms.css — modular lead-form + storefront component (cascade-layer, hybrid).
   ----------------------------------------------------------------------------
   Forms are heterogeneous per-form (dark AND light mixed within one site), so the
   dark-vs-light DECISION is made at render time by iz-forms.js (POLICY): it marks a
   form data-iz-dark and sets --iz-field-bg/--iz-field-text only when the form needs
   it. THIS FILE is the MECHANISM: it styles marked forms from those per-form
   variables inside @layer iz-forms, which beats the legacy UNLAYERED !important war
   WITHOUT specificity hacks (verified: layered !important > unlayered !important).
   Consolidates (2026-07-25): dark-input styling + autofill legibility + monthly-
   payment hide. Phone radius-match + autofill text-fill live in iz-forms.js.
   (iz-phone-collapse-fix kept separate — it is a golden birth-verify REQ canon.)
   Reversible: dequeue the loader.
   ============================================================================ */
@keyframes iz-autofill-hook{ from{} to{} }

@layer iz-forms {

  /* ---- lead-form fields of a policy-marked dark form -> 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;
    border-color:color-mix(in srgb, var(--iz-field-text,#fff) 16%, transparent)!important;
  }
  form[data-iz-dark] select option{ background:var(--iz-field-bg)!important; color:var(--iz-field-text,#fff)!important; }
  form[data-iz-dark] :is(input,textarea)::placeholder{ color:var(--iz-field-text,#fff)!important; opacity:.55!important; }
  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;
  }

  /* ---- autofill legibility: keep each field's OWN background (Chrome would otherwise paint its
     autofill bg -> value invisible on a dark field). The 600000s transition makes the autofill bg
     change never visually apply; the keyframe hook lets iz-forms.js set the text-fill to the field's
     own colour. Global (dark and light forms). ---- */
  form :is(input,textarea,select):-webkit-autofill,
  form :is(input,textarea,select):-webkit-autofill:hover,
  form :is(input,textarea,select):-webkit-autofill:focus,
  form :is(input,textarea,select):-webkit-autofill:active{
    transition:background-color 600000s 0s, color 600000s 0s !important;
    animation-name:iz-autofill-hook;
  }

  /* ---- storefront: hide the "From only: $X Per Month + tax, tag, & title fees" block (owner 2026-07-23) ---- */
  .dag-monthly, .cro-vdp__headprice .mo, .cro-leadcard__price .mo, .dag-payment-estimator, [class*="payment-estimator"]{ display:none!important; }

}