/* Light Theme Styles - ملف أنماط الوضع الفاتح */

/* CSS Variables for Light Mode */
html[data-theme="light"] {
    --bg-primary: #F3F2EF;
    --bg-secondary: #F5F6F5;
    --bg-tertiary: #E9ECEF;
    --text-primary: #212529;
    --text-secondary: #343A40;
    --text-muted: #4A5565;
    --border-color: #DEE2E6;
    --card-bg: #FFFFFF;
    --input-bg: #F8F9FA;
    --input-border: #CED4DA;
}

/* Light Mode Specific Overrides */
html[data-theme="light"] body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

html[data-theme="light"] .header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

html[data-theme="light"] .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .navbar-nav .nav-link:hover,
html[data-theme="light"] .navbar-nav .nav-link.active {
    color: #027353 !important;
}

div#contact {
    background: #0273530F;
    margin: 0 !important;
    max-width: 100%;
    padding: 60px 15px;
}

/* Cards and Components */
html[data-theme="light"] .why-choose-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

html[data-theme="light"] .why-choose-item:hover {
    box-shadow: 0 4px 16px rgba(2, 115, 83, 0.15);
}

html[data-theme="light"] h3.why-choose-item-title {
    color: var(--text-secondary);
}

html[data-theme="light"] .title h2 {
    color: var(--text-secondary);
}

/* League Cards */
html[data-theme="light"] .league-card {
    background: #f3f2ef;
    border: 1px solid #feebb9;
    box-shadow: 0 2px 8px #feebb9;
}

html[data-theme="light"] .league-card:hover {
    box-shadow: 0 4px 16px rgba(2, 115, 83, 0.15);
}

html[data-theme="light"] .league-card-title {
    color: var(--text-secondary);
}

/* Slider Section */
html[data-theme="light"] .discover-app-container {
    background: var(--bg-secondary);
}

/* Phone Mockup Containers */
html[data-theme="light"] .img-container {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

html[data-theme="light"] .img-container::before {
    background: #ffffff;
}

/* Contact Form */
html[data-theme="light"] .contact-form {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

html[data-theme="light"] .form-title {
    color: var(--text-secondary);
}

html[data-theme="light"] .contact-input {
    background: #0273530D;
    border-top: 1px solid #02735333;    
    color: var(--text-primary);
}

html[data-theme="light"] .contact-input:focus {
    background: #FFFFFF;
    border-color: #027353;
    box-shadow: 0 0 0 3px rgba(2, 115, 83, 0.15);
    color: var(--text-primary);
}

html[data-theme="light"] .contact-input::placeholder {
    color: var(--text-muted);
}

/* Footer */
html[data-theme="light"] .site-footer {
    background: #f3f2ef;
    border-top: 1px solid var(--border-color);
}

html[data-theme="light"] .footer-bottom {
    border-top: 1px solid var(--border-color);
}

/* Navigation Elements */
html[data-theme="light"] .navbar-toggler {
    border-color: var(--border-color);
}

html[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Logo and Icons - Remove filter since we're using different images */
html[data-theme="light"] .navbar-brand img,
html[data-theme="light"] .footer-logo {
    filter: none;
}

html[data-theme="light"] .dark-mode-btn img {
    filter: brightness(0);
    transition: filter 0.3s ease;
}

/* Language Button in Light Mode */
html[data-theme="light"] .lang-btn img {
    filter: brightness(0);
}

html[data-theme="light"] .lang-btn:hover {
    background: rgba(2, 115, 83, 0.1) !important;
}

/* Feature Icons - Will be handled by JavaScript */
html[data-theme="light"] .why-choose-item-img {
    filter: none;
    transition: all 0.3s ease;
}

/* Check icons */
html[data-theme="light"] img[src*="check.svg"] {
    filter: none;
}

/* Social media icons - Will be handled by JavaScript */
html[data-theme="light"] .social-link img {
    filter: none;
    transition: all 0.3s ease;
}


/* App store buttons */
html[data-theme="light"] img[src*="app-store-btn.svg"],
html[data-theme="light"] img[src*="google-play-btn.svg"] {
    filter: none;
}

/* Mobile Menu */
@media (max-width: 991px) {
    html[data-theme="light"] .navbar-collapse {
        border-top: 1px solid var(--border-color);
        background: var(--bg-primary);
    }
}

/* Text Colors */
html[data-theme="light"] .white {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .gray {
    color: var(--text-muted) !important;
}

/* Download App Section */
html[data-theme="light"] .download-app-container {
    background: linear-gradient(135deg, rgba(2, 115, 83, 0.05) 0%, rgba(15, 61, 19, 0.1) 100%);
}

/* Social Links */
html[data-theme="light"] .social-link {
    background: none;
    border: 1px solid var(--border-color);
}

html[data-theme="light"] .social-link:hover {
    background: rgb(251 188 22 / 31%);
}

/* Slider Buttons */
html[data-theme="light"] .slider-btn {
    background: #FFFFFF;
    color: #1A1A1A;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .slider-btn:hover {
    background: #027353;
    color: #fff;
}

/* Dots */
html[data-theme="light"] .dot {
    background: #CED4DA;
}

html[data-theme="light"] .dot:hover {
    background: #6C757D;
}

html[data-theme="light"] .dot.active {
    background: #027353;
}

html[data-theme="light"] header.header {
    border-bottom: 1px solid #E5E7EB;
    background: var(--bg-primary);
}

html[data-theme="light"] header.header.scrolled {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(243, 242, 239, 0.9);
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);
}

html[data-theme="light"] .header .navbar {
    padding: 1rem 0;
    position: relative;
    border-bottom: 1px solid #E5E7EB;
    box-shadow: 0px 1px 3px 0px #0000000D;
}

html[data-theme="light"] .bannar p.title-line {
    border: 1px solid #D1D5DC;
}

html[data-theme="light"] .our-numbers-item {
    border: 1px solid #FBBC164D;
}

html[data-theme="light"] .why-choose-item {
    box-shadow: 0 0px 0px #FBBC164D;
    border-top: 1px solid #FBBC164D;
}

html[data-theme="light"] .why-choose-item:hover {
    box-shadow: 0 0px 0px #FBBC164D;
}

html[data-theme="light"] .why-choose-item {
    border: 1px solid #FBBC164D;
    box-shadow: none;
}

.why-choose-item::before {
    background: none;
}

html[data-theme="light"] .download-app-container {
    background: #F5F6F5;
    margin: 0;
    padding: 60px 0;
}