/* ================================
   Floating WhatsApp Glass Pill
   FINAL – Lightweight & Stable
================================ */

/* Initial hidden state (lazy load) */
.whatsapp-pill {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  pointer-events: none;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 999px;

  /* 🔮 Subtle liquid-glass border */
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(
      135deg,
      rgba(255,255,255,0.45),
      rgba(255,255,255,0.15) 30%,
      rgba(255,255,255,0.03) 55%,
      rgba(255,255,255,0.35)
    ) border-box;

  border: 1px solid transparent;

  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;

  z-index: 999999;

  /* Smooth appear / disappear */
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Visible state */
.whatsapp-pill.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* WhatsApp icon */
.chat-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  background-image: url("/assets/cdn-icons-png.flaticon.com/512/2111/2111774.png");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Text */
.wa-text {
  color: #fff;
  white-space: nowrap;
}

/* ✨ Softened hover shine (desktop only) */
@media (hover: hover) {
  .whatsapp-pill:hover {
    background:
      linear-gradient(#000, #000) padding-box,
      linear-gradient(
        135deg,
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.22) 30%,
        rgba(255,255,255,0.08) 55%,
        rgba(255,255,255,0.45)
      ) border-box;
  }
}

/* Mobile tuning */
@media (max-width: 768px) {
  .whatsapp-pill {
    font-size: 12px;
    padding: 7px 12px;
  }
}