/* Floating WhatsApp button styles */
#whatsapp-float{
  position:fixed;
  right:18px;
  bottom:88px;
  z-index:99999;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  padding:0;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  overflow:visible;
}
#whatsapp-float .wa-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;position:relative}
#whatsapp-float .wa-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
#whatsapp-float .wa-icon svg{display:block}
#whatsapp-float .wa-icon i{font-size:20px;line-height:1;color:#fff;display:inline-block}
#whatsapp-float .wa-text{display:none}
#whatsapp-float:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.22)}

/* ripple element created by JS */
.wa-ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.35);
  transform:scale(0);
  animation:wa-ripple 600ms ease-out forwards;
  pointer-events:none;
}

@keyframes wa-ripple{
  to{transform:scale(4);opacity:0}
}

/* subtle pulse behind icon */
#whatsapp-float .wa-icon-wrapper::after{
  content:"";
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,0.2);
  animation:wa-pulse 2.4s infinite;
}
@keyframes wa-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.18)}
  70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

@media (max-width:768px){
  #whatsapp-float{right:14px;bottom:80px;padding:10px 12px;font-size:13px}
}

@media (max-width:420px){
  #whatsapp-float{right:12px;bottom:78px;width:48px;height:48px}
}