/**
 * Formdot front-end — tiny, structural-only stylesheet.
 *
 * Deliberately unopinionated: themes own the form's look. The only rules here
 * are the ones the plugin functionally depends on.
 */

/*
 * Honeypot: moved off-screen instead of display:none — bots that skip
 * "invisible" fields still see and fill this one. Must live in this external
 * stylesheet (never inline) so the trick is not obvious in the form markup.
 */
.formdot-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.formdot-error {
	display: block;
	color: #b32d2e;
	font-size: .875em;
	margin-top: .25em;
}

.formdot-response {
	display: none;
	margin-top: 1em;
}

.formdot-response.is-success,
.formdot-response.is-error {
	display: block;
}

/* Full-form replacement container (v0.27): it receives programmatic focus
   (tabindex="-1") so screen readers land in it — suppress the focus ring on the
   wrapper itself (interactive elements inside keep their own). */
.formdot-replacement:focus {
	outline: none;
}

.formdot [aria-invalid="true"] {
	outline: 1px solid #b32d2e;
}

/*
 * Accessible choice-group wrapper (v0.28): a radio/checkbox field with an
 * author `label` renders as <fieldset class="formdot-choice-group"><legend>.
 * Neutralise the browser's default fieldset chrome so opting into a legend
 * doesn't change layout — themes can restyle this. min-width:0 defeats the UA
 * `min-width: min-content` that otherwise breaks flex/grid children.
 */
.formdot-choice-group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/*
 * Spinner. Visibility is driven entirely by the form's submitting-state class —
 * the JS only toggles the class, never styles. The container ships a built-in
 * CSS pulse (below); a site can restyle it via the custom properties, replace it
 * with formdot_spinner_html, or disable it in one line of CSS.
 */
.formdot-spinner {
	/* Override knobs (no !important needed — a single low-specificity class). */
	--formdot-spinner-size: 24px;
	--formdot-spinner-color: currentColor; /* inherits the surrounding text colour */
	--formdot-spinner-speed: 1.2s;
	display: none;
}

.formdot-form.formdot-submitting .formdot-spinner {
	display: block;
}

/*
 * Built-in pulse: a static dot (::before) under an expanding, fading ring
 * (::after). Drawn ONLY when the container is :empty — a formdot_spinner_html
 * filter fills it, so :empty stops matching and the custom markup wins (the
 * built-in is auto-suppressed). Decorative; the container stays aria-hidden.
 * To DISABLE: `.formdot-spinner:empty::before, .formdot-spinner:empty::after
 * { content: none; }` (or set --formdot-spinner-size: 0).
 */
.formdot-spinner:empty {
	position: relative;
	width: var(--formdot-spinner-size);
	height: var(--formdot-spinner-size);
}

.formdot-spinner:empty::before,
.formdot-spinner:empty::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--formdot-spinner-color);
}

.formdot-spinner:empty::before {
	transform: scale(.4); /* the static centre dot */
}

.formdot-spinner:empty::after {
	transform: scale(.4); /* the ring, animated outward */
	animation: formdot-spinner-pulse var(--formdot-spinner-speed) ease-out infinite;
}

@keyframes formdot-spinner-pulse {
	0%   { transform: scale(.4); opacity: .6; }
	100% { transform: scale(1);  opacity: 0; }
}

@keyframes formdot-spinner-breathe {
	0%, 100% { opacity: .25; }
	50%      { opacity: .6; }
}

/* Reduced motion: the ring breathes opacity in place — no expansion / movement. */
@media (prefers-reduced-motion: reduce) {
	.formdot-spinner:empty::after {
		transform: scale(.4);
		animation: formdot-spinner-breathe var(--formdot-spinner-speed) ease-in-out infinite;
	}
}

/*
 * File upload dropzone. Layout is structural; colours are deliberately faint so
 * themes can override freely. The <input type="file"> is visually hidden but
 * stays focusable/operable — :focus-within surfaces the focus ring on the zone.
 */
.formdot-dropzone {
	background: rgba(0, 0, 0, .1);
	border: 2px dashed rgba(0, 0, 0, .3);
	border-radius: 4px;
	padding: 1.25em 1em;
	text-align: center;
	cursor: pointer;
}

.formdot-dropzone.is-dragover {
	background: rgba(0, 0, 0, .18);
}

.formdot-dropzone:focus-within {
	outline: 2px solid rgba(0, 0, 0, .5);
	outline-offset: 2px;
}

.formdot-file-input {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.formdot-files {
	list-style: none;
	margin: .5em 0 0;
	padding: 0;
	text-align: left;
}

.formdot-files li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5em;
	padding: .25em 0;
}

.formdot-file-remove {
	cursor: pointer;
}