/* oz-receipt.css — the order card, and the paper that feeds out of it.
 *
 * Owner, 23 Sep 2026: «عايز اعمل انيميشن حلو زي ده كدا واحلى كمان بعد الحجز
 * والدفع». The shape is a thermal printer: a dark order card with its status,
 * and a strip of light paper rolling down out from under it.
 *
 * THE FEED IS A HEIGHT ANIMATION ON A CLIPPED SLOT, not a transform on the
 * paper. A `translateY` inside `overflow:hidden` moves the paper past a fixed
 * window, so the page under it never makes room and the buttons below sit on
 * top of the receipt for the whole 1.5 seconds. Growing the slot pushes the
 * page down exactly as a real printer pushes paper out, and it ends at the
 * paper's own measured height — see the note on `full` in oz-receipt.js.
 *
 * LINEAR, on purpose. Easing is how a designer says "a hand moved this". A
 * motor does not accelerate into its stop.
 */

.rx { --rx-paper: #F4F3EE; --rx-ink: #141B2C; margin: 4px 0 2px; }

/* ---- the order card ---------------------------------------------------- */
.rx-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: start;
  position: relative;
  z-index: 2;
}
.rx-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rx-card-t { min-width: 0; }
.rx-card-t b { display: block; font-size: 15.5px; font-weight: 800; }
.rx-card-t span { display: block; color: var(--lo, #8A97AE); font-size: 13px; margin-top: 2px; }
.rx-card-a { text-align: end; flex: 0 0 auto; }
.rx-card-a span { display: block; color: var(--lo, #8A97AE); font-size: 11.5px; letter-spacing: 1px; }
.rx-card-a b {
  display: block; font-size: 18px; font-weight: 800;
  font-family: 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* the status line, with its own small spinner */
.rx-stat {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--mid, #B7C2D6); font-size: 13.5px; font-weight: 700;
}
.rx-spin {
  width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: var(--cyan, #34E0F0);
  animation: rx-turn .75s linear infinite;
}
@keyframes rx-turn { to { transform: rotate(360deg); } }
/* Settled. The ring becomes a tick — the same mark, filled in, rather than a
   different icon swapped in underneath the reader. */
.rx-stat.ok { color: var(--green, #3BE0A0); }
.rx-stat.ok .rx-spin {
  animation: none; border-color: var(--green, #3BE0A0);
  background: var(--green, #3BE0A0);
  -webkit-mask: var(--rx-tick) center/9px 9px no-repeat; mask: var(--rx-tick) center/9px 9px no-repeat;
}
.rx { --rx-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4L4.4 10 11 2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---- the slot the paper comes out of ----------------------------------- */
.rx-slot { overflow: hidden; height: 0; }
.rx-feed { padding: 0 10px; }

/* ---- the paper --------------------------------------------------------- */
.rx-paper {
  background: var(--rx-paper);
  color: var(--rx-ink);
  margin: 0 auto;
  max-width: 300px;
  padding: 16px 18px 20px;
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: start;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  /* THE TORN BOTTOM EDGE. A mask of repeating triangles, so the paper ends the
     way a receipt ends and not with a ruled line. Its top corners stay square:
     paper does not come off a roll with rounded corners. */
  -webkit-mask: var(--rx-tear); mask: var(--rx-tear);
}
.rx {
  --rx-tear:
    linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7' viewBox='0 0 16 7'%3E%3Cpath d='M0 0h16v1L8 7 0 1z' fill='%23000'/%3E%3C/svg%3E") bottom left/16px 7px repeat-x;
}
/* Arabic in Cairo: a page marks it on the body (booking) or on the root (the
   Cashier app), and monospace Arabic prints stretched letter by letter. */
body.ar .rx-paper, html[dir="rtl"] .rx-paper { font-family: 'Cairo', ui-monospace, monospace; }
/* THE PAPER'S OWN INK, whatever it sits in. A sheet paints bold text white
   (.ozd-body b in oz-ui.js), and on this light paper every value vanished:
   the end-of-day report showed its labels and none of its numbers. */
.rx .rx-paper b, .rx .rx-paper strong { color: inherit; }

/* ---- the till's paper (24 Sep 2026): the same parts, on screen ---------- */
.rx-vline { font-size: 11px; opacity: .72; line-height: 1.45; }
.rx-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 3px 0; }
.rx-iname { display: flex; flex-direction: column; min-width: 0; }
.rx-iname span { font-weight: 700; }
.rx-iname small { font-size: 11px; opacity: .65; }
.rx-item b { font-weight: 700; white-space: nowrap; }
.rx-pays { margin-top: 4px; }
.rx-qr { text-align: center; margin-top: 12px; }
.rx-qr svg { display: block; margin: 0 auto; width: 112px; height: 112px; }
.rx-qr span { display: block; font-size: 11px; opacity: .7; margin-top: 4px; }
.rx-foot { white-space: pre-line; }
.rx-paper.rx-w58 { max-width: 220px; font-size: 11.5px; padding: 12px 10px 16px; }

.rx-head { text-align: center; margin-bottom: 10px; }
.rx-mark { display: flex; justify-content: center; }
.rx-brand {
  font-family: 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 900; letter-spacing: 2.5px; font-size: 14px; margin-top: 5px;
}
.rx-kind { font-size: 11px; opacity: .65; letter-spacing: 1px; margin-top: 1px; }
.rx-rule { border-top: 1px dashed var(--rx-ink); opacity: .35; margin: 9px 0; }

.rx-meta, .rx-row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
.rx-meta span, .rx-row span { opacity: .7; min-width: 0; }
.rx-meta b, .rx-row b { font-weight: 700; white-space: nowrap; }
/* As on paper (PRINT_CSS in oz-receipt.js): a long meta value wraps inside the
   paper instead of stretching it past the roll's width. */
.rx-meta b { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.rx-row.dim { opacity: .68; }
.rx-row.inc b { font-size: 11.5px; letter-spacing: .5px; opacity: .8; }
.rx-row.tot {
  font-size: 15px; font-weight: 800; padding-top: 4px;
  font-family: 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
body.ar .rx-row.tot, html[dir="rtl"] .rx-row.tot { font-family: 'Cairo', sans-serif; }
.rx-sec { font-weight: 800; font-size: 11.5px; letter-spacing: .5px; margin: 0 0 3px; }
.rx-note { font-size: 10.5px; opacity: .65; margin-top: 8px; line-height: 1.5; }

.rx-code { text-align: center; margin-top: 14px; }
.rx-code .rx-bars { display: block; margin: 0 auto; width: 88%; height: 42px; }
.rx-code span { display: block; font-size: 11px; letter-spacing: 3px; margin-top: 4px; opacity: .8; }
.rx-foot { text-align: center; font-size: 10.5px; opacity: .6; margin-top: 10px; }

/* ---- the quieter levels ------------------------------------------------ */
/* LESS: no feed, the paper arrives. OFF: it is simply there, styled by the
   slot's height being auto before anything runs. Neither loses a word of it. */
.rx.rx-fade .rx-paper { animation: rx-in .38s ease-out both; }
@keyframes rx-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.rx[data-motion="off"] .rx-spin { animation: none; }

/* ---- print ------------------------------------------------------------- */
/* Should anything ever print THIS page rather than the module's own iframe,
   the receipt is what comes out and the app around it does not. */
@media print {
  body * { visibility: hidden; }
  .rx-paper, .rx-paper * { visibility: visible; }
  .rx-slot { height: auto !important; overflow: visible !important; }
  .rx-paper { position: absolute; inset-inline-start: 0; top: 0; box-shadow: none; -webkit-mask: none; mask: none; }
}