/* ===== Slider Captcha Styles (Template) ===== */
.sc { font: inherit; user-select: none; }
.sc-label { margin: 0 0 .35rem 0; font-weight: 500; }

/* Track */
.sc-track {
  position: relative; height: 44px; border-radius: 22px;
  background: #f2f3f5; border: 1px solid #d9dde3; overflow: hidden;
}

/* Fortschrittsfüllung */
.sc-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, #bfe3c2, #9ad29f);
  transition: width .05s linear;
}

/* Thumb/Griff */
.sc-thumb {
  position: absolute; left: 0; top: 0; height: 100%; width: 64px;
  background: #ffffff;
  border: 1px solid #c3c9d0; border-radius: 22px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  cursor: grab;
}
.sc-thumb:active { cursor: grabbing; }
.sc-thumb:focus-visible { outline: 2px solid #2f6fed; outline-offset: 2px; }

/* Hinweistext */
.sc-hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #6b7280; font-size: 0.95rem; pointer-events: none;
}

/* Erfolgszustand */
.sc.done .sc-thumb { background: #2ecc71; border-color: #28b463; color: #fff; cursor: default; }
.sc.done .sc-hint { color: #145a32; }
.sc.done .sc-track { border-color: #a9dfbf; }

/* Sichtbarer Fokusrahmen am Track (z. B. nach setDone -> track.focus()) */
.sc-track:focus { outline: 2px solid #a5b4fc; outline-offset: 2px; }

/* Honeypot visuell ausblenden, aber für Screenreader verstecken */
.sc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }