/* 2FA code, one box per digit (resources/views/partials/mfa-code-field.blade.php, public/assets/js/mfa-code-input.js) */

.otp-field { position: relative; }

/* The real field stays in the form for submitting, but out of sight. */
.otp-field .otp-source {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.otp {
    display: grid;
    /* The empty middle column adds room after the third digit, like a printed code (123 456). */
    grid-template-columns: repeat(3, minmax(0, 52px)) 0 repeat(3, minmax(0, 52px));
    gap: 10px;
    justify-content: center;
}

.otp .otp-box:nth-child(4) { grid-column: 5; }

.otp .otp-box {
    width: 100%;
    height: 60px;
    padding: 0;
    border: 1px solid #d5dbe5;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    caret-color: #273eab;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.otp .otp-box:focus {
    border-color: #273eab;
    outline: none;
    box-shadow: 0 0 0 3px rgba(39, 62, 171, .15);
}

.otp .otp-box.is-filled { background: #f8faff; }

.otp.is-invalid .otp-box { border-color: #dc2626; }
.otp.is-invalid .otp-box:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }

.otp.is-shaking { animation: otp-shake .4s ease; }

@keyframes otp-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .otp.is-shaking { animation: none; }
}

@media (max-width: 420px) {
    .otp { gap: 6px; }
    .otp .otp-box { height: 52px; font-size: 1.35rem; border-radius: 10px; }
}