/* ============================================================
   Modularity Hosting — WHMCS Theme
   Dark enterprise style · Picton blue accent
   ============================================================ */

/* ── Nevis font ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Nevis';
  src: url('/fonts/NevisBold-KGwl/font.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --mh-bg:          #06101c;
  --mh-bg-1:        #0b1a2e;
  --mh-bg-2:        #0f2040;
  --mh-card:        #0d1e35;
  --mh-card-2:      #0f2440;
  --mh-border:      rgba(59,184,232,0.12);
  --mh-border-2:    rgba(255,255,255,0.07);

  --mh-picton:      #3bb8e8;
  --mh-picton-lt:   #6bcfef;
  --mh-picton-dim:  rgba(59,184,232,0.1);

  --mh-text:        #e8f0f8;
  --mh-text-2:      rgba(232,240,248,0.65);
  --mh-text-3:      rgba(232,240,248,0.38);

  --mh-green:       #10b981;
  --mh-yellow:      #f59e0b;
  --mh-red:         #ef4444;
  --mh-purple:      #8b5cf6;

  --mh-radius:      12px;
  --mh-radius-sm:   8px;
  --mh-radius-pill: 999px;
  --mh-nav-h:       68px;
  --mh-max-w:       1240px;
  --mh-shadow:      0 4px 32px rgba(0,0,0,0.45);

  --mh-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mh-font-head:   'Nevis', 'Impact', 'Arial Black', sans-serif;
}

/* ── Reset / base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: dark; /* native form elements render dark */
}

body {
  background: var(--mh-bg) !important;
  color: var(--mh-text) !important;
  font-family: var(--mh-font) !important;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  padding-top: var(--mh-nav-h) !important; /* offset for fixed nav */
}

a { color: var(--mh-picton); text-decoration: none; }
a:hover { color: var(--mh-picton-lt); text-decoration: none; }

img { max-width: 100%; }

/* ── Bootstrap overrides ───────────────────────────────────── */
.bg-white, .bg-light { background: var(--mh-bg-1) !important; }
.text-dark, .text-body { color: var(--mh-text) !important; }
.text-muted { color: var(--mh-text-3) !important; }
.text-primary { color: var(--mh-picton) !important; }

.btn-primary { background: var(--mh-picton) !important; border-color: var(--mh-picton) !important; color: var(--mh-bg) !important; font-weight: 700 !important; }
.btn-primary:hover { background: var(--mh-picton-lt) !important; border-color: var(--mh-picton-lt) !important; }
.btn-default, .btn-secondary { background: rgba(255,255,255,0.07) !important; border-color: var(--mh-border-2) !important; color: var(--mh-text) !important; }
.btn-default:hover, .btn-secondary:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
.btn-danger { background: var(--mh-red) !important; border-color: var(--mh-red) !important; color: #fff !important; }
.btn-success { background: var(--mh-green) !important; border-color: var(--mh-green) !important; color: #fff !important; }

.panel, .card, .well { background: var(--mh-card) !important; border: 1px solid var(--mh-border) !important; border-radius: var(--mh-radius) !important; box-shadow: none !important; color: var(--mh-text) !important; }
.panel-heading, .card-header { background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid var(--mh-border) !important; color: var(--mh-text) !important; border-radius: calc(var(--mh-radius) - 1px) calc(var(--mh-radius) - 1px) 0 0 !important; }
.panel-body, .card-body { color: var(--mh-text) !important; background: transparent !important; }
.card-footer { background: rgba(255,255,255,0.03) !important; border-top: 1px solid var(--mh-border) !important; color: var(--mh-text-2) !important; border-radius: 0 0 calc(var(--mh-radius) - 1px) calc(var(--mh-radius) - 1px) !important; }
.card-title, .panel-title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--mh-text) !important; }
.card-subtitle { color: var(--mh-text-3) !important; }

/* ── Select / option dark override ─────────────────────────── */
select option { background: var(--mh-bg-1); color: var(--mh-text); }
select optgroup { background: var(--mh-bg-1); color: var(--mh-text-3); }

/* ── Password strength meter ────────────────────────────────── */
.password-strength-meter .progress { background: rgba(255,255,255,0.08) !important; height: 6px !important; border-radius: 999px !important; }
.text-muted, small.text-muted, p.text-muted { color: var(--mh-text-3) !important; }

/* ── Register / form page layout ────────────────────────────── */
#registration .card { margin-bottom: 20px !important; }
#registration .card-body { padding: 28px !important; }
.prepend-icon { position: relative; }
.prepend-icon .field-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--mh-text-3); pointer-events: none; z-index: 2;
  display: flex; align-items: center; margin: 0 !important;
}
.prepend-icon input.field,
.prepend-icon input.form-control,
.prepend-icon select.form-control { padding-left: 36px !important; }
.form-check-label, .form-check input + label { color: var(--mh-text-2) !important; font-size: 0.85rem !important; font-weight: 400 !important; }
.form-check-input { accent-color: var(--mh-picton); }
.accepttos { accent-color: var(--mh-picton); }

.table { color: var(--mh-text) !important; }
.table thead th { border-bottom: 2px solid var(--mh-border) !important; color: var(--mh-text-3) !important; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; background: transparent !important; }
.table td, .table th { border-top: 1px solid var(--mh-border) !important; padding: 12px 14px !important; vertical-align: middle !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.025) !important; }
.table-hover tbody tr:hover { background: rgba(59,184,232,0.05) !important; }
.table-bordered { border: 1px solid var(--mh-border) !important; }
.table-bordered td, .table-bordered th { border: 1px solid var(--mh-border) !important; }

.form-control, .form-select, select, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--mh-radius-sm) !important;
  color: var(--mh-text) !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--mh-picton) !important;
  box-shadow: 0 0 0 3px rgba(59,184,232,0.15) !important;
  outline: none !important;
  background: rgba(255,255,255,0.06) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--mh-text-3) !important; }
label { color: var(--mh-text-2) !important; font-size: 0.85rem !important; font-weight: 500 !important; margin-bottom: 6px !important; display: block; }

.input-group-text { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.14) !important; color: var(--mh-text-3) !important; }

/* ── Bootstrap Markdown editor (.md-editor) ─────────────────── */
.md-editor {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--mh-radius-sm) !important;
}
.md-editor .md-header,
.md-editor .md-footer {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.md-editor .md-header .btn,
.md-editor .md-header .btn-default {
  background: transparent !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--mh-text-2) !important;
}
.md-editor .md-header .btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: var(--mh-text) !important;
}
.md-editor .md-input,
.md-editor textarea {
  background: rgba(255,255,255,0.04) !important;
  color: var(--mh-text) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.md-editor .md-preview {
  background: rgba(255,255,255,0.04) !important;
  color: var(--mh-text) !important;
}
.md-editor .md-footer {
  color: var(--mh-text-3) !important;
}

.alert { border-radius: var(--mh-radius-sm) !important; border: none !important; }
.alert-danger, .alert-error { background: rgba(239,68,68,0.12) !important; color: #fca5a5 !important; border-left: 3px solid var(--mh-red) !important; }
.alert-success { background: rgba(16,185,129,0.12) !important; color: #6ee7b7 !important; border-left: 3px solid var(--mh-green) !important; }
.alert-info { background: rgba(59,184,232,0.1) !important; color: var(--mh-picton) !important; border-left: 3px solid var(--mh-picton) !important; }
.alert-warning { background: rgba(245,158,11,0.12) !important; color: #fcd34d !important; border-left: 3px solid var(--mh-yellow) !important; }

.nav-tabs { border-bottom: 1px solid var(--mh-border) !important; }
.nav-tabs .nav-link { color: var(--mh-text-3) !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: var(--mh-radius-sm) var(--mh-radius-sm) 0 0 !important; padding: 10px 18px !important; font-weight: 600; font-size: 0.85rem; transition: color 0.15s !important; }
.nav-tabs .nav-link:hover { color: var(--mh-text) !important; border-bottom-color: var(--mh-border-2) !important; }
.nav-tabs .nav-link.active { color: var(--mh-picton) !important; border-bottom: 2px solid var(--mh-picton) !important; background: transparent !important; }
.tab-content { background: var(--mh-card) !important; border: 1px solid var(--mh-border) !important; border-top: none !important; border-radius: 0 0 var(--mh-radius) var(--mh-radius) !important; padding: 24px !important; }

.modal-content { background: var(--mh-bg-1) !important; border: 1px solid var(--mh-border) !important; border-radius: var(--mh-radius) !important; color: var(--mh-text) !important; }
.modal-header { border-bottom: 1px solid var(--mh-border) !important; }
.modal-footer { border-top: 1px solid var(--mh-border) !important; }
.modal-title { color: var(--mh-text) !important; font-weight: 700; }
.close, .btn-close { color: var(--mh-text-3) !important; opacity: 0.7 !important; filter: invert(1); }

.badge { border-radius: 999px !important; font-weight: 600 !important; font-size: 0.72rem !important; }
.badge-success, .bg-success { background: rgba(16,185,129,0.18) !important; color: var(--mh-green) !important; }
.badge-warning, .bg-warning { background: rgba(245,158,11,0.18) !important; color: var(--mh-yellow) !important; }
.badge-danger, .bg-danger { background: rgba(239,68,68,0.18) !important; color: var(--mh-red) !important; }
.badge-info, .bg-info { background: rgba(59,184,232,0.18) !important; color: var(--mh-picton) !important; }
.badge-primary, .bg-primary { background: rgba(59,184,232,0.18) !important; color: var(--mh-picton) !important; }

.dropdown-menu { background: var(--mh-bg-1) !important; border: 1px solid var(--mh-border) !important; border-radius: var(--mh-radius-sm) !important; box-shadow: var(--mh-shadow) !important; }
.dropdown-item { color: var(--mh-text-2) !important; padding: 8px 16px !important; font-size: 0.875rem !important; }
.dropdown-item:hover { background: var(--mh-picton-dim) !important; color: var(--mh-picton) !important; }
.dropdown-divider { border-top: 1px solid var(--mh-border) !important; }
.dropdown-header { color: var(--mh-text-3) !important; font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; }

.breadcrumb { background: transparent !important; padding: 0 !important; }
.breadcrumb-item a { color: var(--mh-text-3) !important; font-size: 0.8rem; }
.breadcrumb-item a:hover { color: var(--mh-picton) !important; }
.breadcrumb-item.active { color: var(--mh-text-2) !important; font-size: 0.8rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--mh-text-3) !important; }

.pagination .page-link { background: var(--mh-card) !important; border: 1px solid var(--mh-border) !important; color: var(--mh-text-2) !important; }
.pagination .page-link:hover { background: var(--mh-picton-dim) !important; color: var(--mh-picton) !important; border-color: var(--mh-picton) !important; }
.pagination .page-item.active .page-link { background: var(--mh-picton) !important; border-color: var(--mh-picton) !important; color: var(--mh-bg) !important; }
.pagination .page-item.disabled .page-link { background: transparent !important; color: var(--mh-text-3) !important; }

hr, .divider { border-color: var(--mh-border) !important; }

h1, h2, h3, h4, h5, h6 { color: var(--mh-text) !important; }

/* Kill Bootstrap's white backgrounds and recolor for dark theme */
.container-fluid, .container { color: var(--mh-text); }
.row { margin: 0 -12px; }
.col, [class*="col-"] { padding: 0 12px; }

/* WHMCS sidebar panels — uses .card-sidebar class not #sidebar id */
.card-sidebar { background: var(--mh-card) !important; border: 1px solid var(--mh-border) !important; margin-bottom: 16px !important; }
.card-sidebar .card-header { background: rgba(59,184,232,0.06) !important; border-bottom: 1px solid var(--mh-border) !important; }
.card-sidebar .card-title { color: var(--mh-text) !important; font-size: 0.82rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }

/* Global list-group dark override */
.list-group-item {
  background: transparent !important;
  border-color: var(--mh-border) !important;
  color: var(--mh-text-2) !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--mh-picton-dim) !important;
  color: var(--mh-picton) !important;
}
.list-group-item.active,
.list-group-item-action.active {
  background: var(--mh-picton-dim) !important;
  border-color: var(--mh-picton) !important;
  color: var(--mh-picton) !important;
  font-weight: 600;
}
.list-group-flush .list-group-item { border-left: none !important; border-right: none !important; }
.sidebar-menu-item-label { color: inherit !important; font-size: 0.875rem; }

/* Page header band (WHMCS injects this on some pages) */
.hero-unit, .page-header { background: var(--mh-bg-1) !important; border-bottom: 1px solid var(--mh-border) !important; padding: calc(var(--mh-nav-h) + 40px) 0 40px !important; margin: 0 !important; color: var(--mh-text) !important; }

/* Invoice / order tables */
.invoice-body td, .invoice-body th { background: transparent !important; }
.invoice-footer { background: var(--mh-card) !important; }

/* Domain status colours */
.domain-active { color: var(--mh-green) !important; }
.domain-expired { color: var(--mh-red) !important; }
.domain-pending { color: var(--mh-yellow) !important; }

/* Knowledgebase */
.knowledgebase-category-icon { color: var(--mh-picton) !important; }
.kbarticle-list li a { color: var(--mh-text-2) !important; }
.kbarticle-list li a:hover { color: var(--mh-picton) !important; }

/* ── Star-field canvas ─────────────────────────────────────── */
canvas#mhStars {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}

/* ── Navigation ────────────────────────────────────────────── */
.mh-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--mh-nav-h);
  z-index: 1000;
  display: flex; align-items: center;
  background: rgba(6,16,28,0.97);
  border-bottom: 1px solid var(--mh-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 0.3s, border-color 0.3s;
}
.mh-nav.scrolled {
  background: rgba(6,16,28,0.99);
  border-bottom-color: rgba(59,184,232,0.2);
}
.mh-nav-inner {
  max-width: var(--mh-max-w); margin: 0 auto; padding: 0 28px;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
}

/* Logo */
.mh-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.mh-logo-mark { width: 40px; height: 40px; flex-shrink: 0; }
.mh-logo-text { display: flex; flex-direction: column; line-height: 1; }
.mh-logo-name { font-family: var(--mh-font-head); font-size: 1.2rem; font-weight: 900; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; }
.mh-logo-sub { font-family: var(--mh-font-head); font-size: 0.6rem; font-weight: 700; color: var(--mh-picton); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }

/* Nav links */
.mh-nav-links { display: flex; align-items: center; gap: 0; flex-shrink: 1; min-width: 0; }
.mh-nav-link {
  padding: 6px 8px; border-radius: var(--mh-radius-sm);
  font-family: var(--mh-font-head); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: var(--mh-text-2); text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.mh-nav-link:hover { color: #fff; background: rgba(255,255,255,0.07); text-decoration: none; }
.mh-nav-link.active { color: var(--mh-picton); background: rgba(59,184,232,0.1); }

/* ── Mega menu dropdown ─────────────────────────────────── */
.mh-nav-mega { position: relative; }
.mh-nav-mega-trigger {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 8px; border-radius: var(--mh-radius-sm);
  cursor: pointer; user-select: none;
  font-family: var(--mh-font-head); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: var(--mh-text-2); background: none; border: none;
  transition: color 0.15s, background 0.15s;
}
.mh-nav-mega-trigger:hover { color: #fff; background: rgba(255,255,255,0.07); }
.mh-nav-mega.mh-mega-open .mh-nav-mega-trigger { color: var(--mh-picton); background: rgba(59,184,232,0.1); }
.mh-nav-mega-label { color: inherit; text-decoration: none; cursor: pointer; }
.mh-mega-chevron { flex-shrink: 0; transition: transform 0.2s ease; }
.mh-nav-mega.mh-mega-open .mh-mega-chevron { transform: rotate(180deg); }

.mh-nav-mega-dropdown {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 620px;
  padding-top: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 500;
}
.mh-nav-mega.mh-mega-open .mh-nav-mega-dropdown {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
@media (hover: hover) {
  .mh-nav-mega:hover .mh-nav-mega-dropdown {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .mh-nav-mega:hover .mh-nav-mega-trigger { color: #fff; background: rgba(255,255,255,0.07); }
  .mh-nav-mega:hover .mh-mega-chevron { transform: rotate(180deg); }
}
.mh-nav-mega-inner {
  background: #0a1628;
  border: 1px solid rgba(59,184,232,0.22);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 60px rgba(59,184,232,0.07);
  padding: 20px 20px 16px;
}
.mh-mega-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px;
}
.mh-mega-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px;
  text-decoration: none; color: var(--mh-text-2);
  transition: background 0.13s, color 0.13s;
}
.mh-mega-link:hover { background: rgba(59,184,232,0.08); color: #fff; text-decoration: none; }
.mh-mega-link-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  background: rgba(59,184,232,0.07);
  border: 1px solid rgba(59,184,232,0.14);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mh-picton); font-size: 0.78rem;
  transition: background 0.13s;
}
.mh-mega-link:hover .mh-mega-link-icon { background: rgba(59,184,232,0.18); }
.mh-mega-link-name { font-size: 0.8rem; font-weight: 500; line-height: 1.2; color: inherit; }
.mh-mega-link-desc { font-size: 0.68rem; color: var(--mh-text-3); margin-top: 2px; line-height: 1.3; }
.mh-mega-footer {
  border-top: 1px solid rgba(59,184,232,0.1);
  padding-top: 14px; margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mh-mega-footer-text { font-size: 0.76rem; color: var(--mh-text-3); }
.mh-mega-footer-text strong { color: var(--mh-text-2); font-weight: 500; }
.mh-mega-cta { font-size: 0.75rem !important; padding: 7px 16px !important; white-space: nowrap; }
@media (max-width: 1100px) {
  .mh-nav-mega-dropdown { width: 520px; }
}

/* Affiliates icon-only pill */
.mh-nav-icon-only {
  width: 32px; height: 32px; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--mh-border-2);
  font-size: 0.78rem;
}
.mh-nav-icon-only:hover { border-color: var(--mh-picton); background: var(--mh-picton-dim) !important; color: var(--mh-picton) !important; }

/* Nav actions */
.mh-nav-actions { display: flex; align-items: center; gap: 8px; }

/* Notification bell */
.mh-notif-wrap { position: relative; }
.mh-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: none; border: 1px solid var(--mh-border-2);
  color: var(--mh-text-2); cursor: pointer; position: relative;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mh-icon-btn:hover { color: var(--mh-picton); border-color: var(--mh-picton); background: var(--mh-picton-dim); }
.mh-notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; border-radius: 999px;
  background: var(--mh-picton); color: var(--mh-bg);
  font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.mh-notif-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 300px; background: var(--mh-bg-1);
  border: 1px solid var(--mh-border); border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow); opacity: 0; pointer-events: none;
  transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s; z-index: 200;
}
.mh-notif-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mh-notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--mh-border); text-decoration: none; transition: background 0.13s; }
.mh-notif-item:last-child { border-bottom: none; border-radius: 0 0 var(--mh-radius) var(--mh-radius); }
.mh-notif-item:hover { background: var(--mh-picton-dim); }
.mh-notif-title { font-size: 0.82rem; font-weight: 600; color: var(--mh-text); }
.mh-notif-desc { font-size: 0.75rem; color: var(--mh-text-3); margin-top: 2px; }

/* Account dropdown */
.mh-account-wrap { position: relative; }
.mh-account-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--mh-border-2);
  border-radius: var(--mh-radius-pill); padding: 5px 12px 5px 5px;
  color: var(--mh-text-2); cursor: pointer; white-space: nowrap;
  transition: all 0.15s; font-size: 0.82rem;
}
.mh-account-btn:hover { border-color: var(--mh-picton); color: var(--mh-picton); background: var(--mh-picton-dim); }
.mh-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(59,184,232,0.2); border: 1px solid rgba(59,184,232,0.3);
  color: var(--mh-picton); font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mh-account-name { font-weight: 600; }
.mh-chevron { transition: transform 0.2s; }
.mh-account-wrap.open .mh-chevron { transform: rotate(180deg); }

.mh-account-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 220px; background: var(--mh-bg-1);
  border: 1px solid var(--mh-border); border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow); opacity: 0; pointer-events: none;
  transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s; z-index: 200;
  overflow: hidden;
}
.mh-account-wrap.open .mh-account-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mh-account-header { padding: 14px 16px; border-bottom: 1px solid var(--mh-border); }
.mh-account-fullname { font-size: 0.85rem; font-weight: 700; color: var(--mh-text); }
.mh-account-email { font-size: 0.75rem; color: var(--mh-text-3); margin-top: 2px; }
.mh-account-links { padding: 6px 0; }
.mh-account-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: 0.83rem; color: var(--mh-text-2);
  text-decoration: none; transition: background 0.13s, color 0.13s;
}
.mh-account-link:hover { background: var(--mh-picton-dim); color: var(--mh-picton); text-decoration: none; }
.mh-account-link svg { flex-shrink: 0; }
.mh-account-divider { height: 1px; background: var(--mh-border); margin: 4px 0; }
.mh-account-logout { color: #fca5a5 !important; }
.mh-account-logout:hover { background: rgba(239,68,68,0.1) !important; color: var(--mh-red) !important; }

/* Hamburger */
.mh-hamburger {
  display: none; background: none; border: 1px solid var(--mh-border-2);
  border-radius: var(--mh-radius-sm); padding: 8px 9px;
  flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  color: var(--mh-text-2); cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.mh-hamburger:hover { border-color: var(--mh-picton); color: var(--mh-picton); }
.mh-hamburger span { display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.mh-hamburger.mh-hamburger-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mh-hamburger.mh-hamburger-open span:nth-child(2) { opacity: 0; }
.mh-hamburger.mh-hamburger-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile panel */
.mh-mobile-panel {
  display: none; position: fixed;
  top: var(--mh-nav-h); left: 0; right: 0; bottom: 0;
  background: rgba(6,16,28,0.97); backdrop-filter: blur(20px);
  z-index: 999; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.3s ease;
}
.mh-mobile-panel.mh-mobile-open { transform: translateX(0); }
.mh-mobile-inner { padding: 24px 20px 60px; display: flex; flex-direction: column; gap: 2px; }
.mh-mobile-link {
  display: block; padding: 10px 14px; font-family: var(--mh-font-head);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mh-text-2); border-radius: var(--mh-radius-sm); text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.mh-mobile-link:hover { color: var(--mh-picton); background: var(--mh-picton-dim); text-decoration: none; }
.mh-mobile-link-icon { margin-right: 8px; color: var(--mh-picton); width: 14px; text-align: center; }
/* Section headers */
.mh-mobile-section-head {
  font-family: var(--mh-font-head); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mh-picton); padding: 16px 14px 6px;
  border-bottom: 1px solid rgba(59,184,232,0.12); margin-bottom: 4px;
}
.mh-mobile-section-head:first-child { padding-top: 4px; }
/* Sub-links with icons */
.mh-mobile-sub-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 0.84rem; font-weight: 500; color: var(--mh-text-2);
  text-decoration: none; transition: background 0.13s, color 0.13s;
}
.mh-mobile-sub-link:hover { background: rgba(59,184,232,0.08); color: #fff; text-decoration: none; }
.mh-mobile-sub-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  background: rgba(59,184,232,0.07); border: 1px solid rgba(59,184,232,0.14);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--mh-picton); font-size: 0.72rem;
}
.mh-mobile-sub-link:hover .mh-mobile-sub-icon { background: rgba(59,184,232,0.18); }
/* Auth buttons at bottom */
.mh-mobile-auth { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; }
.mh-mobile-divider { height: 1px; background: var(--mh-border); margin: 12px 0; }
.mh-mobile-logout { color: #fca5a5 !important; }
body.mh-nav-open { overflow: hidden; }

/* Shared nav buttons */
.mh-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: var(--mh-radius-pill);
  font-family: var(--mh-font-head); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  border: none; cursor: pointer; text-decoration: none; transition: all 0.18s;
}
.mh-btn-primary { background: var(--mh-picton); color: var(--mh-bg) !important; box-shadow: 0 2px 16px rgba(59,184,232,0.35); }
.mh-btn-primary:hover { background: var(--mh-picton-lt); transform: translateY(-1px); box-shadow: 0 4px 24px rgba(59,184,232,0.5); text-decoration: none; color: var(--mh-bg) !important; }
.mh-btn-outline { background: transparent; color: var(--mh-text) !important; border: 2px solid rgba(255,255,255,0.25) !important; }
.mh-btn-outline:hover { border-color: var(--mh-picton) !important; color: var(--mh-picton) !important; text-decoration: none; }
.mh-btn-ghost { background: transparent; color: var(--mh-text-2) !important; }
.mh-btn-ghost:hover { color: #fff !important; text-decoration: none; }
.mh-btn-full { width: 100%; justify-content: center; }
.mh-btn-sm { padding: 7px 14px; font-size: 0.72rem; }

/* ── Flash alerts ──────────────────────────────────────────── */
.mh-flash-wrap { padding: 12px 0; }
.mh-alert {
  padding: 12px 16px; border-radius: var(--mh-radius-sm);
  font-size: 0.88rem; margin-bottom: 8px;
}
.mh-alert-error { background: rgba(239,68,68,0.12); color: #fca5a5; border-left: 3px solid var(--mh-red); }
.mh-alert-info { background: rgba(59,184,232,0.1); color: var(--mh-picton); border-left: 3px solid var(--mh-picton); }
.mh-alert-success { background: rgba(16,185,129,0.12); color: #6ee7b7; border-left: 3px solid var(--mh-green); }

/* ── Page wrapper ──────────────────────────────────────────── */
.mh-page-wrap {
  padding-top: var(--mh-nav-h);
  min-height: calc(100vh - 240px);
}

/* ── Dashboard ─────────────────────────────────────────────── */
.mh-dashboard { padding: 40px 0 80px; }

.mh-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 32px; gap: 16px; flex-wrap: wrap;
}
.mh-label {
  font-family: var(--mh-font-head); font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--mh-picton);
  margin-bottom: 6px;
}
.mh-page-title {
  font-family: var(--mh-font-head); font-size: 2rem; font-weight: 900;
  color: var(--mh-text) !important; margin: 0; letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Stats row */
.mh-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px;
}
.mh-stat-card {
  background: var(--mh-card); border: 1px solid var(--mh-border); border-radius: var(--mh-radius);
  padding: 20px 22px; display: flex; align-items: center; gap: 16px;
  transition: border-color 0.15s, transform 0.2s;
}
.mh-stat-card:hover { border-color: rgba(59,184,232,0.3); transform: translateY(-2px); }
.mh-stat-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mh-stat-icon--blue { background: rgba(59,184,232,0.12); color: var(--mh-picton); }
.mh-stat-icon--green { background: rgba(16,185,129,0.12); color: var(--mh-green); }
.mh-stat-icon--yellow { background: rgba(245,158,11,0.12); color: var(--mh-yellow); }
.mh-stat-icon--purple { background: rgba(139,92,246,0.12); color: var(--mh-purple); }
.mh-stat-value { font-family: var(--mh-font-head); font-size: 1.6rem; font-weight: 900; color: var(--mh-text) !important; line-height: 1; }
.mh-stat-label { font-size: 0.72rem; color: var(--mh-text-3); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 3px; }

/* Dashboard grid */
.mh-dash-grid { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
.mh-dash-sidebar { display: flex; flex-direction: column; gap: 20px; }

/* Cards */
.mh-card {
  background: var(--mh-card); border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius); overflow: hidden;
}
.mh-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--mh-border);
  background: rgba(255,255,255,0.02);
}
.mh-card-title { font-family: var(--mh-font-head); font-size: 0.8rem; font-weight: 700; color: var(--mh-text) !important; text-transform: uppercase; letter-spacing: 0.08em; margin: 0; }
.mh-card-link { font-size: 0.78rem; color: var(--mh-picton); font-weight: 600; transition: color 0.15s; }
.mh-card-link:hover { color: var(--mh-picton-lt); }

/* Services list */
.mh-services-list { display: flex; flex-direction: column; }
.mh-service-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--mh-border);
  text-decoration: none; transition: background 0.13s; gap: 16px;
}
.mh-service-row:last-child { border-bottom: none; }
.mh-service-row:hover { background: rgba(59,184,232,0.04); text-decoration: none; }
.mh-service-name { font-size: 0.875rem; font-weight: 600; color: var(--mh-text); }
.mh-service-domain { font-size: 0.78rem; color: var(--mh-text-3); margin-top: 2px; }
.mh-service-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mh-service-renew { font-size: 0.75rem; color: var(--mh-text-3); }

/* Invoices */
.mh-invoice-list { display: flex; flex-direction: column; }
.mh-invoice-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--mh-border);
  text-decoration: none; transition: background 0.13s;
}
.mh-invoice-row:last-child { border-bottom: none; }
.mh-invoice-row:hover { background: rgba(59,184,232,0.04); text-decoration: none; }
.mh-invoice-id { font-size: 0.82rem; font-weight: 600; color: var(--mh-text); }
.mh-invoice-date { font-size: 0.72rem; color: var(--mh-text-3); margin-top: 2px; }
.mh-invoice-right { display: flex; align-items: center; gap: 10px; }
.mh-invoice-amount { font-size: 0.85rem; font-weight: 700; color: var(--mh-text); }

/* Tickets */
.mh-ticket-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 20px; border-bottom: 1px solid var(--mh-border);
  text-decoration: none; gap: 12px; transition: background 0.13s;
}
.mh-ticket-row:last-child { border-bottom: none; }
.mh-ticket-row:hover { background: rgba(59,184,232,0.04); text-decoration: none; }
.mh-ticket-subject { font-size: 0.82rem; color: var(--mh-text-2); }

/* Announcements */
.mh-announce-row {
  display: block; padding: 12px 20px; border-bottom: 1px solid var(--mh-border);
  text-decoration: none; transition: background 0.13s;
}
.mh-announce-row:last-child { border-bottom: none; }
.mh-announce-row:hover { background: rgba(59,184,232,0.04); text-decoration: none; }
.mh-announce-date { font-size: 0.7rem; color: var(--mh-text-3); margin-bottom: 3px; }
.mh-announce-title { font-size: 0.82rem; font-weight: 500; color: var(--mh-text-2); }

/* Badges */
.mh-badge {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.mh-badge--green { background: rgba(16,185,129,0.15); color: var(--mh-green); }
.mh-badge--yellow { background: rgba(245,158,11,0.15); color: var(--mh-yellow); }
.mh-badge--red { background: rgba(239,68,68,0.15); color: var(--mh-red); }
.mh-badge--blue { background: rgba(59,184,232,0.15); color: var(--mh-picton); }
.mh-badge--grey { background: rgba(255,255,255,0.06); color: var(--mh-text-3); }

/* Empty states */
.mh-empty-state { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; }
.mh-empty-state p { font-size: 0.875rem; color: var(--mh-text-3); margin: 0; }
.mh-empty-text { font-size: 0.82rem; color: var(--mh-text-3); padding: 16px 20px; margin: 0; }

/* ── Auth pages ────────────────────────────────────────────── */
/* WHMCS renders login.tpl inside the main content column — we need to
   expand that column to full-width and center the card ourselves */
.login-form,
.mh-auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--mh-nav-h) - 120px);
  padding: 40px 20px 60px;
  width: 100%;
}

.mh-auth-wrap {
  min-height: calc(100vh - var(--mh-nav-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--mh-nav-h) + 40px) 20px 60px;
}
.mh-auth-card {
  width: 100%; max-width: 440px;
  background: var(--mh-card); border: 1px solid var(--mh-border);
  border-radius: 18px; padding: 40px 40px 36px;
  box-shadow: 0 0 80px rgba(59,184,232,0.06), var(--mh-shadow);
}
.mh-auth-card--wide { max-width: 620px; }
.mh-auth-wrap--wide { align-items: center; }

.mh-auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.mh-auth-brand { font-family: var(--mh-font-head); font-size: 1.1rem; font-weight: 900; color: var(--mh-text); text-transform: uppercase; letter-spacing: 0.04em; }

.mh-auth-title { font-family: var(--mh-font-head); font-size: 1.5rem; font-weight: 900; color: var(--mh-text) !important; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 8px; }
.mh-auth-sub { font-size: 0.875rem; color: var(--mh-text-3); margin-bottom: 28px; }
.mh-auth-alt { text-align: center; font-size: 0.82rem; color: var(--mh-text-3); margin-top: 24px; margin-bottom: 0; }
.mh-auth-alt a { color: var(--mh-picton); font-weight: 600; }

.mh-auth-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; width: 100%; max-width: 440px; }
.mh-auth-status { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--mh-picton); }
.mh-auth-back { font-size: 0.78rem; color: var(--mh-text-3); }
.mh-auth-back:hover { color: var(--mh-text-2); }

.mh-auth-success-state { text-align: center; }
.mh-success-icon {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 20px;
  background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3);
  display: flex; align-items: center; justify-content: center; color: var(--mh-green);
}

/* ── Forms ─────────────────────────────────────────────────── */
.mh-form-group { margin-bottom: 18px; }
.mh-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mh-form-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mh-form-label-row label { margin-bottom: 0; }
.mh-form-forgot { font-size: 0.78rem; color: var(--mh-picton); }
.mh-form-forgot:hover { color: var(--mh-picton-lt); }
.mh-form-check { display: flex; align-items: center; gap: 10px; }
.mh-form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--mh-picton); cursor: pointer; }
.mh-form-check span { font-size: 0.83rem; color: var(--mh-text-2); }
.mh-form-check label { margin: 0 !important; font-size: 0.83rem !important; color: var(--mh-text-2) !important; cursor: pointer; }

.mh-auth-forgot { font-size: 0.8rem; color: var(--mh-text-3); text-decoration: none; }
.mh-auth-forgot:hover { color: var(--mh-picton); text-decoration: none; }

.mh-auth-card-footer {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--mh-border-2);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.82rem; color: var(--mh-text-3);
}
.mh-auth-register-link { color: var(--mh-picton); font-weight: 600; text-decoration: none; }
.mh-auth-register-link:hover { color: var(--mh-picton-lt); text-decoration: none; }
.mh-form-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 20px; }
.mh-form-divider::before, .mh-form-divider::after { content: ''; flex: 1; height: 1px; background: var(--mh-border); }
.mh-form-divider span { font-size: 0.72rem; color: var(--mh-text-3); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
.mh-optional { color: var(--mh-text-3); font-size: 0.78rem; font-weight: 400; }

.mh-input {
  width: 100%; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--mh-radius-sm) !important; color: var(--mh-text) !important;
  padding: 11px 14px !important; font-size: 0.9rem !important; transition: border-color 0.15s, box-shadow 0.15s !important;
  font-family: var(--mh-font);
}
.mh-input:focus { border-color: var(--mh-picton) !important; box-shadow: 0 0 0 3px rgba(59,184,232,0.15) !important; outline: none !important; }
.mh-input::placeholder { color: var(--mh-text-3) !important; }

.mh-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233bb8e8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  border: 1px solid rgba(255,255,255,0.14) !important; border-radius: var(--mh-radius-sm) !important;
  color: var(--mh-text) !important; padding: 11px 36px 11px 14px !important; font-size: 0.9rem !important;
}
.mh-select:focus { border-color: var(--mh-picton) !important; box-shadow: 0 0 0 3px rgba(59,184,232,0.15) !important; outline: none !important; }

.mh-input-wrap { position: relative; }
.mh-input-wrap .mh-input { padding-right: 44px !important; }
.mh-input-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--mh-text-3); cursor: pointer;
  padding: 4px; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s;
}
.mh-input-toggle:hover { color: var(--mh-picton); }

/* ── Footer ────────────────────────────────────────────────── */
.mh-footer {
  background: var(--mh-bg-1); border-top: 1px solid var(--mh-border);
  padding: 60px 0 0;
}
.mh-footer-grid {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px;
}
.mh-footer-brand p { font-size: 0.875rem; color: var(--mh-text-3); margin-top: 12px; max-width: 260px; line-height: 1.65; }
.mh-footer-status { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--mh-picton); margin-top: 14px; }
.mh-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mh-green); box-shadow: 0 0 8px var(--mh-green); animation: mh-pulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes mh-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

.mh-footer-col h4 { font-family: var(--mh-font-head); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mh-text-3); margin-bottom: 14px; }
.mh-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mh-footer-col ul a { font-size: 0.875rem; color: var(--mh-text-2); transition: color 0.15s; }
.mh-footer-col ul a:hover { color: var(--mh-picton); text-decoration: none; }

.mh-footer-bottom {
  border-top: 1px solid var(--mh-border); padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.mh-footer-bottom p { font-size: 0.8rem; color: var(--mh-text-3); margin: 0; }
.mh-footer-bottom a { color: var(--mh-text-3); }
.mh-footer-bottom a:hover { color: var(--mh-picton); }

/* ── Breadcrumb nav ─────────────────────────────────────────── */
.mh-breadcrumb {
  background: transparent;
  padding: 10px 0 0;
}
.mh-breadcrumb .breadcrumb { margin-bottom: 0; }

/* ── Dashboard tiles ─────────────────────────────────────────── */
.tiles .tile {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  color: var(--mh-text) !important;
}
.tiles .tile:hover { background: var(--mh-card-2) !important; border-color: rgba(59,184,232,0.3) !important; }
.tiles .tile .stat { color: var(--mh-text) !important; }
.tiles .tile .title { color: var(--mh-text-3) !important; }
.tiles .tile i { color: var(--mh-picton) !important; }

/* ── WHMCS bg-color-* and card-accent-* classes ─────────────── */
[class*="bg-color-"] { opacity: 0.7 !important; }
.bg-color-blue   { background: rgba(59,130,246,0.5) !important; }
.bg-color-green  { background: rgba(16,185,129,0.5) !important; }
.bg-color-red    { background: rgba(239,68,68,0.5) !important; }
.bg-color-gold, .bg-color-sun-flower { background: rgba(245,158,11,0.5) !important; }
.bg-color-purple { background: rgba(139,92,246,0.5) !important; }
.bg-color-teal   { background: rgba(20,184,166,0.5) !important; }
[class*="card-accent-"] { border-top: 3px solid rgba(59,184,232,0.4) !important; }
.card-accent-gold   { border-top-color: rgba(245,158,11,0.6) !important; }
.card-accent-green  { border-top-color: rgba(16,185,129,0.6) !important; }
.card-accent-red    { border-top-color: rgba(239,68,68,0.6) !important; }
.card-accent-blue   { border-top-color: rgba(59,130,246,0.6) !important; }

/* ── Domain / shopping cart pages ───────────────────────────── */
.home-domain-search,
.domain-search-results,
.domain-checker-container,
.domain-search-header { background: var(--mh-card) !important; border: 1px solid var(--mh-border) !important; border-radius: var(--mh-radius) !important; color: var(--mh-text) !important; }
.domain-search-header h1,
.domain-search-header h2,
.domain-search-header p { color: var(--mh-text) !important; }

/* Domain availability results */
.domain-result-available { color: var(--mh-green) !important; font-weight: 700; }
.domain-result-unavailable { color: var(--mh-red) !important; }
.domain-name-available { color: var(--mh-green) !important; }
.available .domain-name { color: var(--mh-green) !important; }

/* TLD option cards (the .com .net .co cards) */
.tld-option,
.tld-options .tld,
.domain-pricing .tld-row,
.domain-pricing-table tr,
.tld-sale-group { background: var(--mh-card) !important; border-color: var(--mh-border) !important; color: var(--mh-text) !important; }
.tld-filters a { background: rgba(255,255,255,0.06) !important; color: var(--mh-text-2) !important; border: 1px solid var(--mh-border) !important; }
.tld-filters a:hover, .tld-filters a.active { background: var(--mh-picton-dim) !important; color: var(--mh-picton) !important; border-color: var(--mh-picton) !important; }
.tld-sale-group-hot { background: rgba(239,68,68,0.15) !important; }
.tld-sale-group-new { background: rgba(16,185,129,0.15) !important; }

/* Shopping cart order summary */
.cart-total-table tr,
.order-summary tr,
.cart-items tr,
.invoice-body tr { background: transparent !important; }
.cart-total,
.order-total { color: var(--mh-picton) !important; font-weight: 700; }

/* WHMCS store upsell/promo cards */
.store-product-wrap,
.product-addon,
.upgrade-option { background: var(--mh-card) !important; border: 1px solid var(--mh-border) !important; color: var(--mh-text) !important; }
.store-product-wrap:hover { border-color: rgba(59,184,232,0.4) !important; }
.promo-code-form .form-control { background: rgba(255,255,255,0.04) !important; }

/* Pricing / configure product */
.product-pricing-cycle { color: var(--mh-text-2) !important; }
.product-pricing-cycle.active { color: var(--mh-picton) !important; background: var(--mh-picton-dim) !important; }
.configure-addon { background: var(--mh-card) !important; border-color: var(--mh-border) !important; }

/* "Powered by WHMCompleteSolution" */
.whmcs-powered-by, .powered-by { color: var(--mh-text-3) !important; }
.whmcs-powered-by a { color: var(--mh-picton) !important; }

/* Inline text colours that bleed through */
.text-success { color: var(--mh-green) !important; }
.text-danger, .text-error { color: var(--mh-red) !important; }
.text-warning { color: var(--mh-yellow) !important; }
.text-info { color: var(--mh-picton) !important; }
strong, b { color: inherit; }

/* ── Domain checker / cart register page ────────────────────── */
/* WHMCS injects the domain results widget via core PHP.
   Target every plausible container class. */
#domain-checker,
.domain-checker,
.domain-checker-form,
.domain-search-results,
.domain-checker-result,
.domain-checker-container,
.whmcs-domain-checker,
[id*="domain"] > .container,
[class*="domain-search"] {
  background: var(--mh-card) !important;
  color: var(--mh-text) !important;
  border-color: var(--mh-border) !important;
}

/* The yellow/cream banner area — WHMCS renders a div with an
   inline background-image (globe) and Bootstrap bg-* class */
.home-domain-search,
.home-domain-search.bg-white,
.home-domain-search.bg-light,
.domain-search-hero,
.cart-domain-hero,
.store-domain-hero {
  background: var(--mh-card) !important;
  background-image: none !important;
}
.home-domain-search .input-group-wrapper,
.mh-domain-search-wrap .input-group-wrapper {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--mh-border) !important;
}
.mh-domain-search-wrap {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
}
.mh-domain-search-wrap h2 { color: var(--mh-text) !important; }

/* TLD option cards rendered by WHMCS domain checker */
.tld-card,
.tld-option,
.tld-result,
.domain-pricing-row,
.domain-pricing-card,
.tld-pricing-table .tld-row,
.domain-search-results .card,
.domain-checker .card,
.domain-checker-result .card {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  color: var(--mh-text) !important;
}
.tld-card .tld-name,
.tld-option .tld-name { color: var(--mh-text) !important; font-weight: 700; }
.tld-card .price,
.tld-option .price { color: var(--mh-text-2) !important; }

/* ── Domain availability results (after search) ─────────────── */
/* WHMCS renders results in .availabilityresults > .result rows  */
.availabilityresults,
.availabilityresults .result,
#availabilityresults,
#availabilityresults .result {
  background: var(--mh-card) !important;
  border-color: var(--mh-border) !important;
  color: var(--mh-text) !important;
}
.availabilityresults .result {
  border-bottom: 1px solid var(--mh-border) !important;
}
.availabilityresults .result:last-child { border-bottom: none !important; }
/* TLD name & status text */
.availabilityresults .tld,
.availabilityresults .domain,
.availabilityresults .domain-name { color: var(--mh-text) !important; }
.availabilityresults .available .tld,
.availabilityresults .available .domain-name { color: var(--mh-green) !important; }
.availabilityresults .unavailable .tld,
.availabilityresults .unavailable .domain-name { color: var(--mh-text-2) !important; }
/* Unavailable button */
.availabilityresults .btn-default,
.availabilityresults .btn.unavailable {
  background: var(--mh-bg-1) !important;
  border-color: var(--mh-border-2) !important;
  color: var(--mh-text-2) !important;
  border-radius: 999px !important;
}
/* Add to cart button */
.availabilityresults .btn-success,
.availabilityresults .btn.available {
  border-radius: 999px !important;
}
/* HOT / NEW ribbon badges */
.availabilityresults .ribbon-hot { background: #ef4444 !important; }
.availabilityresults .ribbon-new { background: #10b981 !important; }
/* The result grid cards */
.availabilityresults .col-sm-6,
.availabilityresults [class*="col-"] {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  color: var(--mh-text) !important;
}
/* Price text */
.availabilityresults .price,
.availabilityresults [class*="price"] { color: var(--mh-picton) !important; }

/* Upsell cards (Add Web Hosting / Transfer domain) */
.upsell-card,
.domain-upsell,
.addons-upsell,
.hosting-upsell,
[class*="upsell"] .card,
.tab-content.store-domain-tab-content,
.tab-content.bg-white {
  background: var(--mh-card) !important;
  color: var(--mh-text) !important;
  border-color: var(--mh-border) !important;
}

/* Bootstrap utility overrides — must beat Bootstrap's !important */
.bg-white  { background-color: var(--mh-card) !important; }
.bg-light  { background-color: var(--mh-bg-1) !important; }
.bg-secondary { background-color: rgba(255,255,255,0.08) !important; }

/* WHMCS shopping cart summary */
.store-order-container { background: transparent !important; color: var(--mh-text) !important; }
.store-promoted-product { background: var(--mh-card) !important; border: 1px solid var(--mh-border) !important; }
.order-summary-container,
.cart-summary { background: var(--mh-card) !important; border: 1px solid var(--mh-border) !important; }
.payment-term,
.billing-cycle-options { background: transparent !important; }

/* custom-select (Bootstrap 4 custom dropdown arrow) */
.custom-select {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--mh-text) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* Any remaining white/light containers */
.primary-bg-color { background: var(--mh-bg) !important; }
.container-bg-white,
.content-bg-white { background: var(--mh-card) !important; }

/* ── Nav responsive: show hamburger at ≤1400px ──────────────── */
@media (max-width: 1400px) {
  .mh-nav-links { display: none !important; }
  .mh-hamburger { display: flex !important; }
  .mh-mobile-panel { display: block; }
}
@media (min-width: 1401px) {
  .mh-nav-links { display: flex !important; }
  .mh-hamburger { display: none !important; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .mh-dash-grid { grid-template-columns: 1fr; }
  .mh-dash-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .mh-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mh-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .mh-account-wrap .mh-account-name { display: none; }
  .mh-stats-row { grid-template-columns: 1fr 1fr; }
  .mh-dash-sidebar { grid-template-columns: 1fr; }
  .mh-auth-card { padding: 28px 22px; }
  .mh-form-row { grid-template-columns: 1fr; }
  .mh-footer-grid { grid-template-columns: 1fr; }
  .mh-footer-bottom { flex-direction: column; text-align: center; }
  .mh-page-header { flex-direction: column; align-items: flex-start; }

  /* overflow-x:hidden intentionally removed — it turns body into a scroll container and clips form elements */
  #main-body > .container { padding-left: 12px !important; padding-right: 12px !important; }
  #main-body .row { margin-left: 0 !important; margin-right: 0 !important; }
  #main-body .col-lg-4, #main-body .col-xl-3 { padding-left: 0 !important; padding-right: 0 !important; }
  .sidebar, .card-sidebar { max-width: 100% !important; box-sizing: border-box !important; }
}
@media (max-width: 480px) {
  .mh-stats-row { grid-template-columns: 1fr; }
  .mh-auth-meta { flex-direction: column; gap: 10px; text-align: center; }
}

/* ── Domain search — mobile ─────────────────────────────────── */
@media (max-width: 767px) {
  /* Stack input and button vertically */
  .domain-checker-bg .row { margin: 0 !important; }
  .domain-checker-bg .row > [class*="col"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }
  .domain-checker-bg .input-group,
  .domain-checker-bg .input-group.input-group-lg {
    flex-wrap: wrap !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    gap: 10px !important;
  }
  /* Input — standalone full-width pill */
  .domain-checker-bg .input-group > .form-control,
  .domain-checker-bg #inputDomain,
  .domain-checker-bg input[type="text"],
  .domain-checker-bg input[type="search"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    border-radius: 999px !important;
    border: 1px solid var(--mh-border-2) !important;
    background: rgba(255,255,255,0.07) !important;
    padding: 13px 22px !important;
    font-size: 1rem !important;
    height: auto !important;
  }
  /* Button — standalone full-width pill on new line */
  .domain-checker-bg .input-group-append,
  .domain-checker-bg .input-group-btn,
  span.input-group-append,
  span.input-group-btn {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  .domain-checker-bg .btn.domain-check-availability,
  .domain-checker-bg .input-group-append .btn,
  .domain-checker-bg .input-group-btn .btn {
    width: 100% !important;
    border-radius: 999px !important;
    padding: 13px 22px !important;
    font-size: 1rem !important;
    height: auto !important;
    display: block !important;
    text-align: center !important;
  }
  /* TLD featured cards — 2 per row on mobile */
  .featured-tlds-container {
    gap: 10px !important;
    padding: 14px !important;
  }
  .featured-tld {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  /* Reduce the oversized p-5 padding to something sane */
  .mh-domain-search-wrap .p-5 {
    padding: 24px 16px !important;
  }

  /* Input full-width, pill on both sides since buttons go below */
  .mh-domain-search-wrap input[type="text"],
  .mh-domain-search-wrap input[type="search"] {
    border-radius: var(--mh-radius-pill) !important;
    border-right: 1px solid var(--mh-border-2) !important;
  }

  /* Mobile button row — equal-width side-by-side, pill shape */
  .mh-domain-search-wrap .row.d-sm-none {
    margin-top: 12px !important;
    gap: 0;
  }
  .mh-domain-search-wrap .row.d-sm-none .btn {
    border-radius: var(--mh-radius-pill) !important;
    font-weight: 700;
    padding: 10px 0;
    width: 100%;
  }
  .mh-domain-search-wrap .row.d-sm-none .col-6:first-child {
    padding-right: 6px;
  }
  .mh-domain-search-wrap .row.d-sm-none .col-6:last-child {
    padding-left: 6px;
  }

  /* TLD grid: 2 columns on mobile */
  ul.mh-tld-list,
  .mh-tld-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 8px !important;
    justify-items: center !important;
  }
  .mh-tld-item {
    width: 100%;
    align-items: center !important;
  }
  .mh-tld-badge svg {
    width: 100% !important;
    height: auto !important;
    max-width: 130px;
  }

  /* "View all pricing" link below the grid, centred */
  .mh-domain-search-wrap .btn-link.float-right {
    float: none !important;
    display: block;
    text-align: center;
    margin-top: 12px;
  }
}

/* ── Notification dropdown — CSS hover/focus, no JS needed ─── */
.mh-notif-wrap {
  position: relative;
  /* extend clickable/hover area downward to bridge the gap */
  padding-bottom: 12px;
  margin-bottom: -12px;
}
.mh-notif-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  width: 300px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--mh-card);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow);
  z-index: 1060;
  /* visibility + opacity so we can delay the hide transition */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.35s;
}
/* Show on hover OR focus anywhere inside the wrapper */
.mh-notif-wrap:hover .mh-notif-dropdown,
.mh-notif-wrap:focus-within .mh-notif-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  /* remove the close-delay when showing */
  transition: opacity 0.15s ease, visibility 0s linear 0s;
}
.mh-notif-dropdown .client-alerts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mh-notif-dropdown .mh-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mh-border);
  color: var(--mh-text-2);
  text-decoration: none;
  font-size: 0.82rem;
  transition: background 0.15s, color 0.15s;
}
.mh-notif-dropdown .mh-notif-item:hover {
  background: var(--mh-picton-dim);
  color: var(--mh-text);
}
.mh-notif-dropdown .client-alerts li:last-child .mh-notif-item {
  border-bottom: none;
}
.mh-notif-dropdown .none {
  padding: 14px 16px;
  font-size: 0.82rem;
  color: var(--mh-text-3);
}

@keyframes mhFadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Product grid (homepage) ────────────────────────────────── */
.mh-product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 auto 2rem;
}
.mh-product-card {
  flex: 0 0 280px;
  max-width: 280px;
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  transition: border-color 0.2s, transform 0.2s;
}
.mh-product-card:hover {
  border-color: var(--mh-picton) !important;
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .mh-product-card { flex: 0 0 100%; max-width: 100%; }
}

/* ── Shopping cart / product pages ─────────────────────────── */
/* Broad sweep: every direct child block inside primary-content  */
/* that carries a white/near-white background gets overridden.   */
/* Covers .card, .well, .panel, .product, .box and any unknown   */
/* WHMCS cart class.                                             */
.primary-content > .container > div > div > div,
.primary-content > .row > div > div,
.primary-content div.card,
.primary-content div.well,
.primary-content div.panel,
.primary-content div.panel-default,
.primary-content div[class*="product"],
.primary-content div[class*="addon"],
.primary-content div[class*="pricing"],
.primary-content div[class*="order-box"],
.primary-content div[class*="package"] {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  color: var(--mh-text) !important;
}
/* Product grid is a layout wrapper, not a card — strip the box */
.primary-content div.mh-product-grid {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Card inner areas */
.primary-content .card-body,
.primary-content .card-header,
.primary-content .card-footer,
.primary-content .well,
.primary-content .panel-body,
.primary-content .panel-heading {
  background: transparent !important;
  color: var(--mh-text) !important;
}
/* Headings inside any cart container */
.primary-content div[class*="product"] h1,
.primary-content div[class*="product"] h2,
.primary-content div[class*="product"] h3,
.primary-content div[class*="product"] h4,
.primary-content div[class*="product"] h5,
.primary-content .card h1,
.primary-content .card h2,
.primary-content .card h3,
.primary-content .card h4,
.primary-content .card h5,
.primary-content .card-title {
  color: var(--mh-text) !important;
}
/* Body text */
.primary-content div[class*="product"] p,
.primary-content div[class*="product"] span,
.primary-content div[class*="product"] li,
.primary-content .card p,
.primary-content .card span:not(.badge):not(.mh-notif-badge),
.primary-content .card li {
  color: var(--mh-text-2) !important;
}
/* Pricing */
.primary-content div[class*="product"] strong,
.primary-content div[class*="pricing"] strong,
.primary-content .card strong,
.primary-content [class*="price"] {
  color: var(--mh-picton) !important;
}
/* Selects / dropdowns */
.primary-content select,
.primary-content .custom-select {
  background-color: var(--mh-bg-1) !important;
  border-color: var(--mh-border-2) !important;
  color: var(--mh-text) !important;
}
/* Hover lift on product cards */
.primary-content div[class*="product"]:hover,
.primary-content .card:hover {
  border-color: rgba(59,184,232,0.4) !important;
  transform: translateY(-2px);
  transition: border-color 0.2s, transform 0.2s;
}

/* ── Cart & product listing — Modularity cards ───────────────── */

/* Strip borders/bg from outer wrappers only — be surgical        */
.cart-body         { background: transparent !important; border: none !important; box-shadow: none !important; }
.products          { background: transparent !important; border: none !important; box-shadow: none !important; }
#order-standard_cart { background: transparent !important; border: none !important; box-shadow: none !important; }
.header-lined      { background: transparent !important; border: none !important; border-bottom: 1px solid var(--mh-border) !important; padding-bottom: 12px !important; margin-bottom: 20px !important; }

/* ── Each product card = .col-md-6 inside .products ──────────── */
.products .col-md-6 {
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* The card face — direct children of .col-md-6 that are the     */
/* product name span and description                              */
/* We make .col-md-6 itself the card                              */
.products .col-md-6 {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.35) !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s !important;
  overflow: visible !important;
  margin-bottom: 4px !important;
}
.products .col-md-6:hover {
  border-color: var(--mh-picton) !important;
  box-shadow: 0 6px 30px rgba(0,0,0,0.45), 0 0 22px rgba(59,184,232,0.22) !important;
  transform: translateY(-3px) !important;
}

/* Product name — first SPAN child (no class) */
.products .col-md-6 > span {
  display: block !important;
  background: var(--mh-bg-2) !important;
  border-bottom: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) var(--mh-radius) 0 0 !important;
  padding: 14px 18px !important;
  font-family: var(--mh-font-head) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--mh-text) !important;
}

/* Description body */
.products .col-md-6 .product-desc {
  background: transparent !important;
  padding: 14px 18px !important;
  color: var(--mh-text-2) !important;
  flex: 1 !important;
  border: none !important;
}
.products .col-md-6 .product-desc p { color: var(--mh-text-2) !important; font-size: 0.84rem !important; line-height: 1.6 !important; }

/* Domain select */
.products .col-md-6 select,
.products .col-md-6 .custom-select {
  width: 100% !important;
  background: var(--mh-bg-1) !important;
  border: 1px solid var(--mh-border-2) !important;
  border-radius: var(--mh-radius-sm) !important;
  color: var(--mh-text) !important;
  padding: 6px 10px !important;
}
.products .col-md-6 select option { background: var(--mh-bg-1) !important; color: var(--mh-text) !important; }

/* Pricing footer */
.products .col-md-6 footer.col-12 {
  background: var(--mh-bg-1) !important;
  border-top: 1px solid var(--mh-border) !important;
  border-radius: 0 0 var(--mh-radius) var(--mh-radius) !important;
  padding: 12px 18px 16px !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.products .col-md-6 .product-pricing {
  background: transparent !important;
  border: none !important;
  color: var(--mh-picton) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin-bottom: 10px !important;
}
.products .col-md-6 .product-pricing * { color: var(--mh-picton) !important; background: transparent !important; border: none !important; }

/* Order Now button */
.products .col-md-6 .btn-success {
  border-radius: 999px !important;
  padding: 8px 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 14px rgba(16,185,129,0.3) !important;
}

/* ── Domain register / checker page ─────────────────────────── */

/* Outer container — transparent, no box */
.domain-checker-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Search hero area — card encasement */
.domain-checker-bg,
.domain-checker-bg.clearfix,
.primary-content .domain-checker-bg {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
  overflow: visible !important;
  padding: 24px 32px !important;
  margin-bottom: 16px !important;
}

/* Dim the background globe illustration */
.domain-checker-bg img:not(.tld-logo) { opacity: 0.18 !important; }

/* Kill the white input-group-box wrapper */
.input-group-box,
.domain-checker-bg .input-group-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Search pill: .input-group is the pill container ────────── */
.domain-checker-bg .input-group,
.domain-checker-bg .input-group.input-group-lg {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid var(--mh-border-2) !important;
  border-radius: 999px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.domain-checker-bg .input-group:focus-within {
  border-color: var(--mh-picton) !important;
}

/* Input — transparent, fills space, no extra borders */
.domain-checker-bg #inputDomain,
.domain-checker-bg input[type="text"],
.domain-checker-bg input[type="search"],
.domain-checker-bg .input-group > .form-control,
.domain-checker-bg .input-group > input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--mh-text) !important;
  padding: 14px 22px !important;
  font-size: 1rem !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
}
.domain-checker-bg input:focus { box-shadow: none !important; outline: none !important; }

/* Force the Bootstrap column to full width so offsets don't bite on mobile */
.domain-checker-bg [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Span wrapper for the button */
.domain-checker-bg .input-group-append,
.domain-checker-bg .input-group-btn,
span.input-group-append,
span.input-group-btn {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
}

/* Button — container's overflow:hidden handles left rounding,
   button just needs right-side radius and no overflow:hidden itself */
.domain-checker-bg .btn.domain-check-availability,
.domain-checker-bg .input-group-append .btn,
.domain-checker-bg .input-group-btn .btn,
.domain-checker-bg button[type="submit"],
#frmDomainChecker .btn {
  border-radius: 0 999px 999px 0 !important;
  overflow: visible !important;
  padding: 14px 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  height: auto !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: normal !important;
}

/* ── Featured TLD cards ──────────────────────────────────────── */
.featured-tlds-container {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  padding: 20px !important;
  margin-top: 16px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: center !important;
}
.featured-tld {
  background: var(--mh-bg-1) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  overflow: hidden !important;
  flex: 1 1 180px !important;
  max-width: 220px !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
  cursor: pointer !important;
}
.featured-tld:hover {
  border-color: var(--mh-picton) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 16px rgba(59,184,232,0.18) !important;
  transform: translateY(-3px) !important;
}
/* TLD logo — white inset badge, centered via text-align (WHMCS approach) */
.featured-tld .img-container {
  text-align: center !important;
  overflow: visible !important;
  height: auto !important;
  line-height: normal !important;
  padding: 16px 12px !important;
  background: transparent !important;
}
.featured-tld .img-container img,
.featured-tld img {
  display: inline-block !important;
  width: auto !important;
  max-width: 85% !important;
  height: 56px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  padding: 8px 14px !important;
  background: #fff !important;
  border-radius: var(--mh-radius-sm) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  filter: none !important;
  box-sizing: border-box !important;
}
/* Price bar at bottom of TLD card */
.featured-tld [class*="price"],
.featured-tld .tld-price,
.featured-tld > div:last-child {
  background: var(--mh-picton-dim) !important;
  border-top: 1px solid var(--mh-border) !important;
  color: var(--mh-picton) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 8px 12px !important;
  text-align: center !important;
}

/* ── Announcements excerpt box ──────────────────────────────── */
.announcement article {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  color: var(--mh-text) !important;
}
.announcement article * {
  color: var(--mh-text) !important;
}

/* ── Domain search spotlight TLDs (result cards after search) ── */
.spotlight-tlds {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.spotlight-tld {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  color: var(--mh-text) !important;
}
.spotlight-tld * {
  color: var(--mh-text) !important;
}

/* ── TLD pricing table ───────────────────────────────────────── */
/* Override the broad [class*="pricing"] rule that boxes this whole section */
.domain-pricing,
.primary-content .domain-pricing,
.primary-content div.domain-pricing {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tld-pricing-header {
  background: var(--mh-bg-2) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) var(--mh-radius) 0 0 !important;
  color: var(--mh-text) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 10px 0 !important;
}
.tld-pricing-header *,
.tld-pricing-header [class*="col"],
.tld-pricing-header .tld-column,
.tld-pricing-header div {
  background: transparent !important;
  color: var(--mh-text) !important;
  border: none !important;
}

.tld-row {
  background: transparent !important;
  border: 1px solid var(--mh-border) !important;
  border-top: none !important;
  transition: background 0.15s !important;
}
.tld-row:last-child { border-radius: 0 0 var(--mh-radius) var(--mh-radius) !important; }
.tld-row:hover { background: var(--mh-bg-1) !important; }
.tld-row.highlighted { background: var(--mh-picton-dim) !important; }
.tld-row * { color: var(--mh-text-2) !important; }
.tld-row strong, .tld-row .tld-name { color: var(--mh-text) !important; font-weight: 700 !important; }
.tld-row [class*="price"], .tld-row .price { color: var(--mh-picton) !important; font-weight: 700 !important; }
.tld-row .btn { border-radius: 999px !important; padding: 5px 18px !important; font-size: 0.8rem !important; }

/* Filters */
.tld-filters {
  background: transparent !important;
  margin-bottom: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: visible !important;
}
.tld-filters .btn, .tld-filters button {
  background: var(--mh-bg-1) !important;
  border: 1px solid var(--mh-border-2) !important;
  border-radius: 999px !important;
  color: var(--mh-text-2) !important;
  font-size: 0.78rem !important;
  padding: 5px 14px !important;
  margin: 3px !important;
}
.tld-filters .btn.active, .tld-filters .btn:hover {
  background: var(--mh-picton-dim) !important;
  border-color: var(--mh-picton) !important;
  color: var(--mh-picton) !important;
}

/* Promo boxes */
.domain-promo-box {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  padding: 16px 20px !important;
  color: var(--mh-text-2) !important;
}
.domain-promo-box * { color: var(--mh-text-2) !important; }
.domain-promo-box strong, .domain-promo-box h3 { color: var(--mh-text) !important; }

/* ── DataTables / listing tables — sitewide dark ─────────────── */
table.dataTable,
.dataTables_wrapper table {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}
/* Header */
table.dataTable thead th,
table.dataTable thead td,
.dataTables_wrapper thead th,
.dataTables_wrapper thead td {
  background: var(--mh-bg-2) !important;
  color: var(--mh-text) !important;
  border-bottom: 1px solid var(--mh-border) !important;
  border-top: none !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 12px 14px !important;
}
/* Sort arrows */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { color: var(--mh-picton) !important; opacity: 0.6; }

/* Body rows */
table.dataTable tbody tr,
.dataTables_wrapper tbody tr {
  background: transparent !important;
  border-bottom: 1px solid var(--mh-border) !important;
  transition: background 0.15s !important;
}
table.dataTable tbody tr:last-child,
.dataTables_wrapper tbody tr:last-child { border-bottom: none !important; }
table.dataTable tbody tr:hover,
.dataTables_wrapper tbody tr:hover { background: var(--mh-bg-1) !important; }

/* Striping — override DataTables odd/even */
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even { background: transparent !important; }
table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.even:hover { background: var(--mh-bg-1) !important; }

/* Cells */
table.dataTable tbody td,
.dataTables_wrapper tbody td {
  background: transparent !important;
  color: var(--mh-text-2) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--mh-border) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}
table.dataTable tbody td strong,
table.dataTable tbody td a { color: var(--mh-text) !important; }
table.dataTable tbody td a:hover { color: var(--mh-picton) !important; }

/* DataTables controls (search, show entries, pagination) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--mh-text-2) !important; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--mh-bg-1) !important;
  border: 1px solid var(--mh-border-2) !important;
  border-radius: var(--mh-radius-sm) !important;
  color: var(--mh-text) !important;
  padding: 6px 12px !important;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--mh-bg-1) !important;
  border: 1px solid var(--mh-border-2) !important;
  border-radius: var(--mh-radius-sm) !important;
  color: var(--mh-text-2) !important;
  margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--mh-picton-dim) !important;
  border-color: var(--mh-picton) !important;
  color: var(--mh-picton) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.35 !important; }

/* ── Cart review page — Modularity style ─────────────────────── */

/* Strip outer wrappers */
.cart-body,
.secondary-cart-body { background: transparent !important; border: none !important; box-shadow: none !important; }

/* ── Items card ──────────────────────────────────────────────── */
.view-cart-items-header {
  background: var(--mh-bg-2) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) var(--mh-radius) 0 0 !important;
  padding: 12px 18px !important;
  color: var(--mh-text) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.view-cart-items-header * { color: var(--mh-text) !important; }

.view-cart-items {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--mh-radius) var(--mh-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
  margin-bottom: 16px !important;
}

.item {
  background: transparent !important;
  border-bottom: 1px solid var(--mh-border) !important;
  padding: 16px 18px !important;
  transition: background 0.15s !important;
}
.item:last-child { border-bottom: none !important; }
.item:hover { background: var(--mh-bg-1) !important; }
.item * { color: var(--mh-text-2) !important; }
.item strong,
.item [class*="name"],
.item h3, .item h4 { color: var(--mh-text) !important; font-weight: 600 !important; }
.item-price,
.item .item-price,
.col-sm-4.item-price { color: var(--mh-picton) !important; font-weight: 700 !important; }
.item-price * { color: var(--mh-picton) !important; }

/* Empty cart message */
.empty-cart { color: var(--mh-text-2) !important; padding: 24px !important; text-align: center !important; }

/* ── Promo / tabs card ───────────────────────────────────────── */
.view-cart-tabs {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25) !important;
  margin-bottom: 16px !important;
}
.view-cart-tabs .nav-tabs { border-bottom: 1px solid var(--mh-border) !important; padding: 0 12px !important; background: var(--mh-bg-1) !important; }
.view-cart-tabs .nav-link { color: var(--mh-text-3) !important; border: none !important; background: transparent !important; padding: 10px 16px !important; }
.view-cart-tabs .nav-link.active { color: var(--mh-picton) !important; border-bottom: 2px solid var(--mh-picton) !important; }
.view-cart-tabs .tab-content { padding: 16px 18px !important; }
.view-cart-tabs .tab-content * { color: var(--mh-text-2) !important; }

/* Promo input */
.view-cart-tabs input.form-control,
#inputPromotionCode {
  background: var(--mh-bg-1) !important;
  border: 1px solid var(--mh-border-2) !important;
  border-radius: 999px !important;
  color: var(--mh-text) !important;
  padding: 10px 18px !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}
/* Validate Code button */
.view-cart-tabs .btn {
  background: var(--mh-bg-1) !important;
  border: 1px solid var(--mh-border-2) !important;
  border-radius: 999px !important;
  color: var(--mh-text) !important;
  font-weight: 600 !important;
  width: 100% !important;
  padding: 10px !important;
}
.view-cart-tabs .btn:hover {
  border-color: var(--mh-picton) !important;
  color: var(--mh-picton) !important;
  background: var(--mh-picton-dim) !important;
}

/* ── Order Summary sidebar card ─────────────────────────────── */
.order-summary,
#orderSummary {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
  transition: box-shadow 0.25s !important;
}
.order-summary:hover,
#orderSummary:hover {
  box-shadow: 0 6px 32px rgba(0,0,0,0.45), 0 0 22px rgba(59,184,232,0.18) !important;
}

/* Summary title bar */
.order-summary h2,
.order-summary h3,
#orderSummary h2,
#orderSummary h3 {
  background: var(--mh-bg-2) !important;
  border-bottom: 1px solid var(--mh-border) !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  font-family: var(--mh-font-head) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.06em !important;
  color: var(--mh-text) !important;
}

/* Summary rows */
.order-summary *,
#orderSummary * { color: var(--mh-text-2) !important; font-size: 0.9rem !important; }
.order-summary strong,
#orderSummary strong { color: var(--mh-text) !important; }

/* Total due — keep it prominent but not giant */
.order-summary [class*="total"],
.order-summary [class*="amount"],
#orderSummary [class*="total"],
#orderSummary [class*="amount"] {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--mh-picton) !important;
  line-height: 1.2 !important;
}
/* The "USD" and "Total Due Today" labels next to the big number */
.order-summary [class*="total"] small,
.order-summary [class*="total"] span,
#orderSummary [class*="total"] small,
#orderSummary [class*="total"] span,
#orderSummary p { font-size: 0.82rem !important; color: var(--mh-text-3) !important; }

/* Checkout button */
.order-summary .btn-success,
#orderSummary .btn-success {
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 13px 0 !important;
  width: 100% !important;
  font-size: 1rem !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 3px 16px rgba(16,185,129,0.35) !important;
}
.order-summary a:not(.btn),
#orderSummary a:not(.btn) { color: var(--mh-text-3) !important; font-size: 0.8rem !important; }
.order-summary a:not(.btn):hover,
#orderSummary a:not(.btn):hover { color: var(--mh-picton) !important; }

/* ── header.col-12 (addons page title bar) ────────────────────── */
.primary-content header.col-12,
#main-body header.col-12,
#main-body header {
  background: var(--mh-bg-2) !important;
  border-bottom: 1px solid var(--mh-border) !important;
  color: var(--mh-text) !important;
  padding: 14px 18px !important;
  font-family: var(--mh-font-head) !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em !important;
}
.primary-content header.col-12 *,
#main-body header * { color: var(--mh-text) !important; }


.item {
  background: var(--mh-bg-1) !important;
  color: var(--mh-text) !important;
  border-color: var(--mh-border) !important;
}
.item * { color: var(--mh-text-2) !important; }
.item h3, .item h4, .item strong, .item .name { color: var(--mh-text) !important; }
.item .price, .item [class*="price"], .item .amount { color: var(--mh-picton) !important; }

.summary-container {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  color: var(--mh-text) !important;
}
.summary-container * { color: var(--mh-text-2) !important; }
.summary-container h2, .summary-container h3,
.summary-container strong, .summary-container .total { color: var(--mh-text) !important; }
.summary-container [class*="price"],
.summary-container [class*="total"],
.summary-container .amount { color: var(--mh-picton) !important; }

.modal-header {
  background: var(--mh-bg-1) !important;
  border-bottom: 1px solid var(--mh-border) !important;
  color: var(--mh-text) !important;
}
.modal-header * { color: var(--mh-text) !important; }

.lb-outerContainer {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
}

/* ── Cart review / checkout page ───────────────────────────── */
/* Cart items table rows */
.cart-items,
.cart-items tr,
.cart-items td,
.cart-items th,
.order-details,
.order-details tr,
.order-details td,
.order-details th,
#tblCart,
#tblCart tr,
#tblCart td,
#tblCart th,
.table-cart tr,
.table-cart td {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mh-text) !important;
  border-color: var(--mh-border) !important;
}

/* The individual product row that stays white */
.checkout-product-row,
.cart-product-row,
.item-row,
tr.item,
tr.product {
  background: var(--mh-bg-1) !important;
  color: var(--mh-text) !important;
}

/* Order Summary card header */
.order-summary,
.cart-summary,
.order-summary .card,
.order-summary .card-body,
.order-summary .card-header,
.cart-summary .card,
.cart-summary .card-body,
.cart-summary .card-header,
[class*="order-summary"],
[id*="order-summary"] {
  background: var(--mh-card) !important;
  border-color: var(--mh-border) !important;
  color: var(--mh-text) !important;
}
[class*="order-summary"] h2,
[class*="order-summary"] h3,
[class*="order-summary"] h4,
[id*="order-summary"] h2,
[id*="order-summary"] h3 {
  color: var(--mh-text) !important;
}

/* Promo code / validate button */
.promo-code-container,
.coupon-form,
[class*="promo"],
[class*="coupon"] {
  background: transparent !important;
  color: var(--mh-text) !important;
}
.promo-code-container .btn,
.coupon-form .btn,
[class*="promo"] .btn,
[class*="coupon"] .btn,
button[id*="validate"],
button[id*="promo"],
input[type="submit"][id*="validate"] {
  background: var(--mh-bg-1) !important;
  border: 1px solid var(--mh-border-2) !important;
  color: var(--mh-text) !important;
  border-radius: 999px !important;
}
.promo-code-container .btn:hover,
[class*="promo"] .btn:hover {
  background: var(--mh-picton-dim) !important;
  border-color: var(--mh-picton) !important;
  color: var(--mh-picton) !important;
}

/* Checkout button pill */
.btn-checkout,
a.btn-checkout,
button.btn-checkout,
[class*="checkout"] .btn-success,
[id*="checkout"] .btn-success {
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 12px 36px !important;
}

/* Tab nav (Apply Promo Code tab) */
.nav-tabs .nav-link,
.nav-tabs .nav-item .nav-link {
  color: var(--mh-text-2) !important;
  border-color: transparent !important;
  background: transparent !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item .nav-link.active {
  color: var(--mh-picton) !important;
  border-bottom: 2px solid var(--mh-picton) !important;
  background: transparent !important;
}
.nav-tabs {
  border-bottom-color: var(--mh-border) !important;
}

/* ── Invoice payment page ───────────────────────────────────── */
/* Kill the white table background inside the summary card */
.invoice-summary-table,
.invoice-summary-table table,
.invoice-summary-table tr,
.invoice-summary-table td,
#invoiceIdSummary,
#invoiceIdSummary .card-body,
#invoiceIdSummary table,
#invoiceIdSummary tr,
#invoiceIdSummary td {
  background: transparent !important;
  color: var(--mh-text) !important;
  border-color: var(--mh-border) !important;
}
#invoiceIdSummary .table td { border-top: 1px solid var(--mh-border) !important; }

/* Submit Payment button — pill, spaced away from card above */
#btnSubmitContainer {
  margin-top: 20px !important;
  padding-top: 4px !important;
}
#btnSubmit,
#frmPayment .btn-primary {
  border-radius: 999px !important;
  padding: 12px 40px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  min-width: 180px;
}

/* ── TLD SVG badge list ─────────────────────────────────────── */
ul.mh-tld-list,
.mh-tld-list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: flex-start !important;
}
ul.mh-tld-list::before,
ul.mh-tld-list::after,
.mh-tld-list li::before,
.mh-tld-list li::marker {
  display: none !important;
  content: none !important;
}
.mh-tld-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  list-style: none !important;
}
.mh-tld-badge {
  display: block;
  line-height: 0;
}
.mh-tld-badge svg {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  transition: transform 0.18s, filter 0.18s;
}
.mh-tld-item:hover .mh-tld-badge svg {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 4px 12px rgba(59,184,232,0.3));
}
.mh-tld-price {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mh-text-2);
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-align: center;
}
/* Hide the old img-based tld-logos if any remain */
.tld-logos { display: none !important; }

/* ── Domain search pill ─────────────────────────────────────── */
.mh-domain-search-wrap .input-group,
.mh-domain-search-wrap .input-group-wrapper {
  border-radius: var(--mh-radius-pill) !important;
  overflow: hidden;
}
@media(min-width:576px) {
  .mh-domain-search-wrap .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  .mh-domain-search-wrap .input-group-append {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .mh-domain-search-wrap .input-group-append .btn {
    border-radius: 0 var(--mh-radius-pill) var(--mh-radius-pill) 0 !important;
    white-space: nowrap !important;
  }
}
.mh-domain-search-wrap input[type="text"],
.mh-domain-search-wrap input[type="search"] {
  border-radius: var(--mh-radius-pill) 0 0 var(--mh-radius-pill) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--mh-border-2) !important;
  border-right: none !important;
  color: var(--mh-text) !important;
}
.mh-domain-search-wrap input[type="text"]:focus,
.mh-domain-search-wrap input[type="search"]:focus {
  border-color: var(--mh-picton) !important;
  box-shadow: 0 0 0 2px var(--mh-picton-dim) !important;
}
/* Append buttons — pill by default, split for inline groups on desktop */
.mh-domain-search-wrap .input-group-append .btn,
.mh-domain-search-wrap .input-group-append button {
  border-radius: var(--mh-radius-pill) !important;
}
/* Desktop: first button rounded left, last button rounded right */
@media(min-width:576px) {
  .mh-domain-search-wrap .input-group-append .btn:first-child,
  .mh-domain-search-wrap .input-group-append button:first-child {
    border-radius: var(--mh-radius-pill) 0 0 var(--mh-radius-pill) !important;
  }
  .mh-domain-search-wrap .input-group-append .btn:last-child,
  .mh-domain-search-wrap .input-group-append button:last-child {
    border-radius: 0 var(--mh-radius-pill) var(--mh-radius-pill) 0 !important;
  }
}
/* standalone pill buttons (TLD list, etc.) */
.mh-domain-search-wrap .btn-group .btn {
  border-radius: var(--mh-radius-pill) !important;
}

/* ── Homepage action icon buttons (dark) ────────────────────── */
.action-icon-btns a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 22px 12px !important;
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  color: var(--mh-text-2) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  /* Single unified transition — no height/padding changes, only visual properties */
  transition: border-color 0.25s ease, color 0.25s ease,
              background 0.25s ease, box-shadow 0.25s ease,
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: transform;
}
.action-icon-btns a:hover {
  border-color: var(--mh-picton) !important;
  color: var(--mh-picton) !important;
  background: rgba(59,184,232,0.05) !important;
  box-shadow: 0 8px 24px rgba(59,184,232,0.12) !important;
  transform: translateY(-4px) !important;
  text-decoration: none;
  padding: 22px 12px !important; /* lock padding — prevent height jump */
}
.action-icon-btns .ico-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mh-picton-dim);
  font-size: 1.2rem;
  color: var(--mh-picton);
  margin-bottom: 2px;
  transition: background 0.25s ease;
}
.action-icon-btns a:hover .ico-container {
  background: rgba(59,184,232,0.22);
}
/* accent colour overrides — map original accent classes to picton */
.action-icon-btns a[class*="card-accent"] .ico-container { color: var(--mh-picton); }
.action-icon-btns a.card-accent-midnight-blue .ico-container { background: rgba(59,184,232,0.1); }

/* ── Client home card headers (dark) ────────────────────────── */
.client-home-cards .card-header,
.home-panels .card-header,
.panel-default > .panel-heading {
  background-color: transparent !important;
  border-bottom: 1px solid var(--mh-border) !important;
  color: var(--mh-text) !important;
}

/* ── addons_html / promotions widget dark override ───────────── */
/* Precise wrapper we control */
.mh-addon-block,
.mh-addon-block .card,
.mh-addon-block .panel,
.mh-addon-block .panel-default,
.mh-addon-block > div {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  color: var(--mh-text) !important;
}
.mh-addon-block .card-header,
.mh-addon-block .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--mh-border) !important;
  color: var(--mh-text) !important;
}
.mh-addon-block .card-body,
.mh-addon-block .panel-body {
  background: transparent !important;
  color: var(--mh-text-2) !important;
}
.mh-addon-block .card-footer,
.mh-addon-block .panel-footer {
  background: var(--mh-bg-1) !important;
  border-top: 1px solid var(--mh-border) !important;
}
.mh-addon-block h1, .mh-addon-block h2, .mh-addon-block h3,
.mh-addon-block h4, .mh-addon-block h5, .mh-addon-block h6 {
  color: var(--mh-text) !important;
}
.mh-addon-block .text-muted { color: var(--mh-text-2) !important; }
.mh-addon-block a:not(.btn) { color: var(--mh-picton) !important; }
.mh-addon-block .btn-default {
  background: var(--mh-bg-1) !important;
  border-color: var(--mh-border-2) !important;
  color: var(--mh-text) !important;
}
/* Keep the coloured top-border accent from WHMCS panel colours */
.mh-addon-block .card-accent-orange { border-top: 3px solid #f97316 !important; }
.mh-addon-block .card-accent-blue   { border-top: 3px solid var(--mh-picton) !important; }
.mh-addon-block .card-accent-green  { border-top: 3px solid var(--mh-green) !important; }


/*  WHMCS injects this block from core modules — force every     */
/*  possible class/element to dark theme                          */
.client-home-cards ~ div,            /* sibling addon wrapper    */
.client-home-cards + div,
[id*="promotion"],
[class*="promotion"],
[class*="promo-"],
[id*="promo"],
.panel-promotion,
.promotions-panel,
.addon-wrapper,
.addons-html,
.recommended-panel {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  color: var(--mh-text) !important;
}

/* The actual injected div wrapping each $addon_html */
.client-home-cards ~ div > div,
[class*="promotion"] .panel,
[class*="promotion"] .card,
[class*="promo"] .panel,
[class*="promo"] .card {
  background: var(--mh-card) !important;
  border-color: var(--mh-border) !important;
  color: var(--mh-text) !important;
}

/* Target the addon output wrappers directly from clientareahome */
#addons_html > div,
#addons-html > div,
.addons-output > div {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
}

/* Contact form */
.mh-contact-form .form-group { margin-bottom: 20px; }
.mh-contact-form label {
  display: block; margin-bottom: 6px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--mh-text-2);
}
.mh-contact-form .form-control { padding: 12px 16px; font-size: 0.95rem; }
.mh-contact-form textarea.form-control { resize: vertical; min-height: 180px; }
.mh-contact-form .row { margin-bottom: 0; }

/* Captcha dark mode */
.default-captcha {
  background: #0d1e35 !important;
  background-color: #0d1e35 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  color: #e8f0f8 !important;
}
.default-captcha p, .default-captcha label {
  color: #e8f0f8 !important;
}
/* Captcha input field */
#inputCaptcha {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #e8f0f8 !important;
  border-radius: 8px !important;
}

/* Mobile nav — hide logo text, show M mark only */
@media (max-width: 575px) {
  .mh-logo-text { display: none !important; }
}

/* Domain renewals outer wrapper */
.domain-renewals {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Domain renewal cart item */
.domain-renewal {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  color: var(--mh-text) !important;
  padding: 20px !important;
}
.domain-renewal * { color: var(--mh-text) !important; }
.domain-renewal a { color: var(--mh-picton) !important; }

/* Bootstrap bg-* utility overrides — prevent white/light backgrounds in content */
.primary-content .bg-white,
.primary-content .bg-light,
.store-domain-tab-content.bg-white,
.tab-content.bg-white {
  background-color: var(--mh-card) !important;
  color: var(--mh-text) !important;
}

/* Broad sweep: any panel/card anywhere inside .primary-content   */
.primary-content .panel,
.primary-content .panel-default,
.primary-content .card:not(.mh-product-card):not(.order-summary),
.primary-content [style*="background:#fff"],
.primary-content [style*="background: #fff"],
.primary-content [style*="background:white"],
.primary-content [style*="background-color:#fff"],
.primary-content [style*="background-color: #fff"],
.primary-content [style*="background-color:white"],
.primary-content [style*="background-color: white"],
.primary-content [style*="background-color: rgb(255, 255, 255)"],
.primary-content [style*="background-color: rgb(248"] {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border) !important;
  color: var(--mh-text) !important;
}
.primary-content .panel *,
.primary-content .panel-default *,
.primary-content .panel-body,
.primary-content .panel-heading {
  background: transparent !important;
  color: var(--mh-text) !important;
}

/* Recommended / promo panel heading & nav arrows */
[class*="promotion"] h2,
[class*="promotion"] h3,
[class*="promotion"] h4,
[class*="promo"] h2,
[class*="promo"] h3,
[class*="promo"] h4,
.primary-content [class*="recommended"] h2,
.primary-content [class*="recommended"] h3 {
  color: var(--mh-text) !important;
}

[class*="promotion"] .text-muted,
[class*="promo"] .text-muted,
.primary-content [class*="recommended"] .text-muted {
  color: var(--mh-text-2) !important;
}

/* Slider prev/next arrow buttons */
[class*="promotion"] .btn-default,
[class*="promo"] .btn-default,
[class*="promotion"] button,
[class*="promo"] button {
  background: var(--mh-bg-1) !important;
  border-color: var(--mh-border-2) !important;
  color: var(--mh-text) !important;
}
[class*="promotion"] .btn-default:hover,
[class*="promo"] .btn-default:hover {
  background: var(--mh-picton-dim) !important;
  border-color: var(--mh-picton) !important;
  color: var(--mh-picton) !important;
}

/* Orange/coloured top-border accent on the slider card — keep it */
[class*="promotion"] .card-accent-orange,
[class*="promo"] .card-accent-orange {
  border-top: 3px solid #f97316 !important;
}

/* ── Mobile horizontal scroll fixes ──────────────────────── */
@media (max-width: 767px) {
  /* DataTables / product & domain list tables */
  .dataTables_wrapper,
  .table-responsive,
  #tableProductsList_wrapper,
  #tableDomainsList_wrapper,
  .primary-content .dataTables_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Prevent the table itself from forcing page-width overflow */
  .dataTables_wrapper table,
  .primary-content table {
    min-width: 0 !important;
  }
  /* Domain management action button group — stack instead of row */
  .domain-actions .btn-group,
  #domain-actions .btn-group,
  .bulk-actions .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .domain-actions .btn-group .btn,
  #domain-actions .btn-group .btn,
  .bulk-actions .btn-group .btn {
    flex: 1 1 auto !important;
    white-space: normal !important;
    font-size: 0.8rem !important;
  }
  /* Generic: any panel/card that is wider than viewport */
  .primary-content .panel,
  .primary-content .card {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   Market Connect Product Pages — Dark Whitelabel Style
   ============================================================ */

/* ── Reset vendor light-mode wrappers ─────────────────────── */
.mh-mc-page {
  background: var(--mh-bg) !important;
  color: var(--mh-text) !important;
  font-family: inherit;
}

/* ── Hero ─────────────────────────────────────────────────── */
.mh-mc-hero {
  padding: 80px 0 72px;
  text-align: center;
  background: linear-gradient(180deg, var(--mh-bg-2) 0%, var(--mh-bg) 100%);
  border-bottom: 1px solid var(--mh-border);
  position: relative;
  overflow: hidden;
}
.mh-mc-hero::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(59,184,232,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.mh-mc-label {
  display: inline-block;
  background: rgba(59,184,232,0.1);
  color: var(--mh-picton);
  border: 1px solid rgba(59,184,232,0.25);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  margin-bottom: 20px;
}
.mh-mc-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--mh-text);
  margin-bottom: 18px;
}
.mh-mc-accent { color: var(--mh-picton); }
.mh-mc-hero p {
  font-size: 1.05rem;
  color: var(--mh-text-2);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.65;
}

/* ── Buttons ──────────────────────────────────────────────── */
.mh-mc-btn {
  display: inline-block;
  background: var(--mh-picton) !important;
  color: #06101c !important;
  font-weight: 700 !important;
  padding: 13px 30px !important;
  border-radius: var(--mh-radius-pill) !important;
  border: none !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.15s;
}
.mh-mc-btn:hover {
  background: var(--mh-picton-lt) !important;
  color: #06101c !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}
.mh-mc-btn-ghost {
  display: inline-block;
  background: transparent !important;
  color: var(--mh-picton) !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  border-radius: var(--mh-radius-pill) !important;
  border: 1px solid var(--mh-picton) !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: background 0.2s;
}
.mh-mc-btn-ghost:hover {
  background: var(--mh-picton-dim) !important;
  text-decoration: none !important;
}

/* ── Content sections ─────────────────────────────────────── */
.mh-mc-section {
  padding: 72px 0;
}
.mh-mc-section-alt {
  background: var(--mh-bg-1) !important;
  border-top: 1px solid var(--mh-border);
  border-bottom: 1px solid var(--mh-border);
}
.mh-mc-section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--mh-text);
  margin-bottom: 8px;
}
.mh-mc-heading-line {
  display: block;
  width: 40px; height: 3px;
  background: var(--mh-picton);
  border-radius: 2px;
  margin: 0 0 48px;
}
.mh-mc-section-center .mh-mc-heading-line { margin: 0 auto 48px; }
.mh-mc-section-center { text-align: center; }

/* ── Features grid ────────────────────────────────────────── */
.mh-mc-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.mh-mc-feature-card {
  background: var(--mh-card);
  border: 1px solid var(--mh-border-2);
  border-radius: var(--mh-radius);
  padding: 28px 24px;
  transition: border-color 0.2s, transform 0.2s;
}
.mh-mc-feature-card:hover {
  border-color: var(--mh-border);
  transform: translateY(-3px);
}
.mh-mc-feature-icon {
  width: 40px; height: 40px;
  background: var(--mh-picton-dim);
  border-radius: var(--mh-radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--mh-picton);
  margin-bottom: 16px;
}
.mh-mc-feature-card h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--mh-text);
  margin-bottom: 8px;
}
.mh-mc-feature-card p {
  font-size: 0.875rem;
  color: var(--mh-text-2);
  line-height: 1.6;
  margin: 0;
}

/* ── Pricing cards ────────────────────────────────────────── */
.mh-mc-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.mh-mc-plan-card {
  background: var(--mh-card);
  border: 1px solid var(--mh-border-2);
  border-radius: var(--mh-radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.mh-mc-plan-card.mh-mc-featured {
  border-color: var(--mh-picton);
  background: var(--mh-card-2);
  position: relative;
}
.mh-mc-plan-card.mh-mc-featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--mh-picton);
  color: #06101c;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.mh-mc-plan-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mh-text);
  margin-bottom: 4px;
}
.mh-mc-plan-desc {
  font-size: 0.82rem;
  color: var(--mh-text-3);
  margin-bottom: 20px;
  line-height: 1.5;
}
.mh-mc-plan-price {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--mh-text);
  margin-bottom: 4px;
}
.mh-mc-plan-cycle {
  font-size: 0.8rem;
  color: var(--mh-text-3);
  margin-bottom: 24px;
}
.mh-mc-plan-features {
  list-style: none;
  padding: 0; margin: 0 0 28px;
  flex: 1;
}
.mh-mc-plan-features li {
  font-size: 0.85rem;
  color: var(--mh-text-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--mh-border-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mh-mc-plan-features li:last-child { border-bottom: none; }
.mh-mc-plan-features li::before {
  content: '';
  width: 14px; height: 14px; flex-shrink: 0;
  background: var(--mh-picton);
  border-radius: 50%;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.mh-mc-plan-order-form { margin-top: auto; }
.mh-mc-plan-order-form .form-control {
  background: var(--mh-bg-2) !important;
  color: var(--mh-text) !important;
  border-color: var(--mh-border-2) !important;
  margin-bottom: 10px;
}
.mh-mc-plan-order-form button,
.mh-mc-plan-card .btn {
  width: 100%;
  background: var(--mh-picton) !important;
  color: #06101c !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--mh-radius-pill) !important;
  padding: 11px 0 !important;
}
.mh-mc-plan-card .btn:hover {
  background: var(--mh-picton-lt) !important;
}

/* ── Plan comparison table (sitelock / sitebuilder style) ─── */
.mh-mc-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
}
.mh-mc-compare-table th {
  background: var(--mh-card) !important;
  color: var(--mh-text) !important;
  padding: 14px 16px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid var(--mh-border-2);
}
.mh-mc-compare-table td {
  background: var(--mh-bg-1) !important;
  color: var(--mh-text-2) !important;
  padding: 11px 16px;
  text-align: center;
  font-size: 0.85rem;
  border: 1px solid var(--mh-border-2);
}
.mh-mc-compare-table td:first-child { text-align: left; }
.mh-mc-compare-table tr:nth-child(even) td { background: var(--mh-card) !important; }
.mh-mc-compare-table .fa-check { color: var(--mh-green); }
.mh-mc-compare-table .fa-times { color: var(--mh-text-3); }

/* ── CTA banner ───────────────────────────────────────────── */
.mh-mc-cta {
  background: var(--mh-card);
  border: 1px solid var(--mh-border);
  border-radius: 16px;
  padding: 56px 40px;
  text-align: center;
}
.mh-mc-cta h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 800;
  color: var(--mh-text);
  margin-bottom: 12px;
}
.mh-mc-cta p {
  font-size: 0.95rem;
  color: var(--mh-text-2);
  max-width: 440px;
  margin: 0 auto 28px;
  line-height: 1.65;
}

/* ── Currency selector in Market Connect ─────────────────── */
.mh-mc-currency {
  text-align: right;
  margin-bottom: 16px;
}
.mh-mc-currency .form-control {
  display: inline-block;
  width: auto;
  background: var(--mh-card) !important;
  color: var(--mh-text) !important;
  border-color: var(--mh-border-2) !important;
  font-size: 0.85rem;
}

/* ── Slider pricing (codeguard) ───────────────────────────── */
.mh-mc-slider-wrap {
  background: var(--mh-card);
  border: 1px solid var(--mh-border-2);
  border-radius: var(--mh-radius);
  padding: 36px 32px;
  max-width: 640px;
}
.mh-mc-price-display {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--mh-picton);
  margin-bottom: 4px;
}
.mh-mc-price-cycle {
  font-size: 0.85rem;
  color: var(--mh-text-3);
  margin-bottom: 24px;
}
/* ion.rangeSlider dark overrides */
.irs--html5 .irs-bar, .irs--html5 .irs-handle > i { background: var(--mh-picton) !important; }
.irs--html5 .irs-line { background: var(--mh-border-2) !important; }
.irs--html5 .irs-single { background: var(--mh-picton) !important; color: #06101c !important; }
.irs--html5 .irs-grid-text { color: var(--mh-text-3) !important; }

/* ── Email security product tiles ────────────────────────── */
.mh-mc-product-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.mh-mc-product-tile {
  background: var(--mh-card);
  border: 1px solid var(--mh-border-2);
  border-radius: var(--mh-radius);
  padding: 32px 28px;
  text-align: center;
}
.mh-mc-product-tile h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mh-text);
  margin-bottom: 10px;
}
.mh-mc-product-tile .mh-mc-tile-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mh-picton);
  margin-bottom: 20px;
}
.mh-mc-product-tile .btn {
  background: var(--mh-picton) !important;
  color: #06101c !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--mh-radius-pill) !important;
}

/* ── 360 Monitoring form ──────────────────────────────────── */
.mh-mc-monitor-form .form-control {
  background: var(--mh-card) !important;
  color: var(--mh-text) !important;
  border-color: var(--mh-border-2) !important;
}
.mh-mc-monitor-form .btn-search {
  background: var(--mh-picton) !important;
  color: #06101c !important;
  border: none !important;
  border-radius: var(--mh-radius-sm) !important;
}

/* ── Accordion FAQ ────────────────────────────────────────── */
.mh-mc-faq .card {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border-2) !important;
  margin-bottom: 8px;
  border-radius: var(--mh-radius-sm) !important;
}
.mh-mc-faq .card-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0;
}
.mh-mc-faq .btn-link {
  color: var(--mh-text) !important;
  font-weight: 600;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none !important;
}
.mh-mc-faq .btn-link:hover { color: var(--mh-picton) !important; }
.mh-mc-faq .card-body {
  color: var(--mh-text-2);
  font-size: 0.9rem;
  line-height: 1.65;
  padding: 0 20px 20px;
}

/* ── Billing cycle toggle ─────────────────────────────────── */
.mh-mc-cycles {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.mh-mc-cycles .btn {
  background: var(--mh-card) !important;
  border: 1px solid var(--mh-border-2) !important;
  color: var(--mh-text-2) !important;
  border-radius: var(--mh-radius-pill) !important;
  padding: 8px 20px !important;
  font-size: 0.85rem !important;
}
.mh-mc-cycles .btn.active {
  background: var(--mh-picton) !important;
  color: #06101c !important;
  border-color: var(--mh-picton) !important;
  font-weight: 700 !important;
}

/* ── In-preview admin notice ──────────────────────────────── */
.mh-mc-preview-notice {
  text-align: center;
  padding: 32px;
  color: var(--mh-text-3);
  font-style: italic;
}

@media (max-width: 575px) {
  .mh-mc-hero { padding: 56px 0 48px; }
  .mh-mc-section { padding: 48px 0; }
  .mh-mc-cta { padding: 40px 24px; }
  .mh-mc-pricing-grid { grid-template-columns: 1fr; }
}

/* ── Hosting Plan Selector (striped-container) ───────────── */
.striped-container {
  background: var(--mh-card) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  overflow: hidden !important;
  position: relative !important;
}
/* Picton accent line at very top of the card */
.striped-container::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mh-picton) 0%, rgba(59,184,232,0.3) 100%);
  z-index: 1;
}
.striped-container .main-container {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
  padding: 40px 32px 32px !important;
  position: relative !important;
}
/* Remove the now-redundant inner ::before */
.striped-container .main-container::before { display: none !important; }
/* Heading area */
.striped-container .main-container > h2,
.striped-container .main-container h2:first-of-type {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--mh-text) !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
}
.striped-container .main-container > p,
.striped-container .main-container h2:first-of-type + p {
  color: var(--mh-text-2) !important;
  text-align: center !important;
  margin-bottom: 32px !important;
}
/* Slider wrapper — transparent, padded so bubble doesn't clip at pos 0 */
.product-selector,
.product-selector .irs,
.product-selector .irs-grid {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.product-selector {
  padding: 8px 8px 44px !important;
  overflow: visible !important;
}
/* Slider grid tick marks */
.irs-grid-pol { background: rgba(255,255,255,0.12) !important; }
.irs-grid-pol.small { background: rgba(255,255,255,0.05) !important; }
/* Grid label text */
.irs-grid-text {
  color: var(--mh-text-2) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* ── Price + Features side-by-side layout ─────────────────── */
/* DO NOT set display on .product-container — WHMCS uses display:none/block inline
   to show/hide plans as the slider moves. Use positioning instead. */
.product-container {
  position: relative !important;
  padding-left: 272px !important; /* room for the 240px price card + 32px gap */
  min-height: 200px !important;
}
/* Price card — absolutely placed on the left */
.product-container .feature-container {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 240px !important;
}
.product-container .feature-container .row { display: block !important; }
/* Hide the empty col-md-9 that WHMCS renders with nothing in it */
.product-container .feature-container .col-md-9 { display: none !important; }
/* Show the price column full width */
.product-container .feature-container [id$="-price"],
.product-container .feature-container .col-md-3 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}
/* Price card */
.price-container.container-with-progress-bar {
  background: var(--mh-bg-2, #0f2040) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-radius) !important;
  padding: 24px 20px !important;
  color: var(--mh-text-2) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.price-container .price-cont {
  display: block !important;
  margin: 10px 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.price-container .price-cont > span {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: var(--mh-picton) !important;
  display: inline !important;
  letter-spacing: -0.02em !important;
}
.price-container .price-cont small {
  display: block !important;
  font-size: 0.72rem !important;
  color: var(--mh-text-3, rgba(232,240,248,0.4)) !important;
  text-transform: none !important;
  margin-top: 4px !important;
  letter-spacing: 0 !important;
}
/* Order Now button */
a.order-button {
  display: block !important;
  width: 100% !important;
  background: var(--mh-picton) !important;
  color: #06101c !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  border: none !important;
  text-decoration: none !important;
  text-align: center !important;
  margin-top: 16px !important;
  transition: opacity 0.2s ease, transform 0.15s ease !important;
  letter-spacing: 0.02em !important;
}
a.order-button:hover,
a.order-button:focus {
  opacity: 0.85 !important;
  color: #06101c !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}
/* Features list — sits in the padding-left space created on .product-container */
.product-description {
  border-top: none !important;
  border-left: 1px solid var(--mh-border-2, rgba(255,255,255,0.07)) !important;
  margin-top: 0 !important;
  padding-top: 4px !important;
  padding-left: 32px !important;
  color: var(--mh-text-2) !important;
  font-size: 0.9rem !important;
  line-height: 2.2 !important;
}
/* Hide the duplicate small-screen price column (it'll be shown via the flex layout above) */
[id$="-price-small"] { display: none !important; }

@media (max-width: 767px) {
  .striped-container .main-container { padding: 28px 16px 20px !important; }
  .product-container { padding-left: 0 !important; padding-top: 260px !important; }
  .product-container .feature-container { width: 100% !important; }
  .product-description { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--mh-border-2) !important; padding-top: 20px !important; margin-top: 16px !important; }
  .product-selector { padding-bottom: 36px !important; }
}

/* ── Global rounded corners — eliminate all sharp edges ────── */
/* Inputs, selects, textareas */
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
select,
textarea,
.form-control,
.input-group > .form-control,
.custom-select {
  border-radius: var(--mh-radius-sm) !important;
}
.input-group > .form-control:first-child,
.input-group > select:first-child { border-radius: var(--mh-radius-sm) 0 0 var(--mh-radius-sm) !important; }
.input-group > .form-control:last-child,
.input-group > select:last-child  { border-radius: 0 var(--mh-radius-sm) var(--mh-radius-sm) 0 !important; }
.input-group-append .btn,
.input-group-btn .btn            { border-radius: 0 var(--mh-radius-sm) var(--mh-radius-sm) 0 !important; }

/* Buttons — pill style for primary/success, soft radius for secondary */
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info {
  border-radius: var(--mh-radius-pill) !important;
}
.btn-default, .btn-secondary, .btn-outline-primary,
.btn-outline-secondary, .btn-outline-default, .btn-link {
  border-radius: var(--mh-radius-pill) !important;
}

/* Tables */
.table-responsive,
.table-bordered { border-radius: var(--mh-radius-sm) !important; overflow: hidden !important; }

/* Tab containers */
.nav-tabs { border-radius: var(--mh-radius) var(--mh-radius) 0 0 !important; }

/* List groups */
.list-group { border-radius: var(--mh-radius-sm) !important; }
.list-group-item:first-child { border-radius: var(--mh-radius-sm) var(--mh-radius-sm) 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 var(--mh-radius-sm) var(--mh-radius-sm) !important; }

/* Breadcrumb */
.breadcrumb { border-radius: var(--mh-radius-sm) !important; }

/* Pagination */
.page-item:first-child .page-link { border-radius: var(--mh-radius-sm) 0 0 var(--mh-radius-sm) !important; }
.page-item:last-child  .page-link { border-radius: 0 var(--mh-radius-sm) var(--mh-radius-sm) 0 !important; }

/* Progress bars */
.progress { border-radius: 999px !important; }
.progress-bar { border-radius: 999px !important; }

/* Store domain tab content */
.store-domain-tab-content,
.tab-content.bg-white { border-radius: 0 0 var(--mh-radius) var(--mh-radius) !important; }

/* Invoice / data tables wrappers */
.dataTables_wrapper,
.panel-body,
.well { border-radius: var(--mh-radius) !important; }

/* Twenty-one responsive tab connector */
.responsive-tabs-sm-connector { border-radius: var(--mh-radius-sm) !important; }