/* Dark Theme Styles */

/* Root variables for dark theme */
body.dark-theme {
  --primary-dark: #f5f5f5;
  --secondary-dark: #b0b0b0;
  --background-dark: #1a1a1a;
  --background-alt-dark: #242424;
  --border-dark: #404040;
  --card-dark: #2d2d2d;
  --text-muted-dark: #a0a0a0;
}

/* Main desktop background */
body.dark-theme .desktop {
  background-color: var(--background-dark);
}

/* Navigation bar */
body.dark-theme .desktop .nav-bar {
  background-color: var(--background-alt-dark);
  border-color: var(--border-dark);
}

/* All text-wrapper elements - ensure they are visible in dark mode */
body.dark-theme .desktop .text-wrapper,
body.dark-theme .desktop .text-wrapper-2,
body.dark-theme .desktop .text-wrapper-3,
body.dark-theme .desktop .text-wrapper-4,
body.dark-theme .desktop .text-wrapper-5,
body.dark-theme .desktop .text-wrapper-6,
body.dark-theme .desktop .text-wrapper-7,
body.dark-theme .desktop .text-wrapper-8,
body.dark-theme .desktop .text-wrapper-9,
body.dark-theme .desktop .text-wrapper-10,
body.dark-theme .desktop .text-wrapper-11,
body.dark-theme .desktop .text-wrapper-12,
body.dark-theme .desktop .text-wrapper-13,
body.dark-theme .desktop .text-wrapper-14,
body.dark-theme .desktop .text-wrapper-15,
body.dark-theme .desktop .text-wrapper-16,
body.dark-theme .desktop .text-wrapper-17,
body.dark-theme .desktop .text-wrapper-18,
body.dark-theme .desktop .text-wrapper-19 {
  color: var(--primary-dark);
}

/* Secondary/muted text elements */
body.dark-theme .desktop .p,
body.dark-theme .desktop .text-wrapper-10,
body.dark-theme .desktop .text-wrapper-14,
body.dark-theme .desktop .text-wrapper-16,
body.dark-theme .desktop .text-wrapper-17,
body.dark-theme .desktop .text-wrapper-18,
body.dark-theme .desktop .text-wrapper-19 {
  color: var(--secondary-dark);
}

/* Hero section */
body.dark-theme .desktop .hero-section {
  background-color: var(--background-alt-dark);
}

body.dark-theme .desktop .text-wrapper-4 {
  color: var(--primary-dark);
}

body.dark-theme .desktop .p {
  color: var(--secondary-dark);
}

/* Feature badges */
body.dark-theme .desktop .text-wrapper-5,
body.dark-theme .desktop .text-wrapper-6 {
  color: var(--secondary-dark);
}

/* Services section */
body.dark-theme .desktop .services {
  background-color: var(--background-dark);
}

body.dark-theme .desktop .frame-12 {
  background-color: var(--card-dark);
  border-color: var(--border-dark);
}

body.dark-theme .desktop .text-wrapper-9 {
  color: var(--primary-dark);
}

body.dark-theme .desktop .text-wrapper-10 {
  color: var(--secondary-dark);
}

/* Advantages section */
body.dark-theme .desktop .advantages {
  background-color: var(--background-alt-dark);
}

body.dark-theme .desktop .text-wrapper-11 {
  color: var(--primary-dark);
}

body.dark-theme .desktop .text-wrapper-12 {
  color: var(--secondary-dark);
}

/* Pricing section */
body.dark-theme .desktop .pricing {
  background-color: var(--background-dark);
}

body.dark-theme .desktop .frame-20 {
  background-color: var(--card-dark);
  border-color: var(--border-dark);
}

body.dark-theme .desktop .text-wrapper-14,
body.dark-theme .desktop .text-wrapper-16 {
  color: var(--secondary-dark);
}

body.dark-theme .desktop .text-wrapper-17 {
  color: var(--text-muted-dark);
}

/* Bottom CTA section */
body.dark-theme .desktop .div-2 {
  background-color: var(--background-alt-dark);
}

body.dark-theme .desktop .text-wrapper-18 {
  color: var(--secondary-dark);
}

/* Footer */
body.dark-theme .desktop .frame-29 {
  background-color: var(--background-dark);
}

body.dark-theme .desktop .text-wrapper-19 {
  color: var(--secondary-dark);
}

/* Image borders */
body.dark-theme .desktop .image {
  border-color: var(--border-dark);
}

body.dark-theme .desktop .image-2,
body.dark-theme .desktop .image-3,
body.dark-theme .desktop .image-4 {
  border-color: var(--border-dark);
}

/* SVG icons - make them light in dark mode */
body.dark-theme .desktop .vector,
body.dark-theme .desktop .vector-2,
body.dark-theme .desktop .vector-3,
body.dark-theme .desktop .img,
body.dark-theme .desktop .frame-9 {
  filter: brightness(0) invert(1);
}

/* Ensure vector icons inside buttons are visible */
body.dark-theme .desktop .frame-4 .vector,
body.dark-theme .desktop .frame-4 .img,
body.dark-theme .desktop .frame-10 .vector-3,
body.dark-theme .desktop .frame-28 .vector-3,
body.dark-theme .desktop .frame-28 .img {
  filter: brightness(0) invert(1);
}

/* Theme toggle button styles - Dark theme only */
body.dark-theme .theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 15px;
}

body.dark-theme .theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .theme-toggle svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
  transition: fill 0.3s ease;
}

body.dark-theme .theme-toggle:hover svg {
  fill: #ffffff;
}

/* Sun icon (shown in dark mode) */
body.dark-theme .theme-toggle .sun-icon {
  display: block;
}

/* Moon icon (shown in light mode) */
body.dark-theme .theme-toggle .moon-icon {
  display: none;
}

/* Frame-4 buttons (navigation phone buttons) */
body.dark-theme .desktop .frame-4 {
  background-color: #1e3a5f;
  border-color: #2d4a6f;
}

body.dark-theme .desktop .frame-4:hover {
  background-color: #2d4a6f;
}

/* Frame-10 button (hero section CTA) */
body.dark-theme .desktop .frame-10 {
  background-color: #1e3a5f;
  border-color: #2d4a6f;
}

body.dark-theme .desktop .frame-10:hover {
  background-color: #2d4a6f;
}

/* Frame-28 buttons (bottom CTA) */
body.dark-theme .desktop .frame-28 {
  background-color: #1e3a5f;
  border-color: #2d4a6f;
}

body.dark-theme .desktop .frame-28:hover {
  background-color: #2d4a6f;
}

/* Ensure text remains visible on these buttons */
body.dark-theme .desktop .text-wrapper-3,
body.dark-theme .desktop .text-wrapper-7 {
  color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
  }
}