/* Vaste contactbalk onderaan: verschijnt bij scrollen, verdwijnt onderaan de pagina. */
.contact-bar {
	--cb-green: #1b5e20;
	--cb-green-dark: #12451a;
	--cb-height: 56px;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--cb-green-dark);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.contact-bar.is-visible {
	transform: none;
	visibility: visible;
	transition: transform 0.25s ease, visibility 0s;
}

.contact-bar__btn {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--cb-height);
	padding: 0 12px;
	font-family: "Work Sans", "Roboto", Sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: #fff !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.contact-bar__btn--call {
	background: var(--cb-green);
}

.contact-bar__btn--whatsapp {
	background: var(--cb-green-dark);
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.contact-bar__btn:hover,
.contact-bar__btn:focus-visible {
	background: #2e7d32;
}

.contact-bar__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -5px;
}

.contact-bar__btn svg {
	width: 22px;
	height: 22px;
	flex: none;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.contact-bar,
	.contact-bar.is-visible {
		transition: none;
	}
}

/* Prijscalculator: eigen prijsbalk boven de contactbalk schuiven. */
body.has-contact-bar .pc-bar {
	bottom: calc(56px + env(safe-area-inset-bottom));
}