/* Meta/Cyberpunk Premium Theme V3 */
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap');

:root {
    --bg-deep: #05050A;
    --bg-glass: rgba(20, 25, 40, 0.65);

    --accent-cyan: #00F0FF;
    --accent-blue: #0066FF;
    --accent-gradient: linear-gradient(135deg, #00F0FF 0%, #0066FF 100%);

    --text-primary: #FFFFFF;
    --text-secondary: #94A3B8;

    --border-glass: rgba(255, 255, 255, 0.08);
    --glow-primary: 0 0 20px rgba(0, 240, 255, 0.15);
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: 'Fira Mono', monospace !important;
    font-weight: normal !important;

    /* Advanced Cyberpunk Animated Background */
    background-image:
        radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.05) 0%, transparent 50%),
        linear-gradient(0deg, transparent 24%, rgba(0, 255, 255, .03) 25%, rgba(0, 255, 255, .03) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, .03) 75%, rgba(0, 255, 255, .03) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(0, 255, 255, .03) 25%, rgba(0, 255, 255, .03) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, .03) 75%, rgba(0, 255, 255, .03) 76%, transparent 77%, transparent);
    background-size: 100% 100%, 50px 50px, 50px 50px;
    background-position: center, 0 0, 0 0;
    overflow-x: hidden;
    animation: CyberGridMove 20s linear infinite;
}

/* Force Fira Mono on all elements except icons */
*:not(i):not(.fas):not(.far):not(.fab):not(.fa):not(.glyphicon) {
    font-family: 'Fira Mono', monospace !important;
}


@keyframes CyberGridMove {
    0% {
        background-position: center, 0 0, 0 0;
    }

    100% {
        background-position: center, 0 50px, 50px 0;
    }
}

/* Page Entrance Animation */
body>* {
    animation: PageFadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes PageFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Fira Mono', monospace;
    font-weight: normal;
    color: var(--text-primary);
    font-weight: 700;
}

a {
    color: var(--accent-cyan);
    transition: 0.3s;
}

a:hover {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 10px var(--accent-cyan);
}

/* --- Single Header Layout (Meta Style) --- */
#header,
#top-nav {
    display: none;
}

/* Hide old header elements */

.header-main {
    position: sticky;
    top: 20px;
    z-index: 1000;
    margin-bottom: 40px;
}

.header-main .container {
    background: rgba(10, 15, 25, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 100px;
    padding: 10px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.header-logo img {
    height: 32px;
}

.header-logo .logo-text {
    font-family: 'Fira Mono', monospace;
    font-weight: normal;
    font-size: 24px;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    margin-right: 40px;
    /* Add spacing between Logo and Menu */
}

/* Navigation - Centered */
/* Navigation - Centered */
.main-nav>ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 15px;
    /* Reduced from 30px to prevent wrapping */
    align-items: center;
    /* Ensure vertical alignment */
}

.main-nav a {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    /* Reduced from 14px */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* Prevent text wrapping */
    display: inline-flex;
    align-items: center;
}

.main-nav .caret {
    margin-left: 5px;
    border-top-color: var(--text-secondary);
}

.main-nav a:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.main-nav a:hover .caret {
    border-top-color: #fff;
}

/* Right Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Compact spacing */
}

.nav-link-login {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.btn-glow {
    background: var(--accent-gradient);
    color: #000;
    border: none;
    border-radius: 50px;
    padding: 8px 20px;
    /* Reduced padding */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
    transition: 0.3s;
    white-space: nowrap;
}

.btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
    filter: brightness(1.1);
    color: #000;
}

/* --- Hero Section --- */
.hero-section {
    padding: 80px 0;
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
}

.text-gradient {
    background: linear-gradient(to right, #fff, #94A3B8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 500px;
}

.hero-subtitle.center-block {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    display: block;
}

/* --- Glass Cards --- */
.card,
.panel {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    /* More rounded */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.panel-default>.panel-heading {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-glass);
    color: #fff;
    font-weight: 700;
    padding: 15px 25px;
    border-radius: 20px 20px 0 0;
}

.panel-body {
    padding: 25px;
}

.panel-footer {
    background: transparent;
    border-top: 1px solid var(--border-glass);
    border-radius: 0 0 20px 20px;
}

/* --- Forms --- */
.form-control {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    color: #fff;
    height: 48px;
    padding: 10px 15px;
}
/* intl-tel-input: handled in PHONE INPUT FIX section below */

.form-control:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

/* --- Footer --- */
#footer {
    border-top: 1px solid var(--border-glass);
    padding: 60px 0;
    margin-top: 80px;
    color: var(--text-secondary);
    background: transparent;
}

/* --- FIXES FOR BUGGY UI --- */

/* 1. Dropdown Menus (Fixing the white box) */
.dropdown-menu .nav-header {
    display: none !important;
    /* The user sees '-----' likely from a nav-header separator being rendered as text */
}

.dropdown-menu {
    background: #0A0F19;
    /* Solid dark background for readability */
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    padding: 8px;
    margin-top: 15px;
    /* Spacing from navbar */
}

.dropdown-menu>li>a {
    color: #cbd5e1;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background: rgba(0, 240, 255, 0.1);
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
}

.dropdown-menu .divider {
    background-color: var(--border-glass);
}

/* 2. Fix White Background Issue */
/* Force all main containers to be transparent so the body gradient shows through */
#main-body,
.main-content,
.container,
section {
    background-color: transparent !important;
}

#main-body {
    flex: 1 0 auto;
}

#footer {
    flex-shrink: 0;
}

/* 4. Scrollbar Polish */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #05050A;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

/* --- Hero Product Selector (New) --- */
.hero-products {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.hero-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    padding: 40px 30px;
    width: 280px;
    text-align: left;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    display: block;
}

.hero-card:hover {
    transform: translateY(-10px) scale(1.02);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-cyan);
    box-shadow: 0 20px 50px rgba(0, 240, 255, 0.15);
}

.hero-card-icon {
    font-size: 42px;
    margin-bottom: 25px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero-card h3 {
    font-size: 20px;
    color: #fff;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.hero-card p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 25px 0;
    line-height: 1.5;
}

.hero-card .action-link {
    color: var(--accent-cyan);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-card:hover .action-link {
    gap: 12px;
    /* Arrow slide animation */
}

/* --- Advanced Animations --- */

/* Floating Effect for Cards */
@keyframes floatY {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.hero-card {
    animation: floatY 6s ease-in-out infinite;
}

.hero-card:nth-child(2) {
    animation-delay: 1s;
    /* Stagger animations */
}

.hero-card:nth-child(3) {
    animation-delay: 2s;
}

/* Neon Glow Pulse */
@keyframes neonPulse {
    0% {
        box-shadow: 0 0 5px rgba(0, 240, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 240, 255, 0.6), 0 0 40px rgba(0, 240, 255, 0.2);
    }

    100% {
        box-shadow: 0 0 5px rgba(0, 240, 255, 0.2);
    }
}

.btn-glow {
    animation: neonPulse 3s infinite;
}

/* Text Glitch / Flicker Effect for Branding */
@keyframes textFlicker {
    0% {
        opacity: 1;
        text-shadow: 0 0 10px var(--accent-cyan);
    }

    3% {
        opacity: 0.8;
        text-shadow: 2px 0 var(--accent-blue);
    }

    5% {
        opacity: 1;
        text-shadow: 0 0 10px var(--accent-cyan);
    }

    98% {
        opacity: 1;
        text-shadow: 0 0 10px var(--accent-cyan);
    }

    99% {
        opacity: 0.9;
        text-shadow: -2px 0 #ff00de;
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 10px var(--accent-cyan);
    }
}

.hero-title span {
    animation: textFlicker 5s infinite steps(1);
}

/* Glass Reflection Sweep on Hover */
.hero-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
}


.hero-card:hover::after {
    left: 150%;
    transition: 0.7s ease-in-out;
}

/* --- FIXES: UI Adjustments --- */

/* 1. Hide the "------" divider text in menus */
.dropdown-menu .nav-header {
    display: none !important;
}

/* 2. Announcements & Knowledgebase Readability */
.announcement-single,
.kb-article-item,
.kb-category-item {
    background: rgba(20, 25, 40, 0.85);
    /* Dark background for text */
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.announcement-single h2 a,
.kb-article-item h4 a {
    color: var(--accent-cyan);
    text-decoration: none;
    font-weight: 700;
}

.announcement-single p,
.kb-article-item {
    color: #cbd5e1;
    line-height: 1.6;
}

.kb-category-title h4 {
    color: #fff;
    margin-top: 0;
}

.kb-rate-article {
    margin: 22px 0;
    padding: 16px 20px;
    border: 1px solid var(--border-glass) !important;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(20, 25, 40, 0.85), rgba(10, 15, 25, 0.9)) !important;
    color: var(--text-secondary) !important;
    font-size: 0.98rem !important;
    font-weight: 600;
    line-height: 1.45 !important;
}

.kb-rate-article form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
}

.kb-rate-article .kb-rate-label {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    margin-right: 0.2rem;
}

.kb-rate-article .kb-rate-stats {
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 600;
}

.kb-rate-article .btn.btn-link {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border-glass);
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    padding: 0.75rem 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kb-rate-article .btn.btn-link i {
    margin-right: 0.4rem;
}

.kb-rate-article button[name="vote"][value="yes"].btn.btn-link {
    background: var(--accent-gradient) !important;
    border-color: transparent;
    color: #000 !important;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.kb-rate-article button[name="vote"][value="no"].btn.btn-link {
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.12) !important;
    color: #e2e8f0 !important;
}

.kb-rate-article .btn.btn-link:hover,
.kb-rate-article .btn.btn-link:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.2);
}

.kb-rate-article .btn.btn-link:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .kb-rate-article {
        padding: 14px;
    }

    .kb-rate-article form {
        gap: 0.55rem;
    }

    .kb-rate-article .btn.btn-link {
        width: 100%;
        justify-content: center;
    }
}

/* 3. Register & Login Page Fixes */
.login-container,
.register-container {
    background: rgba(10, 15, 25, 0.9);
    backdrop-filter: blur(30px);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    padding: 40px;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.register-container .header-lined {
    color: #fff;
    border-bottom: 2px solid var(--accent-cyan);
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.login-container h1 {
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 800;
}

/* 4. Fix "Well" elements (often used for notices) */
.well {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    color: #94A3B8;
    border-radius: 12px;
}

/* 5. Specific Register Page DOMAIN Fixes */
/* Force clean slate for registration layout */
#registration .sub-heading {
    display: none;
    /* Hide default bulky sub-headings */
}

/* New Section Headers */
#registration h5,
#registration .form-group label {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#registration .row {
    margin-bottom: 15px;
}

/* Group sections visually */
#containerNewUserSignup,
#containerNewUserSecurity {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
}

/* Add custom titles for the sections using :before since we hid .sub-heading */
#containerNewUserSignup:before {
    content: 'Personal & Billing Information';
    display: block;
    font-family: 'Fira Mono', monospace;
    font-weight: normal;
    font-size: 18px;
    color: #fff;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 15px;
}

#containerNewUserSecurity:before {
    content: 'Account Security';
    display: block;
    font-family: 'Fira Mono', monospace;
    font-weight: normal;
    font-size: 18px;
    color: #fff;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 15px;
}

/* Fix Input Fields - FORCE OVERRIDE */
.form-control:not([type="tel"]),
input[type="text"],
input[type="password"],
input[type="email"],
select.form-control {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    height: 50px !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: 0.3s;
}

/* Specific Fix for Phone Input with Flag - colors only */
/* Do NOT override height/border-radius/padding here - it breaks intl-tel-input layout */
input[type="tel"] {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: 0.3s;
}

/* Stacking Context Fix for Registration Page */
/* Ensure the first row (Personal/Billing) is ABOVE the Security row */
.register-layout .row:first-child {
    position: relative;
    z-index: 50;
}

.glass-panel {
    position: relative;
    z-index: auto;
}


.form-control:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2) !important;
    background: rgba(10, 15, 25, 0.9) !important;
}

/* Fix Icons inside inputs */
.field-icon {
    top: 12px;
    left: 15px;
    color: var(--accent-cyan);
    opacity: 0.8;
}

.prepend-icon .field:not([type="tel"]) {
    padding-left: 45px !important;
    /* Space for icon - exclude tel inputs which use intl-tel-input padding */
}

/* Sidebar / Login Box Fix */
.login-container .panel,
.register-container .panel,
.sidebar .panel {
    background: rgba(20, 25, 40, 0.95) !important;
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.sidebar .panel-heading,
.panel-sidebar .panel-heading {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--border-glass);
    padding: 15px 20px;
    font-weight: 700;
}

.sidebar .panel-body,
.panel-sidebar .panel-body,
.sidebar .list-group-item,
.panel-sidebar .list-group-item {
    background: transparent !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar .list-group-item:hover,
.panel-sidebar .list-group-item:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    color: #fff !important;
}

.sidebar a {
    color: var(--text-secondary) !important;
    transition: 0.2s;
}

.sidebar a:hover {
    color: var(--accent-cyan) !important;
    text-decoration: none;
}

/* Fix Breadcrumbs */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
}

.breadcrumb>li {
    display: inline-block;
    color: var(--text-secondary);
}

.breadcrumb>li>a {
    color: var(--accent-cyan);
}

.breadcrumb>li+li:before {
    color: var(--border-glass);
    content: "/\00a0";
    padding: 0 5px;
}

/* Fix Page Header */
.header-lined h1 {
    color: #fff;
    font-family: 'Fira Mono', monospace;
    font-weight: normal;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 32px;
    margin-bottom: 10px;
}

.header-lined small {
    display: block;
    color: var(--text-secondary);
    font-size: 16px;
    margin-top: 5px;
    font-family: 'Fira Mono', monospace;
    font-weight: normal;
    font-weight: 400;
}

/* Marketing Email Opt-in */
.marketing-email-optin {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
    border: 1px solid var(--border-glass);
}

/* --- Password Strength Meter Colors --- */
.progress-bar.progress-bar-danger,
.progress-bar-danger {
    background-color: #ef4444 !important;
    /* Red for Weak */
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.progress-bar.progress-bar-warning,
.progress-bar-warning {
    background-color: #f59e0b !important;
    /* Yellow for Moderate */
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.progress-bar.progress-bar-success,
.progress-bar-success {
    background-color: #10b981 !important;
    /* Green for Strong */
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
}

/* --- Dark Theme Modals (Generate Password & Others) --- */
.modal-content,
.ui-dialog-content,
.ui-dialog {
    background: #0F172A !important;
    /* Solid dark background to prevent transparency issues */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
    color: #fff !important;
}

.modal-header,
.ui-dialog-titlebar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

.modal-title,
.ui-dialog-title {
    color: #fff !important;
    font-weight: 700;
}

.modal-body,
.ui-dialog-content {
    color: #cbd5e1 !important;
    background: transparent !important;
}

.modal-body .alert {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Fix Close Button in Modal */
.modal-header .close,
.ui-dialog-titlebar-close {
    color: #fff !important;
    opacity: 0.7;
    text-shadow: none;
    font-size: 24px;
    font-weight: 300;
}

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

/* Form controls inside modal */
.modal-body .form-control {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* --- Client Dashboard / Tiles & Panels --- */
.tiles {
    margin: 30px 0 40px 0;
    background: transparent !important;
    /* Ensure container is transparent */
}

.tiles .row {
    margin-left: -10px;
    margin-right: -10px;
    background: transparent !important;
}

.tiles .tile {
    padding: 10px;
    background: transparent !important;
    /* Remove the white box from legacy styles */
    border: none !important;
}

.tiles .tile a {
    background: rgba(255, 255, 255, 0.03) !important;
    /* Lighter glass for better transparency */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 35px 20px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    position: relative;
    overflow: hidden;
    height: auto;
    display: block;
    text-decoration: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.tiles .tile a:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 20px 40px rgba(0, 240, 255, 0.15);
}

.tiles .tile .icon {
    font-size: 32px !important;
    color: var(--accent-cyan) !important;
    position: static !important;
    margin-bottom: 15px;
    opacity: 1 !important;
    display: block;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
}

.tiles .tile .stat {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #fff !important;
    font-family: 'Fira Mono', monospace;
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: 8px;
}

.tiles .tile .title {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary) !important;
    font-weight: 700;
}

.tiles .tile .highlight {
    display: none !important;
}

/* Dashboard Panels */
.client-home-panels {
    margin-top: 20px;
}

.client-home-panels .panel {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    margin-bottom: 30px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.client-home-panels .panel-heading {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    padding: 18px 25px !important;
}

.client-home-panels .panel-title {
    color: #fff !important;
    font-family: 'Fira Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.client-home-panels .panel-body {
    background: transparent !important;
    color: #cbd5e1 !important;
    padding: 25px !important;
}

.client-home-panels .list-group {
    border: none !important;
    margin: 0 !important;
}

.client-home-panels .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
    padding: 15px 25px !important;
    transition: 0.2s;
    font-size: 14px;
}

.client-home-panels .list-group-item:last-child {
    border-bottom: none !important;
}

.client-home-panels .list-group-item:hover {
    background: rgba(0, 240, 255, 0.05) !important;
    color: #fff !important;
    padding-left: 30px !important;
}

.client-home-panels .panel-footer {
    background: rgba(0, 0, 0, 0.15) !important;
    border-top: 1px solid var(--border-glass) !important;
    padding: 15px 25px !important;
}

.client-home-panels div[menuitemname="Active Products/Services"] .div-service-buttons .btn-view-details {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(0, 240, 255, 0.08) !important;
    border: 1px solid rgba(0, 240, 255, 0.35) !important;
    color: var(--accent-cyan) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.client-home-panels div[menuitemname="Active Products/Services"] .div-service-buttons .btn-view-details i {
    color: var(--accent-cyan) !important;
}

.client-home-panels div[menuitemname="Active Products/Services"] .div-service-buttons .btn-view-details:hover,
.client-home-panels div[menuitemname="Active Products/Services"] .div-service-buttons .btn-view-details:focus {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.45);
}

.client-home-panels div[menuitemname="Active Products/Services"] .div-service-buttons .btn-view-details:hover i,
.client-home-panels div[menuitemname="Active Products/Services"] .div-service-buttons .btn-view-details:focus i {
    color: #000 !important;
}

.client-home-panels div[menuitemname="Active Products/Services"] .div-service-buttons .btn-view-details:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .client-home-panels div[menuitemname="Active Products/Services"] .div-service-buttons .btn-view-details {
        min-width: 38px;
        height: 34px;
        justify-content: center;
        padding: 0 10px;
        border-radius: 10px !important;
    }
}

/* Client Area home Previous/Next buttons: match supporttickets pagination */
.client-home-panels .panel-footer .btn-group {
    display: inline-flex;
    gap: 0.25rem;
}

.client-home-panels .panel-footer .btn-group > .btn.btn-default,
.client-home-panels .panel-footer a.btn.btn-default,
.client-home-panels .panel-body .btn-group > .btn.btn-default {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}

.client-home-panels .panel-footer .btn-group > .btn.btn-default:hover,
.client-home-panels .panel-footer .btn-group > .btn.btn-default:focus,
.client-home-panels .panel-footer a.btn.btn-default:hover,
.client-home-panels .panel-footer a.btn.btn-default:focus,
.client-home-panels .panel-body .btn-group > .btn.btn-default:hover,
.client-home-panels .panel-body .btn-group > .btn.btn-default:focus,
.client-home-panels .panel-footer .btn-group > .btn.btn-default.active,
.client-home-panels .panel-footer a.btn.btn-default.active,
.client-home-panels .panel-body .btn-group > .btn.btn-default.active {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    background: rgba(0, 240, 255, 0.05) !important;
}

.client-home-panels .panel-footer .btn-group > .btn.btn-default.disabled,
.client-home-panels .panel-footer a.btn.btn-default[disabled],
.client-home-panels .panel-footer a.btn.btn-default.disabled,
.client-home-panels .panel-body .btn-group > .btn.btn-default.disabled {
    color: rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    text-shadow: none !important;
    pointer-events: none;
}

.client-home-panels .panel-footer ul.pagination li > a,
.client-home-panels .panel-footer ul.pagination li.active > a,
.client-home-panels .panel-body ul.pagination li > a,
.client-home-panels .panel-body ul.pagination li.active > a {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
}

.client-home-panels .panel-footer ul.pagination li > a:hover,
.client-home-panels .panel-footer ul.pagination li.active > a,
.client-home-panels .panel-body ul.pagination li > a:hover,
.client-home-panels .panel-body ul.pagination li.active > a {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    background: rgba(0, 240, 255, 0.05) !important;
}

.client-home-panels .panel-footer ul.pagination li.disabled > a,
.client-home-panels .panel-body ul.pagination li.disabled > a {
    color: rgba(255, 255, 255, 0.2) !important;
    pointer-events: none;
}

/* Home KB Search */
.home-kb-search {
    position: relative;
    margin: 40px 0 60px 0;
}

.home-kb-search .form-control {
    background: rgba(10, 15, 25, 0.7) !important;
    border: 1px solid var(--border-glass) !important;
    height: 70px !important;
    border-radius: 100px !important;
    padding-left: 70px !important;
    font-size: 18px !important;
    color: #fff !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

.home-kb-search .form-control:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.2) !important;
    background: rgba(10, 15, 25, 0.9) !important;
}

.home-kb-search i {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-cyan);
    font-size: 22px;
    margin: 0 !important;
}

/* Sidebar Redesign (MarketConnect Store Style) */
.sidebar {
    margin-bottom: 30px;
}

.sidebar .panel {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
    /* Slightly sharper corners for store style */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-bottom: 25px !important;
}

.sidebar .panel-heading {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    padding: 18px 25px !important;
}

.sidebar .panel-title {
    font-family: 'Fira Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary) !important;
}

.sidebar .panel-body {
    padding: 25px !important;
    color: #cbd5e1 !important;
    line-height: 1.6;
    background: transparent !important;
}

/* Sidebar List Group - Store Style */
.sidebar .list-group {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

.sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    color: var(--text-secondary) !important;
    padding: 14px 25px !important;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    /* For indicator */
}

.sidebar .list-group-item:last-child {
    border-bottom: none !important;
}

.sidebar .list-group-item i {
    font-size: 14px;
    color: var(--accent-cyan);
    width: 20px;
    text-align: center;
    opacity: 0.7;
    transition: 0.2s;
}

.sidebar .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}

.sidebar .list-group-item:hover i {
    opacity: 1;
    transform: scale(1.1);
}

/* Active Item Indicator (MarketConnect Store Look) */
.sidebar .list-group-item.active {
    background: rgba(0, 240, 255, 0.1) !important;
    color: var(--accent-cyan) !important;
    font-weight: 700;
}

.sidebar .list-group-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-cyan);
    box-shadow: 2px 0 10px rgba(0, 240, 255, 0.5);
}

.sidebar .list-group-item.active i {
    color: var(--accent-cyan) !important;
    opacity: 1;
}

/* Specific Style for "Your Info" summary text */
.sidebar .panel-body strong {
    color: #fff !important;
    display: block;
    margin-top: 5px;
}

.sidebar .panel-body a.btn-sm {
    margin-top: 15px;
    display: inline-block;
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    border-radius: 8px;
    padding: 6px 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
}

.sidebar .panel-body a.btn-sm:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

/* Dashboard Panels Polish */
.client-home-panels {
    margin-top: 20px;
}

.client-home-panels .badge {
    background: rgba(0, 240, 255, 0.2) !important;
    color: var(--accent-cyan) !important;
    font-weight: 700;
    border: 1px solid rgba(0, 240, 255, 0.3);
}

/* Alerts and Notices */
.alert {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}

.alert-success {
    border-color: rgba(16, 185, 129, 0.3) !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

.alert-info {
    border-color: rgba(0, 102, 255, 0.3) !important;
    background: rgba(0, 102, 255, 0.1) !important;
}

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

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

/* Global Buttons Override */
.btn-primary {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 10px 25px;
    text-transform: uppercase;
    font-size: 13px;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
    transition: 0.3s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
    filter: brightness(1.1);
}

a.btn.btn-default.btn-password-reset,
a.btn.btn-default[href*="/password/reset"],
a.btn.btn-default[href*="password-reset"] {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 10px 25px;
    text-transform: uppercase;
    font-size: 13px;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
    transition: 0.3s;
}

a.btn.btn-default.btn-password-reset:hover,
a.btn.btn-default.btn-password-reset:focus,
a.btn.btn-default[href*="/password/reset"]:hover,
a.btn.btn-default[href*="/password/reset"]:focus,
a.btn.btn-default[href*="password-reset"]:hover,
a.btn.btn-default[href*="password-reset"]:focus {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
    filter: brightness(1.1);
    color: #000 !important;
}

input.btn.btn-default.btn-account-cancel,
button.btn.btn-default.btn-account-cancel,
a.btn.btn-default.btn-account-cancel {
    background: rgba(248, 113, 113, 0.12) !important;
    border: 1px solid rgba(248, 113, 113, 0.38) !important;
    color: #fecaca !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 10px 24px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input.btn.btn-default.btn-account-cancel:hover,
input.btn.btn-default.btn-account-cancel:focus,
button.btn.btn-default.btn-account-cancel:hover,
button.btn.btn-default.btn-account-cancel:focus,
a.btn.btn-default.btn-account-cancel:hover,
a.btn.btn-default.btn-account-cancel:focus {
    background: rgba(248, 113, 113, 0.2) !important;
    border-color: rgba(248, 113, 113, 0.55) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(248, 113, 113, 0.25) !important;
}

button.btn.btn-default.btn-account-go,
input.btn.btn-default.btn-account-go,
a.btn.btn-default.btn-account-go {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

button.btn.btn-default.btn-account-go:hover,
button.btn.btn-default.btn-account-go:focus,
input.btn.btn-default.btn-account-go:hover,
input.btn.btn-default.btn-account-go:focus,
a.btn.btn-default.btn-account-go:hover,
a.btn.btn-default.btn-account-go:focus {
    color: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(0, 240, 255, 0.45);
    filter: brightness(1.08);
}

a.btn.btn-default.btn-announcement-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 240, 255, 0.08) !important;
    border: 1px solid rgba(0, 240, 255, 0.35) !important;
    color: var(--accent-cyan) !important;
    border-radius: 999px !important;
    padding: 10px 24px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

a.btn.btn-default.btn-announcement-back i {
    color: inherit !important;
}

a.btn.btn-default.btn-announcement-back:hover,
a.btn.btn-default.btn-announcement-back:focus {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.45);
}

a.btn.btn-default.btn-announcement-back:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 50px !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

.btn-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 50px !important;
}

/* Fix Sidebars Child Items */
.sidebar .list-group-item {
    font-size: 13px;
    font-weight: 500;
}

.sidebar .badge {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--accent-cyan) !important;
    border: 1px solid var(--border-glass);
}

/* Tables in Client Area */
.table-container {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 20px;
}

.table>thead>tr>th {
    border-bottom: 2px solid var(--border-glass) !important;
    color: var(--text-secondary);
    font-family: 'Fira Mono', monospace;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 12px;
}

.table>tbody>tr>td {
    border-top: 1px solid var(--border-glass) !important;
    color: #cbd5e1;
    vertical-align: middle;
}

/* Navigation Links */
.nav-tabs {
    border-bottom: 1px solid var(--border-glass) !important;
}

.nav-tabs>li>a {
    color: var(--text-secondary) !important;
    border: none !important;
    padding: 12px 25px !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    background: transparent !important;
    color: var(--accent-cyan) !important;
    border-bottom: 2px solid var(--accent-cyan) !important;
}

/* ==========================================================================
   ULTIMATE BRAND REFINEMENT: STORE-STYLE DASHBOARD & TRANSPARENCY
   ========================================================================== */

/* --- 1. CORE TRANSPARENCY OVERRIDE (NUKE ALL WHITE BACKS) --- */
#main-body,
section#main-body,
.main-content,
.container,
section,
.row,
div.container-fluid,
#contentarea {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- 2. DASHBOARD TILES REDESIGN (MATCH BACKGROUND) --- */
.tiles {
    background: transparent !important;
    border: none !important;
    margin: 40px 0 !important;
    padding: 0 !important;
}

.tiles .row {
    background: transparent !important;
}

.tiles .tile {
    background: transparent !important;
    border: none !important;
    padding: 10px !important;
    box-shadow: none !important;
}

/* The glass card itself */
.tiles .tile a {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 24px !important;
    padding: 45px 20px !important;
    display: block !important;
    text-align: center !important;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

.tiles .tile a:hover {
    transform: translateY(-12px) scale(1.02) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 30px 60px rgba(0, 240, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.tiles .tile .icon {
    font-size: 38px !important;
    color: var(--accent-cyan) !important;
    margin-bottom: 20px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5)) !important;
}

.tiles .tile .stat {
    font-size: 42px !important;
    font-weight: 800 !important;
    font-family: 'Fira Mono', monospace !important;
    color: #fff !important;
}

.tiles .tile .title {
    font-size: 12px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
}

/* --- 3. SIDEBAR REDesign (COPY VPS STORE STYLE) --- */
.sidebar {
    padding-top: 10px;
}

/* Panel Container */
.sidebar .panel-sidebar,
.sidebar .panel,
body .sidebar .panel-default {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 16px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
}

/* Header (MarketConnect / Categories Look) */
.sidebar .panel-heading {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    padding: 22px 25px !important;
}

.sidebar .panel-title {
    font-family: 'Fira Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sidebar .panel-title i {
    color: var(--accent-cyan) !important;
    font-size: 16px !important;
}

/* List Items (Actions & Categories Design) */
.sidebar .list-group {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

.sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 16px 25px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Active Indicator (VPS Store Pill Style) */
.sidebar .list-group-item.active {
    background: rgba(0, 240, 255, 0.08) !important;
    color: var(--accent-cyan) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar .list-group-item.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: var(--accent-gradient) !important;
    box-shadow: 2px 0 15px rgba(0, 240, 255, 0.6) !important;
}

.sidebar .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    padding-left: 35px !important;
    /* Slide animation */
}

/* Icons within Sidebar Items */
.sidebar .list-group-item i {
    font-size: 15px !important;
    color: var(--accent-cyan) !important;
    opacity: 0.6 !important;
    transition: 0.3s !important;
}

.sidebar .list-group-item:hover i {
    opacity: 1 !important;
    transform: scale(1.2) !important;
}

.sidebar #Primary_Sidebar-Ticket_Information .ticket-details-children {
    display: block !important;
    overflow: visible !important;
}

.sidebar #Primary_Sidebar-Ticket_Information .ticket-details-children br {
    display: none !important;
}

.sidebar #Primary_Sidebar-Ticket_Information .ticket-details-children .ticket-detail-title {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar #Primary_Sidebar-Ticket_Information-Priority.ticket-details-children {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title title"
        "status priority";
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.35rem;
}

.sidebar #Primary_Sidebar-Ticket_Information-Priority .ticket-detail-title,
.sidebar #Primary_Sidebar-Ticket_Information-Priority .title {
    grid-area: title;
    margin-bottom: 0;
}

.sidebar #Primary_Sidebar-Ticket_Information-Priority .ticket-status-value,
.sidebar #Primary_Sidebar-Ticket_Information-Priority .label {
    grid-area: status;
    justify-self: start;
    display: inline-block;
    max-width: calc(100% - 64px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

.sidebar #Primary_Sidebar-Ticket_Information-Priority .ticket-priority-value {
    grid-area: priority;
    justify-self: end;
    margin-left: 0;
    min-width: 32px;
    text-align: right;
    white-space: nowrap;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
}

/* Shortcuts specific Icons color */
.sidebar[menuitemname="Shortcuts"] .list-group-item i {
    color: var(--accent-blue) !important;
}

/* Your Info Update Button */
.sidebar .panel-body a.btn {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important;
}

/* --- FIX: Sidebar Panel Body & Footer White Boxes --- */
.sidebar .panel-body {
    background: transparent !important;
    color: var(--text-secondary) !important;
    padding: 20px 25px !important;
}

.sidebar .panel-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-glass) !important;
    padding: 15px 25px !important;
}

/* "New Contact..." link in footer */
.sidebar .panel-footer a,
.sidebar .panel-footer .btn,
.sidebar .panel-footer a.btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.sidebar .panel-footer a:hover,
.sidebar .panel-footer .btn:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}

/* Fix "Update" button specifically */
.sidebar .panel-body .btn-default,
.sidebar .panel-body .btn-xs,
.sidebar .panel-body .btn-sm {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.25) !important;
}

/* Reset any white background from Bootstrap panels */
.sidebar .panel-default>.panel-heading,
.sidebar .panel-default>.panel-footer {
    background-color: transparent !important;
}

/* Fix any nested white backgrounds */
.sidebar .panel *,
.sidebar .list-group * {
    background-color: transparent;
}

/* --- FIX: Invoices Table & Container Transparency --- */
.table-container {
    background: rgba(20, 25, 40, 0.65) !important;
    /* var(--bg-glass) */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    padding: 25px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
}

#tableInvoicesList,
.table-list {
    background: transparent !important;
}

#tableInvoicesList>thead>tr>th,
.table-list>thead>tr>th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 15px !important;
}

#tableInvoicesList>tbody>tr>td,
.table-list>tbody>tr>td,
.table>tbody>tr>td {
    background: transparent !important;
    border-top: 1px solid var(--border-glass) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    /* Ensure separation */
    color: #cbd5e1 !important;
    padding: 18px 15px !important;
    vertical-align: middle !important;
}

/* Hover Effect for Rows */
#tableInvoicesList>tbody>tr:hover,
.table-list>tbody>tr:hover {
    background: rgba(0, 240, 255, 0.03) !important;
    cursor: pointer;
}

#tableInvoicesList>tbody>tr:hover>td,
.table-list>tbody>tr:hover>td {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Status Labels Transparency & Glow */
.label.status {
    border-radius: 50px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
}

.label.status-paid {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

.label.status-unpaid {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) !important;
}

/* DataTables Controls Integration */
.dataTables_length select,
.dataTables_filter input {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    height: 36px !important;
}

.dataTables_info,
.dataTables_paginate {
    margin-top: 15px !important;
    color: var(--text-secondary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
    color: #000 !important;
}

/* --- Fix DataTables Length & Info for Invoices (Transparency & Color) --- */
#tableInvoicesList_length,
#tableInvoicesList_info,
div.dataTables_length,
div.dataTables_info {
    color: #cbd5e1 !important;
    /* var(--text-secondary) */
    background: transparent !important;
    padding-top: 10px;
}

#tableInvoicesList_length label,
div.dataTables_length label {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    background: transparent !important;
}

/* Fix the dropdown select specifically */
#tableInvoicesList_length select,
div.dataTables_length select {
    background-color: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 5px 30px 5px 10px !important;
    /* Extra padding for arrow if needed */
    height: 34px !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 5px !important;
    /* Remove default appearance to prevent white background in some browsers */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

#tableInvoicesList_length select option,
div.dataTables_length select option {
    background-color: #05050A !important;
    color: #fff !important;
}

/* Fix the 'Showing 1 to X' text */
#tableInvoicesList_info,
div.dataTables_info {
    font-family: 'Fira Mono', monospace !important;
    font-size: 13px !important;
    opacity: 0.8;
}

/* Remove any potential white backgrounds from Bootstrap nesting */
.table-container .dataTables_wrapper .row {
    margin-bottom: 5px;
    background: transparent !important;
}

.table-container .dataTables_wrapper .col-xs-6,
.table-container .dataTables_wrapper .col-sm-6 {
    background: transparent !important;
}

/* --- Product Details Transparency Fixes --- */

/* Main Details Container */
.product-details {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
}

/* Status Box */
.product-status {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
}

.product-status-text {
    color: var(--accent-cyan) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-top: 15px !important;
    font-size: 14px !important;
}

.product-icon .fa-stack-2x {
    color: rgba(0, 240, 255, 0.1) !important;
}

.product-icon .fa-stack-1x {
    color: var(--accent-cyan) !important;
}

/* Headings in details */
.product-details h4 {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
    margin-top: 20px !important;
}

.product-details .text-center {
    color: #fff !important;
    font-weight: 500 !important;
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--border-glass) !important;
    margin-bottom: 20px !important;
}

.nav-tabs>li>a {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: 0.3s !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
    color: var(--accent-cyan) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--accent-cyan) !important;
}

/* Tab Content Containers */
.tab-content,
.product-details-tab-container {
    background: transparent !important;
    color: #cbd5e1 !important;
}

.tab-pane {
    background: transparent !important;
    padding: 20px 0 !important;
}

.tab-pane .row {
    margin-bottom: 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    padding-bottom: 10px !important;
}

.tab-pane .row:last-child {
    border-bottom: none !important;
}

/* Additional Info & Config Options */
.tab-pane strong {
    color: #fff !important;
}

/* Resource Usage Knobs */
.dial-usage {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-family: 'Fira Mono', monospace !important;
}

/* Change Password Form */
#tabChangepw .form-control {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
}

#tabChangepw .control-label {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

/* Addon Panels */
#tabAddons .panel {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-glass) !important;
}

#tabAddons .panel-heading {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

#tabAddons .panel-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-glass) !important;
}


/* --- Fix Product Status Box Colors & Transparency --- */
.product-status.product-status-active {
    background: rgba(16, 185, 129, 0.1) !important;
    /* Green tint */
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #fff !important;
}

.product-status.product-status-pending {
    background: rgba(245, 158, 11, 0.1) !important;
    /* Orange tint */
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fff !important;
}

.product-status.product-status-suspended,
.product-status.product-status-terminated,
.product-status.product-status-cancelled {
    background: rgba(239, 68, 68, 0.1) !important;
    /* Red tint */
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fff !important;
}

/* Fix text colors inside the status box */
.product-status h3 {
    color: #fff !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
}

.product-status h4 {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    margin-top: 5px !important;
    margin-bottom: 20px !important;
}

.product-status .product-status-text {
    color: #10b981 !important;
    /* Default to success green for active */
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.product-status-pending .product-status-text {
    color: #f59e0b !important;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.product-status-suspended .product-status-text,
.product-status-cancelled .product-status-text {
    color: #ef4444 !important;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}


/* --- Fix "Server Information" Tabs Container (The "Box") --- */
.product-details-tab-container {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
    margin-top: 0 !important;
}

/* Remove double padding if tabs are present content area */
.tab-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ensure data rows in the tab content are legible */
.tab-pane .row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 12px 0 !important;
    margin: 0 !important;
}

.tab-pane .row:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Labels in the tab (Hostname, etc) */
.tab-pane .col-sm-5 {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    text-align: right;
    /* Ensure distinct alignment */
}

/* Values in the tab */
.tab-pane .col-sm-7 {
    color: #fff !important;
    font-weight: 500;
}

/* Fix Tab Navigation Bar to flow into the box */
.nav-tabs {
    border-bottom: none !important;
    margin-bottom: 15px !important;
    background: transparent !important;
}

/* Active tab blending */
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    border-bottom-color: transparent !important;
    border-radius: 10px 10px 0 0 !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}


/* --- ULTIMATE STATUS BOX COLOR MATCHING --- */
/* Ensure icons and text inside the status box match the status color perfectly */

/* 1. ACTIVE STATUS (Cyan/Theme Match) */
.product-status.product-status-active {
    background: rgba(0, 240, 255, 0.08) !important;
    border-color: rgba(0, 240, 255, 0.3) !important;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.05) !important;
}

.product-status.product-status-active .product-icon .fa-stack-2x {
    color: rgba(0, 240, 255, 0.15) !important;
}

.product-status.product-status-active .product-icon .fa-stack-1x {
    color: #00F0FF !important;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

.product-status.product-status-active .product-status-text {
    color: #00F0FF !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

/* 2. PENDING STATUS (Orange/Gold) */
.product-status.product-status-pending {
    background: rgba(255, 180, 0, 0.08) !important;
    border-color: rgba(255, 180, 0, 0.3) !important;
}

.product-status.product-status-pending .product-icon .fa-stack-2x {
    color: rgba(255, 180, 0, 0.15) !important;
}

.product-status.product-status-pending .product-icon .fa-stack-1x {
    color: #FFB400 !important;
    text-shadow: 0 0 15px rgba(255, 180, 0, 0.6);
}

.product-status.product-status-pending .product-status-text {
    color: #FFB400 !important;
    text-shadow: 0 0 10px rgba(255, 180, 0, 0.4);
}

/* 3. SUSPENDED/TERMINATED (Neon Red/Pink) */
.product-status.product-status-suspended,
.product-status.product-status-terminated,
.product-status.product-status-cancelled {
    background: rgba(255, 0, 85, 0.08) !important;
    border-color: rgba(255, 0, 85, 0.3) !important;
}

.product-status.product-status-suspended .product-icon .fa-stack-2x,
.product-status.product-status-terminated .product-icon .fa-stack-2x,
.product-status.product-status-cancelled .product-icon .fa-stack-2x {
    color: rgba(255, 0, 85, 0.15) !important;
}

.product-status.product-status-suspended .product-icon .fa-stack-1x,
.product-status.product-status-terminated .product-icon .fa-stack-1x,
.product-status.product-status-cancelled .product-icon .fa-stack-1x {
    color: #FF0055 !important;
    text-shadow: 0 0 15px rgba(255, 0, 85, 0.6);
}

.product-status.product-status-suspended .product-status-text,
.product-status.product-status-terminated .product-status-text,
.product-status.product-status-cancelled .product-status-text {
    color: #FF0055 !important;
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.4);
}

/* 4. Common Text Fixes */
.product-status h3 {
    color: #fff !important;
    font-size: 24px !important;
    margin-bottom: 2px !important;
}

.product-status h4 {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 5px !important;
}

/* --- Fix Product Status Icon Color (Remove White/Gray) --- */
/* Target the background circle */
.product-status .product-icon .fa-stack-2x {
    color: rgba(0, 240, 255, 0.1) !important;
    /* Subtle glass cyan */
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
    /* Optional: Add a border ring for extra cool factor */
    -webkit-text-stroke: 1px rgba(0, 240, 255, 0.2);
}

/* Target the inner icon - Override fa-inverse white/gray */
.product-status .product-icon .fa-stack-1x,
.product-status .product-icon .fa-inverse {
    color: #00F0FF !important;
    /* Neon Cyan */
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
}

/* Ensure Pending/Suspended icons also match their specific colors */
.product-status-pending .product-icon .fa-stack-2x {
    color: rgba(255, 180, 0, 0.1) !important;
}

.product-status-pending .product-icon .fa-stack-1x {
    color: #FFB400 !important;
    text-shadow: 0 0 15px rgba(255, 180, 0, 0.6);
}

.product-status-suspended .product-icon .fa-stack-2x,
.product-status-terminated .product-icon .fa-stack-2x {
    color: rgba(255, 0, 85, 0.1) !important;
}

.product-status-suspended .product-icon .fa-stack-1x,
.product-status-terminated .product-icon .fa-stack-1x {
    color: #FF0055 !important;
    text-shadow: 0 0 15px rgba(255, 0, 85, 0.6);
}

/* --- Force Match Color for div.product-details div.product-icon --- */

/* 1. Reset Container Transparency */
div.product-details div.product-icon {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Target Icons using the specific path requested */
div.product-details div.product-icon .fa-stack-2x {
    color: rgba(0, 240, 255, 0.1) !important;
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important;
}

div.product-details div.product-icon .fa-stack-1x,
div.product-details div.product-icon .fa-inverse {
    color: #00F0FF !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.8) !important;
}

/* 3. Target Text inside the icon block to match theme */
div.product-details div.product-icon h3 {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

div.product-details div.product-icon h4 {
    color: var(--accent-cyan) !important;
    /* Make the subtitle match the accent */
    opacity: 0.8 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* 4. Handle State Colors specifically for this container */
/* PENDING */
.product-status-pending div.product-icon .fa-stack-2x {
    color: rgba(255, 180, 0, 0.1) !important;
}

.product-status-pending div.product-icon .fa-stack-1x {
    color: #FFB400 !important;
}

.product-status-pending div.product-icon h4 {
    color: #FFB400 !important;
}

/* SUSPENDED/TERMINATED */
.product-status-suspended div.product-icon .fa-stack-2x,
.product-status-terminated div.product-icon .fa-stack-2x {
    color: rgba(255, 0, 85, 0.1) !important;
}

.product-status-suspended div.product-icon .fa-stack-1x,
.product-status-terminated div.product-icon .fa-stack-1x {
    color: #FF0055 !important;
}

.product-status-suspended div.product-icon h4,
.product-status-terminated div.product-icon h4 {
    color: #FF0055 !important;
}


/* --- Fix Fraud Status Color (Match Suspended/Terminated) --- */

/* 1. Status Box Container */
.product-status.product-status-fraud {
    background: rgba(255, 0, 85, 0.08) !important;
    border-color: rgba(255, 0, 85, 0.3) !important;
}

/* 2. Text Color */
.product-status-fraud .product-status-text {
    color: #FF0055 !important;
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.4);
}

/* 3. Icon Colors */
.product-status-fraud .product-icon .fa-stack-2x {
    color: rgba(255, 0, 85, 0.15) !important;
}

.product-status-fraud .product-icon .fa-stack-1x,
.product-status-fraud .product-icon .fa-inverse {
    color: #FF0055 !important;
    text-shadow: 0 0 15px rgba(255, 0, 85, 0.6);
}

/* 4. Specific Product Details Icon Overrides for Fraud */
.product-status-fraud div.product-icon .fa-stack-2x {
    color: rgba(255, 0, 85, 0.1) !important;
}

.product-status-fraud div.product-icon .fa-stack-1x {
    color: #FF0055 !important;
}

.product-status-fraud div.product-icon h4 {
    color: #FF0055 !important;
}

/* --- Fix Services List Table Transparency (clientarea.php?action=products) --- */

/* 1. Reuse existing table-container transparency rules, but ensure specific table overrides */
#tableServicesList {
    background: transparent !important;
}

#tableServicesList>thead>tr>th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 15px !important;
}

#tableServicesList>tbody>tr>td {
    background: transparent !important;
    border-top: 1px solid var(--border-glass) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
    padding: 18px 15px !important;
    vertical-align: middle !important;
}

/* 2. Fix Product Name & Domain Link Colors */
#tableServicesList>tbody>tr>td strong {
    color: #fff !important;
    font-size: 14px !important;
    display: block;
    margin-bottom: 4px;
}

#tableServicesList>tbody>tr>td a {
    color: var(--accent-cyan) !important;
    opacity: 0.8;
    font-size: 12px;
}

#tableServicesList>tbody>tr>td a:hover {
    opacity: 1;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* 3. Hover Effect for Rows */
#tableServicesList>tbody>tr:hover {
    background: rgba(0, 240, 255, 0.03) !important;
    cursor: pointer;
}

#tableServicesList>tbody>tr:hover>td {
    color: #fff !important;
}

/* 4. Fix DataTables Controls for Services Table */
#tableServicesList_length,
#tableServicesList_info,
#tableServicesList_paginate {
    color: #cbd5e1 !important;
    background: transparent !important;
    padding-top: 15px;
}

#tableServicesList_length select {
    background-color: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 5px 30px 5px 10px !important;
    height: 34px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

#tableServicesList_length select option {
    background: #05050A !important;
}

/* 5. Fix Status Labels in Table */
#tableServicesList .label.status-active {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

#tableServicesList .label.status-pending {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

#tableServicesList .label.status-suspended,
#tableServicesList .label.status-terminated,
#tableServicesList .label.status-cancelled,
#tableServicesList .label.status-fraud {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* --- Fix Pagination Colors (Previous, Numbers, Next) --- */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #cbd5e1 !important;
    /* var(--text-secondary) */
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    margin-left: 5px !important;
    padding: 5px 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Hover State */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: rgba(0, 240, 255, 0.1) !important;
    color: #fff !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3) !important;
}

/* Active Page Number */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    /* Black text on bright gradient */
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.4) !important;
}

/* Disabled State (e.g. Previous on first page) */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* Services List Pagination: Transparency Match */
#tableServicesList_paginate .paginate_button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    /* Semi-transparent white to match background vibe */
    padding: 5px 12px !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
}

/* Active/Hover: Neon Cyan & Subtle Glass Background */
#tableServicesList_paginate .paginate_button:hover,
#tableServicesList_paginate .paginate_button.current {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    font-weight: 800 !important;
    background: rgba(0, 240, 255, 0.05) !important;
    /* Extremely subtle glass effect */
}

/* Disabled state - even more transparent */
#tableServicesList_paginate .paginate_button.disabled {
    color: rgba(255, 255, 255, 0.15) !important;
    /* Barely visible */
    cursor: default !important;
    background: transparent !important;
}

/* --- FORCE OVERRIDE for Bootstrap Pagination Boxes (li > a) --- */
#tableServicesList_paginate ul.pagination li>a,
#tableServicesList_paginate ul.pagination li.active>a,
#tableServicesList_paginate ul.pagination li>a:hover,
#tableServicesList_paginate ul.pagination li.active>a:hover {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
}

/* Active State Specifics for the anchor tag */
#tableServicesList_paginate ul.pagination li.active>a,
#tableServicesList_paginate ul.pagination li>a:hover {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    background: rgba(0, 240, 255, 0.05) !important;
    /* The subtle glass effect */
    border-radius: 6px !important;
}

/* Ensure the list item itself doesn't have a background */
#tableServicesList_paginate ul.pagination li.active {
    background: transparent !important;
    border: none !important;
}

/* --- AGGRESSIVE OVERRIDE for the li.paginate_button itself (Services) --- */
#tableServicesList_paginate li.paginate_button,
#tableServicesList_paginate li.paginate_button.active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    /* Let the anchor tag handle padding */
    margin: 0 !important;
}

#tableServicesList_paginate li.paginate_button:hover,
#tableServicesList_paginate li.paginate_button:focus {
    background: transparent !important;
    border: none !important;
}

/* --- Invoices List Pagination: Transparency Match (Same as Services) --- */
#tableInvoicesList_paginate .paginate_button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 5px 12px !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
}

#tableInvoicesList_paginate .paginate_button:hover,
#tableInvoicesList_paginate .paginate_button.current {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    font-weight: 800 !important;
    background: rgba(0, 240, 255, 0.05) !important;
}

#tableInvoicesList_paginate .paginate_button.disabled {
    color: rgba(255, 255, 255, 0.15) !important;
    cursor: default !important;
    background: transparent !important;
}

/* --- FORCE OVERRIDE for Bootstrap Pagination Boxes on Invoices (li > a) --- */
#tableInvoicesList_paginate ul.pagination li>a,
#tableInvoicesList_paginate ul.pagination li.active>a,
#tableInvoicesList_paginate ul.pagination li>a:hover,
#tableInvoicesList_paginate ul.pagination li.active>a:hover {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
}

#tableInvoicesList_paginate ul.pagination li.active>a,
#tableInvoicesList_paginate ul.pagination li>a:hover {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    background: rgba(0, 240, 255, 0.05) !important;
    border-radius: 6px !important;
}

#tableInvoicesList_paginate ul.pagination li.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- AGGRESSIVE OVERRIDE for the li.paginate_button itself (Invoices) --- */
#tableInvoicesList_paginate li.paginate_button,
#tableInvoicesList_paginate li.paginate_button.active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    /* Let the anchor tag handle padding */
    margin: 0 !important;
}

#tableInvoicesList_paginate li.paginate_button:hover,
#tableInvoicesList_paginate li.paginate_button:focus {
    background: transparent !important;
    border: none !important;
}

/* --- Fix Quotes List Table Transparency (clientarea.php?action=quotes) --- */

/* 1. Reuse existing table-container transparency rules, but ensure specific table overrides */
#tableQuotesList {
    background: transparent !important;
}

#tableQuotesList>thead>tr>th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 15px !important;
}

#tableQuotesList>tbody>tr>td {
    background: transparent !important;
    border-top: 1px solid var(--border-glass) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
    padding: 18px 15px !important;
    vertical-align: middle !important;
}

/* 2. Hover Effect for Rows */
#tableQuotesList>tbody>tr:hover {
    background: rgba(0, 240, 255, 0.03) !important;
    cursor: pointer;
}

#tableQuotesList>tbody>tr:hover>td {
    color: #fff !important;
}

/* 3. Fix DataTables Controls for Quotes Table */
#tableQuotesList_length,
#tableQuotesList_info,
#tableQuotesList_paginate {
    color: #cbd5e1 !important;
    background: transparent !important;
    padding-top: 15px;
}

#tableQuotesList_length select {
    background-color: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 5px 30px 5px 10px !important;
    height: 34px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

#tableQuotesList_length select option {
    background: #05050A !important;
}

/* 4. Fix Status Labels in Quotes Table */
/* Delivered/Accepted - Green */
#tableQuotesList .label.status-delivered,
#tableQuotesList .label.status-accepted {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* Lost/Dead - Red */
#tableQuotesList .label.status-lost,
#tableQuotesList .label.status-dead {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* On Hold - Orange */
#tableQuotesList .label.status-onhold {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* Draft - Gray/Secondary */
#tableQuotesList .label.status-draft {
    background: rgba(148, 163, 184, 0.1) !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}


/* --- Quotes List Pagination: Transparency Match --- */
#tableQuotesList_paginate .paginate_button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 5px 12px !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
}

#tableQuotesList_paginate .paginate_button:hover,
#tableQuotesList_paginate .paginate_button.current {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    font-weight: 800 !important;
    background: rgba(0, 240, 255, 0.05) !important;
}

#tableQuotesList_paginate .paginate_button.disabled {
    color: rgba(255, 255, 255, 0.15) !important;
    cursor: default !important;
    background: transparent !important;
}

/* --- FORCE OVERRIDE for Bootstrap Pagination Boxes on Quotes (li > a) --- */
#tableQuotesList_paginate ul.pagination li>a,
#tableQuotesList_paginate ul.pagination li.active>a,
#tableQuotesList_paginate ul.pagination li>a:hover,
#tableQuotesList_paginate ul.pagination li.active>a:hover {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
}

#tableQuotesList_paginate ul.pagination li.active>a,
#tableQuotesList_paginate ul.pagination li>a:hover {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    background: rgba(0, 240, 255, 0.05) !important;
    border-radius: 6px !important;
}

#tableQuotesList_paginate ul.pagination li.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- AGGRESSIVE OVERRIDE for the li.paginate_button itself (Quotes) --- */
#tableQuotesList_paginate li.paginate_button,
#tableQuotesList_paginate li.paginate_button.active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    /* Let the anchor tag handle padding */
    margin: 0 !important;
}

#tableQuotesList_paginate li.paginate_button:hover,
#tableQuotesList_paginate li.paginate_button:focus {
    background: transparent !important;
    border: none !important;
}

/* --- Fix Support Tickets List Table Transparency (supporttickets.php) --- */

/* 1. Reuse existing table-container transparency rules, but ensure specific table overrides */
#tableTicketsList {
    background: transparent !important;
}

#tableTicketsList>thead>tr>th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 15px !important;
}

#tableTicketsList>tbody>tr>td {
    background: transparent !important;
    border-top: 1px solid var(--border-glass) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
    padding: 18px 15px !important;
    vertical-align: middle !important;
}

/* 2. Hover Effect for Rows */
#tableTicketsList>tbody>tr:hover {
    background: rgba(0, 240, 255, 0.03) !important;
    cursor: pointer;
}

#tableTicketsList>tbody>tr:hover>td {
    color: #fff !important;
}

/* 3. Fix DataTables Controls for Tickets Table */
#tableTicketsList_length,
#tableTicketsList_info,
#tableTicketsList_paginate {
    color: #cbd5e1 !important;
    background: transparent !important;
    padding-top: 15px;
}

#tableTicketsList_length select {
    background-color: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 5px 30px 5px 10px !important;
    height: 34px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

#tableTicketsList_length select option {
    background: #05050A !important;
}

/* 4. Fix Status Labels in Tickets Table */
/* Open - Green */
#tableTicketsList .label.status-open {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* Answered - Blue/Cyan */
#tableTicketsList .label.status-answered {
    background: rgba(0, 240, 255, 0.1) !important;
    color: #00F0FF !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2) !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* Customer-Reply - Yellow/Orange */
#tableTicketsList .label.status-customer-reply {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* Closed - Gray/Red */
#tableTicketsList .label.status-closed {
    background: rgba(148, 163, 184, 0.1) !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* Custom Status Class */
#tableTicketsList .label.status-custom {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}


/* --- Tickets List Pagination: Transparency Match --- */
#tableTicketsList_paginate .paginate_button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 5px 12px !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
}

#tableTicketsList_paginate .paginate_button:hover,
#tableTicketsList_paginate .paginate_button.current {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    font-weight: 800 !important;
    background: rgba(0, 240, 255, 0.05) !important;
}

#tableTicketsList_paginate .paginate_button.disabled {
    color: rgba(255, 255, 255, 0.15) !important;
    cursor: default !important;
    background: transparent !important;
}

/* --- FORCE OVERRIDE for Bootstrap Pagination Boxes on Tickets (li > a) --- */
#tableTicketsList_paginate ul.pagination li>a,
#tableTicketsList_paginate ul.pagination li.active>a,
#tableTicketsList_paginate ul.pagination li>a:hover,
#tableTicketsList_paginate ul.pagination li.active>a:hover {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
}

#tableTicketsList_paginate ul.pagination li.active>a,
#tableTicketsList_paginate ul.pagination li>a:hover {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    background: rgba(0, 240, 255, 0.05) !important;
    border-radius: 6px !important;
}

#tableTicketsList_paginate ul.pagination li.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- AGGRESSIVE OVERRIDE for the li.paginate_button itself (Tickets) --- */
#tableTicketsList_paginate li.paginate_button,
#tableTicketsList_paginate li.paginate_button.active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    /* Let the anchor tag handle padding */
    margin: 0 !important;
}

#tableTicketsList_paginate li.paginate_button:hover,
#tableTicketsList_paginate li.paginate_button:focus {
    background: transparent !important;
    border: none !important;
}

/* --- Client Area Emails Pagination: match supporttickets.php style --- */
#tableEmailsList_paginate .paginate_button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 5px 12px !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
}

#tableEmailsList_paginate .paginate_button:hover,
#tableEmailsList_paginate .paginate_button.current {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    font-weight: 800 !important;
    background: rgba(0, 240, 255, 0.05) !important;
}

#tableEmailsList_paginate .paginate_button.disabled {
    color: rgba(255, 255, 255, 0.2) !important;
    cursor: default !important;
    background: transparent !important;
}

#tableEmailsList_paginate ul.pagination li > a,
#tableEmailsList_paginate ul.pagination li.active > a,
#tableEmailsList_paginate ul.pagination li > a:hover,
#tableEmailsList_paginate ul.pagination li.active > a:hover {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
}

#tableEmailsList_paginate ul.pagination li.active > a,
#tableEmailsList_paginate ul.pagination li > a:hover {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    background: rgba(0, 240, 255, 0.05) !important;
    border-radius: 6px !important;
}

#tableEmailsList_paginate ul.pagination li.previous.disabled > a,
#tableEmailsList_paginate ul.pagination li.next.disabled > a,
#tableEmailsList_paginate ul.pagination li.disabled > a {
    color: rgba(255, 255, 255, 0.2) !important;
    pointer-events: none;
}

#tableEmailsList_paginate li.paginate_button,
#tableEmailsList_paginate li.paginate_button.active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#tableEmailsList_paginate li.paginate_button:hover,
#tableEmailsList_paginate li.paginate_button:focus {
    background: transparent !important;
    border: none !important;
}

/* --- Fix Submit Ticket Page Transparency (submitticket.php) --- */

/* 1. Message Box (Textarea) & Inputs */
#inputMessage,
#inputSubject,
#inputName,
#inputEmail,
#inputDepartment,
#inputPriority,
#inputRelatedService,
form[action*="submitticket.php"] .form-control,
form[action*="step=3"] .form-control {
    background: rgba(20, 25, 40, 0.6) !important;
    /* Slightly darker glass for inputs */
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

form[action*="submitticket.php"] #inputMessage,
form[action*="step=3"] #inputMessage,
form[action*="submitticket.php"] .md-editor>textarea#inputMessage,
form[action*="step=3"] .md-editor>textarea#inputMessage {
    min-height: 320px !important;
}

/* Focus State */
#inputMessage:focus,
form[action*="submitticket.php"] .form-control:focus,
form[action*="step=3"] .form-control:focus {
    background: rgba(20, 25, 40, 0.8) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2) !important;
}

@media (max-width: 767px) {
    form[action*="submitticket.php"] #inputMessage,
    form[action*="step=3"] #inputMessage,
    form[action*="submitticket.php"] .md-editor>textarea#inputMessage,
    form[action*="step=3"] .md-editor>textarea#inputMessage {
        min-height: 280px !important;
    }
}

/* 2. File Input Wrapper */
#inputAttachments {
    padding: 10px !important;
    height: auto !important;
}

#fileUploadsContainer.ticket-extra-attachments {
    margin-top: 10px;
}

#fileUploadsContainer .ticket-attachment-row {
    margin-top: 10px;
}

#fileUploadsContainer .ticket-attachment-row .input-group-btn .btn {
    min-width: 42px;
}

/* 3. Dropdown Options (Selects) */
#inputDepartment option,
#inputPriority option,
#inputRelatedService option {
    background: #05050A !important;
    /* Solid background for options to be readable */
    color: #fff !important;
}

/* 4. Labels */
form[action*="submitticket.php"] label,
form[action*="step=3"] label {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

/* 5. Markdown Editor Toolbar (if present) */
.markdown-editor-controls {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    border-bottom: none !important;
}

/* 6. Custom Fields Container (if any) */
#customFieldsContainer .form-control {
    background: rgba(20, 25, 40, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
}

/* 7. Markdown Editor Fixes (Remove White Backgrounds) */
.markdown-editor-controls,
.editor-statusbar,
.markdown-editor,
.btn-toolbar,
.md-editor,
.md-editor>.md-header,
.md-editor .md-footer,
.md-preview,
.md-editor>.md-preview,
.md-editor>textarea.markdown-editor,
.md-editor.md-fullscreen-mode {
    background: rgba(10, 15, 25, 0.95) !important;
    /* Darker/More opaque for fullscreen */
    background-color: rgba(10, 15, 25, 0.95) !important;
    border-color: var(--border-glass) !important;
    color: #fff !important;
    font-weight: normal !important;
}

.markdown-editor-controls .btn {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid transparent !important;
}

.markdown-editor-controls .btn:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    color: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
}

/* 7b. Fullscreen Markdown Preview (submitticket) */
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode,
form[action*="step=3"] .md-editor.md-fullscreen-mode {
    background: rgba(5, 10, 24, 0.98) !important;
    border: 1px solid var(--border-glass) !important;
}

form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-header,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-header,
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-footer,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-footer {
    background: rgba(10, 15, 25, 0.94) !important;
    border-color: var(--border-glass) !important;
}

form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-preview,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-preview,
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-input,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-input,
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-input:focus,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-input:focus,
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-input:hover,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-input:hover {
    background: rgba(10, 15, 25, 0.98) !important;
    color: #e2e8f0 !important;
    border: 0 !important;
}

form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-preview a,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-preview a {
    color: var(--accent-cyan) !important;
}

form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-preview h1,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-preview h1,
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-preview h2,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-preview h2,
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-preview h3,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-preview h3,
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-preview h4,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-preview h4,
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-preview p,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-preview p,
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-preview li,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-preview li,
form[action*="submitticket.php"] .md-editor.md-fullscreen-mode .md-preview code,
form[action*="step=3"] .md-editor.md-fullscreen-mode .md-preview code {
    color: #e2e8f0 !important;
}

/* Fix Preview Button */
.markdown-editor-controls .btn.btn-primary.btn-sm.btn-preview {
    background: var(--accent-gradient) !important;
    color: #000 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3) !important;
}

/* 8. Fix "Add More" & "Cancel" Buttons (currently white) */
form[action*="submitticket"] .btn-default,
form[action*="step=3"] .btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    transition: 0.3s;
}

form[action*="submitticket"] .btn-default:hover,
form[action*="step=3"] .btn-default:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

a.btn.btn-default.btn-ticket-continue {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

a.btn.btn-default.btn-ticket-continue:hover,
a.btn.btn-default.btn-ticket-continue:focus {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
    filter: brightness(1.08);
    color: #000 !important;
}

a.btn.btn-default.btn-ticket-continue:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

/* 9. File Input Styling Attempt */
input[type="file"] {
    color: var(--text-secondary) !important;
    background: transparent !important;
}


/* --- Fix View Ticket Page Transparency (viewticket.php) --- */

/* 1. Reply & Info Panels */
.panel-info,
.panel-collapsable {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.panel-info>.panel-heading {
    background: rgba(20, 25, 40, 0.6) !important;
    color: #fff !important;
    border: 1px solid var(--border-glass) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
}

.panel-info>.panel-body {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    color: #cbd5e1 !important;
}

/* 1b. Buttons in View Ticket Reply Form */
#frmReply #inputMessage,
#frmReply .md-editor>textarea#inputMessage {
    min-height: 320px !important;
}

@media (max-width: 767px) {
    #frmReply #inputMessage,
    #frmReply .md-editor>textarea#inputMessage {
        min-height: 280px !important;
    }
}

#frmReply .btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    transition: 0.3s;
}

#frmReply .btn-default:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}

#frmReply .md-control-fullscreen,
#frmReply .md-fullscreen-controls {
    display: none !important;
}

#frmReply .md-editor.md-fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    background: rgba(5, 10, 24, 0.98) !important;
    border: 1px solid var(--border-glass) !important;
}

#frmReply .md-editor.md-fullscreen-mode .md-header,
#frmReply .md-editor.md-fullscreen-mode .md-footer {
    background: rgba(10, 15, 25, 0.94) !important;
    border-color: var(--border-glass) !important;
}

#frmReply .md-editor.md-fullscreen-mode .md-preview,
#frmReply .md-editor.md-fullscreen-mode .md-input,
#frmReply .md-editor.md-fullscreen-mode .md-input:focus,
#frmReply .md-editor.md-fullscreen-mode .md-input:hover {
    background: rgba(10, 15, 25, 0.98) !important;
    color: #e2e8f0 !important;
    border: 0 !important;
}

#frmReply .md-editor.md-fullscreen-mode .md-preview a {
    color: var(--accent-cyan) !important;
}

#frmReply .md-editor.md-fullscreen-mode .md-preview h1,
#frmReply .md-editor.md-fullscreen-mode .md-preview h2,
#frmReply .md-editor.md-fullscreen-mode .md-preview h3,
#frmReply .md-editor.md-fullscreen-mode .md-preview h4,
#frmReply .md-editor.md-fullscreen-mode .md-preview p,
#frmReply .md-editor.md-fullscreen-mode .md-preview li,
#frmReply .md-editor.md-fullscreen-mode .md-preview code {
    color: #e2e8f0 !important;
}

/* 2. Ticket Reply Cards */
.ticket-reply {
    background: rgba(20, 25, 40, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Staff Reply - Distinct Tint */
.ticket-reply.staff {
    background: rgba(0, 240, 255, 0.05) !important;
    border-color: rgba(0, 240, 255, 0.2) !important;
}

/* 3. Reply Content Styling */
.ticket-reply .date {
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    opacity: 0.8 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.ticket-reply .user .name {
    background: transparent !important;
    color: #fff !important;
}

/* Fix Email/Type display */
.ticket-reply .type {
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

/* --- Fix Server Status Page Transparency (serverstatus.php) --- */

/* 1. Issue Panels */
.panel-warning,
.panel-danger,
.panel-success {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.panel-warning>.panel-heading {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-radius: 12px 12px 0 0 !important;
}

.panel-danger>.panel-heading {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 12px 12px 0 0 !important;
}

.panel-success>.panel-heading {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 12px 12px 0 0 !important;
}

/* 2. List Groups in Panels */
.list-group-item {
    background: rgba(20, 25, 40, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
    border-top: none !important;
}

.list-group-item:last-child {
    border-radius: 0 0 12px 12px !important;
}

/* Priority Items */
.list-group-item-danger {
    background: rgba(239, 68, 68, 0.05) !important;
    color: #ef4444 !important;
}

.list-group-item-warning {
    background: rgba(245, 158, 11, 0.05) !important;
    color: #f59e0b !important;
}

.list-group-item-success {
    background: rgba(16, 185, 129, 0.05) !important;
    color: #10b981 !important;
}

.list-group-item-info {
    background: rgba(0, 240, 255, 0.05) !important;
    color: var(--accent-cyan) !important;
}

/* 3. Server Status Table */
/* Reuse generic table styles, but ensure specific overrides */
.table-responsive>.table {
    background: transparent !important;
}

.table-responsive>.table>thead>tr>th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 15px !important;
}

.table-responsive>.table>tbody>tr>td {
    background: transparent !important;
    border-top: 1px solid var(--border-glass) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
    padding: 15px !important;
    vertical-align: middle !important;
}

.table-responsive>.table>tbody>tr:hover {
    background: rgba(0, 240, 255, 0.03) !important;
}

/* 4. Pagination Buttons */
.btn-group .btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    transition: 0.3s;
}

.btn-group .btn-default:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}

.btn-group .btn-default.disabled {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}


.ticket-reply .user {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
    background: transparent !important;
    /* Ensure no white bg */
}

.ticket-reply .user i {
    color: var(--accent-cyan) !important;
    background: rgba(0, 240, 255, 0.1) !important;
    padding: 8px !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
}

.ticket-reply .message {
    color: #e2e8f0 !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    background: transparent !important;
    /* Ensure no white bg */
}

/* 4. Labels in Replies */
.ticket-reply .label {
    border-radius: 4px !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-left: 10px !important;
    padding: 3px 8px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #cbd5e1 !important;
}

.ticket-reply .label-info {
    /* Operator/Staff label */
    background: rgba(0, 240, 255, 0.1) !important;
    color: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
}

.ticket-reply .label.requestor-type-owner {
    background: rgba(245, 158, 11, 0.1) !important;
    /* Gold tint for owner */
    color: #f59e0b !important;
    border-color: #f59e0b !important;
}

.ticket-reply .label-primary {
    /* User label fallback */
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 5. Attachments Area in Reply */
.ticket-reply .attachments {
    border-top: 1px solid var(--border-glass) !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    background: transparent !important;
}

.ticket-reply .attachments ul li {
    background: transparent !important;
    color: var(--accent-cyan) !important;
}

.ticket-reply .attachments a {
    color: var(--accent-cyan) !important;
    text-decoration: underline !important;
}

/* 6. Rating Stars */
.rating .star,
.rating-done .star {
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.5) !important;
}


/* --- Fix User Management Table Transparency (index.php?rp=/account/users) --- */

/* 1. Header Styling */
.table>thead>tr>th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 12px 15px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border-top: none !important;
}

/* 2. Fix Striped Rows Compatibility with Dark Theme */
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
    /* Very subtle stripe */
}

/* 3. Hover Effect */
.table-hover>tbody>tr:hover,
.table>tbody>tr:hover {
    background-color: rgba(0, 240, 255, 0.05) !important;
}

/* 4. Ensure cells are transparent */
.table>tbody>tr>td {
    background-color: transparent !important;
    /* Override explicit bg colors */
    border-color: var(--border-glass) !important;
    color: var(--text-secondary) !important;
}

/* 5. Buttons in the table (Manage Permissions / Remove Access) */
.table .btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    transition: 0.3s;
}

.table .btn-default:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}

.table .btn-danger {
    background: rgba(255, 0, 85, 0.1) !important;
    border: 1px solid rgba(255, 0, 85, 0.3) !important;
    color: #FF0055 !important;
}

.table .btn-danger:hover {
    background: rgba(255, 0, 85, 0.2) !important;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.3) !important;
}

/* --- White Fallback Cleanup: Store + Recommendations + Selectize --- */

#recommendationsModal .product-added-panel .panel-body {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 10px;
}

#recommendationsModal .product-recommendations {
    border-color: var(--border-glass) !important;
}

#recommendationsModal .product-recommendations .product-recommendation {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

#recommendationsModal .product-recommendations .product-recommendation .body {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
}

#recommendationsModal .product-recommendations .product-recommendation .btn-add {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
}

#recommendationsModal .product-recommendations .product-recommendation .arrow {
    background: rgba(0, 240, 255, 0.12) !important;
    color: var(--accent-cyan) !important;
}

#recommendationsModal .product-recommendations .product-recommendation .price,
#recommendationsModal .product-recommendations .product-recommendation .expander {
    color: var(--accent-cyan) !important;
}

.selectize-control .selectize-input,
.selectize-control.single .selectize-input,
.selectize-dropdown,
.selectize-dropdown-content {
    background: rgba(10, 15, 25, 0.92) !important;
    border-color: var(--border-glass) !important;
    color: #fff !important;
}

.selectize-dropdown .option,
.selectize-dropdown .optgroup-header {
    color: #cbd5e1 !important;
}

.selectize-dropdown .active,
.selectize-dropdown .option:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    color: #fff !important;
}


/* ===========================================================================
   BOOTSTRAP 4 / TWENTY-ONE TEMPLATE ADAPTATIONS
   Ported from designer's Bootstrap 3 panel-based styling to Bootstrap 4 cards
   =========================================================================== */

/* --- Hide Twenty-One default header (replaced by .header-main) --- */
header#header.header {
    display: none !important;
}

/* --- Cards (Bootstrap 4 equivalent of .panel) --- */
.card,
.mc-promo-manage,
.mc-promo-login {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #fff;
    font-weight: 700;
    padding: 15px 25px;
    border-radius: 20px 20px 0 0 !important;
}

.card-body,
.mc-promo-manage .content,
.mc-promo-login .content {
    padding: 25px;
    color: #cbd5e1;
    background: transparent !important;
}

.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-glass) !important;
    border-radius: 0 0 20px 20px !important;
}

.card-title,
.mc-promo-manage .panel-heading h3,
.mc-promo-login .panel-heading h3 {
    color: #fff;
    font-weight: 700;
}

/* --- Sidebar Cards (Twenty-One) --- */
.card-sidebar {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 16px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
}

.card-sidebar .card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    padding: 22px 25px !important;
    border-radius: 16px 16px 0 0 !important;
}

.card-sidebar .card-header .card-title {
    font-family: 'Fira Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.card-sidebar .card-header .card-title i {
    color: var(--accent-cyan) !important;
}

.card-sidebar .card-header .card-minimise {
    color: var(--text-secondary);
}

/* --- Sidebar list-group in Twenty-One --- */
.sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 16px 25px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.sidebar .list-group-item:last-child {
    border-bottom: none !important;
}

.sidebar .list-group-item:hover,
.sidebar .list-group-item-action:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    padding-left: 25px !important;
}

.sidebar .list-group-item.active {
    background: rgba(0, 240, 255, 0.08) !important;
    color: var(--accent-cyan) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar .list-group-item.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: var(--accent-gradient) !important;
    box-shadow: 2px 0 15px rgba(0, 240, 255, 0.6) !important;
}

.sidebar .list-group-item .sidebar-menu-item-icon {
    color: var(--accent-cyan) !important;
    opacity: 0.6 !important;
    transition: 0.3s !important;
}

.sidebar .list-group-item:hover .sidebar-menu-item-icon {
    opacity: 1 !important;
    transform: scale(1.2) !important;
}

.sidebar .list-group-item.active .sidebar-menu-item-icon {
    color: var(--accent-cyan) !important;
    opacity: 1 !important;
}

/* --- Breadcrumb (Twenty-One) --- */
.master-breadcrumb {
    background-color: transparent !important;
    border-bottom: none;
}
.breadcrumb {
    background-color: transparent !important;
    margin: 0;
    padding: 9px 0;
}
.breadcrumb-item a {
    color: var(--accent-cyan) !important;
}
.breadcrumb-item.active {
    color: var(--text-secondary) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--border-glass) !important;
}

/* --- Twenty-One action-icon-btns (client home shortcuts) --- */
.action-icon-btns a {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    color: var(--text-secondary) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.action-icon-btns a:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 20px 40px rgba(0, 240, 255, 0.15);
    color: #fff !important;
}
.action-icon-btns a .ico-container i {
    color: var(--accent-cyan) !important;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
}

/* --- Twenty-One client-home-cards --- */
.client-home-cards .card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--border-glass) !important;
}
.client-home-cards .card-header .btn {
    color: var(--text-secondary) !important;
}
.client-home-cards .card-header .btn:hover {
    color: var(--accent-cyan) !important;
}
.client-home-cards .card-body {
    background: transparent !important;
    color: #cbd5e1 !important;
}

/* --- Twenty-One Topbar (hide, using header-main instead) --- */
.topbar {
    display: none !important;
}

/* --- Twenty-One Toolbar --- */
header.header .toolbar .nav-link {
    border-color: var(--border-glass);
    color: var(--text-secondary);
}

/* --- Pagination (Bootstrap 4) --- */
.page-item .page-link {
    background: transparent;
    border-color: var(--border-glass);
    color: var(--text-secondary);
}
.page-item .page-link:hover {
    background: rgba(0, 240, 255, 0.05);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}
.page-item.active .page-link {
    background: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
    color: #000 !important;
}
.page-item.disabled .page-link {
    background: transparent;
    border-color: var(--border-glass);
    color: rgba(255, 255, 255, 0.2);
}

/* --- Twenty-One Nav Tabs (Bootstrap 4) --- */
.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: none;
}
.nav-tabs .nav-link:hover {
    color: var(--accent-cyan);
    border-color: transparent;
}
.nav-tabs .nav-link.active {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border: 1px solid var(--border-glass) !important;
    border-bottom-color: transparent !important;
    border-radius: 10px 10px 0 0 !important;
}

/* --- Twenty-One Footer --- */
footer.footer {
    border-top: 1px solid var(--border-glass);
    padding: 60px 0 40px;
    margin-top: 80px;
    color: var(--text-secondary);
    background: transparent !important;
}
footer.footer .nav-link {
    color: var(--text-secondary) !important;
    transition: 0.3s;
}
footer.footer .nav-link:hover {
    color: var(--accent-cyan) !important;
}
footer.footer .btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass);
    color: var(--text-secondary) !important;
}
footer.footer .btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan) !important;
}
footer.footer .copyright {
    color: var(--text-secondary);
    font-size: 0.85rem;
}
footer.footer .legal-links {
    border-top: 1px solid var(--border-glass);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}
footer.footer .legal-links .nav-link {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4) !important;
    padding: 0.25rem 0.75rem;
}
footer.footer .legal-links .nav-link:hover {
    color: var(--text-secondary) !important;
}
.back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    transition: 0.3s;
}
.back-to-top:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    transform: translateY(-3px);
}

/* --- Notification button in header --- */
.btn-notifications {
    background: transparent !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--text-secondary) !important;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 14px;
}
.btn-notifications:hover {
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}
.btn-notifications .badge-glow {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent-cyan) !important;
    color: #000 !important;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 50%;
    font-weight: 700;
}

/* Logout button */
.btn-logout {
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--text-secondary) !important;
}
.btn-logout:hover {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

/* --- Mobile nav collapse --- */
.mobile-nav-collapse {
    background: rgba(10, 15, 25, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-glass);
    padding: 15px 0;
}
.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobile-nav-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mobile-nav-list li a {
    display: block;
    padding: 12px 15px;
    color: var(--text-secondary) !important;
    font-size: 14px;
    font-weight: 600;
}
.mobile-nav-list li a:hover {
    color: #fff !important;
    background: rgba(0, 240, 255, 0.05);
}
.mobile-nav-list .dropdown-menu {
    position: static !important;
    float: none;
    border: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.02) !important;
    padding-left: 20px;
}

/* --- Twenty-One specific: Domain search on homepage --- */
.domain-checker-container,
.domain-checker-bg {
    background: rgba(20, 25, 40, 0.65) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
}

/* --- Twenty-One Announcements (cards not articles) --- */
.primary-content .card {
    background: var(--bg-glass) !important;
}
.primary-content .card a {
    color: var(--accent-cyan);
}
.primary-content .card a:hover {
    color: #fff;
}

/* --- Twenty-One view invoice/quote --- */
.invoice-container {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
}

/* --- Bootstrap 4 custom-select fix --- */
.custom-select {
    background-color: rgba(10, 15, 25, 0.6) !important;
    border-color: var(--border-glass) !important;
    color: #fff !important;
}

/* --- Bootstrap 4 input-group-text --- */
.input-group-text {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-glass) !important;
    color: var(--text-secondary) !important;
}

/* --- Localisation modal Twenty-One --- */
.modal-localisation .modal-content {
    background-color: rgba(10, 15, 25, 0.95) !important;
}
.modal-localisation .item-selector .item {
    border-color: var(--border-glass);
    color: #eee;
}
.modal-localisation .item-selector .item:hover {
    background-color: rgba(0, 240, 255, 0.1);
    color: #fff;
}
.modal-localisation .item-selector .item.active {
    background-color: rgba(0, 240, 255, 0.2);
    border-color: var(--accent-cyan);
    color: #fff;
}

/* --- Twenty-One "table-list" class --- */
table.table-list {
    border-color: var(--border-glass) !important;
}
table.table-list thead th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: var(--accent-cyan) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}
table.table-list > tbody > tr > td {
    background: transparent !important;
    border-color: var(--border-glass) !important;
    color: #cbd5e1 !important;
}
table.table-list > tbody > tr:hover > td {
    background: rgba(0, 240, 255, 0.03) !important;
    color: #fff !important;
}

/* --- Status labels in Twenty-One (Bootstrap 4 badges) --- */
.badge {
    border-radius: 50px !important;
    font-weight: 700;
}
.badge-primary {
    background: var(--accent-gradient) !important;
    color: #000 !important;
}
.badge-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.badge-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.badge-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-info {
    background: rgba(0, 240, 255, 0.2) !important;
    color: var(--accent-cyan) !important;
    border: 1px solid rgba(0, 240, 255, 0.3);
}
.badge-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
}

/* --- Twenty-One .btn-default (Bootstrap 4) --- */
.btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--text-secondary) !important;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.3s;
}
.btn-default:hover,
.btn-default:focus {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}

/* --- Full page overlay --- */
#fullpage-overlay {
    background-color: rgba(5, 5, 10, 0.85);
}

/* --- Admin return button --- */
.btn-return-to-admin {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-glass);
}

/* --- Selection color --- */
::selection {
    background-color: var(--accent-cyan);
    color: #000;
}

/* --- Twenty-One network-issue-alert --- */
.network-issue-alert {
    border-color: var(--border-glass);
    background: rgba(239, 68, 68, 0.1) !important;
}

/* --- Text utility overrides --- */
.text-dark {
    color: #fff !important;
}
.text-muted {
    color: var(--text-secondary) !important;
}
.bg-light {
    background: rgba(255, 255, 255, 0.03) !important;
}
.bg-white {
    background: var(--bg-glass) !important;
}

/* --- Twenty-One div-service-item (home products list) --- */
.div-service-item {
    color: #cbd5e1;
}
.div-service-name > span {
    color: #fff;
}
.div-service-name > span:last-child {
    color: var(--text-secondary);
}

/* --- KB and announcements readability (Twenty-One uses cards, not raw articles) --- */
.kb-category a {
    color: #fff !important;
}
.kb-category a:hover {
    background: rgba(0, 240, 255, 0.05) !important;
    color: var(--accent-cyan) !important;
}
.kb-article-item:hover {
    background: rgba(0, 240, 255, 0.05) !important;
}
.kb-article-item small {
    color: var(--text-secondary) !important;
}

/* --- Twenty-One dataTables overrides --- */
.dataTables_wrapper .dataTables_filter label .form-control {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
}

/* ===========================================================================
   NUKE ALL WHITE BACKGROUNDS - Core transparency overrides
   Ported from Remax designer template to kill Twenty-One theme.css whites
   =========================================================================== */

/* --- 1. CORE TRANSPARENCY: Force all main containers transparent --- */
#main-body,
section#main-body,
.main-content,
section,
.row,
div.container-fluid,
#contentarea {
    background: transparent !important;
    background-color: transparent !important;
}

/* Body background override (theme.css sets body bg to #fff) */
body {
    background-color: var(--bg-deep) !important;
}

/* --- 2. TABLES: Kill all white table backgrounds --- */
.table,
.table-responsive,
.table-responsive > .table,
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even),
.table-bordered,
.table-list,
.table-list > tbody > tr > td {
    background-color: transparent !important;
}

.table > thead > tr > th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    border-top: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

.table > tbody > tr > td {
    border-color: var(--border-glass) !important;
    color: #cbd5e1 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.table-hover > tbody > tr:hover,
.table > tbody > tr:hover {
    background-color: rgba(0, 240, 255, 0.05) !important;
}

/* --- 3. FORMS: Kill white form backgrounds --- */
.form-control:not([type="tel"]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="search"],
select.form-control,
textarea.form-control {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 12px !important;
}
/* Tel inputs: colors only, no border-radius override (breaks intl-tel-input) */
input[type="tel"] {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select.form-control:focus {
    background: rgba(10, 15, 25, 0.9) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2) !important;
    color: #fff !important;
}

select.form-control option,
.custom-select option {
    background-color: #05050A !important;
    color: #fff !important;
}

/* Custom select (Bootstrap 4) */
.custom-select {
    background-color: rgba(10, 15, 25, 0.6) !important;
    border-color: var(--border-glass) !important;
    color: #fff !important;
}

/* Custom checkboxes/radios */
.custom-control-label::before {
    background-color: rgba(10, 15, 25, 0.6) !important;
    border-color: var(--border-glass) !important;
}

/* Input group addons */
.input-group-text,
.input-group-prepend .btn,
.input-group-append .btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-glass) !important;
    color: var(--text-secondary) !important;
}

/* --- 4. DROPDOWN MENUS: Kill white dropdowns --- */
.dropdown-menu {
    background: #0A0F19 !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    padding: 8px !important;
}

.dropdown-menu .dropdown-item,
.dropdown-menu > li > a {
    color: #cbd5e1 !important;
    border-radius: 8px;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: rgba(0, 240, 255, 0.1) !important;
    color: #fff !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: rgba(0, 240, 255, 0.15) !important;
    color: #fff !important;
}

.dropdown-divider {
    border-color: var(--border-glass) !important;
}

/* --- 5. MODALS: Kill white modal backgrounds --- */
.modal-content {
    background: rgba(10, 15, 25, 0.95) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    color: #fff;
}

.modal-header {
    border-bottom-color: var(--border-glass) !important;
}

.modal-header .modal-title {
    color: #fff !important;
}

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

.modal-body {
    color: #cbd5e1 !important;
}

.modal-footer {
    border-top-color: var(--border-glass) !important;
}

/* --- 6. ALERTS: Kill white alert backgrounds --- */
.alert {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
    border-radius: 12px !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

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

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

.alert-info {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: rgba(0, 240, 255, 0.3) !important;
    color: var(--accent-cyan) !important;
}

/* --- 7. WELL elements --- */
.well {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: #94A3B8 !important;
    border-radius: 12px !important;
}

/* --- 8. NAV TABS & PILLS: Kill white active backgrounds --- */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border-color: var(--border-glass) var(--border-glass) transparent !important;
}

.nav-pills .nav-link.active {
    background: var(--accent-gradient) !important;
    color: #000 !important;
}

.nav-pills .nav-link {
    color: var(--text-secondary) !important;
}

.nav-pills {
    background-color: transparent !important;
}

/* --- 9. POPOVER: Kill white popover backgrounds --- */
.popover {
    background: #0A0F19 !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

.popover-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom-color: var(--border-glass) !important;
    color: #fff !important;
}

.popover-body {
    color: #cbd5e1 !important;
}

.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-bottom-color: #0A0F19 !important;
}

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: #0A0F19 !important;
}

/* --- 10. TOOLTIP: --- */
.tooltip-inner {
    background: #0A0F19 !important;
    border: 1px solid var(--border-glass);
    color: #fff !important;
}

/* --- 11. BUTTONS: Kill white btn backgrounds --- */
.btn-light {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
}

.btn-light:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    border-color: var(--border-glass) !important;
    color: var(--text-secondary) !important;
}

.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}

/* Primary button gradient */
.btn-primary {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.5) !important;
    transform: translateY(-2px);
    color: #000 !important;
}

/* Danger button */
.btn-danger {
    background: rgba(255, 0, 85, 0.15) !important;
    border: 1px solid rgba(255, 0, 85, 0.3) !important;
    color: #FF0055 !important;
}

.btn-danger:hover {
    background: rgba(255, 0, 85, 0.25) !important;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.3) !important;
    color: #FF0055 !important;
}

/* Success button */
.btn-success {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

.btn-success:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

/* --- 12. HEADER (Twenty-One default): force hidden --- */
header#header.header,
header.header {
    background-color: transparent !important;
}

/* --- 13. IMAGES & THUMBNAILS --- */
.img-thumbnail {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-glass) !important;
}

/* --- 14. UTILITY OVERRIDES --- */
.bg-white {
    background: var(--bg-glass) !important;
}

.bg-light {
    background: rgba(255, 255, 255, 0.03) !important;
}

.text-dark {
    color: #fff !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

.border {
    border-color: var(--border-glass) !important;
}

.border-bottom {
    border-bottom-color: var(--border-glass) !important;
}

.border-top {
    border-top-color: var(--border-glass) !important;
}

/* --- 15. LIST GROUP ITEMS (global) --- */
.list-group-item {
    background: transparent !important;
    border-color: var(--border-glass) !important;
    color: #cbd5e1 !important;
}

.list-group-item:hover,
.list-group-item-action:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}

.list-group-item-danger {
    background: rgba(239, 68, 68, 0.05) !important;
    color: #ef4444 !important;
}

.list-group-item-warning {
    background: rgba(245, 158, 11, 0.05) !important;
    color: #f59e0b !important;
}

.list-group-item-success {
    background: rgba(16, 185, 129, 0.05) !important;
    color: #10b981 !important;
}

.list-group-item-info {
    background: rgba(0, 240, 255, 0.05) !important;
    color: var(--accent-cyan) !important;
}

/* --- 16. ACCORDION / COLLAPSE --- */
.accordion .card {
    background: var(--bg-glass) !important;
}

.accordion .card-header {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* --- 17. JUMBOTRON --- */
.jumbotron {
    background: var(--bg-glass) !important;
    color: #fff !important;
}

/* --- 18. DATATABLE OVERRIDES (generic) --- */
.dataTables_wrapper {
    color: #cbd5e1 !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: #cbd5e1 !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: #cbd5e1 !important;
}

.dataTables_wrapper .dataTables_length select {
    background-color: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #cbd5e1 !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: rgba(0, 240, 255, 0.1) !important;
    color: #fff !important;
    border-color: var(--accent-cyan) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- 19. SELECTIZE (third-party select) --- */
.selectize-control .selectize-input,
.selectize-control.single .selectize-input,
.selectize-dropdown,
.selectize-dropdown-content {
    background: rgba(10, 15, 25, 0.92) !important;
    border-color: var(--border-glass) !important;
    color: #fff !important;
}

.selectize-dropdown .option,
.selectize-dropdown .optgroup-header {
    color: #cbd5e1 !important;
}

.selectize-dropdown .active,
.selectize-dropdown .option:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    color: #fff !important;
}

/* --- 20. INTL-TEL-INPUT (phone country dropdown) --- */
.iti__country-list,
.intl-tel-input .country-list {
    background-color: #0F172A !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

.iti__country:hover,
.iti__country.iti__highlight,
.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
    background-color: var(--accent-blue) !important;
    color: #fff !important;
}

.iti__country-name,
.iti__dial-code {
    color: #cbd5e1 !important;
}

/* --- 21. MARKDOWN EDITOR --- */
.md-editor,
.md-editor > .md-header,
.md-editor .md-footer,
.md-preview,
.md-editor > .md-preview,
.md-editor > textarea,
.md-editor.md-fullscreen-mode,
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-input:focus {
    background: rgba(10, 15, 25, 0.95) !important;
    background-color: rgba(10, 15, 25, 0.95) !important;
    border-color: var(--border-glass) !important;
    color: #fff !important;
}

/* --- 22. PRODUCT DETAILS & STATUS (Twenty-One equivalents) --- */
.product-details,
.product-details-tab-container {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
}

.product-status {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 16px !important;
}

.tab-content,
.tab-pane {
    background: transparent !important;
    color: #cbd5e1 !important;
}

/* --- 23. TICKET REPLY CARDS (Twenty-One) --- */
.ticket-reply {
    background: rgba(20, 25, 40, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.ticket-reply.staff {
    background: rgba(0, 240, 255, 0.05) !important;
    border-color: rgba(0, 240, 255, 0.2) !important;
}

.ticket-reply .message {
    color: #e2e8f0 !important;
    background: transparent !important;
}

.ticket-reply .user {
    color: #fff !important;
    background: transparent !important;
}

.ticket-reply .date {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

/* --- 24. LOGIN/REGISTER CONTAINERS --- */
.login-container,
.register-container {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(30px);
    border: 1px solid var(--border-glass) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

/* --- 25. PANEL variants (Bootstrap 3 that may bleed through) --- */
.panel,
.panel-default {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
}

.panel-default > .panel-heading {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #fff !important;
}

.panel-body {
    background: transparent !important;
    color: #cbd5e1 !important;
}

.panel-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-glass) !important;
}

.panel-info {
    background: transparent !important;
    border: none !important;
}

.panel-info > .panel-heading {
    background: rgba(20, 25, 40, 0.6) !important;
    color: #fff !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px 12px 0 0 !important;
}

.panel-info > .panel-body {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    color: #cbd5e1 !important;
}

.panel-warning {
    background: transparent !important;
    border: none !important;
}

.panel-warning > .panel-heading {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-radius: 12px 12px 0 0 !important;
}

.panel-danger {
    background: transparent !important;
    border: none !important;
}

.panel-danger > .panel-heading {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 12px 12px 0 0 !important;
}

.panel-success {
    background: transparent !important;
    border: none !important;
}

.panel-success > .panel-heading {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 12px 12px 0 0 !important;
}

/* --- 26. STORE PAGES --- */
.landing-page .store-hero,
.store-hero {
    background: transparent !important;
}

.store-product .product,
.landing-page .product-card,
.store-product-card {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    color: #fff !important;
}

/* --- 27. SCROLLBAR --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #05050A;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

/* --- 28. INVOICE CONTAINER --- */
.invoice-container,
.invoice-container .card,
.invoice-container .card-body {
    background: var(--bg-glass) !important;
    color: #fff !important;
}

/* --- 29. CART / SHOPPING CART --- */
.order-summary,
.order-summary .card {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
}

.view-cart-items-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #fff !important;
}

.view-cart-items .item {
    border-bottom-color: var(--border-glass) !important;
    color: #cbd5e1 !important;
}

/* --- 30. CLIENT HOME PANEL: service items --- */
.client-home-cards .card {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
}

/* --- 31. PASSWORD REVEAL BUTTON --- */
.input-group .btn-reveal-pw,
.input-group .btn-reveal-pw:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-glass) !important;
    color: var(--text-secondary) !important;
}

/* --- 32. DOMAIN SEARCH / STORE DOMAIN TABS --- */
.store-order-container .store-domain-tabs li.active a,
.store-order-container .store-domain-tabs li a {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-glass) !important;
    color: #fff !important;
}

.store-order-container .store-domain-tabs li.active a {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
}

/* --- 33. KB & ANNOUNCEMENT PAGES --- */
.article-content,
.announcement-single {
    color: #cbd5e1 !important;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.announcement-single h1,
.announcement-single h2 {
    color: #fff !important;
}

/* --- 34. CONTACT PAGE --- */
#frmContact .form-control {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
}

/* --- 35. LABELS (Bootstrap 3 that may bleed through) --- */
.label {
    border-radius: 50px !important;
    font-weight: 700 !important;
}

.label-default {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
}

.label-primary {
    background: rgba(0, 240, 255, 0.15) !important;
    color: var(--accent-cyan) !important;
}

.label-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}

.label-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

.label-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

.label-info {
    background: rgba(0, 240, 255, 0.15) !important;
    color: var(--accent-cyan) !important;
}

/* --- 36. RECOMMENDATIONS MODAL --- */
#recommendationsModal .product-added-panel .panel-body {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-glass) !important;
}

#recommendationsModal .product-recommendations .product-recommendation {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
}

#recommendationsModal .product-recommendations .product-recommendation .body {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
}

/* --- 37. CLIENT ALERTS NOTIFICATION DROPDOWN --- */
.client-alerts {
    background: #0A0F19 !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
}

.client-alerts li {
    border-bottom: 1px solid var(--border-glass) !important;
}

.client-alerts li a {
    color: #cbd5e1 !important;
}

.client-alerts li a:hover {
    background: rgba(0, 240, 255, 0.05) !important;
    color: #fff !important;
}

.client-alerts li.none {
    color: var(--text-secondary) !important;
}

/* --- 38. SELECTION HIGHLIGHT --- */
::selection {
    background-color: var(--accent-cyan);
    color: #000;
}

/* --- 39. HR element --- */
hr {
    border-color: var(--border-glass) !important;
}

/* --- 40. CARD-BODY LINKS & TEXT READABILITY --- */
.card-body p,
.card-body span,
.card-body li,
.card-body td {
    color: #cbd5e1;
}

.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6 {
    color: #fff;
}

/* --- 41. FILE INPUT --- */
input[type="file"] {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

/* --- 42. BREADCRUMB CONTAINER (theme.css may override) --- */
.master-breadcrumb {
    background-color: transparent !important;
    border-bottom: none !important;
}

/* ===========================================================================
   ORDER FORM / STANDARD CART DARK OVERRIDES
   Targets /templates/orderforms/standard_cart/css/style.css whites
   =========================================================================== */

/* --- Cart: Product cards --- */
#order-standard_cart .products .product {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 16px !important;
    color: #cbd5e1 !important;
}

#order-standard_cart .products .product header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

#order-standard_cart .products .product header span {
    color: #fff !important;
}

#order-standard_cart .products .product div.product-desc {
    color: #cbd5e1 !important;
}

#order-standard_cart .products .product div.product-pricing span.price {
    color: var(--accent-cyan) !important;
}

/* --- Cart: Product info bar --- */
#order-standard_cart .product-info {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid var(--border-glass) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
}

#order-standard_cart .product-info .product-title {
    color: #fff !important;
}

/* --- Cart: Order summary sidebar --- */
#order-standard_cart .order-summary {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    border-bottom: 3px solid var(--accent-cyan) !important;
    border-radius: 16px !important;
}

#order-standard_cart .order-summary h2 {
    color: #fff !important;
}

#order-standard_cart .order-summary .summary-totals {
    border-color: var(--border-glass) !important;
}

#order-standard_cart .order-summary .total-due-today .amt {
    color: var(--accent-cyan) !important;
}

#order-standard_cart .order-summary .recurring-charges {
    color: var(--text-secondary) !important;
}

#order-standard_cart .order-summary .btn-continue-shopping {
    color: var(--text-secondary) !important;
}

/* --- Cart: Summary container (the content area inside order-summary) --- */
#order-standard_cart .summary-container {
    background: rgba(10, 15, 25, 0.6) !important;
    border-radius: 0 0 13px 13px !important;
    color: #cbd5e1 !important;
}

#order-standard_cart .order-summary .product-name {
    color: #fff !important;
}

#order-standard_cart .order-summary .product-group {
    color: var(--text-secondary) !important;
}

#order-standard_cart .order-summary .subtotal {
    border-bottom-color: var(--border-glass) !important;
    color: #fff !important;
}

#order-standard_cart .order-summary .bordered-totals {
    border-bottom-color: var(--border-glass) !important;
    color: #cbd5e1 !important;
}

/* --- Cart: View cart items --- */
#order-standard_cart .view-cart-items-header {
    background: rgba(0, 240, 255, 0.15) !important;
    color: #fff !important;
    border-radius: 12px 12px 0 0 !important;
}

#order-standard_cart .view-cart-items {
    border-bottom: 2px solid var(--accent-cyan) !important;
}

#order-standard_cart .view-cart-items .item {
    background: rgba(10, 15, 25, 0.4) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
}

#order-standard_cart .view-cart-items .item:nth-child(even) {
    background: rgba(10, 15, 25, 0.6) !important;
}

#order-standard_cart .view-cart-items .item-title {
    color: #fff !important;
}

#order-standard_cart .view-cart-items .item-domain {
    color: var(--accent-cyan) !important;
}

#order-standard_cart .view-cart-items .item-price span {
    color: #fff !important;
}

#order-standard_cart .btn-remove-from-cart {
    color: var(--text-secondary) !important;
}

#order-standard_cart .btn-remove-from-cart:hover {
    color: #ef4444 !important;
}

/* --- Cart: View cart tabs (promo codes etc.) --- */
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    border-color: var(--border-glass) var(--border-glass) transparent !important;
    background: rgba(10, 15, 25, 0.6) !important;
    color: #fff !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
    background: rgba(10, 15, 25, 0.6) !important;
    color: #cbd5e1 !important;
    border: 1px solid var(--border-glass) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
}

#order-standard_cart .view-cart-promotion-code {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px dashed var(--border-glass) !important;
    color: #cbd5e1 !important;
}

/* --- Cart: Gateway checkout area --- */
#order-standard_cart .view-cart-gateway-checkout {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    color: #cbd5e1 !important;
}

/* --- Cart: Empty cart button --- */
#order-standard_cart .empty-cart .btn {
    background: rgba(0, 240, 255, 0.15) !important;
    color: #fff !important;
    border: none !important;
}

/* --- Checkout: CC input container --- */
#order-standard_cart .cc-input-container {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
    color: #cbd5e1 !important;
}

#order-standard_cart .cc-input-container .existing-cc-grid {
    color: #cbd5e1 !important;
}

/* --- Checkout: Apply credit container --- */
#order-standard_cart .apply-credit-container {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
    color: #cbd5e1 !important;
}

#order-standard_cart .apply-credit-container span {
    color: #fff !important;
}

/* --- Checkout: Form fields --- */
#order-standard_cart .field:not([type="tel"]),
#order-standard_cart .form-control:not([type="tel"]) {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

#order-standard_cart .form-control:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2) !important;
    background: rgba(10, 15, 25, 0.9) !important;
}

#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly],
#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly] {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-secondary) !important;
}

#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc {
    color: var(--text-secondary) !important;
}

#order-standard_cart .field-icon i {
    color: var(--accent-cyan) !important;
    opacity: 0.6;
}

#order-standard_cart .field-help-text {
    color: var(--text-secondary) !important;
}

/* --- Checkout: Sub-heading separator (Personal Information, Billing, etc.) --- */
#order-standard_cart .sub-heading,
#registration .sub-heading {
    border-top: 1px solid var(--border-glass) !important;
}

#order-standard_cart .sub-heading span,
#registration .sub-heading span {
    background-color: var(--bg-deep) !important;
    color: var(--accent-cyan) !important;
}

/* --- Checkout: Registration form fields --- */
#registration label {
    color: var(--text-secondary) !important;
}

#registration .field,
#registration .form-control {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

/* --- Checkout: Security msg --- */
#order-standard_cart .checkout-security-msg {
    color: var(--text-secondary) !important;
}

/* --- Cart: Addon panels --- */
#order-standard_cart .panel-addon .panel-body {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    color: #cbd5e1 !important;
}

#order-standard_cart .panel-addon .panel-body label {
    color: #fff !important;
}

#order-standard_cart .panel-addon .panel-price {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--accent-cyan) !important;
}

#order-standard_cart .panel-addon .panel-add {
    background: var(--accent-gradient) !important;
    color: #000 !important;
}

#order-standard_cart .panel-addon-selected {
    border-color: var(--accent-cyan) !important;
}

/* --- Cart: Domain selection --- */
#order-standard_cart .domain-selection-options .option {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #cbd5e1 !important;
    border: 1px solid var(--border-glass) !important;
}

#order-standard_cart .domain-selection-options .option-selected {
    background: rgba(0, 240, 255, 0.05) !important;
    border-color: var(--accent-cyan) !important;
}

#order-standard_cart .domain-selection-options .option-selected label {
    color: #fff !important;
}

#order-standard_cart .transfer-eligible {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

#order-standard_cart .transfer-not-eligible {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
}

/* --- Cart: Domain pricing --- */
.domain-pricing .tld-row {
    border-bottom-color: var(--border-glass) !important;
    color: #cbd5e1 !important;
}

.domain-pricing .tld-row.highlighted {
    background: rgba(0, 240, 255, 0.05) !important;
}

.domain-pricing .tld-pricing-header div,
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header .col-sm-4 {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 3px solid var(--accent-cyan) !important;
    color: #fff !important;
}

.domain-pricing .no-bg {
    background: transparent !important;
}

/* --- Cart: Checkout button --- */
#order-standard_cart .btn-checkout {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important;
}

#order-standard_cart .btn-checkout:hover {
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.5) !important;
    transform: translateY(-2px);
}

/* --- Cart: Modal overrides --- */
#order-standard_cart .modal-header,
#order-standard_cart .modal-body,
#order-standard_cart .modal-footer {
    background: transparent !important;
}

/* --- Cart: Order confirmation page --- */
#order-standard_cart .order-confirmation {
    color: #fff !important;
}

#order-standard_cart .order-confirmation span {
    color: var(--accent-cyan) !important;
}

/* ===========================================================================
   ANNOUNCEMENT ARTICLE FIX
   =========================================================================== */

.announcements .announcement article {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 4px solid var(--accent-cyan) !important;
    border-radius: 0 12px 12px 0 !important;
    color: #cbd5e1 !important;
}

.announcements .announcement article p {
    color: #cbd5e1 !important;
}

.announcements .announcement h3 a {
    color: #fff !important;
}

.announcements .announcement h3 a:hover {
    color: var(--accent-cyan) !important;
}

/* ===========================================================================
   PASSWORD STRENGTH METER - Cyberpunk integration
   =========================================================================== */

.password-strength-meter .progress,
.progress {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 50px !important;
    height: 8px !important;
    overflow: hidden;
    border: 1px solid var(--border-glass);
}

.progress-bar {
    border-radius: 50px !important;
    transition: width 0.4s ease, background-color 0.4s ease !important;
}

/* Strength colors via background override */
.progress-bar.bg-danger,
.progress-bar.progress-bar-danger {
    background: linear-gradient(90deg, #FF0055, #ef4444) !important;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.4) !important;
}

.progress-bar.bg-warning,
.progress-bar.progress-bar-warning {
    background: linear-gradient(90deg, #f59e0b, #FFB400) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

.progress-bar.bg-info,
.progress-bar.progress-bar-info {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan)) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3) !important;
}

.progress-bar.bg-success,
.progress-bar.progress-bar-success {
    background: linear-gradient(90deg, #10b981, #34d399) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
}

/* Default progress bar (when no variant class) */
.progress-bar:not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.progress-bar-danger):not(.progress-bar-warning):not(.progress-bar-info):not(.progress-bar-success) {
    background: var(--accent-gradient) !important;
}

.password-strength-meter p {
    color: var(--text-secondary) !important;
}

/* ===========================================================================
   BOOTSTRAP SWITCH (Mailing list toggle) - Cyberpunk frame
   =========================================================================== */

.bootstrap-switch {
    border: 1px solid var(--border-glass) !important;
    border-radius: 50px !important;
    background: rgba(10, 15, 25, 0.6) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    min-width: 80px !important;
}

.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ON state - Cyan gradient */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background: var(--accent-gradient) !important;
    color: #000 !important;
    border-color: transparent !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3) !important;
}

/* OFF state - Dark */
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
    border-color: transparent !important;
}

/* Switch label (the toggle handle) */
.bootstrap-switch .bootstrap-switch-label {
    background: rgba(255, 255, 255, 0.1) !important;
    border-left: 1px solid var(--border-glass) !important;
    border-right: 1px solid var(--border-glass) !important;
}

/* Info variant */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
    background: rgba(0, 240, 255, 0.2) !important;
    color: var(--accent-cyan) !important;
    border-color: transparent !important;
}

/* Success variant */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
    border-color: transparent !important;
}

/* Warning variant */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
    border-color: transparent !important;
}

/* Danger variant */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
    background: rgba(255, 0, 85, 0.2) !important;
    color: #FF0055 !important;
    border-color: transparent !important;
}

/* ===========================================================================
   TICKET FILE UPLOAD FIX
   =========================================================================== */

/* File upload container */
#fileUploadsContainer,
.ticket-extra-attachments {
    background: transparent !important;
}

#fileUploadsContainer .ticket-attachment-row {
    margin-top: 10px;
}

/* File input styling */
.btn-file,
.fileinput-button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--text-secondary) !important;
    border-radius: 10px !important;
    transition: 0.3s !important;
}

.btn-file:hover,
.fileinput-button:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}

/* Attachment input group */
.input-group .form-control[type="file"],
input[type="file"].form-control {
    background: rgba(10, 15, 25, 0.4) !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--text-secondary) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    height: auto !important;
}

/* Input group button for remove attachment */
.input-group-btn .btn,
.input-group-append .btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--text-secondary) !important;
}

.input-group-btn .btn:hover,
.input-group-append .btn:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

/* View ticket attachment list */
.view-ticket .attachments {
    border-top: 1px dashed var(--border-glass) !important;
}

.view-ticket .attachment-list li span {
    border: 1px solid var(--border-glass) !important;
    background: transparent !important;
}

.view-ticket .attachment-list li figure {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--accent-cyan) !important;
}

/* ===========================================================================
   HEADER BADGE FIX (notification count cut off)
   =========================================================================== */

.btn-notifications .badge-glow,
.btn-notifications .badge {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    line-height: 14px !important;
    border-radius: 50% !important;
    text-align: center !important;
    z-index: 1 !important;
}

/* Make notification button overflow visible */
.btn-notifications {
    overflow: visible !important;
}

/* ===========================================================================
   ADDITIONAL MISC FIXES
   =========================================================================== */

/* Assisted CC input (payment methods page) */
.assisted-cc-input-feedback {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

/* Invoice summary total row */
.invoice-summary-table td.total-row {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #fff !important;
}

/* Store domain tab content */
.store-order-container .store-domain-tab-content {
    border: 1px solid var(--border-glass) !important;
    border-top: 0 !important;
    background: rgba(10, 15, 25, 0.4) !important;
    color: #cbd5e1 !important;
}

/* WP Toolkit cart items (if used) */
.wp-toolkit .cart-items .item:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02) !important;
}

.wp-toolkit .cart-totals {
    color: #fff !important;
}

/* ===========================================================================
   DOMAIN SEARCH BOX - Kill white background
   =========================================================================== */

.home-domain-search {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    margin-top: 40px;
}

.home-domain-search h2 {
    color: #fff !important;
}

.home-domain-search .input-group-wrapper {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
}

.home-domain-search .input-group-wrapper .form-control {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
}

.home-domain-search .input-group-wrapper .form-control::placeholder {
    color: var(--text-secondary) !important;
}

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

.home-domain-search .btn-link {
    color: var(--accent-cyan) !important;
}

/* ===========================================================================
   DOMAIN PROMO BOX - Kill white (#f9f9f9) background
   =========================================================================== */

.domain-promo-box {
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 16px !important;
    color: #cbd5e1 !important;
}

.domain-promo-box h3 {
    color: #fff !important;
}

.domain-promo-box p {
    color: #cbd5e1 !important;
}

.domain-promo-box .small {
    color: var(--text-secondary) !important;
}

.domain-promo-box i {
    color: var(--accent-cyan) !important;
}

/* ===========================================================================
   MOBILE MENU TOGGLE - Force hide on desktop (xl+)
   =========================================================================== */

@media (min-width: 1200px) {
    .header-actions .d-xl-none {
        display: none !important;
    }
}

/* ===========================================================================
   CART QUANTITY INPUT - Fix number input arrows hiding value
   =========================================================================== */

#order-standard_cart .view-cart-items .item-qty input {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    border-radius: 8px !important;
    text-align: center !important;
    width: 60px !important;
    height: 36px !important;
    padding: 4px 4px !important;
    margin-bottom: 8px !important;
    -moz-appearance: textfield;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Hide spinner arrows so they don't cover the number */
#order-standard_cart .view-cart-items .item-qty input[type="number"]::-webkit-outer-spin-button,
#order-standard_cart .view-cart-items .item-qty input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Update button in cart */
#order-standard_cart .view-cart-items .item-qty button,
#order-standard_cart .view-cart-items .item-qty .btn {
    background: rgba(0, 240, 255, 0.1) !important;
    border: 1px solid var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    transition: 0.3s !important;
}

#order-standard_cart .view-cart-items .item-qty button:hover,
#order-standard_cart .view-cart-items .item-qty .btn:hover {
    background: var(--accent-gradient) !important;
    color: #000 !important;
    border-color: transparent !important;
}

/* Config option qty input */
#order-standard_cart .form-control-qty {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 8px !important;
    width: 80px !important;
    -moz-appearance: textfield;
}

#order-standard_cart .form-control-qty::-webkit-outer-spin-button,
#order-standard_cart .form-control-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===========================================================================
   PAYPAL PAYMENT FORM - Dark container
   PayPal injects its own iframe which cannot be restyled, but we can
   style the surrounding container
   =========================================================================== */

.paypal_ppcpv-payment-form,
[class*="paypal"] .payment-form,
.gateway-form,
.payment-form-container,
#paymentGatewayInputs,
.cc-payment-form {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    color: #cbd5e1 !important;
}

/* PayPal smart buttons wrapper - make transparent */
.paypal-buttons-context-iframe,
[class*="paypal-button"],
.paypal-checkout,
.express-checkout-buttons {
    border-radius: 12px !important;
    overflow: hidden;
}

/* Control label in payment form */
.cc-payment-form .control-label,
.payment-form-container label {
    color: var(--text-secondary) !important;
}

/* PayPal PPCPV - selected payment method highlight (was #f1f1f1 white) */
.paypal_ppcpv-payment-form .selected {
    background-color: rgba(0, 240, 255, 0.08) !important;
    border-color: rgba(0, 240, 255, 0.3) !important;
}

/* PayPal PPCPV - credit card input fields container (was #fff) */
#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields,
#frmPayment.paypal_ppcpv-payment-form #creditCardInputFields {
    background-color: rgba(10, 15, 25, 0.6) !important;
    color: #cbd5e1 !important;
    border-radius: 8px !important;
}

/* PayPal PPCPV - payment method list borders (was #d9d9d9) */
#frmPayment.paypal_ppcpv-payment-form .paymethod-info:not([data-paymethod-id]),
#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields ul,
#frmPayment.paypal_ppcpv-payment-form .paymethod-info[data-paymethod-id],
#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields .paymethod-info {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

/* PayPal PPCPV - nth-child border overrides */
#frmPayment.paypal_ppcpv-payment-form .paymethod-info[data-paymethod-id]:nth-child(5n+1),
#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields .paymethod-info:nth-child(5n+1) {
    border-left-color: rgba(255, 255, 255, 0.1) !important;
}

#frmPayment.paypal_ppcpv-payment-form .paymethod-info[data-paymethod-id]:nth-child(5n+4),
#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields .paymethod-info:nth-child(5n+4) {
    border-right-color: rgba(255, 255, 255, 0.1) !important;
}

/* PayPal PPCPV - payer email text (was #666) */
.paypal_ppcpv-payment-form .payer-email,
#frmCheckout.paypal_ppcpv-payment-form .payer-email {
    color: #94A3B8 !important;
}

/* PayPal PPCPV - all text and labels */
.paypal_ppcpv-payment-form label,
.paypal_ppcpv-payment-form .paymethod-info,
.paypal_ppcpv-payment-form .payer-label,
.paypal_ppcpv-payment-form .radio-inline {
    color: #e2e8f0 !important;
}

/* PayPal PPCPV - approval instructions */
.paypal_ppcpv-payment-form .approval-instructions {
    color: var(--accent-cyan) !important;
}

/* PayPal button container */
#paypal_ppcpv_input_container,
#paypal_ppcpv_input_container_button {
    background: transparent !important;
}

/* ===========================================================================
   KNOWLEDGEBASE ICONS - via CSS (backup for any we missed in .tpl)
   =========================================================================== */

.kb-article-item .fal.fa-file-alt,
.kb-article-item .far.fa-file-alt,
.kb-article-item .fas.fa-file-alt,
i.fa-file-alt.text-black-50 {
    color: var(--accent-cyan) !important;
}

/* Override text-black-50 globally for dark theme */
.text-black-50 {
    color: var(--text-secondary) !important;
}

/* ===========================================================================
   ADDITIONAL GLOBAL TEXT FIXES
   =========================================================================== */

/* Ensure all text within order forms is readable */
#order-standard_cart {
    color: #cbd5e1 !important;
}

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
#order-standard_cart h5 {
    color: #fff !important;
}

/* Domain checker on order form page */
#order-standard_cart .domain-checker-result-headline {
    color: #fff !important;
}

#order-standard_cart .domain-checker-available {
    color: #10b981 !important;
}

#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid {
    color: #ef4444 !important;
}

/* ===========================================================================
   CREDIT CARD INPUT - Refined glass style (not pure black)
   =========================================================================== */

/* The CC container itself - lighter glass look */
#order-standard_cart .cc-input-container {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* CC form inputs - lighter than default to stand out from container */
#order-standard_cart .cc-input-container .form-control,
#order-standard_cart .cc-input-container .field,
#order-standard_cart .cc-input-container input,
#order-standard_cart .cc-input-container select,
.cc-payment-form .form-control,
.cc-payment-form .field,
.cc-payment-form input[type="tel"],
.cc-payment-form input[type="text"],
.cc-payment-form select,
#inputCardNumber,
#inputCardExpiry,
#inputCardCvv,
#inputCardName,
.cc-number-field {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    height: 44px !important;
    transition: all 0.3s ease !important;
}

#order-standard_cart .cc-input-container .form-control:focus,
#order-standard_cart .cc-input-container input:focus,
.cc-payment-form .form-control:focus,
.cc-payment-form input:focus,
#inputCardNumber:focus,
#inputCardExpiry:focus,
#inputCardCvv:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.15) !important;
}

/* CC input placeholders */
#order-standard_cart .cc-input-container .form-control::placeholder,
.cc-payment-form .form-control::placeholder,
#inputCardNumber::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* CC icon inside input */
#order-standard_cart .cc-input-container .prepend-icon .field-icon i,
.cc-payment-form .fa-credit-card {
    color: var(--accent-cyan) !important;
    opacity: 0.7;
}

/* Existing card list items */
#order-standard_cart .cc-input-container .paymethod-info {
    color: #cbd5e1 !important;
}

#order-standard_cart .cc-input-container .existing-cc-grid {
    color: #cbd5e1 !important;
}

/* Card type icons */
#order-standard_cart .cc-input-container i.fab,
#order-standard_cart .cc-input-container i.fa-cc-visa,
#order-standard_cart .cc-input-container i.fa-cc-mastercard,
#order-standard_cart .cc-input-container i.fa-cc-amex {
    color: var(--text-secondary) !important;
    font-size: 1.4em;
}

/* New card container sections */
.new-card-container label,
#order-standard_cart .new-card-container label {
    color: var(--text-secondary) !important;
}

/* Assisted CC input iframe container */
.assisted-cc-input,
#creditCardInputForm,
#remoteCardProcess,
[id*="card-form"],
[id*="cardForm"] {
    background: transparent !important;
    border: none !important;
}

/* Payment method selection labels */
#order-standard_cart .cc-input-container .radio-inline,
#order-standard_cart .cc-input-container label {
    color: #cbd5e1 !important;
}

/* Security lock message */
#order-standard_cart .checkout-security-msg i {
    color: var(--accent-cyan) !important;
}

/* ===========================================================================
   INPUT ICON POSITION FIX (registration & checkout fields)
   The icons float too high because our border-radius increases height
   =========================================================================== */

/* Fix field-icon positioning for both registration and order forms */
#registration .prepend-icon .field-icon:not([for="inputPhone"]),
#order-standard_cart .prepend-icon .field-icon:not([for="inputPhone"]) {
    top: 0 !important;
    height: 44px !important;
    line-height: 44px !important;
    width: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: 4 !important;
}

/* Phone icon must stay hidden when intl-tel-input is active */
#registration .prepend-icon .field-icon[for="inputPhone"],
#order-standard_cart .prepend-icon .field-icon[for="inputPhone"] {
    display: none !important;
}

#registration .prepend-icon .field-icon i,
#order-standard_cart .prepend-icon .field-icon i {
    position: static !important;
    color: var(--accent-cyan) !important;
    opacity: 0.6 !important;
    font-size: 14px !important;
}

#registration .prepend-icon .field:not([type="tel"]),
#registration .prepend-icon .form-control:not([type="tel"]),
#order-standard_cart .prepend-icon .field:not([type="tel"]),
#order-standard_cart .prepend-icon .form-control:not([type="tel"]) {
    padding-left: 40px !important;
    height: 44px !important;
}
/* Tel inputs inside prepend-icon - no layout overrides, let ITI handle it */

/* Also fix the Remax .field-icon override (line ~887) */
.field-icon:not([for="inputPhone"]) {
    top: 0 !important;
    left: 0 !important;
    height: 44px !important;
    line-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
}

/* ===========================================================================
   CC INPUT: Fix black text, red validation, card name text cut, pencil icon
   =========================================================================== */

/* Force white text on CC number/expiry/cvv inputs */
#inputCardNumber,
#inputCardExpiry,
#inputCardCVV,
#inputCardStart,
#inputCardIssue,
#inputDescription {
    color: #fff !important;
    font-size: 13px !important;
}

/* Fix validation error colors - softer red glow instead of ugly red */
#order-standard_cart .cc-input-container .field.error,
#order-standard_cart .cc-input-container .form-control.error,
#order-standard_cart .cc-input-container input.error,
.cc-number-field.error,
.field.error,
.form-control.error,
input.error {
    border-color: rgba(255, 0, 85, 0.5) !important;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.15) !important;
    color: #fff !important;
    background: rgba(255, 0, 85, 0.05) !important;
}

/* Error message text */
.field-error-msg {
    color: #FF0055 !important;
    font-size: 11px !important;
    margin-top: 4px;
}

/* "Enter a name for this card (Optional)" - fix text cutoff & pencil icon */
#inputDescriptionContainer {
    position: relative;
}

#inputDescription {
    font-size: 12px !important;
    padding-left: 36px !important;
    padding-right: 12px !important;
    text-overflow: ellipsis !important;
    height: 40px !important;
}

#inputDescriptionContainer .field-icon {
    width: 36px !important;
    height: 40px !important;
    line-height: 40px !important;
}

#inputDescriptionContainer .field-icon .fa-pencil,
#inputDescriptionContainer .field-icon .fa-pencil-alt {
    font-size: 12px !important;
    color: var(--accent-cyan) !important;
    opacity: 0.5 !important;
}

/* ===========================================================================
   ALREADY REGISTERED BUTTON - More spacing from form
   =========================================================================== */

.already-registered {
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

.already-registered p {
    color: #cbd5e1 !important;
}

#btnAlreadyRegistered {
    background: rgba(0, 240, 255, 0.1) !important;
    border: 1px solid var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
    border-radius: 10px !important;
}

#btnAlreadyRegistered:hover {
    background: rgba(0, 240, 255, 0.2) !important;
}

#btnNewUserSignup {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #f59e0b !important;
    border-radius: 10px !important;
}

#btnNewUserSignup:hover {
    background: rgba(245, 158, 11, 0.2) !important;
}

/* ===========================================================================
   DOMAIN REGISTER PAGE (in cart) - Kill white/yellow backgrounds
   =========================================================================== */

.domain-checker-container {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
}

.domain-checker-bg {
    background-image: none !important;
    background-color: transparent !important;
}

.domain-checker-container .input-group-box {
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.domain-checker-container .input-group-box .form-control {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
}

.domain-checker-container .input-group-box .form-control::placeholder {
    color: var(--text-secondary) !important;
}

.domain-checker-container .input-group-box .form-control:focus {
    box-shadow: none !important;
}

/* Header lined (section titles in cart) */
.header-lined {
    border-bottom: 1px solid var(--border-glass) !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
}

.header-lined h1 {
    color: #fff !important;
}

/* ===========================================================================
   TOOLTIP FIX - Prevent float-to-top-right animation glitch
   =========================================================================== */

/* Disable tooltip transition/animation to prevent the fly-in from corner */
.tooltip {
    transition: none !important;
    animation: none !important;
}

.tooltip.fade {
    transition: opacity 0.15s linear !important;
}

.tooltip.show {
    opacity: 1 !important;
}

.tooltip-inner {
    background: rgba(10, 15, 25, 0.95) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    max-width: 250px !important;
    color: #fff !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
}

.tooltip .arrow::before {
    border-bottom-color: rgba(10, 15, 25, 0.95) !important;
    border-top-color: rgba(10, 15, 25, 0.95) !important;
}

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: rgba(10, 15, 25, 0.95) !important;
}

.bs-tooltip-top .arrow::before {
    border-top-color: rgba(10, 15, 25, 0.95) !important;
}

.bs-tooltip-left .arrow::before {
    border-left-color: rgba(10, 15, 25, 0.95) !important;
}

.bs-tooltip-right .arrow::before {
    border-right-color: rgba(10, 15, 25, 0.95) !important;
}

/* Fix sidebar hover padding-left causing tooltip repositioning */
.sidebar .list-group-item:hover {
    padding-left: 25px !important;
}

/* Truncated sidebar text */
.sidebar .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   PHONE INPUT FIX - Flexbox approach
   Instead of fighting the absolute-positioned flag-container,
   we turn .intl-tel-input into a flex row so the flag selector
   sits NEXT TO the input, not on top of it.
   ============================================================ */

/* Hide the phone fa-icon when intl-tel-input is active */
label[for="inputPhone"].field-icon {
    display: none !important;
}
.prepend-icon:has(.intl-tel-input) > .field-icon {
    display: none !important;
}

/* --- Core: make intl-tel-input a flex row --- */
.intl-tel-input,
.intl-tel-input.allow-dropdown,
.intl-tel-input.separate-dial-code {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

/* Flag container: no longer absolute, sits as a flex child on the left */
.intl-tel-input .flag-container {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Selected flag button - the clickable flag+dialcode area */
.intl-tel-input .selected-flag {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 10px !important;
    width: auto !important;
    height: auto !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: none !important;
    border-radius: 12px 0 0 12px !important;
    cursor: pointer !important;
    outline: none !important;
}

.intl-tel-input .selected-flag:hover,
.intl-tel-input .selected-flag:focus {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Flag icon positioning - undo absolute */
.intl-tel-input .selected-flag .iti-flag {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    bottom: auto !important;
}

/* Dial code text */
.intl-tel-input .selected-dial-code {
    color: var(--accent-cyan) !important;
    font-size: 13px !important;
    padding-left: 0 !important;
    display: inline !important;
}

/* Dropdown arrow */
.intl-tel-input .iti-arrow {
    position: static !important;
    margin-left: 4px !important;
    margin-top: 0 !important;
    top: auto !important;
    border-top-color: rgba(255, 255, 255, 0.5) !important;
}

.intl-tel-input .iti-arrow.up {
    border-bottom-color: rgba(255, 255, 255, 0.5) !important;
    border-top: none !important;
}

/* The phone input itself - takes remaining space */
.intl-tel-input input[type="tel"],
.intl-tel-input input[type="tel"].field,
.intl-tel-input input[type="tel"].form-control {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    background: rgba(10, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 0 12px 12px 0 !important;
    height: auto !important;
    margin: 0 !important;
    z-index: auto !important;
    position: relative !important;
}

.intl-tel-input input[type="tel"]:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2) !important;
    background: rgba(10, 15, 25, 0.9) !important;
}

/* Allow country dropdown to overflow parent cards */
.card {
    overflow: visible !important;
}
.card-body {
    overflow: visible !important;
}

/* z-index stacking for dropdown */
.form-group:has(.intl-tel-input),
.form-group.has-intl-tel-input {
    position: relative;
    z-index: 20;
}
#personalInformation {
    position: relative;
    z-index: 20;
}
#registration .card:first-of-type {
    position: relative;
    z-index: 10;
}
#order-standard_cart .personal-details {
    position: relative;
    z-index: 10;
}

/* Country list dropdown - dark theme */
.intl-tel-input .country-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: #0F172A !important;
    border: 1px solid var(--border-glass) !important;
    color: #fff !important;
    z-index: 99999 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-cyan) #0F172A;
    border-radius: 8px !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    white-space: normal !important;
    margin-top: 4px !important;
    width: 300px !important;
}

.intl-tel-input .country-list .country {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 10px !important;
}

.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
    background-color: rgba(0, 102, 255, 0.3) !important;
    color: #fff !important;
}

.intl-tel-input .country-list .country.active {
    background-color: rgba(0, 240, 255, 0.1) !important;
}

.intl-tel-input .country-list .country-name {
    color: #cbd5e1 !important;
}

.intl-tel-input .country-list .dial-code {
    color: #94A3B8 !important;
}

.intl-tel-input .country-list .divider {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.intl-tel-input .country-list .flag-box {
    margin-right: 8px !important;
}

/* Checkout-specific phone input fix */
#order-standard_cart label[for="inputPhone"].field-icon {
    display: none !important;
}

/* Non-ITI tel inputs */
input[type="tel"] {
    padding-left: 15px !important;
}
.prepend-icon > input[type="tel"] {
    padding-left: 45px !important;
}


/* ============================================================
   iCHECK DARK THEME - Custom checkboxes & radio buttons
   ============================================================ */
/* Override the sprite-based iCheck with pure CSS dark theme */
.icheckbox_square-blue,
.iradio_square-blue {
    background: none !important;
    background-image: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.iradio_square-blue {
    border-radius: 50% !important;
}

/* Hover state */
.icheckbox_square-blue.hover,
.iradio_square-blue.hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
    background: none !important;
    background-image: none !important;
}

/* Checked state */
.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
    border-color: var(--accent-cyan) !important;
    background: var(--accent-cyan) !important;
    background-image: none !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important;
}

/* Checkmark for checked checkbox */
.icheckbox_square-blue.checked::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 6px !important;
    height: 12px !important;
    border: solid #05050A !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    display: block !important;
}

/* Dot for checked radio */
.iradio_square-blue.checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 4px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #05050A !important;
    display: block !important;
}

/* Disabled state */
.icheckbox_square-blue.disabled,
.iradio_square-blue.disabled {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    background-image: none !important;
    cursor: default !important;
    opacity: 0.5 !important;
}

.icheckbox_square-blue.checked.disabled,
.iradio_square-blue.checked.disabled {
    background: rgba(0, 240, 255, 0.3) !important;
    background-image: none !important;
    border-color: rgba(0, 240, 255, 0.3) !important;
}

/* iCheck helper layer - make transparent */
.icheckbox_square-blue ins.iCheck-helper,
.iradio_square-blue ins.iCheck-helper {
    background: transparent !important;
}

/* iCheck labels text color */
.icheck-button + label,
div[class*="icheckbox"] + label,
div[class*="iradio"] + label {
    color: #cbd5e1 !important;
}

/* HiDPI override - prevent sprite from showing */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (min-resolution: 1.25dppx) {
    .icheckbox_square-blue,
    .iradio_square-blue {
        background-image: none !important;
    }
}

/* Payment method selection with iCheck */
.payment-methods .iradio_square-blue {
    margin-right: 8px !important;
    vertical-align: middle !important;
}

.payment-methods label {
    color: #e2e8f0 !important;
    cursor: pointer !important;
}

/* Gateway selection radio buttons */
.gateway-option .iradio_square-blue.checked {
    border-color: var(--accent-cyan) !important;
    background: var(--accent-cyan) !important;
}


/* ============================================================
   STRIPE ELEMENTS - Dark theme via CSS targeting
   ============================================================ */
/* Style the Stripe Elements container divs */
#stripeElements,
#stripeElements .form-group {
    background: transparent !important;
}

#stripeElements .row {
    margin-bottom: 10px;
}

/* Stripe Element mount point containers */
#stripeCreditCard,
#stripeExpiryDate,
#stripeCvc,
#elementCardNumber,
#elementCardExpiry,
#elementCardCvc {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    transition: border-color 0.3s ease !important;
}

#stripeCreditCard:hover,
#stripeExpiryDate:hover,
#stripeCvc:hover,
#elementCardNumber:hover,
#elementCardExpiry:hover,
#elementCardCvc:hover {
    border-color: rgba(0, 240, 255, 0.3) !important;
}

/* Stripe Elements labels */
#stripeElements label {
    color: #94A3B8 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

/* Payment request button container */
#paymentRequestButton {
    margin-bottom: 15px;
}