/* =========================================================
   SAFESPARESONLINE LANGUAGE MODULE
   ========================================================= */

:root{

    --language-primary:#111827;

    --language-secondary:#6b7280;

    --language-border:#e5e7eb;

    --language-hover:#f3f4f6;

    --language-active:#eff6ff;

    --language-shadow:
        0 10px 35px rgba(0,0,0,.12);

    --language-radius:18px;
}


/* =========================================================
   Language Trigger
   ========================================================= */

.language-converter{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    padding:8px 12px;

    border-radius:14px;

    transition:
        background .25s ease,
        transform .25s ease;
}

.language-converter:hover{

    background:var(--language-hover);
}

.language-converter img{

    width:28px;

    height:28px;

    border-radius:50%;

    object-fit:cover;
}

.SelectedLanguage{

    font-size:14px;

    font-weight:700;

    color:var(--language-primary);

    text-transform:uppercase;

    letter-spacing:.5px;
}


/* =========================================================
   Language Dropdown
   ========================================================= */

.LanguageContainer{

    position:absolute;

    top:calc(100% + 14px);

    left:0;
    right:auto;

    width:320px;

    background:#fff;

    border-radius:var(--language-radius);

    border:1px solid var(--language-border);

    box-shadow:var(--language-shadow);

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:
        translateY(10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index:999999;
}

.LanguageContainer.active{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0);
}


/* =========================================================
   Language Header
   ========================================================= */

.LanguageHeading{

    padding:18px 20px;

    border-bottom:
        1px solid var(--language-border);

    font-size:16px;

    font-weight:700;

    color:var(--language-primary);

    background:#fff;
}


/* =========================================================
   Language Scroll Area
   ========================================================= */

.LanguageList{

    max-height:420px;

    overflow-y:auto;
}


/* =========================================================
   Single Language Option
   ========================================================= */

.language-option{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:14px 18px;

    cursor:pointer;

    transition:
        background .22s ease;
}

.language-option:hover{

    background:var(--language-hover);
}

.language-option.active{

    background:var(--language-active);
}


/* =========================================================
   Left Area
   ========================================================= */

.language-left{

    display:flex;

    align-items:center;

    gap:14px;
}


/* =========================================================
   Flag
   ========================================================= */

.language-flag{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f9fafb;

    font-size:18px;

    flex-shrink:0;
}


/* =========================================================
   Text Area
   ========================================================= */

.language-info{

    display:flex;

    flex-direction:column;

    gap:2px;
}

.language-code{

    font-size:13px;

    font-weight:700;

    color:var(--language-primary);

    text-transform:uppercase;

    letter-spacing:.4px;
}

.language-name{

    font-size:14px;

    font-weight:500;

    color:var(--language-secondary);
}


/* =========================================================
   Checkmark
   ========================================================= */

.language-check{

    font-size:15px;

    font-weight:700;

    color:#2563eb;

    opacity:0;

    transform:scale(.8);

    transition:
        opacity .22s ease,
        transform .22s ease;
}

.language-option.active
.language-check{

    opacity:1;

    transform:scale(1);
}


/* =========================================================
   Custom Scrollbar
   ========================================================= */

.LanguageList::-webkit-scrollbar{

    width:8px;
}

.LanguageList::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:999px;
}

.LanguageList::-webkit-scrollbar-track{

    background:transparent;
}


/* =========================================================
   Mobile Bottom Sheet
   ========================================================= */

@media(max-width:640px){

    .LanguageContainer{

        position:fixed;

        top:auto;

        bottom:0;

        left:0;

        right:0;

        width:100%;

        max-width:100%;

        border-radius:
            24px 24px 0 0;

        max-height:85vh;

        transform:
            translateY(100%);

        transition:
            transform .3s ease;

        margin:0;

        z-index:99999999;
    }

    .LanguageContainer.active{

        transform:
            translateY(0);
    }

    .LanguageHeading{

        text-align:center;

        padding-top:24px;
    }

    .language-option{

        padding:16px 18px;
    }

    .language-flag{

        width:42px;

        height:42px;

        font-size:20px;
    }
}


/* =========================================================
   Ultra Small Devices
   ========================================================= */

@media(max-width:480px){

    .language-converter{

        padding:6px 8px;
    }

    .language-converter img{

        width:24px;

        height:24px;
    }

    .SelectedLanguage{

        font-size:13px;
    }
}