/*
 * Orders (escrow), order timeline and seller earnings. Uses the tokens from site.css.
 */

/* ============ STATUS COLOURS ============ */
.order-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.order-status.status-paid { background: #fff4d6; color: #7a5500; }
.order-status.status-shipped { background: #e8f1ff; color: #1c4fae; }
.order-status.status-completed { background: #dff5e7; color: #146c3a; }
.order-status.status-disputed { background: #fde8e8; color: #a2242a; }
.order-status.status-refunded { background: #eef1f6; color: var(--muted); }

.funds-badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.funds-held { background: #fff4d6; color: #7a5500; }
.funds-available { background: #dff5e7; color: #146c3a; }
.funds-withdrawn { background: #e8f1ff; color: #1c4fae; }
.funds-returned { background: #eef1f6; color: var(--muted); }

/* ============ ORDER LIST ============ */
.role-tabs { margin-bottom: 18px; }
.role-tabs a { gap: 6px; }
.order-list { margin: 0; padding: 0; list-style: none; }
.order-list li + li { border-top: 1px solid #edf0f5; }
.order-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  color: var(--ink);
  text-decoration: none;
}
.order-row:hover { background: #fafbfd; }
.order-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff4d6; color: #a06a00; }
.order-icon.status-shipped { background: #e8f1ff; color: var(--blue); }
.order-icon.status-completed { background: #dff5e7; color: #1a7f45; }
.order-icon.status-disputed { background: #fde8e8; color: var(--heart); }
.order-icon.status-refunded { background: #eef1f6; color: var(--muted); }
.order-icon.status-refunded .icon { transform: rotate(180deg); }
.order-main { display: grid; gap: 2px; min-width: 0; }
.order-main strong { overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.order-main span { color: var(--muted); font-size: 13px; }
.order-amount { font-size: 16px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-amount small { color: var(--muted); font-size: 11px; font-weight: 600; }
.order-chevron { color: #b2bacb; }

/* ============ ORDER DETAIL ============ */
.order-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 20px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  list-style: none;
}
.order-progress li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; color: var(--muted); }
.order-progress li::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 50%;
  width: 100%;
  height: 3px;
  background: #e3e8f0;
}
.order-progress li:first-child::before { display: none; }
.order-progress li.done::before { background: #1a9b54; }
.order-progress li.current::before { background: linear-gradient(90deg, #1a9b54, #e3e8f0); }
.order-progress li > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #e3e8f0;
  color: #8a93a6;
  box-shadow: 0 0 0 1px #e3e8f0;
}
.order-progress li.done > span { background: #1a9b54; color: #fff; box-shadow: 0 0 0 1px #1a9b54; }
.order-progress li.current > span { background: #fff; color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.order-progress strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.order-progress small { font-size: 12px; }

.alert-info { border: 1px solid #cfe1ff; background: #eef5ff; color: var(--navy); }
.alert-success { border: 1px solid #b6e3c6; background: #f1fbf5; color: #155c32; }
.alert-danger { border: 1px solid #f3c0c2; background: #fff4f4; color: #8c1d22; }
.alert-neutral { border: 1px solid var(--line); background: #f7f9fc; color: #3b4357; }

.action-card { border-color: #cfe1ff; box-shadow: 0 10px 26px rgba(0, 119, 255, .08); }
.action-confirm { border-color: #b6e3c6; box-shadow: 0 10px 26px rgba(26, 155, 84, .10); }
.action-confirm .step-num { background: linear-gradient(135deg, #14915a, #22c27a); }
.action-card form { margin: 0; }
.action-confirm .field-help { margin-top: 12px; }
.cancel-form { display: flex; align-items: center; gap: 8px; margin-top: 16px !important; padding-top: 14px; border-top: 1px dashed var(--line); }
.dispute-card summary { display: flex; align-items: center; gap: 8px; color: #a2242a; font-weight: 600; cursor: pointer; list-style: none; }
.dispute-card summary::-webkit-details-marker { display: none; }
.dispute-card[open] summary { margin-bottom: 16px; }
.dispute-card form { display: grid; gap: 12px; margin: 0; }
.dispute-card .btn-danger { justify-self: start; }

.timeline { position: relative; margin: 0; padding: 0 0 0 6px; list-style: none; }
.timeline li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; top: 18px; bottom: 0; left: 6px; width: 2px; background: #e3e8f0; }
.timeline li:last-child::before { display: none; }
.tl-dot { position: relative; z-index: 1; flex: 0 0 14px; width: 14px; height: 14px; margin-top: 4px; border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.tl-paid .tl-dot { background: #a06a00; box-shadow: 0 0 0 1px #a06a00; }
.tl-confirmed .tl-dot,
.tl-auto_released .tl-dot,
.tl-released .tl-dot,
.tl-withdrawn .tl-dot { background: #1a9b54; box-shadow: 0 0 0 1px #1a9b54; }
.tl-disputed .tl-dot { background: var(--heart); box-shadow: 0 0 0 1px var(--heart); }
.tl-refunded .tl-dot { background: #8a93a6; box-shadow: 0 0 0 1px #8a93a6; }
.timeline strong { display: block; font-size: 14px; font-weight: 600; }
.tl-meta { color: var(--muted); font-size: 12px; }
.timeline p { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: #f7f9fc; color: #3b4357; font-size: 13px; line-height: 1.5; }

.order-summary dl,
.ship-details { display: grid; gap: 10px; margin: 0 0 12px; }
.order-summary dl > div,
.ship-details > div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.order-summary dt,
.ship-details dt { color: var(--muted); }
.order-summary dd,
.ship-details dd { margin: 0; font-weight: 600; text-align: right; }
.order-summary-total { padding-top: 10px; border-top: 1px solid var(--line); }
.order-summary-total dt { color: var(--ink) !important; font-weight: 700; }
.order-summary-total dd { color: #146c3a; font-size: 18px; font-weight: 700 !important; }
.order-desc { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f7f9fc; color: #3b4357; font-size: 13px; }

/* ============ EARNINGS ============ */
.connect-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid #d8d6ff;
  border-radius: 16px;
  background: linear-gradient(120deg, #f6f5ff, #fff);
}
.connect-card > div { flex: 1; display: grid; gap: 2px; }
.connect-card strong { font-size: 15px; }
.connect-card span { color: var(--muted); font-size: 13px; }
.connect-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: #635bff; color: #fff; }
.connect-card.is-active { border-color: #b6e3c6; background: linear-gradient(120deg, #f1fbf5, #fff); }
.connect-card.is-active .connect-icon { background: #1a9b54; }
.connect-card.is-pending { border-color: #f4dc9c; background: linear-gradient(120deg, #fff8e6, #fff); }
.connect-card.is-pending .connect-icon { background: #d39200; }
.kpi-highlight { border-color: #b6e3c6; background: linear-gradient(160deg, #f1fbf5, #fff); }
.withdraw-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #0b4fd6);
  color: #c9d5ef;
}
.withdraw-bar > div { display: grid; gap: 2px; }
.withdraw-bar strong { color: #fff; font-size: 20px; font-weight: 700; }
.withdraw-bar span { font-size: 13px; }
.withdraw-bar form { margin: 0; }
.withdraw-bar .btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.card-head-pad { padding: 18px 20px 0; }
.payout-table td,
.payout-table th { padding: 12px 20px; }
.cell-sub { display: block; color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .order-row { grid-template-columns: auto minmax(0, 1fr); }
  .order-amount,
  .order-status { grid-column: 2; justify-self: start; }
  .order-chevron { display: none; }
  .order-progress { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .order-progress li::before { display: none; }
  .connect-card { flex-wrap: wrap; }
}

.payout-table td { white-space: nowrap; }
.payout-table td:first-child { white-space: normal; min-width: 180px; }
.connect-icon .icon { width: 22px; height: 22px; }

/* ============ PAYOUT STATUS ============ */
.payout-badge { display: inline-flex; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 2px; }
.payout-active { background: #dff5e7; color: #146c3a; }
.payout-pending { background: #fff4d6; color: #7a5500; }
.payout-not_started { background: #eef1f6; color: #4a5468; }
.connect-card.is-pending .connect-icon { background: #d39200; }
.payout-banner { align-items: center; }
.payout-banner .alert-action { margin-left: auto; white-space: nowrap; }
.live-locked { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid #f4dc9c; border-radius: 10px; background: #fff8e6; color: #6b4b00; font-size: 13px; line-height: 1.5; }
.live-locked a { color: inherit; font-weight: 600; text-decoration: underline; }
@media (max-width: 760px) {
  .payout-banner { flex-wrap: wrap; }
  .payout-banner .alert-action { margin-left: 0; }
}

/* ============ SHIPPING PROOF & DISPUTES ============ */
.tl-extended .tl-dot { background: #d39200; box-shadow: 0 0 0 1px #d39200; }
.tl-evidence .tl-dot { background: #6a5cff; box-shadow: 0 0 0 1px #6a5cff; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px !important; letter-spacing: .02em; }
.track-btn { margin-bottom: 14px; }
.confirm-form { display: grid; gap: 14px; justify-items: start; }
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #b6e3c6; border-radius: 12px; background: #f6fcf8; color: #1f3d2b; font-size: 14px; line-height: 1.45; cursor: pointer; }
.check-row input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: #1a9b54; }
.late-card { border-color: #f3c0c2; box-shadow: 0 10px 26px rgba(162, 36, 42, .08); }
.late-card .step-num { background: linear-gradient(135deg, #c0352f, #e2574c); }
.late-card form { margin: 0; }
.dispute-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dispute-kind { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.dispute-kind:hover { border-color: #e7a9ac; }
.dispute-kind:has(input:checked) { border-color: #c0352f; background: #fff6f6; }
.dispute-kind input { accent-color: #c0352f; }
.evidence-form { display: grid; gap: 14px; margin: 0; }
.evidence-form .btn-primary { justify-self: start; }
.evidence-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.evidence-grid a { display: block; width: 76px; height: 76px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f7f9fc; }
.evidence-grid img { width: 100%; height: 100%; object-fit: cover; }
.proof-thumb { display: grid; gap: 8px; margin-top: 14px; color: var(--ink); text-decoration: none; }
.proof-thumb img { width: 100%; max-height: 180px; object-fit: cover; border: 1px solid var(--line); border-radius: 12px; background: #f7f9fc; }
.proof-thumb span { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: 13px; font-weight: 600; }
@media (max-width: 760px) {
  .dispute-kinds { grid-template-columns: 1fr; }
}