/*بـسـم الله الـرحـمـن الـرحـیـم*/





*{
    font-family: vazir;
}

#endDate , #startDate {
    position: relative;
    top: 8px;
}

.headerPlan{
    display: flex;
    margin: 25px auto !important;
    justify-content: space-between;
    width: 95%;
    align-items: center;
    padding-top: 20px;
    
}


.plan-detail-page{

    min-height:100vh;

    background:#020617;

    padding:35px;

    color:white;

}



/* کارت اصلی */

.plan-detail-card{


    background:
    linear-gradient(
        145deg,
        #07111d,
        #020617
    );


    border:1px solid #1e293b;

    border-radius:22px;

    padding:30px;

    margin-bottom:35px;

}



/* هدر */

.plan-detail-header{


    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;


}



.plan-detail-header h1{

    font-size:32px;

    margin-bottom:12px;

}



.plan-detail-header p{

    color:#94a3b8;

    max-width:700px;

}



.plan-percent{


    background:#052e16;

    color:#22c55e;

    font-size:28px;

    font-weight:bold;

    padding:18px 25px;

    border-radius:20px;

}



/* progress */

.progress-box{

    margin:35px 0;

}



.progress{


    height:14px;

    background:#1e293b;

    border-radius:20px;

    overflow:hidden;

}



.progress-value{

    height:100%;

    background:#22c55e;

    border-radius:20px;

}



/* اطلاعات */

.plan-meta{


    display:grid;

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

    gap:20px;


}



.plan-meta div{


    background:#0f172a;

    padding:20px;

    border-radius:16px;


}



.plan-meta small{


    display:block;

    color:#64748b;

    margin-bottom:8px;


}



.plan-meta strong{

    font-size:18px;

}



.active{

    color:#22c55e;

}



.done{

    color:#f97316;

}



/* عنوان بخش ها */

.sections-title{

    margin:30px 0 20px;

}


.sections-title h2{

    font-size:24px;

}


.edit-plan-btn{


    background:#22c55e;

    color:#020617;

    border:none;

    padding:12px 20px;

    border-radius:12px;

    cursor:pointer;

    font-weight:bold;

}



.edit-box{
    display:none;
    margin-top:25px;
    padding:25px;

}



.edit-box.show{

    display:block;

    animation:openEdit .3s ease;

}



@keyframes openEdit{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



.edit-box h2{

    margin-bottom:25px;

}



.edit-box label{


    display:block;

    margin-bottom:8px;

    color:#94a3b8;

}

.edit-box textarea{
    resize: none;
}

.edit-box input,
.edit-box textarea{


    width:100%;

    background:#020617;

    border:1px solid #334155;

    color:white;

    padding:12px;

    border-radius:12px;

    margin-bottom:18px;

}



.edit-box textarea{

    min-height:120px;

    resize:vertical;

}



.date-row{


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;


}



.edit-actions{


    display:flex;

    gap:12px;

    margin-top:20px;

}



.edit-actions button{


    padding:12px 20px;

    border:none;

    border-radius:12px;

    cursor:pointer;

}



#savePlan{

    background:#22c55e;

}



#ButttonShow{
    display: none;
    background:#1e293b;
    color:white;
}

#ButttonShow:hover{
    box-shadow: 2px 2px 4px #64748b , -2px -2px 4px #64748b;
    opacity: 90%;
}

@media(max-width:600px){


    .date-row{

        grid-template-columns:1fr;

    }


}


/* ریسپانسیو */

@media(max-width:700px){


    .plan-detail-page{

        padding:20px;

    }


    .plan-detail-header{

        flex-direction:column;

        align-items:flex-start;

    }


    .plan-percent{

        font-size:22px;

    }


    .plan-meta{

        grid-template-columns:1fr;

    }


}