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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#DFE5D7;
    color:#2C3229;

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

    padding:40px 20px;

    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

    user-select:none;
    -webkit-user-drag:none;

}

button,
input{

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

}

button{

    cursor:pointer;
    transition:.25s;

}

button:active{

    transform:scale(.98);

}

::selection{

    background:#C79B45;
    color:#fff;

}

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

.page{

    width:100%;
    max-width:1280px;

    margin:auto;

}

.main-card{
    background:#fff;
    border-radius:34px;
    padding:48px;
    box-shadow:0 25px 70px rgba(25,30,25,.08);

    overflow-x:hidden;
    overflow-y:visible;
}
/* =====================================================
   LOGO
===================================================== */

.logo{

    width:clamp(66px,8vw,94px);

    margin:0 auto 24px;

}

/* =====================================================
   TITLES
===================================================== */

h1{

    text-align:center;

    font-family:'Lalezar';

    font-weight:400;

    color:#263024;

    line-height:1.45;

    font-size:42px;

}

h1 span{

    display:block;

    margin:8px 0;

    color:#C79B45;

    font-size:60px;

}

h1 small{

    display:block;

    font-size:36px;

    font-weight:400;

}

.subtitle{

    text-align:center;

    color:#777;

    font-size:18px;

    margin:

        24px auto 34px;

    max-width:720px;

    line-height:1.9;

}

/* =====================================================
   PROGRESS
===================================================== */

.progress-box{

    max-width:820px;

    margin:26px auto 0;

}

.progress-head{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:18px;

    margin-bottom:20px;

}

.count{

    flex:1;

    text-align:center;

}

.count strong{

    display:block;

    font-family:'Lalezar';

    font-weight:400;

    font-size:46px;

    line-height:1;

    color:#2C3229;

}

.count span{

    display:block;

    margin-top:10px;

    color:#777;

    font-size:15px;

}

.progress{

    height:16px;

    border-radius:999px;

    overflow:hidden;

    background:#ECE9DF;

    box-shadow:

        inset 0 2px 6px rgba(0,0,0,.05);

}

.progress-fill{

    width:0;

    height:100%;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            #D8BA74,

            #C79B45,

            #AE7D26

        );

    transition:.45s;

}

.progress-percent{

    text-align:center;

    margin-top:16px;

    color:#666;

    font-size:16px;

    font-weight:700;

}

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

@media (max-width:768px){

    body{

        padding:18px 12px;

    }

    .main-card{

        padding:26px 18px;

        border-radius:24px;

    }

    h1{

        font-size:20px;

    }

    h1 span{

        font-size:42px;

    }

    h1 small{

        font-size:27px;

    }

    .subtitle{

        font-size:15px;

        margin-bottom:24px;

    }

    .count strong{

        font-size:34px;

    }

    .count span{

        font-size:13px;

    }

    .progress{

        height:14px;

    }

    .progress-percent{

        font-size:15px;

    }

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

.map-wrapper{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:34px auto 28px;

}

.map-wrapper svg{

    display:block;

    width:100%;

    max-width:780px;

    height:auto;

}

/* ---------- استان ها ---------- */

.map-wrapper path{

    fill:#E9E4D7;

    stroke:#C6A760;

    stroke-width:1.15;

    cursor:pointer;

    transition:
        fill .25s ease,
        transform .18s ease;

    transform-origin:center;

}

.map-wrapper path:hover{

    fill:#C79B45;

    transform:translateY(-2px);

}

.map-wrapper path.active{

    fill:#9E6E18;

}

/* ---------- اسم استان ---------- */

.province-label{

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

    font-size:15px;

    font-weight:700;

    fill:#2C3229;

    pointer-events:none;

    user-select:none;

    stroke:none;

    letter-spacing:0;

}
/* ---------- انیمیشن ---------- */

.map-wrapper path,
.province-label{

    transition:.25s;

}

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

@media (max-width:768px){

    .map-wrapper{

        margin:22px auto;

    }

    .map-wrapper svg{

        width:100%;

        max-width:100%;

    }

    .province-label{

        font-size:20px;

        font-weight:800;

        stroke-width:2.3;

    }

}

/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width:1400px){

    .map-wrapper svg{

        max-width:840px;

    }

}

/* =====================================================
   SMALL DEVICES
===================================================== */

@media (max-width:430px){

    .province-label{

        font-size:15px;

        stroke-width:2;

    }

}
/* =====================================================
   BOTTOM SHEET
===================================================== */

.sheet-overlay{

    position:fixed;
    inset:0;

    background:rgba(20,24,20,.38);

    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;

    transition:.28s ease;

    z-index:9998;

}

.sheet-overlay.show{

    opacity:1;
    visibility:visible;

}

/* ---------- Bottom Sheet ---------- */

.bottom-sheet{

    position:fixed;

    left:50%;
    bottom:0;

    transform:translate(-50%,100%);

    width:min(100%,520px);

    background:#fff;

    border-radius:30px 30px 0 0;

    box-shadow:
        0 -25px 80px rgba(0,0,0,.18);

    transition:transform .35s cubic-bezier(.25,.8,.25,1);

    z-index:9999;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    max-height:92vh;

}

.bottom-sheet.show{

    transform:translate(-50%,0);

}

/* ---------- Handle ---------- */

.sheet-handle{

    width:64px;
    height:6px;

    border-radius:99px;

    background:#D7D7D7;

    margin:14px auto 10px;

    flex-shrink:0;

}

/* ---------- Content ---------- */

.sheet-content{

    flex:1;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

    padding:18px 26px 32px;

}

/* ---------- Steps ---------- */

.sheet-step{

    display:none;

    animation:fadeStep .28s ease;

}

.sheet-step.active{

    display:block;

}

@keyframes fadeStep{

    from{

        opacity:0;
        transform:translateY(12px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    .bottom-sheet{

        width:100%;
        max-width:none;

        border-radius:28px 28px 0 0;

max-height:100vh;
max-height:100dvh;

        height:auto;

    }

.sheet-content{

    padding:10px 18px 18px;

}

.sheet-card{

    padding:14px;

    margin-bottom:14px;

}

.price-card{

    padding:12px;

    margin-bottom:14px;

}
}
/* =====================================================
   PRICE CARD
===================================================== */

.price-card{

    background:#F8F8F5;

    border:1px solid #ECE7DA;

    border-radius:20px;

    padding:18px;

    text-align:center;

    margin-bottom:22px;

}

.price-card div{

    margin-bottom:4px;

    font-size:13px;

}

.price-card strong{

    font-size:26px;

    line-height:1.1;

}

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

.quick-select{

    display:grid;

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

    gap:8px;

    margin-bottom:12px;

}

.quick-btn{

    height:42px;

    border:none;

    border-radius:16px;

    background:#F5F5F2;

    color:#2C3229;

    font-size:15px;

    font-weight:700;

    transition:.2s;

}

.quick-btn:hover{

    background:#D8BA73;

    color:#fff;

}

.quick-btn.active{

    background:#2C3229;

    color:#fff;

}

/* =====================================================
   COUNTER
===================================================== */

.counter{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:14px;

}

.counter button{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#2C3229;

    color:#fff;

    font-size:28px;

}

.counter button:hover{

    background:#C79B45;

}

#qty{

    width:90px;

    border:none;

    background:transparent;

    outline:none;

    text-align:center;

    font-family:'Lalezar';

    font-size:42px;

    color:#2C3229;

}

/* =====================================================
   TOTAL
===================================================== */

.total-price{

    background:#F8F8F5;

    border-radius:18px;

    padding:12px;

    text-align:center;

    margin-bottom:12px;

}

.total-price span{

    display:block;

    font-size:14px;

    color:#777;

    margin-bottom:8px;

}

.total-price strong{

    display:block;

    font-family:'Lalezar';

    font-size:34px;

    font-weight:400;

    color:#2C3229;

}

/* =====================================================
   IMPACT
===================================================== */

.impact-text{

    text-align:center;

    font-size:13px;

    color:#666;

    line-height:1.7;

    margin-bottom:14px;

    padding:0 10px;

}

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

.sheet-step input{

    width:100%;

    height:56px;

    border:1px solid #E5E5E5;

    border-radius:16px;

    padding:0 18px;

    outline:none;

    font-size:15px;

    margin-bottom:14px;

    transition:.2s;

}

.sheet-step input:focus{

    border-color:#C79B45;

    box-shadow:0 0 0 4px rgba(199,155,69,.12);

}

/* =====================================================
   BUTTONS
===================================================== */

#nextStep,
#payBtn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    background:#2C3229;

    color:#fff;

    font-size:16px;

    font-weight:700;

    transition:.25s;

}

#nextStep:hover,
#payBtn:hover{

    background:#C79B45;

}

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

@media (max-width:768px){

    .sheet-title{

        font-size:28px;

        line-height:1.4;

    }

    .province-remaining{

        font-size:50px;

    }

    .price-card strong{

        font-size:30px;

    }

    .total-price strong{

        font-size:30px;

    }

    .counter{

        gap:14px;

    }

    .counter button{

        width:44px;
        height:44px;

        font-size:24px;

    }

    #qty{

        width:80px;

        font-size:36px;

    }

    .quick-btn{

        height:48px;

        font-size:14px;

    }

    #nextStep,
    #payBtn{

        height:54px;

        font-size:15px;

    }

}
/* ==========================================
   PROVINCE INFO
========================================== */

.sheet-card{

    background:#F8F8F5;

    border:1px solid #ECE7DA;

    border-radius:22px;

    padding:24px;

    text-align:center;

    margin-bottom:22px;

}

.sheet-label{

    font-size:14px;

    color:#777;

    margin-bottom:8px;

}

.province-remaining{

    font-family:'Lalezar';

    font-size:56px;

    line-height:1;

    color:#C79B45;

    margin:12px 0;

}

.sheet-unit{

    font-size:14px;

    color:#777;

}

/* ---------- Progress ---------- */

.province-progress{

    height:12px;

    background:#ECE9DF;

    border-radius:999px;

    overflow:hidden;

    margin-bottom:12px;

}

.province-progress-fill{

    width:0;

    height:100%;

    background:linear-gradient(90deg,#D8BA74,#C79B45);

    transition:width .4s ease;

}

.province-progress-text{

    text-align:center;

    font-size:14px;

    color:#666;

    margin-bottom:24px;

}
/* ==========================================
   SUMMARY CARD
========================================== */

.summary-card{

    background:#F8F8F5;

    border:1px solid #ECE7DA;

    border-radius:20px;

    padding:18px;

    margin-bottom:20px;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

}

.summary-item:not(:last-child){

    border-bottom:1px solid #ECE7DA;

}

.summary-item span{

    font-size:14px;

    color:#777;

}

.summary-item strong{

    font-size:16px;

    font-weight:700;

    color:#2C3229;

}

/* موبایل */

@media (max-width:768px){

    .summary-card{

        padding:16px;

        border-radius:18px;

    }

    .summary-item{

        padding:10px 0;

    }

    .summary-item span{

        font-size:13px;

    }

    .summary-item strong{

        font-size:15px;

    }

}
/* ==========================================
   RECEIPT CARD
========================================== */

.receipt-card{

    background:#F8F8F5;

    border:1px solid #E9E5DA;

    border-radius:20px;

    padding:8px 22px;

    margin-bottom:22px;

}

.receipt-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

}

.receipt-item:not(:last-child){

    border-bottom:1px solid #ECE7DA;

}

.receipt-item span{

    font-size:14px;

    color:#7A7A7A;

}

.receipt-item strong{

    font-size:16px;

    font-weight:700;

    color:#2C3229;

}

.receipt-note{

    background:#FCFBF8;

    border:1px dashed #D9CCAE;

    border-radius:16px;

    padding:16px 18px;

    font-size:14px;

    line-height:2;

    color:#666;

    text-align:center;

    margin-bottom:34px;

}

/* موبایل */

@media(max-width:768px){

    .receipt-card{

        padding:6px 16px;

        border-radius:18px;

    }

    .receipt-item{

        padding:14px 0;

    }

    .receipt-item span{

        font-size:13px;

    }

    .receipt-item strong{

        font-size:15px;

    }

    .receipt-note{

        font-size:13px;

        padding:14px;

    }

}
#closeSheetBtn{

position:absolute;

top:16px;

left:16px;

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#F4F4F4;

color:#555;

font-size:20px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

transition:.2s;

z-index:10;

}

#closeSheetBtn:hover{

background:#EAEAEA;

}

#closeSheetBtn:active{

transform:scale(.95);

}
/* ===========================================
            IOS WHEEL PICKER
===========================================*/

.picker-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:9998;

}

.picker-overlay.show{

    opacity:1;
    visibility:visible;

}

.picker-sheet{

    position:fixed;

    left:50%;
    bottom:0;

    transform:translate(-50%,100%);

    transition:.28s ease;

    width:min(100%,430px);

    background:#fff;

    border-radius:30px 30px 0 0;

    padding:18px 20px 24px;

    z-index:9999;

    overflow:hidden;

}

.picker-sheet.show{

    transform:translate(-50%,0);

}

.picker-handle{

    width:62px;

    height:6px;

    background:#D9D9D9;

    border-radius:999px;

    margin:auto;

    margin-bottom:18px;

}

.picker-sheet h3{

    font-family:'Lalezar';

    font-size:36px;

    font-weight:400;

    text-align:center;

    color:#2C3229;

    margin-bottom:18px;

}

/* ---------- Wrapper ---------- */

.picker-wrapper{

    position:relative;

    height:260px;
    
    overflow-x:hidden;

    overflow:hidden;

}

/* ---------- خط انتخاب ---------- */

.picker-highlight{

    position:absolute;

    left:0;
    right:0;

    top:50%;

    transform:translateY(-50%);

    height:54px;

    border-top:2px solid #E8DFC8;

    border-bottom:2px solid #E8DFC8;

    background:rgba(199,155,69,.05);

    pointer-events:none;

    z-index:5;

}

/* ---------- Fade ---------- */

.picker-wrapper::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:70px;

    background:linear-gradient(#fff,rgba(255,255,255,0));

    z-index:8;

    pointer-events:none;

}

.picker-wrapper::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:70px;

    background:linear-gradient(rgba(255,255,255,0),#fff);

    z-index:8;

    pointer-events:none;

}

/* ---------- لیست ---------- */

.picker-list{

    height:260px;

    overflow-y:auto;

    touch-action:pan-y;

    overscroll-behavior-y:contain;

    overflow-x:hidden;

    scroll-snap-type:y mandatory;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    padding:104px 0;

}

.picker-list::-webkit-scrollbar{

    display:none;

}

/* ---------- آیتم ---------- */

.picker-item{

    height:52px;

    display:flex;
    
    width:100%;

    user-select:none;

    justify-content:center;

    align-items:center;

    scroll-snap-align:center;

    font-family:'Lalezar';

    font-size:30px;

    color:#9B9B9B;

    transition:

        transform .18s,

        color .18s,

        font-size .18s;

}

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

.picker-item.active{

    color:#C79B45;

    font-size:42px;

    transform:scale(1.08);

}

/* ---------- دکمه ---------- */

#pickerDone{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    margin-top:20px;

    background:#2C3229;

    color:#fff;

    font-size:17px;

    font-family:'Vazirmatn';

    cursor:pointer;

}
#qtyToast{

position:absolute;

right:50%;

transform:translateX(50%);

bottom:-34px;

background:#2C3229;

color:#fff;

padding:7px 14px;

border-radius:10px;

font-size:12px;

white-space:nowrap;

opacity:0;

pointer-events:none;

transition:.25s;

}

#qtyToast.show{

opacity:1;

bottom:-40px;

}

.counter{

position:relative;

}
/* ==========================================
        Messages Section
========================================== */

.messages-section{

margin-top:45px;

overflow:hidden;

}

.messages-header{

text-align:center;

margin-bottom:28px;

}

.messages-header h2{

font-family:'Lalezar';

font-size:34px;

font-weight:400;

line-height:1.5;

color:#2C3229;

margin-bottom:8px;

}

.messages-header p{

font-size:15px;

color:#8E9389;

}

/* ---------- Slider ---------- */

.messages-slider{

width:100%;

overflow-x:auto;

overflow-y:hidden;

-webkit-overflow-scrolling:touch;

scroll-behavior:smooth;

scroll-snap-type:x mandatory;

scrollbar-width:none;

touch-action:pan-x;

cursor:grab;

user-select:none;

-webkit-user-select:none;

}
.messages-slider::-webkit-scrollbar{

display:none;

}
.messages-slider:active{

cursor:grabbing;

}

.messages-track{

display:flex;

gap:18px;


will-change:transform;


}

/* ---------- Card ---------- */

.message-card{

flex:0 0 calc((100% - 36px)/3);

background:#fff;

border:1px solid #E8E0CB;

border-radius:22px;

padding:22px;

box-shadow:

0 8px 28px rgba(0,0,0,.05);

display:flex;

flex-direction:column;

justify-content:space-between;

min-height:235px;

scroll-snap-align:start;

}

.message-top{

display:flex;

align-items:center;

gap:14px;

margin-bottom:18px;

}

.avatar{

width:48px;

height:48px;

border-radius:50%;

background:#C79B45;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-family:'Lalezar';

font-size:24px;

flex-shrink:0;

}

.name{

font-weight:700;

font-size:16px;

color:#2C3229;

margin-bottom:4px;

}

.city{

font-size:13px;

color:#999;

}

.message{

font-size:15px;

line-height:2;

color:#555;

}

/* ---------- Mobile ---------- */

@media(max-width:768px){

.message-card{

flex:0 0 100%;

min-height:210px;

}

.messages-header h2{

font-size:30px;

}

.messages-header p{

font-size:14px;

}

}
.message-box{

margin-top:18px;

margin-bottom:18px;

}

.message-box label{

display:block;

font-size:14px;

font-weight:600;

margin-bottom:10px;

color:#2C3229;

}

.message-box label span{

font-weight:400;

color:#999;

}

.message-box textarea{

width:100%;

height:110px;

resize:none;

border:1px solid #D8D8D8;

border-radius:16px;

padding:14px;

font-family:'Vazirmatn';

font-size:14px;

line-height:2;

outline:none;

transition:.2s;

background:#fff;

}

.message-box textarea:focus{

border-color:#C79B45;

box-shadow:0 0 0 3px rgba(199,155,69,.12);

}

.message-count{

margin-top:8px;

text-align:left;

font-size:12px;

color:#999;

}
.hero-dedication{

display:flex;

justify-content:center;

margin-top:10px;

margin-bottom:8px;

}

.hero-dedication img{

display:block;

max-width:100%;

width:340px;

height:auto;

object-fit:contain;

}@media(max-width:768px){

.hero-dedication img{

width:260px;

}

}
/* ===========================
            Footer
=========================== */

.footer{

margin-top:70px;

padding:34px 20px;

border-top:1px solid #ECE6D9;

display:flex;

justify-content:center;

align-items:center;

gap:38px;

background:#FCFBF8;

flex-wrap:nowrap;

}

.footer-org{

display:flex;

align-items:center;

transition:.25s;

}

.footer-org:hover{

opacity:.9;

transform:translateY(-2px);

}

.footer-org img{

height:82px;

width:auto;

display:block;

}

.footer-divider{

width:1px;

height:46px;

background:#DDD5C3;

}

.footer-social{

display:flex;

align-items:center;

gap:10px;

text-decoration:none;

color:#555;

font-size:18px;

font-weight:700;

transition:.25s;

}

.footer-social:hover{

color:#B78A2F;

transform:translateY(-2px);

}

.footer-social img{

width:38px;

height:38px;

display:block;

}

@media(max-width:768px){

.footer{

padding:26px 16px;

gap:22px;

flex-wrap:wrap;

}

.footer-org{

width:100%;

justify-content:center;

}

.footer-org img{

height:150px;

}

.footer-divider{

display:none;

}

.footer-social{

font-size:17px;

}

.footer-social img{

width:34px;

height:34px;

}

}
img[alt="ایتا"]{

width:57px;
height:57px;

}

.fail-icon{

width:92px;

height:92px;

margin:0 auto 26px;

border-radius:50%;

background:#FFF4F4;

border:3px solid #D93C3C;

display:flex;

align-items:center;

justify-content:center;

font-size:48px;

font-family:"Lalezar";

color:#D93C3C;

}

.btn-primary{

display:block;

margin-top:34px;

height:58px;

line-height:58px;

border-radius:18px;

background:#232823;

color:#fff;

text-decoration:none;

font-family:"Vazirmatn";

font-weight:700;

font-size:17px;

transition:.2s;

}

.btn-primary:hover{

transform:translateY(-2px);

}

.btn-secondary{

display:block;

margin-top:14px;

height:56px;

line-height:56px;

border:2px solid #232823;

border-radius:18px;

background:#fff;

color:#232823;

text-decoration:none;

font-family:"Vazirmatn";

font-weight:700;

font-size:17px;

transition:.2s;

}

.btn-secondary:hover{

background:#232823;

color:#fff;

}

.footer-note{

margin-top:26px;

font-size:14px;

line-height:2;

color:#8A8A8A;

}