/* Checkout page specific styles */
.checkout-intro { margin-block: var(--space-8) var(--space-6); }
.checkout-progress {
  display: grid; grid-auto-flow: column; gap: var(--space-4);
  counter-reset: step;
  list-style: none; padding: 0; margin: 0 0 var(--space-8) 0;
}
.checkout-progress li {
  position: relative; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--gray-700); font-weight: 700; text-align: center;
}
.checkout-progress li::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: var(--space-2);
  background: var(--gray-100); border-radius: var(--radius-full); font-size: var(--text-sm);
}
.checkout-progress li.active { color: var(--color-text); border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.checkout-progress li.active::before { background: color-mix(in oklab, var(--color-primary) 14%, var(--gray-100)); }

.checkout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-8); align-items: start; }
.checkout-main h2, .checkout-summary h2 { margin-top: 0; }

/* Grid helpers */
.grid.two-col { display: grid; grid-template-columns: 1fr 1fr; }
.grid.two-col .full { grid-column: 1 / -1; }
.grid.two-col.gap { gap: var(--space-5); }

/* Radios in rows */
.radio-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.radio-row input { accent-color: var(--color-primary); }

.payment-badges { display: inline-flex; gap: 6px; margin-left: var(--space-2); }
.payment-badges span { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; font-size: var(--text-xs); font-weight: 800; border: 1px solid var(--gray-300); border-radius: var(--radius-full); }

.payment-card-fields { margin-bottom: var(--space-4); }

.actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }

/* Summary */
.summary-items { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.summary-item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); border-bottom: 1px dashed var(--color-border); padding-bottom: var(--space-3); }
.summary-item .meta { color: var(--gray-600); font-size: var(--text-sm); }
.summary-empty { color: var(--gray-600); }

.promo-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); margin-top: var(--space-4); }

.totals { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.totals .row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); }
.totals .grand { font-size: var(--text-lg); font-weight: 800; }
.totals .discount dd { color: var(--color-danger); }
.tax-note { color: var(--gray-600); font-size: var(--text-sm); margin-top: var(--space-3); }

/* Info sections */
.promo-banner .promo-list { display: grid; gap: var(--space-2); }
.security ul { display: grid; gap: var(--space-2); }
.support .grid { align-items: start; }

/* Tracking */
.track-form { margin-top: var(--space-2); }
.track-result { margin-top: var(--space-4); padding: var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }

/* Confirmation */
.confirmation { border-left: 4px solid var(--color-success); }
.confirmation h2 { color: var(--color-success); }

/* Responsive */
@media (max-width: 1024px) {
  .checkout-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid.two-col { grid-template-columns: 1fr; }
}