/* ============================================================
   Lagless Theme — Brand overrides for WHMCS Twenty-One
   Loaded AFTER theme.min.css. Cascade order = source of truth.
   No edits to theme.min.css; everything brand lives here.
   ============================================================ */

/* --- 1. Brand tokens ---------------------------------------- */
:root {
  /* Cold Fusion mint */
  --lg-accent:        #14A085;
  --lg-accent-bright: #2DD4BF;
  --lg-accent-deep:   #0F8B72;
  --lg-accent-soft:   #5EEAD4;

  /* Dark atmosphere */
  --lg-bg:            #07080B;
  --lg-bg-elevated:   #0D1014;
  --lg-bg-nested:     #15181E;
  --lg-fg:            #FFFFFF;
  --lg-fg-muted:      #A1A8B3;
  --lg-fg-subtle:     #6B7280;
  --lg-hairline:      rgba(255,255,255,0.06);
  --lg-hairline-strong: rgba(255,255,255,0.12);

  /* Differentiation accents */
  --lg-ember:    #F97316;
  --lg-mc-glow:  #FFA94D;
  --lg-magic:    #8B5CF6;
  --lg-soft-red: #EF4444;

  /* Glows */
  --lg-glow-accent:        0 0 24px rgba(20,160,133,0.35);
  --lg-glow-accent-strong: 0 0 40px rgba(45,212,191,0.45);

  /* Type */
  --lg-font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lg-font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Bootstrap 4 variable overrides */
  --primary:   var(--lg-accent);
  --secondary: var(--lg-fg-muted);
  --success:   var(--lg-accent);
  --danger:    var(--lg-soft-red);
  --warning:   var(--lg-ember);
  --info:      var(--lg-accent-bright);
  --light:     var(--lg-bg-elevated);
  --dark:      var(--lg-bg);
  --font-family-sans-serif: var(--lg-font-sans);
  --font-family-monospace:  var(--lg-font-mono);
}

/* --- 2. Base body & typography ------------------------------ */
body,
body.primary-bg-color {
  background-color: var(--lg-bg);
  color: var(--lg-fg);
  font-family: var(--lg-font-sans);
  font-weight: 200; /* ExtraLight — editorial default */
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--lg-font-sans);
  color: var(--lg-fg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

p { color: var(--lg-fg-muted); font-weight: 300; }

pre, code, kbd, samp,
.font-monospace, .text-monospace {
  font-family: var(--lg-font-mono);
}

a {
  color: var(--lg-accent-bright);
  transition: color 0.15s ease;
}
a:hover, a:focus {
  color: var(--lg-accent);
  text-decoration: none;
}

::selection { background: var(--lg-accent); color: #07080B; }

/* --- 3. Buttons --------------------------------------------- */
.btn {
  font-family: var(--lg-font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--lg-accent);
  border-color: var(--lg-accent);
  color: #07080B;
  box-shadow: var(--lg-glow-accent);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--lg-accent-bright);
  border-color: var(--lg-accent-bright);
  color: #07080B;
  box-shadow: var(--lg-glow-accent-strong);
}
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--lg-accent-deep);
  border-color: var(--lg-accent-deep);
  opacity: 0.6;
}

.btn-secondary,
.btn-default {
  background-color: transparent;
  border-color: var(--lg-hairline-strong);
  color: var(--lg-fg);
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-default:hover,   .btn-default:focus {
  background-color: var(--lg-bg-elevated);
  border-color: var(--lg-fg-muted);
  color: var(--lg-fg);
}

.btn-success {
  background-color: var(--lg-accent);
  border-color: var(--lg-accent);
  color: #07080B;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--lg-accent-bright);
  border-color: var(--lg-accent-bright);
  color: #07080B;
}

.btn-danger {
  background-color: var(--lg-soft-red);
  border-color: var(--lg-soft-red);
  color: #FFFFFF;
}
.btn-warning {
  background-color: var(--lg-ember);
  border-color: var(--lg-ember);
  color: #07080B;
}
.btn-info {
  background-color: var(--lg-accent-bright);
  border-color: var(--lg-accent-bright);
  color: #07080B;
}
.btn-light {
  background-color: var(--lg-bg-elevated);
  border-color: var(--lg-hairline);
  color: var(--lg-fg);
}
.btn-dark {
  background-color: var(--lg-bg);
  border-color: var(--lg-hairline);
  color: var(--lg-fg);
}

/* --- 4. Surfaces -------------------------------------------- */
.card,
.panel,
.modal-content,
.dropdown-menu,
.alert {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  color: var(--lg-fg);
  border-radius: 8px;
}
/* List group items: row separators only, no boxy borders */
.list-group {
  background-color: transparent;
  border-radius: 0 !important;
}
/* Bootstrap's `.card > .list-group { border-top/bottom: inherit }` re-draws
   the parent card's hairline around any list-group sitting between header
   and footer. Kill those inherited strokes. */
.card > .list-group,
.card > .list-group:first-child,
.card > .list-group:last-child,
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border: 0 !important;
  border-radius: 0 !important;
}
.list-group-item {
  background-color: transparent;
  color: var(--lg-fg);
  border: 0;
  border-bottom: 1px solid var(--lg-hairline);
  border-radius: 0 !important;
}
.list-group-item:last-child { border-bottom: 0; }
.list-group-item:first-child,
.list-group-item:last-child { border-radius: 0 !important; }
/* When list-group is the only content in a card (no header/footer adjacent),
   suppress its leftover hairlines from item separators when only one item */
.list-group-item:only-child { border-bottom: 0; }

/* WHMCS theme.css forces #ddd (light gray) borders here — re-color to hairline */
.client-home-cards .list-group {
  border-top: 1px solid var(--lg-hairline) !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
  max-height: none !important;
  overflow: visible !important;
  margin-top: 0.5rem;
}

/* ============================================================
   Lagless: Product detail page (clientarea?action=productdetails)
   ============================================================ */

/* Outer .product-status was solid status color — make transparent */
.product-status,
.product-status-active,
.product-status-pending,
.product-status-suspended,
.product-status-terminated,
.product-status-cancelled,
.product-status-fraud {
  background-color: transparent !important;
  border-radius: 12px !important;
  padding: 0 !important;
}

/* Inner .product-icon was #efefef gray box — dark Lagless card */
.product-details .product-icon,
div.product-details div.product-icon {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-radius: 12px !important;
  padding: 2rem 1.5rem !important;
  font-size: 3.5rem !important;
  position: relative;
  overflow: hidden;
}
.product-details .product-icon::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.5), transparent);
}
/* Ambient bottom-right glow */
.product-details .product-icon::after {
  content: "";
  position: absolute;
  bottom: -30%; right: -20%;
  width: 60%; height: 70%;
  background: radial-gradient(circle, rgba(20,160,133,0.10), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.product-details .product-icon > * { position: relative; z-index: 1; }

/* The fa-stack icon (mint circle + server icon) */
.product-details .product-icon .fa-stack {
  font-size: 2.5rem;
  margin-bottom: 1.25rem;
}
.product-details .product-icon .fa-stack .fa-circle {
  color: var(--lg-accent) !important;
}
.product-details .product-icon .fa-stack .fa-inverse {
  color: #07080B !important;
}

/* Product name + group inside icon card */
.product-details .product-icon h3 {
  font-family: var(--lg-font-sans) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.02em !important;
  color: var(--lg-fg) !important;
  margin: 0.5rem 0 0.25rem !important;
  text-transform: none;
}
.product-details .product-icon h4 {
  font-family: var(--lg-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lg-fg-muted) !important;
  margin: 0 !important;
}

/* Status pill below product icon */
.product-status .product-status-text {
  display: inline-block;
  margin-top: 1rem !important;
  padding: 0.4rem 1rem !important;
  background-color: rgba(20,160,133,0.12) !important;
  border: 1px solid rgba(20,160,133,0.30) !important;
  color: var(--lg-accent-bright) !important;
  border-radius: 999px !important;
  font-family: var(--lg-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase !important;
}
.product-status-pending .product-status-text {
  background-color: rgba(249,115,22,0.12) !important;
  border-color: rgba(249,115,22,0.30) !important;
  color: var(--lg-mc-glow) !important;
}
.product-status-suspended .product-status-text,
.product-status-terminated .product-status-text,
.product-status-cancelled .product-status-text {
  background-color: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.30) !important;
  color: var(--lg-soft-red) !important;
}

/* Right column metadata list (Registration Date, Recurring Amount, etc.) */
.product-details .col-md-6.text-center h4 {
  font-family: var(--lg-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lg-fg-muted) !important;
  margin: 1.25rem 0 0.35rem !important;
}
.product-details .col-md-6.text-center h4:first-child {
  margin-top: 0 !important;
}
.product-details .col-md-6.text-center {
  font-family: var(--lg-font-sans);
  font-weight: 400;
  font-size: 1rem;
  color: var(--lg-fg);
  text-align: left !important;
}

/* Action buttons (Upgrade / Renew / Cancel) */
.product-actions-wrapper .btn-block {
  width: 100%;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  padding: 0.7rem 1.25rem !important;
}
.product-actions-wrapper .btn-success {
  background-color: var(--lg-accent) !important;
  border: 0 !important;
  color: #07080B !important;
  box-shadow: var(--lg-glow-accent);
}
.product-actions-wrapper .btn-success:hover {
  background-color: var(--lg-accent-bright) !important;
  box-shadow: var(--lg-glow-accent-strong);
}
.product-actions-wrapper .btn-primary {
  background-color: var(--lg-accent) !important;
  border: 0 !important;
  color: #07080B !important;
  box-shadow: var(--lg-glow-accent);
}
.product-actions-wrapper .btn-danger {
  background-color: transparent !important;
  border: 1px solid rgba(239,68,68,0.4) !important;
  color: var(--lg-soft-red) !important;
  box-shadow: none !important;
}
.product-actions-wrapper .btn-danger:hover {
  background-color: rgba(239,68,68,0.08) !important;
  border-color: var(--lg-soft-red) !important;
}

/* Tab container below the overview card */
.product-details-tab-container,
div.product-details-tab-container {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  padding: 1.5rem !important;
  color: var(--lg-fg);
}

/* Nav tabs above the tab container */
.responsive-tabs-sm,
.nav-tabs.responsive-tabs-sm {
  border-bottom: 1px solid var(--lg-hairline) !important;
  background-color: transparent !important;
  margin: 1.5rem 0 0;
}
.responsive-tabs-sm .nav-link {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--lg-fg-muted) !important;
  font-family: var(--lg-font-sans);
  font-weight: 600;
  padding: 0.85rem 1.25rem !important;
  border-radius: 0 !important;
}
.responsive-tabs-sm .nav-link:hover {
  color: var(--lg-fg) !important;
  border-bottom-color: var(--lg-hairline-strong) !important;
}
.responsive-tabs-sm .nav-link.active {
  color: var(--lg-accent-bright) !important;
  border-bottom-color: var(--lg-accent) !important;
  background-color: transparent !important;
}

/* Sidebar Actions Request Cancellation icon ban — make subtle */
.sidebar .list-group-item .fa-ban,
.sidebar .list-group-item-action .fa-ban {
  color: var(--lg-fg-subtle);
}
.client-home-cards .list-group .list-group-item {
  border-bottom: 1px solid var(--lg-hairline) !important;
}
.client-home-cards .list-group .list-group-item:last-child {
  border-bottom: 0 !important;
}

.card-header, .panel-heading {
  background-color: transparent;
  border-bottom: 1px solid var(--lg-hairline);
  color: var(--lg-fg);
  font-weight: 600;
}
.card-footer, .panel-footer {
  background-color: transparent;
  border-top: 0;
  color: var(--lg-fg-muted);
  padding: 0.5rem 1.5rem 1rem;
}

hr { border-color: var(--lg-hairline); }

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--lg-bg-nested);
  color: var(--lg-fg);
}

/* --- 5. Forms ----------------------------------------------- */
.form-control,
.custom-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
  background-color: var(--lg-bg-nested);
  border: 1px solid var(--lg-hairline);
  color: var(--lg-fg);
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.custom-select:focus,
input:focus, textarea:focus, select:focus {
  background-color: var(--lg-bg-nested);
  border-color: var(--lg-accent);
  box-shadow: 0 0 0 3px rgba(20,160,133,0.20);
  color: var(--lg-fg);
  outline: none;
}
.form-control::placeholder { color: var(--lg-fg-subtle); }
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--lg-bg-elevated);
  color: var(--lg-fg-muted);
}

label, .form-label, .col-form-label {
  color: var(--lg-fg-muted);
  font-weight: 400;
}

.input-group-text {
  background-color: var(--lg-bg-elevated);
  border-color: var(--lg-hairline);
  color: var(--lg-fg-muted);
}

.custom-control-label::before {
  background-color: var(--lg-bg-nested);
  border-color: var(--lg-hairline-strong);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--lg-accent);
  border-color: var(--lg-accent);
}

/* --- 6. Header / Nav ---------------------------------------- */
.header, .topbar, .navbar {
  background-color: var(--lg-bg);
  border-bottom: 1px solid var(--lg-hairline);
}
.navbar-nav .nav-link,
.nav-link { color: var(--lg-fg-muted); }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active,
.nav-link:hover,
.nav-link.active { color: var(--lg-accent); }

.navbar-brand { color: var(--lg-fg); }
.navbar-brand:hover { color: var(--lg-fg); }

/* --- 7. Tables ---------------------------------------------- */
.table {
  color: var(--lg-fg);
  background-color: transparent;
}
.table thead th {
  border-bottom: 1px solid var(--lg-hairline);
  color: var(--lg-fg-muted);
  font-family: var(--lg-font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.table td, .table th {
  border-top: 1px solid var(--lg-hairline);
}
.table-hover tbody tr:hover {
  background-color: rgba(255,255,255,0.025);
  color: var(--lg-fg);
}
.table-bordered, .table-bordered td, .table-bordered th {
  border-color: var(--lg-hairline);
}

/* --- 8. Background & text utilities ------------------------- */
.bg-primary { background-color: var(--lg-accent) !important; color: #07080B !important; }
.bg-success { background-color: var(--lg-accent) !important; color: #07080B !important; }
.bg-danger  { background-color: var(--lg-soft-red) !important; }
.bg-warning { background-color: var(--lg-ember) !important; color: #07080B !important; }
.bg-info    { background-color: var(--lg-accent-bright) !important; color: #07080B !important; }
.bg-light   { background-color: var(--lg-bg-elevated) !important; color: var(--lg-fg) !important; }
.bg-dark    { background-color: var(--lg-bg) !important; }
.bg-white   { background-color: var(--lg-bg-elevated) !important; color: var(--lg-fg) !important; }

.text-primary { color: var(--lg-accent) !important; }
.text-success { color: var(--lg-accent) !important; }
.text-danger  { color: var(--lg-soft-red) !important; }
.text-warning { color: var(--lg-ember) !important; }
.text-info    { color: var(--lg-accent-bright) !important; }
.text-muted   { color: var(--lg-fg-muted) !important; }
.text-dark    { color: var(--lg-fg) !important; }
.text-white   { color: var(--lg-fg) !important; }

.border-primary { border-color: var(--lg-accent) !important; }
.border-success { border-color: var(--lg-accent) !important; }
.border-danger  { border-color: var(--lg-soft-red) !important; }

/* WHMCS body class — must override its blue */
.primary-bg-color { background-color: var(--lg-bg) !important; }

/* --- 9. Alerts ---------------------------------------------- */
.alert-primary,
.alert-info {
  background-color: rgba(20,160,133,0.08);
  border-color: rgba(20,160,133,0.25);
  color: var(--lg-accent-bright);
}
.alert-success {
  background-color: rgba(20,160,133,0.08);
  border-color: rgba(20,160,133,0.25);
  color: var(--lg-accent-bright);
}
.alert-warning {
  background-color: rgba(249,115,22,0.10);
  border-color: rgba(249,115,22,0.30);
  color: var(--lg-mc-glow);
}
.alert-danger {
  background-color: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.30);
  color: var(--lg-soft-red);
}

/* --- 10. Dropdowns / modals --------------------------------- */
.dropdown-item { color: var(--lg-fg); }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--lg-bg-nested);
  color: var(--lg-accent);
}
.dropdown-divider { border-top-color: var(--lg-hairline); }

.modal-header, .modal-footer { border-color: var(--lg-hairline); }
.modal-backdrop.show { opacity: 0.7; background: var(--lg-bg); }
.close { color: var(--lg-fg); text-shadow: none; opacity: 0.6; }
.close:hover { color: var(--lg-fg); opacity: 1; }

/* --- 11. Breadcrumb / pagination / badges ------------------- */
.breadcrumb { background-color: transparent; padding-left: 0; }
.breadcrumb-item, .breadcrumb-item.active { color: var(--lg-fg-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--lg-fg-subtle); }
.breadcrumb-item a { color: var(--lg-accent-bright); }

.page-link {
  background-color: var(--lg-bg-elevated);
  border-color: var(--lg-hairline);
  color: var(--lg-fg);
}
.page-link:hover {
  background-color: var(--lg-bg-nested);
  border-color: var(--lg-hairline-strong);
  color: var(--lg-accent);
}
.page-item.active .page-link {
  background-color: var(--lg-accent);
  border-color: var(--lg-accent);
  color: #07080B;
}
.page-item.disabled .page-link {
  background-color: var(--lg-bg-elevated);
  border-color: var(--lg-hairline);
  color: var(--lg-fg-subtle);
}

.badge {
  font-family: var(--lg-font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.badge-primary { background-color: var(--lg-accent); color: #07080B; }
.badge-success { background-color: var(--lg-accent); color: #07080B; }
.badge-danger  { background-color: var(--lg-soft-red); }
.badge-warning { background-color: var(--lg-ember); color: #07080B; }
.badge-info    { background-color: var(--lg-accent-bright); color: #07080B; }
.badge-light   { background-color: var(--lg-bg-elevated); color: var(--lg-fg); border: 1px solid var(--lg-hairline); }

/* --- 12. Footer --------------------------------------------- */
.footer, footer {
  background-color: var(--lg-bg);
  border-top: 1px solid var(--lg-hairline);
  color: var(--lg-fg-subtle);
}
.footer a, footer a { color: var(--lg-fg-muted); }
.footer a:hover, footer a:hover { color: var(--lg-accent); }

/* --- 13. Lagless utility classes ---------------------------- */
.mint-accent {
  color: var(--lg-accent-bright);
  text-shadow: 0 0 12px rgba(45,212,191,0.40);
}

.mono-caps {
  font-family: var(--lg-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 500;
}

.mono-caps-accent {
  font-family: var(--lg-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--lg-accent-bright);
  text-shadow: 0 0 8px rgba(45,212,191,0.40);
}

.glow-accent { box-shadow: var(--lg-glow-accent); }
.glow-accent-strong { box-shadow: var(--lg-glow-accent-strong); }

.hairline        { border: 1px solid var(--lg-hairline); }
.hairline-top    { border-top: 1px solid var(--lg-hairline); }
.hairline-bottom { border-bottom: 1px solid var(--lg-hairline); }

@keyframes lg-pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.15); }
}
.pulse-soft { animation: lg-pulse-soft 2.4s ease-in-out infinite; }

/* Top edge glow — apply to .card-glow or any element */
.card-glow { position: relative; }
.card-glow::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(20,160,133,0.5) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* --- 14. Scrollbar (webkit) --------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--lg-bg); }
::-webkit-scrollbar-thumb {
  background: var(--lg-hairline-strong);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--lg-fg-subtle); }

/* ============================================================
   Lagless: structural brand patterns
   ============================================================ */

/* --- 15. Body backdrop: glows behind grid ------------------- */
body,
body.primary-bg-color {
  background-color: var(--lg-bg) !important;
  background-image:
    /* grid (top layer, masks the glows below) */
    linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px),
    /* color glows */
    radial-gradient(ellipse 70% 55% at 0% 0%,     rgba(20,160,133,0.28), transparent 60%),
    radial-gradient(ellipse 80% 65% at 100% 100%, rgba(139,92,246,0.26), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%,  rgba(45,212,191,0.10), transparent 70%);
  background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  background-position: -1px -1px, -1px -1px, 0 0, 0 0, 0 0;
}
/* Header / footer get their own opaque chrome so the body glow only shows behind main content */
header.header,
#footer.footer {
  background-color: var(--lg-bg);
}
section#main-body { background-color: transparent; }

/* --- 16. Lagless wordmark logo ------------------------------ */
.navbar-brand {
  font-family: var(--lg-font-sans);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--lg-accent-bright);
  text-shadow: 0 0 24px rgba(45,212,191,0.4);
  text-transform: uppercase;
}
.navbar-brand:hover, .navbar-brand:focus {
  color: var(--lg-accent-bright);
  text-decoration: none;
  text-shadow: 0 0 32px rgba(45,212,191,0.55);
}
.navbar-brand .logo-img { max-height: 36px; width: auto; }

/* --- 17. Header / topbar / main navbar ---------------------- */
header.header {
  background-color: var(--lg-bg);
  border-bottom: 1px solid var(--lg-hairline);
  backdrop-filter: blur(8px);
}

header.header .topbar {
  background-color: transparent;
  border-bottom: 1px solid var(--lg-hairline);
}
header.header .topbar .btn { color: var(--lg-fg-muted); }
header.header .topbar .btn:hover { color: var(--lg-accent); }
header.header .topbar .active-client .input-group-text {
  background: transparent;
  border: 0;
  color: var(--lg-fg-subtle);
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
header.header .topbar .active-client .btn {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  color: var(--lg-fg);
  border-radius: 6px;
}
header.header .topbar .active-client .btn.btn-active-client span {
  color: var(--lg-fg);
  font-weight: 600;
}

header.header .navbar { padding: 0.85rem 0; }

/* Main navbar links (Minecraft / Games / VPS / Hardware / Support) */
header.header .navbar-nav .nav-link,
header.header #nav .nav-link {
  color: var(--lg-fg-muted);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
header.header .navbar-nav .nav-link:hover,
header.header #nav .nav-link:hover,
header.header .navbar-nav .nav-link.active,
header.header #nav .nav-link.active {
  color: var(--lg-fg);
  background-color: rgba(255,255,255,0.04);
}
header.header .dropdown-toggle::after {
  vertical-align: middle;
  margin-left: 0.5em;
  border-top-color: var(--lg-fg-subtle);
}

/* Cart icon button in nav */
header.header .cart-btn {
  color: var(--lg-fg-muted);
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  background-color: transparent;
  border: 1px solid var(--lg-hairline);
}
header.header .cart-btn:hover {
  color: var(--lg-accent-bright);
  border-color: var(--lg-hairline-strong);
  background-color: rgba(45,212,191,0.04);
}
header.header .cart-btn .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: var(--lg-accent);
  color: #07080B;
  border: 2px solid var(--lg-bg);
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
}

/* Search icon button */
header.header .form-inline .input-group.search .btn {
  background-color: transparent;
  border: 1px solid var(--lg-hairline);
  color: var(--lg-fg-muted);
  border-radius: 8px 0 0 8px;
}
header.header .form-inline .input-group.search .form-control {
  background-color: var(--lg-bg-elevated);
  border-color: var(--lg-hairline);
  border-left: 0;
  color: var(--lg-fg);
  border-radius: 0 8px 8px 0;
}

/* --- 18. Two-tone Deploy CTA ------------------------------- */
/* Apply via .btn-cta or auto-applied to specific WHMCS buttons */
.btn-cta,
.btn-deploy,
a.btn.checkout-btn,
button.checkout-btn,
.btn-checkout,
button[name="checkout"],
button#btnCompleteOrder,
.cart .btn-primary[type="submit"] {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--lg-font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--lg-glow-accent);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
}
.btn-cta::before,
.btn-deploy::before,
a.btn.checkout-btn::before,
button.checkout-btn::before,
.btn-checkout::before,
button[name="checkout"]::before,
button#btnCompleteOrder::before,
.cart .btn-primary[type="submit"]::before {
  content: "";
  flex: 1;
  background-color: var(--lg-accent);
  padding: 0.85rem 1.6rem;
  color: #07080B;
}
/* But we still want text visible — handled by alt structure below */
.btn-cta {
  background-color: var(--lg-accent);
  color: #07080B;
  padding: 0.7rem 0 0.7rem 1.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.btn-cta::before { display: none; }
.btn-cta .btn-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lg-accent-deep);
  color: #07080B;
  padding: 0.7rem 1.1rem;
  margin-left: 1.1rem;
  border-radius: 0 999px 999px 0;
  border-left: 1px solid rgba(0,0,0,0.18);
  font-size: 1rem;
}
.btn-cta:hover, .btn-cta:focus {
  color: #07080B;
  text-decoration: none;
  box-shadow: var(--lg-glow-accent-strong);
  transform: translateY(-1px);
}
.btn-cta:hover .btn-cta-arrow { background-color: var(--lg-accent); }

/* --- 19. Master breadcrumb ---------------------------------- */
.master-breadcrumb {
  background-color: transparent;
  border-bottom: 1px solid var(--lg-hairline);
  padding: 1rem 0;
}
.master-breadcrumb .breadcrumb {
  margin: 0;
  background-color: transparent;
  font-family: var(--lg-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item.active {
  color: var(--lg-fg-subtle);
}
.master-breadcrumb .breadcrumb-item a { color: var(--lg-fg-muted); }
.master-breadcrumb .breadcrumb-item a:hover { color: var(--lg-accent); }

/* --- 20. Cards: top edge glow + ambient corner -------------- */
.card {
  position: relative;
  overflow: hidden;
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(20,160,133,0.4) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.card::after {
  content: "";
  position: absolute;
  bottom: -40%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(20,160,133,0.08), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover::after { opacity: 1; }

.card-header,
.panel-heading {
  background-color: transparent;
  border-bottom: 1px solid var(--lg-hairline);
  padding: 1.25rem 1.5rem;
}
.card-header .card-title,
.panel-heading .card-title {
  font-family: var(--lg-font-sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--lg-fg);
  letter-spacing: -0.01em;
  margin: 0;
}
.card-body { padding: 1.5rem; }

.card.selected,
.card.active,
.card.is-selected {
  border-color: var(--lg-accent);
  box-shadow: 0 0 0 1px var(--lg-accent), var(--lg-glow-accent);
}
.card.selected::after { opacity: 1; }

/* --- 21. Eyebrow / mono-caps badges ------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--lg-font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lg-fg-muted);
}
.eyebrow .eyebrow-dot {
  width: 6px; height: 6px;
  background-color: var(--lg-accent);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(20,160,133,0.8);
}
.eyebrow.eyebrow-mint { color: var(--lg-accent-bright); }
.eyebrow.eyebrow-ember { color: var(--lg-mc-glow); }
.eyebrow.eyebrow-ember .eyebrow-dot { background-color: var(--lg-ember); box-shadow: 0 0 6px rgba(249,115,22,0.7); }
.eyebrow.eyebrow-violet { color: var(--lg-magic); }
.eyebrow.eyebrow-violet .eyebrow-dot { background-color: var(--lg-magic); box-shadow: 0 0 6px rgba(139,92,246,0.7); }

/* Step number + section title — "01 Choose your power" */
.step-number {
  font-family: var(--lg-font-mono);
  font-weight: 500;
  color: var(--lg-fg-subtle);
  margin-right: 0.6em;
  letter-spacing: 0.06em;
}

/* Live dot indicator — pulsing mint */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background-color: var(--lg-accent-bright);
  box-shadow: 0 0 8px rgba(45,212,191,0.7);
  animation: lg-pulse-soft 2.4s ease-in-out infinite;
  margin-right: 0.5em;
  vertical-align: middle;
}

/* --- 22. Segmented control (mono-caps tabs) ----------------- */
.segment-control {
  display: inline-flex;
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
}
.segment-control .segment {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-family: var(--lg-font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--lg-fg-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  border: 0;
  background: transparent;
}
.segment-control .segment:hover { color: var(--lg-fg); }
.segment-control .segment.active {
  background-color: var(--lg-accent);
  color: #07080B;
  box-shadow: 0 0 16px rgba(20,160,133,0.4);
}
.segment-control .segment .segment-meta {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  margin-left: 0.4em;
  color: var(--lg-mc-glow);
  letter-spacing: 0.04em;
}
.segment-control .segment.active .segment-meta { color: rgba(7,8,11,0.7); }

/* --- 23. Dashboard tiles (clientareahome) ------------------- */
.tiles {
  background-color: transparent;
}
.tiles .tile {
  display: block;
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 0.5rem;
  position: relative;
  overflow: hidden;
  text-align: left;
  color: var(--lg-fg);
  text-decoration: none;
  transition: all 0.2s ease;
}
.tiles .tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.5), transparent);
}
.tiles .tile:hover,
.tiles .tile:focus {
  background-color: var(--lg-bg-nested) !important;
  border-color: var(--lg-accent) !important;
  transform: translateY(-2px);
  text-decoration: none !important;
  color: var(--lg-fg) !important;
  box-shadow: var(--lg-glow-accent);
}
.tiles .tile:hover::before {
  background: linear-gradient(to right, transparent, rgba(45,212,191,0.7), transparent);
}
.tiles .tile:hover i,
.tiles .tile:focus i {
  font-size: 1.25rem !important;
  color: var(--lg-accent-bright) !important;
}
.tiles .tile i {
  font-size: 1.5rem;
  color: var(--lg-accent);
  margin-bottom: 1rem;
  display: block;
}
.tiles .tile .stat {
  font-family: var(--lg-font-sans);
  font-weight: 200;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--lg-fg);
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
}
.tiles .tile .title {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lg-fg-muted);
}
.tiles .tile .highlight { display: none; } /* WHMCS color stripe — replaced by top edge glow */

/* --- 24. Action icon buttons (homepage) --------------------- */
.action-icon-btns a[class*="card-accent-"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 12px;
  padding: 1.75rem 1rem;
  color: var(--lg-fg);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  font-family: var(--lg-font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
}
.action-icon-btns a[class*="card-accent-"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.5), transparent);
}
.action-icon-btns a[class*="card-accent-"]:hover {
  border-color: var(--lg-accent);
  color: var(--lg-fg);
  transform: translateY(-2px);
  box-shadow: var(--lg-glow-accent);
}
.action-icon-btns .ico-container {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(20,160,133,0.08);
  border: 1px solid rgba(20,160,133,0.2);
  border-radius: 12px;
  margin-bottom: 0.75rem;
}
.action-icon-btns .ico-container i {
  color: var(--lg-accent-bright);
  font-size: 1.35rem;
}

/* --- 25. Sidebar -------------------------------------------- */
.sidebar .card-sidebar {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 12px;
  overflow: hidden;
}
.sidebar .card-sidebar .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--lg-hairline);
}
.sidebar .list-group { background-color: transparent; }
.sidebar .list-group-item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--lg-hairline);
  color: var(--lg-fg-muted);
  padding: 0.85rem 1.25rem;
  transition: all 0.15s ease;
  border-radius: 0;
}
.sidebar .list-group-item:last-child { border-bottom: 0; }
.sidebar .list-group-item:hover,
.sidebar .list-group-item:focus {
  background-color: rgba(20,160,133,0.06);
  color: var(--lg-fg);
}
.sidebar .list-group-item.active {
  background-color: rgba(20,160,133,0.10);
  border-left: 2px solid var(--lg-accent);
  color: var(--lg-accent-bright);
  padding-left: calc(1.25rem - 2px);
}
.sidebar .sidebar-menu-item-icon { color: var(--lg-fg-subtle); margin-right: 0.65rem; }
.sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--lg-accent); }

/* --- 26. Headings + section titles -------------------------- */
h2.text-center, h3.text-center,
.text-center > h1, .text-center > h2, .text-center > h3 {
  letter-spacing: -0.025em;
}

/* WHMCS uses h2 for section labels — give them weight + mint underline accent */
#main-body h2 {
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
  margin: 2.5rem 0 1.5rem;
  color: var(--lg-fg);
}

/* --- 27. Auth surfaces (login / register) ------------------- */
.login-form .card,
.signup-form .card,
.register-form .card,
form[class*="login"] .card,
form[class*="register"] .card {
  max-width: 480px;
  margin: 3rem auto;
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.login-form .card .card-body { padding: 2.5rem; }
.login-form .card-footer {
  background-color: transparent;
  border-top: 1px solid var(--lg-hairline);
  padding: 1.25rem 2.5rem;
  font-size: 0.875rem;
  color: var(--lg-fg-muted);
}
.login-form .card-footer a {
  color: var(--lg-accent-bright);
  font-weight: 600;
}
.login-form h3, .login-form h6.h3 {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--lg-fg);
}
.login-form .input-group-text {
  background-color: var(--lg-bg-nested);
  border: 1px solid var(--lg-hairline);
  border-right: 0;
  color: var(--lg-fg-subtle);
}
.login-form .form-control {
  border-left: 0;
}
.login-form .input-group-merge .form-control:focus,
.login-form .input-group-merge:focus-within .input-group-text {
  border-color: var(--lg-accent);
}
.login-form .form-control-label {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lg-fg-muted);
  margin-bottom: 0.5rem;
}
.login-form .btn-reveal-pw {
  background-color: var(--lg-bg-nested);
  border: 1px solid var(--lg-hairline);
  border-left: 0;
  color: var(--lg-fg-subtle);
}
.login-form .btn-reveal-pw:hover { color: var(--lg-accent); }

/* --- 28. Footer --------------------------------------------- */
#footer.footer, footer#footer {
  background-color: var(--lg-bg);
  border-top: 1px solid var(--lg-hairline);
  margin-top: 4rem;
  padding: 2.5rem 0;
  color: var(--lg-fg-subtle);
  position: relative;
}
#footer.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.3), transparent);
}
#footer.footer .nav-link {
  color: var(--lg-fg-muted);
  font-family: var(--lg-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#footer.footer .nav-link:hover { color: var(--lg-accent); }
#footer.footer .copyright {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--lg-fg-subtle);
}

/* --- 29. Network notifications / alerts --------------------- */
.alert {
  border-radius: 10px;
  padding: 1rem 1.25rem;
  border-width: 1px;
}

/* --- 30. Misc product / cart polish ------------------------- */
.pricing-card-title {
  font-family: var(--lg-font-sans);
  font-weight: 200;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  color: var(--lg-fg);
}

.btn-outline-primary {
  border: 1px solid var(--lg-hairline-strong);
  color: var(--lg-fg);
  background-color: transparent;
  font-weight: 600;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--lg-accent);
  border-color: var(--lg-accent);
  color: #07080B;
  box-shadow: var(--lg-glow-accent);
}

/* Active client switcher in topbar */
.btn-active-client {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  color: var(--lg-fg) !important;
}

/* Currency / language switcher */
footer .btn[data-toggle="modal"] {
  color: var(--lg-fg-muted);
  background-color: transparent;
  border: 1px solid var(--lg-hairline);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
footer .btn[data-toggle="modal"]:hover {
  border-color: var(--lg-hairline-strong);
  color: var(--lg-fg);
}

/* Domain search hero */
.domain-search-bar,
#order-standard_cart .domainsearch,
.domain-checker {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 16px;
  padding: 2rem;
}

/* --- 31. Card columns (homepage product groups) ------------- */
.card-columns.home .card {
  text-align: left;
  padding: 0;
}
.card-columns.home .card .card-body { padding: 2rem; }
.card-columns.home .card .card-title {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: none;
}
.card-columns.home .card p { color: var(--lg-fg-muted); }

/* --- 32. Tooltips & popovers -------------------------------- */
.tooltip-inner {
  background-color: var(--lg-bg-nested);
  border: 1px solid var(--lg-hairline);
  color: var(--lg-fg);
  font-family: var(--lg-font-sans);
}
.popover {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
}
.popover-header {
  background-color: transparent;
  border-bottom: 1px solid var(--lg-hairline);
  color: var(--lg-fg);
}
.popover-body { color: var(--lg-fg); }

/* --- 33. Modal polish --------------------------------------- */
.modal-content {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 16px;
}

/* --- 34. Responsive nudges ---------------------------------- */
@media (max-width: 768px) {
  body::before { background-size: 36px 36px; }
  #main-body h2 { font-size: 1.4rem; }
}

/* ============================================================
   Lagless: critical fixes pass — card headers, alerts, buttons
   ============================================================ */

/* --- 35. Card stacking (titles were hidden behind ::before) - */
.card { isolation: isolate; }
.card > * { position: relative; z-index: 2; }
.card::before { z-index: 1; }
.card::after  { z-index: 0; }

/* Force card-title h3 visibility regardless of card-accent-X */
.card-header,
.panel-heading {
  background-color: transparent !important;
  border-bottom: 0;
  padding: 1.25rem 1.5rem 0.5rem;
  color: var(--lg-fg);
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header .card-title,
.panel-heading .card-title,
.panel-heading h3 {
  color: var(--lg-fg) !important;
  font-family: var(--lg-font-sans) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em;
  margin: 0;
  display: block;
}
.card-header i,
.card-header .card-title i,
.panel-heading i {
  color: var(--lg-accent) !important;
  margin-right: 0.4rem;
}

/* WHMCS card-accent-X border-top stripes — replace with mint hairline glow */
[class*="card-accent-"] { border-top: 0 !important; }

/* --- 36. Catch-all alert override (dev license banner etc) - */
.alert {
  background-color: var(--lg-bg-elevated) !important;
  color: var(--lg-fg) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.alert.alert-warning {
  background-color: rgba(249,115,22,0.08) !important;
  color: var(--lg-mc-glow) !important;
  border-color: rgba(249,115,22,0.30) !important;
}
.alert.alert-danger,
.alert.alert-error {
  background-color: rgba(239,68,68,0.08) !important;
  color: var(--lg-soft-red) !important;
  border-color: rgba(239,68,68,0.30) !important;
}
.alert.alert-success,
.alert.alert-info,
.alert.alert-primary {
  background-color: rgba(20,160,133,0.08) !important;
  color: var(--lg-accent-bright) !important;
  border-color: rgba(20,160,133,0.30) !important;
}
.alert a, .alert strong, .alert b { color: inherit !important; }

/* --- 37. WHMCS bg-color-* utilities — reroute to Lagless ---- */
[class*="bg-color-"] {
  background-color: var(--lg-bg-elevated) !important;
  color: var(--lg-fg) !important;
  border-color: var(--lg-hairline) !important;
}
.bg-color-blue, .bg-color-teal, .bg-color-emerald,
.bg-color-turquoise, .bg-color-green, .bg-color-midnight-blue {
  background-color: var(--lg-accent) !important;
  color: #07080B !important;
}
.bg-color-red, .bg-color-pomegranate, .bg-color-pink, .bg-color-magenta {
  background-color: var(--lg-soft-red) !important;
  color: #FFFFFF !important;
}
.bg-color-gold, .bg-color-orange, .bg-color-sun-flower, .bg-color-yellow {
  background-color: var(--lg-ember) !important;
  color: #07080B !important;
}
.bg-color-purple, .bg-color-amethyst, .bg-color-asbestos, .bg-color-lime {
  background-color: var(--lg-magic) !important;
  color: #FFFFFF !important;
}

/* Tile highlight stripe — kill it (we use top edge glow instead) */
.tiles .tile .highlight,
.tile .highlight { display: none !important; }

/* --- 38. Default & xs buttons (View Details etc) ------------ */
.btn-default,
.btn-xs.btn-default,
a.btn.btn-default {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline-strong) !important;
  color: var(--lg-fg) !important;
  font-weight: 600;
  border-radius: 6px;
}
.btn-default:hover, .btn-default:focus,
a.btn.btn-default:hover, a.btn.btn-default:focus {
  background-color: var(--lg-bg-nested) !important;
  border-color: var(--lg-accent) !important;
  color: var(--lg-accent-bright) !important;
}
/* btn-default with bg-color-X — keep the color but ensure contrast */
.btn-default[class*="bg-color-"] { color: #07080B !important; border: 0 !important; }

/* --- 39. Nav tabs (Register / Transfer style) --------------- */
.nav-tabs {
  border-bottom: 1px solid var(--lg-hairline);
  background-color: transparent;
}
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--lg-fg-muted);
  font-weight: 600;
  background-color: transparent;
  padding: 0.75rem 1.25rem;
  border-radius: 0;
}
.nav-tabs .nav-link:hover {
  color: var(--lg-fg);
  border-bottom-color: var(--lg-hairline-strong);
}
.nav-tabs .nav-link.active {
  background-color: transparent;
  color: var(--lg-accent-bright);
  border-bottom: 2px solid var(--lg-accent);
}

/* --- 40. Tile icons should sit top-right in mint, balanced -- */
.tiles .tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
}
.tiles .tile i {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  margin: 0;
  font-size: 1.25rem;
  color: var(--lg-accent);
  opacity: 0.75;
}
.tiles .tile .stat {
  margin-top: 0.5rem;
  font-size: 2.75rem;
  font-weight: 200;
}

/* --- 41. Active client + topbar button (Hello, Lev dropdown) */
.btn-active-client,
.btn-active-client:hover,
.btn-active-client:focus {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  color: var(--lg-fg) !important;
  border-radius: 6px;
  font-weight: 600;
}

/* --- 42. Collapsable card chevron in sidebar/cards ---------- */
.card-minimise {
  color: var(--lg-fg-subtle);
  font-size: 0.85rem;
}

/* --- 43. Empty-state subtext -------------------------------- */
.card-body p:empty,
.card-body .text-muted:empty { display: none; }
.card-body .text-muted,
.card-body p { color: var(--lg-fg-muted); }

/* --- 44. Domain Register/Transfer card buttons -------------- */
.domainregisterandtransfer .btn,
.domain-options .btn,
form[action*="domainsearch"] .btn {
  border-radius: 8px;
  font-weight: 600;
}

/* --- 45. View Details link/button on product cards ---------- */
.list-group-item .btn,
.card-body .btn-xs {
  font-size: 0.8rem;
  padding: 0.4rem 0.85rem;
}

/* --- 46. Active product/service status pills ---------------- */
.label, .status,
span.label-success, .label.label-success,
.product-status-active, .status-active {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: rgba(20,160,133,0.15);
  color: var(--lg-accent-bright);
  border: 1px solid rgba(20,160,133,0.3);
}
.label-warning, .status-warning {
  background-color: rgba(249,115,22,0.12);
  color: var(--lg-mc-glow);
  border-color: rgba(249,115,22,0.3);
}
.label-danger, .status-danger,
.label-important {
  background-color: rgba(239,68,68,0.12);
  color: var(--lg-soft-red);
  border-color: rgba(239,68,68,0.3);
}

/* --- 47. Dev License banner (inline-styled by WHMCS core) --- */
div[style*="#ffffd2"],
div[style*="background-color:#ffffd2"],
div[style*="background-color: #ffffd2"] {
  background-color: rgba(249,115,22,0.08) !important;
  color: var(--lg-mc-glow) !important;
  border: 1px solid rgba(249,115,22,0.30) !important;
  border-radius: 10px !important;
  padding: 0.85rem 1.25rem !important;
  margin: 1rem 0 !important;
  font-size: 0.85rem !important;
  text-align: left !important;
  font-family: var(--lg-font-sans) !important;
  font-weight: 400 !important;
}
div[style*="#ffffd2"] strong,
div[style*="#ffffd2"] b,
div[style*="#ffffd2"] a { color: inherit !important; }

/* --- 48. "Powered by WHMCompleteSolution" attribution ------- */
p:has(a[href*="whmcs.com"]),
.footer p:has(a[href*="whmcs.com"]) {
  font-family: var(--lg-font-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  opacity: 0.4;
  margin-top: 1.5rem !important;
}
p a[href*="whmcs.com"] {
  color: var(--lg-fg-subtle) !important;
  text-decoration: none !important;
  font-weight: 500;
}
p a[href*="whmcs.com"]:hover { color: var(--lg-fg-muted) !important; }

/* --- 49. Dashboard polish — Active Products card row -------- */
.client-home-cards .list-group-item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--lg-hairline);
  padding: 1rem 1.5rem;
}
.client-home-cards .list-group-item:last-child { border-bottom: 0; }
.client-home-cards .list-group-item:hover {
  background-color: rgba(255,255,255,0.02);
}

/* --- 50. View All / Open New Ticket pill buttons ------------ */
.card-header .btn.btn-default,
.card-header .btn.btn-xs {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background-color: rgba(20,160,133,0.08) !important;
  color: var(--lg-accent-bright) !important;
  border: 1px solid rgba(20,160,133,0.25) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.card-header .btn.btn-default:hover,
.card-header .btn.btn-xs:hover {
  background-color: rgba(20,160,133,0.15) !important;
  color: var(--lg-accent-bright) !important;
  border-color: var(--lg-accent) !important;
  box-shadow: var(--lg-glow-accent);
}
.card-header .btn.btn-default i,
.card-header .btn.btn-xs i {
  color: var(--lg-accent) !important;
  font-size: 0.7rem;
}

/* --- 51. Sidebar card headers — eyebrow treatment ----------- */
.sidebar .card-sidebar .card-header,
.card-sidebar .card-header {
  padding: 1rem 1.25rem;
}
.sidebar .card-sidebar .card-title,
.card-sidebar .card-title {
  font-family: var(--lg-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lg-fg) !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar .card-sidebar .card-title i,
.card-sidebar .card-title i {
  color: var(--lg-accent) !important;
  font-size: 0.85rem;
  margin-right: 0.25rem;
}

/* --- 52. Update / primary action button polish -------------- */
.card-body > .btn.btn-primary,
.card-body .btn.btn-primary[type="submit"],
.card-sidebar .btn.btn-primary {
  width: 100%;
  padding: 0.65rem 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* --- 53. Domain register/transfer card — clean up tabs ------ */
form[action*="domain"] .nav-tabs,
.domainsearch .nav-tabs {
  margin-bottom: 1rem;
}
.domainsearch .input-group, .domain-search .input-group {
  margin-top: 1rem;
}

/* --- 54. Master breadcrumb spacing nudge -------------------- */
.master-breadcrumb {
  padding: 0.85rem 0;
}

/* --- 55. Body inner-content lift — main-body padding -------- */
section#main-body { padding: 1.5rem 0 3rem; }

/* --- 56. List-group items in cards (active products etc) ---- */
.list-group-item {
  background-color: transparent !important;
  color: var(--lg-fg) !important;
}

/* --- 57. Active product/service inline -- enhance the row --- */
.client-home-cards .label-success,
.client-home-cards .status-active,
.client-home-cards span.label-success {
  margin-right: 0.85rem;
}

/* --- 58. View More... link ---------------------------------- */
.list-group + a,
.card-body > a.float-right,
a.viewmore {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lg-fg-muted);
}
a.viewmore:hover { color: var(--lg-accent); }

/* --- 59. Soften hr inside cards ----------------------------- */
.card hr { margin: 1rem 0; }

/* --- 60. Empty-state lines ("No Contacts Found", etc.) ------ */
.card-body > p:only-child {
  color: var(--lg-fg-subtle);
  font-style: normal;
  font-family: var(--lg-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0;
}

/* ============================================================
   Lagless: Order form (standard_cart) — match marketing-site UX
   ============================================================ */

#order-standard_cart {
  background: transparent !important;
  color: var(--lg-fg) !important;
  padding: 1rem 0 !important;
}

/* Cart container width — not full bleed */
#order-standard_cart > .row {
  margin-left: 0;
  margin-right: 0;
}

/* --- Cart sidebar (categories) ------------------------------ */
#order-standard_cart .cart-sidebar {
  background: transparent !important;
}
#order-standard_cart .cart-sidebar h3,
#order-standard_cart .sidebar-collapsed h3 {
  font-family: var(--lg-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lg-fg-muted) !important;
  margin: 0 0 0.85rem 0;
  padding: 0;
  border: 0;
  background: transparent !important;
}
#order-standard_cart .cart-sidebar .list-group-item {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-radius: 8px !important;
  margin-bottom: 0.4rem;
  padding: 0.85rem 1rem !important;
  color: var(--lg-fg-muted) !important;
  font-weight: 500;
  transition: all 0.15s ease;
}
#order-standard_cart .cart-sidebar .list-group-item:hover {
  border-color: var(--lg-hairline-strong) !important;
  color: var(--lg-fg) !important;
  background-color: var(--lg-bg-nested) !important;
}
#order-standard_cart .cart-sidebar .list-group-item.active {
  background-color: rgba(20,160,133,0.1) !important;
  border-color: var(--lg-accent) !important;
  color: var(--lg-accent-bright) !important;
  box-shadow: var(--lg-glow-accent);
}

/* --- Header / hero ------------------------------------------ */
#order-standard_cart .header-lined {
  border-bottom: 1px solid var(--lg-hairline);
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  position: relative;
}
#order-standard_cart .header-lined::before {
  content: "BUILD YOUR SERVER";
  display: block;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  color: var(--lg-accent-bright);
  margin-bottom: 0.75rem;
  text-shadow: 0 0 8px rgba(45,212,191,0.4);
}
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined h1.font-size-36 {
  font-family: var(--lg-font-sans) !important;
  font-weight: 800 !important;
  font-size: 2.5rem !important;
  letter-spacing: -0.03em !important;
  color: var(--lg-fg) !important;
  margin: 0;
  line-height: 1.1;
}
#order-standard_cart .header-lined p {
  color: var(--lg-fg-muted) !important;
  font-weight: 300;
  font-size: 1rem;
  margin-top: 0.85rem;
}

/* --- Sub-heading dividers (sectioning) ---------------------- */
/* WHMCS uses height:0 on parent + top:-11px on span for "text-on-line"
   centered effect. We unwind that and use a left-aligned title with a
   hairline + mint accent ABOVE it instead. */
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless {
  height: auto !important;
  border-top: 1px solid var(--lg-hairline) !important;
  border-bottom: 0 !important;
  background: transparent !important;
  margin: 2.5rem 0 1.25rem !important;
  padding: 1.25rem 0 0 !important;
  text-align: left !important;
  position: relative;
  display: block !important;
}
#order-standard_cart .sub-heading::before,
#order-standard_cart .sub-heading-borderless::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, var(--lg-accent-bright), transparent);
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span,
#order-standard_cart .sub-heading span.primary-bg-color {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--lg-fg) !important;
  font-family: var(--lg-font-sans) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.02em !important;
  padding: 0 !important;
  display: block !important;
  text-transform: none !important;
}

/* --- Field containers (config option groups) --------------- */
#order-standard_cart .field-container {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
#order-standard_cart .field-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.4), transparent);
}
#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc,
#order-standard_cart .info-text-sm {
  color: var(--lg-fg-muted) !important;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem !important;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#order-standard_cart .form-control,
#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 .custom-select {
  background-color: var(--lg-bg-nested) !important;
  border: 1px solid var(--lg-hairline) !important;
  color: var(--lg-fg) !important;
  border-radius: 6px !important;
  font-family: var(--lg-font-sans) !important;
}

/* --- Products listing (game/server tier cards) -------------- */
#order-standard_cart .products .product {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 16px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  height: 100%;
  margin-bottom: 1.5rem;
  isolation: isolate;
}
#order-standard_cart .products .product::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.5), transparent);
  z-index: 1;
}
#order-standard_cart .products .product::after {
  content: "";
  position: absolute;
  bottom: -40%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(20,160,133,0.10), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
#order-standard_cart .products .product:hover {
  border-color: var(--lg-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), var(--lg-glow-accent);
}
#order-standard_cart .products .product:hover::after { opacity: 1; }
#order-standard_cart .products .product > * { position: relative; z-index: 2; }
#order-standard_cart .products .product header {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 1rem 0 !important;
  font-family: var(--lg-font-sans);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--lg-fg);
  letter-spacing: -0.02em;
}
#order-standard_cart .products .product header .qty {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lg-mc-glow);
  font-weight: 500;
  margin-left: 0.5rem;
}
#order-standard_cart .products .product .product-desc {
  color: var(--lg-fg-muted);
  font-weight: 300;
}
#order-standard_cart .products .product .product-desc ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
#order-standard_cart .products .product .product-desc ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--lg-hairline);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}
#order-standard_cart .products .product .product-desc ul li:last-child { border-bottom: 0; }
#order-standard_cart .products .product .feature-value {
  font-family: var(--lg-font-mono);
  font-weight: 600;
  color: var(--lg-accent-bright);
  min-width: 80px;
}
#order-standard_cart .products .product .price,
#order-standard_cart .products .product footer {
  font-family: var(--lg-font-sans);
  background: transparent !important;
  border: 0 !important;
  padding: 1rem 0 0 0 !important;
  margin-top: auto;
}
#order-standard_cart .products .product .price-num {
  font-weight: 200;
  font-size: 2.5rem;
  color: var(--lg-accent-bright);
  letter-spacing: -0.03em;
}
#order-standard_cart .products .product .price-cycle {
  font-family: var(--lg-font-mono);
  font-size: 0.75rem;
  color: var(--lg-fg-muted);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* --- Add to cart button (in product card) ------------------- */
#order-standard_cart .products .product .btn,
#order-standard_cart .products .product button.btn-add-to-cart,
#order-standard_cart .products .product a.btn-add-to-cart {
  width: 100%;
  background-color: var(--lg-accent) !important;
  border: 0 !important;
  color: #07080B !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.25rem !important;
  font-family: var(--lg-font-sans);
  letter-spacing: -0.01em;
  margin-top: 1rem;
  box-shadow: var(--lg-glow-accent);
  transition: all 0.15s ease;
}
#order-standard_cart .products .product .btn:hover,
#order-standard_cart .products .product button.btn-add-to-cart:hover {
  background-color: var(--lg-accent-bright) !important;
  box-shadow: var(--lg-glow-accent-strong);
  transform: translateY(-1px);
}

/* --- Order summary sidebar (right rail) --------------------- */
#order-standard_cart .order-summary,
#order-standard_cart #orderSummary,
#order-standard_cart .secondary-cart-sidebar {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 16px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#order-standard_cart .order-summary::before,
#order-standard_cart #orderSummary::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.5), transparent);
}
#order-standard_cart .order-summary .product-name {
  font-family: var(--lg-font-sans);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--lg-fg);
  display: block;
  margin-bottom: 0.3rem;
}
#order-standard_cart .order-summary .product-group {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lg-fg-muted);
  display: block;
  margin-bottom: 1.25rem;
}
#order-standard_cart .order-summary .clearfix {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--lg-hairline);
  font-size: 0.875rem;
  color: var(--lg-fg-muted);
}
#order-standard_cart .order-summary .clearfix:last-child { border-bottom: 0; }
#order-standard_cart .order-summary .clearfix .float-right {
  color: var(--lg-fg);
  font-weight: 600;
}
#order-standard_cart .order-summary .summary-totals {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lg-hairline);
}
#order-standard_cart .order-summary .summary-totals .clearfix {
  border-bottom: 0;
  padding: 0.4rem 0;
}
#order-standard_cart .order-summary .total {
  font-family: var(--lg-font-sans);
  font-weight: 200;
  font-size: 2rem;
  color: var(--lg-accent-bright);
  letter-spacing: -0.03em;
}

/* --- View cart line items ----------------------------------- */
#order-standard_cart .view-cart-items {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 12px;
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
#order-standard_cart .view-cart-items::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.4), transparent);
}
#order-standard_cart .view-cart-items-header {
  background-color: transparent;
  border-bottom: 1px solid var(--lg-hairline);
  padding: 1rem 1.5rem !important;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lg-fg-muted);
}
#order-standard_cart .view-cart-items > div:not(.view-cart-items-header) {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--lg-hairline);
}
#order-standard_cart .view-cart-items > div:last-child { border-bottom: 0; }

/* --- Promo / coupon area ------------------------------------ */
#order-standard_cart input[name="promocode"] {
  background-color: var(--lg-bg-nested) !important;
  border: 1px solid var(--lg-hairline) !important;
  color: var(--lg-fg) !important;
}

/* --- Checkout submit button — TWO-TONE Lagless CTA ---------- */
#order-standard_cart button[type="submit"][name="checkout"],
#order-standard_cart button#btnCompleteOrder,
#order-standard_cart .btn-checkout,
#order-standard_cart input[type="submit"][value*="Checkout"],
#order-standard_cart input[type="submit"][value*="Complete"],
#order-standard_cart .btn-primary[type="submit"],
#order-standard_cart .checkout-btn {
  background: linear-gradient(to right,
    var(--lg-accent) 0%,
    var(--lg-accent) calc(100% - 56px),
    var(--lg-accent-deep) calc(100% - 56px),
    var(--lg-accent-deep) 100%) !important;
  border: 0 !important;
  color: #07080B !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em;
  border-radius: 999px !important;
  padding: 0.85rem 1.5rem !important;
  box-shadow: var(--lg-glow-accent);
  font-family: var(--lg-font-sans) !important;
  transition: all 0.18s ease;
  position: relative;
}
#order-standard_cart button[type="submit"][name="checkout"]:hover,
#order-standard_cart button#btnCompleteOrder:hover,
#order-standard_cart .btn-primary[type="submit"]:hover,
#order-standard_cart .checkout-btn:hover {
  box-shadow: var(--lg-glow-accent-strong);
  transform: translateY(-1px);
}

/* --- Account selection (logged-in checkout) ----------------- */
#order-standard_cart .account-select-container {
  margin: 0 !important;
  border: 1px solid var(--lg-hairline) !important;
  border-radius: 12px !important;
  overflow: hidden;
  background-color: var(--lg-bg-elevated);
  position: relative;
}
#order-standard_cart .account-select-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.4), transparent);
  z-index: 1;
}
#order-standard_cart .account-select-container > div { padding: 0 !important; }
#order-standard_cart .account-select-container div.account,
#order-standard_cart .account-select-container div.account:not(.border-bottom) {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
  padding: 1.1rem 1.25rem !important;
  color: var(--lg-fg) !important;
  transition: background-color 0.15s ease;
}
#order-standard_cart .account-select-container div.account:last-child,
#order-standard_cart .account-select-container > div:last-child .account {
  border-bottom: 0 !important;
}
#order-standard_cart .account-select-container div.account:hover {
  background: rgba(255,255,255,0.02) !important;
  cursor: pointer;
}
#order-standard_cart .account-select-container div.account.active {
  background: rgba(20,160,133,0.06) !important;
}
#order-standard_cart .account-select-container .address strong {
  font-family: var(--lg-font-mono);
  font-size: 0.75rem !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lg-fg) !important;
}
#order-standard_cart .account-select-container .address .small,
#order-standard_cart .account-select-container .address span:not(.label) {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem !important;
  color: var(--lg-fg-muted) !important;
  letter-spacing: 0.06em;
}
#order-standard_cart .account-select-container .label-info {
  background-color: rgba(20,160,133,0.12) !important;
  color: var(--lg-accent-bright) !important;
  border: 1px solid rgba(20,160,133,0.30) !important;
  font-family: var(--lg-font-mono);
  font-size: 0.65rem !important;
  letter-spacing: 0.14em;
  padding: 0.2rem 0.55rem !important;
  border-radius: 999px !important;
  text-transform: uppercase;
}
#order-standard_cart .account-select-container .label-default {
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--lg-fg-muted) !important;
  border: 1px solid var(--lg-hairline) !important;
  font-family: var(--lg-font-mono);
  font-size: 0.65rem !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 999px !important;
}
#order-standard_cart .account-select-container .radio-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  cursor: pointer;
  padding: 0;
}
#order-standard_cart .account-select-container input[type="radio"] {
  margin-top: 0.4rem;
  accent-color: var(--lg-accent);
}

/* --- "Already registered" / "Create account" toggle --------- */
#order-standard_cart .already-registered .btn {
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
}
#order-standard_cart .already-registered .btn-info {
  background-color: rgba(20,160,133,0.1) !important;
  color: var(--lg-accent-bright) !important;
  border: 1px solid rgba(20,160,133,0.3) !important;
}
#order-standard_cart .already-registered .btn-warning {
  background-color: rgba(249,115,22,0.1) !important;
  color: var(--lg-mc-glow) !important;
  border: 1px solid rgba(249,115,22,0.3) !important;
}

/* --- Sidebar collapsed (mobile categories selector) --------- */
#order-standard_cart .sidebar-collapsed {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin-bottom: 1.5rem;
  color: var(--lg-fg);
}
#order-standard_cart .sidebar-collapsed::after {
  border-top-color: var(--lg-fg-subtle) !important;
}

/* --- Domain search hero (in cart) --------------------------- */
#order-standard_cart .domainsearch {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
#order-standard_cart .domainsearch::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.5), transparent);
}

/* --- Remove from cart button -------------------------------- */
#order-standard_cart .btn-remove-from-cart {
  color: var(--lg-fg-subtle) !important;
  background: transparent !important;
  border: 0 !important;
}
#order-standard_cart .btn-remove-from-cart:hover { color: var(--lg-soft-red) !important; }

/* --- Loader inside order summary ---------------------------- */
#order-standard_cart .loader,
#order-standard_cart #orderSummaryLoader { color: var(--lg-fg-subtle); }

/* --- WHMCS .primary-bg-color span used as section bg cover -- */
#order-standard_cart span.primary-bg-color { background: transparent !important; }

/* --- Validation errors -------------------------------------- */
#order-standard_cart #containerProductValidationErrors {
  background-color: rgba(239,68,68,0.08) !important;
  border: 1px solid rgba(239,68,68,0.30) !important;
  color: var(--lg-soft-red) !important;
  border-radius: 10px;
}

/* ============================================================
   Lagless: viewcart fixes — kill cart's hardcoded white bgs
   ============================================================ */

/* --- Cart line items (.item) — dark with hairlines --------- */
#order-standard_cart .view-cart-items {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
  border-radius: 12px !important;
  overflow: hidden;
  margin: 0 0 1.5rem 0 !important;
  padding: 0 !important;
  position: relative;
}
#order-standard_cart .view-cart-items::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.5), transparent);
  z-index: 1;
}

#order-standard_cart .view-cart-items-header {
  background-color: transparent !important;
  color: var(--lg-fg-muted) !important;
  font-family: var(--lg-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
  border-radius: 0 !important;
}

#order-standard_cart .view-cart-items .item,
#order-standard_cart .view-cart-items .item:nth-child(even) {
  background-color: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
  padding: 1.25rem 1.5rem !important;
  font-size: 0.875rem !important;
  color: var(--lg-fg);
}
#order-standard_cart .view-cart-items .item:last-child {
  border-bottom: 0 !important;
}
#order-standard_cart .view-cart-items .item:hover {
  background-color: rgba(255,255,255,0.02) !important;
}
#order-standard_cart .view-cart-items .item-title {
  font-family: var(--lg-font-sans);
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--lg-fg);
  letter-spacing: -0.01em;
}
#order-standard_cart .view-cart-items .item-title .btn-link {
  color: var(--lg-accent-bright) !important;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 0.5rem !important;
  margin-left: 0.5rem;
  background: transparent !important;
  border: 0 !important;
}
#order-standard_cart .view-cart-items .item-title .btn-link:hover {
  color: var(--lg-accent) !important;
  text-decoration: none;
}
#order-standard_cart .view-cart-items .item-group {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lg-fg-muted) !important;
  margin-top: 0.25rem;
}
#order-standard_cart .view-cart-items .item-domain {
  color: var(--lg-fg-muted) !important;
  font-size: 0.875rem !important;
  font-family: var(--lg-font-mono);
  margin-top: 0.25rem;
}
#order-standard_cart .view-cart-items .item-price span {
  font-size: 1.1rem !important;
  color: var(--lg-fg);
  font-weight: 600;
}
#order-standard_cart .view-cart-items .item-price .cycle {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lg-fg-muted);
  font-weight: 500;
  display: block;
}
#order-standard_cart .view-cart-items .item-price .renewal {
  color: var(--lg-fg-subtle);
  font-size: 0.75rem !important;
}
#order-standard_cart .view-cart-items .btn-remove-from-cart {
  color: var(--lg-fg-subtle) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0.25rem 0.5rem !important;
}
#order-standard_cart .view-cart-items .btn-remove-from-cart:hover {
  color: var(--lg-soft-red) !important;
}

/* --- Empty Cart button (was WHMCS blue #058) --------------- */
#order-standard_cart .empty-cart .btn,
#order-standard_cart .empty-cart .btn:hover {
  background-color: var(--lg-bg-elevated) !important;
  color: var(--lg-fg-muted) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-radius: 999px !important;
  padding: 0.4rem 1rem !important;
  margin: 0 !important;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
#order-standard_cart .empty-cart .btn:hover {
  color: var(--lg-soft-red) !important;
  border-color: rgba(239,68,68,0.4) !important;
  background-color: rgba(239,68,68,0.05) !important;
}
#order-standard_cart .empty-cart {
  margin: 0.75rem 0 !important;
}

/* --- View cart tabs (Apply Promo Code etc) ------------------ */
#order-standard_cart .view-cart-tabs {
  margin: 0 0 1.5rem 0 !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs {
  padding-left: 0 !important;
  font-size: 0.75rem !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link,
#order-standard_cart .view-cart-tabs .nav-tabs a {
  font-family: var(--lg-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lg-fg-muted) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0 !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--lg-accent) !important;
  color: var(--lg-accent-bright) !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
  background-color: transparent !important;
  padding: 1.25rem 0 !important;
  border: 0 !important;
}
#order-standard_cart .view-cart-tabs .tab-content input[name="promocode"] {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  color: var(--lg-fg) !important;
  border-radius: 8px !important;
  padding: 0.65rem 1rem !important;
  font-family: var(--lg-font-sans);
}
#order-standard_cart .view-cart-tabs .tab-content .btn,
#order-standard_cart .view-cart-tabs .tab-content button[type="submit"] {
  background-color: var(--lg-accent) !important;
  border: 0 !important;
  color: #07080B !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 0.65rem 1.5rem !important;
  font-family: var(--lg-font-sans);
  letter-spacing: -0.01em;
  margin-top: 0.5rem;
  box-shadow: var(--lg-glow-accent);
}
#order-standard_cart .view-cart-tabs .tab-content .btn:hover {
  background-color: var(--lg-accent-bright) !important;
  box-shadow: var(--lg-glow-accent-strong);
}

/* --- Promo applied display --------------------------------- */
#order-standard_cart .view-cart-promotion-code {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px dashed var(--lg-accent) !important;
  color: var(--lg-accent-bright);
  border-radius: 10px;
  padding: 1rem 1.25rem !important;
}

/* --- Order Summary container (was light gray #f8f8f8) ------ */
#order-standard_cart .summary-container {
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  color: var(--lg-fg);
}

#order-standard_cart .order-summary h2,
#order-standard_cart .order-summary h2.font-size-30 {
  font-family: var(--lg-font-sans) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.02em !important;
  color: var(--lg-fg) !important;
  margin: 0 0 1.25rem 0 !important;
}

#order-standard_cart .order-summary .subtotal {
  border-bottom: 1px solid var(--lg-hairline) !important;
  padding: 0.75rem 0 !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  color: var(--lg-fg-muted);
}
#order-standard_cart .order-summary .subtotal #subtotal {
  color: var(--lg-fg);
  font-weight: 600;
}

#order-standard_cart .order-summary .bordered-totals {
  border-bottom: 1px solid var(--lg-hairline) !important;
  margin: 0 !important;
  padding: 0.5rem 0 !important;
  color: var(--lg-fg-muted);
}
#order-standard_cart .order-summary .bordered-totals .clearfix {
  font-size: 0.8rem !important;
  padding: 0.25rem 0 !important;
}

#order-standard_cart .order-summary .recurring-totals {
  margin: 0 !important;
  padding: 0.85rem 0 !important;
  border-bottom: 1px solid var(--lg-hairline);
  color: var(--lg-fg-muted);
  font-size: 0.85rem !important;
}
#order-standard_cart .order-summary .recurring-charges {
  font-family: var(--lg-font-mono);
  font-size: 0.75rem !important;
  font-style: normal !important;
  color: var(--lg-fg) !important;
  text-align: right;
  letter-spacing: 0.02em;
}
#order-standard_cart .order-summary .recurring-charges .cost {
  color: var(--lg-fg);
  font-weight: 600;
}

#order-standard_cart .order-summary .total-due-today,
#order-standard_cart .order-summary .total-due-today-padded {
  margin: 1.25rem 0 !important;
  padding-top: 1rem !important;
  text-align: right;
}
#order-standard_cart .order-summary .total-due-today span,
#order-standard_cart .order-summary .total-due-today-padded span {
  display: block;
  text-align: right;
  color: var(--lg-fg);
}
#order-standard_cart .order-summary .total-due-today .amt,
#order-standard_cart .order-summary .total-due-today-padded .amt {
  font-family: var(--lg-font-sans) !important;
  font-size: 2.5rem !important;
  font-weight: 200 !important;
  color: var(--lg-accent-bright) !important;
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 0 0 24px rgba(45,212,191,0.4);
}
#order-standard_cart .order-summary .total-due-today > span:not(.amt),
#order-standard_cart .order-summary .total-due-today-padded > span:not(.amt) {
  font-family: var(--lg-font-mono);
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lg-fg-muted);
  margin-top: 0.5rem;
}

/* --- "Continue Shopping" link below checkout --------------- */
#order-standard_cart .order-summary .btn-continue-shopping,
#order-standard_cart .order-summary a[href*="cart.php?a="]:not(#checkout):not(.btn-checkout) {
  color: var(--lg-fg-muted) !important;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 0.85rem;
}
#order-standard_cart .order-summary .btn-continue-shopping:hover {
  color: var(--lg-accent) !important;
}

/* --- Real cart Checkout button — two-tone CTA capsule ------ */
#order-standard_cart .btn-checkout,
#order-standard_cart a#checkout,
#order-standard_cart a.btn-checkout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 0;
  background: linear-gradient(to right,
    var(--lg-accent) 0%,
    var(--lg-accent) calc(100% - 56px),
    var(--lg-accent-deep) calc(100% - 56px),
    var(--lg-accent-deep) 100%) !important;
  border: 0 !important;
  color: #07080B !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  font-family: var(--lg-font-sans) !important;
  letter-spacing: -0.01em;
  border-radius: 999px !important;
  padding: 0.95rem 1.75rem !important;
  box-shadow: var(--lg-glow-accent);
  transition: all 0.18s ease;
  width: 100%;
  text-align: center;
  position: relative;
  text-decoration: none !important;
}
#order-standard_cart .btn-checkout i,
#order-standard_cart a#checkout i {
  margin-left: auto;
  padding-left: 1rem;
  border-left: 1px solid rgba(0,0,0,0.18);
  font-size: 1rem;
  color: #07080B;
}
#order-standard_cart .btn-checkout:hover,
#order-standard_cart a#checkout:hover {
  box-shadow: var(--lg-glow-accent-strong);
  transform: translateY(-1px);
  color: #07080B !important;
}
#order-standard_cart .btn-checkout.disabled,
#order-standard_cart a#checkout.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Order summary card outer (style sticky right rail) ---- */
#order-standard_cart .secondary-cart-sidebar {
  position: relative;
}
#order-standard_cart #orderSummary,
#order-standard_cart .order-summary {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-radius: 16px !important;
  padding: 1.75rem !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#order-standard_cart #orderSummary::before,
#order-standard_cart .order-summary::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.5), transparent);
  z-index: 1;
}
#order-standard_cart #orderSummary::after,
#order-standard_cart .order-summary::after {
  content: "";
  position: absolute;
  bottom: -30%; right: -20%;
  width: 60%; height: 70%;
  background: radial-gradient(circle, rgba(20,160,133,0.10), transparent 60%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
#order-standard_cart #orderSummary > *,
#order-standard_cart .order-summary > * { position: relative; z-index: 2; }

/* --- Apply Credit / CC input containers (checkout page) ---- */
#order-standard_cart .apply-credit-container,
#order-standard_cart .cc-input-container {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  color: var(--lg-fg);
}
#order-standard_cart .apply-credit-container span {
  color: var(--lg-fg);
}

/* --- Update totals button (default Bootstrap to Lagless) --- */
#order-standard_cart .form-group.text-center .btn-default,
#order-standard_cart button[type="submit"].btn-default {
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline-strong) !important;
  color: var(--lg-fg) !important;
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  font-weight: 600;
}
#order-standard_cart .form-group.text-center .btn-default:hover {
  border-color: var(--lg-accent) !important;
  color: var(--lg-accent-bright) !important;
}

/* --- Ensure Loader spinner blends with dark theme ---------- */
#order-standard_cart .order-summary .loader { color: var(--lg-fg-subtle) !important; }

/* --- Catch all bg-color variants inside cart --------------- */
#order-standard_cart .bg-color-blue,
#order-standard_cart .btn-info {
  background-color: rgba(20,160,133,0.10) !important;
  color: var(--lg-accent-bright) !important;
  border: 1px solid rgba(20,160,133,0.3) !important;
}
#order-standard_cart .btn-warning {
  background-color: rgba(249,115,22,0.10) !important;
  color: var(--lg-mc-glow) !important;
  border: 1px solid rgba(249,115,22,0.3) !important;
}
#order-standard_cart .btn-danger {
  background-color: rgba(239,68,68,0.10) !important;
  color: var(--lg-soft-red) !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
}

/* --- "Already Registered" / "Create Account" toggle --------- */
#order-standard_cart #btnAlreadyRegistered,
#order-standard_cart #btnNewUserSignup {
  border-radius: 999px !important;
  padding: 0.5rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

/* --- Section breadcrumb hero alignment (cart pages) -------- */
.master-breadcrumb + section#main-body { padding-top: 0; }

/* ============================================================
   Lagless: DataTables / list pages (My Products, Invoices, etc)
   ============================================================ */

.table-container {
  background-color: var(--lg-bg-elevated);
  border: 1px solid var(--lg-hairline);
  border-radius: 12px;
  padding: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.table-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20,160,133,0.4), transparent);
  z-index: 1;
}

/* DataTables wrapper */
.dataTables_wrapper {
  background-color: transparent !important;
  color: var(--lg-fg);
}

/* "Showing 1 to N of N entries" */
.dataTables_info {
  color: var(--lg-fg-muted) !important;
  font-family: var(--lg-font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 1.5rem !important;
}

/* "Show X entries" */
.dataTables_length {
  color: var(--lg-fg-muted) !important;
  font-family: var(--lg-font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 1.5rem !important;
}
.dataTables_length select {
  background-color: var(--lg-bg-nested) !important;
  border: 1px solid var(--lg-hairline) !important;
  color: var(--lg-fg) !important;
  border-radius: 6px !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0 0.5rem;
  font-family: var(--lg-font-sans);
}

/* Filter search input (top-right of table) */
.dataTables_filter {
  padding: 1rem 1.5rem !important;
}
.dataTables_filter input,
.dataTables_filter input[type="search"] {
  background-color: var(--lg-bg-nested) !important;
  border: 1px solid var(--lg-hairline) !important;
  color: var(--lg-fg) !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.85rem 0.5rem 2.25rem !important;
  font-family: var(--lg-font-sans);
  background-image: none !important;
  position: relative;
  width: 240px;
  max-width: 100%;
}
.dataTables_filter input::placeholder { color: var(--lg-fg-subtle); }
.dataTables_filter input:focus {
  border-color: var(--lg-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(20,160,133,0.20) !important;
}
.dataTables_filter label {
  position: relative;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-size: inherit;
}
.dataTables_filter label::before {
  content: "\f002"; /* fa-search */
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lg-fg-subtle);
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 1;
}

/* Listtable wrap (DataTables custom dom — filter+info+table stacked) */
.dataTables_wrapper .listtable {
  background: transparent;
  border-bottom: 1px solid var(--lg-hairline);
  padding: 0;
  display: block;
}
.dataTables_wrapper .listtable::after {
  content: "";
  display: table;
  clear: both;
}
/* Filter floats top-right, info top-left (DataTables defaults preserved) */
.dataTables_wrapper .listtable .dataTables_filter { float: right; }
.dataTables_wrapper .listtable .dataTables_info {
  float: left;
  padding: 1.1rem 1.5rem !important;
}

/* The actual table */
table.table,
table.table-list,
table.dataTable,
.table-container .table {
  background-color: transparent !important;
  color: var(--lg-fg) !important;
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 0 !important;
  width: 100% !important;
}
/* Kill any DataTables / responsive-plugin perimeter strokes */
table.dataTable,
table.dataTable.no-footer,
.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollHeadInner,
.dataTables_scrollBody,
.dataTables_scrollFoot,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody,
.dataTables_wrapper .row,
table.dataTable thead tr,
table.dataTable tbody tr {
  border: 0 !important;
  box-shadow: none !important;
}

/* Table head (PRODUCT/SERVICE | PRICING | NEXT DUE DATE | STATUS) */
table.table thead th,
table.table-list thead th,
table.dataTable thead th,
.dataTables_wrapper table thead th {
  background-color: transparent !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
  color: var(--lg-fg-muted) !important;
  font-family: var(--lg-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 1rem 1.25rem !important;
  vertical-align: middle;
}

/* DataTables sort indicators */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background-image: none !important;
  position: relative;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.7rem;
  margin-left: 0.4rem;
  color: var(--lg-fg-subtle);
  opacity: 0.5;
}
table.dataTable thead .sorting::after { content: "\f0dc"; }
table.dataTable thead .sorting_asc::after { content: "\f0de"; color: var(--lg-accent); opacity: 1; }
table.dataTable thead .sorting_desc::after { content: "\f0dd"; color: var(--lg-accent); opacity: 1; }

/* Table rows */
table.table tbody tr,
table.table-list tbody tr,
table.dataTable tbody tr,
table.dataTable.table-striped tbody tr.odd,
table.dataTable.table-striped tbody tr.even {
  background-color: transparent !important;
  color: var(--lg-fg) !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
table.table tbody tr:hover,
table.dataTable tbody tr:hover,
table.dataTable.table-hover tbody tr:hover {
  background-color: rgba(20,160,133,0.05) !important;
}

table.table tbody td,
table.table-list tbody td,
table.dataTable tbody td {
  background-color: transparent !important;
  border-top: 1px solid var(--lg-hairline) !important;
  color: var(--lg-fg) !important;
  padding: 1.1rem 1.25rem !important;
  vertical-align: middle;
  font-size: 0.9rem;
}
table.table tbody td strong,
table.table-list tbody td strong,
table.dataTable tbody td strong {
  font-family: var(--lg-font-sans);
  font-weight: 700;
  color: var(--lg-fg);
}
table.table tbody td a:not(.btn):not(.label),
table.dataTable tbody td a:not(.btn):not(.label) {
  color: var(--lg-accent-bright);
}
table.table tbody td a:not(.btn):not(.label):hover {
  color: var(--lg-accent);
  text-decoration: none;
}
table.table tbody td small,
table.dataTable tbody td small,
table.table tbody td .text-muted {
  color: var(--lg-fg-muted) !important;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

/* Status pill in table cells */
table.table .label.status,
table.dataTable .label.status,
.label.status {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-family: var(--lg-font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background-color: rgba(20,160,133,0.12) !important;
  color: var(--lg-accent-bright) !important;
  border: 1px solid rgba(20,160,133,0.3) !important;
}
.label.status.status-active,
.label.status.status-completed,
.label.status.status-paid {
  background-color: rgba(20,160,133,0.12) !important;
  color: var(--lg-accent-bright) !important;
  border-color: rgba(20,160,133,0.3) !important;
}
/* Pending — ember (waiting/in-progress) */
table.table .label.status.status-pending,
table.dataTable .label.status.status-pending,
.label.status.status-pending {
  background-color: rgba(249,115,22,0.12) !important;
  color: var(--lg-mc-glow) !important;
  border-color: rgba(249,115,22,0.3) !important;
}
/* Unpaid / overdue — red (action required) */
table.table .label.status.status-unpaid,
table.dataTable .label.status.status-unpaid,
.label.status.status-unpaid,
table.table .label.status.status-overdue,
table.dataTable .label.status.status-overdue,
.label.status.status-overdue {
  background-color: rgba(239,68,68,0.12) !important;
  color: var(--lg-soft-red) !important;
  border-color: rgba(239,68,68,0.3) !important;
}
/* Suspended / cancelled / terminated / refunded / fraud — red */
table.table .label.status.status-suspended,
table.dataTable .label.status.status-suspended,
.label.status.status-suspended,
table.table .label.status.status-cancelled,
table.dataTable .label.status.status-cancelled,
.label.status.status-cancelled,
table.table .label.status.status-fraud,
table.dataTable .label.status.status-fraud,
.label.status.status-fraud,
table.table .label.status.status-terminated,
table.dataTable .label.status.status-terminated,
.label.status.status-terminated,
table.table .label.status.status-refunded,
table.dataTable .label.status.status-refunded,
.label.status.status-refunded {
  background-color: rgba(239,68,68,0.12) !important;
  color: var(--lg-soft-red) !important;
  border-color: rgba(239,68,68,0.3) !important;
}

/* Pagination */
.dataTables_paginate {
  padding: 1rem 1.5rem !important;
}
.dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.85rem !important;
  margin: 0 0.15rem !important;
  background-color: var(--lg-bg-elevated) !important;
  border: 1px solid var(--lg-hairline) !important;
  color: var(--lg-fg-muted) !important;
  border-radius: 6px !important;
  font-family: var(--lg-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dataTables_paginate .paginate_button:hover,
.dataTables_paginate .paginate_button:focus,
.dataTables_paginate .paginate_button:active {
  background-color: var(--lg-bg-nested) !important;
  border-color: var(--lg-hairline-strong) !important;
  color: var(--lg-fg) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background-color: var(--lg-accent) !important;
  border-color: var(--lg-accent) !important;
  color: #07080B !important;
  box-shadow: var(--lg-glow-accent);
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  background-color: var(--lg-bg-elevated) !important;
  color: var(--lg-fg-subtle) !important;
  border-color: var(--lg-hairline) !important;
  cursor: not-allowed;
}

/* No-records / loading row */
table.dataTable tbody td.dataTables_empty,
table.dataTable .odd .dataTables_empty {
  text-align: center;
  color: var(--lg-fg-subtle) !important;
  font-family: var(--lg-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 3rem 1.25rem !important;
}

/* --- Sidebar view-filter-btns (Active/Pending/etc filters) -- */
.view-filter-btns .list-group-item {
  display: flex;
  align-items: center;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
  border-radius: 0 !important;
  padding: 0.85rem 1.25rem !important;
  color: var(--lg-fg-muted) !important;
  font-family: var(--lg-font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}
.view-filter-btns .list-group-item:last-child {
  border-bottom: 0 !important;
}
.view-filter-btns .list-group-item:hover {
  background-color: rgba(20,160,133,0.04) !important;
  color: var(--lg-fg) !important;
}
.view-filter-btns .list-group-item i.far,
.view-filter-btns .list-group-item i.fas {
  color: var(--lg-fg-subtle) !important;
  margin-right: 0.65rem;
  font-size: 0.7rem;
}
.view-filter-btns .list-group-item.active {
  background-color: rgba(20,160,133,0.08) !important;
  color: var(--lg-accent-bright) !important;
  border-left: 2px solid var(--lg-accent) !important;
  padding-left: calc(1.25rem - 2px) !important;
}
.view-filter-btns .list-group-item.active i.far {
  color: var(--lg-accent) !important;
}
.view-filter-btns .list-group-item .badge {
  margin-left: auto;
  background-color: var(--lg-bg-nested) !important;
  color: var(--lg-fg-muted) !important;
  border: 1px solid var(--lg-hairline) !important;
  font-family: var(--lg-font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.view-filter-btns .list-group-item.active .badge {
  background-color: var(--lg-accent) !important;
  color: #07080B !important;
  border-color: var(--lg-accent) !important;
}

/* --- Loading spinner row ------------------------------------ */
#tableLoading {
  padding: 3rem 1.25rem;
  color: var(--lg-fg-subtle);
  font-family: var(--lg-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
#tableLoading i { color: var(--lg-accent); margin-right: 0.5rem; }

/* --- Make sure tr has no bg striping override by DataTables - */
table.dataTable.no-footer { border-bottom: 0 !important; }
table.dataTable thead .sorting:hover,
table.dataTable thead .sorting_asc:hover,
table.dataTable thead .sorting_desc:hover { color: var(--lg-fg) !important; }