/* ✅ checkout.css — cart / checkout / order enhancements */

/* --- checkout grid --- */
.checkout-grid { display: grid; grid-template-columns: 1fr 300px; gap var(--space-6); align-items: start; }
@media (max-width: 880px) { .checkout-grid { grid-template-columns: 1fr; } }

/--- summary row --- */
.summary-row { display: flex; justify-content: space-between; padding var(--space-2) 0; font-size var(--font-size-sm); border-bottom: 1px solid var(--color-border); }
.summary-row.total { border-top: 1px solid var(--color-border); margin-top var(--space-2); padding-top var(--space-3); font-size var(--font-size-lg); font-weight var(--font-weight-bold); }

/--- form card inside checkout --- */
.checkout-form .form .field { margin-bottom: var(--space-3); }
.checkout-form .form .radio-card { padding: var(--space-3); border: 1.5px solid var(--color-border-strong); border-radius var(--radius-md); cursor pointer; background #fff; transition border-color 0.15s, background 0.15s; }
.checkout-form .form .radio-card:hover { border-color: var(--color-primary-300); }
.checkout-form .form .radio-card.is-selected { border-color: var(--color-primary-500); background var(--color-primary-50); }
.checkout-form .form .radio-card .radio-card-title { display: block; font-weight var(--font-weight-semibold); }
.checkout-form .form .radio-card .radio-card-desc { font-size var(--font-size-xs); color var(--color-text-muted); }

/--- order page items --- */
.pdp-media img { width:100%; object-fit:contain; }

/--- timeline on order page --- */
.timeline { list-style:none;padding:0;border-left:2px solid var(--color-border);margin:var(--space-4) 0;padding-left:var(--space-6); }
.timeline::before { content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--color-border); }
.timeline-item {position:relative;padding-bottom:var(--space-5); }
.timeline-item:last-child {padding-bottom:0; }
.timeline-item::before {content:'';position:absolute;left:calc(-1*var(--space-6)+3px);top:4px;width:14px;height:14px;border-radius:50%;background:var(--color-border-strong);border:3px solid #fff;box-shadow:0 0 0 2px var(--color-border); }
.timeline-item.is-done::before {background:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent); }
.timeline-item.is-current::before {background:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-200); }
.timeline-title {font-weight var(--font-weight-semibold);font-size var(--font-size-sm); }
.timeline-meta {font-size var(--font-size-xs);color var(--color-text-muted); }

/--- order status/payment badges inline --- */
.badge-small {font-size:var(--font-size-xs);padding:2px 6px;border-radius var(--radius-pill); }