/* web/checkout/checkout.css — trang checkout.hatrung.top (docs/13-CHECKOUT-PLAN.md). Dùng token màu của /style.css. */

.ck-main { padding: 16px var(--gutter) 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ck-main > section { min-width: 0; display: grid; gap: 14px; }
.ck-tabs { border-bottom: 1px solid var(--border); background: var(--surface); }
.ck-who { font-size: 13px; }
.ck-due { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--accent-soft); cursor: help; }
.ck-due .label { font-size: 11.5px; color: var(--muted); }
.ck-due strong { font-size: 16px; color: var(--accent); }

.ck-subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ck-subtab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font: 500 13px/1 var(--font-sans); cursor: pointer; }
.ck-subtab[aria-selected="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ck-subtab .count { margin: 0; }
.ck-subtab[data-revoked="1"] { border-style: dashed; }

.ck-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ck-toolbar select { width: auto; }
.ck-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; font-size: 12px; color: var(--muted); }
.legend-dot { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot::before { content: ""; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); border-left-width: 4px; background: var(--surface); }
.legend-dot[data-tone="ordered"]::before { background: var(--st-ordered-bg); border-left-color: var(--st-ordered-bar); }
.legend-dot[data-tone="pending"]::before { background: var(--warn-soft); border-left-color: var(--warn); }
.legend-dot[data-tone="shipped"]::before { background: var(--st-shipped-bg); border-left-color: var(--st-shipped-bar); }
.legend-dot[data-tone="delivered"]::before { background: var(--st-delivered-bg); border-left-color: var(--st-delivered-bar); }

/* Màu dòng theo trạng thái — cùng bảng màu và vạch trái với tab Đơn hàng của eDrop */
.ck-table td { vertical-align: top; }
.ck-row td:first-child { box-shadow: inset 4px 0 0 transparent; }
.ck-row[data-tone="ordered"] td { background: var(--st-ordered-bg); }
.ck-row[data-tone="ordered"] td:first-child { box-shadow: inset 4px 0 0 var(--st-ordered-bar); }
.ck-row[data-tone="pending"] td { background: var(--warn-soft); }
.ck-row[data-tone="pending"] td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
.ck-row[data-tone="invalid"] td { background: var(--danger-soft); }
.ck-row[data-tone="invalid"] td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.ck-row[data-tone="shipped"] td { background: var(--st-shipped-bg); }
.ck-row[data-tone="shipped"] td:first-child { box-shadow: inset 4px 0 0 var(--st-shipped-bar); }
.ck-row[data-tone="delivered"] td { background: var(--st-delivered-bg); }
.ck-row[data-tone="delivered"] td:first-child { box-shadow: inset 4px 0 0 var(--st-delivered-bar); }
.ck-row[data-tone="cancelled"] td { background: var(--st-cancelled-bg); color: var(--muted); }

.ck-status { font-weight: 500; font-size: 13px; }
.ck-group { display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.ck-product { display: flex; gap: 10px; align-items: flex-start; min-width: 180px; }
.ck-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--border); object-fit: cover; background: var(--surface-2); cursor: copy; flex: none; padding: 0; }
.ck-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.ck-product-actions { display: grid; gap: 4px; justify-items: start; }
.ck-copy { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; color: var(--accent); font: 500 12.5px/1.3 var(--font-sans); cursor: pointer; text-align: left; }
.ck-copy:hover { text-decoration: underline; }
.ck-copy .icon { width: 14px; height: 14px; }
.ck-copied { color: var(--ok); font-size: 12px; font-weight: 500; }

.ck-recipient { display: grid; gap: 2px; min-width: 200px; font-size: 13px; }
.ck-part { border: 0; background: none; padding: 1px 3px; margin: 0 -3px; border-radius: 4px; color: inherit; font: inherit; text-align: left; cursor: copy; }
.ck-part:hover, .ck-part:focus-visible { background: var(--accent-soft); outline: none; }
.ck-part.flash { background: var(--ok-soft); }
.ck-part-row { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.ck-alt { font-size: 11.5px; color: var(--muted); }
.ck-recipient-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.ck-deadline.soon { color: var(--warn); font-weight: 500; }
.ck-deadline.late { color: var(--danger); font-weight: 600; }
.ck-money-wait { color: var(--muted); cursor: help; border-bottom: 1px dotted var(--muted); }
.ck-info-icon { width: 13px; height: 13px; vertical-align: -2px; }

.ck-tracking { display: grid; gap: 6px; min-width: 190px; }
.ck-tracking input { font-family: var(--font-mono); font-size: 13px; }
.ck-tracking .row { display: flex; gap: 6px; }
.ck-tracking .row input { min-width: 0; flex: 1; }
.ck-reason { font-size: 12px; color: var(--muted); }
.ck-reason.bad { color: var(--danger); }
.ck-locked { font-family: var(--font-mono); font-size: 13px; }

.ck-summary { max-width: 760px; }
.ck-remaining strong { color: var(--accent); }

@media (max-width: 720px) {
  .ck-due { align-items: flex-start; }
  .ck-legend { margin-left: 0; }
}
.ck-thumb { display: grid; place-items: center; color: var(--muted); }
.ck-thumb .icon { width: 22px; height: 22px; }