/* Toggle appearance supplied by the user: Uiverse.io / MetaBlue2000.
   Opt in per page; maintained pages keep their styling until migrated. */
.la-toggle-switch,
.la-toggle-switch-scope .switch-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  min-width: 60px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}

.la-toggle-track,
.la-toggle-switch-scope .switch-track {
  position: relative;
  display: block;
  flex: none;
  width: 60px;
  height: 26px;
  padding: 0;
  border-radius: 20px;
  background: linear-gradient(to right, #e8e5dc, #72757d);
  transition: background 0.3s;
}

.la-toggle-thumb,
.la-toggle-switch-scope .switch-thumb {
  position: absolute;
  left: 4px;
  bottom: 3px;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: translateX(0);
  transition: transform 0.3s, background 0.3s;
}

.la-toggle-switch[aria-checked="true"] .la-toggle-track,
.la-toggle-switch-scope .switch-control[aria-checked="true"] .switch-track {
  background: linear-gradient(to right, #66bb6a, #43a047);
}

.la-toggle-switch[aria-checked="true"] .la-toggle-thumb,
.la-toggle-switch-scope .switch-control[aria-checked="true"] .switch-thumb {
  transform: translateX(32px);
  background: #66bb6a;
}

.la-toggle-switch:disabled,
.la-toggle-switch-scope .switch-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .la-toggle-track,
  .la-toggle-thumb,
  .la-toggle-switch-scope .switch-track,
  .la-toggle-switch-scope .switch-thumb {
    transition: none;
  }
}