/* iPhone-Style Verification Code Input */
.verification-code-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 25px 0;
	padding: 0 20px;
}

.verification-digit {
	width: 50px !important;
	height: 60px !important;
	text-align: center !important;
	font-size: 28px !important;
	font-weight: 600 !important;
	border: 2px solid #e1e5e9 !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
	outline: none !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	-webkit-appearance: none !important;
	-moz-appearance: textfield !important;
}

	.verification-digit:focus {
		border-color: #007aff !important;
		box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important;
		background: #ffffff !important;
		transform: scale(1.05) !important;
	}

	.verification-digit.filled {
		background: #f8fafc !important;
		border-color: #007aff !important;
		color: #1d4ed8 !important;
	}

	.verification-digit.error {
		border-color: #ef4444 !important;
		background: #fef2f2 !important;
		animation: shake 0.5s ease-in-out !important;
		color: #dc2626 !important;
	}

	.verification-digit.locked {
		background: #f1f5f9 !important;
		border-color: #cbd5e1 !important;
		color: #94a3b8 !important;
		cursor: not-allowed !important;
		transform: none !important;
	}

	.verification-digit::-webkit-outer-spin-button,
	.verification-digit::-webkit-inner-spin-button {
		-webkit-appearance: none !important;
		margin: 0 !important;
	}

/* Animation for errors */
@keyframes shake {
	0%, 100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-5px);
	}

	75% {
		transform: translateX(5px);
	}
}

/* Container states */
.verification-container-locked {
	opacity: 0.6 !important;
	pointer-events: none !important;
}

.verification-container-error .verification-digit {
	border-color: #ef4444 !important;
}

/* Responsive design */
@media (max-width: 768px) {
	.verification-code-container {
		gap: 8px;
		padding: 0 10px;
	}

	.verification-digit {
		width: 40px !important;
		height: 50px !important;
		font-size: 24px !important;
	}
}

/* Retry and lockout info styling */
.retry-info {
	text-align: center;
	color: #f59e0b;
	font-weight: 600;
	margin-top: 15px;
	padding: 8px 16px;
	background: #fef3c7;
	border-radius: 6px;
	border: 1px solid #f59e0b;
}

.lockout-info {
	text-align: center;
	color: #dc2626;
	font-weight: 600;
	margin-top: 15px;
	padding: 12px 16px;
	background: #fef2f2;
	border-radius: 6px;
	border: 1px solid #fecaca;
}