/* =========================================================================
   COIP WhatsApp — botón flotante

   Esquina inferior izquierda. Entra una vez, al cargar, subiendo desde esa
   esquina; con movimiento reducido aparece sin más.

   Capas: z-index 19. Por encima del contenido de la página (lo más alto que
   usa el tema dentro de una sección es 5) y por debajo de cada capa del tema
   coipmethod-2026 —cabecera 20, velo del cajón móvil 24, barra de compra 25,
   carrito flotante 30—, así que todo lo que se abre encima lo tapa sin que
   haya que ocultarlo a mano. Por encima de 19 sólo queda lo que es de otros
   plugins y va a cuatro o cinco cifras (el aviso de cookies, el desplegable
   de prefijos del teléfono), que también debe taparlo.
   ========================================================================= */

.coip-wa {
	--coip-wa-tam: 56px;
	--coip-wa-aire: 24px;
	--coip-wa-base: 0px; /* lo que hay que dejar libre debajo (barra de compra) */

	position: fixed;
	left: calc(var(--coip-wa-aire) + env(safe-area-inset-left, 0px));
	bottom: calc(var(--coip-wa-aire) + var(--coip-wa-base) + env(safe-area-inset-bottom, 0px));
	z-index: 19;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--coip-wa-tam);
	height: var(--coip-wa-tam);
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(41, 43, 50, 0.22), 0 2px 5px rgba(41, 43, 50, 0.12);
	-webkit-tap-highlight-color: transparent;
	animation: coip-wa-entra 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
	transition:
		translate var(--coip-dur-rapida, 0.18s) var(--coip-ease-suave, ease-out),
		box-shadow var(--coip-dur-rapida, 0.18s) var(--coip-ease-suave, ease-out),
		bottom 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.coip-wa svg {
	display: block;
	width: 56%;
	height: 56%;
	fill: #fff; /* no currentColor: los a:hover del tema le cambiarían el color */
}

@keyframes coip-wa-entra {
	from {
		opacity: 0;
		transform: translate(-24px, 32px) scale(0.6);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Gesto «elevar» del tema: sube un poco y la sombra se alarga. Con
   movimiento reducido --coip-lift-sm vale 0 y sólo cambia la sombra. */
@media (hover: hover) and (pointer: fine) {
	.coip-wa:hover {
		translate: 0 var(--coip-lift-sm, -2px);
		box-shadow: 0 12px 26px rgba(41, 43, 50, 0.26), 0 3px 8px rgba(41, 43, 50, 0.14);
	}
}

.coip-wa:focus-visible {
	outline: 3px solid #25d366;
	outline-offset: 3px;
	translate: 0 var(--coip-lift-sm, -2px);
}

/* Móvil: un poco más pequeño y más pegado al canto. */
@media (max-width: 767px) {
	.coip-wa {
		--coip-wa-tam: 52px;
		--coip-wa-aire: 16px;
	}
}

/* Landings con barra de compra (< 1024 px, assets/js/buybar.js del tema):
   la barra ocupa el pie de la pantalla a z-index 25 y taparía el botón. Se
   sube por encima de ella —la barra publica su alto en --coip-buybar-alto y
   deja 12 px al canto— y baja con ella cuando se va. Con la hoja desplegada no
   hace falta nada: su velo lo cubre. */
.coip-buybar-visible .coip-wa {
	--coip-wa-base: calc(var(--coip-buybar-alto, 126px) + 12px);
}

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

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