.donation-widget-container{
    background-color:#fff;
    max-width:555px;
}
.form-container{
    border:1px solid #14362540;
    border-radius:0px 0px 8px 8px;
    padding: 40px 50px 60px 50px;
}
.donation-header{
    background-color:#1B6D24;
    padding:20px 50px;
    border:1px solid #1B6D24;
    border-radius:8px 8px 0px 0px;
}
.donation-header-inner{
    display:flex;
    align-items:start;
    justify-items:center;
    flex-direction:column;
    gap:12px;
}
#step-title-text{
    font-family:"Cal sans" !important;
    font-size: 20px !important;
    color:#FFFFFF80;
}
#step-title-text span{
    color:#fff;
}
.progress-bar-container{
    height:8px;
    background-color:#FFFFFF80;
    width:100%;
    border-radius:100px;
}
.progress-bar-fill {
    height: 100%;
    background-color: #ffffff !important; 
    border-radius: 10px;
    transition: width 0.4s ease-in-out; 
}
.period-toggle{ display:flex; gap:0px; justify-content:center;}
.period-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 20px;
    padding: 12px 20px;
    cursor: pointer;
    background-color: #ffffff;
    
    /* Default to grayed out */
    color: #47474780; 
    border: 1px solid #cccccc; 
    transition: all 0.2s ease;
}

/* One-Time Button: Left side border radius */
.period-btn[data-period="One-Time"] {
    border-radius: 8px 0px 0px 8px;
}

/* Monthly Button: Right side border radius and overlap fix */
.period-btn[data-period="Monthly"] {
    border-radius: 0px 8px 8px 0px;
    margin-left: -1px; 
}

/* Active State (The Green Styles) */
.period-btn.active {
    background-color: #ffffff !important;
    color: #1B6D24; 
    border: 1px solid #1B6D24;
    z-index: 1; 
}
.period-btn .btn-icon {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.amount-grid{
    display:grid;
    grid-template-columns: auto auto auto;
    gap:14px;
    margin:35px 0px 20px 0px;
}
.amount-grid .amount-btn{
    font-family:"Cal sans" !important;
    font-size: 20px !important;
    color:#143625 ;
    border:0px !important;
    border-radius:8px !important;
    background-color:#F5F5F5;
    padding:15px 0px 15px 0px;
}
.amount-grid .amount-btn.active{
    color:#fff !important;
    background-color:#143625 !important;
}
.donation-step input[type="number"]{
    width:100%;
    background-color:#F5F5F5;
    border-radius:8px;
    padding:15px 16px 15px 18px;
    border:0px !important;
    margin-bottom:28px;
}
.donation-step input[type="number"]{ font-family:"lato" !important; font-size:20px !important; font-weight:400 !important; color:#6F7979 !important; }
.comment-section { color:#6F7979 !important; font-size:20px; margin-bottom:28px;}
input[type="checkbox"] { width: 17px; height: 17px; margin-right:14px;}

.next-step-btn{
    width:100%;
    padding:20px;
    font-family:"Cal sans" !important;
    font-size: 16px !important;
    border-radius:100px;
    color: #fff;
    background-image: linear-gradient(to right, #1B6D24, #143625);
    box-shadow: 0 0 20px #eee;
    cursor:pointer;
}
.btn-grad {
  background-image: linear-gradient(to right, #ff6e7f 0%, #bfe9ff 51%, #ff6e7f 100%);
}
.comment-section textarea{
    margin-top:20px;
    padding:10px;
    font-family:"lato" !important; 
    font-size:16px !important;

}

/*Step 02 */
.form-row{
    display:flex;
    gap:20px;
}
.form-group{
    margin-bottom:24px;
}
.form-group label{
    font-family:"lato" !important; 
    font-size:20px !important;
    margin-bottom:8px;
    color:#6F7979;
}
.form-group input{
    border:0px !important;
    border-radius:9px !important;
    background-color:#F5F5F5;
    font-family:"lato" !important; 
    font-size:20px;
    margin-top:8px;
    width:100%;
    padding:8px !important;
}
.step-button-container{
    display:flex;
    gap:14px;
}
.prev-step-btn{
    width:100%;
    padding:10px !important;
    font-family:"Cal sans" !important;
    font-size: 16px !important;
    border-radius:100px !important;
    color: #fff !important;
    background-image: linear-gradient(to right, #1B6D24, #143625) !important;
    cursor:pointer !important;
}
#final-submit-btn{
    width:70% !important;
    padding:20px !important;
    font-family:"Cal sans" !important;
    font-size: 16px !important;
    border-radius:100px !important;
    color: #143625 !important;
    border-color:#FBCC36 !important;
    background-color:#FBCC36 !important;
    box-shadow: 0 0 20px #eee !important;
    cursor:pointer !important;
}
#reset-widget-btn{
    padding:20px !important;
    font-family:"Cal sans" !important;
    font-size: 20px !important;
    border-radius:100px !important;
    color: #143625 !important;
    border-color:#FBCC36 !important;
    background-color:#FBCC36 !important;
    box-shadow: 0 0 20px #eee !important;
    cursor:pointer !important;
}
/* Update your main submit button to use flexbox */
.main-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px; 
}

/* Style the icon itself */
.submit-btn-icon {
    width: 20px;  /* Adjust the size based on your specific SVG */
    height: 20px;
    object-fit: contain;
    pointer-events: none; 
    margin-top:-5px;
}

.payment-back-btn{
    display:flex;
    gap:10px;
}
.payment-back-btn .prev-step-btn{
    width:30% !important;
}
.step-button-container .second-next-button{
    color: #143625 !important;
    border-color: #FBCC36 !important;
    background-image: linear-gradient(to right, #FBCC36, #FBCC36);
}
.prev-step-btn{
    transition:0.3s;
}
.prev-step-btn:hover{
    transform: scale(1.02);
}

@media(max-width:1024px){
.payment-back-btn{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.payment-back-btn .prev-step-btn{
    width:100% !important;
    padding:20px !important;
}
#final-submit-btn{
    width:100% !important;
}
}

@media(max-width:767px){
    .donation-header{
        padding:16px;
    }
    #step-title-text{
        font-size:16px !important;
    }
    .form-container{
        padding:24px 16px;
    }
    .period-btn{
        font-size:16px !important;
    }
    .amount-grid .amount-btn{
        font-size:16px !important;
    }
    .amount-grid{
        gap:8px;
    }
    .donation-step input[type="number"]{ font-size:16px !important; }
    .comment-section{font-size:16px;}
    input[type="checkbox"] { width: 20px; height: 20px;margin-top: 14px; }
    .next-step-btn{ font-size: 16px !important; }

    /*step 2*/
    .form-group label, .prev-step-btn{font-size:16px !important;}
}