/* Generic dark mode overrides for static WordPress/Divi pages */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --link-color: #4361EE;
}

:root.dark, body.dark, html.dark {
  --bg-color: #0F0F14;
  --text-color: #E2E2E2;
  --link-color: #5E7BFF;
  background-color: #0F0F14 !important;
}

body.dark #page-container, 
body.dark #main-content, 
body.dark #et-main-area,
body.dark .et_pb_section,
body.dark .et_pb_row,
body.dark .et_pb_column {
  background-color: #0F0F14 !important;
}

body.dark, 
body.dark * {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--text-color) !important;
  border-color: #333 !important;
  box-shadow: none !important;
}

html.dark,
body.dark {
  background-color: var(--bg-color) !important;
}

body.dark a {
  color: #64B5F6 !important;
}

body.dark .et_pb_module.et_pb_text {
  background-color: transparent !important;
}

/* Specific Divi / WordPress fixes */
body.dark #top-header,
body.dark #main-header {
  background-color: #1A1A20 !important;
}

body.dark #main-footer {
  background-color: #0A0A0E !important;
}

body.dark .et_pb_widget,
body.dark .fwidget {
  color: var(--text-color) !important;
}

body.dark img {
  opacity: 0.9;
}

body.dark iframe {
  filter: brightness(0.8);
}

/* Custom Accordion Support (order-faq) */
body.dark .accordion {
  background-color: #1A1A20 !important;
  color: var(--text-color) !important;
  border-bottom-color: #333 !important;
}

body.dark .active, 
body.dark .accordion:hover {
  background-color: #25252D !important;
}

body.dark .panel {
  background-color: #0F0F14 !important;
  color: var(--text-color) !important;
  border-bottom-color: #333 !important;
}

/* Divi Toggle/Accordion fix */
body.dark .et_pb_toggle {
  background-color: #1A1A20 !important;
  border-color: #333 !important;
}

body.dark .et_pb_toggle_title {
  color: var(--text-color) !important;
}

body.dark .et_pb_toggle_content {
  color: #B0B0B0 !important;
}

/* Reset elements with white background inline styles */
body.dark [style*="background: #ffffff"],
body.dark [style*="background:#ffffff"],
body.dark [style*="background-color: #ffffff"],
body.dark [style*="background-color:#ffffff"],
body.dark [style*="background: white"],
body.dark [style*="background:white"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* Ensure centered text (often used for headers) behaves well */
body.dark [align="CENTER"],
body.dark [align="center"] {
  color: var(--text-color) !important;
}