/**
 * QOtpInput - split-digit OTP / PIN input styles.
 * Paired with public/assets/js/components/q-otp-input.js.
 */

.qotp-input {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

.qotp-input .qotp-cell {
	width: 3rem;
	height: 3.5rem;
	padding: 0;
	text-align: center;
	font-size: 1.5rem;
	font-family: var(--bs-font-monospace, ui-monospace, monospace);
	font-weight: 500;
}

.qotp-input .qotp-cell:focus {
	box-shadow: 0 0 0 0.2rem rgba(81, 86, 190, 0.25);
}

/* Bootstrap's .form-control.is-invalid injects a red exclamation icon via
 * background-image, which crowds the digit in a 3rem-wide centered cell.
 * Suppress the icon and reset the padding it reserves; keep only the red border. */
.qotp-input .qotp-cell.is-invalid {
	border-color: var(--bs-danger, #dc3545);
	background-image: none;
	padding-right: 0;
}

/* Backup-code fallback input — single text field shown when user clicks
 * "Use a backup code instead". Sized to match the visual weight of the OTP grid. */
.qotp-backup-input {
	height: 3.5rem;
	font-size: 1.25rem;
	letter-spacing: 0.15em;
	font-family: var(--bs-font-monospace, ui-monospace, monospace);
	font-weight: 500;
}

.qotp-backup-input.is-invalid {
	border-color: var(--bs-danger, #dc3545);
	background-image: none;
	padding-right: 0.75rem;
}