/**
 * Next Form — scoped front-end styles.
 *
 * Everything lives under .nxf-form and is driven by CSS custom properties so
 * presets and per-form overrides are pure variable swaps. A hard reset keeps
 * theme CSS from distorting the templates (the locked "scoped styles" decision).
 */

.nxf-form {
	/* Default variable bundle (minimal-light); presets override these. */
	--nxf-accent: #0b5cab;
	--nxf-accent-contrast: #ffffff;
	--nxf-radius: 8px;
	--nxf-gap: 18px;
	--nxf-font-size: 16px;
	--nxf-font-family: inherit;
	--nxf-label-weight: 600;
	--nxf-field-padding: 10px 12px;
	--nxf-field-bg: #ffffff;
	--nxf-field-border: #c7ccd1;
	--nxf-field-border-focus: var(--nxf-accent);
	--nxf-text: #1e2327;
	--nxf-muted: #646970;
	--nxf-error: #d63638;
	--nxf-success: #007a2f;

	box-sizing: border-box;
	max-width: 640px;
	margin: 0;
	color: var(--nxf-text);
	font-size: var(--nxf-font-size);
	font-family: var(--nxf-font-family);
	line-height: 1.5;
}

.nxf-form *,
.nxf-form *::before,
.nxf-form *::after {
	box-sizing: border-box;
}

.nxf-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nxf-gap);
}

.nxf-field {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.nxf-w-half { flex-basis: calc(50% - (var(--nxf-gap) / 2)); }
.nxf-w-third { flex-basis: calc(33.333% - (var(--nxf-gap) * 2 / 3)); }

@media (max-width: 480px) {
	.nxf-w-half,
	.nxf-w-third { flex-basis: 100%; }
}

.nxf-label {
	font-weight: var(--nxf-label-weight);
	font-size: 0.95em;
}

.nxf-required { color: var(--nxf-error); }

.nxf-input {
	width: 100%;
	padding: var(--nxf-field-padding, 10px 12px);
	font-size: 1em;
	font-family: inherit;
	color: var(--nxf-text);
	background: var(--nxf-field-bg);
	border: 1px solid var(--nxf-field-border);
	border-radius: var(--nxf-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nxf-input:focus {
	outline: none;
	border-color: var(--nxf-field-border-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nxf-accent) 25%, transparent);
}

.nxf-textarea { resize: vertical; min-height: 96px; }

.nxf-fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

.nxf-heading { margin: 8px 0 0; font-size: 1.25em; }
.nxf-paragraph { color: var(--nxf-muted); }

/* Honeypot — visually hidden but reachable by bots. */
.nxf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nxf-error {
	color: var(--nxf-error);
	font-size: 0.85em;
	min-height: 0;
}
.nxf-field.has-error .nxf-input { border-color: var(--nxf-error); }

.nxf-status {
	margin-top: var(--nxf-gap);
	padding: 12px 14px;
	border-radius: var(--nxf-radius);
	display: none;
}
.nxf-status.is-visible { display: block; }
.nxf-status.is-success { background: color-mix(in srgb, var(--nxf-success) 12%, transparent); color: var(--nxf-success); }
.nxf-status.is-error { background: color-mix(in srgb, var(--nxf-error) 12%, transparent); color: var(--nxf-error); }

.nxf-submit {
	margin-top: var(--nxf-gap);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	font-size: 1em;
	font-weight: 600;
	color: var(--nxf-accent-contrast);
	background: var(--nxf-accent);
	border: 0;
	border-radius: var(--nxf-radius);
	cursor: pointer;
	transition: filter 0.15s ease;
}
.nxf-submit:hover { filter: brightness(0.94); }
.nxf-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--nxf-accent) 40%, transparent); outline-offset: 2px; }
.nxf-submit[disabled] { opacity: 0.65; cursor: default; }

.nxf-spinner {
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	display: none;
}
.nxf-form.is-submitting .nxf-spinner {
	display: inline-block;
	animation: nxf-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.nxf-form.is-submitting .nxf-spinner { animation: none; }
	.nxf-input { transition: none; }
}

.nxf-captcha { margin-top: var(--nxf-gap); }

/* Preset modifier classes (looks the CSS variables alone can't express). */
.nxf-preset-boxed-card {
	padding: 28px;
	background: color-mix(in srgb, var(--nxf-field-bg) 92%, #000 2%);
	border: 1px solid var(--nxf-field-border);
	border-radius: calc(var(--nxf-radius) + 4px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.nxf-preset-underline-classic .nxf-input {
	border-width: 0 0 2px 0;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}
.nxf-preset-underline-classic .nxf-input:focus {
	box-shadow: none;
	border-bottom-color: var(--nxf-accent);
}

.nxf-preset-minimal-dark { color: var(--nxf-text); }

/* Field-style overrides from Customize (form-level; placed last so they win). */
.nxf-fs-boxed .nxf-input {
	border-width: 1px;
	border-radius: var(--nxf-radius);
	background: var(--nxf-field-bg);
}
.nxf-fs-underline .nxf-input {
	border-width: 0 0 2px 0;
	border-radius: 0;
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}
.nxf-fs-underline .nxf-input:focus {
	box-shadow: none;
	border-bottom-color: var(--nxf-accent);
}
.nxf-fs-filled .nxf-input {
	border-color: transparent;
	background: color-mix(in srgb, var(--nxf-field-bg) 100%, #000 6%);
}

/* Full-width submit button (form-level). */
.nxf-btn-full .nxf-submit {
	display: flex;
	width: 100%;
	justify-content: center;
}