/* =========================================================
   Pago de anticipo en las tarjetas de servicios
   Usa las variables de styles.css (colores, radio)
   ========================================================= */

.pay-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.pay-form label { font-size: 0.875rem; font-weight: 600; }
.pay-form input {
  width: 5rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem; /* 16px: evita el zoom automático en iPhone */
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pay-form input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.pay-form .btn-primary {
  flex: 1 1 auto;
  padding: 0.625rem 1.25rem;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.pay-form .btn-primary:disabled { opacity: .6; cursor: wait; }

.card .pay-msg {
  flex-basis: 100%;
  margin-top: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.card .pay-msg:empty { display: none; }
.card .pay-msg.is-error { color: #b3261e; }