/* Checkout flow paso1..3 */
.sa-funnel-body {
  margin: 0; padding: 0;
  font-family: 'Poppins', 'Nunito', sans-serif;
  background: #f5f5f7;
  color: #1a1a1a;
}
.sa-checkout {
  padding: 32px 16px 64px;
}
.sa-checkout__container {
  max-width: 720px; margin: 0 auto;
}
.sa-steps {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 24px;
}
.sa-step {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e0e0e0; color: #666;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.sa-step.is-active { background: #0018a8; color: #fff; }
.sa-step.is-done   { background: #00a884; color: #fff; }

.sa-checkout__title {
  text-align: center; margin: 0 0 24px;
  font-size: 26px; color: #0018a8;
}
.sa-checkout__center { text-align: center; }

.sa-card {
  background: #fff; border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.sa-field { display: block; margin-bottom: 18px; }
.sa-field__label {
  display: block; font-size: 14px; font-weight: 600;
  color: #333; margin-bottom: 6px;
}
.sa-field__input {
  width: 100%; padding: 12px 14px; border: 1px solid #ddd;
  border-radius: 10px; font-size: 16px; font-family: inherit;
  background: #fafafa;
}
.sa-field__input:focus { outline: none; border-color: #0018a8; background: #fff; }
.sa-field__hint { display: block; font-size: 12px; color: #777; margin-top: 4px; }

.sa-qty { margin: 24px 0; }
.sa-qty__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid #eee;
}
.sa-qty__row:last-child { border-bottom: 1px solid #eee; }
.sa-qty__label { font-size: 15px; font-weight: 600; }
.sa-qty__label small { font-weight: 400; color: #777; font-size: 12px; }
.sa-qty__ctrl { display: flex; align-items: center; gap: 12px; }
.sa-qty__btn {
  width: 32px; height: 32px; border: 1px solid #0018a8; color: #0018a8;
  background: #fff; border-radius: 50%; font-size: 18px; font-weight: 700;
  cursor: pointer;
}
.sa-qty__btn:hover { background: #0018a8; color: #fff; }
.sa-qty__num { width: 28px; text-align: center; font-weight: 700; font-size: 18px; }

.sa-summary { margin: 18px 0; padding-top: 12px; border-top: 2px solid #f0f0f0; }
.sa-summary__row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 18px;
}
.sa-summary__row strong { color: #0018a8; font-size: 22px; }

.sa-actions {
  display: flex; gap: 12px; margin-top: 24px;
  flex-wrap: wrap;
}
.sa-btn {
  flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: 10px; font-weight: 700;
  font-size: 16px; text-decoration: none; cursor: pointer; border: 0;
  font-family: inherit;
}
.sa-btn--primary { background: #ff6a00; color: #fff; }
.sa-btn--primary:hover { background: #e65d00; }
.sa-btn--ghost   { background: transparent; color: #333; border: 1px solid #ccc; }
.sa-btn--ghost:hover   { background: #f0f0f0; }

.sa-pay { border: 0; padding: 0; margin: 12px 0 18px; }
.sa-pay__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid #ddd; border-radius: 10px;
  margin-bottom: 8px; cursor: pointer; background: #fafafa;
}
.sa-pay__opt:has(input:checked) { border-color: #0018a8; background: #f0f4ff; }
.sa-pay__opt input { accent-color: #0018a8; }

.sa-order { margin-top: 18px; }
.sa-order h3 { margin: 0 0 10px; font-size: 16px; color: #333; }
.sa-order__line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.sa-order__line strong { color: #0018a8; }
.sa-order__total {
  display: flex; justify-content: space-between; padding: 10px 0;
  border-top: 2px solid #eee; margin-top: 6px;
  font-size: 18px; font-weight: 700;
}

.sa-spinner {
  width: 48px; height: 48px; margin: 24px auto;
  border: 4px solid #e0e0e0; border-top-color: #0018a8;
  border-radius: 50%; animation: sa-spin .8s linear infinite;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }

.sa-err { color: #c00; font-weight: 600; }

@media (max-width: 600px) {
  .sa-checkout { padding: 16px 12px 32px; }
  .sa-card { padding: 18px; }
  .sa-checkout__title { font-size: 22px; }
}