/*
=================================================
 YAWAS SMART SEARCH v2.0
 CSS
=================================================
*/


*{
    box-sizing:border-box;
}



/* =====================================
 FLOATING SEARCH BUTTON
===================================== */


#searchBtn{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    width:65px;

    height:65px;

    border:none;

    border-radius:50%;

    background:#c62828;

    color:white;

    font-size:28px;

    cursor:pointer;

    z-index:9999;

    box-shadow:0 8px 25px rgba(0,0,0,.35);

    transition:.3s;

}



#searchBtn:hover{

    transform:translateX(-50%) scale(1.1);

    background:#a91f1f;

}





/* =====================================
 OVERLAY BACKGROUND
===================================== */


#searchOverlay{

    display:none;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.55);

    z-index:9998;

}





/* =====================================
 SEARCH CONTAINER
===================================== */


.searchContainer{

    width:90%;

    max-width:650px;

    background:white;

    margin:80px auto;

    padding:25px;

    border-radius:20px;

    position:relative;

    animation:searchSlide .3s ease;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}




@keyframes searchSlide{


from{

    opacity:0;

    transform:translateY(-40px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}





/* =====================================
 CLOSE BUTTON
===================================== */


#closeSearch{


    position:absolute;

    right:20px;

    top:15px;

    width:35px;

    height:35px;

    border:none;

    border-radius:50%;

    background:#eee;

    cursor:pointer;

    font-size:18px;

}



#closeSearch:hover{

    background:#ddd;

}





/* =====================================
 INPUT BOX
===================================== */


#searchInput{


    width:100%;

    height:55px;

    padding:0 20px;

    font-size:18px;

    border-radius:12px;

    border:2px solid #ddd;

    outline:none;

    transition:.3s;

}



#searchInput:focus{

    border-color:#c62828;

    box-shadow:0 0 8px rgba(198,40,40,.25);

}






/* =====================================
 RESULT AREA
===================================== */


#searchResult{


    margin-top:20px;

    max-height:420px;

    overflow-y:auto;

}





/* =====================================
 RESULT ITEM
===================================== */


.resultItem{


    padding:15px;

    margin-bottom:8px;

    border-radius:12px;

    border-bottom:1px solid #eee;

    cursor:pointer;

    transition:.25s;

    background:white;


}



.resultItem:hover{


    background:#f8f8f8;

    transform:translateX(5px);


}





/* =====================================
 TITLE
===================================== */


.resultTitle{


    font-size:17px;

    font-weight:600;

    color:#333;


}



.resultTitle::first-letter{

    color:#c62828;

}





/* =====================================
 CONTENT SNIPPET
===================================== */


.resultText{


    margin-top:8px;

    font-size:14px;

    line-height:1.5;

    color:#666;


}






/* =====================================
 HIGHLIGHT SEARCH WORD
===================================== */


.highlight{


    color:#c62828;

    font-weight:bold;

    background:#ffe8e8;

    padding:2px 4px;

    border-radius:4px;


}





/* =====================================
 SCROLLBAR
===================================== */


#searchResult::-webkit-scrollbar{

    width:8px;

}


#searchResult::-webkit-scrollbar-thumb{


    background:#ccc;

    border-radius:10px;


}




/* =====================================
 MOBILE RESPONSIVE
===================================== */


@media(max-width:600px){


.searchContainer{


    width:95%;

    margin:50px auto;

    padding:20px;


}



#searchInput{


    font-size:16px;


}



.resultTitle{


    font-size:15px;


}



.resultText{


    font-size:13px;


}



#searchBtn{


    width:60px;

    height:60px;

    bottom:20px;


}


}