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

: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,
.wa-btn svg{
  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 */
}

/* بدون حلقة نبض متحركة — تبقى الصفحة "مكتملة بصريًا" فورًا (Speed Index أفضل).
   زر واتساب ظاهر بوضوح بلونه الأخضر الثابت. */

/* 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; opacity: 0; }
  .wa-btn{ transition: none; }
}