/**
 * WHATSAPP BUTTON MOBILE FIXES
 * Ensures visibility and proper behavior on mobile devices
 */

/* Force WhatsApp button visibility on all devices */
.whatsapp-float {
  position: fixed !important;
  bottom: 2rem !important;
  right: 1.5rem !important;
  z-index: 2147483647 !important; /* Maximum z-index */
  display: flex !important; /* Force display */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: bottom 0.3s ease, transform 0.3s ease;
}

/* Ensure button container is visible */
.whatsapp-float-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25D366 0%, #20b358 50%, #1da851 100%);
  border-radius: 50%;
  color: white;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  opacity: 1 !important;
  visibility: visible !important;
}

.whatsapp-float-btn:hover,
.whatsapp-float-btn:focus {
  background: linear-gradient(135deg, #1da851 0%, #20b358 50%, #25D366 100%);
  box-shadow: 0 12px 35px rgba(37, 211, 102, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px) scale(1.05);
  color: white;
  text-decoration: none;
}

.whatsapp-icon-float svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}

.whatsapp-float-btn:hover .whatsapp-icon-float svg {
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
  transform: scale(1.1);
}

/* Lift button when footer is visible (Android scroll fix) */
.whatsapp-float.footer-visible {
  bottom: 5rem !important;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .whatsapp-float {
    bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
    right: 1.5rem !important;
  }
  
  /* Lift higher on mobile when footer is visible */
  .whatsapp-float.footer-visible {
    bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important;
  }
  
  .whatsapp-float-btn {
    width: 60px;
    height: 60px;
  }
  
  .whatsapp-icon-float svg {
    width: 28px;
    height: 28px;
  }
}

/* Ensure it's not hidden by print styles */
@media print {
  .whatsapp-float {
    display: none !important;
  }
}