/* Basic Reset and Body Styling */
body {
    margin: 0;
    font-family: sans-serif;
}

/* Chat Welcome Widget Container */
.chat-welcome-widget {
    position: fixed;
    z-index: 99999; /* Aumentado z-index para asegurar que esté por encima de todo */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding: 15px;
}

/* Positioning - Bottom Right */
.chat-welcome-widget.bottom-right {
    bottom: 20px;
    right: 20px;
}

/* Toggle Button Styling (el botón principal de WhatsApp) */
/* Selector más específico para evitar conflictos */
.chat-welcome-widget .chat-welcome-toggle-button {
    background-color: #25D366 !important; /* Forzar color de fondo */
    border: none !important; /* Forzar sin borde */
    border-radius: 50% !important; /* Forzar redondez */
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
    padding: 0 !important; /* **CLAVE: Remover el padding no deseado** */
    margin: 0 !important; /* Remover cualquier margen externo */
}

.chat-welcome-widget .chat-welcome-toggle-button:hover {
    transform: scale(1.05) !important;
}

/* Estilo para todas las imágenes SVG de iconos */
.chat-welcome-widget .svg-icon {
    width: 25px !important;
    height: 25px !important;
    filter: brightness(0) invert(1) !important; /* Para que los SVG se vean blancos */
}

/* Ajuste específico para el icono de WhatsApp principal si es necesario */
.chat-welcome-widget .chat-welcome-toggle-button .whatsapp-icon {
    width: 30px !important;
    height: 30px !important;
}

/* Esconder el botón principal cuando los enlaces están activos */
.chat-welcome-widget .chat-welcome-toggle-button.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0) !important;
}

/* Contenedor de Enlaces de Contacto - DISPOSICIÓN HORIZONTAL */
.chat-welcome-widget .chat-welcome-links-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(20px) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
    width: auto !important;
    max-width: fit-content !important;
}

.chat-welcome-widget .chat-welcome-links-container.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

/* Estilo de cada Enlace de Contacto Individual (el círculo de color) */
/* Selector más específico para evitar conflictos */
.chat-welcome-widget .chat-welcome-link {
    background-color: transparent !important; /* Se establecerá por los selectores de color específicos */
    border: none !important; /* Forzar sin borde */
    border-radius: 50% !important; /* Forzar redondez */
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    padding: 0 !important; /* **CLAVE: Remover el padding no deseado** */
    margin: 0 !important; /* Remover cualquier margen externo */
    /* Asegurarse de que el color de texto no afecte al SVG */
    color: initial !important; /* Restablecer color de texto, el SVG tiene su propio filtro */
}

.chat-welcome-widget .chat-welcome-link:hover {
    transform: scale(1.1) !important;
}

/* Colores específicos para cada enlace - Estos deben sobrescribir el background-color transparente */
.chat-welcome-widget .phone-link {
    background-color: #ffc107 !important; /* Amarillo */
}

.chat-welcome-widget .whatsapp-link {
    background-color: #25D366 !important; /* Verde */
}

.chat-welcome-widget .email-link {
    background-color: #007bff !important; /* Azul */
}

/* Estilo del botón de cerrar (la "X") */
.chat-welcome-widget .close-button {
    background-color: #dc3545 !important; /* Rojo */
    border: none !important;
    color: white !important; /* El color del icono SVG será blanco por el filtro */
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important; /* **CLAVE: Remover el padding no deseado** */
    margin: 0 !important; /* Remover cualquier margen externo */
}

/* Asegurarse de que los SVGs dentro de los botones y enlaces no hereden el font-size */
.chat-welcome-widget .chat-welcome-link img.svg-icon {
    font-size: initial !important; /* Restablecer font-size que podría estar afectando al SVG */
    line-height: initial !important; /* Restablecer line-height */
}


button.chat-welcome-link.close-button {
    padding: 9px;
}

button#chat-welcome-toggle {
    padding: 10px;
}