/* Estilo geral para o corpo (opcional, apenas para demonstração) */
body {
  font-family: sans-serif;
  margin: 0;
  min-height: 200vh; /* Adiciona rolagem para testar o flutuante */
}

/* Estilo do link flutuante */
.whatsapp-float {
  /* Posicionamento fixo no canto inferior direito */
  position: fixed;
  bottom: 20px; /* Distância do fundo */
  right: 20px; /* Distância da direita */
  z-index: 1000; /* Garante que fique acima de outros elementos */

  /* Estilização do círculo (similar ao que você enviou) */
  background-color: #25d366; /* Verde do WhatsApp */
  color: white;
  width: 60px; /* Largura do círculo */
  height: 60px; /* Altura do círculo */
  border-radius: 50%; /* Transforma em círculo */
  display: flex;
  flex-direction: column; /* Para alinhar o ícone e o número */
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
  transition: all 0.3s;
  text-align: center;
  overflow: hidden; /* Garante que nada saia do círculo inicialmente */
}

/* Estilo do ícone */
.whatsapp-float i {
  font-size: 30px;
  line-height: 1; /* Alinhamento vertical */
  margin-bottom: 2px;
}

/* Efeito de hover (opcional: muda a cor e expande o texto) */
.whatsapp-float:hover {
  background-color: #128c7e; /* Verde escuro no hover */
  width: 180px; /* Expande o círculo na horizontal */
  border-radius: 30px; /* Transforma em pílula */
  height: 60px;
}

/* Estilo do texto do número (visível no hover) */
.number-text {
  font-size: 14px;
  font-weight: bold;
  opacity: 0; /* Inicia invisível */
  transition: opacity 0.3s, transform 0.3s;
  transform: translateX(100%); /* Move para fora da tela */
  position: absolute;
  white-space: nowrap; /* Mantém o número na mesma linha */
}

/* Torna o texto visível e o move para a posição no hover */
.whatsapp-float:hover .number-text {
  opacity: 1;
  transform: translateX(0);
  margin-left: 5px;
  position: static; /* Volta para o fluxo normal do flexbox */
}

/* Estilo para telas menores (opcional: diminui o tamanho) */
@media (max-width: 600px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }
  .whatsapp-float i {
    font-size: 25px;
  }
  .whatsapp-float:hover {
    width: 160px;
    border-radius: 25px;
  }
}