/*
 * 81 Forms
 * Standalone styles. The look is driven by a small set of CSS variables on
 * the .form81 element. Override those variables to re-theme the form. Neutral
 * defaults below, so it looks clean on any site with no customization.
 */

.form81 {
	/* === Theming tokens. Override these in the Styling settings page. === */
	--f81-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--f81-text: #23262b;
	--f81-heading: #15171a;
	--f81-muted: #6b7280;
	--f81-surface: #ffffff;
	--f81-border: #d4d7dd;
	--f81-accent: #2563eb;
	--f81-accent-text: #ffffff;
	--f81-error: #c0392b;
	--f81-radius: 6px;
	--f81-focus: rgba(37, 99, 235, 0.25);
	--f81-ease: cubic-bezier(0.4, 0, 0.2, 1);

	max-width: 640px;
	font-family: var(--f81-font);
}

/* === Rows and labels === */
.form81__row { margin-bottom: 24px; }

.form81__label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--f81-heading);
}

.form81__req { color: var(--f81-accent); margin-left: 2px; }

.form81__hint {
	display: block;
	margin-top: 6px;
	font-size: 0.85rem;
	color: var(--f81-muted);
}

/* === Text-like controls === */
.form81__control {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--f81-text);
	background-color: var(--f81-surface);
	border: 1px solid var(--f81-border);
	border-radius: var(--f81-radius);
	padding: 12px 16px;
	transition: border-color 0.2s var(--f81-ease), box-shadow 0.2s var(--f81-ease);
}

.form81__control:focus {
	outline: none;
	border-color: var(--f81-accent);
	box-shadow: 0 0 0 3px var(--f81-focus);
}

.form81__control::placeholder { color: var(--f81-muted); }

textarea.form81__control { resize: vertical; min-height: 140px; }

select.form81__control { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* === Radio and checkbox groups === */
.form81__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.form81__option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--f81-text);
	cursor: pointer;
}

.form81__option input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--f81-accent); }

/* === Error state === */
.form81__row.has-error .form81__control { border-color: var(--f81-error); }
.form81__row.has-error .form81__control:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2); }

.form81__error {
	display: block;
	margin-top: 6px;
	font-size: 0.85rem;
	color: var(--f81-error);
}

/* === Notices === */
.form81__notice {
	padding: 16px 20px;
	margin-bottom: 28px;
	border-radius: var(--f81-radius);
	background-color: var(--f81-surface);
	color: var(--f81-heading);
}
.form81__notice--success { border: 1px solid var(--f81-accent); border-left: 4px solid var(--f81-accent); }
.form81__notice--error   { border: 1px solid var(--f81-error);  border-left: 4px solid var(--f81-error); }

/* === Submit === */
.form81__actions { margin-top: 8px; }

.form81__submit {
	display: inline-block;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--f81-accent-text);
	background-color: var(--f81-accent);
	border: 1px solid var(--f81-accent);
	border-radius: var(--f81-radius);
	padding: 13px 28px;
	cursor: pointer;
	transition: filter 0.2s var(--f81-ease), opacity 0.2s var(--f81-ease);
}
.form81__submit:hover { filter: brightness(0.94); }
.form81__submit:focus-visible { outline: 3px solid var(--f81-focus); outline-offset: 2px; }
.form81__submit.is-busy,
.form81__submit:disabled { opacity: 0.6; cursor: wait; }

/* === Honeypot. Never shown. === */
.form81__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* === Editor-only marker for a misconfigured shortcode === */
.form81__admin-hint {
	padding: 10px 14px;
	border: 1px dashed var(--f81-error);
	border-radius: var(--f81-radius);
	color: var(--f81-error);
	font-size: 0.9rem;
}

@media (max-width: 600px) {
	.form81__submit { width: 100%; }
}

/* === Captcha widget === */
.form81__captcha { margin-bottom: 24px; }

/* === Conditional fields === */
.form81 .form81__row[data-forms81-hidden] { display: none; }