/*  أيقونة واتساب   */

:root{
  --wa:#25d366;
  --wa-hover:#1ebe5d;
  --wa-size:64px;
  --wa-gap:18px;
}

/* Floating button */
.wa-btn{
  position:fixed;
  right:calc(var(--wa-gap) + env(safe-area-inset-right));
  bottom:calc(var(--wa-gap) + env(safe-area-inset-bottom));
  width:var(--wa-size);
  height:var(--wa-size);
  border-radius:50%;
  background:var(--wa);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.22);
  z-index:2147483647; /* top-most */
  text-decoration:none;
  overflow: visible;   /* IMPORTANT: allow ring to be visible */
  transform-origin:center;
  transition: transform .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* the icon image */
.wa-btn img{
  width:62%;
  height:62%;
  object-fit:contain;
  pointer-events:none;    /* so clicks hit the link */
  position:relative;
  z-index:2;              /* ensure image is above the ring */
}

/* pulse ring - behind the icon */
.wa-btn::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  background:transparent;
  pointer-events:none;    /* ring must not block clicks */
  z-index:1;
  box-shadow:0 0 0 0 rgba(37,211,102,.45);
  animation: wa-pulse 1.6s ease-out infinite;
  will-change: transform, box-shadow;
}

@keyframes wa-pulse{
  0% {
    transform:translate(-50%,-50%) scale(1);
    box-shadow:0 0 0 0 rgba(37,211,102,.45);
  }
  70% {
    transform:translate(-50%,-50%) scale(1.35);
    box-shadow:0 0 0 20px rgba(37,211,102,0);
  }
  100% {
    transform:translate(-50%,-50%) scale(1);
    box-shadow:0 0 0 0 rgba(37,211,102,0);
  }
}

/* hover/tap */
.wa-btn:hover{ transform:scale(1.06); background:var(--wa-hover); }

/* small screens: slightly smaller */
@media (max-width:420px){
  :root{ --wa-size:52px; --wa-gap:12px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .wa-btn::after{ animation: none; box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  .wa-btn{ transition: none; }
}