/* MilMit OTP presentation bridge.
 * Authentication/verification logic remains in MilMit Center. The theme only
 * controls visual direction, focus affordances and presentation of OTP boxes.
 */
.mm-otp-ui,
[data-mm-otp],
[data-milmit-otp],
.milmit-otp,
.milmit-otp-fields,
.auth-otp-fields,
.otp-inputs {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(7px,2vw,12px);
  max-width:100%;
}

html[dir="rtl"] .mm-otp-ui,
html[dir="rtl"] [data-mm-otp],
html[dir="rtl"] [data-milmit-otp],
html[dir="rtl"] .milmit-otp,
html[dir="rtl"] .milmit-otp-fields,
html[dir="rtl"] .auth-otp-fields,
html[dir="rtl"] .otp-inputs {
  direction:rtl;
}

html:not([dir="rtl"]) .mm-otp-ui,
html:not([dir="rtl"]) [data-mm-otp],
html:not([dir="rtl"]) [data-milmit-otp],
html:not([dir="rtl"]) .milmit-otp,
html:not([dir="rtl"]) .milmit-otp-fields,
html:not([dir="rtl"]) .auth-otp-fields,
html:not([dir="rtl"]) .otp-inputs {
  direction:ltr;
}

.mm-otp-ui input[data-mm-otp-box],
[data-mm-otp] input[data-mm-otp-box],
[data-milmit-otp] input[data-mm-otp-box],
.milmit-otp input[data-mm-otp-box],
.milmit-otp-fields input[data-mm-otp-box],
.auth-otp-fields input[data-mm-otp-box],
.otp-inputs input[data-mm-otp-box] {
  flex:0 1 52px;
  width:clamp(42px,11vw,52px);
  min-width:0;
  height:54px;
  margin:0;
  padding:0;
  border-radius:14px;
  text-align:center;
  direction:ltr;
  unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:1.25rem;
  font-weight:850;
  letter-spacing:0;
  caret-color:var(--mm-blue);
}

.mm-otp-ui input[data-mm-otp-box]:focus,
[data-mm-otp] input[data-mm-otp-box]:focus,
[data-milmit-otp] input[data-mm-otp-box]:focus,
.milmit-otp input[data-mm-otp-box]:focus,
.milmit-otp-fields input[data-mm-otp-box]:focus,
.auth-otp-fields input[data-mm-otp-box]:focus,
.otp-inputs input[data-mm-otp-box]:focus {
  position:relative;
  z-index:1;
}

/* Some legacy MilMit auth screens expose a single OTP input instead of boxes. */
.auth-otp-input,
input[autocomplete="one-time-code"].auth-otp-input {
  text-align:center;
  direction:ltr;
  unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;
}

@media (max-width:390px) {
  .mm-otp-ui,
  [data-mm-otp],
  [data-milmit-otp],
  .milmit-otp,
  .milmit-otp-fields,
  .auth-otp-fields,
  .otp-inputs { gap:6px; }

  .mm-otp-ui input[data-mm-otp-box],
  [data-mm-otp] input[data-mm-otp-box],
  [data-milmit-otp] input[data-mm-otp-box],
  .milmit-otp input[data-mm-otp-box],
  .milmit-otp-fields input[data-mm-otp-box],
  .auth-otp-fields input[data-mm-otp-box],
  .otp-inputs input[data-mm-otp-box] {
    width:min(13vw,46px);
    height:50px;
    border-radius:12px;
    font-size:1.1rem;
  }
}