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

.header{

    padding:40px 0;
}

.header-top{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:24px;

    flex-wrap:wrap;
}

.header-badge{

    display:inline-flex;

    padding:8px 14px;

    border-radius:999px;

    background:#eff6ff;

    color:var(--primary);

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;
}

.header-title{

    font-size:52px;

    line-height:1.1;

    margin-bottom:16px;
}

.header-text{

    max-width:620px;

    line-height:1.9;

    color:var(--text-light);
}


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

.header-search{

    width:100%;

    max-width:500px;

    margin-top:24px;
}

.header-search input{

    width:100%;

    height:54px;

    padding:0 18px;

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

    border-radius:18px;

    outline:none;

    background:white;

    font-size:14px;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);
}

.header-search input:focus{

    border-color:var(--primary);
}


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

.filter-section{

    padding-bottom:38px;
}

.filter-toolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    flex-wrap:wrap;
}

.filter-group{

    display:flex;

    gap:12px;

    display:flex;
    flex-wrap:nowrap;
    width:480px;
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:thin;
}

.filter-group::-webkit-scrollbar{
    height:6px;
}

.filter-group::-webkit-scrollbar-thumb{
    background:var(--border);
    border-radius:999px;
}

.filter-group .filter-btn{
    flex-shrink:0;
    white-space:nowrap;
}


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

.filter-btn{

    height:46px;

    padding:0 18px;

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

    border-radius:999px;

    background:white;

    font-size:14px;

    font-weight:500;

    cursor:pointer;

    transition:var(--transition);
}

.filter-btn:hover{

    border-color:var(--primary);

    color:var(--primary);
}

.filter-btn.active{

    background:var(--primary);

    border-color:var(--primary);

    color:white;
}


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

.filter-select{

    min-width:220px;
}

.filter-select select{

    width:100%;

    height:46px;

    padding:0 16px;

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

    border-radius:14px;

    outline:none;

    background:white;

    font-size:14px;

    cursor:pointer;

    transition:var(--transition);
}

.filter-select select:focus{

    border-color:var(--primary);
}


/* =========================================================
   STATS
========================================================= */

.stats{

    display:grid;

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

    gap:20px;

    margin:30px 0;
}

.stat{

    background:white;

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

    border-radius:20px;

    padding:22px;

    box-shadow:var(--shadow);
}

.stat h3{

    font-size:30px;

    margin-bottom:6px;
}

.stat p{

    color:var(--text-light);

    font-size:14px;
}