/* Resets + CSS custom properties. Two separate groups (see Admin > Ontwerp): values are overridden per
   site via an inline <style> that EC_Frontend_Assets generates from the settings. */

:root {
	/* Design — configurable by the owner (Admin > Ontwerp). */
	--ec-button-color: #25d366;
	--ec-icon-color: #76624d;
	--ec-field-border-color: #d9d9d9;
	--ec-background-color: #ffffff;
	--ec-page-background-color: #ffffff;
	--ec-background-image: none;
	--ec-title-color: #1a1a1a;
	--ec-intro-color: #6e6e6e;
	--ec-label-color: #1a1a1a;
	--ec-placeholder-color: #9a9a9a;
	--ec-select-text-color: #1a1a1a;
	--ec-info-color: #6e6e6e;

	/* Fixed — not (yet) configurable in the admin. */
	--ec-text-color: #1a1a1a;
	--ec-font-family: system-ui, sans-serif;
}

/* The background image belongs to the page, not to the form card itself (which stays --ec-background-
   color, usually white) — this keeps the card readable above a texture/photo. */
/* html body (specific enough) because a theme with `body { background: … }` (shorthand, loaded later) would otherwise remove the image. */
html body {
	background-color: var( --ec-page-background-color );
	background-image: var( --ec-background-image );
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.ec-form,
.ec-floating-widget {
	font-family: var(--ec-font-family);
	color: var(--ec-text-color);
	box-sizing: border-box;
}

.ec-form *,
.ec-floating-widget * {
	box-sizing: inherit;
}