/* BallonPagos — botones de pago one-click.
   Se adapta al color de marca vía var(--bs-primary). */

.bp-root { width: 100%; }

.bp-botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 2px solid var(--bs-secondary, #b96f4a);
  background: var(--bs-secondary, #b96f4a);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: filter .15s, transform .05s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}

.bp-btn i { font-size: 1.2rem; }

.bp-btn:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb, 185,111,74), .35); }
.bp-btn:active { transform: translateY(1px); }
.bp-btn:disabled, .bp-btn.disabled { opacity: .6; cursor: not-allowed; }

/* Transferencia: estilo secundario (outline) para diferenciar del pago con tarjeta */
.bp-btn--transferencia {
  background: #fff;
  color: var(--bs-secondary, #b96f4a);
}
.bp-btn--transferencia:hover { background: rgba(var(--bs-primary-rgb, 185,111,74), .06); }

.bp-vacio {
  font-size: .9rem;
  color: #888;
  background: #f7f7f7;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

/* En la barra fija mobile los botones van más compactos */
.bp-mobile .bp-btn { padding: 12px 14px; font-size: .95rem; }