/* whatsbranding.css – Botão flutuante com pulsar, tooltip e badge de não lida */

.whatsbranding-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  background-color: #25d366;
  /* Ícone WhatsApp padrão (ícone branco dentro de círculo verde) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12.04 2C6.58 2 2 6.58 2 12.04c0 1.8.5 3.53 1.44 5.03L2 22l5.03-1.44c1.5.94 3.23 1.44 5.03 1.44 5.46 0 9.94-4.48 9.94-9.94 0-5.46-4.48-9.94-9.94-9.94zm0 18.07c-1.5 0-2.97-.4-4.24-1.16l-.3-.18-3.03.87.87-3.03-.18-.3c-.76-1.27-1.16-2.74-1.16-4.24 0-4.48 3.64-8.12 8.12-8.12 4.48 0 8.12 3.64 8.12 8.12 0 4.48-3.64 8.12-8.12 8.12zM7.6 9.8c-.24.42-.42.9-.42 1.38 0 1.98 1.68 3.66 3.66 3.66.48 0 .96-.18 1.38-.42.6-.3.84-1.02.54-1.62-.18-.36-.6-.48-.96-.36-.36.12-.6.36-.84.6-.6.6-1.56.6-2.16 0-.6-.6-.6-1.56 0-2.16l.6-.6c.24-.24.36-.6.36-.96.12-.36 0-.78-.36-.96-.6-.3-1.32-.06-1.62.54z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55%;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 9999;
}

/* Pulsar melhorado – dois anéis */
.whatsbranding-button.pulse {
  animation: pulse-strong-whatsbranding 1.6s infinite;
}

@keyframes pulse-strong-whatsbranding {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7), 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  40% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0.3), 0 0 0 8px rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 28px rgba(37, 211, 102, 0), 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Tooltip no hover */
.whatsbranding-button::after {
  content: "Enviar mensagem agora";
  position: absolute;
  bottom: 80px;
  right: 0;
  background: #1f2a44;
  color: white;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10000;
}

.whatsbranding-button:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Badge de mensagem não lida */
.whatsbranding-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #ff3b30;
  color: white;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: bold;
  min-width: 20px;
  height: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 0 0 2px white;
  z-index: 10001;
  animation: badge-pulse 1.2s infinite;
}

@keyframes badge-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); background-color: #e63c2e; }
  100% { transform: scale(1); opacity: 1; }
}

/* Alternância para foto do corretor no hover (se foto for fornecida) */
.whatsbranding-button:hover {
  background-image: var(--whats-photo, none);
  background-size: cover;
  background-position: center;
  background-color: #128c7e;
}

/* Caso NÃO haja foto, mantém o ícone do WhatsApp no hover */
.whatsbranding-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  background-color: #25d366;
  background-image: url("https://cdn-icons-png.flaticon.com/512/124/124034.png");
  background-size: 50%;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 9999;
}