.wf-whatsapp-btn{
  position: fixed;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  border-radius:50%;
  text-decoration:none;
  z-index:9999999;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  transition:opacity .2s ease, transform .2s ease;
  overflow: visible;
  isolation: isolate;
}

.wf-whatsapp-btn:hover{
  transform:scale(1.05);
  opacity:.95;
}

.wf-whatsapp-btn::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,.35);
  animation:wf-pulse 2s infinite;
  z-index:-1;
}

.wf-whatsapp-btn::after{
  content: attr(data-wf-tooltip);
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #25D366;
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  min-width: max-content;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1;
}

.wf-whatsapp-btn:focus-visible::after,
.wf-whatsapp-btn:hover::after{
  opacity:1;
  transform: translateY(-50%) translateX(0);
}

.wf-tooltip-right::after{
  left: calc(100% + 10px);
}

.wf-tooltip-left::after{
  right: calc(100% + 10px);
  transform: translateY(-50%) translateX(-8px);
}

.wf-tooltip-left:focus-visible::after,
.wf-tooltip-left:hover::after{
  transform: translateY(-50%) translateX(0);
}

@keyframes wf-pulse{
  0% {box-shadow:0 0 0 0 rgba(255,255,255,.35);}
  70% {box-shadow:0 0 0 12px rgba(255,255,255,0);}
  100% {box-shadow:0 0 0 0 rgba(255,255,255,0);}
}

@media (prefers-reduced-motion: reduce){
  .wf-whatsapp-btn,
  .wf-whatsapp-btn::before{
    animation: none;
    transition: none;
  }
}