/* Light Theme Override for Landing Page Preview */
/* Add ?theme=light to the URL to see the landing page with light colors */

body.light-theme,
body[data-theme="light"] {
  background: #fafbfc !important;
  color: #1a1a1a !important;
}

body.light-theme::before,
body[data-theme="light"]::before {
  background: 
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(6, 182, 212, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.02) 0%, transparent 50%) !important;
}

/* Navbar */
body.light-theme .navbar,
body[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .navbar.scrolled,
body[data-theme="light"] .navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .nav-links a,
body[data-theme="light"] .nav-links a {
  color: #4b5563 !important;
}

body.light-theme .nav-links a:hover,
body[data-theme="light"] .nav-links a:hover {
  color: #1a1a1a !important;
}

body.light-theme .nav-links a.active,
body[data-theme="light"] .nav-links a.active {
  color: var(--primary) !important;
}

body.light-theme .btn-nav-primary,
body[data-theme="light"] .btn-nav-primary {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
}

body.light-theme .btn-nav-login,
body[data-theme="light"] .btn-nav-login {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #2563eb !important;
  border: 1.5px solid #3b82f6 !important;
}

body.light-theme .btn-nav-login:hover,
body[data-theme="light"] .btn-nav-login:hover {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #1d4ed8 !important;
  border-color: #2563eb !important;
}

/* Hero Section */
body.light-theme .hero,
body[data-theme="light"] .hero {
  background: #fafbfc !important;
  color: #1a1a1a !important;
}

body.light-theme .hero-background,
body[data-theme="light"] .hero-background {
  background: transparent !important;
}

body.light-theme .gradient-orb,
body[data-theme="light"] .gradient-orb {
  opacity: 0.1 !important;
}

body.light-theme .hero-badge,
body[data-theme="light"] .hero-badge {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

body.light-theme .hero-title,
body[data-theme="light"] .hero-title {
  color: #1a1a1a !important;
}

body.light-theme .hero-subtitle,
body[data-theme="light"] .hero-subtitle {
  color: #4b5563 !important;
}

body.light-theme .hero-stats,
body[data-theme="light"] .hero-stats {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid #e5e7eb !important;
  backdrop-filter: blur(10px) !important;
}

body.light-theme .hero-stats-item,
body[data-theme="light"] .hero-stats-item {
  color: #1a1a1a !important;
}

body.light-theme .hero-stats-item strong,
body[data-theme="light"] .hero-stats-item strong {
  color: var(--primary) !important;
}

/* Buttons */
body.light-theme .btn,
body[data-theme="light"] .btn {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #e5e7eb !important;
}

body.light-theme .btn:hover,
body[data-theme="light"] .btn:hover {
  background: #f9fafb !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

body.light-theme .btn-primary,
body[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

body.light-theme .btn-primary:hover,
body[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  background-color: #2563eb !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3) !important;
}

/* Sections */
body.light-theme .section,
body[data-theme="light"] .section {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

body.light-theme .section-alt,
body[data-theme="light"] .section-alt {
  background: #fafbfc !important;
}

body.light-theme .section-title,
body[data-theme="light"] .section-title {
  color: #1a1a1a !important;
}

body.light-theme .section-subtitle,
body[data-theme="light"] .section-subtitle {
  color: #4b5563 !important;
}

/* Feature Cards */
body.light-theme .feature-card,
body[data-theme="light"] .feature-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #1a1a1a !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .feature-card:hover,
body[data-theme="light"] .feature-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .feature-card h3,
body[data-theme="light"] .feature-card h3 {
  color: #1a1a1a !important;
}

body.light-theme .feature-card p,
body[data-theme="light"] .feature-card p {
  color: #4b5563 !important;
}

/* Code Blocks */
body.light-theme .code-block,
body[data-theme="light"] .code-block {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  color: #1a1a1a !important;
}

/* Footer */
body.light-theme .footer,
body[data-theme="light"] .footer {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  color: #4b5563 !important;
}

body.light-theme .footer a,
body[data-theme="light"] .footer a {
  color: #4b5563 !important;
}

body.light-theme .footer a:hover,
body[data-theme="light"] .footer a:hover {
  color: var(--primary) !important;
}

/* How It Works Steps */
body.light-theme .step-card,
body[data-theme="light"] .step-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #1a1a1a !important;
}

body.light-theme .step-number,
body[data-theme="light"] .step-number {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--primary) !important;
}

/* CTA Sections */
body.light-theme .cta-section,
body[data-theme="light"] .cta-section {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}

body.light-theme .cta-title,
body[data-theme="light"] .cta-title {
  color: #1a1a1a !important;
}

body.light-theme .cta-text,
body[data-theme="light"] .cta-text {
  color: #4b5563 !important;
}

/* Features Section */
body.light-theme .features,
body[data-theme="light"] .features {
  background: #fafbfc !important;
  border-top: 1px solid #e5e7eb !important;
}

body.light-theme .feature-card,
body[data-theme="light"] .feature-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

body.light-theme .feature-card:hover,
body[data-theme="light"] .feature-card:hover {
  background: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .feature-icon-bg,
body[data-theme="light"] .feature-icon-bg {
  opacity: 0.1 !important;
}

body.light-theme .feature-card h3,
body[data-theme="light"] .feature-card h3 {
  color: #1a1a1a !important;
}

body.light-theme .feature-description,
body[data-theme="light"] .feature-description {
  color: #4b5563 !important;
}

/* How It Works Section */
body.light-theme .how-it-works,
body[data-theme="light"] .how-it-works {
  background: #ffffff !important;
}

body.light-theme .step-card,
body[data-theme="light"] .step-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

body.light-theme .step-card:hover,
body[data-theme="light"] .step-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .step-number,
body[data-theme="light"] .step-number {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--primary) !important;
}

body.light-theme .step-title,
body[data-theme="light"] .step-title {
  color: #1a1a1a !important;
}

body.light-theme .step-description,
body[data-theme="light"] .step-description {
  color: #4b5563 !important;
}

/* Pricing Section */
body.light-theme .pricing,
body[data-theme="light"] .pricing {
  background: #fafbfc !important;
}

body.light-theme .pricing-card,
body[data-theme="light"] .pricing-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

body.light-theme .pricing-card.featured,
body[data-theme="light"] .pricing-card.featured {
  border-color: var(--primary) !important;
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1) !important;
}

body.light-theme .pricing-price,
body[data-theme="light"] .pricing-price {
  color: #1a1a1a !important;
}

body.light-theme .pricing-feature,
body[data-theme="light"] .pricing-feature {
  color: #4b5563 !important;
}

/* Contact Section */
body.light-theme .contact,
body[data-theme="light"] .contact {
  background: #ffffff !important;
}

body.light-theme .contact-form,
body[data-theme="light"] .contact-form {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .contact-form:hover,
body[data-theme="light"] .contact-form:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .form-input,
body.light-theme .form-textarea,
body[data-theme="light"] .form-input,
body[data-theme="light"] .form-textarea {
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  color: #1a1a1a !important;
}

body.light-theme .form-input:hover,
body.light-theme .form-textarea:hover,
body[data-theme="light"] .form-input:hover,
body[data-theme="light"] .form-textarea:hover {
  border-color: var(--primary-light) !important;
}

body.light-theme .form-input:focus,
body.light-theme .form-textarea:focus,
body[data-theme="light"] .form-input:focus,
body[data-theme="light"] .form-textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .form-label,
body[data-theme="light"] .form-label {
  color: #1a1a1a !important;
}

/* Grid Pattern */
body.light-theme .grid-pattern,
body[data-theme="light"] .grid-pattern {
  opacity: 0.1 !important;
}

body.light-theme .grid-pattern::after,
body[data-theme="light"] .grid-pattern::after {
  opacity: 0.05 !important;
}

/* Mobile Menu */
body.light-theme .mobile-menu,
body[data-theme="light"] .mobile-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border-left: 1px solid #e5e7eb !important;
}

body.light-theme .mobile-menu a,
body[data-theme="light"] .mobile-menu a {
  color: #1a1a1a !important;
}

/* General text colors */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] h4 {
  color: #1a1a1a !important;
}

body.light-theme p,
body[data-theme="light"] p {
  color: #4b5563 !important;
}

/* Section Badge */
body.light-theme .section-badge,
body[data-theme="light"] .section-badge {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: var(--primary) !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.1) !important;
}

/* Section Description */
body.light-theme .section-description,
body[data-theme="light"] .section-description {
  color: #4b5563 !important;
}

/* How It Works Section */
body.light-theme .how-it-works,
body[data-theme="light"] .how-it-works {
  background: #ffffff !important;
}

body.light-theme .steps-grid,
body[data-theme="light"] .steps-grid {
  /* Grid container */
}

body.light-theme .step-card,
body[data-theme="light"] .step-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .step-card:hover,
body[data-theme="light"] .step-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .step-number,
body[data-theme="light"] .step-number {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

body.light-theme .step-title,
body[data-theme="light"] .step-title {
  color: #1a1a1a !important;
}

body.light-theme .step-description,
body[data-theme="light"] .step-description {
  color: #4b5563 !important;
}

/* Pricing Section */
body.light-theme .pricing,
body[data-theme="light"] .pricing {
  background: #fafbfc !important;
}

body.light-theme .pricing-card,
body[data-theme="light"] .pricing-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .pricing-card:hover,
body[data-theme="light"] .pricing-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .pricing-card.featured,
body[data-theme="light"] .pricing-card.featured {
  border-color: var(--primary) !important;
  border-width: 2px !important;
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.15) !important;
}

body.light-theme .pricing-badge,
body[data-theme="light"] .pricing-badge {
  background: #3b82f6;
  color: #ffffff !important;
}

body.light-theme .pricing-name,
body[data-theme="light"] .pricing-name {
  color: #1a1a1a !important;
}

body.light-theme .pricing-price,
body[data-theme="light"] .pricing-price {
  color: #1a1a1a !important;
}

body.light-theme .pricing-period,
body[data-theme="light"] .pricing-period {
  color: #4b5563 !important;
}

body.light-theme .pricing-features,
body[data-theme="light"] .pricing-features {
  color: #4b5563 !important;
}

body.light-theme .pricing-features li,
body[data-theme="light"] .pricing-features li {
  color: #4b5563 !important;
}

/* Contact Section */
body.light-theme .contact,
body[data-theme="light"] .contact {
  background: #ffffff !important;
}

body.light-theme .contact-wrapper,
body[data-theme="light"] .contact-wrapper {
  /* Container */
}

body.light-theme .contact-title,
body[data-theme="light"] .contact-title {
  color: #1a1a1a !important;
}

body.light-theme .contact-subtitle,
body[data-theme="light"] .contact-subtitle {
  color: #4b5563 !important;
}

body.light-theme .contact-divider,
body[data-theme="light"] .contact-divider {
  background: #e5e7eb !important;
}

body.light-theme .contact-form,
body[data-theme="light"] .contact-form {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}

body.light-theme .form-group,
body[data-theme="light"] .form-group {
  /* Form group */
}

body.light-theme .form-label,
body[data-theme="light"] .form-label {
  color: #1a1a1a !important;
}

body.light-theme .form-input,
body.light-theme .form-textarea,
body[data-theme="light"] .form-input,
body[data-theme="light"] .form-textarea {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #1a1a1a !important;
}

body.light-theme .form-input::placeholder,
body.light-theme .form-textarea::placeholder,
body[data-theme="light"] .form-input::placeholder,
body[data-theme="light"] .form-textarea::placeholder {
  color: #9ca3af !important;
}

body.light-theme .form-input:focus,
body.light-theme .form-textarea:focus,
body[data-theme="light"] .form-input:focus,
body[data-theme="light"] .form-textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

body.light-theme .contact-disclaimer,
body[data-theme="light"] .contact-disclaimer {
  color: #6b7280 !important;
}

body.light-theme .contact-disclaimer a,
body[data-theme="light"] .contact-disclaimer a {
  color: var(--primary) !important;
}

/* CTA Box */
body.light-theme .cta-box,
body[data-theme="light"] .cta-box {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}

body.light-theme .cta-badge,
body[data-theme="light"] .cta-badge {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

body.light-theme .cta-title,
body[data-theme="light"] .cta-title {
  color: #1a1a1a !important;
}

body.light-theme .cta-description,
body[data-theme="light"] .cta-description {
  color: #4b5563 !important;
}

body.light-theme .cta-buttons,
body[data-theme="light"] .cta-buttons {
  /* Button container */
}

/* Mobile Menu Toggle */
body.light-theme .mobile-menu-toggle span,
body[data-theme="light"] .mobile-menu-toggle span {
  background: #1a1a1a !important;
}

body.light-theme .mobile-menu-toggle:hover span,
body[data-theme="light"] .mobile-menu-toggle:hover span {
  background: var(--primary) !important;
}

/* Demo Section */
body.light-theme .demo,
body[data-theme="light"] .demo {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
}

body.light-theme .demo-text,
body[data-theme="light"] .demo-text {
  color: #1a1a1a !important;
}

body.light-theme .demo-feature,
body[data-theme="light"] .demo-feature {
  color: #4b5563 !important;
}

body.light-theme .demo-feature svg,
body[data-theme="light"] .demo-feature svg {
  color: var(--success) !important;
}

body.light-theme .demo-image-wrapper,
body[data-theme="light"] .demo-image-wrapper {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .demo-image-wrapper:hover,
body[data-theme="light"] .demo-image-wrapper:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 0 40px rgba(59, 130, 246, 0.2) !important;
}

body.light-theme .demo-window,
body[data-theme="light"] .demo-window {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #e5e7eb !important;
}

/* Get Started Section (Ready to Start) */
body.light-theme .get-started,
body[data-theme="light"] .get-started {
  background: #f9fafb !important;
  border-top: 1px solid #e5e7eb !important;
}

body.light-theme .get-started::before,
body[data-theme="light"] .get-started::before {
  opacity: 0.05 !important;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}

body.light-theme .cta-box,
body[data-theme="light"] .cta-box {
  color: #1a1a1a !important;
}

body.light-theme .cta-badge,
body[data-theme="light"] .cta-badge {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: var(--primary) !important;
  backdrop-filter: none !important;
}

body.light-theme .cta-title,
body[data-theme="light"] .cta-title {
  color: #1a1a1a !important;
}

body.light-theme .cta-description,
body[data-theme="light"] .cta-description {
  color: #4b5563 !important;
}

body.light-theme .cta-buttons .btn-outline,
body[data-theme="light"] .cta-buttons .btn-outline {
  background: transparent !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

body.light-theme .cta-buttons .btn-outline:hover,
body[data-theme="light"] .cta-buttons .btn-outline:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
}

body.light-theme .cta-note,
body[data-theme="light"] .cta-note {
  color: #4b5563 !important;
  opacity: 1 !important;
}

body.light-theme .cta-note svg,
body[data-theme="light"] .cta-note svg {
  color: #4b5563 !important;
}

/* Contact Section */
body.light-theme .contact,
body[data-theme="light"] .contact {
  background: #fafbfc !important;
}

body.light-theme .contact-title,
body[data-theme="light"] .contact-title {
  color: #1a1a1a !important;
}

body.light-theme .contact-subtitle,
body[data-theme="light"] .contact-subtitle {
  color: #4b5563 !important;
}

body.light-theme .form-submit,
body[data-theme="light"] .form-submit {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.light-theme .form-submit:hover,
body[data-theme="light"] .form-submit:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  background-color: #2563eb !important;
  opacity: 1 !important;
  color: #ffffff !important;
  box-shadow: 0 15px 30px -5px rgba(59, 130, 246, 0.4) !important;
}

body.light-theme .form-message.success,
body[data-theme="light"] .form-message.success {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #059669 !important;
}

body.light-theme .form-message.error,
body[data-theme="light"] .form-message.error {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #dc2626 !important;
}

/* Override any dark backgrounds */
body.light-theme [style*="background"],
body[data-theme="light"] [style*="background"] {
  /* Let inline styles be overridden by important rules above */
}