/* ========================================
   Smart Agency Map
   Frontend
======================================== */
@font-face{

    font-family:'Peyda';

    src:url('../fonts/PeydaWeb-Regular.woff2') format('woff2');

    font-weight:400;

    font-style:normal;

    font-display:swap;

}
.sam-page,
.sam-page *,
.sam-map-card,
.sam-sidebar,
.sam-result-card{

    font-family:'Peyda',sans-serif;

}
:root{

    --primary:#14583E;
    --primary-dark:#0f4632;

    --text:#222;
    --muted:#888;

    --border:#e7e7e7;

    --bg:#f5f7fb;

    --card:#ffffff;

    --shadow:0 10px 30px rgba(0,0,0,.06);

    --radius:18px;

}

*{
    box-sizing:border-box;
}

body{

    background:var(--bg);

}

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

.sam-page{

    max-width:1450px;

    margin:auto;

    padding:40px 25px;

}

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

.sam-search{

    position:relative;

    margin-bottom:30px;

}

.sam-search svg{

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    color:#888;

}

.sam-search input{

    width:100% !important;

    height:62px !important;

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

    border-radius:18px !important;

    background:#fff !important;

    padding:0 60px 0 20px !important;

    font-size:15px !important;

    outline:none !important;

    transition:.25s !important;

}

.sam-search input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(20,88,62,.08);

}

/*======================================
MAIN
======================================*/

.sam-main{

    display:grid;

    grid-template-columns:1fr 500px;

    gap:25px;

    align-items:stretch;

}

/*======================================
MAP
======================================*/

.sam-map-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

    border:1px solid #ececec;

}

.sam-map svg{

    width:100%;

    height:auto;

}

/* رنگ پیشفرض استان ها */

.land{

    fill:#d9d9d9 !important;

    stroke:#222 !important;

    stroke-width:.8;

    cursor:pointer;

    transition:.25s ease;

}

/* استان دارای نمایندگی */

.land.has-agency{

    fill:#ed2024 !important;

}

/* استان انتخاب شده */

.land.active{

    fill:#14583E !important;

}

/* هاور */

.land:hover{

    opacity:.85;

}

/*======================================
SIDEBAR
======================================*/

.sam-sidebar{

    background:#fff;

    border-radius:20px;

    padding:25px;

    box-shadow:var(--shadow);

    border:1px solid #ececec;

    height:100%;

}

.sam-sidebar h3{

    font-size:20px;

    margin-bottom:18px;

}

.sam-province-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}

.sam-province{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding:12px 14px;

    border-radius:14px;

    cursor:pointer;

    transition:.25s ease;

    font-size:13px;

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

    backdrop-filter:blur(12px);

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

    border:1px solid rgba(0,0,0,.08);

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

}

.sam-province:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 20px rgba(0,0,0,.08);

    border-color:#ed2024;

}

.sam-province:last-child{

    border:none;

}

.sam-province span:first-child{

    font-size:17px;

}

/* دایره سمت چپ */

.sam-province .dot{

    width:10px;

    height:10px;

    border-radius:50%;

}

/* استان دارای نمایندگی */

.sam-province.has-agency .dot{

    background:#ed2024;

}

.sam-province.no-agency .dot{

    background:#d9d9d9;

}

.sam-province.active .dot{

    background:#fff;

}

/* استان انتخاب شده */

.sam-province.active{

    background:#ed2024;

    color:#fff;

    border-color:#ed2024;

    box-shadow:0 12px 24px rgba(237,32,36,.25);

}

.sam-province .dot{

    width:10px;

    height:10px;

    border-radius:50%;

    flex-shrink:0;

    transition:.25s;

}

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

.sam-result-card{

    margin-top:30px;

    background:#fff;

    border-radius:20px;

    padding:30px;

    box-shadow:var(--shadow);

}

.sam-result-header{

    margin-bottom:25px;

}

.sam-result-header h2{

    margin:0;

    font-size:26px;

}

.sam-result-header p{

    margin-top:8px;

    color:#777;

}

.sam-empty{

    padding:80px 20px;

    text-align:center;

    color:#888;

}

/*======================================
CARDS
======================================*/

.sam-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:25px;

}

.sam-card{

    background:#fff;

    border:1px solid #eee;

    border-radius:16px;

    padding:25px;

    transition:.25s;

}

.sam-card:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.sam-card h3{

    margin-top:0;

}

.sam-more{

    display:inline-block;

    margin-top:18px;

    color:#fff;

    background:var(--primary);

    padding:10px 20px;

    border-radius:8px;

    text-decoration:none;

}

.sam-more:hover{

    background:var(--primary-dark);

}

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

@media(max-width:992px){

.sam-main{

grid-template-columns:1fr;

}

.sam-sidebar{

order:-1;

}

}

@media(max-width:768px){

.sam-page{

padding:20px;

}

.sam-search input{

height:54px;

}

}