/**
 * WP Ultimate — frontend-formulieren.
 * Bewust minimaal: het thema bepaalt de typografie; wij regelen alleen
 * structuur, meldingen en de honeypot. Veld-styling komt uit admin.css.
 */

.wpu-form { max-width: 720px; }

/* Honeypot: visueel én voor toetsenbord/screenreaders verborgen. */
.wpu-form .wpu-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* Meldingen. */
.wpu-form-errors {
	border: 1px solid #dc2626;
	border-left-width: 4px;
	background: #fef2f2;
	color: #7f1d1d;
	padding: 12px 16px;
	margin: 0 0 16px;
	border-radius: 6px;
}
.wpu-form-errors ul { margin: 6px 0 0 18px; list-style: disc; }
.wpu-form-success {
	border: 1px solid #16a34a;
	border-left-width: 4px;
	background: #f0fdf4;
	color: #14532d;
	padding: 12px 16px;
	border-radius: 6px;
}

/* Velden: frontend heeft geen metabox-chrome nodig. */
.wpu-form .wpu-fields { border: 0; }

/* Kolommen: velden met een breedte vloeien naast elkaar; .wpu-row-break dwingt
   een regelovergang af (de enige betrouwbare manier binnen een flex-container). */
.wpu-form .wpu-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.wpu-form .wpu-fields > .wpu-field { width: 100%; box-sizing: border-box; }
/* input.js injecteert <ul class="wpu-tab-nav"> als directe child van
   .wpu-fields zodra het formulier een Tab-veld heeft (buildTabs()) — zonder
   deze regel krimpt die nav in de flex-container mee tot content-breedte
   i.p.v. de volle regel te nemen. */
.wpu-form .wpu-fields > .wpu-tab-nav { width: 100%; }
/* Verdedigt tegen .wpu-labels-left .wpu-field{display:flex} (admin.css), dat
   een style="width" veld anders in een flex-rij zou zetten i.p.v. een blok.
   Formulieren gebruiken altijd wpu-labels-top (zie Forms::render_form()), dus
   dit is momenteel een no-op — blijft staan als bescherming mocht dat ooit
   veranderen. */
.wpu-form .wpu-fields > .wpu-field[style*="width"] { display: block; }
.wpu-form .wpu-row-break { flex-basis: 100%; height: 0; }
.wpu-form .wpu-row-break.wpu-hidden { display: none !important; }

.wpu-form .wpu-field { padding: 10px 0; border: 0; }
.wpu-form .wpu-field.wpu-invalid input,
.wpu-form .wpu-field.wpu-invalid textarea,
.wpu-form .wpu-field.wpu-invalid select { border-color: #dc2626; }

/* Submit-knop: neemt de plugin-accentkleur, thema mag overschrijven. */
.wpu-form-button {
	background: var(--wpu-primary, #4f46e5);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 10px 22px;
	font-size: 15px;
	cursor: pointer;
}
.wpu-form-button:hover { background: var(--wpu-primary-dark, #4338ca); }

/* Widget van een integratie (captcha), vlak boven de verzendknop. */
.wpu-form-captcha { margin: 0 0 16px; }