/* Uses the theme's design-token CSS variables when present (--ea-*), with
   sane fallbacks so the plugin still looks reasonable if the theme changes
   or isn't active. */
.eaf-form-wrap { --eaf-accent: var(--ea-accent, #D9873F); --eaf-accent-hover: var(--ea-accent-hover, #EBA765); }

.eaf-form { display: grid; gap: 18px; }
.eaf-form-card {
	background: var(--ea-surface-light, #FFFFFF);
	padding: 36px;
	border: 1px solid var(--ea-border-light, rgba(20,20,22,.12));
}
.ea-page.ea-dark .eaf-form-card { background: var(--ea-surface-dark, #181B1F); border-color: var(--ea-border-dark, rgba(244,241,234,.12)); }
.eaf-field { display: block; }
.eaf-field-full { grid-column: 1 / -1; }
.eaf-label { display: block; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ea-text-light-muted2, #8A7C6C); margin-bottom: 8px; }
.ea-dark .eaf-label, .ea-page.ea-dark .eaf-label { color: var(--ea-text-dark-muted2, #8C9298); }

.eaf-form input[type=text],
.eaf-form input[type=tel],
.eaf-form input[type=email],
.eaf-form select,
.eaf-form textarea {
	width: 100%;
	background: var(--ea-bg-light, #F4F1EA);
	border: 1px solid var(--ea-border-light-strong, rgba(20,20,22,.2));
	color: var(--ea-text-light, #141416);
	font-family: var(--ea-font-body, inherit);
	font-size: 15px;
	padding: 14px 15px;
	border-radius: 2px;
	outline: none;
}
.ea-page.ea-dark .eaf-form input[type=text],
.ea-page.ea-dark .eaf-form input[type=tel],
.ea-page.ea-dark .eaf-form input[type=email],
.ea-page.ea-dark .eaf-form select,
.ea-page.ea-dark .eaf-form textarea {
	background: var(--ea-surface-dark, #181B1F);
	border-color: var(--ea-border-dark-strong, rgba(244,241,234,.2));
	color: var(--ea-text-dark, #F4F1EA);
}
.eaf-form input:focus, .eaf-form select:focus, .eaf-form textarea:focus { border-color: var(--eaf-accent); }
.eaf-form textarea { resize: vertical; }

.eaf-submit {
	grid-column: 1 / -1;
	justify-self: start;
	background: var(--eaf-accent);
	color: #141416;
	border: none;
	font-family: var(--ea-font-body, inherit);
	font-size: 15.5px;
	font-weight: 600;
	padding: 16px 24px;
	border-radius: 2px;
	cursor: pointer;
	margin-top: 6px;
}
.eaf-submit:hover { background: var(--eaf-accent-hover); }
.eaf-submit:disabled { opacity: .6; cursor: default; }

.eaf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; margin: 0; }

.eaf-error {
	background: #fdecea; border: 1px solid #f2a9a0; color: #7a1f16;
	padding: 14px 16px; font-size: 14px; margin-bottom: 14px; border-radius: 2px;
}

.eaf-form-thanks {
	background: var(--ea-surface-light, #fff);
	border: 1px solid rgba(217,135,63,.5);
	padding: 38px;
	border-radius: 4px;
}
.ea-page.ea-dark .eaf-form-thanks { background: var(--ea-surface-dark, #181B1F); }
.eaf-form-thanks h2 {
	font-family: var(--ea-font-heading, inherit); font-weight: 700; font-size: 22px;
	margin: 0 0 12px; color: var(--ea-accent-safe, #B4692A);
}
.eaf-form-thanks p { font-size: 15.5px; line-height: 1.6; color: var(--ea-text-light-muted, #5C5650); margin: 0; }
.ea-page.ea-dark .eaf-form-thanks p { color: var(--ea-text-dark-muted, #A9AEB3); }

/* Werkplaats afspraak-form lives on a dark card without the white form-card
   background used elsewhere — keep inputs legible there via the .ea-dark
   context selector above; no extra rule needed here. */