/*!
Theme Name: Essentials
Theme URI: https://essentials.pixfort.com/
Author: pixfort
Author URI: https://1.envato.market/pixfort
Description: Essentials theme
Version: 4.3.0
License: Envato Marketplaces Split License
License URI: https://themeforest.net/licenses/standard
Text Domain: essentials
Tags: header-builder, footer-builder, divider-builder, popup-builder, premium-design, translation-ready
Requires PHP: 7.4
Tested up to: 7.1
*/

/* ==========================================================================
   Cyberpunk UI/UX Overhaul
   ========================================================================== */

/* Global Dark Mode */
body, 
#page, 
.pix-main-wrapper, 
.site-content,
.main-content,
.vc_row,
.wpb_wrapper,
.pix-content-box,
footer,
header {
    background-color: #0a0a0a !important;
    color: #e0e0e0 !important;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6, 
.text-heading-default, 
.font-weight-bold {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
}

body, p, a, span, div, li, td, th {
    font-family: 'Rajdhani', sans-serif !important;
}

/* Glassmorphism UI */
.vc_row.wpb_row, 
.wpb_column > .vc_column-inner,
.pix-content-box,
.card,
.pix-pricing-table,
.widget {
    background: rgba(20, 20, 25, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Remove default margins to fit glassmorphism if needed */
.vc_row {
    margin-bottom: 30px !important;
}

/* Neon Accents - Primary (Cyan) */
a {
    color: #00FFFF !important;
    transition: all 0.3s ease !important;
}
a:hover {
    color: #BF00FF !important;
    text-shadow: 0 0 8px rgba(191, 0, 255, 0.6) !important;
}

/* Buttons */
.btn,
.vc_btn3,
button,
input[type="submit"] {
    background: transparent !important;
    color: #00FFFF !important;
    border: 1px solid #00FFFF !important;
    border-radius: 4px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2), inset 0 0 5px rgba(0, 255, 255, 0.1) !important;
}

.btn:hover,
.vc_btn3:hover,
button:hover,
input[type="submit"]:hover {
    background: rgba(0, 255, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(0, 255, 255, 0.4) !important;
    border-color: #00FFFF !important;
    color: #ffffff !important;
    text-shadow: 0 0 5px #ffffff !important;
    transform: translateY(-2px) !important;
}

/* Secondary Accents (Electric Purple) */
.text-primary,
.bg-primary,
.btn-primary {
    color: #BF00FF !important;
    border-color: #BF00FF !important;
    box-shadow: 0 0 5px rgba(191, 0, 255, 0.2), inset 0 0 5px rgba(191, 0, 255, 0.1) !important;
}
.btn-primary:hover {
    background: rgba(191, 0, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(191, 0, 255, 0.6), inset 0 0 10px rgba(191, 0, 255, 0.4) !important;
    border-color: #BF00FF !important;
}

/* Interactive Glows for other elements */
.wpb_single_image img {
    border-radius: 8px !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}
.wpb_single_image:hover img {
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.5) !important;
}

/* Inputs and Forms */
input[type="text"],
input[type="email"],
textarea,
select {
    background: rgba(10, 10, 10, 0.8) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    color: #00FFFF !important;
    font-family: 'Rajdhani', sans-serif !important;
}
input:focus,
textarea:focus {
    outline: none !important;
    border-color: #00FFFF !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
}

/* WPBakery specific overrides to strip default backgrounds */
.wpb_column, .vc_column-inner {
    background-color: transparent !important;
}

/* ==========================================================================
   Deep Cyberpunk Overhaul (Phase 2)
   ========================================================================== */

/* Grid Pattern Background */
body, #page {
    background-image: 
        linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    background-color: #050505 !important; /* Slightly darker to make grid pop */
}

/* Deep Glassmorphism for PixFort Specific Classes */
.cyberpunk-box,
.pix-promo-box,
.pix-card,
.pix_feature,
.pix-pricing-table,
.pix-content-box,
.pix-slider,
.pix-testimonial {
    background: rgba(10, 15, 20, 0.8) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.1) !important;
    position: relative;
    overflow: hidden;
}

/* Add a glowing top edge to boxes */
.cyberpunk-box::before,
.pix-promo-box::before,
.pix-card::before,
.pix_feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00FFFF, #BF00FF, transparent);
    z-index: 10;
}

/* Synthetic Holographic Filters for Images */
img {
    filter: hue-rotate(5deg) saturate(1.2) contrast(1.1) drop-shadow(0 0 8px rgba(0,255,255,0.2)) !important;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 10px;
    background: #050505;
}
::-webkit-scrollbar-thumb {
    background: #00FFFF;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}
::-webkit-scrollbar-thumb:hover {
    background: #BF00FF;
    box-shadow: 0 0 10px rgba(191, 0, 255, 0.8);
}

/* Glowing text selection */
::selection {
    background: rgba(191, 0, 255, 0.5);
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

/* ==========================================================================
   Phase 3: Deep Visual Fixes & Polish
   ========================================================================== */

/* 1. Fix Invisible Nav Links */
.pix-nav-link,
.pix-header-text,
.navbar .nav-link,
.text-black,
.text-dark {
    color: #ffffff !important;
}
.pix-nav-link:hover,
.navbar .nav-link:hover {
    color: #00FFFF !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.8) !important;
}

/* 2. Fix Clashing White Shape Dividers */
.pix-shape-divider svg,
.pix-shape-div svg,
.pix-divider svg path {
    fill: #0a0a0a !important;
    stroke: none !important;
}
/* Invert any structural white elements or generic SVGs causing glares */
.bg-white,
.pix-bg-white,
.pix-bg-light,
.elementor-shape {
    background-color: transparent !important;
}
/* Force invert filter on pure white images or backgrounds acting as shapes */
.pix-shape-divider[style*="background-image"],
.pix-shape-div[style*="background-image"] {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* 3. Fix Text Collision in Cards */
.cyberpunk-box h1,
.cyberpunk-box h2,
.cyberpunk-box h3,
.cyberpunk-box h4,
.cyberpunk-box h5,
.cyberpunk-box h6,
.pix-promo-box h1,
.pix-promo-box h2,
.pix-promo-box h3,
.pix-promo-box h4,
.pix-promo-box h5,
.pix-promo-box h6 {
    margin-bottom: 20px !important;
    line-height: 1.4 !important;
    padding-bottom: 5px !important;
}

/* Force paragraph and span colors in glass boxes */
.cyberpunk-box p,
.cyberpunk-box span,
.pix-promo-box p,
.pix-promo-box span,
.pix-content-box p,
.pix-content-box span {
    color: #d0d0d0 !important;
}

/* 4. Fix Cookie Banner */
[class*="cookie"],
[id*="cookie"] {
    background: rgba(10, 10, 15, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid #BF00FF !important;
    color: #fff !important;
}
[class*="cookie"] a,
[class*="cookie"] button {
    color: #00FFFF !important;
}