/**
 * MakeAdera Contact form CAPTCHA (template-parts/pages/contact.php, asserts/js/captcha.js)
 * Label, input and error styles come from contact.css (.ma-contact-field).
 *
 * @package MakeAdera
 * @author aderaDev
 */

.ma-captcha {
	margin-top: 6px;
}

.ma-captcha-hint {
	margin: -2px 0 12px;
	font-size: 12.5px;
	color: var(--makeadera-color-gray-mid, #86828F);
}

.ma-captcha-box {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.ma-captcha-image-wrap {
	position: relative;
	flex: 0 1 260px;
	width: 260px;
	max-width: 100%;
	aspect-ratio: 260 / 84;
	overflow: hidden;
	background-color: #F0F0F0;
	border: 1px solid var(--makeadera-color-slate-light, #E9E6F0);
	border-radius: 6px;
}

.ma-captcha-image {
	display: block;
	width: 100%;
	height: 100%;
	user-select: none;
	-webkit-user-drag: none;
}

.ma-captcha-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	text-align: center;
	font-size: 13px;
	color: var(--makeadera-color-gray-mid, #86828F);
	background-color: rgba(255, 255, 255, 0.92);
}

.ma-captcha-loading[hidden] {
	display: none;
}

.ma-captcha-refresh {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--makeadera-color-charcoal, #262234);
	background-color: var(--makeadera-color-white, #FFFFFF);
	border: 1px solid var(--makeadera-color-slate-light, #E9E6F0);
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}

.ma-captcha-refresh:hover,
.ma-captcha-refresh:focus-visible {
	color: var(--makeadera-color-accent-red, #C3241D);
	background-color: var(--makeadera-color-white, #FFFFFF);
	border-color: var(--makeadera-color-accent-red, #C3241D);
}

.ma-captcha.is-loading .ma-captcha-refresh {
	transform: rotate(180deg);
}

.ma-contact-field input.ma-captcha-input {
	max-width: 260px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 18px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.ma-contact-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}