/* ===== Floating WhatsApp – base ===== */
.wa-float{
  position:fixed;
  right:18px; bottom:18px;
  width:56px; height:56px;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  border-radius:9999px; text-decoration:none;
  z-index:9999;
  box-shadow:0 8px 20px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  transition:
    transform .22s cubic-bezier(.2,.7,.3,1),
    box-shadow .22s ease,
    filter .22s ease;
}

/* KUNCI ukuran ikon Bootstrap Icons */
.wa-float .wa-icon{
  display:block;
  font-size:28px;      /* ukuran ikon */
  line-height:1;       /* rapat */
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}

/* Hover: scale lembut tanpa geser */
.wa-float:hover{
  transform:scale(1.06);
  box-shadow:0 12px 26px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.14);
  filter:saturate(1.07);
}

/* Ikon ikut scale */
.wa-float:hover .wa-icon{
  transform:scale(1.08);
}

/* Fokus keyboard */
.wa-float:focus{
  outline:2px solid #128C7E;
  outline-offset:3px;
}

/* Mobile tap feedback */
@media (hover:none){
  .wa-float:active{ transform:scale(.95); }
}

/* Ripple (opsional, jika JS ripple aktif) */
.wa-float{ overflow:hidden; }
.wa-float .wa-ripple{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0);
  animation:wa-ripple .5s ease-out forwards;
  pointer-events:none;
}
@keyframes wa-ripple{ to{ transform:scale(1); opacity:0; } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .wa-float, .wa-float *{ transition:none !important; animation:none !important; }
}