/* Theme variables */
:root {
    --transition-speed: 0.3s;
}

/* Dark Theme (Default) */
[data-theme="dark"] {
    --bg-color: #0a0e27;
    --bg-secondary: #1a1f3a;
    --bg-tertiary: #1a1a1a;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-tertiary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.6);
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-hover: rgba(255, 255, 255, 0.2);
    --card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    --header-bg: rgba(10, 14, 39, 0.95);
    --section-bg: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 212, 255, 0.2);
}

/* Light Theme */
[data-theme="light"] {
    --bg-color: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f0f0f0;
    --text-color: #1a1a1a;
    --text-secondary: rgba(0, 0, 0, 0.8);
    --text-tertiary: rgba(0, 0, 0, 0.7);
    --text-muted: rgba(0, 0, 0, 0.6);
    --border-color: rgba(0, 0, 0, 0.08);
    --border-color-hover: rgba(0, 0, 0, 0.15);
    --card-bg: #ffffff;
    --header-bg: rgba(255, 255, 255, 0.98);
    --section-bg: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-hover: rgba(0, 0, 0, 0.12);
}

/* Apply theme globally */
html {
    background: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

body {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* All elements should inherit theme colors */
* {
    transition: background-color var(--transition-speed),
                color var(--transition-speed);
}

/* Theme toggle button */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: var(--text-color) !important;
    color: var(--bg-color) !important;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed) ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle i {
    font-size: 20px;
}

/* Bottom-left floating toggle (similar to WhatsApp float) */
.theme-toggle-bottom {
    top: auto !important;
    right: auto !important;
    bottom: 30px;
    left: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 1002; /* just above whatsapp float */
}

@media (max-width: 768px) {
    .theme-toggle-bottom {
        bottom: 100px; /* float above bottom nav on mobile if present */
        left: 20px;
    }
}

/* Force colors for all major elements */
/* h1, h2, h3, h4, h5, h6,
p, span, div, a, li {
    color: var(--text-color) !important;
} */

/* Force background across major sections (use shorthand to override gradients/images) */
/* Note: Backgrounds are handled by individual section rules for better control */

/* Forms and inputs */
input, textarea, select {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--text-color);
}

/* Specific styles for feature cards */
.feature-card {
    border: 1px solid var(--text-color) !important;
}

/* Navigation styles */
.nav-links a,
.mobile-nav-links a {
    color: var(--text-color) !important;
}

/* Footer styles */
.footer-content,
.desktop-footer {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* App navigation */
.app-footer-nav {
    background: var(--bg-color) !important;
    border-top: 1px solid var(--text-color) !important;
}

/* Mobile bottom navigation icons/text */
.app-footer-nav .footer-nav-item i,
.app-footer-nav .footer-nav-item span {
    color: var(--text-color) !important;
}

/* Mobile side menu (overlay) */
.mobile-menu,
.mobile-menu.active {
    background: var(--bg-color) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: var(--text-color) !important;
}

.mobile-menu-header {
    background: var(--bg-color) !important;
    border-bottom: 1px solid var(--text-color) !important;
}

.mobile-nav-links a {
    color: var(--text-color) !important;
    background: transparent !important;
}

.mobile-nav-links a.active {
    color: var(--text-color) !important;
    background: var(--card-bg) !important;
    border-left: 3px solid var(--text-color) !important;
}

.mobile-nav-links a:hover {
    background: rgba(0,0,0,0.05) !important;
}

/* Light-mode: make the video section items look like cards */
[data-theme="light"] .video-section .video-item {
    background: #ffffff !important; /* card surface */
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    backdrop-filter: none !important;
}

/* Light-mode: subtle title/description contrast inside demo cards */
[data-theme="light"] .video-section .video-item h4 {
    color: var(--text-color) !important;
}

[data-theme="light"] .video-section .video-item p {
    color: rgba(0,0,0,0.6) !important;
}

/* Improve slider bullets visibility in light mode */
[data-theme="light"] .slider-dots .dot {
    width: 14px !important;
    height: 14px !important;
    background: rgba(0,0,0,0.18) !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

[data-theme="light"] .slider-dots .dot.active {
    background: #01afef !important;
    box-shadow: 0 0 10px rgba(0,212,255,0.25) !important;
    transform: scale(1.15) !important;
}

[data-theme="light"] .slider-dots .dot:hover {
    transform: scale(1.1) !important;
}

/* Light mode: FAQ filter buttons visibility */
[data-theme="light"] .filter-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .filter-btn:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
    color: #01afef !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2) !important;
}

[data-theme="light"] .filter-btn.active {
    background: #01afef !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3) !important;
}

/* Light mode: Modern Header with Shadow */
[data-theme="light"] header {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Light mode: Feature Cards with Enhanced Shadows */
[data-theme="light"] .feature-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
}

[data-theme="light"] .feature-card:hover {
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-8px) !important;
}

[data-theme="light"] .feature-card h3 {
    color: var(--text-color) !important;
}

[data-theme="light"] .feature-card p {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Light mode: Tech Items with Shadows */
[data-theme="light"] .tech-item {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .tech-item:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-5px) !important;
}

[data-theme="light"] .tech-item h3 {
    color: var(--text-color) !important;
}

[data-theme="light"] .tech-item p {
    color: rgba(0, 0, 0, 0.65) !important;
}

/* Light mode: Package Options with Shadows */
[data-theme="light"] .package-option {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .package-option:hover {
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-6px) !important;
}

[data-theme="light"] .package-option.popular {
    box-shadow: 0 12px 45px rgba(0, 212, 255, 0.2) !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
}

/* Light mode: Version 2 Feature Cards */
[data-theme="light"] .version2-feature-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .version2-feature-card:hover {
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-6px) !important;
}

[data-theme="light"] .version2-feature-card h3 {
    color: var(--text-color) !important;
}

[data-theme="light"] .version2-feature-card p {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Light mode: Video Features */
[data-theme="light"] .video-feature {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
}

[data-theme="light"] .video-feature:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-5px) !important;
}

[data-theme="light"] .video-feature h4 {
    color: var(--text-color) !important;
}

[data-theme="light"] .video-feature p {
    color: rgba(0, 0, 0, 0.65) !important;
}

/* Light mode: FAQ Items */
[data-theme="light"] .faq-item {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .faq-item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .faq-item.active {
    box-shadow: 0 8px 35px rgba(0, 212, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
}

[data-theme="light"] .faq-question h3 {
    color: var(--text-color) !important;
}

[data-theme="light"] .faq-answer p {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Light mode: Buttons with Shadows */
[data-theme="light"] .cta-btn,
[data-theme="light"] .btn-secondary {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .cta-btn:hover,
[data-theme="light"] .btn-secondary:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Light mode: Package CTA Buttons */
[data-theme="light"] .package-cta {
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2) !important;
}

[data-theme="light"] .package-cta:hover {
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.3) !important;
}

/* Light mode: Version 2 CTA */
[data-theme="light"] .version2-cta {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .version2-cta h3 {
    color: var(--text-color) !important;
}

[data-theme="light"] .version2-cta p {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Light mode: Footer */
[data-theme="light"] .desktop-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .desktop-footer h3 {
    color: var(--text-color) !important;
}

[data-theme="light"] .desktop-footer p,
[data-theme="light"] .desktop-footer a,
[data-theme="light"] .desktop-footer li {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Light mode: App Footer Nav */
[data-theme="light"] .app-footer-nav {
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(20px) !important;
}

/* Light mode: WhatsApp Float Button */
[data-theme="light"] .whatsapp-float .whatsapp-btn {
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.4) !important;
}

[data-theme="light"] .whatsapp-float .whatsapp-btn:hover {
    box-shadow: 0 10px 35px rgba(37, 211, 102, 0.5) !important;
}

/* Light mode: Demo CTA Section */
[data-theme="light"] .demo-cta {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
    border-radius: 20px !important;
}

[data-theme="light"] .demo-cta p {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Light mode: Modern Transitions and Enhancements */
[data-theme="light"] .feature-card,
[data-theme="light"] .tech-item,
[data-theme="light"] .package-option,
[data-theme="light"] .version2-feature-card,
[data-theme="light"] .video-feature,
[data-theme="light"] .faq-item,
[data-theme="light"] .video-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Light mode: Section Backgrounds with Subtle Gradients */
[data-theme="light"] .features,
[data-theme="light"] .tech-stack,
[data-theme="light"] .video-section,
[data-theme="light"] .packages,
[data-theme="light"] .version2,
[data-theme="light"] .faq-section {
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%) !important;
}

/* Light mode: Enhanced Card Borders */
[data-theme="light"] .feature-card,
[data-theme="light"] .tech-item,
[data-theme="light"] .package-option,
[data-theme="light"] .version2-feature-card,
[data-theme="light"] .video-feature {
    border-radius: 16px !important;
}

/* Light mode: Modern Input Fields */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: #01afef !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15) !important;
    outline: none !important;
}

/* Light mode: Logo and Branding */
[data-theme="light"] .logo {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) !important;
}

/* Light mode: Section Titles */
[data-theme="light"] .section-title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Light mode: Mobile Menu */
[data-theme="light"] .mobile-menu {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Light mode: Package Badge */
[data-theme="light"] .package-badge {
    background: #01afef !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
    color: white !important;
}

/* Light mode: Version Badge */
[data-theme="light"] .version-badge {
    background: #01afef !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
    color: white !important;
}

/* Light mode: Tag Styling */
[data-theme="light"] .tag {
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    color: #01afef !important;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.1) !important;
}

/* Light mode: Feature Icon Enhancement */
[data-theme="light"] .feature-icon {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)) !important;
}

/* Light-mode: make the demo section cards look elevated like material cards */
[data-theme="light"] #demo .demo-card,
[data-theme="light"] .demo .demo-card {
    background: #ffffff !important; /* card surface */
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

[data-theme="light"] #demo .demo-info h3,
[data-theme="light"] .demo .demo-info h3 {
    color: var(--text-color) !important;
}

[data-theme="light"] #demo .demo-info p,
[data-theme="light"] .demo .demo-info p {
    color: rgba(0,0,0,0.65) !important;
}

/* demo-image: subtle divider and ensure thumbnail stands out */
[data-theme="light"] #demo .demo-image,
[data-theme="light"] .demo .demo-image {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

/* make CTA links inside demo more visible in light mode */
[data-theme="light"] .demo-link {
    background: linear-gradient(45deg, rgba(0,212,255,0.12), rgba(255,0,128,0.08)) !important;
    color: #01afef !important;
    border: 1px solid rgba(0,212,255,0.12) !important;
}

/* Section shadows site-wide (follow existing sections) */
/* Apply to main content containers inside sections so layout remains intact */
[data-theme="light"] #features > .container,
[data-theme="light"] #tech > .container,
[data-theme="light"] #demo > .container,
[data-theme="light"] #video > .container,
[data-theme="light"] #packages > .container,
[data-theme="light"] #version2 > .container,
[data-theme="light"] #faq > .container,
[data-theme="light"] .desktop-footer > .container {
    background: var(--bg-color) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.06) !important;
}

/* Dark theme: subtle embossed effect so sections stand out without bright surfaces */
[data-theme="dark"] #features > .container,
[data-theme="dark"] #tech > .container,
[data-theme="dark"] #demo > .container,
[data-theme="dark"] #video > .container,
[data-theme="dark"] #packages > .container,
[data-theme="dark"] #version2 > .container,
[data-theme="dark"] #faq > .container,
[data-theme="dark"] .desktop-footer > .container {
    background: var(--bg-color) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 30px rgba(255,255,255,0.02) !important;
}

/* General fallback: apply subtle card-like shadows to remaining sections and common cards in light theme
   This catches containers not explicitly listed above without disturbing already-styled components. */
[data-theme="light"] section > .container,
[data-theme="light"] .section > .container,
[data-theme="light"] .card,
[data-theme="light"] .card-inner,
[data-theme="light"] .content-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .tech-item,
[data-theme="light"] .package-option {
    background: var(--bg-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.06) !important;
    transition: box-shadow 0.25s ease, transform 0.2s ease !important;
}

[data-theme="light"] section > .container:hover,
[data-theme="light"] .section > .container:hover,
[data-theme="light"] .card:hover,
[data-theme="light"] .card-inner:hover,
[data-theme="light"] .content-card:hover,
[data-theme="light"] .feature-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.08) !important;
}

/* Add vertical padding to sections site-wide (desktop & mobile responsive) */
section,
.section,
section > .container,
.section > .container {
    padding: 40px 10px !important; /* desktop spacing */
}

@media (max-width: 992px) {
    section,
    .section,
    section > .container,
    .section > .container {
        padding: 48px 10px !important; /* tablet */
    }
}

@media (max-width: 576px) {
    section,
    .section,
    section > .container,
    .section > .container {
        padding: 28px 10px !important; /* mobile */
    }
}