/**
 * Rooster One contact form — storefront styles.
 *
 * INHERIT THE THEME. Font, text colour and the button come from the theme (the
 * button carries both `wp-element-button` and `button`, so block themes and
 * classic/WooCommerce themes each style it their own way). Only the inputs get
 * a shape of their own: rounded, full width, a border that is a tint of the
 * current text colour so it works on light and dark backgrounds alike.
 *
 * Every value is a --aieo-cf-* variable, so a theme or Custom CSS can restyle
 * the form without fighting specificity.
 *
 * LAYOUT. With names="inline" (the default) first and last name sit side by
 * side when the FORM is wide enough (a container query, so a form in a narrow
 * sidebar stacks even on a desktop) and stack on phones; names="stacked" keeps
 * them one under the other everywhere.
 */

.aieo-cf {
	--aieo-cf-gap: 16px;
	--aieo-cf-radius: 8px;
	--aieo-cf-border: rgba(127, 127, 127, 0.45);
	--aieo-cf-input-bg: transparent;
	--aieo-cf-pad: 10px 12px;
	--aieo-cf-focus: currentColor;
	--aieo-cf-error: #b32d2e;
	--aieo-cf-success: #1a7f37;
	box-sizing: border-box;
	container-type: inline-size;
	margin: 0 0 1.5em;
	max-width: 100%;
}

/* Under the theme the form is as wide as its fields need, not the page's content width (1280 px on the demo: an
 * email field of 1280 px): one column of 520 px with the names side by side (FE-F2). */
html[data-rooster-design="theme"] .aieo-cf {
	max-width: 520px;
}

.aieo-cf *,
.aieo-cf *::before,
.aieo-cf *::after {
	box-sizing: border-box;
}

.aieo-cf__title {
	margin: 0 0 0.4em;
}

.aieo-cf__intro {
	margin: 0 0 1em;
}

.aieo-cf__form {
	display: flex;
	flex-direction: column;
	gap: var(--aieo-cf-gap);
	margin: 0;
}

.aieo-cf__row--names {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--aieo-cf-gap);
}

/* names="inline": side by side once the form is wide enough. names="stacked"
 * keeps the single column at every width. */
@container (min-width: 480px) {
	.aieo-cf--names-inline .aieo-cf__row--names {
		grid-template-columns: 1fr 1fr;
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 600px) {
		.aieo-cf--names-inline .aieo-cf__row--names {
			grid-template-columns: 1fr 1fr;
		}
	}
}

.aieo-cf__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
}

.aieo-cf__field > label {
	font-weight: 600;
	line-height: 1.3;
}

.aieo-cf__req {
	color: var(--aieo-cf-error);
}

.aieo-cf input[type="text"],
.aieo-cf input[type="email"],
.aieo-cf input[type="tel"],
.aieo-cf select,
.aieo-cf textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
}

/* Brief section 23: under the theme's design authority the fields, their
 * focus ring and the consent checkbox are the theme's. */
html:not([data-rooster-design="theme"]) .aieo-cf input[type="text"],
html:not([data-rooster-design="theme"]) .aieo-cf input[type="email"],
html:not([data-rooster-design="theme"]) .aieo-cf input[type="tel"],
html:not([data-rooster-design="theme"]) .aieo-cf select,
html:not([data-rooster-design="theme"]) .aieo-cf textarea {
	padding: var(--aieo-cf-pad);
	font: inherit;
	color: inherit;
	line-height: 1.4;
	background-color: var(--aieo-cf-input-bg);
	border: 1px solid var(--aieo-cf-border);
	border-radius: var(--aieo-cf-radius);
	box-shadow: none;
}

html:not([data-rooster-design="theme"]) .aieo-cf select {
	min-height: calc(1.4em + 22px);
}

/* The native dropdown list inherits the page colour; some themes paint it dark. */
.aieo-cf select option {
	color: initial;
	background: initial;
}

.aieo-cf textarea {
	min-height: 140px;
	resize: vertical;
}

html:not([data-rooster-design="theme"]) .aieo-cf input:focus,
html:not([data-rooster-design="theme"]) .aieo-cf select:focus,
html:not([data-rooster-design="theme"]) .aieo-cf textarea:focus {
	outline: 2px solid var(--aieo-cf-focus);
	outline-offset: 1px;
}

.aieo-cf [aria-invalid="true"] {
	border-color: var(--aieo-cf-error);
}

.aieo-cf__error {
	margin: 0;
	font-size: 0.875em;
	color: var(--aieo-cf-error);
}

.aieo-cf__error[hidden],
.aieo-cf__status:empty {
	display: none !important;
}

.aieo-cf__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	cursor: pointer;
}

.aieo-cf__consent input {
	margin: 0.25em 0 0;
	flex: 0 0 auto;
}

.aieo-cf__actions {
	margin: 0;
}

.aieo-cf__submit {
	cursor: pointer;
}

.aieo-cf__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.aieo-cf__status {
	margin: 0 0 var(--aieo-cf-gap);
	padding: 10px 14px;
	border-radius: var(--aieo-cf-radius);
	border-left: 4px solid currentColor;
	background: rgba(127, 127, 127, 0.08);
}

.aieo-cf__status:focus {
	outline: none;
}

.aieo-cf__status.is-success {
	color: var(--aieo-cf-success);
}

.aieo-cf__status.is-error {
	color: var(--aieo-cf-error);
}

/* Honeypot: off-canvas, never display:none (some bots skip hidden inputs). */
.aieo-cf__hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}