/* Dark theme overrides for the legacy template CSS (style.css, bootstrap).
   Loaded last. Everything is scoped to [data-theme="dark"] so the light theme is untouched. */

html[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--secondary-text);
}

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6 {
  color: var(--text-primary);
}

html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] label,
html[data-theme="dark"] small, html[data-theme="dark"] td, html[data-theme="dark"] th {
  color: var(--secondary-text);
}

html[data-theme="dark"] a { color: var(--primary-light); }
html[data-theme="dark"] a:hover { color: #c4b5fd; }

/* Bootstrap + template surfaces */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item {
  background-color: var(--bg-card) !important;
  color: var(--secondary-text);
  border-color: var(--border-color);
}

html[data-theme="dark"] .border,
html[data-theme="dark"] hr {
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black { color: var(--text-primary) !important; }
html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: rgba(76, 125, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(76, 125, 255, 0.25);
  outline: none;
}

html[data-theme="dark"] select option { background: var(--bg-card); color: var(--text-primary); }

/* Owl carousel dots / arrows */
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot span { background: var(--border-color-hover); opacity: 0.5; }
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot.active span,
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot:hover span { background: var(--accent-violet); opacity: 1; }

/* Scrollbar */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3070; border-radius: 6px; }
html[data-theme="dark"] ::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }

/* Template sections that set their own light background */
html[data-theme="dark"] .banner-section,
html[data-theme="dark"] .section-gray,
html[data-theme="dark"] .bg-gray {
  background-color: var(--bg-primary);
}

/* Legacy-class sections (no CSS-module class) default to the dark page colour */
html[data-theme="dark"] section:not([class*="_"]),
html[data-theme="dark"] .section-modern,
html[data-theme="dark"] .about-us,
html[data-theme="dark"] .package-section,
html[data-theme="dark"] .ptb-100 {
  background-color: var(--bg-primary);
}

/* Bright photo backgrounds: tint them into the palette so white text stays readable */
html[data-theme="dark"] section.achievements-section,
html[data-theme="dark"] .achievements-section {
  background-color: #1a2066;
  background-blend-mode: multiply;
}