/* =====================================================
   LUMIX SOLUTIONS — WHMCS Custom Theme
   Premium dark infrastructure-first design
   Primary Brand: #FF4C4C
   ===================================================== */

/* -------------------------------------------------------
   1. CSS VARIABLES / DESIGN TOKENS
   ------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

html {
    font-size: 14px;
}

:root {
    /* — Brand — */
    --lumix-red: #FF4C4C;
    --lumix-red-hover: #E03E3E;
    --lumix-red-active: #CC3333;
    --lumix-red-light: #FF6B6B;
    --lumix-red-glow: rgba(255, 76, 76, 0.15);
    --lumix-red-subtle: rgba(255, 76, 76, 0.08);

    /* — Neutrals (dark) — */
    --lumix-black: #0A0A0A;
    --lumix-bg: #0E0E10;
    --lumix-bg-card: #141416;
    --lumix-bg-elevated: #1A1A1E;
    --lumix-bg-input: #1E1E22;
    --lumix-bg-hover: #242428;
    --lumix-border: #2A2A2E;
    --lumix-border-light: #333338;
    --lumix-gray-dark: #3A3A40;
    --lumix-gray: #6B6B75;
    --lumix-gray-light: #9A9AA5;
    --lumix-text-muted: #8A8A95;
    --lumix-text-secondary: #B0B0BA;
    --lumix-text: #E8E8ED;
    --lumix-white: #F5F5F7;

    --white: #F5F5F7;

    /* — Map to WHMCS token system — */
    --neutral-50: #1A1A1E;
    --neutral-100: #1E1E22;
    --neutral-200: #2A2A2E;
    --neutral-300: #333338;
    --neutral-400: #6B6B75;
    --neutral-500: #8A8A95;
    --neutral-600: #9A9AA5;
    --neutral-700: #B0B0BA;
    --neutral-800: #E8E8ED;
    --neutral-900: #F5F5F7;
    --neutral-950: #FFFFFF;

    --primary-50: #2A1010;
    --primary-100: #3D1515;
    --primary-200: #5C1E1E;
    --primary-300: #8B2E2E;
    --primary-400: #CC3333;
    --primary-500: #E03E3E;
    --primary-600: #FF4C4C;
    --primary-700: #FF6B6B;
    --primary-800: #FF8A8A;
    --primary-900: #FFB3B3;
    --primary-950: #FFD6D6;

    --primary: #FF4C4C;
    --primary-lifted: #E03E3E;
    --primary-accented: #CC3333;

    --secondary: #8A8A95;
    --secondary-lifted: #9A9AA5;
    --secondary-accented: #6B6B75;

    --success: #22C55E;
    --success-lifted: #16A34A;
    --success-accented: #15803D;

    --info: #3B82F6;
    --info-lifted: #2563EB;
    --info-accented: #1D4ED8;

    --notice: #A855F7;
    --notice-lifted: #9333EA;
    --notice-accented: #7E22CE;

    --warning: #F59E0B;
    --warning-lifted: #D97706;
    --warning-accented: #B45309;

    --error: #EF4444;
    --error-lifted: #DC2626;
    --error-accented: #B91C1C;

    --grayscale: #6B6B75;
    --grayscale-lifted: #8A8A95;
    --grayscale-accented: #9A9AA5;

    --neutral: #6B6B75;
    --neutral-lifted: #8A8A95;
    --neutral-accented: #9A9AA5;

    /* — Text — */
    --text-inverted: #0E0E10;
    --text-muted: #6B6B75;
    --text-lifted: #8A8A95;
    --text-accented: #B0B0BA;
    --text: #E8E8ED;

    /* — Borders — */
    --border-muted: #1E1E22;
    --border: #2A2A2E;
    --border-lifted: #333338;
    --border-accented: #3A3A40;

    /* — Backgrounds — */
    --bg: #0E0E10;
    --bg-muted: #0A0A0A;
    --bg-lifted: #141416;
    --bg-accented: #1A1A1E;
    --bg-inverted: #F5F5F7;

    /* — Additional — */
    --yellow-200: #FDE68A;
    --yellow-300: #FCD34D;
    --teal-300: #5EEAD4;
    --teal-400: #2DD4BF;
    --emerald-300: #6EE7B7;
    --pink-400: #F472B6;

    /* — Font sizes — */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* — Spacing / outlines — */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* — Rounding (sharp) — */
    --rounding-sm: 2px;
    --rounding-md: 3px;
    --rounding-lg: 4px;

    /* — Typography — */
    --letter-spacing: 0.01em;
    --disabled-opacity: 30%;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* -------------------------------------------------------
   2. GLOBAL / BODY
   ------------------------------------------------------- */

body {
    background-color: var(--lumix-bg) !important;
    color: var(--lumix-text) !important;
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

::selection {
    background: var(--lumix-red);
    color: #fff;
}

a {
    color: var(--lumix-red-light);
    transition: color 0.15s ease;
}

a:hover {
    color: var(--lumix-red);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--lumix-white) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

p, li, span, div {
    color: var(--lumix-text);
}

small, .small, .text-muted {
    color: var(--lumix-text-muted) !important;
}

code, pre, .monospace, kbd {
    font-family: var(--font-mono) !important;
}

hr {
    border-color: var(--lumix-border);
}

/* -------------------------------------------------------
   3. HEADER
   ------------------------------------------------------- */

#header,
.header {
    background: var(--lumix-black) !important;
    border-bottom: 1px solid var(--lumix-border);
}

.header .topbar {
    background: var(--lumix-black) !important;
    border-bottom: 1px solid var(--lumix-border);
    padding: 6px 0;
}

.header .topbar .btn {
    color: var(--lumix-text-muted);
    font-size: 0.8rem;
    transition: color 0.15s;
}

.header .topbar .btn:hover {
    color: var(--lumix-red-light);
}

.header .topbar .input-group-text {
    background: transparent;
    border: none;
    color: var(--lumix-text-muted);
    font-size: 0.8rem;
}

.header .topbar .active-client .btn,
.header .topbar .btn-active-client {
    color: var(--lumix-text) !important;
    background: transparent;
    border: 1px solid var(--lumix-border);
    border-radius: 2px !important;
    font-size: 0.8rem;
}

.header .topbar .active-client .btn:hover,
.header .topbar .btn-active-client:hover {
    border-color: var(--lumix-red);
    color: var(--lumix-red-light) !important;
}

.header .topbar .btn-return-to-admin {
    background: var(--lumix-red) !important;
    color: #fff !important;
    border-color: var(--lumix-red) !important;
}

/* — Navbar — */
.navbar,
.navbar.navbar-light {
    background: var(--lumix-black) !important;
    padding: 12px 0;
}

.navbar-brand {
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    color: var(--lumix-white) !important;
    letter-spacing: -0.02em;
}

.navbar-brand .logo-img {
    max-height: 38px;
    filter: brightness(1.1);
}

.navbar .search .form-control {
    background: var(--lumix-bg-input) !important;
    border: 1px solid var(--lumix-border) !important;
    border-left: none !important;
    color: var(--lumix-text) !important;
    border-radius: 0 2px 2px 0 !important;
    font-size: 0.85rem;
    height: 38px;
}

.navbar .search .form-control:focus {
    border-color: var(--lumix-red) !important;
    box-shadow: none !important;
    outline: none !important;
}

.navbar .search .btn-default {
    background: var(--lumix-bg-input) !important;
    border: 1px solid var(--lumix-border) !important;
    border-right: none !important;
    color: var(--lumix-gray) !important;
    border-radius: 2px 0 0 2px !important;
    height: 38px;
    padding: 0 12px;
}

.navbar .search .btn-default:hover {
    color: var(--lumix-red) !important;
}

.navbar .search .btn-default:focus {
    box-shadow: none !important;
    outline: none !important;
}

.navbar .search .input-group {
    border: none !important;
    box-shadow: none !important;
}

.navbar .search .input-group-prepend {
    margin-right: 0 !important;
}

/* Also fix mobile search */
#mainNavbar .search .form-control {
    background: var(--lumix-bg-input) !important;
    border: 1px solid var(--lumix-border) !important;
    border-left: none !important;
    color: var(--lumix-text) !important;
    border-radius: 0 2px 2px 0 !important;
}

#mainNavbar .search .btn-default {
    background: var(--lumix-bg-input) !important;
    border: 1px solid var(--lumix-border) !important;
    border-right: none !important;
    color: var(--lumix-gray) !important;
    border-radius: 2px 0 0 2px !important;
}

/* Cart button */
.navbar .toolbar .btn,
.navbar .toolbar .nav-link {
    color: var(--lumix-text-muted) !important;
    transition: color 0.15s;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.navbar .toolbar .btn:hover,
.navbar .toolbar .nav-link:hover {
    color: var(--lumix-red-light) !important;
}

.navbar .toolbar .btn:focus,
.navbar .toolbar .nav-link:focus {
    box-shadow: none !important;
    outline: none !important;
}

.navbar .cart-btn .badge-info {
    background: var(--lumix-red) !important;
    color: #fff !important;
    border-radius: 2px;
    font-size: 0.65rem;
    font-weight: 700;
}

/* — Main Nav — */
.main-navbar-wrapper,
.main-navbar-wrapper .navbar {
    background: var(--lumix-bg) !important;
    border-bottom: 1px solid var(--lumix-border);
}

#nav .nav-link,
#nav > li > a,
.navbar-nav > li > a {
    color: var(--lumix-text-secondary) !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 8px 16px !important;
    transition: color 0.15s;
    border-radius: 0 !important;
}

#nav .nav-link:hover,
#nav > li > a:hover,
.navbar-nav > li > a:hover {
    color: var(--lumix-red) !important;
}

#nav .nav-link.active,
#nav > li.active > a {
    color: var(--lumix-red) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
    padding: 4px 0 !important;
}

.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item a,
.dropdown-menu li a.dropdown-item {
    color: var(--lumix-text-secondary) !important;
    font-size: 0.85rem;
    padding: 8px 16px !important;
    transition: background 0.1s, color 0.1s;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item a:hover,
.dropdown-menu li a.dropdown-item:hover {
    background: var(--lumix-bg-hover) !important;
    color: var(--lumix-red-light) !important;
}

.dropdown-menu .dropdown-divider,
.dropdown-divider {
    border-color: var(--lumix-border) !important;
}

/* -------------------------------------------------------
   4. BREADCRUMB
   ------------------------------------------------------- */

.master-breadcrumb {
    background: var(--lumix-bg) !important;
    border-bottom: 1px solid var(--lumix-border);
    padding: 10px 0;
}

.breadcrumb {
    background: transparent !important;
    margin-bottom: 0;
    padding: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--lumix-text-muted) !important;
    font-size: 0.8rem;
}

.breadcrumb-item a:hover {
    color: var(--lumix-red-light) !important;
}

.breadcrumb-item.active {
    color: var(--lumix-text-secondary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--lumix-gray-dark) !important;
}

/* -------------------------------------------------------
   5. MAIN BODY / SECTION
   ------------------------------------------------------- */

#main-body {
    background: var(--lumix-bg) !important;
    min-height: 60vh;
    padding-top: 24px;
    padding-bottom: 40px;
}

.primary-content {
    color: var(--lumix-text);
}

/* -------------------------------------------------------
   6. CARDS (panels, sidebars, info boxes)
   ------------------------------------------------------- */

.card {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 3px !important;
    color: var(--lumix-text) !important;
    box-shadow: none !important;
}

.card-header {
    background: var(--lumix-bg-elevated) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-white) !important;
    padding: 14px 20px !important;
}

.card-header .card-title,
.card-header h3,
.card-header h5 {
    color: var(--lumix-white) !important;
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
}

.card-body {
    background: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
    padding: 20px !important;
}

.card-footer {
    background: var(--lumix-bg-elevated) !important;
    border-top: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
}

.card-text {
    color: var(--lumix-text) !important;
}

/* Card accents - override WHMCS colors with Lumix red for active items */
.card-accent-blue .card-header,
.card-accent-red .card-header,
.card-accent-green .card-header,
.card-accent-gold .card-header,
.card-accent-teal .card-header,
.card-accent-pomegranate .card-header,
.card-accent-sun-flower .card-header,
.card-accent-asbestos .card-header,
.card-accent-midnight-blue .card-header {
    border-left: 3px solid var(--lumix-red) !important;
}

/* -------------------------------------------------------
   7. SIDEBAR
   ------------------------------------------------------- */

.sidebar .card-sidebar {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
}

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

.sidebar .card-sidebar .card-header .card-title {
    color: var(--lumix-white) !important;
    font-size: 0.9rem;
    font-weight: 600;
}

.sidebar .card-sidebar .card-header .card-minimise {
    color: var(--lumix-gray) !important;
}

.sidebar .list-group-item {
    background: var(--lumix-bg-card) !important;
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
    transition: background 0.1s, color 0.1s;
    font-size: 0.85rem;
}

.sidebar .list-group-item:hover {
    background: var(--lumix-bg-hover) !important;
    color: var(--lumix-red-light) !important;
}

.sidebar .list-group-item.active {
    background: var(--lumix-red-subtle) !important;
    color: var(--lumix-red-light) !important;
    border-left: 3px solid var(--lumix-red) !important;
    font-weight: 600;
}

.sidebar .list-group-item .badge {
    background: var(--lumix-red) !important;
    color: #fff !important;
    border-radius: 2px;
    font-weight: 600;
}

/* -------------------------------------------------------
   8. BUTTONS
   ------------------------------------------------------- */

.btn {
    border-radius: 2px !important;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    padding: 8px 20px;
}

.btn-primary {
    background: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--lumix-red-hover) !important;
    border-color: var(--lumix-red-hover) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-primary:active {
    background: var(--lumix-red-active) !important;
    border-color: var(--lumix-red-active) !important;
}

.btn-outline-primary {
    border-color: var(--lumix-red) !important;
    color: var(--lumix-red) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--lumix-red) !important;
    color: #fff !important;
}

.btn-default,
.btn-secondary {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background: var(--lumix-bg-hover) !important;
    border-color: var(--lumix-border-light) !important;
    color: var(--lumix-text) !important;
}

.btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}

.btn-success:hover {
    background: var(--success-lifted) !important;
    border-color: var(--success-lifted) !important;
}

.btn-danger {
    background: var(--error) !important;
    border-color: var(--error) !important;
    color: #fff !important;
}

.btn-danger:hover {
    background: var(--error-lifted) !important;
    border-color: var(--error-lifted) !important;
}

.btn-info {
    background: var(--info) !important;
    border-color: var(--info) !important;
    color: #fff !important;
}

.btn-info:hover {
    background: var(--info-lifted) !important;
    border-color: var(--info-lifted) !important;
}

.btn-warning {
    background: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #fff !important;
}

.btn-warning:hover {
    background: var(--warning-lifted) !important;
    border-color: var(--warning-lifted) !important;
}

.btn-link {
    color: var(--lumix-red-light) !important;
}

.btn-link:hover {
    color: var(--lumix-red) !important;
}

/* Button sizes */
.btn-xs {
    padding: 3px 10px;
    font-size: 0.7rem;
}

.btn-sm {
    padding: 5px 14px;
    font-size: 0.78rem;
}

.btn-lg {
    padding: 12px 28px;
    font-size: 1rem;
}

/* -------------------------------------------------------
   9. FORMS
   ------------------------------------------------------- */

.form-control {
    background: var(--lumix-bg-input) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
    border-radius: 2px !important;
    font-size: 0.9rem;
    padding: 8px 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

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

.form-control::placeholder {
    color: var(--lumix-gray) !important;
}

.form-control-label,
.form-group label,
label {
    color: var(--lumix-text-secondary) !important;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.input-group-text {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text-muted) !important;
    border-radius: 2px !important;
}

.custom-select {
    background-color: var(--lumix-bg-input) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
    border-radius: 2px !important;
}

.custom-select:focus {
    border-color: var(--lumix-red) !important;
    box-shadow: 0 0 0 2px var(--lumix-red-glow) !important;
}

textarea.form-control {
    min-height: 100px;
}

.custom-file-label {
    background: var(--lumix-bg-input) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text-muted) !important;
    border-radius: 2px !important;
}

.custom-file-label::after {
    background: var(--lumix-bg-elevated) !important;
    color: var(--lumix-text) !important;
    border-left: 1px solid var(--lumix-border) !important;
}

.form-check-input:checked {
    background-color: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
}

/* -------------------------------------------------------
   10. TABLES
   ------------------------------------------------------- */

.table {
    color: var(--lumix-text) !important;
}

.table thead th,
.table thead td {
    background: var(--lumix-bg-elevated) !important;
    color: var(--lumix-text-secondary) !important;
    border-bottom: 2px solid var(--lumix-border) !important;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px !important;
}

.table tbody td {
    background: var(--lumix-bg-card) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
    padding: 12px 16px !important;
    font-size: 0.85rem;
    vertical-align: middle;
}

.table tbody tr:hover td {
    background: var(--lumix-bg-hover) !important;
}

.table-striped tbody tr:nth-of-type(odd) td {
    background: var(--lumix-bg-elevated) !important;
}

.table-striped tbody tr:nth-of-type(odd):hover td {
    background: var(--lumix-bg-hover) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--lumix-bg-input) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
    border-radius: 2px !important;
    padding: 4px 8px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
    color: var(--lumix-text-muted) !important;
    font-size: 0.8rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
    border-radius: 2px !important;
    margin: 0 2px;
    padding: 4px 10px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--lumix-bg-hover) !important;
    border-color: var(--lumix-red) !important;
    color: var(--lumix-red-light) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.35;
}

/* -------------------------------------------------------
   11. ALERTS & BADGES
   ------------------------------------------------------- */

.alert {
    border-radius: 2px !important;
    border: 1px solid;
    font-size: 0.85rem;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #6ee7b7 !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

.badge {
    border-radius: 2px;
    font-weight: 600;
    font-size: 0.7rem;
    padding: 3px 8px;
    letter-spacing: 0.02em;
}

.badge-primary {
    background: var(--lumix-red) !important;
    color: #fff !important;
}

.badge-info {
    background: var(--info) !important;
}

.badge-success {
    background: var(--success) !important;
}

.badge-warning {
    background: var(--warning) !important;
    color: #fff !important;
}

.badge-danger {
    background: var(--error) !important;
}

/* -------------------------------------------------------
   12. STATUS LABELS (tickets, invoices)
   ------------------------------------------------------- */

.label,
.label.status {
    padding: 4px 10px;
    border-radius: 2px;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

.status-active, .status-open {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}

.status-closed, .status-cancelled {
    background: rgba(107, 107, 117, 0.2) !important;
    color: var(--lumix-gray-light) !important;
}

.status-pending, .status-on-hold {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

.status-answered, .status-customer-reply, .status-in-progress {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

/* -------------------------------------------------------
   13. TILES (Client Area Home)
   ------------------------------------------------------- */

.tiles .tile {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
    display: block;
    padding: 20px;
    text-align: center;
}

.tiles .tile:hover {
    border-color: var(--lumix-red) !important;
    background: var(--lumix-bg-elevated) !important;
}

.tiles .tile i {
    color: var(--lumix-red) !important;
    font-size: 2rem;
    margin-bottom: 8px;
}

.tiles .tile .stat {
    font-size: 2rem;
    font-weight: 800;
    color: var(--lumix-white) !important;
    font-family: var(--font-mono);
}

.tiles .tile .title {
    color: var(--lumix-text-muted) !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.tiles .tile .highlight {
    height: 3px;
    margin-top: 12px;
    border-radius: 0;
}

.tiles .tile .highlight.bg-color-blue,
.tiles .tile .highlight.bg-color-green,
.tiles .tile .highlight.bg-color-red,
.tiles .tile .highlight.bg-color-gold {
    background: var(--lumix-red) !important;
}

/* -------------------------------------------------------
   14. CLIENT HOME CARDS
   ------------------------------------------------------- */

.client-home-cards .card {
    margin-bottom: 16px;
}

.client-home-cards .card-header {
    border-left: 3px solid var(--lumix-red) !important;
}

.client-home-cards .list-group-item {
    background: var(--lumix-bg-card) !important;
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text) !important;
    transition: background 0.1s;
}

.client-home-cards .list-group-item:hover {
    background: var(--lumix-bg-hover) !important;
    color: var(--lumix-red-light) !important;
}

.client-home-cards .list-group-item .badge {
    background: var(--lumix-red) !important;
    color: #fff !important;
}

/* bg-color overrides */
.bg-color-blue,
.bg-color-green,
.bg-color-red,
.bg-color-gold {
    background: var(--lumix-red) !important;
}

/* -------------------------------------------------------
   15. HOMEPAGE
   ------------------------------------------------------- */

/* Domain search bar */
.home-domain-search {
    background: var(--lumix-bg-card) !important;
    border-bottom: 1px solid var(--lumix-border);
}

.home-domain-search h2 {
    color: var(--lumix-white) !important;
}

.home-domain-search .form-control {
    background: var(--lumix-bg-input) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

.home-domain-search .btn-primary {
    background: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
}

.home-domain-search .btn-primary:hover {
    background: var(--lumix-red-hover) !important;
}

.home-domain-search .tld-logos li {
    color: var(--lumix-text-muted) !important;
}

/* Action icon buttons */
.action-icon-btns a {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
    border-radius: 3px !important;
    transition: border-color 0.15s, background 0.15s;
    text-decoration: none;
}

.action-icon-btns a:hover {
    border-color: var(--lumix-red) !important;
    background: var(--lumix-bg-elevated) !important;
    color: var(--lumix-red-light) !important;
}

.action-icon-btns .ico-container i {
    color: var(--lumix-red) !important;
}

/* Card columns on homepage */
.card-columns.home .card {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
}

.card-columns.home .card .card-title {
    color: var(--lumix-white) !important;
}

.card-columns.home .card p {
    color: var(--lumix-text-muted) !important;
}

.card-columns.home .card .btn-outline-primary {
    border-color: var(--lumix-red) !important;
    color: var(--lumix-red) !important;
}

.card-columns.home .card .btn-outline-primary:hover {
    background: var(--lumix-red) !important;
    color: #fff !important;
}

/* -------------------------------------------------------
   16. LOGIN / REGISTER
   ------------------------------------------------------- */

.login-form .card,
.register-form .card {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    max-width: 480px;
    margin: 40px auto;
}

.login-form .card-body,
.register-form .card-body {
    padding: 40px !important;
}

.login-form .card-footer,
.register-form .card-footer {
    background: var(--lumix-bg-elevated) !important;
    border-top: 1px solid var(--lumix-border) !important;
    text-align: center;
    padding: 16px !important;
}

.login-form .card-footer small,
.register-form .card-footer small {
    color: var(--lumix-text-muted) !important;
}

.login-form .card-footer a,
.register-form .card-footer a {
    color: var(--lumix-red-light) !important;
}

.login-form h6, .login-form .h3,
.register-form h6, .register-form .h3 {
    color: var(--lumix-white) !important;
    font-weight: 700;
}

.login-form .btn-reveal-pw {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text-muted) !important;
}

/* -------------------------------------------------------
   17. INVOICES
   ------------------------------------------------------- */

.invoice-container {
    background: var(--lumix-bg) !important;
    color: var(--lumix-text) !important;
}

.invoice-header h2 {
    color: var(--lumix-white) !important;
}

.invoice-header h3 {
    color: var(--lumix-red) !important;
}

.invoice-status span {
    padding: 6px 16px;
    border-radius: 2px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}

.invoice-status .paid {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}

.invoice-status .unpaid {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

.invoice-status .draft {
    background: rgba(107, 107, 117, 0.15) !important;
    color: var(--lumix-gray-light) !important;
}

.invoice-status .cancelled {
    background: rgba(107, 107, 117, 0.15) !important;
    color: var(--lumix-gray-light) !important;
}

.invoice-status .refunded {
    background: rgba(168, 85, 247, 0.15) !important;
    color: #c084fc !important;
}

.invoice-status .collections {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

.invoice-col address,
.invoice-col .small-text {
    color: var(--lumix-text-muted) !important;
}

.invoice-col strong {
    color: var(--lumix-white) !important;
}

/* -------------------------------------------------------
   18. SUPPORT TICKETS
   ------------------------------------------------------- */

.view-ticket .card-title {
    color: var(--lumix-white) !important;
}

.ticket-reply {
    border: 1px solid var(--lumix-border);
    border-radius: 2px;
    overflow: hidden;
}

.ticket-reply .posted-by {
    background: var(--lumix-bg-elevated) !important;
    color: var(--lumix-text-muted) !important;
    padding: 10px 16px;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--lumix-border);
}

.ticket-reply .posted-by .posted-by-name {
    color: var(--lumix-white) !important;
    font-weight: 600;
}

.ticket-reply.staff .posted-by {
    border-left: 3px solid var(--lumix-red);
}

.ticket-reply .message {
    color: var(--lumix-text) !important;
    background: var(--lumix-bg-card) !important;
    line-height: 1.7;
}

.ticket-reply .attachments {
    background: var(--lumix-bg-elevated) !important;
    border-top: 1px solid var(--lumix-border);
}

.ticket-reply .attachments strong {
    color: var(--lumix-text-secondary) !important;
}

.ticket-reply .attachments a {
    color: var(--lumix-red-light) !important;
}

.requestor-badge {
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.requestor-type-owner,
.requestor-type-operator {
    background: var(--lumix-red) !important;
    color: #fff !important;
}

.requestor-type-guest {
    background: var(--lumix-bg-hover) !important;
    color: var(--lumix-text-muted) !important;
}

/* Ticket list */
.table-list tbody tr {
    cursor: pointer;
}

.table-list tbody tr:hover td {
    background: var(--lumix-bg-hover) !important;
}

.ticket-number {
    color: var(--lumix-text-muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-right: 6px;
}

.ticket-subject {
    color: var(--lumix-text) !important;
    font-weight: 500;
}

.ticket-subject.unread {
    color: var(--lumix-red-light) !important;
    font-weight: 700;
}

/* -------------------------------------------------------
   19. MODALS
   ------------------------------------------------------- */

.modal-content {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 3px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}

.modal-header {
    background: var(--lumix-bg-elevated) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    padding: 16px 20px !important;
}

.modal-header .modal-title {
    color: var(--lumix-white) !important;
    font-weight: 700;
}

.modal-header .close {
    color: var(--lumix-text-muted) !important;
    opacity: 0.8;
    text-shadow: none;
}

.modal-header .close:hover {
    color: var(--lumix-red) !important;
    opacity: 1;
}

.modal-body {
    color: var(--lumix-text) !important;
    padding: 24px !important;
}

.modal-footer {
    background: var(--lumix-bg-elevated) !important;
    border-top: 1px solid var(--lumix-border) !important;
    padding: 12px 20px !important;
}

.modal-footer .loader {
    color: var(--lumix-text-muted) !important;
}

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

.modal-localisation .item-selector .item {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
    border-radius: 2px;
    transition: border-color 0.15s;
}

.modal-localisation .item-selector .item:hover {
    border-color: var(--lumix-red) !important;
    color: var(--lumix-red-light) !important;
}

.modal-localisation .item-selector .item.active {
    background: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
    color: #fff !important;
}

/* -------------------------------------------------------
   20. FOOTER
   ------------------------------------------------------- */

#footer,
.footer {
    background: var(--lumix-black) !important;
    border-top: 1px solid var(--lumix-border);
    padding: 32px 0 24px;
    color: var(--lumix-text-muted) !important;
}

.footer .nav-link {
    color: var(--lumix-text-muted) !important;
    font-size: 0.8rem;
    transition: color 0.15s;
}

.footer .nav-link:hover {
    color: var(--lumix-red-light) !important;
}

.footer .copyright {
    color: var(--lumix-gray) !important;
    font-size: 0.75rem;
}

.footer .list-inline-item .btn {
    color: var(--lumix-text-muted) !important;
    font-size: 0.8rem;
}

.footer .list-inline-item .btn:hover {
    color: var(--lumix-red-light) !important;
}

/* -------------------------------------------------------
   21. PAGINATION
   ------------------------------------------------------- */

.pagination .page-item .page-link {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
    border-radius: 2px !important;
    margin: 0 2px;
}

.pagination .page-item .page-link:hover {
    background: var(--lumix-bg-hover) !important;
    border-color: var(--lumix-red) !important;
    color: var(--lumix-red-light) !important;
}

.pagination .page-item.active .page-link {
    background: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
    color: #fff !important;
}

.pagination .page-item.disabled .page-link {
    opacity: 0.35;
    background: var(--lumix-bg-elevated) !important;
}

/* -------------------------------------------------------
   22. TOOLTIPS & POPOVERS
   ------------------------------------------------------- */

.tooltip-inner {
    background: var(--lumix-bg-elevated) !important;
    color: var(--lumix-text) !important;
    border: 1px solid var(--lumix-border);
    border-radius: 2px;
    font-size: 0.78rem;
}

.popover {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
}

.popover-body {
    color: var(--lumix-text) !important;
}

.popover-header {
    background: var(--lumix-bg-card) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-white) !important;
}

/* Client alerts popover */
.client-alerts li a {
    color: var(--lumix-text) !important;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.client-alerts li a:hover {
    background: var(--lumix-bg-hover) !important;
}

.client-alerts li a i {
    color: var(--lumix-red) !important;
}

/* -------------------------------------------------------
   23. VIEW-FILTER / LIST GROUP
   ------------------------------------------------------- */

.view-filter-btns .list-group-item {
    background: var(--lumix-bg-card) !important;
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
}

.view-filter-btns .list-group-item:hover {
    background: var(--lumix-bg-hover) !important;
}

.view-filter-btns .list-group-item.active {
    background: var(--lumix-red-subtle) !important;
    border-color: var(--lumix-red) !important;
    color: var(--lumix-red-light) !important;
}

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

.list-group-item.active,
.list-group-item-action.active {
    background: var(--lumix-red-subtle) !important;
    border-color: var(--lumix-red) !important;
    color: var(--lumix-red-light) !important;
}

/* -------------------------------------------------------
   24. DOMAIN PRICING TABLE
   ------------------------------------------------------- */

.domain-pricing-table .pricing-table-header {
    background: var(--lumix-bg-elevated) !important;
    color: var(--lumix-white) !important;
}

/* -------------------------------------------------------
   25. KNOWLEDGEBASE
   ------------------------------------------------------- */

.kb-article-content {
    color: var(--lumix-text) !important;
    line-height: 1.8;
}

/* -------------------------------------------------------
   26. SERVER STATUS
   ------------------------------------------------------- */

.server-status .progress {
    background: var(--lumix-bg-elevated) !important;
    border-radius: 2px;
    overflow: hidden;
    height: 6px;
}

.server-status .progress-bar {
    background: var(--lumix-red) !important;
}

/* -------------------------------------------------------
   27. PRODUCT DETAILS
   ------------------------------------------------------- */

.product-details-tab .nav-tabs {
    border-bottom: 2px solid var(--lumix-border) !important;
}

.product-details-tab .nav-tabs .nav-link {
    color: var(--lumix-text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-weight: 500;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.product-details-tab .nav-tabs .nav-link:hover {
    color: var(--lumix-red-light) !important;
    border-bottom-color: var(--lumix-red-light) !important;
}

.product-details-tab .nav-tabs .nav-link.active {
    color: var(--lumix-red) !important;
    border-bottom-color: var(--lumix-red) !important;
    background: transparent !important;
}

.tab-content {
    background: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

/* -------------------------------------------------------
   28. NAV TABS (general)
   ------------------------------------------------------- */

.nav-tabs {
    border-bottom: 1px solid var(--lumix-border) !important;
}

.nav-tabs .nav-link {
    color: var(--lumix-text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    transition: color 0.15s, border-color 0.15s;
}

.nav-tabs .nav-link:hover {
    color: var(--lumix-red-light) !important;
    border-bottom-color: var(--lumix-red-light) !important;
}

.nav-tabs .nav-link.active {
    color: var(--lumix-red) !important;
    border-bottom-color: var(--lumix-red) !important;
    background: transparent !important;
}

.nav-pills .nav-link {
    color: var(--lumix-text-secondary) !important;
    border-radius: 2px !important;
}

.nav-pills .nav-link.active {
    background: var(--lumix-red) !important;
    color: #fff !important;
}

/* -------------------------------------------------------
   29. OVERLAY / SPINNER
   ------------------------------------------------------- */

#fullpage-overlay {
    background: rgba(10, 10, 10, 0.85) !important;
}

#fullpage-overlay .msg {
    color: var(--lumix-text) !important;
    font-size: 1rem;
}

/* -------------------------------------------------------
   30. MISCELLANEOUS / UTILITY
   ------------------------------------------------------- */

/* Return to admin button — keep WHMCS default positioning, only restyle colors */
.btn-return-to-admin {
    background: var(--lumix-red) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
}

.btn-return-to-admin:hover {
    background: var(--lumix-red-hover) !important;
    color: #fff !important;
}

/* Password strength meter */
.pw-strength .progress {
    background: var(--lumix-bg-elevated) !important;
    border-radius: 2px;
}

/* MX records / DNS tables */
.dns-management table {
    color: var(--lumix-text) !important;
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--lumix-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--lumix-gray-dark);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--lumix-gray);
}

/* Focus ring override */
*:focus {
    outline: none !important;
}

.form-control:focus,
.btn:focus,
.custom-select:focus {
    box-shadow: 0 0 0 2px var(--lumix-red-glow) !important;
}

/* Text color overrides */
.text-primary { color: var(--lumix-red) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--error) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-white { color: var(--lumix-white) !important; }
.text-dark { color: var(--lumix-text) !important; }
.text-light { color: var(--lumix-text-secondary) !important; }

/* Background overrides */
.bg-primary { background-color: var(--lumix-red) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--error) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-white { background-color: var(--lumix-bg-card) !important; }
.bg-light { background-color: var(--lumix-bg-elevated) !important; }
.bg-dark { background-color: var(--lumix-black) !important; }
.bg-default { background-color: var(--lumix-bg-card) !important; }

/* Responsive helpers */
@media (max-width: 767px) {
    .navbar-brand .logo-img {
        max-height: 30px;
    }

    #main-body {
        padding-top: 16px;
        padding-bottom: 24px;
    }

    .tiles .tile {
        padding: 14px 10px;
    }

    .tiles .tile .stat {
        font-size: 1.5rem;
    }

    .login-form .card-body,
    .register-form .card-body {
        padding: 24px !important;
    }
}

@media (max-width: 575px) {
    .navbar-brand {
        font-size: 1.2rem !important;
    }

    .card-body {
        padding: 14px !important;
    }
}

/* Collapse in nav */
#mainNavbar {
    background: var(--lumix-bg) !important;
}

@media (max-width: 1199px) {
    #mainNavbar {
        padding: 16px 0;
        border-top: 1px solid var(--lumix-border);
    }

    #mainNavbar .navbar-nav > li > a {
        padding: 10px 0 !important;
        border-bottom: 1px solid var(--lumix-border);
    }
}

/* -------------------------------------------------------
   31. STORE PAGES
   ------------------------------------------------------- */

.store-product-card {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
}

/* -------------------------------------------------------
   32. ANNOUNCEMENT CARDS
   ------------------------------------------------------- */

.announcement-single .card {
    background: var(--lumix-bg-card) !important;
}

.announcement-single .card-body {
    color: var(--lumix-text) !important;
    line-height: 1.7;
}

/* -------------------------------------------------------
   33. PRINT STYLES
   ------------------------------------------------------- */

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .card {
        border: 1px solid #ddd !important;
        background: #fff !important;
    }

    .card-header {
        background: #f5f5f5 !important;
        color: #000 !important;
    }

    .table thead th,
    .table thead td {
        background: #f5f5f5 !important;
        color: #000 !important;
    }

    .table tbody td {
        background: #fff !important;
        color: #000 !important;
    }
}

/* -------------------------------------------------------
   34. LUMIX BRAND BAR (custom addition)
   ------------------------------------------------------- */

.lumix-brand-bar {
    background: var(--lumix-red);
    height: 3px;
    width: 100%;
}

/* Lumix footer branding */
.lumix-footer-brand {
    color: var(--lumix-white);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.lumix-footer-brand span {
    color: var(--lumix-red) !important;
}

.lumix-footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.lumix-footer-links li {
    display: inline-block;
    margin-right: 20px;
}

.lumix-footer-links li a {
    color: var(--lumix-text-muted) !important;
    font-size: 0.8rem;
    transition: color 0.15s;
    text-decoration: none;
}

.lumix-footer-links li a:hover {
    color: var(--lumix-red-light) !important;
}

/* -------------------------------------------------------
   35. ACCOUNT PAGES (details, security, etc.)
   ------------------------------------------------------- */

.panel,
.panel-default {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
}

.panel-heading {
    background: var(--lumix-bg-elevated) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-white) !important;
}

.panel-body {
    background: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

/* -------------------------------------------------------
   36. SSL / CONFIGURATION PAGES
   ------------------------------------------------------- */

.ssl-steps .step {
    color: var(--lumix-text-muted);
}

.ssl-steps .step.active {
    color: var(--lumix-red);
    border-bottom-color: var(--lumix-red);
}

/* -------------------------------------------------------
   37. MASS PAY
   ------------------------------------------------------- */

.masspay-total {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-white) !important;
    padding: 16px;
    border-radius: 2px;
}

/* -------------------------------------------------------
   38. TWO-FACTOR AUTH
   ------------------------------------------------------- */

.two-factor-challenge .card {
    max-width: 480px;
    margin: 40px auto;
}

/* -------------------------------------------------------
   39. CONTENT / ARTICLE OVERRIDES
   ------------------------------------------------------- */

/* Force all content areas to dark backgrounds */
article,
.announcement article,
.announcement .text,
.announcements article,
.card-body article,
.card-body .announcement-text,
.markdown-content,
.kb-article-content,
.extra-padding,
.card-body .py-5,
.card-body p,
.card-body div {
    background-color: transparent !important;
    color: var(--lumix-text) !important;
}

/* Catch any inline-styled white/light backgrounds from WYSIWYG content */
.card-body [style*="background"],
.card-body [style*="background-color"],
article [style*="background"],
article [style*="background-color"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Force text colors in content areas */
.card-body [style*="color"],
article [style*="color"] {
    color: var(--lumix-text) !important;
}

/* Announcement specific */
.announcement h1,
.announcement h1 a {
    color: var(--lumix-red-light) !important;
    font-weight: 700;
}

.announcement h1 a:hover {
    color: var(--lumix-red) !important;
}

.announcement .list-inline-item {
    color: var(--lumix-text-muted) !important;
}

.announcement + .announcement {
    border-top: 1px solid var(--lumix-border);
    padding-top: 24px;
    margin-top: 24px;
}

/* Blockquotes in content */
blockquote,
.card-body blockquote {
    border-left: 3px solid var(--lumix-red) !important;
    background: var(--lumix-bg-elevated) !important;
    color: var(--lumix-text-secondary) !important;
    padding: 12px 20px;
    margin: 16px 0;
}

/* Pre/code blocks in content */
pre {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
    padding: 16px;
    border-radius: 2px;
    font-family: var(--font-mono) !important;
}

code {
    background: var(--lumix-bg-elevated) !important;
    color: var(--lumix-red-light) !important;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 0.85em;
}

pre code {
    background: transparent !important;
    color: var(--lumix-text) !important;
    padding: 0;
}

/* Ensure images in content are responsive */
.card-body img,
article img {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------
   40. SHOPPING CART / STORE
   ------------------------------------------------------- */

/* Cart container */
.store-order-container,
.order-summary-container,
.cart-body,
.shopping-cart,
#frmAddToCart {
    color: var(--lumix-text) !important;
}

/* ===== STANDARD CART PRODUCT LISTING (/store/ pages) ===== */

/* Product listing cards - white card containing product name, availability, price, order button */
section#main-body .card,
section#main-body .card-body,
section#main-body .card-header,
section#main-body .card-footer,
#main-body .card,
#main-body .card-body,
#main-body .card-header,
#main-body .card-footer {
    background: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
    border-color: var(--lumix-border) !important;
}

/* Product card header / title bar (product name + availability badge) */
.product-details .card-header,
.primary-content .card-header,
section#main-body .panel-heading {
    background: var(--lumix-bg-elevated) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-white) !important;
}

/* Product details tab container (theme.css bg: #fff) */
div.product-details-tab-container {
    background-color: var(--lumix-bg-card) !important;
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

/* Product icon (theme.css bg: #efefef) */
div.product-details div.product-icon {
    background-color: var(--lumix-bg-elevated) !important;
    color: var(--lumix-red) !important;
}

/* Product title bar with product name and "Available" badge - specific WHMCS structure */
.primary-content .card .card-header,
.primary-content .card .card-title {
    color: var(--lumix-white) !important;
}

/* ===== STANDARD CART PRODUCT CARDS (div.product.clearfix) ===== */

/* The product card container */
.product.clearfix,
div.product {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 2px !important;
    color: var(--lumix-text) !important;
}

/* Product card header (title bar with name + availability) */
.product.clearfix > header,
div.product > header {
    background: var(--lumix-bg-elevated) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-white) !important;
    padding: 14px 20px !important;
}

/* Product name */
.product.clearfix > header span[id$="-name"],
div.product > header span {
    color: var(--lumix-white) !important;
    font-weight: 600 !important;
}

/* Availability badge */
.product.clearfix > header .qty,
div.product > header .qty {
    color: var(--lumix-text-muted) !important;
    font-size: 0.85rem !important;
}

/* Product description area */
.product.clearfix .product-desc,
div.product .product-desc {
    background: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
    padding: 20px !important;
}

.product.clearfix .product-desc p,
.product.clearfix .product-desc li,
div.product .product-desc p,
div.product .product-desc li {
    color: var(--lumix-text-secondary) !important;
}

.product.clearfix .product-desc strong,
div.product .product-desc strong {
    color: var(--lumix-white) !important;
}

/* Product footer (pricing + order button) */
.product.clearfix > footer,
div.product > footer {
    background: var(--lumix-bg-card) !important;
    border-top: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
    padding: 14px 20px !important;
}

/* Product pricing */
.product.clearfix .product-pricing,
div.product .product-pricing {
    color: var(--lumix-text-secondary) !important;
}

.product.clearfix .product-pricing .price,
div.product .product-pricing .price {
    color: var(--lumix-white) !important;
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
}

/* Order Now button */
.product.clearfix .btn-order-now,
div.product .btn-order-now {
    background: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
    color: #fff !important;
    border-radius: 2px !important;
}

.product.clearfix .btn-order-now:hover,
div.product .btn-order-now:hover {
    background: var(--lumix-red-hover) !important;
    border-color: var(--lumix-red-hover) !important;
}

/* ===== CART VIEW / REVIEW & CHECKOUT ===== */

/* Cart table body - the white table rows */
.table tbody,
.table tbody tr,
.table tbody td {
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
    border-color: var(--lumix-border) !important;
}

/* Cart table thead (already dark in screenshot so reinforce) */
.table thead,
.table thead tr,
.table thead th {
    background-color: var(--lumix-bg-elevated) !important;
    color: var(--lumix-white) !important;
    border-color: var(--lumix-border) !important;
}

/* Promo code / coupon section */
.promo-code,
.promo-container,
[id*="promo"],
[class*="promo-code"] {
    background: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

/* Validate Code button (white/default styled) */
.btn-default,
.btn-light {
    background-color: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}
.btn-default:hover,
.btn-light:hover {
    background: var(--lumix-bg-hover) !important;
    border-color: var(--lumix-border-light) !important;
    color: var(--lumix-white) !important;
}

/* Checkout button in Order Summary (btn-success -> lumix red) */
.order-summary .btn-success,
.order-summary .btn-primary,
.order-summary .btn-checkout,
a[href*="cart.php?a=checkout"],
a.btn[href*="checkout"],
button[name="checkout"],
input[value="checkout"],
.btn-checkout {
    background: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
    color: #fff !important;
    border-radius: 2px !important;
}
.order-summary .btn-success:hover,
.order-summary .btn-primary:hover,
a[href*="cart.php?a=checkout"]:hover,
a.btn[href*="checkout"]:hover {
    background: var(--lumix-red-hover) !important;
    border-color: var(--lumix-red-hover) !important;
}

/* Empty Cart button */
.btn-danger,
.btn[onclick*="empty"] {
    background: var(--error) !important;
    border-color: var(--error) !important;
    color: #fff !important;
}

/* "Apply Promo Code" link */
a[data-toggle="collapse"][href*="promo"],
a[data-toggle="collapse"][href*="Promo"],
.apply-promo-link {
    color: var(--lumix-red) !important;
}

/* Order summary sidebar */
.order-summary,
.order-summary-container .card,
.cart-sidebar .card,
.order-summary-container,
div[class*="order-summary"],
.store-order-container .col-sm-5 .card,
.store-order-container .col-md-4 .card,
.store-order-container .col-lg-4 .card {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

.order-summary h4,
.order-summary h3,
.order-summary .h4,
div[class*="order-summary"] h4,
div[class*="order-summary"] h3 {
    color: var(--lumix-white) !important;
}

.order-summary .total-due-today,
.order-summary .recurring-total,
div[class*="order-summary"] .total-due-today {
    color: var(--lumix-white) !important;
    font-family: var(--font-mono) !important;
}

/* Product cards in store listings */
.store-product-card,
.product-group .card,
.products .card,
.product-listing .card,
.pricing-table .card,
.pricing-table,
.product {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

.product-group .card-body,
.products .card-body,
.product-listing .card-body,
.product .card-body {
    background: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

.product-group .card h3,
.product-group .card h4,
.product-group .card .product-name,
.products .card h3,
.products .card h4,
.product h3, .product h4,
.product .product-name {
    color: var(--lumix-white) !important;
}

.product .price,
.product-group .price,
.products .price,
.pricing-table .price {
    color: var(--lumix-text-secondary) !important;
}

.product .price .amount,
.pricing-table .price .amount {
    color: var(--lumix-white) !important;
    font-family: var(--font-mono) !important;
}

/* Cart configure page */
.store-order-container h2,
.store-order-container h3,
.store-order-container h4 {
    color: var(--lumix-white) !important;
}

.store-order-container p {
    color: var(--lumix-text-secondary) !important;
}

/* Payment term selectors */
.payment-term .custom-select,
.payment-term select {
    background-color: var(--lumix-bg-input) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

/* Config options */
.config-option,
.configurable-option {
    color: var(--lumix-text) !important;
}

/* Domain tabs in cart */
.store-domain-tabs .nav-link {
    color: var(--lumix-text-muted) !important;
    background: transparent !important;
}

.store-domain-tabs .nav-link.active,
.store-domain-tabs .nav-link:hover {
    color: var(--lumix-red) !important;
    border-bottom-color: var(--lumix-red) !important;
}

/* Cart info/alert bars */
.store-order-container .alert,
.cart-body .alert {
    border-radius: 2px !important;
}

.store-order-container .alert-info,
.cart-body .alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    color: #93c5fd !important;
}

.store-order-container .alert-info a {
    color: var(--lumix-red-light) !important;
}

/* "Order Now" button in store */
.btn-order-now,
.product .btn-success,
.product .btn-primary,
.store-product-card .btn {
    background: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
    color: #fff !important;
    border-radius: 2px !important;
}

.btn-order-now:hover,
.product .btn-success:hover,
.product .btn-primary:hover,
.store-product-card .btn:hover {
    background: var(--lumix-red-hover) !important;
    border-color: var(--lumix-red-hover) !important;
}

/* "Continue" button in cart */
.store-order-container .btn-primary,
.order-summary .btn-primary,
#frmAddToCart .btn-primary,
button[value="addtocart"],
a[href*="cart.php"] .btn-primary {
    background: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
    color: #fff !important;
}

/* All white/light backgrounds in cart area - nuclear override */
.store-order-container .card,
.store-order-container .panel,
.store-order-container .well,
.store-order-container .box,
.store-order-container [style*="background"],
.store-order-container [style*="background-color"],
.order-summary [style*="background"],
.order-summary [style*="background-color"] {
    background: var(--lumix-bg-card) !important;
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

/* -------------------------------------------------------
   41. REGISTER / CHECKOUT FORMS
   ------------------------------------------------------- */

/* Registration form specifics */
.register-form .card,
form[action*="register"] .card {
    background: var(--lumix-bg-card) !important;
}

/* Input groups with icons (prepend) */
.input-group .input-group-prepend .input-group-text {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    border-right: none !important;
    color: var(--lumix-gray) !important;
    border-radius: 2px 0 0 2px !important;
}

.input-group .input-group-append .input-group-text {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    border-left: none !important;
    color: var(--lumix-gray) !important;
    border-radius: 0 2px 2px 0 !important;
}

.input-group .form-control {
    border-radius: 2px !important;
}

.input-group .input-group-prepend + .form-control {
    border-left: none !important;
    border-radius: 0 2px 2px 0 !important;
}

/* Phone number input */
.iti__flag-container,
.iti__selected-flag {
    background: var(--lumix-bg-elevated) !important;
    border-right: 1px solid var(--lumix-border) !important;
}

.iti__country-list {
    background: var(--lumix-bg-elevated) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

.iti__country:hover {
    background: var(--lumix-bg-hover) !important;
}

.iti__country-name {
    color: var(--lumix-text) !important;
}

.iti__dial-code {
    color: var(--lumix-text-muted) !important;
}

/* Mailing list toggle */
.btn-toggle,
.toggle-btn {
    border-radius: 2px !important;
}

/* -------------------------------------------------------
   42. DYNAMIC STORE PAGES (override inline CSS vars)
   ------------------------------------------------------- */

.dynamic-landing-page {
    --bg-color: var(--lumix-bg) !important;
    --bg-light: var(--lumix-bg-card) !important;
    --bg-dark: var(--lumix-bg-elevated) !important;
    --text-color: var(--lumix-text) !important;
    --text-secondary: var(--lumix-text-muted) !important;
    --primary-color: var(--lumix-red) !important;
    --secondary-color: var(--lumix-red-hover) !important;
    --accent-color: var(--lumix-red-light) !important;
}

/* -------------------------------------------------------
   43. GLOBAL WHITE BACKGROUND CATCH-ALL
   ------------------------------------------------------- */

/* Override any remaining white/light backgrounds from WHMCS core */
.bg-white,
.bg-light,
.panel-default,
.panel-body,
.well,
.jumbotron {
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

/* Any card/panel/container with explicit white bg */
[style*="background: white"],
[style*="background-color: white"],
[style*="background:#fff"],
[style*="background-color:#fff"],
[style*="background: #fff"],
[style*="background-color: #fff"],
[style*="background:#FFF"],
[style*="background-color:#FFF"],
[style*="background: #FFF"],
[style*="background-color: #FFF"],
[style*="background: rgb(255"],
[style*="background-color: rgb(255"],
[style*="background:#ffffff"],
[style*="background-color:#ffffff"],
[style*="background: #ffffff"],
[style*="background-color: #ffffff"] {
    background: var(--lumix-bg-card) !important;
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

/* Product availability badges */
.badge-available,
.availability-status {
    color: var(--success) !important;
    font-size: 0.75rem;
}

/* -------------------------------------------------------
   44. STORE.CSS OVERRIDES (landing pages)
   ------------------------------------------------------- */

/* Product option cards (the white cards on store landing pages) */
.landing-page .product-options .item {
    background-color: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 2px !important;
    color: var(--lumix-text) !important;
}
.landing-page .product-options .item .btn {
    background-color: var(--lumix-red) !important;
    color: #fff !important;
    border-radius: 2px !important;
}
.landing-page .product-options .item .btn:hover {
    background-color: var(--lumix-red-hover) !important;
}
.landing-page .product-options p {
    color: var(--lumix-text-secondary) !important;
}
.landing-page .product-options .price {
    color: var(--lumix-text) !important;
}
.landing-page .product-options .icon {
    color: var(--lumix-red) !important;
}
.landing-page .product-options h4 {
    color: var(--lumix-white) !important;
}

/* Mail services variant */
.landing-page.mail-services .product-options {
    background-color: var(--lumix-bg-elevated) !important;
}
.landing-page.mail-services .product-options .item {
    background-color: var(--lumix-bg-card) !important;
}
.landing-page.mail-services .product-options .icon {
    color: var(--lumix-red) !important;
}
.landing-page.mail-services .product-options .btn-buy {
    background-color: var(--lumix-red) !important;
}
.landing-page.mail-services .product-options .price {
    color: var(--lumix-red) !important;
}

/* Hero sections */
.landing-page .hero {
    color: var(--lumix-text) !important;
}
.landing-page .hero h2,
.landing-page .hero h3 {
    color: var(--lumix-white) !important;
}

/* Navbar on store landing pages */
.landing-page .navbar .navbar-nav > li.active > a {
    background: var(--lumix-bg-elevated) !important;
    color: var(--lumix-white) !important;
}
.landing-page .navbar .navbar-nav > li > a {
    color: var(--lumix-text) !important;
}

/* Tab content areas */
.landing-page .tab-content {
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
    border: 1px solid var(--lumix-border) !important;
}
.landing-page .tab-content h1,
.landing-page .tab-content h2,
.landing-page .tab-content h3,
.landing-page .tab-content h4,
.landing-page .tab-content h5 {
    color: var(--lumix-white) !important;
}

/* Tab nav */
.landing-page .nav-tabs > li > a,
.landing-page .nav-tabs > li > a:focus {
    background-color: var(--lumix-bg-elevated) !important;
    border: 0 !important;
    color: var(--lumix-text-muted) !important;
}
.landing-page .nav-tabs > li > a:hover {
    background-color: var(--lumix-bg-hover) !important;
    color: var(--lumix-text) !important;
}
.landing-page .nav-tabs > li.active > a,
.landing-page .nav-tabs > li.active > a:focus,
.landing-page .nav-tabs > li.active > a:hover {
    background-color: var(--lumix-bg-card) !important;
    border-top: 3px solid var(--lumix-red) !important;
    color: var(--lumix-white) !important;
}

/* Light grey background sections */
.landing-page .light-grey-bg {
    background-color: var(--lumix-bg-elevated) !important;
    color: var(--lumix-text) !important;
}

/* Features sections */
.landing-page .features {
    background-color: var(--lumix-bg-elevated) !important;
    color: var(--lumix-text) !important;
}
.landing-page .features h2,
.landing-page .features h3 {
    color: var(--lumix-white) !important;
}

/* Pricing items */
.landing-page .pricing-item {
    border: 1px solid var(--lumix-border) !important;
    background: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}
.landing-page .pricing-item .header h4 {
    color: var(--lumix-white) !important;
}
.landing-page .pricing-item .price {
    color: var(--lumix-red) !important;
}
.landing-page .pricing-item ul li {
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}
.landing-page .pricing-item .feature-heading {
    background-color: var(--lumix-bg-elevated) !important;
    color: var(--lumix-white) !important;
}

/* Get started / CTA sections */
.landing-page .get-started {
    background-color: var(--lumix-bg-elevated) !important;
    color: var(--lumix-text) !important;
}
.landing-page .get-started h2 {
    color: var(--lumix-white) !important;
}
.landing-page .get-started .btn-order-now {
    background-color: var(--lumix-red) !important;
    color: #fff !important;
}
.landing-page .get-started .price {
    color: var(--lumix-white) !important;
}

/* Content blocks */
.landing-page .content-block {
    color: var(--lumix-text) !important;
}
.landing-page .content-block h2,
.landing-page .content-block h3,
.landing-page .content-block h4 {
    color: var(--lumix-white) !important;
}

/* SSL landing page overrides */
.landing-page.ssl .validation-levels {
    background-color: var(--lumix-bg-elevated) !important;
}
.landing-page.ssl .validation-levels h3 {
    color: var(--lumix-white) !important;
}
.landing-page.ssl .validation-levels .item {
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
    border: 1px solid var(--lumix-border) !important;
}
.landing-page.ssl .validation-levels .item h4 {
    color: var(--lumix-white) !important;
}
.landing-page.ssl .validation-levels .item .btn {
    background-color: var(--lumix-red) !important;
    color: #fff !important;
}

/* SSL browser notice */
.landing-page.ssl .browser-notice .wrapper {
    background-color: var(--lumix-bg-card) !important;
    border-top: 4px solid var(--lumix-red) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    color: var(--lumix-text) !important;
}

/* SSL detailed info */
.landing-page.ssl .detailed-info .card-header {
    background-color: var(--lumix-bg-elevated) !important;
    color: var(--lumix-white) !important;
    border: 1px solid var(--lumix-border) !important;
}
.landing-page.ssl .detailed-info .card-body {
    background-color: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

/* SSL pricing table */
.landing-page.ssl .row-pricing-table ul li {
    background-color: var(--lumix-bg-card) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

/* SSL certificate options */
.landing-page.ssl .certificate-options .btn {
    background-color: var(--lumix-bg-elevated) !important;
    color: var(--lumix-text) !important;
    border: 1px solid var(--lumix-border) !important;
}

/* Sitebuilder/Weebly upgrade containers */
.sitebuilder-upgrade-container,
.weebly-upgrade-container {
    border: 1px solid var(--lumix-border) !important;
    background: var(--lumix-bg-card) !important;
}
.sitebuilder-upgrade-container .promo-wrapper,
.weebly-upgrade-container .promo-wrapper {
    background-color: var(--lumix-bg-elevated) !important;
    color: var(--lumix-text) !important;
}

/* Standout features */
.landing-page .standout-features {
    color: var(--lumix-text) !important;
}
.landing-page .standout-features h2,
.landing-page .standout-features h3 {
    color: var(--lumix-white) !important;
}

/* -------------------------------------------------------
   45. DYNAMIC-STORE.CSS OVERRIDES
   ------------------------------------------------------- */

/* Background gradient (hardcoded to white) */
.background-gradient {
    background: linear-gradient(135deg, var(--lumix-bg-card) 0%, var(--lumix-bg) 100%) !important;
}

/* Background sections */
.background-light {
    background: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}
.background-main {
    background: var(--lumix-bg) !important;
    color: var(--lumix-text) !important;
}

/* Pricing cards */
.pricing-card {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
.pricing-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    border-color: var(--lumix-red) !important;
}

.plan-name {
    color: var(--lumix-white) !important;
}
.price-amount {
    color: var(--lumix-red) !important;
}
.price-period {
    color: var(--lumix-text-muted) !important;
}
.plan-description {
    color: var(--lumix-text-secondary) !important;
}
.feature-item {
    color: var(--lumix-text) !important;
}

/* Plan button */
.plan-button {
    background: var(--lumix-red) !important;
    color: #fff !important;
    border: 2px solid var(--lumix-red) !important;
    border-radius: 2px !important;
}
.plan-button:hover {
    background: var(--lumix-red-hover) !important;
    border-color: var(--lumix-red-hover) !important;
    color: #fff !important;
}

/* Feature table */
.table-wrapper {
    background: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.buy-row {
    background: var(--lumix-bg-elevated) !important;
    border-top: 2px solid var(--lumix-border) !important;
}

/* CTA buttons */
.cta-primary-button {
    background: var(--lumix-red) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(255, 76, 76, 0.3) !important;
}
.cta-primary-button:hover {
    background: var(--lumix-red-hover) !important;
}
.cta-section--gradient .cta-primary-button {
    background: var(--lumix-red) !important;
    color: #fff !important;
}
.cta-secondary-button {
    background: transparent !important;
    color: var(--lumix-red) !important;
    border: 2px solid var(--lumix-red) !important;
}
.cta-secondary-button:hover {
    background: var(--lumix-red) !important;
    color: #fff !important;
}

/* Hero section in dynamic store */
.hero-logo-container {
    background: rgba(20, 20, 22, 0.05) !important;
}
.hero-title {
    color: var(--lumix-white) !important;
}
.hero-subtitle {
    color: var(--lumix-text-secondary) !important;
}

/* CTA section */
.cta-section {
    background: var(--lumix-bg-elevated) !important;
}
.cta-section--gradient {
    background: linear-gradient(135deg, var(--lumix-bg-elevated) 0%, var(--lumix-bg) 100%) !important;
}
.cta-title {
    color: var(--lumix-white) !important;
}
.cta-subtitle {
    color: var(--lumix-text-secondary) !important;
}

/* FAQ section within dynamic store */
.faq-question {
    color: var(--lumix-white) !important;
}
.faq-answer {
    color: var(--lumix-text-secondary) !important;
}
.faq-item {
    border-bottom: 1px solid var(--lumix-border) !important;
}

/* Content block / features grid in dynamic pages */
.features-table-title,
.pricing-title {
    color: var(--lumix-white) !important;
}
.features-table-subtitle,
.pricing-subtitle {
    color: var(--lumix-text-secondary) !important;
}

/* Dynamic store table */
.features-table th {
    background: var(--lumix-bg-elevated) !important;
    color: var(--lumix-white) !important;
    border-bottom: 2px solid var(--lumix-border) !important;
}
.features-table td {
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}
.features-table tr:hover td {
    background: var(--lumix-bg-hover) !important;
}

/* Table CTA button */
.table-cta-button {
    background: var(--lumix-red) !important;
    color: #fff !important;
    border-radius: 2px !important;
}
.table-cta-button:hover {
    background: var(--lumix-red-hover) !important;
}

/* -------------------------------------------------------
   46. INVOICE.CSS OVERRIDES (standalone invoice/quote pages)
   ------------------------------------------------------- */

/* Standalone invoice pages that use invoice.css Bootstrap bundle */
.invoice-container,
.quote-container {
    background: var(--lumix-bg) !important;
    color: var(--lumix-text) !important;
}

/* -------------------------------------------------------
   47. OAUTH.CSS OVERRIDE
   ------------------------------------------------------- */

/* OAuth consent / login pages */
.content-container {
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

/* -------------------------------------------------------
   48. TEMPLATE bg-white / bg-light CLASS OVERRIDES (high specificity)
   ------------------------------------------------------- */

/* Store order page tab-content */
.store-order-container .tab-content.bg-white,
.store-order-container .bg-white,
section#main-body .bg-white,
section#main-body .bg-light,
main .bg-white,
main .bg-light,
#main-body .bg-white,
#main-body .bg-light,
.main-content .bg-white,
.main-content .bg-light,
.container .bg-white,
.container .bg-light,
.container-fluid .bg-white,
.container-fluid .bg-light {
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

/* Catch .tab-content.bg-white specifically from store/order.tpl and clientareaproductdetails.tpl */
.tab-content.bg-white {
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

/* Responsive tabs (mobile) */
.responsive-tabs-sm {
    background: var(--lumix-bg-card) !important;
    border-color: var(--lumix-border) !important;
}
.responsive-tabs-sm-connector .channel,
.responsive-tabs-sm-connector .bottom-border {
    border-color: var(--lumix-border) !important;
}

/* Disabled buttons white override */
.btn-default,
.btn-default:hover,
.btn-default:focus {
    background-color: var(--lumix-bg-elevated) !important;
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

/* Navbar light (used in store landing pages) */
.navbar-light,
.navbar-light.bg-light {
    background-color: var(--lumix-bg-elevated) !important;
}
.navbar-light .navbar-nav .nav-link {
    color: var(--lumix-text) !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--lumix-white) !important;
}
.navbar-light .navbar-toggler {
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

/* -------------------------------------------------------
   49. CART LAYOUT WRAPPERS (remove light gutters)
   ------------------------------------------------------- */

/* The cart/review page can still expose light backgrounds on wrapper rows/columns.
   Force those wrapper layers to dark so no white/gray gutters show through. */
body.primary-bg-color section#main-body > .container,
body.primary-bg-color section#main-body > .container-fluid,
section#main-body .store-order-container,
section#main-body .store-order-container > .row,
section#main-body .store-order-container > .row > [class*="col-"],
section#main-body .cart-body,
section#main-body .shopping-cart,
section#main-body .order-summary-container {
    background-color: var(--lumix-bg) !important;
    color: var(--lumix-text) !important;
}

/* Keep spacing columns dark even when Bootstrap gutter spacing is visible */
section#main-body .store-order-container .row {
    --bs-gutter-x: 1.5rem;
}

/* -------------------------------------------------------
   50. WHMCS STANDARD_CART FALLBACK OVERRIDES
   ------------------------------------------------------- */

/* Cart/checkout orderform templates are loaded separately in WHMCS and can
   still inject light backgrounds. Force the full cart shell dark. */
#order-standard_cart,
#order-standard_cart .row,
#order-standard_cart [class*="col-"],
#order-standard_cart .cart-body,
#order-standard_cart .secondary-cart-body,
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-tabs,
#order-standard_cart .cart-sidebar,
#order-standard_cart .summary-container,
#order-standard_cart .order-summary,
#order-standard_cart .panel,
#order-standard_cart .panel-body,
#order-standard_cart .panel-default,
#order-standard_cart .well {
    background-color: var(--lumix-bg) !important;
    color: var(--lumix-text) !important;
    border-color: var(--lumix-border) !important;
}

/* Item cards/blocks that can appear white on cart + configure pages */
#order-standard_cart .item,
#order-standard_cart .item-title,
#order-standard_cart .product-title,
#order-standard_cart .products,
#order-standard_cart .sub-heading,
#order-standard_cart .cart-summary,
#order-standard_cart .totals,
.product-info,
.summary-container,
#order-standard_cart .alert,
#order-standard_cart .card,
#order-standard_cart .card-body,
#order-standard_cart .card-header {
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
    border-color: var(--lumix-border) !important;
}

/* Form controls inside cart flow */
#order-standard_cart .form-control,
#order-standard_cart .custom-select,
#order-standard_cart select,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="number"] {
    background-color: var(--lumix-bg-input) !important;
    color: var(--lumix-text) !important;
    border-color: var(--lumix-border) !important;
}

/* -------------------------------------------------------
   51. GLOBAL ANTI-WHITE SWEEP (all pages)
   ------------------------------------------------------- */

/* Core content wrappers that can still inherit light defaults */
section#main-body,
section#main-content,
.main-content,
.primary-content,
section#main-body > .container,
section#main-body > .container-fluid {
    background-color: var(--lumix-bg) !important;
    color: var(--lumix-text) !important;
}

/* Generic WHMCS/Bootstrap white surfaces */
.panel,
.panel-default,
.panel-body,
.well,
.jumbotron,
.list-group-item,
.dropdown-menu,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.popover,
.popover-body,
.tooltip-inner,
.nav-tabs,
.nav-tabs .nav-link,
.tab-content,
.table,
.table-responsive,
.table td,
.table th,
.table tbody tr,
.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover,
div[style*="background: white"],
div[style*="background-color: white"],
div[style*="background:#fff"],
div[style*="background-color:#fff"],
div[style*="background: #fff"],
div[style*="background-color: #fff"],
div[style*="background:#ffffff"],
div[style*="background-color:#ffffff"],
div[style*="background: #ffffff"],
div[style*="background-color: #ffffff"] {
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
    border-color: var(--lumix-border) !important;
}

/* Keep section backgrounds dark even if utility classes are added */
section#main-body .bg-light,
section#main-body .bg-white,
section#main-content .bg-light,
section#main-content .bg-white,
.main-content .bg-light,
.main-content .bg-white {
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
}

/* -------------------------------------------------------
   ANIMATIONS (subtle)
   ------------------------------------------------------- */

@keyframes lumix-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.card,
.tile,
.alert {
    animation: lumix-fadeIn 0.3s ease-out;
}

/* -------------------------------------------------------
   52. DIRECT OVERRIDES FOR REMAINING WHITE GAPS
   ------------------------------------------------------- */

body section#main-body#main-body,
body #main-body#main-body {
    background: var(--lumix-bg) !important;
    background-color: var(--lumix-bg) !important;
}

body #main-body#main-body .product-info,
body .product-info.product-info {
    background: var(--lumix-bg-card) !important;
    background-color: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    padding: 15px;
    border-radius: 4px;
}

body #main-body#main-body .summary-container,
body .summary-container.summary-container {
    background: var(--lumix-bg) !important;
    background-color: var(--lumix-bg) !important;
}

/* -------------------------------------------------------
   53. MARKDOWN EDITOR
   ------------------------------------------------------- */

body .md-editor,
body .md-editor .md-header,
body .md-editor .md-footer,
body .md-editor .md-preview,
body .md-editor .btn-toolbar {
    background: var(--lumix-bg-card) !important;
    background-color: var(--lumix-bg-card) !important;
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

body .md-editor > textarea,
body .md-editor .md-input {
    background: var(--lumix-bg-input) !important;
    background-color: var(--lumix-bg-input) !important;
    color: var(--lumix-text) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 4px !important;
}

.md-editor .btn-default {
    background-color: var(--lumix-bg-elevated) !important;
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text) !important;
}

.md-editor .btn-default:hover,
.md-editor .btn-default:focus {
    background-color: var(--lumix-bg-hover) !important;
    color: var(--lumix-white) !important;
}

.md-editor.active {
    border-color: var(--lumix-red) !important;
    box-shadow: 0 0 0 1px var(--lumix-red) !important;
}