/* Custom Styles for Marmita Fit Presell (Harmonized with Producer Site Colors) */

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

::-webkit-scrollbar-track {
    background: #070a08; /* Dark organic charcoal */
}

::-webkit-scrollbar-thumb {
    background: #0f9407; /* Vibrant green */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffb800; /* Warm gold/orange */
}

/* 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(8, 11, 9, 0.7); /* Dark green-charcoal */
    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(15, 148, 7, 0.5), 0 0 20px rgba(15, 148, 7, 0.3);
}

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

.neon-border-blue:hover {
    box-shadow: 0 0 15px rgba(15, 148, 7, 0.5);
    border-color: rgba(15, 148, 7, 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(15, 148, 7, 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, #0f9407, #ffb800);
}

/* ==========================================
   Light Theme Overrides
   ========================================== */
body.light-theme {
    background-color: #f5f3ef !important; /* Producer site cream background */
    color: #222222 !important; /* Producer site dark text */
}

body.light-theme .text-white {
    color: #222222 !important;
}

/* Maintain white text on colored buttons/badges in light theme */
body.light-theme .text-white-keep,
body.light-theme .bg-brand-blue,
body.light-theme .bg-brand-purple,
body.light-theme .bg-gradient-to-r,
body.light-theme .demo-bar-blue-bg,
body.light-theme .btn-whatsapp,
body.light-theme button#accept-consent {
    color: #FFFFFF !important;
}

body.light-theme .text-gray-300 {
    color: #444444 !important;
}

body.light-theme .text-gray-400 {
    color: #555555 !important;
}

body.light-theme .text-gray-500 {
    color: #777777 !important;
}

body.light-theme .glass-card {
    background: rgba(15, 148, 7, 0.02) !important;
    border-color: rgba(15, 148, 7, 0.08) !important;
    color: #222222 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
}

body.light-theme .glass-nav {
    background: rgba(245, 243, 239, 0.8) !important;
    border-bottom-color: rgba(15, 148, 7, 0.08) !important;
}

body.light-theme header nav a {
    color: #555555 !important;
}

body.light-theme header nav a:hover {
    color: #0f9407 !important;
}

body.light-theme #themeToggle {
    border-color: rgba(15, 148, 7, 0.15) !important;
    color: #222222 !important;
}

body.light-theme #themeToggle:hover {
    border-color: #0f9407 !important;
    color: #0f9407 !important;
}

body.light-theme .bg-brand-dark\/50 {
    background-color: rgba(237, 235, 231, 0.5) !important; /* Darker cream */
}

body.light-theme .bg-gray-900\/50 {
    background-color: rgba(237, 235, 231, 0.6) !important;
    border-color: rgba(15, 148, 7, 0.08) !important;
}

body.light-theme .bg-gray-900\/80 {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(15, 148, 7, 0.08) !important;
}

body.light-theme .bg-gray-900\/40 {
    background-color: rgba(237, 235, 231, 0.4) !important;
    border-color: rgba(15, 148, 7, 0.08) !important;
}

body.light-theme .border-white\/10 {
    border-color: rgba(15, 148, 7, 0.08) !important;
}

body.light-theme .border-gray-800 {
    border-color: rgba(15, 148, 7, 0.08) !important;
}

body.light-theme footer {
    background-color: #edebe7 !important; /* Darker cream footer */
    border-top-color: rgba(15, 148, 7, 0.08) !important;
}

body.light-theme footer p {
    color: #555555 !important;
}

body.light-theme footer a {
    color: #555555 !important;
}

body.light-theme footer a:hover {
    color: #0f9407 !important;
}

body.light-theme .bg-gradient-to-br.from-gray-800\/50.to-gray-900\/50 {
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.8), rgba(237, 235, 231, 0.8)) !important;
    border-color: rgba(15, 148, 7, 0.08) !important;
}

body.light-theme .bg-gray-800\/80 {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(15, 148, 7, 0.08) !important;
}

/* Make CTA button green in Light Mode, matching producer */
body.light-theme .bg-white.text-brand-dark {
    background-color: #0f9407 !important;
    color: #FFFFFF !important;
}

body.light-theme .bg-white.text-brand-dark:hover {
    background-color: #0d8206 !important;
}

body.light-theme .border-white\/20 {
    border-color: rgba(15, 148, 7, 0.15) !important;
}

body.light-theme .border-white\/20:hover {
    background-color: rgba(15, 148, 7, 0.05) !important;
}

body.light-theme #consent-popup {
    background-color: rgba(245, 243, 239, 0.98) !important;
    border-top-color: rgba(15, 148, 7, 0.08) !important;
}

body.light-theme #consent-popup p {
    color: #444444 !important;
}

/* ==========================================
   Demo Bar (Top Navigation) Styles
   ========================================== */
:root {
    --demo-bg: rgba(8, 11, 9, 0.85);
    --demo-border: rgba(255, 255, 255, 0.05);
    --demo-text: #FFFFFF;
    --demo-text-muted: #C9CED4;
    --demo-blue: #008AED;
}

body.light-theme {
    --demo-bg: rgba(245, 243, 239, 0.85);
    --demo-border: rgba(15, 148, 7, 0.08);
    --demo-text: #222222;
    --demo-text-muted: #555555;
}

.demo-bar-bg {
    background-color: var(--demo-bg) !important;
    border-color: var(--demo-border) !important;
}

.demo-bar-text {
    color: var(--demo-text) !important;
}

.demo-bar-text-muted {
    color: var(--demo-text-muted) !important;
}

.demo-bar-blue-text {
    color: var(--demo-blue) !important;
}

.demo-bar-blue-bg {
    background-color: var(--demo-blue) !important;
}

/* Color-mix badges for Demo Bar */
.demo-badge-border {
    border-color: color-mix(in srgb, var(--demo-blue) 20%, transparent) !important;
}

.demo-badge-bg {
    background-color: color-mix(in srgb, var(--demo-blue) 5%, transparent) !important;
}