/**
 * WhatsApp chat bubble (inc/whatsapp.php). Pill with label on wider screens,
 * round icon button on phones. Hidden while the cookie banner or the mobile
 * menu is open so it never covers either. Green #14813f keeps white text at
 * 4.9:1 contrast (WhatsApp's own #25d366 is too light for white text).
 */
.wa-bubble {
	position: fixed;
	right: calc(var(--space-5) + env(safe-area-inset-right, 0px));
	/* 48px up on desktop: Complianz's "manage consent" tab sits on the bottom edge. */
	bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
	z-index: 120;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 52px;
	padding: 0 var(--space-5) 0 var(--space-4);
	border-radius: var(--radius-pill);
	background: #14813f;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body-sm);
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, visibility 0.2s;
}

.wa-bubble:hover {
	background: #0f6b33;
	color: var(--color-white);
	transform: translateY(-2px);
}

.wa-bubble:focus-visible {
	outline: 2px solid var(--color-primary-text);
	outline-offset: 3px;
}

.wa-bubble .wa-icon {
	width: 26px;
	height: 26px;
	flex: none;
}

.wa-banner-open .wa-bubble,
body.nav-open .wa-bubble {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 600px) {
	.wa-bubble {
		right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
		bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
	}

	.wa-bubble .wa-icon {
		width: 30px;
		height: 30px;
	}

	.wa-bubble__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wa-bubble {
		transition: none;
	}

	.wa-bubble:hover {
		transform: none;
	}
}

@media print {
	.wa-bubble {
		display: none;
	}
}