/* =========================================
   UPGRADE — MODAL (TRIAL / INADIMPLÊNCIA)
========================================= */

.nf-plan-upgrade-modal{

    z-index:1000001;

    align-items:center;
    justify-content:center;

    padding:16px;
}

.nf-plan-upgrade-modal-content{

    position:relative;

    width:100%;
    max-width:920px;
    max-height:calc(100vh - 32px);

    padding:0;

    overflow:visible;

    background:#fffdf8;
    border:1px solid
    rgba(139,94,0,.14);
    border-radius:24px;
    box-shadow:
    0 24px 52px
    rgba(43,22,0,.16),
    0 0 0 1px
    rgba(255,255,255,.6)
    inset;
}

.nf-plan-upgrade-modal-close{

    position:absolute;
    top:12px;
    right:12px;
    z-index:4;

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    border:1px solid
    rgba(139,94,0,.16);

    background:rgba(255,253,248,.92);
    color:#6b4f2d;

    font-size:14px;
    line-height:1;

    transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.nf-plan-upgrade-modal-close:hover{

    background:#fff;
    border-color:rgba(139,94,0,.28);
    transform:scale(1.04);
}

.nf-plan-upgrade--modal{

    width:100%;
    max-height:calc(100vh - 32px);

    display:flex;
    flex-direction:column;

    padding:0;

    background:transparent;
    overflow:visible;
}

.nf-plan-upgrade-hero{

    flex-shrink:0;

    padding:18px 24px 14px;

    text-align:center;

    background:
    radial-gradient(
        circle at 50% 0%,
        rgba(246,213,138,.28) 0%,
        rgba(246,213,138,0) 70%
    ),
    linear-gradient(
        180deg,
        #fff8ee 0%,
        #fffdf8 100%
    );

    border-bottom:1px solid
    rgba(139,94,0,.08);
}

.nf-plan-upgrade-hero-brand{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin-bottom:10px;
}

.nf-plan-upgrade-icon-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        #f8e3b0 0%,
        #e8c36a 100%
    );

    border:1px solid
    rgba(180,83,9,.22);

    box-shadow:
    0 6px 16px
    rgba(180,83,9,.14);

    font-size:18px;
    line-height:1;
}

.nf-plan-upgrade-logo{

    width:32px;
    height:32px;
    object-fit:contain;

    margin:0;

    filter:brightness(0)
    saturate(100%)
    invert(18%)
    sepia(42%)
    saturate(1500%)
    hue-rotate(5deg)
    brightness(0.38);
}

.nf-plan-upgrade-hero h1{

    margin:0 0 6px;

    font-size:clamp(
        18px,
        2.4vw,
        24px
    );
    line-height:1.2;
    font-weight:800;
    color:#211404;
    letter-spacing:-.01em;
}

.nf-plan-upgrade-lead{

    margin:0 auto;

    max-width:560px;

    font-size:13px;
    line-height:1.45;
    font-weight:500;
    color:#6b5840;
}

.nf-plan-upgrade-body{

    flex:1;
    overflow:visible;

    padding:16px 20px 18px;
}

.nf-plan-upgrade-grid{

    width:100%;

    display:grid;
    grid-template-columns:repeat(
        2,
        minmax(0,1fr)
    );
    gap:14px;
    align-items:stretch;
}

.nf-plan-upgrade-card{

    position:relative;

    display:flex;
    flex-direction:column;
    gap:10px;

    min-height:100%;

    padding:16px 14px 14px;

    background:#fff;

    border:1px solid
    rgba(139,94,0,.12);
    border-radius:16px;

    box-shadow:
    0 8px 22px
    rgba(43,22,0,.06);
}

.nf-plan-upgrade-card--featured{

    border:2px solid
    rgba(180,83,9,.48);

    background:linear-gradient(
        180deg,
        #fff 0%,
        #fff9e8 100%
    );

    box-shadow:
    0 14px 32px
    rgba(180,83,9,.16),
    0 0 0 1px
    rgba(246,213,138,.35)
    inset;

    transform:scale(1.02);
    z-index:1;
}

.nf-plan-upgrade-badge{

    position:absolute;
    top:-10px;
    left:50%;
    transform:translateX(-50%);

    display:inline-flex;

    padding:4px 10px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #f6d58a 0%,
        #e8c36a 100%
    );
    color:#2b1600;

    font-size:9px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;

    box-shadow:0 4px 10px
    rgba(180,83,9,.18);
}

.nf-plan-upgrade-card-head{

    display:flex;
    flex-direction:column;
    gap:4px;

    padding-top:2px;
}

.nf-plan-upgrade-card h2{

    margin:0;

    font-size:18px;
    line-height:1.15;
    font-weight:800;
    color:#211404;
}

.nf-plan-upgrade-card--featured h2{

    font-size:20px;
}

.nf-plan-upgrade-features{

    margin:0;
    padding:0;
    list-style:none;

    display:flex;
    flex-direction:column;
    gap:5px;

    flex:1;
}

.nf-plan-upgrade-card:not(
    .nf-plan-upgrade-card--featured
) .nf-plan-upgrade-features{

    display:grid;
    grid-template-columns:repeat(
        2,
        minmax(0,1fr)
    );
    column-gap:10px;
    row-gap:5px;
}

.nf-plan-upgrade-features li{

    position:relative;

    padding-left:22px;

    font-size:12px;
    line-height:1.35;
    font-weight:600;
    color:#4a3728;
}

.nf-plan-upgrade-features li::before{

    content:'';

    position:absolute;
    left:0;
    top:1px;

    width:16px;
    height:16px;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        #f8e3b0 0%,
        #e8c36a 100%
    );

    box-shadow:0 2px 5px
    rgba(180,83,9,.12);
}

.nf-plan-upgrade-features li::after{

    content:'✓';

    position:absolute;
    left:4px;
    top:2px;

    font-size:9px;
    font-weight:800;
    color:#7c4a03;
    line-height:1;
}

.nf-plan-upgrade-price{

    display:flex;
    align-items:baseline;
    gap:4px;

    margin:2px 0 4px;
}

.nf-plan-upgrade-price strong{

    font-size:30px;
    line-height:1;
    font-weight:800;
    color:#211404;
    letter-spacing:-.03em;
}

.nf-plan-upgrade-card--featured
.nf-plan-upgrade-price strong{

    font-size:34px;
    color:#7c4a03;
}

.nf-plan-upgrade-price span{

    font-size:12px;
    font-weight:600;
    color:#8b7355;
}

.nf-plan-upgrade-btn{

    width:100%;
    justify-content:center;

    min-height:42px;
    margin-top:auto;

    font-size:13px;
    font-weight:800;
}

.nf-plan-upgrade-card--featured
.nf-plan-upgrade-btn{

    min-height:44px;
    font-size:14px;
}

.nf-plan-upgrade-note{

    width:100%;

    margin:0 0 12px;

    padding:10px 12px;

    border-radius:10px;

    background:#fff7e8;
    border:1px solid
    rgba(180,83,9,.2);

    font-size:12px;
    font-weight:600;
    line-height:1.45;
    color:#92400e;
    text-align:center;
}

.nf-plan-upgrade-note--error{

    background:#fde8e8;
    border-color:rgba(153,27,27,.18);
    color:#991b1b;
}

.nf-plan-upgrade-meta{

    margin:12px 0 0;

    padding-top:10px;

    border-top:1px solid
    rgba(139,94,0,.08);

    font-size:11px;
    font-weight:600;
    color:#8b7355;
    text-align:center;
}

body.nf-plan-upgrade-open{

    overflow:hidden;
}

@media(max-height:820px){

    .nf-plan-upgrade-hero{

        padding:14px 18px 10px;
    }

    .nf-plan-upgrade-body{

        padding:12px 16px 14px;
    }

    .nf-plan-upgrade-card{

        gap:8px;
        padding:14px 12px 12px;
    }

    .nf-plan-upgrade-price strong{

        font-size:26px;
    }

    .nf-plan-upgrade-card--featured
    .nf-plan-upgrade-price strong{

        font-size:30px;
    }

    .nf-plan-upgrade-features li{

        font-size:11px;
        padding-left:20px;
    }

    .nf-plan-upgrade-btn{

        min-height:38px;
    }

}

@media(max-width:768px){

    .nf-plan-upgrade-modal{

        padding:10px;
    }

    .nf-plan-upgrade-modal-content{

        border-radius:20px;
        max-height:calc(100vh - 20px);
    }

    .nf-plan-upgrade--modal{

        max-height:calc(100vh - 20px);
    }

    .nf-plan-upgrade-hero{

        padding:16px 16px 12px;
    }

    .nf-plan-upgrade-body{

        padding:14px 14px 16px;
    }

    .nf-plan-upgrade-grid{

        grid-template-columns:1fr;
        gap:16px;
    }

    .nf-plan-upgrade-card--featured{

        margin-top:6px;
        transform:none;
    }

    .nf-plan-upgrade-card:not(
        .nf-plan-upgrade-card--featured
    ) .nf-plan-upgrade-features{

        grid-template-columns:1fr;
    }

    .nf-plan-upgrade-price strong{

        font-size:28px;
    }

}

/* =========================================
   TELA CHEIA (LEGADO)
========================================= */

.nf-app.nf-app--upgrade{

    display:block;
    width:100%;
    min-height:100vh;
}

.nf-plan-upgrade{

    width:100%;
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px 20px;

    background:
    linear-gradient(
        180deg,
        #f8f3ea 0%,
        #efe6d7 100%
    );
}

.nf-plan-upgrade-shell{

    width:100%;
    max-width:960px;

    margin:0 auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;
}

.nf-plan-upgrade-header{

    width:100%;
    max-width:720px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;

    text-align:center;
}

.nf-plan-upgrade-header h1{

    margin:0;

    font-size:clamp(
        26px,
        4vw,
        34px
    );
    line-height:1.2;
    color:#211404;
}
