/**
 * Nieuwe huisstijl 2026 — VWN / Kikz Forms
 * Bron: Figma VWN-2026---Kikz-Forms · Frame 626968 (Donatie hoge header)
 *
 * Lettertypen in fonts/huisstijl-2026/
 *   TRYGrtsk-Exa.ttf, TRYGrtsk-SemiBoldExa.ttf
 *   P22MackinacPro-Book.otf, P22MackinacPro-Bold.otf
 */

/* --- Tokens (Figma variables) --- */
:root {
	--vwn-beige-50: #f6f2ec;
	--vwn-beige-75: #f3ece2;
	--vwn-brown-100: #543900;
	--vwn-blue-100: #2e49dd;
	--vwn-link: #444ce7;
	--vwn-red-100: #ea3724;
	--vwn-red-50: #ef8c83;
	--vwn-pink-75: #eec9fb;
	--vwn-yellow-100: #dfdf49;
	--vwn-black: #1a1a1a;
	--vwn-darkgrey: #666666;
	--vwn-gray-300: #e0e0e0;
	--vwn-white: #ffffff;

	--vwn-font-display: 'TRY Grtsk', system-ui, -apple-system, sans-serif;
	--vwn-font-body: 'P22 Mackinac Pro', Georgia, 'Times New Roman', serif;
	--vwn-font-ui: 'TRY Grtsk', system-ui, -apple-system, sans-serif;

	--vwn-radius-card: 16px;
	--vwn-shadow-card: 0 2px 24px rgba(0, 0, 0, 0.2);
	--vwn-padding-small: 8px;

	/* Typeschaal in px — voorkomt em-cascade uit oude style.css (body 10px) / Bootstrap */
	--vwn-fs-root: 16px;
	--vwn-fs-body: 18px;
	--vwn-fs-ui: 15px;
	--vwn-fs-label: 16px;
	--vwn-fs-section: 22px;   /* fieldset / set_2 titel — Figma "Persoonlijke gegevens" */
	--vwn-fs-heading: 32px;   /* formulierhoofd — Figma Donation heading */
	--vwn-fs-button: 20px;    /* CTA-label — Figma Button Label */
	--vwn-fs-hero: 80px;      /* banner h1 — Figma hero */
	--vwn-fs-privacy: 18px;   /* privacy / form_extra — Figma Mackinac 18 */
}

/* --- @font-face --- */
@font-face {
	font-family: 'TRY Grtsk';
	src: url('fonts/huisstijl-2026/TRYGrtsk-Exa.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TRY Grtsk';
	src: url('fonts/huisstijl-2026/TRYGrtsk-SemiBoldExa.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'P22 Mackinac Pro';
	src: url('fonts/huisstijl-2026/P22MackinacPro-Book.otf') format('opentype');
	font-weight: 350;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'P22 Mackinac Pro';
	src: url('fonts/huisstijl-2026/P22MackinacPro-Book.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'P22 Mackinac Pro';
	src: url('fonts/huisstijl-2026/P22MackinacPro-Bold.otf') format('opentype');
	font-weight: 500 700; /* medium t/m bold — geen apart Medium-bestand */
	font-style: normal;
	font-display: swap;
}

/* --- Basis lettergrootte-reset ---
   Oude style.css / Bootstrap zetten body op 10px zodat 1.6em ≈ 16px.
   Op deze template herstarten we op 16px, zodat em/rem niet meer “opblazen”. */
html {
	font-size: var(--vwn-fs-root) !important;
}

body {
	font-family: var(--vwn-font-body);
	font-size: var(--vwn-fs-root) !important;
	font-weight: 350;
	line-height: 1.5;
	color: var(--vwn-black);
	background-color: var(--vwn-beige-75);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

aside,
#form,
.sidebar_inner,
#sidebar,
main {
	font-size: var(--vwn-fs-root) !important;
}

h1, h2, h3, h4, h5, h6,
.title,
.form-group.title,
.form-group.title p,
aside h2, aside h3, aside h5,
.bannercaption h1,
.contentArea h1,
.contentArea h2,
.contentArea h3,
#main_content h1,
#main_content h2,
#main_content h3,
.btn,
aside .btn,
button#verstuur,
.navbar-nav > li > a,
footer h5,
span.image_title {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600;
	color: var(--vwn-brown-100);
}

/* Content-h1 — vaste px i.p.v. style_2025 4em (was ~40px bij body 10px; nu te groot bij 16px) */
.contentArea h1,
#main_content h1 {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: 40px !important; /* 2025-intent (4em × 10px); tussen hero 80px en h2 32px */
	line-height: 1.2 !important;
	color: var(--vwn-brown-100) !important;
	margin-bottom: 20px;
}

.contentArea h2,
#main_content h2 {
	font-size: 32px;
	line-height: 1.2;
	margin-top: 30px;
	margin-bottom: 8px;
}

/* Content-h3 — dekt style_2025 2.5em én media.css (≤479px) 2.4em (~24px bij oude 10px-basis) */
.contentArea h3,
#main_content h3 {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: 24px !important;
	line-height: 1.2 !important;
	color: var(--vwn-brown-100) !important;
}

/* Formulier-hoofditel — Figma Donation heading (32px Grtsk / bruin) */
aside h2,
aside .form-title,
#form h2 {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: var(--vwn-fs-heading) !important; /* 32px */
	line-height: 36px !important;
	color: var(--vwn-brown-100) !important;
	margin: 0 0 16px 0 !important;
	max-width: none;
}

aside h2.form_header_title .pagenumbers {
	display: unset;
}

.fieldset_tab h2.form_header_title {
	padding-right: 45px;
}

.pagenumbers {
	position: absolute;
	right: 20px;
	top: 11px;
	color: #666;
}

/* Subtitel (aside h3 p) — Figma Frame 626975 / Donation heading Title (24/32 Grtsk / bruin) */
aside h3,
aside h3 p,
aside .form_header_subtitle,
aside .form_header_subtitle p,
.form_header_subtitle p {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: 24px !important;
	line-height: 32px !important;
	color: #666 !important;
	margin: 0 0 16px 0 !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Lettergrootte — classes vanuit CMS TinyMCE dropdown "Lettergrootte" (minimal_tinymce) */
aside .form_header_subtitle.lettergrootte-groot,
aside .form_header_subtitle .lettergrootte-groot,
aside .form_header_subtitle.lettergrootte-groot p,
aside .form_header_subtitle .lettergrootte-groot p,
.form_header_subtitle.lettergrootte-groot,
.form_header_subtitle .lettergrootte-groot {
	font-size: 32px !important;
	line-height: 36px !important;
}

aside .form_header_subtitle.lettergrootte-middelgroot,
aside .form_header_subtitle .lettergrootte-middelgroot,
aside .form_header_subtitle.lettergrootte-middelgroot p,
aside .form_header_subtitle .lettergrootte-middelgroot p,
.form_header_subtitle.lettergrootte-middelgroot,
.form_header_subtitle .lettergrootte-middelgroot {
	font-size: 24px !important;
	line-height: 32px !important;
}

aside .form_header_subtitle.lettergrootte-klein,
aside .form_header_subtitle .lettergrootte-klein,
aside .form_header_subtitle.lettergrootte-klein p,
aside .form_header_subtitle .lettergrootte-klein p,
.form_header_subtitle.lettergrootte-klein,
.form_header_subtitle .lettergrootte-klein {
	font-size: 18px !important;
	line-height: 24px !important;
}

aside h3 p {
	margin-bottom: 0 !important; /* spacing via h3 */
}

/* Counter — Figma Frame 626976 / Donation heading + meter */
.fillcounter {
	margin-top: 16px;
	margin-bottom: 24px;
}

.fillcounter > span,
.fillcounter > strong {
	display: block;
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: var(--vwn-fs-section) !important;
	line-height: 32px !important;
	color: var(--vwn-brown-100) !important;
}

.title.smallsubtitle p {
	font-size: var(--vwn-fs-section) !important;
	padding: 10px 0 0 0 !important;
	line-height: 20px;
}

.fillcounter .meter {
	height: 27px !important;
	margin: 8px 0 0 0 !important;
	padding: 0 !important;
	background: var(--vwn-beige-50) !important; /* #f6f2ec track */
	border-radius: 0 !important;
	overflow: hidden;
}

.fillcounter .meter > span {
	display: block;
	height: 100% !important;
	min-width: 0 !important;
	background-color: var(--vwn-red-100) !important; /* #ea3724 */
	border-radius: 0 !important;
	position: relative;
	overflow: hidden;
}

/* Geen gestreepte animatie — Figma is een vlakke rode balk */
.fillcounter .meter > span:after,
.fillcounter .animate > span > span {
	display: none !important;
	animation: none !important;
	background: none !important;
}

.fillcounter span.nummer {
	float: right;
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 27px !important;
	color: var(--vwn-white) !important;
	padding: 0 8px 0 0 !important;
	margin: 0 !important;
}

p, .content, .article, .pagina-inhoud, .standaardtekst,
.contentArea p,
.contentArea ul li,
#main_content p,
#main_content ul li {
	font-family: var(--vwn-font-body) !important;
	color: var(--vwn-black);
	font-size: 18px;
	line-height: 28px;
}

strong, b,
#main_content strong,
.contentArea strong {
	font-family: var(--vwn-font-body) !important;
	font-weight: 700;
}

aside strong, aside b,
#form strong, #form b,
.kikzform strong, .kikzform b,
.form_extra_text strong, .form_extra_text b {
	font-family: var(--vwn-font-ui) !important;
	font-weight: 700;
}

aside h3 p.lettergrootte-middelgroot {
    font-size: 21px !important;
}

aside h3 p span.lettergrootte-middelgroot {
    font-size: 21px !important;
}

aside h3 p.lettergrootte-klein {
    font-size: 18px !important;
    line-height: 18px;
}

aside h3 p span.lettergrootte-klein {
    font-size: 18px !important;
    line-height: 18px;
}

a {
	color: var(--vwn-link);
}
a:hover, a:focus {
	color: var(--vwn-blue-100);
}

/* --- Header / topmenu (Figma Nav + Frame 42425) ---
   Witte balk zweeft los van de randen: 16px top, 48px L/R (niet full-bleed) */
header.header-huisstijl-2026,
.header-huisstijl-2026 {
	background: transparent !important;
	position: relative;
	z-index: 5;
	height: auto !important;
	min-height: 0;
	/* ruimte zodat de witte balk van top/zijkanten zweeft */
	padding: 16px 48px 0;
	margin: 0;
	float: none;
	overflow: visible;
	box-sizing: border-box;
}

.header-huisstijl-2026__bar {
	background: var(--vwn-white);
	width: 100%;
	/* niet full-bleed: breedte = viewport − 2×48px via parent-padding */
}

.header-huisstijl-2026__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	/* Figma Logo + zoekbalk: vaste hoogte 86px, pad 16/48 */
	height: 86px;
	min-height: 86px;
	max-height: 86px;
	padding: 16px 48px;
	box-sizing: border-box;
	overflow: hidden;
}

/* Hero onder de zwevende balk door trekken zodat foto in de gaten zichtbaar is */
.header-huisstijl-2026 ~ .mainBanner,
.header-huisstijl-2026 ~ .carousel,
.header-huisstijl-2026 ~ #carouselExampleIndicators {
	margin-top: -102px; /* 16px top-inset + 86px balk */
}

.header-huisstijl-2026__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	align-self: center;
	height: 54px;
	max-height: 54px;
}

.header-huisstijl-2026 a.siteName {
	float: none !important;
	display: flex !important;
	align-items: center;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0 !important;
}

.header-huisstijl-2026 .siteName img,
.header-huisstijl-2026 .img-responsive.logo {
	display: block;
	height: 52px !important;
	width: auto !important;
	max-width: 212px;
	max-height: 52px !important;
	padding: 0 !important;
	margin: 0 !important;
}

.header-huisstijl-2026__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	flex: 1 1 auto;
	height: 54px;
	min-height: 0;
	max-height: 54px;
	overflow: hidden;
}

.header-huisstijl-2026 .associat {
	position: static !important;
	top: auto !important;
	right: auto !important;
	float: none !important;
	margin: 0;
}

.header-huisstijl-2026 ul.associate-logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 24px;
	border: none;
}

.header-huisstijl-2026 ul.associate-logos li {
	display: flex;
	align-items: center;
	padding: 0 !important;
	margin: 0;
}

.header-huisstijl-2026 ul.associate-logos img,
.header-huisstijl-2026 img.logos {
	height: 40px !important;
	width: auto !important;
	margin: 0 !important;
	display: block;
}

.header-huisstijl-2026__nav,
.header-huisstijl-2026 .contentMenu {
	padding: 0 !important; /* style_2025: contentMenu padding-top 50px */
	margin: 0 32px 0 0 !important; /* ruimte tussen menu en keurmerk-logo's */
	position: static !important;
	font-size: 16px !important; /* niet 1.8em */
	text-transform: none !important;
	display: flex !important;
	align-items: center !important;
	height: 54px !important;
	max-height: 54px !important;
	overflow: hidden;
}

.header-huisstijl-2026__nav .navbar-nav,
.header-huisstijl-2026 .navbar-nav,
.header-huisstijl-2026 .nav.navbar-nav {
	margin: 0 !important;
	margin-top: 0 !important; /* style_2025: navbar-nav margin-top 40px */
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	flex-direction: row !important;
	gap: 8px;
	height: auto !important;
	float: none !important;
}

.header-huisstijl-2026__nav .navbar-nav > li,
.header-huisstijl-2026 .navbar-nav > li {
	float: none !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 15px;
}

.header-huisstijl-2026__nav .navbar-nav > li > a {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	color: var(--vwn-brown-100) !important;
	padding: 8px 0 !important;
	margin: 0 !important;
	border-bottom: 2px solid transparent !important;
	text-decoration: none !important;
	background: transparent !important;
}

/* Actieve / hover-lijn — huisstijl rood/oranje */
.header-huisstijl-2026__nav .navbar-nav > li.active > a,
.header-huisstijl-2026__nav .navbar-nav > li > a.active,
.header-huisstijl-2026__nav .navbar-nav > li > a:hover,
.header-huisstijl-2026__nav .navbar-nav > li > a:focus,
.header-huisstijl-2026 .contentMenu ul li a:hover,
.header-huisstijl-2026 .contentMenu ul li a.active,
.header-huisstijl-2026 .contentMenu .navbar-collapse > ul > li.active a {
	border-bottom-color: var(--vwn-red-100) !important;
	color: var(--vwn-brown-100) !important;
	background: transparent !important;
	text-decoration: none !important;
}

/* Geen beige onderlijn onder het menublok (style_2025 ul border) */
.header-huisstijl-2026 .contentMenu .navbar-collapse > ul,
.header-huisstijl-2026__nav .navbar-nav {
	border-bottom: none !important;
}

/* Desktop (≥768): hamburger weg, links zichtbaar — Figma desktop Main nav */
@media (min-width: 768px) {
	.header-huisstijl-2026 .navbar-header,
	.header-huisstijl-2026 .navbar-toggler,
	.header-huisstijl-2026 .navbar-toggle {
		display: none !important;
		margin: 0 !important;
		padding: 0 !important;
		height: 0 !important;
		width: 0 !important;
		overflow: hidden !important;
		border: 0 !important;
	}

	.header-huisstijl-2026 .navbar-collapse,
	.header-huisstijl-2026 .navbar-collapse.collapse,
	.header-huisstijl-2026 #myNavbar {
		display: flex !important;
		align-items: center !important;
		height: auto !important;
		max-height: none !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: visible !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
	}
}

/* Sticky topmenu (oude rood/wit balk) verbergen op deze template */
.header-huisstijl-2026 + #topmenu,
body #topmenu {
	display: none !important;
}

/* Hero — Figma Frame 626968 / Hero */
.mainBanner {
	position: relative;
	overflow: hidden;
	height: 670px !important;
}

.mainBanner img,
.mainBanner .carousel-item img {
	width: 100%;
	height: 100%;
	max-height: 650px;
	object-fit: cover;
	object-position: center;
	left: 0 !important;
	transform: none !important;
}

@media (max-width: 991px) {
	.mainBanner {
		height: 480px !important;
	}
}

/*
 * Aparte mobile_afbeelding (CMS-crop 600×450 / 4:3).
 * Class wordt alleen gezet bij is_device_mobile() + bestaande upload;
 * zonder upload blijft de vaste hoogte + object-fit op de grote header.
 */
.mainBanner.mainBanner--mobile-alt {
	height: auto !important;
	aspect-ratio: 4 / 3;
}

.mainBanner.mainBanner--mobile-alt img {
	max-height: none !important;
	height: 100% !important;
	width: 100% !important;
	object-fit: cover;
	object-position: center;
}

/* Mobiel — Figma Frame 626963 / Main nav (375): logo links + blauw bars-icoon rechts */
@media (max-width: 767px) {
	/* Fallback: bijgesneden versie van de grote (desktop) header */
	.mainBanner:not(.mainBanner--mobile-alt) {
		height: 320px !important;
	}

	.header-huisstijl-2026 {
		padding: 0 !important;
	}

	.header-huisstijl-2026__bar {
		border-bottom: none;
		position: relative;
		z-index: 6;
	}

	.header-huisstijl-2026__inner {
		height: 76px !important;
		min-height: 76px !important;
		max-height: none !important;
		padding: 0 20px !important;
		gap: 16px;
		overflow: visible !important;
		align-items: center;
	}

	.header-huisstijl-2026 ~ .mainBanner,
	.header-huisstijl-2026 ~ .carousel,
	.header-huisstijl-2026 ~ #carouselExampleIndicators {
		margin-top: -76px; /* volle breedte 76px balk */
	}

	.header-huisstijl-2026__logo {
		height: 40px !important;
		max-height: 40px !important;
	}

	.header-huisstijl-2026 .siteName img,
	.header-huisstijl-2026 .img-responsive.logo {
		height: 40px !important;
		max-height: 40px !important;
		max-width: 163px !important;
	}

	/* Geen keurmerken in mobiele Main nav */
	.header-huisstijl-2026 .associat {
		display: none !important;
	}

	.header-huisstijl-2026__right {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		flex: 0 0 auto;
		gap: 0;
	}

	.header-huisstijl-2026__nav,
	.header-huisstijl-2026 .contentMenu {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		height: 24px !important;
		max-height: none !important;
		overflow: visible !important;
		position: static !important; /* dropdown positioneert t.o.v. __bar */
		width: auto !important;
		flex: 0 0 auto;
		margin: 0 !important; /* hamburger helemaal rechts, geen desktop-marge */
	}

	/* Frame 626963 — hamburger 24×24, blauw #2E49DD */
	.header-huisstijl-2026 .navbar-header {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		height: 24px !important;
		width: 24px !important;
		overflow: visible !important;
	}

	.header-huisstijl-2026 .navbar-toggler,
	.header-huisstijl-2026 .navbar-toggle {
		display: block !important;
		width: 24px !important;
		height: 24px !important;
		min-width: 24px !important;
		min-height: 24px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background-color: transparent !important;
		background-image: url('../../img/huisstijl-2026/icon-menu-bars.svg') !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 24px 24px !important;
		cursor: pointer;
		box-shadow: none !important;
		outline: none !important;
	}

	.header-huisstijl-2026 .navbar-toggler .icon-bar,
	.header-huisstijl-2026 .navbar-toggle .icon-bar,
	.header-huisstijl-2026 .navbar-toggler .icon-bar-name,
	.header-huisstijl-2026 .navbar-toggle .icon-bar-name {
		display: none !important;
	}

	/* Menu dicht — open paneel valt onder hele __bar (Frame 626963 Main nav) */
	.header-huisstijl-2026 .navbar-collapse,
	.header-huisstijl-2026 .navbar-collapse.collapse,
	.header-huisstijl-2026 #myNavbar {
		display: none !important;
		float: none !important;
		clear: both !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 8px 20px 16px !important;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
		background: var(--vwn-white) !important;
		border-bottom: 1px solid #f1ece3 !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
		z-index: 20;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	/* Menu open (Bootstrap .in / .show) */
	.header-huisstijl-2026 .navbar-collapse.collapse.in,
	.header-huisstijl-2026 .navbar-collapse.collapse.show,
	.header-huisstijl-2026 .navbar-collapse.in,
	.header-huisstijl-2026 .navbar-collapse.show,
	.header-huisstijl-2026 #myNavbar.in,
	.header-huisstijl-2026 #myNavbar.show {
		display: block !important;
	}

	.header-huisstijl-2026__nav .navbar-nav,
	.header-huisstijl-2026 .navbar-nav,
	.header-huisstijl-2026 .nav.navbar-nav {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		width: 100% !important;
	}

	.header-huisstijl-2026__nav .navbar-nav > li,
	.header-huisstijl-2026 .navbar-nav > li {
		width: 100% !important;
		border-bottom: 1px solid #f1ece3;
	}

	.header-huisstijl-2026__nav .navbar-nav > li:last-child {
		border-bottom: 0;
	}

	.header-huisstijl-2026__nav .navbar-nav > li > a {
		display: block !important;
		width: 100% !important;
		padding: 14px 0 !important;
		font-size: 16px !important;
		color: var(--vwn-brown-100) !important;
	}

	.header-huisstijl-2026__nav .navbar-nav > li.active > a,
	.header-huisstijl-2026__nav .navbar-nav > li > a:hover {
		color: var(--vwn-blue-100) !important;
		text-decoration: none !important;
		background: transparent !important;
	}
}

.bannercaption h1 {
	color: var(--vwn-white);
	/* Figma hero: 80px / line-height 74 */
	font-size: clamp(40px, 8vw, var(--vwn-fs-hero));
	line-height: 0.925;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
	font-weight: 600;
}

/* --- Pagina-inhoud (rechterkolom) --- */
.pagina-inhoud h2,
.pagina-inhoud h3,
.content h2,
.content h3 {
	font-family: var(--vwn-font-display);
	font-weight: 600;
	color: var(--vwn-brown-100);
	font-size: 32px;
	line-height: 1.2;
}

.pagina-inhoud h4,
.content h4 {
	font-family: var(--vwn-font-display);
	font-weight: 600;
	color: var(--vwn-brown-100);
	font-size: 24px;
	line-height: 36px;
}

/* --- Formulierkaart (aside) --- */
aside {
	background-color: var(--vwn-white) !important;
	border: 1px solid var(--vwn-gray-300);
	border-radius: 0;
	color: var(--vwn-black);
	box-shadow: none;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* Negatieve top-marge alleen desktop (overlap hero); op mobiel geen overlap met tekst */
@media (min-width: 992px) {
	aside {
		margin-top: -170px; /* was -80px in form_style */
	}
}

@media (max-width: 991px) {
	aside {
		margin-top: 20px; /* reset form_style -80px; geen overlap met tekst */
	}
}

#form {
	background-color: transparent !important;
	color: var(--vwn-black) !important;
}

.kikzform {
	padding: 0 5px;
}

#form p,
aside h2,
aside .form-group.title,
.title.smalltitle {
	color: var(--vwn-brown-100) !important;
}

#form p {
	font-size: 15px;
}

/* Fieldset / set-titels (o.a. "Mijn gegevens") — Figma 22px, niet 32px */
aside .form-group.title,
.form-group.title,
.form-group.title.set_1,
.form-group.title.set_2,
.form-group.title.set_3,
.form-group.title.set_4,
.title,
.form-group.title p {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: var(--vwn-fs-section) !important; /* 22px */
	line-height: 28px !important;
	margin-bottom: 16px;
}

.title.smalltitle {
	font-size: var(--vwn-fs-section) !important;
	line-height: 28px !important;
}

/* Privacy / verplichte-velden-tekst — Figma Mackinac 18/28 (niet UI 15) */
.form_extra_text,
#form .form_extra_text,
#form p.form_extra_text,
aside .form_extra_text,
.form-policy {
	font-family: var(--vwn-font-body) !important;
	font-size: var(--vwn-fs-privacy) !important;
	line-height: 28px !important;
	color: var(--vwn-black) !important;
	font-weight: 400 !important;
}

.form_extra_text a,
.form-policy a,
#form .form_extra_text a,
aside .form_extra_text a {
	font-family: var(--vwn-font-body) !important;
	font-weight: 500 !important; /* medium */
	color: var(--vwn-link) !important;
}

aside label {
	font-family: var(--vwn-font-ui);
	font-size: 15px;
	line-height: 1.5;
	color: var(--vwn-black);
}

.form-group.kikz {
	margin-bottom: 0;
}

/* Inputs — floating label (animateme) behouden zoals form_backbone */
.form-group input.form-control,
.form-group textarea.form-control,
.form-group select.form-control,
aside input[type="text"],
aside input[type="email"],
aside input[type="tel"],
aside input[type="number"],
aside textarea,
aside select {
	font-family: var(--vwn-font-ui);
	font-size: 18px;
	line-height: 20px;
	color: var(--vwn-black);
	background-color: var(--vwn-beige-50) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 16px 12px !important;
	height: 54px;
	margin: 0;
}

.form-group input.form-control {
	margin-bottom: -20px;
}

.readabletextarea {
	padding-bottom: 12px;
}

.editabletextarea {
	line-height: 28px !important;
}

.readabletextarea p {
	padding: 0 !important;
	line-height: 24px;
}

/* Native placeholder verborgen — label.animateme::before toont de tekst */
.form-group input.form-control::placeholder,
.form-group textarea.form-control::placeholder,
.form-control::placeholder {
	opacity: 0 !important;
	color: transparent !important;
}

.form-group input.form-control:focus,
.form-group textarea.form-control:focus {
	background-color: var(--vwn-beige-50) !important;
	outline: 2px solid var(--vwn-blue-100);
	outline-offset: -2px;
}

aside .form-group input.error,
#form.iframe .form-group input.error {
	box-shadow: none !important;
	border-bottom: 1px solid rgba(255, 0, 0, .8) !important;
}

/* Ruststand: volledige placeholder-tekst in het veld */
.form-group label.animateme {
	font-family: var(--vwn-font-ui);
}

.animateme {
	font-family: var(--vwn-font-ui);
	font-size: 18px;
	line-height: 42px;
	padding-left: 16px;
	color: var(--vwn-darkgrey);
}

.form-group label.animateme::before {
	content: attr(title);
	position: absolute;
	top: 18px;
	left: 16px;
	padding-left: 0;
	font-family: var(--vwn-font-ui);
	font-size: 18px;
	line-height: 15px;
	color: var(--vwn-darkgrey);
	background: transparent;
	/* vaste transparante border — voorkomt donkere border-flash tijdens animatie */
	border: 1px solid transparent !important;
	border-radius: 0;
	/* geen transition op border (die gaf de donkere flits) */
	transition: top 300ms, font-size 300ms, line-height 300ms, padding 300ms, left 300ms, background-color 300ms, color 300ms;
}

/* Omhoog geanimeerd bij focus / ingevuld veld */
.label-before,
.form-group textarea.form-control:focus + label.animateme::before,
.form-group textarea.form-control:not(:placeholder-shown) + label.animateme::before,
.form-group input.form-control:focus + label.animateme::before,
.form-group input.form-control:not(:placeholder-shown) + label.animateme::before {
	line-height: 16px;
	font-size: 12px; /* was 11px; 12px = beter leesbaar / dichter bij a11y-minimum */
	color: #666666 !important;
	top: -7px;
	padding: 0 8px;
	left: 8px;
	background-color: #ffffff !important;
	border-radius: 0;
	border: 1px solid transparent !important;
}

.form-group input.form-control:not(:placeholder-shown) + label.animateme::before {
	content: attr(data-title);
}

.form-group input.form-control:focus + label.animateme::before,
.form-group textarea.form-control:focus + label.animateme::before {
	color: #666666 !important;
	background-color: #ffffff !important;
	border: 1px solid transparent !important;
}

.help-block,
.text-danger {
	font-family: var(--vwn-font-ui);
	color: var(--vwn-red-100) !important;
	font-size: 15px;
}

/* Foutmeldingstekst onder het veld (TRY Grtsk Exa 15px / #EA3724) */
.error-message {
	margin-top: 0 !important;
	margin-bottom: 6px !important;
	padding: 0 !important;
	z-index: 1;
	position: relative;
	visibility: visible;
	float: none !important;
	width: 100%;
}

.error-message .error,
label.error {
	/* Geen display:!important — jQuery Validate .hide() moet display:none kunnen zetten */
	display: block;
	float: none !important;
	width: 100% !important;
	margin: -3px 0 0 0 !important;
	padding: 0 0 1px 0 !important;
	font-family: var(--vwn-font-ui) !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 18px !important;
	color: var(--vwn-red-100) !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Validator .hide() honoreren als andere sheets display:block !important zetten */
.error-message .error[style*="display: none"],
label.error[style*="display: none"] {
	display: none !important;
}

/* Aanhef e.d. — Figma Ellipse: 24×24, 2px #666, gap 6px naar label, 16px tussen opties */
.form-group.kikz:has(> label.radio-inline:not(.radio_container):not([class*="paymenttab"])) {
	margin-top: 5px; /* +5px boven */
}

.form-group.kikz > label.radio-inline:not(.radio_container):not([class*="paymenttab"]) {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0 16px 17px 0 !important; /* was 20px onder → 3px minder */
	padding: 0 !important;
	font-family: var(--vwn-font-ui) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	color: var(--vwn-black) !important;
	vertical-align: top;
	width: auto !important;
}

.form-group.kikz > label.radio-inline:not(.radio_container):not([class*="paymenttab"]) .rb_textblock {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--vwn-font-ui) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	color: var(--vwn-black) !important;
}

.form-group.kikz > label.radio-inline:not(.radio_container):not([class*="paymenttab"]) input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	flex: 0 0 24px;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px;
	min-height: 24px;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	border: 2px solid #666666 !important;
	border-radius: 50% !important;
	background-color: #ffffff !important;
	/* kern altijd aanwezig; zichtbaarheid via background-size (animeert) */
	background-image: radial-gradient(circle, var(--vwn-blue-100) 0 7px, #ffffff 7px) !important;
	background-size: 0 0 !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	box-shadow: none !important;
	cursor: pointer;
	position: relative !important;
	opacity: 1 !important;
	float: none !important;
	left: auto !important;
	top: auto !important;
	transition:
		background-size 0.28s cubic-bezier(0.34, 1.45, 0.64, 1),
		border-color 0.2s ease,
		transform 0.2s ease;
}

.form-group.kikz > label.radio-inline:not(.radio_container):not([class*="paymenttab"]) input[type="radio"]:checked {
	background-image: radial-gradient(circle, var(--vwn-blue-100) 0 7px, #ffffff 6px) !important;
	background-size: 24px 24px !important;
	border-color: #666666 !important;
}

.form-group.kikz > label.radio-inline:not(.radio_container):not([class*="paymenttab"]) input[type="radio"]:active {
	transform: scale(0.92);
}

.form-group.kikz > label.radio-inline:not(.radio_container):not([class*="paymenttab"]) input[type="radio"]:focus-visible {
	outline: 2px solid var(--vwn-blue-100);
	outline-offset: 2px;
}

/* Bedragknoppen — Figma Navigation item 52px (alléén span.bedrag, niet termijn-radios) */
.radio-group .radio-inline.radio_container {
	font-family: var(--vwn-font-display);
	font-weight: 600;
}

.radio-group input[type="radio"] + span.bedrag,
.radio-group input[type="checkbox"] + span.bedrag {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	background-color: var(--vwn-white) !important;
	color: var(--vwn-link) !important;
	border: 1px solid var(--vwn-blue-100) !important;
	border-radius: 0 !important;
	height: 52px !important;
	min-height: 52px !important;
	max-height: 52px !important;
	width: 100% !important; /* vult label met HTML style="width:X%" */
	padding: 0 20px !important;
	line-height: 52px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	position: relative !important;
	overflow: visible !important;
	vertical-align: middle !important;
}

.radio-group input[type="radio"] + span.bedrag .amt,
.radio-group input[type="checkbox"] + span.bedrag .amt {
	display: inline !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle !important;
	position: static !important;
	float: none !important;
}

.radio-group input[type="radio"] + span.bedrag.active,
.radio-group input[type="radio"]:checked + span.bedrag,
.radio-group input[type="checkbox"] + span.bedrag.active {
	background-color: var(--vwn-blue-100) !important;
	color: var(--vwn-white) !important;
	border-color: var(--vwn-blue-100) !important;
	height: 52px !important;
	min-height: 52px !important;
	max-height: 52px !important;
	line-height: 52px !important;
	padding: 0 20px !important;
	gap: 8px !important; /* Affirm strak naast labeltekst */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Termijn-/lijst-radios (lege span + rb_textblock): géén knop/Affirm — ellipse + tekst */
.radio-group input[type="radio"] + span:not(.bedrag):not(.active),
.radio-group input[type="radio"] + span:not(.bedrag) {
	/* reset eventuele knop-styling; laat aanhef/ellipse elders gelden */
	background: transparent !important;
	border: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 0 !important;
	line-height: 0 !important;
	display: inline-block !important;
	width: 0 !important;
	overflow: hidden !important;
	position: static !important;
}

.radio-group input[type="radio"]:checked + span:not(.bedrag)::before,
.radio-group input[type="radio"] + span:not(.bedrag).active::before,
.radio-group input[type="checkbox"]:checked + span:not(.bedrag)::before,
.radio-group input[type="checkbox"] + span:not(.bedrag).active::before {
	content: none !important;
	display: none !important;
	background-image: none !important;
}

#tab-container-payment-nav a,
#tab-container-nav a {
	font-family: var(--vwn-font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--vwn-link);
	border: 1px solid var(--vwn-blue-100);
	border-radius: 0;
	background-color: var(--vwn-white);
	height: 52px !important;
	padding: 0 20px !important;
	line-height: 52px !important;
	display: flex !important;
	align-items: center !important;
	box-sizing: border-box !important;
	position: relative !important;
}

/* Frequentie — standaard tab-weergave (geen class op #tab-container-nav) */
#tab-container-nav:not(.termijn-rb) a {
	justify-content: center !important;
	padding: 0 !important;
}

/* Frequentie — radio-weergave (class termijn-rb op #tab-container-nav) */
#tab-container-nav.termijn-rb a {
	justify-content: left !important;
	padding: 10px 20px 0 40px !important;
}

/* Termijn radio-view: naast elkaar i.p.v. volle breedte (overschrijft form_backbone) */
.termijn-rb .radio-inline {
	display: inline-block !important;
	width: auto !important; /* was 100% !important */
}

label#termijn_text_content {
    display: inline-block !important;
    max-height: fit-content;
}

/* Payment-radios (Online / Machtiging): tekst gecentreerd, géén Affirm */
#tab-container-payment-nav a,
#tab-container-payment-nav a.active {
	justify-content: center !important;
	text-align: center !important;
	padding: 0 20px !important;
	gap: 0 !important;
}

#tab-container-payment-nav a.active,
#tab-container-nav a.active {
	background-color: var(--vwn-blue-100);
	color: var(--vwn-white);
	border-color: var(--vwn-blue-100);
}

/* Wrapper-spans om Ja/Nee — inline-block zodat beide op één regel staan */
.termijn-hide-reveal-row > span {
	display: inline-block;
	vertical-align: top;
	width: calc(50% - 4px);
	margin-right: 4px;
	box-sizing: border-box;
}

.termijn-hide-reveal-row > span .termin_show_amounts.buttonview {
	width: 100% !important;
	margin-right: 0 !important;
}

.termin_show_amounts.buttonview {
	font-family: var(--vwn-font-display);
	font-weight: 600;
	color: var(--vwn-link);
	background-color: #ffffff !important; /* wit — niet form_style transparant/rood */
	border: 1px solid var(--vwn-blue-100);
	border-radius: 0 !important; /* niet form_style/backbone 8px */
	height: 52px !important;
	padding: 0 20px !important;
	line-height: 52px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	position: relative !important;
}

.termin_show_amounts.buttonview.active {
	background-color: var(--vwn-blue-100) !important;
	color: #ffffff !important; /* wit — niet form_style #F84F37 */
	border-color: var(--vwn-blue-100) !important;
	border-radius: 0 !important;
	background-image: none !important;
	padding: 0 20px !important;
	gap: 8px !important; /* Affirm strak naast labeltekst */
}

.termin_show_amounts.buttonview.active label,
.termin_show_amounts.buttonview label {
	color: inherit !important;
	font-weight: 600;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center;
}

/* Ander bedrag — Figma Navigation item (Custom amount): wit + 1px blue + blauwe tekst */
.radio-inline.anderswrappercls,
.radio-group .radio-inline.anderswrappercls {
	display: block !important;
	width: 100% !important;
	position: relative !important;
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	height: 52px !important;
	min-height: 52px !important;
}

.form-group input.form-control.anders,
aside input.form-control.anders,
input.form-control.anders {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	line-height: 52px !important;
	color: var(--vwn-link) !important;
	background-color: var(--vwn-white) !important;
	border: 1px solid var(--vwn-blue-100) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	height: 52px !important;
	min-height: 52px !important;
	padding: 0 20px 0 168px !important;
	text-indent: 0;
	outline: none !important;
	box-sizing: border-box !important;
}

.form-group input.form-control.anders:focus,
aside input.form-control.anders:focus,
input.form-control.anders:focus,
.form-group input.form-control.anders.andersselected,
aside input.form-control.anders.andersselected,
input.form-control.anders.andersselected {
	background-color: var(--vwn-blue-100) !important;
	border-color: var(--vwn-blue-100) !important;
	color: var(--vwn-white) !important;
	outline: none !important;
	box-shadow: none !important;
}

label.static-amount-value,
.static-amount-value {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	line-height: 52px !important;
	color: var(--vwn-link) !important;
	position: absolute !important;
	left: 20px !important;
	top: 0 !important;
	bottom: auto !important;
	height: 52px !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	white-space: nowrap;
	z-index: 1;
	display: block !important;
}

.form-group input.form-control.anders:focus + label.static-amount-value,
.form-group input.form-control.anders.andersselected + label.static-amount-value,
input.form-control.anders:focus + .static-amount-value,
input.form-control.anders.andersselected + .static-amount-value {
	color: var(--vwn-white) !important;
}

/* Bedrag-beschrijving (popBubble) — JS toont/verbergt; géén display:!important (blokkeert .hide()) */
aside .popBubble,
#form .popBubble,
.popBubble {
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 52px !important;
	height: auto !important;
	margin: 0 0 8px 0 !important;
	padding: 14px 20px !important;
	/* display door JS; als zichtbaar → flex via show() zonder !important te forceren */
	align-items: center !important;
	background-color: var(--vwn-white) !important;
	border: 1px solid var(--vwn-blue-100) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--vwn-font-ui) !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 20px !important;
	color: var(--vwn-darkgrey) !important;
	text-align: left !important;
	position: relative !important;
}

/* Zichtbare bubbel (jQuery .show() → inline block/flex) verticaal centreren */
aside .popBubble[style*="block"],
#form .popBubble[style*="block"],
.popBubble[style*="block"],
aside .popBubble[style*="flex"],
#form .popBubble[style*="flex"],
.popBubble[style*="flex"] {
	display: flex !important;
	align-items: center !important;
}

/* Geen speech-bubble pijltje — vlak Navigation-item kader */
aside .popBubble::before,
#form .popBubble::before,
.popBubble::before,
aside .popBubble.left::before,
aside .popBubble.right::before,
aside .popBubble.center::before,
.popBubble.left::before,
.popBubble.right::before,
.popBubble.center::before {
	content: none !important;
	display: none !important;
	border: none !important;
	background: none !important;
}

/* Affirm — alleen bedragknoppen + termin; níet frequentie-/payment-tabs */
.radio-group input[type="radio"]:not(:checked) + span.bedrag:not(.active)::before,
.radio-group input[type="checkbox"]:not(:checked) + span.bedrag:not(.active)::before,
#tab-container-nav a::before,
#tab-container-nav a.active::before,
#tab-container-payment-nav a::before,
#tab-container-payment-nav a.active::before,
.radio-inline[class*="paymenttab"] a::before,
.radio-inline[class*="paymenttab"] a.active::before,
.radio-group.payment .radio-inline a::before,
.radio-group.payment .radio-inline a.active::before,
.termin_show_amounts.buttonview:not(.active)::before {
	content: none !important;
	display: none !important;
	background-image: none !important;
}

/* Bedrag / Ja-Nee: Affirm in flex-flow, direct links van de tekst (groep blijft gecentreerd) */
.radio-group input[type="radio"]:checked + span.bedrag::before,
.radio-group input[type="radio"] + span.bedrag.active::before,
.radio-group input[type="checkbox"]:checked + span.bedrag::before,
.radio-group input[type="checkbox"] + span.bedrag.active::before,
.termin_show_amounts.buttonview.active::before {
	content: '' !important;
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	line-height: 0 !important;
	background-color: transparent !important;
	background-image: url('../../img/huisstijl-2026/icon-affirm.svg') !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px 20px !important;
	box-shadow: none !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
	float: none !important;
	flex-shrink: 0 !important;
	order: -1 !important;
	z-index: 2 !important;
}

/* Privacy-checkbox — niet op bedrag-knoppen (checkbox-inline.radio_container / .bedrag) */
.checkbox-inline:not(.radio_container):not(.checkbox_container):not(.anderswrappercls),
aside input[type="checkbox"] + label:not(.radio_container):not(.checkbox_container),
.form-group.checkbox label,
label.checkbox_overwrite {
	font-family: var(--vwn-font-ui) !important;
	font-size: 15px !important;
	line-height: 20px !important;
	font-weight: 400 !important;
	color: var(--vwn-black) !important;
	display: flex !important;
	align-items: flex-start;
	gap: 0;
	cursor: pointer;
	padding: 8px 0 !important;
	margin: 0 !important;
}

#paymenttab2 .checkbox-inline {
    padding-top: 12px !important;
    display: inline-block !important;
    margin: -5px !important;
}

/* Bedragknoppen: fixed table zodat HTML style="width:X%" echt gelijk verdeelt
   (auto-layout kromp de laatste knop naar tekstbreedte, bv. € 25) */
.radio-group .full {
	display: table !important;
	width: 100% !important;
	table-layout: fixed !important;
}

.radio-group .radio-inline.radio_container:not(.anderswrappercls),
.radio-group .checkbox-inline.checkbox_container:not(.anderswrappercls),
.radio-group .checkbox-inline.radio_container:not(.anderswrappercls) {
	display: table-cell !important;
	/* géén width:!important — inline width:% uit PHP moet gelden */
	vertical-align: top !important;
	align-items: unset !important;
	font-size: inherit !important;
	line-height: normal !important;
	color: inherit !important;
	font-weight: 600 !important;
	padding: 0 8px 0 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.radio-group .radio-inline.radio_container:not(.anderswrappercls):last-child,
.radio-group .checkbox-inline.checkbox_container:not(.anderswrappercls):last-child {
	padding-right: 0 !important;
	float: none !important; /* form_style float:right brak HTML width:% */
}

/* Payment-/activeli-radios: géén Affirm; labels gecentreerd */
.radio-inline.activeli::before,
.radio-inline.activeli::after,
label.radio-inline.activeli::before,
label.radio-inline.activeli a::before,
label.radio-inline.activeli a.active::before,
.radio-inline[class*="paymenttab"]::before,
.radio-inline[class*="paymenttab"] a::before,
.radio-inline[class*="paymenttab"] a.active::before,
.radio-group.payment .radio-inline::before,
.radio-group.payment .radio-inline a::before,
.radio-group.payment .radio-inline a.active::before {
	content: none !important;
	display: none !important;
	background: none !important;
	background-image: none !important;
	width: 0 !important;
	height: 0 !important;
}

.radio-inline.activeli a,
.radio-inline.activeli a.active,
.radio-inline[class*="paymenttab"] a,
.radio-inline[class*="paymenttab"] a.active,
.radio-group.payment .radio-inline a,
.radio-group.payment .radio-inline a.active {
	justify-content: center !important;
	text-align: center !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

label.checkbox_overwrite input[type="checkbox"] {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	z-index: 2;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	opacity: 0 !important;
	cursor: pointer;
}

/* Figma "Rectangle" */
label.checkbox_overwrite input + span {
	float: none !important;
	flex: 0 0 20px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	min-height: 20px;
	margin: 0 10px 0 0 !important; /* Figma gap 10 */
	padding: 0 !important;
	background-color: #ffffff !important;
	border: 1px solid #666666 !important;
	border-radius: 0 !important;
}

label.checkbox_overwrite input + span::before {
	content: '' !important;
	display: none !important;
}

label.checkbox_overwrite input:checked + span {
	background-color: #ffffff !important;
	border-color: #666666 !important;
}

label.checkbox_overwrite input:checked + span::before {
	content: '\f00c' !important;
	display: block !important;
	font-family: fontAwesome !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: var(--vwn-blue-100) !important; /* merkblauw i.p.v. oud rood */
	text-align: center !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

label.checkbox_overwrite .cb_textblock,
label.checkbox_overwrite {
	font-size: 15px !important;
	line-height: 1.35 !important;
	color: var(--vwn-black) !important;
}

label.checkbox_overwrite:focus-within input + span,
label.checkbox_overwrite input:focus + span {
	outline: 2px solid var(--vwn-blue-100);
	outline-offset: 2px;
}

.radio_with_related_wrapper {
	padding: 10px 0;
}

/* Doneer als bedrijf — AZG-patroon: tekst rechts naast "Mijn gegevens", géén zichtbaar vakje
   (tekst zit in span::before; onze checkbox_overwrite::before-reset moet hier wijken) */
.form-group.checkbox_with_related_wrapper:has(.company_option_checkbox) {
	position: relative;
	margin-bottom: 2px !important;
	min-height: 0;
}

label.checkbox_overwrite:has(.company_option_checkbox) {
	display: block !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	align-items: unset;
}

label.checkbox_overwrite .company_option_checkbox + span,
.checkbox_with_related.company_option_checkbox + span {
	border: 0 !important;
	max-height: 1px !important;
	width: auto !important;
	height: 1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	float: left !important;
	display: block !important;
	flex: none !important;
	outline: none !important;
}

label.checkbox_overwrite .company_option_checkbox + span::before,
label.checkbox_overwrite .company_option_checkbox:checked + span::before,
.checkbox_with_related.company_option_checkbox + span::before,
.checkbox_with_related.company_option_checkbox:checked + span::before {
	content: '+ Doneer als bedrijf' !important;
	display: block !important;
	float: right !important;
	text-align: right !important;
	position: absolute !important;
	right: 0 !important;
	left: auto !important;
	top: auto !important;
	bottom: auto !important;
	transform: none !important;
	font-family: var(--vwn-font-ui) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	color: var(--vwn-black) !important;
	padding: 4px 0 0 0 !important;
	margin: -22px 0 0 0 !important;
	opacity: 1 !important;
	width: 100% !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background: none !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	z-index: 2 !important;
}

label.checkbox_overwrite:has(.company_option_checkbox):focus-within input + span,
label.checkbox_overwrite .company_option_checkbox:focus + span {
	outline: none !important;
}

.form-group.kikz.col-xs-12.iban {
    margin-top: 5px;
}

aside div[class*="col-"].extramargin {
    z-index: 1;
    padding-right: 1px;
}

/* CTA-knop — lichte laag (#EF8C83) pas zichtbaar bij hover; knop beweegt ervan af */
.btn-primary,
aside .btn,
aside .btn-primary,
button#verstuur,
.volgende.btn,
aside .form-group.lb_submit .btn {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: var(--vwn-fs-button) !important; /* 20px */
	line-height: 18px;
	background-color: var(--vwn-red-100) !important;
	border: none !important;
	border-radius: 0 !important;
	color: var(--vwn-white) !important;
	padding: 16px 32px !important;
	box-shadow: 0 0 0 0 var(--vwn-red-50) !important;
	position: relative;
	margin: 0 4px 4px 0 !important;
	transform: translate(0, 0);
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary.active:hover,
aside .btn:hover,
aside .btn:focus,
button#verstuur:hover,
button#verstuur:focus,
.volgende.btn:hover {
	background-color: var(--vwn-red-100) !important;
	border: none !important;
	color: var(--vwn-white) !important;
	/* lichte laag verschijnt; knop schuift ervan af (linksboven) */
	box-shadow: 4px 4px 0 0 var(--vwn-red-50) !important;
	transform: translate(-4px, -4px);
}

aside .btn span,
aside .btn span.amount {
	font-family: var(--vwn-font-display);
	font-weight: 600;
	font-size: var(--vwn-fs-button) !important; /* 20px */
	line-height: 18px;
	color: var(--vwn-white);
	margin-bottom: 2px;
}

aside .btn span.amount {
	margin-left: 5px !important;
	margin-bottom: 2px !important;
}

.amount .glyphicon {
	font-size: inherit !important; /* was 24px in form_style */
}

button#verstuur span.caption,
aside .btn span.caption {
	margin-right: 0 !important;
}

.btn.short-form-btn span {
	margin-right: 0;
}

.short_buttons {
	width: 100%;
	margin-right: 8px;
}

a.back.btn.short-form-btn.btn-primary {
	float: left;
	background-color: transparent !important;
	margin-left: 12px !important;
	background-image: url(../../img/arrow_l.png);
	background-repeat: no-repeat;
	margin-top: 14px !important;
	padding: 16px 10px !important;
	box-shadow: none !important;
	transform: none !important;
}

a.back.btn.short-form-btn.btn-primary:hover,
a.back.btn.short-form-btn.btn-primary:focus {
	background-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Footer — top (beige) + bottom (bruin #543900) */
footer.footer-huisstijl-2026 {
	background-color: transparent;
	font-family: var(--vwn-font-ui);
	padding: 0;
	margin-top: 48px;
}

.footer-huisstijl-2026__top {
	background-color: var(--vwn-beige-75);
	padding: 48px 0 0;
}

.footer-huisstijl-2026__top-row {
	display: flex;
	align-items: flex-end;
	margin-bottom: 0;
}

.footer-newsletter {
	background: var(--vwn-white);
	padding: 40px 32px;
	margin-bottom: -40px;
}

.footer-newsletter__title,
.footer-social__title {
	font-family: var(--vwn-font-display) !important;
	font-weight: 600 !important;
	font-size: 22px !important; /* Figma — niet h3-default / em-cascade */
	line-height: 22px !important;
	color: var(--vwn-brown-100) !important;
	margin: 0 0 8px;
}

.footer-newsletter__text {
	font-family: var(--vwn-font-body) !important;
	font-size: 16px !important;
	line-height: 26px !important;
	color: var(--vwn-black) !important;
	margin: 0 0 16px;
}

.footer-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: stretch;
}

.footer-newsletter__field {
	flex: 1 1 220px;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--vwn-beige-50);
	padding: 8px 16px;
	min-height: 40px;
}

.footer-newsletter__icon {
	flex-shrink: 0;
	display: block;
}

.footer-newsletter__input {
	flex: 1 1 auto;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--vwn-font-ui);
	font-size: 18px;
	line-height: 24px;
	color: var(--vwn-black);
	padding: 0 !important;
	height: auto !important;
	min-height: 0 !important;
}

.footer-newsletter__input::placeholder {
	color: var(--vwn-darkgrey);
}

.footer-newsletter__submit {
	font-family: var(--vwn-font-display);
	font-weight: 600;
	font-size: 16px;
	background: var(--vwn-blue-100);
	color: var(--vwn-white);
	border: 0;
	padding: 12px 20px;
	box-shadow: 0 0 0 0 #97a4f0;
	cursor: pointer;
	white-space: nowrap;
	margin: 0;
	transform: translate(0, 0);
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.footer-newsletter__submit:hover {
	background: var(--vwn-blue-100);
	box-shadow: 4px 4px 0 0 #97a4f0;
	transform: translate(-4px, -4px);
}

.footer-social {
	padding: 24px 0 24px 16px;
}

.footer-social__list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
}

.footer-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 12px;
	background: var(--vwn-pink-75) !important;
	box-sizing: border-box;
	filter: none !important;
}

/* Icoon als mask → altijd bruin op roze tegel, geen witte blokken */
.footer-social__icon {
	display: block;
	width: 24px;
	height: 24px;
	background-color: var(--vwn-brown-100);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.footer-social__icon--instagram {
	-webkit-mask-image: url('../../img/huisstijl-2026/icon-instagram.svg');
	mask-image: url('../../img/huisstijl-2026/icon-instagram.svg');
}
.footer-social__icon--linkedin {
	-webkit-mask-image: url('../../img/huisstijl-2026/icon-linkedin.svg');
	mask-image: url('../../img/huisstijl-2026/icon-linkedin.svg');
}
.footer-social__icon--youtube {
	-webkit-mask-image: url('../../img/huisstijl-2026/icon-youtube.svg');
	mask-image: url('../../img/huisstijl-2026/icon-youtube.svg');
}
.footer-social__icon--facebook {
	-webkit-mask-image: url('../../img/huisstijl-2026/icon-facebook.svg');
	mask-image: url('../../img/huisstijl-2026/icon-facebook.svg');
}
.footer-social__icon--bluesky {
	-webkit-mask-image: url('../../img/huisstijl-2026/icon-bluesky.svg');
	mask-image: url('../../img/huisstijl-2026/icon-bluesky.svg');
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

footer.footer-huisstijl-2026 .bottomfooter,
.footer-huisstijl-2026 .bottomfooter {
	background-color: var(--vwn-brown-100) !important;
	color: var(--vwn-white) !important;
	margin-top: 0;
	padding-top: 90px;
	/* style_2025 .bottomfooter { font-size: 1.6em } → ~26px op body 16px; Figma = 15px */
	font-size: 15px !important;
	line-height: 26px !important;
	font-family: var(--vwn-font-ui) !important;
	font-weight: 400 !important;
}

.footer-huisstijl-2026 .footeradres {
	color: var(--vwn-white) !important;
	font-size: 15px !important;
	line-height: 26px !important;
	font-family: var(--vwn-font-ui) !important;
	font-weight: 400 !important;
}

.footer-huisstijl-2026 .bottomfooter a,
.footer-huisstijl-2026 .bottomfooter a:link,
.footer-huisstijl-2026 .bottomfooter a:visited,
.footer-huisstijl-2026 .footeradres a,
.footer-huisstijl-2026 .footer_logo_nav a {
	color: var(--vwn-white) !important;
	font-size: 15px !important;
	line-height: 26px !important;
	font-family: var(--vwn-font-ui) !important;
	font-weight: 400 !important;
}

.footer-huisstijl-2026 .bottomfooter a:hover,
.footer-huisstijl-2026 .footeradres a:hover {
	color: var(--vwn-beige-50) !important;
}

.footer-huisstijl-2026 .footer_logo_nav {
	border-top-color: rgba(255, 255, 255, 0.25) !important;
}

.footer-huisstijl-2026 .footer_logo_nav .logos {
	/* Originele kleuren behouden (geen invert → witte blokken) */
	filter: none !important;
	opacity: 1;
	max-height: 40px;
	width: auto;
}

@media (max-width: 767px) {
	.footer-huisstijl-2026__top-row {
		display: block;
	}

	.footer-newsletter {
		margin-bottom: 24px;
	}

	.footer-social {
		padding: 0 0 32px;
	}

	h2.form_header_title {
		padding-top: 12px;
	}

	footer.footer-huisstijl-2026 .bottomfooter,
	.footer-huisstijl-2026 .bottomfooter {
		padding-top: 0;
	}
}