/* ============================================================
   EUGameHost: WHMCS client area — 2026 design system
   Ported from the front-end site (css/home-2026.css):
   electric blue on a midnight canvas, lime CTA, flat surfaces.

   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 — header, mega nav, mobile nav, footer
   ============================================================ */

/* ── Fonts: same pair as the front end (Rajdhani display + Inter body) ── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Core variables ───────────────────────────────────────────
   --egh-* are the names the whole client area is written against.
   --eug-* mirror the front-end token names so the imported header
   and footer below are a byte-for-byte copy of the site's CSS.   */
:root {
    /* Surfaces */
    --egh-bg:            #070B12;   /* canvas */
    --egh-bg-card:       #0B1220;   /* deep navy — cards, panels */
    --egh-bg-raised:     #101827;   /* ink — dropdowns, popovers */
    --egh-bg-input:      #0B1220;
    --egh-bg-interactive:#132033;

    /* Lines */
    --egh-border:        #243247;
    --egh-border-subtle: rgba(167,184,204,0.16);
    --egh-border-blue:   rgba(69,199,255,0.42);

    /* Brand */
    --egh-primary:       #45C7FF;   /* electric blue */
    --egh-primary-hov:   #8DE4FF;
    --egh-primary-deep:  #147CFF;
    --egh-secondary:     #8DE4FF;
    --egh-accent:        #B6FF2E;   /* lime — primary CTA only */
    --egh-accent-hov:    #CBFF5E;
    --egh-accent-ink:    #0d2400;   /* label colour on lime */

    /* Focus ring (kept: this is the only remaining "glow") */
    --egh-glow:          rgba(69,199,255,0.25);
    --egh-glow-strong:   rgba(69,199,255,0.42);

    /* Text */
    --egh-text:          #F4FAFF;   /* frost */
    --egh-text-dim:      #D7E6F4;
    --egh-muted:         #A7B8CC;

    /* Status */
    --egh-danger:        #F87171;
    --egh-success:       #7DFFB2;
    --egh-warning:       #FBBF24;
    --egh-info:          #45C7FF;

    /* Shape */
    --egh-radius:        8px;
    --egh-radius-lg:     18px;
    --egh-pill:          999px;

    /* Type */
    --egh-font-display:  'Rajdhani', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --egh-font-body:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Front-end token aliases, used verbatim by the imported chrome */
    --eug-canvas:        #070B12;
    --eug-deep-navy:     #0B1220;
    --eug-ink:           #101827;
    --eug-interactive:   #132033;
    --eug-frost:         #F4FAFF;
    --eug-muted:         #A7B8CC;
    --eug-border:        #243247;
    --eug-border-blue:   rgba(69,199,255,0.42);
    --eug-blue:          #45C7FF;
    --eug-blue-glow:     #8DE4FF;
    --eug-lime:          #7DFFB2;
    --eug-accent:        #B6FF2E;
    --eug-accent-glow:   #CBFF5E;
    --eug-pill:          999px;
    --eug-radius-sm:     14px;
    --eug-shadow-blue:   0 0 0 1px rgba(69,199,255,0.14), 0 24px 80px rgba(0,0,0,0.38);
    --eug-font-display:  'Rajdhani', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --eug-font-body:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --eug-max:           1360px;
}

/* ── 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;
    letter-spacing: -0.01em;
}

.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 header 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 header + 16px breathing room. */
html { scroll-padding-top: 88px; }
[id] { scroll-margin-top: 88px; }

/* One brand focus ring for every control, matching the front end.
   Measured: #45C7FF on #070B12 = 10.2: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) — they 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).
   `[tabindex="-1"]:focus:not(:focus-visible)` does not collide: it is
   scoped to :not(:focus-visible). */
body :focus-visible {
    outline: 3px solid var(--egh-primary) !important;
    outline-offset: 2px !important;
}

/* ── Typography ─────────────────────────────────────────────
   Rajdhani on headings and key numerals, Inter everywhere else —
   the same split the front end uses. */
h1, h2, h3, h4, h5, h6,
.card-title,
.mc-promo-manage .panel-heading h3,
.mc-promo-login .panel-heading h3 {
    color: var(--egh-text) !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; line-height: 1.08 !important; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem) !important;   line-height: 1.12 !important; }
h3 { font-size: 1.28rem !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 ────────────────────────────────────────────────── */
a {
    color: var(--egh-primary);
    transition: color 0.2s ease;
}
a:hover {
    color: var(--egh-secondary);
    text-decoration: none;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.master-breadcrumb {
    background-color: #0B1220 !important;
    border-bottom: 1px solid var(--egh-border) !important;
}
.master-breadcrumb .breadcrumb {
    background-color: transparent !important;
    margin: 0;
}
/* 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-primary);
    display: inline-block;
    padding: 3px 0;
}
.breadcrumb-item.active {
    color: var(--egh-muted) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--egh-muted) !important;
}

/* ── Cards ────────────────────────────────────────────────────
   Flat panel on deep navy with a hairline border — the same
   treatment the site uses for every panel. No glow, no gradient
   accent line, no lift on hover. */
.card,
.mc-promo-manage,
.mc-promo-login {
    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;
    transition: border-color 0.18s ease !important;
    position: relative;
    overflow: hidden;
}

.card:hover,
.mc-promo-manage:hover,
.mc-promo-login:hover {
    border-color: var(--egh-border-blue) !important;
}

.card-header {
    background-color: var(--egh-bg-raised) !important;
    border-bottom: 1px solid var(--egh-border) !important;
    color: var(--egh-text) !important;
    border-radius: var(--egh-radius-lg) var(--egh-radius-lg) 0 0 !important;
    font-family: var(--egh-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !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 0 var(--egh-radius-lg) var(--egh-radius-lg) !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.2s ease !important;
    font-size: 0.9rem;
}

.sidebar .list-group-item:hover {
    background-color: rgba(69,199,255, 0.08) !important;
    color: var(--egh-text) !important;
    padding-left: 20px !important;
}

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover {
    background: rgba(69,199,255,0.14) !important;
    border-color: var(--egh-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.sidebar .card-title {
    color: var(--egh-primary) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

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

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

.form-control::placeholder {
    color: var(--egh-muted) !important;
    opacity: 0.7;
}

.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: rgba(69,199,255,0.1) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--egh-primary) !important;
    border-radius: var(--egh-radius) !important;
}

.custom-select,
select.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;
}

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

label {
    color: var(--egh-muted) !important;
    font-size: 0.9rem;
    font-weight: 500 !important;
    margin-bottom: 6px !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: rgba(255,255,255,0.2) !important;
}

/* ── Buttons ──────────────────────────────────────────────────
   Mirrors the site's two-button system: lime = the one action you
   want taken, ghost = everything else. Inter, not the display face,
   because that is what the site's .eug-btn uses. */
.btn {
    border-radius: var(--egh-radius) !important;
    font-family: var(--egh-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0 !important;
    padding: 10px 20px !important;
    transition: background 0.18s, border-color 0.18s, color 0.18s !important;
}

.btn-sm { padding: 6px 13px !important; font-size: 0.86rem !important; }
.btn-lg { padding: 14px 26px !important; font-size: 1rem !important; }

/* Primary = lime CTA, exactly as .eug-btn-primary on the site */
.btn-primary {
    background: var(--egh-accent) !important;
    border: 1px solid rgba(203,255,94,0.55) !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;
    border-color: var(--egh-accent-hov) !important;
    color: var(--egh-accent-ink) !important;
}

/* Secondary = ghost outline, as .eug-btn-ghost */
.btn-default,
.btn-secondary {
    background-color: transparent !important;
    border: 1px solid rgba(244,250,255,0.24) !important;
    color: var(--egh-text) !important;
}
.btn-default:hover,
.btn-secondary:hover,
.btn-default:focus,
.btn-secondary:focus {
    background-color: rgba(69,199,255,0.05) !important;
    border-color: var(--egh-primary) !important;
    color: var(--egh-text) !important;
}

/* Status buttons: tinted plates rather than saturated fills, so they
   sit on the canvas the same way the status pills do. */
.btn-success {
    background: rgba(125,255,178,0.14) !important;
    border: 1px solid rgba(125,255,178,0.45) !important;
    color: var(--egh-success) !important;
}
.btn-success:hover {
    background: rgba(125,255,178,0.22) !important;
    color: var(--egh-success) !important;
}

.btn-danger {
    background: rgba(248,113,113,0.14) !important;
    border: 1px solid rgba(248,113,113,0.45) !important;
    color: var(--egh-danger) !important;
}
.btn-danger:hover {
    background: rgba(248,113,113,0.22) !important;
    color: var(--egh-danger) !important;
}

.btn-warning {
    background: rgba(251,191,36,0.14) !important;
    border: 1px solid rgba(251,191,36,0.45) !important;
    color: var(--egh-warning) !important;
}
.btn-warning:hover {
    background: rgba(251,191,36,0.22) !important;
    color: var(--egh-warning) !important;
}

.btn-info {
    background: rgba(69,199,255,0.12) !important;
    border: 1px solid var(--egh-border-blue) !important;
    color: var(--egh-primary) !important;
}
.btn-info:hover {
    background: rgba(69,199,255,0.2) !important;
    color: var(--egh-primary) !important;
}

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

.btn-outline-primary {
    color: var(--egh-primary) !important;
    border-color: var(--egh-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: rgba(69,199,255,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(69,199,255,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(69,199,255,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(69,199,255,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(69,199,255,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(69,199,255,0.12) !important;
}

li.dropdown-item.active {
    background: rgba(69,199,255,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: #03111C !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(69,199,255,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(69,199,255,0.08) !important;
    color: var(--egh-text) !important;
}
.nav-pills .nav-link.active {
    background: var(--egh-primary) !important;
    color: #03111C !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(69,199,255,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: #03111C !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(69,199,255,0.1) !important;
    border-color: var(--egh-primary) !important;
    color: #45C7FF !important;
}

.alert-success {
    background-color: rgba(125,255,178,0.1) !important;
    border-color: var(--egh-success) !important;
    color: #7DFFB2 !important;
}

.alert-danger {
    background-color: rgba(248,113,113,0.1) !important;
    border-color: var(--egh-danger) !important;
    color: #F87171 !important;
}

.alert-warning {
    background-color: rgba(251,191,36,0.1) !important;
    border-color: var(--egh-warning) !important;
    color: #FBBF24 !important;
}

.alert-info {
    background-color: rgba(69,199,255,0.1) !important;
    border-color: #45C7FF !important;
    color: #45C7FF !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: 6px !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(125,255,178,0.16) !important;
    color: var(--egh-success) !important;
    border: 1px solid rgba(125,255,178,0.4) !important;
}
.label-info {
    background-color: rgba(69,199,255,0.16) !important;
    color: var(--egh-primary) !important;
    border: 1px solid var(--egh-border-blue) !important;
}
.label-warning {
    background-color: rgba(251,191,36,0.16) !important;
    color: var(--egh-warning) !important;
    border: 1px solid rgba(251,191,36,0.4) !important;
}
.label-danger {
    background-color: rgba(248,113,113,0.16) !important;
    color: var(--egh-danger) !important;
    border: 1px solid rgba(248,113,113,0.4) !important;
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    border-radius: 6px !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: #03111C !important;
}

.badge-success {
    background-color: rgba(125,255,178,0.2) !important;
    color: #7DFFB2 !important;
    border: 1px solid rgba(125,255,178,0.4) !important;
}

.badge-danger {
    background-color: rgba(248,113,113,0.2) !important;
    color: #F87171 !important;
    border: 1px solid rgba(248,113,113,0.4) !important;
}

.badge-warning {
    background-color: rgba(251,191,36,0.2) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(251,191,36,0.4) !important;
}

/* ── Status labels (WHMCS service statuses) ───────────────── */
.status-active,
.status-open,
.status-completed,
.status-paid {
    background: rgba(125,255,178,0.16) !important;
    color: #7DFFB2 !important;
    border: 1px solid rgba(125,255,178,0.4) !important;
    border-radius: 6px !important;
}

.status-pending,
.status-unpaid {
    background: rgba(248,113,113,0.16) !important;
    color: #F87171 !important;
    border: 1px solid rgba(248,113,113,0.4) !important;
    border-radius: 6px !important;
}

.status-suspended {
    background: rgba(251,191,36,0.16) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(251,191,36,0.4) !important;
    border-radius: 6px !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: 6px !important;
}

.status-onhold,
.status-payment-pending,
.status-delivered {
    background: linear-gradient(135deg, rgba(69,199,255,0.2), rgba(69,199,255,0.1)) !important;
    color: #45C7FF !important;
    border: 1px solid rgba(69,199,255,0.4) !important;
    border-radius: 6px !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(69,199,255,0.06) !important;
    color: var(--egh-text) !important;
}

.list-group-item.active {
    background: rgba(69,199,255,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(69,199,255,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(69,199,255,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(69,199,255,0.08) !important;
}

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

.progress-bar {
    background: var(--egh-primary) !important;
    border-radius: 99px !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(69,199,255,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(69,199,255,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(69,199,255,0.06) !important;
    color: var(--egh-text) !important;
}

.action-icon-btns a .ico-container i {
    color: rgba(69,199,255,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(69,199,255,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(69,199,255,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(251,191,36,0.10) !important;
    border-top: 1px solid rgba(251,191,36,0.28) !important;
    border-bottom: 1px solid rgba(251,191,36,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(251,191,36,0.5) !important;
    color: var(--egh-warning) !important;
}
.verification-banner .btn-resend-verify-email:hover {
    background: rgba(251,191,36,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(69,199,255,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(69,199,255,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(69,199,255,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(69,199,255,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: 6px !important;
    transition: all 0.2s ease !important;
}

.modal-localisation .item-selector .item:hover {
    background-color: rgba(69,199,255,0.1) !important;
    color: #fff !important;
}

.modal-localisation .item-selector .item.active {
    background: var(--egh-primary) !important;
    border-color: var(--egh-primary) !important;
    color: #03111C !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(248,113,113,0.1) !important;
    border-color: var(--egh-danger) !important;
    color: #F87171 !important;
}

/* ── Full page overlay ────────────────────────────────────── */
#fullpage-overlay {
    background-color: rgba(7,11,18,0.9) !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 #FBBF24 !important; }
.card-accent-green  { border-top: 2px solid #7DFFB2 !important; }
.card-accent-red    { border-top: 2px solid #F87171 !important; }
.card-accent-blue   { border-top: 2px solid var(--egh-primary) !important; }

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

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--egh-danger) !important;
    box-shadow: 0 0 0 3px rgba(248,113,113,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(248,113,113,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(125,255,178,0.15) !important;
}

/* ── Scrollbar (same branded bar as the front end) ────────── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--egh-bg); }
::-webkit-scrollbar-thumb {
    background: rgba(69,199,255,0.28);
    border-radius: 999px;
    border: 3px solid var(--egh-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(69,199,255,0.55); }
::-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(69,199,255,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(69,199,255,0.1) !important;
    color: var(--egh-secondary) !important;
    border-radius: 4px !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(69,199,255,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(69,199,255,0.08) !important;
    color: var(--egh-primary) !important;
}

/* ============================================================
   EUGameHost: WHMCS Order Form Dark Theme
   Add these rules to the bottom of your custom.css
   OR save as a separate file and link after store.css
   ============================================================ */

/* ── 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(69,199,255,0.08) !important;
    color: var(--egh-text) !important;
    padding-left: 20px !important;
}

#order-standard_cart .cart-sidebar .list-group-item.active {
    background: rgba(69,199,255,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(69,199,255,0.35) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.5) !important;
}

#order-standard_cart .products .product header {
    background: rgba(69,199,255,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(69,199,255,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(69,199,255,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: #03111C !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: #03111C !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: 1px solid rgba(203,255,94,0.55) !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(69,199,255,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(69,199,255,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(69,199,255,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(69,199,255,0.06) !important;
}

#order-standard_cart .domain-selection-options .option-selected {
    background: rgba(69,199,255,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: #7DFFB2 !important;
}

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

#order-standard_cart .transfer-eligible {
    background: rgba(125,255,178,0.1) !important;
    border: 1px solid rgba(125,255,178,0.3) !important;
    color: #7DFFB2 !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(69,199,255,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: #03111C !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: #03111C !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(69,199,255,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(69,199,255,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(69,199,255,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: #04220F !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(69,199,255,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(69,199,255,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: #F4FAFF !important;
    -webkit-text-fill-color: #F4FAFF !important;
    background-color: #0B1220 !important;
    caret-color: #45C7FF !important;
}

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

/* ============================================================
   4. SITE CHROME — imported from the front end
   ------------------------------------------------------------
   Header, mega nav, mobile nav and footer are a direct port of
   partials/home-2026/{header,footer}.php + the matching blocks of
   css/home-2026.css, so the client area and www share one nav.

   The eug- namespace is deliberately kept intact: when the front
   end's chrome changes, the corresponding block here can be
   replaced wholesale rather than re-derived.

   Two deltas from the source, both forced by WHMCS:
     · link colour is re-asserted inside the chrome, because this
       file sets a global `a { color: var(--egh-primary) }` that
       the front end does not have;
     · .eug-shell is redefined here rather than reusing Bootstrap's
       .container, so the header spans the same 1360px as on www.
   ============================================================ */

/* Wider than www's 1360 shell. The client-area nav row carries an
   account chip and a cart on top of the site links, and 1360 leaves
   the row 90px short of its intrinsic width. Both the header and the
   footer use this so the two stay aligned with each other. */
.eug-shell {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
}

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

/* ── Skip link (WCAG 2.4.1) ───────────────────────────────── */
.eug-skip {
    position: fixed; left: 16px; top: -100px; z-index: 100;
    padding: 12px 20px; border-radius: 0 0 10px 10px;
    background: var(--eug-blue); color: #06121D !important;
    font-family: var(--eug-font-body); font-size: 0.95rem; font-weight: 700;
    text-decoration: none;
    transition: top 0.15s ease;
}
.eug-skip:focus { top: 0; }
.eug-skip:focus-visible { outline: 3px solid #06121D; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .eug-skip { transition: none; } }

/* ── Header / primary nav ─────────────────────────────────── */
.eug-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(7,11,18,0.82);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.eug-header.is-stuck {
    border-bottom-color: var(--eug-border);
    background: rgba(7,11,18,0.92);
}
.eug-nav { display: flex; align-items: center; gap: 20px; height: 72px; }

.eug-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.eug-logo img { height: 38px; width: auto; display: block; object-fit: contain; }

.eug-nav-links {
    display: flex; align-items: center; gap: 2px;
    margin: 0 auto 0 8px; padding: 0; list-style: none;
}
.eug-nav-links > li { position: relative; }
.eug-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--eug-pill);
    font-size: 0.95rem; font-weight: 500; color: var(--eug-muted) !important;
    transition: color 0.18s, background 0.18s; white-space: nowrap;
}
.eug-nav-link:hover { color: var(--eug-frost) !important; background: rgba(255,255,255,0.05); }
.eug-nav-link .eug-caret { font-size: 0.62rem; opacity: 0.7; transition: transform 0.2s; }
.eug-nav-links > li:hover .eug-caret,
.eug-nav-links > li:focus-within .eug-caret { transform: rotate(180deg); }

.eug-dropdown {
    position: absolute; top: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 240px; background: var(--eug-deep-navy);
    border: 1px solid var(--eug-border); border-radius: var(--eug-radius-sm);
    padding: 8px; box-shadow: var(--eug-shadow-blue);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.eug-nav-links > li:hover .eug-dropdown,
.eug-nav-links > li:focus-within:not(.eug-nav-dismissed) .eug-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Escape dismisses the panel without moving the pointer (SC 1.4.13) */
.eug-nav-links > li.eug-nav-dismissed .eug-dropdown,
.eug-nav-links > li.eug-nav-dismissed .eug-mega {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.eug-dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.eug-dropdown a {
    display: block; padding: 9px 12px; border-radius: 9px;
    font-size: 0.9rem; font-weight: 500; color: var(--eug-muted) !important;
    transition: color 0.15s, background 0.15s;
}
.eug-dropdown a:hover { color: var(--eug-frost) !important; background: var(--eug-interactive); }

/* Mega dropdown (Games) */
.eug-mega {
    position: absolute; top: calc(100% + 10px); left: 0;
    transform: translateY(6px);
    width: min(720px, 84vw);
    background: var(--eug-deep-navy);
    border: 1px solid var(--eug-border); border-radius: var(--eug-radius-sm);
    padding: 22px; box-shadow: var(--eug-shadow-blue);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.eug-nav-links > li:hover .eug-mega,
.eug-nav-links > li:focus-within:not(.eug-nav-dismissed) .eug-mega {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.eug-mega::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.eug-mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 18px; }
.eug-mega-col .eug-mega-h {
    margin: 0 0 10px; padding: 0 4px;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--eug-muted) !important;
}
.eug-mega-link {
    display: flex; align-items: center; gap: 12px;
    padding: 8px; border-radius: 10px; transition: background 0.15s;
}
.eug-mega-link:hover { background: var(--eug-interactive); }
.eug-mega-thumb {
    width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
    border: 1px solid var(--eug-border); background: var(--eug-ink);
}
.eug-mega-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eug-mega-link .n { font-size: 0.95rem; font-weight: 500; color: #d7e6f4; white-space: nowrap; }
.eug-mega-link:hover .n { color: var(--eug-frost); }
.eug-mega-foot {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--eug-border); text-align: center;
}
.eug-mega-foot a {
    font-size: 0.86rem; font-weight: 700; color: var(--eug-blue) !important;
    /* bare inline it measures 108x16 — under the 24x24 minimum (SC 2.5.8) */
    display: inline-block; padding: 5px 10px;
}
.eug-mega-foot a:hover { color: var(--eug-blue-glow) !important; }

/* Wide dropdown (Dedicated Servers) */
.eug-dropdown--wide { min-width: 440px; }
.eug-dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.eug-dd-col .eug-dd-h {
    margin: 4px 0; padding: 0 12px;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--eug-blue);
}

/* ── Nav actions ──────────────────────────────────────────── */
.eug-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.eug-login {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--eug-pill);
    font-size: 0.92rem; font-weight: 500; color: var(--eug-frost) !important;
    border: 1px solid rgba(244,250,255,0.16);
    transition: border-color 0.18s, background 0.18s; white-space: nowrap;
    /* Company names run long; cap the chip so one client cannot widen
       the whole row past the shell. */
    max-width: 170px; overflow: hidden; text-overflow: ellipsis;
}
.eug-login:hover { border-color: var(--eug-blue); background: rgba(69,199,255,0.06); }

/* "Under attack?" — the one red thing in the nav, so it reads as an
   emergency route and not as another product link. */
.eug-nav-attack {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: var(--eug-pill);
    font-size: 0.88rem; font-weight: 700; white-space: nowrap;
    color: #F87171 !important;
    border: 1px solid rgba(248,113,113,0.42); background: rgba(248,113,113,0.08);
    transition: border-color 0.18s, background 0.18s;
}
.eug-nav-attack:hover { border-color: #F87171; background: rgba(248,113,113,0.16); }

/* Cart pill with live item count */
.eug-nav-cart {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    color: var(--eug-frost) !important;
    border: 1px solid var(--eug-border); background: rgba(255,255,255,0.04);
    transition: border-color 0.18s, background 0.18s;
}
.eug-nav-cart:hover { border-color: var(--eug-blue); background: rgba(69,199,255,0.08); }
.eug-nav-cart .eug-cart-count {
    position: absolute; top: -6px; right: -6px;
    min-width: 20px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--eug-pill);
    background: var(--eug-accent); color: var(--egh-accent-ink);
    font-size: 0.68rem; font-weight: 800; line-height: 1;
}
.eug-nav-cart .eug-cart-count:empty,
.eug-nav-cart .eug-cart-count[data-count="0"] { display: none; }

.eug-burger {
    display: none; width: 42px; height: 42px;
    align-items: center; justify-content: center; border-radius: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--eug-border);
    color: var(--eug-frost); font-size: 1.1rem; cursor: pointer;
}

/* ── Mobile nav ───────────────────────────────────────────── */
.eug-mobile {
    display: none; position: fixed; inset: 0; z-index: 59;
    background: rgba(7,11,18,0.98); backdrop-filter: blur(8px);
    padding: 96px clamp(20px, 6vw, 40px) 40px; overflow-y: auto;
}
.eug-mobile.open { display: block; }
.eug-mobile-list { list-style: none; margin: 0; padding: 0; }
.eug-mobile-list a {
    display: block; padding: 16px 4px;
    font-size: 1.25rem; font-weight: 600; color: var(--eug-frost) !important;
    border-bottom: 1px solid var(--eug-border);
}
.eug-mobile-list a:hover { color: var(--eug-blue) !important; }
.eug-mobile-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

/* The site's two buttons, needed by the mobile CTA block. Scoped to the
   chrome so they cannot collide with Bootstrap's .btn inside the app. */
.eug-mobile .eug-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 15px 26px; border-radius: 8px;
    font-family: var(--eug-font-body); font-size: 1rem; font-weight: 700;
    text-align: center; cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}
.eug-mobile .eug-btn-primary {
    background: var(--eug-accent); color: var(--egh-accent-ink) !important;
    border: 1px solid rgba(203,255,94,0.55);
}
.eug-mobile .eug-btn-primary:hover { background: var(--eug-accent-glow); }
.eug-mobile .eug-btn-ghost {
    background: transparent; color: var(--eug-frost) !important;
    border: 1px solid rgba(244,250,255,0.24);
}
.eug-mobile .eug-btn-ghost:hover { border-color: var(--eug-blue); background: rgba(69,199,255,0.05); }

/* ── Footer ───────────────────────────────────────────────── */
.eug-footer {
    background: var(--eug-canvas);
    border-top: 1px solid var(--eug-border);
    padding: 72px 0 40px;
}
.eug-footer-top {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px;
    padding-bottom: 48px; border-bottom: 1px solid var(--eug-border);
}
.eug-footer-brand img { height: 40px; width: auto; margin-bottom: 18px; }
.eug-footer-brand p {
    margin: 0 0 18px; max-width: 300px;
    font-size: 0.92rem; line-height: 1.6; color: var(--eug-muted);
}
.eug-footer-social { display: flex; gap: 10px; }
.eug-footer-social a {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--eug-border); color: var(--eug-muted) !important;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.eug-footer-social a:hover {
    color: var(--eug-blue) !important;
    border-color: var(--eug-border-blue);
    background: rgba(69,199,255,0.06);
}
.eug-footer-col h2 {
    margin: 0 0 18px !important;
    font-family: var(--eug-font-body) !important;
    font-size: 0.78rem !important; font-weight: 700 !important;
    letter-spacing: 0.1em !important; text-transform: uppercase;
    color: var(--eug-frost) !important;
}
/* gap 4 + 8px of link padding gives the same 30px item pitch as the original
   gap 12 with bare inline links, but makes every link a 26px touch target
   instead of 18px (SC 2.5.8). Measured identical column height either way. */
.eug-footer-col ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.eug-footer-col li { color: inherit; }
.eug-footer-col a {
    font-size: 0.92rem; color: var(--eug-muted) !important; transition: color 0.16s;
    display: inline-block; padding: 4px 0;
}
.eug-footer-col a:hover { color: var(--eug-blue) !important; }
.eug-footer-bottom {
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 28px; font-size: 0.85rem; color: var(--eug-muted);
}
/* Measured 16-22px tall as bare inline links, under the 24x24 minimum
   (SC 2.5.8). Padding rather than a taller line-height so the two legal
   rows keep their spacing. */
.eug-footer-bottom a {
    color: var(--eug-muted) !important;
    display: inline-block;
    padding: 4px 0;
}
.eug-footer-bottom a:hover { color: var(--eug-blue) !important; }
.eug-footer-legal-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.eug-footer-regnos { color: var(--eug-muted); }
.eug-footer-network { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 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 nav row's intrinsic width is fixed (the links do not wrap or
   shrink), so the breakpoints below are derived from it rather than
   copied from www — measured logged in, with a long company name and
   a non-empty cart:

     logo 203 + links 617 + nav gaps 48            =  868  always
     + attack 148 + login 170 + cart 42 + gaps 20  = 1248  full row
     + attack icon-only (44 not 148)               = 1144
     + no attack                                   = 1080

   Available width is min(1480, viewport) - 96 of shell padding, so
   each step below is that figure plus a little slack. www hides its
   links at 980, which is ~170px optimistic for this row. */
@media (max-width: 1420px) {
    /* Icon-only rather than hidden: this is the DDoS emergency route
       and it should stay reachable on a laptop screen. */
    .eug-nav-attack .eug-nav-attack-label { display: none; }
    .eug-nav-attack { padding: 9px 13px; }
}
@media (max-width: 1300px) {
    .eug-nav-actions .eug-nav-attack { display: none; }
}
@media (max-width: 1220px) {
    .eug-nav-links { display: none; }
    .eug-nav-actions .eug-login { display: none; }
    .eug-burger { display: inline-flex; }
    .eug-nav { margin-left: auto; }
    .eug-logo { margin-right: auto; }
}
@media (max-width: 980px) {
    .eug-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
    .eug-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .eug-footer-top { grid-template-columns: 1fr; }
    .eug-nav { gap: 12px; }
    /* the touch-target padding that used to live here now applies at every
       width — it was leaving footer links at 18px on tablets */
}


/* ============================================================
   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 same grid as the imported
   chrome. Without this, Bootstrap caps them at 1140px while .eug-shell
   runs to 1480, so at 1600px the site logo sat 122px left of the client
   nav below it and the whole page read as two misaligned layouts. Same
   max-width and the same padding expression, so the edges line up at
   every width. */
#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 chrome sits at 1480. Match the container-less branch too. */
#main-body > div:not(.container) {
    max-width: 1480px !important;
    padding-left: clamp(20px, 5vw, 48px) !important;
    padding-right: clamp(20px, 5vw, 48px) !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(251,191,36,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(.eug-credit-balance) {
    display: inline-flex !important;
    align-items: center !important;
    padding: 16px 14px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !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(.eug-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: #03111C !important;
}
.navbar-toggler {
    border: 1px solid var(--egh-border) !important;
    color: var(--egh-text) !important;
    border-radius: 10px !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. */
.eug-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;
}
.eug-credit-balance:hover {
    border-color: var(--egh-primary) !important;
    background: rgba(69,199,255,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(251,191,36,0.14) !important; color: var(--egh-warning) !important; }

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

/* Mass payment total row */
tr.masspay-total td { background-color: rgba(69,199,255,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(69,199,255,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(248,113,113,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; }

    .eug-footer { padding: 48px 0 32px !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: 14px !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 203px logo plus the cart and burger needs 347px of a 320px screen —
   measured 9px of horizontal page overflow on a 320x640 device. Nothing else
   in the header can give, so the logo does. */
@media (max-width: 380px) {
    .eug-logo img { height: 30px; }
    .eug-nav { gap: 10px; }
    .eug-shell { padding: 0 16px; }
}