/* ---- original Twenty-One custom.css, retained ---- */
/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* ================================================================
   VM6 CONSOLE — everything below is the VM6 theme
   ================================================================ */
/* ============================================================================
   VM6 NETWORKS — CONSOLE (WHMCS client area)
   ----------------------------------------------------------------------------
   Child theme of Twenty-One. This file is loaded by the parent's head.tpl via
   {assetExists file="custom.css"}, after theme.min.css, so it wins on equal
   specificity without needing !important everywhere.

   The token block below is a copy of vm6-tokens.css from the website. Keep the
   two in step — if you change a colour on the site, change it here too. (If you
   would rather have one file, replace the block with an @import of
   https://www.vm6.co.uk/assets/css/vm6-tokens.css — at the cost of a blocking
   request to the marketing site.)

   Sections:
     1  Tokens
     2  Base and typography
     3  Header, navigation, mobile sheet
     4  Bootstrap 4 surfaces
     5  Twenty-One specifics
     6  Sidebars (same component as the website's side panels)
     7  Forms
     8  Stripe and payment pages
     9  Footer
    10  Responsive, motion, print
   ============================================================================ */

/* ============================== 1. TOKENS ================================= */
:root{
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --brand:#5B6CFF; --brand-600:#4a5aeb; --brand-300:#a5b4fc;
  --signal:#2FE08A; --warn:#F5A524; --danger:#F05252;

  --r-sm:7px; --r:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --maxw:1200px; --gap:20px; --section-y:60px; --header-h:66px; --topbar-h:38px;
  --ease:cubic-bezier(.4,0,.2,1); --t-fast:.16s; --t:.22s;
}

[data-theme="dark"]{
  --bg:#0A0E17; --bg-2:#0D1220; --bg-3:#10162A;
  --surface:#121826; --surface-2:#171F31; --surface-3:#1D2740;
  --line:#222C42; --line-soft:#1A2233;
  --text:#E8ECF6; --text-strong:#FFFFFF; --muted:#8B97AC; --muted-2:#6C7A93;
  --accent:var(--brand); --accent-text:#A9B4FF;
  --accent-soft:rgba(91,108,255,.14); --accent-line:rgba(91,108,255,.34);
  --signal-soft:rgba(47,224,138,.14); --warn-soft:rgba(245,165,36,.14); --danger-soft:rgba(240,82,82,.14);
  --shadow-sm:0 1px 0 rgba(255,255,255,.03);
  --shadow:0 1px 0 rgba(255,255,255,.03),0 16px 40px -24px rgba(0,0,0,.9);
  --shadow-lg:0 1px 0 rgba(255,255,255,.04),0 40px 80px -40px rgba(0,0,0,1);
  --grid-line:rgba(255,255,255,.028); --overlay:rgba(3,6,14,.66); --on-accent:#FFFFFF;
  --tint-rgb:255,255,255; --brand-rgb:91,108,255; --signal-rgb:47,224,138;
  color-scheme:dark;
}

[data-theme="light"]{
  --bg:#F4F6FB; --bg-2:#EDF1F8; --bg-3:#E6ECF7;
  --surface:#FFFFFF; --surface-2:#F7F9FD; --surface-3:#EEF2FA;
  --line:#DCE3F0; --line-soft:#E8EDF6;
  --text:#0E1526; --text-strong:#05080F; --muted:#586880; --muted-2:#7A8698;
  --accent:#4655E8; --accent-text:#3A47C9;
  --accent-soft:rgba(70,85,232,.09); --accent-line:rgba(70,85,232,.28);
  --signal:#0FA968; --signal-soft:rgba(15,169,104,.11);
  --warn:#B7791F; --warn-soft:rgba(183,121,31,.12);
  --danger:#D03535; --danger-soft:rgba(208,53,53,.10);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -18px rgba(16,24,40,.28);
  --shadow-lg:0 2px 4px rgba(16,24,40,.05),0 32px 64px -34px rgba(16,24,40,.4);
  --grid-line:rgba(14,21,38,.035); --overlay:rgba(14,21,38,.42); --on-accent:#FFFFFF;
  --tint-rgb:14,21,38; --brand-rgb:70,85,232; --signal-rgb:15,169,104;
  color-scheme:light;
}

/* ========================= 2. BASE AND TYPOGRAPHY ========================== */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--topbar-h) + 12px)}
body,body.primary-bg-color{
  background:var(--bg)!important;color:var(--text)!important;
  font-family:var(--font-body)!important;font-size:15.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;background-attachment:fixed;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{
  font-family:var(--font-display)!important;font-weight:700;letter-spacing:-.02em;
  color:var(--text-strong)!important;line-height:1.2;
}
h1,.h1{font-size:clamp(1.7rem,3vw,2.3rem)}
h2,.h2{font-size:clamp(1.35rem,2.4vw,1.8rem)}
h3,.h3{font-size:1.2rem}
a{color:var(--accent-text);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover,a:focus{color:var(--accent);text-decoration:none}
hr{border-top-color:var(--line);opacity:1}
small,.small{color:var(--muted)}
code,pre,kbd{font-family:var(--font-mono)}
code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:.12em .4em;color:var(--accent-text)}
pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--text);padding:14px}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.text-muted{color:var(--muted)!important}
.text-dark,.text-body{color:var(--text)!important}
.text-primary{color:var(--accent-text)!important}
.text-success{color:var(--signal)!important}
.text-danger{color:var(--danger)!important}
.text-warning{color:var(--warn)!important}
.bg-white,.bg-light{background:var(--surface)!important}
.container{max-width:var(--maxw)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:var(--on-accent);padding:11px 18px}
.skip-link:focus{left:0;color:var(--on-accent)}
/* WHMCS hides elements with .w-hidden and reveals them with jQuery .show(),
   which sets an INLINE display style. An inline style loses to !important in a
   stylesheet, so adding !important here permanently hides every client-area
   table, gateway error and 2FA control. WHMCS's own rule has no !important —
   this must match it. */
.w-hidden{display:none}

/* ================= 3. HEADER, NAVIGATION, MOBILE SHEET ==================== */
#header.header{background:transparent;border:0;box-shadow:none}

.top-header,.topbar{
  background:var(--bg-2)!important;border-bottom:1px solid var(--line-soft);
  font-size:.82rem;color:var(--muted);padding:0;
}
.top-header-content{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:var(--topbar-h);flex-wrap:wrap}
.top-links-left,.top-links-right{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.top-link{color:var(--muted)!important;display:inline-flex;align-items:center;gap:7px;font-size:.82rem;background:none;border:0;padding:0}
.top-link:hover{color:var(--accent-text)!important}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--signal);display:inline-block;box-shadow:0 0 0 3px var(--signal-soft)}

.site-header{
  position:sticky;top:0;z-index:90;
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;min-height:var(--header-h);
}
.site-header .navbar-brand{justify-self:start;margin:0;padding:6px 0;display:inline-flex;align-items:center}
.site-header .navbar-brand .logo-img{max-height:40px;width:auto}
.brand-text{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.03em;color:var(--text-strong)}
.brand-text em{font-style:normal;font-weight:400;color:var(--accent)}
.primary-nav{display:flex;justify-content:center;min-width:0}
.header-actions{display:flex;align-items:center;gap:8px;justify-self:end}

.main-nav{display:flex;align-items:center;justify-content:center;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.main-nav>li{position:relative}
.main-nav>li>a{
  display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:var(--r-sm);
  font-size:.93rem;font-weight:500;color:var(--text);white-space:nowrap;
}
.main-nav>li>a:hover,.main-nav>li:hover>a,.main-nav>li:focus-within>a{background:var(--accent-soft);color:var(--accent-text)}
.main-nav>li.is-current>a{color:var(--accent-text)}
.main-nav>li>a>i{font-size:.86rem;color:var(--muted)}
.main-nav>li:hover>a>i{color:var(--accent)}

.main-nav .nav-menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-6px);
  min-width:274px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:8px;margin:0;list-style:none;
  opacity:0;visibility:hidden;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),visibility var(--t-fast);
  z-index:120;
}
.main-nav>li:hover>.nav-menu,.main-nav>li:focus-within>.nav-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.main-nav>li:last-child>.nav-menu,.main-nav>li:nth-last-child(2)>.nav-menu{left:auto;right:0;transform:translate(0,-6px)}
.main-nav>li:last-child:hover>.nav-menu,.main-nav>li:nth-last-child(2):hover>.nav-menu,
.main-nav>li:last-child:focus-within>.nav-menu,.main-nav>li:nth-last-child(2):focus-within>.nav-menu{transform:translate(0,0)}
.main-nav .nav-menu a{
  display:flex;align-items:flex-start;gap:11px;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--text);font-size:.91rem;font-weight:500;
}
.main-nav .nav-menu a>i{flex:none;width:17px;text-align:center;margin-top:3px;color:var(--accent-text);font-size:.9rem}
.main-nav .nav-menu a .nm-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.main-nav .nav-menu a small{color:var(--muted);font-size:.76rem;font-weight:400;font-family:var(--font-mono)}
.main-nav .nav-menu a:hover{background:var(--surface-2);color:var(--accent-text)}
.main-nav .nav-menu hr{margin:6px 4px;border-color:var(--line-soft)}

/* the logged-in client menu — three columns */
.nav-menu-wide{min-width:640px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px}
.nav-menu__col{display:flex;flex-direction:column;gap:1px;min-width:0}
.nav-menu__head{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);padding:4px 11px 8px;border-bottom:1px solid var(--line-soft);margin-bottom:5px;
}
.nav-menu__col a{font-size:.89rem;padding:7px 11px;align-items:center}
.nav-menu__col a>i{margin-top:0;font-size:.85rem}
.nav-menu__col hr{width:100%;margin:6px 0}
.nav-menu__col a.is-logout{color:var(--danger)}
.nav-menu__col a.is-logout>i{color:var(--danger)}
.nav-menu__col a.is-logout:hover{background:var(--danger-soft);color:var(--danger)}
.nav-menu .badge{margin-left:6px}

.icon-btn{
  width:40px;height:40px;flex:none;display:grid;place-items:center;position:relative;
  border-radius:var(--r-sm);border:1px solid var(--line);background:transparent;color:var(--text);
  cursor:pointer;transition:all var(--t-fast) var(--ease);
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}
.icon-btn.cart-btn .badge{
  position:absolute;top:-6px;right:-6px;background:var(--accent)!important;color:var(--on-accent)!important;
  border:0;font-size:.65rem;padding:.2em .45em;min-width:18px;border-radius:var(--r-pill);
}
[data-theme="dark"] .icon-sun{display:block}[data-theme="dark"] .icon-moon{display:none}
[data-theme="light"] .icon-sun{display:none}[data-theme="light"] .icon-moon{display:block}
.nav-toggle{display:none}

@media(max-width:1180px){
  .main-nav>li>a{padding:9px 10px;font-size:.9rem}
  .nav-menu-wide{min-width:560px}
}
@media(max-width:1080px){
  .primary-nav,.header-actions .btn-nav{display:none}
  .site-header .container{grid-template-columns:1fr auto}
  .nav-toggle{display:grid}
}

/* mobile sheet */
.nav-sheet{position:fixed;inset:0;z-index:1050;visibility:hidden}
.nav-sheet[aria-hidden="false"]{visibility:visible}
.nav-sheet__scrim{position:absolute;inset:0;background:var(--overlay);opacity:0;transition:opacity var(--t) var(--ease)}
.nav-sheet[aria-hidden="false"] .nav-sheet__scrim{opacity:1}
.nav-sheet__panel{
  position:absolute;top:0;right:0;height:100%;width:min(420px,88vw);
  background:var(--bg-2);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .28s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
}
.nav-sheet[aria-hidden="false"] .nav-sheet__panel{transform:none}
.nav-sheet__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-2);z-index:2;
}
.nav-sheet__body{padding:12px 14px 30px}
.sheet-search{margin-bottom:14px}
.nav-acc{border-bottom:1px solid var(--line-soft)}
.nav-acc>a,.nav-acc>button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 8px;background:none;border:0;color:var(--text);
  font:600 1rem/1.25 var(--font-body);text-align:left;cursor:pointer;
}
.nav-acc>a>i{margin-right:10px;color:var(--accent-text);width:17px;text-align:center}
.nav-acc svg{flex:none;color:var(--muted);transition:transform var(--t-fast) var(--ease)}
.nav-acc[data-open="true"]>button{color:var(--accent-text)}
.nav-acc[data-open="true"]>button svg{transform:rotate(180deg);color:var(--accent)}
.nav-acc__panel{display:none;padding:0 4px 12px}
.nav-acc[data-open="true"] .nav-acc__panel{display:block}
.nav-acc__panel a{
  display:flex;align-items:center;gap:11px;padding:11px 14px;color:var(--muted);
  font-size:.93rem;border-left:2px solid var(--line);font-weight:500;
}
.nav-acc__panel a>i{flex:none;width:17px;text-align:center;color:var(--accent-text);font-size:.86rem}
.nav-acc__panel a:hover{color:var(--accent-text);border-left-color:var(--accent);background:var(--surface)}
.nav-sheet__cta{display:grid;gap:10px;padding:20px 8px 0}

/* ======================= 4. BOOTSTRAP 4 SURFACES ========================== */
.btn{
  font-family:var(--font-body);font-weight:600;font-size:.93rem;border-radius:var(--r-sm);
  padding:10px 17px;transition:all var(--t-fast) var(--ease);box-shadow:none!important;
}
.btn-primary,.btn-success.btn-checkout{
  background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important;
}
.btn-primary:hover,.btn-primary:focus{background:var(--brand-600)!important;border-color:var(--brand-600)!important;transform:translateY(-1px)}
.btn-default,.btn-secondary,.btn-outline,.btn-outline-secondary,.btn-light{
  background:transparent!important;border-color:var(--line)!important;color:var(--text)!important;
}
.btn-default:hover,.btn-secondary:hover,.btn-outline:hover,.btn-outline-secondary:hover,.btn-light:hover{
  border-color:var(--accent)!important;color:var(--accent-text)!important;background:var(--accent-soft)!important;
}
.btn-success{background:var(--signal)!important;border-color:var(--signal)!important;color:#04150C!important}
.btn-danger{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}
.btn-warning{background:var(--warn)!important;border-color:var(--warn)!important;color:#1b1204!important}
.btn-info{background:var(--accent-soft)!important;border-color:var(--accent-line)!important;color:var(--accent-text)!important}
.btn-link{color:var(--accent-text)!important}
.btn-lg{padding:13px 24px;font-size:1rem;border-radius:var(--r)}
.btn-sm{padding:7px 13px;font-size:.85rem}
.btn.disabled,.btn:disabled{opacity:.5}

.card,.panel,.well{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;color:var(--text);box-shadow:var(--shadow-sm)!important;
}
.card-header,.panel-heading{
  background:var(--surface-2)!important;border-bottom:1px solid var(--line)!important;
  color:var(--text-strong)!important;font-family:var(--font-display);font-weight:600;
  border-radius:var(--r-lg) var(--r-lg) 0 0!important;padding:14px 18px;
}
.card-footer,.panel-footer{background:var(--surface-2)!important;border-top:1px solid var(--line)!important;color:var(--muted)}
.card-body,.panel-body{color:var(--text)}
.card-title{color:var(--text-strong)!important;font-family:var(--font-display)}
.card-text{color:var(--muted)}

.table{color:var(--text)!important;border-color:var(--line)!important}
.table thead th{
  background:var(--surface-2);color:var(--text-strong);border-bottom:1px solid var(--line)!important;
  border-top:0!important;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;padding:13px 15px;
}
.table td,.table th{border-top:1px solid var(--line-soft)!important;padding:13px 15px;vertical-align:middle}
.table-striped tbody tr:nth-of-type(odd){background:var(--surface-2)!important}
.table-hover tbody tr:hover{background:var(--surface-2)!important;color:var(--text)}
.table-bordered,.table-bordered td,.table-bordered th{border-color:var(--line)!important}
.table-responsive{border:0}
.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{color:var(--muted)}

.alert{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);color:var(--text)}
.alert-info,.alert-primary{background:var(--accent-soft);border-color:var(--accent-line);color:var(--text)}
.alert-success{background:var(--signal-soft);border-color:var(--signal);color:var(--text)}
.alert-warning{background:var(--warn-soft);border-color:var(--warn);color:var(--text)}
.alert-danger{background:var(--danger-soft);border-color:var(--danger);color:var(--text)}
.alert a{color:var(--accent-text)}

.badge{font-weight:600;border-radius:var(--r-pill);padding:.38em .75em;font-size:.72rem}
.badge-info,.badge-primary{background:var(--accent-soft)!important;color:var(--accent-text)!important;border:1px solid var(--accent-line)}
.badge-success{background:var(--signal-soft)!important;color:var(--signal)!important;border:1px solid var(--signal)}
.badge-warning{background:var(--warn-soft)!important;color:var(--warn)!important;border:1px solid var(--warn)}
.badge-danger{background:var(--danger-soft)!important;color:var(--danger)!important;border:1px solid var(--danger)}
.badge-secondary,.badge-default{background:var(--surface-2)!important;color:var(--muted)!important;border:1px solid var(--line)}

.dropdown-menu{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--shadow-lg)!important;padding:8px;
}
.dropdown-item,.dropdown-menu>li>a{color:var(--text)!important;border-radius:var(--r-sm);padding:9px 12px;font-size:.91rem}
.dropdown-item:hover,.dropdown-item:focus,.dropdown-menu>li>a:hover{background:var(--surface-2)!important;color:var(--accent-text)!important}
.dropdown-divider{border-color:var(--line-soft)}

.modal-content{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text)}
.modal-header,.modal-footer{border-color:var(--line)}
.modal-header .close,.close{color:var(--muted);text-shadow:none;opacity:1}
.modal-header .close:hover,.close:hover{color:var(--text-strong)}
.modal-backdrop{background:var(--overlay)}
.modal-title{font-family:var(--font-display);color:var(--text-strong)}

.nav-tabs{border-bottom:1px solid var(--line)}
.nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;color:var(--muted);font-weight:500;padding:11px 16px}
.nav-tabs .nav-link:hover{border-bottom-color:var(--accent-line);color:var(--text)}
.nav-tabs .nav-link.active{background:transparent;border-bottom-color:var(--accent);color:var(--accent-text)}
.nav-pills .nav-link.active{background:var(--accent);color:var(--on-accent)}
.tab-content{color:var(--text)}

.pagination .page-link{background:var(--surface);border-color:var(--line);color:var(--text)}
.pagination .page-link:hover{background:var(--surface-2);border-color:var(--accent-line);color:var(--accent-text)}
.pagination .page-item.active .page-link{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pagination .page-item.disabled .page-link{background:var(--surface);border-color:var(--line);color:var(--muted-2)}

.list-group-item{background:var(--surface);border-color:var(--line);color:var(--text)}
.list-group-item.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.list-group-item-action:hover{background:var(--surface-2);color:var(--accent-text)}

.breadcrumb{background:transparent;padding:0;margin:0;font-family:var(--font-mono);font-size:.78rem}
.breadcrumb-item,.breadcrumb-item a{color:var(--muted)}
.breadcrumb-item a:hover{color:var(--accent-text)}
.breadcrumb-item.active{color:var(--text)}
.breadcrumb-item+.breadcrumb-item::before{color:var(--muted-2)}

.tooltip-inner{background:var(--surface-3);color:var(--text);border:1px solid var(--line);font-size:.8rem}
.tooltip .arrow::before{border-top-color:var(--surface-3)}
.popover{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.popover-header{background:var(--surface-2);border-bottom-color:var(--line);color:var(--text-strong)}
.popover-body{color:var(--text)}
.progress{background:var(--surface-2);border-radius:var(--r-pill);height:8px}
.progress-bar{background:var(--accent)}

/* ======================= 5. TWENTY-ONE SPECIFICS ========================== */
.primary-bg-color{background:var(--bg)!important}
#main-body{background:transparent;padding:var(--section-y) 0 calc(var(--section-y) * .8)}
#main-body .primary-content{min-width:0}
.master-breadcrumb{background:var(--bg-2);border-bottom:1px solid var(--line);padding:11px 0;margin:0}
.master-breadcrumb .breadcrumb{margin:0}

.client-alerts{list-style:none;margin:0;padding:0;min-width:260px}
.client-alerts li{border-bottom:1px solid var(--line-soft)}
.client-alerts li:last-child{border-bottom:0}
.client-alerts a{display:flex;gap:10px;align-items:flex-start;padding:11px 4px;color:var(--text);font-size:.9rem}
.client-alerts a:hover{color:var(--accent-text)}
.client-alerts .none{padding:11px 4px;color:var(--muted);font-size:.9rem}

.active-client{width:auto}
.active-client .input-group-text{
  background:transparent;border:0;color:var(--muted);font-size:.8rem;padding:0 8px 0 0;
}
.active-client .btn,.btn-active-client{
  background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--text)!important;
  font-size:.82rem;padding:5px 11px;border-radius:var(--r-sm);
}
.active-client .btn:hover,.btn-active-client:hover{border-color:var(--accent)!important;color:var(--accent-text)!important}
.btn-return-to-admin{background:var(--warn-soft)!important;border-color:var(--warn)!important;color:var(--warn)!important}

#fullpage-overlay{background:var(--overlay);backdrop-filter:blur(3px)}
#fullpage-overlay .msg{color:var(--text)}
.item-selector .item{
  display:block;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);margin-bottom:8px;font-size:.9rem;
}
.item-selector .item:hover{border-color:var(--accent);color:var(--accent-text)}
.item-selector .item.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.modal-localisation .modal-content{background:var(--surface)}
.modal-localisation .close{color:var(--muted)!important}

/* domain search + home panels on the client area homepage */
.domain-search,.home-banner,.jumbotron{
  background:var(--bg-2)!important;border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text);
}
.home-panels .panel,.client-home-panels .card{border-radius:var(--r-lg)}
.tile,.stat-tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text);
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.tile:hover,.stat-tile:hover{transform:translateY(-2px);border-color:var(--accent-line)}
.tile .icon,.stat-tile .icon{color:var(--accent-text)}
.tile-number,.stat-number{font-family:var(--font-display);color:var(--accent-text)}

/* ====== 6. SIDEBARS — the same panel component as the website ============= */
.sidebar{display:grid;gap:18px;align-content:start}
.sidebar .panel,.sidebar .card,.sidebar>div>.panel{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;overflow:hidden;box-shadow:var(--shadow-sm)!important;margin-bottom:0;
}
.sidebar .panel-heading,.sidebar .card-header{
  background:var(--surface-2)!important;border-bottom:1px solid var(--line)!important;
  padding:13px 16px!important;
}
.sidebar .panel-title,.sidebar .card-header,.sidebar .panel-heading h3,.sidebar .panel-heading h4{
  font-family:var(--font-mono)!important;font-size:.73rem!important;font-weight:600!important;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)!important;margin:0;line-height:1.4;
}
.sidebar .panel-heading i,.sidebar .card-header i{color:var(--accent-text);margin-right:8px}
.sidebar .list-group{border:0;border-radius:0}
.sidebar .list-group-item{
  background:transparent!important;border:0!important;border-left:2px solid transparent!important;
  color:var(--muted)!important;font-size:.9rem;font-weight:500;padding:10px 14px;
  display:flex;align-items:center;gap:10px;transition:all var(--t-fast) var(--ease);
}
.sidebar .list-group-item i{flex:none;width:16px;text-align:center;color:var(--accent-text);font-size:.85rem;opacity:.9}
.sidebar .list-group-item:hover{
  background:var(--surface-2)!important;color:var(--accent-text)!important;
  border-left-color:var(--accent)!important;transform:translateX(2px);
}
.sidebar .list-group-item.active{
  background:var(--accent-soft)!important;color:var(--accent-text)!important;
  border-left-color:var(--accent)!important;
}
.sidebar .panel-body,.sidebar .card-body{padding:14px 16px;color:var(--text);font-size:.92rem}
.sidebar .badge{margin-left:auto}

/* ============================== 7. FORMS ================================== */
.form-control,.custom-select,select,textarea,input[type="text"],input[type="email"],
input[type="password"],input[type="number"],input[type="tel"],input[type="url"],
input[type="search"],input[type="date"]{
  background:var(--bg-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;
  border-radius:var(--r-sm)!important;font-family:var(--font-body);font-size:.94rem;
  padding:10px 13px;height:auto;box-shadow:none!important;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.form-control:focus,.custom-select:focus,select:focus,textarea:focus,input:focus{
  border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important;outline:none;
}
.form-control::placeholder,textarea::placeholder{color:var(--muted-2)!important;opacity:1}
.form-control:disabled,.form-control[readonly]{background:var(--surface-2)!important;color:var(--muted)!important}
label,.form-label,.control-label{color:var(--text);font-weight:500;font-size:.9rem;margin-bottom:6px}
.form-text,.help-block{color:var(--muted);font-size:.84rem}
.form-group{margin-bottom:1.1rem}

/* select options must follow the theme — colour-scheme handles the native list */
select option{background:var(--surface);color:var(--text)}

/* Chrome autofill: without this the browser forces its own near-white
   background and near-black text over the dark theme. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--text)!important;
  -webkit-box-shadow:0 0 0 1000px var(--bg-2) inset!important;
  box-shadow:0 0 0 1000px var(--bg-2) inset!important;
  caret-color:var(--text);
  transition:background-color 9999s ease-out 0s;
}

.input-group-text{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--muted)!important}
.input-group .form-control{border-radius:var(--r-sm)}
.input-group-prepend .btn,.input-group-append .btn{border-color:var(--line)!important}
.prepended-form-control,.appended-form-control{background:var(--bg-2)!important;color:var(--text)!important}
.search .form-control{background:var(--bg-2)!important}

.custom-control-label::before{background:var(--bg-2);border:1px solid var(--line)}
.custom-control-input:checked~.custom-control-label::before{background:var(--accent);border-color:var(--accent)}
.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 3px var(--accent-soft)}
.custom-control-label{color:var(--text)}
.custom-file-label{background:var(--bg-2);border-color:var(--line);color:var(--text)}
.custom-file-label::after{background:var(--surface-2);border-left:1px solid var(--line);color:var(--text)}
.custom-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238B97AC' stroke-width='2' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;padding-right:36px;
}

.is-invalid,.form-control.is-invalid{border-color:var(--danger)!important}
.invalid-feedback,.field-error,.text-danger{color:var(--danger)!important}
.is-valid,.form-control.is-valid{border-color:var(--signal)!important}
.valid-feedback{color:var(--signal)!important}
.required-field::after,.form-label.required::after{content:" *";color:var(--danger)}

/* international telephone input (WHMCS uses intl-tel-input) */
.iti__country-list,.intl-tel-input .country-list{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  color:var(--text)!important;box-shadow:var(--shadow-lg)!important;
}
.iti__country.iti__highlight,.intl-tel-input .country.highlight{background:var(--surface-2)!important}
.iti__country-name,.intl-tel-input .country-name{color:var(--text)!important}
.iti__dial-code,.intl-tel-input .dial-code{color:var(--muted)!important}
.iti__divider{border-bottom-color:var(--line)!important}
.iti__selected-flag:hover,.iti__selected-flag:focus{background:var(--surface-2)!important}

/* markdown editor used on tickets */
.editor-toolbar{background:var(--surface-2);border-color:var(--line)}
.editor-toolbar button{color:var(--text)!important}
.editor-toolbar button:hover{background:var(--surface-3)!important}
.CodeMirror{background:var(--bg-2)!important;color:var(--text)!important;border-color:var(--line)!important}
.CodeMirror-cursor{border-left-color:var(--text)!important}
.editor-preview,.editor-preview-side{background:var(--surface)!important;color:var(--text)!important}

/* ==================== 8. STRIPE AND PAYMENT PAGES ========================= */
/*
   The wrapper below is ours to style. The text INSIDE the card field is not —
   it lives in a Stripe iframe, and no CSS here can reach it. That part is
   handled in js/vm6-whmcs.js, which passes a style object to Stripe when the
   element is created and updates it whenever the theme changes.
*/
.StripeElement,.vm6-stripe-field{
  display:block;width:100%;padding:12px 13px;
  background:var(--bg-2)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-sm)!important;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.StripeElement--focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important}
.StripeElement--invalid{border-color:var(--danger)!important}
.StripeElement--webkit-autofill{background:var(--bg-2)!important}
#card-errors,#cc-errors,.payment-errors{color:var(--danger);font-size:.86rem;margin-top:8px}

/* WHMCS payment method chooser and card entry */
.payment-methods,.payment-method-container,#paymentGatewayContainer,#frmPayment{color:var(--text)}
.payment-method,.pay-method-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text);
}
.payment-method:hover,.pay-method-card:hover{border-color:var(--accent-line)}
.payment-method.selected,.pay-method-card.selected{border-color:var(--accent);background:var(--accent-soft)}
.credit-card-input,.cc-fields{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.card-brand-icon,.payment-card-icon{color:var(--muted)}

/* invoice pages */
.invoice-container,.invoice{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text)}
.invoice-header,.invoice-details{border-bottom:1px solid var(--line);color:var(--text)}
.invoice-status,.status-badge{border-radius:var(--r-pill);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.4em .9em}
.invoice-status-paid,.status-paid{background:var(--signal-soft);color:var(--signal);border:1px solid var(--signal)}
.invoice-status-unpaid,.status-unpaid{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
.invoice-status-cancelled,.status-cancelled{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}
.total-due,.invoice-total{font-family:var(--font-display);color:var(--text-strong)}

/* shopping cart */
#order-standard_cart,.cart-body,#products,.product{color:var(--text)}
#order-standard_cart .product,#order-standard_cart .cart-item,.product-box{
  background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;color:var(--text);
}
#order-standard_cart .product:hover,.product-box:hover{border-color:var(--accent)!important}
#order-standard_cart .product.selected,.product-box.selected{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent-soft)}
#order-standard_cart .price,.product-price,.summary-container .price{
  font-family:var(--font-display);color:var(--text-strong);
}
.summary-container,#cartSummary,.order-summary{
  background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;color:var(--text);
}
#order-standard_cart .prepend-icon .field,#order-standard_cart .field{
  background:var(--bg-2)!important;border-color:var(--line)!important;color:var(--text)!important;
}
.promo-box,.cart-promo{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-lg);color:var(--text)}

/* ============================== 9. FOOTER ================================= */
#footer.footer{
  background:var(--bg-2)!important;border-top:1px solid var(--line);
  padding:52px 0 24px;color:var(--muted);margin-top:0;
}
.footer h5{
  position:relative;display:block;font-family:var(--font-mono);font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)!important;font-weight:600;
  margin:0 0 20px;padding-bottom:11px;
}
.footer h5::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,
    var(--accent) 0,var(--accent) 26px,
    var(--accent-line) 26px,var(--accent-line) 40px,
    var(--line-soft) 40px,var(--line-soft) 100%);
}
.footer p{color:var(--muted);font-size:.92rem}
.footer .footer-brand{margin-bottom:14px}
.footer .footer-brand .logo-img{max-height:42px;width:auto}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-links a{color:var(--muted);font-size:.92rem}
.footer-links a:hover{color:var(--accent-text)}
.footer-legal{font-family:var(--font-mono);font-size:.76rem;color:var(--muted-2);margin-top:16px}
.social-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.social-links a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  transition:all var(--t-fast) var(--ease);
}
.social-links a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:translateY(-2px)}
.footer-bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);
}
.footer .copyright{color:var(--muted);margin:0}
.payment-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-family:var(--font-mono);font-size:.78rem;color:var(--muted-2)}
.btn-locale{background:transparent!important;border:1px solid var(--line)!important;color:var(--muted)!important;font-size:.78rem;padding:5px 11px}
.btn-locale:hover{border-color:var(--accent)!important;color:var(--accent-text)!important}

.to-top{
  position:fixed;right:18px;bottom:18px;z-index:80;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--text);cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:all var(--t) var(--ease);box-shadow:var(--shadow);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--accent);color:var(--accent-text)}

/* ==================== 10. RESPONSIVE, MOTION, PRINT ======================= */
@media(max-width:991px){
  :root{--section-y:40px}
  .sidebar{margin-bottom:24px}
  .top-links-left{display:none}
  .top-header-content{justify-content:center}
}
@media(max-width:576px){
  body{font-size:15px}
  .card-header,.panel-heading{padding:12px 14px}
  .table td,.table th{padding:11px 12px}
  #footer.footer{padding:38px 0 20px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .top-header,.site-header,.nav-sheet,.to-top,#footer,.master-breadcrumb{display:none!important}
  body{background:#fff!important;color:#000!important;background-image:none!important}
  .card,.panel,.table{border-color:#ccc!important}
}

/* ============================================================================
   PIXEL PARITY WITH vm6.co.uk
   ----------------------------------------------------------------------------
   Twenty-One's own custom.css sets html{font-size:14px}, so anything sized in
   rem here would come out ~12% smaller than the same component on the website.
   The header, nav and footer are therefore pinned in px to the exact values
   the site uses at its 16px root.
   ============================================================================ */

/* the WHMCS-uploaded logo is not used — the inline SVG is hardcoded in the
   templates so both properties render the identical mark */
.site-header .navbar-brand svg,
.nav-sheet__top svg{height:39px;width:auto;display:block}
.footer .footer-brand svg{height:39px;width:auto;display:block;margin-bottom:14px}
.site-header .navbar-brand .logo-img,.footer .logo-img{display:none}

.site-header .container{min-height:66px;gap:14px}
.main-nav>li>a{font-size:14.9px;padding:9px 13px;letter-spacing:0}
.main-nav .nav-menu a{font-size:14.6px}
.main-nav .nav-menu a small{font-size:12.2px}
.nav-menu__head{font-size:10.9px}
.nav-menu__col a{font-size:14.2px}

/* the action buttons must never wrap — "Deploy a VPS" was breaking onto two
   lines and forcing the whole header taller than the site's */
.header-actions .btn,.header-actions .btn-nav{
  white-space:nowrap;font-size:14.9px;padding:11px 18px;line-height:1.2;height:auto;
}
.btn{white-space:nowrap}
.header-actions .icon-btn{width:40px;height:40px}
.icon-btn.cart-btn i{font-size:15px}

.top-header,.topbar{font-size:13.1px}
.top-link{font-size:13.1px}

#footer.footer{padding:58px 0 26px}
.footer h5{font-size:11.8px;letter-spacing:.15em;margin:0 0 20px;padding-bottom:11px}
.footer p{font-size:14.7px}
.footer-links{gap:9px}
.footer-links a{font-size:14.7px}
.footer-legal{font-size:12.2px}
.footer-bottom{font-size:13.6px;margin-top:40px;padding-top:20px}
.social-links a{width:40px;height:40px}
.social-links svg{width:17px;height:17px;fill:currentColor}

/* breadcrumb bar to match the site's */
.master-breadcrumb{padding:13px 0}
.master-breadcrumb .breadcrumb{font-size:13.1px}
/* ============================================================================
   VM6 CONSOLE — CORRECTIONS PASS
   ----------------------------------------------------------------------------
   Appended last, so at equal specificity these win. Every rule here fixes
   something observed on a real page, and each block says which.

   Specificity note: several earlier rules lost to my own more specific ones
   (e.g. .main-nav .nav-menu at 0,2,0 beat .nav-menu-wide at 0,1,0). Selectors
   below are written to at least match the rule they need to override.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. LOGO
   The mark is styled through classes rather than SVG fill attributes, because
   a CSS rule always beats a presentation attribute — so nothing in WHMCS's
   stylesheets can flatten it to black.
   --------------------------------------------------------------------------- */
.vm6-logo{height:39px;width:auto;display:block;overflow:visible}
.vm6-logo .vm6-logo__rail{fill:var(--accent);opacity:.55}
.vm6-logo .vm6-logo__unit{fill:var(--surface-2);stroke:var(--accent);stroke-width:1}
.vm6-logo .vm6-logo__dot{fill:var(--accent)}
.vm6-logo .vm6-logo__line{fill:var(--line)}
.vm6-logo .vm6-logo__led{fill:var(--signal)}
.vm6-logo .vm6-logo__wave{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.7}
.vm6-logo .vm6-logo__vm6{fill:var(--text-strong);font-family:var(--font-display);font-weight:700}
.vm6-logo .vm6-logo__net{fill:var(--accent);font-family:var(--font-display);font-weight:400}
.site-header .navbar-brand .vm6-logo{height:39px}
.nav-sheet__top .vm6-logo{height:32px}
.footer .footer-brand .vm6-logo{height:39px;margin-bottom:14px}
.site-header .navbar-brand img.logo-img,.footer .footer-brand img.logo-img{display:none}

/* ---------------------------------------------------------------------------
   2. CLIENT MENU DROPDOWN
   Was inheriting min-width:274px from .main-nav .nav-menu, so all three
   columns squashed and every label wrapped onto two or three lines.
   --------------------------------------------------------------------------- */
.main-nav .nav-menu.nav-menu-wide{
  min-width:0;width:min(760px,calc(100vw - 40px));
  left:auto;right:0;transform:translate(0,-6px);
  grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:16px;
}
.main-nav>li:hover>.nav-menu.nav-menu-wide,
.main-nav>li:focus-within>.nav-menu.nav-menu-wide{transform:translate(0,0)}
.main-nav .nav-menu.nav-menu-wide .nav-menu__col{min-width:0}
.main-nav .nav-menu.nav-menu-wide .nav-menu__col a{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:9px;padding:7px 10px;font-size:14.2px;
}
.main-nav .nav-menu.nav-menu-wide .nav-menu__col a>i{margin-top:0;width:16px;flex:none}
.main-nav .nav-menu.nav-menu-wide .nav-menu__col a .nm-t{
  display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.main-nav .nav-menu.nav-menu-wide .nav-menu__head{white-space:nowrap}
/* keep it on screen on shorter viewports */
.main-nav .nav-menu.nav-menu-wide{max-height:calc(100vh - var(--header-h) - var(--topbar-h) - 24px);overflow-y:auto}
@media(max-width:1300px){
  .main-nav .nav-menu.nav-menu-wide{width:min(680px,calc(100vw - 32px))}
}

/* ---------------------------------------------------------------------------
   3. PANELS AND CARDS
   WHMCS's .card is background-color:#fff. The dashboard stat tiles, the home
   "How can we help" tiles and the product boxes all use it, so they rendered
   as white blocks on the dark theme.
   --------------------------------------------------------------------------- */
#main-body .card,#main-body .panel,#main-body .well,#main-body .mc-promo-manage,
#main-body .mc-promo-login,.primary-content .card,.card-columns .card,
.card-deck .card,.card-group .card,.tile,.stat-tile{
  background:var(--surface)!important;border-color:var(--line)!important;color:var(--text)!important;
  border-radius:var(--r-lg)!important;
}
#main-body .card-header,#main-body .panel-heading,.card-columns .card .card-header{
  background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--text-strong)!important;
}
#main-body .card-body,#main-body .panel-body,.card-columns .card .card-body{
  background:transparent!important;color:var(--text)!important;
}
#main-body .card-footer,#main-body .panel-footer{background:var(--surface-2)!important;border-color:var(--line)!important}
#main-body .card h1,#main-body .card h2,#main-body .card h3,#main-body .card h4,
#main-body .card h5,#main-body .card .card-title{color:var(--text-strong)!important}
#main-body .card p,#main-body .card .card-text{color:var(--muted)!important}
#main-body .card a:not(.btn){color:var(--accent-text)!important}

/* the coloured strip on the home tiles — kept, but on-brand */
.card-accent-teal,.card-accent-green,.card-accent-gold,.card-accent-red,
.card-accent-sun-flower,.card-accent-pomegranate,.card-accent-midnight-blue,
.card-accent-asbestos{border-top-color:var(--accent)!important}
.card-accent-green{border-top-color:var(--signal)!important}
.card-accent-red,.card-accent-pomegranate{border-top-color:var(--danger)!important}
.card-accent-gold,.card-accent-sun-flower{border-top-color:var(--warn)!important}

/* the big outline icons on those tiles were near-white on white */
.ico-container i,.action-icon-btns a .ico-container i,#main-body .card .fal,
#main-body .card .far,#main-body .card .fad{color:var(--accent-text)!important}
.action-icon-btns a:hover .ico-container i{color:var(--accent)!important}

/* dashboard number tiles */
.stat-tile .stat-number,#main-body .card .h1,#main-body .card .display-4{color:var(--text-strong)!important}

/* ---------------------------------------------------------------------------
   4. BUTTONS
   WHMCS uses btn-success for ordinary primary actions (the sidebar "Update"
   button), which rendered as a loud signal green next to the brand indigo.
   Success is reserved here for genuine success states.
   --------------------------------------------------------------------------- */
#main-body .btn-success,.sidebar .btn-success,.primary-content .btn-success{
  background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important;
}
#main-body .btn-success:hover,.sidebar .btn-success:hover{
  background:var(--brand-600)!important;border-color:var(--brand-600)!important;
}
.btn-outline-primary{border-color:var(--accent-line)!important;color:var(--accent-text)!important;background:transparent!important}
.btn-outline-primary:hover{background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent)!important}
.btn-block{width:100%}

/* ---------------------------------------------------------------------------
   5. TOP BAR — logged-in state
   The "Logged in as" control inherited Bootstrap input-group styling and read
   as a white-ish input on the dark bar.
   --------------------------------------------------------------------------- */
.top-header .active-client,.topbar .active-client{background:transparent;border:0;width:auto}
.top-header .active-client .input-group-text{background:transparent!important;border:0!important;color:var(--muted)!important;font-size:13px;padding:0 8px 0 0}
.top-header .active-client .btn-group{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.top-header .active-client .btn,.top-header .btn-active-client{
  background:transparent!important;border:0!important;color:var(--text)!important;
  font-size:13px;padding:6px 11px;text-decoration:none!important;
}
.top-header .active-client .btn:hover{background:var(--surface-2)!important;color:var(--accent-text)!important}
.top-header .active-client .btn span{text-decoration:none!important;border:0!important}
#accountNotifications{color:var(--muted)!important;background:transparent!important;border:0!important;font-size:13.1px;padding:0}
#accountNotifications:hover{color:var(--accent-text)!important}
.popover .client-alerts a{color:var(--text)}

/* ---------------------------------------------------------------------------
   6. ORDER FORM AND CART
   The order form template ships its own stylesheet outside this theme, so its
   surfaces are re-pointed at the tokens here.
   --------------------------------------------------------------------------- */
#order-standard_cart,#order-premium_comparison,#order-boxes,.cart-body{color:var(--text)}
#order-standard_cart h1,#order-standard_cart h2,#order-standard_cart h3,
#order-standard_cart .cart-heading,.checkout-heading{color:var(--text-strong)!important}
#order-standard_cart .header-lined,#order-standard_cart .section-header,
#main-body .header-lined{
  color:var(--text-strong)!important;border-bottom:1px solid var(--line)!important;
}
#order-standard_cart .header-lined::before,#order-standard_cart .header-lined::after{border-color:var(--line)!important}

#order-standard_cart .table thead th,#order-standard_cart table thead th,
.table-primary,.table-primary>th,.table-primary>td,thead.thead-primary th{
  background:var(--surface-2)!important;color:var(--text-strong)!important;
  border-color:var(--line)!important;
}
#order-standard_cart .table td,#order-standard_cart table td{
  background:transparent!important;color:var(--text)!important;border-color:var(--line-soft)!important;
}
#order-standard_cart .table td a,#order-standard_cart .product-name,
#order-standard_cart .table td strong{color:var(--text-strong)!important}
#order-standard_cart .table td .text-muted,#order-standard_cart small{color:var(--muted)!important}

#order-standard_cart .summary-container,#order-standard_cart .order-summary,
.cart-summary,#cartSummary{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;color:var(--text)!important;
}
.cart-summary .total,.summary-container .total,.order-summary .total{color:var(--text-strong)!important}

#order-standard_cart .promo-box,.promo-container,.apply-promo,
#order-standard_cart .nav-tabs .nav-link.active{
  background:var(--surface)!important;color:var(--accent-text)!important;border-color:var(--line)!important;
}
#order-standard_cart .btn-danger,.btn-empty-cart{background:var(--danger-soft)!important;border-color:var(--danger)!important;color:var(--danger)!important}
#order-standard_cart .btn-danger:hover{background:var(--danger)!important;color:#fff!important}

/* payment step */
.payment-term,.store-order-container .payment-term h4{color:var(--text)!important}
#frmCheckout .alert-success,.total-due-today,.checkout-total{
  background:var(--signal-soft)!important;border-color:var(--signal)!important;color:var(--text)!important;
}
.payment-method-list label,.gateway-select label{color:var(--text)!important}
#order-standard_cart .field,#order-standard_cart .prepend-icon .field,
#order-standard_cart input[type=text],#order-standard_cart input[type=email],
#order-standard_cart input[type=password],#order-standard_cart select,#order-standard_cart textarea{
  background:var(--bg-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;
}
#order-standard_cart .field::placeholder{color:var(--muted-2)!important}

/* ---------------------------------------------------------------------------
   7. STORE PAGES (store/dynamic — the "Choose a Domain" step)
   --------------------------------------------------------------------------- */
.store-container,.domain-selection-options,.domain-search-container,
.store-order-container,.product-showcase{color:var(--text)}
.domain-selection-options .option,.domain-selection-options label,
.domain-search-options,.domain-search-options .dropdown-toggle{
  background:var(--surface)!important;border-color:var(--line)!important;color:var(--text)!important;
}
.domain-search-options .dropdown-toggle,.domain-search-filters .btn{
  color:var(--muted)!important;border:1px solid var(--line)!important;background:var(--surface-2)!important;
}
.domain-search-input,textarea.domain-search{
  background:var(--bg-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;
}
.featured-tld,.tld-pricing-header,.domain-pricing .tld{
  background:var(--surface)!important;border-color:var(--line)!important;color:var(--text)!important;
}
.product-showcase,.product-showcase--reverse .showcase-container{background:transparent!important;color:var(--text)!important}

/* ---------------------------------------------------------------------------
   8. MISCELLANEOUS SURFACES SEEN ON REAL PAGES
   --------------------------------------------------------------------------- */
.alert-warning .fa,.alert-warning i{color:var(--warn)!important}
#main-body .progress{background:var(--surface-2)!important}
#main-body .progress-bar{background:var(--accent)!important}
.label,.status-badge,.badge-active{border-radius:var(--r-pill)}
.badge.badge-active,.label-active{background:var(--signal-soft)!important;color:var(--signal)!important;border:1px solid var(--signal)}
.panel-collapse,.collapse-toggle i{color:var(--muted)}
.sidebar .panel-heading .fa-chevron-up,.sidebar .panel-heading .fa-chevron-down{color:var(--muted)!important}
#main-body hr{border-color:var(--line)!important}
.text-center.text-muted,.no-items{color:var(--muted)!important}
.dataTable,.dataTables_wrapper .table{background:transparent!important}
.dataTables_wrapper .dataTables_paginate .paginate_button{color:var(--text)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent)!important}
.select2-container--default .select2-selection,.select2-dropdown{
  background:var(--bg-2)!important;border-color:var(--line)!important;color:var(--text)!important;
}
.select2-container--default .select2-results__option--highlighted{background:var(--accent)!important;color:var(--on-accent)!important}
.tooltip-inner{max-width:280px}

/* verification banner and other full-width notices */
#main-body>.container>.alert,.email-verification-banner,#validateUserBanner{
  background:var(--warn-soft)!important;border:1px solid var(--warn)!important;color:var(--text)!important;
  border-radius:var(--r-lg)!important;
}

/* ---------------------------------------------------------------------------
   9. FOOTER — tighten to the website's proportions
   The WHMCS footer was reading taller than the site's because Bootstrap's row
   gutters and the WHMCS list spacing both applied on top of mine.
   --------------------------------------------------------------------------- */
#footer.footer .row{--gutter-y:0}
#footer.footer .footer-links{margin:0;padding:0}
#footer.footer .footer-links li{margin:0}
#footer.footer p{margin-bottom:1rem}
#footer.footer .col-lg-2,#footer.footer .col-lg-4{padding-top:0;padding-bottom:0}
#footer.footer ul.list-inline{margin:0}
#footer.footer .nav{display:none}

/* ---------------------------------------------------------------------------
   10. MOBILE SHEET — make sure nothing in WHMCS can trap it behind a layer
   --------------------------------------------------------------------------- */
.nav-sheet{z-index:2050}
.nav-sheet__panel{z-index:2051}
body.vm6-sheet-open{overflow:hidden}
@media(max-width:1080px){
  .site-header .container{grid-template-columns:1fr auto}
  .primary-nav{display:none}
  .nav-toggle{display:grid!important}
}

/* ============================================================================
   AUDIT PASS 2 — surfaces found by reading WHMCS's own stylesheets
   ----------------------------------------------------------------------------
   Each rule below was found by parsing theme.css / all.css / dynamic-store.css
   for light backgrounds and dark text, then checking which of those selectors
   actually appear in the shipped templates. File and line noted.
   ============================================================================ */

/* THE portal-home tiles. They are NOT .card — they are <a class="card-accent-*">
   inside .action-icon-btns, painted white by theme.css:11151. Every .card rule
   I wrote missed them entirely. */
.action-icon-btns a{
  background-color:var(--surface)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.action-icon-btns a:hover{
  color:var(--accent-text)!important;border-color:var(--accent)!important;transform:translateY(-2px);
}
.action-icon-btns a .ico-container i{color:var(--accent-text)!important}
.action-icon-btns a:hover .ico-container i{color:var(--accent)!important}
/* the coloured top rule on those tiles */
[class*="card-accent-"]{border-top-width:3px;border-top-style:solid}
.card-accent-teal,.card-accent-turquoise,.card-accent-blue,.card-accent-midnight-blue,
.card-accent-wet-asphalt,.card-accent-amethyst,.card-accent-purple,.card-accent-asbestos,
.card-accent-silver{border-top-color:var(--accent)!important}
.card-accent-green,.card-accent-emerald,.card-accent-lime{border-top-color:var(--signal)!important}
.card-accent-gold,.card-accent-sun-flower,.card-accent-orange{border-top-color:var(--warn)!important}
.card-accent-red,.card-accent-pomegranate,.card-accent-pink,.card-accent-magenta{border-top-color:var(--danger)!important}

/* domain search block on the portal home — theme.css:10484 paints it white */
.home-domain-search .input-group-wrapper{
  background-color:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;
}
.home-domain-search .input-group-wrapper .advanced-input label,
.home-domain-search label,.home-domain-search .dropdown-toggle{color:var(--muted)!important}
.home-domain-search input,.home-domain-search textarea{
  background:var(--bg-2)!important;color:var(--text)!important;border-color:var(--line)!important;
}
.home-domain-search .btn-primary{background:var(--accent)!important;border-color:var(--accent)!important}
.domain-checker-container,.domain-checker-result{background:var(--surface)!important;color:var(--text)!important}

/* announcements list — theme.css:11931 uses #f5f5f5 */
.announcements .announcement article,.announcement article,.announcement-item{
  background-color:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;color:var(--text)!important;
}
.announcement article h3,.announcement article a{color:var(--text-strong)!important}

/* misc light surfaces */
.label-default{background-color:var(--surface-2)!important;color:var(--muted)!important}
.table .thead-light th{background:var(--surface-2)!important;color:var(--text-strong)!important;border-color:var(--line)!important}
.table .thead-dark th{background:var(--surface-3)!important;color:var(--text-strong)!important}
.carousel-indicators li{background-color:var(--muted)!important}
#registration label,#registration .sub-heading span{color:var(--muted)!important;background:transparent!important}
#registration .sub-heading span{background:var(--bg)!important;padding:0 12px}
.buy-row,.hero-logo-container{background:var(--surface)!important;color:var(--text)!important}
.features-content .feature-icon{color:var(--accent-text)!important}
.bootstrap-switch .bootstrap-switch-label{background:var(--surface-2)!important;color:var(--text)!important}
.md-editor,.md-editor .md-header{background:var(--surface-2)!important;border-color:var(--line)!important}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.control:before{background-color:var(--accent)!important}

/* safety net: anything inside the content area still painting itself white */
#main-body [style*="background:#fff"],#main-body [style*="background: #fff"],
#main-body [style*="background-color:#fff"],#main-body [style*="background-color: #fff"]{
  background:var(--surface)!important;
}

/* ============================================================================
   LIGHT MODE — verify the inversion actually reads as light
   Twenty-One is a light theme by default, so most surfaces are already correct;
   these are the ones my dark-first rules would otherwise force dark.
   ============================================================================ */
[data-theme="light"] body,[data-theme="light"] body.primary-bg-color{background:var(--bg)!important;color:var(--text)!important}
[data-theme="light"] .site-header{background:color-mix(in srgb,var(--bg) 88%,transparent)}
[data-theme="light"] .action-icon-btns a{background-color:var(--surface)!important;color:var(--text)!important}
[data-theme="light"] .main-nav .nav-menu{box-shadow:var(--shadow-lg)}
[data-theme="light"] .nav-sheet__panel{background:var(--bg-2)}
[data-theme="light"] .StripeElement{background:var(--bg-2)!important}
[data-theme="light"] #footer.footer{background:var(--bg-2)!important}
[data-theme="light"] .table thead th{background:var(--surface-2)!important;color:var(--text-strong)!important}
[data-theme="light"] .top-header,[data-theme="light"] .topbar{background:var(--bg-2)!important}

/* ============================================================================
   FOOTER — match the website's height exactly
   The site footer runs 58px top / 26px bottom with a 40px divider gap. WHMCS
   was adding Bootstrap row gutters and .nav margins on top of that.
   ============================================================================ */
#footer.footer{padding:58px 0 26px!important;margin-top:0!important;border-top:1px solid var(--line)!important}
#footer.footer .row{margin-bottom:0!important;--gutter-y:0}
#footer.footer .row>[class^="col-"]{padding-top:0!important;padding-bottom:0!important;margin-top:0!important}
#footer.footer h5{margin:0 0 20px!important;padding-bottom:11px!important}
#footer.footer p{margin:0 0 1rem!important}
#footer.footer .footer-links{margin:0!important;padding:0!important}
#footer.footer .footer-links li{margin:0!important;padding:0!important}
#footer.footer .social-links{margin-top:18px!important;margin-bottom:0!important}
#footer.footer .footer-legal{margin:16px 0 0!important}
#footer.footer .footer-bottom{margin-top:42px!important;padding-top:22px!important;padding-bottom:0!important}
#footer.footer ul{list-style:none}
#main-body{padding:var(--section-y) 0 40px!important}

/* ============================================================================
   HEADER — cart button and the always-on primary action
   ============================================================================ */
.header-actions .btn-nav{display:inline-flex}
.icon-btn.cart-btn{position:relative;text-decoration:none}
.icon-btn.cart-btn .badge{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--accent)!important;color:var(--on-accent)!important;
  font-family:var(--font-mono);font-size:10.5px;line-height:1;border:2px solid var(--bg);
}
.icon-btn.cart-btn[data-count="0"] .badge{background:var(--surface-3)!important;color:var(--muted)!important}

/* ============================================================================
   FINAL PASS — INTERACTIVE STATES AND REMAINING FAULTS
   ----------------------------------------------------------------------------
   My earlier audit filtered out :hover, :focus, .active and :nth-child. That
   was the miss: base states were themed, interactive states stayed light. All
   43 found by re-running the audit without that filter are below, plus the
   specific faults reported on real pages.
   ============================================================================ */

/* ---- knowledgebase: unreadable highlighted row      was #f5f5f5 ---- */
.kb-article-item:hover,.kb-category a:hover{
  background-color:var(--surface-2)!important;color:var(--accent-text)!important;text-decoration:none;
}
.kb-article-item:hover small,.kb-category a:hover small{color:var(--muted)!important}
.kb-article-item:hover .btn,.kb-category a:hover .btn{
  background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important;
}
.kb-article-item small{color:var(--muted)!important}
.kb-category .badge,.kb-article-item .badge{background:var(--accent-soft)!important;color:var(--accent-text)!important}

/* ---- list groups, tabs, pagination, dropdowns ---- */
.list-group-item-action:hover,.list-group-item-action:focus{
  background-color:var(--surface-2)!important;color:var(--accent-text)!important;
}
.list-group-item-action:active{background-color:var(--surface-3)!important;color:var(--text)!important}
.list-group-item.active{background-color:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important}
.list-group-item.disabled,.list-group-item:disabled{background-color:var(--surface)!important;color:var(--muted-2)!important}
.sidebar .list-group-item.active,.sidebar .list-group-item.active:hover{
  background-color:var(--accent-soft)!important;border-color:transparent!important;
  border-left-color:var(--accent)!important;color:var(--accent-text)!important;
}
.sidebar .list-group-item .badge{background-color:var(--surface-3)!important;color:var(--muted)!important;width:auto;padding:.35em .6em}
.sidebar .list-group-item.active .badge{background-color:var(--accent)!important;color:var(--on-accent)!important}
.sidebar .list-group-item>i.far.fa-circle,.sidebar .list-group-item>i.far.fa-dot-circle{color:var(--muted)!important}
.sidebar .list-group-item.active>i.far.fa-dot-circle{color:var(--accent)!important}
.dropdown-item:hover,.dropdown-item:focus{background-color:var(--surface-2)!important;color:var(--accent-text)!important}
.dropdown-item.active,.dropdown-item:active{background-color:var(--accent)!important;color:var(--on-accent)!important}
.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link{
  background-color:transparent!important;color:var(--accent-text)!important;border-color:transparent transparent var(--accent)!important;
}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{background-color:var(--accent)!important;color:var(--on-accent)!important}
.page-link:hover{background-color:var(--surface-2)!important;border-color:var(--accent-line)!important;color:var(--accent-text)!important}
.page-item.active .page-link{background-color:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important}
.responsive-tabs-sm .nav-item a:hover{background-color:var(--surface-2)!important;color:var(--accent-text)!important}
.select-account a:hover,.popover-user-notifications ul li a:hover{background-color:var(--surface-2)!important;color:var(--accent-text)!important}
.modal-localisation .item-selector .item:hover{background-color:var(--surface-2)!important;color:var(--accent-text)!important}
.tiles .tile:hover{background-color:var(--surface-2)!important}
.store-order-container .store-domain-tabs li.active a{background-color:var(--surface)!important;color:var(--accent-text)!important}
.cta-secondary-button:hover{background-color:var(--surface-2)!important;color:var(--accent-text)!important}

/* ---- tables: row hover and striping ---- */
.table-list>tbody>tr:hover>td,.table-hover tbody tr:hover>td{background-color:var(--surface-2)!important;color:var(--text)!important}
.table-hover .table-light:hover,.table-hover .table-light:hover>td,
.list-group-item-light.list-group-item-action:hover{background-color:var(--surface-2)!important;color:var(--text)!important}
.table-list>tbody>tr>td{background-color:transparent!important;color:var(--text)!important}
.table-list thead th{background-color:var(--surface-2)!important;color:var(--text-strong)!important;border-bottom:1px solid var(--line)!important}
.dataTables_wrapper table.table-list{border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;overflow:hidden}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc{background-color:var(--surface-3)!important}
.dataTables_wrapper .dataTables_filter label .form-control{background:var(--bg-2)!important;color:var(--text)!important;border-color:var(--line)!important}
.domain-pricing .tld-row.highlighted{background:var(--accent-soft)!important}
.domain-pricing .tld-pricing-header div:nth-child(odd){background-color:var(--surface-2)!important}
.domain-renewals .domain-renewal:nth-child(even),
.service-renewals .service-renewal:nth-child(even){background-color:var(--surface-2)!important}

/* ---- form focus states that snapped back to white ---- */
.form-control:focus,select.form-control:focus,.custom-select:focus,
.md-editor>textarea:focus,.md-editor .md-input:focus{
  background-color:var(--bg-2)!important;color:var(--text)!important;
}
.input-group .btn-reveal-pw:hover,.input-group .btn-reveal-pw:active{
  background-color:var(--surface-2)!important;color:var(--accent-text)!important;
}
.btn-outline-light:hover,.btn-outline-light:not(:disabled):not(.disabled):active{
  background-color:var(--surface-2)!important;color:var(--accent-text)!important;border-color:var(--accent)!important;
}
.btn-default.disabled:hover,.btn-default[disabled]:hover{background-color:var(--surface-2)!important;color:var(--muted)!important}

/* ============================================================================
   EMAIL VERIFICATION BANNER            was #f9f9f9 bar, #50525f button, #666 icon
   The "Resend Verification Email" button was invisible against it.
   ============================================================================ */
.verification-banner,.verification-banner.email-verification,.verification-banner.user-validation{
  background-color:var(--warn-soft)!important;
  border-top:1px solid var(--warn)!important;border-bottom:1px solid var(--warn)!important;
  color:var(--text)!important;padding:14px 0!important;
}
.verification-banner .text{color:var(--text)!important;font-weight:500}
.verification-banner .fas,.verification-banner .fal,.verification-banner .far,
.verification-banner i{color:var(--warn)!important;font-size:22px!important}
.verification-banner .btn.btn-action,
.verification-banner.email-verification .btn.btn-action,
.verification-banner.user-validation .btn.btn-action,
#btnResendVerificationEmail{
  background-color:var(--warn)!important;border-color:var(--warn)!important;
  color:#1b1204!important;font-weight:600!important;padding:8px 14px!important;
  border-radius:var(--r-sm)!important;opacity:1!important;
}
.verification-banner .btn.btn-action:hover,#btnResendVerificationEmail:hover{filter:brightness(1.08)}
.verification-banner .btn.close{color:var(--muted)!important;opacity:1!important;background:transparent!important;text-shadow:none!important}
.verification-banner .btn.close:hover{color:var(--text-strong)!important}

/* ============================================================================
   CART — applied from the theme too, with !important
   standard_cart's stylesheet loads from inside the body, after this file, so
   these need !important to win here. The child order form template in
   templates/orderforms/vm6console does the same job cleanly once enabled;
   these make the cart correct whether or not it is.
   ============================================================================ */
#order-standard_cart .view-cart-items-header{
  background-color:var(--surface-2)!important;color:var(--text-strong)!important;
  border:1px solid var(--line)!important;border-bottom:0!important;
  border-radius:var(--r-lg) var(--r-lg) 0 0!important;
  font-family:var(--font-mono)!important;font-size:.74rem!important;letter-spacing:.1em!important;text-transform:uppercase!important;
}
#order-standard_cart .view-cart-items{border:1px solid var(--line)!important;border-top:0!important;border-radius:0 0 var(--r-lg) var(--r-lg)!important;overflow:hidden}
#order-standard_cart .view-cart-items .item{background-color:var(--surface)!important;color:var(--text)!important;border-bottom:1px solid var(--line-soft)!important}
#order-standard_cart .view-cart-items .item:nth-child(even){background-color:var(--surface-2)!important}
#order-standard_cart .view-cart-items .item strong,
#order-standard_cart .view-cart-items .item b{color:var(--text-strong)!important}
#order-standard_cart .view-cart-items .item-domain,
#order-standard_cart .view-cart-items .item a{color:var(--accent-text)!important}
#order-standard_cart .order-summary{background-color:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;overflow:hidden}
#order-standard_cart .order-summary h2{background:var(--surface-2)!important;color:var(--text-strong)!important;border-bottom:1px solid var(--line)!important}
#order-standard_cart .summary-container{background-color:transparent!important;color:var(--text)!important}
#order-standard_cart .order-summary .summary-totals,
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals{border-color:var(--line)!important}
#order-standard_cart .order-summary .recurring-charges{color:var(--muted)!important}
#order-standard_cart .order-summary .btn-continue-shopping{color:var(--accent-text)!important}
#order-standard_cart .apply-credit-container{background-color:var(--surface-2)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important}
#order-standard_cart .view-cart-promotion-code{background-color:var(--surface)!important;border:1px dashed var(--accent-line)!important;border-radius:var(--r)!important;color:var(--text)!important}
#order-standard_cart .cc-input-container{background-color:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;color:var(--text)!important}
#order-standard_cart .cc-input-container .existing-cc-grid{color:var(--muted)!important}
#order-standard_cart .products .product{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important}
#order-standard_cart .products .product header{background:var(--surface-2)!important;border-bottom:1px solid var(--line)!important}
#order-standard_cart .products .product header span{color:var(--text-strong)!important}
#order-standard_cart .products .product header .qty{color:var(--muted)!important}
#order-standard_cart .field,#order-standard_cart .form-control{background-color:var(--bg-2)!important;border:1px solid var(--line)!important;color:var(--text)!important}
#order-standard_cart .field[disabled],#order-standard_cart .field[readonly]{background-color:var(--surface-2)!important;color:var(--muted)!important}
#order-standard_cart .field-icon i{color:var(--muted)!important}
#order-standard_cart .field-help-text,#order-standard_cart .transfer-not-eligible{color:var(--muted)!important}
#order-standard_cart label{color:var(--text)!important}
#order-standard_cart .empty-cart .btn{background-color:var(--danger-soft)!important;border:1px solid var(--danger)!important;color:var(--danger)!important}
#order-standard_cart .empty-cart .btn:hover{background-color:var(--danger)!important;color:#fff!important}
#order-standard_cart .btn-remove-from-cart{color:var(--muted)!important}
#order-standard_cart .btn-remove-from-cart:hover{color:var(--danger)!important}
#order-standard_cart .default-captcha{background-color:var(--surface-2)!important;border:1px solid var(--line)!important}
#order-standard_cart .account-select-container{border-right:1px solid var(--line)!important}
#order-standard_cart .account-select-container div.account{background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--text)!important}
#order-standard_cart .account-select-container div.account.active{background:var(--accent-soft)!important;border-color:var(--accent)!important}
#order-standard_cart .header-lined,#order-standard_cart h1,
#order-standard_cart h2,#order-standard_cart h3{color:var(--text-strong)!important;font-family:var(--font-display)!important}
#order-standard_cart .cart-sidebar .list-group-item.active{background:var(--accent-soft)!important;color:var(--accent-text)!important}

/* the green "Total Due Today" block — replaced with the brand surface */
#order-standard_cart .total-due-today,#order-standard_cart .alert-success,
.total-due-today,#main-body .checkout-total,.order-summary .total-due{
  background:var(--surface-2)!important;border:1px solid var(--accent-line)!important;
  color:var(--text)!important;border-radius:var(--r-lg)!important;
}
#order-standard_cart .total-due-today strong,.total-due-today strong,
#order-standard_cart .total-due-today .amount{color:var(--text-strong)!important}
#order-standard_cart .order-summary .total-due,
#order-standard_cart .order-summary .cart-total{
  background:var(--surface-2)!important;border:1px solid var(--accent-line)!important;
  color:var(--text-strong)!important;border-radius:var(--r)!important;
}

/* ============================================================================
   LOGO — exact parity with the website
   overflow:visible was letting the waveform draw outside the 0 0 280 48 viewBox,
   which made the mark read larger than the site's.
   ============================================================================ */
.vm6-logo{overflow:hidden!important;height:39px!important;width:224px!important;display:block}
.site-header .navbar-brand .vm6-logo{height:39px!important;width:224px!important}
.nav-sheet__top .vm6-logo{height:32px!important;width:184px!important}
.footer .footer-brand .vm6-logo{height:39px!important;width:224px!important;margin-bottom:14px}

/* ============================================================================
   FOOTER — every value in px, matching the website at its 16px root
   Twenty-One sets html{font-size:14px}, so rem values here render ~12% smaller
   than the same rule on the site. These are the site's computed pixels.
   ============================================================================ */
#footer.footer{padding:58px 0 26px!important}
#footer.footer h5{font-size:11.8px!important;letter-spacing:1.77px!important;margin:0 0 20px!important;padding-bottom:11px!important}
#footer.footer p{font-size:14.9px!important;line-height:1.65!important;margin:0 0 16px!important}
#footer.footer .footer-links{gap:9px!important}
#footer.footer .footer-links a{font-size:14.7px!important;line-height:1.65!important}
#footer.footer .footer-legal{font-size:12.2px!important;margin:16px 0 0!important;line-height:1.65!important}
#footer.footer .social-links{gap:10px!important;margin:18px 0 0!important}
#footer.footer .social-links a{width:40px!important;height:40px!important}
#footer.footer .footer-bottom{margin-top:42px!important;padding-top:22px!important;font-size:13.6px!important}
#footer.footer .footer-brand{margin-bottom:14px!important}

/* ============================================================================
   RESPONSIVE HEADER — authoritative, last in the file so nothing overrides it
   ============================================================================ */
@media(min-width:1081px){
  .primary-nav{display:flex!important}
  .nav-toggle{display:none!important}
  .header-actions .btn-nav{display:inline-flex!important}
}
@media(max-width:1080px){
  .primary-nav{display:none!important}
  .header-actions .btn-nav{display:none!important}
  .nav-toggle{display:grid!important}
  .site-header .container{grid-template-columns:1fr auto!important}
}

/* ---- remaining real surfaces from the unfiltered sweep ----
   (the rest of that list is disabled states, IE-only ::-ms-value, white text on
   coloured buttons, and validation icons — all correct as they are) */
.custom-select:disabled,.custom-file-input[disabled]~.custom-file-label,
.custom-file-input:disabled~.custom-file-label{background-color:var(--surface-2)!important;color:var(--muted)!important}
.invite-box{background-color:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--text)!important}
.modal .modal-header{background-color:var(--surface-2)!important;border-bottom:1px solid var(--line)!important}
.btn-light.disabled,.btn-light:disabled{background-color:var(--surface-2)!important;color:var(--muted)!important;border-color:var(--line)!important}
fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus{background-color:var(--surface-2)!important;color:var(--muted)!important}
.bg-primary{background-color:var(--accent)!important}
.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-handle-off{color:var(--on-accent)!important}
.bootstrap-switch .bootstrap-switch-label{background:var(--surface-2)!important;color:var(--text)!important}

/* ============================================================================
   FINISHING PASS
   ============================================================================ */

/* ---- client menu: two columns, narrower, no icon on the trigger ---- */
.main-nav .nav-menu.nav-menu-wide{
  width:min(520px,calc(100vw - 40px))!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:14px!important;
}
@media(max-width:1300px){.main-nav .nav-menu.nav-menu-wide{width:min(500px,calc(100vw - 32px))!important}}

/* ---- mobile sheet: icon and label together on the left, not pushed apart ---- */
.nav-acc>a{justify-content:flex-start!important;gap:11px}
.nav-acc>a>i{margin-right:0!important;width:18px;text-align:center;color:var(--accent-text);flex:none}
.nav-acc>a .nm-t{flex:1 1 auto;text-align:left}
.nav-acc>button{justify-content:space-between}
.nav-sheet__panel .btn{justify-content:center}

/* ---- product details: the big white product panel ---- */
div.product-details div.product-icon,.product-details .product-icon,
#products-container .product-icon,.product-icon{
  background:var(--surface-2)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;
}
.product-details .product-icon i,.product-icon i,.product-icon svg{color:var(--accent-text)!important}
.product-details .product-icon .product-name,.product-icon span,.product-icon .name{color:var(--text-strong)!important}
.product-status,.product-details .status,.product-icon+.status{
  background:var(--surface-3)!important;color:var(--muted)!important;
  border-top:1px solid var(--line)!important;font-family:var(--font-mono);letter-spacing:.08em;
}
.product-status.active,.status-active{background:var(--signal-soft)!important;color:var(--signal)!important}
.product-status.terminated,.status-terminated{background:var(--danger-soft)!important;color:var(--danger)!important}
.product-status.suspended,.status-suspended{background:var(--warn-soft)!important;color:var(--warn)!important}

/* ---- ticket reply: the markdown editor was a white box ---- */
.md-editor,.md-editor .md-header,.md-editor .md-footer{
  background:var(--surface-2)!important;border-color:var(--line)!important;
}
.md-editor>textarea,.md-editor textarea,textarea.md-input,
.md-editor>.md-preview,.editor-preview,.editor-preview-side{
  background:var(--bg-2)!important;color:var(--text)!important;border-color:var(--line)!important;
}
.md-editor>textarea:focus{background:var(--bg-2)!important;color:var(--text)!important}
.md-editor .btn-group .btn,.editor-toolbar a,.editor-toolbar button{
  background:transparent!important;color:var(--text)!important;border-color:transparent!important;
}
.md-editor .btn-group .btn:hover,.editor-toolbar a:hover,.editor-toolbar button:hover{
  background:var(--surface-3)!important;color:var(--accent-text)!important;
}
.md-editor .btn-group .btn.active,.editor-toolbar a.active{background:var(--accent-soft)!important;color:var(--accent-text)!important}
.CodeMirror,.CodeMirror-scroll{background:var(--bg-2)!important;color:var(--text)!important}
.CodeMirror-cursor{border-left-color:var(--text)!important}
.ticket-reply textarea,#inputMessage,textarea[name="message"]{
  background:var(--bg-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;
}

/* ---- ticket thread ---- */
.ticket-reply,.ticket-message,.support-ticket-reply{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;color:var(--text)!important;
}
.ticket-reply-header,.ticket-message .header{background:var(--surface-2)!important;border-bottom:1px solid var(--line)!important;color:var(--text)!important}
.ticket-status-closed,.label-closed{background:var(--surface-3)!important;color:var(--muted)!important}

/* ---- footer: close the remaining gap to the website ---- */
#main-body{padding:var(--section-y) 0 18px!important}
#footer.footer{padding:46px 0 22px!important}
#footer.footer .footer-bottom{margin-top:34px!important;padding-top:18px!important}

/* ============================================================================
   LOGO — exact parity with the website
   The site's _core.css caps it: .navbar-brand svg{height:36px;width:auto},
   .nav-sheet__top svg{height:30px}, .footer-brand svg{height:38px}.
   I had pinned 39px/224px, which is why it read larger here.
   ============================================================================ */
.vm6-logo{overflow:hidden!important;display:block;height:36px!important;width:auto!important}
.site-header .navbar-brand .vm6-logo{height:36px!important;width:auto!important}
.nav-sheet__top .vm6-logo{height:30px!important;width:auto!important}
.footer .footer-brand .vm6-logo{height:38px!important;width:auto!important;margin-bottom:14px}
@media(max-width:1180px){.site-header .navbar-brand .vm6-logo{height:32px!important}}

/* ============================================================================
   PROMO CODE BOX
   The tab sat proud of the panel and "Validate Code" was near-invisible —
   it is .btn.btn-block.btn-default, which the cart stylesheet paints with a
   light background and #666 text.
   ============================================================================ */
#order-standard_cart .nav-tabs{
  border-bottom:1px solid var(--line)!important;margin-bottom:0!important;
}
#order-standard_cart .nav-tabs .nav-item{margin-bottom:-1px}
#order-standard_cart .nav-tabs .nav-link{
  background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;
  color:var(--muted)!important;font-weight:500;padding:11px 16px!important;border-radius:0!important;
}
#order-standard_cart .nav-tabs .nav-link:hover{color:var(--text)!important;border-bottom-color:var(--accent-line)!important}
#order-standard_cart .nav-tabs .nav-link.active{
  background:transparent!important;color:var(--accent-text)!important;
  border-bottom-color:var(--accent)!important;
}
#order-standard_cart .tab-content{
  background:var(--surface)!important;border:1px solid var(--line)!important;border-top:0!important;
  border-radius:0 0 var(--r-lg) var(--r-lg)!important;padding:18px!important;
}
#order-standard_cart .tab-content .tab-pane{color:var(--text)!important}

/* the promo input and its icon */
#order-standard_cart .prepend-icon .field-icon{color:var(--muted)!important;background:transparent!important}
#order-standard_cart .prepend-icon .field-icon i{color:var(--accent-text)!important}
#order-standard_cart #inputPromotionCode{
  background:var(--bg-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;
  border-radius:var(--r-sm)!important;
}
#order-standard_cart #inputPromotionCode::placeholder{color:var(--muted-2)!important}

/* Validate Code — the main action of that form, so give it the brand outline */
#order-standard_cart .tab-content .btn-default,
#order-standard_cart button[name="validatepromo"],
#order-standard_cart .btn-block.btn-default{
  background:var(--accent-soft)!important;border:1px solid var(--accent)!important;
  color:var(--accent-text)!important;font-weight:600!important;opacity:1!important;
}
#order-standard_cart .tab-content .btn-default:hover,
#order-standard_cart button[name="validatepromo"]:hover{
  background:var(--accent)!important;color:var(--on-accent)!important;
}
#order-standard_cart .view-cart-promotion-code{
  background:var(--accent-soft)!important;border:1px dashed var(--accent)!important;
  color:var(--text)!important;
}

/* Sticky header.
   .site-header is nested inside #header, and a sticky element only sticks
   while its parent is in view — #header is ~104px tall, so it stopped almost
   immediately. Making #header the sticky element fixes it. The negative top
   offset equals the utility bar height, so that bar scrolls away and the nav
   row pins at 0, exactly like the website. */
#header.header{
  position:sticky;
  top:calc(-1 * var(--topbar-h));
  z-index:1000;
}
.site-header{position:static!important}

/* keep the utility bar at a known height so the offset above lands exactly */
#header .top-header .top-header-content{min-height:var(--topbar-h);height:var(--topbar-h)}

/* twenty-one sets html,body{height:100%} — harmless, but min-height is safer
   with sticky positioning */
html,body{height:auto!important;min-height:100%}