@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@600;700;800;900&display=swap');

/* =============================================================================
   MINDIX CLIENT PORTAL — custom.css
   -----------------------------------------------------------------------------
   Theme:     Mindix (child of twenty-one)
   Version:   1.1  — Phase 1 correction pass
   Bootstrap: 4.x
   -----------------------------------------------------------------------------
   CHANGELOG v1.0 → v1.1  (driven by rendered-page review)

   FIXED  § 03  Page background rendered Twenty-One grey, not Mindix cloud.
                Wrapper fills are now neutralised explicitly.
   FIXED  § 04  Header rendered as TWO detached pills. Twenty-One ships two
                stacked navbars; v1.0 styled each one as its own pill. Both are
                now merged into a single floating panel.
   NEW    § 04c Utility bar: knowledgebase search + cart button styling.
   FIXED  § 05  Sidebar "ACTIONS" collapse affordance.
   FIXED  § 06  Footer gradient was too aggressive at wide/short aspect ratios.
   FIXED  § 08  Input-group addons rendered as detached boxes on Login.
   FIXED  § 13  Tab underline sat under the wrong item.
   NEW    § 16  WHMCS legacy colour neutralisation — the hardcoded navy table
                headers, orange domain hero and green checkout button that ship
                inside WHMCS's own page templates and ignore theme variables.

   -----------------------------------------------------------------------------
   SECTION INDEX
     § 00  Platform token layer  (portable across Mindix platforms)
     § 01  Reset & base
     § 02  Typography & page titles
     § 03  Layout, containers & background
     § 04  Header, utility bar & primary navigation
     § 05  Sidebars & secondary navigation
     § 06  Footer
     § 07  Buttons
     § 08  Forms
     § 09  Cards & panels
     § 10  Tables
     § 11  Feedback — alerts, badges, labels, progress
     § 12  Overlays — dropdowns, modals, tooltips
     § 13  Navigation primitives — tabs, breadcrumbs, pagination
     § 14  Motion & accessibility
     § 15  Responsive
     § 16  WHMCS legacy colour neutralisation

   -----------------------------------------------------------------------------
   SPECIFICITY POLICY
   custom.css loads after the parent stylesheet, so equal specificity wins.
   Where Bootstrap uses compound selectors this file matches that shape rather
   than reaching for !important.

   § 16 is the exception. WHMCS ships hardcoded hex values inside its own page
   templates (cart, domain checker) that no theme variable reaches. Those rules
   use !important deliberately and are quarantined in their own section so they
   stay auditable rather than scattered through the component layer.
   ============================================================================= */


/* =============================================================================
   § 00  PLATFORM TOKEN LAYER
   -----------------------------------------------------------------------------
   Mirrors assets/css/mindix-design-system.css 1:1. Self-contained by design:
   copy this block into Virtualmin / Paymenter / Proxmox / NPM skins to inherit
   the identity.
   ============================================================================= */

:root {

  /* --- Brand core ------------------------------------------------------- */
  --mx-midnight:      #07111f;
  --mx-navy:          #0f172a;
  --mx-panel:         #162235;
  --mx-slate:         #334155;
  --mx-muted:         #64748b;
  --mx-line:          #d8e2ef;
  --mx-cloud:         #f8fafc;
  --mx-white:         #ffffff;

  --mx-blue:          #2563eb;
  --mx-blue-dark:     #1d4ed8;
  --mx-sky:           #38bdf8;
  --mx-cyan:          #67e8f9;

  /* --- Status ----------------------------------------------------------- */
  --mx-success:       #10b981;
  --mx-warning:       #f59e0b;
  --mx-danger:        #ef4444;
  --mx-info:          #38bdf8;

  --mx-success-soft:  rgba(16, 185, 129, .10);
  --mx-warning-soft:  rgba(245, 158, 11, .12);
  --mx-danger-soft:   rgba(239, 68, 68, .10);
  --mx-info-soft:     rgba(56, 189, 248, .12);
  --mx-blue-soft:     rgba(37, 99, 235, .08);

  /* --- Gradients -------------------------------------------------------- */
  --mx-gradient-primary: linear-gradient(135deg, var(--mx-blue) 0%, var(--mx-sky) 100%);

  /* Full-strength dark gradient — for tall surfaces (hero blocks, panels). */
  --mx-gradient-dark:
      radial-gradient(circle at top right, rgba(37, 99, 235, .35), transparent 38%),
      linear-gradient(135deg, #07111f 0%, #0f172a 60%, #102a4d 100%);

  /* Wide/short variant — the footer is ~1900x250, where the radial above
     lands as a hard blue blob. Same hues, gentler falloff. */
  --mx-gradient-dark-wide:
      radial-gradient(120% 260% at 88% 0%, rgba(37, 99, 235, .30), transparent 55%),
      linear-gradient(100deg, #07111f 0%, #0d1a2e 55%, #12233d 100%);

  /* --- Typography ------------------------------------------------------- */
  --mx-font-body:     Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mx-font-display:  Manrope, Inter, system-ui, sans-serif;
  --mx-font-mono:     "SFMono-Regular", ui-monospace, "JetBrains Mono", Consolas, monospace;

  --mx-tracking-tight: -.055em;
  --mx-tracking-wide:  .22em;

  /* --- Radii ------------------------------------------------------------ */
  --mx-radius-xs:     10px;
  --mx-radius-sm:     14px;
  --mx-radius-md:     20px;
  --mx-radius-lg:     28px;
  --mx-radius-pill:   999px;

  /* --- Spacing ---------------------------------------------------------- */
  --mx-space-xs:      8px;
  --mx-space-s:       16px;
  --mx-space-m:       24px;
  --mx-space-l:       40px;
  --mx-space-xl:      72px;
  --mx-space-xxl:     112px;

  /* --- Elevation -------------------------------------------------------- */
  --mx-shadow-xs:     0 1px 2px rgba(15, 23, 42, .06);
  --mx-shadow-sm:     0 8px 24px rgba(15, 23, 42, .06);
  --mx-shadow-soft:   0 24px 70px rgba(15, 23, 42, .08);
  --mx-shadow-blue:   0 20px 70px rgba(37, 99, 235, .24);
  --mx-shadow-lift:   0 28px 80px rgba(37, 99, 235, .12);

  /* --- Motion ----------------------------------------------------------- */
  --mx-ease-out:      cubic-bezier(.16, 1, .3, 1);
  --mx-ease-soft:     cubic-bezier(.22, .61, .36, 1);
  --mx-motion-fast:   180ms;
  --mx-motion-med:    320ms;

  /* --- Layout ----------------------------------------------------------- */
  --mx-container:     1240px;
  --mx-header-gap:    16px;

  /* --- Focus ------------------------------------------------------------ */
  --mx-focus:         #38bdf8;
  --mx-focus-ring:    0 0 0 4px rgba(56, 189, 248, .28);

  /* --- Semantic aliases ------------------------------------------------- */
  --mx-bg:            var(--mx-cloud);
  --mx-surface:       var(--mx-white);
  --mx-surface-alt:   var(--mx-cloud);
  --mx-border:        var(--mx-line);
  --mx-text:          var(--mx-navy);
  --mx-text-muted:    var(--mx-muted);
  --mx-accent:        var(--mx-blue);
}

/* Dark-mode scaffold — inert until data-mx-mode="dark" is set on <html>. */
[data-mx-mode="dark"] {
  --mx-bg:            var(--mx-midnight);
  --mx-surface:       var(--mx-panel);
  --mx-surface-alt:   var(--mx-navy);
  --mx-border:        rgba(255, 255, 255, .14);
  --mx-text:          var(--mx-white);
  --mx-text-muted:    #94a3b8;
}


/* =============================================================================
   § 01  RESET & BASE
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 140px;
  background: var(--mx-bg);
}

body {
  color: var(--mx-text);
  font-family: var(--mx-font-body);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

a {
  color: var(--mx-accent);
  text-decoration: none;
  transition: color var(--mx-motion-fast) var(--mx-ease-soft);
}

a:hover,
a:focus {
  color: var(--mx-blue-dark);
  text-decoration: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--mx-border);
  margin: var(--mx-space-m) 0;
}

::selection {
  background: rgba(37, 99, 235, .18);
  color: var(--mx-navy);
}

code,
kbd,
pre,
samp {
  font-family: var(--mx-font-mono);
  font-size: .875em;
}

code {
  background: var(--mx-blue-soft);
  color: var(--mx-blue-dark);
  padding: .15em .45em;
  border-radius: 6px;
}


/* =============================================================================
   § 02  TYPOGRAPHY & PAGE TITLES
   ============================================================================= */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--mx-font-display);
  color: var(--mx-text);
  letter-spacing: var(--mx-tracking-tight);
  line-height: 1.15;
  margin: 0 0 var(--mx-space-s);
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(1.85rem, 2.6vw, 2.35rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.45rem, 2vw, 1.75rem);   font-weight: 800; }
h3, .h3 { font-size: 1.25rem;                        font-weight: 800; }
h4, .h4 { font-size: 1.0625rem;                      font-weight: 800; letter-spacing: -.03em; }
h5, .h5 { font-size: .9375rem;                       font-weight: 800; letter-spacing: -.02em; }
h6, .h6 { font-size: .8125rem;                       font-weight: 800; letter-spacing: -.01em; }

p { margin: 0 0 var(--mx-space-s); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

small, .small {
  font-size: .8125rem;
  color: var(--mx-text-muted);
}

.text-muted { color: var(--mx-text-muted) !important; }  /* BS sets !important */

strong, b { font-weight: 700; }

.mx-eyebrow {
  display: inline-block;
  color: var(--mx-blue);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: var(--mx-tracking-wide);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* --- Page title band ------------------------------------------------------
   FIX v1.1: Twenty-One wraps the page title / breadcrumb in a full-bleed
   grey strip that sat flush against the viewport edge, breaking the container
   rhythm. Strip the fill, align it to the grid, mute it. */
.header-lined,
#header-bar,
.page-header,
.breadcrumb-wrapper,
.station-header,
#main-body > .container-fluid:first-child {
  background: transparent !important;   /* Twenty-One paints this inline-level */
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 var(--mx-space-m);
}

.header-lined h1,
.header-lined h2,
.page-header h1 {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 0;
}

/* Gradient underline — quiet brand cue on every page title. */
.header-lined h1::after,
.header-lined h2::after,
.page-header h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: var(--mx-radius-pill);
  background: var(--mx-gradient-primary);
}


/* =============================================================================
   § 03  LAYOUT, CONTAINERS & BACKGROUND
   -----------------------------------------------------------------------------
   FIX v1.1: the portal rendered on Twenty-One's #efefef grey rather than the
   Mindix cloud (#f8fafc). The fill lives on section wrappers, not on body, so
   setting body alone had no effect.
   ============================================================================= */

body,
#main-body,
.main-content,
section.main-content,
#main-body > section,
.container-fluid.main-content {
  background-color: var(--mx-bg);
  background-image: none;
}

.container,
.container-fluid {
  width: min(var(--mx-container), calc(100% - 36px));
  max-width: none;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}

.row {
  margin-left: -12px;
  margin-right: -12px;
}

.row > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}

#main-body {
  padding-top: var(--mx-space-l);
  padding-bottom: var(--mx-space-xl);
  min-height: 55vh;
}


/* =============================================================================
   § 04  HEADER, UTILITY BAR & PRIMARY NAVIGATION
   -----------------------------------------------------------------------------
   FIX v1.1 — the important one.

   Twenty-One ships TWO stacked navbars inside #header:
     row 1 — brand · knowledgebase search · cart
     row 2 — Home · Store · More · Account
   v1.0 styled `.navbar` as a pill, so both rendered as separate floating
   lozenges with a visible gap. They now share a single floating panel with a
   hairline divider between rows, which is how the marketing header reads.

   Radius is 28px rather than a full pill: a two-row panel at 999px radius
   bows inward and clips the outer nav items.
   ============================================================================= */

#header,
header#header {
  position: sticky;
  top: var(--mx-header-gap);
  z-index: 1030;

  /* The panel itself now lives on #header, not on .navbar. */
  width: min(var(--mx-container), calc(100% - 36px));
  margin: 0 auto var(--mx-space-m);
  border: 1px solid rgba(203, 213, 225, .80);
  border-radius: var(--mx-radius-lg);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 55px rgba(15, 23, 42, .12);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  overflow: visible;             /* dropdowns must escape the panel */
  transition:
    background var(--mx-motion-med) var(--mx-ease-soft),
    box-shadow var(--mx-motion-med) var(--mx-ease-soft),
    border-color var(--mx-motion-med) var(--mx-ease-soft);
}

/* Inner containers must not re-constrain width inside the panel. */
#header .container,
#header .container-fluid {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Both navbars become transparent rows within the shared panel. */
#header .navbar,
#header nav.navbar {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 8px 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hairline between rows. Written to work whether the navbars are direct
   siblings or each wrapped in its own container div. */
#header .navbar {
  border-top: 1px solid rgba(216, 226, 239, .75);
}

#header .navbar:first-child,
#header > *:first-child .navbar,
#header > .navbar:first-of-type {
  border-top: 0;
}

/* --- Brand ---------------------------------------------------------------
   Logo is uploaded in WHMCS admin (System Settings > General > Logo), not in
   the theme editor. These rules size whatever is set. If no image is set,
   WHMCS falls back to the company name as text — styled below to match. */
.navbar-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-right: var(--mx-space-m);
  font-family: var(--mx-font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: var(--mx-tracking-tight);
  color: var(--mx-navy);
}

.navbar-brand:hover {
  color: var(--mx-navy);
}

.navbar-brand img,
.navbar-brand .logo {
  width: auto;
  height: 30px;
  max-height: 30px;
  display: block;
  transition: transform var(--mx-motion-fast) var(--mx-ease-out);
}

.navbar-brand:hover img {
  transform: scale(1.02);
}

/* --- Nav links ------------------------------------------------------------ */
.navbar-nav {
  align-items: center;
  gap: 4px;
}

.navbar .nav-link,
.navbar-nav > li > a,
.navbar .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--mx-radius-pill);
  background: transparent;
  color: var(--mx-slate);
  font-family: var(--mx-font-body);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition:
    background var(--mx-motion-fast) var(--mx-ease-soft),
    color var(--mx-motion-fast) var(--mx-ease-soft);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar-nav > li > a:hover,
.navbar-nav > .active > a,
.navbar-nav > li.active > a,
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active {
  color: var(--mx-navy);
  background: var(--mx-blue-soft);
}

.navbar-nav > .active > a,
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active {
  font-weight: 900;
}

/* Caret — stroked chevron rather than Bootstrap's solid triangle. */
.navbar .dropdown-toggle::after {
  border: 0;
  width: 7px;
  height: 7px;
  margin-left: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--mx-motion-fast) var(--mx-ease-soft);
  vertical-align: middle;
  opacity: .6;
}

.navbar .show > .dropdown-toggle::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  opacity: 1;
}

/* --- § 04c  Utility bar: search + cart ------------------------------------
   NEW v1.1. Row 1 of the header carries the knowledgebase search and the cart
   button. Both were unstyled. */

#header .navbar form,
#header .navbar .form-inline,
#header .navbar .input-group {
  margin: 0;
}

/* Search field — recessed rather than raised, so it sits *inside* the panel
   instead of competing with it. */
#header input[type="search"],
#header input[type="text"],
#header .form-control {
  min-height: 38px;
  min-width: 260px;
  padding: 0 14px 0 38px;
  background: rgba(241, 245, 249, .85);
  border: 1px solid transparent;
  border-radius: var(--mx-radius-pill);
  font-size: 13.5px;
  font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.75' stroke='%2394a3b8' stroke-width='1.6'/%3E%3Cpath d='M10.6 10.6L14 14' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
}

#header input[type="search"]:focus,
#header .form-control:focus {
  background-color: var(--mx-white);
  border-color: var(--mx-sky);
  box-shadow: var(--mx-focus-ring);
}

/* Hide the duplicated submit icon that sits inside the search input group. */
#header .input-group-prepend,
#header .input-group-append,
#header .input-group-text {
  display: none;
}

/* Cart button — pill, brand-tinted, with the item count as a badge. */
#header .cart-button,
#header a[href*="cart.php"],
#header .navbar-nav .nav-link[href*="cart.php"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(37, 99, 235, .28);
  border-radius: var(--mx-radius-pill);
  background: var(--mx-blue-soft);
  color: var(--mx-blue-dark);
  font-size: 13px;
  font-weight: 800;
}

#header .cart-button:hover,
#header a[href*="cart.php"]:hover {
  background: rgba(37, 99, 235, .14);
  border-color: rgba(37, 99, 235, .45);
  color: var(--mx-blue-dark);
}

/* --- Mobile toggle -------------------------------------------------------- */
.navbar-toggler {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-pill);
  background: var(--mx-white);
  color: var(--mx-navy);
  transition: background var(--mx-motion-fast) var(--mx-ease-soft);
}

.navbar-toggler:hover { background: var(--mx-blue-soft); }

.navbar-toggler:focus {
  outline: 0;
  box-shadow: var(--mx-focus-ring);
}


/* =============================================================================
   § 05  SIDEBARS & SECONDARY NAVIGATION
   ============================================================================= */

.sidebar,
#secondary-sidebar {
  margin-bottom: var(--mx-space-m);
}

.panel-sidebar,
.sidebar .panel,
.sidebar .card {
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  background: var(--mx-surface);
  box-shadow: var(--mx-shadow-sm);
  overflow: hidden;
}

.panel-sidebar .panel-heading,
.sidebar .card-header {
  padding: 16px 20px 10px;
  background: transparent;
  border: 0;
  font-family: var(--mx-font-display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: var(--mx-tracking-wide);
  text-transform: uppercase;
  color: var(--mx-text-muted);
}

/* FIX v1.1: the collapse "+" / caret rendered as loose glyphs either side of
   the label. Mute the leading icon, keep the caret as the single affordance. */
.panel-sidebar .panel-heading > i:first-child,
.panel-sidebar .panel-heading .fa-plus {
  display: none;
}

.panel-sidebar .panel-heading .caret,
.panel-sidebar .panel-heading .fa-chevron-up,
.panel-sidebar .panel-heading .fa-chevron-down {
  margin-left: auto;
  font-size: 11px;
  color: var(--mx-text-muted);
  transition: transform var(--mx-motion-fast) var(--mx-ease-soft);
}

.panel-sidebar .list-group,
.sidebar .list-group {
  border: 0;
  padding: 0 10px 12px;
}

.list-group-item {
  display: flex;
  align-items: center;
  border: 0;
  border-radius: var(--mx-radius-sm);
  padding: 10px 14px;
  background: transparent;
  color: var(--mx-slate);
  font-size: 14px;
  font-weight: 600;
  transition:
    background var(--mx-motion-fast) var(--mx-ease-soft),
    color var(--mx-motion-fast) var(--mx-ease-soft);
}

.list-group-item:hover {
  background: var(--mx-blue-soft);
  color: var(--mx-navy);
}

.list-group-item.active,
.list-group-item.active:hover {
  background: var(--mx-blue-soft);
  color: var(--mx-blue-dark);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--mx-blue);
}

.list-group-item i,
.list-group-item .fa,
.list-group-item .fas {
  width: 18px;
  margin-right: 10px;
  font-size: 13px;
  color: var(--mx-text-muted);
  transition: color var(--mx-motion-fast) var(--mx-ease-soft);
}

.list-group-item:hover i,
.list-group-item.active i {
  color: var(--mx-blue);
}


/* =============================================================================
   § 06  FOOTER
   -----------------------------------------------------------------------------
   FIX v1.1: the radial highlight in --mx-gradient-dark is tuned for tall hero
   sections. At footer proportions (~1900x250) it landed as a hard blue blob on
   the right. Switched to the wide variant — same hues, gentler falloff.
   ============================================================================= */

#footer,
footer#footer {
  position: relative;
  margin-top: var(--mx-space-xl);
  padding: var(--mx-space-l) 0 var(--mx-space-m);
  background: var(--mx-gradient-dark-wide);
  background-color: var(--mx-midnight);
  border: 0;
  color: rgba(255, 255, 255, .70);
  font-size: 14px;
}

#footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(56, 189, 248, .50) 30%,
    rgba(37, 99, 235, .50) 70%,
    transparent 100%);
}

#footer a {
  color: rgba(255, 255, 255, .76);
  font-weight: 600;
  transition: color var(--mx-motion-fast) var(--mx-ease-soft);
}

#footer a:hover { color: var(--mx-white); }

#footer h1, #footer h2, #footer h3,
#footer h4, #footer h5, #footer h6 {
  color: var(--mx-white);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: var(--mx-tracking-wide);
  text-transform: uppercase;
  margin-bottom: 14px;
}

#footer hr {
  border-top-color: rgba(255, 255, 255, .10);
  margin: var(--mx-space-m) 0;
}

#footer .list-group-item,
#footer ul li a {
  color: rgba(255, 255, 255, .70);
  background: transparent;
  padding-left: 0;
}

#footer .list-group-item:hover {
  background: transparent;
  color: var(--mx-white);
}

/* Copyright line — quiet, centred, hairline separated. */
#footer .copyright,
#footer .text-center:last-child {
  margin-top: var(--mx-space-m);
  padding-top: var(--mx-space-s);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px;
  color: rgba(255, 255, 255, .50);
}

#footer .fa,
#footer .fab,
#footer .fas {
  transition: color var(--mx-motion-fast) var(--mx-ease-soft),
              transform var(--mx-motion-fast) var(--mx-ease-out);
}

#footer a:hover .fa,
#footer a:hover .fab {
  color: var(--mx-sky);
  transform: translateY(-2px);
}

/* WHMCS attribution line.
   NOTE: this is de-emphasised, NOT hidden. Removing it requires a
   branding-free WHMCS licence; hiding it with CSS on a standard licence
   breaks the licence agreement. See notes accompanying this file. */
.powered-by,
#footer .powered-by,
p:has(> a[href*="whmcs.com"]) {
  font-size: 12px;
  color: var(--mx-text-muted);
  opacity: .65;
}


/* =============================================================================
   § 07  BUTTONS
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--mx-radius-pill);
  font-family: var(--mx-font-body);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--mx-motion-fast) var(--mx-ease-out),
    box-shadow var(--mx-motion-fast) var(--mx-ease-soft),
    background var(--mx-motion-fast) var(--mx-ease-soft),
    border-color var(--mx-motion-fast) var(--mx-ease-soft),
    color var(--mx-motion-fast) var(--mx-ease-soft);
}

.btn:not(:disabled):not(.disabled):hover  { transform: translateY(-2px); }
.btn:not(:disabled):not(.disabled):active { transform: translateY(0); }

.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: var(--mx-focus-ring);
}

.btn:disabled,
.btn.disabled {
  opacity: .5;
  transform: none;
  cursor: not-allowed;
}

/* --- Primary -------------------------------------------------------------- */
.btn-primary {
  background: var(--mx-gradient-primary);
  border-color: transparent;
  color: var(--mx-white);
  box-shadow: 0 10px 30px rgba(37, 99, 235, .26);
}

.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background: var(--mx-gradient-primary);
  border-color: transparent;
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-blue);
}

/* --- Secondary / default -------------------------------------------------- */
.btn-secondary,
.btn-default,
.btn-light {
  background: var(--mx-white);
  border-color: var(--mx-border);
  color: var(--mx-navy);
  box-shadow: var(--mx-shadow-xs);
}

.btn-secondary:not(:disabled):not(.disabled):hover,
.btn-default:not(:disabled):not(.disabled):hover,
.btn-light:not(:disabled):not(.disabled):hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-default:not(:disabled):not(.disabled):active {
  background: var(--mx-white);
  border-color: rgba(37, 99, 235, .35);
  color: var(--mx-blue-dark);
  box-shadow: 0 10px 28px rgba(37, 99, 235, .12);
}

/* --- Status variants ------------------------------------------------------ */
.btn-success {
  background: var(--mx-success);
  border-color: transparent;
  color: var(--mx-white);
  box-shadow: 0 10px 28px rgba(16, 185, 129, .24);
}

.btn-warning {
  background: var(--mx-warning);
  border-color: transparent;
  color: var(--mx-navy);
  box-shadow: 0 10px 28px rgba(245, 158, 11, .24);
}

.btn-danger {
  background: var(--mx-danger);
  border-color: transparent;
  color: var(--mx-white);
  box-shadow: 0 10px 28px rgba(239, 68, 68, .24);
}

.btn-info {
  background: var(--mx-sky);
  border-color: transparent;
  color: var(--mx-navy);
  box-shadow: 0 10px 28px rgba(56, 189, 248, .28);
}

.btn-success:not(:disabled):not(.disabled):hover { background: #0ea371; color: var(--mx-white); }
.btn-warning:not(:disabled):not(.disabled):hover { background: #e08c07; color: var(--mx-navy); }
.btn-danger:not(:disabled):not(.disabled):hover  { background: #dc2f2f; color: var(--mx-white); }
.btn-info:not(:disabled):not(.disabled):hover    { background: #22a8e0; color: var(--mx-navy); }

/* --- Outline -------------------------------------------------------------- */
[class*="btn-outline-"] {
  background: transparent;
  box-shadow: none;
}

.btn-outline-primary {
  border-color: rgba(37, 99, 235, .40);
  color: var(--mx-blue);
}

.btn-outline-primary:not(:disabled):not(.disabled):hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background: var(--mx-blue-soft);
  border-color: var(--mx-blue);
  color: var(--mx-blue-dark);
}

.btn-outline-danger {
  border-color: rgba(239, 68, 68, .40);
  color: var(--mx-danger);
}

.btn-outline-danger:not(:disabled):not(.disabled):hover {
  background: var(--mx-danger-soft);
  border-color: var(--mx-danger);
  color: var(--mx-danger);
}

/* --- Link ----------------------------------------------------------------- */
.btn-link {
  min-height: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--mx-blue);
}

.btn-link:not(:disabled):not(.disabled):hover {
  transform: none;
  color: var(--mx-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Sizes ---------------------------------------------------------------- */
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 15px; }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 13px; gap: 6px; }
.btn-block { display: flex; width: 100%; }

.btn .fa,
.btn .fas,
.btn .far,
.btn i {
  font-size: .95em;
  line-height: 1;
}

.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:last-child  { border-top-left-radius: 0;  border-bottom-left-radius: 0;  }


/* =============================================================================
   § 08  FORMS
   ============================================================================= */

label,
.control-label,
.form-group > label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mx-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--mx-slate);
  letter-spacing: -.005em;
}

.form-control,
.form-control-lg,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 46px;
  height: auto;
  padding: 11px 16px;
  background: var(--mx-white);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-sm);
  color: var(--mx-navy);
  font-family: var(--mx-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  box-shadow: none;
  transition:
    border-color var(--mx-motion-fast) var(--mx-ease-soft),
    box-shadow var(--mx-motion-fast) var(--mx-ease-soft),
    background var(--mx-motion-fast) var(--mx-ease-soft);
}

textarea,
textarea.form-control {
  min-height: 120px;
  padding: 14px 16px;
  resize: vertical;
}

.form-control::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.form-control:hover:not(:focus):not(:disabled) {
  border-color: #bccbdf;
}

.form-control:focus,
select:focus,
textarea:focus {
  background: var(--mx-white);
  border-color: var(--mx-sky);
  box-shadow: var(--mx-focus-ring);
  outline: 0;
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--mx-cloud);
  color: var(--mx-text-muted);
  cursor: not-allowed;
}

select,
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

.form-group { margin-bottom: var(--mx-space-s); }

.form-text,
.help-block {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--mx-text-muted);
}

/* --- Validation ----------------------------------------------------------- */
.is-invalid,
.form-control.is-invalid,
.has-error .form-control { border-color: var(--mx-danger); }

.is-invalid:focus,
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, .18); }

.invalid-feedback,
.has-error .help-block {
  color: var(--mx-danger);
  font-size: 12.5px;
  font-weight: 600;
}

.is-valid,
.form-control.is-valid { border-color: var(--mx-success); }

/* --- Checkbox & radio ----------------------------------------------------- */
.form-check {
  padding-left: 28px;
  min-height: 22px;
}

.form-check-input,
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 2px;
  margin-left: -28px;
  padding: 0;
  accent-color: var(--mx-blue);
  cursor: pointer;
}

.form-check-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--mx-slate);
  cursor: pointer;
}

/* --- Input groups ---------------------------------------------------------
   FIX v1.1: on Login, the icon addons rendered as detached bordered squares
   floating beside the field. Addon and field now read as one control. */
.input-group {
  position: relative;
  flex-wrap: nowrap;
}

.input-group > .form-control {
  border-radius: var(--mx-radius-sm);
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

.input-group-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 14px;
  background: var(--mx-white);
  border: 1px solid var(--mx-border);
  color: #94a3b8;
  font-size: 14px;
  font-weight: 600;
}

.input-group > .input-group-prepend > .input-group-text {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--mx-radius-sm);
  border-bottom-left-radius: var(--mx-radius-sm);
}

.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--mx-radius-sm);
  border-bottom-right-radius: var(--mx-radius-sm);
}

/* Focus ring wraps the whole group, not just the input. */
.input-group:focus-within > .form-control,
.input-group:focus-within > .input-group-prepend > .input-group-text,
.input-group:focus-within > .input-group-append > .input-group-text {
  border-color: var(--mx-sky);
}

.input-group:focus-within {
  border-radius: var(--mx-radius-sm);
  box-shadow: var(--mx-focus-ring);
}

.input-group:focus-within > .form-control {
  box-shadow: none;
}

/* Password reveal toggle — icon button, not a bordered slab. */
.input-group-append .btn[type="button"] {
  min-height: 46px;
  background: var(--mx-white);
  border-color: var(--mx-border);
  color: var(--mx-text-muted);
  box-shadow: none;
}

.input-group-append .btn[type="button"]:not(:disabled):hover {
  transform: none;
  color: var(--mx-blue);
  background: var(--mx-white);
}

/* --- Fieldsets ------------------------------------------------------------ */
fieldset legend,
.form-section-title {
  font-family: var(--mx-font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: var(--mx-tracking-tight);
  color: var(--mx-navy);
  border: 0;
  padding-bottom: 10px;
  margin-bottom: var(--mx-space-s);
  border-bottom: 1px solid var(--mx-border);
}


/* =============================================================================
   § 09  CARDS & PANELS
   ============================================================================= */

.card,
.panel {
  position: relative;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  box-shadow: var(--mx-shadow-sm);
  margin-bottom: var(--mx-space-m);
  overflow: hidden;
  transition:
    transform var(--mx-motion-med) var(--mx-ease-out),
    border-color var(--mx-motion-med) var(--mx-ease-soft),
    box-shadow var(--mx-motion-med) var(--mx-ease-soft);
}

/* Lift only where the card is genuinely clickable. */
a > .card:hover,
.card.is-clickable:hover,
.card[onclick]:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, .35);
  box-shadow: var(--mx-shadow-lift);
}

.card-header,
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-space-s);
  flex-wrap: wrap;
  padding: 20px 28px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mx-border);
  font-family: var(--mx-font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--mx-navy);
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5,
.panel-heading h1, .panel-heading h2, .panel-heading h3,
.panel-heading h4, .panel-heading .panel-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.card-body,
.panel-body { padding: 28px; }

.card-footer,
.panel-footer {
  padding: 18px 28px;
  background: var(--mx-cloud);
  border: 0;
  border-top: 1px solid var(--mx-border);
}

.card > .table:last-child,
.card > .table-responsive:last-child,
.panel > .table:last-child { margin-bottom: 0; }

.panel-primary,
.card.border-primary { border-color: rgba(37, 99, 235, .30); }

.panel-primary > .panel-heading,
.card.border-primary > .card-header {
  color: var(--mx-blue-dark);
  background: var(--mx-blue-soft);
  border-bottom-color: rgba(37, 99, 235, .18);
}

.mx-card-dark {
  background: var(--mx-gradient-dark);
  background-color: var(--mx-navy);
  border-color: rgba(255, 255, 255, .14);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-blue);
}

.mx-card-dark .card-header,
.mx-card-dark .panel-heading {
  color: var(--mx-white);
  border-bottom-color: rgba(255, 255, 255, .14);
}

.well,
.jumbotron {
  padding: 28px;
  background: var(--mx-cloud);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  box-shadow: none;
}


/* =============================================================================
   § 10  TABLES
   ============================================================================= */

.table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--mx-slate);
  font-size: 14px;
}

.table thead th {
  padding: 14px 20px;
  background: var(--mx-cloud);
  border: 0;
  border-bottom: 1px solid var(--mx-border);
  font-family: var(--mx-font-body);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mx-text-muted);
  white-space: nowrap;
  vertical-align: middle;
}

.table tbody td {
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid rgba(216, 226, 239, .70);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }

.table tbody tr { transition: background var(--mx-motion-fast) var(--mx-ease-soft); }

.table-hover tbody tr:hover,
.table tbody tr:hover { background: rgba(37, 99, 235, .04); }

/* Hover is the affordance; stripes add noise to long service lists. */
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }

.card > .table-responsive > .table > * > tr > *:first-child,
.card > .table > * > tr > *:first-child { padding-left: 28px; }
.card > .table-responsive > .table > * > tr > *:last-child,
.card > .table > * > tr > *:last-child  { padding-right: 28px; }

.table-responsive {
  border: 0;
  -webkit-overflow-scrolling: touch;
}

.table-list td a,
.table td a { font-weight: 700; }


/* =============================================================================
   § 11  FEEDBACK — ALERTS, BADGES, LABELS, PROGRESS
   ============================================================================= */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: var(--mx-radius-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  margin-bottom: var(--mx-space-s);
}

.alert-info,
.alert-primary {
  background: var(--mx-info-soft);
  border-color: rgba(56, 189, 248, .30);
  color: #0c5a7a;
}

.alert-success {
  background: var(--mx-success-soft);
  border-color: rgba(16, 185, 129, .28);
  color: #06724f;
}

.alert-warning {
  background: var(--mx-warning-soft);
  border-color: rgba(245, 158, 11, .30);
  color: #92600a;
}

.alert-danger {
  background: var(--mx-danger-soft);
  border-color: rgba(239, 68, 68, .28);
  color: #a52020;
}

.alert a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}

.alert .close {
  margin-left: auto;
  opacity: .5;
  font-size: 20px;
  text-shadow: none;
  transition: opacity var(--mx-motion-fast) var(--mx-ease-soft);
}

.alert .close:hover { opacity: 1; }

/* --- Badges & status labels ----------------------------------------------- */
.badge,
.label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: var(--mx-radius-pill);
  font-family: var(--mx-font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.badge-success, .label-success,
.status-active, .status-Active {
  background: var(--mx-success-soft);
  border-color: rgba(16, 185, 129, .30);
  color: #06724f;
}

.badge-warning, .label-warning,
.status-pending, .status-Pending {
  background: var(--mx-warning-soft);
  border-color: rgba(245, 158, 11, .32);
  color: #92600a;
}

.badge-danger, .label-danger,
.status-suspended, .status-Suspended,
.status-cancelled, .status-Cancelled,
.status-overdue {
  background: var(--mx-danger-soft);
  border-color: rgba(239, 68, 68, .30);
  color: #a52020;
}

.badge-info, .label-info,
.badge-primary, .label-primary {
  background: var(--mx-info-soft);
  border-color: rgba(56, 189, 248, .32);
  color: #0c5a7a;
}

.badge-secondary, .label-default,
.badge-light {
  background: var(--mx-cloud);
  border-color: var(--mx-border);
  color: var(--mx-text-muted);
}

/* Leading dot gives status a glanceable shape, so state doesn't rely on hue
   alone — this is what keeps it readable for colour-blind users. */
[class*="badge-"]::before,
[class*="label-"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}

/* --- Progress ------------------------------------------------------------- */
.progress {
  height: 8px;
  background: var(--mx-cloud);
  border-radius: var(--mx-radius-pill);
  box-shadow: none;
  overflow: hidden;
}

.progress-bar {
  background: var(--mx-gradient-primary);
  border-radius: var(--mx-radius-pill);
  transition: width var(--mx-motion-med) var(--mx-ease-out);
}

.progress-bar.bg-warning { background: var(--mx-warning); }
.progress-bar.bg-danger  { background: var(--mx-danger); }
.progress-bar.bg-success { background: var(--mx-success); }


/* =============================================================================
   § 12  OVERLAYS — DROPDOWNS, MODALS, TOOLTIPS
   ============================================================================= */

.dropdown-menu {
  margin-top: 10px;
  padding: 8px;
  min-width: 220px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-md);
  box-shadow: var(--mx-shadow-soft);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  animation: mxDropIn var(--mx-motion-fast) var(--mx-ease-out);
}

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

.dropdown-item {
  padding: 10px 14px;
  border-radius: var(--mx-radius-xs);
  color: var(--mx-slate);
  font-size: 14px;
  font-weight: 600;
  transition:
    background var(--mx-motion-fast) var(--mx-ease-soft),
    color var(--mx-motion-fast) var(--mx-ease-soft);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--mx-blue-soft);
  color: var(--mx-navy);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--mx-blue-soft);
  color: var(--mx-blue-dark);
  font-weight: 800;
}

.dropdown-divider {
  margin: 6px 4px;
  border-top-color: var(--mx-border);
}

.dropdown-header {
  padding: 10px 14px 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: var(--mx-tracking-wide);
  text-transform: uppercase;
  color: var(--mx-text-muted);
}

/* --- Modals --------------------------------------------------------------- */
.modal-content {
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  box-shadow: var(--mx-shadow-soft);
  overflow: hidden;
}

.modal-header {
  padding: 22px 28px;
  background: transparent;
  border-bottom: 1px solid var(--mx-border);
}

.modal-title {
  font-family: var(--mx-font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: var(--mx-tracking-tight);
}

.modal-body { padding: 28px; }

.modal-footer {
  padding: 18px 28px;
  gap: 10px;
  background: var(--mx-cloud);
  border-top: 1px solid var(--mx-border);
}

.modal-backdrop.show {
  background: rgba(7, 17, 31, .55);
  opacity: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* --- Tooltips & popovers -------------------------------------------------- */
.tooltip-inner {
  padding: 8px 12px;
  background: var(--mx-navy);
  border-radius: var(--mx-radius-xs);
  font-size: 12.5px;
  font-weight: 600;
}

.popover {
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-md);
  box-shadow: var(--mx-shadow-soft);
  font-family: var(--mx-font-body);
}


/* =============================================================================
   § 13  NAVIGATION PRIMITIVES — TABS, BREADCRUMBS, PAGINATION
   -----------------------------------------------------------------------------
   FIX v1.1: on the domain pricing table the active underline sat under the
   wrong item, because WHMCS applies `.active` to the <li>, not the <a>. Both
   are now covered.
   ============================================================================= */

.nav-tabs {
  gap: 4px;
  border-bottom: 1px solid var(--mx-border);
  margin-bottom: var(--mx-space-m);
  flex-wrap: wrap;
}

.nav-tabs .nav-link,
.nav-tabs > li > a {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--mx-text-muted);
  font-size: 14px;
  font-weight: 700;
  transition:
    color var(--mx-motion-fast) var(--mx-ease-soft),
    border-color var(--mx-motion-fast) var(--mx-ease-soft);
}

.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover {
  border-color: transparent;
  color: var(--mx-navy);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs > li.active > a {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--mx-blue);
  color: var(--mx-blue-dark);
  font-weight: 800;
}

.nav-pills .nav-link {
  border-radius: var(--mx-radius-pill);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mx-slate);
}

.nav-pills .nav-link.active {
  background: var(--mx-blue-soft);
  color: var(--mx-blue-dark);
}

/* --- Breadcrumbs ---------------------------------------------------------- */
.breadcrumb {
  padding: 0;
  margin-bottom: var(--mx-space-s);
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
}

.breadcrumb-item,
.breadcrumb-item a { color: var(--mx-text-muted); }

.breadcrumb-item a:hover { color: var(--mx-blue); }

.breadcrumb-item.active {
  color: var(--mx-slate);
  font-weight: 700;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: #cbd5e1;
}

/* --- Pagination ----------------------------------------------------------- */
.pagination { gap: 6px; }

.page-link {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-sm);
  background: var(--mx-white);
  color: var(--mx-slate);
  font-size: 13.5px;
  font-weight: 700;
  transition:
    background var(--mx-motion-fast) var(--mx-ease-soft),
    border-color var(--mx-motion-fast) var(--mx-ease-soft),
    color var(--mx-motion-fast) var(--mx-ease-soft);
}

.page-link:hover {
  background: var(--mx-blue-soft);
  border-color: rgba(37, 99, 235, .30);
  color: var(--mx-blue-dark);
}

.page-item.active .page-link {
  background: var(--mx-gradient-primary);
  border-color: transparent;
  color: var(--mx-white);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .26);
}

.page-item.disabled .page-link {
  background: var(--mx-cloud);
  color: #cbd5e1;
}


/* =============================================================================
   § 14  MOTION & ACCESSIBILITY
   ============================================================================= */

:focus-visible {
  outline: 3px solid rgba(56, 189, 248, .55);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) { outline: 0; }

.mx-skip-link {
  position: absolute;
  top: -100px;
  left: 18px;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--mx-navy);
  color: var(--mx-white);
  border-radius: var(--mx-radius-sm);
  font-weight: 800;
  transition: top var(--mx-motion-fast) var(--mx-ease-out);
}

.mx-skip-link:focus { top: 18px; color: var(--mx-white); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .btn:not(:disabled):not(.disabled):hover,
  .card:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --mx-border:     #94a3b8;
    --mx-text-muted: #475569;
  }
}


/* =============================================================================
   § 15  RESPONSIVE
   ============================================================================= */

@media (max-width: 1280px) {
  :root { --mx-container: 1140px; }
}

@media (max-width: 1080px) {
  .navbar .nav-link,
  .navbar-nav > li > a {
    padding: 0 11px;
    font-size: 13.5px;
  }

  #header input[type="search"],
  #header .form-control { min-width: 200px; }
}

@media (max-width: 991.98px) {
  #header .navbar,
  #header nav.navbar { padding: 10px 16px; }

  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    margin-top: 10px;
    padding: 8px 0 4px;
    border-top: 1px solid var(--mx-border);
  }

  .navbar-collapse.show .nav-link {
    width: 100%;
    justify-content: flex-start;
    min-height: 46px;
    border-radius: var(--mx-radius-sm);
  }

  .card-body,
  .panel-body,
  .modal-body { padding: 22px; }

  .card-header,
  .panel-heading { padding: 18px 22px; }

  .card > .table > * > tr > *:first-child { padding-left: 22px; }
  .card > .table > * > tr > *:last-child  { padding-right: 22px; }

  #main-body {
    padding-top: var(--mx-space-m);
    padding-bottom: var(--mx-space-l);
  }
}

@media (max-width: 767.98px) {
  body { font-size: 14.5px; }

  .container,
  .container-fluid { width: calc(100% - 28px); }

  #header {
    top: 10px;
    width: calc(100% - 20px);
    border-radius: var(--mx-radius-md);
  }

  #header input[type="search"],
  #header .form-control { min-width: 0; width: 100%; }

  .card,
  .panel { border-radius: var(--mx-radius-md); }

  .card-body,
  .panel-body { padding: 20px; }

  .card-header,
  .panel-heading {
    padding: 16px 20px;
    font-size: .95rem;
  }

  .card > .table > * > tr > *:first-child { padding-left: 20px; }
  .card > .table > * > tr > *:last-child  { padding-right: 20px; }

  /* Thumbs, not cursors. */
  .card-footer .btn,
  .modal-footer .btn { width: 100%; }

  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { margin: 0; }

  .table { font-size: 13.5px; }

  .table thead th,
  .table tbody td { padding: 12px 14px; }
}

@media (max-width: 480px) {
  .navbar-brand img,
  .navbar-brand .logo { height: 26px; }

  .navbar-brand { font-size: 1rem; }

  .btn { font-size: 13.5px; }

  h1, .h1 { font-size: 1.6rem; }
  h2, .h2 { font-size: 1.35rem; }
}


/* =============================================================================
   § 16  WHMCS LEGACY COLOUR NEUTRALISATION
   -----------------------------------------------------------------------------
   NEW in v1.1.

   WHMCS ships hardcoded colours inside its own page templates — the cart, the
   domain checker and the order summary all carry inline or high-specificity
   hex values that no theme variable reaches. Left alone they produce the
   #1a5490 table headers, the orange domain hero and the #5cb85c checkout
   button visible in the current build.

   These are quarantined here, deliberately using !important, so that:
     (a) the component layer above stays clean and variable-driven, and
     (b) every hostile override in the codebase is auditable in one place.

   CONFIDENCE NOTE: selectors marked [VERIFY] are inferred from WHMCS's stock
   markup and need confirming against your rendered HTML.
   ============================================================================= */

/* --- Cart: dark blue table headers ---------------------------------------- */
#order-standard_cart .table thead th,     /* [VERIFY] */
#products .table thead th,
.cart-body .table thead th,
#order-standard_cart thead tr {
  background: var(--mx-cloud) !important;
  color: var(--mx-text-muted) !important;
  border-bottom: 1px solid var(--mx-border) !important;
  text-shadow: none !important;
}

/* --- Cart: order summary panel -------------------------------------------- */
#order-standard_cart .summary-container,  /* [VERIFY] */
#orderSummary,
.order-summary,
.summary-container {
  background: var(--mx-surface) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-lg) !important;
  box-shadow: var(--mx-shadow-sm) !important;
  overflow: hidden;
}

#orderSummary .summary-header,
.order-summary .header,
.summary-container > h2,
.summary-container > .panel-heading {
  background: var(--mx-cloud) !important;
  color: var(--mx-navy) !important;
  border-bottom: 1px solid var(--mx-border) !important;
  font-family: var(--mx-font-display);
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: var(--mx-tracking-wide);
  text-transform: uppercase;
  padding: 16px 20px !important;
  text-align: left !important;
}

/* Total figure gets the display face and real weight — it is the single most
   important number on the page. */
#orderSummary .total,
.summary-container .total-due,
.order-summary .total {
  font-family: var(--mx-font-display);
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: var(--mx-tracking-tight);
  color: var(--mx-navy) !important;
}

/* --- Cart: green checkout button ------------------------------------------ */
#btnCompleteOrder,
#checkout,
.checkout-button,
a[href*="checkout"].btn-success,
.btn-checkout {
  background: var(--mx-gradient-primary) !important;
  border-color: transparent !important;
  color: var(--mx-white) !important;
  box-shadow: 0 10px 30px rgba(37, 99, 235, .26) !important;
}

/* --- Domain checker: orange hero ------------------------------------------ */
#domain-selection-container,                /* [VERIFY] */
.domain-checker-container,
#domainSearchHero,
.domain-search-hero,
#order-standard_cart .domain-search {
  background: var(--mx-gradient-dark) !important;
  background-color: var(--mx-navy) !important;
  border: 0 !important;
  border-radius: var(--mx-radius-lg) !important;
  box-shadow: var(--mx-shadow-blue);
  overflow: hidden;
}

.domain-checker-container h1,
.domain-checker-container h2,
.domain-search-hero h1,
#domain-selection-container h2 {
  color: var(--mx-white) !important;
}

/* The stock hero ships a yellow globe illustration. Suppress it rather than
   tint it — a yellow globe cannot be recoloured to brand via CSS. */
#domain-selection-container::before,
.domain-checker-container > img,
.domain-search-hero > .globe,
.domain-checker-container [class*="globe"] {
  display: none !important;
}

/* --- Domain checker: orange CTA buttons ----------------------------------- */
.domain-checker-container .btn-warning,
#order-standard_cart .btn-warning,
a.btn[style*="orange"],
a.btn[style*="#f0ad4e"] {
  background: var(--mx-gradient-primary) !important;
  color: var(--mx-white) !important;
  border-color: transparent !important;
}

/* --- Captcha block --------------------------------------------------------
   Stock captcha markup is centre-aligned and unstyled, breaking the left grid
   of every form it appears in. Contained and left-aligned. */
.captcha-container,
#captchaOuter,
.recaptcha-container,
div:has(> img[src*="captcha"]) {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px;
  margin: var(--mx-space-s) 0;
  background: var(--mx-cloud);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-sm);
  text-align: left !important;
}

img[src*="captcha"] {
  border-radius: 8px;
  flex: 0 0 auto;
}

.captcha-container input[type="text"],
div:has(> img[src*="captcha"]) input[type="text"] {
  width: auto;
  min-width: 140px;
  flex: 0 1 auto;
}

/* Captcha instruction copy — muted, small, not a wall of centred blue text. */
.captcha-container p,
div:has(> img[src*="captcha"]) > p {
  flex: 1 1 100%;
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--mx-text-muted);
  text-align: left;
}

/* =============================================================================
   END v1.1
   ============================================================================= */