/* =========================================================
   Mizunara Studio
   Component / Floating WhatsApp
========================================================= */

.whatsapp-btn {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 999;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 62px;
  height: 62px;

  border-radius: 50%;

  background: #25d366;

  box-shadow:
    0 14px 35px
    rgba(37, 211, 102, 0.35);

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform 0.3s ease;
}

.whatsapp-btn:hover {
  transform:
    scale(1.08);
}

.whatsapp-btn svg {
  width: 33px;
  height: 33px;

  fill: white;
}

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

@media (max-width: 650px) {

  .whatsapp-btn {
    right: 14px;

    bottom:
      max(
        14px,
        env(safe-area-inset-bottom)
      );

    width: 52px;
    height: 52px;

    box-shadow:
      0 10px 28px
      rgba(37, 211, 102, 0.3);
  }

  .whatsapp-btn svg {
    width: 28px;
    height: 28px;
  }
}