/*
 * Pricing SaaS - CSS compartilhado da tabela
 * V38
 *
 * Fonte visual única da tabela para:
 * - pré-visualização administrativa
 * - tabela pública / embed
 *
 * Regras visuais da tabela devem ser adicionadas aqui nas próximas versões.
 */

/*
 * Pricing SaaS Public CSS - V35
 * Arquivo autônomo para a tabela pública.
 * Gerado a partir do CSS base + regras específicas públicas.
 */

:root{
    --bg:#07111f;--panel:#0d1a2b;--panel-2:#101f33;--line:#20324a;
    --text:#edf5ff;--muted:#8fa4bc;--accent:#22b8cf;--danger:#ff6b6b;
    --success:#51cf66;--radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
.auth-page{display:grid;place-items:center;padding:32px 18px;background:radial-gradient(circle at top,#102947 0,#07111f 46%)}
.auth-card{width:min(100%,460px);background:rgba(13,26,43,.96);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 30px 90px rgba(0,0,0,.35)}
.installer-card{width:min(100%,720px)}
.brand-mark{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#04111a;font-weight:900;font-size:24px;margin-bottom:20px}
h1,h2,p{margin-top:0}
h1{font-size:28px;margin-bottom:8px}
h2{font-size:16px;margin:26px 0 14px}
.muted,.hint{color:var(--muted)}
.hint{font-size:13px}
label{display:block;font-size:13px;font-weight:700;color:#c7d6e8;margin:14px 0}
input{width:100%;margin-top:7px;background:#081525;border:1px solid #29415f;border-radius:12px;color:var(--text);padding:13px 14px;outline:none}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,184,207,.12)}
.form-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 17px;font-weight:800;cursor:pointer}
.btn.primary{background:var(--accent);color:#03131b}
.btn.ghost{border:1px solid var(--line);background:transparent;color:var(--text)}
.btn.full{width:100%;margin-top:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.alert{padding:12px 14px;border-radius:12px;margin:14px 0;font-size:14px}
.alert.danger{background:rgba(255,107,107,.11);border:1px solid rgba(255,107,107,.35);color:#ffc9c9}
.alert.success{background:rgba(81,207,102,.11);border:1px solid rgba(81,207,102,.35);color:#b2f2bb}
.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#091625;position:sticky;top:0}
.topbar>div:first-child{display:flex;gap:14px;align-items:center}
.topbar span{color:var(--muted);font-size:13px}
.top-actions{display:flex;gap:14px;align-items:center}
.container{width:min(1180px,calc(100% - 36px));margin:34px auto}
.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.page-heading h1{margin-bottom:5px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.stat-card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.stat-card{padding:20px}
.stat-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.stat-card strong{font-size:24px}
.panel{overflow:hidden}
.panel-head{padding:18px 20px;border-bottom:1px solid var(--line)}
.panel-head h2{margin:0;font-size:17px}
.empty-state{padding:48px 20px;text-align:center;color:var(--muted)}
.empty-state strong{display:block;color:var(--text);margin-bottom:6px}
.data-row{display:flex;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.data-row small{display:block;color:var(--muted);margin-top:4px}
.status{font-size:12px;padding:6px 9px;border-radius:999px;background:var(--panel-2)}
@media(max-width:700px){
  .form-grid.two,.stats-grid{grid-template-columns:1fr}
  .topbar{padding:0 16px}
  .topbar>div:first-child span,.top-actions>span{display:none}
  .page-heading{align-items:flex-start;gap:16px}
}

select{
    width:100%;
    margin-top:7px;
    background:#081525;
    border:1px solid #29415f;
    border-radius:12px;
    color:var(--text);
    padding:13px 14px;
    outline:none;
}
select:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(34,184,207,.12)
}
.narrow-container{width:min(860px,calc(100% - 36px))}
.panel-body{padding:20px}
.form-panel label:first-child{margin-top:0}
.form-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    padding:18px 20px;
    border-top:1px solid var(--line)
}
.field-help{
    display:block;
    margin-top:7px;
    color:var(--muted);
    font-size:12px;
    font-weight:500
}
.btn.compact{padding:9px 12px;font-size:13px}
.btn.danger{
    background:rgba(255,107,107,.12);
    border:1px solid rgba(255,107,107,.35);
    color:#ffc9c9
}
.btn.danger:hover{background:rgba(255,107,107,.2)}
.pricing-admin-list{display:flex;flex-direction:column}
.pricing-admin-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:20px;
    border-bottom:1px solid var(--line)
}
.pricing-admin-row:last-child{border-bottom:0}
.pricing-admin-main{min-width:0}
.pricing-admin-main small,
.pricing-admin-main p,
.pricing-admin-main code{
    display:block;
    color:var(--muted);
    margin-top:6px
}
.pricing-admin-main p{margin-bottom:0}
.pricing-admin-main code{
    width:max-content;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    background:#081525;
    border:1px solid var(--line);
    border-radius:8px;
    padding:5px 8px;
    font-size:12px
}
.pricing-admin-title-line{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px
}
.pricing-admin-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0
}
.pricing-admin-actions form{margin:0}
.status-badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:5px 9px;
    font-size:11px;
    font-weight:800;
    border:1px solid var(--line)
}
.status-draft{color:#ffd43b;background:rgba(255,212,59,.08);border-color:rgba(255,212,59,.22)}
.status-published{color:#8ce99a;background:rgba(81,207,102,.08);border-color:rgba(81,207,102,.22)}
.status-disabled{color:#adb5bd;background:rgba(173,181,189,.08);border-color:rgba(173,181,189,.2)}
.small-stat{font-size:16px!important;word-break:break-word}
.editor-stats{grid-template-columns:repeat(3,1fr)}
.empty-state .btn{margin-top:12px}
@media(max-width:700px){
    .pricing-admin-row{align-items:flex-start;flex-direction:column}
    .pricing-admin-actions{width:100%}
    .pricing-admin-actions .btn,
    .pricing-admin-actions form{flex:1}
    .pricing-admin-actions form .btn{width:100%}
    .editor-stats{grid-template-columns:1fr}
    .form-actions{flex-direction:column-reverse}
    .form-actions .btn{width:100%}
}


.editor-heading-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px
}
.editor-heading-actions form{margin:0}
.preview-panel{margin-bottom:20px}
.preview-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px
}
.preview-panel-head h2{margin-bottom:4px}
.preview-panel-head p{margin:0;font-size:13px}
.pricing-preview-shell{
    padding:34px 24px;
    background:
        radial-gradient(circle at top,rgba(34,184,207,.10),transparent 38%),
        #081525
}
.pricing-preview-heading{
    width:min(720px,100%);
    margin:0 auto 24px;
    text-align:center
}
.preview-kicker{
    display:inline-block;
    margin-bottom:9px;
    color:var(--accent);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em
}
.pricing-preview-heading h3{
    margin:0 0 8px;
    font-size:28px
}
.pricing-preview-heading p{
    margin:0;
    color:var(--muted)
}
.pricing-preview-grid{
    width:min(340px,100%);
    margin:0 auto
}
.pricing-preview-empty-card{
    border:1px solid #29415f;
    border-radius:20px;
    padding:24px;
    background:var(--panel);
    text-align:center
}
.pricing-preview-empty-card span{
    color:var(--accent);
    font-size:12px;
    font-weight:800
}
.pricing-preview-empty-card strong{
    display:block;
    margin:10px 0 8px;
    font-size:20px
}
.pricing-preview-empty-card p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.55
}

/* Página de prévia pública */
.preview-page{
    min-height:100vh;
    background:#07111f
}
.preview-toolbar{
    min-height:64px;
    padding:12px 22px;
    border-bottom:1px solid var(--line);
    background:#091625;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    position:sticky;
    top:0;
    z-index:10
}
.preview-toolbar>div:first-child{
    display:flex;
    align-items:center;
    gap:12px
}
.preview-toolbar>div:first-child span{
    color:var(--muted);
    font-size:13px
}
.preview-toolbar-actions{
    display:flex;
    align-items:center;
    gap:8px
}
.public-preview{
    width:min(1180px,calc(100% - 36px));
    margin:0 auto;
    padding:56px 0 80px
}
.public-preview-heading{
    width:min(760px,100%);
    margin:0 auto 38px;
    text-align:center
}
.public-preview-heading h1{
    font-size:clamp(30px,5vw,48px);
    margin:0 0 12px
}
.public-preview-heading p{
    color:var(--muted);
    font-size:17px;
    line-height:1.6
}
.public-plan-grid{
    display:grid;
    grid-template-columns:minmax(0,360px);
    justify-content:center;
    gap:18px
}
.public-plan-grid.has-multiple{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.public-plan-card{
    position:relative;
    min-width:0;
    border:1px solid #29415f;
    border-radius:24px;
    padding:24px;
    background:var(--panel);
    box-shadow:0 24px 70px rgba(0,0,0,.18)
}
.public-plan-card.recommended{
    border-color:var(--accent);
    box-shadow:0 0 0 1px rgba(34,184,207,.25),0 24px 70px rgba(0,0,0,.22)
}
.public-plan-card h2{
    margin:14px 0 8px;
    font-size:24px
}
.public-plan-card>p{
    color:var(--muted);
    min-height:42px
}
.plan-badge{
    display:inline-flex;
    border-radius:999px;
    padding:6px 10px;
    background:rgba(34,184,207,.10);
    border:1px solid rgba(34,184,207,.30);
    color:var(--accent);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em
}
.preview-price{
    margin:24px 0;
    padding:18px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.preview-price small{
    display:block;
    color:var(--muted);
    margin-bottom:5px
}
.preview-price strong{font-size:20px}
.placeholder-lines{
    display:grid;
    gap:10px;
    margin:20px 0 26px
}
.placeholder-lines i{
    display:block;
    height:11px;
    border-radius:999px;
    background:#152942
}
.placeholder-lines i:nth-child(2){width:86%}
.placeholder-lines i:nth-child(3){width:74%}
.placeholder-lines i:nth-child(4){width:92%}

@media(max-width:700px){
    .editor-heading-actions{justify-content:flex-start;width:100%}
    .page-heading{flex-direction:column}
    .preview-panel-head{align-items:flex-start;flex-direction:column}
    .preview-panel-head .btn{width:100%}
    .preview-toolbar{
        align-items:flex-start;
        flex-direction:column
    }
    .preview-toolbar-actions{width:100%;justify-content:space-between}

    /*
     * Padrão mobile do projeto:
     * cards lado a lado, swipe/arraste natural, próximo card parcialmente visível,
     * sem setas e encaixe por scroll-snap.
     */
    .public-plan-grid,
    .public-plan-grid.has-multiple{
        display:flex;
        justify-content:flex-start;
        gap:14px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scroll-padding-left:4px;
        padding:4px 12vw 14px 4px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .public-plan-grid::-webkit-scrollbar{display:none}
    .public-plan-card{
        flex:0 0 84vw;
        max-width:340px;
        scroll-snap-align:start
    }
}


/* V11 - Prévia contida em painel */
.pricing-board{
    width:min(1040px,100%);
    margin:0 auto;
    border:1px solid #29415f;
    border-radius:24px;
    overflow:hidden;
    background:#0b1828;
    box-shadow:0 26px 80px rgba(0,0,0,.24)
}
.pricing-board-head{
    padding:30px;
    border-bottom:1px solid var(--line);
    background:radial-gradient(circle at top right,rgba(34,184,207,.10),transparent 34%),#0d1a2b
}
.pricing-board-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px
}
.pricing-board-name{color:var(--muted);font-size:12px;font-weight:700}
.pricing-board-copy{max-width:760px}
.pricing-board-copy h1{margin:0 0 10px;font-size:clamp(28px,4vw,44px);line-height:1.08}
.pricing-board-copy p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.pricing-board-body{padding:28px;background:#081525}
.preview-table{
    margin:20px 0 24px;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    background:#091625
}
.preview-table-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:20px;
    padding:12px 14px;
    border-bottom:1px solid var(--line)
}
.preview-table-row:last-child{border-bottom:0}
.preview-table-row span{color:var(--muted);font-size:12px}
.preview-table-row strong{font-size:12px;text-align:right}
.mini-pricing-board{
    width:min(760px,100%);
    margin:0 auto;
    border:1px solid #29415f;
    border-radius:20px;
    overflow:hidden;
    background:#0b1828
}
.mini-pricing-board-head{
    padding:24px;
    border-bottom:1px solid var(--line);
    text-align:left;
    background:#0d1a2b
}
.mini-pricing-board-head h3{margin:7px 0 6px;font-size:25px}
.mini-pricing-board-head p{margin:0;color:var(--muted)}
.mini-pricing-board-body{padding:20px;background:#081525}
.compact-preview-table{margin-bottom:0}
@media(max-width:700px){
    .pricing-board-head,.pricing-board-body{padding:20px}
    .pricing-board-meta{align-items:flex-start;flex-direction:column}
    .pricing-board-copy h1{font-size:30px}
    .preview-table-row{grid-template-columns:1fr;gap:4px}
    .preview-table-row strong{text-align:left}
}


textarea{
    width:100%;
    margin-top:7px;
    resize:vertical;
    min-height:90px;
    background:#081525;
    border:1px solid #29415f;
    border-radius:12px;
    color:var(--text);
    padding:13px 14px;
    outline:none;
    font:inherit
}
textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(34,184,207,.12)
}
.is-hidden{display:none!important}

.pricing-editor-page{overflow-x:hidden}
.pricing-editor-layout{
    width:min(1540px,calc(100% - 28px));
    margin:20px auto 60px;
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr);
    gap:20px;
    align-items:start
}
.pricing-editor-column{min-width:0;display:grid;gap:18px}
.pricing-preview-column{min-width:0}
.preview-sticky{position:sticky;top:90px}
.editor-card{
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--panel);
    overflow:hidden
}
.editor-card-head{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 20px;
    border-bottom:1px solid var(--line)
}
.editor-card-head h1,
.editor-card-head h2{
    margin:3px 0 0;
    font-size:20px
}
.editor-section-kicker{
    display:block;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em
}
.editor-card-body{padding:20px}
.editor-card-actions{
    display:flex;
    justify-content:flex-end;
    padding:16px 20px;
    border-top:1px solid var(--line)
}
.no-top-padding{padding-top:8px}
.check-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#081525
}
.check-row input{width:auto;margin:0}
.check-row span{font-weight:600}

.plan-admin-list{display:grid;gap:10px;padding:14px}
.plan-admin-row{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:64px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#0a1727
}
.plan-admin-row.selected{
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(34,184,207,.08)
}
.plan-admin-select{
    flex:1;
    min-width:0
}
.plan-admin-select strong{
    display:block;
    color:var(--text);
    font-size:14px
}
.plan-admin-select span{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.plan-admin-actions{
    display:flex;
    align-items:center;
    gap:7px
}
.plan-admin-actions form{margin:0}
.icon-action{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:10px;
    background:#081525;
    color:var(--text);
    cursor:pointer;
    font-size:17px
}
.icon-action:hover{border-color:var(--accent);color:var(--accent)}
.icon-action.danger-icon:hover{border-color:var(--danger);color:#ff8787}
.compact-empty{padding:30px 16px}

.editor-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    margin:14px;
    padding:4px;
    background:#081525;
    border-radius:12px
}
.editor-tab{
    border:0;
    border-radius:9px;
    padding:10px;
    background:transparent;
    color:var(--muted);
    font-weight:800;
    cursor:pointer
}
.editor-tab.active{
    background:var(--panel-2);
    color:var(--text);
    box-shadow:0 1px 0 rgba(255,255,255,.04)
}
.editor-tab-panel{display:none}
.editor-tab-panel.active{display:block}
.module-placeholder{
    margin:0 14px 16px;
    padding:30px;
    text-align:center;
    border:1px dashed #29415f;
    border-radius:14px;
    color:var(--muted)
}
.module-placeholder strong{display:block;color:var(--text);margin-bottom:6px}

.preview-sticky{
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    background:var(--panel)
}
.preview-sticky-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    border-bottom:1px solid var(--line)
}
.preview-sticky-head strong{display:block;margin-top:3px}
.live-preview-shell{
    padding:24px;
    background:radial-gradient(circle at top,rgba(34,184,207,.08),transparent 28%),#081525
}
.live-preview-heading{text-align:center;margin-bottom:18px}
.live-preview-heading h2{margin:7px 0 6px;font-size:28px}
.live-preview-heading p{margin:0;color:var(--muted);font-size:13px}
.live-preview-cycles{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:18px
}
.live-preview-cycles button{
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 12px;
    background:transparent;
    color:var(--muted)
}
.live-preview-cycles button.active{
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(34,184,207,.08)
}
.live-plan-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px
}
.live-plan-card{
    position:relative;
    min-width:0;
    padding:20px;
    border:1px solid #29415f;
    border-radius:18px;
    background:var(--panel);
    overflow:hidden
}
.live-plan-card.recommended{border-color:#51cf66}
.recommended-strip{
    margin:-20px -20px 16px;
    padding:9px 12px;
    text-align:center;
    background:#51cf66;
    color:#06220f;
    font-size:12px;
    font-weight:900
}
.live-plan-card h3{margin:10px 0 7px;font-size:21px}
.live-plan-card>p{min-height:38px;color:var(--muted);font-size:12px;line-height:1.5}
.live-price-placeholder{
    margin:18px 0;
    padding:14px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.live-price-placeholder small{display:block;color:var(--muted);margin-bottom:4px}
.live-price-placeholder strong{font-size:18px}

@media(max-width:1100px){
    .pricing-editor-layout{grid-template-columns:1fr}
    .preview-sticky{position:relative;top:auto}
}
@media(max-width:700px){
    .pricing-editor-layout{width:min(100% - 18px,760px);margin-top:10px}
    .form-grid.two{grid-template-columns:1fr}
    .editor-card-head{align-items:flex-start;flex-direction:column}
    .plan-admin-row{align-items:flex-start}
    .plan-admin-actions{flex-wrap:wrap;justify-content:flex-end}
    .live-plan-grid{
        display:flex;
        overflow-x:auto;
        gap:14px;
        scroll-snap-type:x mandatory;
        padding:3px 12vw 12px 2px;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch
    }
    .live-plan-grid::-webkit-scrollbar{display:none}
    .live-plan-card{
        flex:0 0 82vw;
        max-width:330px;
        scroll-snap-align:start
    }
}


/* V13 - Planos lado a lado e ajuste da prévia sticky */
.preview-sticky{top:84px}

.plan-admin-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:12px;
    padding:14px
}
.plan-admin-card{
    min-width:0;
    border:1px solid var(--line);
    border-radius:14px;
    background:#0a1727;
    overflow:hidden
}
.plan-admin-card.selected{
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(34,184,207,.08)
}
.plan-admin-card .plan-admin-select{
    display:block;
    padding:14px
}
.plan-admin-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-top:1px solid var(--line);
    background:#081525
}
.plan-order-actions{
    display:flex;
    align-items:center;
    gap:6px
}
.plan-order-actions form{margin:0}
.icon-action:disabled{
    opacity:.28;
    cursor:not-allowed
}

.small-modal{
    width:min(520px,94vw);
    max-height:90vh;
    display:grid;
    grid-template-rows:auto 1fr;
    background:#091625;
    border:1px solid #29415f;
    border-radius:20px;
    box-shadow:0 35px 120px rgba(0,0,0,.55);
    overflow:hidden
}
.small-modal form{
    min-height:0;
    display:grid;
    grid-template-rows:1fr auto
}
.small-modal-body{
    padding:18px;
    overflow:auto
}

@media(max-width:1100px){
    .preview-sticky{top:auto}
}
@media(max-width:700px){
    .plan-admin-list{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:520px){
    .plan-admin-list{
        display:flex;
        overflow-x:auto;
        gap:12px;
        scroll-snap-type:x mandatory;
        padding:14px 12vw 14px 14px;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch
    }
    .plan-admin-list::-webkit-scrollbar{display:none}
    .plan-admin-card{
        flex:0 0 78vw;
        max-width:300px;
        scroll-snap-align:start
    }
}


/* V14 - Correção de modais e destaque personalizável */
.modal-backdrop[hidden]{display:none!important}
.modal-backdrop{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(1,8,17,.78);
    backdrop-filter:blur(5px)
}
.preview-modal{
    width:min(1180px,96vw);
    height:min(820px,92vh);
    display:grid;
    grid-template-rows:auto 1fr auto;
    background:#091625;
    border:1px solid #29415f;
    border-radius:22px;
    box-shadow:0 35px 120px rgba(0,0,0,.55);
    overflow:hidden
}
.preview-modal-head,
.preview-modal-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:15px 18px;
    background:#0d1a2b
}
.preview-modal-head{border-bottom:1px solid var(--line)}
.preview-modal-foot{border-top:1px solid var(--line);justify-content:flex-end}
.preview-modal-head strong{display:block;font-size:16px}
.preview-modal-head span{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.modal-close{
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#081525;
    color:var(--text);
    font-size:25px;
    line-height:1;
    cursor:pointer
}
.preview-modal-body{min-height:0;background:#07111f}
.preview-modal-body iframe{display:block;width:100%;height:100%;border:0;background:#07111f}
.small-modal{
    width:min(520px,94vw);
    max-height:90vh;
    display:grid;
    grid-template-rows:auto 1fr;
    background:#091625;
    border:1px solid #29415f;
    border-radius:20px;
    box-shadow:0 35px 120px rgba(0,0,0,.55);
    overflow:hidden
}

.recommended-settings{
    margin:14px 0;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden
}
.recommended-settings>.check-row{
    margin:0;
    border:0;
    border-radius:0
}
#recommended_options{
    padding:14px;
    border-top:1px solid var(--line);
    background:#0a1727
}
.color-field{
    display:grid;
    grid-template-columns:54px 1fr;
    gap:8px;
    margin-top:7px
}
.color-field input{margin-top:0}
.color-picker{
    width:54px;
    height:44px;
    padding:4px;
    cursor:pointer
}
.color-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.live-plan-card.recommended{
    --recommended-color:#51cf66;
    border-color:var(--recommended-color)
}
.live-plan-card.recommended-outline{
    border:2px solid var(--recommended-color)
}
.live-plan-card.recommended-topbar{
    border:1px solid #29415f;
    border-top:5px solid var(--recommended-color)
}
.live-plan-card.recommended-glow{
    border:1px solid var(--recommended-color);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--recommended-color) 30%,transparent),
               0 0 24px color-mix(in srgb,var(--recommended-color) 22%,transparent)
}
.recommended-strip{
    background:var(--recommended-color);
    color:#04130a
}
.recommended-icon{
    margin-right:6px;
    font-size:13px
}

/* Tokens preparados para futuro tema claro */
.live-preview-shell,
.live-plan-card,
.preview-sticky{
    --surface-bg:var(--panel);
    --surface-text:var(--text);
    --surface-muted:var(--muted)
}

@media(max-width:700px){
    .modal-backdrop{padding:8px}
    .small-modal{width:100%}
}


/* V16 - Temas das tabelas públicas */
.pricing-theme-dark{
    --pricing-bg:#081525;
    --pricing-surface:#0d1a2b;
    --pricing-surface-2:#101f33;
    --pricing-line:#29415f;
    --pricing-text:#edf5ff;
    --pricing-muted:#8fa4bc;
    --pricing-accent:#22b8cf;
}
.pricing-theme-light{
    --pricing-bg:#f4f7fa;
    --pricing-surface:#ffffff;
    --pricing-surface-2:#eef4f8;
    --pricing-line:#cbd9e4;
    --pricing-text:#10243f;
    --pricing-muted:#5f7185;
    --pricing-accent:#6aa8d0;
}
.pricing-theme-auto{
    --pricing-bg:#081525;
    --pricing-surface:#0d1a2b;
    --pricing-surface-2:#101f33;
    --pricing-line:#29415f;
    --pricing-text:#edf5ff;
    --pricing-muted:#8fa4bc;
    --pricing-accent:#22b8cf;
}

.live-preview-shell[class*="pricing-theme-"],
.preview-page[class*="pricing-theme-"]{
    background:var(--pricing-bg);
    color:var(--pricing-text)
}
.live-preview-shell[class*="pricing-theme-"] .live-plan-card,
.preview-page[class*="pricing-theme-"] .public-plan-card,
.preview-page[class*="pricing-theme-"] .pricing-board{
    background:var(--pricing-surface);
    color:var(--pricing-text);
    border-color:var(--pricing-line)
}
.live-preview-shell[class*="pricing-theme-"] .live-preview-heading p,
.live-preview-shell[class*="pricing-theme-"] .live-plan-card>p,
.live-preview-shell[class*="pricing-theme-"] .preview-table-row span,
.preview-page[class*="pricing-theme-"] p,
.preview-page[class*="pricing-theme-"] .pricing-board-name,
.preview-page[class*="pricing-theme-"] .preview-table-row span{
    color:var(--pricing-muted)
}
.live-preview-shell[class*="pricing-theme-"] .live-preview-cycles button,
.live-preview-shell[class*="pricing-theme-"] .preview-table,
.preview-page[class*="pricing-theme-"] .preview-table{
    background:var(--pricing-surface-2);
    border-color:var(--pricing-line)
}
.live-preview-shell[class*="pricing-theme-"] .live-preview-cycles button.active{
    color:var(--pricing-accent);
    border-color:var(--pricing-accent)
}
.preview-page.pricing-theme-light .preview-toolbar{
    background:#ffffff;
    color:#152033;
    border-color:#d7e0ea
}
.preview-page.pricing-theme-light .public-preview{
    color:#152033
}
.preview-page.pricing-theme-light .pricing-board-head,
.preview-page.pricing-theme-light .pricing-board-body{
    background:#ffffff
}
.preview-page.pricing-theme-light .pricing-board-body{
    background:#f5f7fa
}
.preview-page.pricing-theme-light .btn.ghost{
    color:#152033;
    border-color:#d7e0ea
}
.preview-page.pricing-theme-light .status-badge{
    color:inherit
}

@media (prefers-color-scheme: light){
    .pricing-theme-auto{
        --pricing-bg:#f5f7fa;
        --pricing-surface:#ffffff;
        --pricing-surface-2:#f0f4f8;
        --pricing-line:#d7e0ea;
        --pricing-text:#152033;
        --pricing-muted:#637083;
        --pricing-accent:#0ea5b7;
    }
    .preview-page.pricing-theme-auto .preview-toolbar{
        background:#ffffff;
        color:#152033;
        border-color:#d7e0ea
    }
}


/* V17 - Módulo de recursos */
.resources-module{padding:0 14px 16px}
.resource-group-tabs{
    display:flex;
    gap:6px;
    padding:4px;
    margin-bottom:14px;
    border-radius:12px;
    background:#081525
}
.resource-group-tab{
    flex:1;
    border:0;
    border-radius:9px;
    padding:10px 12px;
    background:transparent;
    color:var(--muted);
    font-weight:800;
    cursor:pointer
}
.resource-group-tab.active{
    background:var(--panel-2);
    color:var(--text)
}
.resource-group-panel{display:none}
.resource-group-panel.active{display:block}
.resource-group-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:2px 2px 12px
}
.resource-group-head strong{display:block}
.resource-group-head span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:12px
}
.resource-admin-list{display:grid;gap:9px}
.resource-admin-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:62px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#0a1727
}
.resource-admin-row.resource-hidden{opacity:.5}
.resource-admin-main{
    display:flex;
    align-items:center;
    min-width:0;
    gap:10px
}
.resource-drag{
    color:var(--muted);
    font-size:18px
}
.resource-admin-main strong{
    display:block;
    font-size:13px
}
.resource-admin-main div>span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:12px
}
.resource-admin-actions{
    display:flex;
    align-items:center;
    gap:5px;
    flex-shrink:0
}
.resource-admin-actions form{margin:0}
.resource-empty{padding:26px 12px}

.live-feature-list{
    display:grid;
    gap:8px;
    padding:0;
    margin:18px 0;
    list-style:none
}
.live-feature-list li{
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:var(--pricing-text,var(--text));
    font-size:12px;
    line-height:1.45
}
.live-feature-list li strong{
    margin-left:3px;
    font-weight:800
}
.feature-check{
    color:#22c55e;
    font-weight:900
}
.live-secondary-title{
    margin-top:18px;
    padding-top:15px;
    border-top:1px solid var(--pricing-line,var(--line));
    color:var(--pricing-text,var(--text));
    font-size:12px;
    font-weight:900
}
.live-feature-list.secondary{margin-top:10px}

@media(max-width:700px){
    .resource-group-head{
        align-items:flex-start;
        flex-direction:column
    }
    .resource-group-head .btn{width:100%}
    .resource-admin-row{
        align-items:flex-start;
        flex-direction:column
    }
    .resource-admin-actions{
        width:100%;
        justify-content:flex-end;
        flex-wrap:wrap
    }
}


/* V18 - Tooltip, ícones de recurso e correção da prévia */
.topbar{
    z-index:5000;
    isolation:isolate;
}
.preview-sticky{
    top:88px;
    z-index:10;
}
.pricing-preview-column{
    position:relative;
    z-index:1;
}

.feature-check.resource-icon-check{color:#22c55e}
.feature-check.resource-icon-x{color:#ef4444}
.feature-check.resource-icon-star{color:#f59e0b}
.feature-check.resource-icon-bolt{color:#eab308}
.feature-check.resource-icon-heart{color:#ec4899}
.feature-check.resource-icon-info{color:#38bdf8}

.has-resource-tooltip{
    position:relative;
    cursor:help
}
.has-resource-tooltip::after{
    content:attr(data-tooltip);
    position:absolute;
    left:24px;
    bottom:calc(100% + 8px);
    z-index:100;
    width:max-content;
    max-width:280px;
    padding:9px 11px;
    border:1px solid var(--pricing-line,var(--line));
    border-radius:9px;
    background:var(--pricing-surface,#0d1a2b);
    color:var(--pricing-text,#edf5ff);
    box-shadow:0 12px 30px rgba(0,0,0,.28);
    font-size:11px;
    line-height:1.45;
    white-space:normal;
    opacity:0;
    visibility:hidden;
    transform:translateY(4px);
    transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
    pointer-events:none
}
.has-resource-tooltip:hover::after,
.has-resource-tooltip:focus-within::after{
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}

@media(max-width:1100px){
    .preview-sticky{
        top:auto;
        z-index:auto
    }
}


/* V19 - Indicador visual de observação */
.live-feature-list li{
    position:relative;
    align-items:center;
}
.feature-label{
    min-width:0;
    flex:1;
}
.resource-note-icon{
    position:relative;
    flex:0 0 auto;
    width:18px;
    height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:5px;
    border:1px solid #f59e0b;
    border-radius:50%;
    background:rgba(245,158,11,.12);
    color:#f59e0b;
    font-size:11px;
    font-weight:900;
    line-height:1;
    cursor:help;
    outline:none;
}
.resource-note-icon:hover,
.resource-note-icon:focus{
    background:rgba(245,158,11,.22);
    box-shadow:0 0 0 3px rgba(245,158,11,.10);
}
.resource-note-icon::after{
    content:attr(data-tooltip);
    position:absolute;
    right:0;
    bottom:calc(100% + 8px);
    z-index:200;
    width:max-content;
    max-width:280px;
    padding:9px 11px;
    border:1px solid var(--pricing-line,var(--line));
    border-radius:9px;
    background:var(--pricing-surface,#0d1a2b);
    color:var(--pricing-text,#edf5ff);
    box-shadow:0 12px 30px rgba(0,0,0,.28);
    font-size:11px;
    font-weight:500;
    line-height:1.45;
    white-space:normal;
    opacity:0;
    visibility:hidden;
    transform:translateY(4px);
    transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
    pointer-events:none;
}
.resource-note-icon:hover::after,
.resource-note-icon:focus::after{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}


/* V20 - Aparência personalizada por tabela */
.appearance-help{
    margin:0 0 18px;
    color:var(--muted);
    font-size:13px;
    line-height:1.5
}
.appearance-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
}
.appearance-color-item{margin:0}
.appearance-options{margin-top:18px}
.appearance-card .color-field{
    grid-template-columns:54px minmax(0,1fr)
}

.live-preview-shell[class*="pricing-theme-"],
.preview-page[class*="pricing-theme-"]{
    --pricing-bg-final:var(--pricing-custom-bg,var(--pricing-bg));
    --pricing-card-final:var(--pricing-custom-card,var(--pricing-surface));
    --pricing-border-final:var(--pricing-custom-border,var(--pricing-line));
    --pricing-text-final:var(--pricing-custom-text,var(--pricing-text));
    --pricing-muted-final:var(--pricing-custom-muted,var(--pricing-muted));
    --pricing-title-final:var(--pricing-custom-title,var(--pricing-text-final));
    --pricing-description-final:var(--pricing-custom-description,var(--pricing-muted-final));
    --pricing-accent-final:var(--pricing-custom-accent,var(--pricing-accent));
    --pricing-button-final:var(--pricing-custom-button,var(--pricing-accent-final));
    --pricing-button-text-final:var(--pricing-custom-button-text,#03131b);
    --pricing-radius:18px;
    --pricing-border-width:1px;
    background:var(--pricing-bg-final);
    color:var(--pricing-text-final)
}
.live-preview-shell[class*="pricing-theme-"] .live-preview-heading h2,
.preview-page[class*="pricing-theme-"] .pricing-board-copy h1,
.preview-page[class*="pricing-theme-"] .public-preview-heading h1{
    color:var(--pricing-title-final)
}
.live-preview-shell[class*="pricing-theme-"] .live-preview-heading p,
.preview-page[class*="pricing-theme-"] .pricing-board-copy p,
.preview-page[class*="pricing-theme-"] .public-preview-heading p{
    color:var(--pricing-description-final)
}
.live-preview-shell[class*="pricing-theme-"] .preview-kicker,
.preview-page[class*="pricing-theme-"] .preview-kicker{
    color:var(--pricing-accent-final)
}
.live-preview-shell[class*="pricing-theme-"] .live-plan-card,
.preview-page[class*="pricing-theme-"] .public-plan-card,
.preview-page[class*="pricing-theme-"] .pricing-board{
    background:var(--pricing-card-final);
    color:var(--pricing-text-final);
    border-color:var(--pricing-border-final);
    border-width:var(--pricing-border-width);
    border-radius:var(--pricing-radius)
}
.live-preview-shell[class*="pricing-theme-"] .preview-table,
.preview-page[class*="pricing-theme-"] .preview-table{
    border-color:var(--pricing-border-final);
    border-width:var(--pricing-border-width)
}
.live-preview-shell[class*="pricing-theme-"] .preview-table-row,
.preview-page[class*="pricing-theme-"] .preview-table-row{
    border-color:var(--pricing-border-final)
}
.live-preview-shell[class*="pricing-theme-"] .live-plan-card>p,
.live-preview-shell[class*="pricing-theme-"] .preview-table-row span,
.preview-page[class*="pricing-theme-"] .public-plan-card>p,
.preview-page[class*="pricing-theme-"] .preview-table-row span{
    color:var(--pricing-muted-final)
}
.live-preview-shell[class*="pricing-theme-"] .btn.primary,
.preview-page[class*="pricing-theme-"] .btn.primary{
    border:1px solid var(--pricing-button-final);
    border-radius:calc(var(--pricing-radius) * .66);
    background:var(--pricing-button-final);
    color:var(--pricing-button-text-final)
}
.pricing-button-outline .btn.primary{
    background:transparent!important;
    color:var(--pricing-button-final)!important
}
.pricing-button-soft .btn.primary{
    background:color-mix(in srgb,var(--pricing-button-final) 18%,transparent)!important;
    color:var(--pricing-button-final)!important;
    border-color:color-mix(in srgb,var(--pricing-button-final) 55%,transparent)!important
}
.pricing-shadow-none .live-plan-card,
.pricing-shadow-none .public-plan-card{box-shadow:none!important}
.pricing-shadow-soft .live-plan-card,
.pricing-shadow-soft .public-plan-card{box-shadow:0 10px 26px rgba(0,0,0,.10)}
.pricing-shadow-medium .live-plan-card,
.pricing-shadow-medium .public-plan-card{box-shadow:0 16px 38px rgba(0,0,0,.18)}
.pricing-shadow-strong .live-plan-card,
.pricing-shadow-strong .public-plan-card{box-shadow:0 22px 54px rgba(0,0,0,.28)}

@media(max-width:700px){
    .appearance-grid{grid-template-columns:1fr}
}


/* V21 - Aparência recolhida, switch e CTA fiel à tabela */
.appearance-toggle{
    width:100%;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 20px;
    border:0;
    background:transparent;
    color:var(--text);
    text-align:left;
    cursor:pointer
}
.appearance-toggle h2{
    margin:3px 0 0;
    font-size:20px
}
.appearance-toggle-icon{
    font-size:24px;
    color:var(--muted);
    transition:transform .18s ease
}
.appearance-open .appearance-toggle-icon{
    transform:rotate(180deg)
}
.appearance-body[hidden]{
    display:none!important
}
.appearance-body{
    border-top:1px solid var(--line)
}
.appearance-toolbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px
}
.appearance-toolbar .appearance-help{
    margin:0
}

/* Switch deslizante */
.switch-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:12px 14px;
    margin:0;
    border:1px solid var(--line);
    border-radius:12px;
    background:#081525;
    cursor:pointer
}
.switch-row>span:first-child{
    color:var(--text);
    font-weight:700
}
.switch-control{
    position:relative;
    width:46px;
    height:25px;
    flex:0 0 46px
}
.switch-control input{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
    pointer-events:none
}
.switch-slider{
    position:absolute;
    inset:0;
    border-radius:999px;
    background:#24364d;
    border:1px solid #36506d;
    transition:background .18s ease,border-color .18s ease
}
.switch-slider::after{
    content:"";
    position:absolute;
    width:19px;
    height:19px;
    left:2px;
    top:2px;
    border-radius:50%;
    background:#ffffff;
    box-shadow:0 2px 5px rgba(0,0,0,.25);
    transition:transform .18s ease
}
.switch-control input:checked + .switch-slider{
    background:var(--accent);
    border-color:var(--accent)
}
.switch-control input:checked + .switch-slider::after{
    transform:translateX(21px)
}
.switch-control input:focus-visible + .switch-slider{
    box-shadow:0 0 0 3px rgba(34,184,207,.15)
}

/* Botão da tabela pública, separado do botão administrativo */
.pricing-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:11px 16px;
    border-style:solid;
    border-width:1px;
    border-color:var(--pricing-button-final,var(--pricing-accent-final,#22b8cf));
    border-radius:calc(var(--pricing-radius,18px) * .66);
    background:var(--pricing-button-final,var(--pricing-accent-final,#22b8cf));
    color:var(--pricing-button-text-final,#03131b);
    font-weight:800;
    text-decoration:none;
    cursor:pointer
}
.pricing-cta.full{width:100%}
.pricing-cta:disabled{
    opacity:.62;
    cursor:not-allowed
}
.pricing-button-outline .pricing-cta{
    background:transparent;
    color:var(--pricing-button-final,var(--pricing-accent-final,#22b8cf));
}
.pricing-button-soft .pricing-cta{
    background:color-mix(in srgb,var(--pricing-button-final,var(--pricing-accent-final,#22b8cf)) 18%,transparent);
    color:var(--pricing-button-final,var(--pricing-accent-final,#22b8cf));
    border-color:color-mix(in srgb,var(--pricing-button-final,var(--pricing-accent-final,#22b8cf)) 55%,transparent);
}

/* Remove interferência do estilo administrativo em CTAs da prévia */
.live-preview-shell .pricing-cta,
.preview-page .pricing-cta{
    background:var(--pricing-button-final,var(--pricing-accent-final,#22b8cf));
    color:var(--pricing-button-text-final,#03131b);
    border-color:var(--pricing-button-final,var(--pricing-accent-final,#22b8cf));
}
.live-preview-shell.pricing-button-outline .pricing-cta,
.preview-page.pricing-button-outline .pricing-cta{
    background:transparent;
    color:var(--pricing-button-final,var(--pricing-accent-final,#22b8cf));
}
.live-preview-shell.pricing-button-soft .pricing-cta,
.preview-page.pricing-button-soft .pricing-cta{
    background:color-mix(in srgb,var(--pricing-button-final,var(--pricing-accent-final,#22b8cf)) 18%,transparent);
    color:var(--pricing-button-final,var(--pricing-accent-final,#22b8cf));
}

@media(max-width:700px){
    .appearance-toolbar{
        flex-direction:column
    }
    .appearance-toolbar .btn{
        width:100%
    }
}


/* V22 - Selo Novo, links e posição do botão */
.resource-extra-box{
    margin:14px 0;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden
}
.resource-extra-box .switch-row{
    border:0;
    border-radius:0
}
.resource-new-options{
    padding:12px 14px;
    border-top:1px solid var(--line);
    background:#0a1727
}
.resource-new-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:7px;
    padding:3px 7px;
    border-radius:999px;
    background:var(--resource-new-color,#22c55e);
    color:#111827;
    font-size:9px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    vertical-align:middle
}
.admin-resource-new{
    margin-left:5px
}
.feature-link{
    color:inherit;
    text-decoration:none;
    border-bottom:1px dotted transparent
}
.feature-link:hover{
    color:var(--pricing-accent-final,var(--accent));
    border-bottom-color:currentColor
}
.live-plan-card .pricing-cta,
.public-plan-card .pricing-cta{
    margin:18px 0
}
.live-feature-list + .pricing-cta,
.public-feature-list + .pricing-cta{
    margin-top:20px
}


/* V23 - Preços e simplificação do plano */
.switch-help{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
    font-weight:500
}
.prices-module{padding:0 14px 16px}
.prices-module-head{
    padding:4px 2px 14px
}
.prices-module-head strong{display:block}
.prices-module-head span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:12px
}
.price-cycle-list{display:grid;gap:12px}
.price-cycle-card{
    border:1px solid var(--line);
    border-radius:14px;
    background:#0a1727;
    overflow:hidden
}
.price-cycle-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px
}
.price-cycle-top strong{display:block}
.price-cycle-top div>span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:11px
}
.price-cycle-fields{
    padding:14px;
    border-top:1px solid var(--line)
}
.price-cycle-fields.is-disabled-section{
    opacity:.45
}
.input-suffix{
    position:relative;
    margin-top:7px
}
.input-suffix input{
    margin-top:0;
    padding-right:42px
}
.input-suffix span{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted);
    font-weight:800
}
.price-calculation{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin:14px 0
}
.price-calculation>div{
    padding:12px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#081525
}
.price-calculation span{
    display:block;
    color:var(--muted);
    font-size:10px
}
.price-calculation strong{
    display:block;
    margin-top:5px;
    font-size:14px
}
.price-cycle-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:14px
}

.preview-price-cycle{display:none}
.preview-price-cycle.active{display:block}
.preview-old-price{
    color:var(--pricing-muted-final,var(--muted));
    font-size:11px;
    text-decoration:line-through
}
.preview-discount-badge{
    display:inline-flex;
    margin:6px 0;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(34,197,94,.13);
    color:#22c55e;
    font-size:10px;
    font-weight:900
}
.preview-current-price{
    display:flex;
    align-items:baseline;
    gap:3px
}
.preview-current-price small{
    color:var(--pricing-accent-final,var(--accent));
    font-weight:800
}
.preview-current-price strong{
    color:var(--pricing-accent-final,var(--accent));
    font-size:28px
}
.preview-current-price span{
    color:var(--pricing-muted-final,var(--muted));
    font-size:11px
}
.preview-period-total{
    margin-top:3px;
    color:var(--pricing-muted-final,var(--muted));
    font-size:10px
}
.preview-saving{
    display:inline-flex;
    margin-top:8px;
    padding:4px 8px;
    border:1px solid color-mix(in srgb,var(--pricing-accent-final,var(--accent)) 45%,transparent);
    border-radius:999px;
    color:var(--pricing-accent-final,var(--accent));
    font-size:10px;
    font-weight:800
}
.preview-best-value{
    margin-top:7px;
    color:#22c55e;
    font-size:10px;
    font-weight:900
}
.is-disabled-link{
    opacity:.55;
    pointer-events:none
}

@media(max-width:700px){
    .price-calculation{grid-template-columns:1fr}
}


/* V24 - Editor de plano recolhido e popup de contratação */
.plan-editor-toggle{
    width:100%;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 20px;
    border:0;
    background:transparent;
    color:var(--text);
    text-align:left;
    cursor:pointer
}
.plan-editor-toggle h2{
    margin:3px 0 0;
    font-size:20px
}
.plan-editor-toggle-icon{
    color:var(--muted);
    font-size:24px;
    transition:transform .18s ease
}
.plan-editor-open .plan-editor-toggle-icon{
    transform:rotate(180deg)
}
.plan-editor-body[hidden]{
    display:none!important
}
.plan-editor-body{
    border-top:1px solid var(--line)
}

.contract-modal{
    width:min(860px,94vw);
    max-height:90vh;
    display:grid;
    grid-template-rows:auto 1fr auto;
    background:#091625;
    border:1px solid #29415f;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 35px 120px rgba(0,0,0,.55)
}
.contract-modal-body{
    min-height:0;
    padding:18px;
    overflow:auto
}
.contract-options{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px
}
.contract-option{
    position:relative;
    padding:20px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#0d1a2b
}
.contract-option.best{
    border-color:#22c55e;
    box-shadow:0 0 0 1px rgba(34,197,94,.15)
}
.contract-best-badge{
    display:inline-flex;
    margin-bottom:10px;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(34,197,94,.12);
    color:#22c55e;
    font-size:10px;
    font-weight:900
}
.contract-option h3{
    margin:0 0 14px;
    font-size:18px
}
.contract-old-price{
    color:var(--muted);
    font-size:11px;
    text-decoration:line-through
}
.contract-discount{
    display:inline-flex;
    margin:5px 0;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(34,197,94,.12);
    color:#22c55e;
    font-size:10px;
    font-weight:900
}
.contract-price{
    display:flex;
    align-items:baseline;
    gap:3px;
    margin-top:4px
}
.contract-price small{
    color:var(--accent);
    font-weight:900
}
.contract-price strong{
    color:var(--accent);
    font-size:28px
}
.contract-price span{
    color:var(--muted);
    font-size:11px
}
.contract-total{
    margin-top:4px;
    color:var(--muted);
    font-size:11px
}
.contract-saving{
    margin:12px 0 18px;
    padding:9px 10px;
    border:1px solid rgba(34,197,94,.28);
    border-radius:10px;
    background:rgba(34,197,94,.08);
    color:#86efac;
    font-size:11px
}

@media(max-width:700px){
    .contract-options{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        gap:12px;
        padding-right:12vw;
        scrollbar-width:none;
    }
    .contract-options::-webkit-scrollbar{display:none}
    .contract-option{
        flex:0 0 80vw;
        max-width:320px;
        scroll-snap-align:start
    }
}


/* V25 - Recolhimento e salvamento sem reload */
.section-collapse-toggle{
    width:100%;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 20px;
    border:0;
    background:transparent;
    color:var(--text);
    text-align:left;
    cursor:pointer
}
.section-collapse-toggle h1,
.section-collapse-toggle h2{
    margin:3px 0 0;
    font-size:20px
}
.section-collapse-side{
    display:flex;
    align-items:center;
    gap:12px
}
.section-collapse-icon,
.price-cycle-toggle-icon{
    color:var(--muted);
    font-size:22px;
    transition:transform .18s ease
}
.collapsible-card.is-open .section-collapse-icon,
.price-cycle-card.is-open .price-cycle-toggle-icon{
    transform:rotate(180deg)
}
.collapsible-body[hidden],
.price-cycle-fields[hidden]{
    display:none!important
}
.plans-collapse-head{
    border:0
}

.price-cycle-top{
    cursor:pointer
}
.price-cycle-top-actions{
    display:flex;
    align-items:center;
    gap:10px
}

.resource-note-icon{
    --tooltip-icon-color:#F59E0B;
    border-color:var(--tooltip-icon-color)!important;
    background:color-mix(in srgb,var(--tooltip-icon-color) 12%,transparent)!important;
    color:var(--tooltip-icon-color)!important
}
.resource-note-icon:hover,
.resource-note-icon:focus{
    background:color-mix(in srgb,var(--tooltip-icon-color) 22%,transparent)!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--tooltip-icon-color) 12%,transparent)!important
}

.ajax-save-toast{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:20000;
    min-width:240px;
    max-width:min(420px,calc(100vw - 44px));
    padding:13px 16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#0d1a2b;
    color:var(--text);
    box-shadow:0 18px 50px rgba(0,0,0,.35);
    font-size:13px;
    font-weight:700;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .2s ease,transform .2s ease
}
.ajax-save-toast.show{
    opacity:1;
    transform:translateY(0)
}
.ajax-save-toast.success{
    border-color:rgba(34,197,94,.4)
}
.ajax-save-toast.danger{
    border-color:rgba(239,68,68,.5)
}

@media(max-width:700px){
    .section-collapse-side{
        flex-wrap:wrap;
        justify-content:flex-end
    }
    .ajax-save-toast{
        left:12px;
        right:12px;
        bottom:12px;
        max-width:none
    }
}


/* V26 - Atualização isolada da prévia */
.live-preview-shell{
    transition:opacity .18s ease;
}
.live-preview-shell.preview-refreshing{
    opacity:.45;
    pointer-events:none;
}
.contract-default-badge{
    display:inline-flex;
    margin:0 0 10px 6px;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(34,184,207,.12);
    color:#22b8cf;
    font-size:10px;
    font-weight:900;
}


/* V29 - Cores independentes dos elementos de preço */
.live-preview-shell[class*="pricing-theme-"],
.preview-page[class*="pricing-theme-"]{
    --pricing-price-final:var(--pricing-custom-price,var(--pricing-accent-final));
    --pricing-old-price-final:var(--pricing-custom-old-price,var(--pricing-muted-final));
    --pricing-discount-text-final:var(--pricing-custom-discount-text,#22c55e);
    --pricing-discount-bg-final:var(--pricing-custom-discount-bg,rgba(34,197,94,.13));
    --pricing-saving-text-final:var(--pricing-custom-saving-text,var(--pricing-accent-final));
    --pricing-saving-bg-final:var(--pricing-custom-saving-bg,transparent);
    --pricing-period-total-final:var(--pricing-custom-period-total,var(--pricing-muted-final));
    --pricing-best-value-final:var(--pricing-custom-best-value,#22c55e);
}

.live-preview-shell .preview-current-price small,
.live-preview-shell .preview-current-price strong,
.preview-page .preview-current-price small,
.preview-page .preview-current-price strong,
.preview-page .preview-price>strong{
    color:var(--pricing-price-final)!important
}
.live-preview-shell .preview-old-price,
.preview-page .preview-old-price{
    color:var(--pricing-old-price-final)!important
}
.live-preview-shell .preview-discount-badge,
.preview-page .preview-discount-badge{
    background:var(--pricing-discount-bg-final)!important;
    color:var(--pricing-discount-text-final)!important
}
.live-preview-shell .preview-saving,
.preview-page .preview-saving{
    background:var(--pricing-saving-bg-final)!important;
    color:var(--pricing-saving-text-final)!important;
    border-color:color-mix(in srgb,var(--pricing-saving-text-final) 45%,transparent)!important
}
.live-preview-shell .preview-period-total,
.preview-page .preview-period-total{
    color:var(--pricing-period-total-final)!important
}
.live-preview-shell .preview-best-value,
.preview-page .preview-best-value{
    color:var(--pricing-best-value-final)!important
}

/* Popup de contratação usa as mesmas cores da tabela */
.contract-option .contract-old-price{
    color:var(--pricing-old-price-final,var(--muted))
}
.contract-option .contract-discount{
    background:var(--pricing-discount-bg-final,rgba(34,197,94,.12));
    color:var(--pricing-discount-text-final,#22c55e)
}
.contract-option .contract-price small,
.contract-option .contract-price strong{
    color:var(--pricing-price-final,var(--accent))
}
.contract-option .contract-total{
    color:var(--pricing-period-total-final,var(--muted))
}
.contract-option .contract-saving{
    background:var(--pricing-saving-bg-final,rgba(34,197,94,.08));
    color:var(--pricing-saving-text-final,#86efac);
    border-color:color-mix(in srgb,var(--pricing-saving-text-final,#86efac) 35%,transparent)
}
.contract-option .contract-best-badge{
    color:var(--pricing-best-value-final,#22c55e);
    border-color:color-mix(in srgb,var(--pricing-best-value-final,#22c55e) 35%,transparent)
}


/* V30 - Publicação e embed */
.publication-body{
    display:grid;
    gap:18px;
}

.publication-warning{
    padding:12px 14px;
    border:1px solid rgba(245,158,11,.35);
    border-radius:12px;
    background:rgba(245,158,11,.08);
    color:#fcd34d;
    font-size:12px;
    line-height:1.5;
}

.copy-field{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    margin-top:7px;
}

.copy-field input{
    margin-top:0;
}

.publication-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.publication-note{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

#public_embed_code{
    min-height:145px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;
    line-height:1.5;
}

@media(max-width:700px){
    .copy-field{
        grid-template-columns:1fr;
    }

    .copy-field .btn,
    .publication-actions .btn{
        width:100%;
    }
}


/* V31 - Campos opcionais */
.optional-label{
    display:inline-flex;
    margin-left:6px;
    padding:2px 6px;
    border-radius:999px;
    background:rgba(143,164,188,.10);
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    vertical-align:middle;
}


/* V33 - Destaque visual do status */
.status-select{font-weight:800;transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.status-select-draft{color:#facc15!important;border-color:rgba(250,204,21,.45)!important;background:rgba(250,204,21,.08)!important}
.status-select-published{color:#4ade80!important;border-color:rgba(74,222,128,.48)!important;background:rgba(74,222,128,.08)!important}
.status-select-disabled{color:#f87171!important;border-color:rgba(248,113,113,.48)!important;background:rgba(248,113,113,.08)!important}
.status-select:focus{box-shadow:0 0 0 3px rgba(34,184,207,.10)}


/* V34 - Status: cor apenas no valor selecionado */
.status-select option{
    color:#edf5ff!important;
    background:#0d1a2b!important;
    font-weight:600!important;
}
.status-select option:checked{
    color:#edf5ff!important;
    background:#17304c!important;
}


/* V35 - Status no cabeçalho de Detalhes */
.details-collapse-head{
    cursor:pointer;
}

.status-head-control{
    width:auto;
    min-width:118px;
    height:34px;
    margin:0;
    padding:5px 30px 5px 11px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.status-head-control.status-select-draft{
    color:#facc15;
    background:rgba(250,204,21,.09);
    border-color:rgba(250,204,21,.34);
}

.status-head-control.status-select-published{
    color:#4ade80;
    background:rgba(74,222,128,.10);
    border-color:rgba(74,222,128,.34);
}

.status-head-control.status-select-disabled{
    color:#fb7185;
    background:rgba(251,113,133,.10);
    border-color:rgba(251,113,133,.34);
}

/* As opções do menu continuam neutras e legíveis. */
.status-head-control option{
    color:#111827 !important;
    background:#ffffff !important;
    font-weight:600;
}

@media(max-width:700px){
    .status-head-control{
        min-width:108px;
    }
}


/* ================= PUBLIC OVERRIDES ================= */

html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-width:0;
    overflow-x:hidden;
}

body.pricing-public-page{
    min-height:0;
    background:transparent;
}

.pricing-public-root{
    width:100%;
    margin:0;
    padding:0;
}

.pricing-public-page .live-preview-shell{
    width:100%;
    min-height:0;
    padding:clamp(18px,3vw,34px);
    box-sizing:border-box;
    border-radius:0;
}

.public-heading{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

.public-heading h1{
    margin:7px 0 8px;
    font-size:clamp(28px,4vw,46px);
    line-height:1.08;
}

.public-cycle-nav{
    flex-wrap:wrap;
}

.public-plan-grid{
    width:min(1400px,100%);
    margin-left:auto;
    margin-right:auto;
    align-items:stretch;
}

.public-plan-card{
    height:100%;
}

.public-plan-description{
    min-height:0!important;
}

.public-price-unavailable{
    display:none;
    padding:12px 0;
    color:var(--pricing-muted-final,var(--muted));
    font-size:12px;
    font-weight:700;
}

.public-price-unavailable.active{
    display:block;
}

.public-contract-backdrop{
    position:fixed;
}

.pricing-public-page .contract-modal{
    color:var(--pricing-text-final,var(--text));
    background:var(--pricing-card-final,var(--panel));
    border-color:var(--pricing-border-final,var(--line));
}

.pricing-public-page .preview-modal-head,
.pricing-public-page .preview-modal-foot{
    background:var(--pricing-card-final,var(--panel));
    border-color:var(--pricing-border-final,var(--line));
}

.pricing-public-page .contract-option{
    background:var(--pricing-card-final,var(--panel));
    border-color:var(--pricing-border-final,var(--line));
}

@media(max-width:700px){
    .pricing-public-page .live-preview-shell{
        padding:18px 0 22px;
    }

    .public-heading,
    .public-cycle-nav{
        padding-left:16px;
        padding-right:16px;
    }

    .public-plan-grid{
        display:flex;
        overflow-x:auto;
        gap:14px;
        padding:4px 12vw 16px 16px;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .public-plan-grid::-webkit-scrollbar{
        display:none;
    }

    .public-plan-card{
        flex:0 0 82vw;
        max-width:340px;
        scroll-snap-align:start;
    }
}

/* V37 - Domínio grátis por periodicidade */
.free-domain-settings{
    margin-top:14px;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
}
.free-domain-settings .switch-row{
    border:0;
    border-radius:0;
}
.free-domain-fields{
    display:grid;
    gap:12px;
    padding:14px;
    border-top:1px solid var(--line);
    background:#081525;
}
.free-domain-fields.is-hidden{
    display:none;
}

.preview-free-domain{
    display:flex;
    align-items:center;
    gap:6px;
    width:max-content;
    max-width:100%;
    margin-top:9px;
    padding:6px 9px;
    border-radius:8px;
    background:rgba(34,197,94,.09);
    color:#22c55e;
    font-size:10px;
    font-weight:800;
}
.preview-free-domain-icon{
    flex:0 0 auto;
}
.preview-free-domain-tooltip,
.contract-free-domain-tooltip{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border:1px solid currentColor;
    border-radius:50%;
    font-size:10px;
    font-weight:900;
    cursor:help;
}
.preview-free-domain-tooltip::after,
.contract-free-domain-tooltip::after{
    content:attr(data-tooltip);
    position:absolute;
    left:50%;
    bottom:calc(100% + 8px);
    z-index:300;
    width:max-content;
    max-width:280px;
    padding:8px 10px;
    border:1px solid var(--pricing-border-final,var(--line));
    border-radius:9px;
    background:var(--pricing-card-final,#0d1a2b);
    color:var(--pricing-text-final,#edf5ff);
    box-shadow:0 12px 30px rgba(0,0,0,.28);
    font-size:10px;
    font-weight:500;
    line-height:1.4;
    white-space:normal;
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,4px);
    transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
    pointer-events:none;
}
.preview-free-domain-tooltip:hover::after,
.preview-free-domain-tooltip:focus::after,
.contract-free-domain-tooltip:hover::after,
.contract-free-domain-tooltip:focus::after{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}

.contract-free-domain{
    display:flex;
    align-items:center;
    gap:7px;
    margin:12px 0 18px;
    padding:9px 10px;
    border-radius:10px;
    background:rgba(34,197,94,.09);
    color:#22c55e;
    font-size:11px;
}
.contract-free-domain strong{
    font-size:11px;
}


/* V42 - Tema claro padrão */
.pricing-theme-light,
.pricing-public-page.pricing-theme-light,
.live-preview-shell.pricing-theme-light{
    --pricing-bg-final:var(--pricing-custom-bg,#ffffff);
    --pricing-card-final:var(--pricing-custom-card,#ffffff);
    --pricing-border-final:var(--pricing-custom-border,#d7dee7);
    --pricing-text-final:var(--pricing-custom-text,#111111);
    --pricing-muted-final:var(--pricing-custom-muted,#4b5563);
    --pricing-title-final:var(--pricing-custom-title,#111111);
    --pricing-description-final:var(--pricing-custom-description,#374151);
    --pricing-accent-final:var(--pricing-custom-accent,#6aa8d0);
    --pricing-button-final:var(--pricing-custom-button,#6aa8d0);
    --pricing-button-text-final:var(--pricing-custom-button-text,#111111);
    --pricing-price-final:var(--pricing-custom-price,#6aa8d0);
    --pricing-old-price-final:var(--pricing-custom-old-price,#6b7280);
    --pricing-discount-text-final:var(--pricing-custom-discount-text,#111111);
    --pricing-discount-bg-final:var(--pricing-custom-discount-bg,#d9ebf6);
    --pricing-saving-text-final:var(--pricing-custom-saving-text,#111111);
    --pricing-saving-bg-final:var(--pricing-custom-saving-bg,#eaf4fa);
    --pricing-period-total-final:var(--pricing-custom-period-total,#374151);
    --pricing-best-value-final:var(--pricing-custom-best-value,#111111);
    color:#111111;
    background:#ffffff;
}

.pricing-theme-light .live-plan-card,
.pricing-theme-light .contract-option,
.pricing-theme-light .contract-modal{
    color:var(--pricing-text-final,#111111);
}

.pricing-theme-light .pricing-cta{
    background:var(--pricing-button-final,#6aa8d0);
    color:var(--pricing-button-text-final,#111111);
}


/* V43 - Tema claro refinado */
.pricing-theme-light,
.pricing-public-page.pricing-theme-light,
.live-preview-shell.pricing-theme-light{
    --pricing-bg-final:var(--pricing-custom-bg,#ffffff);
    --pricing-card-final:var(--pricing-custom-card,#ffffff);
    --pricing-border-final:var(--pricing-custom-border,#d7dee7);
    --pricing-text-final:var(--pricing-custom-text,#111111);
    --pricing-muted-final:var(--pricing-custom-muted,#6b7280);
    --pricing-title-final:var(--pricing-custom-title,#111111);
    --pricing-description-final:var(--pricing-custom-description,#6b7280);
    --pricing-accent-final:var(--pricing-custom-accent,#6aa8d0);
    --pricing-button-final:var(--pricing-custom-button,#6aa8d0);
    --pricing-button-text-final:var(--pricing-custom-button-text,#ffffff);
    --pricing-price-final:var(--pricing-custom-price,#2f7de1);
    --pricing-old-price-final:var(--pricing-custom-old-price,#6b7280);
    --pricing-discount-text-final:var(--pricing-custom-discount-text,#198754);
    --pricing-discount-bg-final:var(--pricing-custom-discount-bg,#dff5e7);
    --pricing-saving-text-final:var(--pricing-custom-saving-text,#2f7de1);
    --pricing-saving-bg-final:var(--pricing-custom-saving-bg,#e7f1ff);
    --pricing-period-total-final:var(--pricing-custom-period-total,#374151);
    --pricing-best-value-final:var(--pricing-custom-best-value,#111111);
    color:#111111;
    background:#ffffff;
}

.pricing-theme-light .recommended-strip{
    background:var(--recommended-color,#69cf91);
    color:#ffffff;
}

.pricing-theme-light .preview-free-domain,
.pricing-theme-light .contract-free-domain{
    background:#eafaf0;
    color:#16a34a;
}

.pricing-theme-light .pricing-cta{
    background:var(--pricing-button-final,#6aa8d0);
    color:var(--pricing-button-text-final,#ffffff);
}

.preview-price-topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    margin-bottom:6px;
}
.preview-price-topline .preview-old-price{
    margin:0;
}
.preview-price-topline .preview-discount-badge{
    flex:0 0 auto;
    margin:0 0 0 auto;
}

/* V46 - Tipografia isolada por elemento
   Importante: nunca usar `inherit` como fallback aqui, pois esta seção vem
   depois das regras base e acabaria sobrescrevendo o tamanho original. */
.live-preview-heading h1,
.live-preview-heading h2,
.public-heading h1{
    font-size:var(--pricing-font-table-title-size,30px);
    font-weight:var(--pricing-font-table-title-weight,800);
}
.live-preview-heading p,
.public-heading p{
    font-size:var(--pricing-font-table-description-size,13px);
    font-weight:var(--pricing-font-table-description-weight,400);
}
.live-plan-card h2,
.live-plan-card h3{
    font-size:var(--pricing-font-plan-title-size,20px);
    font-weight:var(--pricing-font-plan-title-weight,800);
}
.live-plan-card > p,
.public-plan-description{
    font-size:var(--pricing-font-plan-description-size,12px);
    font-weight:var(--pricing-font-plan-description-weight,400);
}

/* O grupo de preço é isolado dos demais textos do card. */
.preview-current-price{
    font-size:var(--pricing-font-price-size,28px);
    font-weight:var(--pricing-font-price-weight,800);
}
.preview-current-price strong{
    font-size:1em !important;
    font-weight:inherit !important;
}
.preview-current-price small,
.preview-current-price > span{
    font-size:.48em !important;
    font-weight:600 !important;
}

.preview-old-price{
    font-size:var(--pricing-font-old-price-size,11px);
    font-weight:var(--pricing-font-old-price-weight,400);
}
.preview-discount-badge{
    font-size:var(--pricing-font-discount-size,10px);
    font-weight:var(--pricing-font-discount-weight,900);
}
.preview-period-total{
    font-size:var(--pricing-font-period-total-size,11px);
    font-weight:var(--pricing-font-period-total-weight,400);
}
.preview-saving{
    font-size:var(--pricing-font-saving-size,10px);
    font-weight:var(--pricing-font-saving-weight,800);
}
.preview-best-value{
    font-size:var(--pricing-font-best-value-size,10px);
    font-weight:var(--pricing-font-best-value-weight,900);
}
.live-feature-list li,
.live-feature-list .feature-label{
    font-size:var(--pricing-font-feature-size,12px);
    font-weight:var(--pricing-font-feature-weight,400);
}
.pricing-cta{
    font-size:var(--pricing-font-button-size,13px);
    font-weight:var(--pricing-font-button-weight,800);
}
.recommended-strip{
    font-size:var(--pricing-font-recommended-size,11px);
    font-weight:var(--pricing-font-recommended-weight,900);
}
.preview-free-domain,
.contract-free-domain{
    font-size:var(--pricing-font-free-domain-size,10px);
    font-weight:var(--pricing-font-free-domain-weight,800);
}

/* Compatibilidade com pop-up público sem contaminar outros textos. */
.contract-price{
    font-size:var(--pricing-font-price-size,28px);
    font-weight:var(--pricing-font-price-weight,800);
}
.contract-old-price{
    font-size:var(--pricing-font-old-price-size,11px);
    font-weight:var(--pricing-font-old-price-weight,400);
}
.contract-discount{
    font-size:var(--pricing-font-discount-size,10px);
    font-weight:var(--pricing-font-discount-weight,900);
}
.contract-saving{
    font-size:var(--pricing-font-saving-size,10px);
    font-weight:var(--pricing-font-saving-weight,800);
}

/* V45 - Linha do preço antigo e fundo do domínio grátis */
.live-preview-shell[class*="pricing-theme-"],
.preview-page[class*="pricing-theme-"],
.pricing-public-page[class*="pricing-theme-"]{
    --pricing-old-price-line-final:var(--pricing-custom-old-price-line,var(--pricing-old-price-final,currentColor));
    --pricing-free-domain-bg-final:var(--pricing-custom-free-domain-bg,rgba(34,197,94,.09));
}

.preview-old-price,
.contract-old-price{
    text-decoration-line:line-through;
    text-decoration-color:var(--pricing-old-price-line-final,currentColor) !important;
    text-decoration-thickness:1.5px;
}

.preview-free-domain,
.contract-free-domain{
    background:var(--pricing-free-domain-bg-final,rgba(34,197,94,.09)) !important;
}

/* Tema claro mantém o padrão aprovado quando o usuário não personalizar. */
.pricing-theme-light,
.pricing-public-page.pricing-theme-light,
.live-preview-shell.pricing-theme-light{
    --pricing-free-domain-bg-final:var(--pricing-custom-free-domain-bg,#eafaf0);
}


/* V47 - Linhas divisórias independentes */
.live-preview-shell[class*="pricing-theme-"],
.preview-page[class*="pricing-theme-"],
.pricing-public-page[class*="pricing-theme-"],
.contract-modal[class*="pricing-theme-"]{
    --pricing-separator-final:var(--pricing-custom-separator,var(--pricing-border-final,var(--pricing-line,var(--line))));
}

.live-price-placeholder{
    border-top-color:var(--pricing-separator-final) !important;
    border-bottom-color:var(--pricing-separator-final) !important;
}
.live-secondary-title{
    border-top-color:var(--pricing-separator-final) !important;
}
.preview-table-row + .preview-table-row,
.live-plan-card hr,
.public-plan-card hr{
    border-color:var(--pricing-separator-final) !important;
}

/* V47 - Popup usa exatamente a aparência da tabela */
.pricing-theme-dark .contract-modal,
.contract-modal.pricing-theme-dark,
.pricing-theme-auto .contract-modal,
.contract-modal.pricing-theme-auto{
    background:var(--pricing-card-final,var(--pricing-surface,#0d1a2b));
    color:var(--pricing-text-final,var(--pricing-text,#edf5ff));
    border-color:var(--pricing-border-final,var(--pricing-line,#29415f));
}

.pricing-theme-light .contract-modal,
.contract-modal.pricing-theme-light{
    background:var(--pricing-card-final,#ffffff);
    color:var(--pricing-text-final,#111111);
    border-color:var(--pricing-border-final,#d7dee7);
}

.contract-modal .preview-modal-head,
.contract-modal .preview-modal-foot{
    background:var(--pricing-card-final,var(--pricing-surface,#0d1a2b)) !important;
    color:var(--pricing-text-final,var(--pricing-text,#edf5ff)) !important;
    border-color:var(--pricing-separator-final,var(--pricing-border-final,var(--pricing-line,#29415f))) !important;
}

.contract-modal .preview-modal-head span{
    color:var(--pricing-muted-final,var(--pricing-muted,#8fa4bc)) !important;
}

.contract-modal .modal-close,
.contract-modal .btn.ghost{
    color:var(--pricing-text-final,var(--pricing-text,#edf5ff)) !important;
    border-color:var(--pricing-border-final,var(--pricing-line,#29415f)) !important;
    background:transparent !important;
}

.contract-modal-body{
    background:var(--pricing-bg-final,var(--pricing-bg,#081525));
}

.contract-option{
    background:var(--pricing-card-final,var(--pricing-surface,#0d1a2b)) !important;
    color:var(--pricing-text-final,var(--pricing-text,#edf5ff)) !important;
    border-color:var(--pricing-border-final,var(--pricing-line,#29415f)) !important;
}

.contract-option.best{
    border-color:var(--pricing-best-value-final,#22c55e) !important;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--pricing-best-value-final,#22c55e) 20%,transparent);
}

.contract-best-badge{
    color:var(--pricing-best-value-final,#22c55e) !important;
    background:color-mix(in srgb,var(--pricing-best-value-final,#22c55e) 12%,transparent) !important;
    font-size:var(--pricing-font-best-value-size,10px);
    font-weight:var(--pricing-font-best-value-weight,900);
}

.contract-option h3{
    color:var(--pricing-text-final,var(--pricing-text,#edf5ff));
    font-size:var(--pricing-font-plan-title-size,18px);
    font-weight:var(--pricing-font-plan-title-weight,800);
}

.contract-old-price{
    color:var(--pricing-old-price-final,var(--pricing-muted-final,#8fa4bc)) !important;
}
.contract-discount{
    background:var(--pricing-discount-bg-final,rgba(34,197,94,.12)) !important;
    color:var(--pricing-discount-text-final,#22c55e) !important;
}
.contract-price small,
.contract-price strong{
    color:var(--pricing-price-final,var(--pricing-accent-final,#22b8cf)) !important;
}
.contract-price span,
.contract-total{
    color:var(--pricing-period-total-final,var(--pricing-muted-final,#8fa4bc)) !important;
}
.contract-saving{
    color:var(--pricing-saving-text-final,var(--pricing-accent-final,#22b8cf)) !important;
    background:var(--pricing-saving-bg-final,transparent) !important;
    border-color:color-mix(in srgb,var(--pricing-saving-text-final,var(--pricing-accent-final,#22b8cf)) 45%,transparent) !important;
}
.contract-free-domain{
    background:var(--pricing-free-domain-bg-final,rgba(34,197,94,.09)) !important;
    color:var(--pricing-accent-final,#22c55e) !important;
}

/* Tema claro do popup, inclusive botões de fechar */
.pricing-theme-light .contract-modal .modal-close,
.contract-modal.pricing-theme-light .modal-close,
.pricing-theme-light .contract-modal .btn.ghost,
.contract-modal.pricing-theme-light .btn.ghost{
    color:#111111 !important;
}


/* V48 - Popup de periodicidades em carrossel */
.contract-carousel-shell{
    position:relative;
}

.contract-options{
    display:flex !important;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:2px 8px 8px;
}

.contract-options::-webkit-scrollbar{
    display:none;
}

.contract-option{
    flex:0 0 min(340px,82vw);
    max-width:340px;
    scroll-snap-align:center;
    scroll-snap-stop:always;
}

.contract-nav{
    position:absolute;
    top:50%;
    z-index:30;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-50%);
    border:1px solid var(--pricing-border-final,var(--pricing-line,#29415f));
    border-radius:50%;
    background:color-mix(in srgb,var(--pricing-card-final,var(--pricing-surface,#0d1a2b)) 92%,transparent);
    color:var(--pricing-text-final,var(--pricing-text,#edf5ff));
    box-shadow:0 8px 24px rgba(0,0,0,.22);
    font-size:28px;
    line-height:1;
    cursor:pointer;
    backdrop-filter:blur(8px);
    transition:transform .15s ease,opacity .15s ease,background .15s ease;
}

.contract-nav:hover{
    transform:translateY(-50%) scale(1.06);
}

.contract-nav-prev{
    left:-6px;
}

.contract-nav-next{
    right:-6px;
}

.contract-nav[hidden]{
    display:none !important;
}

/* V48 - Hierarquia De / Para */
.contract-price-topline{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-top:8px;
}

.contract-price-from{
    display:grid;
    gap:2px;
    min-width:0;
}

.contract-price-from span,
.contract-price-to-label{
    color:var(--pricing-muted-final,var(--pricing-muted,#8fa4bc));
    font-size:11px;
    font-weight:700;
    line-height:1.2;
}

.contract-price-from strong{
    color:var(--pricing-old-price-final,var(--pricing-muted-final,#8fa4bc));
    font-size:var(--pricing-font-old-price-size,11px);
    font-weight:var(--pricing-font-old-price-weight,400);
    text-decoration-line:line-through;
    text-decoration-color:var(--pricing-old-price-line-final,currentColor);
    text-decoration-thickness:1.5px;
}

.contract-price-to-label{
    margin-top:10px;
}

.contract-discount{
    margin:0 !important;
    flex:0 0 auto;
    align-self:flex-end;
}

.contract-price{
    margin-top:2px !important;
}

/* Economia ganha mais presença no popup */
.contract-saving{
    margin:12px 0 18px;
    padding:10px 12px !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.35;
}

.contract-saving strong{
    font-weight:900;
}

/* Destaque recomendado apenas no popup */
.contract-option.popup-recommended{
    position:relative;
}

.contract-option.popup-recommended .contract-best-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-bottom:12px;
}

/* Tema claro */
.contract-modal.pricing-theme-light .contract-nav,
.pricing-theme-light .contract-modal .contract-nav{
    background:rgba(255,255,255,.94);
    color:#111111;
    border-color:var(--pricing-border-final,#d7dee7);
}

@media(min-width:900px){
    .contract-option{
        flex-basis:min(320px,36vw);
    }
}

@media(max-width:700px){
    .contract-modal-body{
        padding:18px 12px;
    }

    .contract-options{
        padding-left:18px;
        padding-right:18px;
    }

    .contract-option{
        flex:0 0 calc(100vw - 150px);
        min-width:280px;
        max-width:320px;
    }

    .contract-nav{
        width:40px;
        height:40px;
        font-size:26px;
    }

    .contract-nav-prev{
        left:0;
    }

    .contract-nav-next{
        right:0;
    }
}


/* V49 - Recomendado do popup */
.contract-option.popup-recommended{
    border-color:#fbbf24 !important;
    box-shadow:0 0 0 1px rgba(251,191,36,.32),0 12px 28px rgba(0,0,0,.12) !important;
}

.contract-option.popup-recommended .contract-best-badge{
    background:#fef3c7 !important;
    color:#92400e !important;
    border:1px solid #fbbf24 !important;
    font-weight:900 !important;
    letter-spacing:.02em;
}

/* Smartphone: navegação natural por swipe; sem setas artificiais. */
@media(max-width:700px){
    .contract-nav{
        display:none !important;
    }

    .contract-options{
        touch-action:pan-x;
        overscroll-behavior-x:contain;
        cursor:grab;
    }

    .contract-options:active{
        cursor:grabbing;
    }
}


/* V50 - Faixa diagonal discreta para o recomendado no popup */
.contract-option.popup-recommended{
    position:relative;
    overflow:hidden;
    border-color:var(--pricing-border-final,var(--pricing-line,#29415f)) !important;
    box-shadow:none !important;
    padding-top:56px;
}

/* Remove o badge horizontal da V49 e transforma em ribbon */
.contract-option.popup-recommended .contract-best-badge{
    position:absolute;
    top:14px;
    right:-42px;
    z-index:4;
    width:156px;
    min-height:28px;
    margin:0 !important;
    padding:6px 10px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:5px;
    transform:rotate(45deg);
    transform-origin:center;
    border:0 !important;
    border-radius:0 !important;
    background:#4fbf73 !important;
    color:#ffffff !important;
    box-shadow:0 2px 8px rgba(0,0,0,.10);
    font-size:10px !important;
    font-weight:600 !important;
    line-height:1;
    letter-spacing:0 !important;
    text-transform:none;
    pointer-events:none;
}

.contract-ribbon-star{
    display:inline-block;
    font-size:10px;
    line-height:1;
}

/* O destaque fica deliberadamente discreto nos dois temas. */
.contract-modal.pricing-theme-light .contract-option.popup-recommended .contract-best-badge,
.pricing-theme-light .contract-modal .contract-option.popup-recommended .contract-best-badge{
    background:#67c98a !important;
    color:#ffffff !important;
}

.contract-modal.pricing-theme-dark .contract-option.popup-recommended .contract-best-badge,
.pricing-theme-dark .contract-modal .contract-option.popup-recommended .contract-best-badge,
.contract-modal.pricing-theme-auto .contract-option.popup-recommended .contract-best-badge,
.pricing-theme-auto .contract-modal .contract-option.popup-recommended .contract-best-badge{
    background:#4fbf73 !important;
    color:#ffffff !important;
}

/* Mantém a recomendação sem transformar o card inteiro em um destaque agressivo. */
.contract-option.popup-recommended::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid color-mix(in srgb,#4fbf73 55%,transparent);
    border-radius:inherit;
    pointer-events:none;
}

@media(max-width:700px){
    .contract-option.popup-recommended{
        padding-top:52px;
    }

    .contract-option.popup-recommended .contract-best-badge{
        top:13px;
        right:-44px;
        width:154px;
        min-height:27px;
        font-size:9px !important;
    }
}


/* V56 - refinamento IA e tema claro */
.resource-new-badge{
    background:var(--resource-new-color,#22c55e);
    color:#062a16;
    font-weight:800
}
.pricing-theme-light .live-feature-list li strong,
.preview-page.pricing-theme-light .live-feature-list li strong{
    color:#17324f;
    font-weight:700
}
.pricing-theme-light .live-secondary-title,
.preview-page.pricing-theme-light .live-secondary-title{
    color:#10243f;
    font-weight:700
}
.pricing-theme-light .pricing-cta,
.preview-page.pricing-theme-light .pricing-cta{
    background:#6aa8d0;
    color:#0b1c2d
}
.preview-old-price{font-size:12px;line-height:1.35}
.preview-discount-badge{font-size:11px;padding:5px 8px;margin:6px 0 8px}


/* V57 - Padrão visual refinado para tabelas geradas pela IA */

/*
 * Tema claro
 * #6aa8d0 é a cor principal aprovada para preço e CTA.
 * As variáveis personalizadas continuam tendo prioridade.
 */
.pricing-theme-light,
.pricing-public-page.pricing-theme-light,
.live-preview-shell.pricing-theme-light,
.contract-modal.pricing-theme-light{
    --pricing-price-final:var(--pricing-custom-price,#6aa8d0);
    --pricing-button-final:var(--pricing-custom-button,#6aa8d0);
    --pricing-button-text-final:var(--pricing-custom-button-text,#ffffff);
    --pricing-old-price-line-final:var(--pricing-custom-old-price-line,#ef4444);
}

/* Tema escuro: mantém a identidade atual, mas CTA padrão passa a ter texto branco. */
.pricing-theme-dark,
.pricing-public-page.pricing-theme-dark,
.live-preview-shell.pricing-theme-dark,
.contract-modal.pricing-theme-dark,
.pricing-theme-auto,
.pricing-public-page.pricing-theme-auto,
.live-preview-shell.pricing-theme-auto,
.contract-modal.pricing-theme-auto{
    --pricing-button-text-final:var(--pricing-custom-button-text,#ffffff);
    --pricing-old-price-line-final:var(--pricing-custom-old-price-line,#ef4444);
}

/* Preço atual do tema claro */
.pricing-theme-light .preview-current-price small,
.pricing-theme-light .preview-current-price strong,
.pricing-public-page.pricing-theme-light .preview-current-price small,
.pricing-public-page.pricing-theme-light .preview-current-price strong,
.live-preview-shell.pricing-theme-light .preview-current-price small,
.live-preview-shell.pricing-theme-light .preview-current-price strong{
    color:var(--pricing-price-final,#6aa8d0) !important;
}

/* CTA padrão com texto branco nos dois temas. Personalização manual continua soberana. */
.pricing-theme-light .pricing-cta,
.pricing-public-page.pricing-theme-light .pricing-cta,
.live-preview-shell.pricing-theme-light .pricing-cta,
.pricing-theme-dark .pricing-cta,
.pricing-public-page.pricing-theme-dark .pricing-cta,
.live-preview-shell.pricing-theme-dark .pricing-cta,
.pricing-theme-auto .pricing-cta,
.pricing-public-page.pricing-theme-auto .pricing-cta,
.live-preview-shell.pricing-theme-auto .pricing-cta{
    color:var(--pricing-button-text-final,#ffffff) !important;
}

/*
 * Preço antigo e desconto recebem 25% mais presença.
 * 12px -> 15px e 11px -> ~14px.
 */
.preview-old-price,
.contract-old-price,
.contract-price-from strong{
    font-size:15px !important;
    font-weight:400 !important;
    text-decoration-color:var(--pricing-old-price-line-final,#ef4444) !important;
    text-decoration-thickness:1.5px;
}

.preview-discount-badge,
.contract-discount{
    font-size:14px !important;
    line-height:1;
    padding:5px 9px;
}

/* NOVO: mesma linguagem visual do desconto, sem peso excessivo. */
.resource-new-badge{
    margin-left:6px;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(34,197,94,.13) !important;
    color:#16a34a !important;
    font-size:9px;
    font-weight:400 !important;
    line-height:1;
    text-transform:uppercase;
    box-shadow:none;
}

.pricing-theme-dark .resource-new-badge,
.pricing-public-page.pricing-theme-dark .resource-new-badge,
.live-preview-shell.pricing-theme-dark .resource-new-badge,
.pricing-theme-auto .resource-new-badge,
.pricing-public-page.pricing-theme-auto .resource-new-badge,
.live-preview-shell.pricing-theme-auto .resource-new-badge{
    background:rgba(34,197,94,.13) !important;
    color:#4ade80 !important;
}

/*
 * Recursos principais e adicionais:
 * sem quebra de linha, fonte ~15% menor para aumentar comparabilidade vertical.
 */
.live-feature-list li,
.public-feature-list li,
.live-feature-list .feature-label,
.public-feature-list .feature-label{
    font-size:10.2px !important;
    line-height:1.32;
    white-space:nowrap;
    letter-spacing:-.01em;
}

.live-feature-list li{
    gap:6px;
}

.live-feature-list .feature-label,
.public-feature-list .feature-label{
    min-width:0;
    flex:1 1 auto;
    overflow:visible;
}

.live-feature-list li strong,
.public-feature-list li strong{
    margin-left:3px;
}

/* No tema claro o valor continua diferenciado, mas sem negrito pesado. */
.pricing-theme-light .live-feature-list li strong,
.pricing-public-page.pricing-theme-light .live-feature-list li strong,
.live-preview-shell.pricing-theme-light .live-feature-list li strong{
    color:#244968;
    font-weight:600 !important;
}

/* Domínio grátis: remover peso do texto. */
.preview-free-domain,
.contract-free-domain,
.preview-free-domain > span,
.contract-free-domain > span,
.contract-free-domain strong{
    font-weight:400 !important;
}

/*
 * Indicador de observação:
 * 18px -> aproximadamente 12px (-33% / próximo dos 35% solicitados)
 * e sem negrito.
 */
.resource-note-icon{
    width:12px !important;
    height:12px !important;
    min-width:12px;
    margin-left:3px;
    border-width:1px;
    font-size:7px !important;
    font-weight:400 !important;
    line-height:1;
    background:transparent;
    box-shadow:none;
}

/* Tema claro mantém o alerta discreto em laranja. */
.pricing-theme-light .resource-note-icon,
.pricing-public-page.pricing-theme-light .resource-note-icon,
.live-preview-shell.pricing-theme-light .resource-note-icon{
    border-color:#f59e0b !important;
    color:#f59e0b !important;
    background:transparent !important;
}

/* Tema escuro: indicador branco conforme padrão aprovado. */
.pricing-theme-dark .resource-note-icon,
.pricing-public-page.pricing-theme-dark .resource-note-icon,
.live-preview-shell.pricing-theme-dark .resource-note-icon,
.pricing-theme-auto .resource-note-icon,
.pricing-public-page.pricing-theme-auto .resource-note-icon,
.live-preview-shell.pricing-theme-auto .resource-note-icon{
    border-color:rgba(255,255,255,.72) !important;
    color:#ffffff !important;
    background:transparent !important;
}

/* Evita que o hover recupere o fundo antigo do indicador reduzido. */
.resource-note-icon:hover,
.resource-note-icon:focus{
    background:transparent !important;
    box-shadow:none !important;
}

/* Mantém a tooltip legível apesar do ícone reduzido. */
.resource-note-icon::after{
    font-size:11px !important;
    font-weight:500 !important;
    white-space:normal !important;
}

/* Em telas muito estreitas os cards já usam carrossel horizontal.
   Mantemos a linha única para preservar comparação entre planos. */
@media(max-width:700px){
    .live-feature-list li,
    .public-feature-list li,
    .live-feature-list .feature-label,
    .public-feature-list .feature-label{
        font-size:10px !important;
    }
}

/* V61 - Negrito independente de recursos e risco mais fino */
.resource-name-bold{font-weight:800 !important;}
.resource-value-bold{font-weight:800 !important;}
.resource-value-normal{font-weight:400 !important;}
.preview-old-price,
.contract-old-price,
.contract-price-from strong{
    text-decoration-thickness:1.1px !important;
}
.contract-options.is-dragging{
    user-select:none;
    scroll-snap-type:none !important;
}


/* V62 - Carrosséis e navegação */
.contract-nav:disabled{
    opacity:.28;
    cursor:default;
    transform:translateY(-50%);
}

.contract-nav:disabled:hover{
    transform:translateY(-50%);
}

@media(max-width:700px){
    .public-plan-grid,
    .live-plan-grid{
        padding-right:18vw !important;
    }

    .public-plan-card,
    .live-plan-card{
        flex-basis:76vw !important;
        max-width:330px;
    }
}

/* V62 - risco do preço antigo um pouco mais fino */
.preview-old-price,.contract-old-price,.contract-price-from strong{text-decoration-thickness:.9px !important;}

/* V63 - Persistência visual do negrito do valor/complemento */
.pricing-theme-light .live-feature-list .resource-value-bold,
.pricing-public-page.pricing-theme-light .public-feature-list .resource-value-bold,
.live-preview-shell.pricing-theme-light .live-feature-list .resource-value-bold,
.pricing-theme-dark .live-feature-list .resource-value-bold,
.pricing-public-page.pricing-theme-dark .public-feature-list .resource-value-bold,
.live-preview-shell.pricing-theme-dark .live-feature-list .resource-value-bold,
.pricing-theme-auto .live-feature-list .resource-value-bold,
.pricing-public-page.pricing-theme-auto .public-feature-list .resource-value-bold,
.live-preview-shell.pricing-theme-auto .live-feature-list .resource-value-bold{
    font-weight:800 !important;
}

.pricing-theme-light .live-feature-list .resource-value-normal,
.pricing-public-page.pricing-theme-light .public-feature-list .resource-value-normal,
.live-preview-shell.pricing-theme-light .live-feature-list .resource-value-normal,
.pricing-theme-dark .live-feature-list .resource-value-normal,
.pricing-public-page.pricing-theme-dark .public-feature-list .resource-value-normal,
.live-preview-shell.pricing-theme-dark .live-feature-list .resource-value-normal,
.pricing-theme-auto .live-feature-list .resource-value-normal,
.pricing-public-page.pricing-theme-auto .public-feature-list .resource-value-normal,
.live-preview-shell.pricing-theme-auto .live-feature-list .resource-value-normal{
    font-weight:400 !important;
}

/* V63 - durante o pequeno movimento inicial, o snap é suspenso para o efeito aparecer de verdade */
@media(max-width:700px){
    .public-plan-grid.mobile-peek-active,
    .live-plan-grid.mobile-peek-active{
        scroll-snap-type:none !important;
        scroll-behavior:smooth;
    }

    .public-plan-grid,
    .live-plan-grid{
        padding-right:22vw !important;
    }

    .public-plan-card,
    .live-plan-card{
        flex-basis:72vw !important;
        max-width:315px;
    }
}


/* V65 - Periodicidades editáveis pela Aparência */
.live-preview-cycles button{
    font-size:var(--pricing-font-billing-cycle-size,13px);
    font-weight:var(--pricing-font-billing-cycle-weight,400);
}

/*
 * V65 - Centralização real dos cards no popup de periodicidades.
 * O primeiro e o último card também podem ocupar o centro do popup,
 * evitando a sensação de conteúdo colado à lateral esquerda.
 */
.contract-options{
    --contract-card-width:min(340px,82vw);
    padding-left:max(18px,calc((100% - var(--contract-card-width))/2)) !important;
    padding-right:max(18px,calc((100% - var(--contract-card-width))/2)) !important;
    scroll-padding-left:max(18px,calc((100% - var(--contract-card-width))/2));
    scroll-padding-right:max(18px,calc((100% - var(--contract-card-width))/2));
}

.contract-option{
    flex-basis:var(--contract-card-width) !important;
    width:var(--contract-card-width);
}

@media(min-width:900px){
    .contract-options{
        --contract-card-width:min(320px,36vw);
    }
}

@media(max-width:700px){
    .contract-options{
        --contract-card-width:clamp(280px,calc(100vw - 150px),320px);
        padding-left:max(18px,calc((100% - var(--contract-card-width))/2)) !important;
        padding-right:max(18px,calc((100% - var(--contract-card-width))/2)) !important;
    }

    .contract-option{
        min-width:var(--contract-card-width) !important;
        max-width:var(--contract-card-width) !important;
    }
}


/* V66 - Aparência exclusiva e padronizada das periodicidades */
.live-preview-cycles button{
    color:var(--pricing-cycle-text,var(--pricing-muted-final,var(--pricing-muted))) !important;
    background:var(--pricing-cycle-bg,var(--pricing-surface-2,transparent)) !important;
    border-color:var(--pricing-cycle-border,var(--pricing-line)) !important;
    font-size:var(--pricing-font-billing-cycle-size,13px) !important;
    font-weight:var(--pricing-font-billing-cycle-weight,400) !important;
}

.live-preview-cycles button.active{
    color:var(--pricing-cycle-active,var(--pricing-accent-final,var(--pricing-accent))) !important;
    border-color:var(--pricing-cycle-active,var(--pricing-accent-final,var(--pricing-accent))) !important;
    background:var(--pricing-cycle-active-bg,rgba(106,168,208,.10)) !important;
}

/*
 * As variáveis acima pertencem apenas aos botões de periodicidade.
 * Não afetam fundo dos planos, títulos, descrições, preços ou recursos.
 */


/* V68 - cards desktop mais estreitos e fundo individual por plano */
@media(min-width:701px){
    .public-plan-grid.has-multiple{
        grid-template-columns:repeat(auto-fit,minmax(250px,300px)) !important;
        justify-content:center;
    }

    .live-plan-grid{
        grid-template-columns:repeat(auto-fit,minmax(240px,290px)) !important;
        justify-content:center;
    }
}

.live-plan-card,
.public-plan-card{
    background:var(--pricing-plan-card-bg,var(--pricing-card-final,var(--panel))) !important;
}

/* V69 - destaque de plano e hover do CTA */
.recommended-strip{
    color:var(--recommended-text-color,#04130a) !important;
}
.live-plan-card.recommended-sidebar{
    border:1px solid var(--pricing-border-final,var(--pricing-line,#29415f));
    border-left:5px solid var(--recommended-color);
}
.live-plan-card.recommended-elevated{
    border:1px solid color-mix(in srgb,var(--recommended-color) 45%,var(--pricing-line,#29415f));
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 0 1px color-mix(in srgb,var(--recommended-color) 22%,transparent);
}
.pricing-cta{
    transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.pricing-cta:not(:disabled):hover{
    background:var(--pricing-custom-button-hover,var(--pricing-button-hover-final,color-mix(in srgb,var(--pricing-button-final,var(--pricing-accent-final,#22b8cf)) 82%,#000))) !important;
    color:var(--pricing-custom-button-hover-text,var(--pricing-button-hover-text-final,#fff)) !important;
    border-color:var(--pricing-custom-button-hover,var(--pricing-button-hover-final,color-mix(in srgb,var(--pricing-button-final,var(--pricing-accent-final,#22b8cf)) 82%,#000))) !important;
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(0,0,0,.16);
}


/* V70 - estilos de destaque realmente distintos e visíveis */
.live-plan-card.recommended-outline{
    border:2px solid var(--recommended-color) !important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--recommended-color) 28%,transparent) !important;
    transform:none !important;
}

.live-plan-card.recommended-topbar{
    border:1px solid var(--pricing-line,#29415f) !important;
    border-top:6px solid var(--recommended-color) !important;
    box-shadow:none !important;
    transform:none !important;
}

.live-plan-card.recommended-glow{
    border:1px solid var(--recommended-color) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb,var(--recommended-color) 34%,transparent),
        0 0 28px color-mix(in srgb,var(--recommended-color) 34%,transparent) !important;
    transform:none !important;
}

.live-plan-card.recommended-sidebar{
    border:1px solid var(--pricing-line,#29415f) !important;
    border-left:7px solid var(--recommended-color) !important;
    box-shadow:none !important;
    transform:none !important;
}

.live-plan-card.recommended-elevated{
    border:1px solid color-mix(in srgb,var(--recommended-color) 48%,var(--pricing-line,#29415f)) !important;
    box-shadow:
        0 18px 38px rgba(0,0,0,.24),
        0 0 0 1px color-mix(in srgb,var(--recommended-color) 24%,transparent) !important;
    transform:translateY(-8px) !important;
}

.live-plan-card.recommended-elevated:hover{
    transform:translateY(-10px) !important;
}



/* V76 - alinhamento vertical quando existe faixa de destaque
   Os cards sem destaque reservam o mesmo espaço da faixa "Recomendado". */
@media(min-width:701px){
    .live-plan-grid:has(.recommended-strip) > .live-plan-card:not(.recommended)::before{
        content:"";
        display:block;
        height:36px;
        margin:-20px -20px 16px;
        pointer-events:none;
    }
}

/* V76 - leve expansão/elevação opcional por plano */
.live-plan-card{
    transform-origin:center center;
    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease,
        background-color .20s ease;
}

@media(hover:hover) and (pointer:fine){
    .live-plan-card.card-hover-effect:hover{
        transform:translateY(-4px) scale(1.015) !important;
        box-shadow:
            0 16px 34px rgba(0,0,0,.18),
            0 0 0 1px color-mix(in srgb,var(--pricing-border-final,var(--pricing-line,#29415f)) 55%,transparent) !important;
        z-index:4;
    }

    .live-plan-card.recommended-elevated.card-hover-effect:hover{
        transform:translateY(-10px) scale(1.015) !important;
    }

    .live-plan-card.recommended-glow.card-hover-effect:hover{
        box-shadow:
            0 0 0 2px color-mix(in srgb,var(--recommended-color) 36%,transparent),
            0 0 32px color-mix(in srgb,var(--recommended-color) 38%,transparent),
            0 16px 34px rgba(0,0,0,.14) !important;
    }
}


/* V77 - benefício comercial genérico por periodicidade */
.benefit-icon-picker{
    display:grid;
    gap:9px;
}
.benefit-icon-picker .field-title{
    font-size:12px;
    font-weight:800;
}
.benefit-icon-gallery{
    display:grid;
    grid-template-columns:repeat(8,minmax(42px,1fr));
    gap:8px;
}
.benefit-icon-option{
    cursor:pointer;
}
.benefit-icon-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.benefit-icon-option span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#0a1a2b;
    font-size:20px;
    transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.benefit-icon-option:hover span{
    border-color:#22b8cf;
    transform:translateY(-1px);
}
.benefit-icon-option input:checked + span{
    border-color:#22b8cf;
    background:rgba(34,184,207,.12);
    box-shadow:0 0 0 2px rgba(34,184,207,.12);
}
.benefit-color-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.benefit-color-item{
    min-width:0;
}

.preview-free-domain,
.contract-free-domain{
    background:var(--period-benefit-bg,var(--pricing-custom-free-domain-bg,rgba(34,197,94,.09))) !important;
    color:var(--period-benefit-color,#22c55e) !important;
    border:1px solid var(--period-benefit-border,rgba(34,197,94,.22)) !important;
}
.preview-free-domain{
    font-weight:600;
}
.preview-free-domain-icon{
    font-size:12px;
}
.contract-free-domain strong{
    color:inherit;
    font-weight:600;
}

@media(max-width:760px){
    .benefit-icon-gallery{
        grid-template-columns:repeat(6,minmax(40px,1fr));
    }
    .benefit-color-grid{
        grid-template-columns:1fr;
    }
}


/* V78 - destaque discreto, hover padrão e prévia sem quebra indevida */
.live-plan-card.recommended-minimal{
    border:1px solid var(--recommended-color) !important;
    box-shadow:none !important;
    transform:none !important;
}

/* O plano destacado fica apenas ligeiramente maior, sem alterar o fluxo do grid. */
@media(min-width:701px){
    .live-plan-card.recommended{
        scale:1.008;
        z-index:2;
    }
}

/* A prévia administrativa deve manter os cards lado a lado como na publicação. */
@media(min-width:701px){
    .live-plan-grid{
        grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
        align-items:stretch;
        justify-content:center;
    }
}

@media(hover:hover) and (pointer:fine){
    .live-plan-card.recommended.card-hover-effect:hover{
        scale:1.012;
    }
}

/* V79 - a prévia administrativa deve permanecer em uma única faixa horizontal */
.live-preview-shell.preview-device-desktop .live-plan-grid,
.live-preview-shell.preview-device-tablet .live-plan-grid{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
}

.live-preview-shell.preview-device-desktop .live-plan-card{
    flex:0 0 clamp(245px,47%,292px) !important;
    min-width:245px !important;
    max-width:292px !important;
}

.live-preview-shell.preview-device-tablet .live-plan-card{
    flex:0 0 min(340px,72%) !important;
    min-width:260px !important;
}


/* V101 - cor personalizada do título também na tabela publicada */
.pricing-public-page .public-heading h1,
.pricing-public-page .live-preview-heading h1{
    color:var(--pricing-title-final,var(--pricing-custom-title,var(--pricing-text-final))) !important;
}


/* V103 - cabeçalho configurável de Recursos adicionais */
.live-secondary-title.custom-secondary-heading{
    display:flex;
    align-items:center;
    gap:6px;
}
.custom-secondary-heading .secondary-heading-icon{
    flex:0 0 auto;
    line-height:1;
}


/* V105 - selo flutuante central de destaque */
.live-plan-card.recommended-pill{
    overflow:visible !important;
    border:1.5px solid var(--recommended-color) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb,var(--recommended-color) 18%,transparent),
        0 10px 24px rgba(0,0,0,.10) !important;
    transform:none !important;
}

.live-plan-card.recommended-pill .recommended-strip{
    position:absolute;
    z-index:6;
    top:0;
    left:50%;
    width:max-content;
    max-width:calc(100% - 24px);
    margin:0 !important;
    padding:7px 15px;
    border-radius:999px;
    transform:translate(-50%,-50%);
    box-shadow:0 6px 16px color-mix(in srgb,var(--recommended-color) 24%,transparent);
    white-space:nowrap;
    line-height:1.1;
    text-align:center;
}

.live-plan-card.recommended-pill .recommended-strip .recommended-icon{
    margin-right:5px;
}

/* No estilo cápsula, todos os títulos começam na mesma altura. */
@media(min-width:701px){
    .live-plan-grid:has(.recommended-pill) > .live-plan-card:not(.recommended)::before{
        height:0 !important;
        margin:0 !important;
    }
}

@media(max-width:700px){
    .live-plan-card.recommended-pill .recommended-strip{
        max-width:calc(100% - 18px);
        padding:6px 12px;
        font-size:10px;
    }
}


/* V106 - respiro e proteção visual do selo flutuante */
.live-plan-grid:has(.recommended-pill){
    /*
     * Reserva espaço DENTRO do grid para a metade superior da cápsula.
     * Isso evita corte na prévia quando o grid também possui overflow-x:auto.
     */
    padding-top:22px !important;
}

/*
 * A cápsula permanece apoiada sobre a borda, mas entra alguns pixels a mais
 * no card para não parecer solta nem excessivamente próxima das periodicidades.
 */
.live-plan-card.recommended-pill .recommended-strip{
    top:1px;
    transform:translate(-50%,-44%) !important;
}

/* Na prévia administrativa o scroll horizontal não pode cortar o selo. */
.live-preview-shell .live-plan-grid:has(.recommended-pill){
    overflow-y:visible;
}

/*
 * No desktop público mantém um espaço confortável entre periodicidades
 * e a cápsula, sem alterar tabelas que não usam este estilo.
 */
.pricing-public-page .public-cycle-nav + .live-plan-grid:has(.recommended-pill),
.pricing-public-page .live-preview-cycles + .live-plan-grid:has(.recommended-pill){
    margin-top:4px;
}

@media(max-width:700px){
    .live-plan-grid:has(.recommended-pill){
        padding-top:19px !important;
    }

    .live-plan-card.recommended-pill .recommended-strip{
        top:1px;
        transform:translate(-50%,-42%) !important;
    }
}


/* V108 - tipografia personalizada sempre vence refinamentos posteriores */
.live-preview-shell .preview-old-price,
.preview-page .preview-old-price,
.pricing-public-page .preview-old-price,
.contract-modal .contract-old-price{
    font-size:var(--pricing-font-old-price-size,12px) !important;
    font-weight:var(--pricing-font-old-price-weight,400) !important;
}

.live-preview-shell .preview-discount-badge,
.preview-page .preview-discount-badge,
.pricing-public-page .preview-discount-badge,
.contract-modal .contract-discount{
    font-size:var(--pricing-font-discount-size,11px) !important;
    font-weight:var(--pricing-font-discount-weight,900) !important;
}


/* V114 - links de recursos visíveis e compactos */
.feature-link{
    display:inline-flex !important;
    align-items:baseline;
    gap:4px;
    width:auto !important;
    max-width:100%;
    color:inherit;
    text-decoration-line:underline !important;
    text-decoration-style:dotted !important;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    text-decoration-color:color-mix(in srgb,currentColor 62%,transparent) !important;
    border-bottom:0 !important;
}

.feature-link:hover{
    color:var(--pricing-accent-final,var(--accent));
    text-decoration-style:solid !important;
    text-decoration-color:currentColor !important;
    border-bottom:0 !important;
}

.feature-external-icon{
    display:inline-block;
    flex:0 0 auto;
    margin-left:1px;
    font-size:.88em;
    line-height:1;
    font-weight:800;
    text-decoration:none !important;
    transform:translateY(-1px);
    opacity:.82;
}

/* V119 - cards preservam largura em telas intermediárias */

/*
 * Em notebooks, janelas reduzidas e telas intermediárias não tentamos
 * comprimir todos os planos para caber na largura disponível.
 * A tabela vira uma faixa horizontal com largura mínima legível por card.
 */
@media (min-width:701px) and (max-width:1279px){
    .pricing-public-page .public-plan-grid,
    .pricing-public-page .live-plan-grid,
    .preview-page .public-plan-grid,
    .live-preview-shell .live-plan-grid{
        display:flex !important;
        flex-wrap:nowrap !important;
        grid-template-columns:none !important;
        justify-content:flex-start !important;
        align-items:stretch !important;
        gap:14px !important;
        overflow-x:auto !important;
        overflow-y:visible !important;
        scroll-snap-type:x proximity;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        padding-left:4px !important;
        padding-right:18px !important;
        padding-bottom:12px !important;
        scrollbar-width:thin;
        scrollbar-color:rgba(100,116,139,.55) transparent;
    }

    .pricing-public-page .public-plan-card,
    .pricing-public-page .live-plan-card,
    .preview-page .public-plan-card,
    .live-preview-shell .live-plan-card{
        flex:0 0 290px !important;
        width:290px !important;
        min-width:290px !important;
        max-width:290px !important;
        scroll-snap-align:start;
    }

    .pricing-public-page .public-plan-grid::-webkit-scrollbar,
    .pricing-public-page .live-plan-grid::-webkit-scrollbar,
    .preview-page .public-plan-grid::-webkit-scrollbar,
    .live-preview-shell .live-plan-grid::-webkit-scrollbar{
        height:8px;
    }

    .pricing-public-page .public-plan-grid::-webkit-scrollbar-track,
    .pricing-public-page .live-plan-grid::-webkit-scrollbar-track,
    .preview-page .public-plan-grid::-webkit-scrollbar-track,
    .live-preview-shell .live-plan-grid::-webkit-scrollbar-track{
        background:transparent;
    }

    .pricing-public-page .public-plan-grid::-webkit-scrollbar-thumb,
    .pricing-public-page .live-plan-grid::-webkit-scrollbar-thumb,
    .preview-page .public-plan-grid::-webkit-scrollbar-thumb,
    .live-preview-shell .live-plan-grid::-webkit-scrollbar-thumb{
        border-radius:999px;
        background:rgba(100,116,139,.45);
    }
}

/*
 * Em telas um pouco maiores que tablet, 300 px por card dá mais respiro
 * sem sacrificar a navegação horizontal.
 */
@media (min-width:1000px) and (max-width:1279px){
    .pricing-public-page .public-plan-card,
    .pricing-public-page .live-plan-card,
    .preview-page .public-plan-card,
    .live-preview-shell .live-plan-card{
        flex-basis:300px !important;
        width:300px !important;
        min-width:300px !important;
        max-width:300px !important;
    }
}


/* V119 - destaque diagonal no canto, sem contorno do card */
.live-plan-card.recommended-diagonal{
    position:relative;
    overflow:hidden !important;
    border:1px solid var(--pricing-border-final,var(--pricing-line,#d7dee7)) !important;
    box-shadow:none !important;
    transform:none !important;
    scale:1 !important;
}

/*
 * O destaque é somente a faixa diagonal.
 * Não há borda colorida, brilho, escala ou elevação no card.
 */
.live-plan-card.recommended-diagonal .recommended-strip{
    position:absolute !important;
    top:16px !important;
    right:-46px !important;
    left:auto !important;
    z-index:7;
    width:160px !important;
    min-height:28px;
    margin:0 !important;
    padding:6px 10px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:4px;
    transform:rotate(45deg) !important;
    transform-origin:center;
    border:0 !important;
    border-radius:0 !important;
    background:var(--recommended-color,#51cf66) !important;
    color:var(--recommended-text-color,#04130a) !important;
    box-shadow:0 2px 7px rgba(0,0,0,.10) !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:1.1;
    text-align:center;
    white-space:nowrap;
    pointer-events:none;
}

/* Ícone menor para não ocupar a faixa. */
.live-plan-card.recommended-diagonal .recommended-icon{
    margin-right:2px !important;
    font-size:9px !important;
}

/*
 * Os estilos anteriores reservavam espaço superior para faixas horizontais.
 * O diagonal é absoluto e não deve deslocar os demais cards.
 */
@media(min-width:701px){
    .live-plan-grid:has(.recommended-diagonal) > .live-plan-card:not(.recommended)::before{
        content:none !important;
        display:none !important;
        height:0 !important;
        margin:0 !important;
    }
}

/* O hover opcional continua permitido, mas sem transformar o estilo base. */
@media(hover:hover) and (pointer:fine){
    .live-plan-card.recommended-diagonal.card-hover-effect:hover{
        transform:translateY(-4px) scale(1.015) !important;
        box-shadow:0 16px 34px rgba(0,0,0,.18) !important;
    }
}

@media(max-width:700px){
    .live-plan-card.recommended-diagonal .recommended-strip{
        top:15px !important;
        right:-48px !important;
        width:156px !important;
        min-height:27px;
        font-size:9px !important;
    }
}

/* V120 - arraste horizontal da faixa de planos */
@media (max-width:1279px){
    .pricing-public-page .public-plan-grid,
    .pricing-public-page .live-plan-grid,
    .preview-page .public-plan-grid,
    .live-preview-shell .live-plan-grid{
        cursor:grab;
        touch-action:pan-x pan-y;
        user-select:none;
    }

    .pricing-public-page .public-plan-grid.is-dragging,
    .pricing-public-page .live-plan-grid.is-dragging,
    .preview-page .public-plan-grid.is-dragging,
    .live-preview-shell .live-plan-grid.is-dragging{
        cursor:grabbing;
        scroll-snap-type:none !important;
    }

    .pricing-public-page .public-plan-grid.is-dragging *,
    .pricing-public-page .live-plan-grid.is-dragging *,
    .preview-page .public-plan-grid.is-dragging *,
    .live-preview-shell .live-plan-grid.is-dragging *{
        user-select:none !important;
    }
}

@media (hover:none), (pointer:coarse){
    .pricing-public-page .public-plan-grid,
    .pricing-public-page .live-plan-grid,
    .preview-page .public-plan-grid,
    .live-preview-shell .live-plan-grid{
        cursor:default;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
    }
}

/* V123 - alinhamento vertical das descrições dos planos */

/*
 * A descrição passa a ocupar sempre uma área equivalente a 3 linhas.
 * Assim divisor, preço, economia/benefícios e CTA começam na mesma altura,
 * mesmo quando a largura disponível faz um texto quebrar antes dos demais.
 */
.public-plan-description{
    display:-webkit-box !important;
    width:100%;
    min-height:calc(1.5em * 3) !important;
    height:calc(1.5em * 3) !important;
    max-height:calc(1.5em * 3) !important;
    margin-bottom:14px;
    line-height:1.5 !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
}

/*
 * Se algum plano estiver sem descrição, o espaço é preservado para que
 * a estrutura continue alinhada com os outros cards.
 */
.public-plan-card > h2 + .live-price-placeholder{
    margin-top:calc((1.5em * 3) + 14px);
}

/*
 * Nas telas intermediárias priorizamos legibilidade e usamos o scroll
 * horizontal já implementado em vez de apertar o conteúdo.
 */
@media (min-width:701px) and (max-width:999px){
    .pricing-public-page .public-plan-card,
    .pricing-public-page .live-plan-card,
    .preview-page .public-plan-card,
    .live-preview-shell .live-plan-card{
        flex-basis:310px !important;
        width:310px !important;
        min-width:310px !important;
        max-width:310px !important;
    }
}

@media (min-width:1000px) and (max-width:1279px){
    .pricing-public-page .public-plan-card,
    .pricing-public-page .live-plan-card,
    .preview-page .public-plan-card,
    .live-preview-shell .live-plan-card{
        flex-basis:320px !important;
        width:320px !important;
        min-width:320px !important;
        max-width:320px !important;
    }
}

/* No mobile a descrição continua limitada, mas com área ligeiramente maior. */
@media(max-width:700px){
    .public-plan-description{
        min-height:calc(1.5em * 3) !important;
        height:calc(1.5em * 3) !important;
        max-height:calc(1.5em * 3) !important;
    }
}

/* V124 - mobile: manter swipe horizontal sem exibir a barra de rolagem */
@media (max-width:700px){
    .pricing-public-page .public-plan-grid,
    .pricing-public-page .live-plan-grid,
    .preview-page .public-plan-grid,
    .live-preview-shell .live-plan-grid{
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
    }

    .pricing-public-page .public-plan-grid::-webkit-scrollbar,
    .pricing-public-page .live-plan-grid::-webkit-scrollbar,
    .preview-page .public-plan-grid::-webkit-scrollbar,
    .live-preview-shell .live-plan-grid::-webkit-scrollbar{
        width:0 !important;
        height:0 !important;
        display:none !important;
        background:transparent !important;
    }

    .pricing-public-page .public-plan-grid::-webkit-scrollbar-track,
    .pricing-public-page .live-plan-grid::-webkit-scrollbar-track,
    .preview-page .public-plan-grid::-webkit-scrollbar-track,
    .live-preview-shell .live-plan-grid::-webkit-scrollbar-track,
    .pricing-public-page .public-plan-grid::-webkit-scrollbar-thumb,
    .pricing-public-page .live-plan-grid::-webkit-scrollbar-thumb,
    .preview-page .public-plan-grid::-webkit-scrollbar-thumb,
    .live-preview-shell .live-plan-grid::-webkit-scrollbar-thumb{
        background:transparent !important;
        border:0 !important;
    }
}


/* V128 - tooltip de recurso responsivo no mobile */
@media (max-width:700px){
    .live-feature-list li{
        justify-content:flex-start !important;
        align-items:center !important;
    }
    .live-feature-list li .feature-label{
        flex:0 1 auto !important;
        width:auto !important;
        max-width:calc(100% - 48px) !important;
    }
    .live-feature-list li .resource-note-icon{
        flex:0 0 18px !important;
        margin-left:7px !important;
        margin-right:0 !important;
        align-self:center;
    }
    .live-feature-list li .resource-note-icon::after{
        left:50% !important;
        right:auto !important;
        bottom:calc(100% + 9px) !important;
        width:min(230px,calc(100vw - 96px)) !important;
        max-width:min(230px,calc(100vw - 96px)) !important;
        min-width:0 !important;
        box-sizing:border-box;
        white-space:normal !important;
        overflow-wrap:anywhere;
        word-break:normal;
        text-align:left;
        border-radius:8px !important;
        transform:translate(-50%,4px) !important;
    }
    .live-feature-list li .resource-note-icon:hover::after,
    .live-feature-list li .resource-note-icon:focus::after{
        transform:translate(-50%,0) !important;
    }
}

/* V129 - tooltip mobile contido no card e ícone circular */
@media (max-width:700px){

    /*
     * O indicador mantém exatamente o tamanho visual aprovado.
     * A V128 reservava 18px no flex para um círculo de 12px, o que podia
     * deformar o botão em uma cápsula horizontal.
     */
    .live-feature-list li .resource-note-icon,
    .public-feature-list li .resource-note-icon{
        position:static !important;
        flex:0 0 12px !important;
        width:12px !important;
        min-width:12px !important;
        max-width:12px !important;
        height:12px !important;
        min-height:12px !important;
        max-height:12px !important;
        padding:0 !important;
        margin-left:6px !important;
        margin-right:0 !important;
        border-radius:50% !important;
        box-sizing:border-box !important;
        align-self:center !important;
        line-height:10px !important;
    }

    /*
     * O tooltip deixa de ser posicionado a partir do próprio ícone.
     * Como o ícone fica `position:static`, o pseudo-elemento passa a usar
     * o <li> (que já é position:relative) como referência.
     *
     * Resultado: a caixa sempre respeita a largura real do recurso/card.
     */
    .live-feature-list li .resource-note-icon::after,
    .public-feature-list li .resource-note-icon::after{
        left:0 !important;
        right:0 !important;
        bottom:calc(100% + 8px) !important;

        width:auto !important;
        min-width:0 !important;
        max-width:100% !important;

        padding:10px 11px !important;
        box-sizing:border-box !important;

        white-space:normal !important;
        overflow-wrap:break-word !important;
        word-wrap:break-word !important;
        word-break:normal !important;

        text-align:left !important;
        border-radius:8px !important;

        transform:translateY(4px) !important;
    }

    .live-feature-list li .resource-note-icon:hover::after,
    .live-feature-list li .resource-note-icon:focus::after,
    .public-feature-list li .resource-note-icon:hover::after,
    .public-feature-list li .resource-note-icon:focus::after{
        transform:translateY(0) !important;
    }

    /*
     * O texto usa apenas o espaço necessário. O indicador vem logo depois,
     * sem ser empurrado para a borda direita do card.
     */
    .live-feature-list li .feature-label,
    .public-feature-list li .feature-label{
        flex:0 1 auto !important;
        width:auto !important;
        max-width:calc(100% - 22px) !important;
        min-width:0 !important;
    }
}