/* ============================================================
   CHECKOUT PAGE — STYLES
   ============================================================ */

.page-hero { padding: calc(var(--header-h) + 80px) 0 80px; }

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }

.form-section {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 24px;
}
.form-section-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-border);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.payment-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  cursor: none;
  transition: border-color .3s;
}
.payment-option.selected { border-color: var(--red); background: rgba(201,37,92,.04); }
.payment-radio {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--red);
  position: relative;
  flex-shrink: 0;
}
.payment-option.selected .payment-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--red);
  border-radius: 50%;
}
.payment-name { font-weight: 600; font-size: .9375rem; }
.payment-desc { font-size: .8125rem; margin-top: 2px; }

/* Summary */
.checkout-summary { padding: 32px; position: sticky; top: calc(var(--header-h) + 24px); }
.summary-item {
  display: flex;
  justify-content: space-between;
  font-size: .875rem;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-muted);
}
.summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.125rem;
  font-weight: 700;
  padding-top: 16px;
  margin-top: 4px;
}