/* ==========================================================================
   Alpa Clean — checkout.css
   Página de checkout: resumen de pedido y confirmación
   ========================================================================== */

.page-hero {
  padding-top: calc(var(--header-h) + var(--space-xl));
  padding-bottom: var(--space-xl);
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

.page-hero p.lead { max-width: 55ch; color: var(--color-ink-soft); margin-top: var(--space-sm); font-size: 1.1rem; }

.checkout__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-xl);
  align-items: start;
}

.checkout-summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: sticky;
  top: calc(var(--header-h) + var(--space-md));
}

.checkout-summary__list { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }

.checkout-summary__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-small);
}

.checkout-summary__name em { color: var(--color-ink-soft); font-style: normal; }
.checkout-summary__qty { font-weight: 700; color: var(--color-primary-dark); flex-shrink: 0; }

.checkout-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
}
.checkout-summary__total strong { font-size: 1.4rem; color: var(--color-primary-dark); }

.checkout-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
}
.checkout-empty p { margin-inline: auto; margin-bottom: var(--space-md); color: var(--color-ink-soft); }

/* ---------- Éxito ---------- */
.checkout-success {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.checkout-success svg {
  width: 56px; height: 56px;
  color: var(--color-success);
  margin-inline: auto;
  margin-bottom: var(--space-sm);
}

.checkout-success h2 { margin-bottom: var(--space-2xs); }
.checkout-success p { margin-inline: auto; color: var(--color-ink-soft); margin-bottom: var(--space-md); }

.ticket-preview {
  text-align: left;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-small);
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  max-height: 320px;
  overflow-y: auto;
}

.checkout-success__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 900px) {
  .checkout__grid { grid-template-columns: 1fr; }
  .checkout-summary-card { position: static; }
}