/*
 * De Bestuurder — profielformulier
 *
 * Elke regel hangt onder .dbp. Dat is niet cosmetisch: het thema stuurt
 * formulierelementen aan met selectors als input[type="text"], en zonder die
 * extra klasse verliezen onze veldstijlen dat gevecht.
 *
 * Typografie volgt het thema: het formulier gebruikt --uicore-text-font-family,
 * titels en knoppen gebruiken --uicore-secondary-font-family.
 *
 * De maten zijn bewust ruim. Het doelpubliek is 40-plus, dus niets onder 15px
 * en hulpteksten in de gewone tekstkleur in plaats van een lichtgrijs.
 *
 * Regelhoogte is bewust niet die van het thema: 1.875 is goed voor lopende
 * tekst maar maakt invulvelden onwerkbaar hoog.
 */

.dbp {
	/*
	 * Kleuren, fonts en de basismaat komen rechtstreeks uit UICore. Geen eigen
	 * alias ervoor: dat is een tweede naam voor hetzelfde en dus een tweede plek
	 * waar het fout kan gaan. Ook geen terugvalwaarden — als een themavariabele
	 * ontbreekt, erft het element liever de pagina dan dat het naar een
	 * willekeurig ander lettertype springt.
	 *
	 * Hieronder staat alleen wat UICore niet heeft: afgeleide maten en kleuren,
	 * en een paar afmetingen die enkel van dit formulier zijn.
	 */
	--dbp-sm:    calc(var(--uicore-typography--p-s) * 0.9);   /* hulptekst, fouten */
	--dbp-xs:    calc(var(--uicore-typography--p-s) * 0.83);  /* eyebrow, tags */
	--dbp-title: calc(var(--uicore-typography--p-s) * 1.5);   /* staptitels */

	--dbp-line:  color-mix(in srgb, var(--uicore-body-color) 20%, transparent);
	--dbp-muted: color-mix(in srgb, var(--uicore-body-color) 62%, transparent);
	--dbp-soft:  color-mix(in srgb, var(--uicore-light-color) 70%, transparent);
	--dbp-beige: color-mix(in srgb, var(--uicore-primary-color) 22%, var(--uicore-white-color));

	--dbp-lh:        1.5;
	--dbp-control-h: 45px;
	--dbp-btn-h:     54px;
	--dbp-radius:    8px;

	font-family: var(--uicore-text-font-family), serif;
	font-size: var(--uicore-typography--p-s);
	font-weight: 400;
	line-height: var(--dbp-lh);
	letter-spacing: normal;
	color: var(--uicore-body-color);
	width: 100%;
}

.dbp *,
.dbp *::before,
.dbp *::after { box-sizing: border-box; }

.dbp p { margin: 0; text-wrap: pretty; }
.dbp h2, .dbp h3 { text-wrap: balance; }

/* --- Meldingen ---------------------------------------------------------- */

.dbp .dbp-notice {
	border-radius: var(--dbp-radius);
	padding: 14px 18px;
	margin-bottom: 24px;
	border-left: 3px solid;
	font-size: var(--uicore-typography--p-s);
	line-height: var(--dbp-lh);
}
.dbp .dbp-notice--ok    { background: var(--uicore-light-color); border-color: var(--uicore-primary-color); color: var(--uicore-headline-color); }
.dbp .dbp-notice--error { background: color-mix(in srgb, var(--uicore-accent-color) 7%, var(--uicore-white-color)); border-color: var(--uicore-accent-color); color: var(--uicore-accent-color); }

/* --- Stappenbalk --------------------------------------------------------
   Zoals het oorspronkelijke ontwerp: cirkel en label naast elkaar, links
   uitgelijnd, en de actieve stap in een zachte pil. Geen verbindingslijn. */

.dbp .dbp-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}
.dbp .dbp-steps li { margin: 0; padding: 0; list-style: none; }
.dbp .dbp-steps li::marker { content: none; }

.dbp button.dbp-steps__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 4px 18px 4px 3px;
	border: 0;
	background: none;
	border-radius: 999px;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: var(--dbp-sm);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--uicore-typography--h5-ls, -.015em);
	text-transform: none;
	text-align: left;
	color: var(--dbp-muted);
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.dbp .dbp-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--uicore-body-color) 9%, transparent);
	color: var(--dbp-muted);
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: var(--dbp-xs);
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
	transition: background-color .2s, color .2s;
}
.dbp .dbp-steps__label { display: inline-block; padding-left: 1px; white-space: nowrap; }

.dbp .dbp-steps li.is-done .dbp-steps__num,
.dbp .dbp-steps li.is-active .dbp-steps__num {
	background: var(--uicore-primary-color);
	color: var(--uicore-white-color);
}
.dbp .dbp-steps li.is-done button.dbp-steps__btn { color: var(--uicore-body-color); }
.dbp .dbp-steps li.is-active button.dbp-steps__btn {
	background: color-mix(in srgb, var(--uicore-light-color) 85%, transparent);
	color: var(--uicore-headline-color);
	font-weight: 700;
}

@media (max-width: 760px) {
	.dbp .dbp-steps { gap: 10px 14px; }
	.dbp button.dbp-steps__btn { padding-right: 12px; font-size: var(--dbp-xs); }
	.dbp .dbp-steps__num { width: 30px; height: 30px; }
}
@media (max-width: 520px) {
	.dbp .dbp-steps li:not(.is-active) .dbp-steps__label { display: none; }
	.dbp .dbp-steps li:not(.is-active) button.dbp-steps__btn { padding-right: 3px; }
}

/* --- Kaart en stap ------------------------------------------------------ */

.dbp .dbp-card {
	background: var(--uicore-white-color);
	border: 1px solid var(--dbp-line);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	/* Op een telefoon is elke pixel binnenmarge er een die je niet aan tekst
	   besteedt, en de Elementor-container legt er al padding onder. */
	padding: 16px;
}
@media (min-width: 600px) { .dbp .dbp-card { padding: 28px; } }
@media (min-width: 768px) { .dbp .dbp-card { padding: 40px; } }

.dbp .dbp-step { display: none; }
.dbp .dbp-step.is-active { display: block; }
/* Zonder JS blijft alles zichtbaar: het formulier werkt dan als één lange pagina. */
.dbp .dbp-form:not(.is-enhanced) .dbp-step { display: block; margin-bottom: 24px; }

.dbp .dbp-step__eyebrow {
	margin: 0;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: var(--dbp-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--dbp-muted);
}
.dbp h2.dbp-step__title {
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-weight: var(--uicore-typography--h2-w);
	font-size: var(--dbp-title);
	line-height: 1.25;
	letter-spacing: var(--uicore-typography--h2-ls);
	text-transform: none;
	color: var(--uicore-headline-color);
	margin: 8px 0 0;
	padding: 0;
}
.dbp .dbp-step__body { margin-top: 26px; }
.dbp .dbp-step__intro {
	margin: 0 0 24px;
	font-size: var(--uicore-typography--p-s);
	line-height: var(--dbp-lh);
	color: var(--uicore-body-color);
}

/* --- Rasters ------------------------------------------------------------ */

.dbp .dbp-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-content: start;
}
.dbp .dbp-field { grid-column: 1 / -1; min-width: 0; }
.dbp .dbp-field--half { grid-column: span 1; }

/* Smal: het label houdt zijn plek, maar het invulveld wordt niet breder dan
   nodig. Een getal van twee cijfers hoeft geen halve kaartbreedte. */
.dbp .dbp-field--smal .dbp-input,
.dbp .dbp-field--smal .dbp-inputwrap { max-width: 190px; }

/* Stap 1: velden links, profielfoto in een smalle kolom rechts. */
.dbp .dbp-split { display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: start; }
.dbp .dbp-split > * { min-width: 0; }

@media (max-width: 860px) {
	.dbp .dbp-split { grid-template-columns: 1fr; }
	.dbp .dbp-split__aside { max-width: 240px; }
}
@media (max-width: 600px) {
	.dbp .dbp-grid { grid-template-columns: 1fr; }
	.dbp .dbp-field--half { grid-column: 1 / -1; }
}

/* --- Velden ------------------------------------------------------------- */

.dbp .dbp-label {
	display: block;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: var(--uicore-typography--p-s);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--uicore-headline-color);
	margin: 0 0 8px;
}
.dbp .dbp-label--sm { font-size: var(--uicore-typography--p-s); font-weight: 600; color: var(--uicore-headline-color); }
.dbp .dbp-req { color: var(--uicore-primary-color); }
.dbp .dbp-optioneel {
	margin-left: 6px;
	font-family: var(--uicore-text-font-family), serif;
	font-size: var(--dbp-xs);
	font-weight: 400;
	color: var(--dbp-muted);
}
.dbp .dbp-onder {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 8px;
}
.dbp .dbp-onder .dbp-hint { margin: 0; }
.dbp .dbp-teller {
	margin: 0;
	flex-shrink: 0;
	font-size: var(--dbp-xs);
	color: var(--dbp-muted);
	white-space: nowrap;
}
.dbp .dbp-teller.is-vol { color: var(--uicore-accent-color); }

.dbp .dbp-hint {
	margin: 8px 0 0;
	font-size: var(--dbp-sm);
	line-height: 1.5;
	color: var(--uicore-body-color);
}

.dbp input.dbp-input,
.dbp select.dbp-input,
.dbp textarea.dbp-input {
	display: block;
	width: 100%;
	height: var(--dbp-control-h);
	max-width: none;
	margin: 0;
	padding: 0 13px;
	font-family: inherit;
	font-size: var(--uicore-typography--p-s);
	font-weight: 400;
	line-height: var(--dbp-lh);
	letter-spacing: normal;
	text-transform: none;
	color: var(--uicore-headline-color);
	background: var(--uicore-white-color);
	background-image: none;
	border: 1px solid var(--dbp-line);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
	transition: border-color .15s;
	appearance: none;
	-webkit-appearance: none;
}
.dbp input.dbp-input::placeholder,
.dbp textarea.dbp-input::placeholder {
	color: color-mix(in srgb, var(--uicore-body-color) 45%, transparent);
	opacity: 1;
}
.dbp input.dbp-input:focus,
.dbp select.dbp-input:focus,
.dbp textarea.dbp-input:focus {
	outline: none;
	/* Enkel de rand verkleurt; geen gloed eromheen. */
	border-color: var(--uicore-primary-color);
}
.dbp input.dbp-input:disabled,
.dbp select.dbp-input:disabled,
.dbp textarea.dbp-input:disabled {
	background: var(--dbp-soft);
	color: var(--dbp-muted);
	cursor: not-allowed;
}

.dbp textarea.dbp-input {
	height: auto;
	min-height: 0;
	height: auto;
	padding: 11px 13px;
	line-height: 1.6;
	resize: vertical;
}
.dbp select.dbp-input {
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%232E4659' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
}

.dbp .dbp-error {
	display: none;
	margin: 6px 0 0;
	font-size: var(--dbp-sm);
	line-height: 1.4;
	color: var(--uicore-accent-color);
}
.dbp .is-invalid .dbp-error { display: block; }
.dbp .is-invalid input.dbp-input,
.dbp .is-invalid select.dbp-input,
.dbp .is-invalid textarea.dbp-input { border-color: var(--uicore-accent-color); }

/* Eenheid achter een getalveld, zodat duidelijk is wat er verwacht wordt. */
.dbp .dbp-inputwrap { position: relative; }
.dbp .dbp-inputwrap input.dbp-input { padding-right: 62px; }
.dbp .dbp-suffix {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--dbp-sm);
	color: var(--dbp-muted);
	pointer-events: none;
}

/* --- Keuzeknoppen ------------------------------------------------------- */

.dbp .dbp-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.dbp .dbp-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0;
	padding: 9px 18px;
	border: 1px solid var(--dbp-line);
	border-radius: 999px;
	background: var(--uicore-white-color);
	font-family: inherit;
	font-size: var(--uicore-typography--p-s);
	font-weight: 500;
	line-height: 1.4;
	color: var(--uicore-body-color);
	cursor: pointer;
	user-select: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
.dbp .dbp-chip:hover { background: var(--dbp-soft); }
.dbp .dbp-chip input {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.dbp .dbp-chip.is-on {
	background: var(--uicore-primary-color);
	border-color: var(--uicore-primary-color);
	color: var(--uicore-white-color);
}
.dbp .dbp-chip input:focus-visible ~ span { outline: 2px solid var(--uicore-primary-color); outline-offset: 5px; border-radius: 3px; }

/* Talen: vaste, compacte blokjes in plaats van pillen. */
.dbp .dbp-chips--toggle .dbp-chip {
	width: 66px;
	height: var(--dbp-control-h);
	padding: 0;
	border-radius: 6px;
	font-size: var(--uicore-typography--p-s);
	font-weight: 700;
}

.dbp .dbp-radios { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.dbp .dbp-radio, .dbp .dbp-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: inherit;
	font-size: var(--uicore-typography--p-s);
	line-height: 1.4;
	color: var(--uicore-body-color);
	cursor: pointer;
}
.dbp .dbp-radio input, .dbp .dbp-check input {
	appearance: auto;
	-webkit-appearance: auto;
	accent-color: var(--uicore-primary-color);
	width: 16px; height: 16px;
	margin: 0;
}
.dbp .dbp-check { font-size: var(--dbp-sm); color: var(--uicore-body-color); margin-top: 12px; }

/* --- Profielfoto -------------------------------------------------------- */

.dbp .dbp-upload__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 1;
	width: 100%;
	margin: 0;
	position: relative;
	border: 2px dashed color-mix(in srgb, var(--uicore-primary-color) 40%, transparent);
	background: color-mix(in srgb, var(--uicore-light-color) 45%, transparent);
	border-radius: var(--dbp-radius);
	padding: 18px;
	text-align: center;
	cursor: pointer;
	font-size: var(--dbp-sm);
	line-height: 1.5;
	color: var(--uicore-body-color);
	overflow: hidden;
	transition: background-color .15s, border-color .15s;
}
.dbp .dbp-upload__drop:hover, .dbp .dbp-upload__drop.is-over {
	background: var(--uicore-light-color);
	border-color: var(--uicore-primary-color);
}
.dbp .dbp-upload__drop input { position: absolute; opacity: 0; width: 0; height: 0; }
.dbp .dbp-upload__plus { font-size: 24px; line-height: 1; color: var(--uicore-primary-color); }

/* Staat er geen eigen foto, dan vult de standaardavatar het vlak.
   Halfdoorzichtig, zodat het als plaatshouder leest en niet als keuze. */
.dbp .dbp-upload__avatar {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .28;
	pointer-events: none;
}
.dbp .dbp-upload__plus, .dbp .dbp-upload__cta { position: relative; z-index: 1; }

.dbp .dbp-upload__preview { position: absolute; inset: 0; }
.dbp .dbp-upload__preview:empty { display: none; }
.dbp .dbp-upload__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zodra er een echte foto staat, verdwijnt alles wat bij de lege staat hoort —
   inclusief de standaardavatar, die anders als schim over de foto blijft liggen. */
.dbp .dbp-upload__preview:not(:empty) ~ .dbp-upload__cta,
.dbp .dbp-upload__preview:not(:empty) ~ .dbp-upload__plus,
.dbp .dbp-upload__preview:not(:empty) ~ .dbp-upload__avatar { display: none; }

.dbp .dbp-upload:has(.dbp-upload__preview:not(:empty)) .dbp-upload__drop { border-style: solid; padding: 0; }
.dbp .dbp-upload__swap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 8px;
	background: rgba(0,0,0,.55);
	color: #fff;
	font-size: var(--dbp-xs);
	line-height: 1.2;
}
.dbp .dbp-upload__preview:empty ~ .dbp-upload__swap { display: none; }

/* --- Repeaters --------------------------------------------------------- */

/* Drie repeaters onder elkaar lopen zonder scheiding in elkaar over: de
   toevoegknop van de ene staat pal boven het label van de volgende. Een lijn
   plus lucht maakt duidelijk waar een blok eindigt. */
.dbp .dbp-field--repeater {
	margin-top: 14px;
	padding-top: 30px;
	border-top: 1px solid var(--dbp-line);
}
.dbp .dbp-field--repeater .dbp-label {
	font-size: calc(var(--uicore-typography--p-s) * 1.1);
	margin-bottom: 4px;
}
.dbp .dbp-field--repeater .dbp-hint--above { margin-bottom: 18px; }

/* --- Repeater met één veld: een simpele regel ---------------------------- */

.dbp .dbp-regel {
	display: flex;
	align-items: center;
	gap: 10px;
}
.dbp .dbp-regel .dbp-cell { flex: 1; min-width: 0; }
.dbp .dbp-verborgen {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.dbp button.dbp-regel__remove {
	width: 38px; height: 38px;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--dbp-line);
	border-radius: 6px;
	background: var(--uicore-white-color);
	color: var(--dbp-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}
.dbp button.dbp-regel__remove:hover { color: var(--uicore-accent-color); border-color: var(--uicore-accent-color); }
.dbp button.dbp-regel__remove[hidden] { display: none; }

/* --- Mandaten ----------------------------------------------------------- */

.dbp .dbp-repeater__rows { display: flex; flex-direction: column; gap: 16px; }
.dbp .dbp-mandaat {
	border: 1px solid color-mix(in srgb, var(--uicore-primary-color) 22%, transparent);
	border-radius: var(--dbp-radius);
	background: var(--uicore-white-color);
	/* Kaart in een kaart: hier telt de binnenmarge dubbel. */
	padding: 12px;
}
@media (min-width: 600px) { .dbp .dbp-mandaat { padding: 16px; } }
.dbp .dbp-mandaat__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: start;
}
.dbp .dbp-mandaat__years { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dbp .dbp-mandaat__foot { margin-top: 12px; text-align: right; }
.dbp .dbp-cell { min-width: 0; }

.dbp button.dbp-linkbtn {
	border: 0;
	background: none;
	margin: 0;
	padding: 4px 6px;
	font-family: inherit;
	font-size: var(--dbp-sm);
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--uicore-body-color);
	text-decoration: underline;
	cursor: pointer;
	border-radius: 4px;
	transition: color .15s;
}
.dbp button.dbp-linkbtn:hover { color: var(--uicore-accent-color); background: none; }
.dbp button.dbp-linkbtn[hidden] { display: none; }
.dbp .dbp-repeater button.dbp-repeater__add {
	margin-top: 28px;
	border-width: 2px;
	border-color: var(--uicore-primary-color);
	color: var(--uicore-primary-color);
}
/* Opleidingen en functies zijn bijzaak naast de mandaten. */
.dbp .dbp-repeater button.dbp-repeater__add--klein {
	margin-top: 16px;
	height: 40px;
	padding: 0 16px;
	border-width: 1px;
	border-color: var(--dbp-line);
	font-size: var(--dbp-sm);
	font-weight: 500;
	color: var(--uicore-body-color);
}
.dbp .dbp-repeater button.dbp-repeater__add--klein:hover {
	border-color: var(--uicore-primary-color);
	color: var(--uicore-primary-color);
}
.dbp .dbp-repeater button.dbp-repeater__add:hover {
	background: var(--dbp-soft);
	border-color: var(--uicore-primary-color);
	color: var(--uicore-primary-color);
}
.dbp .dbp-hint--above { margin: 0 0 14px; }
.dbp .dbp-repeater__empty {
	margin: 0 0 4px;
	padding: 20px;
	border: 1px dashed var(--dbp-line);
	border-radius: var(--dbp-radius);
	text-align: center;
	font-size: var(--dbp-sm);
	color: var(--uicore-body-color);
}
.dbp .dbp-repeater__empty[hidden] { display: none; }

@media (max-width: 600px) {
	.dbp .dbp-mandaat__grid { grid-template-columns: 1fr; }
}

/* --- Knoppen ------------------------------------------------------------ */

.dbp .dbp-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}
.dbp .dbp-nav__right { display: flex; gap: 10px; margin-left: auto; }

.dbp button.dbp-btn,
.dbp a.dbp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--dbp-btn-h);
	margin: 0;
	padding: 0 26px;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: var(--uicore-typography--p-s);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
.dbp button.dbp-btn--primary,
.dbp a.dbp-btn--primary { background: var(--uicore-primary-color); color: var(--uicore-white-color); }
.dbp button.dbp-btn--primary:hover,
.dbp a.dbp-btn--primary:hover { background: color-mix(in srgb, var(--uicore-primary-color) 88%, #000); color: var(--uicore-white-color); }
.dbp button.dbp-btn--outline,
.dbp a.dbp-btn--outline { background: var(--uicore-white-color); border-color: var(--dbp-line); color: var(--uicore-body-color); }
.dbp button.dbp-btn--outline:hover,
.dbp a.dbp-btn--outline:hover { border-color: var(--uicore-primary-color); color: var(--uicore-primary-color); background: var(--uicore-white-color); }
.dbp button.dbp-btn[hidden], .dbp a.dbp-btn[hidden] { display: none; }
.dbp button.dbp-btn:disabled { opacity: .4; cursor: not-allowed; }
.dbp button.dbp-btn--outline:disabled:hover { border-color: var(--dbp-line); color: var(--uicore-body-color); }
.dbp .dbp-chev { font-size: 1.2em; line-height: 1; }

@media (max-width: 480px) {
	.dbp .dbp-nav { flex-direction: column-reverse; align-items: stretch; }
	.dbp .dbp-nav__right { margin-left: 0; flex-direction: column; }
	.dbp button.dbp-btn, .dbp a.dbp-btn { width: 100%; }
	.dbp .dbp-gate__actions .dbp-btn { width: 100%; }
}

/* --- Review en overzicht ------------------------------------------------ */

.dbp .dbp-overview__head {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--dbp-line);
}
.dbp .dbp-avatar {
	width: 88px; height: 88px;
	border-radius: var(--dbp-radius);
	overflow: hidden;
	background: var(--uicore-light-color);
	flex-shrink: 0;
}
.dbp .dbp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dbp h2.dbp-overview__name {
	margin: 0 0 4px;
	padding: 0;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-weight: var(--uicore-typography--h2-w);
	font-size: var(--dbp-title);
	line-height: 1.2;
	letter-spacing: var(--uicore-typography--h2-ls);
	text-transform: none;
	color: var(--uicore-headline-color);
}
.dbp .dbp-overview__meta { margin: 0 0 10px; color: var(--uicore-body-color); font-size: var(--dbp-sm); line-height: 1.5; }
.dbp .dbp-overview__acties { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }

.dbp .dbp-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--uicore-light-color);
	color: var(--uicore-primary-color);
	font-size: var(--dbp-xs);
	font-weight: 500;
	line-height: 1.4;
}

.dbp .dbp-summary, .dbp .dbp-review { margin: 0; }
.dbp .dbp-summary__row, .dbp .dbp-review__row {
	display: grid;
	grid-template-columns: 240px 1fr auto;
	gap: 20px;
	padding: 16px 0;
	align-items: start;
	border-bottom: 1px solid var(--dbp-line);
	font-size: var(--uicore-typography--p-s);
	line-height: 1.55;
}
.dbp .dbp-summary__row:last-child, .dbp .dbp-review__row:last-child { border-bottom: 0; }
.dbp .dbp-summary dt, .dbp .dbp-review__label { font-weight: 600; color: var(--uicore-headline-color); margin: 0; }
.dbp .dbp-summary dd, .dbp .dbp-review__value { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dbp .dbp-summary a, .dbp .dbp-review__value a { overflow-wrap: anywhere; }

/* Bewerkicoon per rij, in het overzicht en in de controlestap. */
.dbp a.dbp-editrow,
.dbp button.dbp-editrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
	border: 1px solid var(--dbp-line);
	border-radius: 6px;
	background: var(--uicore-white-color);
	color: var(--uicore-body-color);
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: color .15s, border-color .15s, background-color .15s;
}
.dbp a.dbp-editrow:hover,
.dbp button.dbp-editrow:hover {
	color: var(--uicore-primary-color);
	border-color: var(--uicore-primary-color);
	background: var(--dbp-soft);
}

@media (max-width: 640px) {
	.dbp .dbp-summary__row, .dbp .dbp-review__row { grid-template-columns: 1fr auto; gap: 4px 12px; }
	.dbp .dbp-summary__row dt, .dbp .dbp-review__label { grid-column: 1; }
	.dbp .dbp-summary__row dd, .dbp .dbp-review__value { grid-column: 1; }
	.dbp a.dbp-editrow, .dbp button.dbp-editrow { grid-column: 2; grid-row: 1 / span 2; }
	.dbp .dbp-overview__acties { margin-left: 0; }
}

.dbp .dbp-tag {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	padding: 3px 11px;
	margin: 0 6px 6px 0;
	border: 1px solid var(--dbp-line);
	border-radius: 999px;
	font-size: var(--dbp-xs);
	line-height: 1.5;
}
.dbp ul.dbp-list { margin: 0; padding-left: 18px; list-style: disc; }
.dbp ul.dbp-list li { margin-bottom: 4px; }
.dbp .dbp-muted { color: var(--dbp-muted); }
.dbp .dbp-review__empty { color: var(--dbp-muted); font-style: italic; }

/* --- Toegangspoort ------------------------------------------------------
   Wat een bezoeker ziet zonder aanmelding of zonder lopend abonnement.
   Het inlogformulier komt van wp_login_form(), dus we stylen ook diens
   eigen opmaak mee. */

@media (min-width: 768px) { .dbp .dbp-gate { padding: 44px; } }

.dbp h2.dbp-gate__title {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-weight: var(--uicore-typography--h2-w);
	font-size: var(--dbp-title);
	line-height: 1.25;
	letter-spacing: var(--uicore-typography--h2-ls);
	color: var(--uicore-headline-color);
}
/* Ruim genoeg voor twee regels; de bovengrens houdt de regellengte in toom
   wanneer de Elementor-container erg breed staat. */
.dbp .dbp-gate__intro { margin: 0 0 28px; max-width: 78ch; text-wrap: pretty; }
.dbp .dbp-gate p { margin: 0 0 12px; }

.dbp .dbp-gate__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--dbp-line);
}
@media (max-width: 720px) {
	.dbp .dbp-gate__cols { grid-template-columns: 1fr; gap: 32px; }
	.dbp .dbp-gate__col--login { padding-top: 28px; border-top: 1px solid var(--dbp-line); }
}

/* Duidelijk boven de veldlabels staan, anders is er geen hiërarchie. */
.dbp h3.dbp-gate__subtitle {
	margin: 0 0 10px;
	padding: 0;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: calc(var(--uicore-typography--p-s) * 1.25);
	font-weight: var(--uicore-typography--h2-w, 700);
	letter-spacing: var(--uicore-typography--h2-ls, -.02em);
	line-height: 1.25;
	color: var(--uicore-headline-color);
}
.dbp .dbp-gate__col .dbp-btn { margin-top: 8px; }
.dbp .dbp-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dbp .dbp-gate__whoami {
	margin: 24px 0 0;
	font-size: var(--dbp-sm);
	color: var(--dbp-muted);
}
/* Met de klasse alleen (0-2-0) verliest dit van `.dbp .dbp-gate p` (0-2-1)
   hierboven, waardoor de link tegen de knop plakte en er 12px onder
   overbleef. Vandaar het elementtype erbij. */
.dbp .dbp-gate p.dbp-gate__forgot { margin: 18px 0 0; font-size: var(--dbp-sm); }
.dbp .dbp-gate__admin { font-size: var(--dbp-sm); color: var(--uicore-accent-color); }
/* Wat een kolom ook als laatste bevat, onderaan telt enkel de padding van
   de kaart mee. Anders wijkt de witruimte onderaan af van links en rechts. */
.dbp .dbp-gate__col > *:last-child { margin-bottom: 0; }

/* Opmaak van wp_login_form(). */
.dbp .dbp-gate #loginform p { margin: 0 0 16px; }
.dbp .dbp-gate #loginform label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--uicore-typography--p-s);
	font-weight: 600;
	line-height: 1.4;
	color: var(--uicore-headline-color);
}
.dbp .dbp-gate input[type="text"],
.dbp .dbp-gate input[type="password"] {
	display: block;
	width: 100%;
	height: var(--dbp-control-h);
	margin: 0;
	padding: 0 13px;
	font-family: inherit;
	font-size: var(--uicore-typography--p-s);
	font-weight: 400;
	line-height: var(--dbp-lh);
	color: var(--uicore-headline-color);
	background: var(--uicore-white-color);
	border: 1px solid var(--dbp-line);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
	appearance: none;
	-webkit-appearance: none;
}
.dbp .dbp-gate input[type="text"]:focus,
.dbp .dbp-gate input[type="password"]:focus {
	outline: none;
	border-color: var(--uicore-primary-color);
}
.dbp .dbp-gate #loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: var(--dbp-sm);
	color: var(--uicore-body-color);
	margin-bottom: 0;
}
.dbp .dbp-gate #loginform .login-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--uicore-primary-color); }
.dbp .dbp-gate #loginform .login-submit { margin-bottom: 0; }
.dbp .dbp-gate input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--dbp-btn-h);
	margin: 0;
	padding: 0 26px;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: var(--uicore-typography--p-s);
	font-weight: 700;
	line-height: 1.2;
	color: var(--uicore-white-color);
	background: var(--uicore-primary-color);
	border: 1px solid transparent;
	border-radius: 6px;
	box-shadow: none;
	cursor: pointer;
	text-transform: none;
}
.dbp .dbp-gate input[type="submit"]:hover {
	background: color-mix(in srgb, var(--uicore-primary-color) 88%, #000);
	color: var(--uicore-white-color);
}

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor bots. */
.dbp .dbp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =======================================================================
   Databank: zijbalk met filters plus het resultatenraster
   ======================================================================= */

.dbp-databank {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
@media (max-width: 900px) {
	.dbp-databank { grid-template-columns: 1fr; gap: 20px; }
}


/* --- Zijbalk ------------------------------------------------------------ */

.dbp .dbp-zijbalk__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
}
.dbp .dbp-zijbalk__kop .dbp-zijbalk__titel { margin: 0; }
.dbp .dbp-zijbalk__titel {
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: calc(var(--uicore-typography--p-s) * 1.15);
	font-weight: var(--uicore-typography--h2-w);
	line-height: 1.2;
	color: var(--uicore-headline-color);
}
.dbp .dbp-zijbalk {
	padding: 22px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--uicore-light-color) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--uicore-primary-color) 14%, transparent);
}
.dbp .dbp-filter { border-top: 1px solid color-mix(in srgb, var(--uicore-primary-color) 16%, transparent); }
.dbp .dbp-filter:first-of-type { border-top: 0; }

.dbp button.dbp-filter__kop {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 14px 0;
	border: 0;
	background: none;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: var(--dbp-sm);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--uicore-typography--h5-ls, -.015em);
	text-align: left;
	color: var(--uicore-headline-color);
	cursor: pointer;
}
.dbp .dbp-filter__titel { flex: 1; }
.dbp .dbp-filter__aantal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--uicore-primary-color);
	color: var(--uicore-white-color);
	font-size: var(--dbp-xs);
	font-weight: 700;
	line-height: 1;
}
.dbp .dbp-filter__aantal[hidden] { display: none; }
.dbp .dbp-filter__pijl {
	width: 9px; height: 9px;
	flex-shrink: 0;
	border-right: 2px solid var(--uicore-primary-color);
	border-bottom: 2px solid var(--uicore-primary-color);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .18s;
}
.dbp .dbp-filter.is-open .dbp-filter__pijl { transform: rotate(-135deg) translate(-3px, -3px); }

.dbp .dbp-filter__paneel { display: none; padding: 0 0 18px; }
.dbp .dbp-filter.is-open .dbp-filter__paneel { display: block; }
.dbp ul.dbp-filter__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dbp ul.dbp-filter__lijst.is-ingeklapt .dbp-filter__extra { display: none; }
.dbp .dbp-check--filter {
	margin: 0;
	font-size: var(--dbp-sm);
	color: var(--uicore-body-color);
	align-items: flex-start;
}
.dbp .dbp-check--filter input { margin-top: 2px; }
.dbp .dbp-radios--filter { flex-direction: column; gap: 8px; }
.dbp button.dbp-filter__meer { margin-top: 10px; padding-left: 0; }
.dbp .dbp-filters__reset { width: 100%; margin-top: 36px; }

/* --- Vlaggen ------------------------------------------------------------ */

.dbp .dbp-vlaggen { display: flex; flex-wrap: wrap; gap: 10px; }
.dbp .dbp-vlaggen { gap: 14px; }
.dbp .dbp-vlag {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin: 0;
	cursor: pointer;
}
/* Uit staan betekent gedempt, niet onherkenbaar: de vlag blijft in kleur. */
.dbp .dbp-vlag img {
	width: 38px; height: 38px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	opacity: .55;
	box-shadow: 0 0 0 2px transparent;
	transition: opacity .15s, box-shadow .15s;
}
.dbp .dbp-vlag__code {
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: var(--dbp-xs);
	font-weight: 600;
	line-height: 1;
	color: var(--dbp-muted);
	transition: color .15s;
}
.dbp .dbp-vlag input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.dbp .dbp-vlag:hover img { opacity: .85; }
.dbp .dbp-vlag.is-on img { opacity: 1; box-shadow: 0 0 0 2px var(--uicore-primary-color); }
.dbp .dbp-vlag.is-on .dbp-vlag__code { color: var(--uicore-primary-color); font-weight: 700; }

/* --- Dubbele slider ----------------------------------------------------- */

.dbp .dbp-bereik__spoor { position: relative; height: 32px; margin-top: 28px; }
.dbp .dbp-bereik__bel {
	position: absolute;
	bottom: 100%;
	transform: translateX(-50%);
	margin-bottom: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--uicore-primary-color);
	color: var(--uicore-white-color);
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: var(--dbp-xs);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
}
.dbp .dbp-bereik__schaal {
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
	font-size: var(--dbp-xs);
	color: var(--dbp-muted);
}
.dbp .dbp-bereik__spoor::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 5px;
	transform: translateY(-50%);
	border-radius: 3px;
	background: color-mix(in srgb, var(--uicore-primary-color) 18%, transparent);
}
.dbp .dbp-bereik__vulling {
	position: absolute;
	top: 50%;
	height: 5px;
	transform: translateY(-50%);
	border-radius: 3px;
	background: var(--uicore-primary-color);
}
/* Twee sliders over elkaar: de balk vangt geen muis, alleen de knopjes. */
.dbp .dbp-bereik__spoor input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 32px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}
.dbp .dbp-bereik__spoor input[type="range"]::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--uicore-white-color);
	border: 2px solid var(--uicore-primary-color);
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
	cursor: grab;
}
.dbp .dbp-bereik__spoor input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--uicore-white-color);
	border: 2px solid var(--uicore-primary-color);
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
	cursor: grab;
}
.dbp .dbp-bereik__spoor input[type="range"]::-moz-range-track { background: none; border: 0; }
.dbp .dbp-bereik__spoor input[data-bereik-input="van"] { z-index: 3; }
.dbp .dbp-bereik__spoor input[data-bereik-input="tot"] { z-index: 4; }

/* --- Filterlade op smalle schermen --------------------------------------
   Op brede schermen staat de zijbalk gewoon naast de resultaten en bestaan de
   knop, de overlay, de sluitknop en de voet niet. Onder 900px wordt dezelfde
   zijbalk een lade die van links inschuift, zodat de resultaten meteen in beeld
   staan in plaats van onder een scherm vol filters. */

.dbp button.dbp-filterknop,
.dbp .dbp-laag,
.dbp .dbp-zijbalk__sluit,
.dbp .dbp-zijbalk__voet { display: none; }

@media (max-width: 900px) {
	/* Elementtype erbij: anders wint `.dbp button.dbp-btn { width: 100% }` uit
	   de 480px-regel en rekt de knop over de volle breedte uit. */
	.dbp button.dbp-filterknop {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		width: auto;
		justify-self: start;
	}
	.dbp .dbp-filterknop__aantal {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border-radius: 11px;
		background: var(--uicore-primary-color);
		color: var(--uicore-white-color);
		font-size: 13px;
		line-height: 1;
	}

	/* Ruim boven de sticky header van het thema: die ligt zelf al hoog en zou
	   anders onverduisterd boven de lade blijven staan. */
	.dbp .dbp-laag {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99998;
		background: rgba(0, 0, 0, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .28s ease, visibility .28s;
	}

	.dbp .dbp-zijbalk {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 99999;
		display: flex;
		flex-direction: column;
		width: min(360px, 88vw);
		padding: 20px;
		border: 0;
		border-radius: 0;
		/* Ondoorzichtig, want hieronder loopt de pagina gewoon door. */
		background: var(--uicore-light-color, #FBF5EE);
		box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform .28s ease, visibility .28s;
		overscroll-behavior: contain;
	}

	.dbp .dbp-zijbalk__kop { flex-shrink: 0; }

	/* Alleen de filters scrollen; kop en voet blijven staan. De negatieve marge
	   laat de scheidingslijnen van de groepen tot aan de rand doorlopen. */
	.dbp .dbp-filters {
		flex: 1 1 auto;
		overflow-y: auto;
		margin: 0 -20px;
		padding: 0 20px;
	}

	.dbp button.dbp-zijbalk__sluit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		flex-shrink: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		color: var(--uicore-headline-color);
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
	}
	.dbp button.dbp-zijbalk__sluit:hover {
		background: color-mix(in srgb, var(--uicore-primary-color) 12%, transparent);
	}

	.dbp .dbp-zijbalk__voet {
		display: block;
		flex-shrink: 0;
		margin: 16px -20px -20px;
		padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
		border-top: 1px solid color-mix(in srgb, var(--uicore-primary-color) 16%, transparent);
	}
	.dbp .dbp-zijbalk__voet .dbp-btn { width: 100%; }

	.dbp-databank.is-filters-open .dbp-zijbalk { transform: none; visibility: visible; }
	.dbp-databank.is-filters-open .dbp-laag { opacity: 1; visibility: visible; }
}

/* De pagina eronder mag niet meescrollen zolang de lade openstaat. */
.dbp-lade-open, .dbp-lade-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.dbp .dbp-zijbalk, .dbp .dbp-laag { transition: none; }
}

/* --- Resultaten --------------------------------------------------------- */

.dbp .dbp-resultaten { position: relative; min-height: 200px; }
.dbp .dbp-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
@media (max-width: 680px) { .dbp .dbp-raster { grid-template-columns: 1fr; } }

.dbp .dbp-raster.is-laden { pointer-events: none; }

/* Lichte sluier over het raster, zodat het draaiende icoon opvalt zonder
   dat de resultaten verspringen. */
.dbp .dbp-lader {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 80px;
	background: color-mix(in srgb, var(--uicore-white-color) 72%, transparent);
	backdrop-filter: blur(1px);
}
.dbp .dbp-lader[hidden] { display: none; }
.dbp .dbp-lader__cirkel {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--uicore-primary-color) 22%, transparent);
	border-top-color: var(--uicore-primary-color);
	animation: dbp-draai .7s linear infinite;
}
@keyframes dbp-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.dbp .dbp-lader__cirkel { animation-duration: 2s; }
}

/* --- Kaart -------------------------------------------------------------- */

/* Even hoog binnen een rij; de voet zakt met margin-top:auto naar beneden,
   zodat de beschikbaarheid overal op dezelfde hoogte staat. */
.dbp .dbp-kaart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	gap: 14px;
	padding: 20px;
	border: 1px solid var(--dbp-beige);
	border-radius: 12px;
	background: var(--uicore-white-color);
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.dbp .dbp-kaart__kop { display: flex; align-items: flex-start; gap: 14px; width: 100%; }
.dbp .dbp-kaart__foto {
	width: 68px; height: 68px;
	flex-shrink: 0;
	border-radius: 10px;
	object-fit: cover;
	background: var(--uicore-light-color);
}
.dbp .dbp-kaart__namen { min-width: 0; flex: 1; }
.dbp .dbp-kaart__naam {
	margin: 0 0 2px;
	padding: 0;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: calc(var(--uicore-typography--p-s) * 1.1);
	font-weight: 700;
	line-height: 1.25;
	color: var(--uicore-headline-color);
	overflow-wrap: anywhere;
}
.dbp .dbp-kaart__meta { margin: 0; font-size: var(--dbp-sm); color: var(--dbp-muted); }

/* De matchingscore is waar dit platform om draait, dus die krijgt het gewicht.
   Geen gevuld pilletje maar een cijfer: dat leest als een waarde, niet als
   een etiket, en laat de kleur het werk doen. */
.dbp .dbp-match {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1;
	text-align: right;
	white-space: nowrap;
}
.dbp .dbp-match__cijfer {
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: calc(var(--uicore-typography--p-s) * 1.55);
	font-weight: 700;
	letter-spacing: var(--uicore-typography--h2-ls, -.02em);
	color: var(--uicore-primary-color);
}
.dbp .dbp-match__woord {
	margin-top: 3px;
	font-size: var(--dbp-xs);
	font-weight: 500;
	color: var(--dbp-muted);
}

.dbp .dbp-resultaten__intro {
	margin: 0 0 18px;
	font-size: var(--dbp-sm);
	color: var(--dbp-muted);
}

.dbp .dbp-kaart__mandaten {
	width: 100%;
	padding: 14px 0;
	border-top: 1px solid var(--dbp-beige);
	border-bottom: 1px solid var(--dbp-beige);
}
.dbp .dbp-kaart__kopje {
	margin: 0 0 8px;
	font-family: var(--uicore-secondary-font-family), sans-serif;
	font-size: var(--uicore-typography--h5-s, 16px);
	font-weight: var(--uicore-typography--h5-w, 700);
	letter-spacing: var(--uicore-typography--h5-ls, -.015em);
	line-height: 1.25;
	text-transform: none;
	color: var(--uicore-headline-color);
}
.dbp .dbp-kaart__rest {
	margin: 6px 0 0;
	font-size: var(--dbp-sm);
	color: var(--dbp-muted);
}
.dbp .dbp-kaart__mandaten ul { margin: 0; padding: 0; list-style: none; }
.dbp .dbp-kaart__mandaten li { margin: 0 0 4px; font-size: var(--dbp-sm); }
.dbp .dbp-kaart__mandaten li:last-child { margin-bottom: 0; }
.dbp .dbp-kaart__mandaten p { font-size: var(--dbp-sm); }

.dbp .dbp-kaart__tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* Bewust ingetogen: de knop mag de matchingscore niet overschreeuwen. */
.dbp .dbp-kaart__voet {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-top: auto;
	flex-wrap: wrap;
}
.dbp .dbp-kaart__knop {
	width: auto;
	height: 42px;
	padding: 0 22px;
	font-size: var(--dbp-sm);
}

.dbp .dbp-badge--ja      { background: color-mix(in srgb, #1e7a45 14%, var(--uicore-white-color)); color: #1a6b3c; }
.dbp .dbp-badge--beperkt { background: color-mix(in srgb, var(--uicore-primary-color) 16%, var(--uicore-white-color)); color: color-mix(in srgb, var(--uicore-primary-color) 80%, #000); }
.dbp .dbp-badge--nee     { background: color-mix(in srgb, var(--uicore-body-color) 10%, var(--uicore-white-color)); color: var(--dbp-muted); }

/* --- Paginering en lege staat ------------------------------------------- */

.dbp .dbp-paginering {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}
.dbp .dbp-paginering__stand { font-size: var(--dbp-sm); color: var(--dbp-muted); }
.dbp .dbp-leeg {
	padding: 40px;
	text-align: center;
	color: var(--dbp-muted);
	border: 1px dashed var(--dbp-line);
	border-radius: 12px;
}

/* --- Contactopname ------------------------------------------------------ */

.dbp .dbp-contact__knop[hidden] { display: none; }
.dbp .dbp-contact__melding {
	margin: 12px 0 0;
	padding: 14px 16px;
	border-radius: var(--dbp-radius);
	border-left: 3px solid var(--uicore-primary-color);
	background: var(--uicore-white-color);
	font-size: var(--dbp-sm);
	line-height: 1.5;
	color: var(--uicore-headline-color);
}
.dbp .dbp-contact__melding[hidden] { display: none; }
.dbp .dbp-contact__melding.is-fout {
	border-left-color: var(--uicore-accent-color);
	background: color-mix(in srgb, var(--uicore-accent-color) 7%, var(--uicore-white-color));
	color: var(--uicore-accent-color);
}

.dbp .dbp-tag--rest {
	border-style: dashed;
	color: var(--dbp-muted);
}

/* --- Losse matchingscore op het bestuurderstemplate --------------------- */

.dbp-match-los { display: inline-block; width: auto; }
.dbp-match-los .dbp-match { align-items: flex-start; text-align: left; }

/* Op een profielpagina staat de score tussen andere gegevens. Als los cijfer
   met een klein woordje eronder valt hij weg; als gevuld pilletje op één regel
   houdt hij zijn gewicht. */
.dbp-match-los--badge {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--uicore-primary-color, #C77E24);
	color: var(--uicore-white-color, #fff);
	font-family: var(--uicore-secondary-font-family, sans-serif);
	font-size: calc(var(--uicore-typography--p-s, 18px) * 1.05);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	white-space: nowrap;
}
.dbp-match-los--tekst {
	font-family: var(--uicore-secondary-font-family, sans-serif);
	font-size: calc(var(--uicore-typography--p-s, 18px) * 1.05);
	font-weight: 700;
	line-height: 1.3;
	color: var(--uicore-primary-color, #C77E24);
	white-space: nowrap;
}
.dbp-match__leeg { display: none; }

/* Foto verwijderen: alleen zichtbaar wanneer er iets te verwijderen valt. */
.dbp .dbp-upload { position: relative; }
.dbp button.dbp-upload__wis {
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 2;
	display: none;
	width: 30px; height: 30px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--uicore-white-color);
	border-radius: 50%;
	background: var(--uicore-accent-color);
	color: var(--uicore-white-color);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.dbp .dbp-upload:has(.dbp-upload__preview:not(:empty)) button.dbp-upload__wis { display: block; }
.dbp button.dbp-upload__wis:hover { background: color-mix(in srgb, var(--uicore-accent-color) 85%, #000); }

/* --- Venster bij contactopname ------------------------------------------ */

/* Uitgevoerd: de knop blijft staan maar is duidelijk buiten werking. Ook voor
   een Elementor-knop, want die kent geen eigen disabled-opmaak. */
.dbp [data-contact-knop][disabled],
.dbp [data-contact-knop].is-gedaan {
	opacity: .55;
	cursor: default;
	pointer-events: none;
	filter: grayscale(.5);
}

.dbp .dbp-dialoog {
	width: min(560px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,.22);
	color: var(--uicore-body-color, #2E4659);
}
.dbp .dbp-dialoog::backdrop { background: rgba(7,7,7,.45); }
.dbp .dbp-dialoog__form { padding: 28px; margin: 0; }
.dbp .dbp-dialoog__titel {
	margin: 0 0 10px;
	padding: 0;
	font-family: var(--uicore-secondary-font-family, sans-serif);
	font-size: calc(var(--uicore-typography--p-s, 18px) * 1.25);
	font-weight: var(--uicore-typography--h2-w, 700);
	line-height: 1.25;
	color: var(--uicore-headline-color, #070707);
}
.dbp .dbp-dialoog__intro {
	margin: 0 0 20px;
	font-size: var(--uicore-typography--p-s, 18px);
	line-height: 1.6;
	color: var(--uicore-body-color, #2E4659);
}
.dbp .dbp-dialoog .dbp-label { margin-top: 20px; }
.dbp .dbp-dialoog__teller { margin-top: 6px; }
.dbp .dbp-dialoog__knoppen {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 22px;
}
@media (max-width: 520px) {
	.dbp .dbp-dialoog__knoppen { flex-direction: column-reverse; }
	.dbp-dialoog__knoppen .dbp-btn { width: 100%; }
}

.dbp .dbp-naar-databank { margin: 0 0 22px; text-align: right; }

/* Bevestiging blijft in het venster staan. */
.dbp .dbp-dialoog__klaar { padding: 32px 28px 28px; text-align: center; }
.dbp .dbp-dialoog__klaar[hidden] { display: none; }
.dbp .dbp-dialoog__klaar .dbp-dialoog__titel,
.dbp .dbp-dialoog__klaar .dbp-dialoog__intro { text-align: center; }
.dbp .dbp-dialoog__klaar .dbp-dialoog__knoppen { justify-content: center; }
.dbp .dbp-dialoog__vink {
	width: 56px; height: 56px;
	margin-inline: auto;
	margin-block: 0 18px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, #1e7a45 14%, #fff);
	color: #1a6b3c;
	font-size: 26px;
	line-height: 1;
}
.dbp .dbp-dialoog__fout {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: var(--dbp-radius, 8px);
	border-left: 3px solid var(--uicore-accent-color, #BB0C12);
	background: color-mix(in srgb, var(--uicore-accent-color, #BB0C12) 7%, #fff);
	font-size: var(--dbp-sm);
	line-height: 1.5;
	color: var(--uicore-accent-color, #BB0C12);
}
.dbp .dbp-dialoog__fout[hidden] { display: none; }


/* --- Vrije invoer binnen een chiprij ------------------------------------- */

/* Eigen sectoren en competenties staan tussen de vaste keuzes, maar moeten er
   herkenbaar van verschillen: omkeerde vulling in plaats van een rand. */
.dbp .dbp-chip--eigen {
	gap: 6px;
	padding-right: 8px;
	background: var(--uicore-light-color);
	border-color: color-mix(in srgb, var(--uicore-primary-color) 35%, transparent);
	color: var(--uicore-headline-color);
	cursor: default;
}
.dbp button.dbp-chip__wis {
	width: 20px; height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--dbp-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.dbp button.dbp-chip__wis:hover {
	background: color-mix(in srgb, var(--uicore-accent-color) 12%, transparent);
	color: var(--uicore-accent-color);
}

.dbp button.dbp-chip--toevoegen {
	gap: 6px;
	border-color: var(--uicore-body-color);
	background: var(--uicore-body-color);
	color: var(--uicore-light-color);
}
.dbp button.dbp-chip--toevoegen:hover {
	background: color-mix(in srgb, var(--uicore-body-color) 85%, #000);
	border-color: color-mix(in srgb, var(--uicore-body-color) 85%, #000);
	color: var(--uicore-light-color);
}
.dbp button.dbp-chip--toevoegen[hidden] { display: none; }

/* Het invoervakje moet zich als een chip gedragen én als een invulveld lezen.
   De hoogte komt van de eigen padding: height:100% verwees naar een ouder die
   zijn hoogte juist uit dit veld haalt, en klapte daardoor dicht. */
.dbp .dbp-chip--invoer,
.dbp .dbp-chip--invoer:hover {
	padding: 0;
	background: var(--uicore-body-color);
	border-color: var(--uicore-body-color);
}
/* Focus in dezelfde tinten; een oranje ring valt hier uit de toon. */
.dbp .dbp-chip--invoer:focus-within {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--uicore-light-color) 45%, transparent);
}
.dbp .dbp-chip--invoer input {
	/* .dbp .dbp-chip input zet elke input op absoluut en onzichtbaar, want dat
	   is wat de vinkjes nodig hebben. Hier moet hij juist zichtbaar zijn. */
	position: static;
	inset: auto;
	opacity: 1;
	appearance: auto;
	-webkit-appearance: none;
	cursor: text;
	width: 16em;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: var(--uicore-typography--p-s);
	font-weight: 500;
	line-height: 1.4;
	color: var(--uicore-light-color);
}
.dbp .dbp-chip--invoer input::placeholder {
	color: color-mix(in srgb, var(--uicore-light-color) 60%, transparent);
	opacity: 1;
}
.dbp .dbp-chip--invoer input:focus { outline: none; }
.dbp .dbp-chip--invoer input { padding-right: 6px; }

/* Bevestigen met een klik, voor wie Enter niet vanzelfsprekend vindt. */
.dbp button.dbp-chip__ok {
	width: 30px; height: 30px;
	flex-shrink: 0;
	margin: 0 6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--uicore-primary-color);
	color: var(--uicore-white-color);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s;
}
.dbp button.dbp-chip__ok:hover { background: color-mix(in srgb, var(--uicore-primary-color) 85%, #000); }

/* --- Sectoren en competenties op het bestuurderstemplate ----------------- */

.dbp-pillen { display: flex; flex-wrap: wrap; gap: 8px; width: auto; }
.dbp-pillen .dbp-pil {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--uicore-primary-color, #C77E24);
	border-radius: 32px;
	background: none;
	font-family: var(--uicore-text-font-family), serif;
	font-size: 16px;
	line-height: 1;
	color: var(--uicore-body-color, #2E4659);
}
/* Zelf opgegeven waarden: zachte vulling, zachtere rand. Dezelfde behandeling
   als in het formulier, zodat het profiel en het invulscherm overeenkomen. */
.dbp-pillen .dbp-pil--eigen {
	background: var(--uicore-light-color, #FBF5EE);
	border-color: color-mix(in srgb, var(--uicore-primary-color, #C77E24) 35%, transparent);
}
.dbp-pil__leeg { display: none; }