/* ===== BEYER HOSTING — NEXUS DARK THEME ===== */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700;900&display=swap');

/* ══════════════════════════════════════════
   NEXUS VARIABLE OVERRIDES
══════════════════════════════════════════ */
:root {
    --bg:               #080c14;
    --bg2:              #0d1320;
    --surface:          #0e1825;
    --border:           #1e2d45;
    --accent:           #00d4ff;
    --accent2:          #5b6af0;
    --green:            #4ade80;
    --text:             #e2eaf5;
    --muted:            #5b7a99;
    --bg-inverted:      #0e1825;
    --bg-lifted:        #0d1320;
    --bg-accented:      #111827;
    --bg-muted:         #1e2d45;
    --border-lifted:    #2a3f5f;
    --border-muted:     #1e2d45;
    --text-muted:       #8ba3bf;
    --text-lifted:      #8ba3bf;
    --text-accented:    #c8d8e8;
    --grayscale:        #1e2d45;
    --grayscale-lifted: #2a3f5f;
    --rounding-sm:      6px;
    --rounding-md:      10px;
    --rounding-lg:      14px;
}

/* ══════════════════════════════════════════
   BASE
══════════════════════════════════════════ */
*, body, html { font-family: 'Exo 2', sans-serif !important; }

/* CRITICAL: Restore Font Awesome icons overridden by Exo 2 */
.fas, .far, .fal, .fad,
i[class*="fa-"],
span[class*="fa-"] {
    font-family: "Font Awesome 6 Pro" !important;
}
.fab, i.fab, span.fab {
    font-family: "Font Awesome 6 Brands" !important;
}

body, html {
    background: var(--bg) !important;
    background-color: var(--bg) !important;
    color: var(--text) !important;
}
h1, h2, h3, h4, h5, h6, .h5 { color: var(--text) !important; }
p { color: var(--text) !important; }
a { color: var(--accent) !important; }
a:hover { color: #fff !important; text-decoration: none !important; }
hr { border-color: var(--border) !important; }
.text-muted, .font-weight-light { color: var(--muted) !important; }
.text-white { color: #fff !important; }
.text-light { color: var(--muted) !important; }
small { color: var(--muted) !important; font-size: 0.9em !important; }

/* ══════════════════════════════════════════
   WRAPPERS
══════════════════════════════════════════ */
.outer-wrapper, .inner-wrapper, .primary-content, .container, .home {
    background: transparent !important;
}

/* ══════════════════════════════════════════
   TOPBAR (logged in bar)
══════════════════════════════════════════ */
.topbar {
    background: var(--bg2) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.topbar .btn, .topbar a, .topbar span { color: var(--text) !important; }
.topbar .input-group-text {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--muted) !important;
}
.topbar .btn-active-client {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* ══════════════════════════════════════════
   EMAIL VERIFICATION BANNER
══════════════════════════════════════════ */
.verification-banner,
.email-verification {
    background: rgba(0,212,255,0.08) !important;
    border-bottom: 1px solid rgba(0,212,255,0.2) !important;
    color: var(--text) !important;
}
.verification-banner .text,
.verification-banner span { color: var(--text) !important; }

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.navbar, .main-navbar-wrapper, .navbar-light {
    background: rgba(8,12,20,0.97) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}
.navbar-brand, .navbar-brand:hover { color: #fff !important; font-weight: 900 !important; }
.navbar-light .navbar-nav .nav-link, .nav-link {
    color: var(--muted) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.navbar-light .navbar-nav .nav-link:hover, .nav-link:hover { color: var(--accent) !important; }
.nav-item.active .nav-link { color: var(--accent) !important; }
.navbar-light .navbar-toggler { border-color: var(--border) !important; }
.navbar-light .navbar-toggler-icon { filter: invert(1) !important; }
.dropdown-menu {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--rounding-md) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
}
.dropdown-item { color: var(--muted) !important; font-size: 0.85rem !important; }
.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(0,212,255,0.06) !important;
    color: var(--text) !important;
}
.dropdown-divider { border-color: var(--border) !important; }
.search .form-control, .navbar .form-control {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--rounding-sm) !important;
}
.cart-btn {
    color: var(--muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--rounding-sm) !important;
    background: transparent !important;
}
.cart-btn:hover { color: var(--accent) !important; border-color: var(--accent) !important; }

/* ══════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════ */
.master-breadcrumb, .breadcrumb {
    background: var(--bg2) !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 0 !important;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--muted) !important; font-size: 0.82rem !important; }
.breadcrumb-item.active { color: var(--text) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--border) !important; }

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--rounding-lg) !important;
    box-shadow: none !important;
    color: var(--text) !important;
}
.card-body { background: transparent !important; color: var(--text) !important; }
.card-title { color: var(--text) !important; font-weight: 700 !important; }
.card-header {
    background: rgba(0,0,0,0.2) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
}
.card-footer {
    background: rgba(0,0,0,0.15) !important;
    border-top: 1px solid var(--border) !important;
}
.card-accent-green        { border-top: 3px solid var(--green) !important; }
.card-accent-teal         { border-top: 3px solid var(--accent) !important; }
.card-accent-midnight-blue { border-top: 3px solid var(--accent2) !important; }
.card-accent-sun-flower   { border-top: 3px solid #fcd34d !important; }
.card-accent-pomegranate  { border-top: 3px solid #f87171 !important; }
.card-accent-asbestos     { border-top: 3px solid var(--muted) !important; }
.card-columns .card, .home .card {
    transition: border-color 0.2s, transform 0.2s !important;
}
.card-columns .card:hover, .home .card:hover {
    border-color: rgba(91,106,240,0.5) !important;
    transform: translateY(-2px) !important;
}
.client-home-cards .card,
.client-home-cards .card-body {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* ══════════════════════════════════════════
   HOME CARDS — DESKTOP CENTERING
══════════════════════════════════════════ */
.card-columns.home {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
}
.card-columns.home .card {
    flex: 0 0 calc(33% - 1rem) !important;
    max-width: calc(33% - 1rem) !important;
}

/* ══════════════════════════════════════════
   HOME CARDS — MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
    .card-columns.home {
        flex-direction: column !important;
        align-items: center !important;
    }
    .card-columns.home .card {
        flex: 0 0 90% !important;
        max-width: 90% !important;
        width: 90% !important;
    }
}

/* ══════════════════════════════════════════
   LIST GROUPS
══════════════════════════════════════════ */
.list-group { background: transparent !important; }
.list-group-item {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    font-size: 1rem !important;
}
.list-group-item:hover { background-color: var(--bg2) !important; }
.list-group-item.active,
.list-group-item.active:hover {
    background-color: var(--bg2) !important;
    border-color: var(--accent2) !important;
    color: var(--accent) !important;
}
.card-sidebar .form-control,
.cart-sidebar .form-control,
.collapsable-card-body .form-control {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
    color: var(--muted) !important;
}

/* ══════════════════════════════════════════
   ACTION ICON BUTTONS (home panels)
══════════════════════════════════════════ */
.action-icon-btns a {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--rounding-md) !important;
    transition: border-color 0.2s, transform 0.2s !important;
}
.action-icon-btns a:hover {
    background-color: var(--bg2) !important;
    border-color: var(--accent2) !important;
    transform: translateY(-2px) !important;
    color: var(--accent) !important;
}
.action-icon-btns a small,
.action-icon-btns a span { color: var(--text) !important; }
figure.ico-container, .ico-container {
    color: var(--accent) !important;
    font-size: 2.6em !important;
    line-height: 55px !important;
    width: 55px !important;
    height: 55px !important;
    margin: 10px auto !important;
    display: block !important;
    text-align: center !important;
}
figure.ico-container i,
figure.ico-container .fal,
figure.ico-container .fas,
figure.ico-container .far,
figure.ico-container .fab,
.ico-container i,
.ico-container .fal,
.ico-container .fas,
.ico-container .far {
    font-size: 1em !important;
    color: var(--accent) !important;
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 300 !important;
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-primary {
    background: linear-gradient(135deg, var(--accent2), #4a58d8) !important;
    border: none !important;
    border-radius: var(--rounding-md) !important;
    font-weight: 700 !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(91,106,240,0.35) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #4a58d8, #3a48c8) !important;
    color: #fff !important;
    box-shadow: 0 6px 24px rgba(91,106,240,0.5) !important;
}
.btn-outline-primary {
    border: 1.5px solid var(--accent2) !important;
    color: var(--accent2) !important;
    background: transparent !important;
    border-radius: var(--rounding-md) !important;
    font-weight: 600 !important;
}
.btn-outline-primary:hover {
    background: rgba(91,106,240,0.1) !important;
    color: var(--accent2) !important;
}
.btn-outline-light {
    border: 1.5px solid var(--border) !important;
    color: var(--text) !important;
    background: transparent !important;
    border-radius: var(--rounding-md) !important;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; }
.btn-default {
    background: transparent !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--rounding-md) !important;
    font-weight: 600 !important;
}
.btn-default:hover { border-color: var(--accent2) !important; color: var(--accent2) !important; }
.btn-order-now {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--rounding-md) !important;
    font-size: 1rem !important;
}
.btn-order-now:hover {
    background: var(--accent2) !important;
    border-color: var(--accent2) !important;
    color: #fff !important;
}
.btn-checkout,
body #order-standard_cart .text-right .btn-checkout {
    background: var(--accent2) !important;
    border-color: var(--accent2) !important;
    color: #fff !important;
    border-radius: var(--rounding-md) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}
.btn-checkout:hover { background: #4a58d8 !important; border-color: #4a58d8 !important; }
.btn-checkout .fal, .btn-checkout .fas, .btn-checkout .far,
.btn .fal, .btn .fas, .btn .far {
    font-family: "Font Awesome 6 Pro" !important;
}

/* ══════════════════════════════════════════
   TABS (promo code etc)
══════════════════════════════════════════ */
.nav-tabs { border-color: var(--border) !important; }
.nav-tabs .nav-link {
    color: var(--muted) !important;
    background: transparent !important;
    border-color: transparent !important;
    font-size: 1rem !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: var(--surface) !important;
    border-color: var(--border) var(--border) var(--surface) !important;
    color: var(--text) !important;
}
.nav-tabs .nav-link:hover { border-color: var(--border) !important; color: var(--text) !important; }
.tab-content { background: transparent !important; }
.tab-pane, .tab-pane.active, .tab-pane.promo {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--rounding-md) var(--rounding-md) !important;
    color: var(--text) !important;
    padding: 1rem !important;
}

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
select, textarea {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--rounding-sm) !important;
    color: var(--text) !important;
    font-size: 1rem !important;
}
.form-control:focus {
    border-color: var(--accent2) !important;
    box-shadow: 0 0 0 3px rgba(91,106,240,0.15) !important;
    background: var(--bg2) !important;
    color: var(--text) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--muted) !important; }
.col-form-label, label { color: var(--text) !important; font-weight: 600 !important; }
.input-group-prepend .btn,
.input-group-prepend .input-group-text,
.prepended-form-control, .appended-form-control {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
}
.input-inline, .input-inline-100 { background: var(--bg2) !important; color: var(--text) !important; }
#registration label { color: var(--muted) !important; }
#registration .field, #registration .form-control {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
#registration .sub-heading span { background-color: var(--bg) !important; color: var(--accent) !important; }
body #frmConfigureProduct label { color: var(--text) !important; }
body #frmConfigureProduct .form-control { color: var(--text) !important; }

/* ══════════════════════════════════════════
   TOOLBAR
══════════════════════════════════════════ */
.toolbar { background: var(--bg2) !important; border-bottom: 1px solid var(--border) !important; }

/* ══════════════════════════════════════════
   ALERTS
══════════════════════════════════════════ */
.alert { border-radius: var(--rounding-md) !important; }
.alert-danger {
    background: rgba(220,38,38,0.1) !important;
    border: 1px solid rgba(220,38,38,0.3) !important;
    color: #f87171 !important;
}

/* ══════════════════════════════════════════
   BADGES
══════════════════════════════════════════ */
.badge, .badge-info { background: rgba(0,212,255,0.12) !important; color: var(--accent) !important; }
.badge-dark, .badge-pill {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.bg-primary, .primary-bg-color { background: var(--accent2) !important; }

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--rounding-md) !important;
    color: var(--text) !important;
}
.modal-header {
    background: rgba(0,0,0,0.2) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--rounding-md) var(--rounding-md) 0 0 !important;
    color: var(--text) !important;
}
.modal-title { color: var(--text) !important; font-weight: 700 !important; }
.modal-footer { border-top: 1px solid var(--border) !important; }
.modal-body { color: var(--text) !important; }
.close { color: var(--muted) !important; opacity: 1 !important; }
.close:hover { color: var(--text) !important; }

/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
.table, table { color: var(--text) !important; }
.table thead th, table.table-list thead th {
    background: rgba(0,0,0,0.2) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--muted) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
.table tbody td, table.table-list tbody td {
    border-top: 1px solid var(--border) !important;
    color: var(--text) !important;
    vertical-align: middle !important;
    font-size: 1rem !important;
}
.table-list > tbody > tr > td { background-color: var(--surface) !important; }
.table-list > tbody > tr:hover > td { background-color: var(--bg2) !important; }
.dataTables_wrapper table.table-list {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
}
.dataTables_wrapper .dataTables_filter label .form-control {
    background: var(--bg2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ══════════════════════════════════════════
   CART / ORDER PAGES
══════════════════════════════════════════ */
#order-standard_cart .products .product,
body #order-standard_cart .products .product {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
body #order-standard_cart .cart-body .products .product header {
    background: var(--bg2) !important;
    border-bottom-color: var(--border) !important;
    color: var(--text) !important;
}
body #order-standard_cart .products .product header h3,
body #order-standard_cart .products .product header h4,
body #order-standard_cart .products .product header .product-name,
body #order-standard_cart .products .product h3,
.products .product header h3,
.products .product header h4,
.products .product header *,
.products .product header {
    color: var(--accent) !important;
    opacity: 1 !important;
}
body #order-standard_cart .products .product div.product-desc,
body #order-standard_cart .products .product .product-desc {
    color: var(--text-accented) !important;
    font-size: 1rem !important;
}
.products .product .price,
.products .product footer .price,
.products .product footer small,
.products .product footer span {
    color: var(--text) !important;
    font-size: 1rem !important;
}
.view-cart-items .item,
.view-cart-items tr,
.view-cart-items td {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    font-size: 1rem !important;
}
.view-cart-items .item-domain,
.view-cart-items .item h5,
.view-cart-items .item h4,
.view-cart-items .item p,
.view-cart-items .item small,
.view-cart-items .item span {
    color: var(--text) !important;
    font-size: 1rem !important;
}
body #order-standard_cart .cart-body .view-cart-items-header {
    background-color: var(--bg2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    font-size: 1rem !important;
}
body #order-standard_cart .cart-body .view-cart-empty {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}
body #order-standard_cart .order-summary,
body #order-standard_cart .order-summary .summary-container {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}
body #order-standard_cart .order-summary h2 {
    color: var(--text) !important;
    border-color: var(--border) !important;
    font-size: 1.3rem !important;
}
body #order-standard_cart .order-summary p,
body #order-standard_cart .order-summary span,
body #order-standard_cart .order-summary td,
body #order-standard_cart .order-summary small {
    color: var(--text) !important;
    font-size: 1rem !important;
}
body #order-standard_cart .cart-sidebar .card-header {
    background-color: var(--bg2) !important;
    color: var(--text) !important;
}
body #order-standard_cart .cart-sidebar .card-footer { background-color: var(--bg2) !important; }
body #order-standard_cart .cart-sidebar .list-group-item {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    font-size: 1rem !important;
}
body #order-standard_cart .cart-sidebar .list-group-item.active { background-color: var(--bg2) !important; }
body #order-standard_cart .cart-sidebar .list-group-item .badge {
    background-color: var(--bg2) !important;
    color: var(--text) !important;
}
body #order-standard_cart .cart-sidebar .card-sidebar .panel-title { color: var(--text) !important; }
body #order-standard_cart .panel .panel-heading,
body #order-standard_cart .panel .panel-footer {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
}
body #order-standard_cart .panel label { color: var(--text) !important; }
body #order-standard_cart #frmCheckout #creditCardInputFields {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}
body #order-standard_cart .domain-selection-options {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
body #order-standard_cart .domain-selection-options .option { background-color: var(--bg2) !important; }
body #order-standard_cart .sub-heading span { background: var(--bg) !important; color: var(--accent) !important; }
body #order-standard_cart .product-info {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}
body #order-standard_cart .secondary-cart-body .view-cart-tabs .tab-content {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}
body #order-standard_cart .domain-pricing .featured-tld {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}
body #order-standard_cart .domain-pricing .tld-filters .badge {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
body #order-standard_cart .domain-pricing .bg-white,
body #order-standard_cart .domain-promo-box {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
body #order-standard_cart .domain-pricing .tld-pricing-header div,
body #order-standard_cart .domain-pricing .tpl-pricing-header .tld-column {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* ══════════════════════════════════════════
   PRODUCT DETAILS
══════════════════════════════════════════ */
div.product-details div.product-icon { background-color: var(--surface) !important; }
div.product-details-tab-container {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

/* ══════════════════════════════════════════
   ANNOUNCEMENTS
══════════════════════════════════════════ */
.announcements .announcement article {
    background-color: var(--surface) !important;
    border-left-color: var(--accent2) !important;
}

/* ══════════════════════════════════════════
   KNOWLEDGEBASE
══════════════════════════════════════════ */
.kb-category a:hover, .kb-article-item:hover { background-color: var(--bg2) !important; }

/* ══════════════════════════════════════════
   SUPPORT TICKETS
══════════════════════════════════════════ */
.view-ticket .posted-by { background-color: var(--bg2) !important; color: var(--muted) !important; }
.view-ticket .card-body { border-bottom-color: var(--border) !important; }
.view-ticket .attachment-list li span { border-color: var(--border) !important; }
.view-ticket .attachment-list li figure { background-color: var(--bg2) !important; }

/* ══════════════════════════════════════════
   CREDIT CARD
══════════════════════════════════════════ */
div.credit-card { background-color: var(--surface) !important; border-color: var(--border) !important; }
div.credit-card div.card-number { background-color: var(--bg2) !important; color: var(--text) !important; }

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
.pagination > li > a, .pagination > li > span {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
}
.pagination > .active > a, .pagination > .active > span,
.page-item.active .page-link {
    background-color: var(--accent2) !important;
    border-color: var(--accent2) !important;
    color: #fff !important;
}
.pagination > li > a:hover { background: rgba(91,106,240,0.15) !important; color: var(--text) !important; }

/* ══════════════════════════════════════════
   ITEM SELECTOR
══════════════════════════════════════════ */
.item-selector .item {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--rounding-md) !important;
}
.item-selector .item:hover, .item-selector .item.active { border-color: var(--accent2) !important; }

/* ══════════════════════════════════════════
   COLLAPSABLE DROPDOWN
══════════════════════════════════════════ */
.collapsable-dropdown {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--rounding-md) !important;
}
.collapsable-dropdown-menu { background: var(--bg2) !important; border: 1px solid var(--border) !important; }

/* ══════════════════════════════════════════
   UPGRADE PAGE
══════════════════════════════════════════ */
.upgrade .products .product { background-color: var(--surface) !important; }
.upgrade .product-to-be-upgraded { background-color: var(--bg2) !important; }

/* ══════════════════════════════════════════
   PRICING
══════════════════════════════════════════ */
.pricing-card-title { color: var(--text) !important; font-weight: 900 !important; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer, footer {
    background: var(--bg2) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--muted) !important;
}
.footer a, footer a, .copyright a { color: var(--muted) !important; }
.footer a:hover, footer a:hover { color: var(--accent) !important; }
.copyright { color: var(--muted) !important; }

/* ══════════════════════════════════════════
   MISC
══════════════════════════════════════════ */
.bg-white { background: var(--surface) !important; }
[style*="background-color: white"],
[style*="background: white"],
[style*="background-color:#fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background: #fff"] { background-color: var(--surface) !important; }
.list-inline-item { color: var(--text) !important; }
.loader { color: var(--accent2) !important; }

/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Client area stats tiles */
.tile {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
.tile .stat {
    color: var(--text) !important;
}

/* Update button - high specificity override */
a.btn.btn-active-client,
a.btn.btn-active-client:link,
a.btn.btn-active-client:visited {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--accent) !important;
}
html body {
    --bg-inverted: #0e1825 !important;
}
/* Checkout account selector */
.account, .account.active {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--rounding-md) !important;
    color: var(--text) !important;
}
.account.active {
    border-color: var(--accent2) !important;
}
.account .address { color: var(--text) !important; }
.account .small { color: var(--muted) !important; }