/*
 * The form button and its window (AIEO_Form_Button, 11.3.6). The button is the host's: under a block theme its
 * wp-element-button recipe wins (these rules sit in :where(), weight 0), under a theme without one (tagDiv) a quiet
 * default stands in. The window is a panel on Rooster Zero's tokens (the line, the panel's corner, the large shadow,
 * the focus ring), each with a fallback for a theme that has none.
 */
:where(.aieo-form-button-wrap) {
	margin-block: var(--wp--preset--spacing--40, 1rem);
}

:where(.aieo-form-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: var(--wp--custom--rooster--shape--control, 0);
	background: var(--wp--preset--color--contrast, #1f1f1f);
	color: var(--wp--preset--color--base, #fff);
	font: inherit;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

:where(.aieo-form-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 2px;
}

/*
 * The location's call and chat buttons beside the form's (11.3.6): one row, centred, on the desktop; one under the
 * other, as wide as the column, on a phone. Outlined in the theme's button outline, its shape, type and padding, so the
 * form's own button stays the one in colour; the icon (a phone, the app's mark) in the text's colour. Two classes, so
 * a theme's link colour and underline (a, a:hover) do not reach them.
 */
.aieo-form-button-wrap.has-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--3, 0.75rem);
}

.aieo-form-button-wrap .aieo-form-contact {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 2.75rem;
	/* The theme's button padding less the outline, so the two stand the same height. */
	padding: calc(0.8rem - 1px) calc(1.25rem - 1px);
	border: 1px solid var(--wp--custom--rooster--button--outline, currentColor);
	border-radius: var(--wp--custom--rooster--shape--button, var(--wp--custom--rooster--shape--control, 0));
	background: transparent;
	color: var(--wp--preset--color--fg, inherit);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
}

.aieo-form-button-wrap .aieo-form-contact:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.aieo-form-button-wrap .aieo-form-contact:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--rooster--focus-ring, 0 0 0 3px rgba(0, 102, 255, 0.4));
}

.aieo-form-contact__icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

@media (max-width: 600px) {
	.aieo-form-button-wrap.has-contact {
		flex-direction: column;
		align-items: stretch;
	}

	.aieo-form-button-wrap.has-contact > :is(.aieo-form-button, .aieo-form-contact) {
		width: 100%;
	}
}

.aieo-form-dialog {
	box-sizing: border-box;
	width: min(40rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	padding: 0;
	overflow: auto;
	border: 1px solid var(--wp--preset--color--line, rgba(0, 0, 0, 0.12));
	border-radius: var(--wp--custom--rooster--shape--panel, 12px);
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, inherit);
	box-shadow: var(--wp--custom--rooster--shadow--lg, 0 20px 50px rgba(0, 0, 0, 0.25));
}

.aieo-form-dialog::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 45%, transparent);
}

:root[data-rooster-scheme="dark"] .aieo-form-dialog::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--bg, #000) 75%, transparent);
}

.aieo-form-dialog__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1rem 1rem 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--line, rgba(0, 0, 0, 0.12));
	background: inherit;
}

.aieo-form-dialog__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1.3;
}

.aieo-form-dialog__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line, rgba(0, 0, 0, 0.12));
	border-radius: var(--wp--custom--rooster--shape--chip, 999px);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.aieo-form-dialog__close:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--rooster--focus-ring, 0 0 0 3px rgba(0, 102, 255, 0.4));
}

.aieo-form-dialog__body {
	padding: 1rem 1.5rem 1.5rem;
}

.aieo-form-dialog__body .aieo-form {
	margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.aieo-form-dialog[open] {
		animation: aieo-form-dialog-in 160ms ease-out;
	}
}

@keyframes aieo-form-dialog-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}