/**
 * Clevie Community: the security check.
 *
 * Deliberately quiet. The computing check is something the visitor should
 * barely notice, and the picture should sit in the form like any other field
 * rather than announcing itself as an obstacle.
 */

.cvc-captcha {
	margin: 0 0 16px;
}

.cvc-captcha label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.95em;
}

.cvc-captcha input[type="text"] {
	width: 100%;
	max-width: 220px;
	padding: 8px 10px;
	border: 1px solid var(--cvc-border, #cfd4d9);
	border-radius: var(--cvc-radius, 6px);
	background: var(--cvc-surface, #fff);
	color: inherit;
	font-size: 1.05em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cvc-captcha--math input[type="text"] {
	max-width: 120px;
	letter-spacing: normal;
	text-transform: none;
}

.cvc-captcha__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.cvc-captcha__image {
	display: block;
	width: 200px;
	height: 70px;
	border: 1px solid var(--cvc-border, #cfd4d9);
	border-radius: var(--cvc-radius, 6px);
	background: #f6f7f8;
}

.cvc-captcha__refresh {
	padding: 6px 10px;
	border: 1px solid var(--cvc-border, #cfd4d9);
	border-radius: var(--cvc-radius, 6px);
	background: var(--cvc-surface, #fff);
	color: inherit;
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
}

.cvc-captcha__refresh:hover {
	background: var(--cvc-surface-2, #f6f7f8);
}

.cvc-captcha__refresh:disabled {
	opacity: 0.5;
	cursor: default;
}

/* ---------- The computing check ---------- */

.cvc-captcha__status {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.9em;
	opacity: 0.75;
}

.cvc-captcha__note {
	margin: 0;
	font-size: 0.9em;
	color: #b32d00;
}

.cvc-captcha__spinner {
	width: 13px;
	height: 13px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: cvc-captcha-spin 0.7s linear infinite;
}

.cvc-captcha.is-done .cvc-captcha__spinner {
	border: 0;
	border-radius: 0;
	animation: none;
	/* A tick, drawn out of two edges of a rotated box. */
	width: 6px;
	height: 11px;
	border-right: 2px solid #1a7f37;
	border-bottom: 2px solid #1a7f37;
	transform: rotate(45deg);
}

.cvc-captcha.is-done .cvc-captcha__status {
	opacity: 0.6;
}

.cvc-captcha.is-failed .cvc-captcha__status {
	color: #b32d00;
	opacity: 1;
}

.cvc-captcha.is-failed .cvc-captcha__spinner {
	display: none;
}

@keyframes cvc-captcha-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cvc-captcha__spinner {
		animation: none;
		border-right-color: currentColor;
		opacity: 0.5;
	}
}