/* =====================================================
   City Selector v3.1
===================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

.cs-wrapper{
    display:inline-block;
}

/* =====================================================
   Button
===================================================== */

.cs-button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    height:48px;

    padding:0 24px;

    border:none;

    border-radius:14px;

    background:#FFD54A;

    color:#333;

    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.cs-button:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(0,0,0,.15);

}


/* =====================================================
   Overlay
===================================================== */

.cs-overlay{

    display:none;

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(3px);

    z-index:999999;

}


/* =====================================================
   Modal
===================================================== */

.cs-modal{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:min(700px,94vw);

    max-height:88vh;

    background:#fff;

    border-radius:22px;

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

    animation:csFade .25s ease;

    overflow-y:auto;      /* برگشت اسکرول مودال */

}


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

.cs-title{

    margin:0;

    padding:28px 32px;

    border-bottom:1px solid #ececec;

    font-size:28px;

    font-weight:700;

    color:#222;

}


/* =====================================================
   Close
===================================================== */

.cs-close{

    position:absolute;

    left:22px;

    top:18px;

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#F5F5F5;

    cursor:pointer;

    font-size:24px;

    color:#555;

    z-index:1000;

    transition:.2s;

}

.cs-close:hover{

    background:#ECECEC;

}


/* =====================================================
   Search
===================================================== */

.cs-search{

    padding:22px 30px;

}

.cs-search input{

    width:100%;

    height:52px;

    padding:0 18px;

    border:1px solid #ddd;

    border-radius:14px;

    outline:none;

    font-size:15px;

    transition:.25s;

}

.cs-search input:focus{

    border-color:#FFD54A;

    box-shadow:0 0 0 4px rgba(255,213,74,.18);

}


/* =====================================================
   Sections
===================================================== */

.cs-popular,
.cs-all-cities{

    padding:0 30px 25px;

}

.cs-popular h3,
.cs-all-cities h3{

    margin:0 0 14px;

    font-size:17px;

    color:#444;

}


/* =====================================================
   Popular Cities
===================================================== */

.cs-popular-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


/* =====================================================
   Cities
===================================================== */

.cs-city{

    border:none;

    background:#F5F5F5;

    padding:11px 18px;

    border-radius:12px;

    cursor:pointer;

    transition:.2s;

    font-size:15px;

}

.cs-city:hover{

    background:#FFD54A;

}/* =====================================================
   City List
===================================================== */

.cs-city-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    max-height:45vh;

    overflow-y:auto;

    overflow-x:hidden;

    padding:5px;

    scroll-behavior:smooth;

}


/* =====================================================
   Scrollbar (City List)
===================================================== */

.cs-city-list::-webkit-scrollbar{

    width:8px;

}

.cs-city-list::-webkit-scrollbar-track{

    background:transparent;

}

.cs-city-list::-webkit-scrollbar-thumb{

    background:#d5d5d5;

    border-radius:20px;

}

.cs-city-list::-webkit-scrollbar-thumb:hover{

    background:#bdbdbd;

}


/* =====================================================
   Scrollbar (Modal)
===================================================== */

.cs-modal::-webkit-scrollbar{

    width:8px;

}

.cs-modal::-webkit-scrollbar-track{

    background:transparent;

}

.cs-modal::-webkit-scrollbar-thumb{

    background:#e0e0e0;

    border-radius:20px;

}

.cs-modal::-webkit-scrollbar-thumb:hover{

    background:#c7c7c7;

}


/* =====================================================
   Animation
===================================================== */

@keyframes csFade{

    from{

        opacity:0;

        transform:translate(-50%,-46%);

    }

    to{

        opacity:1;

        transform:translate(-50%,-50%);

    }

}


/* =====================================================
   Mobile
===================================================== */

@media(max-width:768px){

    .cs-modal{

        width:95vw;

        max-height:90vh;

    }

    .cs-title{

        font-size:22px;

        padding:24px;

    }

    .cs-search{

        padding:18px;

    }

    .cs-popular,
    .cs-all-cities{

        padding:0 18px 20px;

    }

    .cs-city-list{

        max-height:42vh;

    }

    .cs-city{

        font-size:14px;

        padding:10px 16px;

    }

}