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

.search-wrapper{
    position:relative;
    width:100%;
}

/*=============================
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;

}

}