/* Receipt sheet (P3): a paper-like preview of the PDF and the plain text that goes to WhatsApp. From the approved
   demo's receipts.css, plus the «عُدّل بعد الإصدار» notice. Only the :root tokens from app.css. */

/* «عُدّل بعد الإصدار» with «إصدار إيصال جديد», at the top of the sheet. */
.receipt-stale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
}

.receipt-stale-text {
  font-size: 16px;
  font-weight: 900;
}

.receipt-stale .btn {
  flex-shrink: 0;
}

.receipt-preview {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}

.receipt-paper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1240 / 1754;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.receipt-paper img {
  display: block;
  width: 100%;
  height: 100%;
}

.receipt-wait {
  padding: 16px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.receipt-paper[aria-busy='true'] .receipt-wait {
  animation: receipt-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes receipt-pulse {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}

.receipt-text {
  margin: 0 0 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.receipt-text-title {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.receipt-text-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The sheet's buttons. «تحميل PDF» takes the whole first row. «مشاركة» (only where the browser can share
   files), «إرسال نص واتساب» and «لاحقًا» keep their natural width, so no label breaks onto two lines; they
   sit side by side while they fit and stretch to fill their row. On a 360px phone that is two or three
   tidy rows; on a wide screen the three sit on one row under «تحميل PDF». */
.sheet-actions .btn.receipt-main-btn {
  flex: 1 1 100%;
}

.sheet-actions .btn.receipt-share-btn,
.sheet-actions .btn.receipt-text-btn,
.sheet-actions .btn.receipt-later-btn {
  flex: 1 1 auto;
}

.receipt-ask {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 15px;
}

.receipt-chooser .receipt-phone {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .receipt-paper[aria-busy='true'] .receipt-wait {
    animation: none;
  }
}