@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* ============================================================
   GameHost — Complete Dark Theme for WHMCS Twenty-One
   Design tokens from marketing site (globals.css)
   ============================================================ */

/* ── Google Fonts ── */

/* ── Design tokens ── */
:root {
  --bg:        #0a0a0f;
  --surface:   #12121a;
  --surface2:  #1a1a26;
  --border:    rgba(255,255,255,0.08);
  --text:      rgba(255,255,255,0.87);
  --muted:     rgba(255,255,255,0.45);
  --indigo:    #6366f1;
  --indigo-d:  #4f46e5;
  --blue:      #3b82f6;
  --green:     #4ade80;
  --red:       #f87171;
  --yellow:    #facc15;
  --radius:    12px;
  --radius-btn:8px;
}

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

html { scroll-behavior: smooth; background: var(--bg); }

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--indigo); text-decoration: none; transition: color .15s; }
a:hover { color: #818cf8; }

h1,h2,h3,h4,h5,h6 { color: #fff; font-weight: 700; line-height: 1.3; }

::selection { background: var(--indigo); color: #fff; }

/* ── Layout helpers ── */
.gh-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.gh-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2rem 0;
}

.gh-content-full { flex: 1; min-width: 0; }
.gh-content-with-sidebar { flex: 1; min-width: 0; }
.gh-sidebar { width: 260px; flex-shrink: 0; }

/* ── NAVBAR ── */
.gh-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.gh-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.gh-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff !important;
  text-decoration: none;
  flex-shrink: 0;
}

.gh-logo:hover { color: #fff !important; }

.gh-nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}

.gh-nav-links .nav-item { list-style: none; }
.gh-nav-links .nav-link,
.gh-nav-links a {
  color: rgba(255,255,255,0.65) !important;
  font-size: .875rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem !important;
  border-radius: 6px;
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none !important;
}

.gh-nav-links .nav-link:hover,
.gh-nav-links a:hover,
.gh-nav-links .active > a,
.gh-nav-links .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,0.06);
}

/* Dropdown */
.gh-nav-links .dropdown-menu {
  background: #13131f !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.6) !important;
  padding: .5rem !important;
  min-width: 180px;
}

.gh-nav-links .dropdown-item {
  color: rgba(255,255,255,0.7) !important;
  font-size: .875rem;
  border-radius: 6px;
  padding: .5rem .75rem !important;
}

.gh-nav-links .dropdown-item:hover {
  background: rgba(99,102,241,0.15) !important;
  color: #fff !important;
}

.gh-nav-right {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-left: auto;
  flex-shrink: 0;
}

.gh-user-bar { display: flex; align-items: center; gap: .5rem; }

/* ── BUTTONS ── */
.gh-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: inherit;
  font-weight: 600;
  font-size: .875rem;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none !important;
  border: none;
  white-space: nowrap;
}

.gh-btn-sm  { padding: .45rem 1rem; font-size: .8125rem; }
.gh-btn-md  { padding: .625rem 1.25rem; }
.gh-btn-lg  { padding: .75rem 1.5rem; font-size: 1rem; }

.gh-btn-primary {
  background: var(--indigo);
  color: #fff !important;
}
.gh-btn-primary:hover {
  background: var(--indigo-d);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99,102,241,.35);
}

.gh-btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.85) !important;
}
.gh-btn-outline:hover {
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.05);
}

.gh-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.6) !important;
}
.gh-btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  color: #fff !important;
}

.gh-cart-count {
  background: var(--indigo);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
}

.gh-notif-btn { position: relative; }
.gh-notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  background: var(--indigo);
  border-radius: 50%;
}

/* ── Hamburger ── */
.gh-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.gh-hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: all .25s;
}
.gh-hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gh-hamburger--open span:nth-child(2) { opacity: 0; }
.gh-hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu ── */
.gh-mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem 1.5rem;
  background: rgba(10,10,15,.98);
}
.gh-mobile-menu--open { display: block; }
.gh-mobile-links .nav-item { list-style: none; }
.gh-mobile-links .nav-link,
.gh-mobile-links a {
  display: block;
  color: rgba(255,255,255,.7) !important;
  font-size: .9375rem;
  padding: .75rem 0 !important;
  border-bottom: 1px solid var(--border);
  text-decoration: none !important;
}
.gh-mobile-links .nav-link:hover,
.gh-mobile-links a:hover { color: #fff !important; }
.gh-mobile-cta { margin-top: 1rem; width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .gh-nav-links { display: none; }
  .gh-nav-right .gh-btn:not(.gh-hamburger) { display: none; }
  .gh-hamburger { display: flex; }
  .gh-nav-right { gap: .25rem; }
}

/* ── Breadcrumb ── */
.gh-breadcrumb-bar {
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--border);
  padding: .5rem 0;
}
.gh-breadcrumb-bar .breadcrumb {
  background: transparent !important;
  margin: 0;
  padding: 0;
  font-size: .8125rem;
}
.gh-breadcrumb-bar .breadcrumb-item a { color: var(--muted) !important; }
.gh-breadcrumb-bar .breadcrumb-item.active { color: var(--muted) !important; }
.gh-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.2) !important; }

/* ── Main ── */
#gh-main { background: var(--bg); min-height: 60vh; }

/* ── Cards / Panels ── */
.panel, .card, .well {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
.panel-heading, .card-header {
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .02em;
  padding: .875rem 1.25rem !important;
}
.panel-body { padding: 1.25rem !important; }
.panel-footer, .card-footer {
  background: rgba(255,255,255,.02) !important;
  border-top: 1px solid var(--border) !important;
}

/* ── List groups ── */
.list-group-item {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  transition: background .15s;
}
.list-group-item:hover { background: rgba(255,255,255,.03) !important; }
.list-group-item.active {
  background: rgba(99,102,241,.15) !important;
  border-color: rgba(99,102,241,.3) !important;
  color: #a5b4fc !important;
}

/* ── Tables ── */
.table { color: var(--text) !important; }
.table thead th {
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.table td, .table th { border-color: var(--border) !important; color: var(--text) !important; }
.table-striped tbody tr:nth-of-type(odd) td { background: rgba(255,255,255,.02) !important; }
.table-hover tbody tr:hover td { background: rgba(99,102,241,.05) !important; }

/* ── Forms ── */
.form-control, .custom-select, select {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-btn) !important;
  color: var(--text) !important;
  font-family: inherit !important;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .custom-select:focus, select:focus {
  background: var(--surface2) !important;
  border-color: var(--indigo) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
  color: #fff !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--muted) !important; }

label { color: var(--muted) !important; font-size: .875rem; margin-bottom: .375rem; display: block; }
.form-text, .help-block { color: var(--muted) !important; font-size: .8125rem; }

.input-group-text, .input-group-addon {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

.has-error .form-control { border-color: var(--red) !important; }
.has-error .control-label, .has-error .help-block { color: #fca5a5 !important; }
.has-success .form-control { border-color: var(--green) !important; }

/* ── Bootstrap buttons → GameHost style ── */
.btn {
  font-family: inherit !important;
  font-weight: 600 !important;
  border-radius: var(--radius-btn) !important;
  transition: all .2s !important;
  font-size: .875rem !important;
}
.btn-primary, .btn-info {
  background: var(--indigo) !important;
  border-color: var(--indigo) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-info:hover {
  background: var(--indigo-d) !important;
  border-color: var(--indigo-d) !important;
  transform: translateY(-1px);
}
.btn-success {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}
.btn-danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}
.btn-warning {
  background: rgba(245,158,11,.15) !important;
  border-color: rgba(245,158,11,.3) !important;
  color: #fcd34d !important;
}
.btn-default, .btn-secondary {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.btn-default:hover, .btn-secondary:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.2) !important;
}
.btn-link { color: var(--indigo) !important; }
.btn-link:hover { color: #818cf8 !important; }

/* ── Alerts ── */
.alert { border-radius: var(--radius-btn) !important; font-size: .875rem; border: none !important; }
.alert-success { background: rgba(74,222,128,.1) !important; color: #86efac !important; border-left: 3px solid var(--green) !important; }
.alert-danger, .alert-error { background: rgba(248,113,113,.1) !important; color: #fca5a5 !important; border-left: 3px solid var(--red) !important; }
.alert-warning { background: rgba(250,204,21,.1) !important; color: #fde047 !important; border-left: 3px solid var(--yellow) !important; }
.alert-info { background: rgba(99,102,241,.1) !important; color: #a5b4fc !important; border-left: 3px solid var(--indigo) !important; }

/* ── Badges ── */
.badge, .label {
  font-size: .7rem !important;
  font-weight: 600 !important;
  border-radius: 99px !important;
  padding: 2px 8px !important;
}
.badge-primary, .label-primary { background: rgba(99,102,241,.2) !important; color: #a5b4fc !important; }
.badge-success, .label-success { background: rgba(74,222,128,.15) !important; color: #86efac !important; }
.badge-danger, .label-danger { background: rgba(248,113,113,.15) !important; color: #fca5a5 !important; }
.badge-warning, .label-warning { background: rgba(250,204,21,.15) !important; color: #fde047 !important; }
.badge-info { background: rgba(99,102,241,.2) !important; color: #a5b4fc !important; }

/* ── Modals ── */
.modal-content {
  background: #13131f !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.7) !important;
}
.modal-header { border-bottom: 1px solid var(--border) !important; padding: 1.25rem !important; }
.modal-footer { border-top: 1px solid var(--border) !important; padding: 1rem 1.25rem !important; }
.modal-title { color: #fff !important; font-weight: 700 !important; }
.close { color: var(--muted) !important; text-shadow: none !important; opacity: 1 !important; font-size: 1.5rem !important; background: none; border: none; cursor: pointer; }
.close:hover { color: #fff !important; }
.modal-backdrop { background: rgba(0,0,0,.75) !important; }

/* ── Pagination ── */
.page-link {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
}
.page-link:hover { background: rgba(99,102,241,.12) !important; color: #fff !important; border-color: var(--indigo) !important; }
.page-item.active .page-link { background: var(--indigo) !important; border-color: var(--indigo) !important; color: #fff !important; }
.page-item.disabled .page-link { color: var(--muted) !important; opacity: .5; }

/* ── Tabs ── */
.nav-tabs { border-bottom: 1px solid var(--border) !important; }
.nav-tabs .nav-link { color: var(--muted) !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: .625rem 1rem !important; font-size: .875rem; font-weight: 500; }
.nav-tabs .nav-link:hover { color: #fff !important; border-bottom-color: rgba(99,102,241,.4) !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #fff !important; border-bottom-color: var(--indigo) !important; background: transparent !important; }
.tab-content { padding: 1.5rem 0; }

/* ── Sidebar ── */
.gh-sidebar .panel { margin-bottom: 1rem; }
.gh-sidebar .list-group-item { font-size: .875rem; padding: .625rem 1rem !important; }

/* ── Progress ── */
.progress { background: rgba(255,255,255,.08) !important; border-radius: 99px; height: 6px !important; }
.progress-bar { background: var(--indigo) !important; border-radius: 99px; }

/* ── Status labels ── */
.status-active, .text-success-status { color: #86efac !important; }
.status-pending, .text-warning-status { color: #fde047 !important; }
.status-suspended, .text-danger-status { color: #fca5a5 !important; }

/* ── FOOTER ── */
.gh-footer {
  background: #0d0d14;
  border-top: 1px solid var(--border);
  padding: 4rem 0 0;
  margin-top: 4rem;
}

.gh-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

@media (max-width: 768px) {
  .gh-footer-grid { grid-template-columns: 1fr 1fr; }
  .gh-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .gh-footer-grid { grid-template-columns: 1fr; }
}

.gh-footer-brand .gh-logo { margin-bottom: 1rem; }
.gh-footer-tagline { font-size: .875rem; color: rgba(255,255,255,.45); line-height: 1.6; max-width: 260px; }

.gh-footer-heading {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.35);
  margin-bottom: 1rem;
}

.gh-footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.gh-footer-links a { font-size: .875rem; color: rgba(255,255,255,.55) !important; transition: color .15s; }
.gh-footer-links a:hover { color: #fff !important; }

.gh-footer-bottom {
  border-top: 1px solid var(--border);
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.gh-footer-bottom p { font-size: .8125rem; color: rgba(255,255,255,.3); margin: 0; }

.gh-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  color: var(--muted) !important;
  font-size: .8125rem;
  padding: .375rem .75rem;
  cursor: pointer;
  transition: border-color .15s;
}
.gh-lang-btn:hover { border-color: rgba(255,255,255,.2); color: #fff !important; }

/* ── Misc utils ── */
.text-muted, .text-light-muted { color: var(--muted) !important; }
.text-primary { color: var(--indigo) !important; }
.text-success { color: var(--green) !important; }
.text-danger  { color: var(--red) !important; }
.text-warning { color: var(--yellow) !important; }
.bg-light     { background: var(--surface) !important; }
.bg-white     { background: var(--surface) !important; }
.border       { border-color: var(--border) !important; }
hr            { border-color: var(--border) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,.6); }

/* ── Autofill fix ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* ── Return to admin button ── */
.btn-return-to-admin {
  background: rgba(99,102,241,.15) !important;
  border: 1px solid rgba(99,102,241,.3) !important;
  color: #a5b4fc !important;
  border-radius: var(--radius-btn) !important;
  padding: .5rem 1rem !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
}

/* ── WHMCS topbar (logged in) ── */
.btn-active-client {
  background: rgba(99,102,241,.12) !important;
  border: 1px solid rgba(99,102,241,.25) !important;
  color: #a5b4fc !important;
  border-radius: var(--radius-btn) !important;
  font-size: .8125rem !important;
}

/* ── ============================================================
   CLIENT AREA DASHBOARD
   ============================================================ */

/* Stats tiles (Services / Domains / Tickets / Invoices) */
.tiles { margin-bottom: 24px !important; }

.tiles .tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  color: var(--text) !important;
  transition: background .2s !important;
  position: relative !important;
  overflow: hidden !important;
}

.tiles .tile:hover { background: var(--surface2) !important; }

.tiles .row.no-gutters .col-6:first-child .tile { border-radius: var(--radius) 0 0 var(--radius) !important; }
.tiles .row.no-gutters .col-6:last-child .tile,
.tiles .row.no-gutters .col-xl-3:last-child .tile { border-radius: 0 var(--radius) var(--radius) 0 !important; }

.tiles .tile i {
  font-size: 1.6rem !important;
  margin-bottom: 8px !important;
  color: var(--muted) !important;
}

.tiles .tile .stat {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
}

.tiles .tile .title {
  font-size: .75rem !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-top: 4px !important;
}

/* Colored accent bar at bottom */
.tiles .tile .highlight {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
}
.tiles .tile .highlight.bg-color-blue   { background: #3b82f6 !important; }
.tiles .tile .highlight.bg-color-green  { background: #4ade80 !important; }
.tiles .tile .highlight.bg-color-red    { background: #f87171 !important; }
.tiles .tile .highlight.bg-color-gold   { background: #facc15 !important; }

/* Client home cards */
.client-home-cards .card,
.client-home-cards .panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 20px !important;
}

.client-home-cards .card-header,
.client-home-cards .panel-heading {
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 20px !important;
}

.client-home-cards .card-header h3,
.client-home-cards .card-title {
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.client-home-cards .card-header a,
.client-home-cards .card-header .btn-link {
  color: var(--indigo) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.client-home-cards .card-body,
.client-home-cards .panel-body {
  background: transparent !important;
  padding: 16px 20px !important;
  color: var(--muted) !important;
}

/* "Place an order" link */
.client-home-cards .card-body a,
.client-home-cards .panel-body a {
  color: var(--indigo) !important;
}

/* ── WHMCS sidebar (Your Info / Contacts / Shortcuts) ── */
.gh-sidebar .panel,
.gh-sidebar .card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 16px !important;
}

.gh-sidebar .panel-heading,
.gh-sidebar .card-header {
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.gh-sidebar .panel-body,
.gh-sidebar .card-body {
  background: transparent !important;
  padding: 12px 16px !important;
}

/* Sidebar Update button → indigo */
.gh-sidebar .btn,
.gh-sidebar .btn-success,
.gh-sidebar .btn-primary {
  background: var(--indigo) !important;
  border-color: var(--indigo) !important;
  color: #fff !important;
  border-radius: var(--radius-btn) !important;
  font-size: .8rem !important;
  width: 100% !important;
  margin-bottom: 6px !important;
}

/* Sidebar shortcut links */
.gh-sidebar .list-group-item,
.gh-sidebar a.list-group-item {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  padding: 8px 0 !important;
  transition: color .15s !important;
}
.gh-sidebar .list-group-item:hover { color: #fff !important; }

/* ── card-accent borders ── */
.card-accent-blue   { border-top: 2px solid #3b82f6 !important; }
.card-accent-red    { border-top: 2px solid #f87171 !important; }
.card-accent-green  { border-top: 2px solid #4ade80 !important; }
.card-accent-gold   { border-top: 2px solid #facc15 !important; }
.card-accent-purple { border-top: 2px solid var(--indigo) !important; }

/* ── Recent News / Support items ── */
.news-item, .support-ticket-row {
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 0 !important;
  color: var(--text) !important;
}

/* ── Domain search widget ── */
.domain-search-wrap input,
.register-domain-widget input {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px 0 0 8px !important;
}
.domain-search-wrap .btn-success,
.register-domain-widget .btn {
  background: var(--indigo) !important;
  border-color: var(--indigo) !important;
  color: #fff !important;
}

/* ── Table in client area ── */
.table-striped tbody tr:nth-of-type(odd) td { background: rgba(255,255,255,.025) !important; }
.table-hover tbody tr:hover td { background: rgba(99,102,241,.06) !important; }

/* All green buttons → indigo */
.btn-success {
  background: var(--indigo) !important;
  border-color: var(--indigo) !important;
  color: #fff !important;
}

/* ===== GGameHost brand re-theme — appended overrides (real Design System tokens) ===== */
:root{
  --bg:#06070D; --surface:#131726; --surface2:#1B2032;
  --border:rgba(255,255,255,.10); --text:#F4F6FF; --muted:#8B91AC;
  --indigo:#7C3AED; --indigo-d:#6D28D9; --blue:#2563EB; --green:#22D3A5; --red:#F25C6E; --yellow:#F5B23E;
  --radius:16px; --radius-btn:10px;
}
html,body{
  background:radial-gradient(60% 50% at 50% -8%,rgba(124,58,237,.16),transparent 60%),#06070D !important;
  color:#C2C8DE !important;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif !important;
}
h1,h2,h3,h4,h5,.panel-title,.gh-logo,.gh-footer-heading{font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif !important;letter-spacing:-.015em;color:#F4F6FF;}
code,pre,.price,.product-pricing,.invoiceamount{font-family:'JetBrains Mono',ui-monospace,monospace !important;}
a{color:#38D0E8;} a:hover{color:#4DE3BC;}
/* primary CTAs -> brand gradient + glow */
.gh-btn-primary,.btn-primary,.btn-success,#order-standard_cart .btn-primary,.checkout-btn,button[type=submit].btn-primary,input[type=submit].btn-primary{
  background:linear-gradient(100deg,#7C3AED 0%,#2563EB 52%,#06B6D4 100%) !important;border:none !important;color:#fff !important;
  box-shadow:0 0 0 1px rgba(124,58,237,.4),0 12px 30px rgba(124,58,237,.30) !important;
}
.gh-btn-primary:hover,.btn-primary:hover,.btn-success:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff !important;}
.gh-btn-outline{border-color:rgba(255,255,255,.18) !important;color:#F4F6FF !important;}
.gh-btn-outline:hover{background:rgba(255,255,255,.06) !important;color:#fff !important;}
/* prices in mint */
.price,.product-pricing,.amount,.total-due,.cartsubtotal,.carttotal,.order-total{color:#4DE3BC !important;}
/* inputs */
.form-control,.form-select,select,textarea,input[type=text],input[type=email],input[type=password],input[type=number]{
  background:#131726 !important;border:1px solid rgba(255,255,255,.10) !important;color:#F4F6FF !important;border-radius:10px !important;
}
.form-control:focus,.form-select:focus{border-color:#7C3AED !important;box-shadow:0 0 0 3px rgba(79,134,242,.40) !important;}
/* glass surfaces */
.card,.panel,.well,.order-summary,.summary-container,.product,.cartbox,.list-group-item{
  background:rgba(22,27,45,.55) !important;border:1px solid rgba(255,255,255,.10) !important;border-radius:16px !important;
}
.panel-heading,.card-header{background:transparent !important;border-bottom:1px solid rgba(255,255,255,.06) !important;}
/* store product cards */
.product{padding:1.25rem !important;transition:transform .18s ease,border-color .18s ease !important;}
.product:hover{transform:translateY(-3px);border-color:rgba(124,58,237,.5) !important;box-shadow:0 16px 40px rgba(0,0,0,.45) !important;}
/* alerts retoned */
.alert-info{background:rgba(56,208,232,.10) !important;border-left:3px solid #38D0E8 !important;color:#9fe7f2 !important;}
.alert-success{background:rgba(34,211,165,.12) !important;border-left:3px solid #22D3A5 !important;color:#4DE3BC !important;}
.text-success{color:#4DE3BC !important;} .text-primary{color:#9460F0 !important;}
/* tables */
.table,.table td,.table th{color:#C2C8DE !important;border-color:rgba(255,255,255,.06) !important;}
.table thead th{color:#8B91AC !important;}
/* WHMCS content layout (works with marketing chrome) */
.gh-layout{display:flex;gap:2rem;align-items:flex-start}
.gh-sidebar{flex:0 0 250px;max-width:250px}
.gh-content-with-sidebar{flex:1 1 auto;min-width:0}
.gh-content-full{width:100%}
#gh-main p,#gh-main td,#gh-main label,#gh-main li,#gh-main dd,#gh-main .text-muted,#gh-main small{color:var(--text-2)}
#gh-main h1,#gh-main h2,#gh-main h3,#gh-main h4{color:#F4F6FF}
@media(max-width:900px){.gh-layout{flex-direction:column}.gh-sidebar{flex:none;max-width:none;width:100%}}
/* keep WHMCS Bootstrap container readable width under our nav */
#gh-main .container{max-width:1100px}

/* Fix 2026-06-19: Bootstrap breadcrumb default light bg -> transparent + light text (gh-breadcrumb-bar wrapper not in markup) */
.breadcrumb{background:transparent !important;padding:0 !important;border-radius:0 !important;margin-bottom:0 !important}
.breadcrumb,.breadcrumb-item,.breadcrumb-item a,.breadcrumb-item.active{color:var(--muted) !important}
.breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.25) !important}

/* ===== GGameHost bespoke client dashboard (2026-06-19) ===== */
.gg-dash{max-width:1120px;margin:0 auto}
.gg-hero{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;padding:1.7rem 1.9rem;border-radius:18px;margin-bottom:1.6rem;background:radial-gradient(120% 160% at 0% 0%,rgba(124,58,237,.20),transparent 60%),radial-gradient(120% 160% at 100% 100%,rgba(6,182,212,.16),transparent 55%),var(--surface,#12121a);border:1px solid var(--border,rgba(255,255,255,.08))}
.gg-hero-text h1{font-size:1.75rem;font-weight:800;margin:0 0 .25rem;color:var(--text,#fff);line-height:1.15}
.gg-hero-text p{margin:0;color:var(--muted,#9aa3bd)}
.gg-hero-stats{display:flex;gap:1.4rem}
.gg-stat{text-align:center;min-width:80px}
.gg-stat-n{display:block;font-size:1.8rem;font-weight:800;color:var(--text,#fff);line-height:1}
.gg-stat-l{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#9aa3bd);margin-top:.25rem}
.gg-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-bottom:2.1rem}
.gg-qbtn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1rem;border-radius:12px;background:var(--surface,#12121a);border:1px solid var(--border,rgba(255,255,255,.08));color:var(--text,#fff)!important;font-weight:600;text-decoration:none!important;transition:transform .15s,border-color .15s}
.gg-qbtn:hover{transform:translateY(-2px);border-color:rgba(124,58,237,.55)}
.gg-qbtn-primary{background:linear-gradient(135deg,#7C3AED,#2563EB)!important;border:0!important}
.gg-sec-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 1rem}
.gg-sec-head h2{font-size:1.2rem;font-weight:700;margin:0;color:var(--text,#fff)}
.gg-link{color:#9CB4FF!important;text-decoration:none!important;font-weight:600;font-size:.9rem}
.gg-servers{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem;margin-bottom:2.1rem}
.gg-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;text-decoration:none!important;background:var(--surface,#12121a);border:1px solid var(--border,rgba(255,255,255,.08));transition:transform .15s,border-color .15s,box-shadow .15s}
.gg-card:hover{transform:translateY(-3px);border-color:rgba(124,58,237,.55);box-shadow:0 14px 32px rgba(0,0,0,.32)}
.gg-card-art{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#7C3AED,#2563EB,#06B6D4)}
.gg-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.gg-badge{position:absolute;top:.6rem;right:.6rem;padding:.22rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;background:rgba(0,0,0,.55);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.gg-badge.gg-active{background:rgba(34,211,165,.92);color:#04231b}
.gg-badge.gg-suspended{background:rgba(239,68,68,.92)}
.gg-badge.gg-pending{background:rgba(245,180,60,.94);color:#241a00}
.gg-card-body{padding:.9rem 1.05rem 1.1rem}
.gg-card-body h3{font-size:1.02rem;font-weight:700;margin:0 0 .55rem;color:var(--text,#fff)}
.gg-ip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;color:var(--text,#fff);margin-bottom:.3rem}
.gg-ip-muted{color:var(--muted,#9aa3bd)}
.gg-meta{font-size:.8rem;color:var(--muted,#9aa3bd);margin-bottom:.85rem}
.gg-manage{display:inline-flex;align-items:center;gap:.4rem;color:#9CB4FF;font-weight:600;font-size:.9rem}
.gg-empty{text-align:center;padding:3rem 1rem;border-radius:16px;border:1px dashed var(--border,rgba(255,255,255,.14));margin-bottom:2.1rem}
.gg-empty-emoji{font-size:2.6rem;margin-bottom:.5rem}
.gg-empty h3{margin:0 0 .3rem;color:var(--text,#fff)}
.gg-empty p{color:var(--muted,#9aa3bd);margin:0 0 1.15rem}
.gg-empty .gg-qbtn{display:inline-flex}
.gg-mini-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.gg-mini{padding:1.15rem 1.25rem;border-radius:14px;background:var(--surface,#12121a);border:1px solid var(--border,rgba(255,255,255,.08))}
.gg-mini-head{font-weight:700;color:var(--text,#fff);margin-bottom:.5rem}
.gg-mini p{color:var(--muted,#9aa3bd);margin:0 0 .6rem}
@media(max-width:768px){.gg-quick{grid-template-columns:1fr 1fr}.gg-hero{flex-direction:column;align-items:flex-start}.gg-mini-row{grid-template-columns:1fr}}
@media(max-width:480px){.gg-quick{grid-template-columns:1fr}}

/* ===== GGameHost bespoke auth (login/register) 2026-06-19 ===== */
.gg-auth{display:grid;grid-template-columns:1fr 1fr;max-width:960px;margin:1.5rem auto;border-radius:20px;overflow:hidden;border:1px solid var(--border,rgba(255,255,255,.08));background:var(--surface,#12121a)}
.gg-auth-aside{padding:2.6rem;background:radial-gradient(130% 130% at 0% 0%,rgba(124,58,237,.32),transparent 60%),radial-gradient(130% 130% at 100% 100%,rgba(6,182,212,.24),transparent 55%),#0c0f1a;display:flex;flex-direction:column;justify-content:center}
.gg-auth-logo img{height:38px;margin-bottom:1.6rem}
.gg-auth-aside h2{font-size:1.6rem;font-weight:800;color:#fff;margin:0 0 .55rem;line-height:1.15}
.gg-auth-aside p{color:var(--muted,#9aa3bd);margin:0 0 1.5rem}
.gg-auth-feats{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.gg-auth-feats li{display:flex;align-items:center;gap:.65rem;color:var(--text,#fff);font-weight:500}
.gg-auth-feats i{color:#22D3A5;width:20px;text-align:center}
.gg-auth-main{padding:2.6rem}
.gg-auth-title{font-size:1.5rem;font-weight:800;margin:0 0 .25rem;color:var(--text,#fff)}
.gg-auth-sub{color:var(--muted,#9aa3bd);margin:0 0 1.5rem}
.gg-auth-submit{width:100%;margin:.4rem 0 .9rem}
.gg-remember{display:flex;align-items:center;gap:.5rem;color:var(--muted,#9aa3bd);font-size:.9rem;margin:0}
.gg-auth-foot{margin-top:1.3rem;padding-top:1.15rem;border-top:1px solid var(--border,rgba(255,255,255,.08));color:var(--muted,#9aa3bd);font-size:.9rem}
@media(max-width:768px){.gg-auth{grid-template-columns:1fr;margin:0 auto}.gg-auth-aside{display:none}.gg-auth-main{padding:1.8rem}}

/* ===== GGameHost service detail hero + register + polish (2026-06-19) ===== */
.gg-svc-hero{position:relative;border-radius:16px;overflow:hidden;margin-bottom:1.5rem;min-height:170px;background:linear-gradient(135deg,#7C3AED,#2563EB,#06B6D4);border:1px solid var(--border,rgba(255,255,255,.08))}
.gg-svc-hero.has-art::before{content:"";position:absolute;inset:0;background:var(--art) center/cover no-repeat}
.gg-svc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,18,.40),rgba(8,10,18,.90))}
.gg-svc-hero-inner{position:relative;z-index:1;padding:1.6rem 1.8rem;display:flex;flex-direction:column;justify-content:flex-end;min-height:170px}
.gg-svc-status{align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .7rem;border-radius:999px;font-size:.78rem;font-weight:700;background:rgba(0,0,0,.5);color:#fff;margin-bottom:.6rem}
.gg-svc-status i{font-size:.5rem}
.gg-svc-status.gg-active i{color:#22D3A5}.gg-svc-status.gg-suspended i{color:#ef4444}.gg-svc-status.gg-pending i{color:#f5b43c}
.gg-svc-hero h1{font-size:1.7rem;font-weight:800;margin:0;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.gg-svc-sub{color:rgba(255,255,255,.85);margin-top:.15rem}
.gg-svc-ip{margin-top:.7rem;font-family:ui-monospace,Menlo,monospace;color:#fff;background:rgba(0,0,0,.42);display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .75rem;border-radius:8px;align-self:flex-start;font-size:.9rem}
.product-status{display:none !important}
.gg-reg-head{text-align:center;max-width:640px;margin:.5rem auto 1.6rem}
.gg-reg-logo img{height:40px;margin-bottom:1rem}
.gg-reg-head h1{font-size:1.7rem;font-weight:800;margin:0 0 .3rem;color:var(--text,#fff)}
.gg-reg-head p{color:var(--muted,#9aa3bd);margin:0}

/* ===== GGameHost sidebar polish + table-list white-strip fix (2026-06-21) ===== */

/* --- Left sidebar panels (Your Info / Contacts / Shortcuts / Status filter / Billing) --- */
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar { margin-bottom: 14px !important; border-radius: 14px !important; overflow: hidden; }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-header {
  padding: 11px 15px !important;
  background: var(--surface2,#1a1a26) !important;
  border-bottom: 1px solid var(--border,rgba(255,255,255,.08)) !important;
}
/* headings were rendering at default h3 size — shrink to a clean uppercase label */
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-title {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #aab1c8 !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-title > i:not(.card-minimise) {
  font-size: .82rem !important;
  color: var(--indigo,#6366f1) !important;
  margin-right: .3rem !important;
}
/* collapse chevron: was large/loud — make it tiny + subtle, full size on hover */
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-minimise {
  font-size: .58rem !important;
  color: rgba(255,255,255,.25) !important;
  margin-left: auto !important;
  transition: color .15s, transform .2s;
}
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-header:hover .card-minimise { color: rgba(255,255,255,.6) !important; }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-title .badge {
  font-size: .62rem !important; font-weight: 700 !important;
  margin-left: auto !important; background: var(--indigo,#6366f1) !important; color: #fff !important;
}
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-title .card-minimise + .badge,
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-title .badge + .card-minimise { margin-left: .4rem !important; }

:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .collapsable-card-body > .card-body,
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-body { padding: 12px 15px !important; font-size: .85rem; color: var(--text,#fff); }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-body strong, :is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .card-body b { color: #fff; }

/* sidebar shortcut / nav links */
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .list-group { border-radius: 0 !important; }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .list-group-item {
  padding: 9px 15px !important;
  font-size: .82rem !important;
  color: #aeb6cf !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.045) !important;
}
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .list-group-item:first-child { border-top: 0 !important; }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .list-group-item:hover { color: #fff !important; background: rgba(255,255,255,.04) !important; }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .list-group-item.active { color: #c7d2fe !important; background: rgba(99,102,241,.16) !important; }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: .55rem; }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .sidebar-menu-item-icon { color: #6b7390 !important; width: 1.05rem; text-align: center; font-size: .8rem; }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .list-group-item:hover .sidebar-menu-item-icon { color: var(--indigo,#6366f1) !important; }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .sidebar-menu-item-badge { margin-left: auto; }

/* Update / New Contact buttons */
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .card-sidebar .btn {
  font-size: .78rem !important;
  padding: .45rem .8rem !important;
  border-radius: 9px !important;
}

/* Invoices "Status" filter list → compact single-line rows */
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .view-filter-btns .list-group-item { display: flex !important; align-items: center !important; gap: .5rem !important; }
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .view-filter-btns .list-group-item .badge {
  margin-left: auto !important; background: rgba(255,255,255,.08) !important; color: #c2c8de !important;
}
:is(.gh-sidebar,.gh-sidebar-secondary-mobile) .view-filter-btns .list-group-item.active .badge { background: var(--indigo,#6366f1) !important; color: #fff !important; }

/* --- White-strip fix: base theme.min.css paints all .table-list cells solid #fff --- */
/* affects invoices, quotes, emails, support ticket list, affiliates */
#gh-main table.table-list > tbody > tr > td,
#gh-main .table-list > tbody > tr > td {
  background-color: transparent !important;
  color: var(--text,rgba(255,255,255,.87)) !important;
  border-color: rgba(255,255,255,.06) !important;
}
#gh-main table.table-list > tbody > tr:hover > td { background-color: rgba(99,102,241,.06) !important; }
#gh-main table.table-list thead th {
  background-color: var(--surface2,#1a1a26) !important;
  color: #8b91ac !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
#gh-main table.table-list td.dataTables_empty {
  background-color: transparent !important;
  color: #8b91ac !important;
  padding: 2.2rem 1rem !important;
  font-style: italic;
}

/* footer.tpl renders a 2nd copy of the secondary sidebar meant for mobile only —
   it was showing on desktop too (duplicate panels under every page). Hide on
   desktop; on mobile show it (below content) and drop the left aside. */
.gh-sidebar-secondary-mobile { display: none; }
@media (max-width: 900px) {
  .gh-sidebar { display: none !important; }
  .gh-sidebar-secondary-mobile { display: block; margin-top: 1.5rem; }
}

/* ===== GGameHost fixes round 2 (2026-06-21): header buttons, ticket editor, checkout ===== */

/* 1. Header "My Account / logout / Login" — WHMCS .btn{color:#212529} overrides the
      marketing .btn-ghost (source order), leaving them dark/unreadable on the dark nav. */
.whmcs-page header.nav .nav-cta .btn-ghost,
.whmcs-page header.nav .nav-cta a.btn-ghost {
  color: #E6E9F5 !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
.whmcs-page header.nav .nav-cta .btn-ghost:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.30) !important;
}

/* 2. Support-ticket markdown editor — base theme paints the toolbar, textarea and
      preview solid white (#fff) with #ddd borders and #333 preview text. Re-theme dark. */
#gh-main .md-editor,
#gh-main .md-editor.active {
  border: 1px solid var(--border,rgba(255,255,255,.08)) !important;
  border-radius: 12px !important;
  background: var(--surface2,#1a1a26) !important;
  overflow: hidden;
}
#gh-main .md-editor > .btn-toolbar {
  background-color: var(--surface2,#1a1a26) !important;
  border-bottom: 1px solid var(--border,rgba(255,255,255,.08)) !important;
  padding: .5rem !important;
}
#gh-main .md-editor > textarea.markdown-editor {
  background-color: #131726 !important;
  color: #F4F6FF !important;
  border-top: 1px solid var(--border,rgba(255,255,255,.08)) !important;
  border-bottom: 1px solid var(--border,rgba(255,255,255,.08)) !important;
}
#gh-main .md-editor .md-footer,
#gh-main .md-editor > .md-footer {
  background: var(--surface2,#1a1a26) !important;
  color: var(--muted,rgba(255,255,255,.45)) !important;
  border-top: 1px solid var(--border,rgba(255,255,255,.08)) !important;
}
/* preview pane (shown on "Preview") → dark + light text */
#gh-main .md-editor .md-preview {
  background: #131726 !important;
  color: #C2C8DE !important;
  padding: 15px !important;
}
#gh-main .md-editor .md-preview h1,
#gh-main .md-editor .md-preview h2,
#gh-main .md-editor .md-preview h3,
#gh-main .md-editor .md-preview h4 { color: #F4F6FF !important; }
#gh-main .md-editor .md-preview pre { background-color: #0d1018 !important; color: #f8f8f8 !important; }
#gh-main .md-editor .md-preview blockquote { border-left-color: rgba(255,255,255,.18) !important; color: var(--muted,#9aa3bd) !important; }
#gh-main .md-editor .md-preview table,
#gh-main .md-editor .md-preview table > thead > tr > th,
#gh-main .md-editor .md-preview table > tbody > tr > td {
  background-color: var(--surface,#12121a) !important;
  border-color: var(--border,rgba(255,255,255,.1)) !important;
  color: #C2C8DE !important;
}
/* attachments: Bootstrap custom-file (Choose file / Browse) + default buttons → dark */
#gh-main .custom-file-label {
  background: #131726 !important;
  color: #C2C8DE !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
#gh-main .custom-file-label::after {
  background: var(--surface2,#1a1a26) !important;
  color: #C2C8DE !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
}
#gh-main .btn-default {
  background: rgba(255,255,255,.06) !important;
  color: #E6E9F5 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
#gh-main .btn-default:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; border-color: rgba(255,255,255,.30) !important; }

/* 3. Checkout (standard_cart) "CHOOSE ACCOUNT" box — base css paints the account rows
      solid white/#f6f6f6. Re-theme dark with an indigo-tinted selected row. */
#order-standard_cart .account-select-container { border-right-color: var(--border,rgba(255,255,255,.08)) !important; }
#order-standard_cart .account-select-container div.account {
  background: var(--surface,#12121a) !important;
  border: 1px solid var(--border,rgba(255,255,255,.08)) !important;
  color: var(--text,#fff) !important;
}
#order-standard_cart .account-select-container div.account.active {
  background: rgba(99,102,241,.14) !important;
  border-color: rgba(99,102,241,.45) !important;
}
#order-standard_cart .account-select-container div.account .address,
#order-standard_cart .account-select-container div.account strong { color: #F4F6FF !important; }

/* ===== GGameHost fixes round 3 (2026-06-28): chrome alignment + footer + cart header ===== */

/* R4 — kill the layout "shift": WHMCS Bootstrap redefines .container (1140px / 15px)
   AFTER theme.css, so the topbar / nav / footer no longer line up with the marketing
   pages or with the page content. Pin EVERY container on WHMCS pages to the marketing
   width + gutter so the nav, content and footer share one consistent left/right edge. */
.whmcs-page .topbar > .container,
.whmcs-page header.nav .container,
.whmcs-page #gh-main > .container,
.whmcs-page footer.footer > .container,
.whmcs-page .container {
  max-width: var(--container, 1200px) !important;
  padding-inline: var(--gutter, clamp(1.25rem, 4vw, 2.5rem)) !important;
  width: 100% !important;
}

/* R2 — footer renders gray on WHMCS pages (base theme.min.css paints .footer light,
   loaded after theme.css). Force the same near-black marketing footer everywhere. */
.whmcs-page footer.footer {
  background: var(--ink-950, #06070D) !important;
  border-top: 1px solid var(--border-1, rgba(255,255,255,.10)) !important;
}
.whmcs-page footer.footer .footer-grid,
.whmcs-page footer.footer .footer-bottom { background: transparent !important; }
.whmcs-page footer.footer h4 { color: var(--text-1, #F4F6FF) !important; }
.whmcs-page footer.footer a { color: #A6AEC6 !important; }
.whmcs-page footer.footer a:hover { color: var(--text-1, #fff) !important; }
.whmcs-page footer.footer .footer-bottom {
  color: #8E96AE !important;
  border-top: 1px solid var(--border-soft, rgba(255,255,255,.06)) !important;
}

/* Cart "Product/Options … Price/Cycle" header bar — base order-form css paints it
   bright blue. Re-tone to the dark surface used across the theme. */
#gh-main .view-cart-items-header,
.whmcs-page .view-cart-items-header,
#order-standard_cart .view-cart-items-header {
  background: var(--surface2, #1B2032) !important;
  color: var(--text-1, #F4F6FF) !important;
  border: 1px solid var(--border, rgba(255,255,255,.10)) !important;
  border-radius: 10px !important;
}
#gh-main .view-cart-items-header a,
.whmcs-page .view-cart-items-header { font-weight: 600; }

/* ===== GGameHost contact page (2026-06-28) ===== */
.gg-contact{display:grid;grid-template-columns:0.85fr 1.15fr;gap:1.5rem;max-width:1040px;margin:0 auto;align-items:start}
.gg-contact-info{padding:1.9rem;border-radius:16px;background:radial-gradient(130% 130% at 0% 0%,rgba(124,58,237,.18),transparent 55%),var(--surface,#131726);border:1px solid var(--border,rgba(255,255,255,.10))}
.gg-contact-title{font-size:1.6rem;font-weight:800;margin:0 0 .5rem;color:#F4F6FF}
.gg-contact-lead{color:var(--muted,#8B91AC);margin:0 0 1.5rem;font-size:.95rem;line-height:1.6}
.gg-contact-list{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:1rem}
.gg-contact-list li{display:flex;gap:.85rem;align-items:flex-start}
.gg-ci-icon{font-size:1.15rem;line-height:1.5;flex:none}
.gg-contact-list li > div{display:flex;flex-direction:column;min-width:0}
.gg-ci-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted,#8B91AC);font-weight:700;margin-bottom:.1rem}
.gg-ci-value{color:#E6E9F5}
.gg-contact-list a{color:#38D0E8;font-weight:600;word-break:break-word}
.gg-contact-list a:hover{color:#4DE3BC}
.gg-contact-kb{display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;padding:.7rem 1rem;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--border,rgba(255,255,255,.10));color:#E6E9F5 !important;font-weight:600;font-size:.9rem;text-decoration:none !important}
.gg-contact-kb:hover{border-color:rgba(124,58,237,.5);color:#fff !important}
.gg-contact-form-wrap{padding:1.9rem;border-radius:16px;background:var(--surface,#131726);border:1px solid var(--border,rgba(255,255,255,.10))}
.gg-contact-form .form-group{margin-bottom:1.1rem}
.gg-contact-form label{display:block;margin-bottom:.4rem;color:var(--muted,#8B91AC);font-size:.85rem;font-weight:600}
.gg-contact-submit{margin-top:.4rem}
.gg-contact-submit .btn{width:100%;padding:.85rem 1rem;font-size:.95rem}
@media(max-width:768px){.gg-contact{grid-template-columns:1fr}}

/* ===== DDoS reassurance note on the cart configure page (2026-06-28) ===== */
.gg-ddos-note{display:flex;gap:.85rem;align-items:flex-start;margin:1rem 0 1.4rem;padding:.95rem 1.15rem;border-radius:12px;background:radial-gradient(120% 140% at 0% 0%,rgba(34,211,165,.14),transparent 60%),var(--surface,#131726);border:1px solid rgba(34,211,165,.30);color:var(--text,#C2C8DE);font-size:.92rem;line-height:1.55}
.gg-ddos-note strong{color:#fff;font-weight:700}
.gg-ddos-ic{font-size:1.3rem;line-height:1.3;flex:none}