#whatsapp-float {
  position: fixed;
  left: 20px;             /* Move to left side */
  bottom: 20px;           /* Distance from bottom */
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;     /* Makes it round */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: bold;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 9999;
  text-align: center;
  padding: 0;
  overflow: hidden;
}

#whatsapp-float span {
  font-size: 10px;
  display: block;
  line-height: 1;
}

#whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}


/* ===== Side Floating Banner ===== */
#side-banner {
  position: fixed;
  left: -280px;           /* Start off-screen */
  top: 30%;
  background-color: #ff9800;
  color: white;
  padding: 15px 20px;
  border-radius: 0 8px 8px 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  box-shadow: 2px 2px 12px rgba(0,0,0,0.3);
  z-index: 9998;
  transition: left 0.5s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Optional icon inside the banner */
#side-banner svg {
  width: 20px;
  height: 20px;
  fill: white;
}

/* Message text inside banner */
#side-banner .banner-message {
  flex: 1;
}

/* Banner visible state */
#side-banner.show {
  left: 0;                /* Slide in */
}

/* Banner hidden state */
#side-banner.hide {
  left: -280px;           /* Slide out */
}