/* =============================================================
   DA BUSINESS — DB03 Client Portal Theme
   Dark tech aesthetic: deep void (#06080d) + electric violet (#7000ff)
   Fonts: Syne (body), Bebas Neue (display), JetBrains Mono (mono)
   ============================================================= */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* ─────────────────────────────────────────────────────────────
   CSS VARIABLES
───────────────────────────────────────────────────────────── */
:root {
    /* Core palette */
    --bg:            #06080d;
    --bg-raised:     #090c14;
    --bg-card:       #0c1019;
    --bg-elevated:   #101520;
    --bg-overlay:    #141b26;

    /* Borders */
    --border:        #1a2436;
    --border-mid:    #223044;
    --border-hi:     #2e3f58;

    /* Accent — violet */
    --accent:        #7000ff;
    --accent-hi:     #8f2dff;
    --accent-soft:   #a855ff;
    --accent-dim:    rgba(112,0,255,0.10);
    --accent-glow:   rgba(112,0,255,0.35);

    /* Text */
    --text:          #dde5f0;
    --text-hi:       #f0f5ff;
    --text-mid:      #8a9bb5;
    --text-lo:       #4a5c72;

    /* Semantic */
    --success:       #00c870;
    --warning:       #f0ab00;
    --danger:        #f04060;
    --info:          #0ea5e9;

    /* Typography */
    --font-display:  'Bebas Neue', sans-serif;
    --font-body:     'Syne', sans-serif;
    --font-mono:     'JetBrains Mono', monospace;

    /* Rounding — sharp */
    --r-sm:  2px;
    --r-md:  4px;
    --r-lg:  6px;

    /* Transitions */
    --t:     0.18s ease;
}

/* ─────────────────────────────────────────────────────────────
   NOISE TEXTURE OVERLAY
───────────────────────────────────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9998;
    opacity: 0.5;
}

/* ─────────────────────────────────────────────────────────────
   BASE
───────────────────────────────────────────────────────────── */
html, body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    font-size: 14px;
}

/* Subtle dot-grid pattern */
body {
    background-image: radial-gradient(circle, #1a2436 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-raised); }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Links */
a { color: var(--accent-soft) !important; transition: color var(--t); }
a:hover { color: var(--text-hi) !important; text-decoration: none !important; }

/* Headings */
h1, h2, h3 {
    font-family: var(--font-display) !important;
    letter-spacing: 0.04em;
    color: var(--text-hi) !important;
    line-height: 1;
}
h4, h5, h6 {
    font-family: var(--font-body) !important;
    font-weight: 700;
    color: var(--text) !important;
}
code, pre, kbd, samp, .badge, .label {
    font-family: var(--font-mono) !important;
}

/* ─────────────────────────────────────────────────────────────
   HEADER / NAVBAR
───────────────────────────────────────────────────────────── */
#header, header#header {
    background: rgba(6,8,13,0.96) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Topbar — thin notification bar */
.topbar {
    background: var(--bg-raised) !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 12px;
    font-family: var(--font-mono) !important;
}
.topbar .btn {
    color: var(--text-lo) !important;
    background: transparent !important;
    border: none !important;
    font-size: 11px;
    letter-spacing: 0.08em;
    transition: color var(--t) !important;
}
.topbar .btn:hover { color: var(--text) !important; }
.topbar .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--text-lo) !important;
    font-size: 11px;
    font-family: var(--font-mono) !important;
}
.topbar .btn-active-client {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-mid) !important;
    font-size: 11px;
    letter-spacing: 0.05em;
    border-radius: var(--r-sm) !important;
}

/* Navbar brand */
.navbar, .navbar-light {
    background: transparent !important;
}
.navbar-brand, .navbar-brand:hover {
    font-family: var(--font-display) !important;
    font-size: 28px;
    letter-spacing: 0.1em;
    color: var(--text-hi) !important;
    position: relative;
}
/* Violet dot accent on brand */
.navbar-brand::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: -6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    animation: brand-dot 2.5s ease-in-out infinite;
}
@keyframes brand-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.65); }
}

/* Nav links */
.main-navbar-wrapper,
.main-navbar-wrapper .navbar {
    background: var(--bg-raised) !important;
    border-bottom: 1px solid var(--border) !important;
}
.navbar-nav .nav-link,
.navbar-nav .nav-item > a,
.nav-link {
    color: var(--text-lo) !important;
    font-family: var(--font-body) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color var(--t) !important;
    padding: 10px 18px !important;
    position: relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item > a:hover { color: var(--text-hi) !important; }
.navbar-nav .nav-item.active > a,
.navbar-nav .active > .nav-link {
    color: var(--accent-soft) !important;
}
.navbar-nav .nav-item.active > a::after,
.navbar-nav .active > .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 8px var(--accent-glow);
}

/* Dropdown menus */
.dropdown-menu {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px var(--border) !important;
    padding: 6px !important;
}
.dropdown-item {
    color: var(--text-mid) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    border-radius: var(--r-sm) !important;
    padding: 8px 12px !important;
    transition: background var(--t), color var(--t);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--accent-dim) !important;
    color: var(--text-hi) !important;
}
.dropdown-divider { border-color: var(--border) !important; margin: 4px 0 !important; }

/* Cart btn */
.cart-btn {
    color: var(--text-mid) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    transition: all var(--t) !important;
}
.cart-btn:hover {
    border-color: var(--accent) !important;
    color: var(--accent-soft) !important;
    box-shadow: 0 0 12px var(--accent-glow) !important;
}

/* ─────────────────────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────────────────────── */
.master-breadcrumb, nav[aria-label="breadcrumb"] {
    background: var(--bg-raised) !important;
    border-bottom: 1px solid var(--border) !important;
}
.breadcrumb {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    margin-bottom: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 11px;
    letter-spacing: 0.08em;
}
.breadcrumb-item { color: var(--text-lo) !important; }
.breadcrumb-item.active { color: var(--text-mid) !important; }
.breadcrumb-item a { color: var(--text-lo) !important; }
.breadcrumb-item a:hover { color: var(--accent-soft) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--border-hi) !important; content: "›" !important; }

/* ─────────────────────────────────────────────────────────────
   MAIN BODY
───────────────────────────────────────────────────────────── */
section#main-body { background: transparent !important; padding-top: 24px; }

/* ─────────────────────────────────────────────────────────────
   CARDS / PANELS
───────────────────────────────────────────────────────────── */
.card, .panel, .panel-default {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.03) inset !important;
    color: var(--text) !important;
    transition: border-color var(--t), box-shadow var(--t);
}
.card:hover { border-color: var(--border-mid) !important; }
.card-header, .panel-heading {
    background: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-hi) !important;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 20px;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}
.card-footer, .panel-footer {
    background: var(--bg-elevated) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
}
.card-body { color: var(--text) !important; padding: 20px; }
.card-title { color: var(--text-hi) !important; font-weight: 700; }

/* Accent border classes */
.card-accent-purple  { border-top: 2px solid var(--accent) !important; }
.card-accent-blue    { border-top: 2px solid var(--info) !important; }
.card-accent-green   { border-top: 2px solid var(--success) !important; }
.card-accent-red     { border-top: 2px solid var(--danger) !important; }
.card-accent-orange  { border-top: 2px solid var(--warning) !important; }
.card-accent-gold    { border-top: 2px solid var(--warning) !important; }

/* ─────────────────────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────────────────────── */
.sidebar { background: transparent !important; }
.sidebar .card { background: var(--bg-card) !important; }
.sidebar .panel-title, .sidebar .card-title {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-lo) !important;
}
.sidebar .list-group-item {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text-mid) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border-left: 2px solid transparent !important;
    transition: all var(--t);
}
.sidebar .list-group-item:hover {
    background: var(--accent-dim) !important;
    color: var(--text) !important;
    border-left-color: var(--border-hi) !important;
}
.sidebar .list-group-item.active {
    background: var(--accent-dim) !important;
    border-color: var(--border) !important;
    border-left-color: var(--accent) !important;
    color: var(--accent-soft) !important;
}
.card-sidebar { background: var(--bg-card) !important; border: 1px solid var(--border) !important; }
.card-sidebar .card-header { background: var(--bg-elevated) !important; border-bottom: 1px solid var(--border) !important; }

/* ─────────────────────────────────────────────────────────────
   CLIENT HOME TILES
───────────────────────────────────────────────────────────── */
.tiles { margin-bottom: 0 !important; }
.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    text-decoration: none !important;
    transition: all 0.22s ease;
    position: relative;
    overflow: hidden;
}
.tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.22s ease;
    transform-origin: left;
}
.tile:hover { border-color: var(--accent) !important; background: var(--bg-elevated) !important; }
.tile:hover::before { transform: scaleX(1); }
.tile .fas, .tile .far, .tile .fab {
    font-size: 24px;
    color: var(--text-lo);
    margin-bottom: 8px;
    transition: color var(--t);
}
.tile:hover .fas, .tile:hover .far { color: var(--accent-soft); }
.tile .stat {
    font-family: var(--font-display) !important;
    font-size: 36px;
    color: var(--text-hi);
    line-height: 1;
}
.tile .title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-lo);
    margin-top: 4px;
}
/* Hide the old colored highlight bars */
.tile .highlight { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   FORMS
───────────────────────────────────────────────────────────── */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"], select, textarea {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text) !important;
    border-radius: var(--r-md) !important;
    font-family: var(--font-body) !important;
    font-size: 13px;
    transition: border-color var(--t), box-shadow var(--t);
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    background: var(--bg-elevated) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-dim) !important;
    color: var(--text) !important;
    outline: none !important;
}
.form-control::placeholder, input::placeholder { color: var(--text-lo) !important; }
label, .control-label, .col-form-label {
    color: var(--text-mid) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-body) !important;
    margin-bottom: 6px;
}
.input-group-text {
    background: var(--bg-overlay) !important;
    border-color: var(--border-mid) !important;
    color: var(--text-lo) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px;
}
select option { background: var(--bg-elevated); color: var(--text); }

/* ─────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────── */
.btn {
    font-family: var(--font-body) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: var(--r-md) !important;
    font-size: 12px;
    transition: all var(--t) !important;
    text-transform: uppercase;
}
.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--accent-hi) !important;
    border-color: var(--accent-hi) !important;
    box-shadow: 0 0 18px var(--accent-glow) !important;
    transform: translateY(-1px);
}
.btn-default, .btn-secondary {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-mid) !important;
}
.btn-default:hover, .btn-secondary:hover {
    background: var(--bg-overlay) !important;
    border-color: var(--border-hi) !important;
    color: var(--text) !important;
}
.btn-success { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
.btn-success:hover { filter: brightness(1.1); box-shadow: 0 0 14px rgba(0,200,112,0.35) !important; }
.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-danger:hover { filter: brightness(1.1); box-shadow: 0 0 14px rgba(240,64,96,0.35) !important; }
.btn-info { background: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: #000 !important; }
.btn-link { color: var(--accent-soft) !important; text-transform: none !important; letter-spacing: 0 !important; }
.btn-link:hover { color: var(--text-hi) !important; }
.btn-active-client {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-mid) !important;
}
.btn-sm { font-size: 11px !important; padding: 4px 12px !important; }
.btn-lg { font-size: 14px !important; }

/* ─────────────────────────────────────────────────────────────
   TABLES
───────────────────────────────────────────────────────────── */
.table { color: var(--text) !important; border-color: var(--border) !important; }
.table thead th {
    background: var(--bg-elevated) !important;
    border-bottom: 2px solid var(--border-mid) !important;
    border-top: none !important;
    color: var(--text-lo) !important;
    font-family: var(--font-body) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 12px 16px;
}
.table td, .table th {
    border-color: var(--border) !important;
    color: var(--text) !important;
    padding: 13px 16px;
    vertical-align: middle;
}
.table tbody tr { transition: background var(--t); }
.table-hover tbody tr:hover { background: rgba(112,0,255,0.05) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.015) !important; }
.table-bordered { border-color: var(--border) !important; }

/* ─────────────────────────────────────────────────────────────
   ALERTS
───────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--r-md) !important;
    border: 1px solid !important;
    border-left-width: 3px !important;
    font-size: 13px;
    font-weight: 600;
}
.alert-success { background: rgba(0,200,112,0.07) !important; border-color: rgba(0,200,112,0.35) !important; color: #4dffa0 !important; }
.alert-danger, .alert-error { background: rgba(240,64,96,0.07) !important; border-color: rgba(240,64,96,0.35) !important; color: #ff8099 !important; }
.alert-warning { background: rgba(240,171,0,0.07) !important; border-color: rgba(240,171,0,0.35) !important; color: #ffd54f !important; }
.alert-info { background: rgba(14,165,233,0.07) !important; border-color: rgba(14,165,233,0.35) !important; color: #7dd3fc !important; }

/* ─────────────────────────────────────────────────────────────
   BADGES
───────────────────────────────────────────────────────────── */
.badge, .label {
    font-family: var(--font-mono) !important;
    font-size: 10px;
    letter-spacing: 0.05em;
    border-radius: var(--r-sm) !important;
    padding: 3px 8px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
}
.badge-primary, .label-primary { background: var(--accent) !important; }
.badge-success, .label-success { background: var(--success) !important; }
.badge-warning, .label-warning { background: var(--warning) !important; color: #000 !important; }
.badge-danger, .label-danger { background: var(--danger) !important; }
.badge-info, .label-info { background: var(--info) !important; }
.badge-secondary, .label-default {
    background: var(--bg-overlay) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-mid) !important;
}
.badge-dark, .badge-pill {
    background: var(--bg-overlay) !important;
    color: var(--text-mid) !important;
    border: 1px solid var(--border-mid) !important;
    font-size: 9px;
}

/* Status badges */
.status-active, .status-open, .status-completed, .status-paid, .status-accepted { background: var(--success) !important; color: #000 !important; }
.status-pending, .status-inprogress { background: var(--warning) !important; color: #000 !important; }
.status-suspended, .status-pending-registration { background: var(--warning) !important; color: #000 !important; }
.status-terminated, .status-closed, .status-cancelled { background: var(--bg-overlay) !important; color: var(--text-lo) !important; border: 1px solid var(--border-mid) !important; }
.status-expired { background: var(--border-mid) !important; color: var(--text-lo) !important; }
.status-unpaid, .status-fraud { background: var(--danger) !important; }
.status-answered { background: var(--accent) !important; }
.status-onhold { background: var(--info) !important; }

/* ─────────────────────────────────────────────────────────────
   MODALS
───────────────────────────────────────────────────────────── */
.modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px var(--border) !important;
    color: var(--text) !important;
}
.modal-header {
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg-elevated) !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    padding: 16px 20px;
}
.modal-footer { border-top: 1px solid var(--border) !important; background: var(--bg-elevated) !important; }
.modal-title { color: var(--text-hi) !important; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }
.modal-backdrop { background: rgba(0,0,0,0.85) !important; }
.close { color: var(--text-lo) !important; opacity: 1 !important; transition: color var(--t) !important; }
.close:hover { color: var(--text) !important; }

/* ─────────────────────────────────────────────────────────────
   TABS
───────────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--border) !important;
    gap: 2px;
}
.nav-tabs .nav-link {
    color: var(--text-lo) !important;
    border: 1px solid transparent !important;
    border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 18px !important;
    transition: all var(--t) !important;
}
.nav-tabs .nav-link:hover {
    color: var(--text) !important;
    background: var(--bg-elevated) !important;
    border-color: var(--border) var(--border) transparent !important;
}
.nav-tabs .nav-link.active {
    color: var(--accent-soft) !important;
    background: var(--bg-card) !important;
    border-color: var(--border) var(--border) var(--bg-card) !important;
    border-bottom-color: transparent !important;
}
.tab-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    padding: 20px;
    border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
}

/* ─────────────────────────────────────────────────────────────
   LIST GROUPS
───────────────────────────────────────────────────────────── */
.list-group-item {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    transition: background var(--t);
    font-size: 13px;
}
.list-group-item:hover { background: var(--bg-elevated) !important; }
.list-group-item.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGINATION
───────────────────────────────────────────────────────────── */
.page-item .page-link {
    background: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text-mid) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px;
    transition: all var(--t);
}
.page-item .page-link:hover {
    background: var(--bg-overlay) !important;
    color: var(--text) !important;
    border-color: var(--border-hi) !important;
}
.page-item.active .page-link {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 0 12px var(--accent-glow);
}
.page-item.disabled .page-link { opacity: 0.3 !important; }

/* ─────────────────────────────────────────────────────────────
   PROGRESS BARS
───────────────────────────────────────────────────────────── */
.progress {
    background: var(--bg-elevated) !important;
    border-radius: var(--r-sm) !important;
    height: 6px;
    overflow: visible;
}
.progress-bar {
    background: linear-gradient(90deg, var(--accent), var(--accent-soft)) !important;
    border-radius: var(--r-sm) !important;
    font-family: var(--font-mono) !important;
    position: relative;
}
.progress-bar::after {
    content: '';
    position: absolute;
    right: 0; top: -2px; bottom: -2px;
    width: 3px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 8px var(--accent);
}
.progress-bar-success { background: var(--success) !important; }
.progress-bar-warning { background: var(--warning) !important; }
.progress-bar-danger { background: var(--danger) !important; }

/* ─────────────────────────────────────────────────────────────
   POPOVER / NOTIFICATIONS
───────────────────────────────────────────────────────────── */
.popover {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important;
    border-radius: var(--r-lg) !important;
}
.popover-header { background: var(--bg-overlay) !important; border-color: var(--border) !important; color: var(--text) !important; font-weight: 700; border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
.popover-body { color: var(--text) !important; }
.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^=bottom] .arrow::after { border-bottom-color: var(--bg-elevated) !important; }

#accountNotificationsContent {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important;
    border-radius: var(--r-lg) !important;
    min-width: 280px;
}
#accountNotificationsContent .client-alerts li {
    border-bottom: 1px solid var(--border) !important;
}
#accountNotificationsContent .client-alerts li a {
    color: var(--text) !important;
    font-size: 13px;
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background var(--t);
}
#accountNotificationsContent .client-alerts li a:hover { background: var(--accent-dim) !important; }
#accountNotificationsContent .client-alerts li.none {
    color: var(--text-lo);
    font-size: 12px;
    padding: 12px 14px;
    font-family: var(--font-mono);
}

/* ─────────────────────────────────────────────────────────────
   SEARCH
───────────────────────────────────────────────────────────── */
.search .form-control {
    background: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text) !important;
    border-radius: 0 var(--r-md) var(--r-md) 0 !important;
}
.search .btn-default {
    background: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text-lo) !important;
    border-radius: var(--r-md) 0 0 var(--r-md) !important;
}
.search .btn-default:hover { color: var(--accent-soft) !important; }

/* ─────────────────────────────────────────────────────────────
   TOOLTIP
───────────────────────────────────────────────────────────── */
.tooltip-inner {
    background: var(--bg-overlay) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-hi) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px;
    border-radius: var(--r-sm) !important;
    padding: 5px 10px !important;
}
.bs-tooltip-top .arrow::before { border-top-color: var(--border-hi) !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--border-hi) !important; }

/* ─────────────────────────────────────────────────────────────
   TICKET REPLIES
───────────────────────────────────────────────────────────── */
.ticket-reply {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    margin-bottom: 12px;
}
.ticket-reply.staff-reply {
    border-left: 3px solid var(--accent) !important;
    background: rgba(112,0,255,0.04) !important;
}

/* ─────────────────────────────────────────────────────────────
   PRODUCT ITEMS / STAT CARDS
───────────────────────────────────────────────────────────── */
.product-list-item, .active-products-services-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    color: var(--text) !important;
    transition: border-color var(--t), box-shadow var(--t);
}
.product-list-item:hover, .active-products-services-item:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 20px var(--accent-glow) !important;
}
.stat-item, .client-home-stat {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    transition: border-color var(--t), box-shadow var(--t);
}
.stat-item:hover, .client-home-stat:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 16px var(--accent-glow) !important;
}

/* ─────────────────────────────────────────────────────────────
   PRICING TABLES
───────────────────────────────────────────────────────────── */
.pricing-table .plan {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    transition: all var(--t);
}
.pricing-table .plan:hover,
.pricing-table .plan-featured {
    border-color: var(--accent) !important;
    box-shadow: 0 0 28px var(--accent-glow) !important;
}
.pricing-table .plan-price {
    color: var(--accent-soft) !important;
    font-family: var(--font-display) !important;
    font-size: 48px;
}

/* ─────────────────────────────────────────────────────────────
   CART
───────────────────────────────────────────────────────────── */
#order-standard_cart .cart-sidebar .card-header { background: var(--bg-elevated) !important; color: var(--text) !important; }
#order-standard_cart .cart-sidebar .card-footer { background: var(--bg-elevated) !important; }
#order-standard_cart .cart-sidebar .list-group-item { background: transparent !important; border-color: var(--border) !important; color: var(--text) !important; }

/* ─────────────────────────────────────────────────────────────
   DOMAIN SEARCH
───────────────────────────────────────────────────────────── */
.domain-search-wrapper, .domain-search {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    padding: 24px;
}

/* ─────────────────────────────────────────────────────────────
   SELECT2
───────────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text) !important;
    border-radius: var(--r-md) !important;
    height: 38px !important;
    line-height: 36px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text) !important; line-height: 36px !important; }
.select2-dropdown {
    background: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
    border-radius: var(--r-md) !important;
}
.select2-container--default .select2-results__option { color: var(--text) !important; background: transparent; font-size: 13px; }
.select2-container--default .select2-results__option--highlighted { background: var(--accent-dim) !important; color: var(--text) !important; }
.select2-search--dropdown .select2-search__field { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text) !important; border-radius: var(--r-sm) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-lo) transparent transparent !important; }

/* ─────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────── */
footer#footer, #footer, .footer {
    background: var(--bg-raised) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-lo) !important;
    padding: 28px 0;
    margin-top: 48px;
}
footer a, #footer a { color: var(--text-lo) !important; font-size: 12px; }
footer a:hover, #footer a:hover { color: var(--text) !important; }
.copyright {
    font-family: var(--font-mono) !important;
    font-size: 11px;
    color: var(--text-lo) !important;
    letter-spacing: 0.06em;
}
footer .nav-link { padding: 4px 0 !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ─────────────────────────────────────────────────────────────
   UTILITY OVERRIDES
───────────────────────────────────────────────────────────── */
hr { border-color: var(--border) !important; }
.text-muted { color: var(--text-lo) !important; }
.text-primary { color: var(--accent-soft) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.bg-light { background: var(--bg-elevated) !important; }
.bg-dark { background: var(--bg-overlay) !important; }
.bg-white { background: var(--bg-card) !important; }
.bg-primary { background: var(--accent) !important; }
.bg-success { background: var(--success) !important; }
.bg-danger { background: var(--danger) !important; }
.bg-info { background: var(--info) !important; }
.text-white { color: var(--text-hi) !important; }
.border { border-color: var(--border) !important; }
.border-top { border-top-color: var(--border) !important; }
.border-bottom { border-bottom-color: var(--border) !important; }

/* Full-page overlay spinner */
#fullpage-overlay {
    background: rgba(6,8,13,0.92) !important;
    backdrop-filter: blur(8px);
}

/* Return to admin button */
.btn-return-to-admin {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-mid) !important;
    font-size: 11px;
}

/* ─────────────────────────────────────────────────────────────
   PRINT
───────────────────────────────────────────────────────────── */
@media print {
    body { background: #fff !important; color: #000 !important; background-image: none !important; }
    body::after { display: none !important; }
    .sidebar, #main-menu, #top-nav, header { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tile { padding: 20px 12px; }
    .tile .stat { font-size: 28px; }
    section#main-body { padding-top: 16px; }
}

/* ─────────────────────────────────────────────────────────────
   DATATABLES — override all white backgrounds
───────────────────────────────────────────────────────────── */
.dataTables_wrapper,
.dataTables_wrapper table,
.dataTables_wrapper table.table-list,
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody {
    background: transparent !important;
    color: var(--text) !important;
}

/* Table rows */
.dataTables_wrapper table.table-list,
table.dataTable,
table.dataTable tbody tr,
table.dataTable tbody td,
.table-list tbody tr,
.table-list tbody td {
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
.dataTables_wrapper table.table-list tbody tr {
    background: transparent !important;
}
table.dataTable tbody tr.odd > td,
table.dataTable tbody tr.even > td {
    background: transparent !important;
}
table.dataTable tbody tr:hover > td,
table.dataTable tbody tr:hover {
    background: rgba(112,0,255,0.05) !important;
}

/* DataTable header */
.dataTables_wrapper table.table-list thead th,
table.dataTable thead th,
table.dataTable thead td {
    background: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text-lo) !important;
    font-family: var(--font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-color: var(--bg-overlay) !important;
}

/* "No Records Found" row */
.dataTables_wrapper table td.dataTables_empty,
table.dataTable tbody td.dataTables_empty {
    background: var(--bg-card) !important;
    color: var(--text-lo) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px;
    letter-spacing: 0.06em;
    border-color: var(--border) !important;
}

/* DataTable search box */
.dataTables_wrapper .dataTables_filter label .form-control,
.dataTables_filter input,
.dataTables_filter input[type="search"] {
    background: var(--bg-elevated) !important;
    background-image: none !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text) !important;
    border-radius: var(--r-md) !important;
    padding: 7px 14px !important;
    font-family: var(--font-body) !important;
}
.dataTables_wrapper .dataTables_filter label .form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-dim) !important;
}

/* DataTable info / length */
.dataTables_info,
.dataTables_wrapper .dataTables_info {
    color: var(--text-lo) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px;
}
.dataTables_length select,
.dataTables_wrapper .dataTables_length select {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text) !important;
    border-radius: var(--r-sm) !important;
    padding: 2px 6px !important;
}
.dataTables_length label,
.dataTables_wrapper .dataTables_length label {
    color: var(--text-lo) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* DataTable pagination */
.dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-mid) !important;
    border-radius: var(--r-sm) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px;
    padding: 5px 14px !important;
    margin: 0 2px !important;
    transition: all var(--t);
}
.dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-overlay) !important;
    border-color: var(--border-hi) !important;
    color: var(--text) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 0 12px var(--accent-glow);
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.3 !important;
    cursor: default !important;
}

/* ─────────────────────────────────────────────────────────────
   MARKDOWN / WHMCS RICH TEXT EDITOR — kill white bg
───────────────────────────────────────────────────────────── */
.whmcs-markdown-editor,
.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-wrap,
.CodeMirror-lines,
.EasyMDEContainer,
.EasyMDEContainer .editor-toolbar,
.editor-toolbar,
.editor-preview,
.editor-preview-side {
    background: var(--bg-elevated) !important;
    background-color: var(--bg-elevated) !important;
    color: var(--text) !important;
    border-color: var(--border-mid) !important;
}
.CodeMirror-cursor { border-left-color: var(--accent-soft) !important; }
.CodeMirror-selected { background: var(--accent-dim) !important; }
.EasyMDEContainer .editor-toolbar {
    background: var(--bg-overlay) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--r-md) var(--r-md) 0 0 !important;
}
.EasyMDEContainer .editor-toolbar a,
.editor-toolbar button,
.editor-toolbar a {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-mid) !important;
    border-radius: var(--r-sm) !important;
    transition: all var(--t);
}
.EasyMDEContainer .editor-toolbar a:hover,
.editor-toolbar button:hover,
.editor-toolbar a:hover {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
}
.editor-toolbar a.active,
.editor-toolbar button.active {
    background: var(--accent) !important;
    color: #fff !important;
}
.editor-toolbar .preview,
.editor-toolbar .preview:hover {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}
.editor-statusbar {
    background: var(--bg-overlay) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-lo) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px;
}
.cm-s-easymde .cm-header, .cm-header { color: var(--accent-soft) !important; }
.cm-s-easymde .cm-link, .cm-link { color: var(--info) !important; }
.cm-s-easymde .cm-quote, .cm-quote { color: var(--text-mid) !important; }

/* Textarea fallback */
textarea.whmcs-markdown-editor,
.markdown-editor textarea {
    background: var(--bg-elevated) !important;
    color: var(--text) !important;
    border-color: var(--border-mid) !important;
}

/* ─────────────────────────────────────────────────────────────
   FILE UPLOAD / ATTACHMENT AREAS
───────────────────────────────────────────────────────────── */
.custom-file-label,
.custom-file-input,
.attach-files .form-control,
.form-control[readonly],
input[readonly] {
    background: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text) !important;
}
.custom-file-label::after {
    background: var(--bg-overlay) !important;
    border-left-color: var(--border-mid) !important;
    color: var(--text-mid) !important;
}

/* Attachment area */
.attachments-wrapper,
.attach-files {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
}

/* ─────────────────────────────────────────────────────────────
   GENERAL WHITE ELEMENT OVERRIDES
───────────────────────────────────────────────────────────── */
/* Catch-all for any remaining white backgrounds in rendered content */
.card-body > .table td,
.card-body > .table tr,
.panel-body > .table td,
.panel-body > .table tr,
.tab-content > .table td,
.tab-content > .table tr {
    background: transparent !important;
    background-color: transparent !important;
}

/* DataTable wrapper within a card */
.card .dataTables_wrapper,
.panel .dataTables_wrapper {
    background: transparent !important;
}

/* Responsive DataTables child rows */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
    background: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px var(--accent) !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before {
    background: var(--danger) !important;
}
table.dataTable > tbody > tr.child ul.dtr-details {
    background: var(--bg-elevated) !important;
}
table.dataTable > tbody > tr.child {
    background: var(--bg-elevated) !important;
}

/* Input groups inside tables */
.table .input-group-text,
table .input-group-text {
    background: var(--bg-overlay) !important;
    border-color: var(--border-mid) !important;
    color: var(--text-lo) !important;
}

/* Search table row highlights */
.listtable {
    background: transparent !important;
}

/* Client emails / viewemail white area */
.email-message,
.email-body,
.message-body {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DB03 FIX PATCH — Services page, Store cards, Payment Methods
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   FIX 1: clientarea.php?action=services — kill white box
   The WHMCS services page wraps content in a default Bootstrap
   card; DataTables also injects white scroll containers.
─────────────────────────────────────────────────────────────── */
.primary-content > .card,
.primary-content > .panel,
.primary-content > .row > .card,
.primary-content > .row > .panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

/* DataTables scroll body — the most common source of white boxes */
.dataTables_scrollBody,
.dataTables_scrollHead,
.dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollHead {
    background: transparent !important;
    background-color: transparent !important;
}

/* table-container div used in clientareaproducts.tpl */
.table-container {
    background: transparent !important;
}

/* Catch every white child inside the services page wrapper */
.primary-content .table-responsive,
.primary-content .table-bordered,
.primary-content > div,
.dataTables_wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* The WHMCS services list card itself */
#tableServicesList,
#tableServicesList th,
#tableServicesList td,
#tableServicesList thead,
#tableServicesList tbody,
#tableServicesList tfoot {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ─────────────────────────────────────────────────────────────
   FIX 2: index.php?rp=/store/gameservers — dark store cards
   ROOT CAUSE: dynamic-store.css uses var(--bg-color) for card
   backgrounds. WHMCS sets --bg-color via INLINE STYLE on the
   .dynamic-landing-page div using the admin branding color
   (often white/light). CSS custom properties set via inline
   style CANNOT be overridden by stylesheet rules even with
   !important. The only fix is to use hardcoded hex values on
   the actual element properties (background, color, etc.) —
   NOT variables — so our !important wins the cascade.
─────────────────────────────────────────────────────────────── */

/* Container: hardcoded dark bg, not via variable */
.dynamic-landing-page {
    background: #090c14 !important;
    background-color: #090c14 !important;
    color: #c8d0e0 !important;
}

/* Every section/block background — hardcoded, not var() */
.dynamic-landing-page .background-light  { background: #101520 !important; }
.dynamic-landing-page .background-main   { background: #0c1019 !important; }
.dynamic-landing-page .background-dark   { background: #090c14 !important; }
.dynamic-landing-page .background-gradient { background: linear-gradient(135deg, #101520 0%, #0c1019 100%) !important; }
.dynamic-landing-page .hero-section,
.dynamic-landing-page .features-section,
.dynamic-landing-page .pricing-section,
.dynamic-landing-page .cta-section,
.dynamic-landing-page .faq-section,
.dynamic-landing-page .features-table-section,
.dynamic-landing-page section { background: transparent !important; }

/* ── PRICING CARDS: hardcoded hex, zero var() ── */
.dynamic-landing-page .pricing-card {
    background: #101520 !important;
    background-color: #101520 !important;
    background-image: linear-gradient(135deg, #101520 0%, #0f1829 100%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important;
    color: #c8d0e0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.dynamic-landing-page .pricing-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #7000ff, #a855ff, #7000ff) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}
.dynamic-landing-page .pricing-card:hover {
    background: #111826 !important;
    background-color: #111826 !important;
    border-color: rgba(112,0,255,0.5) !important;
    box-shadow: 0 0 36px rgba(112,0,255,0.25), 0 8px 32px rgba(0,0,0,0.65) !important;
    transform: translateY(-6px) !important;
}
.dynamic-landing-page .pricing-card:hover::before { opacity: 1 !important; }

/* Card text — hardcoded */
.dynamic-landing-page .plan-name    { color: #f0f5ff !important; font-weight: 700 !important; }
.dynamic-landing-page .plan-description { color: #7a8499 !important; }
.dynamic-landing-page .price-amount { color: #a855ff !important; font-weight: 800 !important; }
.dynamic-landing-page .price-period { color: #7a8499 !important; }
.dynamic-landing-page .feature-item { color: #c8d0e0 !important; }
.dynamic-landing-page .feature-check { color: #22c55e !important; }
.dynamic-landing-page .feature-cross { color: #ef4444 !important; }

/* Plan button — purple gradient, no var() */
.dynamic-landing-page .plan-button {
    background: linear-gradient(135deg, #7000ff, #9333ea) !important;
    background-color: #7000ff !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
.dynamic-landing-page .plan-button:hover {
    background: linear-gradient(135deg, #8b14ff, #a855ff) !important;
    box-shadow: 0 0 18px rgba(112,0,255,0.6) !important;
    transform: translateY(-2px) !important;
}

/* Hero text */
.dynamic-landing-page .hero-title { color: #f0f5ff !important; }
.dynamic-landing-page .hero-subtitle,
.dynamic-landing-page .pricing-subtitle,
.dynamic-landing-page .hero-description { color: #7a8499 !important; }
.dynamic-landing-page .hero-logo-container { background: rgba(255,255,255,0.06) !important; }

/* All headings / body text in the store */
.dynamic-landing-page h1,
.dynamic-landing-page h2,
.dynamic-landing-page h3,
.dynamic-landing-page h4,
.dynamic-landing-page h5,
.dynamic-landing-page h6 { color: #e8edf5 !important; }
.dynamic-landing-page p   { color: #7a8499 !important; }
.dynamic-landing-page li  { color: #c8d0e0 !important; }

/* Feature cards */
.dynamic-landing-page .features-content .feature {
    background: #101520 !important;
    background-color: #101520 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: #c8d0e0 !important;
}

/* Comparison table */
.dynamic-landing-page .table-wrapper {
    background: #101520 !important;
    background-color: #101520 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.dynamic-landing-page .comparison-table th,
.dynamic-landing-page .comparison-table td {
    background: transparent !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
    color: #c8d0e0 !important;
}
.dynamic-landing-page .feature-row:hover { background: rgba(255,255,255,0.03) !important; }
.dynamic-landing-page .buy-row { background: rgba(255,255,255,0.04) !important; }
.dynamic-landing-page .table-price,
.dynamic-landing-page .table-price .price-amount { color: #a855ff !important; }
.dynamic-landing-page .table-cta-button {
    background: #7000ff !important;
    background-color: #7000ff !important;
    color: #fff !important;
    border: none !important;
}
.dynamic-landing-page .table-cta-button:hover {
    background: #8b14ff !important;
    box-shadow: 0 0 14px rgba(112,0,255,0.5) !important;
}

/* CTA & FAQ */
.dynamic-landing-page .cta-section  { background: #090c14 !important; }
.dynamic-landing-page .faq-item     { border-bottom-color: rgba(255,255,255,0.08) !important; }
.dynamic-landing-page .faq-contact  { background: rgba(255,255,255,0.04) !important; }

/* Store.css product option items (used by landing-page class) */
.landing-page .product-options .item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.landing-page .product-options .item:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 20px var(--accent-glow) !important;
}
.landing-page .content-block,
.landing-page .content-block.bg-white,
.landing-page .feature-tabs,
.landing-page .feature-tabs.bg-white {
    background: var(--bg-raised) !important;
}
.landing-page .light-grey-bg,
.landing-page .get-started {
    background: var(--bg-overlay) !important;
}

/* ─────────────────────────────────────────────────────────────
   FIX 3: REMOVE Payment Methods — hide from sidebar nav & page
   Using display:none so no broken pages appear.
─────────────────────────────────────────────────────────────── */

/* Hide "Payment Methods" sidebar nav link */
[menuItemName="account-paymentmethods"],
a[href*="account/paymentmethods"],
a[href*="account-paymentmethods"],
.list-group-item[href*="paymentmethods"],
a[href*="paymentmethods"] {
    display: none !important;
}

/* Hide the Payment Methods panel on the client home page */
[menuItemName="billing-payment-methods"] {
    display: none !important;
}

/* Hide the full Payment Methods page content */
body[class*="paymentmethod"] .primary-content,
.page-paymentmethods .primary-content {
    display: none !important;
}

/* Hide the account billing payment methods card on client home */
.db03-panels-grid [menuItemName="billing-payment-methods"],
#billing-payment-methods {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   FIX: Portal Home "HOW CAN WE HELP" / "YOUR ACCOUNT" tiles
   theme.css hardcodes background-color: #fff on .action-icon-btns a
─────────────────────────────────────────────────────────────── */
.action-icon-btns a,
body #main-body .action-icon-btns a {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-lo) !important;
    border-radius: var(--r-md) !important;
    transition: border-color var(--t), background var(--t), transform var(--t) !important;
    position: relative;
    overflow: hidden;
}
.action-icon-btns a::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform var(--t);
    transform-origin: left;
}
.action-icon-btns a:hover,
body #main-body .action-icon-btns a:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
    box-shadow: 0 0 20px var(--accent-glow) !important;
    transform: translateY(-2px);
}
.action-icon-btns a:hover::before {
    transform: scaleX(1);
}
.action-icon-btns a .ico-container i {
    color: var(--text-lo) !important;
    transition: color var(--t) !important;
}
.action-icon-btns a:hover .ico-container i {
    color: var(--accent-soft) !important;
}

/* Also fix the card-columns home product cards on portal home */
.card-columns.home .card,
.card-columns.home .card-body {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.card-columns.home .card:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 20px var(--accent-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DB03 FIX PATCH 2 — Portal homepage tiles & store white boxes
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   FIX: index.php portal homepage — "HOW CAN WE HELP" &
   "YOUR ACCOUNT" action icon tiles (theme.css hardcodes #fff)
─────────────────────────────────────────────────────────────── */
.action-icon-btns a {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    color: var(--text) !important;
    transition: border-color var(--t), background var(--t), box-shadow var(--t) !important;
    position: relative;
    overflow: hidden;
}
.action-icon-btns a::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform var(--t);
    transform-origin: left;
}
.action-icon-btns a:hover {
    background-color: var(--bg-elevated) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 20px var(--accent-glow) !important;
    color: var(--text-hi) !important;
}
.action-icon-btns a:hover::before {
    transform: scaleX(1);
}
.action-icon-btns a .ico-container i {
    color: var(--text-lo) !important;
    transition: color var(--t);
}
.action-icon-btns a:hover .ico-container i {
    color: var(--accent-soft) !important;
}

/* card-accent colours on tiles */
.action-icon-btns a.card-accent-teal        { border-top: 2px solid #2dd4bf !important; }
.action-icon-btns a.card-accent-pomegranate { border-top: 2px solid var(--danger) !important; }
.action-icon-btns a.card-accent-sun-flower  { border-top: 2px solid #f0ab00 !important; }
.action-icon-btns a.card-accent-asbestos    { border-top: 2px solid var(--border-hi) !important; }
.action-icon-btns a.card-accent-green       { border-top: 2px solid var(--success) !important; }
.action-icon-btns a.card-accent-midnight-blue { border-top: 2px solid var(--accent) !important; }

/* ─────────────────────────────────────────────────────────────
   FIX: store/gameservers — remaining white table wrapper,
   buy row, and CTA button surfaces
─────────────────────────────────────────────────────────────── */
.dynamic-landing-page .table-wrapper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}
.dynamic-landing-page .buy-row {
    background: var(--bg-elevated) !important;
    border-top: 1px solid var(--border) !important;
}
.dynamic-landing-page .cta-primary-button {
    background: var(--accent) !important;
    color: #fff !important;
}
.dynamic-landing-page .cta-primary-button:hover {
    background: var(--accent-hi) !important;
}
.dynamic-landing-page .cta-secondary-button {
    border-color: var(--accent-soft) !important;
    color: var(--accent-soft) !important;
}
.dynamic-landing-page .cta-secondary-button:hover {
    background: var(--accent-dim) !important;
    color: var(--text-hi) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DB03 FIX PATCH 3 — Ticket form white/gray, store vars cleanup
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   FIX: submitticket.php?step=2 — Bootstrap hardcodes #e9ecef
   for disabled inputs and #fff for custom-file-label
─────────────────────────────────────────────────────────────── */

/* Disabled / readonly form controls */
.form-control:disabled,
.form-control[disabled],
.form-control[readonly],
input:disabled,
input[disabled],
select:disabled,
select[disabled],
textarea:disabled,
textarea[disabled] {
    background: var(--bg-raised) !important;
    background-color: var(--bg-raised) !important;
    color: var(--text-lo) !important;
    border-color: var(--border) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* custom-file-label (file attachment picker) */
.custom-file-label {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text) !important;
}
.custom-file-label::after {
    background-color: var(--bg-overlay) !important;
    color: var(--text-mid) !important;
    border-left-color: var(--border-mid) !important;
}
.custom-file-input[disabled] ~ .custom-file-label,
.custom-file-input:disabled ~ .custom-file-label {
    background-color: var(--bg-raised) !important;
    color: var(--text-lo) !important;
}

/* custom-select dropdown */
.custom-select {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text) !important;
}

/* ─────────────────────────────────────────────────────────────
   Force dynamic store CSS vars to dark — belt-and-suspenders
   on top of the direct dynamic-store.css edits
─────────────────────────────────────────────────────────────── */
.dynamic-landing-page,
.dynamic-landing-page * {
    --bg-color:  #0c1019;
    --bg-light:  #101520;
    --bg-dark:   #090c14;
    --text-color: #c8d0e0;
    --text-secondary: #7a8499;
}

/* Ensure section alternating backgrounds use dark vars */
.dynamic-landing-page .background-light  { background: #101520 !important; }
.dynamic-landing-page .background-main   { background: #0c1019 !important; }
.dynamic-landing-page .background-dark   { background: #090c14 !important; }
.dynamic-landing-page .background-gradient {
    background: linear-gradient(135deg, #101520 0%, #0c1019 100%) !important;
}

/* Feature cards inside features section */
.dynamic-landing-page .features-content .feature {
    background: #101520 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: #c8d0e0 !important;
}
.dynamic-landing-page .features-content .feature h3,
.dynamic-landing-page .features-content .feature p {
    color: inherit !important;
}

/* CTA section */
.dynamic-landing-page .cta-section {
    background: #090c14 !important;
}

/* .landing-page overrides moved to footer.tpl so they fire after store.css body injection */

/* =============================================================
   DB123 Homepage v2 — public-facing landing page system
   ============================================================= */
.db-home {
    position: relative;
    color: var(--text);
}
.db-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}
.db-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(72px, 8vw, 132px) 0 72px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.07);
    overflow: visible;
}
.db-hero:before { display: none; }
.db-hero__glow {
    position: fixed;
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
}
.db-hero__glow--one {
    width: 70vw;
    height: 70vw;
    left: -20vw;
    top: -10vw;
    background: radial-gradient(circle, rgba(112,0,255,.28) 0%, transparent 70%);
    filter: blur(40px);
    opacity: 1;
}
.db-hero__glow--two {
    width: 60vw;
    height: 60vw;
    right: -15vw;
    top: -5vw;
    background: radial-gradient(circle, rgba(14,165,233,.18) 0%, transparent 70%);
    filter: blur(40px);
    opacity: 1;
}
.db-hero .db-shell { position: relative; z-index: 1; }
.db-kicker,
.db-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-soft) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.db-kicker__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--success);
    box-shadow: 0 0 20px rgba(0,200,112,.55);
}
.db-hero__title {
    max-width: none;
    width: 100%;
    margin: 20px 0 18px;
    font-size: clamp(32px, 4.2vw, 68px) !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;
    white-space: nowrap;
}
.db-hero__lead {
    max-width: 690px;
    color: var(--text-mid) !important;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.65;
    margin-bottom: 28px;
}
.db-hero__actions,
.db-final-cta__actions,
.db-domain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.db-btn {
    border-radius: var(--r-md) !important;
    padding: 13px 22px !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.db-btn--primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-hi)) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff !important;
    box-shadow: 0 18px 42px rgba(112,0,255,.25);
}
.db-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 24px 54px rgba(112,0,255,.34); }
.db-btn--ghost {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-hi) !important;
}
.db-btn--ghost:hover { border-color: var(--accent-soft) !important; background: rgba(112,0,255,.12) !important; }
.db-trust-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    max-width: 680px;
    margin-top: 40px;
    background: var(--border);
    border: 1px solid var(--border);
}
.db-trust-row > div {
    padding: 18px;
    background: rgba(9,12,20,.86);
}
.db-trust-row strong {
    display: block;
    color: var(--text-hi);
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: .04em;
    line-height: 1;
}
.db-trust-row span {
    color: var(--text-mid);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.db-command-card {
    position: relative;
    margin-left: 40px;
    margin-top: 300px;
    width: 650px;
    background: rgba(12,16,25,.84);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 30px 90px rgba(0,0,0,.42), 0 0 70px rgba(112,0,255,.18);
    backdrop-filter: blur(18px);
    overflow: hidden;
}
.db-command-card:after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(112,0,255,.35);
    pointer-events: none;
    mask-image: linear-gradient(135deg, #000, transparent 45%);
}
.db-command-card__top {
    display: flex;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.025);
}
.db-command-card__top span {
    width: 10px; height: 10px; border-radius: 999px; background: var(--border-hi);
}
.db-command-card__body { padding: 28px; font-family: var(--font-mono); }
.db-terminal-line { color: var(--text-hi); margin-bottom: 18px; }
.db-terminal-line span { color: var(--accent-soft); }
.db-terminal-output {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: var(--text-mid);
}
.db-terminal-output--ok { color: var(--success); }
.db-command-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-top: 1px solid var(--border);
    background: rgba(255,255,255,.025);
}
.db-command-card__footer span,
.db-command-card__footer a {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.db-command-card__footer strong { display: block; color: var(--text-hi); }
.db-section,
.db-domain-strip,
.db-final-cta { padding: clamp(64px, 7vw, 104px) 0; }
.db-section--muted,
.db-domain-strip { background: rgba(255,255,255,.018); border-top: 1px solid rgba(255,255,255,.055); border-bottom: 1px solid rgba(255,255,255,.055); }
.db-section-heading { max-width: 760px; margin: 0 0 38px; }
.db-section-heading--compact { margin-bottom: 24px; }
.db-section-heading h2,
.db-final-cta h2 {
    margin: 10px 0 12px;
    font-size: clamp(40px, 5vw, 72px) !important;
    line-height: .92 !important;
}
.db-section-heading p,
.db-final-cta p { color: var(--text-mid) !important; font-size: 16px; line-height: 1.65; }
.db-service-card,
.db-feature-card,
.db-resource-card,
.db-mini-card,
.db-final-cta__inner {
    background: linear-gradient(180deg, rgba(16,21,32,.88), rgba(9,12,20,.92));
    border: 1px solid rgba(255,255,255,.075);
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
}
.db-service-card,
.db-feature-card { padding: 28px; transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.db-service-card:hover,
.db-feature-card:hover,
.db-resource-card:hover,
.db-mini-card:hover {
    transform: translateY(-4px);
    border-color: rgba(168,85,255,.5);
    box-shadow: 0 24px 70px rgba(0,0,0,.34), 0 0 45px rgba(112,0,255,.12);
}
.db-service-card__icon,
.db-feature-card > i,
.db-resource-card > i,
.db-mini-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 20px;
    color: var(--accent-soft);
    background: rgba(112,0,255,.13);
    border: 1px solid rgba(112,0,255,.28);
}
.db-service-card h3,
.db-feature-card h3 {
    font-size: 31px !important;
    margin-bottom: 12px;
}
.db-service-card p,
.db-feature-card p { color: var(--text-mid) !important; line-height: 1.65; }
.db-card-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.db-domain-actions { align-items: stretch; }
.db-mini-card {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    min-height: 154px;
    padding: 24px;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.db-mini-card span,
.db-resource-card span { color: var(--text-hi); font-weight: 700; }
.db-mini-card small { color: var(--text-mid); }
.db-resource-card {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 24px;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.db-resource-card i { margin-bottom: 16px; }
.db-final-cta__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding: clamp(32px, 5vw, 56px);
    background:
        radial-gradient(circle at 80% 20%, rgba(112,0,255,.28), transparent 34%),
        linear-gradient(135deg, rgba(16,21,32,.94), rgba(9,12,20,.96));
}
.db-final-cta__inner > div:first-child { max-width: 720px; }
@media (max-width: 991.98px) {
    .db-trust-row { grid-template-columns: 1fr; }
    .db-final-cta__inner { display: block; }
    .db-final-cta__actions { margin-top: 24px; }
}
@media (max-width: 575.98px) {
    .db-shell { width: min(100% - 22px, 1180px); }
    .db-hero { padding-top: 54px; }
    .db-hero__actions .db-btn,
    .db-final-cta__actions .db-btn { width: 100%; }
    .db-command-card__footer { display: block; }
    .db-command-card__footer a { display: inline-block; margin-top: 10px; }
}

/* =============================================================
   Da Business — Homepage v3 additions
   Console card, tag ticker, games grid
   ============================================================= */

/* ── Window chrome dots ──────────────────────────────────────── */
.db-command-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.025);
}
.db-wm-red    { width:11px;height:11px;border-radius:999px;background:#ff5f57;flex-shrink:0; }
.db-wm-yellow { width:11px;height:11px;border-radius:999px;background:#febc2e;flex-shrink:0; }
.db-wm-green  { width:11px;height:11px;border-radius:999px;background:#28c840;flex-shrink:0; }
.db-console-title {
    flex:1;
    text-align:center;
    font-family: var(--font-mono);
    font-size:11px;
    color: var(--text-lo);
    letter-spacing:.06em;
}

/* ── Console body ────────────────────────────────────────────── */
.db-command-card__body {
    padding: 20px 24px;
    font-family: var(--font-mono);
    font-size: 12px;
    min-height: 252px;
    max-height: 252px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
}
.db-terminal-output {
    padding: 4px 0;
    border-bottom: none;
    color: var(--text-mid);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: db-line-in .18s ease;
}
.db-tl-cmd  { color: var(--accent-soft) !important; }
.db-tl-ok   { color: var(--success) !important; }
.db-tl-warn { color: var(--warning) !important; }
@keyframes db-line-in {
    from { opacity:0; transform: translateY(4px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ── Tag ticker ──────────────────────────────────────────────── */
.db-tag-ticker {
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.055);
    border-bottom: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.018);
    padding: 11px 0;
    user-select: none;
}
.db-tag-ticker__track {
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    animation: db-ticker 38s linear infinite;
    width: max-content;
}
.db-tag-ticker__track span {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-lo);
}
.db-tag-ticker__track .db-tag-sep {
    color: var(--accent);
    font-size: 9px;
}
@keyframes db-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Games grid ──────────────────────────────────────────────── */
.db-section--games {
    padding: clamp(48px, 5vw, 80px) 0;
}
.db-games-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.db-game-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    background: linear-gradient(180deg, rgba(16,21,32,.9), rgba(9,12,20,.95));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-md);
    cursor: default;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.db-game-chip i {
    color: var(--accent-soft);
    font-size: 16px;
    width: 20px;
    text-align: center;
}
.db-game-chip span {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--text);
    text-transform: uppercase;
}
.db-game-chip:hover {
    border-color: rgba(168,85,255,.5);
    box-shadow: 0 0 22px rgba(112,0,255,.18);
    transform: translateY(-2px);
}
.db-game-chip--more {
    border-style: dashed;
    border-color: rgba(255,255,255,.1);
}
.db-game-chip--more span { color: var(--text-lo); }
.db-game-chip--more i   { color: var(--text-lo); }

/* hero title sizing handled above */

/* =============================================================
   Da Business — v3.1 patch
   1. Make all container/wrapper elements transparent so the
      body dot-grid shows through uninterrupted.
   2. Keep glow effects — only opaque bg overrides are removed.
   ============================================================= */

/* Bootstrap grid wrappers — force transparent */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.row {
    background: transparent !important;
    background-color: transparent !important;
}

/* WHMCS page wrapper divs that inherit raised/card colors */
#main-body,
#main-body > .container,
#main-body > .container-fluid,
.primary-content,
.secondary-content,
.content-area,
.page-content,
.wrapper,
#wrapper,
.inner-content,
.main-content,
.col,
[class*="col-"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* DB hero — keep its own gradient + glow, just ensure .container inside is see-through */
.db-hero .container,
.db-hero .container-fluid,
.db-hero .row,
.db-shell {
    background: transparent !important;
}

/* Sections that should be transparent (the dot shows through) */
.db-home,
.db-section,
.db-final-cta {
    background-color: transparent !important;
}
/* Muted section keeps its very subtle tint (border only, no solid bg) */
.db-section--muted {
    background: rgba(255,255,255,.012) !important;
}
/* Domain strip keeps its subtle stripe */
.db-domain-strip {
    background: rgba(255,255,255,.018) !important;
}

/* Tag ticker keeps its stripe */
.db-tag-ticker {
    background: rgba(255,255,255,.014) !important;
}

/* =============================================================
   Da Business — responsive homepage/mobile tablet patch
   ============================================================= */
* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.db-home,
.db-shell,
.db-hero,
.db-section,
.db-domain-strip,
.db-final-cta,
.db-command-card,
.db-command-card__body,
.db-terminal-output {
    min-width: 0;
}

.db-hero__title {
    white-space: normal;
    overflow-wrap: balance;
    text-wrap: balance;
}

.db-hero__lead,
.db-section-heading p,
.db-final-cta p,
.db-service-card p,
.db-feature-card p {
    overflow-wrap: break-word;
}

.db-command-card {
    width: 100%;
    max-width: 650px;
}

.db-terminal-output {
    overflow-wrap: anywhere;
}

/* Tablet: stack hero cleanly, reduce oversized console offset */
@media (max-width: 1199.98px) {
    .db-hero {
        padding: clamp(62px, 7vw, 100px) 0 64px;
    }

    .db-hero__title {
        font-size: clamp(42px, 6vw, 64px) !important;
    }

    .db-command-card {
        margin-left: 0;
        margin-top: 120px;
        max-width: 560px;
    }
}

@media (max-width: 991.98px) {
    .db-shell {
        width: min(100% - 32px, 720px);
    }

    .db-hero {
        padding: 58px 0 56px;
        text-align: left;
    }

    .db-hero .row {
        row-gap: 34px;
    }

    .db-hero__title {
        max-width: 760px;
        font-size: clamp(40px, 8vw, 62px) !important;
    }

    .db-hero__lead {
        max-width: 680px;
        font-size: 17px;
    }

    .db-trust-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 30px;
    }

    .db-trust-row > div {
        padding: 15px;
    }

    .db-trust-row strong {
        font-size: 26px;
    }

    .db-command-card {
        margin: 0;
        max-width: none;
    }

    .db-command-card__body {
        min-height: 220px;
        max-height: 220px;
    }

    .db-section,
    .db-domain-strip,
    .db-final-cta {
        padding: 56px 0;
    }

    .db-section-heading h2,
    .db-final-cta h2 {
        font-size: clamp(38px, 8vw, 58px) !important;
    }

    .db-game-chip {
        flex: 1 1 calc(50% - 12px);
        justify-content: center;
    }
}

/* Phone: single-column cards, full-width buttons, readable console */
@media (max-width: 575.98px) {
    body {
        background-size: 22px 22px !important;
    }

    .db-shell {
        width: min(100% - 24px, 1180px);
    }

    .db-hero {
        padding: 42px 0 46px;
    }

    .db-kicker,
    .db-section-eyebrow {
        font-size: 10px;
        letter-spacing: .09em;
    }

    .db-hero__title {
        margin-top: 16px;
        font-size: clamp(34px, 12vw, 48px) !important;
        line-height: .96 !important;
    }

    .db-hero__lead {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 22px;
    }

    .db-hero__actions,
    .db-final-cta__actions,
    .db-domain-actions {
        gap: 10px;
    }

    .db-btn {
        width: 100%;
        padding: 13px 16px !important;
        text-align: center;
    }

    .db-trust-row {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    .db-trust-row > div {
        padding: 14px 15px;
    }

    .db-command-card {
        margin-top: 6px;
        border-radius: var(--r-md);
    }

    .db-command-card__top {
        padding: 10px 12px;
    }

    .db-command-card__body {
        padding: 14px 14px;
        min-height: 190px;
        max-height: 190px;
        font-size: 10.5px;
        line-height: 1.45;
    }

    .db-terminal-output {
        white-space: normal;
        padding: 3px 0;
        line-height: 1.45;
    }

    .db-command-card__footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px;
    }

    .db-command-card__footer a {
        margin-top: 0;
    }

    .db-tag-ticker {
        padding: 9px 0;
    }

    .db-tag-ticker__track {
        gap: 20px;
        animation-duration: 30s;
    }

    .db-tag-ticker__track span {
        font-size: 10px;
    }

    .db-section,
    .db-domain-strip,
    .db-final-cta,
    .db-section--games {
        padding: 44px 0;
    }

    .db-section-heading {
        margin-bottom: 26px;
    }

    .db-section-heading h2,
    .db-final-cta h2 {
        font-size: clamp(34px, 11vw, 46px) !important;
        line-height: .95 !important;
    }

    .db-section-heading p,
    .db-final-cta p {
        font-size: 15px;
        line-height: 1.55;
    }

    .db-game-chip {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding: 12px 15px;
    }

    .db-service-card,
    .db-feature-card,
    .db-resource-card,
    .db-mini-card {
        padding: 22px;
    }

    .db-resource-card,
    .db-mini-card {
        min-height: 132px;
    }

    .db-final-cta__inner {
        padding: 26px 22px;
    }
}

/* Very narrow phones */
@media (max-width: 380px) {
    .db-shell {
        width: min(100% - 18px, 1180px);
    }

    .db-command-card__body {
        font-size: 10px;
    }

    .db-hero__title {
        font-size: 32px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .db-tag-ticker__track,
    .db-terminal-output,
    .db-kicker__dot,
    .navbar-brand::after {
        animation: none !important;
    }
}


/* =============================================================
   Da Business — desktop hero spacing/alignment fix
   ============================================================= */
@media (min-width: 992px) {
    section#main-body {
        padding-top: 0 !important;
    }

    #main-body > .container,
    #main-body > .container-fluid,
    .primary-content,
    .primary-content.col-12 {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .db-hero {
        padding-top: clamp(48px, 5vw, 78px) !important;
        padding-bottom: 64px !important;
    }

    .db-hero__row,
    .db-hero .row {
        align-items: flex-start !important;
    }

    .db-command-card {
        margin-top: 0 !important;
        margin-left: clamp(20px, 3vw, 40px);
        transform: translateY(0);
    }
}

@media (min-width: 1200px) {
    .db-command-card {
        margin-top: 0 !important;
    }
}
/* ═══════════════════════════════════════════════════════════════
   DB LIVE CONSOLE — FINAL FIX
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {

    /* Move console upward */
    .col-lg-5.mt-5.mt-lg-0 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-self: flex-start !important;
    }

    /* Make terminal taller */
    #db-live-console {
        height: 460px !important;
        min-height: 460px !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;
    }

    /* Main content area */
    #db-live-console .db-command-card__body {
        flex: 1 1 auto !important;

        overflow: hidden !important;

        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    /* OUTPUT AREA — NORMAL TOP FLOW */
    #db-console-output {
        display: block !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    /* FOOTER LOCK */
    #db-live-console .db-command-card__footer {
        margin-top: auto !important;

        position: relative !important;

        width: 100% !important;

        flex-shrink: 0 !important;
    }
}
/* Dark fix for WHMCS ticket markdown editor */
body .md-editor,
body .primary-content .md-editor {
    background: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
}

body .md-editor > .btn-toolbar,
body .md-editor > .md-header {
    background: var(--bg-overlay) !important;
    border-color: var(--border-mid) !important;
}

body .md-editor > textarea.markdown-editor,
body .md-editor > .md-preview,
body textarea#inputMessage.markdown-editor {
    background: var(--bg-elevated) !important;
    color: var(--text) !important;
    border-color: var(--border-mid) !important;
}

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

body .markdown-editor-status,
body .md-editor > .md-footer {
    background: var(--bg-overlay) !important;
    color: var(--text-lo) !important;
}
.table.table-sm tbody td.total-row {
    background: var(--bg-elevated) !important;
    color: var(--text) !important;
    border-color: var(--border-mid) !important;
}