/* =========================================
   BUTTONS
========================================= */

.nf-btn{

    height:46px;

    padding:0 18px;

    border:none;

    border-radius:14px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.2s ease;

    text-decoration:none;
}

/* PRIMARY */

.nf-btn-primary{

    background:#211404;

    color:#f3d38a;
}

.nf-btn-primary:hover{

    background:#f3d38a;

    color:#211404;

    transform:translateY(-2px);
}

/* SECONDARY */

.nf-btn-secondary{

    background:#efe7d7;

    color:#8b5e00;
}

.nf-btn-secondary:hover{

    background:#e8d8b7;

    transform:translateY(-2px);
}

/* SUCCESS */

.nf-btn-success{

    background:#dcfce7;

    color:#15803d;
}

.nf-btn-success:hover{

    background:#bbf7d0;

    transform:translateY(-2px);
}

/* DANGER */

.nf-btn-danger{

    background:#fee2e2;

    color:#dc2626;
}

.nf-btn-danger:hover{

    background:#fecaca;

    transform:translateY(-2px);
}

.nf-bank-tile[data-bank="bb"]
.nf-bank-tile__logo,
.nf-bank-logo-badge[data-bank="bb"]{

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

input.nf-date-mask{

    letter-spacing:.01em;
}

/* REMOVE ACTIVE */

.nf-btn,
.nf-btn:hover,
.nf-btn:focus,
.nf-btn:active{

    outline:none !important;

    box-shadow:none !important;

    -webkit-tap-highlight-color:
    transparent !important;
}

/* =========================================
   INPUTS
========================================= */

.nf-input,
.nf-select,
.nf-textarea{

    width:100%;

    border:1px solid
    rgba(139,94,0,.10);

    background:#fffaf2;

    border-radius:14px;

    padding:0 16px;

    font-size:14px;

    color:#211404;

    transition:.2s ease;
}

/* INPUT */

.nf-input{

    height:46px;
}

/* SELECT */

.nf-select{

    height:46px;

    cursor:pointer;
}

/* TEXTAREA */

.nf-textarea{

    min-height:120px;

    padding:14px 16px;

    resize:none;
}

/* FOCUS */

.nf-input:focus,
.nf-select:focus,
.nf-textarea:focus{

    outline:none;

    border-color:#c89b2b;

    box-shadow:
    0 0 0 4px
    rgba(200,155,43,.10);

    background:#fffdf8;
}

.nf-input:hover,
.nf-select:hover,
.nf-textarea:hover{

    border-color:
    rgba(139,94,0,.28);
}

.nf-input::placeholder,
.nf-textarea::placeholder,
input::placeholder{

    color:rgba(107,74,18,.42);

    font-weight:500;

    opacity:1;
}

input[type="number"].nf-input,
input[type="date"].nf-input{

    height:46px;
}

/* =========================================
   BADGES
========================================= */

.nf-badge{

    height:28px;

    padding:0 12px;

    border-radius:999px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:700;
}

/* SUCCESS */

.nf-badge-success{

    background:
    rgba(34,197,94,.12);

    color:#16a34a;
}

/* DANGER */

.nf-badge-danger{

    background:
    rgba(239,68,68,.12);

    color:#dc2626;
}

/* WARNING */

.nf-badge-warning{

    background:
    rgba(245,158,11,.14);

    color:#b45309;
}

/* INFO */

.nf-badge-info{

    background:
    rgba(200,155,43,.14);

    color:#8b5e00;
}

/* NEUTRAL */

.nf-badge-neutral{

    background:#f3f4f6;

    color:#374151;
}

/* =========================================
   TABLES
========================================= */

.nf-table-premium{

    width:100%;

    border-collapse:separate;

    border-spacing:0 2px;
}

/* HEAD */

.nf-table-premium thead th{

    background:#211404;

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    padding:12px 16px;

    text-align:left;

    white-space:nowrap;
}

.nf-table-premium thead th:first-child{

    border-radius:14px 0 0 14px;
}

.nf-table-premium thead th:last-child{

    border-radius:0 14px 14px 0;
}

/* BODY */

.nf-table-premium tbody tr{

    background:#ffffff;

    transition:.2s ease;
}

.nf-table-premium tbody td{

    padding:12px 16px;

    font-size:13px;

    color:#0f172a;

    border:none;

    white-space:nowrap;
}

.nf-table-premium tbody td:first-child{

    border-radius:14px 0 0 14px;
}

.nf-table-premium tbody td:last-child{

    border-radius:0 14px 14px 0;
}

.nf-table-premium tbody tr:hover td{

    background:#fffdf8;
}

/* =========================================
   CARD
========================================= */

.nf-card-premium{

    background:#fffaf2;

    border-radius:22px;

    padding:24px;

    border:1px solid
    rgba(139,94,0,.08);

    box-shadow:
    0 6px 18px
    rgba(18,11,2,.04);
}

/* =========================================
   MODAL
========================================= */

.nf-modal{

    position:fixed;

    inset:0;

    display:none;

    background:
    rgba(15,23,42,.45);

    backdrop-filter:blur(4px);

    align-items:center;

    justify-content:center;

    padding:20px;

    z-index:999999;
}

.nf-modal-content{

    width:100%;

    max-width:520px;

    background:#fffaf2;

    border-radius:24px;

    padding:28px;
}

/* =========================================
   GRID
========================================= */

.nf-grid-2{

    display:grid;

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

    gap:18px;
}

.nf-grid-3{

    display:grid;

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

    gap:18px;
}

.nf-grid-4{

    display:grid;

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

    gap:18px;
}

/* =========================================
   RESPONSIVO
========================================= */

@media(max-width:768px){

    .nf-grid-2,
    .nf-grid-3,
    .nf-grid-4{

        grid-template-columns:1fr;
    }

}

/* =========================================
   MODAL
========================================= */

.nf-modal{

    position:fixed;

    inset:0;

    background:
    rgba(15,23,42,.45);

    backdrop-filter:blur(4px);

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    z-index:999999;
}

/* CONTENT */

.nf-modal-content{

    width:100%;

    max-width:560px;

    background:#fffaf2;

    border-radius:28px;

    padding:26px;

    box-shadow:
    0 20px 60px
    rgba(15,23,42,.18);

    animation:
    nfModal .18s ease;
}

.nf-history-info-modal{

    max-width:1100px !important;

    width:min(1100px,90vw) !important;
}

/* ANIMATION */

@keyframes nfModal{

    from{

        opacity:0;

        transform:
        translateY(10px)
        scale(.98);
    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);
    }

}

/* HEADER */

.nf-modal-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    margin-bottom:22px;
}

.nf-modal-header h2{

    font-size:24px;

    font-weight:900;

    color:#211404;

    margin-bottom:4px;
}

.nf-modal-header p{

    color:#7c6f60;

    font-size:14px;

    line-height:1.5;
}

/* CLOSE — padrão global Nexden */

.nf-app .nf-modal-close,
.nf-modal .nf-modal-close,
.nf-modal-header .nf-modal-close,
button.nf-modal-close{

    width:38px;

    height:38px;

    min-width:38px;

    min-height:38px;

    padding:0;

    border:none !important;

    border-radius:12px;

    background:transparent !important;

    background-color:transparent !important;

    background-image:none !important;

    color:#8b5e00 !important;

    font-size:18px;

    line-height:1;

    font-weight:700;

    cursor:pointer;

    flex:0 0 auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:
    background-color .2s ease,
    color .2s ease;

    appearance:none !important;

    -webkit-appearance:none !important;

    outline:none !important;

    box-shadow:none !important;

    filter:none !important;

    -webkit-tap-highlight-color:
    transparent !important;
}

.nf-app .nf-modal-close:hover,
.nf-app .nf-modal-close:focus,
.nf-app .nf-modal-close:focus-visible,
.nf-modal .nf-modal-close:hover,
.nf-modal .nf-modal-close:focus,
.nf-modal .nf-modal-close:focus-visible,
.nf-modal-header .nf-modal-close:hover,
.nf-modal-header .nf-modal-close:focus,
.nf-modal-header .nf-modal-close:focus-visible,
button.nf-modal-close:hover,
button.nf-modal-close:focus,
button.nf-modal-close:focus-visible{

    background:#efe7d7 !important;

    background-color:#efe7d7 !important;

    background-image:none !important;

    color:#211404 !important;

    outline:none !important;

    box-shadow:none !important;

    filter:none !important;
}

.nf-app .nf-modal-close:active,
.nf-modal .nf-modal-close:active,
.nf-modal-header .nf-modal-close:active,
button.nf-modal-close:active{

    background:#e8d8b7 !important;

    background-color:#e8d8b7 !important;

    color:#211404 !important;
}

/* BODY */

.nf-modal-body{

    display:flex;

    flex-direction:column;

    gap:18px;
}

/* FOOTER */

.nf-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:24px;
}

/* MOBILE */

@media(max-width:768px){

    .nf-modal-content{

        padding:22px;

        border-radius:22px;
    }

    .nf-modal-header h2{

        font-size:20px;
    }

}

/* =========================================
   LABEL
========================================= */

.nf-label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:700;

    color:#211404;
}

/* =========================================
   GOAL CARD
========================================= */

/* =========================================
   GOAL CARD PREMIUM
========================================= */

.nf-goal-card-premium{

    margin-bottom:5px;

    background:#ffffff;

    border:1px solid
    rgba(139,94,0,.10);

    border-radius:18px;

    padding:16px;

    display:flex;

    flex-direction:column;

    gap:12px;

    transition:.2s ease;

    box-shadow:
    0 8px 24px
    rgba(0,0,0,.04);

    cursor:pointer;

    position:relative;
}

.nf-goal-card-premium:hover{

    transform:translateY(-2px);
}

/* TOP */

.nf-goal-top{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;
}

.nf-goal-top h3{

    font-size:18px;

    font-weight:800;

    color:#fff7e8;

    margin-bottom:2px;
}

.nf-goal-top span{

    font-size:13px;

    font-weight:700;

    color:#f3d38a;
}

/* PROGRESS */

.nf-goal-progress{

    width:100%;

    height:6px;

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

    border-radius:999px;

    overflow:hidden;
}

.nf-goal-progress-fill{

    height:100%;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        #d4a017,
        #f3d38a
    );
}

/* BOTTOM */

.nf-goal-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;
}

/* PERCENT */

.nf-goal-percent{

    font-size:14px;

    font-weight:800;

    color:#ffffff;
}

/* MONTHLY */

.nf-goal-monthly{

    font-size:13px;

    font-weight:700;

    color:#f3d38a;
}

/* DATE */

.nf-goal-date{

    font-size:12px;

    color:#d6c3a0;
}

/* ACTIONS */

.nf-goal-actions{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:4px;
}

.nf-goal-edit,
.nf-goal-cancel,
.nf-goal-complete{

    border:none !important;

    background:transparent !important;

    box-shadow:none !important;

    outline:none !important;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    padding:0;
}

.nf-goal-edit{

    color:#f3d38a;
}

.nf-goal-cancel{

    color:#dc2626;
}

/* =========================================
   DATE INPUT
========================================= */

/* =========================================
   DATE INPUT
========================================= */

.nf-input[type="date"]{

    height:46px !important;

    padding:0 16px !important;

    appearance:none;

    -webkit-appearance:none;

    background:#fffaf2;

    color:#211404;

    font-family:inherit;

    line-height:46px;
}

.nf-input[type="date"]::-webkit-date-and-time-value{

    text-align:left;
}

.nf-input[type="date"]::-webkit-calendar-picker-indicator{

    opacity:.6;

    cursor:pointer;

    margin:0;
}

.nf-input[type="date"]::-webkit-calendar-picker-indicator{

    opacity:.6;

    cursor:pointer;
}


/* =========================================
   DISTRIBUTION
========================================= */

.nf-distribution-modal{

    width:min(1080px,88vw);

    max-width:96vw;

    max-height:92vh;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    padding:26px;
}

.nf-distribution-summary{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:4px;

    padding:0;

    margin:0;
}

.nf-summary-box{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:0 10px;

    min-width:100px;

    position:relative;
}

.nf-summary-box:not(:last-child)::after{

    content:'|';

    position:absolute;

    right:-5px;

    top:50%;

    transform:translateY(-50%);

    color:#d6c3a0;

    font-size:12px;
}

.nf-summary-box span{

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.4px;

    color:#9b8a75;

    margin-bottom:2px;
}

.nf-summary-box strong{

    font-size:13px;

    color:#211404;

    font-weight:800;
}


.nf-distribution-groups{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    display:grid;

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

    gap:12px;

    padding-right:2px;

    min-width:0;
}

/* =========================================
   DISTRIBUTION ITEMS
========================================= */

.nf-distribution-group{

    background:#fffaf2;

    border-radius:20px;

    padding:10px;

    display:flex;

    flex-direction:column;

    gap:8px;

    min-height:260px;

    border:1px solid
    rgba(139,94,0,.08);

    min-width:0;

    overflow:hidden;
}

.nf-distribution-group h3{

    font-size:18px;

    color:#211404;

    font-weight:900;
}

.nf-distribution-item{

    display:flex;

    flex-direction:column;

    gap:6px;

    background:#ffffff;

    border-radius:12px;

    padding:8px;

    border:1px solid
    rgba(139,94,0,.08);

    min-width:0;
}


.nf-distribution-item strong{

    display:block;

    color:#211404;

    margin-bottom:4px;
}

.nf-distribution-item span{

    font-size:13px;

    color:#7c6f60;
}

.nf-distribution-input{

    width:100%;

    height:42px;

    border-radius:12px;
}

.nf-distribution-item strong{

    font-size:13px;

    font-weight:800;

    color:#211404;
}

.nf-distribution-input{

    width:100%;

    height:36px;

    border-radius:10px;

    font-size:13px;

    padding:0 12px;
}

.nf-distribution-item strong{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:13px;

    font-weight:800;

    color:#211404;
}

.nf-distribution-item strong small{

    font-size:9px;

    opacity:.55;

    font-weight:600;
}

.nf-distribution-input{

    width:100%;

    height:32px;

    border-radius:8px;

    font-size:12px;

    padding:0 10px;
}

/* =========================================
   DISTRIBUTION HEADER
========================================= */

.nf-distribution-top{

    margin-bottom:8px;
}

.nf-distribution-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:24px;

    width:100%;

    flex-wrap:nowrap;
}

.nf-distribution-footer-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

    flex-shrink:0;

    margin-left:auto;
}

@media(max-width:900px){

    .nf-distribution-footer{

        flex-direction:column;

        align-items:stretch;

        gap:16px;
    }

    .nf-distribution-footer-actions{

        margin-left:0;

        justify-content:flex-end;

        flex-wrap:wrap;
    }

    .nf-distribution-summary{

        justify-content:center;
    }

}

/* =========================================
   DISABLED BUTTON
========================================= */

.nf-btn-disabled,
.nf-primary-btn.nf-btn-disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;
}

.nf-goal-complete{

    border:none;

    background:none;

    color:#16a34a;

    font-size:13px;

    font-weight:800;

    cursor:pointer;
}

button,
button:hover,
button:focus,
button:active{

    outline:none !important;

    box-shadow:none !important;

    background-image:none !important;

    -webkit-tap-highlight-color:
    transparent !important;
}

.nf-btn-active,
.nf-btn-active:hover,
.nf-btn-active:focus,
.nf-btn-active:active,
.nf-btn-active:focus-visible{

    background:#211404 !important;

    color:#f3d38a !important;

    border:none !important;

    box-shadow:none !important;

    outline:none !important;

    background-image:none !important;

    -webkit-tap-highlight-color:
    transparent !important;
}

button:focus-visible{

    outline:none !important;

    box-shadow:none !important;

    border:none !important;
}

button{

    -webkit-tap-highlight-color:
    transparent;

    appearance:none;
}

.nf-goal-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    margin-bottom:6px;
}

.nf-goal-left{

    font-size:10px;

    opacity:.55;

    color:#ffe8a3;

    font-weight:500;

    white-space:nowrap;

    display:flex;

    align-items:center;
}

/* =========================================
   REMOVE PINK HOVER DEFINITIVE
========================================= */

.nf-goal-actions button,
.nf-goal-actions button:hover,
.nf-goal-actions button:focus,
.nf-goal-actions button:active,
.nf-goal-actions button:focus-visible{

    background:transparent !important;

    outline:none !important;

    box-shadow:none !important;

    border:none !important;

    -webkit-tap-highlight-color:
    transparent !important;
}

/* EDIT */

.nf-goal-edit:hover{

    color:#ffd978 !important;
}

/* CANCEL */

.nf-goal-cancel:hover{

    color:#ff4d4d !important;
}

/* COMPLETE */

.nf-goal-complete:hover{

    color:#22c55e !important;
}

/* =========================================
   FIX BUTTON ACTIVE WORDPRESS
========================================= */

button.nf-btn-active,
button.nf-btn-active:hover,
button.nf-btn-active:focus,
button.nf-btn-active:active,
button.nf-btn-active:focus-visible{

    background:#211404 !important;

    color:#f3d38a !important;

    border:none !important;

    outline:none !important;

    box-shadow:none !important;

    background-image:none !important;

    filter:none !important;

    appearance:none !important;

    -webkit-appearance:none !important;

    -webkit-tap-highlight-color:
    transparent !important;
}