/* ═══════════════════════════════════════════════════════════
   payment-commission — Figma component 2300:10294
   Type=Shipping (2300:10293) ⇄ Type=PPOB (2300:10292), stacked as a
   .flip-card. Read-only receipts. Card chrome (.mock-card / -head /
   .mock-btn) comes from style.css's How block.
═══════════════════════════════════════════════════════════ */

/* A block followed by its dashed rule — Figma: flex-col gap-24 */
.pc-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* Dashed rule — Figma "Vector 27/28", 343×1, #b9bbc0 */
.pc-dash {
  display: block;
  width: 343px;
  height: 1px;
}

/* "Detail Pengiriman / Pesanan" block — Figma: flex-col gap-16 */
.pc-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Subtitle 2/14-Semibold (Public Sans 14/20) + 20px icon, gap 8 */
.pc-detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #202939;
}
.pc-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* akar-icons:receipt: Figma insets the 16.75px glyph inside its 20px box */
.pc-icon--receipt { position: relative; }
.pc-icon--receipt img {
  position: absolute;
  left: 1.625px;
  top: 1.625px;
  width: 16.75px;
  height: 16.75px;
}

/* Bordered detail box — Figma: 1px #e6e6e6, r-4, p-12 (stroke inside, so 11 + 1) */
.pc-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 11px;
  background: var(--white, #fff);
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}
.pc-box--shipping { height: 108px; justify-content: center; }

/* Courier row — logo 62.79×17, name Inter SemiBold 14/20 #545454, price primary */
.pc-courier {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Inter', var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.pc-courier-logo { display: block; width: 62.79px; height: 17px; flex-shrink: 0; }
.pc-courier-name { flex: 1 1 auto; color: #545454; }
.pc-courier-price { color: var(--primary, #3f8be7); white-space: nowrap; }

.pc-thin-divider { display: block; width: 100%; height: 0.5px; }

/* .Atom-Content — Inter 12/20 #545454, value SemiBold */
.pc-meta {
  display: flex;
  align-items: center;
  font-family: 'Inter', var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #545454;
}
.pc-meta span { flex: 1 1 auto; }
.pc-meta b { font-weight: 600; white-space: nowrap; }

/* PPOB order rows — Inter 12/20 #202939, values right-aligned (165 wide on
   the two long rows, so "Internet Bulanan OMG 75rb 30 hari" wraps as drawn) */
.pc-row {
  display: flex;
  align-items: center;
  font-family: 'Inter', var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #202939;
}
.pc-row > span { flex: 1 1 0; min-width: 0; }
.pc-row > span:last-child { text-align: right; }
.pc-row > .pc-row-wide { flex: 0 0 165px; }

/* Cost lines — Public Sans 12/20 #202939, gap 8; Komisi Agen bold on Shipping */
.pc-costs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.pc-cost {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #202939;
}
.pc-cost span:first-child { flex: 1 1 auto; }
.pc-cost span:last-child { white-space: nowrap; text-align: right; }
.pc-cost--bold { font-weight: 700; }

/* "Total Ditagihkan" is a read-only summary bar styled as the Figma button */
.pc-total { cursor: default; }