/* ============================================
   LoadBox - Dark Mode CSS
   ============================================ */

body.dark-mode {
  /* Color overrides */
  --color-text: #F0F0F0;
  --color-text-muted: #AAAAAA;
  --color-text-light: #777777;
  --color-bg: #121212;
  --color-bg-alt: #1E1E1E;
  --color-bg-card: #242424;
  --color-border: #333333;
  --color-primary-light: #FF8C60;

  /* Shadow adjustments for dark mode */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.7);
  --shadow-hover: 0 12px 32px rgba(255, 107, 53, 0.3);
}

/* ============================================
   Dark Mode - Navigation
   ============================================ */

body.dark-mode .navbar.scrolled {
  background-color: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

body.dark-mode .navbar.scrolled .navbar__link {
  color: var(--color-text-muted);
}

body.dark-mode .navbar.scrolled .navbar__link:hover,
body.dark-mode .navbar.scrolled .navbar__link.active {
  color: var(--color-primary);
}

body.dark-mode .navbar.scrolled .navbar__dark-toggle {
  background: #2A2A2A;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

body.dark-mode .navbar.scrolled .navbar__dark-toggle:hover {
  background: #333333;
}

body.dark-mode .navbar__mobile-menu {
  background-color: #1A1A1A;
  border-bottom: 1px solid var(--color-border);
}

body.dark-mode .navbar__mobile-link {
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}

body.dark-mode .navbar__mobile-link:hover {
  color: var(--color-primary);
}

/* ============================================
   Dark Mode - Stats Bar
   ============================================ */

body.dark-mode .stats-bar {
  background: #0A2744;
}

/* ============================================
   Dark Mode - Feature Cards
   ============================================ */

body.dark-mode .feature-card {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

body.dark-mode .feature-card:hover {
  border-color: rgba(255, 107, 53, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

body.dark-mode .feature-card__icon-wrap {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.08) 100%);
}

body.dark-mode .feature-card:hover .feature-card__icon-wrap {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.25) 0%, rgba(255, 107, 53, 0.12) 100%);
}

/* ============================================
   Dark Mode - How It Works
   ============================================ */

body.dark-mode .step-card {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

body.dark-mode .step-card:hover {
  border-color: rgba(255, 107, 53, 0.2);
}

/* ============================================
   Dark Mode - Benefits
   ============================================ */

body.dark-mode .benefit-card {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

body.dark-mode .benefit-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Dark Mode - Pricing
   ============================================ */

body.dark-mode .pricing-card {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

body.dark-mode .pricing-card--featured {
  border-color: var(--color-primary);
  background: #2A2020;
}

body.dark-mode .pricing-card__divider {
  background: var(--color-border);
}

body.dark-mode .toggle-switch {
  background: #444444;
}

body.dark-mode .pricing__save-badge {
  background: rgba(6, 167, 125, 0.2);
}

/* ============================================
   Dark Mode - Testimonials
   ============================================ */

body.dark-mode .testimonial-slide {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

body.dark-mode .testimonials__btn {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-text);
}

body.dark-mode .testimonials__btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

body.dark-mode .testimonials__dot {
  background: var(--color-border);
}

body.dark-mode .testimonials__dot.active {
  background: var(--color-primary);
}

/* ============================================
   Dark Mode - FAQ
   ============================================ */

body.dark-mode .faq__search {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-text);
}

body.dark-mode .faq__search:focus {
  border-color: var(--color-primary);
  background: #2A2A2A;
}

body.dark-mode .faq__search::placeholder {
  color: var(--color-text-light);
}

body.dark-mode .accordion-item {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

body.dark-mode .accordion-item.open {
  border-color: rgba(255, 107, 53, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .accordion-icon {
  background: #333333;
  color: var(--color-text-muted);
}

body.dark-mode .accordion-item.open .accordion-icon {
  background: var(--color-primary);
  color: white;
}

/* ============================================
   Dark Mode - How It Works Tabs
   ============================================ */

body.dark-mode .how-it-works__tabs {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

body.dark-mode .how-it-works__tab {
  color: var(--color-text-muted);
}

body.dark-mode .how-it-works__tab.active {
  background: var(--color-primary);
  color: white;
}

/* ============================================
   Dark Mode - Footer
   ============================================ */

body.dark-mode .footer {
  background: #0D0D0D;
  border-top: 1px solid var(--color-border);
}

body.dark-mode .footer__divider {
  background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .footer__newsletter-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

body.dark-mode .footer__newsletter-input:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Dark Mode - Scroll to Top Button
   ============================================ */

body.dark-mode .scroll-top {
  background: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Dark Mode - Form Elements
   ============================================ */

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background: var(--color-bg-card);
  color: var(--color-text);
  border-color: var(--color-border);
}

body.dark-mode .form-msg--success {
  background: rgba(6, 167, 125, 0.15);
}

body.dark-mode .form-msg--error {
  background: rgba(230, 57, 70, 0.15);
}

/* ============================================
   Dark Mode - Buttons
   ============================================ */

body.dark-mode .btn--ghost {
  color: var(--color-text);
  border-color: var(--color-border);
}

body.dark-mode .btn--ghost:hover {
  background: var(--color-bg-card);
}

body.dark-mode .btn--outline {
  color: rgba(240, 240, 240, 0.9);
  border-color: rgba(240, 240, 240, 0.4);
}

body.dark-mode .btn--outline-dark {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

body.dark-mode .btn--outline-dark:hover {
  background: var(--color-primary);
  color: white;
}

/* ============================================
   Dark Mode Toggle Icon
   ============================================ */

.dark-toggle-icon-sun,
.dark-toggle-icon-moon {
  display: inline-block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

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

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

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

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

/* ============================================
   Dark Mode - Section Backgrounds
   ============================================ */

body.dark-mode .section--alt {
  background-color: var(--color-bg-alt);
}

body.dark-mode .how-it-works {
  background: var(--color-bg-alt);
}

body.dark-mode .pricing {
  background: var(--color-bg-alt);
}

body.dark-mode .faq {
  background: var(--color-bg-alt);
}

/* ============================================
   Dark Mode - Logo filter for dark bg sections
   ============================================ */

body.dark-mode .navbar__logo img {
  filter: brightness(0) invert(1);
}

body.dark-mode .navbar.scrolled .navbar__logo img {
  filter: none;
}

/* ============================================
   Dark Mode - Pricing feature icon
   ============================================ */

body.dark-mode .pricing-card__feature-icon {
  background: rgba(6, 167, 125, 0.15);
}

/* ============================================
   Dark Mode Transition
   ============================================ */

body,
body *,
body *::before,
body *::after {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

/* Exclude elements that should not have the transition */
body .navbar,
body .hero,
body .hero *,
body [class*="animate-"],
body .testimonials__track,
body .accordion-body {
  transition-property: none;
}

/* Re-apply specific transitions */
body .navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body .testimonials__track {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body .accordion-body {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body .reveal,
body .reveal--left,
body .reveal--right,
body .reveal--scale {
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}