#search-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.4);
backdrop-filter:blur(2px);
z-index:995;
display:none;
}

#search-modal{


position:fixed;

display:none;

z-index:996;

background:#fff;

border-radius:16px;

overflow:hidden;

box-shadow:
    0 8px 32px rgba(0,0,0,.15);


}

.search-modal-inner{
padding:16px;
}

.search-modal-input{


height:44px;

display:flex;

flex:1;

align-items:center;

background:#f0f0f1;

border-radius:999px;

padding:0 15px;

margin-bottom:15px;


}

.search-modal-input i{
color:#999;
}

.search-modal-input input{


flex:1;

border:none;

background:transparent;

outline:none;

padding-right:10px;


}

.search-section-title{


font-size:14px;

font-weight:700;

margin-bottom:12px;


}

.search-chips{


display:flex;

flex-wrap:wrap;

gap:8px;


}

.search-chip{


display:flex;

align-items:center;

gap:6px;

border:1px solid #e0e0e2;

border-radius:999px;

padding:8px 12px;

color:#444;

text-decoration:none;


}

.search-banner{


margin-top:20px;


}

.search-banner img{


width:100%;

display:block;

border-radius:12px;


}

body.search-modal-open{
    overflow:hidden;
}

/* =========================================
   AUTOCOMPLETE - DIGIKALA STYLE
========================================= */
/*
.autocomplete-items{

    margin-top:12px;

    background:#fff;

    border-top:1px solid #f0f0f1;

    max-height:420px;

    overflow-y:auto;
}
*/

/* هر آیتم */

.autocomplete-items{

    margin-top:12px;

    background:#fff;
}

.autocomplete-items > div{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 8px;

    cursor:pointer;

    transition:.15s;
}

.autocomplete-items > div:hover{

    background:#f5f5f5;
}

.autocomplete-active{

    background:#f5f5f5 !important;
}

/* دسته بندی */

.search-result-category{

    display:flex;

    align-items:center;

    width:100%;
}

.search-result-category strong{

    margin-right:auto;

    color:#19bfd3;

    font-weight:normal;
}

/* محصول */

.search-result-product{

    display:flex;

    align-items:center;

    width:100%;
}

/* اسکرول */

.autocomplete-items::-webkit-scrollbar{

    width:6px;
}

.autocomplete-items::-webkit-scrollbar-thumb{

    background:#d7d7d7;

    border-radius:10px;
}


#search-results{

    display:none;

    max-height:320px;

    overflow-y:auto;
}

#search-results-container{

    width:100%;
}

#search-results::-webkit-scrollbar{

    width:6px;
}

#search-results::-webkit-scrollbar-thumb{

    border-radius:20px;

    background:#d6d6d6;
}

.search-mobile-header{
    display:flex;
    align-items:center;
    gap:10px;
}

#search-mobile-back{
    display:none;
    border:none;
    background:none;
    padding:0;
    font-size:22px;
    cursor:pointer;
}

#search-clear{
    display:none;
    cursor:pointer;
    color:#999;
    padding:4px;
}

@media (max-width:768px){

    .search-trending{
        position:relative;
    }

    .search-chips{

        display:flex;
        flex-wrap:nowrap;

        gap:10px;

        overflow-x:auto;
        overflow-y:hidden;

        padding-bottom:6px;

        scroll-behavior:smooth;

        -ms-overflow-style:none;
        scrollbar-width:none;
    }

    .search-chips::-webkit-scrollbar{
        display:none;
    }

    .search-chip{

        flex:0 0 auto;

        white-space:nowrap;

        min-width:max-content;
    }

    .search-trending::before{

        content:"";

        position:absolute;

        left:0;
        top:32px;

        width:40px;
        height:56px;

        z-index:2;

        pointer-events:none;

        background:linear-gradient(
            to right,
            #fff,
            rgba(255,255,255,0)
        );
    }

    .search-modal-inner{
        padding: 10px;
        font-size: 88%;
        text-align: right;
    }

    #search-overlay{
        display:none !important;
    }

    #search-modal{

        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;
        height:100vh;

        border-radius:0;

        box-shadow:none;
    }

    .search-modal-inner{

        height:100vh;

        overflow-y:auto;

        padding:16px;
    }

    #search-mobile-back{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .search-mobile-header {
        margin-bottom: 10px;
    }
    .search-modal-input{
        margin-bottom: 0;
    }

    #search-results{
        max-height:none;
    }
}