/* ======================================================
   SEAN B SHOP
   MARKETPLACE SEARCH COMPONENT
   /assets/css/components/search.css

   CLEAN PRODUCTION VERSION
====================================================== */


/* ======================================================
   SEARCH WRAPPER
====================================================== */


.desktop-search{

    position:relative;

    flex:1;

    max-width:720px;

    height:48px;

    display:flex;

    align-items:center;

    background:#ffffff;

    border:2px solid #0b1f3a;

    border-radius:30px;

    overflow:hidden;

    transition:.25s ease;

}



.desktop-search:focus-within{

    border-color:#e60000;

    box-shadow:

    0 0 0 4px rgba(230,0,0,.08);

}





/* ======================================================
   CATEGORY SELECT
====================================================== */


.search-category{

    height:100%;

    width:160px;

    flex-shrink:0;

    border-right:1px solid #e5e7eb;

}



.search-category select{


    width:100%;

    height:100%;


    border:none;

    outline:none;


    background:white;


    padding:0 15px;


    color:#374151;


    font-size:13px;


    cursor:pointer;

}







/* ======================================================
   SEARCH INPUT
====================================================== */


.desktop-search input{


    flex:1;


    height:100%;


    border:none;


    outline:none;


    padding:

    0 18px;


    font-size:14px;


    color:#111827;


}



.desktop-search input::placeholder{


    color:#9ca3af;


}






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


.desktop-search button{


    width:60px;


    height:100%;


    border:none;


    background:#e60000;


    color:white;


    cursor:pointer;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:18px;


    transition:.25s ease;


}



.desktop-search button:hover{


    background:#c40000;


}



.desktop-search button:active{


    transform:scale(.96);


}







/* ======================================================
   SEARCH DROPDOWN
====================================================== */


.search-dropdown{


    position:absolute;


    top:58px;


    left:0;


    width:100%;


    background:white;


    border-radius:14px;


    box-shadow:


    0 15px 40px rgba(0,0,0,.15);


    overflow:hidden;


    z-index:2000;


    display:none;


}





.desktop-search:focus-within 
.search-dropdown{


    display:block;


}






/* ======================================================
   SEARCH LOADING
====================================================== */


.search-loading{


    display:none;


    align-items:center;


    gap:10px;


    padding:18px;


    color:#6b7280;


    font-size:14px;


}



.search-loading i{


    color:#e60000;


}






/* ======================================================
   SEARCH RESULTS
====================================================== */


.search-results{


    max-height:350px;


    overflow-y:auto;


}



.search-result-item{


    display:flex;


    align-items:center;


    gap:15px;


    padding:12px 18px;


    border-bottom:1px solid #f1f5f9;


    cursor:pointer;


    transition:.2s;


}



.search-result-item:hover{


    background:#f8fafc;


}



.search-result-item img{


    width:45px;


    height:45px;


    object-fit:cover;


    border-radius:8px;


}



.search-result-title{


    font-size:14px;


    font-weight:600;


    color:#111827;


}



.search-result-price{


    font-size:13px;


    color:#e60000;


    font-weight:700;


}






/* ======================================================
   EMPTY SEARCH
====================================================== */


.search-empty{


    padding:25px;


    text-align:center;


    color:#6b7280;


    font-size:14px;


}



.search-empty i{


    display:block;


    font-size:30px;


    margin-bottom:10px;


    color:#d1d5db;


}







/* ======================================================
   TRENDING SEARCHES
====================================================== */


.search-trending{


    padding:15px 18px;


    border-top:1px solid #eeeeee;


    display:flex;


    align-items:center;


    gap:10px;


    flex-wrap:wrap;


}



.search-trending strong{


    font-size:13px;


    color:#111827;


}



.search-trending a{


    padding:5px 12px;


    background:#f1f5f9;


    border-radius:20px;


    color:#374151;


    font-size:12px;


    transition:.2s;


}



.search-trending a:hover{


    background:#0b1f3a;


    color:white;


}







/* ======================================================
   SEARCH ICON MOBILE
====================================================== */


.mobile-search{


    display:flex;


    width:100%;


    height:44px;


    border-radius:25px;


    overflow:hidden;


    background:#f8fafc;


    border:1px solid #e5e7eb;


}



.mobile-search input{


    flex:1;


    border:none;


    outline:none;


    padding:0 15px;


    background:transparent;


}



.mobile-search button{


    width:50px;


    border:none;


    background:#0b1f3a;


    color:white;


}







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


@media(max-width:1200px){


    .desktop-search{


        max-width:none;


    }



    .search-category{


        width:130px;


    }


}





@media(max-width:992px){


    .desktop-search{


        display:none;


    }


}





@media(max-width:480px){


    .mobile-search{


        height:42px;


    }


}