/* ============================================================
   IronWipe (rust-server-hosting.com): WHMCS client area
   Ported from the IronWipe site (ironwipe-site/css/style.css):
   Roboto Condensed, near-black canvas, rust red brand, gold CTA,
   moss green status, square corners, flat surfaces.

   Derived from the EUGameHost twenty-one theme. What changed:
     . section 1 tokens re-pointed at the IronWipe palette; one face
       (Roboto Condensed) for display and body; every radius is 0,
       because the site has no rounded corner outside its status dots;
     . headings, buttons, table heads and nav labels are uppercase,
       as they are on the site;
     . section 4 (site chrome) is a fresh port of the IronWipe topbar,
       dropdowns, Guides mega menu, mobile panel and footer. The www
       header, its four mega menus, the nav-2026.css links and
       nav-games.js are gone;
     . the chrome classes carry an iw- prefix (.topbar, .nav-link, .btn,
       .modal and .card on the site collide with Bootstrap and WHMCS);
     . the content shell is 1200px with 24px gutters (the site's .wrap),
       not the 1480px shell www needed;
     . the app-bar credit chip is .iw-credit-balance (was .eug-credit-balance);
     . sections 2, 3, 5, 6 and 7 keep the twenty-one rules, retokenised:
       blue tints became rust tints, lime became gold, mint became moss,
       the two pill radii became square, the one gradient became a plate.

   Layout of this file
     1. Tokens + page foundation
     2. Bootstrap 4 component overrides (every WHMCS page)
     3. Order form / cart / domain flows
     4. Imported site chrome: topbar, dropdowns, mobile panel, footer
     5. WHMCS application bar
     6. Gap fill
     7. Mobile
   ============================================================ */

/* ── Font: the site's single face, same weights it loads ─────── */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* ── Core variables ───────────────────────────────────────────
   --egh-* are the names the whole client area is written against
   (kept from twenty-one so sections 2 to 7 carry over unchanged).
   --c-* and --font mirror the site's own token names so the imported
   chrome below is a near copy of the site's CSS.                 */
:root {
    /* Surfaces */
    --egh-bg:            #0d0d0d;   /* canvas (--c-bg) */
    --egh-bg-card:       #0f0d0c;   /* --c-panel-alt: cards, plans */
    --egh-bg-raised:     #141414;   /* --c-panel-solid: dropdowns, popovers */
    --egh-bg-input:      #1a1918;   /* the site's #ffffff12 input plate, flattened over the panel */
    --egh-bg-interactive:#1f1d1b;   /* row hover, flattened */

    /* Lines */
    --egh-border:        #ffffff1a; /* --c-border */
    --egh-border-subtle: #ffffff10;
    --egh-border-blue:   rgba(205,65,43,0.55);  /* name kept so the shared rules resolve; it is rust now */

    /* Brand */
    --egh-primary:       #cd412b;   /* --c-rust */
    --egh-primary-hov:   #e0553e;
    --egh-primary-deep:  #a83421;   /* --c-rust-dark */
    --egh-secondary:     #ef7a64;   /* the site's lighter rust (.stat .v.is-rust) */
    --egh-accent:        #d5a118;   /* --c-gold: the one CTA colour (.btn-gold) */
    --egh-accent-hov:    #e8b325;   /* .btn-gold:hover is brightness(1.1) */
    --egh-accent-ink:    #241c05;   /* label colour on gold */

    /* Focus plate (the site's ring is #f0d9a0) */
    --egh-glow:          rgba(240,217,160,0.35);
    --egh-glow-strong:   rgba(240,217,160,0.6);

    /* Text */
    --egh-text:          #e6e0da;   /* --c-text */
    --egh-text-dim:      #cfc9c2;   /* the site's nav and body-copy tone */
    --egh-muted:         #9a948e;   /* --c-text-dim */

    /* Status */
    --egh-danger:        #ef7a64;
    --egh-success:       #9cb54e;   /* --c-moss */
    --egh-warning:       #d5a118;
    --egh-info:          #cd412b;

    /* Shape: the site has no rounded corners */
    --egh-radius:        0;
    --egh-radius-lg:     0;
    --egh-pill:          0;

    /* Type */
    --egh-font-display:  'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
    --egh-font-body:     'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;

    /* Site token aliases, used verbatim by the imported chrome */
    --c-bg:              #0d0d0d;
    --c-panel-solid:     #141414;
    --c-panel-alt:       #0f0d0c;
    --c-chip:            #ffffff14;
    --c-text:            #e6e0da;
    --c-text-dim:        #9a948e;
    --c-border:          #ffffff1a;
    --c-rust:            #cd412b;
    --c-rust-dark:       #a83421;
    --c-gold:            #d5a118;
    --c-moss:            #9cb54e;
    --c-moss-dark:       #55771f;
    --font:              'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
    --topbar-h:          72px;
    --iw-wrap:           1200px;    /* the site's .wrap / .footer-cols width */
}

/* ── Page foundation ──────────────────────────────────────── */
html, body {
    background-color: var(--egh-bg) !important;
    color: var(--egh-text) !important;
    font-family: var(--egh-font-body) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.primary-bg-color {
    background-color: var(--egh-bg) !important;
}

section#main-body {
    background-color: var(--egh-bg) !important;
    padding: 40px 0 64px !important;
}

/* The site topbar is sticky, so anything the browser scrolls to (an
   in-page anchor, or a control taking keyboard focus) has to clear it,
   or it lands underneath (SC 2.4.11). 72px topbar + 20px, the site's
   own scroll-margin. */
html { scroll-padding-top: 92px; }
[id] { scroll-margin-top: 92px; }

/* One focus ring for every control, the site's own: 2px #f0d9a0.
   Measured: #f0d9a0 on #0d0d0d = 14.6:1.

   !important is required, not stylistic. theme.min.css ships
   `.btn:focus{outline:0}`, `.form-control:focus{outline:0}`,
   `.custom-select:focus{outline:0}` and `.page-link:focus{outline:0}`,
   all at (0,2,0), which outrank a plain `body :focus-visible` at (0,1,1)
   and would silently swallow the ring on exactly the controls that need
   it. `.btn:focus{box-shadow:none}` removes the framework's own fallback
   ring too, so without this there is no keyboard focus indicator on
   buttons at all (SC 2.4.7). */
body :focus-visible {
    outline: 2px solid #f0d9a0 !important;
    outline-offset: 2px !important;
}

/* ── Typography ─────────────────────────────────────────────
   One face throughout. Headings are white, bold and uppercase with a
   hair of tracking, the way every section head on the site is set. */
h1, h2, h3, h4, h5, h6,
.card-title,
.mc-promo-manage .panel-heading h3,
.mc-promo-login .panel-heading h3 {
    color: #fff !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01em !important;
}

h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem) !important; line-height: 1.08 !important; }
h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem) !important; line-height: 1.12 !important; }
h3 { font-size: 1.2rem !important; letter-spacing: 0.02em !important; }

/* Page title above the content column */
#main-body h1 { margin-bottom: 22px !important; }

p, li, label, small {
    color: var(--egh-text-dim);
}

body {
    font-size: 0.95rem;
    line-height: 1.6;
}

.text-muted {
    color: var(--egh-muted) !important;
}

/* ── Links ────────────────────────────────────────────────────
   Gold, as .card p a is set on the site. The site's underline is kept
   for links inside copy only: WHMCS renders hundreds of anchors as
   buttons, tabs, rows and tiles, and a global underline reaches them
   all. */
a {
    color: var(--egh-accent);
    text-decoration: none;
    transition: color 0.12s ease;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
p a, li:not(.nav-item):not(.list-group-item) > a:not(.btn), td a:not(.btn), dd a, small a, label a, .alert a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.master-breadcrumb {
    background-color: var(--egh-bg-card) !important;
    border-bottom: 1px solid var(--egh-border) !important;
}
.master-breadcrumb .breadcrumb {
    background-color: transparent !important;
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
/* inline <a> in a breadcrumb measures 23px tall, 1px under the 24x24
   minimum target (SC 2.5.8). inline-block so the padding takes effect. */
.breadcrumb-item a {
    color: var(--egh-muted);
    display: inline-block;
    padding: 3px 0;
}
.breadcrumb-item a:hover { color: #fff; }
.breadcrumb-item.active {
    color: var(--egh-text) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--egh-muted) !important;
}

/* ── Cards ────────────────────────────────────────────────────
   The site's .card and .plan: a flat #0f0d0c plate with a hairline
   border and square corners. No shadow, no lift, no accent line. */
.card,
.mc-promo-manage,
.mc-promo-login {
    background-color: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: 0 !important;
    color: var(--egh-text) !important;
    box-shadow: none !important;
    transition: border-color 0.12s ease !important;
    position: relative;
    overflow: hidden;
}

.card:hover,
.mc-promo-manage:hover,
.mc-promo-login:hover {
    border-color: #ffffff2e !important;
}

.card-header {
    background-color: var(--egh-bg-raised) !important;
    border-bottom: 1px solid var(--egh-border) !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 14px !important;
}

.card-footer {
    background-color: rgba(255,255,255,0.02) !important;
    border-top: 1px solid var(--egh-border) !important;
    color: var(--egh-muted) !important;
    border-radius: 0 !important;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar .card {
    border-color: var(--egh-border) !important;
}

.sidebar .list-group-item {
    background-color: transparent !important;
    border-color: var(--egh-border-subtle) !important;
    color: var(--egh-muted) !important;
    transition: all 0.12s ease !important;
    font-size: 0.9rem;
}

.sidebar .list-group-item:hover {
    background-color: #ffffff0f !important;
    color: #fff !important;
    padding-left: 20px !important;
}

/* Active row: the site marks its current dropdown item with a 3px rust
   inset bar on a #ffffff0f plate (.nav-dropdown a.is-current). */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover {
    background: #ffffff0f !important;
    border-color: var(--egh-border-subtle) !important;
    box-shadow: inset 3px 0 var(--egh-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.sidebar .card-title {
    color: var(--egh-muted) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* ── Form controls ────────────────────────────────────────────
   The site's inputs are a borderless #ffffff12 plate (.browser-search
   input). Flattened to a solid, with a hairline so disabled and focus
   states have something to change. */
.form-control {
    background-color: var(--egh-bg-input) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: 0 !important;
    color: #fff !important;
    letter-spacing: 0.03em;
    transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
}

.form-control:focus {
    background-color: var(--egh-bg-input) !important;
    border-color: var(--egh-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.form-control::placeholder {
    color: #7c766f !important;
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--egh-muted) !important;
    border-color: var(--egh-border-subtle) !important;
}

.input-group-text {
    background-color: var(--egh-bg-raised) !important;
    border-color: var(--egh-border) !important;
    color: var(--egh-muted) !important;
    border-radius: 0 !important;
}

.custom-select,
select.form-control {
    background-color: var(--egh-bg-input) !important;
    border-color: var(--egh-border) !important;
    color: #fff !important;
    border-radius: 0 !important;
}

select.form-control option,
.custom-select option {
    background-color: var(--egh-bg-raised);
    color: var(--egh-text);
}

/* Field labels follow the site's .stat .k: small, uppercase, tracked.
   Check and radio labels are sentences ("I agree to the terms"), so
   they keep sentence case at body size. */
label {
    color: var(--egh-muted) !important;
    font-size: 12px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px !important;
}
.custom-control-label,
.form-check-label,
.checkbox label,
.radio label {
    font-size: 0.95rem;
    font-weight: 400 !important;
    text-transform: none;
    letter-spacing: 0;
    color: var(--egh-text-dim) !important;
}

.form-group {
    margin-bottom: 1.2rem !important;
}

/* Checkbox / radio */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--egh-primary) !important;
    border-color: var(--egh-primary) !important;
}

.custom-control-label::before {
    background-color: var(--egh-bg-input) !important;
    border-color: #ffffff33 !important;
    border-radius: 0 !important;
}

/* ── Buttons ──────────────────────────────────────────────────
   The site's .btn system: uppercase, tracked, square, no border.
   gold = the one action you want taken (.btn-gold), ghost plate =
   everything else (.btn-ghost), rust = destructive (.btn-rust),
   moss = confirm (.btn-green). */
.btn {
    border: 0 !important;
    border-radius: 0 !important;
    font-family: var(--egh-font-body) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 12px 20px !important;
    transition: background 0.12s, color 0.12s, filter 0.12s, transform 70ms !important;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-sm { padding: 8px 13px !important; font-size: 12.5px !important; }
.btn-lg { padding: 16px 28px !important; font-size: 15px !important; }

/* Primary = gold CTA, exactly .btn-gold on the site */
.btn-primary {
    background: var(--egh-accent) !important;
    color: var(--egh-accent-ink) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--egh-accent-hov) !important;
    color: var(--egh-accent-ink) !important;
}

/* Secondary = translucent plate, as .btn-ghost */
.btn-default,
.btn-secondary {
    background-color: #ffffff12 !important;
    color: var(--egh-text) !important;
}
.btn-default:hover,
.btn-secondary:hover,
.btn-default:focus,
.btn-secondary:focus {
    background-color: #ffffff22 !important;
    color: #fff !important;
}

/* Status buttons: the site's solid moss and rust fills. */
.btn-success {
    background: var(--c-moss-dark) !important;
    color: #fff !important;
}
.btn-success:hover {
    background: #67902a !important;
    color: #fff !important;
}

/* Danger = the site's .btn-rust: solid rust, white label */
.btn-danger {
    background: var(--c-rust) !important;
    color: #fff !important;
}
.btn-danger:hover {
    background: var(--egh-primary-hov) !important;
    color: #fff !important;
}

/* Warning and info have no fill on the site; tinted plates so they sit on
   the canvas the way the status chips do. */
.btn-warning {
    background: rgba(213,161,24,0.14) !important;
    color: var(--egh-warning) !important;
}
.btn-warning:hover {
    background: rgba(213,161,24,0.22) !important;
    color: var(--egh-warning) !important;
}

.btn-info {
    background: rgba(205,65,43,0.14) !important;
    color: var(--egh-secondary) !important;
}
.btn-info:hover {
    background: rgba(205,65,43,0.22) !important;
    color: var(--egh-secondary) !important;
}

.btn.disabled, .btn:disabled {
    opacity: 0.45 !important;
}

.btn-outline-primary {
    color: var(--egh-primary) !important;
    border: 1px solid var(--egh-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: rgba(205,65,43,0.12) !important;
    border-color: var(--egh-primary) !important;
    color: var(--egh-primary) !important;
}

.btn-link {
    color: var(--egh-primary) !important;
}
.btn-link:hover {
    color: var(--egh-secondary) !important;
}

/* ── Tables ───────────────────────────────────────────────── */
.table {
    color: var(--egh-text) !important;
}

.table th,
.table td {
    border-color: var(--egh-border-subtle) !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

.table thead th {
    background-color: rgba(205,65,43,0.08) !important;
    color: var(--egh-primary) !important;
    border-color: var(--egh-border) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--egh-border) !important;
}

table.table-list thead th {
    background-color: rgba(205,65,43,0.08) !important;
    color: var(--egh-primary) !important;
    border-color: var(--egh-border) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}

.table-list > tbody > tr > td {
    background-color: var(--egh-bg-card) !important;
    color: var(--egh-text) !important;
    border-color: var(--egh-border-subtle) !important;
}

.table-list > tbody > tr:hover > td {
    background-color: rgba(205,65,43,0.06) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.02) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(205,65,43,0.06) !important;
    color: var(--egh-text) !important;
}

.dataTables_wrapper table.table-list {
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
    overflow: hidden;
}

/* ── Dropdowns ────────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    padding: 4px 0 !important;
}

/* Highlight lives on the <li> only */
li.dropdown-item {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transition: background-color 0.2s ease !important;
}

li.dropdown-item:hover,
li.dropdown-item:focus {
    background-color: rgba(205,65,43,0.12) !important;
}

li.dropdown-item.active {
    background: rgba(205,65,43,0.14) !important;
}

/* <a> is purely a text/layout element - no hover background.
   ---------------------------------------------------------------------
   The second selector is the "More" overflow menu. scripts.js:22910
   (autoCollapse) moves overflowing nav items in with

       child.removeClass().addClass('dropdown-item');

   which rewrites the <li> only: the <a> keeps its original `pr-4` and
   never gains .dropdown-item, so a class-based selector misses it and the
   label falls back to .dropdown-menu's own `color:#212529` (1.3:1 on this
   panel). It has to be matched by position instead.

   Keep it in the SAME rule rather than a parallel one: when it was written
   as its own block the two drifted, and the More items rendered at
   font-weight 500 against 400 everywhere else. */
a.dropdown-item,
.collapsable-dropdown-menu > li > a {
    background-color: transparent !important;
    color: var(--egh-muted) !important;
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    display: block !important;
    width: 100% !important;
    border-bottom: 0 !important;
    transition: color 0.2s ease !important;
}

a.dropdown-item:hover,
a.dropdown-item:focus,
a.dropdown-item:active,
.collapsable-dropdown-menu > li > a:hover,
.collapsable-dropdown-menu > li > a:focus,
.collapsable-dropdown-menu > li > a:active {
    background-color: transparent !important;
    color: var(--egh-text) !important;
}

li.dropdown-item.active a.dropdown-item {
    color: #fff !important;
}

/* Badges WHMCS carries over with a moved item (e.g. open ticket counts) */
.collapsable-dropdown-menu > li > a .badge {
    background: var(--egh-primary) !important;
    color: #ffffff !important;
}

.dropdown-divider {
    border-color: var(--egh-border-subtle) !important;
    margin: 4px 0 !important;
}

.dropdown-header {
    color: var(--egh-primary) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}

/* ── Nav tabs (detail page tabs) ──────────────────────────── */
.nav-tabs {
    border-color: var(--egh-border) !important;
}

.nav-tabs .nav-link {
    color: var(--egh-muted) !important;
    border-color: transparent !important;
    border-radius: var(--egh-radius) var(--egh-radius) 0 0 !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.nav-tabs .nav-link:hover {
    color: var(--egh-text) !important;
    background-color: rgba(205,65,43,0.06) !important;
    border-color: var(--egh-border-subtle) var(--egh-border-subtle) transparent !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--egh-bg-card) !important;
    border-color: var(--egh-border) var(--egh-border) var(--egh-bg-card) !important;
    color: var(--egh-primary) !important;
    font-weight: 600 !important;
}

/* ── Nav pills ────────────────────────────────────────────── */
.nav-pills .nav-link {
    color: var(--egh-muted) !important;
    border-radius: var(--egh-radius) !important;
    transition: all 0.2s ease !important;
}
.nav-pills .nav-link:hover {
    background-color: rgba(205,65,43,0.08) !important;
    color: var(--egh-text) !important;
}
.nav-pills .nav-link.active {
    background: var(--egh-primary) !important;
    color: #ffffff !important;
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination {
    gap: 4px;
}

.page-link {
    background-color: var(--egh-bg-raised) !important;
    border-color: var(--egh-border) !important;
    color: var(--egh-muted) !important;
    border-radius: var(--egh-radius) !important;
    transition: all 0.2s ease !important;
}

.page-link:hover {
    background-color: rgba(205,65,43,0.12) !important;
    border-color: var(--egh-primary) !important;
    color: var(--egh-primary) !important;
}

.page-item.active .page-link {
    background: var(--egh-primary) !important;
    border-color: var(--egh-primary) !important;
    color: #ffffff !important;
}

.page-item.disabled .page-link {
    background-color: var(--egh-bg-card) !important;
    border-color: var(--egh-border-subtle) !important;
    color: rgba(255,255,255,0.2) !important;
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    border-radius: var(--egh-radius) !important;
    border-left-width: 3px !important;
}

.alert-primary {
    background-color: rgba(205,65,43,0.1) !important;
    border-color: var(--egh-primary) !important;
    color: #cd412b !important;
}

.alert-success {
    background-color: rgba(156,181,78,0.1) !important;
    border-color: var(--egh-success) !important;
    color: #9cb54e !important;
}

.alert-danger {
    background-color: rgba(239,122,100,0.1) !important;
    border-color: var(--egh-danger) !important;
    color: #ef7a64 !important;
}

.alert-warning {
    background-color: rgba(213,161,24,0.1) !important;
    border-color: var(--egh-warning) !important;
    color: #d5a118 !important;
}

.alert-info {
    background-color: rgba(205,65,43,0.1) !important;
    border-color: #cd412b !important;
    color: #cd412b !important;
}

.alert-secondary {
    background-color: var(--egh-bg-raised) !important;
    border-color: var(--egh-border) !important;
    color: var(--egh-muted) !important;
}

/* Links inside alerts. The framework gives every variant a near-black
   .alert-link (#533f03 on warning, #062c33 on info, …) intended for light
   plates; on these tinted dark plates they measured 1.76:1: the "Learn more"
   in the network-issue banner was effectively invisible. Inheriting the
   alert's own colour keeps each link at the contrast already verified for
   that variant's body text, and the underline carries the affordance. */
.alert .alert-link,
.alert a {
    color: inherit !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    /* bare inline links here measure 17px tall: under the 24x24 minimum
       (SC 2.5.8), which applies at every width, not just on phones */
    display: inline-block;
    padding: 4px 0;
}
.alert .alert-link:hover,
.alert a:hover { opacity: 0.82; }

/* ── Legacy Bootstrap 3 labels ────────────────────────────────
   Still emitted by store/ox/manage.tpl and service-renewal-item.tpl, and
   added at runtime by scripts.js (label-warning). The framework fills them
   with saturated mid-tones and white text: measured 1.95:1 on warning,
   2.09:1 on info, 2.48:1 on success. Restyled as tinted plates so they
   match the .badge / .status-* family. */
.label {
    display: inline-block;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2;
}
.label-default {
    background-color: rgba(255,255,255,0.06) !important;
    color: var(--egh-muted) !important;
    border: 1px solid var(--egh-border-subtle) !important;
}
.label-success {
    background-color: rgba(156,181,78,0.16) !important;
    color: var(--egh-success) !important;
    border: 1px solid rgba(156,181,78,0.4) !important;
}
.label-info {
    background-color: rgba(205,65,43,0.16) !important;
    color: var(--egh-primary) !important;
    border: 1px solid var(--egh-border-blue) !important;
}
.label-warning {
    background-color: rgba(213,161,24,0.16) !important;
    color: var(--egh-warning) !important;
    border: 1px solid rgba(213,161,24,0.4) !important;
}
.label-danger {
    background-color: rgba(239,122,100,0.16) !important;
    color: var(--egh-danger) !important;
    border: 1px solid rgba(239,122,100,0.4) !important;
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    border-radius: 0 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
}

.badge-primary,
.badge-info {
    background: var(--egh-primary) !important;
    color: #ffffff !important;
}

.badge-success {
    background-color: rgba(156,181,78,0.2) !important;
    color: #9cb54e !important;
    border: 1px solid rgba(156,181,78,0.4) !important;
}

.badge-danger {
    background-color: rgba(239,122,100,0.2) !important;
    color: #ef7a64 !important;
    border: 1px solid rgba(239,122,100,0.4) !important;
}

.badge-warning {
    background-color: rgba(213,161,24,0.2) !important;
    color: #d5a118 !important;
    border: 1px solid rgba(213,161,24,0.4) !important;
}

/* ── Status labels (WHMCS service statuses) ───────────────── */
.status-active,
.status-open,
.status-completed,
.status-paid {
    background: rgba(156,181,78,0.16) !important;
    color: #9cb54e !important;
    border: 1px solid rgba(156,181,78,0.4) !important;
    border-radius: 0 !important;
}

.status-pending,
.status-unpaid {
    background: rgba(239,122,100,0.16) !important;
    color: #ef7a64 !important;
    border: 1px solid rgba(239,122,100,0.4) !important;
    border-radius: 0 !important;
}

.status-suspended {
    background: rgba(213,161,24,0.16) !important;
    color: #d5a118 !important;
    border: 1px solid rgba(213,161,24,0.4) !important;
    border-radius: 0 !important;
}

.status-terminated,
.status-cancelled,
.status-closed {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--egh-muted) !important;
    border: 1px solid var(--egh-border-subtle) !important;
    border-radius: 0 !important;
}

.status-onhold,
.status-payment-pending,
.status-delivered {
    background: rgba(205,65,43,0.14) !important;
    color: #cd412b !important;
    border: 1px solid rgba(205,65,43,0.4) !important;
    border-radius: 0 !important;
}

/* ── List groups ──────────────────────────────────────────── */
.list-group-item {
    background-color: var(--egh-bg-card) !important;
    border-color: var(--egh-border-subtle) !important;
    color: var(--egh-text) !important;
    transition: all 0.2s ease !important;
}

.list-group-item-action:hover {
    background-color: rgba(205,65,43,0.06) !important;
    color: var(--egh-text) !important;
}

.list-group-item.active {
    background: rgba(205,65,43,0.14) !important;
    border-color: var(--egh-primary) !important;
    color: #fff !important;
}

/* ── Modals ───────────────────────────────────────────────── */
.modal-content {
    background-color: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7) !important;
}

.modal-header {
    background-color: rgba(205,65,43,0.05) !important;
    border-bottom: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) var(--egh-radius-lg) 0 0 !important;
}

.modal-title {
    color: var(--egh-text) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 600 !important;
}

.modal-footer {
    background-color: rgba(255,255,255,0.02) !important;
    border-top: 1px solid var(--egh-border) !important;
    border-radius: 0 0 var(--egh-radius-lg) var(--egh-radius-lg) !important;
}

.modal-header > .close {
    color: var(--egh-muted) !important;
    opacity: 0.7;
    transition: all 0.2s ease !important;
}

.modal-header > .close:hover {
    color: #fff !important;
    opacity: 1;
}

.modal-backdrop.show {
    opacity: 0.7 !important;
}

/* ── Popovers (notifications) ─────────────────────────────── */
.popover {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

.popover-header {
    background-color: rgba(205,65,43,0.05) !important;
    border-color: var(--egh-border) !important;
    color: var(--egh-text) !important;
    border-radius: var(--egh-radius) var(--egh-radius) 0 0 !important;
    font-weight: 600 !important;
}

.popover-body {
    color: var(--egh-text) !important;
    padding: 0 !important;
}

.popover-user-notifications {
    background-color: var(--egh-bg-raised) !important;
    border-color: var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
}

.popover-user-notifications ul li {
    border-color: var(--egh-border-subtle) !important;
}

.popover-user-notifications ul li a {
    color: var(--egh-text) !important;
    transition: background 0.2s ease !important;
}

.popover-user-notifications ul li a:hover {
    background-color: rgba(205,65,43,0.08) !important;
}

/* ── Progress bars ────────────────────────────────────────── */
.progress {
    background-color: rgba(255,255,255,0.06) !important;
    border-radius: 0 !important;
    height: 8px !important;
}

.progress-bar {
    background: var(--egh-primary) !important;
    border-radius: 0 !important;
}

/* ── HR ───────────────────────────────────────────────────── */
hr {
    border-color: var(--egh-border-subtle) !important;
}

/* ── Jumbotron ────────────────────────────────────────────── */
.jumbotron {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
    color: var(--egh-text) !important;
}

/* ── Client home tiles ────────────────────────────────────── */
.tiles .tile {
    background-color: var(--egh-bg-card) !important;
    border-right-color: var(--egh-border-subtle) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
    transition: all 0.3s ease !important;
}

.tiles .tile .title {
    color: var(--egh-muted) !important;
}

.tiles .tile i {
    color: rgba(205,65,43,0.1) !important;
    transition: all 0.3s ease !important;
}

.tiles .tile:hover {
    background-color: var(--egh-bg-raised) !important;
    cursor: pointer;
}

.tiles .tile:hover i {
    color: rgba(205,65,43,0.25) !important;
}

/* ── Action icon buttons ──────────────────────────────────── */
.action-icon-btns a {
    background-color: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border-subtle) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-muted) !important;
    transition: all 0.3s ease !important;
}

.action-icon-btns a:hover {
    border-color: var(--egh-primary) !important;
    background-color: rgba(205,65,43,0.06) !important;
    color: var(--egh-text) !important;
}

.action-icon-btns a .ico-container i {
    color: rgba(205,65,43,0.2) !important;
    transition: all 0.3s ease !important;
}

.action-icon-btns a:hover .ico-container i {
    color: var(--egh-primary) !important;
}

/* ── Client home cards ────────────────────────────────────── */
.client-home-cards .card-header {
    background-color: rgba(205,65,43,0.05) !important;
    font-weight: 600 !important;
}

.client-home-cards .list-group {
    border-color: var(--egh-border-subtle) !important;
}

.client-home-cards .list-group .list-group-item {
    border-color: var(--egh-border-subtle) !important;
}

.client-home-cards small {
    color: var(--egh-muted) !important;
}

/* ── Ticket view ──────────────────────────────────────────── */
.view-ticket .posted-by {
    background-color: rgba(205,65,43,0.05) !important;
    border-bottom: 1px solid var(--egh-border-subtle) !important;
    color: var(--egh-muted) !important;
}

.view-ticket .posted-by .posted-by-name {
    color: var(--egh-primary) !important;
}

.view-ticket .attachments {
    border-color: var(--egh-border-subtle) !important;
}

.view-ticket .attachment-list li span {
    background-color: var(--egh-bg-raised) !important;
    border-color: var(--egh-border) !important;
}

.view-ticket .attachment-list li figure {
    background-color: var(--egh-bg-raised) !important;
}

/* ── Ticket reply star rating ─────────────────────────────────
   viewticket.tpl emits five empty <span class="star"> and theme.min.css
   paints them as ::before glyphs:

       .ticket-reply .rating span.star:before {
           font-family: "Font Awesome 5 Pro"; content: "\f005"; }

   but nothing defines that @font-face: it has to come from WHMCS core's
   /assets/css/fontawesome-all.min.css. Where that ships Free rather than
   Pro the family never resolves, and because U+F005 is a Private Use Area
   codepoint there is no fallback glyph and no tofu box: the spans simply
   paint nothing. Measured with canvas: "Font Awesome 5 Pro" gave a 31.11px
   advance, byte-identical to a deliberately nonexistent family, while
   "Font Awesome 5 Free" gave 45px.

   Appending the Free families fixes it without changing anything where Pro
   IS present, since Pro stays first in the list. Weight is left at the
   framework's 400: fa-star exists in Free Regular (verified: 400 and 900
   both measured 45px), so the hollow-star design is preserved. */
.ticket-reply .rating span.star,
.ticket-reply .rating-done span.star {
    font-family: "Font Awesome 5 Pro", "Font Awesome 6 Pro",
                 "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    /* the .rating stars are clickable controls but measure ~19px wide as
       bare glyphs: pad them to the 24x24 minimum (SC 2.5.8) */
    font-size: 1.05rem !important;
    padding: 2px 4px !important;
}

/* ── Verification banner ──────────────────────────────────────
   This is a warning, so it is tinted amber rather than brand blue -
   a blue plate with a grey icon read as decoration and the whole bar
   was easy to scroll past. The icon inherits #666 from the framework
   otherwise, which lands around 2.5:1 on this plate. */
.verification-banner {
    background-color: rgba(213,161,24,0.10) !important;
    border-top: 1px solid rgba(213,161,24,0.28) !important;
    border-bottom: 1px solid rgba(213,161,24,0.28) !important;
    color: var(--egh-text) !important;
    padding: 14px 0 !important;
}
/* Target the warning glyph, not every <i> in the banner: the Resend button
   contains a fa-spinner that was inheriting this and rendering amber at
   17.6px inside a btn-sm. */
.verification-banner .fa-exclamation-triangle {
    color: var(--egh-warning) !important;
    font-size: 1.1rem !important;
    margin-right: 6px;
}
.verification-banner .text { color: var(--egh-text) !important; }
/* padding:0 here would drop the dismiss button to a 10x15 hit area (measured
   at 360px): under the 24x24 minimum. Zero the .btn padding but restore the
   target with an explicit box. */
.verification-banner .btn.close {
    color: var(--egh-muted) !important;
    padding: 4px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.verification-banner .btn.close:hover { color: var(--egh-text) !important; }
/* Make the action read as the way out of the banner, not as chrome */
.verification-banner .btn-resend-verify-email {
    border-color: rgba(213,161,24,0.5) !important;
    color: var(--egh-warning) !important;
}
.verification-banner .btn-resend-verify-email:hover {
    background: rgba(213,161,24,0.14) !important;
    border-color: var(--egh-warning) !important;
    color: var(--egh-warning) !important;
}

/* ── Announcements ────────────────────────────────────────── */
.announcements .announcement article {
    background-color: var(--egh-bg-raised) !important;
    border-left: 3px solid var(--egh-primary) !important;
    border-radius: 0 var(--egh-radius) var(--egh-radius) 0 !important;
}

/* ── KB ───────────────────────────────────────────────────── */
.kb-article-item:hover {
    background-color: rgba(205,65,43,0.06) !important;
    border-radius: var(--egh-radius) !important;
}

.kb-article-item small {
    color: var(--egh-muted) !important;
}

/* ── Domain search ────────────────────────────────────────── */
.home-domain-search .input-group-wrapper {
    background-color: var(--egh-bg-raised) !important;
    border-color: var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
}

/* ── Select account ───────────────────────────────────────── */
.select-account {
    border-color: var(--egh-border-subtle) !important;
}

.select-account a {
    border-color: var(--egh-border-subtle) !important;
    color: var(--egh-text) !important;
    transition: all 0.2s ease !important;
}

.select-account a:hover {
    background-color: rgba(205,65,43,0.06) !important;
}

/* ── Continue / invite containers ────────────────────────── */
.continue-container,
.invite-box {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
}

/* ── Product details ──────────────────────────────────────── */
div.product-details div.product-icon {
    background: rgba(205,65,43,0.10) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
    color: var(--egh-primary) !important;
}

div.product-details-tab-container {
    background-color: var(--egh-bg-card) !important;
    border-color: var(--egh-border) !important;
    color: var(--egh-text) !important;
    border-radius: 0 var(--egh-radius-lg) var(--egh-radius-lg) var(--egh-radius-lg) !important;
}

/* ── Credit card display ──────────────────────────────────── */
div.credit-card {
    background: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

div.credit-card div.card-number {
    background-color: rgba(205,65,43,0.1) !important;
    color: var(--egh-text) !important;
}

/* ── Promo container ──────────────────────────────────────── */
.promo-container {
    background-color: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
}

/* ── Markdown editor ──────────────────────────────────────── */
.md-editor {
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
}

.md-editor > .btn-toolbar {
    background-color: var(--egh-bg-raised) !important;
    border-radius: var(--egh-radius) var(--egh-radius) 0 0 !important;
}

.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
    background-color: var(--egh-bg-input) !important;
    border-color: var(--egh-border-subtle) !important;
    color: var(--egh-text) !important;
}

/* ── Localisation modal ───────────────────────────────────── */
.modal-localisation .modal-content {
    background-color: var(--egh-bg-card) !important;
}

.modal-localisation .item-selector .item {
    border-color: var(--egh-border) !important;
    color: var(--egh-text) !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
}

.modal-localisation .item-selector .item:hover {
    background-color: rgba(205,65,43,0.1) !important;
    color: #fff !important;
}

.modal-localisation .item-selector .item.active {
    background: var(--egh-primary) !important;
    border-color: var(--egh-primary) !important;
    color: #ffffff !important;
}

/* ── DataTables ───────────────────────────────────────────── */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label {
    color: var(--egh-muted) !important;
}

.dataTables_wrapper .dataTables_filter label .form-control {
    background-color: var(--egh-bg-input) !important;
    color: var(--egh-text) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* ── Network issue alert ──────────────────────────────────── */
.network-issue-alert {
    background-color: rgba(239,122,100,0.1) !important;
    border-color: var(--egh-danger) !important;
    color: #ef7a64 !important;
}

/* ── Full page overlay ────────────────────────────────────── */
#fullpage-overlay {
    background-color: rgba(13,13,13,0.92) !important;
}

/* ── Responsive tabs ──────────────────────────────────────── */
.responsive-tabs-sm {
    background: var(--egh-bg-card) !important;
    border-color: var(--egh-border) !important;
}

.responsive-tabs-sm .nav-item {
    border-color: var(--egh-border-subtle) !important;
}

/* ── Card accent colours ──────────────────────────────────── */
.card-accent-gold   { border-top: 2px solid #d5a118 !important; }
.card-accent-green  { border-top: 2px solid #9cb54e !important; }
.card-accent-red    { border-top: 2px solid #ef7a64 !important; }
.card-accent-blue   { border-top: 2px solid var(--egh-primary) !important; }

/* ── Form error styling ───────────────────────────────────── */
.form-group .field-error-msg {
    color: #ef7a64 !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--egh-danger) !important;
    box-shadow: 0 0 0 3px rgba(239,122,100,0.15) !important;
}

/* .has-error is the OTHER error state WHMCS uses: scripts.js sets it on the
   payment-method and bank/card validation forms. The framework's only cue is
   `background-color:#fff0f0` on the field, which our `.form-control` rule
   correctly overrides (dark backgrounds win): but that left those fields with
   no error indication at all beyond the message text. Give them the same
   treatment as .is-invalid so the two error states look alike. */
.has-error .form-control,
.has-error input.form-control,
.has-error select.form-control,
.has-error textarea.form-control {
    border-color: var(--egh-danger) !important;
    box-shadow: 0 0 0 3px rgba(239,122,100,0.15) !important;
}
.has-error > label,
.has-error .control-label { color: var(--egh-danger) !important; }
.has-error button { border-color: var(--egh-danger) !important; }

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--egh-success) !important;
    box-shadow: 0 0 0 3px rgba(156,181,78,0.15) !important;
}

/* ── Scrollbar (the site's own: a square grey thumb) ──────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0006; }
::-webkit-scrollbar-thumb { background: #ffffff47; }
::-webkit-scrollbar-thumb:hover { background: #ffffff6b; }
::-webkit-scrollbar-corner { background: var(--egh-bg); }
/* Firefox, scoped so it does not disable the WebKit thumb in Chrome */
@supports (-moz-appearance: none) {
    html { scrollbar-width: thin; scrollbar-color: rgba(205,65,43,0.5) var(--egh-bg); }
}

/* ── Tooltips ─────────────────────────────────────────────── */
.tooltip-inner {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    color: var(--egh-text) !important;
    border-radius: var(--egh-radius) !important;
    font-family: var(--egh-font-body) !important;
}

/* ── Misc ─────────────────────────────────────────────────── */
.breadcrumb {
    background: transparent !important;
}

code {
    background-color: rgba(205,65,43,0.1) !important;
    color: var(--egh-secondary) !important;
    border-radius: 0 !important;
    padding: 2px 6px !important;
}

pre {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border-subtle) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
}

/* Card sidebar alert */
.card-sidebar .alert {
    border-radius: var(--egh-radius) !important;
}

/* Upgrade page */
.upgrade .products .product .header {
    background: rgba(205,65,43,0.14) !important;
    border-radius: var(--egh-radius) var(--egh-radius) 0 0 !important;
}

/* Invoice summary */
.invoice-summary-table td.total-row {
    background-color: rgba(205,65,43,0.08) !important;
    color: var(--egh-primary) !important;
}

/* ============================================================
   3. ORDER FORM / CART / DOMAIN FLOWS
   Carried over from twenty-one and retokenised; the selectors are
   WHMCS's standard_cart ones.
   ============================================================ */

/* ── Order form foundation ────────────────────────────────── */
#order-standard_cart {
    color: var(--egh-text) !important;
    font-family: var(--egh-font-body) !important;
}

/* ── Sidebar category list ────────────────────────────────── */
#order-standard_cart .cart-sidebar h3,
#order-standard_cart .sidebar-collapsed h3 {
    color: var(--egh-primary) !important;
    font-family: var(--egh-font-display) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

#order-standard_cart .cart-sidebar .list-group-item {
    background-color: transparent !important;
    border-color: var(--egh-border-subtle) !important;
    color: var(--egh-muted) !important;
    transition: all 0.2s ease !important;
    font-size: 0.9rem !important;
}

#order-standard_cart .cart-sidebar .list-group-item:hover {
    background-color: rgba(205,65,43,0.08) !important;
    color: var(--egh-text) !important;
    padding-left: 20px !important;
}

#order-standard_cart .cart-sidebar .list-group-item.active {
    background: rgba(205,65,43,0.14) !important;
    border-color: var(--egh-primary) !important;
    color: #fff !important;
}

/* ── Section dividers ─────────────────────────────────────── */
#order-standard_cart .sub-heading {
    border-color: var(--egh-border-subtle) !important;
}

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    color: var(--egh-primary) !important;
    background-color: var(--egh-bg) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 1px !important;
}

/* ── Labels ───────────────────────────────────────────────── */
#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc,
.service-renewals .div-renewal-period-label {
    color: var(--egh-muted) !important;
    font-weight: 500 !important;
}

#order-standard_cart .field-help-text {
    color: var(--egh-muted) !important;
    font-size: 0.8rem !important;
}

/* ── Form controls ────────────────────────────────────────── */
#order-standard_cart .field,
#order-standard_cart .form-control {
    background-color: var(--egh-bg-input) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--egh-text) !important;
    border-radius: var(--egh-radius) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

#order-standard_cart .form-control:focus {
    border-color: var(--egh-primary) !important;
    box-shadow: 0 0 0 3px var(--egh-glow) !important;
    background-color: var(--egh-bg-input) !important;
    color: var(--egh-text) !important;
}

#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly],
#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly] {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--egh-muted) !important;
}

#order-standard_cart .prepend-icon .field-icon i {
    color: var(--egh-muted) !important;
}

/* ── Products list ────────────────────────────────────────── */
#order-standard_cart .products .product {
    background: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden;
}

#order-standard_cart .products .product:hover {
    border-color: rgba(205,65,43,0.35) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.5) !important;
}

#order-standard_cart .products .product header {
    background: rgba(205,65,43,0.06) !important;
    border-bottom: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) var(--egh-radius-lg) 0 0 !important;
    margin: 0 !important;
}

#order-standard_cart .products .product header span {
    color: var(--egh-text) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 600 !important;
}

#order-standard_cart .products .product header .qty {
    color: var(--egh-muted) !important;
}

#order-standard_cart .products .product div.product-desc {
    color: var(--egh-text-dim) !important;
}

#order-standard_cart .products .product span.feature-value {
    color: var(--egh-primary) !important;
}

#order-standard_cart .products .product div.product-pricing span.price {
    color: var(--egh-primary) !important;
    font-weight: 700 !important;
    font-family: var(--egh-font-display) !important;
}

/* ── Product info bar ─────────────────────────────────────── */
#order-standard_cart .product-info {
    background: rgba(205,65,43,0.06) !important;
    border-top: 1px solid var(--egh-border) !important;
    border-bottom: 1px solid var(--egh-border) !important;
    color: var(--egh-text) !important;
    border-radius: var(--egh-radius) !important;
}

#order-standard_cart .product-info .product-title {
    color: var(--egh-text) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 600 !important;
}

/* ── Order summary sidebar ────────────────────────────────── */
#order-standard_cart .order-summary {
    background: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
    border-bottom: 2px solid var(--egh-primary) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
    overflow: hidden;
}

#order-standard_cart .order-summary h2 {
    background: rgba(205,65,43,0.14) !important;
    color: var(--egh-text) !important;
    border-bottom: 1px solid var(--egh-border) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.9rem !important;
}

#order-standard_cart .summary-container {
    background-color: transparent !important;
    color: var(--egh-text) !important;
}

#order-standard_cart .order-summary .product-name {
    color: var(--egh-text) !important;
    font-weight: 700 !important;
}

#order-standard_cart .order-summary .product-group {
    color: var(--egh-muted) !important;
}

#order-standard_cart .order-summary .summary-totals {
    border-color: var(--egh-border-subtle) !important;
}

#order-standard_cart .order-summary .total-due-today .amt {
    color: var(--egh-primary) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 700 !important;
}

#order-standard_cart .order-summary .subtotal {
    border-color: var(--egh-border-subtle) !important;
    color: var(--egh-text) !important;
}

#order-standard_cart .order-summary .bordered-totals {
    border-color: var(--egh-border-subtle) !important;
    color: var(--egh-text-dim) !important;
}

#order-standard_cart .order-summary .recurring-charges {
    color: var(--egh-muted) !important;
}

#order-standard_cart .order-summary .btn-continue-shopping {
    color: var(--egh-muted) !important;
    transition: color 0.2s ease !important;
}

#order-standard_cart .order-summary .btn-continue-shopping:hover {
    color: var(--egh-primary) !important;
}

#order-standard_cart .order-summary .loader {
    color: var(--egh-primary) !important;
}

/* ── View cart items ──────────────────────────────────────── */
#order-standard_cart .view-cart-items-header {
    background: var(--egh-primary) !important;
    color: #ffffff !important;
    border-radius: var(--egh-radius) var(--egh-radius) 0 0 !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

#order-standard_cart .view-cart-items {
    border-bottom: 2px solid var(--egh-primary) !important;
    border-radius: 0 0 var(--egh-radius) var(--egh-radius) !important;
    overflow: hidden;
}

#order-standard_cart .view-cart-items .item {
    background-color: var(--egh-bg-card) !important;
    border-bottom: 1px solid var(--egh-border-subtle) !important;
    color: var(--egh-text) !important;
}

#order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: rgba(255,255,255,0.02) !important;
}

#order-standard_cart .view-cart-items .item-title {
    color: var(--egh-text) !important;
    font-weight: 600 !important;
}

#order-standard_cart .view-cart-items .item-group {
    color: var(--egh-muted) !important;
}

#order-standard_cart .view-cart-items .item-domain {
    color: var(--egh-primary) !important;
}

#order-standard_cart .view-cart-items .item-price span {
    color: var(--egh-primary) !important;
    font-weight: 700 !important;
    font-family: var(--egh-font-display) !important;
}

#order-standard_cart .view-cart-items .item-price .cycle {
    color: var(--egh-muted) !important;
}

#order-standard_cart .btn-remove-from-cart {
    color: var(--egh-muted) !important;
    transition: color 0.2s ease !important;
}

#order-standard_cart .btn-remove-from-cart:hover {
    color: var(--egh-danger) !important;
}

/* ── Empty cart button ────────────────────────────────────── */
#order-standard_cart .empty-cart .btn {
    background: var(--egh-primary) !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 0 0 var(--egh-radius) var(--egh-radius) !important;
}

/* ── Checkout button ──────────────────────────────────────── */
#order-standard_cart .btn-checkout {
    background: var(--egh-accent) !important;
    border: 0 !important;
    color: var(--egh-accent-ink) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    font-family: var(--egh-font-body) !important;
    letter-spacing: 0 !important;
    border-radius: var(--egh-radius) !important;
    transition: background 0.18s, border-color 0.18s !important;
}

#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-checkout:focus {
    background: var(--egh-accent-hov) !important;
    border-color: var(--egh-accent-hov) !important;
    color: var(--egh-accent-ink) !important;
}

/* ── View cart tabs ───────────────────────────────────────── */
#order-standard_cart .view-cart-tabs .nav-tabs {
    border-color: var(--egh-border) !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    background-color: var(--egh-bg-card) !important;
    border-color: var(--egh-border) var(--egh-border) var(--egh-bg-card) !important;
    color: var(--egh-primary) !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-top: 0 !important;
    border-radius: 0 var(--egh-radius) var(--egh-radius) var(--egh-radius) !important;
    color: var(--egh-text) !important;
}

/* ── Promo code box ───────────────────────────────────────── */
#order-standard_cart .view-cart-promotion-code {
    background-color: rgba(205,65,43,0.05) !important;
    border: 1px dashed var(--egh-primary) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
}

/* ── Gateway checkout box ─────────────────────────────────── */
#order-standard_cart .view-cart-gateway-checkout {
    background: rgba(205,65,43,0.06) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
}

/* ── Apply credit container ───────────────────────────────── */
#order-standard_cart .apply-credit-container {
    background: rgba(205,65,43,0.06) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
}

#order-standard_cart .apply-credit-container span {
    color: var(--egh-primary) !important;
}

/* ── Credit card input container ──────────────────────────── */
#order-standard_cart .cc-input-container {
    background: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
}

#order-standard_cart .cc-input-container .existing-cc-grid {
    color: var(--egh-muted) !important;
}

/* ── Domain selection options ─────────────────────────────── */
#order-standard_cart .domain-selection-options .option {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border-subtle) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
    transition: all 0.2s ease !important;
}

#order-standard_cart .domain-selection-options .option:hover {
    border-color: var(--egh-primary) !important;
    background: rgba(205,65,43,0.06) !important;
}

#order-standard_cart .domain-selection-options .option-selected {
    background: rgba(205,65,43,0.1) !important;
    border-color: var(--egh-primary) !important;
}

#order-standard_cart .domain-selection-options .option-selected label {
    color: var(--egh-text) !important;
    font-weight: 600 !important;
}

/* ── Domain checker results ───────────────────────────────── */
#order-standard_cart .domain-lookup-primary-results .headline,
#order-standard_cart .domain-checker-result-headline {
    color: var(--egh-text) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 700 !important;
}

#order-standard_cart .domain-checker-available {
    color: #9cb54e !important;
}

#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid {
    color: #ef7a64 !important;
}

#order-standard_cart .transfer-eligible {
    background: rgba(156,181,78,0.1) !important;
    border: 1px solid rgba(156,181,78,0.3) !important;
    color: #9cb54e !important;
    border-radius: var(--egh-radius) !important;
}

#order-standard_cart .transfer-not-eligible {
    background: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    color: var(--egh-muted) !important;
    border-radius: var(--egh-radius) !important;
}

/* ── Domain suggestions ───────────────────────────────────── */
.suggested-domains .panel-heading,
.suggested-domains .card-header {
    border-bottom: 2px solid var(--egh-primary) !important;
    background: rgba(205,65,43,0.08) !important;
    color: var(--egh-text) !important;
}

.suggested-domains .domain-lookup-suggestions-loader {
    background-color: var(--egh-bg-raised) !important;
    color: var(--egh-muted) !important;
}

.suggested-domains .list-group-item {
    background-color: var(--egh-bg-card) !important;
    border-color: var(--egh-border-subtle) !important;
    color: var(--egh-text) !important;
}

.suggested-domains .extension {
    color: var(--egh-primary) !important;
}

.suggested-domains .price {
    color: var(--egh-primary) !important;
    font-weight: 700 !important;
    font-family: var(--egh-font-display) !important;
}

.suggested-domains .btn:not(.domain-contact-support) {
    background: var(--egh-primary) !important;
    border-color: var(--egh-primary) !important;
    color: #ffffff !important;
    border-radius: var(--egh-radius) !important;
}

/* ── Spotlight TLDs ───────────────────────────────────────── */
.spotlight-tlds {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
}

.spotlight-tld {
    background-color: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
    transition: all 0.3s ease !important;
}

.spotlight-tld:hover {
    border-color: var(--egh-primary) !important;
}

.spotlight-tld span {
    color: var(--egh-muted) !important;
}

.spotlight-tld .btn:not(.domain-contact-support) {
    background: var(--egh-primary) !important;
    border-color: var(--egh-primary) !important;
    color: #ffffff !important;
    border-radius: var(--egh-radius) !important;
}

/* ── Domain promo box ─────────────────────────────────────── */
.domain-promo-box {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
}

.domain-promo-box h3 {
    color: var(--egh-text) !important;
}

.domain-promo-box .small {
    color: var(--egh-muted) !important;
}

/* ── Domain pricing table ─────────────────────────────────── */
.domain-pricing .tld-row {
    border-color: var(--egh-border-subtle) !important;
    transition: background 0.2s ease !important;
}

.domain-pricing .tld-row.highlighted,
.domain-pricing .tld-row:hover {
    background: rgba(205,65,43,0.05) !important;
}

.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header .col-sm-4,
.domain-pricing .tld-pricing-header .tld-column {
    background-color: rgba(205,65,43,0.08) !important;
    border-bottom-color: var(--egh-primary) !important;
    color: var(--egh-text) !important;
    border-radius: var(--egh-radius) var(--egh-radius) 0 0 !important;
}

.domain-pricing .tld-pricing-header div:nth-child(odd) {
    background-color: rgba(205,65,43,0.05) !important;
    border-color: var(--egh-primary) !important;
}

.domain-pricing .two-row-center {
    border-right-color: var(--egh-border) !important;
}

/* ── Domain renewals ──────────────────────────────────────── */
.domain-renewals,
.service-renewals {
    border-color: var(--egh-border) !important;
}

.domain-renewals,
.service-renewals,
.addon-renewals .service-renewal {
    background-color: var(--egh-bg-card) !important;
}

.domain-renewals .domain-renewal,
.service-renewals .service-renewal {
    border-color: var(--egh-border-subtle) !important;
    color: var(--egh-text) !important;
}

.domain-renewals .domain-renewal:nth-child(even),
.service-renewals .service-renewal:nth-child(even),
.addon-renewals .service-renewal:nth-child(even) {
    background-color: rgba(255,255,255,0.02) !important;
}

.domain-renewals .domain-renewal h3,
.service-renewals .service-renewal h3 {
    color: var(--egh-text) !important;
}

.addon-renewals > div {
    border-color: var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    overflow: hidden;
}

/* ── Addon panels ─────────────────────────────────────────── */
#order-standard_cart .panel-addon .panel-body {
    background-color: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    transition: all 0.3s ease !important;
}

#order-standard_cart .panel-addon:hover .panel-body {
    border-color: var(--egh-primary) !important;
}

#order-standard_cart .panel-addon .panel-body label {
    color: var(--egh-text) !important;
    font-weight: 600 !important;
}

#order-standard_cart .panel-addon .panel-price {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--egh-primary) !important;
    font-weight: 700 !important;
}

#order-standard_cart .panel-addon .panel-add {
    background: var(--egh-success) !important;
    color: #10130a !important;
    border-radius: 0 0 var(--egh-radius) var(--egh-radius) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

#order-standard_cart .panel-addon-selected {
    border-color: var(--egh-primary) !important;
}

/* ── Addon promo container ────────────────────────────────── */
#order-standard_cart .addon-promo-container {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
}

#order-standard_cart .addon-promo-container h3 {
    color: var(--egh-text) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 600 !important;
}

#order-standard_cart .addon-promo-container label {
    color: var(--egh-text-dim) !important;
}

#order-standard_cart .addon-promo-container a {
    color: var(--egh-primary) !important;
}

/* ── Account select container ─────────────────────────────── */
#order-standard_cart .account-select-container {
    border-color: var(--egh-border-subtle) !important;
}

#order-standard_cart .account-select-container div.account {
    background: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border-subtle) !important;
    color: var(--egh-text) !important;
    transition: all 0.2s ease !important;
}

#order-standard_cart .account-select-container div.account.active {
    background: rgba(205,65,43,0.08) !important;
    border-color: var(--egh-primary) !important;
}

/* ── Order confirmation ───────────────────────────────────── */
#order-standard_cart .order-confirmation {
    color: var(--egh-text) !important;
}

#order-standard_cart .order-confirmation span {
    color: var(--egh-primary) !important;
    font-weight: 700 !important;
    font-family: var(--egh-font-display) !important;
}

/* ── Error page ───────────────────────────────────────────── */
.error-heading {
    color: var(--egh-text) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 600 !important;
}

/* ── Default captcha box ──────────────────────────────────── */
#order-standard_cart .default-captcha {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    color: var(--egh-muted) !important;
    border-radius: var(--egh-radius) !important;
}

/* ── Checkout security message ────────────────────────────── */
#order-standard_cart .checkout-security-msg {
    color: var(--egh-muted) !important;
}

#order-standard_cart .checkout-security-msg i {
    color: var(--egh-primary) !important;
}

/* ── Remove item modal ────────────────────────────────────── */
#order-standard_cart .modal-header,
#order-standard_cart .modal-body,
#order-standard_cart .modal-footer {
    background-color: var(--egh-bg-card) !important;
    border-color: var(--egh-border) !important;
    color: var(--egh-text) !important;
}

/* ── Domain checker container ─────────────────────────────── */
.domain-checker-container {
    background: rgba(205,65,43,0.10) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
}

.domain-checker-container .input-group-box {
    background-color: var(--egh-bg-input) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
}

div.domainresults div:not(.btn-group) {
    background-color: var(--egh-bg-raised) !important;
    color: var(--egh-text) !important;
    border-radius: var(--egh-radius) var(--egh-radius) 0 0 !important;
}

div.domainresults div:not(.btn-group) span {
    color: var(--egh-muted) !important;
}

/* ── Domain searching spinner ─────────────────────────────── */
.domain-searching {
    color: var(--egh-muted) !important;
}

/* ── Trash icon in order summary ──────────────────────────── */
#order-standard_cart .order-summary i.fa-trash {
    color: var(--egh-muted) !important;
    opacity: 0.5;
    transition: all 0.2s ease !important;
}

#order-standard_cart .order-summary i.fa-trash:hover {
    color: var(--egh-danger) !important;
    opacity: 1;
}

/* ── Slim alert ───────────────────────────────────────────── */
.slim-alert {
    border-radius: var(--egh-radius) !important;
}

/* ── Domain disclaimers ───────────────────────────────────── */
.domain-disclaimer-area {
    color: var(--egh-muted) !important;
}

.domain-suggestions-warning {
    color: var(--egh-muted) !important;
}
/* ── Card input text colour fix ───────────────────────────── */
input[name="ccnumber"],
input[name="ccexpirydate"],
input[name="cccvv"],
input[name="ccstartdate"],
input[name="ccissuenum"],
input[name="ccdescription"],
#inputCardNumber,
#inputCardExpiry,
#inputCardCVV,
#inputCardCVV2,
#inputCardStart,
#inputCardIssue,
#inputDescription {
    color: #e6e0da !important;
    -webkit-text-fill-color: #e6e0da !important;
    background-color: #0f0d0c !important;
    caret-color: #cd412b !important;
}

/* Autofill override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e6e0da !important;
    -webkit-box-shadow: 0 0 0px 1000px #0f0d0c inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================================
   4. SITE CHROME: imported from rust-server-hosting.com
   ------------------------------------------------------------
   Topbar, dropdowns, Guides mega menu, mobile panel and footer are a
   port of ironwipe-site/index.php (<header class="topbar"> and
   <footer class="site-footer-full">) plus the "Buttons", "Topbar / nav",
   "Footer" and "Responsive" blocks of ironwipe-site/css/style.css, so
   the client area and the site share one nav.

   Every class carries an iw- prefix. The site's own names (.topbar,
   .brand, .nav-link, .btn, .mainnav, .modal, .card) collide with WHMCS
   (#header .topbar is the logged-in strip) and Bootstrap (.nav-link,
   .btn), so a verbatim copy would restyle the application bar. The
   prefix is mechanical: strip it and the rules diff against the source.

   Deltas from the source, all forced by the client area:
     . link colour and underline are re-asserted inside the chrome,
       because this file sets a global gold underlined `a` that the
       site does not have (its links inherit);
     . the site's SVG reset (`svg { fill: currentColor; width: 1em }`)
       is scoped to the chrome, or it would resize every Font Awesome
       glyph in the application;
     . the row carries an account chip and the cart on top of the nine
       site links and the CTA, so the icon-only and hamburger
       breakpoints are re-measured (see "Chrome responsive");
     . the mobile panel also lists the client-area rows (account, cart,
       affiliates) that have no place in the site nav;
     . the footer gains an Account column for the client-area links the
       stock WHMCS footer carried, which is hidden.
   ============================================================ */

/* Chrome links never take the global link colour or underline. */
.iw-topbar a,
.iw-footer a {
    text-decoration: none !important;
}

/* Bootstrap's reboot draws `button:focus { outline: 5px auto }` on a
   mouse click too; the keyboard ring is body :focus-visible above. */
.iw-nav-link--caret:focus:not(:focus-visible),
.iw-navtoggle:focus:not(:focus-visible) { outline: 0; }

/* The site's global SVG reset, scoped to the chrome. */
.iw-topbar svg,
.iw-footer svg {
    fill: currentColor; width: 1em; height: 1em; vertical-align: -0.12em;
}

/* ── Skip link (WCAG 2.4.1) ───────────────────────────────── */
.iw-skip {
    position: fixed; left: 16px; top: -100px; z-index: 100;
    padding: 12px 20px;
    background: var(--c-gold); color: #241c05 !important;
    font-family: var(--font); font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    text-decoration: none;
    transition: top 0.15s ease;
}
.iw-skip:focus { top: 0; }
.iw-skip:focus-visible { outline: 2px solid #241c05 !important; outline-offset: -4px !important; }
@media (prefers-reduced-motion: reduce) { .iw-skip { transition: none; } }

/* ── Topbar ───────────────────────────────────────────────── */
.iw-topbar {
    position: sticky; top: 0; z-index: 60;
    height: var(--topbar-h);
    display: flex; align-items: stretch;
    background: #000000d1;
    border-bottom: 1px solid #ffffff0f;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    font-family: var(--font);
}

.iw-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 20px 0 16px; flex-shrink: 0;
}
.iw-brand-mark {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--c-rust), var(--c-rust-dark));
    color: #fff; font-weight: 700; font-size: 18px;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}
.iw-brand-name {
    text-transform: uppercase; color: #fff !important; font-weight: 700; font-size: 19px;
    letter-spacing: 0.02em;
}
.iw-brand-name span { color: var(--c-text-dim); font-weight: 700; }

/* No overflow-x here on purpose: overflow-x:auto forces overflow-y to
   compute as auto too, which would clip the dropdowns that hang below
   this row. Narrow widths are handled by the breakpoints instead. */
.iw-mainnav { display: flex; align-items: stretch; margin: 0 auto 0 6px; min-width: 0; }

.iw-nav-link {
    display: flex; align-items: center; gap: 9px;
    padding: 0 clamp(10px, 1.3vw, 22px);
    font-family: var(--font);
    font-size: clamp(13px, 1.05vw, 15px); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: #cfc9c2 !important;
    white-space: nowrap; transition: background 0.12s, color 0.12s;
    background: none; border: 0; cursor: pointer;
}
.iw-nav-link svg { opacity: 0.9; font-size: 18px; }
.iw-nav-link:hover { color: #fff !important; background: #ffffff0f; }
.iw-nav-link.is-active {
    color: #fff !important;
    background: linear-gradient(var(--c-rust), var(--c-rust-dark));
    box-shadow: inset 0 -3px #00000040;
}
.iw-nav-link--accent { color: var(--c-gold) !important; }
.iw-nav-link--accent:hover { color: #f2c545 !important; background: #d5a1181f; }

/* Client-area rows live in the mobile panel only; the desktop row has
   the account chip and cart on the right instead. */
.iw-nav-link--app { display: none; }

/* Dropdowns (Hosting, Server Admin) */
.iw-nav-group { position: relative; display: flex; align-items: stretch; }
.iw-nav-link--caret .iw-caret { width: 11px; height: 11px; margin-left: -2px; opacity: 0.75; transition: transform 0.15s; }
.iw-nav-group.is-open .iw-nav-link--caret .iw-caret { transform: rotate(180deg); }

.iw-nav-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 50; min-width: 300px;
    background: #0b0a09fa; border: 1px solid var(--c-border); border-top: 2px solid var(--c-rust);
    box-shadow: 0 24px 48px #000000b3; padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
@media (min-width: 761px) {
    .iw-nav-group:hover .iw-nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
}
.iw-nav-group.is-open .iw-nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.iw-nav-dropdown a {
    display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
}
.iw-nav-dropdown a:hover { background: #ffffff0f; }
.iw-nav-dropdown a strong {
    font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #cfc9c2;
}
.iw-nav-dropdown a:hover strong { color: #fff; }
.iw-nav-dropdown a small { font-size: 11.5px; font-weight: 400; color: var(--c-text-dim); text-transform: none; letter-spacing: 0; }

/* Mega menu (Guides): image rail + link list */
.iw-nav-dropdown--mega { display: flex; padding: 0; min-width: 520px; overflow: hidden; }
.iw-mega-feature {
    width: 190px; flex-shrink: 0; position: relative; display: flex; align-items: flex-end; padding: 14px;
    background:
        linear-gradient(180deg, #00000010 0%, #000000e6 100%),
        radial-gradient(ellipse at 30% 20%, #4a2013 0%, transparent 60%),
        linear-gradient(150deg, #241a12, #120d0a 70%);
}
.iw-mega-feature::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
    background-size: 18px 18px;
}
.iw-mega-feature-label { position: relative; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; }
.iw-mega-feature-label span { display: block; color: var(--c-gold); font-size: 10.5px; letter-spacing: 0.1em; margin-bottom: 4px; }
.iw-mega-list { flex: 1; padding: 6px; display: flex; flex-direction: column; }
.iw-mega-list a {
    padding: 11px 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #cfc9c2 !important;
    white-space: nowrap;
}
.iw-mega-list a:hover {
    background: linear-gradient(var(--c-rust), var(--c-rust-dark)); color: #fff !important;
}

/* ── Topbar right: CTA, account chip, cart, burger ────────── */
.iw-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; padding-right: 16px; flex-shrink: 0; }

/* The site's two buttons, scoped by prefix so they cannot collide with
   Bootstrap's .btn inside the app. */
.iw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; font-family: var(--font); font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; border: none; cursor: pointer;
    transition: filter 0.12s, background 0.12s, transform 70ms;
    white-space: nowrap;
}
.iw-btn:active { transform: translateY(1px) scale(0.98); }
.iw-btn-gold { background: var(--c-gold); color: #241c05 !important; }
.iw-btn-gold:hover { filter: brightness(1.1); }
.iw-btn-ghost { background: #ffffff12; color: var(--c-text) !important; }
.iw-btn-ghost:hover { background: #ffffff22; color: #fff !important; }

/* Account chip (client area only): the same plate as the site's
   .navtoggle / .btn-ghost, so it reads as a control, not a link. */
.iw-account {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 14px;
    background: #ffffff12; color: #cfc9c2 !important;
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap; transition: background 0.12s, color 0.12s;
    /* Company names run long; cap the chip so one client cannot widen
       the whole row. */
    max-width: 180px;
}
.iw-account:hover { background: #ffffff22; color: #fff !important; }
.iw-account svg { font-size: 16px; flex-shrink: 0; }
.iw-account span { overflow: hidden; text-overflow: ellipsis; }

/* Cart with live item count */
.iw-cart {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: #ffffff12; color: var(--c-text) !important; font-size: 18px;
    transition: background 0.12s;
}
.iw-cart:hover { background: #ffffff22; color: #fff !important; }
.iw-cart-count {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-gold); color: #241c05;
    font-size: 11px; font-weight: 700; line-height: 1;
}
.iw-cart-count:empty,
.iw-cart-count[data-count="0"] { display: none; }

.iw-navtoggle {
    display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
    background: #ffffff12; color: var(--c-text); font-size: 20px; border: 0; cursor: pointer;
}

/* ── Footer ───────────────────────────────────────────────── */
.iw-footer {
    background: #0a0908; border-top: 1px solid var(--c-border);
    font-family: var(--font);
}
/* Five columns, not the site's four: the Account column carries the
   client-area links (support, knowledge base, contact, terms) that the
   stock WHMCS footer had, which is hidden below. */
.iw-footer-cols {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px;
    padding: 56px 24px 32px; max-width: var(--iw-wrap); margin: 0 auto;
}
.iw-footer-cols h2 {
    margin: 0 0 14px !important;
    font-family: var(--font) !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important;
    text-transform: uppercase !important; letter-spacing: 0.08em !important;
    color: #fff !important;
}
/* gap 2 + 8px of link padding gives the same 30px item pitch as the
   site's gap 10 with bare inline links, but makes every link a 26px
   touch target instead of 18px (SC 2.5.8). */
.iw-footer-cols ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.iw-footer-cols li { color: inherit; }
.iw-footer-cols a,
.iw-footer-cols p { color: var(--c-text-dim) !important; font-size: 14px; }
.iw-footer-cols p { margin: 0; line-height: 1.5; max-width: 320px; }
.iw-footer-cols a { display: inline-block; padding: 4px 0; transition: color 0.12s; }
.iw-footer-cols a:hover { color: #fff !important; }
.iw-footer-brand .iw-brand { padding: 0; margin-bottom: 12px; display: inline-flex; }
.iw-footer-bottom {
    border-top: 1px solid var(--c-border); padding: 18px 24px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    max-width: var(--iw-wrap); margin: 0 auto;
    font-size: 12.5px; color: var(--c-text-dim);
}
/* Bare inline links measure under the 24x24 minimum (SC 2.5.8). */
.iw-footer-bottom a { color: var(--c-text-dim) !important; display: inline-block; padding: 4px 0; }
.iw-footer-bottom a:hover { color: #fff !important; }
.iw-footer-bottom .btn { font-size: 12px !important; padding: 7px 12px !important; }

/* Hide the stock WHMCS footer: its contact / TOS links are reproduced in
   the imported footer above, and the localisation picker is moved into it. */
#footer.footer { display: none !important; }

/* ── Chrome responsive ────────────────────────────────────────
   The site has nine top-level items plus the CTA and goes icon-only
   at 1500px, hamburger at 760px. The client-area row also carries the
   account chip (up to 180px) and the cart (44px), 244px more with
   gaps, so the collapse points move up. Measured in the static render
   with Roboto Condensed loaded, logged in, a 12-character name, two
   items in the cart and the CTA showing:
     . full labels at the site's 22px link padding need 1995px of row,
       so they only fit from 2000px up;
     . below 2000 the chip drops its label and the links tighten to
       14px padding: 1750px of row, which fits down to 1760;
     . below 1760 the labels go, as on the site below 1500 (icons only
       need 818px with the CTA, 676px without it);
     . the CTA hides under 900 and the hamburger takes over at 760,
       both the site's own points. At 320px the row needs 226px. */
/* Hidden labels stay in the accessibility tree. The site uses
   display:none, which leaves nine unnamed links and three unnamed
   buttons in icon-only mode (SC 4.1.2); the sr-only pattern (the site's
   own .sr-only recipe) keeps the names. Out of flow, so the flex gap
   closes up exactly as display:none would. The 760px panel rule below
   puts the spans back in flow. */
@media (max-width: 1999.98px) {
    .iw-nav-link { padding: 0 14px; }
    .iw-account { padding: 0 13px; }
    .iw-account span {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
    }
}
@media (max-width: 1760px) {
    /* topbar only: the footer wordmark always reads IronWipe in full */
    .iw-topbar .iw-brand-name span, .iw-nav-link > span {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .iw-nav-link { padding: 0 12px; }
    .iw-nav-dropdown { min-width: 260px; }
}
@media (max-width: 900px) {
    .iw-topbar-cta { display: none; }
}
@media (max-width: 760px) {
    .iw-navtoggle { display: flex; }
    .iw-account { display: none; }
    .iw-mainnav {
        position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0; z-index: 45;
        height: calc(100vh - var(--topbar-h)); margin: 0;
        background: #0d0d0dfa; flex-direction: column; padding: 10px; display: none; overflow-y: auto; row-gap: 4px;
    }
    .iw-mainnav.is-open { display: flex; }
    .iw-nav-link { height: 52px; padding: 0 16px; flex-shrink: 0; }
    .iw-nav-link > span {
        position: static; width: auto; height: auto; margin: 0; overflow: visible;
        clip-path: none; white-space: nowrap;
    }
    .iw-nav-link--app { display: flex; }

    .iw-nav-group { flex-direction: column; }
    .iw-nav-link--caret { width: 100%; justify-content: space-between; }
    .iw-nav-link--caret .iw-caret { margin-left: auto; }
    .iw-nav-dropdown {
        position: static; opacity: 1; visibility: visible; transform: none;
        display: none; background: none; border: none; box-shadow: none;
        padding: 0 0 6px 14px; margin-left: 6px; border-left: 2px solid var(--c-border);
    }
    .iw-nav-group.is-open .iw-nav-dropdown { display: flex; flex-direction: column; }
    .iw-nav-dropdown a { padding: 10px 12px; }
    .iw-nav-dropdown--mega { min-width: 0; }
    .iw-mega-feature { width: auto; height: 64px; padding: 10px 12px; }
    .iw-mega-list a { padding: 9px 12px; }

    .iw-footer-cols { padding: 40px 20px 24px; }
    .iw-footer-bottom { padding: 16px 20px; }
}
@media (max-width: 980px) {
    .iw-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px 30px; }
    .iw-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .iw-footer-cols { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .iw-brand { padding: 0 12px; }
    .iw-topbar-right { gap: 6px; padding-right: 12px; }
}

/* ============================================================
   5. WHMCS APPLICATION BAR
   ------------------------------------------------------------
   The client-area navigation (Home / Services / Domains / Billing /
   Support) sits directly under the site header as a quieter second
   bar, so the imported nav stays the loudest thing on the page.
   ============================================================ */

/* Every WHMCS .container is pulled onto the site's content grid: the
   1200px / 24px .wrap that the site's sections and footer columns use.
   Without this, Bootstrap caps them at 1140px with 15px gutters, so the
   application bar, breadcrumb and content would sit 30px inside the
   footer columns below them. (The site topbar itself is full-bleed, as
   on the site, so it is not on this grid.) */
#header .container,
.master-breadcrumb .container,
.verification-banner .container,
.network-issue-alert .container,
#main-body > .container,
/* header.tpl drops the .container class when $skipMainBodyContainer is set
   (the order form does this), which would leave those pages full-bleed while
   the footer sits at 1200. Match the container-less branch too. */
#main-body > div:not(.container) {
    max-width: var(--iw-wrap) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* .navbar-collapse ships 16px of side padding, which insets the whole client
   nav: measured, it pushed the first link 16px right of the site logo and
   pulled the credit chip 16px in from the header's right edge. */
.main-navbar-wrapper .navbar-collapse {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Pull the row back by one link's padding so the first LABEL lines up with the
   logo while every link keeps an identical hover target. Only above the
   navbar-expand-xl breakpoint: collapsed, the links stack and must not
   hang off the left edge. */
@media (min-width: 1200px) {
    .main-navbar-wrapper #nav { margin-left: -14px; }
}

#header.header {
    background: var(--egh-bg-card) !important;
    border-bottom: 1px solid var(--egh-border) !important;
}

/* Logged-in strip: notifications left, active client right */
#header .topbar {
    background: var(--egh-bg) !important;
    border-bottom: 1px solid var(--egh-border) !important;
    padding: 6px 0 !important;
    font-size: 0.85rem !important;
}
#header .topbar .btn,
#header .topbar .input-group-text,
#header .topbar .btn-active-client {
    background: transparent !important;
    border-color: var(--egh-border) !important;
    color: var(--egh-muted) !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    font-size: 0.85rem !important;
}
#header .topbar .btn:hover,
#header .topbar .btn-active-client:hover { color: var(--egh-text) !important; }
#header .topbar .btn-return-to-admin {
    border-color: rgba(213,161,24,0.45) !important;
    color: var(--egh-warning) !important;
}

.main-navbar-wrapper {
    padding: 0 !important;
    background: transparent !important;
}
/* IMPORTANT: read includes/navbar.tpl before touching these selectors.
   WHMCS does NOT emit Bootstrap's .nav-item / .nav-link here. It emits

     <li class="d-block dropdown no-collapse"><a class="pr-4 dropdown-toggle">

   so a `.navbar-nav > .nav-item > .nav-link` rule matches nothing and the
   links silently fall back to theme.min.css's light-theme #444: measured
   1.92:1 on this bar, i.e. unreadable. Match the element, not the class.
   The :not() keeps the credit chip, which is a real .nav-item, out of it. */
.main-navbar-wrapper .navbar-nav > li > a:not(.iw-credit-balance) {
    display: inline-flex !important;
    align-items: center !important;
    padding: 16px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--egh-muted) !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.18s, border-color 0.18s !important;
}
/* .pr-4 on the anchor carries !important, so these need it plus the higher
   specificity to win the padding back. */
.main-navbar-wrapper .navbar-nav > li > a:not(.iw-credit-balance):hover,
.main-navbar-wrapper .navbar-nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li.open > a,
.main-navbar-wrapper .navbar-nav > li.show > a,
.main-navbar-wrapper .navbar-nav > li > a[aria-expanded="true"] {
    color: var(--egh-text) !important;
    border-bottom-color: var(--egh-primary) !important;
}
/* Badge counters WHMCS hangs off nav labels (e.g. open tickets) */
.main-navbar-wrapper .navbar-nav > li > a .badge {
    background: var(--egh-primary) !important;
    color: #ffffff !important;
}
.navbar-toggler {
    border: 1px solid var(--egh-border) !important;
    color: var(--egh-text) !important;
    border-radius: 0 !important;
    margin: 10px 0 !important;
}

/* Credit chip on the right of the application bar. The cart moved up into
   the site header, so there is no .cart-btn here any more. */
.iw-credit-balance {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 13px !important;
    border-radius: var(--egh-pill) !important;
    border: 1px solid var(--egh-border) !important;
    background: rgba(255,255,255,0.04) !important;
    color: var(--egh-text) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    transition: border-color 0.18s, background 0.18s !important;
}
.iw-credit-balance:hover {
    border-color: var(--egh-primary) !important;
    background: rgba(205,65,43,0.08) !important;
    color: var(--egh-text) !important;
}


/* ============================================================
   6. GAP FILL: WHMCS/Bootstrap surfaces the original theme
   did not reach. Grouped rather than scattered so a future page
   audit has one place to add to.
   ============================================================ */

/* Legacy Bootstrap 3 panels still used by some WHMCS modules */
.panel, .well {
    background-color: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
    color: var(--egh-text) !important;
    box-shadow: none !important;
}
.panel-heading {
    background-color: var(--egh-bg-raised) !important;
    border-bottom: 1px solid var(--egh-border) !important;
    color: var(--egh-text) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 700 !important;
}
.panel-footer {
    background-color: var(--egh-bg-raised) !important;
    border-top: 1px solid var(--egh-border) !important;
    color: var(--egh-muted) !important;
}

/* Button groups and toolbars */
.btn-group > .btn + .btn { margin-left: -1px !important; }
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.btn-group > .btn:not(:last-child)  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* File inputs */
.custom-file-label,
.custom-file-label::after {
    background-color: var(--egh-bg-input) !important;
    border-color: var(--egh-border) !important;
    color: var(--egh-text) !important;
}

/* Switches / checks used on the security and marketing pages */
.custom-switch .custom-control-label::before { background-color: var(--egh-bg-input) !important; }
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--egh-glow) !important;
}
.form-check-input { accent-color: var(--egh-primary); }

/* Close buttons on alerts and modals */
.close, .close span { color: var(--egh-muted) !important; opacity: 1 !important; text-shadow: none !important; }
.close:hover { color: var(--egh-text) !important; }

/* Definition lists on invoice / order summary pages */
dt { color: var(--egh-muted) !important; font-weight: 600 !important; }
dd { color: var(--egh-text) !important; }

/* Horizontal rules and section headings inside cards */
.card hr { border-color: var(--egh-border) !important; }

/* Invoice views (viewinvoice.tpl, invoicepdf.tpl, masspay.tpl) */
.invoice-container {
    background-color: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius-lg) !important;
    color: var(--egh-text) !important;
}
.invoice-header { color: var(--egh-text) !important; }
.invoice-status { border-radius: var(--egh-radius) !important; }

/* ------------------------------------------------------------
   Light surfaces the bundled theme.min.css paints that this file
   did not previously override. Derived by diffing every class used
   in the theme's .tpl files against the framework rules that set a
   light background or dark text: not from guesswork, so each of
   these is a page that really does render white-on-white today.
   ------------------------------------------------------------ */

/* Bootstrap background utilities, used directly in several templates */
.bg-white, .bg-light {
    background-color: var(--egh-bg-card) !important;
    color: var(--egh-text) !important;
}
.bg-color-gold { background-color: rgba(213,161,24,0.14) !important; color: var(--egh-warning) !important; }

/* Knowledge base category tiles */
.kb-category a:hover { background-color: rgba(205,65,43,0.08) !important; color: var(--egh-text) !important; }

/* Mass payment total row */
tr.masspay-total td { background-color: rgba(205,65,43,0.08) !important; color: var(--egh-primary) !important; }

/* Ticket feedback: the staff-comment block */
.ticketfeedbackstaffcont {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    color: var(--egh-text) !important;
}

/* Two-factor setup: recovery codes are printed on a light plate */
.twofa-setup .backup-code {
    background-color: var(--egh-bg-raised) !important;
    border: 1px solid var(--egh-border) !important;
    color: var(--egh-text) !important;
}

/* Domain store: featured TLD price flag and the active domain tab */
.featured-tld .price.tv { background-color: rgba(205,65,43,0.14) !important; color: var(--egh-primary) !important; }
.store-order-container .store-domain-tabs li.active a {
    background-color: var(--egh-bg-card) !important;
    color: var(--egh-primary) !important;
}

/* Service detail: the responsive tab connector strip */
.responsive-tabs-sm-connector .channel { background-color: var(--egh-border) !important; }

/* Misc framework leftovers */
.carousel-indicators li { background-color: var(--egh-muted) !important; }
.list-group-item-danger.list-group-item-action:hover {
    background-color: rgba(239,122,100,0.16) !important;
    color: var(--egh-danger) !important;
}
.custom-file-input[disabled] ~ .custom-file-label {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--egh-muted) !important;
}
a.text-primary:hover { color: var(--egh-primary-hov) !important; }
a.text-success:hover { color: var(--egh-success) !important; }

/* Affiliate summary tiles (affiliates.tpl uses .affiliate-stat, singular) */
.affiliate-stat {
    background-color: var(--egh-bg-card) !important;
    border: 1px solid var(--egh-border) !important;
    border-radius: var(--egh-radius) !important;
    color: var(--egh-text) !important;
}
.affiliate-stat-green { color: var(--egh-success) !important; }


/* ============================================================
   7. MOBILE
   ------------------------------------------------------------
   Everything here was measured on a 360x740 viewport rendering
   realistic client-area content: a six-column invoices table and
   an account-details form. Breakpoints follow Bootstrap's own
   (991.98 = below lg, 575.98 = below sm) so they interleave with
   the framework rather than fighting it.
   ============================================================ */

@media (max-width: 991.98px) {

    /* ---- Tables: the critical one -----------------------------------
       WHMCS ships 41 bare <table> elements against 4 .table-responsive
       wrappers. Combined with `.card { overflow: hidden }` the excess was
       being CLIPPED rather than scrolled: on a 360px viewport the invoices
       table measured 568px inside a 318px card and the "Pay Now" button sat
       at x=535 with no page scroll to reach it. Not off-screen-but-
       reachable: simply unreachable. Same for every action in the last
       column of every table in the client area.

       display:block makes the TABLE its own scroll container, so card
       bodies stay overflow:visible and dropdowns inside them are not
       clipped. The only table in the theme that contains a dropdown is
       store/ox/manage.tpl, which trades its menu overflow for this: the
       right call when the alternative is 40 pages with unreachable
       actions. */
    .card table,
    table.table,
    table.table-list,
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 6 columns x 32px of horizontal padding was ~190px of the 568px */
    .table th, .table td,
    .table-list th, .table-list td,
    table.table-list > tbody > tr > td { padding: 10px 12px !important; }

    /* ---- Vertical budget --------------------------------------------
       Site header + application bar + breadcrumb + verification banner
       measured 416px of a 740px screen: 56% consumed before any content.
       These trim the chrome without touching the desktop layout. */
    #main-body { padding: 24px 0 40px !important; }

    #header .topbar {
        padding: 3px 0 !important;
        font-size: 0.8rem !important;
    }
    #header .topbar .btn,
    #header .topbar .input-group-text,
    #header .topbar .btn-active-client {
        padding: 4px 9px !important;
        font-size: 0.8rem !important;
        /* the trimmed padding puts these at 23px: 1px under the 24x24
           minimum (SC 2.5.8), so pin the box rather than re-inflate the bar */
        min-height: 26px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .master-breadcrumb .breadcrumb {
        padding: 6px 0 !important;
        font-size: 0.85rem;
    }

    .card-body { padding: 16px !important; }
    .card-header { padding: 12px 16px !important; }

    /* The nav links stack when the client-area menu is expanded; the 16px
       side padding is gone (zeroed for desktop alignment), so give the
       stacked rows their own breathing room instead. */
    .main-navbar-wrapper .navbar-collapse .navbar-nav { padding-bottom: 8px; }
}

@media (max-width: 575.98px) {

    /* Buttons wrap rather than overflow, but inline-block gives the wrapped
       rows no vertical gap: measured a 3-button footer needing 337px in a
       318px box, so the second row sat flush against the first. */
    .card-footer .btn,
    .card-body > .btn,
    .card-body > form > .btn,
    .btn + .btn { margin-bottom: 8px; }
    .card-footer .btn:last-child,
    .card-body > .btn:last-child { margin-bottom: 0; }

    /* Full-bleed cards read better than 20px gutters on a narrow screen,
       but keep the radius so they still read as panels. */
    .card { border-radius: 0 !important; }

    /* Long unbroken identifiers (invoice refs, API keys, server hostnames)
       inside table cells cannot rely on the cell wrapping. */
    .table td, .table-list td { overflow-wrap: break-word; }

    /* Bootstrap's modal is 8px off each edge by default; on a 360px screen
       that leaves the content cramped against the border. */
    .modal-dialog { margin: 10px !important; }
    .modal-body { padding: 16px !important; }
    .modal-footer { padding: 12px 16px !important; }
    .modal-footer .btn { margin-bottom: 0; }
}

/* The topbar's own narrow-screen trim lives with the chrome in section 4
   (380px rule): brand padding and the right-hand gap give, the mark does not. */