/* [vm_footer] – site-footer, variant A (volledig) en C (minimaal). Alles onder .vm-footer. */

.vm.vm-footer {
	position: relative;
	display: flow-root; /* de verkoopkaart (negatieve marge) blijft binnen de footer: geen paginakleur ertussen */
	margin: 0;
	padding: 0;
	background: var(--vm-footer-bg);
	color: var(--vm-wit);
	font-family: var(--vm-font-tekst);
	font-size: var(--vm-tekst);
	line-height: 1.5;
}

.vm-footer a {
	text-decoration: none;
}

.vm-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Verkoopkaart: eerste kind, overlapt de bovenrand van de footer */
.vm-footer__verkoop {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: -44px 0 36px;
	padding: 20px 18px;
	background: var(--vm-wit);
	border-radius: var(--vm-r-l);
	box-shadow: var(--vm-sch-3);
	color: var(--vm-inkt);
}

.vm-footer__eyebrow {
	display: block;
	color: var(--vm-oranje-tekst);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vm.vm-footer .vm-footer__verkoop h2 {
	font-family: var(--vm-font-kop);
	font-weight: 800;
	letter-spacing: normal;
	text-transform: none;
	margin: 4px 0 8px;
	color: var(--vm-blauw-700);
	font-size: 23px;
	line-height: 1.2;
}

.vm-footer__voordelen {
	display: flex;
	flex-direction: column;
	gap: 6px 20px;
	font-size: 14px;
}

.vm-footer__voordelen li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.vm-footer__voordelen svg {
	flex-shrink: 0;
	color: var(--vm-succes);
}

.vm-footer__verkoop-acties {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.vm.vm-footer a.vm-footer__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 28px;
	background: var(--vm-knop);
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(224, 111, 0, .28);
	color: var(--vm-wit);
	font-size: 16px;
	font-weight: 700;
}

.vm.vm-footer a.vm-footer__knop:hover {
	background: var(--vm-knop-hover);
	color: var(--vm-wit);
}

.vm.vm-footer a.vm-footer__tekstlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--vm-blauw-700);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Raster: merkkolom en drie linkkolommen */
.vm-footer__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 16px;
	padding-bottom: 32px;
}

.vm-footer__merk {
	grid-column: 1 / -1;
}

.vm-footer__logo {
	display: block;
	width: 150px;
}

.vm-footer__logo-svg {
	display: block;
	width: 100%;
	height: auto;
}

.vm-footer__merk p {
	margin: 12px 0 18px;
	color: var(--vm-wit);
	font: 800 16px/1.3 var(--vm-font-kop);
}

.vm.vm-footer a.vm-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	background: rgba(255, 255, 255, .12);
	border-radius: var(--vm-r-pil);
	color: var(--vm-wit);
	font-size: 14px;
	font-weight: 600;
}

.vm.vm-footer a.vm-footer__social:hover {
	background: rgba(255, 255, 255, .2);
	color: var(--vm-wit);
}

.vm.vm-footer .vm-footer__kolom h2 {
	margin: 6px 0 14px;
	color: var(--vm-footer-oranje);
	font: 700 12px/1.4 var(--vm-font-tekst);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vm-footer__kolom ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vm.vm-footer .vm-footer__kolom a {
	color: rgba(255, 255, 255, .92);
	font-size: 14px;
}

.vm.vm-footer .vm-footer__kolom a:hover {
	color: var(--vm-wit);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Onderbalk */
.vm-footer__onder {
	background: var(--vm-footer-onder);
}

.vm-footer__onder-in {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px));
	color: rgba(255, 255, 255, .75);
	font-size: var(--vm-klein);
}

.vm-footer__juridisch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.vm.vm-footer .vm-footer__juridisch a {
	color: rgba(255, 255, 255, .85);
}

.vm.vm-footer .vm-footer__juridisch a:hover {
	color: var(--vm-wit);
	text-decoration: underline;
}

/* Variant C: logo en vertrouwensregel */
.vm-footer--c .vm-footer__vertrouwen {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding-block: 32px 28px;
}

.vm-footer__vertrouwen ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vm-footer__vertrouwen li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .9);
	font-size: 14px;
}

.vm-footer__vertrouwen svg {
	flex-shrink: 0;
	color: var(--vm-footer-oranje);
}

@media (min-width: 768px) {
	.vm-footer__verkoop {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		margin-bottom: 52px;
		padding: 26px 32px;
		border-radius: 18px;
	}

	.vm.vm-footer .vm-footer__verkoop h2 {
		font-size: 28px;
	}

	.vm-footer__voordelen {
		flex-direction: row;
		flex-wrap: wrap;
		font-size: var(--vm-tekst);
	}

	.vm-footer__verkoop-acties {
		flex-shrink: 0;
		align-items: flex-end;
	}

	.vm.vm-footer a.vm-footer__knop {
		height: 52px;
	}

	.vm-footer__raster {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 40px;
		padding-bottom: 48px;
	}

	.vm-footer__merk {
		grid-column: auto;
	}

	.vm-footer__logo {
		width: 180px;
	}

	.vm.vm-footer .vm-footer__kolom a {
		font-size: var(--vm-tekst);
	}

	.vm-footer__onder-in {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.vm-footer--c .vm-footer__vertrouwen {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	.vm-footer--c .vm-footer__logo {
		width: 150px;
	}

	.vm-footer__vertrouwen ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px 28px;
	}
}

/* Brug naar de laatste sectie: de strook tussen die sectie en de footer krijgt haar kleur (footer.js) */
.vm-footer--a::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	z-index: 0;
	height: var(--vm-footer-brug-h, 0);
	background: var(--vm-footer-brug, transparent);
	pointer-events: none;
}

/* Extra ruimte tussen het einde van de pagina en de verkoopkaart; de strook krijgt de kleur van de laatste sectie (footer.js) */
.vm.vm-footer--a {
	margin-top: 56px;
}

@media (min-width: 768px) {
	.vm.vm-footer--a {
		margin-top: 40px;
	}
}