/* Form validation UX (forms-ux.js): room for the sticky header when a field or notice is scrolled into view,
   error colour on invalid fields, inline messages, busy submit button. Colours from the house tokens. */

form[data-ehz-ux] :is(input, select, textarea, fieldset, .ehz-field, .ehz-contact__field, .ehz-login__row, .form-row, .ehz-gate__field, .ehz-invites__field),
:is(.woocommerce-notices-wrapper, .woocommerce-error, .ehz-notice, .ehz-contact__errors, .ehz-portal__msg, .ehz-gate__msg) {
	scroll-margin-top: 7rem;
}

/* Block checkout: WooCommerce scrolls to the first invalid field itself; keep it clear of the header as well. */
.wp-block-woocommerce-checkout :is(input, select, textarea, .wc-block-components-validation-error) {
	scroll-margin-top: 7rem;
}

form[data-ehz-ux] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)[aria-invalid="true"] {
	border-color: var(--ehz-error, #a63b2e);
	box-shadow: 0 0 0 1px var(--ehz-error, #a63b2e);
}

form[data-ehz-ux] input:is([type="checkbox"], [type="radio"])[aria-invalid="true"] {
	outline: 2px solid var(--ehz-error, #a63b2e);
	outline-offset: 2px;
}

.ehz-field-error {
	display: block;
	margin: .35rem 0 0;
	color: var(--ehz-error, #a63b2e);
	font-size: var(--ehz-size-small, .875rem);
	line-height: 1.45;
}

.ehz-field-error[hidden] { display: none; }

/* Busy: the clicked button keeps its place, dims a little and shows a small spinner. */
form[data-ehz-busy] :is(button, input[type="submit"])[aria-disabled="true"] { cursor: progress; }

form[data-ehz-busy] .is-busy {
	opacity: .75;
	pointer-events: none;
}

form[data-ehz-busy] button.is-busy::after {
	content: "";
	display: inline-block;
	width: .9em;
	height: .9em;
	margin-left: .55em;
	vertical-align: -.12em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ehz-forms-spin .7s linear infinite;
}

@keyframes ehz-forms-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	form[data-ehz-busy] button.is-busy::after { animation-duration: 2s; }
}

/* Matching funnel and chat: the "please choose" hint reads as an error. */
.ehz-funnel__status.is-error,
.ehz-chat__status.is-error { color: var(--ehz-error, #a63b2e); }