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

.listings-page {

    padding:
        4rem 1.5rem 6rem;

    background:
        #ffffff;

}

/* =====================================
   HERO
===================================== */

.page-hero {

    padding:
        180px 1rem 1rem;

    background:
        linear-gradient(
            180deg,
            #f4f5f8 0%,
            #ffffff 100%
        );

}

.page-hero-inner {

    max-width:
        760px;

    margin:
        0 auto;

    text-align:
        center;

}

.page-hero h1 {

    margin:
        0 0 .8rem;

    font-size:
        clamp(
            2.2rem,
            7vw,
            4rem
        );

    font-weight:
        800;

    color:
        #08153f;

    line-height:
        1.05;

}

.page-hero p {

    margin:
        0;

    font-size:
        1.1rem;

    color:
        #6b7280;

    line-height:
        1.7;

    max-width:
        620px;

    margin-inline:
        auto;

}

/* =====================================
   FILTERS
===================================== */

.listing-filters {

    max-width:
        1180px;

    margin:
        0 auto 3rem;

    padding:
        2rem;

    background:
        #ffffff;

    border-radius:
        20px;

    box-shadow:
        0 12px 35px rgba(
            0,
            0,
            0,
            .05
        );

}

.filters-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1rem;

}

.filter-grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        18px;

}

.advanced-filters {

    display:
        none;

    margin-top:
        1rem;

    gap:
        18px;

}

.advanced-filters.open {

    display:
        grid;

}

fieldset {

    margin:
        0;

    padding:
        0;

    border:
        1px solid #d9d9d9;

    border-radius:
        14px;

    background:
        white;

}

legend {

    margin-left:
        14px;

    padding:
        0 8px;

    font-size:
        .9rem;

    color:
        #555;

    font-weight:
        600;

}

fieldset input,
fieldset select {

    width:
        100%;

    height:
        50px;

    border:
        none;

    outline:
        none;

    background:
        transparent;

    padding:
        0 18px;

    font-size:
        1rem;

}

.range-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;

}

.range-row input {

    border-right:
        1px solid #ececec;

}

.range-row input:last-child {

    border-right:
        none;

}

/* =====================================
   ACTIONS
===================================== */

.filters-actions {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        1rem;

}

.search-button {

    width:
        100%;

    height:
        64px;

    border:
        none;

    border-radius:
        10px;

    background:
        #d63b3b;

    color:
        #ffffff;

    font-size:
        1.15rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        .2s ease;

}

.search-button:hover {

    background:
        #c52f2f;

}

.search-button:active {

    transform:
        scale(
            .99
        );

}

.more-filters {

    background:
        transparent;

    border:
        none;

    padding:
        0;

    color:
        #d63b3b;

    font-size:
        1rem;

    font-weight:
        700;

    cursor:
        pointer;

}

.more-filters:hover {

    opacity:
        .8;

}

.featured-toggle {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    font-size:
        1rem;

}

.featured-toggle input {

    width:
        22px;

    height:
        22px;

    accent-color:
        #d63b3b;

}

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

.listing-grid {

    max-width:
        1180px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                320px,
                1fr
            )
        );

    gap:
        2rem;

}

/* =====================================
   CARD
===================================== */

.card {

    display:
        block;

    background:
        white;

    border-radius:
        28px;

    overflow:
        hidden;

    text-decoration:
        none;

    color:
        #111827;

    box-shadow:
        0 18px 45px rgba(
            0,
            0,
            0,
            .08
        );

    transition:
        .25s;

}

.card:hover {

    transform:
        translateY(
            -6px
        );

}

.card-image {

    position:
        relative;

    height:
        300px;

}

.card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}

.listing-badge {

    position:
        absolute;

    top:
        22px;

    padding:
        8px 22px;

    border-radius:
        999px;

    font-size:
        .88rem;

    font-weight:
        700;

}

.featured {

    left:
        22px;

    background:
        rgba(
            8,
            21,
            63,
            .95
        );

    color:
        white;

}

.body-type {

    right:
        22px;

    background:

        rgba(
            194,
            58,
            71,
            .82
        );

    color:
        #ffffff;

    backdrop-filter:
        blur(
            10px
        );

}

.featured-price,
.listing-price{

position:absolute;

left:0;

right:0;

bottom:0;


padding:

12px
24px
10px;

background:

linear-gradient(

180deg,

rgba(
0,
0,
0,
0
)

0%,

rgba(
8,
20,
60,
.22
)

45%,

rgba(
8,
20,
60,
.88
)

100%

);

color:#fff;

font-size:2.15rem;

font-weight:800;

letter-spacing:-.03em;

text-align:center;

backdrop-filter:

blur(
6px
);

border-radius:0;

box-shadow:none;

line-height:1;

}

.card-body {

    padding:
        2rem;

}

.card-body h3 {

    margin:
        0;

    font-size:
        2rem;

}

.card-meta,
.price,
.type-badge,
.type-car,
.type-estate,
.type-default {

    display:
        none;

}


/* =====================================
   CARD META
===================================== */

.listing-meta{

margin-top:14px;

display:flex;

justify-content:space-between;

align-items:center;

gap:10px;

width:100%;

font-size:.88rem;

color:#c23a47;

font-weight:500;

}

.listing-meta span{

flex:1;

text-align:center;

white-space:nowrap;

}

.listing-meta span:first-child{

text-align:left;

}

.listing-meta span:last-child{

text-align:right;

}



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

@media (
max-width:768px
) {

.listings-page {

padding:
2rem 1rem 4rem;

}

.page-hero {

padding:
140px 1rem 1rem;

}

.page-hero h1 {

font-size:
2.6rem;

}

.page-hero p {

font-size:
1rem;

line-height:
1.6;

}

.listing-filters {

padding:
1.5rem;

border-radius:
18px;

}

fieldset input,
fieldset select {

height:
44px;

}

.range-row {

grid-template-columns:
1fr 1fr;

}

.listing-grid {

grid-template-columns:
1fr;

}

.card-image {

height:
250px;

}

.card-body {

padding:
1.5rem;

}

.card-body h3 {

font-size:
1.2rem;

}

.listing-price {

font-size:
1rem;

padding:
12px 18px;

}

}