/* ============================================================
 *  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 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    background: var(--esa26c-surface) !important;
    border: 1px solid var(--esa26c-line) !important;
    border-radius: 18px !important;
    padding: 20px 26px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25) !important;
}

html[data-theme="light"] #payments-methods .payments-inner {
    box-shadow: 0 8px 28px rgba(15, 23, 42, .05) !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:
        radial-gradient(1200px 420px at 50% 0%, rgba(23, 215, 115, .08), transparent 60%),
        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:
        radial-gradient(1200px 420px at 50% 0%, rgba(15, 177, 95, .07), transparent 60%),
        linear-gradient(180deg, #ffffff, var(--esa26c-bg) 40%) !important;
}

#footer-advanced::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--esa26c-brand), transparent);
    opacity: .55;
    pointer-events: none;
}

#footer-advanced::after {
    display: none !important;
}

#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.1fr 1fr 1fr 1.2fr !important;
    gap: 40px !important;
    align-items: flex-start !important;
}

#footer-advanced .footer-pro-brand {
    min-width: 0;
}

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

#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: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line) !important;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

#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 {
    display: block !important;
    color: var(--esa26c-ink-mute) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 6px 0 !important;
    text-decoration: none !important;
    transition: color .18s ease, padding .18s ease;
}

#footer-advanced .footer-pro-col a::before {
    content: none !important;
    display: none !important;
}

#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: 4px !important;
}

/* trust column */
#footer-advanced .footer-pro-trust {
    min-width: 0;
}

#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: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

#footer-advanced .footer-pro-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    background: var(--esa26c-surface-2) !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: var(--esa26c-surface) !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: #ffffff !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: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line) !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;
}

#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: var(--esa26c-surface-2) !important;
    border: 1px solid var(--esa26c-line) !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;
}

#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-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: 28px 22px !important;
    }

    #footer-advanced .footer-pro-main {
        grid-template-columns: 1fr !important;
        gap: 30px !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: 8px 16px 8px 18px !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;
}
.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{
    content: attr(data-original-title) " " attr(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;
}