/* ------------------------------------------------------------------
   On-screen receipt printer (vanilla port of the ReceiptPrinter component).
   Stages: processing → printing (stepped paper feed) → complete.
------------------------------------------------------------------- */
.rp-tray {
  position: fixed; inset: 0; z-index: 2050; display: none;
  background: rgba(15, 23, 28, .45); backdrop-filter: blur(3px);
  overflow-y: auto; padding: 32px 16px 40px;
}
.rp-tray.open { display: block; animation: rpFade .18s cubic-bezier(.23,1,.32,1); }
@keyframes rpFade { from { opacity: 0; } to { opacity: 1; } }
.rp-tray-head { max-width: 1100px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; }
.rp-tray-head h5 { margin: 0; font-weight: 700; display: flex; gap: .6rem; align-items: center; }
.rp-tray-head .sub { font-size: .85rem; opacity: .75; }
.rp-grid { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: flex-start; max-width: 1100px; margin: 0 auto; }

.rp-root { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 360px; }

/* machine body */
.rp-machine {
  --rp-radius: 24px; --rp-inset: 12px;
  position: relative; isolation: isolate; width: 100%; overflow: hidden;
  border-radius: var(--rp-radius); border: 1px solid #0b0f12;
  background: linear-gradient(180deg, #2a3136 0%, #1c2226 100%);
  padding: var(--rp-inset); padding-bottom: 32px;
  box-shadow: 0 20px 36px -20px rgba(0,0,0,.55), 0 6px 14px -8px rgba(0,0,0,.25),
              inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.55);
}
.rp-machine::before { /* plastic texture */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.rp-slot { /* paper slot */
  position: absolute; left: 24px; right: 24px; bottom: var(--rp-inset); z-index: 40; height: 8px; border-radius: 4px;
  background: #050708; border: 1px solid #050708; box-shadow: inset 0 2px 3px #000;
}
.rp-header { position: relative; z-index: 10; display: flex; align-items: flex-start; justify-content: space-between; height: 40px; gap: 8px; padding: 0 2px; }
.rp-status { display: flex; align-items: center; gap: 8px; min-width: 0; color: #aeb8be; font-size: 12px; font-weight: 600; line-height: 1; padding-top: 4px; }
.rp-status .rp-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: rpLabel .18s cubic-bezier(.23,1,.32,1); }
@keyframes rpLabel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rp-ind { width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0; }
.rp-spin { width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid rgba(174,184,190,.3); border-top-color: #aeb8be; animation: rpSpin .7s linear infinite; }
@keyframes rpSpin { to { transform: rotate(360deg); } }
.rp-ind i { font-size: 18px; animation: rpPop .16s cubic-bezier(.23,1,.32,1); }
@keyframes rpPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.rp-led { display: flex; align-items: center; gap: 6px; color: #7d8a91; font-size: 11px; font-weight: 600; padding-top: 4px; white-space: nowrap; }
.rp-led::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.rp-root[data-stage="complete"] .rp-led::before { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.rp-root[data-result="failed"] .rp-led::before { background: #ef4444; box-shadow: 0 0 8px #ef4444; }

.rp-screen { /* dark display */
  position: relative; z-index: 10; isolation: isolate; overflow: hidden;
  border-radius: calc(var(--rp-radius) - var(--rp-inset)); border: 1px solid #050708;
  background: #0b0f12; color: #e8eef0; padding: 14px 16px; box-shadow: inset 0 2px 6px rgba(0,0,0,.8);
}
.rp-screen::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 24px 4px rgba(0,0,0,.52); }
.rp-screen .rp-station { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5eead4; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.rp-screen .rp-title { font-size: 17px; font-weight: 700; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-screen .rp-addr { font-size: 11px; color: #7d8a91; margin-top: 2px; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* paper output */
.rp-output { position: relative; z-index: 50; margin-top: -16px; width: calc(80% + 48px); max-width: 100%; overflow: hidden; padding: 0 24px; }
.rp-output .rp-shadow { position: absolute; left: 24px; right: 24px; top: -4px; z-index: 20; height: 8px; background: rgba(0,0,0,.75); filter: blur(6px); pointer-events: none; display: none; }
.rp-root:not([data-stage="processing"]) .rp-shadow { display: block; }
.rp-feed { position: relative; isolation: isolate; opacity: 0; transform: translateY(calc(-100% + 2px)); transition: opacity .16s cubic-bezier(.23,1,.32,1); }
.rp-feed::before { content: ""; position: absolute; left: 12px; right: 12px; top: 12px; bottom: 16px; z-index: 0; border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.24); pointer-events: none; }
.rp-root[data-stage="printing"] .rp-feed { opacity: 1; animation: rpFeed var(--rp-dur, 1.75s) linear forwards; }
.rp-root[data-stage="complete"] .rp-feed { opacity: 1; transform: translateY(0); }
@keyframes rpFeed {
  0% { transform: translateY(calc(-100% + 2px)); } 7.5% { transform: translateY(-91%); } 10.5% { transform: translateY(-91%); }
  18% { transform: translateY(-81%); } 21% { transform: translateY(-81%); } 28.5% { transform: translateY(-70%); }
  31.5% { transform: translateY(-70%); } 39% { transform: translateY(-58%); } 42% { transform: translateY(-58%); }
  49.5% { transform: translateY(-45%); } 52.5% { transform: translateY(-45%); } 60% { transform: translateY(-32%); }
  63% { transform: translateY(-32%); } 70.5% { transform: translateY(-20%); } 73.5% { transform: translateY(-20%); }
  81% { transform: translateY(-10%); } 84% { transform: translateY(-10%); } 91.5% { transform: translateY(-3%); }
  94.5% { transform: translateY(-3%); } 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rp-root[data-stage="printing"] .rp-feed { animation: none; transform: none; }
  .rp-spin { animation: none; }
}
.rp-paper {
  position: relative; z-index: 10; min-height: 200px; padding: 26px 20px 30px;
  background: #fffefb linear-gradient(180deg, rgba(0,0,0,.025), transparent 40px);
  color: #1b1f22; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.45;
  clip-path: var(--rp-teeth);
}
.rp-paper .l { white-space: pre-wrap; word-break: break-word; }
.rp-paper .c { text-align: center; } .rp-paper .r { text-align: right; }
.rp-paper .b { font-weight: 700; }
.rp-paper .lg { font-size: 1.32em; font-weight: 700; line-height: 1.3; }
.rp-paper .rw { display: flex; justify-content: space-between; gap: 10px; }
.rp-paper .rw span:last-child { text-align: right; white-space: nowrap; }
.rp-paper .hr { border-top: 1px dashed #4a5258; margin: 6px 0; }
.rp-paper .hr.dbl { border-top: 3px double #1b1f22; }
.rp-paper .feed { height: 10px; }

/* result card under each printer */
.rp-result { margin-top: 14px; width: 100%; border-radius: 12px; padding: 10px 12px; font-size: 13px; display: none; gap: 8px; align-items: flex-start; }
.rp-root[data-stage="complete"] .rp-result { display: flex; animation: rpLabel .2s ease; }
.rp-result.ok { background: #dcfce7; color: #14532d; } .rp-result.screen { background: #fef3c7; color: #78350f; }
.rp-result.failed { background: #fee2e2; color: #7f1d1d; }
.rp-result i { font-size: 16px; margin-top: 1px; }
.rp-result .btn { padding: 2px 10px; font-size: 12px; }
.rp-tray-head h5 { color: #fff; font-size: 1.15rem; }
.rp-tray-head .sub { color: #d6e4e2; }
.rp-paper .rw span:first-child { min-width: 0; }