/* ==========================================================================
   nojhancdn — Nojhan Pardazesh WHMCS Theme
   Design system + components. Dark-mode legacy overrides live in nojhan-dark.css
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --nj-primary: #10b981;
    --nj-primary-600: #059669;
    --nj-primary-700: #047857;
    --nj-teal: #14b8a6;
    --nj-cyan: #06b6d4;
    --nj-grad: linear-gradient(135deg, #22c55e 0%, #10b981 45%, #0ea5a4 100%);
    --nj-grad-soft: linear-gradient(135deg, rgba(34, 197, 94, .12), rgba(14, 165, 164, .12));
    --nj-primary-soft: rgba(16, 185, 129, .12);
    --nj-primary-ring: rgba(16, 185, 129, .28);

    --nj-navy: #0b1f3a;
    --nj-navy-2: #0f2a4d;
    --nj-navy-3: #13345c;

    --nj-bg: #f3f6fb;
    --nj-bg-grad: radial-gradient(1200px 500px at 85% -10%, rgba(16, 185, 129, .08), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(59, 130, 246, .07), transparent 60%);
    --nj-surface: #ffffff;
    --nj-surface-2: #f7f9fc;
    --nj-surface-3: #eef2f7;
    --nj-border: #e4e9f0;
    --nj-border-strong: #d5dce6;
    --nj-text: #1e293b;
    --nj-heading: #0b1f3a;
    --nj-muted: #64748b;
    --nj-subtle: #94a3b8;

    --nj-success: #16a34a;
    --nj-success-soft: rgba(22, 163, 74, .12);
    --nj-danger: #e11d48;
    --nj-danger-soft: rgba(225, 29, 72, .1);
    --nj-warning: #f59e0b;
    --nj-warning-soft: rgba(245, 158, 11, .14);
    --nj-info: #0ea5e9;
    --nj-info-soft: rgba(14, 165, 233, .12);
    --nj-purple: #8b5cf6;
    --nj-purple-soft: rgba(139, 92, 246, .12);

    --nj-radius-sm: 10px;
    --nj-radius: 14px;
    --nj-radius-lg: 20px;
    --nj-radius-xl: 28px;
    --nj-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
    --nj-shadow: 0 6px 24px -8px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .04);
    --nj-shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, .22);
    --nj-shadow-primary: 0 10px 24px -8px rgba(16, 185, 129, .55);

    --nj-font: 'Vazirmatn', 'whmcsco', Tahoma, 'Segoe UI', sans-serif;
    --nj-header-h: 76px;
    --nj-side-w: 264px;
    --nj-ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] {
    --nj-primary: #19c28f;
    --nj-primary-600: #10b981;
    --nj-primary-soft: rgba(25, 194, 143, .14);
    --nj-primary-ring: rgba(25, 194, 143, .32);

    --nj-navy: #08152a;
    --nj-navy-2: #0c1c36;
    --nj-navy-3: #112548;

    --nj-bg: #070f1e;
    --nj-bg-grad: radial-gradient(1200px 500px at 85% -10%, rgba(16, 185, 129, .10), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(59, 130, 246, .10), transparent 60%);
    --nj-surface: #0f1a2e;
    --nj-surface-2: #0c1628;
    --nj-surface-3: #16233b;
    --nj-border: #1e2c45;
    --nj-border-strong: #2a3a57;
    --nj-text: #d7e0ec;
    --nj-heading: #f1f5f9;
    --nj-muted: #92a1b8;
    --nj-subtle: #6b7a92;

    --nj-success-soft: rgba(34, 197, 94, .16);
    --nj-danger: #fb7185;
    --nj-danger-soft: rgba(251, 113, 133, .14);
    --nj-warning: #fbbf24;
    --nj-warning-soft: rgba(251, 191, 36, .14);
    --nj-info: #38bdf8;
    --nj-info-soft: rgba(56, 189, 248, .14);
    --nj-purple: #a78bfa;
    --nj-purple-soft: rgba(167, 139, 250, .16);

    --nj-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --nj-shadow: 0 8px 28px -10px rgba(0, 0, 0, .6);
    --nj-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7);
    color-scheme: dark;
}

/* smooth switch */
html.nj-theme-anim *, html.nj-theme-anim *::before, html.nj-theme-anim *::after {
    transition: background-color .35s ease, border-color .35s ease, color .25s ease, fill .25s ease !important;
}

/* ---------- 2. Base ---------- */
html, body { font-family: var(--nj-font) !important; }
body,
body.primary-bg-color {
    background: var(--nj-bg) !important;
    background-image: var(--nj-bg-grad) !important;
    background-attachment: fixed !important;
    color: var(--nj-text);
    font-size: 14.5px;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body *:not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not([class*="fa-"]):not(code):not(pre):not(kbd) {
    font-family: inherit;
}
input, button, select, textarea, .btn, .tooltip, .popover { font-family: var(--nj-font) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--nj-heading); font-weight: 800; letter-spacing: -.2px; }
a { color: var(--nj-primary-600); transition: color .2s; }
a:hover { color: var(--nj-primary-700); text-decoration: none; }
html[data-theme="dark"] a { color: var(--nj-primary); }
html[data-theme="dark"] a:hover { color: #5eead4; }
::selection { background: var(--nj-primary); color: #fff; }
.text-muted { color: var(--nj-muted) !important; }
.text-primary { color: var(--nj-primary-600) !important; }
.bg-primary { background-color: var(--nj-primary) !important; }
hr { border-color: var(--nj-border); }
img { max-width: 100%; }
* { scrollbar-width: thin; scrollbar-color: var(--nj-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--nj-border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.nj-ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }
.nj-container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 20px; }

/* ---------- 3. Buttons ---------- */
.btn { border-radius: 12px; font-weight: 700; font-size: 14px; padding: .55rem 1.15rem; transition: all .2s var(--nj-ease); box-shadow: none; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem var(--nj-primary-ring) !important; }
.btn-lg { padding: .8rem 1.6rem; font-size: 15.5px; border-radius: 14px; }
.btn-sm { padding: .3rem .75rem; font-size: 12.5px; border-radius: 9px; }
.btn-primary, .btn-success, .btn-nj {
    background: var(--nj-grad) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: var(--nj-shadow-primary);
}
.btn-primary:hover, .btn-success:hover, .btn-nj:hover { filter: brightness(1.06) saturate(1.05); transform: translateY(-1px); color: #fff !important; }
.btn-primary:active, .btn-success:active, .btn-nj:active { transform: translateY(0); }
.btn-primary.disabled, .btn-primary:disabled, .btn-success:disabled { opacity: .6; transform: none; }
.btn-outline-primary, .btn-outline-success {
    color: var(--nj-primary-600) !important; border: 1.5px solid var(--nj-primary) !important; background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover { background: var(--nj-primary) !important; color: #fff !important; }
.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary {
    background: var(--nj-surface) !important; color: var(--nj-text) !important; border: 1px solid var(--nj-border-strong) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover { background: var(--nj-surface-3) !important; color: var(--nj-heading) !important; }
.btn-danger { background: var(--nj-danger) !important; border-color: var(--nj-danger) !important; color: #fff !important; }
.btn-warning { background: var(--nj-warning) !important; border-color: var(--nj-warning) !important; color: #1f2937 !important; }
.btn-info { background: var(--nj-info) !important; border-color: var(--nj-info) !important; color: #fff !important; }
.btn-link { color: var(--nj-primary-600) !important; font-weight: 700; }
.btn-rounded { border-radius: 999px !important; }
.btn-icon-left { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.95); align-items: center; justify-content: center; margin-inline-end: 6px; font-size: 12px; }
.nj-btn-ghost-light { background: rgba(255,255,255,.12); color: #fff !important; border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.nj-btn-ghost-light:hover { background: rgba(255,255,255,.2); }
.nj-btn-white { background: #fff !important; color: var(--nj-heading) !important; border: 1px solid var(--nj-border) !important; box-shadow: var(--nj-shadow-sm); }
html[data-theme="dark"] .nj-btn-white { background: var(--nj-surface-3) !important; color: var(--nj-heading) !important; border-color: var(--nj-border-strong) !important; }
.nj-btn-white:hover { transform: translateY(-1px); box-shadow: var(--nj-shadow); }
.nj-arrow-ico { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 11px; background: rgba(255, 255, 255, .22); margin-inline-start: 8px; }

/* ---------- 4. Forms ---------- */
.form-control, .custom-select, select.form-control, .input-group-text, textarea.form-control {
    border-radius: 12px !important;
    border: 1px solid var(--nj-border-strong);
    background-color: var(--nj-surface);
    color: var(--nj-text);
    min-height: 44px;
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}
.input-group > .form-control:not(:first-child), .input-group > .input-group-prepend > .input-group-text, .input-group > .input-group-append > .input-group-text { min-height: 44px; }
.input-group-text { background: var(--nj-surface-2); color: var(--nj-muted); }
.form-control:focus, .custom-select:focus {
    border-color: var(--nj-primary) !important;
    box-shadow: 0 0 0 4px var(--nj-primary-ring) !important;
    background-color: var(--nj-surface);
    color: var(--nj-text);
}
.form-control::placeholder { color: var(--nj-subtle); }
.form-control:disabled, .form-control[readonly] { background: var(--nj-surface-2); color: var(--nj-muted); }
label, .col-form-label { color: var(--nj-heading); font-weight: 600; font-size: 13.5px; }
.form-check-input, input[type="checkbox"], input[type="radio"] { accent-color: var(--nj-primary); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--nj-primary); border-color: var(--nj-primary); }

/* ---------- 5. Components ---------- */
.card, .panel, .nj-card {
    background: var(--nj-surface);
    border: 1px solid var(--nj-border) !important;
    border-radius: var(--nj-radius-lg) !important;
    box-shadow: var(--nj-shadow-sm);
    color: var(--nj-text);
}
.card-header, .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--nj-border) !important;
    padding: 16px 20px;
    border-radius: var(--nj-radius-lg) var(--nj-radius-lg) 0 0 !important;
}
.card-header .card-title, .card-title, .panel-title { color: var(--nj-heading); font-weight: 800; font-size: 15.5px; }
.card-footer, .panel-footer { background: var(--nj-surface-2) !important; border-top: 1px solid var(--nj-border) !important; border-radius: 0 0 var(--nj-radius-lg) var(--nj-radius-lg) !important; }
.card-body { padding: 20px; }

.list-group-item { background: transparent; border-color: var(--nj-border); color: var(--nj-text); }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--nj-surface-2); color: var(--nj-heading); }
.list-group-item.active { background: var(--nj-primary-soft) !important; border-color: transparent !important; color: var(--nj-primary-600) !important; font-weight: 700; }
html[data-theme="dark"] .list-group-item.active { color: var(--nj-primary) !important; }

.table { color: var(--nj-text); }
.table thead th, .table-list thead th {
    background: var(--nj-surface-2) !important;
    color: var(--nj-muted) !important;
    font-weight: 700; font-size: 12.5px;
    border-bottom: 1px solid var(--nj-border) !important;
    border-top: 0 !important;
    padding: 12px 14px !important;
    white-space: nowrap;
}
.table td, .table th { border-color: var(--nj-border) !important; vertical-align: middle !important; }
.table td { padding: 13px 14px !important; }
.table-hover tbody tr:hover, .table-list tbody tr:hover { background: var(--nj-surface-2) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--nj-surface-2) 70%, transparent); }
.table-container, .table-responsive { border-radius: var(--nj-radius); }
div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_length label, div.dataTables_wrapper div.dataTables_filter label { color: var(--nj-muted) !important; }

.badge { border-radius: 999px; font-weight: 700; padding: .38em .8em; font-size: 11.5px; }
.badge-primary, .badge-success { background: var(--nj-success-soft); color: var(--nj-success); }
.badge-danger { background: var(--nj-danger-soft); color: var(--nj-danger); }
.badge-warning { background: var(--nj-warning-soft); color: #b45309; }
html[data-theme="dark"] .badge-warning { color: var(--nj-warning); }
.badge-info { background: var(--nj-info-soft); color: var(--nj-info); }
.badge-secondary, .badge-light, .badge-default { background: var(--nj-surface-3); color: var(--nj-muted); }

/* WHMCS status labels */
.label, .status, span.label, .label-default {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: .32em .85em; font-size: 12px; font-weight: 700; line-height: 1.5;
}
.label::before, .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.status-active, .status-paid, .status-completed, .status-open, .status-accepted, .label-success, .status-delivered, .status-answered {
    background: var(--nj-success-soft) !important; color: var(--nj-success) !important; border: 0 !important;
}
.status-pending, .status-unpaid, .status-customer-reply, .status-in-progress, .status-draft, .label-warning, .status-onhold, .status-on-hold, .status-pending-transfer {
    background: var(--nj-warning-soft) !important; color: #b45309 !important; border: 0 !important;
}
html[data-theme="dark"] .status-pending, html[data-theme="dark"] .status-unpaid, html[data-theme="dark"] .status-customer-reply, html[data-theme="dark"] .status-in-progress, html[data-theme="dark"] .label-warning, html[data-theme="dark"] .status-onhold { color: var(--nj-warning) !important; }
.status-suspended, .status-overdue, .status-cancelled, .status-terminated, .status-fraud, .status-expired, .status-dead, .status-refunded, .status-collections, .label-danger, .status-closed, .status-transferred-away, .status-grace, .status-redemption {
    background: var(--nj-danger-soft) !important; color: var(--nj-danger) !important; border: 0 !important;
}
.status-closed { background: var(--nj-surface-3) !important; color: var(--nj-muted) !important; }
.label-info, .status-info { background: var(--nj-info-soft) !important; color: var(--nj-info) !important; }

.alert { border-radius: var(--nj-radius); border: 1px solid transparent; padding: 14px 18px; font-size: 14px; }
.alert-success { background: var(--nj-success-soft); color: var(--nj-success); border-color: rgba(22, 163, 74, .2); }
.alert-danger { background: var(--nj-danger-soft); color: var(--nj-danger); border-color: rgba(225, 29, 72, .2); }
.alert-warning { background: var(--nj-warning-soft); color: #92400e; border-color: rgba(245, 158, 11, .25); }
html[data-theme="dark"] .alert-warning { color: var(--nj-warning); }
.alert-info { background: var(--nj-info-soft); color: #0369a1; border-color: rgba(14, 165, 233, .22); }
html[data-theme="dark"] .alert-info { color: var(--nj-info); }
.alert a { font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.nav-tabs { border-bottom: 1px solid var(--nj-border); gap: 4px; }
.nav-tabs .nav-link { border: 0 !important; color: var(--nj-muted); font-weight: 700; border-radius: 10px 10px 0 0; padding: 10px 16px; position: relative; background: transparent; }
.nav-tabs .nav-link:hover { color: var(--nj-heading); background: var(--nj-surface-2); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--nj-primary-600) !important; background: transparent !important; }
.nav-tabs .nav-link.active::after { content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--nj-grad); }
.nav-pills .nav-link { border-radius: 999px; color: var(--nj-muted); font-weight: 700; }
.nav-pills .nav-link.active { background: var(--nj-grad) !important; color: #fff !important; }

.pagination .page-link { border: 1px solid var(--nj-border); background: var(--nj-surface); color: var(--nj-text); border-radius: 10px !important; margin: 0 3px; min-width: 38px; text-align: center; }
.pagination .page-item.active .page-link { background: var(--nj-grad); border-color: transparent; color: #fff; }
.pagination .page-item.disabled .page-link { background: var(--nj-surface-2); color: var(--nj-subtle); }

.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 12.5px; }
.breadcrumb-item, .breadcrumb-item a { color: var(--nj-muted); }
.breadcrumb-item.active { color: var(--nj-heading); font-weight: 700; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--nj-subtle); content: "‹"; }

.dropdown-menu {
    border: 1px solid var(--nj-border) !important; border-radius: var(--nj-radius) !important; box-shadow: var(--nj-shadow-lg) !important;
    background: var(--nj-surface); padding: 8px; text-align: right;
}
.dropdown-item { border-radius: 10px; color: var(--nj-text); font-size: 13.5px; font-weight: 600; padding: 9px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--nj-primary-soft); color: var(--nj-primary-600); }
.dropdown-divider { border-color: var(--nj-border); }

.modal-content { border: 1px solid var(--nj-border); border-radius: var(--nj-radius-lg); background: var(--nj-surface); color: var(--nj-text); box-shadow: var(--nj-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--nj-border); }
.modal-backdrop.show { opacity: .55; backdrop-filter: blur(3px); }
.close { color: var(--nj-heading); text-shadow: none; }

.progress { background: var(--nj-surface-3); border-radius: 999px; height: 8px; }
.progress-bar { background: var(--nj-grad); }

/* ---------- 6. Public header ---------- */
.nj-header { position: sticky; top: 0; z-index: 1030; }
.nj-topbar { background: var(--nj-surface); border-bottom: 1px solid var(--nj-border); font-size: 12.5px; color: var(--nj-muted); }
.nj-topbar .nj-container { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 16px; }
.nj-topbar a { color: var(--nj-muted); font-weight: 600; }
.nj-topbar a:hover { color: var(--nj-primary-600); }
.nj-topbar__group { display: flex; align-items: center; gap: 18px; }
.nj-topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.nj-topbar__item i { color: var(--nj-primary); font-size: 13px; }
.nj-topbar__sep { width: 1px; height: 14px; background: var(--nj-border-strong); }

.nj-nav { background: color-mix(in srgb, var(--nj-surface) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--nj-border); transition: box-shadow .3s; }
.nj-header.is-scrolled .nj-nav { box-shadow: 0 8px 30px -12px rgba(15, 23, 42, .18); }
.nj-nav .nj-container { display: flex; align-items: center; gap: 18px; min-height: var(--nj-header-h); }

/* logo */
.nj-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; flex-shrink: 0; }
.nj-logo__mark { width: 46px; height: 38px; filter: drop-shadow(0 6px 10px rgba(16, 185, 129, .35)); }
.nj-logo__text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; direction: ltr; }
.nj-logo__word { font-family: 'Poppins', 'Segoe UI', var(--nj-font) !important; font-size: 27px; letter-spacing: -.6px; line-height: 1; direction: ltr; }
.nj-logo__word b { color: var(--nj-heading); font-weight: 800; }
.nj-logo__word i { font-style: normal; font-weight: 800; background: var(--nj-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nj-logo__sub { font-size: 10.5px; color: var(--nj-muted); font-weight: 600; margin-top: 6px; direction: rtl; white-space: nowrap; }
.nj-logo__img { max-height: 46px; width: auto; }
.nj-logo--light .nj-logo__word b { color: #fff; }
.nj-logo--light .nj-logo__sub { color: rgba(255, 255, 255, .62); }
.nj-logo--sm .nj-logo__word { font-size: 23px; }
.nj-logo--sm .nj-logo__mark { width: 38px; height: 32px; }

/* menu */
.nj-menu { display: flex; align-items: center; gap: 4px; margin: 0 auto; padding: 0; list-style: none; }
.nj-menu > li { position: relative; }
.nj-menu > li > a {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 999px;
    color: var(--nj-text); font-weight: 700; font-size: 14px; white-space: nowrap; transition: all .2s;
}
.nj-menu > li > a .nj-caret { font-size: 10px; opacity: .6; transition: transform .25s; }
.nj-menu > li:hover > a { color: var(--nj-primary-600); background: var(--nj-primary-soft); }
html[data-theme="dark"] .nj-menu > li:hover > a { color: var(--nj-primary); }
.nj-menu > li:hover > a .nj-caret { transform: rotate(180deg); }
.nj-menu > li > a.is-active { background: var(--nj-grad); color: #fff !important; box-shadow: var(--nj-shadow-primary); }

.nj-mega {
    position: absolute; top: calc(100% + 14px); right: 50%; transform: translate(50%, 8px);
    min-width: 260px; background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-lg);
    box-shadow: var(--nj-shadow-lg); padding: 16px; opacity: 0; visibility: hidden; transition: all .25s var(--nj-ease); z-index: 50;
}
.nj-mega::before { content: ""; position: absolute; top: -16px; inset-inline: 0; height: 16px; }
.nj-mega--wide { width: 760px; }
.nj-menu > li:hover > .nj-mega, .nj-menu > li.is-open > .nj-mega { opacity: 1; visibility: visible; transform: translate(50%, 0); }
.nj-mega__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.nj-mega__title { font-size: 12px; font-weight: 800; color: var(--nj-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.nj-mega__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.nj-mega__links--2 { grid-template-columns: repeat(2, 1fr); }
.nj-mega__links--1 { grid-template-columns: 1fr; }
.nj-mega__link {
    display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; font-size: 13px; font-weight: 600;
    color: var(--nj-text) !important; background: var(--nj-surface-2); border: 1px solid transparent; transition: all .18s;
}
.nj-mega__link:hover { background: var(--nj-primary-soft); border-color: var(--nj-primary-ring); color: var(--nj-primary-600) !important; transform: translateY(-1px); }
.nj-mega__link .fi { border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, .25); flex-shrink: 0; }
.nj-mega__link i { color: var(--nj-primary); width: 18px; text-align: center; }
.nj-mega__link small { display: block; color: var(--nj-muted); font-weight: 500; font-size: 11.5px; }
.nj-offer {
    border-radius: var(--nj-radius); padding: 16px; color: #fff; height: 100%;
    background: radial-gradient(400px 200px at 0% 0%, rgba(34, 197, 94, .45), transparent 60%), linear-gradient(140deg, var(--nj-navy-2), var(--nj-navy));
    display: flex; flex-direction: column; justify-content: space-between; gap: 10px; position: relative; overflow: hidden;
}
.nj-offer__badge { display: inline-block; background: #f43f5e; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 999px; }
.nj-offer__title { font-weight: 800; font-size: 15px; margin-top: 8px; }
.nj-offer__desc { font-size: 12px; color: rgba(255, 255, 255, .72); }
.nj-offer__price { font-size: 17px; font-weight: 900; color: #6ee7b7; }
.nj-offer .btn { background: #fff !important; color: var(--nj-navy) !important; border: 0 !important; }
.nj-host-offer { background: var(--nj-surface-2); border: 1px solid var(--nj-border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; transition: .2s; }
.nj-host-offer:hover { border-color: var(--nj-primary-ring); background: var(--nj-primary-soft); }
.nj-host-offer__name { font-size: 13px; font-weight: 800; color: var(--nj-heading); display: flex; align-items: center; gap: 6px; }
.nj-host-offer__feat { font-size: 11.5px; color: var(--nj-primary-600); font-weight: 600; grid-column: 1; }
.nj-host-offer__price { font-size: 12px; font-weight: 800; color: var(--nj-heading); grid-column: 1; }
.nj-host-offer .btn { grid-row: 1 / span 3; grid-column: 2; }

.nj-nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nj-icon-btn {
    position: relative; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--nj-surface-2); color: var(--nj-heading) !important; border: 1px solid var(--nj-border); cursor: pointer; transition: all .2s; font-size: 16px;
}
.nj-icon-btn:hover { border-color: var(--nj-primary-ring); color: var(--nj-primary-600) !important; background: var(--nj-primary-soft); }
.nj-icon-btn__count { position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #f43f5e; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--nj-surface); }
.nj-cart-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px !important; padding: .6rem 1.2rem !important; }
.nj-burger { display: none; }

/* theme switcher */
.nj-theme { position: relative; }
.nj-theme__btn .nj-ico-sun, .nj-theme__btn .nj-ico-moon, .nj-theme__btn .nj-ico-auto { display: none; }
html[data-theme-mode="light"] .nj-theme__btn .nj-ico-sun,
html[data-theme-mode="dark"] .nj-theme__btn .nj-ico-moon,
html[data-theme-mode="auto"] .nj-theme__btn .nj-ico-auto { display: inline-block; }
.nj-theme__menu {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 190px; background: var(--nj-surface); border: 1px solid var(--nj-border);
    border-radius: var(--nj-radius); box-shadow: var(--nj-shadow-lg); padding: 6px; z-index: 1060; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s var(--nj-ease);
}
.nj-theme.is-open .nj-theme__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nj-theme__opt {
    display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: transparent; border-radius: 10px;
    color: var(--nj-text); font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: right;
}
.nj-theme__opt i { width: 18px; color: var(--nj-muted); }
.nj-theme__opt:hover { background: var(--nj-surface-2); }
.nj-theme__opt .nj-check { margin-inline-start: auto; color: var(--nj-primary); opacity: 0; }
html[data-theme-mode="light"] .nj-theme__opt[data-nj-set-theme="light"],
html[data-theme-mode="dark"] .nj-theme__opt[data-nj-set-theme="dark"],
html[data-theme-mode="auto"] .nj-theme__opt[data-nj-set-theme="auto"] { background: var(--nj-primary-soft); color: var(--nj-primary-600); }
html[data-theme-mode="light"] .nj-theme__opt[data-nj-set-theme="light"] .nj-check,
html[data-theme-mode="dark"] .nj-theme__opt[data-nj-set-theme="dark"] .nj-check,
html[data-theme-mode="auto"] .nj-theme__opt[data-nj-set-theme="auto"] .nj-check { opacity: 1; }
.nj-theme__opt[data-nj-set-theme] i { color: inherit; }
.nj-theme__hint { font-size: 11px; color: var(--nj-subtle); padding: 6px 12px 4px; border-top: 1px solid var(--nj-border); margin-top: 4px; }

/* mobile drawer */
.nj-drawer { position: fixed; inset: 0; z-index: 1080; visibility: hidden; overflow: hidden; contain: paint; }
.nj-drawer__overlay { position: absolute; inset: 0; background: rgba(2, 8, 23, .55); opacity: 0; transition: opacity .3s; backdrop-filter: blur(2px); }
.nj-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--nj-surface); transform: translateX(100%); transition: transform .35s var(--nj-ease); display: flex; flex-direction: column; box-shadow: var(--nj-shadow-lg); }
.nj-drawer.is-open { visibility: visible; }
.nj-drawer.is-open .nj-drawer__overlay { opacity: 1; }
.nj-drawer.is-open .nj-drawer__panel { transform: translateX(0); }
.nj-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--nj-border); }
.nj-drawer__body { overflow-y: auto; padding: 12px 14px 24px; flex: 1; }
.nj-drawer__group { border-bottom: 1px dashed var(--nj-border); padding: 6px 0; }
.nj-drawer__link, .nj-drawer__toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; border-radius: 10px; color: var(--nj-heading) !important; font-weight: 700; font-size: 14px; background: none; border: 0; text-align: right; }
.nj-drawer__link i, .nj-drawer__toggle i:first-child { color: var(--nj-primary); width: 20px; text-align: center; }
.nj-drawer__toggle .nj-caret { margin-inline-start: auto; font-size: 11px; transition: transform .25s; color: var(--nj-muted); }
.nj-drawer__toggle[aria-expanded="true"] .nj-caret { transform: rotate(180deg); }
.nj-drawer__sub { display: none; padding: 4px 8px 8px 0; }
.nj-drawer__sub.is-open { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nj-drawer__sub a { font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--nj-surface-2); color: var(--nj-text) !important; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* ---------- 7. Homepage ---------- */
.nj-section { padding: 28px 0; }
.nj-section-head { text-align: center; margin-bottom: 28px; }
.nj-section-head h2 { font-size: 26px; margin-bottom: 6px; }
.nj-section-head p { color: var(--nj-muted); margin: 0; }
.nj-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--nj-primary-600); background: var(--nj-primary-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }

.nj-hero {
    position: relative; overflow: hidden; border-radius: var(--nj-radius-xl); margin-top: 22px;
    background:
        radial-gradient(700px 360px at 18% 50%, rgba(56, 189, 248, .28), transparent 65%),
        radial-gradient(500px 300px at 95% 0%, rgba(16, 185, 129, .14), transparent 60%),
        linear-gradient(120deg, #f7fbff 0%, #e8f3ff 55%, #d9ecff 100%);
    border: 1px solid var(--nj-border);
    min-height: 430px;
}
html[data-theme="dark"] .nj-hero {
    background:
        radial-gradient(700px 360px at 18% 50%, rgba(56, 189, 248, .22), transparent 65%),
        radial-gradient(500px 300px at 95% 0%, rgba(16, 185, 129, .18), transparent 60%),
        linear-gradient(120deg, #0b1830 0%, #0a1a36 55%, #08223f 100%);
}
.nj-hero::before {
    content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image: radial-gradient(rgba(59, 130, 246, .22) 1px, transparent 1.2px); background-size: 18px 18px;
    mask-image: radial-gradient(600px 300px at 30% 40%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(600px 300px at 30% 40%, #000 0%, transparent 70%);
}
.nj-hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 12px; padding: 44px 48px; }
.nj-hero__kicker { font-size: 21px; font-weight: 800; color: var(--nj-heading); margin-bottom: 4px; }
.nj-hero__title { font-size: clamp(42px, 6vw, 72px); font-weight: 900; line-height: 1.2; margin: 0 0 14px; color: var(--nj-heading); letter-spacing: -1px; }
.nj-hero__title span { background: var(--nj-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nj-hero__desc { font-size: 17px; color: var(--nj-text); max-width: 520px; line-height: 2; margin-bottom: 26px; font-weight: 500; }
.nj-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.nj-hero__cta .btn { border-radius: 999px !important; padding: .85rem 1.7rem; }
.nj-hero__art { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.nj-hero__art img { width: 100%; max-width: 560px; filter: drop-shadow(0 30px 40px rgba(14, 116, 144, .25)); animation: nj-float 6s ease-in-out infinite; }
@keyframes nj-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.nj-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-lg); box-shadow: var(--nj-shadow-sm); margin-top: -1px; padding: 6px; position: relative; z-index: 2; margin-inline: 24px; transform: translateY(-34px); margin-bottom: -34px; }
.nj-perk { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.nj-perk + .nj-perk { border-inline-start: 1px solid var(--nj-border); }
.nj-perk__ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--nj-primary-soft); color: var(--nj-primary-600); flex-shrink: 0; }
.nj-perk b { display: block; color: var(--nj-heading); font-size: 14.5px; font-weight: 800; }
.nj-perk span { font-size: 12px; color: var(--nj-muted); }

.nj-domain { background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-lg); padding: 14px; box-shadow: var(--nj-shadow-sm); }
.nj-domain__form { display: flex; align-items: center; gap: 12px; }
.nj-domain__label { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--nj-heading); white-space: nowrap; padding-inline-start: 6px; }
.nj-domain__label i { font-size: 24px; color: #3b82f6; }
.nj-domain__field { flex: 1; display: flex; align-items: center; background: var(--nj-surface-2); border: 1px solid var(--nj-border); border-radius: 999px; padding: 5px; transition: .2s; }
.nj-domain__field:focus-within { border-color: var(--nj-primary); box-shadow: 0 0 0 4px var(--nj-primary-ring); }
.nj-domain__field input { flex: 1; border: 0; background: transparent; outline: 0; padding: 0 18px; height: 44px; color: var(--nj-text); direction: ltr; text-align: center; font-size: 15px; }
.nj-domain__field .btn { border-radius: 999px !important; padding: .65rem 2rem; }
.nj-domain__tlds { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.nj-tld { font-size: 12.5px; color: var(--nj-muted); background: var(--nj-surface-2); border: 1px solid var(--nj-border); padding: 5px 12px; border-radius: 999px; }
.nj-tld b { color: var(--nj-heading); margin-inline-end: 4px; font-weight: 800; direction: ltr; display: inline-block; }
.domain-ajax-result { display: none; margin-top: 14px; border-radius: var(--nj-radius); padding: 14px 18px; font-size: 14px; }
.domain-ajax-result.loading { background: var(--nj-surface-2); color: var(--nj-muted); border: 1px dashed var(--nj-border-strong); }
.domain-ajax-result.available { background: var(--nj-success-soft); color: var(--nj-success); border: 1px solid rgba(22, 163, 74, .25); }
.domain-ajax-result.unavailable { background: var(--nj-danger-soft); color: var(--nj-danger); border: 1px solid rgba(225, 29, 72, .25); }

.nj-services { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.nj-service {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-lg); padding: 22px 14px 18px;
    transition: all .25s var(--nj-ease); color: var(--nj-text) !important; overflow: hidden;
}
.nj-service::after { content: ""; position: absolute; inset-inline: 30%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--nj-grad); transform: scaleX(0); transition: transform .3s var(--nj-ease); }
.nj-service:hover { transform: translateY(-5px); box-shadow: var(--nj-shadow); border-color: var(--nj-primary-ring); }
.nj-service:hover::after { transform: scaleX(1); }
.nj-service__ico { width: 62px; height: 62px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 6px; background: var(--nj-grad-soft); }
.nj-service__ico i { color: #0ea5e9; --fa-primary-color: #0ea5e9; --fa-secondary-color: #10b981; --fa-secondary-opacity: .85; }
.nj-service:nth-child(2n) .nj-service__ico i { color: #10b981; --fa-primary-color: #10b981; --fa-secondary-color: #0ea5e9; }
.nj-service h3 { font-size: 15px; margin: 0; }
.nj-service p { font-size: 12.5px; color: var(--nj-muted); margin: 0; }

.nj-cta {
    position: relative; overflow: hidden; border-radius: var(--nj-radius-lg); color: #fff; padding: 26px 34px;
    background: radial-gradient(500px 220px at 0% 50%, rgba(16, 185, 129, .4), transparent 65%), linear-gradient(110deg, #082044 0%, #0b2a55 60%, #0b3a5e 100%);
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.nj-cta::before { content: ""; position: absolute; inset: 0; background: url("../img/nj-hero.svg") left -20px center / auto 150% no-repeat; opacity: .35; pointer-events: none; }
.nj-cta > * { position: relative; }
.nj-cta h3 { color: #fff; font-size: 22px; margin: 0 0 4px; }
.nj-cta p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 13.5px; }

/* offers (dark band) */
.nj-offers { position: relative; overflow: hidden; border-radius: var(--nj-radius-xl); padding: 40px 28px; color: #fff; text-align: center; background: radial-gradient(700px 300px at 100% 0%, rgba(16, 185, 129, .25), transparent 60%), linear-gradient(140deg, var(--nj-navy-2), var(--nj-navy)); }
.nj-offers h2 { color: #fff; }
.nj-offers .nj-sub { color: rgba(255, 255, 255, .65); font-size: 13.5px; }
.nj-offer-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--nj-radius-lg); padding: 22px; height: 100%; display: flex; flex-direction: column; text-align: right; transition: all .3s var(--nj-ease); }
.nj-offer-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .08); border-color: rgba(52, 211, 153, .55); }
.nj-offer-card__badge { align-self: flex-start; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; color: #fff; }
.nj-offer-card__title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.nj-offer-card__specs { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13px; color: #cbd5e1; }
.nj-offer-card__specs li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.nj-offer-card__specs i { color: #34d399; font-size: 12px; }
.nj-offer-card__price { font-size: 22px; font-weight: 900; color: #6ee7b7; margin-top: auto; }
.nj-offer-card__price small { font-size: 12px; color: #94a3b8; font-weight: 600; }
.nj-offer-card__code { display: inline-block; background: rgba(52, 211, 153, .12); color: #6ee7b7; border: 1px dashed #34d399; border-radius: 10px; padding: 4px 10px; font-size: 12px; margin: 10px 0 14px; align-self: flex-start; }

/* plan tabs */
.nj-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border: 0; margin-bottom: 26px; background: var(--nj-surface); border: 1px solid var(--nj-border); padding: 6px; border-radius: 999px; width: fit-content; margin-inline: auto; max-width: 100%; }
.nj-tabs .nav-link { border-radius: 999px !important; padding: 9px 20px !important; font-weight: 800; color: var(--nj-muted); display: inline-flex; align-items: center; gap: 8px; }
.nj-tabs .nav-link::after { display: none; }
.nj-tabs .nav-link.active { background: var(--nj-grad) !important; color: #fff !important; box-shadow: var(--nj-shadow-primary); }
.nj-plan { background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-lg); padding: 24px; height: 100%; display: flex; flex-direction: column; transition: all .25s var(--nj-ease); }
.nj-plan:hover { border-color: var(--nj-primary-ring); box-shadow: var(--nj-shadow); transform: translateY(-4px); }
.nj-plan__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nj-plan__head .fi { font-size: 30px; border-radius: 6px; box-shadow: var(--nj-shadow-sm); }
.nj-plan__head h4 { margin: 0; font-size: 16.5px; }
.nj-plan__head small { color: var(--nj-muted); }
.nj-plan ul { list-style: none; padding: 0; margin: 0 0 18px; }
.nj-plan li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 5px 0; color: var(--nj-text); }
.nj-plan li i { color: var(--nj-primary); }
.nj-plan__price { font-size: 22px; font-weight: 900; color: var(--nj-heading); margin-top: auto; margin-bottom: 14px; }
.nj-plan__price small { font-size: 12.5px; color: var(--nj-muted); font-weight: 600; }
.nj-loc { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; border-radius: var(--nj-radius); background: var(--nj-surface); border: 1px solid var(--nj-border); color: var(--nj-heading) !important; font-weight: 800; font-size: 14px; transition: all .2s; height: 100%; }
.nj-loc .fi { font-size: 34px; border-radius: 5px; box-shadow: var(--nj-shadow-sm); }
.nj-loc:hover { border-color: var(--nj-primary); box-shadow: var(--nj-shadow); transform: translateY(-3px); color: var(--nj-primary-600) !important; }

.nj-feature { background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-lg); padding: 24px; height: 100%; transition: .25s; }
.nj-feature:hover { box-shadow: var(--nj-shadow); }
.nj-feature__ico { width: 52px; height: 52px; border-radius: 14px; background: var(--nj-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; box-shadow: var(--nj-shadow-primary); }
.nj-feature h5 { font-size: 16px; }
.nj-feature p { color: var(--nj-muted); font-size: 13.5px; margin: 0; }

.nj-faq { background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-lg); padding: 18px 20px; height: 100%; }
.nj-faq__btn { width: 100%; background: none; border: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right; cursor: pointer; color: var(--nj-heading); font-weight: 800; font-size: 15px; }
.nj-faq__btn:focus { outline: 0; }
.nj-faq__q { display: flex; align-items: center; gap: 10px; }
.nj-faq__ico { width: 38px; height: 38px; border-radius: 11px; background: var(--nj-primary-soft); color: var(--nj-primary-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nj-faq__chev { width: 30px; height: 30px; border-radius: 50%; background: var(--nj-surface-2); color: var(--nj-muted); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all .3s; flex-shrink: 0; }
.nj-faq__btn[aria-expanded="true"] .nj-faq__chev { transform: rotate(180deg); background: var(--nj-primary); color: #fff; }
.nj-faq__body { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--nj-border); color: var(--nj-muted); font-size: 13.5px; line-height: 2; }

/* ---------- 8. Footer ---------- */
.nj-footer { margin-top: 48px; position: relative; overflow: hidden; color: rgba(255, 255, 255, .78); background: radial-gradient(600px 300px at 0% 100%, rgba(14, 165, 233, .18), transparent 60%), radial-gradient(600px 300px at 100% 0%, rgba(16, 185, 129, .12), transparent 60%), linear-gradient(160deg, var(--nj-navy-2), var(--nj-navy) 70%); }
.nj-footer::after { content: ""; position: absolute; left: -80px; bottom: -120px; width: 380px; height: 380px; background: url("../img/nj-globe.svg") center / contain no-repeat; opacity: .55; pointer-events: none; }
.nj-footer__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr .8fr; gap: 32px; padding: 52px 20px 34px; }
.nj-footer h4 { color: #fff; font-size: 15.5px; margin-bottom: 16px; position: relative; padding-bottom: 10px; }
.nj-footer h4::after { content: ""; position: absolute; right: 0; bottom: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--nj-grad); }
.nj-footer p { font-size: 13.5px; line-height: 2.1; color: rgba(255, 255, 255, .66); margin: 16px 0; }
.nj-footer ul { list-style: none; padding: 0; margin: 0; }
.nj-footer li { margin-bottom: 9px; }
.nj-footer a { color: rgba(255, 255, 255, .72); font-size: 13.5px; }
.nj-footer a:hover { color: #6ee7b7; }
.nj-footer__contact li { display: flex; align-items: center; gap: 10px; }
.nj-footer__contact i { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .07); display: inline-flex; align-items: center; justify-content: center; color: #6ee7b7; flex-shrink: 0; }
.nj-social { display: flex; gap: 8px; }
.nj-social a { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .1); transition: .2s; }
.nj-social a:hover { background: var(--nj-grad); border-color: transparent; color: #fff; transform: translateY(-2px); }
.nj-footer__trust { background: #fff; border-radius: 14px; padding: 8px; display: inline-block; }
.nj-footer__trust img { width: 100px; height: auto; display: block; }
.nj-footer__bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .08); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, .5); }

/* ---------- 9. Client area shell ---------- */
.nj-app { display: flex; min-height: 100vh; }
.nj-side {
    position: sticky; top: 0; height: 100vh; width: var(--nj-side-w); flex-shrink: 0; display: flex; flex-direction: column;
    background: radial-gradient(300px 260px at 100% 0%, rgba(16, 185, 129, .16), transparent 60%), linear-gradient(180deg, var(--nj-navy-2) 0%, var(--nj-navy) 100%);
    color: rgba(255, 255, 255, .8); z-index: 1040; overflow: hidden;
}
.nj-side__brand { padding: 22px 22px 18px; display: flex; align-items: center; justify-content: space-between; }
.nj-side__close { display: none; color: #fff; background: rgba(255, 255, 255, .08); border: 0; width: 36px; height: 36px; border-radius: 10px; }
.nj-side__nav { flex: 1; overflow-y: auto; padding: 6px 14px; scrollbar-color: rgba(255,255,255,.15) transparent; }
.nj-side__label { font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, .38); padding: 14px 12px 6px; letter-spacing: .3px; }
.nj-side__link {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-bottom: 4px; border-radius: 12px; color: rgba(255, 255, 255, .78) !important;
    font-weight: 700; font-size: 14px; transition: all .2s; position: relative;
}
.nj-side__link i { width: 20px; text-align: center; font-size: 16px; opacity: .85; }
.nj-side__link:hover { background: rgba(255, 255, 255, .06); color: #fff !important; }
.nj-side__link.is-active { background: var(--nj-grad); color: #fff !important; box-shadow: 0 10px 22px -10px rgba(16, 185, 129, .8); }
.nj-side__link.is-active i { opacity: 1; }
.nj-side__link .nj-pill { margin-inline-start: auto; background: rgba(255, 255, 255, .14); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.nj-side__link.is-active .nj-pill { background: rgba(255, 255, 255, .28); }
.nj-side__contact {
    margin: 14px; padding: 18px; border-radius: 16px; position: relative; overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .08);
}
.nj-side__contact::after { content: ""; position: absolute; left: -20px; right: -20px; bottom: -36px; height: 70px; background: radial-gradient(closest-side, rgba(16, 185, 129, .55), transparent); filter: blur(8px); }
.nj-side__contact h6 { color: #fff; font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.nj-side__contact h6 i { font-size: 22px; color: #6ee7b7; }
.nj-side__contact a { display: block; color: #fff !important; font-weight: 800; font-size: 15px; direction: ltr; text-align: right; }
.nj-side__contact span { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); direction: ltr; text-align: right; }

.nj-app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nj-app__top {
    position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 14px; padding: 14px 28px;
    background: color-mix(in srgb, var(--nj-surface) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--nj-border);
}
.nj-hello { display: flex; align-items: center; gap: 12px; }
.nj-avatar { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #334155, #0f172a); color: #fff; font-weight: 800; font-size: 17px; box-shadow: 0 0 0 3px var(--nj-surface), 0 0 0 5px var(--nj-primary-ring); flex-shrink: 0; }
.nj-hello b { display: block; color: var(--nj-heading); font-size: 16px; font-weight: 800; }
.nj-hello small { color: var(--nj-muted); font-size: 12px; }
.nj-app__top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.nj-app__burger { display: none; }
.nj-app__body { padding: 26px 28px 10px; flex: 1; }
.nj-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.nj-page-head h1 { font-size: 26px; margin: 0; }
.nj-app__foot { padding: 16px 28px 22px; color: var(--nj-subtle); font-size: 12.5px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nj-app #main-body { padding: 0 !important; background: transparent !important; }
.nj-app #main-body > .container { max-width: none; padding: 0; }
.nj-alerts { position: relative; }
.nj-alerts__menu { position: absolute; top: calc(100% + 10px); left: 0; width: 330px; max-width: 86vw; background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius); box-shadow: var(--nj-shadow-lg); padding: 8px; z-index: 1060; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s; }
.nj-alerts.is-open .nj-alerts__menu { opacity: 1; visibility: visible; transform: none; }
.nj-alerts__item { display: flex; gap: 10px; padding: 10px; border-radius: 10px; font-size: 13px; color: var(--nj-text) !important; }
.nj-alerts__item:hover { background: var(--nj-surface-2); }
.nj-alerts__item i { margin-top: 4px; }
.nj-alerts__empty { padding: 18px; text-align: center; color: var(--nj-muted); font-size: 13px; }

/* WHMCS context sidebar inside shell / public pages */
.sidebar .card-sidebar, .card-sidebar { border-radius: var(--nj-radius-lg) !important; overflow: hidden; }
.card-sidebar .card-header { padding: 14px 16px; }
.card-sidebar .card-title { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.card-sidebar .card-title i:first-child { color: var(--nj-primary); }
.card-sidebar .card-minimise { margin-inline-start: auto; color: var(--nj-subtle); cursor: pointer; font-size: 12px; }
.card-sidebar .list-group-item { border: 0; padding: 10px 16px; font-size: 13.5px; font-weight: 600; }
.card-sidebar .list-group-item + .list-group-item { border-top: 1px solid var(--nj-border); }
.sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; }
.sidebar-menu-item-icon { color: var(--nj-muted); }
.list-group-item.active .sidebar-menu-item-icon { color: inherit; }
.sidebar-menu-item-badge { margin-inline-start: auto; }

/* ---------- 10. Dashboard ---------- */
.nj-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.nj-stat {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: var(--nj-radius-lg);
    background: var(--nj-surface); border: 1px solid var(--nj-border); color: var(--nj-text) !important; transition: all .25s var(--nj-ease);
}
.nj-stat:hover { transform: translateY(-3px); box-shadow: var(--nj-shadow); }
.nj-stat__top { display: flex; align-items: center; justify-content: space-between; }
.nj-stat__label { font-weight: 800; color: var(--nj-heading); font-size: 14px; }
.nj-stat__ico { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.nj-stat__value { font-size: 30px; font-weight: 900; color: var(--nj-heading); line-height: 1.3; }
.nj-stat__value small { font-size: 13px; color: var(--nj-muted); font-weight: 600; }
.nj-stat__link { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.nj-stat::before { content: ""; position: absolute; inset: auto -40px -60px auto; width: 140px; height: 140px; border-radius: 50%; opacity: .5; }
.nj-tone-green .nj-stat__ico { background: var(--nj-success-soft); color: var(--nj-success); } .nj-tone-green .nj-stat__link { color: var(--nj-success); } .nj-tone-green::before { background: radial-gradient(closest-side, var(--nj-success-soft), transparent); }
.nj-tone-purple .nj-stat__ico { background: var(--nj-purple-soft); color: var(--nj-purple); } .nj-tone-purple .nj-stat__link { color: var(--nj-purple); } .nj-tone-purple::before { background: radial-gradient(closest-side, var(--nj-purple-soft), transparent); }
.nj-tone-blue .nj-stat__ico { background: var(--nj-info-soft); color: var(--nj-info); } .nj-tone-blue .nj-stat__link { color: var(--nj-info); } .nj-tone-blue::before { background: radial-gradient(closest-side, var(--nj-info-soft), transparent); }
.nj-tone-amber .nj-stat__ico { background: var(--nj-warning-soft); color: var(--nj-warning); } .nj-tone-amber .nj-stat__link { color: #d97706; } .nj-tone-amber::before { background: radial-gradient(closest-side, var(--nj-warning-soft), transparent); }

.nj-dash-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-bottom: 18px; }
.nj-panel { background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: var(--nj-radius-lg); box-shadow: var(--nj-shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.nj-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--nj-border); }
.nj-panel__head h3 { font-size: 15.5px; margin: 0; display: flex; align-items: center; gap: 8px; }
.nj-panel__head h3 i { color: var(--nj-primary); }
.nj-panel__head a { font-size: 12.5px; font-weight: 700; }
.nj-panel__body { padding: 16px 20px; flex: 1; }
.nj-panel__foot { padding: 12px 20px; border-top: 1px solid var(--nj-border); text-align: center; font-size: 13px; font-weight: 700; }
.nj-row-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.nj-row-item + .nj-row-item { border-top: 1px dashed var(--nj-border); }
.nj-row-item__ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--nj-surface-2); color: var(--nj-primary-600); flex-shrink: 0; }
.nj-row-item__main { flex: 1; min-width: 0; }
.nj-row-item__main b { display: block; color: var(--nj-heading); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nj-row-item__main small { color: var(--nj-muted); font-size: 12px; }
.nj-empty { text-align: center; padding: 26px 10px; color: var(--nj-muted); font-size: 13.5px; }
.nj-empty i { font-size: 34px; color: var(--nj-border-strong); display: block; margin-bottom: 8px; }

.nj-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.nj-ring { position: relative; width: 100%; max-width: 110px; margin: 0 auto; aspect-ratio: 1; }
.nj-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nj-ring circle { fill: none; stroke-width: 9; }
.nj-ring .nj-ring__bg { stroke: var(--nj-surface-3); }
.nj-ring .nj-ring__fg { stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--nj-ease); }
.nj-ring__val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; font-weight: 900; color: var(--nj-heading); font-size: 20px; line-height: 1.1; }
.nj-ring__val small { font-size: 11px; font-weight: 600; color: var(--nj-muted); }
.nj-ring-label { margin-top: 8px; font-weight: 800; font-size: 13px; color: var(--nj-heading); }
.nj-spark { margin-top: 14px; height: 70px; }
.nj-spark svg { width: 100%; height: 100%; }

.nj-promo { position: relative; overflow: hidden; border-radius: var(--nj-radius-lg); padding: 26px; display: flex; align-items: center; gap: 18px; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--nj-border); background: radial-gradient(500px 200px at 0% 100%, rgba(16, 185, 129, .25), transparent 60%), linear-gradient(120deg, var(--nj-surface) 30%, color-mix(in srgb, var(--nj-primary) 14%, var(--nj-surface))); }
.nj-promo h3 { font-size: 19px; margin-bottom: 4px; }
.nj-promo p { margin: 0; color: var(--nj-muted); font-size: 13.5px; }
.nj-promo__ico { width: 64px; height: 64px; border-radius: 18px; background: var(--nj-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: var(--nj-shadow-primary); transform: rotate(-8deg); }
.nj-credit { background: linear-gradient(140deg, var(--nj-navy-2), var(--nj-navy)); color: #fff; border-radius: var(--nj-radius-lg); padding: 22px; position: relative; overflow: hidden; }
.nj-credit::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; left: -50px; top: -60px; background: radial-gradient(closest-side, rgba(16, 185, 129, .5), transparent); }
.nj-credit small { color: rgba(255, 255, 255, .6); }
.nj-credit b { display: block; font-size: 24px; font-weight: 900; margin: 4px 0 12px; position: relative; z-index: 1; }
.nj-credit .btn { position: relative; z-index: 1; }

.nj-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nj-quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; background: var(--nj-surface-2); border: 1px solid var(--nj-border); color: var(--nj-heading) !important; font-size: 12.5px; font-weight: 700; text-align: center; transition: .2s; }
.nj-quick a i { font-size: 20px; color: var(--nj-primary); }
.nj-quick a:hover { border-color: var(--nj-primary-ring); background: var(--nj-primary-soft); transform: translateY(-2px); }

/* Legacy WHMCS homepage panels restyle */
.client-home-panels .card, .client-home-cards .card { height: calc(100% - 18px); margin-bottom: 18px; }
.client-home-panels .card .card-header { display: flex; align-items: center; justify-content: space-between; }
.client-home-panels .card .card-header .btn { padding: .25rem .7rem; font-size: 12px; }

/* ---------- 11. Misc WHMCS pages ---------- */
#main-body { padding: 26px 0 10px; background: transparent !important; }
.primary-content > .card, .primary-content .card { margin-bottom: 20px; }
.header-lined h1, .header-lined .h1 { font-size: 24px; font-weight: 900; color: var(--nj-heading); }
.ticket-reply, .ticket-reply .posted-by, .ticket-reply .message { border-color: var(--nj-border) !important; }
.ticket-reply { border-radius: var(--nj-radius) !important; overflow: hidden; background: var(--nj-surface); border: 1px solid var(--nj-border); margin-bottom: 14px; }
.ticket-reply.staff { border-inline-start: 4px solid var(--nj-primary) !important; }
.ticket-reply .posted-by { background: var(--nj-surface-2) !important; color: var(--nj-muted); }
.kb-category, .kb-article-item, .announcement-single { border-radius: var(--nj-radius); }
.btn-return-to-admin { position: fixed; bottom: 20px; left: 20px; z-index: 1100; background: #f43f5e; color: #fff !important; border-radius: 999px; box-shadow: var(--nj-shadow-lg); }
#fullpage-overlay { background: rgba(2, 8, 23, .6) !important; backdrop-filter: blur(3px); }
.w-hidden { display: none; }
.bootstrap-switch { border-radius: 999px !important; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--nj-primary) !important; }
.fi { border-radius: 3px; }

/* reveal on scroll */
.nj-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--nj-ease), transform .7s var(--nj-ease); }
.nj-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nj-reveal { opacity: 1; transform: none; } .nj-hero__art img { animation: none; } * { scroll-behavior: auto !important; } }

/* ---------- 12. Responsive ---------- */
@media (max-width: 1399.98px) {
    .nj-menu > li > a { padding: 9px 11px; font-size: 13.5px; }
}
@media (max-width: 1199.98px) {
    .nj-menu, .nj-nav__actions .nj-hide-md { display: none !important; }
    .nj-burger { display: inline-flex; }
    .nj-nav__actions { margin-inline-start: auto; }
    .nj-services { grid-template-columns: repeat(3, 1fr); }
    .nj-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
    .nj-footer__about { grid-column: 1 / -1; }
    .nj-stats { grid-template-columns: repeat(2, 1fr); }
    .nj-side { position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform .35s var(--nj-ease); box-shadow: var(--nj-shadow-lg); }
    .nj-app.is-side-open .nj-side { transform: none; }
    .nj-side__close, .nj-app__burger { display: inline-flex; align-items: center; justify-content: center; }
    .nj-side-overlay { position: fixed; inset: 0; background: rgba(2, 8, 23, .5); z-index: 1035; opacity: 0; visibility: hidden; transition: .3s; }
    .nj-app.is-side-open .nj-side-overlay { opacity: 1; visibility: visible; }
}
@media (max-width: 991.98px) {
    .nj-hero__grid { grid-template-columns: 1fr; padding: 34px 26px 60px; text-align: center; }
    .nj-hero__desc { margin-inline: auto; }
    .nj-hero__cta { justify-content: center; }
    .nj-hero__art { min-height: 0; order: -1; }
    .nj-hero__art img { max-width: 380px; }
    .nj-perks { grid-template-columns: repeat(2, 1fr); margin-inline: 12px; }
    .nj-perk:nth-child(3) { border-inline-start: 0; }
    .nj-perk:nth-child(n+3) { border-top: 1px solid var(--nj-border); }
    .nj-domain__form { flex-direction: column; align-items: stretch; }
    .nj-domain__label { justify-content: center; }
    .nj-dash-grid { grid-template-columns: 1fr; }
    .nj-mega--wide { width: 92vw; }
    .nj-topbar .nj-hide-sm { display: none !important; }
}
@media (max-width: 767.98px) {
    body { font-size: 14px; }
    .nj-container { padding-inline: 14px; }
    .nj-services { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .nj-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .nj-cta { padding: 22px; text-align: center; justify-content: center; }
    .nj-app__top { padding: 12px 14px; }
    .nj-app__body { padding: 18px 14px 6px; }
    .nj-hello small { display: none; }
    .nj-app__top-actions .nj-hide-xs { display: none !important; }
    .nj-quick { grid-template-columns: repeat(2, 1fr); }
    .nj-logo__sub { display: none; }
    .nj-logo__word { font-size: 23px; }
    .nj-cart-btn span { display: none; }
    .nj-cart-btn { padding: .55rem .8rem !important; }
    .nj-tabs { border-radius: var(--nj-radius); }
}
@media (max-width: 479.98px) {
    .nj-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .nj-stat { padding: 14px; }
    .nj-stat__value { font-size: 24px; }
    .nj-stat__ico { width: 40px; height: 40px; font-size: 18px; }
    .nj-perks { grid-template-columns: 1fr; }
    .nj-perk + .nj-perk { border-inline-start: 0; border-top: 1px solid var(--nj-border); }
    .nj-footer__grid { grid-template-columns: 1fr; }
}

/* dashboard list items (WHMCS panels) */
.nj-li { display: flex !important; align-items: center; gap: 10px; padding: 12px 20px !important; font-size: 13.5px; }
.nj-li > i { color: var(--nj-primary); width: 18px; text-align: center; }
.nj-li__label { flex: 1; min-width: 0; }
.nj-li .label, .nj-li .status { font-size: 11px; }
.nj-li .badge { margin-inline-start: auto; }
.nj-panel .list-group-item:first-child { border-top: 0; }
.nj-panel .nj-panel__body .alert { margin-bottom: 0; }
.nj-panel__foot a, .nj-panel__foot .btn { font-size: 12.5px; }

/* ---------- 13. Auth pages (login / register) ---------- */
body.nj-body--bare #main-body { padding: 0 !important; }
.nj-auth-top { position: fixed; top: 0; inset-inline: 0; z-index: 1050; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; pointer-events: none; }
.nj-auth-top > * { pointer-events: auto; }
.nj-auth-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--nj-muted) !important; background: var(--nj-surface); border: 1px solid var(--nj-border); padding: 8px 14px; border-radius: 999px; box-shadow: var(--nj-shadow-sm); }
.nj-auth-back:hover { color: var(--nj-primary-600) !important; }
.nj-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 76px 16px 24px; }
.nj-auth__card { width: 100%; max-width: 1060px; display: grid; grid-template-columns: 1fr 1fr; background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: 28px; overflow: hidden; box-shadow: var(--nj-shadow-lg); }
.nj-auth__form { padding: 40px 42px; }
.nj-auth__logo { display: flex; justify-content: center; margin-bottom: 18px; }
.nj-auth__title { font-size: 24px; text-align: center; margin-bottom: 6px; }
.nj-auth__sub { text-align: center; color: var(--nj-muted); font-size: 13.5px; margin-bottom: 24px; }
.nj-auth__options { display: flex; flex-direction: column; gap: 12px; }
.nj-auth__opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--nj-border); background: var(--nj-surface-2); text-align: right; color: var(--nj-text) !important; cursor: pointer; transition: all .2s var(--nj-ease); }
.nj-auth__opt:hover { border-color: var(--nj-primary-ring); background: var(--nj-primary-soft); transform: translateX(-3px); }
.nj-auth__opt-ico { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.nj-auth__opt-text { flex: 1; display: flex; flex-direction: column; }
.nj-auth__opt-text b { color: var(--nj-heading); font-size: 14.5px; }
.nj-auth__opt-text small { color: var(--nj-muted); font-size: 12px; }
.nj-auth__opt-arrow { color: var(--nj-subtle); font-size: 12px; }
.nj-auth__back-btn { background: none; border: 0; color: var(--nj-muted); font-weight: 700; font-size: 13px; padding: 0; margin-bottom: 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nj-auth__back-btn:hover { color: var(--nj-primary-600); }
.nj-auth__field { position: relative; display: flex; align-items: center; }
.nj-auth__field > i { position: absolute; right: 14px; color: var(--nj-subtle); pointer-events: none; z-index: 1; }
.nj-auth__field .form-control { padding-right: 42px; padding-left: 42px; height: 50px; border-radius: 14px !important; }
.nj-auth__eye { position: absolute; left: 8px; background: none; border: 0; color: var(--nj-muted); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; }
.nj-auth__eye:hover { background: var(--nj-surface-3); }
.nj-auth__check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--nj-muted); margin: 4px 0 16px; cursor: pointer; }
.nj-auth__register { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--nj-border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--nj-muted); font-size: 13.5px; }
.nj-auth__brand { position: relative; overflow: hidden; color: #fff; display: flex; align-items: center; padding: 40px;
    background: radial-gradient(420px 300px at 0% 0%, rgba(16,185,129,.4), transparent 60%), radial-gradient(420px 300px at 100% 100%, rgba(14,165,233,.3), transparent 60%), linear-gradient(160deg, var(--nj-navy-2), var(--nj-navy)); }
.nj-auth__brand-inner { position: relative; width: 100%; }
.nj-auth__brand h2 { color: #fff; font-size: 26px; margin-bottom: 6px; }
.nj-auth__brand p { color: rgba(255,255,255,.7); margin-bottom: 8px; }
.nj-auth__art { width: 100%; max-width: 380px; display: block; margin: 6px auto 10px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.nj-auth__feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.nj-auth__feats li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.nj-auth__feats i { width: 40px; height: 40px; border-radius: 12px; background: rgba(52,211,153,.15); color: #6ee7b7; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.nj-auth__feats b { display: block; font-size: 14px; }
.nj-auth__feats small { color: rgba(255,255,255,.62); font-size: 12px; }
.nj-auth__copy { margin-top: 18px; color: var(--nj-subtle); font-size: 12.5px; }
@media (max-width: 991.98px) {
    .nj-auth__card { grid-template-columns: 1fr; max-width: 520px; }
    .nj-auth__brand { display: none; }
    .nj-auth__form { padding: 30px 22px; }
}

/* ---------- 14. Legacy resets (Apadana) ---------- */
b, strong { color: inherit; font-weight: 800; }
.container-fluid { border: 0 !important; }
section#main-body { background-color: transparent !important; direction: rtl; }
.nj-credit b { color: #fff; }
.nj-credit strong { color: #6ee7b7; }
.nj-topbar i, .card-header .card-title i, .card-header .panel-title i, .panel-heading .panel-title i, .nj-side__link i { background: transparent !important; box-shadow: none !important; }
.card-sidebar .card-title i, #order-standard_cart .cart-sidebar h3 i { border-radius: 0 !important; padding: 0 !important; }
body.nj-body--bare { overflow-x: hidden; }
body.nj-body--bare #main-body .row { margin: 0; }
body.nj-body--bare #main-body .primary-content { padding: 0; }
@media (max-width: 575.98px) {
    .nj-domain__field .btn { padding: .55rem 1rem !important; white-space: nowrap; font-size: 13px; }
    .nj-domain__field input { padding: 0 10px; font-size: 14px; }
    .nj-perks { grid-template-columns: 1fr 1fr; }
    .nj-perk { padding: 12px; gap: 8px; }
    .nj-perk:nth-child(odd) { border-inline-start: 0; }
    .nj-perk:nth-child(n+3) { border-top: 1px solid var(--nj-border); }
}
table.table-list, .table-list { border-collapse: collapse !important; border-spacing: 0 !important; background: transparent !important; width: 100% !important; }
.table-list > tbody > tr > td, .table-list > thead > tr > th { border: 0 !important; border-bottom: 1px solid var(--nj-border) !important; background: transparent !important; }
.table-list > tbody > tr:hover > td { background: var(--nj-surface-2) !important; }
.table-list > tbody > tr > td a { font-weight: 700; }
.dataTables_wrapper .dataTables_filter input { border-radius: 999px !important; border: 1px solid var(--nj-border-strong) !important; background: var(--nj-surface) !important; color: var(--nj-text) !important; padding: 6px 14px !important; }
.table-list > tbody > tr > td { color: var(--nj-text) !important; } .table-list > tbody > tr > td strong, .table-list > tbody > tr > td b { color: var(--nj-heading); }

/* ==========================================================================
   15. Mega menu v2 (desktop)
   ========================================================================== */
.nj-nav .nj-container { position: relative; }
.nj-menu > li.nj-has-mega { position: static; }
.nj-menu > li > a > i.fad { font-size: 15px; color: var(--nj-primary); opacity: .9; --fa-secondary-opacity: .45; }
.nj-menu > li > a.is-active > i.fad { color: #fff; }
.nj-mega2 {
    position: absolute; top: calc(100% - 6px); inset-inline: 20px; z-index: 60;
    display: grid; grid-template-columns: 270px 1fr 250px; gap: 0;
    background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(15,23,42,.35);
    overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s var(--nj-ease), transform .22s var(--nj-ease), visibility .22s;
}
.nj-mega2::before { content: ""; position: absolute; top: -20px; inset-inline: 0; height: 20px; }
.nj-menu > li:hover > .nj-mega2, .nj-menu > li:focus-within > .nj-mega2, .nj-menu > li.is-open > .nj-mega2 { opacity: 1; visibility: visible; transform: none; }
.nj-mega2--cards { grid-template-columns: 1fr 280px; }
.nj-mega2--narrow { grid-template-columns: 1fr 1fr; inset-inline: auto; left: 50%; width: 720px; transform: translate(-50%, 10px); }
.nj-menu > li:hover > .nj-mega2--narrow, .nj-menu > li:focus-within > .nj-mega2--narrow, .nj-menu > li.is-open > .nj-mega2--narrow { transform: translate(-50%, 0); }

.nj-mega2__rail { background: var(--nj-surface-2); border-inline-end: 1px solid var(--nj-border); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.nj-mega2__tab { display: flex; align-items: center; gap: 12px; width: 100%; text-align: right; background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 11px 12px; cursor: pointer; color: var(--nj-text); transition: all .18s; }
.nj-mega2__tab b { display: block; font-size: 14px; color: var(--nj-heading); font-weight: 800; }
.nj-mega2__tab small { display: block; font-size: 11.5px; color: var(--nj-muted); margin-top: 2px; }
.nj-mega2__tab-ico { --c: var(--nj-primary); width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.nj-mega2__tab:hover, .nj-mega2__tab.is-active { background: var(--nj-surface); border-color: var(--nj-border); box-shadow: var(--nj-shadow-sm); }
.nj-mega2__tab.is-active .nj-mega2__tab-ico { background: var(--c); color: #fff; --fa-primary-color: #fff; --fa-secondary-color: #fff; }
.nj-mega2__all { margin-top: auto; padding: 10px 12px; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; }
.nj-mega2__all:hover { background: var(--nj-primary-soft); }
.nj-mega2__panes { padding: 18px 20px; min-height: 320px; }
.nj-mega2__pane { display: none; animation: njFade .25s var(--nj-ease); }
.nj-mega2__pane.is-active { display: block; }
@keyframes njFade { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.nj-mega2__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.nj-mega2__head h4 { margin: 0; font-size: 15px; font-weight: 900; color: var(--nj-heading); }
.nj-mega2__head span { font-size: 12px; color: var(--nj-muted); }
.nj-mega2__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.nj-mega2__grid--3 { grid-template-columns: repeat(3, 1fr); }
.nj-mega2__grid--1 { grid-template-columns: 1fr; }
.nj-mi { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--nj-border); background: var(--nj-surface); color: var(--nj-text) !important; transition: all .18s; min-width: 0; }
.nj-mi + .nj-mi { margin-top: 0; }
.nj-mega2__side .nj-mi, .nj-mega2__col .nj-mi { margin-bottom: 8px; }
.nj-mi:hover { border-color: var(--nj-primary-ring); background: var(--nj-primary-soft); transform: translateY(-1px); }
.nj-mi__flag { width: 30px !important; height: 22px; border-radius: 5px; background-size: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08), var(--nj-shadow-sm); flex-shrink: 0; }
.nj-mi__ico { --c: var(--nj-primary); width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.nj-mi__txt { flex: 1; min-width: 0; }
.nj-mi__txt b { display: block; font-size: 13.5px; font-weight: 800; color: var(--nj-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nj-mi__txt small { display: block; font-size: 11px; color: var(--nj-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nj-mi__go { font-size: 10px; color: var(--nj-subtle); opacity: 0; transform: translateX(4px); transition: .18s; }
.nj-mi:hover .nj-mi__go { opacity: 1; transform: none; color: var(--nj-primary); }
.nj-mi--lg { padding: 14px; }
.nj-mi--lg .nj-mi__flag { width: 40px !important; height: 30px; }
.nj-mega2__promo { position: relative; overflow: hidden; margin: 12px; border-radius: 18px; padding: 18px; color: #fff; display: flex; flex-direction: column; gap: 6px;
    background: radial-gradient(300px 200px at 0% 0%, rgba(34,197,94,.45), transparent 60%), linear-gradient(160deg, var(--nj-navy-2), var(--nj-navy)); }
.nj-mega2__promo-badge { align-self: flex-start; background: #f43f5e; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.nj-mega2__promo-ico { position: absolute; left: 14px; top: 14px; font-size: 34px; color: #6ee7b7; opacity: .9; --fa-secondary-opacity: .5; }
.nj-mega2__promo b { font-size: 15.5px; margin-top: 8px; }
.nj-mega2__promo ul { list-style: none; padding: 0; margin: 4px 0; font-size: 12.5px; color: rgba(255,255,255,.78); }
.nj-mega2__promo li { padding: 3px 0; display: flex; gap: 8px; align-items: center; }
.nj-mega2__promo li i { color: #34d399; font-size: 11px; }
.nj-mega2__promo-price { margin-top: auto; font-size: 20px; font-weight: 900; color: #6ee7b7; }
.nj-mega2__promo-price small { display: block; font-size: 11px; color: rgba(255,255,255,.6); font-weight: 600; }
.nj-mega2__promo-price em { font-style: normal; font-size: 12px; color: rgba(255,255,255,.7); }
.nj-mega2__promo .btn { margin-top: 8px; border-radius: 12px !important; }
.nj-mega2__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px; }
.nj-hcard { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--nj-border); background: linear-gradient(170deg, var(--nj-surface-2), var(--nj-surface)); color: var(--nj-text) !important; transition: all .2s; }
.nj-hcard:hover { border-color: var(--nj-primary); box-shadow: var(--nj-shadow); transform: translateY(-3px); }
.nj-hcard__top { display: flex; align-items: center; gap: 10px; }
.nj-hcard__top .fi { width: 34px; height: 25px; border-radius: 6px; background-size: cover; box-shadow: var(--nj-shadow-sm); }
.nj-hcard__top b { font-size: 14px; font-weight: 900; color: var(--nj-heading); }
.nj-hcard ul { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.nj-hcard li { padding: 3px 0; display: flex; gap: 6px; align-items: center; }
.nj-hcard li i { color: var(--nj-primary); font-size: 11px; }
.nj-hcard__price { font-weight: 900; color: var(--nj-heading); font-size: 13.5px; margin-top: auto; }
.nj-hcard__cta { font-size: 12.5px; font-weight: 800; color: var(--nj-primary-600); display: flex; align-items: center; gap: 6px; }
.nj-mega2__side { background: var(--nj-surface-2); border-inline-start: 1px solid var(--nj-border); padding: 18px; }
.nj-mega2__col { padding: 18px; }
.nj-mega2__col + .nj-mega2__col { border-inline-start: 1px solid var(--nj-border); background: var(--nj-surface-2); }
.nj-mega2__col--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-content: start; }
.nj-mega2__search { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--nj-border-strong); border-radius: 14px; background: var(--nj-surface); margin-bottom: 12px; }
.nj-mega2__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 10px; color: var(--nj-text); height: 36px; }
.nj-mega2__search .btn { border-radius: 10px !important; padding: 0 14px !important; }
.nj-tile-link { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; border: 1px solid var(--nj-border); background: var(--nj-surface); color: var(--nj-text) !important; transition: .18s; }
.nj-tile-link i { font-size: 20px; color: var(--nj-primary); margin-bottom: 4px; }
.nj-tile-link b { font-size: 13.5px; color: var(--nj-heading); }
.nj-tile-link small { font-size: 11.5px; color: var(--nj-muted); }
.nj-tile-link:hover { border-color: var(--nj-primary-ring); background: var(--nj-primary-soft); }
.nj-mega2__contact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px; background: radial-gradient(260px 200px at 50% 0%, var(--nj-primary-soft), transparent 70%), var(--nj-surface-2); border-inline-start: 1px solid var(--nj-border); }
.nj-mega2__contact > i { font-size: 38px; color: var(--nj-primary); }
.nj-mega2__contact b { font-size: 15px; color: var(--nj-heading); }
.nj-mega2__contact a { font-weight: 800; }
.nj-cart-btn__count { background: #fff; color: #047857; border-radius: 999px; font-size: 11px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.nj-show-mobile { display: none !important; }

/* ==========================================================================
   16. App-style mobile navigation
   ========================================================================== */
.nj-tabbar { display: none; }
.nj-sheet { position: fixed; inset: 0; z-index: 1090; visibility: hidden; contain: paint; }
.nj-sheet__overlay { position: absolute; inset: 0; background: rgba(2, 8, 23, .55); opacity: 0; transition: opacity .3s; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.nj-sheet__panel { position: absolute; inset-inline: 0; bottom: 0; max-height: 86vh; display: flex; flex-direction: column; background: var(--nj-surface); border-radius: 26px 26px 0 0; box-shadow: 0 -20px 50px -10px rgba(0,0,0,.35); transform: translateY(105%); transition: transform .38s cubic-bezier(.2,.9,.25,1); padding-bottom: env(safe-area-inset-bottom); }
.nj-sheet.is-open { visibility: visible; }
.nj-sheet.is-open .nj-sheet__overlay { opacity: 1; }
.nj-sheet.is-open .nj-sheet__panel { transform: translateY(0); }
.nj-sheet.is-dragging .nj-sheet__panel { transition: none; }
.nj-sheet__grab { padding: 10px 0 4px; display: flex; justify-content: center; touch-action: none; cursor: grab; }
.nj-sheet__grab span { width: 42px; height: 5px; border-radius: 99px; background: var(--nj-border-strong); }
.nj-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 18px 12px; touch-action: none; }
.nj-sheet__head h3 { margin: 0; font-size: 18px; }
.nj-sheet__head .nj-icon-btn { width: 36px; height: 36px; border-radius: 50%; }
.nj-sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 16px 18px; }
.nj-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; padding: 6px 0 14px; }
.nj-app-tile { --c: var(--nj-primary); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; font-size: 12px; font-weight: 700; color: var(--nj-text) !important; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.nj-app-tile > span { position: relative; width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--nj-surface)); border: 1px solid color-mix(in srgb, var(--c) 20%, transparent); transition: transform .15s; --fa-secondary-opacity: .45; }
.nj-app-tile:active > span { transform: scale(.9); }
.nj-app-tile em { position: absolute; top: -5px; left: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #f43f5e; color: #fff; font-size: 11px; font-style: normal; display: flex; align-items: center; justify-content: center; border: 2px solid var(--nj-surface); }
.nj-app-tile--flag > span { background: var(--nj-surface-2); border-color: var(--nj-border); }
.nj-app-tile--flag .fi { width: 34px; height: 25px; border-radius: 6px; background-size: cover; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.nj-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; flex-shrink: 0; }
.nj-chips::-webkit-scrollbar { display: none; }
.nj-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--nj-border); background: var(--nj-surface-2); color: var(--nj-text); font-size: 13px; font-weight: 700; white-space: nowrap; }
.nj-chip.is-active { background: var(--nj-grad); color: #fff; border-color: transparent; box-shadow: var(--nj-shadow-primary); }
.nj-chip-pane { display: none; }
.nj-chip-pane.is-active { display: block; animation: njFade .25s var(--nj-ease); }
.nj-list { display: flex; flex-direction: column; border: 1px solid var(--nj-border); border-radius: 18px; overflow: hidden; background: var(--nj-surface); }
.nj-list__item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--nj-text) !important; min-height: 56px; }
.nj-list__item + .nj-list__item { border-top: 1px solid var(--nj-border); }
.nj-list__item:active { background: var(--nj-surface-2); }
.nj-list__item .fi { width: 32px; height: 24px; border-radius: 5px; background-size: cover; box-shadow: var(--nj-shadow-sm); flex-shrink: 0; }
.nj-list__ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex !important; align-items: center; justify-content: center; background: var(--nj-primary-soft); color: var(--nj-primary); flex-shrink: 0; }
.nj-list__item b { flex: 1; font-size: 14px; color: var(--nj-heading); }
.nj-list__item b small { display: block; font-size: 11.5px; color: var(--nj-muted); font-weight: 600; }
.nj-list__item > i.fa-chevron-left { color: var(--nj-subtle); font-size: 11px; }
.nj-callcard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: 18px; color: #fff !important; background: var(--nj-grad); box-shadow: var(--nj-shadow-primary); }
.nj-callcard > i:first-child { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 19px; --fa-primary-color: #fff; --fa-secondary-color: #fff; }
.nj-callcard span { flex: 1; }
.nj-callcard b { display: block; font-size: 15px; }
.nj-callcard small { font-size: 13px; opacity: .9; }
.nj-segment-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--nj-surface-2); border: 1px solid var(--nj-border); font-size: 13px; font-weight: 700; color: var(--nj-heading); }
.nj-segment { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--nj-surface-3); }
.nj-segment button { border: 0; background: transparent; color: var(--nj-muted); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 9px; display: inline-flex; gap: 5px; align-items: center; }
html[data-theme-mode="light"] .nj-segment [data-nj-set-theme="light"],
html[data-theme-mode="dark"] .nj-segment [data-nj-set-theme="dark"],
html[data-theme-mode="auto"] .nj-segment [data-nj-set-theme="auto"] { background: var(--nj-surface); color: var(--nj-primary-600); box-shadow: var(--nj-shadow-sm); }
html.nj-sheet-open, html.nj-sheet-open body { overflow: hidden; }

@media (max-width: 1199.98px) {
    .nj-tabbar {
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
        position: fixed; inset-inline: 0; bottom: 0; z-index: 1070;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--nj-surface) 92%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid var(--nj-border); box-shadow: 0 -10px 30px -12px rgba(15,23,42,.18);
    }
    .nj-tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 4px; border: 0; background: none; color: var(--nj-muted) !important; font-size: 10.5px; font-weight: 700; -webkit-tap-highlight-color: transparent; }
    .nj-tabbar__item > i { font-size: 20px; height: 24px; display: flex; align-items: center; transition: transform .2s; --fa-secondary-opacity: .35; }
    .nj-tabbar__item.is-active { color: var(--nj-primary-600) !important; }
    html[data-theme="dark"] .nj-tabbar__item.is-active { color: var(--nj-primary) !important; }
    .nj-tabbar__item.is-active > i { transform: translateY(-1px); --fa-secondary-opacity: .7; }
    .nj-tabbar__item.is-active::before { content: ""; position: absolute; top: -6px; width: 22px; height: 3px; border-radius: 0 0 4px 4px; background: var(--nj-grad); }
    .nj-tabbar__item:active > i { transform: scale(.88); }
    .nj-tabbar__fab { position: relative; width: 54px; height: 54px; margin-top: -26px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: var(--nj-grad); box-shadow: 0 12px 24px -8px rgba(16,185,129,.7), 0 0 0 5px var(--nj-surface); transform: rotate(0); transition: transform .2s; }
    .nj-tabbar__item--fab:active .nj-tabbar__fab { transform: scale(.92); }
    .nj-tabbar__fab em { position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #f43f5e; color: #fff; font-size: 11px; font-style: normal; display: flex; align-items: center; justify-content: center; border: 2px solid var(--nj-surface); }
    .nj-tabbar__badge { position: absolute; top: 2px; left: calc(50% - 20px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: #f43f5e; color: #fff; font-size: 10px; font-style: normal; display: flex; align-items: center; justify-content: center; border: 2px solid var(--nj-surface); }
    .nj-tabbar__badge--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; left: calc(50% - 14px); }
    body.nj-body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    body.nj-body--bare { padding-bottom: 0; }
    .nj-show-mobile { display: inline-flex !important; }
    .nj-hide-mobile { display: none !important; }
    .nj-burger, .nj-app__burger { display: none !important; }
    .nj-menu { display: none !important; }
    .nj-nav .nj-container { min-height: 64px; }
    .nj-footer { padding-bottom: 10px; }
    .btn-return-to-admin { bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767.98px) {
    .nj-topbar { display: none; }
    .nj-nav .nj-container { min-height: 58px; gap: 10px; }
    .nj-logo__mark { width: 36px; height: 30px; }
    .nj-nav__actions .nj-icon-btn { width: 40px; height: 40px; border-radius: 12px; }
    .nj-apps { grid-template-columns: repeat(4, 1fr); }
    /* iOS: no zoom on focus */
    input.form-control, select.form-control, textarea.form-control, .custom-select, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"] { font-size: 16px !important; }
    .btn { min-height: 42px; }
    .nj-app__top { padding: 10px 14px; gap: 10px; }
    .nj-app__top .nj-avatar { width: 38px; height: 38px; font-size: 15px; }
    .nj-hello b { font-size: 14px; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nj-app__top-actions .nj-icon-btn { width: 38px; height: 38px; }
    .nj-page-head { margin-bottom: 14px; }
    .nj-page-head h1 { font-size: 21px; }
    .nj-page-head .breadcrumb { display: none; }
    .nj-app__foot { display: none; }
    .nj-stats { gap: 10px; }
    .nj-section-head h2 { font-size: 21px; }
    .nj-hero { border-radius: 22px; margin-top: 12px; }
    .nj-hero__title { font-size: 44px; }
    .nj-hero__desc { font-size: 15px; }
    .nj-footer__grid { padding-top: 34px; }
    .card-body { padding: 16px; }
    .modal-dialog { margin: auto 8px; }
    .modal.fade .modal-dialog { align-items: flex-end; }
}
@media (max-width: 479.98px) {
    .nj-apps { grid-template-columns: repeat(4, 1fr); gap: 12px 4px; }
    .nj-app-tile > span { width: 52px; height: 52px; border-radius: 16px; }
    .nj-app-tile { font-size: 11px; }
}

/* ==========================================================================
   17. Responsive tables → cards on phones (client area lists)
   ========================================================================== */
@media (max-width: 767.98px) {
    table.nj-rtable, table.nj-rtable tbody, table.nj-rtable tr, table.nj-rtable td { display: block; width: 100% !important; }
    table.nj-rtable { min-width: 0 !important; }
    table.nj-rtable thead { display: none; }
    table.nj-rtable tbody tr { background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: 16px; margin-bottom: 10px; padding: 8px 14px; box-shadow: var(--nj-shadow-sm); position: relative; }
    table.nj-rtable tbody td { border: 0 !important; padding: 7px 0 !important; text-align: right !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; line-height: 1.6 !important; font-size: 13.5px; }
    table.nj-rtable tbody td + td { border-top: 1px dashed var(--nj-border) !important; }
    table.nj-rtable tbody td::before { content: attr(data-label); color: var(--nj-muted); font-size: 12px; font-weight: 700; flex-shrink: 0; }
    table.nj-rtable tbody td[data-label=""]::before { display: none; }
    table.nj-rtable tbody td:first-child { font-weight: 800; }
    table.nj-rtable tbody td.dataTables_empty::before { display: none; }
    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info { display: none; }
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin: 0 0 10px !important; text-align: right; }
    .table-container, .table-responsive { border: 0 !important; overflow: visible; }
}
@media (max-width: 575.98px) {
    .nj-hero__grid { padding: 22px 18px 54px; gap: 4px; }
    .nj-hero__art img { max-width: 250px; }
    .nj-hero__kicker { font-size: 16px; }
    .nj-hero__title { font-size: 40px; margin-bottom: 8px; }
    .nj-hero__cta .btn { flex: 1; padding: .75rem 1rem; font-size: 14px; }
}
@media (max-width: 767.98px) {
    table.nj-rtable tbody td { flex-wrap: wrap; overflow-wrap: anywhere; }
    table.nj-rtable tbody td > * { white-space: normal !important; max-width: 100%; }
    table.nj-rtable tbody td::before { margin-inline-end: auto; }
    table.nj-rtable tbody td img { max-height: 22px; }
}

/* ==========================================================================
   18. Client area: horizontal context bar (WHMCS sidebars) + legacy widgets
   ========================================================================== */
.nj-ctxbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.nj-ctxbar .card-sidebar { margin: 0 !important; display: flex; flex-direction: column; border-radius: 18px !important; }
.nj-ctxbar .card-sidebar .card-header { padding: 12px 16px; border-bottom: 1px solid var(--nj-border) !important; }
.nj-ctxbar .card-sidebar .card-title { font-size: 13.5px; }
.nj-ctxbar .card-sidebar .card-minimise { display: none; }
.nj-ctxbar .collapsable-card-body { display: block !important; }
.nj-ctxbar .card-sidebar .list-group { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; }
.nj-ctxbar .card-sidebar .list-group-item { border: 1px solid var(--nj-border) !important; border-radius: 999px !important; padding: 6px 12px !important; font-size: 12.5px; background: var(--nj-surface-2) !important; width: auto; flex: 0 0 auto; }
.nj-ctxbar .card-sidebar .list-group-item + .list-group-item { border-top: 1px solid var(--nj-border) !important; }
.nj-ctxbar .card-sidebar .list-group-item:hover { border-color: var(--nj-primary-ring) !important; color: var(--nj-primary-600) !important; }
.nj-ctxbar .card-sidebar .list-group-item.active { background: var(--nj-grad) !important; color: #fff !important; border-color: transparent !important; }
.nj-ctxbar .card-sidebar .list-group-item.active .sidebar-menu-item-icon, .nj-ctxbar .card-sidebar .list-group-item.active .badge { color: #fff; }
.nj-ctxbar .sidebar-menu-item-wrapper { gap: 6px; }
.nj-ctxbar .sidebar-menu-item-badge .badge { background: var(--nj-surface-3); color: var(--nj-muted); padding: .2em .55em; }
.nj-ctxbar .card-body { padding: 12px 16px; font-size: 13px; }
.nj-ctxbar .card-footer { padding: 10px 14px; }
.nj-ctxbar .card-sidebar.d-none { display: flex !important; }
@media (max-width: 767.98px) {
    .nj-ctxbar { display: flex; overflow-x: auto; gap: 10px; margin: 0 -14px 14px; padding: 0 14px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .nj-ctxbar::-webkit-scrollbar { display: none; }
    .nj-ctxbar .card-sidebar { flex: 0 0 82%; scroll-snap-align: start; }
}

/* legacy Apadana stat widgets (services / invoices / domains pages) */
.home-status-badge-row { row-gap: 14px; margin-bottom: 18px; }
.widget-stat { background: var(--nj-surface) !important; border: 1px solid var(--nj-border) !important; border-radius: var(--nj-radius-lg) !important; box-shadow: var(--nj-shadow-sm) !important; height: 100%; }
.widget-stat .card-body { padding: 16px 18px !important; }
.widget-stat .media { display: flex; align-items: center; gap: 14px; }
.widget-stat .ai-icon > span, .widget-stat .media > span { width: 54px !important; height: 54px !important; min-width: 54px; line-height: 54px !important; border-radius: 16px !important; display: flex !important; align-items: center; justify-content: center; font-size: 22px !important; margin: 0 !important; box-shadow: none !important; }
.widget-stat .media-body p { font-size: 12.5px; font-weight: 800; margin-bottom: 2px !important; }
.widget-stat .media-body h4, .widget-stat .media-body .h4 { font-size: 22px; font-weight: 900; color: var(--nj-heading) !important; }
.widget-stat .progress { height: 5px; margin: 8px 0 0 !important; background: var(--nj-surface-3) !important; }
.bgl-success { background: var(--nj-success-soft) !important; }
.bgl-primary { background: var(--nj-primary-soft) !important; }
.bgl-warning { background: var(--nj-warning-soft) !important; }
.bgl-danger { background: var(--nj-danger-soft) !important; }
.bgl-info { background: var(--nj-info-soft) !important; }
.bgl-secondary, .bgl-light, .bgl-dark { background: var(--nj-surface-3) !important; }

/* lists: keep tables inside their card, scroll instead of overflowing */
.primary-content .table-container, .primary-content .dataTables_wrapper, .primary-content .table-responsive { overflow-x: auto; max-width: 100%; }
.primary-content table.table-list { width: 100% !important; }
.primary-content .card > .card-body > .table-container { margin: 0 -4px; }

/* ==========================================================================
   19. Promo banners (Nojhan Theme → بنرهای تبلیغاتی)
   ========================================================================== */
.nj-pb { --pb1: #0b1f3a; --pb2: #0f2a4d; --pbA: rgba(34,211,238,.35); --pbB: rgba(16,185,129,.35); --pbC: #22d3ee;
    position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 20px;
    margin: 26px 0; padding: 34px 38px; border-radius: 26px; color: #fff;
    background: radial-gradient(520px 280px at 100% 0%, var(--pbA), transparent 62%), radial-gradient(520px 280px at 0% 100%, var(--pbB), transparent 62%), linear-gradient(135deg, var(--pb2), var(--pb1));
    box-shadow: 0 30px 60px -30px rgba(2,8,23,.6); }
.nj-pb::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(500px 260px at 30% 50%, #000, transparent 75%); -webkit-mask-image: radial-gradient(500px 260px at 30% 50%, #000, transparent 75%); pointer-events: none; }
.nj-pb > * { position: relative; }
.nj-pb--green  { --pb1: #064e3b; --pb2: #065f46; --pbA: rgba(52,211,153,.4); --pbB: rgba(14,165,233,.3); --pbC: #6ee7b7; }
.nj-pb--blue   { --pb1: #1e3a8a; --pb2: #1d4ed8; --pbA: rgba(56,189,248,.45); --pbB: rgba(99,102,241,.4); --pbC: #7dd3fc; }
.nj-pb--purple { --pb1: #3b0764; --pb2: #6d28d9; --pbA: rgba(232,121,249,.4); --pbB: rgba(56,189,248,.3); --pbC: #f0abfc; }
.nj-pb--dark   { --pb1: #020617; --pb2: #111827; --pbA: rgba(251,191,36,.25); --pbB: rgba(16,185,129,.25); --pbC: #fbbf24; }
.nj-pb__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; color: #0b1f3a; background: var(--pbC); box-shadow: 0 8px 20px -8px var(--pbC); }
.nj-pb__title { color: #fff !important; font-size: clamp(24px, 3vw, 34px); font-weight: 900; margin: 14px 0 8px; line-height: 1.5; }
.nj-pb__sub { color: rgba(255,255,255,.78); font-size: 15px; line-height: 2; margin: 0 0 14px; max-width: 620px; }
.nj-pb__feats { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.nj-pb__feats li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255,255,255,.9); }
.nj-pb__feats i { color: var(--pbC); }
.nj-pb__cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nj-pb__btn { background: #fff !important; color: #0b1f3a !important; border: 0 !important; border-radius: 14px !important; font-weight: 900; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.nj-pb__btn i { margin-inline-start: 6px; font-size: 13px; }
.nj-pb__btn:hover { transform: translateY(-2px); }
.nj-pb__btn2 { background: rgba(255,255,255,.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius: 14px !important; }
.nj-pb__btn2:hover { background: rgba(255,255,255,.18) !important; }
.nj-pb__note { font-size: 13px; color: var(--pbC); font-weight: 800; }
.nj-pb__art { display: flex; align-items: center; justify-content: center; }
.nj-pb__art img { width: 100%; max-width: 380px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); animation: nj-float 7s ease-in-out infinite; }
.nj-pb--image { display: block; padding: 0; background: none; box-shadow: var(--nj-shadow); }
.nj-pb--image::before { display: none; }
.nj-pb--image img { display: block; width: 100%; height: auto; border-radius: 26px; }
.nj-dash-grid + .nj-pb, .nj-stats + .nj-pb { margin-top: 0; }
.nj-app__body .nj-pb { margin: 0 0 20px; padding: 26px 30px; }
.nj-app__body .nj-pb__title { font-size: 24px; }
#order-standard_cart .nj-pb { margin: 0 0 20px; padding: 24px 28px; grid-template-columns: 1.4fr .6fr; }
#order-standard_cart .nj-pb__title { font-size: 22px; }
@media (max-width: 991.98px) {
    .nj-pb { grid-template-columns: 1fr; padding: 28px 22px; text-align: right; }
    .nj-pb__art { order: -1; }
    .nj-pb__art img { max-width: 230px; }
    #order-standard_cart .nj-pb { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .nj-pb { border-radius: 22px; margin: 18px 0; }
    .nj-pb__feats { grid-template-columns: 1fr; }
    .nj-pb__cta .btn { flex: 1; }
    .nj-pb__sub { font-size: 14px; }
}

/* مودال‌ها همیشه بالای منوی پایین موبایل، کشو و شیت‌ها */
.modal-backdrop { z-index: 1100 !important; }
.modal { z-index: 1105 !important; }

/* ==========================================================================
   20. انتخاب روش پرداخت (سبد خرید + فاکتور)
   ========================================================================== */
.nj-gw { margin: 6px 0 18px; }
.nj-gw__head, .nj-pay__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nj-gw__head strong, .nj-pay__title strong { display: block; color: var(--nj-heading); font-weight: 900; font-size: 15px; }
.nj-gw__head small, .nj-pay__title small { display: block; color: var(--nj-muted); font-size: 12px; margin-top: 2px; }
.nj-gw__head-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--nj-grad); box-shadow: 0 10px 20px -10px rgba(16,185,129,.8); font-size: 17px; }
.nj-gw__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; min-width: 0; }
.nj-gw__card {
    position: relative; display: flex !important; align-items: center; gap: 12px; margin: 0 !important; width: 100%; min-width: 0; white-space: normal;
    padding: 14px 14px !important; border-radius: 16px; cursor: pointer; text-align: right; font: inherit;
    background: var(--nj-surface); border: 1.5px solid var(--nj-border); color: var(--nj-text);
    transition: border-color .2s, box-shadow .2s, transform .2s, background .2s;
}
.nj-gw__card:hover { border-color: var(--nj-primary-ring); transform: translateY(-2px); box-shadow: var(--nj-shadow); }
.nj-gw__card input[type="radio"] { position: absolute !important; opacity: 0 !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; cursor: pointer; z-index: 2; appearance: none; -webkit-appearance: none; }
.nj-gw__card [class*="iradio"] { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; background: none !important; border: 0 !important; z-index: 2; }
.nj-gw__card [class*="iradio"] ins { opacity: 0 !important; z-index: 3 !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }
.nj-gw__card [class*="iradio"] input { pointer-events: none !important; } /* با iCheck، کلیک باید به ins برسد */
.nj-gw__card:focus-within { outline: 2px solid var(--nj-primary-ring); outline-offset: 2px; }
.nj-gw__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; background: var(--nj-surface-2); color: var(--nj-primary); transition: .2s; }
.nj-gw__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nj-gw__name { color: var(--nj-heading); font-weight: 900; font-size: 14px; line-height: 1.6; }
.nj-gw__desc { color: var(--nj-muted); font-size: 11.5px; line-height: 1.7; }
.nj-gw__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.nj-gw__tags em { font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--nj-surface-2); color: var(--nj-muted); border: 1px solid var(--nj-border); }
.nj-gw__check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: transparent; border: 2px solid var(--nj-border); transition: .2s; }
.nj-gw__card.is-selected { border-color: var(--nj-primary); background: color-mix(in srgb, var(--nj-primary) 7%, var(--nj-surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nj-primary) 14%, transparent); }
.nj-gw__card.is-selected .nj-gw__check { background: var(--nj-grad); border-color: transparent; color: #fff; }
.nj-gw__card.is-selected .nj-gw__icon { background: var(--nj-grad); color: #fff; }
.nj-gw__card.is-selected .nj-gw__tags em { border-color: var(--nj-primary-ring); color: var(--nj-primary); }
.nj-gw__card.is-static { cursor: default; }
.nj-gw__card.is-loading .nj-gw__check i::before { content: "\f110"; }
.nj-gw__card.is-loading .nj-gw__check i { animation: fa-spin 1s linear infinite; }
/* کارت ارز دیجیتال */
.nj-gw__card[data-kind="crypto"] .nj-gw__icon { background: linear-gradient(140deg, #f59e0b, #f97316); color: #fff; }
.nj-gw__card[data-kind="crypto"].is-selected { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 8%, var(--nj-surface)); box-shadow: 0 0 0 4px rgba(245,158,11,.16); }
.nj-gw__card[data-kind="crypto"].is-selected .nj-gw__check { background: linear-gradient(140deg, #f59e0b, #f97316); }
.nj-gw__card[data-kind="crypto"] .nj-gw__tags em:first-child { background: rgba(38,161,123,.12); color: #26a17b; border-color: rgba(38,161,123,.3); }
.nj-gw__card[data-kind="manual"] .nj-gw__icon { color: #6366f1; }
.nj-gw__secure { margin: 12px 0 0; font-size: 12px; color: var(--nj-muted); display: flex; align-items: center; gap: 6px; }
.nj-gw__secure i { color: var(--nj-primary); }

/* پنل پرداخت فاکتور */
.nj-pay { background: var(--nj-surface); border: 1px solid var(--nj-border); border-radius: 20px; padding: 20px; margin-bottom: 25px; box-shadow: var(--nj-shadow); text-align: right; direction: rtl; }
.nj-pay__title { flex: 1; min-width: 0; }
.nj-pay__amount { text-align: left; background: var(--nj-grad-soft); border: 1px solid var(--nj-primary-ring); border-radius: 14px; padding: 8px 14px; }
.nj-pay__amount small { display: block; font-size: 11px; color: var(--nj-muted); }
.nj-pay__amount b { font-size: 18px; font-weight: 900; color: var(--nj-heading); white-space: nowrap; }
.nj-pay__form { margin: 0; }
.nj-pay__select { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--nj-muted); }
.nj-pay__select select { border-radius: 12px; border: 1px solid var(--nj-border); background: var(--nj-surface-2); color: var(--nj-text); height: 42px; padding: 0 12px; min-width: 220px; }
.nj-pay__form.is-enhanced .nj-pay__select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nj-pay__button { margin-top: 16px; }
.nj-pay__button.is-loading { opacity: .5; pointer-events: none; }
.nj-pay__button > form { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nj-pay__button > form input[type="submit"], .nj-pay__button > form button[type="submit"], .nj-pay__button > form .btn,
.nj-pay__button > a.btn, .nj-pay__button > input[type="submit"] {
    width: 100%; min-height: 50px; border: 0 !important; border-radius: 14px !important; font-weight: 900 !important; font-size: 15px !important;
    background: var(--nj-grad) !important; color: #fff !important; box-shadow: 0 14px 26px -14px rgba(16,185,129,.9); cursor: pointer;
}
.nj-pay__button[data-kind="crypto"] .njx-start { width: 100%; justify-content: center; min-height: 50px; background: linear-gradient(140deg, #f59e0b, #f97316) !important; border: 0 !important; color: #fff !important; box-shadow: 0 14px 26px -14px rgba(249,115,22,.9); }
.nj-pay__button > form img { max-height: 46px; }
.nj-pay__button p { margin: 6px 0; font-size: 13px; color: var(--nj-text); }
@media (max-width: 575.98px) {
    .nj-gw__grid { grid-template-columns: 1fr; }
    .nj-pay { padding: 14px; border-radius: 16px; }
    .nj-pay__head { flex-wrap: wrap; }
    .nj-pay__amount { width: 100%; display: flex; align-items: center; justify-content: space-between; }
}
/* ==========================================================================
   22. صفحه فاکتور — حالت تیره + موبایل (چاپ همیشه روشن می‌ماند)
   ========================================================================== */
@media screen {
    html[data-theme="dark"] .modern-invoice-card { background: var(--nj-surface) !important; border-color: var(--nj-border) !important; box-shadow: var(--nj-shadow-lg); color: var(--nj-text); }
    html[data-theme="dark"] .invoice-header-bar { background: linear-gradient(135deg, #020617 0%, #0f2a4d 100%) !important; border-bottom: 1px solid var(--nj-border); }
    html[data-theme="dark"] .date-card,
    html[data-theme="dark"] .party-card { background: var(--nj-surface-2) !important; border-color: var(--nj-border) !important; }
    html[data-theme="dark"] .date-label,
    html[data-theme="dark"] .party-details p,
    html[data-theme="dark"] .code-font,
    html[data-theme="dark"] .summary-row td { color: var(--nj-muted) !important; }
    html[data-theme="dark"] .date-value,
    html[data-theme="dark"] .party-title,
    html[data-theme="dark"] .section-title,
    html[data-theme="dark"] .total-row td { color: var(--nj-heading) !important; }
    html[data-theme="dark"] .party-title { border-bottom-color: var(--nj-border); }
    html[data-theme="dark"] .party-client .party-title { border-color: #3b82f6; }
    html[data-theme="dark"] .party-payto .party-title { border-color: #10b981; }
    html[data-theme="dark"] .table-container { border-color: var(--nj-border) !important; }
    html[data-theme="dark"] .modern-table th { background: var(--nj-surface-3) !important; color: var(--nj-heading) !important; }
    html[data-theme="dark"] .modern-table td { color: var(--nj-text) !important; border-top-color: var(--nj-border) !important; background: transparent; }
    html[data-theme="dark"] .summary-row td,
    html[data-theme="dark"] .total-row td,
    html[data-theme="dark"] .balance-row td { background: var(--nj-surface-2) !important; border-top-color: var(--nj-border) !important; }
    html[data-theme="dark"] .total-val { color: #60a5fa !important; }
    html[data-theme="dark"] .trans-amount { color: #34d399 !important; }
    html[data-theme="dark"] .balance-val { color: #f87171 !important; }
    html[data-theme="dark"] .credit-apply-box { background: rgba(59, 130, 246, .1) !important; border-color: rgba(59, 130, 246, .3) !important; }
    html[data-theme="dark"] .credit-apply-box h5 { color: #93c5fd !important; }
    html[data-theme="dark"] .credit-apply-box p { color: #bfdbfe !important; }
    html[data-theme="dark"] .credit-input { background: var(--nj-surface-2) !important; color: var(--nj-text) !important; border-color: var(--nj-border) !important; }
    html[data-theme="dark"] .notes-card { background: rgba(245, 158, 11, .08) !important; border-color: rgba(245, 158, 11, .25) !important; }
    html[data-theme="dark"] .notes-title { color: #fbbf24 !important; }
    html[data-theme="dark"] .notes-body { color: #fde68a !important; }
    html[data-theme="dark"] .empty-state { color: var(--nj-muted) !important; }
    html[data-theme="dark"] .nj-pay { background: var(--nj-surface-2); }
    html[data-theme="dark"] .nj-pay .nj-gw__card { background: var(--nj-surface); }
    html[data-theme="dark"] .njx-box { background: var(--nj-surface); }
    html[data-theme="dark"] .njx-qr { background: #fff; }
    html[data-theme="dark"] .njx-copy code { color: var(--nj-heading); }
    html[data-theme="dark"] .njx-alert--warn { color: #fbbf24; }
    html[data-theme="dark"] .njx-alert--err { color: #fca5a5; }
    html[data-theme="dark"] .njx-status[data-state="paid"] { color: #6ee7b7; }
    html[data-theme="dark"] .njx-status[data-state="partial"], html[data-theme="dark"] .njx-status[data-state="review"] { color: #fbbf24; }
    html[data-theme="dark"] .njx-status[data-state="error"], html[data-theme="dark"] .njx-status[data-state="expired"] { color: #fca5a5; }
}
/* جلوگیری از بیرون‌زدگی صفحه فاکتور در موبایل */
.modern-invoice-wrapper, .modern-invoice-card, .invoice-body-content, .nj-pay, .nj-pay__form, .njx, .njx-box { min-width: 0; max-width: 100%; }
.modern-invoice-wrapper { width: 100%; }
.njx-grid > * { min-width: 0; }
@media (max-width: 767.98px) {
    .modern-invoice-wrapper { margin: 8px auto !important; padding: 0 !important; }
    .modern-invoice-card { border-radius: 16px !important; }
    .invoice-header-bar { padding: 16px !important; flex-wrap: wrap; gap: 10px; }
    .invoice-id { font-size: 18px !important; }
    .invoice-body-content { padding: 14px !important; }
    .invoice-dates-grid, .parties-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .modern-table { min-width: 520px; }
    .modern-table th, .modern-table td { padding: 10px !important; font-size: 12.5px !important; }
    .invoice-actions { flex-wrap: wrap; gap: 8px !important; padding: 12px 0 !important; }
    .invoice-actions .btn-action { flex: 1 1 calc(50% - 8px); justify-content: center; font-size: 12.5px !important; padding: 10px 8px !important; }
    .credit-input-group { flex-direction: column; }
    .credit-input, .credit-btn { border-radius: 10px !important; width: 100%; }
}

/* ==========================================================================
   21. جایگاه‌های بنر (بالا / وسط / پایین) + بنر تصویری واکنش‌گرا
   ========================================================================== */
.nj-pbs { display: flex; flex-direction: column; gap: 16px; margin: 18px 0; }
.nj-pbs--top { margin-top: 4px; }
.nj-pbs--bottom { margin: 26px 0 8px; }
.page-homepage .nj-pbs--top, .page-homepage .nj-pbs--bottom { max-width: 1320px; margin-inline: auto; padding-inline: 16px; }
.nj-pbw { position: relative; }
.nj-pbw .nj-pb { margin: 0 !important; }
.nj-pbw--full { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.nj-pbw--full .nj-pb, .nj-pbw--full .nj-pb--image img { border-radius: 0 !important; }
.nj-pb.nj-pb--image { display: block !important; padding: 0 !important; overflow: hidden; border-radius: 22px; background: var(--nj-surface-2) !important; line-height: 0; }
.nj-pb.nj-pb--image picture { display: block; }
.nj-pb.nj-pb--image img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 0; image-rendering: auto; transition: transform .5s ease; }
.nj-pb.nj-pb--image:hover img { transform: scale(1.01); }
.nj-pbw__x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
    background: rgba(2, 8, 23, .55); color: #fff; font-size: 13px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nj-pbw__x:hover { background: rgba(2, 8, 23, .8); }
.nj-pbw.is-closed { display: none; }
@media (max-width: 767.98px) {
    .nj-pbw--dev-desktop { display: none !important; }
    .nj-pb.nj-pb--image { border-radius: 16px; }
    .nj-pbs { gap: 12px; margin: 14px 0; }
}
@media (min-width: 768px) {
    .nj-pbw--dev-mobile { display: none !important; }
}

/* آواتار حرفی (بدون گراواتار خارجی) */
.nj-avatar { display: inline-grid !important; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--nj-grad); color: #fff; font-weight: 900; font-size: 17px; line-height: 1; flex-shrink: 0; object-fit: initial; }
.nj-avatar--admin { background: linear-gradient(135deg, var(--nj-navy-2), var(--nj-navy)); }

/* لایه بارگذاری WHMCS: اگر اسکریپتی خطا داد، صفحه پشت لایه تار نماند */
#fullpage-overlay.w-hidden { display: none !important; }

/* تداخل invoice-sina.css (span:first-child با عرض ۱۲۵px) با کارت‌های درگاه در موبایل */
.form-payment-method .nj-gw__card span.nj-gw__icon { display: grid !important; width: 46px !important; }
.form-payment-method .nj-gw__card span.nj-gw__body { display: flex !important; width: auto !important; }
.form-payment-method .nj-gw__card span.nj-gw__check { display: grid !important; width: 24px !important; }
.form-payment-method .nj-pay__select span { width: auto !important; }

/* داشبورد: پنل‌های WHMCS در دو ستون مرتب (بدون فاصله‌های نامنظم) */
.nj-home-panels { column-count: 2; column-gap: 18px; margin-top: 4px; }
.nj-home-panels__item { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 18px; vertical-align: top; }
.nj-home-panels__item > .nj-panel { margin: 0; height: auto !important; }
.nj-home-panels .nj-panel__body .input-group { display: flex; flex-wrap: nowrap; gap: 0; }
.nj-home-panels .nj-panel__body .input-group .form-control { border-radius: 0 12px 12px 0 !important; min-height: 44px; }
.nj-home-panels .nj-panel__body .input-group .btn { min-height: 44px; border-radius: 0 !important; }
.nj-home-panels .nj-panel__body .input-group > :last-child .btn, .nj-home-panels .nj-panel__body .input-group .btn:last-child { border-radius: 12px 0 0 12px !important; }
@media (max-width: 1199.98px) { .nj-home-panels { column-count: 1; } }