/*==================================================
COMMON DONATION MODAL
==================================================*/

.donation-modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.65);
    z-index:99999;
    padding:20px;
}

/*==================================================
Modal
==================================================*/

.donation-modal-content{

    width:min(920px,96vw);

    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    border-radius:16px;

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

    padding:24px;

    position:relative;

    box-sizing:border-box;

    animation:popup .25s ease;

}

@keyframes popup{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*==================================================
Close Button
==================================================*/

.donation-close{

    position:absolute;

    right:18px;

    top:18px;

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    background:#f2f2f2;

    cursor:pointer;

    font-size:20px;

}

.donation-close:hover{

    background:#ddd;

}

/*==================================================
Header
==================================================*/

.donation-header{

    margin-bottom:18px;

    text-align:center;

}

.donation-header h2{

    margin:0;

    font-size:22px;

    color:#222;

}

.donation-header p{

    margin-top:6px;

    font-size:14px;

    color:#666;

    line-height:1.5;

}

/*==================================================
Grid
==================================================*/

.donation-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px 16px;

}

/*==================================================
Form Group
==================================================*/

.donation-group{

    margin-bottom:12px;

}

.donation-group.full{

    grid-column:1 / -1;

}

.donation-group label{

    display:block;

    margin-bottom:4px;

    font-size:13px;

    font-weight:600;

    color:#444;

}

.donation-group input,

.donation-group select,

.donation-group textarea{

    width:100%;

    padding:10px 12px;

    border:1px solid #d7d7d7;

    border-radius:8px;

    font-size:14px;

    outline:none;

    transition:.2s;

    box-sizing:border-box;

}

.donation-group textarea{

    resize:vertical;

    min-height:70px;

}

.donation-group input:focus,

.donation-group select:focus,

.donation-group textarea:focus{

    border-color:#1976d2;

    box-shadow:0 0 0 3px rgba(25,118,210,.08);

}

/*==================================================
Checkbox
==================================================*/

.donation-checkbox{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    margin:10px 0 18px;

}

.donation-checkbox input{

    width:auto;

}

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

.donation-footer{

    text-align:center;

    margin-top:15px;

}

.donation-footer small{

    display:block;

    margin-bottom:12px;

    color:#777;

    font-size:12px;

}

#btnPayNow{

    width:100%;

    border:none;

    border-radius:10px;

    padding:14px;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    color:#fff;

    background:#008c45;

    transition:.25s;

}

#btnPayNow:hover{

    background:#04753a;

}

/*==================================================
Scrollbar
==================================================*/

.donation-modal-content::-webkit-scrollbar{

    width:8px;

}

.donation-modal-content::-webkit-scrollbar-thumb{

    background:#d5d5d5;

    border-radius:20px;

}

/*==================================================
Responsive
==================================================*/

@media(max-width:768px){

    .donation-modal{

        padding:10px;

    }

    .donation-modal-content{

        width:100%;

        max-height:95vh;

        padding:18px;

    }

    .donation-row{

        grid-template-columns:1fr;

        gap:0;

    }

    .donation-header h2{

        font-size:18px;

    }

    #btnPayNow{

        font-size:16px;

    }

}