/* ============================================================
   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;
}


/* ============================================================
   HERO — WHMCS 9 AI DOMAIN SEARCH  2026-08-30
   ------------------------------------------------------------
   WHMCS 9 replaces the plain `domain` input with a `message`
   textarea (accepts a domain, a keyword, or a description) plus
   three controls: TLD multi-select, max length, and safe search.

   STRUCTURE: the <form> is now .nxsearch-form and the pill is an
   inner .nxsearch. That matters — .nxsearch has overflow:hidden,
   so the bootstrap-multiselect dropdown would be clipped if the
   controls lived inside it. They sit below the pill instead.

   The form keeps id="frmDomainHomepage" because six's inline
   initialiser is scoped to '#frmDomainHomepage .multiselect'.

   Animations here are margin-based (nxFadeUpSafe), never transform
   — a transformed ancestor becomes the containing block for
   position:fixed children, which is what trapped the reCAPTCHA
   badge inside the search pill previously.
   ============================================================ */

.nxsearch-form {
  position: relative;               /* anchor for the injected .g-recaptcha */
  max-width: 620px;
  margin: 0 auto 52px;
}
.nxsearch-form .nxsearch {
  max-width: none !important;
  margin: 0 0 14px !important;
}

/* -- textarea variant of the pill input -- */
.nxsearch textarea.nxsearch-input {
  resize: none !important;
  height: 58px !important;
  min-height: 58px !important;
  line-height: 1.35 !important;
  padding-top: 19px !important;
  padding-bottom: 12px !important;
  overflow: hidden !important;
  font-family: inherit !important;
}
.nxsearch textarea.nxsearch-input:focus {
  height: 92px !important;          /* room to type a description */
  overflow-y: auto !important;
  transition: height .18s ease;
}

/* -- advanced controls row -- */
.nxsearch-adv {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  animation: nxFadeUpSafe .7s ease .3s both;
}

/* the multiselect renders as a Bootstrap button + dropdown */
.nxsearch-adv .btn-group > .btn.multiselect,
.nxsearch-adv button.multiselect {
  background: rgba(255,255,255,.06) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: var(--t);
}
.nxsearch-adv .btn-group > .btn.multiselect:hover,
.nxsearch-adv .btn-group.open > .btn.multiselect,
.nxsearch-adv button.multiselect:focus {
  background: rgba(255,255,255,.12) !important;
  border-color: var(--border-hi) !important;
  color: var(--txt) !important;
  outline: none !important;
}
.nxsearch-adv .btn.multiselect .caret { margin-left: 7px; }

/* dropdown panel */
.nxsearch-adv .multiselect-container.dropdown-menu {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
  margin-top: 6px !important;
  max-height: 264px;
  overflow-y: auto;
  text-align: left;
}
.nxsearch-adv .multiselect-container > li > a { padding: 0 !important; background: transparent !important; }
.nxsearch-adv .multiselect-container > li > a > label {
  display: block;
  margin: 0 !important;
  padding: 7px 12px !important;
  border-radius: var(--r-sm);
  color: var(--txt2) !important;
  font-weight: 500 !important;
  font-size: 13px;
  cursor: pointer;
}
.nxsearch-adv .multiselect-container > li > a:hover > label,
.nxsearch-adv .multiselect-container > li > a:focus > label {
  background: rgba(255,255,255,.09) !important;
  color: var(--txt) !important;
}
.nxsearch-adv .multiselect-container > li.active > a > label {
  background: var(--brand-lo) !important;
  color: var(--brand) !important;
}
.nxsearch-adv .multiselect-container > li.disabled > a > label {
  color: var(--txt3) !important;
  cursor: not-allowed;
}
.nxsearch-adv .multiselect-container label input[type="checkbox"],
.nxsearch-adv .multiselect-container label input[type="radio"] {
  margin-right: 8px;
  accent-color: var(--brand);
}

/* the filter box inside the TLD dropdown */
.nxsearch-adv .multiselect-container .multiselect-search,
.nxsearch-adv .multiselect-container .form-control {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
.nxsearch-adv .multiselect-container .input-group-addon,
.nxsearch-adv .multiselect-container .input-group-btn .btn {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--border) !important;
  color: var(--txt3) !important;
}
.nxsearch-adv .multiselect-container li.multiselect-item.filter { padding: 4px 4px 8px; }
.nxsearch-adv .multiselect-container li.divider { background: var(--border) !important; }

/* -- safe search toggle, styled to match the pills -- */
.nxsafe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--txt2) !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--t);
}
.nxsafe:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--border-hi);
  color: var(--txt) !important;
}
.nxsafe input[type="checkbox"] {
  margin: 0;
  accent-color: var(--brand);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .nxsearch-adv { gap: 8px; }
  .nxsearch-adv .btn-group > .btn.multiselect,
  .nxsafe { font-size: 12px; padding: 6px 13px; }
  .nxsearch textarea.nxsearch-input { height: 52px !important; min-height: 52px !important; padding-top: 16px !important; }
}


/* ============================================================
   HERO FIXES — eyebrow, search hint, dropdown stacking  2026-08-30
   ------------------------------------------------------------
   1. The .nxbadge eyebrow is removed in header.tpl; its rules are
      left in place above but now match nothing.
   2. WHMCS 9's stock placeholder is a paragraph with worked
      examples — it clipped to two broken lines inside the pill.
      The field now carries a short placeholder and the explanation
      sits above the bar as .nxsearch-hint.
   3. The TLD dropdown appeared see-through: .nxcards was painting
      OVER it. Both are siblings in the hero, so the fix is an
      explicit stacking order, plus an opaque fill on the panel.
   4. All 23 TLDs are selected by default, so tinting every .active
      row brand-orange produced a solid orange block. Selection is
      now shown by the checkbox alone.
   ============================================================ */

/* -- hint line above the search bar -- */
.nxsearch-hint {
  margin: 0 0 10px !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--txt2) !important;
  text-align: center;
}

/* -- stacking: the hero's own children need an explicit order --
      .nxsearch-form must sit above .nxcards or the open dropdown
      is painted over by the cards. -- */
#nexus-hero .nxsearch-form { position: relative; z-index: 60; }
#nexus-hero .nxsearch-adv  { position: relative; z-index: 61; }
#nexus-hero .nxsearch-adv .btn-group.open { z-index: 62; }
#nexus-hero .nxcards { position: relative; z-index: 1; }

/* -- dropdown panel: force opaque, lift above everything -- */
.nxsearch-adv .multiselect-container.dropdown-menu,
.nxsearch-adv .btn-group .dropdown-menu {
  z-index: 1080 !important;
  background: #0d0d2a !important;      /* opaque, not a translucent var */
  background-color: #0d0d2a !important;
  background-image: none !important;
  opacity: 1 !important;
  border: 1px solid var(--border-hi) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.75) !important;
}

/* -- selection shown by the checkbox, not a full-width orange tint -- */
.nxsearch-adv .multiselect-container > li.active > a > label {
  background: transparent !important;
  color: var(--txt) !important;
  font-weight: 600 !important;
}
.nxsearch-adv .multiselect-container > li.active > a:hover > label,
.nxsearch-adv .multiselect-container > li.active > a:focus > label {
  background: rgba(255,255,255,.09) !important;
}

/* the filter row sits at the top of the panel — give it a base */
.nxsearch-adv .multiselect-container li.multiselect-item.filter {
  background: #0d0d2a !important;
  position: sticky;
  top: 0;
  z-index: 2;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* tidier scrollbar inside the panel */
.nxsearch-adv .multiselect-container::-webkit-scrollbar { width: 8px; }
.nxsearch-adv .multiselect-container::-webkit-scrollbar-track { background: transparent; }
.nxsearch-adv .multiselect-container::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18); border-radius: 8px;
}


/* ============================================================
   NEXUS_CART CARDS + HERO POLISH  2026-08-30
   ------------------------------------------------------------
   nexus_cart reuses the #order-standard_cart container and the
   .products .product markup, so it is styled from here.

   THE INVISIBLE PLAN NAMES:
       #order-standard_cart .products .product header span
           { color: #333; }
   An earlier pass darkened `header` but never its `span`, so the
   plan name stayed near-black on a dark band.

   THE GREEN BUTTONS: nexus_cart maps --vl-primary from --primary,
   but the `six` parent never defines --primary, so the cart fell
   back to its own green. Defining the WHMCS 9 palette variables
   below is what turns the whole order form brand-orange, rather
   than overriding each button by hand.
   ============================================================ */

/* -- WHMCS 9 palette: drives nexus_cart's --vl-* mappings -- */
:root {
  --primary: #f15a24;
  --primary-lifted: #ff8a3d;
  --primary-accented: #d94a18;
}

/* -- Product card boxes -- */
#order-standard_cart .products .product {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  transition: var(--t);
}
#order-standard_cart .products .product:hover {
  background: var(--card-hover) !important;
  border-color: var(--border-hi) !important;
  box-shadow: var(--shadow) !important;
}
#order-standard_cart .products .product header {
  background: rgba(255,255,255,.05) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 15px 20px !important;
}

/* -- Plan name: was #333. Uses the theme's display face. -- */
#order-standard_cart .products .product header span {
  color: var(--txt) !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-size: 1.3em !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
#order-standard_cart .products .product header .qty {
  color: var(--txt2) !important;
  font-style: normal !important;
}

#order-standard_cart .products .product div.product-desc,
#order-standard_cart .products .product div.product-desc p { color: var(--txt2) !important; }
#order-standard_cart .products .product span.feature-value,
#order-standard_cart .products .product div.product-pricing span.price { color: var(--txt) !important; }
#order-standard_cart .products .product ul li { color: var(--txt2) !important; }
#order-standard_cart .products .product footer {
  background: rgba(255,255,255,.03) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--txt2) !important;
}

/* -- Order Now: brand orange like every other primary CTA -- */
#order-standard_cart .btn-order-now,
#order-standard_cart a.btn-order-now,
#order-standard_cart .btn-order-now:focus {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  background-color: var(--brand) !important;
  background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 14px rgba(241,90,36,.3) !important;
}
#order-standard_cart .btn-order-now:hover { filter: brightness(1.1); color: #fff !important; }

/* ============================================================
   HERO — tighten the vertical rhythm and the dropdown
   ============================================================ */
.nxsubtitle { margin-bottom: 30px !important; }
.nxsearch-hint {
  margin: 0 0 9px !important;
  font-size: 12.5px !important;
  color: var(--txt3) !important;
}
.nxsearch-form { margin-bottom: 44px !important; }
#nexus-hero .nxcards { margin-top: 6px; }

/* dropdown: tighter, and its scrollbar must not inherit the
   global indigo ::-webkit-scrollbar-thumb from the base theme */
.nxsearch-adv .multiselect-container.dropdown-menu {
  min-width: 208px !important;
  max-height: 300px !important;
  padding: 6px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.nxsearch-adv .multiselect-container::-webkit-scrollbar { width: 8px !important; }
.nxsearch-adv .multiselect-container::-webkit-scrollbar-track { background: transparent !important; }
.nxsearch-adv .multiselect-container::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22) !important;
  border-radius: 8px !important;
}
.nxsearch-adv .multiselect-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.34) !important;
}


/* ============================================================
   TLD DROPDOWN — BREATHING ROOM  2026-08-30
   Rows sat hard against the panel edges and the checkbox crowded
   the label. Padding is increased on the panel, the rows and the
   filter box, and the panel is dropped further clear of its button.
   ============================================================ */

.nxsearch-adv .multiselect-container.dropdown-menu {
  padding: 10px !important;
  margin-top: 10px !important;
  min-width: 232px !important;
}

/* rows */
.nxsearch-adv .multiselect-container > li > a > label {
  padding: 10px 14px !important;
  line-height: 1.25 !important;
}
.nxsearch-adv .multiselect-container > li { margin-bottom: 2px; }
.nxsearch-adv .multiselect-container > li:last-child { margin-bottom: 0; }

/* checkbox clear of its label text */
.nxsearch-adv .multiselect-container label input[type="checkbox"],
.nxsearch-adv .multiselect-container label input[type="radio"] {
  margin-right: 11px !important;
  vertical-align: -1px;
}

/* filter box at the top of the panel */
.nxsearch-adv .multiselect-container li.multiselect-item.filter {
  padding: 2px 2px 10px !important;
  margin-bottom: 8px !important;
}
.nxsearch-adv .multiselect-container .multiselect-search {
  padding: 8px 12px !important;
  height: auto !important;
}
.nxsearch-adv .multiselect-container .input-group-addon {
  padding: 8px 12px !important;
}

/* keep the scrollbar off the row text */
.nxsearch-adv .multiselect-container { scrollbar-gutter: stable; }


/* ============================================================
   CART — DOMAIN STEP  2026-08-30
   ------------------------------------------------------------
   The AI search textarea in the cart carries NO class at all —
   not .form-control, not .field — so every dark rule we have
   missed it and it rendered as a raw browser default: white box,
   dark text. It has to be targeted by id/attribute.
   ============================================================ */

#order-standard_cart textarea#message,
#order-standard_cart textarea[name="message"],
.domain-selection-options textarea[name="message"] {
  width: 100% !important;
  min-height: 92px !important;
  padding: 13px 15px !important;
  background: rgba(255,255,255,.05) !important;
  background-color: rgba(255,255,255,.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--txt) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
  box-shadow: none !important;
}
#order-standard_cart textarea#message:focus,
#order-standard_cart textarea[name="message"]:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-lo) !important;
  outline: none !important;
}
#order-standard_cart textarea#message::placeholder,
#order-standard_cart textarea[name="message"]::placeholder {
  color: var(--txt3) !important;
  opacity: 1;
}

/* the advanced controls repeat here — reuse the hero treatment */
#order-standard_cart .btn-group > .btn.multiselect,
#order-standard_cart button.multiselect {
  background: rgba(255,255,255,.06) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--txt2) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
#order-standard_cart .btn-group.open > .btn.multiselect,
#order-standard_cart .btn-group > .btn.multiselect:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: var(--border-hi) !important;
  color: var(--txt) !important;
}
#order-standard_cart .multiselect-container.dropdown-menu {
  background: #0d0d2a !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.75) !important;
  padding: 10px !important;
  margin-top: 10px !important;
  z-index: 1080 !important;
}
#order-standard_cart .multiselect-container > li > a { padding: 0 !important; background: transparent !important; }
#order-standard_cart .multiselect-container > li > a > label {
  display: block;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: var(--r-sm);
  color: var(--txt2) !important;
  font-weight: 500 !important;
}
#order-standard_cart .multiselect-container > li > a:hover > label {
  background: rgba(255,255,255,.09) !important;
  color: var(--txt) !important;
}
#order-standard_cart .multiselect-container > li.active > a > label {
  background: transparent !important;
  color: var(--txt) !important;
  font-weight: 600 !important;
}
#order-standard_cart .multiselect-container label input { margin-right: 11px !important; }
#order-standard_cart .multiselect-container .multiselect-search {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt) !important;
  padding: 8px 12px !important;
  height: auto !important;
}
#order-standard_cart .multiselect-container .input-group-addon {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--border) !important;
  color: var(--txt3) !important;
  padding: 8px 12px !important;
}

/* native checkboxes/radios that iCheck has not skinned */
#order-standard_cart input[type="checkbox"].no-icheck,
#order-standard_cart input[type="radio"].no-icheck { accent-color: var(--brand); }

/* ============================================================
   CART — CLEARANCE FOR THE FIXED SUMMARY BAR  2026-08-30
   WHMCS 9's "Shopping Cart / Checkout" bar is rendered by JS
   inside the order form's shadow DOM and is position:fixed at the
   foot of the viewport. The page reserves no space for it, so the
   last rows of the TLD table and the footer scroll underneath it.
   The bar itself is unreachable from here (shadow DOM), but the
   page padding is not.
   ============================================================ */
#order-standard_cart { padding-bottom: 130px !important; }
@media (max-width: 767px) {
  #order-standard_cart { padding-bottom: 165px !important; }
}

/* ============================================================
   TLD DROPDOWN — CHECKBOX ALIGNMENT  2026-08-30
   ------------------------------------------------------------
   Adding padding to the label did nothing for the checkbox because
   Bootstrap's .checkbox rule takes the input OUT of flow:
       .checkbox input[type=checkbox] { position:absolute; margin-left:-20px; }
   so it hangs outside the label's padding box, flush to the panel
   edge. Returning it to static flow and laying the label out as a
   flex row makes the padding and the gap actually apply.
   ============================================================ */

.nxsearch-adv .multiselect-container > li > a > label,
#order-standard_cart .multiselect-container > li > a > label {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 11px 18px !important;
  margin: 0 !important;
}

.nxsearch-adv .multiselect-container > li > a > label input[type="checkbox"],
.nxsearch-adv .multiselect-container > li > a > label input[type="radio"],
#order-standard_cart .multiselect-container > li > a > label input[type="checkbox"],
#order-standard_cart .multiselect-container > li > a > label input[type="radio"] {
  position: static !important;   /* was absolute */
  margin: 0 !important;          /* was margin-left:-20px */
  flex: 0 0 auto !important;
  width: 15px;
  height: 15px;
}

/* a little more room around the whole list */
.nxsearch-adv .multiselect-container.dropdown-menu,
#order-standard_cart .multiselect-container.dropdown-menu {
  padding: 12px !important;
}
.nxsearch-adv .multiselect-container > li,
#order-standard_cart .multiselect-container > li { margin-bottom: 3px; }

/* ============================================================
   VIEW CART — UNDO WHMCS'S HARDCODED WHITE PAGE  2026-08-30
   ------------------------------------------------------------
   nexus_cart/viewcart.tpl injects an inline <style> block:
       section#main-body { padding:0 !important; background:#fff !important; }
   An inline block in the body is parsed AFTER our linked stylesheet,
   so an equally-important rule of equal specificity would lose to it.
   `body section#main-body` (0,1,0,2) outranks `section#main-body`
   (0,1,0,1), so specificity wins regardless of source order — no
   template override required, and updates to viewcart.tpl still
   flow through from the parent.
   ============================================================ */
body section#main-body,
html body section#main-body {
  background: var(--bg) !important;
}

/* ============================================================
   TYPE SIZE + TEXT CONTRAST  2026-08-30
   ------------------------------------------------------------
   Base was Bootstrap 3's 14px. Lifted to 15px — a ~7% bump, small
   enough not to reflow Bootstrap's px-based components.

   Contrast on --bg (#06061a) before/after:
     --txt2  #94a3b8 -> #a8b4c4   ~7.5:1 -> ~9.9:1
     --txt3  #4b5563 -> #7c8899   ~2.7:1 -> ~5.4:1
   --txt3 was below the WCAG AA 4.5:1 floor and is used for
   placeholders and muted labels, which is why body copy read as
   washed out rather than merely small.
   ============================================================ */

:root {
  --txt2: #a8b4c4;
  --txt3: #7c8899;
}

body {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* keep dense UI chrome from growing with the base */
.table, .table td, .table th,
.dropdown-menu, .badge, .label,
.breadcrumb, .footer-links { font-size: 14px; }

/* placeholders were the worst offender */
::placeholder { color: var(--txt3) !important; opacity: 1 !important; }

/* small print that sat at --txt3 for decorative reasons */
small, .small, .help-block, .text-muted { color: var(--txt2) !important; }

/* ============================================================
   BRAND BUTTON CONTRAST  2026-08-30
   ------------------------------------------------------------
   Measured, white text on the brand gradient:
       #f15a24 (start)  3.37:1
       #ff8a3d (end)    2.35:1     <- badly under the 4.5:1 AA floor
   Mid-bright orange simply cannot carry white text.

   Two ways out:
     A. keep the exact logo orange, use near-black text  -> 5.35..7.69:1
     B. keep white text, darken orange to #c2410c        -> 5.18:1
   A is used here because it preserves the brand colour taken from
   the logo SVG; B would have shifted it to a visibly muddier orange.

   The Transfer button is excluded - it is cyan-tinted, not orange,
   and white already reads correctly on it.
   ============================================================ */

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
section#header .top-nav li.primary-action a,
section#header .top-nav li.primary-action a:hover,
.nxsearch .btn:not(.btn-transfer),
.nxsearch input[type=submit]:not(.btn-transfer),
#order-standard_cart .product-container .order-button,
#order-standard_cart .btn-order-now,
#order-standard_cart .btn-order-now:hover,
.product-recommendations .product-recommendation .cta,
.pricing_plan_outer .plan_box .plan_box_cnt .plan_btn a {
  color: #241206 !important;
  -webkit-text-fill-color: #241206 !important;
  font-weight: 700 !important;
}

/* icons inside those buttons inherit the same treatment */
.btn-primary i,
.nxsearch .btn:not(.btn-transfer) i,
#order-standard_cart .btn-order-now i,
.pricing_plan_outer .plan_box .plan_box_cnt .plan_btn a i {
  color: #241206 !important;
  -webkit-text-fill-color: #241206 !important;
}

/* ============================================================
   BRAND BUTTONS — WHITE TEXT  2026-08-30  (supersedes the
   near-black experiment immediately above)
   ------------------------------------------------------------
   White text needs a darker surface than #f15a24 can provide
   (3.37:1 at the gradient start, 2.35:1 at the end).

   But the SAME orange is doing two different jobs, and they pull
   in opposite directions:
     - as TEXT/ACCENT on the dark page: #f15a24 = 5.94:1  (good)
                                        #bb3d0b = 3.61:1  (worse)
     - as a BUTTON SURFACE under white: #f15a24 = 3.37:1  (bad)
                                        #bb3d0b = 5.55:1  (good)
   So --brand stays bright for accents, links, active states and
   focus rings, and a separate darker pair is used ONLY for filled
   button surfaces that carry white text.

     white on #bb3d0b  5.55:1  PASS
     white on #c94510  4.84:1  PASS
   Both ends of the gradient now clear AA.
   ============================================================ */

:root {
  --brand-btn:   #bb3d0b;
  --brand-btn-2: #c94510;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
section#header .top-nav li.primary-action a,
section#header .top-nav li.primary-action a:hover,
.nxsearch .btn:not(.btn-transfer),
.nxsearch input[type=submit]:not(.btn-transfer),
#order-standard_cart .product-container .order-button,
#order-standard_cart .btn-order-now,
#order-standard_cart .btn-order-now:hover,
.product-recommendations .product-recommendation .cta,
.pricing_plan_outer .plan_box .plan_box_cnt .plan_btn a {
  background: linear-gradient(135deg, var(--brand-btn) 0%, var(--brand-btn-2) 100%) !important;
  background-image: linear-gradient(135deg, var(--brand-btn) 0%, var(--brand-btn-2) 100%) !important;
  background-color: var(--brand-btn) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 14px rgba(187,61,11,.34) !important;
}

.btn-primary i,
.nxsearch .btn:not(.btn-transfer) i,
#order-standard_cart .btn-order-now i,
.product-recommendations .product-recommendation .cta i,
.pricing_plan_outer .plan_box .plan_box_cnt .plan_btn a i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.btn-primary:hover,
#order-standard_cart .btn-order-now:hover,
.nxsearch .btn:not(.btn-transfer):hover {
  filter: brightness(1.12);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================
   CART DOMAIN ROW — EQUAL CONTROL HEIGHTS  2026-08-30
   ------------------------------------------------------------
   WHMCS puts the SLD box inside an .input-group (with the "www."
   addon) but leaves the TLD box outside one. Our earlier form-control
   fix sets min-height:42px generally and a compact 34px inside
   .input-group — so these two adjacent boxes, same class, resolved
   to different heights. Pinned to one height here.
   ============================================================ */

.domain-selection-options .domains-row .form-control,
.domain-selection-options .domains-row .input-group .form-control,
.domain-selection-options .domains-row .input-group-addon,
.domain-selection-options .domains-row .input-group-text,
#domainowndomain .form-control,
#domainowndomain .input-group .form-control,
#domainowndomain .input-group-addon,
#domainowndomain .input-group-text {
  height: 44px !important;
  min-height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 42px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* the Use / action button must match the boxes beside it */
#domainowndomain .btn,
.domain-selection-options .domains-row + .col-sm-2 .btn,
.domain-selection-options .btn.btn-block {
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* keep the row's columns on one baseline */
.domain-selection-options .domains-row > [class^="col-"],
.domain-selection-options .domains-row > [class*=" col-"] { margin-bottom: 0 !important; }

/* ============================================================
   SHADOW-DOM CART TOKENS, DRIVEN FROM THE THEME
   ------------------------------------------------------------
   nexus_cart maps --vl-X: var(--X), so defining the UNPREFIXED
   names here reaches into the order form's shadow DOM without
   switching the order form template at all. --primary was still the
   bright #f15a24, which is why "Checkout - R59.00 ZAR" read faint:
   white on #f15a24 is 3.37:1. The darker button orange gives 5.55:1.
   ============================================================ */
:root {
  --primary:          #bb3d0b;
  --primary-lifted:   #c94510;
  --primary-accented: #a63409;
  --text:             #f1f5f9;
  --text-lifted:      #ffffff;
  --text-accented:    #dbe3ec;
  --text-muted:       #a8b4c4;
  --text-inverted:    #ffffff;
}


/* ============================================================
   PAYFAST INVOICE BUTTONS  2026-08-30
   ------------------------------------------------------------
   modules/gateways/payfast.php :: pf_create_button() emits a bare
   <input type="submit"> with NO class and NO id:

       <form method="post" action="https://www.payfast.co.za/eng/process">
         <input type="hidden" ... />
         <input type="submit" value="Pay Using Payfast"/>
       </form>

   so it can only be reached by attribute. Styling it from here rather
   than editing the module keeps it working across PayFast module
   upgrades. The action substring matches both www. (live) and
   sandbox. (test_mode=on).

   Both buttons are SOLID with white text deliberately: the invoice
   panel renders light while the rest of the theme is dark, so a ghost
   or outline treatment would fail contrast on one of the two.
   ============================================================ */

form[action*="payfast.co.za/eng/process"] {
  display: inline-block;
  margin: 0 10px 12px 0;
  vertical-align: middle;
}

form[action*="payfast.co.za/eng/process"] input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  min-width: 215px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #fff;
  background: var(--brand-btn, #bb3d0b);
  background-image: linear-gradient(135deg, var(--brand-btn, #bb3d0b) 0%, var(--brand-btn-2, #c94510) 100%);
  box-shadow: 0 2px 14px rgba(187, 61, 11, .30);
  cursor: pointer;
  transition: var(--t, all .22s ease);
}

form[action*="payfast.co.za/eng/process"] input[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(187, 61, 11, .42);
}

form[action*="payfast.co.za/eng/process"] input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(187, 61, 11, .35);
}

form[action*="payfast.co.za/eng/process"] input[type="submit"]:focus-visible {
  outline: 3px solid rgba(241, 90, 36, .55);
  outline-offset: 2px;
}

/* Secondary: the tokenised subscription button. Neutral slate keeps it
   clearly subordinate to Pay. White on #334155 is 10.4:1, so it is safe
   on the light invoice panel and on the dark theme alike. */
form[action*="payfast.co.za/eng/process"] input[type="submit"][value*="Subscribe"] {
  background: #334155;
  background-image: linear-gradient(135deg, #3f4d61 0%, #334155 100%);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .22);
}

form[action*="payfast.co.za/eng/process"] input[type="submit"][value*="Subscribe"]:hover {
  filter: none;
  background-image: linear-gradient(135deg, #4a5a70 0%, #3d4b5e 100%);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .30);
}

@media (max-width: 480px) {
  form[action*="payfast.co.za/eng/process"] {
    display: block;
    margin-right: 0;
  }
  form[action*="payfast.co.za/eng/process"] input[type="submit"] {
    width: 100%;
    min-width: 0;
  }
}