/**
 * URGENT FIXES - Header/Footer Visibility
 * Override existing template to fix white backgrounds and dark text
 */

/* ============================================
   FIX HEADER - FORCE BLACK BACKGROUND
   ============================================ */

/* Force header background to black */
.header-main,
#header,
header {
    background: #000000 !important;
    border-bottom: 1px solid rgba(255, 0, 85, 0.3) !important;
}

/* Fix header text to white */
.header-main *,
#header *,
header * {
    color: #FFFFFF !important;
}

/* Fix dropdowns - black background */
.custom-dropdown .dropdown-menu,
.navbar .dropdown ul,
ul.dropdown-menu {
    background: #000000 !important;
    border: 1px solid var(--neon-red) !important;
    box-shadow: 0 8px 30px rgba(255, 0, 85, 0.5) !important;
}

/* Fix dropdown items */
.custom-dropdown .dropdown-menu li a,
.navbar .dropdown ul li a,
ul.dropdown-menu li a {
    color: #FFFFFF !important;
    background: transparent !important;
}

.custom-dropdown .dropdown-menu li a:hover,
.navbar .dropdown ul li a:hover,
ul.dropdown-menu li a:hover {
    background: rgba(255, 0, 85, 0.2) !important;
    color: var(--neon-red) !important;
    text-shadow: 0 0 10px var(--neon-red) !important;
}

/* Fix dropdown buttons */
.custom-dropdown button,
.dropdown-toggle {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}

.custom-dropdown button:hover,
.dropdown-toggle:hover {
    background: rgba(255, 0, 85, 0.1) !important;
    border-color: var(--neon-red) !important;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.3) !important;
}

/* Fix main navigation */
.navbar .mainmenu,
#navbar .mainmenu {
    background: #000000 !important;
}

.navbar .mainmenu li a,
#navbar .mainmenu li a {
    color: #FFFFFF !important;
}

.navbar .mainmenu li a:hover,
#navbar .mainmenu li a:hover {
    color: var(--neon-red) !important;
    text-shadow: 0 0 10px var(--neon-red) !important;
}

/* Fix mobile navigation sidebar */
.nav-mobiles {
    background: #000000 !important;
    border-left: 2px solid var(--neon-red) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.9) !important;
}

.nav-mobiles * {
    color: #FFFFFF !important;
}

/* ============================================
   FIX FOOTER - FORCE BLACK BACKGROUND
   ============================================ */

/* Force footer backgrounds to black */
.footer-top,
.main-footer,
.footer-bottom,
footer {
    background: #000000 !important;
}

/* Fix all footer text to white */
.footer-top *,
.main-footer *,
.footer-bottom * {
    color: #FFFFFF !important;
}

/* Fix footer headings */
.footer_menus h4,
.footer-copyrit h6 {
    color: var(--neon-red) !important;
    text-shadow: 0 0 10px var(--neon-red) !important;
}

/* Fix footer links */
.footer_menus a,
.bottom-policy a,
.footer-support a {
    color: var(--cyber-gray) !important;
    transition: all 0.3s ease !important;
}

.footer_menus a:hover,
.bottom-policy a:hover,
.footer-support a:hover {
    color: var(--neon-green) !important;
    text-shadow: 0 0 10px var(--neon-green) !important;
    padding-left: 10px !important;
}

/* Fix social links */
.social-link ul li a,
.footer-top-right a {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

.social-link ul li a:hover,
.footer-top-right a:hover {
    background: rgba(0, 255, 136, 0.2) !important;
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 20px var(--neon-green) !important;
    transform: translateY(-3px) !important;
}

/* ============================================
   FIX CARDS - PROPER CONTRAST
   ============================================ */

/* Fix all cards to have proper text visibility */
.glass-card,
.cyber-card,
.feature-style-two,
.features-style-two,
.plan-style-one {
    background: rgba(26, 26, 36, 0.8) !important;
}

.glass-card h4,
.glass-card h5,
.cyber-card h3,
.cyber-card h4,
.feature-style-two h4,
.features-style-two h4,
.plan-style-one h5 {
    color: #FFFFFF !important;
}

.glass-card p,
.cyber-card p,
.feature-style-two p,
.features-style-two p,
.plan-style-one p,
.plan-style-one ul li {
    color: var(--cyber-gray) !important;
}

/* ============================================
   FIX SECTION TITLES
   ============================================ */

.section-title h2,
.main-hading-two h2,
.section-header-title {
    color: #FFFFFF !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
}

.section-title p,
.section-subtitle,
.main-hading-two p {
    color: var(--cyber-gray) !important;
}

.text-neon-red {
    color: var(--neon-red) !important;
    text-shadow: 0 0 10px var(--neon-red) !important;
}

.text-neon-green {
    color: var(--neon-green) !important;
    text-shadow: 0 0 10px var(--neon-green) !important;
}

/* ============================================
   FIX BUTTONS - HIGH CONTRAST
   ============================================ */

.btn-cyber-primary,
.theme-one-btn,
.theme-two-btn,
.theme-three-btn {
    background: var(--gradient-red) !important;
    color: #FFFFFF !important;
    border: 2px solid var(--neon-red) !important;
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.4) !important;
}

.btn-cyber-outline,
.btn_cyber-secondary {
    background: transparent !important;
    color: var(--neon-green) !important;
    border: 2px solid var(--neon-green) !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3) !important;
}

/* ============================================
   FIX ICONS - ENSURE VISIBILITY
   ============================================ */

.bi,
i[class*="bi-"],
i[class*="fa-"] {
    color: inherit !important;
}

/* Green icons */
.text-neon-green .bi,
.glow-green .bi,
[style*="neon-green"] .bi {
    color: var(--neon-green) !important;
    filter: drop-shadow(0 0 10px var(--neon-green)) !important;
}

/* Red icons */
.text-neon-red .bi,
.glow-red .bi,
[style*="neon-red"] .bi {
    color: var(--neon-red) !important;
    filter: drop-shadow(0 0 10px var(--neon-red)) !important;
}

/* ============================================
   FIX SCROLL TO TOP BUTTON
   ============================================ */

#scrolltoTop,
.scroll-top,
.cyber-scroll-top {
    background: var(--gradient-red) !important;
    border: 2px solid var(--neon-red) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 30px rgba(255, 0, 85, 0.5) !important;
}

/* ============================================
   ENSURE ALL TEXT IS READABLE
   ============================================ */

/* Default text color for body */
body {
    color: #FFFFFF !important;
}

/* Fix any remaining dark text on dark backgrounds */
.text-dark,
.text-black,
[class*="text-dark"] {
    color: #FFFFFF !important;
}

/* Fix all paragraph text */
p {
    color: var(--cyber-gray, #a8a8b8) !important;
}

/* Fix all heading text */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #FFFFFF !important;
}

/* ============================================
   FIX SPECIFIC PROBLEM AREAS FROM SCREENSHOT
   ============================================ */

/* Fix "Why Choose Clytrix" section */
.section-cyber h2,
.section-cyber .section-title h2 {
    color: #FFFFFF !important;
}

/* Fix feature cards text */
.glass-card .bi {
    font-size: 2.5rem !important;
}

.glass-card h4 {
    font-size: 1.25rem !important;
    margin-bottom: var(--space-sm) !important;
}

/* Ensure icons are visible */
.cyber-card-icon,
.feature-card-icon {
    opacity: 1 !important;
}

/* Fix any overlay issues */
.particles-bg {
    z-index: 1 !important;
}

.container-cyber,
.section-cyber>.container-cyber {
    position: relative !important;
    z-index: 2 !important;
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */

@media (max-width: 991px) {

    /* Fix mobile menu */
    .mobile-nav-toggle {
        color: #FFFFFF !important;
        background: rgba(255, 0, 85, 0.2) !important;
        border: 1px solid var(--neon-red) !important;
    }

    .navbar-mobile {
        background: #000000 !important;
    }

    .navbar-mobile a {
        color: #FFFFFF !important;
    }

    .navbar-mobile a:hover {
        color: var(--neon-red) !important;
    }
}

/* ============================================
   IMPORTANT OVERRIDES
   ============================================ */

/* Force black backgrounds on all potential white areas */
*[style*="background: white"],
*[style*="background:white"],
*[style*="background-color: white"],
*[style*="background-color:white"],
.bg-white,
.bg-light {
    background: #000000 !important;
}

/* Force white text on dark backgrounds */
.bg-dark *,
.bg-black * {
    color: #FFFFFF !important;
}

/* ============================================
   FIX SCROLL VISIBILITY ISSUES
   ============================================ */

/* Ensure sections don't have overflow hidden */
section,
.section-cyber,
.cyber-hero {
    overflow: visible !important;
}

/* Fix container overflow */
.container-cyber,
.container {
    overflow: visible !important;
}

/* Ensure all rows and columns are visible */
.row,
.col-lg-6,
.col-lg-5,
.col-md-6 {
    overflow: visible !important;
}

/* Fix z-index stacking context */
.section-cyber {
    position: relative !important;
    z-index: auto !important;
}

/* Ensure right-side content stays visible */
.col-lg-6:last-child,
.col-lg-5:last-child {
    position: relative !important;
    z-index: 10 !important;
}

/* Fix glassmorphic elements */
.glass,
.glass-card {
    position: relative !important;
    z-index: 5 !important;
}

/* Fix particle canvas z-index */
.particles-bg,
.particles-canvas {
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Fix grid background */
.grid-bg {
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Ensure content is above backgrounds */
.hero-content,
.section-content,
.cyber-card,
.glass-card,
.feature-card {
    position: relative !important;
    z-index: 10 !important;
}

/* Fix sticky header not covering content */
.cyber-header-wrapper,
#header,
header {
    z-index: 1000 !important;
}

/* Prevent content from being cut off */
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html {
    overflow-x: hidden !important;
}

/* ============================================
   FIX GRID LAYOUTS - ENSURE ALL CARDS VISIBLE
   ============================================ */

/* Force grid to show all children */
.grid-cyber,
.grid-4 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: var(--space-lg) !important;
    width: 100% !important;
}

/* Ensure all grid items are visible */
.grid-cyber>*,
.grid-4>* {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Fix 4-column grids specifically */
.grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1200px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .grid-4 {
        grid-template-columns: 1fr !important;
    }
}

/* Fix 3-column grids */
.grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 992px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .grid-3 {
        grid-template-columns: 1fr !important;
    }
}
/* ============================================
   FIX PHONE NUMBER COUNTRY CODE DROPDOWN
   ============================================ */

/* Phone number country code dropdown fix */
.intl-tel-input .country-list {
    background-color: #1a1a2e !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

.intl-tel-input .country-list .country {
    color: #FFFFFF !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
}

.intl-tel-input .country-list .country:hover {
    background-color: rgba(0, 255, 136, 0.1) !important;
}

.intl-tel-input .country-list .country .dial-code {
    color: #00FF88 !important;
    font-weight: 600 !important;
}

.intl-tel-input .country-list .country-name {
    color: #a8a8b8 !important;
}

.intl-tel-input .country-list .country.highlight {
    background-color: rgba(0, 255, 136, 0.15) !important;
}

/* Selected flag button */
.intl-tel-input .selected-flag {
    background-color: rgba(10, 10, 15, 0.6) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.intl-tel-input .selected-flag:hover {
    background-color: rgba(0, 255, 136, 0.05) !important;
}

/* Dropdown arrow */
.intl-tel-input .selected-flag .iti-arrow {
    border-top-color: #00FF88 !important;
}

/* Search box in dropdown */
.intl-tel-input .country-list .search-box {
    background-color: rgba(10, 10, 15, 0.8) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
    color: #FFFFFF !important;
    padding: 8px 12px !important;
}

.intl-tel-input .country-list .search-box::placeholder {
    color: #a8a8b8 !important;
}

/* ============================================
   CLIENT AREA DASHBOARD - CYBER ENHANCEMENTS
   ============================================ */

/* Stat cards glassmorphic */
.client-summary-panel, .stat-card, .tiled-stat {
    background: rgba(26, 26, 36, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.client-summary-panel:hover, .stat-card:hover {
    border-color: rgba(0, 255, 136, 0.5) !important;
    transform: translateY(-5px) !important;
}

.client-summary-panel .count, .stat-card .count {
    color: #00FF88 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5) !important;
}

/* Sidebar cyber styling */
.sidebar, .client-nav {
    background: rgba(10, 10, 15, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border-right: 1px solid rgba(255, 0, 85, 0.3) !important;
}

.sidebar .panel-heading, .list-group-heading {
    background: rgba(255, 0, 85, 0.1) !important;
    border-left: 3px solid #FF0055 !important;
    color: #FFFFFF !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
}

.sidebar a, .list-group-item {
    background: transparent !important;
    color: #a8a8b8 !important;
    transition: all 0.3s ease !important;
    border-left: 3px solid transparent !important;
}

.sidebar a:hover, .list-group-item:hover {
    background: rgba(0, 255, 136, 0.05) !important;
    border-left-color: #00FF88 !important;
    color: #00FF88 !important;
}

/* Dashboard panels */
.panel, .dashboard-panel {
    background: rgba(26, 26, 36, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
}

.panel-heading {
    background: rgba(0, 255, 136, 0.05) !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #FFFFFF !important;
}

/* No data states */
.no-data, .empty-state {
    background: rgba(255, 0, 85, 0.05) !important;
    border: 1px dashed rgba(255, 0, 85, 0.3) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    text-align: center !important;
}


/* ============================================
   HEADER VISIBILITY AND RESPONSIVENESS FIXES
   ============================================ */

/* Ensure all section titles are visible */
.section-title h2,
.section-cyber h2,
section h2 {
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Section title labels (POWERED BY, WHY CHOOSE, etc) */
.section-title span,
.text-neon-green,
.text-neon-red {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Ensure responsive font sizes */
@media (max-width: 768px) {
    .section-title h2,
    section h2,
    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    .section-title p,
    .section-subtitle {
        font-size: 0.9375rem !important;
    }
    
    /* Adjust grid layouts for mobile */
    .grid-cyber {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }
    
    /* Stack FAQ items */
    .glass-card h3 {
        font-size: 1rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    /* Responsive padding */
    .glass-card {
        padding: var(--space-md) !important;
    }
    
    .section-cyber {
        padding: var(--space-xl) 0 !important;
    }
}

/* Tablet responsiveness */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-cyber.grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .section-title h2 {
        font-size: 2rem !important;
    }
}

/* Ensure text visibility on all backgrounds */
.cyber-hero h1,
.cyber-hero h2,
.cyber-hero p {
    opacity: 1 !important;
    visibility: visible !important;
}



/* ============================================
   FIX BLURRED/INVISIBLE HEADER TEXT
   Remove all gradients and transparent fills
   ============================================ */

/* Force solid white color for all H2 headings */
.section-title h2,
.section-cyber h2,
section h2,
h2 {
    color: #FFFFFF !important;
    /* Remove any gradient fills */
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-fill-color: #FFFFFF !important;
    /* Ensure text is not transparent */
    opacity: 1 !important;
    /* Remove any filters that might blur */
    filter: none !important;
    -webkit-filter: none !important;
    /* Clear any text shadows that might cause blur */
    text-shadow: none !important;
}

/* Also fix H1 and H3 if they have the same issue */
h1, h3, h4, h5, h6 {
    -webkit-text-fill-color: inherit !important;
    text-fill-color: inherit !important;
}

/* Specifically target section titles */
.section-title h2 {
    background: transparent !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}