@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Vazirmatn:wght@300;400;500;700;800&display=swap');

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

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

html{

    scroll-behavior:smooth;

}

body{

    direction:rtl;

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

    background:#DFE5D7;

    color:#2C3229;

    min-height:100vh;

    padding:40px 20px;

}


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

.wrapper{

    width:100%;

    max-width:760px;

    margin:0 auto;

}

.form-card{

    width:100%;

    background:#FFFFFF;

    border-radius:30px;

    padding:45px;

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

}


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

.vip-header{

    text-align:center;

    margin-bottom:38px;

}

.vip-header h1{

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

    font-size:48px;

    font-weight:400;

    color:#2C3229;

    margin-bottom:14px;

    line-height:1.3;

}

.vip-desc{

    max-width:520px;

    margin:0 auto;

    color:#5E665A;

    line-height:2;

    font-size:15px;

}

.invite-banner{

    background:#DFE5D7;

    border:1px solid #C2C8BC;

    border-radius:18px;

    padding:18px;

    margin-bottom:26px;

    color:#2C3229;

    font-size:15px;

    font-weight:600;

    line-height:2;

}

.form-card h2{

    text-align:center;

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

    font-size:34px;

    font-weight:400;

    color:#2C3229;

    margin-bottom:34px;

}


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

@media(max-width:768px){

    body{

        padding:18px;

    }

    .form-card{

        padding:24px;

        border-radius:24px;

    }

    .vip-header{

        margin-bottom:28px;

    }

    .vip-header h1{

        font-size:36px;

    }

    .vip-desc{

        font-size:14px;

    }

    .form-card h2{

        font-size:28px;

        margin-bottom:26px;

    }

}
/* ===========================================
                FORM
=========================================== */

form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:700;

    color:#2C3229;

}



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

input,
textarea,
select{

    width:100%;

    background:#FFFFFF;

    border:1px solid #C2C8BC;

    border-radius:18px;

    padding:16px 18px;

    font-size:15px;

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

    color:#2C3229;

    transition:.25s;

    outline:none;

}

input::placeholder,
textarea::placeholder{

    color:#8A9386;

}

textarea{

    min-height:120px;

    resize:vertical;

}

input:focus,
textarea:focus,
select:focus{

    border-color:#2C3229;

    box-shadow:0 0 0 4px rgba(44,50,41,.08);

}



/* ===========================================
            QUANTITY BOX
=========================================== */

.quantity-box{

    display:flex;

    align-items:center;

    gap:12px;

}

.quantity-box button{

    width:52px;

    height:52px;

    border:none;

    border-radius:16px;

    background:#2C3229;

    color:white;

    font-size:24px;

    cursor:pointer;

    transition:.25s;

}

.quantity-box button:hover{

    transform:translateY(-2px);

    background:#232723;

}

.quantity-box input{

    text-align:center;

    font-size:18px;

    font-weight:700;

}



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

.total-box{

    background:#DFE5D7;

    border:1px solid #C2C8BC;

    border-radius:22px;

    padding:24px;

    text-align:center;

    margin-top:8px;

}

.total-box strong{

    display:block;

    margin-top:12px;

    color:#2C3229;

    font-size:32px;

    font-weight:800;

}

.impact-text{

    margin-top:12px;

    color:#5F665B;

    line-height:1.9;

    font-size:14px;

}



/* ===========================================
            PAY BUTTON
=========================================== */

.pay-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:20px;

    background:#2C3229;

    color:white;

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

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.pay-btn:hover{

    background:#1F231F;

    transform:translateY(-2px);

}



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

@media(max-width:768px){

    form{

        gap:18px;

    }

    .quantity-box{

        gap:8px;

    }

    .quantity-box button{

        width:46px;

        height:46px;

    }

    .total-box{

        padding:18px;

    }

    .total-box strong{

        font-size:26px;

    }

}
/* ===========================================
            OPTION CARD
=========================================== */

.option-card{

    background:#DFE5D7;

    border:1px solid #C2C8BC;

    border-radius:22px;

    overflow:hidden;

}

.option-check{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 22px;

    cursor:pointer;

    font-weight:700;

    color:#2C3229;

}

.option-check input{

    width:20px;

    height:20px;

    accent-color:#2C3229;

    cursor:pointer;

}

.option-check span{

    flex:1;

    line-height:1.9;

}

.option-content{

    display:none;

    padding:0 22px 22px;

    animation:fadeDown .25s ease;

}

.option-content label{

    margin-top:18px;

}



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

.memorial-item{

    margin-top:22px;

    padding:24px;

    background:#FFFFFF;

    border:1px solid #C2C8BC;

    border-radius:22px;

    box-shadow:0 10px 28px rgba(0,0,0,.05);

}

.memorial-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.memorial-number{

    font-size:18px;

    font-weight:700;

    color:#2C3229;

}

.memorial-item label{

    color:#2C3229;

    margin-bottom:8px;

}

.memorial-image-title{

    margin-top:22px;

}



/* ===========================================
            REMOVE BUTTON
=========================================== */

.remove-memorial{

    background:transparent;

    border:none;

    color:#B42318;

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

    font-size:14px;

    cursor:pointer;

    transition:.25s;

}

.remove-memorial:hover{

    color:#8F1D13;

}



/* ===========================================
            ANIMATION
=========================================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

@media(max-width:768px){

    .option-check{

        align-items:flex-start;

        padding:16px;

    }

    .option-content{

        padding:0 16px 18px;

    }

    .memorial-item{

        padding:18px;

    }

    .memorial-header{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

}
/* ===========================================
            UPLOAD BOX
=========================================== */

.upload-box{

    display:block;

    margin-top:14px;

    cursor:pointer;

}

.upload-content{

    background:#FFFFFF;

    border:2px dashed #C2C8BC;

    border-radius:20px;

    padding:34px 22px;

    text-align:center;

    transition:.25s;

}

.upload-content:hover{

    border-color:#2C3229;

    background:#F7F9F5;

}

.upload-icon{

    font-size:42px;

    margin-bottom:12px;

}

.upload-title{

    color:#2C3229;

    font-size:17px;

    font-weight:700;

}

.upload-subtitle{

    margin-top:8px;

    color:#6B7367;

    line-height:1.9;

    font-size:13px;

}


/* ===========================================
            PREVIEW
=========================================== */

.preview-box{

    display:none;

    text-align:center;

    margin-top:20px;

}

.image-preview{

    width:170px;

    height:170px;

    object-fit:cover;

    border-radius:20px;

    border:4px solid white;

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

    display:block;

    margin:auto;

}

.preview-actions{

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

    margin-top:18px;

}


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

.change-image{

    background:#2C3229;

    color:white;

    border:none;

    border-radius:14px;

    padding:13px 20px;

    cursor:pointer;

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

    transition:.25s;

}

.change-image:hover{

    background:#1F231F;

}

.delete-image{

    background:#FFF5F5;

    color:#B42318;

    border:1px solid #F3C8C8;

    border-radius:14px;

    padding:13px 20px;

    cursor:pointer;

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

    transition:.25s;

}

.delete-image:hover{

    background:#FFEAEA;

}

.secondary-btn{

    margin-top:20px;

    width:100%;

    height:56px;

    border:none;

    border-radius:18px;

    background:#2C3229;

    color:white;

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

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.secondary-btn:hover{

    background:#1F231F;

    transform:translateY(-2px);

}


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

@media(max-width:768px){

    .upload-content{

        padding:26px 18px;

    }

    .image-preview{

        width:140px;

        height:140px;

    }

    .preview-actions{

        flex-direction:column;

    }

    .change-image,
    .delete-image{

        width:100%;

    }

}
/* ===========================================
            SELECT
=========================================== */

select{

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%232C3229' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:left 16px center;

    padding-left:46px;

}



/* ===========================================
            SCROLLBAR
=========================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#DFE5D7;

}

::-webkit-scrollbar-thumb{

    background:#C2C8BC;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#2C3229;

}



/* ===========================================
            BUTTON ACTIVE
=========================================== */

button:active{

    transform:scale(.98);

}



/* ===========================================
            DISABLED
=========================================== */

button:disabled{

    opacity:.55;

    cursor:not-allowed;

}



/* ===========================================
            FILE INPUT
=========================================== */

input[type=file]{

    display:none;

}



/* ===========================================
            TRANSITIONS
=========================================== */

button,
input,
textarea,
select,
.option-card,
.upload-content,
.memorial-item{

    transition:.25s;

}



/* ===========================================
            FOCUS
=========================================== */

input:focus,
textarea:focus,
select:focus{

    transform:translateY(-1px);

}



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

@media(max-width:768px){

    .quantity-box{

        gap:8px;

    }

    .quantity-box input{

        font-size:17px;

    }

    .option-check{

        font-size:14px;

    }

    .invite-banner{

        font-size:14px;

    }

    .pay-btn{

        height:54px;

        font-size:16px;

    }

    .secondary-btn{

        height:54px;

        font-size:15px;

    }

}
/* ===========================================
                LOGO
=========================================== */

.logo-link{

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    margin-bottom:18px;

}

.site-logo{

    width:170px;

    height:auto;

    display:block;

    transition:.25s;

}

.site-logo:hover{

    transform:scale(1.04);

}

@media(max-width:768px){

    .site-logo{

        width:140px;

    }

}