/*======================================================
    COUNTRY PICKER
======================================================*/

.country-picker{
    position:relative;
    width:100%;
    z-index:100;
}

/* button */

.country-button{
    width:100%;
    height:60px;

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

    padding:0 18px;

    border-radius:18px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);

    color:#fff;

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

    cursor:pointer;
    transition:.3s;
}

.country-button:hover{
    background:rgba(255,255,255,.075);
    border-color:rgba(184,115,51,.35);
}

.country-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.country-flag{
    font-size:21px;
    width:28px;
    text-align:center;
}

.country-name{
    color:#fff;
    font-size:15px;
}

.country-arrow{
    color:rgba(255,255,255,.55);
    font-size:18px;
}

/* dropdown */

.country-dropdown{
    position:fixed;

    width:420px;
    max-width:90vw;

    background:rgba(18,18,22,.94);

    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;

    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);

    box-shadow:
        0 30px 90px rgba(0,0,0,.45),
        inset 0 1px rgba(255,255,255,.06);

    overflow:hidden;

    opacity:0;
    visibility:hidden;

    transform:translateY(-8px) scale(.98);

    transition:.25s ease;

    z-index:99999;
}

.country-dropdown.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

/* search */

.country-search{
    padding:16px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.country-search input{
    height:50px;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
}

/* list */

.country-list{
    max-height:420px;
    overflow-y:auto;
}

.country-item{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:15px 18px;

    cursor:pointer;

    border-bottom:1px solid rgba(255,255,255,.04);

    transition:.2s;
}

.country-item:last-child{
    border-bottom:none;
}

.country-item:hover{
    background:rgba(184,115,51,.10);
}

.country-item > span{
    color:var(--primary);
    font-size:14px;
    font-weight:600;
}

/* scrollbar */

.country-list::-webkit-scrollbar{
    width:8px;
}

.country-list::-webkit-scrollbar-track{
    background:transparent;
}

.country-list::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.14);
    border-radius:20px;
}

.country-list::-webkit-scrollbar-thumb:hover{
    background:rgba(184,115,51,.45);
}

/* overlay */

.country-overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.25s ease;

    z-index:900;
}

.country-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}