/* ═══════════════════════════════════════════════════════════
   selling-price — Figma component 2314:17792
   Type=PPOB (2314:17791, Harga Produk + Fee in front) ⇄
   Type=Kiriman (2314:17790, Ongkir + Asuransi + Fee in front),
   stacked as a .flip-card (asset/components/flip-card/).
   Front tilt −3°, back +4°; the PPOB variant draws its back card at
   0.935 (that face's --back-s). Card heights follow their content.
   JS (selling-price.js): the price input recomputes fee + total.
═══════════════════════════════════════════════════════════ */

.selling-price {
  --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;
}

/* Card shell — white, 1px #e6e6e6 (inside), r-21.74, p-23.72, gap-23.72 */
.sp-card {
  display: flex;
  flex-direction: column;
  gap: 23.72px;
  padding: 22.72px;
  background: var(--white, #fff);
  border: 1px solid #e6e6e6;
  border-radius: 21.743px;
  overflow: hidden;
}

/* Top bar — py-9.88 around a 23.72 title box (43.5 tall); Public Sans Bold 19.77 */
.sp-topbar { padding: 9.883px 0; }
.sp-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;
}

/* Price input — 2px #e6e6e6 (inside), r-6, px-12 py-14, gap-12 → 48 tall */
.sp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-input-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  background: var(--white, #fff);
  border: 2px solid #e6e6e6;
  border-radius: 6px;
  cursor: text;
  transition: border-color 0.15s;
}
.sp-input-box:focus-within { border-color: var(--primary, #3f8be7); }
.sp-input-box.is-invalid   { border-color: #ff5630; }
.sp-rp { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.sp-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;                /* inputs ignore line-height → 48 box as drawn */
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #202939;
}
.sp-input::placeholder { color: #b9bbc0; opacity: 1; }
/* Shown only while the price is under the base cost */
.sp-hint {
  font-family: 'Inter', var(--font);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #b71d18;
}
.sp-hint[hidden] { display: none; }

/* "Detail Transaksi" — Inter Bold 16/20, gap-20; rows Inter 14 / 15, gap-12 */
.sp-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sp-detail-title {
  font-family: 'Inter', var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: #202939;
}
.sp-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-family: 'Inter', var(--font);
  font-weight: 400;
  color: #202939;
  white-space: nowrap;
}
.sp-row > :first-child { font-size: 14px; line-height: 20px; }
.sp-row > :last-child  { font-size: 15px; line-height: 20px; text-align: right; }
.sp-row--total { font-weight: 700; }
/* Dashed rule on a zero-height row (Figma Vector 40/41) */
.sp-dash { display: block; width: 100%; height: 1px; margin: -0.5px 0; }

/* "Cetak Bukti Bayar" — #238ced, h-40, r-4, Inter Bold 18/16. Demo only. */
.sp-print {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  background: #238ced;
  border: 0;
  border-radius: 4px;
  font-family: 'Inter', var(--font);
  font-size: 18px;
  font-weight: 700;
  line-height: 16px;
  color: var(--white, #fff);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.sp-print:hover  { background: #1b7bd4; }
.sp-print:active { transform: scale(0.98); }
.sp-print:focus-visible { outline: 2px solid var(--primary, #3f8be7); outline-offset: 2px; }
.sp-print.is-busy { cursor: progress; }
.sp-print.is-done { background: #00ab4f; }