/*!
 * Light Theme for SaralStudy
 * Clean, modern light color scheme for web and mobile
 * Version: 1.0.0
 */

/* ==========================================================================
   LIGHT THEME COLOR VARIABLES
   ========================================================================== */

:root {
    /* Primary Colors - Light Theme */
    --primary-light: #4A90E2;
    --primary-lighter: #6BA3E8;
    --primary-lightest: #E3F2FD;
    
    /* Secondary Colors */
    --secondary-light: #5CB85C;
    --secondary-lighter: #7BC87B;
    --secondary-lightest: #E8F5E9;
    
    /* Accent Colors */
    --accent-light: #FF9800;
    --accent-lighter: #FFB74D;
    --accent-lightest: #FFF3E0;
    
    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #F0F2F5;
    --bg-hover: #E9ECEF;
    
    /* Text Colors */
    --text-primary: #2C3E50;
    --text-secondary: #5A6C7D;
    --text-tertiary: #8B95A1;
    --text-light: #B0B8C1;
    
    /* Border Colors */
    --border-light: #E1E4E8;
    --border-medium: #D1D5DB;
    --border-dark: #9CA3AF;
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12);
    
    /* Success/Error/Warning */
    --success: #10B981;
    --success-light: #D1FAE5;
    --error: #EF4444;
    --error-light: #FEE2E2;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --info: #3B82F6;
    --info-light: #DBEAFE;
}

/* ==========================================================================
   HERO SECTION - LIGHT THEME
   ========================================================================== */

.hero-section {
    background: linear-gradient(135deg, #E3F2FD 0%, #F3E5F5 100%);
    min-height: 100vh;
}

.hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(74, 144, 226, 0.05) 0%,
        rgba(156, 39, 176, 0.05) 100%
    );
}

.hero-title {
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.hero-subtitle {
    color: var(--text-secondary);
}

/* Search Bar - Light Theme */
.search-input-group {
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
}

.search-input-group:focus-within {
    box-shadow: 0 15px 40px rgba(74, 144, 226, 0.15);
    border-color: var(--primary-light);
}

.search-icon {
    color: var(--primary-light);
}

.hero-search-input {
    color: var(--text-primary);
}

.hero-search-input::placeholder {
    color: var(--text-tertiary);
}

.search-clear-btn {
    color: var(--text-tertiary);
}

.search-clear-btn:hover {
    color: var(--primary-light);
}

/* Search Suggestions - Light Theme */
.search-suggestions {
    background: var(--bg-primary);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-light);
}

.suggestions-header {
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.suggestions-title {
    color: var(--text-primary);
}

.suggestion-item {
    color: var(--text-primary);
}

.suggestion-item:hover {
    background: var(--bg-secondary);
}

.suggestion-item i {
    color: var(--primary-light);
}

.suggestion-category {
    color: var(--text-tertiary);
}

.suggestions-footer {
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.suggestions-hint {
    color: var(--text-secondary);
}

.suggestions-hint i {
    color: var(--primary-light);
}

/* Category Filters - Light Theme */
.category-btn {
    background: var(--bg-primary);
    border: 2px solid var(--border-medium);
    color: var(--text-primary);
}

.category-btn:hover {
    background: var(--primary-lightest);
    border-color: var(--primary-light);
    color: var(--primary-light);
}

.category-btn.active {
    background: var(--primary-light);
    color: var(--bg-primary);
    border-color: var(--primary-light);
}

/* Quick Stats - Light Theme */
.stat-item i {
    color: var(--primary-light);
}

.stat-number {
    color: var(--text-primary);
}

.stat-label {
    color: var(--text-secondary);
}

/* CTA Buttons - Light Theme */
.hero-btn-primary {
    background: var(--primary-light);
    color: var(--bg-primary);
    border-color: var(--primary-light);
}

.hero-btn-primary:hover {
    background: var(--primary-lighter);
    box-shadow: 0 10px 25px rgba(74, 144, 226, 0.25);
}

.hero-btn-secondary {
    background: var(--secondary-light);
    color: var(--bg-primary);
}

.hero-btn-secondary:hover {
    background: var(--secondary-lighter);
    box-shadow: 0 10px 25px rgba(92, 184, 92, 0.25);
}

.hero-btn-outline {
    background: transparent;
    color: var(--primary-light);
    border-color: var(--primary-light);
}

.hero-btn-outline:hover {
    background: var(--primary-lightest);
    border-color: var(--primary-lighter);
}

/* Slider Controls - Light Theme */
.slider-nav-btn {
    background: var(--bg-primary);
    border: 2px solid var(--border-medium);
    color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.slider-nav-btn:hover {
    background: var(--primary-lightest);
    border-color: var(--primary-light);
}

.slider-dot {
    background: var(--border-medium);
}

.slider-dot.active {
    background: var(--primary-light);
}

.scroll-down {
    color: var(--primary-light);
}

/* ==========================================================================
   HEADER - LIGHT THEME
   ========================================================================== */

.navigation {
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border-light);
}

.navigation.sticky {
    box-shadow: var(--shadow-md);
}

.nav-logo {
    color: var(--text-primary);
}

.nav-menu > li > a {
    color: var(--text-primary);
}

.nav-menu > li > a:hover {
    color: var(--primary-light);
}

.nav-submenu {
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
}

.nav-submenu li a {
    color: var(--text-primary);
}

.nav-submenu li a:hover {
    background: var(--bg-secondary);
    color: var(--primary-light);
}

/* Mobile Menu - Light Theme */
.nav-toggle {
    color: var(--text-primary);
}

.nav-menus-wrapper {
    background: var(--bg-primary);
    box-shadow: var(--shadow-xl);
}

.nav-overlay-panel {
    background: rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   CONTENT SECTIONS - LIGHT THEME
   ========================================================================== */

/* Classes Section */
.classes-section {
    background: var(--bg-primary);
}

.section-title {
    color: var(--text-primary);
}

.section-subtitle {
    color: var(--text-secondary);
}

.class-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.class-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.class-icon {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 100%);
}

.class-title a {
    color: var(--text-primary);
}

.class-title a:hover {
    color: var(--primary-light);
}

.class-level {
    color: var(--text-tertiary);
}

.class-subjects small {
    color: var(--text-tertiary);
}

.resource-item i {
    color: var(--primary-light);
}

.btn-explore {
    background: var(--primary-light);
    color: var(--bg-primary);
}

.btn-explore:hover {
    background: var(--primary-lighter);
    box-shadow: var(--shadow-md);
}

/* Features Section */
.features-section {
    background: var(--bg-secondary);
}

.feature-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.feature-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.feature-icon {
    color: var(--primary-light);
}

.feature-title {
    color: var(--text-primary);
}

.feature-description {
    color: var(--text-secondary);
}

/* Statistics Section */
.statistics-section {
    background: linear-gradient(135deg, var(--primary-lightest) 0%, var(--secondary-lightest) 100%);
}

.stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
}

.stat-card:hover {
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    color: var(--primary-light);
}

.stat-value {
    color: var(--text-primary);
}

.stat-label {
    color: var(--text-secondary);
}

/* Testimonials Section */
.testimonials-section {
    background: var(--bg-primary);
}

.testimonial-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
}

.testimonial-text {
    color: var(--text-secondary);
}

.testimonial-author {
    color: var(--text-primary);
}

.testimonial-role {
    color: var(--text-tertiary);
}

.testimonial-rating i {
    color: var(--accent-light);
}

/* Books Section */
.books-section {
    background: var(--bg-secondary);
}

.book-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.book-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.book-cover {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
}

.book-title {
    color: var(--text-primary);
}

.book-class {
    color: var(--text-tertiary);
}

.book-download-btn {
    background: var(--primary-light);
    color: var(--bg-primary);
}

.book-download-btn:hover {
    background: var(--primary-lighter);
}

/* ==========================================================================
   FOOTER - LIGHT THEME
   ========================================================================== */

.modern-footer {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-top: 1px solid var(--border-light);
}

.footer-heading {
    color: var(--text-primary);
}

.footer-heading i {
    color: var(--primary-light);
}

.footer-links li a {
    color: var(--text-secondary);
}

.footer-links li a:hover {
    color: var(--primary-light);
}

.company-name {
    color: var(--text-primary);
}

.company-tagline {
    color: var(--text-secondary);
}

.company-description {
    color: var(--text-secondary);
}

.stat-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

.stat-number {
    color: var(--primary-light);
}

.stat-label {
    color: var(--text-secondary);
}

.contact-item {
    color: var(--text-secondary);
}

.contact-item:hover {
    color: var(--primary-light);
}

.contact-item i {
    color: var(--primary-light);
}

/* Social Links */
.social-link {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.social-link:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--bg-primary);
}

/* App Download Buttons */
.app-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.app-btn:hover {
    background: var(--primary-lightest);
    border-color: var(--primary-light);
}

/* Trust Section */
.footer-trust {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.trust-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

.trust-item:hover {
    border-color: var(--primary-light);
}

.trust-icon {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 100%);
}

.trust-number {
    color: var(--text-primary);
}

.trust-label {
    color: var(--text-secondary);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid var(--border-light);
}

.copyright {
    color: var(--text-secondary);
}

.copyright i {
    color: var(--error);
}

.footer-bottom-links a {
    color: var(--text-secondary);
}

.footer-bottom-links a:hover {
    color: var(--primary-light);
}

/* Newsletter Section */
.modern-newsletter-section {
    background: linear-gradient(135deg, var(--primary-lightest) 0%, var(--secondary-lightest) 100%);
}

.newsletter-badge {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    color: var(--primary-light);
}

.newsletter-badge i {
    color: var(--accent-light);
}

.newsletter-title {
    color: var(--text-primary);
    text-shadow: none;
}

.newsletter-description {
    color: var(--text-secondary);
}

.feature-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.feature-item i {
    color: var(--success);
}

.newsletter-form-wrapper {
    background: var(--bg-primary);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-light);
}

.form-title {
    color: var(--text-primary);
}

.form-subtitle {
    color: var(--text-secondary);
}

.form-input {
    border: 2px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.form-input:focus {
    border-color: var(--primary-light);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px var(--primary-lightest);
}

.form-icon {
    color: var(--text-tertiary);
}

.form-select {
    border: 2px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.form-select:focus {
    border-color: var(--primary-light);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px var(--primary-lightest);
}

.submit-btn {
    background: var(--primary-light);
    color: var(--bg-primary);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
}

.submit-btn:hover {
    background: var(--primary-lighter);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.35);
}

.form-note {
    color: var(--text-secondary);
}

.form-note i {
    color: var(--success);
}

/* ==========================================================================
   SIDEBAR & WIDGETS - LIGHT THEME
   ========================================================================== */

.sidebar-widget {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.sidebar-widget:hover {
    box-shadow: var(--shadow-md);
}

.widget-header {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 100%);
    color: var(--bg-primary);
}

.widget-header i {
    color: var(--accent-lightest);
}

.widget-content {
    background: var(--bg-primary);
}

/* ==========================================================================
   SEARCH PAGE - LIGHT THEME
   ========================================================================== */

.search-page-container {
    background: var(--bg-secondary);
}

.search-results-header {
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.search-results-title {
    color: var(--text-primary);
}

.search-info {
    background: var(--info-light);
    border-left: 4px solid var(--info);
    color: var(--text-primary);
}

.search-result-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.search-result-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.result-title a {
    color: var(--text-primary);
}

.result-title a:hover {
    color: var(--primary-light);
}

.result-type {
    background: var(--info-light);
    color: var(--info);
}

.result-class {
    background: var(--accent-lightest);
    color: var(--accent-light);
}

.result-subject {
    background: var(--success-light);
    color: var(--success);
}

.result-description {
    color: var(--text-secondary);
}

.result-link {
    background: var(--primary-light);
    color: var(--bg-primary);
}

.result-link:hover {
    background: var(--primary-lighter);
}

/* ==========================================================================
   NCERT SOLUTIONS - LIGHT THEME
   ========================================================================== */

.details-content {
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.details-content h2 {
    color: var(--text-primary);
}

.details-content h3 {
    color: var(--text-primary);
}

.details-content p {
    color: var(--text-secondary);
}

.sec-containter {
    background: var(--bg-secondary);
    border-radius: 8px;
}

.sec-containter h3 {
    color: var(--text-primary);
}

.cls-section h3 {
    color: var(--primary-light);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.cls-section .hd_lnk {
    color: var(--primary-light);
}

.cls-section .hd_lnk:hover {
    color: var(--primary-lighter);
}

.cls-section .list_style_type a {
    color: var(--text-secondary);
}

.cls-section .list_style_type a:hover {
    color: var(--primary-light);
}

/* FAQ Section */
.faq-wrapper .accordion .card {
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.faq-wrapper .accordion .card .card-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.faq-wrapper .accordion .card .card-header a {
    color: var(--text-primary);
}

.faq-wrapper .accordion .card .card-header a:hover {
    color: var(--primary-light);
}

.faq-wrapper .accordion .card .card-body {
    background: var(--bg-primary);
    color: var(--text-secondary);
}

/* ==========================================================================
   BACK TO TOP BUTTON - LIGHT THEME
   ========================================================================== */

.back-to-top {
    background: var(--primary-light);
    color: var(--bg-primary);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
}

.back-to-top:hover {
    background: var(--primary-lighter);
    box-shadow: var(--shadow-xl);
}

/* ==========================================================================
   MOBILE SPECIFIC - LIGHT THEME
   ========================================================================== */

@media (max-width: 768px) {
    .hero-section {
        background: linear-gradient(135deg, var(--primary-lightest) 0%, var(--secondary-lightest) 100%);
    }
    
    .nav-menus-wrapper {
        background: var(--bg-primary);
        box-shadow: var(--shadow-xl);
    }
    
    .mobile-menu-item {
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-light);
    }
    
    .mobile-menu-item:hover {
        background: var(--bg-secondary);
        color: var(--primary-light);
    }
}

/* ==========================================================================
   UTILITY CLASSES - LIGHT THEME
   ========================================================================== */

.bg-light {
    background: var(--bg-primary) !important;
}

.bg-lighter {
    background: var(--bg-secondary) !important;
}

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

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

.border-light {
    border-color: var(--border-light) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* ==========================================================================
   PRINT STYLES - LIGHT THEME
   ========================================================================== */

@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .hero-section,
    .navigation,
    .footer {
        background: white !important;
        color: black !important;
    }
}