/* VeloxNodes Absolute Universal Lock */
:root {
    --bg-base: #07090e;
    --border-subtle: rgba(255, 157, 0, 0.15);
    --accent: #ff9d00;
    --accent-hover: #e65c00;
    --text-main: #f3f4f6;
}

/* 1. Universal Grid Background - ALWAYS */
html, body, #app, .min-h-screen {
    background-color: var(--bg-base) !important;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),radial-gradient(circle at 15% 30%,rgba(255,157,0,.06),transparent 45%),radial-gradient(circle at 85% 70%,rgba(230,92,0,.04),transparent 45%) !important;
    background-size: 50px 50px, 50px 50px, 100% 100%, 100% 100% !important;
    background-attachment: fixed !important;
    color: var(--text-main) !important;
    font-family: 'Inter', sans-serif !important;
}

/* 2. Eradicate ALL White/Light Backgrounds */
header, footer, main, nav, section,
.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300,
.dark\:bg-gray-900, .dark\:bg-gray-800, .dark\:bg-secondary-100, .dark\:bg-secondary-50 {
    background-color: transparent !important;
    border-color: var(--border-subtle) !important;
}

/* 3. Give dropdowns and floating cards a sleek dark blur */
.card, .content-box, .dropdown-menu, .shadow-lg, [x-show="open"] {
    background-color: rgba(7, 9, 14, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* 4. Force text to be light everywhere (Fixes invisible text in Light Mode) */
.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-black,
p, h1, h2, h3, h4, h5, h6, label, span, button, select, option {
    color: var(--text-main) !important;
}

/* 5. Space Grotesk Font for Headings */
h1, h2, h3, h4, h5, h6, .text-2xl, .text-xl, .font-bold {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* 6. Links and Blue Text to Orange */
a, .text-blue-600, .text-blue-500, .text-primary-600 {
    color: var(--accent) !important;
    transition: color 0.2s !important;
}
a:hover {
    color: var(--accent-hover) !important;
}

/* 7. The Orange Gradient Buttons (Register / Primary) */
button[type="submit"], a[href$="/register"], .bg-blue-600, .bg-primary-600, .bg-blue-500 {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: #000 !important;
    border: none !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(255,157,0,0.2) !important;
    transition: transform 0.25s, box-shadow 0.25s !important;
    padding: 0.5rem 1.5rem !important;
    
    align-items: center !important;
    justify-content: center !important;
}
/* Force the text INSIDE the orange buttons to be black */
button[type="submit"] *, a[href$="/register"] *, .bg-blue-600 *, .bg-primary-600 * {
    color: #000 !important; 
}
button[type="submit"]:hover, a[href$="/register"]:hover, .bg-blue-600:hover, .bg-primary-600:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(255,157,0,0.5) !important;
}

/* 8. The Login Button (Secondary Outline) */
a[href$="/login"] {
    background: rgba(255, 157, 0, 0.05) !important;
    border: 1px solid rgba(255, 157, 0, 0.4) !important;
    color: var(--text-main) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    padding: 0.5rem 1.5rem !important;
    align-items: center !important;
    justify-content: center !important;
}
a[href$="/login"] * {
    color: var(--text-main) !important;
}
a[href$="/login"]:hover {
    background: rgba(255, 157, 0, 0.15) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* 9. Inputs & Dropdowns */
input, select, textarea {
    background-color: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255, 157, 0, 0.2) !important;
    color: var(--text-main) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
    outline: none !important;
}

/* 10. Mobile Responsive & Hamburger Menu Fix */
.sm\:hidden button, .md\:hidden button, [aria-label="Toggle navigation"] {
    color: var(--accent) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Force the SVG icon to render with the VeloxNodes Orange */
.sm\:hidden button svg, .md\:hidden button svg, [aria-label="Toggle navigation"] svg {
    stroke: var(--accent) !important;
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Give the expanded mobile dropdown menu a solid dark background */
.sm\:hidden.block, .md\:hidden.block {
    background-color: rgba(18, 16, 13, 0.98) !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    backdrop-filter: blur(12px) !important;
    padding-bottom: 10px !important;
}

/* --- ULTIMATE BUTTON FIX --- */

/* 1. Register Button: Pure Orange Gradient, White Text, NO Blue */
a[href$="/register"], button[type="submit"], .bg-blue-600, .bg-blue-500, .bg-primary-600 {
    background-image: linear-gradient(135deg, #ff9d00, #e65c00) !important;
    background-color: transparent !important; /* Kills the Tailwind base blue */
    color: #ffffff !important; /* Force white text */
    border: none !important;
}

/* Ruthlessly target the inner spans to kill any bleeding blue backgrounds */
a[href$="/register"] *, button[type="submit"] *, .bg-blue-600 *, .bg-primary-600 * {
    color: #ffffff !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 2. Login Button: Clean, minimalist text (No more ridiculous box) */
a[href$="/login"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #f3f4f6 !important;
    padding: 0.5rem 1rem !important;
}

a[href$="/login"]:hover {
    background: transparent !important;
    color: #ff9d00 !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- MOBILE POLISH & ANIMATION FIXES --- */

/* 1. Nuke the Light/Dark Mode Toggle (Sun/Moon) Entirely */
button[aria-label*="theme" i], 
button[aria-label*="dark" i], 
button[aria-label*="light" i], 
button[x-on\:click*="theme"],
button[x-on\:click*="dark"],
button[wire\:click*="theme"] {
    display: none !important;
}

/* 2. Fix the nested Blue Register box on mobile */
a[href$="/register"] > div, 
a[href$="/register"] > span,
a[href$="/register"] .bg-blue-600,
a[href$="/register"] .bg-primary-600 {
    background: transparent !important;
    background-color: transparent !important;
}

/* 3. Add smooth hover animation back to the text-only Login button */
a[href$="/login"] {
    transition: all 0.3s ease-in-out !important;
    display: inline-block !important; /* Required for transform to work on text */
}
a[href$="/login"]:hover {
    transform: translateY(-2px) !important;
    color: #ff9d00 !important;
    text-shadow: 0px 4px 15px rgba(255, 157, 0, 0.4) !important;
}

/* --- ULTIMATE MOBILE MENU FIXES --- */

/* 1. Vaporize the Alpine.js Mobile Theme Toggle */
[x-data] button[x-on\:click*="dark"],
[x-data] button[x-on\:click*="theme"],
[x-data] button[x-on\:click*="toggle"],
.theme-switch, .dark-mode-toggle,
/* Target the specific wrapper next to the language dropdown */
.flex.items-center > button.text-gray-500:not([aria-label="Toggle navigation"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. Make the Login Button a highly visible "Ghost" Button */
a[href$="/login"] {
    background: rgba(255, 157, 0, 0.1) !important; /* Light orange tint */
    border: 1px solid rgba(255, 157, 0, 0.6) !important; /* Bright orange ring */
    color: #ffffff !important; /* Pure white text */
    box-shadow: 0 0 10px rgba(255, 157, 0, 0.15) !important; /* Soft outer glow */
    transition: all 0.3s ease-in-out !important;
}

/* Ensure the mobile block layout spaces it out properly */
.sm\:hidden a[href$="/login"], 
.md\:hidden a[href$="/login"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0.5rem !important; /* Prevent it from touching the Register button */
    padding: 0.75rem 1.5rem !important; /* Thicker tap target for thumbs */
}

/* Hover/Tap effect for the Login button */
a[href$="/login"]:hover, a[href$="/login"]:active {
    background: rgba(255, 157, 0, 0.25) !important;
    border-color: #ff9d00 !important;
    box-shadow: 0 0 15px rgba(255, 157, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* --- THE PRECISION DESKTOP & MOBILE SEPARATOR --- */

/* 1. DESKTOP ONLY: Make Login a Clean, Minimalist Text Link */
@media (min-width: 768px) {
    a[href$="/login"] {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #f3f4f6 !important;
        padding: 0.5rem 1rem !important;
    }
    a[href$="/login"]:hover {
        color: #ff9d00 !important;
        background: transparent !important;
        transform: translateY(-2px) !important;
    }
}

/* 2. MOBILE ONLY: Make Login a Nice Ghost Button */
@media (max-width: 767px) {
    a[href$="/login"] {
        background: rgba(255, 157, 0, 0.1) !important;
        border: 1px solid rgba(255, 157, 0, 0.6) !important;
        color: #ffffff !important;
        box-shadow: 0 0 10px rgba(255, 157, 0, 0.15) !important;
        border-radius: 6px !important;
        margin-top: 0.75rem !important;
        width: 100% !important; /* Matches the Register button width */
    }
}

/* 3. ASSASSINATE THE RESURRECTED MOON ICON */
/* This explicitly targets SVGs inside the expanded mobile menu block, hiding the moon while leaving the main nav hamburger alone */
.md\:hidden.block button svg,
.sm\:hidden.block button svg,
div[class*="pb-3"] > div > button svg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ensure the main Hamburger SVG stays visible */
button[aria-label="Toggle navigation"] svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    stroke: #ff9d00 !important;
}

/* --- EMERGENCY PATCH: DESKTOP LOGIN HOVER & MOBILE MOON --- */

/* 1. DESKTOP HOVER FIX: Nuke the gray box completely */
@media (min-width: 768px) {
    a[href$="/login"]:hover {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        color: #ff9d00 !important;
    }
    /* Target inner spans or pseudo-elements causing the box */
    a[href$="/login"]:hover::before,
    a[href$="/login"]:hover::after,
    a[href$="/login"]:hover * {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* 2. MOBILE MOON ASSASSINATION: Target its exact structural location */
/* Hides any button next to the language switcher in the mobile dropdown */
.md\:hidden.block .flex.items-center > button:not([aria-expanded]),
.sm\:hidden.block .flex.items-center > button:not([aria-expanded]),
/* Catch-all for common Tailwind Sun/Moon SVG paths */
svg[class*="sun"], svg[class*="moon"],
.md\:hidden.block button > svg:not([fill="none"]),
.sm\:hidden.block button > svg:not([fill="none"]) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -9999 !important;
}

/* --- THE FINAL TAILWIND EXORCISM --- */

/* 1. ASSASSINATE THE MOON ICON BY ITS EXACT SVG DNA */
/* This targets the exact mathematical paths used to draw the Tailwind/Feather moon icons */
button:has(svg path[d*="20.354"]), 
button:has(svg path[d*="21 12.79"]), 
button:has(svg path[d*="10 7a7 7"]),
/* Catch any Livewire/Alpine theme toggles */
button[wire\:click*="theme" i],
button[wire\:click*="dark" i],
button[wire\:click*="light" i],
/* Nuke the last button in the mobile language dropdown row */
.sm\:hidden.block .flex.items-center > button:last-child,
.md\:hidden.block .flex.items-center > button:last-child {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -9999 !important;
}

/* 2. PURGE THE DESKTOP LOGIN HOVER BOX */
/* This pierces through the <a> tag to nuke any nested <div> or <span> causing the grey box */
@media (min-width: 768px) {
    a[href$="/login"]:hover,
    a[href$="/login"]:hover > div,
    a[href$="/login"]:hover > span,
    a[href$="/login"]:hover * {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #ff9d00 !important;
    }
}

/* --- THE FINAL ALPINE.JS SNIPER --- */
/* Target the exact @click attribute revealed in DevTools */
button[\@click*="darkMode"],
button[\@click="darkMode = !darkMode"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    z-index: -9999 !important;
}

/* Fallback: Hide any button that is exactly 10x10 Tailwind units sitting in that bottom flex row */
.md\:hidden.block .flex.justify-between button.w-10.h-10,
.sm\:hidden.block .flex.justify-between button.w-10.h-10 {
    display: none !important;
}

/* --- CURSOR FIX FOR NAVBAR DROPDOWNS --- */
/* Forces the 'hand' cursor on Shop, Language, and other interactive nav toggles */
nav button, 
nav [role="button"], 
nav a:not([href]) {
    cursor: pointer !important;
}