/* Custom Styles for Futuristic Trader Pressel */

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #60a5fa;
}

/* Glassmorphism Utilities */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.glass-nav {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Neon Glows */
.neon-text-blue {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3);
}

.neon-text-purple {
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.3);
}

.neon-border-blue:hover {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
    border-color: rgba(59, 130, 246, 0.5);
}

/* Background Gradients & Shapes */
.bg-gradient-radial {
    background: radial-gradient(circle at center, var(--tw-gradient-stops));
}

.ftza-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}

/* Animations */
.cursor-blink {
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Utility */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #3b82f6, #a855f7);
}

/* --- Light/Dark Theme Variables --- */
:root {
    --bg-color: #FFFFFF; /* Matches producer's white background sections */
    --text-color: #191C1F; /* Matches producer's dark grey text */
    --text-muted: #5F5F5F; /* Matches producer's muted text color */
    --brand-blue: #008AED; /* Expertt Cursos Electric Blue */
    --brand-purple: #13C081; /* Expertt Cursos Emerald Green */
    --brand-accent: #EF4E23; /* Expertt Cursos Red-Orange */
    --card-bg: #F0F2F5; /* Soft light grey card background */
    --card-border: rgba(25, 28, 31, 0.08);
    --nav-bg: rgba(255, 255, 255, 0.85);
    --nav-border: rgba(25, 28, 31, 0.08);
}

html:not(.light-theme) {
    --bg-color: #141414; /* Matches producer's dark background sections exactly */
    --text-color: #FFFFFF;
    --text-muted: #C9CED4; /* Matches producer's light grey text color */
    --brand-blue: #008AED;
    --brand-purple: #13C081;
    --brand-accent: #EF4E23;
    --card-bg: #1F1F1F; /* Matches producer's dark group card background exactly */
    --card-border: rgba(255, 255, 255, 0.05);
    --nav-bg: rgba(20, 20, 20, 0.75);
    --nav-border: rgba(255, 255, 255, 0.05);
}

body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light theme overrides */
html.light-theme .text-gray-400,
html.light-theme .text-gray-300,
html.light-theme .text-slate-300 {
    color: var(--text-muted) !important;
}

html.light-theme .text-white {
    color: var(--text-color) !important;
}

html.light-theme .glass-card {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

html.light-theme .glass-nav {
    background: var(--nav-bg) !important;
    border-color: var(--nav-border) !important;
}

/* Light theme overrides for hardcoded Tailwind dark classes */
html.light-theme .bg-gray-900\/50,
html.light-theme .bg-gray-900\/80,
html.light-theme .bg-gray-900\/40,
html.light-theme .bg-gray-900\/95 {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

html.light-theme .bg-gray-800\/80 {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: var(--text-color) !important;
}

html.light-theme .border-gray-800,
html.light-theme .border-white\/10,
html.light-theme .border-white\/5 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html.light-theme footer.bg-black\/50 {
    background-color: #F1F5F9 !important;
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

html.light-theme footer p.text-gray-500 {
    color: var(--text-muted) !important;
}

/* Soften background blobs in light theme */
html.light-theme .fixed.inset-0.z-\[-1\] div {
    opacity: 0.25 !important;
}

/* Maintain white text on colored buttons/badges */
html.light-theme .text-white-keep,
html.light-theme a[href="#oferta"],
html.light-theme .bg-brand-blue,
html.light-theme .bg-brand-purple,
html.light-theme .bg-gradient-to-r,
html.light-theme .btn-whatsapp,
html.light-theme .btn-white-text,
html.light-theme button#accept-consent,
html.light-theme .bg-white-keep {
    color: #FFFFFF !important;
}

/* Dark color text overrides for white background button */
html.light-theme .px-8.py-4.rounded-lg.bg-white {
    background-color: var(--text-color) !important;
    color: #FFFFFF !important;
}

/* Make sure text gradients are still gradients and readable */
html.light-theme .text-gradient {
    background-image: linear-gradient(to right, var(--brand-blue), var(--brand-purple)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* The wireframe box background and outline */
html.light-theme .bg-brand-dark\/50 {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Theme Toggle Icon Display */
html.light-theme .html-light-hidden {
    display: none !important;
}

html:not(.light-theme) .html-light-block {
    display: none !important;
}

html.light-theme .html-light-block {
    display: block !important;
}

/* Hover overrides for light theme */
html.light-theme .hover\:text-white:hover {
    color: var(--text-color) !important;
}

/* Specific green text in light theme for 2D, 3D model card */
html.light-theme .ftza-visual .text-sm.text-gray-400 {
    color: var(--brand-purple) !important;
    font-weight: 600 !important;
}

/* Semi-transparent container for the card text to ensure maximum contrast and polish */
html.light-theme .ftza-visual .mt-8.text-center {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 12px !important;
    padding: 0.5rem 1.25rem !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
    display: inline-block !important;
}

/* Color opacity helpers using color-mix for Tailwind fallback compatibility */
.bg-brand-blue-5 { background-color: color-mix(in srgb, var(--brand-blue) 5%, transparent) !important; }
.bg-brand-blue-10 { background-color: color-mix(in srgb, var(--brand-blue) 10%, transparent) !important; }
.bg-brand-blue-20 { background-color: color-mix(in srgb, var(--brand-blue) 20%, transparent) !important; }
.border-brand-blue-20 { border-color: color-mix(in srgb, var(--brand-blue) 20%, transparent) !important; }
.border-brand-blue-30 { border-color: color-mix(in srgb, var(--brand-blue) 30%, transparent) !important; }

.bg-brand-purple-5 { background-color: color-mix(in srgb, var(--brand-purple) 5%, transparent) !important; }
.bg-brand-purple-10 { background-color: color-mix(in srgb, var(--brand-purple) 10%, transparent) !important; }
.bg-brand-purple-20 { background-color: color-mix(in srgb, var(--brand-purple) 20%, transparent) !important; }
.border-brand-purple-20 { border-color: color-mix(in srgb, var(--brand-purple) 20%, transparent) !important; }
.border-brand-purple-30 { border-color: color-mix(in srgb, var(--brand-purple) 30%, transparent) !important; }

.bg-brand-accent-10 { background-color: color-mix(in srgb, var(--brand-accent) 10%, transparent) !important; }

.bg-gradient-cta {
    background-image: linear-gradient(to bottom, var(--bg-color) 0%, color-mix(in srgb, var(--brand-blue) 10%, transparent) 100%) !important;
}