/* ============================================================
   Nexsky OTP component — 6-box digit input
   Used by: login, checkout verify widget, dashboard verify widget
   All classes prefixed .nxa-otp- to prevent leakage.
   ============================================================ */

.nxa-otp {
  display: flex;
  flex-direction: column;
  gap: 14px;
  direction: rtl;
}

.nxa-otp-digits {
  display: flex;
  flex-direction: row;   /* OTP digits always flow LTR, regardless of page direction */
  justify-content: center;
  gap: 8px;
  direction: ltr;
}

.nxa-otp-box {
  width: 52px;
  height: 60px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Vazirmatn', 'Tahoma', sans-serif;
  letter-spacing: 0;
  border-radius: 14px;
  border: 1.5px solid var(--border-light, rgba(255,255,255,0.16));
  background: var(--surface, rgba(255,255,255,0.05));
  color: var(--text, #eef2ff);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  caret-color: var(--primary, #00f0ff);
  padding: 0;
}
body.light-mode .nxa-otp-box {
  background: #ffffff;
  border-color: rgba(15,23,42,0.14);
  color: #0b1220;
}

.nxa-otp-box:focus {
  border-color: var(--primary, #00f0ff);
  box-shadow: 0 0 0 3px rgba(0,240,255,0.14);
}
.nxa-otp-box.is-filled {
  border-color: var(--primary-light, #60f3ff);
}

.nxa-otp-box:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---- states: error / success (whole component) ---- */
.nxa-otp.is-error .nxa-otp-box {
  border-color: rgba(255,80,100,0.65);
  background: rgba(255,80,100,0.06);
}
.nxa-otp.is-error .nxa-otp-box:focus {
  box-shadow: 0 0 0 3px rgba(255,80,100,0.14);
}
.nxa-otp.is-success .nxa-otp-box {
  border-color: rgba(16,185,129,0.65);
  background: rgba(16,185,129,0.08);
  color: #10b981;
}
body.light-mode .nxa-otp.is-success .nxa-otp-box {
  color: #059669;
  background: rgba(16,185,129,0.06);
}

/* ---- shake on error ---- */
@keyframes nxa-otp-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.nxa-otp.otp-shake .nxa-otp-digits {
  animation: nxa-otp-shake 0.4s ease;
}

/* ---- status line ---- */
.nxa-otp-status {
  min-height: 1.3em;
  text-align: center;
  font-size: 0.85rem;
  font-family: 'Vazirmatn', 'Tahoma', sans-serif;
  color: var(--text-muted, rgba(255,255,255,0.55));
}
.nxa-otp-status--error {
  color: #fca5a5;
  font-weight: 600;
}
.nxa-otp-status--success {
  color: #10b981;
  font-weight: 700;
}

/* ---- resend / edit row ---- */
.nxa-otp-resend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-family: 'Vazirmatn', 'Tahoma', sans-serif;
}
.nxa-otp-edit {
  background: none;
  border: none;
  color: var(--text-secondary, rgba(255,255,255,0.72));
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nxa-otp-edit:hover {
  color: var(--primary-light, #60f3ff);
}

.nxa-otp-resend {
  background: none;
  border: none;
  color: var(--primary-light, #60f3ff);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  font-variant-numeric: tabular-nums;
}
body.light-mode .nxa-otp-resend { color: #0891b2; }
.nxa-otp-resend:disabled {
  color: var(--text-muted, rgba(255,255,255,0.45));
  cursor: not-allowed;
}
.nxa-otp-resend:not(:disabled):hover { text-decoration: underline; }

/* ---- mobile ---- */
@media (max-width: 480px) {
  .nxa-otp-digits { gap: 6px; }
  .nxa-otp-box {
    width: 44px;
    height: 52px;
    font-size: 1.25rem;
    border-radius: 12px;
  }
  .nxa-otp-resend-row { font-size: 0.8rem; }
}

/* focus-visible support for keyboard navigation */
.nxa-otp-box:focus-visible {
  outline: none;
  border-color: var(--primary, #00f0ff);
  box-shadow: 0 0 0 3px rgba(0,240,255,0.18);
}