/* =========================================
   ONBOARDING — NEXDEN (MODAL)
========================================= */

.nf-onboarding-modal{

    z-index:1000000;
}

.nf-onboarding-modal-content{

    position:relative;

    width:100%;
    max-width:680px;
    max-height:min(92vh,860px);

    padding:0;

    overflow:hidden;

    background:#fffdf8;
    border:1px solid
    rgba(139,94,0,.12);
    border-radius:24px;
    box-shadow:0 24px 48px
    rgba(43,22,0,.14);
}

.nf-onboarding-modal-close{

    position:absolute;
    top:18px;
    right:18px;
    z-index:3;
}

.nf-onboarding{

    max-height:min(92vh,860px);
    overflow:auto;

    padding:28px 20px 24px;
}

.nf-onboarding-shell{

    width:100%;
    max-width:640px;

    margin:0 auto;

    display:flex;
    flex-direction:column;
    gap:18px;
}

.nf-onboarding-brand{

    display:flex;
    align-items:center;
    gap:14px;

    padding:0;
}

.nf-onboarding-logo{

    width:52px;
    height:52px;
    object-fit:contain;

    filter:brightness(0)
    saturate(100%)
    invert(18%)
    sepia(42%)
    saturate(1500%)
    hue-rotate(5deg)
    brightness(0.38);
}

.nf-onboarding-brand-text{

    display:flex;
    flex-direction:column;
    gap:4px;
}

.nf-onboarding-brand-text strong{

    font-size:17px;
    font-weight:800;
    color:#211404;
    letter-spacing:.01em;
}

.nf-onboarding-brand-text span{

    font-size:13px;
    color:#8b5e00;
    font-weight:700;
}

.nf-onboarding-progress{

    height:8px;

    border-radius:999px;
    background:#efe6d7;
    overflow:hidden;
}

.nf-onboarding-progress-fill{

    display:block;
    height:100%;
    width:14.28%;

    border-radius:999px;
    background:linear-gradient(
        90deg,
        #8b5e00 0%,
        #f3d38a 100%
    );

    transition:width .28s ease;
}

.nf-onboarding-card{

    padding:0;

    background:transparent;

    border:none;
    border-radius:0;

    box-shadow:none;
}

.nf-onboarding-card h1{

    margin:0 0 10px;

    font-size:24px;
    line-height:1.25;
    color:#120b02;
    font-weight:800;
}

.nf-onboarding-lead{

    margin:0 0 12px;

    font-size:15px;
    line-height:1.6;
    color:#3d2e1f;
    font-weight:500;
}

.nf-onboarding-lead--compact{

    margin-bottom:8px;
    font-size:14px;
}

.nf-onboarding-note{

    margin:14px 0 0;

    font-size:13px;
    line-height:1.55;
    color:#5c4a32;
    font-weight:600;
}

.nf-onboarding-field-label{

    margin:0 0 8px;

    font-size:14px;
    font-weight:700;
    color:#211404;
}

.nf-onboarding-error{

    margin:0 0 14px;

    padding:10px 12px;

    border-radius:10px;

    background:#fee2e2;
    color:#b91c1c;

    font-size:13px;
    font-weight:600;
}

.nf-onboarding-step{

    animation:nfOnboardingIn .22s ease;
}

@keyframes nfOnboardingIn{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.nf-onboarding-options{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;

    margin-top:8px;
}

.nf-onboarding-options--inline{

    grid-template-columns:repeat(2,minmax(0,1fr));
}

.nf-onboarding-option{

    padding:14px 12px;

    border:1px solid
    rgba(139,94,0,.16);
    border-radius:14px;

    background:#fff;

    color:#4a3728;
    font-size:14px;
    font-weight:700;

    text-align:center;

    cursor:pointer;

    transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.nf-onboarding-option:hover,
.nf-onboarding-option:focus,
.nf-onboarding-option:focus-visible{

    border-color:#b45309;
    background:#fffdf8;
    color:#211404;
    outline:none;
}

.nf-onboarding-option.is-selected{

    border-color:#8b5e00;
    background:#f5efe3;
    color:#211404;
    box-shadow:0 0 0 3px
    rgba(180,83,9,.12);
}

.nf-onboarding-fields{

    display:grid;
    grid-template-columns:1fr 140px;
    gap:12px;

    margin-top:10px;
}

.nf-onboarding-check{

    display:flex;
    align-items:flex-start;
    gap:10px;

    margin-top:16px;

    font-size:13px;
    line-height:1.45;
    color:#4a3728;
}

.nf-onboarding-check input{

    margin-top:3px;
    accent-color:#b45309;
}

.nf-onboarding-utilities--compact{

    display:grid;
    grid-template-columns:1fr;
    gap:8px;

    margin-top:4px;
}

.nf-onboarding-utility-row{

    display:grid;
    grid-template-columns:minmax(72px,.85fr) minmax(96px,1.1fr) 1fr 64px;
    gap:8px;
    align-items:center;

    padding:8px 10px;

    border:1px solid
    rgba(139,94,0,.1);
    border-radius:12px;
    background:#fff;
}

.nf-onboarding-utility-label{

    font-size:13px;
    font-weight:700;
    color:#211404;
}

.nf-onboarding-utility-provider,
.nf-onboarding-utility-amount,
.nf-onboarding-utility-day{

    min-height:38px;
    padding:8px 10px;
    font-size:13px;
}

.nf-onboarding-income-fields,
.nf-onboarding-goal-fields{

    margin-top:12px;
}

.nf-onboarding-fields--stack{

    grid-template-columns:1fr;
}

.nf-onboarding-utilities{

    display:flex;
    flex-direction:column;
    gap:14px;

    margin-top:8px;
}

.nf-onboarding-utility{

    padding:14px;

    border:1px solid
    rgba(139,94,0,.1);
    border-radius:14px;
    background:#fff;
}

.nf-onboarding-utility strong{

    display:block;
    margin-bottom:10px;

    font-size:14px;
    color:#211404;
}

.nf-onboarding-actions{

    display:flex;
    justify-content:space-between;
    gap:12px;

    margin-top:24px;
    padding-top:20px;

    border-top:1px solid
    rgba(139,94,0,.1);
}

.nf-onboarding-actions
.nf-btn{

    min-width:120px;
    justify-content:center;
}

.nf-onboarding
.nf-btn-primary{

    background:#211404;
    color:#f3d38a;
}

.nf-onboarding
.nf-btn-primary:hover,
.nf-onboarding
.nf-btn-primary:focus,
.nf-onboarding
.nf-btn-primary:focus-visible{

    background:#f3d38a;
    color:#211404;
    outline:none;
}

.nf-onboarding
.nf-btn-primary:disabled,
.nf-onboarding
.nf-btn-secondary:disabled{

    opacity:.55;
    cursor:not-allowed;
    transform:none;
}

.nf-onboarding.is-housing-skipped
#nfOnboardingHousingFields{

    opacity:.45;
    pointer-events:none;
}

@media(max-width:640px){

    .nf-onboarding{

        padding:20px 12px 16px;
    }

    .nf-onboarding-modal-close{

        top:12px;
        right:12px;
    }

    .nf-onboarding-card{

        padding:22px 18px;
    }

    .nf-onboarding-card h1{

        font-size:22px;
    }

    .nf-onboarding-options{

        grid-template-columns:1fr;
    }

    .nf-onboarding-fields{

        grid-template-columns:1fr;
    }

    .nf-onboarding-actions{

        flex-direction:column-reverse;
    }

    .nf-onboarding-utility-row{

        grid-template-columns:1fr;
    }

    .nf-onboarding-brand{

        padding:10px 12px;
    }

}

.nf-onboarding-trial-features{

    margin:18px 0 0;
    padding:0;
    list-style:none;

    display:flex;
    flex-direction:column;
    gap:12px;
}

.nf-onboarding-trial-features li{

    position:relative;

    padding-left:22px;

    font-size:15px;
    line-height:1.5;
    font-weight:600;
    color:#3d2e1f;
}

.nf-onboarding-trial-features li::before{

    content:'';
    position:absolute;
    left:0;
    top:9px;

    width:10px;
    height:10px;

    border-radius:50%;
    background:#8b5e00;
}

.nf-onboarding-guided-panel{

    margin-top:16px;
}

.nf-onboarding-guided-form-wrap{

    margin-top:14px;
}

.nf-onboarding-guided-form{

    display:flex;
    flex-direction:column;
    gap:14px;
}

.nf-onboarding-guided-actions{

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.nf-onboarding-guided-actions
.nf-btn{

    min-height:44px;
    flex:1 1 180px;
}

.nf-onboarding-guided-primary{

    width:100%;
    flex:1 1 100%;
}

.nf-onboarding-guided-success{

    margin-top:14px;
    padding:18px 16px;

    border:1px solid
    rgba(139,94,0,.12);
    border-radius:16px;

    background:linear-gradient(
        180deg,
        #fffaf0 0%,
        #fffdf8 100%
    );
}

.nf-onboarding-success-message{

    margin:0 0 14px;

    font-size:15px;
    font-weight:800;
    line-height:1.45;
    color:#166534;
    text-align:center;
}

.nf-onboarding-guided-summary{

    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0 0 14px;
    padding:12px 14px;

    border-radius:12px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(139,94,0,.08);
}

.nf-onboarding-guided-summary-row{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    font-size:14px;
    line-height:1.4;
    color:#4b5563;
}

.nf-onboarding-guided-summary-row strong{

    color:#1f2937;
    font-weight:700;
    text-align:right;
}

.nf-onboarding-guided-prompt{

    margin:0 0 14px;

    font-size:14px;
    font-weight:600;
    line-height:1.45;
    color:#374151;
    text-align:center;
}

.nf-onboarding-card-form{

    margin-top:0;
    padding:0;
}

.nf-onboarding-card-form .nf-card-modal-field,
.nf-onboarding-card-form .nf-card-modal-row{

    margin-bottom:0;
}

.nf-onboarding-card-form .nf-label{

    margin-bottom:8px;
}

.nf-onboarding-card-form .nf-bank-search{

    width:100%;
    min-height:42px;

    padding:10px 12px;

    border:1px solid
    rgba(139,94,0,.16);
    border-radius:12px;

    background:#fff;

    font-size:14px;
    color:#211404;
}

.nf-onboarding-card-form .nf-bank-search:focus{

    outline:none;
    border-color:#8b5e00;
    box-shadow:0 0 0 3px
    rgba(180,83,9,.12);
}

.nf-onboarding-card-form .nf-bank-grid{

    display:grid;
    grid-template-columns:repeat(
        4,
        minmax(0,1fr)
    );
    gap:8px;
}

.nf-onboarding-card-form .nf-custom-bank-tiles{

    display:contents;
}

.nf-onboarding-card-form .nf-bank-tile{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-height:68px;
    padding:10px 8px;

    border:1px solid
    rgba(139,94,0,.16);
    border-radius:14px;

    background:#fff;

    color:#4a3728;
    font-size:12px;
    font-weight:700;
    text-align:center;

    cursor:pointer;

    transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}

.nf-onboarding-card-form .nf-bank-tile:hover,
.nf-onboarding-card-form .nf-bank-tile:focus,
.nf-onboarding-card-form .nf-bank-tile:focus-visible{

    border-color:#b45309;
    background:#fffdf8;
    outline:none;
    transform:translateY(-1px);
}

.nf-onboarding-card-form .nf-bank-tile.selected{

    border-color:#8b5e00;
    background:#f5efe3;
    color:#211404;
    box-shadow:0 0 0 3px
    rgba(180,83,9,.12);
}

.nf-onboarding-card-form .nf-bank-tile__logo{

    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    border-radius:10px;

    background:#f5efe3;

    font-size:11px;
    font-weight:800;
    line-height:1;
}

.nf-onboarding-card-form .nf-bank-tile__name{

    line-height:1.2;
}

.nf-onboarding-card-form .nf-bank-tile--outro
.nf-bank-tile__logo--plus{

    font-size:18px;
    font-weight:700;
}

.nf-onboarding-card-form .nf-brand-grid{

    display:grid;
    grid-template-columns:repeat(
        3,
        minmax(0,1fr)
    );
    gap:8px;
}

.nf-onboarding-card-form .nf-brand-pill{

    min-height:42px;
    padding:10px 12px;

    border:1px solid
    rgba(139,94,0,.16);
    border-radius:14px;

    background:#fff;

    color:#4a3728;
    font-size:13px;
    font-weight:700;
    text-align:center;

    cursor:pointer;

    transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.nf-onboarding-card-form .nf-brand-pill:hover,
.nf-onboarding-card-form .nf-brand-pill:focus,
.nf-onboarding-card-form .nf-brand-pill:focus-visible{

    border-color:#b45309;
    background:#fffdf8;
    outline:none;
}

.nf-onboarding-card-form .nf-brand-pill.selected{

    border-color:#8b5e00;
    background:#f5efe3;
    color:#211404;
    box-shadow:0 0 0 3px
    rgba(180,83,9,.12);
}

.nf-onboarding-card-form .nf-color-picker-row{

    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.nf-onboarding-card-form .nf-card-modal-preview-inline{

    display:flex;
    align-items:center;
    gap:8px;

    flex:1 1 180px;
    min-width:0;
    max-width:220px;
    height:40px;

    padding:0 12px;

    border-radius:12px;
    border:1px solid
    rgba(33,20,4,.12);

    background:var(
        --nf-card-preview-color,
        #820ad1
    );

    color:#ffffff;
}

.nf-onboarding-card-form
.nf-card-modal-preview-inline__logo{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:28px;
    height:22px;

    padding:0 4px;

    border-radius:6px;

    background:rgba(255,255,255,.18);

    font-size:10px;
    font-weight:800;
    line-height:1;
}

.nf-onboarding-card-form
.nf-card-modal-preview-inline__bank{

    font-size:12px;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.nf-onboarding-card-form .nf-color-swatch{

    width:40px;
    height:40px;

    border-radius:12px;
    border:2px solid
    rgba(139,94,0,.16);

    cursor:pointer;
}

.nf-onboarding-card-form
.nf-color-swatch--custom{

    width:auto;
    min-width:40px;
    height:40px;

    padding:0 12px;

    border-radius:12px;

    background:#fff;

    font-size:12px;
    font-weight:700;
    color:#4a3728;
}

.nf-onboarding-card-form .nf-card-modal-row{

    display:grid;
    grid-template-columns:repeat(
        2,
        minmax(0,1fr)
    );
    gap:12px;
}

.nf-onboarding-card-form .nf-input{

    min-height:42px;
}

.nf-onboarding-goal-form{

    gap:14px;
}

.nf-onboarding-goal-form .nf-grid-2{

    gap:12px;
}

.nf-onboarding-goal-form .nf-textarea{

    min-height:88px;
    resize:vertical;
}

.nf-onboarding-cards-list{

    display:grid;
    grid-template-columns:repeat(
        auto-fill,
        minmax(220px, 1fr)
    );
    gap:10px;
    margin-bottom:14px;
}

.nf-onboarding-cards-list
.nf-credit-card--readonly{

    pointer-events:none;
}

.nf-onboarding-card-form
.nf-bank-tile[data-bank="nubank"]
.nf-bank-tile__logo{

    background:#820ad1;
    color:#fff;
}

.nf-onboarding-card-form
.nf-bank-tile[data-bank="itau"]
.nf-bank-tile__logo{

    background:#003399;
    color:#fff;
}

.nf-onboarding-card-form
.nf-bank-tile[data-bank="bradesco"]
.nf-bank-tile__logo{

    background:#cc092f;
    color:#fff;
}

.nf-onboarding-card-form
.nf-bank-tile[data-bank="santander"]
.nf-bank-tile__logo{

    background:#ec0000;
    color:#fff;
}

.nf-onboarding-card-form
.nf-bank-tile[data-bank="inter"]
.nf-bank-tile__logo{

    background:#ff7a00;
    color:#fff;
}

.nf-onboarding-card-form
.nf-bank-tile[data-bank="c6"]
.nf-bank-tile__logo{

    background:#242424;
    color:#fff;
}

.nf-onboarding-card-form
.nf-bank-tile[data-bank="caixa"]
.nf-bank-tile__logo{

    background:#005ca9;
    color:#fff;
}

.nf-onboarding-guided-skip{

    width:100%;
    flex:1 1 100%;

    margin:0;
    padding:0;

    border:0;
    background:transparent;

    color:#8b7355;
    font-size:13px;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:3px;

    cursor:pointer;
}

.nf-onboarding-guided-skip:hover,
.nf-onboarding-guided-skip:focus,
.nf-onboarding-guided-skip:focus-visible{

    color:#b45309;
    outline:none;
}

.nf-onboarding-actions
.nf-btn.nf-hidden{

    display:none;
}

.nf-onboarding-card-form
.nf-bank-tile[data-bank="bb"]
.nf-bank-tile__logo{

    background:#fcfc30;
    color:#005aa5;
}

@media(max-width:720px){

    .nf-onboarding-card-form .nf-bank-grid{

        grid-template-columns:repeat(
            2,
            minmax(0,1fr)
        );
    }

    .nf-onboarding-card-form .nf-brand-grid{

        grid-template-columns:repeat(
            2,
            minmax(0,1fr)
        );
    }

    .nf-onboarding-card-form .nf-card-modal-row,
    .nf-onboarding-goal-form .nf-grid-2{

        grid-template-columns:1fr;
    }

    .nf-onboarding-guided-actions
    .nf-btn{

        flex:1 1 100%;
    }

}