/* =====================================================
   HEXANE DARK THEME
   True dark mode with red accents
   ===================================================== */


/* FA5 Pro → FA6 Free fallback: map fal/fad to free equivalents */
.fal, .fa-light {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}
.fad, .fa-duotone {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

html {
    font-size: 15px;
}

/* Wider container — fill more of the screen on large displays */
@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1440px;
    }
}

/* =====================================================
   1. CSS VARIABLES
   ===================================================== */

:root {
    --white: #fff;

    /* True neutral dark palette — NO red tint */
    --neutral-50: #09090b;
    --neutral-100: #111113;
    --neutral-200: #18181b;
    --neutral-300: #27272a;
    --neutral-400: #3f3f46;
    --neutral-500: #52525b;
    --neutral-600: #71717a;
    --neutral-700: #a1a1aa;
    --neutral-800: #d4d4d8;
    --neutral-900: #e4e4e7;
    --neutral-950: #fafafa;

    /* Red primary palette */
    --primary-50: #1a0507;
    --primary-100: #2d0a0e;
    --primary-200: #4a1118;
    --primary-300: #7a1d28;
    --primary-400: #991b25;
    --primary-500: #b91c28;
    --primary-600: #dc2626;
    --primary-700: #ef4444;
    --primary-800: #f87171;
    --primary-900: #fca5a5;
    --primary-950: #fde2e2;

    /* Primary semantic */
    --primary: #dc2626;
    --primary-lifted: #ef4444;
    --primary-accented: #b91c1c;

    /* Secondary */
    --secondary: #52525b;
    --secondary-lifted: #71717a;
    --secondary-accented: #3f3f46;

    /* Success */
    --success: #22c55e;
    --success-lifted: #16a34a;
    --success-accented: #15803d;

    /* Info */
    --info: #3b82f6;
    --info-lifted: #2563eb;
    --info-accented: #1d4ed8;

    /* Notice */
    --notice: #a855f7;
    --notice-lifted: #9333ea;
    --notice-accented: #7e22ce;

    /* Warning */
    --warning: #f97316;
    --warning-lifted: #ea580c;
    --warning-accented: #c2410c;

    /* Error */
    --error: #ef4444;
    --error-lifted: #dc2626;
    --error-accented: #b91c1c;

    /* Grayscale */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral semantic */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text colors — neutral, no red */
    --text: #f4f4f5;
    --text-muted: #a1a1aa;
    --text-lifted: #52525b;
    --text-accented: #3f3f46;
    --text-inverted: #09090b;

    /* Background colors — true dark neutral */
    --bg: #09090b;
    --bg-muted: #0f0f11;
    --bg-lifted: #141416;
    --bg-accented: #1a1a1e;
    --bg-inverted: #f4f4f5;

    /* Border colors — white alpha, no red */
    --border-muted: rgba(255, 255, 255, 0.04);
    --border: rgba(255, 255, 255, 0.08);
    --border-lifted: rgba(255, 255, 255, 0.12);
    --border-accented: rgba(255, 255, 255, 0.18);

    /* Glassmorphism tokens */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-bg-hover: rgba(255, 255, 255, 0.06);
    --glass-bg-active: rgba(255, 255, 255, 0.09);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --glass-blur: 20px;
    --glass-blur-heavy: 30px;

    /* Card specific */
    --card-bg: rgba(20, 20, 22, 0.9);
    --card-bg-solid: #141416;
    --card-header-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.08);

    /* Additional colors */
    --yellow-200: #fef08a;
    --yellow-300: #fde047;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --emerald-300: #6ee7b7;
    --pink-400: #f472b6;

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

    /* Outline sizes */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.5rem;
    --rounding-md: 0.75rem;
    --rounding-lg: 1rem;
    --rounding-xl: 1.25rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* =====================================================
   2. ANIMATIONS
   ===================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes subtleGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.08); }
    50% { box-shadow: 0 0 30px rgba(220, 38, 38, 0.15); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* =====================================================
   3. GLOBAL BASE
   ===================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-400) transparent;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: var(--text) !important;
    background-color: var(--bg) !important;
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(220, 38, 38, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(220, 38, 38, 0.02) 0%, transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Sticky footer layout */
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

.primary-bg-color {
    background-color: var(--bg) !important;
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(220, 38, 38, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(220, 38, 38, 0.02) 0%, transparent 60%) !important;
    background-attachment: fixed !important;
}

a {
    color: var(--primary-lifted);
    transition: color 0.2s ease;
}
a:hover {
    color: var(--primary-800);
    text-decoration: none;
}

::selection {
    background: rgba(220, 38, 38, 0.35);
    color: #fff;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--neutral-400);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500);
}

hr {
    border-top-color: var(--card-border);
}

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

p {
    color: var(--text-muted);
}

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

strong, b {
    color: var(--text);
}

/* Main body section */
#main-body {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    flex: 1 0 auto;
}

/* Sidebar animations */
.sidebar .card-sidebar {
    animation: slideInLeft 0.3s ease-out both;
}
.sidebar .card-sidebar:nth-child(2) { animation-delay: 0.06s; }
.sidebar .card-sidebar:nth-child(3) { animation-delay: 0.12s; }

/* Alert animations */
.alert {
    animation: fadeInUp 0.3s ease-out both;
}

/* Tab pane transitions */
.tab-pane.fade {
    transition: opacity 0.2s ease;
}

/* List group item stagger */
.list-group-item {
    animation: fadeIn 0.25s ease-out both;
}

/* Smooth hover transitions globally */
.card {
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* Button press effect */
.btn:active:not(:disabled) {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}

/* Modal animation enhancement */
.modal.fade .modal-dialog {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease !important;
}
.modal.fade.show .modal-dialog {
    transform: none;
}

/* Dropdown enhanced animation — opacity only, no transform (avoids Popper.js conflict) */
.dropdown-menu.show {
    animation: dropdownFade 0.12s ease-out;
}
@keyframes dropdownFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Row hover transitions */
.table tbody tr {
    transition: background-color 0.15s ease;
}

/* =====================================================
   4. HEADER & NAVBAR — FULLY TRANSPARENT
   ===================================================== */

header.header {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    z-index: 1030 !important;
    position: relative;
}
header.header::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--primary, #dc2626), var(--primary-lifted, #ef4444), var(--primary, #dc2626));
}

/* Notification bell in main header */
.header-notify-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--rounding-sm);
    color: var(--text-muted);
    font-size: 1.3rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.header-notify-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}
.header-notify-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    line-height: 1;
}

/* Fixed admin return-to-admin button */
.admin-float-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff !important;
    font-size: 1.15rem;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4), 0 0 0 3px rgba(220, 38, 38, 0.15);
    transition: all 0.2s ease;
    text-decoration: none !important;
}
.admin-float-btn:hover {
    background: var(--primary-lifted);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5), 0 0 0 3px rgba(220, 38, 38, 0.25);
    color: #fff !important;
}

/* Main header area — unified single-row layout */
.main-header {
    background: transparent !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
header.header .navbar.navbar-light {
    background: transparent !important;
}

/* Header row — logo, nav, actions in one line */
.header-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.1rem 0;
}

.navbar-brand {
    color: var(--text) !important;
    font-weight: 700;
    font-size: 1.3rem;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}
.navbar-brand:hover {
    color: var(--text) !important;
}
.brand-text {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

/* Inline nav in header (desktop) */
.header-nav {
    flex: 1;
    min-width: 0;
}
.header-nav-list {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-nav-list .nav-item {
    display: block !important;
}
.header-nav-list .nav-link {
    color: var(--text-muted) !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.5rem 0.85rem !important;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--rounding-sm) !important;
    position: relative;
    white-space: nowrap;
}
.header-nav-list .nav-link:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
.header-nav-list .nav-link.dropdown-toggle::after {
    font-size: 0.6rem;
    opacity: 0.4;
    margin-left: 0.15rem;
}
.header-nav-list .nav-item.active > .nav-link,
.header-nav-list .nav-item.show > .nav-link {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.header-nav-list .nav-item.active > .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0.85rem;
    right: 0.85rem;
    height: 2px;
    background: var(--primary);
    border-radius: 1px;
}

/* Header actions — quick links, cart, CTA */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Header quick links (help, ticket) */
.header-quick-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.35rem;
}
.header-quick-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--rounding-sm);
    color: var(--text-muted) !important;
    font-size: 1rem;
    transition: color 0.15s ease, background-color 0.15s ease;
    text-decoration: none !important;
}
.header-quick-link:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.04);
}

/* Panel login buttons (Game Panel, cPanel) */
.header-panel-btns {
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.25rem;
}
.header-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.75rem;
    border-radius: var(--rounding-sm);
    border: 1px solid var(--border);
    color: var(--text-muted) !important;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none !important;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.header-panel-btn i {
    font-size: 0.85rem;
}
.header-panel-btn:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}
.header-actions-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 0.35rem;
    flex-shrink: 0;
}

/* Cart button */
.header-cart-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--rounding-sm);
    color: var(--text-muted);
    font-size: 1.45rem;
    transition: color 0.15s ease, background-color 0.15s ease;
    text-decoration: none !important;
}
.header-cart-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}
.header-cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 10px;
    line-height: 1;
}
.header-cart-badge-empty {
    display: none;
}

/* CTA button */
.header-cta-btn {
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--rounding-sm) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.15rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-decoration: none !important;
}
.header-cta-btn:hover {
    background: var(--primary-lifted) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Mobile toggle */
.header-toggle-btn {
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--rounding-sm) !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 1.1rem;
}
.header-toggle-btn:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Secondary nav (user account links, desktop only) */
.header-secondary-nav {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.012);
}
.header-secondary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
}
.header-secondary-left {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}
.header-sec-link {
    color: var(--text-muted) !important;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: var(--rounding-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
    text-decoration: none !important;
}
.header-sec-link:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.04);
}
.header-sec-link i {
    font-size: 0.75rem;
    opacity: 0.6;
}
.header-sec-link:hover i {
    opacity: 0.9;
}
.header-sec-discord:hover {
    color: #7289da !important;
}
.header-sec-discord:hover i {
    color: #7289da;
}
.header-register-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--rounding-sm) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.45rem 1.1rem !important;
    transition: all 0.15s ease;
    text-decoration: none !important;
}
.header-register-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.header-secondary-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.15rem;
}
.header-secondary-list .nav-item {
    display: block !important;
}
.header-secondary-list .nav-link {
    color: var(--text-muted) !important;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 0.7rem !important;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: var(--rounding-sm) !important;
    transition: color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
}
.header-secondary-list .nav-link:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
.header-secondary-list .nav-item.active > .nav-link {
    color: var(--text) !important;
}

/* Navbar base — force no background on all navbar variants */
.navbar,
.navbar-light,
.navbar-dark,
.navbar.navbar-light,
.navbar.navbar-expand-xl {
    background: transparent !important;
    background-color: transparent !important;
}

/* Mobile collapsed nav — fallback styles */
.main-navbar-wrapper,
header.header .main-navbar-wrapper,
.navbar.main-navbar-wrapper {
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 0 !important;
}
.main-navbar-wrapper .navbar-nav {
    gap: 0.15rem;
    padding: 0.35rem 0;
    flex-wrap: wrap;
}

/* Hide the "More" collapsable dropdown — show all nav items instead */
.collapsable-dropdown {
    display: none !important;
}
.main-navbar-wrapper .nav-link {
    color: var(--text-muted) !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.45rem 0.85rem !important;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--rounding-sm) !important;
    position: relative;
    white-space: nowrap;
}
.main-navbar-wrapper .nav-link:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
.main-navbar-wrapper .nav-link.dropdown-toggle::after {
    font-size: 0.55rem;
    opacity: 0.4;
    margin-left: 0.1rem;
}
.main-navbar-wrapper .nav-item.active > .nav-link,
.main-navbar-wrapper .nav-item.show > .nav-link {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Nav icons */
.nav-icon {
    font-size: 0.88rem;
    width: 1.2rem;
    text-align: center;
    opacity: 0.5;
    color: inherit !important;
}
.nav-link:hover .nav-icon {
    opacity: 0.8;
}

/* Legacy search bar (unused — replaced by header-search) */
header.header .search {
    display: none !important;
}

/* Legacy cart toolbar (unused — replaced by header-cart-btn) */
header.header .toolbar {
    display: none !important;
}

/* Dropdown menus */
.dropdown-menu {
    background: #18181b !important;
    backdrop-filter: blur(var(--glass-blur-heavy)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--rounding-sm) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
    padding: 0.35rem !important;
    z-index: 1050 !important;
    min-width: 200px;
}
.dropdown-item {
    color: var(--text-muted) !important;
    border-radius: 4px !important;
    padding: 0.45rem 0.75rem !important;
    transition: all 0.12s ease;
    font-size: 0.85rem;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--text) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary) !important;
    color: #fff !important;
}
.dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
    margin: 0.25rem 0.5rem;
}

/* Dropdown icons */
.dropdown-icon {
    font-size: 0.8rem;
    width: 1rem;
    text-align: center;
    opacity: 0.5;
    color: inherit !important;
}
.dropdown-item:hover .dropdown-icon {
    opacity: 0.8;
}

/* Legacy nested dropdown-item fix (theme.css nests li.dropdown-item > a.dropdown-item) */
li.dropdown-item {
    padding: 0 !important;
    background: transparent !important;
}
li.dropdown-item:hover,
li.dropdown-item:focus,
li.dropdown-item:active {
    background: transparent !important;
}
li.dropdown-item > a.dropdown-item {
    padding: 0.45rem 0.75rem !important;
}

/* Navbar toggler */
.navbar-light .navbar-toggler {
    border-color: var(--card-border) !important;
    color: var(--text-muted) !important;
}
.navbar-light .navbar-toggler-icon {
    filter: invert(1) !important;
}

/* Mobile nav */
.navbar-collapse {
    background: transparent;
    border-radius: var(--rounding-sm);
}
@media (max-width: 1199.98px) {
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background: rgba(18, 18, 20, 0.98) !important;
        border: 1px solid var(--card-border);
        border-radius: var(--rounding-sm);
        padding: 0.75rem;
        margin-top: 0.5rem;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    .main-navbar-wrapper .nav-link {
        padding: 0.55rem 0.75rem !important;
        border-radius: var(--rounding-sm) !important;
    }
}

/* =====================================================
   5. BREADCRUMB — MINIMAL
   ===================================================== */

.master-breadcrumb {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 0.25rem 0;
}
.breadcrumb {
    background-color: transparent !important;
    padding: 0.4rem 0;
    margin: 0;
    font-size: 0.8rem;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-lifted) !important;
}
.breadcrumb-item.active {
    color: var(--text-muted) !important;
}
.breadcrumb-item a {
    color: var(--text-lifted) !important;
    transition: color 0.2s ease;
}
.breadcrumb-item a:hover {
    color: var(--primary-lifted) !important;
}

/* =====================================================
   6. CARDS
   ===================================================== */

.card,
.mc-promo-manage,
.mc-promo-login {
    background: var(--card-bg-solid) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--rounding-md) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    color: var(--text) !important;
    overflow: hidden;
    animation: fadeInUp 0.35s ease-out both;
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.card-header {
    background: var(--card-header-bg) !important;
    border-bottom: 1px solid var(--card-border) !important;
    color: var(--text) !important;
    padding: 0.8rem 1.15rem !important;
}
.card-header .card-title {
    color: var(--text) !important;
    font-weight: 600;
    font-size: 0.9rem;
}
.card-footer {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid var(--card-border) !important;
    color: var(--text-muted) !important;
}
.card-footer:empty {
    display: none;
}
.card-body {
    color: var(--text) !important;
    background: transparent !important;
}

/* Stagger card animations */
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.04s; }
.card:nth-child(3) { animation-delay: 0.08s; }
.card:nth-child(4) { animation-delay: 0.12s; }
.card:nth-child(5) { animation-delay: 0.16s; }
.card:nth-child(6) { animation-delay: 0.2s; }

/* Card accent colors */
[class*="card-accent-"] {
    border-top-width: 3px !important;
    border-top-style: solid !important;
}
.card-accent-red { border-top-color: var(--primary) !important; }
.card-accent-blue { border-top-color: #3b82f6 !important; }
.card-accent-green { border-top-color: #22c55e !important; }
.card-accent-gold { border-top-color: #eab308 !important; }
.card-accent-orange { border-top-color: #f97316 !important; }
.card-accent-pink { border-top-color: #ec4899 !important; }
.card-accent-purple { border-top-color: #a855f7 !important; }
.card-accent-lime { border-top-color: #84cc16 !important; }
.card-accent-magenta { border-top-color: #d946ef !important; }
.card-accent-teal { border-top-color: #14b8a6 !important; }
.card-accent-turquoise { border-top-color: #06b6d4 !important; }
.card-accent-emerald { border-top-color: #10b981 !important; }
.card-accent-amethyst { border-top-color: #8b5cf6 !important; }
.card-accent-wet-asphalt { border-top-color: #64748b !important; }
.card-accent-midnight-blue { border-top-color: #6366f1 !important; }
.card-accent-sun-flower { border-top-color: #facc15 !important; }
.card-accent-pomegranate { border-top-color: #ef4444 !important; }
.card-accent-silver { border-top-color: #94a3b8 !important; }
.card-accent-asbestos { border-top-color: #78716c !important; }

/* =====================================================
   7. SIDEBAR
   ===================================================== */

.sidebar .card-sidebar {
    background: var(--card-bg-solid) !important;
    border: 1px solid var(--card-border) !important;
}
.sidebar .card-sidebar .card-header {
    background: var(--card-header-bg) !important;
}
.sidebar .card-title {
    color: var(--text) !important;
}
.sidebar .card-minimise {
    color: var(--text-muted) !important;
}
.sidebar .list-group-item {
    background-color: transparent !important;
    border-color: var(--card-border) !important;
    color: var(--text-muted) !important;
    transition: all 0.2s ease;
    padding: 0.6rem 1rem;
}
.sidebar .list-group-item:hover {
    background-color: var(--glass-bg-hover) !important;
    color: var(--text) !important;
    padding-left: 1.15rem;
}
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}
.sidebar .list-group-item .badge {
    background-color: var(--bg-accented) !important;
    color: var(--text-muted) !important;
}
.sidebar .list-group-item.active .badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}
.sidebar .card-body {
    color: var(--text-muted) !important;
}

/* View filter sidebar card — enhanced active state */
.sidebar .card-sidebar .view-filter-btns .list-group-item {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-left: 2px solid transparent;
}
.sidebar .card-sidebar .view-filter-btns .list-group-item.active {
    background: rgba(220, 38, 38, 0.06) !important;
    border-color: transparent !important;
    border-left-color: var(--primary) !important;
    color: var(--text) !important;
    box-shadow: none;
    padding-left: 1rem;
}
.sidebar .card-sidebar .view-filter-btns .list-group-item:hover:not(.active) {
    padding-left: 1rem;
}

/* =====================================================
   8. BUTTONS
   ===================================================== */

.btn {
    font-family: "Inter", sans-serif !important;
    font-weight: 500 !important;
    border-radius: var(--rounding-sm) !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.01em;
    text-transform: none;
    position: relative;
    overflow: hidden;
    padding: 0.45rem 1.1rem;
    font-size: 0.875rem;
}

/* Primary button — red accent */
.btn-primary {
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-lifted) !important;
    border-color: var(--primary-lifted) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3) !important;
    transform: translateY(-1px);
}
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-accented) !important;
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Default/secondary buttons */
.btn-default,
.btn-outline-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
}
.btn-default:hover,
.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text) !important;
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: var(--text) !important;
}

.btn-success {
    background: #16a34a !important;
    border: 1px solid #16a34a !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
.btn-success:hover {
    background: #22c55e !important;
    border-color: #22c55e !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.2) !important;
    transform: translateY(-1px);
    color: #fff !important;
}

.btn-info {
    background: #2563eb !important;
    border: 1px solid #2563eb !important;
    color: #fff !important;
}
.btn-info:hover {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    transform: translateY(-1px);
    color: #fff !important;
}

.btn-warning {
    background: #ea580c !important;
    border: 1px solid #ea580c !important;
    color: #fff !important;
}
.btn-warning:hover {
    background: #f97316 !important;
    border-color: #f97316 !important;
    transform: translateY(-1px);
    color: #fff !important;
}

.btn-danger {
    background: #dc2626 !important;
    border: 1px solid #dc2626 !important;
    color: #fff !important;
}
.btn-danger:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    transform: translateY(-1px);
    color: #fff !important;
}

.btn-link {
    color: var(--primary-lifted) !important;
    text-decoration: none !important;
}
.btn-link:hover {
    color: var(--primary-800) !important;
}

.btn-outline-primary {
    color: var(--primary-lifted) !important;
    border-color: var(--primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* Outline danger button */
.btn-outline-danger {
    color: var(--primary-800) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    background: transparent !important;
}
.btn-outline-danger:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: var(--primary-800) !important;
}

/* Button group fix */
.btn-group .btn {
    border-radius: 0 !important;
}
.btn-group .btn:first-child {
    border-radius: var(--rounding-sm) 0 0 var(--rounding-sm) !important;
}
.btn-group .btn:last-child {
    border-radius: 0 var(--rounding-sm) var(--rounding-sm) 0 !important;
}
.btn-group .btn:only-child {
    border-radius: var(--rounding-sm) !important;
}

/* XS button */
.btn-xs {
    padding: 0.2rem 0.6rem !important;
    font-size: 0.75rem !important;
    border-radius: var(--rounding-sm) !important;
}

/* Large buttons */
.btn-lg {
    padding: 0.65rem 1.5rem !important;
    font-size: 1rem !important;
    border-radius: var(--rounding-md) !important;
}

/* =====================================================
   9. FORM CONTROLS
   ===================================================== */

.form-control {
    background-color: var(--bg-accented) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
    border-radius: var(--rounding-sm) !important;
    transition: all 0.2s ease;
    padding: 0.5rem 0.85rem;
}
.form-control::placeholder {
    color: var(--text-lifted) !important;
}
.form-control:focus {
    background-color: var(--bg-accented) !important;
    border-color: var(--primary) !important;
    color: var(--text) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--bg-muted) !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
}

.form-control-label,
.col-form-label,
label {
    color: var(--text) !important;
    font-weight: 500;
    font-size: 0.85rem;
}

.input-group-text {
    background-color: var(--bg-accented) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-muted) !important;
}

/* input-group-merge: icon blends seamlessly into the input */
.input-group-merge .input-group-prepend .input-group-text,
.input-group-merge .input-group-append .input-group-text {
    background-color: transparent !important;
    border: none !important;
    color: var(--text-lifted) !important;
    position: absolute;
    z-index: 4;
    height: 100%;
    pointer-events: none;
}
.input-group-merge .input-group-prepend {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 4;
}
.input-group-merge .input-group-append {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 4;
}
.input-group-merge .input-group-append .btn {
    position: relative;
    z-index: 5;
}
.input-group-merge {
    position: relative;
}
.input-group-merge .form-control {
    padding-left: 2.5rem !important;
    border-radius: var(--rounding-sm) !important;
}

select.form-control,
.custom-select {
    background-color: var(--bg-accented) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
select.form-control option,
.custom-select option {
    background-color: var(--card-bg-solid) !important;
    color: var(--text) !important;
}

.input-group .btn-reveal-pw {
    background: var(--bg-accented) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-muted) !important;
}
.input-group .btn-reveal-pw:hover {
    color: var(--primary-lifted) !important;
}

.form-check-input {
    accent-color: var(--primary);
}

.form-group label {
    margin-bottom: 0.35rem;
}

/* =====================================================
   10. TABLES — POLISHED CLEAN
   ===================================================== */

.table {
    color: var(--text) !important;
    border-collapse: separate !important;
    border-spacing: 0;
}
.table th,
.table td {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: var(--text) !important;
    padding: 0.75rem 1rem !important;
    vertical-align: middle !important;
}
.table thead th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: none !important;
    color: var(--text-muted) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding: 0.6rem 1rem !important;
    background-color: transparent !important;
    white-space: nowrap;
}
.table tbody + tbody {
    border-top-color: var(--card-border) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.015) !important;
}
.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--text) !important;
}
.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--card-border) !important;
}
.table .thead-dark th,
.table .thead-light th {
    background-color: transparent !important;
    border-color: var(--card-border) !important;
    color: var(--text-muted) !important;
}

/* Table-list specific (services, invoices, domains, tickets) */
table.table-list {
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden;
    margin-bottom: 0 !important;
}
table.table-list thead th {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: var(--text-muted) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding: 0.6rem 1rem !important;
    text-align: left !important;
}
table.table-list tbody td,
.table-list > tbody > tr > td {
    background-color: transparent !important;
    color: var(--text) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.875rem;
    vertical-align: middle !important;
}
.table-list > tbody > tr > td a {
    color: var(--text) !important;
    font-weight: 500;
}
.table-list > tbody > tr > td a:hover {
    color: var(--primary-lifted) !important;
}
.table-list > tbody > tr > td a.border-left {
    border-left-color: transparent !important;
}
.table-list > tbody > tr:hover > td {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
/* Clickable table rows cursor */
.table-list > tbody > tr[onclick] {
    cursor: pointer;
}

/* Service icon column */
#tableServicesList .svc-icon-cell,
#tableServicesList th:first-child {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    padding: 0.5rem 0 0.5rem 0.75rem !important;
}
.svc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--rounding-sm);
    font-size: 1.1rem;
}
.svc-icon-gmod {
    background: rgba(255, 255, 255, 0.06);
}
.svc-icon-gmod img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
}
.svc-icon-hosting {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}
.svc-icon-generic {
    background: rgba(161, 161, 170, 0.1);
    color: #a1a1aa;
}

/* DataTables wrapper */
.dataTables_wrapper table.table-list {
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden;
}
.dataTables_wrapper table.table-list thead th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--text) !important;
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--bg-accented) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
    border-radius: var(--rounding-sm) !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.85rem !important;
}
.dataTables_wrapper .dataTables_filter input {
    background-image: none !important;
    padding: 0.4rem 0.75rem 0.4rem 2rem !important;
    background-repeat: no-repeat !important;
    background-position: 0.6rem center !important;
    background-size: 0.85rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23a1a1aa'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
/* Style native search clear button */
.dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 0.75rem;
    height: 0.75rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23a1a1aa'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E") center/contain no-repeat;
    cursor: pointer;
}
.dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-cancel-button:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23f4f4f5'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.dataTables_wrapper .dataTables_info {
    color: var(--text-muted) !important;
    font-size: 0.8rem;
    padding-top: 0.75rem;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--text-muted) !important;
    font-size: 0.85rem;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button,
div.dataTables_wrapper div.dataTables_paginate a.paginate_button:focus,
div.dataTables_wrapper div.dataTables_paginate a.paginate_button:active,
div.dataTables_wrapper div.dataTables_paginate span a.paginate_button {
    color: var(--text-muted) !important;
    border: 1px solid transparent !important;
    outline: none !important;
    background: transparent !important;
    border-radius: var(--rounding-sm) !important;
    transition: color 0.15s ease, background-color 0.15s ease;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.82rem !important;
    font-weight: 500;
    min-width: 2rem;
    text-align: center;
    box-shadow: none !important;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button:hover,
div.dataTables_wrapper div.dataTables_paginate span a.paginate_button:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.current:hover,
div.dataTables_wrapper div.dataTables_paginate span a.paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate span a.paginate_button.current:hover {
    background: var(--primary) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.disabled,
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.disabled:hover {
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    outline: none !important;
    opacity: 0.4;
    box-shadow: none !important;
}
div.dataTables_wrapper div.dataTables_paginate {
    border: none !important;
    outline: none !important;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}
table.dataTable {
    border-collapse: collapse !important;
}
.dataTables_empty {
    color: var(--text-muted) !important;
    padding: 2rem !important;
    text-align: center !important;
}

/* DataTables sorting icons */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 0.3;
    color: var(--text-muted);
}
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 0.8;
    color: var(--primary-lifted);
}

/* Solid bottom border table */
table.table-solid-bottom-border-light-gray {
    border-bottom-color: var(--card-border) !important;
}

/* Table container — wrap tables inside card-like containers */
.table-container {
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: var(--rounding-md);
    overflow: hidden;
    animation: fadeInUp 0.35s ease-out both;
}
.table-container .dataTables_wrapper {
    padding: 0;
}
/* Pagination area below the table */
.table-container .dataTables_paginate {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
}
.table-container .dataTables_paginate .paginate_button {
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    outline: none !important;
}
.table-container .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    outline: none !important;
}
.table-container .dataTables_paginate .paginate_button:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}
.table-container .dataTables_info {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.table-container .dataTables_length {
    padding: 0.5rem 1rem;
}
.listtable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    gap: 0.5rem;
}
/* Table must wrap to its own full-width line below the controls */
.listtable > table,
.listtable > .table-responsive {
    flex: 0 0 100%;
    margin: 0 -1rem;
    width: calc(100% + 2rem) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Ticket number styling */
.ticket-number {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-right: 0.5rem;
}
.ticket-subject {
    font-weight: 500;
}
.ticket-subject.unread {
    color: var(--text) !important;
    font-weight: 600;
}

/* Product name + domain in services table */
table.table-list td strong {
    color: var(--text);
    font-weight: 600;
}
table.table-list td br + a {
    color: var(--text-muted) !important;
    font-weight: 400;
    font-size: 0.8rem;
}
table.table-list td br + a:hover {
    color: var(--primary-lifted) !important;
}

/* =====================================================
   11. ALERTS
   ===================================================== */

.alert {
    border-radius: var(--rounding-sm) !important;
    border-width: 1px !important;
    border-left-width: 3px !important;
    font-size: 0.875rem;
}
.alert-success {
    background-color: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}
.alert-success a, .alert-success .alert-link {
    color: #bbf7d0 !important;
    text-decoration: underline !important;
}
.alert-info {
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}
.alert-info a, .alert-info .alert-link {
    color: #bfdbfe !important;
    text-decoration: underline !important;
}
.alert-warning {
    background-color: rgba(249, 115, 22, 0.08) !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
    color: #fdba74 !important;
}
.alert-warning a, .alert-warning .alert-link {
    color: #fed7aa !important;
    text-decoration: underline !important;
}
.alert-danger {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}
.alert-danger a, .alert-danger .alert-link {
    color: #fecaca !important;
    text-decoration: underline !important;
}

/* =====================================================
   12. DASHBOARD — ENHANCED
   ===================================================== */

/* Dashboard welcome — subtle gradient accent */
.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, var(--card-bg-solid) 50%, rgba(220, 38, 38, 0.03) 100%);
    border: 1px solid var(--card-border);
    border-radius: var(--rounding-lg);
    animation: fadeInUp 0.3s ease-out both;
    position: relative;
    overflow: hidden;
}
.dashboard-welcome::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.3), transparent);
}
.welcome-heading {
    font-size: 1.5rem !important;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--text) !important;
    letter-spacing: -0.02em;
}
.welcome-sub {
    color: var(--text-muted) !important;
    margin: 0;
    font-size: 0.875rem;
}
.welcome-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .dashboard-welcome {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
    }
}

/* Stat cards — enhanced */
.dashboard-stats {
    animation: fadeInUp 0.35s ease-out both;
    animation-delay: 0.05s;
}
.dash-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: var(--rounding-md);
    color: var(--text) !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}
.dash-stat-card:hover {
    background: var(--bg-accented);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    color: var(--text) !important;
    transform: translateY(-3px);
}

.dash-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--rounding-sm);
    font-size: 1.1rem;
}
.dash-stat-blue {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa !important;
}
.dash-stat-green {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80 !important;
}
.dash-stat-red {
    background: rgba(220, 38, 38, 0.12);
    color: var(--primary-800) !important;
}
.dash-stat-amber {
    background: rgba(234, 179, 8, 0.12);
    color: #fbbf24 !important;
}

.dash-stat-info {
    flex: 1;
    min-width: 0;
}
.dash-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text) !important;
}
.dash-stat-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-stat-arrow {
    color: var(--text-lifted);
    font-size: 0.75rem;
    transition: all 0.25s ease;
}
.dash-stat-card:hover .dash-stat-arrow {
    color: var(--text-muted);
    transform: translateX(3px);
}

/* Quick link cards on dashboard */
.dashboard-quick-links .quick-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1rem 0.5rem;
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: var(--rounding-sm);
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
    height: 100%;
}
.dashboard-quick-links .quick-link-card:hover {
    background: var(--bg-accented);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text);
    transform: translateY(-1px);
}
.dashboard-quick-links .quick-link-card i {
    font-size: 1.15rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.dashboard-quick-links .quick-link-card:hover i {
    opacity: 1;
}
.dashboard-quick-links .quick-link-card span {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Legacy tiles fallback */
.tiles {
    border-radius: var(--rounding-md);
    overflow: hidden;
    border: 1px solid var(--card-border);
}
.tiles .tile {
    background: var(--card-bg-solid) !important;
    border-right: 1px solid var(--card-border) !important;
    color: var(--text) !important;
    transition: all 0.2s ease;
}
.tiles .tile:hover {
    text-decoration: none !important;
    background: var(--bg-accented) !important;
}
.tiles .tile .stat {
    color: var(--text) !important;
    font-weight: 700;
}
.tiles .tile .title {
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-size: 0.75rem;
}
.tiles .tile i {
    color: rgba(255, 255, 255, 0.04) !important;
}

/* Tile highlight bars */
.highlight.bg-color-blue { background-color: #3b82f6 !important; }
.highlight.bg-color-green { background-color: #22c55e !important; }
.highlight.bg-color-red { background-color: var(--primary) !important; }
.highlight.bg-color-gold { background-color: #eab308 !important; }

@media (max-width: 1199.98px) {
    .tiles .row > div:nth-child(1) > .tile,
    .tiles .row > div:nth-child(2) > .tile {
        border-bottom: 1px solid var(--card-border) !important;
    }
}

/* Dashboard panel cards */
.client-home-cards .card {
    background: var(--card-bg-solid) !important;
    border-color: var(--card-border) !important;
    margin-bottom: 1rem;
}
.client-home-cards .card-header {
    background-color: var(--card-header-bg) !important;
    background: var(--card-header-bg) !important;
    border-bottom: 1px solid var(--card-border) !important;
    color: var(--text) !important;
    padding: 0.75rem 1.15rem !important;
}
.client-home-cards .card-header .card-title {
    font-size: 0.85rem !important;
    font-weight: 600;
}
.client-home-cards .card-header .btn,
.client-home-cards .card-header .btn-sm {
    color: var(--text-muted) !important;
    padding: 0.2rem 0.65rem !important;
    font-size: 0.75rem !important;
}
.client-home-cards .card-header .btn:hover {
    color: var(--text) !important;
}
.client-home-cards .card-body {
    background: transparent !important;
    color: var(--text) !important;
}
.client-home-cards .card-footer {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid var(--card-border) !important;
    color: var(--text-muted) !important;
    position: relative;
    z-index: 10;
}
.client-home-cards .card-footer a {
    color: var(--text-muted) !important;
    pointer-events: auto !important;
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative;
    z-index: 10;
    transition: color 0.15s ease;
}
.client-home-cards .card-footer a:hover {
    color: var(--text) !important;
}
/* Hide disabled "View More" links and their empty footers */
.client-home-cards .card-footer .btn-view-more.disabled {
    display: none !important;
}
.client-home-cards .card-footer:has(.btn-view-more.disabled:only-child) {
    display: none !important;
}
.client-home-cards .list-group {
    border-top-color: var(--card-border) !important;
    border-color: var(--card-border) !important;
}
.client-home-cards .list-group .list-group-item {
    border-color: var(--card-border) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    padding: 0.6rem 1.15rem !important;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.client-home-cards .list-group .list-group-item:hover {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--text) !important;
}
.client-home-cards small {
    color: var(--text-lifted) !important;
}
.client-home-cards .badge-pill {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-muted) !important;
    font-size: 0.7rem;
    padding: 0.25em 0.6em;
}

/* =====================================================
   13. SERVICE DETAIL PAGE
   ===================================================== */

.service-detail-card {
    overflow: visible !important;
}
.service-detail-card .card-body.p-0 {
    padding: 0 !important;
}

.service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
    gap: 1rem;
}
.service-header-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.service-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--rounding-md);
    background: rgba(220, 38, 38, 0.1);
    color: var(--primary-lifted);
    font-size: 1.25rem;
}
.service-icon-badge.svc-icon-gmod {
    background: rgba(255, 255, 255, 0.06);
}
.service-icon-badge.svc-icon-gmod img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
}
.service-icon-badge.svc-icon-hosting {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}
.service-icon-badge.svc-icon-generic {
    background: rgba(161, 161, 170, 0.1);
    color: #a1a1aa;
}
.service-name {
    font-size: 1.15rem !important;
    font-weight: 600;
    margin: 0 !important;
    color: var(--text) !important;
    line-height: 1.3;
}
.service-group {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.service-header-status .label {
    font-size: 0.75rem !important;
    padding: 0.4em 1em !important;
}

.service-billing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0;
    padding: 0;
}
.billing-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
    border-right: 1px solid var(--card-border);
}
.billing-item:last-child {
    border-right: none;
}
.billing-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.billing-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}
.billing-value-accent {
    color: var(--primary-lifted);
}

.service-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--card-border);
}
.service-actions .btn {
    padding: 0.4rem 1rem;
}

/* Upgrade options card — sales-oriented redesign */
.upgrade-options-card {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--rounding-md) !important;
    overflow: hidden;
    background:
        radial-gradient(1200px 280px at -10% -40%, rgba(220, 38, 38, 0.12), transparent 60%),
        radial-gradient(800px 240px at 110% 120%, rgba(220, 38, 38, 0.08), transparent 65%),
        var(--card-bg-solid) !important;
    border: 1px solid var(--card-border) !important;
}
.upgrade-options-card .card-body {
    padding: 1.75rem 1.5rem 1.25rem !important;
}
.upgrade-options-header {
    text-align: center;
    margin-bottom: 1.5rem;
}
.upgrade-options-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-lifted);
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.25);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}
.upgrade-options-title {
    font-size: 1.4rem !important;
    font-weight: 700;
    margin: 0 0 0.4rem 0 !important;
    color: var(--text) !important;
    letter-spacing: -0.01em;
}
.upgrade-options-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.upgrade-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
.upgrade-option-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem 1.4rem 1.25rem;
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--rounding-md);
    color: var(--text);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.upgrade-option-tile:hover {
    background: var(--glass-bg-hover);
    border-color: rgba(220, 38, 38, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.upgrade-option-featured {
    border-color: rgba(220, 38, 38, 0.5);
    background:
        linear-gradient(180deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.02) 60%, transparent),
        var(--glass-bg);
}
.upgrade-option-badge {
    position: absolute;
    top: -10px;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #b91c1c);
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
}
.upgrade-option-badge i {
    font-size: 0.6rem;
}
.upgrade-option-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.upgrade-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--rounding-sm);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.08));
    color: var(--primary-lifted);
    font-size: 1.1rem;
    border: 1px solid rgba(220, 38, 38, 0.18);
}
.upgrade-option-heading {
    flex: 1 1 auto;
    min-width: 0;
}
.upgrade-option-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.upgrade-option-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 0.2rem;
}
.upgrade-option-tagline {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Visual: plan tiers (from -> to) */
.upgrade-option-visual {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--card-border);
    border-radius: var(--rounding-sm);
    padding: 0.85rem;
}
.upgrade-option-visual-plan {
    position: relative;
}
.plan-tier-example-label {
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    background: var(--card-bg-solid);
    padding: 0 0.5rem;
}
.plan-tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.plan-tier {
    flex: 1 1 0;
    text-align: center;
    padding: 0.35rem 0.25rem;
}
.plan-tier-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}
.plan-tier-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.plan-tier-value span {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
}
.plan-tier-to .plan-tier-value {
    color: var(--primary-lifted);
}
.plan-tier-arrow {
    color: var(--primary-lifted);
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Visual: option chips */
.upgrade-option-visual-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}
.opt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    padding: 0.32rem 0.6rem;
    border-radius: 999px;
}
.opt-chip i {
    color: var(--primary-lifted);
    font-size: 0.7rem;
}

.upgrade-option-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.upgrade-option-benefits li {
    display: grid;
    grid-template-columns: 1.1em 1fr;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.83rem;
    color: var(--text);
    line-height: 1.4;
}
.upgrade-option-benefits li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.4em;
    color: #22c55e;
    font-size: 0.9rem;
    line-height: 1;
}

.upgrade-option-btn {
    margin-top: auto;
    width: 100%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600 !important;
    padding: 0.7rem 1rem !important;
    border-radius: var(--rounding-sm) !important;
}
.upgrade-option-btn i {
    font-size: 0.8rem;
    transition: transform 0.15s ease;
}
.upgrade-option-tile:hover .upgrade-option-btn i {
    transform: translateX(3px);
}

.upgrade-options-footnote {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.upgrade-options-footnote i {
    color: #22c55e;
    margin-right: 0.35rem;
}

@media (max-width: 575px) {
    .upgrade-options-card .card-body {
        padding: 1.25rem 1rem 1rem !important;
    }
    .upgrade-options-title {
        font-size: 1.2rem !important;
    }
    .upgrade-option-tile {
        padding: 1.15rem 1.1rem 1rem;
    }
    .plan-tier-value {
        font-size: 1.25rem;
    }
}

/* Old product-status styling — hide */
.product-status {
    background: transparent !important;
    border: none !important;
}
.product-status .product-icon {
    display: none !important;
}
.product-status .product-status-text {
    display: none !important;
}

/* Product details tab container */
div.product-details-tab-container {
    background-color: var(--card-bg-solid) !important;
    border: 1px solid var(--card-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--rounding-md) var(--rounding-md) !important;
    color: var(--text) !important;
    padding: 1.25rem !important;
}

/* Detail rows inside tabs */
.detail-row {
    display: flex;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    gap: 1rem;
}
.detail-row:last-child {
    border-bottom: none;
}
.detail-label {
    flex: 0 0 180px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.detail-value {
    flex: 1;
    color: var(--text);
    font-size: 0.85rem;
}
.detail-value code {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--primary-lifted) !important;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
}
.detail-actions {
    padding: 1rem 0 0.5rem;
    display: flex;
    gap: 0.5rem;
}

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

/* Hosting product overview — fix double boxing from WHMCS-generated cards */
#tabOverview .card {
    box-shadow: none !important;
    border: 1px solid var(--card-border) !important;
}
#tabOverview .card .card-header {
    background: var(--card-header-bg) !important;
    border-bottom: 1px solid var(--card-border) !important;
    color: var(--text) !important;
}
#tabOverview .card .card-body {
    background: var(--card-bg-solid) !important;
    color: var(--text) !important;
}
#tabOverview .card .card-body h2,
#tabOverview .card .card-body h3,
#tabOverview .card .card-body h4,
#tabOverview .card .card-body strong {
    color: var(--text) !important;
}
#tabOverview .card .card-body .text-muted,
#tabOverview .card .card-body small {
    color: var(--text-muted) !important;
}

/* Resource usage dials (jQuery knob) dark mode */
#resourceusage h4 {
    color: var(--text) !important;
    font-size: 0.9rem;
    font-weight: 600;
}
#resourceusage p {
    color: var(--text-muted) !important;
    font-size: 0.85rem;
}
#resourceusage .dial-usage {
    color: var(--text) !important;
}
#resourceusage canvas {
    filter: none !important;
}
/* Override knob input text */
input.dial-usage,
input.knob {
    color: var(--text) !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
}

/* bg-color utility classes */
.bg-color-blue { background-color: #3b82f6 !important; color: #fff !important; }
.bg-color-green { background-color: #22c55e !important; color: #fff !important; }
.bg-color-red { background-color: var(--primary) !important; color: #fff !important; }
.bg-color-gold { background-color: #eab308 !important; color: #000 !important; }
.bg-color-orange { background-color: #f97316 !important; color: #fff !important; }
.bg-color-purple { background-color: #a855f7 !important; color: #fff !important; }
.bg-color-teal { background-color: #14b8a6 !important; color: #fff !important; }

/* =====================================================
   14. MODALS
   ===================================================== */

.modal-content {
    background: #1a1a1e !important;
    backdrop-filter: blur(var(--glass-blur-heavy)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--rounding-lg) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
    color: var(--text) !important;
}
.modal-header {
    border-bottom: 1px solid var(--card-border) !important;
    background: var(--card-header-bg) !important;
    padding: 1rem 1.25rem !important;
}
/* Override bg-primary on modal headers — keep dark, not loud red */
.modal-header.bg-primary {
    background: var(--card-header-bg) !important;
    border-bottom: 2px solid var(--primary) !important;
}
.modal-header .modal-title {
    color: var(--text) !important;
    font-size: 1rem;
    font-weight: 600;
}
.modal-footer {
    border-top: 1px solid var(--card-border) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}
.modal-body {
    color: var(--text) !important;
}
/* Kill Bootstrap's separate backdrop div — it causes stacking-context
   conflicts with Stripe iframes. Instead, the .modal overlay itself
   provides the dark background. Click-outside-to-close still works
   because Bootstrap listens on the .modal element. */
.modal-backdrop {
    display: none !important;
}
.modal.show {
    background: rgba(0, 0, 0, 0.7) !important;
}
/* Ensure modals are always above Stripe iframes (which use z-index: 99999) */
.modal {
    z-index: 100001 !important;
}
.modal-dialog {
    pointer-events: auto !important;
}
.modal-content {
    pointer-events: auto !important;
}
/* Stripe controller iframes — never block interaction */
iframe[name*="privateStripe"],
iframe[name*="__privateStripe"] {
    z-index: 0 !important;
}
.modal-body label,
.modal-body .control-label {
    color: var(--text) !important;
}
.modal-body .form-control {
    background-color: var(--bg-accented) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
}

.close {
    color: var(--text-muted) !important;
    text-shadow: none !important;
    opacity: 0.7;
    transition: all 0.2s ease;
}
.close:hover {
    color: var(--text) !important;
    opacity: 1;
}

.modal-localisation .modal-content {
    background: #1a1a1e !important;
}
.modal-localisation .item-selector .item {
    border-color: var(--card-border) !important;
    color: var(--text-muted) !important;
    border-radius: var(--rounding-sm) !important;
    transition: all 0.15s ease;
}
.modal-localisation .item-selector .item:hover {
    background-color: var(--glass-bg-hover) !important;
    color: var(--text) !important;
}
.modal-localisation .item-selector .item.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* =====================================================
   15. FOOTER
   ===================================================== */

/* Sticky footer: everything after footer must not take flex space.
   Modals/overlay are already position:fixed or display:none. */
footer.footer ~ * {
    flex: none !important;
}

footer.footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid var(--card-border) !important;
    padding: 2.5rem 0 1.25rem !important;
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
}

/* ---- Highlight cards ---- */
.footer-highlights {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    border-bottom: 1px solid var(--card-border) !important;
}
@media (max-width: 991.98px) {
    .footer-highlights {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 575.98px) {
    .footer-highlights {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
}
.footer-highlight-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.875rem 1rem !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 0.75rem !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}
.footer-highlight-card:hover {
    border-color: rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.05) !important;
}
.footer-highlight-card > i {
    font-size: 1.15rem !important;
    color: var(--primary) !important;
    width: 1.25rem !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}
.footer-highlight-label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    color: var(--text) !important;
    line-height: 1.25 !important;
}
.footer-highlight-sub {
    display: block !important;
    font-size: 0.65rem !important;
    color: var(--text-muted) !important;
    line-height: 1.3 !important;
    margin-top: 0.1rem !important;
}

/* ---- Footer grid layout ---- */
footer.footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1.4fr repeat(3, 1fr) !important;
    gap: 2.5rem !important;
}
@media (max-width: 991.98px) {
    footer.footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
}
@media (max-width: 575.98px) {
    footer.footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* ---- Column headings ---- */
footer.footer .footer-heading {
    color: var(--text) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 0.6rem 0 !important;
    padding: 0 !important;
}
footer.footer .footer-heading.mt-3 {
    margin-top: 1.25rem !important;
}

/* ---- Link lists ---- */
footer.footer .footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
footer.footer .footer-links li {
    list-style: none !important;
    margin: 0 0 0.2rem 0 !important;
    padding: 0 !important;
}
footer.footer .footer-links a {
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    padding: 0.1rem 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
}
footer.footer .footer-links a i {
    font-size: 0.6rem !important;
    color: var(--text-lifted, #52525b) !important;
    width: 0.85rem !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease !important;
    opacity: 0.7;
}
footer.footer .footer-links a:hover {
    color: var(--text) !important;
}
footer.footer .footer-links a:hover i {
    color: var(--primary) !important;
    opacity: 1;
}

/* ---- Brand column ---- */
footer.footer .footer-col-brand {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}
footer.footer .footer-logo {
    display: inline-block !important;
    text-decoration: none !important;
}
footer.footer .footer-logo-icon {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}
footer.footer .footer-logo:hover .footer-logo-icon {
    opacity: 1;
}
footer.footer .footer-brand-text {
    color: var(--text) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
footer.footer .footer-tagline {
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: 260px;
}

/* ---- Social icons ---- */
footer.footer .footer-social {
    display: flex !important;
    gap: 0.35rem !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0.25rem 0 0 0 !important;
}
footer.footer .footer-social .list-inline-item {
    margin: 0 !important;
    padding: 0 !important;
}
footer.footer .footer-social .btn-icon,
footer.footer .footer-social .btn {
    width: 1.85rem !important;
    height: 1.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.375rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-muted) !important;
    font-size: 0.75rem !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: all 0.15s ease !important;
}
footer.footer .footer-social .btn-icon:hover,
footer.footer .footer-social .btn:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ---- Bottom bar ---- */
footer.footer .footer-bottom {
    margin-top: 2.25rem !important;
    padding: 1.25rem 0 0.25rem !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    border-top: 0 !important;
}
/* Gradient hairline separator: fades in from transparent, peaks near red primary, fades out */
footer.footer .footer-bottom::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.04) 20%,
        rgba(220,38,38,0.18) 50%,
        rgba(255,255,255,0.04) 80%,
        transparent 100%) !important;
    opacity: 0.8 !important;
}
footer.footer .footer-bottom-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
footer.footer .footer-copy {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    line-height: 1.4 !important;
}
footer.footer .footer-copy-primary {
    color: var(--text-lifted, #71717a) !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.005em !important;
    opacity: 0.45 !important;
    margin: 0 !important;
}
footer.footer .footer-bottom-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    flex-shrink: 0 !important;
}
/* Version badge — visible pill with live-indicator dot */
footer.footer .footer-build {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    color: var(--text-muted, #a1a1aa) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    padding: 0.28rem 0.65rem !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 999px !important;
    margin: 0 !important;
    cursor: help !important;
    outline: none !important;
    line-height: 1 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
}
footer.footer .footer-build:hover,
footer.footer .footer-build:focus,
footer.footer .footer-build:focus-within {
    color: var(--text, #f4f4f5) !important;
    border-color: rgba(220,38,38,0.35) !important;
    background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(255,255,255,0.03) 100%) !important;
    transform: translateY(-1px) !important;
}
footer.footer .footer-build-dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--success, #22c55e) !important;
    box-shadow: 0 0 6px rgba(34,197,94,0.6), 0 0 0 2px rgba(34,197,94,0.15) !important;
    flex-shrink: 0 !important;
    animation: footer-build-pulse 2.4s ease-in-out infinite !important;
}
@keyframes footer-build-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(34,197,94,0.6), 0 0 0 2px rgba(34,197,94,0.15); }
    50%      { opacity: 0.75; box-shadow: 0 0 3px rgba(34,197,94,0.4), 0 0 0 3px rgba(34,197,94,0.08); }
}
footer.footer .footer-build-label {
    display: inline-block !important;
    line-height: 1 !important;
}
/* Tooltip — hidden until hover/focus */
footer.footer .footer-build .footer-build-tip {
    display: none !important;
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    right: 0 !important;
    min-width: 220px !important;
    padding: 0.7rem 0.85rem !important;
    background: var(--card-bg-solid, #141416) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(220,38,38,0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 100 !important;
}
footer.footer .footer-build .footer-build-tip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    right: 18px !important;
    border: 6px solid transparent !important;
    border-top-color: var(--card-bg-solid, #141416) !important;
    filter: drop-shadow(0 1px 0 var(--border, rgba(255,255,255,0.08))) !important;
}
footer.footer .footer-build:hover .footer-build-tip,
footer.footer .footer-build:focus .footer-build-tip,
footer.footer .footer-build:focus-within .footer-build-tip {
    display: flex !important;
}
footer.footer .footer-build .footer-build-tip-header {
    color: var(--primary, #dc2626) !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    padding-bottom: 0.4rem !important;
    border-bottom: 1px solid var(--border-muted, rgba(255,255,255,0.06)) !important;
    margin-bottom: 0.15rem !important;
    opacity: 1 !important;
}
footer.footer .footer-build .footer-build-tip-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1.25rem !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
footer.footer .footer-build .footer-build-tip-key {
    color: var(--text-muted, #a1a1aa) !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.75 !important;
}
footer.footer .footer-build .footer-build-tip-val {
    color: var(--text, #f4f4f5) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}
/* Locale button — squared, larger, more present */
footer.footer .footer-locale-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    color: var(--text-muted) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    padding: 0.55rem 0.95rem !important;
    border-radius: 0.375rem !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
    width: fit-content !important;
    line-height: 1.1 !important;
}
footer.footer .footer-locale-btn i {
    font-size: 0.88rem !important;
    opacity: 0.85 !important;
}
footer.footer .footer-locale-btn:hover,
footer.footer .footer-locale-btn:focus {
    color: var(--text) !important;
    border-color: rgba(220,38,38,0.4) !important;
    background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(255,255,255,0.03) 100%) !important;
    transform: translateY(-1px) !important;
}
/* Responsive */
@media (max-width: 767.98px) {
    footer.footer .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.85rem !important;
    }
    footer.footer .footer-bottom-left,
    footer.footer .footer-bottom-right {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    footer.footer .footer-copy {
        align-items: flex-start !important;
    }
    footer.footer .footer-build .footer-build-tip {
        right: auto !important;
        left: 0 !important;
    }
    footer.footer .footer-build .footer-build-tip::after {
        right: auto !important;
        left: 18px !important;
    }
}
@media (max-width: 400px) {
    footer.footer .footer-locale-btn .footer-locale-text {
        display: none !important;
    }
    footer.footer .footer-locale-btn {
        padding: 0.35rem 0.6rem !important;
    }
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    footer.footer .footer-build-dot {
        animation: none !important;
    }
    footer.footer .footer-build,
    footer.footer .footer-locale-btn {
        transition: none !important;
    }
    footer.footer .footer-build:hover,
    footer.footer .footer-build:focus,
    footer.footer .footer-build:focus-within,
    footer.footer .footer-locale-btn:hover,
    footer.footer .footer-locale-btn:focus {
        transform: none !important;
    }
}

/* =====================================================
   16. PAGINATION
   ===================================================== */

.pagination {
    gap: 0.25rem;
    margin-bottom: 0;
    border: none !important;
}
.page-item {
    border: none !important;
}
.page-item .page-link {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    outline: none !important;
    color: var(--text-muted) !important;
    transition: color 0.15s ease, background-color 0.15s ease;
    font-weight: 500;
    border-radius: var(--rounding-sm) !important;
    padding: 0.4rem 0.8rem !important;
    min-width: 2rem;
    text-align: center;
    box-shadow: none !important;
}
.page-item .page-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}
.page-item.active .page-link {
    background-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-muted) !important;
    opacity: 0.5;
}
.page-item .page-link:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* =====================================================
   17. LIST GROUPS
   ===================================================== */

.list-group-item {
    background-color: transparent !important;
    border-color: var(--card-border) !important;
    color: var(--text) !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--glass-bg-hover) !important;
    color: var(--text) !important;
}
.list-group-item.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.list-group-flush .list-group-item {
    border-left: 0;
    border-right: 0;
}

/* =====================================================
   18. BADGES & STATUS LABELS
   ===================================================== */

.badge {
    font-weight: 500;
    border-radius: 9999px;
    padding: 0.3em 0.7em;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}
.badge-primary, .bg-primary {
    background-color: var(--primary) !important;
    color: #fff !important;
}
.badge-secondary, .bg-secondary {
    background-color: var(--neutral-400) !important;
    color: var(--text) !important;
}
.badge-success, .bg-success {
    background-color: #16a34a !important;
    color: #fff !important;
}
.badge-info, .bg-info {
    background-color: #2563eb !important;
    color: #fff !important;
}
.badge-warning, .bg-warning {
    background-color: #ea580c !important;
    color: #fff !important;
}
.badge-danger, .bg-danger {
    background-color: #dc2626 !important;
    color: #fff !important;
}
.badge-dark, .bg-dark {
    background-color: var(--bg-accented) !important;
    color: var(--text) !important;
}
.badge-light, .bg-light {
    background-color: var(--bg-muted) !important;
    color: var(--text) !important;
}

/* .label base (Bootstrap 3 legacy used by WHMCS) */
.label {
    font-weight: 500 !important;
    border-radius: 9999px !important;
    padding: 0.35em 0.85em !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em;
    display: inline-flex !important;
    align-items: center;
    line-height: 1.4 !important;
}
.label-default {
    background-color: rgba(113, 113, 122, 0.15) !important;
    color: #d4d4d8 !important;
}
.label-success {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}
.label-info {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}
.label-warning {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: #fb923c !important;
}
.label-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: var(--primary-800) !important;
}

/* Status pill base — ensure all status labels are readable on dark */
.label.status {
    text-shadow: none !important;
}
.status-custom {
    color: #fff !important;
}

/* Modern status pills */
.status-active,
.status-open,
.status-completed {
    background-color: rgba(34, 197, 94, 0.12) !important;
    color: #4ade80 !important;
}
.status-pending {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: var(--primary-800) !important;
}
.status-pending-transfer {
    background-color: rgba(249, 115, 22, 0.12) !important;
    color: #fb923c !important;
}
.status-suspended {
    background-color: rgba(249, 115, 22, 0.12) !important;
    color: #fb923c !important;
}
.status-customer-reply {
    background-color: rgba(249, 115, 22, 0.12) !important;
    color: #fb923c !important;
}
.status-fraud {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: var(--primary-800) !important;
}
.status-answered {
    background-color: rgba(168, 85, 247, 0.12) !important;
    color: #c084fc !important;
}
.status-expired,
.status-transferred-away {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #fca5a5 !important;
}
.status-pending-registration,
.status-redemption,
.status-grace {
    background-color: rgba(249, 115, 22, 0.12) !important;
    color: #fb923c !important;
}
.status-terminated {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: var(--primary-800) !important;
}
.status-onhold {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
}
.status-inprogress {
    background-color: rgba(220, 38, 38, 0.12) !important;
    color: var(--primary-800) !important;
}
.status-closed {
    background-color: rgba(113, 113, 122, 0.12) !important;
    color: #a1a1aa !important;
}
.status-paid {
    background-color: rgba(34, 197, 94, 0.12) !important;
    color: #4ade80 !important;
}
.status-unpaid {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: var(--primary-800) !important;
}
.status-cancelled {
    background-color: rgba(251, 146, 60, 0.12) !important;
    color: #fb923c !important;
}
.status-collections {
    background-color: rgba(100, 116, 139, 0.15) !important;
    color: #94a3b8 !important;
}
.status-refunded {
    background-color: rgba(234, 179, 8, 0.12) !important;
    color: #fbbf24 !important;
}
.status-payment-pending {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
}
.status-delivered {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
}
.status-accepted {
    background-color: rgba(34, 197, 94, 0.12) !important;
    color: #4ade80 !important;
}
.status-lost,
.status-dead {
    background-color: rgba(113, 113, 122, 0.15) !important;
    color: #a1a1aa !important;
}
.status-overdue {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: var(--primary-800) !important;
}

/* Requestor badges — all types */
.requestor-badge {
    border-radius: 9999px !important;
    padding: 0.25em 0.75em !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
}
.requestor-type-operator {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
}
.requestor-type-owner {
    background-color: rgba(34, 197, 94, 0.12) !important;
    color: #4ade80 !important;
}
.requestor-type-authorizeduser,
.requestor-type-subaccount {
    background-color: rgba(113, 113, 122, 0.12) !important;
    color: #a1a1aa !important;
}
.requestor-type-registereduser {
    background-color: rgba(249, 115, 22, 0.12) !important;
    color: #fb923c !important;
}
.requestor-type-guest {
    background-color: rgba(100, 116, 139, 0.12) !important;
    color: #94a3b8 !important;
}

/* Service status label sizing */
.div-service-status .label {
    border-radius: 9999px !important;
    padding: 0.3em 0.75em !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
}
.div-service-status .label:not(.label-placeholder) {
    width: auto !important;
    min-width: 4.5rem;
    justify-content: center;
}

.product-status-pending {
    background-color: rgba(249, 115, 22, 0.12) !important;
    color: #fb923c !important;
}

/* =====================================================
   19. POPOVERS & TOOLTIPS
   ===================================================== */

.popover {
    background-color: #1a1a1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    border-radius: var(--rounding-md) !important;
}
.popover-header {
    background-color: var(--card-header-bg) !important;
    border-bottom-color: var(--card-border) !important;
    color: var(--text) !important;
}
.popover-body {
    color: var(--text-muted) !important;
}
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-bottom-color: #1a1a1e !important;
}
.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: #1a1a1e !important;
}
.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^="left"] .arrow::after {
    border-left-color: #1a1a1e !important;
}
.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^="right"] .arrow::after {
    border-right-color: #1a1a1e !important;
}

.tooltip-inner {
    background-color: #27272a !important;
    color: var(--text) !important;
    border-radius: var(--rounding-sm) !important;
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
}
.bs-tooltip-top .arrow::before {
    border-top-color: #27272a !important;
}
.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #27272a !important;
}

/* =====================================================
   20. NAV TABS
   ===================================================== */

.nav-tabs {
    border-bottom-color: var(--card-border) !important;
}
.nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border-color: transparent !important;
    transition: all 0.15s ease;
    border-radius: var(--rounding-sm) var(--rounding-sm) 0 0 !important;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.55rem 1rem;
}
.nav-tabs .nav-link:hover {
    color: var(--text) !important;
    border-color: transparent transparent var(--card-border) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--card-bg-solid) !important;
    border-color: var(--card-border) var(--card-border) transparent !important;
    color: var(--text) !important;
}

.nav-pills .nav-link {
    color: var(--text-muted) !important;
    border-radius: var(--rounding-sm) !important;
}
.nav-pills .nav-link.active {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* =====================================================
   21. DOMAIN SEARCH & PRICING
   ===================================================== */

.home-domain-search {
    background: var(--bg-muted) !important;
    border-bottom: 1px solid var(--card-border) !important;
}
.home-domain-search h2 {
    color: var(--text) !important;
}
.home-domain-search .input-group-wrapper {
    background-color: var(--bg-lifted) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.home-domain-search .input-group-wrapper .form-control {
    background-color: transparent !important;
    color: var(--text) !important;
}
.home-domain-search .tld-logos {
    color: var(--text-muted) !important;
}
.domain-checker-bg,
.domain-checker-result-headline {
    background-color: var(--bg-muted) !important;
    color: var(--text) !important;
}
.domain-checker-available,
.domain-checker-available-price,
.domain-checker-unavailable {
    color: var(--text) !important;
}
.domain-pricing .tld-row {
    border-bottom-color: var(--card-border) !important;
    color: var(--text) !important;
}
.domain-pricing .tld-row:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}
.domain-pricing .tld-row.highlighted {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* (Login page styles in section 32 below) */

/* =====================================================
   22. (Reserved)
   ===================================================== */

/* =====================================================
   23. BOOTSTRAP UTILITY OVERRIDES
   ===================================================== */

/* Extended spacing utilities (Bootstrap 4 only goes to 5) */
.mb-7 { margin-bottom: 3.5rem !important; }

.bg-white {
    background-color: var(--card-bg-solid) !important;
}
.bg-light {
    background-color: var(--bg-muted) !important;
}
.bg-dark {
    background-color: var(--bg-accented) !important;
}
.text-dark {
    color: var(--text) !important;
}
.text-muted {
    color: var(--text-muted) !important;
}
.text-body {
    color: var(--text) !important;
}
.text-black-50 {
    color: var(--text-muted) !important;
}
.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}
.border {
    border-color: var(--card-border) !important;
}
.border-top {
    border-top-color: var(--card-border) !important;
}
.border-bottom {
    border-bottom-color: var(--card-border) !important;
}
.border-left {
    border-left-color: var(--card-border) !important;
}
.border-right {
    border-right-color: var(--card-border) !important;
}
.shadow-sm {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}
.shadow {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
.shadow-lg {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Text color overrides within cards */
.card .text-dark,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: var(--text) !important;
}
.card p, .card span, .card div {
    color: inherit;
}

/* =====================================================
   24. STORE PAGES
   ===================================================== */

.landing-page {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}
.landing-page h1, .landing-page h2, .landing-page h3, .landing-page h4 {
    color: var(--text) !important;
}
.landing-page p {
    color: var(--text-muted) !important;
}
.landing-page .hero {
    color: var(--text) !important;
}
.landing-page .content-block,
.landing-page .feature,
.landing-page .section {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}
.landing-page .content-block:nth-child(even),
.landing-page .feature:nth-child(even) {
    background-color: var(--bg-muted) !important;
}
.store-landing .hero {
    color: var(--text) !important;
}
.store-landing .product-options .item {
    background-color: var(--card-bg-solid) !important;
    border-color: var(--card-border) !important;
    color: var(--text) !important;
}
.store-landing .product-options .item:hover {
    background-color: var(--bg-accented) !important;
}
.store-landing .product-options p {
    color: var(--text-muted) !important;
}
.store-landing .pricing-table,
.store-landing .price-table-container {
    background: var(--card-bg-solid) !important;
    border-color: var(--card-border) !important;
    color: var(--text) !important;
}
.dynamic-landing-page {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}
.dynamic-landing-page .section {
    color: var(--text) !important;
}
.dynamic-landing-page .section:nth-child(even) {
    background-color: var(--bg-muted) !important;
}

/* Promo containers */
.promo-container {
    background-color: var(--card-bg-solid) !important;
    border-color: var(--card-border) !important;
    color: var(--text) !important;
}
.promo-container .header {
    color: var(--text) !important;
}
.promo-banner {
    background-color: var(--card-bg-solid) !important;
    color: var(--text) !important;
}

/* Upgrade products */
.upgrade .products .product {
    background-color: var(--card-bg-solid) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--rounding-md) !important;
    color: var(--text) !important;
}

/* Featured TLDs */
.featured-tld {
    background-color: var(--card-bg-solid) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text) !important;
}

/* Store domain tabs */
.store-order-container .store-domain-tabs li a {
    background-color: var(--bg-accented) !important;
    border-color: var(--card-border) !important;
    color: var(--text-muted) !important;
}
.store-order-container .store-domain-tabs li.active a,
.store-order-container .store-domain-tabs li a.active {
    background-color: var(--card-bg-solid) !important;
    color: var(--text) !important;
    border-bottom-color: transparent !important;
}
.store-order-container .store-domain-tab-content {
    background-color: var(--card-bg-solid) !important;
    border-color: var(--card-border) !important;
    color: var(--text) !important;
}

/* =====================================================
   25. TICKET VIEW — ENHANCED
   ===================================================== */

.view-ticket .card-body.p-3 {
    padding: 1.25rem !important;
}
.view-ticket .card-title {
    font-size: 1.1rem !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.view-ticket .ticket-actions {
    display: flex;
    gap: 0.5rem;
}
.view-ticket .ticket-actions .btn {
    font-size: 0.8rem;
}

.view-ticket .ticket-reply {
    background: var(--card-bg-solid) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--rounding-md) !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.view-ticket .ticket-reply.staff {
    border-left: 3px solid #3b82f6 !important;
}
.view-ticket .posted-by {
    color: var(--text-muted) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 0.6rem 1.25rem !important;
    font-size: 0.85rem;
}
.view-ticket .posted-by .posted-by-name {
    color: var(--text) !important;
    font-weight: 600;
}
.view-ticket .posted-on {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.view-ticket .message {
    padding: 1rem 1.25rem;
    color: var(--text) !important;
    line-height: 1.65;
}
.view-ticket .message p {
    color: var(--text-muted) !important;
}
.view-ticket .attachments {
    border-top: 1px dashed rgba(255, 255, 255, 0.06) !important;
    color: var(--text-muted) !important;
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
}
.view-ticket .attachment-list li span {
    border-color: var(--card-border) !important;
    background: var(--bg-accented);
}
.view-ticket .attachment-list li figure {
    background-color: var(--bg-lifted) !important;
    color: var(--text-lifted);
}
.view-ticket .requestor-badge {
    border-radius: 9999px !important;
    font-size: 0.7rem !important;
    padding: 0.25em 0.75em !important;
}

/* Ticket rating */
.ticket-reply .rating span.star:before,
.ticket-reply .rating-done span.star:before {
    color: var(--text-lifted) !important;
}
.ticket-reply .rating span.star:hover:before,
.ticket-reply .rating span.star:hover ~ span.star:before,
.ticket-reply .rating-done span.star.active:before {
    color: #fbbf24 !important;
}

.ticketfeedbackstaffcont {
    background-color: var(--bg-accented) !important;
    color: var(--text) !important;
    border-radius: var(--rounding-md);
}

/* =====================================================
   26. INVOICE VIEW
   ===================================================== */

/* Body background for standalone invoice page */
body:has(.invoice-container) {
    background-color: var(--bg, #09090b) !important;
}
.invoice-container {
    background: var(--card-bg-solid, #141416) !important;
    color: var(--text, #f4f4f5) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 0.75rem;
    padding: 2rem !important;
    max-width: 900px;
    margin: 2rem auto !important;
}
.invoice-container hr {
    border-color: var(--card-border, rgba(255, 255, 255, 0.08)) !important;
}
.invoice-header {
    color: var(--text) !important;
}
.invoice-header h2, .invoice-header h3 {
    color: var(--text) !important;
}
/* Status badges — pill style */
.invoice-status span {
    display: inline-block !important;
    padding: 0.3rem 1.1rem !important;
    border-radius: 9999px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}
.invoice-status .paid {
    color: #4ade80 !important;
    background: rgba(74, 222, 128, 0.1) !important;
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
}
.invoice-status .unpaid {
    color: var(--primary-800) !important;
    background: rgba(248, 113, 113, 0.1) !important;
    border: 1px solid rgba(248, 113, 113, 0.2) !important;
}
.invoice-status .refunded {
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.1) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
}
.invoice-status .cancelled {
    color: #a1a1aa !important;
    background: rgba(161, 161, 170, 0.1) !important;
    border: 1px solid rgba(161, 161, 170, 0.15) !important;
}
.invoice-status .collections {
    color: #94a3b8 !important;
    background: rgba(148, 163, 184, 0.1) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
}
.invoice-status .draft {
    color: var(--text-muted) !important;
    background: rgba(161, 161, 170, 0.08) !important;
    border: 1px solid rgba(161, 161, 170, 0.12) !important;
}
.invoice-col {
    color: var(--text) !important;
}
.invoice-col .small-text {
    color: var(--text-muted) !important;
}

/* Invoice tables */
.invoice-container .card {
    background: var(--bg-accented, #1a1a1e) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 0.5rem !important;
}
.invoice-container .card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)) !important;
    color: var(--text) !important;
}
.invoice-container .card-header .card-title {
    color: var(--text) !important;
}
.invoice-container .table {
    color: var(--text) !important;
    margin-bottom: 0;
}
.invoice-container .table td,
.invoice-container .table th {
    border-color: var(--card-border, rgba(255, 255, 255, 0.08)) !important;
    color: var(--text) !important;
    background: transparent !important;
}
.invoice-container .table thead td,
.invoice-container .table thead th {
    background: rgba(255, 255, 255, 0.02) !important;
    font-weight: 600;
}
.invoice-container .total-row {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Billing ledger — override the blue bg-info */
.invoice-container .card-title.bg-info,
.invoice-container .bg-info {
    background: var(--bg-accented, #1a1a1e) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    padding: 0.65rem 1rem !important;
    font-size: 0.95rem;
}
.invoice-container .transactions-container {
    background: transparent !important;
}

/* Invoice action buttons (Print / Download) */
.invoice-container .btn-default,
.invoice-container .btn-group .btn {
    background: var(--bg-accented) !important;
    color: var(--text) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--rounding-sm) !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
.invoice-container .btn-default:hover,
.invoice-container .btn-group .btn:hover {
    background: var(--glass-bg-hover, rgba(255, 255, 255, 0.08)) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.invoice-container .btn-group {
    gap: 0.35rem !important;
}
.invoice-container .btn-group .btn + .btn {
    margin-left: 0 !important;
}

/* Back to client area button */
body:has(.invoice-container) p.text-center {
    margin: 1.5rem 0 2rem !important;
}
body:has(.invoice-container) p.text-center a,
.invoice-container ~ p a {
    display: inline-block !important;
    padding: 0.5rem 1.5rem !important;
    background: var(--bg-accented) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--rounding-sm) !important;
    color: var(--text) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
body:has(.invoice-container) p.text-center a:hover,
.invoice-container ~ p a:hover {
    background: var(--glass-bg-hover) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text) !important;
}

/* Payment method select */
.invoice-container .custom-select {
    background-color: var(--bg-accented) !important;
    color: var(--text) !important;
    border-color: var(--card-border) !important;
}

/* Apply credit card */
.invoice-container .card-header.bg-success {
    background: #16a34a !important;
}

/* Notes panel */
.invoice-container .panel,
.invoice-container .alert {
    background: var(--bg-accented) !important;
    color: var(--text) !important;
    border-color: var(--card-border) !important;
}

/* QR code wrapper */
.invoice-qr-wrapper {
    text-align: center;
}

/* =====================================================
   27. KNOWLEDGEBASE & ANNOUNCEMENTS
   ===================================================== */

.kb-article-title,
.kbarticle h3 {
    color: var(--text) !important;
}
.kb-article-body,
.kbarticle .article-body {
    color: var(--text-muted) !important;
    line-height: 1.7;
}
.kbarticle .panel,
.kbarticle .well {
    background: var(--card-bg-solid) !important;
    border-color: var(--card-border) !important;
    color: var(--text) !important;
}

.announcement-single .article-content {
    color: var(--text-muted) !important;
    line-height: 1.7;
}
.announcement-single .article-meta {
    color: var(--text-lifted) !important;
    font-size: 0.85rem;
}

/* Markdown content */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
    color: var(--text) !important;
}
.markdown-content p,
.markdown-content li {
    color: var(--text-muted) !important;
    line-height: 1.7;
}
.markdown-content a {
    color: var(--primary-lifted) !important;
}
.markdown-content blockquote {
    border-left: 3px solid var(--primary) !important;
    padding-left: 1rem;
    color: var(--text-muted) !important;
}
.markdown-content img {
    border-radius: var(--rounding-sm);
    max-width: 100%;
}

/* =====================================================
   28. MISCELLANEOUS
   ===================================================== */

/* Client alerts popover */
.client-alerts li a {
    color: var(--text-muted) !important;
    transition: all 0.15s ease;
    padding: 8px 12px !important;
    border-radius: var(--rounding-sm);
}
.client-alerts li a:hover {
    color: var(--text) !important;
    background: var(--glass-bg-hover) !important;
}
.client-alerts li.none {
    color: var(--text-lifted) !important;
}

/* Return to admin */
.btn-return-to-admin {
    background: var(--bg-accented) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--rounding-sm) !important;
}
.btn-return-to-admin:hover {
    background: var(--glass-bg-hover) !important;
    color: var(--text) !important;
}

#fullpage-overlay {
    background: rgba(0, 0, 0, 0.9) !important;
    z-index: 1040 !important;
}
#fullpage-overlay .msg {
    color: var(--text) !important;
}

.pw-strength .progress {
    background-color: var(--bg-accented) !important;
}

.bootstrap-switch {
    border-color: var(--card-border) !important;
}
.bootstrap-switch .bootstrap-switch-label {
    background: var(--bg-accented) !important;
}

.jumbotron {
    background-color: var(--card-bg-solid) !important;
    color: var(--text) !important;
}

blockquote {
    border-left-color: var(--primary) !important;
    color: var(--text-muted) !important;
}

pre, code {
    background-color: var(--bg-accented) !important;
    color: var(--primary-800) !important;
    border-radius: var(--rounding-sm);
}
pre {
    border: 1px solid var(--card-border) !important;
    padding: 1rem;
}

.icon-btn-link,
.icon-summary {
    color: var(--text-muted) !important;
    transition: all 0.2s ease;
}
.icon-btn-link:hover,
.icon-summary:hover {
    color: var(--primary-lifted) !important;
    text-decoration: none !important;
}

.custom-file-label {
    background-color: var(--bg-accented) !important;
    border-color: var(--card-border) !important;
    color: var(--text) !important;
}
.custom-file-label::after {
    background: var(--primary) !important;
    color: #fff !important;
    border-left-color: var(--card-border) !important;
}

.progress {
    background-color: var(--bg-accented) !important;
    border-radius: var(--rounding-sm) !important;
    overflow: hidden;
}
.progress-bar {
    background: var(--primary) !important;
}

.toast {
    background-color: #1a1a1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}
.toast-header {
    background-color: var(--card-header-bg) !important;
    color: var(--text) !important;
    border-bottom-color: var(--card-border) !important;
}

.multiselect-container {
    background-color: #1a1a1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.multiselect-container > li > a {
    color: var(--text) !important;
}
.multiselect-container > li > a:hover {
    background-color: var(--glass-bg-hover) !important;
}

/* Logo — keep original colors */
.logo-img {
    filter: none;
    max-height: 48px;
}

.well {
    background-color: var(--card-bg-solid) !important;
    border-color: var(--card-border) !important;
    color: var(--text) !important;
}

.embed-responsive {
    border-radius: var(--rounding-sm);
    overflow: hidden;
}

.payment-method-card {
    background: var(--card-bg-solid) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--rounding-sm) !important;
}

.masspay-item {
    background: var(--card-bg-solid) !important;
    border-color: var(--card-border) !important;
}

.server-status {
    color: var(--text) !important;
}

.modal-confirm .btn-success {
    background: var(--primary) !important;
}

/* Verification banners */
.verification-banner,
.email-verification-banner {
    background: rgba(249, 115, 22, 0.1) !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
    color: #fb923c !important;
}

/* Hide ALL table loading spinners — pages load fast, they just flash */
#tableLoading,
.table-container #tableLoading,
div#tableLoading,
[id="tableLoading"] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Also show tables immediately instead of waiting for JS w-hidden removal */
table.table-list.w-hidden {
    display: table !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Style loading spinners for dark theme instead of hiding */
.fieldgroup-loading {
    color: var(--text-muted) !important;
}
.fieldgroup-loading i {
    color: var(--primary) !important;
}

/* Checkbox styling in tables */
.table input[type="checkbox"] {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
}

/* =====================================================
   MARKDOWN EDITOR (ticket reply textarea)
   ===================================================== */

.md-editor,
div.md-editor {
    border: 1px solid var(--card-border) !important;
    border-radius: var(--rounding-sm) !important;
    overflow: hidden;
    background-color: var(--bg-accented) !important;
}
.md-editor.active,
div.md-editor.active {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
.md-editor > .btn-toolbar {
    background-color: var(--bg-accented) !important;
    border-bottom: 1px solid var(--card-border) !important;
    padding: 0.35rem 0.5rem !important;
}
.md-editor > .btn-toolbar .btn {
    color: var(--text-muted) !important;
    background: transparent !important;
    border: none !important;
    padding: 0.3rem 0.5rem !important;
    border-radius: 4px !important;
    font-size: 0.85rem !important;
}
.md-editor > .btn-toolbar .btn:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.md-editor > .btn-toolbar .btn.active {
    color: var(--primary-lifted) !important;
    background: rgba(220, 38, 38, 0.1) !important;
}
.md-editor > textarea,
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
    background-color: var(--bg-accented) !important;
    border: none !important;
    border-top: 1px solid var(--card-border) !important;
    color: var(--text) !important;
    padding: 1rem !important;
    font-family: "Inter", sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.6;
}
.md-editor > textarea.markdown-editor::placeholder {
    color: var(--text-lifted) !important;
}
.md-editor > textarea.markdown-editor:focus {
    outline: none;
    box-shadow: none;
    background-color: var(--bg-accented) !important;
}
.md-editor > textarea.markdown-editor:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
/* Status bar at bottom of editor */
.md-editor .md-footer,
.markdown-editor-status,
.md-editor ~ .markdown-editor-status,
.md-editor + .markdown-editor-status {
    background-color: var(--bg-accented) !important;
    color: var(--text-muted) !important;
    border-top: 1px solid var(--card-border) !important;
    border-bottom: none !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
}

/* Container markdown editor (bootstrap-markdown wrapper) */
.container-markdown-editor {
    background: var(--bg-accented) !important;
    border-color: var(--card-border) !important;
}

/* Any remaining white backgrounds inside md-editor */
.md-editor *:not(.btn):not(i) {
    background-color: inherit;
}

/* Fullscreen markdown editor — dark mode override */
.md-editor.md-fullscreen-mode {
    background: var(--bg) !important;
    z-index: 99999 !important;
}
.md-editor.md-fullscreen-mode .md-header,
.md-editor.md-fullscreen-mode > .btn-toolbar {
    background: transparent !important;
}
.md-editor.md-fullscreen-mode .btn {
    color: var(--text-muted) !important;
    background: transparent !important;
}
.md-editor.md-fullscreen-mode .btn:hover,
.md-editor.md-fullscreen-mode .btn:focus,
.md-editor.md-fullscreen-mode .btn:active,
.md-editor.md-fullscreen-mode .btn.active {
    color: var(--text) !important;
}
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview,
.md-editor.md-fullscreen-mode > textarea,
.md-editor.md-fullscreen-mode > textarea.markdown-editor {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: none !important;
    caret-color: var(--text);
}
.md-editor.md-fullscreen-mode .md-input:hover,
.md-editor.md-fullscreen-mode .md-input:focus,
.md-editor.md-fullscreen-mode > textarea:focus {
    color: var(--text) !important;
    background: var(--bg) !important;
}
.md-editor.md-fullscreen-mode .md-preview {
    color: var(--text-muted) !important;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a {
    color: var(--text-muted) !important;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover {
    color: var(--text) !important;
}
/* Also fix body overflow class */
.md-nooverflow {
    background: var(--bg) !important;
}

/* =====================================================
   29. SMOOTH PAGE TRANSITIONS
   ===================================================== */

/* Page content fade-in */
#main-body {
    animation: pageIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pageIn {
    from { opacity: 0; transform: translateY(6px) scale(0.999); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Page-exit: fade entire viewport for seamless feel */
body.page-leaving {
    pointer-events: none;
}
body.page-leaving #main-body,
body.page-leaving footer.footer {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
                transform 0.15s cubic-bezier(0.4, 0, 1, 1) !important;
    will-change: opacity, transform;
}



/* Global smooth transitions for interactive elements */
* {
    -webkit-tap-highlight-color: transparent;
}

/* =====================================================
   30. NOTIFICATION POPOVER (dark redesign)
   ===================================================== */

.popover-user-notifications,
.popover[id*="accountNotifications"] {
    background-color: #141416 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--rounding-md) !important;
    min-width: 320px !important;
    max-width: 380px !important;
    padding: 0 !important;
    overflow: hidden;
}
.popover-user-notifications .popover-body,
.popover[id*="accountNotifications"] .popover-body {
    padding: 0 !important;
}
.popover-user-notifications {
    font-family: "Inter", sans-serif !important;
}
.popover-user-notifications ul,
.client-alerts {
    list-style: none !important;
    margin: 0 !important;
    padding: 0.5rem !important;
}
.popover-user-notifications ul li,
.client-alerts li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    min-height: auto !important;
    padding: 0 !important;
}
.popover-user-notifications ul li:last-child,
.client-alerts li:last-child {
    border-bottom: none !important;
    border: none !important;
}
.popover-user-notifications ul li a,
.client-alerts li a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    color: var(--text-muted) !important;
    padding: 0.75rem 0.85rem !important;
    border-radius: var(--rounding-sm) !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}
.popover-user-notifications ul li a:hover,
.client-alerts li a:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.popover-user-notifications ul li i,
.popover-user-notifications ul li i.fas,
.popover-user-notifications ul li i.far,
.client-alerts li a i {
    font-size: 1.1rem !important;
    margin-top: 0.1rem;
    flex-shrink: 0;
    float: none !important;
    padding-top: 0 !important;
}
.popover-user-notifications ul li i.fa-exclamation-circle,
.popover-user-notifications ul li i.fas.fa-exclamation-circle,
.client-alerts li a i.fa-exclamation-circle {
    color: var(--primary-800) !important;
}
.popover-user-notifications ul li i.fa-exclamation-triangle,
.popover-user-notifications ul li i.fa-warning,
.popover-user-notifications ul li i.fas.fa-warning,
.client-alerts li a i.fa-exclamation-triangle {
    color: #fbbf24 !important;
}
.popover-user-notifications ul li i.fa-info-circle,
.client-alerts li a i.fa-info-circle {
    color: #60a5fa !important;
}
.popover-user-notifications ul li i.fa-check-circle,
.popover-user-notifications ul li i.fas.fa-check-circle,
.popover-user-notifications ul li i.far.fa-check-circle,
.client-alerts li a i.fa-check-circle {
    color: #4ade80 !important;
}
.popover-user-notifications ul li .message,
.client-alerts li a .message {
    margin-left: 0 !important;
    flex: 1;
}
.popover-user-notifications ul li.none,
.client-alerts li.none {
    color: var(--text-muted) !important;
    padding: 1.25rem !important;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 400 !important;
    min-height: auto !important;
}

/* =====================================================
   31. PAYMENT METHODS / CREDIT CARD FORM
   ===================================================== */

/* Form labels — ensure ALL labels on payment/card forms are light */
.frm-credit-card-input label,
.frm-credit-card-input .control-label,
.fieldgroup-creditcard label,
.fieldgroup-creditcard .control-label,
.fieldgroup-bankaccount label,
.fieldgroup-bankaccount .control-label,
.fieldgroup-auxfields label,
.fieldgroup-auxfields .control-label,
.fieldgroup-remoteinput label,
.cc-details label {
    color: var(--text) !important;
}
/* All card/form content text */
.frm-credit-card-input,
.frm-credit-card-input .form-group,
.frm-credit-card-input .col-md-8,
.frm-credit-card-input .col-md-4,
.fieldgroup-creditcard,
.fieldgroup-bankaccount,
.fieldgroup-auxfields {
    color: var(--text) !important;
}

/* Radio buttons / icheck styling */
.form-check-inline,
.form-check-inline label {
    color: var(--text) !important;
}
.icheck-button,
input[type="radio"].icheck-button {
    accent-color: var(--primary) !important;
}

/* iCheck plugin complete override — replace blue sprite with CSS-only dark radio/checkbox */
.iradio_square-blue,
.icheckbox_square-blue {
    background-image: none !important;
    background-color: transparent !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--neutral-500) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle !important;
    margin-right: 8px !important;
    transition: all 0.15s ease;
    position: relative;
    cursor: pointer;
}
.icheckbox_square-blue {
    border-radius: 4px !important;
}
.iradio_square-blue.hover,
.icheckbox_square-blue.hover {
    background-image: none !important;
    border-color: var(--primary) !important;
}
.iradio_square-blue.checked {
    background-image: none !important;
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
    box-shadow: inset 0 0 0 3px var(--bg) !important;
}
.icheckbox_square-blue.checked {
    background-image: none !important;
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
}
.icheckbox_square-blue.checked::after {
    content: '\f00c';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: #fff;
    position: absolute;
}
.iradio_square-blue.disabled,
.icheckbox_square-blue.disabled {
    background-image: none !important;
    opacity: 0.4;
    cursor: default;
}
.iradio_square-blue.checked.disabled,
.icheckbox_square-blue.checked.disabled {
    background-image: none !important;
}

/* Space radio options better */
.form-check-inline + .form-check-inline {
    margin-left: 1.5rem !important;
}
/* Better form check alignment for payment method type row */
.frm-credit-card-input .form-check-inline {
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    margin-right: 1.5rem !important;
    margin-bottom: 0.5rem;
}

/* Card number / payment inputs — force light text even when JS adds card-type classes */
.cc-number-field,
.cc-number-field.identified,
.cc-number-field.visa,
.cc-number-field.mastercard,
.cc-number-field.amex,
.cc-number-field.discover,
.cc-number-field.dinersclub,
.cc-number-field.maestro,
.cc-number-field.jcb,
.cc-number-field.unionpay,
input[name="ccnumber"],
input[name="ccexpiry"],
input[name="ccstart"],
input[name="cardcvv"],
input[name="cccvv"],
#inputCardNumber,
#inputCardExpiry,
#inputCardStart,
#inputCardCvc,
#inputCardCvv {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

/* Stripe Elements / remote payment iframe styling — hide when no content */
#paymentGatewayInput:empty {
    display: none !important;
}
#paymentGatewayInput {
    border-radius: var(--rounding-sm);
}
#paymentGatewayInput:not(:empty) {
    background-color: var(--bg-accented) !important;
    padding: 0.5rem 0;
}
#paymentGatewayInput .form-group {
    color: var(--text) !important;
}
#paymentGatewayInput label {
    color: var(--text) !important;
}

/* Remote input area (Stripe/PayPal iframe) — hide when empty */
#tokenGatewayRemoteInputOutput:empty,
#tokenGatewayAssistedOutput:empty {
    display: none !important;
}
#tokenGatewayRemoteInputOutput,
#tokenGatewayAssistedOutput {
    color: var(--text) !important;
}
#tokenGatewayAssistedOutput label {
    color: var(--text) !important;
}

/* Stripe Elements iframe — invert colors for dark mode (can't style cross-origin) */
#paymentGatewayInput iframe,
#tokenGatewayAssistedOutput iframe,
.fieldgroup-creditcard iframe[src*="stripe"],
.fieldgroup-creditcard iframe[src*="js.stripe.com"] {
    filter: invert(0.88) hue-rotate(180deg) !important;
    border-radius: var(--rounding-sm);
}

/* iFrame for 3DS auth */
.auth3d-area {
    border: 1px solid var(--card-border) !important;
    border-radius: var(--rounding-sm);
    background: #fff;
}

/* Field error messages */
.field-error-msg {
    color: var(--primary-800) !important;
    font-size: 0.8rem;
}

/* Billing contacts in payment form */
#billingContactsContainer label {
    color: var(--text) !important;
}
#billingContactsContainer .billing-contact-details {
    color: var(--text-muted) !important;
}

/* Payment method list table */
#payMethodList td,
#payMethodList th {
    color: var(--text) !important;
    border-color: var(--card-border) !important;
}
#payMethodList td i {
    color: var(--text-muted) !important;
    font-size: 1.25rem;
}

/* =====================================================
   32. LOGIN PAGE (enhanced design)
   ===================================================== */

.login-form .card {
    background: var(--card-bg-solid) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    max-width: 440px;
    margin: 2rem auto;
    border-radius: var(--rounding-lg) !important;
    overflow: hidden;
}
.login-form .card-body {
    padding: 2.5rem 2.5rem 2rem !important;
}
.login-form .card-body .h3,
.login-form .card-body h6.h3 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    margin-bottom: 0.3rem !important;
}
.login-form .card-body > .mb-4 > p {
    color: var(--text-muted) !important;
    font-size: 1rem;
}
.login-form .form-group {
    margin-bottom: 1.25rem !important;
}
.login-form .form-control-label,
.login-form label.form-control-label {
    color: var(--text) !important;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: block;
}
/* Login inputs — seamless icon + input */
.login-form .input-group {
    background: var(--bg-accented) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--rounding-sm) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.login-form .input-group.input-group-merge {
    position: relative;
}
.login-form .input-group .input-group-prepend {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 4;
    display: flex;
    align-items: center;
}
.login-form .input-group .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    padding: 0 1rem;
    position: static;
    height: auto;
    pointer-events: none;
    font-size: 0.9rem;
}
.login-form .input-group .form-control {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
    padding: 0.82rem 1rem 0.82rem 2.8rem !important;
    font-size: 0.975rem !important;
    box-shadow: none !important;
    height: auto !important;
}
.login-form .input-group .form-control::placeholder {
    color: var(--text-lifted) !important;
}
.login-form .input-group .form-control:focus {
    box-shadow: none !important;
}
.login-form .input-group:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important;
}
.login-form .input-group .input-group-append {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 5;
    display: flex;
    align-items: center;
}
.login-form .btn-reveal-pw {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    pointer-events: auto;
    padding: 0 1rem;
}
.login-form .btn-reveal-pw:hover {
    color: var(--text) !important;
}
/* Login submit button — full width, tall */
.login-form .btn-primary {
    width: 100% !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: var(--rounding-sm) !important;
    letter-spacing: 0.01em;
}
/* Action row: button + remember me side by side */
.login-form .float-left {
    float: none !important;
    width: 100%;
    margin-bottom: 0.85rem;
}
.login-form .text-right {
    text-align: left !important;
}
/* Remember Me — styled checkbox row */
.login-form .text-right label,
.login-form label:has(.form-check-input) {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted) !important;
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}
.login-form .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    background: var(--bg-accented) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin: 0 !important;
    vertical-align: middle;
}
.login-form .form-check-input:checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}
.login-form .form-check-input:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.login-form .card-footer {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 1.1rem 2.5rem !important;
    font-size: 0.9rem;
}
.login-form .card-footer small {
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
}
.login-form .card-footer a {
    color: var(--primary-lifted) !important;
    font-weight: 600;
}

/* Social sign-in — "or" divider + dark-themed wrapper */
.login-or-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1.1rem;
}
.login-or-divider::before,
.login-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.login-or-divider span {
    color: var(--text-muted);
    font-size: 0.775rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}
.social-signin-btns {
    text-align: center;
    padding: 0.75rem 1rem;
    background: var(--bg-accented);
    border: 1px solid var(--border);
    border-radius: var(--rounding-sm);
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-signin-btns .btn {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
    border-radius: 0 !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500;
    font-size: 0.95rem;
    width: 100%;
    transition: background 0.15s ease;
}
.social-signin-btns .btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* "Sign Up" / "Or" divider on login/register */
.sub-heading,
#registration .sub-heading {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    margin: 1.5rem 0 !important;
}
.sub-heading span,
#registration .sub-heading span {
    background-color: var(--bg) !important;
    color: var(--text-muted) !important;
    font-size: 0.85rem;
    font-weight: 500;
}
.sub-heading-borderless span {
    background-color: var(--bg) !important;
    color: var(--text-muted) !important;
}

/* Order Now CTA button (non-logged-in secondary navbar) */
.header-order-btn {
    background: var(--primary) !important;
    color: #fff !important;
    border: 1px solid var(--primary-accented) !important;
    border-radius: var(--rounding-sm) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.9rem !important;
    transition: all 0.15s ease;
    text-decoration: none !important;
    display: flex !important;
    align-items: center;
    gap: 0.35rem;
}
.header-order-btn i {
    font-size: 0.75rem;
}
.header-order-btn:hover {
    background: var(--primary-lifted) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

/* =====================================================
   LOGIN PAGE — Two-column pitch layout
   ===================================================== */

/* Negative margin to break out of the default content padding */
.login-page-layout {
    display: flex;
    min-height: calc(100vh - 160px);
    margin: -1.5rem -15px 0;
    gap: 0;
    overflow: hidden;
    border-radius: var(--rounding-lg);
    border: 1px solid var(--border);
    background: var(--card-bg-solid);
}

/* LEFT: pitch / marketing panel */
.login-pitch-panel {
    flex: 1 1 58%;
    background: linear-gradient(
        135deg,
        rgba(30, 8, 10, 0.98) 0%,
        rgba(20, 6, 8, 0.98) 50%,
        rgba(15, 4, 6, 0.98) 100%
    );
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 5.5rem 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Decorative red glow background */
.login-pitch-panel::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -120px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.14) 0%, transparent 65%);
    pointer-events: none;
}
.login-pitch-panel::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.login-pitch-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
}

/* Badge / trust indicator */
.login-pitch-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.28);
    color: var(--primary-lifted);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    border-radius: 2rem;
    margin-bottom: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.login-pitch-badge i {
    font-size: 0.85rem;
}

.login-pitch-headline {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.04em;
    color: var(--text);
    margin-bottom: 1rem;
}

.login-pitch-sub {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 2.5rem;
    max-width: 460px;
}

/* Feature list */
.login-pitch-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.login-pitch-feature {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

.login-pitch-feature-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: var(--rounding-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-lifted);
    font-size: 1rem;
    margin-top: 2px;
}

.login-pitch-feature-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.login-pitch-feature-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* CTA button row */
.login-pitch-cta-row {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.login-pitch-cta-btn {
    background: var(--primary) !important;
    color: #fff !important;
    border: 1px solid var(--primary-accented) !important;
    border-radius: var(--rounding-sm) !important;
    font-size: 0.925rem !important;
    font-weight: 600 !important;
    padding: 0.65rem 1.5rem !important;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.15s ease;
    text-decoration: none !important;
}
.login-pitch-cta-btn:hover {
    background: var(--primary-lifted) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
}

.login-pitch-discord-btn {
    background: rgba(114, 137, 218, 0.1) !important;
    color: #7289da !important;
    border: 1px solid rgba(114, 137, 218, 0.25) !important;
    border-radius: var(--rounding-sm) !important;
    font-size: 0.925rem !important;
    font-weight: 600 !important;
    padding: 0.65rem 1.5rem !important;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.15s ease;
    text-decoration: none !important;
}
.login-pitch-discord-btn:hover {
    background: rgba(114, 137, 218, 0.18) !important;
    color: #7289da !important;
    transform: translateY(-1px);
}

/* RIGHT: form panel */
.login-form-panel {
    flex: 0 0 auto;
    width: 460px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5rem 3rem;
    background: var(--card-bg-solid);
}

/* Override the card styles inside the new layout */
.login-form-panel .login-form .card {
    margin: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.login-form-panel .login-form .card-body {
    padding: 0 0 1.5rem !important;
}
.login-form-panel .login-form .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--border) !important;
    padding: 1rem 0 0 !important;
    margin-top: 0.5rem;
}

/* Responsive: stack on smaller screens */
@media (max-width: 991.98px) {
    .login-page-layout {
        flex-direction: column;
        min-height: unset;
        margin: 0;
    }
    .login-form-panel {
        width: 100%;
        padding: 2rem 1.5rem;
    }
}

.iti {
    width: 100%;
}
.iti__flag-container {
    z-index: 5;
}
.iti__selected-flag {
    background: transparent !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0 8px 0 12px !important;
}
.iti__selected-dial-code {
    color: var(--text) !important;
    font-size: 0.875rem;
}
.iti__arrow {
    border-top-color: var(--text-muted) !important;
}
.iti__arrow--up {
    border-bottom-color: var(--text-muted) !important;
}
.iti__country-list {
    background-color: var(--bg-accented) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    color: var(--text) !important;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.iti__country-list .iti__country {
    background-color: var(--bg-accented) !important;
    color: var(--text) !important;
}
.iti__country-list .iti__country-name {
    color: var(--text) !important;
}
.iti__country-list .iti__country:hover,
.iti__country-list .iti__country.iti__highlight {
    background-color: rgba(255, 255, 255, 0.07) !important;
}
.iti__country-list .iti__divider {
    border-bottom-color: var(--border) !important;
}
.iti__dial-code {
    color: var(--text-muted) !important;
}

/* =====================================================
   34. PASSWORD RESET PAGE
   ===================================================== */

.password-reset-wrapper {
    max-width: 480px;
    margin: 2rem auto;
}
.password-reset-card {
    background: var(--card-bg-solid);
    border: 1px solid var(--border);
    border-radius: var(--rounding-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.password-reset-card-body {
    padding: 2.5rem;
}
.password-reset-icon {
    width: 52px;
    height: 52px;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--rounding-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-lifted);
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}
.password-reset-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: 0.35rem;
}
.password-reset-sub {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    line-height: 1.55;
}
.password-reset-card-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--border);
    padding: 1rem 2.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.password-reset-card-footer a {
    color: var(--primary-lifted);
    font-weight: 600;
    text-decoration: none;
}
.password-reset-card-footer a:hover {
    color: var(--primary-lifted);
    text-decoration: underline;
}
/* Inputs inside password-reset reuse login-form input styles */
.password-reset-card .form-group {
    margin-bottom: 1.1rem;
}
.password-reset-card label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.4rem;
    display: block;
}
.password-reset-card .form-control {
    background: var(--bg-accented) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--rounding-sm) !important;
    color: var(--text) !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.95rem !important;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.password-reset-card .form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.13) !important;
    outline: none !important;
}
.password-reset-card .form-control::placeholder {
    color: var(--text-lifted) !important;
}
.password-reset-card .btn-primary {
    width: 100% !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: var(--rounding-sm) !important;
    margin-top: 0.5rem;
}

/* =====================================================
   35. REGISTER PAGE — glassy centered
   ===================================================== */

/* ── Page wrapper ── */
.reg-page-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

/* ── Two-column top row (Personal + Billing) ── */
.reg-top-row {
    margin-left: -0.6rem;
    margin-right: -0.6rem;
    margin-bottom: 1rem;
}
.reg-top-row > [class*="col-"] {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
.reg-top-row .reg-glass-card {
    margin-bottom: 0;
}
@media (max-width: 991.98px) {
    .reg-top-row > [class*="col-"] {
        margin-bottom: 0.75rem;
    }
}

/* ── Page header ── */
.reg-page-header {
    text-align: center;
    margin-bottom: 2.75rem;
}
.reg-page-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--rounding-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary-lifted);
}
.reg-page-title {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 0.3rem;
}
.reg-page-sub {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Prominent OAuth ── */
.reg-oauth-prominent {
    margin-bottom: 0;
}
.reg-oauth-prominent .sub-heading {
    display: none;
}
.reg-oauth-prominent .social-signin-btns {
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--rounding-sm);
    padding: 1rem;
    margin-bottom: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.reg-oauth-prominent .social-signin-btns:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}
.reg-oauth-prominent .providerLinkingFeedback {
    margin-top: 0.75rem;
}
.providerLinkingFeedback:not(:empty) {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    max-width: 360px;
    background: rgba(20, 20, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--rounding);
    padding: 0.875rem 1.125rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.providerLinkingFeedback p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
}
.providerLinkingFeedback p strong {
    color: var(--success);
    font-weight: 600;
}
.providerLinkingFeedback p strong + * {
    color: var(--text);
}

/* ── "or" divider ── */
.reg-or-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0 2rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.reg-or-divider::before,
.reg-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Glass section cards ── */
.reg-glass-card {
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--rounding-sm);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.reg-glass-card:focus-within {
    border-color: rgba(255, 255, 255, 0.15);
}
.reg-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
}
.reg-card-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--primary-lifted);
}
.reg-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0;
}
.reg-card-body {
    padding: 1.5rem 1.6rem 1rem;
}

/* ── Field labels ── */
.reg-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.reg-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.65;
}

/* ── Password strength ── */
#registration .password-strength-meter .progress {
    height: 5px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
#registration #passwordStrengthTextLabel {
    color: var(--text-muted) !important;
    margin-top: 0.35rem;
    font-size: 0.78rem;
}

/* ── Generate password button ── */
#registration .generate-password {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
    padding: 0.38rem 0.75rem !important;
    border-radius: var(--rounding-sm) !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    transition: border-color 0.15s ease, color 0.15s ease !important;
}
#registration .generate-password:hover {
    border-color: rgba(220, 38, 38, 0.45) !important;
    color: var(--text) !important;
}

/* ── Submit area ── */
.reg-submit-area {
    padding: 1.5rem 0 0.5rem;
}
.reg-tos-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    user-select: none;
}
.reg-tos-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex-shrink: 0;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 4px !important;
    cursor: pointer;
    position: relative;
    margin-top: 2px;
    display: inline-block !important;
    padding: 0 !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}
.reg-tos-checkbox:checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}
.reg-tos-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.reg-tos-link {
    color: var(--primary-lifted) !important;
    text-decoration: underline !important;
}
.reg-submit-btn {
    width: 100% !important;
    padding: 0.85rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: var(--rounding-sm) !important;
    letter-spacing: 0.01em !important;
}
.reg-mini-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 0.4rem !important;
}
.reg-muted-text {
    color: var(--text-muted);
    font-size: 0.84rem;
    margin-bottom: 0.75rem;
}

/* ── Sign-in + locale ── */
.register-signin-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.register-signin-link a {
    color: var(--primary-lifted);
    font-weight: 600;
    text-decoration: none;
}
.reg-locale-row {
    text-align: center;
    margin-top: 0.75rem;
}
.reg-locale-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--rounding-sm);
    transition: color 0.15s ease;
}
.reg-locale-btn:hover {
    color: var(--text) !important;
}

/* ── Hide WHMCS-injected state dropdown on register page ── */
.tpl-clientregister select[name="state"],
.tpl-clientregister [id^="stateselect"],
.tpl-clientregister .stateDiv,
.tpl-clientregister #stateDiv {
    display: none !important;
}

/* ── Generate-password modal: copy icon fix ── */
#modalGeneratePassword .btn i,
#modalGeneratePassword .btn [class*="fa-"],
.modal .generate-password-copy i,
.modal .generate-password-copy [class*="fa-"],
.modal .btn-default i,
.modal .btn-secondary i {
    color: inherit !important;
    filter: none !important;
}
#modalGeneratePassword .btn-default,
#modalGeneratePassword .btn-secondary,
.modal-content .btn-default,
.modal-content .btn-secondary {
    color: var(--text) !important;
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.15) !important;
}
#modalGeneratePassword .btn-default:hover,
#modalGeneratePassword .btn-secondary:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.22) !important;
}

/* ── Custom-field alignment ── */
.reg-card-body .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
.reg-card-body .form-group .control {
    flex: 1;
}
.reg-card-body .control input,
.reg-card-body .control textarea,
.reg-card-body .control select {
    width: 100% !important;
}

/* ── All inputs / selects / textareas ── */
#registration input[type="text"],
#registration input[type="email"],
#registration input[type="password"],
#registration input[type="tel"],
#registration input[type="number"],
#registration textarea,
#registration select,
#registration .form-control,
#registration input.field,
#registration select.field {
    background: var(--bg-accented) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--rounding-sm) !important;
    padding: 0.65rem 0.9rem !important;
    font-size: 0.875rem !important;
    height: auto !important;
    width: 100% !important;
    display: block !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    font-family: "Inter", sans-serif !important;
    box-shadow: none !important;
}
#registration input[type="text"]:focus,
#registration input[type="email"]:focus,
#registration input[type="password"]:focus,
#registration input[type="tel"]:focus,
#registration textarea:focus,
#registration select:focus,
#registration .form-control:focus,
#registration input.field:focus,
#registration select.field:focus {
    border-color: rgba(220, 38, 38, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
    outline: none !important;
}
#registration input::placeholder,
#registration textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.55 !important;
}
/* Select custom chevron */
#registration select,
#registration select.form-control,
#registration select.field {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a1a1aa' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.9rem center !important;
    padding-right: 2.5rem !important;
    cursor: pointer !important;
}

/* ── Password strength ── */
#registration .password-strength-meter .progress {
    height: 6px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
#registration #passwordStrengthTextLabel {
    color: var(--text-muted) !important;
    margin-top: 0.35rem;
}

/* ── Generate password button ── */
#registration .generate-password {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: var(--rounding-sm) !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
}
#registration .generate-password:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: var(--text) !important;
}

/* ── Submit area ── */
.reg-submit-area {
    padding: 0.5rem 0;
}
.reg-tos-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    user-select: none;
}
.reg-tos-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex-shrink: 0;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    background: var(--bg-accented) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 4px !important;
    cursor: pointer;
    position: relative;
    margin-top: 2px;
    display: inline-block !important;
    padding: 0 !important;
}
.reg-tos-checkbox:checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}
.reg-tos-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.reg-tos-link {
    color: var(--primary-lifted) !important;
    text-decoration: underline !important;
}
.reg-submit-btn {
    width: 100% !important;
    padding: 0.85rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: var(--rounding-sm) !important;
    letter-spacing: 0.01em !important;
}
.reg-mini-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 0.5rem !important;
}
.reg-muted-text {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

/* ── Sign-in + locale ── */
.register-signin-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.register-signin-link a {
    color: var(--primary-lifted);
    font-weight: 600;
    text-decoration: none;
}
.reg-locale-row {
    text-align: center;
    margin-top: 0.75rem;
}
.reg-locale-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--rounding-sm);
    transition: color 0.15s ease;
}
.reg-locale-btn:hover {
    color: var(--text) !important;
}

/* ── Control/custom-field alignment ── */
.reg-fields-section .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
.reg-fields-section .form-group .control {
    flex: 1;
}
.reg-fields-section .control input,
.reg-fields-section .control textarea,
.reg-fields-section .control select {
    width: 100% !important;
}

/* =====================================================
   36. HIDE WHMCS FULLPAGE OVERLAY during transitions
   ===================================================== */

/* Suppress the overlay during our page-leaving transition so it never flashes */
body.page-leaving #fullpage-overlay,
#fullpage-overlay.w-hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =====================================================
   37. RESPONSIVE
   ===================================================== */

@media (max-width: 767.98px) {
    .table-responsive {
        border: none !important;
    }
    .dash-stat-card {
        padding: 0.85rem;
        gap: 0.65rem;
    }
    .dash-stat-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 1rem;
    }
    .dash-stat-value {
        font-size: 1.25rem;
    }
    .service-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .service-billing-grid {
        grid-template-columns: 1fr 1fr;
    }
    .billing-item {
        padding: 0.75rem 1rem;
    }
    .detail-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    .detail-label {
        flex: none;
    }
}

/* =====================================================
   38. ERROR PAGES
   ===================================================== */

.error-page-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem 5rem;
    min-height: 40vh;
}
.error-code {
    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    color: transparent;
    background: linear-gradient(135deg, var(--primary) 0%, rgba(220,38,38,0.35) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 0.25rem;
    user-select: none;
}
.error-icon-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--rounding-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-lifted);
}
.error-title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    margin: 0 0 0.6rem;
}
.error-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 440px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.error-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}
.error-actions .btn {
    padding: 0.6rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}
.error-actions .btn-outline-secondary {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: var(--text-muted) !important;
}
.error-actions .btn-outline-secondary:hover {
    border-color: rgba(255,255,255,0.3) !important;
    color: var(--text) !important;
}
.error-referrer-note {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--rounding-sm);
    padding: 0.6rem 1rem;
    max-width: 540px;
}
.error-referrer-note a {
    color: var(--primary-lifted);
    word-break: break-all;
}

/* =====================================================
   39. PAGE LOADING BAR
   ===================================================== */

/* Sits inside <header> and overlays the ::before accent line */
#page-loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    opacity: 0;
    background: linear-gradient(90deg, var(--primary), var(--primary-lifted, #ef4444), var(--primary));
    box-shadow: 0 0 8px var(--primary);
    pointer-events: none;
    z-index: 10;
    transition: none;
    will-change: width, opacity;
}