/* ==========================================================
   IDEYFINDHOUSE
   TRENDING PROPERTIES PAGE
========================================================== */

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

/* ==========================================================
   PAGE
========================================================== */

.trending-page{

    width:100%;

    padding:35px 0 70px;

    background:#f7f8fb;

    min-height:100vh;

}

.trending-page .container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:0 18px;

}

/* ==========================================================
   HEADER
========================================================== */

.trending-page-header{

    margin-bottom:28px;

}

.trending-page-header h1{

    margin:0;

    color:#1f2937;

    font-size:34px;

    font-weight:700;

    line-height:1.2;

}

.trending-page-header p{

    margin:10px 0 0;

    color:#6b7280;

    font-size:16px;

    line-height:1.6;

    max-width:700px;

}

/* ==========================================================
   FILTER PANEL
========================================================== */

.trending-filter-form{

    background:#ffffff;

    border-radius:18px;

    padding:22px;

    margin-bottom:22px;

    border:1px solid #ececec;

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

}

/* ==========================================================
   FILTER GRID
========================================================== */

.filter-grid{

    display:grid;

    grid-template-columns:

        2fr

        1fr

        1fr

        auto;

    gap:15px;

    align-items:center;

}

.filter-group{

    width:100%;

}

/* ==========================================================
   INPUTS
========================================================== */

.filter-control{

    width:100%;

    height:52px;

    border:1px solid #d8dde6;

    border-radius:12px;

    padding:0 16px;

    background:#fff;

    color:#222;

    font-size:15px;

    transition:.25s;

    outline:none;

}

.filter-control:focus{

    border-color:#198754;

    box-shadow:

        0 0 0 3px

        rgba(25,135,84,.12);

}

/* ==========================================================
   PLACEHOLDER
========================================================== */

.filter-control::placeholder{

    color:#9aa3af;

}

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

select.filter-control{

    cursor:pointer;

}

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

.filter-button{

    height:52px;

    padding:0 24px;

    border:none;

    border-radius:12px;

    background:#198754;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    white-space:nowrap;

}

.filter-button:hover{

    background:#157347;

}

.filter-button:active{

    transform:scale(.98);

}

/* ==========================================================
   RESULTS BAR
========================================================== */

.results-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:25px 0;

    color:#555;

    font-size:15px;

}

.results-bar strong{

    color:#198754;

    font-size:18px;

    margin-right:6px;

}

/* ==========================================================
   FILTER SUMMARY
========================================================== */

.filter-summary{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:12px;

}

.filter-chip{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:20px;

    background:#eef8f2;

    color:#198754;

    font-size:13px;

    font-weight:600;

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .filter-grid{

        grid-template-columns:

            1fr

            1fr;

    }

}

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

@media (max-width:768px){

    .trending-page{

        padding:22px 0 50px;

    }

    .trending-page-header h1{

        font-size:28px;

    }

    .trending-page-header p{

        font-size:15px;

    }

    .trending-filter-form{

        padding:16px;

    }

    .filter-grid{

        grid-template-columns:1fr;

    }

    .filter-button{

        width:100%;

    }

    .results-bar{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .trending-page .container{

        padding:0 12px;

    }

    .trending-page-header h1{

        font-size:24px;

    }

    .filter-control{

        height:48px;

    }

    .filter-button{

        height:48px;

    }

}

.trending-filter-form{

    position:sticky;

    top:20px;

    z-index:40;

}

.search-group{

    position:relative;

}

.search-icon{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    pointer-events:none;

    font-size:16px;

    color:#777;

}

.search-control{

    padding-left:48px;

}

.clear-filter{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:22px;

    background:#dc3545;

    color:#fff;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    transition:.25s;

}

.clear-filter:hover{

    background:#bb2d3b;

}

.results-right{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    align-items:center;

}

.btn-spinner{

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   DISCOVERY TOOLBAR
========================================================== */

.discover-toolbar{

    display:grid;

    grid-template-columns:2.2fr 1fr 1fr 1fr auto;

    gap:14px;

    align-items:center;

}

.toolbar-search,
.toolbar-select{

    position:relative;

}

.toolbar-icon{

    position:absolute;

    left:15px;

    top:50%;

    transform:translateY(-50%);

    font-size:15px;

    pointer-events:none;

    color:#6c757d;

    z-index:2;

}

.toolbar-input,
.toolbar-control{

    width:100%;

    height:54px;

    padding:0 16px 0 46px;

    border:1px solid #d9dee5;

    border-radius:14px;

    background:#ffffff;

    font-size:15px;

    color:#212529;

    transition:all .25s ease;

    outline:none;

}

.toolbar-control{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

}

.toolbar-input:focus,
.toolbar-control:focus{

    border-color:#198754;

    box-shadow:0 0 0 4px rgba(25,135,84,.12);

}

.toolbar-input::placeholder{

    color:#9aa3af;

}

.discover-search-btn{

    height:54px;

    padding:0 26px;

    border:none;

    border-radius:14px;

    background:#198754;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

    white-space:nowrap;

}

.discover-search-btn:hover{

    background:#157347;

    transform:translateY(-2px);

}

.discover-search-btn:active{

    transform:translateY(0);

}

/* ==========================================================
   BOTTOM BAR
========================================================== */

.discover-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

    padding-top:16px;

    border-top:1px solid #eceff3;

}

.discover-count{

    color:#495057;

    font-size:15px;

}

.discover-count strong{

    color:#198754;

    font-size:19px;

}

.discover-clear{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 16px;

    border-radius:30px;

    background:#fff3f3;

    border:1px solid #ffd5d5;

    color:#dc3545;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.discover-clear:hover{

    background:#dc3545;

    color:#fff;

}

/* ==========================================================
   STICKY FILTER BAR
========================================================== */

.trending-filter-form{

    position:sticky;

    top:85px;

    z-index:100;

    backdrop-filter:blur(10px);

}

/* ==========================================================
   HOVER EFFECTS
========================================================== */

.toolbar-search:hover,
.toolbar-select:hover{

    transform:translateY(-1px);

    transition:.2s;

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1200px){

    .discover-toolbar{

        grid-template-columns:1fr 1fr;

    }

    .discover-search-btn{

        width:100%;

    }

}

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

@media (max-width:768px){

    .discover-toolbar{

        grid-template-columns:1fr;

    }

    .discover-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

    }

    .discover-clear{

        width:100%;

        justify-content:center;

    }

    .toolbar-input,
    .toolbar-control,
    .discover-search-btn{

        height:50px;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .trending-filter-form{

        padding:15px;

    }

    .toolbar-input,
    .toolbar-control{

        font-size:14px;

    }

}

.toolbar-svg{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    width:18px;

    height:18px;

    fill:#6c757d;

    pointer-events:none;

    transition:.25s;

}

.toolbar-search:focus-within .toolbar-svg,
.toolbar-select:focus-within .toolbar-svg{

    fill:#198754;

}

.card-icon{

    width:16px;

    height:16px;

    fill:currentColor;

    vertical-align:middle;

    flex-shrink:0;

}

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

.discover-search-btn.loading{

    opacity:.85;

    pointer-events:none;

}

.spinner{

    width:16px;

    height:16px;

    margin-right:8px;

    border:2px solid rgba(255,255,255,.35);

    border-top:2px solid #fff;

    border-radius:50%;

    display:inline-block;

    animation:spin .7s linear infinite;

    vertical-align:middle;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


#trendingResults.loading{

    opacity:.55;

    transition:.25s;

    pointer-events:none;

}

#trendingResults{

    transition:

        opacity .25s ease;

}