/* Floating WhatsApp button styles - uses the existing .theme-btn1 look for visual parity */
.whatsapp-float {
  position: fixed !important;
  right: 20px !important;
  bottom: 36px !important; /* moved up a bit */
  z-index: 2147483647 !important; /* very high to stay on top of widgets like Tawk */
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 36px rgba(255,122,1,0.12);
  pointer-events: auto;
  transform: translateZ(0);

  /* Animation */
  animation: whatsapp-bob 3.6s ease-in-out infinite;
  will-change: transform;
}

/* Subtle bobbing animation */
@keyframes whatsapp-bob {
  0% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
  60% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* Hover/active effect */
.whatsapp-float:hover {
  transform: translateY(-8px) scale(1.06);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.whatsapp-float:active {
  transform: translateY(-3px) scale(0.98);
}

.whatsapp-float i.fa-whatsapp { font-size: 20px; color: #fff; }

.whatsapp-label { font-weight: 700; color: #fff; }

/* On small screens show only the icon to save space */
@media (max-width: 575px) {
  .whatsapp-float { padding: 10px; width: 56px; height: 56px; justify-content: center; }
  .whatsapp-label { display: none !important; }
  .whatsapp-float i.fa-whatsapp { font-size: 22px; }
}