/* =====================================================================
   NEW DATA HOST — Design System (100% próprio)
   Referência visual: mockups Lagom (design/client-*.png) + marca DATA.host
   Estrutura: tokens → base → shell (rail/topbar) → componentes → dark → responsivo
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
--------------------------------------------------------------------- */
:root {
    /* Marca DATA.host */
    --ndh-teal:   #12b39b;
    --ndh-blue:   #1062fe;
    --ndh-violet: #8a1fe0;
    --ndh-grad: linear-gradient(115deg, var(--ndh-teal) 0%, var(--ndh-blue) 52%, var(--ndh-violet) 100%);

    /* Primária (azul) */
    --p-50:#eef4ff; --p-100:#dbe7ff; --p-200:#bfd5ff; --p-300:#93b8ff;
    --p-400:#6090ff; --p-500:#3a6ffe; --p-600:#1062fe; --p-700:#0b4fd6;
    --p-800:#1041ac; --p-900:#143a87;

    /* Neutros */
    --n-0:#ffffff; --n-50:#f7f9fd; --n-100:#f1f4fa; --n-200:#e5e9f2;
    --n-300:#d2d9e6; --n-400:#9aa5ba; --n-500:#6b7690; --n-600:#4c576f;
    --n-700:#364156; --n-800:#222b3d; --n-900:#131a29;

    /* Semânticos */
    --success:#0e9f5c; --success-bg:#e7f8ef;
    --warning:#d97706; --warning-bg:#fef4e6;
    --danger:#dc2626;  --danger-bg:#fdecec;
    --info:var(--p-600); --info-bg:var(--p-50);

    /* Superfícies / texto (flipam no dark) */
    --bg:        var(--n-50);
    --surface:   var(--n-0);
    --surface-2: var(--n-100);
    --line:      var(--n-200);
    --text:      var(--n-900);
    --text-2:    var(--n-500);
    --text-3:    var(--n-400);

    /* Forma */
    --r-sm:8px; --r-md:12px; --r-lg:16px;
    --shadow-sm:0 1px 3px rgba(19,26,41,.06);
    --shadow-md:0 6px 22px rgba(19,26,41,.07);
    --shadow-lg:0 18px 44px rgba(16,98,254,.13);

    /* Tipografia */
    --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-head:"Plus Jakarta Sans", "Inter", sans-serif;

    /* Métricas do shell */
    --nav-w:96px;
    --topbar-h:64px;
}

/* ---------------------------------------------------------------------
   2. BASE
--------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body.ndh {
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--font-body); font-size:.925rem; line-height:1.55;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.ndh h1,.ndh h2,.ndh h3,.ndh h4,.ndh h5,.ndh .h1,.ndh .h2,.ndh .h3,.ndh .h4,
.ndh .card-title { font-family:var(--font-head); font-weight:700; letter-spacing:-.015em; color:var(--text); }
.ndh a { color:var(--p-600); text-decoration:none; }
.ndh a:hover { color:var(--p-700); }
.ndh ::selection { background:var(--p-200); color:var(--p-900); }
.ndh :focus-visible { outline:2px solid var(--p-300); outline-offset:1px; }
.ndh img { max-width:100%; }

/* ---------------------------------------------------------------------
   3. SHELL — RAIL (nav esquerda)
--------------------------------------------------------------------- */
.app-nav {
    position:fixed; inset:0 auto 0 0; width:var(--nav-w); z-index:1040;
    display:flex; flex-direction:column; align-items:center;
    padding:14px 8px; gap:6px; overflow-y:auto;
    background:var(--surface); border-right:1px solid var(--line);
}
.app-nav-brand { display:block; margin-bottom:14px; }
.app-nav-brand img {
    width:46px; height:46px; object-fit:contain; border-radius:14px;
    background:#fff; padding:4px; box-shadow:0 8px 18px rgba(16,98,254,.25);
}
.app-nav-menu { display:flex; flex-direction:column; gap:4px; width:100%; align-items:center; flex:1; }
.app-nav-item {
    display:flex; flex-direction:column; align-items:center; gap:5px;
    width:80px; padding:10px 2px; border-radius:var(--r-md);
    color:var(--text-2); font-size:.67rem; font-weight:600; text-align:center;
    transition:background .15s, color .15s;
}
.app-nav-item i { font-size:1.28rem; }
.app-nav-item:hover { background:var(--p-50); color:var(--p-600); }
.app-nav-item.active { background:var(--p-600); color:#fff; box-shadow:0 8px 18px rgba(16,98,254,.28); }
.app-nav-logout { color:var(--danger); margin-top:auto; }
.app-nav-logout:hover { background:var(--danger-bg); color:var(--danger); }

/* Empurra o conteúdo quando há rail (logado) */
body.ndh.is-logged .app-main { margin-left:var(--nav-w); }

/* ---------------------------------------------------------------------
   4. SHELL — TOPBAR
--------------------------------------------------------------------- */
.app-topbar {
    position:sticky; top:0; z-index:1030; height:var(--topbar-h);
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
.app-topbar-inner {
    max-width:1320px; margin:0 auto; height:100%;
    display:flex; align-items:center; gap:14px; padding:0 22px;
}
.app-topbar-brand img { height:32px; width:auto; }
.app-burger { display:none; border:0; background:transparent; color:var(--text-2); font-size:1.15rem; }
/* Navegação principal do topbar (home, loja/categorias, KB, contato…) */
.app-topnav .navbar-nav { flex-direction:row; gap:2px; list-style:none; margin:0; padding:0; align-items:center; }
.app-topnav .nav-item { position:relative; }
.app-topnav .nav-link {
    display:block; font-weight:600; font-size:.875rem; color:var(--text-2);
    padding:.45rem .8rem; border-radius:var(--r-sm); white-space:nowrap;
}
.app-topnav .nav-link:hover, .app-topnav .nav-item.active > .nav-link { color:var(--p-600); background:var(--p-50); }
.app-topnav .dropdown-menu {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--shadow-md); padding:6px; min-width:220px; margin-top:6px;
}
.app-topnav .dropdown-item {
    color:var(--text); font-weight:500; font-size:.875rem;
    padding:.5rem .8rem; border-radius:var(--r-sm); background:transparent;
}
.app-topnav .dropdown-item:hover { background:var(--p-50); color:var(--p-700); }

/* Busca: recolhida como ícone; expande ao clicar/focar */
.app-search {
    display:flex; align-items:center; gap:0; margin-left:auto; cursor:pointer;
    background:transparent; border:1px solid transparent; border-radius:999px;
    padding:7px 11px; max-width:38px; overflow:hidden;
    transition:max-width .25s ease, background .2s, padding .2s, border-color .2s;
}
.app-search i { color:var(--text-2); font-size:1rem; flex:none; }
.app-search input {
    border:0; background:transparent; outline:0; width:100%; min-width:0;
    color:var(--text); font-family:var(--font-body); font-size:.875rem;
    opacity:0; transition:opacity .2s .05s;
}
.app-search:focus-within, .app-search.is-open {
    max-width:380px; flex:1; gap:8px; padding:7px 16px; cursor:auto;
    background:var(--surface-2); border-color:var(--p-300);
    box-shadow:0 0 0 3px rgba(16,98,254,.12);
}
.app-search:focus-within input, .app-search.is-open input { opacity:1; }
.app-search:hover:not(:focus-within) i { color:var(--p-600); }

.app-topbar-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.app-search + .app-topbar-actions { margin-left:0; }
.app-action {
    position:relative; display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%; border:0; background:transparent;
    color:var(--text-2); font-size:1.02rem; cursor:pointer; transition:background .15s,color .15s;
}
.app-action:hover { background:var(--p-50); color:var(--p-600); }
.app-action-badge {
    position:absolute; top:2px; right:0; min-width:16px; height:16px; padding:0 4px;
    border-radius:999px; background:var(--p-600); color:#fff;
    font-size:.62rem; font-weight:700; line-height:16px; text-align:center;
}
.app-action-badge.is-alert { background:var(--danger); }
.app-user { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; border-radius:999px; color:var(--text); font-weight:600; }
.app-user:hover { background:var(--p-50); color:var(--p-700); }
.app-user-avatar {
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--ndh-grad); color:#fff; font-size:.8rem;
}
.app-user-name { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.app-login-btn { border-radius:999px !important; padding:.45rem 1.2rem !important; }
.app-action.is-admin { color:var(--warning); }

/* ---------------------------------------------------------------------
   5. CABEÇALHO DA PÁGINA + BREADCRUMB
--------------------------------------------------------------------- */
.main-header { padding:34px 0 10px; }
.main-header .container, .main-body .container { max-width:1320px; padding:0 22px; }
.main-title { font-size:1.9rem; font-weight:800; margin:0 0 4px; }
.ndh .breadcrumb { background:transparent; padding:0; margin:0; font-size:.8rem; }
.ndh .breadcrumb .breadcrumb-item, .ndh .breadcrumb a { color:var(--text-3); }
.ndh .breadcrumb .breadcrumb-item.active { color:var(--text-2); }

/* ---------------------------------------------------------------------
   6. GRID PRINCIPAL + SIDEBAR
--------------------------------------------------------------------- */
.main-body { padding:16px 0 56px; }
.main-grid { display:flex; gap:24px; align-items:flex-start; }
.main-sidebar { width:300px; flex:none; }
.main-content { flex:1; min-width:0; }

/* ---------------------------------------------------------------------
   7. CARDS / PAINÉIS
--------------------------------------------------------------------- */
.ndh .card {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm); margin-bottom:22px;
}
.ndh .card:hover { box-shadow:var(--shadow-md); }
.ndh .card-header {
    background:transparent; border-bottom:1px solid var(--line);
    padding:15px 20px; font-family:var(--font-head); font-weight:700;
}
.ndh .card-header .card-title { font-size:1rem; margin:0; }
.ndh .card-body { padding:20px; }
.ndh .card-footer { background:transparent; border-top:1px solid var(--line); padding:13px 20px; }

/* Card de perfil na sidebar (Client Details) — gradiente da marca */
.sidebar .card[menuItemName="Client Details"] { background:var(--ndh-grad); border:0; color:#fff; box-shadow:var(--shadow-lg); }
.sidebar .card[menuItemName="Client Details"] .card-header { border-bottom-color:rgba(255,255,255,.22); }
.sidebar .card[menuItemName="Client Details"] .card-title,
.sidebar .card[menuItemName="Client Details"] .card-body,
.sidebar .card[menuItemName="Client Details"] .card-body * { color:#fff !important; }
.sidebar .card[menuItemName="Client Details"] .card-footer { border-top-color:rgba(255,255,255,.22); }
.sidebar .card[menuItemName="Client Details"] .btn {
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); color:#fff; font-weight:700;
}
.sidebar .card[menuItemName="Client Details"] .btn:hover { background:#fff; color:var(--p-700); }

/* Sidebar: list groups */
.ndh .list-group-item {
    background:var(--surface); border-color:var(--line); color:var(--text);
    padding:11px 18px; font-weight:500; transition:background .12s;
}
.ndh .list-group-item i { color:var(--p-600); width:1.4em; }
.ndh .list-group-item:hover:not(.active) { background:var(--p-50); color:var(--p-700); }
.ndh .list-group-item.active { background:var(--p-600); border-color:var(--p-600); color:#fff; }
.ndh .list-group-item.active i { color:#fff; }
.ndh .list-group-item .badge { background:var(--p-100); color:var(--p-800); border-radius:999px; font-weight:700; }

/* ---------------------------------------------------------------------
   8. STAT CARDS (dashboard)
--------------------------------------------------------------------- */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card {
    position:relative; display:block; background:var(--surface);
    border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 22px 18px;
    min-height:140px; box-shadow:var(--shadow-sm);
    transition:transform .15s, box-shadow .15s, border-color .15s;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--p-200); }
.stat-icon { position:absolute; top:18px; right:20px; font-size:1.05rem; color:var(--n-300); }
.stat-num {
    display:block; margin-top:16px; font-family:var(--font-head);
    font-weight:800; font-size:2.9rem; line-height:1.02; color:var(--p-600);
}
.stat-label { display:block; margin-top:5px; color:var(--text-2); font-weight:600; font-size:.83rem; text-transform:uppercase; letter-spacing:.05em; }
.stat-card.is-due .stat-num { color:var(--danger); }
.stat-card.is-due:hover { border-color:#f5c2c2; }

/* Painéis da home */
.home-panels .row { margin:0 -11px; }
.home-panels [class*="col-"] { padding:0 11px; }

/* ---------------------------------------------------------------------
   9. BOTÕES
--------------------------------------------------------------------- */
.ndh .btn { border-radius:var(--r-sm); font-family:var(--font-head); font-weight:700; font-size:.875rem; padding:.5rem 1.05rem; }
.ndh .btn-primary { background:var(--p-600); border-color:var(--p-600); color:#fff; }
.ndh .btn-primary:hover,.ndh .btn-primary:focus { background:var(--p-700); border-color:var(--p-700); color:#fff; }
.ndh .btn-primary:active { background:var(--p-800) !important; border-color:var(--p-800) !important; }
.ndh .btn-default,.ndh .btn-secondary {
    background:var(--surface); border:1px solid var(--line); color:var(--text-2);
}
.ndh .btn-default:hover,.ndh .btn-secondary:hover { background:var(--surface-2); color:var(--text); border-color:var(--n-300); }
.ndh .btn-success { background:var(--success); border-color:var(--success); }
.ndh .btn-danger { background:var(--danger); border-color:var(--danger); }
.ndh .btn-soft { background:var(--p-50); border:0; color:var(--p-700); }
.ndh .btn-soft:hover { background:var(--p-100); color:var(--p-800); }
.ndh .btn-lg { padding:.7rem 1.3rem; font-size:.95rem; }
.ndh .btn-block { width:100%; }

/* ---------------------------------------------------------------------
   10. FORMULÁRIOS
--------------------------------------------------------------------- */
.ndh .form-control,.ndh .custom-select,.ndh select.form-control {
    background:var(--surface); border:1px solid var(--n-300); border-radius:var(--r-sm);
    color:var(--text); padding:.55rem .8rem; font-size:.9rem; height:auto;
}
.ndh .form-control:focus,.ndh .custom-select:focus {
    border-color:var(--p-400); box-shadow:0 0 0 3px rgba(16,98,254,.13); background:var(--surface);
}
.ndh .form-control::placeholder { color:var(--text-3); }
.ndh label,.ndh .form-control-label { font-weight:600; color:var(--text); font-size:.855rem; margin-bottom:.35rem; }
.ndh .input-group-text { background:var(--surface-2); border-color:var(--n-300); color:var(--text-3); }

/* ---------------------------------------------------------------------
   11. TABELAS
--------------------------------------------------------------------- */
.ndh .table { color:var(--text); margin:0; }
.ndh .table thead th {
    border-top:0; border-bottom:1px solid var(--line);
    font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-3); padding:12px 16px; white-space:nowrap;
}
.ndh .table td,.ndh .table th { border-color:var(--line); padding:13px 16px; vertical-align:middle; }
.ndh .table-hover tbody tr:hover { background:var(--p-50); }
.ndh .table-striped tbody tr:nth-of-type(odd) { background:var(--n-50); }
.ndh .card .table { border-radius:0 0 var(--r-lg) var(--r-lg); overflow:hidden; }
.ndh .dataTables_wrapper .dataTables_filter input,
.ndh .dataTables_wrapper .dataTables_length select { border:1px solid var(--n-300); border-radius:var(--r-sm); padding:.35rem .6rem; }

/* Paginação */
.ndh .page-item .page-link { border-color:var(--line); color:var(--text-2); }
.ndh .page-item.active .page-link { background:var(--p-600); border-color:var(--p-600); color:#fff; }

/* ---------------------------------------------------------------------
   12. STATUS / BADGES / ALERTAS
--------------------------------------------------------------------- */
.ndh .label,.ndh .badge { border-radius:999px; font-weight:700; letter-spacing:.02em; padding:.32em .8em; }
/* WHMCS embrulha o texto do status em .textred/.textgreen/etc — a cor vem do pill */
.ndh .label .textred,.ndh .label .textgreen,.ndh .label .textorange,
.ndh .label .textblack,.ndh .label .textgrey,.ndh .label .textpurple,
.ndh .label .textblue { color:inherit !important; }
/* Positivos */
.ndh .status-active,.ndh .status-paid,.ndh .status-completed,.ndh .status-accepted,
.ndh .label-success,.ndh .badge-success { background:var(--success-bg) !important; color:var(--success) !important; }
/* Atenção */
.ndh .status-pending,.ndh .status-pendingtransfer,.ndh .status-collections,.ndh .status-redemption,
.ndh .status-payment-pending,.ndh .status-in-progress,.ndh .status-grace,
.ndh .label-warning,.ndh .badge-warning { background:var(--warning-bg) !important; color:var(--warning) !important; }
/* Negativos */
.ndh .status-unpaid,.ndh .status-overdue,.ndh .status-suspended,.ndh .status-terminated,
.ndh .status-expired,.ndh .status-fraud,.ndh .status-dead,
.ndh .label-danger,.ndh .badge-danger { background:var(--danger-bg) !important; color:var(--danger) !important; }
/* Informativos (tickets abertos/respondidos) */
.ndh .status-open,.ndh .status-answered,.ndh .status-customer-reply,
.ndh .label-info,.ndh .badge-info { background:var(--info-bg) !important; color:var(--p-700) !important; }
/* Neutros / encerrados */
.ndh .status-cancelled,.ndh .status-refunded,.ndh .status-closed,.ndh .status-draft,
.ndh .label-default,.ndh .badge-secondary { background:var(--n-100) !important; color:var(--text-2) !important; }

.ndh .alert { border-radius:var(--r-md); border:1px solid transparent; padding:.85rem 1.1rem; }
.ndh .alert-success { background:var(--success-bg); color:#0b7a46; border-color:#c4ecd6; }
.ndh .alert-info { background:var(--info-bg); color:var(--p-800); border-color:var(--p-200); }
.ndh .alert-warning { background:var(--warning-bg); color:#9a5b08; border-color:#f7dcb3; }
.ndh .alert-danger { background:var(--danger-bg); color:#a51d1d; border-color:#f5c6c6; }

/* ---------------------------------------------------------------------
   13. FOOTER
--------------------------------------------------------------------- */
.app-footer { border-top:1px solid var(--line); background:var(--surface); margin-top:auto; }
.app-footer .container { max-width:1320px; padding:0 22px; }
.app-footer-inner { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:18px 0; }
.app-footer-copy { margin:0; color:var(--text-3); font-size:.8rem; }
.app-footer-links { display:flex; gap:16px; list-style:none; margin:0 0 0 auto; padding:0; }
.app-footer-links a,.app-footer-lang { color:var(--text-2); font-size:.8rem; font-weight:600; background:transparent; border:0; }
.app-footer-links a:hover { color:var(--p-600); }
.app-footer-social { margin:0; }

/* ---------------------------------------------------------------------
   14. AUTH (login/registro) — split screen
--------------------------------------------------------------------- */
body.ndh.is-auth { background:var(--surface); }
body.ndh.is-auth .app-main.is-bare { margin:0; }
body.ndh.is-auth .main-body { padding:0; }
body.ndh.is-auth .app-footer { display:none; }
.auth-shell,.auth-shell .main-grid,.auth-shell .main-content { display:block; padding:0; margin:0; max-width:none; }

.auth { display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh; }
.auth-side {
    position:relative; display:flex; flex-direction:column; padding:44px 52px; color:#fff; overflow:hidden;
    background:
        radial-gradient(720px 420px at 16% 8%, rgba(255,255,255,.14), transparent 60%),
        var(--ndh-grad);
}
.auth-side-logo img { height:44px; width:auto; background:#fff; padding:6px 10px; border-radius:10px; }
.auth-side-body { margin:auto 0; max-width:460px; }
.auth-side-body h2 { color:#fff; font-size:clamp(1.9rem,3vw,2.6rem); font-weight:800; margin:0 0 12px; }
.auth-side-body p { color:#eaf1ff; font-size:1.08rem; margin:0 0 26px; }
.auth-side-list { list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.auth-side-list li { display:flex; gap:11px; align-items:center; font-weight:600; }
.auth-side-list i {
    width:26px; height:26px; flex:none; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.18); border-radius:8px; font-size:.75rem;
}
.auth-side-foot { color:rgba(255,255,255,.7); font-size:.82rem; }

.auth-panel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:48px 24px; background:var(--bg); }
.auth-card { width:100%; max-width:400px; }
.auth-title { font-size:2rem; font-weight:800; margin:0 0 4px; }
.auth-sub { color:var(--text-2); margin:0 0 26px; }
.auth-forgot { font-size:.8rem; color:var(--text-3); }
.auth-pw { position:relative; }
.auth-pw .btn-reveal-pw {
    position:absolute; top:0; right:0; bottom:0; border:0; background:transparent;
    color:var(--text-3); padding:0 13px;
}
.auth-remember { display:flex; align-items:center; gap:8px; margin:16px 0 20px; color:var(--text-2); font-weight:600; }
.auth-remember input { margin:0; position:static; }
.auth-alt { margin:22px 0 0; text-align:center; color:var(--text-2); }
.auth-alt a { font-weight:700; }

/* ---------------------------------------------------------------------
   15. HOMEPAGE — hero full-bleed + seções
--------------------------------------------------------------------- */
body.ndh.page-homepage .main-header { display:none; }
body.ndh.page-homepage .main-body { padding:0; }
body.ndh.page-homepage .main-body > .container { max-width:none; padding:0; }
body.ndh.page-homepage .main-grid { display:block; }
.home-wrap { max-width:1180px; margin:0 auto; padding:0 22px; }

/* Hero */
.home-hero {
    position:relative; color:#fff; padding:88px 0 120px; overflow:hidden;
    background:
        radial-gradient(760px 420px at 85% 0%, rgba(138,31,224,.5), transparent 60%),
        radial-gradient(700px 480px at 0% 30%, rgba(18,179,155,.35), transparent 55%),
        linear-gradient(135deg, #0c1a3a 0%, #12327c 55%, #1062fe 130%);
}
.home-hero-content { max-width:720px; }
.home-eyebrow {
    display:inline-block; padding:.35rem .95rem; border-radius:999px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
    font-size:.8rem; font-weight:600; letter-spacing:.03em; margin-bottom:18px;
}
.home-hero h1 { color:#fff; font-size:clamp(2rem,4.4vw,3.3rem); font-weight:800; line-height:1.12; margin:0 0 16px; }
.grad-text {
    background:linear-gradient(90deg,#46edd5,#93b8ff 60%,#c99cff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.home-hero p { color:#d9e4ff; font-size:1.12rem; max-width:560px; margin:0 0 26px; }
.home-hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.btn-hero-primary {
    background:var(--ndh-grad) !important; border:0 !important; color:#fff !important;
    padding:.8rem 1.6rem !important; border-radius:999px !important; font-size:.98rem;
    box-shadow:0 14px 30px rgba(16,98,254,.4);
}
.btn-hero-primary:hover { transform:translateY(-2px); box-shadow:0 18px 38px rgba(16,98,254,.5); }
.btn-hero-ghost {
    background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.35) !important;
    color:#fff !important; padding:.8rem 1.6rem !important; border-radius:999px !important;
}
.btn-hero-ghost:hover { background:rgba(255,255,255,.2) !important; }
.home-domain { max-width:560px; margin-bottom:26px; }
.home-domain-box {
    display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px;
    padding:7px 8px 7px 20px; box-shadow:0 18px 44px rgba(4,10,30,.35);
}
.home-domain-box i { color:var(--n-400); }
.home-domain-box input { flex:1; border:0; outline:0; font-size:.95rem; color:var(--n-900); background:transparent; }
.home-domain-box .btn { border-radius:999px !important; padding:.55rem 1.4rem !important; }
.home-hero-badges { display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.home-hero-badges li { display:flex; align-items:center; gap:8px; font-weight:600; font-size:.86rem; color:#cfe0ff; }
.home-hero-badges i { color:#46edd5; font-size:.75rem; }
.home-hero-curve { position:absolute; left:0; right:0; bottom:-1px; width:100%; height:90px; display:block; }
.home-hero-curve path { fill:var(--bg); }

/* Seções */
.home-sec { padding:72px 0; }
.home-sec-alt { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.home-sec-title { text-align:center; font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:800; margin:0 0 10px; }
.home-sec-sub { text-align:center; color:var(--text-2); max-width:620px; margin:0 auto 40px; }
.home-sec-title + .home-plans, .home-sec-title + .home-feats, .home-sec-title + .home-help { margin-top:40px; }

/* Grid de planos (grupos de produtos) */
.home-plans { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:18px; }
.home-plan {
    display:flex; flex-direction:column; gap:8px; background:var(--surface);
    border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
    color:var(--text); box-shadow:var(--shadow-sm);
    transition:transform .15s, box-shadow .15s, border-color .15s;
}
.home-plan:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--p-200); color:var(--text); }
.home-plan-ico {
    width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:var(--p-50); color:var(--p-600); font-size:1.3rem; margin-bottom:6px;
}
.home-plan h3 { font-size:1.05rem; margin:0; }
.home-plan p { color:var(--text-2); font-size:.86rem; margin:0; flex:1; }
.home-plan-link { color:var(--p-600); font-weight:700; font-size:.86rem; margin-top:8px; }
.home-plan:hover .home-plan-link i { transform:translateX(3px); }
.home-plan-link i { transition:transform .15s; font-size:.75rem; }

/* Features */
.home-feats { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:26px; }
.home-feat { text-align:left; }
.home-feat i {
    width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    background:var(--ndh-grad); color:#fff; font-size:1.35rem; margin-bottom:14px;
}
.home-feat h3 { font-size:1.02rem; margin:0 0 6px; }
.home-feat p { color:var(--text-2); font-size:.88rem; margin:0; }

/* Ajuda / atalhos */
.home-help { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.home-help a {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    width:170px; padding:22px 12px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); color:var(--text); font-weight:600; font-size:.86rem; text-align:center;
    transition:transform .15s, box-shadow .15s, border-color .15s;
}
.home-help a:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--p-200); color:var(--p-700); }
.home-help i { font-size:1.5rem; color:var(--p-600); }

/* CTA final */
.home-cta {
    text-align:center; color:#fff; padding:76px 0;
    background:
        radial-gradient(600px 300px at 80% 10%, rgba(138,31,224,.45), transparent 60%),
        linear-gradient(135deg, #0c1a3a, #12327c 60%, #1062fe 140%);
}
.home-cta h2 { color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; margin:0 0 8px; }
.home-cta p { color:#d9e4ff; margin:0 0 24px; }

/* Branding "Powered by WHMCompleteSolution" — removido (tema white-label) */
.ndh .main-content > p:has(> a[href*="whmcs.com"]) { display:none !important; }

/* Dark: hero/cta já são escuros; ajusta a curva e superfícies */
html[data-theme="dark"] .home-hero-curve path { fill:var(--bg); }

/* ---------------------------------------------------------------------
   16. DARK MODE — html[data-theme="dark"]
--------------------------------------------------------------------- */
html[data-theme="dark"] body.ndh {
    --bg:#0b1120; --surface:#141d31; --surface-2:#1b2540; --line:#263252;
    --text:#e7ecf6; --text-2:#9aa7c2; --text-3:#67748f;
    --p-50:#182643; --p-100:#1d2f55;
    --success-bg:rgba(14,159,92,.14); --warning-bg:rgba(217,119,6,.14);
    --danger-bg:rgba(220,38,38,.14); --info-bg:rgba(16,98,254,.14);
    --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 6px 22px rgba(0,0,0,.35);
}
html[data-theme="dark"] .ndh .alert-success { color:#5ad698; border-color:rgba(14,159,92,.3); }
html[data-theme="dark"] .ndh .alert-info { color:#7fb0ff; border-color:rgba(16,98,254,.3); }
html[data-theme="dark"] .ndh .alert-warning { color:#f0b35c; border-color:rgba(217,119,6,.3); }
html[data-theme="dark"] .ndh .alert-danger { color:#f08a8a; border-color:rgba(220,38,38,.3); }
html[data-theme="dark"] .ndh .status-active,html[data-theme="dark"] .ndh .label-success { color:#5ad698 !important; }
html[data-theme="dark"] .ndh .table-striped tbody tr:nth-of-type(odd) { background:rgba(255,255,255,.02); }
html[data-theme="dark"] .stat-icon { color:var(--n-600); }
html[data-theme="dark"] .stat-num { color:var(--p-400); }
html[data-theme="dark"] .app-nav-item.active { background:var(--p-600); }
html[data-theme="dark"] .app-user-name { color:var(--text); }
html[data-theme="dark"] .auth-panel { background:var(--bg); }
html[data-theme="dark"] .ndh .modal-content { background:var(--surface); color:var(--text); }
html[data-theme="dark"] .ndh .close { color:var(--text); }

/* ---------------------------------------------------------------------
   16a. DETALHES DO PRODUTO (clientareaproductdetails)
--------------------------------------------------------------------- */
.ndh .product-details .product-status {
    border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
    background:var(--surface-2);
}
.ndh .product-details .product-icon { padding:26px 16px 18px; }
.ndh .product-details .product-icon .fa-stack { margin-bottom:10px; }
.ndh .product-details .product-icon .fa-circle { color:var(--p-600); }
.ndh .product-details .product-status-active .product-icon .fa-circle { color:var(--p-600); }
.ndh .product-details .product-icon h3 { font-size:1.15rem; margin:4px 0 0; }
.ndh .product-details .product-icon h4 { font-size:.85rem; color:var(--text-2); font-weight:600; margin:2px 0 0; }
.ndh .product-details .product-status-text {
    text-align:center; padding:9px; font-weight:700; letter-spacing:.06em; font-size:.8rem;
    text-transform:uppercase; background:var(--n-100); color:var(--text-2);
}
.ndh .product-details .product-status-active .product-status-text { background:var(--success-bg); color:var(--success); }
.ndh .product-details .product-status-suspended .product-status-text,
.ndh .product-details .product-status-terminated .product-status-text { background:var(--danger-bg); color:var(--danger); }
.ndh .product-details .product-status-pending .product-status-text { background:var(--warning-bg); color:var(--warning); }
/* lista de datas/valores à direita: hierarquia mais discreta */
.ndh .product-details .row .text-center h1,.ndh .product-details .row .text-center h2,
.ndh .product-details h4:not(.product-icon h4) { font-size:.98rem; }
.ndh .product-details .col-md-6 > .row { margin-bottom:2px; }
/* botão de cancelamento: menos gritante (outline) */
.ndh .product-details .btn-danger.btn-block {
    background:transparent; border:1px solid var(--danger); color:var(--danger);
}
.ndh .product-details .btn-danger.btn-block:hover { background:var(--danger); color:#fff; }

/* Tabs (produto, perfil etc.) */
.ndh .nav-tabs { border-bottom:1px solid var(--line); gap:4px; }
.ndh .nav-tabs .nav-link {
    border:0; border-bottom:2px solid transparent; border-radius:0;
    color:var(--text-2); font-weight:600; padding:.6rem 1rem; background:transparent;
}
.ndh .nav-tabs .nav-link:hover { color:var(--p-600); }
.ndh .nav-tabs .nav-link.active { color:var(--p-600); border-bottom-color:var(--p-600); background:transparent; }

/* ---------------------------------------------------------------------
   16b. BANNERS DO SISTEMA (verificação de e-mail etc.) — tokens p/ dark
--------------------------------------------------------------------- */
.ndh .verification-banner {
    background:var(--warning-bg); border-bottom:1px solid var(--line);
    color:var(--text); padding:10px 0;
}
.ndh .verification-banner .btn { white-space:nowrap; }

/* ---------------------------------------------------------------------
   16c. ORDER FORM (standard_cart) — superfícies por token (light+dark)
   (estilo definitivo do carrinho virá no order form próprio — Fase 3)
--------------------------------------------------------------------- */
/* o stock usa "body #order-standard_cart ..." (ID) — precisamos vencer a especificidade */
body.ndh #order-standard_cart .products .product {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm); padding:24px; color:var(--text);
    transition:transform .15s, box-shadow .15s, border-color .15s;
}
body.ndh #order-standard_cart .products .product:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--p-200); }
body.ndh #order-standard_cart .products .product header,
body.ndh #order-standard_cart .products .product header span,
body.ndh #order-standard_cart .product-desc,
body.ndh #order-standard_cart .product-desc * { color:var(--text); background:transparent; }
body.ndh #order-standard_cart .product-desc li,
body.ndh #order-standard_cart .product-desc p { color:var(--text-2); }
body.ndh #order-standard_cart .product-pricing,
body.ndh #order-standard_cart .product-pricing .price { color:var(--p-600); font-family:var(--font-head); font-weight:800; }
body.ndh #order-standard_cart .btn-order-now {
    background:var(--p-600) !important; border-color:var(--p-600) !important; color:#fff !important;
    border-radius:var(--r-sm) !important; font-weight:700;
}
body.ndh #order-standard_cart .btn-order-now:hover { background:var(--p-700) !important; border-color:var(--p-700) !important; }

/* Layout do carrinho: sidebar fixa + corpo fluido (o skin stock foi descartado) */
body.ndh #order-standard_cart > .row { display:flex; gap:24px; align-items:flex-start; margin:0; }
body.ndh #order-standard_cart .cart-sidebar { width:290px; flex:none; float:none; padding:0; }
body.ndh #order-standard_cart .cart-body { flex:1; min-width:0; float:none; padding:0; }
@media (max-width:1100px){
    body.ndh #order-standard_cart > .row { flex-direction:column; }
    body.ndh #order-standard_cart .cart-sidebar { width:100%; }
}
/* Painéis internos do carrinho herdam o card do design system */
body.ndh #order-standard_cart .cart-body .panel,
body.ndh #order-standard_cart .cart-body .sub-heading ~ div,
body.ndh #order-standard_cart .view-cart-items-header,
body.ndh #order-standard_cart .view-cart-items {
    background:var(--surface); border-color:var(--line); color:var(--text);
}
body.ndh #order-standard_cart .view-cart-items { border-radius:var(--r-lg); }
/* Resumo do pedido (ref. client-order.png: card destacado à direita) */
body.ndh #order-standard_cart .order-summary {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-md); padding:20px; color:var(--text);
}
body.ndh #order-standard_cart .order-summary h2 { font-size:1.15rem; }
.ndh .view-cart-tables .panel,.ndh .order-summary,.ndh .summary-container,
.ndh .sidebar-checkout,.ndh .checkout-security-msg {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); color:var(--text);
}

/* ---------------------------------------------------------------------
   18. FOOTER MULTI-COLUNAS (ref. hostgator.com.br)
--------------------------------------------------------------------- */
.app-footer-grid {
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;
    padding:44px 0 30px; border-bottom:1px solid var(--line);
}
.app-footer-logo { height:34px; width:auto; margin-bottom:12px; }
.app-footer-brand p { color:var(--text-2); font-size:.86rem; max-width:300px; }
.app-footer-col h4 {
    font-size:.8rem; text-transform:uppercase; letter-spacing:.07em;
    color:var(--text-3); margin:0 0 14px; font-weight:700;
}
.app-footer-col ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.app-footer-col a { color:var(--text-2); font-size:.875rem; font-weight:500; }
.app-footer-col a:hover { color:var(--p-600); }
.app-footer-pay { display:flex; gap:14px; list-style:none; margin:0 0 0 auto; padding:0; }
.app-footer-pay li {
    display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700;
    color:var(--text-2); background:var(--surface-2); border:1px solid var(--line);
    border-radius:8px; padding:5px 11px;
}
.app-footer-pay + .app-footer-lang { margin-left:14px; }
@media (max-width:900px){ .app-footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .app-footer-grid { grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------
   19. TABELAS / DATATABLES — redesign
--------------------------------------------------------------------- */
.ndh .table-container,.ndh .dataTables_wrapper { color:var(--text); }
/* barra superior: mostrando X / busca */
.ndh .dataTables_wrapper .dataTables_info { color:var(--text-3); font-size:.82rem; padding-top:14px; }
.ndh .dataTables_wrapper .dataTables_filter { text-align:right; margin-bottom:12px; }
.ndh .dataTables_wrapper .dataTables_filter label { color:var(--text-3); font-weight:600; }
.ndh .dataTables_wrapper .dataTables_filter input {
    background:var(--surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='%239aa5ba' viewBox='0 0 512 512'%3E%3Cpath d='M505 442.7L405.3 343c28.4-34.9 45.5-79 45.5-127C450.8 96.9 353.9 0 234.4 0S18 96.9 18 216.4s96.9 216.4 216.4 216.4c48 0 92.1-17.1 127-45.5L461.3 487c6.2 6.2 16.4 6.2 22.6 0l21.1-21.1c6.3-6.3 6.3-16.5 0-23.2zM234.4 385.7c-93.3 0-169.3-76-169.3-169.3s76-169.3 169.3-169.3 169.3 76 169.3 169.3-76 169.3-169.3 169.3z'/%3E%3C/svg%3E") no-repeat 12px center;
    border:1px solid var(--n-300); border-radius:999px; padding:.45rem .9rem .45rem 34px;
    font-size:.875rem; color:var(--text); min-width:220px;
}
.ndh .dataTables_wrapper .dataTables_filter input:focus { border-color:var(--p-400); box-shadow:0 0 0 3px rgba(16,98,254,.12); outline:0; }
.ndh .dataTables_wrapper .dataTables_length { color:var(--text-3); font-size:.82rem; }
.ndh .dataTables_wrapper .dataTables_length select {
    border:1px solid var(--n-300); border-radius:var(--r-sm); padding:.3rem .5rem;
    background:var(--surface); color:var(--text); margin:0 6px;
}
/* a tabela em si vira um card */
.ndh .table-container { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.ndh .table-container .table { margin:0; }
.ndh .table thead th { background:var(--surface-2); border-bottom:1px solid var(--line); }
.ndh .table tbody tr { transition:background .12s; }
.ndh .table tbody td { font-size:.895rem; }
/* ordenação: setinhas discretas */
.ndh table.dataTable thead .sorting:before,.ndh table.dataTable thead .sorting:after,
.ndh table.dataTable thead .sorting_asc:before,.ndh table.dataTable thead .sorting_asc:after,
.ndh table.dataTable thead .sorting_desc:before,.ndh table.dataTable thead .sorting_desc:after { opacity:.25; }
.ndh table.dataTable thead .sorting_asc:before,.ndh table.dataTable thead .sorting_desc:after { opacity:.9; color:var(--p-600); }
/* paginação */
.ndh .dataTables_wrapper .dataTables_paginate { padding-top:12px; }
.ndh .dataTables_wrapper .dataTables_paginate .paginate_button,
.ndh .dataTables_wrapper .dataTables_paginate .page-link {
    border:1px solid var(--line) !important; border-radius:8px !important; margin:0 2px;
    color:var(--text-2) !important; background:var(--surface) !important; padding:.35rem .7rem; font-size:.85rem;
}
.ndh .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.ndh .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background:var(--p-600) !important; border-color:var(--p-600) !important; color:#fff !important;
}
.ndh .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) { color:var(--p-600) !important; background:var(--p-50) !important; }
/* linhas clicáveis do WHMCS */
.ndh tr[onclick] { cursor:pointer; }
/* rolagem horizontal digna em telas menores */
.ndh .table-container { overflow-x:auto; }

/* ---------------------------------------------------------------------
   20. HOME — seções extras (stats, migração, FAQ)
--------------------------------------------------------------------- */
.home-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:-58px; position:relative; z-index:2; }
.home-stat {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-md); padding:22px; text-align:center;
}
.home-stat b { display:block; font-family:var(--font-head); font-weight:800; font-size:1.7rem; color:var(--p-600); }
.home-stat span { color:var(--text-2); font-size:.83rem; font-weight:600; }
@media (max-width:900px){ .home-stats { grid-template-columns:1fr 1fr; margin-top:20px; } }

.home-mig { display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center; }
.home-mig-art {
    background:var(--ndh-grad); border-radius:24px; min-height:260px;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:4rem;
    box-shadow:var(--shadow-lg);
}
.home-mig h2 { font-size:clamp(1.4rem,2.4vw,2rem); font-weight:800; margin:0 0 12px; }
.home-mig p { color:var(--text-2); margin-bottom:18px; }
.home-mig ul { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; }
.home-mig li { display:flex; gap:10px; align-items:center; font-weight:600; }
.home-mig li i { color:var(--ndh-teal); }
@media (max-width:900px){ .home-mig { grid-template-columns:1fr; } .home-mig-art { min-height:170px; } }

.home-faq { max-width:760px; margin:0 auto; display:grid; gap:12px; }
.home-faq details {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
    padding:0; overflow:hidden;
}
.home-faq summary {
    cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
    padding:16px 20px; font-weight:700; font-family:var(--font-head);
}
.home-faq summary::-webkit-details-marker { display:none; }
.home-faq summary::after { content:"+"; font-size:1.3rem; color:var(--p-600); transition:transform .2s; }
.home-faq details[open] summary::after { transform:rotate(45deg); }
.home-faq details > p { padding:0 20px 18px; margin:0; color:var(--text-2); }
.home-faq details[open] { border-color:var(--p-200); box-shadow:var(--shadow-sm); }

/* ---------------------------------------------------------------------
   21. RAIL — submenu flyout (expande ao clicar no item primário)
--------------------------------------------------------------------- */
.app-nav-group { position:relative; width:100%; display:flex; flex-direction:column; align-items:center; }
.app-nav-sub {
    display:none; position:fixed; left:var(--nav-w); width:230px; z-index:1060;
    background:var(--surface); border:1px solid var(--line); border-radius:0 var(--r-lg) var(--r-lg) 0;
    box-shadow:var(--shadow-lg); padding:10px; margin-left:6px;
}
.app-nav-group.open .app-nav-sub { display:block; }
.app-nav-sub-title {
    font-family:var(--font-head); font-weight:800; font-size:.82rem; text-transform:uppercase;
    letter-spacing:.06em; color:var(--text-3); padding:6px 10px 10px;
}
.app-nav-sub a {
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm);
    color:var(--text); font-weight:500; font-size:.875rem;
}
.app-nav-sub a i { color:var(--p-600); width:1.2em; font-size:.9rem; }
.app-nav-sub a:hover { background:var(--p-50); color:var(--p-700); }
.app-nav-group.open > .app-nav-item { background:var(--p-50); color:var(--p-600); }
.app-nav-group.open > .app-nav-item.active { background:var(--p-600); color:#fff; }
/* seta indicadora de submenu */
.app-nav-group > .app-nav-item::after {
    content:""; position:absolute; right:6px; top:12px; width:5px; height:5px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(-45deg); opacity:.45;
}
.app-nav-group > .app-nav-item { position:relative; }
@media (max-width:900px){
    .app-nav-sub { position:static; width:100%; border-radius:var(--r-md); margin:2px 0 6px; box-shadow:none; }
}

/* ---------------------------------------------------------------------
   17. RESPONSIVO
--------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .main-grid { flex-direction:column; }
    .main-sidebar { width:100%; }
    .stat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px) {
    body.ndh.is-logged .app-main { margin-left:0; }
    .app-nav { transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-lg); }
    body.nav-open .app-nav { transform:translateX(0); }
    .app-burger { display:block; }
    .auth { grid-template-columns:1fr; }
    .auth-side { min-height:230px; padding:28px; }
    .auth-side-list { display:none; }
    .auth-side-body h2 { font-size:1.5rem; }
}
@media (max-width: 600px) {
    .stat-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .stat-card { min-height:112px; padding:16px; }
    .stat-num { font-size:2.2rem; }
    .main-title { font-size:1.45rem; }
    .app-user-name { display:none; }
}











/* =====================================================================
   22. QA ROUND (feedback 02/07) — paleta, dark completo, botões, loja
   ===================================================================== */

/* --- 10. Paleta: azul primário suavizado (menos saturado, mais premium) --- */
:root {
    --p-400:#5b8def; --p-500:#3d78ec; --p-600:#2b66e3; --p-700:#2153c4;
    --p-800:#1c449e; --ndh-blue:#2b66e3;
    --ndh-grad: linear-gradient(115deg, #17b8a0 0%, #2b66e3 52%, #7d3fe0 100%);
}

/* --- 4. Logout no topbar --- */
.app-action.is-logout { color:var(--danger); }
.app-action.is-logout:hover { background:var(--danger-bg); color:var(--danger); }

/* --- 6. Botões dentro de tabelas/painéis: cor certa, inline, menores --- */
.ndh a.btn-danger,.ndh a.btn-success,.ndh a.btn-primary,.ndh a.btn-info,.ndh a.btn-warning,
.ndh .btn-danger,.ndh .btn-success { color:#fff !important; }
.ndh .btn-danger { background:var(--danger); border-color:var(--danger); }
.ndh .btn-danger:hover { background:#b91c1c; border-color:#b91c1c; color:#fff !important; }
.ndh td .btn, .ndh .table .btn {
    padding:.32rem .7rem; font-size:.78rem; margin:2px 4px 2px 0;
    display:inline-block; width:auto;
}
.ndh td .btn-block { width:auto; display:inline-block; }

/* --- 12. Loja: esconde a sidebar Categorias/Ações/Moeda (nav do topo já cobre) --- */
body.ndh.is-cart #order-standard_cart .cart-sidebar { display:none; }
body.ndh.is-cart #order-standard_cart .cart-body { width:100%; }

/* --- 2/3/5/7/8. TEMA ESCURO: varredura de sobras do bootstrap/stock --- */
html[data-theme="dark"] .ndh .bg-white,
html[data-theme="dark"] .ndh .bg-light,
html[data-theme="dark"] .ndh .card.bg-default,
html[data-theme="dark"] .ndh .well,
html[data-theme="dark"] .ndh .jumbotron { background:var(--surface) !important; color:var(--text) !important; }
/* abas (productdetails etc.) */
html[data-theme="dark"] .ndh .nav-tabs .nav-link { color:var(--text-2); background:transparent; }
html[data-theme="dark"] .ndh .nav-tabs .nav-link.active,
html[data-theme="dark"] .ndh .nav-tabs .nav-item.show .nav-link {
    color:var(--p-400); background:transparent; border-color:transparent transparent var(--p-400);
}
html[data-theme="dark"] .ndh .tab-content { background:transparent; color:var(--text); }
html[data-theme="dark"] .ndh .tab-pane .card { background:var(--surface); }
/* tabelas / DataTables */
html[data-theme="dark"] .ndh .table { color:var(--text); background:transparent; }
html[data-theme="dark"] .ndh .table thead th { background:var(--surface-2); color:var(--text-2); border-color:var(--line); }
html[data-theme="dark"] .ndh .table td,html[data-theme="dark"] .ndh .table th { border-color:var(--line); }
html[data-theme="dark"] .ndh .table-striped tbody tr:nth-of-type(odd) { background:rgba(255,255,255,.02); }
html[data-theme="dark"] .ndh .table-hover tbody tr:hover { background:rgba(61,120,236,.1); }
html[data-theme="dark"] .ndh .table-container { background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .ndh .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .ndh .dataTables_wrapper .dataTables_length select {
    background-color:var(--surface); border-color:var(--line); color:var(--text);
}
html[data-theme="dark"] .ndh .dataTables_wrapper .dataTables_paginate .paginate_button,
html[data-theme="dark"] .ndh .dataTables_wrapper .dataTables_paginate .page-link {
    background:var(--surface) !important; border-color:var(--line) !important; color:var(--text-2) !important;
}
/* formulários / selects / inputs sobrando claros */
html[data-theme="dark"] .ndh .form-control,html[data-theme="dark"] .ndh .custom-select,
html[data-theme="dark"] .ndh select,html[data-theme="dark"] .ndh input:not([type=checkbox]):not([type=radio]),
html[data-theme="dark"] .ndh textarea {
    background-color:var(--surface); border-color:var(--line); color:var(--text);
}
html[data-theme="dark"] .ndh .input-group-text { background:var(--surface-2); border-color:var(--line); color:var(--text-3); }
/* painéis diversos, list groups, dropdowns, modais, popovers */
html[data-theme="dark"] .ndh .list-group-item { background:var(--surface); border-color:var(--line); color:var(--text); }
html[data-theme="dark"] .ndh .dropdown-menu { background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .ndh .dropdown-item { color:var(--text); }
html[data-theme="dark"] .ndh .dropdown-item:hover { background:var(--surface-2); color:var(--p-400); }
html[data-theme="dark"] .ndh .modal-content { background:var(--surface); color:var(--text); }
html[data-theme="dark"] .ndh .popover { background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .ndh .popover-body { color:var(--text); }
html[data-theme="dark"] .ndh .btn-default,html[data-theme="dark"] .ndh .btn-secondary,
html[data-theme="dark"] .ndh .btn-light {
    background:var(--surface-2); border-color:var(--line); color:var(--text);
}
html[data-theme="dark"] .ndh .text-dark { color:var(--text) !important; }
html[data-theme="dark"] .ndh .border,html[data-theme="dark"] .ndh [class*="border-"] { border-color:var(--line) !important; }
html[data-theme="dark"] .ndh .close { color:var(--text); text-shadow:none; }
/* announcements / kb / tickets: blocos claros do stock */
html[data-theme="dark"] .ndh .announcement-single,
html[data-theme="dark"] .ndh .kb-article,
html[data-theme="dark"] .ndh .ticket-reply,
html[data-theme="dark"] .ndh .message { background:var(--surface); border-color:var(--line); color:var(--text); }

/* =====================================================================
   23. LOADER DA MARCA (transições de página)
   ===================================================================== */
#ndh-loader {
    position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s;
}
#ndh-loader.on { opacity:1; visibility:visible; }
.ndh-loader-box { position:relative; width:84px; height:84px; display:flex; align-items:center; justify-content:center; }
.ndh-loader-box img { width:46px; height:46px; object-fit:contain; border-radius:12px; background:#fff; padding:4px; animation:ndhPulse 1.4s ease-in-out infinite; }
.ndh-loader-ring {
    position:absolute; inset:0; border-radius:50%;
    border:3px solid var(--p-100); border-top-color:var(--p-600);
    animation:ndhSpin .9s linear infinite;
}
@keyframes ndhSpin { to { transform:rotate(360deg); } }
@keyframes ndhPulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(.92);} }
html[data-theme="dark"] .ndh-loader-ring { border-color:var(--surface-2); border-top-color:var(--p-400); }

/* =====================================================================
   24. POLISH — loja (vitrine), announcements, tickets
   ===================================================================== */
/* Loja: card do produto com header maior e preço em destaque */
body.ndh #order-standard_cart .products .product header { font-family:var(--font-head); font-weight:800; font-size:1.08rem; }
body.ndh #order-standard_cart .products .product .product-pricing { font-size:1.5rem; margin:10px 0 4px; }
body.ndh #order-standard_cart .products .product footer { margin-top:14px; }
body.ndh #order-standard_cart .btn-order-now { width:100%; padding:.6rem 1rem; }

/* Announcements: cards com data em pill e hover */
.ndh .announcements .announcement { transition:transform .15s, box-shadow .15s; }
.ndh .announcements .announcement:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ndh .announcements .card-title { font-size:1.05rem; }
.ndh .announcements .announcement .btn { border:0; background:var(--p-50); color:var(--p-700); font-weight:700; }
.ndh .announcements .announcement .btn:hover { background:var(--p-100); }
html[data-theme="dark"] .ndh .announcements .announcement .btn { background:var(--surface-2); color:var(--p-400); }

/* Tickets: departamento discreto, assunto em destaque (a tabela já é card) */
.ndh .table td a { font-weight:600; }

/* dark: texto das células da tabela com contraste pleno (estava esmaecido) */
html[data-theme="dark"] .ndh .table td,html[data-theme="dark"] .ndh .table td strong,
html[data-theme="dark"] .ndh .table td span:not(.label):not(.badge) { color:var(--text); }
html[data-theme="dark"] .ndh .table td .text-muted,html[data-theme="dark"] .ndh .table td small { color:var(--text-2) !important; }


/* =====================================================================
   25. ORDER FORM — checkout refinado (ref. client-order.png)
   ===================================================================== */
/* Ciclos de cobrança como cards clicáveis */
body.ndh #order-standard_cart .cycles-radio-list li,
body.ndh #order-standard_cart .billing-cycles li { list-style:none; }
body.ndh #order-standard_cart .cycles-radio-list label,
body.ndh #order-standard_cart input[name="billingcycle"] + label {
    display:block; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-md); padding:14px 16px; cursor:pointer; font-weight:600;
    transition:border-color .15s, box-shadow .15s;
}
body.ndh #order-standard_cart .cycles-radio-list label:hover { border-color:var(--p-300); }
body.ndh #order-standard_cart .cycles-radio-list input:checked + span,
body.ndh #order-standard_cart .cycles-radio-list label.active {
    border-color:var(--p-600); box-shadow:0 0 0 3px rgba(43,102,227,.15);
}
/* Resumo do pedido fixo ao rolar */
@media (min-width:1101px){
    body.ndh #order-standard_cart .order-summary,
    body.ndh #order-standard_cart #orderSummaryWrapper { position:sticky; top:calc(var(--topbar-h) + 16px); }
}
/* Total em destaque no resumo */
body.ndh #order-standard_cart .order-summary .amt,
body.ndh #order-standard_cart .order-summary .total-due-today .amt {
    font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:var(--text);
}
body.ndh #order-standard_cart .order-summary .btn-checkout,
body.ndh #order-standard_cart #checkout {
    width:100%; background:var(--p-600) !important; border:0 !important; color:#fff !important;
    padding:.7rem 1rem; border-radius:var(--r-sm) !important; font-weight:700;
}
body.ndh #order-standard_cart .order-summary .btn-checkout:hover { background:var(--p-700) !important; }
/* viewcart: some com painéis redundantes de categorias/ações no corpo */
body.ndh.page-viewcart #order-standard_cart .cart-body > .header-lined ~ .categories-collapsed,
body.ndh.is-cart #order-standard_cart .cart-body > .sidebar { display:none; }

/* =====================================================================
   26. AUTH-CARD — password-reset / 2FA (layout bare com marca)
   ===================================================================== */
body.ndh.is-auth .primary-content > .card,
body.ndh.is-auth .primary-content form > .card,
body.ndh.is-auth .primary-content .mw-540 {
    max-width:440px; margin:9vh auto 0; border:1px solid var(--line);
    border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden;
}
body.ndh.is-auth .primary-content > .card::before,
body.ndh.is-auth .primary-content form > .card::before {
    content:""; display:block; height:5px; background:var(--ndh-grad);
}
body.ndh.is-auth { background:var(--bg); }

/* dark: o stock pinta td de BRANCO (theme.min.css) — neutraliza no corpo da tabela */
html[data-theme="dark"] .ndh .table tbody td,
html[data-theme="dark"] .ndh .table tbody th { background:transparent !important; }
html[data-theme="dark"] .ndh table.dataTable tbody tr { background:transparent; }


/* Ilustrações/ícones extraídos do acervo (usam vars --svg-illustration-color-N
   e --svg-icon-color-N) — mapeados para a paleta DATAHOST */
:root {
    --svg-illustration-color-1:#2b66e3; --svg-illustration-color-2:#17b8a0;
    --svg-illustration-color-3:#7d3fe0; --svg-illustration-color-4:#dbe7ff;
    --svg-illustration-color-5:#93b8ff; --svg-illustration-color-6:#f1f4fa;
    --svg-illustration-color-7:#bfd5ff; --svg-illustration-color-8:#e5e9f2;
    --svg-icon-color-1:#2b66e3; --svg-icon-color-2:#17b8a0;
    --svg-icon-color-3:#7d3fe0; --svg-icon-color-4:#93b8ff;
}
html[data-theme="dark"] {
    --svg-illustration-color-4:#1d2f55; --svg-illustration-color-6:#1b2540;
    --svg-illustration-color-7:#263252; --svg-illustration-color-8:#263252;
}


/* =====================================================================
   27. VITRINE DE PLANOS (store/<categoria>) — ref. namehero.com
   ===================================================================== */
.ndh-store-head { text-align:center; max-width:720px; margin:6px auto 34px; }
.ndh-store-head h1 { font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; margin:0 0 8px; }
.ndh-store-head p { color:var(--text-2); font-size:1.02rem; margin:0; }

.ndh-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; align-items:stretch; max-width:1180px; margin:0 auto; }
.ndh-plan {
    position:relative; display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:28px 24px 24px; box-shadow:var(--shadow-sm);
    transition:transform .15s, box-shadow .15s, border-color .15s;
}
.ndh-plan:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--p-200); }
.ndh-plan.is-popular { border-color:var(--p-500); box-shadow:0 18px 44px rgba(43,102,227,.18); }
.ndh-plan-flag {
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:var(--ndh-grad); color:#fff; font-size:.72rem; font-weight:800;
    letter-spacing:.05em; text-transform:uppercase; padding:5px 16px; border-radius:999px;
    box-shadow:0 6px 16px rgba(43,102,227,.35); white-space:nowrap;
}
.ndh-plan-top h3 { font-size:1.15rem; font-weight:800; margin:0 0 4px; }
.ndh-plan-tag { color:var(--text-2); font-size:.85rem; margin:0 0 4px; min-height:2.4em; }
.ndh-plan-qty { display:inline-block; font-size:.72rem; font-weight:700; color:var(--warning); background:var(--warning-bg); border-radius:999px; padding:2px 10px; }

.ndh-plan-price { margin:14px 0 16px; }
.ndh-plan-price small { display:block; color:var(--text-3); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.ndh-plan-price .price { font-family:var(--font-head); font-weight:800; font-size:2.1rem; color:var(--text); line-height:1.1; }
.ndh-plan-price .cycle { color:var(--text-2); font-weight:600; font-size:.9rem; }
.ndh-plan-price .setup { margin-top:2px; text-transform:none; letter-spacing:0; }
.ndh-plan.is-popular .ndh-plan-price .price { color:var(--p-600); }

.ndh-plan .btn-order-now {
    display:block; width:100%; text-align:center; margin-bottom:18px;
    background:var(--surface) !important; border:1.5px solid var(--p-600) !important;
    color:var(--p-600) !important; border-radius:var(--r-sm) !important;
    font-weight:700; padding:.6rem 1rem;
}
.ndh-plan .btn-order-now:hover,
.ndh-plan.is-popular .btn-order-now {
    background:var(--p-600) !important; color:#fff !important;
}
.ndh-plan.is-popular .btn-order-now:hover { background:var(--p-700) !important; border-color:var(--p-700) !important; }

.ndh-plan-feats { border-top:1px solid var(--line); padding-top:16px; flex:1; }
.ndh-plan-feats ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ndh-plan-feats li { display:flex; gap:9px; align-items:flex-start; font-size:.865rem; color:var(--text); }
.ndh-plan-feats li i { color:var(--ndh-teal); font-size:.72rem; margin-top:4px; flex:none; }
.ndh-plan-feats .feature-value { font-weight:700; }
html[data-theme="dark"] .ndh-plan.is-popular { box-shadow:0 18px 44px rgba(0,0,0,.5); }

/* listas vindas do featuresdesc do produto (HTML do admin): sem bullet duplo */
.ndh-plan ul { list-style:none; padding-left:0; margin:0; }
.ndh-plan .ndh-plan-tag { min-height:0; }
.ndh-plan .ndh-plan-top li { padding:3px 0; font-size:.865rem; }


/* =====================================================================
   28. CONFIGURAR PRODUTO (cart.php?a=confproduct) — ref. client-order.png
   ===================================================================== */
/* layout: configuração fluida + resumo fixo à direita */
body.ndh #order-standard_cart .secondary-cart-body,
body.ndh #order-standard_cart .secondary-cart-sidebar { float:none; padding:0; }
body.ndh #order-standard_cart form > .row,
body.ndh #order-standard_cart #frmConfigureProduct > .row { display:flex; gap:26px; align-items:flex-start; margin:0; }
body.ndh #order-standard_cart .secondary-cart-body { flex:1; min-width:0; }
body.ndh #order-standard_cart .secondary-cart-sidebar { width:340px; flex:none; }
@media (max-width:1100px){
    body.ndh #order-standard_cart #frmConfigureProduct > .row { flex-direction:column; }
    body.ndh #order-standard_cart .secondary-cart-sidebar { width:100%; }
}

/* banner do produto */
body.ndh #order-standard_cart .product-info {
    background:linear-gradient(115deg, var(--p-50), var(--surface));
    border:1px solid var(--p-200); border-radius:var(--r-lg); padding:20px 24px; margin-bottom:22px;
}
body.ndh #order-standard_cart .product-info .product-title {
    font-family:var(--font-head); font-weight:800; font-size:1.3rem; margin:0 0 4px; color:var(--text);
}
body.ndh #order-standard_cart .product-info p { margin:0; color:var(--text-2); }
html[data-theme="dark"] body.ndh #order-standard_cart .product-info {
    background:linear-gradient(115deg, var(--p-50), var(--surface)); border-color:var(--line);
}

/* títulos de seção (Configurável, Addons, etc.) */
body.ndh #order-standard_cart .sub-heading { border:0; margin:26px 0 14px; text-align:left; }
body.ndh #order-standard_cart .sub-heading span {
    background:transparent !important; color:var(--text); padding:0;
    font-family:var(--font-head); font-weight:800; font-size:1.05rem;
    display:block; border-bottom:2px solid var(--p-600); padding-bottom:8px;
}

/* ciclos como cards */
.ndh-cycles { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:10px 0 4px; }
.ndh-cycle {
    position:relative; display:flex; flex-direction:column; gap:2px; cursor:pointer; margin:0;
    background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-md);
    padding:14px 16px 12px 42px; transition:border-color .15s, box-shadow .15s;
}
.ndh-cycle:hover { border-color:var(--p-300); }
.ndh-cycle b { font-family:var(--font-head); font-size:.95rem; }
.ndh-cycle small { color:var(--text-2); font-size:.8rem; }
.ndh-cycle-check {
    position:absolute; left:14px; top:16px; width:18px; height:18px; border-radius:50%;
    border:2px solid var(--n-300); transition:all .15s;
}
.ndh-cycle.active { border-color:var(--p-600); box-shadow:0 0 0 3px rgba(43,102,227,.15); }
.ndh-cycle.active .ndh-cycle-check { border-color:var(--p-600); background:var(--p-600); box-shadow:inset 0 0 0 3px var(--surface); }
.ndh-cycles-select { display:none !important; }

/* opções configuráveis / campos: cartão suave */
body.ndh #order-standard_cart .field-container,
body.ndh #order-standard_cart .product-configurable-options {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:18px 20px; margin-bottom:18px;
}
body.ndh #order-standard_cart .field-container .field-container,
body.ndh #order-standard_cart .field-container .product-configurable-options { border:0; padding:0; margin:0; }

/* addons como cards selecionáveis */
body.ndh #order-standard_cart .panel-addon {
    border:1.5px solid var(--line); border-radius:var(--r-md); overflow:hidden;
    transition:border-color .15s, box-shadow .15s; background:var(--surface); cursor:pointer;
}
body.ndh #order-standard_cart .panel-addon:hover { border-color:var(--p-300); }
body.ndh #order-standard_cart .panel-addon.panel-addon-selected { border-color:var(--ndh-teal); box-shadow:0 0 0 3px rgba(23,184,160,.15); }
body.ndh #order-standard_cart .panel-addon .panel-price {
    background:var(--surface-2); color:var(--text); font-weight:700; padding:8px 16px; border-top:1px solid var(--line);
}
body.ndh #order-standard_cart .panel-addon .panel-add {
    background:var(--p-600); color:#fff; text-align:center; font-weight:700; padding:9px; font-size:.85rem;
}
body.ndh #order-standard_cart .panel-addon.panel-addon-selected .panel-add { background:var(--ndh-teal); }

/* resumo do pedido (sidebar) */
body.ndh #order-standard_cart .order-summary h2 { font-size:1.15rem; margin:0 0 14px; }
body.ndh #order-standard_cart .order-summary .product-name { font-weight:800; font-family:var(--font-head); display:block; }
body.ndh #order-standard_cart .order-summary .product-group { color:var(--text-3); font-size:.8rem; display:block; margin-bottom:12px; }
body.ndh #order-standard_cart .order-summary .clearfix { padding:7px 0; border-bottom:1px dashed var(--line); font-size:.875rem; }
body.ndh #order-standard_cart .order-summary .summary-totals,
body.ndh #order-standard_cart .order-summary .total-due-today { border-bottom:0; }
body.ndh #order-standard_cart .secondary-cart-sidebar .text-center { margin-top:14px; }
body.ndh #order-standard_cart #btnCompleteProductConfig {
    width:100%; background:var(--p-600); border:0; color:#fff; font-weight:700;
    padding:.75rem 1rem; border-radius:var(--r-sm);
}
body.ndh #order-standard_cart #btnCompleteProductConfig:hover { background:var(--p-700); }

/* cart: esconde também a versão "collapsed" da sidebar (Categorias/Ações/Moeda
   empilhados no corpo — nav do topo já cobre) */
body.ndh.is-cart #order-standard_cart .sidebar-collapsed { display:none !important; }



/* =====================================================================
   29. CHECKOUT (Finalizar) + etapa de DOMÍNIO — mesmo nível do resto
   ===================================================================== */
/* Campos com ícone embutido (o skin stock posicionava via style.css do
   orderform, que não carregamos — reconstruído aqui com tokens) */
body.ndh #order-standard_cart .form-group.prepend-icon { position:relative; margin-bottom:16px; }
body.ndh #order-standard_cart .prepend-icon .field-icon {
    position:absolute; left:0; top:0; bottom:0; width:42px; margin:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-3); font-size:.9rem; pointer-events:none; z-index:2;
}
body.ndh #order-standard_cart .prepend-icon .field.form-control,
body.ndh #order-standard_cart .prepend-icon select.form-control {
    padding-left:42px; height:auto; min-height:44px;
    background:var(--surface); border:1px solid var(--n-300); border-radius:var(--r-sm);
    color:var(--text); font-size:.9rem; box-shadow:none;
}
body.ndh #order-standard_cart .field.form-control:focus {
    border-color:var(--p-400); box-shadow:0 0 0 3px rgba(43,102,227,.13);
}
/* telefone (intl-tel-input) alinha com os demais */
body.ndh #order-standard_cart .iti { width:100%; }
body.ndh #order-standard_cart .iti input { min-height:44px; border:1px solid var(--n-300); border-radius:var(--r-sm); width:100%; }

/* blocos do formulário respiram como cards */
body.ndh #order-standard_cart .sub-heading + .row,
body.ndh #order-standard_cart .sub-heading ~ .field-container {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:20px 20px 6px; margin:0 0 26px;
}

/* botão "Já registrado?" — outline discreto no lugar do teal */
body.ndh #order-standard_cart #btnAlreadyRegistered {
    background:transparent; border:1.5px solid var(--p-600); color:var(--p-600);
    border-radius:999px; font-weight:700; padding:.45rem 1.1rem;
}
body.ndh #order-standard_cart #btnAlreadyRegistered:hover { background:var(--p-600); color:#fff; }

/* Concluir pedido: CTA hero centralizado */
body.ndh #order-standard_cart #btnCompleteOrder {
    background:var(--ndh-grad); border:0; color:#fff; font-weight:800;
    padding:.85rem 2.2rem; border-radius:999px; font-size:1rem;
    box-shadow:0 14px 30px rgba(43,102,227,.35);
}
body.ndh #order-standard_cart #btnCompleteOrder:hover { transform:translateY(-2px); box-shadow:0 18px 38px rgba(43,102,227,.45); }
body.ndh #order-standard_cart .checkout-security-msg {
    background:var(--success-bg); border:1px solid #c4ecd6; color:#0b7a46;
    border-radius:var(--r-md); margin-top:18px;
}
/* métodos de pagamento como pills */
body.ndh #order-standard_cart .radio-inline {
    display:inline-flex; align-items:center; gap:8px; margin:4px 10px 4px 0;
    background:var(--surface); border:1.5px solid var(--line); border-radius:999px;
    padding:9px 18px; font-weight:600; cursor:pointer; transition:border-color .15s;
}
body.ndh #order-standard_cart .radio-inline:hover { border-color:var(--p-300); }

/* ---- Etapa de domínio (configureproductdomain) ---- */
body.ndh.page-configureproductdomain #order-standard_cart .header-lined h1,
body.ndh #order-standard_cart .domain-selection-options { text-align:left; }
body.ndh #order-standard_cart .domain-selection-options .option {
    background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg);
    padding:18px 20px; margin-bottom:14px; transition:border-color .15s, box-shadow .15s;
}
body.ndh #order-standard_cart .domain-selection-options .option:hover { border-color:var(--p-300); }
body.ndh #order-standard_cart .domain-selection-options .option.selected,
body.ndh #order-standard_cart .domain-selection-options .option:has(input:checked) {
    border-color:var(--p-600); box-shadow:0 0 0 3px rgba(43,102,227,.13);
}
body.ndh #order-standard_cart .domain-selection-options label { font-weight:700; cursor:pointer; margin:0; }
/* linha dominio: prefixo www + sld + tld + botão em pill única */
body.ndh #order-standard_cart .domain-input-group,
body.ndh #order-standard_cart .input-group.owned-domain { display:flex; gap:10px; align-items:stretch; }
body.ndh #order-standard_cart .domain-selection-options input[type=text] {
    min-height:46px; border:1px solid var(--n-300); border-radius:var(--r-sm);
    padding:0 14px; font-size:.95rem; background:var(--surface); color:var(--text);
}
body.ndh #order-standard_cart #useOwnDomain,
body.ndh #order-standard_cart .domain-selection-options .btn-primary {
    background:var(--p-600); border:0; color:#fff; font-weight:700;
    border-radius:var(--r-sm); padding:.6rem 1.6rem;
}
body.ndh #order-standard_cart #useOwnDomain:hover { background:var(--p-700); }


/* =====================================================================
   30. DOMÍNIO campo único + VIEWCART com respiro
   ===================================================================== */
/* página de domínio: conteúdo centralizado */
body.ndh.page-configureproductdomain #order-standard_cart .header-lined { text-align:center; margin-bottom:26px; }
body.ndh #order-standard_cart .domain-selection-options { max-width:760px; margin:0 auto; }
body.ndh #order-standard_cart .domain-selection-options .option { padding:22px 26px; }
body.ndh #order-standard_cart .domain-selection-options .option > label { display:flex; gap:10px; align-items:center; font-size:.98rem; }

/* campo único de domínio: pill integrada www. + input + botão */
.ndh-domain-single {
    display:flex; align-items:center; gap:0; margin-top:16px;
    background:var(--surface); border:1.5px solid var(--n-300); border-radius:999px;
    padding:6px 6px 6px 20px; box-shadow:var(--shadow-sm);
    transition:border-color .15s, box-shadow .15s;
}
.ndh-domain-single:focus-within { border-color:var(--p-400); box-shadow:0 0 0 3px rgba(43,102,227,.13); }
.ndh-domain-www { color:var(--text-3); font-weight:600; font-size:.95rem; }
.ndh-domain-single input {
    flex:1; border:0 !important; outline:0; background:transparent; min-height:44px;
    font-size:1rem; color:var(--text); padding:0 8px; min-width:0;
}
.ndh-domain-single .btn { border-radius:999px !important; padding:.6rem 1.6rem; font-weight:700; flex:none; }

/* ---- VIEWCART (Revisar e Finalizar): respiro entre elementos ---- */
body.ndh.page-viewcart #order-standard_cart .cart-body > * { margin-bottom:18px; }
/* cabeçalho da lista */
body.ndh #order-standard_cart .view-cart-items-header {
    border-radius:var(--r-md) var(--r-md) 0 0; padding:12px 20px;
    font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-3); background:var(--surface-2); border:1px solid var(--line); border-bottom:0;
}
/* itens do carrinho como linhas de card */
body.ndh #order-standard_cart .view-cart-items { border:1px solid var(--line); border-radius:0 0 var(--r-md) var(--r-md); overflow:hidden; margin-bottom:22px; }
body.ndh #order-standard_cart .view-cart-items .item { padding:18px 20px; border-bottom:1px solid var(--line); margin:0; }
body.ndh #order-standard_cart .view-cart-items .item:last-child { border-bottom:0; }
body.ndh #order-standard_cart .item-title { font-family:var(--font-head); font-weight:700; font-size:1rem; }
body.ndh #order-standard_cart .item-title .btn-remove-from-cart { color:var(--danger); margin-left:6px; }
body.ndh #order-standard_cart .item-group { color:var(--text-3); font-size:.8rem; }
body.ndh #order-standard_cart .item-domain { color:var(--p-600); font-weight:600; font-size:.875rem; margin:2px 0 0; }
body.ndh #order-standard_cart .item-price .cost { font-weight:800; font-family:var(--font-head); font-size:1.05rem; }
body.ndh #order-standard_cart .item-price .cycle { color:var(--text-2); font-size:.8rem; }
/* ações sob a lista (esvaziar / promo) com respiro */
body.ndh #order-standard_cart .btn-empty-cart, 
body.ndh #order-standard_cart a[href*="emptycart"] { color:var(--danger); font-weight:600; }
body.ndh #order-standard_cart .promo-container,
body.ndh #order-standard_cart #applyCreditContainer {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:18px 20px; margin:22px 0;
}
body.ndh #order-standard_cart .promo-container .form-control { min-height:44px; }
body.ndh #order-standard_cart .view-cart-tables { margin-top:10px; }
/* botão "Continuar Comprando" discreto sob o resumo */
body.ndh #order-standard_cart .btn-checkout + a,
body.ndh #order-standard_cart a[href*="cart.php?a=empty"] { font-weight:600; }

/* dentro da pill, o input não herda borda/fundo/outline da regra genérica */
body.ndh #order-standard_cart .ndh-domain-single input[type=text] {
    border:0 !important; background:transparent !important;
    outline:none !important; box-shadow:none !important; min-height:44px;
}


/* =====================================================================
   31. CHECKOUT EM 2 COLUNAS — dados (esq.) | pagamento (dir. sticky)
   ===================================================================== */
.ndh-co-grid { display:flex; gap:30px; align-items:flex-start; }
.ndh-co-main { flex:1; min-width:0; }
.ndh-co-side {
    width:400px; flex:none; position:sticky; top:calc(var(--topbar-h) + 16px);
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-md); padding:22px 22px 24px;
}
/* dentro do card de pagamento, os sub-headings e blocos ficam compactos */
.ndh-co-side .sub-heading { margin-top:0 !important; }
.ndh-co-side .sub-heading ~ .field-container,
.ndh-co-side .sub-heading + .row { border:0 !important; padding:0 !important; margin-bottom:14px !important; box-shadow:none; }
.ndh-co-side .radio-inline { width:100%; justify-content:flex-start; margin:0 0 10px; }
.ndh-co-side .text-center { margin-top:16px; }
.ndh-co-side #btnCompleteOrder { width:100%; }
.ndh-co-side .checkbox-inline { font-size:.85rem; text-align:left; display:flex; gap:8px; align-items:flex-start; }
@media (max-width:991.98px){ .ndh-co-side { position:static; width:100%; } }

/* side: campos do cartão empilhados em largura total */
.ndh-co-side #creditCardInputFields .row > [class*="col-"],
.ndh-co-side .cc-input-container .row > [class*="col-"] { flex:0 0 100%; max-width:100%; }
.ndh-co-side #creditCardInputFields input,
.ndh-co-side .cc-input-container input { width:100%; min-height:42px; }
.ndh-co-side #creditCardInputFields label { font-size:.8rem; margin-bottom:4px; }


/* =====================================================================
   32. CHECKOUT — refino: cartão, campos adicionais
   ===================================================================== */
/* (1) bloco do cartão: sem bolinha de lista, opção compacta, campos grandes */
body.ndh #order-standard_cart #creditCardInputFields ul,
body.ndh #order-standard_cart #creditCardInputFields li { list-style:none; margin:0; padding:0; }
body.ndh #order-standard_cart #creditCardInputFields li > label,
body.ndh #order-standard_cart #creditCardInputFields .radio-inline {
    display:flex; align-items:center; gap:8px; width:100%;
    background:transparent; border:0; border-radius:0; padding:4px 0 10px;
    font-weight:600; font-size:.875rem;
}
body.ndh #order-standard_cart #creditCardInputFields input.form-control,
body.ndh #order-standard_cart #creditCardInputFields input.field {
    width:100% !important; min-width:0; min-height:44px !important;
    border:1px solid var(--n-300) !important; border-radius:var(--r-sm) !important;
    background:var(--surface) !important; padding:0 12px !important; font-size:.95rem;
}
body.ndh #order-standard_cart #creditCardInputFields .form-group { margin-bottom:12px; }
body.ndh #order-standard_cart #creditCardInputFields label { font-size:.8rem; font-weight:600; color:var(--text-2); margin-bottom:4px; display:block; }

/* (2) campos sem prepend-icon (informações adicionais, registrante etc.):
   o stock zera a borda (estilo material) — restaura o padrão do tema */
body.ndh #order-standard_cart .form-group > input.form-control:not(.field),
body.ndh #order-standard_cart .form-group > input.form-control,
body.ndh #order-standard_cart .form-group > select.form-control,
body.ndh #order-standard_cart .form-group > textarea.form-control {
    border:1px solid var(--n-300) !important; border-radius:var(--r-sm) !important;
    background:var(--surface) !important; min-height:44px; padding:8px 14px !important;
    box-shadow:none !important; color:var(--text);
}
body.ndh #order-standard_cart .form-group > .form-control:focus {
    border-color:var(--p-400) !important; box-shadow:0 0 0 3px rgba(43,102,227,.13) !important;
}
/* iCheck (radio estilizado do stock) alinhado e pequeno */
body.ndh #order-standard_cart .iradio_square-blue { flex:none; transform:scale(.85); }

/* (4) modal dos Termos de Serviço */
.ndh-tos-modal {
    position:fixed; inset:0; z-index:2100; background:rgba(10,15,30,.6);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; padding:4vh 4vw;
}
.ndh-tos-box {
    position:relative; width:min(920px,100%); height:min(82vh,900px);
    background:var(--surface); border-radius:var(--r-lg); overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.ndh-tos-box iframe { width:100%; height:100%; border:0; display:block; background:#fff; }
.ndh-tos-close {
    position:absolute; top:10px; right:10px; z-index:2; width:38px; height:38px;
    border-radius:50%; border:0; cursor:pointer; font-size:1.4rem; line-height:1;
    background:var(--n-900); color:#fff; opacity:.85;
}
.ndh-tos-close:hover { opacity:1; }

/* a regra genérica acima não pode atropelar o recuo dos campos com ícone */
body.ndh #order-standard_cart .prepend-icon > .form-control,
body.ndh #order-standard_cart .prepend-icon > .field.form-control { padding-left:42px !important; }

/* Stripe Elements (gateway de cartão): ocupa toda a largura do card.
   O stock espreme em col-md-8 offset-2 + col-6/3/3 — vira: número 100%,
   validade e CVC lado a lado (50/50). Estilizamos o CONTAINER (o campo
   real é um iframe do Stripe que se adapta a ele). */
body.ndh #order-standard_cart .stripe-cards-inputs {
    width:100% !important; max-width:100% !important;
    margin-left:0 !important; flex:0 0 100%; padding:0;
}
body.ndh #order-standard_cart .stripe-cards-inputs .row {
    display:flex; flex-wrap:wrap; gap:12px; margin:0;
}
body.ndh #order-standard_cart .stripe-cards-inputs .row > .col-md-6 {
    flex:0 0 100%; max-width:100%; padding:0;
}
body.ndh #order-standard_cart .stripe-cards-inputs .row > .col-md-3 {
    flex:1 1 calc(50% - 6px); max-width:calc(50% - 6px); padding:0;
}
body.ndh #order-standard_cart .StripeElement {
    width:100% !important; min-height:44px;
    display:flex; flex-direction:column; justify-content:center;
    border:1px solid var(--n-300) !important; border-radius:var(--r-sm) !important;
    background:var(--surface) !important; padding:0 14px !important;
}
body.ndh #order-standard_cart .StripeElement--focus {
    border-color:var(--p-400) !important; box-shadow:0 0 0 3px rgba(43,102,227,.13) !important;
}
body.ndh #order-standard_cart .StripeElement--invalid { border-color:var(--danger) !important; }
body.ndh #order-standard_cart .stripe-cards-inputs label {
    font-size:.8rem; font-weight:600; color:var(--text-2); margin:0 0 4px; display:block;
}

/* side: mata offsets herdados do grid stock e labels sem clipe */
.ndh-co-side [class*="offset-"], .ndh-co-side [class*="-offset-"] { margin-left:0 !important; }
.ndh-co-side #creditCardInputFields .row > [class*="col-"] { padding:0; }
body.ndh #order-standard_cart .stripe-cards-inputs label { white-space:nowrap; overflow:visible; }
/* campo "nome do cartão": full-width e alinhado dentro do card */
.ndh-co-side #creditCardInputFields .prepend-icon { width:100%; margin-top:12px; }
.ndh-co-side #creditCardInputFields .prepend-icon .field.form-control { width:100% !important; }

/* wrappers .prepend-icon sem .form-group (ex.: nome do cartão): ícone dentro */
body.ndh #order-standard_cart .prepend-icon { position:relative; }
body.ndh #order-standard_cart .prepend-icon .field-icon {
    position:absolute; left:0; top:0; bottom:0; width:42px; margin:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-3); font-size:.9rem; pointer-events:none; z-index:2;
}

body.ndh #order-standard_cart #creditCardInputFields .prepend-icon > input.form-control,
body.ndh #order-standard_cart #creditCardInputFields .prepend-icon > input.field {
    padding-left:42px !important;
}


/* =====================================================================
   33. CHECKOUT — polish final: nome do cartão, newsletter, switch, telefone
   ===================================================================== */
/* (1) campo opcional do nome do cartão: mais discreto */
.ndh-co-side #creditCardInputFields .prepend-icon { margin-top:10px; }
body.ndh #order-standard_cart #creditCardInputFields .prepend-icon > input.form-control,
body.ndh #order-standard_cart #creditCardInputFields .prepend-icon > input.field {
    min-height:38px !important; height:38px; font-size:.82rem;
}
/* (2) newsletter compacta */
.ndh-co-side h4, .ndh-co-side .font-size-18 { font-size:.95rem !important; margin:14px 0 6px; }
.ndh-co-side .marketing-email-optin p, .ndh-co-side h4 + p, .ndh-co-side h4 ~ p { font-size:.8rem; color:var(--text-2); margin:0 0 10px; }
/* (3) switch da newsletter: pill suave da marca */
.ndh .bootstrap-switch {
    border-radius:999px !important; border:1px solid var(--line) !important;
    box-shadow:none !important; overflow:hidden; min-width:88px;
}
.ndh .bootstrap-switch .bootstrap-switch-handle-on,
.ndh .bootstrap-switch .bootstrap-switch-handle-off,
.ndh .bootstrap-switch .bootstrap-switch-label {
    border-radius:0 !important; box-shadow:none !important; font-size:.72rem;
    font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:6px 12px;
}
.ndh .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.ndh .bootstrap-switch .bootstrap-switch-handle-on { background:var(--ndh-teal) !important; color:#fff !important; border:0; }
.ndh .bootstrap-switch .bootstrap-switch-handle-off { background:var(--surface-2) !important; color:var(--text-3) !important; border:0; }
.ndh .bootstrap-switch .bootstrap-switch-label { background:var(--surface) !important; position:relative; }
.ndh .bootstrap-switch .bootstrap-switch-label::after {
    content:""; position:absolute; inset:4px; border-radius:50%;
    background:var(--n-300); width:14px; height:14px; margin:auto;
}
.ndh .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label::after { background:var(--ndh-teal); }
.ndh .bootstrap-switch.bootstrap-switch-focused { box-shadow:0 0 0 3px rgba(23,184,160,.18) !important; border-color:var(--ndh-teal) !important; }
/* (4) telefone (intl-tel-input, classe legada): borda igual aos demais */
body.ndh #order-standard_cart .intl-tel-input { width:100%; }
body.ndh #order-standard_cart .intl-tel-input input {
    width:100%; min-height:44px !important;
    border:1px solid var(--n-300) !important; border-radius:var(--r-sm) !important;
    background:var(--surface) !important; color:var(--text);
}
body.ndh #order-standard_cart .intl-tel-input input:focus {
    border-color:var(--p-400) !important; box-shadow:0 0 0 3px rgba(43,102,227,.13) !important;
}


/* =====================================================================
   34. ILUSTRAÇÕES (SVG inline do acervo) — paleta mapeada para a marca
   ===================================================================== */
:root {
    /* primária = azul da marca */
    --svg-illustration-primary-0:#eef4ff; --svg-illustration-primary-1:#bfd5ff;
    --svg-illustration-primary-2:#5b8def; --svg-illustration-primary-3:#2b66e3;
    --svg-illustration-primary-4:#1c449e;
    /* verde = teal da marca */
    --svg-illustration-green-1:#d9f7f1; --svg-illustration-green-2:#7fe3d2;
    --svg-illustration-green-3:#17b8a0; --svg-illustration-green-4:#0e8f7c;
    /* amarelo = acento quente */
    --svg-illustration-yellow-1:#fff3d6; --svg-illustration-yellow-2:#ffd166;
    --svg-illustration-yellow-3:#f5b301; --svg-illustration-yellow-5:#d99a00;
    /* cinzas = neutros do tema */
    --svg-illustration-gray-1:#f7f9fd; --svg-illustration-gray-2:#f1f4fa;
    --svg-illustration-gray-3:#e5e9f2; --svg-illustration-gray-4:#d2d9e6;
    --svg-illustration-gray-5:#9aa5ba; --svg-illustration-gray-6:#6b7690;
    --svg-illustration-gray-7:#4c576f; --svg-illustration-gray-8:#222b3d;
    --svg-illustration-color-0:#ffffff;
}
html[data-theme="dark"] {
    --svg-illustration-primary-0:#182643; --svg-illustration-primary-1:#1d2f55;
    --svg-illustration-gray-1:#1b2540; --svg-illustration-gray-2:#202b4a;
    --svg-illustration-gray-3:#263252; --svg-illustration-gray-4:#33405f;
    --svg-illustration-gray-5:#67748f; --svg-illustration-gray-6:#9aa7c2;
    --svg-illustration-gray-7:#c3cde3; --svg-illustration-gray-8:#e7ecf6;
    --svg-illustration-color-0:#141d31;
    --svg-illustration-yellow-1:#3d3414;
    --svg-illustration-green-1:#123c34;
}
.ndh-illus { display:block; }
.ndh-illus svg { width:100%; height:auto; max-height:420px; display:block; }


/* =====================================================================
   35. HOME v2 — hero c/ ilustração, planos com preço, passos, depoimentos
   ===================================================================== */
.home-hero-grid { display:grid; grid-template-columns:1.20fr .80fr; gap:20px; align-items:center; }
.home-hero-art svg { max-height:400px; filter:drop-shadow(0 24px 48px rgba(4,10,30,.35)); }
@media (max-width:991.98px){ .home-hero-grid { grid-template-columns:1fr; } }

/* cabeçalho de seção de planos: ilustração + título lado a lado */
.home-plansec-head {
    display:flex; gap:28px; align-items:center; max-width:860px; margin:0 auto 34px;
}
.home-plansec-head > div:last-child { text-align:left; }
.home-plansec-head .home-sec-title, .home-plansec-head .home-sec-sub { text-align:left; margin-left:0; }
.home-plansec-art { width:190px; flex:none; }
.home-plansec-art svg { max-height:160px; }
.home-plansec-head.is-flip { flex-direction:row-reverse; }
@media (max-width:700px){ .home-plansec-head { flex-direction:column !important; text-align:center; }
    .home-plansec-head .home-sec-title,.home-plansec-head .home-sec-sub { text-align:center; } }

/* grid de pricing na home (reusa .ndh-plan da loja) */
.home-plans-pricing { grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.home-plans-pricing .ndh-plan { padding:24px 20px 20px; }
.home-plans-pricing .ndh-plan-top h3 { font-size:1.02rem; }
.home-plans-pricing .ndh-plan-price { margin:8px 0 14px; }
.home-plans-pricing .ndh-plan-price .price { font-size:1.75rem; }
.home-plans-pricing .btn-order-now { margin-bottom:0; }
.home-plansec-more { text-align:center; margin:22px 0 0; font-weight:700; }

/* como funciona (passos) */
.home-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:980px; margin:0 auto; }
.home-step {
    position:relative; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); padding:28px 24px 22px; box-shadow:var(--shadow-sm);
}
.home-step-n {
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:12px; background:var(--ndh-grad); color:#fff;
    font-family:var(--font-head); font-weight:800; font-size:1.1rem; margin-bottom:12px;
}
.home-step h3 { font-size:1.02rem; margin:0 0 6px; }
.home-step p { color:var(--text-2); font-size:.88rem; margin:0; }
@media (max-width:820px){ .home-steps { grid-template-columns:1fr; } }

/* depoimentos */
.home-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.home-quote {
    margin:0; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm);
    display:flex; flex-direction:column; gap:12px;
}
.home-quote-stars { color:#f5b301; letter-spacing:2px; font-size:.95rem; }
.home-quote blockquote { margin:0; color:var(--text); font-size:.92rem; line-height:1.6; flex:1; }
.home-quote figcaption { display:flex; align-items:center; gap:12px; }
.home-quote-avatar {
    width:42px; height:42px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--ndh-grad); color:#fff; font-weight:800; font-size:.85rem;
}
.home-quote figcaption b { display:block; font-size:.9rem; }
.home-quote figcaption small { color:var(--text-3); }
@media (max-width:820px){ .home-quotes { grid-template-columns:1fr; } }

/* migração/segurança com ilustração */
.home-mig-illus svg { max-height:300px; }
.home-mig.is-flip { direction:rtl; } .home-mig.is-flip > * { direction:ltr; }

/* CTA final com ilustração */
.home-cta-illus { max-width:280px; margin:0 auto 8px; }
.home-cta-illus svg { max-height:170px; }

/* ilustrações 156 (ícones compostos fechados) nas seções */
.home-plansec-art svg, .home-mig-illus svg { max-height:220px; }
.home-mig-illus { display:flex; justify-content:center; }
.home-mig-illus svg { width:auto; max-width:100%; height:260px; }
.home-hero-art img { width:100%; border-radius:24px; }


/* =====================================================================
   36. HOME — imagens geradas (migração, segurança, depoimentos, CTA)
   ===================================================================== */
.home-mig-illus img { width:100%; max-width:520px; height:auto; border-radius:18px; }
/* depoimentos: mesh suave de fundo */
.home-sec-quotes {
    background:
        linear-gradient(color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 55%, transparent)),
        url("../img/depoimentos-bg.webp") center/cover no-repeat;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
html[data-theme="dark"] .home-sec-quotes {
    background:
        linear-gradient(rgba(11,17,32,.88), rgba(11,17,32,.88)),
        url("../img/depoimentos-bg.webp") center/cover no-repeat;
}
/* CTA final: foguete como cenário */
.home-cta {
    background:
        linear-gradient(rgba(10,16,38,.35), rgba(10,16,38,.55)),
        url("../img/cta-final.webp") center/cover no-repeat;
    padding:250px 0;
}
.home-cta h2, .home-cta p { text-shadow:0 2px 18px rgba(4,10,30,.6); }

/* descrição/specs dos planos nos cards da home (reusa .ndh-plan-feats) */
.home-plans-pricing .home-plan-desc { margin-top:16px; font-size:.82rem; }
.home-plans-pricing .home-plan-desc ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.home-plans-pricing .home-plan-desc li { color:var(--text-2); }
.home-plans-pricing .home-plan-desc p { margin:0 0 6px; color:var(--text-2); }
.home-plans-pricing .home-plan-desc strong, .home-plans-pricing .home-plan-desc b { color:var(--text); }
.home-plans-pricing .btn-order-now { margin-bottom:0; }

/* loja: descrição dos planos compacta (mesmo tratamento da home) */
body.ndh #order-standard_cart .ndh-plan .ndh-plan-top p,
body.ndh #order-standard_cart .ndh-plan .ndh-plan-tag p { margin:0 0 4px; }
body.ndh #order-standard_cart .ndh-plan .ndh-plan-top ul { list-style:none; padding:0; margin:0 0 6px; display:grid; gap:4px; }
body.ndh #order-standard_cart .ndh-plan .ndh-plan-top li { padding:0; margin:0; font-size:.865rem; line-height:1.45; color:var(--text-2); }
body.ndh #order-standard_cart .ndh-plan .ndh-plan-top li strong,
body.ndh #order-standard_cart .ndh-plan .ndh-plan-top li b { color:var(--text); }
body.ndh #order-standard_cart .ndh-plan .ndh-plan-top p:empty { display:none; }
body.ndh #order-standard_cart .ndh-plan .ndh-plan-feats li { padding:0; }

/* loja: featuresdesc do admin vem com <br> entre blocos e li espaçados — compacta */
body.ndh #order-standard_cart .ndh-plan .plan-details > br,
body.ndh #order-standard_cart .ndh-plan .ndh-plan-top > br,
body.ndh #order-standard_cart .ndh-plan .plan-details li > br { display:none; }
body.ndh #order-standard_cart .ndh-plan .plan-details h5,
body.ndh #order-standard_cart .ndh-plan .plan-details h4 { font-size:.95rem; margin:0 0 10px; }
body.ndh #order-standard_cart .ndh-plan .plan-details ul { margin:0 0 12px !important; gap:5px !important; }
body.ndh #order-standard_cart .ndh-plan .plan-details li {
    padding:0 !important; margin:0 !important; line-height:1.45 !important;
    min-height:0 !important; font-size:.865rem;
}

/* o admin intercala <br> ENTRE os <li> — no grid cada br virava uma linha */
body.ndh #order-standard_cart .ndh-plan ul > br,
.home-plans-pricing .home-plan-desc ul > br { display:none; }


/* =====================================================================
   37. DATATABLES — espaçamento, busca, paginação, sem scroll lateral
   ===================================================================== */
/* (1)(3) length e info com respiro das bordas */
.ndh .dataTables_wrapper .dataTables_length { padding:14px 18px 10px; }
.ndh .dataTables_wrapper .dataTables_info { padding:14px 18px 16px; }
/* (2) busca: respiro e SEM sobreposição — esconde o texto "Search:" do label
   (fica o ícone no input + placeholder) */
.ndh .dataTables_wrapper .dataTables_filter { padding:14px 18px 10px; margin:0; }
.ndh .dataTables_wrapper .dataTables_filter label { font-size:0; margin:0; display:block; }
.ndh .dataTables_wrapper .dataTables_filter input { font-size:.875rem; margin:0; }
/* (4) paginação: alinhada à direita com respiro, botões consistentes */
.ndh .dataTables_wrapper .dataTables_paginate { padding:10px 18px 16px; display:flex; justify-content:flex-end; gap:2px; flex-wrap:wrap; }
.ndh .dataTables_wrapper .dataTables_paginate .paginate_button,
.ndh .dataTables_wrapper .dataTables_paginate .page-link { min-width:36px; text-align:center; }
.ndh .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity:.45; pointer-events:none; }
.ndh .dataTables_wrapper .pagination { margin:0; }
/* (5) sem scroll horizontal: células quebram linha e a tabela cabe no card */
.ndh .table-container .table { width:100% !important; table-layout:auto; }
.ndh .table td, .ndh .table th { white-space:normal; word-break:break-word; }
.ndh .table td .btn { white-space:nowrap; }

/* notas fiscais: DataTables media com a tabela oculta e gera widths erradas */
#TabelaNotasFIscais { width:100% !important; }
#TabelaNotasFIscais th, #TabelaNotasFIscais td { width:auto !important; }

/* o wrapper do DataTables usa .row com margens negativas — estourava 15px */
.ndh .table-container .dataTables_wrapper > .row { margin-left:0 !important; margin-right:0 !important; }
.ndh .table-container { overflow-x:auto; }

/* productdetails: botão de cancelamento outline — a regra genérica
   '.ndh .btn-danger { color:#fff !important }' (seção 22) o deixava
   branco-no-branco; reafirma o outline com !important */
.ndh .product-details .btn-danger.btn-block {
    background:transparent !important; border:1px solid var(--danger) !important;
    color:var(--danger) !important;
}
.ndh .product-details .btn-danger.btn-block:hover {
    background:var(--danger) !important; color:#fff !important;
}
/* alerta de fatura em aberto: botão 'Pagar Fatura' centrado e contido */
.ndh #alertUnpaidInvoice, .ndh #alertOverdueInvoice {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.ndh #alertUnpaidInvoice .float-right, .ndh #alertOverdueInvoice .float-right {
    float:none !important; order:2; margin-left:auto; flex:none;
}
.ndh #alertUnpaidInvoice .btn, .ndh #alertOverdueInvoice .btn {
    padding:.45rem 1rem; font-size:.8rem; white-space:nowrap;
    background:var(--surface); border:1px solid var(--warning); color:var(--warning);
}
.ndh #alertOverdueInvoice .btn { border-color:var(--danger); color:var(--danger); }
.ndh #alertUnpaidInvoice .btn:hover { background:var(--warning); color:#fff; }
.ndh #alertOverdueInvoice .btn:hover { background:var(--danger); color:#fff; }


/* =====================================================================
   38. MÓDULO ENHANCE — botão "Acessar Painel" (o módulo emite <a> cru)
   Estilizado pelo tema via href (sobrevive a updates do módulo).
   ===================================================================== */
.ndh a[href*="dosinglesignon=1"] {
    display:inline-flex; align-items:center; gap:9px;
    background:var(--ndh-grad) !important; color:#fff !important;
    font-family:var(--font-head); font-weight:700; font-size:.9rem;
    padding:.65rem 1.4rem; border-radius:var(--r-sm); border:0;
    box-shadow:0 8px 20px rgba(43,102,227,.28);
    transition:transform .15s, box-shadow .15s;
    margin:6px 0;
}
.ndh a[href*="dosinglesignon=1"]:hover {
    transform:translateY(-2px); box-shadow:0 12px 26px rgba(43,102,227,.4);
    color:#fff !important;
}
.ndh a[href*="dosinglesignon=1"]::before {
    content:"\f2f6"; /* fa-sign-in-alt */
    font-family:"Font Awesome 5 Pro","Font Awesome 5 Free"; font-weight:900;
}


/* =====================================================================
   39. AFILIADOS — hero do link, comissões, ativação
   ===================================================================== */
.aff-hero {
    background:var(--ndh-grad); border-radius:var(--r-lg); color:#fff;
    padding:28px; margin-bottom:22px; box-shadow:var(--shadow-lg);
}
.aff-hero-txt h2 { color:#fff; font-size:1.4rem; margin:0 0 4px; }
.aff-hero-txt p { color:#eaf1ff; margin:0 0 16px; max-width:560px; }
.aff-link {
    display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 6px 6px 18px;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.aff-link i { color:#fff; opacity:.8; }
.aff-link input {
    flex:1; min-width:0; border:0; outline:0; background:transparent;
    color:#fff; font-size:.9rem; font-weight:600;
}
.aff-link .btn {
    flex:none; background:#fff; color:var(--p-700); border-radius:999px !important;
    font-weight:700; padding:.5rem 1.2rem; border:0;
}
.aff-link .btn:hover { background:var(--p-50); color:var(--p-800); }
.aff-stats { margin-bottom:22px; grid-template-columns:repeat(3,1fr); }

.aff-money { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:16px; align-items:stretch; margin-bottom:8px; }
.aff-money-card {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:20px 22px; display:flex; flex-direction:column; gap:6px; justify-content:center;
}
.aff-money-card small { color:var(--text-3); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.aff-money-card b { font-family:var(--font-head); font-size:1.6rem; color:var(--text); }
.aff-money-card.is-available { border-color:var(--p-400); box-shadow:0 0 0 3px rgba(43,102,227,.1); }
.aff-money-card.is-available b { color:var(--p-600); font-size:1.9rem; }
.aff-money-card form { margin-top:8px; }
.aff-min-note { color:var(--text-3); font-size:.8rem; margin:4px 0 0; }
.aff-sec-title { font-size:1.15rem; margin:30px 0 14px; }
@media (max-width:820px){ .aff-money, .aff-stats { grid-template-columns:1fr; } }

/* ativação */
.aff-signup {
    max-width:640px; margin:20px auto; text-align:center;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-md); padding:40px 36px;
}
.aff-signup-art { max-width:150px; margin:0 auto 16px; }
.aff-signup h2 { font-size:1.5rem; margin:0 0 8px; }
.aff-signup-lead { color:var(--text-2); margin:0 0 22px; }
.aff-signup-perks { display:grid; gap:10px; text-align:left; max-width:420px; margin:0 auto 26px; }
.aff-perk { display:flex; gap:10px; align-items:flex-start; font-weight:600; }
.aff-perk i { color:var(--ndh-teal); margin-top:3px; }



/* =====================================================================
   40. AFILIADOS — gráficos de evolução (barras CSS puras) + painel lateral
   ===================================================================== */
.aff-charts { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }
.aff-chart-card {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:20px 22px 14px; box-shadow:var(--shadow-sm);
}
.aff-chart-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:16px; }
.aff-chart-head h3 { font-size:.95rem; margin:0; }
.aff-chart-total { font-family:var(--font-head); font-weight:800; color:var(--p-600); font-size:1.05rem; white-space:nowrap; }
.aff-chart-total small { color:var(--text-3); font-weight:600; font-size:.7rem; }
.aff-chart { display:flex; align-items:flex-end; gap:6px; height:140px; }
.aff-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; min-width:0; }
.aff-bar {
    width:100%; max-width:26px; border-radius:6px 6px 2px 2px; min-height:0;
    transition:height .5s ease, filter .15s;
}
.aff-bar.is-money { background:var(--ndh-grad); }
.aff-bar.is-signups { background:var(--ndh-teal); }
.aff-bar-col:hover .aff-bar { filter:brightness(1.15); }
.aff-bar-col span { font-size:.62rem; font-weight:700; color:var(--text-3); text-transform:uppercase; }
@media (max-width:900px){ .aff-charts { grid-template-columns:1fr; } }