.eurostrong-whatsapp-button {
	position: fixed;
	right: 20px;
	right: calc(20px + env(safe-area-inset-right, 0px));
	/* The existing comparison tray publishes its measured height on body. */
	bottom: calc(20px + var(--es-compare-panel-height, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px) + var(--es-compare-panel-height, 0px));
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #128c45;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 3px 12px rgb(0 0 0 / 24%);
}

.eurostrong-whatsapp-button:visited { color: #fff; }
.eurostrong-whatsapp-button:hover { background: #0b6b34; color: #fff; }
.eurostrong-whatsapp-button:focus-visible {
	background: #0b6b34;
	color: #fff;
	outline: 3px solid #163046;
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #fff;
}
.eurostrong-whatsapp-icon { display: block; flex: none; }

@media (max-width: 600px) {
	.eurostrong-whatsapp-button {
		right: 16px;
		right: calc(16px + env(safe-area-inset-right, 0px));
		bottom: calc(16px + var(--es-compare-panel-height, 0px));
		bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--es-compare-panel-height, 0px));
		/* Keep the 56px button inside a short mobile viewport as well. */
		bottom: clamp(16px, calc(16px + env(safe-area-inset-bottom, 0px) + var(--es-compare-panel-height, 0px)), calc(100svh - 72px));
		max-width: calc(100vw - 32px);
		visibility: visible;
		opacity: 1;
	}
}