/* Generated by scripts/build.mjs from src/css/ and @whn/design-system. Do not edit. */

@layer tokens {
:root {
  --paper: #fbfbf9;
  --card: #fdfdfc;
  --paper-2: #f3f5f6;
  --line: #e3e8eb;
  --line-strong: #cdd6dc;
  --band-1: #f5f6f6;
  --band-2: #eaeced;
  --band-3: #dde0e2;
  --band-4: #cdd2d5;
  --ink: #1f3746;
  --ink-2: #4a5f6e;
  --ink-3: #7a8b97;
  --ink-deep: #172b37;
  --on-ink: #f5f7f8;
  --on-ink-2: #b9c7d2;
  --on-accent-2: #ffe3cf;
  --ink-line: #2e4a5c;
  --accent: #e96b24;
  --accent-strong: #be4d10;
  --accent-deep: #c24f12;
  --accent-ink: #a84008;
  --accent-tint: #fbeadf;
  --accent-soft: #fdf3ea;
  --ok: #2e7d5b;
  --ok-strong: #297055;
  --ok-ink: #246149;
  --ok-tint: #e6f4ee;
  --font-sans: var(--font-poppins, "Poppins"), system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: var(--font-spline-mono, "Spline Sans Mono"), ui-monospace, Menlo, monospace;
  --text-xs: clamp(.75rem, .72rem + .15vw, .8125rem);
  --text-sm: clamp(.85rem, .82rem + .15vw, .9375rem);
  --text-base: clamp(.95rem, .92rem + .2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --text-xl: clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
  --text-2xl: clamp(1.7rem, 1.45rem + 1.3vw, 2.4rem);
  --text-hero: clamp(2.3rem, 1.6rem + 3.1vw, 4rem);
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 75rem;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px #1f37460d, 0 10px 28px -16px #1f374638;
  --shadow-pop: 0 2px 4px #1f37460f, 0 20px 44px -20px #1f374659;
  --shadow-hover: 0 4px 10px #1f37461c, 0 26px 56px -20px #1f374685;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .14s;
  --t-med: .26s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0s;
    --t-med: 0s;
  }
}
}

/* Generated by scripts/fetch-fonts.mjs. Do not edit; re-run the script. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-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: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-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: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-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: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-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: "Spline Sans Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/spline-mono-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: "Spline Sans Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/spline-mono-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;
}

/* WebHost Nepal — WHMCS client area. UNLAYERED ON PURPOSE: WHMCS's theme.css is
   unlayered, and unlayered beats every @layer at any specificity, so nothing in
   this file may sit inside a layer block. */

/* ---- Foundation ------------------------------------------------------------ */

:root {
  /* Satisfies the design system's font contract: it names the faces, we load them. */
  --font-poppins: "Poppins";
  --font-spline-mono: "Spline Sans Mono";
}

/* Animated navigation over ordinary multi-page Smarty. No JS, nothing to
   re-initialise, and Firefox simply does a normal load. Gated like every
   --t-* token: no motion for a viewer who asked for none. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

body,
body.primary-bg-color {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  /* twenty-one gives html and body a height of 100%, which caps the body box at
     one viewport — a sticky header inside it comes unstuck one screen down. */
  height: auto;
  min-height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h1,
.h1 {
  font-size: var(--text-2xl);
}
h2,
.h2 {
  font-size: var(--text-xl);
}
h3,
.h3 {
  font-size: var(--text-lg);
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-size: var(--text-base);
}

a {
  color: var(--accent-strong);
}
a:hover,
a:focus {
  color: var(--accent-ink);
}

hr {
  border-top-color: var(--line);
}
small,
.small {
  font-size: var(--text-xs);
  color: var(--ink-2);
}
code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
}

/* 71 of WHMCS's labels carry no class at all; without this they sit at normal
   weight beside the 207 that do. */
label {
  font-weight: 600;
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* WHMCS's markup carries no .num class, so figures are keyed off the elements
   that only ever hold them. */
.price,
.affiliate-stat .stat {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* WHMCS paints these greys from Bootstrap's palette; the tokens are the whole
   point of the exercise. Bootstrap declares these !important too, plus the
   domain-promo-box rule, .bg-primary and the contextual utilities below — nine total. */
.text-muted {
  color: var(--ink-3) !important;
}
.bg-light {
  background-color: var(--paper-2) !important;
}
.border {
  border-color: var(--line) !important;
}
/* Same stock blue as .btn-info/.label-info above; modal-header banners are its
   only use (generate-password, IRTP confirm, extra-field modals). */
.bg-primary {
  background-color: var(--ink) !important;
}

/* No danger hue exists in the tokens; danger reads as the same warning tone as
   .alert-danger/.badge-danger above, never the brand orange used for primary. */
.text-danger {
  color: var(--accent-ink) !important;
}
.text-success {
  color: var(--ok-strong) !important;
}
.text-info {
  color: var(--ink-2) !important;
}
.bg-danger {
  background-color: color-mix(in srgb, var(--accent-ink) 65%, var(--ink-deep) 35%) !important;
}

/* ---- Bootstrap primitives -------------------------------------------------- */
/* Only what WHMCS renders. Ours loads last, so matching WHMCS's specificity is
   enough — there is no reason to reach for !important. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0.55rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.2;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast);
}
.btn:active {
  transform: translateY(1px);
}
.btn:focus,
.btn.focus {
  box-shadow: none;
}

/* --accent is 2.96:1 under white text. --accent-strong is 4.59:1 and is the only
   orange allowed to carry a label; the glow keeps the brand orange. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-ink);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent-deep) 80%, transparent);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--on-ink);
}

.btn-default,
.btn-secondary,
.btn-light {
  background-color: var(--card);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-default:focus,
.btn-secondary:focus,
.btn-light:focus {
  background-color: var(--paper-2);
  border-color: var(--ink);
  color: var(--ink);
}

.btn-dark {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.btn-dark:hover {
  background-color: var(--ink-deep);
  border-color: var(--ink-deep);
}

/* No danger hue exists in the tokens; mixing ink into accent-ink keeps the
   destructive signal without reading as the primary CTA's brand orange. */
.btn-danger,
.btn-danger:not(:disabled):not(.disabled):active {
  background-color: color-mix(in srgb, var(--accent-ink) 65%, var(--ink-deep) 35%);
  border-color: color-mix(in srgb, var(--accent-ink) 65%, var(--ink-deep) 35%);
  color: var(--on-ink);
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: color-mix(in srgb, var(--accent-ink) 40%, var(--ink-deep) 60%);
  border-color: color-mix(in srgb, var(--accent-ink) 40%, var(--ink-deep) 60%);
  color: var(--on-ink);
}

.btn-info {
  background-color: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--on-ink);
}
.btn-info:hover,
.btn-info:focus {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.btn-warning {
  background-color: var(--accent-soft);
  border-color: var(--accent-tint);
  color: var(--accent-ink);
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--accent-tint);
  border-color: var(--accent-tint);
  color: var(--accent-ink);
}

.btn-link {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-link:hover {
  color: var(--accent-ink);
}

.btn-outline-primary,
.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-ink);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--paper-2);
  border-color: var(--ink);
  color: var(--ink);
}

.btn-sm,
.btn-group-sm > .btn {
  min-height: 34px;
  padding: 0.35rem 0.8rem;
  font-size: var(--text-xs);
  border-radius: var(--r-sm);
}
.btn-lg,
.btn-group-lg > .btn {
  min-height: 52px;
  padding: 0.8rem 1.6rem;
  font-size: var(--text-base);
}
/* .btn sets inline-flex; a plain width here would never make it block-level. */
.btn-block {
  display: flex;
  width: 100%;
}

.card {
  background-color: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.card-header,
.panel-heading {
  background-color: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
}
.card-header:first-child {
  border-radius: calc(var(--r-lg) - 1.5px) calc(var(--r-lg) - 1.5px) 0 0;
}
.card-footer {
  background-color: var(--paper-2);
  border-top: 1px solid var(--line);
}
.card-body {
  color: var(--ink);
}
.card-title {
  color: var(--ink);
}

.form-control,
.custom-select,
.form-control-sm {
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background-color: var(--card);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  box-shadow: none;
}
/* Matches @whn/design-system's .field: the border swap carries the signal, the
   outline is a quiet halo, not a second high-contrast ring. */
.form-control:focus,
.custom-select:focus {
  border-color: var(--ink);
  outline: 3px solid var(--paper-2);
  outline-offset: 0;
  box-shadow: none;
}
.form-control::placeholder {
  color: var(--ink-3);
}
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
  background-color: var(--paper-2);
  color: var(--ink-2);
}
.form-control.is-invalid,
.custom-select.is-invalid,
.has-error .form-control,
.has-error .custom-select {
  border-color: var(--accent-ink);
}
/* Rendered by six templates; WHMCS's only inline validation message. */
.form-group .field-error-msg {
  color: var(--accent-ink);
}
.form-control-sm {
  min-height: 34px;
  padding: 0.3rem 0.6rem;
  font-size: var(--text-sm);
}
textarea.form-control {
  min-height: 8rem;
}
.col-form-label,
.control-label {
  font-weight: 600;
  color: var(--ink);
}
.form-text,
.help-block {
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.custom-control-label::before {
  border-color: var(--line-strong);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}

.input-group-text {
  background-color: var(--paper-2);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.input-group > .input-group-prepend > .input-group-text {
  border-right: 0;
}
.input-group > .input-group-append > .input-group-text {
  border-left: 0;
}

.table {
  color: var(--ink);
}
.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.table thead th {
  border-bottom: 1.5px solid var(--line-strong);
  border-top: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--paper-2);
}
.table-hover tbody tr:hover {
  background-color: var(--accent-soft);
}
.table-bordered,
.table-bordered th,
.table-bordered td {
  border-color: var(--line);
}

.nav-tabs {
  border-bottom: 1.5px solid var(--line);
}
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  font-weight: 600;
  color: var(--ink-2);
}
.nav-tabs .nav-link:hover {
  border-bottom-color: var(--line-strong);
  color: var(--ink);
}
/* Matches the navbar's current-item bar (header.tpl): --ink, not the brand
   orange — one current-item language across the whole client area. */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background-color: transparent;
  border-bottom-color: var(--ink);
  color: var(--ink);
}
/* WHMCS's own .responsive-tabs-sm .nav-item a:hover sits at (0,2,2) and zeroes
   border-bottom on hover, killing the underline; out-specificity it here. */
.nav-tabs.responsive-tabs-sm .nav-link:hover {
  border-bottom: 3px solid var(--line-strong);
}
.nav-pills .nav-link.active {
  background-color: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-md);
}

.alert {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--card);
  color: var(--ink);
}
/* Matches @whn/design-system's .notice-ok: the tint carries --ok-strong text,
   and --ok is left to the glyph, which is a mark rather than prose. */
.alert-success {
  background-color: var(--ok-tint);
  border-color: transparent;
  color: var(--ok-strong);
}
.alert-success .fas,
.alert-success .far {
  color: var(--ok);
}
.alert-info {
  background-color: var(--paper-2);
  border-color: var(--line);
  color: var(--ink-2);
}
.alert-warning,
.alert-danger {
  background-color: var(--accent-soft);
  border-color: var(--accent-tint);
  color: var(--accent-ink);
}
.alert a {
  color: inherit;
  text-decoration: underline;
}

.badge {
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
}
.badge-info,
.badge-primary {
  background-color: var(--ink);
  color: var(--on-ink);
}
.badge-success {
  background-color: var(--ok-tint);
  color: var(--ok);
}
.badge-warning,
.badge-danger {
  background-color: var(--accent-tint);
  color: var(--accent-ink);
}
.badge-secondary {
  background-color: var(--paper-2);
  color: var(--ink-2);
}

/* Bootstrap 3's label, still rendered by SSL and download modules; the parent's
   .label supplies shape and white text, so only the tone needs replacing. */
.label-default {
  background-color: var(--ink-2);
}
.label-info,
.label-primary {
  background-color: var(--ink);
}
.label-success {
  background-color: var(--ok);
}
.label-warning,
.label-danger {
  background-color: color-mix(in srgb, var(--accent-ink) 65%, var(--ink-deep) 35%);
}

.modal-content {
  background-color: var(--card);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
}
.modal-header,
.modal-footer {
  border-color: var(--line);
}
/* .modal .modal-header sits at (0,2,0), beating the bare .modal-header above;
   #modalAjax (footer.tpl, every page) renders it plain, so it needs its own
   match. One surface, like the card-header treatment above. */
.modal .modal-header {
  background-color: transparent;
}
.modal-title {
  font-size: var(--text-lg);
}
.modal-backdrop.show {
  opacity: 0.55;
}
.close {
  color: var(--ink-2);
  text-shadow: none;
  opacity: 1;
}
.close:hover {
  color: var(--ink);
}

.dropdown-menu {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--card);
  box-shadow: var(--shadow-pop);
  padding: 0.35rem;
}
.dropdown-item {
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-3);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--paper-2);
  color: var(--ink);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--ink);
  color: var(--on-ink);
}
.dropdown-divider {
  border-top-color: var(--line);
}

.list-group-item {
  border-color: var(--line);
  background-color: var(--card);
  color: var(--ink);
}
.list-group-item:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}
.list-group-item:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}
.list-group-item-action:hover {
  background-color: var(--paper-2);
}
.list-group-item.active {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.pagination {
  gap: var(--sp-1);
}
.page-link {
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background-color: var(--card);
  font-size: var(--text-sm);
  font-weight: 600;
}
/* WHMCS's own .pagination > li > a sits at (0,1,2), beating a bare .page-link
   (0,1,0) regardless of load order; .pagination .page-link (0,2,0) clears it. */
.pagination .page-link {
  color: var(--ink-2);
}
.page-link:hover {
  background-color: var(--paper-2);
  color: var(--ink);
  border-color: var(--line-strong);
}
.page-item.active .page-link {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.page-item.disabled .page-link {
  background-color: var(--paper-2);
  color: var(--ink-3);
  border-color: var(--line);
}

.breadcrumb {
  background-color: transparent;
  padding: 0;
  font-size: var(--text-sm);
}
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--ink-2);
}
.breadcrumb-item a:hover {
  color: var(--accent-ink);
}
.breadcrumb-item.active {
  color: var(--ink);
  font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ink-3);
}

.progress {
  background-color: var(--paper-2);
  border-radius: var(--r-pill);
}
.progress-bar {
  background-color: var(--accent-strong);
}
.tooltip-inner {
  background-color: var(--ink-deep);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
}
.popover {
  border-color: var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}
.popover-header {
  background-color: var(--paper-2);
  border-bottom-color: var(--line);
}

/* ---- WHMCS components ------------------------------------------------------ */
/* Empirically sized: these come from walking pages, not from grepping. Must
   follow ---- Bootstrap primitives — source order is the tie-breaker against them. */

.primary-content {
  color: var(--ink);
}

.sidebar .panel-heading,
.sidebar .card-header {
  background-color: var(--paper-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.sidebar .list-group-item {
  border-left: 0;
  border-right: 0;
  font-size: var(--text-sm);
}
.sidebar .list-group-item.active {
  background-color: var(--accent-soft);
  border-color: var(--line);
  color: var(--accent-ink);
  font-weight: 600;
}
.sidebar .list-group-item .badge {
  background-color: var(--paper-2);
  color: var(--ink-2);
}

.panel {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-card);
}
.panel-heading {
  border-radius: calc(var(--r-lg) - 1.5px) calc(var(--r-lg) - 1.5px) 0 0;
}
.panel-body {
  color: var(--ink);
}

.client-home-cards .card,
.client-home-cards .panel {
  border-radius: var(--r-lg);
  transition:
    box-shadow var(--t-med) var(--ease-out),
    transform var(--t-med) var(--ease-out);
}
.client-home-cards .card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* twenty-one/six paint one stock hex per .card-accent-<name>, first thing a client
   sees on their home page. Ramp all twenty names onto our three semantic tones. */
.card-accent-gold,
.card-accent-orange,
.card-accent-red,
.card-accent-pomegranate,
.card-accent-brand-cpanel-orange,
.card-accent-magenta,
.card-accent-pink,
.card-accent-sun-flower {
  border-top-color: var(--accent-strong);
}
.card-accent-green,
.card-accent-lime,
.card-accent-teal,
.card-accent-turquoise,
.card-accent-emerald {
  border-top-color: var(--ok);
}
.card-accent-blue,
.card-accent-purple,
.card-accent-amethyst,
.card-accent-wet-asphalt,
.card-accent-midnight-blue,
.card-accent-silver,
.card-accent-asbestos,
.card-accent-brand-xovinow-blue {
  border-top-color: var(--line-strong);
}
/* Brand orange is sanctioned for icons in illustrations, but these are small
   glyphs beside text: --accent-strong is 4.85:1 on --card vs ~3.0:1 for --accent,
   indistinguishable from each other at this size — use the AA step, not --accent. */
.client-home-cards .card-body i {
  color: var(--accent-strong);
}

.tiles .tile {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.tiles .tile .title {
  font-weight: 700;
  color: var(--ink);
}
.tiles .tile .stat {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* WHMCS's own stat-row underline, one hue each. Ramp it on the accent family so
   the row reads as one system rather than four unrelated stock colours. */
.tiles .tile .highlight.bg-color-blue {
  background-color: color-mix(in srgb, var(--accent-strong) 55%, white);
}
.tiles .tile .highlight.bg-color-green {
  background-color: var(--accent-strong);
}
.tiles .tile .highlight.bg-color-red {
  background-color: var(--accent-deep);
}
.tiles .tile .highlight.bg-color-gold {
  background-color: var(--accent-ink);
}

/* Every .table-list is wrapped by DataTables in .dataTables_wrapper, which is
   also where the parent's own overrides live at (0,2,*) — match that prefix or
   lose silently to specificity, regardless of source order. Cell rhythm and
   borders follow @whn/design-system's .compare: .8rem 1rem, --line row rules. */
.dataTables_wrapper table.table-list {
  border-width: 1.5px;
  border-color: var(--line);
  border-radius: var(--r-md);
  background-color: var(--card);
}
.dataTables_wrapper table.table-list thead th {
  padding: 0.8rem 1rem;
  background-color: var(--paper-2);
  border-bottom: 1.5px solid var(--line-strong);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}
table.table-list tbody td {
  padding: 0.8rem 1rem;
  font-size: var(--text-sm);
}
.table-list > tbody > tr > td {
  background-color: var(--card);
}
/* Cell backgrounds paint over the row's; the parent's own hover rule targets
   td, so ours must match it there too, not the tr. */
.table-list > tbody > tr:hover > td {
  background-color: var(--accent-soft);
}
/* .status carries the per-status colour below; shape it like a pill everywhere
   it appears, not only inside table-list (product-details and affiliates use
   it bare too). */
.status {
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--text-xs);
}
/* The dashboard's package-switch dropdown fixes .label text to white at higher
   specificity than any single .status-* rule; inherit lets the bucket win. */
.div-service-status .label {
  color: inherit;
}

/* WHMCS's own per-status hex (theme.css), bucketed onto the three semantic
   tones instead of Bootstrap's white-on-saturated .label. A department with a
   custom admin-set colour renders status-custom with an inline style, which no
   stylesheet rule can reach. */
.status-active,
.status-open,
.status-completed,
.status-paid,
.status-accepted,
.status-delivered,
.status-answered {
  background-color: var(--ok-tint);
  color: var(--ok-strong);
}
.status-pending,
.status-pending-transfer,
.status-suspended,
.status-customer-reply,
.status-pending-registration,
.status-redemption,
.status-grace,
.status-unpaid,
.status-payment-pending,
.status-onhold,
.status-inprogress,
.status-fraud {
  background-color: var(--accent-soft);
  color: var(--accent-ink);
}
.status-terminated,
.status-closed,
.status-cancelled,
.status-collections,
.status-expired,
.status-transferred-away,
.status-refunded,
.status-lost,
.status-dead {
  background-color: var(--paper-2);
  color: var(--ink-2);
}

/* The filter input keeps WHMCS's search-icon background image; only the ground
   and type scale move to tokens, since the icon's left padding is !important. */
.dataTables_wrapper .dataTables_filter label .form-control {
  background-color: var(--card);
  font-size: var(--text-sm);
}
.dataTables_wrapper .dataTables_info {
  font-size: var(--text-xs);
  color: var(--ink-2);
}

/* WHMCS's own wrapper around every list table. The table is a spec sheet: it
   scrolls sideways itself rather than taking the page with it. */
.listtable {
  overflow-x: auto;
}

.announcement {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-card);
}
.announcement h3,
.announcement .h3 {
  color: var(--ink);
}
.announcement .date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.view-ticket .ticket-reply {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--card);
}
.view-ticket .ticket-reply.staff {
  background-color: var(--paper-2);
  border-color: var(--line-strong);
}
.view-ticket .ticket-reply .name {
  font-weight: 700;
  color: var(--ink);
}
.view-ticket .ticket-reply .date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.affiliate-stat {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--card);
}
.affiliate-stat .stat {
  color: var(--ink);
  font-weight: 700;
}
.affiliate-stat .label {
  font-size: var(--text-xs);
  color: var(--ink-2);
}

.products .product,
.store-order-container .product {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-card);
}
.products .product:hover {
  box-shadow: var(--shadow-hover);
}
.product-details .price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 700;
}

.domain-checker-container {
  background-color: var(--ink-line);
  color: var(--on-ink);
  border-radius: var(--r-lg);
}
.domain-checker-container .form-control {
  border-color: transparent;
}
/* The parent wraps this in bg-white !important, which beats our background and
   color above — only the radius still shows, against --paper. */
.home-domain-search {
  border-radius: var(--r-lg);
}
.featured-tld {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--card);
}
.featured-tld .tld {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
}
.tld-pricing-header {
  background-color: var(--paper-2);
  color: var(--ink-2);
}
/* Bootstrap declares .text-primary/.text-warning !important (see above); both
   caption static promo boxes here (hosting upsell, transfer upsell), not an
   available/unavailable pair, so one brand colour covers both. */
.domain-promo-box .text-primary,
.domain-promo-box .text-warning {
  color: var(--accent-ink) !important;
}
/* Selector-identical to WHMCS's and loads later, yet its #369 still wins — cause
   not identified. Left unforced: a 6px decorative underline is not worth !important. */
.domain-pricing .tld-pricing-header div:nth-child(odd) {
  border-color: var(--line-strong);
  background-color: var(--paper-2);
}

.upgrade .card,
.upgrade .panel {
  border-color: var(--line);
}

.div-service-buttons .btn {
  margin-bottom: var(--sp-2);
}

/* The topbar and master breadcrumb sit above our own header chrome; keep them
   quiet so the brand band below carries the page. */
.topbar {
  background-color: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.topbar .btn {
  color: var(--ink-2);
  font-size: var(--text-sm);
}
.master-breadcrumb {
  background-color: transparent;
}

/* Dashboard's "view more" control reads as a link, not a Bootstrap grey button. */
.btn-view-more {
  color: var(--ink-2);
}
.btn-view-more:hover {
  color: var(--accent-ink);
}
/* WHMCS wins this at div[menuitemname="Active Products/Services"] .btn-view-more.disabled
   (0,3,1) against our (0,2,0). Kept so it applies if that rule ever goes. */
.btn-view-more.disabled,
.btn-view-more:disabled {
  color: var(--ink-3);
}

/* ---- Brand chrome ---------------------------------------------------------- */

.whn-skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1080;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: none;
}
.whn-skip:focus {
  left: 0;
  color: var(--on-ink);
}

.whn-i {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  fill: currentColor;
}

/* The marketing site's components/utility-bar.css, rule for rule: a navy strip
   with the facts on the left and the quick links on the right, shedding links
   from the right as the bar narrows. */
.whn-utility {
  background: var(--ink);
  color: var(--on-ink-2);
  font-size: var(--text-xs);
}
.whn-utility .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  min-height: 36px;
}
/* Both halves are nowrap; without this the bar sets its own floor and the page
   scrolls sideways. */
.whn-utility p,
.whn-utility ul {
  min-width: 0;
  margin: 0;
}
.whn-utility p {
  white-space: nowrap;
}
.whn-utility strong {
  color: var(--on-ink);
  font-weight: 600;
}
.whn-utility ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  padding: 0;
}
.whn-utility li {
  display: flex;
}
.whn-utility a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--r-sm);
  color: var(--on-ink-2);
  white-space: nowrap;
}
.whn-utility a:hover,
.whn-utility a:focus {
  color: var(--on-ink);
  background: color-mix(in srgb, var(--on-ink) 8%, transparent);
}
.whn-utility a[aria-label] {
  padding-inline: 0.35rem;
}
.whn-utility .whn-i {
  width: 13px;
  height: 13px;
}
.whn-utility .dot {
  opacity: 0.5;
  margin-inline: 0.35rem;
}
/* Figures stay consistent with the marketing site's .num treatment. */
.whn-utility .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.whn-utility :focus-visible {
  outline-color: var(--on-ink);
}
@media (max-width: 1100px) {
  .whn-utility .hide-md {
    display: none;
  }
}
/* Not scoped to li — the lead paragraph marks a span and its separator too. */
@media (max-width: 720px) {
  .whn-utility .hide-sm {
    display: none;
  }
  .whn-utility p {
    white-space: normal;
  }
}
@media (max-width: 480px) {
  .whn-utility .hide-xs {
    display: none;
  }
}

/* The marketing site's components/header.css: one 64px row on a card plate —
   logo, menu, actions — sticky under the navy bar. WHMCS's own header is three
   stacked bands; everything they carried lives in .whn-actions instead.
   The parent's .navbar/.navbar-nav classes are deliberately absent: they pin
   .dropdown-menu to position:static outside a .navbar-expand-* context, and
   header.header .navbar a would repaint every label. */
@media (min-width: 1200px) {
  .container {
    max-width: var(--container);
  }
}

.header.whn-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.whn-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
}
.whn-logo {
  flex: 0 0 auto;
  display: inline-flex;
}
/* The site sets the wordmark at 34px; matching it is most of what makes the two
   headers read as one company. The parent's header.header .logo-img caps it at
   60px, so this has to out-specify (0,2,1). */
.header .whn-logo .logo-img {
  height: 34px;
  max-height: none;
  max-width: none;
  width: auto;
}

/* ---- the client menu ---- */
.whn-menu {
  --nav-pad: 0.7rem;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.whn-menu > li {
  position: relative;
}
.header .whn-menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 1.2rem var(--nav-pad);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.header .whn-menu > li > a:hover,
.header .whn-menu > li > a[aria-expanded="true"] {
  background: var(--paper-2);
  color: var(--ink);
}
.header .whn-menu > li > a:focus-visible {
  outline-offset: -4px;
}
/* WHMCS marks no current item on the primary navbar, but an addon that adds the
   class gets the site's 3px bar rather than a colour change. */
.header .whn-menu > li.active > a::after {
  content: "";
  position: absolute;
  left: var(--nav-pad);
  right: var(--nav-pad);
  bottom: 0.7rem;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
}
.whn-chev {
  width: 14px;
  height: 14px;
  transition: transform var(--t-fast);
}
[aria-expanded="true"] > .whn-chev {
  transform: rotate(180deg);
}
/* The chevron replaces it; Bootstrap's triangle would sit beside ours. The
   drawer is outside the header, so it has to be named too. */
.header .dropdown-toggle::after,
.whn-drawer .dropdown-toggle::after {
  display: none;
}
@media (max-width: 1400px) {
  .whn-menu {
    --nav-pad: 0.6rem;
  }
}

/* ---- the actions cluster, where the site puts its login button ---- */
.whn-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  margin-left: auto;
}
.header .whn-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.header .whn-icon-btn:hover,
.header .whn-icon-btn:focus {
  background: var(--paper-2);
  color: var(--ink);
}
.header .whn-icon-btn .whn-i {
  width: 19px;
  height: 19px;
}
.header .whn-icon-btn i {
  font-size: var(--text-base);
}
/* The order form writes into #cartItemCount over ajax, so the count is always
   rendered — an ink pill reads as a figure at zero, not as an alert. */
.header .whn-count {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 0.25rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-mono);
  font-size: calc(var(--text-xs) * 0.82);
  line-height: 1;
}
#accountNotifications .whn-count {
  background: var(--accent-strong);
}

.whn-account {
  display: flex;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.whn-account > li {
  position: relative;
  min-width: 0;
}
/* The site's .btn-primary .btn-sm, carrying WHMCS's account menu instead of a
   Client Login link — logged out the same menu holds Login and Register. */
.header .whn-account > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  max-width: 12rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-sm);
  background: var(--accent-strong);
  color: var(--on-ink);
  font-weight: 600;
  font-size: var(--text-xs);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent-deep) 80%, transparent);
  transition: background var(--t-fast);
}
.header .whn-account > li > a:hover,
.header .whn-account > li > a:focus {
  background: var(--accent-ink);
  color: var(--on-ink);
}
.header .whn-account .whn-i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.whn-account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Only ever seen by staff, so it states itself rather than sharing the account
   button's weight. Not .btn-return-to-admin: the parent pins that class to the
   window edge, rotated, with every declaration !important. */
.header .whn-admin {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--on-ink);
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.header .whn-admin:hover,
.header .whn-admin:focus {
  background: var(--ink-deep);
  color: var(--on-ink);
}
/* "Return to Admin Area" spelled out costs the client menu a whole row, so the
   wording lives in the tooltip and in the accessible name. */
.header .whn-admin span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- search ---- */
/* The parent's header.header .search fixes the box at 325px and zeroes its
   border; both rules sit at (0,2,1) and are answered here, not with !important. */
.header .whn-search .search {
  flex-wrap: nowrap;
  width: 16rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--card);
}
.header .whn-search .search:focus-within {
  border-color: var(--accent-ink);
}
.header .whn-search .form-control,
.header .whn-search .btn-default {
  min-height: 38px;
  border: 0;
  background: none;
  box-shadow: none;
}
.header .whn-search .form-control {
  padding-left: 0;
  font-size: var(--text-sm);
}
/* Collapsed, this button is the search: it has to read as a sibling of the bell
   and the cart, not as a loose glyph. */
.header .whn-search .btn-default {
  padding-inline: 0.6rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
}
.header .whn-search .btn-default:hover,
.header .whn-search .btn-default:focus {
  background: var(--paper-2);
  color: var(--ink);
}
.header .whn-search .whn-i {
  width: 19px;
  height: 19px;
}

/* Opened by the magnifier in the row, over the band below it — the row has no
   width to give a field, and a field that took it would wrap the menu. */
.header .dropdown-menu.whn-search-panel {
  padding: var(--sp-2);
  min-width: 21rem;
}
.header .whn-search-panel .search {
  width: 100%;
}
.header .whn-search-panel .form-control {
  padding-left: var(--sp-3);
}

/* ---- the menu button and the panel it opens ---- */
.header .whn-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: background var(--t-fast);
}
.header .whn-toggle:hover {
  background: var(--paper-2);
}
.header .whn-toggle .whn-i {
  width: 24px;
  height: 24px;
}

/* Below 1200 the client menu, the search box and five controls stop sharing a
   row, so the menu moves into the drawer and the row keeps only its controls. */
@media (max-width: 1199.98px) {
  .whn-bar > .whn-menu,
  .whn-search-bar {
    display: none;
  }
}
@media (min-width: 1200px) {
  .whn-bar {
    flex-wrap: nowrap;
  }
  .header .whn-actions {
    flex: 0 0 auto;
  }
  .header .whn-toggle {
    display: none;
  }
}

/* ---- the drawer the menu button opens ---- */
/* A Bootstrap modal restyled as a left drawer: .modal is already the full-screen
   layer, so it carries the scrim and .modal-dialog is the panel that slides. */
/* Bootstrap drops the panel in from 50px above with .modal.fade .modal-dialog,
   at (0,3,0) — a drawer comes in from its own edge, so this has to carry the
   same weight to replace both the offset and the easing. */
.modal.whn-drawer .modal-dialog {
  width: min(21rem, 86vw);
  max-width: none;
  height: 100%;
  margin-inline: auto 0;
  margin-block: 0;
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease-out);
}
.modal.whn-drawer.show .modal-dialog {
  transform: none;
}
.whn-drawer .modal-content {
  height: 100%;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: -18px 0 32px -18px color-mix(in srgb, var(--ink) 40%, transparent);
  /* The drawer scrolls as one body: in landscape the links alone are taller than
     the screen, so a menu sized to the leftover space gets no room. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.whn-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 60px;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.whn-drawer-head p {
  margin: 0;
  font-weight: 700;
  /* WHMCS's 'menu' string is lowercase; here it is a title. */
  text-transform: capitalize;
}
.whn-drawer-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.whn-drawer-close:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.whn-drawer-close .whn-i {
  width: 22px;
  height: 22px;
}
.whn-drawer-search {
  padding: var(--sp-3) var(--sp-3) 0;
}
.header .whn-drawer-search .search,
.whn-drawer .whn-drawer-search .search {
  width: 100%;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--card);
}
.whn-drawer .whn-drawer-search .form-control,
.whn-drawer .whn-drawer-search .btn-default {
  min-height: 38px;
  border: 0;
  background: none;
  box-shadow: none;
}
.whn-drawer .whn-drawer-search .btn-default {
  padding-inline: 0.6rem;
  color: var(--ink-2);
}
.whn-drawer .whn-drawer-search .whn-i {
  width: 19px;
  height: 19px;
}

/* The five section rows are one rank and read as one: 700, a step up in size. */
.whn-drawer .whn-menu {
  display: block;
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
}
.whn-drawer .whn-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.8rem 0.6rem;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-base);
}
.whn-drawer .whn-menu > li > a:hover,
.whn-drawer .whn-menu > li > a[aria-expanded="true"] {
  background: var(--paper-2);
}
.whn-drawer .whn-chev {
  margin-left: auto;
}
/* Laid out statically by .navbar-nav, so the panel opens the list rather than
   floating over it: a plain indented block, as the site's drawer has it. */
.whn-drawer-nav {
  display: block;
  padding: 0;
}
.whn-drawer .dropdown-menu {
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--sp-2) var(--sp-4);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.whn-drawer .dropdown-item {
  color: var(--ink-2);
}
.whn-drawer .dropdown-item:hover,
.whn-drawer .dropdown-item:focus {
  color: var(--ink);
}
.whn-drawer-foot {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
}
.whn-drawer-foot ul {
  display: grid;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.whn-drawer-foot a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 40px;
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--text-sm);
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.whn-drawer-foot a:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.whn-drawer-foot .whn-i {
  width: 17px;
  height: 17px;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.whn-drawer-foot .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Nothing opens it above the breakpoint, but a modal left open across a resize
   would otherwise stay. */
@media (min-width: 1200px) {
  .whn-drawer.whn-drawer {
    display: none;
  }
}

/* Three fixed-width items on a 360px row: the mark is the one that can give. */
@media (max-width: 900px) {
  .header .whn-logo .logo-img {
    height: clamp(24px, 3.4vw + 15px, 30px);
  }
}
/* Logo, name and hamburger stop sharing a row; the account button keeps its
   place as a mark, and its own menu carries the wording. */
@media (max-width: 560px) {
  .whn-bar {
    gap: var(--sp-2);
  }
  .whn-actions {
    gap: var(--sp-1);
  }
  .header .whn-icon-btn,
  .header .whn-toggle {
    width: 36px;
    height: 36px;
  }
  .header .whn-account > li > a {
    width: 36px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
  }
  .header .whn-account .whn-chev {
    display: none;
  }
  .whn-account-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* The notification popover scripts.js builds from #accountNotificationsContent. */
.popover-user-notifications {
  max-width: 22rem;
}
.client-alerts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.client-alerts a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--text-sm);
}
.client-alerts a:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.client-alerts i {
  margin-top: 0.2rem;
  color: var(--ink-3);
}
.client-alerts .none {
  padding: var(--sp-2);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

/* Dropdown panels hang off the header row, so they carry the site's panel
   treatment rather than Bootstrap's flush list. */
.header .dropdown-menu {
  margin-top: 0;
  min-width: 13rem;
}
.header .dropdown-menu .dropdown-item,
.whn-drawer .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.header .dropdown-menu .badge,
.whn-drawer .dropdown-menu .badge {
  margin-left: auto;
}

/* twenty-one's footer.footer sits at (0,1,1); footer.whn-footer matches it so
   loading last is enough to win, no !important needed. */
footer.whn-footer {
  background: var(--ink-deep);
  color: var(--on-ink-2);
  margin-top: var(--sp-section);
  padding-block: var(--sp-6);
}
.whn-footer a {
  color: var(--on-ink-2);
}
.whn-footer a:hover {
  color: var(--on-ink);
}
.whn-footer h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-ink);
  margin-bottom: var(--sp-3);
}
.whn-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-5);
}
.whn-footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.whn-footer-grid li {
  font-size: var(--text-sm);
  min-width: 0;
}
.whn-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-line);
  font-size: var(--text-xs);
}
.whn-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* twenty-one's footer.footer .btn sits at (0,2,1); match it the same way. */
footer.whn-footer .btn {
  color: var(--on-ink-2);
  padding: 0;
  min-height: 0;
}
/* twenty-one's footer.footer .copyright sits at (0,2,1); match it the same way. */
footer.whn-footer .copyright {
  color: var(--on-ink-2);
}

/* ---- Component parity ------------------------------------------------------ */
/* Tokens alone left the client area reading as a recoloured WHMCS. These map
   WHMCS's own components onto @whn/design-system's component vocabulary —
   the 44/72px rounded icon tile, the one-surface card, the .menu row. */

/* The site has no green buttons; WHMCS uses .btn-success for primary actions
   (Update, Register), so it takes the brand orange like any other primary. */
.btn-success,
.btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-ink);
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--on-ink);
}

/* twenty-one's stock hex palette, nineteen classes, used on buttons and the
   tile underline. Ramp onto our three semantic tones like .card-accent-*. */
.bg-color-gold,
.bg-color-orange,
.bg-color-red,
.bg-color-pomegranate,
.bg-color-magenta,
.bg-color-pink,
.bg-color-sun-flower {
  background-color: var(--accent-strong);
}
.bg-color-green,
.bg-color-lime,
.bg-color-emerald,
.bg-color-teal,
.bg-color-turquoise {
  background-color: var(--ok);
}
.bg-color-blue,
.bg-color-purple,
.bg-color-amethyst,
.bg-color-midnight-blue,
.bg-color-wet-asphalt,
.bg-color-asbestos,
.bg-color-silver {
  background-color: var(--ink-2);
}

/* .side .icon, .product .icon: a rounded --paper-2 tile with the glyph centred.
   It is the single most recognisable mark of the site's card language. */
.tiles .tile > .fas,
.tiles .tile > .far,
.tiles .tile > .fab,
.client-home-cards .card-title > .fas,
.client-home-cards .card-title > .far {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
}

/* The site sets figures in mono with a small caps label beneath. */
.tiles .tile {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.tiles .tile:hover {
  border-color: var(--ink-2);
  box-shadow: var(--shadow-hover);
}
.tiles .tile .stat {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.tiles .tile .title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* The underline is decoration; the site keeps rules at --line weight. */
.tiles .tile .highlight {
  height: 3px;
  border-radius: 2px;
}

/* The site's cards are one surface — no banded header. */
.client-home-cards .card-header,
.sidebar .card-header,
.sidebar .panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.client-home-cards .card-title,
.sidebar .card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink);
}
/* float-right does nothing to a flex child, so the header's action and the
   collapse chevron are ordered and pushed explicitly instead. */
.client-home-cards .card-title > .float-right,
.sidebar .card-title > .card-minimise {
  order: 1;
  margin-left: auto;
  float: none;
}
.sidebar .card-title > .card-minimise {
  color: var(--ink-3);
}

/* .side: a link row that lifts on hover instead of tinting a Bootstrap stripe. */
.sidebar .list-group-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.7rem var(--sp-4);
  font-size: var(--text-sm);
  color: var(--ink);
  transition: background var(--t-fast);
}
.sidebar .list-group-item .fas,
.sidebar .list-group-item .far {
  width: 20px;
  color: var(--ink-3);
  text-align: center;
}
.sidebar .list-group-item-action:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.sidebar .list-group-item.active .fas,
.sidebar .list-group-item.active .far {
  color: var(--accent-strong);
}

/* The site opens every inner page on a navy band with an eyebrow above the title
   (components/page-hero.css). WHMCS already renders exactly that content in the
   breadcrumb — the trail, then the current page — so the band is CSS, not markup. */
.master-breadcrumb {
  background: var(--ink-line);
  padding-block: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.master-breadcrumb .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-2);
  margin: 0;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a {
  color: var(--on-ink-2);
  font-size: var(--text-xs);
}
.master-breadcrumb .breadcrumb-item a:hover {
  color: var(--on-ink);
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--on-ink-2);
}
/* The current page is the page title: its own line, at the site's h1 scale. */
.master-breadcrumb .breadcrumb-item.active {
  flex-basis: 100%;
  margin-top: var(--sp-2);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}
.master-breadcrumb .breadcrumb-item.active::before {
  content: none;
}

/* The site gives every band 96px; a working dashboard does not want that, but
   20px is a control panel, not a brand. */
#main-body > .container,
#main-body > div {
  padding-block: var(--sp-2) var(--sp-7);
}
.client-home-cards .card,
.sidebar .card,
.sidebar .panel {
  margin-bottom: var(--sp-5);
}
.client-home-cards .card-body,
.sidebar .card-body,
.sidebar .panel-body {
  padding: var(--sp-4);
}