/* ===== EHGEZLY DARK MODE STYLES ===== */

/* Enhanced CSS Variables for Dark/Light Mode */
:root {
  /* Light Mode Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-light: #f1f3f5;
  --bg-card: #ffffff;
  --bg-card-t: rgba(255, 255, 255, 0.2);
  --bg-hero: #ffffff;
  
  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #343c43;
  --text-muted: #868e96;
  --text-inverse: #ffffff;
  
  /* UI Colors */
  --border-color: #dee2e6;
  --nav-bg: rgba(255, 255, 255, 0.95);
  --footer-bg: #2c3e50;
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-lg: rgba(0, 0, 0, 0.15);
  
  /* Brand Colors */
  --brand-primary: #2563eb;
  --brand-secondary: #10b981;
  --brand-accent: #10b981;
  
  /* Background Images */
  --hero-bg-image: url('../images/bg-soccer-dark.webp');
  --hero-overlay: linear-gradient(180deg, rgba(255, 193, 7, 0.05), rgba(0, 0, 0, 0.3));
}

/* Dark Mode Variables */
.dark-mode {
  /* Dark Mode Colors */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-light: #333333;
  --bg-card: #2d2d2d;
  --bg-card-t: rgba(45, 45, 45, 0.2);
  --bg-hero: #1a1a1a;
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-muted: #a0a0a0;
  --text-inverse: #000000;
  --text-light: #c4c4c4;

  /* UI Colors */
  --border-color: #404040;
  --nav-bg: rgba(26, 26, 26, 0.95);
  --footer-bg: #1a1a1a;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-lg: rgba(0, 0, 0, 0.5);
  
  /* Background Images */
  --hero-bg-image: url('../images/bg-dark.webp');
  --hero-overlay: linear-gradient(180deg, rgba(255, 193, 7, 0.05), rgba(0, 0, 0, 0.6));
}

/* Apply Variables to Elements */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navigation */
.navbar {
  background: transparent !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: transparent !important;
  box-shadow: 0 2px 20px var(--shadow);
  border-bottom: 1px solid var(--border-color);
}

.nav-link {
  color: var(--text-primary) !important;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--brand-secondary) !important;
}

.logo span {
  color: var(--text-primary) !important;
  transition: color 0.3s ease;
}

/* Sections */
.section {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease;
}

.section:nth-child(even) {
  background-color: var(--bg-secondary);
}

/* Hero Section */
.hero {
  background-size: cover !important;
  background-position: center 25% !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  padding: 15rem 0 !important;
  position: relative !important;
  color: var(--text-primary);
}

.hero .background-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: var(--hero-overlay) !important;
  z-index: 1 !important;
  backdrop-filter: blur(6px) !important;
}

/* Hide background overlay in dark mode */
/* .dark-mode .hero .background-overlay {
  display: none !important;
} */

/* Hide hero ::before pseudo-element overlay in dark mode */
/* .dark-mode .hero::before {
  display: none !important;
} */

/* Cards */
.card,
.feature-card {
  background-color: var(--bg-card-t) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(3px);
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 6px var(--shadow) !important;
  transition: all 0.3s ease;
}

.card:hover,
.feature-card:hover {
  box-shadow: 0 8px 25px var(--shadow-lg) !important;
  transform: translateY(-2px);
}

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

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

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

/* Forms */
.contact-form,
.newsletter-form {
  color: var(--text-primary);
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.newsletter-form input {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--border-color) !important;
  transition: all 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.newsletter-form input::placeholder {
  color: var(--text-muted) !important;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.newsletter-form input:focus {
  background-color: var(--bg-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}

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

/* Buttons */
.btn {
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--text-inverse);
  justify-content: center;
}

.btn-primary:hover {
  background-color: transparent;
  border-color: var(--brand-secondary);
  color: var(--text-dark);
}

.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--text-primary);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background-color: var(--text-primary);
  color: var(--bg-primary);
}

.btn-white {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border: 2px solid var(--text-primary);
}

.btn-white:hover {
  background-color: transparent;
  color: var(--text-primary);
}

/* Footer */


.footer a {
  color: var(--text-primary) ;
  transition: color 0.3s ease;
}


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

.footer-bottom {
  border-top: 1px solid var(--border-color);
}

/* Stats Section */
.stats {
  background-color: var(--bg-light) !important;
}

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

.stat-number {
  color: var(--brand-secondary) !important;
}

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

/* App Showcase */
.app-showcase {
  background-color: var(--bg-secondary) !important;
}

/* Section Headers */
.section-title {
  color: var(--text-primary) !important;
}

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

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

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

/* Contact Section */
.contact-info {
  color: var(--text-primary);
}

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

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

.contact-icon {
  color: var(--brand-secondary) !important;
}

/* Social Links */
.social-link {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: var(--brand-secondary) !important;
  color: var(--text-inverse) !important;
  transform: translateY(-2px);
}

/* FAQ Items (for help page) */
.faq-item {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
}

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

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

/* Content Areas (for privacy and terms pages) */
.privacy-content,
.terms-content {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.privacy-content h2,
.privacy-content h3,
.terms-content h2,
.terms-content h3 {
  color: var(--text-primary) !important;
}

.privacy-content p,
.privacy-content li,
.terms-content p,
.terms-content li {
  color: var(--text-secondary) !important;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
  min-width: 40px;
  height: 36px;
}

.dark-mode-toggle:hover {
  background: var(--brand-secondary);
  color: var(--text-inverse);
  border-color: var(--brand-secondary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dark-mode-toggle i {
  transition: transform 0.3s ease;
}

.dark-mode-toggle:hover i {
  transform: rotate(15deg);
}

/* Dark mode specific toggle styling */
.dark-mode .dark-mode-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.dark-mode .dark-mode-toggle:hover {
  background: var(--brand-accent);
  color: #ffffff;
  border-color: var(--brand-accent);
}

/* Mobile Menu */
.mobile-menu-toggle span {
  background-color: var(--text-primary) !important;
}

/* Animation for theme transitions */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Additional comprehensive theming for all elements */

/* Ensure all text elements use variables */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

p, span, div, li, a {
  color: var(--text-secondary) ;
}

/* Override any hardcoded white backgrounds */
.bg-white,
.background-white,
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"] {
  background-color: var(--bg-card) !important;
}

/* Override any hardcoded white text */
.text-white,
[style*="color: white"],
[style*="color: #fff"],
[style*="color: #ffffff"] {
  color: var(--text-primary) !important;
}

/* Hero content positioning */
.hero-content {
  position: relative !important;
  z-index: 2 !important;
}

.hero .container {
  position: relative !important;
  z-index: 2 !important;
}

/* Feature grid and items */
.features-grid,
.feature-item {
  background-color: var(--bg-primary) !important;
}

/* App preview section */
.app-preview {
  background-color: var(--bg-secondary) !important;
}

/* Download buttons */
.download-btn {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.download-btn:hover {
  background-color: var(--brand-secondary) !important;
  color: var(--text-inverse) !important;
}

/* Newsletter section */
.newsletter {
  background-color: var(--bg-secondary) !important;
}

.newsletter-input {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.newsletter-input::placeholder {
  color: var(--text-muted) !important;
}

/* Business page specific styles */
.business-hero,
.business-section {
  background-color: var(--bg-primary) !important;
}

.pricing-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
}

.pricing-price {
  color: var(--brand-secondary) !important;
}

/* Help page specific styles */
.help-section {
  background-color: var(--bg-primary) !important;
}

.search-box {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Privacy and Terms page styles */
.content-section {
  background-color: var(--bg-primary) !important;
}

.content-container {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* Fix any remaining white elements */
.white,
.bg-light,
.light-bg {
  background-color: var(--bg-secondary) !important;
}

/* Ensure proper text contrast */
.dark-text {
  color: var(--text-primary) !important;
}

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

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

/* Make sure all form elements are themed */
input, textarea, select {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
}

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

.dropdown-item:hover {
  background-color: var(--bg-secondary) !important;
}

/* Modals and overlays */
.modal-content {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
}

.modal-header, .modal-footer {
  border-color: var(--border-color) !important;
}

/* Tables */
.table {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.table th, .table td {
  border-color: var(--border-color) !important;
}

/* Breadcrumbs and navigation aids */
.breadcrumb {
  background-color: var(--bg-secondary) !important;
}

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

/* Tooltips */
.tooltip-inner {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* Progress bars */
.progress {
  background-color: var(--bg-secondary) !important;
}

.progress-bar {
  background-color: var(--brand-secondary) !important;
}

/* Badges and labels */
.badge {
  background-color: var(--brand-secondary) !important;
  color: var(--text-inverse) !important;
}

/* Alert components */
.alert {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}