/* Forms (dn-kit/form): follow the theme tokens (WordPress preset variables). */
/* Fields flow in rows: "half" fields share a row when there is room and wrap to full width on narrow screens. */
.dn-kit-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-s);
}
.dn-kit-form > * {
	flex: 1 1 100%;
}
.dn-kit-form > .dn-kit-form__field--half {
	flex: 1 1 calc(var(--wp--style--global--content-size) / 3);
}
.dn-kit-form__field {
	display: grid;
	gap: var(--wp--preset--spacing--space-3-xs);
	margin: 0;
}
.dn-kit-form__check {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-2-xs);
}
.dn-kit-form .dn-kit-form__check input {
	width: auto;
}
.dn-kit-form label {
	font-weight: 600;
}
.dn-kit-form input,
.dn-kit-form select,
.dn-kit-form textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	/* The field's own text colour with its own background: inherited from a coloured band it could match the field. */
	color: var(--wp--preset--color--text-body);
	padding: var(--wp--preset--spacing--space-2-xs) var(--wp--preset--spacing--space-xs);
	/* Field edges need 3:1 contrast (WCAG 1.4.11); the decorative border colour is too faint for that. */
	border: 1px solid var(--wp--custom--field-border);
	border-radius: var(--wp--preset--border-radius--radius-s);
	background: var(--wp--preset--color--bg-body);
}
.dn-kit-form [aria-invalid] {
	border-color: var(--wp--preset--color--error);
}
.dn-kit-form__error {
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--text-s);
}
.dn-kit-form__error:empty {
	display: none;
}
.dn-kit-form__req {
	color: var(--wp--preset--color--error);
}
.dn-kit-form__actions,
.dn-kit-form__status {
	margin: 0;
}
.dn-kit-form.is-sent .dn-kit-form__status {
	color: var(--wp--preset--color--success);
	font-weight: 600;
}
/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.dn-kit-form__hp {
	position: absolute;
	left: -10000px; /* ds-ok: honeypot kept off-screen, not a design value */
	width: 1px; /* ds-ok: honeypot */
	height: 1px; /* ds-ok: honeypot */
	overflow: hidden;
}
/* Form editor: the "add field" button takes its own row instead of floating over the last field. */
.dn-kit-form > .block-list-appender {
	position: static;
}
/* Choose one: the choices in a row that wraps, the question as the group's legend. */
.dn-kit-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-2-xs) var(--wp--preset--spacing--space-m);
	margin: 0;
	padding: 0;
	border: 0;
}
.dn-kit-form__choices legend {
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--space-3-xs);
	padding: 0;
	font-weight: 600;
}
.dn-kit-form .dn-kit-form__choice {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-3-xs);
	font-weight: 400;
}
.dn-kit-form .dn-kit-form__choice input,
.dn-kit-form .dn-kit-form__range input {
	width: auto;
	accent-color: var(--wp--preset--color--primary);
}
/* Slider: the bar takes the room, the picked number and its unit sit after it. */
.dn-kit-form__range,
.dn-kit-form__number {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-xs);
}
.dn-kit-form .dn-kit-form__range input {
	flex: 1 1 auto;
	padding: 0;
	border: 0;
	background: none;
}
.dn-kit-form__range output {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
/* Tick box as a switch: a rounded track with a knob that slides across when on. */
.dn-kit-form .dn-kit-form__check--switch input {
	appearance: none;
	flex: none;
	position: relative;
	width: var(--wp--preset--spacing--space-xl);
	height: var(--wp--preset--spacing--space-m);
	margin: 0;
	padding: 0;
	border-radius: var(--wp--preset--border-radius--radius-full);
	background: color-mix(in srgb, var(--wp--preset--color--text-body) 35%, var(--wp--preset--color--bg-body));
	cursor: pointer;
}
.dn-kit-form .dn-kit-form__check--switch input::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	aspect-ratio: 1;
	border: var(--wp--custom--switch-gap) solid transparent;
	border-radius: var(--wp--preset--border-radius--radius-full);
	background: var(--wp--preset--color--bg-body) padding-box;
	transition: transform var(--wp--custom--dur-fast) var(--wp--custom--ease);
}
.dn-kit-form .dn-kit-form__check--switch input:checked {
	background: var(--wp--preset--color--primary);
}
.dn-kit-form .dn-kit-form__check--switch input:checked::before {
	transform: translateX(calc(var(--wp--preset--spacing--space-xl) - var(--wp--preset--spacing--space-m)));
}
/* Thank-you as a small notice (form setting): pops up at the bottom of the screen, leaves after a few seconds. */
.dn-kit-toast {
	position: fixed;
	inset-inline: 0;
	inset-block-end: var(--wp--preset--spacing--space-l);
	z-index: var(--wp--custom--toast-layer);
	width: fit-content;
	max-width: calc(100% - 2 * var(--wp--preset--spacing--space-m));
	margin-inline: auto;
	padding: var(--wp--preset--spacing--space-s) var(--wp--preset--spacing--space-l);
	border-radius: var(--wp--preset--border-radius--radius-m);
	background: var(--wp--preset--color--text-title);
	color: var(--wp--preset--color--bg-body);
	box-shadow: var(--wp--preset--shadow--shadow-l);
	font-weight: 600;
	animation: dn-toast var(--wp--custom--toast-time) var(--wp--custom--ease) forwards;
}
@keyframes dn-toast {
	0% { opacity: 0; transform: translateY(var(--wp--preset--spacing--space-s)); }
	8%, 90% { opacity: 1; transform: none; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.dn-kit-toast {
		animation-name: dn-toast-still;
	}
	@keyframes dn-toast-still {
		0%, 95% { opacity: 1; }
		100% { opacity: 0; }
	}
}
/* Number with − / +: the buttons sit on either side of the number, as tall as the field; the browser's own small arrows
 * are hidden since the buttons do the same. */
.dn-kit-form .dn-kit-form__stepper {
	display: inline-flex;
	align-items: stretch;
}
.dn-kit-form .dn-kit-form__stepper input {
	width: var(--wp--custom--stepper-width);
	border-radius: 0;
	text-align: center;
	appearance: textfield;
}
.dn-kit-form .dn-kit-form__stepper input::-webkit-inner-spin-button,
.dn-kit-form .dn-kit-form__stepper input::-webkit-outer-spin-button {
	appearance: none;
	margin: 0;
}
.dn-kit-form .dn-kit-form__stepper button {
	min-width: var(--wp--custom--control-size);
	border: 1px solid var(--wp--custom--field-border);
	background: var(--wp--preset--color--bg-surface);
	color: var(--wp--preset--color--text-body);
	font: inherit;
	font-size: var(--wp--preset--font-size--text-l);
	cursor: pointer;
}
.dn-kit-form .dn-kit-form__stepper button:first-child {
	border-inline-end: 0;
	border-radius: var(--wp--preset--border-radius--radius-s) 0 0 var(--wp--preset--border-radius--radius-s);
}
.dn-kit-form .dn-kit-form__stepper button:last-child {
	border-inline-start: 0;
	border-radius: 0 var(--wp--preset--border-radius--radius-s) var(--wp--preset--border-radius--radius-s) 0;
}
.dn-kit-form .dn-kit-form__stepper button:hover {
	color: var(--wp--preset--color--primary);
}