/**
 * Botão Animado WhatsApp - estilos do frontend.
 * Variáveis (--baw-*) são injetadas dinamicamente pelo PHP.
 */

.baw-wrapper {
	position: fixed;
	z-index: 99999;
	/* bottom e left/right são definidos inline pelo plugin */
}

.baw-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--baw-bg, #25D366);
	color: var(--baw-icon, #FFFFFF);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

.baw-button:hover,
.baw-button:focus {
	transform: scale(1.08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	color: var(--baw-icon, #FFFFFF);
}

.baw-button:focus-visible {
	outline: 3px solid rgba(37, 211, 102, 0.5);
	outline-offset: 2px;
}

.baw-icon {
	display: flex;
	width: 34px;
	height: 34px;
}

.baw-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Balão / Tooltip ---------- */
.baw-tooltip {
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
	background: #ffffff;
	color: #333333;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Posiciona o balão à esquerda (botão no canto direito) */
.baw-wrapper .baw-tooltip {
	right: calc(100% + 14px);
}

/* Quando o botão está no canto esquerdo, o balão vai para a direita */
.baw-wrapper[style*="left"] .baw-tooltip {
	right: auto;
	left: calc(100% + 14px);
}

.baw-tooltip::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -6px;
	transform: translateY(-50%);
	border-width: 6px 0 6px 6px;
	border-style: solid;
	border-color: transparent transparent transparent #ffffff;
}

.baw-button:hover .baw-tooltip,
.baw-button:focus .baw-tooltip {
	opacity: 1;
	visibility: visible;
}

/* ---------- Animações ---------- */
.baw-anim-pulse .baw-button {
	animation: baw-pulse 2s infinite;
}

@keyframes baw-pulse {
	0% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.6);
	}
	70% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 18px rgba(37, 211, 102, 0);
	}
	100% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

.baw-anim-bounce .baw-button {
	animation: baw-bounce 2s infinite;
}

@keyframes baw-bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-12px);
	}
	60% {
		transform: translateY(-6px);
	}
}

.baw-anim-shake .baw-button {
	animation: baw-shake 2.5s infinite;
}

@keyframes baw-shake {
	0%, 90%, 100% {
		transform: rotate(0deg);
	}
	92% {
		transform: rotate(12deg);
	}
	94% {
		transform: rotate(-12deg);
	}
	96% {
		transform: rotate(8deg);
	}
	98% {
		transform: rotate(-8deg);
	}
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
	.baw-anim-pulse .baw-button,
	.baw-anim-bounce .baw-button,
	.baw-anim-shake .baw-button {
		animation: none;
	}
}

/* ---------- Responsividade ---------- */
@media (max-width: 768px) {
	.baw-button {
		width: 54px;
		height: 54px;
	}

	.baw-icon {
		width: 30px;
		height: 30px;
	}

	/* Em telas pequenas o balão pode estourar a largura; ocultamos por padrão */
	.baw-tooltip {
		display: none;
	}
}

.baw-hide-mobile {
	display: none;
}

@media (min-width: 769px) {
	.baw-hide-mobile {
		display: block;
	}
	.baw-hide-desktop {
		display: none;
	}
}

@media (max-width: 768px) {
	.baw-hide-desktop {
		display: block;
	}
}