/* The inline check's own furniture.
   Deliberately not styled like a Ninja Forms error: a warning that looks like
   an error reads as "you must fix this", which is wrong for a note saying the
   quote will be emailed to the address the visitor just typed. */

.ici-zb-note {
	/* The theme lays .field-wrap out as an ordered flex row — label 5,
	   description 10, element 15 — so a child with no order of its own sorts to
	   the front and the note renders above the label, beside it. Anything meant
	   to sit under the input needs an order past 15, and its own row. Harmless
	   where the wrapper is not a flex container: both properties are ignored. */
	order: 20;
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	margin-top: .4em;
	font-size: .875em;
	line-height: 1.45;
	color: #4a545f;
}

/* Scoped and element-qualified on purpose. The theme styles every <button> on
   the page as a filled dark pill, which beat a lone class selector — and a
   correction that looks like a label instead of a control does not get clicked,
   which is the only thing that justifies Suggest refusing the submission at all.
   The longhands below are the properties the theme sets globally; each one is a
   reset, not a preference. */
.nf-form-cont button.ici-zb-fix {
	display: inline-block;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: .25em .8em;
	font: inherit;
	font-size: .95em;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: #0b6270;
	background: transparent;
	background-image: none;
	border: 1px solid currentColor;
	border-radius: 3px;
	box-shadow: none;
	cursor: pointer;
}

.nf-form-cont button.ici-zb-fix:hover,
.nf-form-cont button.ici-zb-fix:focus-visible {
	color: #0b6270;
	background: #e0eff1;
}

/* Spinner on the field itself rather than a separate line, so nothing below
   the input moves while a check is in flight. */
.ici-zb-checking .nf-field-element {
	position: relative;
}

.ici-zb-checking .nf-field-element::after {
	content: "";
	position: absolute;
	top: 50%;
	right: .75em;
	width: .85em;
	height: .85em;
	margin-top: -.425em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: .5;
	animation: ici-zb-spin .7s linear infinite;
}

@keyframes ici-zb-spin {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.ici-zb-checking .nf-field-element::after {
		animation: none;
		border-top-color: currentColor;
		opacity: .3;
	}
}