/* Estilos para el contenedor del selector de idiomas */
#pfc-language-selector-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: Arial, sans-serif;
}

/* Estilos para el botón principal que muestra el idioma actual */
#pfc-language-button {
    background-color: #0073aa;
    color: white;
    padding: 10px 15px;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 16px;
    display: flex;
    align-items: center;
}

#pfc-language-button:hover {
    background-color: #005a87;
}

/* Contenedor para la lista de idiomas (banderas) */
#pfc-language-list {
    display: none; /* Oculto por defecto */
    position: absolute;
    bottom: 100%; /* Aparece arriba del botón */
    right: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 10px;
    margin-bottom: 10px;
    max-height: 300px; /* Le damos una altura máxima */
    overflow-y: auto; 
}

/* Estilos para cada idioma en la lista */
.pfc-language-option {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
}

.pfc-language-option:hover {
    background-color: #f0f0f0;
}

/* Usaremos emojis de banderas por simplicidad para empezar */
.pfc-language-option span {
    font-size: 20px;
}

/* --- Solución para el "Flicker" (FOUC) --- */

/* 1. Por defecto, ocultamos el contenido del body con una transición suave. */
body.pfc-translator-loading {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* 2. Cuando el script termina, esta clase se quita y el contenido aparece. */
body.pfc-translator-ready {
    opacity: 1;
}





/* --- MEJORAS DE DISEÑO RESPONSIVE Y POSICIÓN --- */

/* 1. Ajuste para convivir con otros widgets.
   Lo subimos 80px para dejar espacio a tu botón de chat debajo.
   Puedes ajustar este valor (ej: 90px, 75px) a tu gusto. */
#pfc-language-selector-container {
    bottom: 80px; 
}

/* 2. Estilos específicos para pantallas pequeñas (móviles).
   @media (max-width: 768px) significa: "Aplica estos estilos SOLO si
   el ancho de la pantalla es de 768px o menos". */
@media (max-width: 768px) {

    /* Hacemos el botón principal más pequeño y discreto */
    #pfc-language-button {
        padding: 6px 12px;
        font-size: 14px;
    }

    /* Ajustamos la posición de la lista para que aparezca correctamente */
    #pfc-language-list {
        margin-bottom: 5px;
    }
}