/* =========================================
   VRChatCustom 2.0
   Filters & Search Styles
========================================= */



/* ===============================
   FILTER CONTAINER
========================================= */


.filters {


    width:

    100%;



    display:

    flex;



    align-items:

    center;



    justify-content:

    space-between;



    gap:

    20px;



    margin-bottom:

    50px;



    padding:

    25px;



    background:

    var(--glass-bg);



    border:

    1px solid var(--glass-border);



    border-radius:

    var(--radius-large);



    backdrop-filter:

    blur(20px);



}







/* ===============================
   SEARCH BOX
========================================= */


.filters input {


    flex:

    1;



    height:

    55px;



    padding:

    0 25px;



    border-radius:

    var(--radius-full);



    background:

    rgba(
        255,
        255,
        255,
        .05
    );



    border:

    1px solid var(--border);



    color:

    var(--text-primary);



    font-size:

    15px;



    transition:

    var(--transition-normal);



}







.filters input::placeholder {


    color:

    var(--text-muted);



}







.filters input:focus {


    border-color:

    var(--primary);



    box-shadow:

    0 0 25px
    rgba(
        0,
        245,
        212,
        .15
    );



}








/* ===============================
   SELECT DROPDOWN
================================ */


.filters select {


    height:

    55px;



    min-width:

    220px;



    padding:

    0 25px;



    border-radius:

    var(--radius-full);



    background:

    rgba(
        255,
        255,
        255,
        .05
    );



    border:

    1px solid var(--border);



    color:

    var(--text-primary);



    font-size:

    15px;



    cursor:

    pointer;



    transition:

    var(--transition-normal);



}







.filters select:hover {


    border-color:

    var(--primary);



}







.filters select option {


    background:

    var(--bg-secondary);



    color:

    white;



}








/* ===============================
   CATEGORY FILTER BUTTONS
================================ */


.category-filter {


    display:

    flex;



    flex-wrap:

    wrap;



    gap:

    12px;



    margin-bottom:

    35px;



}







.category-filter button {


    padding:

    10px 20px;



    border-radius:

    var(--radius-full);



    background:

    rgba(
        255,
        255,
        255,
        .05
    );



    border:

    1px solid var(--border);



    color:

    var(--text-secondary);



    font-size:

    14px;



    font-weight:

    600;



    transition:

    var(--transition-normal);



}







.category-filter button:hover {


    color:

    var(--primary);



    border-color:

    var(--primary);



    box-shadow:

    var(--shadow-glow);



}








.category-filter button.active {


    background:

    rgba(
        0,
        245,
        212,
        .12
    );



    color:

    var(--primary);



    border-color:

    var(--primary);



}







/* ===============================
   SORT AREA
================================ */


.sort-area {


    display:

    flex;



    align-items:

    center;



    gap:

    15px;



    color:

    var(--text-secondary);



    font-size:

    14px;



}







.sort-area span {


    color:

    var(--text-muted);



}







/* ===============================
   RESULT COUNT
================================ */


.result-count {


    margin-top:

    25px;



    margin-bottom:

    30px;



    color:

    var(--text-secondary);



    font-size:

    14px;



}







.result-count strong {


    color:

    var(--primary);



}







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


.search-wrapper {


    position:

    relative;



    flex:

    1;



}







.search-wrapper::before {


    content:

    "🔍";



    position:

    absolute;



    right:

    25px;



    top:

    50%;



    transform:

    translateY(-50%);



    opacity:

    .6;



}







/* ===============================
   NO RESULTS
================================ */


.no-results {


    width:

    100%;



    padding:

    80px 20px;



    text-align:

    center;



    color:

    var(--text-secondary);



}







.no-results h3 {


    font-family:

    var(--font-title);



    font-size:

    28px;



    color:

    white;



    margin-bottom:

    15px;



}