/*====================================
    LANGUAGE TRANSITION
====================================*/

.translate{

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.translate.fade-out{

    opacity:0;

    transform:translateY(8px);

}

.translate.fade-in{

    opacity:1;

    transform:translateY(0);

}

/*====================================
    LANGUAGE SWITCHER
====================================*/

.language-switcher{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    width:140px;

    height:50px;

    padding:0 18px;

    background:#fff;

    border:2px solid #d8b4fe;

    border-radius:50px;

    box-shadow:0 8px 20px rgba(147,112,219,.18);

    transition:.3s ease;

}

.language-switcher:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 30px rgba(147,112,219,.25);

}

/*====================================
    FLAG
====================================*/

.fi{

    width:28px;

    height:20px;

    display:inline-block;

    border-radius:4px;

    overflow:hidden;

    flex-shrink:0;

    box-shadow:0 2px 8px rgba(0,0,0,.18);

}

/*====================================
    SELECT
====================================*/

#languageSwitcher{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:transparent;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    color:#222;

    padding-right:25px;

}

/*====================================
    DROPDOWN ICON
====================================*/

.language-switcher .fa-chevron-down{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    font-size:13px;

    color:#555;

    pointer-events:none;

    transition:.3s;

}

.language-switcher:hover .fa-chevron-down{

    transform:translateY(-50%) rotate(180deg);

}

/*====================================
    OPTIONS
====================================*/

#languageSwitcher option{

    background:#fff;

    color:#222;

    font-size:13px;

    font-weight:500;



}

/*====================================
    MOBILE
====================================*/
/* 
@media (max-width:768px){

.language-switcher{

    width:110px;

    height:40px;

    padding:0 10px;
    gap: 5px;
    margin-right: 5px;

}
.language-switcher .fa-chevron-down{

    font-size:10px;
    margin-right:10px;

}
.fi{

    width:14px;

    height:10px;

}

#languageSwitcher{

    font-size:12px;
}

#languageSwitcher option{
    
    font-size:10px;
}

} */

@media (max-width:768px){

    .language-switcher{

        width:100px;

        height:40px;

        padding:0 8px;

        gap:4px;

        margin-left:auto;

        margin-right:8px;

    }

    #languageSwitcher{

        font-size:12px;

        padding-right:18px;   /* Leave space for arrow */

    }

    .language-switcher .fa-chevron-down{

        right:5px;           /* Position arrow correctly */

        top:50%;

        transform:translateY(-50%);

        font-size:10px;

        margin:0;             /* Remove margin-right */

    }

}