/* =============================================================================
   Maxinodes brand layer — loads LAST (after all.min.css + theme.min.css), so
   these rules win on equal specificity. Parent theme: Twenty-One (Bootstrap 4.5.3).

   theme.css does NOT theme via CSS variables (the brand blue #336699 is hardcoded
   ~38x), so we override the compiled selectors directly with the maxinodes palette.

   PASS 1 — FOUNDATION: tokens, fonts, surfaces, buttons, links, forms, nav/footer
   recolor. Per-page / pixel-perfect polish (hero, login, dashboard, store cards,
   footer columns, top-bar strip) is layered on after we see live renders.
   Source of truth: /Users/max/Projects/maxinodes/website/site/resources/css/app.css
   ========================================================================== */

/* Self-hosted web fonts — Inter (body) + Onest (display).
   Replaces the Google Fonts CDN @import so visitor IPs are never sent to Google
   (GDPR — LG München I, 3 O 17493/20), consistent with the marketing site
   (website/site/resources/css/fonts.css). woff2 live in ./fonts/ (sibling dir,
   web-served from this theme). Subsets: latin, latin-ext, cyrillic, cyrillic-ext
   (EN + RU). To refresh: re-copy from the marketing public/brand/fonts/ dir. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/onest-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/onest-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/onest-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/onest-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/onest-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/onest-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/onest-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/onest-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/onest-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/onest-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/onest-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/onest-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/onest-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/onest-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/onest-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/onest-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/onest-800-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/onest-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/onest-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/onest-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mx-cream:#FAF6EE;  --mx-cream-2:#F2EBDB;  --mx-paper:#FFFFFF;
  --mx-ink:#16263F;    --mx-ink-soft:#3B4B65; --mx-muted:#6E7588;
  --mx-line:#E8DFCB;   --mx-line-strong:#D5CAAF;
  --mx-coral:#E15D43;  --mx-coral-deep:#BF4630; --mx-coral-soft:#FBDED5;
  --mx-sage:#6B8B7A;   --mx-sage-soft:#D6E2D9;  --mx-gold:#B5894C;
  --mx-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mx-font-display:'Onest','Inter',system-ui,sans-serif;
  --mx-radius:8px; --mx-radius-card:14px;
}

/* ---- surfaces & type ------------------------------------------------------ */
body,
body.primary-bg-color {
  background-color: var(--mx-cream);
  color: var(--mx-ink);
  font-family: var(--mx-font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.primary-bg-color { background-color: var(--mx-cream) !important; }

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.navbar-brand,
.page-header h1, .header-lined h1 {
  font-family: var(--mx-font-display);
  color: var(--mx-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}
p, .text-muted { color: var(--mx-ink-soft); }
.text-muted { color: var(--mx-muted) !important; }

a { color: var(--mx-coral-deep); }
a:hover, a:focus { color: var(--mx-coral); }

/* wider, marketing-matching container at xl */
@media (min-width: 1200px) { .container { max-width: 1200px; } }

/* ---- buttons -------------------------------------------------------------- */
.btn {
  border-radius: var(--mx-radius);
  font-weight: 600;
  border-width: 2px;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--mx-coral);
  border-color: var(--mx-coral);
  color: var(--mx-paper);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--mx-coral-deep);
  border-color: var(--mx-coral-deep);
  color: var(--mx-paper);
  transform: translateY(-1px);
}
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 3px var(--mx-coral-soft);
}
/* secondary / default → "light" marketing button */
.btn-default, .btn-secondary {
  background-color: var(--mx-paper);
  border-color: var(--mx-line-strong);
  color: var(--mx-ink);
}
.btn-default:hover, .btn-secondary:hover { border-color: var(--mx-ink); color: var(--mx-ink); }
.btn-link { color: var(--mx-coral-deep); }

/* ---- links / accents that were brand-blue -------------------------------- */
.text-primary { color: var(--mx-coral-deep) !important; }
.badge-info, .badge-primary { background-color: var(--mx-coral); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--mx-coral); }
.page-item.active .page-link { background-color: var(--mx-ink); border-color: var(--mx-ink); }
.page-link { color: var(--mx-ink); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--mx-coral); border-color: var(--mx-coral); }

/* ---- header: two-tier (brand row + app stripe) ---------------------------- */
/* TIER 1 — brand row. #header IS the brand row now: a parallel clone of the
   marketing .site-nav. It's a direct child of <body>, so position:sticky pins it
   across the whole page while the topbar + app stripe (later siblings) scroll
   away beneath it. */
#header.header {
  background-color: var(--mx-cream);
  border-bottom: 1px solid var(--mx-line);
  position: sticky;
  top: 0;
  z-index: 1020;
}
/* match marketing .nav-inner exactly: flat 1200px container + 28px gutters at
   ALL widths (Bootstrap's stepped .container would read narrower 1000-1199px) */
.mx-brandrow .container, .mx-appstripe .container, .master-breadcrumb .container {
  max-width: 1200px;
  padding-left: 28px;
  padding-right: 28px;
}
.mx-brandrow-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;              /* guarantee breathing room between logo / nav / CTA even when RU labels are wide */
  padding: 18px 0;        /* horizontal padding comes from .container (28px) -> matches .nav-inner 18px 28px */
}
.navbar-brand { color: var(--mx-ink) !important; }
.mx-brand { padding: 0; margin: 0; display: inline-flex; align-items: center; }
.mx-brand .mx-logo { height: 32px; width: auto; display: block; }       /* match marketing .logo svg{height:32px} */

.mx-nav-links { display: flex; gap: 32px; align-items: center; }
.mx-nav-links a {
  font-size: 14.5px; font-weight: 500;
  color: var(--mx-ink-soft);                 /* explicit, else global a{color:coral} bleeds */
  white-space: nowrap; transition: color .15s;
}
.mx-nav-links a:hover, .mx-nav-links a:focus { color: var(--mx-coral-deep); }

.mx-nav-cta { display: flex; align-items: center; gap: 10px; }

/* small buttons — clone marketing .btn-sm exactly (Bootstrap's .btn-sm differs) */
.mx-nav-cta .btn-sm, .btn.btn-sm {
  padding: 10px 18px; font-size: 13.5px; line-height: 1.3;
  border-radius: var(--mx-radius);
}
/* keep brand-row CTA buttons on a single line — longer RU labels ("Личный кабинет",
   "Попробовать бесплатно") were wrapping to 2 lines and inflating the buttons. */
.mx-nav-cta .btn-sm { white-space: nowrap; }
/* Lighter brand-row CTA: thinner border + a touch more compact, so the right cluster
   doesn't out-weigh the logo (mirrors marketing .nav-cta). EN row; RU keeps its own
   tighter padding below but also gets the thinner border. */
.mx-nav-cta .btn { border-width: 1px; }
.mx-nav-cta .btn-sm { padding: 8px 16px; }
/* The Client-area button uses .btn-light in the markup (parallels marketing), which
   otherwise falls back to Bootstrap's borderless light button. Give it the same
   paper-bg + line-strong outline as the marketing .btn-light so both rows match. */
.mx-nav-cta .btn-light {
  background-color: var(--mx-paper); color: var(--mx-ink); border-color: var(--mx-line-strong);
}
.mx-nav-cta .btn-light:hover, .mx-nav-cta .btn-light:focus {
  background-color: var(--mx-paper); color: var(--mx-ink); border-color: var(--mx-ink);
}
/* RU nav labels are wider than EN; tighten only the RU row so it doesn't crowd the
   logo and the language switcher (EN stays in lockstep with the marketing header). */
html[lang="ru"] .mx-nav-links { gap: 24px; }
html[lang="ru"] .mx-nav-links a { font-size: 14px; }
html[lang="ru"] .mx-nav-cta .btn-sm { padding: 9px 14px; }

/* cart + icon buttons (notifications) in the brand row */
.mx-nav-cta .mx-cart, .mx-nav-cta .mx-icon-btn {
  position: relative; color: var(--mx-ink-soft);
  background: transparent; border: 0; padding: 6px 8px;
  font-size: 16px; line-height: 1; box-shadow: none;
}
.mx-nav-cta .mx-cart:hover, .mx-nav-cta .mx-icon-btn:hover { color: var(--mx-coral-deep); }
.mx-nav-cta .mx-cart .badge, .mx-nav-cta .mx-icon-btn .badge {
  position: absolute; top: -3px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; font-size: 10px; line-height: 18px;
  display: flex; align-items: center; justify-content: center;
}
.cart-btn .badge, .badge-info { background-color: var(--mx-coral); }

/* account dropdown */
/* single account menu = WHMCS's $secondaryNavbar (<ul.mx-account-nav>), restyled so its
   dropdown toggle reads as the brand-row pill it replaced. */
.mx-account-nav { list-style: none; margin: 0; padding: 0; display: flex; }
.mx-account-nav > li { position: relative; }
.mx-account-nav .dropdown-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mx-paper); border: 2px solid var(--mx-line-strong);
  border-radius: var(--mx-radius); color: var(--mx-ink);
  padding: 8px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-account-nav .dropdown-toggle:hover, .mx-account-nav .dropdown-toggle:focus { border-color: var(--mx-ink); color: var(--mx-ink); }
.mx-account-nav .dropdown-menu {
  border: 1px solid var(--mx-line-strong); border-radius: var(--mx-radius);
  background: var(--mx-paper); padding: 6px; min-width: 210px;
}
.mx-account-nav .dropdown-menu a { color: var(--mx-ink-soft); border-radius: 6px; padding: 8px 12px; font-size: 14px; }
.mx-account-nav .dropdown-menu a:hover, .mx-account-nav .dropdown-menu a:focus { background: var(--mx-cream-2); color: var(--mx-coral-deep); }
.mx-account-nav .dropdown-divider { border-top-color: var(--mx-line); }
.mx-return-admin { white-space: nowrap; }

/* hamburger — hidden on desktop, shown <=1000px */
.mx-menu-toggle {
  display: none; background: transparent; border: 0;
  color: var(--mx-ink); font-size: 20px; padding: 6px 8px; box-shadow: none;
}

/* TIER 2 — app stripe (WHMCS-only): different surface so it reads as the workspace */
.mx-appstripe {
  background-color: var(--mx-cream-2);
  border-bottom: 1px solid var(--mx-line);
  padding: 0;          /* zero the navbar's default 1rem sides so its .container aligns with the brand row */
}
/* the inherited WHMCS navbar renders bare <a class="pr-4">, NOT .nav-link — so target
   the <a> directly (else global a{color:coral} bleeds and the whole stripe goes red).
   Vertical padding here also gives the stripe a comfortable ~44px height. */
.mx-appstripe .navbar-nav > li > a {
  color: var(--mx-ink-soft); font-weight: 500;
  padding-top: 11px; padding-bottom: 11px; display: inline-block;
}
.mx-appstripe .navbar-nav > li > a:hover,
.mx-appstripe .navbar-nav > li > a:focus,
.mx-appstripe .navbar-nav > li.active > a,
.mx-appstripe .navbar-nav > li > a.active,
.mx-appstripe .navbar-nav > li.show > a { color: var(--mx-coral-deep); }
/* dropdown children inside the stripe */
.mx-appstripe .dropdown-menu a { color: var(--mx-ink-soft); }
.mx-appstripe .dropdown-menu a:hover, .mx-appstripe .dropdown-menu a:focus { color: var(--mx-coral-deep); }

/* keep the broad nav-link recolor for any other inherited navbar markup */
.navbar-light .navbar-nav .nav-link { color: var(--mx-ink-soft); font-weight: 500; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active { color: var(--mx-coral-deep); }

/* responsive: collapse BOTH tiers into the hamburger at <=1000px (marketing's bp) */
@media (max-width: 1000px) {
  .mx-nav-links { display: none; }
  .mx-nav-cta .mx-cta-light,
  .mx-nav-cta .mx-cta-primary,
  .mx-nav-cta .mx-account-nav,
  .mx-nav-cta .mx-return-admin { display: none; }
  .mx-menu-toggle { display: inline-flex; align-items: center; }
  .mx-appstripe { display: none !important; }
}

/* breadcrumb strip under nav */
.master-breadcrumb { background-color: var(--mx-cream-2); border-bottom: 1px solid var(--mx-line); }
.master-breadcrumb .breadcrumb { background: transparent; padding-left: 0; padding-right: 0; margin-bottom: 0; }
.master-breadcrumb a { color: var(--mx-ink-soft); }
.breadcrumb-item.active { color: var(--mx-ink); }

/* ---- cards / panels ------------------------------------------------------- */
.card, .panel {
  background-color: var(--mx-paper);
  border: 1px solid var(--mx-line-strong);
  border-radius: var(--mx-radius-card);
}
.card-header, .panel-heading {
  background-color: var(--mx-cream-2);
  border-bottom: 1px solid var(--mx-line);
  font-family: var(--mx-font-display);
}
.list-group-item.active { background-color: var(--mx-ink); border-color: var(--mx-ink); }

/* ---- forms ---------------------------------------------------------------- */
.form-control {
  border: 1px solid var(--mx-line-strong);
  border-radius: var(--mx-radius);
  color: var(--mx-ink);
}
.form-control:focus {
  border-color: var(--mx-coral);
  box-shadow: 0 0 0 3px var(--mx-coral-soft);
}

/* ---- alerts (recolor BS4 contextual) ------------------------------------- */
.alert-success { background-color: var(--mx-sage-soft); border-color: var(--mx-sage); color: var(--mx-ink); }
.alert-info { background-color: var(--mx-coral-soft); border-color: var(--mx-coral); color: var(--mx-coral-deep); }

/* ---- footer --------------------------------------------------------------- */
#footer.footer {
  background-color: var(--mx-paper);
  border-top: 1px solid var(--mx-line);
  color: var(--mx-muted);
}
#footer.footer .nav-link { color: var(--mx-ink-soft); }
#footer.footer .nav-link:hover { color: var(--mx-coral-deep); }
/* Twenty-One's base `footer.footer .copyright` sets margin:30px 0 + text-align:center,
   which added ~60px of stray height vs the marketing footer — neutralise it here (the
   ID selector outranks the base rule). Spacing now comes from .mx-foot-bottom alone. */
#footer .copyright { color: var(--mx-muted); margin: 0; text-align: left; }

/* =============================================================================
   PASS 2 — CHROME: top-bar strip, brand logo, transfer button, home tiles
   ========================================================================== */

/* ---- brand top-bar strip (matches maxinodes.com) ------------------------- */
.mx-topbar {
  background: var(--mx-ink);
  color: var(--mx-cream);
  font-size: 13px;
  padding: 9px 0;
  text-align: center;
  letter-spacing: 0.01em;
}
.mx-topbar .mx-accent { color: var(--mx-coral-soft); }
.mx-topbar .mx-sep { color: rgba(250, 246, 238, 0.3); margin: 0 12px; }
@media (max-width: 600px) { .mx-topbar .mx-sep { display: none; } }

/* ---- inline brand logo: sizing/padding now owned by the two-tier header block
   above (.mx-brand / .mx-brand .mx-logo). The old .navbar-brand 34px + 0.5rem
   rules were removed — they collided with the brand-row clone at equal
   specificity and broke logo-height + row-height parity with maxinodes.com. --- */

/* ---- domain-search: Transfer button (.btn-success) → on-brand sage ------- */
.btn-success,
.btn-success:not(:disabled):not(.disabled) {
  background-color: var(--mx-sage);
  border-color: var(--mx-sage);
  color: var(--mx-paper);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
  background-color: #5a7768;
  border-color: #5a7768;
  color: var(--mx-paper);
}
.btn-success:focus, .btn-success.focus { box-shadow: 0 0 0 3px var(--mx-sage-soft); }
.btn-outline-primary { color: var(--mx-coral-deep); border-color: var(--mx-coral); }
.btn-outline-primary:hover { background-color: var(--mx-coral); border-color: var(--mx-coral); color: var(--mx-paper); }

/* ---- homepage "how can we help / your account" tiles → brand palette ----- */
.action-icon-btns a { border-top-width: 3px; }
.action-icon-btns a.card-accent-teal,
.action-icon-btns a.card-accent-blue { border-top-color: var(--mx-coral); }
.action-icon-btns a.card-accent-pomegranate,
.action-icon-btns a.card-accent-red { border-top-color: var(--mx-coral-deep); }
.action-icon-btns a.card-accent-sun-flower,
.action-icon-btns a.card-accent-orange,
.action-icon-btns a.card-accent-gold { border-top-color: var(--mx-gold); }
.action-icon-btns a.card-accent-green,
.action-icon-btns a.card-accent-turquoise,
.action-icon-btns a.card-accent-emerald { border-top-color: var(--mx-sage); }
.action-icon-btns a.card-accent-asbestos,
.action-icon-btns a.card-accent-silver,
.action-icon-btns a.card-accent-concrete { border-top-color: var(--mx-line-strong); }
.action-icon-btns a.card-accent-midnight-blue,
.action-icon-btns a.card-accent-wet-asphalt,
.action-icon-btns a.card-accent-purple,
.action-icon-btns a.card-accent-amethyst { border-top-color: var(--mx-ink); }
.action-icon-btns a .ico-container i { color: var(--mx-ink-soft); }
.action-icon-btns a:hover .ico-container i { color: var(--mx-coral); }

/* ---- domain-search hero card --------------------------------------------- */
.home-domain-search.bg-white { background: var(--mx-paper) !important; border-bottom: 1px solid var(--mx-line); }
.home-domain-search h2 { font-family: var(--mx-font-display); color: var(--mx-ink); }

/* =============================================================================
   PASS 3 — native pages: footer columns + service status colors
   ========================================================================== */

/* ---- footer: marketing multi-column ---- */
#footer.footer.mx-footer { padding: 56px 0 28px; }
/* Five columns since 2026-08-07: brand + Hosting + Account + Company + Legal. The portal
   carries one column more than marketing (which has no Account column), so the brand cell
   is narrowed from 2fr to 1.8fr and the gap from 48px to 40px to buy the extra track back.
   At the 1140px container that leaves ~304px for the brand blurb (its max-width is 290px,
   so it is unaffected) and ~169px per link column — enough for the longest label,
   «Политика конфиденциальности и GDPR», at two lines. */
.mx-foot-grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 36px;
  text-align: left;
}
.mx-foot-logo { display: inline-block; }
.mx-foot-logo svg { height: 30px; width: auto; display: block; }
.mx-foot-brand p { color: var(--mx-muted); font-size: 14px; margin-top: 14px; max-width: 290px; line-height: 1.6; }
.mx-foot-social { display: flex; gap: 8px; margin-top: 18px; margin-left: -8px; }
.mx-foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--mx-ink-soft); transition: color .15s, background .15s, transform .15s;
}
.mx-foot-social a:hover, .mx-foot-social a:focus-visible {
  color: var(--mx-coral-deep); background: var(--mx-coral-soft); transform: translateY(-2px);
}
.mx-foot-social svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.mx-foot-col h4 {
  font-family: var(--mx-font-display);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 16px; color: var(--mx-ink); font-weight: 600;
}
.mx-foot-col ul { list-style: none; padding: 0; margin: 0; }
.mx-foot-col ul li { margin-bottom: 10px; }
.mx-foot-col ul a { color: var(--mx-ink-soft); font-size: 14px; transition: color .15s; }
.mx-foot-col ul a:hover { color: var(--mx-coral-deep); }

/* "Cookie settings" in the Legal column is a <button>, because it reopens the consent
   banner on this page rather than going anywhere — but it has to sit in a list of links
   without looking like a stray form control. The rule above only matches anchors, so this
   restates the same treatment from a full reset. Mirrors .mx-foot-cc in the Guide theme
   (chatwoot/export-zendesk/theme/styles/_maxinodes.scss). */
.mx-foot-cc {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: 14px; text-align: left;
  color: var(--mx-ink-soft); cursor: pointer; transition: color .15s;
}
.mx-foot-cc:hover { color: var(--mx-coral-deep); }
.mx-foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--mx-line); flex-wrap: wrap; gap: 12px;
}
.mx-foot-bottom .copyright { color: var(--mx-muted); font-size: 13px; }
/* Between 1000 and 1200 the Bootstrap container drops to 960px, which is too narrow for
   five tracks. Give the brand its own full-width row and let the four link columns take
   the whole width — the Guide theme footer solves the same squeeze the same way. The
   grid-column stays in force at the narrower breakpoints below, which is what we want. */
@media (max-width: 1199.98px) {
  .mx-foot-grid { grid-template-columns: repeat(4, 1fr); gap: 36px; }
  .mx-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 1000px) { .mx-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px) {
  .mx-foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .mx-foot-bottom { flex-direction: column; text-align: center; justify-content: center; }
}

/* ---- service / product status colours → brand ---- */
.product-status-active { background-color: var(--mx-sage); }
.product-status-pending { background-color: var(--mx-gold); }
.product-status-suspended { background-color: var(--mx-coral-deep); }
.product-status-terminated, .product-status-cancelled { background-color: var(--mx-muted); }
.product-status-fraud { background-color: var(--mx-ink); }
.status-active, .status-open, .status-completed { background-color: var(--mx-sage) !important; }
.status-pending, .status-pending-transfer { background-color: var(--mx-gold) !important; }
.status-suspended, .status-fraud { background-color: var(--mx-coral-deep) !important; }

/* =============================================================================
   PASS 4 — polish: product-icon panel + success toggles
   ========================================================================== */
/* product-details icon panel: stock grey #efefef → cream */
div.product-details div.product-icon { background-color: var(--mx-cream-2); }
/* bootstrap-switch "success" toggles (e.g. register mailing-list Yes) → sage */
.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
  background: var(--mx-sage) !important;
  color: #fff !important;
}

/* =============================================================================
   PASS 5 — anti-FOUC for the cPanel Extended module
   The module injects its stylesheet via a <link> in <body> (not <head>), so on a
   cold cache its server-rendered UI paints before the CSS applies → a brief flash.
   This rule hides the module UI (#layers2) only while the <html>.mx-cpx-loading class
   is present. head.tpl adds that class before #layers2 renders and removes it on
   window 'load' (styles applied) with a 2s safety timeout — JS-driven so it never
   depends on the edge-cached module stylesheet, and degrades to no-hide if JS is off.
   ========================================================================== */
html.mx-cpx-loading #layers2 { opacity: 0; }

/* ==========================================================================
   ORDER / CHECKOUT FLOW (standard_cart) — brand the leftovers
   The viewcart + checkout pages render with the GLOBAL standard_cart order form
   (they're not product-group-specific), which loads its own all.min.css shipping
   WHMCS-blue (#005588 / #336699) plus Bootstrap contextual colors the rest of the
   theme doesn't reach. These are scoped, verified-on-page fixes (2026-06-14).
   ========================================================================== */

/* checkout section headings (.sub-heading > span.primary-bg-color): blue text -> ink.
   (its background was already neutralised to cream above; only the colour leaked.) */
.primary-bg-color { color: var(--mx-ink) !important; }

/* cart line-items table header bar: WHMCS blue -> navy */
.view-cart-items-header { background-color: var(--mx-ink) !important; }

/* primary checkout CTA: btn-success/sage -> coral (it's the main action, not a success state) */
.btn-checkout,
.btn-checkout:focus { background-color: var(--mx-coral) !important; border-color: var(--mx-coral) !important; color: #fff !important; }
.btn-checkout:hover { background-color: var(--mx-coral-deep) !important; border-color: var(--mx-coral-deep) !important; color: #fff !important; }

/* "Already Registered?" toggle: Bootstrap info teal -> navy (secondary action) */
.btn-info { background-color: var(--mx-ink) !important; border-color: var(--mx-ink) !important; color: #fff !important; }
.btn-info:hover { background-color: var(--mx-ink-soft) !important; border-color: var(--mx-ink-soft) !important; color: #fff !important; }

/* "Empty Cart" link-button: WHMCS-blue pill -> subtle coral-deep text link */
.btn-link.btn-xs { background-color: transparent !important; color: var(--mx-coral-deep) !important; box-shadow: none !important; }

/* Bootstrap bg-primary (recommendations modal header, etc.): blue -> navy */
.bg-primary { background-color: var(--mx-ink) !important; }

/* password-strength meter base stripe: blue -> sage */
.progress-bar.progress-bar-success { background-color: var(--mx-sage) !important; }

/* =============================================================================
   PASS 6 — mobile nav overlay (parity with maxinodes.com .mobile-menu)
   One hamburger -> one full-screen panel carrying the brand links + a flattened
   copy of the primary app nav + the auth block. Toggled by js/mx-nav.js.
   ========================================================================== */
.mx-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1080;                 /* above Bootstrap modal(1050)/popover(1060)/tooltip(1070) */
  background: var(--mx-cream);
  padding: 20px 24px 32px;
  flex-direction: column;
  overflow-y: auto;
}
.mx-mobile-menu.is-open { display: flex; }
body.mx-menu-open { overflow: hidden; }

.mx-mobile-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--mx-line); margin-bottom: 8px;
}
.mx-mobile-top .mx-logo { height: 32px; width: auto; display: block; }
.mx-mobile-top .mx-menu-toggle { display: inline-flex; align-items: center; }

.mx-mobile-links { display: flex; flex-direction: column; }
.mx-mobile-links a {
  font-family: var(--mx-font-display);
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--mx-ink); padding: 16px 0; border-bottom: 1px solid var(--mx-line);
}
.mx-mobile-links a:hover, .mx-mobile-links a:focus { color: var(--mx-coral-deep); }

.mx-mobile-section-label {
  font-family: var(--mx-font-display);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mx-muted); margin: 20px 0 4px;
}

/* cloned items are bare <li><a class="pr-4">, NOT .nav-item/.nav-link — target <a> */
.mx-mobile-applist { list-style: none; padding: 0; margin: 0; }
.mx-mobile-applist > li { border-bottom: 1px solid var(--mx-line); }
.mx-mobile-applist > li > a { color: var(--mx-ink-soft); font-size: 16px; padding: 12px 0; font-weight: 500; display: block; }
.mx-mobile-applist > li > a:hover, .mx-mobile-applist > li > a.active { color: var(--mx-coral-deep); }
/* flatten any Bootstrap dropdown children: always shown, indented, no toggle chrome */
.mx-mobile-applist .dropdown-menu {
  display: block; position: static; float: none;
  border: 0; margin: 0; padding: 0 0 8px 16px;
  background: transparent; box-shadow: none;
}
.mx-mobile-applist .dropdown-toggle::after { display: none; }
.mx-mobile-applist .dropdown-item { padding: 8px 0; color: var(--mx-muted); font-size: 14.5px; white-space: normal; }
.mx-mobile-applist .dropdown-item:hover, .mx-mobile-applist .dropdown-item:focus { color: var(--mx-coral-deep); background: transparent; }

.mx-mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.mx-mobile-cta .btn { justify-content: center; width: 100%; }

/* never show the overlay on desktop, even if a stale .is-open class lingers */
@media (min-width: 1001px) { .mx-mobile-menu { display: none !important; } }

/* post-logout "you've been signed out" note (injected by mx-nav.js on the login page) */
.mx-signed-out {
  display: flex; align-items: center; gap: 10px;
  background: var(--mx-sage-soft); border: 1px solid var(--mx-sage);
  color: var(--mx-ink); border-radius: var(--mx-radius);
  padding: 12px 16px; margin: 18px 0 0; font-weight: 500;
}
.mx-signed-out i { color: var(--mx-sage); }

/* EN/RU language switcher — canonical 2-pill toggle (Phase 2). Same markup + look as
   the marketing .mx-lang component so the two brand-row headers stay in lockstep. */
.mx-lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--mx-line); border-radius: 999px;
  overflow: hidden; background: #fff;
}
.mx-lang__pill {
  display: inline-block; padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: .02em;
  color: var(--mx-ink); opacity: .55; text-decoration: none;
  transition: opacity .15s, background .15s, color .15s;
}
.mx-lang__pill:hover { opacity: 1; text-decoration: none; }
.mx-lang__pill.is-active { background: var(--mx-ink); color: #fff; opacity: 1; }
.mx-lang-mobile { margin-bottom: 4px; }