/*
 * Styles for WhatsApp Floating Button
 * Path: whatsapp-tools-pro/css/whatsapp-float.css
 */
.whatsapp-float-container {
    position: fixed;
    bottom: 40px; /* Posição mais alta */
    z-index: 99999; /* Aumentado o z-index para garantir visibilidade */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    left: auto;
    right: auto;
}
.whatsapp-float-container.show-whatsapp {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Estilos do botão/link principal */
.whatsapp-float {
    display: flex; /* Transforma o link em um container flex */
    align-items: center; /* Alinha verticalmente os itens no centro */
    gap: 8px; /* Espaçamento entre o ícone e a mensagem */
    background-color: #25D366; /* Cor de fundo do WhatsApp */
    color: white; /* Cor do texto do botão (padrão para o link) */
    padding: 10px 15px; /* Preenchimento interno do botão */
    border-radius: 30px; /* Bordas arredondadas para parecer um botão */
    text-decoration: none; /* Remove sublinhado do link */
    font-family: Arial, sans-serif; /* Fonte para a mensagem */
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* Sombra para profundidade */
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.whatsapp-float:hover {
    background-color: #1DA851; /* Cor mais escura no hover */
    transform: scale(1.05); /* Pequeno zoom no hover */
}

/* Posição Direita */
.whatsapp-position-right {
    right: 20px;
    left: auto;
}
.whatsapp-position-right .whatsapp-float {
    flex-direction: row;
}

/* Posição Esquerda */
.whatsapp-position-left {
    left: 20px;
    right: auto;
}
.whatsapp-position-left .whatsapp-float {
    flex-direction: row;
}

.whatsapp-float img {
    width: 35px; /* Tamanho do ícone dentro do botão */
    height: 35px;
    border-radius: 50%; /* Garante que a imagem continue redonda */
    flex-shrink: 0; /* Impede que a imagem encolha */
}
.whatsapp-welcome-message {
    /* Estilos para o texto da mensagem dentro do botão */
    color: white; /* Define explicitamente a cor da mensagem como branca */
    white-space: nowrap; /* Impede que a mensagem quebre linha */
    line-height: 1; /* Garante alinhamento vertical correto */
}

@media (max-width: 768px) {
    .whatsapp-float-container {
        bottom: 30px; /* Posição mais alta em mobile */
    }
    .whatsapp-position-right {
        right: 15px;
    }
    .whatsapp-position-left {
        left: 15px;
    }
    .whatsapp-float {
        padding: 8px 12px; /* Preenchimento menor em mobile */
        font-size: 14px;
        gap: 6px;
    }
    .whatsapp-float img {
        width: 30px; /* Ícone menor em mobile */
        height: 30px;
    }
}