/* ==========================================================
   AIM2GAME — WHMCS Portal Theme v5.0
   Font: Inter + Oswald — clear, readable, modern gaming feel
   Logo: SVG via img tag replacing Six's text logo
   ========================================================== */

/* Inter (body) + Oswald (headings) — self-hosted via WHMCS /assets path
   WHMCS ships Inter in its own assets. We reference them directly.
   Fallback stack is excellent on all systems without custom files. */
:root {
  --a2g-bg:        #0e0f11;
  --a2g-bg2:       #13151a;
  --a2g-bg3:       #181b20;
  --a2g-surface:   #1e2128;
  --a2g-surface2:  #252830;
  --a2g-border:    rgba(255,255,255,0.07);
  --a2g-border2:   rgba(255,255,255,0.13);
  --a2g-border3:   rgba(255,255,255,0.22);
  --a2g-red:       #c0392b;
  --a2g-red-h:     #e05444;
  --a2g-red-faint: rgba(192,57,43,0.08);
  --a2g-text:      #e8eaf2;
  --a2g-text2:     #b4b9c8;
  --a2g-muted:     #60657a;
  --a2g-muted2:    #8b92a8;
  --a2g-green:     #27ae60;
  --a2g-grid:      rgba(255,255,255,0.022);

  /* FONT CHANGE: Inter for body (16px base, very readable)
     Oswald for headings (condensed, strong, gaming feel) */
  --a2g-fh: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --a2g-fb: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --a2g-fm: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --a2g-r:  3px;
}

/* ── FONT IMPORTS (CDN — add to WHMCS CSP if blocked) ──
   If CSP blocks fonts.googleapis.com, download and self-host.
   Inter: https://rsms.me/inter/
   Oswald: https://fonts.google.com/specimen/Oswald */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── OPTIONAL SELF-HOSTED FONTS ─────────────────────────────
   Download woff2 from https://gwfh.mranftl.com/fonts
   Place files in: templates/aim2game/css/fonts/
   Theme works on system fallbacks without them.
   ─────────────────────────────────────────────────────────── */












/* ═══════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════ */
html, body {
  background-color: var(--a2g-bg) !important;
  color: var(--a2g-text) !important;
  font-family: var(--a2g-fb) !important;
}

/* Scanline grid overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--a2g-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--a2g-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
section, nav, div#fullpage-overlay { position: relative; z-index: 1; }

a, a:visited { color: var(--a2g-red-h) !important; text-decoration: none !important; }
a:hover, a:focus { color: #fff !important; text-decoration: none !important; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--a2g-fh) !important;
  color: #fff !important;
  line-height: 1.15 !important;
}
p { color: var(--a2g-text2); }
hr { border-color: var(--a2g-border) !important; }
code, pre {
  font-family: var(--a2g-fm) !important;
  background: var(--a2g-bg3) !important;
  border: 1px solid var(--a2g-border2) !important;
  color: var(--a2g-red-h) !important;
  border-radius: var(--a2g-r) !important;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--a2g-bg); }
::-webkit-scrollbar-thumb { background: var(--a2g-surface2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--a2g-muted); }

/* ═══════════════════════════════════════════
   SECTION#HEADER
   ═══════════════════════════════════════════ */
section#header {
  background-color: #0a0b0d !important;
  border-bottom: 1px solid var(--a2g-border) !important;
}
section#header .container { padding-top: 14px !important; padding-bottom: 14px !important; }

/* Logo */
section#header .logo-text {
  font-family: var(--a2g-fh) !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}
section#header a.logo { color: #fff !important; }

/* Top-right nav: Login / Register / View Cart */
ul.top-nav li a {
  color: var(--a2g-muted2) !important;
  font-family: var(--a2g-fb) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  transition: color 0.2s !important;
}
ul.top-nav li a:hover { color: #fff !important; }

/* View Cart button */
ul.top-nav li.primary-action a.btn {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--a2g-border3) !important;
  color: var(--a2g-text) !important;
  border-radius: var(--a2g-r) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 6px 16px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
}
ul.top-nav li.primary-action a.btn:hover {
  border-color: var(--a2g-red-h) !important;
  color: var(--a2g-red-h) !important;
  background-color: var(--a2g-red-faint) !important;
}

/* ═══════════════════════════════════════════
   SECTION#MAIN-MENU (Six's teal navbar)
   ═══════════════════════════════════════════ */
section#main-menu {
  background-color: #13151a !important;
  border-bottom: 1px solid var(--a2g-border2) !important;
}
section#main-menu .navbar,
section#main-menu .navbar-default {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
/* Nav link items */
section#main-menu .navbar-default .navbar-nav > li > a {
  color: var(--a2g-muted2) !important;
  font-family: var(--a2g-fb) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 18px 13px !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
}
section#main-menu .navbar-default .navbar-nav > li > a:hover,
section#main-menu .navbar-default .navbar-nav > li > a:focus,
section#main-menu .navbar-default .navbar-nav > li.active > a,
section#main-menu .navbar-default .navbar-nav > li.open > a {
  color: #fff !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom-color: var(--a2g-red) !important;
}

/* Dropdown menu */
section#main-menu .dropdown-menu {
  background-color: var(--a2g-surface) !important;
  background-image: none !important;
  border: 1px solid var(--a2g-border2) !important;
  border-radius: var(--a2g-r) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  padding: 6px 0 !important;
  margin-top: 0 !important;
}
section#main-menu .dropdown-menu > li > a {
  color: var(--a2g-text2) !important;
  font-size: 0.82rem !important;
  padding: 8px 18px !important;
  background-color: transparent !important;
  background-image: none !important;
  border-left: 2px solid transparent !important;
  transition: all 0.15s !important;
}
section#main-menu .dropdown-menu > li > a:hover {
  background-color: var(--a2g-surface2) !important;
  color: #fff !important;
  border-left-color: var(--a2g-red) !important;
  padding-left: 16px !important;
}
section#main-menu .dropdown-menu .divider { background-color: var(--a2g-border) !important; }

/* Mobile hamburger */
section#main-menu .navbar-toggle {
  border-color: var(--a2g-border2) !important;
  background-color: transparent !important;
}
section#main-menu .navbar-toggle .icon-bar { background-color: var(--a2g-text2) !important; }
section#main-menu .navbar-collapse {
  background-color: #0e0f11 !important;
  border-top: 1px solid var(--a2g-border) !important;
}

/* ═══════════════════════════════════════════
   SECTION#HOME-BANNER (dark blue hero → dark)
   ═══════════════════════════════════════════ */
section#home-banner {
  background-color: var(--a2g-bg2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--a2g-border) !important;
  padding: 40px 0 !important;
}
section#home-banner h2 {
  color: #fff !important;
  font-family: var(--a2g-fh) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
}
section#home-banner .form-control {
  background-color: var(--a2g-bg3) !important;
  border-color: var(--a2g-border2) !important;
  color: var(--a2g-text) !important;
}
section#home-banner .btn.search,
section#home-banner .btn.transfer {
  background-color: var(--a2g-red) !important;
  background-image: none !important;
  border-color: var(--a2g-red) !important;
  color: #fff !important;
  text-shadow: none !important;
}
section#home-banner .btn.search:hover,
section#home-banner .btn.transfer:hover {
  background-color: var(--a2g-red-h) !important;
  border-color: var(--a2g-red-h) !important;
}

/* HOME SHORTCUTS (cyan bar → dark) */
.home-shortcuts {
  background-color: var(--a2g-bg3) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--a2g-border) !important;
}
.home-shortcuts .lead { color: var(--a2g-text2) !important; }
.home-shortcuts li a {
  background-color: var(--a2g-bg2) !important;
  border: 1px solid var(--a2g-border) !important;
  border-radius: var(--a2g-r) !important;
  color: var(--a2g-text2) !important;
  transition: all 0.2s !important;
}
.home-shortcuts li a:hover {
  background-color: var(--a2g-surface) !important;
  border-color: var(--a2g-red) !important;
  color: #fff !important;
}
.home-shortcuts li i { color: var(--a2g-red-h) !important; }
.home-shortcuts li p { color: inherit !important; }

/* ═══════════════════════════════════════════
   SECTION#MAIN-BODY
   ═══════════════════════════════════════════ */
section#main-body {
  background-color: transparent !important;
  padding-top: 2rem !important;
  padding-bottom: 3rem !important;
}
section#main-content { background-color: transparent !important; }

/* Client area stat tiles */
.tiles .tile {
  background-color: var(--a2g-bg2) !important;
  border: 1px solid var(--a2g-border) !important;
  border-radius: var(--a2g-r) !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
}
.tiles .tile:hover {
  background-color: var(--a2g-surface) !important;
  border-color: var(--a2g-red) !important;
  box-shadow: none !important;
  transform: none !important;
}
.tiles .tile a, .tiles .tile a:visited { color: var(--a2g-text2) !important; }
.tiles .tile a:hover { color: #fff !important; }
.tile .icon i { color: var(--a2g-red-h) !important; }
.tile .stat {
  font-family: var(--a2g-fh) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.1 !important;
}
.tile .title {
  font-size: 0.75rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--a2g-muted2) !important;
}
.tiles .tile .highlight { height: 3px !important; }
.tiles .tile .highlight.bg-color-blue   { background-color: var(--a2g-red) !important; }
.tiles .tile .highlight.bg-color-green  { background-color: var(--a2g-green) !important; }
.tiles .tile .highlight.bg-color-red    { background-color: var(--a2g-red-h) !important; }
.tiles .tile .highlight.bg-color-yellow { background-color: #d4a017 !important; }

/* ═══════════════════════════════════════════
   PANELS (all)
   ═══════════════════════════════════════════ */
.panel {
  background-color: var(--a2g-bg2) !important;
  background-image: none !important;
  border: 1px solid var(--a2g-border) !important;
  border-left: 2px solid transparent !important;
  border-radius: var(--a2g-r) !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
}
.panel:hover { border-left-color: var(--a2g-red) !important; }

.panel-heading {
  background-color: var(--a2g-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--a2g-border) !important;
  padding: 13px 18px !important;
  border-radius: calc(var(--a2g-r) - 1px) calc(var(--a2g-r) - 1px) 0 0 !important;
}
.panel-heading .panel-title,
.panel-heading h1, .panel-heading h2,
.panel-heading h3, .panel-heading h4 {
  font-family: var(--a2g-fh) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
.panel-body { padding: 18px !important; color: var(--a2g-text2) !important; }
.panel-footer {
  background-color: var(--a2g-surface) !important;
  background-image: none !important;
  border-top: 1px solid var(--a2g-border) !important;
  padding: 12px 18px !important;
}
.panel-primary > .panel-heading {
  background-color: var(--a2g-red) !important;
  border-color: var(--a2g-red) !important;
}
.panel-success > .panel-heading {
  background-color: rgba(39,174,96,0.18) !important;
  border-color: rgba(39,174,96,0.3) !important;
}
.panel-danger > .panel-heading {
  background-color: var(--a2g-red-faint) !important;
  border-color: rgba(192,57,43,0.3) !important;
}
.panel-info > .panel-heading {
  background-color: rgba(88,101,242,0.12) !important;
  border-color: rgba(88,101,242,0.3) !important;
}

/* Client home panels list items */
.client-home-panels .panel > .list-group .list-group-item {
  background-color: transparent !important;
  border-color: var(--a2g-border) !important;
  color: var(--a2g-text2) !important;
  font-size: 0.85rem !important;
  padding: 10px 16px !important;
  transition: all 0.15s !important;
}
.client-home-panels .panel > .list-group .list-group-item:hover {
  background-color: var(--a2g-surface) !important;
  color: #fff !important;
  border-left: 2px solid var(--a2g-red) !important;
  padding-left: 14px !important;
}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn {
  font-family: var(--a2g-fb) !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  border-radius: var(--a2g-r) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
}
.btn-primary {
  background-color: var(--a2g-red) !important;
  background-image: none !important;
  border-color: var(--a2g-red) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--a2g-red-h) !important;
  background-image: none !important;
  border-color: var(--a2g-red-h) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-success {
  background-color: #1a7a3a !important;
  background-image: none !important;
  border-color: #1a7a3a !important;
  color: #fff !important;
}
.btn-success:hover { background-color: var(--a2g-green) !important; border-color: var(--a2g-green) !important; }
.btn-default {
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--a2g-border2) !important;
  color: var(--a2g-text2) !important;
}
.btn-default:hover, .btn-default:focus {
  background-color: var(--a2g-surface2) !important;
  background-image: none !important;
  border-color: var(--a2g-border3) !important;
  color: var(--a2g-text) !important;
  box-shadow: none !important;
}
.btn-danger {
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--a2g-red) !important;
  color: var(--a2g-red-h) !important;
}
.btn-danger:hover { background-color: var(--a2g-red-faint) !important; }
.btn-info {
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--a2g-border2) !important;
  color: var(--a2g-text2) !important;
}
.btn-info:hover {
  border-color: var(--a2g-red-h) !important;
  color: var(--a2g-red-h) !important;
  background-color: var(--a2g-red-faint) !important;
}
.btn-link { color: var(--a2g-red-h) !important; }
.btn-link:hover { color: #fff !important; }

/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="url"], select, textarea {
  background-color: var(--a2g-bg3) !important;
  background-image: none !important;
  border: 1px solid var(--a2g-border2) !important;
  border-radius: var(--a2g-r) !important;
  color: var(--a2g-text) !important;
  font-family: var(--a2g-fb) !important;
  font-size: 0.9rem !important;
  padding: 8px 14px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  background-color: var(--a2g-surface) !important;
  border-color: var(--a2g-red) !important;
  box-shadow: 0 0 0 2px rgba(192,57,43,0.2) !important;
  color: var(--a2g-text) !important;
  outline: none !important;
}
.form-control::placeholder, input::placeholder { color: var(--a2g-muted) !important; }
select option { background: var(--a2g-surface); color: var(--a2g-text); }
label, .control-label {
  font-size: 0.79rem !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--a2g-text2) !important;
  margin-bottom: 6px !important;
}
.checkbox label, .radio label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  color: var(--a2g-text2) !important;
}
.input-group-addon {
  background-color: var(--a2g-surface2) !important;
  border-color: var(--a2g-border2) !important;
  color: var(--a2g-muted2) !important;
}
.help-block { color: var(--a2g-muted2) !important; font-size: 0.8rem !important; }
.has-error .form-control { border-color: var(--a2g-red) !important; }
.has-error .help-block, .has-error .control-label { color: #f87171 !important; }
.has-success .form-control { border-color: var(--a2g-green) !important; }

/* ═══════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════ */
.table { color: var(--a2g-text) !important; font-size: 0.88rem !important; }
.table > thead > tr > th {
  background-color: var(--a2g-surface) !important;
  color: #fff !important;
  font-family: var(--a2g-fh) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-color: var(--a2g-border) !important;
  padding: 12px 16px !important;
}
.table > tbody > tr > td, .table > tfoot > tr > td {
  border-color: var(--a2g-border) !important;
  padding: 11px 16px !important;
  color: var(--a2g-text2) !important;
  vertical-align: middle !important;
}
.table > tbody > tr:hover > td { background-color: var(--a2g-surface) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: rgba(255,255,255,0.02) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--a2g-border) !important; }

/* ═══════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════ */
.alert {
  border-radius: var(--a2g-r) !important;
  font-size: 0.88rem !important;
  border-width: 1px 1px 1px 3px !important;
  background-image: none !important;
  text-shadow: none !important;
}
.alert-success { background-color: rgba(39,174,96,0.08) !important; border-color: rgba(39,174,96,0.35) !important; color: #4ade80 !important; }
.alert-danger, .alert-error { background-color: rgba(192,57,43,0.08) !important; border-color: rgba(192,57,43,0.35) !important; color: #f87171 !important; }
.alert-info { background-color: rgba(88,101,242,0.08) !important; border-color: rgba(88,101,242,0.35) !important; color: #a5b4fc !important; }
.alert-warning { background-color: rgba(212,160,23,0.08) !important; border-color: rgba(212,160,23,0.35) !important; color: #fbbf24 !important; }

/* ═══════════════════════════════════════════
   LABELS / BADGES
   ═══════════════════════════════════════════ */
.label, .badge {
  font-family: var(--a2g-fm) !important;
  font-size: 0.6rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 3px 7px !important;
  text-shadow: none !important;
}
.label-default, .badge-default { background-color: var(--a2g-surface2) !important; color: var(--a2g-muted2) !important; }
.label-primary, .badge-primary { background-color: var(--a2g-red-faint) !important; color: var(--a2g-red-h) !important; }
.label-success, .badge-success { background-color: rgba(39,174,96,0.15) !important; color: #4ade80 !important; }
.label-danger,  .badge-danger  { background-color: var(--a2g-red-faint) !important; color: #f87171 !important; }
.label-warning, .badge-warning { background-color: rgba(212,160,23,0.1) !important; color: #fbbf24 !important; }
.label-info,    .badge-info    { background-color: rgba(88,101,242,0.1) !important; color: #a5b4fc !important; }
.label-active       { background-color: rgba(39,174,96,0.15) !important; color: #4ade80 !important; }
.label-pending      { background-color: rgba(212,160,23,0.1) !important; color: #fbbf24 !important; }
.label-suspended,
.label-cancelled,
.label-terminated   { background-color: var(--a2g-red-faint) !important; color: #f87171 !important; }

/* ═══════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════ */
.nav-tabs { border-bottom: 1px solid var(--a2g-border) !important; }
.nav-tabs > li > a {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--a2g-muted2) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
}
.nav-tabs > li > a:hover { background-color: transparent !important; border-bottom-color: var(--a2g-border2) !important; color: var(--a2g-text) !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid var(--a2g-red) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════ */
.pagination > li > a, .pagination > li > span { background-color: var(--a2g-bg2) !important; background-image: none !important; border-color: var(--a2g-border) !important; color: var(--a2g-text2) !important; }
.pagination > li > a:hover { background-color: var(--a2g-surface) !important; color: #fff !important; border-color: var(--a2g-border2) !important; }
.pagination > .active > a, .pagination > .active > span { background-color: var(--a2g-red) !important; background-image: none !important; border-color: var(--a2g-red) !important; color: #fff !important; }
.pagination > .disabled > a { background-color: var(--a2g-bg2) !important; color: var(--a2g-muted) !important; }

/* ═══════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════ */
.modal-content { background-color: var(--a2g-bg2) !important; background-image: none !important; border: 1px solid var(--a2g-border2) !important; border-radius: var(--a2g-r) !important; box-shadow: 0 16px 64px rgba(0,0,0,0.7) !important; }
.modal-header { background-color: var(--a2g-surface) !important; background-image: none !important; border-bottom: 1px solid var(--a2g-border) !important; padding: 14px 20px !important; }
.modal-title { font-family: var(--a2g-fh) !important; font-weight: 700 !important; color: #fff !important; font-size: 1.1rem !important; }
.modal-body { padding: 20px !important; color: var(--a2g-text2) !important; }
.modal-footer { border-top: 1px solid var(--a2g-border) !important; background-color: var(--a2g-bg) !important; padding: 14px 20px !important; }
.modal-backdrop { background-color: rgba(0,0,0,0.78) !important; }
.close { color: var(--a2g-muted2) !important; text-shadow: none !important; opacity: 0.8 !important; }
.close:hover { color: #fff !important; opacity: 1 !important; }

/* ═══════════════════════════════════════════
   DROPDOWNS (global)
   ═══════════════════════════════════════════ */
.dropdown-menu { background-color: var(--a2g-surface) !important; background-image: none !important; border: 1px solid var(--a2g-border2) !important; border-radius: var(--a2g-r) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important; padding: 6px 0 !important; }
.dropdown-menu > li > a { color: var(--a2g-text2) !important; font-size: 0.82rem !important; padding: 8px 18px !important; background-color: transparent !important; border-left: 2px solid transparent !important; transition: all 0.15s !important; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--a2g-surface2) !important; color: #fff !important; border-left-color: var(--a2g-red) !important; padding-left: 16px !important; }
.dropdown-menu .divider { background-color: var(--a2g-border) !important; }

/* ═══════════════════════════════════════════
   LIST GROUPS
   ═══════════════════════════════════════════ */
.list-group-item { background-color: var(--a2g-bg2) !important; border-color: var(--a2g-border) !important; color: var(--a2g-text2) !important; transition: all 0.15s !important; }
.list-group-item:hover, .list-group-item:focus { background-color: var(--a2g-surface) !important; color: #fff !important; }
.list-group-item.active, .list-group-item.active:hover { background-color: var(--a2g-red-faint) !important; border-color: var(--a2g-border) !important; color: var(--a2g-red-h) !important; border-left: 2px solid var(--a2g-red) !important; }
.list-group-item-heading { color: #fff !important; font-family: var(--a2g-fh) !important; }

/* ═══════════════════════════════════════════
   WELL / PROGRESS / BREADCRUMB
   ═══════════════════════════════════════════ */
.well { background-color: var(--a2g-surface) !important; background-image: none !important; border: 1px solid var(--a2g-border2) !important; border-radius: var(--a2g-r) !important; box-shadow: none !important; color: var(--a2g-text2) !important; }
.progress { background-color: var(--a2g-surface2) !important; background-image: none !important; border-radius: var(--a2g-r) !important; height: 8px !important; box-shadow: none !important; }
.progress-bar { background-color: var(--a2g-red) !important; background-image: none !important; box-shadow: none !important; }
.breadcrumb { background-color: transparent !important; background-image: none !important; border: none !important; padding: 6px 0 14px !important; font-family: var(--a2g-fm) !important; font-size: 0.72rem !important; letter-spacing: 1px !important; }
.breadcrumb > li + li::before { color: var(--a2g-muted) !important; }
.breadcrumb > li a { color: var(--a2g-red-h) !important; }
.breadcrumb > .active { color: var(--a2g-muted2) !important; }

/* ═══════════════════════════════════════════
   SECTION#FOOTER
   ═══════════════════════════════════════════ */
section#footer {
  background-color: var(--a2g-bg) !important;
  background-image: none !important;
  border-top: 1px solid var(--a2g-border) !important;
  color: var(--a2g-muted) !important;
}
section#footer p { color: var(--a2g-muted) !important; font-size: 0.8rem !important; }
section#footer a, section#footer a:visited { color: var(--a2g-muted2) !important; }
section#footer a:hover { color: var(--a2g-text) !important; }
section#footer .back-to-top i {
  background-color: var(--a2g-surface2) !important;
  color: var(--a2g-muted2) !important;
  border-radius: 50% !important;
  transition: all 0.2s !important;
}
section#footer .back-to-top:hover i { background-color: var(--a2g-red) !important; color: #fff !important; }

/* ═══════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════ */
.text-muted   { color: var(--a2g-muted2) !important; }
.text-success { color: #4ade80 !important; }
.text-danger  { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info    { color: #a5b4fc !important; }
.text-primary { color: var(--a2g-red-h) !important; }

/* Sidebar hover */
#sidebar .panel:hover { border-left-color: var(--a2g-red) !important; }

/* ═══════════════════════════════════════════
   FONT SIZE & READABILITY BOOST
   Base bumped to 16px, line-height 1.7
   ═══════════════════════════════════════════ */
html { font-size: 16px !important; }
body { font-size: 16px !important; line-height: 1.7 !important; }

.panel-body,
.list-group-item,
.table > tbody > tr > td,
.dropdown-menu > li > a,
.help-block,
.form-text,
section#footer p { font-size: 15px !important; }

.nav-tabs > li > a,
.breadcrumb { font-size: 13px !important; }

/* Headings — Oswald, larger and more breathing room */
h1 { font-size: 2.4rem !important; font-weight: 600 !important; letter-spacing: 1px !important; }
h2 { font-size: 2rem !important;   font-weight: 600 !important; letter-spacing: 0.5px !important; }
h3 { font-size: 1.65rem !important; font-weight: 600 !important; }
h4 { font-size: 1.35rem !important; font-weight: 500 !important; }
h5 { font-size: 1.1rem !important;  font-weight: 500 !important; }
h6 { font-size: 0.95rem !important; font-weight: 500 !important; }

.panel-heading .panel-title,
.panel-heading h1, .panel-heading h2,
.panel-heading h3, .panel-heading h4 {
  font-size: 1rem !important;
  letter-spacing: 2.5px !important;
}

/* Forms — larger inputs */
.form-control,
input[type="text"], input[type="email"],
input[type="password"], input[type="number"],
input[type="tel"], input[type="search"],
select, textarea {
  font-size: 15px !important;
  padding: 10px 14px !important;
  height: auto !important;
}
label, .control-label { font-size: 12px !important; }

/* Buttons — slightly larger */
.btn { font-size: 13px !important; padding: 9px 20px !important; }
.btn-lg { font-size: 15px !important; padding: 12px 28px !important; }
.btn-sm { font-size: 12px !important; padding: 5px 14px !important; }

/* Navbar links — bigger and more readable */
section#main-menu .navbar-default .navbar-nav > li > a {
  font-size: 14px !important;
  padding: 18px 15px !important;
  letter-spacing: 1px !important;
}
ul.top-nav li a { font-size: 13px !important; letter-spacing: 0.5px !important; }

/* Tile stats */
.tile .stat  { font-size: 2.4rem !important; }
.tile .title { font-size: 13px !important; letter-spacing: 1px !important; }

/* ═══════════════════════════════════════════
   SVG LOGO — replaces Six's text logo
   ═══════════════════════════════════════════ */
section#header .logo-text,
section#header a.logo {
  /* Hide the text, show SVG background */
  font-size: 0 !important;
  color: transparent !important;
  display: inline-block !important;
  width: 220px !important;
  height: 52px !important;
  background-image: url('../img/logo.svg') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left center !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}

/* If WHMCS outputs an img tag for the logo use this too */
section#header .logo img {
  height: 52px !important;
  width: auto !important;
  display: block !important;
}