/*
 * NCP Bridge — my-account journey panel.
 *
 * Deliberately theme-neutral: system font stack, currentColor for text, and only
 * two committed hues (a green for done, an amber for in-progress). A storefront
 * theme owns its own palette; a plugin that hard-codes a brand blue looks broken on
 * three quarters of stores. Everything is scoped under .ncp-journey so nothing here
 * can reach the rest of the page.
 */

.ncp-journey {
  margin: 28px 0;
  padding: 20px 22px;
  border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 10px;
  font-family: inherit;
}

.ncp-journey .ncp-j-h {
  margin: 0 0 16px;
  font-size: 1.05em;
  font-weight: 650;
}

/* ── stepper ─────────────────────────────────────────────────────────────── */
.ncp-journey .ncp-j-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ncp-journey .ncp-j-step {
  position: relative;
  flex: 1 1 96px;
  min-width: 96px;
  padding: 0 6px;
  text-align: center;
  font-size: .84em;
  line-height: 1.35;
  opacity: .55;
}

.ncp-journey .ncp-j-step.ncp-done,
.ncp-journey .ncp-j-step.ncp-cur { opacity: 1; }

.ncp-journey .ncp-j-dot {
  display: block;
  width: 13px;
  height: 13px;
  margin: 0 auto 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: .45;
}

.ncp-journey .ncp-j-step.ncp-done .ncp-j-dot {
  background: #2e7d4f;
  border-color: #2e7d4f;
  opacity: 1;
}

.ncp-journey .ncp-j-step.ncp-cur .ncp-j-dot {
  background: #b8860b;
  border-color: #b8860b;
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(184, 134, 11, .18);
}

/* the connecting rail — drawn between dots, never before the first or after the last */
.ncp-journey .ncp-j-step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  opacity: .18;
}

.ncp-journey .ncp-j-step:first-child::before { display: none; }
.ncp-journey .ncp-j-step.ncp-done::before { background: #2e7d4f; opacity: .5; }

.ncp-journey .ncp-j-label { display: block; font-weight: 620; }
.ncp-journey .ncp-j-at { display: block; font-size: .88em; opacity: .6; margin-top: 1px; }

/* ── delivery ────────────────────────────────────────────────────────────── */
.ncp-journey .ncp-j-delivery {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .035);
  font-size: .92em;
}

/* ── items ───────────────────────────────────────────────────────────────── */
.ncp-journey .ncp-j-items { margin: 0 0 14px; padding: 0; list-style: none; }

.ncp-journey .ncp-j-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(0, 0, 0, .07);
  font-size: .92em;
}

.ncp-journey .ncp-j-item:first-child { border-top: none; }
.ncp-journey .ncp-j-item-name { font-weight: 600; }
.ncp-journey .ncp-j-qty { opacity: .6; font-weight: 500; }
.ncp-journey .ncp-j-item-opts { flex: 1 1 100%; font-size: .88em; opacity: .65; }

.ncp-journey .ncp-j-item-stage {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  font-size: .86em;
  font-weight: 650;
  white-space: nowrap;
}

.ncp-journey .ncp-j-item-stage.ncp-s-shipped,
.ncp-journey .ncp-j-item-stage.ncp-s-delivered {
  background: rgba(46, 125, 79, .13);
  color: #2e7d4f;
}

/* ── proof of delivery ───────────────────────────────────────────────────── */
.ncp-journey .ncp-j-pod {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 14px;
  padding: 11px 12px;
  border-radius: 8px;
  background: rgba(46, 125, 79, .08);
}

/* BR6 — the img is now wrapped in a link to the full-size proof, so the sizing applies to
   BOTH: the anchor is the flex child, the image fills it. 1.0.0 sized this rule for an
   image that had no url to load yet. */
.ncp-journey .ncp-j-pod-img,
.ncp-journey .ncp-j-pod-img img {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
  display: block;
}

/* The expiry disclosure. Quieter than the signee line — it is a caveat, not the news. */
.ncp-journey .ncp-j-pod-exp { opacity: .72; font-size: .92em; }

.ncp-journey .ncp-j-pod-t { display: flex; flex-direction: column; gap: 2px; font-size: .92em; }

/* ── notes ───────────────────────────────────────────────────────────────── */
.ncp-journey .ncp-j-notes { margin: 0; padding: 0; list-style: none; font-size: .9em; }

.ncp-journey .ncp-j-notes li {
  padding: 7px 0;
  border-top: 1px solid rgba(0, 0, 0, .07);
}

.ncp-journey .ncp-j-note-t { display: block; }

/* Dark themes: the neutral tints above invert to near-invisible, so lift them. */
@media (prefers-color-scheme: dark) {
  .ncp-journey { border-color: rgba(255, 255, 255, .16); }
  .ncp-journey .ncp-j-delivery,
  .ncp-journey .ncp-j-item-stage { background: rgba(255, 255, 255, .08); }
  .ncp-journey .ncp-j-item,
  .ncp-journey .ncp-j-notes li { border-top-color: rgba(255, 255, 255, .12); }
}

/* ══════════════════════════════════════════════════════════════════════════
   1.1.0 — JOURNEY v2: one CARD per shipment, a rollup over the order.
   Everything above still styles v1 documents, which are never re-minted and
   therefore never stop rendering. These rules are additive and scoped to
   .ncp-j2, so a v1 panel is byte-identical to what it was.
   ══════════════════════════════════════════════════════════════════════════ */

.ncp-journey.ncp-j2 .ncp-j2-rollup {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 12px; font-weight: 600;
}
.ncp-journey.ncp-j2 .ncp-j2-count { font-weight: 400; opacity: .7; font-size: .9em; }

.ncp-journey.ncp-j2 .ncp-j2-card {
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 12px;
}
.ncp-journey.ncp-j2 .ncp-j2-card:last-of-type { margin-bottom: 0; }

/* An interrupted delivery is the one thing on this page that should catch an eye. */
.ncp-journey.ncp-j2 .ncp-j2-exception { border-color: #F47C21; }
.ncp-journey.ncp-j2 .ncp-j2-alert { margin: 8px 0 0; color: #B45309; font-weight: 600; }

.ncp-journey.ncp-j2 .ncp-j2-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; font-size: .92em;
}
.ncp-journey.ncp-j2 .ncp-j2-seq { font-weight: 600; }
.ncp-journey.ncp-j2 .ncp-j2-profile {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .06); font-size: .88em; white-space: nowrap;
}

.ncp-journey.ncp-j2 .ncp-j2-when,
.ncp-journey.ncp-j2 .ncp-j2-track { margin: 8px 0 0; font-size: .92em; }
.ncp-journey.ncp-j2 .ncp-j2-carrier { opacity: .75; }
.ncp-journey.ncp-j2 .ncp-j2-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.ncp-journey.ncp-j2 .ncp-j2-unassigned { margin-top: 14px; }
.ncp-journey.ncp-j2 .ncp-j2-prep { margin: 0 0 6px; opacity: .8; }

/* The orders-LIST cell. Deliberately unstyled beyond inheriting the table's own
   type: it stands in a column Woo drew, and dressing it up would make one row
   look like a different kind of thing to every other row. */
.ncp-j2-liststatus { font-weight: 600; }

@media (prefers-color-scheme: dark) {
  .ncp-journey.ncp-j2 .ncp-j2-card { border-color: rgba(255, 255, 255, .16); }
  .ncp-journey.ncp-j2 .ncp-j2-profile { background: rgba(255, 255, 255, .1); }
  .ncp-journey.ncp-j2 .ncp-j2-alert { color: #FBBF24; }
}