/* ============================================================
   NEXUS THEME — Dark Tech Modern
   ============================================================ */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --bg:          #06061a;
  --bg2:         #0c0c28;
  --bg3:         #11113a;
  --card:        rgba(255,255,255,0.04);
  --card-hover:  rgba(255,255,255,0.07);
  --border:      rgba(255,255,255,0.08);
  --border-hi:   rgba(99,102,241,0.45);
  --txt:         #f1f5f9;
  --txt2:        #94a3b8;
  --txt3:        #4b5563;
  --indigo:      #6366f1;
  --indigo-lo:   rgba(99,102,241,0.18);
  --indigo-glow: rgba(99,102,241,0.35);
  --cyan:        #06b6d4;
  --cyan-lo:     rgba(6,182,212,0.15);
  --purple:      #a855f7;
  --green:       #10b981;
  --red:         #ef4444;
  --gold:        #f59e0b;
  --r:           12px;
  --r-sm:        8px;
  --r-lg:        18px;
  --shadow:      0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg:   0 12px 60px rgba(0,0,0,0.7);
  --t:           all 0.22s ease;
}

/* ── Reset / Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg) !important;
  color: var(--txt) !important;
  font-family: 'Inter', 'Open Sans', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  color: var(--txt) !important;
  font-weight: 600;
}

a             { color: #818cf8 !important; text-decoration: none; transition: var(--t); }
a:hover       { color: var(--cyan) !important; text-decoration: none; }

p, span, li   { color: inherit; }

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--indigo); border-radius: 4px; }

/* ── Top header bar ─────────────────────────────────────── */
section#header {
  background: rgba(6,6,26,0.96) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  border-radius: 0 !important;
  padding: 0 !important;
  position: sticky;
  top: 0;
  z-index: 1050;
}

section#header .container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: 1200px;
}

section#header .logo img   { max-height: 38px; width: auto; height: auto; }

section#header .logo-text,
section#header a.logo {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.55em;
  font-weight: 700;
  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

section#header ul.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

section#header .top-nav li a {
  color: var(--txt2) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  display: inline-block;
  -webkit-text-fill-color: unset;
  background: none;
}

section#header .top-nav li a:hover {
  color: var(--txt) !important;
  background: var(--card);
}

section#header .top-nav li.primary-action a {
  background: linear-gradient(135deg, var(--indigo), var(--purple)) !important;
  color: #fff !important;
  -webkit-text-fill-color: unset;
  font-weight: 600;
  border: none;
  box-shadow: 0 2px 14px var(--indigo-glow);
}

section#header .top-nav li.primary-action a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--indigo-glow);
  filter: brightness(1.08);
  background: linear-gradient(135deg, var(--indigo), var(--purple)) !important;
}

.btn-logged-in-admin {
  background: rgba(239,68,68,0.15) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  -webkit-text-fill-color: unset !important;
}

/* ── Main nav ───────────────────────────────────────────── */
section#main-menu {
  background: transparent !important;
  padding: 0;
  /* backdrop-filter on .navbar-main creates a stacking context, so the
     Store dropdown was trapped below #nexus-hero. Sit just under the
     sticky header (1050) so menus paint above page content. */
  position: relative;
  z-index: 1040;
}

.navbar-main {
  position: relative;
  z-index: 1040;
  background: rgba(11,11,33,0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  min-height: 44px;
}

.navbar-main .navbar-nav > li > a {
  color: var(--txt2) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 16px;
  border-bottom: 2px solid transparent;
  transition: var(--t);
  background: transparent !important;
  -webkit-text-fill-color: unset;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li.active > a {
  color: var(--txt) !important;
  background: transparent !important;
  border-bottom-color: var(--indigo);
}

.navbar-main .navbar-nav > li.open > a {
  color: var(--txt) !important;
  background: transparent !important;
}

.navbar-main .dropdown-menu {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  min-width: 180px;
}

.navbar-main .dropdown-menu > li > a {
  color: var(--txt2) !important;
  border-radius: 6px;
  padding: 8px 12px !important;
  font-size: 13px;
  -webkit-text-fill-color: unset;
}

.navbar-main .dropdown-menu > li > a:hover {
  background: var(--card-hover) !important;
  color: var(--txt) !important;
}

.navbar-toggle { border: 1px solid var(--border) !important; }
.navbar-toggle .icon-bar { background: var(--txt2) !important; }

/* ── Page body ──────────────────────────────────────────── */
section#main-body {
  background: transparent !important;
  padding: 32px 0 48px !important;
  min-height: calc(100vh - 240px);
}

/* ── Hero section ───────────────────────────────────────── */
#nexus-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}

#nexus-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Gradient orbs */
.nxorb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  animation: orbDrift 9s ease-in-out infinite;
}
.nxorb-a {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(99,102,241,.28), transparent 65%);
  top: -160px; left: -120px;
  animation-delay: 0s;
}
.nxorb-b {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(6,182,212,.22), transparent 65%);
  bottom: -100px; right: 8%;
  animation-delay: -3.5s;
}
.nxorb-c {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(168,85,247,.17), transparent 65%);
  top: 45%; left: 52%;
  transform: translate(-50%,-50%);
  animation-delay: -7s;
}

@keyframes orbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(28px,-18px) scale(1.06); }
  66%      { transform: translate(-18px,14px) scale(0.94); }
}

/* Hero content */
.nxhero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 100px 20px 70px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* Badge */
.nxbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 100px;
  background: rgba(99,102,241,.14);
  border: 1px solid rgba(99,102,241,.32);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a5b4fc !important;
  -webkit-text-fill-color: unset;
  margin-bottom: 32px;
  animation: fadeUp .6s ease both;
}

.nxbadge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulseGlow 2s ease infinite;
}

@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(6,182,212,.6); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(6,182,212,0); opacity: .7; }
}

/* Title */
.nxtitle {
  font-size: clamp(2.4rem,5.5vw,4.6rem);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.025em;
  color: var(--txt) !important;
  margin-bottom: 20px;
  animation: fadeUp .7s ease .08s both;
}

.nxgrad {
  background: linear-gradient(135deg, #818cf8 0%, #06b6d4 45%, #a855f7 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradShift 5s ease infinite;
}

@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Subtitle */
.nxsubtitle {
  font-size: 1.1rem;
  color: var(--txt2) !important;
  max-width: 540px;
  margin: 0 auto 44px;
  line-height: 1.7;
  animation: fadeUp .7s ease .16s both;
}

/* Search bar */
.nxsearch {
  position: relative;
  max-width: 620px;
  margin: 0 auto 52px;
  display: flex;
  border-radius: 14px;
  overflow: hidden;
  animation: fadeUp .7s ease .24s both;
  box-shadow: 0 0 0 1px var(--border), 0 0 40px rgba(99,102,241,.15);
  transition: box-shadow .3s ease;
}

.nxsearch:focus-within {
  box-shadow: 0 0 0 1px var(--indigo), 0 0 50px rgba(99,102,241,.3);
}

.nxsearch-input {
  flex: 1;
  padding: 17px 22px !important;
  background: rgba(12,12,40,.95) !important;
  border: none !important;
  color: var(--txt) !important;
  font-size: 15px !important;
  font-family: 'Inter', sans-serif;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.nxsearch-input::placeholder { color: var(--txt3) !important; }

.nxsearch .btn,
.nxsearch input[type=submit] {
  padding: 17px 26px !important;
  background: linear-gradient(135deg, var(--indigo), var(--purple)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  -webkit-text-fill-color: unset;
  transition: filter .2s ease;
}

.nxsearch .btn:hover,
.nxsearch input[type=submit]:hover { filter: brightness(1.12); }

.nxsearch .btn-transfer,
.nxsearch #btnTransfer {
  background: rgba(6,182,212,.18) !important;
  border-left: 1px solid rgba(6,182,212,.25) !important;
  border-radius: 0 !important;
}

/* Float cards */
.nxcards {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 52px;
  animation: fadeUp .7s ease .32s both;
}

.nxcard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-lg);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--txt) !important;
  -webkit-text-fill-color: unset;
  text-decoration: none !important;
  cursor: pointer;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  animation: floatAnim 4.5s ease-in-out infinite;
  transform-style: preserve-3d;
}

.nxcard:nth-child(1) { animation-delay: 0s; }
.nxcard:nth-child(2) { animation-delay: -1.1s; }
.nxcard:nth-child(3) { animation-delay: -2.3s; }
.nxcard:nth-child(4) { animation-delay: -3.4s; }

.nxcard:hover {
  background: rgba(99,102,241,.13) !important;
  border-color: rgba(99,102,241,.42) !important;
  color: #fff !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 44px rgba(99,102,241,.2) !important;
}

.nxcard i {
  font-size: 18px;
  background: linear-gradient(135deg, #818cf8, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes floatAnim {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Stats row */
.nxstats {
  display: flex;
  justify-content: center;
  gap: 56px;
  animation: fadeUp .7s ease .4s both;
  flex-wrap: wrap;
}

.nxstat { text-align: center; }

.nxstat-num {
  font-size: 2.1rem;
  font-weight: 800;
  font-family: 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, #fff, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: block;
}

.nxstat-label {
  font-size: 11px;
  color: var(--txt3) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 5px;
  display: block;
}

/* Scroll indicator */
.nxscroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: var(--txt3) !important;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: scrollBob 2.2s ease-in-out infinite;
  pointer-events: none;
}

.nxscroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(99,102,241,.7), transparent);
  margin: 6px auto 0;
}

@keyframes scrollBob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(7px); }
}

/* ── Shortcuts strip ────────────────────────────────────── */
.nxshortcuts {
  background: rgba(11,11,33,.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.nxshortcuts-grid {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 16px;
}

.nxshort {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--txt2) !important;
  -webkit-text-fill-color: unset;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all .25s ease;
}

.nxshort:hover {
  background: var(--card-hover) !important;
  border-color: var(--border-hi) !important;
  color: var(--txt) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--indigo-glow);
}

.nxshort i { color: #818cf8 !important; font-size: 15px; }

/* ── Footer ─────────────────────────────────────────────── */
section#footer {
  background: var(--bg2) !important;
  border-top: 1px solid var(--border) !important;
  padding: 28px 0 !important;
  text-align: center;
}

section#footer p { color: var(--txt3) !important; font-size: 12px; margin: 0; }

section#footer .back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--txt3) !important;
  -webkit-text-fill-color: unset;
  margin-bottom: 12px;
  transition: var(--t);
}

section#footer .back-to-top:hover {
  background: var(--indigo) !important;
  border-color: var(--indigo) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--indigo-glow);
}

/* ── Panels / Cards ─────────────────────────────────────── */
.panel {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.panel:hover {
  border-color: rgba(99,102,241,.2) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,.35) !important;
}

.panel-default > .panel-heading,
.panel-primary > .panel-heading {
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 13px 18px;
}

.panel-heading .panel-title,
.panel-heading h3,
.panel-heading h4 {
  color: var(--txt) !important;
  font-size: 13px;
  font-weight: 600;
}

.panel-body { color: var(--txt2) !important; padding: 18px; }

.panel-footer {
  background: rgba(255,255,255,.025) !important;
  border-top: 1px solid var(--border) !important;
  padding: 10px 18px;
  min-height: 0;
}

/* Panel accent left border by color */
.panel-accent-blue  > .panel-heading { border-left: 3px solid var(--indigo); }
.panel-accent-green > .panel-heading { border-left: 3px solid var(--green); }
.panel-accent-red   > .panel-heading { border-left: 3px solid var(--red); }
.panel-accent-gold  > .panel-heading { border-left: 3px solid var(--gold); }
.panel-accent-teal  > .panel-heading { border-left: 3px solid var(--cyan); }
.panel-accent-purple> .panel-heading { border-left: 3px solid var(--purple); }

.panel-minimise { color: var(--txt3) !important; cursor: pointer; }

/* ── Dashboard tiles ────────────────────────────────────── */
.tiles { margin-bottom: 28px; }
.tile  { padding: 6px !important; }

.tile a {
  display: block;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 26px 18px !important;
  text-align: center;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: all .3s cubic-bezier(.34,1.3,.64,1);
  color: var(--txt) !important;
}

.tile a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(6,182,212,.04));
  opacity: 0;
  transition: opacity .3s ease;
}

.tile a:hover {
  border-color: rgba(99,102,241,.38) !important;
  transform: translateY(-5px) scale(1.03) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(99,102,241,.18) !important;
  background: rgba(99,102,241,.07) !important;
}

.tile a:hover::after { opacity: 1; }

.tile .icon {
  font-size: 26px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.tile .icon i {
  background: linear-gradient(135deg, #818cf8, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tile .stat {
  font-size: 2.5rem;
  font-weight: 800;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--txt) !important;
  -webkit-text-fill-color: unset;
  line-height: 1;
  margin-bottom: 7px;
  position: relative;
  z-index: 1;
}

.tile .title {
  font-size: 11px;
  color: var(--txt3) !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.tile .highlight { display: none; }

/* ── List groups ─────────────────────────────────────────── */
.list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  color: var(--txt2) !important;
  padding: 10px 18px !important;
  transition: var(--t);
  font-size: 13px;
}

.list-group-item:last-child { border-bottom: none !important; }

a.list-group-item:hover,
.list-group-item:hover {
  background: rgba(99,102,241,.09) !important;
  color: var(--txt) !important;
}

a.list-group-item.active,
.list-group-item.active {
  background: rgba(99,102,241,.14) !important;
  border-left: 3px solid var(--indigo) !important;
  color: #a5b4fc !important;
}

.list-group-item i, .list-group-item .fa,
.list-group-item .sidebar-menu-item-icon {
  color: var(--txt3) !important;
  width: 18px;
  text-align: center;
  margin-right: 6px;
}

a.list-group-item.active i,
a.list-group-item.active .sidebar-menu-item-icon,
a.list-group-item:hover i {
  color: #818cf8 !important;
}

/* ── Forms ───────────────────────────────────────────────── */
.form-control {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--txt) !important;
  box-shadow: none !important;
  font-size: 14px;
  padding: 9px 14px;
  transition: border-color .2s, box-shadow .2s;
  font-family: 'Inter', sans-serif;
}

.form-control:focus {
  border-color: var(--indigo) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
  background: rgba(255,255,255,.07) !important;
  outline: none;
}

.form-control::placeholder { color: var(--txt3) !important; }

label {
  color: var(--txt2) !important;
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 6px;
}

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b5563'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
  -webkit-appearance: none;
  appearance: none;
}

.input-group-addon {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt3) !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  transition: all .2s ease !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  -webkit-text-fill-color: unset;
}

.btn-primary {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--purple) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 14px rgba(99,102,241,.3) !important;
}
.btn-primary:hover, .btn-primary:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(99,102,241,.45) !important;
  filter: brightness(1.06);
}

.btn-default {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}
.btn-default:hover {
  background: var(--card-hover) !important;
  border-color: rgba(99,102,241,.3) !important;
  color: var(--txt) !important;
}

.btn-success { background: linear-gradient(135deg, var(--green), #059669) !important; color: #fff !important; }
.btn-danger  { background: linear-gradient(135deg, var(--red), #dc2626) !important;   color: #fff !important; }
.btn-warning { background: linear-gradient(135deg, var(--gold), #d97706) !important;  color: #fff !important; }
.btn-info    { background: linear-gradient(135deg, var(--cyan), #0891b2) !important;  color: #fff !important; }

.btn-xs  { padding: 4px 10px !important; font-size: 11px !important; }
.btn-sm  { padding: 6px 14px !important; font-size: 12px !important; }
.btn-lg  { padding: 12px 28px !important; font-size: 15px !important; border-radius: var(--r) !important; }

/* ── Tables ──────────────────────────────────────────────── */
.table { color: var(--txt2) !important; }

.table > thead > tr > th {
  background: rgba(255,255,255,.03) !important;
  color: var(--txt3) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 12px 16px;
  border-top: none !important;
}

.table > tbody > tr > td {
  border-top: 1px solid rgba(255,255,255,.04) !important;
  color: var(--txt2) !important;
  padding: 12px 16px;
  vertical-align: middle;
}

.table > tbody > tr:hover > td {
  background: rgba(99,102,241,.04) !important;
  color: var(--txt) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.02) !important; }
.table-bordered { border: 1px solid var(--border) !important; }
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th { border: 1px solid var(--border) !important; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { border-radius: var(--r-sm) !important; border: 1px solid transparent !important; font-size: 13px; }

.alert-info    { background: rgba(6,182,212,.1) !important;   border-color: rgba(6,182,212,.25) !important;   color: #67e8f9 !important; }
.alert-success { background: rgba(16,185,129,.1) !important;  border-color: rgba(16,185,129,.25) !important;  color: #6ee7b7 !important; }
.alert-warning { background: rgba(245,158,11,.1) !important;  border-color: rgba(245,158,11,.25) !important;  color: #fcd34d !important; }
.alert-danger  { background: rgba(239,68,68,.1) !important;   border-color: rgba(239,68,68,.25) !important;   color: #fca5a5 !important; }

/* ── Badges / Labels ─────────────────────────────────────── */
.badge {
  background: var(--indigo) !important;
  color: #fff !important;
  font-size: 10px !important;
  padding: 3px 7px !important;
  border-radius: 100px !important;
  font-weight: 600;
}

.label { font-size: 11px !important; font-weight: 600 !important; border-radius: 6px !important; padding: 3px 8px !important; }
.label-default { background: #374151 !important; }
.label-primary { background: var(--indigo) !important; }
.label-success { background: var(--green) !important; }
.label-info    { background: var(--cyan) !important; }
.label-warning { background: var(--gold) !important; }
.label-danger  { background: var(--red) !important; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar { padding-top: 0; }

.sidebar .panel { background: rgba(11,11,36,.7) !important; }

.sidebar .panel-heading { padding: 12px 16px !important; }

.sidebar .panel-title {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--txt3) !important;
  font-weight: 700 !important;
}

.panel-sidebar .list-group-item {
  padding: 9px 16px !important;
  display: flex;
  align-items: center;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 20px;
  font-size: 12px;
}
.breadcrumb > li     { color: var(--txt3) !important; }
.breadcrumb > li a   { color: var(--txt2) !important; }
.breadcrumb > li.active { color: var(--txt) !important; }
.breadcrumb > li + li::before { color: var(--txt3) !important; }

/* ── Page header ─────────────────────────────────────────── */
.page-header {
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 24px;
  padding-bottom: 14px;
}
.page-header h1, .page-header h2 { font-size: 1.4rem !important; margin: 0 !important; }

/* ── Pagination ──────────────────────────────────────────── */
.pagination > li > a {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}
.pagination > li > a:hover { background: var(--card-hover) !important; color: var(--txt) !important; border-color: var(--border-hi) !important; }
.pagination > .active > a  { background: var(--indigo) !important; border-color: var(--indigo) !important; color: #fff !important; }

/* ── Modals ──────────────────────────────────────────────── */
.modal-content {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.7) !important;
  color: var(--txt2) !important;
}
.modal-header { border-bottom: 1px solid var(--border) !important; padding: 20px 24px; }
.modal-header .modal-title { color: var(--txt) !important; font-size: 1rem; font-weight: 600; }
.modal-header .close { color: var(--txt3) !important; opacity: 1; }
.modal-header .close:hover { color: var(--txt) !important; }
.modal-body  { padding: 24px; }
.modal-footer { border-top: 1px solid var(--border) !important; padding: 16px 24px; }
.modal-backdrop.show { background: rgba(0,0,0,.75) !important; }
.modal-backdrop { background: rgba(0,0,0,.6) !important; }

/* ── Tabs ────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--border) !important; }
.nav-tabs > li > a {
  color: var(--txt2) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  padding: 10px 16px;
}
.nav-tabs > li > a:hover { color: var(--txt) !important; border-bottom-color: var(--indigo) !important; background: transparent !important; }
.nav-tabs > li.active > a { background: transparent !important; color: #818cf8 !important; border-color: transparent !important; border-bottom-color: var(--indigo) !important; }
.tab-content { padding: 20px 0; color: var(--txt2) !important; }

/* ── Well ────────────────────────────────────────────────── */
.well {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  color: var(--txt2) !important;
}

/* ── Misc helpers ────────────────────────────────────────── */
.text-muted   { color: var(--txt3) !important; }
.text-primary { color: #818cf8 !important; }
.text-success { color: #34d399 !important; }
.text-danger  { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info    { color: #22d3ee !important; }

hr { border-color: var(--border) !important; margin: 20px 0; }

code, pre {
  background: rgba(0,0,0,.4) !important;
  border: 1px solid var(--border) !important;
  color: #a5f3fc !important;
  border-radius: 6px;
  font-size: 12px;
}

/* ── Login page ──────────────────────────────────────────── */
.logincontainer { max-width: 480px; margin: 0 auto; }

.logincontainer .page-header { display: none; }

.login-form {
  background: rgba(12,12,40,.8) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 36px !important;
  backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
}

.login-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--indigo), var(--cyan), var(--purple));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* ── Homepage announcements ──────────────────────────────── */
.announcement-single {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px;
  margin-bottom: 16px;
  transition: all .25s ease;
}
.announcement-single:hover {
  border-color: rgba(99,102,241,.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.announcement-single h3 { margin-top: 0; }
.announcement-single h3 a { color: var(--txt) !important; }
.announcement-single blockquote {
  border-left: 3px solid var(--indigo) !important;
  color: var(--txt2) !important;
  padding: 8px 16px;
  margin: 12px 0 0;
  background: rgba(0,0,0,.25);
  border-radius: 0 6px 6px 0;
}

/* ── KB search in client home ────────────────────────────── */
.home-kb-search { position: relative; margin-bottom: 24px; }
.home-kb-search .form-control { padding-left: 40px !important; border-radius: var(--r) !important; height: 46px; }
.home-kb-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--txt3) !important; }

/* Hide original home banner sections (replaced by nexus hero) */
#home-banner   { display: none !important; }
.home-shortcuts{ display: none !important; }

/* ── Notifications popover ───────────────────────────────── */
.popover { background: var(--bg2) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; }
.popover-content { padding: 12px; }
.popover .client-alerts li { border-bottom: 1px solid var(--border); }
.popover .client-alerts li a { color: var(--txt2) !important; display: flex; gap: 8px; padding: 8px 4px; font-size: 13px; }
.popover .client-alerts li:last-child { border: none; }

/* ── Full page overlay ───────────────────────────────────── */
#fullpage-overlay { background: rgba(6,6,26,.92) !important; }

/* ── Checkbox ────────────────────────────────────────────── */
.checkbox label, .radio label { color: var(--txt2) !important; }

/* ── bg color helpers (keep WHMCS compatibility) ─────────── */
.bg-color-blue   { background: var(--indigo) !important; }
.bg-color-green  { background: var(--green) !important; }
.bg-color-red    { background: var(--red) !important; }
.bg-color-gold   { background: var(--gold) !important; }
.bg-color-teal   { background: var(--cyan) !important; }

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Generic dropdown menus ──────────────────────────────── */
.dropdown-menu {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  color: var(--txt2) !important;
  border-radius: 6px;
  font-size: 13px;
  -webkit-text-fill-color: unset;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--card-hover) !important;
  color: var(--txt) !important;
}
.dropdown-menu .divider   { background: var(--border) !important; }
.dropdown-header          { color: var(--txt3) !important; font-size: 11px; }

/* ── Panel colour variants ───────────────────────────────── */
.panel-success > .panel-heading { background: rgba(16,185,129,.1) !important; border-bottom-color: rgba(16,185,129,.2) !important; }
.panel-danger  > .panel-heading { background: rgba(239,68,68,.1) !important;  border-bottom-color: rgba(239,68,68,.2) !important; }
.panel-warning > .panel-heading { background: rgba(245,158,11,.1) !important; border-bottom-color: rgba(245,158,11,.2) !important; }
.panel-info    > .panel-heading { background: rgba(6,182,212,.1) !important;  border-bottom-color: rgba(6,182,212,.2) !important; }

/* Client home panels override (white heading in styles.css) */
.client-home-panels .panel > .panel-heading {
  background: rgba(255,255,255,.03) !important;
  color: var(--txt) !important;
  border-bottom: 1px solid var(--border) !important;
}
.client-home-panels .panel > .list-group {
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.client-home-panels small { color: var(--txt3) !important; }

/* ── Page header lined h1 border ─────────────────────────── */
div.header-lined h1 {
  border-bottom-color: var(--border) !important;
  color: var(--txt) !important;
}
div.header-lined .breadcrumb > .active { color: var(--txt2) !important; }
div.header-lined small { color: var(--txt2) !important; }

/* ── Webkit autofill override ────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 60px #0c0c28 inset !important;
  -webkit-text-fill-color: var(--txt) !important;
  caret-color: var(--txt);
}

/* ── Mobile nav collapse background ─────────────────────── */
.navbar-main .navbar-collapse {
  background: rgba(9,9,27,.98) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
.navbar-main .navbar-nav .open .dropdown-menu > li > a {
  color: var(--txt2) !important;
  -webkit-text-fill-color: unset;
}
.navbar-main .navbar-nav .open .dropdown-menu > li > a:hover {
  background: var(--card-hover) !important;
  color: var(--txt) !important;
}

/* ── Blockquote ──────────────────────────────────────────── */
blockquote {
  border-left-color: var(--indigo) !important;
  color: var(--txt2) !important;
}
blockquote footer, blockquote small { color: var(--txt3) !important; }

/* ── Progress bars ───────────────────────────────────────── */
.progress {
  background: rgba(255,255,255,.07) !important;
  border-radius: 100px !important;
  box-shadow: none !important;
}
.progress-bar { box-shadow: none !important; }

/* ── Form states ─────────────────────────────────────────── */
.has-error   .form-control { border-color: var(--red) !important; }
.has-success .form-control { border-color: var(--green) !important; }
.has-warning .form-control { border-color: var(--gold) !important; }
.has-error   .control-label,
.has-error   .help-block   { color: #f87171 !important; }
.has-success .control-label,
.has-success .help-block   { color: #34d399 !important; }
.has-warning .control-label,
.has-warning .help-block   { color: #fbbf24 !important; }

/* ── Disabled / readonly inputs ──────────────────────────── */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background: rgba(255,255,255,.02) !important;
  color: var(--txt3) !important;
  border-color: rgba(255,255,255,.05) !important;
  cursor: not-allowed;
  opacity: 1;
}

/* ── Popover title / tooltip ─────────────────────────────── */
.popover-title {
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--txt) !important;
  font-size: 13px;
  font-weight: 600;
}
.tooltip-inner {
  background: var(--bg3) !important;
  color: var(--txt) !important;
  border: 1px solid var(--border);
  font-size: 12px;
}
.tooltip.top    .tooltip-arrow { border-top-color:    var(--bg3) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--bg3) !important; }
.tooltip.left   .tooltip-arrow { border-left-color:   var(--bg3) !important; }
.tooltip.right  .tooltip-arrow { border-right-color:  var(--bg3) !important; }

/* ── Alert close buttons ─────────────────────────────────── */
.alert .close { color: inherit !important; opacity: 0.6; text-shadow: none !important; }
.alert .close:hover { opacity: 1; }

/* ── Nav pills ───────────────────────────────────────────── */
.nav-pills > li > a {
  color: var(--txt2) !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px;
  font-weight: 500;
  -webkit-text-fill-color: unset;
}
.nav-pills > li > a:hover {
  background: var(--card) !important;
  color: var(--txt) !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: var(--indigo) !important;
  color: #fff !important;
}

/* ── Table row states ────────────────────────────────────── */
.table > tbody > tr.active  > td,
.table > tbody > tr.active  > th { background: rgba(99,102,241,.1) !important; }
.table > tbody > tr.success > td { background: rgba(16,185,129,.08) !important; color: #6ee7b7 !important; }
.table > tbody > tr.danger  > td { background: rgba(239,68,68,.08)  !important; color: #fca5a5 !important; }
.table > tbody > tr.warning > td { background: rgba(245,158,11,.08) !important; color: #fcd34d !important; }
.table > tbody > tr.info    > td { background: rgba(6,182,212,.08)  !important; color: #67e8f9 !important; }

/* ── Store / product option cards ────────────────────────── */
.landing-page .hero     { color: var(--txt) !important; }
.landing-page .product-options .item {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}

/* ── Compact control bar ─────────────────────────────────── */
.compact-control-bar {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}

/* ── Misc small fixes ────────────────────────────────────── */
.text-domain          { color: var(--cyan) !important; }
small                 { color: inherit; }
.help-block           { color: var(--txt3) !important; font-size: 12px; }
.control-label        { color: var(--txt2) !important; }
abbr[title]           { border-bottom-color: var(--txt3); }
mark, .mark           { background: rgba(245,158,11,.25) !important; color: var(--txt) !important; }
kbd                   { background: var(--bg3) !important; color: var(--txt) !important; border: 1px solid var(--border) !important; }
.caret                { border-top-color: var(--txt2); border-bottom-color: var(--txt2); }
.open > .dropdown-toggle.btn-default { background: var(--card-hover) !important; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .nxtitle         { font-size: 2.1rem; }
  .nxstats         { gap: 28px; }
  .nxcards         { gap: 8px; }
  .nxcard          { padding: 11px 14px; font-size: 12.5px; }
  .nxsearch        { flex-direction: column; gap: 6px; box-shadow: 0 0 0 1px var(--border); overflow: visible; border-radius: 0; }
  .nxsearch-input  { border-radius: var(--r-sm) !important; }
  .nxsearch .btn,
  .nxsearch input[type=submit],
  .nxsearch .btn-transfer,
  .nxsearch #btnTransfer { border-radius: var(--r-sm) !important; width: 100%; }
  .nxstat-num      { font-size: 1.7rem; }
  section#header .container { padding: 10px 16px; }
}


/* ============================================================
   STORE / ORDER FORM - dark theme coverage
   universal_slider ships its own light-theme CSS
   (templates/orderforms/universal_slider/css/style.css).
   These rules re-skin it to match Nexus. Scoped to
   #order-universal_slider + sidebar cards only.
   ============================================================ */

/* -- Sidebar cards (Categories / Actions / Choose Currency) -- */
.panel-sidebar,
.panel.card-sidebar {
  background: rgba(11,11,36,.7) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  overflow: hidden;
}
.panel-sidebar > .panel-heading,
.panel-heading.card-header {
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--txt) !important;
}
.panel-sidebar > .panel-heading .panel-title,
.panel-heading.card-header .panel-title {
  color: var(--txt) !important;
  font-weight: 600;
}
.panel-sidebar .panel-body,
.panel-body.card-body {
  background: transparent !important;
  color: var(--txt2) !important;
}
.panel-sidebar .list-group-item {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--txt2) !important;
}
.panel-sidebar .list-group-item:hover {
  background: var(--card-hover) !important;
  color: var(--txt) !important;
}
.panel-sidebar .list-group-item.active {
  background: linear-gradient(135deg, var(--indigo-lo), transparent) !important;
  border-left: 3px solid var(--indigo) !important;
  color: var(--txt) !important;
}

/* -- Order form shell -- */
#order-universal_slider { color: var(--txt2) !important; }

#order-universal_slider .main-container,
#order-universal_slider .striped-container {
  background: transparent !important;
  background-color: transparent !important;
}

#order-universal_slider .product-container,
#order-universal_slider .product-selector {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
}

#order-universal_slider .group-headlines h5,
#order-universal_slider .product-description,
#order-universal_slider .feature-container .price-container .price-cont span {
  color: var(--txt2) !important;
}

#order-universal_slider .product-container .container-with-progress-bar span,
#order-universal_slider .feature-container .container-with-progress-bar span {
  color: var(--txt) !important;
}

/* -- Feature progress bars (were grey/green) -- */
#order-universal_slider .feature-container .progress.small-progress {
  background-color: rgba(255,255,255,.06) !important;
  border-radius: 100px !important;
}
#order-universal_slider .feature-container .progress.small-progress .progress-bar {
  background: linear-gradient(90deg, var(--indigo), var(--purple)) !important;
  background-color: var(--indigo) !important;
  border-radius: 100px !important;
}

/* -- Range slider (Basic -> Max) -- */
#order-universal_slider .product-selector .irs-line {
  background: rgba(255,255,255,.08) !important;
}
#order-universal_slider .product-selector .irs-bar {
  background: linear-gradient(90deg, var(--indigo), var(--purple)) !important;
  border-top: 0 !important;
}
#order-universal_slider .product-selector .irs-single {
  background-color: var(--indigo) !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
}
#order-universal_slider .product-selector .irs-grid-text { color: var(--txt2) !important; }
#order-universal_slider .product-selector .irs-grid-pol  { background: var(--border) !important; }
#order-universal_slider .product-selector .irs-min,
#order-universal_slider .product-selector .irs-max {
  background: transparent !important;
  color: var(--txt3) !important;
}

/* -- Order button -- */
#order-universal_slider .product-container .order-button,
#order-universal_slider .product-container .order-button:hover {
  background: linear-gradient(135deg, var(--indigo), var(--purple)) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: #fff !important;
}
#order-universal_slider .product-container .order-button:hover { filter: brightness(1.12); }


/* ============================================================
   HOMEPAGE LAYOUT FIXES
   section#main-body reserves calc(100vh - 240px) so the footer
   sits low on short inner pages. On the homepage the hero already
   fills the viewport and main-body is empty when there are no
   announcements, which left a ~600px gap above the footer.
   The hero exists only on the homepage, so this sibling selector
   scopes the fix to that page alone.
   ============================================================ */
#nexus-hero ~ section#main-body {
  min-height: 0 !important;
  padding: 64px 0 72px !important;
}
/* breathing room only when there IS content below the hero */
#nexus-hero ~ section#main-body .announcement-single { margin-top: 40px; }

/* smooth scroll for the hero Scroll hint */
html { scroll-behavior: smooth; }
.nxscroll { text-decoration: none !important; cursor: pointer; }
.nxscroll:hover { color: var(--txt2) !important; }


/* ============================================================
   HOMEPAGE SERVICES SECTION
   ============================================================ */
.nxsec-head { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.nxsec-eyebrow {
  display: inline-block; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--indigo) !important;
  font-weight: 700; margin-bottom: 12px;
}
.nxsec-title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 2rem; font-weight: 700; line-height: 1.2;
  color: var(--txt) !important; margin: 0 0 12px;
}
.nxsec-sub { color: var(--txt2) !important; font-size: 15px; line-height: 1.6; margin: 0; }

.nxsvc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
/* 3 per row; a short final row centres itself */
.nxsvc-grid > .nxsvc {
  flex: 0 1 calc(33.333% - 12px);
  max-width: calc(33.333% - 12px);
}
.nxsvc {
  display: block; padding: 26px 24px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); transition: var(--t);
  text-decoration: none !important;
}
.nxsvc:hover {
  background: var(--card-hover); border-color: var(--border-hi);
  transform: translateY(-4px); box-shadow: var(--shadow);
  text-decoration: none !important;
}
.nxsvc-ico {
  width: 46px; height: 46px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--indigo), var(--purple));
  color: #fff !important; -webkit-text-fill-color: unset;
  font-size: 18px; margin-bottom: 16px;
}
.nxsvc h3 { font-size: 17px; font-weight: 700; color: var(--txt) !important; margin: 0 0 8px; }
.nxsvc p  { font-size: 14px; line-height: 1.6; color: var(--txt2) !important; margin: 0 0 14px; }
.nxsvc-link { font-size: 13px; font-weight: 600; color: var(--indigo) !important; }
.nxsvc-link i { font-size: 11px; margin-left: 5px; display: inline-block; transition: var(--t); }
.nxsvc:hover .nxsvc-link i { transform: translateX(3px); }

.nxwhy {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; margin-top: 30px; padding-top: 28px;
  border-top: 1px solid var(--border);
}
.nxwhy-item { display: flex; gap: 14px; align-items: flex-start; }
.nxwhy-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-lo); color: var(--indigo) !important; font-size: 15px;
}
.nxwhy-item h4 { font-size: 15px; font-weight: 700; color: var(--txt) !important; margin: 0 0 4px; }
.nxwhy-item p  { font-size: 13.5px; line-height: 1.55; color: var(--txt2) !important; margin: 0; }

@media (max-width: 991px) {
  .nxsvc-grid > .nxsvc {
    flex: 0 1 calc(50% - 9px);
    max-width: calc(50% - 9px);
  }
}
@media (max-width: 640px) {
  .nxsvc-grid > .nxsvc { flex: 0 1 100%; max-width: 100%; }
}
@media (max-width: 767px) {
  .nxsec-title { font-size: 1.5rem; }
  .nxsec-head  { margin-bottom: 30px; }
}


/* Dropdowns must escape the navbar stacking context */
.navbar-main .dropdown-menu,
section#header .dropdown-menu { z-index: 1060 !important; }
.navbar-main .navbar-nav > li.open,
.navbar-main .navbar-nav > li.dropdown.open { position: relative; z-index: 1060; }


/* ============================================================
   CLIENT AREA TABLES / DATATABLES - dark theme coverage
   includes/tablelist.tpl injects assets/css/dataTables.bootstrap.css
   into the BODY (after nexus.css), and Six sets white backgrounds on
   .table-list rows. nexus styled .table colour but never background,
   so #fff showed through. All !important so load order cannot win.
   ============================================================ */

.table-container { background: transparent !important; }

table.table-list thead th {
  background-color: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--txt) !important;
}
.table-list > tbody > tr > td {
  background-color: transparent !important;
  border-top: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}
.table-list > tbody > tr:nth-child(even) > td {
  background-color: rgba(255,255,255,.022) !important;
}
.table-list > tbody > tr:hover > td {
  background-color: rgba(99,102,241,.08) !important;
  color: var(--txt) !important;
}
.table-list > tbody > tr > td a.border-left {
  border-left: 1px solid var(--border) !important;
}

/* ticket subject / number */
.ticket-number  { color: var(--cyan) !important; }
.ticket-subject { color: var(--txt2) !important; }
.ticket-subject.unread, .unread { color: var(--txt) !important; font-weight: 700 !important; }

/* status pills (Six gives these a white bg + grey border) */
.label.status, span.status, .status-custom {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--txt2) !important;
  -webkit-text-fill-color: unset;
}
.status-active, .status-open, .status-completed {
  color: var(--green) !important; border-color: rgba(16,185,129,.40) !important;
}
.status-pending, .status-pending-transfer {
  color: var(--gold) !important;  border-color: rgba(245,158,11,.40) !important;
}
.status-closed, .status-cancelled, .status-inactive {
  color: var(--txt3) !important; border-color: var(--border) !important;
}

/* DataTables chrome */
.dataTables_wrapper { color: var(--txt2) !important; }
.dataTables_wrapper .dataTables_info {
  background-color: rgba(255,255,255,.03) !important;
  color: var(--txt2) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 0 !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
}
.dataTables_wrapper .dataTables_length {
  background-color: rgba(255,255,255,.03) !important;
  color: var(--txt2) !important;
  border: 1px solid var(--border) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
}
.dataTables_wrapper .dataTables_filter label .form-control,
.dataTables_wrapper .dataTables_filter input {
  background-color: rgba(6,6,26,.75) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
  border-radius: var(--r-sm) !important;
  padding: 7px 12px !important;
}
.dataTables_wrapper .dataTables_length select {
  background-color: rgba(6,6,26,.75) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}
.dataTables_wrapper .pagination > li > a:hover {
  background: var(--card-hover) !important;
  color: var(--txt) !important;
}
.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > span,
.dataTables_wrapper .pagination > .active > a:hover {
  background: var(--indigo) !important;
  border-color: var(--indigo) !important;
  color: #fff !important;
}
.dataTables_wrapper .pagination > .disabled > a,
.dataTables_wrapper .pagination > .disabled > span { color: var(--txt3) !important; }

table.table-list thead th.sorting:after,
table.table-list thead th.sorting_asc:after,
table.table-list thead th.sorting_desc:after { color: var(--txt3) !important; }


/* ============================================================
   BRAND HIGHLIGHT + DATATABLE SELECT FIX
   --brand is the orange from the logo SVG (.st0 fill #f15a24).
   Applied to highlight / active states only; hero gradient and
   primary buttons stay indigo/purple.
   ============================================================ */
:root {
  --brand:      #f15a24;
  --brand-lo:   rgba(241,90,36,0.16);
  --brand-mid:  rgba(241,90,36,0.45);
  --brand-glow: rgba(241,90,36,0.35);
}

/* the Show N entries select was clipped: Six forces height 25px */
.dataTables_wrapper .dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px 8px 20px !important;
  margin: 0 !important;
}
.dataTables_wrapper .dataTables_length label .form-control,
.dataTables_wrapper .dataTables_length select,
div.dataTables_wrapper div.dataTables_length select {
  height: auto !important;
  min-height: 32px !important;
  width: auto !important;
  min-width: 68px !important;
  padding: 5px 10px !important;
  line-height: 1.5 !important;
  font-size: 13px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ---- highlight / active states in brand orange ---- */
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li.active > a {
  border-bottom-color: var(--brand) !important;
}

a.list-group-item.active,
.list-group-item.active,
.sidebar .list-group-item.active,
.panel-sidebar .list-group-item.active {
  background: linear-gradient(135deg, var(--brand-lo), transparent) !important;
  border-left: 3px solid var(--brand) !important;
  color: var(--txt) !important;
}
a.list-group-item.active i,
a.list-group-item.active .sidebar-menu-item-icon { color: var(--brand) !important; }

.badge { background: var(--brand) !important; color: #fff !important; }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > span {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

.nav-tabs > li > a:hover,
.nav-tabs > li.active > a { border-bottom-color: var(--brand) !important; }
.nav-tabs > li.active > a { color: var(--brand) !important; }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: var(--brand) !important; color: #fff !important;
}

/* focus ring picks up the brand too */
.form-control:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-lo) !important;
  outline: none !important;
}


/* ============================================================
   MARKDOWN EDITOR (bootstrap-markdown) - dark theme coverage
   assets/css/bootstrap-markdown.min.css hardcodes #f5f5f5 / #eee /
   #fff and uses !important in fullscreen mode. Used on ticket
   submit AND ticket reply.
   ============================================================ */
.md-editor {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden;
  background: rgba(255,255,255,.03) !important;
}
.md-editor > .md-header {
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}
.md-editor .md-footer {
  background: rgba(255,255,255,.04) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--txt3) !important;
}
.md-editor > textarea,
.md-editor > textarea:focus,
.md-editor .md-input {
  background: rgba(6,6,26,.55) !important;
  color: var(--txt) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px !important;
}
.md-editor > .md-preview {
  background: rgba(6,6,26,.55) !important;
  color: var(--txt2) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px !important;
}
.md-editor.active {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-lo) !important;
}
/* flat toolbar buttons so Preview stops looking like a CTA */
.md-editor > .md-header .btn,
.md-editor > .md-header .btn-default,
.md-editor > .md-header .btn-group > .btn {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  color: var(--txt2) !important;
  -webkit-text-fill-color: unset;
  box-shadow: none !important;
}
.md-editor > .md-header .btn:hover,
.md-editor > .md-header .btn.active {
  background: var(--card-hover) !important;
  border-color: var(--border) !important;
  color: var(--txt) !important;
}
.md-editor .md-controls .md-control { color: var(--txt3) !important; }
.md-editor .md-controls .md-control:hover { color: var(--txt) !important; }

/* fullscreen mode forces #fff with !important */
.md-editor.md-fullscreen-mode { background: var(--bg) !important; }
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview,
.md-editor.md-fullscreen-mode .md-input:focus,
.md-editor.md-fullscreen-mode .md-input:hover {
  background: var(--bg) !important;
  color: var(--txt) !important;
}
.md-editor.md-fullscreen-mode .btn { color: var(--txt2) !important; }
.md-editor.md-fullscreen-mode .btn:hover,
.md-editor.md-fullscreen-mode .btn.active { color: var(--txt) !important; }
.md-editor.md-fullscreen-mode .md-fullscreen-controls a { color: var(--txt2) !important; }
.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover { color: var(--txt) !important; }

/* long option labels (e.g. General Enquiries / Support) were hard-clipped */
select.form-control { text-overflow: ellipsis; }

/* file inputs were rendering as native light controls */
input[type=file].form-control,
input[type=file] {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--txt2) !important;
  padding: 8px 12px !important;
  height: auto !important;
  line-height: 1.5 !important;
}
input[type=file]::-webkit-file-upload-button,
input[type=file]::file-selector-button {
  background: var(--card-hover) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--txt) !important;
  padding: 5px 12px !important;
  margin-right: 10px !important;
  cursor: pointer;
  font-size: 13px !important;
}
input[type=file]::-webkit-file-upload-button:hover,
input[type=file]::file-selector-button:hover {
  background: var(--brand-lo) !important;
  border-color: var(--brand-mid) !important;
}


/* ------------------------------------------------------------
   Markdown textarea: opaque + every selector variant.
   Six sets .md-editor>textarea{background:#eee} and
   :focus{background:#fff}. Translucent overrides were still
   reading as white when unfocused, so this is fully opaque and
   states are declared separately.
   ------------------------------------------------------------ */
.md-editor > textarea,
.md-editor > textarea.md-input,
.md-editor > textarea.form-control,
.md-editor textarea,
.md-editor textarea.md-input,
textarea.md-input,
textarea.markdown-editor {
  background: #0b0b24 !important;
  background-color: #0b0b24 !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.md-editor > textarea:focus,
.md-editor > textarea.md-input:focus,
.md-editor textarea:focus,
.md-editor textarea.md-input:focus,
textarea.md-input:focus,
textarea.markdown-editor:focus {
  background: #0b0b24 !important;
  background-color: #0b0b24 !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
.md-editor > textarea::placeholder,
textarea.md-input::placeholder { color: var(--txt3) !important; }
.md-editor, .md-editor .md-header, .md-editor .md-footer { background-color: #0e0e2a !important; }


/* ------------------------------------------------------------
   Form control height: Bootstrap pins .form-control to 34px.
   With padding 9px top/bottom + 2px border the content box is
   ~14px, but 14px Inter needs ~17px for descenders - so g/p/q/y
   were being sliced off in selects. Let height follow content.
   ------------------------------------------------------------ */
.form-control { height: auto !important; }

select.form-control,
input.form-control {
  min-height: 42px !important;
  line-height: 1.5 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* keep the custom arrow clear of the text */
select.form-control { padding-right: 34px !important; }

/* inline selects/inputs in tables and toolbars stay compact */
.table select.form-control,
.table input.form-control,
.input-group select.form-control,
.input-group input.form-control {
  min-height: 34px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}


/* ============================================================
   REMAINING THIRD-PARTY WIDGETS - dark theme coverage
   recommendations.css / selectize.css / MarketConnect.css /
   datepicker all ship light defaults from outside the theme.
   ============================================================ */

/* -- Product recommendations (loads on cart.php) -- */
.product-recommendations-container,
.product-recommendations {
  background-color: transparent !important;
  color: var(--txt2) !important;
}
.product-recommendations .product-recommendation {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-top-color: var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--txt2) !important;
}
.product-recommendations .product-recommendation .header,
.product-recommendations .product-recommendation .headline {
  color: var(--txt) !important;
  background: transparent !important;
}
.product-recommendations .product-recommendation .tagline { color: var(--txt2) !important; }
.product-recommendations .product-recommendation .cta {
  background: linear-gradient(135deg, var(--indigo), var(--purple)) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: #fff !important;
}
#recommendationsModal .modal-header,
#recommendationsModal .modal-footer {
  background: rgba(255,255,255,.03) !important;
  border-color: var(--border) !important;
  color: var(--txt) !important;
}
#recommendationsModal .product-added-panel .panel-body {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--txt2) !important;
}
#recommendationsModal .product-added-panel .price,
#recommendationsModal .product-added-panel .product-cycle { color: var(--txt) !important; }

/* -- Selectize dropdowns -- */
.selectize-control .selectize-input,
.selectize-input {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}
.selectize-input input { color: var(--txt) !important; }
.selectize-input.focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-lo) !important;
}
.selectize-dropdown {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--txt2) !important;
}
.selectize-dropdown .option { color: var(--txt2) !important; }
.selectize-dropdown .option:hover,
.selectize-dropdown .active {
  background: var(--card-hover) !important;
  color: var(--txt) !important;
}
.selectize-dropdown-header {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--border) !important;
  color: var(--txt2) !important;
}
.selectize-control.multi .selectize-input > div {
  background: var(--brand-lo) !important;
  border-color: var(--brand-mid) !important;
  color: var(--txt) !important;
}

/* -- MarketConnect (only loads if promos are enabled) -- */
.market-connect #contentarea,
.market-connect-apps-container,
.mc-sm-container {
  background: transparent !important;
  color: var(--txt2) !important;
}
.market-connect #contentarea h1 { color: var(--txt) !important; }
.marketconnect-product-redirect {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}
.btn-inverse {
  background: var(--card-hover) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
}
.btn-inverse:hover {
  background: var(--brand-lo) !important;
  border-color: var(--brand-mid) !important;
  color: var(--txt) !important;
}

/* -- Datepicker -- */
.datepicker,
.datepicker-dropdown {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--txt) !important;
}
.datepicker table tr td,
.datepicker table tr th {
  background: transparent !important;
  color: var(--txt2) !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td:hover {
  background: var(--card-hover) !important;
  color: var(--txt) !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.today {
  background: var(--brand) !important;
  background-image: none !important;
  color: #fff !important;
}
.datepicker table tr td.old,
.datepicker table tr td.new { color: var(--txt3) !important; }


/* ============================================================
   DOMAIN CHECKER / TLD PRICING - dark theme coverage
   cart.php?a=add&domain=register. Six hardcodes #efefef headers,
   #f5f5f5 rows and a #f3f9fd highlight.
   ============================================================ */

/* -- TLD pricing table -- */
.domain-pricing { color: var(--txt2) !important; }
.domain-pricing .tld-row {
  border-bottom: 1px solid var(--border) !important;
}
.domain-pricing .tld-row.highlighted {
  background: var(--brand-lo) !important;
}
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-xs-4 {
  background-color: rgba(255,255,255,.05) !important;
  border-bottom: 4px solid var(--brand) !important;
  color: var(--txt) !important;
  border-radius: var(--r-sm) !important;
}
.domain-pricing .tld-pricing-header div:nth-child(odd) {
  background-color: rgba(255,255,255,.03) !important;
  border-color: var(--indigo) !important;
}
.domain-pricing .two-row-center {
  border-right: 2px solid var(--border) !important;
}
.domain-pricing .no-bg { background-color: transparent !important; }

/* -- Featured TLD cards -- */
.featured-tld {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.featured-tld:hover {
  background: var(--card-hover) !important;
  border-color: var(--border-hi) !important;
}
.featured-tld .img-container {
  background: rgba(255,255,255,.05) !important;
}
/* NO !important here on purpose: the per-TLD brand colours
   (.price.com, .price.net, .price.shop ...) are deliberate and
   have higher specificity, so they must keep winning. This only
   replaces the generic #f9f9f9 / #555 default. */
.featured-tld .price {
  background-color: rgba(255,255,255,.07);
  color: var(--txt);
}

/* -- result states -- */
.domain-checker-available { color: var(--green) !important; }
.domain-checker-unavailable,
.domain-checker-invalid { color: var(--red) !important; }
.domain-checker-bg,
.domain-checker-container { background: transparent !important; }


/* ============================================================
   STANDARD_CART ORDERFORM CSS - dark theme coverage
   The domain pages additionally load
   templates/orderforms/standard_cart/css/all.min.css AFTER
   nexus.css, so everything here needs !important.
   ============================================================ */

/* promo boxes were #f9f9f9 with #333 text and #ddd borders */
.domain-promo-box {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--txt2) !important;
}
.domain-promo-box h1,
.domain-promo-box h2,
.domain-promo-box h3,
.domain-promo-box h4 { color: var(--txt) !important; }
.domain-promo-box p { color: var(--txt2) !important; }
.domain-promo-box .small { color: var(--txt3) !important; }
/* the fa-4x icons are dark glyphs designed for a white card */
.domain-promo-box i,
.domain-promo-box .fas,
.domain-promo-box .fa { color: var(--txt2) !important; }

/* search wrapper was #ffce44 yellow with a #fff inner box */
.domain-checker-container {
  background-color: transparent !important;
  background: transparent !important;
}
.domain-checker-container .input-group-box {
  background-color: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
}

/* muted bootstrap text helpers are too dark on a dark surface */
.text-warning { color: var(--gold) !important; }
.text-info    { color: var(--cyan) !important; }
.text-muted   { color: var(--txt3) !important; }


/* ============================================================
   PRICINGPLAN ORDER FORM - dark theme coverage
   templates/orderforms/PricingPlan/css/planStyle.css loads after
   nexus.css and hardcodes #fff cards, #3f51b5 accents, #777/#555
   text and #a6c1d0 toggle bars. Everything needs !important.
   ============================================================ */
#order-PricingPlan { color: var(--txt2) !important; }

/* -- plan cards -- */
.pricing_plan_outer .plan_box .plan_box_cnt {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  transition: var(--t) !important;
}
.pricing_plan_outer .plan_box .plan_box_cnt:hover {
  background-color: var(--card-hover) !important;
  border-color: var(--brand-mid) !important;
  box-shadow: var(--shadow) !important;
  transform: translateY(-4px);
}

/* -- heading, divider, price -- */
.pricing_plan_outer .plan_box h3,
.pricing_plan_outer .plan_box .plan_heading { color: var(--txt) !important; }
.pricing_plan_outer .plan_box .plan_heading:after { background: var(--brand) !important; }
.pricing_plan_outer .plan_box .plan_box_cnt .plan_pricing { color: var(--brand) !important; }

/* -- feature list -- */
.pricing_plan_outer .plan_box .plan_box_cnt ul li { color: var(--txt2) !important; }
.pricing_plan_outer .plan_box .plan_box_cnt ul li strong { color: var(--txt) !important; }

/* hover flipped everything to #fff, which is invisible on a dark card */
.pricing_plan_outer .plan_box .plan_box_cnt:hover .plan_heading,
.pricing_plan_outer .plan_box .plan_box_cnt:hover h3,
.pricing_plan_outer .plan_box .plan_box_cnt:hover ul li,
.pricing_plan_outer .plan_box .plan_box_cnt:hover ul li strong { color: var(--txt) !important; }
.pricing_plan_outer .plan_box .plan_box_cnt:hover .plan_pricing { color: var(--brand) !important; }

/* -- order button -- */
.pricing_plan_outer .plan_box .plan_box_cnt .plan_btn a {
  background: linear-gradient(135deg, var(--indigo), var(--purple)) !important;
  border: none !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
  padding: 11px 26px !important;
  display: inline-block !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: #fff !important;
}
.pricing_plan_outer .plan_box .plan_box_cnt .plan_btn a:hover { filter: brightness(1.12); }

/* -- sidebar toggle (was a white box with #a6c1d0 bars) -- */
.openbtn {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
.openbtn span:after,
.openbtn span:before,
.openbtn:before,
.openbtn:after { background: var(--txt2) !important; }
.openbtn.active:hover:after,
.openbtn.active:hover:before { background: var(--brand) !important; }


/* ============================================================
   PRIMARY BUTTONS IN BRAND ORANGE
   Replaces the indigo->purple gradient on every primary action.
   Secondary/ghost buttons and the cyan Transfer button are left
   alone so there is still a visual hierarchy.
   ============================================================ */
:root { --brand-2: #ff8a3d; }

.btn-primary,
section#header .top-nav li.primary-action a,
.nxsearch .btn,
.nxsearch input[type=submit],
#order-universal_slider .product-container .order-button,
.product-recommendations .product-recommendation .cta,
.pricing_plan_outer .plan_box .plan_box_cnt .plan_btn a {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  background-color: var(--brand) !important;
  border-color: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 2px 14px rgba(241,90,36,.28) !important;
}

.btn-primary:hover,
.btn-primary:focus,
section#header .top-nav li.primary-action a:hover,
.nxsearch .btn:hover,
.nxsearch input[type=submit]:hover,
#order-universal_slider .product-container .order-button:hover,
.product-recommendations .product-recommendation .cta:hover,
.pricing_plan_outer .plan_box .plan_box_cnt .plan_btn a:hover {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  filter: brightness(1.1);
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(241,90,36,.4) !important;
}

/* the Transfer button stays cyan as the secondary action */
.nxsearch .btn-transfer,
.nxsearch #btnTransfer {
  background: rgba(6,182,212,.18) !important;
  box-shadow: none !important;
}


/* ------------------------------------------------------------
   PricingPlan: equal-height cards with the CTA pinned to the base.
   .pricing_plan_outer is already display:flex, but .plan_box_cnt
   carries flex:initial so cards size to their own content and the
   buttons end up at different heights.
   ------------------------------------------------------------ */
.pricing_plan_outer { align-items: stretch !important; }

.pricing_plan_outer .plan_box {
  display: flex !important;
  flex-direction: column !important;
}

.pricing_plan_outer .plan_box .plan_box_cnt {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

/* the feature list absorbs the slack, so price + button travel
   together to the bottom instead of leaving a gap between them */
.pricing_plan_outer .plan_box .plan_box_cnt > ul,
.pricing_plan_outer .plan_box .plan_box_cnt #plan_inner_ul {
  flex: 1 1 auto !important;
  margin-bottom: 0 !important;
}

.pricing_plan_outer .plan_box .plan_box_cnt .plan_btn {
  margin-top: auto !important;
  padding-top: 18px !important;
}

/* stack cleanly on small screens */
@media (max-width: 767px) {
  .pricing_plan_outer { flex-wrap: wrap !important; }
  .pricing_plan_outer .plan_box {
    flex: 1 1 100% !important;
    margin-bottom: 18px !important;
  }
}


/* ============================================================
   HERO SEARCH — reCAPTCHA BADGE POSITIONING  2026-08-21
   ------------------------------------------------------------
   BUG: the invisible reCAPTCHA badge rendered INSIDE the domain
   search pill, overlapping the Transfer button and clipped by
   .nxsearch's overflow:hidden.

   CAUSE (not a captcha setting): .nxsearch uses
       animation: fadeUp .7s ease .24s both;
   and fadeUp's final keyframe declares `transform: translateY(0)`.
   With fill-mode `both` that transform is retained forever, and an
   element with a transform becomes the CONTAINING BLOCK for its
   position:fixed descendants. Google's badge is
   `position:fixed; bottom:14px; right:14px`, so it anchored to the
   bottom-right of the search pill instead of the viewport.

   FIX: animate the same 22px rise using margin-top instead of
   transform. Visually identical, but margin does not establish a
   containing block, so the badge returns to the viewport corner.
   Deliberately NOT fixed by hiding .grecaptcha-badge — Google's
   terms require visible reCAPTCHA branding in the user flow, and
   hiding it would oblige us to add attribution text instead.
   ============================================================ */

@keyframes nxFadeUpSafe {
  from { opacity: 0; margin-top: 22px; }
  to   { opacity: 1; margin-top: 0; }
}

.nxsearch {
  animation-name: nxFadeUpSafe !important;
}

/* Belt and braces: if any other transformed ancestor ever traps the
   badge, keep it out of the pill's flex flow rather than letting it
   sit between the buttons. */
#frmDomainHomepage > .g-recaptcha,
#frmDomainHomepage > div[id*="divDynamicRecaptcha"] {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none;
}
#frmDomainHomepage .grecaptcha-badge { pointer-events: auto; }


/* ============================================================
   STANDARD_CART DARK PASS  2026-08-21
   ------------------------------------------------------------
   When OrderFormTemplate moved from universal_slider to PricingPlan,
   the cart container id changed from #order-universal_slider to
   #order-standard_cart. Every existing order-form rule in this file
   is scoped to the OLD id, so the entire checkout flow reverted to
   templates/orderforms/standard_cart/css/all.min.css — a light
   stylesheet with 147 light-coloured declarations. Symptom: white
   panels with near-white text on the Configure and Order Summary
   steps.

   This layer covers the whole flow (configure, domain selection,
   addons, view cart, checkout fields), not just the page that was
   reported. Semantic colours (available/unavailable, add-to-cart)
   are kept but re-toned for contrast on dark.
   ============================================================ */

#order-standard_cart { color: var(--txt2) !important; }
#order-standard_cart h1, #order-standard_cart h2, #order-standard_cart h3,
#order-standard_cart h4, #order-standard_cart h5 { color: var(--txt) !important; }
#order-standard_cart .sub-heading {
  border-top: 1px solid var(--border) !important;
  color: var(--txt) !important;
}

/* -- Product summary strip (was #f8f8f8) -- */
#order-standard_cart .product-info {
  background-color: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--txt2) !important;
}
#order-standard_cart .product-info .product-title { color: var(--txt) !important; }

/* -- Order Summary panel (header was #666, body #f8f8f8) -- */
#order-standard_cart .order-summary {
  background-color: var(--bg3) !important;
  border-bottom: 3px solid var(--border) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
}
#order-standard_cart .order-summary h2 { color: var(--txt) !important; }
#order-standard_cart .summary-container {
  background-color: var(--card) !important;
  color: var(--txt2) !important;
}
#order-standard_cart .order-summary .summary-totals {
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .total,
#order-standard_cart .order-summary strong { color: var(--txt) !important; }
#order-standard_cart .order-summary .loader { color: var(--txt3) !important; }

/* -- Product cards -- */
#order-standard_cart .products .product {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}
#order-standard_cart .products .product header {
  background: rgba(255,255,255,.06) !important;
  color: var(--txt) !important;
}
#order-standard_cart .products .product header .qty { color: var(--txt2) !important; }

/* -- Addons -- */
#order-standard_cart .panel-addon .panel-price {
  background-color: rgba(255,255,255,.07) !important;
  color: var(--txt) !important;
}
#order-standard_cart .panel-addon-selected { border-color: var(--brand) !important; }

/* -- Domain selection -- */
#order-standard_cart .domain-selection-options .option {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--txt2) !important;
}
#order-standard_cart .domain-selection-options .option-selected {
  background-color: var(--brand-lo) !important;
  border-color: var(--brand-mid) !important;
  color: var(--txt) !important;
}
#order-standard_cart .transfer-eligible {
  background-color: rgba(16,185,129,.14) !important;
  border-color: rgba(16,185,129,.40) !important;
  color: var(--txt) !important;
}
#order-standard_cart .transfer-not-eligible {
  background-color: rgba(255,255,255,.06) !important;
  border-color: var(--border) !important;
  color: var(--txt2) !important;
}
/* semantic status colours, brightened for dark backgrounds */
#order-standard_cart .domain-checker-available { color: #34d399 !important; }
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid { color: #f87171 !important; }

/* -- Form fields (were #fff on #ddd) -- */
#order-standard_cart .field,
#order-standard_cart .form-control,
#order-standard_cart select.form-control {
  background-color: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
}
#order-standard_cart .field:focus,
#order-standard_cart .form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-lo) !important;
}
#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly],
#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly] {
  background-color: rgba(255,255,255,.03) !important;
  color: var(--txt3) !important;
}
#order-standard_cart .field-help-text { color: var(--txt2) !important; }
#order-standard_cart .field-icon i { color: var(--txt3) !important; }
#order-standard_cart ::placeholder { color: var(--txt3) !important; }
/* native dropdown lists render with the OS palette unless told otherwise */
#order-standard_cart select.form-control option {
  background-color: var(--bg2) !important;
  color: var(--txt) !important;
}

/* -- View cart (striped rows) -- */
#order-standard_cart .view-cart-items-header { color: var(--txt) !important; }
#order-standard_cart .view-cart-items .item {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
}
#order-standard_cart .view-cart-items .item:nth-child(even) {
  background-color: rgba(255,255,255,.07) !important;
}

/* -- Checkout: credit + card entry -- */
#order-standard_cart .apply-credit-container {
  background-color: rgba(255,255,255,.06) !important;
  border-radius: var(--r-sm) !important;
}
#order-standard_cart .cc-input-container {
  background-color: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
}


/* ============================================================
   STANDARD_CART DARK PASS — PART 2  2026-08-21
   ------------------------------------------------------------
   Part 1 was built from a scan that only flagged LIGHT colours.
   That was the wrong test: .view-cart-items-header is #058, a dark
   navy, which passed the filter while still being completely off
   palette. Re-scanned for ANY hard-coded background/border and
   found 82 selectors, ~60 of them still unhandled.

   This part covers the Review & Checkout page and the domain
   checker / TLD pricing / spotlight blocks, which are NOT scoped
   to #order-standard_cart and therefore leak onto domainchecker
   and domain results too.

   Semantic badges (.spotlight-tld-new/sale/hot, .promo.hot/sale/new)
   are deliberately left alone — they are meaningful status colours,
   readable as-is, and re-toning them would lose the signal.
   ============================================================ */

/* -- Review & Checkout: item table header (was #058) -- */
#order-standard_cart .view-cart-items-header {
  background-color: var(--bg3) !important;
  color: var(--txt) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 0 !important;
}

/* -- Empty Cart: a destructive secondary action, not a primary CTA -- */
#order-standard_cart .empty-cart .btn {
  background-color: rgba(255,255,255,.07) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
  box-shadow: none !important;
}
#order-standard_cart .empty-cart .btn:hover {
  background-color: rgba(239,68,68,.18) !important;
  border-color: rgba(239,68,68,.45) !important;
  color: #fca5a5 !important;
}

/* -- Promo code tabs + panel (were #f8f8f8 / #fff) -- */
#order-standard_cart .view-cart-tabs .nav-tabs {
  border-bottom-color: var(--border) !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs a {
  color: var(--txt2) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
  background-color: var(--card) !important;
  border-color: var(--border) var(--border) transparent !important;
  color: var(--brand) !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-top: 0 !important;
  color: var(--txt2) !important;
}
#order-standard_cart .view-cart-promotion-code {
  background-color: rgba(255,255,255,.04) !important;
  border: 1px dashed var(--border-hi) !important;
  color: var(--txt2) !important;
}
#order-standard_cart .view-cart-gateway-checkout {
  background-color: rgba(255,255,255,.06) !important;
  border-radius: var(--r-sm) !important;
}

/* -- Neutral buttons inside the cart (Validate Code etc.) -- */
#order-standard_cart .btn-default {
  background-color: rgba(255,255,255,.07) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
  background-image: none !important;
}
#order-standard_cart .btn-default:hover {
  background-color: rgba(255,255,255,.12) !important;
  border-color: var(--border-hi) !important;
}

/* -- Addon "add" button: keep the green signal, tune for dark -- */
#order-standard_cart .panel-addon .panel-add,
#order-standard_cart .panel-addon-selected .panel-add {
  background-color: #10b981 !important;
  color: #04201a !important;
}

/* ============================================================
   DOMAIN CHECKER / RESULTS / SPOTLIGHT
   These selectors are NOT scoped to the cart container, so they
   apply on domainchecker.php and the domain results panels too.
   ============================================================ */

.domain-checker-container {
  background-color: var(--bg3) !important;
  background-image: none !important;   /* kills the yellow gradient stack */
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--txt) !important;
}
.domain-checker-container .input-group-box {
  background-color: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
}

div.domainresults div:not(.btn-group) {
  background-color: var(--card) !important;
  color: var(--txt2) !important;
}

.domain-pricing .tld-row.highlighted { background: rgba(99,102,241,.14) !important; }
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header div:nth-child(odd) {
  background-color: rgba(255,255,255,.07) !important;
  border-color: var(--border) !important;
  color: var(--txt) !important;
}

.spotlight-tlds { background-color: transparent !important; }
.spotlight-tld {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--txt) !important;
}
.spotlight-tld .btn:not(.domain-contact-support),
.suggested-domains .btn:not(.domain-contact-support) {
  background-color: rgba(255,255,255,.10) !important;
  border-color: var(--border) !important;
  color: var(--txt) !important;
}
.spotlight-tld .unavailable,
.spotlight-tld .invalid {
  background-color: rgba(255,255,255,.05) !important;
  border-color: var(--border) !important;
  color: var(--txt3) !important;
}
.suggested-domains .domain-lookup-suggestions-loader {
  background-color: var(--card) !important;
}


/* ============================================================
   CHECKOUT DETAILS FORM — DARK PASS  2026-08-21
   ------------------------------------------------------------
   A THIRD stylesheet source. Parts 1 and 2 covered
   templates/orderforms/standard_cart/css/all.css; these rules live
   in the THEME's own inherited Six sheet,
   templates/nexus/css/all.css, and were never overridden:

     #registration .sub-heading span { background:#fff; color:#058 }
     .marketing-email-optin          { background-color:#f8f8f8 }

   The .sub-heading span needs an OPAQUE background — it sits on top
   of the divider's border-top to punch a gap for the label. So it
   must match the page background exactly, not be transparent, or
   the rule shows straight through the text.
   ============================================================ */

/* -- Section dividers: Personal Information, Billing Address, etc. -- */
#registration .sub-heading {
  border-top: 1px solid var(--border) !important;
}
#registration .sub-heading span {
  background-color: var(--bg) !important;   /* must match page bg to mask the line */
  color: var(--txt) !important;
  font-weight: 600 !important;
}

/* -- "Join our mailing list" panel (was #f8f8f8) -- */
.marketing-email-optin {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--txt2) !important;
}
.marketing-email-optin h4 { color: var(--txt) !important; }
.marketing-email-optin p  { color: var(--txt2) !important; }

/* -- Labels and helper text: #666 / #888 are too dim on dark -- */
#registration label { color: var(--txt2) !important; }
#registration .field-help-text { color: var(--txt2) !important; }
#registration .field-icon i { color: var(--txt3) !important; }
#registration .field[disabled],
#registration .field[readonly] {
  background-color: rgba(255,255,255,.03) !important;
  color: var(--txt3) !important;
}

/* -- "Already Registered?" is a secondary action, not a CTA --
      btn-info's pale blue is the only off-palette button left on
      the page and competes with Complete Order. -- */
#order-standard_cart #btnAlreadyRegistered,
#order-standard_cart .btn-info {
  background-color: rgba(255,255,255,.08) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}
#order-standard_cart #btnAlreadyRegistered:hover,
#order-standard_cart .btn-info:hover {
  background-color: rgba(255,255,255,.14) !important;
  border-color: var(--border-hi) !important;
  color: var(--txt) !important;
}


/* ============================================================
   CHECKOUT — DARK PASS PART 2  2026-08-21
   ------------------------------------------------------------
   Correction to the previous block. I attributed the white section
   header pills to `#registration .sub-heading span`, but
   `#registration` only exists in clientregister.tpl — it is NOT an
   ancestor of the cart, so that rule never applied here. (Those
   overrides are still correct for the standalone Register page and
   are left in place.)

   The real source is a global utility in the theme's inherited Six
   sheet, templates/nexus/css/all.css:8058:

       .primary-bg-color { background-color: #fff; }

   Every checkout section header is <span class="primary-bg-color">,
   sitting on top of .sub-heading's border-top to punch a gap for the
   label. It therefore needs an OPAQUE colour matching the page
   background. Verified this class is used only by order-form
   templates, so remapping it globally is safe.
   ============================================================ */

.primary-bg-color {
  background-color: var(--bg) !important;
}

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
  color: var(--txt) !important;
  font-weight: 600 !important;
}

/* -- "Choose Account" chooser (was #f6f6f6 / #fff active) -- */
#order-standard_cart .account-select-container {
  border-right: 1px solid var(--border) !important;
}
#order-standard_cart .account-select-container div.account {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-right: 0 !important;
  color: var(--txt2) !important;
}
#order-standard_cart .account-select-container div.account.active {
  background: var(--brand-lo) !important;
  border-color: var(--brand-mid) !important;
}
#order-standard_cart .account-select-container div.account label,
#order-standard_cart .account-select-container .address {
  color: var(--txt2) !important;
}
#order-standard_cart .account-select-container .address strong {
  color: var(--txt) !important;
}


/* ============================================================
   CLIENT AREA — COMPREHENSIVE DARK PASS  2026-08-21
   ------------------------------------------------------------
   Built from a diff rather than from screenshots: every selector in
   templates/nexus/css/all.css (the inherited Six sheet) with a light
   background fill, minus everything nexus.css already touches. That
   left 76 selectors, covered below.

   Semantic accents are deliberately NOT touched: .bg-color-* tile
   highlights, .progress-bar-*, .requestor-type-*, .tld-sale-group-*
   and .iti-flag (a sprite sheet — recolouring it breaks the flags).
   ============================================================ */

/* -- Client area home tiles --
   nexus.css styles .tile (0,1,0) but the fill comes from
   .tiles .tile (0,2,0), which outranks it. That is why the stat
   numbers looked invisible: light text on an unoverridden #f8f8f8. */
.tiles .tile {
  background-color: var(--card) !important;
  border-right: 1px solid var(--border) !important;
}
.tiles .tile:hover { background-color: var(--card-hover) !important; }
.tile .icon { color: var(--txt3) !important; }

/* -- Support tickets (thread view) -- */
.ticket-reply {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--txt2) !important;
}
.ticket-reply .user {
  background-color: rgba(255,255,255,.06) !important;
  color: var(--txt) !important;
}
.ticket-reply.staff .user {
  background-color: var(--indigo-lo) !important;
  color: var(--txt) !important;
}
.ticket-reply .attachments {
  background-color: rgba(255,255,255,.05) !important;
  border-top: 1px solid var(--border) !important;
}
.ticketfeedbackstaffcont {
  background-color: rgba(255,255,255,.06) !important;
  border: 1px solid var(--border) !important;
}

/* -- Markdown content (ticket bodies, knowledgebase) -- */
.markdown-content table {
  background-color: transparent !important;
  color: var(--txt2) !important;
}
.markdown-content table > thead > tr > th {
  background-color: rgba(255,255,255,.07) !important;
  color: var(--txt) !important;
  border-color: var(--border) !important;
}

/* -- Invoices -- */
.invoice-summary {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--txt2) !important;
}
.invoice-summary-table td.total-row {
  background-color: rgba(255,255,255,.07) !important;
  color: var(--txt) !important;
}

/* -- Tables -- */
.table-hover > tbody > tr:hover { background-color: rgba(255,255,255,.06) !important; }
.nav .nav-divider { background-color: var(--border) !important; }
.nav > li > a:hover, .nav > li > a:focus { background-color: rgba(255,255,255,.07) !important; }
.navbar-default { background-color: var(--bg2) !important; border-color: var(--border) !important; }

/* -- Pagination -- */
.pager li > a, .pager li > span {
  background-color: rgba(255,255,255,.07) !important;
  border-color: var(--border) !important;
  color: var(--txt) !important;
}
.pager li > a:hover, .pager li > a:focus {
  background-color: rgba(255,255,255,.13) !important;
}

/* -- Thumbnails / jumbotron / misc containers -- */
.thumbnail, .img-thumbnail {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
}
.jumbotron        { background-color: var(--card) !important; color: var(--txt2) !important; }
.promo-banner     { background-color: var(--card) !important; border: 1px solid var(--border) !important; }
.invite-box       { background-color: var(--card) !important; border: 1px solid var(--border) !important; }
.continue-container { background-color: rgba(255,255,255,.06) !important; }
.kb-rate-article  { background-color: var(--indigo-lo) !important; color: var(--txt) !important; }
.captcha-overlay-popup { background-color: var(--bg2) !important; color: var(--txt) !important; }
.twofa-setup .backup-code {
  background-color: rgba(255,255,255,.07) !important;
  color: var(--txt) !important;
}
.upgrade .product-to-be-upgraded {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
}
.select-account a:hover { background-color: rgba(255,255,255,.07) !important; }
.popover-user-notifications ul li a:hover { background-color: rgba(255,255,255,.07) !important; }

/* -- Email verification banner -- */
.verification-banner {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}
.verification-banner.failed {
  background-color: rgba(245,158,11,.15) !important;
  border-color: rgba(245,158,11,.40) !important;
  color: #fcd34d !important;
}

/* -- Bootstrap contextual states: pale tints are unreadable on dark,
      so they become translucent washes of the same hue -- */
.bg-success, .list-group-item-success {
  background-color: rgba(16,185,129,.15) !important;
  color: #6ee7b7 !important;
}
.bg-info, .list-group-item-info {
  background-color: rgba(6,182,212,.15) !important;
  color: #67e8f9 !important;
}
.bg-warning, .list-group-item-warning {
  background-color: rgba(245,158,11,.15) !important;
  color: #fcd34d !important;
}
.bg-danger, .list-group-item-danger,
.ox-table-accounts .list-group-item-danger {
  background-color: rgba(239,68,68,.15) !important;
  color: #fca5a5 !important;
}
a.bg-success:hover, a.bg-success:focus { background-color: rgba(16,185,129,.26) !important; }
a.bg-info:hover, a.bg-info:focus       { background-color: rgba(6,182,212,.26) !important; }
a.bg-warning:hover, a.bg-warning:focus { background-color: rgba(245,158,11,.26) !important; }
a.bg-danger:hover, a.bg-danger:focus,
.ox-table-accounts .list-group-item-danger:hover { background-color: rgba(239,68,68,.26) !important; }

/* -- Toggle switches (the Yes/No control on checkout) -- */
.bootstrap-switch .bootstrap-switch-label {
  background-color: var(--bg2) !important;
  color: var(--txt) !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background-color: rgba(255,255,255,.12) !important;
  color: var(--txt) !important;
}

/* -- MarketConnect store blocks -- */
.store-promoted-product {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
}
.store-order-container .store-domain-tabs li a {
  background-color: rgba(255,255,255,.06) !important;
  color: var(--txt2) !important;
}


/* ============================================================
   CLIENT AREA — DARK PASS PART 2  2026-08-21
   ------------------------------------------------------------
   My previous scan used a token-based "already covered" test: if a
   selector shared ANY class with something nexus.css touched, the
   whole rule was skipped. That over-excluded — e.g.
   `div.product-details div.product-icon` was dropped merely because
   nexus styles `.tab-content` elsewhere on the page.

   Re-scanned with a tighter test (match on the selector's KEY token
   AND require nexus to actually set a background there). These are
   the genuine remainders.

   Still deliberately untouched: .bg-color-*, .progress-bar-*,
   .requestor-type-*, .tld-sale-group-sale, .featured-tld .price.*
   and .bootstrap-switch-info/warning are semantic accents; .iti-flag
   is a sprite sheet.
   ============================================================ */

/* -- Manage Product page -- */
div.product-details div.product-icon {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
}
div.product-details div.product-icon .fa-circle { color: var(--indigo-lo) !important; }
div.product-details div.product-icon .fa-inverse { color: var(--txt2) !important; }
div.product-details .product-icon h3,
div.product-details .product-icon p,
div.product-details .product-icon small { color: var(--txt) !important; }
div.product-details-tab-container {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-top: 0 !important;
  color: var(--txt2) !important;
}

/* -- Payment methods / stored cards -- */
div.credit-card {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
}
div.credit-card div.card-number {
  background-color: rgba(255,255,255,.10) !important;
  color: var(--txt) !important;
}

/* -- Code + markdown (knowledgebase, ticket bodies) -- */
code {
  background-color: rgba(255,255,255,.08) !important;
  color: #fca5a5 !important;
}
pre {
  background-color: rgba(0,0,0,.35) !important;
  border-color: var(--border) !important;
  color: var(--txt) !important;
}
mark {
  background-color: rgba(245,158,11,.35) !important;
  color: var(--txt) !important;
}
h3.kb-alsoread {
  background-color: rgba(255,255,255,.07) !important;
  color: var(--txt) !important;
}

/* -- Markdown editor toolbar (ticket replies) -- */
.md-editor > .btn-toolbar {
  background-color: rgba(255,255,255,.06) !important;
  border-color: var(--border) !important;
}

/* -- DataTables: sorted column + responsive modal -- */
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: rgba(255,255,255,.10) !important;
  color: var(--txt) !important;
}
div.dtr-modal div.dtr-modal-display {
  background-color: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
}
div.dtr-modal div.dtr-modal-close {
  background-color: rgba(255,255,255,.10) !important;
  border-color: var(--border) !important;
  color: var(--txt) !important;
}
div.dtr-modal div.dtr-modal-close:hover {
  background-color: rgba(255,255,255,.18) !important;
}

/* -- Mass payment total row -- */
tr.masspay-total td {
  background-color: rgba(255,255,255,.08) !important;
  color: var(--txt) !important;
}

/* -- Disabled states: white/grey reads as "highlighted" on dark,
      which is backwards for something inactive -- */
.list-group-item.disabled,
.list-group-item.disabled:hover {
  background-color: rgba(255,255,255,.03) !important;
  color: var(--txt3) !important;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pager .disabled > a,
.pager .disabled > a:hover {
  background-color: rgba(255,255,255,.03) !important;
  border-color: var(--border) !important;
  color: var(--txt3) !important;
}

/* -- btn-default interaction states -- */
.btn-default:focus, .btn-default.focus,
.btn-default:active:hover, .btn-default.active:hover {
  background-color: rgba(255,255,255,.14) !important;
  border-color: var(--border-hi) !important;
  color: var(--txt) !important;
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover {
  background-color: rgba(255,255,255,.05) !important;
  color: var(--txt3) !important;
}

/* -- Verification banner action button -- */
.verification-banner.user-validation .btn.btn-action {
  background-color: rgba(255,255,255,.12) !important;
  border-color: var(--border) !important;
  color: var(--txt) !important;
}


/* ============================================================
   RENEWALS + REMAINING CART SURFACES — DARK PASS  2026-08-21
   ------------------------------------------------------------
   My earlier standard_cart scan was piped through `head -100` and I
   built the pass from the truncated output, so everything past the
   cut-off was never covered — including the whole Renew Domains /
   Renew Services page, which is a full-width #f8f8f8 fill with
   #f4f4f4 zebra striping.

   Re-scanned the file in full against what nexus.css now covers;
   these 6 are the genuine remainder. Vendor brand colours on the
   MarketConnect buttons (.nordvpn #4687FF, .sitelock #f29f44,
   .spamexperts #56a2da) and the sale badges are left as-is.
   ============================================================ */

/* -- Renew Domains / Renew Services -- */
.domain-renewals,
.service-renewals,
.addon-renewals .service-renewal {
  background-color: var(--card) !important;
  color: var(--txt2) !important;
}
.domain-renewals,
.service-renewals {
  border-top: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
}
.domain-renewals .domain-renewal,
.service-renewals .service-renewal {
  border-bottom: 1px solid var(--border) !important;
}
.domain-renewals .domain-renewal:nth-child(even),
.service-renewals .service-renewal:nth-child(even),
.addon-renewals .service-renewal:nth-child(even) {
  background-color: rgba(255,255,255,.05) !important;
}
/* the domain name itself — was dark text, invisible once the row went dark */
.domain-renewals .domain-renewal h3,
.service-renewals .service-renewal h3 {
  color: var(--txt) !important;
}
.service-renewals .div-renewal-period-label,
.domain-renewals .div-renewal-period-label { color: var(--txt2) !important; }

/* search/filter box carries a sprite icon on a #fff fill */
.form-control.domain-renewals-filter,
.form-control.service-renewals-filter {
  background-color: rgba(255,255,255,.06) !important;
  color: var(--txt) !important;
  border-color: var(--border) !important;
}

/* -- Fallback (non-reCAPTCHA) captcha box -- */
#order-standard_cart .default-captcha {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
}

/* -- MarketConnect promo cards (promos currently disabled, covered anyway) -- */
#order-standard_cart .mc-promo {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}
#order-standard_cart .mc-promo .body {
  background-color: rgba(255,255,255,.05) !important;
  color: var(--txt2) !important;
}

/* -- Cart upsell recommendations -- */
.product-recommendations .product-recommendation .body {
  background-color: rgba(255,255,255,.05) !important;
  color: var(--txt2) !important;
}