.sib-slide-captcha {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
max-width: 520px;
}

.sc-title { margin: 0 0 10px; font-weight: 600; color: #0b2239; }

/* === Lane: one positioned container that controls everything === */
.sc-lane{
position: relative;
display: flex;
align-items: center;
gap: 44px; /* visual gap between chip and options */
/*padding: 0px 20px; */
border-radius: 999px;
background: #ffefef;
user-select: none;
-webkit-user-select: none;
touch-action: none; /* prevent page scroll while dragging */
overflow: visible;
height: 87%;
}

/* Start area houses the chip’s absolute positioning space */
.sc-start-pad{
position: relative;
width: 46px; /* width of the left “pad” */
height: 46px;
flex: 0 0 auto;
left:14px ;
}

/* Options area */
.sc-track{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 2px 21px;
background: #ffffff;
border-radius: 999px;
border: 1px solid #fbf2f2;
height: 40px;
flex: 1 1 auto;
}

/* Option bubbles */
.sc-option{
width: 30px; height: 30px;
border-radius: 50%;
border: 2px solid #eee;
background: #fff;
display: grid; place-items: center;
transition: border-color .15s, transform .1s;
}
.sc-option.is-selected{ border-color:#247cff; transform: scale(1.05); }
.sc-option img{ width:100%; height:100%; border-radius:50%; object-fit:cover; pointer-events:none; }

/* Draggable chip */
.sc-handle{
position: absolute; /* IMPORTANT: positioned INSIDE sc-start-pad */
top: 9px; left: 15px; /* initial resting spot (separate from options) */
width: 28px; height: 28px; border-radius: 50%;
background: #fff;
box-shadow: 0 6px 16px rgba(0,0,0,.2);
cursor: grab; z-index: 3; will-change: left;
}
.sc-handle:active{ cursor: grabbing; }
.sc-handle img{ width:100%; height:100%; border-radius:50%; object-fit:cover; pointer-events:none; }

/* Actions */
.sc-actions{ margin-top: 12px; display:flex; align-items:center; gap:12px; }
.sc-actions button{
background:#247cff; color:#fff; border:0; border-radius:10px; padding:10px 16px; font-weight:700; cursor:pointer;
}
.sc-msg{ font-weight:600; }
.sc-msg.ok{ color:#0a8f2f; } .sc-msg.err{ color:#c43b3b; }

/*@media (max-width:520px){
.sc-start-pad{ width:86px; height:86px; }
.sc-track{ height:86px; }
.sc-option, .sc-handle{ width:72px; height:72px; }
} */


/* --- slide hint motion --- */
@keyframes slideHint {
0% { transform: translateX(0); }
30% { transform: translateX(24px); }
60% { transform: translateX(0); }
80% { transform: translateX(12px); }
100% { transform: translateX(0); }
}

/* --- soft glow ring while hint plays --- */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 6px 16px rgba(0,0,0,.2),
                0 0 0 0 rgba(255,0,0,0.0); /* Transparent red */
  }
  50% {
    box-shadow: 0 6px 16px rgba(0,0,0,.2),
                0 0 0 12px rgba(255,0,0,0.25); /* Semi-transparent red */
  }
}


/* apply both only during hint */
.sc-handle.animate-hint {
animation: slideHint 1.4s ease-in-out;
}
.sc-handle.animate-hint::after {
content: "";
position: absolute;
inset: -6px; /* a bit larger than the circle */
border-radius: 50%;
pointer-events: none;
animation: glowPulse 1.4s ease-in-out;
}