/* ==========================================================
   ZendaSoftware Global Language Experience
   ZS-6M

   FlyonUI-style component engineering.
   ZendaSoftware visual identity.
   ========================================================== */


.zenda-locale-option {

    position: relative;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        24px;

    align-items: center;

    gap: 11px;


    width: 100%;

    min-height: 54px;


    padding:
        8px
        10px;


    border:
        1px solid
        transparent;

    border-radius:
        13px;


    color:
        var(--fg);


    text-decoration:
        none;


    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.zenda-locale-option:hover {

    background:
        color-mix(
            in srgb,
            var(--surface-2) 88%,
            #7c5cff 12%
        );


    border-color:
        color-mix(
            in srgb,
            var(--line-2) 76%,
            #7c5cff 24%
        );


    transform:
        translateY(-1px);
}


.zenda-locale-option:focus-visible {

    outline:
        3px solid
        rgba(
            124,
            92,
            255,
            .22
        );

    outline-offset:
        2px;


    border-color:
        rgba(
            124,
            92,
            255,
            .65
        );
}


.zenda-locale-option.is-active {

    background:
        linear-gradient(
            135deg,
            rgba(
                124,
                92,
                255,
                .13
            ),
            rgba(
                34,
                211,
                238,
                .055
            )
        );


    border-color:
        rgba(
            124,
            92,
            255,
            .32
        );


    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .07
        );
}


.zenda-lang-flag {

    width:
        32px;

    height:
        23px;


    display:
        grid;

    place-items:
        center;


    overflow:
        hidden;


    border:
        1px solid
        rgba(
            148,
            163,
            184,
            .22
        );

    border-radius:
        7px;


    background:
        rgba(
            255,
            255,
            255,
            .06
        );


    box-shadow:
        0 5px 14px
        rgba(
            0,
            0,
            0,
            .11
        );
}


.zenda-lang-flag img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.zenda-lang-copy {

    min-width:
        0;


    display:
        flex;

    flex-direction:
        column;


    gap:
        2px;


    text-align:
        start;
}


.zenda-lang-copy
.lang-label {

    display:
        block;


    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;


    color:
        var(--fg);


    font-size:
        13px;

    font-weight:
        680;

    line-height:
        1.2;
}


.zenda-lang-meta {

    display:
        block;


    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;


    color:
        var(--muted);


    font-size:
        10px;

    font-weight:
        550;

    line-height:
        1.2;

    letter-spacing:
        .01em;
}


html[dir="rtl"]
.zenda-lang-meta {

    letter-spacing:
        0;
}


.zenda-lang-check {

    width:
        22px;

    height:
        22px;


    display:
        grid;

    place-items:
        center;


    border-radius:
        999px;


    color:
        transparent;


    background:
        transparent;


    font-size:
        9px;


    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.zenda-locale-option.is-active
.zenda-lang-check {

    color:
        #fff;


    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #6366f1
        );


    box-shadow:
        0 7px 18px -8px
        rgba(
            124,
            92,
            255,
            .9
        );
}


.zenda-locale-option:hover
.zenda-lang-check {

    transform:
        scale(1.04);
}


@media (max-width: 639px) {

    .zenda-locale-option {

        min-height:
            52px;


        grid-template-columns:
            31px
            minmax(0, 1fr)
            22px;


        gap:
            9px;


        padding:
            7px
            8px;
    }


    .zenda-lang-flag {

        width:
            29px;

        height:
            21px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .zenda-locale-option,
    .zenda-lang-check {

        transition:
            none !important;
    }


    .zenda-locale-option:hover {

        transform:
            none;
    }

}