/* Selector vizual Fleet, disponibil în ambele teme. Tema aleasă este păstrată
   de mecanismul comun `amo_ui_mode` din site-branding.js. */

.navbar .ui-mode-switch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
  margin-left: auto;
  padding: 5px 10px;
  color: #8da8cc;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(77, 163, 255, 0.18);
  border-radius: 999px;
}

.navbar .ui-mode-switch-text {
  color: #8da8cc;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.navbar .ui-mode-switch-text.active {
  color: #e8f0ff;
}

.navbar .ui-mode-toggle {
  appearance: none;
  display: inline-flex;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.navbar .ui-mode-toggle-track {
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
}

.navbar .ui-mode-toggle-thumb {
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.24);
  transform: translateX(0);
  transition: transform 0.22s ease;
}

body[data-ui-mode='soft-grid'] .navbar .ui-mode-switch {
  color: #57524a;
  background: #faf9f6;
  border-color: #ded9cf;
}

body[data-ui-mode='soft-grid'] .navbar .ui-mode-switch-text {
  color: #6b6459;
}

body[data-ui-mode='soft-grid'] .navbar .ui-mode-switch-text.active {
  color: #1a1814;
}

body[data-ui-mode='soft-grid'] .navbar .ui-mode-toggle-track {
  background: #d8c6a1;
  box-shadow: inset 0 0 0 1px rgba(176, 138, 69, 0.18);
}

body[data-ui-mode='soft-grid'] .navbar .ui-mode-toggle-thumb {
  transform: translateX(16px);
}

@media (max-width: 680px) {
  .navbar .ui-mode-switch {
    gap: 6px;
    margin-left: auto;
    padding: 4px 7px;
  }

  .navbar .ui-mode-switch-text {
    display: none;
  }
}