.wrd-container {
  font-family: 'Radish Regular',Helvetica,Arial,Lucida,sans-serif;
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  /* border: 1px solid #eee; Opcional si quieres borde */
}

.wrd-header h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  color: #001442;
  font-weight: 700;
}

/* Steps Indicator */
.wrd-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 25px;
}
.wrd-step-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #e0e0e0; /* Gray ring */
  border-top-color: #2ecc71; /* Green progress part */
  border-left-color: #2ecc71;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
  color: #333;
}
.wrd-step-text {
  font-size: 1rem;
  color: #333;
}

/* Buttons and Layout */
.wrd-type-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}
.wrd-type-option {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  font-weight: bold;
  cursor: default;
  background: #f0f0f0;
  color: #999;
  border: 1px solid #ddd;
}
.wrd-type-option.active {
  background: #04c4d9; /* Wompi/Blue color */
  color: #fff;
  border-color: #04c4d9;
}

.wrd-amount-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 15px;
}
.wrd-amt-btn {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px 5px;
  font-size: 1rem;
  cursor: pointer;
  color: #333;
  transition: all 0.2s;
  font-weight: 600;
}
.wrd-amt-btn:hover {
  border-color: #04c4d9;
}
.wrd-amt-btn.active {
  background: #04c4d9;
  color: #fff;
  border-color: #04c4d9;
  position: relative;
}
/* Little arrow for active amount */
.wrd-amt-btn.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #04c4d9 transparent transparent transparent;
}

.wrd-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.wrd-section-title {
  font-size: 1.5rem;
  margin: 15px 0 10px;
  color: #04c4d9;
}

.wrd-programs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 6px;
}
.wrd-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}

.wrd-info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
}
.wrd-info-box p {
  margin: 0;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.4;
}

.wrd-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.wrd-btn-submit, .wrd-btn-next {
  background: #04c4d9; /* Yellow action button */
  color: #000;
}
.wrd-btn-submit:hover, .wrd-btn-next:hover {
  background: #04c4d9;
}
.wrd-btn-back {
  background: #ddd;
  color: #333;
  margin-bottom: 10px;
}
.wrd-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wrd-actions-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* Grid for card date/cvc */
.wrd-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.wrd-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: #555;
}

/* Messages */
.wrd-msg { margin: 10px 0; padding: 10px; border-radius: 6px; text-align: center;}
.wrd-success { background: #d4edda; color: #155724; }
.wrd-error { background: #f8d7da; color: #721c24; }

.wrd-legal-box {
  font-size: 0.8rem;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.wrd-check {
  display: block;
  margin-bottom: 5px;
}

.wrd-footnote { text-align: center; color: #777; margin-top: 15px; }

.wrd-final-response {
  text-align: center;
  padding: 20px 0;
}

.wrd-status-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.wrd-final-reference {
  margin-top: 15px;
  font-size: 1.1rem;
  color: #333;
}

/* Two-column grid (Step 2 doc fields) */
.wrd-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Normaliza los campos dentro de tu bloque (más específico que el global) */
.wrd-grid-2 .wrd-field label{
  display:block;
  margin:0 0 6px 0;
  font-size:14px;
  font-weight:600;
  color:#1f2937;
}

.wrd-grid-2 .wrd-input{
  width:100%;
  height:44px;
  line-height: 1.2;
  padding:10px 12px;
  background-color:#fff;
  color:#111827;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:14px;
  box-sizing:border-box;
  margin-bottom:0;              /* para que el gap del grid mande */
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}

/* Esto sobre-escribe la regla global (que pone padding:2px y border:#bbb) */
.wrd-grid-2 input.wrd-input,
.wrd-grid-2 select.wrd-input{
  padding:10px 12px !important;
  border:1px solid #d1d5db !important;
  background-color:#fff !important;
  color:#111827 !important;
}

/* Placeholder */
.wrd-grid-2 .wrd-input::placeholder{
  color:#9ca3af;
}

/* Focus */
.wrd-grid-2 .wrd-input:focus{
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* Select homogéneo (flecha) */
.wrd-grid-2 select.wrd-input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:40px !important;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
}

/* Validación básica */
.wrd-grid-2 .wrd-input:invalid{
  border-color:#ef4444 !important;
}
.wrd-grid-2 .wrd-input:invalid:focus{
  box-shadow:0 0 0 3px rgba(239,68,68,.15);
}

/* Responsive */
@media (max-width:640px){
  .wrd-grid-2{ grid-template-columns:1fr; }
}
/* Info box positioned above type selector */
.wrd-info-box--top {
  margin-bottom: 15px;
}

/* Card brands */
.wrd-card-brands {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
.wrd-card-brands img {
  height: 26px;
  width: auto;
  opacity: 0.9;
}

/* Wompi logo footer */
.wrd-wompi-logo {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  opacity: 0.95;
}

/* Checkbox labels */
.wrd-legal-box .wrd-check a {
  color: #04c4d9;
  text-decoration: underline;
}