/* =============================================================================
   NOVONODE WHMCS THEME — Dark Crimson Tech Luxury
   Version: 1.0.0
   ============================================================================= */

/* ---- 1. CSS CUSTOM PROPERTIES -------------------------------------------- */
:root {
    --nn-bg-input:           #160a0a;
    --nn-red:                #b91c1c;
    --nn-red-bright:         #dc2626;
    --nn-red-dark:           #7f1d1d;
    --nn-red-deep:           #991b1b;
    --nn-red-maroon:         #450a0a;
    --nn-border-subtle:      rgba(185, 28, 28, 0.18);
    --nn-border-muted:       rgba(185, 28, 28, 0.25);
    --nn-border-red:         rgba(185, 28, 28, 0.22);
    --nn-border-red-focus:   rgba(185, 28, 28, 0.5);
    --nn-text-primary:       #f0f0f2;
    --nn-text-secondary:     #e5e5e5;
    --nn-text-muted:         #9090a8;
    --nn-text-subtle:        #5a5a72;
    --nn-success:            #4ade80;
    --nn-info:               #5865F2;
    --nn-warning:            #ff8c00;
    --nn-error:              #dc2626;
    --nn-radius-sm:          4px;
    --nn-radius-md:          8px;
    --nn-radius-lg:          10px;
    --nn-radius-xl:          12px;
    --nn-radius-2xl:         16px;
    --nn-transition:         all 200ms ease;
    --nn-transition-slow:    all 300ms ease;
    --nn-surface:            rgba(255, 255, 255, 0.18);
    --nn-shadow-card:        0 4px 28px rgba(0, 0, 0, 0.55);
    --nn-shadow-card-hover:  0 12px 40px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.35);
    --nn-shadow-glow:        0 0 60px rgba(185, 28, 28, 0.15), 0 0 100px rgba(127, 29, 29, 0.10);
}

/* ---- 2. BASE -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

/* ---- 3. BODY & BACKGROUND ------------------------------------------------ */
body,
body.primary-bg-color {
    background:
        radial-gradient(ellipse at 15% 40%, rgba(127, 29, 29, 0.021) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(185, 28, 28, 0.021) 0%, transparent 45%),
        radial-gradient(ellipse at 60% 85%, rgba(153, 27, 27, 0.021) 0%, transparent 40%),
        linear-gradient(135deg, #0a0505 0%, #0f0808 25%, #1a0f0f 50%, #0f0808 75%, #0a0505 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--nn-text-secondary);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Sticky footer — main content grows to fill all available space */
#main-body {
    flex: 1 0 auto;
}

/* ---- 4. TYPOGRAPHY ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--nn-text-primary) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

/* Typography scale */
h1, .h1 { font-size: 1.875rem !important; font-weight: 700 !important; letter-spacing: -0.025em !important; line-height: 1.2 !important; }
h2, .h2 { font-size: 1.5rem !important;   font-weight: 700 !important; letter-spacing: -0.02em !important;  line-height: 1.25 !important; }
h3, .h3 { font-size: 1.25rem !important;  font-weight: 600 !important; letter-spacing: -0.015em !important; line-height: 1.3 !important; }
h4, .h4 { font-size: 1.0625rem !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.35 !important; }
h5, .h5 { font-size: 0.9375rem !important; font-weight: 600 !important; line-height: 1.4 !important; }
h6, .h6 { font-size: 0.875rem !important;  font-weight: 600 !important; letter-spacing: 0.01em !important;  line-height: 1.4 !important; }

p { line-height: 1.65; margin-bottom: 0.75rem; color: var(--nn-text-secondary); }
p:last-child { margin-bottom: 0; }
p, li, td, th, label, .form-text, span {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
small, .small { color: var(--nn-text-muted); font-size: 0.8125rem; }
a { color: var(--nn-red-bright); text-decoration: none; transition: color 200ms ease; }
a:hover { color: var(--nn-text-primary); text-decoration: none; }
.text-gradient {
    background: linear-gradient(to right, #ffffff, #ef4444);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ---- 5. HEADER & NAVIGATION ---------------------------------------------- */
#header.header {
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    position: sticky; top: 0; z-index: 1000; transition: var(--nn-transition);
}

.topbar {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    padding: 5px 0;
}
.topbar .btn {
    color: var(--nn-text-muted) !important; font-size: 0.8125rem; padding: 4px 10px;
    border-radius: var(--nn-radius-md); background: transparent !important; border: none !important;
    transition: var(--nn-transition);
}
.topbar .btn:hover { color: var(--nn-text-primary) !important; background: rgba(255,255,255,0.05) !important; }
.topbar .input-group-text { background: transparent !important; border: none !important; color: var(--nn-text-muted) !important; font-size: 0.8125rem; }
.topbar .btn-active-client {
    color: var(--nn-text-primary) !important; background: rgba(185,28,28,0.15) !important;
    border: 1px solid var(--nn-border-red) !important;
    border-radius: var(--nn-radius-md) 0 0 var(--nn-radius-md) !important;
    font-size: 0.8125rem; padding: 4px 12px !important; transition: var(--nn-transition);
}
.topbar .btn-active-client:hover { background: rgba(185,28,28,0.25) !important; }
.topbar .active-client .btn-group .btn {
    background: rgba(185,28,28,0.08) !important; border: 1px solid var(--nn-border-red) !important;
    border-left: none !important; color: var(--nn-text-muted) !important; font-size: 0.8125rem; padding: 4px 10px !important;
}
.topbar .active-client .btn-group .btn:hover { background: rgba(185,28,28,0.2) !important; color: var(--nn-text-primary) !important; }

.client-alerts {
    background: #2e1111 !important; border: 1px solid rgba(185, 28, 28, 0.30) !important;
    border-radius: var(--nn-radius-lg) !important; backdrop-filter: none;
    list-style: none; padding: 4px; margin: 0; min-width: 260px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.55) !important;
}
.client-alerts li a {
    display: flex; align-items: flex-start; gap: 8px; padding: 7px 12px;
    border-radius: var(--nn-radius-sm);
    color: var(--nn-text-secondary); border-bottom: none; border-bottom: 1px solid rgba(255,255,255,0.05); transition: var(--nn-transition);
    font-size: 0.8125rem;
}
.client-alerts li a:hover { background: rgba(185,28,28,0.1); color: var(--nn-text-primary); }
.client-alerts li.none { padding: 12px 16px; color: var(--nn-text-muted); font-size: 0.875rem; }

.navbar, .navbar-novonode { background: transparent !important; border: none !important; padding: 12px 0; }
.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
    color: var(--nn-text-primary) !important; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em;
}
.logo-img { max-height: 40px; width: auto; }

.navbar .search .form-control, .navbar .search input {
    background: rgba(22, 10, 10, 0.8) !important; border: 1px solid var(--nn-border-muted) !important;
    border-left: none !important; color: var(--nn-text-primary) !important;
    border-radius: 0 var(--nn-radius-md) var(--nn-radius-md) 0 !important;
}
.navbar .search .form-control:focus, .navbar .search input:focus {
    border-color: var(--nn-border-red-focus) !important; box-shadow: none !important;
}
.navbar .search .form-control::placeholder, .navbar .search input::placeholder { color: var(--nn-text-subtle) !important; }
.navbar .search .btn, .navbar .search .btn-default {
    background: rgba(22, 10, 10, 0.8) !important; border: 1px solid var(--nn-border-muted) !important;
    border-right: none !important; color: var(--nn-text-muted) !important;
    border-radius: var(--nn-radius-md) 0 0 var(--nn-radius-md) !important; padding: 6px 12px !important;
}
.navbar .search .btn:hover, .navbar .search .btn-default:hover {
    background: rgba(185,28,28,0.2) !important; color: var(--nn-text-primary) !important;
}

.cart-btn { color: var(--nn-text-muted) !important; position: relative; transition: var(--nn-transition); border-radius: var(--nn-radius-md) !important; }
.cart-btn:hover { color: var(--nn-text-primary) !important; background: rgba(255,255,255,0.05) !important; }
.cart-btn .badge {
    position: absolute; top: -4px; right: -4px; background: var(--nn-red-bright) !important;
    color: #fff !important; border-radius: 9999px; font-size: 0.65rem; padding: 2px 5px; min-width: 16px; line-height: 1.2;
}

.navbar .btn[data-toggle="collapse"] {
    color: var(--nn-text-muted) !important; background: transparent !important;
    border: 1px solid var(--nn-border-muted) !important; border-radius: var(--nn-radius-md); padding: 6px 10px; transition: var(--nn-transition);
}
.navbar .btn[data-toggle="collapse"]:hover {
    color: var(--nn-text-primary) !important; border-color: var(--nn-border-red) !important; background: rgba(185,28,28,0.1) !important;
}

.main-navbar-wrapper { background: rgba(0,0,0,0.15) !important; border-top: 1px solid var(--nn-border-subtle) !important; padding: 0 !important; }
.main-navbar-wrapper #nav > li > a,
.main-navbar-wrapper .navbar-nav > li > a {
    color: var(--nn-text-secondary) !important; font-size: 0.875rem; font-weight: 500;
    padding: 14px 18px !important; display: block; transition: var(--nn-transition);
    border-bottom: 2px solid transparent; font-family: 'Inter', system-ui, sans-serif;
}
.main-navbar-wrapper #nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li > a:hover {
    color: var(--nn-text-primary) !important; background: rgba(255,255,255,0.03) !important; border-bottom-color: var(--nn-red) !important;
}
.main-navbar-wrapper #nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li.active > a {
    color: var(--nn-text-primary) !important; border-bottom-color: var(--nn-red-bright) !important;
}

.dropdown-menu {
    background: #2e1111 !important;
    border: 1px solid rgba(185, 28, 28, 0.30) !important;
    border-radius: var(--nn-radius-lg) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important;
    padding: 4px !important;
    margin-top: 4px;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.dropdown-item {
    color: var(--nn-text-secondary) !important;
    padding: 7px 13px !important;
    border-radius: var(--nn-radius-sm) !important;
    font-size: 0.8125rem !important;
    transition: var(--nn-transition);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.4;
}
.dropdown-item:hover, .dropdown-item:focus { background: rgba(185,28,28,0.18) !important; color: var(--nn-text-primary) !important; }
.dropdown-item.active, .dropdown-item:active { background: rgba(185,28,28,0.28) !important; color: var(--nn-text-primary) !important; }
.dropdown-divider { border-color: rgba(255,255,255,0.06) !important; margin: 3px 0 !important; }

/* ---- 6. BREADCRUMB ------------------------------------------------------- */
.master-breadcrumb {
    background: rgba(0,0,0,0.2) !important; border-bottom: 1px solid var(--nn-border-subtle) !important; padding: 7px 0;
}
.breadcrumb { background: transparent !important; padding: 4px 0 !important; margin: 0 !important; font-size: 0.8125rem; }
.breadcrumb-item a { color: var(--nn-text-muted) !important; transition: color 200ms ease; }
.breadcrumb-item a:hover { color: var(--nn-red-bright) !important; }
.breadcrumb-item.active { color: var(--nn-text-secondary) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--nn-text-subtle) !important; content: "›" !important; font-size: 1rem; }

/* ---- 7. MAIN CONTENT ----------------------------------------------------- */
#main-body { padding: 40px 0 80px; min-height: calc(100vh - 200px); }

/* ---- 8. CARDS (GLASSMORPHISM) -------------------------------------------- */
.card {
    background: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-subtle) !important; border-radius: var(--nn-radius-xl) !important;
    box-shadow: var(--nn-shadow-card) !important; transition: var(--nn-transition-slow); color: var(--nn-text-secondary);
}
.card:hover { border-color: rgba(255,255,255,0.07) !important; box-shadow: var(--nn-shadow-card-hover) !important; }
.card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--nn-radius-xl) var(--nn-radius-xl) 0 0 !important;
    padding: 20px 24px !important;
}
.card-header .card-title,
.card-header h3,
.card-header h4,
.card-header h5 {
    color: var(--nn-text-primary) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
.card-body { padding: 24px !important; color: var(--nn-text-secondary); background: transparent !important; }
.card-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 0 var(--nn-radius-xl) var(--nn-radius-xl) !important;
    padding: 16px 24px !important;
}

/* Bootstrap 3 Panel */
.panel {
    background: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-subtle) !important; border-radius: var(--nn-radius-xl) !important;
    box-shadow: var(--nn-shadow-card) !important;
}
.panel-heading {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--nn-radius-xl) var(--nn-radius-xl) 0 0 !important;
    color: var(--nn-text-primary) !important;
    padding: 20px 24px !important;
}
.panel-title {
    color: var(--nn-text-primary) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: -0.01em !important;
}
.panel-body { background: transparent !important; color: var(--nn-text-secondary); padding: 24px !important; }
.panel-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 0 var(--nn-radius-xl) var(--nn-radius-xl) !important; padding: 16px 24px !important; color: var(--nn-text-muted);
}

/* ---- 9. SIDEBAR ---------------------------------------------------------- */
.card-sidebar {
    background: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-subtle) !important; border-radius: var(--nn-radius-xl) !important;
    box-shadow: var(--nn-shadow-card) !important; overflow: hidden; margin-bottom: 24px !important; transition: var(--nn-transition-slow);
}
.card-sidebar:hover { border-color: rgba(255,255,255,0.07) !important; }
.card-sidebar .card-header { cursor: pointer; user-select: none; }
.card-minimise { color: var(--nn-text-muted) !important; transition: transform 200ms ease !important; font-size: 0.75rem; }

.list-group-item {
    background: transparent !important; background-color: transparent !important; border: none !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important; color: var(--nn-text-secondary) !important;
    padding: 13px 20px !important; transition: var(--nn-transition); font-size: 0.875rem; font-family: 'Inter', system-ui, sans-serif;
    border-radius: 0 !important;
}
.list-group-item:first-child { border-radius: 0 !important; }
.list-group-item:last-child { border-bottom: none !important; border-radius: 0 !important; }
/* Kill white boxes — match or beat theme.css specificity in every context */
.card .list-group .list-group-item,
.card .list-group-item,
.client-home-cards .list-group .list-group-item,
.client-home-cards .card .list-group-item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    border-radius: 0 !important;
}
.client-home-cards .list-group .list-group-item:last-child,
.client-home-cards .card .list-group-item:last-child {
    border-bottom: none !important;
}
/* List-group inside cards inherits the solid card surface */
.card .list-group,
.client-home-cards .list-group {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}
.card .list-group .list-group-item,
.client-home-cards .list-group .list-group-item {
    background: transparent !important;
    background-color: transparent !important;
}
.list-group-item-action:hover, .list-group-item-action:focus {
    background: rgba(185,28,28,0.1) !important; color: var(--nn-text-primary) !important;
    border-left: 2px solid var(--nn-red) !important; padding-left: 18px !important;
}
.list-group-item.active, .list-group-item-action.active {
    background: rgba(185,28,28,0.18) !important; color: var(--nn-text-primary) !important;
    border-left: 3px solid var(--nn-red-bright) !important; padding-left: 17px !important; font-weight: 600;
}
.sidebar-menu-item-icon { color: var(--nn-text-muted); width: 18px; margin-right: 10px; text-align: center; }
.list-group-item.active .sidebar-menu-item-icon { color: var(--nn-red-bright); }
.sidebar-menu-item-wrapper { display: flex; align-items: center; }
.sidebar-menu-item-label { flex: 1; }
.sidebar-menu-item-badge .badge {
    background: rgba(185,28,28,0.18) !important; color: var(--nn-red-bright) !important;
    border: 1px solid rgba(185,28,28,0.3); border-radius: 9999px; font-size: 0.7rem; padding: 2px 7px;
}

/* ---- 10. BUTTONS --------------------------------------------------------- */
.btn-primary, .btn-primary.dropdown-toggle {
    background: #b91c1c !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    transition: background 200ms ease, box-shadow 200ms ease !important;
    box-shadow: none !important;
    font-family: 'Inter', system-ui, sans-serif;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.dropdown-toggle:hover {
    background: #dc2626 !important;
    border: none !important;
    box-shadow: 0 2px 14px rgba(185, 28, 28, 0.40) !important;
    color: #ffffff !important;
    transform: none !important;
    outline: none !important;
}
.btn-primary:active { background: #991b1b !important; box-shadow: none !important; transform: none !important; }
.btn-primary:disabled, .btn-primary.disabled { opacity: 0.45 !important; cursor: not-allowed; }

.btn-default, .btn-secondary {
    background: transparent !important; border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--nn-text-secondary) !important; border-radius: var(--nn-radius-lg) !important;
    padding: 10px 24px !important; font-weight: 500; font-size: 0.9rem;
    transition: var(--nn-transition) !important; font-family: 'Inter', system-ui, sans-serif;
}
.btn-default:hover, .btn-secondary:hover {
    background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.2) !important;
    color: var(--nn-text-primary) !important; transform: translateY(-1px);
}
.btn-danger {
    background: rgba(220,38,38,0.15) !important; border: 1px solid rgba(220,38,38,0.35) !important;
    color: #f87171 !important; border-radius: var(--nn-radius-lg) !important; transition: var(--nn-transition) !important;
}
.btn-danger:hover { background: rgba(220,38,38,0.3) !important; color: #ffffff !important; box-shadow: 0 0 16px rgba(220,38,38,0.25) !important; transform: translateY(-1px); }
.btn-success {
    background: rgba(74,222,128,0.12) !important; border: 1px solid rgba(74,222,128,0.3) !important;
    color: #4ade80 !important; border-radius: var(--nn-radius-lg) !important; transition: var(--nn-transition) !important;
}
.btn-success:hover { background: rgba(74,222,128,0.25) !important; color: #ffffff !important; transform: translateY(-1px); }
.btn-info {
    background: rgba(88,101,242,0.12) !important; border: 1px solid rgba(88,101,242,0.3) !important;
    color: #818cf8 !important; border-radius: var(--nn-radius-lg) !important; transition: var(--nn-transition) !important;
}
.btn-info:hover { background: rgba(88,101,242,0.25) !important; color: #ffffff !important; transform: translateY(-1px); }
.btn-warning {
    background: rgba(255,140,0,0.12) !important; border: 1px solid rgba(255,140,0,0.3) !important;
    color: #ff8c00 !important; border-radius: var(--nn-radius-lg) !important; transition: var(--nn-transition) !important;
}
.btn-warning:hover { background: rgba(255,140,0,0.25) !important; color: #ffffff !important; transform: translateY(-1px); }
.btn-link { color: var(--nn-red-bright) !important; text-decoration: none !important; }
.btn-link:hover { color: var(--nn-text-primary) !important; }
.btn-sm { padding: 5px 14px !important; font-size: 0.8125rem !important; border-radius: var(--nn-radius-md) !important; }
.btn-lg { padding: 14px 36px !important; font-size: 1rem !important; border-radius: var(--nn-radius-xl) !important; min-width: 132px; }

/* ---- 11. FORMS & INPUTS -------------------------------------------------- */
.form-control {
    background: var(--nn-bg-input) !important; border: 1px solid var(--nn-border-muted) !important;
    color: var(--nn-text-primary) !important; border-radius: var(--nn-radius-md) !important;
    padding: 10px 14px !important; font-size: 0.9rem; font-family: 'Inter', system-ui, sans-serif;
    transition: var(--nn-transition) !important;
}
.form-control:focus {
    background: #1a0808 !important; border-color: var(--nn-border-red-focus) !important;
    box-shadow: 0 0 0 3px rgba(185,28,28,0.12) !important; color: var(--nn-text-primary) !important; outline: none;
}
.form-control::placeholder { color: var(--nn-text-subtle) !important; }
.form-control:disabled, .form-control[readonly] {
    background: rgba(22, 10, 10, 0.5) !important; color: var(--nn-text-subtle) !important;
    border-color: rgba(255,255,255,0.04) !important; cursor: not-allowed; opacity: 0.7;
}
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important;
    background-size: 14px !important; padding-right: 36px !important;
    appearance: none !important; -webkit-appearance: none !important;
}
select.form-control option { background: #1a0f0f; color: var(--nn-text-primary); }

.input-group-text {
    background: rgba(22, 10, 10, 0.8) !important; border: 1px solid var(--nn-border-muted) !important; color: var(--nn-text-muted) !important;
}
.input-group-prepend .input-group-text {
    border-radius: var(--nn-radius-md) 0 0 var(--nn-radius-md) !important; border-right: none !important;
}
.input-group-append .input-group-text {
    border-radius: 0 var(--nn-radius-md) var(--nn-radius-md) 0 !important; border-left: none !important;
}
.input-group .form-control:first-child { border-radius: var(--nn-radius-md) 0 0 var(--nn-radius-md) !important; }
.input-group .form-control:last-child { border-radius: 0 var(--nn-radius-md) var(--nn-radius-md) 0 !important; }
.input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0 !important; }

label, .control-label {
    color: var(--nn-text-secondary) !important; font-size: 0.875rem; font-weight: 500;
    margin-bottom: 6px; font-family: 'Inter', system-ui, sans-serif;
}
.form-text, .help-block { color: var(--nn-text-muted) !important; font-size: 0.8125rem; margin-top: 4px; }

.custom-control-label::before { background: var(--nn-bg-input) !important; border-color: rgba(255,255,255,0.15) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--nn-red) !important; border-color: var(--nn-red) !important; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(185,28,28,0.15) !important; }

/* ---- 12. TABLES ---------------------------------------------------------- */
.table { color: var(--nn-text-secondary) !important; border-color: var(--nn-border-subtle) !important; }
.table thead th {
    background: rgba(0,0,0,0.4) !important; color: var(--nn-text-muted) !important;
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    border-bottom: 1px solid var(--nn-border-subtle) !important; border-top: none !important;
    padding: 13px 20px !important; font-family: 'Inter', system-ui, sans-serif;
}
.table tbody tr { border-bottom: 1px solid var(--nn-border-subtle) !important; transition: var(--nn-transition); }
.table tbody tr:nth-child(even) { background: rgba(255,255,255,0.018) !important; }
.table tbody tr:hover { background: rgba(255,255,255,0.05) !important; box-shadow: inset 3px 0 0 var(--nn-red) !important; }
.table tbody td {
    border-color: var(--nn-border-subtle) !important; color: var(--nn-text-secondary) !important;
    padding: 14px 20px !important; vertical-align: middle !important;
}
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--nn-border-subtle) !important; }
.table th a { color: var(--nn-text-muted) !important; font-weight: 600; }
.table th a:hover { color: var(--nn-red-bright) !important; }

/* ---- 13. BADGES ---------------------------------------------------------- */
.badge {
    border-radius: 9999px !important; font-size: 0.7rem !important; font-weight: 600 !important;
    padding: 3px 10px !important; letter-spacing: 0.03em; font-family: 'Inter', system-ui, sans-serif;
}
.badge-success { background: rgba(74,222,128,0.12) !important; border: 1px solid rgba(74,222,128,0.25) !important; color: #4ade80 !important; }
.badge-primary { background: rgba(185,28,28,0.18) !important; border: 1px solid rgba(185,28,28,0.35) !important; color: #f87171 !important; }
.badge-info    { background: rgba(88,101,242,0.12) !important; border: 1px solid rgba(88,101,242,0.3) !important; color: #818cf8 !important; }
.badge-warning { background: rgba(255,140,0,0.12) !important; border: 1px solid rgba(255,140,0,0.25) !important; color: #ff8c00 !important; }
.badge-danger  { background: rgba(220,38,38,0.1) !important; border: 1px solid rgba(220,38,38,0.25) !important; color: #f87171 !important; }
.badge-secondary, .badge-default {
    background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: var(--nn-text-muted) !important;
}
.badge-featured, .badge-popular { background: linear-gradient(to right, #dc2626, #b91c1c) !important; color: #ffffff !important; border: none !important; }

/* ---- 14. ALERTS ---------------------------------------------------------- */
.alert {
    border-radius: var(--nn-radius-lg) !important; border-width: 1px !important; border-style: solid !important;
    backdrop-filter: blur(8px); font-size: 0.9rem; padding: 14px 18px !important; font-family: 'Inter', system-ui, sans-serif;
}
.alert-success { background: rgba(74,222,128,0.08) !important; border-color: rgba(74,222,128,0.25) !important; color: #4ade80 !important; }
.alert-info    { background: rgba(88,101,242,0.08) !important; border-color: rgba(88,101,242,0.25) !important; color: #818cf8 !important; }
.alert-warning { background: rgba(255,140,0,0.08) !important; border-color: rgba(255,140,0,0.25) !important; color: #ff8c00 !important; }
.alert-danger  { background: rgba(220,38,38,0.08) !important; border-color: rgba(220,38,38,0.25) !important; color: #f87171 !important; }
.alert .close { color: inherit !important; opacity: 0.6; text-shadow: none !important; }
.alert .close:hover { opacity: 1; }

/* ---- 15. MODALS ---------------------------------------------------------- */
/* The .modal-backdrop is injected at end of <body> at z-index:1040.
   Without an explicit z-index, #modalAjax (WHMCS system-modal) paints
   BEFORE the backdrop in DOM order, so the backdrop covers the dialog
   and blocks all button clicks. Setting modal to 1050 fixes this.
   #fullpage-overlay z-index is intentionally NOT touched — WHMCS uses
   it for its own cart overlays and it must remain above everything else. */
.modal-backdrop { display: none !important; }
.modal          { z-index: 1050 !important; }
.modal-dialog   { pointer-events: auto !important; }

.modal-content {
    background: #1e0b0b !important;
    /* NO backdrop-filter here — it creates a stacking context that causes
       child buttons to be unclickable when overlaid by other positioned elements */
    border: 1px solid var(--nn-border-red) !important;
    border-radius: var(--nn-radius-xl) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 60px rgba(185,28,28,0.08) !important;
    color: var(--nn-text-secondary);
    pointer-events: auto !important;
}
.modal-header {
    background: rgba(0,0,0,0.3) !important; border-bottom: 1px solid var(--nn-border-subtle) !important;
    border-radius: var(--nn-radius-xl) var(--nn-radius-xl) 0 0 !important; padding: 20px 24px !important;
}
.modal-title { color: var(--nn-text-primary) !important; font-weight: 700; font-size: 1.05rem; font-family: 'Inter', system-ui, sans-serif; }
.modal-body   { padding: 24px !important; color: var(--nn-text-secondary); pointer-events: auto !important; }
.modal-footer {
    background: rgba(0,0,0,0.2) !important; border-top: 1px solid var(--nn-border-subtle) !important;
    border-radius: 0 0 var(--nn-radius-xl) var(--nn-radius-xl) !important; padding: 16px 24px !important;
    pointer-events: auto !important;
}
/* Buttons inside any modal must always be clickable */
.modal .btn,
.modal button {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}
.modal-backdrop.show { display: none !important; }
/* Safety net: lingering backdrop after modal closes must never block UI */
body:not(.modal-open) .modal-backdrop { pointer-events: none !important; opacity: 0 !important; transition: none !important; }
.modal .close { color: var(--nn-text-muted) !important; opacity: 1 !important; text-shadow: none !important; font-size: 1.3rem; transition: color 200ms ease; }
.modal .close:hover { color: var(--nn-text-primary) !important; }
.modal-localisation .item {
    display: block; padding: 8px 12px; border-radius: var(--nn-radius-md);
    color: var(--nn-text-secondary); font-size: 0.875rem; transition: var(--nn-transition); margin-bottom: 3px;
}
.modal-localisation .item:hover { background: rgba(185,28,28,0.12); color: var(--nn-text-primary); }
.modal-localisation .item.active { background: rgba(185,28,28,0.2); color: var(--nn-red-bright); font-weight: 600; }
.modal-localisation h5, .modal-localisation .h5 { color: var(--nn-text-primary) !important; }

/* ---- 16. PAGINATION ------------------------------------------------------ */
.pagination .page-item .page-link {
    background: transparent !important; border: 1px solid var(--nn-border-subtle) !important;
    color: var(--nn-text-muted) !important; border-radius: var(--nn-radius-md) !important;
    margin: 0 2px; transition: var(--nn-transition); font-size: 0.875rem; padding: 7px 13px !important;
}
.pagination .page-item .page-link:hover { background: rgba(185,28,28,0.15) !important; border-color: var(--nn-border-red) !important; color: var(--nn-text-primary) !important; }
.pagination .page-item.active .page-link { background: var(--nn-red) !important; border-color: var(--nn-red) !important; color: #ffffff !important; box-shadow: 0 0 12px rgba(185,28,28,0.4); }
.pagination .page-item.disabled .page-link { background: transparent !important; color: var(--nn-text-subtle) !important; opacity: 0.5; }

/* ---- 17. TABS ------------------------------------------------------------ */
.nav-tabs { border-bottom: 1px solid var(--nn-border-subtle) !important; }
.nav-tabs .nav-link {
    color: var(--nn-text-muted) !important; border: none !important;
    border-bottom: 2px solid transparent !important; border-radius: 0 !important;
    padding: 10px 18px !important; font-size: 0.875rem; font-weight: 500;
    transition: var(--nn-transition); background: transparent !important; font-family: 'Inter', system-ui, sans-serif;
}
.nav-tabs .nav-link:hover { color: var(--nn-text-secondary) !important; border-bottom-color: rgba(185,28,28,0.4) !important; background: transparent !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--nn-text-primary) !important; background: transparent !important;
    border-bottom-color: var(--nn-red-bright) !important; font-weight: 600;
}
.nav-pills .nav-link {
    color: var(--nn-text-muted) !important; border-radius: var(--nn-radius-md) !important;
    padding: 8px 16px !important; font-size: 0.875rem; transition: var(--nn-transition); font-family: 'Inter', system-ui, sans-serif;
}
.nav-pills .nav-link:hover { background: rgba(255,255,255,0.05) !important; color: var(--nn-text-primary) !important; }
.nav-pills .nav-link.active { background: rgba(185,28,28,0.2) !important; color: var(--nn-red-bright) !important; font-weight: 600; }

/* ---- 18. FOOTER ---------------------------------------------------------- */
#footer.footer,
#footer.nn-footer {
    background: rgba(0, 0, 0, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    padding: 0 !important;
    flex-shrink: 0;
}

/* Main grid */
.nn-footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 16px 40px;
}
@media (max-width: 900px) {
    .nn-footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .nn-footer-main { grid-template-columns: 1fr; gap: 28px; }
}

/* Brand column */
.nn-footer-logo-link { display: inline-block; margin-bottom: 16px; }
.nn-footer-logo { height: 48px; width: auto; display: block; }
.nn-footer-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.nn-footer-tagline {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
}

/* Column headings */
.nn-footer-col h3 {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: none !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Link lists */
.nn-footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.nn-footer-col ul li {
    margin-bottom: 8px !important;
}
.nn-footer-col ul li a,
#footer.nn-footer a {
    color: #9ca3af !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color 200ms ease !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
.nn-footer-col ul li a:hover,
#footer.nn-footer a:hover {
    color: #ffffff !important;
}

/* Bottom bar */
.nn-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding-top: 24px;
    padding-bottom: 24px;
}
.nn-footer-bottom-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.nn-footer-copy {
    color: #9ca3af;
    font-size: 14px;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Locale button in bottom bar */
.nn-locale-btn {
    background: none !important;
    border: none !important;
    color: #9ca3af !important;
    font-size: 14px !important;
    padding: 0 !important;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif !important;
    transition: color 200ms ease !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nn-locale-btn:hover { color: #ffffff !important; }

/* Social icons */
.nn-footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
}
.nn-footer-social a {
    color: #9ca3af !important;
    display: inline-flex;
    align-items: center;
    transition: color 200ms ease !important;
    line-height: 1;
}
.nn-footer-social a:hover { color: #ffffff !important; }

/* ---- 19. LOADING OVERLAY ------------------------------------------------- */
#fullpage-overlay { background: rgba(10,5,5,0.92) !important; backdrop-filter: blur(8px) !important; }
#fullpage-overlay .msg { color: var(--nn-text-muted) !important; font-size: 0.875rem; font-family: 'Inter', system-ui, sans-serif; }

/* ---- 20. POPOVERS -------------------------------------------------------- */
.popover {
    background: rgba(10,5,5,0.97) !important; border: 1px solid var(--nn-border-red) !important;
    border-radius: var(--nn-radius-lg) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(16px); max-width: 320px;
}
.popover-header {
    background: rgba(0,0,0,0.3) !important; border-bottom: 1px solid var(--nn-border-subtle) !important;
    color: var(--nn-text-primary) !important; border-radius: var(--nn-radius-lg) var(--nn-radius-lg) 0 0 !important;
    font-weight: 600; padding: 12px 16px !important; font-family: 'Inter', system-ui, sans-serif;
}
.popover-body { color: var(--nn-text-secondary) !important; padding: 4px 0 !important; font-family: 'Inter', system-ui, sans-serif; }
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after { border-bottom-color: rgba(10,5,5,0.97) !important; }
.bs-popover-bottom .arrow::before,
.bs-popover-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: rgba(185,28,28,0.4) !important; }

/* ---- 21. TOOLTIPS -------------------------------------------------------- */
.tooltip-inner {
    background: rgba(10,5,5,0.97) !important; border: 1px solid var(--nn-border-red) !important;
    border-radius: var(--nn-radius-md) !important; color: var(--nn-text-secondary) !important;
    font-size: 0.8125rem; padding: 6px 12px !important; font-family: 'Inter', system-ui, sans-serif;
}

/* ---- 22. PROGRESS BARS --------------------------------------------------- */
.progress { background: rgba(255,255,255,0.06) !important; border-radius: 9999px !important; height: 6px !important; overflow: hidden; }
.progress-bar { background: linear-gradient(to right, var(--nn-red-dark), var(--nn-red-bright)) !important; border-radius: 9999px !important; }

/* ---- 23. RETURN TO ADMIN ------------------------------------------------- */
.btn-return-to-admin {
    background: rgba(185,28,28,0.2) !important; border: 1px solid rgba(185,28,28,0.4) !important;
    color: var(--nn-red-bright) !important; border-radius: var(--nn-radius-md) !important;
    font-size: 0.8125rem; transition: var(--nn-transition);
}
.btn-return-to-admin:hover { background: rgba(185,28,28,0.35) !important; color: #ffffff !important; }

/* ---- 24. MISC OVERRIDES -------------------------------------------------- */
hr { border-color: var(--nn-border-subtle) !important; opacity: 1; }
.well { background: rgba(22, 10, 10, 0.6) !important; border: 1px solid var(--nn-border-subtle) !important; border-radius: var(--nn-radius-lg) !important; box-shadow: none !important; color: var(--nn-text-secondary); }
code, pre { background: rgba(0,0,0,0.4) !important; border: 1px solid var(--nn-border-subtle) !important; color: #f87171 !important; border-radius: var(--nn-radius-md) !important; }
pre { padding: 16px !important; color: var(--nn-text-secondary) !important; }
pre code { background: transparent !important; border: none !important; color: inherit !important; }
blockquote { border-left: 3px solid var(--nn-red) !important; background: rgba(185,28,28,0.05); padding: 12px 20px; border-radius: 0 var(--nn-radius-md) var(--nn-radius-md) 0; color: var(--nn-text-muted); }

.text-muted   { color: var(--nn-text-muted) !important; }
.text-success { color: var(--nn-success) !important; }
.text-danger  { color: var(--nn-error) !important; }
.text-warning { color: var(--nn-warning) !important; }
.text-info    { color: var(--nn-info) !important; }
.text-primary { color: var(--nn-red-bright) !important; }
.text-white   { color: #ffffff !important; }

.bg-success { background: rgba(74,222,128,0.12) !important; }
.bg-danger  { background: rgba(220,38,38,0.12) !important; }
.bg-warning { background: rgba(255,140,0,0.12) !important; }
.bg-info    { background: rgba(88,101,242,0.12) !important; }
.bg-primary { background: rgba(185,28,28,0.18) !important; }
.bg-light   { background: rgba(255,255,255,0.04) !important; }
.bg-dark    { background: rgba(0,0,0,0.4) !important; }
.bg-white   { background: rgba(255,255,255,0.05) !important; }

.list-group { border-radius: var(--nn-radius-lg) !important; overflow: hidden; }
.table .btn { font-size: 0.8rem !important; padding: 4px 11px !important; border-radius: var(--nn-radius-md) !important; }

/* ---- 25. SCROLLBAR ------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0505; }
::-webkit-scrollbar-thumb { background: rgba(185,28,28,0.4); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(185,28,28,0.65); }
::selection { background: rgba(185,28,28,0.4); color: #ffffff; }
::-moz-selection { background: rgba(185,28,28,0.4); color: #ffffff; }

/* ---- 26. ANIMATIONS ------------------------------------------------------ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.primary-content { animation: fadeInUp 0.45s ease forwards; }
.card-sidebar    { animation: fadeInUp 0.4s ease forwards; }
.card            { animation: fadeInUp 0.45s ease forwards; }
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 80ms; }
.card:nth-child(3) { animation-delay: 160ms; }
.card:nth-child(4) { animation-delay: 240ms; }
.card:nth-child(5) { animation-delay: 320ms; }
.card:nth-child(6) { animation-delay: 400ms; }

/* ---- 27. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 991px) {
    #main-body { padding: 24px 0 48px; }
    .card-body { padding: 20px !important; }
    .modal-body { padding: 20px !important; }
}

@media (max-width: 1199px) {
    #mainNavbar {
        background: rgba(10,5,5,0.97) !important; backdrop-filter: blur(16px) !important;
        border: 1px solid var(--nn-border-red) !important; border-radius: var(--nn-radius-lg) !important;
        padding: 10px !important; margin-top: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
    }
    .main-navbar-wrapper #nav > li > a,
    .main-navbar-wrapper .navbar-nav > li > a {
        border-bottom: 1px solid var(--nn-border-subtle) !important;
        border-radius: var(--nn-radius-md) !important; padding: 11px 14px !important;
    }
    .main-navbar-wrapper #nav > li > a:hover { background: rgba(185,28,28,0.1) !important; border-bottom-color: var(--nn-border-subtle) !important; }
    .main-navbar-wrapper #nav > li:last-child > a { border-bottom: none !important; }
}

/* =============================================================================
   PATCH v1.1 — Targeted Fixes
   ============================================================================= */

/* ---- FIX: BODY COLOR (overrides invoice.css loading after us) ------------- */
body { color: var(--nn-text-secondary) !important; }

/* ---- FIX: LINKS — high-specificity red override -------------------------- */
body a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.cart-btn):not(.badge):not(.dropdown-toggle):not(.tile):not([class*="card-accent-"]) {
    color: var(--nn-red-bright) !important;
}
body a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.cart-btn):not(.badge):not(.dropdown-toggle):not(.tile):not([class*="card-accent-"]):hover {
    color: #ef4444 !important;
}

/* ---- FIX: BUTTONS — consistent sizing ------------------------------------ */
.btn {
    padding: 8px 20px !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}
.btn-primary,
.btn-primary.dropdown-toggle {
    padding: 8px 20px !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
}
.btn-default, .btn-secondary {
    padding: 8px 20px !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
}
.btn-danger, .btn-success, .btn-info, .btn-warning {
    padding: 8px 20px !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
}
.btn-sm {
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
}
.btn-lg {
    padding: 12px 32px !important;
    font-size: 0.9375rem !important;
    border-radius: 10px !important;
    min-width: 120px;
}

/* ---- FIX: FORM INPUTS — stronger selectors + autofill --------------------- */
input.form-control,
textarea.form-control,
select.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea {
    background-color: #160a0a !important;
    background: #160a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    background: #1a0808 !important;
    border-color: rgba(185, 28, 28, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
    color: #ffffff !important;
    outline: none !important;
}

/* Browser autofill background override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #160a0a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ---- FIX: TABLES — force dark on all table variants ----------------------- */
.table,
.table-striped,
.table-hover,
.table-bordered {
    color: var(--nn-text-secondary) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
.table thead,
.table thead tr,
.table thead th,
.table thead td {
    background: rgba(0, 0, 0, 0.45) !important;
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
.table tbody tr {
    background: transparent !important;
}
.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02) !important;
}
.table-striped tbody tr:nth-of-type(even),
.table-striped tbody tr:nth-child(even) {
    background: transparent !important;
}
.table-hover tbody tr:hover,
.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}
.table tbody td,
.table tbody th {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--nn-text-secondary) !important;
}
.table-bordered td,
.table-bordered th,
.table-bordered thead th,
.table-bordered thead td {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ---- FIX: INVOICE PAGE --------------------------------------------------- */
.invoice-container {
    background: transparent !important;
    color: var(--nn-text-secondary) !important;
}
.invoice-header {
    background: rgba(65, 25, 25, 0.35) !important;
    backdrop-filter: blur(12px);
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 24px 32px !important;
    color: var(--nn-text-secondary) !important;
}
.invoice-header h2,
.invoice-header h3,
.invoice-header p,
.invoice-header address {
    color: var(--nn-text-primary) !important;
}
.invoice-status .paid   { color: #4ade80 !important; font-weight: 700; font-size: 1.25rem; }
.invoice-status .unpaid { color: #ff8c00 !important; font-weight: 700; font-size: 1.25rem; }
.invoice-status .draft  { color: #9ca3af !important; font-weight: 700; font-size: 1.25rem; }
.invoice-status .cancelled,
.invoice-status .refunded { color: #f87171 !important; font-weight: 700; font-size: 1.25rem; }
.invoice-status .collections { color: #dc2626 !important; font-weight: 700; font-size: 1.25rem; }

.invoice-items {
    background: rgba(65, 25, 25, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 0 6px 6px;
    padding: 0 !important;
}
.invoice-items table,
.invoice-items .table {
    margin: 0 !important;
    color: var(--nn-text-secondary) !important;
}

/* ---- FIX: STORE / CART PAGE ---------------------------------------------- */
#shopping-cart,
.shopping-cart,
.order-container,
.store-container {
    color: var(--nn-text-secondary) !important;
}

/* Order form */
.order-form-container {
    background: transparent !important;
}

/* Pricing tables in store */
.pricingcontainer,
.product-group {
    background: transparent !important;
    color: var(--nn-text-secondary) !important;
}

.package,
.product-block {
    background: rgba(65, 25, 25, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(12px);
    color: var(--nn-text-secondary) !important;
    transition: all 300ms ease;
}
.package:hover, .product-block:hover {
    border-color: rgba(255,255,255,0.07) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.35) !important;
    transform: translateY(-3px);
}
.package .package-header,
.product-block .package-header {
    background: rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px 6px 0 0 !important;
    color: var(--nn-text-primary) !important;
}

.pricetag,
.price,
.package-price {
    color: var(--nn-red-bright) !important;
    font-weight: 700;
}

/* Order summary panel */
.order-summary,
#order-summary {
    background: rgba(65, 25, 25, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(12px);
    color: var(--nn-text-secondary) !important;
}
.order-summary .subtotal,
.order-summary .total {
    color: var(--nn-text-primary) !important;
    font-weight: 600;
}
.order-summary .total-amount {
    color: var(--nn-red-bright) !important;
    font-weight: 700;
    font-size: 1.25rem;
}

/* ---- FIX: SUPPORT TICKETS ------------------------------------------------- */
.ticket-reply,
.ticket-message,
.reply-info {
    background: rgba(0, 0, 0, 0.18) !important;
    border: none !important;
    border-radius: 10px !important;
    color: var(--nn-text-secondary) !important;
    margin-bottom: 12px;
    padding: 0 !important;
    overflow: hidden;
}
.ticket-reply.staff,
.ticket-reply.admin {
    border-left: 3px solid var(--nn-red) !important;
    border-radius: 0 10px 10px 0 !important;
}
.ticket-reply.client {
    border-left: none !important;
}

/* ---- FIX: GENERIC light bg overrides (catch-all for any missed panels) ---- */
.bg-white,
.bg-light,
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: #fff"],
[style*="background:#fff"] {
    background-color: rgba(65, 25, 25, 0.35) !important;
    color: var(--nn-text-secondary) !important;
}

/* Panels / wells with light backgrounds */
.panel-default > .panel-heading {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--nn-text-primary) !important;
}
.panel-default {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ---- FIX: OAUTH / LOGIN PAGES -------------------------------------------- */
.login-container,
.login-panel,
.oauth-container {
    background: rgba(65, 25, 25, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(12px);
}

/* ---- FIX: General text that was missed ------------------------------------ */
p, li, td, th, span, div, address, section {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.text-dark, .text-body { color: var(--nn-text-secondary) !important; }

/* =============================================================================
   PATCH v1.2 — CSS Variable Override + Table Variants + Cart Header Fix
   ============================================================================= */

/* ---- Override WHMCS/Bootstrap CSS root variables -------------------------- */
:root {
    --primary:       #b91c1c;
    --secondary:     #6b7280;
    --success:       #4ade80;
    --danger:        #dc2626;
    --warning:       #ff8c00;
    --info:          #5865F2;
    --blue:          #5865F2;
    --light:         rgba(255, 255, 255, 0.05);
    --dark:          rgba(0, 0, 0, 0.5);
    --link-color:    #dc2626;
    --bs-primary:    #b91c1c;
    --bs-link-color: #dc2626;
}

/* ---- Override the theme's hardcoded #336699 blue link color --------------- */
a { color: #dc2626 !important; }
a:hover { color: #ef4444 !important; }

/* Restore non-link elements that use color */
.btn { color: inherit; }
.nav-link { color: var(--nn-text-secondary) !important; }
.navbar-brand { color: var(--nn-text-primary) !important; }
.dropdown-item { color: var(--nn-text-secondary) !important; }
.list-group-item { color: var(--nn-text-secondary) !important; }
.page-link { color: var(--nn-text-muted) !important; }
.breadcrumb-item a { color: var(--nn-text-muted) !important; }
.breadcrumb-item a:hover { color: #dc2626 !important; }

/* ---- ALL Bootstrap table color variants — forced dark --------------------- */
.table-primary,
.table-primary > th,
.table-primary > td,
.table-primary th,
.table-primary td,
.table-primary thead th,
tr.table-primary,
tr.table-primary > td,
tr.table-primary > th {
    background-color: rgba(185, 28, 28, 0.2) !important;
    border-color: rgba(185, 28, 28, 0.3) !important;
    color: var(--nn-text-primary) !important;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td,
.table-secondary th,
.table-secondary td {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--nn-border-subtle) !important;
    color: var(--nn-text-secondary) !important;
}

.table-success,
.table-success > th,
.table-success > td,
.table-success th,
.table-success td {
    background-color: rgba(74, 222, 128, 0.12) !important;
    border-color: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
}

.table-danger,
.table-danger > th,
.table-danger > td,
.table-danger th,
.table-danger td {
    background-color: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
}

.table-warning,
.table-warning > th,
.table-warning > td,
.table-warning th,
.table-warning td {
    background-color: rgba(255, 140, 0, 0.1) !important;
    border-color: rgba(255, 140, 0, 0.2) !important;
    color: #ff8c00 !important;
}

.table-info,
.table-info > th,
.table-info > td,
.table-info th,
.table-info td {
    background-color: rgba(88, 101, 242, 0.12) !important;
    border-color: rgba(88, 101, 242, 0.2) !important;
    color: #818cf8 !important;
}

.table-light,
.table-light > th,
.table-light > td,
.table-light th,
.table-light td {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--nn-border-subtle) !important;
    color: var(--nn-text-secondary) !important;
}

.table-dark,
.table-dark th,
.table-dark td,
.table-dark thead th {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-color: var(--nn-border-subtle) !important;
    color: var(--nn-text-primary) !important;
}

/* thead-dark / thead-light overrides */
.table .thead-dark th {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-color: var(--nn-border-subtle) !important;
    color: var(--nn-text-primary) !important;
}
.table .thead-light th {
    background-color: rgba(0, 0, 0, 0.35) !important;
    border-color: var(--nn-border-subtle) !important;
    color: var(--nn-text-muted) !important;
}

/* table-hover variants */
.table-hover .table-primary:hover,
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
    background-color: rgba(185, 28, 28, 0.3) !important;
}

/* ---- CART PAGE: target the blue thead row directly ----------------------- */
.table thead tr,
.table thead th,
.cart-table thead tr,
.cart-table thead th,
#shoppingcart thead tr,
#shoppingcart thead th,
.table > thead > tr > th,
.table > thead > tr > td {
    background: rgba(0, 0, 0, 0.45) !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    font-weight: 600;
}

/* The cart table's colored header row specifically */
.table > thead > tr.table-primary > th,
.table > thead > tr.table-primary > td,
thead.table-primary > tr > th,
thead.table-primary > tr > td {
    background: rgba(185, 28, 28, 0.25) !important;
    background-color: rgba(185, 28, 28, 0.25) !important;
    color: #ffffff !important;
    border-color: rgba(185, 28, 28, 0.3) !important;
}

/* ---- Dev license banner -------------------------------------------------- */
.alert-warning[role="alert"],
.dev-licence,
[class*="licence"],
[class*="license"] {
    background: rgba(255, 140, 0, 0.08) !important;
    border: 1px solid rgba(255, 140, 0, 0.2) !important;
    color: #ff8c00 !important;
    border-radius: 8px !important;
}

/* =============================================================================
   PATCH v1.3 — Full Theme Consistency Pass
   ============================================================================= */

/* ---- FIX: DROPDOWN MENUS — specificity battle explained ------------------
   The rule  body a:not(.dropdown-item):not(...)  has specificity (0,8,2).
   Items moved to the collapsable "More" by JS keep their original <a> class
   (e.g. "pr-4"), NOT "dropdown-item", so that heavy body rule wins and
   colours them red. A low-specificity .dropdown-menu a (0,1,1) also loses.

   Solution: prepend the nav's ID (#nav = 1,0,0) so the total is (1,1,1),
   which beats (0,8,2) regardless of !important ordering.
   ----------------------------------------------------------------- */

/* Baseline — covers any dropdown that isn't inside #nav (topbar, etc.) */
.dropdown-menu a,
.dropdown-menu .dropdown-toggle {
    color: var(--nn-text-secondary) !important;
    text-decoration: none !important;
}
.dropdown-menu a:hover,
.dropdown-menu .dropdown-toggle:hover {
    color: var(--nn-text-primary) !important;
    background: rgba(185, 28, 28, 0.15) !important;
    border-radius: var(--nn-radius-md);
}

/* High-specificity override — beats body a:not(.dropdown-item) (0,8,2) */
#nav .dropdown-menu a,
#nav .collapsable-dropdown-menu a,
#nav .dropdown-menu .dropdown-toggle {
    color: var(--nn-text-secondary) !important;
    text-decoration: none !important;
}
#nav .dropdown-menu a:hover,
#nav .collapsable-dropdown-menu a:hover,
#nav .dropdown-menu .dropdown-toggle:hover {
    color: var(--nn-text-primary) !important;
    background: rgba(185, 28, 28, 0.15) !important;
    border-radius: var(--nn-radius-md);
    text-decoration: none !important;
}

/* Collapsable "More" dropdown — layout polish for moved top-level items */
.collapsable-dropdown-menu > li > a {
    display: block;
    padding: 9px 14px !important;
    font-size: 0.875rem;
    border-radius: var(--nn-radius-md);
    transition: var(--nn-transition);
    font-family: 'Inter', system-ui, sans-serif;
}

/* ---- FIX: btn-outline-primary — was blue (#336699), now matches red theme - */
.btn-outline-primary {
    color: var(--nn-red-bright) !important;
    border-color: rgba(185, 28, 28, 0.5) !important;
    background: transparent !important;
    border-radius: 4px !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #ffffff !important;
    background: rgba(185, 28, 28, 0.2) !important;
    border-color: var(--nn-red) !important;
    box-shadow: 0 0 16px rgba(185, 28, 28, 0.2) !important;
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #ffffff !important;
    background: rgba(185, 28, 28, 0.3) !important;
    border-color: var(--nn-red) !important;
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.35) !important;
}

/* ---- FIX: Homepage action icon buttons — remove white bg, apply dark theme  */
.action-icon-btns a {
    background: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-subtle) !important;
    border-radius: var(--nn-radius-lg) !important;
    color: var(--nn-text-secondary) !important;
    text-align: center;
    text-decoration: none !important;
    transition: var(--nn-transition-slow) !important;
}
.action-icon-btns a:hover {
    background: rgba(65, 25, 25, 0.55) !important;
    border-color: var(--nn-border-red) !important;
    color: var(--nn-text-primary) !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
    transform: translateY(-3px);
}
.action-icon-btns a .ico-container i {
    color: var(--nn-red) !important;
    transition: var(--nn-transition) !important;
}
.action-icon-btns a:hover .ico-container i {
    color: var(--nn-red-bright) !important;
}

/* ---- FIX: Dashboard tiles — light hover & icon colors were off-theme ------- */
.tiles {
    border-radius: var(--nn-radius-xl) !important;
    overflow: hidden;
    border: 1px solid var(--nn-border-subtle) !important;
}
.tiles .tile {
    background: var(--nn-surface) !important;
    border-right: 1px solid var(--nn-border-subtle) !important;
    color: var(--nn-text-primary) !important;
    transition: var(--nn-transition-slow) !important;
}
.tiles .tile:hover {
    background: rgba(65, 25, 25, 0.55) !important;
    cursor: pointer;
}
.tiles .tile .stat {
    color: var(--nn-text-primary) !important;
}
.tiles .tile .title {
    color: var(--nn-text-muted) !important;
}
.tiles .tile i {
    color: rgba(255, 255, 255, 0.1) !important;
    transition: var(--nn-transition) !important;
}
.tiles .tile:hover i {
    color: rgba(185, 28, 28, 0.4) !important;
}

/* ---- FIX: Store landing-page — white card & section backgrounds ----------- */
.landing-page .hero {
    color: var(--nn-text-secondary) !important;
    background: transparent !important;
}
.landing-page .hero h2,
.landing-page .hero h3 {
    color: var(--nn-text-primary) !important;
}
.landing-page .product-options {
    background: transparent !important;
    color: var(--nn-text-secondary) !important;
}
.landing-page .product-options .item {
    background: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-subtle) !important;
    border-radius: var(--nn-radius-lg) !important;
    color: var(--nn-text-secondary) !important;
    transition: var(--nn-transition-slow);
}
.landing-page .product-options .item:hover {
    border-color: var(--nn-border-red) !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
    transform: translateY(-3px);
}
.landing-page .product-options h2,
.landing-page .product-options h3,
.landing-page .product-options h4 {
    color: var(--nn-text-primary) !important;
}
.landing-page .product-options p,
.landing-page .product-options span {
    color: var(--nn-text-muted) !important;
}
.landing-page .product-options .price {
    color: var(--nn-red-bright) !important;
}
.landing-page .product-options .item .btn {
    background: rgba(185, 28, 28, 0.8) !important;
    color: #ffffff !important;
    border: 1px solid rgba(185, 28, 28, 0.5) !important;
}
.landing-page .product-options .item .btn:hover {
    background: var(--nn-red-bright) !important;
}
.landing-page .light-grey-bg {
    background: rgba(0, 0, 0, 0.2) !important;
    color: var(--nn-text-secondary) !important;
}
.landing-page .get-started {
    background: rgba(185, 28, 28, 0.12) !important;
    border: 1px solid var(--nn-border-red) !important;
    border-radius: var(--nn-radius-xl) !important;
    color: var(--nn-text-primary) !important;
}
.landing-page .get-started h2 {
    color: var(--nn-text-primary) !important;
}
.landing-page .get-started .price {
    color: var(--nn-red-bright) !important;
}
.landing-page .get-started .btn-order-now {
    background: var(--nn-red) !important;
    color: #ffffff !important;
    border: none !important;
}
.landing-page .content-block {
    color: var(--nn-text-secondary) !important;
}
.landing-page .tab-content {
    background: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-subtle) !important;
    border-radius: 0 0 var(--nn-radius-lg) var(--nn-radius-lg) !important;
    color: var(--nn-text-secondary) !important;
}
.landing-page .nav-tabs > li > a,
.landing-page .nav-tabs > li > a:focus {
    background: rgba(0, 0, 0, 0.2) !important;
    color: var(--nn-text-muted) !important;
    border: none !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: var(--nn-surface) !important;
    color: var(--nn-text-primary) !important;
    border-top: 3px solid var(--nn-red-bright) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}
.landing-page .navbar .navbar-nav > li > a {
    color: var(--nn-text-muted) !important;
    border-bottom-color: var(--nn-border-subtle) !important;
}

/* ---- FIX: Dynamic store — white logo container & gradient sections --------- */
.hero-logo-container {
    background: rgba(65, 25, 25, 0.4) !important;
    border: 1px solid var(--nn-border-subtle) !important;
    box-shadow: var(--nn-shadow-card) !important;
}
.background-gradient,
.background-light {
    background: rgba(0, 0, 0, 0.15) !important;
}

/* ---- FIX: Store product listing — pricingcontainer panel cards ------------ */
.pricingcontainer .panel {
    transition: var(--nn-transition-slow);
}
.pricingcontainer .panel:hover {
    border-color: var(--nn-border-red) !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
    transform: translateY(-3px);
}

/* ---- FIX: nav-link inside dropdown menus (secondary nav, user menu) ------- */
.dropdown-menu .nav-link {
    color: var(--nn-text-secondary) !important;
    padding: 9px 14px !important;
}
.dropdown-menu .nav-link:hover {
    color: var(--nn-text-primary) !important;
    background: rgba(185, 28, 28, 0.15) !important;
}

/* ---- FIX: card-accent-* used as <a> blocks on homepage -------------------- */
/* These inherit red from global `a` rule — restore them as dark cards */
a[class*="card-accent-"] {
    display: block;
    color: var(--nn-text-secondary) !important;
    text-decoration: none !important;
    background: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-subtle) !important;
    border-radius: var(--nn-radius-lg) !important;
    transition: var(--nn-transition-slow) !important;
}
a[class*="card-accent-"]:hover {
    color: var(--nn-text-primary) !important;
    background: rgba(65, 25, 25, 0.55) !important;
    border-color: var(--nn-border-red) !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
    transform: translateY(-3px);
}

/* ---- FIX: client area home tiles <a> links -------------------------------- */
.tiles .tile {
    color: var(--nn-text-primary) !important;
}
.tiles .row > div:last-child .tile {
    border-right: none !important;
}

/* =============================================================================
   PATCH v1.4 — Markdown Editor · File Input · Announcement Article
   ============================================================================= */

/* ---- FIX: Markdown editor — theme.css has  background-color:#fff !important
   on .md-editor > textarea.markdown-editor and .btn-toolbar.
   We must match or exceed that specificity (0,1,2) to win. --------------------*/
.md-editor {
    background: var(--nn-bg-input) !important;
    border: 1px solid var(--nn-border-red) !important;
    border-radius: var(--nn-radius-md) !important;
}
/* Toolbar strip */
.md-editor > .btn-toolbar {
    background: rgba(0, 0, 0, 0.35) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    border-radius: var(--nn-radius-md) var(--nn-radius-md) 0 0 !important;
    padding: 6px 8px !important;
}
.md-editor > .btn-toolbar .btn,
.md-editor > .btn-toolbar button {
    color: var(--nn-text-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--nn-radius-sm) !important;
}
.md-editor > .btn-toolbar .btn:hover,
.md-editor > .btn-toolbar button:hover {
    color: var(--nn-text-primary) !important;
    background: rgba(185, 28, 28, 0.15) !important;
    border-color: var(--nn-border-red) !important;
}
/* Writing area and preview pane — matches theme.css specificity exactly */
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
    background: var(--nn-bg-input) !important;
    background-color: var(--nn-bg-input) !important;
    color: var(--nn-text-primary) !important;
    border-top: 1px solid var(--nn-border-subtle) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
}
/* .md-footer wrapper — all.css sets background:#f5f5f5; padding:6px 4px which
   frames the .markdown-editor-status in a light-gray "border" effect */
.md-editor .md-footer {
    background: #0d0404 !important;
    background-color: #0d0404 !important;
    padding: 0 !important;
    border-top: 1px solid var(--nn-border-red) !important;
    border-radius: 0 0 var(--nn-radius-md) var(--nn-radius-md) !important;
}

/* Status bar "lines: 0  words: 0  saved" */
.markdown-editor-status {
    background: #0d0404 !important;
    background-color: #0d0404 !important;
    color: var(--nn-text-subtle) !important;
    border-top: none !important;
    border-radius: 0 0 var(--nn-radius-md) var(--nn-radius-md) !important;
    padding: 4px 12px !important;
}
div.md-editor.active {
    border-color: var(--nn-border-red-focus) !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}

/* Markdown rendered content — headings/tables were #333 / white */
.md-preview h1, .markdown-content h1,
.md-preview h2, .markdown-content h2,
.md-preview h3, .markdown-content h3,
.md-preview h4, .markdown-content h4,
.md-preview h5, .markdown-content h5,
.md-preview h6, .markdown-content h6 {
    color: var(--nn-text-primary) !important;
}
.md-preview p, .markdown-content p,
.md-preview li, .markdown-content li,
.md-preview td, .markdown-content td,
.md-preview th, .markdown-content th {
    color: var(--nn-text-secondary) !important;
}
.md-preview table, .markdown-content table {
    background: transparent !important;
    border-color: var(--nn-border-subtle) !important;
}
.md-preview blockquote, .markdown-content blockquote {
    border-left-color: var(--nn-red) !important;
    background: rgba(185, 28, 28, 0.05) !important;
    color: var(--nn-text-muted) !important;
}

/* ---- FIX: Custom file input — .custom-file-label is #fff, ::after is #e9ecef */
.custom-file-label {
    background: var(--nn-bg-input) !important;
    background-color: var(--nn-bg-input) !important;
    border: 1px solid var(--nn-border-muted) !important;
    color: var(--nn-text-subtle) !important;
    border-radius: var(--nn-radius-md) !important;
}
.custom-file-label::after {
    background: rgba(22, 10, 10, 0.9) !important;
    background-color: rgba(22, 10, 10, 0.9) !important;
    color: var(--nn-text-muted) !important;
    border-left: 1px solid var(--nn-border-muted) !important;
    border-radius: 0 var(--nn-radius-md) var(--nn-radius-md) 0 !important;
}
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--nn-border-red-focus) !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}
/* Disabled state */
.custom-file-input[disabled] ~ .custom-file-label,
.custom-file-input:disabled ~ .custom-file-label {
    background: rgba(22, 10, 10, 0.5) !important;
    opacity: 0.6;
}

/* ---- FIX: Announcement article — background-color:#f5f5f5, border-left:#ccc */
.announcements .announcement article {
    background: rgba(0, 0, 0, 0.2) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-left: 4px solid var(--nn-red) !important;
    border-radius: 0 var(--nn-radius-md) var(--nn-radius-md) 0 !important;
    color: var(--nn-text-secondary) !important;
}
.announcements .announcement article p,
.announcements .announcement article span,
.announcements .announcement article li {
    color: var(--nn-text-secondary) !important;
}
/* Announcement title link — keep it as primary white, not the global red */
.announcements .announcement h1 a {
    color: var(--nn-text-primary) !important;
}
.announcements .announcement h1 a:hover {
    color: var(--nn-red-bright) !important;
}

/* =============================================================================
   PATCH v1.5 — Standard Cart Product Cards · Dynamic Store · Domain Search
                 Select Height Fix · Markdown Status Bar Boost
   ============================================================================= */

/* ---- FIX: .md-footer wrapper + status bar — stronger selectors ------------ */
body .md-editor .md-footer,
.md-editor .md-footer {
    background: #0d0404 !important;
    background-color: #0d0404 !important;
    padding: 0 !important;
    border-top: 1px solid var(--nn-border-red) !important;
}
body .markdown-editor-status,
.md-editor .markdown-editor-status,
#order-standard_cart .markdown-editor-status {
    background: #0d0404 !important;
    background-color: #0d0404 !important;
    color: var(--nn-text-subtle) !important;
    border-top: none !important;
}

/* ---- FIX: Native select elements — fixed height clips text on some browsers */
select.form-control,
select.custom-select {
    height: auto !important;
    min-height: calc(2.25rem + 2px) !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/* ---- FIX: Standard cart product card ----------------------------------------
   Source: orderforms/standard_cart/css/style.css
   #order-standard_cart .products .product { background: #fff; border: 1px solid #ddd }
   #order-standard_cart .products .product header { background: #f8f8f8 }
   ---------------------------------------------------------------------------- */
#order-standard_cart .products .product {
    background: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-muted) !important;
    border-radius: var(--nn-radius-md) !important;
}
#order-standard_cart .products .product header {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    border-radius: var(--nn-radius-md) var(--nn-radius-md) 0 0 !important;
}
#order-standard_cart .products .product header span {
    color: var(--nn-text-primary) !important;
}
#order-standard_cart .products .product div.product-desc {
    color: var(--nn-text-muted) !important;
}
#order-standard_cart .products .product span.feature-value {
    color: var(--nn-text-secondary) !important;
}
#order-standard_cart .products .product div.product-pricing span.price {
    color: var(--nn-text-primary) !important;
}
/* "Order Now" btn-success → theme red */
#order-standard_cart .products .product .btn-order-now,
#order-standard_cart .products .product .btn-success {
    background: var(--nn-red) !important;
    background-color: var(--nn-red) !important;
    border-color: var(--nn-red-deep) !important;
    color: #ffffff !important;
}
#order-standard_cart .products .product .btn-order-now:hover,
#order-standard_cart .products .product .btn-success:hover {
    background: var(--nn-red-bright) !important;
    background-color: var(--nn-red-bright) !important;
    border-color: var(--nn-red) !important;
}

/* ---- FIX: Domain selection option rows — was #f8f8f8 / #efefef (white) ---- */
#order-standard_cart .domain-selection-options .option {
    background-color: var(--nn-surface) !important;
}
#order-standard_cart .domain-selection-options .option-selected {
    background-color: rgba(185, 28, 28, 0.12) !important;
}

/* ---- FIX: Standard cart product-info banner -------------------------------- */
#order-standard_cart .product-info {
    background-color: rgba(22, 10, 10, 0.5) !important;
    border-top: 1px solid var(--nn-border-subtle) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    color: var(--nn-text-secondary) !important;
}
#order-standard_cart .product-info .product-title {
    color: var(--nn-text-primary) !important;
}

/* ---- FIX: Standard cart addon panels --------------------------------------- */
#order-standard_cart .panel-addon {
    background-color: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-muted) !important;
    border-radius: var(--nn-radius-md) !important;
}
#order-standard_cart .panel-addon .panel-body label {
    color: var(--nn-text-primary) !important;
}
#order-standard_cart .panel-addon .panel-price {
    background-color: rgba(0, 0, 0, 0.25) !important;
    color: var(--nn-text-secondary) !important;
    border-top: 1px solid var(--nn-border-subtle) !important;
}
#order-standard_cart .panel-addon .panel-add {
    background-color: var(--nn-red) !important;
    color: #ffffff !important;
    border-radius: 0 0 var(--nn-radius-md) var(--nn-radius-md) !important;
}
#order-standard_cart .panel-addon-selected {
    border-color: var(--nn-red) !important;
    box-shadow: 0 0 8px rgba(185, 28, 28, 0.3) !important;
}
#order-standard_cart .panel-addon-selected .panel-add {
    background-color: var(--nn-red-deep) !important;
}

/* ── Credit & payment containers (checkout.tpl) ─────────────────────────── */
#order-standard_cart .apply-credit-container {
    background-color: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-muted) !important;
    border-radius: var(--nn-radius-md) !important;
    color: var(--nn-text-secondary) !important;
}
#order-standard_cart .apply-credit-container span {
    color: var(--nn-text-primary) !important;
}
#order-standard_cart .cc-input-container {
    background-color: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-muted) !important;
    border-radius: var(--nn-radius-md) !important;
    color: var(--nn-text-secondary) !important;
}
#order-standard_cart .cc-input-container .existing-cc-grid {
    color: var(--nn-text-muted) !important;
}

/* ── PayPal PPCP payment form ────────────────────────────────────────────── */
#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields ul,
#frmPayment.paypal_ppcpv-payment-form .paymethod-info:not([data-paymethod-id]) {
    background-color: var(--nn-surface) !important;
    color: var(--nn-text-secondary) !important;
    border-color: var(--nn-border-muted) !important;
}

/* ── Labels & help text ──────────────────────────────────────────────────── */
#order-standard_cart label {
    color: var(--nn-text-secondary) !important;
}
#order-standard_cart .field-help-text {
    color: var(--nn-text-muted) !important;
}

/* ── Product header qty ──────────────────────────────────────────────────── */
#order-standard_cart .products .product header .qty {
    color: var(--nn-text-muted) !important;
}

/* ── Domain checker status colors ───────────────────────────────────────── */
#order-standard_cart .domain-checker-available {
    color: #4ade80 !important;
}
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid {
    color: #f87171 !important;
}

/* ── Domain transfer eligibility notices ────────────────────────────────── */
#order-standard_cart .transfer-eligible {
    color: #4ade80 !important;
    background-color: rgba(74, 222, 128, 0.1) !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
}
#order-standard_cart .transfer-not-eligible {
    color: var(--nn-text-muted) !important;
    background-color: var(--nn-surface) !important;
}

/* ── Order summary totals & header borders ───────────────────────────────── */
#order-standard_cart .order-summary {
    border-bottom: 3px solid var(--nn-red) !important;
}
#order-standard_cart .order-summary .summary-totals {
    border-top: 1px solid var(--nn-border-subtle) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
}

/* ---- FIX: Dynamic store pricing cards — dynamic-store.css has #ffffff ------*/
.pricing-card {
    background: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-muted) !important;
}
.pricing-card:hover,
.pricing-card:has(.plan-button:hover) {
    border-color: var(--nn-border-red) !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
}
.plan-name {
    color: var(--nn-text-primary) !important;
}
.plan-description,
.feature-item {
    color: var(--nn-text-muted) !important;
}
.price-amount {
    color: var(--nn-red-bright) !important;
}
.plan-button {
    background: var(--nn-red) !important;
    border-color: var(--nn-red) !important;
    color: #ffffff !important;
}
.plan-button:hover {
    background: var(--nn-red-bright) !important;
    border-color: var(--nn-red-bright) !important;
}

/* ---- FIX: Domain search widget — .home-domain-search.bg-white is white -----
   Source: theme.css — .home-domain-search .input-group-wrapper { background-color:#fff }
   ---------------------------------------------------------------------------- */
.home-domain-search,
.home-domain-search.bg-white {
    background: linear-gradient(135deg, rgba(22, 8, 8, 0.96) 0%, rgba(35, 12, 12, 0.92) 100%) !important;
    background-color: rgba(22, 8, 8, 0.96) !important;
    border-top: 1px solid var(--nn-border-red) !important;
    border-bottom: 1px solid var(--nn-border-red) !important;
}
.home-domain-search h2 {
    color: var(--nn-text-primary) !important;
}
.home-domain-search .input-group-wrapper {
    background: rgba(10, 3, 3, 0.6) !important;
    background-color: rgba(10, 3, 3, 0.6) !important;
    border: 1px solid var(--nn-border-muted) !important;
    border-radius: var(--nn-radius-lg) !important;
}
.home-domain-search .form-control,
.home-domain-search input[type="text"] {
    background: rgba(22, 10, 10, 0.7) !important;
    background-color: rgba(22, 10, 10, 0.7) !important;
    color: var(--nn-text-primary) !important;
    border-color: var(--nn-border-muted) !important;
}
.home-domain-search .form-control::placeholder,
.home-domain-search input[type="text"]::placeholder {
    color: var(--nn-text-subtle) !important;
}
.home-domain-search textarea {
    background: rgba(22, 10, 10, 0.7) !important;
    background-color: rgba(22, 10, 10, 0.7) !important;
    color: var(--nn-text-primary) !important;
    border-color: var(--nn-border-muted) !important;
}
/* Transfer button — strip Bootstrap green */
.home-domain-search .btn-success,
#btnTransfer,
#btnTransfer2 {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--nn-border-red) !important;
    color: var(--nn-text-secondary) !important;
}
.home-domain-search .btn-success:hover,
#btnTransfer:hover,
#btnTransfer2:hover {
    background: rgba(185, 28, 28, 0.2) !important;
    border-color: var(--nn-red) !important;
    color: var(--nn-text-primary) !important;
}
/* Safe search / advanced labels */
.home-domain-search .advanced-input label,
.home-domain-search .input-group-wrapper label {
    color: var(--nn-text-muted) !important;
}
/* Bootstrap Multiselect toggle buttons */
.home-domain-search .btn.multiselect,
.home-domain-search button.multiselect {
    background: rgba(22, 10, 10, 0.7) !important;
    border: 1px solid var(--nn-border-muted) !important;
    color: var(--nn-text-muted) !important;
    border-radius: var(--nn-radius-sm) !important;
}
.home-domain-search .btn.multiselect:hover,
.home-domain-search button.multiselect:hover {
    background: rgba(22, 10, 10, 0.9) !important;
    border-color: var(--nn-border-red) !important;
    color: var(--nn-text-primary) !important;
}
/* Multiselect dropdown panel */
.multiselect-container.dropdown-menu {
    background: var(--nn-bg-input) !important;
    border: 1px solid var(--nn-border-muted) !important;
    border-radius: var(--nn-radius-md) !important;
}
.multiselect-container .dropdown-item,
.multiselect-container li a {
    color: var(--nn-text-muted) !important;
    background: transparent !important;
}
.multiselect-container .dropdown-item:hover,
.multiselect-container li a:hover,
.multiselect-container li.active a,
.multiselect-container li.active .dropdown-item {
    background: rgba(185, 28, 28, 0.15) !important;
    color: var(--nn-text-primary) !important;
}
/* TLD logos strip & view pricing link */
.home-domain-search .tld-logos li {
    color: var(--nn-text-muted) !important;
}
.home-domain-search .btn-link {
    color: var(--nn-text-subtle) !important;
}
.home-domain-search .btn-link:hover {
    color: var(--nn-red-bright) !important;
}

/* =============================================================================
   PATCH v1.6 — Deeper Background · Opaque Cards · Red Glow on Hover
   ============================================================================= */

/* ---- OVERRIDE: Body background — deeper base, more visible red atmosphere -- */
body,
body.primary-bg-color {
    background:
        radial-gradient(ellipse at 20% 35%, rgba(185, 28, 28, 0.18) 0%, transparent 52%),
        radial-gradient(ellipse at 80% 10%, rgba(185, 28, 28, 0.14) 0%, transparent 46%),
        radial-gradient(ellipse at 55% 90%, rgba(127, 29, 29, 0.12) 0%, transparent 46%),
        radial-gradient(ellipse at 50% 50%, rgba(80, 10, 10, 0.08) 0%, transparent 70%),
        linear-gradient(135deg, #040202 0%, #070404 25%, #0d0606 50%, #070404 75%, #040202 100%) !important;
    background-attachment: fixed !important;
}

/* ---- OVERRIDE: CSS variables — solid card surface ------------------------- */
:root {
    /* Solid dark-crimson — lighter than bg, zero transparency bleed */
    --nn-surface:            #351413;
    --nn-border-subtle:      rgba(185, 28, 28, 0.22);
    --nn-border-muted:       rgba(185, 28, 28, 0.30);
    --nn-border-red:         rgba(185, 28, 28, 0.35);
    --nn-shadow-card:        0 4px 24px rgba(0, 0, 0, 0.65);
    --nn-shadow-card-hover:  0 14px 44px rgba(0,0,0,0.75), 0 4px 16px rgba(0,0,0,0.4);
    --nn-shadow-glow:        0 0 60px rgba(185, 28, 28, 0.25),
                             0 0 120px rgba(127, 29, 29, 0.15);
}

/* ---- OVERRIDE: Base card — solid surface, no border, shadow for depth ----- */
.card {
    background: var(--nn-surface) !important;
    border: none !important;
    box-shadow: var(--nn-shadow-card) !important;
    transition: box-shadow 250ms ease !important;
}
.card:hover {
    border: none !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
    transform: none !important;
}

/* ---- OVERRIDE: Standard cart product card glow ---------------------------- */
#order-standard_cart .products .product {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease !important;
}
#order-standard_cart .products .product:hover {
    border-color: rgba(255,255,255,0.07) !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
    transform: translateY(-2px);
}

/* ---- OVERRIDE: Dynamic store pricing card glow ---------------------------- */
.pricing-card {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease !important;
}
.pricing-card:hover,
.pricing-card:has(.plan-button:hover) {
    border-color: rgba(255,255,255,0.07) !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
    transform: translateY(-3px);
}

/* ---- OVERRIDE: Landing-page product item glow ----------------------------- */
.landing-page .product-options .item {
    border: 1px solid rgba(185, 28, 28, 0.14) !important;
    transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease !important;
}
.landing-page .product-options .item:hover {
    border-color: rgba(185, 28, 28, 0.52) !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
}

/* ---- OVERRIDE: Card sidebar — no border, shadow only --------------------- */
.card-sidebar {
    border: none !important;
    transition: box-shadow 250ms ease !important;
}
.card-sidebar:hover {
    border: none !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
}

/* =============================================================================
   PATCH v1.7 — Review & Checkout Page (standard_cart/viewcart.tpl)
   Source: orderforms/standard_cart/css/style.css
   Problems: blue #058 header, white #fff item rows, #f8f8f8 summary container,
             green btn-success checkout button, blue empty-cart button
   ============================================================================= */

/* ---- Cart item list header — was background-color: #058 (blue) ------------ */
#order-standard_cart .view-cart-items-header {
    background: linear-gradient(135deg, rgba(140, 20, 20, 0.9) 0%, rgba(100, 12, 12, 0.85) 100%) !important;
    background-color: var(--nn-red) !important;
    border-bottom: 1px solid rgba(185, 28, 28, 0.4) !important;
    border-radius: var(--nn-radius-md) var(--nn-radius-md) 0 0 !important;
    color: var(--nn-text-primary) !important;
}

/* ---- Cart item list border — was border-bottom: 2px solid #058 ------------ */
#order-standard_cart .view-cart-items {
    border-bottom: 2px solid var(--nn-border-red) !important;
}

/* ---- Cart item rows — was background-color: #fff / #eee ------------------- */
#order-standard_cart .view-cart-items .item {
    background: var(--nn-surface) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    color: var(--nn-text-secondary) !important;
}
#order-standard_cart .view-cart-items .item:nth-child(even) {
    background: rgba(20, 7, 7, 0.75) !important;
}
#order-standard_cart .view-cart-items .item-title {
    color: var(--nn-text-primary) !important;
}
#order-standard_cart .view-cart-items .item-group {
    color: var(--nn-text-muted) !important;
}
#order-standard_cart .view-cart-items .item-domain {
    color: var(--nn-text-muted) !important;
}
#order-standard_cart .view-cart-items .item-price span {
    color: var(--nn-text-primary) !important;
}
#order-standard_cart .view-cart-items .item-price .cycle {
    color: var(--nn-text-subtle) !important;
}

/* ---- Empty cart button — was background-color: #058 ----------------------- */
#order-standard_cart .empty-cart .btn {
    background: rgba(185, 28, 28, 0.15) !important;
    border: 1px solid var(--nn-border-red) !important;
    color: var(--nn-text-muted) !important;
    border-radius: 0 0 var(--nn-radius-md) var(--nn-radius-md) !important;
}
#order-standard_cart .empty-cart .btn:hover {
    background: rgba(185, 28, 28, 0.3) !important;
    color: var(--nn-text-primary) !important;
}

/* ---- Remove item button --------------------------------------------------- */
#order-standard_cart .btn-remove-from-cart {
    color: var(--nn-text-subtle) !important;
}
#order-standard_cart .btn-remove-from-cart:hover {
    color: var(--nn-red-bright) !important;
}

/* ---- Order Summary card — header was #666, body was #f8f8f8 --------------- */
#order-standard_cart .order-summary {
    background: var(--nn-surface) !important;
    border: 1px solid rgba(185, 28, 28, 0.20) !important;
    border-radius: var(--nn-radius-md) !important;
    box-shadow: var(--nn-shadow-card) !important;
}
#order-standard_cart .order-summary h2 {
    background: linear-gradient(135deg, rgba(140, 20, 20, 0.8) 0%, rgba(100, 12, 12, 0.75) 100%) !important;
    border-bottom: 1px solid rgba(185, 28, 28, 0.3) !important;
    border-radius: var(--nn-radius-md) var(--nn-radius-md) 0 0 !important;
    color: var(--nn-text-primary) !important;
    padding: 14px !important;
}
#order-standard_cart .summary-container {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--nn-text-secondary) !important;
}
#order-standard_cart .order-summary .subtotal {
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    color: var(--nn-text-muted) !important;
}
#order-standard_cart .order-summary .bordered-totals {
    border-top: 1px solid var(--nn-border-subtle) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    color: var(--nn-text-muted) !important;
}
#order-standard_cart .order-summary .recurring-totals {
    color: var(--nn-text-muted) !important;
}
#order-standard_cart .order-summary .total-due-today span {
    color: var(--nn-text-secondary) !important;
}
#order-standard_cart .order-summary .total-due-today .amt {
    color: var(--nn-text-primary) !important;
    font-size: 2em !important;
}

/* ---- Checkout button — was btn-success (green) ---------------------------- */
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-checkout.btn-success,
#checkout {
    background: var(--nn-red) !important;
    background-color: var(--nn-red) !important;
    border-color: var(--nn-red-deep) !important;
    color: #ffffff !important;
    transition: var(--nn-transition) !important;
}
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-checkout.btn-success:hover,
#checkout:hover {
    background: var(--nn-red-bright) !important;
    background-color: var(--nn-red-bright) !important;
    border-color: var(--nn-red) !important;
    box-shadow: 0 0 20px rgba(185, 28, 28, 0.35) !important;
}

/* ---- Continue Shopping link ----------------------------------------------- */
#order-standard_cart .btn-continue-shopping {
    color: var(--nn-text-muted) !important;
}
#order-standard_cart .btn-continue-shopping:hover {
    color: var(--nn-red-bright) !important;
}

/* ---- Promo code tabs & content — was #f8f8f8 ------------------------------ */
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    background: var(--nn-surface) !important;
    border-color: var(--nn-border-muted) var(--nn-border-muted) transparent !important;
    color: var(--nn-text-primary) !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
    background: var(--nn-surface) !important;
    background-color: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-muted) !important;
    border-radius: 0 var(--nn-radius-md) var(--nn-radius-md) var(--nn-radius-md) !important;
    color: var(--nn-text-secondary) !important;
}

/* ---- Active promo code display -------------------------------------------- */
#order-standard_cart .view-cart-promotion-code {
    background: rgba(185, 28, 28, 0.08) !important;
    border: 1px dashed var(--nn-border-red) !important;
    color: var(--nn-text-secondary) !important;
}

/* ---- Express gateway checkout area ---------------------------------------- */
#order-standard_cart .view-cart-gateway-checkout {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--nn-border-subtle) !important;
    color: var(--nn-text-muted) !important;
}

/* =============================================================================
   PATCH v1.8 — Checkout Registration Form
   Fixes: icon padding, blue sub-headings, green total bar, generate-password btn,
          font consistency, field colours
   ============================================================================= */

/* ---- FIX: Restore icon left-padding — global .form-control padding:10px 14px
   kills the 36px left space the absolutely-positioned icon needs.
   Re-add it with higher specificity for prepend-icon fields only. ------------ */
#order-standard_cart .prepend-icon .field,
#order-standard_cart .prepend-icon .form-control,
#order-standard_cart .prepend-icon input.form-control,
#order-standard_cart .prepend-icon select.form-control,
#order-standard_cart .prepend-icon textarea.form-control {
    padding-left: 40px !important;
}

/* ---- FIX: Cart field/input base — was #fff / #626262 ---------------------- */
#order-standard_cart .field,
#order-standard_cart .field.form-control {
    background: var(--nn-bg-input) !important;
    background-color: var(--nn-bg-input) !important;
    border: 1px solid var(--nn-border-muted) !important;
    color: var(--nn-text-secondary) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    border-radius: var(--nn-radius-md) !important;
}
#order-standard_cart .field:focus,
#order-standard_cart .field.form-control:focus {
    border-color: var(--nn-border-red-focus) !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
    outline: none !important;
}
#order-standard_cart .field::placeholder {
    color: var(--nn-text-subtle) !important;
}
#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly] {
    background: rgba(22, 10, 10, 0.45) !important;
    color: var(--nn-text-subtle) !important;
    opacity: 0.65 !important;
}

/* ---- FIX: Field icon — was #bbb -------------------------------------------*/
#order-standard_cart .field-icon i {
    color: var(--nn-text-subtle) !important;
}

/* ---- FIX: Sub-heading dividers — border was #DDD, text was #058 (blue) ---- */
#order-standard_cart .sub-heading {
    border-color: var(--nn-border-red) !important;
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    color: var(--nn-red-bright) !important;
    background: transparent !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* ---- FIX: "Total Due Today" bar — was alert-success (green) --------------- */
#order-standard_cart #totalDueToday.alert-success,
#order-standard_cart .alert-success.large-text {
    background: rgba(10, 3, 3, 0.7) !important;
    background-color: rgba(10, 3, 3, 0.7) !important;
    border: 1px solid var(--nn-border-red) !important;
    color: var(--nn-text-secondary) !important;
    border-radius: var(--nn-radius-md) !important;
}
#order-standard_cart #totalDueToday strong,
#order-standard_cart #totalCartPrice {
    color: var(--nn-red-bright) !important;
}

/* ---- FIX: "Generate Password" button — was btn-default (white) ------------ */
#order-standard_cart .generate-password,
#order-standard_cart .btn.generate-password {
    background: rgba(22, 10, 10, 0.7) !important;
    background-color: rgba(22, 10, 10, 0.7) !important;
    border: 1px solid var(--nn-border-red) !important;
    color: var(--nn-text-muted) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
#order-standard_cart .generate-password:hover,
#order-standard_cart .btn.generate-password:hover {
    background: rgba(185, 28, 28, 0.2) !important;
    color: var(--nn-text-primary) !important;
}

/* ---- FIX: Password strength meter ----------------------------------------- */
#order-standard_cart .password-strength-meter .progress {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--nn-radius-sm) !important;
}
#order-standard_cart #passwordStrengthTextLabel {
    color: var(--nn-text-subtle) !important;
}

/* ---- FIX: "Already Registered" / "Create Account" toggle buttons ---------- */
#order-standard_cart #btnAlreadyRegistered,
#order-standard_cart #btnAlreadyRegistered.btn-info {
    background: rgba(22, 10, 10, 0.6) !important;
    border: 1px solid var(--nn-border-red) !important;
    color: var(--nn-text-muted) !important;
}
#order-standard_cart #btnAlreadyRegistered:hover,
#order-standard_cart #btnAlreadyRegistered.btn-info:hover {
    background: rgba(185, 28, 28, 0.15) !important;
    color: var(--nn-text-primary) !important;
}
#order-standard_cart #btnNewUserSignup,
#order-standard_cart #btnNewUserSignup.btn-warning {
    background: rgba(185, 28, 28, 0.2) !important;
    border: 1px solid var(--nn-border-red) !important;
    color: var(--nn-red-bright) !important;
}

/* ---- FIX: general text inside cart checkout ------------------------------- */
#order-standard_cart .already-registered p,
#order-standard_cart .already-registered {
    color: var(--nn-text-muted) !important;
}

/* =============================================================================
   PATCH v1.9 — Phone input, cart badge, Already Registered button
   ============================================================================= */

/* ---- FIX: intl-tel-input phone field padding ------------------------------ */
/* Patch v1.8's padding-left:40px !important on .prepend-icon inputs overrides */
/* the library's dynamic per-country padding (52–100px). Mirror ALL of the     */
/* library's iti-sdc-* rules WITH !important so they win per country selected. */

/* Hide the redundant .field-icon phone icon — the flag is the visual cue */
#order-standard_cart .prepend-icon:has(.intl-tel-input) .field-icon {
    display: none !important;
}

/* Base: allow-dropdown only */
#order-standard_cart .intl-tel-input.allow-dropdown input[type=tel],
#order-standard_cart .intl-tel-input.allow-dropdown input[type=text] {
    padding-left: 52px !important;
}

/* separate-dial-code variants — mirror all.css values with !important */
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel],
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=text] {
    padding-left: 66px !important;
}
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel],
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=text] {
    padding-left: 76px !important;
}
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel],
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=text] {
    padding-left: 74px !important;
}
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel],
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text] {
    padding-left: 84px !important;
}
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel],
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=text] {
    padding-left: 82px !important;
}
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel],
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text] {
    padding-left: 92px !important;
}
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel],
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=text] {
    padding-left: 90px !important;
}
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel],
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=text] {
    padding-left: 100px !important;
}

/* Dark theme for the flag dropdown button */
.intl-tel-input .selected-flag {
    background: rgba(20, 6, 6, 0.6) !important;
    border-right: 1px solid var(--nn-border-muted) !important;
    border-radius: var(--nn-radius-sm) 0 0 var(--nn-radius-sm) !important;
}
.intl-tel-input .selected-flag:hover,
.intl-tel-input .selected-flag:focus {
    background: rgba(185, 28, 28, 0.12) !important;
}

/* Dark theme for the country dropdown list */
.intl-tel-input .country-list {
    background: rgba(14, 5, 5, 0.97) !important;
    border: 1px solid var(--nn-border-red) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
    color: var(--nn-text-primary) !important;
}
.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
    background: rgba(185, 28, 28, 0.15) !important;
}
.intl-tel-input .country-list .divider {
    border-bottom-color: var(--nn-border-muted) !important;
}
.intl-tel-input .country-list .country .dial-code {
    color: var(--nn-text-subtle) !important;
}

/* ---- FIX: Cart badge (navbar shopping cart item count) -------------------- */
/* Override the generic .badge padding that makes it wide and rectangular.     */
.cart-btn .badge,
.cart-btn #cartItemCount,
a.cart-btn .badge.badge-info,
a.cart-btn #cartItemCount.badge-info {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    font-size: 0.6rem !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    background: var(--nn-red) !important;
    border-color: var(--nn-red) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* =============================================================================
   PATCH v1.10 — Registration page (#registration) form fixes
   ============================================================================= */

/* ---- Dark theme for registration fields ----------------------------------- */
#registration .field,
#registration .form-control {
    background: var(--nn-surface) !important;
    border-color: var(--nn-border-muted) !important;
    color: var(--nn-text-primary) !important;
}
#registration .field:focus,
#registration .form-control:focus {
    border-color: var(--nn-border-red) !important;
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.18) !important;
}
#registration .field-icon i {
    color: var(--nn-text-subtle) !important;
}

/* ---- FIX: Restore icon padding (global .form-control !important overrides  */
/* theme.css #registration .prepend-icon .field { padding-left: 36px } )      */
#registration .prepend-icon .field,
#registration .prepend-icon .form-control,
#registration .prepend-icon input.form-control,
#registration .prepend-icon select.form-control,
#registration .prepend-icon textarea.form-control {
    padding-left: 40px !important;
}

/* ---- FIX: intl-tel-input phone field on registration page ----------------- */
/* Same iti-sdc-* padding mirrors as #order-standard_cart in Patch v1.9        */
#registration .prepend-icon:has(.intl-tel-input) .field-icon {
    display: none !important;
}
#registration .intl-tel-input.allow-dropdown input[type=tel],
#registration .intl-tel-input.allow-dropdown input[type=text] {
    padding-left: 52px !important;
}
#registration .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel],
#registration .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=text] {
    padding-left: 66px !important;
}
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel],
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=text] {
    padding-left: 76px !important;
}
#registration .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel],
#registration .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=text] {
    padding-left: 74px !important;
}
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel],
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text] {
    padding-left: 84px !important;
}
#registration .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel],
#registration .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=text] {
    padding-left: 82px !important;
}
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel],
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text] {
    padding-left: 92px !important;
}
#registration .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel],
#registration .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=text] {
    padding-left: 90px !important;
}
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel],
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=text] {
    padding-left: 100px !important;
}

/* ---- Card dark theming on register page ----------------------------------- */
#registration .card {
    background: var(--nn-surface) !important;
    border: 1px solid rgba(185, 28, 28, 0.14) !important;
}

/* ---- Submit button -------------------------------------------------------- */
#registration .btn-primary {
    background: var(--nn-red) !important;
    border-color: var(--nn-red-deep) !important;
    color: #ffffff !important;
}
#registration .btn-primary:hover {
    background: var(--nn-red-bright) !important;
}

/* ---- Generate Password button --------------------------------------------- */
#registration .generate-password,
#registration .btn-default.generate-password {
    background: rgba(22, 10, 10, 0.6) !important;
    border: 1px solid var(--nn-border-red) !important;
    color: var(--nn-text-muted) !important;
}
#registration .generate-password:hover {
    background: rgba(185, 28, 28, 0.15) !important;
    color: var(--nn-text-primary) !important;
}

/* ---- Password strength meter ---------------------------------------------- */
#registration .password-strength-meter .progress {
    background: rgba(255, 255, 255, 0.08) !important;
}
#registration #passwordStrengthTextLabel {
    color: var(--nn-text-subtle) !important;
}

/* ---- select height fix (same as global) ----------------------------------- */
#registration select.field,
#registration select.form-control {
    height: auto !important;
    min-height: 36px !important;
}

/* =============================================================================
   PATCH v1.11 — View ticket dark theme
   ============================================================================= */

/* ---- "Posted by" bar ------------------------------------------------------ */
.view-ticket .posted-by {
    background: rgba(0, 0, 0, 0.25) !important;
    color: var(--nn-text-muted) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 10px 18px !important;
    font-size: 0.8125rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.view-ticket .posted-by .posted-by-name {
    color: var(--nn-text-primary) !important;
    font-weight: 600 !important;
}
/* Ticket body content */
.view-ticket .ticket-body,
.view-ticket .reply-body {
    padding: 16px 18px !important;
    color: var(--nn-text-secondary) !important;
    line-height: 1.65 !important;
}

/* ---- Reply dividers ------------------------------------------------------- */
.view-ticket .card-body { border-bottom-color: rgba(255, 255, 255, 0.04) !important; }
.view-ticket .attachments { border-top-color: rgba(255, 255, 255, 0.04) !important; }
.view-ticket .attachment-list li span {
    border-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

/* ---- Requestor type badges ------------------------------------------------ */
.requestor-type-owner {
    background-color: rgba(185, 28, 28, 0.7) !important;
    color: #fff !important;
}
.requestor-type-operator {
    background-color: rgba(30, 80, 120, 0.7) !important;
    color: #fff !important;
}
.requestor-type-registereduser {
    background-color: rgba(120, 80, 20, 0.7) !important;
    color: #fff !important;
}
.requestor-type-guest,
.requestor-type-subaccount,
.requestor-type-authorizeduser {
    background-color: rgba(60, 60, 60, 0.7) !important;
    color: #ccc !important;
}

/* =============================================================================
   PATCH v1.12 — Checkout "Choose Account" dark theme
   ============================================================================= */

/* ---- Account selector container ------------------------------------------ */
#order-standard_cart .account-select-container {
    border-right: 1px solid var(--nn-border-muted) !important;
}

/* ---- Each account tile (was #f6f6f6 + #eee border) ----------------------- */
#order-standard_cart .account-select-container div.account {
    background: rgba(20, 6, 6, 0.6) !important;
    border: 1px solid var(--nn-border-red) !important;
    border-right: 0 !important;
    color: var(--nn-text-secondary) !important;
}

/* ---- Active / selected account (was #fff white) -------------------------- */
#order-standard_cart .account-select-container div.account.active {
    background: rgba(185, 28, 28, 0.12) !important;
    border-color: rgba(185, 28, 28, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.25) inset !important;
}

/* ---- Account name and address text --------------------------------------- */
#order-standard_cart .account-select-container .address strong {
    color: var(--nn-text-primary) !important;
}
#order-standard_cart .account-select-container .address .small {
    color: var(--nn-text-muted) !important;
}

/* ---- Currency badge (label-info = Bootstrap blue, retheme to crimson) ---- */
#order-standard_cart .account-select-container .label.label-info {
    background-color: rgba(185, 28, 28, 0.6) !important;
    color: #fff !important;
    border: 1px solid rgba(185, 28, 28, 0.5) !important;
}

/* ---- "Create a New Account" row border ----------------------------------- */
#order-standard_cart .account-select-container div.account.border-bottom {
    border-bottom: 1px solid var(--nn-border-muted) !important;
    color: var(--nn-text-secondary) !important;
}

/* ---- Radio button label in account tile ---------------------------------- */
#order-standard_cart .account-select-container .radio-inline {
    color: var(--nn-text-secondary) !important;
}

/* =============================================================================
   PATCH v1.13 — Fix stuck modal-backdrop on checkout page
   ============================================================================= */
/* JS fix in footer.tpl: 150ms interval + hidden.bs.modal + show.bs.modal     */
/* hooks to remove orphaned .modal-backdrop divs Bootstrap fails to clean up. */

/* =============================================================================
   PATCH v1.14 — Professional invoice styling
   ============================================================================= */

/* ---- Base page ------------------------------------------------------------ */
body {
    background: #0a0505 !important;
}

/* ---- Outer container ------------------------------------------------------ */
.invoice-container {
    max-width: 860px !important;
    margin: 32px auto !important;
    padding: 0 !important;
    background: transparent !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    color: #e5e7eb !important;
}

/* ---- Header card ---------------------------------------------------------- */
.invoice-header {
    background: linear-gradient(135deg, #1a0a0a 0%, #2a0f0f 60%, #1f0808 100%) !important;
    border: 1px solid rgba(185, 28, 28, 0.25) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 28px 36px !important;
    margin: 0 !important;
    align-items: center !important;
}

.invoice-header img {
    max-height: 52px !important;
    width: auto !important;
}

.invoice-header h2 {
    color: #ffffff !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 4px !important;
}

.invoice-header h3 {
    color: #9ca3af !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* ---- Status badge --------------------------------------------------------- */
.invoice-container .invoice-status {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin: 0 0 6px !important;
}

.invoice-container .invoice-status .draft {
    display: inline-block !important;
    padding: 5px 16px !important;
    border-radius: 20px !important;
    background: rgba(107, 114, 128, 0.2) !important;
    border: 1px solid rgba(107, 114, 128, 0.5) !important;
    color: #9ca3af !important;
}

.invoice-container .invoice-status .unpaid {
    display: inline-block !important;
    padding: 5px 16px !important;
    border-radius: 20px !important;
    background: rgba(220, 38, 38, 0.15) !important;
    border: 1px solid rgba(220, 38, 38, 0.5) !important;
    color: #f87171 !important;
}

.invoice-container .invoice-status .paid {
    display: inline-block !important;
    padding: 5px 16px !important;
    border-radius: 20px !important;
    background: rgba(74, 222, 128, 0.12) !important;
    border: 1px solid rgba(74, 222, 128, 0.4) !important;
    color: #4ade80 !important;
}

.invoice-container .invoice-status .refunded,
.invoice-container .invoice-status .cancelled {
    display: inline-block !important;
    padding: 5px 16px !important;
    border-radius: 20px !important;
    background: rgba(107, 114, 128, 0.15) !important;
    border: 1px solid rgba(107, 114, 128, 0.4) !important;
    color: #9ca3af !important;
}

.invoice-container .invoice-status .collections {
    display: inline-block !important;
    padding: 5px 16px !important;
    border-radius: 20px !important;
    background: rgba(251, 146, 60, 0.15) !important;
    border: 1px solid rgba(251, 146, 60, 0.4) !important;
    color: #fb923c !important;
}

.invoice-container .small-text.due-text,
.invoice-container .small-text {
    color: #9ca3af !important;
    font-size: 0.875rem !important;
}

/* ---- Address / meta section ---------------------------------------------- */
.invoice-container hr {
    border: none !important;
    border-top: 1px solid rgba(185, 28, 28, 0.2) !important;
    margin: 0 !important;
}

.invoice-container .row.justify-content-sm-between,
.invoice-container .row {
    background: rgba(20, 6, 6, 0.5) !important;
    border-left: 1px solid rgba(185, 28, 28, 0.15) !important;
    border-right: 1px solid rgba(185, 28, 28, 0.15) !important;
    margin: 0 !important;
    padding: 20px 36px !important;
}

.invoice-container .invoice-col strong {
    color: #b91c1c !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.invoice-container address {
    color: #d1d5db !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ---- Invoice items card --------------------------------------------------- */
.invoice-container .card.bg-default {
    background: rgba(15, 5, 5, 0.8) !important;
    border: 1px solid rgba(185, 28, 28, 0.2) !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.invoice-container .card.bg-default .card-header {
    background: rgba(185, 28, 28, 0.12) !important;
    border-bottom: 1px solid rgba(185, 28, 28, 0.25) !important;
    padding: 14px 20px !important;
}

.invoice-container .card.bg-default .card-header h3 {
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* ---- Tables -------------------------------------------------------------- */
.invoice-container .table {
    color: #d1d5db !important;
    margin: 0 !important;
}

.invoice-container .table thead tr td,
.invoice-container .table thead tr th {
    background: rgba(25, 8, 8, 0.9) !important;
    color: #9ca3af !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid rgba(185, 28, 28, 0.2) !important;
    border-top: none !important;
}

.invoice-container .table tbody tr td {
    padding: 12px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #e5e7eb !important;
    vertical-align: middle !important;
}

.invoice-container .table tbody tr:hover td {
    background: rgba(185, 28, 28, 0.05) !important;
}

/* ---- Total rows ----------------------------------------------------------- */
.invoice-container td.total-row {
    background: rgba(185, 28, 28, 0.08) !important;
    border-top: 1px solid rgba(185, 28, 28, 0.2) !important;
    color: #f3f4f6 !important;
    font-size: 0.9rem !important;
}

.invoice-container .table tbody tr:last-child td.total-row {
    background: rgba(185, 28, 28, 0.15) !important;
    border-top: 1px solid rgba(185, 28, 28, 0.4) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
}

/* ---- Ledger card ---------------------------------------------------------- */
.invoice-container .card.w-100 {
    background: rgba(15, 5, 5, 0.8) !important;
    border: 1px solid rgba(185, 28, 28, 0.2) !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
    margin: 0 !important;
}

.invoice-container .card-title.bg-info {
    background: rgba(185, 28, 28, 0.12) !important;
    border-bottom: 1px solid rgba(185, 28, 28, 0.25) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 14px 20px !important;
    margin: 0 !important;
}

/* ---- Balance row ---------------------------------------------------------- */
.invoice-container .table tbody tr td.total-row[colspan] {
    background: rgba(185, 28, 28, 0.08) !important;
}

/* ---- Print / Download buttons -------------------------------------------- */
.invoice-container .btn-group .btn-default {
    background: rgba(22, 10, 10, 0.8) !important;
    border: 1px solid rgba(185, 28, 28, 0.35) !important;
    color: #d1d5db !important;
    font-size: 0.875rem !important;
    padding: 8px 18px !important;
    transition: all 200ms ease !important;
}

.invoice-container .btn-group .btn-default:hover {
    background: rgba(185, 28, 28, 0.2) !important;
    border-color: rgba(185, 28, 28, 0.6) !important;
    color: #ffffff !important;
}

/* ---- Back link ------------------------------------------------------------ */
.invoice-container ~ p a {
    color: #9ca3af !important;
    font-size: 0.875rem !important;
}
.invoice-container ~ p a:hover {
    color: #b91c1c !important;
}

/* =============================================================================
   PATCH v1.15 — Lighter card surfaces + wider container
   ============================================================================= */

/* ---- Wider Bootstrap container on large screens --------------------------- */
/* Bootstrap 4 xl default is 1140px — expand to give boxes more room.         */
@media (min-width: 1200px) {
    .container { max-width: 1400px !important; }
}
@media (min-width: 1600px) {
    .container { max-width: 1560px !important; }
}

/* =============================================================================
   PATCH v1.16 — Remove white focus outline on card/tile elements
   ============================================================================= */

/* Suppress browser default focus ring (white glow) on nav/card/tile elements.
   Chrome auto-selects white for the native focus ring on dark backgrounds —
   we kill outline, outline-color, and box-shadow on all three pseudo-classes. */

/* -- Broad anchor/button reset inside content areas ----------------------- */
.client-home-cards a:focus,
.client-home-cards a:focus-visible,
.client-home-cards a:focus-within,
.card a:focus,
.card a:focus-visible,
.card-sidebar a:focus,
.card-sidebar a:focus-visible,
.tiles .tile:focus,
.tiles .tile:focus-visible,
.list-group-item:focus,
.list-group-item:focus-visible,
.list-group-item-action:focus,
.list-group-item-action:focus-visible,
.list-group-item:focus-within,
.list-group-item-action:focus-within {
    outline: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
}

/* -- Prevent the card itself from gaining a white glow via :focus-within -- */
.card:focus-within {
    outline: none !important;
    box-shadow: var(--nn-shadow-card) !important;
}

/* -- Global anchor focus reset (browser UA stylesheet override) ------------ */
a.list-group-item:focus,
a.list-group-item-action:focus,
a.tile:focus {
    outline: 0 !important;
    outline-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* =============================================================================
   PATCH v1.17 — Spacing, Polish & White Outline Removal
   Improvements: section vertical rhythm, row gaps, card groups, input radii,
                 table cell padding boost, table thead alignment, stronger
                 border override to eliminate any lingering white outlines.
   ============================================================================= */

/* ---- Vertical rhythm: add breathing room between card rows ---------------- */
.row { margin-bottom: 0; }
.client-home-cards .row,
.primary-content .row {
    row-gap: 24px;
}
.mb-4 { margin-bottom: 28px !important; }
.mb-3 { margin-bottom: 20px !important; }

/* ---- Section headings get a little more air above them -------------------- */
.primary-content h2:not(:first-child),
.primary-content h3:not(:first-child) {
    margin-top: 8px;
}

/* ---- Card: ensure all corners use the new xl radius ----------------------- */
.card, .panel {
    border-radius: var(--nn-radius-xl) !important;
}
.card .card-header, .panel .panel-heading {
    border-radius: var(--nn-radius-xl) var(--nn-radius-xl) 0 0 !important;
}
.card .card-footer, .panel .panel-footer {
    border-radius: 0 0 var(--nn-radius-xl) var(--nn-radius-xl) !important;
}

/* ---- Action icon button tiles: more padding, better radius ---------------- */
.action-icon-btns a {
    border-radius: var(--nn-radius-xl) !important;
    padding: 20px 16px !important;
}

/* ---- Tiles: more padding for breathing room ------------------------------- */
.tiles .tile {
    padding: 24px 20px !important;
}

/* ---- Sidebar card header padding ----------------------------------------- */
.card-sidebar .card-header {
    padding: 14px 20px !important;
}

/* ---- Alerts: a little more padding --------------------------------------- */
.alert { padding: 16px 20px !important; }

/* ---- Dropdown items: compact padding ------------------------------------- */
.dropdown-item { padding: 7px 13px !important; font-size: 0.8125rem !important; }

/* ---- Table: remove all remaining harsh borders completely ----------------- */
/* Catches any Bootstrap base .table-bordered outlines we haven't killed yet  */
.table,
.table td,
.table th,
.table tr,
.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: rgba(255, 255, 255, 0.05) !important;
}
/* thead separator line is allowed but subtle */
.table thead th,
.table thead td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-top: none !important;
}
/* Remove outer table border entirely */
.table-bordered { border: none !important; }

/* ---- Inputs: enforce no white ring on any state --------------------------- */
input.form-control,
textarea.form-control,
select.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
.form-control {
    border-color: rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
}
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
.form-control:focus {
    border-color: rgba(185, 28, 28, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.10) !important;
    outline: none !important;
}

/* ---- Remove harsh default Bootstrap focus ring on buttons ----------------- */
.btn:focus,
.btn:focus-visible,
.btn:active:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18) !important;
}

/* ---- Panels: enforce card-level border radius where Bootstrap sets 3px ---- */
.panel { border-radius: var(--nn-radius-xl) !important; overflow: hidden; }
.panel-default { border-color: rgba(255, 255, 255, 0.06) !important; }

/* ---- List-group-items: cover kill-all-white-bg selectors ------------------ */
.card .list-group .list-group-item,
.card .list-group-item,
.card-sidebar .list-group .list-group-item,
.card-sidebar .list-group-item {
    padding: 13px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ---- Modal: match new radius --------------------------------------------- */
.modal-content { border-radius: var(--nn-radius-xl) !important; }
.modal-header { border-radius: var(--nn-radius-xl) var(--nn-radius-xl) 0 0 !important; padding: 22px 28px !important; }
.modal-body { padding: 28px !important; }
.modal-footer { border-radius: 0 0 var(--nn-radius-xl) var(--nn-radius-xl) !important; padding: 18px 28px !important; }

/* ---- Badge: pill shape already, just ensure font-weight consistency ------- */
.badge { font-weight: 600 !important; letter-spacing: 0.02em; }

/* ---- Page-level title area: more separation from top nav ------------------ */
.master-breadcrumb + * { margin-top: 0; }

/* ---- Well: more padding --------------------------------------------------- */
.well { padding: 20px 24px !important; }

/* ---- Form group spacing: add gap between fields --------------------------- */
.form-group { margin-bottom: 20px !important; }

/* ---- Table inside a card: remove double border on sides ------------------- */
.card > .table,
.card-body > .table,
.panel-body > .table {
    margin: -24px !important;
    width: calc(100% + 48px) !important;
    border-radius: 0 0 var(--nn-radius-xl) var(--nn-radius-xl);
    overflow: hidden;
}
.card > .table:first-child thead th:first-child,
.card-body > .table:first-child thead th:first-child,
.panel-body > .table:first-child thead th:first-child {
    border-radius: 0;
}

/* ---- Breadcrumb: slightly more padding ------------------------------------ */
.master-breadcrumb { padding: 9px 0 !important; }
.breadcrumb { padding: 5px 0 !important; }

/* ---- Nav tabs: more comfortable hit area ---------------------------------- */
.nav-tabs .nav-link { padding: 12px 20px !important; }

/* ---- Pagination: comfortable hit area ------------------------------------ */
.pagination .page-item .page-link { padding: 8px 14px !important; margin: 0 3px; }

/* ---- Scrollbar: slightly thicker for discoverability ---------------------- */
::-webkit-scrollbar { width: 7px; height: 7px; }

/* ---- .btn-outline-* variants: match new radius ---------------------------- */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info {
    border-radius: 8px !important;
    padding: 8px 20px !important;
}

/* ---- Wider table padding in PATCH v1.1 thead override --------------------- */
.table thead tr,
.table thead th,
.cart-table thead tr,
.cart-table thead th,
#shoppingcart thead tr,
#shoppingcart thead th,
.table > thead > tr > th,
.table > thead > tr > td {
    padding: 13px 20px !important;
}

/* =============================================================================
   PATCH v1.18 — Unified solid card surface (no header/footer strips)
   Ensures every Bootstrap/WHMCS panel variant inherits the flat card look.
   ============================================================================= */

/* All card/panel header and footer areas: no background tint, no divider color */
.card-header,
.card-footer,
.panel-heading,
.panel-footer,
.panel-default > .panel-heading,
.panel-default > .panel-footer {
    background: transparent !important;
    background-color: transparent !important;
}

/* Subtle white separator (not red, not colored — just a hair of depth) */
.card-header,
.panel-heading,
.panel-default > .panel-heading {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.card-footer,
.panel-footer,
.panel-default > .panel-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Card titles: bold, primary white, clean Inter stack */
.card-header .card-title,
.card-header .panel-title,
.card-header h1, .card-header h2,
.card-header h3, .card-header h4,
.card-header h5, .card-header h6,
.panel-heading .panel-title,
.panel-heading h1, .panel-heading h2,
.panel-heading h3, .panel-heading h4,
.panel-heading h5, .panel-heading h6 {
    color: #ffffff !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Sidebar card header: slightly smaller title, collapsible feel */
.card-sidebar .card-header .card-title,
.card-sidebar .card-header h3,
.card-sidebar .card-header h4,
.card-sidebar .card-header h5 {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* panel-default: no border */
.panel-default {
    border: none !important;
}

/* =============================================================================
   PATCH v1.19 — Multi-fix: Bootstrap border vars · KB search removal ·
                 Navbar borders · DataTables · Invoice table · List borders ·
                 Card hover cleanup · Action-icon hover cleanup
   ============================================================================= */

/* ---- 1. Bootstrap CSS variable overrides — kill all default light borders - */
:root {
    --bs-border-color:                rgba(255, 255, 255, 0.05);
    --bs-border-color-translucent:    rgba(255, 255, 255, 0.04);
    --bs-card-border-color:           transparent;
    --bs-card-border-width:           0px;
    --bs-card-cap-bg:                 transparent;
    --bs-card-bg:                     #351413;
    --bs-list-group-border-color:     rgba(255, 255, 255, 0.05);
    --bs-list-group-bg:               transparent;
    --bs-list-group-item-padding-y:   0.8125rem;
    --bs-list-group-item-padding-x:   1.25rem;
    --bs-table-border-color:          rgba(255, 255, 255, 0.05);
    --bs-table-color:                 #e5e5e5;
    --bs-table-bg:                    transparent;
    --bs-table-striped-bg:            rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg:              rgba(255, 255, 255, 0.04);
    --bs-input-border-color:          rgba(255, 255, 255, 0.07);
    --bs-input-bg:                    #160a0a;
    --bs-border-radius:               8px;
    --bs-border-radius-sm:            4px;
    --bs-border-radius-lg:            10px;
    --bs-border-radius-xl:            12px;
}

/* ---- 2. Belt-and-suspenders: strip all card/panel borders completely ------- */
.card, .card-header, .card-body, .card-footer,
.panel, .panel-heading, .panel-body, .panel-footer,
.card-sidebar,
.panel-default,
.panel-default > .panel-heading,
.panel-default > .panel-footer,
.list-group {
    border-color: transparent !important;
}
/* Panels need explicit border:none because Bootstrap 3 sets border shorthand */
.panel, .panel-default { border: none !important; }

/* ---- 3. Hide the knowledgebase search bar in the navbar ------------------- */
.navbar .input-group.search,
.navbar .input-group.search ~ *,
form.form-inline[action*="knowledgebase"],
.navbar form[action*="knowledgebase"],
/* fallback: any .search inside the header navbar wrapper */
#header .main-navbar-wrapper .search,
#header .navbar .search { display: none !important; }

/* ---- 4. Cart button and topbar elements — no Bootstrap white borders ------ */
.cart-btn,
.cart-btn:focus,
.cart-btn:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Navbar brand, cart, and any remaining nav items */
.navbar .btn,
.navbar a.btn,
.topbar .input-group-text,
.navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* ---- 5. Remove hover lift/transform on home action tiles and product cards - */
.action-icon-btns a:hover,
a[class*="card-accent-"]:hover,
.tiles .tile:hover,
.package:hover,
.product-block:hover,
.pricingcontainer .panel:hover,
.landing-page .product-options .item:hover,
#order-standard_cart .products .product:hover,
.pricing-card:hover,
.pricing-card:has(.plan-button:hover) {
    transform: none !important;
}

/* ---- 6. List-group item borders — aggressive override -------------------- */
/* Bootstrap 5 and Bootstrap 3 both set various border shorthands */
.list-group-item,
.list-group-item:first-child,
.list-group-item:last-child,
.card .list-group-item,
.card-sidebar .list-group-item,
.client-home-cards .list-group-item {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}
.list-group-item:last-child { border-bottom: none !important; }

/* ---- 7. DataTables — invoice list, billing, services tables --------------- */
.dataTables_wrapper { color: var(--nn-text-secondary) !important; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--nn-text-muted) !important; font-size: 0.8125rem; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: #160a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: var(--nn-text-primary) !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    outline: none !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: rgba(185, 28, 28, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.10) !important;
}

/* DataTable itself */
table.dataTable {
    background: var(--nn-surface) !important;
    border-collapse: collapse !important;
    border: none !important;
    border-color: transparent !important;
}
table.dataTable thead tr { background: rgba(0, 0, 0, 0.35) !important; }
table.dataTable thead th,
table.dataTable thead td {
    background: rgba(0, 0, 0, 0.35) !important;
    color: var(--nn-text-muted) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    padding: 12px 18px !important;
}
table.dataTable tbody tr {
    background: var(--nn-surface) !important;
    border: none !important;
}
table.dataTable tbody tr:nth-child(odd)  { background: var(--nn-surface) !important; }
table.dataTable tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.12) !important; }
table.dataTable tbody tr:hover           { background: rgba(185, 28, 28, 0.08) !important; }
table.dataTable tbody td,
table.dataTable tbody th {
    color: var(--nn-text-secondary) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 13px 18px !important;
    vertical-align: middle !important;
    background: transparent !important;
}
/* DataTables sort arrows — hide default ugly icons */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { opacity: 0.4; }

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--nn-text-muted) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
    font-size: 0.8125rem !important;
    transition: all 200ms ease !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(185, 28, 28, 0.15) !important;
    border-color: rgba(185, 28, 28, 0.35) !important;
    color: var(--nn-text-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--nn-red) !important;
    border-color: var(--nn-red) !important;
    color: #ffffff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--nn-text-subtle) !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* ---- 8. Invoice list page — wrapper and table container ------------------- */
/* The invoice list is a plain card with a DataTable inside — covered above.  */
/* Ensure the card wrapping the table also has no inner borders.              */
.client-billing .card,
.client-invoices .card,
#invoicesPanel .card,
[id*="invoice"] .card {
    box-shadow: var(--nn-shadow-card) !important;
}

/* ---- 9. Invoice detail page (PATCH v1.14) — match card color -------------- */
/* Replace the complex dark gradients with the unified #351413 surface        */
.invoice-container {
    background: transparent !important;
}
.invoice-header {
    background: rgba(0, 0, 0, 0.30) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--nn-radius-xl) var(--nn-radius-xl) 0 0 !important;
    padding: 24px 28px !important;
}
.invoice-header h2 {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 2px !important;
}
.invoice-header h3 {
    color: var(--nn-text-muted) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    margin: 0 !important;
}
/* Invoice rows — use surface color, no heavy gradient */
.invoice-container .row.justify-content-sm-between,
.invoice-container .row {
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    margin: 0 !important;
    padding: 18px 28px !important;
}
/* Invoice items card */
.invoice-container .card.bg-default {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}
.invoice-container .card.bg-default .card-header {
    background: rgba(0, 0, 0, 0.20) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 12px 20px !important;
}
/* Invoice table */
.invoice-container .table thead tr td,
.invoice-container .table thead tr th {
    background: rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: none !important;
    color: var(--nn-text-muted) !important;
    padding: 11px 18px !important;
}
.invoice-container .table tbody tr td {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 12px 18px !important;
    color: var(--nn-text-secondary) !important;
}
.invoice-container .table tbody tr:hover td {
    background: rgba(185, 28, 28, 0.06) !important;
}
/* Invoice total rows */
.invoice-container td.total-row {
    background: rgba(0, 0, 0, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--nn-text-primary) !important;
}
.invoice-container .table tbody tr:last-child td.total-row {
    background: rgba(185, 28, 28, 0.12) !important;
    border-top: 1px solid rgba(185, 28, 28, 0.25) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}
/* Ledger card */
.invoice-container .card.w-100 {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 0 var(--nn-radius-xl) var(--nn-radius-xl) !important;
}
/* Invoice section separator hr */
.invoice-container hr {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin: 0 !important;
}

/* ---- 10. Remove action-icon-btns border on hover so no border flicker ----- */
.action-icon-btns a {
    border: none !important;
}
.action-icon-btns a:hover {
    border: none !important;
    box-shadow: var(--nn-shadow-card-hover) !important;
}

/* ---- 11. Tiles — no border between them ----------------------------------- */
.tiles { border: none !important; }
.tiles .tile { border-right: none !important; }

/* =============================================================================
   PATCH v1.20 — Ticket page: eliminate all remaining white/light borders
   Bootstrap 3 doesn't use CSS variables, so we need direct CSS rules here.
   ============================================================================= */

/* ---- 1. Ticket page outer cards and panels -------------------------------- */
.view-ticket .card,
.view-ticket .panel,
.view-ticket .panel-default,
.view-ticket .well,
#ticket .card,
#ticket .panel,
#supportTickets .card {
    border: none !important;
    border-color: transparent !important;
}

/* ---- 2. Ticket reply form — strip Bootstrap 3 form-control borders -------- */
/* The global .form-control rule covers inputs, but Bootstrap 3 sometimes
   applies border via the .input-group or .input-group-addon directly */
.view-ticket .input-group-addon,
.view-ticket .input-group-text,
#replyDetails .input-group-addon,
#replyDetails .input-group-text,
.open-ticket .input-group-addon,
.open-ticket .input-group-text {
    background: rgba(0, 0, 0, 0.30) !important;
    border: 1px solid rgba(185, 28, 28, 0.25) !important;
    color: var(--nn-text-muted) !important;
}

/* ---- 3. Ticket reply card (and any Bootstrap 3 well fallback) ------------ */
.view-ticket .well {
    background: rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--nn-radius-lg) !important;
}

/* ---- 4. Ticket table/thread layout — no Bootstrap 3 table borders --------- */
.view-ticket table,
.view-ticket table td,
.view-ticket table th,
.view-ticket table tr,
#ticket table,
#ticket table td,
#ticket table th {
    border: none !important;
    border-color: transparent !important;
}

/* ---- 5. md-editor — ensure the border reads as red not white -------------- */
/* Already styled, but override any stray !important from Bootstrap 3 all.css */
.md-editor,
.md-editor .md-header,
.md-editor .md-footer {
    border-left-color: rgba(185, 28, 28, 0.35) !important;
    border-right-color: rgba(185, 28, 28, 0.35) !important;
}
/* The inner textarea/preview should have no side borders (only top/bottom) */
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
    border-left: none !important;
    border-right: none !important;
}

/* ---- 6. Ticket attachment section ---------------------------------------- */
.view-ticket .attachments,
#replyDetails .attachments,
.ticket-attachments {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    background: transparent !important;
}
/* Custom file input — override Bootstrap 3 light border */
.view-ticket .custom-file-label,
#replyDetails .custom-file-label,
.open-ticket .custom-file-label {
    background: var(--nn-bg-input) !important;
    border: 1px solid rgba(185, 28, 28, 0.25) !important;
    color: var(--nn-text-muted) !important;
    border-radius: var(--nn-radius-md) !important;
}

/* ---- 7. Horizontal rules on the ticket page — make them invisible --------- */
.view-ticket hr,
#ticket hr,
.open-ticket hr {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* ---- 8. Alert boxes on ticket page — keep info/success but strip borders -- */
.view-ticket .alert,
#ticket .alert {
    border-left-width: 3px !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* ---- 9. Nav-tabs on ticket page (e.g. Write/Preview tabs on reply) -------- */
.view-ticket .nav-tabs,
.view-ticket .nav-tabs .nav-item,
#replyDetails .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.view-ticket .nav-tabs .nav-link,
#replyDetails .nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
}
.view-ticket .nav-tabs .nav-link.active,
#replyDetails .nav-tabs .nav-link.active {
    border-bottom: 2px solid var(--nn-red) !important;
    background: transparent !important;
    color: var(--nn-text-primary) !important;
}

/* ---- 10. Ticket list table (clientarea/supporttickets) -------------------- */
.client-support-tickets .table,
.client-support-tickets table {
    border: none !important;
}
.client-support-tickets .table td,
.client-support-tickets .table th,
.client-support-tickets table td,
.client-support-tickets table th {
    border-color: rgba(255, 255, 255, 0.04) !important;
    border-left: none !important;
    border-right: none !important;
}

/* =============================================================================
   PATCH v1.21 — Invoice coloring tidy-up
   Fix: outer card white border · link colors · payment select · label hues
   ============================================================================= */

/* ---- 1. Kill the outer card border wrapping the invoice page -------------- */
/* WHMCS wraps the invoice in a .card on the clientarea invoice view          */
body .invoice-container ~ .card,
body .invoice-container,
.client-invoices .card,
.client-billing .card,
[class*="invoice"] > .card,
[class*="invoice"] .card-body > .card {
    border: none !important;
    box-shadow: var(--nn-shadow-card) !important;
}
/* The invoice itself is often inside a .main-body > .card — strip that too */
.main-body .card:has(.invoice-container),
.main-body .card:has(.invoice-header) {
    border: none !important;
    background: var(--nn-surface) !important;
    padding: 0 !important;
}

/* ---- 2. Link colors inside invoice — kill browser-default teal/blue ------- */
.invoice-container a,
.invoice-container address a,
.invoice-container p a,
.invoice-container .invoice-col a,
.invoice-container .row a {
    color: var(--nn-text-secondary) !important;
    text-decoration: none !important;
}
.invoice-container a:hover {
    color: var(--nn-text-primary) !important;
    text-decoration: none !important;
}

/* ---- 3. Payment method select / dropdown (PayPal, Stripe, etc.) ----------- */
.invoice-container select,
.invoice-container select.form-control,
.invoice-container .payment-method select,
.invoice-container .gateway-select,
#frmPayInvoice select,
#gatewayRadios select,
.payment-gateway-select {
    background: #160a0a !important;
    background-color: #160a0a !important;
    border: 1px solid rgba(185, 28, 28, 0.30) !important;
    color: var(--nn-text-secondary) !important;
    border-radius: var(--nn-radius-md) !important;
    padding: 6px 12px !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    outline: none !important;
}
.invoice-container select:focus,
#frmPayInvoice select:focus {
    border-color: rgba(185, 28, 28, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.10) !important;
}
/* PayPal / gateway option items */
.invoice-container select option {
    background: #160a0a !important;
    color: var(--nn-text-secondary) !important;
}

/* ---- 4. Invoice section labels ("INVOICED TO", "PAY TO", etc.) ------------ */
/* Tone down from bright red to a more professional muted red-tint label      */
.invoice-container .invoice-col strong,
.invoice-container .col strong:first-child,
.invoice-container strong.text-uppercase {
    color: rgba(185, 28, 28, 0.85) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

/* ---- 5. Address/meta section rows — unified subtle background ------------- */
/* Give the INVOICED TO / PAY TO / DATE / METHOD blocks a consistent surface  */
.invoice-container .row.justify-content-sm-between,
.invoice-container .invoice-addresses,
.invoice-container .invoice-meta {
    background: rgba(0, 0, 0, 0.18) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 20px 28px !important;
}

/* ---- 6. Address text — readable light grey, not default black ------------- */
.invoice-container address,
.invoice-container .invoice-col address,
.invoice-container .invoice-col p {
    color: #d1d5db !important;
    font-style: normal !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* ---- 7. "UNPAID" badge border — use theme red, not white outline ---------- */
.invoice-container .invoice-status .unpaid {
    border: 1px solid rgba(220, 38, 38, 0.55) !important;
    background: rgba(220, 38, 38, 0.12) !important;
    color: #fca5a5 !important;
}

/* ---- 8. "Pay Now" button — ensure it uses our flat red style -------------- */
.invoice-container .btn-success,
#frmPayInvoice .btn-success,
#payNowBtn,
a.btn[href*="payinvoice"],
.invoice-container .btn-primary {
    background: #b91c1c !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 7px 18px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: background 200ms ease, box-shadow 200ms ease !important;
}
.invoice-container .btn-success:hover,
#frmPayInvoice .btn-success:hover,
#payNowBtn:hover {
    background: #dc2626 !important;
    box-shadow: 0 2px 14px rgba(185, 28, 28, 0.40) !important;
}

/* ---- 9. Print / Download buttons — consistent with rest of theme ---------- */
.invoice-container .btn-default,
.invoice-container .btn-group .btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--nn-text-secondary) !important;
    border-radius: 7px !important;
    font-size: 0.8125rem !important;
    padding: 7px 16px !important;
}
.invoice-container .btn-default:hover,
.invoice-container .btn-group .btn:hover {
    background: rgba(185, 28, 28, 0.15) !important;
    border-color: rgba(185, 28, 28, 0.40) !important;
    color: #ffffff !important;
}

/* =============================================================================
   PATCH v1.22 — Invoice: give it the card surface so it stands out
   All previous patches left invoice-container transparent; this gives it the
   same #351413 solid surface that all cards use, with shadow and radius.
   ============================================================================= */

/* ---- The invoice container itself becomes the card surface ---------------- */
.invoice-container {
    background: #351413 !important;
    border-radius: var(--nn-radius-xl) !important;
    box-shadow: var(--nn-shadow-card) !important;
    overflow: hidden !important;
    border: none !important;
}

/* ---- Header: slightly darker overlay to distinguish it -------------------- */
.invoice-header {
    background: rgba(0, 0, 0, 0.28) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* ---- Address/meta rows: very subtle overlay on the card surface ----------- */
.invoice-container .row.justify-content-sm-between,
.invoice-container .invoice-addresses,
.invoice-container .invoice-meta,
.invoice-container .row {
    background: rgba(0, 0, 0, 0.12) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 20px 28px !important;
    margin: 0 !important;
}

/* ---- Invoice items card: transparent (card surface shows through) --------- */
.invoice-container .card.bg-default {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.invoice-container .card.bg-default .card-header {
    background: rgba(0, 0, 0, 0.22) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 13px 20px !important;
}

/* ---- Ledger card: transparent, with top separator ------------------------- */
.invoice-container .card.w-100 {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* ---- Section hr lines: invisible hairlines -------------------------------- */
.invoice-container hr {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    margin: 0 !important;
}

/* ---- Any extra outer card wrapping the invoice: remove it entirely -------- */
.main-body .card:has(.invoice-container),
.main-body .card:has(.invoice-header),
body > .container .card:has(.invoice-container) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* =============================================================================
   PATCH v1.23 — Invoice: reduce redness + payment gateway buttons
   Overrides v1.21/v1.22 red-heavy choices; adds .nn-gateway-btn pill UI.
   ============================================================================= */

/* ---- 1. Invoice surface: near-black with barely-there warmth -------------- */
/* #351413 was too aggressively maroon; #151010 reads as dark-charcoal card   */
.invoice-container {
    background: #151010 !important;
}

/* ---- 2. Section labels: muted neutral slate, not red ---------------------- */
/* "INVOICED TO" / "PAY TO" / "INVOICE DATE" / "PAYMENT METHOD" labels       */
.invoice-container .invoice-col strong,
.invoice-container .col strong:first-child,
.invoice-container strong.text-uppercase,
.invoice-container [data-role="paymethod-info"] strong {
    color: #6b7888 !important;
}

/* ---- 3. Card-header section title ("INVOICE ITEMS", "LEDGER") ------------ */
.invoice-container .card-header strong,
.invoice-container .card-title strong,
.invoice-container .card-title {
    color: #c4cad6 !important;
}

/* ---- 4. Table column headings -------------------------------------------- */
.invoice-container .table thead tr td strong,
.invoice-container .table thead tr th strong {
    color: #8a939f !important;
}

/* ---- 5. Hairline separator: very subtle white, no red tint ---------------- */
.invoice-container hr {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ---- 6. Gateway payment buttons ------------------------------------------ */
.nn-gateway-btns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    justify-content: flex-end !important;
    margin-top: 10px !important;
}

/* Each button has a radio-dot pseudo-element on the left */
.nn-gateway-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #7b8799 !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: background 150ms ease, border-color 150ms ease,
                color 150ms ease, box-shadow 150ms ease !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    line-height: 1 !important;
    position: relative !important;
}

/* Radio dot */
.nn-gateway-btn::before {
    content: '' !important;
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    border: 1.5px solid #4b5563 !important;
    flex-shrink: 0 !important;
    transition: border-color 150ms ease, background 150ms ease,
                box-shadow 150ms ease !important;
}

.nn-gateway-btn:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #c9d0db !important;
}
.nn-gateway-btn:hover::before {
    border-color: #9ca3af !important;
}

/* Selected state — crimson dot fill */
.nn-gateway-btn.active {
    background: rgba(185, 28, 28, 0.14) !important;
    border-color: rgba(185, 28, 28, 0.55) !important;
    color: #fca5a5 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.20) !important;
}
.nn-gateway-btn.active::before {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.55) !important;
}

/* ---- Print / Download button group: breathing room ------------------------ */
.invoice-container .float-right.btn-group.d-print-none,
.invoice-container .btn-group.d-print-none {
    margin: 20px 28px 28px !important;
}

/* ---- Total / Balance rows: neutral, not red ------------------------------- */
/* Overrides the rgba(185,28,28) last-child rule from v1.14                   */
.invoice-container .table tbody tr:last-child td.total-row,
.invoice-container .table tbody tr:last-child td.total-row:last-child {
    background: rgba(255, 255, 255, 0.055) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #e5e7eb !important;
    font-weight: 600 !important;
}

/* =============================================================================
   PATCH v1.24 — "Pay Invoice Here" CTA button revamp
   ============================================================================= */

@keyframes nn-pay-pulse {
    0%, 100% { box-shadow: 0 6px 28px rgba(185, 28, 28, 0.55),
                            0 0 0 1px rgba(220, 38, 38, 0.35),
                            inset 0 1px 0 rgba(255,255,255,0.10); }
    50%       { box-shadow: 0 8px 40px rgba(220, 38, 38, 0.75),
                            0 0 0 3px rgba(220, 38, 38, 0.22),
                            inset 0 1px 0 rgba(255,255,255,0.10); }
}

.payment-btn-container {
    margin-top: 14px !important;
}

/* The button itself */
.payment-btn-container a,
.payment-btn-container button,
.payment-btn-container .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 14px 40px !important;
    min-width: 220px !important;
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 45%, #b91c1c 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    animation: nn-pay-pulse 2.6s ease-in-out infinite !important;
    transition: transform 200ms ease, filter 200ms ease !important;
}

/* Shimmer sweep on hover */
.payment-btn-container a::after,
.payment-btn-container button::after,
.payment-btn-container .btn::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: -75% !important;
    width: 50% !important; height: 100% !important;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%
    ) !important;
    transform: skewX(-20deg) !important;
    transition: left 500ms ease !important;
}
.payment-btn-container a:hover::after,
.payment-btn-container button:hover::after,
.payment-btn-container .btn:hover::after {
    left: 130% !important;
}

.payment-btn-container a:hover,
.payment-btn-container button:hover,
.payment-btn-container .btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.12) !important;
    animation-play-state: paused !important;
}

/* =============================================================================
   PATCH v1.25 — Product Details: dark-theme product-status card + tab container
   ============================================================================= */

/* WHMCS sets background:#EFEFEF on .product-icon — kill it */
.product-icon {
    background: transparent !important;
    background-color: transparent !important;
    padding: 22px 16px 16px !important;
    color: var(--nn-text-primary) !important;
}
.product-icon h3 {
    color: var(--nn-text-primary) !important;
    margin: 10px 0 4px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}
.product-icon h4 {
    color: var(--nn-text-muted) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    margin: 0 !important;
}
.product-status {
    background: rgba(20, 7, 7, 0.80) !important;
    border: 1px solid var(--nn-border-subtle) !important;
    border-radius: var(--nn-radius-lg) !important;
    overflow: hidden !important;
}
.product-status .fa-stack .fa-circle,
.product-status .fa-stack .fa-stack-2x {
    color: var(--nn-red-deep) !important;
}
.product-status .fa-stack .fa-stack-1x.fa-inverse {
    color: #ffffff !important;
}
.product-status-text {
    padding: 8px 12px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.085em !important;
    text-transform: uppercase !important;
}
.product-status-active .product-status-text {
    background: rgba(22, 101, 52, 0.38) !important;
    color: #4ade80 !important;
    border-top: 1px solid rgba(74, 222, 128, 0.20) !important;
}
.product-status-active { border-color: rgba(74, 222, 128, 0.18) !important; }
.product-status-suspended .product-status-text {
    background: rgba(120, 53, 15, 0.38) !important;
    color: #fb923c !important;
    border-top: 1px solid rgba(251, 146, 60, 0.20) !important;
}
.product-status-suspended { border-color: rgba(251, 146, 60, 0.18) !important; }
.product-status-terminated .product-status-text {
    background: rgba(127, 29, 29, 0.38) !important;
    color: #f87171 !important;
    border-top: 1px solid rgba(248, 113, 113, 0.20) !important;
}
.product-status-terminated { border-color: rgba(248, 113, 113, 0.18) !important; }
.product-status-cancelled .product-status-text {
    background: rgba(30, 30, 30, 0.38) !important;
    color: #9ca3af !important;
    border-top: 1px solid rgba(156, 163, 175, 0.15) !important;
}
.product-details .col-md-6.text-center h4 {
    color: var(--nn-text-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-top: 14px !important;
    margin-bottom: 2px !important;
}
.product-details .col-md-6.text-center { color: var(--nn-text-secondary) !important; }
.product-details-tab-container,
.tab-content.bg-white.product-details-tab-container {
    background: var(--nn-surface) !important;
    background-color: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-subtle) !important;
    border-top: none !important;
    border-radius: 0 0 var(--nn-radius-md) var(--nn-radius-md) !important;
    color: var(--nn-text-secondary) !important;
    padding: 20px !important;
}
.product-details-tab-container .col-sm-5 strong,
.product-details-tab-container strong { color: var(--nn-text-muted) !important; }
.product-details-tab-container .col-sm-7,
.product-details-tab-container .tab-pane { color: var(--nn-text-secondary) !important; }

/* =============================================================================
   PATCH v1.26 — Account pages: table th rows + global label badge recoloring
   Fixes: .label.label-info teal "Owner" badge; plain <th> (not in <thead>)
          light background; .btn-default sizing on account tables.
   ============================================================================= */

/* ---- Plain <th> header rows (not wrapped in <thead>) ---------------------- */
/* Templates like account-paymentmethods.tpl and account-user-management.tpl  */
/* put header <tr> directly in <table>, so .table thead th rules miss them.   */
.table tr th {
    background: rgba(0, 0, 0, 0.35) !important;
    color: var(--nn-text-muted) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    padding: 11px 16px !important;
}

/* ---- Global Bootstrap .label badge recoloring ----------------------------- */
.label { border-radius: 4px !important; padding: 3px 8px !important; }
.label.label-info, span.label-info {
    background-color: rgba(185, 28, 28, 0.55) !important;
    color: #fca5a5 !important;
}
.label.label-primary, span.label-primary {
    background-color: var(--nn-red) !important;
    color: #ffffff !important;
}
.label.label-success, span.label-success {
    background-color: rgba(22, 101, 52, 0.55) !important;
    color: #4ade80 !important;
}
.label.label-warning, span.label-warning {
    background-color: rgba(120, 53, 15, 0.55) !important;
    color: #fb923c !important;
}
.label.label-danger, span.label-danger {
    background-color: rgba(127, 29, 29, 0.55) !important;
    color: #f87171 !important;
}
.label.label-default, span.label-default {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--nn-text-muted) !important;
}

/* =============================================================================
   PATCH v1.26 — Support PIN sidebar widget — fix squished layout
   The pin is rendered as individual digit boxes by bootstrap-pincode-input.js.
   The addon injects inline style="background-color:white" on each box, which
   is jarring on the dark theme. The lagom2 template also uses negative bleed
   margins on the button row that were sized for 15 px panel padding; our
   theme uses 24 px so they over-shoot and squish content.
   ============================================================================= */

/* Title above the PIN boxes */
.panel-client-details .panel-body > strong:first-child {
    display: block !important;
    margin-bottom: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--nn-text-muted) !important;
}

/* PIN box container — centred, shrink-wraps the boxes */
.pincode-input-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    margin-bottom: 14px !important;
}

/* Each individual digit box — fixed square size */
.pincode-input-text,
.form-control.pincode-input-text {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 0 !important;
    float: none !important;       /* override float:left */
    margin-top: 0 !important;     /* override the 10px top gap */
    margin-right: 0 !important;
    padding: 8px 0 !important;
    text-align: center !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    background-color: var(--nn-bg-input) !important;   /* override inline white */
    color: var(--nn-text-primary) !important;
    border: 1px solid rgba(185, 28, 28, 0.25) !important;
    border-right-width: 0 !important;
}
.pincode-input-text.first {
    border-radius: var(--nn-radius-md) 0 0 var(--nn-radius-md) !important;
}
.pincode-input-text.mid {
    border-radius: 0 !important;
}
.pincode-input-text.last {
    border-radius: 0 var(--nn-radius-md) var(--nn-radius-md) 0 !important;
    border-right-width: 1px !important;
}

/* Button row — reset the negative bleed margins from the lagom2 template */
.panel-client-details .panel-body .input-group {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
}
.panel-client-details .panel-body .input-group-btn {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}
.panel-client-details .panel-body .dpl_btnPin {
    flex: 1 !important;
    margin-left: 0 !important;
    padding: 8px 6px !important;
    font-size: 0.875rem !important;
}

/* =============================================================================
   PATCH v1.27 — Unpaid invoice banner link readability
   The global a { color: var(--nn-red-bright) !important } rule turns the
   "View Invoices" button text red against a red background. Override it here
   with a high-specificity rule so white text is always used on the button.
   ============================================================================= */
#nn-invoice-banner a.nn-banner-link,
#nn-invoice-banner a.nn-banner-link:link,
#nn-invoice-banner a.nn-banner-link:visited {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
}

/* =============================================================================
   PATCH v1.28 — Addon / store order page dark theme fixes
   Two pages need fixing:
   1. store/order.tpl — billing cycle tabs and domain tab content have light bgs
      from theme.css (.store-domain-tabs li a = #f9f9f9, li.active a = #fff)
   2. orderforms/digit-of/addons.tpl & configureproduct.tpl — product cards and
      the product-info banner have white/light backgrounds in all.css.
      form-theme-dark.css tries to override them via CSS variables (--secondary-bg
      etc.) that are never defined, so the all.css #fff values win instead.
   ============================================================================= */

/* ── Store order page: billing-cycle tab nav links ─────────────────────── */
.store-order-container .store-domain-tabs li a,
.store-order-container .store-domain-tabs .nav-link {
    background-color: rgba(22, 10, 10, 0.5) !important;
    border-color: var(--nn-border-subtle) !important;
    color: var(--nn-text-secondary) !important;
}
.store-order-container .store-domain-tabs li.active a,
.store-order-container .store-domain-tabs .nav-link.active {
    background-color: rgba(60, 15, 15, 0.8) !important;
    border-bottom-color: transparent !important;
    color: var(--nn-text-primary) !important;
}
.store-order-container .store-domain-tabs li a:hover,
.store-order-container .store-domain-tabs .nav-link:hover {
    background-color: rgba(50, 12, 12, 0.7) !important;
    color: var(--nn-text-primary) !important;
}

/* ── Store order page: domain tab content area ─────────────────────────── */
.store-order-container .store-domain-tab-content,
.tab-content.store-domain-tab-content {
    background-color: rgba(22, 10, 10, 0.5) !important;
    border-color: var(--nn-border-subtle) !important;
    color: var(--nn-text-secondary) !important;
}

/* ── Store order page: product name & description text ─────────────────── */
.store-order-container h2,
.store-order-container p {
    color: var(--nn-text-secondary) !important;
}
.store-order-container h2 { color: var(--nn-text-primary) !important; }

/* ── digit-of order form: product cards (addons.tpl / configureproduct.tpl) */
#order-digit-of .products .product {
    background: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-muted) !important;
    border-radius: var(--nn-radius-md) !important;
}
#order-digit-of .products .product header {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    border-radius: var(--nn-radius-md) var(--nn-radius-md) 0 0 !important;
}
#order-digit-of .products .product header span {
    color: var(--nn-text-primary) !important;
}
#order-digit-of .products .product div.product-desc,
#order-digit-of .products .product div.product-desc-full-width {
    color: var(--nn-text-muted) !important;
}
#order-digit-of .products .product div.product-pricing span.price {
    color: var(--nn-text-primary) !important;
}
#order-digit-of .products .product footer {
    background: transparent !important;
}

/* ── digit-of order form: product-info description banner ──────────────── */
#order-digit-of .product-info {
    background-color: rgba(22, 10, 10, 0.5) !important;
    border-top: 1px solid var(--nn-border-subtle) !important;
    border-bottom: 1px solid var(--nn-border-subtle) !important;
    color: var(--nn-text-secondary) !important;
}
#order-digit-of .product-info .product-title {
    color: var(--nn-text-primary) !important;
}

/* ── digit-of order form: addon panels (configureproduct.tpl) ───────────── */
#order-digit-of .panel-addon {
    background-color: var(--nn-surface) !important;
    border: 1px solid var(--nn-border-muted) !important;
    border-radius: var(--nn-radius-md) !important;
}
#order-digit-of .panel-addon .panel-body label {
    color: var(--nn-text-primary) !important;
}
#order-digit-of .panel-addon .panel-price {
    background-color: rgba(0, 0, 0, 0.25) !important;
    color: var(--nn-text-secondary) !important;
    border-top: 1px solid var(--nn-border-subtle) !important;
}
#order-digit-of .panel-addon .panel-add {
    background-color: var(--nn-red) !important;
    color: #ffffff !important;
    border-radius: 0 0 var(--nn-radius-md) var(--nn-radius-md) !important;
}
#order-digit-of .panel-addon-selected {
    border-color: var(--nn-red) !important;
    box-shadow: 0 0 8px rgba(185, 28, 28, 0.3) !important;
}
#order-digit-of .panel-addon-selected .panel-add {
    background-color: var(--nn-red-deep) !important;
}