/* =========================================================
   WHATSAPP FLUTUANTE
   Botao fixo no canto da tela, em todas as paginas. Montado em
   includes/whatsapp-flutuante.php.
   ========================================================= */

.asy-wpp {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	animation: asy-wpp-entrar 420ms cubic-bezier(.22,.61,.36,1) 800ms both;
}

@keyframes asy-wpp-entrar {
	from { opacity: 0; transform: translateY(16px) scale(.9); }
	to   { opacity: 1; transform: none; }
}

.asy-wpp__botao {
	position: relative;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	box-shadow:
		0 12px 28px -6px rgba(37, 211, 102, .55),
		0 0 0 1px rgba(255, 255, 255, .12) inset;
	transition: transform 220ms cubic-bezier(.22,.61,.36,1), background-color 220ms ease;
}

/* Onda saindo do botao de tempos em tempos, sem piscar sem parar. */
.asy-wpp__botao::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: #25D366;
	animation: asy-wpp-onda 3.2s ease-out 2s infinite;
}

@keyframes asy-wpp-onda {
	0%   { opacity: .55; transform: scale(1); }
	45%  { opacity: 0;   transform: scale(1.6); }
	100% { opacity: 0;   transform: scale(1.6); }
}

.asy-wpp__botao svg {
	display: block;
}

.asy-wpp:hover .asy-wpp__botao,
.asy-wpp:focus-visible .asy-wpp__botao {
	background: #1EBE5B;
	transform: translateY(-3px);
}

.asy-wpp:focus-visible {
	outline: none;
}

.asy-wpp:focus-visible .asy-wpp__botao {
	box-shadow: 0 0 0 3px var(--asy-black, #07060D), 0 0 0 5px #25D366;
}

/* Etiqueta que aparece ao lado no hover, no desktop. */
.asy-wpp__balao {
	padding: 9px 14px;
	border: 1px solid rgba(139, 61, 255, .3);
	border-radius: 999px;
	background: var(--asy-black-2, #0F0B1C);
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7);
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--asy-white, #F5F2FB);
	opacity: 0;
	transform: translateX(8px);
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms cubic-bezier(.22,.61,.36,1);
}

.asy-wpp:hover .asy-wpp__balao,
.asy-wpp:focus-visible .asy-wpp__balao {
	opacity: 1;
	transform: none;
}

@media (hover: none), (max-width: 767px) {
	.asy-wpp__balao { display: none; }
}

@media (max-width: 767px) {
	.asy-wpp {
		right: max(16px, env(safe-area-inset-right));
		bottom: max(16px, env(safe-area-inset-bottom));
	}

	.asy-wpp__botao {
		width: 54px;
		height: 54px;
	}
}

/* Com o carrinho lateral aberto o botao sai da frente. */
body:has(.elementor-menu-cart--shown) .asy-wpp {
	opacity: 0;
	visibility: hidden;
}

@media print {
	.asy-wpp { display: none; }
}