/**
 * Minty Media Elementor Forms Addon - inline error messages, frontend.
 *
 * @package MintyMedia\ElementorFormsAddon
 * @version 1.12.6
 */

/* Set on every group so the Style tab can write to one place. Nothing is drawn
   from these on a field that is not marked. */
.elementor-field-group {
	--mmefa-error: #b00020;
	--mmefa-error-width: 2px;
	--mmefa-error-offset: 0px;
}

/* The message carries Elementor's own message classes, so its colour and its
   lettering come from the theme. Only where it sits is set here: on a line of
   its own, under the field. */
.elementor-field-group .mmefa-error {
	flex: 0 0 100%;
	width: 100%;
	margin-top: 6px;
}

/* Nothing at all is put on a field that is not marked, not even a see-through
   ring. The outline is what the browser draws its focus ring with, so anything
   left there is picked up by the transition a theme puts on its inputs: the
   focus ring then faded away over that theme's own time instead of dropping
   when you clicked elsewhere, which reads as a ring turning up right after the
   click.

   The marking therefore appears at once. `transition: none` on a marked field
   keeps a theme from driving the colour there itself, which would let the ring
   crawl from the text colour to red. */
.elementor-field-group.mmefa-has-error .elementor-field.elementor-field.elementor-field,
.elementor-field-group.mmefa-has-error .mms-canvas,
.elementor-field-group.mmefa-has-error .mmfu-dropzone,
.elementor-field-group.mmefa-has-error .ml-dp-box {
	transition: none;
}

/* An outline rather than a border: a field may have no border at all, and a
   border rule of Elementor's own would win from this one anyway. An outline is
   drawn either way and nothing else on a form uses it. It sits around the
   field, outside its border, and takes no room in the layout, so nothing
   shifts when it appears. */
.elementor-field-group.mmefa-has-error .elementor-field,
.elementor-field-group.mmefa-has-error .mms-canvas,
.elementor-field-group.mmefa-has-error .mmfu-dropzone,
.elementor-field-group.mmefa-has-error .ml-dp-box {
	outline: var(--mmefa-error-width) solid var(--mmefa-error);
	outline-offset: var(--mmefa-error-offset);
	border-color: var(--mmefa-error);
}

/* The border of the field carries the same colour, so the marking reads as one
   line instead of a red ring around a line in another colour. Elementor writes
   that colour from the Style tab with a heavier selector than the rule above,
   so the class is named twice more to weigh heavier without reaching for
   !important. */
.elementor-field-group.mmefa-has-error .elementor-field.elementor-field.elementor-field {
	border-color: var(--mmefa-error);
}

/* The marking stays while the field has focus. The first field with an error is
   given focus, so hiding it there would blank out exactly the field being
   looked at. It disappears as soon as the field is changed. */