/* NEO-BRUTALISM GAMING STYLE - COMPACT VERSION */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700;900&display=swap');

:root {
    /* Colors - Bold & Vibrant */
    --nb-yellow: #FFD700;
    --nb-pink: #FF1493;
    --nb-cyan: #00FFFF;
    --nb-lime: #00FF00;
    --nb-orange: #FF6B00;
    --nb-purple: #9D00FF;
    --nb-bg: #0A0E27;
    --nb-card: #1A1F3A;
    --nb-text: #FFFFFF;
    --nb-border: 4px;
    --nb-shadow: 6px 6px 0px;
}

/* Override existing styles */
body {
    font-family: 'Space Grotesk', 'Rajdhani', sans-serif !important;
    background: var(--nb-bg) !important;
}

/* Grid Background - Retro Style */
body::before {
    background-image: 
        linear-gradient(var(--nb-cyan) 2px, transparent 2px),
        linear-gradient(90deg, var(--nb-cyan) 2px, transparent 2px) !important;
    background-size: 60px 60px !important;
    opacity: 0.05 !important;
}

/* Navigation - Neo-Brutal */
.cyber-nav, .nb-nav {
    background: var(--nb-card) !important;
    border-bottom: var(--nb-border) solid var(--nb-yellow) !important;
    box-shadow: 0 var(--nb-border) 0 var(--nb-yellow) !important;
}

.nav-logo, .nb-logo {
    color: var(--nb-yellow) !important;
    text-shadow: 3px 3px 0 var(--nb-pink) !important;
    font-weight: 900 !important;
}

.nav-link {
    border: 2px solid transparent !important;
    font-weight: 900 !important;
    transition: all 0.15s ease !important;
}

.nav-link:hover {
    background: var(--nb-cyan) !important;
    color: var(--nb-bg) !important;
    border-color: var(--nb-bg) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 var(--nb-bg) !important;
}

/* Hero Section */
.hero-badge {
    background: var(--nb-lime) !important;
    color: var(--nb-bg) !important;
    border: 3px solid var(--nb-bg) !important;
    font-weight: 900 !important;
    box-shadow: 4px 4px 0 var(--nb-bg) !important;
}

.hero-title {
    text-shadow: 4px 4px 0 var(--nb-pink) !important;
}

/* Product Cards - Bold Style */
.app-card .card-inner,
.nb-product-card {
    border: var(--nb-border) solid var(--nb-text) !important;
    box-shadow: var(--nb-shadow) var(--nb-yellow) !important;
    transition: all 0.2s ease !important;
}

.app-card:hover .card-inner {
    transform: translate(-3px, -3px) !important;
    box-shadow: 8px 8px 0 var(--nb-yellow) !important;
}

.card-name, .nb-product-title {
    color: var(--nb-yellow) !important;
    font-weight: 900 !important;
}

.card-price, .nb-product-price {
    color: var(--nb-lime) !important;
    font-weight: 900 !important;
}

.card-btn {
    border: 3px solid var(--nb-cyan) !important;
    background: transparent !important;
    color: var(--nb-cyan) !important;
    font-weight: 900 !important;
    transition: all 0.15s ease !important;
}

.app-card:hover .card-btn {
    background: var(--nb-cyan) !important;
    color: var(--nb-bg) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 var(--nb-bg) !important;
}

/* Badges */
.card-badge, .nb-badge {
    border: 2px solid var(--nb-bg) !important;
    font-weight: 900 !important;
    box-shadow: 3px 3px 0 var(--nb-bg) !important;
}

.badge-ready { background: var(--nb-lime) !important; color: var(--nb-bg) !important; }
.badge-sold { background: var(--nb-pink) !important; color: var(--nb-text) !important; }
.badge-multi { background: var(--nb-yellow) !important; color: var(--nb-bg) !important; }

/* Search Input */
.search-input, .nb-input {
    border: 3px solid var(--nb-text) !important;
    background: var(--nb-card) !important;
    box-shadow: 5px 5px 0 var(--nb-cyan) !important;
    font-weight: 700 !important;
}

.search-input:focus, .nb-input:focus {
    border-color: var(--nb-yellow) !important;
    box-shadow: 7px 7px 0 var(--nb-yellow) !important;
    transform: translate(-2px, -2px) !important;
}

/* Buttons */
.nb-btn, .cyber-submit, .topbar-btn {
    border: var(--nb-border) solid var(--nb-text) !important;
    background: var(--nb-yellow) !important;
    color: var(--nb-bg) !important;
    box-shadow: var(--nb-shadow) var(--nb-text) !important;
    font-weight: 900 !important;
    transition: all 0.15s ease !important;
}

.nb-btn:hover, .cyber-submit:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 4px 4px 0 var(--nb-text) !important;
}

.nb-btn:active {
    transform: translate(6px, 6px) !important;
    box-shadow: 0 0 0 var(--nb-text) !important;
}

/* Cards & Panels */
.nb-card, .panel, .stat-card {
    background: var(--nb-card) !important;
    border: var(--nb-border) solid var(--nb-text) !important;
    box-shadow: var(--nb-shadow) var(--nb-yellow) !important;
}

.panel-head, .nb-card-header {
    border-bottom: 3px solid var(--nb-yellow) !important;
}

/* Tables */
.data-table, .nb-table {
    border: var(--nb-border) solid var(--nb-text) !important;
}

.data-table thead, .nb-table thead {
    background: var(--nb-yellow) !important;
    color: var(--nb-bg) !important;
}

.data-table th, .nb-table th {
    font-weight: 900 !important;
    border-bottom: 3px solid var(--nb-bg) !important;
}

.data-table td, .nb-table td {
    border-bottom: 2px solid var(--nb-text) !important;
}

/* Sidebar */
.sidebar, .nb-sidebar {
    background: var(--nb-card) !important;
    border-right: var(--nb-border) solid var(--nb-pink) !important;
}

.sidebar-logo, .nb-sidebar-header {
    border-bottom: 3px solid var(--nb-pink) !important;
}

.sidebar-logo a, .nb-sidebar-title {
    color: var(--nb-pink) !important;
    text-shadow: 2px 2px 0 var(--nb-yellow) !important;
}

.nav-item, .nb-sidebar-item {
    border-left: 4px solid transparent !important;
    font-weight: 700 !important;
}

.nav-item:hover, .nav-item.active {
    border-left-color: var(--nb-yellow) !important;
    background: var(--nb-bg) !important;
    color: var(--nb-yellow) !important;
}

/* Alerts */
.cyber-alert, .nb-alert {
    border: 3px solid !important;
    font-weight: 700 !important;
    box-shadow: 5px 5px 0 !important;
}

.cyber-alert.ok, .nb-alert-success {
    background: var(--nb-lime) !important;
    color: var(--nb-bg) !important;
    border-color: var(--nb-bg) !important;
    box-shadow: 5px 5px 0 var(--nb-bg) !important;
}

.cyber-alert.err, .nb-alert-danger {
    background: var(--nb-pink) !important;
    color: var(--nb-text) !important;
    border-color: var(--nb-text) !important;
    box-shadow: 5px 5px 0 var(--nb-text) !important;
}

/* Status Badges */
.status-badge, .st-success {
    border: 2px solid var(--nb-bg) !important;
    font-weight: 900 !important;
}

.st-success { background: var(--nb-lime) !important; color: var(--nb-bg) !important; }
.st-pending { background: var(--nb-yellow) !important; color: var(--nb-bg) !important; }
.st-rejected { background: var(--nb-pink) !important; color: var(--nb-text) !important; }

/* WhatsApp Float Button */
.wa-float, .nb-fab {
    width: 65px !important;
    height: 65px !important;
    background: var(--nb-lime) !important;
    border: 4px solid var(--nb-bg) !important;
    box-shadow: 6px 6px 0 var(--nb-bg) !important;
    transition: all 0.2s ease !important;
}

.wa-float:hover, .nb-fab:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 8px 8px 0 var(--nb-bg) !important;
}

/* Footer */
.cyber-footer-v2 {
    background: var(--nb-card) !important;
    border-top: var(--nb-border) solid var(--nb-yellow) !important;
    overflow: hidden !important;
}

.ftv2-inner {
    max-width: 100% !important;
    overflow: hidden !important;
}

.ftv2-line {
    max-width: 100% !important;
    overflow: hidden !important;
}

.ftv2-logo {
    color: var(--nb-cyan) !important;
    text-shadow: 3px 3px 0 var(--nb-pink) !important;
}

.ftv2-wa {
    background: var(--nb-lime) !important;
    color: var(--nb-bg) !important;
    border: 3px solid var(--nb-bg) !important;
    box-shadow: 4px 4px 0 var(--nb-bg) !important;
    font-weight: 900 !important;
}

.ftv2-wa:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--nb-bg) !important;
}

/* Social Proof Popup */
.sp-popup {
    border: 3px solid var(--nb-cyan) !important;
    box-shadow: 6px 6px 0 var(--nb-cyan) !important;
    background: var(--nb-card) !important;
}

/* Announcement */
.ann-box {
    border: var(--nb-border) solid var(--nb-cyan) !important;
    box-shadow: 0 0 40px var(--nb-cyan) !important;
}

.ann-btn-close {
    background: var(--nb-pink) !important;
    border: 3px solid var(--nb-text) !important;
    box-shadow: 4px 4px 0 var(--nb-text) !important;
    font-weight: 900 !important;
}

.ann-btn-close:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--nb-text) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    :root {
        --nb-border: 3px;
        --nb-shadow: 4px 4px 0px;
    }
    
    .wa-float, .nb-fab {
        width: 55px !important;
        height: 55px !important;
    }
}

/* Animation Enhancements */
@keyframes nb-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero-badge::before {
    animation: nb-bounce 2s infinite !important;
}

/* Utility Classes */
.nb-text-yellow { color: var(--nb-yellow) !important; }
.nb-text-pink { color: var(--nb-pink) !important; }
.nb-text-cyan { color: var(--nb-cyan) !important; }
.nb-text-lime { color: var(--nb-lime) !important; }

.nb-bg-yellow { background: var(--nb-yellow) !important; }
.nb-bg-pink { background: var(--nb-pink) !important; }
.nb-bg-cyan { background: var(--nb-cyan) !important; }
.nb-bg-lime { background: var(--nb-lime) !important; }