.whatsapp-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 65;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #25d366;
  box-shadow: 0 0.7rem 1.8rem rgb(0 0 0 / 28%);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.whatsapp-float:hover {
  background: #1fb958;
  box-shadow: 0 0.9rem 2.1rem rgb(0 0 0 / 34%);
  transform: translateY(-2px) scale(1.03);
}

.whatsapp-float:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(37 211 102 / 45%), 0 0.9rem 2.1rem rgb(0 0 0 / 34%);
}

.whatsapp-float svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: currentColor;
}

.orders-page .whatsapp-float {
  bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5rem));
}

@media (min-width: 1024px) {
  .orders-page .whatsapp-float {
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    transition: none;
  }
}