/**
 * OTP input shared by storefront and wp-login.php authentication flows.
 * The native input remains the single accessible form control while six
 * presentational cells provide the visual affordance.
 */

.oreneta-otp-container {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-block: var(--oreneta-semantic-spacing-xs, 0.5rem);
	cursor: text;
}

input.oreneta-otp-native-input,
body.login input.oreneta-otp-native-input,
.oreneta-2fa-challenge__form input.oreneta-otp-native-input {
	position: absolute !important;
	inset: 0 !important;
	z-index: 2 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	opacity: 0 !important;
	color: transparent !important;
	letter-spacing: 0 !important;
	cursor: text;
}

.oreneta-otp-boxes {
	display: grid;
	grid-template-columns: repeat(6, minmax(2.5rem, 3.25rem));
	gap: var(--oreneta-semantic-spacing-xs, 0.5rem);
	align-items: center;
}

.oreneta-otp-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1.08;
	border: var(--oreneta-component-text-input-border-width-default, 1px) solid var(--oreneta-component-text-input-color-regular-border-default, var(--oreneta-semantic-color-border-strong)) !important;
	border-radius: 0 !important;
	background: var(--oreneta-component-text-input-color-regular-container, var(--oreneta-semantic-color-background-canvas)) !important;
	box-shadow: none !important;
	font-family: var(--oreneta-core-font-family-mono, ui-monospace, monospace);
	font-size: var(--oreneta-core-font-size-xl, 1.25rem);
	font-weight: var(--oreneta-core-font-weight-semibold, 600);
	line-height: 1;
	color: var(--oreneta-component-text-input-color-regular-content-default, var(--oreneta-semantic-color-content-primary)) !important;
	user-select: none;
	transition: border-color var(--oreneta-semantic-motion-fast, 150ms) ease, box-shadow var(--oreneta-semantic-motion-fast, 150ms) ease;
}

.oreneta-otp-container:hover .oreneta-otp-cell {
	border-color: var(--oreneta-component-text-input-color-border-hover, var(--oreneta-semantic-color-border-strong)) !important;
}

.oreneta-otp-container.is-focused .oreneta-otp-cell.is-active {
	border-color: var(--oreneta-component-text-input-color-regular-border-active, var(--oreneta-semantic-color-action-primary)) !important;
	box-shadow: inset 0 0 0 1px var(--oreneta-component-text-input-color-regular-border-active, var(--oreneta-semantic-color-action-primary)) !important;
}

.oreneta-otp-cell.is-filled {
	border-color: var(--oreneta-semantic-color-content-primary) !important;
}

.oreneta-otp-native-input[aria-invalid="true"] + .oreneta-otp-boxes .oreneta-otp-cell {
	border-color: var(--oreneta-semantic-color-status-error) !important;
}

@media (max-width: 420px) {
	.oreneta-otp-boxes {
		grid-template-columns: repeat(6, minmax(2.125rem, 1fr));
		gap: var(--oreneta-semantic-spacing-3xs, 0.375rem);
	}
}