.vfc-captcha {
	--vfc-h: 46px;
	--vfc-w: 320px;
	--vfc-radius: 8px;
	--vfc-green: #2e9c4a;
	--vfc-track: #e9ecef;
	--vfc-border: #ced4da;
	--vfc-handle-bg: #fff;
	--vfc-text: #495057;
	--vfc-success-text: #fff;
	--vfc-icon: #495057;
	max-width: 100%;
	margin: 10px 0;
	font-family: inherit;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.vfc-track {
	position: relative;
	width: var(--vfc-w);
	max-width: 100%;
	height: var(--vfc-h);
	background: var(--vfc-track);
	border: 1px solid var(--vfc-border);
	border-radius: var(--vfc-radius);
	overflow: hidden;
	touch-action: none;
}

.vfc-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: var(--vfc-green);
	border-radius: var(--vfc-radius) 0 0 var(--vfc-radius);
	pointer-events: none;
}

.vfc-label {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px 0 calc(var(--vfc-h) + 6px);
	font-size: 13px;
	line-height: 1.2;
	color: var(--vfc-text);
	text-align: center;
	pointer-events: none;
	box-sizing: border-box;
}

.vfc-handle {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--vfc-h);
	height: var(--vfc-h);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vfc-handle-bg);
	border: 1px solid var(--vfc-border);
	border-radius: var(--vfc-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	cursor: grab;
	box-sizing: border-box;
	color: var(--vfc-icon);
	font-size: 20px;
	font-weight: bold;
	z-index: 2;
}

.vfc-handle:active {
	cursor: grabbing;
}

.vfc-handle .vfc-check {
	display: none;
}

.vfc-captcha.vfc-dragging .vfc-handle,
.vfc-captcha.vfc-dragging .vfc-fill {
	transition: none;
}

.vfc-captcha:not(.vfc-dragging) .vfc-handle,
.vfc-captcha:not(.vfc-dragging) .vfc-fill {
	transition: left .2s ease, width .2s ease;
}

/* Solved state — handle parked at the right; the whole track is green so the
   handle's rounded left corners sit on green, not on the track background.
   The right edge is clipped by the track's border-radius (overflow:hidden),
   which matches the handle's own rounding, so nothing peeks past the handle. */
.vfc-captcha.vfc-done .vfc-fill {
	width: 100% !important;
}

.vfc-captcha.vfc-done .vfc-label {
	color: var(--vfc-success-text);
	padding: 0 calc(var(--vfc-h) + 6px) 0 14px;
}

.vfc-captcha.vfc-done .vfc-handle {
	color: var(--vfc-green);
	border-color: var(--vfc-green);
	cursor: default;
}

.vfc-captcha.vfc-done .vfc-handle .vfc-arrow {
	display: none;
}

.vfc-captcha.vfc-done .vfc-handle .vfc-check {
	display: inline;
}

/* Error nudge (e.g. submit attempted before solving) */
.vfc-captcha.vfc-error .vfc-track {
	border-color: #d63638;
	animation: vfc-shake .35s;
}

@keyframes vfc-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}