/**
 * Weltechniek — forms styling.
 *
 * Geladen via `wt_forms_page_has_form()`-check in inc/forms.php: alleen op
 * pages die daadwerkelijk een `[wt_form_*]`-shortcode bevatten.
 *
 * Tokens 1-op-1 met homepage.css / header.css / account.css / keuzehulp.css:
 *   navy:        #1e3a6d
 *   navy-hover:  #14284f
 *   groen:       #00bb00 (CTA + success)
 *   groen-hover: #008d00
 *   rood-error:  #d12d2d
 *   tekst-grijs: #4a5868
 *   border:      #e1eaf2
 *   bg-licht:    #f7f8fa
 *
 * Mobile-first; desktop-tweaks via @media (min-width: 700px).
 * BEM-style classes met prefix `wt-form*`. Geen Shoptimizer-class-dependencies.
 */

/* ============================================================ */
/* === Form container                                       === */
/* ============================================================ */
.wt-form {
	background: #fff;
	border: 1px solid #e1eaf2;
	border-radius: 8px;
	padding: 24px;
	max-width: 640px;
	margin: 0 0 32px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
@media (min-width: 700px) {
	.wt-form { padding: 32px; }
}

/* ============================================================ */
/* === Field                                                === */
/* ============================================================ */
.wt-form__field {
	margin-bottom: 18px;
}
.wt-form__field:last-of-type {
	margin-bottom: 22px;
}

.wt-form__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #1e3a6d;
	margin: 0 0 6px;
}
.wt-form__required {
	color: #d12d2d;
	margin-left: 2px;
}

.wt-form__help {
	margin: 0 0 8px;
	font-size: 13px;
	color: #4a5868;
	line-height: 1.45;
}

.wt-form__input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	font-size: 15px;
	line-height: 1.4;
	color: #2c3e50;
	background: #fff;
	border: 1px solid #d6dde6;
	border-radius: 5px;
	transition: border-color .15s ease, box-shadow .15s ease;
	font-family: inherit;
}
.wt-form__input::placeholder {
	color: #98a2b3;
}
.wt-form__input:focus {
	outline: none;
	border-color: #1e3a6d;
	box-shadow: 0 0 0 3px rgba(30, 58, 109, .12);
}

.wt-form__textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.5;
}

.wt-form__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e3a6d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

/* Error-state per veld */
.wt-form__field--has-error .wt-form__input {
	border-color: #d12d2d;
	box-shadow: 0 0 0 3px rgba(209, 45, 45, .1);
}
.wt-form__error {
	display: none;
	margin: 4px 0 0;
	font-size: 13px;
	color: #d12d2d;
	font-weight: 500;
}
.wt-form__error.is-visible {
	display: block;
}

/* ============================================================ */
/* === Honeypot — verborgen voor mensen, zichtbaar voor bots === */
/* ============================================================ */
.wt-form__honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ============================================================ */
/* === Submit + loading                                     === */
/* ============================================================ */
.wt-form__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 6px;
}

.wt-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #00bb00;
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease, transform .05s ease;
	font-family: inherit;
}
.wt-form__submit:hover,
.wt-form__submit:focus-visible {
	background: #008d00;
	outline: none;
}
.wt-form__submit:active {
	transform: translateY(1px);
}
.wt-form__submit:disabled,
.wt-form__submit.is-loading {
	background: #98c098;
	cursor: progress;
}

.wt-form__loading {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid #d6dde6;
	border-top-color: #1e3a6d;
	border-radius: 50%;
	animation: wt-form-spin .8s linear infinite;
}
.wt-form.is-submitting .wt-form__loading {
	display: inline-block;
}
@keyframes wt-form-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================ */
/* === Global messages onder de submit                      === */
/* ============================================================ */
.wt-form__messages {
	margin-top: 14px;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
}
.wt-form__messages--error {
	padding: 12px 14px;
	background: #fef2f2;
	border-left: 3px solid #d12d2d;
	border-radius: 4px;
	color: #8a1c1c;
}

/* ============================================================ */
/* === Success state (vervangt form-content na submit)      === */
/* ============================================================ */
.wt-form--success {
	background: #fff;
	border-color: #c8e6c8;
}
.wt-form__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 8px 0;
}
.wt-form__success-icon {
	color: #00bb00;
	margin-bottom: 12px;
}
.wt-form__success-text {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.5;
	color: #2c3e50;
	max-width: 460px;
}
.wt-form__again {
	background: transparent;
	color: #1e3a6d;
	border: 1px solid #1e3a6d;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
	font-family: inherit;
}
.wt-form__again:hover,
.wt-form__again:focus-visible {
	background: #1e3a6d;
	color: #fff;
	outline: none;
}

/* ============================================================ */
/* === Extra veld-types (B2B-form): sectie-kop, half, radio, checkbox === */
/* ============================================================ */

/* Sectie-kop binnen het formulier */
.wt-form__section {
	font-size: 16px;
	font-weight: 700;
	color: #1e3a6d;
	margin: 26px 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e1eaf2;
}
.wt-form__section:first-child { margin-top: 0; }

/* Half-width velden naast elkaar (desktop). Form wordt flex-wrap;
   alle directe children vullen standaard de volle breedte, alleen
   --half wordt 50%. Single-column forms blijven identiek. */
@media (min-width: 560px) {
	.wt-form { display: flex; flex-wrap: wrap; gap: 0 18px; align-content: flex-start; }
	.wt-form > * { flex: 0 0 100%; }
	.wt-form__field { flex: 0 0 100%; }
	.wt-form__field--half { flex: 1 1 calc(50% - 9px); }
}

/* Radio-groep (aanhef) */
.wt-form__radio-group { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 2px; }
.wt-form__radio { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #2c3e50; cursor: pointer; font-weight: 400; }
.wt-form__radio input { margin: 0; width: 16px; height: 16px; accent-color: #1e3a6d; cursor: pointer; }

/* Enkele checkbox (nieuwsbrief-consent) */
.wt-form__field--checkbox { margin-top: 4px; }
.wt-form__checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #4a5868; line-height: 1.45; cursor: pointer; font-weight: 400; }
.wt-form__checkbox input { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: #1e3a6d; cursor: pointer; }

/* ============================================================ */
/* === Checkbox met info-tooltip (1:1 als account-registratie) === */
/* ============================================================ */
.wt-form__field--checkbox{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:4px}
.wt-form__field--checkbox .wt-form__checkbox{align-items:center}
.wt-form__field--checkbox .wt-form__error{flex-basis:100%}
.wt-form__field--checkbox .wt-tooltip{transform:none}

/* wt-tooltip (gekopieerd uit account.css zodat het ook op form-pagina's werkt) */
.wt-tooltip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0 0 0 4px;padding:0;background:transparent;border:0;cursor:help;color:#9ca3af;vertical-align:middle;transition:color .15s ease;-webkit-tap-highlight-color:transparent}
.wt-tooltip:hover,.wt-tooltip:focus-visible{color:#1e3a6d;outline:none}
.wt-tooltip svg{width:16px;height:16px;pointer-events:none}
.wt-tooltip__bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:12px 14px;font-size:13px;font-weight:400;color:#4b5563;width:280px;max-width:calc(100vw - 32px);line-height:1.45;box-shadow:0 10px 28px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.06);opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;pointer-events:none;z-index:100;text-align:left}
.wt-tooltip__bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;filter:drop-shadow(0 1px 0 #e5e7eb)}
.wt-tooltip:hover .wt-tooltip__bubble,.wt-tooltip:focus-visible .wt-tooltip__bubble,.wt-tooltip.is-active .wt-tooltip__bubble{opacity:1;visibility:visible}

/* nieuwsbrief-checkbox: tekst minimaal omlaag voor perfecte uitlijning met checkbox */
.wt-form__field--checkbox .wt-form__checkbox span{position:relative;top:1px}