/* =========================================================================
   SENDPK.COM — two-step-popup.css (login.php + register.php)
   -------------------------------------------------------------------------
   OTP-specific styling for the SweetAlert2 popup in assets/js/two-step-popup.js
   (login.php's 2FA code) and assets/js/register-popup.js (register.php's
   signup PIN) — both are a themed "enter a 4-digit code" popup, so they
   share this file as-is instead of forking a near-identical copy.
   The chrome (gradient header, scrollable body, footer) reuses theme-popup.css's
   .td-* classes for visual consistency with the rest of the site's popups —
   only the OTP-specific pieces (icon badge, contact line, 4-digit box row,
   error text) are defined here, scoped under .otp-.
   ========================================================================= */

.otp-card { max-width: 440px; }

.otp-header-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 0 0 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.3rem;
  position: relative; z-index: 1;
}

.otp-body { padding-top: 22px; }

.otp-contact {
  margin: 0 0 20px; text-align: center;
  font-size: .86rem; line-height: 1.5; color: var(--wa-muted);
}
.otp-contact strong { color: var(--wa-ink); }

.otp-box-row { display: flex; justify-content: center; gap: .65rem; margin: 0 0 6px; }
.otp-box {
  width: 54px; height: 60px; border-radius: 14px;
  border: 1.5px solid var(--wa-line); background: #fbfdfc;
  font-family: var(--font-sans); font-size: 1.5rem; font-weight: 700; text-align: center;
  color: var(--wa-ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.otp-box:focus {
  outline: 0; border-color: var(--wa-action);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}

.otp-error {
  margin: 14px 0 0; text-align: center;
  color: #C0392B; font-size: .84rem; font-weight: 600;
}

.otp-verify-btn.otp-loading { opacity: .75; cursor: default; }
.otp-verify-btn.otp-loading:hover { transform: none; }

/* Replaces the browser's default blue focus outline (shown when JS focuses this
   button after the 4th digit is entered) with the same green ring used on the
   OTP boxes and other themed inputs, instead of an off-brand blue rectangle. */
.otp-verify-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .45), 0 8px 20px rgba(34, 197, 94, .35);
}

@media (max-width: 575.98px) {
  .otp-box { width: 46px; height: 54px; font-size: 1.3rem; }
  .otp-box-row { gap: .5rem; }
}