/* =====================================================
   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;

    /* — Portal-wide layout rhythm — */
    --lumix-content-max: 1180px;
    --lumix-content-gutter: 16px;
    --lumix-section-gap: 20px;
}

/* -------------------------------------------------------
   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);
    position: relative;
    z-index: 1200;
}

.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;
}

.lumix-brand-bar {
    height: 2px;
    background: linear-gradient(90deg, var(--lumix-red) 0%, rgba(255, 76, 76, 0.45) 35%, rgba(255, 76, 76, 0.08) 100%);
}

.header {
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.98), rgba(13, 13, 15, 0.98)) !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);
}

.lumix-header-main {
    padding: 20px 0 16px;
    border-bottom: 1px solid rgba(42, 42, 46, 0.65);
}

.lumix-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.lumix-brand-lockup .navbar-brand {
    margin-right: 0 !important;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: 10px;
    text-decoration: none;
}

.lumix-logo-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}

.lumix-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2ch;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lumix-white) !important;
}

.lumix-wordmark-strong {
    color: var(--lumix-red) !important;
    font-weight: 800;
}

.lumix-wordmark-light {
    color: var(--lumix-white) !important;
    font-weight: 300;
}

.lumix-brand-caption {
    align-items: center;
    padding-left: 14px;
    border-left: 1px solid var(--lumix-border);
    color: var(--lumix-text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lumix-header-search {
    flex: 1 1 auto;
    max-width: 420px;
    margin-left: auto;
}

.lumix-header-search .search {
    width: 100%;
}

.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::placeholder {
    color: var(--lumix-text-muted) !important;
}

.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;
}

.lumix-header-tools {
    align-items: center;
    margin-left: 20px;
}

.lumix-header-tools .nav-item {
    display: flex;
    align-items: center;
}

.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;
}

.lumix-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px !important;
    border: 1px solid var(--lumix-red) !important;
    background: var(--lumix-red) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.lumix-header-cta:hover,
.lumix-header-cta:focus {
    background: var(--lumix-red-hover) !important;
    border-color: var(--lumix-red-hover) !important;
    color: #fff !important;
}

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

.lumix-header-menu {
    background:
        linear-gradient(180deg, rgba(14, 14, 16, 0.98), rgba(17, 17, 19, 0.98)) !important;
    position: relative;
    z-index: 1210;
    overflow: visible;
}

.lumix-header-menu .container {
    position: relative;
}

.lumix-header-menu .navbar-collapse {
    min-height: 44px;
    overflow: visible;
}

#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 {
    gap: 4px;
}

#nav > li > a,
.main-navbar-wrapper .navbar-nav > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px !important;
    letter-spacing: 0.01em;
}

#nav > li > a::after,
.main-navbar-wrapper .navbar-nav > li > a::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 8px;
    left: 16px;
    height: 1px;
    background: transparent;
    transition: background-color 0.15s ease;
}

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

#nav .nav-link:hover::after,
#nav > li > a:hover::after,
.main-navbar-wrapper .navbar-nav > li > a:hover::after,
#nav .nav-link.active::after,
#nav > li.active > a::after {
    background: var(--lumix-red);
}

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

.main-navbar-wrapper .navbar-nav.ml-auto > li > a {
    color: var(--lumix-white) !important;
    font-weight: 600;
}

.main-navbar-wrapper .navbar-nav.ml-auto > li > a:hover,
.main-navbar-wrapper .navbar-nav.ml-auto > li.active > a {
    color: var(--lumix-red-light) !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;
    z-index: 1300 !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;
    }

    .lumix-brand-caption {
        display: none !important;
    }

    #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;
    }

    .lumix-header-main {
        padding: 16px 0 14px;
    }

    .lumix-header-search {
        max-width: none;
    }

    .lumix-logo-img {
        width: 30px;
        height: 30px;
    }

    .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);
    }

    #mainNavbar {
        padding-top: 10px;
        padding-bottom: 6px;
    }

    #mainNavbar .navbar-nav > li > a::after {
        display: none;
    }
}

/* -------------------------------------------------------
   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. PORTAL-WIDE VISUAL LAYER
   ------------------------------------------------------- */

body[class*="lumix-page-"]:not(.lumix-page-homepage) {
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 76, 76, 0.12), transparent 24%),
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.04), transparent 18%),
        linear-gradient(180deg, #090909 0%, #0d0d0f 54%, #090909 100%) !important;
    color: var(--lumix-text) !important;
    position: relative;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage)::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(42, 42, 46, 0.32) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 42, 46, 0.32) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.48), transparent 82%);
    pointer-events: none;
    z-index: 0;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) #header {
    position: relative;
    z-index: 1200;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) #main-body,
body[class*="lumix-page-"]:not(.lumix-page-homepage) #footer {
    position: relative;
    z-index: 1;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) #main-body {
    background: transparent !important;
    padding-top: 30px;
    padding-bottom: 56px;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) #main-body > .container,
body[class*="lumix-page-"]:not(.lumix-page-homepage) #main-body > .container-fluid {
    position: relative;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .master-breadcrumb {
    background:
        linear-gradient(180deg, rgba(14, 14, 16, 0.92), rgba(16, 16, 18, 0.92)) !important;
    border-top: 1px solid rgba(42, 42, 46, 0.6);
    border-bottom: 1px solid rgba(42, 42, 46, 0.92);
    backdrop-filter: blur(10px);
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .sidebar .card-sidebar,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .card,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .tiles .tile,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .table-container,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .login-form .card,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .register-form .card,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .alert,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .well,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .panel {
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.96), rgba(14, 14, 16, 0.96)) !important;
    border-color: rgba(42, 42, 46, 0.96) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .card-header,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .panel-heading,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .tiles .tile,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .sidebar .card-sidebar .card-header {
    position: relative;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .card-header::before,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .sidebar .card-sidebar .card-header::before,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .tiles .tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, var(--lumix-red), transparent);
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .tiles .tile {
    overflow: hidden;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .tiles .tile:hover,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .card:hover,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .sidebar .card-sidebar:hover {
    border-color: rgba(255, 76, 76, 0.55) !important;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .table thead th,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .table thead td {
    background: rgba(23, 23, 25, 0.98) !important;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .table tbody td,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .dataTables_wrapper .dataTables_length select,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .dataTables_wrapper .dataTables_filter input {
    background: rgba(17, 17, 19, 0.96) !important;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .client-home-cards .card-header,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .sidebar .card-sidebar .card-header,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .card-header {
    background:
        linear-gradient(180deg, rgba(24, 24, 26, 0.98), rgba(20, 20, 22, 0.98)) !important;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .list-group-item.active,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .client-home-cards .list-group-item.active {
    background:
        linear-gradient(90deg, rgba(255, 76, 76, 0.12), rgba(18, 18, 20, 0.96)) !important;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .page-header,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .content-header {
    margin-bottom: 20px;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .page-header h1,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .content-header h1,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .page-header .h2,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .content-header .h2 {
    color: var(--lumix-white) !important;
    letter-spacing: -0.025em;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .page-header p,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .content-header p {
    color: var(--lumix-text-muted) !important;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) #footer,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .footer {
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.96), rgba(13, 13, 15, 0.98)) !important;
    border-top: 1px solid rgba(42, 42, 46, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 76, 76, 0.06);
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .lumix-footer-grid {
    position: relative;
    padding-top: 8px;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .lumix-footer-grid::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    width: 140px;
    height: 1px;
    background: linear-gradient(90deg, var(--lumix-red), transparent);
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .table-container,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .table-responsive,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .transactions-container {
    border-radius: 3px;
    overflow: hidden;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .pagination > li > a,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .pagination > li > span,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .page-item .page-link {
    background: rgba(18, 18, 20, 0.96) !important;
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .pagination > li > a:hover,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .page-item .page-link:hover {
    border-color: var(--lumix-red) !important;
    color: var(--lumix-red-light) !important;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .pagination > .active > a,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .pagination > .active > span,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .page-item.active .page-link {
    background: var(--lumix-red) !important;
    border-color: var(--lumix-red) !important;
    color: #fff !important;
}

/* -------------------------------------------------------
   36. 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;
}

body > .invoice-container,
body > .quote-container {
    position: relative;
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 28px !important;
    max-width: 1280px;
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 76, 76, 0.1), transparent 24%),
        linear-gradient(180deg, rgba(16, 16, 18, 0.98), rgba(12, 12, 14, 0.98)) !important;
    border: 1px solid rgba(42, 42, 46, 0.96);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

body > .invoice-container::before,
body > .quote-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(42, 42, 46, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 42, 46, 0.22) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.52), transparent 88%);
    pointer-events: none;
}

body > .invoice-container > *,
body > .quote-container > * {
    position: relative;
    z-index: 1;
}

/* -------------------------------------------------------
   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;
}

/* -------------------------------------------------------
   54. HOMEPAGE LANDING PAGE
   ------------------------------------------------------- */

.lumix-homepage-shell {
    width: 100%;
}

.lumix-gaming-home {
    color: #f5f7fb;
    background:
        radial-gradient(circle at top left, rgba(255, 76, 76, 0.22), transparent 28%),
        radial-gradient(circle at top right, rgba(84, 181, 255, 0.16), transparent 24%),
        linear-gradient(180deg, #0b0d12 0%, #0f131c 45%, #0a0d12 100%);
    margin: 0 calc(50% - 50vw);
    padding-bottom: 72px;
}

.lumix-shell {
    width: min(1180px, calc(100vw - 32px));
    margin: 0 auto;
}

.lumix-section,
.lumix-hero,
.lumix-trust-band {
    position: relative;
}

.lumix-hero {
    padding: 84px 0 48px;
    overflow: hidden;
}

.lumix-hero::before {
    content: "";
    position: absolute;
    inset: 32px auto auto 50%;
    width: 640px;
    height: 640px;
    transform: translateX(-10%);
    background: radial-gradient(circle, rgba(255, 76, 76, 0.16), transparent 62%);
    pointer-events: none;
}

.lumix-hero .lumix-shell {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 28px;
    align-items: center;
}

.lumix-kicker,
.lumix-trust-band .eyebrow {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ff8b8b;
    margin-bottom: 16px;
}

.lumix-hero h1,
.lumix-section-heading h2,
.lumix-guarantee-bar h2 {
    color: #ffffff;
    letter-spacing: -0.03em;
}

.lumix-hero h1 {
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 0.96;
    max-width: 11ch;
    margin-bottom: 18px;
}

.lumix-hero p,
.lumix-section-heading p,
.lumix-trust-band p,
.lumix-feature-grid p,
.lumix-spec-grid p,
.lumix-plan-card p,
.lumix-review-grid p {
    color: rgba(232, 236, 243, 0.78);
}

.lumix-hero p {
    max-width: 620px;
    font-size: 1.08rem;
    line-height: 1.7;
    margin-bottom: 28px;
}

.lumix-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.lumix-hero-actions .btn,
.lumix-guarantee-bar .btn,
.lumix-plan-card .btn {
    border-radius: 999px;
    font-weight: 700;
    padding: 0.9rem 1.45rem;
}

.lumix-hero-actions .btn-outline-primary,
.lumix-plan-card .btn-primary,
.lumix-guarantee-bar .btn-primary {
    border-color: rgba(255, 255, 255, 0.14);
}

.lumix-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.lumix-stat-row article,
.lumix-proof-grid article,
.lumix-plan-card,
.lumix-review-grid article,
.lumix-spec-grid article,
.lumix-map-card,
.lumix-guarantee-bar,
.lumix-utility-grid a,
.lumix-feature-grid article {
    background: rgba(13, 17, 24, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
}

.lumix-stat-row article {
    border-radius: 18px;
    padding: 18px 20px;
}

.lumix-stat-row strong {
    display: block;
    font-size: 1.55rem;
    color: #ffffff;
}

.lumix-stat-row span {
    display: block;
    margin-top: 6px;
    color: rgba(232, 236, 243, 0.74);
}

.lumix-hero-panel {
    border-radius: 28px;
    padding: 24px;
    background: linear-gradient(180deg, rgba(20, 27, 39, 0.96), rgba(11, 14, 19, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.lumix-panel-top,
.lumix-location-legend,
.lumix-plan-badge,
.lumix-billing-toggle {
    font-family: "JetBrains Mono", monospace;
}

.lumix-panel-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: rgba(232, 236, 243, 0.62);
    font-size: 0.82rem;
    margin-bottom: 18px;
}

.lumix-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.lumix-proof-grid article,
.lumix-feature-grid article,
.lumix-spec-grid article,
.lumix-plan-card,
.lumix-review-grid article {
    border-radius: 22px;
    padding: 22px;
}

.lumix-proof-grid i,
.lumix-feature-grid i,
.lumix-utility-grid i {
    color: #ff6a6a;
    font-size: 1.2rem;
    margin-bottom: 14px;
}

.lumix-proof-grid strong,
.lumix-feature-grid h3,
.lumix-spec-grid strong,
.lumix-plan-card h3 {
    display: block;
    color: #ffffff;
    margin-bottom: 8px;
}

.lumix-proof-note {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(232, 236, 243, 0.7);
}

.lumix-trust-band {
    padding: 0 0 16px;
}

.lumix-band-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    border-radius: 22px;
    padding: 20px 24px;
    background: linear-gradient(90deg, rgba(255, 76, 76, 0.14), rgba(11, 17, 25, 0.92) 35%, rgba(11, 17, 25, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lumix-band-grid p {
    margin: 0;
}

.lumix-band-grid ul,
.lumix-plan-card ul,
.lumix-guarantee-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lumix-band-grid li,
.lumix-plan-card li,
.lumix-guarantee-bar li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(245, 247, 251, 0.82);
}

.lumix-band-grid li + li,
.lumix-plan-card li + li,
.lumix-guarantee-bar li + li {
    margin-top: 10px;
}

.lumix-band-grid i,
.lumix-plan-card i,
.lumix-guarantee-bar i {
    color: #4fd18b;
}

.lumix-section {
    padding: 72px 0 0;
}

.lumix-section-heading {
    max-width: 740px;
    margin-bottom: 28px;
}

.lumix-section-heading h2 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.05;
    margin-bottom: 14px;
}

.lumix-feature-grid,
.lumix-spec-grid,
.lumix-review-grid,
.lumix-utility-grid,
.lumix-plan-grid {
    display: grid;
    gap: 18px;
}

.lumix-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lumix-specs-section {
    padding-top: 56px;
}

.lumix-spec-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lumix-spec-grid span {
    display: inline-block;
    color: #8fa7c4;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.76rem;
    margin-bottom: 10px;
}

.lumix-game-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.lumix-game-grid article {
    border-radius: 999px;
    padding: 16px 18px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 600;
}

.lumix-game-more {
    background: linear-gradient(135deg, rgba(255, 76, 76, 0.22), rgba(255, 255, 255, 0.04)) !important;
}

.lumix-map-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 22px;
    align-items: start;
}

.lumix-map-card {
    border-radius: 28px;
    padding: 24px;
}

.lumix-world-map {
    position: relative;
    min-height: 420px;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.06), transparent 18%),
        radial-gradient(circle at 45% 28%, rgba(255, 255, 255, 0.05), transparent 19%),
        radial-gradient(circle at 74% 38%, rgba(255, 255, 255, 0.05), transparent 16%),
        linear-gradient(180deg, rgba(19, 28, 40, 0.96), rgba(8, 12, 18, 0.98));
}

.lumix-world-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(143, 167, 196, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(143, 167, 196, 0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, black 58%, transparent 100%);
}

.lumix-world-map .node {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #081018;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.lumix-world-map .na { background: #6ed2ff; }
.lumix-world-map .eu { background: #ff7f7f; }
.lumix-world-map .apac { background: #8fffbd; }
.lumix-world-map .sa,
.lumix-world-map .me { background: #ffd36e; }

.lumix-location-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    color: rgba(232, 236, 243, 0.76);
    font-size: 0.82rem;
}

.lumix-location-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.lumix-location-legend .dot.na { background: #6ed2ff; }
.lumix-location-legend .dot.eu { background: #ff7f7f; }
.lumix-location-legend .dot.apac { background: #8fffbd; }
.lumix-location-legend .dot.me { background: #ffd36e; }

.lumix-pricing-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
}

.lumix-billing-toggle {
    display: inline-flex;
    gap: 8px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lumix-billing-toggle button {
    border: 0;
    background: transparent;
    color: rgba(232, 236, 243, 0.72);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lumix-billing-toggle button.is-active {
    background: #ff4c4c;
    color: #ffffff;
}

.lumix-billing-copy {
    margin: -8px 0 24px;
    color: rgba(232, 236, 243, 0.72);
}

.lumix-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lumix-plan-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.lumix-plan-badge {
    display: inline-flex;
    align-self: flex-start;
    border-radius: 999px;
    padding: 8px 12px;
    margin-bottom: 16px;
    background: rgba(255, 76, 76, 0.14);
    color: #ff9e9e;
    font-size: 0.76rem;
}

.lumix-plan-card p {
    margin-bottom: 18px;
}

.lumix-plan-card ul {
    margin-bottom: 20px;
}

.lumix-plan-card .btn {
    margin-top: auto;
}

.lumix-review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lumix-review-grid strong,
.lumix-review-grid span {
    display: block;
}

.lumix-review-grid strong {
    margin-top: 18px;
    color: #ffffff;
}

.lumix-review-grid span {
    margin-top: 4px;
    color: #8fa7c4;
}

.lumix-guarantee-section {
    padding-top: 56px;
}

.lumix-guarantee-bar {
    border-radius: 28px;
    padding: 28px;
    display: grid;
    grid-template-columns: 1.25fr auto auto;
    gap: 24px;
    align-items: center;
    background: linear-gradient(120deg, rgba(255, 76, 76, 0.18), rgba(9, 14, 20, 0.95) 36%, rgba(11, 17, 25, 0.95));
}

.lumix-guarantee-bar h2 {
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    margin: 0;
}

.lumix-utility-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.lumix-utility-grid a {
    border-radius: 20px;
    padding: 22px 18px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.lumix-utility-grid a:hover,
.lumix-utility-grid a:focus {
    transform: translateY(-3px);
    border-color: rgba(255, 76, 76, 0.3);
    text-decoration: none;
}

.lumix-utility-grid span {
    display: block;
    font-weight: 600;
}

@media (max-width: 1199.98px) {
    .lumix-feature-grid,
    .lumix-spec-grid,
    .lumix-review-grid,
    .lumix-plan-grid,
    .lumix-utility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lumix-map-layout,
    .lumix-hero .lumix-shell,
    .lumix-guarantee-bar,
    .lumix-band-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .lumix-gaming-home {
        padding-bottom: 56px;
    }

    .lumix-shell {
        width: min(1180px, calc(100vw - 24px));
    }

    .lumix-hero {
        padding-top: 60px;
    }

    .lumix-hero h1 {
        max-width: none;
    }

    .lumix-stat-row,
    .lumix-proof-grid,
    .lumix-feature-grid,
    .lumix-spec-grid,
    .lumix-game-grid,
    .lumix-review-grid,
    .lumix-plan-grid,
    .lumix-utility-grid {
        grid-template-columns: 1fr;
    }

    .lumix-pricing-heading,
    .lumix-hero-actions,
    .lumix-location-legend {
        align-items: stretch;
        flex-direction: column;
    }

    .lumix-billing-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .lumix-billing-toggle button {
        width: 100%;
    }

    .lumix-world-map {
        min-height: 340px;
    }

    .lumix-world-map .node {
        font-size: 0.68rem;
        padding: 8px 10px;
    }
}

/* -------------------------------------------------------
   55. LUMIX BILLING HOMEPAGE ALIGNMENT
   ------------------------------------------------------- */

.lumix-home-v2 {
    position: relative;
    margin: 0 calc(50% - 50vw);
    padding-bottom: 72px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 76, 76, 0.16), transparent 26%),
        radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.05), transparent 18%),
        linear-gradient(180deg, #090909 0%, #0d0d0f 52%, #090909 100%);
    color: var(--lumix-text);
    overflow: hidden;
}

.lumix-home-shell {
    position: relative;
    width: min(1180px, calc(100vw - 32px));
    margin: 0 auto;
}

.lumix-home-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(42, 42, 46, 0.75) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 42, 46, 0.75) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 88%);
    pointer-events: none;
}

.lumix-home-divider {
    width: min(1180px, calc(100vw - 32px));
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent 0%, rgba(42, 42, 46, 1) 18%, rgba(42, 42, 46, 1) 82%, transparent 100%);
}

.lumix-home-hero,
.lumix-home-section,
.lumix-home-service-rail {
    position: relative;
}

.lumix-home-hero {
    padding: 90px 0 56px;
}

.lumix-home-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 32px;
    align-items: center;
}

.lumix-home-eyebrow,
.lumix-home-kicker,
.lumix-home-mini-label,
.lumix-home-plan-tier,
.lumix-home-billing-toggle,
.lumix-terminal-title,
.lumix-home-card-topline {
    font-family: var(--font-mono);
}

.lumix-home-eyebrow {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--lumix-text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lumix-home-eyebrow span:first-child,
.lumix-home-kicker {
    color: var(--lumix-red-light);
}

.lumix-home-hero-copy h1,
.lumix-home-section-heading h2,
.lumix-home-final-card h2 {
    color: var(--lumix-white) !important;
    letter-spacing: -0.03em;
}

.lumix-home-hero-copy h1 {
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 0.96;
    max-width: 11ch;
    margin: 0 0 18px;
}

.lumix-home-lead,
.lumix-home-section-heading p,
.lumix-home-plan-card p,
.lumix-home-review-grid p,
.lumix-home-trust-grid p,
.lumix-home-service-grid p,
.lumix-home-hardware-grid p,
.lumix-home-map-summary span {
    color: var(--lumix-text-secondary);
}

.lumix-home-lead {
    max-width: 640px;
    font-size: 1.06rem;
    line-height: 1.72;
    margin: 0 0 28px;
}

.lumix-home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

.lumix-home-v2 .btn-lg,
.lumix-home-v2 .btn-block,
.lumix-home-v2 .btn {
    border-radius: 3px !important;
}

.lumix-home-v2 .btn {
    font-weight: 600;
    box-shadow: none !important;
}

.lumix-home-v2 .btn-outline-primary {
    background: transparent !important;
    border-color: var(--lumix-border-light) !important;
    color: var(--lumix-white) !important;
}

.lumix-home-v2 .btn-outline-primary:hover,
.lumix-home-v2 .btn-outline-primary:focus {
    border-color: var(--lumix-red) !important;
    color: var(--lumix-red-light) !important;
}

.lumix-home-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.lumix-home-stats article,
.lumix-terminal-window,
.lumix-home-infra-card,
.lumix-home-trust-grid article,
.lumix-home-plan-card,
.lumix-home-hardware-grid article,
.lumix-home-map-card,
.lumix-home-service-grid article,
.lumix-home-ops-strip article,
.lumix-home-review-grid article,
.lumix-home-final-card,
.lumix-home-rail-item {
    background: rgba(16, 16, 18, 0.94);
    border: 1px solid var(--lumix-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.lumix-home-stats article {
    padding: 18px 20px;
}

.lumix-home-stats strong {
    display: block;
    color: var(--lumix-white);
    font-size: 1.65rem;
    line-height: 1;
    margin-bottom: 8px;
}

.lumix-home-stats span {
    color: var(--lumix-text-muted);
    text-transform: lowercase;
}

.lumix-home-terminal {
    display: grid;
    gap: 18px;
}

.lumix-terminal-window {
    overflow: hidden;
}

.lumix-terminal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(24, 24, 26, 0.95);
    border-bottom: 1px solid var(--lumix-border);
}

.lumix-terminal-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.lumix-terminal-dot.is-red { background: #ff5f56; }
.lumix-terminal-dot.is-amber { background: #ffbd2e; }
.lumix-terminal-dot.is-green { background: #27c93f; }

.lumix-terminal-title {
    margin-left: 10px;
    color: var(--lumix-text-muted);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.lumix-terminal-body {
    padding: 18px 18px 20px;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    line-height: 1.8;
    color: #e0e0e0;
}

.lumix-terminal-prompt {
    color: var(--lumix-red);
    margin-right: 6px;
}

.lumix-terminal-line.is-dim {
    color: var(--lumix-text-muted);
}

.lumix-terminal-line.is-success {
    color: #4ade80;
}

.lumix-terminal-line.is-spaced {
    margin-top: 10px;
}

.lumix-home-infra-card {
    padding: 18px;
}

.lumix-home-card-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--lumix-text-muted);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lumix-home-spec-list {
    display: grid;
    gap: 12px;
}

.lumix-home-spec-list div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px 12px;
    align-items: start;
    padding-top: 12px;
    border-top: 1px solid rgba(42, 42, 46, 0.9);
}

.lumix-home-spec-list div:first-child {
    padding-top: 0;
    border-top: 0;
}

.lumix-home-spec-list i {
    color: var(--lumix-red);
    margin-top: 3px;
}

.lumix-home-spec-list strong,
.lumix-home-trust-grid h3,
.lumix-home-plan-card h3,
.lumix-home-hardware-grid strong,
.lumix-home-map-summary strong,
.lumix-home-service-grid h3,
.lumix-home-ops-strip strong,
.lumix-home-review-grid strong {
    color: var(--lumix-white) !important;
}

.lumix-home-spec-list strong,
.lumix-home-spec-list span {
    grid-column: 2;
}

.lumix-home-spec-list span {
    color: var(--lumix-text-secondary);
}

.lumix-home-service-rail,
.lumix-home-section {
    padding: 28px 0;
}

.lumix-home-section-tight {
    padding: 22px 0;
}

.lumix-home-section-dim {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.lumix-home-section-heading {
    max-width: 760px;
    margin-bottom: 24px;
}

.lumix-home-kicker {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lumix-home-section-heading h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
    margin: 0 0 12px;
}

.lumix-home-section-heading p {
    margin: 0;
}

.lumix-home-section-heading-split {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    max-width: none;
}

.lumix-home-rail {
    display: grid;
    grid-template-columns: repeat(7, minmax(160px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.lumix-home-rail-item {
    display: block;
    min-width: 160px;
    padding: 16px 16px 18px;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.lumix-home-rail-item:hover,
.lumix-home-rail-item:focus,
.lumix-home-rail-item.is-active {
    border-color: var(--lumix-red);
    transform: translateY(-2px);
    text-decoration: none;
}

.lumix-home-rail-item strong,
.lumix-home-map-summary strong,
.lumix-home-ops-strip strong,
.lumix-home-review-grid strong {
    display: block;
    margin-bottom: 6px;
}

.lumix-home-rail-item span {
    color: var(--lumix-text-muted);
    font-size: 0.86rem;
}

.lumix-home-trust-grid,
.lumix-home-hardware-grid,
.lumix-home-service-grid,
.lumix-home-review-grid {
    display: grid;
    gap: 16px;
}

.lumix-home-trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lumix-home-trust-grid article,
.lumix-home-hardware-grid article,
.lumix-home-service-grid article,
.lumix-home-review-grid article {
    padding: 20px;
}

.lumix-home-trust-grid i,
.lumix-home-service-icon {
    color: var(--lumix-red);
}

.lumix-home-trust-grid i {
    font-size: 1.05rem;
    margin-bottom: 12px;
}

.lumix-home-trust-grid h3,
.lumix-home-service-grid h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.lumix-home-trust-grid p {
    margin: 0;
}

.lumix-home-billing-toggle {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    background: rgba(20, 20, 22, 0.95);
    border: 1px solid var(--lumix-border);
}

.lumix-home-billing-toggle button {
    border: 0;
    background: transparent;
    color: var(--lumix-text-muted);
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lumix-home-billing-toggle button.is-active {
    background: var(--lumix-red);
    color: var(--lumix-white);
}

.lumix-home-billing-note {
    margin: -6px 0 22px;
    color: var(--lumix-text-muted);
}

.lumix-home-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.lumix-home-plan-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    min-height: 100%;
}

.lumix-home-plan-card.is-featured {
    border-color: rgba(255, 76, 76, 0.6);
    box-shadow: 0 0 0 1px rgba(255, 76, 76, 0.18), 0 24px 60px rgba(0, 0, 0, 0.22);
}

.lumix-home-plan-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.lumix-home-plan-tier,
.lumix-home-plan-flag {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.lumix-home-plan-tier {
    color: var(--lumix-red-light);
}

.lumix-home-plan-flag {
    color: var(--lumix-text-muted);
}

.lumix-home-plan-card h3 {
    margin: 0 0 10px;
    font-size: 1.35rem;
}

.lumix-home-plan-card p {
    margin: 0 0 18px;
    line-height: 1.65;
}

.lumix-home-plan-meta,
.lumix-home-plan-features,
.lumix-home-region-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lumix-home-plan-meta {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.lumix-home-plan-meta li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(42, 42, 46, 0.9);
}

.lumix-home-plan-meta span,
.lumix-home-hardware-grid span,
.lumix-home-mini-label,
.lumix-home-review-grid span,
.lumix-home-map-summary span,
.lumix-home-ops-strip span {
    color: var(--lumix-text-muted);
}

.lumix-home-plan-features {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.lumix-home-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--lumix-text);
}

.lumix-home-plan-features i {
    color: #4ade80;
}

.lumix-home-plan-card .btn {
    margin-top: auto;
}

.lumix-home-hardware-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lumix-home-hardware-grid article {
    min-height: 100%;
}

.lumix-home-hardware-grid span,
.lumix-home-mini-label {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lumix-home-hardware-grid strong {
    display: block;
    margin-bottom: 10px;
}

.lumix-home-location-layout {
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: 22px;
    align-items: start;
}

.lumix-home-region-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.lumix-home-region-list span {
    color: var(--lumix-text-secondary);
}

.lumix-home-region-list i {
    color: var(--lumix-red);
    font-size: 0.56rem;
    margin-right: 8px;
    vertical-align: middle;
}

.lumix-home-map-card {
    padding: 20px;
}

.lumix-home-map-surface {
    position: relative;
    min-height: 400px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.05), transparent 18%),
        radial-gradient(circle at 48% 28%, rgba(255, 255, 255, 0.05), transparent 18%),
        radial-gradient(circle at 74% 40%, rgba(255, 255, 255, 0.05), transparent 16%),
        linear-gradient(180deg, rgba(18, 18, 20, 0.96), rgba(9, 9, 10, 0.98));
}

.lumix-home-map-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(42, 42, 46, 0.82) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 42, 46, 0.82) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, black 58%, transparent 100%);
}

.lumix-home-map-surface .node {
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
    padding: 8px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #08090b;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.lumix-home-map-surface .na { background: #8bd7ff; }
.lumix-home-map-surface .eu { background: #ff8e8e; }
.lumix-home-map-surface .apac { background: #93efba; }

.lumix-home-map-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.lumix-home-map-summary div {
    padding-top: 12px;
    border-top: 1px solid rgba(42, 42, 46, 0.9);
}

.lumix-home-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lumix-home-service-icon {
    margin-bottom: 14px;
    font-size: 1.2rem;
}

.lumix-home-service-grid h3 {
    font-size: 1.18rem;
}

.lumix-home-service-grid p {
    margin: 0 0 18px;
}

.lumix-home-service-grid a {
    color: var(--lumix-white);
    font-weight: 600;
}

.lumix-home-service-grid a:hover {
    color: var(--lumix-red-light);
}

.lumix-home-ops-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.lumix-home-ops-strip article {
    padding: 18px 20px;
}

.lumix-home-ops-strip span {
    display: block;
    margin-bottom: 8px;
}

.lumix-home-review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lumix-home-review-grid p {
    margin: 0;
    line-height: 1.7;
}

.lumix-home-review-grid strong {
    margin-top: 16px;
}

.lumix-home-review-grid span {
    display: block;
    margin-top: 4px;
}

.lumix-home-final-cta {
    padding-top: 28px;
}

.lumix-home-final-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 28px;
    background:
        linear-gradient(120deg, rgba(255, 76, 76, 0.16), rgba(16, 16, 18, 0.96) 32%, rgba(16, 16, 18, 0.96));
}

.lumix-home-final-card h2 {
    font-size: clamp(1.75rem, 3vw, 2.7rem);
    margin: 0;
}

/* -------------------------------------------------------
   56. NEXUS CART ORDERFORM
   ------------------------------------------------------- */

#order-standard_cart,
.lumix-page-viewcart #order-standard_cart,
.lumix-page-cart #order-standard_cart {
    position: relative;
    padding: 42px 0 56px;
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 76, 76, 0.14), transparent 26%),
        radial-gradient(circle at 84% 10%, rgba(255, 255, 255, 0.05), transparent 18%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.98), rgba(13, 13, 15, 0.98));
    overflow: hidden;
}

#order-standard_cart::before,
.lumix-page-viewcart #order-standard_cart::before,
.lumix-page-cart #order-standard_cart::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(42, 42, 46, 0.38) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 42, 46, 0.38) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.52), transparent 82%);
    pointer-events: none;
}

#order-standard_cart > *,
.lumix-page-viewcart #order-standard_cart > *,
.lumix-page-cart #order-standard_cart > * {
    position: relative;
    z-index: 1;
}

#order-standard_cart .cart-body h1,
#order-standard_cart .cart-body h2,
.lumix-page-viewcart #order-standard_cart .cart-body h1,
.lumix-page-viewcart #order-standard_cart .cart-body h2,
.lumix-page-cart #order-standard_cart .cart-body h1,
.lumix-page-cart #order-standard_cart .cart-body h2 {
    color: var(--lumix-white) !important;
    letter-spacing: -0.03em;
}

#order-standard_cart .cart-body p,
.lumix-page-viewcart #order-standard_cart .cart-body p,
.lumix-page-cart #order-standard_cart .cart-body p {
    color: var(--lumix-text-secondary) !important;
}

#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .cart-sidebar .panel-sidebar,
#order-standard_cart .cart-sidebar .card {
    background:
        linear-gradient(180deg, rgba(20, 20, 22, 0.96), rgba(15, 15, 17, 0.96)) !important;
    border: 1px solid var(--lumix-border) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

#order-standard_cart .cart-sidebar .panel-heading,
#order-standard_cart .cart-sidebar .card-header {
    background:
        linear-gradient(180deg, rgba(24, 24, 26, 0.98), rgba(19, 19, 21, 0.98)) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-white) !important;
    position: relative;
}

#order-standard_cart .cart-sidebar .panel-heading::before,
#order-standard_cart .cart-sidebar .card-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, var(--lumix-red), transparent);
}

#order-standard_cart .cart-sidebar .list-group-item {
    background: transparent !important;
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
    padding: 14px 18px !important;
}

#order-standard_cart .cart-sidebar .list-group-item:hover {
    background: rgba(255, 76, 76, 0.06) !important;
    color: var(--lumix-red-light) !important;
}

#order-standard_cart .cart-sidebar .list-group-item.active {
    background:
        linear-gradient(90deg, rgba(255, 76, 76, 0.12), rgba(18, 18, 20, 0.96)) !important;
    border-left: 2px solid var(--lumix-red) !important;
    color: var(--lumix-red-light) !important;
}

#order-standard_cart .product.clearfix > header,
#order-standard_cart div.product > header {
    background:
        linear-gradient(180deg, rgba(24, 24, 26, 0.98), rgba(20, 20, 22, 0.98)) !important;
    position: relative;
}

#order-standard_cart .product.clearfix > header::before,
#order-standard_cart div.product > header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, var(--lumix-red), transparent);
}

#order-standard_cart .product.clearfix,
#order-standard_cart div.product,
#order-standard_cart .products .card,
.lumix-page-viewcart #order-standard_cart .product.clearfix,
.lumix-page-viewcart #order-standard_cart div.product,
.lumix-page-cart #order-standard_cart .product.clearfix,
.lumix-page-cart #order-standard_cart div.product,
.lumix-page-viewcart #order-standard_cart .products .card,
.lumix-page-cart #order-standard_cart .products .card {
    border-radius: 4px !important;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

#order-standard_cart .product.clearfix:hover,
#order-standard_cart div.product:hover,
#order-standard_cart .products .card:hover,
.lumix-page-viewcart #order-standard_cart .product.clearfix:hover,
.lumix-page-viewcart #order-standard_cart div.product:hover,
.lumix-page-cart #order-standard_cart .product.clearfix:hover,
.lumix-page-cart #order-standard_cart div.product:hover,
.lumix-page-viewcart #order-standard_cart .products .card:hover,
.lumix-page-cart #order-standard_cart .products .card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 76, 76, 0.55) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
}

#order-standard_cart .product.clearfix .product-pricing .price,
#order-standard_cart div.product .product-pricing .price,
.lumix-page-viewcart #order-standard_cart .product.clearfix .product-pricing .price,
.lumix-page-cart #order-standard_cart .product.clearfix .product-pricing .price,
.lumix-page-viewcart #order-standard_cart div.product .product-pricing .price,
.lumix-page-cart #order-standard_cart div.product .product-pricing .price {
    letter-spacing: -0.01em;
}

#order-standard_cart .product.clearfix .btn-order-now,
#order-standard_cart div.product .btn-order-now,
.lumix-page-viewcart #order-standard_cart .product.clearfix .btn-order-now,
.lumix-page-viewcart #order-standard_cart div.product .btn-order-now,
.lumix-page-cart #order-standard_cart .product.clearfix .btn-order-now,
.lumix-page-cart #order-standard_cart div.product .btn-order-now {
    box-shadow: 0 12px 30px rgba(255, 76, 76, 0.18);
}

.lumix-page-viewcart #main-body,
.lumix-page-cart #main-body {
    overflow: hidden;
}

.lumix-nexus-cart {
    position: relative;
    width: min(1380px, calc(100vw - 32px));
    margin: 0 auto;
}

.lumix-cart-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(42, 42, 46, 0.32) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 42, 46, 0.32) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.46), transparent 78%);
    pointer-events: none;
}

.lumix-nexus-cart > * {
    position: relative;
    z-index: 1;
}

.lumix-page-viewcart #order-standard_cart.lumix-nexus-cart,
.lumix-page-cart #order-standard_cart.lumix-nexus-cart {
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 76, 76, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.98), rgba(13, 13, 15, 0.98));
}

.lumix-page-viewcart #order-standard_cart > .row,
.lumix-page-cart #order-standard_cart > .row {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 36px;
    margin: 0 !important;
}

/* Keep the shell grid on the outer cart layout only.
   Nested checkout form rows must stay Bootstrap flex rows for full-width fields. */
.lumix-page-viewcart #order-standard_cart .cart-body .row,
.lumix-page-cart #order-standard_cart .cart-body .row,
.lumix-page-viewcart #order-standard_cart #registration .row,
.lumix-page-cart #order-standard_cart #registration .row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-right: -15px;
    margin-left: -15px;
}

.lumix-page-viewcart #order-standard_cart .cart-sidebar,
.lumix-page-cart #order-standard_cart .cart-sidebar {
    width: auto;
    max-width: none;
    padding: 0 !important;
}

.lumix-page-viewcart #order-standard_cart .cart-body,
.lumix-page-cart #order-standard_cart .cart-body {
    padding: 0 !important;
}

.lumix-page-viewcart #order-standard_cart .cart-sidebar .panel-sidebar,
.lumix-page-cart #order-standard_cart .cart-sidebar .panel-sidebar,
.lumix-page-viewcart #order-standard_cart .cart-sidebar .card,
.lumix-page-cart #order-standard_cart .cart-sidebar .card {
    background:
        linear-gradient(180deg, rgba(20, 20, 22, 0.96), rgba(15, 15, 17, 0.96)) !important;
    border: 1px solid var(--lumix-border) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.lumix-page-viewcart #order-standard_cart .cart-sidebar .panel-heading,
.lumix-page-cart #order-standard_cart .cart-sidebar .panel-heading,
.lumix-page-viewcart #order-standard_cart .cart-sidebar .card-header,
.lumix-page-cart #order-standard_cart .cart-sidebar .card-header {
    background:
        linear-gradient(180deg, rgba(24, 24, 26, 0.98), rgba(19, 19, 21, 0.98)) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-white) !important;
    position: relative;
}

.lumix-page-viewcart #order-standard_cart .cart-sidebar .panel-heading::before,
.lumix-page-cart #order-standard_cart .cart-sidebar .panel-heading::before,
.lumix-page-viewcart #order-standard_cart .cart-sidebar .card-header::before,
.lumix-page-cart #order-standard_cart .cart-sidebar .card-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, var(--lumix-red), transparent);
}

.lumix-page-viewcart #order-standard_cart .cart-sidebar .list-group-item,
.lumix-page-cart #order-standard_cart .cart-sidebar .list-group-item {
    background: transparent !important;
    border-color: var(--lumix-border) !important;
    color: var(--lumix-text-secondary) !important;
    padding: 14px 18px !important;
}

.lumix-page-viewcart #order-standard_cart .cart-sidebar .list-group-item:hover,
.lumix-page-cart #order-standard_cart .cart-sidebar .list-group-item:hover {
    background: rgba(255, 76, 76, 0.06) !important;
    color: var(--lumix-red-light) !important;
}

.lumix-page-viewcart #order-standard_cart .cart-sidebar .list-group-item.active,
.lumix-page-cart #order-standard_cart .cart-sidebar .list-group-item.active {
    background:
        linear-gradient(90deg, rgba(255, 76, 76, 0.12), rgba(18, 18, 20, 0.96)) !important;
    border-left: 2px solid var(--lumix-red) !important;
    color: var(--lumix-red-light) !important;
}

.lumix-page-viewcart #order-standard_cart #nexus-root,
.lumix-page-cart #order-standard_cart #nexus-root {
    display: block;
    min-height: 420px;
}

.lumix-page-viewcart #order-standard_cart .sub-heading,
.lumix-page-cart #order-standard_cart .sub-heading {
    color: var(--lumix-text-muted) !important;
}

.lumix-page-viewcart #order-standard_cart #registration .sub-heading,
.lumix-page-cart #order-standard_cart #registration .sub-heading {
    border-top-color: var(--lumix-border) !important;
}

.lumix-page-viewcart #order-standard_cart #registration .sub-heading span,
.lumix-page-cart #order-standard_cart #registration .sub-heading span,
.lumix-page-viewcart #order-standard_cart .sub-heading span,
.lumix-page-cart #order-standard_cart .sub-heading span {
    background: linear-gradient(180deg, rgba(22, 22, 24, 0.98), rgba(16, 16, 18, 0.98)) !important;
    color: var(--lumix-red-light) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 3px;
    padding: 2px 18px;
}

/* Checkout payment module wrappers (including Stripe-hosted input container) */
.lumix-page-viewcart #order-standard_cart #frmCheckout #paymentGatewaysContainer,
.lumix-page-cart #order-standard_cart #frmCheckout #paymentGatewaysContainer,
.lumix-page-viewcart #order-standard_cart #frmCheckout #paymentGatewayInput,
.lumix-page-cart #order-standard_cart #frmCheckout #paymentGatewayInput,
.lumix-page-viewcart #order-standard_cart #frmPayment #paymentGatewayInput,
.lumix-page-cart #order-standard_cart #frmPayment #paymentGatewayInput,
.lumix-page-viewcart #order-standard_cart #frmCheckout .cc-payment-form,
.lumix-page-cart #order-standard_cart #frmCheckout .cc-payment-form,
.lumix-page-viewcart #order-standard_cart #frmPayment .cc-payment-form,
.lumix-page-cart #order-standard_cart #frmPayment .cc-payment-form {
    background: var(--lumix-bg-card) !important;
    background-color: var(--lumix-bg-card) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 4px;
    color: var(--lumix-text) !important;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #paymentGatewaysContainer,
.lumix-page-cart #order-standard_cart #frmCheckout #paymentGatewaysContainer {
    padding: 16px 18px;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #paymentGatewaysContainer > p,
.lumix-page-cart #order-standard_cart #frmCheckout #paymentGatewaysContainer > p {
    margin: 0 0 14px;
    padding: 0 0 12px;
    color: var(--lumix-text-secondary) !important;
    border-bottom: 1px solid var(--lumix-border);
}

/* Existing account cards in checkout */
.lumix-page-viewcart #order-standard_cart .account,
.lumix-page-cart #order-standard_cart .account,
.lumix-page-viewcart #order-standard_cart .account.border-bottom,
.lumix-page-cart #order-standard_cart .account.border-bottom {
    background: linear-gradient(180deg, rgba(22, 22, 24, 0.98), rgba(16, 16, 18, 0.98)) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 3px;
    color: var(--lumix-text) !important;
}

.lumix-page-viewcart #order-standard_cart .account.border-bottom.active,
.lumix-page-cart #order-standard_cart .account.border-bottom.active {
    background: linear-gradient(180deg, rgba(32, 20, 20, 0.98), rgba(18, 14, 14, 0.98)) !important;
    border-color: rgba(255, 76, 76, 0.45) !important;
    box-shadow: inset 2px 0 0 var(--lumix-red);
}

/* Card entry module */
.lumix-page-viewcart #order-standard_cart #frmCheckout .cc-input-container,
.lumix-page-cart #order-standard_cart #frmCheckout .cc-input-container,
.lumix-page-viewcart #order-standard_cart #frmCheckout #creditCardInputFields,
.lumix-page-cart #order-standard_cart #frmCheckout #creditCardInputFields {
    background: linear-gradient(180deg, rgba(20, 20, 22, 0.98), rgba(14, 14, 16, 0.98)) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 4px;
    padding: 16px;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #creditCardInputFields > ul,
.lumix-page-cart #order-standard_cart #frmCheckout #creditCardInputFields > ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #creditCardInputFields .radio-inline,
.lumix-page-cart #order-standard_cart #frmCheckout #creditCardInputFields .radio-inline {
    color: var(--lumix-text-secondary) !important;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #newCardInfo,
.lumix-page-cart #order-standard_cart #frmCheckout #newCardInfo,
.lumix-page-viewcart #order-standard_cart #frmCheckout #existingCardInfo,
.lumix-page-cart #order-standard_cart #frmCheckout #existingCardInfo,
.lumix-page-viewcart #order-standard_cart #frmCheckout #newCardSaveSettings,
.lumix-page-cart #order-standard_cart #frmCheckout #newCardSaveSettings {
    background: transparent !important;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #newCardInfo,
.lumix-page-cart #order-standard_cart #frmCheckout #newCardInfo,
.lumix-page-viewcart #order-standard_cart #frmCheckout #existingCardInfo,
.lumix-page-cart #order-standard_cart #frmCheckout #existingCardInfo {
    position: relative;
    margin-top: -6px;
    margin-left: 0;
    margin-right: 0;
    padding: 10px 10px 4px;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 3px;
    background: rgba(9, 9, 11, 0.75) !important;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #newCardInfo > [class*="col-"],
.lumix-page-cart #order-standard_cart #frmCheckout #newCardInfo > [class*="col-"],
.lumix-page-viewcart #order-standard_cart #frmCheckout #existingCardInfo > [class*="col-"],
.lumix-page-cart #order-standard_cart #frmCheckout #existingCardInfo > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #stripeElements,
.lumix-page-cart #order-standard_cart #frmCheckout #stripeElements {
    margin-top: 10px;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #stripeElements .stripe-cards-inputs,
.lumix-page-cart #order-standard_cart #frmCheckout #stripeElements .stripe-cards-inputs {
    max-width: 860px;
    margin: 0 auto !important;
    padding: 14px 14px 6px;
    background: rgba(10, 10, 12, 0.82) !important;
    border: 1px solid var(--lumix-border) !important;
    border-radius: 3px;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #stripeElements label,
.lumix-page-cart #order-standard_cart #frmCheckout #stripeElements label {
    color: var(--lumix-text-secondary) !important;
    font-size: 0.88rem;
    margin-bottom: 6px;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout #paymentGatewayInput [style*="background"],
.lumix-page-cart #order-standard_cart #frmCheckout #paymentGatewayInput [style*="background"],
.lumix-page-viewcart #order-standard_cart #frmPayment #paymentGatewayInput [style*="background"],
.lumix-page-cart #order-standard_cart #frmPayment #paymentGatewayInput [style*="background"] {
    background: var(--lumix-bg-card) !important;
    background-color: var(--lumix-bg-card) !important;
    color: var(--lumix-text) !important;
    border-color: var(--lumix-border) !important;
}

.lumix-page-viewcart #order-standard_cart #frmCheckout .cc-payment-form .cc-details.row,
.lumix-page-cart #order-standard_cart #frmCheckout .cc-payment-form .cc-details.row,
.lumix-page-viewcart #order-standard_cart #frmPayment .cc-payment-form .cc-details.row,
.lumix-page-cart #order-standard_cart #frmPayment .cc-payment-form .cc-details.row {
    align-items: center;
    margin-bottom: 12px;
}

.lumix-page-viewcart #order-standard_cart .product.clearfix,
.lumix-page-viewcart #order-standard_cart div.product,
.lumix-page-cart #order-standard_cart .product.clearfix,
.lumix-page-cart #order-standard_cart div.product,
.lumix-page-viewcart #order-standard_cart .products .card,
.lumix-page-cart #order-standard_cart .products .card {
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.96), rgba(14, 14, 16, 0.96)) !important;
    border: 1px solid var(--lumix-border) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.lumix-page-viewcart #order-standard_cart .product.clearfix > header,
.lumix-page-viewcart #order-standard_cart div.product > header,
.lumix-page-cart #order-standard_cart .product.clearfix > header,
.lumix-page-cart #order-standard_cart div.product > header {
    background:
        linear-gradient(180deg, rgba(24, 24, 26, 0.98), rgba(20, 20, 22, 0.98)) !important;
    position: relative;
}

.lumix-page-viewcart #order-standard_cart .product.clearfix > header::before,
.lumix-page-viewcart #order-standard_cart div.product > header::before,
.lumix-page-cart #order-standard_cart .product.clearfix > header::before,
.lumix-page-cart #order-standard_cart div.product > header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, var(--lumix-red), transparent);
}

.lumix-page-viewcart #order-standard_cart .product.clearfix .product-desc,
.lumix-page-viewcart #order-standard_cart div.product .product-desc,
.lumix-page-cart #order-standard_cart .product.clearfix .product-desc,
.lumix-page-cart #order-standard_cart div.product .product-desc,
.lumix-page-viewcart #order-standard_cart .products .card-body,
.lumix-page-cart #order-standard_cart .products .card-body {
    background: transparent !important;
}

.lumix-page-viewcart #order-standard_cart .product.clearfix .btn-order-now,
.lumix-page-viewcart #order-standard_cart div.product .btn-order-now,
.lumix-page-cart #order-standard_cart .product.clearfix .btn-order-now,
.lumix-page-cart #order-standard_cart div.product .btn-order-now {
    min-height: 40px;
    padding: 0 18px !important;
    border-radius: 3px !important;
}

@media (max-width: 991.98px) {
    .lumix-nexus-cart {
        width: min(1380px, calc(100vw - 24px));
    }

    .lumix-page-viewcart #order-standard_cart > .row,
    .lumix-page-cart #order-standard_cart > .row {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 1199.98px) {
    .lumix-home-hero-layout,
    .lumix-home-location-layout,
    .lumix-home-section-heading-split,
    .lumix-home-final-card {
        grid-template-columns: 1fr;
    }

    .lumix-home-trust-grid,
    .lumix-home-plan-grid,
    .lumix-home-hardware-grid,
    .lumix-home-service-grid,
    .lumix-home-review-grid,
    .lumix-home-ops-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .lumix-home-v2 {
        padding-bottom: 56px;
    }

    .lumix-home-shell,
    .lumix-home-divider {
        width: min(1180px, calc(100vw - 24px));
    }

    .lumix-home-hero {
        padding: 64px 0 40px;
    }

    .lumix-home-hero-copy h1 {
        max-width: none;
    }

    .lumix-home-stats,
    .lumix-home-trust-grid,
    .lumix-home-plan-grid,
    .lumix-home-hardware-grid,
    .lumix-home-service-grid,
    .lumix-home-review-grid,
    .lumix-home-ops-strip,
    .lumix-home-map-summary {
        grid-template-columns: 1fr;
    }

    .lumix-home-rail {
        grid-template-columns: repeat(7, minmax(220px, 1fr));
    }

    .lumix-home-hero-actions,
    .lumix-home-region-list,
    .lumix-home-section-heading-split {
        align-items: stretch;
        flex-direction: column;
    }

    .lumix-home-billing-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .lumix-home-billing-toggle button {
        width: 100%;
    }

    .lumix-home-map-surface {
        min-height: 320px;
    }

    .lumix-home-map-surface .node {
        font-size: 0.68rem;
        padding: 7px 9px;
    }
}

/* -------------------------------------------------------
   56. UNIVERSAL MVP SYSTEM LAYER
   ------------------------------------------------------- */

/* Keep all non-home pages centered and readable at a consistent width. */
body[class*="lumix-page-"]:not(.lumix-page-homepage) #main-body > .container,
body[class*="lumix-page-"]:not(.lumix-page-homepage) #main-body > .container-fluid {
    width: min(var(--lumix-content-max), calc(100vw - 32px));
    max-width: none !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--lumix-content-gutter);
    padding-right: var(--lumix-content-gutter);
}

/* Use consistent section spacing between major blocks. */
body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .card,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .panel,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .well,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .alert,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > form,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .tiles,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .table-container {
    margin-bottom: var(--lumix-section-gap);
}

/* Keep typography practical and readable portal-wide. */
body[class*="lumix-page-"] #main-body p,
body[class*="lumix-page-"] #main-body li,
body[class*="lumix-page-"] #main-body label,
body[class*="lumix-page-"] #main-body .small,
body[class*="lumix-page-"] #main-body .text-muted {
    line-height: 1.55;
}

body[class*="lumix-page-"] #main-body h1,
body[class*="lumix-page-"] #main-body h2,
body[class*="lumix-page-"] #main-body h3 {
    letter-spacing: -0.02em;
}

/* Reusable component consistency for pages still using panel-based markup. */
body[class*="lumix-page-"]:not(.lumix-page-homepage) .panel,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .panel-default,
body[class*="lumix-page-"]:not(.lumix-page-homepage) .well {
    border: 1px solid var(--lumix-border) !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, rgba(18, 18, 20, 0.96), rgba(14, 14, 16, 0.96)) !important;
    color: var(--lumix-text) !important;
}

body[class*="lumix-page-"]:not(.lumix-page-homepage) .panel-heading {
    background: linear-gradient(180deg, rgba(24, 24, 26, 0.98), rgba(20, 20, 22, 0.98)) !important;
    border-bottom: 1px solid var(--lumix-border) !important;
    color: var(--lumix-white) !important;
}

/* Shared interactive behavior so buttons and links feel consistent everywhere. */
body[class*="lumix-page-"] #main-body .btn {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body[class*="lumix-page-"] #main-body .btn:disabled,
body[class*="lumix-page-"] #main-body .btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mobile: preserve readability and tap targets with tighter but consistent gutters. */
@media (max-width: 767.98px) {
    body[class*="lumix-page-"]:not(.lumix-page-homepage) #main-body > .container,
    body[class*="lumix-page-"]:not(.lumix-page-homepage) #main-body > .container-fluid {
        width: min(var(--lumix-content-max), calc(100vw - 20px));
        padding-left: 10px;
        padding-right: 10px;
    }

    body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .card,
    body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .panel,
    body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .well,
    body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .alert,
    body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > form,
    body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .tiles,
    body[class*="lumix-page-"]:not(.lumix-page-homepage) .primary-content > .table-container {
        margin-bottom: 16px;
    }
}