/*
|--------------------------------------------------------------------------
| ONLINEFOODIES - MENUAi LANGUAGE UI
|--------------------------------------------------------------------------
|
| CSS EXCLUSIVO DE LA INTERFAZ DE IDIOMAS.
|
| NO MODIFICA:
| - cartas
| - tarjetas
| - categorías
| - imágenes
| - precios
| - alérgenos
| - flecha volver arriba
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| DESKTOP
|--------------------------------------------------------------------------
*/

.of-menuai-language-ui {
    display: none;
}


/*
|--------------------------------------------------------------------------
| MOBILE + TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1023px) {


    .of-menuai-language-ui {
        display: block;
    }


    /*
    |--------------------------------------------------------------------------
    | BOTÓN TRANSLATE
    |--------------------------------------------------------------------------
    |
    | Botón circular flotante.
    | Se mantiene siempre a la derecha.
    |
    |--------------------------------------------------------------------------
    */

    .of-menuai-language-trigger {

        position: fixed;

        right: 18px;

        top: 68%;

        transform: translateY(-50%);

        z-index: 99990;

        width: 82px;

        height: 82px;

        padding: 5px;

        margin: 0;

        border: 0;

        border-radius: 50%;

        background: rgba(255,255,255,0.94);

        box-shadow:
            0 4px 18px rgba(0,0,0,0.22);

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 0;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

        transition:
            transform 0.18s ease,
            box-shadow 0.18s ease;
    }


    /*
    |--------------------------------------------------------------------------
    | EFECTO AL TOCAR
    |--------------------------------------------------------------------------
    */

    .of-menuai-language-trigger:active {

        transform:
            translateY(-50%)
            scale(0.92);

        box-shadow:
            0 3px 12px rgba(0,0,0,0.18);
    }


    /*
    |--------------------------------------------------------------------------
    | ICONO
    |--------------------------------------------------------------------------
    */

    .of-menuai-language-trigger-icon {

        width: 60px !important;

        height: 60px !important;

        max-width: 60px !important;

        object-fit: contain;

        display: block;

        margin: 0 auto;
    }


    /*
    |--------------------------------------------------------------------------
    | TEXTO
    |--------------------------------------------------------------------------
    |
    | Como el botón es circular dejamos el texto muy discreto.
    |
    |--------------------------------------------------------------------------
    */

    .of-menuai-language-trigger-text {

        position: absolute;

        bottom: -23px;

        left: 50%;

        transform:
            translateX(-50%);

        color: #ffffff;

        background:
            rgba(0,0,0,0.60);

        padding:
            3px 7px;

        border-radius:
            20px;

        font-size: 11px;

        line-height: 1;

        font-weight: 700;

        text-transform:
            lowercase;

        white-space:
            nowrap;
    }


    /*
    |--------------------------------------------------------------------------
    | PANEL
    |--------------------------------------------------------------------------
    */

    .of-menuai-language-panel {

        position: fixed;

        inset: 0;

        z-index: 99999;

        display: flex;

        align-items: flex-start;

        justify-content: center;

        padding:
            90px 18px 30px;

        box-sizing: border-box;

        background:
            rgba(0,0,0,0.45);

        backdrop-filter:
            blur(4px);

        -webkit-backdrop-filter:
            blur(4px);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease;
    }


    .of-menuai-language-panel.is-visible {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }


    /*
    |--------------------------------------------------------------------------
    | VENTANA
    |--------------------------------------------------------------------------
    */

    .of-menuai-language-panel-inner {

        width:
            min(100%, 520px);

        max-height:
            calc(100vh - 120px);

        overflow-y:
            auto;

        box-sizing:
            border-box;

        background:
            #fff;

        border-radius:
            28px;

        padding:
            24px 20px 25px;

        box-shadow:
            0 20px 60px rgba(0,0,0,0.30);

        transform:
            translateY(-15px)
            scale(0.98);

        transition:
            transform 0.22s ease;
    }


    .of-menuai-language-panel.is-visible
    .of-menuai-language-panel-inner {

        transform:
            translateY(0)
            scale(1);
    }


    /*
    |--------------------------------------------------------------------------
    | CABECERA
    |--------------------------------------------------------------------------
    */

    .of-menuai-language-panel-header {

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 12px;

        padding:
            2px 42px 18px 10px;

        border-bottom:
            1px solid #eeeeee;

        margin-bottom:
            18px;
    }


    .of-menuai-language-panel-icon {

        width:
            58px !important;

        height:
            58px !important;

        object-fit:
            contain;

        display:
            block;

        flex-shrink:
            0;
    }


    .of-menuai-language-panel-title {

        display:
            flex;

        flex-direction:
            column;

        text-align:
            left;

        gap:
            2px;
    }


    .of-menuai-language-panel-title strong {

        color:
            #222;

        font-size:
            23px;

        line-height:
            1.1;

        font-weight:
            800;
    }


    .of-menuai-language-panel-title span {

        color:
            #777;

        font-size:
            14px;

        line-height:
            1.2;
    }


    /*
    |--------------------------------------------------------------------------
    | CERRAR
    |--------------------------------------------------------------------------
    */

    .of-menuai-language-close {

        position:
            absolute;

        top:
            0;

        right:
            0;

        width:
            42px;

        height:
            42px;

        border:
            0;

        background:
            transparent;

        color:
            #555;

        font-size:
            38px;

        font-weight:
            300;

        line-height:
            36px;

        padding:
            0;

        margin:
            0;

        cursor:
            pointer;
    }


    /*
    |--------------------------------------------------------------------------
    | IDIOMAS
    |--------------------------------------------------------------------------
    */

    .of-menuai-language-options {

        display:
            flex;

        flex-direction:
            column;

        gap:
            12px;
    }


    .of-menuai-language-button {

        width:
            100%;

        min-height:
            72px;

        display:
            flex;

        align-items:
            center;

        gap:
            18px;

        padding:
            12px 18px;

        box-sizing:
            border-box;

        background:
            #fafafa;

        border:
            2px solid #e7e7e7;

        border-radius:
            20px;

        color:
            #222;

        cursor:
            pointer;

        text-align:
            left;

        font-size:
            18px;

        transition:
            background 0.18s ease,
            border-color 0.18s ease,
            transform 0.18s ease;
    }


    .of-menuai-language-button:active {

        transform:
            scale(0.985);
    }


    .of-menuai-language-button.is-selected {

        background:
            #f1f1f1;

        border-color:
            #222;
    }


    .of-menuai-language-flag {

        font-size:
            31px;

        line-height:
            1;

        flex-shrink:
            0;
    }


    .of-menuai-language-name {

        flex:
            1;

        font-weight:
            700;
    }


    .of-menuai-language-arrow {

        color:
            #888;

        font-size:
            34px;

        line-height:
            1;

        font-weight:
            300;
    }


    /*
    |--------------------------------------------------------------------------
    | OTRO IDIOMA
    |--------------------------------------------------------------------------
    */

    .of-menuai-custom-language {

        margin-top:
            20px;

        padding-top:
            18px;

        border-top:
            1px solid #eeeeee;
    }


    .of-menuai-custom-language-toggle {

        width:
            100%;

        border:
            0;

        background:
            transparent;

        color:
            #555;

        font-size:
            17px;

        font-weight:
            700;

        padding:
            8px;

        cursor:
            pointer;
    }


    .of-menuai-custom-language-form {

        margin-top:
            10px;

        display:
            flex;

        flex-direction:
            column;

        gap:
            10px;
    }


    .of-menuai-custom-language-input {

        width:
            100% !important;

        min-height:
            52px !important;

        box-sizing:
            border-box !important;

        border:
            2px solid #dddddd !important;

        border-radius:
            14px !important;

        background:
            #fff !important;

        color:
            #222 !important;

        padding:
            10px 15px !important;

        font-size:
            17px !important;

        outline:
            none !important;
    }


    .of-menuai-custom-language-input:focus {

        border-color:
            #777 !important;
    }


    .of-menuai-custom-language-button {

        width:
            100%;

        min-height:
            52px;

        border:
            0;

        border-radius:
            14px;

        background:
            #000;

        color:
            #fff;

        font-size:
            17px;

        font-weight:
            700;

        cursor:
            pointer;
    }


    /*
    |--------------------------------------------------------------------------
    | ESTADO
    |--------------------------------------------------------------------------
    */

    .of-menuai-status {

        margin-top:
            14px;

        text-align:
            center;

        color:
            #555;

        font-size:
            14px;

        font-weight:
            600;

        min-height:
            20px;

        opacity:
            0;

        transition:
            opacity 0.2s ease;
    }


    .of-menuai-status.is-visible {

        opacity:
            1;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    min-width: 768px
) and (
    max-width: 1023px
) {

    .of-menuai-language-trigger {

        right:
            24px;

        top:
            68%;

        width:
            82px;

        height:
            82px;
    }


    .of-menuai-language-trigger-icon {

        width:
            60px !important;

        height:
            60px !important;

        max-width:
            60px !important;
    }


    .of-menuai-language-trigger-text {

        font-size:
            11px;
    }

}