.vwalz {
	--vwalz-button: #006f32; /* zoekknop: icoon in rust + hover-achtergrond (invert) */
	--vwalz-button-dark: #00531f; /* donkerder variant: hover van links + checkbox-focusrand */
	--vwalz-heading: #006f32;
	--vwalz-field-bg: #ffffff;
	--vwalz-text: #2d2d2d;
	--vwalz-muted: #6b7280;
	--vwalz-green-800: #006f32; /* vast merkgroen: vinkje + laad-spinner */
	--vwalz-gray-500: #909090;  /* placeholder + afstand */
	--vwalz-gray-900: #252525;  /* getypte tekst + locatie-pin + adres + telefoon */

	position: relative; /* anker voor de overlay-spinner */
	color: var(--vwalz-text);
	max-width: 100%;
}

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

.vwalz input,
.vwalz select,
.vwalz button,
.vwalz textarea {
	font-family: inherit !important;
}

.vwalz .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* ---- Container ----
   De plugin rendert puur de inhoud (kop, filters, zoekbalk, resultaten) en
   tekent géén eigen kader/achtergrond meer. Het "blokje" eromheen (achtergrond,
   afronding, padding) verzorg je zelf, bijvoorbeeld met een Divi-sectie/rij.
   Wil je het oude groene paneel terug, geef dit element dan in je eigen CSS een
   background/border-radius/padding. */
.vwalz-panel {
	min-width: 0;
}

.vwalz-heading {
	margin: 0 0 18px;
	padding-left: 15px; /* op dezelfde lijn als de zoekveld-tekst */
	color: var(--vwalz-heading);
}

/* ---- Filters & opties ---- */
.vwalz-filter {
	border: none;
	margin: 0 0 18px;
	padding: 0 0 0 15px; /* op dezelfde lijn als de zoekveld-tekst */
	min-width: 0; /* fieldset-fix voor flexbox */
}

.vwalz-filter__legend {
	padding: 0;
	margin: 0 0 8px;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	color: var(--vwalz-heading);
}

.vwalz-options {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px 28px;
}

.vwalz-option,
.vwalz-locked__item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 15px;
	row-gap: 10px;
	cursor: pointer;
	line-height: 1.2 !important;
}

.vwalz-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.vwalz-option__box {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: var(--vwalz-field-bg);
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s ease, border-color 0.12s ease;
}

/* Vinkje: groen op een licht vakje (niet wit op een gevuld vakje). */
.vwalz-option__box::after {
	content: "";
	width: 6px;
	height: 11px;
	border: solid var(--vwalz-green-800);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate( 45deg ) scale( 0 );
	transform-origin: center;
	transition: transform 0.12s ease;
	margin-top: -2px;
}

.vwalz-option input:checked + .vwalz-option__box {
	background: #f4f6f4;
}

.vwalz-option input:checked + .vwalz-option__box::after {
	transform: rotate( 45deg ) scale( 1 );
}

.vwalz-option input:focus-visible + .vwalz-option__box {
	outline: 2px solid var(--vwalz-button-dark);
	outline-offset: 2px;
}

.vwalz-option__label,
.vwalz-locked__label {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	color: var(--vwalz-filter-label, var(--vwalz-heading));
}

/* Badge-stijl: jaar-badges, opvangtype-tags én vergrendelde filters. Op een
   eigen regel, links uitgelijnd onder de checkbox. */
.vwalz-option__sub,
.vwalz-locked__sub {
	grid-column: 1 / -1;
	justify-self: start;
	margin: 0;
	color: var(--vwalz-muted);
	background: var(--vwalz-badge-bg, #e8f1da); /* fallback: Divi Green 100 */
	font-size: 10px !important;
	font-weight: 300 !important;
	line-height: 1.5 !important;
	padding: 2px 8px;
	border-radius: 5px;
}

.vwalz-locked {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0 0 16px;
	padding-left: 15px; /* op dezelfde lijn als de zoekveld-tekst */
}

/* Vergrendeld = statisch: geen klikbare cursor. */
.vwalz-locked__item {
	cursor: default;
}

/* ---- Zoekbalk ---- */
.vwalz-search {
	display: flex;
	height: 50px;
	gap: 10px;
	margin-top: 4px;
	background: var(--vwalz-field-bg);
	border-radius: 14px;
	padding: 5px 5px 5px 0px;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 0.12s ease;
}

/* Rand zodra het zoekveld actief is (focus). */
.vwalz-search:focus-within {
	box-shadow: 0 0 0 2px var(--vwalz-gray-900);
}

.vwalz-query {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 14px 16px;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	color: var(--vwalz-gray-900); /* getypte tekst */
}

.vwalz-query::placeholder {
	color: var(--vwalz-gray-500); /* placeholder */
	opacity: 1; /* Firefox dimt placeholders standaard */
}

.vwalz-query::-webkit-search-decoration,
.vwalz-query::-webkit-search-cancel-button,
.vwalz-query::-webkit-search-results-button,
.vwalz-query::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.vwalz-query:focus {
	outline: none;
}

/* Icoon-knop (vergrootglas). De zoekknop toont altijd alleen het icoon. */
.vwalz-submit {
	display: flex;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 8px;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	background: #eef0ef;
	border-radius: 10px;
	transition: background 0.15s ease, color 0.15s ease;
}

/* Invert op hover: de twee knopkleuren wisselen om (lichte achtergrond +
   icoon in de Zoekknop-kleur → die kleur als achtergrond + licht icoon). */
.vwalz-submit:hover {
	background: var(--vwalz-button);
	color: #eef0ef;
}

.vwalz-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.vwalz-submit__icon {
	display: block;
	width: 24px;
	height: 24px;
	color: var(--vwalz-button);
	transition: color 0.15s ease;
}

/* Invert op hover: het icoon kantelt mee met de knop. Zonder deze regel blijft
   het icoon groen op de groene hover-achtergrond staan. */
.vwalz-submit:hover .vwalz-submit__icon {
	color: #eef0ef;
}

/* ---- Status ---- */
/* Neemt geen hoogte in: de melding valt óver de resultaten heen in plaats van ze
   naar beneden te duwen. Bewust géén `position` hier — een nul-hoge, niet-
   gepositioneerde box vormt geen nieuw positioneringskader, zodat de spinner
   (een kind van dit element) absoluut t.o.v. .vwalz gecentreerd blijft. */
.vwalz-status {
	height: 0;
	margin: 0 2px;
	font-size: 0.9rem !important;
	color: var(--vwalz-muted);
}

/* In de foutstaat zit er nooit een spinner in (setStatus() vervangt de inhoud
   door tekst), dus hier mág het element wél gepositioneerd worden. Nodig om de
   melding bóven de kaarten te schilderen i.p.v. eronder. */
.vwalz-status--error {
	position: relative;
	z-index: 6;
	color: #b91c1c;
	font-weight: 600 !important;
}

/* Laad-spinner (tijdens het zoeken) — groene cirkel, als overlay over de
   content (neemt geen ruimte in, duwt de kaarten niet weg). Verticaal in het
   midden van de resultaten: schaalt mee met het aantal items, gecapt op 500px
   (weinig items = hoger, lange lijst = max 500px van bovenaf). */
.vwalz-spinner {
	position: absolute;
	top: min( 50%, 500px );
	left: 50%;
	z-index: 5;
	width: 64px;
	height: 64px;
	border: 6px solid #d8ebdf; /* lichte ring */
	border-top-color: var(--vwalz-green-800); /* draaiend segment */
	border-radius: 50%;
	transform: translate( -50%, -50% );
	animation: vwalz-spin 0.7s linear infinite;
}

/* translate in de keyframes meenemen, anders overschrijft de rotate de
   centrering. */
@keyframes vwalz-spin {
	from { transform: translate( -50%, -50% ) rotate( 0 ); }
	to   { transform: translate( -50%, -50% ) rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.vwalz-spinner { animation-duration: 2s; }
}

/* ---- Resultaten ---- */
.vwalz-results--loading {
	opacity: 0.5;
	pointer-events: none; /* locaties niet klikbaar tijdens laden/zoeken */
	transition: opacity 0.15s ease;
}

/* Ruimte reserveren tijdens laden/leeg, zodat de overlay-spinner niet door de
   volgende sectie (footer) wordt overlapt. */
.vwalz-results:empty,
.vwalz-results--loading {
	min-height: 140px;
}

/* Twee klassen (0,2,0) i.p.v. één: Divi's thema-regel `.entry-content ul`
   (0,1,1) — en de varianten voor #left-area / .et-l--body / -header / -footer —
   zet anders `list-style: disc` en `padding: 0 0 23px 1em` op onze kaartenlijst. */
.vwalz .vwalz-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Drie locaties naast elkaar (desktop). */
	grid-template-columns: repeat( 3, 1fr );
	gap: 60px 15px; /* 60px tussen rijen, 15px tussen kolommen */
}

/* Open kaart: geen kader/achtergrond, alleen de afgeronde foto + tekst eronder.
   position: relative zodat de uitgerekte titel-link (::after) de hele kaart dekt. */
.vwalz-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	position: relative;
}

.vwalz-card__media {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: #eef1ee;
	transition: box-shadow 0.3s ease;
}

.vwalz-card__media img {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Hover over de hele kaart: lichte schaduw om de foto + 10% inzoomen
   (overflow: hidden op __media houdt de zoom binnen de afgeronde hoeken). */
.vwalz-card:hover .vwalz-card__media {
	box-shadow: 0 0 10px 5px rgba( 0, 0, 0, 0.05 );
}

.vwalz-card:hover .vwalz-card__media img {
	transform: scale( 1.1 );
}

/* Placeholder wanneer een locatie (nog) geen uitgelichte afbeelding heeft. */
.vwalz-card__media--empty {
	height: 280px;
	background:
		repeating-conic-gradient( #e9ece9 0% 25%, #f4f6f4 0% 50% ) 0 / 26px 26px;
}

.vwalz-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	padding: 25px 0px 0;
	flex: 1 1 auto;
}

.vwalz-card__title {
	margin: 0;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
}

.vwalz-card__title a {
	color: var(--vwalz-card-title, var(--vwalz-heading)); /* instelbaar; valt terug op koptekstkleur */
	text-decoration: none;
}

/* Maak de hele kaart klikbaar: de titel-link wordt over de kaart uitgerekt.
   Eén echte link (toegankelijk: de locatienaam is de linktekst). */
.vwalz-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vwalz-card__tags {
	margin: 0;
	display: flex !important;
	flex-flow: row wrap !important;
	align-items: center;
	gap: 8px !important;
}

/* Ruimte onder de tags, alleen binnen de resultaten. */
.vwalz-results .vwalz-card__tags {
	padding-bottom: 18px;
}

/* Footer-rij: locatie-pin + adres + afstand. */
.vwalz-card__meta {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 15px;
	padding-bottom: 5px !important; 
	color: var(--vwalz-text);
}

.vwalz-card__pin {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--vwalz-gray-900);
}

/* Adres + afstand + telefoon: zelfde teksstijl (Lexend Light 16/28). */
.vwalz-card__adres,
.vwalz-card__afstand,
.vwalz-card__tel {
	font-size: 16px !important;
	font-weight: 300 !important; /* Lexend Light */
	line-height: 28px !important;
}

.vwalz-card__adres {
	min-width: 0;
	color: var(--vwalz-gray-900);
}

.vwalz-card__afstand {
	flex: 0 0 auto;
	color: var(--vwalz-gray-500);
	white-space: nowrap;
}

/* Telefoon: eigen regel onder het adres, icoon + nummer (zoals de pin-rij). */
.vwalz-card__tel {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 15px;
}

.vwalz-card__telicon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--vwalz-gray-900);
}

/* Telefoonnummer: platte, niet-klikbare tekst. */
.vwalz-card__telnr {
	color: var(--vwalz-gray-900);
}

/* Locatie-infoblok op de projectpagina ([vwa_locatie_project]). Hergebruikt de
   kaart-stijlen (tags, pin/telefoon-icoon, adres/telefoon-tekst); hier alleen de
   verticale layout + uitlijning. */
.vwalz-locatie {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Tekstkleur voor adres/telefoon (incl. iconen). Default wit, want het blok staat
	   doorgaans op een gekleurde achtergrond; override deze var voor een licht thema. */
	--vwalz-locatie-text: #fff;
	/* Geen flex-gap: die gaf ongelijke ruimtes door de wisselende line-heights van
	   titel/tags/adres. De tussenruimtes sturen we per regel met margins hieronder. */
}

.vwalz-locatie__title {
	color: var(--vwalz-locatie-text);
	/* Eigen typografie voor het projectblok (overschrijft .vwalz-card__title). */
	font-size: 32px !important;
	line-height: 42px !important;
}

/* Divi zet standaard `p { padding-bottom: 1em }` op álle paragrafen; onze tags/
   telefoon zijn <p>'s, dus die padding telt op bij onze margins en geeft te veel
   ruimte. Reset de p-padding hier (twee-class-selector wint van Divi's regel) en
   stuur de afstanden zelf met margins. */
.vwalz-locatie .vwalz-card__tags,
.vwalz-locatie .vwalz-card__tel {
	padding-bottom: 0;
}

/* Ruimte tags → adres (tunebaar). */
.vwalz-locatie .vwalz-card__tags {
	margin-bottom: 18px;
}

/* Telefoon heeft hier geen icoon meer; spring 'm even ver in als het adres (pin 20px
   + gap 15px) zodat het nummer onder de adrestekst uitlijnt. */
.vwalz-locatie .vwalz-card__tel {
	padding-left: 35px;
}

/* Adres beslaat meerdere regels → pin/telefoon-icoon bij de eerste regel uitlijnen. */
.vwalz-locatie .vwalz-card__meta,
.vwalz-locatie .vwalz-card__tel {
	align-items: flex-start;
}

/* Adres + telefoon (tekst én icoon) in de blok-tekstkleur (zie --vwalz-locatie-text). */
.vwalz-locatie .vwalz-card__adres,
.vwalz-locatie .vwalz-card__telnr,
.vwalz-locatie .vwalz-card__pin,
.vwalz-locatie .vwalz-card__telicon {
	color: var( --vwalz-locatie-text, #fff );
}

/* Maps-knop ([vwa_locatie_maps]) — eigen outline-knop (geen Divi), bedoeld op een
   gekleurde achtergrond: witte rand + witte tekst/pijl, label links en pijl rechts.
   !important omdat de knop doorgaans in een Divi-tekstmodule staat (agressieve a-stijl). */
.vwalz-maps-button {
	--vwalz-maps-fg: #fff;                            /* tekst + rand (rust) */
	--vwalz-maps-fill: #6c217e; /* tekstkleur bij hover — Divi Purple 600 */
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 14.4px;
	box-sizing: border-box; /* maxen incl. padding + rand */
	max-width: 192.8px;
	max-height: 60px;
	padding: 18px 22.5px;
	border: 1px solid currentColor; /* volgt de tekstkleur → inverteert mee op hover */
	border-radius: 15px;
	background: transparent;
	white-space: nowrap; /* tekst + pijl op één regel */
	transition: background 0.2s ease, color 0.2s ease;
	font-family: 'Lexend-Regular',Helvetica,Arial,Lucida,sans-serif;
	/* !important alleen waar Divi's link-stijl anders wint. */
	color: var( --vwalz-maps-fg ) !important;
	text-decoration: none !important;
}

/* Hover/focus: kleuren wisselen — knop krijgt de tekstkleur, tekst (+ rand + pijl)
   krijgt de vul-/knopkleur. */
.vwalz-maps-button:hover,
.vwalz-maps-button:focus-visible {
	background: var( --vwalz-maps-fg ) !important;
	color: var( --vwalz-maps-fill ) !important;
	border-color: transparent; /* rand weg op hover (border-box: geen verschuiving) */
}

/* Ingedrukt (klik): extra rand 1px binnenin — Divi Purple 200. */
.vwalz-maps-button:active {
	outline: 1px solid #bea2cc;
	outline-offset: -3px;
}

.vwalz-maps-button__arrow {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* "Toon meer locaties"-knop: gecentreerd onder het raster. De knop zelf erft de
   Divi-knopstijl (classes uit de localize); hier alleen plaatsing. */
.vwalz-more-wrap {
	margin-top: 57px;
	text-align: center;
}

.vwalz-empty {
	padding: 20px;
	text-align: center;
	color: var(--vwalz-muted);
	background: #f8f9fa;
	border-radius: 16px;
}

/* Tablet: twee locaties naast elkaar. */
@media ( max-width: 980px ) {
	.vwalz .vwalz-list {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	/* Mobiel: één locatie per rij, 35px tussen de rijen. */
	.vwalz .vwalz-list {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.vwalz-heading {
		font-size: 1.4rem !important;
		margin-bottom: 25px;
	}

	/* Met een vergrendeld filter staat er al een statisch label onder de kop;
	   dan minder ruimte onder de kop op mobiel. */
	.vwalz--has-locked .vwalz-heading {
		margin-bottom: 10px;
	}

	.vwalz-options {
		flex-direction: column;
		gap: 16px;
	}

	/* Wat meer lucht tussen de filters en de zoekbalk. */
	.vwalz-filter {
		margin-bottom: 18px;
	}

	.vwalz-search {
		margin-top: 0;
	}

	/* Mobiel: checkbox + label + badge op één regel (i.p.v. badge eronder). */
	.vwalz-option,
	.vwalz-locked__item {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px 10px;
	}

	/* Projectblok op mobiel: titel → tags 10px, de overige ruimtes 18px.
	   (tags → adres is al 18px; hier alleen titel en adres → telefoon aangepast.) */
	.vwalz-locatie__title {
		margin-bottom: 10px;
	}

	.vwalz-locatie .vwalz-card__meta {
		padding-bottom: 18px !important;
	}
}