/*
 * Aelia inquiry forms.
 *
 * Uses the theme's theme.json CSS custom properties so forms stay on-brand even
 * though they're rendered by the mu-plugin. Degrades fully without JS: all steps
 * are visible until forms.js opts the form into stepper mode.
 */

.aelia-form {
	max-width: 640px;
}

.aelia-field {
	margin: 0 0 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.aelia-field label,
.aelia-checks legend,
.aelia-step legend {
	font-family: var(--wp--preset--font-family--text, sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	color: var(--wp--preset--color--ink, #2a2724);
}

.aelia-field input,
.aelia-field select,
.aelia-field textarea {
	font: inherit;
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid rgba(42, 39, 36, 0.25);
	border-radius: 4px;
	background: var(--wp--preset--color--marble, #fbf9f5);
	color: var(--wp--preset--color--ink, #2a2724);
}

.aelia-field input:focus,
.aelia-field select:focus,
.aelia-field textarea:focus {
	border-color: var(--wp--preset--color--aegean, #1f4e5f);
	outline: 2px solid var(--wp--preset--color--terracotta, #c2603c);
	outline-offset: 1px;
}

.aelia-field__help {
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-muted, #6b635a);
}

.aelia-req {
	color: var(--wp--preset--color--terracotta, #c2603c);
}

/* Honeypot — kept out of view and out of the a11y tree. */
.aelia-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Steps */
.aelia-step {
	border: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.aelia-step legend {
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
	font-weight: 500;
	margin-bottom: 0.75rem;
	display: block;
}

.aelia-step legend .aelia-eyebrow {
	display: block;
	margin-bottom: 0.25rem;
}

.aelia-checks {
	border: 1px solid rgba(42, 39, 36, 0.12);
	border-radius: 12px;
	padding: 1rem;
	margin: 0 0 1.1rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem 1rem;
}

.aelia-checks legend {
	padding: 0 0.4rem;
}

.aelia-check,
.aelia-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 0.95rem;
}

.aelia-form__consent {
	margin: 1.25rem 0;
}

.aelia-step__nav {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

/* Stepper mode (JS on): show only the active step + a progress indicator. */
.aelia-form.is-stepper .aelia-step {
	display: none;
}

.aelia-form.is-stepper .aelia-step.is-active {
	display: block;
}

.aelia-progress {
	height: 3px;
	background: rgba(176, 141, 76, 0.25);
	border-radius: 2px;
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.aelia-progress__bar {
	height: 100%;
	width: 33%;
	background: var(--wp--preset--color--brass, #b08d4c);
	transition: width 300ms ease;
}

/* Buttons */
.aelia-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--text, sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.85rem 1.5rem;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
}

.aelia-btn--primary {
	background: var(--wp--preset--color--aegean, #1f4e5f);
	color: var(--wp--preset--color--marble, #fbf9f5);
}

.aelia-btn--primary:hover,
.aelia-btn--primary:focus {
	background: var(--wp--preset--color--ink, #2a2724);
}

.aelia-btn--ghost {
	background: transparent;
	border-color: rgba(42, 39, 36, 0.4);
	color: var(--wp--preset--color--ink, #2a2724);
}

.aelia-btn--whatsapp {
	background: #128c7e;
	color: #fff;
}

.aelia-btn--whatsapp:hover,
.aelia-btn--whatsapp:focus {
	background: #0c6b5f;
}

.aelia-form--sent {
	border: 1px solid rgba(176, 141, 76, 0.35);
	border-radius: 12px;
	padding: 2rem;
	background: var(--wp--preset--color--marble, #fbf9f5);
}

@media (width <= 600px) {
	.aelia-checks {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aelia-progress__bar {
		transition: none;
	}
}