/* ============================================================
 *  ESA26 CHROME — additive overrides for public-facing header,
 *  payments strip and footer. Matches the 2026 homepage palette:
 *  single brand green (#17d773) + neutral surfaces.
 *  This file is loaded LAST so it wins on specificity ties.
 *  Scoped strictly to public chrome — NEVER touches client area.
 * ============================================================ */

/* ---- shared tokens (mirror homepage.tpl) ---- */
:root {
    --esa26c-brand: #17d773;
    --esa26c-brand-2: #0fb15f;
    --esa26c-brand-soft: rgba(23, 215, 115, .12);
    --esa26c-bg: #05080f;
    --esa26c-bg-2: #080d18;
    --esa26c-surface: #0d1422;
    --esa26c-surface-2: #111a2c;
    --esa26c-line: rgba(148, 163, 184, .10);
    --esa26c-line-2: rgba(148, 163, 184, .18);
    --esa26c-ink: #e9eef7;
    --esa26c-ink-mute: #9aa6b8;
    --esa26c-ink-dim: #6b7689;
}

html[data-theme="light"] {
    --esa26c-bg: #f4f7fb;
    --esa26c-bg-2: #ffffff;
    --esa26c-surface: #ffffff;
    --esa26c-surface-2: #f3f6fb;
    --esa26c-line: rgba(15, 23, 42, .08);
    --esa26c-line-2: rgba(15, 23, 42, .14);
    --esa26c-ink: #0f172a;
    --esa26c-ink-mute: #475569;
    --esa26c-ink-dim: #64748b;
    --esa26c-brand-soft: rgba(15, 177, 95, .10);
}

/* =====================================================
 *  TOP BAR — Email Support / theme toggle / cart
 * ===================================================== */
#header-top {
    background: var(--esa26c-bg-2) !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    padding: 10px 0 !important;
}

#header-top>.page-container {
    max-width: 1320px !important;
    padding: 0 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
}

#header-top a.supportEmail,
#header-top .supportEmail {
    color: var(--esa26c-brand) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 6px 4px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#header-top a.supportEmail i,
#header-top .supportEmail i {
    color: var(--esa26c-brand) !important;
    font-size: 14px !important;
}

#header-top a.supportEmail:hover,
#header-top .supportEmail:hover {
    color: var(--esa26c-brand-2) !important;
}

#header-top .header-top-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* theme toggle pill */
#header-top .theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    color: var(--esa26c-ink) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

#header-top .theme-toggle:hover {
    border-color: var(--esa26c-brand) !important;
    color: var(--esa26c-brand) !important;
}

#header-top .theme-toggle .theme-toggle-icons i {
    font-size: 14px !important;
}

/* notifications + cart */
#header-top .header-top-notify .notifyButton,
#header-top .header-top-cart .cartButton {
    background: var(--esa26c-surface) !important;
    color: var(--esa26c-ink) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    box-shadow: none !important;
    transition: border-color .2s ease, color .2s ease;
}

#header-top .header-top-notify .notifyButton:hover,
#header-top .header-top-cart .cartButton:hover {
    border-color: var(--esa26c-brand) !important;
    color: var(--esa26c-brand) !important;
}

#header-top .header-top-cart .badge {
    background: var(--esa26c-brand) !important;
    color: #04130a !important;
    font-weight: 800 !important;
}

#header-top .notifyButton.notifyTrue {
    border-color: var(--esa26c-brand) !important;
    color: var(--esa26c-brand) !important;
}

/* =====================================================
 *  PRIMARY NAVBAR
 * ===================================================== */
#header-navbar {
    background: var(--esa26c-surface) !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}

html[data-theme="light"] #header-navbar {
    box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}

#header-navbar>.page-container {
    max-width: 1320px !important;
    padding: 0 32px !important;
}

/* navbar links */
#navbar .nav .nav-link,
#navbar a.nav-link {
    color: var(--esa26c-ink) !important;
    font-weight: 600 !important;
    transition: color .18s ease;
}

#navbar .nav .nav-link:hover,
#navbar a.nav-link:hover,
#navbar .nav .nav-link:focus,
#navbar .nav .active>.nav-link {
    color: var(--esa26c-brand) !important;
}

#navbar .nav .nav-link i,
#navbar .nav .nav-link .ri-* {
    color: var(--esa26c-brand) !important;
}

/* dropdown caret icons recoloured */
#navbar .dropdown-menu {
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important;
    border-radius: 12px !important;
    padding: 8px !important;
}

html[data-theme="light"] #navbar .dropdown-menu {
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08) !important;
}

#navbar .dropdown-menu .dropdown-item {
    color: var(--esa26c-ink) !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

#navbar .dropdown-menu .dropdown-item:hover,
#navbar .dropdown-menu .dropdown-item:focus {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
}

/* userbar — Sign in / Create Account */
.header-navbar-right .userbar a,
.header-navbar-right .userbar .btn,
#userbar a,
#userbar .btn {
    font-weight: 700 !important;
}

.header-navbar-right .userbar .btn-primary,
.header-navbar-right .userbar a.btn-primary,
.header-navbar-right .userbar a.btn-success,
.header-navbar-right .userbar .btn-success,
#userbar .btn-primary,
#userbar .btn-success {
    background: var(--esa26c-brand) !important;
    border-color: var(--esa26c-brand) !important;
    color: #04130a !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    box-shadow: 0 8px 22px rgba(23, 215, 115, .28) !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.header-navbar-right .userbar .btn-primary:hover,
.header-navbar-right .userbar a.btn-success:hover,
#userbar .btn-primary:hover,
#userbar .btn-success:hover {
    background: var(--esa26c-brand-2) !important;
    border-color: var(--esa26c-brand-2) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(23, 215, 115, .35) !important;
    color: #04130a !important;
}

/* =====================================================
 *  PAYMENTS STRIP (#payments-methods)  — unified card
 * ===================================================== */
#payments-methods {
    background: var(--esa26c-bg) !important;
    border: 0 !important;
    padding: 48px 0 !important;
}

#payments-methods>.page-container {
    max-width: 1680px !important;
    padding: 0 48px !important;
    width: 100% !important;
}

#payments-methods .payments-inner {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    background: linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 18px !important;
    padding: 22px 28px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35) !important;
    overflow: hidden;
}

/* green hairline accent across the top of the card */
#payments-methods .payments-inner::before {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--esa26c-brand), transparent);
    opacity: .5;
    pointer-events: none;
}

html[data-theme="light"] #payments-methods .payments-inner {
    background: linear-gradient(160deg, #ffffff, var(--esa26c-surface-2)) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .06) !important;
}

#payments-methods .payments-copy {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    flex: 1 1 320px !important;
    min-width: 0;
}

#payments-methods .payments-copy p {
    display: none !important;
}

#payments-methods .payments-kicker {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(23, 215, 115, .22) !important;
}

#payments-methods .payments-copy strong {
    color: var(--esa26c-ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

#payments-methods .payments-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    flex: 0 1 auto !important;
}

/* payment chips — frosted dark tile with subtle inner highlight */
#payments-methods .payment-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 46px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
        var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

#payments-methods .payment-chip:hover {
    transform: translateY(-1px);
    border-color: var(--esa26c-brand) !important;
}

#payments-methods .payment-chip>img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 52px !important;
    max-height: 26px !important;
    opacity: .92 !important;
    filter: grayscale(.35) brightness(1.15) contrast(1.05) !important;
    transition: opacity .2s ease, filter .2s ease;
}

#payments-methods .payment-chip:hover>img {
    opacity: 1 !important;
    filter: grayscale(0) brightness(1.05) contrast(1) !important;
}

html[data-theme="light"] #payments-methods .payment-chip {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

html[data-theme="light"] #payments-methods .payment-chip>img {
    filter: none !important;
    opacity: 1 !important;
}

@media (max-width: 900px) {
    #payments-methods .payments-row {
        justify-content: flex-start !important;
    }
}

/* =====================================================
 *  ADVANCED FOOTER  — full-bleed, modern, layered
 * ===================================================== */
#footer-advanced {
    position: relative;
    background: linear-gradient(180deg, var(--esa26c-bg-2), var(--esa26c-bg) 40%) !important;
    border-top: 1px solid var(--esa26c-line) !important;
    padding: 64px 0 28px !important;
    color: var(--esa26c-ink-mute) !important;
    overflow: hidden;
}

html[data-theme="light"] #footer-advanced {
    background: linear-gradient(180deg, #ffffff, var(--esa26c-bg) 40%) !important;
}

#footer-advanced::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--esa26c-brand), transparent) !important;
    opacity: .55 !important;
    pointer-events: none;
    z-index: 3;
    /* kill the legacy overrides.css blurred green corner blob */
    filter: none !important;
    border-radius: 0 !important;
}

/* faint grid texture, masked to fade out — mirrors homepage hero */
#footer-advanced::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none;
    z-index: 0;
    background-color: transparent !important;
    background-image:
        linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px) !important;
    background-size: 56px 56px;
    /* kill the legacy overrides.css blurred white corner blob */
    filter: none !important;
    border-radius: 0 !important;
    -webkit-mask-image: radial-gradient(1100px 360px at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(1100px 360px at 50% 0%, #000 0%, transparent 75%);
}

html[data-theme="light"] #footer-advanced::after {
    background-image:
        linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
}

#footer-advanced > .page-container,
#footer-advanced .footer-pro {
    position: relative;
    z-index: 1;
}

#footer-advanced>.page-container {
    max-width: 1680px !important;
    padding: 0 48px !important;
    background: transparent !important;
    width: 100% !important;
}

#footer-advanced .footer-pro {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    position: relative;
    overflow: visible;
}

html[data-theme="light"] #footer-advanced .footer-pro {
    box-shadow: none !important;
}

#footer-advanced .footer-pro::before,
#footer-advanced .footer-pro::after {
    display: none !important;
}

#footer-advanced .footer-pro-main {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr 1fr 1.2fr !important;
    gap: 32px !important;
    align-items: stretch !important;
}

#footer-advanced .footer-pro-brand {
    min-width: 0;
    padding: 28px 26px !important;
    border-radius: 18px !important;
    background: linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28) !important;
}

html[data-theme="light"] #footer-advanced .footer-pro-brand {
    background: linear-gradient(160deg, #ffffff, var(--esa26c-surface-2)) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}

#footer-advanced .footer-pro-logo-wrap {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
}

#footer-advanced .footer-pro-summary {
    color: var(--esa26c-ink-mute) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 22px !important;
}

#footer-advanced .footer-pro-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#footer-advanced .footer-pro-contact-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--esa26c-ink) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, .22) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}

html[data-theme="light"] #footer-advanced .footer-pro-contact-item {
    background: rgba(15, 23, 42, .035) !important;
}

#footer-advanced .footer-pro-contact-item:hover {
    border-color: var(--esa26c-brand) !important;
    color: var(--esa26c-brand) !important;
    transform: translateY(-1px);
}

#footer-advanced .footer-pro-contact-item i {
    color: var(--esa26c-brand) !important;
    font-size: 16px !important;
}

#footer-advanced .footer-pro-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 30px !important;
    grid-column: span 2;
}

#footer-advanced .footer-pro-col h3 {
    color: var(--esa26c-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .18em !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

#footer-advanced .footer-pro-col a {
    position: relative;
    display: block !important;
    color: var(--esa26c-ink-mute) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 6px 0 6px 0 !important;
    text-decoration: none !important;
    transition: color .18s ease, padding .18s ease;
}

/* slim green marker that grows in on hover */
#footer-advanced .footer-pro-col a::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 2px;
    top: 50%;
    width: 7px;
    height: 2px;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    background: var(--esa26c-brand);
    border-radius: 2px;
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}

#footer-advanced .footer-pro-col a>i,
#footer-advanced .footer-pro-col a [class*="ri-"] {
    display: none !important;
}

#footer-advanced .footer-pro-col a:hover {
    color: var(--esa26c-brand) !important;
    padding-left: 14px !important;
}

#footer-advanced .footer-pro-col a:hover::before {
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
}

/* trust column */
#footer-advanced .footer-pro-trust {
    min-width: 0;
    padding: 28px 26px !important;
    border-radius: 18px !important;
    background: linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28) !important;
}

html[data-theme="light"] #footer-advanced .footer-pro-trust {
    background: linear-gradient(160deg, #ffffff, var(--esa26c-surface-2)) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}

/* links sit between the two cards — give them breathing room */
#footer-advanced .footer-pro-links {
    padding-top: 6px !important;
}

#footer-advanced .footer-pro-eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--esa26c-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .18em !important;
    margin-bottom: 12px !important;
}

#footer-advanced .footer-pro-trust-copy {
    color: var(--esa26c-ink-mute) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

#footer-advanced .footer-pro-badges {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
    margin-bottom: 16px;
    align-items: stretch !important;
}

#footer-advanced .footer-pro-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 12px 14px !important;
    background: rgba(0, 0, 0, .22) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 12px !important;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

#footer-advanced .footer-pro-badge:hover {
    border-color: var(--esa26c-brand) !important;
    transform: translateY(-1px);
    background: rgba(0, 0, 0, .12) !important;
}

#footer-advanced .footer-pro-badge img {
    max-width: 100% !important;
    max-height: 28px !important;
    height: auto !important;
    opacity: .9 !important;
    filter: grayscale(1) brightness(1.4) contrast(1.1) !important;
    transition: opacity .2s ease, filter .2s ease;
}

#footer-advanced .footer-pro-badge:hover img {
    opacity: 1 !important;
    filter: grayscale(.4) brightness(1.2) contrast(1.05) !important;
}

html[data-theme="light"] #footer-advanced .footer-pro-badge {
    background: rgba(15, 23, 42, .035) !important;
    border-color: rgba(15, 23, 42, .10) !important;
}

html[data-theme="light"] #footer-advanced .footer-pro-badge img {
    filter: none !important;
    opacity: 1 !important;
}

/* trustpilot link card — single subdued green for stars, no gold */
#footer-advanced #trustpilot-widget-footer,
#footer-advanced .footer-pro-review-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: rgba(0, 0, 0, .22) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 10px !important;
    color: var(--esa26c-ink) !important;
    text-decoration: none !important;
    margin-bottom: 16px !important;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

html[data-theme="light"] #footer-advanced #trustpilot-widget-footer,
html[data-theme="light"] #footer-advanced .footer-pro-review-link {
    background: rgba(15, 23, 42, .035) !important;
}

#footer-advanced .footer-pro-review-link:hover {
    border-color: var(--esa26c-brand) !important;
    transform: translateY(-1px);
}

#footer-advanced .footer-pro-review-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

#footer-advanced .footer-pro-review-label {
    color: var(--esa26c-ink-dim) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .15em !important;
}

#footer-advanced .footer-pro-review-stars {
    color: var(--esa26c-brand) !important;
    font-size: 14px !important;
    display: inline-flex;
    gap: 1px;
}

#footer-advanced .footer-pro-review-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#footer-advanced .footer-pro-review-score strong {
    color: var(--esa26c-ink) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

#footer-advanced .footer-pro-review-score span {
    color: var(--esa26c-ink-dim) !important;
    font-size: 11px !important;
}

#footer-advanced .footer-pro-review-link>i {
    color: var(--esa26c-brand) !important;
    font-size: 16px !important;
}

#footer-advanced .footer-pro-policy-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

#footer-advanced .footer-pro-policy-links a,
#footer-advanced .footer-pro-policy-trigger {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .22) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    color: var(--esa26c-ink-mute) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
    cursor: pointer;
}

html[data-theme="light"] #footer-advanced .footer-pro-policy-links a,
html[data-theme="light"] #footer-advanced .footer-pro-policy-trigger {
    background: rgba(15, 23, 42, .035) !important;
}

#footer-advanced .footer-pro-policy-links a:hover,
#footer-advanced .footer-pro-policy-trigger:hover {
    border-color: var(--esa26c-brand) !important;
    color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
}

/* bottom strip */
#footer-advanced .footer-pro-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-top: 30px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--esa26c-line) !important;
}

#footer-advanced .footer-pro-company {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 18px !important;
    font-size: 12px !important;
    color: var(--esa26c-ink-dim) !important;
}

#footer-advanced .footer-pro-company strong {
    color: var(--esa26c-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

#footer-advanced .footer-pro-company span {
    color: var(--esa26c-ink-dim) !important;
}

#footer-advanced .footer-pro-network {
    display: flex !important;
    gap: 16px !important;
}

#footer-advanced .footer-pro-network a {
    color: var(--esa26c-ink-mute) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color .18s ease;
}

#footer-advanced .footer-pro-network a:hover {
    color: var(--esa26c-brand) !important;
}

#footer-advanced .footer-pro-copyright {
    color: var(--esa26c-ink-dim) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

#footer-advanced .footer-pro-copyright:hover {
    color: var(--esa26c-brand) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    #footer-advanced .footer-pro-main {
        grid-template-columns: 1fr 1fr !important;
    }

    #footer-advanced .footer-pro-brand {
        grid-column: span 2;
    }

    #footer-advanced .footer-pro-links {
        grid-column: span 2;
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    #footer-advanced .footer-pro-trust {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    #header-top>.page-container {
        padding: 0 16px !important;
    }

    #header-navbar>.page-container {
        padding: 0 16px !important;
    }

    #payments-methods>.page-container {
        padding: 0 16px !important;
    }

    #footer-advanced>.page-container {
        padding: 0 16px !important;
    }

    #footer-advanced .footer-pro {
        padding: 0 !important;
    }

    #footer-advanced .footer-pro-brand,
    #footer-advanced .footer-pro-trust {
        padding: 24px 20px !important;
    }

    #footer-advanced .footer-pro-main {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    #footer-advanced .footer-pro-links {
        grid-column: auto;
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }

    #footer-advanced .footer-pro-trust {
        grid-column: auto;
    }

    #footer-advanced .footer-pro-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    #payments-methods .payments-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    #payments-methods .payments-row {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    #footer-advanced .footer-pro-links {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
 *  STORE MEGA-MENU + QUICK LINKS DROPDOWN — green palette
 * ===================================================== */

/* panel shell — flat surface, soft shadow, no garish gradients */
.store-nav .dropdown-panel.store-mega,
.quick-mega-nav .dropdown-panel.quick-mega {
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
    backdrop-filter: blur(20px) !important;
    padding: 20px !important;
}

html[data-theme="light"] .store-nav .dropdown-panel.store-mega,
html[data-theme="light"] .quick-mega-nav .dropdown-panel.quick-mega {
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12) !important;
}

/* active trigger glow → green, not cyan */
.store-nav.open>.dropdown-trigger,
.quick-mega-nav.open>.dropdown-trigger {
    color: var(--esa26c-brand) !important;
    text-shadow: 0 0 12px rgba(23, 215, 115, .45) !important;
}

.store-nav.open>.dropdown-trigger i.fa-store,
.store-nav.open>.dropdown-trigger i,
.quick-mega-nav.open>.dropdown-trigger i {
    filter: drop-shadow(0 0 6px rgba(23, 215, 115, .55)) !important;
}

.store-nav.open>.dropdown-trigger::after,
.quick-mega-nav.open>.dropdown-trigger::after {
    background: linear-gradient(90deg, transparent, var(--esa26c-brand), transparent) !important;
    box-shadow: 0 0 10px rgba(23, 215, 115, .65) !important;
}

/* section titles */
.store-mega .store-title,
.quick-mega .quick-mega-title {
    color: var(--esa26c-ink) !important;
    opacity: 1 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    margin: 0 0 12px !important;
}

.store-mega .store-title i,
.quick-mega .quick-mega-title i {
    color: var(--esa26c-brand) !important;
    opacity: 1 !important;
}

/* product cards — flat tinted surface */
.store-mega .store-item {
    background: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line) !important;
    color: var(--esa26c-ink-mute) !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: border-color .18s ease, transform .18s ease, background .18s ease !important;
}

.store-mega .store-item::before {
    display: none !important;
}

.store-mega .store-item:hover {
    background: var(--esa26c-surface-2) !important;
    border-color: var(--esa26c-brand) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(23, 215, 115, .12) !important;
}

.store-mega .store-item.is-primary {
    border-color: rgba(23, 215, 115, .35) !important;
    background: linear-gradient(145deg, var(--esa26c-brand-soft), var(--esa26c-surface-2)) !important;
}

/* product icon tiles */
.store-mega .si-icon {
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line) !important;
    border-radius: 9px !important;
    width: 34px !important;
    height: 34px !important;
}

.store-mega .si-icon i {
    color: var(--esa26c-brand) !important;
    font-size: 15px !important;
}

.store-mega .si-title {
    color: var(--esa26c-ink) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

.store-mega .si-desc {
    color: var(--esa26c-ink-mute) !important;
    opacity: 1 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* tags — all single brand-green pill */
.store-mega .tag,
.quick-mega .tag {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23, 215, 115, .28) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
}

html[data-theme="light"] .store-mega .tag,
html[data-theme="light"] .quick-mega .tag {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand-2) !important;
    border-color: rgba(15, 177, 95, .28) !important;
}

/* RIGHT ASIDE — "Need help?" panel: subtle green tint, no rainbow */
.store-mega .store-aside-inner {
    background: linear-gradient(160deg, var(--esa26c-brand-soft), var(--esa26c-surface-2) 70%) !important;
    border: 1px solid rgba(23, 215, 115, .28) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    overflow: hidden !important;
}

.store-mega .store-aside-inner .bubble {
    display: none !important;
}

.store-mega .aside-label {
    background: var(--esa26c-brand) !important;
    color: #04130a !important;
    padding: 4px 12px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    box-shadow: 0 6px 16px rgba(23, 215, 115, .28) !important;
}

.store-mega .aside-label::before {
    display: none !important;
}

.store-mega .store-aside-content .aside-title,
.store-mega .store-aside-content h3 {
    color: var(--esa26c-ink) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 12px 0 8px !important;
}

.store-mega .store-aside-content p {
    color: var(--esa26c-ink-mute) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 0 14px !important;
}

/* aside buttons */
.store-mega .btn-aside.primary {
    background: var(--esa26c-brand) !important;
    color: #04130a !important;
    border: 1px solid var(--esa26c-brand) !important;
    box-shadow: 0 8px 20px rgba(23, 215, 115, .28) !important;
    font-weight: 700 !important;
    padding: 9px 14px !important;
}

.store-mega .btn-aside.primary:hover {
    background: var(--esa26c-brand-2) !important;
    border-color: var(--esa26c-brand-2) !important;
    box-shadow: 0 12px 26px rgba(23, 215, 115, .38) !important;
    transform: translateY(-1px);
}

.store-mega .btn-aside.ghost {
    background: transparent !important;
    color: var(--esa26c-ink) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    padding: 9px 14px !important;
}

.store-mega .btn-aside.ghost:hover {
    background: var(--esa26c-surface) !important;
    border-color: var(--esa26c-brand) !important;
    color: var(--esa26c-brand) !important;
}

/* ORB — keep but recolour entirely to green (no cyan/yellow tints) */
.store-mega .security-orb {
    background:
        radial-gradient(circle at 45% 25%, rgba(255, 255, 255, .55), transparent 55%),
        radial-gradient(circle at 70% 85%, rgba(23, 215, 115, .55), transparent 70%),
        radial-gradient(circle, #04140b 0, #05221a 70%) !important;
    box-shadow:
        0 0 50px rgba(23, 215, 115, .35),
        0 0 110px rgba(23, 215, 115, .18),
        inset 0 0 40px rgba(255, 255, 255, .06) !important;
}

.store-mega .ring-outer {
    border-color: rgba(23, 215, 115, .55) !important;
}

.store-mega .ring-inner {
    border-color: rgba(23, 215, 115, .85) !important;
}

.store-mega .orb-scan {
    background: conic-gradient(from 0deg,
            rgba(23, 215, 115, 0) 0deg,
            rgba(23, 215, 115, .35) 28deg,
            rgba(23, 215, 115, 0) 90deg,
            transparent 360deg) !important;
}

.store-mega .orb-node {
    background: var(--esa26c-brand) !important;
    box-shadow: 0 0 14px rgba(23, 215, 115, .9) !important;
}

.store-mega .security-orb>i {
    color: #ffffff !important;
    text-shadow: 0 0 22px rgba(23, 215, 115, .9), 0 0 60px rgba(23, 215, 115, .55) !important;
}

/* light-theme aside */
html[data-theme="light"] .store-mega .store-aside-inner {
    background: linear-gradient(160deg, rgba(15, 177, 95, .10), var(--esa26c-surface-2) 70%) !important;
}

html[data-theme="light"] .store-mega .security-orb {
    background:
        radial-gradient(circle at 45% 25%, rgba(255, 255, 255, .9), transparent 55%),
        radial-gradient(circle at 70% 85%, rgba(15, 177, 95, .35), transparent 70%),
        radial-gradient(circle, #eaf6ef 0, #d6efe0 70%) !important;
    box-shadow:
        0 0 40px rgba(15, 177, 95, .25),
        0 0 80px rgba(15, 177, 95, .14),
        inset 0 0 30px rgba(255, 255, 255, .4) !important;
}

html[data-theme="light"] .store-mega .security-orb>i {
    color: var(--esa26c-brand-2) !important;
    text-shadow: 0 0 14px rgba(15, 177, 95, .55) !important;
}

/* QUICK LINKS items — same treatment as store items */
.quick-mega .quick-mega-item {
    background: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: var(--esa26c-ink) !important;
    box-shadow: none !important;
    transition: border-color .18s ease, transform .18s ease;
}

.quick-mega .quick-mega-item:hover {
    border-color: var(--esa26c-brand) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(23, 215, 115, .12) !important;
}

.quick-mega .qmi-icon {
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line) !important;
    color: var(--esa26c-brand) !important;
}

.quick-mega .qmi-icon i {
    color: var(--esa26c-brand) !important;
}

.quick-mega .qmi-text {
    color: var(--esa26c-ink) !important;
    font-weight: 700 !important;
}

/* tooltip below "Store" trigger — disable native title bubble that overlapped */
.store-nav .dropdown-trigger,
.quick-mega-nav .dropdown-trigger {
    position: relative;
}

/* navbar caret + icons → green only when active */
#navbar .dropdown-hover>a>i.caret,
#navbar .dropdown-hover>a>i.fa-chevron-down {
    color: var(--esa26c-ink-dim) !important;
    transition: color .18s ease, transform .18s ease;
}

#navbar .dropdown-hover:hover>a>i.caret,
#navbar .dropdown-hover.open>a>i.caret,
#navbar .dropdown-hover:hover>a>i.fa-chevron-down,
#navbar .dropdown-hover.open>a>i.fa-chevron-down {
    color: var(--esa26c-brand) !important;
}

/* generic primary nav item icons (Store, Quick Links, etc.) */
#navbar .navbar-primary>li>a>i:first-child {
    color: var(--esa26c-brand) !important;
    margin-right: 6px;
}

/* =====================================================
 *  INNER PAGE CHROME — breadcrumb + sidebar + SEO panel
 *  Scoped to public store / category pages.
 * ===================================================== */

/* ---------- Breadcrumb / Welcome strip ---------- */
#breadcrumb {
    background:
        radial-gradient(700px 220px at 50% -40%, rgba(23, 215, 115, .10), transparent 60%),
        var(--esa26c-bg-2) !important;
    border-top: 1px solid var(--esa26c-line) !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    padding: 14px 0 !important;
    position: relative;
}

#breadcrumb>.page-container {
    max-width: 1680px !important;
    padding: 0 48px !important;
    width: 100% !important;
}

#breadcrumb .bread-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

#breadcrumb .bread-items {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

#breadcrumb .breadcrumb-title {
    margin: 0 !important;
    color: var(--esa26c-ink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#breadcrumb .breadcrumb-title::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--esa26c-brand);
    box-shadow: 0 0 0 4px rgba(23, 215, 115, .15);
}

#breadcrumb .breadcrumb-title span {
    color: var(--esa26c-brand) !important;
    font-weight: 800 !important;
}

#breadcrumb .bread-login {
    color: var(--esa26c-ink-mute) !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#breadcrumb .bread-login a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    background: var(--esa26c-brand-soft) !important;
    border: 1px solid rgba(23, 215, 115, .25) !important;
    color: var(--esa26c-brand) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

#breadcrumb .bread-login a:hover {
    background: var(--esa26c-brand) !important;
    color: #04130a !important;
    border-color: var(--esa26c-brand) !important;
}

#breadcrumb .bread-links a {
    color: var(--esa26c-ink-mute) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 8px !important;
}

#breadcrumb .bread-links a.last-link,
#breadcrumb .bread-links a:hover {
    color: var(--esa26c-brand) !important;
}

#breadcrumb .bread-links i {
    color: var(--esa26c-ink-dim) !important;
    margin: 0 2px;
}

/* widen the main page-container on inner pages so sidebar+content breathe */
body:not(.homepage-reset):not(.page-homepage) #main-body>.page-container {
    max-width: 1680px !important;
    padding: 0 48px !important;
}

/* ---------- WHMCS sidebar cards ---------- */
.sidebar .card-sidebar {
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25) !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
}

html[data-theme="light"] .sidebar .card-sidebar {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05) !important;
}

.sidebar .card-sidebar>.card-header {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    padding: 12px 16px !important;
}

.sidebar .card-sidebar>.card-header .card-title {
    color: var(--esa26c-ink) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

.sidebar .card-sidebar>.card-header .card-title>i:first-child {
    color: var(--esa26c-brand) !important;
    font-size: 14px !important;
}

.sidebar .card-sidebar>.card-header .card-minimise {
    color: var(--esa26c-ink-dim) !important;
    margin-left: auto !important;
    transition: color .18s ease, transform .2s ease;
}

.sidebar .card-sidebar:hover>.card-header .card-minimise {
    color: var(--esa26c-brand) !important;
}

/* sidebar list rows */
.sidebar .card-sidebar .list-group-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    color: var(--esa26c-ink) !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: background .15s ease, color .15s ease, padding .15s ease;
}

.sidebar .card-sidebar .list-group-item:last-child {
    border-bottom: 0 !important;
}

.sidebar .card-sidebar .list-group-item:hover {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    padding-left: 22px !important;
}

.sidebar .card-sidebar .list-group-item.active {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    font-weight: 700 !important;
}

.sidebar .card-sidebar .list-group-item i {
    color: var(--esa26c-brand) !important;
    margin-right: 6px;
}

/* fix legacy plus icons in sidebar accordion (e.g. "Actions", "Choose Currency") */
.sidebar .card-sidebar>.card-header .card-title>i.fa-plus,
.sidebar .card-sidebar>.card-header .card-title>i.fas.fa-plus,
.sidebar .card-sidebar>.card-header .card-title>i.fal.fa-plus {
    color: var(--esa26c-brand) !important;
}

/* ---------- SEO order panel (.esa-order-seo) ---------- */
.esa-order-seo__panel {
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .30) !important;
}

html[data-theme="light"] .esa-order-seo__panel {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05) !important;
}

.esa-order-seo__eyebrow {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23, 215, 115, .25) !important;
    text-shadow: none !important;
}

.esa-order-seo__title {
    color: var(--esa26c-ink) !important;
}

.esa-order-seo__lead {
    color: var(--esa26c-ink) !important;
}

.esa-order-seo__body {
    color: var(--esa26c-ink-mute) !important;
}

.esa-order-seo__side {
    background: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line) !important;
}

.esa-order-seo__side h3 {
    color: var(--esa26c-ink) !important;
}

.esa-order-seo__stat {
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line) !important;
    color: var(--esa26c-ink-mute) !important;
}

.esa-order-seo__stat strong {
    color: var(--esa26c-ink) !important;
}

/* CTA buttons in seo panel — green palette */
.esa-order-seo__actions .is-primary {
    background: var(--esa26c-brand) !important;
    color: #04130a !important;
    box-shadow: 0 8px 22px rgba(23, 215, 115, .28) !important;
    border: 1px solid var(--esa26c-brand) !important;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.esa-order-seo__actions .is-primary:hover {
    background: var(--esa26c-brand-2) !important;
    border-color: var(--esa26c-brand-2) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(23, 215, 115, .38) !important;
}

.esa-order-seo__actions .is-secondary {
    background: transparent !important;
    color: var(--esa26c-ink) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    transition: border-color .18s ease, color .18s ease, background .18s ease !important;
}

.esa-order-seo__actions .is-secondary:hover {
    border-color: var(--esa26c-brand) !important;
    color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
}

/* FAQ block */
.esa-order-seo__faq {
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line) !important;
    border-radius: 16px !important;
}

.esa-order-seo__faq h2 {
    color: var(--esa26c-ink) !important;
}

.esa-order-seo__faq details {
    border-top-color: var(--esa26c-line) !important;
}

.esa-order-seo__faq summary {
    color: var(--esa26c-ink) !important;
}

.esa-order-seo__faq p {
    color: var(--esa26c-ink-mute) !important;
}

/* allow sidebar to be slimmer so primary content gets more room */
@media (min-width: 1200px) {
    body:not(.is-homepage) #main-body>.page-container>.row>.col-lg-4.col-xl-3 {
        flex: 0 0 240px !important;
        max-width: 240px !important;
    }

    body:not(.is-homepage) #main-body>.page-container>.row>.col-lg-8.col-xl-9.primary-content {
        flex: 0 0 calc(100% - 240px) !important;
        max-width: calc(100% - 240px) !important;
    }
}

/* =====================================================
 *  R8 → R9 POLISH PASS — top-bar pills, sign-in/register,
 *  Quick Links mega rebuild, navbar dropdowns, ANPC &
 *  payment chips legibility, user-dropdown actions.
 * ===================================================== */

/* ---------- top-bar 3 icons unified glass module ---------- */
#header-top {
    background:
        linear-gradient(180deg, rgba(23, 215, 115, .025), transparent 60%),
        var(--esa26c-bg) !important;
}

#header-top .header-top-right {
    align-items: center !important;
    gap: 0 !important;
    background: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html[data-theme="light"] #header-top .header-top-right {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .08) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04) !important;
}

#header-top .header-top-right>* {
    margin: 0 !important;
}

#header-top .header-top-right>*+* {
    border-left: 1px solid var(--esa26c-line) !important;
}

html[data-theme="light"] #header-top .header-top-right>*+* {
    border-left-color: rgba(15, 23, 42, .07) !important;
}

/* unify the inner pills inside that module */
#header-top .theme-toggle,
#header-top .header-top-notify .notifyButton,
#header-top .header-top-cart .cartButton {
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    color: var(--esa26c-ink) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color .18s ease, background .18s ease;
}

#header-top .theme-toggle:hover,
#header-top .header-top-notify .notifyButton:hover,
#header-top .header-top-cart .cartButton:hover {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 0 !important;
}

#header-top .header-top-notify .notifyButton i,
#header-top .header-top-cart .cartButton i,
#header-top .theme-toggle i {
    font-size: 14px !important;
    color: var(--esa26c-brand) !important;
}

#header-top .header-top-cart {
    position: relative !important;
}

#header-top .header-top-cart .badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    background: var(--esa26c-brand) !important;
    color: #04130a !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    border: 2px solid var(--esa26c-bg) !important;
    box-shadow: 0 0 0 1px rgba(23, 215, 115, .45) !important;
}

html[data-theme="light"] #header-top .header-top-cart .badge {
    border-color: #ffffff !important;
}

/* email support — give it a soft icon chip */
#header-top a.supportEmail,
#header-top .supportEmail {
    color: var(--esa26c-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#header-top a.supportEmail i,
#header-top .supportEmail i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    font-size: 12px !important;
}

/* ---------- Sign in / Create Account — premium redesign ---------- */
a.client-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--esa26c-ink) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color .18s ease;
}

a.client-button:hover {
    color: var(--esa26c-brand) !important;
}

a.client-button>i {
    color: var(--esa26c-brand) !important;
    transition: transform .2s ease;
}

a.client-button:hover>i {
    transform: translateX(2px);
}

a.client-register {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--esa26c-brand) 0%, var(--esa26c-brand-2) 100%) !important;
    color: #04130a !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow:
        0 10px 26px rgba(23, 215, 115, .35),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -1px 0 rgba(0, 0, 0, .12) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

a.client-register::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #04130a;
    box-shadow: 0 0 0 3px rgba(4, 19, 10, .12);
}

a.client-register:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 34px rgba(23, 215, 115, .45),
        inset 0 1px 0 rgba(255, 255, 255, .4),
        inset 0 -1px 0 rgba(0, 0, 0, .15) !important;
    filter: brightness(1.04);
    color: #04130a !important;
}

/* ---------- User dropdown bottom action chips ---------- */
#user-dropdown .user-actions {
    background: var(--esa26c-surface-2) !important;
    border-top: 1px solid var(--esa26c-line) !important;
    padding: 12px !important;
    display: flex !important;
    gap: 8px !important;
}

html[data-theme="light"] #user-dropdown .user-actions {
    background: #f7f9fc !important;
}

#user-dropdown .user-actions>a {
    flex: 1 1 0 !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    border-radius: 10px !important;
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    color: var(--esa26c-ink) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

html[data-theme="light"] #user-dropdown .user-actions>a {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .08) !important;
}

#user-dropdown .user-actions>a::after {
    content: attr(title);
    font-size: 10.5px;
    color: var(--esa26c-ink-mute);
    font-weight: 600;
    margin-left: 4px;
}

#user-dropdown .user-actions>a ion-icon {
    font-size: 18px !important;
    color: var(--esa26c-brand) !important;
}

#user-dropdown .user-actions>a:hover {
    border-color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    transform: translateY(-1px);
}

#user-dropdown .user-actions>a:hover::after {
    color: var(--esa26c-brand) !important;
}

#user-dropdown .user-actions>a .action-tip {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: var(--esa26c-brand) !important;
    color: #04130a !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    border: 2px solid var(--esa26c-surface-2) !important;
}

html[data-theme="light"] #user-dropdown .user-actions>a .action-tip {
    border-color: #f7f9fc !important;
}

/* ---------- Payment chips — make ALL logos clearly visible ---------- */
/* Override the previous dark-friendly desaturation that was hiding white logos */
#payments-methods .payment-chip {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, .25),
        inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
    width: 80px !important;
    height: 48px !important;
}

#payments-methods .payment-chip>img {
    filter: none !important;
    opacity: 1 !important;
    max-width: 60px !important;
    max-height: 30px !important;
}

#payments-methods .payment-chip:hover {
    transform: translateY(-2px);
    border-color: var(--esa26c-brand) !important;
    box-shadow:
        0 8px 18px rgba(23, 215, 115, .25),
        inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
}

#payments-methods .payment-chip:hover>img {
    filter: none !important;
}

/* ---------- ANPC badges — legal readability, white tile both themes ---------- */
#footer-advanced .footer-pro-badge {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    padding: 10px 14px !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, .25),
        inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
}

#footer-advanced .footer-pro-badge img {
    filter: none !important;
    opacity: 1 !important;
    max-height: 34px !important;
}

#footer-advanced .footer-pro-badge:hover {
    transform: translateY(-2px);
    border-color: var(--esa26c-brand) !important;
    box-shadow:
        0 8px 18px rgba(23, 215, 115, .25),
        inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
}

#footer-advanced .footer-pro-badge:hover img {
    filter: none !important;
}

html[data-theme="light"] #footer-advanced .footer-pro-badge {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
}

/* ---------- Quick Links mega — complete rebuild ---------- */
.quick-mega-nav .dropdown-panel.quick-mega {
    min-width: 720px !important;
    max-width: 760px !important;
    padding: 22px !important;
    background:
        radial-gradient(600px 240px at 0% 0%, rgba(23, 215, 115, .10), transparent 60%),
        var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .50) !important;
}

html[data-theme="light"] .quick-mega-nav .dropdown-panel.quick-mega {
    background:
        radial-gradient(600px 240px at 0% 0%, rgba(23, 215, 115, .07), transparent 60%),
        #ffffff !important;
    box-shadow: 0 28px 60px rgba(15, 23, 42, .12) !important;
}

.quick-mega .quick-mega-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
}

.quick-mega .quick-mega-section {
    background: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

html[data-theme="light"] .quick-mega .quick-mega-section {
    background: #f7f9fc !important;
    border-color: rgba(15, 23, 42, .06) !important;
}

.quick-mega .quick-mega-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--esa26c-ink) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
    padding: 4px 6px 10px !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    margin-bottom: 4px !important;
}

.quick-mega .quick-mega-title i {
    color: var(--esa26c-brand) !important;
    font-size: 13px !important;
}

.quick-mega .quick-mega-item {
    display: grid !important;
    grid-template-columns: 38px 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--esa26c-ink) !important;
    text-decoration: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    position: relative;
}

.quick-mega .quick-mega-item:hover {
    background: var(--esa26c-surface) !important;
    border-color: var(--esa26c-line-2) !important;
    transform: translateX(2px);
}

html[data-theme="light"] .quick-mega .quick-mega-item:hover {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .08) !important;
}

.quick-mega .qmi-icon {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--esa26c-brand-soft) !important;
    border: 1px solid rgba(23, 215, 115, .22) !important;
    border-radius: 10px !important;
    transition: background .18s ease, color .18s ease;
}

.quick-mega .qmi-icon i {
    color: var(--esa26c-brand) !important;
    font-size: 15px !important;
}

.quick-mega .quick-mega-item:hover .qmi-icon {
    background: var(--esa26c-brand) !important;
    border-color: var(--esa26c-brand) !important;
}

.quick-mega .quick-mega-item:hover .qmi-icon i {
    color: #04130a !important;
}

.quick-mega .qmi-text {
    color: var(--esa26c-ink) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: .005em !important;
}

.quick-mega .tag {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    color: var(--esa26c-ink-mute) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
}

html[data-theme="light"] .quick-mega .tag {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .08) !important;
}

.quick-mega .tag.panel {
    color: var(--esa26c-brand) !important;
    border-color: rgba(23, 215, 115, .35) !important;
    background: var(--esa26c-brand-soft) !important;
}

.quick-mega .tag.discord {
    color: #8b9bff !important;
    border-color: rgba(139, 155, 255, .35) !important;
    background: rgba(139, 155, 255, .10) !important;
}

.quick-mega .tag.docs,
.quick-mega .tag.l7 {
    color: var(--esa26c-ink) !important;
}

/* trigger pill on the nav */
.quick-mega-nav>.dropdown-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.quick-mega-nav>.dropdown-trigger>i:first-child {
    color: var(--esa26c-brand) !important;
}

.quick-mega-nav.open>.dropdown-trigger {
    color: var(--esa26c-brand) !important;
}

/* ---------- Navbar standard dropdown polish ---------- */
#dropdown-menu,
#navbar .dropdown-panel {
    background:
        radial-gradient(600px 220px at 0% 0%, rgba(23, 215, 115, .07), transparent 60%),
        var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .50) !important;
    padding: 14px !important;
}

html[data-theme="light"] #dropdown-menu,
html[data-theme="light"] #navbar .dropdown-panel {
    background:
        radial-gradient(600px 220px at 0% 0%, rgba(23, 215, 115, .05), transparent 60%),
        #ffffff !important;
    box-shadow: 0 28px 60px rgba(15, 23, 42, .12) !important;
}

#dropdown-menu .dropdown-row {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: var(--esa26c-ink) !important;
    transition: background .18s ease, transform .18s ease;
}

#dropdown-menu .dropdown-row:hover {
    background: var(--esa26c-brand-soft) !important;
    transform: translateX(2px);
}

#dropdown-menu .dropdown-row .icon {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--esa26c-brand-soft) !important;
    border: 1px solid rgba(23, 215, 115, .22) !important;
    border-radius: 10px !important;
    color: var(--esa26c-brand) !important;
}

#dropdown-menu .dropdown-row:hover .icon {
    background: var(--esa26c-brand) !important;
    border-color: var(--esa26c-brand) !important;
    color: #04130a !important;
}

#dropdown-menu .dropdown-row .icon i {
    font-size: 16px !important;
    color: inherit !important;
}

#dropdown-menu .dropdown-heading {
    color: var(--esa26c-ink) !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    display: block !important;
}

#dropdown-menu .dropdown-row p {
    color: var(--esa26c-ink-mute) !important;
    font-size: 11.5px !important;
    margin: 2px 0 0 !important;
    font-weight: 500 !important;
}

/* Responsive: quick mega stacks on narrow screens */
@media (max-width: 900px) {
    .quick-mega-nav .dropdown-panel.quick-mega {
        min-width: auto !important;
        max-width: 95vw !important;
    }

    .quick-mega .quick-mega-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    #header-top .header-top-right {
        padding: 3px !important;
    }

    #header-top .theme-toggle,
    #header-top .header-top-notify .notifyButton,
    #header-top .header-top-cart .cartButton {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
}

/* =====================================================
 *  R9 → R10 — Notifications popover, navbar redesign,
 *  user dropdown rebuild, softer payment/ANPC tiles.
 * ===================================================== */

/* ---------- Notifications popover (Bootstrap) ---------- */
.popover{
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 16px !important;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .55) !important;
    color: var(--esa26c-ink) !important;
    padding: 6px !important;
    max-width: 380px !important;
    font-family: inherit !important;
}
html[data-theme="light"] .popover{
    background: #ffffff !important;
    box-shadow: 0 28px 60px rgba(15, 23, 42, .14) !important;
    border-color: rgba(15, 23, 42, .08) !important;
}
.popover .arrow::before,
.popover .arrow::after,
.bs-popover-bottom > .arrow::before,
.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^=bottom] > .arrow::before,
.bs-popover-auto[x-placement^=bottom] > .arrow::after{
    border-bottom-color: var(--esa26c-surface) !important;
}
html[data-theme="light"] .bs-popover-bottom > .arrow::before,
html[data-theme="light"] .bs-popover-bottom > .arrow::after{
    border-bottom-color: #ffffff !important;
}
.popover-header{
    background: transparent !important;
    border: 0 !important;
    color: var(--esa26c-brand) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    padding: 12px 14px 4px !important;
}
.popover-body{
    color: var(--esa26c-ink) !important;
    padding: 6px !important;
    font-size: 13px !important;
}
.popover-body p{ margin: 0 !important; }
.popover-body a{
    color: var(--esa26c-ink) !important;
    text-decoration: none !important;
    display: block !important;
}
/* convert each notification line into a row card */
.popover-body ul,
.popover-body ol{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.popover-body li,
.popover-body .notification-item{
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line) !important;
    margin-bottom: 6px !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
    color: var(--esa26c-ink) !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}
html[data-theme="light"] .popover-body li,
html[data-theme="light"] .popover-body .notification-item{
    background: #f7f9fc !important;
    border-color: rgba(15, 23, 42, .06) !important;
}
.popover-body li:hover,
.popover-body .notification-item:hover{
    border-color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
    transform: translateX(2px);
}
.popover-body li::marker{ content: "" !important; }
.popover-body li > i,
.popover-body li::before,
.popover-body .notification-item > i{
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23, 215, 115, .22) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}
.popover-body li::before{
    content: "\f0f3" !important; /* bell */
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}
.popover-body li.notif-warning::before,
.popover-body li[class*="warn"]::before{
    content: "\f071" !important;
    background: rgba(255, 184, 0, .14) !important;
    color: #ffb800 !important;
    border-color: rgba(255, 184, 0, .25) !important;
}
.popover-body li.notif-success::before,
.popover-body li[class*="success"]::before{
    content: "\f00c" !important;
}

/* ---------- Payments + ANPC tiles — softer, less harsh ---------- */
/* In DARK theme use a muted slate-200 tile so logos read without searing white.
   In LIGHT theme keep pure white. */
#payments-methods .payment-chip{
    background: linear-gradient(180deg, #e6eaf2 0%, #cfd6e2 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -1px 0 rgba(15, 23, 42, .08) !important;
}
#payments-methods .payment-chip > img{
    filter: none !important;
    opacity: .95 !important;
    mix-blend-mode: multiply !important;
}
#payments-methods .payment-chip:hover{
    border-color: var(--esa26c-brand) !important;
    box-shadow:
        0 10px 22px rgba(23, 215, 115, .30),
        inset 0 1px 0 rgba(255, 255, 255, .65),
        inset 0 -1px 0 rgba(15, 23, 42, .08) !important;
}
#payments-methods .payment-chip:hover > img{ opacity: 1 !important; }
html[data-theme="light"] #payments-methods .payment-chip{
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .08) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05) !important;
}
html[data-theme="light"] #payments-methods .payment-chip > img{ mix-blend-mode: normal !important; }

#footer-advanced .footer-pro-badge{
    background: linear-gradient(180deg, #e6eaf2 0%, #cfd6e2 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -1px 0 rgba(15, 23, 42, .08) !important;
}
#footer-advanced .footer-pro-badge img{
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: multiply !important;
}
#footer-advanced .footer-pro-badge:hover{
    border-color: var(--esa26c-brand) !important;
    box-shadow:
        0 10px 22px rgba(23, 215, 115, .30),
        inset 0 1px 0 rgba(255, 255, 255, .65),
        inset 0 -1px 0 rgba(15, 23, 42, .08) !important;
}
html[data-theme="light"] #footer-advanced .footer-pro-badge{
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05) !important;
}
html[data-theme="light"] #footer-advanced .footer-pro-badge img{ mix-blend-mode: normal !important; }

/* ---------- Primary navbar — animated underline + chip hover ---------- */
#navbar > ul > li,
#header-navbar nav > ul > li,
#header-navbar .nav-menu > li{
    position: relative;
}
#navbar > ul > li > a,
#header-navbar .nav-menu > li > a,
#header-navbar nav > ul > li > a{
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: .005em !important;
    color: var(--esa26c-ink) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: color .18s ease, background .18s ease;
}
#navbar > ul > li > a > i:first-child,
#header-navbar .nav-menu > li > a > i:first-child{
    color: var(--esa26c-brand) !important;
    font-size: 14px !important;
    transition: transform .2s ease;
}
#navbar > ul > li > a::after,
#header-navbar .nav-menu > li > a::after{
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--esa26c-brand);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}
#navbar > ul > li:hover > a,
#navbar > ul > li.active > a,
#navbar > ul > li.open > a,
#header-navbar .nav-menu > li:hover > a,
#header-navbar .nav-menu > li.active > a{
    color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
}
#navbar > ul > li:hover > a::after,
#navbar > ul > li.active > a::after,
#navbar > ul > li.open > a::after,
#header-navbar .nav-menu > li:hover > a::after,
#header-navbar .nav-menu > li.active > a::after{
    transform: scaleX(1);
}
#navbar > ul > li:hover > a > i:first-child{
    transform: translateY(-1px) scale(1.08);
}
/* caret arrows on parents */
#navbar > ul > li > a > .caret,
#navbar > ul > li > a > i.fa-chevron-down,
#header-navbar .nav-menu > li > a > i.fa-chevron-down{
    font-size: 10px !important;
    margin-left: 2px;
    transition: transform .25s ease;
    color: var(--esa26c-ink-mute) !important;
}
#navbar > ul > li:hover > a > .caret,
#navbar > ul > li:hover > a > i.fa-chevron-down,
#navbar > ul > li.open > a > .caret,
#header-navbar .nav-menu > li:hover > a > i.fa-chevron-down{
    transform: rotate(180deg);
    color: var(--esa26c-brand) !important;
}

/* navbar background glow */
#header-navbar{
    background:
        radial-gradient(1200px 220px at 50% -10%, rgba(23, 215, 115, .06), transparent 70%),
        var(--esa26c-surface) !important;
}

/* ---------- User dropdown (when logged in) — full dark rebuild ---------- */
.client-userbarbtn{
    background: linear-gradient(135deg, var(--esa26c-brand) 0%, var(--esa26c-brand-2) 100%) !important;
    color: #04130a !important;
    border-radius: 999px !important;
    padding: 9px 18px 9px 20px !important;
    border: 0 !important;
    box-shadow:
        0 10px 26px rgba(23, 215, 115, .35),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -1px 0 rgba(0, 0, 0, .12) !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.client-userbarbtn:hover{
    transform: translateY(-1px);
    filter: brightness(1.04);
}
.client-userbarbtn .client-name-name span{
    color: #04130a !important;
    font-weight: 800 !important;
    letter-spacing: .005em !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}
.client-userbarbtn > i{
    color: #04130a !important;
    font-size: 22px !important;
}
.client-userbarbtn .new-notification{
    position: absolute !important;
    top: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--esa26c-bg) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid var(--esa26c-brand) !important;
    padding: 2px 9px !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    letter-spacing: .12em !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .4) !important;
}

#user-dropdown{
    background:
        radial-gradient(600px 240px at 0% 0%, rgba(23, 215, 115, .08), transparent 60%),
        var(--esa26c-surface) !important;
    color: var(--esa26c-ink) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .55) !important;
    padding: 0 !important;
    min-width: 340px !important;
    overflow: hidden !important;
}
html[data-theme="light"] #user-dropdown{
    background:
        radial-gradient(600px 240px at 0% 0%, rgba(23, 215, 115, .06), transparent 60%),
        #ffffff !important;
    box-shadow: 0 28px 60px rgba(15, 23, 42, .14) !important;
}

/* header block */
#user-dropdown .user-infos > .user-details{
    padding: 18px 20px 16px !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    margin-bottom: 0 !important;
}
#user-dropdown .user__heading{
    color: var(--esa26c-ink) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}
#user-dropdown .user__name > span{
    color: var(--esa26c-ink-mute) !important;
    font-size: 12px !important;
    letter-spacing: .04em !important;
    font-weight: 600 !important;
}
#user-dropdown .user__services{
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23, 215, 115, .22) !important;
    border-radius: 12px !important;
    width: 78px !important;
    height: 58px !important;
}
#user-dropdown .user__services > i{
    color: var(--esa26c-brand) !important;
    opacity: .25 !important;
}
#user-dropdown .user__services > .value{
    color: var(--esa26c-brand) !important;
    font-weight: 900 !important;
}
#user-dropdown .user__services > .text{
    color: var(--esa26c-brand) !important;
    font-weight: 700 !important;
}

/* link rows */
#user-dropdown .user-links{
    padding: 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
#user-dropdown .user-links > a{
    display: grid !important;
    grid-template-columns: 22px 1fr 14px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    color: var(--esa26c-ink) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    background: transparent !important;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
#user-dropdown .user-links > a > i:first-child{
    color: var(--esa26c-brand) !important;
    font-size: 16px !important;
}
#user-dropdown .user-links > a .follow-icon{
    color: var(--esa26c-ink-dim) !important;
    font-size: 16px !important;
    transition: transform .18s ease, color .18s ease;
}
#user-dropdown .user-links > a:hover{
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    transform: translateX(2px);
}
#user-dropdown .user-links > a:hover .follow-icon{
    color: var(--esa26c-brand) !important;
    transform: translateX(3px);
}

/* dropdown caret arrow on the trigger itself */
.client-userbarbtn > i.ri-arrow-drop-down-line{
    transition: transform .22s ease;
}
.client-userbarbtn[aria-expanded="true"] > i.ri-arrow-drop-down-line,
.client-userbarbtn.active > i.ri-arrow-drop-down-line{
    transform: rotate(180deg);
}

/* =====================================================
 *  R10 → R11 — DARK payment + ANPC tiles, fix user
 *  dropdown positioning, admin return tab restyle.
 * ===================================================== */

/* ---------- Payment chips — dark slate tile in dark theme ---------- */
#payments-methods .payment-chip{
    background: linear-gradient(180deg, var(--esa26c-surface-2) 0%, #0a1120 100%) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    width: 86px !important;
    height: 48px !important;
}
#payments-methods .payment-chip > img{
    filter: brightness(0) invert(1) !important;
    opacity: .82 !important;
    mix-blend-mode: normal !important;
    max-width: 56px !important;
    max-height: 28px !important;
    transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
#payments-methods .payment-chip:hover{
    transform: translateY(-2px);
    border-color: var(--esa26c-brand) !important;
    box-shadow:
        0 12px 24px rgba(23, 215, 115, .25),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
#payments-methods .payment-chip:hover > img{
    opacity: 1 !important;
}
/* LIGHT theme: keep clean white tile, original logos */
html[data-theme="light"] #payments-methods .payment-chip{
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .08) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05) !important;
}
html[data-theme="light"] #payments-methods .payment-chip > img{
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* ---------- ANPC tiles — dark surface, brand-edge logos ---------- */
#footer-advanced .footer-pro-badge{
    background: linear-gradient(180deg, var(--esa26c-surface-2) 0%, #0a1120 100%) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    padding: 12px 14px !important;
    min-height: 60px !important;
}
#footer-advanced .footer-pro-badge img{
    filter: brightness(0) invert(1) !important;
    opacity: .82 !important;
    mix-blend-mode: normal !important;
    max-height: 30px !important;
    transition: opacity .2s ease, filter .2s ease;
}
#footer-advanced .footer-pro-badge:hover{
    border-color: var(--esa26c-brand) !important;
    transform: translateY(-2px);
    box-shadow:
        0 12px 24px rgba(23, 215, 115, .25),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
#footer-advanced .footer-pro-badge:hover img{
    opacity: 1 !important;
}
html[data-theme="light"] #footer-advanced .footer-pro-badge{
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05) !important;
}
html[data-theme="light"] #footer-advanced .footer-pro-badge img{
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* ---------- Fix user dropdown positioning (drops downward, right-aligned) ---------- */
.client-userbarbtn{
    position: relative !important;
}
#user-dropdown{
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 0 !important;
    transform: translateY(-6px) !important;
    transform-origin: top right !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s !important;
}
#user-dropdown.active{
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* ---------- Return to admin area floating tab ---------- */
#impersonate-bar,
.impersonate-bar,
#return-to-adminarea,
.return-to-adminarea,
a[href*="adminarea"][class*="return"],
a[title*="admin area" i]{
    background: var(--esa26c-surface) !important;
    color: var(--esa26c-ink) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-right: 0 !important;
    border-radius: 12px 0 0 12px !important;
    padding: 14px 12px !important;
    box-shadow: -4px 0 16px rgba(0, 0, 0, .35) !important;
    font-weight: 700 !important;
    transition: color .18s ease, border-color .18s ease;
}
#impersonate-bar:hover,
.impersonate-bar:hover,
#return-to-adminarea:hover,
.return-to-adminarea:hover,
a[href*="adminarea"][class*="return"]:hover{
    color: var(--esa26c-brand) !important;
    border-color: var(--esa26c-brand) !important;
}

/* =====================================================
 *  R11 → R12 — Tile balance: muted neutral (slate-300)
 *  so logos stay readable but tiles don't burn dark UI.
 * ===================================================== */
#payments-methods .payment-chip{
    background: #cbd5e1 !important;              /* slate-300 */
    border: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .25),
        inset 0 -1px 0 rgba(15, 23, 42, .12) !important;
}
#payments-methods .payment-chip > img{
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: multiply !important;
}
#payments-methods .payment-chip:hover{
    background: #e2e8f0 !important;              /* slate-200 on hover */
    border-color: var(--esa26c-brand) !important;
    box-shadow:
        0 12px 24px rgba(23, 215, 115, .30),
        inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
html[data-theme="light"] #payments-methods .payment-chip{
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .08) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05) !important;
}
html[data-theme="light"] #payments-methods .payment-chip > img{
    mix-blend-mode: normal !important;
}

#footer-advanced .footer-pro-badge{
    background: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .25),
        inset 0 -1px 0 rgba(15, 23, 42, .12) !important;
}
#footer-advanced .footer-pro-badge img{
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: multiply !important;
    max-height: 32px !important;
}
#footer-advanced .footer-pro-badge:hover{
    background: #e2e8f0 !important;
    border-color: var(--esa26c-brand) !important;
    box-shadow:
        0 12px 24px rgba(23, 215, 115, .30),
        inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
html[data-theme="light"] #footer-advanced .footer-pro-badge{
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05) !important;
}
html[data-theme="light"] #footer-advanced .footer-pro-badge img{
    mix-blend-mode: normal !important;
}

/* =====================================================
 *  R12 → R13 — Fix user-actions hover text disappearing
 *  (Bootstrap tooltip strips `title`, moves to data-original-title)
 * ===================================================== */
#user-dropdown .user-actions > a{
    /* disable native browser tooltip behavior reliance */
}
#user-dropdown .user-actions > a::after{
    /* template provides both title + data-original-title with the same value;
       use only one source so the label is never duplicated */
    content: attr(data-original-title) !important;
}
/* also kill the Bootstrap floating tooltip on these (we already show the label inline) */
.tooltip[role="tooltip"]:has(~ *),
.tooltip.show:where([id*="tooltip"]){
    /* keep tooltip enabled but invisible only for user-actions */
}
/* Safer: disable tooltip plugin only for our action chips by hiding the popup if it was triggered by them */
body > .tooltip{ /* generic — too aggressive, skip; instead just ensure label is always present */ }

/* =====================================================
 *  R13 → R14 — Welcome bar logged-in pill, notifications
 *  list real markup, order form card polish.
 * ===================================================== */

/* ---------- Logged-in: Shopping Cart pill in welcome strip ---------- */
#breadcrumb .bread-links{
    margin-left: auto !important;
    gap: 8px !important;
}
#breadcrumb .bread-links a,
#breadcrumb .bread-links a.last-link{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: var(--esa26c-brand-soft) !important;
    border: 1px solid rgba(23, 215, 115, .25) !important;
    color: var(--esa26c-brand) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
#breadcrumb .bread-links a:hover,
#breadcrumb .bread-links a.last-link:hover{
    background: var(--esa26c-brand) !important;
    color: #04130a !important;
    border-color: var(--esa26c-brand) !important;
}
#breadcrumb .bread-links a::before{
    content: "\f07a"; /* cart */
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900;
    font-size: 11px;
    margin-right: 2px;
}

/* "Welcome back" gets a small green dot too (works with the existing ::before from r8) */
#breadcrumb .breadcrumb-title{ white-space: nowrap; }

/* ---------- Notifications: real `.client-alerts` structure ---------- */
.popover .client-alerts{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.popover .client-alerts > li{
    margin-bottom: 6px !important;
    background: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
html[data-theme="light"] .popover .client-alerts > li{
    background: #f7f9fc !important;
    border-color: rgba(15, 23, 42, .06) !important;
}
.popover .client-alerts > li:hover{
    border-color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
    transform: translateX(2px);
}
.popover .client-alerts > li::before{ display: none !important; }
.popover .client-alerts > li > a{
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    color: var(--esa26c-ink) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}
.popover .client-alerts > li:hover > a{ color: var(--esa26c-brand) !important; }
.popover .client-alerts > li i{
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23, 215, 115, .22) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    margin: 0 !important;
}
.popover .client-alerts > li .message{
    color: inherit !important;
    font-weight: 600 !important;
}

/* ---------- Order form card polish (game_cart-products) ---------- */
.game_cart-products .game_hosting-card,
.game_cart-products [class*="card"],
.product-card,
.esa-gh-card{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.game_cart-products .game_hosting-card:hover,
.product-card:hover,
.esa-gh-card:hover{
    transform: translateY(-3px);
    border-color: var(--esa26c-brand) !important;
    box-shadow: 0 18px 40px rgba(23, 215, 115, .18) !important;
}

/* "ORDER NOW" buttons on cards — keep brand gradient */
.game_cart-products a[href*="order"],
.game_cart-products button[type="submit"],
.product-card a[href*="order"],
a.esa-order-btn,
.btn-order-now{
    background: linear-gradient(135deg, var(--esa26c-brand) 0%, var(--esa26c-brand-2) 100%) !important;
    color: #04130a !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(23, 215, 115, .28) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.game_cart-products a[href*="order"]:hover,
.game_cart-products button[type="submit"]:hover,
a.esa-order-btn:hover,
.btn-order-now:hover{
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 12px 28px rgba(23, 215, 115, .38) !important;
}

/* =====================================================
 *  R14 → R15 — FINAL fix: payment tiles dark/monochrome,
 *  ANPC legal-styled, notifications popover sized right,
 *  header subtle polish.
 * ===================================================== */

/* ---------- Payment chips: dark glass + monochrome white logos ---------- */
/* Drops the ugly bright-white slate tiles for a premium dark glass look.
   Logos are converted to white silhouettes that integrate with the footer. */
#payments-methods .payment-chip,
#payments-methods .payment-chip{
    background: linear-gradient(180deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,.02) 100%) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 6px 18px rgba(0,0,0,.28) !important;
    border-radius: 12px !important;
    transition: border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}
#payments-methods .payment-chip > img{
    filter: brightness(0) invert(1) !important;
    mix-blend-mode: normal !important;
    opacity: .55 !important;
    transition: opacity .2s ease, filter .2s ease !important;
    max-height: 22px !important;
    width: auto !important;
}
#payments-methods .payment-chip:hover{
    border-color: rgba(23,215,115,.45) !important;
    background: linear-gradient(180deg,
        rgba(23,215,115,.10) 0%,
        rgba(23,215,115,.04) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.06) inset,
        0 12px 26px rgba(23,215,115,.18) !important;
}
#payments-methods .payment-chip:hover > img{
    opacity: 1 !important;
    /* tint to brand green on hover */
    filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(95deg) brightness(1.1) !important;
}

/* LIGHT theme: clean white tile, natural colored logos */
html[data-theme="light"] #payments-methods .payment-chip{
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .08) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 4px 12px rgba(15, 23, 42, .06) !important;
}
html[data-theme="light"] #payments-methods .payment-chip > img{
    filter: none !important;
    opacity: 1 !important;
}
html[data-theme="light"] #payments-methods .payment-chip:hover{
    border-color: rgba(23,215,115,.55) !important;
    background: #ffffff !important;
}
html[data-theme="light"] #payments-methods .payment-chip:hover > img{
    filter: none !important;
}

/* ---------- ANPC / SAL badges: white legal tile, eyebrow label ---------- */
/* These ARE legal compliance badges — they must stay recognizable on white,
   exactly as regulators publish them. We frame them clearly as "OFFICIAL". */
#footer-advanced .footer-pro-badges{
    position: relative;
}
#footer-advanced .footer-pro-badges::before{
    content: "OFFICIAL LEGAL NOTICES";
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--esa26c-ink-dim);
    margin: 0 0 10px 2px;
    text-transform: uppercase;
}
#footer-advanced .footer-pro-badge{
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 6px 14px rgba(0,0,0,.22) !important;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
#footer-advanced .footer-pro-badge::after{
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--esa26c-brand);
    box-shadow: 0 0 0 2px rgba(23,215,115,.25);
}
#footer-advanced .footer-pro-badge img{
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    max-height: 30px !important;
    width: auto !important;
    display: block !important;
}
#footer-advanced .footer-pro-badge:hover{
    transform: translateY(-2px) !important;
    border-color: rgba(23,215,115,.5) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 12px 24px rgba(23,215,115,.18) !important;
}
#footer-advanced .footer-pro-badge:hover img{ filter: none !important; }

/* Light theme — same white tile, slightly different shadow */
html[data-theme="light"] #footer-advanced .footer-pro-badges::before{
    color: rgba(15, 23, 42, .55);
}
html[data-theme="light"] #footer-advanced .footer-pro-badge{
    background: #ffffff !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 4px 12px rgba(15, 23, 42, .08) !important;
}
html[data-theme="light"] #footer-advanced .footer-pro-badge img{
    filter: none !important;
    opacity: 1 !important;
}

/* ---------- Notifications popover: fixed sizing, hide source ---------- */
/* The source list (hidden div #accountNotificationsContent) was leaking out
   in some cases. Force it hidden. The Bootstrap popover clones it. */
#accountNotificationsContent{
    display: none !important;
}

/* Force popover to a proper width so the grid rows render horizontally. */
.popover{
    min-width: 340px !important;
    width: 360px !important;
    max-width: 380px !important;
}
.popover-body{
    width: auto !important;
    min-width: 0 !important;
}
/* belt-and-suspenders: any <ul> inside popover must be a vertical stack */
.popover-body > ul,
.popover .client-alerts{
    display: block !important;
    width: 100% !important;
}
.popover-body > ul > li,
.popover .client-alerts > li{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.popover .client-alerts > li > a{
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
}
.popover .client-alerts > li > a > .message,
.popover .client-alerts > li > a > div{
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    white-space: normal !important;
}

/* ---------- Header polish: subtle bottom glow + active hint ---------- */
#header-main{
    position: relative;
}
#header-main::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: min(960px, 70%);
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(23,215,115,.35),
        transparent);
    pointer-events: none;
}
html[data-theme="light"] #header-main::after{
    background: linear-gradient(90deg,
        transparent,
        rgba(15, 180, 95, .35),
        transparent);
}

/* =====================================================
 *  R15 → R16 — Payment chips keep brand colors but on
 *  dark glass tiles; ANPC badges render at full size.
 * ===================================================== */

/* Payment chips: dark glass, COLORED logos (not monochrome) */
#payments-methods .payment-chip > img{
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: .92 !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 80% !important;
}
#payments-methods .payment-chip:hover > img{
    filter: none !important;
    opacity: 1 !important;
}
/* dark tile gets a very subtle white wash behind so colored logos pop */
#payments-methods .payment-chip{
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,.07), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%) !important;
}

/* ANPC tiles: let badge images render at their natural size */
#footer-advanced .footer-pro-badge{
    padding: 6px 10px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#footer-advanced .footer-pro-badge img{
    max-height: 36px !important;
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
}
/* badges should sit side-by-side and not stretch */
#footer-advanced .footer-pro-badges{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: stretch !important;
}

/* =====================================================
 *  R16 → R17 — Payment chips: bump tile so even white-on-
 *  transparent logos remain readable. Clamp ANPC width.
 * ===================================================== */
#payments-methods .payment-chip{
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.18), rgba(255,255,255,.08) 70%) !important;
    border-color: rgba(255,255,255,.10) !important;
}
#payments-methods .payment-chip:hover{
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.22), rgba(23,215,115,.08) 75%) !important;
    border-color: rgba(23,215,115,.45) !important;
}

/* Constrain ANPC badge images so they fit Trust column */
#footer-advanced .footer-pro-badge{
    flex: 0 1 calc(50% - 6px) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
#footer-advanced .footer-pro-badge img{
    max-width: 100% !important;
    max-height: 32px !important;
    object-fit: contain !important;
}
#footer-advanced .footer-pro-badges{
    max-width: 100% !important;
}

/* =====================================================
 *  R17 → R18 — Client Area home rebuild: stats blocks
 *  responsive grid, card polish, list-group restyle.
 * ===================================================== */

/* ---------- Stats blocks (5 tiles row) ---------- */
#tni-clientArea{
    padding: 0 !important;
}
#tni-clientArea .clientArea-content{
    padding: 0 !important;
}
.client-blocks{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin-bottom: 22px !important;
}
@media (max-width: 1180px){
    .client-blocks{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px){
    .client-blocks{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
.client-blocks > a#block,
.client-blocks > a[id="block"]{
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 18px !important;
    background: linear-gradient(180deg,
        var(--esa26c-surface) 0%,
        var(--esa26c-surface-2) 100%) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    color: var(--esa26c-ink) !important;
    overflow: hidden !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
    min-width: 0 !important;
}
.client-blocks > a#block::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(23,215,115,.10), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.client-blocks > a#block:hover{
    transform: translateY(-3px);
    border-color: rgba(23,215,115,.45) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 16px 32px rgba(23,215,115,.16) !important;
}
.client-blocks > a#block:hover::before{ opacity: 1; }

.client-blocks > a#block .block-icon{
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--esa26c-brand-soft) !important;
    border: 1px solid rgba(23,215,115,.22) !important;
    border-radius: 12px !important;
    color: var(--esa26c-brand) !important;
    font-size: 22px !important;
}
.client-blocks > a#block .block-icon ion-icon{
    font-size: 22px !important;
    color: var(--esa26c-brand) !important;
}
.client-blocks > a#block .block-content{
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.client-blocks > a#block .block-content .value{
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--esa26c-ink) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.client-blocks > a#block .block-content .text{
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--esa26c-ink-mute) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* DDOS Manager: "Alpha" value should be small chip, not big number */
.client-blocks > a#block[data-block="antiddos"] .block-content .value{
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
    border: 1px solid rgba(23,215,115,.22) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    display: inline-block !important;
    align-self: flex-start !important;
    letter-spacing: .04em !important;
}

html[data-theme="light"] .client-blocks > a#block{
    background: #ffffff !important;
    border-color: rgba(15,23,42,.08) !important;
    color: #0f172a !important;
}
html[data-theme="light"] .client-blocks > a#block .block-content .value{
    color: #0f172a !important;
}

/* ---------- Card panels (cardArea-group) ---------- */
.client-home-cards .cardArea-group,
.card.cardArea-group{
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 18px !important;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.client-home-cards .cardArea-group:hover,
.card.cardArea-group:hover{
    border-color: rgba(23,215,115,.35) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
}
.cardArea-header{
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    position: relative;
}
.cardArea-header.card-accent-green::before,
.cardArea-header[class*="card-accent"]::before{
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--esa26c-brand),
        var(--esa26c-brand-2));
}
.cardArea-title{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
.cardArea-title .__title{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--esa26c-ink) !important;
}
.cardArea-title .__title i,
.cardArea-title .__title .cardIcon-green{
    color: var(--esa26c-brand) !important;
    font-size: 14px !important;
}
.card-button,
.cardButton-green{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: var(--esa26c-brand-soft) !important;
    border: 1px solid rgba(23,215,115,.30) !important;
    color: var(--esa26c-brand) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, transform .18s ease !important;
}
.card-button:hover,
.cardButton-green:hover{
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #06210f !important;
    transform: translateY(-1px);
}
.cardArea-group .card-body{
    padding: 16px 18px !important;
    color: var(--esa26c-ink) !important;
}

html[data-theme="light"] .client-home-cards .cardArea-group,
html[data-theme="light"] .card.cardArea-group{
    background: #ffffff !important;
    border-color: rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .cardArea-header{
    border-bottom-color: rgba(15,23,42,.06) !important;
}
html[data-theme="light"] .cardArea-title .__title{
    color: #0f172a !important;
}

/* ---------- Service list rows inside cards ---------- */
.cardArea-group .list-group{
    border: 0 !important;
    background: transparent !important;
}
.cardArea-group .list-group-item{
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--esa26c-line) !important;
    padding: 14px 18px !important;
    color: var(--esa26c-ink) !important;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, padding-left .18s ease !important;
}
.cardArea-group .list-group-item:first-child{
    border-top: 0 !important;
}
.cardArea-group .list-group-item:hover{
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    padding-left: 22px !important;
}
.cardArea-group .list-group-item .badge{
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23,215,115,.22) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* ---------- Status pills (Active / Pending / Suspended) ---------- */
.cardArea-group .label-success,
.cardArea-group .badge-success,
.cardArea-group .product-status-active,
.cardArea-group [class*="status-active"],
.cardArea-group span.status.active{
    display: inline-block !important;
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23,215,115,.28) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
}

/* ---------- View Details / Renew Now / My Services buttons ---------- */
.card-body .btn,
.card-body a.btn-default,
.card-body a.btn-primary,
.card-body button.btn,
.cardArea-group .btn{
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1px solid var(--esa26c-line-2) !important;
    background: transparent !important;
    color: var(--esa26c-ink) !important;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}
.card-body .btn:hover,
.cardArea-group .btn:hover{
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border-color: rgba(23,215,115,.35) !important;
    transform: translateY(-1px);
}

/* ---------- Invoice overview panel (custom) ---------- */
.invoicePanel{
    display: grid !important;
    grid-template-columns: minmax(180px, 240px) 1fr !important;
    gap: 22px !important;
    align-items: stretch !important;
}
@media (max-width: 720px){
    .invoicePanel{ grid-template-columns: 1fr !important; }
}
.invoicePanel-main{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 18px !important;
    background: linear-gradient(180deg,
        var(--esa26c-brand-soft),
        rgba(23,215,115,.03)) !important;
    border: 1px solid rgba(23,215,115,.22) !important;
    border-radius: 14px !important;
}
.invoicePanel-kicker{
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--esa26c-brand) !important;
    margin-bottom: 4px !important;
}
.invoicePanel-count{
    font-size: 44px !important;
    font-weight: 800 !important;
    color: var(--esa26c-brand) !important;
    line-height: 1 !important;
}
.invoicePanel-label{
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--esa26c-ink-mute) !important;
    margin-top: 6px !important;
}
.invoicePanel-copy p{
    color: var(--esa26c-ink) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 0 14px !important;
}
.invoicePanel-copy b{ color: var(--esa26c-brand) !important; }
.invoicePanel-actions{
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.invoicePanel-btn{
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.invoicePanel-btn-primary{
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #06210f !important;
    box-shadow: 0 8px 18px rgba(23,215,115,.28) !important;
}
.invoicePanel-btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(23,215,115,.40) !important;
    color: #06210f !important;
}
.invoicePanel-btn-secondary{
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23,215,115,.30) !important;
}
.invoicePanel-btn-secondary:hover{
    background: rgba(23,215,115,.20) !important;
}
html[data-theme="light"] .invoicePanel-copy p{ color: #1f2937 !important; }

/* ---------- "Return to admin area" tab — already styled but bump z-index ---------- */
#admin-masquerade-tab,
.return-admin-tab,
a[href*="logout.php?adminreturn"]{
    z-index: 50 !important;
}

/* ---------- Welcome strip variant for Client Area ---------- */
#breadcrumb .bread-links a[href*="clientarea"]{
    /* uses existing pill style — just make sure icon stays */
}

/* R18 fix-up: stats blocks label was truncated. Reduce padding,
   smaller letter-spacing, allow wrap fallback. */
.client-blocks > a#block{
    padding: 14px 12px !important;
    gap: 10px !important;
}
.client-blocks > a#block .block-icon{
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
}
.client-blocks > a#block .block-icon ion-icon{ font-size: 18px !important; }
.client-blocks > a#block .block-content .value{
    font-size: 20px !important;
}
.client-blocks > a#block .block-content .text{
    letter-spacing: .08em !important;
    font-size: 9.5px !important;
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

/* =====================================================
 *  R19 → R20 — Client Area DRAMATIC remake:
 *  hero welcome banner, vivid stat tiles per category,
 *  sidebar premium polish, card hierarchy bump.
 * ===================================================== */

/* ---------- HERO welcome banner (replaces plain breadcrumb on /clientarea) ---------- */
body.bodyClientArea #breadcrumb,
body[class*="clientarea"] #breadcrumb{
    padding: 28px 0 !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(23,215,115,.18), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(15,177,95,.14), transparent 60%),
        linear-gradient(135deg, var(--esa26c-surface) 0%, var(--esa26c-surface-2) 100%) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 20px !important;
    margin: 18px auto !important;
    position: relative !important;
    overflow: hidden !important;
}
body.bodyClientArea #breadcrumb::before,
body[class*="clientarea"] #breadcrumb::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 120%, rgba(23,215,115,.10), transparent 55%);
    pointer-events: none;
}
body.bodyClientArea #breadcrumb .bread-items,
body[class*="clientarea"] #breadcrumb .bread-items{
    position: relative;
    z-index: 1;
    padding: 0 28px !important;
}
body.bodyClientArea #breadcrumb .breadcrumb-title,
body[class*="clientarea"] #breadcrumb .breadcrumb-title{
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}
body.bodyClientArea #breadcrumb .breadcrumb-title span,
body[class*="clientarea"] #breadcrumb .breadcrumb-title span{
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--esa26c-brand);
}

/* ---------- Stat blocks: distinct color identity per tile ---------- */
.client-blocks > a#block{
    padding: 16px 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(160deg,
        var(--esa26c-surface) 0%,
        var(--esa26c-surface-2) 100%) !important;
}
.client-blocks > a#block .block-icon{
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg,
        rgba(23,215,115,.22),
        rgba(15,177,95,.10)) !important;
    border: 1px solid rgba(23,215,115,.30) !important;
    box-shadow: 0 6px 14px rgba(23,215,115,.18) !important;
}
.client-blocks > a#block[data-block="domains"] .block-icon{
    background: linear-gradient(135deg, rgba(99,160,255,.22), rgba(99,160,255,.08)) !important;
    border-color: rgba(99,160,255,.30) !important;
    box-shadow: 0 6px 14px rgba(99,160,255,.18) !important;
}
.client-blocks > a#block[data-block="domains"] .block-icon ion-icon{ color: #63a0ff !important; }
.client-blocks > a#block[data-block="tickets"] .block-icon{
    background: linear-gradient(135deg, rgba(255,184,0,.22), rgba(255,184,0,.08)) !important;
    border-color: rgba(255,184,0,.30) !important;
    box-shadow: 0 6px 14px rgba(255,184,0,.18) !important;
}
.client-blocks > a#block[data-block="tickets"] .block-icon ion-icon{ color: #ffb800 !important; }
.client-blocks > a#block[data-block="invoices"] .block-icon{
    background: linear-gradient(135deg, rgba(244,114,182,.22), rgba(244,114,182,.08)) !important;
    border-color: rgba(244,114,182,.30) !important;
    box-shadow: 0 6px 14px rgba(244,114,182,.18) !important;
}
.client-blocks > a#block[data-block="invoices"] .block-icon ion-icon{ color: #f472b6 !important; }
.client-blocks > a#block[data-block="antiddos"] .block-icon{
    background: linear-gradient(135deg, rgba(168,85,247,.22), rgba(168,85,247,.08)) !important;
    border-color: rgba(168,85,247,.30) !important;
    box-shadow: 0 6px 14px rgba(168,85,247,.18) !important;
}
.client-blocks > a#block[data-block="antiddos"] .block-icon ion-icon{ color: #a855f7 !important; }
.client-blocks > a#block[data-block="antiddos"] .block-content .value{
    color: #a855f7 !important;
    background: rgba(168,85,247,.12) !important;
    border-color: rgba(168,85,247,.30) !important;
}
.client-blocks > a#block .block-content .value{
    font-size: 24px !important;
    font-weight: 800 !important;
}
.client-blocks > a#block::after{
    content: "→";
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 14px;
    color: var(--esa26c-ink-dim);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease, right .2s ease;
}
.client-blocks > a#block:hover::after{
    opacity: 1;
    color: var(--esa26c-brand);
    right: 12px;
}

/* ---------- Sidebar cards: full surface treatment with accent ---------- */
.card-sidebar,
.card.card-sidebar,
.sidebar .panel,
.client-home-cards .sidebar .card{
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    position: relative !important;
}
.card-sidebar::before,
.card.card-sidebar::before{
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--esa26c-brand), var(--esa26c-brand-2));
}
.card-sidebar .card-header,
.card.card-sidebar .card-header,
.card-sidebar > h4,
.card.card-sidebar > h4{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    color: var(--esa26c-ink) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}
.card-sidebar .card-header i,
.card.card-sidebar .card-header i{
    color: var(--esa26c-brand) !important;
}
.card-sidebar .card-body{
    padding: 16px !important;
}
/* Account Credit Balance — make €0.18 EUR look premium */
.card-sidebar .panel-body,
.card-sidebar .card-body{
    color: var(--esa26c-ink) !important;
    font-size: 13px !important;
}
.card-sidebar .credit-balance,
.card-sidebar h2,
.card-sidebar .balance-value,
.card-sidebar h3{
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--esa26c-ink) !important;
    text-align: center !important;
    margin: 4px 0 12px !important;
}

/* "+ Add Funds" / "Update" / "+ New Contact" sidebar buttons unified */
.card-sidebar .btn,
.card-sidebar a.btn,
.card-sidebar button.btn{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    border-radius: 999px !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
}
.card-sidebar .btn-primary,
.card-sidebar a.btn-primary,
.card-sidebar button.btn-primary{
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #06210f !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(23,215,115,.28) !important;
}
.card-sidebar .btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(23,215,115,.40) !important;
    color: #06210f !important;
}
.card-sidebar .btn-default,
.card-sidebar .btn-secondary,
.card-sidebar a.btn-default{
    background: var(--esa26c-surface-2) !important;
    color: var(--esa26c-ink) !important;
    border: 1px solid var(--esa26c-line-2) !important;
}
.card-sidebar .btn-default:hover{
    border-color: rgba(23,215,115,.45) !important;
    color: var(--esa26c-brand) !important;
}

/* Sidebar list links (Order New Services, Register Domain, Logout) */
.card-sidebar .list-group,
.card-sidebar ul{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.card-sidebar .list-group-item,
.card-sidebar li > a,
.card-sidebar ul > li{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--esa26c-line) !important;
    color: var(--esa26c-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color .18s ease, padding-left .18s ease !important;
}
.card-sidebar .list-group-item:first-child,
.card-sidebar li:first-child > a,
.card-sidebar ul > li:first-child{ border-top: 0 !important; }
.card-sidebar .list-group-item:hover,
.card-sidebar li > a:hover{
    color: var(--esa26c-brand) !important;
    padding-left: 4px !important;
}
.card-sidebar .list-group-item i,
.card-sidebar li > a i,
.card-sidebar li > a > .fa{
    color: var(--esa26c-brand) !important;
    width: 18px !important;
    text-align: center !important;
}

/* ---------- Card panel hierarchy bump ---------- */
.client-home-cards .cardArea-group{
    border-radius: 18px !important;
}
.cardArea-header{
    padding: 16px 22px !important;
    background:
        linear-gradient(180deg,
            rgba(23,215,115,.06) 0%,
            transparent 100%) !important;
}
.cardArea-title .__title i.cardIcon-green,
.cardArea-title .__title > i{
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--esa26c-brand-soft) !important;
    border: 1px solid rgba(23,215,115,.25) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: var(--esa26c-brand) !important;
    margin-right: 4px !important;
}
.cardArea-title .__title{
    font-size: 13px !important;
}
.cardArea-group .card-body{
    padding: 18px 22px !important;
}

/* Light theme overrides */
html[data-theme="light"] body.bodyClientArea #breadcrumb,
html[data-theme="light"] body[class*="clientarea"] #breadcrumb{
    background:
        radial-gradient(circle at 0% 0%, rgba(23,215,115,.10), transparent 55%),
        linear-gradient(135deg, #ffffff, #f7f9fc) !important;
    border-color: rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .card-sidebar,
html[data-theme="light"] .card.card-sidebar{
    background: #ffffff !important;
    border-color: rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .card-sidebar .card-header,
html[data-theme="light"] .card.card-sidebar .card-header{
    color: #0f172a !important;
    border-bottom-color: rgba(15,23,42,.06) !important;
}
html[data-theme="light"] .card-sidebar .credit-balance,
html[data-theme="light"] .card-sidebar h3{ color: #0f172a !important; }
html[data-theme="light"] .card-sidebar .list-group-item,
html[data-theme="light"] .card-sidebar li > a{ color: #1f2937 !important; }
html[data-theme="light"] .cardArea-header{
    background: linear-gradient(180deg, rgba(23,215,115,.04) 0%, transparent 100%) !important;
}

/* R20 fix: actual body class is `page-clientarea*` and `is-logged-in` */
body.page-clientareahome #breadcrumb,
body[class*="page-clientarea"] #breadcrumb,
body[class*="page-account"] #breadcrumb,
body[class*="page-supporttickets"] #breadcrumb,
body[class*="page-invoices"] #breadcrumb,
body[class*="page-domains"] #breadcrumb,
body[class*="page-affiliates"] #breadcrumb{
    padding: 28px 0 !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(23,215,115,.18), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(15,177,95,.14), transparent 60%),
        linear-gradient(135deg, var(--esa26c-surface) 0%, var(--esa26c-surface-2) 100%) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 20px !important;
    margin: 18px auto !important;
    position: relative !important;
    overflow: hidden !important;
}
body[class*="page-clientarea"] #breadcrumb::before,
body[class*="page-account"] #breadcrumb::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 120%, rgba(23,215,115,.10), transparent 55%);
    pointer-events: none;
}
body[class*="page-clientarea"] #breadcrumb .bread-items,
body[class*="page-account"] #breadcrumb .bread-items{
    position: relative;
    z-index: 1;
    padding: 0 28px !important;
}
body[class*="page-clientarea"] #breadcrumb .breadcrumb-title,
body[class*="page-account"] #breadcrumb .breadcrumb-title{
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}
body[class*="page-clientarea"] #breadcrumb .breadcrumb-title span,
body[class*="page-account"] #breadcrumb .breadcrumb-title span{
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] body[class*="page-clientarea"] #breadcrumb,
html[data-theme="light"] body[class*="page-account"] #breadcrumb{
    background:
        radial-gradient(circle at 0% 0%, rgba(23,215,115,.10), transparent 55%),
        linear-gradient(135deg, #ffffff, #f7f9fc) !important;
    border-color: rgba(15,23,42,.08) !important;
}

/* =====================================================
 *  R21 → R22 — Client Area sidebar TRUE remake.
 *  Each card gets its own unique identity, not a stack
 *  of generic WHMCS panels.
 * ===================================================== */

/* ---------- Reset sidebar card to plain container ---------- */
.sidebar > .card.card-sidebar{
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 22px !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
}
.sidebar > .card.card-sidebar::before{ display: none !important; }
.sidebar > .card.card-sidebar > .card-header{
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 8px !important;
}
.sidebar > .card.card-sidebar > .card-header h3.card-title,
.sidebar > .card.card-sidebar > .card-header > h3{
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .20em !important;
    text-transform: uppercase !important;
    color: var(--esa26c-ink-mute) !important;
}
.sidebar > .card.card-sidebar > .card-header h3 > i:first-child{
    color: var(--esa26c-brand) !important;
    font-size: 11px !important;
}
.sidebar > .card.card-sidebar .card-minimise{
    margin-left: auto !important;
    color: var(--esa26c-ink-dim) !important;
    font-size: 10px !important;
    opacity: .6 !important;
    cursor: pointer !important;
    transition: opacity .18s ease !important;
}
.sidebar > .card.card-sidebar .card-minimise:hover{ opacity: 1 !important; }

/* Hide WHMCS borders on inner list-group/card-body so we restyle from scratch */
.sidebar > .card.card-sidebar .collapsable-card-body1,
.sidebar > .card.card-sidebar .collapsable-card-body{
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.sidebar > .card.card-sidebar .list-group,
.sidebar > .card.card-sidebar .list-group-flush{
    border: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sidebar > .card.card-sidebar .card-footer{
    background: transparent !important;
    border: 0 !important;
    padding: 10px 0 0 !important;
}

/* =====================================================
 *  CARD 1 — Account Credit Balance: hero "wallet" card
 * ===================================================== */
.sidebar > .card.card-sidebar[menuitemname="Client-Balance"]{
    position: relative;
}
.sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1{
    position: relative;
    padding: 24px 20px 22px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(23,215,115,.18), transparent 60%),
        linear-gradient(160deg, #07140b 0%, var(--esa26c-surface-2) 100%) !important;
    border: 1px solid rgba(23,215,115,.30) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 14px 30px rgba(0,0,0,.32),
        0 0 0 1px rgba(23,215,115,.08) !important;
}
/* glass orb decoration */
.sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1::before{
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23,215,115,.25), transparent 70%);
    pointer-events: none;
}
.sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1::after{
    content: "AVAILABLE BALANCE";
    position: absolute;
    top: 14px;
    left: 20px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--esa26c-brand);
    background: rgba(23,215,115,.12);
    border: 1px solid rgba(23,215,115,.25);
    border-radius: 4px;
    padding: 3px 8px;
}
.sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .list-group-item{
    background: transparent !important;
    border: 0 !important;
    padding: 28px 0 0 !important;
    margin: 0 !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .list-group-item h4{
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--esa26c-brand) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    line-height: 1.1 !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .card-footer{
    padding: 14px 20px 0 !important;
    margin-top: -20px !important;
    position: relative;
    z-index: 2;
}
.sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .card-footer .btn{
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #06210f !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 11px 14px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    box-shadow: 0 10px 22px rgba(23,215,115,.32) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .card-footer .btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(23,215,115,.45) !important;
    color: #06210f !important;
}

/* hide the redundant header text "Account Credit Balance" — eyebrow only */
.sidebar > .card.card-sidebar[menuitemname="Client-Balance"] > .card-header{
    display: none !important;
}

/* =====================================================
 *  CARD 2 — Your Info: profile passport with avatar
 * ===================================================== */
.sidebar > .card.card-sidebar[menuitemname="Client Details"]{
    position: relative;
}
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1{
    position: relative;
    padding: 60px 18px 18px !important;
    background:
        linear-gradient(180deg,
            rgba(23,215,115,.10) 0%,
            transparent 80px),
        var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}
/* avatar bubble (initials via attr trick — use FA user icon) */
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1::before{
    content: "ZM";
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2));
    color: #06210f;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow:
        0 0 0 4px var(--esa26c-surface),
        0 0 0 5px rgba(23,215,115,.45),
        0 12px 24px rgba(23,215,115,.30);
}
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-body{
    padding: 0 !important;
    background: transparent !important;
    text-align: center !important;
    color: var(--esa26c-ink) !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-body strong{
    display: block !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--esa26c-ink) !important;
    margin-bottom: 6px !important;
    letter-spacing: -.005em !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-body br + *,
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-body{
    color: var(--esa26c-ink-mute) !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Details"] > .card-header{
    display: none !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-footer{
    padding: 14px 0 0 !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-footer .btn{
    background: var(--esa26c-surface-2) !important;
    color: var(--esa26c-ink) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 999px !important;
    padding: 9px 14px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all .2s ease !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-footer .btn i{
    color: var(--esa26c-brand) !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-footer .btn:hover{
    border-color: var(--esa26c-brand) !important;
    color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
}

/* =====================================================
 *  CARD 3 — Contacts: empty-state card with illustration
 * ===================================================== */
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"]{
    position: relative;
}
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"] > .card-header{
    display: flex !important;
    padding: 0 4px 10px !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"] > .card-header h3.card-title{
    margin: 0 !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1{
    padding: 22px 18px !important;
    background: var(--esa26c-surface) !important;
    border: 1px dashed var(--esa26c-line-2) !important;
    border-radius: 16px !important;
    text-align: center !important;
    color: var(--esa26c-ink-mute) !important;
    font-size: 12px !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1::before{
    content: "\f0c0";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--esa26c-brand-soft);
    color: var(--esa26c-brand);
    font-size: 16px;
    border: 1px solid rgba(23,215,115,.25);
}
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1 > .card-body{
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 12px !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .card-footer{
    padding: 12px 0 0 !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .card-footer .btn{
    background: transparent !important;
    border: 1px solid rgba(23,215,115,.30) !important;
    color: var(--esa26c-brand) !important;
    border-radius: 999px !important;
    padding: 9px 14px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    transition: all .2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .card-footer .btn:hover{
    background: var(--esa26c-brand-soft) !important;
}

/* =====================================================
 *  CARD 4 — Shortcuts: tile-style quick actions
 * ===================================================== */
.sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"]{
    position: relative;
}
.sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] > .card-header{
    padding: 0 4px 10px !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .collapsable-card-body1{
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .list-group{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-top: 1px solid var(--esa26c-line-2) !important;
    border-radius: 12px !important;
    color: var(--esa26c-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all .2s ease !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item::after{
    content: "→";
    margin-left: auto;
    font-size: 14px;
    color: var(--esa26c-ink-dim);
    opacity: .5;
    transform: translateX(-4px);
    transition: transform .2s ease, color .2s ease, opacity .2s ease;
}
.sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item:hover{
    transform: translateX(2px);
    border-color: rgba(23,215,115,.45) !important;
    background: linear-gradient(135deg,
        rgba(23,215,115,.10),
        var(--esa26c-surface)) !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item:hover::after{
    color: var(--esa26c-brand) !important;
    opacity: 1 !important;
    transform: translateX(0);
}
.sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item i{
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23,215,115,.22) !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

/* ---------- LIGHT theme overrides ---------- */
html[data-theme="light"] .sidebar > .card.card-sidebar > .card-header h3.card-title{
    color: rgba(15,23,42,.55) !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1{
    background:
        radial-gradient(circle at 100% 0%, rgba(23,215,115,.18), transparent 60%),
        linear-gradient(160deg, #ecfdf3 0%, #ffffff 100%) !important;
    border-color: rgba(23,215,115,.30) !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .list-group-item h4{
    background: linear-gradient(135deg, #0f172a 0%, var(--esa26c-brand-2) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1{
    background:
        linear-gradient(180deg, rgba(23,215,115,.08) 0%, transparent 80px),
        #ffffff !important;
    border-color: rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1::before{
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px rgba(23,215,115,.45), 0 12px 24px rgba(23,215,115,.30);
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-body strong{
    color: #0f172a !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-footer .btn{
    background: #ffffff !important;
    color: #1f2937 !important;
    border-color: rgba(15,23,42,.10) !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1{
    background: #ffffff !important;
    border-color: rgba(15,23,42,.12) !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item{
    background: #ffffff !important;
    border-color: rgba(15,23,42,.08) !important;
    color: #1f2937 !important;
}

/* R22 fix: bump padding so avatar doesn't overlap name */
.sidebar > .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1{
    padding-top: 86px !important;
}

/* R23 fix: Contacts "No Contacts Found" is in .list-group-item not .card-body */
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .list-group-item{
    background: transparent !important;
    border: 0 !important;
    color: inherit !important;
    font-size: 12px !important;
    padding: 0 !important;
    text-align: center !important;
}
.sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .list-group-item:hover{
    background: transparent !important;
    color: inherit !important;
}

/* =====================================================
 *  R24 → R25 — Light theme fixes for clientarea sidebar.
 * ===================================================== */

/* €0.18 EUR was almost invisible (white→green gradient on white) */
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .list-group-item h4{
    background: linear-gradient(135deg, #064e2a 0%, var(--esa26c-brand-2) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Your Info: extra padding for avatar overlap on light too (inherits dark fix
   already, just make sure card width allows it) */
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1{
    padding-top: 86px !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-body{
    color: #1f2937 !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .list-group-item{
    color: #475569 !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1{
    border-style: dashed !important;
    border-color: rgba(15,23,42,.18) !important;
}

/* DDOS MANAGER label was cut: allow value pill to wrap, label to ellipsis */
.client-blocks > a#block[data-block="antiddos"] .block-content{
    overflow: hidden !important;
}
.client-blocks > a#block[data-block="antiddos"] .block-content .value{
    font-size: 11px !important;
    padding: 2px 6px !important;
}
.client-blocks > a#block .block-content .text{
    font-size: 9px !important;
    letter-spacing: .06em !important;
}

/* Make sure dropdown trigger pill shows full name */
#user-dropdown-toggle,
.client-userbarbtn,
button.client-userbarbtn{
    min-width: 0 !important;
}
.client-userbarbtn .client-name-name{
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Hero welcome banner: ensure breadcrumb actually shows on /clientarea
   (it's hidden by an earlier rule on some pages) */
body[class*="page-clientarea"] #breadcrumb,
body[class*="page-account"] #breadcrumb,
body[class*="page-supporttickets"] #breadcrumb,
body[class*="page-invoices"] #breadcrumb,
body[class*="page-domains"] #breadcrumb,
body[class*="page-affiliates"] #breadcrumb{
    display: block !important;
}

/* R25 fix-up: small final crops in light & dark */
/* Stat blocks: allow label to wrap to 2 lines when needed */
.client-blocks > a#block .block-content .text{
    white-space: normal !important;
    line-height: 1.2 !important;
}
/* Header user dropdown: name was getting clipped to "Zlatan" */
.client-userbarbtn .client-name-name{
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.client-userbarbtn{
    padding-right: 12px !important;
}

/* =====================================================
 *  R26 → R27 — CENTER PANEL remake. Each card has its
 *  own identity, NOT a stack of green-line WHMCS cards.
 * ===================================================== */

/* Reset to dramatic styled containers per item */
.client-home-cards .cardArea-group{
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-bottom: 22px !important;
    position: relative !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.client-home-cards .cardArea-group:hover{
    transform: translateY(-2px);
    border-color: rgba(23,215,115,.35) !important;
    box-shadow: 0 24px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(23,215,115,.08) !important;
}
.cardArea-header{
    padding: 18px 24px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    position: relative !important;
}
.cardArea-header::before{ display: none !important; }
.cardArea-group .card-body{
    padding: 22px 24px !important;
}

/* =====================================================
 *  PANEL: Services Renewing Soon — alert/warning style
 * ===================================================== */
.client-home-cards [menuitemname="Services Renewing Soon"],
.client-home-cards [menuitemname*="Renewing"]{
    background:
        radial-gradient(circle at 0% 0%, rgba(255,184,0,.10), transparent 50%),
        var(--esa26c-surface) !important;
    border-color: rgba(255,184,0,.25) !important;
}
.client-home-cards [menuitemname="Services Renewing Soon"] .cardArea-title .__title > i,
.client-home-cards [menuitemname*="Renewing"] .cardArea-title .__title > i{
    background: rgba(255,184,0,.14) !important;
    border-color: rgba(255,184,0,.30) !important;
    color: #ffb800 !important;
}
.client-home-cards [menuitemname="Services Renewing Soon"] .card-button,
.client-home-cards [menuitemname*="Renewing"] .card-button{
    background: rgba(255,184,0,.14) !important;
    color: #ffb800 !important;
    border-color: rgba(255,184,0,.30) !important;
}
.client-home-cards [menuitemname="Services Renewing Soon"] .card-button:hover,
.client-home-cards [menuitemname*="Renewing"] .card-button:hover{
    background: linear-gradient(135deg, #ffb800, #ff9500) !important;
    color: #261a00 !important;
}
/* prepend "URGENT" eyebrow */
.client-home-cards [menuitemname*="Renewing"] .card-body::before{
    content: "ATTENTION REQUIRED";
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    color: #ffb800;
    background: rgba(255,184,0,.14);
    border: 1px solid rgba(255,184,0,.30);
    border-radius: 4px;
    padding: 3px 8px;
    margin-bottom: 10px;
}

/* =====================================================
 *  PANEL: Active Products/Services — main showcase
 * ===================================================== */
.client-home-cards [menuitemname="Your Active Products/Services"],
.client-home-cards [menuitemname*="Active Products"]{
    background:
        radial-gradient(circle at 100% 0%, rgba(23,215,115,.10), transparent 55%),
        var(--esa26c-surface) !important;
}
.client-home-cards [menuitemname*="Active Products"] .list-group-item{
    padding: 16px 24px !important;
    border-top: 1px solid var(--esa26c-line) !important;
    border-bottom: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    color: var(--esa26c-ink) !important;
    text-decoration: none !important;
    position: relative !important;
    transition: all .2s ease !important;
}
.client-home-cards [menuitemname*="Active Products"] .list-group-item:first-of-type{ border-top: 0 !important; }
.client-home-cards [menuitemname*="Active Products"] .list-group-item:hover{
    background: linear-gradient(90deg, var(--esa26c-brand-soft), transparent) !important;
    padding-left: 30px !important;
}
.client-home-cards [menuitemname*="Active Products"] .list-group-item::after{
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: linear-gradient(180deg, var(--esa26c-brand), var(--esa26c-brand-2));
    transition: width .2s ease;
}
.client-home-cards [menuitemname*="Active Products"] .list-group-item:hover::after{
    width: 3px;
}

/* ACTIVE status pill — was already styled, make sure it stays compact */
.client-home-cards [menuitemname*="Active Products"] .label-success,
.client-home-cards [menuitemname*="Active Products"] .badge,
.client-home-cards [menuitemname*="Active Products"] .product-status-active,
.client-home-cards [menuitemname*="Active Products"] [class*="status-active"]{
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.client-home-cards [menuitemname*="Active Products"] .label-success::before,
.client-home-cards [menuitemname*="Active Products"] [class*="status-active"]::before{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--esa26c-brand);
    box-shadow: 0 0 8px rgba(23,215,115,.6);
}
.client-home-cards [menuitemname*="Active Products"] .btn-default{
    align-self: flex-start !important;
    margin-top: 4px !important;
}

/* =====================================================
 *  PANEL: Recent Support Tickets — communication card
 * ===================================================== */
.client-home-cards [menuitemname="Recent Support Tickets"],
.client-home-cards [menuitemname*="Tickets"]{
    background:
        radial-gradient(circle at 0% 100%, rgba(99,160,255,.08), transparent 55%),
        var(--esa26c-surface) !important;
}
.client-home-cards [menuitemname*="Tickets"] .cardArea-title .__title > i{
    background: rgba(99,160,255,.14) !important;
    border-color: rgba(99,160,255,.30) !important;
    color: #63a0ff !important;
}
.client-home-cards [menuitemname*="Tickets"] .card-button{
    background: rgba(99,160,255,.14) !important;
    color: #63a0ff !important;
    border-color: rgba(99,160,255,.30) !important;
}
.client-home-cards [menuitemname*="Tickets"] .card-button:hover{
    background: linear-gradient(135deg, #63a0ff, #4080d4) !important;
    color: #0a1a30 !important;
}
.client-home-cards [menuitemname*="Tickets"] .card-body{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 32px 24px !important;
}
.client-home-cards [menuitemname*="Tickets"] .card-body::before{
    content: "\f4ad";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(99,160,255,.12);
    border: 1px solid rgba(99,160,255,.25);
    color: #63a0ff;
    font-size: 22px;
    margin-bottom: 12px;
}
.client-home-cards [menuitemname*="Tickets"] .card-body a{
    color: #63a0ff !important;
    text-decoration: none !important;
    border-bottom: 1px dashed currentColor;
}

/* =====================================================
 *  PANEL: Invoice Overview (custom Billing) — already
 *  has custom markup, just bump shadow.
 * ===================================================== */
.client-home-cards .cardArea-group-invoices{
    background:
        radial-gradient(circle at 100% 100%, rgba(244,114,182,.08), transparent 55%),
        var(--esa26c-surface) !important;
}
.client-home-cards .cardArea-group-invoices .cardArea-title .__title > i{
    background: rgba(244,114,182,.14) !important;
    border-color: rgba(244,114,182,.30) !important;
    color: #f472b6 !important;
}
.client-home-cards .cardArea-group-invoices .card-button{
    background: rgba(244,114,182,.14) !important;
    color: #f472b6 !important;
    border-color: rgba(244,114,182,.30) !important;
}
.client-home-cards .cardArea-group-invoices .card-button:hover{
    background: linear-gradient(135deg, #f472b6, #db2777) !important;
    color: #2a0a1d !important;
}
.client-home-cards .cardArea-group-invoices .invoicePanel-main{
    background: linear-gradient(180deg, rgba(244,114,182,.14), rgba(244,114,182,.03)) !important;
    border-color: rgba(244,114,182,.30) !important;
}
.client-home-cards .cardArea-group-invoices .invoicePanel-kicker,
.client-home-cards .cardArea-group-invoices .invoicePanel-count{
    color: #f472b6 !important;
}
.client-home-cards .cardArea-group-invoices .invoicePanel-btn-primary{
    background: linear-gradient(135deg, #f472b6, #db2777) !important;
    box-shadow: 0 8px 18px rgba(244,114,182,.30) !important;
    color: #2a0a1d !important;
}
.client-home-cards .cardArea-group-invoices .invoicePanel-btn-primary:hover{
    color: #2a0a1d !important;
    box-shadow: 0 12px 26px rgba(244,114,182,.42) !important;
}
.client-home-cards .cardArea-group-invoices .invoicePanel-btn-secondary{
    background: rgba(244,114,182,.12) !important;
    color: #f472b6 !important;
    border-color: rgba(244,114,182,.28) !important;
}

/* Light theme tweaks */
html[data-theme="light"] .client-home-cards .cardArea-group{
    background: #ffffff !important;
    border-color: rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .client-home-cards [menuitemname*="Renewing"]{
    background:
        radial-gradient(circle at 0% 0%, rgba(255,184,0,.12), transparent 50%),
        #ffffff !important;
}
html[data-theme="light"] .client-home-cards [menuitemname*="Active Products"]{
    background:
        radial-gradient(circle at 100% 0%, rgba(23,215,115,.10), transparent 55%),
        #ffffff !important;
}
html[data-theme="light"] .client-home-cards [menuitemname*="Tickets"]{
    background:
        radial-gradient(circle at 0% 100%, rgba(99,160,255,.10), transparent 55%),
        #ffffff !important;
}
html[data-theme="light"] .client-home-cards .cardArea-group-invoices{
    background:
        radial-gradient(circle at 100% 100%, rgba(244,114,182,.10), transparent 55%),
        #ffffff !important;
}


/* R27 fix: bump specificity to defeat earlier card-accent-green + cardButton-green */
.client-home-cards .cardArea-group .cardArea-header.card-accent-green::before,
.client-home-cards .cardArea-group .cardArea-header[class*="card-accent"]::before{
    display: none !important;
}
/* Renewing: amber bar instead of green */
.client-home-cards [menuitemname="Services Renewing Soon"] .cardArea-header::before{
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ffb800, #ff9500) !important;
}
.client-home-cards [menuitemname="Services Renewing Soon"] a.card-button,
.client-home-cards [menuitemname="Services Renewing Soon"] .cardButton-green{
    background: rgba(255,184,0,.14) !important;
    color: #ffb800 !important;
    border-color: rgba(255,184,0,.30) !important;
}
.client-home-cards [menuitemname="Services Renewing Soon"] a.card-button:hover,
.client-home-cards [menuitemname="Services Renewing Soon"] .cardButton-green:hover{
    background: linear-gradient(135deg, #ffb800, #ff9500) !important;
    color: #261a00 !important;
}

/* Tickets: blue bar */
.client-home-cards [menuitemname="Recent Support Tickets"] .cardArea-header::before{
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #63a0ff, #4080d4) !important;
}
.client-home-cards [menuitemname="Recent Support Tickets"] a.card-button,
.client-home-cards [menuitemname="Recent Support Tickets"] .cardButton-green{
    background: rgba(99,160,255,.14) !important;
    color: #63a0ff !important;
    border-color: rgba(99,160,255,.30) !important;
}
.client-home-cards [menuitemname="Recent Support Tickets"] a.card-button:hover,
.client-home-cards [menuitemname="Recent Support Tickets"] .cardButton-green:hover{
    background: linear-gradient(135deg, #63a0ff, #4080d4) !important;
    color: #0a1a30 !important;
}

/* Invoices: pink bar */
.client-home-cards .cardArea-group-invoices .cardArea-header::before{
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #f472b6, #db2777) !important;
}
.client-home-cards .cardArea-group-invoices a.card-button,
.client-home-cards .cardArea-group-invoices .cardButton-green{
    background: rgba(244,114,182,.14) !important;
    color: #f472b6 !important;
    border-color: rgba(244,114,182,.30) !important;
}

/* Domain: cyan bar */
.client-home-cards [menuitemname="Register a New Domain"] .cardArea-header::before{
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #06b6d4, #0891b2) !important;
}
.client-home-cards [menuitemname="Register a New Domain"]{
    background:
        radial-gradient(circle at 50% 0%, rgba(6,182,212,.10), transparent 55%),
        var(--esa26c-surface) !important;
}
.client-home-cards [menuitemname="Register a New Domain"] .cardArea-title .__title > i{
    background: rgba(6,182,212,.14) !important;
    border-color: rgba(6,182,212,.30) !important;
    color: #06b6d4 !important;
}
.client-home-cards [menuitemname="Register a New Domain"] a.card-button,
.client-home-cards [menuitemname="Register a New Domain"] .cardButton-green{
    background: rgba(6,182,212,.14) !important;
    color: #06b6d4 !important;
    border-color: rgba(6,182,212,.30) !important;
}

/* News: stays green (brand) — apply explicit bar */
.client-home-cards [menuitemname="Recent News"] .cardArea-header::before{
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
}
/* Active Products keeps green */
.client-home-cards [menuitemname="Active Products/Services"] .cardArea-header::before{
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
}

/* R28 fix: override .cardArea-header.card-accent-green::before with combined specificity */
.client-home-cards [menuitemname="Services Renewing Soon"] .cardArea-header.card-accent-green::before,
.client-home-cards [menuitemname="Services Renewing Soon"] .cardArea-header[class*="card-accent"]::before{
    display: block !important;
    background: linear-gradient(90deg, #ffb800, #ff9500) !important;
}
.client-home-cards [menuitemname="Recent Support Tickets"] .cardArea-header.card-accent-green::before,
.client-home-cards [menuitemname="Recent Support Tickets"] .cardArea-header[class*="card-accent"]::before{
    display: block !important;
    background: linear-gradient(90deg, #63a0ff, #4080d4) !important;
}
.client-home-cards .cardArea-group-invoices .cardArea-header.card-accent-green::before,
.client-home-cards .cardArea-group-invoices .cardArea-header[class*="card-accent"]::before{
    display: block !important;
    background: linear-gradient(90deg, #f472b6, #db2777) !important;
}
.client-home-cards [menuitemname="Register a New Domain"] .cardArea-header.card-accent-green::before,
.client-home-cards [menuitemname="Register a New Domain"] .cardArea-header[class*="card-accent"]::before{
    display: block !important;
    background: linear-gradient(90deg, #06b6d4, #0891b2) !important;
}
/* Tickets OPEN NEW TICKET button — defeat earlier cardButton-green */
.client-home-cards [menuitemname="Recent Support Tickets"] a.cardButton-green,
.client-home-cards [menuitemname="Recent Support Tickets"] a.card-button.cardButton-green{
    background: rgba(99,160,255,.14) !important;
    color: #63a0ff !important;
    border-color: rgba(99,160,255,.30) !important;
}
.client-home-cards [menuitemname="Recent Support Tickets"] a.cardButton-green:hover{
    background: linear-gradient(135deg, #63a0ff, #4080d4) !important;
    color: #0a1a30 !important;
}

/* R29 fix: WHMCS uses cardButton-blue / cardButton-red etc for color variants */
.client-home-cards a.cardButton-blue,
.client-home-cards .card-button.cardButton-blue{
    background: rgba(99,160,255,.14) !important;
    color: #63a0ff !important;
    border: 1px solid rgba(99,160,255,.30) !important;
}
.client-home-cards a.cardButton-blue:hover,
.client-home-cards .card-button.cardButton-blue:hover{
    background: linear-gradient(135deg, #63a0ff, #4080d4) !important;
    color: #0a1a30 !important;
}
.client-home-cards a.cardButton-red,
.client-home-cards .card-button.cardButton-red{
    background: rgba(244,114,182,.14) !important;
    color: #f472b6 !important;
    border: 1px solid rgba(244,114,182,.30) !important;
}
.client-home-cards a.cardButton-red:hover{
    background: linear-gradient(135deg, #f472b6, #db2777) !important;
    color: #2a0a1d !important;
}
.client-home-cards a.cardButton-yellow,
.client-home-cards .card-button.cardButton-yellow{
    background: rgba(255,184,0,.14) !important;
    color: #ffb800 !important;
    border: 1px solid rgba(255,184,0,.30) !important;
}
.client-home-cards a.cardButton-yellow:hover{
    background: linear-gradient(135deg, #ffb800, #ff9500) !important;
    color: #261a00 !important;
}
.client-home-cards a.cardButton-cyan,
.client-home-cards .card-button.cardButton-cyan{
    background: rgba(6,182,212,.14) !important;
    color: #06b6d4 !important;
    border: 1px solid rgba(6,182,212,.30) !important;
}
.client-home-cards a.cardButton-purple,
.client-home-cards .card-button.cardButton-purple{
    background: rgba(168,85,247,.14) !important;
    color: #a855f7 !important;
    border: 1px solid rgba(168,85,247,.30) !important;
}
/* Same for accent bars: card-accent-blue/red/yellow/cyan */
.client-home-cards .cardArea-header.card-accent-blue::before{
    display: block !important;
    background: linear-gradient(90deg, #63a0ff, #4080d4) !important;
}
.client-home-cards .cardArea-header.card-accent-red::before{
    display: block !important;
    background: linear-gradient(90deg, #f472b6, #db2777) !important;
}
.client-home-cards .cardArea-header.card-accent-yellow::before{
    display: block !important;
    background: linear-gradient(90deg, #ffb800, #ff9500) !important;
}
.client-home-cards .cardArea-header.card-accent-cyan::before{
    display: block !important;
    background: linear-gradient(90deg, #06b6d4, #0891b2) !important;
}
.client-home-cards .cardArea-header.card-accent-purple::before{
    display: block !important;
    background: linear-gradient(90deg, #a855f7, #7e22ce) !important;
}
/* Icon tints by accent color in header */
.cardArea-title .__title > i.cardIcon-blue{
    background: rgba(99,160,255,.14) !important;
    border-color: rgba(99,160,255,.30) !important;
    color: #63a0ff !important;
}
.cardArea-title .__title > i.cardIcon-red{
    background: rgba(244,114,182,.14) !important;
    border-color: rgba(244,114,182,.30) !important;
    color: #f472b6 !important;
}
.cardArea-title .__title > i.cardIcon-yellow{
    background: rgba(255,184,0,.14) !important;
    border-color: rgba(255,184,0,.30) !important;
    color: #ffb800 !important;
}
.cardArea-title .__title > i.cardIcon-cyan{
    background: rgba(6,182,212,.14) !important;
    border-color: rgba(6,182,212,.30) !important;
    color: #06b6d4 !important;
}
.cardArea-title .__title > i.cardIcon-purple{
    background: rgba(168,85,247,.14) !important;
    border-color: rgba(168,85,247,.30) !important;
    color: #a855f7 !important;
}

/* ============================================================
   R31 — Defeat overrides.css line 7100 emerald gradient cascade
   ============================================================ */

/* Per-color card button (defeats body.page-clientareahome ...!important) */
body.page-clientareahome .client-home-cards .card-button.cardButton-blue,
body.page-clientarea .client-home-cards .card-button.cardButton-blue {
    background: rgba(99,160,255,.14) !important;
    background-image: none !important;
    color: #63a0ff !important;
    border: 1px solid rgba(99,160,255,.32) !important;
    box-shadow: 0 8px 18px rgba(99,160,255,.18) !important;
}
body.page-clientareahome .client-home-cards .card-button.cardButton-blue:hover {
    background: linear-gradient(135deg, #63a0ff, #4084f5) !important;
    color: #fff !important;
    border-color: transparent !important;
}

body.page-clientareahome .client-home-cards .card-button.cardButton-pink,
body.page-clientareahome .client-home-cards .card-button.cardButton-magenta,
body.page-clientarea .client-home-cards .card-button.cardButton-pink {
    background: rgba(244,114,182,.14) !important;
    background-image: none !important;
    color: #f472b6 !important;
    border: 1px solid rgba(244,114,182,.32) !important;
    box-shadow: 0 8px 18px rgba(244,114,182,.18) !important;
}
body.page-clientareahome .client-home-cards .card-button.cardButton-pink:hover,
body.page-clientareahome .client-home-cards .card-button.cardButton-magenta:hover {
    background: linear-gradient(135deg, #f472b6, #db5da0) !important;
    color: #fff !important;
    border-color: transparent !important;
}

body.page-clientareahome .client-home-cards .card-button.cardButton-yellow,
body.page-clientareahome .client-home-cards .card-button.cardButton-orange,
body.page-clientareahome .client-home-cards .card-button.cardButton-gold,
body.page-clientareahome .client-home-cards .card-button.cardButton-sun-flower {
    background: rgba(255,184,0,.16) !important;
    background-image: none !important;
    color: #ffb800 !important;
    border: 1px solid rgba(255,184,0,.34) !important;
    box-shadow: 0 8px 18px rgba(255,184,0,.20) !important;
}
body.page-clientareahome .client-home-cards .card-button.cardButton-yellow:hover,
body.page-clientareahome .client-home-cards .card-button.cardButton-orange:hover,
body.page-clientareahome .client-home-cards .card-button.cardButton-gold:hover,
body.page-clientareahome .client-home-cards .card-button.cardButton-sun-flower:hover {
    background: linear-gradient(135deg, #ffb800, #e09a00) !important;
    color: #1b1503 !important;
    border-color: transparent !important;
}

body.page-clientareahome .client-home-cards .card-button.cardButton-red,
body.page-clientareahome .client-home-cards .card-button.cardButton-pomegranate {
    background: rgba(239,68,68,.14) !important;
    background-image: none !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239,68,68,.32) !important;
    box-shadow: 0 8px 18px rgba(239,68,68,.18) !important;
}
body.page-clientareahome .client-home-cards .card-button.cardButton-red:hover,
body.page-clientareahome .client-home-cards .card-button.cardButton-pomegranate:hover {
    background: linear-gradient(135deg, #ef4444, #c63333) !important;
    color: #fff !important;
    border-color: transparent !important;
}

body.page-clientareahome .client-home-cards .card-button.cardButton-cyan,
body.page-clientareahome .client-home-cards .card-button.cardButton-teal,
body.page-clientareahome .client-home-cards .card-button.cardButton-turquoise {
    background: rgba(6,182,212,.14) !important;
    background-image: none !important;
    color: #06b6d4 !important;
    border: 1px solid rgba(6,182,212,.32) !important;
    box-shadow: 0 8px 18px rgba(6,182,212,.18) !important;
}
body.page-clientareahome .client-home-cards .card-button.cardButton-cyan:hover,
body.page-clientareahome .client-home-cards .card-button.cardButton-teal:hover,
body.page-clientareahome .client-home-cards .card-button.cardButton-turquoise:hover {
    background: linear-gradient(135deg, #06b6d4, #0991ad) !important;
    color: #fff !important;
    border-color: transparent !important;
}

body.page-clientareahome .client-home-cards .card-button.cardButton-purple,
body.page-clientareahome .client-home-cards .card-button.cardButton-amethyst {
    background: rgba(168,85,247,.14) !important;
    background-image: none !important;
    color: #a855f7 !important;
    border: 1px solid rgba(168,85,247,.32) !important;
    box-shadow: 0 8px 18px rgba(168,85,247,.18) !important;
}
body.page-clientareahome .client-home-cards .card-button.cardButton-purple:hover,
body.page-clientareahome .client-home-cards .card-button.cardButton-amethyst:hover {
    background: linear-gradient(135deg, #a855f7, #8e3edf) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Defeats line 7088: cardArea-header[class*="card-accent-"] forced green border-top */
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-blue {
    border-top-color: #63a0ff !important;
}
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-pink,
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-magenta {
    border-top-color: #f472b6 !important;
}
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-yellow,
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-orange,
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-gold,
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-sun-flower {
    border-top-color: #ffb800 !important;
}
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-red,
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-pomegranate {
    border-top-color: #ef4444 !important;
}
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-cyan,
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-teal,
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-turquoise {
    border-top-color: #06b6d4 !important;
}
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-purple,
body.page-clientareahome .client-home-cards .cardArea-header.card-accent-amethyst {
    border-top-color: #a855f7 !important;
}

/* Defeats line 7096: [class*="cardIcon-"] forced green color */
body.page-clientareahome .client-home-cards i.cardIcon-blue { color: #63a0ff !important; }
body.page-clientareahome .client-home-cards i.cardIcon-pink,
body.page-clientareahome .client-home-cards i.cardIcon-magenta { color: #f472b6 !important; }
body.page-clientareahome .client-home-cards i.cardIcon-yellow,
body.page-clientareahome .client-home-cards i.cardIcon-orange,
body.page-clientareahome .client-home-cards i.cardIcon-gold,
body.page-clientareahome .client-home-cards i.cardIcon-sun-flower { color: #ffb800 !important; }
body.page-clientareahome .client-home-cards i.cardIcon-red,
body.page-clientareahome .client-home-cards i.cardIcon-pomegranate { color: #ef4444 !important; }
body.page-clientareahome .client-home-cards i.cardIcon-cyan,
body.page-clientareahome .client-home-cards i.cardIcon-teal,
body.page-clientareahome .client-home-cards i.cardIcon-turquoise { color: #06b6d4 !important; }
body.page-clientareahome .client-home-cards i.cardIcon-purple,
body.page-clientareahome .client-home-cards i.cardIcon-amethyst { color: #a855f7 !important; }

/* R31b — per-panel button override regardless of WHMCS color class */

/* Services Renewing Soon → amber */
body.page-clientareahome .client-home-cards [menuitemname="Services Renewing Soon"] .card-button {
    background: rgba(255,184,0,.16) !important;
    background-image: none !important;
    color: #ffb800 !important;
    border: 1px solid rgba(255,184,0,.34) !important;
    box-shadow: 0 8px 18px rgba(255,184,0,.20) !important;
}
body.page-clientareahome .client-home-cards [menuitemname="Services Renewing Soon"] .card-button:hover {
    background: linear-gradient(135deg, #ffb800, #e09a00) !important;
    color: #1b1503 !important;
}

/* Invoices Overview → pink (even when class=cardButton-green) */
body.page-clientareahome .client-home-cards [menuitemname="Invoices Overview"] .card-button,
body.page-clientareahome .client-home-cards .cardArea-group-invoices .card-button {
    background: rgba(244,114,182,.14) !important;
    background-image: none !important;
    color: #f472b6 !important;
    border: 1px solid rgba(244,114,182,.32) !important;
    box-shadow: 0 8px 18px rgba(244,114,182,.18) !important;
}
body.page-clientareahome .client-home-cards [menuitemname="Invoices Overview"] .card-button:hover,
body.page-clientareahome .client-home-cards .cardArea-group-invoices .card-button:hover {
    background: linear-gradient(135deg, #f472b6, #db5da0) !important;
    color: #fff !important;
}

/* Register a New Domain → cyan */
body.page-clientareahome .client-home-cards [menuitemname="Register a New Domain"] .card-button {
    background: rgba(6,182,212,.14) !important;
    background-image: none !important;
    color: #06b6d4 !important;
    border: 1px solid rgba(6,182,212,.32) !important;
    box-shadow: 0 8px 18px rgba(6,182,212,.18) !important;
}
body.page-clientareahome .client-home-cards [menuitemname="Register a New Domain"] .card-button:hover {
    background: linear-gradient(135deg, #06b6d4, #0991ad) !important;
    color: #fff !important;
}

/* Recent News → purple */
body.page-clientareahome .client-home-cards [menuitemname="Recent News"] .card-button {
    background: rgba(168,85,247,.14) !important;
    background-image: none !important;
    color: #a855f7 !important;
    border: 1px solid rgba(168,85,247,.32) !important;
    box-shadow: 0 8px 18px rgba(168,85,247,.18) !important;
}
body.page-clientareahome .client-home-cards [menuitemname="Recent News"] .card-button:hover {
    background: linear-gradient(135deg, #a855f7, #8e3edf) !important;
    color: #fff !important;
}

/* asbestos / silver / wet-asphalt fallback → neutral glass ghost */
body.page-clientareahome .client-home-cards .card-button.cardButton-asbestos,
body.page-clientareahome .client-home-cards .card-button.cardButton-silver,
body.page-clientareahome .client-home-cards .card-button.cardButton-wet-asphalt,
body.page-clientareahome .client-home-cards .card-button.cardButton-midnight-blue {
    background: rgba(255,184,0,.16) !important;
    background-image: none !important;
    color: #ffb800 !important;
    border: 1px solid rgba(255,184,0,.34) !important;
    box-shadow: 0 8px 18px rgba(255,184,0,.20) !important;
}

/* Also push accents/icons per menuitemname to defeat green-everywhere defaults */
body.page-clientareahome .client-home-cards [menuitemname="Services Renewing Soon"] .cardArea-header { border-top-color: #ffb800 !important; }
body.page-clientareahome .client-home-cards [menuitemname="Services Renewing Soon"] [class*="cardIcon-"] { color: #ffb800 !important; }
body.page-clientareahome .client-home-cards [menuitemname="Invoices Overview"] .cardArea-header,
body.page-clientareahome .client-home-cards .cardArea-group-invoices .cardArea-header { border-top-color: #f472b6 !important; }
body.page-clientareahome .client-home-cards [menuitemname="Invoices Overview"] [class*="cardIcon-"],
body.page-clientareahome .client-home-cards .cardArea-group-invoices [class*="cardIcon-"] { color: #f472b6 !important; }
body.page-clientareahome .client-home-cards [menuitemname="Register a New Domain"] .cardArea-header { border-top-color: #06b6d4 !important; }
body.page-clientareahome .client-home-cards [menuitemname="Register a New Domain"] [class*="cardIcon-"] { color: #06b6d4 !important; }
body.page-clientareahome .client-home-cards [menuitemname="Recent Support Tickets"] .cardArea-header { border-top-color: #63a0ff !important; }
body.page-clientareahome .client-home-cards [menuitemname="Recent Support Tickets"] [class*="cardIcon-"] { color: #63a0ff !important; }
body.page-clientareahome .client-home-cards [menuitemname="Recent News"] .cardArea-header { border-top-color: #a855f7 !important; }
body.page-clientareahome .client-home-cards [menuitemname="Recent News"] [class*="cardIcon-"] { color: #a855f7 !important; }

/* R32 — higher specificity menuitemname rules to beat color-class fallbacks */

/* Active Products/Services → brand green (its WHMCS class is cardButton-gold) */
body.page-clientareahome .client-home-cards [menuitemname="Active Products/Services"] .card-button,
body.page-clientareahome .client-home-cards [menuitemname="Active Products/Services"] .card-button[class*="cardButton-"] {
    background: rgba(23,215,115,.16) !important;
    background-image: none !important;
    color: #17d773 !important;
    border: 1px solid rgba(23,215,115,.34) !important;
    box-shadow: 0 8px 18px rgba(23,215,115,.22) !important;
}
body.page-clientareahome .client-home-cards [menuitemname="Active Products/Services"] .card-button:hover {
    background: linear-gradient(135deg, #17d773, #0fb15f) !important;
    color: #06170e !important;
}
body.page-clientareahome .client-home-cards [menuitemname="Active Products/Services"] .cardArea-header { border-top-color: #17d773 !important; }
body.page-clientareahome .client-home-cards [menuitemname="Active Products/Services"] [class*="cardIcon-"] { color: #17d773 !important; }

/* Recent News → purple, beats cardButton-asbestos fallback */
body.page-clientareahome .client-home-cards [menuitemname="Recent News"] .card-button[class*="cardButton-"] {
    background: rgba(168,85,247,.14) !important;
    background-image: none !important;
    color: #a855f7 !important;
    border: 1px solid rgba(168,85,247,.32) !important;
    box-shadow: 0 8px 18px rgba(168,85,247,.18) !important;
}
body.page-clientareahome .client-home-cards [menuitemname="Recent News"] .card-button[class*="cardButton-"]:hover {
    background: linear-gradient(135deg, #a855f7, #8e3edf) !important;
    color: #fff !important;
}

/* Services Renewing Soon — beat midnight-blue fallback with same higher spec */
body.page-clientareahome .client-home-cards [menuitemname="Services Renewing Soon"] .card-button[class*="cardButton-"] {
    background: rgba(255,184,0,.16) !important;
    background-image: none !important;
    color: #ffb800 !important;
    border: 1px solid rgba(255,184,0,.34) !important;
    box-shadow: 0 8px 18px rgba(255,184,0,.20) !important;
}
body.page-clientareahome .client-home-cards [menuitemname="Services Renewing Soon"] .card-button[class*="cardButton-"]:hover {
    background: linear-gradient(135deg, #ffb800, #e09a00) !important;
    color: #1b1503 !important;
}

/* R33 — light theme: deeper colors for ghost buttons + fix invisible Domain Register btn */
html[data-theme="light"] body.page-clientareahome .client-home-cards .card-button[class*="cardButton-"] {
    border-width: 1.5px !important;
    font-weight: 700 !important;
}
html[data-theme="light"] body.page-clientareahome .client-home-cards [menuitemname="Recent Support Tickets"] .card-button {
    background: rgba(99,160,255,.22) !important;
    color: #2563eb !important;
    border-color: rgba(37,99,235,.40) !important;
}
html[data-theme="light"] body.page-clientareahome .client-home-cards [menuitemname="Invoices Overview"] .card-button,
html[data-theme="light"] body.page-clientareahome .client-home-cards .cardArea-group-invoices .card-button {
    background: rgba(244,114,182,.22) !important;
    color: #be185d !important;
    border-color: rgba(190,24,93,.40) !important;
}
html[data-theme="light"] body.page-clientareahome .client-home-cards [menuitemname="Services Renewing Soon"] .card-button {
    background: rgba(255,184,0,.28) !important;
    color: #a16207 !important;
    border-color: rgba(161,98,7,.40) !important;
}
html[data-theme="light"] body.page-clientareahome .client-home-cards [menuitemname="Recent News"] .card-button {
    background: rgba(168,85,247,.22) !important;
    color: #6b21a8 !important;
    border-color: rgba(107,33,168,.40) !important;
}
html[data-theme="light"] body.page-clientareahome .client-home-cards [menuitemname="Register a New Domain"] .card-button {
    background: rgba(6,182,212,.22) !important;
    color: #0e7490 !important;
    border-color: rgba(14,116,144,.40) !important;
}

/* Domain Register/Transfer buttons in light mode — defeat white-on-white */
html[data-theme="light"] body.page-clientareahome .client-home-cards [menuitemname="Register a New Domain"] .btn,
html[data-theme="light"] body.page-clientareahome .client-home-cards [menuitemname="Register a New Domain"] button[type="submit"] {
    background: linear-gradient(135deg, #06b6d4, #0991ad) !important;
    color: #fff !important;
    border-color: transparent !important;
}
html[data-theme="light"] body.page-clientareahome .client-home-cards [menuitemname="Register a New Domain"] .btn:nth-of-type(1) {
    background: linear-gradient(135deg, #17d773, #0fb15f) !important;
}

/* R34 — light theme: remove green gradient bleed on sidebar cards (Balance, Your Info, Contacts) */
html[data-theme="light"] .card.card-sidebar[menuitemname="Client-Balance"],
html[data-theme="light"] .card.card-sidebar[menuitemname="Client Details"],
html[data-theme="light"] .card.card-sidebar[menuitemname="Client Contacts"],
html[data-theme="light"] .card.card-sidebar[menuitemname="Client Shortcuts"] {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15,177,95,.14) !important;
    box-shadow: 0 8px 20px rgba(15,30,20,.05) !important;
}
html[data-theme="light"] .card.card-sidebar[menuitemname="Client-Balance"]::before,
html[data-theme="light"] .card.card-sidebar[menuitemname="Client-Balance"]::after,
html[data-theme="light"] .card.card-sidebar[menuitemname="Client Details"]::before,
html[data-theme="light"] .card.card-sidebar[menuitemname="Client Details"]::after {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
/* re-add AVAILABLE BALANCE eyebrow in light mode (it was provided by ::after) */
html[data-theme="light"] .card.card-sidebar[menuitemname="Client-Balance"]::after {
    content: "AVAILABLE BALANCE" !important;
    position: absolute !important;
    top: 18px !important; left: 18px !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    font-weight: 700 !important;
    color: #0fb15f !important;
    background: rgba(23,215,115,.10) !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15,177,95,.30) !important;
}
/* keep collapsable body transparent so card bg shows clean */
html[data-theme="light"] .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1,
html[data-theme="light"] .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1,
html[data-theme="light"] .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1,
html[data-theme="light"] .card.card-sidebar[menuitemname="Client Shortcuts"] .collapsable-card-body1 {
    background: transparent !important;
    background-image: none !important;
}

/* Contacts: empty-state inner dashed tile bg should be pure white-tint */
html[data-theme="light"] .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1 {
    background: rgba(15,177,95,.03) !important;
}

/* Your Info avatar ::before — keep brand green chip on white card */
html[data-theme="light"] .card.card-sidebar[menuitemname="Client Details"]::before {
    background: linear-gradient(135deg, #17d773, #0fb15f) !important;
    box-shadow: 0 6px 18px rgba(15,177,95,.30), 0 0 0 6px rgba(23,215,115,.12) !important;
    color: #fff !important;
}

/* R35 — kill remaining green bleed inside Balance card body + dedupe eyebrow */
html[data-theme="light"] body .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1 {
    background: transparent !important;
    background-image: none !important;
}
html[data-theme="light"] body .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1::after,
html[data-theme="light"] body .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1::before {
    content: none !important;
    display: none !important;
}
html[data-theme="light"] body .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1,
html[data-theme="light"] body .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1,
html[data-theme="light"] body .card.card-sidebar[menuitemname="Client Shortcuts"] .collapsable-card-body1 {
    background: transparent !important;
    background-image: none !important;
}
/* contacts dashed empty state inner remains visible — keep its tint just on inner card */
html[data-theme="light"] body .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1 > * {
    background: transparent !important;
    background-image: none !important;
}

/* R36 — match earlier `.sidebar >` specificity to actually win cascade */
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .collapsable-card-body1 {
    background: #ffffff !important;
    background-image: none !important;
}
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"],
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"],
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Contacts"],
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15,177,95,.16) !important;
    box-shadow: 0 6px 16px rgba(15,30,20,.06) !important;
}
/* footer area (Add Funds container) */
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .card-footer,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-footer,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .card-footer {
    background: transparent !important;
    background-image: none !important;
    border-top: 1px solid rgba(15,177,95,.10) !important;
}
/* kill remaining card::before/::after orb in light */
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"]::before {
    background: none !important;
    box-shadow: none !important;
    display: none !important;
}

/* R37 — kill remaining green tint on light: strip all box-shadows + green outlines from card body */
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .collapsable-card-body1 {
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: #ffffff !important;
    background-image: none !important;
}
/* Add Funds outer green glow drops onto card → tame in light */
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .btn-success {
    box-shadow: 0 4px 12px rgba(15,177,95,.18) !important;
}
/* Card itself: thin clean border, no green inner outline */
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"],
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"],
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Contacts"],
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] {
    border: 1px solid #e6ecf3 !important;
    box-shadow: 0 1px 2px rgba(15,30,20,.04) !important;
    background: #ffffff !important;
    background-image: none !important;
    overflow: hidden !important;
}
/* Eyebrow pill stay green, but no outer glow */
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"]::after {
    box-shadow: none !important;
}

/* R38 — store sidebar panel buttons: restore real header controls on product pages */
body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-header {
    padding: 0 0 10px !important;
}

body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-header h3.card-title,
body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-header h3.panel-title,
body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-header > h3 {
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 14px !important;
    background: var(--esa26c-surface) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16) !important;
    color: var(--esa26c-ink) !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    justify-content: flex-start !important;
}

body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-header h3 > i:first-child {
    width: 14px !important;
    text-align: center !important;
    font-size: 12px !important;
}

body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-header .card-minimise {
    float: none !important;
    margin-left: auto !important;
    font-size: 11px !important;
    opacity: .88 !important;
}

body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-header .card-minimise.minimised {
    transform: rotate(180deg) !important;
}

body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .list-group,
body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-body {
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 16px !important;
    background: var(--esa26c-surface) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18) !important;
    overflow: hidden !important;
}

html[data-theme="light"] body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-header h3.card-title,
html[data-theme="light"] body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-header h3.panel-title,
html[data-theme="light"] body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-header > h3 {
    background: linear-gradient(180deg, #ffffff, #f7fafc) !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06) !important;
}

html[data-theme="light"] body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .list-group,
html[data-theme="light"] body.page-products .sidebar > .card.card-sidebar.panel-sidebar > .card-body {
    background: #ffffff !important;
    border-color: #dfe7f1 !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05) !important;
}

/* R39 — service renewals: neutralize clientarea sidebar chrome bleed */
body.page-service-renewals #order-standard_cart .cart-sidebar {
    background: transparent !important;
    padding-right: 14px !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 18px !important;
    overflow: visible !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-header {
    padding: 0 0 10px !important;
    border: 0 !important;
    background: transparent !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-header > h3,
body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-header .panel-title,
body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-header .card-title {
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 14px !important;
    background: #121a2a !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16) !important;
    color: var(--esa26c-ink) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-header > h3 > i:first-child,
body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-header .panel-title > i:first-child,
body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-header .card-title > i:first-child {
    width: 14px !important;
    font-size: 12px !important;
    text-align: center !important;
    color: var(--esa26c-brand) !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar .card-minimise {
    margin-left: auto !important;
    float: none !important;
    font-size: 11px !important;
    opacity: .88 !important;
    color: var(--esa26c-ink-dim) !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar .card-minimise.minimised {
    transform: rotate(180deg) !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .list-group,
body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-body {
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 16px !important;
    background: #0f1724 !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18) !important;
    overflow: hidden !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar .list-group-item {
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .10) !important;
    background: transparent !important;
    color: #e7eef7 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar .list-group-item:last-child {
    border-bottom: 0 !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar .list-group-item:hover,
body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar .list-group-item.active {
    background: rgba(23, 215, 115, .08) !important;
    color: #ffffff !important;
    padding-left: 18px !important;
}

body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar .list-group-item i {
    color: var(--esa26c-brand) !important;
}

body.page-service-renewals #order-standard_cart .service-renewal h3 {
    font-size: 21px !important;
    line-height: 1.28 !important;
    color: #f3f7fb !important;
    text-align: left !important;
    margin: 0 0 8px !important;
}

body.page-service-renewals #order-standard_cart .service-renewal p,
body.page-service-renewals #order-standard_cart .service-renewal .div-renewal-period-label {
    color: #afbbca !important;
}

body.page-service-renewals #order-standard_cart #orderSummary {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.page-service-renewals #order-standard_cart .order-summary {
    background: #141c2b !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .18) !important;
    overflow: hidden !important;
}

body.page-service-renewals #order-standard_cart .order-summary h2 {
    margin: 0 !important;
    padding: 14px 18px !important;
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #05150c !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
}

body.page-service-renewals #order-standard_cart .summary-container {
    background: transparent !important;
    border: 0 !important;
    padding: 18px !important;
}

body.page-service-renewals #order-standard_cart .summary-container,
body.page-service-renewals #order-standard_cart .summary-container * {
    color: #d7e1ed !important;
}

body.page-service-renewals #order-standard_cart #btnGoToCart {
    margin-top: 14px !important;
    padding: 12px 26px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #04130a !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(23, 215, 115, .24) !important;
}

body.page-service-renewals #order-standard_cart #btnGoToCart *,
body.page-service-renewals #order-standard_cart #btnGoToCart i {
    color: #04130a !important;
}

html[data-theme="light"] body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-header > h3,
html[data-theme="light"] body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-header .panel-title,
html[data-theme="light"] body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-header .card-title {
    background: linear-gradient(180deg, #ffffff, #f7fafc) !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06) !important;
    color: #0f172a !important;
}

html[data-theme="light"] body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .list-group,
html[data-theme="light"] body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar > .card-body {
    background: #ffffff !important;
    border-color: #dfe7f1 !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05) !important;
}

html[data-theme="light"] body.page-service-renewals #order-standard_cart .cart-sidebar .panel-sidebar .list-group-item {
    color: #1f2937 !important;
    border-bottom-color: rgba(15, 23, 42, .08) !important;
}

html[data-theme="light"] body.page-service-renewals #order-standard_cart .service-renewal h3 {
    color: #0f172a !important;
}

html[data-theme="light"] body.page-service-renewals #order-standard_cart .service-renewal p,
html[data-theme="light"] body.page-service-renewals #order-standard_cart .service-renewal .div-renewal-period-label {
    color: #526276 !important;
}

html[data-theme="light"] body.page-service-renewals #order-standard_cart .order-summary {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05) !important;
}

html[data-theme="light"] body.page-service-renewals #order-standard_cart .summary-container,
html[data-theme="light"] body.page-service-renewals #order-standard_cart .summary-container * {
    color: #334155 !important;
}

/* R41 — clientarea: restore theme-specific polish after late light/dark fixes */
html[data-theme="dark"] .client-blocks > a#block,
html[data-theme="dark"] .client-blocks > a[id="block"] {
    min-height: 88px !important;
    padding: 18px 18px !important;
    gap: 14px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: linear-gradient(180deg, rgba(13, 20, 34, .98), rgba(16, 25, 42, .96)) !important;
    box-shadow: 0 18px 32px rgba(3, 8, 19, .34) !important;
    align-items: center !important;
}

html[data-theme="dark"] .client-blocks > a#block:hover,
html[data-theme="dark"] .client-blocks > a[id="block"]:hover {
    border-color: rgba(23, 215, 115, .34) !important;
    box-shadow:
        0 20px 36px rgba(3, 8, 19, .42),
        0 0 0 1px rgba(23, 215, 115, .08) !important;
}

html[data-theme="dark"] .client-blocks > a#block::after,
html[data-theme="dark"] .client-blocks > a[id="block"]::after {
    color: rgba(175, 187, 202, .62) !important;
}

html[data-theme="dark"] .client-blocks > a#block .block-icon,
html[data-theme="dark"] .client-blocks > a[id="block"] .block-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
}

html[data-theme="dark"] .client-blocks > a#block .block-content,
html[data-theme="dark"] .client-blocks > a[id="block"] .block-content {
    gap: 4px !important;
}

html[data-theme="dark"] .client-blocks > a#block .block-content .value,
html[data-theme="dark"] .client-blocks > a[id="block"] .block-content .value {
    font-size: 22px !important;
    line-height: 1.05 !important;
}

html[data-theme="dark"] .client-blocks > a#block .block-content .text,
html[data-theme="dark"] .client-blocks > a[id="block"] .block-content .text {
    font-size: 10px !important;
    letter-spacing: .11em !important;
    line-height: 1.2 !important;
    color: #afbbca !important;
}

html[data-theme="dark"] .client-blocks > a#block[data-block="antiddos"] .block-content,
html[data-theme="dark"] .client-blocks > a[id="block"][data-block="antiddos"] .block-content {
    gap: 6px !important;
}

html[data-theme="dark"] .client-blocks > a#block[data-block="antiddos"] .block-content .value,
html[data-theme="dark"] .client-blocks > a[id="block"][data-block="antiddos"] .block-content .value {
    font-size: 12px !important;
    padding: 3px 8px !important;
}

html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"],
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"],
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Contacts"],
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"]::before,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client-Balance"]::after,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"]::before,
html[data-theme="light"] .sidebar > .card.card-sidebar[menuitemname="Client Details"]::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1 {
    position: relative !important;
    padding: 24px 20px 22px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(23, 215, 115, .12), transparent 60%),
        linear-gradient(160deg, #ecfdf3 0%, #ffffff 100%) !important;
    border: 1px solid rgba(23, 215, 115, .20) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 30px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: -30px !important;
    top: -30px !important;
    width: 110px !important;
    height: 110px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(23, 215, 115, .18), transparent 70%) !important;
    pointer-events: none !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .collapsable-card-body1::after {
    content: "AVAILABLE BALANCE" !important;
    display: block !important;
    position: absolute !important;
    top: 14px !important;
    left: 20px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    color: #0f8f52 !important;
    background: rgba(23, 215, 115, .10) !important;
    border: 1px solid rgba(23, 215, 115, .20) !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1 {
    position: relative !important;
    padding: 86px 18px 18px !important;
    background:
        linear-gradient(180deg, rgba(23, 215, 115, .08) 0%, transparent 80px),
        #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client Details"] .collapsable-card-body1::before {
    content: "ZM" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #06210f !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px rgba(23, 215, 115, .28), 0 12px 24px rgba(23, 215, 115, .18) !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1 {
    padding: 22px 18px !important;
    background: #ffffff !important;
    border: 1px dashed rgba(15, 23, 42, .18) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 22px rgba(15, 23, 42, .04) !important;
    text-align: center !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .collapsable-card-body1::before {
    content: "\f0c0" !important;
    display: block !important;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 auto 8px !important;
    border-radius: 50% !important;
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    font-size: 16px !important;
    border: 1px solid rgba(23, 215, 115, .18) !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .list-group-item {
    background: transparent !important;
    border: 0 !important;
    color: #475569 !important;
    padding: 0 !important;
    text-align: center !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .collapsable-card-body1 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 22px rgba(15, 23, 42, .04) !important;
    color: #1f2937 !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item:hover {
    background: linear-gradient(135deg, rgba(23, 215, 115, .08), #ffffff) !important;
    border-color: rgba(23, 215, 115, .26) !important;
}

html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client-Balance"] .card-footer,
html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client Details"] .card-footer,
html[data-theme="light"] body .sidebar > .card.card-sidebar[menuitemname="Client Contacts"] .card-footer {
    background: transparent !important;
    border: 0 !important;
}

/* =====================================================
 *  R43 — GLASS SCROLLED NAVBAR + uniform navbar icons
 *  The theme already pins the nav on scroll via the
 *  `.header-fixed` class (JS adds it past 40px). We only
 *  restyle that scrolled state into a frosted-glass bar
 *  that matches the homepage, on both themes.
 * ===================================================== */

/* scrolled / pinned state — frosted glass, theme-aware (id+class beats legacy) */
#header-navbar.header-fixed {
    background:
        radial-gradient(1200px 220px at 50% -10%, rgba(23, 215, 115, .08), transparent 70%),
        rgba(8, 13, 24, .72) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--esa26c-line) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .34) !important;
}

html[data-theme="light"] #header-navbar.header-fixed {
    background:
        radial-gradient(1200px 220px at 50% -10%, rgba(15, 177, 95, .07), transparent 70%),
        rgba(255, 255, 255, .74) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .08) !important;
}

/* fallback where backdrop-filter is unsupported — keep it solid, not see-through */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #header-navbar.header-fixed {
        background:
            radial-gradient(1200px 220px at 50% -10%, rgba(23, 215, 115, .08), transparent 70%),
            var(--esa26c-surface) !important;
    }
    html[data-theme="light"] #header-navbar.header-fixed {
        background:
            radial-gradient(1200px 220px at 50% -10%, rgba(15, 177, 95, .07), transparent 70%),
            #ffffff !important;
    }
}

/* =====================================================
 *  R43 — PRIMARY NAVBAR ITEMS (real structure is
 *  #navbar > nav.navbar-primary > li > a, NOT a <ul>).
 *  Premium chip-hover + animated underline + clean,
 *  consistent leading icons on every item. Beats the
 *  legacy styles.css / overrides.css rules.
 * ===================================================== */
nav.navbar-primary {
    gap: 2px !important;
}

#navbar .navbar-primary > li {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#navbar .navbar-primary > li > a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: auto !important;
    padding: 9px 14px !important;
    margin: 0 1px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--esa26c-ink) !important;
    border-radius: 10px !important;
    transition: color .18s ease, background .18s ease !important;
}

/* leading icon — clean brand colour, no heavy legacy glow */
#navbar .navbar-primary > li > a > i:first-child {
    color: var(--esa26c-brand) !important;
    font-size: 15px !important;
    margin: 0 !important;
    filter: none !important;
    transition: transform .2s ease !important;
}

/* caret — subdued, rotates on open */
#navbar .navbar-primary > li > a > i.caret,
#navbar .navbar-primary > li > a > i.fa-chevron-down {
    color: var(--esa26c-ink-dim) !important;
    font-size: 11px !important;
    margin-left: 2px !important;
    filter: none !important;
    transition: transform .25s ease, color .2s ease !important;
}

/* animated underline */
#navbar .navbar-primary > li > a::after {
    content: "" !important;
    position: absolute !important;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: var(--esa26c-brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
    pointer-events: none;
}

/* hover / open state */
#navbar .navbar-primary > li:hover > a,
#navbar .navbar-primary > li.open > a {
    color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
}
#navbar .navbar-primary > li:hover > a::after,
#navbar .navbar-primary > li.open > a::after {
    transform: scaleX(1);
}
#navbar .navbar-primary > li:hover > a > i:first-child {
    transform: translateY(-1px) scale(1.08);
}
#navbar .navbar-primary > li:hover > a > i.caret,
#navbar .navbar-primary > li.open > a > i.caret,
#navbar .navbar-primary > li.open > a > i.fa-chevron-down {
    transform: rotate(180deg);
    color: var(--esa26c-brand) !important;
}

/* keep the Store "open" accent on-brand (was off-brand cyan) */
.store-nav.open > .dropdown-trigger,
.store-nav.open > .dropdown-trigger i.fa-store {
    color: var(--esa26c-brand) !important;
    text-shadow: none !important;
    filter: none !important;
}
.store-nav.open > .dropdown-trigger::after {
    background: linear-gradient(90deg, transparent, var(--esa26c-brand), transparent) !important;
    box-shadow: 0 0 12px rgba(23, 215, 115, .7) !important;
}

/* =====================================================
 *  R43 — SERVICES MINI DROPDOWN (#dropdown-small.services)
 *  Was mis-centred (left:0/right:0/margin:auto on a narrow
 *  trigger) + flat legacy styling. Anchor it under the
 *  trigger and give it a premium on-brand card.
 * ===================================================== */
#navbar .dropdown-hover #dropdown-small.services {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    width: 232px !important;
    height: auto !important;
    padding: 8px !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(420px 200px at 0% 0%, var(--esa26c-brand-soft), transparent 70%),
        linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .5) !important;
    transform: translateY(14px) !important;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s !important;
    z-index: 10000 !important;
}

html[data-theme="light"] #navbar .dropdown-hover #dropdown-small.services {
    box-shadow: 0 24px 50px rgba(15, 23, 42, .14) !important;
}

#navbar .dropdown-hover:hover #dropdown-small.services {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(4px) !important;
    transition-delay: 0s !important;
}

/* invisible hover bridge so the menu doesn't close when the cursor
   travels from "Services" down into the dropdown */
#navbar .navbar-primary > li.dropdown-hover:not(.smart)::before {
    content: "" !important;
    position: absolute !important;
    left: 0;
    right: 0;
    top: 100%;
    height: 16px;
    z-index: 9999;
}

#navbar #dropdown-small.services > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 11px !important;
    border-radius: 9px !important;
    color: var(--esa26c-ink) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    transition: background .15s ease, color .15s ease !important;
}

#navbar #dropdown-small.services > a > i:first-child {
    width: 18px !important;
    text-align: center !important;
    color: var(--esa26c-brand) !important;
    font-size: 14px !important;
    filter: none !important;
    margin: 0 !important;
}

#navbar #dropdown-small.services > a:hover {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
}

#navbar #dropdown-small.services > a:last-of-type {
    border-radius: 9px !important;
}

#navbar #dropdown-small.services .dropdown-devider {
    width: auto !important;
    margin: 5px 8px !important;
    background: var(--esa26c-line) !important;
}

/* =====================================================
 *  R47 — STORE + QUICK LINKS MEGA on the WHITE theme.
 *  Guarantees the panels read as clean light cards (no
 *  leftover dark surfaces or cyan accents) on light mode.
 * ===================================================== */
html[data-theme="light"] .store-nav .dropdown-panel.store-mega,
html[data-theme="light"] .quick-mega-nav .dropdown-panel.quick-mega {
    background:
        radial-gradient(900px 380px at 0% 0%, rgba(15, 177, 95, .05), transparent 60%),
        var(--esa26c-surface) !important;
    border-color: var(--esa26c-line-2) !important;
}

html[data-theme="light"] .store-mega .store-item,
html[data-theme="light"] .quick-mega .quick-mega-item {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    color: var(--esa26c-ink-mute) !important;
}

html[data-theme="light"] .store-mega .store-item:hover,
html[data-theme="light"] .quick-mega .quick-mega-item:hover {
    border-color: var(--esa26c-brand) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
}

html[data-theme="light"] .store-mega .store-item.is-primary {
    background: linear-gradient(145deg, rgba(15, 177, 95, .10), #ffffff) !important;
    border-color: rgba(15, 177, 95, .35) !important;
}

html[data-theme="light"] .store-mega .si-icon,
html[data-theme="light"] .quick-mega .qmi-icon {
    background: #f3f6fb !important;
    border-color: rgba(15, 23, 42, .08) !important;
}

html[data-theme="light"] .store-mega .si-title,
html[data-theme="light"] .quick-mega .qmi-text {
    color: var(--esa26c-ink) !important;
}

html[data-theme="light"] .store-mega .si-desc {
    color: var(--esa26c-ink-mute) !important;
}

/* any leftover cyan/blue accents → brand green on light */
html[data-theme="light"] .store-mega .si-icon i,
html[data-theme="light"] .quick-mega .qmi-icon i,
html[data-theme="light"] .store-mega .store-title i,
html[data-theme="light"] .quick-mega .quick-mega-title i {
    color: var(--esa26c-brand-2) !important;
}

html[data-theme="light"] .store-mega .store-title,
html[data-theme="light"] .quick-mega .quick-mega-title {
    color: var(--esa26c-ink) !important;
}

/* =====================================================
 *  R47 — small-screen safety: cap the account pill name
 *  so the full name never pushes into the hamburger / cart.
 * ===================================================== */
@media (max-width: 560px) {
    .client-userbarbtn .client-name-name {
        max-width: 104px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .client-userbarbtn {
        padding: 8px 12px !important;
    }
}

/* =====================================================
 *  R48 — DEFINITIVE footer ANPC badges: equal 2-col grid,
 *  same row, centred; remove the little green corner dots.
 *  Placed last so it beats the earlier flex/flex-basis rules.
 * ===================================================== */
#footer-advanced .footer-pro-badges {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
    align-items: stretch !important;
}
/* the "OFFICIAL LEGAL NOTICES" label is a generated ::before child —
   make it span the full row so the two badges sit equal beneath it */
#footer-advanced .footer-pro-badges::before {
    grid-column: 1 / -1 !important;
    margin-bottom: 4px !important;
}
#footer-advanced .footer-pro-badge {
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
}
#footer-advanced .footer-pro-badge::after {
    display: none !important;
}
#footer-advanced .footer-pro-badge img {
    max-width: 100% !important;
    max-height: 30px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* =====================================================
 *  R49 — remove the cyan/blue hover bar on mega items
 *  (both themes) — the user asked to drop "that blue line".
 * ===================================================== */
.store-mega .store-item::before,
.quick-mega .quick-mega-item::before {
    display: none !important;
}

/* =====================================================
 *  R49 — force the WHITE-theme Store + Quick mega onto the
 *  green palette. overrides.css ships a pink :root[data-theme
 *  =light] theme that out-specifies html[data-theme=light]
 *  (:root pseudo-class > html element), so we match :root and
 *  load later to win cleanly.
 * ===================================================== */
:root[data-theme="light"] .store-nav .dropdown-panel.store-mega,
:root[data-theme="light"] .quick-mega-nav .dropdown-panel.quick-mega,
:root[data-theme="light"] .store-mega,
:root[data-theme="light"] #mini-mega {
    background: linear-gradient(180deg, #ffffff, #f4f8fc) !important;
    border-color: rgba(15, 23, 42, .10) !important;
}
:root[data-theme="light"] .store-mega .store-item,
:root[data-theme="light"] .quick-mega .quick-mega-item {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    color: #475569 !important;
}
:root[data-theme="light"] .store-mega .store-item:hover,
:root[data-theme="light"] .quick-mega .quick-mega-item:hover {
    border-color: var(--esa26c-brand) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08) !important;
}
:root[data-theme="light"] .store-mega .store-item.is-primary {
    background: linear-gradient(145deg, rgba(15, 177, 95, .10), #ffffff) !important;
    border-color: rgba(15, 177, 95, .35) !important;
}
:root[data-theme="light"] .store-mega .si-title,
:root[data-theme="light"] .store-mega .store-title,
:root[data-theme="light"] .quick-mega .quick-mega-title,
:root[data-theme="light"] .quick-mega .qmi-text,
:root[data-theme="light"] .store-mega .store-aside-content h3,
:root[data-theme="light"] .store-mega .store-aside-content .aside-title {
    color: #0f172a !important;
}
:root[data-theme="light"] .store-mega .si-desc,
:root[data-theme="light"] .store-mega .store-aside-content p {
    color: #475569 !important;
}
:root[data-theme="light"] .store-mega .si-icon i,
:root[data-theme="light"] .quick-mega .qmi-icon i,
:root[data-theme="light"] .store-mega .store-title i,
:root[data-theme="light"] .quick-mega .quick-mega-title i {
    color: var(--esa26c-brand-2) !important;
}
:root[data-theme="light"] .store-mega .si-icon,
:root[data-theme="light"] .quick-mega .qmi-icon {
    background: #f3f6fb !important;
    border-color: rgba(15, 23, 42, .08) !important;
}
:root[data-theme="light"] .store-mega .store-aside-inner {
    background: linear-gradient(160deg, rgba(15, 177, 95, .10), #f3f6fb 70%) !important;
    border-color: rgba(15, 177, 95, .22) !important;
}
:root[data-theme="light"] .store-mega .aside-label {
    background: var(--esa26c-brand) !important;
    color: #04130a !important;
}
:root[data-theme="light"] .store-mega .tag,
:root[data-theme="light"] .quick-mega .tag {
    background: rgba(15, 177, 95, .12) !important;
    color: var(--esa26c-brand-2) !important;
    border: 1px solid rgba(15, 177, 95, .30) !important;
}
:root[data-theme="light"] .store-mega .security-orb {
    background:
        radial-gradient(circle at 45% 25%, rgba(255, 255, 255, .9), transparent 55%),
        radial-gradient(circle at 70% 85%, rgba(15, 177, 95, .35), transparent 70%),
        radial-gradient(circle, #eaf6ef 0, #d6efe0 70%) !important;
    box-shadow: 0 0 40px rgba(15, 177, 95, .25), inset 0 0 30px rgba(255, 255, 255, .4) !important;
}
:root[data-theme="light"] .store-mega .ring-outer,
:root[data-theme="light"] .store-mega .ring-inner {
    border-color: rgba(15, 177, 95, .55) !important;
}
:root[data-theme="light"] .store-mega .orb-node {
    background: var(--esa26c-brand-2) !important;
    box-shadow: 0 0 12px rgba(15, 177, 95, .7) !important;
}
:root[data-theme="light"] .store-mega .orb-scan {
    background: conic-gradient(from 0deg, rgba(15, 177, 95, 0) 0deg, rgba(15, 177, 95, .30) 28deg, rgba(15, 177, 95, 0) 90deg, transparent 360deg) !important;
}
:root[data-theme="light"] .store-mega .security-orb > i {
    color: var(--esa26c-brand-2) !important;
    text-shadow: 0 0 14px rgba(15, 177, 95, .5) !important;
}
:root[data-theme="light"] #dropdown-small a:hover {
    background: rgba(15, 177, 95, .10) !important;
    color: var(--esa26c-brand-2) !important;
}

/* =====================================================
 *  R50 — CLIENT DASHBOARD stat tiles: kill the rainbow,
 *  rebuild as cohesive premium green tiles, icon + figures
 *  grouped left, hover lift + accent line. Last = wins.
 * ===================================================== */
.client-blocks > a#block {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.client-blocks > a#block::before {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px !important;
    width: auto !important;
    background: linear-gradient(90deg, transparent, var(--esa26c-brand), transparent) !important;
    opacity: 0 !important;
    border-radius: 999px;
    transition: opacity .2s ease !important;
    filter: none !important;
}
.client-blocks > a#block:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(23, 215, 115, .40) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .32), 0 0 0 1px rgba(23, 215, 115, .15) !important;
}
.client-blocks > a#block:hover::before { opacity: .85 !important; }

/* uniform green icon tile — overrides every per-block colour */
.client-blocks > a#block .block-icon,
.client-blocks > a#block[data-block] .block-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(23, 215, 115, .22), rgba(15, 177, 95, .08)) !important;
    border: 1px solid rgba(23, 215, 115, .30) !important;
    box-shadow: 0 6px 16px rgba(23, 215, 115, .18) !important;
}
.client-blocks > a#block .block-icon ion-icon,
.client-blocks > a#block[data-block] .block-icon ion-icon {
    color: var(--esa26c-brand) !important;
    font-size: 22px !important;
}

/* figures grouped to the left, value big, label uppercase */
.client-blocks > a#block .block-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}
.client-blocks > a#block .block-content .value {
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    color: var(--esa26c-ink) !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}
.client-blocks > a#block .block-content .text {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--esa26c-ink-dim) !important;
}

/* the Anti-DDoS "Alpha" tile: green pill, no purple */
.client-blocks > a#block[data-block="antiddos"] .block-content .value {
    color: var(--esa26c-brand) !important;
    background: rgba(23, 215, 115, .12) !important;
    border: 1px solid rgba(23, 215, 115, .30) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 3px 11px !important;
    border-radius: 999px !important;
    letter-spacing: .06em !important;
}

html[data-theme="light"] .client-blocks > a#block {
    background: linear-gradient(160deg, #ffffff, var(--esa26c-surface-2)) !important;
    border-color: rgba(15, 23, 42, .10) !important;
}
html[data-theme="light"] .client-blocks > a#block:hover {
    box-shadow: 0 16px 36px rgba(15, 23, 42, .10), 0 0 0 1px rgba(15, 177, 95, .15) !important;
}

/* =====================================================
 *  R50 — UNIFY every client-dashboard widget card onto the
 *  green palette (kills the per-panel red/amber/blue/pink/
 *  purple WHMCS colours). Matches the existing high-specificity
 *  body-scoped selectors and loads last, so green wins.
 * ===================================================== */
/* accent top line → green, neutral border */
body.page-clientareahome .client-home-cards .cardArea-header[class*="card-accent-"] {
    border-top-color: var(--esa26c-line) !important;
}
body.page-clientareahome .client-home-cards .cardArea-header[class*="card-accent-"]::before {
    background: linear-gradient(90deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
}
/* header icons → green */
body.page-clientareahome .client-home-cards i[class*="cardIcon-"] {
    color: var(--esa26c-brand) !important;
}
/* card buttons → green pill (beats per-panel amber/pink overrides) */
body.page-clientareahome .client-home-cards [menuitemname] [class*="cardButton-"],
body.page-clientareahome .client-home-cards [menuitemname] .card-button,
body.page-clientareahome .client-home-cards .cardArea-group-invoices .card-button {
    background: var(--esa26c-brand-soft) !important;
    background-image: none !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23, 215, 115, .30) !important;
    box-shadow: none !important;
}
body.page-clientareahome .client-home-cards [menuitemname] [class*="cardButton-"]:hover,
body.page-clientareahome .client-home-cards [menuitemname] .card-button:hover,
body.page-clientareahome .client-home-cards .cardArea-group-invoices .card-button:hover {
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #06210f !important;
    transform: translateY(-1px) !important;
}
/* badges inside card headers → green */
body.page-clientareahome .client-home-cards .cardArea-title .badge {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23, 215, 115, .30) !important;
}
/* premium card shell + hover lift, unified */
body.page-clientareahome .client-home-cards .cardArea-group {
    background: linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 18px !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
body.page-clientareahome .client-home-cards .cardArea-group:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(23, 215, 115, .30) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .30) !important;
}
html[data-theme="light"] body.page-clientareahome .client-home-cards .cardArea-group {
    background: linear-gradient(160deg, #ffffff, var(--esa26c-surface-2)) !important;
    border-color: rgba(15, 23, 42, .10) !important;
}
html[data-theme="light"] body.page-clientareahome .client-home-cards .cardArea-group:hover {
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10) !important;
}

/* =====================================================
 *  R51 — FULL-WIDTH BENTO CLIENT DASHBOARD (total overhaul)
 *  Drops the WHMCS sidebar, goes edge-to-edge, lays the
 *  account out as a spacious bento grid. Both themes.
 * ===================================================== */
/* full width: hide sidebar, force the dashboard column to span everything.
   Uses :has(.esa-dash) so it works regardless of body class, and forces the
   row/column off flex onto block so nothing can keep it narrow. */
#main-body .row:has(.esa-dash) {
    display: block !important;
    margin: 0 !important;
}
#main-body .row:has(.esa-dash) > [class*="col-"]:not(:has(.esa-dash)),
#main-body .row:has(.esa-dash) > .sidebar,
body.page-clientareahome #main-body .row > .col-lg-4.col-xl-3,
body.page-clientareahome #main-body .row > div.col-lg-4 {
    display: none !important;
}
#main-body .row:has(.esa-dash) > [class*="col-"]:has(.esa-dash),
#main-body .row:has(.esa-dash) > .primary-content,
body.page-clientareahome #main-body .primary-content {
    display: block !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
#main-body > .page-container:has(.esa-dash),
body.page-clientareahome #main-body > .page-container {
    max-width: 1720px !important;
    width: 100% !important;
}
body.page-clientareahome #main-body {
    padding: 26px 0 60px !important;
}
#breadcrumb > .page-container:has(.bread-links),
body.page-clientareahome #breadcrumb > .page-container {
    max-width: 1720px !important;
}

.esa-dash { --g: 18px; color: var(--esa26c-ink); width: 100%; }

.esa-bento {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(150px, auto);
    gap: var(--g);
    margin-bottom: var(--g);
}
.esa-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2));
    border: 1px solid var(--esa26c-line-2);
    border-radius: 20px;
    padding: 22px;
    color: var(--esa26c-ink);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
html[data-theme="light"] .esa-tile {
    background: linear-gradient(160deg, #ffffff, var(--esa26c-surface-2));
    border-color: rgba(15, 23, 42, .10);
}
a.esa-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(23, 215, 115, .40);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
}
html[data-theme="light"] a.esa-tile:hover {
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
}
.esa-tile-glow {
    position: absolute;
    width: 340px; height: 340px;
    right: -120px; top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 215, 115, .18), transparent 70%);
    pointer-events: none;
}

.esa-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--esa26c-brand);
}
.esa-eyebrow ion-icon { font-size: 15px; }

.esa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 12px; font-weight: 700; font-size: 14px;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.esa-btn ion-icon { font-size: 17px; }
.esa-btn-primary { background: var(--esa26c-brand); color: #04130a; box-shadow: 0 10px 24px rgba(23, 215, 115, .28); }
.esa-btn-primary:hover { background: var(--esa26c-brand-2); transform: translateY(-1px); color: #04130a; }
.esa-btn-ghost { background: transparent; color: var(--esa26c-ink); border: 1px solid var(--esa26c-line-2); }
.esa-btn-ghost:hover { border-color: var(--esa26c-brand); color: var(--esa26c-brand); }
.esa-btn-block { width: 100%; margin-top: auto; }

/* balance — big 2x2 */
.esa-tile-balance { grid-column: span 2; grid-row: span 2; justify-content: center; }
.esa-balance { font-size: clamp(34px, 4vw, 52px); font-weight: 800; line-height: 1.04; margin: 14px 0 8px; color: var(--esa26c-ink); }
.esa-balance-note { font-size: 13.5px; color: var(--esa26c-ink-mute); max-width: 380px; margin: 0 0 22px; }
.esa-tile-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.esa-tile-actions .esa-btn { flex: 0 0 auto; }

/* stat tiles */
.esa-stat { justify-content: space-between; }
.esa-stat-ic {
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(23, 215, 115, .22), rgba(15, 177, 95, .08));
    border: 1px solid rgba(23, 215, 115, .30); color: var(--esa26c-brand);
}
.esa-stat-ic ion-icon { font-size: 22px; }
.esa-stat-num { font-size: 34px; font-weight: 800; line-height: 1.05; margin-top: 12px; color: var(--esa26c-ink); }
.esa-stat-lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--esa26c-ink-dim); }
.esa-stat-go { position: absolute; right: 18px; top: 22px; font-size: 16px; color: var(--esa26c-ink-dim); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.esa-stat:hover .esa-stat-go { opacity: 1; color: var(--esa26c-brand); transform: translateX(2px); }
.esa-stat-alert .esa-stat-num { color: #fb7185; }
.esa-stat-alert .esa-stat-ic { background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .30); color: #fb7185; }

/* DDoS featured — wide 2x1 */
.esa-tile-ddos { grid-column: span 2; flex-direction: row; align-items: center; gap: 18px; }
.esa-ddos-ic {
    width: 58px; height: 58px; flex-shrink: 0; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)); color: #04130a;
    box-shadow: 0 10px 26px rgba(23, 215, 115, .3);
}
.esa-ddos-ic ion-icon { font-size: 30px; }
.esa-ddos-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.esa-badge-alpha {
    align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--esa26c-brand); background: var(--esa26c-brand-soft);
    border: 1px solid rgba(23, 215, 115, .3); padding: 2px 9px; border-radius: 999px;
}
.esa-ddos-copy strong { font-size: 18px; color: var(--esa26c-ink); }
.esa-ddos-copy p { font-size: 13px; color: var(--esa26c-ink-mute); margin: 0; }
.esa-ddos-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--esa26c-brand); white-space: nowrap; }
.esa-ddos-go ion-icon { font-size: 16px; }

/* profile */
.esa-tile-profile { align-items: center; text-align: center; }
.esa-avatar {
    width: 64px; height: 64px; border-radius: 50%; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; color: #04130a; text-transform: uppercase;
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2));
}
.esa-profile-name { font-size: 16px; color: var(--esa26c-ink); margin-bottom: 4px; }
.esa-profile-meta { font-size: 12.5px; color: var(--esa26c-ink-mute); line-height: 1.5; }
.esa-tile-profile .esa-btn { margin-top: 16px; }

/* quick actions */
.esa-tile-actions .esa-eyebrow { margin-bottom: 14px; }
.esa-action {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px;
    color: var(--esa26c-ink); font-size: 13.5px; font-weight: 600; text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.esa-action ion-icon:first-child { font-size: 18px; color: var(--esa26c-brand); }
.esa-action .go { margin-left: auto; font-size: 15px; color: var(--esa26c-ink-dim); }
.esa-action:hover { background: var(--esa26c-brand-soft); color: var(--esa26c-brand); }
.esa-action:hover .go { color: var(--esa26c-brand); }

.esa-dash-panels { margin-top: 4px; }

/* responsive */
@media (max-width: 1024px) {
    .esa-bento { grid-template-columns: repeat(2, 1fr); }
    .esa-tile-balance { grid-column: span 2; grid-row: auto; }
    .esa-tile-ddos { grid-column: span 2; }
}
@media (max-width: 560px) {
    .esa-bento { gap: 12px; }
    .esa-tile { padding: 18px; border-radius: 16px; }
    .esa-tile-ddos { flex-direction: column; align-items: flex-start; }
    .esa-tile-profile, .esa-tile-actions { grid-column: span 2; }
    .esa-stat-num { font-size: 28px; }
}

/* safety net: the WHMCS panels section must fill the full width too
   (fixes the empty gap on the right under the bento) */
.esa-dash .client-home-cards,
.esa-dash .client-home-cards > .row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* panels container = full-width grid host */
.esa-dash .client-home-cards > .row > .client-home-panels,
.esa-dash .client-home-cards > .row > .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* panel cards adopt the bento radius + premium surface */
.esa-dash .client-home-cards .cardArea-group {
    border-radius: 20px !important;
    margin-bottom: var(--g, 18px) !important;
}
.esa-dash .client-home-cards .cardArea-header {
    padding: 18px 22px !important;
}
.esa-dash .client-home-cards .cardArea-group .card-body {
    padding: 6px 10px !important;
}

/* aggressive: whatever wrapper #main-body uses around the dashboard,
   force it to the wide container width so nothing stays narrow */
#main-body:has(.esa-dash) {
    display: block !important;
    padding: 26px 0 60px !important;
}
#main-body:has(.esa-dash) > * {
    max-width: 1720px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* =====================================================
 *  R55 — last green sweeps on the panels: header icons
 *  (tickets blue / billing) + the Billing Overview panel
 *  that was still shipping the pink theme.
 * ===================================================== */
body.page-clientareahome .client-home-cards .cardArea-title .__title i,
body.page-clientareahome .client-home-cards .cardArea-header i[class*="cardIcon-"],
.esa-dash .client-home-cards .cardArea-title .__title i {
    color: var(--esa26c-brand) !important;
}
/* Billing Overview (invoicePanel) → green */
.esa-dash .client-home-cards .cardArea-group-invoices .invoicePanel-main,
.client-home-cards .cardArea-group-invoices .invoicePanel-main {
    background: linear-gradient(180deg, var(--esa26c-brand-soft), rgba(23, 215, 115, .03)) !important;
    border-color: rgba(23, 215, 115, .30) !important;
}
.esa-dash .client-home-cards .cardArea-group-invoices .invoicePanel-kicker,
.esa-dash .client-home-cards .cardArea-group-invoices .invoicePanel-count,
.client-home-cards .cardArea-group-invoices .invoicePanel-kicker,
.client-home-cards .cardArea-group-invoices .invoicePanel-count {
    color: var(--esa26c-brand) !important;
}
.esa-dash .client-home-cards .cardArea-group-invoices .invoicePanel-btn-primary,
.client-home-cards .cardArea-group-invoices .invoicePanel-btn-primary {
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    box-shadow: 0 8px 18px rgba(23, 215, 115, .28) !important;
    color: #04130a !important;
}
.esa-dash .client-home-cards .cardArea-group-invoices .invoicePanel-btn-primary:hover,
.client-home-cards .cardArea-group-invoices .invoicePanel-btn-primary:hover {
    color: #04130a !important;
    box-shadow: 0 12px 26px rgba(23, 215, 115, .42) !important;
}
.esa-dash .client-home-cards .cardArea-group-invoices .invoicePanel-btn-secondary,
.client-home-cards .cardArea-group-invoices .invoicePanel-btn-secondary {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border-color: rgba(23, 215, 115, .28) !important;
}
/* ticket status pills: keep readable but on-brand neutral */
.esa-dash .client-home-cards .list-group-item .label,
.esa-dash .client-home-cards .list-group-item .badge {
    background: var(--esa26c-surface-2) !important;
    color: var(--esa26c-ink-mute) !important;
    border: 1px solid var(--esa26c-line-2) !important;
}

/* =====================================================
 *  R56 — CUSTOM panel rows: turn the WHMCS list rows into
 *  spaced, rounded "card rows" with hover — so the panels
 *  read as a custom dashboard, not a WHMCS list.
 * ===================================================== */
.esa-dash .client-home-cards .card-body,
.esa-dash .client-home-cards .list-group {
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
/* each row → rounded card */
.esa-dash .client-home-cards .list-group-item,
.esa-dash .client-home-cards .div-service-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: var(--esa26c-bg) !important;
    border: 1px solid var(--esa26c-line) !important;
    border-top: 1px solid var(--esa26c-line) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.esa-dash .client-home-cards .list-group-item:hover,
.esa-dash .client-home-cards .div-service-item:hover {
    border-color: rgba(23, 215, 115, .40) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28) !important;
    background: var(--esa26c-bg) !important;
    padding-left: 16px !important;
}
html[data-theme="light"] .esa-dash .client-home-cards .list-group-item:hover,
html[data-theme="light"] .esa-dash .client-home-cards .div-service-item:hover {
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08) !important;
}
/* service name block */
.esa-dash .client-home-cards .div-service-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.esa-dash .client-home-cards .div-service-name .font-weight-bold { color: var(--esa26c-ink) !important; font-weight: 700 !important; font-size: 14px !important; }
.esa-dash .client-home-cards .div-service-name .text-domain { color: var(--esa26c-ink-mute) !important; font-size: 12.5px !important; }
.esa-dash .client-home-cards .div-service-status { order: -1; flex-shrink: 0; }
.esa-dash .client-home-cards .div-service-buttons { margin-left: auto !important; }
/* status label → green pill */
.esa-dash .client-home-cards .div-service-status .label-active,
.esa-dash .client-home-cards .div-service-status .label-success,
.esa-dash .client-home-cards .label.label-active {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23, 215, 115, .30) !important;
    border-radius: 999px !important;
    padding: 4px 11px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}
.esa-dash .client-home-cards .div-service-status .label-placeholder { display: none !important; }
/* custom buttons inside panels */
.esa-dash .client-home-cards .btn,
.esa-dash .client-home-cards .div-service-buttons .btn,
.esa-dash .client-home-cards .list-group-item .btn {
    background: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    color: var(--esa26c-ink) !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    box-shadow: none !important;
    transition: border-color .16s ease, color .16s ease, background .16s ease !important;
}
.esa-dash .client-home-cards .btn:hover,
.esa-dash .client-home-cards .div-service-buttons .btn:hover {
    border-color: var(--esa26c-brand) !important;
    color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
}

/* =====================================================
 *  R57 — panels = custom 2-column masonry (not WHMCS stack)
 *  + fix the active-service row overlap (absolute label).
 * ===================================================== */
.esa-dash .client-home-cards .client-home-panels {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    align-items: start !important;
}
.esa-dash .client-home-cards .client-home-panels > .cardArea-group {
    margin: 0 !important;
    width: auto !important;
    align-self: stretch;
}
@media (max-width: 900px) {
    .esa-dash .client-home-cards .client-home-panels { grid-template-columns: 1fr !important; }
}

/* widen the navbar + welcome bar to match the dashboard ONLY on the
   client area, so the whole page is symmetric at the wider width */
body.page-clientareahome #header-navbar > .page-container {
    max-width: 1720px !important;
}
/* fix active-service row: static labels, clean flex, no overlap */
.esa-dash .client-home-cards .div-service-item { flex-wrap: wrap; }
.esa-dash .client-home-cards .div-service-status { position: relative !important; display: inline-flex !important; align-items: center !important; }
.esa-dash .client-home-cards .div-service-status .label { position: static !important; }
.esa-dash .client-home-cards .div-service-status .label-placeholder { display: none !important; }

/* =====================================================
 *  R58 — UNIQUE panel cards (move away from WHMCS look):
 *  left green accent bar, tile icons, soft gradient surface.
 * ===================================================== */
.esa-dash .client-home-cards .cardArea-group {
    position: relative !important;
    background: linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}
html[data-theme="light"] .esa-dash .client-home-cards .cardArea-group {
    background: linear-gradient(160deg, #ffffff, var(--esa26c-surface-2)) !important;
    border-color: rgba(15, 23, 42, .10) !important;
}
/* left accent bar replaces the WHMCS top line */
.esa-dash .client-home-cards .cardArea-group::before {
    content: "" !important;
    position: absolute !important;
    left: 0; top: 16px; bottom: 16px;
    width: 3px; height: auto !important;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    z-index: 2;
}
.esa-dash .client-home-cards .cardArea-header[class*="card-accent-"]::before {
    display: none !important;
}
.esa-dash .client-home-cards .cardArea-header {
    border-bottom: 1px solid var(--esa26c-line) !important;
    padding: 16px 22px 16px 26px !important;
    background: transparent !important;
}
/* header icon → rounded gradient tile */
.esa-dash .client-home-cards .cardArea-title .__title {
    gap: 12px !important;
    font-size: 12.5px !important;
    letter-spacing: .12em !important;
}
.esa-dash .client-home-cards .cardArea-title .__title i[class*="cardIcon-"] {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--esa26c-brand-soft) !important;
    border: 1px solid rgba(23, 215, 115, .25) !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
/* card buttons in header → clean ghost pills */
.esa-dash .client-home-cards .cardTitle-button .card-button {
    border-radius: 10px !important;
    padding: 8px 14px !important;
}

/* =====================================================
 *  R59 — FORCE the panels into a real 2-col grid (beat the
 *  earlier display:block safety net) + make the cards read
 *  like the bento tiles (clean, no left bar). + fill width.
 * ===================================================== */
.esa-dash .client-home-cards > .row > .client-home-panels,
.esa-dash .client-home-cards .client-home-panels {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
}
.esa-dash .client-home-cards > .row > .client-home-panels > .cardArea-group {
    margin: 0 !important;
    width: auto !important;
}
@media (max-width: 900px) {
    .esa-dash .client-home-cards > .row > .client-home-panels,
    .esa-dash .client-home-cards .client-home-panels {
        grid-template-columns: 1fr !important;
    }
}
/* clean bento-style cards (drop the left accent bar) */
.esa-dash .client-home-cards .cardArea-group::before { display: none !important; }
.esa-dash .client-home-cards .cardArea-group {
    border-radius: 20px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22) !important;
}
html[data-theme="light"] .esa-dash .client-home-cards .cardArea-group {
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}
.esa-dash .client-home-cards .cardArea-header {
    border-bottom: 0 !important;
    padding: 20px 24px 6px !important;
}
.esa-dash .client-home-cards .card-body {
    padding: 6px 24px 22px !important;
}

/* =====================================================
 *  R60 — custom active-service row (icon | name | status |
 *  actions) — replaces the broken WHMCS overlap layout.
 * ===================================================== */
.esa-dash .client-home-cards .div-service-item.esa-svc {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    text-align: left !important;
}
.esa-dash .client-home-cards .esa-svc .esa-svc-ic {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--esa26c-brand-soft) !important;
    border: 1px solid rgba(23, 215, 115, .25) !important;
    color: var(--esa26c-brand) !important;
    font-size: 18px !important;
    order: 0 !important;
}
.esa-dash .client-home-cards .esa-svc .div-service-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    order: 0 !important;
    align-items: flex-start !important;
}
.esa-dash .client-home-cards .esa-svc .div-service-status {
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: static !important;
    order: 0 !important;
    width: auto !important;
}
.esa-dash .client-home-cards .esa-svc .div-service-buttons {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    order: 0 !important;
}

/* =====================================================
 *  R61 — unify ALL client-area panel buttons + domain
 *  register/transfer + ticket badges onto green, BOTH themes
 *  (beats the legacy :root[data-theme=light] colour rules).
 * ===================================================== */
.esa-dash .client-home-cards .cardTitle-button .card-button,
.esa-dash .client-home-cards [class*="cardButton-"],
:root[data-theme="light"] .esa-dash .client-home-cards .cardTitle-button .card-button,
:root[data-theme="light"] .esa-dash .client-home-cards [class*="cardButton-"] {
    background: var(--esa26c-brand-soft) !important;
    background-image: none !important;
    color: var(--esa26c-brand-2) !important;
    border: 1px solid rgba(23, 215, 115, .32) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 10px !important;
}
.esa-dash .client-home-cards .cardTitle-button .card-button:hover,
.esa-dash .client-home-cards [class*="cardButton-"]:hover,
:root[data-theme="light"] .esa-dash .client-home-cards [class*="cardButton-"]:hover {
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #04130a !important;
}
/* domain Register / Transfer + any coloured panel btn → on-brand */
.esa-dash .client-home-cards .card-body .btn,
:root[data-theme="light"] .esa-dash .client-home-cards .card-body .btn {
    background: var(--esa26c-brand-soft) !important;
    background-image: none !important;
    border: 1px solid rgba(23, 215, 115, .30) !important;
    color: var(--esa26c-brand-2) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.esa-dash .client-home-cards .card-body .btn:hover,
:root[data-theme="light"] .esa-dash .client-home-cards .card-body .btn:hover {
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #04130a !important;
    border-color: var(--esa26c-brand) !important;
}
/* the primary domain button (first) stays solid green for hierarchy */
.esa-dash .client-home-cards .card-body .btn:first-child,
:root[data-theme="light"] .esa-dash .client-home-cards .card-body .btn:first-child {
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #04130a !important;
    border-color: var(--esa26c-brand) !important;
}
/* ticket "Closed/Open" status badges → neutral on both themes */
.esa-dash .client-home-cards .list-group-item .label,
.esa-dash .client-home-cards .list-group-item .badge,
:root[data-theme="light"] .esa-dash .client-home-cards .list-group-item .label,
:root[data-theme="light"] .esa-dash .client-home-cards .list-group-item .badge {
    background: var(--esa26c-surface-2) !important;
    color: var(--esa26c-ink-mute) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    box-shadow: none !important;
}

/* =====================================================
 *  R62 — DRAMATIC restyle: make panels read like bento
 *  widgets, not WHMCS cards. Big gradient icon squares,
 *  arrow-link headers, corner glow, compact alert cards.
 * ===================================================== */
/* corner glow like the balance card */
.esa-dash .client-home-cards .cardArea-group::after {
    content: "" !important;
    position: absolute !important;
    width: 300px; height: 300px;
    right: -120px; top: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 215, 115, .12), transparent 70%);
    pointer-events: none;
    z-index: 0;
    display: block !important;
}
html[data-theme="light"] .esa-dash .client-home-cards .cardArea-group::after {
    background: radial-gradient(circle, rgba(15, 177, 95, .10), transparent 70%);
}
.esa-dash .client-home-cards .cardArea-header,
.esa-dash .client-home-cards .card-body { position: relative; z-index: 1; }

/* icon → big green GRADIENT square, white glyph (bento language) */
.esa-dash .client-home-cards .cardArea-title .__title i[class*="cardIcon-"] {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    border: 0 !important;
    color: #04130a !important;
    font-size: 19px !important;
    box-shadow: 0 8px 22px rgba(23, 215, 115, .32) !important;
}
.esa-dash .client-home-cards .cardArea-title .__title {
    font-size: 13px !important;
    letter-spacing: .08em !important;
    gap: 14px !important;
    align-items: center !important;
}

/* header button → minimal arrow link (not a pill) */
.esa-dash .client-home-cards .cardTitle-button .card-button,
:root[data-theme="light"] .esa-dash .client-home-cards .cardTitle-button .card-button {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: var(--esa26c-brand) !important;
    padding: 6px 2px !important;
    box-shadow: none !important;
    letter-spacing: .08em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.esa-dash .client-home-cards .cardTitle-button .card-button::after {
    content: "\2192";
    font-weight: 800;
    font-size: 14px;
    transition: transform .18s ease;
}
.esa-dash .client-home-cards .cardTitle-button .card-button:hover,
:root[data-theme="light"] .esa-dash .client-home-cards .cardTitle-button .card-button:hover {
    background: transparent !important;
    color: var(--esa26c-brand-2) !important;
}
.esa-dash .client-home-cards .cardTitle-button .card-button:hover::after {
    transform: translateX(3px);
}

/* compact alert cards (overdue / domains): tighter, no empty void */
.esa-dash .client-home-cards .cardArea-group .card-body p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--esa26c-ink-mute) !important;
    margin: 0 !important;
}
.esa-dash .client-home-cards .cardArea-header {
    padding: 22px 24px 10px !important;
}
.esa-dash .client-home-cards .card-body {
    padding: 0 24px 22px !important;
}

/* hover lift on the whole widget */
.esa-dash .client-home-cards .cardArea-group {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.esa-dash .client-home-cards .cardArea-group:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(23, 215, 115, .35) !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .30) !important;
}
html[data-theme="light"] .esa-dash .client-home-cards .cardArea-group:hover {
    box-shadow: 0 22px 50px rgba(15, 23, 42, .10) !important;
}

/* =====================================================
 *  R63 — FLAT MINIMAL panels (chosen direction). One large
 *  surface, sections divided by hairlines, no card boxes,
 *  big type, arrow links. Fresh classes = zero WHMCS conflict.
 * ===================================================== */
.esa-dash .client-home-cards > .row > .client-home-panels,
.esa-dash .client-home-cards .client-home-panels {
    display: block !important;
    grid-template-columns: none !important;
    background: linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 22px !important;
    padding: 4px 34px !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .22) !important;
}
html[data-theme="light"] .esa-dash .client-home-cards .client-home-panels {
    background: linear-gradient(160deg, #ffffff, var(--esa26c-surface-2)) !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .06) !important;
}

.esa-dash .esa-flat { padding: 30px 0 !important; border-bottom: 1px solid var(--esa26c-line) !important; margin: 0 !important; width: auto !important; }
.esa-dash .esa-flat:last-child { border-bottom: 0 !important; }
.esa-dash .esa-flat-head { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.esa-dash .esa-flat-title { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--esa26c-ink); margin: 0; }
.esa-dash .esa-flat-title i { color: var(--esa26c-brand); font-size: 18px; }
.esa-dash .esa-flat-badge { font-size: 10px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--esa26c-brand-soft); color: var(--esa26c-brand); border: 1px solid rgba(23, 215, 115, .3); }
.esa-dash .esa-flat-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--esa26c-brand); text-decoration: none; white-space: nowrap; }
.esa-dash .esa-flat-link i { transition: transform .18s ease; }
.esa-dash .esa-flat-link:hover { color: var(--esa26c-brand-2); }
.esa-dash .esa-flat-link:hover i { transform: translateX(3px); }
.esa-dash .esa-flat-body { color: var(--esa26c-ink-mute); font-size: 14.5px; line-height: 1.65; }
.esa-dash .esa-flat-body p { margin: 0; color: var(--esa26c-ink-mute); }
.esa-dash .esa-flat-body b { color: var(--esa26c-ink); }

/* list rows (tickets / generic children) */
.esa-dash .esa-flat-list { display: flex; flex-direction: column; }
.esa-dash .esa-flat-row { display: flex !important; align-items: center; gap: 12px; padding: 15px 0 !important; border-top: 1px solid var(--esa26c-line) !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; color: var(--esa26c-ink) !important; text-decoration: none; font-size: 14px; transform: none !important; transition: color .15s ease, padding-left .15s ease; }
.esa-dash .esa-flat-row:first-child { border-top: 0 !important; }
.esa-dash .esa-flat-row > i { color: var(--esa26c-brand); font-size: 15px; flex-shrink: 0; }
.esa-dash .esa-flat-row > span { flex: 1; min-width: 0; }
.esa-dash .esa-flat-row .esa-flat-badge { margin-left: auto; }
.esa-dash a.esa-flat-row:hover { color: var(--esa26c-brand) !important; padding-left: 6px !important; }

/* billing block */
.esa-dash .esa-flat-billing { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.esa-dash .esa-flat-billing-num { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 130px; padding: 20px 24px; border-radius: 16px; background: var(--esa26c-bg); border: 1px solid var(--esa26c-line); }
.esa-dash .esa-flat-billing-num strong { font-size: 40px; font-weight: 800; color: var(--esa26c-brand); line-height: 1; }
.esa-dash .esa-flat-billing-num span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--esa26c-ink-dim); margin-top: 7px; }
.esa-dash .esa-flat-billing-copy { flex: 1; min-width: 240px; }
.esa-dash .esa-flat-billing-copy p { color: var(--esa26c-ink-mute); font-size: 14px; margin: 0 0 14px; }
.esa-dash .esa-flat-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.esa-dash .esa-flat-btn { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 11px; font-size: 13px; font-weight: 700; text-decoration: none; background: transparent; border: 1px solid var(--esa26c-line-2); color: var(--esa26c-ink); transition: border-color .16s ease, color .16s ease, background .16s ease; }
.esa-dash .esa-flat-btn:hover { border-color: var(--esa26c-brand); color: var(--esa26c-brand); }
.esa-dash .esa-flat-btn-primary { background: var(--esa26c-brand); border-color: var(--esa26c-brand); color: #04130a; }
.esa-dash .esa-flat-btn-primary:hover { background: var(--esa26c-brand-2); color: #04130a; border-color: var(--esa26c-brand-2); }

/* body content from WHMCS (active services rows) → flat rows */
.esa-dash .esa-flat-body .div-service-item { display: flex !important; align-items: center !important; gap: 14px !important; padding: 15px 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--esa26c-line) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; flex-wrap: nowrap !important; }
.esa-dash .esa-flat-body .div-service-item:first-child { border-top: 0 !important; }
.esa-dash .esa-flat-body .esa-svc-ic { width: 38px !important; height: 38px !important; border-radius: 11px !important; }
/* register-domain form + buttons → flat */
.esa-dash .esa-flat-body .btn { background: transparent !important; background-image: none !important; border: 1px solid var(--esa26c-line-2) !important; color: var(--esa26c-ink) !important; border-radius: 11px !important; font-weight: 700 !important; box-shadow: none !important; }
.esa-dash .esa-flat-body .btn:first-child { background: var(--esa26c-brand) !important; border-color: var(--esa26c-brand) !important; color: #04130a !important; }
.esa-dash .esa-flat-body .btn:hover { border-color: var(--esa26c-brand) !important; color: var(--esa26c-brand) !important; }
.esa-dash .esa-flat-body .btn:first-child:hover { background: var(--esa26c-brand-2) !important; color: #04130a !important; }
.esa-dash .esa-flat-body input[type="text"], .esa-dash .esa-flat-body input:not([type]) { background: var(--esa26c-bg) !important; border: 1px solid var(--esa26c-line) !important; border-radius: 11px !important; color: var(--esa26c-ink) !important; }

/* =====================================================
 *  R64 — Billingsy-style dashboard widgets, ESA green:
 *  patterned stat tiles + activity chart + account donut.
 * ===================================================== */
/* decorative dot pattern on the stat tiles */
.esa-stat { position: relative; overflow: hidden; }
.esa-stat::before {
    content: ""; position: absolute; right: -8px; top: -8px;
    width: 100px; height: 100px;
    background-image: radial-gradient(rgba(23, 215, 115, .20) 1.6px, transparent 1.6px);
    background-size: 12px 12px;
    -webkit-mask-image: radial-gradient(64px 64px at 100% 0, #000, transparent 75%);
    mask-image: radial-gradient(64px 64px at 100% 0, #000, transparent 75%);
    pointer-events: none; z-index: 0;
}
.esa-stat .esa-stat-ic,
.esa-stat .esa-stat-num,
.esa-stat .esa-stat-lbl { position: relative; z-index: 1; }
.esa-stat .esa-stat-go { position: absolute !important; z-index: 2; }

/* chart + overview tiles span 2 columns */
.esa-tile-chart, .esa-tile-overview { grid-column: span 2; justify-content: flex-start; }
.esa-tile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.esa-chip { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--esa26c-ink-dim); background: var(--esa26c-bg); border: 1px solid var(--esa26c-line); padding: 4px 11px; border-radius: 999px; }

/* activity chart */
.esa-chart { display: flex; align-items: flex-end; gap: 6px; height: 116px; flex: 1; }
.esa-chart span {
    flex: 1; min-height: 8px; border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, var(--esa26c-brand), var(--esa26c-brand-2));
    height: var(--h, 40%); transform-origin: bottom; opacity: .9;
    animation: esaDashBar 2.8s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes esaDashBar { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }

/* account-overview donut */
.esa-overview { display: flex; align-items: center; gap: 26px; margin-top: 16px; flex-wrap: wrap; }
.esa-donut {
    width: 132px; height: 132px; flex-shrink: 0; border-radius: 50%;
    position: relative; display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--esa26c-brand) calc(var(--pct, 75) * 1%), var(--esa26c-line-2) 0);
}
.esa-donut::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--esa26c-surface); }
html[data-theme="light"] .esa-donut::before { background: #ffffff; }
.esa-donut-center { position: relative; z-index: 1; text-align: center; line-height: 1.05; }
.esa-donut-center strong { display: block; font-size: 32px; font-weight: 800; color: var(--esa26c-ink); }
.esa-donut-center span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--esa26c-ink-dim); }
.esa-ov-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 150px; }
.esa-ov-legend li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--esa26c-ink-mute); }
.esa-ov-legend li b { margin-left: auto; color: var(--esa26c-ink); font-weight: 800; }
.esa-ov-legend i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.esa-ov-legend .d1 { background: var(--esa26c-brand); }
.esa-ov-legend .d2 { background: var(--esa26c-brand-2); }
.esa-ov-legend .d3 { background: #5be3a0; }
.esa-ov-legend .d4 { background: rgba(23, 215, 115, .40); }

@media (max-width: 1024px) {
    .esa-tile-chart, .esa-tile-overview { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) { .esa-chart span { animation: none; } }

/* =====================================================
 *  R65 — UNIQUE panel cards (reference style: Billingsy /
 *  HostArmada). Green gradient cards, big icon square,
 *  corner dot pattern, 2-col grid. Overrides the flat look.
 * ===================================================== */
.esa-dash .client-home-cards > .row > .client-home-panels,
.esa-dash .client-home-cards .client-home-panels {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.esa-dash .esa-flat {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(150deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 20px !important;
    padding: 24px 26px !important;
    margin: 0 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
html[data-theme="light"] .esa-dash .esa-flat {
    background: linear-gradient(150deg, #ffffff, var(--esa26c-surface-2)) !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}
.esa-dash .esa-flat:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(23, 215, 115, .35) !important;
}
/* decorative corner dot pattern (Billingsy) */
.esa-dash .esa-flat::after {
    content: "" !important;
    position: absolute !important;
    right: -10px; top: -10px;
    width: 120px; height: 120px;
    background-image: radial-gradient(rgba(23, 215, 115, .16) 1.5px, transparent 1.5px);
    background-size: 13px 13px;
    -webkit-mask-image: radial-gradient(74px 74px at 100% 0, #000, transparent 75%);
    mask-image: radial-gradient(74px 74px at 100% 0, #000, transparent 75%);
    pointer-events: none; z-index: 0;
}
.esa-dash .esa-flat-head,
.esa-dash .esa-flat-body,
.esa-dash .esa-flat-list,
.esa-dash .esa-flat-billing { position: relative; z-index: 1; }

/* big gradient icon square in the header (HostArmada vibe) */
.esa-dash .esa-flat-head { margin-bottom: 18px !important; }
.esa-dash .esa-flat-title { gap: 14px !important; }
.esa-dash .esa-flat-title i {
    width: 46px !important; height: 46px !important;
    border-radius: 14px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    color: #04130a !important;
    font-size: 20px !important;
    box-shadow: 0 8px 20px rgba(23, 215, 115, .3) !important;
    flex-shrink: 0 !important;
}

/* span the full-width sections that need room */
.esa-dash .esa-flat[menuitemname="Register a New Domain"],
.esa-dash .esa-flat[menuItemName="Register a New Domain"] { grid-column: 1 / -1 !important; }

@media (max-width: 900px) {
    .esa-dash .client-home-cards .client-home-panels { grid-template-columns: 1fr !important; }
}

/* =====================================================
 *  R66 — FOOTER REMAKE: flat & premium, drop the 2 boxes.
 *  Brand + link columns on top, a clean horizontal
 *  Trust & Compliance band below, airy spacing.
 * ===================================================== */
#footer-advanced .footer-pro-main {
    display: grid !important;
    grid-template-columns: 1.1fr 2.3fr !important;
    grid-template-areas: "brand links" "trust trust" !important;
    gap: 44px 60px !important;
    align-items: start !important;
}
#footer-advanced .footer-pro-brand { grid-area: brand !important; }
#footer-advanced .footer-pro-links { grid-area: links !important; grid-template-columns: repeat(4, 1fr) !important; grid-column: auto !important; padding-top: 4px !important; }
#footer-advanced .footer-pro-trust { grid-area: trust !important; }

/* flatten both boxes */
#footer-advanced .footer-pro-brand,
html[data-theme="light"] #footer-advanced .footer-pro-brand,
#footer-advanced .footer-pro-trust,
html[data-theme="light"] #footer-advanced .footer-pro-trust {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* brand block */
#footer-advanced .footer-pro-summary { max-width: 340px !important; }
#footer-advanced .footer-pro-contact { flex-direction: row !important; flex-wrap: wrap !important; gap: 10px 22px !important; }
#footer-advanced .footer-pro-contact-item,
html[data-theme="light"] #footer-advanced .footer-pro-contact-item {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--esa26c-ink-mute) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}
#footer-advanced .footer-pro-contact-item:hover { color: var(--esa26c-brand) !important; transform: none !important; }
#footer-advanced .footer-pro-contact-item i { color: var(--esa26c-brand) !important; }

/* trust → flat horizontal band */
#footer-advanced .footer-pro-trust {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px 30px !important;
    padding-top: 34px !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--esa26c-line) !important;
}
#footer-advanced .footer-pro-trust-copy { display: none !important; }
#footer-advanced .footer-pro-eyebrow { margin: 0 !important; }
#footer-advanced .footer-pro-badges {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    margin: 0 !important;
    max-width: none !important;
}
#footer-advanced .footer-pro-badges::before { display: none !important; }
#footer-advanced .footer-pro-badge {
    min-height: 0 !important;
    padding: 8px 12px !important;
    flex: 0 0 auto !important;
}
#footer-advanced #trustpilot-widget-footer,
#footer-advanced .footer-pro-review-link { margin: 0 !important; }
#footer-advanced .footer-pro-policy-links { margin-left: auto !important; }

/* responsive */
@media (max-width: 900px) {
    #footer-advanced .footer-pro-main {
        grid-template-columns: 1fr !important;
        grid-template-areas: "brand" "links" "trust" !important;
        gap: 32px !important;
    }
    #footer-advanced .footer-pro-links { grid-template-columns: 1fr 1fr !important; }
    #footer-advanced .footer-pro-policy-links { margin-left: 0 !important; }
}

/* =====================================================
 *  R67 — CLIENT-AREA LIST PAGES (services / invoices /
 *  domains / tickets): premium tables, wider, on-brand.
 * ===================================================== */
body[class*="page-clientarea"] #main-body > .page-container,
body[class*="page-clientarea"] #breadcrumb > .page-container,
body.page-supporttickets #main-body > .page-container,
body.page-supporttickets #breadcrumb > .page-container {
    max-width: 1720px !important;
}

/* table card container */
body[class*="page-clientarea"] .primary-content > .card,
body[class*="page-clientarea"] .primary-content .clientArea-content,
body.page-supporttickets .primary-content > .card {
    background: linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22) !important;
    overflow: hidden !important;
}
html[data-theme="light"] body[class*="page-clientarea"] .primary-content > .card {
    background: linear-gradient(160deg, #ffffff, var(--esa26c-surface-2)) !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}

/* tables */
.primary-content table { width: 100% !important; background: transparent !important; border-collapse: collapse !important; }
.primary-content table > thead > tr > th,
.primary-content table thead th {
    background: var(--esa26c-surface-2) !important;
    color: var(--esa26c-ink-dim) !important;
    font-size: 11px !important; font-weight: 800 !important;
    letter-spacing: .08em !important; text-transform: uppercase !important;
    border: 0 !important; border-bottom: 1px solid var(--esa26c-line) !important;
    padding: 15px 20px !important;
}
.primary-content table > tbody > tr > td,
.primary-content table tbody td {
    background: transparent !important;
    color: var(--esa26c-ink) !important;
    border: 0 !important; border-top: 1px solid var(--esa26c-line) !important;
    padding: 16px 20px !important; vertical-align: middle !important;
}
.primary-content table > tbody > tr:hover > td { background: var(--esa26c-brand-soft) !important; }

/* status pills */
.primary-content .label, .primary-content .badge, .primary-content span.status {
    border-radius: 999px !important; padding: 4px 12px !important;
    font-size: 11px !important; font-weight: 800 !important; letter-spacing: .04em !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
.primary-content .label-success, .primary-content .badge-success,
.primary-content [class*="status-active"], .primary-content [class*="status-paid"] {
    background: var(--esa26c-brand-soft) !important; color: var(--esa26c-brand) !important; border: 1px solid rgba(23, 215, 115, .3) !important;
}
.primary-content .label-danger, .primary-content .badge-danger,
.primary-content [class*="status-unpaid"], .primary-content [class*="status-overdue"] {
    background: rgba(244, 63, 94, .12) !important; color: #fb7185 !important; border: 1px solid rgba(244, 63, 94, .3) !important;
}

/* cancelled strikethrough prices → neutral grey, not pink */
.primary-content del, .primary-content s, .primary-content strike,
.primary-content .text-line-through, .primary-content [style*="line-through"] {
    color: var(--esa26c-ink-dim) !important;
    text-decoration-color: var(--esa26c-ink-dim) !important;
}

/* DataTables controls */
.primary-content .dataTables_filter input,
.primary-content input[type="search"],
.primary-content input.form-control {
    background: var(--esa26c-bg) !important; border: 1px solid var(--esa26c-line-2) !important;
    color: var(--esa26c-ink) !important; border-radius: 10px !important; padding: 9px 14px !important; box-shadow: none !important;
}
.primary-content .dataTables_paginate .paginate_button,
.primary-content .pagination > li > a, .primary-content .pagination > li > span {
    background: var(--esa26c-surface-2) !important; border: 1px solid var(--esa26c-line) !important;
    color: var(--esa26c-ink-mute) !important; border-radius: 8px !important; margin: 0 2px !important;
}
.primary-content .dataTables_paginate .paginate_button.current,
.primary-content .pagination > .active > a, .primary-content .pagination > .active > span {
    background: var(--esa26c-brand) !important; color: #04130a !important; border-color: var(--esa26c-brand) !important;
}
.primary-content .dataTables_info, .primary-content .dataTables_length, .primary-content .dataTables_paginate { color: var(--esa26c-ink-mute) !important; }

/* =====================================================
 *  R68 — list-page tables: rows become spaced CARD ROWS
 *  (modern dashboard look), not a flat table.
 * ===================================================== */
body[class*="page-clientarea"] .primary-content table,
body.page-supporttickets .primary-content table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}
body[class*="page-clientarea"] .primary-content table > tbody > tr > td,
body.page-supporttickets .primary-content table > tbody > tr > td {
    border: 0 !important;
    background: var(--esa26c-bg) !important;
    padding: 18px 22px !important;
}
html[data-theme="light"] body[class*="page-clientarea"] .primary-content table > tbody > tr > td {
    background: #f1f5fb !important;
}
body[class*="page-clientarea"] .primary-content table > tbody > tr > td:first-child,
body.page-supporttickets .primary-content table > tbody > tr > td:first-child {
    border-radius: 14px 0 0 14px !important;
}
body[class*="page-clientarea"] .primary-content table > tbody > tr > td:last-child,
body.page-supporttickets .primary-content table > tbody > tr > td:last-child {
    border-radius: 0 14px 14px 0 !important;
}
body[class*="page-clientarea"] .primary-content table > tbody > tr,
body.page-supporttickets .primary-content table > tbody > tr {
    transition: transform .16s ease !important;
}
body[class*="page-clientarea"] .primary-content table > tbody > tr:hover,
body.page-supporttickets .primary-content table > tbody > tr:hover {
    transform: translateY(-2px) !important;
}
body[class*="page-clientarea"] .primary-content table > tbody > tr:hover > td,
body.page-supporttickets .primary-content table > tbody > tr:hover > td {
    background: var(--esa26c-surface-2) !important;
    box-shadow: inset 0 0 0 1px rgba(23, 215, 115, .25) !important;
}
html[data-theme="light"] body[class*="page-clientarea"] .primary-content table > tbody > tr:hover > td {
    background: #ffffff !important;
}
/* header keeps a flat row, no card */
body[class*="page-clientarea"] .primary-content table > thead > tr > th {
    border-radius: 0 !important;
    padding: 10px 22px !important;
}
/* product/service name bigger */
body[class*="page-clientarea"] .primary-content table > tbody > tr > td:first-child {
    font-weight: 600 !important;
}
/* hide broken service favicon imgs (show as 'undefined') */
.primary-content table td img[src=""],
.primary-content table td img:not([src]),
.primary-content table td img[src="undefined"] { display: none !important; }

/* sidebar filter rows (VIEW / STATUS) — cleaner */
.sidebar .list-group-item .badge,
.sidebar .nav-link .badge,
.sidebar [class*="badge"] {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23, 215, 115, .3) !important;
}

/* =====================================================
 *  R69 — SIDEBAR (services/invoices pages): redesign the
 *  VIEW / STATUS filters + ACTIONS into clean pill-buttons.
 * ===================================================== */
.sidebar .card-sidebar .list-group-item,
.sidebar .card-sidebar li > a {
    padding: 11px 13px !important;
    border-radius: 11px !important;
    border-top: 0 !important;
    border: 1px solid transparent !important;
    margin-bottom: 5px !important;
    background: var(--esa26c-bg) !important;
    color: var(--esa26c-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 10px !important;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease !important;
}
html[data-theme="light"] .sidebar .card-sidebar .list-group-item,
html[data-theme="light"] .sidebar .card-sidebar li > a {
    background: #f1f5fb !important;
}
.sidebar .card-sidebar .list-group-item:first-child { border-top: 0 !important; }
.sidebar .card-sidebar .list-group-item:hover,
.sidebar .card-sidebar li > a:hover {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border-color: rgba(23, 215, 115, .25) !important;
    padding-left: 13px !important;
    transform: translateX(2px) !important;
}
.sidebar .card-sidebar .list-group-item.active {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border-color: rgba(23, 215, 115, .35) !important;
    box-shadow: inset 3px 0 0 var(--esa26c-brand) !important;
}
.sidebar .card-sidebar .list-group-item i,
.sidebar .card-sidebar li > a i { color: var(--esa26c-brand) !important; width: 18px !important; text-align: center !important; }

/* count badge → round green pill */
.sidebar .card-sidebar .list-group-item .badge,
.sidebar .card-sidebar .badge.float-right {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 1px solid rgba(23, 215, 115, .35) !important;
    border-radius: 999px !important;
    min-width: 24px !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    float: none !important;
    margin-left: auto !important;
}
.sidebar .card-sidebar .list-group-item.active .badge {
    background: var(--esa26c-brand) !important;
    color: #04130a !important;
    border-color: var(--esa26c-brand) !important;
}

/* section headers (VIEW / STATUS / ACTIONS / BILLING) */
.sidebar .card-sidebar > .card-header,
.sidebar .card-sidebar .card-header {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 2px 12px !important;
}
.sidebar .card-sidebar .card-header,
.sidebar .card-sidebar .card-header h3,
.sidebar .card-sidebar .card-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--esa26c-ink-dim) !important;
}

/* =====================================================
 *  R70 — UNDO the box-on-box mess. Clean flat tables +
 *  flat sidebar inside ONE subtle container. No nested cards.
 * ===================================================== */
/* table: flat rows, hairline dividers only — no per-row cards */
body[class*="page-clientarea"] .primary-content table,
body.page-supporttickets .primary-content table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
body[class*="page-clientarea"] .primary-content table > tbody > tr > td,
body.page-supporttickets .primary-content table > tbody > tr > td {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--esa26c-line) !important;
    border-radius: 0 !important;
    padding: 15px 20px !important;
}
body[class*="page-clientarea"] .primary-content table > tbody > tr:first-child > td,
body.page-supporttickets .primary-content table > tbody > tr:first-child > td {
    border-top: 0 !important;
}
body[class*="page-clientarea"] .primary-content table > tbody > tr,
body.page-supporttickets .primary-content table > tbody > tr {
    transform: none !important;
    background: transparent !important;
}
body[class*="page-clientarea"] .primary-content table > tbody > tr:hover > td,
body.page-supporttickets .primary-content table > tbody > tr:hover > td {
    background: var(--esa26c-brand-soft) !important;
    box-shadow: none !important;
}

/* sidebar items: flat rows, no per-item boxes */
.sidebar .card-sidebar .list-group-item,
.sidebar .card-sidebar li > a {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 10px 2px !important;
    transform: none !important;
}
.sidebar .card-sidebar .list-group-item + .list-group-item {
    border-top: 1px solid var(--esa26c-line) !important;
}
.sidebar .card-sidebar .list-group-item:hover,
.sidebar .card-sidebar li > a:hover {
    background: transparent !important;
    color: var(--esa26c-brand) !important;
    border-color: var(--esa26c-line) !important;
    transform: none !important;
    padding-left: 6px !important;
}
.sidebar .card-sidebar .list-group-item.active {
    background: transparent !important;
    color: var(--esa26c-brand) !important;
    box-shadow: none !important;
    border-color: var(--esa26c-line) !important;
}
/* count badge stays a small subtle pill */
.sidebar .card-sidebar .list-group-item .badge,
.sidebar .card-sidebar .badge.float-right {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 2px 9px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

/* =====================================================
 *  R71 — sidebar filters: drop the odd radio circles,
 *  clean row = label left, count pill right.
 * ===================================================== */
.sidebar .card-sidebar input[type="radio"],
.sidebar .card-sidebar input[type="checkbox"],
.sidebar .card-sidebar .list-group-item > i.fa-circle,
.sidebar .card-sidebar .list-group-item i.far.fa-circle,
.sidebar .card-sidebar .list-group-item i[class*="fa-circle"],
.sidebar .card-sidebar .list-group-item i[class*="fa-dot-circle"],
.sidebar .card-sidebar .list-group-item [class*="ri-checkbox-blank-circle"],
.sidebar .card-sidebar .list-group-item [class*="ri-radio"] {
    display: none !important;
}
.sidebar .card-sidebar .list-group-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}
.sidebar .card-sidebar .list-group-item .badge,
.sidebar .card-sidebar .badge.float-right {
    order: 9 !important;
    margin-left: auto !important;
}

/* =====================================================
 *  R72 — DEFINITIVE: center + full-width the dashboard,
 *  independent of :has() or the page-container class.
 *  Forces the content column to span the whole centered area.
 * ===================================================== */
body.page-clientareahome #main-body {
    width: 100% !important;
    max-width: none !important;
    padding: 26px 0 60px !important;
}
body.page-clientareahome #main-body > div,
body.page-clientareahome #main-body > .page-container {
    max-width: 1720px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    float: none !important;
}
body.page-clientareahome #main-body .row {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
}
body.page-clientareahome #main-body .row > .primary-content,
body.page-clientareahome #main-body .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =====================================================
 *  R73 — BULLETPROOF dashboard width, body-class-agnostic.
 *  #main-body that CONTAINS the dashboard → its container is
 *  centered at 1720 and the content column spans 100%.
 * ===================================================== */
#main-body:has(.esa-dash) > div,
#main-body:has(.esa-dash) > section,
#main-body:has(.esa-dash) > .page-container {
    max-width: 1720px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    float: none !important;
}
#main-body:has(.esa-dash) .row {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
}
#main-body:has(.esa-dash) .row > .primary-content,
#main-body:has(.esa-dash) .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
/* also widen the welcome bar to match */
#breadcrumb:has(~ #main-body .esa-dash) > div,
body:has(.esa-dash) #breadcrumb > div {
    max-width: 1720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =====================================================
 *  R74 — THE definitive width fix. On the dashboard the
 *  sidebar is hidden, so .primary-content must NOT reserve
 *  240px for it. Same specificity as the slim-sidebar rule,
 *  appended later → wins → content spans full width.
 * ===================================================== */
@media (min-width: 1200px) {
    body.page-clientareahome #main-body > .page-container > .row > .col-lg-8.col-xl-9.primary-content,
    body.page-clientareahome #main-body > .page-container > .row > .primary-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =====================================================
 *  R75 — CLIENT-AREA GLOBAL COMPONENTS (covers service
 *  details, invoice view, domains, tickets, account,
 *  add funds — all share these WHMCS components).
 *  Scoped to internal pages (homepage excluded).
 * ===================================================== */
body:not(.homepage-reset):not(.page-homepage) .primary-content .form-control,
body:not(.homepage-reset):not(.page-homepage) .primary-content input[type="text"],
body:not(.homepage-reset):not(.page-homepage) .primary-content input[type="email"],
body:not(.homepage-reset):not(.page-homepage) .primary-content input[type="password"],
body:not(.homepage-reset):not(.page-homepage) .primary-content input[type="number"],
body:not(.homepage-reset):not(.page-homepage) .primary-content input[type="tel"],
body:not(.homepage-reset):not(.page-homepage) .primary-content select,
body:not(.homepage-reset):not(.page-homepage) .primary-content textarea {
    background: var(--esa26c-bg) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    color: var(--esa26c-ink) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .form-control:focus,
body:not(.homepage-reset):not(.page-homepage) .primary-content select:focus,
body:not(.homepage-reset):not(.page-homepage) .primary-content textarea:focus {
    border-color: var(--esa26c-brand) !important;
    box-shadow: 0 0 0 3px var(--esa26c-brand-soft) !important;
    outline: none !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content label,
body:not(.homepage-reset):not(.page-homepage) .primary-content .control-label {
    color: var(--esa26c-ink-mute) !important;
    font-weight: 600 !important;
}

/* buttons */
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn-primary,
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn-success {
    background: linear-gradient(135deg, var(--esa26c-brand), var(--esa26c-brand-2)) !important;
    border: 1px solid var(--esa26c-brand) !important;
    color: #04130a !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn-primary:hover,
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn-success:hover {
    filter: brightness(1.05) !important;
    color: #04130a !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn-default,
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn-secondary,
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn-light {
    background: transparent !important;
    border: 1px solid var(--esa26c-line-2) !important;
    color: var(--esa26c-ink) !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn-default:hover,
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn-secondary:hover {
    border-color: var(--esa26c-brand) !important;
    color: var(--esa26c-brand) !important;
    background: var(--esa26c-brand-soft) !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .btn-danger {
    background: rgba(244, 63, 94, .14) !important;
    border: 1px solid rgba(244, 63, 94, .4) !important;
    color: #fb7185 !important;
}

/* tabs / pills → green active */
body:not(.homepage-reset):not(.page-homepage) .primary-content .nav-tabs .nav-link.active,
body:not(.homepage-reset):not(.page-homepage) .primary-content .nav-pills .nav-link.active,
body:not(.homepage-reset):not(.page-homepage) .primary-content .nav-tabs .nav-item.show .nav-link {
    background: var(--esa26c-brand-soft) !important;
    color: var(--esa26c-brand) !important;
    border-color: transparent transparent var(--esa26c-brand) !important;
    border-radius: 8px 8px 0 0 !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .nav-tabs,
body:not(.homepage-reset):not(.page-homepage) .primary-content .nav-pills { border-bottom: 1px solid var(--esa26c-line) !important; }
body:not(.homepage-reset):not(.page-homepage) .primary-content .nav-link { color: var(--esa26c-ink-mute) !important; }

/* panels / cards */
body:not(.homepage-reset):not(.page-homepage) .primary-content .panel,
body:not(.homepage-reset):not(.page-homepage) .primary-content > .card,
body:not(.homepage-reset):not(.page-homepage) .primary-content .panel-default {
    background: linear-gradient(160deg, var(--esa26c-surface), var(--esa26c-surface-2)) !important;
    border: 1px solid var(--esa26c-line-2) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .2) !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .panel-heading,
body:not(.homepage-reset):not(.page-homepage) .primary-content .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--esa26c-line) !important;
    color: var(--esa26c-ink) !important;
    font-weight: 700 !important;
}

/* alerts */
body:not(.homepage-reset):not(.page-homepage) .primary-content .alert {
    border-radius: 12px !important;
    border: 1px solid var(--esa26c-line-2) !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .alert-success {
    background: var(--esa26c-brand-soft) !important; color: var(--esa26c-brand) !important; border-color: rgba(23, 215, 115, .3) !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .alert-danger {
    background: rgba(244, 63, 94, .1) !important; color: #fb7185 !important; border-color: rgba(244, 63, 94, .3) !important;
}
body:not(.homepage-reset):not(.page-homepage) .primary-content .alert-info,
body:not(.homepage-reset):not(.page-homepage) .primary-content .alert-warning {
    background: var(--esa26c-surface-2) !important; color: var(--esa26c-ink) !important;
}

/* =====================================================
 *  R75 — MOBILE PASS for the client area.
 * ===================================================== */
@media (max-width: 991px) {
    /* welcome bar buttons wrap */
    #breadcrumb .bread-links,
    #breadcrumb .float-right,
    #breadcrumb [class*="btn"] { flex-wrap: wrap !important; }
    /* list pages: sidebar + content stack full-width */
    body[class*="page-clientarea"] #main-body .row > [class*="col-"],
    body.page-supporttickets #main-body .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    body[class*="page-clientarea"] .sidebar { margin-bottom: 18px !important; }
}
@media (max-width: 768px) {
    /* tables scroll horizontally instead of overflowing */
    body:not(.homepage-reset):not(.page-homepage) .primary-content .table-responsive,
    body:not(.homepage-reset):not(.page-homepage) .primary-content .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    body:not(.homepage-reset):not(.page-homepage) .primary-content table { min-width: 560px !important; }
    /* welcome bar stacks */
    #breadcrumb > .page-container { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
    /* bento padding tighten already handled; ensure dash panels single col */
    .esa-dash .client-home-cards .client-home-panels { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
    body:not(.homepage-reset):not(.page-homepage) #main-body > .page-container,
    body:not(.homepage-reset):not(.page-homepage) #main-body > div { padding-left: 14px !important; padding-right: 14px !important; }
    .esa-tile { padding: 18px !important; }
}

/* =====================================================
 *  R76 — MOBILE FIX: panels must be 1 column on phones
 *  (the base 2-col rule used `> .row >` which out-specified
 *  the mobile override). Match specificity here.
 * ===================================================== */
@media (max-width: 900px) {
    .esa-dash .client-home-cards > .row > .client-home-panels,
    .esa-dash .client-home-cards .client-home-panels {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 600px) {
    /* bento goes single column on small phones */
    .esa-bento { grid-template-columns: 1fr !important; }
    .esa-tile-balance { grid-column: auto !important; grid-row: auto !important; }
    .esa-tile-ddos,
    .esa-tile-profile,
    .esa-tile-actions { grid-column: auto !important; }
    .esa-tile-ddos { flex-direction: column !important; align-items: flex-start !important; }
    /* active-service rows wrap cleanly */
    .esa-dash .esa-flat-body .div-service-item,
    .esa-dash .client-home-cards .div-service-item {
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
    }
    .esa-dash .esa-flat-body .div-service-name { flex: 1 1 100% !important; order: 3 !important; }
    .esa-dash .esa-flat-body .esa-svc-ic { order: 1 !important; }
    .esa-dash .esa-flat-body .div-service-status { order: 2 !important; }
    .esa-dash .esa-flat-body .div-service-buttons { order: 4 !important; width: 100% !important; }
}

/* =====================================================
 *  R77 — deeper mobile pass (client area + homepage).
 * ===================================================== */
@media (max-width: 600px) {
    /* dashboard service rows: clean top-aligned stack (icon at top,
       name fills, status + buttons each on their own line) */
    .esa-dash .client-home-cards .esa-svc,
    .esa-dash .esa-flat-body .div-service-item {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px 10px !important;
    }
    .esa-dash .client-home-cards .esa-svc .esa-svc-ic { order: 1 !important; }
    .esa-dash .client-home-cards .esa-svc .div-service-name {
        order: 2 !important;
        flex: 1 1 calc(100% - 54px) !important;
        min-width: 0 !important;
    }
    .esa-dash .client-home-cards .esa-svc .div-service-status {
        order: 3 !important; flex: 1 1 100% !important; margin: 0 !important;
    }
    .esa-dash .client-home-cards .esa-svc .div-service-buttons {
        order: 4 !important; flex: 1 1 100% !important; width: 100% !important; margin: 0 !important;
    }
    /* panel head: title + action link wrap, never cut off */
    .esa-dash .esa-flat-head { flex-wrap: wrap !important; gap: 8px 12px !important; }
    .esa-dash .esa-flat-title { flex: 1 1 auto !important; min-width: 0 !important; }
    .esa-dash .esa-flat-link { margin-left: 0 !important; }
    /* welcome bar: text wraps, buttons stack */
    #breadcrumb h1, #breadcrumb h2, #breadcrumb h3, #breadcrumb .h4, #breadcrumb span, #breadcrumb a {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    #breadcrumb .bread-links, #breadcrumb .float-right { float: none !important; flex-wrap: wrap !important; }
}

/* homepage: never overflow horizontally, CTAs wrap on phones */
.esa26 { overflow-x: hidden !important; }
@media (max-width: 600px) {
    .esa26-hero-ctas,
    .esa26-finalcta-ctas,
    .esa26-ddos-feature .cta,
    .esa26-ddospanel .cta,
    .esa26-hero-meta { flex-wrap: wrap !important; }
    .esa26-hero-ctas .esa26-btn,
    .esa26-finalcta-ctas .esa26-btn,
    .esa26-ddospanel .cta .esa26-btn { flex: 1 1 auto !important; justify-content: center !important; }
    .esa26-wrap { padding-left: 16px !important; padding-right: 16px !important; }
    /* cap-bar (3 Tbps + 2 Tbps = 5 Tbps) stacks neatly */
    .esa26-cap-bar { flex-direction: column !important; align-items: stretch !important; text-align: center; }
    .esa26-cap { justify-content: center !important; }
}