.checkout-page { padding-top: 24px; }
.checkout-layout { display: grid; gap: 20px; padding-bottom: 44px; }
.checkout-form, .order-summary { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.checkout-form { display: grid; gap: 16px; }
.checkout-form label { display: grid; gap: 8px; font-weight: 900; }
.checkout-form input, .checkout-form textarea { width: 100%; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); border-radius: 16px; padding: 14px 16px; outline: none; transition: var(--transition-fast); }
.checkout-form input:focus, .checkout-form textarea:focus { border-color: hsl(var(--accent)); box-shadow: 0 0 0 4px hsl(var(--accent) / .12); }
.form-note { font-size: .9rem; }
.success-message { padding: 16px; border-radius: 16px; background: hsl(142 55% 40% / .12); color: hsl(142 55% 30%); font-weight: 900; }
.order-line { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid hsl(var(--border)); }
.order-total { display: flex; justify-content: space-between; font-weight: 900; font-size: 1.25rem; padding-top: 16px; }
@media (min-width: 900px) { .checkout-layout { grid-template-columns: 1fr 380px; align-items: start; } }