/* ==========================================================================
   MWI floating WhatsApp button.
   Structure/position/colour all live in Elementor; this file only adds the
   looping light. Every selector is namespaced under .mwi-wa.
   ========================================================================== */

.mwi-wa{ pointer-events: none; }              /* wrapper ignores clicks */
.mwi-wa .elementor-icon{
  pointer-events: auto;                        /* the circle itself is clickable */
  position: relative;
  overflow: hidden;                            /* clips the sheen */
  isolation: isolate;
  box-shadow:
    0 10px 28px -10px rgba(37,211,102,.55),
    0 2px 8px rgba(36,26,18,.18);
  transition: transform .35s cubic-bezier(.22,.9,.3,1),
              box-shadow .35s cubic-bezier(.22,.9,.3,1);
}

/* ---- 1. soft breathing halo (the "look at me" pulse) ---- */
.mwi-wa .elementor-icon::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: mwiWaPulse 3.2s cubic-bezier(.4,0,.6,1) infinite;
  z-index:-1;
}
@keyframes mwiWaPulse{
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ---- 2. luxury sheen sweeping across the face, on a slow loop ---- */
.mwi-wa .elementor-icon::after{
  content:"";
  position:absolute;
  top:-60%; left:-120%;
  width:55%; height:220%;
  background: linear-gradient(100deg,
      transparent 0%,
      rgba(255,255,255,.10) 35%,
      rgba(255,255,255,.85) 50%,
      rgba(255,255,255,.10) 65%,
      transparent 100%);
  transform: rotate(14deg);
  animation: mwiWaSheen 4.6s cubic-bezier(.5,0,.2,1) infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes mwiWaSheen{
  0%,  62% { left:-120%; }      /* long rest between passes = feels expensive */
  86%, 100%{ left: 170%; }
}

/* keep the glyph above the sheen */
.mwi-wa .elementor-icon i,
.mwi-wa .elementor-icon svg{ position:relative; z-index:3; }

/* ---- 3. hover ---- */
.mwi-wa .elementor-icon:hover{
  transform: scale(1.07);
  box-shadow:
    0 14px 34px -10px rgba(37,211,102,.7),
    0 2px 10px rgba(36,26,18,.22);
}
.mwi-wa .elementor-icon:hover::before{ animation-play-state: paused; }

/* ---- accessibility ---- */
@media (prefers-reduced-motion: reduce){
  .mwi-wa .elementor-icon::before,
  .mwi-wa .elementor-icon::after{ animation: none !important; }
}

/* ---- inside the Elementor editor: unpin so it never blocks editing ---- */
body.mwi-editor-ctx .mwi-wa{ position: static !important; transform:none !important; }
body.mwi-editor-ctx .mwi-wa .elementor-icon::after{ animation:none !important; }