/* =========================================================
   WHATSAPP FLOATING PREMIUM FINAL
   ========================================================= */

.whatsapp-premium-final {

  position: fixed !important;

  right: max(14px, env(safe-area-inset-right)) !important;

  bottom:
    max(
      18px,
      calc(env(safe-area-inset-bottom) + 12px)
    ) !important;

  z-index: 99999 !important;

  width: auto !important;
  min-width: 132px !important;
  height: 50px !important;

  padding: 0 15px 0 9px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  border-radius: 999px !important;

  border:
    1px solid rgba(255,255,255,.16) !important;

  background:
    linear-gradient(
      135deg,
      #19d866 0%,
      #11bf59 48%,
      #079a46 100%
    ) !important;

  color: #fff !important;

  text-decoration: none !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.45),
    0 0 0 1px rgba(46,255,132,.12),
    0 0 22px rgba(24,214,101,.28) !important;

  overflow: visible !important;

  transform: translateZ(0) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease !important;

  animation:
    waFloatSoft 3s ease-in-out infinite !important;
}


/* =========================================
   ICON
   ========================================= */

.whatsapp-premium-final
.wa-premium-icon {

  position: relative !important;
  z-index: 3 !important;

  width: 34px !important;
  height: 34px !important;

  flex: 0 0 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;

  background:
    rgba(255,255,255,.13) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.17) !important;

  color: #fff !important;
}

.whatsapp-premium-final
.wa-premium-icon svg {

  width: 24px !important;
  height: 24px !important;

  display: block !important;
}


/* =========================================
   TEXT
   ========================================= */

.whatsapp-premium-final
.wa-premium-text {

  position: relative !important;
  z-index: 3 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  line-height: 1 !important;

  white-space: nowrap !important;
}

.whatsapp-premium-final
.wa-premium-text small {

  margin: 0 0 2px !important;

  color:
    rgba(255,255,255,.78) !important;

  font-size: 6.5px !important;
  font-weight: 800 !important;

  letter-spacing: 1px !important;
}

.whatsapp-premium-final
.wa-premium-text strong {

  color: #fff !important;

  font-size: 9px !important;
  font-weight: 950 !important;

  letter-spacing: .4px !important;
}


/* =========================================
   PULSE RING
   ========================================= */

.whatsapp-premium-final
.wa-premium-ring {

  position: absolute !important;

  inset: -1px !important;

  z-index: -1 !important;

  border-radius: inherit !important;

  border:
    2px solid rgba(44,255,135,.65) !important;

  pointer-events: none !important;

  animation:
    waPulseRing 2.8s ease-out infinite !important;
}


/* =========================================
   SHINE
   ========================================= */

.whatsapp-premium-final
.wa-premium-shine {

  position: absolute !important;

  top: 0 !important;
  left: -55% !important;

  width: 35% !important;
  height: 100% !important;

  border-radius: inherit !important;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    ) !important;

  transform:
    skewX(-18deg) !important;

  pointer-events: none !important;

  animation:
    waShine 4.2s ease-in-out infinite !important;
}


/* =========================================
   HOVER / TAP
   ========================================= */

.whatsapp-premium-final:hover {

  transform:
    translateY(-2px)
    scale(1.025) !important;

  box-shadow:
    0 15px 34px rgba(0,0,0,.5),
    0 0 28px rgba(24,214,101,.42) !important;
}

.whatsapp-premium-final:active {

  transform:
    scale(.96) !important;
}


/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes waFloatSoft {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-3px);
  }
}


@keyframes waPulseRing {

  0% {
    opacity: .75;
    transform: scale(1);
  }

  55% {
    opacity: 0;
    transform: scale(1.17);
  }

  100% {
    opacity: 0;
    transform: scale(1.17);
  }
}


@keyframes waShine {

  0%,
  70% {
    left: -55%;
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  92% {
    left: 125%;
    opacity: 1;
  }

  100% {
    left: 125%;
    opacity: 0;
  }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

  .whatsapp-premium-final {

    right: 12px !important;

    bottom:
      max(
        18px,
        calc(env(safe-area-inset-bottom) + 10px)
      ) !important;

    min-width: 125px !important;
    height: 47px !important;

    padding:
      0 13px 0 8px !important;

    gap: 7px !important;
  }

  .whatsapp-premium-final
  .wa-premium-icon {

    width: 32px !important;
    height: 32px !important;

    flex-basis: 32px !important;
  }

  .whatsapp-premium-final
  .wa-premium-icon svg {

    width: 22px !important;
    height: 22px !important;
  }

}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  .whatsapp-premium-final,
  .whatsapp-premium-final
  .wa-premium-ring,
  .whatsapp-premium-final
  .wa-premium-shine {

    animation: none !important;
  }

}