/*
|--------------------------------------------------------------------------
| Search Wrapper
|--------------------------------------------------------------------------
*/

.kw-search-wrapper{
    position:relative;
    width:100%;
    max-width:700px;
    margin:0 auto;
    z-index:999;
}

/*
|--------------------------------------------------------------------------
| Search Box
|--------------------------------------------------------------------------
*/

.kw-search-box{
    position:relative;
}

.kw-search-input{
    width:100%;
    height:60px;
    border:2px solid #ececec;
    border-radius:50px;
    padding:0 70px 0 55px;
    font-size:17px;
    font-weight:500;
    background:#fff;
    outline:none;
    transition:.3s;
    box-shadow:0 5px 25px rgba(0,0,0,.05);
}

.kw-search-input:focus{
    border-color:#f26522;
    box-shadow:0 12px 35px rgba(242,101,34,.15);
}

.kw-search-input::placeholder{
    color:#999;
}

/*
|--------------------------------------------------------------------------
| Loader
|--------------------------------------------------------------------------
*/

.kw-search-loader{
    position:absolute;
    right:22px;
    top:50%;
    width:22px;
    height:22px;
    margin-top:-11px;
    border:3px solid #eee;
    border-top-color:#f26522;
    border-radius:50%;
    animation:kwSpin .8s linear infinite;
    display:none;
}

.kw-search-loader.active{
    display:block;
}

@keyframes kwSpin{

    to{

        transform:rotate(360deg);

    }

}

/*
|--------------------------------------------------------------------------
| Search Results
|--------------------------------------------------------------------------
*/

.kw-search-results{

    position:absolute;
    top:70px;
    left:0;
    right:0;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    display:none;

    max-height:500px;

    overflow-y:auto;

}

.kw-search-results.active{

    display:block;

}

/*
|--------------------------------------------------------------------------
| Start Message
|--------------------------------------------------------------------------
*/

.kw-search-start{

    padding:35px;

    text-align:center;

}

.kw-search-start h4{

    margin-bottom:10px;

    font-size:22px;

}

.kw-search-start p{

    color:#777;

    margin:0;

}

/*
|--------------------------------------------------------------------------
| Result Item
|--------------------------------------------------------------------------
*/

.kw-search-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px;

    text-decoration:none;

    color:#111;

    border-bottom:1px solid #f1f1f1;

    transition:.25s;

}

.kw-search-item:hover{

    background:#fafafa;

}

/*
|--------------------------------------------------------------------------
| Image
|--------------------------------------------------------------------------
*/

.kw-search-item__image{

    width:75px;

    flex-shrink:0;

}

.kw-search-item__image img{

    width:75px;

    height:75px;

    object-fit:cover;

    border-radius:12px;

    border:1px solid #eee;

}

/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.kw-search-item__content{

    flex:1;

}

.kw-search-item__title{

    margin:0;

    font-size:17px;

    font-weight:600;

    line-height:1.4;

}

.kw-search-item__sku{

    margin-top:5px;

    font-size:13px;

    color:#f26522;

}

.kw-search-item__desc{

    margin-top:6px;

    font-size:14px;

    color:#666;

    line-height:1.5;

}

/*
|--------------------------------------------------------------------------
| Arrow
|--------------------------------------------------------------------------
*/

.kw-search-item__arrow{

    font-size:24px;

    color:#bbb;

}

/*
|--------------------------------------------------------------------------
| Empty
|--------------------------------------------------------------------------
*/

.kw-search-empty{

    padding:45px;

    text-align:center;

}

.kw-search-empty-icon{

    font-size:42px;

    margin-bottom:15px;

}

.kw-search-empty h4{

    margin-bottom:8px;

}

.kw-search-empty p{

    margin:0;

    color:#777;

}

/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

.kw-search-results::-webkit-scrollbar{

    width:6px;

}

.kw-search-results::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:20px;

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media(max-width:767px){

    .kw-search-input{

        height:54px;

        font-size:15px;

        padding:0 60px 0 48px;

    }

    .kw-search-results{

        top:64px;

        border-radius:14px;

        max-height:65vh;

    }

    .kw-search-item{

        padding:14px;

        gap:14px;

    }

    .kw-search-item__image{

        width:60px;

    }

    .kw-search-item__image img{

        width:60px;

        height:60px;

    }

    .kw-search-item__title{

        font-size:15px;

    }

}