/* ============================================
   WEBFORT WHMCS CUSTOM THEME
   Pixel-perfect match to WebFort website
   ============================================ */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --midnight: #0a0f1c;
    --midnight-light: #1a1f3c;
    --lime: #c8ff00;
    --brand-blue: #2563eb;
    --brand-light-blue: #60a5fa;
    --coral: #ff6b6b;
    --emerald: #10b981;

    --white-100: #ffffff;
    --white-80: rgba(255, 255, 255, 0.8);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-15: rgba(255, 255, 255, 0.15);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-03: rgba(255, 255, 255, 0.03);
}

/* ============================================
   FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

body, html {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-blue) var(--midnight);
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--midnight); }
::-webkit-scrollbar-thumb { background: var(--brand-blue); border-radius: 4px; }

/* ============================================
   BASE BODY & BACKGROUND
   ============================================ */
body.primary-bg-color {
    background: linear-gradient(135deg, #0a0f1c 0%, #1a1f3c 50%, #0a0f1c 100%) !important;
    background-attachment: fixed !important;
    color: var(--white-100);
    min-height: 100vh;
    position: relative;
}

/* Animated gradient background */
body.primary-bg-color::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(200, 255, 0, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(59, 130, 246, 0.3) 0%, transparent 50%);
    animation: gradientMove 15s ease-in-out infinite;
    pointer-events: none;
    z-index: -2;
}

@keyframes gradientMove {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(5deg); }
    66% { transform: translate(-20px, 20px) rotate(-5deg); }
}

/* Floating orb */
body.primary-bg-color::after {
    content: '';
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.4);
    filter: blur(80px);
    top: 10%;
    left: 10%;
    animation: orbFloat 8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, -50px) scale(1.1); }
}

/* ============================================
   TOPBAR (LOGGED IN)
   ============================================ */
.wf-topbar {
    background: rgba(10, 15, 28, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--white-10);
    padding: 8px 0;
}

.wf-topbar-btn {
    background: var(--white-05);
    border: 1px solid var(--white-10);
    border-radius: 8px;
    color: var(--white-60);
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.wf-topbar-btn:hover {
    background: var(--white-10);
    color: var(--lime);
    border-color: var(--lime);
}

.wf-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--lime);
    color: var(--midnight);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
}

.wf-topbar-text {
    color: var(--white-50);
    font-size: 13px;
    margin-right: 8px;
}

.wf-topbar-user {
    background: var(--white-05);
    border: 1px solid var(--white-10);
    border-radius: 8px;
    color: var(--white-80);
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.wf-topbar-user:hover {
    background: var(--white-10);
    color: var(--lime);
    text-decoration: none;
}

/* ============================================
   MAIN NAVIGATION - WEBFORT STYLE
   ============================================ */
.wf-nav {
    padding: 16px 0;
    position: relative;
    z-index: 2000;
}

.wf-navbar {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--white-10);
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.wf-logo {
    display: flex;
    align-items: center;
}

.wf-logo img {
    height: 32px;
}

@media (min-width: 992px) {
    .wf-logo img {
        height: 40px;
    }
}

/* Center Navigation */
.wf-nav-center {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wf-nav-link {
    position: relative;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--white-100);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(200, 255, 0, 0.15), rgba(96, 165, 250, 0.15));
    border-radius: 12px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wf-nav-link:hover {
    color: var(--lime);
    transform: translateY(-2px);
    text-decoration: none;
}

.wf-nav-link:hover::before {
    opacity: 1;
    transform: scale(1);
}

.wf-nav-lime {
    color: var(--lime) !important;
}

/* Dropdown */
.wf-dropdown {
    position: relative;
}

.wf-dropdown-toggle svg {
    transition: transform 0.3s ease;
}

.wf-dropdown:hover .wf-dropdown-toggle svg {
    transform: rotate(180deg);
}

.wf-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 240px;
    padding: 12px;
    background: rgba(10, 15, 28, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(200, 255, 0, 0.2);
    border-radius: 16px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(200, 255, 0, 0.1);
    z-index: 3000;
}

.wf-dropdown:hover .wf-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.wf-dropdown-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: var(--white-100);
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.wf-dropdown-item:hover {
    background: linear-gradient(135deg, rgba(200, 255, 0, 0.15), rgba(96, 165, 250, 0.1));
    color: var(--lime);
    transform: translateX(4px);
    text-decoration: none;
}

.wf-dropdown-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(200, 255, 0, 0.1));
    border-radius: 10px;
    transition: all 0.2s ease;
}

.wf-dropdown-icon i {
    color: var(--brand-light-blue);
    font-size: 16px;
}

.wf-dropdown-item:hover .wf-dropdown-icon {
    background: linear-gradient(135deg, rgba(200, 255, 0, 0.3), rgba(96, 165, 250, 0.2));
}

.wf-dropdown-item:hover .wf-dropdown-icon i {
    color: var(--lime);
}

/* Right Side Navigation */
.wf-nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wf-cart-btn {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-05);
    border: 1px solid var(--white-10);
    border-radius: 12px;
    color: var(--white-70);
    font-size: 18px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.wf-cart-btn:hover {
    background: var(--white-10);
    border-color: var(--lime);
    color: var(--lime);
    text-decoration: none;
}

.wf-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--lime);
    color: var(--midnight);
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.wf-login-link {
    color: var(--white-70);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.wf-login-link:hover {
    color: var(--white-100);
    text-decoration: none;
}

.wf-cta-btn {
    background: var(--lime);
    color: var(--midnight);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.wf-cta-btn:hover {
    box-shadow: 0 0 30px rgba(200, 255, 0, 0.5);
    transform: scale(1.05);
    color: var(--midnight);
    text-decoration: none;
}

/* Mobile Menu Toggle */
.wf-mobile-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--white-05);
    border: 1px solid var(--white-10);
    border-radius: 10px;
    cursor: pointer;
}

.wf-mobile-toggle span {
    width: 20px;
    height: 2px;
    background: var(--white-80);
    transition: all 0.3s ease;
}

.wf-mobile-toggle:hover span {
    background: var(--lime);
}

/* Mobile Menu */
.wf-mobile-menu {
    background: rgba(10, 15, 28, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--white-10);
}

.wf-mobile-nav {
    padding: 20px 0;
}

.wf-mobile-link {
    display: block;
    padding: 14px 0;
    color: var(--white-80);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--white-10);
    transition: all 0.2s ease;
}

.wf-mobile-link:hover {
    color: var(--lime);
    padding-left: 10px;
    text-decoration: none;
}

.wf-mobile-link.wf-nav-lime {
    color: var(--lime);
}

.wf-mobile-divider {
    height: 1px;
    background: var(--white-20);
    margin: 16px 0;
}

/* ============================================
   WHMCS CLIENT NAVIGATION
   ============================================ */
.wf-client-nav {
    padding: 12px 0;
    position: relative;
    z-index: 1000;
}

.wf-client-navbar {
    background: rgba(10, 15, 28, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--white-10);
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.wf-client-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    flex-wrap: wrap;
}

.wf-client-menu-right {
    margin-left: auto;
}

/* Style the WHMCS navbar items */
.wf-client-menu .nav-item {
    list-style: none;
    position: relative;
}

.wf-client-menu .nav-link {
    color: var(--white-70) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wf-client-menu .nav-link:hover {
    color: var(--lime) !important;
    background: var(--white-05);
}

.wf-client-menu .nav-link.active,
.wf-client-menu .nav-item.active .nav-link {
    color: var(--lime) !important;
    background: rgba(200, 255, 0, 0.1);
}

/* WHMCS Dropdown Menus - Critical z-index and styling */
.wf-client-menu .dropdown-menu,
.wf-client-nav .dropdown-menu,
.navbar-nav .dropdown-menu,
.dropdown-menu {
    background: rgba(10, 15, 28, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(200, 255, 0, 0.2) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 20px rgba(200, 255, 0, 0.1) !important;
    z-index: 9999 !important;
    position: absolute !important;
}

.wf-client-menu .dropdown-item,
.wf-client-nav .dropdown-item,
.navbar-nav .dropdown-item,
.dropdown-item {
    color: var(--white-80) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 14px !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: transparent !important;
}

.wf-client-menu .dropdown-item:hover,
.wf-client-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:hover,
.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(200, 255, 0, 0.1) !important;
    color: var(--lime) !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.wf-breadcrumb {
    padding: 16px 0;
}

.wf-breadcrumb .breadcrumb {
    background: var(--white-03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--white-10);
    border-radius: 10px;
    padding: 12px 20px !important;
    margin: 0;
}

.wf-breadcrumb .breadcrumb-item,
.wf-breadcrumb .breadcrumb-item a {
    color: var(--white-50) !important;
    font-size: 13px;
}

.wf-breadcrumb .breadcrumb-item a:hover {
    color: var(--lime) !important;
    text-decoration: none;
}

.wf-breadcrumb .breadcrumb-item.active {
    color: var(--white-80) !important;
}

.wf-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--white-30) !important;
}

/* ============================================
   CARDS & PANELS - GLASS EFFECT
   ============================================ */
.card,
.panel,
.panel-default,
.well {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--white-10) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease;
}

.card:hover,
.panel:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(200, 255, 0, 0.2) !important;
}

.card-header,
.panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--white-10) !important;
    color: var(--white-100) !important;
    font-weight: 600;
    padding: 16px 20px !important;
}

.card-body,
.panel-body {
    background: transparent !important;
    color: var(--white-80);
    padding: 20px !important;
}

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

/* ============================================
   CLIENT AREA STATS PANELS
   ============================================ */
[class*="panel-accent"],
.panel-accent-services,
.panel-accent-domains,
.panel-accent-tickets,
.panel-accent-invoices {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 16px !important;
}

[class*="panel-accent"] .panel-heading,
[class*="panel-accent"] .panel-body {
    background: transparent !important;
}

[class*="panel-accent"] h3,
[class*="panel-accent"] .h3 {
    color: var(--lime) !important;
    font-weight: 800;
    font-size: 48px;
}

[class*="panel-accent"] .panel-body p {
    color: var(--white-60);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

[class*="panel-accent"] i.fa,
[class*="panel-accent"] i.fas,
[class*="panel-accent"] i.far {
    color: var(--white-20) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 20px;
    transition: all 0.3s ease;
    font-size: 14px;
}

.btn-primary {
    background: var(--lime) !important;
    color: var(--midnight) !important;
    border: none !important;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--lime) !important;
    color: var(--midnight) !important;
    box-shadow: 0 0 30px rgba(200, 255, 0, 0.4) !important;
    transform: translateY(-2px);
}

.btn-success {
    background: var(--lime) !important;
    color: var(--midnight) !important;
    border: none !important;
    font-weight: 700;
}

.btn-success:hover {
    box-shadow: 0 0 30px rgba(200, 255, 0, 0.4);
}

.btn-secondary,
.btn-default {
    background: var(--white-05) !important;
    color: var(--white-80) !important;
    border: 1px solid var(--white-20) !important;
}

.btn-secondary:hover,
.btn-default:hover {
    background: var(--white-10) !important;
    color: var(--lime) !important;
    border-color: var(--lime) !important;
}

.btn-danger {
    background: var(--coral) !important;
    border: none !important;
    color: var(--white-100) !important;
}

.btn-info {
    background: var(--brand-blue) !important;
    border: none !important;
    color: var(--white-100) !important;
}

/* ============================================
   FORMS
   ============================================ */
.form-control {
    background: var(--white-05) !important;
    border: 1px solid var(--white-15) !important;
    color: var(--white-100) !important;
    border-radius: 10px !important;
    /* padding: 12px 16px; */
    transition: all 0.2s ease;
}

.form-control:focus {
    background: var(--white-08) !important;
    border-color: var(--lime) !important;
    box-shadow: 0 0 20px rgba(200, 255, 0, 0.15) !important;
    color: var(--white-100) !important;
}

.form-control::placeholder {
    color: var(--white-40) !important;
}

label,
.form-label {
    color: var(--white-80) !important;
    font-weight: 500;
    margin-bottom: 8px;
}

.input-group-text {
    background: var(--white-05) !important;
    border: 1px solid var(--white-15) !important;
    color: var(--white-60) !important;
    border-radius: 10px !important;
}

/* ============================================
   TABLES
   ============================================ */
.table {
    color: var(--white-80) !important;
}

.table thead th {
    background: var(--white-05) !important;
    border-bottom: 2px solid var(--white-10) !important;
    color: var(--white-100) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 14px 16px !important;
}

.table td,
.table th {
    border-top: 1px solid var(--white-10) !important;
    padding: 14px 16px !important;
    vertical-align: middle;
}

.table tbody tr {
    background: transparent !important;
    transition: all 0.2s ease;
}

.table tbody tr:hover {
    background: var(--white-05) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--white-03) !important;
}

/* ============================================
   BADGES & LABELS
   ============================================ */
.badge,
.label {
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge-success,
.label-success,
.badge-active,
.label-active {
    background: var(--lime) !important;
    color: var(--midnight) !important;
}

.badge-primary,
.label-primary,
.badge-info,
.label-info {
    background: var(--brand-blue) !important;
    color: var(--white-100) !important;
}

.badge-danger,
.label-danger {
    background: var(--coral) !important;
    color: var(--white-100) !important;
}

.badge-warning,
.label-warning,
.badge-pending,
.label-pending {
    background: #f59e0b !important;
    color: var(--midnight) !important;
}

.badge-secondary,
.label-default {
    background: var(--white-20) !important;
    color: var(--white-100) !important;
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
    border-radius: 12px !important;
    border: 1px solid !important;
    padding: 16px 20px;
    backdrop-filter: blur(10px);
}

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

.alert-danger,
.alert-error {
    background: rgba(255, 107, 107, 0.1) !important;
    border-color: rgba(255, 107, 107, 0.3) !important;
    color: #fca5a5 !important;
}

.alert-warning {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fcd34d !important;
}

.alert-info {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    color: #93c5fd !important;
}

/* ============================================
   MODALS
   ============================================ */
.modal-content {
    background: linear-gradient(135deg, rgba(26, 31, 60, 0.95), rgba(10, 15, 28, 0.98)) !important;
    border: 1px solid rgba(200, 255, 0, 0.2) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(200, 255, 0, 0.1) !important;
}

.modal-header {
    border-bottom: 1px solid var(--white-10) !important;
    padding: 20px 24px;
}

.modal-title {
    color: var(--white-100) !important;
    font-weight: 700;
}

.modal-body {
    color: var(--white-80);
    padding: 24px;
}

.modal-footer {
    border-top: 1px solid var(--white-10) !important;
    padding: 16px 24px;
}

.close {
    color: var(--white-60) !important;
    opacity: 1;
    text-shadow: none;
}

.close:hover {
    color: var(--lime) !important;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar .card,
.sidebar .panel,
.sidebar .list-group {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 0 !important;
    overflow: hidden;
}

.sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--white-10) !important;
    color: var(--white-60) !important;
    padding: 14px 18px;
    transition: all 0.2s ease;
}

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

.sidebar .list-group-item:hover {
    background: var(--white-05) !important;
    color: var(--lime) !important;
    padding-left: 22px;
}

.sidebar .list-group-item.active {
    background: rgba(200, 255, 0, 0.1) !important;
    color: var(--lime) !important;
    border-left: 3px solid var(--lime) !important;
}

.sidebar .list-group-item i {
    color: var(--white-40);
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.sidebar .list-group-item:hover i,
.sidebar .list-group-item.active i {
    color: var(--lime);
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
    gap: 6px;
}

.page-link {
    background: var(--white-05) !important;
    border: 1px solid var(--white-10) !important;
    color: var(--white-60) !important;
    border-radius: 8px !important;
    padding: 10px 16px;
    transition: all 0.2s ease;
}

.page-link:hover {
    background: var(--white-10) !important;
    color: var(--lime) !important;
    border-color: var(--lime) !important;
}

.page-item.active .page-link {
    background: var(--lime) !important;
    border-color: var(--lime) !important;
    color: var(--midnight) !important;
}

/* ============================================
   FOOTER
   ============================================ */
#footer.footer {
    background: transparent !important;
    border-top: 1px solid var(--white-10) !important;
    padding: 4rem 0 !important;
    margin-top: 4rem;
}

#footer a {
    color: var(--white-50) !important;
    transition: color 0.2s ease;
}

#footer a:hover {
    color: var(--lime) !important;
    text-decoration: none;
}

#footer h6 {
    color: var(--white-100) !important;
}

#footer p {
    color: var(--white-50) !important;
}

/* ============================================
   TYPOGRAPHY & COLORS
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--white-100);
}

p {
    color: var(--white-60);
}

a {
    color: var(--lime);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--brand-light-blue);
    text-decoration: none;
}

.text-primary { color: var(--lime) !important; }
.text-secondary { color: var(--white-60) !important; }
.text-muted { color: var(--white-40) !important; }
.text-dark { color: var(--white-100) !important; }

/* Override white backgrounds */
.bg-white,
.bg-light {
    background: var(--white-03) !important;
}

/* ============================================
   POPOVERS & TOOLTIPS
   ============================================ */
.popover {
    background: rgba(10, 15, 28, 0.98) !important;
    border: 1px solid var(--white-20) !important;
    border-radius: 12px !important;
}

.popover-header {
    background: var(--white-05) !important;
    border-bottom: 1px solid var(--white-10) !important;
    color: var(--white-100) !important;
}

.popover-body {
    color: var(--white-80);
}

.tooltip-inner {
    background: rgba(10, 15, 28, 0.95) !important;
    border: 1px solid var(--white-20);
    border-radius: 8px;
}

/* ============================================
   LOADING OVERLAY
   ============================================ */
#fullpage-overlay {
    background: rgba(10, 15, 28, 0.9) !important;
    backdrop-filter: blur(8px);
}

#fullpage-overlay .msg {
    color: var(--white-80);
}

/* ============================================
   HIDE OLD ELEMENTS
   ============================================ */
.header,
.topbar:not(.wf-topbar),
.navbar:not(.wf-navbar):not(.wf-client-navbar),
.main-navbar-wrapper,
.master-breadcrumb:not(.wf-breadcrumb) {
    display: none !important;
}

/* Show our new elements */
.wf-topbar,
.wf-nav,
.wf-client-nav,
.wf-breadcrumb {
    display: block !important;
}

/* ============================================
   CLIENT AREA HOMEPAGE - TILES (Stats Boxes)
   ============================================ */
.tiles {
    margin-bottom: 24px !important;
}

.tiles .row {
    margin: 0 -8px;
}

.tiles [class*="col-"] {
    padding: 8px;
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
    min-height: 140px;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tile:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(200, 255, 0, 0.3) !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(200, 255, 0, 0.1);
    text-decoration: none !important;
}

.tile i,
.tile i.fas,
.tile i.far,
.tile i.fa {
    font-size: 18px !important;
    color: var(--white-20) !important;
    transition: all 0.3s ease;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    opacity: 0.6;
    margin: 0 !important;
}

.tile:hover i {
    color: var(--lime) !important;
    opacity: 1;
}

.tile .stat {
    font-size: 48px;
    font-weight: 800;
    color: var(--lime) !important;
    line-height: 1;
    margin-bottom: 6px;
}

.tile .title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--white-50) !important;
}

/* Hide the colored highlight bar - not needed with our design */
.tile .highlight {
    display: none !important;
}

/* ============================================
   CLIENT AREA HOMEPAGE - CARDS
   ============================================ */
.client-home-cards .card {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 16px !important;
    margin-bottom: 24px;
    overflow: hidden;
}

.client-home-cards .card:hover {
    border-color: rgba(200, 255, 0, 0.2) !important;
}

/* Card accent colors - override with lime glow */
.card-accent-blue,
.card-accent-green,
.card-accent-red,
.card-accent-gold,
.card[class*="card-accent-"] {
    border-left: 3px solid var(--lime) !important;
}

.client-home-cards .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--white-10) !important;
    padding: 16px 20px !important;
}

.client-home-cards .card-title {
    color: var(--white-100) !important;
    font-size: 15px;
    font-weight: 600;
    margin: 0 !important;
}

.client-home-cards .card-body {
    background: transparent !important;
    padding: 20px !important;
}

.client-home-cards .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--white-10) !important;
    padding: 12px 20px !important;
}

/* Card buttons - bg-color classes */
.btn.bg-color-blue,
.btn.bg-color-green,
.btn.bg-color-red,
.btn.bg-color-gold,
.btn[class*="bg-color-"] {
    background: var(--lime) !important;
    color: var(--midnight) !important;
    border: none !important;
    font-weight: 700;
}

.btn.bg-color-blue:hover,
.btn.bg-color-green:hover,
.btn.bg-color-red:hover,
.btn.bg-color-gold:hover,
.btn[class*="bg-color-"]:hover {
    box-shadow: 0 0 20px rgba(200, 255, 0, 0.4);
}

/* List groups in cards */
.client-home-cards .list-group {
    background: transparent !important;
    border-radius: 0 !important;
}

.client-home-cards .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--white-10) !important;
    color: var(--white-70) !important;
    padding: 14px 20px !important;
    transition: all 0.2s ease;
}

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

.client-home-cards .list-group-item:hover {
    background: var(--white-05) !important;
    color: var(--lime) !important;
    padding-left: 24px !important;
}

.client-home-cards .list-group-item.active {
    background: rgba(200, 255, 0, 0.1) !important;
    color: var(--lime) !important;
}

.client-home-cards .list-group-item i {
    color: var(--white-40);
    margin-right: 10px;
    width: 20px;
    text-align: center;
    transition: color 0.2s ease;
}

.client-home-cards .list-group-item:hover i {
    color: var(--lime);
}

/* ============================================
   CLIENT AREA STATS PANELS (Fallback)
   ============================================ */
/* Target ALL possible stat panel variations */
.panel-accent-blue,
.panel-accent-green,
.panel-accent-orange,
.panel-accent-red,
.panel-accent-services,
.panel-accent-domains,
.panel-accent-tickets,
.panel-accent-invoices,
.col-sm-3 .panel,
.col-md-3 .panel,
.row .col-sm-6 .panel,
.panel.panel-default,
div[class*="col-"] .panel {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 16px !important;
}

/* Stats panel icon backgrounds */
.panel-accent-blue .panel-icon,
.panel-accent-green .panel-icon,
.panel-accent-orange .panel-icon,
.panel-accent-red .panel-icon,
[class*="panel-accent"] .panel-icon,
.panel .panel-icon {
    background: rgba(200, 255, 0, 0.1) !important;
    border-radius: 12px !important;
}

[class*="panel-accent"] .panel-icon i,
.panel .panel-icon i {
    color: var(--lime) !important;
}

/* Stats numbers */
.panel-accent-blue h3,
.panel-accent-green h3,
.panel-accent-orange h3,
.panel-accent-red h3,
[class*="panel-accent"] h3,
.panel-body h3 {
    color: var(--lime) !important;
    font-weight: 800 !important;
    font-size: 48px !important;
}

/* Active Products/Services Box */
.panel-body .products-list,
.service-list,
.products-list-item,
.product-item,
.active-products {
    background: transparent !important;
}

/* Ensure all nested elements are transparent */
.panel-body div,
.panel-body ul,
.panel-body li,
.card-body div,
.card-body ul,
.card-body li {
    background-color: transparent;
}

/* Override any inline white backgrounds */
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"] {
    background: var(--white-03) !important;
}

/* Bootstrap overrides */
.bg-white,
.bg-light,
.bg-secondary {
    background: var(--white-03) !important;
}

/* Twenty-one specific overrides */
.home-shortcuts .panel,
.home-shortcuts .panel-body,
.client-home-panels .panel,
.client-home-panels .panel-body,
#main-body .panel,
#main-body .panel-body,
#main-body .card,
#main-body .card-body {
    background: transparent !important;
}

/* Override panel headers with accent colors */
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--white-10) !important;
    color: var(--white-100) !important;
}

/* ============================================
   DROPDOWN Z-INDEX NUCLEAR FIX
   ============================================ */
/* Ensure dropdowns always appear on top */
.dropdown.show,
.dropdown.open,
.dropup.show,
.dropup.open {
    z-index: 10000 !important;
}

.dropdown-menu.show,
.dropdown-menu[style*="display: block"] {
    z-index: 99999 !important;
    display: block !important;
    background: rgba(10, 15, 28, 0.98) !important;
}

/* Make sure main body doesn't trap z-index */
#main-body {
    position: relative;
    z-index: 1;
}

/* Client nav needs to be above main body */
.wf-client-nav {
    position: relative;
    z-index: 1000 !important;
}

/* Notifications popup */
.client-alerts {
    background: rgba(10, 15, 28, 0.98) !important;
    border: 1px solid var(--white-20) !important;
    border-radius: 12px !important;
    list-style: none;
    padding: 8px !important;
    margin: 0;
}

.client-alerts li {
    padding: 10px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.client-alerts li:hover {
    background: rgba(200, 255, 0, 0.1);
}

.client-alerts li a {
    color: var(--white-80) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-alerts li a:hover {
    color: var(--lime) !important;
}

.client-alerts li.none {
    color: var(--white-50);
    text-align: center;
    font-size: 13px;
}

/* ============================================
   DATATABLES - Services/Products Tables
   ============================================ */
.dataTables_wrapper,
.dataTables_wrapper * {
    background-color: transparent !important;
}

.dataTables_wrapper .table-container,
.table-container,
div[class*="dataTables"] {
    background: transparent !important;
}

/* DataTables table */
table.dataTable,
.dataTables_wrapper table {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 12px !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

table.dataTable thead th,
.dataTables_wrapper table thead th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--white-80) !important;
    border-bottom: 1px solid var(--white-10) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 16px !important;
}

table.dataTable tbody tr,
.dataTables_wrapper table tbody tr {
    background: transparent !important;
}

table.dataTable tbody tr:hover,
.dataTables_wrapper table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

table.dataTable tbody td,
.dataTables_wrapper table tbody td {
    background: transparent !important;
    color: var(--white-80) !important;
    border-top: 1px solid var(--white-10) !important;
    padding: 14px 16px !important;
}

/* DataTables info and length */
.dataTables_info,
.dataTables_length,
.dataTables_filter {
    color: var(--white-60) !important;
}

.dataTables_length select,
.dataTables_filter input {
    background: var(--white-05) !important;
    border: 1px solid var(--white-15) !important;
    color: var(--white-100) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
}

/* DataTables pagination */
.dataTables_paginate,
.dataTables_wrapper .dataTables_paginate {
    background: transparent !important;
}

.dataTables_paginate .paginate_button,
.dataTables_wrapper .paginate_button {
    background: var(--white-05) !important;
    border: 1px solid var(--white-10) !important;
    color: var(--white-60) !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    margin: 0 2px !important;
}

.dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .paginate_button:hover {
    background: var(--white-10) !important;
    border-color: var(--lime) !important;
    color: var(--lime) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_wrapper .paginate_button.current {
    background: var(--lime) !important;
    border-color: var(--lime) !important;
    color: var(--midnight) !important;
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .paginate_button.disabled {
    background: var(--white-03) !important;
    color: var(--white-30) !important;
    cursor: not-allowed;
}

/* Table wrapper card */
.table-responsive,
.card .table-responsive,
.panel .table-responsive {
    background: transparent !important;
}

/* WHMCS specific table containers */
#tableProdList,
#tableServicesList,
#tableDomainsList,
#tableInvoicesList,
#tableTicketsList,
div[id*="table"],
div[id*="Table"] {
    background: transparent !important;
}

#tableProdList_wrapper,
#tableServicesList_wrapper,
#tableDomainsList_wrapper,
#tableInvoicesList_wrapper,
#tableTicketsList_wrapper,
div[id*="_wrapper"] {
    background: transparent !important;
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */
@media (max-width: 991px) {
    .wf-navbar {
        padding: 12px 16px;
    }

    .wf-client-navbar {
        flex-direction: column;
        gap: 8px;
    }

    .wf-client-menu {
        width: 100%;
        justify-content: center;
    }

    .wf-client-menu-right {
        margin-left: 0;
    }
}

@media (max-width: 576px) {
    .wf-nav {
        padding: 12px 0;
    }

    .wf-cta-btn {
        padding: 10px 18px;
        font-size: 13px;
    }
}

/* ============================================
   CART / STORE PRODUCT CARDS
   ============================================ */
.panel-product,
.product,
.store-product,
.product-group .panel,
.products .panel,
#order-boxes .panel,
#order-standard_cart .panel,
.order-form .panel,
.store .panel {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 16px !important;
    overflow: hidden;
}

.panel-product:hover,
.product:hover,
.store-product:hover,
.product-group .panel:hover,
.products .panel:hover,
#order-boxes .panel:hover {
    border-color: rgba(200, 255, 0, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.panel-product .panel-heading,
.product .panel-heading,
.store-product .panel-heading,
.product-group .panel-heading,
.products .panel-heading,
#order-boxes .panel-heading,
.order-form .panel-heading {
    background: var(--white-05) !important;
    border-bottom: 1px solid var(--white-10) !important;
    color: var(--white-100) !important;
    padding: 16px 20px;
}

.panel-product .panel-title,
.product .panel-title,
.store-product .panel-title,
.product-group .panel-title,
.products .panel-title,
#order-boxes .panel-title,
.order-form .panel-title {
    color: var(--white-100) !important;
    font-weight: 600;
}

.panel-product .panel-body,
.product .panel-body,
.store-product .panel-body,
.product-group .panel-body,
.products .panel-body,
#order-boxes .panel-body,
.order-form .panel-body {
    background: transparent !important;
    color: var(--white-70) !important;
    padding: 20px;
}

.panel-product .panel-footer,
.product .panel-footer,
.store-product .panel-footer,
.product-group .panel-footer,
.products .panel-footer,
#order-boxes .panel-footer,
.order-form .panel-footer {
    background: var(--white-03) !important;
    border-top: 1px solid var(--white-10) !important;
    padding: 16px 20px;
}

/* Product pricing */
.panel-product .price,
.product .price,
.product-price,
.pricing,
.panel-price {
    color: var(--lime) !important;
    font-weight: 700;
    font-size: 1.4em;
}

/* Product features list */
.panel-product ul,
.product ul,
.product-features,
.features-list {
    color: var(--white-60) !important;
}

.panel-product ul li,
.product ul li,
.product-features li,
.features-list li {
    color: var(--white-60) !important;
    border-bottom: 1px solid var(--white-05);
    padding: 8px 0;
}

/* Generic panel default override for store pages */
.panel-default {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 16px !important;
}

.panel-default > .panel-heading {
    background: var(--white-05) !important;
    border-bottom: 1px solid var(--white-10) !important;
    color: var(--white-100) !important;
    border-radius: 16px 16px 0 0 !important;
}

.panel-default > .panel-body {
    background: transparent !important;
    color: var(--white-70) !important;
}

.panel-default > .panel-footer {
    background: var(--white-03) !important;
    border-top: 1px solid var(--white-10) !important;
    border-radius: 0 0 16px 16px !important;
}

/* Product description text */
.product-desc,
.product-description,
.panel-product p,
.product p,
#order-standard_cart .product p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--white-70) !important;
}

/* ============================================
   CHECKOUT / DOMAIN CONFIGURATION
   ============================================ */
/* Domain option boxes */
.domain-option,
.domain-checker-container,
.domain-selection,
.sub-heading,
#frmConfigureDomain,
#frmConfigureDomain .row,
.domain-pricing,
.well,
.form-group .well {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 12px !important;
    color: var(--white-80) !important;
}

/* Radio/checkbox option rows */
.radio,
.checkbox,
.form-check,
label.radio-inline,
label.checkbox-inline {
    background: transparent !important;
    color: var(--white-80) !important;
}

/* Domain input styling */
#frmConfigureDomain input[type="text"],
#frmConfigureDomain input[type="search"],
.domain-checker input,
input.domain-input {
    background: var(--white-05) !important;
    border: 1px solid var(--white-15) !important;
    color: var(--white-100) !important;
    border-radius: 10px !important;
}

#frmConfigureDomain input[type="text"]:focus,
.domain-checker input:focus {
    border-color: var(--lime) !important;
    box-shadow: 0 0 20px rgba(200, 255, 0, 0.15) !important;
}

/* Option boxes with white backgrounds */
.domain-option-box,
.option-box,
.transfer-option,
.subdomain-option,
[class*="domain"] .panel,
[class*="domain"] .well,
.main-content .well,
.order-form .well,
#order-standard_cart .well {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 12px !important;
}

/* Selected/active option */
.domain-option.selected,
.domain-option-box.active,
.option-box.selected,
input[type="radio"]:checked + label,
input[type="radio"]:checked ~ .domain-option {
    border-color: var(--lime) !important;
    background: rgba(200, 255, 0, 0.05) !important;
}

/* Labels in domain forms */
#frmConfigureDomain label,
.domain-checker label,
.domain-option label {
    color: var(--white-80) !important;
}

/* Override any inline white backgrounds */
[style*="background: white"],
[style*="background-color: white"],
[style*="background:#fff"],
[style*="background-color:#fff"],
[style*="background: #fff"],
[style*="background-color: #fff"] {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Store order page - domain tabs */
.bg-white,
.store-domain-tab-content,
.store-domain-tab-content.bg-white,
.tab-content.bg-white,
.store .bg-white,
.store-order-container .bg-white {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    border-top: none !important;
    color: var(--white-80) !important;
    padding: 20px;
}

/* Store domain tabs navigation */
.store-domain-tabs,
.store-domain-tabs.nav-tabs {
    border-bottom: 1px solid var(--white-10) !important;
}

.store-domain-tabs .nav-item .nav-link,
.store-domain-tabs .nav-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--white-60) !important;
}

.store-domain-tabs .nav-item .nav-link:hover,
.store-domain-tabs .nav-link:hover {
    background: var(--white-05) !important;
    border-color: var(--white-10) !important;
    color: var(--white-100) !important;
}

.store-domain-tabs .nav-item.active .nav-link,
.store-domain-tabs .nav-link.active {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    border-bottom-color: transparent !important;
    color: var(--lime) !important;
}

/* Responsive tabs connector */
.responsive-tabs-sm-connector.store,
.responsive-tabs-sm-connector {
    background: transparent !important;
}

.responsive-tabs-sm-connector .channel,
.responsive-tabs-sm-connector .bottom-border {
    background: var(--white-10) !important;
}

/* ============================================
   STANDARD CART ORDER FORM OVERRIDES
   ============================================ */
/* Product info box - configure product page */
#order-standard_cart .product-info {
    background-color: transparent !important;
    background: none !important;
    font-size: 1em !important;
    border-top: none !important;
    border-bottom: none !important;
}

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

#order-standard_cart .domain-selection-options .option:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--white-20) !important;
}

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

#order-standard_cart .domain-selection-options .option-selected label {
    color: var(--white-100) !important;
}

#order-standard_cart .domain-selection-options .option label {
    color: var(--white-80) !important;
}

/* Domain input group */
#order-standard_cart .domain-input-group {
    background: transparent !important;
}

/* Input group addons (www. prefix) */
#order-standard_cart .input-group-addon,
#order-standard_cart .input-group-prepend,
#order-standard_cart .input-group-text {
    background: var(--white-10) !important;
    border: 1px solid var(--white-15) !important;
    color: var(--white-60) !important;
}

/* Products in cart */
#order-standard_cart .products .product {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    color: var(--white-80) !important;
}

#order-standard_cart .products .product header {
    background: var(--white-05) !important;
    border-bottom: 1px solid var(--white-10) !important;
}

#order-standard_cart .products .product header h4,
#order-standard_cart .products .product header .product-title {
    color: var(--white-100) !important;
}

/* Sub headings */
#order-standard_cart .sub-heading {
    border-top-color: var(--white-10) !important;
}

#order-standard_cart .sub-heading span {
    background: var(--midnight) !important;
    color: var(--lime) !important;
}

/* Transfer eligibility boxes */
#order-standard_cart .transfer-eligible {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: var(--emerald) !important;
}

#order-standard_cart .transfer-not-eligible {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--white-60) !important;
}

/* Domain suggestions */
#order-standard_cart .suggested-domains,
#order-standard_cart .domain-suggestions {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 12px !important;
}

#order-standard_cart .suggested-domains .panel-heading,
#order-standard_cart .suggested-domains .card-header {
    background: var(--white-05) !important;
    border-bottom: 1px solid var(--white-10) !important;
    color: var(--white-100) !important;
}

#order-standard_cart .suggested-domains .panel-body,
#order-standard_cart .suggested-domains .card-body {
    background: transparent !important;
}

#order-standard_cart .suggested-domains .panel-footer,
#order-standard_cart .suggested-domains .card-footer {
    background: var(--white-03) !important;
    border-top: 1px solid var(--white-10) !important;
}

#order-standard_cart .domain-suggestion,
#order-standard_cart .list-group-item {
    background: transparent !important;
    border-color: var(--white-10) !important;
    color: var(--white-80) !important;
}

/* Spotlight TLDs */
#order-standard_cart .spotlight-tlds {
    background: transparent !important;
}

#order-standard_cart .spotlight-tld {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--white-10) !important;
    color: var(--white-80) !important;
}

/* ============================================
   MODALS / POPUPS - HIGH Z-INDEX FIX
   ============================================ */
.modal {
    z-index: 10500 !important;
}

.modal-backdrop {
    z-index: 10400 !important;
}

.modal-dialog {
    z-index: 10501 !important;
}

.modal-content {
    background: #1a1f3c !important;
    border: 1px solid var(--white-10) !important;
    border-radius: 16px !important;
    color: var(--white-100) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

.modal-header {
    background: var(--white-05) !important;
    border-bottom: 1px solid var(--white-10) !important;
    border-radius: 16px 16px 0 0 !important;
}

.modal-header .modal-title,
.modal-header h4,
.modal-header h5 {
    color: var(--white-100) !important;
}

.modal-header .close,
.modal-header .btn-close {
    color: var(--white-60) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.modal-header .close:hover,
.modal-header .btn-close:hover {
    color: var(--white-100) !important;
}

.modal-body {
    background: transparent !important;
    color: var(--white-80) !important;
}

.modal-body p {
    color: var(--white-80) !important;
}

.modal-footer {
    background: var(--white-03) !important;
    border-top: 1px solid var(--white-10) !important;
    border-radius: 0 0 16px 16px !important;
}