/**
 * 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;
	/* width:100% so the form fills its container even where it is a shrink-to-fit
	   flex item (e.g. the builder's preview iframe body). Without it, the
	   container-type below collapses the form to its min content there. */
	width: 100%;
	max-width: 640px;
	margin: 0;
	/* Respond to the form's own width, not the viewport, so columns collapse
	   correctly in narrow containers and at any zoom level. */
	container-type: inline-size;
	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);
}

/* Inline layout: fields and the submit button share one row (e.g. a newsletter
   email + button). The status message drops to its own full-width line. */
.nxf-form.nxf-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--nxf-gap);
}
.nxf-form.nxf-inline .nxf-fields {
	flex: 1 1 240px;
}
.nxf-form.nxf-inline .nxf-submit {
	flex: 0 0 auto;
	width: auto;
	/* Match the input's line-height (buttons get UA line-height:normal), so the
	   button ends up the same height as the field and the two line up cleanly. */
	line-height: 1.5;
}
.nxf-form.nxf-inline .nxf-status {
	flex: 1 1 100%;
	order: 3;
}
/* Each field reserves an empty error line below the input (the 6px column gap).
   In inline mode that pushed the button below the input; collapse it so the
   button aligns to the input. The line reappears if a real error is shown. */
.nxf-form.nxf-inline .nxf-error:empty {
	display: none;
}

.nxf-field {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
/* Fields hidden by conditional logic (form.js sets [hidden]); keep it hidden
   even if a theme sets display on .nxf-field. */
.nxf-field[hidden] { display: none; }

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

/* When the form itself gets narrow, collapse to a single clean column: every
   column width goes full, and single-line layout stacks the fields with a
   full-width button below. Either the intended layout or one column, never a
   broken in-between. Container-query based, so it tracks the form's real width
   (narrow sidebars, zoom) rather than the viewport. */
@container (max-width: 480px) {
	.nxf-w-half,
	.nxf-w-third,
	.nxf-w-quarter { flex-basis: 100%; }

	.nxf-form.nxf-inline .nxf-fields { flex-basis: 100%; }
	.nxf-form.nxf-inline .nxf-submit {
		flex-basis: 100%;
		width: 100%;
		justify-content: center;
	}
}

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

/* Hide labels (form-level): keep them in the DOM for screen readers, just out
   of sight. Pair with a placeholder so the field stays clear. */
.nxf-form.nxf-hide-labels .nxf-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

.nxf-input {
	width: 100%;
	padding: var(--nxf-field-padding, 10px 12px);
	font-size: 1em;
	line-height: 1.5;
	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;
}

/* Normalize the native <select> so it matches the text inputs: same height
   (shared padding + line-height, no native chrome) and a consistent chevron. */
.nxf-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none" stroke="%235b6472" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1.5 6 6.5 11 1.5"/></svg>');
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.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;
}

/* ---- Pop-up display mode (native <dialog>) ---- */
/* The trigger sits outside .nxf-form, so it carries its own token fallbacks in
   case the active preset does not set them; when it does, the vars cascade from
   the .nxf-popup container (which gets the form's inline style vars). */
/* Block-level (not inline-block) so the wrapper participates in a block theme's
   constrained content layout the way the form wrapper does: block themes center
   content with margin-inline:auto, which cannot center an inline-block, so an
   inline-block trigger escapes to the page's left edge instead of sitting in the
   content column. */
.nxf-popup { display: block; }
.nxf-popup-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nxf-accent-contrast, #ffffff);
	background: var(--nxf-accent, #0b5cab);
	border: 0;
	border-radius: var(--nxf-radius, 8px);
	cursor: pointer;
	transition: filter 0.15s ease;
}
.nxf-popup-trigger:hover { filter: brightness(0.94); }
.nxf-popup-trigger:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--nxf-accent, #0b5cab) 40%, transparent);
	outline-offset: 2px;
}

dialog.nxf-dialog {
	position: fixed;
	margin: auto;                 /* centre for showModal() */
	width: min(520px, calc(100% - 32px));
	max-height: calc(100dvh - 48px);
	overflow: auto;
	padding: 32px 28px 28px;
	border: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}
dialog.nxf-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
/* The form inside the dialog should not add its own top margin. */
dialog.nxf-dialog .nxf-form-wrap { margin: 0; }

.nxf-dialog-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	color: #646970;
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}
.nxf-dialog-close:hover { background: #f0f0f1; color: #1e1e1e; }
.nxf-dialog-close:focus-visible { outline: 2px solid var(--nxf-accent, #0b5cab); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
	dialog.nxf-dialog[open] { animation: nxf-dialog-in 0.15s ease-out; }
	@keyframes nxf-dialog-in {
		from { opacity: 0; transform: translateY(6px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}