/* Receipt page layer: shared by every block on the customer receipt page, the
   consent wall and the verify-identity page. Load after
   design-system/design-system.css and receipt/tokens.css.

   Use the design system's own classes first (.btn .btn-primary .btn-outline
   .btn-lg .btn-block, .badge .badge-success .badge-error .badge-default,
   .alert .alert-error .alert-info, .input, .form-label). The r- classes below
   exist only for what the design system has no class for, and are built from
   its tokens: no raw hex values in this file. Block-specific rules go in the
   block's own file (receipt/blocks.css, receipt/account.css). */

/* ── Page ── */
.receipt-page {
  background: var(--receipt-page-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.receipt-page #container,
.receipt-shell {
  width: 100%;
  max-width: var(--receipt-max-width);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4) var(--space-8);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--receipt-gap);
}
.receipt-page #invoice-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--receipt-gap);
}
.receipt-page #invoice-blocks > .invoice-block:empty { display: none; }

/* ── Type ── */
.r-display { font-family: var(--font-display); font-weight: var(--font-bold); line-height: 1.3; }
.r-h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); line-height: 1.35; }
.r-h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--font-bold); line-height: 1.4; }
.r-label { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-text-secondary); }
.r-muted { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; }
.r-count { font-size: 15px; font-weight: var(--font-medium); color: var(--color-text-secondary); }
.r-num { font-variant-numeric: tabular-nums; }
.r-ltr { direction: ltr; unicode-bidi: isolate; }

/* ── Cards ── */
.r-card {
  background: var(--receipt-card-bg);
  border-radius: var(--receipt-card-radius);
  padding: var(--space-5) var(--receipt-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-sizing: border-box;
  min-width: 0;
}
.r-card--hero { padding: var(--receipt-card-pad); gap: var(--space-4); box-shadow: var(--shadow-sm); }
.r-card--tight { padding: var(--space-4) var(--space-5); }
.r-card--center { align-items: center; text-align: center; }
.r-card--brand { background: var(--brand-900); color: var(--color-text-inverse); }
.r-card--brand .r-muted,
.r-card--brand .r-label { color: var(--brand-100); }

/* ── Money ── */
.r-amount { font-size: 44px; font-weight: var(--font-bold); line-height: 1.15; letter-spacing: -0.5px; }
.r-amount__currency { font-size: 26px; font-weight: var(--font-medium); }
.r-amount--refund { color: var(--color-error); }
.r-amount--void { color: var(--color-text-secondary); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ── Rows ── */
.r-divider { height: 1px; background: var(--receipt-divider); border: 0; margin: 0; }
.r-kv { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: 15px; }
.r-kv > :first-child { color: var(--color-text-secondary); }
.r-kv > :last-child { font-weight: var(--font-medium); text-align: end; overflow-wrap: anywhere; }
.r-kv--strong > :last-child { font-weight: var(--font-bold); }
.r-kv--success > :last-child { color: var(--color-success); }
/* auto-fit: a date or time never breaks mid-number («14/10/202» + «6», founder 2026-10-14); a cell that
   does not fit moves to the next row instead. */
.r-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--space-3); }
.r-meta strong.r-nowrap { white-space: nowrap; overflow-wrap: normal; }
.r-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r-meta strong { font-size: 15px; font-weight: var(--font-bold); overflow-wrap: anywhere; }
.r-total {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  margin-top: var(--space-1); padding: 14px var(--space-4);
  border-radius: var(--radius-lg); background: var(--receipt-accent-soft);
  font-size: 17px; font-weight: var(--font-bold);
}
.r-total--refund { background: var(--color-error-bg); color: var(--color-error); }

/* ── Badges: the design system's .badge, at receipt size ── */
.r-pill.badge { height: 30px; padding: 0 var(--space-3); font-size: 13px; font-weight: var(--font-bold); gap: 6px; border: 0; }
.r-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Buttons: the design system's .btn, at receipt size ── */
.receipt-page .btn,
.receipt-shell .btn { font-family: inherit; }
.r-btn.btn-lg { height: 52px; font-size: 17px; font-weight: var(--font-bold); border-radius: var(--radius-lg); }
.r-btn.btn-outline { height: 48px; font-size: var(--text-base); font-weight: var(--font-bold); }
.r-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--receipt-tap); padding: 0 14px;
  border-radius: var(--radius-full); border: var(--border-width-thin) solid var(--color-border-primary);
  background: var(--receipt-card-bg); color: var(--color-text-primary);
  font: inherit; font-size: 15px; font-weight: var(--font-medium);
  text-decoration: none; cursor: pointer;
}
.r-iconbtn {
  width: var(--receipt-tap); height: var(--receipt-tap);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); border: var(--border-width-thin) solid var(--color-border-primary);
  background: var(--receipt-card-bg); color: var(--color-text-primary); cursor: pointer;
}
.r-link { color: var(--color-text-link); font-weight: var(--font-medium); text-decoration: none; }
.r-link:hover { text-decoration: underline; }

/* ── Disclosure (Show details, Terms): a real <button aria-expanded> ── */
.r-disclosure {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 56px; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
}
.r-disclosure .r-icon--chevron { transition: transform var(--duration-fast) var(--ease-default); }
.r-disclosure[aria-expanded="true"] .r-icon--chevron { transform: rotate(180deg); }

/* ── Icons: inline SVG from _includes/icon.html ── */
.r-icon { width: 20px; height: 20px; flex-shrink: 0; }
.r-icon--sm { width: 16px; height: 16px; }
.r-icon--lg { width: 24px; height: 24px; }
[dir="rtl"] .r-icon--flip { transform: scaleX(-1); }
.r-icon-tile {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); background: var(--receipt-accent-soft); color: var(--color-accent);
}
.r-icon-tile--round { border-radius: var(--radius-full); }
.r-icon-tile--success { background: var(--color-success-bg); color: var(--color-success); }
.r-icon-tile--muted { background: var(--color-bg-tertiary); color: var(--color-text-primary); }

/* ── Notes and alerts ── */
.r-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px var(--space-4); border-radius: var(--radius-lg);
  background: var(--receipt-accent-soft); font-size: 13px; line-height: 1.6;
}
.r-note > .r-icon { color: var(--color-accent); }
.alert.r-alert { border-radius: var(--radius-lg); line-height: 1.6; }

/* ── Forms ── */
.r-field { display: flex; flex-direction: column; gap: 6px; }
.r-field > label { font-size: var(--text-sm); font-weight: var(--font-medium); }
.r-input.input { height: 52px; font-size: var(--text-base); border-radius: var(--radius-lg); }
.r-phone {
  display: flex; direction: ltr; height: 52px; overflow: hidden;
  border: 1.5px solid var(--color-border-primary); border-radius: var(--radius-lg);
  background: var(--receipt-card-bg);
}
.r-phone:focus-within { border-color: var(--color-border-focus); }
.r-phone__cc {
  display: flex; align-items: center; padding: 0 14px;
  background: var(--color-bg-primary); border-right: var(--border-width-thin) solid var(--color-border-primary);
  font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text-secondary);
}
.r-phone input { flex: 1; min-width: 0; border: 0; padding: 0 14px; font: inherit; font-size: 17px; letter-spacing: 1px; color: var(--color-text-primary); background: transparent; outline: none; }
.r-otp { display: flex; direction: ltr; gap: var(--space-3); justify-content: center; }
.r-otp input {
  width: 60px; height: 64px; box-sizing: border-box; text-align: center;
  border: 1.5px solid var(--color-border-primary); border-radius: 14px;
  font: inherit; font-size: 26px; font-weight: var(--font-bold); color: var(--color-text-primary);
}
.r-otp input:focus { border-color: var(--color-border-focus); outline: none; }
.r-otp--error input { border-color: var(--color-error); }
/* Re-consent card (a consent held on an older version of the policy). Two buttons of EQUAL weight; nothing pre-selected. */
.rw-reask {
  display: flex; flex-direction: column; gap: var(--space-2); text-align: start;
  padding: var(--space-3) 14px; border-radius: var(--radius-lg);
  border: var(--border-width-thin) solid var(--color-border-primary); background: var(--receipt-card-bg);
}
.rw-reask__title { margin: 0; font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-text-primary); }
.rw-reask__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.rw-reask__link { margin: 0; font-size: 14px; }
.rw-reask__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.rw-reask__btn { width: 100%; min-height: 48px; white-space: normal; line-height: 1.25; }
.rw-reask__btn[aria-pressed="true"] { border-width: 2px; }
.rw-reask__declined { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-secondary); }

.r-check {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) 14px; border-radius: var(--radius-lg);
  border: var(--border-width-thin) solid var(--color-border-primary); background: var(--receipt-card-bg);
  cursor: pointer;
}
.r-check input[type="checkbox"] { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--color-accent); }
.r-check__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; text-align: start; font-size: 15px; font-weight: var(--font-medium); }
.r-check__text small { font-size: var(--text-xs); font-weight: var(--font-normal); color: var(--color-text-secondary); line-height: 1.5; }

/* ── Bottom sheet (sign-up) ── */
.r-sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(18, 17, 59, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.r-sheet {
  width: 100%; max-width: var(--receipt-max-width); max-height: 92vh; overflow-y: auto;
  background: var(--receipt-card-bg); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: var(--space-3) var(--space-6) calc(var(--space-7) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-4);
  box-shadow: 0 -8px 24px rgba(18, 17, 59, 0.12);
  animation: r-sheet-in var(--duration-slow) var(--ease-out);
}
.r-sheet__grip { align-self: center; width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--color-border-primary); }
@keyframes r-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Focus and motion ── */
.receipt-page :focus-visible,
.receipt-shell :focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .r-sheet, .r-disclosure .r-icon--chevron { animation: none; transition: none; }
}

/* ── Package A blocks ── */
/* Shell, top bar, merchant header, summary and order cards, items and totals,
   payment card, store card, buyer card, footer, loader, back-to-top. Block
   specific classes are rx- (package A); r- classes above are shared. */

/* Blocks wrap in rows: an avatar directly followed by the header share one
   line (logo beside the name); every other block takes a full line. Blocks
   that rendered nothing but a script or style take no space. */
.receipt-page #invoice-blocks { flex-flow: row wrap; align-items: center; column-gap: var(--space-3_5); }
.receipt-page #invoice-blocks > .invoice-block { flex: 1 1 100%; min-width: 0; }
.receipt-page #invoice-blocks > .invoice-block:not(:has(> :not(script, style))) { display: none; }
.receipt-page #invoice-blocks > [data-token="avatar"]:has(+ [data-token="header"]) { flex: 0 0 auto; }
.receipt-page #invoice-blocks > [data-token="avatar"] + [data-token="header"] { flex: 1 1 0; }
.receipt-page .rx-card-title { margin: 0; font-size: var(--text-lg); font-weight: var(--font-bold); line-height: 1.4; }
.receipt-page .rx-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.receipt-page .rx-fine { margin: 0; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.6; }
.receipt-page .r-muted { margin: 0; }
.receipt-page .r-pill.badge-default { color: var(--color-text-primary); }
.receipt-page .rx-pill--method { font-weight: var(--font-medium); }
.receipt-page .rx-pill--brand { background: var(--receipt-accent-soft); color: var(--color-accent); }
.receipt-page .rx-pill--sm { height: 24px; padding: 0 var(--space-2); font-size: var(--text-xs); align-self: flex-start; }
.receipt-page .r-amount { margin: 0; }
.receipt-page hr.r-divider { margin: 0; border: 0; }

/* Currency: the page's own rendering (_includes/currency.html), an SVG sized to the text. */
.receipt-page .currency-icon { display: inline-flex; vertical-align: baseline; }
.receipt-page .currency-icon img { display: inline-block; width: auto; height: 0.8em; }
.receipt-page .r-amount__currency .currency-icon img { height: 0.62em; }

/* Top bar: download and language pills. */
.receipt-page .rx-topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 48px; }
.receipt-page .rx-topbar__pdf { padding: 0 var(--space-4); gap: var(--space-2); }
.receipt-page .rx-topbar__pdf .r-icon { color: var(--color-accent); }
.receipt-page .rx-topbar__pdf:hover { text-decoration: none; border-color: var(--color-accent); }
.receipt-page .language-toggle { border-radius: var(--radius-full); cursor: pointer; }
.receipt-page .rx-topbar__lang .r-icon { width: 18px; height: 18px; color: var(--color-text-secondary); }
.receipt-page .rx-topbar #languageLabel { display: none; }
html[lang="ar"] .rx-lang--ar,
html:not([lang="ar"]) .rx-lang--en { display: none; }

/* Merchant header: logo tile and name. */
.receipt-page .rx-logo {
  width: 56px; height: 56px; margin-inline-start: var(--space-1);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--radius-xl); border: var(--border-width-thin) solid var(--color-border-primary);
  background: var(--receipt-card-bg);
}
.receipt-page .rx-logo img { width: 100%; height: 100%; object-fit: contain; }
.receipt-page [data-token="avatar"]:not(:has(+ [data-token="header"])) .rx-logo { margin-inline: auto; }
.receipt-page .rx-merchant { display: flex; flex-direction: column; gap: var(--space-0_5); min-width: 0; padding: var(--space-1) var(--space-1) 0; }
.receipt-page .rx-merchant__name { margin: 0; font-size: var(--text-2xl); color: var(--color-text-primary); overflow-wrap: anywhere; }
html[lang="ar"] .rx-name--en,
html:not([lang="ar"]) .rx-name--ar { display: none; }
.receipt-page .rx-merchant__sub { margin: 0; font-size: 13px; color: var(--color-text-secondary); }

/* Summary card (order_details). */
.receipt-page .rx-summary__amount { display: flex; flex-direction: column; gap: var(--space-1); }
.receipt-page .rx-summary__label { font-size: 15px; font-weight: var(--font-medium); color: var(--color-text-secondary); }
.receipt-page .rx-summary__note { font-size: 15px; }
.receipt-page .rx-linkrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3_5) var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-bg-primary); color: var(--color-text-primary); text-decoration: none;
}
.receipt-page a.rx-linkrow:hover { text-decoration: none; background: var(--color-bg-tertiary); }
.receipt-page .rx-linkrow > .r-icon { color: var(--color-accent); }
.receipt-page .rx-linkrow__text { display: flex; flex-direction: column; gap: var(--space-0_5); min-width: 0; }
.receipt-page .rx-linkrow__text strong { font-size: 15px; }
.receipt-page .r-meta .r-label { font-size: var(--text-xs); }

/* Order card: order number, order type, cashier. */
.receipt-page .rx-summary + .rx-order { margin-top: var(--receipt-gap); }
.receipt-page .rx-order__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.receipt-page .rx-order__no { display: flex; flex-direction: column; gap: var(--space-0_5); }
.receipt-page .rx-order__num { font-size: 40px; font-weight: var(--font-bold); line-height: 1.1; }
.receipt-page .rx-order__hint { font-size: var(--text-sm); }

/* Items card. */
.receipt-page .rx-items { gap: var(--space-1); }
.receipt-page .rx-items__title { margin-bottom: var(--space-2); scroll-margin-top: 64px; }
.receipt-page .rx-item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: var(--border-width-thin) solid var(--receipt-divider); }
.receipt-page .rx-item__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.receipt-page .rx-item__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.receipt-page .rx-item__name { font-size: var(--text-base); font-weight: var(--font-medium); line-height: 1.4; overflow-wrap: anywhere; }
.receipt-page .rx-item__meta { font-size: 13px; color: var(--color-text-secondary); }
.receipt-page .rx-item__total { font-size: var(--text-base); font-weight: var(--font-bold); white-space: nowrap; }
/* Product photo (WAT-366): a 48 px tile on the start side of every row when any item has one; items without a photo
   keep a neutral tile so the rows line up. Tile colours are the page's own neutral-100 / neutral-200. */
.receipt-page .rx-item__row--img .rx-item__info { flex: 1 1 0; }
.receipt-page .rx-item__img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--color-bg-tertiary); border: var(--border-width-thin) solid var(--color-border-primary); overflow: hidden; box-sizing: border-box; }
.receipt-page .rx-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.receipt-page .rx-item__img--photo:not(.is-loaded) { background: linear-gradient(90deg, var(--color-bg-tertiary) 0, var(--color-border-primary) 50%, var(--color-bg-tertiary) 100%); background-size: 200% 100%; animation: rx-img-shimmer 1.2s linear infinite; }
@keyframes rx-img-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .receipt-page .rx-item__img--photo:not(.is-loaded) { animation: none; } }
.receipt-page .rx-nest-toggle {
  display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start;
  min-height: var(--receipt-tap); margin-block: calc(var(--space-2) * -1); padding: 0;
  font-size: 13px; font-weight: var(--font-medium); color: var(--color-text-link);
}
.receipt-page .rx-nest-toggle .r-icon { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform var(--duration-fast) var(--ease-default); }
[dir="rtl"] .receipt-page .rx-nest-toggle .r-icon { transform: rotate(90deg); }
.receipt-page .rx-nest-toggle[aria-expanded="true"] .r-icon { transform: none; }
.receipt-page .rx-nest {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border-inline-start: var(--border-width-md) solid var(--color-border-primary);
  background: var(--color-bg-primary); font-size: 14px;
}
.receipt-page .rx-nest[hidden] { display: none; }
.receipt-page .rx-nest--deep { margin-inline-start: var(--space-3); font-size: 13px; }
.receipt-page .rx-nest__line { display: flex; flex-direction: column; gap: var(--space-1); }
.receipt-page .rx-nest__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.receipt-page .rx-nest__name { min-width: 0; overflow-wrap: anywhere; }
.receipt-page .rx-nest__price { white-space: nowrap; color: var(--color-text-secondary); }
.receipt-page .rx-collapse { transition: height 280ms var(--ease-default, ease), opacity 280ms var(--ease-default, ease); will-change: height; }
.receipt-page .rx-items__more[hidden], .receipt-page .rb-live__extra[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .receipt-page .rx-collapse { transition: none; } }
.receipt-page .rx-morebtn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: var(--receipt-tap);
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-link);
}
.receipt-page .rx-morebtn .r-icon { width: 18px; height: 18px; transition: transform var(--duration-fast) var(--ease-default); }
.receipt-page .rx-morebtn[aria-expanded="true"] .r-icon { transform: rotate(180deg); }
.receipt-page .rx-totals { display: flex; flex-direction: column; gap: var(--space-2_5); padding-top: var(--space-3); }
.receipt-page .rx-totals .r-kv > :last-child { white-space: nowrap; }
.receipt-page .r-total > :last-child { white-space: nowrap; }
.receipt-page .rx-total--void > :last-child { color: var(--color-text-secondary); text-decoration: line-through; }
.receipt-page .rx-refund-note { margin-top: var(--receipt-gap); }

/* ZATCA QR (store card, or the items card when there is no store card). */
.receipt-page .rx-zatca { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.receipt-page .rx-zatca__qr {
  flex-shrink: 0; width: 168px; height: 168px; padding: var(--space-2); object-fit: contain;
  image-rendering: pixelated;
  border-radius: var(--radius-lg); border: var(--border-width-thin) solid var(--color-border-primary);
  background: var(--receipt-card-bg);
}
.receipt-page .rx-zatca__text { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); max-width: 280px; }
.receipt-page .rx-zatca__text strong { font-size: var(--text-sm); }
.receipt-page .rx-zatca__text .r-muted { font-size: var(--text-xs); line-height: 1.5; }
.receipt-page .rx-barcode { max-height: 72px; width: auto; margin-inline: auto; }

/* Payment card. */
.receipt-page .rx-pay__body { display: flex; flex-direction: column; gap: var(--space-3); }
.receipt-page .rx-pay__body[hidden] { display: none; }
.receipt-page .rx-pay .r-disclosure { min-height: var(--receipt-tap); }
.receipt-page .rx-pay .r-disclosure .r-icon { color: var(--color-text-secondary); }
.receipt-page .rx-method {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3_5) var(--space-4); border-radius: var(--radius-xl);
  border: var(--border-width-thin) solid var(--color-border-primary);
}
.receipt-page .rx-method__text { display: flex; flex-direction: column; gap: var(--space-0_5); flex-grow: 1; min-width: 0; font-size: 15px; }
.receipt-page .rx-method__sub { font-size: var(--text-xs); color: var(--color-text-secondary); }
.receipt-page .rx-method__amount { font-size: 15px; font-weight: var(--font-bold); white-space: nowrap; }
.receipt-page .rx-status { font-weight: var(--font-bold); }
.receipt-page .rx-status--paid { color: var(--color-success); }
.receipt-page .rx-status--refund { color: var(--color-error); }

/* Store card. The markup keeps <div class="branch-info card"> (tests read it),
   so this undoes the legacy and design-system .card looks. */
.receipt-page .branch-info.card {
  display: flex; flex-direction: column; gap: var(--space-3);
  min-width: 0; margin: 0; padding: var(--space-5) var(--receipt-card-pad);
  border: 0; border-radius: var(--receipt-card-radius); box-shadow: none; overflow: visible;
}
.receipt-page .branch-info.card h2 { display: block; padding: 0; border: 0; color: var(--color-text-primary); }
.receipt-page .branch-info .r-kv { font-size: var(--text-sm); }
.receipt-page .rx-store__more { display: flex; flex-direction: column; gap: var(--space-3); }
.receipt-page .rx-store__more[hidden] { display: none; }

/* Footer. */
.receipt-page .rx-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-1) 0; font-size: 13px; color: var(--color-text-secondary); }
.receipt-page .rx-footer__brand { display: flex; align-items: center; gap: var(--space-2); }
.receipt-page .rx-footer__brand img { width: 28px; height: 28px; object-fit: contain; }
.receipt-page .rx-footer .r-link { display: inline-flex; align-items: center; min-height: var(--receipt-tap); padding-inline: var(--space-2); margin-inline-end: calc(var(--space-2) * -1); font-size: 13px; }

/* Loader overlay: a skeleton of the receipt, covering the page until the DOM is ready.
   Both languages are in the markup; <html lang> (set before first paint) picks one. */
.invoice-loader-overlay {
  position: fixed; inset: 0; z-index: var(--z-max); overflow: hidden;
  background: var(--receipt-page-bg);
  /* Failsafe: the receipt underneath is server-rendered, so if a script fails the overlay still leaves after 6 s. */
  animation: rx-loader-failsafe .3s ease 6s forwards;
}
@keyframes rx-loader-failsafe { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .invoice-loader-overlay { animation-duration: 1ms; } }
.rx-skel { max-width: var(--receipt-max-width); margin-inline: auto; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.rx-skel__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; }
.rx-skel__title { margin: var(--space-2) 0 0; font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-text-primary); }
.rx-skel__sub { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
html[lang="ar"] .rx-skel__en, html:not([lang="ar"]) .rx-skel__ar { display: none; }
.rx-skel__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border-radius: var(--receipt-card-radius); background: var(--receipt-card-bg); box-shadow: var(--shadow-sm); }
.rx-skel__pills, .rx-skel__meta, .rx-skel__row { display: flex; gap: var(--space-3); width: 100%; }
.rx-skel__row { align-items: center; justify-content: space-between; padding-block: var(--space-2); }
.sk { display: block; flex: none; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.sk--line { height: 14px; border-radius: var(--radius-full); }
.sk--w30 { width: 30%; } .sk--w40 { width: 40%; } .sk--w45 { width: 45%; } .sk--w50 { width: 50%; } .sk--w55 { width: 55%; }
.sk--amount { width: 62%; height: 56px; border-radius: var(--radius-lg); }
.sk--pill { width: 84px; height: 34px; border-radius: var(--radius-full); }
.sk--meta { flex: 1 1 0; height: 40px; }
.sk--tag { width: 64px; height: 22px; border-radius: var(--radius-full); }
.sk--total { width: 100%; height: 48px; border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* Back to top (main-script shows it after 100px of scroll). */
.receipt-page .rx-totop {
  position: fixed; inset-inline-end: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky); display: none;
  width: var(--receipt-tap); height: var(--receipt-tap); border-radius: var(--radius-full);
  border: var(--border-width-thin) solid var(--color-border-primary);
  background: var(--receipt-card-bg); color: var(--color-text-primary); box-shadow: var(--shadow-md);
}
.receipt-page .rx-totop .r-icon { margin: auto; transform: rotate(180deg); }

/* The sign-up sheet (#registerCustomerModal) is the only thing that takes
   input while body.modal-open freezes the page behind it. */
/* No position: fixed here: it scrolls the page back to the top every time
   the sheet opens. overflow: hidden plus overscroll-behavior keeps the page
   where the customer left it. */
body.modal-open { overflow: hidden !important; }
body.modal-open .r-sheet { overscroll-behavior: contain; }
body.modal-open #container,
body.modal-open #container * { pointer-events: none !important; }
body.modal-open #registerCustomerModal,
body.modal-open #registerCustomerModal * { pointer-events: auto !important; }

/* ── Package T: toasts (main-script.html's window.showReceiptToast) ──
   The design system's .alert, floated at the top, stacked 8px apart, each with its kind's icon
   and a dismiss button. The variants' tints are translucent, so each sits on the card colour to
   stay readable over the page. */
.r-toasts {
  position: fixed; top: var(--space-4); inset-inline: var(--space-4); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: var(--receipt-max-width); margin-inline: auto; pointer-events: none;
}
.alert.r-toast { display: flex; align-items: center; gap: var(--space-3); margin: 0; border-radius: var(--radius-lg); line-height: 1.6; background-color: var(--receipt-card-bg); box-shadow: var(--shadow-md); pointer-events: auto; animation: r-toast-in 0.2s ease-out; }
.r-toast__icon { flex: none; width: 20px; height: 20px; }
.r-toast__text { flex: 1 1 auto; min-width: 0; }
.r-toast__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-block: -4px; margin-inline-end: -6px; border: 0; border-radius: var(--radius-full); background: transparent; color: inherit; cursor: pointer; opacity: 0.75; }
.r-toast__close:hover { opacity: 1; }
.alert-success.r-toast { background-image: linear-gradient(var(--color-success-bg), var(--color-success-bg)); }
.alert-error.r-toast { background-image: linear-gradient(var(--color-error-bg), var(--color-error-bg)); }
.alert-info.r-toast { background-image: linear-gradient(var(--color-info-bg), var(--color-info-bg)); }
@keyframes r-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .alert.r-toast { animation: none; } }

/* ── Package T: the printed receipt's "Check again", shown once polling stops ── */
.rb-pdf #rbPdfRecheck[hidden] { display: none; }

/* The privacy policy drawn by js/policy-blocks.js inside .policy-content-box (receipt sheet and verify page). */
.policy-content-box.pb-plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.policy-content-box h2, .policy-content-box h3, .policy-content-box h4 { line-height: 1.4; color: var(--color-text-primary); }
.policy-content-box > :first-child { margin-top: 0; }
.policy-content-box hr { border: 0; border-top: var(--border-width-thin, 1px) solid var(--color-border-secondary); margin: var(--space-3) 0; }
.policy-content-box a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.policy-content-box ul { list-style: disc; }
.policy-content-box ol { list-style: decimal; }
.policy-content-box ul, .policy-content-box ol { margin: 0 0 var(--space-2); padding-inline-start: var(--space-5); }
.policy-content-box li { margin-bottom: var(--space-1, 4px); }
.pb-table-wrap { overflow-x: auto; margin: 0 0 var(--space-3); -webkit-overflow-scrolling: touch; }
.pb-table { width: 100%; border-collapse: collapse; font-size: inherit; }
.pb-table th, .pb-table td { padding: var(--space-2) var(--space-2); border: var(--border-width-thin, 1px) solid var(--color-border-secondary); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.pb-table th { background: var(--color-bg-tertiary); font-weight: var(--font-bold, 700); }
/* Narrow screens: a table with a header becomes one card per row, each cell labelled by its column. */
@media (max-width: 560px) {
  .pb-table--stack, .pb-table--stack tbody, .pb-table--stack tr, .pb-table--stack td { display: block; width: 100%; box-sizing: border-box; }
  .pb-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pb-table--stack tr { margin-bottom: var(--space-2); border: var(--border-width-thin, 1px) solid var(--color-border-secondary); border-radius: var(--radius-md, 8px); overflow: hidden; }
  .pb-table--stack td { border: 0; border-bottom: var(--border-width-thin, 1px) solid var(--color-border-secondary); }
  .pb-table--stack td:last-child { border-bottom: 0; }
  .pb-table--stack td[data-label]::before { content: attr(data-label); display: block; font-weight: var(--font-bold, 700); color: var(--color-text-secondary); font-size: 0.9em; }
}

/* ── Merchant logo, any shape (docs/merchant-logo-shapes.md) ──────────────────────────────────────────────────────
   _includes/merchant-logo.html: .mlogo (the plate) > .mlogo__box (a box of the TRIMMED content's aspect ratio) > img.
   The image is never cropped or squashed: it is placed whole inside the box, offset by the trim (--mlogo-iw/ih/ix/iy,
   main/logo_shape.style_vars) so transparent and white margins fall outside the box. The shape class picks the box:
   square 0.8-1.25 (a tile), wide >1.25 (a wordmark: capped height AND width), tall <0.8 (capped height). A disc gets a
   round plate. The plate is its own light surface, so the logo reads the same whatever the page theme; a light logo on
   transparency gets a dark plate; a logo that carries its own background gets none. */
.mlogo {
  --mlogo-pad: 6px; --mlogo-sq: 44px; --mlogo-wh: 40px; --mlogo-ww: 180px; --mlogo-th: 64px; --mlogo-rd: 56px;
  --mlogo-plate: #fff; --mlogo-line: var(--color-border-primary);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; max-width: 100%;
  padding: var(--mlogo-pad); overflow: hidden; vertical-align: middle;
  border-radius: var(--radius-xl); border: var(--border-width-thin) solid var(--mlogo-line); background: var(--mlogo-plate);
}
.mlogo__box { position: relative; display: block; overflow: hidden; aspect-ratio: var(--mlogo-ar, 1); max-width: 100%; }
.mlogo .mlogo__box .mlogo__img {
  position: absolute; display: block; max-width: none; object-fit: fill;
  width: var(--mlogo-iw, 100%); height: var(--mlogo-ih, 100%); left: var(--mlogo-ix, 0); top: var(--mlogo-iy, 0);
}
.mlogo--square .mlogo__box { width: calc(var(--mlogo-sq) * min(1, var(--mlogo-ar, 1))); }
.mlogo--wide .mlogo__box { width: min(var(--mlogo-ww), calc(var(--mlogo-wh) * var(--mlogo-ar, 3))); }
.mlogo--tall .mlogo__box { height: var(--mlogo-th); width: calc(var(--mlogo-th) * var(--mlogo-ar, 0.5)); }
.mlogo--wide { --mlogo-padx: calc(var(--mlogo-pad) + 4px); padding-inline: var(--mlogo-padx); }
.mlogo--round { padding: 0; border-radius: 50%; }
.mlogo--round .mlogo__box { width: calc(var(--mlogo-rd) * min(1, var(--mlogo-ar, 1))); height: auto; border-radius: 50%; }
.mlogo--plate-dark { --mlogo-plate: #1f2937; --mlogo-line: #1f2937; }
.mlogo--plate-self { padding: 0; --mlogo-line: transparent; --mlogo-plate: transparent; }
.mlogo--plate-self.mlogo--wide { padding: 0; }

/* Where it is drawn (box sizes; the plate adds its padding: square = a 56 / 44 / 40 tile). */
.mlogo--head { --mlogo-pad: 6px; --mlogo-sq: 44px; --mlogo-wh: 40px; --mlogo-ww: 180px; --mlogo-th: 64px; --mlogo-rd: 56px; }
.mlogo--card { --mlogo-pad: 5px; --mlogo-sq: 34px; --mlogo-wh: 26px; --mlogo-ww: 110px; --mlogo-th: 40px; --mlogo-rd: 44px; border-radius: var(--radius-lg); }
.mlogo--tile { --mlogo-pad: 5px; --mlogo-sq: 34px; --mlogo-wh: 26px; --mlogo-ww: 96px; --mlogo-th: 40px; --mlogo-rd: 44px; border-radius: var(--radius-lg); }
.mlogo--bar  { --mlogo-pad: 4px; --mlogo-sq: 32px; --mlogo-wh: 30px; --mlogo-ww: 140px; --mlogo-th: 40px; --mlogo-rd: 40px; border-radius: var(--radius-lg); }
.mlogo--foot { --mlogo-pad: 3px; --mlogo-sq: 22px; --mlogo-wh: 16px; --mlogo-ww: 84px; --mlogo-th: 26px; --mlogo-rd: 28px; border-radius: var(--radius-md, 8px); }
.mlogo--round.mlogo--card, .mlogo--round.mlogo--tile, .mlogo--round.mlogo--bar, .mlogo--round.mlogo--foot { border-radius: 50%; }

/* The receipt header: the logo takes its own line when it is a wordmark; a shaped logo has no tile of its own around it. */
.receipt-page .rx-logo--shaped { width: auto; height: auto; border: 0; border-radius: 0; background: none; overflow: visible; display: flex; justify-content: flex-start; }
.receipt-page #invoice-blocks > [data-token="avatar"]:has(.mlogo--wide) { flex: 1 1 100%; }
.receipt-page #invoice-blocks > [data-token="avatar"]:has(.mlogo--wide) .rx-logo { margin-inline: var(--space-1) auto; }
.receipt-page #invoice-blocks > [data-token="avatar"]:has(.mlogo--wide) + [data-token="header"] { flex: 1 1 100%; }
.receipt-page .rx-footer__brand .mlogo { margin: 0; }
.ls2-head .mlogo { align-self: center; }