.checkout-page { padding: 48px 0 90px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }

.form-section { margin-bottom: 32px; }
.form-section h3 { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.85rem; font-weight: 600; }
.field input, .field select {
  padding: 11px 13px;
  border-radius: var(--radius);
  border: 1.5px solid rgba(20,35,27,0.18);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  background: var(--white);
}
.field-error { font-size: 0.78rem; color: var(--flag-600); min-height: 1em; }

#card-container {
  border: 1.5px solid rgba(20,35,27,0.18);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 8px;
}

.order-summary {
  background: var(--sand-100);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 90px;
}
.order-summary .line { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 10px; }
.order-summary .total { font-weight: 700; font-size: 1.1rem; border-top: 1px solid rgba(20,35,27,0.15); padding-top: 12px; margin-top: 12px; }

.pay-status { font-size: 0.9rem; margin-top: 14px; min-height: 1.2em; }
.pay-status.err { color: var(--flag-600); }
.pay-status.ok { color: var(--green-800); }

@media (max-width: 820px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}