/*
 * Floating WhatsApp Button - estilos del frontend.
 * Variables CSS --fwb-size-desktop / --fwb-size-mobile inyectadas desde PHP.
 */

:root {
	--fwb-size-desktop: 60px;
	--fwb-size-mobile: 55px;
	--fwb-bg: #25d366;
	--fwb-bg-hover: #1ebe5d;
	--fwb-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	--fwb-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.28);
	--fwb-z-index: 99999;
}

/* Botón flotante anclado abajo a la derecha. */
.fwb-floating-button {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: var(--fwb-size-desktop);
	height: var(--fwb-size-desktop);
	background-color: var(--fwb-bg);
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--fwb-shadow);
	text-decoration: none;
	z-index: var(--fwb-z-index);
	transition:
		transform 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;
	box-sizing: border-box;
	padding: 0;
	border: none;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
	animation: fwb-pulse 2.4s ease-out infinite;
}

.fwb-floating-button:hover,
.fwb-floating-button:focus {
	background-color: var(--fwb-bg-hover);
	transform: scale(1.06);
	box-shadow: var(--fwb-shadow-hover);
	color: #fff;
	outline: none;
	text-decoration: none;
}

.fwb-floating-button:active {
	transform: scale(0.98);
}

/* Icono SVG ocupa el 60% del botón para mantener proporción. */
.fwb-floating-button .fwb-icon {
	width: 60%;
	height: 60%;
	display: block;
	pointer-events: none;
}

/* Texto solo para lectores de pantalla. */
.fwb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Pulso sutil para llamar la atención sin molestar. */
@keyframes fwb-pulse {
	0% {
		box-shadow: var(--fwb-shadow), 0 0 0 0 rgba(37, 211, 102, 0.55);
	}
	70% {
		box-shadow: var(--fwb-shadow), 0 0 0 18px rgba(37, 211, 102, 0);
	}
	100% {
		box-shadow: var(--fwb-shadow), 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

/* Responsive: tamaño móvil. */
@media (max-width: 768px) {
	.fwb-floating-button {
		width: var(--fwb-size-mobile);
		height: var(--fwb-size-mobile);
		right: 15px;
		bottom: 15px;
	}
}

/* Respeto a usuarios con preferencia de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
	.fwb-floating-button {
		animation: none;
		transition: none;
	}
}