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

/* Prevent page horizontal scroll when popup opens */
html, body {
    overflow-x: hidden;
}

/* WRAPPER */
.chs-wrapper{
    position:relative;
}

/* BAR */
.chs-bar{
    display:flex;
    align-items:center;
    overflow:hidden;
    flex-direction: row-reverse;
    gap:10px;
}

/* ICON IMAGE */
img.chs-svg-icon {
    width:22px;
    height:auto;
    display:block;
}

/* INPUT animation */
.chs-input{
    width:0 !important;
    opacity:0;
    transition:all .4s ease;
    padding:0 !important;
    border:1px solid #ccc;
}

.chs-input:focus{
    outline:none !important;
}

input.chs-input{
    border:1px solid #475569 !important;
}

/* EXPANDED STATE */
.chs-wrapper.active .chs-input{
    width:220px !important;
    padding:5px 15px !important;
    opacity:1;
}

/* ICONS */
.chs-icon{
    cursor:pointer;
    font-size:18px;
}

.chs-close{ display:none; }
.chs-wrapper.active .chs-open{ display:none; }
.chs-wrapper.active .chs-close{ display:inline; }

/* RESULTS */
.chs-results{
    position:absolute;
    background:#fff;
    width:100%;
    max-width:100%;
    left:0;
    right:0;
    z-index:999;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.chs-item{
    padding:8px;
    border-bottom:1px solid #eee;
}

.chs-item:hover{
    background-color:#24BC80;
}

.chs-item:hover a{
    color:white !important;
}

.chs-item a{
    text-decoration:none;
    color:#303640;
}

/* MOBILE POPUP — FINAL FIX */
@media(max-width:1024px){

    img.chs-svg-icon { width:20px; }

    .chs-bar{
        justify-content:center;
    }

    .chs-wrapper.active{
        position:fixed;
        top:0;
        left:0;
        right:0;          /* KEY FIX */
        bottom:0;         /* KEY FIX */
        width:auto;       /* Avoid 100vw overflow */
        height:auto;
        background:white;
        z-index:9999;
        padding:30px 20px;
        overflow-x:hidden;
    }

    .chs-wrapper.active .chs-input{
        width:100% !important;
        max-width:100%;
    }

    .chs-results{
        width:100%;
        max-width:100%;
        left:0;
        padding-inline: 20px;
    }
}

@media(max-width:520px){
    .chs-results{
        width:100%;
    }
}