/* ===========================
   PREMIUM TOPBAR
=========================== */

.topbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;

    background: linear-gradient(90deg,#14072F,#1F0B45);

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 7%;

    z-index:9999;
    transition:transform .35s ease;
}

.topbar-left,
.topbar-right{
    display:flex;
    align-items:center;
    gap:16px;
}

.social-text{
    color:#FFC857;
    font-size:14px;
    font-weight:600;
}

.topbar-left a{
    color:#fff;
    font-size:14px;
    transition:.3s;
}

.topbar-left a:hover{
    color:#FFC857;
}

/* Language */

.language-selector{
    position:relative;
}

#langBtn{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    border-radius:30px;
    padding:7px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}

#langBtn img{
    width:22px;
    height:22px;
    border-radius:50%;
}

#langMenu{
    position:absolute;
    top:55px;
    right:0;
    width:190px;
    background:#191919;
    border-radius:16px;
    list-style:none;
    padding:8px 0;
    display:none;
    z-index:99999;
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

#langMenu.show{
    display:block;
}

#langMenu li{
    padding:12px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    color:white;
    cursor:pointer;
}

#langMenu li img{
    width:22px;
    height:22px;
    border-radius:50%;
}

#langMenu li:hover{
    background:#7C3AED;
}

/* Mobile */

@media(max-width:768px){

    .topbar{
        padding:8px 15px;
        height:auto;
        gap:10px;
    }

    .social-text{
        display:none;
    }

    .topbar-left{
        gap:12px;
    }

    .topbar-right{
        width:100%;
        justify-content:center;
    }

}