/* "Bayar dahulu" box, receipt (customer page) and the tablet note. Green = success only. */
.pp-box { margin: 14px 0 4px; padding: 14px; border: 1px solid #d9d9d9; border-radius: 12px; }
.pp-title { margin: 0 0 6px; font-size: 1rem; font-weight: 800; }
.pp-amount { margin: 0 0 10px; font-size: 1.6rem; font-weight: 800; }
.pp-qr { display: block; width: 200px; max-width: 70%; height: auto; margin: 0 auto 12px; border-radius: 8px; }
.pp-qr-ph { display: flex; align-items: center; justify-content: center; width: 200px; max-width: 70%; aspect-ratio: 1; margin: 0 auto 12px; padding: 12px; box-sizing: border-box; background: #eee; color: #666; border-radius: 8px; text-align: center; font-size: .85rem; }
.pp-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #eee; }
.pp-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pp-row small { display: block; color: #666; }
.pp-copy { flex: none; padding: 6px 12px; min-height: 44px; }
.pp-note { margin: 10px 0; color: #444; font-size: .9rem; }
.pp-wait { margin: 10px 0 0; color: #666; }
.pp-or { margin: 10px 0 0; color: #666; font-size: .85rem; text-align: center; }
.pp-receipt h2 { margin-top: 0; }
.pp-receipt dl { margin: 0 0 12px; }
.pp-receipt .pp-row strong { flex: none; }
.pos-prepay-note { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: #fff3c4; color: #5c4400; font-weight: 600; }
.pos-prepay-hint { margin-top: 8px; color: #666; font-size: .85rem; }
.pp-policy { background: #FFF6DD; border: 1px solid var(--yellow); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 14px; }

.op-status-card :focus-visible, .op-item :focus-visible, .op-sheet :focus-visible, .pp-box :focus-visible { outline-color: var(--green); }