/* ============================================================
   Dark / Light Mode
   ------------------------------------------------------------
   This template uses a lot of different components (cards, forms,
   carousels, etc.), so instead of dark-styling every component
   individually, a reliable "invert" technique is used here:
   the whole page gets inverted + hue-rotated (light bg -> dark bg,
   dark text -> light text, all colors stay roughly correct),
   and photos/videos are inverted a second time to restore their
   original colors.
   ============================================================ */

html {
  transition: filter 0.25s ease;
}

html.dark-mode {
  background: #fff;
  filter: invert(1) hue-rotate(180deg);
}

html.dark-mode img,
html.dark-mode video,
html.dark-mode iframe,
html.dark-mode picture {
  filter: invert(1) hue-rotate(180deg);
}

/* Slight shadow/border adjustment in dark mode so things don't look too flat */
html.dark-mode .shadow,
html.dark-mode .card,
html.dark-mode .bg-white {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15) !important;
}

/* Theme toggle button styling - fully custom, not dependent on Bootstrap's .btn classes */
.theme-toggle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--primary, #E63A2E);
  color: #fff;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, transform 0.15s ease;
}

.theme-toggle-btn:hover {
  background: var(--secondary, #12377D);
  transform: scale(1.08);
}

.theme-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.35);
}

.theme-toggle-btn i {
  pointer-events: none;
}

@media (max-width: 991px) {
  .theme-toggle-btn {
    margin-top: 15px;
  }
}