/**
 * Genie Form Builder — the public form.
 *
 * Extracted from a per-form inline <style> block that repeated every rule for
 * each form on the page, scoped by its unique id. One file, one set of rules,
 * cached once.
 *
 * Scoped to .mlsg-cf so a theme's own form styles are not touched.
 */

.mlsg-cf__fields { display: flex; flex-wrap: wrap; gap: 18px; }

.mlsg-cf-field--full { width: 100%; }
.mlsg-cf-field--half { flex: 1; min-width: 200px; }

/* A field hidden by its show-when rule. A class, not a style set from
   JavaScript — clearing an inline display makes the browser guess. */
.mlsg-cf-field--hidden { display: none; }

.mlsg-cf-label {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 8px;
	color: inherit;
}

.mlsg-cf-req { color: var(--mlsg-danger, #dc2626); }

.mlsg-cf-input {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--mlsg-border-light, #d1d5db);
	border-radius: 6px;
	font-size: 1rem;
	line-height: 1.4;
	font-family: inherit;
	background: var(--mlsg-white, #fff);
	color: var(--mlsg-text, #111827);
	box-sizing: border-box;
}

.mlsg-cf-input:focus {
	outline: none;
	border-color: var(--mlsg-teal, #0ea5e9);
	box-shadow: 0 0 0 3px rgba( 14, 165, 233, .15 );
}

textarea.mlsg-cf-input { resize: vertical; }

.mlsg-cf-name-row { display: flex; gap: 14px; flex-wrap: wrap; }
.mlsg-cf-name-row .mlsg-cf-input { flex: 1; min-width: 180px; }

.mlsg-cf-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}

.mlsg-cf-checkbox-label input { margin-top: 2px; flex-shrink: 0; }

/* Marketing consent. Longer than an ordinary checkbox label because it is
   legal copy, so it is given reading-copy sizing rather than label sizing. */
.mlsg-cf-consent {
	font-size: 0.9375rem;
	line-height: 1.55;
}

.mlsg-cf-consent a {
	color: var(--mlsg-teal, #107dbd);
	text-decoration: underline;
}

/* reCAPTCHA. Google renders a fixed-width iframe here; the wrapper only gives
   it room and lets it shrink on a narrow screen rather than overflow. */
.mlsg-cf-captcha {
	margin-top: 18px;
	max-width: 100%;
	overflow-x: auto;
}

.mlsg-cf-footer { margin-top: 22px; }

/* The submit button.
 *
 * Styled here rather than borrowed from .genie-btn, which lives in the admin
 * stylesheet and is not loaded on a public page — asking for it produced the
 * browser's own grey default button on every published form. The public form
 * carries its own look and depends on nothing outside this file. */
.mlsg-cf-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 32px;
	border: 1px solid var(--mlsg-teal, #107dbd);
	border-radius: 6px;
	background: var(--mlsg-teal, #107dbd);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.mlsg-cf-submit:hover,
.mlsg-cf-submit:focus {
	background: var(--mlsg-teal-dark, #0d6aa3);
	border-color: var(--mlsg-teal-dark, #0d6aa3);
	color: #fff;
}

.mlsg-cf-submit:focus-visible {
	outline: 2px solid var(--mlsg-teal-dark, #0d6aa3);
	outline-offset: 2px;
}

.mlsg-cf-submit:disabled,
.mlsg-cf-submit[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

@media ( prefers-reduced-motion: reduce ) {
	.mlsg-cf-submit { transition: none; }
}

.mlsg-cf-error-msg {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--mlsg-danger-bg, #fef2f2);
	border: 1px solid var(--mlsg-danger-border, #fecaca);
	border-radius: 6px;
	font-size: 0.9375rem;
	color: var(--mlsg-danger, #991b1b);
}

.mlsg-cf-success {
	padding: 16px 20px;
	background: var(--mlsg-success-bg, #ecfdf5);
	border: 1px solid var(--mlsg-success-border, #86efac);
	border-radius: 8px;
	font-size: 0.9375rem;
	color: var(--mlsg-success, #166534);
	font-weight: 500;
}

.mlsg-cf-title {
	font-size: 1.375rem;
	font-weight: 700;
	margin-bottom: 18px;
}

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   styles skips a hidden field and fills a visible one. Aria-hidden and
   tabindex keep it away from a screen reader and the tab order. */
.mlsg-cf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}