/**
 * Selector de idioma (ES/EN). Se posiciona SIEMPRE flotante (position:fixed), nunca integrado en el
 * flujo normal del header/footer de Astra — así funciona sin importar los cambios de diseño del
 * tema, y la opción "header" vs "footer" (ver Configuración) es solo una cuestión de a qué borde de
 * la pantalla queda pegado.
 */
.mc-lang-switcher{
    position: fixed;
    z-index: 9999;
}

.mc-lang-switcher--header{
    top: 14px;
    right: 16px;
}

/* Corrido de la esquina para no tapar el botón "volver arriba" que ya trae el tema ahí. */
.mc-lang-switcher--footer{
    right: 70px;
    bottom: 0;
}

/* La flechita NATIVA del navegador ignora el padding del <select> (queda pegada al borde sin
   importar cuánto padding se le ponga) — se le saca el estilo nativo (appearance:none) y se dibuja
   una propia como background-image, ahí sí se puede separar del borde a gusto. */
.mc-lang-switcher select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #d7dde1;
    border-radius: 999px;
    padding: 6px 32px 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #125687;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23125687' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

/* Nada de caja blanca sobre fondo de color: el <select> ES la pestaña, con el mismo color de fondo
   del footer detrás — solo redondeada arriba, plana abajo, donde queda pegada al borde. */
.mc-lang-switcher--footer select{
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 8px 34px 8px 16px;
    color: #fff;
    background-color: #125687;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
}

.mc-lang-switcher select:focus{
    outline: 2px solid #0d3f63;
    outline-offset: 2px;
}

.mc-lang-switcher--footer select:focus{
    outline-color: #fff;
}

@media (max-width: 480px){
    .mc-lang-switcher--header{
        top: auto;
        bottom: 14px;
        right: 14px;
    }

    /* En celular el botón "volver arriba" del tema queda más angosto/pegado al borde — con el
       mismo right que en desktop todavía lo tapaba, así que acá se corre bastante más. */
    .mc-lang-switcher--footer{
        right: 100px;
    }
}