/* Dark Mode Styles for SuperCars Theme */

/* Dark mode toggle button */
.dark-mode-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  background: #FF6600;
  border: none;
  color: white;
  padding: 10px 15px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dark-mode-toggle:hover {
  background: #FF8533;
  transform: scale(1.05);
}

/* Dark mode body styles */
body.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

/* Dark mode text colors - convert all black text to white/light */
body.dark-mode p,
body.dark-mode span,
body.dark-mode li,
body.dark-mode td,
body.dark-mode dd {
  color: #e0e0e0 !important;
}

/* Force white text for any elements with inline black color */
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color: black"],
body.dark-mode [style*="color:black"] {
  color: #ffffff !important;
}

/* Dark mode heading colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #ffffff;
}

/* Dark mode link colors */
body.dark-mode a {
  color: #FF6600;
}

body.dark-mode a:hover {
  color: #FF8533;
}

/* Dark mode blog cards */
body.dark-mode .blog-post-card {
  background-color: #2a2a2a !important;
  border-color: #444444 !important;
  color: #e0e0e0;
}

body.dark-mode .blog-post-card h3 {
  color: #ffffff !important;
}

body.dark-mode .blog-post-card h3 a {
  color: #ffffff !important;
}

body.dark-mode .blog-post-card p {
  color: #c0c0c0 !important;
}

/* Dark mode blockquote */
body.dark-mode blockquote {
  background-color: #2a2a2a;
  border-left-color: #FF6600;
  color: #e0e0e0;
}

/* Dark mode code blocks */
body.dark-mode code,
body.dark-mode pre {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border-color: #444444;
}

/* Dark mode tables */
body.dark-mode table {
  color: #e0e0e0;
}

body.dark-mode table th {
  background-color: #2a2a2a;
  color: #ffffff;
}

body.dark-mode table tr:nth-child(even) {
  background-color: #252525;
}

/* Dark mode form elements */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border-color: #444444;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #888888;
}

/* Dark mode buttons */
body.dark-mode .elementor-button {
  background-color: #FF6600;
}

body.dark-mode .elementor-button:hover {
  background-color: #FF8533;
}

/* Dark mode hero section */
body.dark-mode .elementor-section {
  background-color: #1a1a1a;
}

/* Dark mode footer */
body.dark-mode .site-footer,
body.dark-mode footer {
  background-color: #0f0f0f;
  color: #e0e0e0;
  border-top-color: #333333;
}

body.dark-mode .site-footer a {
  color: #FF6600;
}

/* Dark mode sidebar */
body.dark-mode .sidebar,
body.dark-mode .widget {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode .sidebar a {
  color: #FF6600;
}

/* Dark mode post content */
body.dark-mode .post-content,
body.dark-mode .entry-content,
body.dark-mode .the-content {
  color: #e0e0e0;
}

/* Dark mode header */
body.dark-mode .site-header,
body.dark-mode header {
  background-color: #1a1a1a;
  border-bottom-color: #333333;
}

body.dark-mode .site-header a {
  color: #ffffff;
}

/* Dark mode navigation */
body.dark-mode nav a {
  color: #e0e0e0;
}

body.dark-mode nav a:hover {
  color: #FF6600;
}

/* Dark mode Elementor widgets */
body.dark-mode .elementor-widget {
  color: #e0e0e0;
}

body.dark-mode .elementor-heading-title {
  color: #ffffff;
}

/* Dark mode dividers */
body.dark-mode .elementor-divider {
  border-color: #444444;
}

/* Smooth transition for dark mode */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode icon variations */
.dark-mode-toggle .sun-icon {
  display: none;
}

.dark-mode-toggle .moon-icon {
  display: inline;
}

body.dark-mode .dark-mode-toggle .sun-icon {
  display: inline;
}

body.dark-mode .dark-mode-toggle .moon-icon {
  display: none;
}