/* -----------------------------------------
    Dark mode – variable overrides
----------------------------------------- */
html.dark-mode {
  --color-white: #1a1d1f;
  --color-white-rgb: 26, 29, 31;
  --color-dark: #e8eaed;
  --color-dark-rgb: 232, 234, 237;
  --color-medium: #9aa0a6;
  --color-medium-rgb: 154, 160, 166;
  --color-light: #25282c;
  --color-light-rgb: 37, 40, 44;
  --bg-light: #111315;
  --border-color: #2d3135;
  --shadow-md: 0px 4px 80px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0px 10px 40px rgba(0, 0, 0, 0.2);
}

html.dark-mode body {
  background-color: #1a1d1f;
  color: var(--color-dark);
}

/* Header in dark mode */
html.dark-mode .header-area.is-sticky,
html.dark-mode .header-area:not(.header-2) {
  background: rgba(var(--color-white-rgb), 0.95);
  box-shadow: 0px 8px 60px rgba(0, 0, 0, 0.25);
}

@media (max-width: 1199.98px) {
  html.dark-mode .header-area {
    background: rgba(var(--color-white-rgb), 0.95);
    box-shadow: 0px 8px 60px rgba(0, 0, 0, 0.25);
  }
}

/* Cards and panels */
html.dark-mode .card,
html.dark-mode .single-content,
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode input:not([type="submit"]):not([type="button"]),
html.dark-mode textarea {
  background-color: #25282c;
  border-color: var(--border-color);
  color: var(--color-dark);
}

html.dark-mode .form-control::placeholder,
html.dark-mode .form-control::-webkit-input-placeholder {
  color: var(--color-medium);
}

/* Dropdowns */
html.dark-mode .dropdown-menu {
  background-color: #25282c;
  border-color: var(--border-color);
}

html.dark-mode .dropdown-item {
  color: var(--color-dark);
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-dark);
}

/* Nice select (language) in header */
html.dark-mode .header-area .nice-select .list {
  background-color: #25282c;
  border-color: var(--border-color);
}

html.dark-mode .header-area .nice-select .list li {
  color: var(--color-dark);
}

/* Footer */
html.dark-mode footer,
html.dark-mode .footer-widget {
  background-color: #111315 !important;
  border-color: var(--border-color);
}

html.dark-mode footer *,
html.dark-mode .footer-widget * {
  color: inherit;
}

html.dark-mode footer .text-muted,
html.dark-mode .footer-widget .text-muted {
  color: var(--color-medium) !important;
}

/* Sections with bg-light */
html.dark-mode .bg-light,
html.dark-mode [class*="bg-light"] {
  background-color: var(--bg-light) !important;
}

/* Theme toggle – fixed above scroll to top button */
.theme-toggle-fixed-wrapper {
  position: fixed;
  left: 3%;
  bottom: calc(3% + 45px + 12px);
  z-index: 101;
  display: flex;
  align-items: center;
}

@media (max-width: 1199.98px) {
  .theme-toggle-fixed-wrapper {
    left: 3%;
    bottom: calc(3% + 35px + 10px);
  }
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  position: relative;
  z-index: 1000;
  pointer-events: auto;
}

.theme-toggle-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
  font-size: 18px;
  line-height: 1;
}

.theme-toggle-btn .icon-moon {
  display: none;
}

html.dark-mode .theme-toggle-btn .icon-sun {
  display: none;
}

html.dark-mode .theme-toggle-btn .icon-moon {
  display: inline-block;
}