/* =======================================================================
   OwnWebServers — Nexus Theme Override
   Replaces header, navigation, footer, and adds proper dark/light mode.
   All OWS classes are prefixed with .ows- to avoid Bootstrap conflicts.
   ======================================================================= */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --ows-brand-50:   #eef4ff;
  --ows-brand-100:  #d9e6ff;
  --ows-brand-200:  #bcd3ff;
  --ows-brand-300:  #8eb6ff;
  --ows-brand-400:  #598dff;
  --ows-brand-500:  #3464f6;
  --ows-brand-600:  #1f47eb;
  --ows-brand-700:  #1836d8;
  --ows-brand-800:  #1a2faf;
  --ows-brand-900:  #1b2d8a;

  /* Accent */
  --ows-accent-300: #67e8f9;
  --ows-accent-400: #22d3ee;
  --ows-accent-500: #06b6d4;

  /* Ink (darkest navy) */
  --ows-ink:        #0a0e1a;
  --ows-ink-soft:   #0f1525;

  /* Slate */
  --ows-slate-50:   #f8fafc;
  --ows-slate-100:  #f1f5f9;
  --ows-slate-200:  #e2e8f0;
  --ows-slate-300:  #cbd5e1;
  --ows-slate-400:  #94a3b8;
  --ows-slate-500:  #64748b;
  --ows-slate-600:  #475569;
  --ows-slate-700:  #334155;
  --ows-slate-800:  #1e293b;
  --ows-slate-900:  #0f172a;
  --ows-white:      #ffffff;

  /* Radius */
  --ows-r-sm:  0.5rem;
  --ows-r:     0.75rem;
  --ows-r-lg:  1rem;
  --ows-r-xl:  1.5rem;

  /* Shadows */
  --ows-shadow-glow: 0 0 0 1px rgba(52,100,246,.15), 0 20px 60px -20px rgba(52,100,246,.45);
  --ows-shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 12px 32px -12px rgba(16,24,40,.18);
  --ows-transition:  200ms cubic-bezier(.4,0,.2,1);

  /* LIGHT mode semantic tokens */
  --ows-bg-page:    var(--ows-white);
  --ows-bg-card:    var(--ows-white);
  --ows-bg-subtle:  var(--ows-slate-50);
  --ows-text-head:  var(--ows-slate-900);
  --ows-text-base:  var(--ows-slate-600);
  --ows-text-muted: var(--ows-slate-500);
  --ows-border:     rgba(15,23,42,.12);
  --ows-border-sub: rgba(15,23,42,.07);

  /* Header (light) */
  --ows-header-bg:           rgba(255,255,255,.92);
  --ows-header-border:       rgba(15,23,42,.10);
  --ows-header-scrolled-bg:  rgba(255,255,255,.97);
  --ows-header-scrolled-shd: 0 2px 20px rgba(15,23,42,.10);

  /* Nav (light) */
  --ows-nav-text:       var(--ows-slate-600);
  --ows-nav-text-hover: var(--ows-slate-900);
  --ows-nav-hover-bg:   rgba(15,23,42,.05);

  /* Dropdown (light) */
  --ows-dd-bg:         var(--ows-white);
  --ows-dd-border:     var(--ows-slate-200);
  --ows-dd-item-hover: rgba(15,23,42,.05);

  /* Mobile (light) */
  --ows-mob-bg:         var(--ows-white);
  --ows-mob-border:     rgba(15,23,42,.08);
  --ows-mob-item-hover: var(--ows-slate-100);

  /* Footer (light) */
  --ows-footer-bg:          rgba(248,250,252,.7);
  --ows-footer-border:      rgba(15,23,42,.10);
  --ows-footer-text:        var(--ows-slate-600);
  --ows-footer-head:        var(--ows-slate-900);
  --ows-footer-muted:       var(--ows-slate-500);
  --ows-footer-link:        var(--ows-slate-600);
  --ows-footer-link-hover:  var(--ows-brand-600);
  --ows-footer-social-bg:   var(--ows-white);
  --ows-footer-social-bdr:  var(--ows-slate-200);
  --ows-footer-social-text: var(--ows-slate-500);

  /* Logo */
  --ows-logo-text: var(--ows-slate-900);
  --ows-grad-from: var(--ows-brand-600);
  --ows-grad-via:  var(--ows-brand-500);
  --ows-grad-to:   var(--ows-accent-500);

  /* Toggle / Hamburger */
  --ows-toggle-bg:    rgba(255,255,255,.6);
  --ows-toggle-bdr:   var(--ows-slate-200);
  --ows-toggle-text:  var(--ows-slate-600);
  --ows-toggle-hover: var(--ows-brand-600);
  --ows-ham-bg:       rgba(255,255,255,.6);
  --ows-ham-bdr:      var(--ows-slate-200);
  --ows-ham-text:     var(--ows-slate-700);

  /* Topbar (account notifications) */
  --ows-topbar-bg:     var(--ows-slate-900);
  --ows-topbar-text:   var(--ows-slate-300);
  --ows-topbar-border: rgba(255,255,255,.08);
}

/* DARK mode tokens */
html.dark {
  color-scheme: dark;
  --ows-bg-page:    var(--ows-ink);
  --ows-bg-card:    var(--ows-ink-soft);
  --ows-bg-subtle:  rgba(255,255,255,.03);
  --ows-text-head:  var(--ows-white);
  --ows-text-base:  var(--ows-slate-300);
  --ows-text-muted: var(--ows-slate-400);
  --ows-border:     rgba(255,255,255,.10);
  --ows-border-sub: rgba(255,255,255,.06);

  --ows-header-bg:           rgba(10,14,26,.92);
  --ows-header-border:       rgba(255,255,255,.08);
  --ows-header-scrolled-bg:  rgba(10,14,26,.97);
  --ows-header-scrolled-shd: 0 2px 24px rgba(0,0,0,.4);

  --ows-nav-text:       var(--ows-slate-300);
  --ows-nav-text-hover: var(--ows-white);
  --ows-nav-hover-bg:   rgba(255,255,255,.06);

  --ows-dd-bg:         var(--ows-ink-soft);
  --ows-dd-border:     rgba(255,255,255,.10);
  --ows-dd-item-hover: rgba(255,255,255,.05);

  --ows-mob-bg:         var(--ows-ink);
  --ows-mob-border:     rgba(255,255,255,.08);
  --ows-mob-item-hover: rgba(255,255,255,.05);

  --ows-footer-bg:          var(--ows-ink-soft);
  --ows-footer-border:      rgba(255,255,255,.10);
  --ows-footer-text:        var(--ows-slate-400);
  --ows-footer-head:        var(--ows-white);
  --ows-footer-muted:       var(--ows-slate-400);
  --ows-footer-link:        var(--ows-slate-400);
  --ows-footer-link-hover:  var(--ows-brand-300);
  --ows-footer-social-bg:   rgba(255,255,255,.05);
  --ows-footer-social-bdr:  rgba(255,255,255,.10);
  --ows-footer-social-text: var(--ows-slate-400);

  --ows-logo-text: var(--ows-white);
  --ows-grad-from: var(--ows-brand-300);
  --ows-grad-via:  var(--ows-brand-400);
  --ows-grad-to:   var(--ows-accent-300);

  --ows-toggle-bg:    rgba(255,255,255,.05);
  --ows-toggle-bdr:   rgba(255,255,255,.10);
  --ows-toggle-text:  var(--ows-slate-300);
  --ows-toggle-hover: var(--ows-brand-300);
  --ows-ham-bg:       rgba(255,255,255,.05);
  --ows-ham-bdr:      rgba(255,255,255,.10);
  --ows-ham-text:     var(--ows-slate-200);

  --ows-topbar-bg:     rgba(10,14,26,.95);
  --ows-topbar-text:   var(--ows-slate-400);
  --ows-topbar-border: rgba(255,255,255,.05);

  /* ── Override Nexus theme semantic variables (custom.css) for dark mode ── */
  /* Without these, any element using var(--text), var(--bg-lifted), etc.
     stays in light-mode colours regardless of our html.dark toggle.         */
  --neutral-50:  #0a0e1a;
  --neutral-100: #0f1525;
  --neutral-200: #1e293b;
  --neutral-300: #2d3748;
  --neutral-400: #4a5568;
  --neutral-500: #718096;
  --neutral-600: #a0aec0;
  --neutral-700: #cbd5e0;
  --neutral-800: #e2e8f0;
  --neutral-900: #f7fafc;
  --neutral-950: #ffffff;

  --text:          #f1f5f9;
  --text-inverted: #0a0e1a;
  --text-muted:    #64748b;
  --text-lifted:   #94a3b8;
  --text-accented: #cbd5e1;

  --border-muted:   rgba(255,255,255,.06);
  --border:         rgba(255,255,255,.10);
  --border-lifted:  rgba(255,255,255,.18);
  --border-accented:rgba(255,255,255,.30);

  --bg:          #0a0e1a;
  --bg-muted:    #0a0e1a;
  --bg-lifted:   #0f1525;
  --bg-accented: #1e293b;
  --bg-inverted: #f1f5f9;

  --primary:          #3464f6;
  --primary-lifted:   #1f47eb;
  --primary-accented: #1836d8;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) {
    color-scheme: dark;
    --ows-bg-page:    var(--ows-ink);
    --ows-bg-card:    var(--ows-ink-soft);
    --ows-bg-subtle:  rgba(255,255,255,.03);
    --ows-text-head:  var(--ows-white);
    --ows-text-base:  var(--ows-slate-300);
    --ows-text-muted: var(--ows-slate-400);
    --ows-border:     rgba(255,255,255,.10);
    --ows-border-sub: rgba(255,255,255,.06);

    --ows-header-bg:           rgba(10,14,26,.92);
    --ows-header-border:       rgba(255,255,255,.08);
    --ows-header-scrolled-bg:  rgba(10,14,26,.97);
    --ows-header-scrolled-shd: 0 2px 24px rgba(0,0,0,.4);

    --ows-nav-text:       var(--ows-slate-300);
    --ows-nav-text-hover: var(--ows-white);
    --ows-nav-hover-bg:   rgba(255,255,255,.06);

    --ows-dd-bg:         var(--ows-ink-soft);
    --ows-dd-border:     rgba(255,255,255,.10);
    --ows-dd-item-hover: rgba(255,255,255,.05);

    --ows-mob-bg:         var(--ows-ink);
    --ows-mob-border:     rgba(255,255,255,.08);
    --ows-mob-item-hover: rgba(255,255,255,.05);

    --ows-footer-bg:          var(--ows-ink-soft);
    --ows-footer-border:      rgba(255,255,255,.10);
    --ows-footer-text:        var(--ows-slate-400);
    --ows-footer-head:        var(--ows-white);
    --ows-footer-muted:       var(--ows-slate-400);
    --ows-footer-link:        var(--ows-slate-400);
    --ows-footer-link-hover:  var(--ows-brand-300);
    --ows-footer-social-bg:   rgba(255,255,255,.05);
    --ows-footer-social-bdr:  rgba(255,255,255,.10);
    --ows-footer-social-text: var(--ows-slate-400);

    --ows-logo-text: var(--ows-white);
    --ows-grad-from: var(--ows-brand-300);
    --ows-grad-via:  var(--ows-brand-400);
    --ows-grad-to:   var(--ows-accent-300);

    --ows-toggle-bg:    rgba(255,255,255,.05);
    --ows-toggle-bdr:   rgba(255,255,255,.10);
    --ows-toggle-text:  var(--ows-slate-300);
    --ows-toggle-hover: var(--ows-brand-300);
    --ows-ham-bg:       rgba(255,255,255,.05);
    --ows-ham-bdr:      rgba(255,255,255,.10);
    --ows-ham-text:     var(--ows-slate-200);

    --ows-topbar-bg:     rgba(10,14,26,.95);
    --ows-topbar-text:   var(--ows-slate-400);
    --ows-topbar-border: rgba(255,255,255,.05);

    /* Nexus theme semantic variable overrides (mirrors html.dark block above) */
    --neutral-50:  #0a0e1a;
    --neutral-100: #0f1525;
    --neutral-200: #1e293b;
    --neutral-300: #2d3748;
    --neutral-400: #4a5568;
    --neutral-500: #718096;
    --neutral-600: #a0aec0;
    --neutral-700: #cbd5e0;
    --neutral-800: #e2e8f0;
    --neutral-900: #f7fafc;
    --neutral-950: #ffffff;

    --text:          #f1f5f9;
    --text-inverted: #0a0e1a;
    --text-muted:    #64748b;
    --text-lifted:   #94a3b8;
    --text-accented: #cbd5e1;

    --border-muted:    rgba(255,255,255,.06);
    --border:          rgba(255,255,255,.10);
    --border-lifted:   rgba(255,255,255,.18);
    --border-accented: rgba(255,255,255,.30);

    --bg:          #0a0e1a;
    --bg-muted:    #0a0e1a;
    --bg-lifted:   #0f1525;
    --bg-accented: #1e293b;
    --bg-inverted: #f1f5f9;

    --primary:          #3464f6;
    --primary-lifted:   #1f47eb;
    --primary-accented: #1836d8;
  }
}

/* ── 2. PAGE-LEVEL DARK MODE ADAPTATION ──────────────────────────────── */
/* Override Nexus's permanent dark body with OWS adaptive tokens */
html, body {
  background-color: var(--ows-bg-page) !important;
}
html {
  font-size: 16px;
}

/* Main body section background */
section#main-body {
  background-color: var(--ows-bg-subtle) !important;
}

/* Page text color */
html.dark body, html.dark .primary-content {
  color: var(--ows-text-base);
}
@media (prefers-color-scheme: dark) {
  html:not(.light) body,
  html:not(.light) .primary-content { color: var(--ows-text-base); }
}

/* Dark mode — Bootstrap cards */
html.dark .card,
html.dark .panel { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base); }
html.dark .card-header,
html.dark .panel-heading { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-head); }
html.dark .card-body,
html.dark .panel-body { background-color: var(--ows-bg-card) !important; color: var(--ows-text-base); }
html.dark .card-footer,
html.dark .panel-footer { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .card,
  html:not(.light) .panel { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base); }
  html:not(.light) .card-header,
  html:not(.light) .panel-heading { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-head); }
  html:not(.light) .card-body,
  html:not(.light) .panel-body { background-color: var(--ows-bg-card) !important; color: var(--ows-text-base); }
  html:not(.light) .card-footer,
  html:not(.light) .panel-footer { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
}

/* Dark mode — forms */
html.dark .form-control,
html.dark .custom-select,
html.dark .input-group-text {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
  color-scheme: dark;
}
html.dark .form-control::placeholder { color: var(--ows-text-muted); }
@media (prefers-color-scheme: dark) {
  html:not(.light) .form-control,
  html:not(.light) .custom-select,
  html:not(.light) .input-group-text {
    background-color: var(--ows-ink-soft) !important;
    border-color: var(--ows-border) !important;
    color: var(--ows-text-base) !important;
    color-scheme: dark;
  }
  html:not(.light) .form-control::placeholder { color: var(--ows-text-muted); }
}

/* Dark mode — text */
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6,
html.dark .h1, html.dark .h2, html.dark .h3,
html.dark .h4, html.dark .h5, html.dark .h6 { color: var(--ows-text-head); }
html.dark p, html.dark label, html.dark th, html.dark td, html.dark li { color: var(--ows-text-base); }
html.dark .text-muted { color: var(--ows-text-muted) !important; }
html.dark a { color: var(--ows-brand-400); }
html.dark a:hover { color: var(--ows-brand-300); }
@media (prefers-color-scheme: dark) {
  html:not(.light) h1, html:not(.light) h2, html:not(.light) h3,
  html:not(.light) h4, html:not(.light) h5, html:not(.light) h6 { color: var(--ows-text-head); }
  html:not(.light) p, html:not(.light) label, html:not(.light) th, html:not(.light) td, html:not(.light) li { color: var(--ows-text-base); }
  html:not(.light) .text-muted { color: var(--ows-text-muted) !important; }
  html:not(.light) a { color: var(--ows-brand-400); }
  html:not(.light) a:hover { color: var(--ows-brand-300); }
}

/* Dark mode — tables */
html.dark .table { color: var(--ows-text-base); border-color: var(--ows-border); }
html.dark .table thead th { border-color: var(--ows-border); color: var(--ows-text-head); background-color: var(--ows-ink-soft); }
html.dark .table td, html.dark .table th { border-color: var(--ows-border); }
html.dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.03); }
html.dark .table-hover tbody tr:hover { background-color: rgba(255,255,255,.05); }
@media (prefers-color-scheme: dark) {
  html:not(.light) .table { color: var(--ows-text-base); border-color: var(--ows-border); }
  html:not(.light) .table thead th { border-color: var(--ows-border); color: var(--ows-text-head); background-color: var(--ows-ink-soft); }
  html:not(.light) .table td, html:not(.light) .table th { border-color: var(--ows-border); }
  html:not(.light) .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.03); }
  html:not(.light) .table-hover tbody tr:hover { background-color: rgba(255,255,255,.05); }
}

/* Dark mode — list groups */
html.dark .list-group-item {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base);
}
html.dark .list-group-item:hover { background-color: rgba(255,255,255,.05) !important; }
html.dark .list-group-item.active {
  background-color: var(--ows-brand-600) !important;
  border-color: var(--ows-brand-700) !important;
  color: var(--ows-white) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .list-group-item { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base); }
  html:not(.light) .list-group-item.active { background-color: var(--ows-brand-600) !important; border-color: var(--ows-brand-700) !important; color: var(--ows-white) !important; }
}

/* Dark mode — alerts */
html.dark .alert { border-color: var(--ows-border); }
html.dark .alert-info { background-color: rgba(31,71,235,.1); border-color: rgba(31,71,235,.25); color: var(--ows-brand-300); }
html.dark .alert-success { background-color: rgba(22,163,74,.1); border-color: rgba(22,163,74,.25); color: #4ade80; }
html.dark .alert-warning { background-color: rgba(234,179,8,.1); border-color: rgba(234,179,8,.25); color: #fbbf24; }
html.dark .alert-danger { background-color: rgba(220,38,38,.1); border-color: rgba(220,38,38,.25); color: #f87171; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .alert-info { background-color: rgba(31,71,235,.1); border-color: rgba(31,71,235,.25); color: var(--ows-brand-300); }
  html:not(.light) .alert-success { background-color: rgba(22,163,74,.1); border-color: rgba(22,163,74,.25); color: #4ade80; }
  html:not(.light) .alert-warning { background-color: rgba(234,179,8,.1); border-color: rgba(234,179,8,.25); color: #fbbf24; }
  html:not(.light) .alert-danger { background-color: rgba(220,38,38,.1); border-color: rgba(220,38,38,.25); color: #f87171; }
}

/* Dark mode — dropdowns */
html.dark .dropdown-menu {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark .dropdown-item { color: var(--ows-text-base); }
html.dark .dropdown-item:hover { background-color: rgba(255,255,255,.06) !important; color: var(--ows-text-head); }
html.dark .dropdown-divider { border-color: var(--ows-border); }
html.dark .dropdown-header { color: var(--ows-text-muted); }
@media (prefers-color-scheme: dark) {
  html:not(.light) .dropdown-menu { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .dropdown-item { color: var(--ows-text-base); }
  html:not(.light) .dropdown-item:hover { background-color: rgba(255,255,255,.06) !important; color: var(--ows-text-head); }
}

/* Dark mode — modals */
html.dark .modal-content {
  background-color: var(--ows-bg-card);
  border-color: var(--ows-border);
  color: var(--ows-text-base);
}
html.dark .modal-header {
  background-color: var(--ows-ink-soft);
  border-color: var(--ows-border);
}
html.dark .modal-footer { border-color: var(--ows-border); }
html.dark .modal-header .close { color: var(--ows-text-head); }
@media (prefers-color-scheme: dark) {
  html:not(.light) .modal-content { background-color: var(--ows-bg-card); border-color: var(--ows-border); color: var(--ows-text-base); }
  html:not(.light) .modal-header { background-color: var(--ows-ink-soft); border-color: var(--ows-border); }
  html:not(.light) .modal-footer { border-color: var(--ows-border); }
}

/* Dark mode — sidebar */
html.dark .sidebar .panel { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
html.dark .sidebar .panel-heading { color: var(--ows-text-head) !important; background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
html.dark .sidebar .panel-body { background-color: var(--ows-bg-card) !important; }
html.dark .sidebar .list-group-item { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
html.dark .card-sidebar { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .sidebar .panel { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .sidebar .panel-heading { color: var(--ows-text-head) !important; background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .sidebar .panel-body { background-color: var(--ows-bg-card) !important; }
  html:not(.light) .sidebar .list-group-item { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
}

/* Dark mode — breadcrumb */
html.dark .master-breadcrumb { background-color: var(--ows-ink-soft); border-bottom: 1px solid var(--ows-border); }
html.dark .breadcrumb { background-color: transparent; }
html.dark .breadcrumb-item, html.dark .breadcrumb-item a { color: var(--ows-text-base); }
html.dark .breadcrumb-item.active { color: var(--ows-text-muted); }
html.dark .breadcrumb-item + .breadcrumb-item::before { color: var(--ows-text-muted); }
@media (prefers-color-scheme: dark) {
  html:not(.light) .master-breadcrumb { background-color: var(--ows-ink-soft); border-bottom: 1px solid var(--ows-border); }
  html:not(.light) .breadcrumb { background-color: transparent; }
  html:not(.light) .breadcrumb-item, html:not(.light) .breadcrumb-item a { color: var(--ows-text-base); }
  html:not(.light) .breadcrumb-item.active { color: var(--ows-text-muted); }
}

/* Dark mode — buttons */
html.dark .btn-default { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
html.dark .btn-default:hover { background-color: rgba(255,255,255,.08) !important; color: var(--ows-text-head) !important; }
html.dark .btn-primary { background: linear-gradient(135deg, var(--ows-brand-600), var(--ows-brand-500)) !important; border-color: transparent !important; color: var(--ows-white) !important; }
html.dark .btn-primary:hover { background: linear-gradient(135deg, var(--ows-brand-700), var(--ows-brand-600)) !important; }
html.dark .btn-link { color: var(--ows-brand-400); }
html.dark .btn-link:hover { color: var(--ows-brand-300); }
html.dark select, html.dark select.form-control {
  color-scheme: dark;
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .btn-default { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) .btn-primary { background: linear-gradient(135deg, var(--ows-brand-600), var(--ows-brand-500)) !important; border-color: transparent !important; color: var(--ows-white) !important; }
  html:not(.light) select, html:not(.light) select.form-control { color-scheme: dark; background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
}

/* Dark mode — topbar (logged-in notifications bar) */
html.dark .ows-topbar { background-color: var(--ows-topbar-bg); border-color: var(--ows-topbar-border); }
html.dark .ows-topbar, html.dark .ows-topbar a, html.dark .ows-topbar span { color: var(--ows-topbar-text); }
html.dark .ows-topbar .btn { color: var(--ows-slate-300); border-color: var(--ows-border); }
html.dark .ows-topbar .btn:hover { color: var(--ows-white); }
html.dark .ows-topbar .input-group-text { background-color: var(--ows-ink-soft); border-color: var(--ows-border); color: var(--ows-text-muted); }
html.dark .ows-topbar .btn-active-client { background-color: var(--ows-brand-600); color: var(--ows-white); }
@media (prefers-color-scheme: dark) {
  html:not(.light) .ows-topbar { background-color: var(--ows-topbar-bg); border-color: var(--ows-topbar-border); }
  html:not(.light) .ows-topbar .btn { color: var(--ows-slate-300); border-color: var(--ows-border); }
  html:not(.light) .ows-topbar .btn-active-client { background-color: var(--ows-brand-600); color: var(--ows-white); }
}

/* ── 3. OWS TOPBAR (logged-in notifications) ──────────────────────────── */
.ows-topbar {
  background-color: var(--ows-slate-900);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 0.8125rem;
}
.ows-topbar .container {
  display: flex;
  align-items: center;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.ows-topbar .btn {
  font-size: 0.8125rem;
  padding: 0.25rem 0.75rem;
  color: var(--ows-slate-300);
  border-radius: var(--ows-r-sm);
}
.ows-topbar .btn:hover { color: var(--ows-white); }
.ows-topbar .input-group-text {
  font-size: 0.8125rem;
  background-color: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
  color: var(--ows-slate-400);
}
.ows-topbar .btn-active-client {
  background-color: var(--ows-brand-600);
  color: var(--ows-white);
  border-color: transparent;
}
.ows-topbar .btn-active-client:hover { background-color: var(--ows-brand-700); }
.ows-topbar .active-client { border-color: rgba(255,255,255,.12); }
.ows-topbar .input-group { border-color: rgba(255,255,255,.12); }
.ows-topbar a { color: var(--ows-slate-300); text-decoration: none; }
.ows-topbar a:hover { color: var(--ows-white); text-decoration: none; }
.ows-topbar .btn-return-to-admin { color: #fbbf24; border-color: rgba(251,191,36,.3); }
.ows-topbar .badge { background-color: var(--ows-brand-600) !important; color: var(--ows-white); }

/* popover for notifications */
#accountNotificationsContent { display: none; }

/* ── 4. OWS HEADER ────────────────────────────────────────────────────── */

/* Apply Inter font across all OWS structural elements */
.ows-header,
.ows-mobile-menu,
.ows-footer {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.ows-header {
  position: sticky;
  top: 0;
  /* 1031 = above Bootstrap navbar (1030) but below modal-backdrop (1040) */
  z-index: 1031;
  width: 100%;
  background: var(--ows-header-bg);
  border-bottom: 1px solid var(--ows-header-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background var(--ows-transition), box-shadow var(--ows-transition);
}
.ows-header.scrolled {
  background: var(--ows-header-scrolled-bg);
  box-shadow: var(--ows-header-scrolled-shd);
}

.ows-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 1024px) {
  .ows-header-inner { height: 4.5rem; padding: 0 2rem; }
}

/* ── Logo ── */
.ows-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
  border-radius: var(--ows-r-sm);
  outline-offset: 2px;
}
.ows-logo:hover { text-decoration: none; }
.ows-logo:focus-visible { outline: 2px solid var(--ows-brand-500); }
.ows-logo-icon {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--ows-brand-600), var(--ows-accent-500));
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: var(--ows-shadow-glow);
}
.ows-logo-icon svg { width: 1.25rem; height: 1.25rem; color: var(--ows-white); }
.ows-logo-text {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ows-logo-text);
  line-height: 1;
}
.ows-logo-text .ows-gradient-text {
  background: linear-gradient(90deg, var(--ows-grad-from), var(--ows-grad-via), var(--ows-grad-to));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Desktop Nav ── */
.ows-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
}
@media (min-width: 1024px) { .ows-nav { display: flex; } }

.ows-nav-group { position: relative; }

.ows-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--ows-nav-text);
  border-radius: var(--ows-r-sm);
  transition: color var(--ows-transition), background var(--ows-transition);
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}
.ows-nav-btn:hover { color: var(--ows-nav-text-hover); background: var(--ows-nav-hover-bg); }
.ows-nav-btn:focus-visible { outline: 2px solid var(--ows-brand-500); outline-offset: 2px; }
.ows-nav-btn svg { width: 0.875rem; height: 0.875rem; transition: transform var(--ows-transition); }
.ows-nav-group.open .ows-nav-btn { color: var(--ows-nav-text-hover); }
.ows-nav-group.open .ows-nav-btn svg { transform: rotate(180deg); }

.ows-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 20rem;
  background: var(--ows-dd-bg);
  border: 1px solid var(--ows-dd-border);
  border-radius: var(--ows-r-xl);
  padding: 0.5rem;
  box-shadow: var(--ows-shadow-glow);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ows-transition), transform var(--ows-transition), visibility 0s var(--ows-transition);
  z-index: 400;
}
.ows-nav-group.open .ows-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--ows-transition), transform var(--ows-transition), visibility 0s;
}
.ows-dropdown a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--ows-r-lg);
  text-decoration: none !important;
  transition: background var(--ows-transition);
  color: inherit;
}
.ows-dropdown a:hover { background: var(--ows-dd-item-hover); text-decoration: none !important; }
.ows-dropdown-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ows-text-head);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.ows-dropdown-desc {
  font-size: 0.75rem;
  color: var(--ows-text-muted);
  margin-top: 0.125rem;
  display: block;
  font-weight: 400;
}
.ows-dropdown-from {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ows-brand-600);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
html.dark .ows-dropdown-from { color: var(--ows-brand-300); }
@media (prefers-color-scheme: dark) { html:not(.light) .ows-dropdown-from { color: var(--ows-brand-300); } }

/* ── Header Right Actions ── */
.ows-header-actions {
  display: none;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
@media (min-width: 1024px) { .ows-header-actions { display: flex; } }

/* Cart button in header */
.ows-cart-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ows-toggle-bdr);
  border-radius: var(--ows-r-sm);
  background: var(--ows-toggle-bg);
  color: var(--ows-nav-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--ows-transition);
  position: relative;
}
.ows-cart-btn:hover { color: var(--ows-nav-text-hover); border-color: var(--ows-brand-400); text-decoration: none; }
.ows-cart-btn:focus-visible { outline: 2px solid var(--ows-brand-500); outline-offset: 2px; }
.ows-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  background: var(--ows-brand-600);
  color: var(--ows-white);
  border-radius: 9999px;
  padding: 0 0.25rem;
}

/* Theme toggle button */
.ows-theme-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ows-toggle-bdr);
  border-radius: var(--ows-r-lg);
  background: var(--ows-toggle-bg);
  color: var(--ows-toggle-text);
  transition: all var(--ows-transition);
  flex-shrink: 0;
  cursor: pointer;
}
.ows-theme-btn:hover { color: var(--ows-toggle-hover); }
.ows-theme-btn:focus-visible { outline: 2px solid var(--ows-brand-500); outline-offset: 2px; }
.ows-theme-btn svg { width: 1.125rem; height: 1.125rem; }

/* Hamburger */
.ows-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ows-ham-bdr);
  border-radius: var(--ows-r-lg);
  background: var(--ows-ham-bg);
  color: var(--ows-ham-text);
  transition: all var(--ows-transition);
  cursor: pointer;
}
.ows-hamburger:hover { opacity: .8; }
.ows-hamburger:focus-visible { outline: 2px solid var(--ows-brand-500); outline-offset: 2px; }
.ows-hamburger svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 1024px) { .ows-hamburger { display: none; } }

/* Mobile controls row */
.ows-mobile-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1024px) { .ows-mobile-controls { display: none; } }

/* OWS header buttons */
.ows-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--ows-r-sm);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all var(--ows-transition);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}
.ows-btn:hover { text-decoration: none; }
.ows-btn:focus-visible { outline: 2px solid var(--ows-brand-500); outline-offset: 2px; }

.ows-btn-ghost { color: var(--ows-nav-text); background: transparent; border-color: transparent; }
.ows-btn-ghost:hover { color: var(--ows-nav-text-hover); background: var(--ows-nav-hover-bg); }

.ows-btn-outline {
  color: var(--ows-text-base);
  background: transparent;
  border-color: var(--ows-toggle-bdr);
}
.ows-btn-outline:hover { border-color: var(--ows-brand-400); color: var(--ows-brand-600); }
html.dark .ows-btn-outline:hover { color: var(--ows-brand-300); }
@media (prefers-color-scheme: dark) { html:not(.light) .ows-btn-outline:hover { color: var(--ows-brand-300); } }

.ows-btn-primary {
  color: var(--ows-white) !important;
  background: linear-gradient(135deg, var(--ows-brand-600), var(--ows-brand-500));
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(31,71,235,.3);
}
.ows-btn-primary:hover {
  background: linear-gradient(135deg, var(--ows-brand-700), var(--ows-brand-600));
  box-shadow: 0 4px 16px rgba(31,71,235,.4);
  transform: translateY(-1px);
  color: var(--ows-white) !important;
}

.ows-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }

/* ── 5. MOBILE MENU ────────────────────────────────────────────────────── */
.ows-mobile-menu {
  overflow: hidden;
  max-height: 0;
  background: var(--ows-mob-bg);
  border-top: 1px solid var(--ows-mob-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: max-height 0.35s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 1024px) { .ows-mobile-menu { display: none !important; } }

.ows-mobile-inner { padding: 0.5rem 0 1rem; max-height: 70vh; overflow-y: auto; }

.ows-mobile-group { border-bottom: 1px solid rgba(15,23,42,.06); }
html.dark .ows-mobile-group { border-color: rgba(255,255,255,.05); }
@media (prefers-color-scheme: dark) { html:not(.light) .ows-mobile-group { border-color: rgba(255,255,255,.05); } }

.ows-mobile-group-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--ows-text-head);
  text-align: left;
  cursor: pointer;
}
.ows-mobile-group-btn:focus-visible { outline: 2px solid var(--ows-brand-500); outline-offset: -2px; }
.ows-mobile-group-btn svg { width: 1rem; height: 1rem; color: var(--ows-text-muted); transition: transform var(--ows-transition); }
.ows-mobile-group.open .ows-mobile-group-btn svg { transform: rotate(180deg); }

.ows-mobile-group-items {
  display: none;
  padding: 0 0 0.75rem;
  background: var(--ows-mob-item-hover);
}
.ows-mobile-group.open .ows-mobile-group-items { display: block; }
.ows-mobile-group-items a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 2rem;
  font-size: 0.9375rem;
  color: var(--ows-nav-text);
  text-decoration: none;
  transition: background var(--ows-transition);
}
.ows-mobile-group-items a:hover { background: rgba(0,0,0,.04); color: var(--ows-nav-text-hover); text-decoration: none; }
html.dark .ows-mobile-group-items a:hover { background: rgba(255,255,255,.06); }
@media (prefers-color-scheme: dark) { html:not(.light) .ows-mobile-group-items a:hover { background: rgba(255,255,255,.06); } }
.ows-mob-from { font-size: 0.75rem; color: var(--ows-brand-600); }
html.dark .ows-mob-from { color: var(--ows-brand-300); }
@media (prefers-color-scheme: dark) { html:not(.light) .ows-mob-from { color: var(--ows-brand-300); } }

.ows-mobile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
}
.ows-mobile-actions .ows-btn { width: 100%; justify-content: center; }

/* Mobile cart link */
.ows-mobile-cart {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--ows-nav-text);
  border-bottom: 1px solid rgba(15,23,42,.06);
  text-decoration: none;
  font-weight: 500;
}
.ows-mobile-cart:hover { background: var(--ows-mob-item-hover); text-decoration: none; color: var(--ows-nav-text-hover); }
html.dark .ows-mobile-cart { border-color: rgba(255,255,255,.05); }

/* ── 6. OWS FOOTER ────────────────────────────────────────────────────── */
.ows-footer {
  background: var(--ows-footer-bg);
  border-top: 1px solid var(--ows-footer-border);
  padding: 3.5rem 0 0;
}

.ows-footer-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 1024px) { .ows-footer-container { padding: 0 2rem; } }

.ows-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 1024px) {
  .ows-footer-top { grid-template-columns: 300px 1fr; gap: 4rem; }
}

.ows-footer-brand p {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--ows-footer-text);
  line-height: 1.75;
  max-width: 22rem;
}

.ows-footer-contact { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.ows-footer-contact a, .ows-footer-contact span {
  font-size: 0.875rem;
  color: var(--ows-footer-text) !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--ows-transition);
}
.ows-footer-contact a:hover { color: var(--ows-footer-link-hover) !important; text-decoration: none !important; }
.ows-footer-contact svg { width: 1rem; height: 1rem; color: var(--ows-brand-500); flex-shrink: 0; }

.ows-footer-socials { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.ows-footer-socials a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--ows-footer-social-bdr);
  border-radius: var(--ows-r-sm);
  background: var(--ows-footer-social-bg);
  color: var(--ows-footer-social-text);
  transition: all var(--ows-transition);
  text-decoration: none;
}
.ows-footer-socials a:hover { color: var(--ows-brand-600); border-color: var(--ows-brand-300); text-decoration: none; }
html.dark .ows-footer-socials a:hover { color: var(--ows-brand-300); border-color: rgba(31,71,235,.4); }
@media (prefers-color-scheme: dark) { html:not(.light) .ows-footer-socials a:hover { color: var(--ows-brand-300); border-color: rgba(31,71,235,.4); } }
.ows-footer-socials svg { width: 1rem; height: 1rem; }

.ows-payment-methods { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ows-payment-methods > span:first-child { font-size: 0.75rem; color: var(--ows-footer-muted); }
.ows-payment-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ows-footer-muted);
  background: rgba(100,116,139,.1);
  border: 1px solid var(--ows-footer-border);
  border-radius: 0.375rem;
  padding: 0.25rem 0.625rem;
}

.ows-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 640px)  { .ows-footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ows-footer-cols { grid-template-columns: repeat(6, 1fr); } }

.ows-footer-col h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ows-footer-head);
  margin-bottom: 1rem;
}
.ows-footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.ows-footer-col a {
  font-size: 0.875rem;
  color: var(--ows-footer-link) !important;
  text-decoration: none !important;
  transition: color var(--ows-transition);
}
.ows-footer-col a:hover { color: var(--ows-footer-link-hover) !important; text-decoration: none !important; }

/* Datacenter section */
.ows-footer-datacenters {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ows-footer-border);
}
.ows-footer-dc-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ows-footer-muted);
  margin-bottom: 0.75rem;
}
.ows-footer-dc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ows-footer-muted);
}
.ows-footer-dc-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.ows-dc-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.ows-dc-dot--live { background: #10b981; }
.ows-dc-dot--soon { background: #f59e0b; }
.ows-dc-code { color: var(--ows-footer-muted); opacity: 0.7; }

/* Footer bottom */
.ows-footer-bottom {
  border-top: 1px solid var(--ows-footer-border);
  padding: 1.75rem 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.ows-footer-bottom p { font-size: 0.875rem; color: var(--ows-footer-muted); margin: 0; }
.ows-footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.ows-footer-legal a { font-size: 0.875rem; color: var(--ows-footer-muted) !important; text-decoration: none !important; transition: color var(--ows-transition); }
.ows-footer-legal a:hover { color: var(--ows-footer-link-hover) !important; text-decoration: none !important; }

/* ── 7. BREADCRUMB (Nexus-compatible, dark-mode-aware) ─────────────────── */
.master-breadcrumb {
  background: var(--ows-bg-subtle);
  border-bottom: 1px solid var(--ows-border);
  padding: 0;
}
html.dark .master-breadcrumb { background: var(--ows-ink-soft); border-color: var(--ows-border); }
@media (prefers-color-scheme: dark) { html:not(.light) .master-breadcrumb { background: var(--ows-ink-soft); border-color: var(--ows-border); } }

.master-breadcrumb .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0.625rem 0;
  font-size: 0.875rem;
}
.master-breadcrumb .breadcrumb-item a { color: var(--ows-text-muted); }
.master-breadcrumb .breadcrumb-item.active { color: var(--ows-text-muted); }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--ows-text-muted); opacity: 0.5; }

/* ── 7a. SECONDARY NAV — WHMCS Client Area Navigation Manager menu ──────── */
/* Renders $navbar (includes/navbar.tpl) below the OWS marketing header.
   Built entirely from --ows- tokens, which already flip for dark mode via
   html.dark / prefers-color-scheme, so no separate dark block is needed. */
.ows-secondary-nav {
  background: var(--ows-bg-subtle);
  border-bottom: 1px solid var(--ows-border);
}
.ows-secondary-nav .container { display: flex; align-items: center; }
.ows-secondary-nav ul.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}
.ows-secondary-nav .ows-secondary-nav-end { margin-left: auto; }
.ows-secondary-nav ul.nav > li { position: relative; }
.ows-secondary-nav ul.nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ows-text-base);
  text-decoration: none !important;
  white-space: nowrap;
  border-radius: var(--ows-r-sm);
}
.ows-secondary-nav ul.nav > li > a:hover,
.ows-secondary-nav ul.nav > li > a[aria-expanded="true"] {
  color: var(--ows-nav-text-hover);
  background: var(--ows-nav-hover-bg);
}
.ows-secondary-nav .dropdown-menu { font-size: 0.8125rem; }
.ows-secondary-nav .badge { background-color: var(--ows-brand-600); color: #fff; }
@media (max-width: 767.98px) {
  .ows-secondary-nav ul.nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 8. UTILITY — hide old Nexus header/footer ─────────────────────────── */
/* Ensure our sticky header doesn't interfere with the Nexus full-page overlay */
#fullpage-overlay { z-index: 2000; }

/* ── 9. DARK MODE — btn-outline-* ──────────────────────────────────────── */
/* Bootstrap btn-outline-* have transparent backgrounds — in dark mode the
   border/text colours must be brightened so they remain legible. */
html.dark .btn-outline-primary {
  color: var(--ows-brand-300) !important;
  border-color: var(--ows-brand-400) !important;
  background-color: transparent !important;
}
html.dark .btn-outline-primary:hover,
html.dark .btn-outline-primary:focus,
html.dark .btn-outline-primary:active,
html.dark .btn-outline-primary.active,
html.dark .show > .btn-outline-primary.dropdown-toggle {
  color: var(--ows-white) !important;
  background-color: var(--ows-brand-600) !important;
  border-color: var(--ows-brand-600) !important;
}
html.dark .btn-outline-secondary {
  color: var(--ows-slate-300) !important;
  border-color: var(--ows-slate-500) !important;
  background-color: transparent !important;
}
html.dark .btn-outline-secondary:hover,
html.dark .btn-outline-secondary:focus {
  color: var(--ows-white) !important;
  background-color: rgba(255,255,255,.10) !important;
  border-color: var(--ows-slate-400) !important;
}
html.dark .btn-outline-success {
  color: #4ade80 !important;
  border-color: rgba(74,222,128,.55) !important;
  background-color: transparent !important;
}
html.dark .btn-outline-success:hover,
html.dark .btn-outline-success:focus {
  color: var(--ows-white) !important;
  background-color: rgba(22,163,74,.60) !important;
  border-color: rgba(74,222,128,.7) !important;
}
html.dark .btn-outline-danger {
  color: #f87171 !important;
  border-color: rgba(248,113,113,.55) !important;
  background-color: transparent !important;
}
html.dark .btn-outline-danger:hover,
html.dark .btn-outline-danger:focus {
  color: var(--ows-white) !important;
  background-color: rgba(220,38,38,.60) !important;
  border-color: rgba(248,113,113,.7) !important;
}
html.dark .btn-outline-warning {
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,.55) !important;
  background-color: transparent !important;
}
html.dark .btn-outline-warning:hover,
html.dark .btn-outline-warning:focus {
  color: var(--ows-ink) !important;
  background-color: rgba(234,179,8,.70) !important;
  border-color: rgba(251,191,36,.8) !important;
}
html.dark .btn-outline-info {
  color: var(--ows-accent-400) !important;
  border-color: rgba(34,211,238,.50) !important;
  background-color: transparent !important;
}
html.dark .btn-outline-info:hover,
html.dark .btn-outline-info:focus {
  color: var(--ows-ink) !important;
  background-color: rgba(6,182,212,.65) !important;
  border-color: rgba(34,211,238,.75) !important;
}
html.dark .btn-outline-light {
  color: var(--ows-slate-200) !important;
  border-color: rgba(255,255,255,.25) !important;
  background-color: transparent !important;
}
html.dark .btn-outline-light:hover,
html.dark .btn-outline-light:focus {
  color: var(--ows-ink) !important;
  background-color: var(--ows-slate-200) !important;
  border-color: var(--ows-slate-200) !important;
}
html.dark .btn-outline-dark {
  color: var(--ows-slate-300) !important;
  border-color: rgba(255,255,255,.20) !important;
  background-color: transparent !important;
}
html.dark .btn-outline-dark:hover,
html.dark .btn-outline-dark:focus {
  color: var(--ows-white) !important;
  background-color: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.35) !important;
}
/* btn-success / btn-info / btn-warning / btn-danger — solid variants */
html.dark .btn-success { background-color: rgba(22,163,74,.85) !important; border-color: rgba(22,163,74,.9) !important; color: var(--ows-white) !important; }
html.dark .btn-danger  { background-color: rgba(220,38,38,.85)  !important; border-color: rgba(220,38,38,.9)  !important; color: var(--ows-white) !important; }
html.dark .btn-warning { background-color: rgba(202,138,4,.85)  !important; border-color: rgba(202,138,4,.9)  !important; color: var(--ows-ink)   !important; }
html.dark .btn-info    { background-color: rgba(6,182,212,.80)  !important; border-color: rgba(6,182,212,.9)  !important; color: var(--ows-ink)   !important; }
html.dark .btn-secondary { background-color: var(--ows-slate-700) !important; border-color: var(--ows-slate-600) !important; color: var(--ows-slate-200) !important; }

@media (prefers-color-scheme: dark) {
  html:not(.light) .btn-outline-primary { color: var(--ows-brand-300) !important; border-color: var(--ows-brand-400) !important; background-color: transparent !important; }
  html:not(.light) .btn-outline-primary:hover, html:not(.light) .btn-outline-primary:focus, html:not(.light) .btn-outline-primary:active { color: var(--ows-white) !important; background-color: var(--ows-brand-600) !important; border-color: var(--ows-brand-600) !important; }
  html:not(.light) .btn-outline-secondary { color: var(--ows-slate-300) !important; border-color: var(--ows-slate-500) !important; background-color: transparent !important; }
  html:not(.light) .btn-outline-secondary:hover { color: var(--ows-white) !important; background-color: rgba(255,255,255,.10) !important; }
  html:not(.light) .btn-outline-success { color: #4ade80 !important; border-color: rgba(74,222,128,.55) !important; background-color: transparent !important; }
  html:not(.light) .btn-outline-success:hover { color: var(--ows-white) !important; background-color: rgba(22,163,74,.60) !important; }
  html:not(.light) .btn-outline-danger { color: #f87171 !important; border-color: rgba(248,113,113,.55) !important; background-color: transparent !important; }
  html:not(.light) .btn-outline-danger:hover { color: var(--ows-white) !important; background-color: rgba(220,38,38,.60) !important; }
  html:not(.light) .btn-outline-warning { color: #fbbf24 !important; border-color: rgba(251,191,36,.55) !important; background-color: transparent !important; }
  html:not(.light) .btn-outline-warning:hover { color: var(--ows-ink) !important; background-color: rgba(234,179,8,.70) !important; }
  html:not(.light) .btn-outline-info { color: var(--ows-accent-400) !important; border-color: rgba(34,211,238,.50) !important; background-color: transparent !important; }
  html:not(.light) .btn-outline-info:hover { color: var(--ows-ink) !important; background-color: rgba(6,182,212,.65) !important; }
  html:not(.light) .btn-outline-light { color: var(--ows-slate-200) !important; border-color: rgba(255,255,255,.25) !important; background-color: transparent !important; }
  html:not(.light) .btn-outline-dark  { color: var(--ows-slate-300) !important; border-color: rgba(255,255,255,.20) !important; background-color: transparent !important; }
  html:not(.light) .btn-success { background-color: rgba(22,163,74,.85) !important; border-color: rgba(22,163,74,.9) !important; color: var(--ows-white) !important; }
  html:not(.light) .btn-danger  { background-color: rgba(220,38,38,.85) !important; border-color: rgba(220,38,38,.9) !important; color: var(--ows-white) !important; }
  html:not(.light) .btn-warning { background-color: rgba(202,138,4,.85) !important; border-color: rgba(202,138,4,.9) !important; color: var(--ows-ink)   !important; }
  html:not(.light) .btn-info    { background-color: rgba(6,182,212,.80) !important; border-color: rgba(6,182,212,.9) !important; color: var(--ows-ink)   !important; }
  html:not(.light) .btn-secondary { background-color: var(--ows-slate-700) !important; border-color: var(--ows-slate-600) !important; color: var(--ows-slate-200) !important; }
}

/* ── 10. DARK MODE — WHMCS dynamic store (product pages) ───────────────── */
/* The dynamic store embeds per-page CSS vars (--bg-color, --bg-light, etc.)
   via inline style from WHMCS branding — those don't switch in dark mode.
   We override the hardcoded light values at the html.dark level. */
html.dark .dynamic-landing-page .background-light,
html.dark .dynamic-landing-page .background-main {
  background: var(--ows-bg-page) !important;
}
html.dark .dynamic-landing-page .background-gradient {
  background: linear-gradient(135deg, var(--ows-ink-soft) 0%, var(--ows-ink) 100%) !important;
}

/* Pricing cards — hardcoded #ffffff background */
html.dark .pricing-card {
  background: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.35) !important;
}
html.dark .pricing-card:hover {
  border-color: var(--ows-brand-500) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
}
html.dark .pricing-card:has(.plan-button:hover) { border-color: var(--ows-brand-500) !important; }
html.dark .plan-name    { color: var(--ows-text-head) !important; }
html.dark .price-amount { color: var(--ows-brand-300) !important; }
html.dark .price-period,
html.dark .plan-description { color: var(--ows-text-muted) !important; }
html.dark .feature-item { color: var(--ows-text-base) !important; }
html.dark .plan-button {
  background: var(--ows-brand-600) !important;
  border-color: var(--ows-brand-600) !important;
  color: var(--ows-white) !important;
}
html.dark .plan-button:hover {
  background: var(--ows-brand-500) !important;
  border-color: var(--ows-brand-500) !important;
}

/* Pricing section headings */
html.dark .pricing-title   { color: var(--ows-text-head) !important; }
html.dark .pricing-subtitle { color: var(--ows-text-muted) !important; }

/* Comparison / features table */
html.dark .table-wrapper {
  background: var(--ows-bg-card) !important;
  border: 1px solid var(--ows-border) !important;
}
html.dark .comparison-table th,
html.dark .comparison-table td {
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .comparison-table .product-name,
html.dark .comparison-table .feature-title { color: var(--ows-text-head) !important; }
html.dark .comparison-table .feature-description,
html.dark .comparison-table .feature-text  { color: var(--ows-text-muted) !important; }
html.dark .comparison-table .feature-number,
html.dark .table-price,
html.dark .table-price .price-amount,
html.dark .table-price .price-period { color: var(--ows-brand-300) !important; }
html.dark .feature-row:hover { background: rgba(255,255,255,.03) !important; }
html.dark .buy-row {
  background: var(--ows-ink-soft) !important;
  border-top-color: var(--ows-border) !important;
}
html.dark .table-cta-button {
  background: var(--ows-brand-600) !important;
  border-color: var(--ows-brand-600) !important;
  color: var(--ows-white) !important;
}
html.dark .table-cta-button:hover { background: var(--ows-brand-500) !important; border-color: var(--ows-brand-500) !important; }
html.dark .table-note p { color: var(--ows-text-muted) !important; }

/* FAQ section */
html.dark .faq-section .faq-item { border-color: var(--ows-border) !important; }
html.dark .faq-question-text    { color: var(--ows-text-head) !important; }
html.dark .faq-title,
html.dark .faq-subtitle         { color: var(--ows-text-head) !important; }
html.dark .faq-subtitle         { color: var(--ows-text-muted) !important; }
html.dark .faq-answer-content,
html.dark .faq-answer-content p { color: var(--ows-text-base) !important; }
html.dark .faq-contact {
  background: var(--ows-bg-card) !important;
  border: 1px solid var(--ows-border);
}
html.dark .faq-contact-text { color: var(--ows-text-base) !important; }

/* Hero / showcase sections */
html.dark .hero-logo-container {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--ows-border);
  box-shadow: none !important;
}
html.dark .hero-title  { color: var(--ows-text-head); }
html.dark .hero-subtitle,
html.dark .hero-description { color: var(--ows-text-muted) !important; }
html.dark .showcase-title   { color: var(--ows-text-head) !important; }
html.dark .showcase-subtitle,
html.dark .showcase-description { color: var(--ows-text-muted) !important; }

/* CTA sections */
html.dark .cta-title       { color: var(--ows-text-head) !important; }
html.dark .cta-subtitle,
html.dark .cta-description { color: var(--ows-text-muted) !important; }
html.dark .cta-primary-button:not(.cta-section--gradient .cta-primary-button) {
  background: var(--ows-brand-600) !important;
  color: var(--ows-white) !important;
}
html.dark .cta-secondary-button {
  color: var(--ows-slate-300) !important;
  border-color: var(--ows-slate-500) !important;
}
html.dark .cta-secondary-button:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ows-white) !important;
}

/* Feature sections (free_form / product_preview) */
html.dark .features-section,
html.dark .product-showcase { color: var(--ows-text-base); }
html.dark .features-table-title,
html.dark .features-table-subtitle { color: var(--ows-text-head) !important; }
html.dark .features-table-subtitle { color: var(--ows-text-muted) !important; }

/* Prefers-color-scheme mirror */
@media (prefers-color-scheme: dark) {
  html:not(.light) .dynamic-landing-page .background-light,
  html:not(.light) .dynamic-landing-page .background-main { background: var(--ows-bg-page) !important; }
  html:not(.light) .dynamic-landing-page .background-gradient { background: linear-gradient(135deg, var(--ows-ink-soft) 0%, var(--ows-ink) 100%) !important; }
  html:not(.light) .pricing-card { background: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; box-shadow: 0 4px 20px rgba(0,0,0,.35) !important; }
  html:not(.light) .pricing-card:hover { border-color: var(--ows-brand-500) !important; }
  html:not(.light) .plan-name    { color: var(--ows-text-head) !important; }
  html:not(.light) .price-amount { color: var(--ows-brand-300) !important; }
  html:not(.light) .price-period, html:not(.light) .plan-description { color: var(--ows-text-muted) !important; }
  html:not(.light) .feature-item { color: var(--ows-text-base) !important; }
  html:not(.light) .plan-button { background: var(--ows-brand-600) !important; border-color: var(--ows-brand-600) !important; color: var(--ows-white) !important; }
  html:not(.light) .plan-button:hover { background: var(--ows-brand-500) !important; border-color: var(--ows-brand-500) !important; }
  html:not(.light) .table-wrapper { background: var(--ows-bg-card) !important; border: 1px solid var(--ows-border) !important; }
  html:not(.light) .comparison-table th, html:not(.light) .comparison-table td { border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) .comparison-table .product-name, html:not(.light) .comparison-table .feature-title { color: var(--ows-text-head) !important; }
  html:not(.light) .feature-row:hover { background: rgba(255,255,255,.03) !important; }
  html:not(.light) .buy-row { background: var(--ows-ink-soft) !important; border-top-color: var(--ows-border) !important; }
  html:not(.light) .table-cta-button { background: var(--ows-brand-600) !important; color: var(--ows-white) !important; }
  html:not(.light) .faq-section .faq-item { border-color: var(--ows-border) !important; }
  html:not(.light) .faq-question-text { color: var(--ows-text-head) !important; }
  html:not(.light) .faq-answer-content, html:not(.light) .faq-answer-content p { color: var(--ows-text-base) !important; }
  html:not(.light) .faq-contact { background: var(--ows-bg-card) !important; }
  html:not(.light) .hero-logo-container { background: rgba(255,255,255,.06) !important; box-shadow: none !important; }
  html:not(.light) .pricing-title  { color: var(--ows-text-head) !important; }
  html:not(.light) .pricing-subtitle { color: var(--ows-text-muted) !important; }
  html:not(.light) .showcase-title { color: var(--ows-text-head) !important; }
  html:not(.light) .showcase-subtitle, html:not(.light) .showcase-description { color: var(--ows-text-muted) !important; }
  html:not(.light) .cta-title { color: var(--ows-text-head) !important; }
  html:not(.light) .cta-subtitle, html:not(.light) .cta-description { color: var(--ows-text-muted) !important; }
}

/* ── 11a. WHMCS product group listing — equal-height cards ── */
/* Bootstrap col-* items stretch to the same height (flex row default), but
   .product inside each col-* is only as tall as its content. Both selectors
   cover the two HTML structures WHMCS may generate:
     .products.row > .col-*          (products and row on same element)
     .products > .row > .col-*       (products wraps a row div)
   .product-desc gets flex:1 to push the footer (pricing+button) to the bottom. */
body #order-standard_cart .products > [class*="col-"],
body #order-standard_cart .products .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  flex: 0 0 50% !important;
  max-width: 50% !important;
}
body #order-standard_cart .products .product {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 360px;
}
body #order-standard_cart .products .product div.product-desc {
  flex: 1;
}
body #order-standard_cart .products .product footer {
  margin-top: auto;
}

/* ── 11. DARK MODE — WHMCS Store & Cart (hardcoded backgrounds & high-specificity selectors) ── */
/*
 * The Nexus SASS compiles to hardcoded `background: white` for several cart
 * and product elements. CSS variable overrides alone don't fix those — we need
 * explicit !important rules that beat the compiled all.css selectors.
 *
 * We also match the full SASS-compiled selector chains exactly so our rules
 * have equal or higher specificity.
 */

/* ── Product listing cards ── */
html.dark body #order-standard_cart .products .product {
  background: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .products .product header {
  background: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .cart-body .products .product header {
  background: var(--ows-ink-soft) !important;
  border-bottom-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .products .product div.product-desc {
  color: var(--ows-text-base) !important;
}
/* Blanket override — catches any hardcoded #333 anywhere inside the product header */
html.dark body #order-standard_cart .products .product header,
html.dark body #order-standard_cart .products .product header * {
  color: #cbd5e1 !important;
}
/* Re-apply muted color for the qty badge after the blanket above */
html.dark body #order-standard_cart .products .product header .qty {
  color: var(--ows-text-muted) !important;
}
html.dark body #order-standard_cart .products .product footer .btn-order-now {
  background: var(--ows-brand-600) !important;
  border-color: var(--ows-brand-600) !important;
  color: #fff !important;
}
html.dark body #order-standard_cart .products .product footer .btn-order-now:hover {
  background: var(--ows-brand-500) !important;
  border-color: var(--ows-brand-500) !important;
}

/* ── Cart sidebar — panel-title (var(--text) resolves to #111827 before our fix lands) ── */
html.dark body #order-standard_cart .cart-sidebar .card-sidebar .panel-title {
  color: var(--ows-text-head) !important;
}
html.dark body #order-standard_cart .cart-sidebar .card-header {
  color: var(--ows-text-head) !important;
}
html.dark body #order-standard_cart .cart-sidebar .list-group-item {
  color: var(--ows-text-base) !important;
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .cart-sidebar .card-footer {
  background-color: var(--ows-ink-soft) !important;
}

/* ── General sidebar (client area pages) ── */
html.dark .sidebar .card-sidebar .panel-title { color: var(--ows-text-head) !important; }
html.dark .sidebar .card-header             { color: var(--ows-text-head) !important; }

/* ── Breadcrumb — match compiled SASS specificity (.master-breadcrumb .breadcrumb .breadcrumb-item) ── */
html.dark .master-breadcrumb .breadcrumb .breadcrumb-item       { color: var(--ows-text-muted) !important; }
html.dark .master-breadcrumb .breadcrumb .breadcrumb-item a     { color: var(--ows-text-muted) !important; }
html.dark .master-breadcrumb .breadcrumb .breadcrumb-item.active { color: var(--ows-text-muted) !important; }
html.dark .master-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--ows-text-muted) !important; opacity: .4; }

/* ── View-cart empty state ── */
html.dark body #order-standard_cart .view-cart-empty {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .cart-body .view-cart-items-header {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-head) !important;
}
html.dark body #order-standard_cart .cart-body .view-cart-items {
  color: var(--ows-text-base) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .cart-body .view-cart-items .item {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}

/* ── Order summary ── */
html.dark body #order-standard_cart .order-summary {
  background-color: var(--ows-bg-card) !important;
}
html.dark body #order-standard_cart .order-summary h2 {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-head) !important;
}
html.dark body #order-standard_cart .order-summary .summary-container {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
}

/* ── Checkout button ── */
html.dark body #order-standard_cart .text-right .btn-checkout {
  background: var(--ows-brand-600) !important;
  border-color: var(--ows-brand-600) !important;
  color: #fff !important;
}

/* ── Sub-heading ── */
html.dark body #order-standard_cart .sub-heading span {
  background: var(--ows-ink-soft) !important;
  color: var(--ows-text-base) !important;
}

/* ── Domain selection ── */
html.dark body #order-standard_cart .domain-selection-options {
  background: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .domain-selection-options .option-selected {
  background: var(--ows-ink-soft) !important;
}

/* ── Transfer panel ── */
html.dark body #order-standard_cart .panel .panel-heading,
html.dark body #order-standard_cart .panel .panel-footer {
  background: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
}

/* ── Apply promo / tabs ── */
html.dark body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
  background-color: var(--ows-bg-card) !important;
  color: var(--ows-text-head) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .secondary-cart-body .view-cart-tabs .tab-content {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}

/* ── Domain pricing ── */
html.dark body #order-standard_cart .domain-pricing .tld-filters .badge {
  background: var(--ows-bg-card) !important;
  color: var(--ows-text-base) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
html.dark body #order-standard_cart .domain-pricing .tld-pricing-header div {
  background: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .domain-pricing .bg-white {
  background: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .domain-promo-box {
  background: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}

/* ── Product info / MC promo ── */
html.dark body #order-standard_cart .product-info {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .mc-promo {
  border-color: var(--ows-border) !important;
}
/* .mc-promo-manage and .mc-promo-login @extend .card in SCSS, so they share
   background-color:#fff in the compiled .card,.mc-promo-manage,.mc-promo-login selector.
   The html.dark .card rule only matches .card — these need their own override. */
html.dark .mc-promo-manage,
html.dark .mc-promo-login {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .mc-promo-manage .card-header,
html.dark .mc-promo-login .card-header {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-head) !important;
}

/* ── Configure product form — addon boxes ── */
/* Addons on cart.php?a=confproduct may render as .card, .panel, or .products .product
   inside #frmConfigureProduct. Add explicit overrides so nothing leaks white. */
html.dark body #frmConfigureProduct .card,
html.dark body #frmConfigureProduct .panel {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #frmConfigureProduct .card-header,
html.dark body #frmConfigureProduct .panel-heading {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-head) !important;
}
html.dark body #frmConfigureProduct .card-body,
html.dark body #frmConfigureProduct .panel-body {
  background-color: var(--ows-bg-card) !important;
  color: var(--ows-text-base) !important;
}
html.dark body #frmConfigureProduct .card-footer,
html.dark body #frmConfigureProduct .panel-footer {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #frmConfigureProduct .list-group-item {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark body #frmConfigureProduct .products .product {
  background: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #frmConfigureProduct .form-control { color: var(--ows-text-base) !important; }

/* ── Prefers-color-scheme mirrors ── */
@media (prefers-color-scheme: dark) {
  html:not(.light) body #order-standard_cart .products .product { background: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .products .product header { background: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .cart-body .products .product header { background: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .products .product div.product-desc { color: var(--ows-text-base) !important; }
  html:not(.light) body #order-standard_cart .products .product footer .btn-order-now { background: var(--ows-brand-600) !important; border-color: var(--ows-brand-600) !important; color: #fff !important; }
  html:not(.light) body #order-standard_cart .cart-sidebar .card-sidebar .panel-title { color: var(--ows-text-head) !important; }
  html:not(.light) body #order-standard_cart .cart-sidebar .card-header { color: var(--ows-text-head) !important; }
  html:not(.light) body #order-standard_cart .cart-sidebar .list-group-item { color: var(--ows-text-base) !important; background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .sidebar .card-sidebar .panel-title { color: var(--ows-text-head) !important; }
  html:not(.light) .master-breadcrumb .breadcrumb .breadcrumb-item { color: var(--ows-text-muted) !important; }
  html:not(.light) .master-breadcrumb .breadcrumb .breadcrumb-item a { color: var(--ows-text-muted) !important; }
  html:not(.light) .master-breadcrumb .breadcrumb .breadcrumb-item.active { color: var(--ows-text-muted) !important; }
  html:not(.light) body #order-standard_cart .order-summary { background-color: var(--ows-bg-card) !important; }
  html:not(.light) body #order-standard_cart .order-summary h2 { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-head) !important; }
  html:not(.light) body #order-standard_cart .order-summary .summary-container { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .view-cart-empty { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .domain-selection-options { background: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .panel .panel-heading, html:not(.light) body #order-standard_cart .panel .panel-footer { background: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .sub-heading span { background: var(--ows-ink-soft) !important; color: var(--ows-text-base) !important; }
  html:not(.light) body #order-standard_cart .domain-pricing .tld-filters .badge { background: var(--ows-bg-card) !important; color: var(--ows-text-base) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .domain-pricing .bg-white { background: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .domain-promo-box { background: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .product-info { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .text-right .btn-checkout { background: var(--ows-brand-600) !important; border-color: var(--ows-brand-600) !important; color: #fff !important; }
  html:not(.light) body #frmConfigureProduct .form-control { color: var(--ows-text-base) !important; }
  html:not(.light) body #order-standard_cart .products .product header,
  html:not(.light) body #order-standard_cart .products .product header * { color: #cbd5e1 !important; }
  html:not(.light) body #order-standard_cart .products .product header .qty { color: var(--ows-text-muted) !important; }
  /* mc-promo-manage / mc-promo-login — missing from html.dark .card catchall */
  html:not(.light) .mc-promo-manage, html:not(.light) .mc-promo-login { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) .mc-promo-manage .card-header, html:not(.light) .mc-promo-login .card-header { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-head) !important; }
  /* frmConfigureProduct addon boxes */
  html:not(.light) body #frmConfigureProduct .card, html:not(.light) body #frmConfigureProduct .panel { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #frmConfigureProduct .card-header, html:not(.light) body #frmConfigureProduct .panel-heading { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-head) !important; }
  html:not(.light) body #frmConfigureProduct .card-body, html:not(.light) body #frmConfigureProduct .panel-body { background-color: var(--ows-bg-card) !important; color: var(--ows-text-base) !important; }
  html:not(.light) body #frmConfigureProduct .card-footer, html:not(.light) body #frmConfigureProduct .panel-footer { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #frmConfigureProduct .list-group-item { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) body #frmConfigureProduct .products .product { background: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
}

/* ── 12. DARK MODE — table-list & DataTables (hardcoded #fff / #f9f9f9 / #f6f6f6) ── */
html.dark table.table-list thead th {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-head) !important;
  border-color: var(--ows-border) !important;
}
html.dark .dataTables_wrapper table.table-list thead th.sorting_asc,
html.dark .dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: var(--ows-ink) !important;
}
html.dark table.table-list tbody td {
  background-color: var(--ows-bg-card) !important;
  color: var(--ows-text-base) !important;
  border-color: var(--ows-border) !important;
}
html.dark table.table-list tbody tr:hover td {
  background-color: rgba(255,255,255,.05) !important;
}
html.dark body .dataTables_wrapper .dataTables_filter label .form-control {
  background: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .dataTables_wrapper .dataTables_filter::after { color: var(--ows-text-muted) !important; }

/* Bootstrap pagination (.pagination / .page-link) — used by DataTables' pager
   (e.g. /domain-pricing). Default Bootstrap style is hardcoded #fff/#dee2e6,
   which had NO dark-mode coverage anywhere: the prev/next arrows and page
   number buttons rendered as solid white boxes on the dark page. */
html.dark .page-link {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-brand-300) !important;
}
html.dark .page-link:hover {
  background-color: rgba(255,255,255,.06) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-brand-200) !important;
}
html.dark .page-item.active .page-link {
  background-color: var(--ows-brand-600) !important;
  border-color: var(--ows-brand-600) !important;
  color: #fff !important;
}
html.dark .page-item.disabled .page-link {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-muted) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) table.table-list thead th { background-color: var(--ows-ink-soft) !important; color: var(--ows-text-head) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .dataTables_wrapper table.table-list thead th.sorting_asc,
  html:not(.light) .dataTables_wrapper table.table-list thead th.sorting_desc { background-color: var(--ows-ink) !important; }
  html:not(.light) table.table-list tbody td { background-color: var(--ows-bg-card) !important; color: var(--ows-text-base) !important; border-color: var(--ows-border) !important; }
  html:not(.light) table.table-list tbody tr:hover td { background-color: rgba(255,255,255,.05) !important; }
  html:not(.light) body .dataTables_wrapper .dataTables_filter label .form-control { background: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) .page-link { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-brand-300) !important; }
  html:not(.light) .page-link:hover { background-color: rgba(255,255,255,.06) !important; color: var(--ows-brand-200) !important; }
  html:not(.light) .page-item.active .page-link { background-color: var(--ows-brand-600) !important; border-color: var(--ows-brand-600) !important; color: #fff !important; }
  html:not(.light) .page-item.disabled .page-link { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-muted) !important; }
}

/* ── 13. DARK MODE — Client home: tiles, card headers/footers ── */
html.dark .client-home-cards .card-header {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
}
html.dark .tiles .tile {
  background-color: var(--ows-bg-card) !important;
  border-right-color: var(--ows-border) !important;
}
html.dark .tiles .tile:hover { background-color: rgba(255,255,255,.05) !important; }
html.dark .tiles .tile .title { color: var(--ows-text-muted) !important; }
html.dark .tiles .tile i { color: var(--ows-slate-600) !important; }
html.dark body .primary-content .client-home-cards .card .card-header .btn {
  background: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark body .primary-content .client-home-cards .card .card-header .btn:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ows-text-head) !important;
}
html.dark body .primary-content .client-home-cards .card .card-footer {
  background: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
}
html.dark body .secondary-cart-body #domainRenewals {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark body .secondary-cart-body #domainRenewals .domain-renewal {
  border-color: var(--ows-border) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .client-home-cards .card-header { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .tiles .tile { background-color: var(--ows-bg-card) !important; border-right-color: var(--ows-border) !important; }
  html:not(.light) .tiles .tile:hover { background-color: rgba(255,255,255,.05) !important; }
  html:not(.light) body .primary-content .client-home-cards .card .card-header .btn { background: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) body .primary-content .client-home-cards .card .card-footer { background: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body .secondary-cart-body #domainRenewals { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body .secondary-cart-body #domainRenewals .domain-renewal { border-color: var(--ows-border) !important; }
}

/* ── 14. DARK MODE — Global elements (alerts-with-forms, continue, invite, select-account) ── */
html.dark .alert:has(form) {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .continue-container {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .invite-box {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .select-account { border-color: var(--ows-border) !important; }
html.dark .select-account a { border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
html.dark .select-account a:hover { background-color: rgba(255,255,255,.05) !important; color: var(--ows-text-head) !important; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .alert:has(form) { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) .continue-container { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .invite-box { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .select-account { border-color: var(--ows-border) !important; }
  html:not(.light) .select-account a { border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) .select-account a:hover { background-color: rgba(255,255,255,.05) !important; }
}

/* ── 15. DARK MODE — Registration form ── */
html.dark #registration label { color: var(--ows-text-muted) !important; }
html.dark #registration .sub-heading { border-color: var(--ows-border) !important; }
html.dark #registration .sub-heading span {
  background-color: var(--ows-bg-page) !important;
  color: var(--ows-brand-400) !important;
}
html.dark #registration .field,
html.dark #registration .form-control {
  background: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark #registration .field[disabled],
html.dark #registration .field[readonly],
html.dark #registration .form-control[disabled],
html.dark #registration .form-control[readonly] {
  background-color: var(--ows-ink) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) #registration label { color: var(--ows-text-muted) !important; }
  html:not(.light) #registration .sub-heading span { background-color: var(--ows-bg-page) !important; color: var(--ows-brand-400) !important; }
  html:not(.light) #registration .field,
  html:not(.light) #registration .form-control { background: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) #registration .field[disabled],
  html:not(.light) #registration .form-control[disabled] { background-color: var(--ows-ink) !important; }
}

/* ── 16. DARK MODE — Responsive mobile tabs ── */
html.dark .responsive-tabs-sm {
  background: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark .responsive-tabs-sm .nav-item a:hover { background-color: rgba(255,255,255,.05) !important; }
html.dark .responsive-tabs-sm .nav-item a.active {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-head) !important;
}
html.dark .responsive-tabs-sm-connector .channel {
  background: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark .responsive-tabs-sm-connector .bottom-border { border-color: var(--ows-border) !important; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .responsive-tabs-sm { background: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .responsive-tabs-sm .nav-item a.active { background-color: var(--ows-ink-soft) !important; }
  html:not(.light) .responsive-tabs-sm-connector .channel { background: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
}

/* ── 17. DARK MODE — Support tickets ── */
html.dark .view-ticket .card-body { border-color: var(--ows-border) !important; }
html.dark .view-ticket .posted-by {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-muted) !important;
}
html.dark .view-ticket .posted-by .posted-by-name { color: var(--ows-text-head) !important; }
html.dark .view-ticket .attachments { border-color: var(--ows-border) !important; }
html.dark .view-ticket .attachment-list li span { border-color: var(--ows-border) !important; }
html.dark .view-ticket .attachment-list li figure { background-color: var(--ows-ink-soft) !important; }
html.dark .ticketfeedbackstaffcont {
  background-color: var(--ows-bg-card) !important;
  color: var(--ows-text-base) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .view-ticket .posted-by { background-color: var(--ows-ink-soft) !important; color: var(--ows-text-muted) !important; }
  html:not(.light) .view-ticket .card-body { border-color: var(--ows-border) !important; }
  html:not(.light) .view-ticket .attachment-list li figure { background-color: var(--ows-ink-soft) !important; }
  html:not(.light) .ticketfeedbackstaffcont { background-color: var(--ows-bg-card) !important; }
}

/* ── 18. DARK MODE — Payments: credit card display, invoice/masspay totals ── */
html.dark div.credit-card {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark div.credit-card div.card-number {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-base) !important;
}
html.dark .invoice-summary-table td.total-row,
html.dark tr.masspay-total td {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-head) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) div.credit-card { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) div.credit-card div.card-number { background-color: var(--ows-ink-soft) !important; }
  html:not(.light) .invoice-summary-table td.total-row,
  html:not(.light) tr.masspay-total td { background-color: var(--ows-ink-soft) !important; color: var(--ows-text-head) !important; }
}

/* ── 19. DARK MODE — Upgrades page ── */
html.dark .upgrade .product-to-be-upgraded {
  background-color: var(--ows-bg-card) !important;
  border: 1px solid var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .upgrade .products .product {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
}
html.dark .upgrade .products .product ul { border-color: var(--ows-border) !important; }
html.dark .upgrade .products .product ul li {
  border-color: var(--ows-border) !important;
  color: var(--ows-text-muted) !important;
}
html.dark .upgrade .products .product ul li span { color: var(--ows-text-base) !important; }
html.dark .upgrade .products .product .footer { border-color: var(--ows-border) !important; }
html.dark .upgrade .products .product .btn {
  background-color: var(--ows-brand-600) !important;
  border-color: var(--ows-brand-700) !important;
  color: var(--ows-white) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .upgrade .product-to-be-upgraded { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .upgrade .products .product { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .upgrade .products .product ul { border-color: var(--ows-border) !important; }
  html:not(.light) .upgrade .products .product ul li { border-color: var(--ows-border) !important; color: var(--ows-text-muted) !important; }
  html:not(.light) .upgrade .products .product ul li span { color: var(--ows-text-base) !important; }
  html:not(.light) .upgrade .products .product .footer { border-color: var(--ows-border) !important; }
  html:not(.light) .upgrade .products .product .btn { background-color: var(--ows-brand-600) !important; border-color: var(--ows-brand-700) !important; color: var(--ows-white) !important; }
}

/* ── 20. DARK MODE — Checkout: account selector, option-selected, configure form ── */
/* .account divs have no explicit background in SCSS — they inherit Bootstrap #fff */
html.dark body #order-standard_cart #frmCheckout #containerExistingAccountSelect > div:first-child .account,
html.dark body #order-standard_cart #frmCheckout #containerExistingAccountSelect > div:last-child .account {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark body #order-standard_cart #frmCheckout #containerExistingAccountSelect > div:first-child .account:hover,
html.dark body #order-standard_cart #frmCheckout #containerExistingAccountSelect > div:last-child .account:hover {
  background-color: rgba(255,255,255,.05) !important;
}
/* domain-selection-options: selected option (#f8f8f8 not caught by parent rule) */
html.dark body #order-standard_cart .domain-selection-options .option-selected {
  background: var(--ows-ink-soft) !important;
}
/* configure product form — hardcoded color: black on .form-control */
html.dark body #frmConfigureProduct .form-control,
html.dark body #frmConfigureProduct label {
  color: var(--ows-text-base) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) body #order-standard_cart #frmCheckout #containerExistingAccountSelect > div:first-child .account,
  html:not(.light) body #order-standard_cart #frmCheckout #containerExistingAccountSelect > div:last-child .account {
    background-color: var(--ows-bg-card) !important;
    border-color: var(--ows-border) !important;
    color: var(--ows-text-base) !important;
  }
  html:not(.light) body #order-standard_cart .domain-selection-options .option-selected { background: var(--ows-ink-soft) !important; }
  html:not(.light) body #frmConfigureProduct .form-control,
  html:not(.light) body #frmConfigureProduct label { color: var(--ows-text-base) !important; }
}

/* ── 23. DARK MODE — Site header (background-color: #fff in _layout.scss) ── */
html.dark header.header {
  background-color: var(--ows-ink) !important;
  border-bottom: 1px solid var(--ows-border) !important;
}
html.dark header.header .navbar a,
html.dark header.header .navbar-nav a { color: var(--ows-text-base) !important; }
html.dark header.header .toolbar .nav-link {
  border-color: var(--ows-border) !important;
  color: var(--ows-text-muted) !important;
}
html.dark header.header .toolbar .nav-link:hover { color: var(--ows-text-head) !important; }
html.dark header.header .dropdown-item.active,
html.dark header.header .dropdown-item:active {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-head) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) header.header { background-color: var(--ows-ink) !important; border-bottom: 1px solid var(--ows-border) !important; }
  html:not(.light) header.header .navbar a,
  html:not(.light) header.header .navbar-nav a { color: var(--ows-text-base) !important; }
  html:not(.light) header.header .toolbar .nav-link { border-color: var(--ows-border) !important; color: var(--ows-text-muted) !important; }
}

/* ── 24. DARK MODE — Btn-default disabled/reveal-pw hover, 2FA enable btn ── */
html.dark .btn-default[disabled]:hover,
html.dark fieldset[disabled] .btn-default:hover,
html.dark .btn-default.disabled:hover {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-muted) !important;
}
html.dark .input-group .btn-reveal-pw:hover,
html.dark .input-group .btn-reveal-pw:active {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-brand-400) !important;
}
html.dark .btn.btn-success.open-modal.twofa-config-link.enable {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .btn.btn-success.open-modal.twofa-config-link.enable:hover {
  background-color: var(--ows-brand-600) !important;
  color: #fff !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .btn-default[disabled]:hover,
  html:not(.light) .btn-default.disabled:hover { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .input-group .btn-reveal-pw:hover,
  html:not(.light) .input-group .btn-reveal-pw:active { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .btn.btn-success.open-modal.twofa-config-link.enable { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) .btn.btn-success.open-modal.twofa-config-link.enable:hover { background-color: var(--ows-brand-600) !important; color: #fff !important; }
}

/* ── 24a. Home domain search — theme-aware background ────────────────────── */
/* The template used a hardcoded Bootstrap `.bg-white` utility (!important),
   which is impossible to override for dark mode. It's been removed from the
   markup; this rule drives the background from --ows-bg-card instead, which
   already resolves to white in light mode and a dark surface in dark mode. */
.home-domain-search { background-color: var(--ows-bg-card); }

/* ── 24b. Domain pricing — center TLD tiles & category filters ──────────── */
.featured-tlds-container .row { justify-content: center; }
.tld-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── 25. DARK MODE — Home: domain search input wrapper, action-icon buttons ── */
html.dark .home-domain-search .input-group-wrapper {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
}
html.dark body #main-body .action-icon-btns a {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-muted) !important;
}
html.dark body #main-body .action-icon-btns a:hover { color: var(--ows-text-head) !important; }
html.dark body #main-body .action-icon-btns a .ico-container i { color: var(--ows-slate-600) !important; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .home-domain-search .input-group-wrapper { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) body #main-body .action-icon-btns a { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-muted) !important; }
}

/* ── 26. DARK MODE — Email verification / user-validation banner ── */
html.dark .verification-banner {
  background-color: var(--ows-bg-card) !important;
  border-bottom-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .verification-banner .fas,
html.dark .verification-banner .fal,
html.dark .verification-banner .far { color: var(--ows-text-muted) !important; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .verification-banner { background-color: var(--ows-bg-card) !important; border-bottom-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
}

/* ── 27. DARK MODE — Markdown editor (.md-editor toolbar, textarea, preview, tables) ── */
html.dark .md-editor { border-color: var(--ows-border) !important; }
html.dark .md-editor > .btn-toolbar {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
}
html.dark .md-editor > textarea.markdown-editor,
html.dark .md-editor > .md-preview {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .md-preview table,
html.dark .markdown-content table {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .md-preview table > thead > tr > th,
html.dark .markdown-content table > thead > tr > th {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-head) !important;
}
html.dark .md-preview table > tbody > tr > td,
html.dark .markdown-content table > tbody > tr > td {
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .md-editor > .btn-toolbar { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .md-editor > textarea.markdown-editor,
  html:not(.light) .md-editor > .md-preview { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-base) !important; }
  html:not(.light) .md-preview table, html:not(.light) .markdown-content table { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .md-preview table > thead > tr > th, html:not(.light) .markdown-content table > thead > tr > th { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-head) !important; }
}

/* ── 28. DARK MODE — MarketConnect store-domain-tabs, promo-banner ── */
html.dark .store-order-container .store-domain-tabs li a {
  background-color: var(--ows-ink-soft) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-muted) !important;
}
html.dark .store-order-container .store-domain-tabs li.active a {
  background-color: var(--ows-bg-card) !important;
  color: var(--ows-text-head) !important;
}
html.dark .store-order-container .store-domain-tab-content {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .promo-banner {
  background-color: var(--ows-bg-card) !important;
  color: var(--ows-text-base) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .store-order-container .store-domain-tabs li a { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; color: var(--ows-text-muted) !important; }
  html:not(.light) .store-order-container .store-domain-tabs li.active a { background-color: var(--ows-bg-card) !important; color: var(--ows-text-head) !important; }
  html:not(.light) .store-order-container .store-domain-tab-content { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .promo-banner { background-color: var(--ows-bg-card) !important; color: var(--ows-text-base) !important; }
}

/* ── 29. DARK MODE — Product details: icon bg, tab-container ── */
html.dark div.product-details div.product-icon {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-head) !important;
}
html.dark div.product-details-tab-container {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) div.product-details div.product-icon { background-color: var(--ows-ink-soft) !important; }
  html:not(.light) div.product-details-tab-container { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
}

/* ── 30. DARK MODE — Featured TLD cards (domain search page) ── */
html.dark .featured-tld {
  background-color: var(--ows-bg-card) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.4) !important;
}
html.dark .featured-tld .price {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-base) !important;
}
/* TLD pricing alternating odd-child header rows (#f5f5f5 — distinct from .efefef already covered) */
html.dark body #order-standard_cart .domain-pricing .tld-pricing-header div:nth-child(odd) {
  background-color: var(--ows-ink) !important;
  border-color: #336699 !important;
}
html.dark .domain-pricing .tld-row { border-color: var(--ows-border) !important; }
html.dark .domain-pricing .tld-row.highlighted { background: var(--ows-ink-soft) !important; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .featured-tld { background-color: var(--ows-bg-card) !important; }
  html:not(.light) .featured-tld .price { background-color: var(--ows-ink-soft) !important; color: var(--ows-text-base) !important; }
  html:not(.light) body #order-standard_cart .domain-pricing .tld-pricing-header div:nth-child(odd) { background-color: var(--ows-ink) !important; }
  html:not(.light) .domain-pricing .tld-row.highlighted { background: var(--ows-ink-soft) !important; }
}

/* ── 31. DARK MODE — Two-factor backup code display ── */
html.dark .twofa-setup .backup-code {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-head) !important;
  border: 1px solid var(--ows-border) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .twofa-setup .backup-code { background-color: var(--ows-ink-soft) !important; color: var(--ows-text-head) !important; border-color: var(--ows-border) !important; }
}

/* ── 32. DARK MODE — Invoice total row inside invoice-container ── */
html.dark .invoice-container td.total-row {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-head) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .invoice-container td.total-row { background-color: var(--ows-ink-soft) !important; color: var(--ows-text-head) !important; }
}

/* ── 33. DARK MODE — Notification popover hover ── */
html.dark .popover-user-notifications {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .popover-user-notifications ul li {
  border-color: var(--ows-border) !important;
}
html.dark .popover-user-notifications ul li a {
  color: var(--ows-text-base) !important;
}
html.dark .popover-user-notifications ul li a:hover {
  background-color: rgba(255,255,255,.05) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .popover-user-notifications { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .popover-user-notifications ul li { border-color: var(--ows-border) !important; }
  html:not(.light) .popover-user-notifications ul li a { color: var(--ows-text-base) !important; }
  html:not(.light) .popover-user-notifications ul li a:hover { background-color: rgba(255,255,255,.05) !important; }
}

/* ── 34. DARK MODE — JsonForm validation error field (#fff0f0 → dark red tint) ── */
html.dark form[data-role="json-form"] .has-error input.form-control,
html.dark form[data-role="json-form"] .has-error textarea.form-control,
html.dark form[data-role="json-form"] .has-error select.form-control {
  background-color: rgba(157,42,11,.25) !important;
  border-color: #c0392b !important;
  color: var(--ows-text-base) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) form[data-role="json-form"] .has-error input.form-control,
  html:not(.light) form[data-role="json-form"] .has-error textarea.form-control,
  html:not(.light) form[data-role="json-form"] .has-error select.form-control { background-color: rgba(157,42,11,.25) !important; border-color: #c0392b !important; color: var(--ows-text-base) !important; }
}

/* ── 35. DARK MODE — OAuth page (oauth.css overrides) ── */
html.dark body { background-color: var(--ows-bg-page) !important; }
html.dark .content-container {
  background-color: var(--ows-bg-card) !important;
  border: 1px solid var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .content-container { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
}

/* ── 36. DARK MODE — MarketConnect landing pages (store.css .landing-page catch-all) ── */
html.dark .landing-page {
  background-color: var(--ows-bg-page) !important;
  color: var(--ows-text-base) !important;
}
html.dark .landing-page .product-options .item {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .landing-page .nav-tabs > li > a,
html.dark .landing-page .nav-tabs > li > a:focus {
  background-color: var(--ows-ink-soft) !important;
  color: var(--ows-text-muted) !important;
}
html.dark .landing-page .nav-tabs > li.active > a,
html.dark .landing-page .nav-tabs > li.active > a:focus,
html.dark .landing-page .nav-tabs > li.active > a:hover {
  background-color: var(--ows-bg-card) !important;
  color: var(--ows-text-head) !important;
}
html.dark .landing-page .tab-content {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
html.dark .landing-page .navbar .navbar-nav > li.active > a {
  background-color: var(--ows-ink-soft) !important;
}
/* SSL browser-notice and panel body */
html.dark .landing-page.ssl .browser-notice .wrapper { background-color: var(--ows-bg-card) !important; }
html.dark .landing-page.ssl .detailed-info { background-color: var(--ows-ink) !important; }
html.dark .landing-page.ssl .detailed-info .card-body { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
html.dark .landing-page.ssl .row-pricing-table ul li { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; color: var(--ows-text-muted) !important; }
/* SiteLock plans */
html.dark .landing-page.sitelock .plans .plan { background-color: var(--ows-bg-card) !important; }
/* SitelocVPN pricing box */
html.dark .landing-page.sitelockvpn .feature.pricing .pricing-box { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
/* SiteBuilder pricing table */
html.dark .landing-page.sitebuilder { background-color: var(--ows-bg-page) !important; }
html.dark .landing-page.sitebuilder .pricing-table { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
html.dark .landing-page.sitebuilder .pricing-table-row:not(.col-heading):nth-child(even) { background-color: var(--ows-ink-soft) !important; }
html.dark .landing-page.sitebuilder .nav-tabs > li > a { background: var(--ows-ink-soft) !important; color: var(--ows-text-base) !important; }
/* NordVPN page */
html.dark .landing-page.nordvpn { background-color: var(--ows-bg-page) !important; color: var(--ows-text-base) !important; }
/* 360 Monitoring */
html.dark .landing-page.threesixtymonitoring .section-faq .card-header { background-color: var(--ows-ink-soft) !important; border-color: var(--ows-border) !important; }
html.dark .landing-page.threesixtymonitoring .nav-secondary .nav-link { background-color: var(--ows-ink-soft) !important; }
html.dark .landing-page.threesixtymonitoring .nav-secondary .nav-link.active { background-color: var(--ows-bg-card) !important; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .landing-page { background-color: var(--ows-bg-page) !important; color: var(--ows-text-base) !important; }
  html:not(.light) .landing-page .product-options .item { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .landing-page .nav-tabs > li > a { background-color: var(--ows-ink-soft) !important; color: var(--ows-text-muted) !important; }
  html:not(.light) .landing-page .nav-tabs > li.active > a { background-color: var(--ows-bg-card) !important; color: var(--ows-text-head) !important; }
  html:not(.light) .landing-page .tab-content { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .landing-page.ssl .row-pricing-table ul li { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
  html:not(.light) .landing-page.sitelock .plans .plan { background-color: var(--ows-bg-card) !important; }
  html:not(.light) .landing-page.threesixtymonitoring .section-faq .card-header { background-color: var(--ows-ink-soft) !important; }
}

/* ── 37. DARK MODE — Invoice view (online printable invoice container) ── */
html.dark .invoice-container {
  background-color: var(--ows-bg-card) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-base) !important;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .invoice-container { background-color: var(--ows-bg-card) !important; border-color: var(--ows-border) !important; }
}

/* ── 38. LOGIN PAGE — captcha sizing/alignment, social sign-in placement ──
   Scoped to .login-form only so registration / domain-checker captchas
   (which share includes/captcha.tpl) are unaffected. ── */

/* Captcha instructional text: smaller, icon-led instead of a large paragraph */
body .login-form #default-captcha-domainchecker p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--ows-text-muted);
  margin-bottom: 0.625rem;
}
body .login-form #default-captcha-domainchecker p::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f023"; /* fa-lock */
  font-size: 0.8125rem;
}

/* Captcha image + input: full width, stacked, matching the password field's width */
body .login-form .row.justify-content-center { margin-left: 0; margin-right: 0; }
body .login-form .col-md-8.mx-auto {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
body .login-form #default-captcha-domainchecker {
  flex-direction: column;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
}
body .login-form #default-captcha-domainchecker .col-6 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
body .login-form #default-captcha-domainchecker .captchaimage {
  text-align: center;
  margin-bottom: 0.5rem;
}
body .login-form #default-captcha-domainchecker .captchaimage img { max-width: 100%; }
body .login-form #default-captcha-domainchecker #inputCaptcha { width: 100%; }

/* "or" divider above the social sign-in button(s), now rendered inside the card */
.login-social-divider {
  position: relative;
  margin: 1.25rem 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
}
.login-social-divider::before,
.login-social-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 1.5rem);
  border-top: 1px solid var(--ows-border);
}
.login-social-divider::before { left: 0; }
.login-social-divider::after { right: 0; }
body .login-form .social-signin-btns { text-align: center; }

/* ── 39. DARK MODE — Order form colours hardcoded for light backgrounds ──────
   standard_cart/css/all.min.css fixes these backgrounds or text colours, so
   each pair ends up light-on-light or dark-on-dark on the dark theme.
   Logos sit on a white chip because they are artwork made for white pages. */
html.dark body #order-standard_cart label { color: var(--ows-text-muted) !important; }
html.dark body #order-standard_cart .panel-addon .panel-body label { color: var(--ows-text-head) !important; }
html.dark body #order-standard_cart .panel-addon .panel-price {
  background-color: var(--ows-bg-subtle) !important;
  color: var(--ows-text-base) !important;
}
html.dark body #order-standard_cart .panel-addon .panel-add { background-color: var(--ows-dark-addon-green) !important; }
html.dark body #order-standard_cart form a[style*="#cc0000"] { color: #f87171 !important; }
html.dark body #order-standard_cart .order-summary .recurring-charges { color: var(--ows-text-muted) !important; }
html.dark body #order-standard_cart .order-summary .btn-continue-shopping { color: var(--ows-text-muted) !important; }
html.dark body #order-standard_cart .view-cart-promotion-code {
  background-color: var(--ows-bg-subtle) !important;
  border-color: var(--ows-border) !important;
  color: var(--ows-text-head) !important;
}
html.dark body #order-standard_cart .view-cart-gateway-checkout {
  background-color: var(--ows-bg-subtle) !important;
  color: var(--ows-text-base) !important;
}
html.dark body #order-standard_cart .mc-promo,
html.dark .product-recommendations .product-recommendation {
  background-color: var(--ows-bg-card) !important;
  color: var(--ows-text-base) !important;
}
html.dark body #order-standard_cart .mc-promo .headline,
html.dark .product-recommendations .product-recommendation .headline { color: var(--ows-text-head) !important; }
html.dark body #order-standard_cart .mc-promo .body,
html.dark .product-recommendations .product-recommendation .body {
  background-color: var(--ows-bg-subtle) !important;
  border-top-color: var(--ows-border) !important;
}
html.dark body #order-standard_cart .mc-promo .icon {
  padding: 4px;
  background-color: #fff;
  border-radius: var(--ows-r-sm);
  line-height: 42px;
}
html.dark img[src*="tld_logos/"] {
  padding: 3px 5px;
  box-sizing: content-box;
  background-color: #fff;
  border-radius: var(--ows-r-sm);
}
html.dark { --ows-dark-addon-green: #15803d; }

/* Prefers-color-scheme mirror (no stored theme / JS unavailable) */
@media (prefers-color-scheme: dark) {
  html:not(.light) { --ows-dark-addon-green: #15803d; }
  html:not(.light) body #order-standard_cart label { color: var(--ows-text-muted) !important; }
  html:not(.light) body #order-standard_cart .panel-addon .panel-body label { color: var(--ows-text-head) !important; }
  html:not(.light) body #order-standard_cart .panel-addon .panel-price { background-color: var(--ows-bg-subtle) !important; color: var(--ows-text-base) !important; }
  html:not(.light) body #order-standard_cart .panel-addon .panel-add { background-color: var(--ows-dark-addon-green) !important; }
  html:not(.light) body #order-standard_cart form a[style*="#cc0000"] { color: #f87171 !important; }
  html:not(.light) body #order-standard_cart .order-summary .recurring-charges,
  html:not(.light) body #order-standard_cart .order-summary .btn-continue-shopping { color: var(--ows-text-muted) !important; }
  html:not(.light) body #order-standard_cart .view-cart-promotion-code { background-color: var(--ows-bg-subtle) !important; border-color: var(--ows-border) !important; color: var(--ows-text-head) !important; }
  html:not(.light) body #order-standard_cart .view-cart-gateway-checkout { background-color: var(--ows-bg-subtle) !important; color: var(--ows-text-base) !important; }
  html:not(.light) body #order-standard_cart .mc-promo,
  html:not(.light) .product-recommendations .product-recommendation { background-color: var(--ows-bg-card) !important; color: var(--ows-text-base) !important; }
  html:not(.light) body #order-standard_cart .mc-promo .headline,
  html:not(.light) .product-recommendations .product-recommendation .headline { color: var(--ows-text-head) !important; }
  html:not(.light) body #order-standard_cart .mc-promo .body,
  html:not(.light) .product-recommendations .product-recommendation .body { background-color: var(--ows-bg-subtle) !important; border-top-color: var(--ows-border) !important; }
  html:not(.light) body #order-standard_cart .mc-promo .icon { padding: 4px; background-color: #fff; border-radius: var(--ows-r-sm); line-height: 42px; }
  html:not(.light) img[src*="tld_logos/"] { padding: 3px 5px; box-sizing: content-box; background-color: #fff; border-radius: var(--ows-r-sm); }
}

/* ── 40. MOBILE — Hide Categories / Actions / Currency across the cart ───────
   .sidebar-collapsed is the small-screen copy of the cart sidebar. It appears
   on every cart step, so it is hidden everywhere on phones. Tablet and desktop
   are unaffected. */
@media (max-width: 767.98px) {
  #order-standard_cart .sidebar-collapsed { display: none; }
}

/* ── 41. DARK — Cart addon boxes and section headings ───────────────────────
   .addon-promo-container carries Bootstrap's .bg-white (!important), which left
   the SSL / SiteLock / Site Builder boxes white with pale text. Their logos are
   dark artwork, so they keep a white chip. --ows-dark-section-bg is the flat
   color of #main-body in dark mode, so headings sit on the page with no box. */
:root { --ows-dark-section-bg: #111521; }

html.dark body #order-standard_cart .addon-promo-container.bg-white {
  background-color: var(--ows-bg-card) !important;
  border: 1px solid var(--ows-border);
  border-radius: var(--ows-r-sm);
}
html.dark body #order-standard_cart .addon-promo-container h3 { color: var(--ows-text-head) !important; }
html.dark body #order-standard_cart .addon-promo-container p { color: var(--ows-text-base) !important; }
html.dark body #order-standard_cart .addon-promo-container label { color: var(--ows-text-base) !important; }
html.dark body #order-standard_cart .addon-promo-container .logo img { padding: 4px; background-color: #fff; border-radius: var(--ows-r-sm); }
html.dark body #order-standard_cart .sub-heading span { background: var(--ows-dark-section-bg) !important; }
html.dark body #order-standard_cart .alert-warning a { color: #fbbf24 !important; text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  html:not(.light) body #order-standard_cart .alert-warning a { color: #fbbf24 !important; text-decoration: underline; }
  html:not(.light) body #order-standard_cart .addon-promo-container.bg-white {
    background-color: var(--ows-bg-card) !important;
    border: 1px solid var(--ows-border);
    border-radius: var(--ows-r-sm);
  }
  html:not(.light) body #order-standard_cart .addon-promo-container h3 { color: var(--ows-text-head) !important; }
  html:not(.light) body #order-standard_cart .addon-promo-container p { color: var(--ows-text-base) !important; }
  html:not(.light) body #order-standard_cart .addon-promo-container label { color: var(--ows-text-base) !important; }
  html:not(.light) body #order-standard_cart .addon-promo-container .logo img { padding: 4px; background-color: #fff; border-radius: var(--ows-r-sm); }
  html:not(.light) body #order-standard_cart .sub-heading span { background: var(--ows-dark-section-bg) !important; }
}

/* ── 42. MOBILE — Cart alignment and portal pricing button ──────────────────
   The cart nests .row inside a container whose padding is already used, so the
   negative margins cancelled the page gutter and pushed content 15px past the
   screen edge. Removing them restores an even gutter on both sides. */
@media (max-width: 767.98px) {
  #order-standard_cart > .row,
  #frmConfigureProduct > .row { margin-left: 0; margin-right: 0; }
  #order-standard_cart #frmConfigureProduct .secondary-cart-body,
  #order-standard_cart #frmConfigureProduct .secondary-cart-sidebar { padding-left: 0; padding-right: 0; }
  #order-standard_cart select.select-inline { width: 100%; max-width: 100%; }
  #order-standard_cart .addon-promo-container h3 { font-size: 1.25rem; }

}

/* ── 42a. PORTAL HOME — Domain pricing and View all pricing ─────────────────
   The button matches Browse Products at every width, and on phones it is
   full width like them. The three TLDs share one line on phones, with each
   logo above its price. */
.home-domain-search a.btn.float-right {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
}
@media (max-width: 767.98px) {
  .home-domain-search .tld-logos {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    font-size: 0.75rem;
  }
  .home-domain-search .tld-logos li {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0;
    float: none;
    white-space: nowrap;
  }
  .home-domain-search .tld-logos img {
    box-sizing: border-box;
    width: 64px;
    max-width: 100%;
    height: 34px;
    object-fit: contain;
  }
  .home-domain-search a.btn.float-right {
    display: block;
    float: none !important;
    width: 100%;
    margin-top: 1rem;
  }
}
/* The block's side padding leaves too little room for three prices on very
   narrow phones, so the row extends into it. */
@media (max-width: 359.98px) {
  .home-domain-search .tld-logos { margin-left: -1.5rem; margin-right: -1.5rem; }
}

/* ── 43. MOBILE — Client area navigation strip ──────────────────────────────
   The strip scrolled sideways, which cut off Knowledgebase and Account, clipped
   the Store and Account dropdowns, and widened the page. The primary links now
   wrap in the space left beside Account, so every item stays visible and
   dropdowns open normally. Keep display: flex on these lists: display: contents
   gives Popper an empty boundary and sends the dropdowns off-screen. */
@media (max-width: 767.98px) {
  .ows-secondary-nav ul.nav { flex-wrap: wrap; overflow: visible; }
  .ows-secondary-nav .ows-secondary-nav-primary { flex: 1 1 0; min-width: 0; }
  .ows-secondary-nav .ows-secondary-nav-end { flex: 0 0 auto; }
  .ows-secondary-nav ul.nav > li > a { padding: 0.5rem 0.5rem; }
  .ows-secondary-nav .dropdown-menu { max-height: 60vh; overflow-y: auto; }
}

/* ── 44. MOBILE — Side menu ─────────────────────────────────────────────────
   Everything here depends on html.ows-drawer, which ows-nexus.js sets after
   building the panel. Without it the stacked menu and the wrapped strip from
   section 43 stay in place. The panel uses the logo's blue in both themes, so
   its text tokens are set once here. The strip is hidden on phones only, where
   its links move into the Client Area section; tablets keep the strip.
   1061 sits above the scrim, and both sit above Bootstrap modals (1050). */
@media (max-width: 1023.98px) {
  html.ows-drawer .ows-mobile-menu {
    --ows-nav-text: #fff;
    --ows-nav-text-hover: #fff;
    --ows-mob-item-hover: rgba(5,10,40,.28);
    --ows-drawer-accent: #7dd3fc;
    --ows-drawer-line: rgba(255,255,255,.14);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1061;
    display: flex;
    flex-direction: column;
    width: min(84vw, 320px);
    max-height: none;
    overflow: visible;
    background: linear-gradient(170deg, var(--ows-brand-700), var(--ows-brand-900));
    border: 0;
    box-shadow: 8px 0 32px rgba(0,0,0,.35);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.28s;
  }
  html.ows-drawer .ows-mobile-menu.open {
    visibility: visible;
    transform: none;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  html.ows-drawer-open { overflow: hidden; }

  html.ows-drawer .ows-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(5,8,20,.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s, visibility 0s linear 0.28s;
  }
  html.ows-drawer .ows-drawer-scrim.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s, visibility 0s;
  }

  html.ows-drawer .ows-drawer-head {
    flex: 0 0 auto;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--ows-drawer-line);
  }
  html.ows-drawer .ows-drawer-head .ows-logo-text { color: #fff; }
  html.ows-drawer .ows-drawer-head .ows-gradient-text {
    background: none;
    color: var(--ows-drawer-accent);
    -webkit-text-fill-color: var(--ows-drawer-accent);
  }

  html.ows-drawer .ows-drawer-close {
    position: absolute;
    top: 1.25rem;
    right: -1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 0.875rem;
    color: #fff;
    background: var(--ows-brand-700);
    border: 2px solid var(--ows-drawer-accent);
    border-radius: 50%;
    cursor: pointer;
  }

  html.ows-drawer .ows-mobile-inner {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 0.5rem 0;
  }
  html.ows-drawer .ows-drawer-label {
    padding: 0.875rem 1.25rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ows-drawer-accent);
    text-transform: uppercase;
  }
  /* Blue on a white tile, like the logo tile and Order Now. Blue or cyan icons on
     the panel itself share its hue and blend in, whatever the contrast ratio. */
  html.ows-drawer .ows-drawer-icon {
    display: inline-flex;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
    color: var(--ows-brand-700);
    background: #fff;
    border-radius: var(--ows-r-sm);
  }

  html.ows-drawer .ows-mobile-menu .ows-mobile-group { border: 0; }
  html.ows-drawer .ows-drawer-link,
  html.ows-drawer .ows-mobile-menu .ows-mobile-cart,
  html.ows-drawer .ows-mobile-menu .ows-mobile-group-btn {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0.4375rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    background: none;
    border: 0;
  }
  html.ows-drawer .ows-mobile-menu .ows-mobile-group-btn svg { margin-left: auto; color: #fff; }
  html.ows-drawer .ows-drawer-link:hover,
  html.ows-drawer .ows-mobile-menu .ows-mobile-cart:hover,
  html.ows-drawer .ows-mobile-menu .ows-mobile-group-btn:hover { color: #fff; background: var(--ows-mob-item-hover); }
  html.ows-drawer .ows-mobile-menu .ows-mobile-group-items a { padding-left: 4.125rem; padding-right: 1.25rem; color: #fff; }
  html.ows-drawer .ows-mobile-menu .ows-mob-from { color: var(--ows-drawer-accent); }

  html.ows-drawer .ows-mobile-menu .ows-mobile-actions {
    flex: 0 0 auto;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ows-drawer-line);
  }
  html.ows-drawer .ows-mobile-menu .ows-mobile-actions .ows-btn { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.6); box-shadow: none; }
  html.ows-drawer .ows-mobile-menu .ows-mobile-actions .ows-btn-primary { color: var(--ows-brand-800) !important; background: #fff; border-color: #fff; }
}
@media (min-width: 768px) {
  html.ows-drawer .ows-drawer-client { display: none; }
}
@media (max-width: 767.98px) {
  html.ows-drawer .ows-secondary-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.ows-drawer .ows-mobile-menu,
  html.ows-drawer .ows-drawer-scrim { transition: none; }
}

/* ── 45. LOGIN AND REGISTER — Form on the right, offers on the left ─────────
   The form comes first in the HTML, so keyboard order and phone layout put it
   ahead of the offers; the grid places it on the right from 992px. The panel
   shares the side menu's blue in both themes. The coupon is the one loud
   element: --ows-coupon-notch sizes the punched corners on each deal, which
   line up on the tear line between them. */
.ows-auth { display: grid; gap: 1.5rem; margin: 1.5rem 0; }
.ows-auth-main { min-width: 0; }
/* !important: Bootstrap's mt-md-4 and mb-md-4 on the card are themselves !important. */
.ows-auth .login-form .mw-540 { max-width: none; margin: 0 !important; }

@media (min-width: 992px) {
  .ows-auth { gap: 2rem; }
  /* Login: two equal boxes sharing the same top and bottom edges. */
  .ows-auth--login { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .ows-auth--login .login-form,
  .ows-auth--login .login-form .mw-540 { height: 100%; }
  .ows-auth--login .ows-auth-aside { display: flex; flex-direction: column; }
  .ows-auth--login .ows-auth-note { margin-top: auto; padding-top: 1rem; }
  /* Register: the long form needs the width, so its boxes share only the top edge. */
  .ows-auth--register { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
  .ows-auth-main { grid-column: 2; grid-row: 1; }
  .ows-auth-aside { grid-column: 1; grid-row: 1; }
  /* Names and prices only, which keeps the panel about as tall as the login form. */
  .ows-auth .ows-rack-desc { display: none; }
}
/* Register's panel follows the long form, on screens tall enough to show all of it. */
@media (min-width: 992px) and (min-height: 820px) {
  .ows-auth--register .ows-auth-aside { position: sticky; top: 5.5rem; }
}

/* Phones show only the form. */
@media (max-width: 767.98px) {
  .ows-auth-aside { display: none; }
}

.ows-auth-aside {
  --ows-coupon-notch: 9px;
  --ows-aside-accent: #7dd3fc;
  --ows-aside-line: rgba(255,255,255,.14);
  padding: 1.75rem;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #fff;
  background: linear-gradient(170deg, var(--ows-brand-700), var(--ows-brand-900));
  border-radius: var(--ows-r-lg);
}
.ows-auth-aside a { text-decoration: none; }
.ows-auth-aside a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ows-auth-title {
  margin: 0 0 1.25rem;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.ows-coupon { margin-bottom: 1.5rem; }
.ows-coupon-deal {
  display: block;
  padding: 1rem 1.25rem;
  color: var(--ows-ink);
  background: #fff;
  -webkit-mask:
    radial-gradient(circle var(--ows-coupon-notch) at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--ows-coupon-notch) at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--ows-coupon-notch) at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--ows-coupon-notch) at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle var(--ows-coupon-notch) at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--ows-coupon-notch) at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--ows-coupon-notch) at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--ows-coupon-notch) at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
}
.ows-auth-aside a.ows-coupon-deal:hover { color: var(--ows-ink); background: var(--ows-brand-50); }
.ows-coupon-deal + .ows-coupon-deal { border-top: 2px dashed var(--ows-brand-200); }
.ows-coupon-name { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--ows-brand-700); }
/* !important: the dark theme recolors every <strong>, which would wash this out on the white coupon. */
.ows-auth-aside .ows-coupon-value { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: var(--ows-ink) !important; }
.ows-coupon-terms { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: #475569; }
.ows-coupon-codes { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: #475569; }
.ows-coupon-codes code {
  padding: 0.125rem 0.375rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ows-brand-800);
  background: var(--ows-brand-100);
  border-radius: 4px;
}
.ows-coupon-codes code + code { margin-left: 0.5rem; }

.ows-rack-title { margin: 0 0 0.5rem; font-family: inherit; font-size: 1rem; font-weight: 700; color: #fff; }
.ows-rack { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ows-aside-line); }
.ows-rack li { border-bottom: 1px solid var(--ows-aside-line); }
.ows-auth-aside a.ows-rack-unit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.75rem;
  align-items: baseline;
  padding: 0.5625rem 0.5rem 0.5625rem 1.25rem;
  color: #fff;
}
.ows-auth-aside a.ows-rack-unit:hover { color: #fff; background: rgba(5,10,40,.28); }
.ows-rack-unit::before {
  content: '';
  position: absolute;
  top: 1.0625rem;
  left: 0.375rem;
  width: 7px;
  height: 7px;
  background: var(--ows-aside-accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--ows-aside-accent);
}
.ows-rack-name { font-size: 0.9375rem; font-weight: 600; }
.ows-rack-price { grid-column: 2; grid-row: 1; font-size: 0.8125rem; font-weight: 600; color: var(--ows-aside-accent); white-space: nowrap; }
.ows-rack-desc { grid-column: 1 / -1; font-size: 0.8125rem; color: #dbeafe; }
.ows-auth-note { margin: 1rem 0 0; font-size: 0.8125rem; color: #dbeafe; }

/* ── 46. CART — Buttons ─────────────────────────────────────────────────────
   Continue and Complete Order come from the standard_cart order form with a
   circled arrow. Swapping the glyph here matches the plain arrow on Checkout in
   both themes, without editing the order form. \f061 is Font Awesome arrow-right.
   The two checkout account toggles copy .ows-btn-primary (Order Now); the IDs
   and !important beat the dark theme's !important .btn-info and .btn-warning. */
#order-standard_cart .btn .fa-arrow-circle-right::before { content: "\f061"; }

#order-standard_cart #btnAlreadyRegistered,
#order-standard_cart #btnNewUserSignup {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  color: var(--ows-white) !important;
  background: linear-gradient(135deg, var(--ows-brand-600), var(--ows-brand-500)) !important;
  border-color: transparent !important;
  border-radius: var(--ows-r-sm);
  box-shadow: 0 2px 8px rgba(31,71,235,.3);
  transition: all var(--ows-transition);
}
#order-standard_cart #btnAlreadyRegistered:hover,
#order-standard_cart #btnNewUserSignup:hover {
  background: linear-gradient(135deg, var(--ows-brand-700), var(--ows-brand-600)) !important;
  box-shadow: 0 4px 16px rgba(31,71,235,.4);
  transform: translateY(-1px);
}