.whatsapp-fab {
	position: fixed;
	bottom: var(--listiko-space-4);
	right: var(--listiko-space-4);
	z-index: 25;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--listiko-radius-pill);
	background-color: #25d366;
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	animation: whatsapp-pulse 1.5s ease-in-out infinite;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

/* Mientras el usuario lo arrastra: sin animación ni transición y cursor de agarre. */
.whatsapp-fab.is-dragging,
.whatsapp-fab.is-dragging::before,
.whatsapp-fab.is-dragging .whatsapp-fab__badge {
	animation: none;
}

.whatsapp-fab.is-dragging {
	cursor: grabbing;
	transition: none;
	transform: scale(1.1);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.whatsapp-fab:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
	color: #fff;
	text-decoration: none;
	animation: none;
}

.whatsapp-fab:focus-visible {
	outline: 2px solid var(--listiko-color-accent);
	outline-offset: 2px;
}

.whatsapp-fab .icon {
	width: 1.75rem;
	height: 1.75rem;
}

/* Notification badge. */
.whatsapp-fab__badge {
	position: absolute;
	top: -0.15rem;
	right: -0.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding-inline: 0.25rem;
	border-radius: var(--listiko-radius-pill);
	background-color: #e53e3e;
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
	border: 2px solid #fff;
	animation: badge-pulse 2s ease-in-out infinite;
}

/* Pulse ring behind the button. */
.whatsapp-fab::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: #25d366;
	opacity: 0;
	z-index: -1;
	animation: whatsapp-ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes whatsapp-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}

@keyframes whatsapp-ping {
	0% {
		transform: scale(1);
		opacity: 0.4;
	}
	70%, 100% {
		transform: scale(1.8);
		opacity: 0;
	}
}

@keyframes badge-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.2); }
}

@media (max-width: 767.98px) {
	.whatsapp-fab {
		bottom: calc(3.5rem + var(--listiko-space-3));
	}
}

@media (prefers-reduced-motion: reduce) {
	.whatsapp-fab,
	.whatsapp-fab::before,
	.whatsapp-fab__badge {
		animation: none;
	}
}