#merchant-otp-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.62);
}

#merchant-otp-modal.is-open { display: flex; }

.merchant-otp-dialog {
  position: relative;
  width: min(100%, 28rem);
  max-height: min(100%, 42rem);
  overflow-y: auto;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 1.35rem;
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.merchant-otp-close { position: absolute; top: .7rem; right: .8rem; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent; color: #64748b; cursor: pointer; font-size: 1.55rem; line-height: 1; }
.merchant-otp-close:hover, .merchant-otp-close:focus-visible { background: #f1f5f9; color: #0f172a; outline: none; }

.merchant-otp-dialog h2 { margin: 0; padding-right: 2rem; color: #111827; font-size: clamp(1.15rem, 4.7vw, 1.35rem); line-height: 1.25; font-weight: 750; }
.merchant-otp-dialog p { margin: .45rem 0 0; color: #4b5563; font-size: .88rem; line-height: 1.55; overflow-wrap: anywhere; }
.merchant-otp-dialog label { display: block; margin-top: 1.1rem; color: #374151; font-size: .8rem; line-height: 1.3; font-weight: 650; }
.merchant-otp-dialog input { width: 100%; box-sizing: border-box; margin-top: .55rem; border: 1px solid #cbd5e1; border-radius: .8rem; padding: .72rem .8rem; font-size: 1rem; line-height: 1.3; letter-spacing: .16em; text-align: center; }
.merchant-otp-dialog input::placeholder { color: #94a3b8; font-size: .9rem; letter-spacing: .08em; opacity: 1; }
.merchant-otp-dialog input:focus { border-color: #2563eb; outline: 2px solid #dbeafe; }
.merchant-otp-dialog input.is-invalid { border-color: #dc2626; outline-color: #fee2e2; }
.merchant-otp-error { min-height: 1.5rem; margin: .65rem 0 0; color: #dc2626 !important; font-size: .82rem !important; }
.merchant-otp-actions { display: grid; grid-template-columns: auto 1fr; gap: .6rem; margin-top: .9rem; }
.merchant-otp-actions button { min-width: 0; border: 0; border-radius: .75rem; cursor: pointer; padding: .72rem .8rem; font-size: .83rem; line-height: 1.25; font-weight: 650; }
.merchant-otp-submit { grid-column: 1 / -1; background: #2563eb; color: #fff; box-shadow: 0 5px 12px rgba(37, 99, 235, .18); }
.merchant-otp-submit:disabled, .merchant-otp-resend:disabled { cursor: not-allowed; opacity: .55; }
.merchant-otp-resend { background: #eff6ff; color: #2563eb; }

@media (max-width: 420px) {
  #merchant-otp-modal { align-items: center; padding: .6rem; }
  .merchant-otp-dialog { width: 100%; padding: 1.25rem; border-radius: 1.25rem; }
  .merchant-otp-dialog p { font-size: .84rem; }
  .merchant-otp-dialog input { font-size: .98rem; }
  .merchant-otp-dialog input::placeholder { font-size: .78rem; letter-spacing: .05em; }
  .merchant-otp-actions button { font-size: .78rem; }
}

@media (max-height: 600px) {
  #merchant-otp-modal { align-items: flex-start; padding-top: .5rem; padding-bottom: .5rem; }
  .merchant-otp-dialog { max-height: calc(100vh - 1rem); padding-top: 1rem; padding-bottom: 1rem; }
}

html[dir="rtl"] .merchant-otp-dialog input { letter-spacing: normal; }
html[dir="rtl"] .merchant-otp-close { right: auto; left: .8rem; }