/**
 * MPOS Auth Pages - Professional Design
 * Login, Registration, Forgot Password, Reset Password
 */

/* Theme variables loaded from theme.css - use professional palette */

/* Login page body background */
body.auth-login-body {
  background: linear-gradient(135deg, #0f4c82 0%, #1e6bb8 50%, #38bdf8 100%) !important;
  min-height: 100vh;
}

/* ===== AUTH PAGES CONTAINER ===== */
.container-login100 {
  background: linear-gradient(135deg, #0f4c82 0%, #1e6bb8 50%, #38bdf8 100%) !important;
  background-attachment: fixed !important;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 24px 16px 40px !important;
  min-height: 100vh !important;
}

.container-login100::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 50%);
  pointer-events: none;
}

/* ===== LOGO HEADER - Above the card ===== */
.auth-page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 0 16px;
  position: relative;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.auth-page-header .auth-logo-img {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 12px;
  flex-shrink: 0;
  display: block;
}

.auth-page-header .auth-app-name {
  font-family: 'Plus Jakarta Sans', Ubuntu-Bold, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  line-height: 1.3;
  word-wrap: break-word;
  max-width: 100%;
}

/* Legacy auth-logo-block (token expired etc) */
.auth-logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.auth-logo-block img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 8px;
}

.auth-logo-block .auth-app-name {
  font-size: 16px !important;
  color: #1e293b !important;
  text-shadow: none !important;
}

/* ===== CARD / FORM CONTAINER ===== */
.wrap-login100 {
  max-width: 420px !important;
  width: 100% !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25) !important;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.wrap-login100:hover {
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.3) !important;
}

/* ===== FORM TITLE ===== */
.login100-form-title {
  font-family: 'Plus Jakarta Sans', Ubuntu-Bold, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  letter-spacing: -0.02em;
  margin-bottom: 4px !important;
}

/* ===== FORM CONTAINER ===== */
.login100-form {
  padding: 32px 28px !important;
}

/* ===== INPUT FIELDS ===== */
.wrap-input100 {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  margin-bottom: 14px !important;
}

.wrap-input100:hover {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}

.input100 {
  font-family: 'Plus Jakarta Sans', Ubuntu-Regular, sans-serif !important;
  font-size: 15px !important;
  color: #1e293b !important;
  height: 52px !important;
  padding: 0 18px 0 18px !important;
}

.input100::placeholder {
  color: #94a3b8 !important;
}

.focus-input100 {
  border: 2px solid #0f4c82 !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 3px rgba(15, 76, 130, 0.15) !important;
}

.input100:focus + .focus-input100 {
  visibility: visible !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Password toggle */
.wrap-input100 .fa-eye,
.wrap-input100 .fa-eye-slash,
.pwd-wrap .pwd-toggle,
.pwd-wrap .fa-eye,
.pwd-wrap .fa-eye-slash {
  color: #64748b !important;
}

.wrap-input100 .fa-eye:hover,
.wrap-input100 .fa-eye-slash:hover,
.pwd-wrap .pwd-toggle:hover {
  color: #0f4c82 !important;
}

.pwd-wrap .pwd-toggle {
  background: none !important;
  border: none !important;
  padding: 8px !important;
  cursor: pointer !important;
}

/* ===== LINKS ===== */
.txt1 {
  font-family: 'Plus Jakarta Sans', Ubuntu-Regular, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f4c82 !important;
}

.txt1:hover {
  color: #0d3d6b !important;
}

/* ===== BUTTON ===== */
.login100-form-btn {
  font-family: 'Plus Jakarta Sans', Ubuntu-Bold, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  height: 52px !important;
  background: linear-gradient(135deg, #0f4c82 0%, #0d3d6b 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px 0 rgba(15, 76, 130, 0.35) !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.login100-form-btn:hover {
  background: linear-gradient(135deg, #0d3d6b 0%, #0a2d4d 100%) !important;
  box-shadow: 0 6px 16px 0 rgba(15, 76, 130, 0.4) !important;
  transform: translateY(-1px);
}

/* ===== MESSAGE BOXES ===== */
.message-box {
  border-radius: 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.error-msg {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}

.success-msg {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #16a34a !important;
}

/* ===== REGISTRATION PAGE ===== */
.auth-reg-page-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 12px 16px 20px;
  width: 100%;
}

body.auth-reg-body .auth-page-header,
body:has(.auth-reg-page-wrap) .auth-page-header {
  margin-bottom: 10px;
}

body.auth-reg-body .auth-page-header .auth-logo-img,
body:has(.auth-reg-page-wrap) .auth-page-header .auth-logo-img {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  margin-bottom: 6px;
}

body.auth-reg-body .auth-page-header .auth-app-name,
body:has(.auth-reg-page-wrap) .auth-page-header .auth-app-name {
  color: #ffffff !important;
}

body .wrapper {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25) !important;
  padding: 20px 24px !important;
  max-width: 480px !important;
  width: 100% !important;
}

/* Override style.css form margin */
body .wrapper form {
  margin-top: 12px !important;
}

/* Registration - compact 2/3-column layout on desktop */
@media (min-width: 640px) {
  body .wrapper {
    max-width: 720px !important;
    padding: 24px 32px !important;
  }

  body .wrapper form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    align-items: start;
    margin-top: 10px !important;
  }

  /* Step 2 (Branch) - 6 fields: use 3 columns to fit 2 rows */
  body .wrapper.reg-step-2 form {
    grid-template-columns: 1fr 1fr 1fr;
  }

  body .wrapper.reg-step-3 .reg-email-otp-row input[type="email"] {
    min-width: 0;
  }

  /* Full-width elements */
  body .wrapper .input-box:has(input[type="file"]),
  body .wrapper .input-box.reg-email-otp-row,
  body .wrapper .input-box:has(#sendOtpBtn),
  body .wrapper .input-box:has(#otp_code),
  body .wrapper .policy,
  body .wrapper .text,
  body .wrapper .input-box.button,
  body .wrapper .file_container,
  body .wrapper .divider {
    grid-column: 1 / -1;
  }

  body .wrapper h2,
  body .wrapper h3 {
    grid-column: 1 / -1;
  }
}

/* Registration step progress */
body .wrapper .reg-step-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 8px;
}
body .wrapper .reg-step-progress .step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e8f0;
  transition: background 0.2s;
}
body .wrapper .reg-step-progress .step-dot.active {
  background: #0f4c82;
  box-shadow: 0 0 0 3px rgba(15, 76, 130, 0.3);
}
body .wrapper .reg-step-progress .step-dot.done {
  background: #10b981;
}

body .wrapper h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 2px;
}

body .wrapper h2::before {
  background: linear-gradient(90deg, #0f4c82, #0d3d6b) !important;
  height: 3px !important;
  border-radius: 2px !important;
}

body .wrapper .input-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin: 0 !important;
  position: relative !important;
}

body .wrapper .input-box.reg-req::after {
  content: '*';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
  pointer-events: none;
}

body .wrapper .input-box.reg-email-otp-row.reg-req::after {
  right: 130px;
}

body .wrapper .file_container.reg-req label::after {
  content: ' *';
  color: #94a3b8;
}

body .wrapper .input-box.reg-password-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 14px 8px !important;
  height: auto !important;
  min-height: auto !important;
}

body .wrapper .input-box.reg-password-box input {
  flex: none;
}

body .wrapper .input-box .reg-password-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
  margin-bottom: 0;
  display: block !important;
  visibility: visible !important;
}

body .wrapper .input-box:not(:has(input[type="file"])):not(.button) {
  min-height: 46px;
}

/* File input box: allow height to grow so <small> hint text is visible */
body .wrapper .input-box:has(input[type="file"]) {
  height: auto !important;
  min-height: auto !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body .wrapper .input-box input:not([type="file"]) {
  height: 44px !important;
  padding: 0 14px !important;
}

body .wrapper .input-box:hover {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}

body .wrapper .input-box input {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  color: #1e293b !important;
  border: none !important;
  border-radius: 10px !important;
}

body .wrapper .input-box.button {
  margin-top: 4px !important;
  position: relative;
}

body .wrapper .input-box.button input,
body .wrapper .input-box.button button.submit-btn {
  width: 100% !important;
  padding: 0 20px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #0f4c82 0%, #0d3d6b 100%) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px 0 rgba(59, 130, 246, 0.35) !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body .wrapper .input-box.button input:hover,
body .wrapper .input-box.button button.submit-btn:hover {
  background: linear-gradient(135deg, #0d3d6b 0%, #0a2d4d 100%) !important;
  transform: translateY(-1px);
}

body .wrapper .input-box.button.loading input.submit-btn,
body .wrapper .input-box.button.loading button.submit-btn {
  color: transparent !important;
  pointer-events: none;
}

body .wrapper .input-box.button button.submit-btn span {
  pointer-events: none;
}

body .wrapper .input-box.button.loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: reg-btn-spin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes reg-btn-spin {
  to { transform: rotate(360deg); }
}

body .wrapper .text h3 a {
  color: #0f4c82 !important;
  font-weight: 500 !important;
}

/* Email + OTP row (Step 3) */
body .wrapper .reg-email-otp-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
  padding: 6px 12px !important;
  min-height: auto !important;
}
body .wrapper .reg-email-otp-row input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 50px !important;
  padding: 0 12px !important;
  border: none !important;
  background: transparent !important;
}
body .wrapper .reg-email-otp-row input.reg-email-locked {
  background: #f1f5f9 !important;
  cursor: not-allowed;
}
body .wrapper .reg-email-otp-row #sendOtpBtn {
  flex-shrink: 0;
  height: 50px;
  padding: 0 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  font-size: 13px;
  border-radius: 8px;
}

#sendOtpBtn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px 0 rgba(245, 158, 11, 0.35) !important;
  font-weight: 600 !important;
}

#sendOtpBtn:hover:not(:disabled) {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  transform: translateY(-1px);
}

#sendOtpBtn:disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}

body .wrapper .file_container {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 6px 0;
}

body .wrapper .file_container small {
  font-size: 12px;
  color: #64748b;
  display: block;
  margin-top: 4px;
}

/* File preview */
body .wrapper .file-preview {
  margin-top: 8px;
  min-height: 0;
}

body .wrapper .file-preview img {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  display: block;
}

body .wrapper .file-preview-pdf {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
}

body .wrapper .file-preview-pdf .pdf-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: #dc2626;
}

body .wrapper .input-box .file-preview {
  margin-top: 8px;
}

body .wrapper .divider {
  margin: 4px 0;
  height: 1px;
  min-height: 1px;
}

body .wrapper h3 {
  margin: 0 0 6px 0;
  font-size: 14px;
}

body .wrapper .text {
  margin: 4px 0;
}

body .wrapper .text h3 {
  margin: 0;
}

body .wrapper .policy {
  margin: 4px 0;
}

body .wrapper .input-box small {
  font-size: 12px;
  color: #64748b;
  display: block;
  margin-top: 4px;
}

body .wrapper h1 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #16a34a !important;
  margin: 8px 0 4px 0;
}

/* Registration completion page */
body .wrapper.reg-step-complete {
  text-align: center;
  padding: 32px 28px 36px !important;
}

body .wrapper .reg-success-msg {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}

body .wrapper .reg-complete-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  line-height: 56px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

body .wrapper .reg-complete-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
}

body .wrapper .reg-complete-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

body .wrapper .reg-id-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  text-align: center;
}

body .wrapper .reg-id-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

body .wrapper .reg-id-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #dc2626;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

body .wrapper .reg-id-hint {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

body .wrapper .reg-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 24px;
  text-align: left;
}

body .wrapper .reg-note-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.4;
}

body .wrapper .reg-note-content {
  font-size: 13px;
  color: #92400e;
  line-height: 1.5;
}

body .wrapper .reg-note-content strong {
  color: #78350f;
}

body .wrapper .reg-login-btn {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, #0f4c82 0%, #0d3d6b 100%);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 76, 130, 0.35);
  transition: all 0.2s ease;
}

body .wrapper .reg-login-btn:hover {
  background: linear-gradient(135deg, #0d3d6b 0%, #0a2d4d 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 76, 130, 0.4);
  color: #fff !important;
}

body .wrapper .policy input[type="checkbox"] {
  accent-color: #0f4c82;
}

/* Registration body background */
body.auth-reg-body,
body:has(.auth-reg-page-wrap) {
  background: linear-gradient(135deg, #0f4c82 0%, #1e6bb8 50%, #38bdf8 100%) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Token expired page */
body.auth-page-expired {
  background: linear-gradient(135deg, #0f4c82 0%, #1e6bb8 50%, #38bdf8 100%) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.expired-container {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25) !important;
  max-width: 400px !important;
  width: 100% !important;
  padding: 32px 28px !important;
  text-align: center !important;
}

.expired-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #dc2626 !important;
  margin-bottom: 10px !important;
}

.expired-text {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

.btn-back {
  display: inline-block !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #0f4c82 0%, #0d3d6b 100%) !important;
  color: #fff !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: all 0.2s ease !important;
}

.btn-back:hover {
  transform: translateY(-1px);
  color: #fff !important;
  background: linear-gradient(135deg, #0d3d6b 0%, #0a2d4d 100%) !important;
}

.g-recaptcha {
  margin: 14px 0;
}

/* ===== RESPONSIVE - Tablet ===== */
@media (max-width: 768px) {
  .auth-page-header {
    margin-bottom: 16px;
    padding: 0 12px;
  }

  .auth-page-header .auth-logo-img {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    margin-bottom: 10px;
  }

  .auth-page-header .auth-app-name {
    font-size: 17px !important;
  }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
  .auth-page-header {
    margin-bottom: 12px;
  }

  .auth-page-header .auth-logo-img {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    margin-bottom: 6px;
  }

  .auth-page-header .auth-app-name {
    font-size: 15px !important;
  }
}

/* ===== RESPONSIVE - Mobile ===== */
@media (max-width: 480px) {
  .container-login100 {
    padding: 16px 12px 32px !important;
  }

  .auth-page-header {
    margin-bottom: 14px;
    padding: 0 8px;
  }

  .auth-page-header .auth-logo-img {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    margin-bottom: 8px;
  }

  .auth-page-header .auth-app-name {
    font-size: 16px !important;
  }

  .wrap-login100 {
    max-width: 100% !important;
    border-radius: 14px !important;
  }

  .login100-form {
    padding: 24px 20px !important;
  }

  .login100-form-title {
    font-size: 20px !important;
  }

  .input100 {
    font-size: 16px !important;
    height: 50px !important;
    padding: 0 16px !important;
  }

  .wrap-input100 {
    margin-bottom: 12px !important;
  }

  .login100-form-btn {
    height: 50px !important;
    font-size: 14px !important;
  }

  .auth-reg-page-wrap {
    padding: 16px 12px 32px;
  }

  body .wrapper {
    padding: 24px 20px !important;
    border-radius: 14px !important;
    max-width: 100% !important;
  }

  body .wrapper form {
    display: block;
  }

  body .wrapper.reg-step-complete {
    padding: 24px 20px 28px !important;
  }

  body .wrapper .reg-id-value {
    font-size: 24px;
  }

  body .wrapper .reg-login-btn {
    padding: 12px 28px;
    font-size: 14px;
  }

  body .wrapper .input-box {
    margin: 8px 0 !important;
  }

  body .wrapper .input-box:not(:has(input[type="file"])):not(.button) {
    min-height: 48px;
  }

  body .wrapper .input-box input:not([type="file"]) {
    height: 46px !important;
  }

  /* Step 3: OTP row - stack on small screens if needed */
  body .wrapper .reg-email-otp-row {
    flex-wrap: wrap;
  }
  body .wrapper .reg-email-otp-row input[type="email"] {
    flex: 1 1 140px;
  }
  body .wrapper .reg-email-otp-row #sendOtpBtn {
    min-width: 100px;
  }

  .expired-container {
    padding: 24px 20px !important;
    border-radius: 14px !important;
  }
}

/* Tablet and up - ensure card doesn't get too wide */
@media (min-width: 481px) {
  .wrap-login100 {
    margin: 0 auto;
  }
}