/* Booking receipt riff (static/js/booking-receipt.js). Runs once per booking, ~2.3s.
   Keyframes adapted from the Figma riff: button press → progress fill → label swap →
   thermal slip printed upward in stepped jerks → slight tilt → check-mark draw. */
.br-dialog {
  position: fixed;
  inset: 0;
  margin: auto !important; /* the theme resets dialog margins, which pinned it top-left */
  height: fit-content;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 20px 20px 18px;
  border: 0;
  border-radius: 24px;
  background: #ece8e1;
  color: #111;
  overflow: auto;
  font-family: 'Ubuntu', system-ui, sans-serif;
}
.br-dialog::backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); }
html[data-theme="dark"] .br-dialog { background: #1b2232; }

.br-stage { position: relative; display: grid; justify-items: center; padding-top: 8px; }
.br-slot { position: relative; width: 320px; max-width: 100%; padding: 14px 10px 0; overflow: hidden; z-index: 1; }
.br-dialog.br-done .br-slot, .br-dialog.br-calm .br-slot { overflow: visible; }

/* ── the paper ── */
.br-paper {
  position: relative;
  margin: 0 auto;
  padding: 26px 22px 18px;
  background: #fdfcf7;
  color: #111;
  font-family: 'Ubuntu Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
  /* serrated top edge, like torn thermal paper */
  -webkit-mask: radial-gradient(6px at 50% 0, #0000 98%, #000) top / 12px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 51% no-repeat;
  mask: radial-gradient(6px at 50% 0, #0000 98%, #000) top / 12px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 51% no-repeat;
  transform-origin: 50% 100%;
  opacity: 0;
}
.br-icon { display: block; width: 46px; height: 46px; margin: 0 auto 6px; filter: grayscale(1) contrast(1.2); }
.br-brand { margin: 0; text-align: center; font: 700 19px/1.2 inherit; font-family: inherit; letter-spacing: 0.22em; }
.br-sub { margin: 2px 0 12px; text-align: center; color: #6b6b6b; font-size: 10px; letter-spacing: 0.12em; }
.br-paper hr { border: 0; border-top: 1px dashed #bdbdbd; margin: 10px 0; }
.br-row { display: flex; justify-content: space-between; gap: 12px; margin: 3px 0; }
.br-row span:first-child { color: #6b6b6b; flex: 0 0 auto; }
.br-row .br-val { text-align: right; overflow-wrap: anywhere; }
.br-muted { color: #6b6b6b; font-size: 10.5px; }
.br-line { margin: 3px 0; }
.br-line.is-title { font-weight: 700; font-size: 13px; }
.br-status { font-size: 15px; font-weight: 700; color: #111; }
.br-status span:first-child { color: #111; }
.br-note { margin: 6px 0 12px; color: #6b6b6b; font-size: 10.5px; }
.br-barcode { display: block; width: 180px; height: 40px; margin: 0 auto; color: #111; }
.br-foot { margin: 8px 0 0; text-align: center; color: #6b6b6b; font-size: 10px; letter-spacing: 0.14em; }

/* paper crumbs when it tears off */
.br-crumb { position: absolute; bottom: -2px; width: 8px; height: 8px; background: #fdfcf7; opacity: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.br-crumb.c1 { left: 30%; } .br-crumb.c2 { left: 52%; } .br-crumb.c3 { left: 70%; }

/* ── the button (printer slot) ── */
.br-button {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 300px; max-width: 100%;
  height: 64px;
  margin-top: -6px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-weight: 600;
  font-size: 19px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.br-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #15803d; }
.br-label { position: absolute; display: inline-flex; align-items: center; gap: 8px; transition: none; }
.br-label svg { width: 20px; height: 20px; }
.br-l2, .br-l3 { transform: translateY(64px); }
.br-check { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ── run ── */
.br-run .br-button { animation: br-press 0.5s cubic-bezier(.34, 1.32, .64, 1) 0.1s both; }
.br-run .br-progress { animation: br-fill 0.8s cubic-bezier(.65, 0, .25, 1) 0.35s both; }
.br-run .br-l1 { animation: br-out 0.35s cubic-bezier(.22, 1, .36, 1) 0.35s both; }
.br-run .br-l2 { animation: br-in-out 1.35s cubic-bezier(.22, 1, .36, 1) 0.45s both; }
.br-run .br-l3 { animation: br-in 0.4s cubic-bezier(.34, 1.32, .64, 1) 1.75s both; }
.br-run .br-check { animation: br-draw 0.35s cubic-bezier(.65, 0, .35, 1) 2s both; }
.br-run .br-paper { animation: br-print 1.5s linear 0.55s both; }
.br-done .br-paper { opacity: 1; transform: translateY(0) rotate(-1.5deg); }

@keyframes br-press { 0% { transform: scale(1); } 30% { transform: scale(0.965); } 100% { transform: scale(1); } }
@keyframes br-fill { from { width: 0; } to { width: 100%; } }
@keyframes br-out { to { transform: translateY(-64px); } }
@keyframes br-in-out { 0% { transform: translateY(64px); } 18% { transform: translateY(0); } 82% { transform: translateY(0); } 100% { transform: translateY(-64px); } }
@keyframes br-in { from { transform: translateY(64px); } to { transform: translateY(0); } }
@keyframes br-draw { to { stroke-dashoffset: 0; } }
/* thermal printer: stepped pushes upward, then a little settle and tilt */
@keyframes br-print {
  0%   { opacity: 1; transform: translateY(100%); }
  10%  { transform: translateY(86%); } 16% { transform: translateY(86%); }
  26%  { transform: translateY(70%); } 32% { transform: translateY(70%); }
  42%  { transform: translateY(54%); } 48% { transform: translateY(54%); }
  58%  { transform: translateY(38%); } 64% { transform: translateY(38%); }
  74%  { transform: translateY(20%); } 80% { transform: translateY(20%); }
  90%  { transform: translateY(-1%) rotate(-0.4deg); }
  100% { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
}

/* ── actions ── */
.br-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.br-done .br-actions { opacity: 1; transform: none; }
.br-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 1px solid #cfc9bd; border-radius: 999px; background: #fff; color: #111; font: 600 14px 'Ubuntu', system-ui, sans-serif;
  text-decoration: none; cursor: pointer;
}
.br-btn--wa { background: #25d366; border-color: #25d366; color: #052e16; }
.br-btn--ghost { background: transparent; }
.br-help { margin: 10px 0 0; text-align: center; font-size: 12px; color: #4b5563; }
html[data-theme="dark"] .br-help { color: #a8b4c7; }
html[data-theme="dark"] .br-btn:not(.br-btn--wa) { background: #111a2c; border-color: #2a3850; color: #e8edf5; }

/* reduced motion / Simple view: final state immediately */
.br-calm .br-paper { opacity: 1; transform: rotate(-1.5deg); animation: none !important; }
.br-calm .br-l1, .br-calm .br-l2 { display: none; }
.br-calm .br-l3 { transform: none; animation: none !important; }
.br-calm .br-check { stroke-dashoffset: 0; animation: none !important; }
.br-calm .br-progress { width: 100%; animation: none !important; }
.br-calm .br-actions { opacity: 1; transform: none; }

/* Save receipt → print just the slip */
@media print {
  html.br-printing body > *:not(.br-dialog) { display: none !important; }
  html.br-printing .br-dialog { position: static; display: block; box-shadow: none; background: #fff; max-height: none; }
  html.br-printing .br-dialog::backdrop { display: none; }
  html.br-printing .br-button, html.br-printing .br-actions, html.br-printing .br-help { display: none !important; }
  html.br-printing .br-paper { opacity: 1 !important; transform: none !important; box-shadow: none; -webkit-mask: none; mask: none; border: 1px solid #ddd; }
  html.br-printing .br-slot { height: auto; }
}