/* ============================================
   SMJ Payment QR – Frontend Styles
   ============================================ */

/* Spinner */
.smjrifle-qr-payments-loader-inline {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: smj-spin 0.9s linear infinite;
  margin: 12px auto;
  display: none;
}

@keyframes smj-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Wrapper */
.smjrifle-qr-payments-inline-payment {
  margin: 15px 0;
}

/* QR image */
.smjrifle-qr-payments-qr-img {
  display: block;
}

/* Step 2 — hidden until Continue is clicked */
.smjrifle-qr-payments-step-2 {
  display: none;
}

/* Success message — hidden until upload succeeds */
.smjrifle-qr-payments-success-msg {
  display: none;
}

/* Upload zone */
.smjrifle-qr-payments-upload-zone {
  cursor: pointer;
  border-style: dashed !important;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.smjrifle-qr-payments-upload-zone:hover,
.smjrifle-qr-payments-upload-zone.is-dragover {
  border-color: #0d6efd !important;
  background-color: #f0f6ff;
}

/* Hidden file input */
.smjrifle-qr-payments-file-input {
  display: none;
}

/* Upload label — covers full zone for click target */
.smjrifle-qr-payments-upload-label {
  cursor: pointer;
  display: block;
  width: 100%;
}

/* Phone number canvas */
.smjrifle-qr-payments-tel-canvas {
  vertical-align: middle;
  max-width: 100%;
  cursor: pointer;
}