/* ==========================================================================
   theme-toggle.css — light/dark toggle button
   Markup: <button id="theme-toggle"> inside the top-bar language-flag <li>
   group in frontend/views/layouts/main.php.
   Notes:  icon swap is pure-CSS via [data-theme="dark"] selector, no JS
   needed beyond the attribute toggle itself (see theme-toggle.md).
   ========================================================================== */

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--otzivi-radius-pill);
  border: 1px solid var(--otzivi-border);
  background: var(--otzivi-surface);
  color: var(--otzivi-text);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.theme-toggle-btn:hover {
  background: var(--otzivi-surface-soft);
  border-color: var(--otzivi-primary);
  color: var(--otzivi-primary);
}

.theme-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--otzivi-primary-rgb), .35);
}

.theme-toggle-btn .fa-moon-o,
.theme-toggle-btn .fa-sun-o {
  font-size: 16px;
  color: var(--otzivi-text);
  margin-right: 0;
}

/* Default (light): show moon (switch-to-dark affordance). */
.theme-toggle-btn .fa-sun-o { display: none; }
.theme-toggle-btn .fa-moon-o { display: inline-block; }

/* Dark theme: show sun (switch-to-light affordance). */
html[data-theme="dark"] .theme-toggle-btn .fa-moon-o { display: none; }
html[data-theme="dark"] .theme-toggle-btn .fa-sun-o { display: inline-block; }