body{
    background:#f7f9fc;
    -webkit-font-smoothing:antialiased;
}

.marketplace-page{

    max-width:1400px;

    margin:auto;

}

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

/* Full-bleed background: breaks .market-hero out of the centered
   1400px container so the gradient spans the full viewport width
   instead of appearing as a boxed rectangle with white side gutters. */
.market-hero{
    width:100vw;
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;

    padding:56px 24px 44px;
    text-align:center;
    background:
        radial-gradient(120% 140% at 50% 0%, #eef4ff 0%, #f7f9fc 55%, #f7f9fc 100%);
}

.market-hero-content{
    max-width:780px;
    margin:auto;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    background:#eef4ff;
    color:#2563eb;
    padding:.6rem 1.3rem;
    border-radius:999px;
    font-weight:600;
    font-size:.9rem;
    letter-spacing:.01em;
    margin-bottom:20px;
    box-shadow:
        0 1px 2px rgba(37,99,235,.06),
        0 1px 1px rgba(15,23,42,.03);
    transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, background .28s ease;
}

.hero-badge:hover{
    transform:translateY(-3px);
    background:#e2ecff;
    box-shadow:
        0 12px 28px rgba(37,99,235,.16),
        0 2px 6px rgba(37,99,235,.08);
}

.hero-badge::before{
    content:"";
    width:16px;
    height:16px;
    flex:0 0 auto;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size:contain;
    background-repeat:no-repeat;
}

.market-hero h1{
    font-size:clamp(2.5rem,4.6vw,3.75rem);
    font-weight:800;
    letter-spacing:-.025em;
    line-height:1.06;
    color:#0f172a;
    margin-bottom:16px;
}

.market-hero p{
    color:#64748b;
    font-size:1.12rem;
    line-height:1.65;
    max-width:600px;
    margin:auto;
    font-weight:400;
    letter-spacing:-.003em;
}

/* ============ HERO SEARCH (single search bar, floating card) ============ */

.hero-search{
    position:relative;
    margin:32px auto 0;
    max-width:800px;

    display:flex;
    align-items:center;
    gap:10px;

    background:#fff;
    border-radius:22px;
    padding:9px;
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 12px 28px rgba(15,23,42,.06),
        0 24px 56px rgba(15,23,42,.09);
    border:1px solid rgba(15,23,42,.04);
    transition:box-shadow .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}

.hero-search:hover{
    transform:translateY(-2px);
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 16px 34px rgba(15,23,42,.08),
        0 30px 64px rgba(15,23,42,.10);
}

.hero-search:focus-within{
    transform:translateY(-3px);
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 16px 34px rgba(37,99,235,.14),
        0 32px 68px rgba(37,99,235,.18);
}

.hero-search input{

    flex:1;

    height:58px;

    border-radius:14px;

    border:none;

    background:transparent;

    padding:0 22px 0 50px;

    font-size:16px;

    font-weight:450;

    color:#0f172a;

    letter-spacing:-.005em;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:18px center;
    background-size:20px 20px;

    transition:background-color .25s ease;
}

.hero-search input::placeholder{
    color:#94a3b8;
    font-weight:400;
}

.hero-search input:hover{
    background-color:#f8fafc;
}

.hero-search input:focus{

    outline:none;

    background-color:#f8fafc;

}

.hero-search button{

    border:none;

    height:58px;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

    border-radius:14px;

    padding:0 34px;

    font-size:15px;

    font-weight:700;

    letter-spacing:.01em;

    flex:0 0 auto;

    box-shadow:
        0 6px 16px rgba(37,99,235,.26),
        0 2px 4px rgba(37,99,235,.14);

    transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s ease;
}

.hero-search button:hover{

    transform:translateY(-2px);

    background:linear-gradient(135deg,#1d4ed8,#1e40af);

    box-shadow:
        0 10px 24px rgba(37,99,235,.34),
        0 3px 8px rgba(37,99,235,.18);

}

.hero-search button:active{

    transform:translateY(0);

}

/* ============ HERO STATS (premium stat cards) ============ */

.hero-stats{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:20px;

    margin-top:36px;

    flex-wrap:wrap;

}

.hero-stats div{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-width:140px;

    padding:20px 30px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.6);

    border-radius:18px;

    box-shadow:
        0 1px 2px rgba(15,23,42,.03),
        0 10px 26px rgba(15,23,42,.06);

    transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease;

}

.hero-stats div:hover{

    transform:translateY(-6px);

    background:#fff;

    box-shadow:
        0 2px 4px rgba(15,23,42,.04),
        0 20px 44px rgba(15,23,42,.11);

}

.hero-stats strong{

    font-size:1.65rem;

    font-weight:800;

    letter-spacing:-.02em;

    line-height:1;

    color:#0f172a;

}

.hero-stats span{

    color:#64748b;

    font-size:.82rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.05em;

}

/* ============ LAYOUT ============ */

.marketplace-layout{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:40px;

    align-items:start;

    padding:36px 24px 60px;

}

/* ============ SIDEBAR (premium, sticky) ============ */

.filter-sidebar{

    background:#fff;

    border-radius:24px;

    padding:30px 28px;

    box-shadow:
        0 1px 2px rgba(15,23,42,.03),
        0 4px 12px rgba(15,23,42,.03),
        0 20px 48px rgba(15,23,42,.07);

    border:1px solid rgba(15,23,42,.04);

    position:sticky;

    top:24px;

    transition:box-shadow .3s ease;

}

.filter-sidebar h2{

    font-size:1.5rem;

    font-weight:800;

    color:#0f172a;

    letter-spacing:-.015em;

    margin-bottom:22px;

}

.filter-sidebar form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.filter-sidebar label{

    display:flex;

    flex-direction:column;

    gap:9px;

    font-size:.8rem;

    font-weight:700;

    color:#475569;

    text-transform:uppercase;

    letter-spacing:.045em;

}

.filter-sidebar select,
.filter-sidebar input[type="number"],
.filter-sidebar input[type="text"]{

    height:48px;

    border-radius:13px;

    border:1.5px solid #e2e8f0;

    background:#f8fafc;

    padding:0 16px;

    font-size:15px;

    font-weight:500;

    text-transform:none;

    letter-spacing:normal;

    color:#0f172a;

    transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease, transform .22s ease;

}

.filter-sidebar select:hover,
.filter-sidebar input[type="number"]:hover,
.filter-sidebar input[type="text"]:hover{

    border-color:#cbd5e1;

    background:#fff;

}

.filter-sidebar select:focus,
.filter-sidebar input[type="number"]:focus,
.filter-sidebar input[type="text"]:focus{

    outline:none;

    border-color:#2563eb;

    background:#fff;

    box-shadow:0 0 0 4px rgba(37,99,235,.13);

}
.filter-sidebar .range-fields{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.filter-sidebar .range-fields label{
    min-width:0;
}

.filter-sidebar .range-fields input{
    width:100%;
    max-width:100%;
    box-sizing:border-box;

}

.filter-sidebar .button{

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    border-radius:13px;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

    border:none;

    font-weight:700;

    font-size:15px;

    text-transform:none;

    letter-spacing:normal;

    box-shadow:
        0 6px 16px rgba(37,99,235,.22),
        0 2px 4px rgba(37,99,235,.12);

    transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;

    margin-top:2px;

    cursor:pointer;

}

.filter-sidebar .button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 22px rgba(37,99,235,.3),
        0 3px 8px rgba(37,99,235,.16);

}

.filter-sidebar .button:active{

    transform:translateY(0);

}

.filter-sidebar .clear-filters{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:50px;

    border-radius:13px;

    border:1.5px solid #e2e8f0;

    background:#fff;

    color:#334155;

    font-weight:700;

    font-size:15px;

    text-decoration:none;

    text-transform:none;

    letter-spacing:normal;

    transition:.25s cubic-bezier(.16,1,.3,1);

}

.filter-sidebar .clear-filters:hover{

    border-color:#94a3b8;

    background:#f8fafc;

    transform:translateY(-2px);

    box-shadow:0 6px 16px rgba(15,23,42,.06);

}

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

.market-results{
    min-width:0;
}


.results-bar{

    margin-bottom:18px;

    color:#475569;

    font-size:1rem;

}

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

.market-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(390px,1fr));
    gap:30px;
}

.market-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 1px 2px rgba(15,23,42,.03),
        0 10px 30px rgba(15,23,42,.07);

    transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1);

}

.market-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 2px 4px rgba(15,23,42,.04),
        0 24px 50px rgba(15,23,42,.14);

}

.market-card-image{

    position:relative;

    display:block;

    height:250px;

    overflow:hidden;

    isolation:isolate;

}

.market-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s cubic-bezier(.16,1,.3,1);

}

.market-card:hover img{

    transform:scale(1.08);

}

.favorite-btn{

    position:absolute;

    top:16px;

    right:16px;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:white;

    box-shadow:
        0 2px 4px rgba(0,0,0,.06),
        0 6px 18px rgba(0,0,0,.14);

    cursor:pointer;

    transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;

}

.favorite-btn:hover{

    transform:scale(1.1);

    box-shadow:
        0 3px 6px rgba(0,0,0,.08),
        0 10px 24px rgba(0,0,0,.18);

}

.market-card-image .availability{

    position:absolute !important;

    left:16px;

    bottom:16px;

    top:auto;

    right:auto;

    display:inline-flex !important;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    align-self:flex-start;

    width:auto !important;

    height:auto !important;

    min-width:0;

    max-width:none;

    white-space:nowrap;

    line-height:1;

    writing-mode:horizontal-tb !important;

    text-orientation:mixed;

    background:#10b981;

    color:#fff;

    padding:7px 13px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.01em;

    box-shadow:
        0 2px 4px rgba(16,185,129,.18),
        0 6px 16px rgba(16,185,129,.28);

}

.market-card-body{

    padding:22px;

}

.market-card-body h2{

    font-size:1.4rem;

    font-weight:700;

    letter-spacing:-.01em;

    margin-bottom:6px;

}

.vehicle-meta{

    color:#64748b;

    font-size:.94rem;

    margin-bottom:14px;

}

.card-location{

    display:flex;

    align-items:center;

    gap:8px;

    color:#475569;

    font-size:.94rem;

    margin-bottom:18px;

}

.vehicle-specs{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:20px;

}

.vehicle-specs span{

    background:#f8fafc;

    border:1px solid #eef2f7;

    padding:7px 13px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:500;

    color:#334155;

    transition:background-color .2s ease, border-color .2s ease;

}

.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:16px;

    border-top:1px solid #f1f5f9;

}

.price strong{

    font-size:1.5rem;

    font-weight:800;

    letter-spacing:-.01em;

    color:#0f172a;

}

.details-btn{

    background:#2563eb;

    color:white;

    text-decoration:none;

    padding:11px 20px;

    border-radius:13px;

    font-weight:600;

    font-size:.94rem;

    box-shadow:
        0 4px 10px rgba(37,99,235,.2),
        0 1px 3px rgba(37,99,235,.12);

    transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s ease;

}

.details-btn:hover{

    background:#1d4ed8;

    color:white;

    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(37,99,235,.28),
        0 2px 5px rgba(37,99,235,.16);

}

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

@media (max-width:1024px){

    .marketplace-layout{
        grid-template-columns:1fr;
        gap:24px;
        padding:28px 20px 52px;
    }

    .filter-sidebar{
        position:static;
        top:auto;
    }

    .market-card-grid{
        grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
        gap:22px;
    }

    .market-hero{
        padding:44px 20px 36px;
    }

    .hero-stats{
        gap:16px;
    }

    .hero-stats div{
        min-width:120px;
        padding:18px 22px;
    }
}

@media (max-width:640px){

    .market-hero{
        padding:36px 16px 28px;
    }

    .hero-search{
        flex-direction:column;
        border-radius:18px;
        padding:10px;
        margin-top:24px;
    }

    .hero-search input{
        width:100%;
        height:52px;
    }

    .hero-search button{
        width:100%;
        height:52px;
    }

    .hero-stats{
        gap:12px;
        margin-top:28px;
    }

    .hero-stats div{
        flex:1 1 auto;
        min-width:96px;
        padding:16px 14px;
    }

    .hero-stats strong{
        font-size:1.35rem;
    }

    .marketplace-layout{
        gap:18px;
        padding:24px 16px 36px;
    }

    .filter-sidebar{
        padding:22px 18px;
        border-radius:18px;
    }

    .filter-sidebar .range-fields{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .market-card-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .market-card-image{
        height:210px;
    }

    .card-footer{
        flex-wrap:wrap;
        gap:12px;
    }
}