/**
 * Bharat Pe Frontend Styles
 */

/* Payment Instructions */
.bharat-pe-payment-instructions {
  background: #f9f9f9;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 20px;
  margin: 20px 0;
}

.bharat-pe-payment-instructions h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
}

.bharat-pe-qr-container {
  text-align: center;
  margin-bottom: 20px;
}

.bharat-pe-qr-code {
  max-width: 300px;
  height: auto;
  border: 1px solid #ddd;
  padding: 10px;
  background: #fff;
}

.bharat-pe-payment-details {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
}

.bharat-pe-instructions {
  margin-bottom: 20px;
}

/* UTR Verification Form */
.bharat-pe-utr-verification {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 20px;
}

.bharat-pe-utr-verification h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
}

.bharat-pe-form-row {
  margin-bottom: 15px;
}

.bharat-pe-form-row label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.bharat-pe-form-row input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.bharat-pe-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  vertical-align: middle;
  visibility: hidden;
}

.bharat-pe-spinner.is-active {
  visibility: visible;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: bharat-pe-spin 1s linear infinite;
}

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

#bharat-pe-verification-result {
  margin-top: 15px;
}