/* whatsapp-button.css */
:root{
  --wab-size:48px;
  --wab-green:#25D366;
  --wab-green-hover:#20bd5a;
  --wab-icon-size:24px;
  --wab-shadow:0 8px 24px rgba(0,0,0,.22);
  --wab-shadow-hover:0 12px 30px rgba(0,0,0,.32);
  --wab-transition:.25s cubic-bezier(.2,.8,.2,1);
}

.wab-button{
  position:fixed;
  right:calc(var(--wab-right,24px));
  bottom:calc(var(--wab-bottom,24px) + env(safe-area-inset-bottom));
  width:var(--wab-size);
  height:var(--wab-size);
  border-radius:50%;
  background:var(--wab-green);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:var(--wab-shadow);
  z-index:2147483000;
  transition:transform var(--wab-transition),
             box-shadow var(--wab-transition),
             background var(--wab-transition);
  animation:wab-bounce .7s cubic-bezier(.18,.89,.32,1.28);
  -webkit-tap-highlight-color:transparent;
}

.wab-button:hover{
  transform:translateY(-2px) scale(1.08);
  box-shadow:var(--wab-shadow-hover);
  background:var(--wab-green-hover);
}

.wab-button:active{
  transform:scale(.96);
}

.wab-button:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(37,211,102,.35),var(--wab-shadow-hover);
}

.wab-icon{
  width:var(--wab-icon-size);
  height:var(--wab-icon-size);
  display:flex;
  align-items:center;
  justify-content:center;
}

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

.wab-tooltip{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(8px);
  background:#222;
  color:#fff;
  font:500 13px/1.2 Arial,sans-serif;
  padding:8px 12px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
}

.wab-tooltip::after{
  content:"";
  position:absolute;
  right:-5px;
  top:50%;
  width:10px;
  height:10px;
  background:#222;
  transform:translateY(-50%) rotate(45deg);
}

.wab-button:hover .wab-tooltip,
.wab-button:focus-visible .wab-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0);
}

@keyframes wab-bounce{
  0%{opacity:0;transform:scale(.2)}
  55%{opacity:1;transform:scale(1.12)}
  75%{transform:scale(.94)}
  100%{transform:scale(1)}
}

@media (hover:none){
  .wab-tooltip{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .wab-button,
  .wab-tooltip{
    animation:none!important;
    transition:none!important;
  }
}