/*==================================================
STEP 3 - FUNDING TYPE TOGGLE
==================================================*/

.funding-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:520px;

    margin:0 auto 2rem;

    border:1px solid #d9dfe7;

    border-radius:8px;

    overflow:hidden;

    background:#fff;

}

.funding-toggle button{
    font-size: .8rem;
}

.funding-option{

    flex:1;

    padding:14px 20px;

    text-align:center;

    font-size:15px;

    font-weight:500;

    color:#6b7280;

    background:#fff;

    border:none;

    cursor:pointer;

    transition:all .25s ease;

}

.funding-option:hover{

    background:#f8fafc;

}

.funding-option.active{

    background:#EDF4FF;

    color:#0B4EA2;

    font-weight:600;

}

.funding-option:first-child{

    border-right:1px solid #d9dfe7;

}

@media(max-width:768px){

    .funding-toggle{

        flex-direction:column;

        max-width:100%;

    }

    .funding-option{

        width:100%;

        border-right:none !important;

        border-bottom:1px solid #d9dfe7;

    }

    .funding-option:last-child{

        border-bottom:none;

    }

}

/*=====================================
FUNDING PANELS
======================================*/

.funding-panel{

    display:none;

    animation:fadePanel .25s ease;

}

.funding-panel.active{

    display:block;

}

@keyframes fadePanel{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
STEP 3 - EMPLOYMENT / BUSINESS INFORMATION
==================================================*/

/*=====================================
Funding Toggle
======================================*/

.funding-toggle{

    display:flex;

    width:100%;

    max-width:560px;

    margin:0 auto 40px;

    border:1px solid #D9DEE7;

    border-radius:10px;

    overflow:hidden;

    background:#fff;

}

.funding-option{

    flex:1;

    padding:16px 20px;

    border:none;

    background:#fff;

    color:#6B7280;

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    transition:all .3s ease;

}

.funding-option:first-child{

    border-right:1px solid #D9DEE7;

}

.funding-option:hover{

    background:#F8FAFC;

}

.funding-option.active{

    background:#EDF4FF;

    color:#0B4EA2;

    font-weight:600;

}

/*=====================================
Funding Panels
======================================*/

.funding-panel{

    display:none;

    animation:fadePanel .25s ease;

}

.funding-panel.active{

    display:block;

}

@keyframes fadePanel{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=====================================
Section Spacing
======================================*/

.funding-panel .sectionEli{

    margin-bottom:34px;

}

.funding-panel .sectionEli:last-child{

    margin-bottom:0;

}

/*=====================================
Section Titles
======================================*/

.funding-panel .section-title{

    margin-bottom:24px;

}

/*=====================================
Optional Fields
======================================*/

.optional{

    color:#6B7280;

    font-weight:400;

    font-size:14px;

}

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

@media(max-width:768px){

    .funding-toggle{

        flex-direction:column;

        max-width:100%;

    }

    .funding-option{

        width:100%;

        border-right:none !important;

        border-bottom:1px solid #D9DEE7;

    }

    .funding-option:last-child{

        border-bottom:none;

    }

}

/*==================================================
STEP 4 - FINANCIAL INFORMATION
==================================================*/

/* Section spacing */

.form-step .sectionEli{

    margin-bottom:36px;

}

.form-step .sectionEli:last-of-type{

    margin-bottom:50px;

}

/*=====================================
Financial Questions
======================================*/

.question-block{

    margin-top:5px;

}

.question-spacing{

    margin-top:34px;

}

/*=====================================
Radio Buttons
======================================*/

.question-block .radio-inline{

    margin-top:14px;

    gap:24px;

}

.question-block .radio-inline label{

    font-size:15px;

    font-weight:500;

}

/*=====================================
Bank Information
======================================*/

.sectionEli .form-grid.form-grid-2{

    row-gap:26px;

}

/*=====================================
Average Monthly Deposits
======================================*/

.form-grid .form-group.single-column{

    grid-column:1 / 2;

}

/*=====================================
Buttons
======================================*/

.form-buttons.between{

    margin-top:48px;

}

/*==================================================
STEP 5 - UPLOAD DOCUMENTS
==================================================*/

.upload-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

    border-bottom:1px solid #eef2f7;

}

.upload-row:last-child{

    border-bottom:none;

}

.upload-details h4{

    margin:0 0 6px;

    font-size:18px;

    font-weight:600;

    color:#1f2937;

}

.upload-details h4 span{

    color:#dc2626;

}

.upload-details p{

    margin:0;

    font-size:14px;

    color:#6b7280;

}

.upload-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:120px;

    height:42px;

    border:1px solid #0B4EA2;

    border-radius:4px;

    background:#fff;

    color:#0B4EA2;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;

    text-transform:uppercase;

}

.upload-btn:hover{

    background:#EDF4FF;

}

.upload-btn.uploaded{

    background:#EDF4FF;

}

@media(max-width:768px){

    .upload-row{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .upload-btn{

        width:100%;

    }

}

/*=====================================
UPLOAD STATES
======================================*/

.upload-btn{

    position:relative;

    user-select:none;

}

.upload-btn.uploaded{

    background:#EDF4FF;

    border-color:#0B4EA2;

    color:#0B4EA2;

}

.upload-btn.uploaded i{

    margin-left:6px;

}

.upload-btn.error{

    border-color:#dc2626;

    color:#dc2626;

}

.input-error{

    border:2px solid #dc2626 !important;

    background:#fff5f5;

}

.field-error{

    color:#dc2626;

}

/*=====================================================
STEP 6 : REVIEW & SUBMIT
=====================================================*/

.review-section{

    width:100%;

}

.review-title{

    font-size:16px;

    font-weight:500;

    color:#4b4b4b;

    margin-bottom:36px;

}

.review-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px 0;

}

.review-last{

    margin-bottom:28px;

}

.review-label{

    font-size:1rem;

    font-weight:500;

    color:#222;

}

.review-edit-btn{

    padding: .4rem 1rem;

    border:1px solid #7aa8ff;

    background:#fff;

    color:#0b4ea2;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.review-edit-btn:hover{

    background:#0b4ea2;

    color:#fff;

}

.review-checkboxes{

    margin-top:10px;

}

.review-check{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:20px;

    font-size:.65rem;

    line-height:1.7;

    color:#555 !important;

}

.review-check label {
    color: #555;
}

.review-check input{

    margin-top:3px;

    width:18px;

    height:18px;

    accent-color:#0b4ea2;

    cursor:pointer;

}

.review-check a{

    color:#0b4ea2;

    font-weight:500;

    text-decoration:none;

}

.review-check a:hover{

    text-decoration:underline;

}

.review-buttons{

    margin-top:45px;

}

.submit-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:0 34px;

    height:56px;

    border:none;

    background:#0e8d46;

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.submit-btn:hover{

    background:#0a7538;

}

.review-security{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:38px;

    color:#8b8b8b;

    font-size:14px;

    font-weight:500;

    letter-spacing:.3px;

}

.review-security i{

    font-size:13px;

}

/*=====================================================
TABLET
=====================================================*/

@media(max-width:992px){

    .review-label{

        font-size:22px;

    }

    .review-edit-btn{

        width:78px;

        height:42px;

        font-size:14px;

    }

}

/*=====================================================
PHONE
=====================================================*/

@media(max-width:768px){

    .review-row{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .review-edit-btn{

        width:100%;

    }

    .review-label{

        font-size:20px;

    }

    .review-check{

        font-size:14px;

    }

    .review-buttons{

        flex-direction:column;

        gap:18px;

    }

    .review-buttons button{

        width:100%;

    }

    .submit-btn{

        width:100%;

    }

    .review-security{

        flex-direction:column;

        text-align:center;

        font-size:13px;

        gap:8px;

    }

}



/*=========================================
UPLOAD STATUS
=========================================*/

.upload-status{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:14px;

    font-size:14px;

    font-weight:500;

    color:#27ae60;

}

.upload-status i{

    font-size:15px;

}

.upload-btn.uploaded{

    background:#27ae60;

    border-color:#27ae60;

    color:#fff;

}

/*=====================================================
SUCCESS SCREEN
=====================================================*/

.success-screen{

    max-width:720px;

    margin:80px auto;

    text-align:center;

    padding:70px 50px;

    background:#fff;

    border-radius:12px;

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

}

.success-icon{

    font-size:90px;

    color:#25b864;

    margin-bottom:30px;

}

.success-screen h2{

    font-size:34px;

    margin-bottom:18px;

    color:#1f1f1f;

}

.success-screen p{

    color:#6d6d6d;

    font-size:17px;

    line-height:1.8;

}

.reference-box{

    margin:35px auto;

    padding:20px;

    background:#f5f7fa;

    border-radius:8px;

    font-size:18px;

}

.reference-box strong{

    display:block;

    margin-top:8px;

    font-size:24px;

    color:#0d4ea6;

}

.success-note{

    margin:35px 0;

}

@media (max-width:992px){

.review-row{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

.review-edit-btn{

    width:100%;

}

.review-label{

    font-size:22px;

}

.review-buttons{

    flex-direction:column;

}

.review-buttons button{

    width:100%;

}

.success-screen{

    padding:55px 35px;

}

}

@media (max-width:768px){

.review-title{

    font-size:26px;

}

.review-label{

    font-size:19px;

}

.review-check{

    font-size:14px;

}

.review-security{

    font-size:12px;

    text-align:center;

}

.success-screen{

    margin:40px 15px;

    padding:40px 25px;

}

.success-screen h2{

    font-size:28px;

}

.success-screen p{

    font-size:15px;

}

.reference-box{

    font-size:15px;

}

.reference-box strong{

    font-size:20px;

}

.success-icon{

    font-size:70px;

}

}