/**
 * ProDomain WHMCS Dashboard - Premium Dark SaaS Theme
 * Inspired by: Linear, Vercel, Stripe, Raycast
 * Version: 5.0.0 - Design Elevation
 * 
 * DESIGN PHILOSOPHY:
 * - Deep obsidian backgrounds with layered elevation
 * - High contrast text for excellent readability
 * - Electric accent for focus and CTAs
 * - Warm neutrals instead of cold greys
 */

/* ============================================
   1. CSS VARIABLES - PREMIUM DESIGN TOKENS
   ============================================ */
:root {
    /* Deep Obsidian Foundation (Linear/Raycast style) */
    --pd-canvas: #020617;           /* True black for depth */
    --pd-surface: #0a1025;          /* Primary cards/panels */
    --pd-surface-hover: #101830;    /* Interactive hover state */
    --pd-surface-elevated: #0e1528; /* Dropdowns, popovers */
    --pd-surface-overlay: #141e38;  /* Modal backgrounds */
    
    /* Border System - Subtle but present */
    --pd-border: rgba(255, 255, 255, 0.08);
    --pd-border-hover: rgba(255, 255, 255, 0.12);
    --pd-border-strong: rgba(255, 255, 255, 0.16);
    --pd-border-focus: rgba(0, 86, 179, 0.5);
    
    /* Text Hierarchy - HIGH CONTRAST for readability */
    --pd-text-primary: #f4f4f5;     /* Headings, important text (zinc-100) */
    --pd-text-secondary: #d4d4d8;   /* Body text (zinc-300) - READABLE */
    --pd-text-muted: #a1a1aa;       /* Secondary info (zinc-400) */
    --pd-text-faint: #71717a;       /* Tertiary/disabled (zinc-500) */
    
    /* Premium Accent - Electric Indigo (Linear inspired) */
    --pd-accent: #0056b3;           /* Indigo-500 - distinctive */
    --pd-accent-hover: #0069d9;     /* Indigo-400 - brighter hover */
    --pd-accent-muted: rgba(0, 86, 179, 0.15);
    --pd-accent-subtle: rgba(0, 86, 179, 0.08);
    
    /* Status Colors - Vibrant but professional */
    --pd-success: #10b981;          /* Emerald-500 */
    --pd-success-bright: #34d399;   /* Emerald-400 for text */
    --pd-success-muted: rgba(16, 185, 129, 0.15);
    
    --pd-warning: #f59e0b;          /* Amber-500 */
    --pd-warning-bright: #fbbf24;   /* Amber-400 for text */
    --pd-warning-muted: rgba(245, 158, 11, 0.15);
    
    --pd-danger: #ef4444;           /* Red-500 */
    --pd-danger-bright: #f87171;    /* Red-400 for text */
    --pd-danger-muted: rgba(239, 68, 68, 0.12);
    
    --pd-info: #3b82f6;             /* Blue-500 */
    --pd-info-bright: #60a5fa;      /* Blue-400 for text */
    --pd-info-muted: rgba(59, 130, 246, 0.15);
    
    /* Semantic Aliases */
    --pd-trust: var(--pd-accent);
    --pd-trust-hover: var(--pd-accent-hover);
    --pd-trust-light: var(--pd-accent-muted);
    --pd-growth: var(--pd-success);
    --pd-growth-light: var(--pd-success-muted);
    
    /* Typography - Modern System Stack */
    --pd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pd-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
    
    /* Refined Spacing & Radius */
    --pd-radius-sm: 6px;
    --pd-radius-md: 8px;
    --pd-radius-lg: 12px;
    --pd-radius-xl: 16px;
    --pd-radius-2xl: 20px;
    
    /* Premium Shadows - Layered depth */
    --pd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
    --pd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --pd-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
    --pd-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
    --pd-shadow-glow: 0 0 20px rgba(0, 86, 179, 0.3);
    
    /* Animation Timing */
    --pd-transition-fast: 0.1s ease;
    --pd-transition-base: 0.15s ease;
    --pd-transition-smooth: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   2. TYPOGRAPHY - PREMIUM HIERARCHY
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body {
    font-family: var(--pd-font-sans) !important;
    background-color: var(--pd-canvas) !important;
    color: var(--pd-text-secondary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.65;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Heading Hierarchy - Strong visual weight */
h1, .h1 {
    font-family: var(--pd-font-sans) !important;
    font-weight: 700;
    font-size: 28px;
    color: var(--pd-text-primary) !important;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

h2, .h2 {
    font-family: var(--pd-font-sans) !important;
    font-weight: 600;
    font-size: 22px;
    color: var(--pd-text-primary) !important;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

h3, .h3 {
    font-family: var(--pd-font-sans) !important;
    font-weight: 600;
    font-size: 18px;
    color: var(--pd-text-primary) !important;
    letter-spacing: -0.015em;
}

h4, h5, h6, .h4, .h5, .h6 {
    font-family: var(--pd-font-sans) !important;
    font-weight: 600;
    color: var(--pd-text-primary) !important;
    letter-spacing: -0.01em;
}

/* Paragraph text - readable */
p {
    color: var(--pd-text-secondary);
    line-height: 1.7;
}

/* Small text utility */
small, .small, .text-sm {
    font-size: 13px;
    color: var(--pd-text-muted);
}

/* Strong/bold - visible */
strong, b {
    font-weight: 600;
    color: var(--pd-text-primary);
}

/* ============================================
   3. HEADER - PREMIUM CONTROL BAR
   ============================================ */
.header {
    background: var(--pd-canvas) !important;
    border-bottom: 1px solid var(--pd-border-strong) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Top Control Bar - Account & Notifications */
.topbar {
    background: linear-gradient(180deg, rgba(8, 14, 35, 0.98) 0%, var(--pd-surface) 100%) !important;
    border-bottom: 1px solid var(--pd-border) !important;
    padding: 10px 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.topbar .btn {
    color: var(--pd-text-secondary) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--pd-radius-md);
    transition: var(--pd-transition-base);
}

.topbar .btn:hover {
    color: var(--pd-text-primary) !important;
    background: var(--pd-surface-hover);
}

/* Notification bell with count */
.topbar .btn .badge-danger {
    background: var(--pd-danger) !important;
    font-size: 10px;
    padding: 2px 6px;
    margin-left: 6px;
    animation: pulse-subtle 2s infinite;
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Main Navbar - Logo & Search */
.navbar {
    padding: 14px 0;
    background: var(--pd-canvas) !important;
}

.navbar-brand .logo-img {
    max-height: 38px;
    filter: brightness(0) invert(1);
    transition: var(--pd-transition-base);
}

.navbar-brand:hover .logo-img {
    opacity: 0.85;
}

/* Company name fallback */
.navbar-brand .h4 {
    color: var(--pd-text-primary) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Main Navigation Bar - Premium look */
.main-navbar-wrapper {
    background: linear-gradient(180deg, var(--pd-surface) 0%, rgba(8, 14, 35, 0.95) 100%) !important;
    border-top: 1px solid var(--pd-border) !important;
    border-bottom: 1px solid var(--pd-border-strong) !important;
    padding: 4px 0;
}

/* Navigation Links - High contrast */
#nav .nav-link,
.navbar-nav .nav-link {
    font-weight: 500;
    font-size: 13px;
    color: var(--pd-text-secondary) !important;
    padding: 10px 16px !important;
    border-radius: var(--pd-radius-md);
    transition: var(--pd-transition-smooth);
    position: relative;
}

#nav .nav-link:hover,
.navbar-nav .nav-link:hover {
    color: var(--pd-text-primary) !important;
    background: var(--pd-surface-hover);
}

/* Active state with accent indicator */
#nav .nav-item.active > .nav-link,
.navbar-nav .nav-item.active > .nav-link {
    color: var(--pd-text-primary) !important;
    background: var(--pd-accent-muted);
}

#nav .nav-item.active > .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--pd-accent);
    border-radius: 2px;
}

/* Premium Dropdown Menu */
.dropdown-menu {
    background: var(--pd-surface-elevated) !important;
    border: 1px solid var(--pd-border-strong) !important;
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-lg);
    padding: 8px;
    min-width: 220px;
    margin-top: 8px !important;
    animation: dropdown-in 0.15s ease;
}

@keyframes dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    border-radius: var(--pd-radius-sm);
    padding: 10px 14px;
    font-weight: 500;
    font-size: 13px;
    color: var(--pd-text-secondary) !important;
    transition: var(--pd-transition-fast);
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.dropdown-item i {
    width: 16px;
    color: var(--pd-text-muted);
    transition: var(--pd-transition-fast);
}

.dropdown-item:hover {
    background: var(--pd-surface-hover) !important;
    color: var(--pd-text-primary) !important;
}

.dropdown-item:hover i {
    color: var(--pd-accent);
}

.dropdown-item:active {
    background: var(--pd-accent-muted) !important;
    color: var(--pd-text-primary) !important;
}

.dropdown-divider {
    border-color: var(--pd-border);
    margin: 6px 0;
}

/* ============================================
   4. MOBILE NAVIGATION - DARK (FIXED)
   ============================================ */

/* Overlay - covers entire screen when menu is open */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Slide-over menu panel */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--pd-canvas) !important;
    border-right: 1px solid var(--pd-border-strong);
    box-shadow: var(--pd-shadow-xl);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu.open {
    transform: translateX(0);
}

/* Menu header with user info */
.mobile-menu-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--pd-surface) !important;
    border-bottom: 1px solid var(--pd-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.mobile-menu-header h4 {
    color: var(--pd-text-primary) !important;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    display: flex !important;
    align-items: center;
}

.mobile-menu-header h4 i {
    color: var(--pd-accent);
}

/* Close button */
.mobile-menu-close {
    width: 36px;
    height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--pd-surface-hover);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-md);
    color: var(--pd-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mobile-menu-close:hover {
    background: var(--pd-danger-muted);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--pd-danger);
}

/* Navigation content */
.mobile-menu-nav {
    padding: 16px;
    background: var(--pd-canvas);
}

.mobile-menu-nav .nav-section {
    margin-bottom: 20px;
}

.mobile-menu-nav .nav-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pd-text-muted);  /* IMPROVED: was --pd-text-faint (too dark) */
    margin-bottom: 10px;
    padding-left: 12px;
}

.mobile-menu-nav .nav-link {
    display: flex !important;
    align-items: center;
    padding: 12px 14px;
    color: #d4d4d8 !important;  /* IMPROVED: zinc-300 for better readability */
    font-weight: 500;
    font-size: 14px;
    border-radius: var(--pd-radius-md);
    transition: all 0.15s ease;
    margin-bottom: 2px;
}

.mobile-menu-nav .nav-link:hover {
    background: var(--pd-surface-hover) !important;
    color: var(--pd-text-primary) !important;
}

.mobile-menu-nav .nav-link:active {
    background: var(--pd-accent-muted) !important;
}

.mobile-menu-nav .nav-link i {
    width: 20px;
    margin-right: 12px;
    font-size: 15px;
    color: #a1a1aa;  /* IMPROVED: was --pd-text-muted */
    flex-shrink: 0;
}

.mobile-menu-nav .nav-link:hover i {
    color: var(--pd-text-primary);
}

/* Badge styling in mobile nav */
.mobile-menu-nav .nav-link .badge {
    margin-left: auto;
    font-size: 10px;
    padding: 3px 8px;
}

/* ============================================
   5. SIDEBAR - PREMIUM NAVIGATION
   ============================================ */
.sidebar {
    position: sticky;
    top: 100px;
}

.sidebar .card-sidebar,
.sidebar .card {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.sidebar .card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid var(--pd-border) !important;
    padding: 14px 18px;
}

.sidebar .card-title,
.sidebar .list-group-item-heading {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pd-text-muted) !important;
    margin: 0;
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.sidebar .card-title i {
    color: var(--pd-accent);
}

.sidebar .list-group-item {
    background: transparent !important;
    border: none;
    padding: 12px 18px;
    font-weight: 500;
    font-size: 13px;
    color: var(--pd-text-secondary) !important;
    border-left: 2px solid transparent;
    transition: var(--pd-transition-fast);
    display: flex !important;
    align-items: center;
}

.sidebar .list-group-item:hover {
    background: var(--pd-surface-hover) !important;
    color: var(--pd-text-primary) !important;
    border-left-color: var(--pd-accent);
}

.sidebar .list-group-item.active {
    background: var(--pd-accent-muted) !important;
    color: var(--pd-text-primary) !important;
    border-left-color: var(--pd-accent);
    font-weight: 600;
}

.sidebar .list-group-item i {
    color: var(--pd-text-muted);
    margin-right: 12px;
    width: 18px;
    text-align: center;
    font-size: 14px;
    transition: var(--pd-transition-fast);
}

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

/* ============================================
   6. DASHBOARD TILES - PREMIUM STATS
   ============================================ */
.tiles .tile,
.tile {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: var(--pd-radius-lg) !important;
    text-decoration: none !important;
    transition: var(--pd-transition-smooth);
    position: relative;
    overflow: hidden;
}

.tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pd-accent-muted), transparent);
    opacity: 0;
    transition: var(--pd-transition-smooth);
}

.tile:hover {
    border-color: var(--pd-border-hover) !important;
    background: var(--pd-surface-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--pd-shadow-md);
}

.tile:hover::before {
    opacity: 1;
}

.tile .tile-icon,
.tile > i {
    font-size: 20px;
    color: var(--pd-accent) !important;
    margin-bottom: 16px;
    padding: 10px;
    background: var(--pd-accent-muted);
    border-radius: var(--pd-radius-md);
}

.tile .stat {
    font-size: 32px;
    font-weight: 700;
    color: var(--pd-text-primary) !important;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.tile .title {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pd-text-muted) !important;
}

.tile .tile-indicator,
.tile .highlight {
    display: none;
}

/* ============================================
   7. CARDS - ELEVATED SURFACES
   ============================================ */
.card {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: var(--pd-radius-lg) !important;
    box-shadow: var(--pd-shadow-sm) !important;
    overflow: hidden;
}

.card-header {
    background: rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid var(--pd-border) !important;
    padding: 16px 20px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-text-primary) !important;
    margin: 0;
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.card-title i {
    color: var(--pd-accent);
}

.card-body {
    padding: 24px;
    color: var(--pd-text-secondary);
}

.card-footer {
    background: rgba(0, 0, 0, 0.1) !important;
    border-top: 1px solid var(--pd-border) !important;
    padding: 16px 20px;
}

/* ============================================
   8. BUTTONS - PREMIUM INTERACTIONS
   ============================================ */
.btn {
    font-family: var(--pd-font-sans);
    font-weight: 500;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: var(--pd-radius-md);
    transition: var(--pd-transition-smooth);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Primary Button - High visibility CTA */
.btn-primary {
    background: var(--pd-accent) !important;
    border-color: var(--pd-accent) !important;
    color: white !important;
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--pd-accent-hover) !important;
    border-color: var(--pd-accent-hover) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: var(--pd-shadow-glow);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Success Button - Billing actions */
.btn-success {
    background: var(--pd-success) !important;
    border-color: var(--pd-success) !important;
    color: white !important;
    font-weight: 600;
}

.btn-success:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* Danger Button - Destructive actions */
.btn-danger {
    background: var(--pd-danger) !important;
    border-color: var(--pd-danger) !important;
    color: white !important;
}

.btn-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* Warning Button */
.btn-warning {
    background: var(--pd-warning) !important;
    border-color: var(--pd-warning) !important;
    color: var(--pd-canvas) !important;
    font-weight: 600;
}

/* Secondary/Default Buttons - Ghost style */
.btn-default,
.btn-secondary,
.btn-outline-secondary {
    background: transparent !important;
    border: 1px solid var(--pd-border-strong) !important;
    color: var(--pd-text-secondary) !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--pd-surface-hover) !important;
    border-color: var(--pd-border-hover) !important;
    color: var(--pd-text-primary) !important;
}

/* Accent outline button */
.btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--pd-accent) !important;
    color: var(--pd-accent) !important;
}

.btn-outline-primary:hover {
    background: var(--pd-accent-muted) !important;
    border-color: var(--pd-accent-hover) !important;
    color: var(--pd-accent-hover) !important;
}

/* ============================================
   9. TABLES - DARK
   ============================================ */
.table {
    color: var(--pd-text-secondary) !important;
}

.table thead th {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid var(--pd-border) !important;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pd-text-muted) !important;
    padding: 12px 16px;
}

.table tbody tr {
    transition: all 0.15s ease;
}

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

.table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pd-border) !important;
    color: var(--pd-text-secondary) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   10. STATUS LABELS & BADGES - DARK
   ============================================ */
.label,
.badge,
.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    text-transform: none;
    letter-spacing: 0;
}

.badge-info,
.label-info {
    background: var(--pd-info-muted) !important;
    color: #60a5fa !important;
}

.badge-success,
.label-success,
.status-active {
    background: var(--pd-success-muted) !important;
    color: #4ade80 !important;
}

.badge-warning,
.label-warning,
.status-pending {
    background: var(--pd-warning-muted) !important;
    color: #fbbf24 !important;
}

.badge-danger,
.label-danger,
.status-overdue,
.status-suspended,
.status-cancelled {
    background: var(--pd-danger-muted) !important;
    color: #f87171 !important;
}

.badge-primary,
.label-primary {
    background: var(--pd-accent-muted) !important;
    color: #60a5fa !important;
}

.badge-secondary,
.label-default {
    background: var(--pd-surface-hover) !important;
    color: var(--pd-text-secondary) !important;
}

/* ============================================
   11. ALERTS - DARK
   ============================================ */
.alert {
    border-radius: var(--pd-radius-lg);
    padding: 14px 18px;
    border: 1px solid !important;
    font-weight: 500;
    font-size: 13px;
}

.alert-success {
    background: var(--pd-success-muted) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
}

.alert-warning {
    background: var(--pd-warning-muted) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

.alert-danger {
    background: var(--pd-danger-muted) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

.alert-info {
    background: var(--pd-info-muted) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}

/* ============================================
   12. FORM INPUTS - DARK
   ============================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--pd-border) !important;
    color: var(--pd-text-primary) !important;
    border-radius: var(--pd-radius-md) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: all 0.15s ease !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
    color: var(--pd-text-primary) !important;
}

.form-control::placeholder,
input::placeholder {
    color: var(--pd-text-muted) !important;
}

.form-control-label,
label {
    color: var(--pd-text-secondary) !important;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
}

.input-group-text {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    color: var(--pd-text-muted) !important;
}

/* ============================================
   13. MODALS - DARK
   ============================================ */
.modal-content {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: var(--pd-radius-lg) !important;
    box-shadow: var(--pd-shadow-xl) !important;
}

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

.modal-title {
    color: var(--pd-text-primary) !important;
    font-weight: 600;
    font-size: 16px;
}

.modal-body {
    padding: 24px;
    color: var(--pd-text-secondary);
}

.modal-footer {
    border-top: 1px solid var(--pd-border) !important;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.2) !important;
}

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

.close:hover {
    color: var(--pd-text-primary) !important;
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
}

/* ============================================
   14. BREADCRUMB - DARK
   ============================================ */
.master-breadcrumb {
    background: var(--pd-surface) !important;
    border-bottom: 1px solid var(--pd-border) !important;
    padding: 12px 0;
}

.breadcrumb {
    background: transparent !important;
    margin: 0;
    padding: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--pd-text-muted) !important;
    font-size: 13px;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    color: var(--pd-text-primary) !important;
}

.breadcrumb-item.active {
    color: var(--pd-text-secondary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--pd-text-faint) !important;
}

/* ============================================
   15. LOGIN PAGE - DARK SAAS
   ============================================ */
.login-page-wrapper {
    min-height: 100vh;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--pd-canvas);
}

.login-card {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: var(--pd-radius-xl) !important;
    box-shadow: var(--pd-shadow-lg) !important;
    max-width: 420px;
    width: 100%;
}

.login-card .card-body {
    padding: 40px !important;
}

.login-card .card-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--pd-border) !important;
    padding: 20px !important;
}

.login-logo {
    filter: brightness(0) invert(1);
}

.login-trust-indicators {
    margin-top: 24px;
}

.login-trust-indicators .trust-item {
    color: var(--pd-text-muted);
    font-size: 12px;
}

.login-trust-indicators i {
    color: var(--pd-success) !important;
}

/* ============================================
   16. DASHBOARD WELCOME - DARK
   ============================================ */
.dashboard-welcome {
    padding: 24px;
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    margin-bottom: 24px;
}

.welcome-title {
    color: var(--pd-text-primary) !important;
    font-size: 20px;
    font-weight: 600;
}

.welcome-subtitle {
    color: var(--pd-text-muted) !important;
    font-size: 14px;
}

/* ============================================
   17. ATTENTION CARDS - DARK
   ============================================ */
.needs-attention-section .card-attention {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
}

.needs-attention-section .card-header {
    background: var(--pd-warning-muted) !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

.needs-attention-section .card-header h5 {
    color: #fbbf24 !important;
}

.attention-list .attention-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pd-border);
    display: flex !important;
    align-items: center;
    gap: 16px;
}

.attention-list .attention-item:last-child {
    border-bottom: none;
}

.attention-content strong {
    color: var(--pd-text-primary);
}

.attention-content p {
    color: var(--pd-text-muted);
}

/* ============================================
   18. FOOTER - MINIMAL & PROFESSIONAL
   ============================================ */
footer,
#footer,
.footer {
    background: var(--pd-canvas) !important;
    border-top: 1px solid var(--pd-border) !important;
    color: var(--pd-text-muted) !important;
    padding: 20px 0;
    margin-top: auto;
}

.footer .container {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer .nav {
    gap: 8px;
}

footer a,
.footer a,
.footer .nav-link {
    color: var(--pd-text-muted) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--pd-radius-sm);
    transition: var(--pd-transition-fast);
}

footer a:hover,
.footer a:hover,
.footer .nav-link:hover {
    color: var(--pd-text-primary) !important;
    background: var(--pd-surface-hover);
}

.footer .copyright {
    font-size: 12px;
    color: var(--pd-text-faint);
    margin: 0;
}

/* Language/Currency selector in footer */
.footer .list-inline {
    margin-bottom: 0 !important;
}

.footer .list-inline-item .btn {
    color: var(--pd-text-muted) !important;
    font-size: 12px;
    padding: 6px 10px;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-md);
    background: transparent;
}

.footer .list-inline-item .btn:hover {
    border-color: var(--pd-border-hover);
    color: var(--pd-text-secondary) !important;
}

/* ============================================
   19. SCROLLBAR - DARK
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   20. MISC OVERRIDES - DARK
   ============================================ */
.text-muted {
    color: var(--pd-text-muted) !important;
}

.text-primary {
    color: var(--pd-accent) !important;
}

.text-success {
    color: var(--pd-success) !important;
}

.text-warning {
    color: var(--pd-warning) !important;
}

.text-danger {
    color: var(--pd-danger) !important;
}

a {
    color: var(--pd-accent);
}

a:hover {
    color: var(--pd-accent-hover);
}

hr {
    border-color: var(--pd-border);
}

.bg-light {
    background: var(--pd-surface) !important;
}

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

/* Primary Content Area */
.primary-content {
    color: var(--pd-text-secondary);
}

/* Page Titles */
.page-title,
.content-header h1 {
    color: var(--pd-text-primary) !important;
}

/* Panel defaults */
.panel {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: var(--pd-radius-lg);
}

.panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--pd-border) !important;
    color: var(--pd-text-primary) !important;
}

.panel-body {
    color: var(--pd-text-secondary);
}

/* Well */
.well {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: var(--pd-radius-md);
    color: var(--pd-text-secondary);
}

/* Pagination */
.pagination .page-link {
    background: var(--pd-surface) !important;
    border-color: var(--pd-border) !important;
    color: var(--pd-text-secondary) !important;
}

.pagination .page-link:hover {
    background: var(--pd-surface-hover) !important;
    color: var(--pd-text-primary) !important;
}

.pagination .page-item.active .page-link {
    background: var(--pd-accent) !important;
    border-color: var(--pd-accent) !important;
    color: white !important;
}

/* Tooltips */
.tooltip-inner {
    background: var(--pd-surface-elevated) !important;
    color: var(--pd-text-primary) !important;
    border: 1px solid var(--pd-border);
    font-size: 12px;
}

/* Popovers */
.popover {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
}

.popover-header {
    background: var(--pd-surface-hover) !important;
    border-bottom: 1px solid var(--pd-border) !important;
    color: var(--pd-text-primary) !important;
}

.popover-body {
    color: var(--pd-text-secondary) !important;
}

/* Progress bars */
.progress {
    background: var(--pd-surface) !important;
    border-radius: var(--pd-radius-sm);
}

.progress-bar {
    background: var(--pd-accent) !important;
}

/* List groups */
.list-group-item {
    background: var(--pd-surface) !important;
    border-color: var(--pd-border) !important;
    color: var(--pd-text-secondary) !important;
}

.list-group-item:hover {
    background: var(--pd-surface-hover) !important;
}

/* Active client badge in topbar - Premium style */
.active-client .btn,
.active-client .btn-active-client {
    background: var(--pd-surface) !important;
    border-color: var(--pd-border) !important;
    color: var(--pd-text-secondary) !important;
    font-weight: 500;
}

.active-client .btn:hover {
    background: var(--pd-surface-hover) !important;
    color: var(--pd-text-primary) !important;
    border-color: var(--pd-border-hover) !important;
}

.active-client .btn-active-client {
    border-radius: var(--pd-radius-md) 0 0 var(--pd-radius-md) !important;
}

.active-client .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--pd-text-faint) !important;
    font-size: 12px;
    font-weight: 500;
}

/* Search input in header - Premium */
.navbar .search {
    position: relative;
}

.navbar .search .form-control {
    background: var(--pd-surface) !important;
    border-color: var(--pd-border) !important;
    border-radius: var(--pd-radius-md) !important;
    padding-left: 16px;
    width: 260px;
    transition: var(--pd-transition-smooth);
}

.navbar .search .form-control:focus {
    width: 320px;
    border-color: var(--pd-accent) !important;
    box-shadow: 0 0 0 3px var(--pd-accent-muted) !important;
}

.navbar .search .form-control::placeholder {
    color: var(--pd-text-faint);
}

.navbar .search .btn {
    background: var(--pd-accent) !important;
    border-color: var(--pd-accent) !important;
    border-radius: 0 var(--pd-radius-md) var(--pd-radius-md) 0 !important;
}

.navbar .search .btn:hover {
    background: var(--pd-accent-hover) !important;
}

/* Cart button - Premium */
.cart-btn {
    color: var(--pd-text-secondary) !important;
    position: relative;
    padding: 8px 12px;
    border-radius: var(--pd-radius-md);
    transition: var(--pd-transition-fast);
}

.cart-btn:hover {
    color: var(--pd-text-primary) !important;
    background: var(--pd-surface-hover);
}

.cart-btn .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 9px;
    padding: 3px 6px;
    background: var(--pd-accent) !important;
    border: 2px solid var(--pd-canvas);
    border-radius: 10px;
}

/* Mobile menu toggle button - hamburger */
.navbar-nav.toolbar .nav-link {
    color: var(--pd-text-secondary) !important;
    padding: 8px 12px !important;
    border-radius: var(--pd-radius-md);
    transition: var(--pd-transition-fast);
}

.navbar-nav.toolbar .nav-link:hover {
    color: var(--pd-text-primary) !important;
    background: var(--pd-surface-hover);
}

/* Nav pills/tabs */
.nav-pills .nav-link,
.nav-tabs .nav-link {
    color: var(--pd-text-secondary) !important;
}

.nav-pills .nav-link:hover,
.nav-tabs .nav-link:hover {
    color: var(--pd-text-primary) !important;
    background: var(--pd-surface-hover) !important;
}

.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    background: var(--pd-accent) !important;
    color: white !important;
}

.nav-tabs {
    border-bottom-color: var(--pd-border) !important;
}

.tab-content {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-top: none;
    border-radius: 0 0 var(--pd-radius-md) var(--pd-radius-md);
    padding: 20px;
}

/* ============================================
   21. DASHBOARD HOME PANELS - DARK
   ============================================ */
.dashboard-panels {
    margin-top: 24px;
}

.panels-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .panels-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.panel-card {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}

.panel-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pd-border);
}

.panel-title {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-text-primary);
    margin: 0;
}

.panel-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    background: var(--pd-accent-muted);
    color: #60a5fa;
    border-radius: 4px;
}

.panel-action {
    font-size: 12px;
    font-weight: 500;
    color: var(--pd-text-muted);
    text-decoration: none;
}

.panel-action:hover {
    color: var(--pd-text-primary);
}

.panel-body {
    padding: 20px;
    color: var(--pd-text-secondary);
}

.panel-list {
    border-top: none;
}

.panel-list-item {
    display: flex !important;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--pd-border);
    color: var(--pd-text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.panel-list-item:last-child {
    border-bottom: none;
}

.panel-list-item:hover {
    background: var(--pd-surface-hover);
    color: var(--pd-text-primary);
}

.item-label {
    flex: 1;
    font-size: 13px;
}

.item-badge {
    font-size: 11px;
    color: var(--pd-text-muted);
    margin-right: 8px;
}

.item-arrow {
    width: 14px;
    height: 14px;
    color: var(--pd-text-faint);
}

.panel-list-item:hover .item-arrow {
    color: var(--pd-text-muted);
}

.panel-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--pd-border);
    background: rgba(0, 0, 0, 0.2);
    font-size: 12px;
    color: var(--pd-text-muted);
}

/* ============================================
   23. STAT CARDS - DARK
   ============================================ */
.stat-card {
    display: block;
    padding: 20px;
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.stat-card:hover {
    border-color: var(--pd-border-hover);
    background: var(--pd-surface-hover);
}

.stat-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pd-text-muted);
}

.stat-icon {
    width: 16px;
    height: 16px;
    color: var(--pd-text-faint);
}

.stat-card:hover .stat-icon {
    color: var(--pd-text-muted);
}

.alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pd-warning);
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--pd-text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-value.text-warning {
    color: #fbbf24 !important;
}

.stat-meta {
    font-size: 12px;
    color: var(--pd-text-muted);
}

/* ============================================
   24. ATTENTION BANNER - DARK
   ============================================ */
.attention-banner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--pd-warning-muted);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--pd-radius-lg);
    margin-bottom: 24px;
}

.attention-content {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.attention-icon {
    width: 20px;
    height: 20px;
    color: #fbbf24;
    flex-shrink: 0;
}

.attention-text {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
}

.attention-text strong {
    color: #fbbf24;
    font-size: 14px;
}

.attention-text span {
    color: rgba(251, 191, 36, 0.7);
    font-size: 12px;
}

.attention-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--pd-radius-md);
    color: #fbbf24;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.attention-action:hover {
    background: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.attention-action svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   25. QUICK ACTIONS - DARK
   ============================================ */
.quick-actions-bar {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-md);
    color: var(--pd-text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}

.quick-action-btn:hover {
    background: var(--pd-surface-hover);
    border-color: var(--pd-border-hover);
    color: var(--pd-text-primary);
}

.quick-action-btn.primary {
    background: var(--pd-text-primary);
    border-color: var(--pd-text-primary);
    color: var(--pd-canvas);
}

.quick-action-btn.primary:hover {
    background: #e4e4e7;
    border-color: #e4e4e7;
}

.quick-action-btn svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   26. UTILITY CLASSES - DARK
   ============================================ */
.text-trust { color: var(--pd-accent) !important; }
.text-growth { color: var(--pd-success) !important; }
.text-danger { color: var(--pd-danger) !important; }
.text-warning { color: var(--pd-warning) !important; }

.bg-trust { background-color: var(--pd-accent) !important; }
.bg-growth { background-color: var(--pd-success) !important; }
.bg-danger { background-color: var(--pd-danger) !important; }
.bg-warning { background-color: var(--pd-warning) !important; }
.bg-info { background-color: var(--pd-accent) !important; }
.bg-success { background-color: var(--pd-success) !important; }

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

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

/* ============================================
   27. RESPONSIVE ADJUSTMENTS - DARK
   ============================================ */
@media (max-width: 991px) {
    .sidebar {
        margin-bottom: 30px;
        position: static;
    }
    
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .attention-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .attention-action {
        width: 100%;
        justify-content: center;
    }
    
    .quick-actions-bar {
        flex-direction: column;
    }
    
    .quick-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   28. PREMIUM BILLING COMPONENTS
   ============================================ */

/* Billing Quick Access Card */
.billing-quick-access {
    background: linear-gradient(135deg, var(--pd-surface) 0%, rgba(0, 86, 179, 0.08) 100%);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.billing-quick-access .billing-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.billing-quick-access .billing-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pd-text-muted);
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.billing-quick-access .billing-title i {
    color: var(--pd-success);
}

.billing-quick-access .balance-display {
    text-align: right;
}

.billing-quick-access .balance-label {
    font-size: 11px;
    color: var(--pd-text-faint);
    margin-bottom: 2px;
}

.billing-quick-access .balance-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--pd-text-primary);
}

.billing-quick-access .billing-actions {
    display: flex !important;
    gap: 10px;
}

.billing-quick-access .btn-add-funds {
    flex: 1;
    background: var(--pd-success) !important;
    border: none;
    color: white !important;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: var(--pd-radius-md);
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--pd-transition-smooth);
}

.billing-quick-access .btn-add-funds:hover {
    background: #059669 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.billing-quick-access .btn-payment-methods {
    flex: 1;
    background: transparent !important;
    border: 1px solid var(--pd-border-strong) !important;
    color: var(--pd-text-secondary) !important;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: var(--pd-radius-md);
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--pd-transition-smooth);
}

.billing-quick-access .btn-payment-methods:hover {
    background: var(--pd-surface-hover) !important;
    border-color: var(--pd-accent) !important;
    color: var(--pd-text-primary) !important;
}

/* Unpaid Invoices Alert Banner */
.unpaid-invoices-banner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--pd-danger-muted);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--pd-radius-lg);
    margin-bottom: 20px;
}

.unpaid-invoices-banner .banner-content {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.unpaid-invoices-banner .banner-icon {
    width: 36px;
    height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.2);
    border-radius: var(--pd-radius-md);
    color: var(--pd-danger-bright);
    flex-shrink: 0;
}

.unpaid-invoices-banner .banner-text strong {
    display: block;
    color: var(--pd-danger-bright);
    font-size: 14px;
    font-weight: 600;
}

.unpaid-invoices-banner .banner-text span {
    color: rgba(248, 113, 113, 0.8);
    font-size: 12px;
}

.unpaid-invoices-banner .btn-pay-now {
    background: var(--pd-danger) !important;
    border: none;
    color: white !important;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--pd-radius-md);
    white-space: nowrap;
}

.unpaid-invoices-banner .btn-pay-now:hover {
    background: #dc2626 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Account Status Indicator (for topbar) */
.account-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--pd-success-muted);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--pd-radius-md);
    font-size: 12px;
    font-weight: 500;
    color: var(--pd-success-bright);
}

.account-status-indicator.status-warning {
    background: var(--pd-warning-muted);
    border-color: rgba(245, 158, 11, 0.2);
    color: var(--pd-warning-bright);
}

.account-status-indicator.status-danger {
    background: var(--pd-danger-muted);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--pd-danger-bright);
}

.account-status-indicator .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
    50% { opacity: 0.6; box-shadow: 0 0 8px currentColor; }
}

/* ============================================
   29. MICRO-INTERACTIONS & POLISH
   ============================================ */

/* Focus states for accessibility */
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
    outline: 2px solid var(--pd-accent);
    outline-offset: 2px;
}

/* Smooth page transitions */
.animate-fade-in {
    animation: fadeIn 0.3s ease;
}

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

/* Loading skeleton placeholder */
.skeleton {
    background: linear-gradient(90deg, 
        var(--pd-surface) 25%, 
        var(--pd-surface-hover) 50%, 
        var(--pd-surface) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--pd-radius-sm);
}

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

/* Tooltip enhancements */
.tooltip-inner {
    background: var(--pd-surface-overlay) !important;
    border: 1px solid var(--pd-border-strong);
    color: var(--pd-text-primary) !important;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--pd-radius-md);
    box-shadow: var(--pd-shadow-lg);
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before {
    border-top-color: var(--pd-surface-overlay) !important;
    border-bottom-color: var(--pd-surface-overlay) !important;
}

/* Selection styling */
::selection {
    background: var(--pd-accent-muted);
    color: var(--pd-text-primary);
}

/* ============================================
   30. FINAL VISUAL POLISH - DESIGN PASS
   ============================================ */

/* Global focus states - Accessible and consistent */
*:focus-visible {
    outline: 2px solid var(--pd-accent);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--pd-accent);
    outline-offset: 2px;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Enhanced link styling */
a {
    color: var(--pd-accent);
    text-decoration: none;
    transition: color var(--pd-transition-fast);
}

a:hover {
    color: var(--pd-accent-hover);
}

/* Paragraph links - underline for clarity */
p a,
.card-body a,
.panel-body a {
    text-decoration: underline;
    text-decoration-color: rgba(0, 86, 179, 0.4);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--pd-transition-fast);
}

p a:hover,
.card-body a:hover,
.panel-body a:hover {
    text-decoration-color: var(--pd-accent);
}

/* Global badge refinement */
.badge,
.label {
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 6px;
    padding: 4px 10px;
}

/* Premium list styling */
ul.list-styled,
ol.list-styled {
    padding-left: 20px;
}

ul.list-styled li,
ol.list-styled li {
    padding: 4px 0;
    color: var(--pd-text-secondary);
}

ul.list-styled li::marker {
    color: var(--pd-accent);
}

/* Horizontal dividers */
hr {
    border: none;
    border-top: 1px solid var(--pd-border);
    margin: 24px 0;
}

/* Enhanced form labels */
label,
.control-label,
.form-label {
    font-weight: 500;
    color: var(--pd-text-muted);
    margin-bottom: 6px;
    font-size: 13px;
}

/* Consistent form group spacing */
.form-group {
    margin-bottom: 20px;
}

/* Enhanced disabled state */
.disabled,
[disabled],
.btn.disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Premium image styling */
img {
    max-width: 100%;
    height: auto;
}

/* Avatar/profile images */
.avatar,
.profile-img,
.user-avatar {
    border-radius: 50%;
    border: 2px solid var(--pd-border);
    object-fit: cover;
}

/* Code blocks enhancement */
code {
    background: rgba(0, 86, 179, 0.1);
    color: #c4b5fd;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--pd-font-mono);
    font-size: 0.875em;
}

pre code {
    background: var(--pd-surface);
    display: block;
    padding: 16px;
    border-radius: var(--pd-radius-md);
    border: 1px solid var(--pd-border);
    overflow-x: auto;
}

/* Blockquote styling */
blockquote {
    border-left: 3px solid var(--pd-accent);
    padding-left: 16px;
    margin: 20px 0;
    color: var(--pd-text-muted);
    font-style: italic;
}

/* Table refinements - global */
table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    font-weight: 600;
    color: var(--pd-text-primary);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pd-border-strong);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

table td {
    padding: 14px 16px;
    color: var(--pd-text-secondary);
    border-bottom: 1px solid var(--pd-border);
}

table tbody tr:hover {
    background: var(--pd-surface-hover);
}

/* Empty state helper */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--pd-text-muted);
}

.empty-state svg,
.empty-state i {
    font-size: 48px;
    color: var(--pd-text-faint);
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 18px;
    color: var(--pd-text-primary);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: var(--pd-text-muted);
    max-width: 320px;
    margin: 0 auto;
}

/* Status indicators - consistent */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-active .status-dot,
.status-success .status-dot {
    background: var(--pd-success);
    box-shadow: 0 0 8px var(--pd-success-muted);
}

.status-pending .status-dot,
.status-warning .status-dot {
    background: var(--pd-warning);
    box-shadow: 0 0 8px var(--pd-warning-muted);
}

.status-expired .status-dot,
.status-error .status-dot,
.status-danger .status-dot {
    background: var(--pd-danger);
    box-shadow: 0 0 8px var(--pd-danger-muted);
}

/* Page loading overlay enhancement */
#fullpage-overlay {
    background: rgba(2, 6, 23, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#fullpage-overlay .msg {
    color: var(--pd-text-primary);
    font-weight: 500;
}

/* Modal enhancement */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Custom scrollbar - subtle */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* Micro-interaction: button press */
.btn:active:not(:disabled),
button:active:not(:disabled) {
    transform: scale(0.98);
}

/* Page transition fade */
.page-content {
    animation: pageLoad 0.3s ease-out;
}

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

/* Link hover lift effect */
.card-link:hover,
.nav-link:hover {
    transform: translateX(2px);
}

/* ============================================
   31. WHITE BACKGROUND OVERRIDES
   Force dark theme on all remaining white areas
   ============================================ */

/* Support Ticket Form */
.card .card-body.extra-padding {
    background: transparent !important;
}

/* Textarea - Markdown Editor */
.markdown-editor,
textarea.form-control,
.form-control[rows] {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f4f4f5 !important;
    min-height: 200px;
}

.markdown-editor:focus,
textarea.form-control:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: #0056b3 !important;
}

/* EasyMDE / SimpleMDE Editor Toolbar */
.EasyMDEContainer .CodeMirror,
.editor-toolbar,
.CodeMirror {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f4f4f5 !important;
}

.editor-toolbar button,
.editor-toolbar a {
    color: #a1a1aa !important;
    border: none !important;
}

.editor-toolbar button:hover,
.editor-toolbar a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f4f4f5 !important;
}

.editor-toolbar button.active {
    background: rgba(0, 86, 179, 0.2) !important;
    color: #0069d9 !important;
}

.editor-toolbar.fullscreen,
.CodeMirror-fullscreen {
    background: #020617 !important;
}

.editor-preview,
.editor-preview-side {
    background: rgba(8, 14, 35, 0.95) !important;
    color: #d4d4d8 !important;
}

.CodeMirror-cursor {
    border-left-color: #0056b3 !important;
}

.CodeMirror-selected,
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
    background: rgba(0, 86, 179, 0.3) !important;
}

/* Custom File Input */
.custom-file-label {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
}

.custom-file-label::after {
    background: rgba(255, 255, 255, 0.06) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
}

/* Select Dropdowns */
select.form-control,
.custom-select {
    background-color: rgba(0, 0, 0, 0.3) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f4f4f5 !important;
    padding-right: 36px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

select.form-control option,
.custom-select option {
    background: #0a1025 !important;
    color: #f4f4f5 !important;
}

/* Tab Content Background Override */
.tab-content {
    background: transparent !important;
}

.tab-content.bg-white,
.bg-white {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Store Domain Tab Content */
.store-domain-tab-content {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 0 8px 8px !important;
}

/* Nav Tabs - Dark Theme */
.nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.nav-tabs .nav-link {
    color: #a1a1aa !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.nav-tabs .nav-link:hover {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f4f4f5 !important;
}

.nav-tabs .nav-link.active {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) transparent !important;
    color: #f4f4f5 !important;
}

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

.responsive-tabs-sm-connector .channel {
    background: rgba(255, 255, 255, 0.02) !important;
}

.responsive-tabs-sm-connector .bottom-border {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Domain Validation Status */
.domain-validation.ok {
    color: #34d399 !important;
}

.domain-validation.error {
    color: #f87171 !important;
}

/* Cart Body text override */
.cart-body p,
.cart-body label {
    color: #a1a1aa !important;
}

/* Disabled inputs */
.form-control.disabled,
.form-control:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    background: rgba(255, 255, 255, 0.02) !important;
    color: #71717a !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* DataTables Dark Theme */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f4f4f5 !important;
    border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: #a1a1aa !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #a1a1aa !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f4f4f5 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(0, 86, 179, 0.15) !important;
    border-color: rgba(0, 86, 179, 0.3) !important;
    color: #0069d9 !important;
}

/* Tooltip Dark */
.tooltip-inner {
    background: #101830 !important;
    color: #f4f4f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Popover Dark */
.popover {
    background: #101830 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.popover-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: #f4f4f5 !important;
}

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

/* Domain Pricing Table Specific */
#tableDomainPricing_wrapper {
    background: transparent !important;
}

#tableDomainPricing_filter input {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f4f4f5 !important;
}

/* TLD Filter Buttons - Make them dark */
.tld-filters-bar button,
.filter-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    margin: 4px !important;
    font-size: 13px !important;
    transition: all 0.15s ease !important;
}

.tld-filters-bar button:hover,
.filter-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f4f4f5 !important;
}

.tld-filters-bar button.active,
.filter-btn.active {
    background: rgba(0, 86, 179, 0.15) !important;
    border-color: rgba(0, 86, 179, 0.3) !important;
    color: #0069d9 !important;
}

.tld-filters-bar button .count,
.filter-btn .count {
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    margin-left: 6px !important;
}

/* ============================================
   32. PRINT STYLES
   ============================================ */
@media print {
    .header,
    .sidebar,
    footer,
    .btn,
    .breadcrumb,
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
    
    .primary-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        background: white !important;
    }
}/* ============================================
   33. HOMEPAGE - PREMIUM HERO & SECTIONS
   ============================================ */

/* Hero Section */
.pro-hero {
    position: relative;
    padding: 80px 24px;
    min-height: 480px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pro-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 86, 179, 0.15), transparent);
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
}

.pro-hero-content {
    position: relative;
    z-index: 1;
    max-width: 680px;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    background: rgba(0, 86, 179, 0.1);
    border: 1px solid rgba(0, 86, 179, 0.2);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: #a5b4fc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

.badge-dot {
    width: 6px;
    height: 6px;
    background: #0056b3;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.hero-title {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
    color: #f4f4f5;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 16px;
}

.text-gradient {
    background: linear-gradient(135deg, #0069d9 0%, #0056b3 50%, #004494 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 18px;
    color: #a1a1aa;
    margin: 0 0 32px;
    line-height: 1.6;
}

/* Hero Search Form */
.pro-search-form {
    margin-bottom: 24px;
}

.search-input-wrapper {
    display: flex !important;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 6px;
    transition: all 0.2s ease;
}

.search-input-wrapper:focus-within {
    border-color: rgba(0, 86, 179, 0.5);
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.search-icon {
    width: 20px;
    height: 20px;
    color: #71717a;
    margin-left: 16px;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    color: #f4f4f5 !important;
    outline: none !important;
}

.search-input::placeholder {
    color: #71717a;
}

.search-btn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.search-btn:hover {
    background: linear-gradient(135deg, #0069d9 0%, #0056b3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4);
}

.search-btn svg {
    width: 18px;
    height: 18px;
}

/* Hero Quick Actions */
.hero-quick-actions {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.quick-action-link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: #a1a1aa;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.quick-action-link:hover {
    color: #f4f4f5;
    text-decoration: none;
}

.quick-action-link svg {
    width: 16px;
    height: 16px;
}

/* Sections */
.pro-section {
    padding: 64px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    color: #f4f4f5;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.section-subtitle {
    font-size: 16px;
    color: #71717a;
    margin: 0;
}

/* Products Grid */
.pro-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.pro-product-card {
    display: flex !important;
    flex-direction: column;
    padding: 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.pro-product-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.pro-product-card.featured {
    border-color: rgba(0, 86, 179, 0.3);
    background: rgba(0, 86, 179, 0.05);
}

.pro-product-card.featured:hover {
    border-color: rgba(0, 86, 179, 0.5);
    background: rgba(0, 86, 179, 0.08);
}

.product-icon {
    width: 48px;
    height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 86, 179, 0.1);
    border-radius: 12px;
    margin-bottom: 20px;
}

.product-icon svg {
    width: 24px;
    height: 24px;
    color: #0069d9;
}

.product-title {
    font-size: 18px;
    font-weight: 600;
    color: #f4f4f5;
    margin: 0 0 8px;
}

.product-desc {
    font-size: 14px;
    color: #71717a;
    margin: 0 0 20px;
    flex: 1;
}

.product-cta {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #0069d9;
    transition: gap 0.2s ease;
}

.pro-product-card:hover .product-cta {
    gap: 10px;
}

.product-cta svg {
    width: 16px;
    height: 16px;
}

/* Help Grid */
.pro-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.pro-help-card {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.pro-help-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.pro-help-card.featured {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.help-icon {
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.help-icon svg {
    width: 22px;
    height: 22px;
}

.help-icon.teal { background: rgba(20, 184, 166, 0.15); }
.help-icon.teal svg { color: #14b8a6; }

.help-icon.red { background: rgba(239, 68, 68, 0.15); }
.help-icon.red svg { color: #ef4444; }

.help-icon.yellow { background: rgba(245, 158, 11, 0.15); }
.help-icon.yellow svg { color: #f59e0b; }

.help-icon.gray { background: rgba(161, 161, 170, 0.15); }
.help-icon.gray svg { color: #a1a1aa; }

.help-icon.green { background: rgba(16, 185, 129, 0.15); }
.help-icon.green svg { color: #10b981; }

.help-content {
    flex: 1;
    min-width: 0;
}

.help-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: #f4f4f5;
    margin: 0 0 4px;
}

.help-content p {
    font-size: 13px;
    color: #71717a;
    margin: 0;
}

.help-arrow {
    width: 18px;
    height: 18px;
    color: #52525b;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.pro-help-card:hover .help-arrow {
    color: #a1a1aa;
    transform: translateX(4px);
}

/* Account Grid */
.pro-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.pro-account-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.pro-account-card:hover {
    background: rgba(0, 86, 179, 0.08);
    border-color: rgba(0, 86, 179, 0.2);
}

.pro-account-card svg {
    width: 28px;
    height: 28px;
    color: #71717a;
    transition: color 0.2s ease;
}

.pro-account-card:hover svg {
    color: #0069d9;
}

.pro-account-card span {
    font-size: 14px;
    font-weight: 500;
    color: #a1a1aa;
    text-align: center;
    transition: color 0.2s ease;
}

.pro-account-card:hover span {
    color: #f4f4f5;
}

/* ============================================
   34. INVOICE VIEW PAGE - DARK THEME
   ============================================ */

.invoice-container {
    background: var(--pd-canvas) !important;
    color: var(--pd-text-secondary) !important;
    min-height: 100vh;
    padding: 40px 20px;
}

.invoice-container .invoice-header {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--pd-border) !important;
}

.invoice-container h2,
.invoice-container h3 {
    color: var(--pd-text-primary) !important;
}

.invoice-container .invoice-status span {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.invoice-container .invoice-status .paid {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.invoice-container .invoice-status .unpaid {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.invoice-container .invoice-status .draft {
    background: rgba(161, 161, 170, 0.15);
    color: #a1a1aa;
    border: 1px solid rgba(161, 161, 170, 0.3);
}

.invoice-container .invoice-status .cancelled,
.invoice-container .invoice-status .refunded {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.invoice-container .invoice-col {
    color: var(--pd-text-secondary) !important;
}

.invoice-container .invoice-col strong {
    color: var(--pd-text-primary) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.invoice-container address,
.invoice-container .small-text {
    color: var(--pd-text-muted) !important;
    font-size: 14px;
    line-height: 1.6;
}

.invoice-container hr {
    border-color: var(--pd-border) !important;
    margin: 24px 0;
}

.invoice-container table {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 8px;
    overflow: hidden;
}

.invoice-container table thead {
    background: rgba(255, 255, 255, 0.02) !important;
}

.invoice-container table th {
    color: var(--pd-text-muted) !important;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--pd-border) !important;
}

.invoice-container table td {
    color: var(--pd-text-secondary) !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--pd-border) !important;
}

.invoice-container table tbody tr:last-child td {
    border-bottom: none !important;
}

.invoice-container table tfoot {
    background: rgba(255, 255, 255, 0.02) !important;
}

.invoice-container table tfoot td {
    font-weight: 600;
    color: var(--pd-text-primary) !important;
}

.invoice-container .payment-btn-container .btn {
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%) !important;
    border: none !important;
    padding: 12px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.invoice-container .payment-btn-container .btn:hover {
    background: linear-gradient(135deg, #0069d9 0%, #0056b3 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4);
}

/* Invoice Panel/Card */
.invoice-container .card {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 12px !important;
}

.invoice-container .card-header {
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid var(--pd-border) !important;
    color: var(--pd-text-primary) !important;
}

.invoice-container .card-body {
    background: transparent !important;
}

/* ============================================
   35. CART & CHECKOUT - PREMIUM STYLING
   ============================================ */

/* Store Container */
.store-order-container {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 16px !important;
    padding: 32px !important;
}

.store-order-container h2 {
    color: var(--pd-text-primary) !important;
    font-weight: 600;
    margin-bottom: 12px;
}

.store-order-container h4 {
    color: var(--pd-text-primary) !important;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 16px;
}

.store-order-container p {
    color: var(--pd-text-muted) !important;
}

/* Payment Term Select */
.payment-term {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    padding: 20px;
}

.payment-term h4 {
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pd-text-muted) !important;
    margin-bottom: 12px !important;
}

.payment-term select {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 8px !important;
    color: var(--pd-text-primary) !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
}

/* Domain Tabs */
.store-domain-tabs.nav-tabs {
    border-bottom: none !important;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--pd-border);
    border-radius: 12px 12px 0 0;
    padding: 8px;
    gap: 4px;
}

.store-domain-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--pd-text-muted) !important;
    font-weight: 500;
    transition: all 0.15s ease;
}

.store-domain-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--pd-text-secondary) !important;
}

.store-domain-tabs .nav-link.active {
    background: var(--pd-accent-muted) !important;
    color: var(--pd-accent-hover) !important;
}

.store-domain-tab-content {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 24px !important;
}

/* Cart Sidebar */
.order-summary,
.cart-sidebar {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

.order-summary h4,
.cart-sidebar h4 {
    color: var(--pd-text-primary) !important;
    font-weight: 600;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pd-border);
    margin-bottom: 16px;
}

/* Cart Items */
.cart-item {
    display: flex !important;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--pd-border);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-name {
    color: var(--pd-text-secondary);
    font-weight: 500;
}

.cart-item-price {
    color: var(--pd-text-primary);
    font-weight: 600;
}

/* Cart Total */
.cart-total {
    display: flex !important;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--pd-border);
}

.cart-total-label {
    color: var(--pd-text-muted);
    font-weight: 500;
}

.cart-total-amount {
    color: var(--pd-text-primary);
    font-size: 20px;
    font-weight: 700;
}

/* Checkout Button */
.btn-checkout,
.order-btn {
    display: block;
    width: 100%;
    padding: 14px 24px !important;
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    margin-top: 16px;
}

.btn-checkout:hover,
.order-btn:hover {
    background: linear-gradient(135deg, #0069d9 0%, #0056b3 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4);
    color: #fff !important;
}

/* Promo Code Input */
.promo-code-form {
    display: flex !important;
    gap: 8px;
    margin-top: 16px;
}

.promo-code-form input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    color: var(--pd-text-primary) !important;
}

.promo-code-form button {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    color: var(--pd-text-secondary) !important;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.promo-code-form button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--pd-text-primary) !important;
}

/* ============================================
   36. ANNOUNCEMENTS - DARK THEME
   ============================================ */

.announcement-single {
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    margin-bottom: 24px;
}

.announcement-single h3 {
    color: var(--pd-text-primary) !important;
    font-weight: 600;
    margin-bottom: 8px;
}

.announcement-single .date {
    color: var(--pd-text-muted) !important;
    font-size: 13px;
    margin-bottom: 20px;
}

.announcement-single .content {
    color: var(--pd-text-secondary) !important;
    line-height: 1.7;
}

/* Announcement List */
.announcement-item {
    display: block;
    padding: 24px;
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    margin-bottom: 16px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.announcement-item:hover {
    border-color: var(--pd-border-hover);
    background: var(--pd-surface-hover);
}

.announcement-item h4 {
    color: var(--pd-text-primary) !important;
    font-weight: 600;
    margin-bottom: 8px;
}

.announcement-item .date {
    color: var(--pd-text-muted);
    font-size: 12px;
}

/* ============================================
   37. KNOWLEDGE BASE - DARK THEME
   ============================================ */

.kb-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.kb-category-card {
    display: block;
    padding: 28px;
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.kb-category-card:hover {
    border-color: var(--pd-accent);
    background: rgba(0, 86, 179, 0.05);
}

.kb-category-card h4 {
    color: var(--pd-text-primary) !important;
    font-weight: 600;
    margin-bottom: 8px;
}

.kb-category-card p {
    color: var(--pd-text-muted);
    font-size: 14px;
    margin: 0;
}

.kb-article-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kb-article-list li {
    border-bottom: 1px solid var(--pd-border);
}

.kb-article-list li:last-child {
    border-bottom: none;
}

.kb-article-list a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    color: var(--pd-text-secondary) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.kb-article-list a:hover {
    color: var(--pd-text-primary) !important;
}

.kb-article-list a::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--pd-accent);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ============================================
   38. RESPONSIVE ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
    .pro-hero {
        padding: 60px 16px;
        min-height: auto;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .search-input-wrapper {
        flex-direction: column;
        padding: 8px;
        border-radius: 12px;
    }
    
    .search-icon {
        display: none;
    }
    
    .search-input {
        width: 100%;
        text-align: center;
    }
    
    .search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero-quick-actions {
        flex-direction: column;
        gap: 12px;
    }
    
    .pro-section {
        padding: 40px 16px;
    }
    
    .section-title {
        font-size: 22px;
    }
    
    .pro-products-grid,
    .pro-help-grid {
        grid-template-columns: 1fr;
    }
    
    .pro-account-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .store-order-container {
        padding: 20px !important;
    }
}

/* ============================================
   39. ADDITIONAL POLISH & ANIMATIONS
   ============================================ */

/* Smooth focus transitions */
*:focus-visible {
    outline: 2px solid var(--pd-accent);
    outline-offset: 2px;
}

/* Card hover lift effect */
.pro-product-card,
.pro-help-card,
.pro-account-card {
    will-change: transform;
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--pd-surface) 0%,
        var(--pd-surface-hover) 50%,
        var(--pd-surface) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

/* Fade in animation */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

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

/* Button ripple effect */
.btn-primary:active::after,
.search-btn:active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: inherit;
    animation: ripple 0.3s ease-out;
}

@keyframes ripple {
    from { transform: scale(0); opacity: 1; }
    to { transform: scale(2); opacity: 0; }
}

/* ================================================
   FIX: Loading States & DataTables
   ================================================ */

/* Ensure tables show immediately when DataTables loads */
#tableServicesList,
#tableDomainsList,
#tableDomainPricing,
#tableInvoicesList,
#tableTicketsList,
.table-list {
    display: table !important;
    opacity: 1;
    visibility: visible;
}

/* Hide loading spinner once table is visible */
.dataTables_wrapper + #tableLoading,
table.dataTable ~ #tableLoading,
#tableLoading:has(+ .dataTables_wrapper) {
    display: none !important;
}

/* Force hide loading after short delay */
#tableLoading {
    animation: hideLoading 1s forwards;
}

@keyframes hideLoading {
    0% { opacity: 1; display: block; }
    90% { opacity: 1; display: block; }
    100% { opacity: 0; display: none; visibility: hidden; }
}

/* DataTables wrapper styling */
.dataTables_wrapper {
    padding: 0;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: 12px 16px;
    background: var(--pd-bg-secondary);
    border-top: 1px solid var(--pd-border);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--pd-bg-primary);
    border: 1px solid var(--pd-border);
    color: var(--pd-text-primary);
    border-radius: 6px;
    padding: 6px 12px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--pd-accent-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--pd-bg-primary) !important;
    border: 1px solid var(--pd-border) !important;
    color: var(--pd-text-primary) !important;
    padding: 6px 12px !important;
    margin: 0 2px;
    border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--pd-bg-tertiary) !important;
    border-color: var(--pd-accent-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--pd-accent-primary) !important;
    border-color: var(--pd-accent-primary) !important;
    color: white !important;
}

/* ================================================
   FIX: Logo Sizing Consistency
   ================================================ */

/* Main navbar logo */
.navbar-brand img,
.navbar-brand .logo-img,
header .logo img,
.main-header .logo img {
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Sidebar/mobile menu logo */
.sidebar-brand img,
.offcanvas .logo img,
.mobile-menu .logo img {
    max-height: 36px !important;
    width: auto !important;
}

/* Login page logo */
.login-container .logo img,
.login-logo img,
.auth-logo img,
#login .logo img,
.client-login .logo img {
    max-height: 60px !important;
    width: auto !important;
    filter: brightness(0) invert(1);
    margin-bottom: 24px;
}

/* Admin login logo */
.admin-login .logo img,
#adminlogin .logo img {
    max-height: 50px !important;
    width: auto !important;
    filter: brightness(0) invert(1);
}

/* Footer logo */
footer .logo img,
.footer-logo img,
.site-footer .logo img {
    max-height: 38px !important;
    width: auto !important;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Shopping cart header logo */
.order-header .logo img,
.cart-header .logo img,
.checkout-header .logo img {
    max-height: 40px !important;
    width: auto !important;
    filter: brightness(0) invert(1);
}

/* ================================================
   FIX: Domain Pricing Page - Remove Yellow Blob
   ================================================ */

/* Remove any yellow/orange spotlight effects */
.domain-checker-container::before,
.domain-checker-container::after,
.domainchecker-homepage::before,
.domainchecker-homepage::after,
.domain-search::before,
.domain-search::after,
.spotlight,
.spotlight-effect,
.hero-glow,
.hero-spotlight {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* Clean domain pricing page header */
.domain-pricing-page .pricing-header {
    background: linear-gradient(135deg, var(--pd-bg-secondary) 0%, var(--pd-bg-primary) 100%);
    padding: 48px 24px;
    text-align: center;
    border-radius: 16px;
    margin-bottom: 32px;
    border: 1px solid var(--pd-border);
}

.domain-pricing-page .pricing-header .header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 86, 179, 0.15);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 13px;
    color: var(--pd-accent-primary);
    margin-bottom: 16px;
}

.domain-pricing-page .pricing-header .header-badge svg {
    width: 18px;
    height: 18px;
}

.domain-pricing-page .pricing-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--pd-text-primary);
    margin: 0 0 8px 0;
}

.domain-pricing-page .pricing-subtitle {
    color: var(--pd-text-secondary);
    font-size: 16px;
    margin: 0;
}

/* Featured TLDs grid */
.featured-tlds-grid {
    margin-bottom: 32px;
}

.featured-tlds-grid .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--pd-text-primary);
    margin-bottom: 16px;
}

.featured-tlds-grid .tlds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.featured-tld-card {
    background: var(--pd-bg-secondary);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: var(--pd-transition-base);
}

.featured-tld-card:hover {
    border-color: var(--pd-accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.featured-tld-card .tld-badge {
    font-size: 22px;
    font-weight: 700;
    color: var(--pd-accent-primary);
    margin-bottom: 8px;
}

.featured-tld-card .tld-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--pd-text-primary);
}

.featured-tld-card .tld-period {
    display: block;
    font-size: 12px;
    color: var(--pd-text-muted);
}

.featured-tld-card .btn-register-tld {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 20px;
    background: var(--pd-accent-primary);
    color: white;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--pd-transition-base);
}

.featured-tld-card .btn-register-tld:hover {
    background: var(--pd-accent-primary-hover);
    transform: scale(1.05);
}

/* Pricing controls */
.pricing-controls {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--pd-border);
    margin-bottom: 16px;
}

.all-extensions-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--pd-text-primary);
    margin: 0;
}

.currency-selector {
    background: var(--pd-bg-secondary);
    border: 1px solid var(--pd-border);
    color: var(--pd-text-primary);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

/* TLD filter buttons */
.tld-filters-bar {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0;
    margin-bottom: 16px;
}

.tld-filters-bar .filter-btn {
    background: var(--pd-bg-secondary);
    border: 1px solid var(--pd-border);
    color: var(--pd-text-primary);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 13px;
    cursor: pointer;
    transition: var(--pd-transition-base);
}

.tld-filters-bar .filter-btn:hover {
    border-color: var(--pd-accent-primary);
    color: var(--pd-accent-primary);
}

.tld-filters-bar .filter-btn.active {
    background: var(--pd-accent-primary);
    border-color: var(--pd-accent-primary);
    color: white;
}

.tld-filters-bar .filter-btn .count {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 11px;
    margin-left: 6px;
}

.tld-filters-bar .filter-btn.active .count {
    background: rgba(255, 255, 255, 0.3);
}

/* Pricing table */
.pricing-table-container {
    background: var(--pd-bg-secondary);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    overflow: hidden;
}

#tableDomainPricing,
.pricing-table {
    width: 100%;
    border-collapse: collapse;
}

#tableDomainPricing thead th,
.pricing-table thead th {
    background: var(--pd-bg-tertiary);
    padding: 14px 16px;
    font-weight: 600;
    font-size: 13px;
    color: var(--pd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--pd-border);
}

#tableDomainPricing tbody td,
.pricing-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pd-border);
    color: var(--pd-text-primary);
    font-size: 14px;
}

#tableDomainPricing tbody tr:hover,
.pricing-table tbody tr:hover {
    background: rgba(0, 86, 179, 0.05);
}

#tableDomainPricing .col-tld,
.pricing-table .col-tld {
    font-weight: 600;
    color: var(--pd-accent-primary);
}

/* ================================================
   FIX: Support Tickets Page
   ================================================ */

#tableTicketsList {
    display: table !important;
}

.support-tickets-page .empty-state,
.tickets-empty {
    text-align: center;
    padding: 60px 20px;
}

.support-tickets-page .empty-state i,
.tickets-empty i {
    font-size: 48px;
    color: var(--pd-text-muted);
    margin-bottom: 16px;
}

/* ================================================
   FIX: Remove Duplicate Headers in Cart
   ================================================ */

/* Ensure only one header is visible */
body.loggedin .main-header + .main-header,
.header-duplicate,
#main-body > header:not(:first-of-type) {
    display: none !important;
}

/* Cart page specific fixes */
.cart-body .domain-checker-container,
.cart-body .domainchecker-homepage {
    background: none !important;
}

/* Remove spotlight from cart */
.cart-body::before,
.cart-body::after,
.order-body::before,
.order-body::after {
    display: none !important;
}

/* ================================================
   FIX: Services Page Stats Bar
   ================================================ */

.services-stats-bar,
.domain-stats-bar {
    background: var(--pd-bg-secondary);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    padding: 20px;
}

.services-stats-bar .stat-item,
.domain-stats-bar .stat-item {
    text-align: center;
    padding: 8px;
}

.services-stats-bar .stat-label,
.domain-stats-bar .stat-label {
    display: block;
    font-size: 12px;
    color: var(--pd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.services-stats-bar .stat-value,
.domain-stats-bar .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--pd-text-primary);
}

/* ================================================
   FIX: Empty State Messages
   ================================================ */

.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--pd-bg-secondary);
    border-radius: 12px;
}

.empty-state i,
.empty-state svg {
    font-size: 48px;
    color: var(--pd-text-muted);
    margin-bottom: 16px;
}

.empty-state h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--pd-text-primary);
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--pd-text-secondary);
    margin-bottom: 20px;
}

/* ================================================
   FIX: Card Styling Consistency
   ================================================ */

.table-container.card,
.card {
    background: var(--pd-bg-secondary);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    overflow: hidden;
}

.card-header {
    background: var(--pd-bg-tertiary);
    border-bottom: 1px solid var(--pd-border);
    padding: 16px 20px;
}

.card-header h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pd-text-primary);
    margin: 0;
}

.card-header h5 i {
    color: var(--pd-accent-primary);
}

.card-body {
    background: var(--pd-bg-secondary);
}

/* ================================================
   FIX: Button Styling in Tables
   ================================================ */

.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--pd-accent-primary);
    color: var(--pd-accent-primary);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    transition: var(--pd-transition-base);
}

.btn-outline-primary:hover {
    background: var(--pd-accent-primary);
    color: white;
}

.btn-primary.btn-sm {
    background: var(--pd-accent-primary);
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 6px;
}

.btn-primary.btn-sm:hover {
    background: var(--pd-accent-primary-hover);
}


/* ================================================
   Support Stats Bar
   ================================================ */

.support-stats-bar {
    background: var(--pd-bg-secondary);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    padding: 20px;
}

.support-stats-bar .stat-item {
    text-align: center;
    padding: 8px;
}

.support-stats-bar .stat-label {
    display: block;
    font-size: 12px;
    color: var(--pd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.support-stats-bar .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--pd-text-primary);
}

/* ================================================
   Additional Table Fixes
   ================================================ */

/* Force visibility of DataTables */
table.dataTable {
    display: table !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* DataTables responsive fixes */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--pd-accent-primary) !important;
}

/* Search input in DataTables */
.dataTables_filter input {
    background: var(--pd-bg-primary) !important;
    border: 1px solid var(--pd-border) !important;
    color: var(--pd-text-primary) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    min-width: 200px;
}

.dataTables_filter input::placeholder {
    color: var(--pd-text-muted);
}

/* DataTables info text */
.dataTables_info {
    color: var(--pd-text-secondary) !important;
    font-size: 13px;
}

/* ================================================
   View Filter Buttons (Sidebar)
   ================================================ */

.view-filter-btns .list-group-item {
    background: var(--pd-bg-secondary);
    border: 1px solid var(--pd-border);
    color: var(--pd-text-primary);
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: 8px;
    transition: var(--pd-transition-base);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.view-filter-btns .list-group-item:hover {
    background: var(--pd-bg-tertiary);
    border-color: var(--pd-accent-primary);
}

.view-filter-btns .list-group-item.active {
    background: rgba(0, 86, 179, 0.15);
    border-color: var(--pd-accent-primary);
    color: var(--pd-accent-primary);
}

.view-filter-btns .list-group-item i {
    color: var(--pd-text-muted);
    margin-right: 10px;
}

.view-filter-btns .list-group-item.active i {
    color: var(--pd-accent-primary);
}

.view-filter-btns .badge {
    background: var(--pd-bg-tertiary);
    color: var(--pd-text-primary);
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
}

/* ================================================
   Actions Sidebar
   ================================================ */

.panel-sidebar .panel-heading,
.sidebar-actions .panel-heading {
    background: var(--pd-bg-tertiary);
    border-bottom: 1px solid var(--pd-border);
    padding: 14px 16px;
    font-weight: 600;
    color: var(--pd-text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-sidebar .list-group-item,
.sidebar-actions .list-group-item {
    background: var(--pd-bg-secondary);
    border: none;
    border-bottom: 1px solid var(--pd-border);
    color: var(--pd-text-primary);
    padding: 12px 16px;
    transition: var(--pd-transition-base);
}

.panel-sidebar .list-group-item:hover,
.sidebar-actions .list-group-item:hover {
    background: var(--pd-bg-tertiary);
    color: var(--pd-accent-primary);
}

.panel-sidebar .list-group-item i,
.sidebar-actions .list-group-item i {
    width: 20px;
    color: var(--pd-accent-primary);
    margin-right: 10px;
}

/* ================================================
   Responsive Fixes
   ================================================ */

@media (max-width: 768px) {
    .services-stats-bar .stat-value,
    .domain-stats-bar .stat-value,
    .support-stats-bar .stat-value {
        font-size: 22px;
    }
    
    .services-stats-bar .stat-label,
    .domain-stats-bar .stat-label,
    .support-stats-bar .stat-label {
        font-size: 11px;
    }
    
    .navbar-brand img,
    .navbar-brand .logo-img {
        max-height: 36px !important;
    }
    
    .featured-tlds-grid .tlds-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================
   Alert Fixes
   ================================================ */

.alert {
    background: var(--pd-bg-secondary);
    border: 1px solid var(--pd-border);
    border-radius: 10px;
    padding: 16px 20px;
    color: var(--pd-text-primary);
}

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

.alert-warning .text-warning {
    color: #f59e0b !important;
}

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

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

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}


/* ================================================
   FIX: Hide Homepage Loading Spinners
   ================================================ */

/* WHMCS default loading overlay - hide on homepage */
body.homepage #fullpage-overlay,
.homepage #fullpage-overlay,
.homepage .loading-overlay,
.homepage .page-loader {
    display: none !important;
}

/* Generic spinner classes - hide when unnecessary */
.spinner-border,
.spinner-grow,
.loading-spinner:not(.active),
.ajax-loader:not(.show) {
    display: none !important;
}

/* Hide fa-spin when not inside a button or active context */
i.fa-spin:only-child,
i.fa-spinner:only-child {
    display: none;
}

/* Ensure fullpage-overlay stays hidden */
#fullpage-overlay.w-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Force content to show immediately */
body {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Page content animation should complete immediately if stuck */
.page-content,
.main-content,
#main-body,
main {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Hide any rogue CSS spinners */
@keyframes none-animation { from { } to { } }

/* Domain search area - never show loading */
.domain-search-section .loading,
.domain-search-box .spinner,
.featured-tlds .loading {
    display: none !important;
}

/* Ensure TLD items are visible even if empty */
.featured-tlds .tlds-list {
    min-height: 40px;
}


/* CRITICAL: Force hide fullpage-overlay regardless of class state */
#fullpage-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* Ensure main content is always visible */
#main-body,
.main-content,
section.pro-section,
.container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide any SVG spinner animations */
img[src*='spinner'],
img[src*='overlay-spinner'] {
    display: none !important;
}

/* ============================================
   NAVBAR & HEADER VISIBILITY FIXES
   ============================================ */

/* Main navigation menu - improve visibility */
.navbar-nav .nav-link,
.primary-navbar .nav-link,
.main-menu .nav-link,
nav .nav-link {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
}

.navbar-nav .nav-link:hover,
.primary-navbar .nav-link:hover,
nav .nav-link:hover {
    color: var(--pd-accent, #0056b3) !important;
    background: rgba(0, 86, 179, 0.1) !important;
    border-radius: 6px !important;
}

/* Account dropdown visibility */
.navbar-nav .dropdown-toggle,
.account-dropdown .dropdown-toggle,
#Secondary_Navbar-Account {
    color: #ffffff !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* Fix shopping cart position - should be in navbar, not floating */
.header-cart,
.cart-icon,
.navbar .btn-cart,
a[href*='cart.php'] .fa-shopping-cart,
.navbar .fa-shopping-cart {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
}

/* Cart button styling */
.btn-cart,
.cart-btn,
a.btn[href*='cart.php'] {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center !important;
    gap: 0.5rem !important;
    position: relative !important;
    float: none !important;
    margin: 0 !important;
}

.btn-cart:hover,
.cart-btn:hover {
    background: rgba(0, 86, 179, 0.15) !important;
    border-color: var(--pd-accent, #0056b3) !important;
    color: var(--pd-accent, #0056b3) !important;
}

/* Fix header layout */
.header-wrapper,
.navbar-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Search box in header - proper sizing */
.navbar .form-control,
.header-search input,
#inputDomainSearch,
input[placeholder*='knowledgebase'],
input[placeholder*='Search'] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 8px 0 0 8px !important;
    padding: 0.6rem 1rem !important;
    max-width: 300px !important;
}

.navbar .form-control:focus,
.header-search input:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--pd-accent, #0056b3) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
}

/* Search button */
.navbar .btn-primary,
.header-search .btn,
button[type='submit'].btn-primary {
    background: var(--pd-accent, #0056b3) !important;
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 0.6rem 1rem !important;
}

/* Navbar background */
.navbar,
.primary-navbar,
nav.navbar {
    background: rgba(2, 6, 23, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0.5rem 0 !important;
}

/* Secondary navbar / menu bar */
.secondary-navbar,
.navbar-secondary,
.menu-bar {
    background: rgba(8, 14, 35, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background: #1a1a1c !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 0.5rem !important;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.6rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.dropdown-item:hover {
    background: rgba(0, 86, 179, 0.15) !important;
    color: #ffffff !important;
}

/* Breadcrumb visibility */
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.breadcrumb-item.active {
    color: var(--pd-accent, #0056b3) !important;
}

/* Portal Home text */
.page-title,
h1.page-title,
.portal-home {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ============================================
   HEADER LAYOUT FIX - Cart & Search Alignment
   ============================================ */

/* Top header bar - logo, search, cart */
.navbar.navbar-light {
    background: rgba(2, 6, 23, 0.98) !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.navbar.navbar-light .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

/* Logo */
.navbar-brand {
    flex-shrink: 0 !important;
}

.navbar-brand .logo-img {
    max-height: 45px !important;
    width: auto !important;
}

/* Search form - center it properly */
.navbar.navbar-light .form-inline {
    flex: 0 1 400px !important;
    margin: 0 2rem !important;
}

.navbar.navbar-light .input-group.search {
    width: 100% !important;
}

/* Cart toolbar - keep on right */
.navbar-nav.toolbar {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin-left: 1rem !important;
}

.navbar-nav.toolbar .nav-item {
    margin: 0 !important;
}

.navbar-nav.toolbar .cart-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    padding: 0.5rem 1rem !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.navbar-nav.toolbar .cart-btn:hover {
    background: rgba(0, 86, 179, 0.15) !important;
    border-color: var(--pd-accent, #0056b3) !important;
    color: var(--pd-accent, #0056b3) !important;
}

.navbar-nav.toolbar .cart-btn .badge {
    background: #ef4444 !important;
    color: white !important;
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 50px !important;
}

/* Main navigation bar */
.main-navbar-wrapper {
    background: rgba(8, 14, 35, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0 !important;
}

.main-navbar-wrapper .navbar-nav {
    display: flex !important;
    align-items: center !important;
}

/* Menu items - IMPROVED VISIBILITY */
.main-navbar-wrapper .nav-link,
#nav .nav-link,
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    padding: 1rem 1.25rem !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    text-shadow: none !important;
}

.main-navbar-wrapper .nav-link:hover,
#nav .nav-link:hover {
    color: #ffffff !important;
    background: rgba(0, 86, 179, 0.1) !important;
}

/* Active menu item */
.main-navbar-wrapper .nav-item.active .nav-link,
#nav .nav-item.active .nav-link {
    color: var(--pd-accent, #0056b3) !important;
    background: rgba(0, 86, 179, 0.08) !important;
}

/* Account dropdown - right side */
.main-navbar-wrapper .navbar-nav.ml-auto .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.main-navbar-wrapper .navbar-nav.ml-auto .nav-link:hover {
    color: #ffffff !important;
}

/* Dropdown caret */
.nav-link .caret,
.nav-link::after {
    opacity: 0.7 !important;
}

/* Store dropdown visibility */
.dropdown-toggle::after {
    margin-left: 0.5em !important;
    border-top-color: currentColor !important;
}

/* ============================================
   LOGO SIZING - CONSISTENT ACROSS ALL PAGES
   ============================================ */

/* Client/User Login Page Logo - Make it bigger */
.login-container .logo img,
.login-logo img,
body.login-page .logo img,
#login .logo img,
.auth-container .logo img {
    max-width: 280px !important;
    width: auto !important;
    height: auto !important;
    max-height: 100px !important;
}

/* Navbar logo - consistent size */
.navbar-brand .logo-img,
.navbar-brand img,
header .logo-img {
    max-height: 50px !important;
    width: auto !important;
}

/* ============================================
   USER LOGIN PAGE - LOGO FIX
   ============================================ */

/* Brand logo on user login page - make it appropriately sized */
.login-page-wrapper .brand-logo,
.login-branding-panel .brand-logo,
.login-container .brand-logo {
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
    margin-bottom: 2rem !important;
}

/* Login form logo if present */
.login-form-panel .logo img,
.login-form .logo img {
    max-width: 200px !important;
    height: auto !important;
}

/* Brand text fallback */
.brand-logo-text {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
}

/* ============================================
   MENU ITEMS - ALL SAME VISIBILITY
   ============================================ */

/* Make ALL menu items equally visible including Home and Open Ticket */
.main-navbar-wrapper .nav-link,
.main-navbar-wrapper .navbar-nav .nav-link,
#nav .nav-link,
#nav > li > a,
.navbar-nav > li > a,
.navbar-nav .nav-item > .nav-link,
ul.navbar-nav li.nav-item a.nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* Specifically target Home link */
.navbar-nav .nav-item:first-child .nav-link,
#nav li:first-child a,
a.nav-link[href*='index.php'],
a.nav-link[href*='clientarea.php']:not([href*='action']) {
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
}

/* Target Open Ticket link */
a.nav-link[href*='submitticket'],
a.nav-link[href*='openticket'],
.navbar-nav a[href*='submitticket.php'] {
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
}

/* Hover state for all menu items */
.main-navbar-wrapper .nav-link:hover,
#nav .nav-link:hover,
.navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background: rgba(0, 86, 179, 0.15) !important;
}

/* ============================================
   FIX DUPLICATE NOTIFICATION BARS
   ============================================ */

/* Hide the first/duplicate notification bar */
.client-alerts:first-of-type,
.notifications-wrapper:first-of-type,
header + .alert-wrapper,
.topbar-notifications {
    /* Keep only one notification bar */
}

/* Style the notification bar properly */
.client-alerts,
.notifications-area,
.alert-notifications {
    background: rgba(15, 15, 17, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0.5rem 0 !important;
}

/* Notification text */
.client-alerts .alert,
.notifications-area .notification-item {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
}

/* Bell icon and  No Notifications text */
.notification-icon,
.fa-bell {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Add Funds button */
.btn-add-funds,
a[href*='addfunds'] .btn {
    background: linear-gradient(135deg, #0056b3 0%, #004a9e 100%) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.85rem !important;
}

/* ============================================
   TOPBAR & NOTIFICATION FIXES
   ============================================ */

/* Ensure only ONE topbar notification area shows */
.topbar {
    background: rgba(12, 12, 14, 0.98) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 0.5rem 0 !important;
}

/* Hide any duplicate notification/alert bars showing twice */
.topbar + .topbar,
.topbar + .client-alerts-wrapper,
.header > .alert:first-child,
.breadcrumb-wrapper + .topbar {
    display: none !important;
}

/* Notification button styling */
#accountNotifications {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.875rem !important;
}

#accountNotifications:hover {
    color: #ffffff !important;
}

#accountNotifications .fa-bell {
    color: inherit !important;
}

/*  No Notifications text */
#accountNotifications span {
    color: inherit !important;
}

/* Green checkmark notification text */
.topbar .text-success,
.client-alerts .text-success {
    color: #22c55e !important;
}

/* Notification content popover */
#accountNotificationsContent,
.client-alerts {
    background: #1a1a1c !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.client-alerts li {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.client-alerts li:last-child {
    border-bottom: none !important;
}

.client-alerts li.none {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Logged in as section */
.topbar .logged-in-as,
.topbar .d-flex {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* User name */
.topbar a[href*='clientarea'],
.topbar .user-name {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* ============================================
   FIX DUPLICATE NOTIFICATION - HIDE POPUP
   ============================================ */

/* Hide the notification content popup when not active */
#accountNotificationsContent {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
}

/* Only show when popover is triggered */
#accountNotificationsContent.show,
#accountNotificationsContent.popover-body,
.popover #accountNotificationsContent,
.popover-body #accountNotificationsContent {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: auto !important;
}

/* The notification content box that's appearing - hide it */
.topbar .client-alerts:not(.popover-body .client-alerts),
.topbar > .container > .d-flex > div > .client-alerts,
#accountNotificationsContent.w-hidden {
    display: none !important;
}

/* Ensure popover works when clicked */
.popover {
    background: #1a1a1c !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.popover .popover-body {
    padding: 0 !important;
}

.popover .popover-body .client-alerts {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.popover .client-alerts li {
    padding: 0.75rem 1rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.popover .client-alerts li.none {
    display: flex !important;
    align-items: center !important;
}

/* Popover arrow */
.popover .arrow::before,
.popover .arrow::after {
    border-bottom-color: #1a1a1c !important;
}

/* ============================================
   SEARCH BAR ICON FIX
   ============================================ */

/* Search input group */
.input-group.search,
.navbar .input-group.search {
    border-radius: 10px !important;
    overflow: hidden !important;
}

.input-group.search .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: none !important;
    color: #ffffff !important;
    padding: 0.6rem 1rem !important;
}

.input-group.search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.input-group.search .btn,
.input-group.search .btn-primary {
    background: var(--pd-accent, #0056b3) !important;
    border: 1px solid var(--pd-accent, #0056b3) !important;
    color: #ffffff !important;
    padding: 0.6rem 1rem !important;
}

.input-group.search .btn i,
.input-group.search .btn .fa-search {
    color: #ffffff !important;
}

/* ============================================
   MAIN CONTENT AREA - DARK THEME
   ============================================ */

/* Stats cards row */
.stats-row,
.service-stats,
.card-deck,
.stats-container,
.row > .col-md-3 .card,
.stats-wrapper {
    background: transparent !important;
}

/* Individual stat cards */
.stat-card,
.stats-row .card,
.service-stats .stat,
div[class*='col'] > .card:not(.panel) {
    background: rgba(22, 22, 24, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

/* Stats numbers and labels */
.stat-card .stat-value,
.stats-row .h3,
.stats-row h3,
.service-stats .number {
    color: #ffffff !important;
}

.stat-card .stat-label,
.stats-row small,
.stats-row .text-muted,
.service-stats .label {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Main content panels/cards */
.card,
.panel,
.content-card,
.main-content .card,
.primary-content .card,
#main-body .card {
    background: #161618 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Card headers */
.card-header,
.panel-heading,
.card .card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    padding: 1rem 1.25rem !important;
}

.card-header h3,
.card-header .card-title,
.panel-heading h3 {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Card body */
.card-body,
.panel-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 1.25rem !important;
}

/* Tables inside cards */
.card .table,
.panel .table,
.table {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.table thead th,
.table th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    padding: 0.875rem 1rem !important;
}

.table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 0.875rem 1rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    vertical-align: middle !important;
}

.table tbody tr:hover {
    background: rgba(0, 86, 179, 0.05) !important;
}

/* Empty state / No Services Yet */
.empty-state,
.no-results,
.text-center.py-5,
.card-body .text-center,
.table-responsive + .text-center,
div:has(> .fa-box-open),
.empty-message {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.empty-state h4,
.empty-state h5,
.no-results h4 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.empty-state p,
.no-results p {
    color: rgba(255, 255, 255, 0.4) !important;
}

.empty-state svg,
.empty-state i,
.no-results i {
    color: rgba(255, 255, 255, 0.2) !important;
    opacity: 0.5 !important;
}

/* Order New Service button */
.btn-order,
a[href*='cart.php'].btn,
.btn-primary:not(.btn-sm) {
    background: linear-gradient(135deg, #0056b3 0%, #004a9e 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 0.6rem 1.25rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-order:hover,
a[href*='cart.php'].btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 86, 179, 0.3) !important;
}

/* Sidebar filter panel */
.sidebar .card,
.filter-panel,
.panel-sidebar,
aside .card {
    background: #161618 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   SPECIFIC PAGE CONTENT FIXES
   ============================================ */

/* Services page stats */
.services-overview,
.domain-stats,
.billing-stats {
    background: transparent !important;
}

/* The white box in  No Services Yet area */
.card-body > div,
.panel-body > div {
    background: transparent !important;
}

/* Any remaining white backgrounds */
.bg-white,
.bg-light,
[style*='background: white'],
[style*='background: #fff'],
[style*='background-color: white'],
[style*='background-color: #fff'] {
    background: #161618 !important;
}

/* Table container */
.table-responsive {
    background: transparent !important;
    border-radius: 0 0 12px 12px !important;
}

/* ============================================
   SERVICES/PRODUCTS PAGE - FORCE DARK THEME
   ============================================ */

/* Stats bar */
.services-stats-bar {
    background: transparent !important;
}

.services-stats-bar .stat-item {
    background: rgba(22, 22, 24, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    text-align: center !important;
}

.services-stats-bar .stat-label {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
}

.services-stats-bar .stat-value {
    color: #ffffff !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
}

/* Table container card - FORCE DARK */
.table-container,
.table-container.card,
div.table-container,
.card.table-container {
    background: #161618 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Card body inside table container */
.table-container .card-body,
.table-container > .card-body,
.card .card-body {
    background: #161618 !important;
    padding: 0 !important;
}

/* DataTables wrapper */
.dataTables_wrapper,
div.dataTables_wrapper,
#tableServicesList_wrapper,
#tableDomainsList_wrapper,
#tableTicketsList_wrapper,
[id$='_wrapper'] {
    background: #161618 !important;
}

/* The actual table */
table.table,
table.dataTable,
table.table-list,
#tableServicesList,
#tableDomainsList,
#tableTicketsList {
    background: #161618 !important;
    border-collapse: collapse !important;
}

/* Table header row */
table thead,
table.dataTable thead,
.table thead {
    background: rgba(30, 30, 34, 0.95) !important;
}

table thead th,
table.dataTable thead th,
.table thead th {
    background: rgba(30, 30, 34, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Table body */
table tbody,
table.dataTable tbody,
.table tbody {
    background: #161618 !important;
}

table tbody tr,
table.dataTable tbody tr,
.table tbody tr {
    background: #161618 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

table tbody tr:hover,
table.dataTable tbody tr:hover {
    background: rgba(0, 86, 179, 0.08) !important;
}

table tbody td,
table.dataTable tbody td,
.table tbody td {
    background: transparent !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Empty table message / No results */
.dataTables_empty,
td.dataTables_empty,
.table tbody .dataTables_empty {
    background: #161618 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 3rem !important;
    text-align: center !important;
}

/* DataTables info and pagination */
.dataTables_info {
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 1rem !important;
}

.dataTables_paginate {
    padding: 1rem !important;
}

.dataTables_paginate .paginate_button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
}

.dataTables_paginate .paginate_button:hover {
    background: rgba(0, 86, 179, 0.2) !important;
    border-color: var(--pd-accent) !important;
    color: #ffffff !important;
}

.dataTables_paginate .paginate_button.current {
    background: var(--pd-accent, #0056b3) !important;
    border-color: var(--pd-accent, #0056b3) !important;
    color: #ffffff !important;
}

/* Listtable div (wrapper from DataTables dom) */
.listtable {
    background: #161618 !important;
}

/* Empty state with Browse Services button */
.empty-result,
.no-services,
.w-hidden + div,
tbody:empty + *,
.table + .text-center {
    background: #161618 !important;
}

/* Browse Services button area */
.card-body .btn-lg,
.card-body a.btn[href*='cart'],
.table-container .btn-primary {
    background: linear-gradient(135deg, #0056b3 0%, #004a9e 100%) !important;
}

/* OVERRIDE ANY INLINE STYLES */
[style*='background-color: rgb(255, 255, 255)'],
[style*='background-color: #ffffff'],
[style*='background-color:#ffffff'],
[style*='background: rgb(255, 255, 255)'],
[style*='background: #ffffff'],
[style*='background:#ffffff'],
[style*='background-color: white'],
[style*='background: white'] {
    background: #161618 !important;
    background-color: #161618 !important;
}

/* ============================================
   REFINED DARK THEME - POLISHED LOOK
   ============================================ */

/* Stats cards - cleaner design */
.services-stats-bar .row {
    gap: 0;
}

.services-stats-bar .stat-item {
    background: linear-gradient(145deg, rgba(30, 30, 35, 0.9) 0%, rgba(10, 16, 37, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    padding: 1.5rem 1rem !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

.services-stats-bar .stat-item:hover {
    border-color: rgba(0, 86, 179, 0.2) !important;
    transform: translateY(-2px) !important;
}

.services-stats-bar .stat-value.text-success { color: #22c55e !important; }
.services-stats-bar .stat-value.text-warning { color: #f59e0b !important; }
.services-stats-bar .stat-value.text-danger { color: #ef4444 !important; }

/* Main content card - premium look */
.table-container.card,
.card.table-container,
.table-container {
    background: linear-gradient(180deg, rgba(26, 26, 30, 0.98) 0%, rgba(20, 20, 24, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
}

/* Card header - refined */
.table-container .card-header,
.card .card-header {
    background: linear-gradient(180deg, rgba(35, 35, 40, 0.8) 0%, rgba(28, 28, 32, 0.8) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 1.25rem 1.5rem !important;
}

.card-header h5,
.card-header .mb-0 {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.card-header h5 i {
    color: var(--pd-accent, #0056b3) !important;
    opacity: 0.8 !important;
}

/* Order New Service button - better style */
.card-header .btn-primary,
.card-header .btn-sm {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
}

.card-header .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35) !important;
}

/* Table - cleaner look */
.table-container .card-body,
.card .card-body {
    background: transparent !important;
    padding: 0 !important;
}

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

/* Table header */
table thead th {
    background: rgba(40, 40, 46, 0.6) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 1rem 1.25rem !important;
}

/* Table rows */
table tbody tr {
    background: transparent !important;
    transition: background 0.15s ease !important;
}

table tbody tr:hover {
    background: rgba(0, 86, 179, 0.06) !important;
}

table tbody td {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.9rem !important;
}

/* Empty state - Browse Services */
.dataTables_empty {
    background: transparent !important;
    padding: 4rem 2rem !important;
}

/* ============================================
   SEARCH BAR - COMPLETE RESTYLE
   ============================================ */

/* Search container */
.navbar .form-inline,
.navbar form.form-inline {
    width: 100% !important;
    max-width: 400px !important;
}

.input-group.search {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.input-group.search:focus-within {
    border-color: var(--pd-accent, #0056b3) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
}

/* Search input */
.input-group.search .form-control,
.input-group.search input[type= text],
.input-group.search input[name=search] {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    height: auto !important;
}

.input-group.search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.input-group.search .form-control:focus {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Search button */
.input-group.search .input-group-append,
.input-group.search .btn,
.input-group.search button {
    background: var(--pd-accent, #0056b3) !important;
    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 0.75rem 1.25rem !important;
    margin: 2px !important;
    margin-left: 0 !important;
}

.input-group.search .btn:hover {
    background: #004a9e !important;
}

.input-group.search .btn i,
.input-group.search .fa-search {
    color: #ffffff !important;
    font-size: 0.9rem !important;
}

/* Cart button */
.navbar-nav.toolbar .cart-btn,
.navbar .cart-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 0.65rem 0.9rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease !important;
}

.navbar-nav.toolbar .cart-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* ============================================
   SIDEBAR FILTERS - POLISHED
   ============================================ */

.list-group,
.view-filter-btns {
    background: linear-gradient(180deg, rgba(26, 26, 30, 0.98) 0%, rgba(20, 20, 24, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 0.875rem 1.25rem !important;
    transition: all 0.15s ease !important;
}

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

.list-group-item:hover {
    background: rgba(0, 86, 179, 0.08) !important;
    color: #ffffff !important;
}

.list-group-item.active {
    background: rgba(0, 86, 179, 0.12) !important;
    color: var(--pd-accent, #0056b3) !important;
}

.list-group-item .badge {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.7rem !important;
    padding: 0.3rem 0.6rem !important;
    border-radius: 20px !important;
}

/* Actions section */
.list-group-item.list-group-item-action,
.actions-section .list-group-item {
    color: var(--pd-accent, #0056b3) !important;
}

.list-group-item.list-group-item-action i {
    opacity: 0.7 !important;
}

/* ============================================
   ALL SEARCH BOXES & INPUTS - CLIENT AREA
   ============================================ */

/* General inputs throughout the site */
input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='tel'],
input[type='url'],
textarea,
select:not([multiple]),
.form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--pd-accent, #0056b3) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
    outline: none !important;
    color: #ffffff !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Select dropdowns */
select,
select.form-control {
    background-image: url( data:image/svg+xml,%3csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 16 16%3e%3cpath fill=none stroke=%23a78bfa stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M2 5l6 6 6-6/%3e%3c/svg%3e) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Input groups */
.input-group {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.input-group .form-control {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.input-group .form-control:focus {
    box-shadow: none !important;
}

.input-group:focus-within {
    border-color: var(--pd-accent, #0056b3) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
}

.input-group-prepend,
.input-group-append {
    background: transparent !important;
}

.input-group-text {
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.input-group .btn {
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    margin: 0 !important;
}

/* DataTables search */
.dataTables_filter input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    margin-left: 0.5rem !important;
}

.dataTables_filter label {
    color: rgba(255, 255, 255, 0.6) !important;
    display: flex !important;
    align-items: center !important;
}

.dataTables_length select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    padding: 0.3rem 2rem 0.3rem 0.75rem !important;
}

.dataTables_length label {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Domain search specific */
#domainSearch input,
#inputDomainSearch,
input[name='domain'],
.domain-search-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Knowledgebase search */
.kb-search input,
input[name='search'][placeholder*='knowledgebase' i],
input[placeholder*='Search' i] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Contact form inputs */
.contact-form input,
.contact-form textarea,
#frmContact input,
#frmContact textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Ticket form */
#frmTicket input,
#frmTicket textarea,
#frmTicket select,
.ticket-form input,
.ticket-form textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Labels */
label,
.form-label,
.control-label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
}

/* Form help text */
.form-text,
.help-block,
small.text-muted {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Checkbox and radio */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pd-accent, #0056b3) !important;
    border-color: var(--pd-accent, #0056b3) !important;
}

.custom-checkbox .custom-control-label::before,
.custom-radio .custom-control-label::before {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ============================================
   USER AREA - PROFESSIONAL SEARCH BOXES
   ============================================ */

/* Main header search - knowledgebase */
.navbar .input-group.search,
header .input-group.search,
.navbar form .input-group {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: stretch !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.navbar .input-group.search .form-control,
header .input-group.search .form-control,
.navbar form input[type='text'] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-right: none !important;
    border-radius: 10px 0 0 10px !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    height: auto !important;
    min-height: 42px !important;
}

.navbar .input-group.search .form-control:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--pd-accent, #0056b3) !important;
    box-shadow: none !important;
}

.navbar .input-group.search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.navbar .input-group.search .btn,
.navbar .input-group.search .input-group-append .btn,
header .input-group.search .btn {
    background: var(--pd-accent, #0056b3) !important;
    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    color: #ffffff !important;
    padding: 10px 18px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.navbar .input-group.search .btn:hover {
    background: #004a9e !important;
}

.navbar .input-group.search .btn i {
    color: #ffffff !important;
    font-size: 1rem !important;
}

/* All form inputs in user area pages */
.primary-content .form-control,
.main-content .form-control,
#main-body .form-control,
.card-body .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

.primary-content .form-control:focus,
.main-content .form-control:focus,
#main-body .form-control:focus,
.card-body .form-control:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--pd-accent, #0056b3) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2) !important;
    outline: none !important;
}

.primary-content .form-control::placeholder,
.main-content .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Select dropdowns in user area */
.primary-content select.form-control,
.main-content select.form-control,
#main-body select.form-control {
    background-color: rgba(255, 255, 255, 0.06) !important;
    background-image: url( data:image/svg+xml,%3csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 16 16%3e%3cpath fill=none stroke=%23a78bfa stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M2 5l6 6 6-6/%3e%3c/svg%3e) !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 40px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Textarea */
.primary-content textarea.form-control,
.main-content textarea.form-control {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Form labels */
.primary-content label,
.main-content label,
.card-body label,
.form-group label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-bottom: 8px !important;
}

/* Input groups in forms */
.primary-content .input-group,
.main-content .input-group,
.card-body .input-group {
    background: transparent !important;
    border: none !important;
}

.primary-content .input-group .form-control,
.main-content .input-group .form-control {
    border-radius: 8px 0 0 8px !important;
}

.primary-content .input-group-text,
.main-content .input-group-text,
.primary-content .input-group-addon,
.main-content .input-group-addon {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Domain search on cart pages */
#frmDomainSearch input,
#inputDomain,
input[name='domain'],
.domain-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
}

#frmDomainSearch input:focus,
#inputDomain:focus,
input[name='domain']:focus {
    border-color: var(--pd-accent, #0056b3) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2) !important;
}

/* DataTables search in user area */
.dataTables_filter input[type='search'],
.dataTables_filter input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
}

.dataTables_filter input:focus {
    border-color: var(--pd-accent, #0056b3) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2) !important;
    outline: none !important;
}

.dataTables_filter label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 400 !important;
}

/* DataTables length selector */
.dataTables_length select {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    padding: 6px 30px 6px 12px !important;
}

.dataTables_length label {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Support ticket form */
#frmTicket .form-control,
.ticket-form .form-control,
#openTicketForm .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Contact form */
#frmContact .form-control,
.contact-form .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Profile/Account forms */
#frmAccountDetails .form-control,
.profile-form .form-control,
#frmPayment .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Help text under inputs */
.form-text,
.help-block,
small.text-muted {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.8rem !important;
    margin-top: 6px !important;
}

/* Required asterisk */
.required,
label .text-danger {
    color: #ef4444 !important;
}

/* ============================================
   DOMAIN REGISTRATION PAGE - COMPLETE REDESIGN
   ============================================ */

/* Main container */
#order-standard_cart {
    background: transparent !important;
}

/* Page header */
#order-standard_cart .header-lined h1 {
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

#order-standard_cart .header-lined + p,
#order-standard_cart .cart-body > p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
}

/* Domain search container */
.domain-checker-container {
    margin: 2rem 0 !important;
}

.domain-checker-bg {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.15) 0%, rgba(0, 70, 158, 0.1) 100%) !important;
    border: 1px solid rgba(0, 86, 179, 0.2) !important;
    border-radius: 20px !important;
    padding: 2.5rem !important;
    position: relative !important;
}

/* Domain search input */
.input-group-box,
#frmDomainChecker .input-group {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

#inputDomain,
#frmDomainChecker input[name='domain'] {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    padding: 1rem 1.5rem !important;
    height: auto !important;
}

#inputDomain::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

#inputDomain:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Search button */
#btnCheckAvailability,
.domain-check-availability {
    background: linear-gradient(135deg, #0056b3 0%, #004a9e 100%) !important;
    border: none !important;
    border-radius: 0 12px 12px 0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

#btnCheckAvailability:hover {
    background: linear-gradient(135deg, #004a9e 0%, #003d87 100%) !important;
    transform: scale(1.02) !important;
}

/* Search results area */
#DomainSearchResults {
    margin-top: 2rem !important;
}

.domain-checker-result-headline {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Searching text */
.domain-searching,
.domain-lookup-loader {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1rem !important;
}

.domain-lookup-loader i {
    color: var(--pd-accent, #0056b3) !important;
}

/* Error messages */
.domain-invalid,
.domain-checker-invalid {
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
}

/* Available domain */
.domain-available,
.domain-checker-available {
    color: #86efac !important;
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    font-weight: 500 !important;
}

/* Unavailable domain */
.domain-unavailable,
.domain-checker-unavailable {
    color: #fca5a5 !important;
}

/* Contact Support button - hide by default or style it */
.domain-contact-support {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    
}

/* IDN Language selector */
.idn-language-selector {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 1rem !important;
}

.idn-language-selector .text-center {
    color: rgba(255, 255, 255, 0.7) !important;
}

.idn-language-selector select {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
}

/* Add to cart button */
.btn-add-to-cart {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.3s ease !important;
}

.btn-add-to-cart:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3) !important;
}

.btn-add-to-cart .added {
    background: var(--pd-accent, #0056b3) !important;
}

.btn-add-to-cart .unavailable {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Domain price display */
.domain-price {
    display: flex;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
}

.domain-price .price {
    color: #22c55e !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

/* Spotlight TLDs */
.spotlight-tlds {
    background: rgba(10, 16, 37, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
}

.spotlight-tld {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    text-align: center !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    transition: all 0.2s ease !important;
}

.spotlight-tld:hover {
    border-color: var(--pd-accent, #0056b3) !important;
    background: rgba(0, 86, 179, 0.1) !important;
}

.spotlight-tld .price {
    color: #22c55e !important;
    font-size: 0.9rem !important;
    margin-top: 0.5rem !important;
}

.spotlight-tld-hot,
.spotlight-tld-new,
.spotlight-tld-sale {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    margin-bottom: 0.5rem !important;
    
}

.spotlight-tld-hot { background: #ef4444 !important; color: white !important; }
.spotlight-tld-new { background: #3b82f6 !important; color: white !important; }
.spotlight-tld-sale { background: #f59e0b !important; color: black !important; }

/* Suggested Domains */
.suggested-domains {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 1.5rem 0 !important;
}

.suggested-domains .panel-heading,
.suggested-domains .card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 1rem 1.5rem !important;
}

.suggested-domains .panel-body,
.suggested-domains .card-body {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 1.5rem !important;
}

.suggested-domains .list-group {
    background: transparent !important;
}

.suggested-domains .list-group-item,
.domain-suggestion {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    padding: 1rem 1.5rem !important;
    display: flex;
    align-items: center !important;
    justify-content: space-between !important;
}

.domain-suggestion:hover {
    background: rgba(0, 86, 179, 0.08) !important;
}

.domain-suggestion .domain {
    font-weight: 600 !important;
    color: #ffffff !important;
}

.domain-suggestion .extension {
    color: var(--pd-accent, #0056b3) !important;
}

.domain-suggestion .promo span {
    font-size: 0.7rem !important;
    padding: 0.15rem 0.4rem !important;
    border-radius: 4px !important;
    margin-left: 0.5rem !important;
}

.sales-group-hot { background: #ef4444 !important; color: white !important; }
.sales-group-new { background: #3b82f6 !important; color: white !important; }
.sales-group-sale { background: #f59e0b !important; color: black !important; }

.domain-suggestion .actions {
    display: flex;
    align-items: center !important;
    gap: 1rem !important;
}

.domain-suggestion .price {
    color: #22c55e !important;
    font-weight: 600 !important;
}

.suggested-domains .panel-footer,
.suggested-domains .card-footer {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1rem !important;
}

.suggested-domains .card-footer a {
    color: var(--pd-accent, #0056b3) !important;
}

.domain-suggestions-warning {
    padding: 1rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.8rem !important;
}

/* ============================================
   DOMAIN PRICING TABLE - DARK THEME
   ============================================ */

.domain-pricing {
    margin-top: 3rem !important;
}

.domain-pricing h4 {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 1.5rem !important;
}

/* Category filter badges */
.tld-filters {
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.tld-filters a.badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.tld-filters a.badge:hover,
.tld-filters a.badge.active {
    background: var(--pd-accent, #0056b3) !important;
    border-color: var(--pd-accent, #0056b3) !important;
    color: #ffffff !important;
}

/* Pricing table - REMOVE WHITE BACKGROUND */
.domain-pricing .bg-white,
.domain-pricing > .bg-white {
    background: rgba(10, 16, 37, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Pricing table header */
.tld-pricing-header {
    background: rgba(18, 22, 42, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 1rem 0 !important;
}

.tld-pricing-header .tld-column {
    padding: 0 1.5rem !important;
    text-align: left !important;
}

/* Pricing table rows */
.tld-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: background 0.15s ease !important;
    padding: 0.75rem 0 !important;
}

.tld-row:hover {
    background: rgba(0, 86, 179, 0.06) !important;
}

.tld-row .two-row-center {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.tld-row strong {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.tld-row .col-4,
.tld-row .col-xs-4 {
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 0.5rem !important;
}

.tld-row small {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem !important;
}

/* Sale group badges in pricing */
.tld-sale-group {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

.tld-sale-group-hot { background: #ef4444 !important; color: white !important; }
.tld-sale-group-new { background: #3b82f6 !important; color: white !important; }
.tld-sale-group-sale { background: #f59e0b !important; color: black !important; }

/* No TLDs message */
.tld-row.no-tlds {
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 2rem !important;
}

/* Featured TLDs */
.featured-tlds-container {
    margin-bottom: 2rem !important;
}

.featured-tld {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    margin-bottom: 1rem !important;
}

.featured-tld:hover {
    border-color: var(--pd-accent, #0056b3) !important;
    transform: translateY(-2px) !important;
}

.featured-tld .img-container img {
    max-height: 40px !important;
    margin-bottom: 0.75rem !important;
}

.featured-tld .price {
    color: #22c55e !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Promo boxes at bottom */
.domain-promo-box {
    background: linear-gradient(145deg, rgba(18, 22, 42, 0.95) 0%, rgba(10, 16, 37, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    text-align: center !important;
    margin-top: 2rem !important;
}

.domain-promo-box i.fas {
    color: var(--pd-accent, #0056b3) !important;
    margin-bottom: 1rem !important;
}

.domain-promo-box h3 {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.domain-promo-box p {
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 1rem !important;
}

.domain-promo-box .btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    color: #000000 !important;
    font-weight: 600 !important;
}

.domain-promo-box .btn-primary {
    background: linear-gradient(135deg, #0056b3 0%, #004a9e 100%) !important;
    border: none !important;
}

.domain-promo-box .small {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.75rem !important;
    margin-top: 1rem !important;
}

/* Cart sidebar */
.cart-sidebar {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
}

.cart-sidebar .list-group {
    background: transparent !important;
}

.cart-sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0.75rem 0 !important;
}

.cart-sidebar .list-group-item:hover {
    color: #ffffff !important;
}

.cart-sidebar .list-group-item.active {
    color: var(--pd-accent, #0056b3) !important;
    font-weight: 500 !important;
}

/* ============================================
   ADDITIONAL DOMAIN PAGE FIXES
   ============================================ */

/* Fix all white backgrounds in cart */
#order-standard_cart .bg-white,
#main-body .bg-white,
.cart-body .bg-white {
    background: rgba(10, 16, 37, 0.95) !important;
}

/* Domain search results panel */
.domain-checker-result {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin: 1rem 0 !important;
}

/* Primary result (searched domain) */
.domain-checker-result.primary-result {
    background: linear-gradient(145deg, rgba(10, 16, 37, 0.95), rgba(18, 22, 42, 0.95)) !important;
    border-color: var(--pd-accent, #0056b3) !important;
}

/* Result domain name */
.domain-checker-result .domain-name {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

/* Taken/Unavailable state */
.domain-checker-result.domain-unavailable {
    opacity: 0.7 !important;
}

.domain-unavailable .domain-status {
    color: #fca5a5 !important;
}

/* Price box inside results */
.domain-price-container {
    color: #22c55e !important;
    font-weight: 600 !important;
}

/* Loading state */
.domain-checking .spinner-border,
.domain-checking .fa-spinner {
    color: var(--pd-accent, #0056b3) !important;
}

/* Fix the weird row for pricing */
.domain-pricing > div,
#tldPricing {
    background: rgba(10, 16, 37, 0.95) !important;
    border-radius: 16px !important;
}

/* All inner containers */
#tldPricing .bg-white,
.tld-pricing-header,
.tld-pricing-container > div {
    background: transparent !important;
}

/* Row colors in TLD table */
.tld-row .col,
.tld-row > div {
    color: #ffffff !important;
}

/* Prices */
.tld-row .price,
.tld-row .tld-price {
    color: #22c55e !important;
    font-weight: 600 !important;
}

/* Category badges in pricing */
#tldCategoryBadges a,
.tld-filter-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 20px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.85rem !important;
    margin: 0.25rem !important;
    
    transition: all 0.2s ease !important;
}

#tldCategoryBadges a:hover,
#tldCategoryBadges a.active,
.tld-filter-badge:hover,
.tld-filter-badge.active {
    background: var(--pd-accent, #0056b3) !important;
    border-color: var(--pd-accent, #0056b3) !important;
    color: #ffffff !important;
}

/* Fix the domain suggestions */
.domain-suggestion .btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
}

.domain-suggestion .btn.added,
.domain-suggestion .btn-secondary {
    background: rgba(0, 86, 179, 0.2) !important;
    border: 1px solid var(--pd-accent, #0056b3) !important;
}

.domain-suggestion .btn.unavailable {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    cursor: not-allowed !important;
}

/* Fix the IDN selector styling */
.idn-language,
#frmDomainChecker select {
    background: rgba(10, 16, 37, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
}

#frmDomainChecker select option {
    background: #121a32 !important;
    color: #ffffff !important;
}

/* Domain extension dropdown */
.input-group .input-group-btn .dropdown-menu,
.domain-extension-dropdown {
    background: #121a32 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

.domain-extension-dropdown .dropdown-item,
.input-group .dropdown-menu li a {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 0.5rem 1rem !important;
}

.domain-extension-dropdown .dropdown-item:hover {
    background: rgba(0, 86, 179, 0.1) !important;
    color: #ffffff !important;
}

/* Help text */
.domain-checker-help,
.help-block,
#order-standard_cart .help-block {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.85rem !important;
    margin-top: 0.5rem !important;
}

/* Section headers */
.browse-extensions-header,
.domain-pricing > h4,
#order-standard_cart h4,
#order-standard_cart h3 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* WHOIS lookup link */
.btn-whois,
a.btn-whois {
    color: var(--pd-accent, #0056b3) !important;
    background: transparent !important;
    border: 1px solid var(--pd-accent, #0056b3) !important;
    border-radius: 8px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.85rem !important;
}

/* Transfer link */
.btn-transfer,
a.btn-transfer {
    color: #22c55e !important;
    border-color: #22c55e !important;
}

/* All panels in domain register */
#order-standard_cart .panel,
#order-standard_cart .card {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
}

#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

#order-standard_cart .panel-body,
#order-standard_cart .card-body {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix all alerts in cart */
#order-standard_cart .alert {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

#order-standard_cart .alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

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

/* Cart body */
.cart-body {
    background: transparent !important;
    color: #ffffff !important;
}

/* Main page intro text */
.domain-checker-intro,
.domain-register-intro {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* ============================================
   WHMCS SPECIFIC DOMAIN REGISTER CLASSES
   ============================================ */

/* Main domain input box */
.input-group-box {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* Primary search result */
#primaryLookupResult {
    background: rgba(10, 16, 37, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-top: 1rem !important;
}

/* Searching loader */
.domain-lookup-loader {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 1.5rem !important;
    text-align: center !important;
}

.domain-lookup-loader i {
    color: var(--pd-accent, #0056b3) !important;
    margin-right: 0.5rem !important;
}

/* Domain invalid message */
.domain-invalid,
.domain-checker-invalid {
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.15) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
}

/* Domain length restrictions */
.domain-length-restrictions {
    display: inline !important;
}

/* Domain unavailable */
.domain-unavailable,
.domain-checker-unavailable,
.domain-tld-unavailable {
    color: #fca5a5 !important;
}

/* Domain available */
.domain-available,
.domain-checker-available {
    color: #86efac !important;
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.15) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    font-weight: 500 !important;
}

/* Contact support button - style it properly */
.domain-contact-support {
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    margin-top: 1rem !important;
    
}

/* IDN Language selector container */
.idn-language-selector {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 1rem !important;
}

.idn-language-selector .text-center {
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 1rem !important;
}

.idn-language-selector select.form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* Domain price display */
.domain-price {
    display: flex;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    padding: 0 !important;
}

.domain-price .price {
    color: #22c55e !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}

/* Add to cart button */
.btn-add-to-cart {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.3s ease !important;
}

.btn-add-to-cart:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.25) !important;
}

.btn-add-to-cart .to-add {
    
}

.btn-add-to-cart .loading,
.btn-add-to-cart .added,
.btn-add-to-cart .unavailable {
    
}

.btn-add-to-cart.loading .to-add { display: none !important; }
.btn-add-to-cart.loading .loading { display: inline !important; }
.btn-add-to-cart.added .to-add { display: none !important; }
.btn-add-to-cart.added .added { 
    display: inline !important; 
    background: linear-gradient(135deg, #0056b3 0%, #004a9e 100%) !important;
}
.btn-add-to-cart.unavailable .to-add { display: none !important; }
.btn-add-to-cart.unavailable .unavailable { display: inline !important; }
.btn-add-to-cart.unavailable {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: not-allowed !important;
}

/* Spotlight TLDs section */
.spotlight-tlds {
    background: rgba(10, 16, 37, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
}

.spotlight-tlds-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    justify-content: center !important;
}

.spotlight-tld-container {
    flex: 1 !important;
    min-width: 140px !important;
    max-width: 200px !important;
}

.spotlight-tld {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    text-align: center !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    height: 100% !important;
}

.spotlight-tld:hover {
    border-color: var(--pd-accent, #0056b3) !important;
    background: rgba(0, 86, 179, 0.1) !important;
    transform: translateY(-3px) !important;
}

.spotlight-tld .extension {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.spotlight-tld .price {
    color: #22c55e !important;
    font-size: 0.9rem !important;
    margin-top: 0.5rem !important;
    font-weight: 600 !important;
}

.spotlight-tld .promo-price {
    color: #22c55e !important;
}

.spotlight-tld .original-price {
    color: rgba(255, 255, 255, 0.4) !important;
    text-decoration: line-through !important;
    font-size: 0.8rem !important;
}

/* Spotlight TLD badges */
.spotlight-tld-hot,
.spotlight-tld-new,
.spotlight-tld-sale {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    
}

.spotlight-tld-hot { background: #ef4444 !important; color: white !important; }
.spotlight-tld-new { background: #3b82f6 !important; color: white !important; }
.spotlight-tld-sale { background: #f59e0b !important; color: black !important; }

/* Domain error message */
.domain-error {
    color: #fca5a5 !important;
    font-size: 0.9rem !important;
}

/* Captcha container */
.captcha-container {
    background: rgba(10, 16, 37, 0.8) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
}

.default-captcha {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
}

.default-captcha input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Field error messages */
.field-error-msg {
    color: #fca5a5 !important;
    font-size: 0.85rem !important;
}

/* Cart sidebar styling */
.cart-sidebar {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
}


/* ============================================
   SUGGESTED DOMAINS SECTION
   ============================================ */

.suggested-domains {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 1.5rem 0 !important;
}

.suggested-domains .panel-heading,
.suggested-domains .card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 1rem 1.5rem !important;
}

.suggested-domains .panel-body,
.suggested-domains .card-body {
    background: transparent !important;
    padding: 0 !important;
}

/* Suggestions loader */
.domain-lookup-suggestions-loader {
    padding: 2rem !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Domain suggestion items */
.domain-suggestion {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    padding: 1rem 1.5rem !important;
    display: flex;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    transition: background 0.15s ease !important;
}

.domain-suggestion:hover {
    background: rgba(0, 86, 179, 0.06) !important;
}

.domain-suggestion:last-child {
    border-bottom: none !important;
}

.domain-suggestion .domain {
    font-weight: 600 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
}

.domain-suggestion .extension {
    color: var(--pd-accent, #0056b3) !important;
    font-weight: 600 !important;
}

/* Sales group badges */
.domain-suggestion .promo {
    margin-left: 0.75rem !important;
}

.sales-group-hot,
.sales-group-new,
.sales-group-sale {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}

.sales-group-hot { background: #ef4444 !important; color: white !important; }
.sales-group-new { background: #3b82f6 !important; color: white !important; }
.sales-group-sale { background: #f59e0b !important; color: black !important; }

/* Suggestion actions */
.domain-suggestion .actions {
    display: flex;
    align-items: center !important;
    gap: 1rem !important;
}

.domain-suggestion .price {
    color: #22c55e !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Suggestion add to cart button */
.domain-suggestion .btn-add-to-cart {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: white !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
}

.domain-suggestion .btn-add-to-cart:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

/* More suggestions link */
.suggested-domains .panel-footer,
.suggested-domains .card-footer {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1rem !important;
}

.suggested-domains .card-footer a,
#moreSuggestions {
    color: var(--pd-accent, #0056b3) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#moreSuggestions:hover {
    text-decoration: underline !important;
}

.no-more,
#noMoreSuggestions {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Suggestions warning */
.domain-suggestions-warning {
    padding: 1rem !important;
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 0.8rem !important;
    font-style: italic !important;
}

/* ============================================
   DOMAIN PRICING TABLE
   ============================================ */

.domain-pricing {
    margin-top: 3rem !important;
}

.domain-pricing h4,
.domain-pricing .font-size-18 {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 1.5rem !important;
}

/* Featured TLDs container */
.featured-tlds-container {
    margin-bottom: 2rem !important;
}

.featured-tld {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    margin-bottom: 1rem !important;
}

.featured-tld:hover {
    border-color: var(--pd-accent, #0056b3) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

.featured-tld .img-container img {
    max-height: 45px !important;
    margin-bottom: 0.75rem !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
}

.featured-tld .price {
    color: #22c55e !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

/* TLD Category filter badges */
.tld-filters {
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.tld-filters a.badge,
.tld-filters .badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.tld-filters a.badge:hover,
.tld-filters a.badge.active,
.tld-filters .badge:hover,
.tld-filters .badge.active {
    background: var(--pd-accent, #0056b3) !important;
    border-color: var(--pd-accent, #0056b3) !important;
    color: #ffffff !important;
}

/* CRITICAL: Fix white background on pricing table */
.domain-pricing > .bg-white,
.domain-pricing .bg-white {
    background: rgba(10, 16, 37, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Pricing table header */
.tld-pricing-header {
    background: rgba(18, 22, 42, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 1rem 0 !important;
}

.tld-pricing-header .col-md-4,
.tld-pricing-header .col-md-8,
.tld-pricing-header .col-xs-4,
.tld-pricing-header .col-4,
.tld-pricing-header .tld-column {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Pricing table rows */
.tld-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: background 0.15s ease !important;
    padding: 0.75rem 0 !important;
}

.tld-row:hover {
    background: rgba(0, 86, 179, 0.06) !important;
}

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

/* TLD name and info */
.tld-row .two-row-center {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding-left: 1rem !important;
}

.tld-row strong {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.tld-row small {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem !important;
}

/* TLD sale group badges */
.tld-sale-group {
    font-size: 0.6rem !important;
    padding: 0.15rem 0.4rem !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

.tld-sale-group-hot { background: #ef4444 !important; color: white !important; }
.tld-sale-group-new { background: #3b82f6 !important; color: white !important; }
.tld-sale-group-sale { background: #f59e0b !important; color: black !important; }

/* Pricing columns */
.tld-row .col-xs-4,
.tld-row .col-4 {
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 0.75rem 0.5rem !important;
    font-size: 0.95rem !important;
}

/* No TLDs message */
.tld-row.no-tlds {
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 2rem !important;
    text-align: center !important;
}

.tld-row.no-tlds .col-xs-12,
.tld-row.no-tlds .col-12 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   DOMAIN PROMO BOXES
   ============================================ */

.domain-promo-box {
    background: linear-gradient(145deg, rgba(18, 22, 42, 0.95) 0%, rgba(10, 16, 37, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    text-align: center !important;
    margin-top: 2rem !important;
    height: 100% !important;
}

.domain-promo-box .clearfix {
    margin-bottom: 1rem !important;
}

.domain-promo-box i.fas,
.domain-promo-box i.fa {
    color: var(--pd-accent, #0056b3) !important;
    margin-bottom: 1rem !important;
}

.domain-promo-box h3,
.domain-promo-box .font-size-24,
.domain-promo-box .font-size-22 {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.domain-promo-box p {
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 1rem !important;
}

.domain-promo-box .font-bold {
    font-weight: 600 !important;
}

.domain-promo-box .text-warning {
    color: #f59e0b !important;
}

.domain-promo-box .text-primary {
    color: var(--pd-accent, #0056b3) !important;
}

.domain-promo-box .btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    color: #000000 !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.domain-promo-box .btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    transform: translateY(-2px) !important;
}

.domain-promo-box .btn-primary {
    background: linear-gradient(135deg, #0056b3 0%, #004a9e 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.domain-promo-box .btn-primary:hover {
    background: linear-gradient(135deg, #004a9e 0%, #003d87 100%) !important;
    transform: translateY(-2px) !important;
}

.domain-promo-box .small {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.75rem !important;
    margin-top: 1rem !important;
}

/* No wrap text */
.no-wrap {
    white-space: nowrap !important;
}


/* ============================================
   TLD PRICING TABLE HEADER FIX
   ============================================ */

/* Make header row visible */
.tld-pricing-header {
    background: rgba(18, 22, 42, 0.95) !important;
    border-bottom: 2px solid rgba(0, 86, 179, 0.3) !important;
    padding: 1rem 0 !important;
    display: flex !important;
    align-items: center !important;
}

.tld-pricing-header .row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.tld-pricing-header .col-md-4,
.tld-pricing-header .col-md-8,
.tld-pricing-header .tld-column,
.tld-pricing-header > div {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.75rem 1rem !important;
}

.tld-pricing-header .col-xs-4,
.tld-pricing-header .col-4 {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Ensure inner row in header is visible */
.tld-pricing-header .row .row {
    display: flex !important;
}

/* Fix no-gutters row display */
.row.no-gutters.tld-pricing-header {
    display: flex !important;
    margin: 0 !important;
}

.row.no-gutters.tld-pricing-header > div {
    display: flex !important;
    align-items: center !important;
}

/* Specific column styling */
.domain-pricing .bg-white .row.no-gutters.tld-pricing-header .col-md-4 {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
    padding-left: 1.5rem !important;
}

.domain-pricing .bg-white .row.no-gutters.tld-pricing-header .col-md-8 .col-xs-4,
.domain-pricing .bg-white .row.no-gutters.tld-pricing-header .col-md-8 .col-4 {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
}

/* TLD Row improvements */
.tld-row {
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 0 !important;
}

.tld-row .col-md-4 {
    padding-left: 1.5rem !important;
}

.tld-row .col-md-4 strong {
    color: #ffffff !important;
    font-size: 1.05rem !important;
}

.tld-row .col-md-8 .row {
    display: flex !important;
}

.tld-row .col-md-8 .col-xs-4,
.tld-row .col-md-8 .col-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #22c55e !important;
    font-weight: 600 !important;
}

.tld-row .col-md-8 small {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.75rem !important;
    margin-top: 0.15rem !important;
}


/* ============================================
   SUGGESTED DOMAINS - ALIGNMENT FIX
   ============================================ */

/* Suggested Domains container */
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.domain-checker-available::before {
    content: '' !important;
    
    width: 24px !important;
    height: 24px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    color: white !important;
    text-align: center !important;
    line-height: 24px !important;
    font-size: 14px !important;
    margin-right: 0.5rem !important;
}

/* Primary result price and add to cart */
#primaryLookupResult .domain-price,
.domain-checker-result-headline .domain-price {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#primaryLookupResult .domain-price .price {
    color: #22c55e !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

#primaryLookupResult .btn-add-to-cart {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
}


/* ============================================
   DOMAIN SUGGESTIONS - CLEAN FLEXBOX LAYOUT
   ============================================ */

/* Container */
.suggested-domains {
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    margin: 1.5rem 0 !important;
}

/* Header */
.suggested-domains .panel-heading,
.suggested-domains .card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 1rem 1.5rem !important;
}

/* List container */
#domainSuggestions,
.suggested-domains .list-group {
    background: transparent !important;
}

/* Each suggestion row */
.domain-suggestion {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.875rem 1.5rem !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.domain-suggestion:hover {
    background: rgba(0, 86, 179, 0.05) !important;
}

/* Domain name wrapper - take up available space */
.domain-suggestion > span:first-child,
.domain-suggestion .domain {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    flex: 0 0 auto !important;
}

.domain-suggestion .extension {
    color: var(--pd-accent, #0056b3) !important;
    font-weight: 600 !important;
}

/* Price and actions on the right */
.domain-suggestion .actions {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-left: auto !important;
}

.domain-suggestion .price {
    color: #22c55e !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Add to cart button */
.domain-suggestion .btn-add-to-cart {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
}

/* Hide contact support button unless specifically needed */
.domain-suggestion .domain-contact-support {
    display: none !important;
}

/* Promo badges inline */
.domain-suggestion .promo {
    margin-left: 0.5rem !important;
}

/* Footer */
.suggested-domains .panel-footer,
.suggested-domains .card-footer,
.more-suggestions {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1rem 1.5rem !important;
    text-align: center !important;
}

.more-suggestions a {
    color: var(--pd-accent, #0056b3) !important;
}

/* Warning text */
.domain-suggestions-warning {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 0.8rem !important;
    padding: 0.75rem 1.5rem !important;
    text-align: center !important;
}

/* ============================================
   PRIMARY SEARCH RESULT FIX
   ============================================ */

#primaryLookupResult {
    padding: 1rem 0 !important;
}

#primaryLookupResult p {
    margin: 0.5rem 0 !important;
}

/* Available message */
#primaryLookupResult .domain-checker-available {
    color: #86efac !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
}

/* Price row */
#primaryLookupResult .domain-price {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
}

#primaryLookupResult .domain-price .price {
    color: #22c55e !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}

#primaryLookupResult .btn-add-to-cart {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 10px !important;
}


/* ============================================
   UNAVAILABLE DOMAIN RESULT FIX
   ============================================ */

/* When domain is unavailable, hide the Add to Cart button */
#primaryLookupResult .domain-unavailable ~ .domain-price .btn-add-to-cart,
#primaryLookupResult .domain-checker-unavailable ~ .domain-price .btn-add-to-cart {
    display: none !important;
}

/* Style the unavailable message */
.domain-checker-unavailable,
.domain-unavailable {
    color: #fca5a5 !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
}

/* Contact Us button for unavailable domains */
.domain-contact-support:not(.w-hidden) {
    
    background: linear-gradient(135deg, #004a9e 0%, #003d87 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.6rem 1.25rem !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

/* Hide add to cart when it should be hidden */
.btn-add-to-cart.w-hidden {
    display: none !important;
}

/* ============================================
   DOMAIN SUGGESTIONS - ENSURE VISIBLE
   ============================================ */

/* Suggestions container - visible when not w-hidden */
.suggested-domains:not(.w-hidden) {
    display: block !important;
    background: rgba(10, 16, 37, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    margin: 1.5rem 0 !important;
}

/* Suggestions list when visible */
#domainSuggestions:not(.w-hidden) {
    display: block !important;
}

/* Each suggestion item when visible */
.domain-suggestion:not(.w-hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: transparent !important;
}

.domain-suggestion:not(.w-hidden):hover {
    background: rgba(0, 86, 179, 0.05) !important;
}

/* Domain name */
.domain-suggestion .domain {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.domain-suggestion .extension {
    color: var(--pd-accent, #0056b3) !important;
    font-weight: 600 !important;
}

/* Actions container */
.domain-suggestion .actions {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.domain-suggestion .price {
    color: #22c55e !important;
    font-weight: 600 !important;
}

.domain-suggestion .btn-add-to-cart:not(.w-hidden) {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #fff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* Loader */
.domain-lookup-suggestions-loader:not(.w-hidden) {
    display: block !important;
    padding: 2rem !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* More suggestions footer */
.more-suggestions:not(.w-hidden) {
    display: block !important;
}


/* ============================================
   CRITICAL FIXES - Domain Buy Button & Checkout
   Added by ProDomain audit fix
   ============================================ */

/* FIX 1: Ensure primary domain result buy button is always visible when parent is shown */
#primaryLookupResult:not(.w-hidden) .domain-price {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

#primaryLookupResult:not(.w-hidden) .btn-add-to-cart {
    display: inline-flex;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 140px !important;
    justify-content: center !important;
}

/* Ensure spotlight TLD buttons are visible */
.spotlight-tld .domain-lookup-result:not(.w-hidden) .btn-add-to-cart:not(.w-hidden) {
    
    visibility: visible !important;
}

/* FIX 2: Checkout sub-heading text visible on dark background */
#order-standard_cart .sub-heading {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    color: #94a3b8 !important;
    background: var(--pd-canvas, #020617) !important;
    font-weight: 500 !important;
}

/* FIX 3: Checkout form inputs fully dark-themed */
#frmCheckout .form-control,
#order-standard_cart .field,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="tel"],
#order-standard_cart select,
#order-standard_cart textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f4f4f5 !important;
    border-radius: 8px !important;
}

#frmCheckout .form-control:focus,
#order-standard_cart .field:focus {
    border-color: var(--pd-accent, #0056b3) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
}

/* FIX 4: Checkout account selection cards */
#containerExistingAccountSelect .account {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    color: #e2e8f0 !important;
}

#containerExistingAccountSelect .account.active {
    border-color: var(--pd-accent, #0056b3) !important;
    background: rgba(0, 86, 179, 0.08) !important;
}

#containerExistingAccountSelect .account label {
    color: #e2e8f0 !important;
}

#containerExistingAccountSelect .account .address {
    color: #94a3b8 !important;
}

/* FIX 5: Checkout existing login section */
#containerExistingUserSignin .form-group {
    margin-bottom: 16px !important;
}

#containerExistingUserSignin .prepend-icon .field-icon {
    color: #64748b !important;
}

/* FIX 6: Already registered button bar */
.already-registered {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
}

.already-registered p {
    color: #94a3b8 !important;
}

/* FIX 7: Order summary in checkout */
#orderSummary,
.order-summary-container {
    background: var(--pd-surface, #0a1025) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    color: #e2e8f0 !important;
}

/* FIX 8: Payment method selection */
.payment-methods .panel,
.payment-methods .card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.payment-methods .panel.active,
.payment-methods .card.active {
    border-color: var(--pd-accent, #0056b3) !important;
}

/* FIX 9: Ensure all text in cart/checkout is visible */
#order-standard_cart,
#order-standard_cart p,
#order-standard_cart span,
#order-standard_cart label,
#order-standard_cart td,
#order-standard_cart th,
#order-standard_cart li {
    color: #cbd5e1;
}

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
#order-standard_cart strong {
    color: #f1f5f9 !important;
}

/* FIX 10: Domain option radio buttons */
#order-standard_cart .domain-selection-options .option {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    color: #e2e8f0 !important;
}

#order-standard_cart .domain-selection-options .option-selected {
    background: rgba(0, 86, 179, 0.1) !important;
    border-color: rgba(0, 86, 179, 0.3) !important;
}

/* FIX 11: ViewCart table */
#order-standard_cart table,
.viewcart-table {
    color: #cbd5e1 !important;
}

#order-standard_cart table th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#order-standard_cart table td {
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

/* FIX 12: Promo code input in viewcart */
#order-standard_cart input[name="promocode"],
#order-standard_cart .promo-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f4f4f5 !important;
    border-radius: 8px !important;
}

/* ============================================================
   CRITICAL FIX: Cart & Checkout Dark Theme Overrides
   (override all.min.css which loads after this file)
   ============================================================ */

/* Order Summary - ensure dark bg, readable text */
#order-standard_cart .order-summary {
    background-color: #0a1025 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 3px solid rgba(0, 86, 179, 0.4) !important;
    border-radius: 12px !important;
}

#order-standard_cart .order-summary h2 {
    color: #f4f4f5 !important;
    font-weight: 600 !important;
}

#order-standard_cart .summary-container {
    background-color: rgba(10, 16, 37, 0.95) !important;
    color: #d4d4d8 !important;
}

#order-standard_cart .order-summary .subtotal {
    color: #d4d4d8 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#order-standard_cart .order-summary .subtotal span {
    color: #d4d4d8 !important;
}

#order-standard_cart .order-summary .bordered-totals {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: #d4d4d8 !important;
}

#order-standard_cart .order-summary .total-due-today span {
    color: #f4f4f5 !important;
}

#order-standard_cart .order-summary .total-due-today .amt {
    color: #22c55e !important;
    font-weight: 700 !important;
}

#order-standard_cart .order-summary .recurring-charges {
    color: #71717a !important;
}

#order-standard_cart .order-summary .recurring-charges .cost {
    color: #a1a1aa !important;
}

/* Checkout button - TRUST BLUE */
#order-standard_cart .btn-checkout,
#order-standard_cart a.btn-checkout,
#order-standard_cart #checkout {
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
}

#order-standard_cart .btn-checkout:hover,
#order-standard_cart a.btn-checkout:hover,
#order-standard_cart #checkout:hover {
    background: linear-gradient(135deg, #0069d9 0%, #0056b3 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4);
}

/* Continue Shopping */
#order-standard_cart .btn-continue-shopping {
    color: #a1a1aa !important;
}

#order-standard_cart .btn-continue-shopping:hover {
    color: #f4f4f5 !important;
}

/* Cart items - dark bg */
#order-standard_cart .view-cart-items .item {
    background-color: rgba(10, 16, 37, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #d4d4d8 !important;
}

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

#order-standard_cart .view-cart-items .item span,
#order-standard_cart .view-cart-items .item-title,
#order-standard_cart .view-cart-items .item-group,
#order-standard_cart .view-cart-items .item-price span {
    color: #e2e8f0 !important;
}

#order-standard_cart .view-cart-items .item-domain {
    color: #60a5fa !important;
}

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

/* Cart items header */
#order-standard_cart .view-cart-items-header {
    background-color: #0056b3 !important;
    color: #ffffff !important;
    border-radius: 8px 8px 0 0 !important;
}

/* View cart border */
#order-standard_cart .view-cart-items {
    border-bottom: 2px solid #0056b3 !important;
}

/* Empty cart button */
#order-standard_cart .empty-cart .btn {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

#order-standard_cart .empty-cart .btn:hover {
    background-color: rgba(239, 68, 68, 0.25) !important;
}

/* Remove from cart */
#order-standard_cart .btn-remove-from-cart {
    color: #71717a !important;
}

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

/* Promo tab area */
#order-standard_cart .view-cart-tabs .tab-content {
    background-color: rgba(10, 16, 37, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs a {
    color: #a1a1aa !important;
    border-color: transparent !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a.active {
    background-color: rgba(10, 16, 37, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) transparent !important;
    color: #f4f4f5 !important;
}

/* Promo input */
#order-standard_cart .view-cart-tabs .form-control {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f4f4f5 !important;
}

/* Promo code applied */
#order-standard_cart .view-cart-promotion-code {
    background-color: rgba(10, 16, 37, 0.6) !important;
    border: 1px dashed rgba(255, 255, 255, 0.1) !important;
    color: #d4d4d8 !important;
}

/* Product / domain config pages */
#order-standard_cart .products .product {
    background: rgba(10, 16, 37, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

#order-standard_cart .products .product header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px 12px 0 0 !important;
}

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

/* Domain selection options */
#order-standard_cart .domain-selection-options .option {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #d4d4d8 !important;
}

#order-standard_cart .domain-selection-options .option-selected {
    background-color: rgba(0, 86, 179, 0.1) !important;
    border-color: rgba(0, 86, 179, 0.3) !important;
}

/* Credit card input container */
#order-standard_cart .cc-input-container {
    background-color: rgba(10, 16, 37, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
}

/* Apply credit */
#order-standard_cart .apply-credit-container {
    background-color: rgba(10, 16, 37, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #d4d4d8 !important;
}

/* Sub-heading (OR dividers) */
#order-standard_cart .sub-heading {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    color: #94a3b8 !important;
    background: var(--pd-canvas, #020617) !important;
}

/* Gateway checkout area */
#order-standard_cart .view-cart-gateway-checkout {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
}

/* Product info bar */
#order-standard_cart .product-info {
    background-color: rgba(10, 16, 37, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #d4d4d8 !important;
}

/* Domain renewal / service renewal rows */
.domain-renewals,
.service-renewals,
.addon-renewals .service-renewal {
    background-color: rgba(10, 16, 37, 0.5) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.domain-renewals .domain-renewal,
.service-renewals .service-renewal {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.domain-renewals .domain-renewal:nth-child(even),
.service-renewals .service-renewal:nth-child(even),
.addon-renewals .service-renewal:nth-child(even) {
    background-color: rgba(10, 16, 37, 0.3) !important;
}

/* Captcha area */
#order-standard_cart .default-captcha {
    background-color: rgba(10, 16, 37, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
}

/* Account select container (checkout) */
#order-standard_cart .account-select-container {
    border-right-color: rgba(255, 255, 255, 0.06) !important;
}

#order-standard_cart .account-select-container div.account {
    background: rgba(10, 16, 37, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #d4d4d8 !important;
}

#order-standard_cart .account-select-container div.account.active {
    background: rgba(10, 16, 37, 0.9) !important;
    border-color: rgba(0, 86, 179, 0.3) !important;
}

/* Spotlight TLDs */
.spotlight-tlds {
    background: rgba(10, 16, 37, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
}

.spotlight-tld {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f4f4f5 !important;
}

.spotlight-tld span {
    color: #a1a1aa !important;
}

.spotlight-tld .btn:not(.domain-contact-support) {
    background: #0056b3 !important;
    border-color: #0056b3 !important;
    color: #fff !important;
}

.spotlight-tld .btn:not(.domain-contact-support):hover {
    background: #0069d9 !important;
}

/* Suggested domains */
.suggested-domains .card-header,
.suggested-domains .panel-heading {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: #0056b3 !important;
    color: #f4f4f5 !important;
}

.suggested-domains .list-group-item {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #d4d4d8 !important;
}

.suggested-domains .extension {
    color: #60a5fa !important;
}

.suggested-domains .price {
    color: #22c55e !important;
}

.suggested-domains .btn:not(.domain-contact-support) {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #fff !important;
    border-radius: 6px !important;
}

.suggested-domains .btn:not(.domain-contact-support):hover {
    background: #059669 !important;
}

/* Domain checker container - override yellow gradient */
.domain-checker-container {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.12) 0%, rgba(0, 40, 100, 0.08) 100%) !important;
    border: 1px solid rgba(0, 86, 179, 0.2) !important;
    border-radius: 16px !important;
}

/* Domain checker bg (inner) */
.domain-checker-bg {
    background: transparent !important;
    border: none !important;
}

/* Domain checker input box */
.domain-checker-container .input-group-box {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
}

/* Search button override (ensure not purple) */
.domain-check-availability,
.btn.domain-check-availability,
#btnCheckAvailability {
    background: linear-gradient(135deg, #0056b3 0%, #004a9e 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.domain-check-availability:hover,
.btn.domain-check-availability:hover,
#btnCheckAvailability:hover {
    background: linear-gradient(135deg, #0069d9 0%, #0056b3 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3) !important;
}

/* Domain searching text */
.domain-searching {
    color: #71717a !important;
}

/* Promo box */
.domain-promo-box {
    background-color: rgba(10, 16, 37, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #d4d4d8 !important;
}

/* All form controls in order context */
#order-standard_cart .form-control,
#order-standard_cart .field {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

#order-standard_cart .form-control:focus,
#order-standard_cart .field:focus {
    border-color: #0056b3 !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
}

/* Domain TLD pricing header */
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-sm-4,
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-xs-4 {
    background-color: rgba(10, 16, 37, 0.7) !important;
    border-bottom-color: rgba(0, 86, 179, 0.3) !important;
    color: #f4f4f5 !important;
}

/* Domain TLD pricing rows */
.domain-pricing .tld-row {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
    color: #d4d4d8 !important;
}

.domain-pricing .tld-row.highlighted {
    background: rgba(0, 86, 179, 0.08) !important;
}

/* Domain bulk options */
.domain-bulk-domain-well {
    background: rgba(10, 16, 37, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #d4d4d8 !important;
}

/* Domain checkout area */
div.domainresults div:not(.btn-group) {
    background-color: rgba(10, 16, 37, 0.6) !important;
    color: #d4d4d8 !important;
    border-radius: 8px 8px 0 0 !important;
}

div.domainresults div:not(.btn-group) span {
    color: #71717a !important;
}

/* Modal dark theme */
#order-standard_cart .modal-content {
    background: #0a1025 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #d4d4d8 !important;
}

#order-standard_cart .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* ============================================
   DOMAIN CHECKER FIXES - Feb 2026
   ============================================ */

/* Template suggestion row must stay hidden */
.domain-suggestion.w-hidden,
.domain-suggestion.list-group-item.w-hidden,
#domainSuggestions > .domain-suggestion:first-child:not(.clone) {
    display: none !important;
}

/* Contact support: styled but jQuery controls visibility */
.domain-contact-support {
    /* display is controlled by jQuery - do NOT set display here */
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
    border: none;
    color: #ffffff;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    margin-top: 1rem;
    cursor: pointer;
    text-decoration: none;
}
.domain-contact-support:hover {
    background: linear-gradient(135deg, #0069d9 0%, #0056b3 100%);
    color: #ffffff;
    text-decoration: none;
}

/* Add to Cart button states - let jQuery control spans via inline styles */
/* Only set display when button has state classes (JS class-based approach) */
.btn-add-to-cart .to-add,
.btn-add-to-cart .loading,
.btn-add-to-cart .added,
.btn-add-to-cart .unavailable {
    /* No display rules here - jQuery controls these */
}

/* Added state button color */
.btn-add-to-cart span.added {
    color: #ffffff;
}
.btn-add-to-cart.checkout {
    background: linear-gradient(135deg, #0056b3 0%, #004a9e 100%) !important;
}

/* Toast notification for cart feedback */
.prodomain-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 99999;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.35), 0 0 0 1px rgba(34, 197, 94, 0.15);
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    max-width: 360px;
}
.prodomain-toast.show {
    transform: translateX(0);
}
.prodomain-toast.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.35);
}
.prodomain-toast i {
    font-size: 1.2rem;
}

/* Unavailable domain in suggestions - hide via JS data attribute */
.domain-suggestion[data-unavailable="true"] {
    display: none !important;
}



#domainSuggestionsEmpty {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem !important;
    padding: 0.75rem 1.5rem !important;
    text-align: center !important;
}

#domainSuggestionsEmpty:not(.w-hidden) {
    display: block !important;
}


/* =====================================================
   v15: ProDomain SaaS Domain Checker Redesign
   Professional, trust-building design for domain search
   ===================================================== */

/* --- Suggestion Panel Container --- */
.suggested-domains:not(.w-hidden) {
    display: block !important;
    background: rgba(10, 16, 37, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
    margin-top: 1.5rem !important;
}

/* --- Suggestion Header --- */
.suggested-domains .panel-heading,
.suggested-domains .card-header {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.08) 0%, rgba(10, 16, 37, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 1rem 1.5rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* Count badges in header */
.pd-count-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 10px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
}

.pd-count-badge.pd-count-taken {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
}

/* --- Suggestion Loader (spinner) --- force hide when suggestions present --- */
#suggestionsLoader,
.domain-lookup-suggestions-loader {
    padding: 2rem !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.9rem !important;
}

/* Hide loader when suggestions list is visible */
#domainSuggestions:not(.w-hidden) ~ .domain-lookup-suggestions-loader,
#domainSuggestions.domain-lookup-result:not(.w-hidden) + .domain-lookup-suggestions-loader {
    display: none !important;
}

/* --- Suggestion Row: Base --- */
.domain-suggestion {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    position: relative !important;
    border-left: 3px solid transparent !important;
}

.domain-suggestion:last-child {
    border-bottom: none !important;
}

.domain-suggestion:hover {
    background: rgba(0, 86, 179, 0.05) !important;
}

/* Available row hover accent */
.domain-suggestion:not(.pd-taken):hover {
    border-left-color: rgba(34, 197, 94, 0.4) !important;
}

/* --- Domain Name + Extension (left side) --- */
.domain-suggestion .domain {
    font-weight: 600 !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    padding-left: 1.25rem !important;
}

.domain-suggestion .extension {
    color: var(--pd-accent, #0056b3) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

/* --- Actions (right side): price + button --- */
.domain-suggestion .actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-left: auto !important;
    padding-right: 1.25rem !important;
    flex-shrink: 0 !important;
}

/* Price styling */
.domain-suggestion .price {
    color: #22c55e !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    min-width: 90px !important;
    text-align: right !important;
}

/* --- Add to Cart Button: Available --- */
.domain-suggestion .btn-add-to-cart {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.45rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
    min-width: 95px !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    letter-spacing: 0.01em !important;
}

.domain-suggestion .btn-add-to-cart:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* --- Taken Row Styling --- */
.domain-suggestion.pd-taken {
    background: rgba(239, 68, 68, 0.03) !important;
    border-left: 3px solid rgba(239, 68, 68, 0.35) !important;
}

.domain-suggestion.pd-taken:hover {
    background: rgba(239, 68, 68, 0.06) !important;
}

/* Muted domain text for taken */
.domain-suggestion.pd-taken .domain {
    color: rgba(255, 255, 255, 0.4) !important;
}

.domain-suggestion.pd-taken .extension {
    color: rgba(239, 68, 68, 0.45) !important;
}

/* Hide price for taken */
.domain-suggestion.pd-taken .price {
    display: none !important;
}

/* --- Taken Button (shows "Taken" text via WHMCS .unavailable span) --- */
.domain-suggestion .btn-add-to-cart.unavailable,
.domain-suggestion.pd-taken .btn-add-to-cart {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(239, 68, 68, 0.6) !important;
    cursor: default !important;
    pointer-events: none !important;
    border: 1px solid rgba(239, 68, 68, 0.12) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    padding: 0.4rem 0.85rem !important;
    min-width: 70px !important;
    box-shadow: none !important;
    transform: none !important;
}

.domain-suggestion .btn-add-to-cart.unavailable:hover,
.domain-suggestion.pd-taken .btn-add-to-cart:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* --- Contact Support Button (for taken domains) --- */
.domain-suggestion.pd-taken .domain-contact-support {
    display: inline-flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.9) 0%, rgba(0, 68, 148, 0.9) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.42rem 0.9rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.01em !important;
}

.domain-suggestion.pd-taken .domain-contact-support:hover {
    background: linear-gradient(135deg, rgba(0, 68, 148, 1) 0%, rgba(0, 55, 120, 1) 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* Force hide contact support for available domains */
.domain-suggestion:not(.pd-taken) .domain-contact-support {
    display: none !important;
}

/* --- Promo / Sales badges --- */
.domain-suggestion .promo {
    margin-left: 0.5rem !important;
}

.sales-group-hot,
.sales-group-new,
.sales-group-sale {
    font-size: 0.6rem !important;
    padding: 0.15rem 0.45rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    vertical-align: middle !important;
}

.sales-group-hot { background: #ef4444 !important; color: white !important; }
.sales-group-new { background: #3b82f6 !important; color: white !important; }
.sales-group-sale { background: #f59e0b !important; color: #000 !important; }

/* --- More Suggestions Footer --- */
.suggested-domains .panel-footer,
.suggested-domains .card-footer,
.more-suggestions {
    background: rgba(0, 86, 179, 0.04) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0.75rem 1.5rem !important;
    text-align: center !important;
}

.more-suggestions a,
#moreSuggestions {
    color: var(--pd-accent, #0056b3) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
}

.more-suggestions a:hover,
#moreSuggestions:hover {
    text-decoration: underline !important;
}

/* --- Suggestion Warning Text --- */
.domain-suggestions-warning {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 0.75rem !important;
    padding: 0.6rem 1.5rem 0.75rem !important;
    text-align: center !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* =====================================================
   v15: PRIMARY RESULT POLISH
   ===================================================== */

/* Primary result banner */
.domain-checker-result-headline {
    background: rgba(10, 16, 37, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 16px !important;
    padding: 1.5rem 2rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Available message with icon */
#primaryLookupResult .domain-checker-available,
.domain-available {
    color: #86efac !important;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.15) !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
}

/* Unavailable message */
#primaryLookupResult .domain-checker-unavailable,
.domain-unavailable {
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.12) !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
}

/* Price row: better alignment */
#primaryLookupResult .domain-price {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
}

#primaryLookupResult .domain-price .price {
    color: #22c55e !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Primary add to cart: larger, bolder */
#primaryLookupResult .btn-add-to-cart {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 0.85rem 2rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    letter-spacing: 0.01em !important;
    transition: all 0.2s ease !important;
}

#primaryLookupResult .btn-add-to-cart:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3) !important;
}

/* =====================================================
   v15: BUTTON STATE OVERRIDES
   ===================================================== */

/* Button state: loading */
.btn-add-to-cart .loading,
.btn-add-to-cart .added,
.btn-add-to-cart .unavailable {
    display: none !important;
}

.btn-add-to-cart .to-add {
    display: inline !important;
}

.btn-add-to-cart.loading .to-add { display: none !important; }
.btn-add-to-cart.loading .loading { display: inline !important; }

/* Button state: added (checkout) */
.btn-add-to-cart.added .to-add { display: none !important; }
.btn-add-to-cart.added .added { display: inline !important; }
.btn-add-to-cart.added {
    background: linear-gradient(135deg, #0056b3 0%, #004a9e 100%) !important;
}

/* Button state: unavailable (taken) */
.btn-add-to-cart.unavailable .to-add { display: none !important; }
.btn-add-to-cart.unavailable .unavailable { display: inline !important; }
.btn-add-to-cart.unavailable {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(239, 68, 68, 0.55) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    border: 1px solid rgba(239, 68, 68, 0.1) !important;
}

/* =====================================================
   v15: SEARCH INPUT POLISH
   ===================================================== */

/* Domain search input */
#inputDomain {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    padding: 0.85rem 1.25rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#inputDomain:focus {
    border-color: var(--pd-accent, #0056b3) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
    outline: none !important;
}

#inputDomain::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Search button */
#btnCheckAvailability {
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 0.85rem 2rem !important;
    font-size: 1rem !important;
    letter-spacing: 0.02em !important;
    transition: all 0.2s ease !important;
}

#btnCheckAvailability:hover {
    background: linear-gradient(135deg, #004494 0%, #003d87 100%) !important;
    box-shadow: 0 6px 18px rgba(0, 86, 179, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* =====================================================
   v15: RESPONSIVE TWEAKS
   ===================================================== */

@media (max-width: 768px) {
    .domain-suggestion {
        flex-wrap: wrap !important;
        min-height: auto !important;
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
    }

    .domain-suggestion .domain,
    .domain-suggestion .extension {
        font-size: 0.88rem !important;
        padding-left: 0 !important;
    }

    .domain-suggestion .actions {
        width: 100% !important;
        justify-content: flex-end !important;
        padding-right: 0 !important;
        gap: 0.5rem !important;
    }

    .domain-suggestion .price {
        min-width: auto !important;
        font-size: 0.82rem !important;
    }

    .domain-suggestion .btn-add-to-cart {
        min-width: 80px !important;
        font-size: 0.78rem !important;
        padding: 0.4rem 0.75rem !important;
    }

    .domain-suggestion.pd-taken .domain-contact-support {
        font-size: 0.72rem !important;
        padding: 0.35rem 0.7rem !important;
    }

    .domain-checker-result-headline {
        padding: 1.25rem 1rem !important;
    }

    #primaryLookupResult .domain-price {
        flex-wrap: wrap !important;
    }

    #primaryLookupResult .btn-add-to-cart {
        padding: 0.7rem 1.5rem !important;
    }
}

/* =====================================================
   v15: TRUST SIGNALS — subtle professional touches
   ===================================================== */

/* Subtle row separator stripe (alternating) */
.domain-suggestion.clone:nth-child(even) {
    background: rgba(255, 255, 255, 0.01) !important;
}

/* Focus/accessibility ring for buttons */
.domain-suggestion .btn-add-to-cart:focus-visible,
.domain-suggestion .domain-contact-support:focus-visible {
    outline: 2px solid var(--pd-accent, #0056b3) !important;
    outline-offset: 2px !important;
}

/* Smooth entry animation for suggestion rows */
@keyframes pd-fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.domain-suggestion.clone {
    animation: pd-fadeSlideIn 0.25s ease both !important;
}

.domain-suggestion.clone:nth-child(2) { animation-delay: 0.03s !important; }
.domain-suggestion.clone:nth-child(3) { animation-delay: 0.06s !important; }
.domain-suggestion.clone:nth-child(4) { animation-delay: 0.09s !important; }
.domain-suggestion.clone:nth-child(5) { animation-delay: 0.12s !important; }
.domain-suggestion.clone:nth-child(6) { animation-delay: 0.15s !important; }
.domain-suggestion.clone:nth-child(7) { animation-delay: 0.18s !important; }
.domain-suggestion.clone:nth-child(8) { animation-delay: 0.21s !important; }
.domain-suggestion.clone:nth-child(9) { animation-delay: 0.24s !important; }
.domain-suggestion.clone:nth-child(10) { animation-delay: 0.27s !important; }