﻿/* Checkout page specific styles (keeps consistency with base.css) */
.page-header { margin-block: var(--space-10) var(--space-6); }
.checkout-steps ol {
  counter-reset: step;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 0;
  margin: 0 0 var(--space-6);
}
.checkout-steps li {
  list-style: none;
  position: relative;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-muted);
  background: var(--color-surface);
}
.checkout-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  background: var(--gray-100);
  color: var(--color-text);
}
.checkout-steps .is-current { color: var(--color-text); border-color: var(--color-primary); }
.checkout-steps .is-current::before { background: var(--color-primary); color: var(--color-primary-contrast); }
.checkout-steps .is-complete { color: var(--color-text); }

.checkout-layout { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .checkout-layout { grid-template-columns: 1.6fr 1fr; } }

.section + .section { margin-top: var(--space-6); }
.form-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-fieldset { margin-top: var(--space-4); }
.shipping-methods, .payment-methods { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.radio, .checkbox { display: inline-flex; align-items: center; gap: var(--space-2); }

.discount-form .discount-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); }

.order-items table { width: 100%; border-collapse: collapse; }
.order-items th, .order-items td { border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-2); vertical-align: top; }
.order-items .text-right { text-align: right; }

.order-totals { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.order-totals .row { display: flex; align-items: center; justify-content: space-between; }
.order-totals .total { font-size: var(--text-xl); font-weight: 800; }

.sticky-summary { position: sticky; top: 96px; }

.confirm-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 860px) { .confirm-grid { grid-template-columns: 1fr 1fr; } }
.confirm-title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.confirm-box { border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.confirm-actions { margin-top: var(--space-4); display: grid; gap: var(--space-3); }

.support-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) { .support-grid { grid-template-columns: 1.6fr auto; } }
.support-list { margin: 0; padding-left: var(--space-5); }

.policy-list { margin: 0; padding-left: var(--space-5); }

.payment-fields.hidden { display: none !important; }

/* Minor utility */
.text-right { text-align: right; }


