/* No hay cambios necesarios en translate.css para la transición a SVG */

#lt-language-switcher {
    position: fixed;
    /* top y right ahora se manejan con inline styles del shortcode */
    z-index: 9999;
    display: flex;
    flex-direction: column; /* Para que el desplegable aparezca debajo del botón principal */
    align-items: flex-end; /* Alinea los elementos a la derecha, útiles para el desplegable */
}

#lt-main-button {
    /* width, height, background ahora se manejan con inline styles del shortcode */
    border-radius: 50%; /* Redondo */
    backdrop-filter: blur(8px); /* Efecto de desenfoque */
    border: none; /* Sin borde */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden; /* Asegura que la imagen de la bandera se contenga */
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sutil sombra para destacarlo */
}

#lt-main-button:hover {
    /* Mantenemos el hover para un ligero cambio visual */
    background: rgba(255, 255, 255, 0.25) !important; /* Usamos !important para asegurar que sobrescriba el inline del hover si existe */
    transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
}

#lt-main-button img {
    /* width y height ahora se manejan con inline styles del shortcode */
    border-radius: 50%; /* También redonda */
    object-fit: cover; /* Ajusta la imagen sin distorsionarla */
}

#lt-dropdown-content {
    display: flex;
    flex-direction: column; /* Las banderas se apilan una debajo de la otra */
    gap: 8px; /* Espacio entre banderas */
    /* background y min-width ahora se manejan con inline styles del shortcode */
    backdrop-filter: blur(5px); /* Desenfoque para el desplegable */
    padding: 8px;
    border-radius: 12px;
    margin-top: 10px; /* Espacio entre el botón principal y el desplegable */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave al aparecer/desaparecer */
    transform-origin: top right; /* Punto de origen para la animación de transformación */

    /* Estilos para ocultar el desplegable inicialmente */
    opacity: 0;
    transform: scaleY(0.5) translateY(-10px); /* Efecto de encogimiento y ligera subida */
    pointer-events: none; /* Crucial: no permite interacciones cuando está oculto */
    position: absolute; /* Para que no ocupe espacio cuando está oculto */
    right: 0; /* Asegura que el desplegable se alinee con el botón principal */
    top: 0; /* Se ajustará con margin-top y la altura del botón */
}

#lt-dropdown-content.visible {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    pointer-events: all; /* Permite interacciones cuando está visible */
    position: static; /* Ocupa su espacio normal cuando está visible */
}

.lt-flag { /* Estilos para las banderas dentro del desplegable */
    /* width y height ahora se manejan con inline styles del shortcode */
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease, border 0.2s ease;
    border: 2px solid transparent; /* Borde transparente por defecto */
    object-fit: cover; /* Asegura que la imagen se ajuste bien */
}

.lt-flag:hover {
    transform: scale(1.1);
    border: 2px solid rgba(0, 0, 0, 0.2); /* Borde suave al pasar el ratón */
}

/* Estilo para la bandera activa (opcional, para indicar el idioma actual) */
.lt-flag.active {
    border: 2px solid #0073aa; /* Ejemplo de color de borde para el idioma activo */
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.5);
}