/*==================================================
LIVE SEARCH
==================================================*/

.search-wrapper{
    position:relative;
    width:340px;
    flex-shrink:0;
}

/*=============================
Result Box
=============================*/

#searchResults{

    position:absolute;

    top:58px;

    right:0;

    width:420px;

    max-height:500px;

    overflow-y:auto;

    background:#ffffff;

    border-radius:18px;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

    border:1px solid rgba(0,0,0,.08);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.25s ease;

    z-index:99999;

}

/* فعال */

#searchResults.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/*=============================
Scrollbar
=============================*/

#searchResults::-webkit-scrollbar{

    width:8px;

}

#searchResults::-webkit-scrollbar-thumb{

    background:#d6b15f;

    border-radius:10px;

}

/*=============================
Items
=============================*/

.search-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px 18px;

    text-decoration:none;

    color:#222;

    transition:.25s;

    border-bottom:1px solid #f1f1f1;

}

.search-item:last-child{

    border-bottom:none;

}

.search-item:hover{

    background:#faf7ef;

}

/*=============================
Icon
=============================*/

.search-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    background:#eef7f2;

    color:#0f8b5d;

    font-size:16px;

}

/*=============================
Title
=============================*/

.search-title{

    font-size:14px;

    font-weight:600;

    line-height:1.9;

}

/*=============================
Empty
=============================*/

.search-empty{

    padding:25px;

    text-align:center;

    color:#888;

    font-size:14px;

}

/*=============================
Category
=============================*/

.search-item.category .search-icon{

    background:#eef8ff;

    color:#0077cc;

}

/*=============================
Product
=============================*/

.search-item.product .search-icon{

    background:#eef7f2;

    color:#0f8b5d;

}

/*=============================
Blog
=============================*/

.search-item.blog .search-icon{

    background:#fff6ea;

    color:#d68a00;

}

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

@media(max-width:768px){

#searchResults{

    width:100%;

    right:0;

    left:0;

    max-height:350px;

}

.search-item{

    padding:14px;

}

.search-title{

    font-size:13px;

}

.search-box{

    position:relative;

    display:flex;

    align-items:center;

    width:260px;

    flex-shrink:0;

}

.search-wrapper{
    position:relative;
    width:340px;
    flex-shrink:0;
}

.search-box input{

    width:100%;

    height:42px;

    padding:0 45px 0 15px;

}

.search-box button{

    position:absolute;

    left:12px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    cursor:pointer;

}

.search-wrapper{

    position:relative;

}

#searchResults{

    width:100%;

}

}