/**
 * Estat.OS — front-end form styles.
 * Loaded only on pages that actually contain a form.
 *
 * Layout model, borrowed from how Elementor thinks about forms:
 *   row    -> a flex line with a real gap (no padding hacks)
 *   column -> a flex-basis percentage, per device
 *   field  -> fills its column, with its own optional width
 *
 * Everything themeable is a custom property, so a theme can restyle the form
 * without fighting specificity.
 */

.estat-form {
	--estat-f-ink: #1d2327;
	--estat-f-muted: #6b747d;
	--estat-f-line: #cfd6dd;
	--estat-f-line-strong: #9aa5b1;
	--estat-f-accent: #2271b1;
	--estat-f-accent-ink: #135e96;
	--estat-f-danger: #b32d2e;
	--estat-f-danger-soft: #fdf0f0;
	--estat-f-good: #1c5c25;
	--estat-f-good-soft: #edfaef;
	--estat-f-field-bg: #fdfdfe;
	--estat-f-radius: 6px;
	--estat-f-gap: 16px;
	--estat-f-pad-y: 10px;
	--estat-f-pad-x: 12px;
	--estat-f-font: 1rem;
	--estat-f-border: 1px;
	--estat-f-family: inherit;
	--estat-f-label-size: 0.92rem;
	--estat-f-label-weight: 600;
	--estat-f-label-ink: inherit;
	--estat-f-btn-bg: var(--estat-f-accent);
	--estat-f-btn-ink: #f8fafd;
	--estat-f-btn-hover: var(--estat-f-accent-ink);
	--estat-f-btn-radius: 6px;
	--estat-f-btn-pad-y: 12px;
	--estat-f-btn-pad-x: 22px;
	--estat-f-btn-size: 1rem;
	--estat-f-small: 0.82rem;
	--estat-f-error: 0.85rem;
	--estat-f-heading: 1.05rem;
	--estat-f-section: 1.1rem;

	max-width: 100%;
	color: var(--estat-f-ink);
	font-family: var(--estat-f-family);
}

/* ------------------------------------------------------------------ Rows */

.estat-form .estat-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap, var(--estat-f-gap));
	margin-bottom: var(--gap, var(--estat-f-gap));
}

.estat-form .estat-row:last-child {
	margin-bottom: 0;
}

.estat-form .estat-row.is-align-start {
	align-items: flex-start;
}

.estat-form .estat-row.is-align-center {
	align-items: center;
}

.estat-form .estat-row.is-align-end {
	align-items: flex-end;
}

.estat-form .estat-row.is-align-stretch {
	align-items: stretch;
}

/* --------------------------------------------------------------- Columns */

/*
 * The gap is real, so the basis must subtract its share of it. Previously the
 * column had both a gap AND a padding-right, which double-counted the gutter
 * and made 50/50 columns wrap onto separate lines at some widths.
 */
.estat-form .estat-col {
	flex: 1 1 calc(var(--w, 100%) - var(--gap, var(--estat-f-gap)));
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--estat-f-gap);
}

@media (max-width: 960px) {
	.estat-form .estat-col {
		flex-basis: calc(var(--wt, 100%) - var(--gap, var(--estat-f-gap)));
	}
}

@media (max-width: 600px) {
	.estat-form .estat-row {
		gap: var(--gap-m, 12px);
		margin-bottom: var(--gap-m, 12px);
	}

	.estat-form .estat-col {
		flex-basis: calc(var(--wm, 100%) - var(--gap-m, 12px));
	}
}

/* ---------------------------------------------------------------- Fields */

.estat-form .estat-field {
	width: var(--fw, 100%);
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.estat-form .estat-label {
	display: block;
	font-weight: var(--estat-f-label-weight);
	margin-bottom: 6px;
	font-size: var(--estat-f-label-size);
	color: var(--estat-f-label-ink);
	line-height: 1.35;
}

.estat-form .estat-req {
	color: var(--estat-f-danger);
}

.estat-form .estat-opt {
	color: var(--estat-f-muted);
	font-weight: 400;
	font-size: var(--estat-f-small);
}

.estat-form .estat-input {
	width: 100%;
	box-sizing: border-box;
	padding: var(--estat-f-pad-y) var(--estat-f-pad-x);
	border: var(--estat-f-border) solid var(--estat-f-line);
	border-radius: var(--estat-f-radius);
	font-size: var(--estat-f-font);
	font-family: inherit;
	line-height: 1.45;
	background: var(--estat-f-field-bg);
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.estat-form .estat-input::placeholder {
	color: var(--estat-f-muted);
	opacity: 1;
}

.estat-form .estat-input:hover {
	border-color: var(--estat-f-line-strong);
}

.estat-form .estat-input:focus,
.estat-form .estat-input:focus-visible {
	outline: none;
	border-color: var(--estat-f-accent);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.22);
}

.estat-form .estat-input[aria-invalid="true"] {
	border-color: var(--estat-f-danger);
	background: var(--estat-f-danger-soft);
}

.estat-form .estat-input[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.2);
}

.estat-form textarea.estat-input {
	resize: vertical;
	min-height: 96px;
}

/* Three input heights, the way Elementor offers small / medium / large. */

.estat-form .estat-size-sm .estat-input {
	--estat-f-pad-y: 6px;
	--estat-f-pad-x: 10px;
	--estat-f-font: 0.9rem;
}

.estat-form .estat-size-lg .estat-input {
	--estat-f-pad-y: 15px;
	--estat-f-pad-x: 16px;
	--estat-f-font: 1.05rem;
}

.estat-form .estat-size-sm textarea.estat-input {
	min-height: 72px;
}

.estat-form .estat-size-lg textarea.estat-input {
	min-height: 132px;
}

.estat-form .estat-help {
	margin: 6px 0 0;
	font-size: var(--estat-f-small);
	color: var(--estat-f-muted);
	line-height: 1.4;
}

.estat-form .estat-error {
	margin: 6px 0 0;
	font-size: var(--estat-f-error);
	color: var(--estat-f-danger);
	font-weight: 500;
}

.estat-form .estat-error:empty {
	display: none;
}

/* --------------------------------------------------------------- Choices */

.estat-form .estat-choice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	line-height: 1.4;
	cursor: pointer;
}

.estat-form .estat-choice:last-child {
	margin-bottom: 0;
}

.estat-form .estat-choice input {
	flex: 0 0 auto;
	margin: 0;
	width: 18px;
	height: 18px;
	accent-color: var(--estat-f-accent);
}

/* ------------------------------------------------------ Headings & parts */

.estat-form .estat-form-heading {
	margin: 0 0 8px;
	font-size: var(--estat-f-heading);
	line-height: 1.3;
}

.estat-form .estat-form-paragraph {
	margin: 0;
	color: var(--estat-f-muted);
	line-height: 1.55;
}

.estat-form .estat-form-section {
	margin: 0 0 12px;
	font-size: var(--estat-f-section);
	line-height: 1.3;
}

.estat-form .estat-form-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.estat-form .estat-form-actions.is-center {
	justify-content: center;
}

.estat-form .estat-form-actions.is-right {
	justify-content: flex-end;
}

/* ---------------------------------------------------------- The button */

.estat-form .estat-btn-primary {
	background: var(--estat-f-btn-bg);
	border: 0;
	border-radius: var(--estat-f-btn-radius);
	color: var(--estat-f-btn-ink);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--estat-f-btn-size);
	font-weight: 600;
	line-height: 1.3;
	padding: var(--estat-f-btn-pad-y) var(--estat-f-btn-pad-x);
	transition: background-color 0.15s ease;
}

.estat-form .estat-btn-primary:hover {
	background: var(--estat-f-btn-hover);
}

.estat-form .estat-btn-primary:focus-visible {
	outline: 3px solid var(--estat-f-accent);
	outline-offset: 2px;
}

.estat-form .estat-btn-primary.is-full {
	flex: 1 1 100%;
	width: 100%;
}

.estat-form .estat-btn-primary[disabled] {
	cursor: default;
	opacity: 0.6;
}

/* --------------------------------------------------------------- Messages */

.estat-form .estat-form-messages:empty {
	display: none;
}

.estat-form .estat-form-messages {
	padding: 12px 14px;
	border-radius: var(--estat-f-radius);
	margin-bottom: var(--estat-f-gap);
	line-height: 1.45;
}

.estat-form .estat-form-messages.is-success {
	background: var(--estat-f-good-soft);
	border: 1px solid #6cc070;
	color: var(--estat-f-good);
}

.estat-form .estat-form-messages.is-error {
	background: var(--estat-f-danger-soft);
	border: 1px solid #d97b7b;
	color: #8a2020;
}

/* --------------------------------------------------------------- Spinner */

.estat-form .estat-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.estat-form .estat-form-spinner[hidden] {
	display: none;
}

.estat-form .estat-form-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--estat-f-line);
	border-top-color: var(--estat-f-accent-ink);
	border-radius: 50%;
	animation: estat-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.estat-form .estat-form-spinner {
		animation: none;
	}

	.estat-form .estat-input,
	.estat-form .estat-btn-primary {
		transition: none;
	}
}

/* ----------------------------------------------------- Per-device hiding */

.estat-form .estat-hide-desktop {
	display: none;
}

@media (max-width: 960px) {
	.estat-form .estat-hide-desktop {
		display: block;
	}

	.estat-form .estat-hide-tablet {
		display: none;
	}
}

@media (max-width: 600px) {
	.estat-form .estat-hide-tablet {
		display: block;
	}

	.estat-form .estat-hide-mobile {
		display: none;
	}

	/* Phones get finger-sized inputs whatever the chosen size. */
	.estat-form .estat-input {
		font-size: 16px;
		min-height: 44px;
	}
}