/* ═══════════════════════════════════════════════════════════
   order-history — Figma component 2312:16089
   Type=Shipping (2312:16088, "Riwayat Kiriman" in front) ⇄
   Type=Transaction (2312:16087, "Riwayat Transaksi" in front),
   stacked as a .flip-card (asset/components/flip-card/).
   Front tilt −3°, back +4°, both faces full size. Pose numbers are
   measured from the variants inside the 472×552 component box; each
   face carries its own --front-* / --back-* in index.html.
   JS (order-history.js): live search, copy-resi feedback.
═══════════════════════════════════════════════════════════ */

.order-history {
  --flip-w: 472px;
  --flip-h: 552px;
  --face-w: 402.25px;          /* 354.81 content + 2 × 23.72 padding */
  --front-r: -3deg;
  --back-r: 4deg;
  --flip-swing: 60px;          /* stays inside the What panel's side margin */
}

/* Card shell — white, 1px #e6e6e6 (inside), r-21.74, p-23.72, gap-23.72.
   Fixed heights as drawn: the list below is clipped like the app screen. */
.oh-card {
  display: flex;
  flex-direction: column;
  gap: 23.72px;
  height: 500.6px;
  padding: 22.72px;
  background: var(--white, #fff);
  border: 1px solid #e6e6e6;
  border-radius: 21.743px;
  overflow: hidden;
}
.flip-card-face[data-face="transaksi"] .oh-card { height: 493.7px; }

/* Top bar — py-9.88 around a 23.72 title box (43.5 tall); Public Sans Bold 19.77 */
.oh-topbar { padding: 9.883px 0; flex-shrink: 0; }
.oh-title {
  font-family: var(--font);
  font-size: 19.77px;
  font-weight: 700;
  line-height: 23.72px;        /* Figma: 19.77/19.77 text centred in an h-23.72 box */
  color: #202939;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Search — 1.977px #e6e6e6 (inside), r-6, px-11.86 py-13.84, gap-11.86 */
.oh-search {
  display: flex;
  align-items: center;
  gap: 11.86px;
  flex-shrink: 0;
  padding: 11.86px 9.883px;
  background: var(--white, #fff);
  border: 1.977px solid #e6e6e6;
  border-radius: 6px;
  cursor: text;
  transition: border-color 0.15s;
}
.oh-search:focus-within { border-color: var(--primary, #3f8be7); }
.oh-search-icon { display: block; width: 19.767px; height: 19.767px; flex-shrink: 0; }
.oh-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 19.767px;            /* inputs ignore line-height → 47.44 box as drawn */
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 13.84px;
  font-weight: 500;
  line-height: 19.767px;
  color: #202939;
  -webkit-appearance: none;
  appearance: none;
}
.oh-search-input::placeholder { color: #b9bbc0; opacity: 1; }
.oh-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Result count + list — gap-7.9; cards gap-15.8. The results area
   fills the rest of the card and clips at its content box, so nothing
   creeps into the card's bottom padding (Figma shows exactly 2 cards). */
.oh-results {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 7.907px;
  min-height: 0;
  margin: 0 -6px;              /* room for the cards' drop shadow… */
  padding: 0 6px;              /* …without moving them */
  overflow: hidden;
}
.oh-count {
  font-family: 'Inter', var(--font);
  font-size: 13.837px;
  font-weight: 600;
  line-height: 19.767px;
  color: #62676f;
  white-space: nowrap;
}
.oh-list {
  display: flex;
  flex-direction: column;
  gap: 15.813px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.oh-list > li[hidden] { display: none; }
/* Idle list shows the two cards Figma draws; the rest surface by search */
.oh-list:not(.is-filtering) > li[data-oh-item]:nth-of-type(n+3) { display: none; }

/* ── Riwayat Kiriman card — "Card Riwayat Paket" ───────── */
/* .988px #e6e6e6 (inside), r-6, p-11.86, gap-15.8, drop shadow 0 3.95 1.98 */
.oh-ship {
  display: flex;
  flex-direction: column;
  gap: 15.813px;
  padding: 10.872px;
  background: var(--white, #fff);
  border: 0.988px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 3.953px 1.977px rgba(0, 0, 0, 0.1);
}
.oh-ship-head,
.oh-ship-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Status tag — h-23.72, px-7.9, r-6, Inter Medium 11.86 */
.oh-tag {
  display: inline-flex;
  align-items: center;
  height: 23.72px;
  padding: 0 6.919px;
  border: 0.988px solid;
  border-radius: 6px;
  font-family: 'Inter', var(--font);
  font-size: 11.86px;
  font-weight: 500;
  line-height: 19.767px;
  white-space: nowrap;
}
.oh-tag--done   { background: #ddebe3; border-color: #00ab4f; color: #007837; }  /* Context Success */
.oh-tag--pickup { background: #d1e4f5; border-color: #238ced; color: #0f64b2; }  /* Context Info */

/* "Resi: …" + copy — Public Sans SemiBold 11.86 #62676f, gap-1.98 */
.oh-resi {
  display: flex;
  align-items: center;
  gap: 1.977px;
  font-family: var(--font);
  font-size: 11.86px;
  font-weight: 600;
  line-height: 17.79px;
  color: #62676f;
  white-space: nowrap;
}
.oh-copy {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 15.813px;
  height: 15.813px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.oh-copy img { display: block; width: 100%; height: 100%; }
.oh-copy:focus-visible { outline: 2px solid var(--primary, #3f8be7); outline-offset: 2px; }
/* Copied: icon gives way to a check, a "Disalin" chip floats above */
.oh-copy-done {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: #00ab4f;
}
.oh-copy.is-copied img { visibility: hidden; }
.oh-copy.is-copied .oh-copy-done { display: flex; }
.oh-copy::after {
  content: "Disalin";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  padding: 2px 6px;
  border-radius: 4px;
  background: #202939;
  color: #fff;
  font-family: 'Inter', var(--font);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 3px);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.oh-copy.is-copied::after { opacity: 1; transform: translate(-50%, 0); }

/* Sender → receiver, with the dashed connector and date in between */
.oh-route {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.oh-route-row {
  display: flex;
  align-items: center;
  gap: 7.907px;
}
.oh-route-row--date { width: 176.91px; }
.oh-route-icon { display: flex; padding: 3.953px; flex-shrink: 0; }
.oh-route-icon img { display: block; width: 15.813px; height: 15.813px; }
.oh-route-icon--in img { transform: scaleY(-1); }      /* Figma flips the same arrow */
.oh-route-connector { display: block; width: 23.72px; height: 23.72px; flex-shrink: 0; }
.oh-route-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  font-size: 11.86px;
  font-weight: 600;
  line-height: 17.79px;
  color: #202939;
}
.oh-route-date {
  font-family: var(--font);
  font-size: 9.88px;
  font-weight: 500;
  line-height: 15.813px;
  color: #9699a0;
  white-space: nowrap;
}

/* Courier logo tile — .988px #e6e6e6, p-3.95, r-6 → 47.44×39.53 inner */
.oh-courier {
  flex-shrink: 0;
  padding: 2.965px;
  background: var(--white, #fff);
  border: 0.988px solid #e6e6e6;
  border-radius: 6px;
}
.oh-courier-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47.44px;
  height: 39.533px;
  border-radius: 4px;
  background: var(--white, #fff);
}
.oh-courier-logo img { display: block; }
.oh-courier-logo .is-idexpress { width: 43.351px; height: 29.868px; }
.oh-courier-logo .is-jne       { width: 46.802px; height: 19.55px; }
.oh-courier-logo .is-sicepat   { width: 44px; height: 11.91px; }      /* 62.79×17 logo, fitted */

/* ── Riwayat Transaksi card — "Card Transaksi" ─────────── */
/* white, r-4, p-12, gap-8, drop shadow 0 2 6 */
.oh-trx {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--white, #fff);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.oh-trx-head,
.oh-trx-top,
.oh-trx-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oh-trx-date,
.oh-trx-number {
  font-family: 'Inter', var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: #202939;
  white-space: nowrap;
}
/* "Berhasil" — Tag Kecil: w-64, px-8 py-2, 1px #00ab4f, Inter Medium 10/16 */
.oh-tag-sm {
  display: inline-flex;
  justify-content: center;
  width: 64px;
  padding: 1px 7px;
  background: #ddebe3;
  border: 1px solid #00ab4f;
  border-radius: 6px;
  font-family: 'Inter', var(--font);
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  color: #007837;
  white-space: nowrap;
}
/* 1px #e6e6e6 rule on a zero-height row */
.oh-trx-divider { display: block; width: 100%; height: 1px; margin: -0.5px 0; }

.oh-trx-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.oh-trx-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.oh-trx-icon img { display: block; width: 24px; height: 24px; }
.oh-trx-icon .is-bpjs { width: 17.03px; height: 20px; }   /* Figma insets 8.33% / 14.33% / 8.34% / 14.71% */
.oh-trx-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oh-trx-name-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.oh-trx-name,
.oh-trx-price {
  font-family: 'Inter', var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #202939;
  white-space: nowrap;
}
.oh-trx-price { color: var(--primary, #3f8be7); }
.oh-trx-chevron { display: block; width: 12px; height: 12px; flex-shrink: 0; }

/* "Beli Lagi" — w-88, px-12 py-4, 1px #79b4f2, primary, Inter SemiBold 12/16. Demo only. */
.oh-buy {
  width: 88px;
  padding: 3px 11px;
  background: var(--primary, #3f8be7);
  border: 1px solid #79b4f2;
  border-radius: 6px;
  font-family: 'Inter', var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--white, #fff);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.oh-buy:hover  { background: var(--primary-dark, #2f78d1); }
.oh-buy:active { transform: scale(0.96); }
.oh-buy:focus-visible { outline: 2px solid var(--primary, #3f8be7); outline-offset: 2px; }

/* Nothing matches the search */
.oh-empty {
  padding: 24px 0;
  font-family: 'Inter', var(--font);
  font-size: 13px;
  line-height: 20px;
  color: #9699a0;
  text-align: center;
}