/* Floating WhatsApp Icon - Positioned above scroll-to-top button */
.whatsapp-float {
  position: fixed !important;
  bottom: 75px !important;
  right: 45px !important;
  width: 55px !important;
  height: 55px !important;
  background-color: #25D366 !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4) !important;
  z-index: 999998 !important;
  transition: all 0.3s ease, bottom 0.3s ease !important;
  text-decoration: none !important;
  border: 2px solid #fff !important;
  pointer-events: auto !important;
}

/* When scroll-up button is hidden, adjust WhatsAppFloat position on desktop */
.whatsapp-float.scroll-up-hidden {
  bottom: 15px !important; /* Move down when scroll-up is hidden */
}

/* When scroll-up button is visible, keep normal position */
.whatsapp-float.scroll-up-visible {
  bottom: 75px !important; /* Keep above scroll-up button */
}

/* Ensure it's not inside any container that might constrain it */
body .whatsapp-float,
html .whatsapp-float,
#page .whatsapp-float,
.page_wapper .whatsapp-float {
  position: fixed !important;
}

.whatsapp-float:hover {
  background-color: #20BA5A !important;
  transform: scale(1.15) !important;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.7) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.whatsapp-float-left {
  left: 30px;
  right: auto;
}

.whatsapp-float-right {
  right: 30px;
  left: auto;
}

@media (max-width: 768px) {
  .whatsapp-float {
    width: 50px !important;
    height: 50px !important;
    font-size: 28px !important;
    bottom: 75px !important;
    right: 40px !important;
    transition: bottom 0.3s ease !important;
  }
  
  /* When scroll-up button is hidden, adjust WhatsAppFloat position */
  .whatsapp-float.scroll-up-hidden {
    bottom: 15px !important; /* Move down when scroll-up is hidden */
  }
  
  /* When scroll-up button is visible, keep normal position */
  .whatsapp-float.scroll-up-visible {
    bottom: 75px !important; /* Keep above scroll-up button */
  }
  
  .whatsapp-float-left {
    left: 40px !important;
    right: auto !important;
  }
  
  .whatsapp-float-right {
    right: 40px !important;
    left: auto !important;
  }
}

@media (max-width: 480px) {
  .whatsapp-float {
    width: 48px !important;
    height: 48px !important;
    font-size: 26px !important;
    bottom: 75px !important; /* Position above scroll-up button when both visible */
    right: 35px !important;
    transition: bottom 0.3s ease !important; /* Smooth transition when position changes */
  }
  
  /* When scroll-up button is hidden, adjust WhatsAppFloat position */
  .whatsapp-float.scroll-up-hidden {
    bottom: 15px !important; /* Move down when scroll-up is hidden */
  }
  
  /* When scroll-up button is visible, keep normal position */
  .whatsapp-float.scroll-up-visible {
    bottom: 75px !important; /* Keep above scroll-up button */
  }
  
  .whatsapp-float-left {
    left: 35px !important;
    right: auto !important;
  }
  
  .whatsapp-float-right {
    right: 35px !important;
    left: auto !important;
  }
}