/* =====================================================================
   SurfNode WHMCS Theme — safe Twenty-One child skin
   v1.3.0
   IMPORTANT: This file is CSS only. There are no .tpl overrides, so WHMCS
   keeps its native script order, jQuery, cart logic and gateway hooks.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --sn-bg: #040404;
  --sn-surface: #0c0d10;
  --sn-surface-2: #14161a;
  --sn-surface-3: #1c1f24;
  --sn-border: #23262d;
  --sn-border-strong: #2e323a;
  --sn-text: #d6dae0;
  --sn-text-dim: #8b9099;
  --sn-text-faint: #5b6069;
  --sn-heading: #f0f2f5;
  --sn-primary: #5fe5ff;
  --sn-primary-2: #7eecff;
  --sn-primary-ink: #04161c;
  --sn-accent: #eaff00;
  --sn-success: #4ade80;
  --sn-warning: #fbbf24;
  --sn-danger: #f87171;
  --sn-radius: 10px;
  --sn-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --sn-glow: 0 0 0 1px rgba(95, 229, 255, 0.25), 0 0 24px rgba(95, 229, 255, 0.16);

  --bs-body-bg: var(--sn-bg);
  --bs-body-color: var(--sn-text);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-border-color: var(--sn-border);
  --bs-primary: var(--sn-primary);
  --bs-primary-rgb: 95, 229, 255;
  --bs-link-color: var(--sn-primary);
  --bs-link-hover-color: var(--sn-primary-2);
  --bs-secondary-bg: var(--sn-surface-2);
  --bs-tertiary-bg: var(--sn-surface);
}

html,
body {
  background: var(--sn-bg) !important;
  color: var(--sn-text);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(95, 229, 255, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(95, 229, 255, 0.05), transparent 60%),
    var(--sn-bg) !important;
}

a { color: var(--sn-primary); text-decoration: none; }
a:hover, a:focus { color: var(--sn-primary-2); text-decoration: none; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--sn-heading);
  font-weight: 700;
  letter-spacing: 0;
}

code, pre, kbd, samp, .font-monospace, .text-monospace {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
}

::selection { background: var(--sn-primary); color: var(--sn-primary-ink); }

/* Header / navigation */
.header,
.header-lined,
.navbar,
.navbar-main,
.navbar-light,
.navbar-expand,
section#header,
section#main-menu {
  background: rgba(8, 9, 12, 0.92) !important;
  border-bottom: 1px solid var(--sn-border) !important;
  box-shadow: none !important;
}

@supports (backdrop-filter: blur(10px)) {
  .header,
  .navbar,
  .navbar-main,
  section#header,
  section#main-menu {
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
  }
}

.navbar-brand,
.logo-text,
.brand-logo { color: #ffffff !important; font-weight: 800; letter-spacing: 0; }

.navbar a,
.navbar .nav-link,
.navbar-main .navbar-nav > li > a,
section#main-menu .navbar-nav > li > a,
.primary-nav .nav-link {
  color: var(--sn-text-dim) !important;
  font-weight: 600;
}

.navbar a:hover,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar-main .navbar-nav > li > a:hover,
section#main-menu .navbar-nav > li.active > a,
section#main-menu .navbar-nav > li > a:hover {
  color: var(--sn-primary) !important;
}

.dropdown-menu {
  background: var(--sn-surface) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: var(--sn-radius);
  box-shadow: var(--sn-shadow);
}

.dropdown-item { color: var(--sn-text) !important; }
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
  background: rgba(95, 229, 255, 0.12) !important;
  color: var(--sn-primary) !important;
}

/* Page structure */
.main-content,
#main-body,
#main-body .main-content,
section#main-body {
  background: transparent !important;
  color: var(--sn-text);
}

.header-lined,
.page-header,
.master-breadcrumb,
.tiles,
.client-home-panels {
  border-color: var(--sn-border) !important;
}

.header-lined h1,
.page-header h1 { color: var(--sn-heading) !important; }

.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a { color: var(--sn-text-dim) !important; }
.breadcrumb-item.active { color: var(--sn-text) !important; }

/* Cards / panels */
.card,
.panel,
.panel-default,
.tiles .tile,
.client-home-panels .panel,
.home-kb-search,
.sidebar .panel,
.sidebar .list-group,
.list-group,
.marketing-email-optin,
.domain-checker-container,
#order-standard_cart .view-cart-items,
#order-standard_cart .order-summary,
#order-standard_cart .products .product,
#order-standard_cart .domain-selection-options .option,
#order-standard_cart .sub-heading,
#order-standard_cart .field-container,
#registration,
.logincontainer {
  background: rgba(12, 13, 16, 0.96) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: var(--sn-radius) !important;
  box-shadow: none !important;
  color: var(--sn-text) !important;
}

.card:hover,
.tiles .tile:hover,
#order-standard_cart .products .product:hover {
  border-color: rgba(95, 229, 255, 0.42) !important;
}

.card-header,
.card-footer,
.panel-heading,
.panel-footer,
.list-group-item,
.table > :not(caption) > * > *,
.modal-header,
.modal-footer {
  background: var(--sn-surface-2) !important;
  border-color: var(--sn-border) !important;
  color: var(--sn-text) !important;
}

.card-title,
.panel-title,
.tile-title,
.stat,
.stat-title { color: var(--sn-heading) !important; }

.text-muted,
.small,
.help-block,
.form-text,
.tile .stat,
.panel-body .text-muted { color: var(--sn-text-dim) !important; }

/* Buttons */
.btn {
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  box-shadow: none !important;
}

.btn-primary,
.btn-success,
.btn-info,
#btnCompleteProductConfig,
#checkout,
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-add-to-cart {
  background: var(--sn-primary) !important;
  border-color: var(--sn-primary) !important;
  color: var(--sn-primary-ink) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
#btnCompleteProductConfig:hover,
#checkout:hover,
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-add-to-cart:hover {
  background: var(--sn-primary-2) !important;
  border-color: var(--sn-primary-2) !important;
  color: var(--sn-primary-ink) !important;
  box-shadow: var(--sn-glow) !important;
}

.btn-secondary,
.btn-default,
.btn-outline-primary,
.btn-outline-secondary {
  background: var(--sn-surface-2) !important;
  border-color: var(--sn-border-strong) !important;
  color: var(--sn-text) !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: var(--sn-surface-3) !important;
  border-color: var(--sn-primary) !important;
  color: var(--sn-primary) !important;
}

/* Forms */
.form-control,
.form-select,
.input-group-text,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"] {
  background-color: var(--sn-surface-2) !important;
  border-color: var(--sn-border-strong) !important;
  color: var(--sn-text) !important;
  border-radius: 8px !important;
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: var(--sn-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(95, 229, 255, 0.18) !important;
}

.form-control::placeholder,
textarea::placeholder { color: var(--sn-text-faint) !important; }

/* Tables */
.table,
table.dataTable {
  color: var(--sn-text) !important;
  border-color: var(--sn-border) !important;
}

.table thead th,
table.dataTable thead th {
  background: var(--sn-surface-2) !important;
  border-color: var(--sn-border) !important;
  color: var(--sn-heading) !important;
  font-weight: 700;
}

.table tbody tr,
table.dataTable tbody tr { background: var(--sn-surface) !important; }
.table tbody tr:hover,
table.dataTable tbody tr:hover { background: var(--sn-surface-2) !important; }
.table td,
.table th,
table.dataTable td { border-color: var(--sn-border) !important; }

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--sn-text-dim) !important; }

/* Alerts / badges */
.alert {
  background: var(--sn-surface-2) !important;
  border: 1px solid var(--sn-border-strong) !important;
  color: var(--sn-text) !important;
  border-radius: var(--sn-radius) !important;
}
.alert-success { border-color: rgba(74, 222, 128, 0.45) !important; }
.alert-warning { border-color: rgba(251, 191, 36, 0.48) !important; }
.alert-danger { border-color: rgba(248, 113, 113, 0.48) !important; }
.alert-info { border-color: rgba(95, 229, 255, 0.45) !important; }

.badge,
.label { border-radius: 999px !important; font-weight: 800 !important; }
.badge.bg-primary,
.label-primary { background: var(--sn-primary) !important; color: var(--sn-primary-ink) !important; }
.badge.bg-success,
.label-success { background: var(--sn-success) !important; color: #03140a !important; }
.badge.bg-warning,
.label-warning { background: var(--sn-accent) !important; color: #151600 !important; }
.badge.bg-danger,
.label-danger { background: var(--sn-danger) !important; color: #220404 !important; }

/* Order form */
#order-standard_cart,
#order-standard_cart .cart-body,
#order-standard_cart .cart-sidebar,
#order-standard_cart .summary-container {
  background: transparent !important;
  color: var(--sn-text) !important;
}

#order-standard_cart .products .product header,
#order-standard_cart .products .product .product-desc,
#order-standard_cart .product-info,
#order-standard_cart .summary-container .product-name,
#order-standard_cart .order-summary h2,
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .total-due-today {
  color: var(--sn-heading) !important;
}

#order-standard_cart .price,
#order-standard_cart .pricing,
#order-standard_cart .total-due-today .amt,
#order-standard_cart .summary-totals .amt {
  color: var(--sn-primary) !important;
  font-weight: 800 !important;
}

#order-standard_cart .nav-tabs,
.nav-tabs { border-color: var(--sn-border) !important; }
#order-standard_cart .nav-tabs .nav-link,
.nav-tabs .nav-link { color: var(--sn-text-dim) !important; border-color: transparent !important; }
#order-standard_cart .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
  background: var(--sn-surface) !important;
  border-color: var(--sn-border) var(--sn-border) var(--sn-surface) !important;
  color: var(--sn-primary) !important;
}

/* Modals */
.modal-content {
  background: var(--sn-surface) !important;
  border: 1px solid var(--sn-border) !important;
  color: var(--sn-text) !important;
  border-radius: var(--sn-radius) !important;
}
.modal-backdrop.show { opacity: 0.72 !important; }

/* Pagination */
.page-link {
  background: var(--sn-surface-2) !important;
  border-color: var(--sn-border) !important;
  color: var(--sn-text) !important;
}
.page-item.active .page-link,
.page-link:hover {
  background: var(--sn-primary) !important;
  border-color: var(--sn-primary) !important;
  color: var(--sn-primary-ink) !important;
}

/* Footer */
.footer,
footer.footer,
section#footer {
  background: #030303 !important;
  border-top: 1px solid var(--sn-border) !important;
  color: var(--sn-text-dim) !important;
}
.footer a,
section#footer a { color: var(--sn-primary) !important; }

/* Utilities */
.bg-light,
.bg-white { background-color: var(--sn-surface) !important; }
.text-dark { color: var(--sn-text) !important; }
.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--sn-border) !important; }

@media (max-width: 767px) {
  .card,
  .panel,
  #order-standard_cart .products .product,
  #order-standard_cart .order-summary { border-radius: 8px !important; }

  .navbar-collapse,
  section#main-menu .navbar-collapse {
    background: var(--sn-surface) !important;
    border: 1px solid var(--sn-border) !important;
    border-radius: var(--sn-radius) !important;
    padding: 0.75rem !important;
  }
}

/* =====================================================================
   v1.4.1 — additional dark-theme overrides for portal home
   ===================================================================== */

/* Breadcrumb bar / "Portal Home" header strip */
section#header-lined,
.header-lined,
.breadcrumb-bar,
.master-breadcrumb,
nav[aria-label="breadcrumb"],
.breadcrumb {
  background: var(--sn-surface) !important;
  background-color: var(--sn-surface) !important;
  border-color: var(--sn-border) !important;
  color: var(--sn-text) !important;
}

section#header-lined .container,
.header-lined .container { background: transparent !important; }

.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb a {
  background: transparent !important;
  color: var(--sn-text-dim) !important;
}
.breadcrumb-item.active,
.breadcrumb .active { color: var(--sn-text) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sn-text-faint) !important; }

/* "How can we help today" + "Your Account" tile cards */
.tiles,
.tiles-row,
.client-home-panels,
.home-shortcuts,
.home-action-tiles {
  background: transparent !important;
}

.tile,
.tiles .tile,
a.tile,
.home-shortcuts .tile,
.home-shortcuts a,
.client-home-panels .tile,
.client-home-panels .panel,
.btn-block.tile,
[class*="home-tile"],
[class*="dashboard-tile"] {
  background: var(--sn-surface) !important;
  background-color: var(--sn-surface) !important;
  border: 1px solid var(--sn-border) !important;
  color: var(--sn-text) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}

.tile .tile-name,
.tile .tile-title,
.tile h3,
.tile h4,
.tile .name,
.tile span,
.tile p {
  color: var(--sn-text) !important;
}

.tile i,
.tile .fa,
.tile .fas,
.tile .far,
.tile .fal,
.tile svg { color: var(--sn-text-dim) !important; }

.tile:hover,
a.tile:hover,
.tiles .tile:hover,
.client-home-panels .tile:hover {
  background: var(--sn-surface-2) !important;
  border-color: rgba(95, 229, 255, 0.45) !important;
  color: var(--sn-text) !important;
  transform: translateY(-1px);
}

.tile:hover i,
.tile:hover .fa,
.tile:hover .fas,
.tile:hover svg { color: var(--sn-primary) !important; }

/* Top accent strip on tiles -> use brand cyan instead of stock colours */
.tile::before,
.tiles .tile::before {
  background: var(--sn-primary) !important;
}

/* Section headings on home (Browse Products/Services, How can we help today, Your Account) */
.home-section-title,
.section-heading,
.tiles-row + h2,
h2.text-center {
  color: var(--sn-heading) !important;
}

/* Announcement body — kill light backgrounds + make text readable */
.announcement,
.announcement-summary,
.announcement-body,
.announcement .panel,
.announcement-list .announcement,
#announcements .announcement,
.kb-article,
.kbarticle-content {
  background: transparent !important;
  color: var(--sn-text) !important;
}

.announcement p,
.announcement div,
.announcement span,
.announcement li,
.announcement-summary p,
.announcement-body p,
.kb-article p,
.kb-article li {
  color: var(--sn-text) !important;
}

/* Generic safety: kill any leftover white panel backgrounds */
.panel-body,
.panel-default > .panel-body,
.well,
.jumbotron {
  background: var(--sn-surface) !important;
  color: var(--sn-text) !important;
  border-color: var(--sn-border) !important;
}

/* =====================================================================
   v1.5.0 — SurfNode brand header & footer (mirrors surfnode.co.uk)
   ===================================================================== */

/* Hide ONLY the WHMCS native top header + native footer (keep page body!) */
body > header#header,
header.header,
section#footer,
footer.footer {
  display: none !important;
}

/* Body padding for fixed header */
body.sn-body { padding-top: 72px; }

/* ========== HEADER ========== */
.sn-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  background: rgba(8, 9, 12, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sn-header.sn-scrolled {
  background: rgba(6, 7, 10, 0.92);
  border-bottom-color: var(--sn-border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}

.sn-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 72px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sn-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: var(--sn-heading);
}
.sn-brand:hover { color: var(--sn-heading); }
.sn-brand-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(95, 229, 255, 0.10);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(95,229,255,0.20), 0 0 24px rgba(95,229,255,0.18);
  transition: background-color .15s ease;
}
.sn-brand:hover .sn-brand-logo { background: rgba(95, 229, 255, 0.18); }
.sn-brand-logo img { width: 30px; height: 30px; object-fit: contain; display: block; }
.sn-brand-logo-sm { width: 36px; height: 36px; }
.sn-brand-logo-sm img { width: 26px; height: 26px; }
.sn-brand-text {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--sn-heading);
}
.sn-brand-accent { color: var(--sn-primary); }

.sn-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sn-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font: 600 14px/1 "Inter", sans-serif;
  color: var(--sn-text-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none !important;
  border-radius: 8px;
  transition: color .15s ease, background-color .15s ease;
}
.sn-nav-link:hover,
.sn-nav-link:focus { color: var(--sn-heading); background: rgba(255,255,255,0.04); }

.sn-nav-soon::before {
  content: attr(data-soon);
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  font: 800 8px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #eaff00;
  text-shadow: 0 0 4px rgba(234,255,0,0.9), 0 0 8px rgba(234,255,0,0.55);
  pointer-events: none;
  white-space: nowrap;
}

.sn-nav-more { position: relative; }
.sn-caret { font-size: 10px; opacity: .8; }
.sn-nav-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  display: none;
  z-index: 1040;
}
.sn-nav-more-menu.sn-open { display: block; }
.sn-nav-more-menu a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--sn-text);
  text-decoration: none !important;
  border-radius: 8px;
}
.sn-nav-more-menu a:hover { background: rgba(95,229,255,0.10); color: var(--sn-primary); }

.sn-header-cta { display: flex; align-items: center; gap: 8px; }

.sn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font: 700 14px/1 "Inter", sans-serif;
  border-radius: 8px;
  text-decoration: none !important;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sn-btn-ghost {
  color: var(--sn-text-dim);
  background: transparent;
}
.sn-btn-ghost:hover { color: var(--sn-heading); background: rgba(255,255,255,0.05); }
.sn-btn-primary {
  background: var(--sn-primary);
  color: var(--sn-primary-ink) !important;
  box-shadow: 0 0 0 1px rgba(95,229,255,0.25), 0 0 28px rgba(95,229,255,0.30);
}
.sn-btn-primary:hover {
  background: var(--sn-primary-2);
  box-shadow: 0 0 0 1px rgba(95,229,255,0.45), 0 0 36px rgba(95,229,255,0.45);
}

/* Burger */
.sn-burger {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--sn-border);
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.sn-burger span { width: 18px; height: 2px; background: var(--sn-text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.sn-burger.sn-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.sn-burger.sn-open span:nth-child(2){ opacity: 0; }
.sn-burger.sn-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.sn-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 20px;
  background: rgba(6,7,10,0.96);
  border-top: 1px solid var(--sn-border);
}
.sn-mobile-menu a {
  padding: 12px 8px;
  font: 600 16px/1.2 "Inter", sans-serif;
  color: var(--sn-text);
  text-decoration: none !important;
  border-bottom: 1px solid var(--sn-border);
}
.sn-mobile-menu a:last-child { border-bottom: 0; }
.sn-mobile-menu .sn-btn { margin-top: 10px; }

@media (max-width: 900px) {
  .sn-nav, .sn-header-cta { display: none; }
  .sn-burger { display: inline-flex; }
}

/* ========== FOOTER ========== */
.sn-footer {
  margin-top: 64px;
  background: #030305;
  border-top: 1px solid var(--sn-border);
  color: var(--sn-text-dim);
}
.sn-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px 32px;
}
.sn-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
}
.sn-footer-brand .sn-brand { margin-bottom: 14px; }
.sn-footer-tag {
  font-size: 12px;
  line-height: 1.6;
  color: var(--sn-text-dim);
  max-width: 240px;
  margin: 0;
}
.sn-footer-col h4 {
  font: 800 11px/1 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sn-heading);
  margin: 0 0 14px;
}
.sn-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sn-footer-col a {
  font-size: 12px;
  color: var(--sn-text-dim);
  text-decoration: none !important;
  transition: color .15s ease;
}
.sn-footer-col a:hover { color: var(--sn-primary); }

.sn-footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--sn-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sn-footer-copy { font-size: 12px; color: var(--sn-text-dim); }
.sn-footer-copy p { margin: 2px 0; }
.sn-mono { font-family: "JetBrains Mono", monospace; font-size: 11px; }
.sn-footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1 "JetBrains Mono", monospace;
  color: var(--sn-text-dim);
}
.sn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 12px rgba(74,222,128,0.7);
}

@media (max-width: 1024px) {
  .sn-footer-grid { grid-template-columns: repeat(3, 1fr); }
  .sn-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .sn-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .sn-footer-bottom { flex-direction: column; align-items: flex-start; }
  body.sn-body { padding-top: 64px; }
  .sn-header-inner { height: 64px; padding: 0 16px; }
}

/* ==========================================================================
   ORDER FORM / CART OVERRIDES (slider, plan tiles, feature lists)
   The native WHMCS standard_cart order form uses light backgrounds that
   render unreadable on our dark theme. Force dark surfaces + readable text.
   ========================================================================== */
#order-standard_cart,
#order-standard_cart .sliderpanel,
#order-standard_cart .panel,
#order-standard_cart .panel-body,
#order-standard_cart .panel-default,
#order-standard_cart .well,
#order-standard_cart .product,
#order-standard_cart .package,
#order-standard_cart .pricebox,
.sliderpanel,
.product-slider,
.product-slider-panel,
.product-feature-list,
.product-info,
.product-detail {
  background: var(--sn-surface) !important;
  background-color: var(--sn-surface) !important;
  color: var(--sn-text) !important;
  border-color: var(--sn-border) !important;
}

#order-standard_cart .panel-heading,
#order-standard_cart .panel-title,
.product-slider h1, .product-slider h2, .product-slider h3, .product-slider h4,
.product-info h1, .product-info h2, .product-info h3, .product-info h4 {
  color: var(--sn-heading) !important;
  background: transparent !important;
}

#order-standard_cart p,
#order-standard_cart li,
#order-standard_cart label,
#order-standard_cart span,
#order-standard_cart .text-muted,
.product-feature-list li,
.product-feature-list p,
.product-info p, .product-info li, .product-info span {
  color: var(--sn-text) !important;
}

#order-standard_cart .text-muted,
.product-info .text-muted { color: var(--sn-text-dim) !important; }

/* Slider track labels (Spark / Surge / Tsunami) */
.product-slider .ui-slider,
#order-standard_cart .ui-slider {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--sn-border) !important;
}
.product-slider .ui-slider-range,
#order-standard_cart .ui-slider-range {
  background: var(--sn-primary) !important;
}
.product-slider .ui-slider-handle,
#order-standard_cart .ui-slider-handle {
  background: var(--sn-heading) !important;
  border: 2px solid var(--sn-primary) !important;
}

/* Price box on the right */
.pricebox, .price-box, .product-pricing, #productPrice {
  background: var(--sn-surface-2, var(--sn-surface)) !important;
  color: var(--sn-heading) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: 12px;
}
.pricebox .text-muted, .price-box .text-muted { color: var(--sn-text-dim) !important; }

/* Page wrapper around the cart section */
#main-body, #order-standard_cart .row, .main-content, .container-fluid {
  background: transparent !important;
}

/* The light grey strip behind the slider on the cart page */
section, .section, .order-summary, .cart-summary {
  background-color: transparent !important;
}

/* ==========================================================================
   v1.5.3 — Secondary nav (native WHMCS primary menu: Home, Store, etc.)
   Rendered just under the brand header, mirrors brand styling.
   ========================================================================== */
.sn-subnav {
  position: relative;
  z-index: 1020;
  background: #0b0d11;
  border-bottom: 1px solid var(--sn-border);
  width: 100%;
  display: block;
  overflow: visible;
}
.sn-subnav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: block;
}
.sn-subnav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  width: 100%;
}
.sn-subnav-list > li,
.sn-subnav-list .nav-item { list-style: none !important; }
.sn-subnav-list .nav-item { position: relative; }
.sn-subnav-list .nav-item > .nav-link,
.sn-subnav-list .nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font: 500 13px/1 "Inter", system-ui, sans-serif;
  color: var(--sn-text-dim) !important;
  text-decoration: none !important;
  border-radius: 8px;
  transition: color .15s ease, background-color .15s ease;
}
.sn-subnav-list .nav-item > .nav-link:hover,
.sn-subnav-list .nav-item > a:hover,
.sn-subnav-list .nav-item.active > .nav-link,
.sn-subnav-list .nav-item.active > a {
  color: var(--sn-heading) !important;
  background: rgba(255,255,255,0.06);
}
.sn-subnav-list .nav-item .fa,
.sn-subnav-list .nav-item .fas,
.sn-subnav-list .nav-item .far,
.sn-subnav-list .nav-item .fad { font-size: 12px; opacity: 0.8; }

/* Dropdown menus (e.g. Account submenu) */
.sn-subnav-list .dropdown-menu {
  background: rgba(15, 17, 22, 0.98) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.sn-subnav-list .dropdown-menu .dropdown-item {
  color: var(--sn-text) !important;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
}
.sn-subnav-list .dropdown-menu .dropdown-item:hover,
.sn-subnav-list .dropdown-menu .dropdown-item:focus {
  background: rgba(255,255,255,0.06) !important;
  color: var(--sn-heading) !important;
}
.sn-subnav-list .dropdown-divider { border-top-color: var(--sn-border); }

@media (max-width: 600px) {
  .sn-subnav { position: relative; top: auto; }
  .sn-subnav-inner { padding: 0 12px; }
  .sn-subnav-list { gap: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .sn-subnav-list .nav-item > .nav-link { padding: 10px 10px; white-space: nowrap; }
}

/* v1.5.4 — Cart page: hide redundant native "Show Menu" toggle button
   (we already render the primary nav as our subnav) */
#order-standard_cart .cart-nav-toggle,
#order-standard_cart button[data-toggle="collapse"][data-target*="cart"],
.shopping-cart-nav-toggle,
.cart .show-menu,
a.btn[href="#cart-nav"] {
  display: none !important;
}

/* Ensure subnav sits cleanly above cart content */
.sn-subnav + #main-body,
.sn-subnav ~ #main-body { padding-top: 0; }

/* v1.5.5 — Announcements & generic .well / .alert / .panel-body whitewash fix */
.well, .alert, .alert-info, .alert-default,
.announcement, .announcement-body, .announcement-summary,
.kb-article, .kb-article-body,
.panel-body, .card-body,
blockquote {
  background: var(--sn-surface-2, #14171d) !important;
  background-color: var(--sn-surface-2, #14171d) !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: 10px;
}
.well *, .alert *, .announcement *, .announcement-body *,
.kb-article *, .kb-article-body * {
  color: var(--sn-text) !important;
}
.well a, .alert a, .announcement a, .kb-article a {
  color: var(--sn-primary) !important;
}
.well h1, .well h2, .well h3, .well h4, .well h5,
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5,
.announcement h1, .announcement h2, .announcement h3, .announcement h4,
.kb-article h1, .kb-article h2, .kb-article h3, .kb-article h4 {
  color: var(--sn-heading) !important;
}

/* v1.5.6 — Cart Review & Checkout: dark theme for product tables, rows, inputs */
#order-standard_cart table,
#order-standard_cart .table,
.view-cart-items,
.view-cart-items-list,
table.cart, table.checkout, table.summary {
  background: var(--sn-surface) !important;
  color: var(--sn-text) !important;
  border-color: var(--sn-border) !important;
}
#order-standard_cart table thead,
#order-standard_cart table thead th,
.view-cart-items thead,
.view-cart-items thead th,
table.cart thead th {
  background: var(--sn-primary) !important;
  color: #fff !important;
  border-color: var(--sn-border) !important;
}
#order-standard_cart table tbody tr,
#order-standard_cart table tbody td,
.view-cart-items tbody tr,
.view-cart-items tbody td,
table.cart tbody tr, table.cart tbody td {
  background: var(--sn-surface) !important;
  background-color: var(--sn-surface) !important;
  color: var(--sn-text) !important;
  border-color: var(--sn-border) !important;
}
#order-standard_cart table tbody tr:nth-child(even),
.view-cart-items tbody tr:nth-child(even) {
  background: var(--sn-surface-2, #14171d) !important;
  background-color: var(--sn-surface-2, #14171d) !important;
}
#order-standard_cart table tbody tr:hover,
.view-cart-items tbody tr:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* Promo code / generic inputs on cart pages */
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="number"],
#order-standard_cart select,
#order-standard_cart textarea,
.cart input[type="text"],
.cart input[type="email"],
.cart select,
.cart textarea,
input.form-control, select.form-control, textarea.form-control {
  background: #0f1217 !important;
  background-color: #0f1217 !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: 8px !important;
}
input.form-control::placeholder, textarea.form-control::placeholder {
  color: var(--sn-text-dim) !important;
  opacity: 1;
}
input.form-control:focus, select.form-control:focus, textarea.form-control:focus {
  border-color: var(--sn-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sn-primary) 25%, transparent) !important;
  outline: none !important;
}
.input-group-text, .input-group-prepend .input-group-text, .input-group-append .input-group-text {
  background: #14171d !important;
  color: var(--sn-text-dim) !important;
  border: 1px solid var(--sn-border) !important;
}

/* Generic cart product/option rows */
.cart-item, .product-row, .order-item, .item-row {
  background: var(--sn-surface) !important;
  color: var(--sn-text) !important;
  border-color: var(--sn-border) !important;
}
.cart-item .text-muted, .product-row .text-muted { color: var(--sn-text-dim) !important; }

/* Product/option text links inside cart table */
#order-standard_cart table a, .view-cart-items a {
  color: var(--sn-primary) !important;
}

/* "Continue Shopping" small link on order summary */
.order-summary a, .order-summary .text-muted,
.summary-container a { color: var(--sn-text-dim) !important; }
.order-summary a:hover, .summary-container a:hover { color: var(--sn-primary) !important; }

/* === v1.5.7 — Cart product items (.view-cart-items .item white bg) === */
#order-standard_cart .view-cart-items,
.view-cart-items {
  background: transparent !important;
}
#order-standard_cart .view-cart-items .item,
.view-cart-items .item,
.view-cart-items > .item,
.cart .view-cart-items .item {
  background: var(--sn-surface, #14171d) !important;
  background-color: var(--sn-surface, #14171d) !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: 10px !important;
  margin: 10px 0 !important;
  padding: 16px !important;
}
#order-standard_cart .view-cart-items .item:hover,
.view-cart-items .item:hover {
  background: var(--sn-surface-2, #1a1e26) !important;
  border-color: color-mix(in oklab, var(--sn-primary) 40%, var(--sn-border)) !important;
}
#order-standard_cart .view-cart-items .item h1,
#order-standard_cart .view-cart-items .item h2,
#order-standard_cart .view-cart-items .item h3,
#order-standard_cart .view-cart-items .item h4,
#order-standard_cart .view-cart-items .item h5,
.view-cart-items .item h1,
.view-cart-items .item h2,
.view-cart-items .item h3,
.view-cart-items .item h4,
.view-cart-items .item h5 {
  color: var(--sn-heading, #fff) !important;
}
#order-standard_cart .view-cart-items .item p,
#order-standard_cart .view-cart-items .item li,
#order-standard_cart .view-cart-items .item span,
#order-standard_cart .view-cart-items .item div,
.view-cart-items .item p,
.view-cart-items .item li,
.view-cart-items .item span,
.view-cart-items .item div {
  color: var(--sn-text) !important;
}
#order-standard_cart .view-cart-items .item .text-muted,
.view-cart-items .item .text-muted,
#order-standard_cart .view-cart-items .item small,
.view-cart-items .item small {
  color: var(--sn-text-dim) !important;
}
#order-standard_cart .view-cart-items .item a,
.view-cart-items .item a {
  color: var(--sn-primary) !important;
}
#order-standard_cart .view-cart-items .item .price,
.view-cart-items .item .price,
#order-standard_cart .view-cart-items .item strong,
.view-cart-items .item strong {
  color: var(--sn-heading, #fff) !important;
}

/* ===== v1.5.8 — Cart tabs content dark fix ===== */
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-tabs .tab-pane,
#order-standard_cart .nav-tabs,
.view-cart-tabs .tab-content {
  background-color: var(--sn-surface, #14171d) !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: 6px;
  padding: 15px;
}
#order-standard_cart .view-cart-tabs .nav-tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--sn-border) !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs > li > a {
  background: var(--sn-surface-2, #1a1e26) !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-border) !important;
  margin-right: 4px;
}
#order-standard_cart .view-cart-tabs .nav-tabs > li.active > a,
#order-standard_cart .view-cart-tabs .nav-tabs > li > a:hover {
  background: var(--sn-primary, #00d4ff) !important;
  color: #0b0d11 !important;
  border-color: var(--sn-primary, #00d4ff) !important;
}
#order-standard_cart .view-cart-tabs .tab-content h1,
#order-standard_cart .view-cart-tabs .tab-content h2,
#order-standard_cart .view-cart-tabs .tab-content h3,
#order-standard_cart .view-cart-tabs .tab-content h4,
#order-standard_cart .view-cart-tabs .tab-content label,
#order-standard_cart .view-cart-tabs .tab-content strong {
  color: var(--sn-heading, #ffffff) !important;
}
#order-standard_cart .view-cart-tabs .tab-content a {
  color: var(--sn-primary, #00d4ff) !important;
}

/* ===== v1.5.9 — .primary-bg-color dark fix ===== */
.primary-bg-color {
  background-color: var(--sn-surface, #14171d) !important;
  color: var(--sn-text) !important;
}
.primary-bg-color h1,
.primary-bg-color h2,
.primary-bg-color h3,
.primary-bg-color h4,
.primary-bg-color label,
.primary-bg-color strong {
  color: var(--sn-heading, #ffffff) !important;
}
.primary-bg-color a {
  color: var(--sn-primary, #00d4ff) !important;
}

/* ===== v1.5.10 — Credit card input container dark fix ===== */
#order-standard_cart .cc-input-container,
.cc-input-container {
  background-color: var(--sn-surface-2, #1a1e26) !important;
  border: 1px solid var(--sn-border) !important;
  color: var(--sn-text) !important;
  border-radius: 4px;
}
#order-standard_cart .cc-input-container label,
#order-standard_cart .cc-input-container strong {
  color: var(--sn-heading, #ffffff) !important;
}
#order-standard_cart .cc-input-container input,
#order-standard_cart .cc-input-container select {
  background-color: #0f1217 !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-border) !important;
}

/* ===== v1.5.11 — Action icon buttons dark fix ===== */
.action-icon-btns a {
  background-color: var(--sn-surface-2, #1a1e26) !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: .25rem;
}
.action-icon-btns a:hover,
.action-icon-btns a:focus {
  background-color: var(--sn-primary, #00d4ff) !important;
  color: #0b0d11 !important;
  border-color: var(--sn-primary, #00d4ff) !important;
  text-decoration: none;
}
.action-icon-btns a i,
.action-icon-btns a .fa,
.action-icon-btns a span {
  color: inherit !important;
}

/* ===== v1.5.12 — Announcements article dark fix ===== */
.announcements .announcement article,
.announcement article {
  background-color: var(--sn-surface-2, #1a1e26) !important;
  border-left: 4px solid var(--sn-primary, #00d4ff) !important;
  color: var(--sn-text) !important;
  border-radius: 4px;
}
.announcements .announcement article h1,
.announcements .announcement article h2,
.announcements .announcement article h3,
.announcements .announcement article h4 {
  color: var(--sn-heading, #ffffff) !important;
}
.announcements .announcement article a {
  color: var(--sn-primary, #00d4ff) !important;
}

/* ===== v1.5.13 — Universal slider striped container dark fix ===== */
#order-universal_slider .striped-container,
.striped-container {
  background-color: var(--sn-surface-2, #1a1e26) !important;
  color: var(--sn-text) !important;
}
#order-universal_slider .striped-container h1,
#order-universal_slider .striped-container h2,
#order-universal_slider .striped-container h3,
#order-universal_slider .striped-container h4,
#order-universal_slider .striped-container label,
#order-universal_slider .striped-container strong {
  color: var(--sn-heading, #ffffff) !important;
}
#order-universal_slider .striped-container a {
  color: var(--sn-primary, #00d4ff) !important;
}

/* ===== v1.5.14 — Product header brand color ===== */
#order-standard_cart .products .product header {
  background: var(--sn-primary, #00d4ff) !important;
  color: #0b0d11 !important;
  border-radius: 3px 3px 0 0;
}
#order-standard_cart .products .product header h1,
#order-standard_cart .products .product header h2,
#order-standard_cart .products .product header h3,
#order-standard_cart .products .product header h4,
#order-standard_cart .products .product header span,
#order-standard_cart .products .product header strong {
  color: #0b0d11 !important;
}

/* ===== v1.5.15 — Order Now button dark theme ===== */
#order-standard_cart .products .product .product-footer .btn,
#order-standard_cart .products .product .order-button,
#order-standard_cart .products .product a.btn-primary,
#order-standard_cart .products .product button.btn-primary,
#order-standard_cart a.btn-order-now,
#order-standard_cart .btn-order-now {
  background: var(--sn-surface-2, #1a1e26) !important;
  background-image: none !important;
  color: var(--sn-primary, #00d4ff) !important;
  border: 1px solid var(--sn-primary, #00d4ff) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
#order-standard_cart .products .product .product-footer .btn:hover,
#order-standard_cart .products .product .order-button:hover,
#order-standard_cart .products .product a.btn-primary:hover,
#order-standard_cart .products .product button.btn-primary:hover,
#order-standard_cart a.btn-order-now:hover,
#order-standard_cart .btn-order-now:hover {
  background: var(--sn-primary, #00d4ff) !important;
  color: #0b0d11 !important;
  border-color: var(--sn-primary, #00d4ff) !important;
}

/* ===== v1.5.16 — Primary buttons + .primary-bg-color links ===== */
.primary-bg-color a {
  color: #ffffff !important;
}
.btn-primary,
.btn-success,
.btn-info,
#btnCompleteProductConfig,
#checkout,
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-add-to-cart {
  background: #000000 !important;
  background-image: none !important;
  border: 1px solid var(--sn-primary, #00d4ff) !important;
  border-color: var(--sn-primary, #00d4ff) !important;
  color: var(--sn-primary-ink, var(--sn-primary, #00d4ff)) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
#btnCompleteProductConfig:hover,
#checkout:hover,
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-add-to-cart:hover {
  background: var(--sn-primary, #00d4ff) !important;
  color: #0b0d11 !important;
  border-color: var(--sn-primary, #00d4ff) !important;
}

/* ===== v1.5.17 — Primary buttons white background override ===== */
.btn-primary,
.btn-success,
.btn-info,
#btnCompleteProductConfig,
#checkout,
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-add-to-cart {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--sn-primary, #00d4ff) !important;
  border-color: var(--sn-primary, #00d4ff) !important;
  color: var(--sn-primary-ink, var(--sn-primary, #00d4ff)) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
#btnCompleteProductConfig:hover,
#checkout:hover,
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-add-to-cart:hover {
  background: var(--sn-primary, #00d4ff) !important;
  color: #0b0d11 !important;
  border-color: var(--sn-primary, #00d4ff) !important;
}

/* ===== v1.5.18 — html/body background match theme ===== */
html, body {
  background: var(--sn-bg, #0b0d11) !important;
  color: var(--sn-text) !important;
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== v1.5.19 — Cart account-select active card themed ===== */
#order-standard_cart .account-select-container div.account.active,
#order-standard_cart .account-select-container div.account:hover {
  background: var(--sn-surface, #11151c) !important;
  border-color: var(--sn-primary, #00d4ff) !important;
  color: var(--sn-text, #e6edf3) !important;
  box-shadow: 0 0 0 1px var(--sn-primary, #00d4ff) inset !important;
}
#order-standard_cart .account-select-container div.account.active *,
#order-standard_cart .account-select-container div.account:hover * {
  color: var(--sn-text, #e6edf3) !important;
}

/* ===== v1.5.20 — Cart account-select base card themed ===== */
#order-standard_cart .account-select-container div.account {
  background: var(--sn-surface-2, #0f141b) !important;
  border: 1px solid var(--sn-border, rgba(255,255,255,0.08)) !important;
  border-right: 0 !important;
  padding: 10px !important;
  color: var(--sn-text, #e6edf3) !important;
}
#order-standard_cart .account-select-container div.account * {
  color: var(--sn-text, #e6edf3) !important;
}