/**
 * booking-otp.css — the one piece of the email verification modal that cannot
 * be expressed with Tailwind utilities: the "wrong code" shake keyframe.
 * Everything else in the modal is styled with Tailwind classes.
 */

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

/* Applied to the digit row for ~400ms when a submitted code is rejected */
.otp-shake {
    animation: otp-shake 0.4s ease-in-out;
}

/* Visitors who prefer reduced motion get the error colour without the movement */
@media (prefers-reduced-motion: reduce) {
    .otp-shake {
        animation: none;
    }
}