.trac-order{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px;margin:16px 0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#111827}
.trac-header{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #e5e7eb;padding-bottom:12px;margin-bottom:12px}
.trac-header__left{display:flex;flex-direction:column;gap:4px}
.trac-status{font-weight:600}
.trac-status.is-delivered{color:#065f46}
.trac-status.is-intransit{color:#1f2937}
.trac-date{color:#6b7280;font-size:14px}
.trac-header__right{display:flex;gap:24px;flex-wrap:wrap}
.trac-field span{display:block;color:#6b7280;font-size:12px}
.trac-field strong{font-size:14px}
.trac-progress{background:#f3f4f6;border-radius:6px;height:8px;overflow:hidden;margin:12px 0}
.trac-progress .bar{background:#10b981;height:100%;transition:width .3s ease}
/* Stepped progress bar (0,25,50,75,100) */
.trac-progress-stepped{position:relative;height:40px;margin:18px 0}
.trac-progress-stepped { overflow: visible; }
.trac-progress-stepped .tps-track{position:absolute;left:8%;right:8%;top:50%;height:6px;background:#e6e6e6;border-radius:6px;transform:translateY(-50%);box-sizing:border-box;}
.trac-progress-stepped .tps-fill{position:absolute;left:8%;top:50%;height:6px;background:#10b981;border-radius:6px;transform:translateY(-50%);width:0;transition:width .3s ease;box-sizing:border-box;overflow:hidden}
.trac-progress-stepped .tps-steps{position:relative;display:flex;justify-content:space-between;align-items:center;position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);pointer-events:none}
.trac-progress-stepped .tps-steps .step{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #e6e6e6;box-shadow:0 0 0 4px #fff;z-index:2}
.trac-progress-stepped .tps-steps .step.is-filled{background:#10b981;border-color:#10b981}
.trac-progress-stepped .tps-steps .step + .step{margin-left:0}

.trac-progress-caption{ text-align:center; color:#6b7280; font-size:10px; margin-top:6px; margin-bottom:12px }
.trac-timeline{position:relative;margin-top:8px;--line-x:18px;--dot-size:16px;padding-left:calc(var(--line-x) + 8px)}
.trac-timeline:before{content:"";position:absolute;left:var(--line-x);top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom, #e5e7eb 0px, #e5e7eb 4px, transparent 4px, transparent 8px)}
.trac-timeline:after{content:"";position:absolute;left:calc(var(--line-x) - 3px);top:-2px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:8px solid #e5e7eb}
.trac-timeline__item{position:relative;display:flex;margin:14px 0}
.trac-timeline__dot{position:absolute;left:calc(var(--line-x) - (var(--dot-size) / 2));top:2px;width:var(--dot-size);height:var(--dot-size);border-radius:9999px;background:#10b981;z-index:1;box-shadow:0 0 0 2px #fff}
.trac-timeline__dot:after{content:"";position:absolute;left:4px;top:3px;width:6px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.trac-timeline__content{margin-left:calc(var(--line-x) + 18px)}
.trac-timeline__title{font-weight:600;color:#111827}
.trac-timeline__meta{color:#6b7280;font-size:13px}
.trac-timeline__note{color:#374151;font-size:14px;margin-top:4px;font-style:normal}


/* Admin: improve readability of history table in Order Edit screen */
body .wrap table.widefat.fixed.striped tr td,
body .wrap table.widefat.fixed.striped tr th {
	padding: 8px 10px;
	vertical-align: middle;
}

/* Right-align the No. column */
body .wrap table.widefat.fixed.striped tr td:nth-child(1),
body .wrap table.widefat.fixed.striped tr th:nth-child(1) {
  text-align: right;
  padding-right: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Segoe UI Mono', monospace;
}

/* Make datetime input a bit narrower to improve layout */
body .wrap table.widefat.fixed.striped input[type="datetime-local"] {
	max-width: 220px;
}