/* ===== OTP MODALS (COMPACT + MODERN LIKE CONFIRMATION MODAL) ===== */

#otpEmailModal,
#otpVerifyModal {
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* FIX WIDTH (same as confirmation modal) */
#otpEmailModal .modal-dialog,
#otpVerifyModal .modal-dialog {
  max-width: 420px;
  margin: auto;
}

/* Modal box */
#otpEmailModal .modal-content,
#otpVerifyModal .modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  overflow: hidden;
  text-align: center;
}

/* Header */
#otpEmailModal .modal-header,
#otpVerifyModal .modal-header {
  border-bottom: none;
  justify-content: center;
  position: relative;
  padding: 16px;
}

#otpEmailModal .modal-title,
#otpVerifyModal .modal-title {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
}

/* Close button (if added later) */
#otpEmailModal .modal-header button,
#otpVerifyModal .modal-header button {
  position: absolute;
  right: 15px;
  top: 12px;
}

/* Body (compact spacing) */
#otpEmailModal .modal-body,
#otpVerifyModal .modal-body {
  padding: 10px 20px 12px;
  text-align: left;
}

/* Labels */
#otpEmailModal label,
#otpVerifyModal label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  display: block;
}

/* Input fields */
#otpEmailModal .form-control,
#otpVerifyModal .form-control {
  width: 100%;
  padding: 13px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 15px;
  outline: none;
  box-shadow: none;
}

/* Input focus */
#otpEmailModal .form-control:focus,
#otpVerifyModal .form-control:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.15);
}

/* Error text */
#otpEmailModal .text-danger,
#otpVerifyModal .text-danger {
  font-size: 12px;
  margin-top: 4px;
}

/* Status text */
#otpVerifyModal #otp-status {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}

/* Footer (tight spacing) */
#otpEmailModal .modal-footer,
#otpVerifyModal .modal-footer {
  border-top: none;
  padding: 8px 16px 14px;
  display: flex;
  gap: 10px;
}

/* Buttons */
#otpEmailModal .btn,
#otpVerifyModal .btn {
  flex: 1;
  border-radius: 8px;
  padding: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* Send OTP button */
#otpEmailModal .btn-primary {
  background: #f97316;
  color: #fff;
}
#otpEmailModal .btn-primary:hover {
  background: #ea580c;
}

/* Verify button */
#otpVerifyModal .btn-success {
  background: #f97316;
  color: #fff;
}
#otpVerifyModal .btn-success:hover {
  background: #ea580c;
}

/* Close button */
#otpEmailModal .btn-default,
#otpVerifyModal .btn-default {
  background: #f3f4f6;
  color: #374151;
}

/* Resend button */
#otpVerifyModal .btn-link {
  background: none;
  border: none;
  color: #f97316;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

#otpVerifyModal .btn-link:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

/* Countdown */
#otp-countdown {
  margin-left: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Remove black click outline */
#otpEmailModal .btn:focus,
#otpVerifyModal .btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.3);
}
/* Center + bold OTP input */
#otpVerifyModal #otp-code {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}
/* Responsive */
@media (max-width: 480px) {
  #otpEmailModal .modal-dialog,
  #otpVerifyModal .modal-dialog {
    margin: 10px;
    max-width: 100%;
  }
}
/* Common style for both buttons */
.btn-block {
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
}

/* Login button (orange - already from bootstrap warning, but override if needed) */
.btn-warning {
  background: #f97316;
  border: none;
  color: #fff;
}

/* OTP button (match exactly, just blue color) */
#login-otp-btn {
  background: #2f8de4;   /* close to your screenshot */
  color: #fff;
  border: none;
}

/* Hover states */
.btn-warning:hover {
  background: #ea580c;
}

#login-otp-btn:hover {
  background: #1e7ed8;
}

/* ===== OTP MODALS (FINAL CLEAN UI) ===== */

#otpEmailModal,
#otpVerifyModal {
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* Modal width (compact like confirmation modal) */
#otpEmailModal .modal-dialog,
#otpVerifyModal .modal-dialog {
  max-width: 420px;
  margin: auto;
}

/* Modal box */
#otpEmailModal .modal-content,
#otpVerifyModal .modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  overflow: hidden;
  text-align: center;
}

/* Header */
#otpEmailModal .modal-header,
#otpVerifyModal .modal-header {
  border-bottom: none;
  justify-content: center;
  position: relative;
  padding: 16px;
}

#otpEmailModal .modal-title,
#otpVerifyModal .modal-title {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
}

/* Body */
#otpEmailModal .modal-body,
#otpVerifyModal .modal-body {
  padding: 10px 20px 12px;
  text-align: left;
}

/* Labels */
#otpEmailModal label,
#otpVerifyModal label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  display: block;
}

/* Inputs */
#otpEmailModal .form-control,
#otpVerifyModal .form-control {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  outline: none;
  box-shadow: none;
}

/* Input focus */
#otpEmailModal .form-control:focus,
#otpVerifyModal .form-control:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.15);
}

/* OTP input special (center + bold) */
#otpVerifyModal #otp-code {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 4px;
}

/* Error text */
#otpEmailModal .text-danger,
#otpVerifyModal .text-danger {
  font-size: 12px;
  margin-top: 4px;
}

/* Status text */
#otpVerifyModal #otp-status {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}

/* Footer */
#otpEmailModal .modal-footer,
#otpVerifyModal .modal-footer {
  border-top: none;
  padding: 8px 16px 14px;
  display: flex;
  gap: 10px;
}

/* Buttons */
#otpEmailModal .btn,
#otpVerifyModal .btn {
  flex: 1;
  border-radius: 8px;
  padding: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* Send OTP button */
#otpEmailModal .btn-primary {
  background: #f97316;
  color: #fff;
}
#otpEmailModal .btn-primary:hover {
  background: #ea580c;
}

/* Verify button */
#otpVerifyModal .btn-success {
  background: #f97316;
  color: #fff;
}
#otpVerifyModal .btn-success:hover {
  background: #ea580c;
}

/* Close button */
#otpEmailModal .btn-default,
#otpVerifyModal .btn-default {
  background: #f3f4f6;
  color: #374151;
}

/* Resend */
#otpVerifyModal .btn-link {
  background: none;
  border: none;
  color: #f97316;
  font-weight: 600;
  padding: 0;
}

#otpVerifyModal .btn-link:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

/* Countdown */
#otp-countdown {
  margin-left: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Remove black outline */
#otpEmailModal .btn:focus,
#otpVerifyModal .btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.3);
}

/* Mobile */
@media (max-width: 480px) {
  #otpEmailModal .modal-dialog,
  #otpVerifyModal .modal-dialog {
    margin: 10px;
    max-width: 100%;
  }
}