/* Error state of fields, inline error messages per field. */

.ec-form .ec-field-error {
	border-color: var( --ec-error-color, #d63638 ) !important;
}

/* The message sits outside the flow (absolute below the field) so the height of .ec-form-field does
   not change — icons in the field are positioned relative to that height and would otherwise shift.
   The space for it comes from a margin below the field (margin does not count towards the height of
   the field itself). */
.ec-form .ec-form-field {
	position: relative;
}

.ec-form .ec-form-field:has( .ec-error-message ) {
	margin-bottom: 1.25rem;
}

.ec-form .ec-error-message {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.5rem;
	color: var( --ec-error-color, #d63638 );
	font-size: 0.875rem;
	line-height: 1.2;
}