/*!
 * IZ Leadform Alerts — unified alert-canon styles (v1.2.3, marker IZ_LEADFORM_ALERTS_V1)
 * v1.2.3: hide rule extended to adopted prefixes (.dag-phone-prefix/.phone-prefix/.iz-phone-prefix--injected)
 *         so "+1" collapses on 11-digit leading-1 entry regardless of which prefix was adopted (REQ-L5-07).
 * ---------------------------------------------------------------------------------------
 * FRONT-END progressive-enhancement layer ONLY. Styles the canon class names emitted by the
 * adopter JS (iz-leadform-alerts.js). It changes NOTHING about form submission or delivery.
 *
 * Design goals:
 *   - THEME-AGNOSTIC: no single brand baked in. Every colour routes through a CSS custom
 *     property with a neutral fallback, so a theme can retint by redefining the property
 *     (e.g. `:root{ --iz-alert-text:#b00020 }`) without touching this file.
 *   - ADDITIVE / LOW-SPECIFICITY: single-class / class-scoped selectors so this layers over
 *     existing form CSS. It sets colours and toggles visibility only — it does NOT impose
 *     layout (widths, flex, grid) on fields, so it will not reflow a theme's form.
 *   - A11Y: error text meets WCAG AA contrast on light grounds and white; the error ring is an
 *     `outline` (not box-shadow) so the theme's own :focus box-shadow ring still shows through.
 *   - Only the canon class names are styled: .iz-field, .iz-field.is-error, .iz-field-error,
 *     .iz-form-alert, .iz-phone-cc (+ .hide), button.iz-submit-disabled.
 *
 * No @import, no @font-face, no web fonts.
 */

/* ---- Tunable tokens (override per-theme by redefining on :root or a form) ------------- */
:root {
	--iz-alert-text:   #c0392b;   /* error TEXT — ~4.8:1 on #fdecec and on white (WCAG AA)     */
	--iz-alert-border: #d33;      /* control border + ring in the error state                 */
	--iz-alert-bg:     #fdecec;   /* summary alert-box background                             */
}

/* Dark-ground families: lift the red so text stays legible on a dark form surface. */
@media (prefers-color-scheme: dark) {
	:root {
		--iz-alert-text:   #ff8a80;
		--iz-alert-border: #ff6b6b;
		--iz-alert-bg:     #3a1c22;
	}
}

/* ---- Field wrapper -------------------------------------------------------------------- */
/* .iz-field is a passthrough wrapper the adopter guarantees around each control. Left
   structurally unstyled so it never changes the theme's field layout. */

/* Error state: tint the control's border + an OUTLINE ring (coexists with the theme's own
   :focus box-shadow — we never clobber the focus indicator). Descendant selector so a control
   nested inside .iz-phone-cc / a theme sub-wrapper still lights up. */
.iz-field.is-error input,
.iz-field.is-error select,
.iz-field.is-error textarea {
	border-color: var(--iz-alert-border, #d33) !important;
	outline: 2px solid var(--iz-alert-border, #d33);
	outline-offset: 1px;
}

/* ---- Per-field error text (small.iz-field-error, role=alert aria-live=polite) --------- */
/* Hidden by default; revealed only while its wrapper carries .is-error. Self-contained colour
   (no dependence on the theme's text colour). */
.iz-field-error {
	display: none;
}
.iz-field.is-error .iz-field-error {
	display: block;
	margin-top: .4em;
	font-size: .8125em;   /* ~13px at a 16px base — relative so it tracks the theme */
	line-height: 1.35;
	color: var(--iz-alert-text, #c0392b);
}

/* ---- Form summary (div.iz-form-alert, role=alert aria-live=assertive, unique id/form) -- */
/* Contract: the adopter injects this element carrying the native `hidden` attribute, so it is
   HIDDEN BY DEFAULT. The adopter drives visibility by BOTH toggling `hidden` and the
   `.iz-form-alert--show` class; the two rules below are consistent (hidden wins when set,
   --show forces display when the attribute is cleared — defeating a theme `display:none`). */
.iz-form-alert {
	margin: 0 0 1em;
	padding: .7em 1em;
	border: 1px solid var(--iz-alert-border, #d33);
	border-left-width: 4px;
	border-radius: 6px;
	background: var(--iz-alert-bg, #fdecec);
	color: var(--iz-alert-text, #c0392b);
	font-size: .9375em;   /* ~15px — relative */
	line-height: 1.4;
}
.iz-form-alert[hidden] {
	display: none !important;
}
.iz-form-alert.iz-form-alert--show {
	display: block !important;
}

/* ---- Phone country-code prefix (span.iz-phone-cc containing "+1") --------------------- */
.iz-phone-cc {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-weight: 700;
	opacity: .75;
}
/* v1.2.3: the JS toggles `.hide` on whatever prefix element is in use — which, per REQ-L5-07, may be
   an ADOPTED theme/engine prefix (.dag-phone-prefix / .phone-prefix / .iz-phone-prefix--injected), not
   our own .iz-phone-cc. Scope the hide to all of them so "+1" collapses on an 11-digit leading-1 entry
   regardless of which prefix was adopted (the retired engine hid via .dag-phone-wrap.no-prefix; that
   CSS left with it, so without this the adopted badge stayed visible). */
.iz-phone-cc.hide,
.dag-phone-prefix.hide,
.phone-prefix.hide,
.iz-phone-prefix--injected.hide {
	display: none !important;
}

/* ---- Disabled submit while any field is in error ------------------------------------- */
/* The adopter disables the button AND adds this class. !important + a :disabled target so a
   theme's own primary-button styling (often higher specificity) can't erase the cue. */
button.iz-submit-disabled,
input[type="submit"].iz-submit-disabled,
.iz-submit-disabled[type="submit"],
button.iz-submit-disabled:disabled,
input.iz-submit-disabled:disabled {
	opacity: .55 !important;
	cursor: not-allowed !important;
	filter: saturate(.6) !important;
}

/* ---- REQ-L7-21 (canon): phone char-counter overlap ------------------------------------
   The theme's dag-frontend.js appends a `.char-counter` ("14/20") to the PHONE field — even though its
   own source comments say the phone is "deliberately skipped" — and it lands on top of the "Format: (555)
   123-4567 — 10 digits" help text. An INHERITED defect (every dag clone gets it), so it is fixed once here
   in the canon, never per-root. A running character count is meaningless on a fixed-format phone number,
   so we suppress the PHONE counter (restoring dag-frontend's own intent) — this is theme-adaptive by
   construction (nothing to lay out or colour, works light/dark/square/rounded) and generalises the per-
   root nylemax fix without its hardcoded light-theme badge. Scoped to the phone field: the counter is
   either inside .dag-phone-wrap or a sibling after it in the field, so both are matched; a legitimate
   message-field counter (in a field WITHOUT a .dag-phone-wrap) is untouched. */
.dag-phone-wrap .char-counter,
.dag-phone-wrap ~ .char-counter {
	display: none !important;
}