/* ═══════════════════════════════════════════════════════════════════
   MOD DASH — Modularity Hosting client dashboard
   Standalone WHMCS theme. Light + dark mode via [data-theme].
   Loaded after all.min.css / theme.min.css (Bootstrap 4 base).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  --md-bg:           #f4f6f9;
  --md-surface:      #ffffff;
  --md-surface-2:    #f1f4f8;
  --md-surface-3:    #e9eef4;
  --md-border:       #e2e8f0;
  --md-border-2:     #cfd8e3;
  --md-text:         #0f1b2d;
  --md-text-2:       #54627a;
  --md-text-3:       #66758b;
  --md-accent:       #3bb8e8;
  --md-accent-hover: #2ea6d4;
  --md-accent-ink:   #06101c;
  --md-accent-text:  #0a79ad;
  --md-on-status:    #ffffff;
  --md-accent-soft:  rgba(59,184,232,.16);
  --md-ok:           #15803d;
  --md-ok-soft:      #e7f6ec;
  --md-warn:         #b45309;
  --md-warn-soft:    #fdf1dc;
  --md-danger:       #b91c1c;
  --md-danger-soft:  #fde8e8;
  --md-info:         #0369a1;
  --md-shadow:       0 1px 2px rgba(15,27,45,.05), 0 1px 1px rgba(15,27,45,.03);
  --md-shadow-pop:   0 12px 32px rgba(15,27,45,.14), 0 2px 6px rgba(15,27,45,.06);
  --md-logo-disc:    #0f1b2d;
  --md-logo-m:       #ffffff;
  --md-tile:         #f1f4f8;
  --md-logo-tile:    #f6f8fb;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --md-bg:           #0a0d13;
  --md-surface:      #10151d;
  --md-surface-2:    #161c26;
  --md-surface-3:    #1d2531;
  --md-border:       #1f2733;
  --md-border-2:     #2b3544;
  --md-text:         #e8eef6;
  --md-text-2:       #9aa8bb;
  --md-text-3:       #8191a6;
  --md-accent:       #3bb8e8;
  --md-accent-hover: #6bcfef;
  --md-accent-ink:   #06101c;
  --md-accent-text:  #3bb8e8;
  --md-on-status:    #06101c;
  --md-accent-soft:  rgba(59,184,232,.14);
  --md-ok:           #34d399;
  --md-ok-soft:      rgba(52,211,153,.12);
  --md-warn:         #fbbf24;
  --md-warn-soft:    rgba(251,191,36,.12);
  --md-danger:       #f87171;
  --md-danger-soft:  rgba(248,113,113,.12);
  --md-info:         #38bdf8;
  --md-shadow:       none;
  --md-shadow-pop:   0 16px 40px rgba(0,0,0,.55);
  --md-logo-disc:    #ffffff;
  --md-logo-m:       #0a0d13;
  --md-tile:         #161c26;
  --md-logo-tile:    #eef2f7;
  color-scheme: dark;
}

/* ── 2. Base ─────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body.md-body, body.primary-bg-color {
  background: var(--md-bg) !important;
  color: var(--md-text);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.md-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
#main-body { background: transparent !important; padding: 8px 0 56px; min-height: 60vh; }
a { color: var(--md-accent-text); }
a:hover { color: var(--md-accent-hover); text-decoration: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--md-text); font-weight: 600; letter-spacing: -0.01em; }
p, li, td, th, label, span, small { color: inherit; }
hr { border-top-color: var(--md-border); }
.text-muted, small.text-muted { color: var(--md-text-3) !important; }
.text-dark, .text-body { color: var(--md-text) !important; }
.text-primary { color: var(--md-accent-text) !important; }
::selection { background: var(--md-accent); color: var(--md-accent-ink); }
.md-text-danger { color: var(--md-danger); } .md-text-warn { color: var(--md-warn); } .md-text-info { color: var(--md-info); }
.header-lined { border-bottom: 1px solid var(--md-border) !important; padding-bottom: 12px; margin-bottom: 20px; }
.header-lined h1 { font-size: 1.6rem; font-weight: 700; color: var(--md-text) !important; }
.header-lined h1 small { color: var(--md-text-3) !important; font-size: .85rem; }

/* ── 3. Top bar ──────────────────────────────────────────────────── */
.md-topbar { position: sticky; top: 0; z-index: 1030; background: var(--md-surface); border-bottom: 1px solid var(--md-border); }
.md-topbar.is-scrolled { box-shadow: var(--md-shadow); }
.md-topbar-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; height: 68px; display: flex; align-items: center; gap: 22px; }
.md-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; flex: 0 0 auto; }
.md-brand-mark { width: 36px; height: 36px; display: block; }
.md-brand-disc { fill: var(--md-logo-disc); }
.md-brand-m { stroke: var(--md-logo-m); }
.md-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.md-brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase; color: var(--md-text); }
.md-brand-sub { font-weight: 600; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--md-accent-text); }

.md-nav { align-items: center; gap: 4px; margin-left: auto; margin-right: auto; }
.md-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--md-text-2) !important; font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; text-decoration: none !important; transition: background .15s, color .15s; white-space: nowrap;
}
.md-pill:hover { background: var(--md-surface-2); color: var(--md-text) !important; }
.md-pill.is-active, .md-nav-group.open > .md-pill { background: var(--md-accent); color: var(--md-accent-ink) !important; }
.md-pill-caret { font-size: .62rem; opacity: .7; }
.md-nav-group { position: relative; }
.md-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; padding: 6px;
  background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 12px; box-shadow: var(--md-shadow-pop);
}
.md-nav-group.open > .md-menu { display: block; }
.md-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  color: var(--md-text) !important; font-size: .88rem; font-weight: 500; text-decoration: none !important;
}
.md-menu-item i { width: 16px; text-align: center; color: var(--md-text-3); font-size: .85rem; }
.md-menu-item:hover { background: var(--md-surface-2); }
.md-menu-item.is-danger, .md-menu-item.is-danger i { color: var(--md-danger) !important; }
.md-menu-divider { height: 1px; background: var(--md-border); margin: 6px 4px; }

.md-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.md-nav ~ .md-actions { margin-left: 0; }
.md-icon-btn {
  position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--md-border); border-radius: 999px; background: var(--md-surface); color: var(--md-text-2) !important;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s; text-decoration: none !important; font-size: .9rem;
}
.md-icon-btn:hover { background: var(--md-surface-2); color: var(--md-text) !important; border-color: var(--md-border-2); }
.md-icon-sun { display: none; }
:root[data-theme="dark"] .md-icon-sun { display: inline-block; }
:root[data-theme="dark"] .md-icon-moon { display: none; }
.md-badge-dot {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--md-accent); color: var(--md-accent-ink); font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center;
}
.md-dropdown { position: relative; }
.md-popover {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; max-width: 340px; padding: 6px;
  background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 12px; box-shadow: var(--md-shadow-pop); z-index: 1040;
}
.md-dropdown.open > .md-popover { display: block; }
.md-popover-title { padding: 8px 12px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--md-text-3); }
.md-alert-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; }
.md-alert-list a { display: flex; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--md-text) !important; font-size: .86rem; text-decoration: none !important; }
.md-alert-list a:hover { background: var(--md-surface-2); }
.md-alert-none { padding: 10px 12px; color: var(--md-text-3); font-size: .86rem; }
.md-account-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--md-border);
  border-radius: 999px; background: var(--md-surface); color: var(--md-text) !important; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.md-account-btn:hover { background: var(--md-surface-2); }
.md-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--md-accent); color: var(--md-accent-ink); font-size: .8rem; font-weight: 700; }
.md-account-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--md-border); margin-bottom: 6px; }
.md-account-full { font-weight: 700; font-size: .92rem; }
.md-account-mail { color: var(--md-text-3); font-size: .78rem; word-break: break-all; }

.md-mobile { display: none; background: var(--md-surface); border-bottom: 1px solid var(--md-border); padding: 8px 20px 16px; }
.md-mobile.open { display: block; }
.md-mobile-head { margin: 14px 0 4px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--md-text-3); }
.md-mobile-link { display: block; padding: 8px 0; color: var(--md-text) !important; font-weight: 500; text-decoration: none !important; }
.md-mobile-top { font-weight: 700; border-top: 1px solid var(--md-border); margin-top: 6px; padding-top: 12px; }

/* Buttons used in header + dashboard */
.md-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid transparent; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s; line-height: 1.3;
}
.md-btn-primary { background: var(--md-accent); color: var(--md-accent-ink) !important; }
.md-btn-primary:hover { background: var(--md-accent-hover); }
.md-btn-ghost { background: var(--md-surface); border-color: var(--md-border-2); color: var(--md-text) !important; }
.md-btn-ghost:hover { background: var(--md-surface-2); }
.md-btn-sm { padding: 4px 12px; font-size: .78rem; }

/* ── 4. Breadcrumb ───────────────────────────────────────────────── */
.md-breadcrumb { padding: 14px 0 6px; }
.md-breadcrumb .breadcrumb, .master-breadcrumb { background: transparent !important; margin: 0; padding: 0; font-size: .8rem; }
.breadcrumb { background: transparent; }
.breadcrumb-item, .breadcrumb-item a { color: var(--md-text-3) !important; }
.breadcrumb-item.active { color: var(--md-text-2) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--md-border-2); }

/* ── 5. Cards & panels ───────────────────────────────────────────── */
.card, .panel, .well, .md-card {
  background: var(--md-surface) !important; border: 1px solid var(--md-border) !important; border-radius: 12px !important;
  box-shadow: var(--md-shadow) !important; color: var(--md-text);
}
.card-header, .panel-heading {
  background: transparent !important; border-bottom: 1px solid var(--md-border) !important; padding: 14px 18px;
  border-radius: 12px 12px 0 0 !important; color: var(--md-text) !important;
}
.card-title, .panel-title {
  margin: 0; font-size: .72rem !important; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--md-text-2) !important;
}
.card-body, .panel-body { background: transparent !important; color: var(--md-text); padding: 18px; }
.card-footer, .panel-footer { background: transparent !important; border-top: 1px solid var(--md-border) !important; padding: 12px 18px; color: var(--md-text-2) !important; border-radius: 0 0 12px 12px !important; }
.card-footer a, .md-card-foot a { font-size: .8rem; font-weight: 600; margin-right: 14px; }
.card-accent-gold, .card-accent-green, .card-accent-red, .card-accent-blue, .card-accent-orange, .card-accent-teal, .card-accent-asbestos, .card-accent-midnight-blue,
[class*="card-accent-"] { border-top: 1px solid var(--md-border) !important; }
.bg-white, .bg-light { background: var(--md-surface) !important; }
.bg-color-blue, .bg-color-gold, .bg-color-green, .bg-color-red, .bg-color-orange, .bg-color-teal { background: var(--md-accent) !important; color: var(--md-accent-ink) !important; }

/* Dashboard pieces */
.md-greeting { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 18px; }
.md-greeting-title { margin: 0; font-size: 1.65rem; font-weight: 700; }
.md-greeting-date { margin-top: 2px; font-size: .82rem; color: var(--md-text-3); }
.md-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600; text-decoration: none !important; }
.md-chip-ok { background: var(--md-ok-soft); color: var(--md-ok) !important; }
.md-chip-warn { background: var(--md-warn-soft); color: var(--md-warn) !important; }

.md-hero { display: flex; align-items: center; gap: 22px; padding: 22px 24px; margin-bottom: 18px; }
.md-hero-badge { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 14px; background: var(--md-accent-soft); color: var(--md-accent-text); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.md-hero-body { flex: 1 1 auto; min-width: 0; }
.md-hero-title { font-size: 1.35rem; font-weight: 700; word-break: break-word; }
.md-hero-sub { color: var(--md-text-2); font-size: .85rem; margin-bottom: 12px; }
.md-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.md-select { max-width: 260px; border-radius: 999px !important; }

.md-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.md-stat { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 12px; background: var(--md-surface); border: 1px solid var(--md-border); box-shadow: var(--md-shadow); text-decoration: none !important; transition: border-color .15s, transform .15s; }
.md-stat:hover { border-color: var(--md-accent); transform: translateY(-1px); }
.md-stat-num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--md-text); }
.md-stat-label { margin-top: 4px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--md-text-3); }
.md-stat-warn .md-stat-num { color: var(--md-warn); }

.md-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; align-items: start; }
.md-span-all { grid-column: 1 / -1; }
.md-panel { display: flex; flex-direction: column; overflow: hidden; }
.md-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--md-border); }
.md-card-title { margin: 0; flex: 1 1 auto; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--md-text-2) !important; }
.md-card-title i { margin-right: 8px; color: var(--md-text-3); }
.md-count { min-width: 24px; padding: 1px 9px; border-radius: 999px; background: var(--md-surface-3); color: var(--md-text-2); font-size: .72rem; font-weight: 700; text-align: center; }
.md-card-body { padding: 18px; font-size: .9rem; }
.md-card-foot { padding: 12px 18px; border-top: 1px solid var(--md-border); font-size: .8rem; }
.md-card-foot a { font-weight: 600; margin-right: 14px; }
.md-list { display: flex; flex-direction: column; }
.md-list-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--md-border); color: var(--md-text) !important; font-size: .9rem; text-decoration: none !important; }
.md-list-item:last-child { border-bottom: 0; }
a.md-list-item:hover { background: var(--md-surface-2); }
.md-list-item i { width: 18px; color: var(--md-text-3); text-align: center; }
.md-list-item span:first-of-type { flex: 1 1 auto; }
.md-addon { margin-bottom: 18px; }

/* ── 6. Sidebar ──────────────────────────────────────────────────── */
.sidebar .card-sidebar, .card-sidebar { margin-bottom: 16px; overflow: hidden; }
.card-sidebar .card-header { padding: 12px 16px; }
.card-sidebar .card-minimise { color: var(--md-text-3); font-size: .7rem; }
.list-group, .list-group-flush { background: transparent; }
.list-group-item {
  background: transparent !important; color: var(--md-text) !important; border: 0 !important; border-top: 1px solid var(--md-border) !important;
  padding: 10px 16px; font-size: .88rem; border-radius: 0 !important;
}
.list-group-item:first-child { border-top: 0 !important; }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--md-surface-2) !important; color: var(--md-text) !important; }
.list-group-item.active { background: var(--md-accent-soft) !important; color: var(--md-accent-text) !important; font-weight: 600; z-index: 1; }
.sidebar-menu-item-icon { color: var(--md-text-3); }
.list-group-item.active .sidebar-menu-item-icon { color: var(--md-accent-text); }
.card-sidebar .badge, .list-group-item .badge { background: var(--md-surface-3); color: var(--md-text-2); border-radius: 999px; font-weight: 700; }

/* ── 7. Buttons ──────────────────────────────────────────────────── */
.btn { border-radius: 999px; font-weight: 600; font-size: .86rem; padding: 7px 18px; transition: background .15s, border-color .15s, color .15s; }
.btn-sm, .btn-xs { padding: 4px 12px; font-size: .78rem; }
.btn-lg { padding: 11px 28px; font-size: .95rem; }
.btn-primary, .btn-success.btn-checkout {
  background: var(--md-accent) !important; border-color: var(--md-accent) !important; color: var(--md-accent-ink) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--md-accent-hover) !important; border-color: var(--md-accent-hover) !important; color: var(--md-accent-ink) !important; }
.btn-default, .btn-secondary, .btn-outline-secondary, .btn-light {
  background: var(--md-surface) !important; border: 1px solid var(--md-border-2) !important; color: var(--md-text) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover { background: var(--md-surface-2) !important; color: var(--md-text) !important; }
.btn-success { background: var(--md-ok) !important; border-color: var(--md-ok) !important; color: #fff !important; }
.btn-danger { background: var(--md-danger) !important; border-color: var(--md-danger) !important; color: #fff !important; }
.btn-warning { background: var(--md-warn) !important; border-color: var(--md-warn) !important; color: #fff !important; }
.btn-info { background: var(--md-info) !important; border-color: var(--md-info) !important; color: #fff !important; }
.btn-link { color: var(--md-accent-text) !important; }
.btn-outline-primary { border-color: var(--md-accent) !important; color: var(--md-accent-text) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--md-accent) !important; color: var(--md-accent-ink) !important; }
.btn.disabled, .btn:disabled { opacity: .5; }

/* ── 8. Forms ────────────────────────────────────────────────────── */
label, .control-label { color: var(--md-text-2); font-size: .82rem; font-weight: 600; margin-bottom: 5px; }
.form-control, .custom-select, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"] {
  background-color: var(--md-surface) !important; color: var(--md-text) !important; border: 1px solid var(--md-border-2) !important;
  border-radius: 10px; font-size: .9rem;
}
.form-control:focus, .custom-select:focus, select:focus, textarea:focus, input:focus {
  border-color: var(--md-accent) !important; box-shadow: 0 0 0 3px var(--md-accent-soft) !important; outline: 0; color: var(--md-text) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--md-text-3) !important; opacity: 1; }
.form-control:disabled, .form-control[readonly] { background-color: var(--md-surface-2) !important; color: var(--md-text-2) !important; }
select option, select optgroup { background: var(--md-surface); color: var(--md-text); }
.input-group-text, .input-group-addon { background: var(--md-surface-2) !important; color: var(--md-text-2) !important; border: 1px solid var(--md-border-2) !important; }
.form-text, .help-block { color: var(--md-text-3); }
.custom-control-label, .form-check-label { color: var(--md-text-2); font-weight: 500; }
.field-help-text { color: var(--md-text-3); }
.prepend-icon .field-icon i { color: var(--md-text-3); }
.has-error .form-control { border-color: var(--md-danger) !important; }

/* ── 9. Tables ───────────────────────────────────────────────────── */
.table { color: var(--md-text) !important; background: transparent; }
.table thead th, .table-list thead th {
  background: transparent !important; color: var(--md-text-3) !important; border-bottom: 1px solid var(--md-border-2) !important; border-top: 0 !important;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 12px 14px;
}
.table td, .table th { border-top: 1px solid var(--md-border) !important; padding: 12px 14px; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--md-surface-2); }
.table-hover tbody tr:hover, table.table-list tbody tr:hover { background: var(--md-surface-2) !important; }
table.table-list tbody tr td { background: transparent !important; }
.table-responsive, .table-container, div.dataTables_wrapper { background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 12px; overflow: hidden; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { padding: 10px 14px; color: var(--md-text-2); font-size: .82rem; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--md-border) !important; }
.sorting::after, .sorting_asc::after, .sorting_desc::after { color: var(--md-text-3); }
.pagination .page-link { background: var(--md-surface); border-color: var(--md-border); color: var(--md-text-2); }
.pagination .page-item.active .page-link { background: var(--md-accent); border-color: var(--md-accent); color: var(--md-accent-ink); }
.pagination .page-item.disabled .page-link { background: var(--md-surface-2); color: var(--md-text-3); }

/* ── 10. Navs, dropdowns, modals, alerts, badges ─────────────────── */
.nav-tabs { border-bottom: 1px solid var(--md-border) !important; }
.nav-tabs .nav-link { color: var(--md-text-2) !important; border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; font-weight: 600; font-size: .86rem; padding: 10px 16px; }
.nav-tabs .nav-link:hover { color: var(--md-text) !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--md-accent-text) !important; border-bottom-color: var(--md-accent) !important; background: transparent !important; }
.nav-pills .nav-link.active { background: var(--md-accent) !important; color: var(--md-accent-ink) !important; }
.tab-content { color: var(--md-text); }
.dropdown-menu { background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 12px; box-shadow: var(--md-shadow-pop); padding: 6px; }
.dropdown-item { color: var(--md-text) !important; border-radius: 8px; font-size: .88rem; }
.dropdown-item:hover { background: var(--md-surface-2) !important; }
.dropdown-divider { border-color: var(--md-border); }
.modal-content { background: var(--md-surface); color: var(--md-text); border: 1px solid var(--md-border); border-radius: 14px; box-shadow: var(--md-shadow-pop); }
.modal-header, .modal-footer { border-color: var(--md-border); }
.modal-title { color: var(--md-text); }
.close { color: var(--md-text-2); text-shadow: none; opacity: .7; }
.modal-backdrop.show { opacity: .6; }
.popover { background: var(--md-surface); border-color: var(--md-border); }
.popover-body { color: var(--md-text); }
.alert { border-radius: 10px; border-width: 1px; font-size: .9rem; }
.alert-info { background: var(--md-accent-soft); border-color: transparent; color: var(--md-info); }
.alert-success { background: var(--md-ok-soft); border-color: transparent; color: var(--md-ok); }
.alert-warning { background: var(--md-warn-soft); border-color: transparent; color: var(--md-warn); }
.alert-danger { background: var(--md-danger-soft); border-color: transparent; color: var(--md-danger); }
.alert a { text-decoration: underline; color: inherit; font-weight: 600; }
.badge { border-radius: 999px; font-weight: 700; }
.badge-primary, .label-primary { background: var(--md-accent); color: var(--md-accent-ink); }
.badge-secondary, .badge-light { background: var(--md-surface-3); color: var(--md-text-2); }
.badge-success { background: var(--md-ok-soft); color: var(--md-ok); }
.badge-warning { background: var(--md-warn-soft); color: var(--md-warn); }
.badge-danger { background: var(--md-danger-soft); color: var(--md-danger); }
.badge-info { background: var(--md-accent-soft); color: var(--md-info); }
.label { border-radius: 999px; padding: 4px 10px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.label.status-active, .label.status-open, .label.status-paid, .label.status-completed, .label.status-answered { background: var(--md-ok-soft); color: var(--md-ok) !important; }
.label.status-pending, .label.status-unpaid, .label.status-customer-reply, .label.status-onhold, .label.status-on-hold { background: var(--md-warn-soft); color: var(--md-warn) !important; }
.label.status-suspended, .label.status-terminated, .label.status-cancelled, .label.status-overdue, .label.status-fraud, .label.status-closed { background: var(--md-danger-soft); color: var(--md-danger) !important; }
.label.status-refunded, .label.status-collections, .label.status-payment-pending, .label.status-in-progress { background: var(--md-accent-soft); color: var(--md-info) !important; }
.progress { background: var(--md-surface-3); border-radius: 999px; }
.progress-bar { background: var(--md-accent); }

/* ── 11. Tickets, invoices, knowledgebase ────────────────────────── */
.ticket-reply, .view-ticket .ticket-reply { background: var(--md-surface) !important; border: 1px solid var(--md-border) !important; border-radius: 12px; color: var(--md-text); }
.ticket-reply .posted-by, .ticket-reply .date { color: var(--md-text-3); }
.ticket-reply.staff { border-left: 3px solid var(--md-accent) !important; }
.invoice-container, .invoice, .invoice-summary-table, #invoiceIdSummary { background: var(--md-surface) !important; color: var(--md-text) !important; border-color: var(--md-border) !important; border-radius: 12px; }
.invoice-container h1, .invoice-container h2, .invoice-container h3, .invoice-container strong { color: var(--md-text); }
.kb-category, .kb-article-item, .kb-search-results a { color: var(--md-text); }
.markdown-editor, .md-editor, .md-header { background: var(--md-surface) !important; color: var(--md-text) !important; border-color: var(--md-border-2) !important; }
.client-alerts a, .client-alerts li { color: var(--md-text); }

/* ── 12. Domain search, tiles, misc WHMCS widgets ────────────────── */
.domain-checker-container, .domain-checker-bg, .home-domain-search { background: var(--md-surface) !important; border: 1px solid var(--md-border); border-radius: 12px; padding: 22px; margin: 12px auto; }
.domain-checker-result-headline, .domain-checker-available { color: var(--md-ok); }
.domain-checker-unavailable { color: var(--md-danger); }
.tiles .tile { background: var(--md-surface); border: 1px solid var(--md-border); color: var(--md-text); border-radius: 12px; }
.tiles .tile .stat { color: var(--md-text); }
.logo-wrapper, .logos .logo { background: transparent !important; }
.sub-heading, .sub-heading-borders { border-color: var(--md-border) !important; }
.sub-heading span, .sub-heading-borders { color: var(--md-accent-text) !important; background: transparent !important; }
.empty-cart, .message-no-data { color: var(--md-text-3); }
.btn-return-to-admin { background: var(--md-accent) !important; color: var(--md-accent-ink) !important; }
#fullpage-overlay { background: rgba(10,13,19,.7); }
.w-hidden { display: none; }
.item-selector .item { background: var(--md-surface-2); color: var(--md-text); border-radius: 8px; }
.item-selector .item.active { background: var(--md-accent); color: var(--md-accent-ink); }

/* ── 13. Order form (standard_cart) + checkout ───────────────────── */
#order-standard_cart { color: var(--md-text); }
#order-standard_cart .cart-body, #order-standard_cart .products, #order-standard_cart .secondary-cart-body { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#order-standard_cart .cart-sidebar .card, #order-standard_cart .cart-sidebar .card-sidebar { border-radius: 12px !important; }
#order-standard_cart .header-lined h1, #order-standard_cart .header-lined h2 { color: var(--md-text) !important; }
#order-standard_cart .products .product, #order-standard_cart .product {
  background: var(--md-surface) !important; border: 1px solid var(--md-border) !important; border-radius: 12px !important; box-shadow: var(--md-shadow) !important; color: var(--md-text);
}
#order-standard_cart .product header { background: var(--md-surface-2) !important; color: var(--md-text) !important; border-bottom: 1px solid var(--md-border); border-radius: 12px 12px 0 0; }
#order-standard_cart .product header span, #order-standard_cart .product .product-desc, #order-standard_cart .product .product-pricing, #order-standard_cart .product ul li, #order-standard_cart .product .price { color: var(--md-text) !important; }
#order-standard_cart .product .product-pricing .price, #order-standard_cart .price { color: var(--md-accent-text) !important; }
#order-standard_cart .product footer { background: transparent !important; border-top: 1px solid var(--md-border); }
#order-standard_cart .view-cart-items-header, #order-standard_cart .view-cart-items, #order-standard_cart .view-cart-tabs .tab-content, #order-standard_cart .cart-summary, #order-standard_cart .order-summary {
  background: var(--md-surface) !important; border: 1px solid var(--md-border) !important; border-radius: 12px; color: var(--md-text) !important;
}
#order-standard_cart .view-cart-items-header { background: var(--md-surface-2) !important; font-weight: 700; }
#order-standard_cart .view-cart-items .item { border-bottom: 1px solid var(--md-border) !important; background: transparent !important; color: var(--md-text); }
#order-standard_cart .view-cart-items .item-title, #order-standard_cart .view-cart-items .item-group, #order-standard_cart .view-cart-items .item-domain { color: var(--md-text) !important; }
#order-standard_cart .order-summary h2, #order-standard_cart .summary-container * { color: var(--md-text) !important; }
#order-standard_cart .total-due-today, #order-standard_cart .total-due-today * { color: var(--md-ok) !important; }
#order-standard_cart .total-due-today { background: var(--md-ok-soft) !important; border: 1px solid transparent !important; border-left: 4px solid var(--md-ok) !important; border-radius: 10px; }
#order-standard_cart .btn-checkout, #order-standard_cart #btnCompleteOrder, #order-standard_cart .btn-order-now { padding: 12px 34px; font-weight: 700; }

/* Choose account / sign-up panels / payment panels (WHMCS hard-codes light greys) */
#order-standard_cart .account-select-container, #order-standard_cart .account-select-container div.account,
#order-standard_cart .account-select-container div.account.active, #order-standard_cart .account-select-container div.account:not(.border-bottom),
#order-standard_cart .signup-frm, #order-standard_cart #containerNewUserSignup, #order-standard_cart #paymentGatewaysContainer,
#order-standard_cart .payment-methods, #order-standard_cart .existing-card, #order-standard_cart .existing-cc-grid,
#order-standard_cart #newCardInfo, #order-standard_cart #creditCardInputFields, #order-standard_cart .apply-credit-container,
#order-standard_cart .domain-selection-options, #order-standard_cart .domain-selection-options .option,
#order-standard_cart .well, #order-standard_cart .bg-white, #order-standard_cart .bg-light, #order-standard_cart .panel, #order-standard_cart .card {
  background: var(--md-surface) !important; background-color: var(--md-surface) !important; border-color: var(--md-border) !important; color: var(--md-text) !important;
}
#order-standard_cart .account-select-container div.account { border: 1px solid var(--md-border) !important; border-bottom-width: 0 !important; }
#order-standard_cart .account-select-container div.account.border-bottom { border-bottom-width: 1px !important; }
#order-standard_cart .account-select-container div.account.active { background: var(--md-accent-soft) !important; border-color: var(--md-accent) !important; }
#order-standard_cart .account-select-container * , #order-standard_cart .apply-credit-container *, #order-standard_cart .signup-frm label,
#order-standard_cart .payment-methods label, #order-standard_cart #newCardInfo label, #order-standard_cart #newCardInfo span, #order-standard_cart #newCardInfo p,
#order-standard_cart .domain-selection-options label, #order-standard_cart .domain-selection-options .option { color: var(--md-text) !important; text-shadow: none !important; }
#order-standard_cart .account-select-container .address, #order-standard_cart .account-select-container small { color: var(--md-text-2) !important; }
#order-standard_cart .domain-selection-options .option { border: 1px solid var(--md-border) !important; border-radius: 10px !important; margin-bottom: 8px; }
#order-standard_cart .domain-selection-options .option.option-selected { border-color: var(--md-accent) !important; background: var(--md-accent-soft) !important; }
#order-standard_cart .apply-credit-container { border: 1px solid var(--md-border) !important; border-radius: 10px; }
#order-standard_cart #newCardInfo .form-control, #order-standard_cart .signup-frm .form-control, #order-standard_cart .prepend-icon .field { background: var(--md-surface-2) !important; }
#order-standard_cart .field-icon, #order-standard_cart .field-icon i { color: var(--md-text-3) !important; }

/* iCheck radios/checkboxes: keep the invisible click-helper invisible */
.iCheck-helper { opacity: 0 !important; background: transparent !important; }
.icheckbox_square-blue:not(.checked), .iradio_square-blue:not(.checked) { background-color: var(--md-surface-3) !important; border-radius: 6px; }
.iradio_square-blue:not(.checked) { border-radius: 50%; }
:root[data-theme="light"] .icheckbox_square-blue:not(.checked), :root[data-theme="light"] .iradio_square-blue:not(.checked) { background-color: transparent !important; }

/* Recommended-for-you (lives in a modal, so no #order-standard_cart prefix) */
.product-recommendations .product-recommendation, .product-recommendations .product-recommendation .header, .product-recommendations .product-recommendation .body {
  background: var(--md-surface) !important; color: var(--md-text) !important;
}
.product-recommendations .product-recommendation { border: 1px solid var(--md-border) !important; border-bottom: 4px solid #9abb3a !important; border-radius: 12px !important; overflow: hidden; }
.product-recommendations .product-recommendation .body { background: var(--md-surface-2) !important; border-top: 1px solid var(--md-border) !important; font-size: .9em; }
.product-recommendations .product-recommendation .body *, .product-recommendations .product-recommendation .headline, .product-recommendations .product-recommendation .tagline,
.product-recommendations .product-recommendation .content * { color: var(--md-text) !important; opacity: 1 !important; }
.product-recommendations .product-recommendation .price, .product-recommendations .product-recommendation .price * { color: var(--md-accent-text) !important; }
.product-recommendations .product-recommendation .btn-add .text, .product-recommendations .product-recommendation .btn-add .arrow, .product-recommendations .product-recommendation .btn-add .arrow i { color: #fff !important; }

/* MarketConnect / partner logos are dark artwork → light tile in both modes */
img[src*="/marketconnect/"], img[src*="marketconnect/"], img[src*="nordvpn" i], img[src*="codeguard" i], img[src*="sitelock" i],
img[src*="spamexperts" i], img[src*="marketgoo" i], img[src*="socialbee" i], img[src*="weebly" i], img[src*="threesixty" i],
img[src*="rapidssl" i], img[src*="geotrust" i], img[src*="symantec" i], img[src*="digicert" i], img[src*="sectigo" i],
.store-promo img, .marketconnect-promo img, .promo-container img, .logo-wrapper img, .logos img, .product-recommendation .logo img,
.product-recommendation img:not([src*="icon"]) {
  background: var(--md-logo-tile) !important; border: 1px solid var(--md-border-2) !important; border-radius: 12px !important;
  padding: 10px 14px !important; box-sizing: border-box !important; max-width: 100% !important; height: auto !important;
}
img[src*="safety-icon"], img[src*="check"], img[src*="-icon."] { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* ── 14. WordPress SSO card (product details page) ───────────────── */
.mh-wp-sso { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; padding: 18px 22px; background: var(--md-surface); border: 1px solid var(--md-border); border-left: 4px solid var(--md-accent); border-radius: 12px; box-shadow: var(--md-shadow); }
.mh-wp-sso__icon { font-size: 2.2rem; color: var(--md-accent-text); line-height: 1; }
.mh-wp-sso__text { flex: 1 1 220px; }
.mh-wp-sso__text h3 { margin: 0 0 2px; font-size: 1.05rem; }
.mh-wp-sso__text p { margin: 0; color: var(--md-text-2); font-size: .86rem; }
.mh-wp-sso__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── 15. SiteJet is not offered ──────────────────────────────────── */
[id*="sitejet" i], [class*="sitejet" i], [data-identifier="sitejet"], a[href*="sitejet" i], li:has(> a[href*="sitejet" i]) { display: none !important; }

/* ── 16. Footer ──────────────────────────────────────────────────── */
.md-footer { margin-top: 24px; border-top: 1px solid var(--md-border); background: var(--md-surface); padding: 28px 0; }
.md-footer-inner { display: grid; grid-template-columns: 1.1fr 2fr; gap: 16px 40px; align-items: start; }
.md-footer-brand p { margin: 10px 0 0; color: var(--md-text-3); font-size: .82rem; }
.md-footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; }
.md-footer-links a { color: var(--md-text-2); font-size: .84rem; font-weight: 500; }
.md-footer-links a:hover { color: var(--md-accent-text); }
.md-footer-copy { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--md-border); color: var(--md-text-3); font-size: .78rem; }

/* ── 17. Dark-mode touch-ups ─────────────────────────────────────── */
:root[data-theme="dark"] .card-title, :root[data-theme="dark"] .md-card-title { color: var(--md-text-2) !important; }
:root[data-theme="dark"] .invoice-container img { background: #fff; border-radius: 6px; padding: 4px; }
:root[data-theme="dark"] hr { border-top-color: var(--md-border); }
:root[data-theme="dark"] code, :root[data-theme="dark"] pre { background: var(--md-surface-2); color: var(--md-text); border-color: var(--md-border); }

/* ── 18. Responsive ──────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .md-stats { grid-template-columns: repeat(2, 1fr); }
  .md-footer-inner { grid-template-columns: 1fr; }
  .md-footer-links { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
  .md-grid { grid-template-columns: 1fr; }
  .md-hero { flex-direction: column; align-items: flex-start; }
  .md-topbar-inner { gap: 10px; padding: 0 14px; }
  .md-container { padding: 0 14px; }
  .md-greeting-title { font-size: 1.35rem; }
}

/* Table header alignment */
.table thead th, table.table-list thead th { text-align: left; }

/* ═══════════════════════════════════════════════════════════════════
   19. Order-form contrast sweep (standard_cart, universal_slider, recs)
   WHMCS order forms hard-code light greys and dark greys for text, and
   the slider form loads AFTER this file, hence the !important here.
   ═══════════════════════════════════════════════════════════════════ */

/* — Surfaces: anything WHMCS paints white / light grey — */
#order-standard_cart .products .product,
#order-standard_cart .product-info,
#order-standard_cart .summary-container,
#order-standard_cart .view-cart-items .item,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-promotion-code,
#order-standard_cart .cc-input-container,
#order-standard_cart .mc-promo,
#order-standard_cart .default-captcha,
#order-standard_cart .panel-addon,
#order-standard_cart .transfer-not-eligible,
#order-standard_cart .domain-checker-advanced input[type="checkbox"],
.domain-promo-box, .spotlight-tld, .spotlight-tlds, .suggested-domains .domain-lookup-suggestions-loader,
.addon-renewals .service-renewal, .domain-renewals, .service-renewals, .domain-pricing .tld-row,
div.domainresults div:not(.btn-group), .domain-checker-container .input-group-box {
  background: var(--md-surface) !important; background-color: var(--md-surface) !important;
  color: var(--md-text) !important; border-color: var(--md-border) !important;
}
#order-standard_cart .products .product header,
#order-standard_cart .view-cart-items .item:nth-child(even),
#order-standard_cart .panel-addon .panel-price,
#order-standard_cart .view-cart-gateway-checkout,
#order-standard_cart .mc-promo .body,
#order-standard_cart .domain-selection-options .option,
.domain-pricing .tld-pricing-header .col-sm-2, .domain-pricing .tld-pricing-header .col-sm-4, .domain-pricing .tld-pricing-header div:nth-child(odd),
.domain-pricing .tld-row.highlighted, .spotlight-tld .invalid, .spotlight-tld .unavailable,
.addon-renewals .service-renewal:nth-child(even), .domain-renewals .domain-renewal:nth-child(even), .service-renewals .service-renewal:nth-child(even) {
  background: var(--md-surface-2) !important; background-color: var(--md-surface-2) !important;
  color: var(--md-text) !important; border-color: var(--md-border) !important;
}
#order-standard_cart .domain-selection-options .option-selected,
#order-standard_cart .transfer-eligible { background: var(--md-accent-soft) !important; color: var(--md-text) !important; border-color: var(--md-accent) !important; }
#order-standard_cart .transfer-eligible { background: var(--md-ok-soft) !important; border-color: transparent !important; color: var(--md-ok) !important; }

/* Order summary (right-hand column on view-cart/checkout) */
#order-standard_cart .order-summary { background: var(--md-surface) !important; border: 1px solid var(--md-border) !important; border-radius: 12px; overflow: hidden; }
#order-standard_cart .order-summary h2 { background: transparent !important; color: var(--md-text-2) !important; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; border-bottom: 1px solid var(--md-border); padding: 14px 18px; margin: 0; text-align: left; }
#order-standard_cart .summary-container { padding: 14px 18px; border: 0 !important; }
#order-standard_cart .summary-container .subtotal, #order-standard_cart .summary-container .bordered-totals, #order-standard_cart .summary-container .recurring-totals { border-color: var(--md-border) !important; }
#order-standard_cart .summary-container span, #order-standard_cart .summary-container div, #order-standard_cart .summary-container .amt { color: var(--md-text) !important; }
#order-standard_cart .order-summary .recurring-charges, #order-standard_cart .order-summary .recurring-charges * { color: var(--md-text-2) !important; }
#order-standard_cart .order-summary .btn-continue-shopping { color: var(--md-text-2) !important; }
#order-standard_cart .total-due-today, #order-standard_cart .total-due-today * { color: var(--md-ok) !important; background: transparent !important; }
#order-standard_cart .total-due-today { background: var(--md-ok-soft) !important; }
#order-standard_cart a#checkout, #order-standard_cart .btn-success.btn-lg { background: var(--md-accent) !important; border-color: var(--md-accent) !important; color: var(--md-accent-ink) !important; }
#order-standard_cart a#checkout:hover { background: var(--md-accent-hover) !important; }

/* — Text: WHMCS hard-codes #333/#666/#888 greys — */
#order-standard_cart, #order-standard_cart label, #order-standard_cart p.domain-renewal-desc, .service-renewals .div-renewal-period-label,
#order-standard_cart .domain-checker-advanced label, #order-standard_cart .products .product header span, #order-standard_cart .panel-addon .panel-body label,
div.domainresults div:not(.btn-group), .spotlight-tld, .domain-promo-box, .service-renewals .div-renewal-ineligible { color: var(--md-text) !important; }
#order-standard_cart .products .product header .qty, #order-standard_cart .field-help-text, #order-standard_cart .transfer-not-eligible,
#order-standard_cart .cc-input-container .existing-cc-grid, div.domainresults div:not(.btn-group) span, #order-standard_cart .default-captcha { color: var(--md-text-2) !important; }
#order-standard_cart .sub-heading span, #order-standard_cart .sub-heading-borderless span { color: var(--md-accent-text) !important; background: var(--md-bg) !important; }
#order-standard_cart .view-cart-items .item-domain { color: var(--md-accent-text) !important; }
#order-standard_cart .btn-remove-from-cart { color: var(--md-text-2) !important; }
#order-standard_cart .btn-remove-from-cart:hover { color: var(--md-danger) !important; }
#order-standard_cart .domain-checker-available, .domain-checker-available { color: var(--md-ok) !important; }
#order-standard_cart .domain-checker-invalid, #order-standard_cart .domain-checker-unavailable, .domain-checker-invalid, .domain-checker-unavailable { color: var(--md-danger) !important; }
#order-standard_cart .field, #order-standard_cart .form-control, #order-standard_cart .domain-checker-advanced .multiselect { background: var(--md-surface) !important; color: var(--md-text) !important; border: 1px solid var(--md-border-2) !important; }
#order-standard_cart .field[disabled], #order-standard_cart .field[readonly], #order-standard_cart .form-control[disabled], #order-standard_cart .form-control[readonly] { background: var(--md-surface-2) !important; color: var(--md-text-2) !important; }
#order-standard_cart .mc-promo .price, #order-standard_cart .mc-promo .expander, #order-standard_cart .mc-promo [class*="fa-"] { color: var(--md-accent-text) !important; }
#order-standard_cart .mc-promo *, #order-standard_cart .mc-promo .body * { color: var(--md-text) !important; }
#order-standard_cart .mc-promo .price, #order-standard_cart .mc-promo .price * { color: var(--md-accent-text) !important; }

/* Domain checker banner is yellow by default; recolour to the accent */
.domain-checker-container { background: var(--md-surface) !important; border: 1px solid var(--md-border) !important; }
.domain-checker-container .domain-checker-bg, .domain-checker-bg { background: transparent !important; }
.domain-checker-container .input-group-box { border: 1px solid var(--md-border-2) !important; }
.domain-checker-container .input-group-box input { background: transparent !important; color: var(--md-text) !important; }
.domain-checker-container p, .domain-checker-container h2, .domain-checker-container label { color: var(--md-text) !important; }

/* — Universal slider order form — */
div#order-universal_slider, #order-universal_slider { color: var(--md-text-2) !important; }
#order-universal_slider .striped-container { background: var(--md-surface-2) !important; }
#order-universal_slider .product-container { background: var(--md-surface) !important; border: 1px solid var(--md-border); border-radius: 12px; color: var(--md-text) !important; }
#order-universal_slider .product-container .container-with-progress-bar span, #order-universal_slider .product-container span, #order-universal_slider .product-container p, #order-universal_slider .product-container li, #order-universal_slider .product-container h2, #order-universal_slider .product-container h3 { color: var(--md-text) !important; }
#order-universal_slider .product-container .order-button, #order-universal_slider .product-container a.order-button {
  background: var(--md-accent) !important; background-image: none !important; border: 0 !important; color: var(--md-accent-ink) !important; border-radius: 999px; font-weight: 700; text-shadow: none !important;
}
#order-universal_slider .product-container .order-button:hover { background: var(--md-accent-hover) !important; }
#order-universal_slider .feature-container .progress.small-progress { background: var(--md-surface-3) !important; }
#order-universal_slider .product-selector .irs-from, #order-universal_slider .product-selector .irs-to, #order-universal_slider .product-selector .irs-single { background: var(--md-surface-3) !important; color: var(--md-text) !important; }
#order-universal_slider .product-selector .irs-grid-text, #order-universal_slider .product-selector .irs-min, #order-universal_slider .product-selector .irs-max { color: var(--md-text-2) !important; background: transparent !important; }
#order-universal_slider .product-selector .irs-line { background: var(--md-surface-3) !important; }
#order-universal_slider .product-selector .irs-bar, #order-universal_slider .product-selector .irs-bar-edge { background: var(--md-accent) !important; opacity: .85; }
#order-universal_slider .product-selector .irs-grid-pol { background: var(--md-border-2) !important; }
#order-universal_slider .group-features .title { background: var(--md-surface-2) !important; color: var(--md-text) !important; }
#order-universal_slider .group-features ul.list-features li { color: var(--md-text) !important; }

/* — Recommendations modal (assets/css/recommendations.css) — */
#recommendationsModal .modal-content, #recommendationsModal .modal-body, #recommendationsModal .modal-header, #recommendationsModal .modal-footer { background: var(--md-surface) !important; color: var(--md-text) !important; }
.product-recommendations .product-recommendation .headline, .product-recommendations .product-recommendation .tagline { color: var(--md-text) !important; }

/* ═══════════════════════════════════════════════════════════════════
   20. Contrast sweep — base theme (theme.css / all.css) leftovers
   Every selector here paints a hard-coded white/grey or a dark text
   colour in the Twenty-One base. Both light and dark use the tokens.
   ═══════════════════════════════════════════════════════════════════ */

/* Surfaces → card colour */
.select-account a:hover, .continue-container, .invite-box, .verification-banner, .upgrade .product-to-be-upgraded, .upgrade .products .product,
.promo-container, .promo-banner, .mc-promo-manage, .mc-promo-login, .store-order-container .store-domain-tabs li.active a, div.product-details-tab-container,
.featured-tld, .featured-tld .price, .responsive-tabs-sm, .responsive-tabs-sm .nav-item a.active, .responsive-tabs-sm-connector .channel,
.home-domain-search .input-group-wrapper, .action-icon-btns a, .client-home-cards .card-header, .md-editor > .btn-toolbar, .md-editor > textarea.markdown-editor,
.md-editor > .md-preview, .md-preview table, .markdown-content table, .popover-header, .toast, .toast-header, .img-thumbnail, .custom-control-label::before,
.custom-file-label, .page-link, div.dtr-modal div.dtr-modal-display, .captcha-overlay-popup, .intl-tel-input .country-list, .jumbotron {
  background: var(--md-surface) !important; background-color: var(--md-surface) !important; color: var(--md-text) !important; border-color: var(--md-border) !important;
}
/* Surfaces → subtle tile colour */
.announcements .announcement article, .kb-category a:hover, .kb-article-item:hover, .view-ticket .posted-by, .view-ticket .attachment-list li figure, .ticketfeedbackstaffcont,
.twofa-setup .backup-code, .invoice-summary-table td.total-row, tr.masspay-total td, div.product-details div.product-icon, div.credit-card, .md-preview table > thead > tr > th, .markdown-content table > thead > tr > th,
.store-order-container .store-domain-tabs li a, .popover-user-notifications ul li a:hover, .modal .modal-header, .modal-localisation .item-selector .item:hover, .modal-localisation .item-selector .item.active,
.md-editor .md-footer, .md-editor > .md-header, .md-editor > textarea, .table .thead-light th, .custom-file-label::after, .tld-sale-group-sale,
.table-list > tbody > tr:hover > td, table.table-list thead th, .dataTables_wrapper table.table-list thead th.sorting_asc, .dataTables_wrapper table.table-list thead th.sorting_desc, mark, .mark {
  background: var(--md-surface-2) !important; background-color: var(--md-surface-2) !important; color: var(--md-text) !important; border-color: var(--md-border) !important;
}
.announcements .announcement article, .announcements .announcement article p, .announcements .announcement article * { color: var(--md-text) !important; }
.announcements .announcement article { border: 1px solid var(--md-border) !important; border-radius: 10px; }
.table-list > tbody > tr > td, .table-list > tbody > tr > td a { background: transparent !important; color: var(--md-text) !important; }
.custom-control-label::before { border: 1px solid var(--md-border-2) !important; background: var(--md-surface-2) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--md-accent) !important; border-color: var(--md-accent) !important; }
.custom-select, .custom-file-label { background-color: var(--md-surface) !important; color: var(--md-text) !important; border-color: var(--md-border-2) !important; }
.input-group .btn-reveal-pw { background: var(--md-surface-2) !important; color: var(--md-text-2) !important; border: 1px solid var(--md-border-2) !important; }
.input-group .btn-reveal-pw:hover, .input-group .btn-reveal-pw:active { background: var(--md-surface-3) !important; }
.bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary { background: var(--md-surface-3) !important; color: var(--md-text) !important; }
.bootstrap-switch { border-color: var(--md-border-2) !important; }
.tiles .tile:hover { background: var(--md-surface-2) !important; }
header.header, .master-breadcrumb { background: transparent !important; }

/* Contextual table rows / list rows / alerts (Bootstrap pastel backgrounds) */
.table-primary, .table-primary > th, .table-primary > td { background: var(--md-accent-soft) !important; color: var(--md-text) !important; }
.table-success, .table-success > th, .table-success > td, .list-group-item-success { background: var(--md-ok-soft) !important; color: var(--md-ok) !important; }
.table-info, .table-info > th, .table-info > td, .list-group-item-info { background: var(--md-accent-soft) !important; color: var(--md-info) !important; }
.table-warning, .table-warning > th, .table-warning > td, .list-group-item-warning { background: var(--md-warn-soft) !important; color: var(--md-warn) !important; }
.table-danger, .table-danger > th, .table-danger > td, .list-group-item-danger { background: var(--md-danger-soft) !important; color: var(--md-danger) !important; }
.table-secondary, .table-secondary > th, .table-secondary > td, .table-light, .table-light > th, .table-light > td, .list-group-item-secondary, .list-group-item-light { background: var(--md-surface-2) !important; color: var(--md-text) !important; }
.alert-primary, .alert-secondary, .alert-light, .alert-dark { background: var(--md-surface-2); color: var(--md-text); border-color: var(--md-border); }
.alert .alert-link, .alert-info .alert-link, .alert-success .alert-link, .alert-warning .alert-link, .alert-danger .alert-link, .alert-primary .alert-link { color: inherit !important; text-decoration: underline; font-weight: 700; }
.alert strong, .alert h4, .alert .close { color: inherit; }

/* Text colours WHMCS hard-codes as dark greys */
caption, .figure-caption, .dropdown-header, .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { color: var(--md-text-3) !important; }
.dropdown-menu, .dropdown-menu * { color: var(--md-text); }
.dropdown-item { color: var(--md-text) !important; }
.form-group .field-error-msg, .field-error-msg { color: var(--md-danger) !important; }
header.header .toolbar .nav-link:hover, header.header .navbar a, .action-icon-btns a, .action-icon-btns a:hover, .sidebar .list-group-item .badge,
.sidebar .list-group-item > i.far.fa-circle, .client-home-cards .card-header .btn:hover, div[menuitemname="Active Products/Services"] .btn-view-more.disabled { color: var(--md-text-2) !important; }
.twofa-setup .backup-code, .verification-banner, .verification-banner .fas, .verification-banner .fal, .verification-banner .far, .verification-banner * { color: var(--md-text) !important; }
.verification-banner .btn.close { color: var(--md-text-2) !important; }
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 { color: var(--md-text) !important; }
.upgrade .products .product ul li span, #registration label, .featured-tld .price { color: var(--md-text) !important; }
#registration .sub-heading span { color: var(--md-accent-text) !important; background: var(--md-bg) !important; }
#registration .field, #registration .form-control { background: var(--md-surface) !important; color: var(--md-text) !important; }
.promo-banner a, .promo-banner.ox a, .promo-banner.sitebuilder a, .promo-banner.xovinow a, .promo-banner.threesixtymonitoring a { color: var(--md-accent-text) !important; }
div.credit-card .logo-visa, div.credit-card .logo-mastercard, div.credit-card .logo-discover { filter: none; }
:root[data-theme="dark"] div.credit-card .logo-visa, :root[data-theme="dark"] div.credit-card .logo-discover { color: var(--md-text) !important; }

/* Buttons that are light-on-light in dark mode */
.btn-info { color: var(--md-accent-ink) !important; }
.btn-light, .btn-outline-light { background: var(--md-surface) !important; color: var(--md-text) !important; border-color: var(--md-border-2) !important; }
.btn-return-to-admin, .btn-return-to-admin .floating { background: var(--md-accent) !important; color: var(--md-accent-ink) !important; }
.product-recommendations .product-recommendation .btn-add, .product-recommendations .product-recommendation .btn-add .text, .product-recommendations .product-recommendation .btn-add .arrow, .product-recommendations .product-recommendation .btn-add .arrow i,
#order-standard_cart .mc-promo .btn-add, #order-standard_cart .mc-promo .btn-add * { color: #0b1220 !important; }

/* Tooltips + validation bubbles */
.tooltip-inner { background: var(--md-surface-3) !important; color: var(--md-text) !important; border: 1px solid var(--md-border-2); box-shadow: var(--md-shadow-pop); }
.tooltip .arrow::before { border-top-color: var(--md-surface-3) !important; border-bottom-color: var(--md-surface-3) !important; }
.popover .arrow::after { border-top-color: var(--md-surface) !important; border-bottom-color: var(--md-surface) !important; }

/* Misc small things */
.text-muted, .help-block, .small.text-muted { color: var(--md-text-3) !important; }
#order-standard_cart #paymentGatewaysContainer p, #order-standard_cart #paymentGatewaysContainer .small, #order-standard_cart .payment-methods .small { color: var(--md-text-2) !important; }
a.btn-link, .btn-link:hover { color: var(--md-accent-text) !important; }
.modal-header .close, .modal-header .modal-title { color: var(--md-text) !important; }
:root[data-theme="dark"] .close { color: var(--md-text-2); }
:root[data-theme="dark"] img.country-flag, :root[data-theme="dark"] .iti-flag { opacity: .95; }

/* ═══════════════════════════════════════════════════════════════════
   21. Lagom-inspired refinement layer
   Roomier, softer, more "app-like": bigger radii, layered shadows,
   gradient hero, icon tiles, pill tabs, tall inputs, lift-on-hover.
   Modularity colours are unchanged.
   ═══════════════════════════════════════════════════════════════════ */
:root, :root[data-theme="light"] {
  --md-radius: 16px; --md-radius-sm: 12px; --md-radius-xs: 8px;
  --md-shadow-card: 0 1px 2px rgba(15,27,45,.04), 0 10px 28px -8px rgba(15,27,45,.10);
  --md-shadow-lift: 0 2px 4px rgba(15,27,45,.05), 0 16px 36px -10px rgba(15,27,45,.18);
  --md-hero-bg: linear-gradient(135deg, rgba(59,184,232,.20) 0%, rgba(59,184,232,.07) 55%, rgba(255,255,255,0) 100%);
  --md-ico-accent: #0a79ad; --md-ico-accent-bg: rgba(59,184,232,.18);
  --md-ico-ok: #15803d;     --md-ico-ok-bg: #e4f6ea;
  --md-ico-warn: #b45309;   --md-ico-warn-bg: #fdf0d8;
  --md-ico-violet: #6d4fe0; --md-ico-violet-bg: #ece8fc;
}
:root[data-theme="dark"] {
  --md-shadow-card: 0 1px 0 rgba(255,255,255,.025) inset, 0 12px 28px -10px rgba(0,0,0,.55);
  --md-shadow-lift: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -12px rgba(0,0,0,.7);
  --md-hero-bg: linear-gradient(135deg, rgba(59,184,232,.18) 0%, rgba(59,184,232,.06) 55%, rgba(59,184,232,0) 100%);
  --md-ico-accent: #3bb8e8; --md-ico-accent-bg: rgba(59,184,232,.16);
  --md-ico-ok: #34d399;     --md-ico-ok-bg: rgba(52,211,153,.14);
  --md-ico-warn: #fbbf24;   --md-ico-warn-bg: rgba(251,191,36,.14);
  --md-ico-violet: #a99bff; --md-ico-violet-bg: rgba(169,155,255,.15);
}

/* Rhythm */
body.md-body { font-size: 15px; line-height: 1.6; }
#main-body { padding: 14px 0 72px; }
.md-container { max-width: 1280px; padding: 0 28px; }
.primary-content { padding-bottom: 12px; }
.header-lined { border-bottom: 0 !important; margin-bottom: 26px; padding-bottom: 0; }
.header-lined h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.header-lined h1 small { display: block; margin-top: 6px; font-size: .95rem; font-weight: 400; }
h2, .h2 { font-size: 1.45rem; } h3, .h3 { font-size: 1.15rem; }

/* Top bar: airier, with a soft hairline shadow */
.md-topbar-inner { height: 74px; max-width: 1280px; padding: 0 28px; }
.md-topbar { box-shadow: 0 1px 0 var(--md-border), 0 8px 24px -16px rgba(15,27,45,.18); }
.md-pill { padding: 9px 16px; font-size: .88rem; }
.md-menu, .md-popover, .dropdown-menu { border-radius: 16px; padding: 8px; }
.md-menu-item { padding: 10px 14px; border-radius: 10px; }
.md-breadcrumb { padding: 20px 0 8px; }

/* Cards */
.card, .panel, .well, .md-card { border-radius: var(--md-radius) !important; box-shadow: var(--md-shadow-card) !important; }
.card-header, .panel-heading, .md-card-head { padding: 18px 24px; }
.card-body, .panel-body, .md-card-body { padding: 24px; }
.card-footer, .panel-footer, .md-card-foot { padding: 14px 24px; }
.card-header { border-radius: var(--md-radius) var(--md-radius) 0 0 !important; }
.card-footer { border-radius: 0 0 var(--md-radius) var(--md-radius) !important; }
.md-list-item { padding: 14px 24px; }
.md-grid { gap: 22px; margin-bottom: 32px; }

/* Welcome banner */
.md-banner {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 34px 38px; margin: 6px 0 22px; border-radius: 20px; background: var(--md-hero-bg); border: 1px solid var(--md-border);
}
.md-banner::before, .md-banner::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: var(--md-accent); opacity: .08; }
.md-banner::before { width: 260px; height: 260px; right: -70px; top: -110px; }
.md-banner::after { width: 150px; height: 150px; right: 150px; bottom: -90px; opacity: .06; }
.md-banner-text, .md-banner-actions { position: relative; z-index: 1; }
.md-banner-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--md-accent-text); margin-bottom: 6px; }
.md-banner-title { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.md-banner-sub { margin: 8px 0 0; color: var(--md-text-2); max-width: 520px; }
.md-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Stat tiles with icon chips */
.md-stats { gap: 18px; margin-bottom: 22px; }
.md-stat { flex-direction: row; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--md-radius); box-shadow: var(--md-shadow-card); }
.md-stat:hover { transform: translateY(-3px); box-shadow: var(--md-shadow-lift); border-color: var(--md-border-2); }
.md-stat-ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.md-ico-accent { color: var(--md-ico-accent); background: var(--md-ico-accent-bg); }
.md-ico-ok { color: var(--md-ico-ok); background: var(--md-ico-ok-bg); }
.md-ico-warn { color: var(--md-ico-warn); background: var(--md-ico-warn-bg); }
.md-ico-violet { color: var(--md-ico-violet); background: var(--md-ico-violet-bg); }
.md-stat-body { display: flex; flex-direction: column; min-width: 0; }
.md-stat-num { font-size: 1.75rem; }
.md-hero { padding: 26px 30px; border-radius: 20px; background: var(--md-hero-bg) !important; box-shadow: var(--md-shadow-card) !important; }
.md-hero-badge { border-radius: 18px; background: var(--md-ico-accent-bg); }
.md-chip { padding: 8px 16px; }

/* Sidebar: icon-led menu with pill active state */
.card-sidebar { border-radius: var(--md-radius) !important; overflow: hidden; }
.card-sidebar .card-header { padding: 16px 20px 8px; border-bottom: 0 !important; }
.card-sidebar .card-title { font-size: .7rem !important; letter-spacing: .12em; color: var(--md-text-3) !important; }
.card-sidebar .collapsable-card-body { padding: 0 10px 12px; }
.card-sidebar .list-group-item { margin: 2px 0; padding: 10px 14px; border: 0 !important; border-radius: 12px !important; font-weight: 500; }
.card-sidebar .list-group-item.active { background: var(--md-accent-soft) !important; color: var(--md-accent-text) !important; font-weight: 700; }
.card-sidebar .list-group-item-action:hover { background: var(--md-surface-2) !important; }
.sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 12px; }
.sidebar-menu-item-icon-wrapper { width: 20px; text-align: center; }
.card-sidebar .card-body { padding: 4px 20px 18px; }

/* Buttons */
.btn { padding: 10px 22px; font-size: .88rem; letter-spacing: .005em; }
.btn-sm, .btn-xs { padding: 6px 14px; font-size: .8rem; }
.btn-lg { padding: 14px 34px; font-size: 1rem; }
.btn-primary, .md-btn-primary { box-shadow: 0 8px 18px -8px var(--md-accent); }
.btn-primary:hover, .md-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -8px var(--md-accent); }
.btn, .md-btn { transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
.md-btn { padding: 10px 22px; font-size: .88rem; }
.md-btn-sm { padding: 6px 14px; font-size: .78rem; }
.btn-default, .btn-secondary, .md-btn-ghost { box-shadow: none; }
.btn-default:hover, .md-btn-ghost:hover { border-color: var(--md-accent) !important; color: var(--md-accent-text) !important; }

/* Inputs: tall, soft */
.form-control, .custom-select, select, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"] { min-height: 46px; padding: 10px 16px; border-radius: 12px; }
textarea.form-control, textarea { min-height: 110px; border-radius: 12px; }
label, .control-label { font-size: .84rem; margin-bottom: 7px; }
.form-group { margin-bottom: 1.25rem; }
.input-group-text, .input-group-addon { border-radius: 12px; }
.prepend-icon .field, .prepend-icon .form-control { padding-left: 46px; }

/* Tables */
.table td, .table th { padding: 16px 20px; }
.table thead th, table.table-list thead th { background: var(--md-surface-2) !important; padding: 14px 20px; border-bottom: 0 !important; }
.table thead th:first-child { border-radius: 10px 0 0 10px; } .table thead th:last-child { border-radius: 0 10px 10px 0; }
.table-responsive, .table-container, div.dataTables_wrapper { border-radius: var(--md-radius); box-shadow: var(--md-shadow-card); padding: 6px; }
div.dataTables_wrapper table.table-list { margin: 0; }
.table td, .table-list td { border-top: 1px solid var(--md-border) !important; }
tbody tr:first-child td { border-top: 0 !important; }
.table-hover tbody tr:hover td, table.table-list tbody tr:hover td { background: var(--md-surface-2) !important; }

/* Tabs → segmented pills */
.nav-tabs { border-bottom: 0 !important; gap: 6px; padding: 5px; margin-bottom: 18px; background: var(--md-surface-2); border-radius: 999px; display: inline-flex; flex-wrap: wrap; }
.nav-tabs .nav-link { border-radius: 999px !important; border: 0 !important; padding: 8px 18px; color: var(--md-text-2) !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: var(--md-surface) !important; color: var(--md-accent-text) !important; box-shadow: var(--md-shadow-card); border-bottom: 0 !important; }
.responsive-tabs-sm { border-radius: 16px !important; }

/* Status labels with a dot */
.label, .badge { padding: 5px 12px; }
.label[class*="status-"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
.alert { border-radius: 14px; padding: 16px 20px; }
.modal-content { border-radius: 20px; }
.modal-header, .modal-body, .modal-footer { padding: 20px 26px; }

/* Order forms: plan cards with presence */
#order-standard_cart .products .product, #order-standard_cart .product { border-radius: 20px !important; box-shadow: var(--md-shadow-card) !important; transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; }
#order-standard_cart .products .product:hover { transform: translateY(-4px); box-shadow: var(--md-shadow-lift) !important; border-color: var(--md-accent) !important; }
#order-standard_cart .products .product header { padding: 22px 26px; font-size: 1.15rem; font-weight: 700; border-radius: 0 !important; }
#order-standard_cart .product .product-desc { padding: 18px 26px; }
#order-standard_cart .product .product-pricing { padding: 20px 26px; }
#order-standard_cart .product .product-pricing .price { font-size: 2rem !important; font-weight: 700; }
#order-standard_cart .product footer { padding: 18px 26px 26px; }
#order-standard_cart .btn-order-now, #order-standard_cart .product footer .btn { width: 100%; }
#order-standard_cart .view-cart-items-header, #order-standard_cart .view-cart-items, #order-standard_cart .order-summary, #order-standard_cart .view-cart-tabs .tab-content { border-radius: var(--md-radius) !important; box-shadow: var(--md-shadow-card); }
#order-standard_cart .domain-selection-options .option { padding: 18px 22px; border-radius: 14px !important; }
#order-standard_cart .sub-heading { margin: 30px 0 18px; }
#order-universal_slider .product-container { border-radius: 20px !important; box-shadow: var(--md-shadow-card); }

/* Footer */
.md-footer { margin-top: 48px; padding: 40px 0; }

/* Responsive tune */
@media (max-width: 991.98px) { .md-banner { padding: 26px 24px; } .md-banner-title { font-size: 1.6rem; } .md-container { padding: 0 18px; } }
@media (max-width: 767.98px) { .md-topbar-inner { height: 66px; padding: 0 14px; } .header-lined h1 { font-size: 1.6rem; } .nav-tabs { border-radius: 18px; } .md-stat { padding: 16px; } }
.md-hero-badge { background: var(--md-surface) !important; border: 1px solid var(--md-border); box-shadow: var(--md-shadow-card); color: var(--md-accent-text); }
/* Status-coloured buttons: use the "ink" colour so text stays readable in both modes */
.btn-success, .btn-danger, .btn-warning, .btn-info { color: var(--md-accent-ink) !important; }
:root[data-theme="light"] .btn-warning { color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════
   22. Round 3 — Modularity blue (no green), sidebar presence,
       portal home, pill domain search, logo tiles
   ═══════════════════════════════════════════════════════════════════ */

/* — Modularity blue everywhere "success" used to be green — */
:root, :root[data-theme="light"] {
  --md-ok: var(--md-accent); --md-ok-soft: var(--md-accent-soft);
  --md-ico-ok: #1d7fb8;     --md-ico-ok-bg: #deeef8;
  --md-ico-violet: #3d5bd6; --md-ico-violet-bg: #e6ebfb;
}
:root[data-theme="dark"] {
  --md-ok: var(--md-accent); --md-ok-soft: var(--md-accent-soft);
  --md-ico-ok: #7dd3fc;     --md-ico-ok-bg: rgba(125,211,252,.14);
  --md-ico-violet: #93a8ff; --md-ico-violet-bg: rgba(147,168,255,.15);
}
.btn-success, .btn-checkout { background: var(--md-accent) !important; border-color: var(--md-accent) !important; color: var(--md-accent-ink) !important; }
.btn-success:hover { background: var(--md-accent-hover) !important; border-color: var(--md-accent-hover) !important; }
.alert-success { background: var(--md-accent-soft); color: var(--md-accent-text); }
/* WHMCS hard-codes green on recommendations, MarketConnect promos and totals */
.product-recommendations .product-recommendation { border-bottom-color: var(--md-accent) !important; }
.product-recommendations .product-recommendation .btn-add, #order-standard_cart .mc-promo .btn-add,
#order-standard_cart .mc-promo[class] .btn-add { background: var(--md-accent) !important; border-color: var(--md-accent) !important; }
.product-recommendations .product-recommendation .arrow, #order-standard_cart .mc-promo .arrow { background: var(--md-accent-hover) !important; }
.product-recommendations .product-recommendation .btn-add, .product-recommendations .product-recommendation .btn-add .text, .product-recommendations .product-recommendation .btn-add .arrow, .product-recommendations .product-recommendation .btn-add .arrow i,
#order-standard_cart .mc-promo .btn-add, #order-standard_cart .mc-promo .btn-add * { color: var(--md-accent-ink) !important; }
.product-recommendations .product-recommendation .expander, #order-standard_cart .mc-promo .expander, .product-recommendations .product-recommendation .body .fa-check, .product-recommendations .product-recommendation .body i { color: var(--md-accent-text) !important; }
#order-standard_cart .total-due-today { border-left-color: var(--md-accent) !important; }
#order-standard_cart .total-due-today, #order-standard_cart .total-due-today * { color: var(--md-accent-text) !important; }
.domain-checker-available, #order-standard_cart .domain-checker-available, .domain-checker-result-headline { color: var(--md-accent-text) !important; }
.label.status-active, .label.status-open, .label.status-paid, .label.status-completed, .label.status-answered { background: var(--md-accent-soft); color: var(--md-accent-text) !important; }
.md-chip-ok { background: var(--md-accent-soft); color: var(--md-accent-text) !important; }
.progress-bar { background: var(--md-accent); }

/* — Sidebar with presence — */
.sidebar .card-sidebar, .card-sidebar { background: var(--md-surface) !important; border: 1px solid var(--md-border) !important; border-radius: var(--md-radius) !important; overflow: hidden; margin-bottom: 20px; }
.card-sidebar .card-header { background: var(--md-accent-soft) !important; border-bottom: 1px solid var(--md-border) !important; padding: 16px 20px !important; }
.card-sidebar .card-title { display: flex; align-items: center; gap: 10px; color: var(--md-accent-text) !important; font-size: .74rem !important; letter-spacing: .1em; }
.card-sidebar .card-title > i:first-child:not(.card-minimise) { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--md-accent); color: var(--md-accent-ink); font-size: .8rem; }
.card-sidebar .card-minimise { margin-left: auto; color: var(--md-accent-text); opacity: .7; font-size: .7rem; }
.card-sidebar .badge { background: var(--md-accent); color: var(--md-accent-ink); }
.card-sidebar .collapsable-card-body { padding: 10px 12px 14px; }
.card-sidebar .list-group-item { display: block; margin: 3px 0; padding: 9px 12px; border-radius: 12px !important; font-size: .9rem; font-weight: 500; color: var(--md-text) !important; background: transparent !important; }
.card-sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 12px; }
.card-sidebar .sidebar-menu-item-icon-wrapper { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--md-surface-2); transition: background .15s; }
.card-sidebar .sidebar-menu-item-icon { color: var(--md-text-2); font-size: .85rem; }
.card-sidebar .sidebar-menu-item-label { flex: 1 1 auto; }
.card-sidebar .list-group-item-action:hover { background: var(--md-surface-2) !important; }
.card-sidebar .list-group-item-action:hover .sidebar-menu-item-icon-wrapper { background: var(--md-accent-soft); }
.card-sidebar .list-group-item-action:hover .sidebar-menu-item-icon { color: var(--md-accent-text); }
.card-sidebar .list-group-item.active { background: var(--md-accent) !important; color: var(--md-accent-ink) !important; font-weight: 700; box-shadow: 0 8px 18px -10px var(--md-accent); }
.card-sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper { background: rgba(255,255,255,.2); }
:root[data-theme="dark"] .card-sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper { background: rgba(0,0,0,.14); }
.card-sidebar .list-group-item.active .sidebar-menu-item-icon, .card-sidebar .list-group-item.active .sidebar-menu-item-label { color: var(--md-accent-ink) !important; }
.card-sidebar .list-group-item .badge { background: var(--md-surface-3); color: var(--md-text-2); }
.card-sidebar .list-group-item.active .badge { background: rgba(255,255,255,.25); color: var(--md-accent-ink); }
.card-sidebar .card-body { padding: 16px 20px 20px; }
.card-sidebar .card-footer { background: transparent !important; }

/* — Pill search bar (home hero) and pill domain controls — */
.md-home-hero { position: relative; overflow: hidden; margin: 8px 0 30px; padding: 56px 40px 44px; border-radius: 24px; background: var(--md-hero-bg) !important; border: 1px solid var(--md-border) !important; text-align: center; box-shadow: var(--md-shadow-card); }
.md-home-hero::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -170px; border-radius: 50%; background: var(--md-accent); opacity: .08; pointer-events: none; }
.md-home-hero::after { content: ""; position: absolute; width: 220px; height: 220px; left: -80px; bottom: -120px; border-radius: 50%; background: var(--md-accent); opacity: .06; pointer-events: none; }
.md-home-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.md-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--md-accent-text); margin-bottom: 8px; }
.md-home-title { font-size: 2.5rem; font-weight: 700; letter-spacing: -.025em; margin: 0 0 10px; }
.md-home-sub { color: var(--md-text-2); font-size: 1.05rem; margin: 0 auto 28px; max-width: 560px; }
.md-search-pill { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--md-surface); border: 1px solid var(--md-border-2); box-shadow: var(--md-shadow-lift); }
.md-search-pill:focus-within { border-color: var(--md-accent); box-shadow: 0 0 0 4px var(--md-accent-soft), var(--md-shadow-lift); }
.md-search-icon { color: var(--md-text-3); }
.md-search-pill .form-control { flex: 1 1 auto; border: 0 !important; box-shadow: none !important; background: transparent !important; min-height: 48px; font-size: 1.05rem; border-radius: 999px; padding-left: 8px; }
.md-search-pill .md-btn { padding: 13px 28px; flex: 0 0 auto; }
.md-tld-row { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin: 26px 0 0; padding: 0; }
.md-tld-row li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 999px; background: var(--md-surface); border: 1px solid var(--md-border); font-weight: 600; font-size: .9rem; color: var(--md-text) !important; }
.md-tld-row li img { height: 26px; width: auto; padding: 4px 10px !important; border-radius: 999px !important; background: var(--md-logo-tile) !important; border: 0 !important; }
.md-tld-row li.md-tld-more { background: transparent; border: 0; }
.md-tld-more a, .md-link-more { font-weight: 600; font-size: .9rem; }
.md-tld-row li span, .md-tld-row li a { color: var(--md-text); }

/* TLD / partner logos are dark artwork: always sit on a light tile */
img[src*="/tld_logos/"], .tld-logos img, .tld-row img, .spotlight-tld img, .featured-tld img, .domain-pricing img[src*="tld"] {
  background: var(--md-logo-tile) !important; border-radius: 10px !important; padding: 4px 10px !important; box-sizing: content-box; max-height: 32px; width: auto;
}

/* Domain controls elsewhere: fully rounded */
.input-group .btn, .input-group-append .btn, .input-group-prepend .btn, .input-group-append .input-group-text, .input-group > .btn { border-radius: 999px !important; }
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 999px !important; border-bottom-right-radius: 999px !important; }
.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) { border-top-left-radius: 999px !important; border-bottom-left-radius: 999px !important; }
.input-group-prepend .input-group-text { border-radius: 999px 0 0 999px !important; padding-left: 20px; }
.input-group > .form-control:not(:last-child):not(:first-child) { border-radius: 0 !important; }
.input-group-append { margin-left: 8px; }
#order-standard_cart .domain-selection-options .option .form-control, #order-standard_cart .domain-selection-options .option select, #order-standard_cart .domain-selection-options .option .input-group-text { border-radius: 999px !important; }
#order-standard_cart .domain-selection-options .option .btn, #order-standard_cart .domain-selection-options .option input[type="submit"], #order-standard_cart #btnDomainSearch, #order-standard_cart .btn { border-radius: 999px !important; }
#order-standard_cart .domain-selection-options .option .input-group-text { background: var(--md-surface-2) !important; }
.domain-checker-container .input-group-box, .domain-checker-container .input-group-box input, .domain-checker-container .btn, .domain-checker-container select { border-radius: 999px !important; }
.domain-checker-container .input-group-box { padding: 6px 6px 6px 18px; }
.domain-checker-container .input-group-box input { padding-left: 8px; min-height: 44px; }
.spotlight-tld, .spotlight-tlds .btn, .domain-lookup-result .btn, .domain-pricing .btn, #btnDomainSearch, #btnTransfer, button[id^="btnDomain"], button[id^="btnTransfer"] { border-radius: 999px !important; }
.spotlight-tld { border-radius: 18px !important; }

/* — Portal home — */
.md-section-head { text-align: center; margin: 54px 0 26px; }
.md-section-title { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.md-section-sub { color: var(--md-text-2); margin: 8px auto 0; max-width: 560px; }
.md-prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.md-prod-card { display: flex; flex-direction: column; padding: 28px; border-radius: 20px; background: var(--md-surface); border: 1px solid var(--md-border); box-shadow: var(--md-shadow-card); color: var(--md-text) !important; text-decoration: none !important; transition: transform .2s, box-shadow .2s, border-color .2s; }
.md-prod-card:hover { transform: translateY(-5px); box-shadow: var(--md-shadow-lift); border-color: var(--md-accent); }
.md-prod-ico { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 18px; background: var(--md-ico-accent-bg); color: var(--md-ico-accent); }
.md-prod-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.md-prod-desc { flex: 1 1 auto; color: var(--md-text-2); font-size: .92rem; margin: 0 0 18px; }
.md-prod-link { font-weight: 700; font-size: .88rem; color: var(--md-accent-text); }
.md-prod-link i { margin-left: 6px; transition: transform .2s; }
.md-prod-card:hover .md-prod-link i { transform: translateX(5px); }
.md-feature-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 56px 0 0; padding: 30px; border-radius: 20px; background: var(--md-surface); border: 1px solid var(--md-border); box-shadow: var(--md-shadow-card); }
.md-feature { display: flex; gap: 16px; align-items: flex-start; }
.md-feature-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--md-accent-soft); color: var(--md-accent-text); font-size: 1.05rem; }
.md-feature strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.md-feature span:not(.md-feature-ico) { color: var(--md-text-2); font-size: .88rem; }
.md-help-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.md-help-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 14px; border-radius: 18px; background: var(--md-surface); border: 1px solid var(--md-border); box-shadow: var(--md-shadow-card); font-weight: 600; font-size: .92rem; text-align: center; color: var(--md-text) !important; text-decoration: none !important; transition: transform .2s, box-shadow .2s, border-color .2s; }
.md-help-card:hover { transform: translateY(-4px); box-shadow: var(--md-shadow-lift); border-color: var(--md-accent); }
.md-help-ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--md-accent-soft); color: var(--md-accent-text); font-size: 1.15rem; }
.md-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 64px 0 8px; padding: 40px 44px; border-radius: 24px; background: linear-gradient(135deg, var(--md-accent) 0%, var(--md-accent-hover) 100%); color: var(--md-accent-ink); box-shadow: var(--md-shadow-lift); }
.md-cta-title { margin: 0 0 6px; font-size: 1.7rem; font-weight: 700; color: var(--md-accent-ink) !important; }
.md-cta-sub { margin: 0; opacity: .9; color: var(--md-accent-ink); }
.md-cta .md-btn-primary { background: var(--md-surface) !important; color: var(--md-accent-text) !important; box-shadow: none; }
.md-cta .md-btn-primary:hover { background: var(--md-surface-2) !important; }
.md-btn-lg { padding: 14px 34px; font-size: 1rem; }

@media (max-width: 991.98px) { .md-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md-feature-strip { grid-template-columns: 1fr; } .md-home-title { font-size: 2rem; } }
@media (max-width: 575.98px) { .md-prod-grid, .md-help-grid { grid-template-columns: 1fr 1fr; } .md-home-hero { padding: 38px 20px 30px; } .md-search-pill { flex-wrap: wrap; border-radius: 28px; padding: 14px; } .md-search-pill .form-control { width: auto; flex: 1 1 calc(100% - 44px); min-width: 0; } .md-search-pill .md-btn { flex: 1 1 0; } .md-cta { padding: 28px 24px; } }

/* — Round 3 follow-ups — */
/* Domain pricing table header cells (xs/sm/md variants) */
.domain-pricing .tld-pricing-header, .domain-pricing .tld-pricing-header div, .domain-pricing .tld-pricing-header [class*="col-"] { background: var(--md-surface-2) !important; color: var(--md-text-2) !important; }
.domain-pricing .tld-row, .domain-pricing .tld-row div { color: var(--md-text); }
/* Sale tags: darker fills so white text clears 4.5:1 */
.tld-sale-group, .tld-sale-group-hot, .tld-sale-group-new, .tld-sale-group-sale { color: #fff !important; border-radius: 999px; padding: 2px 10px; font-weight: 700; }
.tld-sale-group-hot { background: #c43d37 !important; }
.tld-sale-group-new { background: #2563eb !important; }
.tld-sale-group-sale { background: #b45309 !important; }
/* Captcha: image + pill input */
.captcha-container input, .default-captcha input, #inputCaptcha, input[name="code"] { border-radius: 999px !important; text-align: center; min-height: 44px; }
.default-captcha, .md-search-pill ~ .default-captcha { background: transparent !important; border: 0 !important; }
/* Order-form sidebar cards get the same treatment as the client-area sidebar */
.cart-sidebar .card, .secondary-cart-sidebar .card, #order-standard_cart .cart-sidebar .card { border-radius: var(--md-radius) !important; overflow: hidden; }
.cart-sidebar .card-header, .secondary-cart-sidebar .card-header, #order-standard_cart .cart-sidebar .card-header { background: var(--md-accent-soft) !important; border-bottom: 1px solid var(--md-border) !important; padding: 15px 20px !important; }
.cart-sidebar .card-title, .secondary-cart-sidebar .card-title, #order-standard_cart .cart-sidebar .card-title { color: var(--md-accent-text) !important; font-size: .74rem !important; letter-spacing: .1em; }
.cart-sidebar .card-title i, .secondary-cart-sidebar .card-title i { margin-right: 8px; }
.cart-sidebar .card-body, .cart-sidebar .list-group { padding: 14px 16px 16px; }
.cart-sidebar .list-group-item { margin: 3px 0; border-radius: 12px !important; border: 0 !important; padding: 9px 14px; font-weight: 500; }
.cart-sidebar .list-group-item.active { background: var(--md-accent) !important; color: var(--md-accent-ink) !important; font-weight: 700; }
.cart-sidebar .list-group-item-action:hover { background: var(--md-surface-2) !important; }

/* WHMCS semantic text utilities → readable tokens in both modes */
.text-warning { color: var(--md-warn) !important; } .text-danger { color: var(--md-danger) !important; }
.text-success, .text-info { color: var(--md-accent-text) !important; }
p.small, .small { color: var(--md-text-2); }

/* ═══════════════════════════════════════════════════════════════════
   23. Round 4 — one Modularity blue in both modes + mobile header
   Fills use the brand blue (#3bb8e8) with dark-navy text; blue TEXT on
   light surfaces uses --md-accent-text (same hue, deeper) for contrast.
   ═══════════════════════════════════════════════════════════════════ */
.btn-danger, .btn-warning { color: var(--md-on-status) !important; }
.btn-info { background: var(--md-accent) !important; border-color: var(--md-accent) !important; color: var(--md-accent-ink) !important; }
:root[data-theme="light"] .btn-warning { color: #fff !important; }
.md-pill.is-active, .md-nav-group.open > .md-pill { color: var(--md-accent-ink) !important; }
.badge-primary, .label-primary, .nav-pills .nav-link.active, .md-avatar, .md-badge-dot { color: var(--md-accent-ink) !important; }
a.btn-primary, .btn-primary { color: var(--md-accent-ink) !important; }
.md-cta .md-btn-primary { color: var(--md-accent-text) !important; }
.md-cta-title, .md-cta-sub { color: var(--md-accent-ink) !important; }
.md-brand-sub, .md-eyebrow, .md-banner-eyebrow { color: var(--md-accent-text) !important; }
.alert-info, .alert-success { color: var(--md-accent-text); }

/* Mobile / tablet header: logo left, actions pushed RIGHT (not crammed beside the logo) */
.md-actions { margin-left: auto !important; }
@media (min-width: 1200px) { .md-nav ~ .md-actions { margin-left: 0 !important; } }
@media (max-width: 767.98px) {
  .md-topbar-inner { justify-content: space-between; }
  .md-actions { gap: 8px; }
  .md-account-btn { padding: 3px; }
}
@media (max-width: 575.98px) {
  .md-actions .md-btn-ghost { display: none !important; }
  .md-actions .md-btn-primary { padding: 9px 18px; }
  .md-brand-sub { display: none; }
}
@media (max-width: 380px) { .md-brand-text { display: none; } }

/* Home hero: beat the base theme's `.home-domain-search .tld-logos` (margin:0, floats, 60px images) */
.home-domain-search.md-home-hero .md-tld-row, .md-home-hero .home-domain-search .md-tld-row, .md-home-hero ul.tld-logos.md-tld-row {
  margin: 32px 0 0 !important; padding: 0 !important; font-size: 1rem !important; font-weight: 600 !important; color: var(--md-text) !important;
  display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; clear: both;
}
.md-home-hero .tld-logos.md-tld-row li { float: none !important; padding: 8px 20px 8px 10px !important; margin: 0 !important; }
.md-home-hero .tld-logos.md-tld-row li.md-tld-more { padding: 0 8px !important; }
.md-home-hero .tld-logos.md-tld-row img { width: auto !important; height: 26px !important; }
.md-home-hero .md-search-pill { margin-bottom: 4px; }
.md-home-hero .default-captcha, .md-home-hero .captcha-container, .md-home-hero #default-captcha-domainchecker { margin-top: 22px; }
.md-home-hero .md-link-more { display: inline-block; margin-top: 28px; }

/* Equal-height cards: a card that is the only child of a grid column stretches to fill that column,
   so side-by-side cards (e.g. "Addons and Extras" next to "Usage Statistics") always match. */
.row > [class*="col-"]:has(> .card:only-child),
.row > [class*="col-"]:has(> .md-card:only-child),
.row > [class*="col-"]:has(> .panel:only-child) { display: flex; flex-direction: column; }
.row > [class*="col-"] > .card:only-child,
.row > [class*="col-"] > .md-card:only-child,
.row > [class*="col-"] > .panel:only-child { flex: 1 1 auto; height: 100%; }
.row > [class*="col-"] > .card:only-child { margin-bottom: 20px; }
.row > [class*="col-"] > .card:only-child > .card-body { flex: 1 1 auto; }

/* Nav: slightly smaller text; Affiliates + Open Ticket are icon-only pills */
.md-pill { font-size: 0.82rem; padding: 8px 13px; }
.md-menu-item { font-size: 0.85rem; }
.md-pill.md-pill-icon { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: .95rem; flex: 0 0 auto; }
.md-pill.md-pill-icon i { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   24. Round 5 — input-group shapes, centred card rows, contact form
   ═══════════════════════════════════════════════════════════════════ */
/* One consistent pill language for input groups (login, knowledgebase search, domain search):
   [icon pill]─[input]  /  [input pill]  [button pill] */
.input-group > .form-control, .input-group > .custom-select { border-radius: 0 !important; }
.input-group > .input-group-prepend + .form-control:last-child,
.input-group > .input-group-prepend + .form-control:last-of-type:not(:has(+ .input-group-append)) { border-radius: 0 999px 999px 0 !important; }
.input-group > .form-control:first-child { border-radius: 999px 0 0 999px !important; }
.input-group > .form-control:first-child:last-child { border-radius: 999px !important; }
.input-group > .form-control:first-child:not(:last-child):has(+ .input-group-append) { border-radius: 999px !important; }
.input-group > .input-group-prepend .input-group-text { border-radius: 999px 0 0 999px !important; }
.input-group > .input-group-prepend + .form-control:not(:last-child) { border-radius: 0 !important; }
.input-group > .input-group-prepend + .form-control:not(:last-child):has(+ .input-group-append) { border-radius: 0 !important; }
.input-group-append { margin-left: 8px; }
.input-group-append .btn, .input-group-append .input-group-text { border-radius: 999px !important; }
.kb-search .form-control, .kb-search .btn { min-height: 52px; }
/* the browser's password-manager key badge sits inside the field — keep it from squaring the end */
.input-group > .form-control::-webkit-credentials-auto-fill-button { margin-right: 8px; }

/* Home product cards: flex so a short last row stays centred */
.md-prod-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.md-prod-card { flex: 0 1 calc((100% - 44px) / 3); min-width: 0; }
@media (max-width: 991.98px) { .md-prod-card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 575.98px) { .md-prod-card { flex-basis: calc((100% - 22px) / 2); } }

/* Password field: the reveal (eye) button is the end of the same pill, not a separate blob */
.input-group:has(.pw-input) > .input-group-append { margin-left: 0; }
.input-group:has(.pw-input) > .input-group-append .btn,
.input-group .btn-reveal-pw { border-radius: 0 999px 999px 0 !important; border-left: 0 !important; min-height: 46px; padding: 0 18px; }
.input-group:has(.pw-input) .pw-input { border-right: 0 !important; }

/* ═══ 25. MarketConnect — SocialBee page-scoped overrides ═══ */
html body .social-bee { background: var(--md-bg, #f6f8fb) !important; color: var(--md-text, #0f1b2d) !important; }
html body .social-bee .lp-container :where(h1, h2, h3, h4, h5, p, li, b, strong, label, small, td, th) { color: var(--md-text, #0f1b2d) !important; }
html body .social-bee .lp-container :where(p, li) { color: var(--md-text-2, #54627a) !important; }
html body .social-bee .action-buttons { background: var(--md-surface-2, #f1f4f8) !important; border-top: 1px solid var(--md-border, #e2e8f0); border-bottom: 1px solid var(--md-border, #e2e8f0); }
html body .social-bee button, html body .social-bee .btn { background: var(--md-surface, #fff) !important; color: var(--md-text, #0f1b2d) !important; border: 1px solid var(--md-border-2, #cfd8e3) !important; border-radius: 999px !important; font-weight: 700; cursor: pointer; }
html body .social-bee button.active, html body .social-bee .view-pricing-btn, html body .social-bee .btn:not(.btn-default) { background: var(--md-accent, #3bb8e8) !important; color: var(--md-accent-ink, #06101c) !important; border-color: var(--md-accent, #3bb8e8) !important; }
html body .social-bee [class*="pricing-table__"] { color: var(--md-text, #0f1b2d) !important; border-color: var(--md-border, #e2e8f0) !important; }
html body .social-bee .pricing-table__cell { background: var(--md-surface, #fff) !important; }
html body .social-bee .pricing-table__header-cell, html body .social-bee .pricing-table__feature-header, html body .social-bee .pricing-table__row:nth-child(even) .pricing-table__cell { background: var(--md-surface-2, #f1f4f8) !important; }
html body .social-bee .pricing-table__row:hover, html body .social-bee .pricing-table__row:hover .pricing-table__cell { background: var(--md-surface-3, #e9eef4) !important; }
html body .social-bee .pricing-table__row:hover .pricing-table__cell, html body .social-bee .pricing-table__row:hover .pricing-table__cell * { color: var(--md-text, #0f1b2d) !important; }
html body .social-bee .lp-container :where(span) { color: var(--md-text-2, #54627a) !important; }
html body .social-bee .lp-container .pricing-table__cell span, html body .social-bee button span { color: inherit !important; }

/* SocialBee — layout breathing room + themed FAQ accordion */
html body .social-bee .content-block .btn, html body .social-bee .content-block button { margin-top: 8px; padding: 12px 28px !important; }
html body .social-bee .accordion { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
html body .social-bee .accordion .tab { background: var(--md-surface, #fff) !important; border: 1px solid var(--md-border, #e2e8f0); border-radius: 16px; overflow: hidden; }
html body .social-bee .accordion .tab__label { background: transparent !important; color: var(--md-text, #0f1b2d) !important; font-weight: 600; padding: 16px 20px !important; }
html body .social-bee .accordion .tab__label *, html body .social-bee .accordion .tab__label span { color: var(--md-text, #0f1b2d) !important; }
html body .social-bee .accordion .tab__label::after { color: var(--md-accent-text, #0a79ad) !important; }
html body .social-bee .accordion .tab__label:hover { background: var(--md-accent-soft, rgba(59,184,232,.16)) !important; }
html body .social-bee .accordion .tab__content { background: transparent !important; padding: 4px 20px 18px !important; }
html body .social-bee .accordion .tab__content p, html body .social-bee .accordion .tab__content li { color: var(--md-text-2, #54627a) !important; }
html body .social-bee .accordion .tab input:checked ~ .tab__label { border-bottom: 1px solid var(--md-border, #e2e8f0); }

/* SocialBee content blocks: keep vendor two-column layout, add air and a roomier text column */
html body .social-bee .content-block { padding: 56px 32px; gap: 48px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
html body .social-bee .content-block .content-block__text { max-width: 440px; flex: 0 0 auto; }
html body .social-bee .content-block > div:first-child { flex: 0 1 440px; min-width: 260px; }
html body .social-bee .content-block.faq > div:first-child { flex-basis: 40%; }
html body .social-bee .content-block img { border-radius: 16px; max-width: 60%; }
html body .social-bee .content-block h2 { color: var(--md-text, #0f1b2d) !important; margin-bottom: 28px; }
html body .social-bee .content-block p { line-height: 1.7; margin-bottom: 20px; }
html body .social-bee .content-block .btn, html body .social-bee .content-block button { padding: 12px 32px !important; }
@media (max-width: 1100px) { html body .social-bee .content-block { flex-direction: column; align-items: flex-start; } html body .social-bee .content-block img { max-width: 100%; } html body .social-bee .content-block > div:first-child { flex-basis: auto; } }
html body .social-bee .content-block { align-items: flex-start; }
html body .social-bee .content-block:not(.faq) > img { align-self: center; }

/* ═══ 26. Mod Cards addon page ═══ */
.mc-page { display: flex; flex-direction: column; gap: 22px; }
.mc-h { margin: 18px 0 0; font-size: 1.35rem; font-weight: 700; color: var(--md-text); }
.mc-steps, .mc-features { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-features .md-card, .mc-step { padding: 22px; }
.mc-features h3, .mc-step h3 { margin: 10px 0 6px; font-size: 1.02rem; font-weight: 700; color: var(--md-text); }
.mc-features p, .mc-step p { margin: 0; color: var(--md-text-2); font-size: .92rem; line-height: 1.55; }
.mc-features i { color: var(--md-accent-text); font-size: 1.3rem; }
.mc-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--md-accent); color: var(--md-accent-ink); font-weight: 800; }
.mc-plans { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; padding-top: 14px; }
.mc-plans.mc-plans-1 { grid-template-columns: minmax(0, 400px); justify-content: center; }
.mc-plans.mc-plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin: 0 auto; width: 100%; }
.mc-plan { position: relative; display: flex; flex-direction: column; padding: 0; overflow: visible !important; }
.mc-plan-top { padding: 28px 26px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.mc-plan-name { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--md-text-2); margin-bottom: 12px; }
.mc-plan-price { font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; color: var(--md-text); line-height: 1.1; }
.mc-plan-price small { font-size: .85rem; font-weight: 500; color: var(--md-text-2); letter-spacing: 0; }
.mc-plan-desc { margin: 12px 0 0; color: var(--md-text-2); font-size: .9rem; min-height: 2.6em; }
.mc-plan-cta { margin-top: 18px; width: 100%; justify-content: center; }
.mc-plan-features { list-style: none; margin: 0; padding: 20px 26px 26px; border-top: 1px solid var(--md-border); flex: 1; }
.mc-plan-features li { position: relative; padding: 6px 0 6px 26px; font-size: .9rem; color: var(--md-text); }
.mc-plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--md-accent-text); font-weight: 700; }
.mc-plan-featured { border-color: rgba(91,180,229,.55) !important; box-shadow: 0 10px 40px rgba(91,180,229,.18) !important; }
.mc-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: var(--md-accent); color: var(--md-accent-ink); font-size: .72rem; font-weight: 700; }
.mc-foot { color: var(--md-text-2); font-size: .88rem; text-align: center; margin-top: 8px; }
@media (max-width: 900px) { .mc-steps, .mc-features, .mc-plans, .mc-plans.mc-plans-2 { grid-template-columns: minmax(0, 1fr); } }

/* ═══ 27. Mod Pages — page builder blocks ═══ */
.mp-hero { padding: 44px 40px; border-radius: 28px; border: 1px solid var(--md-border); background: var(--md-hero-bg, linear-gradient(135deg, var(--md-accent-soft), transparent 70%)); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.mp-hero.mp-align-center { align-items: center; text-align: center; }
.mp-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--md-accent-text); }
.mp-hero-title { margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--md-text); max-width: 20ch; }
.mp-align-center .mp-hero-title { max-width: 24ch; }
.mp-hero-sub { margin: 0; max-width: 62ch; font-size: 1.05rem; line-height: 1.6; color: var(--md-text-2); }
.mp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.mp-intro { margin: -6px 0 4px; color: var(--md-text-2); }
.mc-features.mp-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-features.mp-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-faq-list { display: flex; flex-direction: column; gap: 10px; }
.mp-faq { padding: 0; overflow: hidden; }
.mp-faq summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--md-text); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.mp-faq summary::-webkit-details-marker { display: none; }
.mp-faq summary::after { content: "+"; color: var(--md-accent-text); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.mp-faq[open] summary::after { content: "–"; }
.mp-faq-a { padding: 0 20px 18px; color: var(--md-text-2); line-height: 1.65; }
.mp-text { padding: 26px 28px; }
.mp-text h2 { margin: 0 0 12px; font-size: 1.35rem; font-weight: 700; color: var(--md-text); }
.mp-text-body { color: var(--md-text-2); line-height: 1.7; }
.mp-text-body a { color: var(--md-accent-text); }
.mp-linkcard { padding: 22px; text-decoration: none; display: block; }
.mp-linkcard h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--md-text); }
.mp-linkcard p { margin: 0; color: var(--md-text-2); font-size: .9rem; }
@media (max-width: 900px) { .mc-features.mp-cols-2, .mc-features.mp-cols-4 { grid-template-columns: minmax(0, 1fr); } .mp-hero { padding: 30px 22px; } }

/* ═══ 28. Mega-menu style dropdowns ═══ */
.md-menu { min-width: 300px; padding: 14px; border-radius: 18px; max-width: calc(100vw - 32px); }
.md-menu.md-menu-cols2 { width: 600px; }
.md-menu.md-menu-cols3 { width: 860px; }
.md-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 6px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--md-border); }
.md-menu-title { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--md-accent-text); }
.md-menu-all { font-size: .78rem; font-weight: 600; color: var(--md-text-2) !important; text-decoration: none !important; }
.md-menu-all:hover { color: var(--md-accent-text) !important; }
.md-menu-all i { font-size: .65rem; margin-left: 4px; }
.md-menu-grid { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }
.md-menu-cols2 .md-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-menu-cols3 .md-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-menu .md-menu-item { align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.md-menu .md-menu-item:hover { background: var(--md-accent-soft); }
.md-menu-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--md-surface-2); border: 1px solid var(--md-border); }
.md-menu .md-menu-item:hover .md-menu-ico { background: var(--md-accent); border-color: var(--md-accent); }
.md-menu-ico i { width: auto; color: var(--md-accent-text); font-size: .9rem; }
.md-menu .md-menu-item:hover .md-menu-ico i { color: var(--md-accent-ink); }
.md-menu-txt { display: flex; flex-direction: column; min-width: 0; }
.md-menu-name { font-weight: 600; font-size: .9rem; color: var(--md-text); line-height: 1.25; }
.md-menu-desc { font-size: .76rem; color: var(--md-text-2); line-height: 1.35; margin-top: 2px; font-weight: 400; }
/* account/popover menus keep the compact look */
.md-popover .md-menu-item { align-items: center; }

/* centre mega menus under their nav link (JS clamps to the viewport) */
.md-nav-group > .md-menu { left: 50%; transform: translateX(-50%); }

/* ═══ 29. Phone top bar — less cramped ═══ */
.md-actions .md-btn { white-space: nowrap; }
@media (max-width: 575.98px) {
  .md-topbar-inner { gap: 8px; padding: 0 12px; }
  .md-brand { gap: 8px; }
  .md-brand-mark { width: 34px; height: 34px; }
  .md-brand-name { font-size: .86rem; letter-spacing: .04em; }
  .md-actions { gap: 6px; }
  .md-actions .md-icon-btn { width: 38px; height: 38px; }
  .md-actions .md-btn-primary { padding: 8px 16px; font-size: .86rem; line-height: 1.2; }
}
@media (max-width: 470px) { .md-brand-text { display: none; } .md-actions .md-icon-btn { width: 40px; height: 40px; } }

/* ═══ 30. Order form plan grid (mirrored here so it is cache-busted with the theme) ═══ */
/* ── Good / Better / Best pricing columns: 3 across, scales to 6, 9, 12… ── */
#order-standard_cart .products { container-type: inline-size; container-name: plans; }
#order-standard_cart .md-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
#order-standard_cart .md-plans.md-plans-1 { grid-template-columns: minmax(0, 400px); justify-content: center; }
#order-standard_cart .md-plans.md-plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin: 0 auto; }
#order-standard_cart .md-plan-cell { display: flex; min-width: 0; padding-top: 14px; }
#order-standard_cart .products .product.md-plan { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; position: relative; overflow: visible !important; border-radius: 20px !important; background: var(--md-surface, var(--md-card, transparent)) !important; transform: none; }
#order-standard_cart .products .product.md-plan:hover { transform: translateY(-3px); }
#order-standard_cart .md-plan-top { padding: 28px 26px 22px; display: flex; flex-direction: column; align-items: flex-start; }
#order-standard_cart .md-plan-name { font-size: 1.05rem; font-weight: 600; color: var(--md-text-2, #9aa7bd) !important; margin-bottom: 14px; }
#order-standard_cart .products .product .md-plan-price { padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
#order-standard_cart .products .product .md-plan-price .price { font-size: 2.4rem !important; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--md-text, #fff) !important; white-space: nowrap; }
#order-standard_cart .md-plan-cycle { font-size: .85rem; color: var(--md-text-2, #9aa7bd); }
#order-standard_cart .md-plan-from { flex-basis: 100%; font-size: .8rem; color: var(--md-text-2, #9aa7bd); }
#order-standard_cart .md-plan-setup { flex-basis: 100%; color: var(--md-text-2, #9aa7bd); }
#order-standard_cart .products .product .md-plan-desc { padding: 14px 0 0 !important; font-size: .88rem; line-height: 1.5; color: var(--md-text-2, #9aa7bd); min-height: 3.2em; width: 100%; float: none; }
#order-standard_cart .products .product .md-plan-desc p { margin: 0; color: var(--md-text-2, #9aa7bd) !important; }
#order-standard_cart .products .product .md-plan-cta { display: block; width: 100%; margin-top: 18px; padding: 12px 18px; text-align: center; white-space: nowrap; font-size: .95rem; }
#order-standard_cart .products .product .md-plan-features { list-style: none; margin: 0; padding: 22px 26px 28px; border-top: 1px solid var(--md-border, rgba(128,140,160,.18)); flex: 1 1 auto; }
#order-standard_cart .products .product .md-plan-features li { position: relative; padding: 6px 0 6px 26px; font-size: .9rem; color: var(--md-text, #e8edf6); }
#order-standard_cart .products .product .md-plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--md-accent-text, #5bb4e5); font-weight: 700; }
#order-standard_cart .md-plan-features .feature-value { font-weight: 600; }
#order-standard_cart .md-plan-badge { position: absolute; top: -12px; right: 22px; z-index: 2; padding: 4px 12px; border-radius: 8px; background: var(--md-accent, #5bb4e5); color: var(--md-on-status, #06101c); font-size: .72rem; font-weight: 700; white-space: nowrap; }
#order-standard_cart .md-plan-featured .md-plan-cta { background: var(--md-text, #fff); color: var(--md-bg, #06101c); border-color: var(--md-text, #fff); }
/* glow builds from first to last plan in every row of three */
#order-standard_cart .md-plan-cell:nth-child(3n+1) > .product { border-color: rgba(91,180,229,.25) !important; box-shadow: 0 0 10px rgba(91,180,229,.08) !important; }
#order-standard_cart .md-plan-cell:nth-child(3n+2) > .product { border-color: rgba(91,180,229,.55) !important; box-shadow: 0 0 24px rgba(91,180,229,.25) !important; }
#order-standard_cart .md-plan-cell:nth-child(3n)   > .product { border-color: rgba(91,180,229,.95) !important; box-shadow: 0 0 40px rgba(91,180,229,.48), 0 0 80px rgba(91,180,229,.16) !important; }
@container plans (max-width: 700px) { .md-plans, .md-plans.md-plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container plans (max-width: 460px) { .md-plans, .md-plans.md-plans-2 { grid-template-columns: minmax(0, 1fr); } }

/* ── refinement: centered content, subtler effects ── */
#order-standard_cart .md-plan-top { align-items: center; text-align: center; padding: 30px 26px 24px; }
#order-standard_cart .md-plan-name { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; }
#order-standard_cart .products .product .md-plan-price { justify-content: center; flex-direction: column; align-items: center; gap: 2px; }
#order-standard_cart .products .product .md-plan-price .price { font-size: 2.6rem !important; }
#order-standard_cart .md-plan-from, #order-standard_cart .md-plan-setup { flex-basis: auto; }
#order-standard_cart .products .product .md-plan-desc { text-align: center; padding-top: 12px !important; }
#order-standard_cart .products .product .md-plan-features { padding: 22px 0 28px; display: flex; flex-direction: column; align-items: center; }
#order-standard_cart .products .product .md-plan-features li { width: max-content; max-width: calc(100% - 40px); text-align: left; }
#order-standard_cart .products .product .md-plan-cta { border-radius: 999px; box-shadow: none !important; }
#order-standard_cart .md-plan-badge { right: auto; left: 50%; transform: translateX(-50%); border-radius: 999px; }
/* subtle card styling: hairline borders, faint top sheen, glow only a whisper that grows 1 → 3 */
#order-standard_cart .products .product.md-plan { background-image: linear-gradient(180deg, rgba(91,180,229,.05), transparent 38%) !important; transition: transform .25s, box-shadow .25s, border-color .25s; }
#order-standard_cart .md-plan-cell:nth-child(3n+1) > .product { border-color: rgba(128,140,160,.22) !important; box-shadow: none !important; }
#order-standard_cart .md-plan-cell:nth-child(3n+2) > .product { border-color: rgba(91,180,229,.38) !important; box-shadow: 0 8px 28px rgba(91,180,229,.10) !important; }
#order-standard_cart .md-plan-cell:nth-child(3n)   > .product { border-color: rgba(91,180,229,.55) !important; box-shadow: 0 10px 40px rgba(91,180,229,.18) !important; }
#order-standard_cart .products .product.md-plan:hover { transform: translateY(-2px); border-color: rgba(91,180,229,.7) !important; }

@media (max-width: 640px) {
  #order-standard_cart .md-plans, #order-standard_cart .md-plans.md-plans-2 { grid-template-columns: minmax(0, 1fr) !important; max-width: none; }
  #order-standard_cart .products .product .md-plan-price .price { font-size: 2.1rem !important; }
}
#order-standard_cart .products .product .md-plan-features:not(:has(li)) { display: none; }

/* ═══ 31. Domain search (order form) on phones: no pill around the stacked field + button ═══ */
@media (max-width: 575.98px) {
  #order-standard_cart .domain-checker-container { border: 0 !important; background: transparent !important; box-shadow: none !important; }
  #order-standard_cart .domain-checker-bg { border-radius: 20px; padding: 24px 0; }
  #order-standard_cart .input-group.input-group-box { flex-wrap: wrap; gap: 12px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  #order-standard_cart .input-group-box > .form-control { flex: 1 1 100%; width: 100%; border-radius: 999px !important; }
  #order-standard_cart .input-group-box > .input-group-append, #order-standard_cart .input-group-box > .input-group-btn { flex: 1 1 100%; width: 100%; margin: 0; }
  #order-standard_cart .input-group-box .btn { width: 100%; border-radius: 999px !important; }
}
@media (max-width: 575.98px) { #order-standard_cart .domain-checker-bg { padding: 24px 12px 28px; overflow: visible; } #order-standard_cart .domain-checker-bg .captcha-container, #order-standard_cart .domain-checker-bg .domainchecker-homepage-captcha { margin-bottom: 0; } }

/* ═══ 32. No sideways scroll on phones ═══ */
html, body { overflow-x: clip; max-width: 100%; }
#main-body > div:not(.md-container) > .row { margin-left: 0; margin-right: 0; }
#main-body img, #main-body video, #main-body iframe, #main-body table { max-width: 100%; }
#main-body pre, #main-body code { overflow-wrap: anywhere; }
@media (max-width: 767.98px) { #main-body .table-responsive, #main-body .dataTables_wrapper { max-width: 100%; overflow-x: auto; } }
.landing-page .world-desc > .row, .landing-page .world-data { margin-left: 0; margin-right: 0; }
.landing-page .row { max-width: 100%; }

/* ═══ 33. MarketConnect store layer (mirrored from store.css so edits are cache-busted with the theme) ═══ */
/* ═══════════════════════════════════════════════════════════════
   Mod Dash — MarketConnect store layer (light + dark via --md-* tokens)
   ═══════════════════════════════════════════════════════════════ */
html body .landing-page { background: var(--md-bg, #f6f8fb) !important; color: var(--md-text, #0f1b2d); }
html body .landing-page h1, html body .landing-page h2, html body .landing-page h3, html body .landing-page h4, html body .landing-page h5, html body .landing-page h6 { color: var(--md-text, #0f1b2d) !important; font-weight: 700; letter-spacing: -.01em; }
html body .landing-page p, html body .landing-page li, html body .landing-page span, html body .landing-page label, html body .landing-page strong, html body .landing-page b, html body .landing-page td, html body .landing-page th { color: inherit; }
html body .landing-page p { color: var(--md-text-2, #54627a); }
html body .landing-page a:not(.btn):not(.nav-link) { color: var(--md-accent-text, #0a79ad); }
html body .landing-page .hero { background: transparent !important; color: var(--md-text, #0f1b2d) !important; padding: 56px 0 36px; }
html body .landing-page .hero h2, html body .landing-page .hero h1.md-h1 { font-weight: 800; }
html body .landing-page .hero p, html body .landing-page .hero li { color: var(--md-text-2, #54627a) !important; }

/* section navigation → pill tabs */
html body .landing-page .navbar { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 8px; }
html body .landing-page .navbar .container { display: flex; justify-content: center; }
html body .landing-page .navbar-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px; background: var(--md-surface, #fff); border: 1px solid var(--md-border, #e2e8f0); border-radius: 999px; }
html body .landing-page .navbar .nav-link, html body .landing-page .navbar .navbar-nav > li > a { color: var(--md-text-2, #54627a) !important; background: transparent !important; border: 0 !important; border-radius: 999px !important; padding: 8px 20px !important; font-weight: 600; transition: background .15s, color .15s; }
html body .landing-page .navbar .nav-link:hover, html body .landing-page .navbar .nav-link:focus { background: var(--md-accent-soft, rgba(59,184,232,.16)) !important; color: var(--md-accent-text, #0a79ad) !important; }
html body .landing-page .navbar .nav-item.active .nav-link, html body .landing-page .navbar .nav-link.active, html body .landing-page .navbar li.active > a { background: var(--md-accent, #3bb8e8) !important; color: var(--md-accent-ink, #06101c) !important; }
html body .landing-page .nav-tabs > li > a { background: var(--md-surface-2, #f1f4f8) !important; color: var(--md-text-2, #54627a) !important; border-radius: 12px 12px 0 0 !important; }
html body .landing-page .nav-tabs > li.active > a { background: var(--md-surface, #fff) !important; color: var(--md-text, #0f1b2d) !important; border-top: 3px solid var(--md-accent, #3bb8e8) !important; }
html body .landing-page .tab-content { background: var(--md-surface, #fff) !important; border: 1px solid var(--md-border, #e2e8f0); border-radius: 0 16px 16px 16px; }

/* coloured vendor bands → themed surfaces */
html body .landing-page .content-block { background: transparent; color: var(--md-text, #0f1b2d); padding-top: 56px; padding-bottom: 56px; }
html body .landing-page .content-block.plans, html body .landing-page .content-block.pricing, html body .landing-page .content-block.emergency, html body .landing-page .content-block.validation-levels, html body .landing-page .validation-levels, html body .landing-page .standout-1, html body .landing-page .content-block.competitive-upgrade-promo, html body .landing-page .get-started, html body .landing-page .light-grey-bg, html body .landing-page .content-block.faqs, html body .landing-page .content-block.faq, html body .landing-page .content-block.detailed-info, html body .landing-page .content-block.features-dark {
    background: var(--md-surface-2, #f1f4f8) !important; color: var(--md-text, #0f1b2d) !important; border-top: 1px solid var(--md-border, #e2e8f0); border-bottom: 1px solid var(--md-border, #e2e8f0);
}
html body .landing-page .content-block.plans *, html body .landing-page .content-block.pricing > .container > h2, html body .landing-page .content-block.emergency h2, html body .landing-page .content-block.emergency h3, html body .landing-page .content-block.emergency p, html body .landing-page .validation-levels > h2, html body .landing-page .validation-levels > .container > h2, html body .landing-page .competitive-upgrade-promo h2, html body .landing-page .competitive-upgrade-promo h3, html body .landing-page .competitive-upgrade-promo p, html body .landing-page .standout-1 h2, html body .landing-page .standout-1 h3, html body .landing-page .standout-1 p { color: var(--md-text, #0f1b2d) !important; }

/* cards */
html body .landing-page .item, html body .landing-page .plan, html body .landing-page .card, html body .landing-page .pricing-item, html body .landing-page .wrapper, html body .landing-page .panel, html body .landing-page .product-options .item {
    background: var(--md-surface, #fff) !important; border: 1px solid var(--md-border, #e2e8f0) !important; border-radius: 20px !important; box-shadow: var(--md-shadow-card, none); color: var(--md-text, #0f1b2d) !important; overflow: hidden;
}
html body .landing-page .item h4, html body .landing-page .plan h3, html body .landing-page .plan h4, html body .landing-page .card h4, html body .landing-page .card h3, html body .landing-page .pricing-item h4 { color: var(--md-text, #0f1b2d) !important; }
html body .landing-page .item p, html body .landing-page .plan p, html body .landing-page .plan li, html body .landing-page .card p, html body .landing-page .pricing-item li, html body .landing-page .wrapper p, html body .landing-page .wrapper li, html body .landing-page .wrapper strong { color: var(--md-text-2, #54627a) !important; }
html body .landing-page .plan .price, html body .landing-page .pricing-item .price, html body .landing-page .item .price, html body .landing-page .get-started .price { color: var(--md-accent-text, #0a79ad) !important; font-weight: 700; }
html body .landing-page .plan li, html body .landing-page .pricing-item li { border-color: var(--md-border, #e2e8f0) !important; }
html body .landing-page .item h4 { font-size: 1rem; text-transform: none; }
html body .landing-page .features .col-sm-4, html body .landing-page .col-lg-2.col-sm-4, html body .landing-page .container.text { color: var(--md-text-2, #54627a) !important; }
html body .landing-page .item:hover, html body .landing-page .plan:hover { border-color: var(--md-accent, #3bb8e8) !important; }

/* buttons */
html body .landing-page .btn, html body .landing-page button.btn { border-radius: 999px !important; font-weight: 700; }
html body .landing-page .btn-primary, html body .landing-page .btn-success, html body .landing-page .btn-order-now, html body .landing-page .btn-buy, html body .landing-page .btn-add { background: var(--md-accent, #3bb8e8) !important; border-color: var(--md-accent, #3bb8e8) !important; color: var(--md-accent-ink, #06101c) !important; }
html body .landing-page .btn-default, html body .landing-page .btn-outline { background: transparent !important; border: 1px solid var(--md-border-2, #cfd8e3) !important; color: var(--md-text, #0f1b2d) !important; }

/* FAQ / accordion / lists / tables */
html body .landing-page .faq .card, html body .landing-page .accordion .card, html body .landing-page .faqs .card { background: var(--md-surface, #fff) !important; }
html body .landing-page .faq h4, html body .landing-page .faqs h4 { color: var(--md-text, #0f1b2d) !important; }
html body .landing-page table, html body .landing-page .table { color: var(--md-text, #0f1b2d) !important; background: transparent; }
html body .landing-page .table td, html body .landing-page .table th { border-color: var(--md-border, #e2e8f0) !important; }
html body .landing-page .irs-grid-text, html body .landing-page .irs-min, html body .landing-page .irs-max { color: var(--md-text-2, #54627a) !important; background: transparent !important; text-shadow: none; }
html body .landing-page .irs-bar, html body .landing-page .irs-handle > i:first-child, html body .landing-page .irs-single, html body .landing-page .irs-from, html body .landing-page .irs-to { background: var(--md-accent, #3bb8e8) !important; color: var(--md-accent-ink, #06101c) !important; }
html body .landing-page .irs-line { background: var(--md-border-2, #cfd8e3) !important; border-color: var(--md-border-2, #cfd8e3) !important; }
/* logos stay readable on dark: pale tile behind vendor images */
html body .landing-page .hero img, html body .landing-page .item img.logo, html body .landing-page .item > img, html body .landing-page .logo-wrapper img { background: #eef2f7; border-radius: 14px; padding: 10px 14px; }

/* refinements: section tabs hug their content, plan headers, plan buttons */
html body .landing-page .navbar .container { width: auto; max-width: 100%; }
html body .landing-page .navbar-collapse { flex-grow: 0 !important; }
html body .landing-page .navbar-nav { width: auto; display: inline-flex; border-radius: 999px; }
html body .landing-page .navbar-nav > li, html body .landing-page .navbar-nav .nav-item { flex: 0 0 auto; width: auto; float: none; }
html body .landing-page .navbar-nav .nav-link { white-space: nowrap; }
html body .landing-page .navbar { display: flex; justify-content: center; }
html body .landing-page .plan .header { background: var(--md-surface-2, #f1f4f8) !important; border-bottom: 1px solid var(--md-border, #e2e8f0); color: var(--md-text, #0f1b2d) !important; }
html body .landing-page .plan .header h4, html body .landing-page .plan .header h4 span { color: var(--md-text, #0f1b2d) !important; }
html body .landing-page .plan .header h4 span.float-right { color: var(--md-accent-text, #0a79ad) !important; }
html body .landing-page .plan .header p { color: var(--md-text-2, #54627a) !important; }
html body .landing-page .plan .btn, html body .landing-page .plan button, html body .landing-page .plan .btn-block { background: var(--md-accent, #3bb8e8) !important; border: 0 !important; color: var(--md-accent-ink, #06101c) !important; }
html body .landing-page .plan select, html body .landing-page .plan .custom-select, html body .landing-page .plan .form-control { background-color: var(--md-surface-2, #f1f4f8) !important; color: var(--md-text, #0f1b2d) !important; border-color: var(--md-border-2, #cfd8e3) !important; border-radius: 999px !important; }

/* vendor pages that colour the whole landing page (NordVPN etc.) */
html body .landing-page[class] { color: var(--md-text, #0f1b2d); }
html body .landing-page[class] .feature.logo, html body .landing-page[class] .feature.light, html body .landing-page .feature.logo { background: var(--md-surface-2, #f1f4f8) !important; }
html body .landing-page .feature:not(.world):not(.hero) { color: var(--md-text, #0f1b2d); }
html body .landing-page .feature.pricing, html body .landing-page .feature.comparison { color: var(--md-text, #0f1b2d); }
html body .landing-page .feature.pricing p, html body .landing-page .feature.pricing span, html body .landing-page .feature.comparison p, html body .landing-page .feature.comparison span, html body .landing-page .feature.comparison strong { color: var(--md-text, #0f1b2d) !important; }
html body .landing-page.nordvpn .hero, html body .landing-page .feature.world { color: #fff; }
html body .landing-page.nordvpn .hero h2, html body .landing-page.nordvpn .hero h3, html body .landing-page.nordvpn .hero p, html body .landing-page.nordvpn .hero li, html body .landing-page .feature.world h2, html body .landing-page .feature.world h3, html body .landing-page .feature.world p { color: #fff !important; }
html body .landing-page .feature.world { background: #0e1b33 !important; }
html body .landing-page .feature.world h1, html body .landing-page .feature.world h2, html body .landing-page .feature.world h3, html body .landing-page .feature.world p, html body .landing-page .feature.world span, html body .landing-page .feature.world div,
html body .landing-page .feature.world h2.md-h1x { color: #fff !important; }
html body .landing-page .btn-get-nord, html body .landing-page .btn-get-deal { background: var(--md-accent, #3bb8e8) !important; border-color: var(--md-accent, #3bb8e8) !important; color: var(--md-accent-ink, #06101c) !important; }
html body .landing-page .get-started .btn, html body .landing-page .get-started button, html body .landing-page .content-block .btn.btn-default.btn-order-now { background: var(--md-accent, #3bb8e8) !important; border-color: var(--md-accent, #3bb8e8) !important; color: var(--md-accent-ink, #06101c) !important; }
html body .landing-page .get-started .price, html body .landing-page .get-started .price * { color: var(--md-accent-text, #0a79ad) !important; }
html body .landing-page .navbar .container, html body .landing-page .navbar-nav { flex-wrap: nowrap; }
@media (max-width: 767px) { html body .landing-page .navbar-nav { flex-wrap: wrap; border-radius: 24px; } }
html body .landing-page .item li img { width: 22px !important; height: 22px !important; padding: 3px !important; border-radius: 50% !important; background: #eef2f7 !important; margin-right: 8px; vertical-align: middle; flex: 0 0 auto; }
html body .landing-page .item li { display: flex; align-items: flex-start; gap: 4px; text-align: left; list-style: none; }
html body .landing-page .item .btn, html body .landing-page .item button.btn, html body .landing-page .item button[type=submit] { background: var(--md-accent, #3bb8e8) !important; border: 0 !important; color: var(--md-accent-ink, #06101c) !important; padding: 10px 34px; opacity: 1 !important; }
html body .landing-page .help-me-choose, html body .landing-page .help-me-choose a, html body .landing-page .help-me-choose p { color: var(--md-text-2, #54627a) !important; }
html body .landing-page .help-me-choose a { color: var(--md-accent-text, #0a79ad) !important; }
html body .landing-page a.btn.btn-primary, html body .landing-page a.btn.btn-primary:hover, html body .landing-page a.btn.btn-primary:focus, html body .landing-page a.btn.btn-success, html body .landing-page a.btn-order-now, html body .landing-page .btn-primary:not(:disabled) { color: var(--md-accent-ink, #06101c) !important; }
html body .landing-page .btn-primary:hover, html body .landing-page .btn-success:hover { background: var(--md-accent-hover, #2ea6d4) !important; }

/* SSL certificate sub-pages */
html body .landing-page .content-block.certificate-options { background: var(--md-surface-2, #f1f4f8) !important; color: var(--md-text, #0f1b2d) !important; border-top: 1px solid var(--md-border, #e2e8f0); }
html body .landing-page .certificate-options h3, html body .landing-page .certificate-options h4 { color: var(--md-text, #0f1b2d) !important; }
html body .landing-page .row-pricing-table .sidebar li { color: var(--md-text-2, #54627a) !important; background: transparent !important; }
html body .landing-page .row-pricing-table .col-md-4:not(.sidebar) li { background: var(--md-surface, #fff) !important; color: var(--md-text, #0f1b2d) !important; border: 1px solid var(--md-border, #e2e8f0) !important; }
html body .landing-page .row-pricing-table .header { background: transparent !important; }
html body .landing-page .row-pricing-table .btn, html body .landing-page .row-pricing-table .btn-primary { background: var(--md-accent, #3bb8e8) !important; color: var(--md-accent-ink, #06101c) !important; border: 0 !important; }
html body .landing-page .help-me-choose { background: transparent !important; }
html body .landing-page .navbar .container, html body .landing-page .navbar-nav { flex-wrap: wrap; }
html body .landing-page .navbar-nav { max-width: 100%; justify-content: center; }
html body .landing-page .navbar .navbar-brand { display: none; }
html body .landing-page .navbar .container { width: fit-content !important; max-width: 100% !important; flex: 0 1 auto; }
html body .landing-page .navbar .navbar-collapse, html body .landing-page .navbar .navbar-nav { width: auto !important; flex: 0 1 auto !important; }
html body .landing-page .navbar .navbar-nav > li, html body .landing-page .navbar .nav-item { width: auto !important; flex: 0 0 auto; }
html body .landing-page.nordvpn .hero { background: #0e1b33 !important; }
html body .landing-page .content-block.features .feature { height: auto !important; min-height: 250px; overflow: visible !important; }

/* SSL "Certificate Features" band + tiles */
html body .landing-page .content-block.features { background: var(--md-surface-2, #f1f4f8) !important; color: var(--md-text, #0f1b2d) !important; }
html body .landing-page.ssl .content-block.features .feature { background: var(--md-surface, #fff) !important; border: 1px solid var(--md-border, #e2e8f0) !important; border-radius: 20px; box-shadow: var(--md-shadow-card, none); padding: 28px 18px; height: 100% !important; min-height: 200px; text-align: center; }
html body .landing-page.ssl .content-block.features .feature i { color: var(--md-accent-text, #0a79ad) !important; font-size: 2rem; margin-bottom: 14px; display: block; }
html body .landing-page.ssl .content-block.features .feature h5 { color: var(--md-text, #0f1b2d) !important; font-weight: 600; }
html body .landing-page.ssl .content-block.features .col-lg-3 { margin-bottom: 24px; }
/* NordVPN: vendor art is designed for navy — no pale tiles */
html body .landing-page.nordvpn img { background: transparent !important; padding: 0 !important; border-radius: 0; }

/* NordVPN: no card outlines on the vendor artwork, hero copy always on navy */
html body .landing-page.nordvpn .hero, html body .landing-page.nordvpn .hero * { border: 0 !important; box-shadow: none !important; }
html body .landing-page.nordvpn .hero { color: #fff !important; }
html body .landing-page.nordvpn .hero h1, html body .landing-page.nordvpn .hero h2, html body .landing-page.nordvpn .hero h3, html body .landing-page.nordvpn .hero p, html body .landing-page.nordvpn .hero li, html body .landing-page.nordvpn .hero span:not(.blue):not([class*="accent"]), html body .landing-page.nordvpn .hero div { color: #fff !important; }
html body .landing-page.nordvpn .hero [class*="blue"], html body .landing-page.nordvpn .hero .highlight { color: #6aa1ff !important; }
html body .landing-page.nordvpn .col-2, html body .landing-page.nordvpn .feature.icon .col-2, html body .landing-page.nordvpn .feature .container > .row > div { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html body .landing-page.nordvpn img { border: 0 !important; box-shadow: none !important; outline: 0; }


/* ═══ 34. Phone fixes for store pages ═══ */
.landing-page .feature.world { height: auto !important; min-height: 337px; padding-bottom: 36px; }
html body .landing-page .feature.logo { height: auto !important; background: #0e1b33 !important; padding: 28px 0; }
html body .landing-page .feature.logo img { background: transparent !important; padding: 0 !important; }
html body .social-bee .accordion .tab { max-height: none !important; }
html body .social-bee .accordion .tab__content { display: none !important; max-height: none !important; }
html body .social-bee .accordion .tab input:checked ~ .tab__content { display: block !important; }
html body .social-bee img:not([src*="Logo"]) { background: transparent !important; padding: 0 !important; border-radius: 14px; }
@media (max-width: 767.98px) {
  html body .landing-page .content-block { padding-top: 36px; padding-bottom: 36px; }
  html body .landing-page .content-block.features .feature { min-height: 0 !important; }
  .landing-page .irs-grid-text.js-grid-text-1, .landing-page .irs-grid-text.js-grid-text-3, .landing-page .irs-grid-text.js-grid-text-4 { display: none; }
  .landing-page .irs-grid-text { font-size: .7rem; }
  html body .landing-page h2, html body .landing-page .faq h2, html body .landing-page .faqs h2 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
  html body .landing-page .hero h2, html body .landing-page .hero h1.md-h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .landing-page .feature.world .world-data h1, .landing-page .feature.world .world-data .h1,
  .landing-page .feature.world .world-data h2.md-h1x { font-size: 2.4rem; }
}

/* NordVPN "world" band + logo strip: let content size the section on phones/tablets */
@media (max-width: 1199.98px) {
  html body .landing-page .feature.world .col-12 { position: relative; }
  html body .landing-page .feature.world .world-image { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; opacity: .35; pointer-events: none; }
  html body .landing-page .feature.world .world-desc { position: relative !important; top: auto !important; left: auto !important; width: 100%; padding: 8px 0 12px; }
}
html body .landing-page[class] .feature.logo.logo { background: #0e1b33 !important; }
html body .landing-page[class] .feature.logo.logo img { filter: brightness(0) invert(1); opacity: .7; }

/* ═══ 35. Store landing pages: full-bleed bands, NordVPN encasements, SocialBee action bar ═══ */
html body #main-body .primary-content:has(> .landing-page), html body #main-body .primary-content:has(> .social-bee), html body #main-body .primary-content:has(> .dynamic-landing-page) { padding-left: 0; padding-right: 0; }

/* NordVPN: put each content band inside a themed card, like the rest of the portal */
html body .landing-page.nordvpn .feature:not(.world):not(.logo) { padding: 14px 18px; background: transparent !important; }
html body .landing-page.nordvpn .feature:not(.world):not(.logo) > .container { background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 28px; padding: 44px 36px; box-shadow: var(--md-shadow-card, none); max-width: 1140px; }
html body .landing-page.nordvpn .feature:not(.world):not(.logo) h1, html body .landing-page.nordvpn .feature:not(.world):not(.logo) h2, html body .landing-page.nordvpn .feature:not(.world):not(.logo) h3, html body .landing-page.nordvpn .feature:not(.world):not(.logo) h4, html body .landing-page.nordvpn .feature:not(.world):not(.logo) strong,
html body .landing-page.nordvpn .feature:not(.world):not(.logo) h2.md-h1x { color: var(--md-text) !important; }
html body .landing-page.nordvpn .feature:not(.world):not(.logo) p, html body .landing-page.nordvpn .feature:not(.world):not(.logo) li, html body .landing-page.nordvpn .feature:not(.world):not(.logo) span { color: var(--md-text-2) !important; }
html body .landing-page.nordvpn .feature:not(.world):not(.logo) .col-2, html body .landing-page.nordvpn .feature.icon .col-2 { background: var(--md-surface-2) !important; border-radius: 16px; padding: 14px; }
html body .landing-page.nordvpn .container.line-break { display: none; }
html body .landing-page.nordvpn .feature.world { margin: 14px 18px; border-radius: 28px; overflow: hidden; }
html body .landing-page.nordvpn .feature.logo { margin: 0 18px 14px; border-radius: 28px; }
html body .landing-page.nordvpn .feature img { border-radius: 16px; }
@media (max-width: 767.98px) {
  html body .landing-page.nordvpn .feature:not(.world):not(.logo) { padding: 10px 12px; }
  html body .landing-page.nordvpn .feature:not(.world):not(.logo) > .container { padding: 28px 18px; border-radius: 22px; }
  html body .landing-page.nordvpn .feature.world { margin: 10px 12px; border-radius: 22px; }
  html body .landing-page.nordvpn .feature.logo { margin: 0 12px 10px; border-radius: 22px; }
}

/* SocialBee: feature tabs get breathing room instead of touching */
html body .social-bee .action-buttons { height: auto !important; min-height: 0; padding: 22px 16px; gap: 12px; flex-wrap: wrap; justify-content: center; }
html body .social-bee .action-buttons button { margin: 0; padding: 10px 22px; flex: 0 1 auto; }
@media (max-width: 575.98px) { html body .social-bee .action-buttons { gap: 10px; padding: 18px 14px; } html body .social-bee .action-buttons button { padding: 9px 18px; font-size: .9rem; } }

/* page titles added so every public page has exactly one H1 */
.md-page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 18px; }
@media (max-width: 767.98px) { .md-page-title { font-size: 1.35rem; } }
h1.md-h1 { margin-top: 0; }
/* universal_slider store groups: the group headline is now the page H1, keep the old h2 look */
#order-universal_slider h1#headline { font-size: 1.45rem !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; margin: 0 0 5px !important; text-align: center; }

/* ── Logo: Nevis wordmark and M, same proportions as the social banner and the flat site ── */
@font-face { font-family: 'Nevis'; src: url('../fonts/nevis.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
.md-brand { --d: 28px; gap: calc(var(--d) * .286) !important; }
.md-brand-mark { width: var(--d) !important; height: var(--d) !important; }
.md-brand-m { fill: var(--md-logo-m) !important; stroke: none !important; }
.md-brand-text { height: var(--d); justify-content: space-between; font-family: 'Nevis', var(--font-head, sans-serif); text-transform: uppercase; line-height: 1; }
.md-brand-name {
  font-family: 'Nevis', sans-serif !important; font-weight: 700 !important; font-size: calc(var(--d) * .734) !important; letter-spacing: .08em !important;
  line-height: calc(var(--d) * .536) !important; height: calc(var(--d) * .536); position: relative; top: calc(var(--d) * .03); white-space: nowrap;
}
.md-brand-sub {
  font-family: 'Nevis', sans-serif !important; font-weight: 700 !important; font-size: calc(var(--d) * .489) !important; letter-spacing: .12em !important;
  line-height: calc(var(--d) * .357) !important; height: calc(var(--d) * .357); position: relative; top: calc(var(--d) * .015); white-space: nowrap;
}
@media (max-width: 900px) { .md-brand { --d: 24px; } }
@media (max-width: 1100px) { .md-brand-sub { display: block !important; } }