/*
 * Zwevende WhatsApp-knop. Vast op het scherm, dus geen layoutverschuiving.
 * Op mobiel boven de onderste balk; op een productpagina ook boven de koopbalk.
 * De cookieknop staat links, deze rechts.
 */

.cp-whatsapp {
	--cp-whatsapp-bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 0.75rem);
	position: fixed;
	z-index: 60;
	right: max(0.75rem, env(safe-area-inset-right, 0px));
	bottom: var(--cp-whatsapp-bottom);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 8px 24px -8px rgb(1 28 56 / 0.45);
	text-decoration: none;
}

.cp-whatsapp:hover {
	background: #1ebe5d;
	color: #fff;
}

.cp-whatsapp svg {
	display: block;
}

/* Tekstballon links van de knop. Overlay: neemt geen ruimte in en duwt niets opzij. */
.cp-whatsapp__label {
	position: absolute;
	top: 50%;
	right: calc(100% + 0.7rem);
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--cp-color-border, #d8dde3);
	border-radius: 999px;
	background: #fff;
	color: var(--cp-color-foreground, #011c38);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 8px 24px -12px rgb(1 28 56 / 0.45);
	opacity: 0;
	visibility: hidden;
	translate: 0.35rem -50%;
	pointer-events: none;
	transition: opacity 0.15s ease, translate 0.15s ease, visibility 0s 0.15s;
}

.cp-whatsapp__label::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	border: 6px solid transparent;
	border-left-color: #fff;
	translate: 0 -50%;
}

.cp-whatsapp:hover .cp-whatsapp__label,
.cp-whatsapp:focus-visible .cp-whatsapp__label {
	opacity: 1;
	visibility: visible;
	translate: 0 -50%;
	transition-delay: 0s;
}

.cp-whatsapp:hover .cp-whatsapp__label {
	color: var(--cp-color-foreground, #011c38);
}

@media (prefers-reduced-motion: reduce) {
	.cp-whatsapp__label {
		translate: 0 -50%;
		transition: none;
	}
}

@media (max-width: 63.999em) {
	body.cp-simple-chrome .cp-whatsapp {
		--cp-whatsapp-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
	}

	body.cp-is-product .cp-whatsapp {
		--cp-whatsapp-bottom: calc(68px + 4.75rem + env(safe-area-inset-bottom, 0px) + 0.5rem);
	}
}

@media (min-width: 64em) {
	.cp-whatsapp {
		--cp-whatsapp-bottom: 1.25rem;
		right: 1.25rem;
	}
}