.self-service-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #2a1a12;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}
.self-service-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.self-service-toggle-track { position: relative; width: 52px; height: 30px; flex: 0 0 52px; border-radius: 999px; background: #c9c5bf; box-shadow: inset 0 0 0 1px rgba(42,26,18,.18); transition: background .18s ease, box-shadow .18s ease; }
.self-service-toggle-track i { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(42,26,18,.25); transition: transform .18s ease; }
.self-service-toggle input:checked + .self-service-toggle-track { background: #2f7d3a; box-shadow: inset 0 0 0 1px rgba(17,105,47,.28); }
.self-service-toggle input:checked + .self-service-toggle-track i { transform: translateX(22px); }
.self-service-toggle input:focus-visible + .self-service-toggle-track { outline: 3px solid rgba(47,125,58,.28); outline-offset: 3px; }
.staff-self-service-toggle { position: static; width: 100%; min-height: 46px; box-sizing: border-box; justify-content: space-between; padding: 8px 14px; border-radius: 13px; transform: none; font-size: 16px; font-weight: 400; }
.staff-self-service-toggle:hover { background: rgba(0, 0, 0, .05); }
.staff-self-service-toggle strong { font-weight: 400; }
@media (max-width: 680px) { .staff-self-service-toggle strong { display: inline; font-size: 16px; } }