/* ============================================================
   WHMCS-Nexia Design System — v2.0
   Author: Nexiamath.com
   Stack: Bootstrap 5 + CSS Custom Properties
   ============================================================ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Brand colours */
  --nx-primary:        #6366f1;
  --nx-primary-dark:   #4f46e5;
  --nx-primary-light:  #a5b4fc;
  --nx-primary-xlight: #eef2ff;
  --nx-secondary:      #0ea5e9;
  --nx-secondary-dark: #0284c7;

  /* Semantic colours */
  --nx-success:  #22c55e;
  --nx-success-bg: #dcfce7;
  --nx-danger:   #ef4444;
  --nx-danger-bg: #fee2e2;
  --nx-warning:  #f59e0b;
  --nx-warning-bg: #fef3c7;
  --nx-info:     #06b6d4;
  --nx-info-bg:  #cffafe;

  /* Surfaces */
  --nx-bg:       #f8fafc;
  --nx-surface:  #ffffff;
  --nx-surface-2: #f1f5f9;
  --nx-border:   #e2e8f0;
  --nx-border-strong: #cbd5e1;

  /* Text */
  --nx-text:       #0f172a;
  --nx-text-muted: #64748b;
  --nx-text-light: #94a3b8;

  /* Dark palette */
  --nx-dark:        #0f172a;
  --nx-dark-800:    #1e293b;
  --nx-dark-700:    #334155;
  --nx-dark-600:    #475569;
  --nx-dark-text:   #f8fafc;
  --nx-dark-muted:  #94a3b8;

  /* Typography */
  --nx-font:    'Inter', system-ui, -apple-system, sans-serif;
  --nx-font-mono: 'Fira Code', 'JetBrains Mono', monospace;

  /* Spacing */
  --nx-space-1:  4px;
  --nx-space-2:  8px;
  --nx-space-3:  12px;
  --nx-space-4:  16px;
  --nx-space-5:  20px;
  --nx-space-6:  24px;
  --nx-space-8:  32px;
  --nx-space-10: 40px;
  --nx-space-12: 48px;
  --nx-space-16: 64px;
  --nx-space-20: 80px;
  --nx-space-24: 96px;

  /* Radius */
  --nx-radius-sm:  6px;
  --nx-radius:    12px;
  --nx-radius-lg: 16px;
  --nx-radius-xl: 24px;
  --nx-radius-pill: 9999px;

  /* Shadows */
  --nx-shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --nx-shadow:     0 4px 16px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04);
  --nx-shadow-lg:  0 10px 40px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
  --nx-shadow-xl:  0 24px 64px rgba(15,23,42,.16);
  --nx-shadow-color: 0 4px 24px rgba(99,102,241,.25);

  /* Gradients */
  --nx-gradient:         linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #0ea5e9 100%);
  --nx-gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --nx-gradient-dark:    linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0c2137 100%);
  --nx-gradient-card:    linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(14,165,233,.04) 100%);

  /* Transitions */
  --nx-transition: all .2s cubic-bezier(.4,0,.2,1);
  --nx-transition-slow: all .4s cubic-bezier(.4,0,.2,1);
}

/* ── 2. BASE RESET & GLOBAL ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--nx-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--nx-text);
  background-color: var(--nx-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nx-font);
  font-weight: 700;
  line-height: 1.2;
  color: var(--nx-text);
  margin-top: 0;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

a {
  color: var(--nx-primary);
  text-decoration: none;
  transition: var(--nx-transition);
}
a:hover { color: var(--nx-primary-dark); }

img { max-width: 100%; height: auto; }

/* ── 3. LAYOUT ─────────────────────────────────────────────── */
.container { max-width: 1240px; }

section#main-body,
#main-body {
  min-height: 60vh;
  background: var(--nx-bg);
  padding: var(--nx-space-12) 0;
}

.main-content-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--nx-space-6);
}

/* Page wrapper for inner WHMCS pages */
.page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--nx-space-8) var(--nx-space-4);
}

/* ── 4. HEADER & NAVIGATION ────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--nx-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

/* Top bar */
.top-bar {
  background: rgba(15,23,42,.95);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 6px 0;
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-space-4);
}

.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
}

.top-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--nx-dark-muted);
  font-weight: 500;
}
.top-trust-item i { color: var(--nx-primary-light); font-size: 13px; }

/* Top-bar dropdowns */
.top-bar-dropdown > button {
  background: none;
  border: none;
  color: var(--nx-dark-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: var(--nx-radius-sm);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--nx-transition);
  font-family: var(--nx-font);
}
.top-bar-dropdown > button:hover {
  background: rgba(255,255,255,.08);
  color: white;
}
.top-bar-dropdown > button i { font-size: 13px; }
.top-bar-dropdown .tb-arrow { font-size: 12px; }

.top-bar-dropdown .dropdown-menu {
  background: var(--nx-dark-800);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow-lg);
  padding: var(--nx-space-2) 0;
  min-width: 180px;
  margin-top: 4px;
}
.top-bar-dropdown .dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  padding: 8px 16px;
  color: var(--nx-dark-muted);
  font-size: 13px;
  transition: var(--nx-transition);
}
.top-bar-dropdown .dropdown-menu li a:hover {
  background: rgba(255,255,255,.06);
  color: white;
}
.top-bar-dropdown .dropdown-menu li a i { font-size: 14px; color: var(--nx-primary-light); }

/* Notification badge */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--nx-danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: var(--nx-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.notif-dropdown > button { position: relative; }

/* Main header */
.main-header {
  background: var(--nx-dark);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.main-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-space-4);
}

/* Logo */
.navbar-brand img { height: 36px; width: auto; }
.navbar-brand svg { height: 36px; width: auto; }

/* Desktop nav */
.nabbar-nav { display: flex; align-items: center; }

.mainmenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mainmenu > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--nx-radius-sm);
  transition: var(--nx-transition);
  white-space: nowrap;
}
.mainmenu > li > a:hover,
.mainmenu > li.active > a {
  background: rgba(255,255,255,.08);
  color: white;
}
.mainmenu > li > a .dropdown-indicator { font-size: 16px; }

/* Mega / sub menus */
.mainmenu li.has-droupdown { position: relative; }
.mainmenu li.has-droupdown > ul.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-xl);
  min-width: 740px;
  padding: var(--nx-space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s, transform .2s;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
  z-index: 999;
}
.mainmenu li.has-droupdown:hover > ul.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

/* Simple submenu */
.mainmenu li.has-droupdown > ul.submenu:not(.megamenu > li > ul) {
  min-width: 220px;
  left: 0;
  transform: none;
}
.mainmenu li.has-droupdown:hover > ul.submenu.small-submenu {
  transform: translateY(0);
}

.tabheadline-title-inner {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--nx-text-muted);
  margin-bottom: var(--nx-space-3);
  padding: 0 4px;
}

.megamenu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.megamenu-list li a {
  display: flex;
  align-items: flex-start;
  gap: var(--nx-space-3);
  padding: 8px;
  border-radius: var(--nx-radius);
  transition: var(--nx-transition);
  color: var(--nx-text);
}
.megamenu-list li a:hover { background: var(--nx-primary-xlight); }
.megamenu-list li a .icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--nx-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.megamenu-list li a .icon img { width: 36px; height: 36px; object-fit: contain; }
.megamenu-list li a .content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--nx-text);
}
.megamenu-list li a .subcontent {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--nx-text-muted);
  margin-top: 2px;
}

/* Nav CTA button */
.nav-cta-btn,
.mainmenu .nav-cta > a {
  background: var(--nx-gradient) !important;
  color: white !important;
  border-radius: var(--nx-radius-pill) !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.35) !important;
  border: none !important;
}
.nav-cta-btn:hover,
.mainmenu .nav-cta > a:hover {
  box-shadow: 0 6px 20px rgba(99,102,241,.45) !important;
  transform: translateY(-1px);
}

/* Mobile hamburger */
.mobile-menu-btn {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--nx-radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  color: white;
  font-size: 20px;
  line-height: 1;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,.08); }

/* Mobile drawer */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: var(--nx-transition);
}
.mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
}
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: var(--nx-dark);
  z-index: 2001;
  overflow-y: auto;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  padding: var(--nx-space-6);
}
.mobile-nav-overlay.open .mobile-nav-drawer { right: 0; }

/* ── 5. BUTTONS ────────────────────────────────────────────── */
.btn,
button.btns,
.btns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nx-space-2);
  padding: 10px 24px;
  border-radius: var(--nx-radius-pill);
  font-family: var(--nx-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--nx-transition);
  text-decoration: none;
  white-space: nowrap;
}

/* Primary */
.btn-primary,
.btn.one,
.btns.one {
  background: var(--nx-gradient);
  color: white !important;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.btn-primary:hover,
.btns.one:hover {
  box-shadow: 0 8px 24px rgba(99,102,241,.45);
  transform: translateY(-2px);
  color: white !important;
}

/* Secondary */
.btn-secondary,
.btns.two {
  background: var(--nx-surface);
  color: var(--nx-primary) !important;
  border-color: var(--nx-primary);
}
.btn-secondary:hover,
.btns.two:hover {
  background: var(--nx-primary-xlight);
  transform: translateY(-1px);
}

/* Default / outline */
.btn-default,
.btn-outline-primary {
  background: transparent;
  color: var(--nx-primary) !important;
  border-color: var(--nx-primary);
}
.btn-default:hover,
.btn-outline-primary:hover {
  background: var(--nx-primary);
  color: white !important;
}

/* Ghost */
.btn-ghost {
  background: rgba(255,255,255,.1);
  color: white !important;
  border-color: rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
}

/* Danger */
.btn-danger { background: var(--nx-danger); color: white !important; }
.btn-danger:hover { background: #dc2626; box-shadow: 0 4px 12px rgba(239,68,68,.35); }

/* Success */
.btn-success { background: var(--nx-success); color: white !important; }
.btn-success:hover { background: #16a34a; }

/* Sizes */
.btn-sm { padding: 6px 16px; font-size: 13px; }
.btn-lg { padding: 14px 32px; font-size: 17px; }
.btn-xl { padding: 16px 40px; font-size: 18px; }
.btn-xs { padding: 4px 12px; font-size: 12px; border-radius: var(--nx-radius-sm); }

/* Block */
.btn-block, .w-100.btn { width: 100%; }

/* V1 button style */
.v1-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--nx-radius-pill);
  font-weight: 600;
  font-size: 15px;
  font-family: var(--nx-font);
  transition: var(--nx-transition);
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
}
.v1-btn-primary {
  background: var(--nx-gradient);
  color: white;
  box-shadow: 0 4px 16px rgba(99,102,241,.4);
}
.v1-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,.5); color: white; }
.v1-btn-ghost {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,.3);
}
.v1-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: white; }

/* ── 6. FORMS ───────────────────────────────────────────────── */
.form-control,
.inputs,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select,
.form-select {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-family: var(--nx-font);
  font-size: 15px;
  font-weight: 400;
  color: var(--nx-text);
  background: var(--nx-surface);
  border: 1.5px solid var(--nx-border);
  border-radius: var(--nx-radius);
  outline: none;
  transition: var(--nx-transition);
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.5;
}
.form-control:focus,
.inputs:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
.form-select:focus,
textarea:focus {
  border-color: var(--nx-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
  background: var(--nx-surface);
}
.form-control::placeholder,
.inputs::placeholder { color: var(--nx-text-light); }

textarea.form-control,
textarea.inputs {
  resize: vertical;
  min-height: 120px;
}

/* Labels */
label,
.labels,
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

/* Select arrow */
select.form-control,
select.inputs,
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
  cursor: pointer;
}

/* Checkbox & radio */
.form-check-input {
  width: 18px;
  height: 18px;
  border: 2px solid var(--nx-border-strong);
  border-radius: 5px;
  cursor: pointer;
  accent-color: var(--nx-primary);
}
.form-check-input:checked {
  background-color: var(--nx-primary);
  border-color: var(--nx-primary);
}
.form-check-label { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Checkbox legacy */
label.checkbox {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--nx-text-muted);
  cursor: pointer;
}
label.checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--nx-primary);
}

/* Required message */
.nexia-required-message,
.required-message {
  font-size: 11px;
  color: var(--nx-danger);
  margin-top: 4px;
  display: block;
}

/* Input group */
.input-group {
  display: flex;
  border-radius: var(--nx-radius);
  overflow: hidden;
}
.input-group .form-control,
.input-group .inputs {
  border-radius: 0;
  border-right: 0;
}
.input-group .input-group-text {
  background: var(--nx-surface-2);
  border: 1.5px solid var(--nx-border);
  padding: 0 16px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--nx-text-muted);
}
.input-group .btn { border-radius: 0; border-left: 0; }

/* Password strength */
#password-strength-meter { height: 4px; border-radius: 2px; }

/* ── 7. CARDS ───────────────────────────────────────────────── */
.card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-sm);
  overflow: hidden;
  transition: var(--nx-transition);
}
.card:hover { box-shadow: var(--nx-shadow); }

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--nx-border);
  padding: var(--nx-space-4) var(--nx-space-6);
}
.card-header .card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--nx-text);
  margin: 0;
}
.card-body { padding: var(--nx-space-6); }
.card-footer {
  background: var(--nx-surface-2);
  border-top: 1px solid var(--nx-border);
  padding: var(--nx-space-4) var(--nx-space-6);
}

/* Card variants */
.card-elevated { box-shadow: var(--nx-shadow-lg); }
.card-gradient { background: var(--nx-gradient-card); }
.card-primary { border-top: 3px solid var(--nx-primary); }
.card-success { border-top: 3px solid var(--nx-success); }
.card-danger  { border-top: 3px solid var(--nx-danger); }
.card-warning { border-top: 3px solid var(--nx-warning); }
.card-info    { border-top: 3px solid var(--nx-info); }

/* Accent colors */
.card-accent-blue   { border-top: 3px solid #3b82f6; }
.card-accent-green  { border-top: 3px solid var(--nx-success); }
.card-accent-red    { border-top: 3px solid var(--nx-danger); }
.card-accent-yellow { border-top: 3px solid var(--nx-warning); }
.card-accent-purple { border-top: 3px solid var(--nx-primary); }

/* ── 8. STAT TILES (client area dashboard) ─────────────────── */
.tile,
.tt-single-box {
  display: flex;
  align-items: center;
  gap: var(--nx-space-4);
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-space-6);
  text-decoration: none;
  color: var(--nx-text);
  transition: var(--nx-transition);
  box-shadow: var(--nx-shadow-sm);
  cursor: pointer;
  height: 100%;
}
.tile:hover,
.tt-single-box:hover {
  border-color: var(--nx-primary);
  box-shadow: var(--nx-shadow-color);
  transform: translateY(-3px);
  color: var(--nx-text);
}

.tile > i,
.tt-single-box > i {
  font-size: 32px;
  color: var(--nx-primary);
  background: var(--nx-primary-xlight);
  border-radius: var(--nx-radius);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tile .tt-box-info { flex: 1; }
.tile .tt-box-info .stat {
  font-size: 28px;
  font-weight: 800;
  color: var(--nx-text);
  line-height: 1;
  margin-bottom: 4px;
}
.tile .tt-box-info .title {
  font-size: 13px;
  font-weight: 500;
  color: var(--nx-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── 9. TABLES ─────────────────────────────────────────────── */
.table,
table.dataTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table th {
  background: var(--nx-surface-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--nx-text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--nx-border);
  text-align: left;
  white-space: nowrap;
}
.table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--nx-border);
  color: var(--nx-text);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--nx-surface-2); }
.table-responsive {
  overflow-x: auto;
  border-radius: var(--nx-radius-lg);
  border: 1px solid var(--nx-border);
  box-shadow: var(--nx-shadow-sm);
}

/* ── 10. BADGES & STATUS PILLS ─────────────────────────────── */
.badge,
.status-badge,
span.label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--nx-radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.badge-primary,
.label-primary,
span.label-primary { background: var(--nx-primary-xlight); color: var(--nx-primary-dark); }
.badge-success,
.label-success,
span.label-success { background: var(--nx-success-bg); color: #16a34a; }
.badge-danger,
.label-danger,
span.label-danger  { background: var(--nx-danger-bg); color: #dc2626; }
.badge-warning,
.label-warning,
span.label-warning { background: var(--nx-warning-bg); color: #b45309; }
.badge-info,
.label-info,
span.label-info    { background: var(--nx-info-bg); color: #0e7490; }
.badge-secondary,
.label-default     { background: var(--nx-surface-2); color: var(--nx-text-muted); }

/* ── 11. ALERTS ────────────────────────────────────────────── */
.alert {
  border-radius: var(--nx-radius);
  padding: var(--nx-space-4) var(--nx-space-5);
  margin-bottom: var(--nx-space-4);
  border: 1.5px solid transparent;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: var(--nx-space-3);
}
.alert::before {
  font-family: 'remixicon';
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.alert-success { background: var(--nx-success-bg); border-color: #86efac; color: #166534; }
.alert-success::before { content: '\ee97'; color: var(--nx-success); }
.alert-danger,
.alert-error   { background: var(--nx-danger-bg); border-color: #fca5a5; color: #991b1b; }
.alert-danger::before,
.alert-error::before { content: '\eb28'; color: var(--nx-danger); }
.alert-warning { background: var(--nx-warning-bg); border-color: #fcd34d; color: #92400e; }
.alert-warning::before { content: '\eca2'; color: var(--nx-warning); }
.alert-info    { background: var(--nx-info-bg); border-color: #67e8f9; color: #155e75; }
.alert-info::before { content: '\ee59'; color: var(--nx-info); }

/* Flash message */
.flash-message-container .alert { animation: slideDown .3s ease-out; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 12. BREADCRUMBS ───────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--nx-space-4);
  font-size: 13px;
}
.breadcrumb li { display: flex; align-items: center; gap: 4px; }
.breadcrumb li a { color: var(--nx-text-muted); }
.breadcrumb li a:hover { color: var(--nx-primary); }
.breadcrumb li.active { color: var(--nx-text-muted); }
.breadcrumb li + li::before {
  content: '/';
  color: var(--nx-text-light);
}

/* ── 13. PAGE HEADERS ──────────────────────────────────────── */
.page-header-wrap,
.nexia-page-header {
  background: var(--nx-gradient-dark);
  padding: var(--nx-space-16) 0 var(--nx-space-12);
  margin-bottom: var(--nx-space-12);
  position: relative;
  overflow: hidden;
}
.page-header-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-header-wrap .page-header-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: white;
  margin-bottom: var(--nx-space-3);
  position: relative;
}
.page-header-wrap .page-header-subtitle {
  color: rgba(255,255,255,.7);
  font-size: 16px;
  position: relative;
  max-width: 600px;
}

/* Inner page header (smaller) */
.inner-page-header {
  padding: var(--nx-space-10) 0 var(--nx-space-8);
  background: var(--nx-gradient-dark);
  margin-bottom: var(--nx-space-8);
}
.inner-page-header h1 { color: white; font-size: 1.75rem; margin-bottom: var(--nx-space-2); }
.inner-page-header .breadcrumb li { color: rgba(255,255,255,.6); }
.inner-page-header .breadcrumb li a { color: rgba(255,255,255,.7); }
.inner-page-header .breadcrumb li a:hover { color: white; }
.inner-page-header .breadcrumb li + li::before { color: rgba(255,255,255,.3); }

/* ── 14. AUTH PAGES (login, register, pwreset) ─────────────── */
section#main-body.auth-page,
body .account-page {
  background: var(--nx-bg);
  padding: 0;
  min-height: calc(100vh - 120px);
}
body .account-page.user-form-body {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 120px);
}

.auth-wrapper {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nx-space-8) var(--nx-space-4);
  background: var(--nx-bg);
}

.auth-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-xl);
  box-shadow: var(--nx-shadow-xl);
  padding: var(--nx-space-10) var(--nx-space-8);
  width: 100%;
  max-width: 480px;
}

.auth-logo { text-align: center; margin-bottom: var(--nx-space-8); }
.auth-logo img { height: 40px; }

.auth-heading {
  font-size: 24px;
  font-weight: 800;
  color: var(--nx-text);
  margin-bottom: var(--nx-space-2);
}
.auth-subheading {
  font-size: 15px;
  color: var(--nx-text-muted);
  margin-bottom: var(--nx-space-6);
}

/* Account page inner (existing templates) */
.account-page .inner,
.user-form-body .inner {
  background: var(--nx-surface);
  border-radius: var(--nx-radius-xl);
  padding: var(--nx-space-10) var(--nx-space-8);
  box-shadow: var(--nx-shadow-xl);
  border: 1px solid var(--nx-border);
}

.user-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--nx-primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--nx-space-2);
}
.user-disc {
  font-size: 22px;
  font-weight: 700;
  color: var(--nx-text);
  margin-bottom: var(--nx-space-6);
  line-height: 1.3;
}

.forgot-text,
.another-link {
  font-size: 13px;
  color: var(--nx-primary);
  font-weight: 500;
}
.forgot-text:hover,
.another-link:hover { color: var(--nx-primary-dark); }

.next-link {
  font-size: 14px;
  color: var(--nx-text-muted);
}
.next-link a { color: var(--nx-primary); font-weight: 600; }

/* Auth side panel */
.user-page-ads {
  background: var(--nx-gradient-dark);
  border-radius: var(--nx-radius-xl);
  padding: var(--nx-space-8);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 15. DASHBOARD CLIENT AREA ─────────────────────────────── */
.tiles.clearfix { margin-bottom: var(--nx-space-6); }
.tiles .row { gap-y: var(--nx-space-4); }

/* KB search */
.home-kb-search {
  position: relative;
  margin: var(--nx-space-6) 0;
}
.home-kb-search input {
  padding-left: 48px !important;
  border-radius: var(--nx-radius-pill) !important;
  background: var(--nx-surface);
  border-color: var(--nx-border);
  box-shadow: var(--nx-shadow-sm);
  font-size: 15px;
}
.home-kb-search input:focus { border-color: var(--nx-primary); }
.home-kb-search i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-text-muted);
  font-size: 18px;
}

/* Client home cards */
.client-home-cards,
.tt-client-home-cards { margin-top: var(--nx-space-6); }

/* ── 16. PANELS (sidebar widget style) ─────────────────────── */
.panel,
.panel-default,
.card-default {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-sm);
  margin-bottom: var(--nx-space-4);
  overflow: hidden;
}
.panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--nx-border);
  padding: var(--nx-space-4) var(--nx-space-5);
}
.panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--nx-text);
  margin: 0;
}
.panel-body { padding: var(--nx-space-5); }
.panel-footer {
  background: var(--nx-surface-2);
  border-top: 1px solid var(--nx-border);
  padding: var(--nx-space-3) var(--nx-space-5);
}

/* ── 17. SIDEBAR ───────────────────────────────────────────── */
.sidebar {
  width: 240px;
  flex-shrink: 0;
}
.sidebar-nav { list-style: none; margin: 0; padding: 0; }
.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  padding: 10px 16px;
  color: var(--nx-text-muted);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--nx-radius);
  transition: var(--nx-transition);
  margin-bottom: 2px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active a {
  background: var(--nx-primary-xlight);
  color: var(--nx-primary-dark);
}
.sidebar-nav li a i { font-size: 18px; color: var(--nx-primary); }

/* ── 18. MODALS ────────────────────────────────────────────── */
.modal-content {
  border: none;
  border-radius: var(--nx-radius-xl);
  box-shadow: var(--nx-shadow-xl);
  overflow: hidden;
}
.modal-header {
  background: var(--nx-surface-2);
  border-bottom: 1px solid var(--nx-border);
  padding: var(--nx-space-5) var(--nx-space-6);
}
.modal-title { font-size: 17px; font-weight: 700; }
.modal-body { padding: var(--nx-space-6); }
.modal-footer {
  border-top: 1px solid var(--nx-border);
  padding: var(--nx-space-4) var(--nx-space-6);
  gap: var(--nx-space-2);
}
.modal-footer .btn { min-width: 100px; }

/* ── 19. TABS ──────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--nx-border);
  margin-bottom: var(--nx-space-5);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--nx-text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--nx-radius-sm) var(--nx-radius-sm) 0 0;
  transition: var(--nx-transition);
  margin-bottom: -2px;
}
.nav-tabs .nav-link:hover { color: var(--nx-primary); background: var(--nx-primary-xlight); }
.nav-tabs .nav-link.active {
  color: var(--nx-primary);
  border-bottom-color: var(--nx-primary);
  background: transparent;
}

/* Nav pills */
.nav-pills .nav-link {
  border-radius: var(--nx-radius-pill);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  color: var(--nx-text-muted);
  transition: var(--nx-transition);
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
  background: var(--nx-primary);
  color: white;
}

/* ── 20. PAGINATION ────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: var(--nx-space-6) 0 0;
  flex-wrap: wrap;
}
.pagination .page-item .page-link {
  width: 36px;
  height: 36px;
  border-radius: var(--nx-radius-sm);
  border: 1px solid var(--nx-border);
  background: var(--nx-surface);
  color: var(--nx-text-muted);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--nx-transition);
  text-decoration: none;
}
.pagination .page-item .page-link:hover {
  background: var(--nx-primary-xlight);
  color: var(--nx-primary);
  border-color: var(--nx-primary-light);
}
.pagination .page-item.active .page-link {
  background: var(--nx-primary);
  color: white;
  border-color: var(--nx-primary);
}
.pagination .page-item.disabled .page-link { opacity: .5; cursor: not-allowed; }

/* ── 21. SECTION HEADINGS ──────────────────────────────────── */
.section-heading {
  margin-bottom: var(--nx-space-10);
}
.section-heading.center { text-align: center; }
.section-heading .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--nx-primary);
  background: var(--nx-primary-xlight);
  padding: 4px 14px;
  border-radius: var(--nx-radius-pill);
  margin-bottom: var(--nx-space-4);
}
.section-heading h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--nx-text);
  margin-bottom: var(--nx-space-4);
}
.section-heading p {
  font-size: 16px;
  color: var(--nx-text-muted);
  max-width: 560px;
}
.section-heading.center p { margin: 0 auto; }

.gap-bottom { margin-bottom: var(--nx-space-8); }
.section-gap { padding: var(--nx-space-20) 0; }
.section-gap-sm { padding: var(--nx-space-12) 0; }

/* ── 22. PRICING / PRODUCT CARDS ──────────────────────────── */
.pricing-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-xl);
  padding: var(--nx-space-8);
  text-align: center;
  transition: var(--nx-transition);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pricing-card:hover {
  border-color: var(--nx-primary);
  box-shadow: var(--nx-shadow-color);
  transform: translateY(-4px);
}
.pricing-card.featured {
  border-color: var(--nx-primary);
  background: var(--nx-gradient-card);
}
.pricing-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: 16px;
  right: -28px;
  background: var(--nx-gradient);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 40px;
  transform: rotate(45deg);
  letter-spacing: .05em;
}
.pricing-card .plan-name {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--nx-primary);
  margin-bottom: var(--nx-space-2);
}
.pricing-card .plan-price {
  font-size: 48px;
  font-weight: 900;
  color: var(--nx-text);
  line-height: 1;
  margin: var(--nx-space-3) 0;
}
.pricing-card .plan-price span {
  font-size: 18px;
  font-weight: 400;
  color: var(--nx-text-muted);
}
.pricing-card .plan-period {
  font-size: 13px;
  color: var(--nx-text-muted);
  margin-bottom: var(--nx-space-6);
}
.pricing-card .plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--nx-space-6);
  text-align: left;
  flex: 1;
}
.pricing-card .plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--nx-space-2);
  padding: 6px 0;
  font-size: 14px;
  color: var(--nx-text-muted);
  border-bottom: 1px solid var(--nx-border);
}
.pricing-card .plan-features li:last-child { border-bottom: none; }
.pricing-card .plan-features li i {
  color: var(--nx-success);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.pricing-card .plan-features li.disabled i { color: var(--nx-text-light); }
.pricing-card .plan-features li.disabled { color: var(--nx-text-light); }

/* ── 23. FEATURES GRID ──────────────────────────────────────── */
.feature-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-space-6);
  transition: var(--nx-transition);
  height: 100%;
}
.feature-card:hover {
  border-color: var(--nx-primary);
  box-shadow: var(--nx-shadow);
  transform: translateY(-2px);
}
.feature-icon {
  width: 56px;
  height: 56px;
  background: var(--nx-gradient);
  border-radius: var(--nx-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--nx-space-4);
}
.feature-icon i { font-size: 24px; color: white; }
.feature-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--nx-space-2);
  color: var(--nx-text);
}
.feature-card p { font-size: 14px; color: var(--nx-text-muted); margin: 0; }

/* ── 24. HERO SECTIONS ──────────────────────────────────────── */
.hero-section {
  background: var(--nx-gradient-dark);
  padding: var(--nx-space-24) 0 var(--nx-space-20);
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,.2) 0%, transparent 70%);
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(14,165,233,.15) 0%, transparent 70%);
  pointer-events: none;
}
.hero-section .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--nx-primary-light);
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  padding: 5px 14px;
  border-radius: var(--nx-radius-pill);
  margin-bottom: var(--nx-space-5);
}
.hero-section h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: white;
  line-height: 1.1;
  margin-bottom: var(--nx-space-5);
}
.hero-section p.lead {
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,.75);
  max-width: 560px;
  margin-bottom: var(--nx-space-8);
}
.hero-section .hero-actions {
  display: flex;
  align-items: center;
  gap: var(--nx-space-4);
  flex-wrap: wrap;
}
.hero-trust-bar {
  display: flex;
  align-items: center;
  gap: var(--nx-space-6);
  flex-wrap: wrap;
  margin-top: var(--nx-space-10);
  padding-top: var(--nx-space-8);
  border-top: 1px solid rgba(255,255,255,.08);
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  font-size: 13px;
  color: rgba(255,255,255,.65);
}
.hero-trust-item i { color: var(--nx-primary-light); font-size: 16px; }

/* ── 25. DOMAIN SEARCH ──────────────────────────────────────── */
.domain-search-box {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  border-radius: var(--nx-radius-xl);
  padding: var(--nx-space-6);
  max-width: 680px;
}
.domain-search-form {
  display: flex;
  gap: var(--nx-space-2);
  align-items: stretch;
}
.domain-search-form input {
  flex: 1;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: white !important;
  border-radius: var(--nx-radius) !important;
  font-size: 16px !important;
  padding: 14px 18px !important;
}
.domain-search-form input::placeholder { color: rgba(255,255,255,.5) !important; }
.domain-search-form input:focus {
  background: rgba(255,255,255,.15) !important;
  border-color: var(--nx-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.2) !important;
}

/* ── 26. TLD CHIPS ──────────────────────────────────────────── */
.tld-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--nx-radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  gap: var(--nx-space-2);
  cursor: pointer;
  transition: var(--nx-transition);
}
.tld-chip:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  color: white;
}
.tld-chip .price { color: var(--nx-primary-light); font-size: 12px; }

/* ── 27. SERVER STATUS ──────────────────────────────────────── */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.status-operational { background: var(--nx-success); box-shadow: 0 0 6px rgba(34,197,94,.5); }
.status-degraded    { background: var(--nx-warning); }
.status-outage      { background: var(--nx-danger); animation: pulse 1s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ── 28. FOOTER ─────────────────────────────────────────────── */
.theme-footer,
footer.theme-footer {
  background: var(--nx-dark);
  color: var(--nx-dark-muted);
  font-size: 14px;
}

.footer-sky-panel {
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
  padding: var(--nx-space-20) 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.footer-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nx-space-10);
  flex-wrap: wrap;
  margin-bottom: var(--nx-space-12);
}
.footer-hero-copy .footer-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--nx-primary-light);
  margin-bottom: var(--nx-space-3);
  display: block;
}
.footer-hero-copy h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.875rem);
  font-weight: 800;
  color: white;
  max-width: 480px;
  margin-bottom: var(--nx-space-4);
}
.footer-hero-copy p { color: rgba(255,255,255,.6); max-width: 440px; }
.footer-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  flex-wrap: wrap;
  flex-shrink: 0;
  align-self: center;
}

.footer-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--nx-space-4);
}
.footer-contact-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-space-5);
  transition: var(--nx-transition);
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-3);
}
.footer-contact-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(99,102,241,.3);
}
.footer-contact-icon {
  width: 44px;
  height: 44px;
  background: rgba(99,102,241,.15);
  border-radius: var(--nx-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-contact-icon i { font-size: 20px; color: var(--nx-primary-light); }
.footer-contact-card strong { color: white; font-size: 15px; display: block; }
.footer-contact-card p { color: rgba(255,255,255,.55); font-size: 13px; margin: 0; }
.footer-contact-card a {
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-primary-light);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.footer-contact-card a:hover { color: white; }

.footer-link-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--nx-space-8);
  padding: var(--nx-space-12) 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

@media (max-width: 1023px) {
  .footer-link-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .footer-link-grid { grid-template-columns: 1fr; }
}

.footer-brand-card { display: flex; flex-direction: column; gap: var(--nx-space-4); }
.footer-logo-link img { height: 32px; }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.6; }

.footer-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-space-2);
}
.footer-meta-pills span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 3px 10px;
  border-radius: var(--nx-radius-pill);
}
.footer-meta-pills span i { font-size: 12px; color: var(--nx-primary-light); }

.footer-social-icons {
  display: flex;
  gap: var(--nx-space-2);
}
.footer-social-icons a {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--nx-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-dark-muted);
  font-size: 16px;
  transition: var(--nx-transition);
}
.footer-social-icons a:hover {
  background: var(--nx-primary);
  border-color: var(--nx-primary);
  color: white;
  transform: translateY(-2px);
}

.footer-payment-img img { max-width: 200px; opacity: .7; }
.footer-payment-img img:hover { opacity: 1; }

.footer-col-head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  margin-bottom: var(--nx-space-4);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-list li a {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  transition: var(--nx-transition);
  display: flex;
  align-items: center;
  gap: 4px;
}
.footer-list li a:hover {
  color: white;
  padding-left: 4px;
}
.footer-list.compact { gap: 6px; }

.footer-bottom {
  padding: var(--nx-space-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--nx-space-4);
  font-size: 13px;
  color: rgba(255,255,255,.35);
}
.footer-bottom a { color: rgba(255,255,255,.45); }
.footer-bottom a:hover { color: rgba(255,255,255,.8); }
.footer-bottom-links { display: flex; gap: var(--nx-space-5); flex-wrap: wrap; }

/* ── 29. INVOICE / QUOTE PAGES ──────────────────────────────── */
.invoice-header {
  background: var(--nx-dark);
  color: white;
  border-radius: var(--nx-radius-lg) var(--nx-radius-lg) 0 0;
  padding: var(--nx-space-8);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--nx-space-5);
}
.invoice-number {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
}
.invoice-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--nx-radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.invoice-status-paid { background: rgba(34,197,94,.15); color: #4ade80; }
.invoice-status-unpaid { background: rgba(239,68,68,.15); color: #f87171; }
.invoice-status-draft { background: rgba(148,163,184,.15); color: #94a3b8; }

.invoice-body { padding: var(--nx-space-8); }
.invoice-table { width: 100%; }
.invoice-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--nx-text-muted);
  padding: 8px 0;
  border-bottom: 2px solid var(--nx-border);
}
.invoice-table td { padding: 12px 0; border-bottom: 1px solid var(--nx-border); }
.invoice-totals { max-width: 320px; margin-left: auto; }
.invoice-total-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  color: var(--nx-text-muted);
  border-bottom: 1px solid var(--nx-border);
}
.invoice-total-row.grand {
  font-size: 18px;
  font-weight: 800;
  color: var(--nx-text);
  border-bottom: none;
  margin-top: var(--nx-space-2);
}
.invoice-total-row.grand .amount { color: var(--nx-primary); }

/* ── 30. SUPPORT TICKETS ────────────────────────────────────── */
.ticket-row {
  display: flex;
  align-items: center;
  gap: var(--nx-space-4);
  padding: var(--nx-space-4);
  border-bottom: 1px solid var(--nx-border);
  transition: var(--nx-transition);
}
.ticket-row:hover { background: var(--nx-surface-2); }
.ticket-subject { font-weight: 600; color: var(--nx-text); margin-bottom: 2px; }
.ticket-meta { font-size: 13px; color: var(--nx-text-muted); }
.ticket-status { flex-shrink: 0; }

/* ── 31. DOMAIN MANAGEMENT ──────────────────────────────────── */
.domain-row {
  display: flex;
  align-items: center;
  gap: var(--nx-space-4);
  padding: var(--nx-space-4) 0;
  border-bottom: 1px solid var(--nx-border);
}
.domain-name {
  font-weight: 700;
  color: var(--nx-text);
  font-size: 15px;
}
.domain-tld-badge {
  background: var(--nx-primary-xlight);
  color: var(--nx-primary);
  padding: 2px 8px;
  border-radius: var(--nx-radius-pill);
  font-size: 12px;
  font-weight: 700;
}

/* ── 32. KNOWLEDGEBASE ──────────────────────────────────────── */
.kb-cat-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-space-5);
  transition: var(--nx-transition);
  height: 100%;
}
.kb-cat-card:hover {
  border-color: var(--nx-primary);
  box-shadow: var(--nx-shadow);
  text-decoration: none;
}
.kb-cat-icon {
  font-size: 32px;
  color: var(--nx-primary);
  margin-bottom: var(--nx-space-3);
}
.kb-cat-card h4 { font-size: 16px; font-weight: 700; color: var(--nx-text); }
.kb-cat-card p { font-size: 14px; color: var(--nx-text-muted); }
.kb-article-link {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--nx-border);
  color: var(--nx-text);
  font-size: 14px;
  transition: var(--nx-transition);
}
.kb-article-link:hover { color: var(--nx-primary); padding-left: 8px; }
.kb-article-link i { color: var(--nx-primary-light); flex-shrink: 0; }

/* ── 33. ANNOUNCEMENTS ──────────────────────────────────────── */
.announcement-item {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-space-6);
  margin-bottom: var(--nx-space-4);
  transition: var(--nx-transition);
}
.announcement-item:hover { box-shadow: var(--nx-shadow); }
.announcement-date {
  font-size: 12px;
  color: var(--nx-text-muted);
  margin-bottom: var(--nx-space-2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.announcement-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--nx-text);
  margin-bottom: var(--nx-space-2);
}
.announcement-excerpt { font-size: 14px; color: var(--nx-text-muted); }

/* ── 34. TESTIMONIALS ───────────────────────────────────────── */
.testimonial-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-xl);
  padding: var(--nx-space-8);
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  font-size: 80px;
  color: var(--nx-primary);
  opacity: .15;
  position: absolute;
  top: 10px;
  left: 20px;
  line-height: 1;
  font-family: Georgia, serif;
}
.testimonial-stars { color: #f59e0b; font-size: 16px; margin-bottom: var(--nx-space-3); }
.testimonial-text {
  font-size: 15px;
  color: var(--nx-text-muted);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: var(--nx-space-5);
  position: relative;
}
.testimonial-author { display: flex; align-items: center; gap: var(--nx-space-3); }
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nx-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.testimonial-author-name { font-weight: 700; font-size: 14px; color: var(--nx-text); }
.testimonial-author-role { font-size: 12px; color: var(--nx-text-muted); }

/* ── 35. NO DATA / EMPTY STATE ──────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--nx-space-20) var(--nx-space-8);
  color: var(--nx-text-muted);
}
.empty-state i {
  font-size: 56px;
  color: var(--nx-text-light);
  margin-bottom: var(--nx-space-5);
}
.empty-state h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--nx-text);
  margin-bottom: var(--nx-space-2);
}
.empty-state p { font-size: 14px; }

/* ── 36. LOADING & SPINNER ──────────────────────────────────── */
#fullpage-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}
#fullpage-overlay.hidden { display: none; }
.nx-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--nx-primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 37. UTILITY OVERRIDES ──────────────────────────────────── */
.text-primary   { color: var(--nx-primary) !important; }
.text-secondary { color: var(--nx-secondary) !important; }
.text-success   { color: var(--nx-success) !important; }
.text-danger    { color: var(--nx-danger) !important; }
.text-warning   { color: var(--nx-warning) !important; }
.text-muted     { color: var(--nx-text-muted) !important; }
.text-dark      { color: var(--nx-text) !important; }
.text-light     { color: var(--nx-text-light) !important; }
.text-white     { color: white !important; }

.bg-primary { background: var(--nx-primary) !important; }
.bg-success { background: var(--nx-success) !important; }
.bg-danger  { background: var(--nx-danger) !important; }
.bg-warning { background: var(--nx-warning) !important; }
.bg-light   { background: var(--nx-surface-2) !important; }
.bg-dark    { background: var(--nx-dark) !important; }
.bg-white   { background: white !important; }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

.rounded { border-radius: var(--nx-radius) !important; }
.rounded-lg { border-radius: var(--nx-radius-lg) !important; }
.rounded-xl { border-radius: var(--nx-radius-xl) !important; }
.rounded-pill { border-radius: var(--nx-radius-pill) !important; }

.shadow-sm  { box-shadow: var(--nx-shadow-sm) !important; }
.shadow     { box-shadow: var(--nx-shadow) !important; }
.shadow-lg  { box-shadow: var(--nx-shadow-lg) !important; }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }

/* ── 38. SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--nx-surface-2); }
::-webkit-scrollbar-thumb { background: var(--nx-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--nx-primary-light); }

/* ── 39. RESPONSIVE BREAKPOINTS ────────────────────────────── */
@media (max-width: 1199px) {
  .footer-link-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .nabbar-nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .main-header-inner { justify-content: space-between; }
}

@media (max-width: 991px) {
  .account-page .row { flex-direction: column; }
  .account-page .col-lg-6:last-child { display: none; }
  .footer-hero { flex-direction: column; }
  .footer-hero-actions { align-self: flex-start; }
  .footer-link-grid { grid-template-columns: 1fr 1fr; gap: var(--nx-space-5); }
  section#main-body, #main-body { padding: var(--nx-space-8) 0; }
}

@media (max-width: 767px) {
  .top-bar { display: none; }
  .auth-card { padding: var(--nx-space-8) var(--nx-space-5); }
  .account-page .inner { padding: var(--nx-space-8) var(--nx-space-5); }
  .footer-link-grid { grid-template-columns: 1fr; }
  .footer-sky-panel { padding: var(--nx-space-12) 0; }
  .hero-section { padding: var(--nx-space-16) 0 var(--nx-space-12); }
}

@media (max-width: 575px) {
  .tile, .tt-single-box { padding: var(--nx-space-4); }
  .tile > i, .tt-single-box > i { width: 44px; height: 44px; font-size: 24px; }
  .tile .tt-box-info .stat { font-size: 22px; }
  .main-header { padding: 10px 0; }
  .invoice-header { flex-direction: column; }
}

/* ── 40. PRINT STYLES ───────────────────────────────────────── */
@media print {
  .header, .theme-footer, .sidebar { display: none !important; }
  body { font-size: 12pt; color: black; background: white; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}

/* ── 41. WHMCS-SPECIFIC OVERRIDES ──────────────────────────── */

/* Fix WHMCS float-based layouts */
.clearfix::after { content: ''; display: table; clear: both; }
.float-right { float: right; }
.float-left { float: left; }
.pull-right { float: right; }
.pull-left { float: left; }
.hidden { display: none !important; }

/* WHMCS panel-body class */
.panel-body > :last-child { margin-bottom: 0; }

/* WHMCS input-lg */
.input-lg { padding: 12px 16px; font-size: 16px; }

/* WHMCS close button */
button.close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--nx-text-muted);
  padding: 0;
  line-height: 1;
  transition: var(--nx-transition);
}
button.close:hover { color: var(--nx-danger); }

/* WHMCS btn-xs */
.btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 4px; font-weight: 500; }

/* WHMCS list-group */
.list-group {
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
  border: 1px solid var(--nx-border);
}
.list-group-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--nx-border);
  font-size: 14px;
  background: var(--nx-surface);
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  transition: var(--nx-transition);
}
.list-group-item:last-child { border-bottom: none; }
.list-group-item.active {
  background: var(--nx-primary);
  color: white;
  border-color: var(--nx-primary);
}
.list-group-item:hover:not(.active) { background: var(--nx-surface-2); }

/* WHMCS well */
.well {
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  padding: var(--nx-space-5);
}

/* WHMCS col-form-label */
.col-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* WHMCS help-block / form-text */
.help-block, .form-text {
  font-size: 12px;
  color: var(--nx-text-muted);
  margin-top: 4px;
  display: block;
}

/* WHMCS has-error */
.has-error .form-control,
.has-error .inputs,
.is-invalid { border-color: var(--nx-danger) !important; }
.has-error .help-block,
.invalid-feedback { color: var(--nx-danger); font-size: 12px; }

/* WHMCS margin helpers */
.margin-bottom { margin-bottom: var(--nx-space-4); }
.margin-top    { margin-top: var(--nx-space-4); }
.no-margin     { margin: 0 !important; }

/* WHMCS fa (Font Awesome) icon sizing */
.fad, .fas, .far, .fab { font-size: inherit; }

/* WHMCS dropdown-divider */
.dropdown-divider {
  border-top: 1px solid var(--nx-border);
  margin: var(--nx-space-2) 0;
}

/* WHMCS success/error color text */
.text-color-green, .text-success-custom { color: var(--nx-success); }
.text-color-red, .text-danger-custom    { color: var(--nx-danger); }

/* bg-color-* classes used in client area */
.bg-color-blue   { background: #3b82f6; color: white; }
.bg-color-green  { background: var(--nx-success); color: white; }
.bg-color-red    { background: var(--nx-danger); color: white; }
.bg-color-yellow { background: var(--nx-warning); color: white; }
.bg-color-purple { background: var(--nx-primary); color: white; }

/* ── 42. SPECIFIC PAGE ENHANCEMENTS ────────────────────────── */

/* viewinvoice */
#invoiceDetailsTable th { white-space: nowrap; }
.invoice-print-actions {
  display: flex;
  gap: var(--nx-space-3);
  margin-bottom: var(--nx-space-6);
  flex-wrap: wrap;
}

/* configuressl */
.ssl-step-indicator {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  margin-bottom: var(--nx-space-8);
}
.ssl-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nx-surface-2);
  border: 2px solid var(--nx-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--nx-text-muted);
}
.ssl-step.active {
  background: var(--nx-primary);
  border-color: var(--nx-primary);
  color: white;
}
.ssl-step.done {
  background: var(--nx-success);
  border-color: var(--nx-success);
  color: white;
}
.ssl-step-connector {
  flex: 1;
  height: 2px;
  background: var(--nx-border);
}
.ssl-step-connector.done { background: var(--nx-success); }

/* 2FA page */
.two-factor-card {
  max-width: 480px;
  margin: var(--nx-space-8) auto;
  background: var(--nx-surface);
  border-radius: var(--nx-radius-xl);
  box-shadow: var(--nx-shadow-lg);
  overflow: hidden;
}
.two-factor-card .card-header {
  background: var(--nx-gradient-dark);
  padding: var(--nx-space-8);
  text-align: center;
}
.two-factor-card .card-header h3 { color: white; margin: 0; }
.two-factor-card .card-body { padding: var(--nx-space-8); }

/* affiliate page */
.affiliate-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--nx-space-5);
  margin-bottom: var(--nx-space-8);
}
.affiliate-stat-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-space-6);
  text-align: center;
}
.affiliate-stat-card .amount {
  font-size: 32px;
  font-weight: 900;
  color: var(--nx-primary);
  margin-bottom: var(--nx-space-1);
}
.affiliate-stat-card .label { font-size: 13px; color: var(--nx-text-muted); }

/* contact form */
.contact-info-card {
  background: var(--nx-gradient-dark);
  border-radius: var(--nx-radius-xl);
  padding: var(--nx-space-8);
  color: white;
  height: 100%;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--nx-space-4);
  margin-bottom: var(--nx-space-6);
}
.contact-info-item i {
  font-size: 22px;
  color: var(--nx-primary-light);
  margin-top: 2px;
  flex-shrink: 0;
}
.contact-info-item h5 { color: white; font-size: 14px; margin-bottom: 4px; }
.contact-info-item p { color: rgba(255,255,255,.65); font-size: 14px; margin: 0; }

/* ── 43. MOBILE NAVIGATION DRAWER ─────────────────────────── */

/* Mobile drawer overlay (backdrop) */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: -1;
  transition: background .3s;
  pointer-events: none;
}
.mobile-drawer.open .mobile-drawer-overlay {
  background: rgba(0,0,0,.55);
  z-index: 2000;
  pointer-events: all;
}

/* Drawer panel */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 90vw;
  height: 100%;
  background: var(--nx-dark);
  z-index: 2001;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.mobile-drawer.open {
  transform: translateX(0);
  pointer-events: all;
  box-shadow: var(--nx-shadow-xl);
}

.mobile-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  position: relative;
  z-index: 2002;
  padding: var(--nx-space-5);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--nx-space-5);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: var(--nx-space-5);
}
.mobile-drawer-header .navbar-brand img { height: 28px; }

.mobile-drawer-close {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--nx-radius-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: var(--nx-transition);
}
.mobile-drawer-close:hover { background: rgba(255,255,255,.15); }

/* Mobile menu */
.mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.mobile-menu li a {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  padding: 12px 14px;
  color: rgba(255,255,255,.8);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--nx-radius);
  transition: var(--nx-transition);
  cursor: pointer;
}
.mobile-menu li a:hover { background: rgba(255,255,255,.08); color: white; }
.mobile-menu li a i { font-size: 18px; color: var(--nx-primary-light); }
.mobile-menu li a .sub-arrow { margin-left: auto; font-size: 18px; transition: transform .25s; color: rgba(255,255,255,.4); }
.mobile-has-sub.open > a .sub-arrow { transform: rotate(180deg); }

.mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--nx-space-6);
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
}
.mobile-has-sub.open .mobile-submenu { max-height: 500px; }
.mobile-submenu li a {
  font-size: 14px;
  padding: 8px 10px;
  color: rgba(255,255,255,.6);
  border-radius: var(--nx-radius-sm);
}
.mobile-submenu li a:hover { color: white; background: rgba(255,255,255,.06); }

/* Mobile action buttons */
.mobile-menu .mobile-login-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--nx-radius) !important;
  justify-content: center;
  margin-top: var(--nx-space-2);
  color: white !important;
}
.mobile-menu .mobile-register-btn {
  background: var(--nx-gradient) !important;
  border-radius: var(--nx-radius) !important;
  justify-content: center;
  margin-top: var(--nx-space-2);
  color: white !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
}

/* Mobile trust bar */
.mobile-trust {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-2);
  margin-top: var(--nx-space-5);
  padding-top: var(--nx-space-5);
  border-top: 1px solid rgba(255,255,255,.08);
}
.mobile-trust span {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  font-size: 12px;
  color: rgba(255,255,255,.45);
}
.mobile-trust span i { color: var(--nx-primary-light); font-size: 14px; }

/* Mobile hamburger button */
.navbar-button {
  background: none;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: var(--nx-radius-sm);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  font-size: 20px;
  transition: var(--nx-transition);
}
.navbar-button:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.navbar-button .icon {
  display: block;
  width: 20px;
  height: 2px;
  background: white;
  position: relative;
  transition: var(--nx-transition);
}
.navbar-button .icon::before,
.navbar-button .icon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: white;
  left: 0;
  transition: var(--nx-transition);
}
.navbar-button .icon::before { top: -6px; }
.navbar-button .icon::after  { top: 6px; }

/* Nav mobiles (cart icon + hamburger) */
.nav-mobiles {
  display: none;
  align-items: center;
  gap: var(--nx-space-3);
}
@media (max-width: 1199px) {
  .nav-mobiles { display: flex; }
}

/* Cart icon in nav */
.cart-item-count,
.nav-mobiles .cart-item-count {
  position: relative;
  color: rgba(255,255,255,.8);
  font-size: 20px;
  transition: var(--nx-transition);
}
.cart-item-count:hover { color: white; }
.cart-item-count .number {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--nx-danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: var(--nx-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Desktop cart in mainmenu */
.mainmenu .cart > a {
  position: relative;
  padding: 8px 10px;
  color: rgba(255,255,255,.8);
  font-size: 20px;
  border-radius: var(--nx-radius-sm);
  display: flex;
  align-items: center;
}
.mainmenu .cart > a:hover { background: rgba(255,255,255,.08); color: white; }
.mainmenu .cart .item-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--nx-danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: var(--nx-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Desktop nav action buttons */
.mainmenu .nav-btn {
  padding: 8px 16px;
  border-radius: var(--nx-radius-sm);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--nx-transition);
}
.mainmenu .nav-btn.nav-btn-ghost {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.12);
}
.mainmenu .nav-btn.nav-btn-ghost:hover {
  background: rgba(255,255,255,.14);
  color: white !important;
}
.mainmenu .nav-btn.nav-btn-primary {
  background: var(--nx-gradient);
  color: white !important;
  box-shadow: 0 3px 10px rgba(99,102,241,.35);
}
.mainmenu .nav-btn.nav-btn-primary:hover {
  box-shadow: 0 5px 16px rgba(99,102,241,.5);
  transform: translateY(-1px);
}

/* Megamenu open state via .open class (JS-controlled) */
.mainmenu li.has-droupdown.open > ul.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

/* Header scrolled state */
.main-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}

/* ── WHMCS LEGACY CLASS ALIASES ─────────────────────────────── */
/* Map old theme-specific classes to the new design system */
.bg-gray-light, .tt-custom-card { background: var(--nx-surface) !important; }
.bg-primary-lights { background: var(--nx-primary-xlight) !important; }
.control-label { font-size: 13px; font-weight: 600; color: var(--nx-text); margin-bottom: 4px; display: block; }
.form-group { margin-bottom: 16px; }
.panel { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); overflow: hidden; margin-bottom: 20px; }
.panel-heading { background: var(--nx-surface-2); padding: 14px 20px; border-bottom: 1px solid var(--nx-border); }
.panel-body { padding: 20px; }
.panel-title { font-size: 15px; font-weight: 700; color: var(--nx-text); margin: 0; }
.panel-primary .panel-heading { background: var(--nx-primary); color: white; }
.panel-success .panel-heading { background: var(--nx-success); color: white; }
.panel-danger .panel-heading { background: var(--nx-danger); color: white; }
.panel-warning .panel-heading { background: var(--nx-warning); color: white; }
.panel-info .panel-heading { background: var(--nx-info); color: white; }
.well { background: var(--nx-surface-2); border: 1px solid var(--nx-border); border-radius: var(--nx-radius); padding: 16px; }
.margin-bottom { margin-bottom: 16px !important; }
.tt-rounded { border-radius: var(--nx-radius-lg) !important; }
.tt-read-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--nx-primary); }
.tt-read-more:hover { color: var(--nx-primary-dark); }
.text-primary { color: var(--nx-primary) !important; }
.text-success { color: var(--nx-success) !important; }
.text-danger { color: var(--nx-danger) !important; }
.text-warning { color: var(--nx-warning) !important; }
.text-muted { color: var(--nx-text-muted) !important; }

/* Marketing helper overrides */
.section-gap { padding: 60px 0; }
.btns.one { background: var(--nx-gradient-primary); color: white; border: none; padding: 12px 28px; border-radius: var(--nx-radius-pill); font-weight: 700; cursor: pointer; font-size: 15px; transition: var(--nx-transition); }
.btns.one:hover { box-shadow: var(--nx-shadow-color); transform: translateY(-2px); }

/* ── AFFILIATE STAT TILES ────────────────────────────────────── */
.nx-stat-tile { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); padding: 20px; text-align: center; transition: var(--nx-transition); }
.nx-stat-tile:hover { border-color: var(--nx-primary); box-shadow: var(--nx-shadow-color); }
.nx-stat-tile .nx-stat-icon { font-size: 28px; color: var(--nx-primary); margin-bottom: 8px; }
.nx-stat-tile .nx-stat-val { font-size: 32px; font-weight: 800; color: var(--nx-text); line-height: 1; margin-bottom: 4px; }
.nx-stat-tile .nx-stat-label { font-size: 12px; font-weight: 600; color: var(--nx-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.nx-stat-green .nx-stat-icon, .nx-stat-green .nx-stat-val { color: var(--nx-success); }
.nx-stat-purple .nx-stat-icon, .nx-stat-purple .nx-stat-val { color: #8b5cf6; }

/* ── LANDING PAGE PLAN CARDS (plan-style-one overrides) ─────── */
.plan-style-one {
  background: var(--nx-surface) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-xl) !important;
  padding: 28px !important;
  position: relative;
  transition: var(--nx-transition) !important;
  box-shadow: none !important;
  height: 100%;
}
.plan-style-one:hover {
  border-color: var(--nx-primary) !important;
  box-shadow: var(--nx-shadow-color) !important;
  transform: translateY(-4px) !important;
}
.plan-style-one h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--nx-text);
  margin-bottom: 4px;
}
.plan-style-one > p { font-size: 12px; color: var(--nx-text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 16px; }
.plan-style-one h3 {
  font-size: 36px;
  font-weight: 900;
  color: var(--nx-primary);
  margin-bottom: 4px;
  line-height: 1;
}
.plan-style-one h3 .durection { font-size: 14px; font-weight: 500; color: var(--nx-text-muted); }
.plan-style-one .plan-select-btn,
.plan-style-one a.plan-select-btn {
  display: block;
  background: var(--nx-gradient-primary);
  color: white !important;
  border-radius: var(--nx-radius-pill);
  padding: 12px 24px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  margin: 16px 0;
  transition: var(--nx-transition);
}
.plan-style-one .plan-select-btn:hover { box-shadow: var(--nx-shadow-color); transform: translateY(-1px); }
.plan-style-one h5 { font-size: 11px; font-weight: 700; color: var(--nx-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.plan-style-one ul { list-style: none; padding: 0; margin: 0; }
.plan-style-one ul li { font-size: 13px; color: var(--nx-text); padding: 6px 0; border-bottom: 1px solid var(--nx-border); display: flex; align-items: center; gap: 8px; }
.plan-style-one ul li:last-child { border-bottom: none; }
.plan-style-one ul li::before { content: '✓'; color: var(--nx-success); font-weight: 800; font-size: 12px; flex-shrink: 0; }
/* Featured/popular plan */
.plan-style-one.featured, .plan-style-one.popular {
  border-color: var(--nx-primary) !important;
  background: linear-gradient(180deg, rgba(99,102,241,.04) 0%, var(--nx-surface) 100%) !important;
}
.plan-style-one.featured::before, .plan-style-one.popular::before {
  content: 'Most Popular';
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--nx-gradient-primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 0 0 var(--nx-radius) var(--nx-radius);
  letter-spacing: .04em;
}

/* ── PRODUCT DETAILS PAGE ────────────────────────────────────── */
div.product-details { border: none !important; background: transparent !important; padding: 0 !important; }
div.product-details div.product-status { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-radius-xl) !important; padding: 24px !important; margin-bottom: 16px !important; }
div.product-status div.product-icon { margin-bottom: 12px; }
div.product-status div.product-icon h3 { font-size: 17px !important; font-weight: 800 !important; color: var(--nx-text) !important; margin: 10px 0 4px; }
div.product-status div.product-icon h4 { font-size: 13px !important; color: var(--nx-text-muted) !important; font-weight: 600 !important; }
div.product-status div.product-icon .fa-stack { color: var(--nx-primary) !important; }
div.product-status-active div.product-status-text { color: var(--nx-success) !important; font-weight: 700; font-size: 14px; }
div.product-status-suspended div.product-status-text { color: var(--nx-danger) !important; font-weight: 700; font-size: 14px; }
div.product-status-pending div.product-status-text { color: var(--nx-warning) !important; font-weight: 700; font-size: 14px; }
div.product-status-text { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
div.product-actions-wrapper { margin-top: 14px; }
div.product-actions-wrapper .btn { border-radius: var(--nx-radius-pill) !important; font-weight: 700 !important; font-size: 13px !important; }
div.product-details div.product-status-active { border-color: rgba(34,197,94,.3) !important; }
div.product-details div.product-status-suspended { border-color: rgba(239,68,68,.3) !important; }
/* Nav tabs */
.nav-tabs .nav-link { color: var(--nx-text-muted) !important; border: none !important; border-bottom: 2px solid transparent !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 600 !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--nx-primary) !important; border-bottom-color: var(--nx-primary) !important; background: transparent !important; }
.nav-tabs { border-bottom: 1px solid var(--nx-border) !important; }
.product-details-tab-container { padding-top: 8px !important; }
/* Resource table inside product details */
.product-details table { border-collapse: collapse; width: 100%; }
.product-details table td, .product-details table th { padding: 10px 12px !important; border-bottom: 1px solid var(--nx-border) !important; font-size: 14px !important; }
.product-details table th { font-size: 12px !important; font-weight: 700 !important; color: var(--nx-text-muted) !important; text-transform: uppercase !important; letter-spacing: .04em !important; }

/* ── DOMAIN DETAILS ──────────────────────────────────────────── */
.nx-domain-detail-card { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-xl); padding: 20px; margin-bottom: 16px; }
.nx-domain-detail-card label { font-size: 12px; font-weight: 600; color: var(--nx-text-muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 4px; }
.nx-domain-detail-card .val { font-size: 15px; font-weight: 700; color: var(--nx-text); }

/* ── END ─────────────────────────────────────────────────────── */