/* ==========================================================
   NEXORAHOST — LANGUAGE FLAGS FINAL
   ========================================================== */


/* Ancien select */

#nx-language-select{
    display:none !important;
    visibility:hidden !important;
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    opacity:0 !important;

    pointer-events:none !important;
}


/* Picker */

.nx-flag-language-picker{
    position:relative;

    display:inline-flex;

    align-items:center;

    z-index:99999;
}


/* Bouton */

.nx-flag-language-trigger{
    height:42px;
    min-width:86px;

    padding:0 12px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:9px;

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

    border-radius:12px;

    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.98),
            rgba(10,15,27,.98)
        );

    color:#f8fafc;

    font-family:inherit;

    cursor:pointer;

    box-shadow:
        0 9px 25px
        rgba(0,0,0,.20);

    transition:
        .18s ease;
}


.nx-flag-language-trigger:hover{
    border-color:
        rgba(139,92,246,.48);

    background:#111827;

    transform:
        translateY(-1px);
}


.nx-flag-language-picker.open
.nx-flag-language-trigger{
    border-color:
        rgba(139,92,246,.60);

    box-shadow:
        0 0 0 3px
        rgba(139,92,246,.10);
}


/* Vrais drapeaux ronds */

.nx-real-flag{
    width:25px;
    height:25px;

    flex:0 0 25px;

    display:block;

    object-fit:cover;

    border-radius:50%;

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


.nx-flag-code{
    color:#f8fafc;

    font-size:13px;

    font-weight:800;

    letter-spacing:.04em;
}


.nx-flag-chevron{
    color:#8491a8;

    font-size:10px;

    transition:
        transform .18s ease;
}


.nx-flag-language-picker.open
.nx-flag-chevron{
    transform:
        rotate(180deg);
}


/* Menu */

.nx-flag-language-menu{
    position:absolute;

    top:calc(100% + 9px);
    right:0;

    width:210px;

    display:none;

    padding:7px;

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

    border-radius:14px;

    background:
        rgba(9,14,26,.99);

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.42);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.nx-flag-language-picker.open
.nx-flag-language-menu{
    display:grid;

    gap:4px;
}


/* Lignes */

.nx-flag-language-item{
    width:100%;
    height:46px;

    padding:0 10px;

    display:flex;

    align-items:center;

    gap:11px;

    border:
        1px solid transparent;

    border-radius:10px;

    background:
        transparent;

    color:#dce4f1;

    font-family:inherit;

    cursor:pointer;

    text-align:left;

    transition:
        .15s ease;
}


.nx-flag-language-item:hover{
    border-color:
        rgba(139,92,246,.13);

    background:
        rgba(139,92,246,.075);
}


.nx-flag-language-item.active{
    border-color:
        rgba(139,92,246,.22);

    background:
        rgba(139,92,246,.13);
}


.nx-flag-language-item
.nx-real-flag{
    width:27px;
    height:27px;

    flex-basis:27px;
}


.nx-language-name{
    flex:1;

    font-size:13px;

    font-weight:650;
}


.nx-language-code-small{
    color:#758299;

    font-size:10px;

    font-weight:800;

    letter-spacing:.05em;
}


@media(max-width:700px){

    .nx-flag-language-trigger{
        min-width:78px;

        height:40px;
    }

    .nx-flag-language-menu{
        width:195px;
    }

}