/* WhatsApp Flutuante++ — Frontend CSS
   Animações CSS puras, sem dependências externas.
   -------------------------------------------------- */

/* Reset mínimo para o componente */
#wafp-btn,
#wafp-btn * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Wrapper fixo */
#wafp-btn {
	position: fixed;
	bottom: var(--wafp-bottom, 30px);
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Visibilidade controlada por JS (scroll offset) */
#wafp-btn.wafp-hidden {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.8);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

#wafp-btn.wafp-visible {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Ocultar por device */
@media (max-width: 767px) {
	#wafp-btn.wafp-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
	#wafp-btn.wafp-hide-desktop { display: none !important; }
}

/* Link principal */
.wafp-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wafp-size, 60px);
	height: var(--wafp-size, 60px);
	background: var(--wafp-bg, #25D366);
	border-radius: var(--wafp-radius, 50%);
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	position: relative;
	flex-shrink: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	outline-offset: 3px;
}

.wafp-link:hover,
.wafp-link:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.wafp-link:focus-visible {
	outline: 3px solid var(--wafp-bg, #25D366);
}

/* Ícone SVG */
.wafp-icon-svg {
	width: 58%;
	height: 58%;
	display: block;
}

/* Ícone customizado */
.wafp-custom-icon {
	width: 60%;
	height: 60%;
	object-fit: contain;
	display: block;
}

/* =========================================================
   TOOLTIP (frase lateral)
   ========================================================= */
.wafp-tooltip {
	background: var(--wafp-tt-bg, #25D366);
	color: var(--wafp-tt-color, #fff);
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	box-shadow: 0 3px 12px rgba(0,0,0,0.18);
	pointer-events: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.3;
	animation: wafp-tooltip-appear 0.4s ease both;
}

.wafp-tooltip__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
}

/* Seta quando tooltip está à esquerda do ícone (posição right) */
#wafp-btn .wafp-tooltip {
	right: calc(100% + 12px);
}
#wafp-btn .wafp-tooltip .wafp-tooltip__arrow {
	right: -8px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid var(--wafp-tt-bg, #25D366);
}

/* Seta quando tooltip está à direita do ícone (posição left) — override via JS */
#wafp-btn.wafp-pos-left .wafp-tooltip {
	left: calc(100% + 12px);
	right: auto;
}
#wafp-btn.wafp-pos-left .wafp-tooltip .wafp-tooltip__arrow {
	left: -8px;
	right: auto;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid var(--wafp-tt-bg, #25D366);
	border-left: none;
}

@keyframes wafp-tooltip-appear {
	from { opacity: 0; transform: translateY(-50%) translateX(6px); }
	to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* =========================================================
   EFEITO PULSE (anel que se expande)
   ========================================================= */
.wafp-link::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	border-radius: var(--wafp-radius, 50%);
	background: var(--wafp-pulse, #25D366);
	opacity: 0;
	z-index: -1;
}

/* Pulse ativo */
.wafp-anim-pulse .wafp-link::before {
	animation: wafp-pulse-ring 2.5s ease-out infinite;
}

@keyframes wafp-pulse-ring {
	0%   { transform: scale(1);   opacity: 0.5; }
	80%  { transform: scale(1.8); opacity: 0; }
	100% { transform: scale(1.8); opacity: 0; }
}

/* =========================================================
   ANIMAÇÕES DO ÍCONE
   ========================================================= */

/* Bounce */
.wafp-anim-bounce .wafp-link {
	animation: wafp-bounce var(--wafp-anim-duration, 1s) ease infinite;
}
@keyframes wafp-bounce {
	0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	40%       { transform: translateY(-18px); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
	70%       { transform: translateY(-10px); }
}

/* Shake */
.wafp-anim-shake .wafp-link {
	animation: wafp-shake var(--wafp-anim-duration, 0.8s) ease infinite;
}
@keyframes wafp-shake {
	0%, 100% { transform: translateX(0); }
	10%, 50%, 90% { transform: translateX(-6px); }
	30%, 70% { transform: translateX(6px); }
}

/* Tada */
.wafp-anim-tada .wafp-link {
	animation: wafp-tada var(--wafp-anim-duration, 1s) ease infinite;
}
@keyframes wafp-tada {
	0%   { transform: scaleX(1); }
	10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); }
	30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }
	40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }
	100% { transform: scaleX(1); }
}

/* Heartbeat */
.wafp-anim-heartbeat .wafp-link {
	animation: wafp-heartbeat var(--wafp-anim-duration, 1.3s) ease-in-out infinite;
}
@keyframes wafp-heartbeat {
	0%   { transform: scale(1); }
	14%  { transform: scale(1.2); }
	28%  { transform: scale(1); }
	42%  { transform: scale(1.2); }
	70%  { transform: scale(1); }
}

/* Rubber Band */
.wafp-anim-rubberBand .wafp-link {
	animation: wafp-rubberBand var(--wafp-anim-duration, 1s) ease infinite;
}
@keyframes wafp-rubberBand {
	0%   { transform: scaleX(1); }
	30%  { transform: scaleX(1.25) scaleY(0.75); }
	40%  { transform: scaleX(0.75) scaleY(1.25); }
	50%  { transform: scaleX(1.15) scaleY(0.85); }
	65%  { transform: scaleX(0.95) scaleY(1.05); }
	75%  { transform: scaleX(1.05) scaleY(0.95); }
	100% { transform: scaleX(1); }
}

/* Swing */
.wafp-anim-swing .wafp-link {
	transform-origin: top center;
	animation: wafp-swing var(--wafp-anim-duration, 1s) ease infinite;
}
@keyframes wafp-swing {
	0%, 100% { transform: rotate(0deg); }
	20%  { transform: rotate(15deg); }
	40%  { transform: rotate(-10deg); }
	60%  { transform: rotate(5deg); }
	80%  { transform: rotate(-5deg); }
}

/* Jello */
.wafp-anim-jello .wafp-link {
	animation: wafp-jello var(--wafp-anim-duration, 0.9s) ease both infinite;
}
@keyframes wafp-jello {
	0%, 11.1%, 100% { transform: none; }
	22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
	33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
	44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
	55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
	66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
	77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
	88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

/* Wobble */
.wafp-anim-wobble .wafp-link {
	animation: wafp-wobble var(--wafp-anim-duration, 1s) ease-in-out infinite;
}
@keyframes wafp-wobble {
	0%   { transform: translateX(0%); }
	15%  { transform: translateX(-18%) rotate(-5deg); }
	30%  { transform: translateX(12%) rotate(3deg); }
	45%  { transform: translateX(-8%) rotate(-3deg); }
	60%  { transform: translateX(6%) rotate(2deg); }
	75%  { transform: translateX(-3%) rotate(-1deg); }
	100% { transform: translateX(0%); }
}