/* Custom CSS - use this file for overrides. Loaded last so it has high priority. */

/* OTP inputs should behave left-to-right so digits map naturally (leftmost = first digit)
   even on RTL pages. We force direction LTR on the container. */
.otp-container{display:flex;gap:10px;justify-content:center;direction:ltr}
.otp-input{width:56px;height:56px;border-radius:8px;border:1px solid var(--border);text-align:center;font-size:20px;padding:8px;background:var(--bg);box-shadow:0 6px 18px rgba(63,81,181,0.06);direction:ltr}
.otp-input:focus{outline:2px solid rgba(63,81,181,0.12);box-shadow:0 8px 20px rgba(63,81,181,0.10)}

/* Admin no-otp-flash helper (defensive)
   Keep the main steps visible; hide only the code-entry panel for admins. */
.no-otp-flash #service-steps #step-code{visibility:hidden !important;pointer-events:none}

@media (max-width:600px){ .otp-input{width:40px;height:48px;font-size:18px} }