/* css/whatsapp-float.css */
.whatsapp-float{
  --size: clamp(44px, 6.5vw, 64px);
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: var(--size);
  height: var(--size);
  display: inline-grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  z-index: 99999;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.whatsapp-float svg{ width: 60%; height: 60%; display:block; }
.whatsapp-float:hover{ transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }

/* smaller screens adjustments */
@media (max-width:420px){
  .whatsapp-float{ left: 12px; bottom: 12px; --size: 48px; }
  .whatsapp-float svg{ width: 62%; height: 62%; }
}

/* respect safe-area for devices with notches */
@media (max-width:900px){
  .whatsapp-float{ bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
}

/* prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .whatsapp-float{ transition: none; transform: none; }
}