/* V22.89 — "Slide to send" (public forms). Knob: Bookingo ink; chevrons ripple in brand red. */
.sts{--sts-p:0;position:relative;height:64px;margin:6px 0 0;border-radius:999px;background:#EEF3F0;border:1px solid #E2EAE5;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.sts-fill{position:absolute;left:0;top:0;bottom:0;width:72px;border-radius:999px;background:linear-gradient(90deg,#E3F4E8,#DDF2E3);pointer-events:none}
.sts-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;padding-left:64px;font-weight:700;font-size:16px;color:#10201A;pointer-events:none;opacity:calc(1 - var(--sts-p) * 1.6)}
.sts-chev{display:inline-flex;gap:1px;font-size:22px;font-weight:800;line-height:1;color:#16833F}
.sts-chev i{font-style:normal;animation:sts-wave 1.4s ease-in-out infinite;opacity:.25}
.sts-chev i:nth-child(2){animation-delay:.18s}
.sts-chev i:nth-child(3){animation-delay:.36s}
@keyframes sts-wave{0%,100%{opacity:.25;transform:translateX(0)}40%{opacity:1;transform:translateX(3px)}}
.sts-knob{position:absolute;left:4px;top:4px;z-index:2;width:56px;height:56px;border:0;border-radius:50%;background:#10201A;color:#fff;display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:0 4px 14px rgba(21,23,28,.28);touch-action:none}
.sts-knob svg{width:24px;height:24px}
.sts.is-drag .sts-knob{cursor:grabbing}
.sts-knob:focus-visible{outline:3px solid #16833F;outline-offset:3px}
.sts-knob:hover{background:#10201A}
.sts.is-done{background:#E7F6EE;border-color:#A7DDBF}
.sts.is-done .sts-fill{background:linear-gradient(90deg,#CDEFDB,#A7DDBF)}
.sts.is-done .sts-knob{background:#0F6B3E;cursor:default}
.sts.is-done .sts-txt{opacity:1;padding-left:0;padding-right:64px;color:#0F6B3E}
.sts.is-done .sts-chev{display:none}
.sts-live{margin:6px 0 0;min-height:1.2em;font-size:13px;color:#5A6962}
@media (prefers-reduced-motion:reduce){.sts-chev i{animation:none;opacity:.7}.sts-knob,.sts-fill{transition:none !important}}