/**
 * BotShield math captcha — frontend & admin preview.
 */

.botshield-math-captcha__card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	overflow: hidden;
	max-width: 100%;
}

.botshield-math-captcha__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
	border-bottom: 1px solid #e2e8f0;
	text-align: start;
}

.botshield-math-captcha__shield {
	color: #2563eb;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.botshield-math-captcha__badge {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #0f172a;
	letter-spacing: 0.01em;
	text-align: start;
}

.botshield-math-captcha__grid {
	display: grid;
	grid-template-rows: repeat(var(--botshield-rows-desktop, 1), auto);
	grid-template-columns: repeat(var(--botshield-cols-desktop, 2), 1fr);
	gap: 12px;
	align-items: center;
	padding: 16px;
	max-width: 100%;
}

.botshield-math-captcha__image-wrap {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

body.rtl .botshield-math-captcha__image-wrap,
[dir="rtl"] .botshield-math-captcha__image-wrap {
	justify-content: flex-end;
}

.botshield-math-captcha__image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.botshield-math-captcha__input {
	width: 100%;
	max-width: 140px;
	padding: 10px 14px;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 500;
	color: #0f172a;
	background: #f8fafc;
	box-sizing: border-box;
	text-align: start;
	direction: ltr;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.botshield-math-captcha__input:hover {
	border-color: #93c5fd;
	background: #fff;
}

.botshield-math-captcha__input:focus {
	outline: none;
	border-color: #2563eb;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.botshield-math-captcha__input::placeholder {
	color: #94a3b8;
	font-weight: 400;
}

body.rtl .botshield-math-captcha__grid,
[dir="rtl"] .botshield-math-captcha__grid {
	direction: rtl;
}

@media (max-width: 600px) {
	.botshield-math-captcha__grid {
		grid-template-rows: repeat(var(--botshield-rows-mobile, 2), auto);
		grid-template-columns: repeat(var(--botshield-cols-mobile, 1), 1fr);
	}

	.botshield-math-captcha__input {
		max-width: 100%;
	}
}