/**
 * CAMRED Ninja Forms — Option B design system overrides.
 * Scoped to .nf-form-cont; loads after Ninja Forms display styles.
 */

/* —— Form shell —— */

.nf-form-cont,
.nf-form-cont .ninja-forms-form-wrap {
	font-family: var(--wp--preset--font-family--inclusive-sans, "Inclusive Sans", system-ui, sans-serif);
	color: var(--md-color-contrast, #1c1b1a);
	--md-form-field-gap: 2.25rem;
	--md-form-label-gap: 0.25rem;
}

.nf-form-cont .nf-form-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

/*
 * Space between fields — gap from the bottom of one field box (and any
 * error text) to the next field's label.
 *
 * Do NOT use .nf-field-container:last-child — in NF3 each nf-field holds a
 * single container, so every container matches :last-child and margin was
 * zeroed. Target nf-field siblings instead.
 */
.nf-form-cont nf-fields-wrap > nf-field:not(:last-child) > .nf-field-container,
.nf-form-cont .nf-form-content > .nf-field-container:not(.submit-wrap):not(.hidden-container):not(.hr-container):not(:last-child) {
	clear: both;
	margin-top: 0 !important;
	margin-bottom: var(--md-form-field-gap, 2.25rem) !important;
}

.nf-form-cont .nf-field-container.hidden-container,
.nf-form-cont .nf-field-container.hr-container,
.nf-form-cont .nf-field-container.submit-wrap,
.nf-form-cont nf-fields-wrap > nf-field:last-child > .nf-field-container {
	margin-bottom: 0 !important;
}

@media (max-width: 899px) {
	.nf-form-cont,
	.nf-form-cont .ninja-forms-form-wrap {
		--md-form-field-gap: 1.25rem;
	}
}

/* —— Labels —— */

.nf-form-cont .nf-field-label .nf-label-span,
.nf-form-cont .nf-field-label label,
.nf-form-cont .nf-form-content label {
	display: block;
	margin: 0 0 var(--md-form-label-gap, 0.25rem);
	padding: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--md-color-contrast, #1c1b1a);
}

/*
 * Required asterisk — every field is already `required`/`aria-required` on
 * the input itself, so the symbol is a purely visual duplicate. Hiding it
 * removes the clutter without touching form validation or a11y semantics.
 * If a label's asterisk is typed directly into the label text in Ninja
 * Forms admin (not this symbol span), it won't be caught here — edit the
 * label text in NF admin for those fields instead.
 */
.nf-form-cont .ninja-forms-req-symbol {
	display: none;
	color: var(--md-color-contrast, #1c1b1a);
	font-weight: 700;
}

.nf-form-cont .nf-field-description {
	margin: 0.35rem 0 0;
	font-size: 0.925rem;
	line-height: 1.45;
	color: color-mix(in srgb, var(--md-color-contrast, #1c1b1a) 72%, transparent);
}

/* Required-field legend — redundant now the per-label asterisk is hidden too */
.nf-form-cont .nf-form-fields-required {
	display: none;
}

/* —— Text inputs, textarea, select —— */

.nf-form-cont {
	--md-color-error-base: var(--md-color-primary, #f579f5);
	--md-color-error: var(--md-color-primary, #f579f5);
	--md-color-error-on-tint: var(--md-color-primary, #f579f5);
	--md-form-bg: var(--md-color-subtle, #f3f3f3);
	--md-form-bg-hover: #e8e8e8;
	--md-form-bg-focus: var(--md-form-bg);
	--md-form-bg-error: color-mix(in srgb, var(--md-color-error-base) 16%, var(--md-color-subtle, #f3f3f3));
	--md-form-bg-error-focus: color-mix(in srgb, var(--md-color-error-base) 24%, var(--md-color-surface, #fff));
	/* Focus — ambient drop shadow only (no ring that reads as a border). */
	--md-form-focus-shadow: 0 6px 18px rgba(28, 27, 26, 0.12);
	--md-form-focus-shadow-error: 0 6px 18px rgba(28, 27, 26, 0.12);
}

.nf-form-cont .nf-form-content input.ninja-forms-field:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-form-content textarea.ninja-forms-field,
.nf-form-cont .nf-form-content select.ninja-forms-field,
.nf-form-cont .nf-form-content .list-select-wrap .nf-field-element > div {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--md-color-contrast, #1c1b1a);
	background-color: var(--md-form-bg);
	border: none !important;
	border-color: transparent !important;
	border-radius: var(--md-radius, 0.5rem);
	outline: none !important;
	box-shadow: none !important;
	/* Focus shadow is the focus indicator: keep its fade at or under 0.1s. */
	transition:
		background-color var(--md-transition-duration, 0.2s) var(--md-transition-ease, ease),
		color var(--md-transition-duration, 0.2s) var(--md-transition-ease, ease),
		box-shadow 0.1s var(--md-transition-ease, ease);
}

.nf-form-cont .nf-form-content input.ninja-forms-field:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-form-content select.ninja-forms-field:not([multiple]) {
	min-height: 2.75rem;
	height: auto;
}

.nf-form-cont .nf-form-content textarea.ninja-forms-field {
	min-height: 9rem;
	height: auto;
	resize: vertical;
}

.nf-form-cont .nf-form-content input.ninja-forms-field::placeholder,
.nf-form-cont .nf-form-content textarea.ninja-forms-field::placeholder {
	color: color-mix(in srgb, var(--md-color-contrast, #1c1b1a) 55%, transparent);
	opacity: 1;
}

.nf-form-cont .nf-form-content input.ninja-forms-field:hover:not(:disabled):not([readonly]),
.nf-form-cont .nf-form-content textarea.ninja-forms-field:hover:not(:disabled):not([readonly]),
.nf-form-cont .nf-form-content select.ninja-forms-field:hover:not(:disabled),
.nf-form-cont .nf-form-content .list-select-wrap .nf-field-element > div:hover {
	background-color: var(--md-form-bg-hover);
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.nf-form-cont .nf-form-content input.ninja-forms-field:focus-visible:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-form-content textarea.ninja-forms-field:focus-visible,
.nf-form-cont .nf-form-content select.ninja-forms-field:focus-visible,
.nf-form-cont .nf-form-content .list-select-wrap select:focus-visible + div {
	background-color: var(--md-form-bg-focus);
	border: none !important;
	border-color: transparent !important;
	outline: none !important;
	box-shadow: var(--md-form-focus-shadow) !important;
}

/* Mouse click — no persistent focus ring; hover/default background only */
.nf-form-cont .nf-form-content input.ninja-forms-field:focus:not(:focus-visible):not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-form-content textarea.ninja-forms-field:focus:not(:focus-visible),
.nf-form-cont .nf-form-content select.ninja-forms-field:focus:not(:focus-visible),
.nf-form-cont .nf-form-content .list-select-wrap select:focus:not(:focus-visible) + div {
	background-color: var(--md-form-bg);
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.nf-form-cont .nf-form-content select.ninja-forms-field {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--md-form-bg);
	cursor: pointer;
}

.nf-form-cont .nf-form-content .list-select-wrap > div {
	position: relative;
}

.nf-form-cont .nf-form-content .list-select-wrap .nf-field-element > div {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	display: flex;
	align-items: center;
	padding-right: 2.5rem;
	color: var(--md-color-contrast, #1c1b1a);
}

.nf-form-cont .nf-form-content .list-select-wrap .nf-field-element > div::after {
	content: "";
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 0.45rem;
	height: 0.45rem;
	margin-top: -0.3rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	font-family: inherit;
}

.nf-form-cont .nf-form-content .list-select-wrap select.ninja-forms-field {
	position: relative;
	z-index: 2;
	background: transparent;
	border: none;
}

.nf-form-cont .nf-form-content .list-select-wrap select:focus {
	outline: none;
}

.nf-form-cont .nf-form-content .list-select-wrap select:focus-visible + div,
.nf-form-cont .nf-form-content .list-select-wrap select:active + div {
	background-color: var(--md-form-bg-focus) !important;
	border: none !important;
	border-color: transparent !important;
	outline: none !important;
	box-shadow: var(--md-form-focus-shadow) !important;
}

/* —— Checkboxes & radios (future-proof) —— */

.nf-form-cont .checkbox-wrap .nf-field-element label,
.nf-form-cont .checkbox-wrap .nf-field-label label,
.nf-form-cont .listcheckbox-wrap .nf-field-element label,
.nf-form-cont .listradio-wrap .nf-field-element label {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0;
	padding: 0.15rem 0;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.35;
	cursor: pointer;
}

.nf-form-cont .checkbox-wrap .nf-field-element label::before,
.nf-form-cont .checkbox-wrap .nf-field-label label::before,
.nf-form-cont .listcheckbox-wrap .nf-field-element label::before,
.nf-form-cont .listradio-wrap .nf-field-element label::before,
.nf-form-cont .checkbox-wrap .nf-field-element label::after,
.nf-form-cont .checkbox-wrap .nf-field-label label::after,
.nf-form-cont .listcheckbox-wrap .nf-field-element label::after,
.nf-form-cont .listradio-wrap .nf-field-element label::after {
	content: none !important;
	display: none !important;
}

.nf-form-cont .checkbox-wrap .nf-field-element input,
.nf-form-cont .listcheckbox-wrap .nf-field-element input,
.nf-form-cont .listradio-wrap .nf-field-element input {
	position: static;
	opacity: 1;
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	min-height: 1rem;
	margin: 0.15em 0 0;
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--md-color-contrast, #1c1b1a);
	border-radius: var(--md-radius-pill, 0.25rem);
	background-color: var(--md-color-surface, #fff);
	cursor: pointer;
	transition:
		background-color var(--md-transition-duration, 0.2s) var(--md-transition-ease, ease),
		border-color var(--md-transition-duration, 0.2s) var(--md-transition-ease, ease);
}

.nf-form-cont .listradio-wrap .nf-field-element input {
	border-radius: 50%;
}

.nf-form-cont .checkbox-wrap .nf-field-element input:checked,
.nf-form-cont .listcheckbox-wrap .nf-field-element input:checked,
.nf-form-cont .listradio-wrap .nf-field-element input:checked {
	background-color: var(--md-color-contrast, #1c1b1a);
	border-color: var(--md-color-contrast, #1c1b1a);
}

.nf-form-cont .checkbox-wrap .nf-field-element input:focus-visible,
.nf-form-cont .listcheckbox-wrap .nf-field-element input:focus-visible,
.nf-form-cont .listradio-wrap .nf-field-element input:focus-visible {
	outline: 2px solid var(--md-color-contrast, #1c1b1a);
	outline-offset: 2px;
}

/* —— Submit —— */

.nf-form-cont .submit-container,
.nf-form-cont .nf-field-container.submit-wrap {
	margin-top: calc(var(--md-space, 1.5rem) * 0.5);
	margin-bottom: 0;
}

.nf-form-cont .nf-form-content input[type="submit"],
.nf-form-cont .nf-form-content input[type="button"],
.nf-form-cont .nf-form-content button {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: inline-block;
	width: auto;
	min-height: auto;
	height: auto;
	margin: 0;
	padding: 0.55rem 1.15rem;
	font-family: var(--wp--preset--font-family--inclusive-sans, "Inclusive Sans", system-ui, sans-serif);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	color: var(--md-color-surface, #fff) !important;
	background: var(--md-color-contrast, #1c1b1a) !important;
	border: none !important;
	border-radius: var(--md-radius, 0.5rem) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: var(--md-transition-interactive, transform 0.28s ease, box-shadow 0.28s ease, background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease);
}

/*
 * Hover/focus lift shadow — same token as .wp-block-button__link and
 * .wp-block-details (accordion): 0 6px 18px rgba(28, 27, 26, 0.12).
 * !important matches the other declarations on this element (native
 * input[type="submit"]/button chrome, plus the flat base box-shadow above,
 * both also !important) so this reliably wins the cascade in every browser.
 * Background stays solid dark (a touch lighter than the base black, same
 * step used for .md-jump-nav__link.is-active:hover) — no light pill on hover.
 */
.nf-form-cont .nf-form-content input[type="submit"]:hover:not(:disabled),
.nf-form-cont .nf-form-content input[type="submit"]:focus-visible,
.nf-form-cont .nf-form-content input[type="button"]:hover:not(:disabled),
.nf-form-cont .nf-form-content input[type="button"]:focus-visible,
.nf-form-cont .nf-form-content button:hover:not(:disabled),
.nf-form-cont .nf-form-content button:focus-visible {
	background: #2e2d2c !important;
	color: var(--md-color-surface, #fff) !important;
	outline: none !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(28, 27, 26, 0.12) !important;
}

.nf-form-cont .nf-form-content input[type="submit"]:disabled,
.nf-form-cont .nf-form-content input[type="button"]:disabled,
.nf-form-cont .nf-form-content button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none !important;
}

.nf-form-cont .nf-form-content input[type="submit"]:active,
.nf-form-cont .nf-form-content input[type="button"]:active,
.nf-form-cont .nf-form-content button:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(28, 27, 26, 0.1);
}

/* —— Validation & messages —— */

.nf-form-cont .nf-error-msg,
.nf-form-cont .ninja-forms-req-symbol,
.ninja-forms-form-wrap .nf-error-msg {
	font-size: 0.925rem;
	color: var(--md-color-contrast, #1c1b1a) !important;
}

.nf-form-cont .nf-error .ninja-forms-field,
.nf-form-cont .nf-error .list-select-wrap .nf-field-element > div {
	background-color: var(--md-form-bg-error) !important;
	border: none !important;
	border-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

/*
 * Higher specificity than the general focus-visible rule above (which also
 * uses !important on box-shadow) — otherwise the grey/black focus ring wins
 * over this purple-tinted one on error fields, even though source order would
 * normally favour this rule. Matching element type + the same four :not()
 * exclusions per field type keeps this selector reliably ahead in the cascade.
 */
.nf-form-cont .nf-form-content .nf-error input.ninja-forms-field:focus-visible:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-form-content .nf-error textarea.ninja-forms-field:focus-visible,
.nf-form-cont .nf-form-content .nf-error select.ninja-forms-field:focus-visible,
.nf-form-cont .nf-form-content .nf-error .list-select-wrap select:focus-visible + div {
	background-color: var(--md-form-bg-error-focus) !important;
	border: none !important;
	border-color: transparent !important;
	outline: none !important;
	box-shadow: var(--md-form-focus-shadow-error) !important;
}

/*
 * Error-state placeholder — brand purple, matching the field error message.
 */
.nf-form-cont .nf-form-content .nf-error input.ninja-forms-field::placeholder,
.nf-form-cont .nf-form-content .nf-error textarea.ninja-forms-field::placeholder {
	color: var(--md-color-error);
	opacity: 1;
}

.nf-form-cont .nf-pass .ninja-forms-field {
	border: none !important;
	border-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

.nf-form-cont .nf-error.field-wrap .nf-field-element::after,
.nf-form-cont .nf-pass.field-wrap .nf-field-element::after {
	display: none !important;
}

.nf-form-cont .nf-error .nf-error-msg {
	margin-top: 0.35rem;
	color: var(--md-color-contrast, #1c1b1a);
	font-weight: 400;
}

.nf-form-cont .nf-field-submit-error {
	margin: var(--md-space, 1.5rem) 0 0;
	padding: 0.85rem 1rem;
	border: none;
	border-radius: var(--md-radius-pill, 0.25rem);
	background-color: color-mix(in srgb, var(--md-color-error-base) 12%, var(--md-color-subtle, #f3f3f3));
	color: var(--md-color-error-on-tint);
	font-size: 0.925rem;
	line-height: 1.45;
}

.nf-form-cont .nf-field-submit-error::after {
	display: none !important;
}

/* Hidden until Ninja Forms injects success text (.html().show()). */
.nf-form-cont .nf-response-msg {
	display: none;
	margin: var(--md-space, 1.5rem) 0 0;
	padding: 0.85rem 1rem;
	border: none;
	border-radius: var(--md-radius-pill, 0.25rem);
	background-color: color-mix(in srgb, var(--md-color-accent, #34f58c) 22%, var(--md-color-subtle, #f3f3f3));
	color: var(--md-color-contrast, #1c1b1a);
	font-size: 1rem;
	line-height: 1.45;
}

.nf-form-cont .nf-response-msg:not(:empty) {
	display: block;
}

/* —— Dark mode —— */

html[data-md-theme="dark"] .nf-form-cont .nf-field-label .nf-label-span,
html[data-md-theme="dark"] .nf-form-cont .nf-field-label label,
html[data-md-theme="dark"] .nf-form-cont .nf-form-content label {
	color: var(--md-color-contrast, #f5f5f4);
}

html[data-md-theme="dark"] .nf-form-cont .nf-field-description {
	color: color-mix(in srgb, var(--md-color-contrast, #f5f5f4) 72%, transparent);
}

html[data-md-theme="dark"] .nf-form-cont {
	--md-color-error: var(--md-color-primary, #f579f5);
	--md-color-error-on-tint: var(--md-color-primary, #f579f5);
	--md-form-bg: var(--md-color-subtle, #3a3938);
	--md-form-bg-hover: #454443;
	--md-form-bg-focus: var(--md-form-bg);
	--md-form-bg-error: color-mix(in srgb, var(--md-color-error-base) 20%, var(--md-color-subtle, #3a3938));
	--md-form-bg-error-focus: color-mix(in srgb, var(--md-color-error-base) 30%, var(--md-color-surface, #2a2928));
	--md-form-focus-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	--md-form-focus-shadow-error: 0 6px 18px rgba(0, 0, 0, 0.35);
}

html[data-md-theme="dark"] .nf-form-cont .nf-form-content input.ninja-forms-field:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html[data-md-theme="dark"] .nf-form-cont .nf-form-content textarea.ninja-forms-field,
html[data-md-theme="dark"] .nf-form-cont .nf-form-content select.ninja-forms-field,
html[data-md-theme="dark"] .nf-form-cont .nf-form-content .list-select-wrap .nf-field-element > div {
	background-color: var(--md-form-bg);
	color: var(--md-color-contrast, #f5f5f4);
}

html[data-md-theme="dark"] .nf-form-cont .nf-form-content input.ninja-forms-field:hover:not(:disabled):not([readonly]),
html[data-md-theme="dark"] .nf-form-cont .nf-form-content textarea.ninja-forms-field:hover:not(:disabled):not([readonly]),
html[data-md-theme="dark"] .nf-form-cont .nf-form-content select.ninja-forms-field:hover:not(:disabled),
html[data-md-theme="dark"] .nf-form-cont .nf-form-content .list-select-wrap .nf-field-element > div:hover {
	background-color: var(--md-form-bg-hover);
}

html[data-md-theme="dark"] .nf-form-cont .nf-form-content input.ninja-forms-field:focus-visible:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html[data-md-theme="dark"] .nf-form-cont .nf-form-content textarea.ninja-forms-field:focus-visible,
html[data-md-theme="dark"] .nf-form-cont .nf-form-content select.ninja-forms-field:focus-visible,
html[data-md-theme="dark"] .nf-form-cont .nf-form-content .list-select-wrap select:focus-visible + div {
	background-color: var(--md-form-bg-focus);
}

html[data-md-theme="dark"] .nf-form-cont .nf-form-content input.ninja-forms-field::placeholder,
html[data-md-theme="dark"] .nf-form-cont .nf-form-content textarea.ninja-forms-field::placeholder {
	color: color-mix(in srgb, var(--md-color-contrast, #f5f5f4) 55%, transparent);
}

html[data-md-theme="dark"] .nf-form-cont .nf-form-content input[type="submit"],
html[data-md-theme="dark"] .nf-form-cont .nf-form-content input[type="button"],
html[data-md-theme="dark"] .nf-form-cont .nf-form-content button {
	background: var(--md-color-surface, #2a2928) !important;
	color: var(--md-color-contrast, #f5f5f4) !important;
	box-shadow: none !important;
}

html[data-md-theme="dark"] .nf-form-cont .nf-form-content input[type="submit"]:hover:not(:disabled),
html[data-md-theme="dark"] .nf-form-cont .nf-form-content input[type="submit"]:focus-visible,
html[data-md-theme="dark"] .nf-form-cont .nf-form-content input[type="button"]:hover:not(:disabled),
html[data-md-theme="dark"] .nf-form-cont .nf-form-content input[type="button"]:focus-visible,
html[data-md-theme="dark"] .nf-form-cont .nf-form-content button:hover:not(:disabled),
html[data-md-theme="dark"] .nf-form-cont .nf-form-content button:focus-visible {
	background: var(--md-color-surface, #2a2928) !important;
	color: var(--md-color-contrast, #f5f5f4) !important;
	outline: none !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

html[data-md-theme="dark"] .nf-form-cont .nf-form-content input[type="submit"]:disabled,
html[data-md-theme="dark"] .nf-form-cont .nf-form-content input[type="button"]:disabled,
html[data-md-theme="dark"] .nf-form-cont .nf-form-content button:disabled {
	opacity: 0.5;
	box-shadow: none !important;
}

html[data-md-theme="dark"] .nf-form-cont .checkbox-wrap .nf-field-element input,
html[data-md-theme="dark"] .nf-form-cont .listcheckbox-wrap .nf-field-element input,
html[data-md-theme="dark"] .nf-form-cont .listradio-wrap .nf-field-element input {
	background-color: var(--md-color-surface, #2a2928);
	border-color: var(--md-color-contrast, #f5f5f4);
}

html[data-md-theme="dark"] .nf-form-cont .checkbox-wrap .nf-field-element input:checked,
html[data-md-theme="dark"] .nf-form-cont .listcheckbox-wrap .nf-field-element input:checked,
html[data-md-theme="dark"] .nf-form-cont .listradio-wrap .nf-field-element input:checked {
	background-color: var(--md-color-accent, #34f58c);
	border-color: var(--md-color-accent, #34f58c);
}

html[data-md-theme="dark"] .nf-form-cont .nf-error .nf-error-msg {
	color: var(--md-color-contrast, #f5f5f4);
}

html[data-md-theme="dark"] .nf-form-cont .nf-field-submit-error {
	background-color: color-mix(in srgb, var(--md-color-error-base) 18%, var(--md-color-subtle, #3a3938));
	color: var(--md-color-error-on-tint);
}

html[data-md-theme="dark"] .nf-form-cont .nf-response-msg {
	background-color: color-mix(in srgb, var(--md-color-accent, #34f58c) 18%, var(--md-color-subtle, #3a3938));
	color: var(--md-color-contrast, #f5f5f4);
}

/* —— Reduced motion —— */

@media (prefers-reduced-motion: reduce) {
	.nf-form-cont .nf-form-content input.ninja-forms-field,
	.nf-form-cont .nf-form-content textarea.ninja-forms-field,
	.nf-form-cont .nf-form-content select.ninja-forms-field,
	.nf-form-cont .nf-form-content input[type="submit"],
	.nf-form-cont .nf-form-content input[type="button"],
	.nf-form-cont .nf-form-content button {
		transition: none;
	}

	.nf-form-cont .nf-form-content input[type="submit"]:hover,
	.nf-form-cont .nf-form-content input[type="submit"]:focus-visible,
	.nf-form-cont .nf-form-content input[type="button"]:hover,
	.nf-form-cont .nf-form-content input[type="button"]:focus-visible,
	.nf-form-cont .nf-form-content button:hover,
	.nf-form-cont .nf-form-content button:focus-visible {
		transform: none;
	}
}

/*
 * Ninja Forms “opinions” styles apply 1px borders on :focus and .nf-error
 * (border-color with !important). Override every interaction state — border
 * must never appear; focus uses background + drop shadow only.
 */
.nf-form-cont .nf-form-content input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-form-content textarea,
.nf-form-cont .nf-form-content select.ninja-forms-field,
.nf-form-cont .nf-form-content .list-select-wrap .nf-field-element > div,
.nf-form-cont .nf-error .ninja-forms-field,
.nf-form-cont .nf-error input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-error textarea,
.nf-form-cont .nf-error select.ninja-forms-field,
.ninja-forms-form-wrap .nf-form-content input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.ninja-forms-form-wrap .nf-form-content textarea,
.ninja-forms-form-wrap .nf-error .ninja-forms-field {
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	outline: none !important;
}

.nf-form-cont .nf-form-content input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):hover,
.nf-form-cont .nf-form-content input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.nf-form-cont .nf-form-content input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus-visible,
.nf-form-cont .nf-form-content input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):active,
.nf-form-cont .nf-form-content textarea:hover,
.nf-form-cont .nf-form-content textarea:focus,
.nf-form-cont .nf-form-content textarea:focus-visible,
.nf-form-cont .nf-form-content textarea:active,
.nf-form-cont .nf-form-content select.ninja-forms-field:hover,
.nf-form-cont .nf-form-content select.ninja-forms-field:focus,
.nf-form-cont .nf-form-content select.ninja-forms-field:focus-visible,
.nf-form-cont .nf-form-content select.ninja-forms-field:active,
.nf-form-cont .nf-form-content .list-select-wrap select:focus + div,
.nf-form-cont .nf-form-content .list-select-wrap select:active + div,
.nf-form-cont .nf-form-content .list-select-wrap select:focus-visible + div,
.nf-form-cont .nf-error .ninja-forms-field,
.nf-form-cont .nf-error .ninja-forms-field:focus,
.nf-form-cont .nf-error .ninja-forms-field:focus-visible,
.nf-form-cont .nf-error input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-error textarea {
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	outline: none !important;
}