/* Light Mode Fixes - Comprehensive Version
   Fix various elements that have readability issues in light mode
   PRIORITY: Fixing white text in model cards that's unreadable in light mode
*/

/*==========================================
  MODEL CARD FIXES - HIGHEST PRIORITY
==========================================*/

/* Direct fix for model-glow and other white text in light mode */
[data-theme="light"] .model-glow { /* .parameter-value etc. are handled by more specific rules below */
  color: #0a1e3a !important; /* Dark blue for maximum readability */
  text-shadow: none !important; /* Remove light text shadows that reduce contrast */
  background-color: rgba(0, 85, 170, 0.1) !important;
  border: 1px solid rgba(0, 85, 170, 0.3) !important;
}

/* Direct targeting of specific model text elements */
[data-theme="light"] .model-card h3,
[data-theme="light"] .model-card p,
[data-theme="light"] .model-card div,
[data-theme="light"] .model-card span { /* This is a general rule, more specific ones follow */
  color: #0a1e3a !important;
}

/* Explicitly target model card sections */
[data-theme="light"] .model-details,
[data-theme="light"] .model-details div,
[data-theme="light"] .model-details span {
  color: #0a1e3a !important;
  background-color: rgba(0, 85, 170, 0.1) !important; 
  border: 1px solid rgba(0, 85, 170, 0.3) !important;
}

/* Special attention to model badges and stats */
[data-theme="light"] .model-badge,
[data-theme="light"] .model-type,
[data-theme="light"] .model-family,
[data-theme="light"] .model-size,
[data-theme="light"] .model-stats span {
  color: #0a1e3a !important;
  background-color: rgba(0, 85, 170, 0.1) !important;
  border: 1px solid rgba(0, 85, 170, 0.3) !important;
}

/* Target specific architecture and parameter elements */
[data-theme="light"] .model-card .parameter-value,
[data-theme="light"] .model-card .architecture-value,
[data-theme="light"] .model-card .specialization-value {
  color: #0a1e3a !important;
  font-weight: 600 !important;
  background-color: rgba(0, 85, 170, 0.1) !important;
  border: 1px solid rgba(0, 85, 170, 0.3) !important;
}

/* Card background for light mode */
[data-theme="light"] .model-card {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 85, 170, 0.5) !important;
  box-shadow: 0 0 15px rgba(0, 85, 170, 0.3) !important;
}

/*==========================================
  DROPDOWN FIXES
==========================================*/

/* Fix for template-select dropdown in light mode */
[data-theme="light"] #template-select,
[data-theme="light"] .cyber-select {
  color: #0a1e3a !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] #template-select option,
[data-theme="light"] .cyber-select option {
  color: #0a1e3a !important;
  background-color: #ffffff !important;
}

/* Fix for dropdown arrow color in light mode */
[data-theme="light"] .cyber-select::after {
  border-top-color: #0a1e3a !important;
}

/*==========================================
  LOGIN FORM FIXES
==========================================*/

/* Fix for login form input placeholders in light mode */
[data-theme="light"] .cyber-input::placeholder {
  color: #2a2a2a !important;
  opacity: 0;  /* Hide placeholder when icon is present */
}

[data-theme="light"] .input-container .cyber-input:focus::placeholder {
  opacity: 0.7; /* Show placeholder on focus */
  transform: translateY(0); /* Ensure text aligns properly when visible */
}

/* Reposition icons in input fields for better alignment */
.input-container {
  position: relative;
}

.input-container i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--icon-color, #1a73e8);
}

/* Adjust padding to ensure text doesn't overlap with icons */
.input-container .cyber-input {
  padding-left: 40px !important;
}

/* Fix for login-options display after successful login */
.login-options {
  display: block !important;
  transition: opacity 0.3s ease;
}

.login-success .login-options {
  opacity: 1 !important;
}

/* Additional styling for the authorized message */
.authorized-message {
  color: #00cc66;
  font-weight: bold;
  margin-top: 10px;
  display: block;
  text-align: center;
}

/* FIX: Improve readability of hero description text in light mode */
[data-theme="light"] .hero-description {
  color: #0a1e3a !important;
  font-weight: 500 !important;
}

[data-theme="light"] .hero-description .highlight {
  color: #1a5fb4 !important;
  font-weight: 700 !important;
  text-shadow: none !important; 
}

[data-theme="light"] .hero-description .pink-highlight {
  color: #a6246e !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* FIX: Product cards icon and image styling */
.product-card .product-logo {
  display: block;
  max-width: 100px;
  height: auto;
  margin: 0 auto 20px;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.8));
}

/* FIX: Improve product card description text readability in light mode */
[data-theme="light"] .product-card {
  background: rgba(240, 245, 250, 0.85) !important;
  border: 1px solid rgba(165, 0, 100, 0.6) !important;
}

/* Fix for model card text in light mode - comprehensive fix for all elements */
[data-theme="light"] .model-glow,
[data-theme="light"] .model-card,
[data-theme="light"] .model-card h3,
[data-theme="light"] .model-card p,
[data-theme="light"] .model-card .model-details,
[data-theme="light"] .model-card .model-stats,
[data-theme="light"] .model-card .model-info,
[data-theme="light"] .model-card .model-tags,
[data-theme="light"] .model-card .tag {
  color: #0a1e3a !important; /* Dark blue text for better contrast */
}

/* Ensure model card background has enough contrast in light mode */
[data-theme="light"] .model-card {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 85, 170, 0.5) !important;
  box-shadow: 0 0 15px rgba(0, 85, 170, 0.3) !important;
}

/* Fix parameter architecture and tags */
/* This section is revised as other rules now cover .parameter-value, .architecture-value, .specialization-value, .model-badge, .model-family more specifically or have been updated. */
[data-theme="light"] .tag {
  color: #0a1e3a !important;
  background-color: rgba(0, 85, 170, 0.1) !important;
  border: 1px solid rgba(0, 85, 170, 0.3) !important;
}

[data-theme="light"] .model-tags span { /* Ensuring .model-tags span is explicitly covered */
  color: #0a1e3a !important;
  background-color: rgba(0, 85, 170, 0.1) !important;
  border: 1px solid rgba(0, 85, 170, 0.3) !important;
}

/* Fix model stats values in light mode */
/* This rule for .model-stats span is now covered by the "Special attention to model badges and stats" section update.
   If it had unique properties, they would be merged. The current properties are identical.
[data-theme="light"] .model-stats span {
  color: #0a1e3a !important;
  background-color: rgba(0, 85, 170, 0.1) !important;
  border-color: rgba(0, 85, 170, 0.3) !important; 
}
*/

[data-theme="light"] .product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(165, 0, 100, 0.4) !important;
  border-color: rgba(165, 0, 100, 0.9) !important;
  background: rgba(245, 250, 255, 0.95) !important;
}

[data-theme="light"] .product-description {
  color: #0a1e3a !important;
  font-weight: 500 !important;
}

[data-theme="light"] .product-title {
  color: #a6246e !important;
}

/* FIX: Enhance feature card hover effect and readability */
[data-theme="light"] .feature-card {
  background: rgba(240, 245, 250, 0.8) !important;
  border: 1px solid rgba(26, 95, 180, 0.4) !important;
}

[data-theme="light"] .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(26, 95, 180, 0.4) !important;
  border-color: rgba(26, 95, 180, 0.8) !important;
  background: rgba(245, 250, 255, 0.9) !important;
}

[data-theme="light"] .feature-title {
  color: #1a5fb4 !important;
}

[data-theme="light"] .feature-desc {
  color: #0a1e3a !important;
}

[data-theme="light"] .feature-icon {
  color: #1a5fb4 !important;
}

/* FIX: Improve model specs readability in light mode */
[data-theme="light"] .model-card {
  background: rgba(240, 245, 250, 0.8) !important;
  border: 1px solid rgba(165, 0, 100, 0.4) !important;
}

[data-theme="light"] .model-name {
  color: #a6246e !important;
}

[data-theme="light"] .spec-label {
  color: #1a5fb4 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .spec-value {
  color: #0a1e3a !important;
  font-weight: 600 !important;
}

/* FIX: Enhancing model card glow effect */
[data-theme="light"] .model-glow {
  background: radial-gradient(circle, rgba(165, 0, 100, 0.2) 0%, transparent 70%) !important;
}

/* FIX: Improve buttons in light mode */
[data-theme="light"] .product-button,
[data-theme="light"] .cyber-button {
  background: rgba(165, 0, 100, 0.2) !important;
  border: 1px solid rgba(165, 0, 100, 0.6) !important;
  color: #a6246e !important;
}

[data-theme="light"] .product-button:hover,
[data-theme="light"] .cyber-button:hover {
  background: rgba(165, 0, 100, 0.3) !important;
  box-shadow: 0 0 15px rgba(165, 0, 100, 0.4) !important;
}

/* FIX: Ensure section titles are readable in light mode */
[data-theme="light"] .cyber-section-title {
  color: #a6246e !important;
  text-shadow: none !important;
}

/*==========================================
  LANDING PAGE LIGHT MODE FIXES
==========================================*/

[data-theme="light"] .hero-section {
  background: #e9ecef !important; /* Light grey background for the hero section */
  /* If there's a background-image, ensure it's removed or replaced for light mode if it causes issues */
  background-image: none !important; 
}

[data-theme="light"] .hero-section .hero-title,
[data-theme="light"] .hero-section .hero-subtitle,
[data-theme="light"] .hero-section .hero-description, /* Assuming there's a hero-description class */
[data-theme="light"] .hero-section p { /* General paragraph text within hero */
  color: #212529 !important; /* Dark text for readability */
  text-shadow: none !important; /* Remove any dark-theme specific text shadows */
}

[data-theme="light"] .hero-section .hero-title {
  /* Specific adjustments for hero title if needed, e.g., if it uses a specific color variable */
  color: #0056b3 !important; /* Example: A darker blue for titles */
}

[data-theme="light"] .hero-section .hero-subtitle {
  color: #495057 !important; /* Example: A slightly lighter dark color for subtitles */
}

[data-theme="light"] .cyber-section-title {
  color: #343a40 !important; /* Dark color for section titles */
  text-shadow: none !important; /* Remove glow effects */
}

[data-theme="light"] .cyber-section-title:after {
  background: linear-gradient(90deg, transparent, #007bff, transparent) !important; /* Adjust gradient for light mode */
}

/* Ensure text within sections like "JOIN THE NEURAL NEXUS" is readable */
[data-theme="light"] .features-section p, /* Example if this section has paragraphs */
[data-theme="light"] .products-section p,
[data-theme="light"] .testimonials-section p,
[data-theme="light"] .contact-section p {
    color: #333 !important;
    text-shadow: none !important;
}

[data-theme="light"] .feature-card,
[data-theme="light"] .product-card,
[data-theme="light"] .testimonial-card {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

[data-theme="light"] .feature-card h4,
[data-theme="light"] .product-card h4,
[data-theme="light"] .testimonial-card h4 {
    color: #0056b3 !important;
}

[data-theme="light"] .feature-icon {
    color: var(--color-primary) !important; /* Use the light theme's primary color */
}

/*==========================================
  LANDING PAGE COMPREHENSIVE LIGHT MODE SECTION BACKGROUNDS
==========================================*/

/* General background for all sections within landing page's main content */
[data-theme="light"] #landing-container main section {
  background-color: #f8f9fa !important; /* Standard light grey for sections */
  background-image: none !important;    /* Remove dark theme background images */
}

/* Ensure hero section also follows this for consistency */
[data-theme="light"] .hero-section {
  background-color: #f8f9fa !important; 
  background-image: none !important;
}

/* Text color for elements within these sections - ensuring readability */
[data-theme="light"] #landing-container main section .hero-title,
[data-theme="light"] #landing-container main section .hero-subtitle,
[data-theme="light"] #landing-container main section .hero-description,
[data-theme="light"] #landing-container main section .cyber-section-title,
[data-theme="light"] #landing-container main section p,
[data-theme="light"] #landing-container main section h1,
[data-theme="light"] #landing-container main section h2,
[data-theme="light"] #landing-container main section h3,
[data-theme="light"] #landing-container main section h4,
[data-theme="light"] #landing-container main section h5,
[data-theme="light"] #landing-container main section h6 {
  text-shadow: none !important;
}

/* Specific text color overrides for better hierarchy in light mode */
[data-theme="light"] #landing-container main section .hero-title {
  color: #0056b3 !important; /* Dark blue for main titles */
}
[data-theme="light"] #landing-container main section .hero-subtitle {
  color: #495057 !important; /* Dark grey for subtitles */
}
[data-theme="light"] #landing-container main section .hero-description,
[data-theme="light"] #landing-container main section p {
  color: #212529 !important; /* Standard dark text for paragraphs */
}
[data-theme="light"] #landing-container main section .cyber-section-title {
  color: #0056b3 !important; /* Dark blue for section titles */
}
[data-theme="light"] #landing-container main section h3, /* General h3s in sections */
[data-theme="light"] #landing-container main section h4 { /* General h4s in sections */
  color: #343a40 !important; /* Slightly lighter dark for other headings */
}

/* Footer specific styling for light mode */
[data-theme="light"] #landing-container footer {
  background-color: #e9ecef !important; /* A slightly different light grey for footer */
  color: #343a40 !important;
  padding-top: 20px !important; 
  padding-bottom: 20px !important;
}

[data-theme="light"] #landing-container footer p,
[data-theme="light"] #landing-container footer .copyright-text { 
  color: #6c757d !important;
  text-shadow: none !important;
}

[data-theme="light"] #landing-container footer a {
  color: #0056b3 !important;
  text-shadow: none !important;
}

/* Ensure cards like feature-card, product-card, model-card remain white or as previously defined for light mode,
   to contrast with the new #f8f9fa section backgrounds. Existing rules should handle this. */

/*==========================================
  SPECIFIC DARK CONTAINER FIXES FOR LANDING PAGE LIGHT MODE
==========================================*/

/* Ensure the section containing "JOIN THE NEURAL NEXUS" title has a light background */
/* Assuming "JOIN THE NEURAL NEXUS" is within a section like #products-section or similar. 
   If it's a different specific section, the selector might need adjustment.
   The general rule for 'main section' should cover it unless there's an inline style. */

/* For the FAQ Section specifically, as it has inline styles for background */
[data-theme="light"] #faq.faq-section {
  background-color: #f8f9fa !important; /* Standard light grey for the entire FAQ section */
  background-image: none !important;    /* Remove dark theme radial gradients or images */
  border-top: 1px solid #dee2e6 !important; /* Add a top border for separation */
  border-bottom: 1px solid #dee2e6 !important; /* Add a bottom border */
}

/* Style for the FAQ title (already covered by .cyber-section-title, but ensuring context) */
[data-theme="light"] #faq.faq-section .cyber-section-title {
  color: #0056b3 !important; /* Dark blue for section titles */
  text-shadow: none !important;
  margin-bottom: 30px !important; /* Ensure spacing */
}

/* Styling for individual FAQ items */
[data-theme="light"] .faq-section .faq-item {
  background-color: #ffffff !important; /* White background for each FAQ item */
  border: 1px solid #ced4da !important; /* Light border */
  margin-bottom: 1rem !important;
  border-radius: 4px; /* Optional: slightly rounded corners */
}

[data-theme="light"] .faq-section .faq-question {
  color: #343a40 !important; /* Darker text for questions */
  background-color: #e9ecef !important; /* Light grey background for question part */
  padding: 12px 18px !important;
  border-bottom: 1px solid #ced4da !important;
  font-weight: 600 !important;
  cursor: pointer; /* If they are clickable */
}

[data-theme="light"] .faq-section .faq-answer {
  color: #212529 !important; /* Standard dark text for answers */
  background-color: #ffffff !important; /* Ensure answer area is white */
  padding: 15px 18px !important;
}

[data-theme="light"] .faq-section .faq-answer p {
  color: #212529 !important; /* Ensure paragraphs within answers are also styled */
  margin-bottom: 0.5rem !important;
}
[data-theme="light"] .faq-section .faq-answer p:last-child {
  margin-bottom: 0 !important;
}

[data-theme="light"] #products-section { /* Assuming JOIN THE NEURAL NEXUS is in products-section based on typical landing page structure */
    background-color: #f8f9fa !important;
    background-image: none !important;
}

/*==========================================
  LIGHT MODE FOR "ACCESS THE NEURAL FRONTIER" AND "JOIN THE NEURAL NEXUS" SECTIONS
==========================================*/

/* Titles themselves */
[data-theme="light"] .main-title-enhanced,
[data-theme="light"] .cyber-section-title {
  color: #0056b3 !important; /* Dark blue for these titles in light mode */
  text-shadow: none !important;
}

/* Section: JOIN THE NEURAL NEXUS */
[data-theme="light"] #subscribe-llm-chat.stripe-section {
  background-color: #f8f9fa !important;
  background-image: none !important; /* Override inline dark background */
}

[data-theme="light"] #subscribe-llm-chat .hero-description {
  color: #212529 !important; /* Ensure text within this section is readable */
  text-shadow: none !important;
}

/* Section: ACCESS THE NEURAL FRONTIER */
[data-theme="light"] #cta.cta-section {
  background-color: #f8f9fa !important;
  background-image: none !important; /* Override inline dark background */
}

[data-theme="light"] #cta.cta-section .neural-pulse {
    display: none !important; /* Hide dark-themed animated elements in light mode */
}

[data-theme="light"] #cta.cta-section .hero-description {
  color: #212529 !important; /* Ensure text within this section is readable */
  text-shadow: none !important;
}

[data-theme="light"] #cta.cta-section .hero-description .pink-highlight {
  color: #a6246e !important; /* Adjust pink highlight for light mode */
  font-weight: bold !important;
}

[data-theme="light"] #cta.cta-section .hero-description .highlight {
  color: #0056b3 !important; /* Adjust cyan highlight for light mode */
  font-weight: bold !important;
}

/* Ensure buttons in these sections are styled correctly for light mode */
[data-theme="light"] #cta.cta-section .cyber-button,
[data-theme="light"] #subscribe-llm-chat .cyber-button { /* Assuming buttons might exist in subscribe section too */
  /* Leverage existing .cyber-button light theme styles or add specific overrides if needed */
  /* For example, if they need different colors than the default light theme button */
}