/* Account blocks owned by package C: save receipt / create account card,
   sign-up sheet, loyalty stamps. Built on receipt.css and design-system
   classes and tokens; no raw hex. */

/* ── Shared ── */
.ra-sr,
.ls-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ra-fine { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-secondary); }
.ra-fine--center { text-align: center; }
.r-card--brand .ra-fine,
.r-card--brand .ls-fine { color: var(--brand-100); }
.r-card--brand :focus-visible { outline-color: var(--color-text-inverse); }

.ra-btn-light.btn {
  height: 50px; font-size: var(--text-base);
  background: var(--receipt-card-bg); color: var(--color-text-primary); border-color: transparent;
}
.ra-btn-light.btn:hover:not(:disabled) { background: var(--brand-50); }
/* Long labels (English, large text settings) wrap inside the button rather than spill out. */
.ra-save .btn,
.ra-sheet .btn,
.ls-card .btn { padding-inline: var(--space-4); white-space: normal; line-height: 1.25; text-align: center; }

.ra-benefits,
.ls-benefits {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--brand-50);
}
.ra-benefits li,
.ls-benefits li { display: flex; align-items: center; gap: var(--space-2); }
.ra-benefits .r-icon,
.ls-benefits .r-icon { color: var(--brand-300); stroke-width: 3; }

/* A request in flight: the button keeps its size and shows a spinner. */
.ra-sheet .btn[aria-busy="true"]::before,
.ra-save .btn[aria-busy="true"]::before {
  content: ""; width: 16px; height: 16px; box-sizing: border-box; flex-shrink: 0;
  border-radius: var(--radius-full); border: var(--border-width-md) solid currentColor;
  border-inline-end-color: transparent;
  animation: ra-spin var(--duration-slower) linear infinite;
}
@keyframes ra-spin { to { transform: rotate(360deg); } }

/* ── Save card: guest invitation ── */
.ra-invite { padding: var(--space-5) var(--space-6); gap: var(--space-3_5); }
.ra-invite__head,
.ls-head { display: flex; flex-direction: column; gap: var(--space-1); }
.ra-invite h2,
.ls-card--guest h2 { color: inherit; }
.ra-invite .r-label,
.ls-card--guest .r-label { font-size: 13px; }
/* The stamp card already carries the same sign-up (FlowGuest): show one
   invitation, not two. The save block's button and sheet stay in the page;
   the stamp card's button opens them. */
#invoice-blocks:has(.ls-card--guest) .invoice-block:has(> .ra-save--guest) { display: contents; }
#invoice-blocks:has(.ls-card--guest) .ra-save--guest { display: none; }

/* ── Save card: saved, and save-now (SaveStates, Main) ── */
/* Icon + text on one row; the app link gets its own full-width row under them so the
   title never squeezes into a narrow column on a phone (founder, 2026-10-14). */
.ra-saved { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.ra-saved:focus { outline: none; }
.ra-saved__text { display: flex; flex-direction: column; gap: var(--space-0_5); flex: 1; min-width: 0; }
.ra-saved__title { margin: 0; font-size: 15px; font-weight: var(--font-bold); line-height: 1.4; }
.ra-saved__body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }
.ra-saved__link,
.ra-center-link {
  display: inline-flex; align-items: center; min-height: var(--receipt-tap);
  font-size: var(--text-sm); white-space: nowrap;
}
.ra-center-link { align-self: center; white-space: normal; text-align: center; }
.ra-saved .ra-saved__link {
  flex: 1 0 100%; justify-content: center;
  margin-top: var(--space-1); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-primary);
}
.ra-masked { white-space: nowrap; }
.ra-savenow { gap: var(--space-3_5); }
.ra-savenow__head { display: flex; align-items: center; gap: var(--space-3); }

/* main-script.html's own success markup (auto-save, conflict) until it
   renders the card above: same compact card. */
.ra-save > .save-invoice-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--receipt-card-bg); border-radius: var(--receipt-card-radius);
}
.ra-save .card-header { padding: 0; border: 0; }
.ra-save > .save-invoice-card h3 { margin: 0; font-size: 15px; font-weight: var(--font-bold); }
.ra-save .card-description:empty { display: none; }
.ra-save .card-description { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }
.ra-save .card-button {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--receipt-tap);
  color: var(--color-text-link); font-size: var(--text-sm); font-weight: var(--font-medium); text-decoration: none;
}
.ra-save .card-button i { display: none; }
.ra-save .receipt-count-badge { font-size: var(--text-xs); color: var(--color-text-secondary); }

/* ── Sign-up sheet (FlowPhone, FlowCode, FlowErrors, FlowDone) ── */
#registerCustomerModal .hidden,
#registerCustomerModal [hidden] { display: none !important; }
.ra-sheet { position: relative; }

/* The keyboard (2026-10-14). The page's viewport meta asks Chrome/Android to resize the layout for the
   keyboard (interactive-widget=resizes-content); where the keyboard is laid over the page instead
   (iOS Safari, older Chrome), the sheet script sets --ra-kb (keyboard height over the layout bottom)
   and --ra-vvh (visible height) from window.visualViewport. The sheet stays above the keyboard,
   never taller than what is visible, and scrolls inside itself; the buttons stick to its bottom. */
#registerCustomerModal { bottom: var(--ra-kb, 0px); }
#registerCustomerModal .r-sheet { max-height: 92vh; overscroll-behavior: contain; padding-bottom: 0; }
@supports (max-height: 100dvh) {
  #registerCustomerModal .r-sheet { max-height: calc(var(--ra-vvh, 100dvh) - var(--space-4)); }
}
/* The sheet's bottom padding moves into a last flex item, so a stuck button sits on the sheet's
   (= the keyboard's) edge with nothing scrolling out beneath it. Same space as before: gap + this. */
#registerCustomerModal .r-sheet::after {
  content: ""; flex: 0 0 auto;
  height: calc(var(--space-7) - var(--space-4) + env(safe-area-inset-bottom));
}
#registerCustomerModal .ra-actions {
  position: sticky; bottom: 0; z-index: 1;
  margin-block: calc(-1 * var(--space-2)); padding-block: var(--space-2) max(var(--space-2), env(safe-area-inset-bottom));
  background: var(--receipt-card-bg);
}
.ra-sheet__close {
  position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3);
  border: 0; background: transparent; color: var(--color-text-secondary);
}
.ra-step { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.ra-sheet__head { display: flex; flex-direction: column; gap: var(--space-1); padding-inline-end: var(--receipt-tap); }
.ra-sheet__title { font-size: 22px; }
.ra-sheet__head .r-muted { margin: 0; }
.ra-phone-shown { font-weight: var(--font-bold); color: var(--color-text-primary); }
.ra-actions { display: flex; flex-direction: column; gap: var(--space-3); }

.r-phone:has(.ra-field--error) { border-color: var(--color-error); }

.ra-consents { display: flex; flex-direction: column; gap: var(--space-2); }
.ra-consents .r-check a { text-decoration: underline; text-underline-offset: 2px; }
.ra-policy { border: var(--border-width-thin) solid var(--color-border-primary); border-radius: var(--radius-lg); overflow: hidden; }
.ra-policy .policy-viewer-header {
  padding: var(--space-2) var(--space-3); background: var(--color-bg-tertiary);
  font-size: var(--text-sm); font-weight: var(--font-medium);
}
.ra-policy .policy-content-box {
  max-height: 240px; overflow-y: auto; padding: var(--space-3);
  font-size: 13px; line-height: 1.7; color: var(--color-text-secondary);
}

/* One field for the whole code: autofill and paste stay reliable. */
.ra-code {
  align-self: center; width: 100%; max-width: 18rem; height: 64px; box-sizing: border-box;
  padding: 0; padding-inline-start: 0.5em;
  border: 1.5px solid var(--color-border-primary); border-radius: var(--radius-xl);
  background: var(--receipt-card-bg); color: var(--color-text-primary);
  font: inherit; font-size: 28px; font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums; letter-spacing: 0.5em; text-align: center;
}
/* design-system reset.css right-aligns every input under [dir="rtl"];
   the phone number and the code are LTR numbers. */
.ra-sheet .r-phone input { text-align: start; }
.ra-sheet .ra-code { text-align: center; }
.ra-code::placeholder { color: var(--color-text-tertiary); }
.ra-code:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px var(--receipt-accent-soft); }
.ra-code:disabled { background: var(--color-bg-tertiary); }
.ra-code.ra-field--error { border-color: var(--color-error); }

.ra-resend-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.ra-countdown { color: var(--color-text-secondary); }
.ra-textbtn {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--receipt-tap);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-link);
}
.ra-textbtn:disabled { color: var(--color-text-secondary); cursor: default; }
.ra-back { align-self: flex-start; margin-block: calc(var(--space-3) * -1); }

.ra-error.alert {
  margin: 0; padding: var(--space-3) var(--space-3_5);
  background: var(--color-error-bg); color: var(--color-error); border-color: transparent;
}
.ra-error .alert-body { display: flex; flex-direction: column; gap: var(--space-0_5); }
.ra-error p { margin: 0; }
.ra-error__title { font-weight: var(--font-bold); }
.ra-error__title:empty { display: none; }

.ra-done { align-items: center; text-align: center; gap: var(--space-2); padding-block: var(--space-4) var(--space-2); }
.ra-done__icon { width: 56px; height: 56px; margin-block-end: var(--space-2); }
.ra-done .r-muted { margin: 0; }

/* ── Loyalty stamps (Stamps*) ── */
.loyalty-stamps-block { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.ls-card { gap: var(--space-3_5); }
.ls-card--guest { padding: var(--space-5) var(--space-6); }
.ls-panel { padding: var(--space-3); border-radius: var(--radius-xl); background: var(--receipt-card-bg); }
.ls-headrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-3); }
.ls-remaining { margin: 0; font-size: var(--text-base); font-weight: var(--font-medium); }
.ls-fine { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-secondary); }

/* Dots scale to stamps_required, up to 10 a row (--ls-cols set inline). */
.ls-dots {
  display: grid; grid-template-columns: repeat(var(--ls-cols, 8), minmax(0, 36px));
  justify-content: center; gap: var(--space-1_5);
}
.ls-dot {
  aspect-ratio: 1; box-sizing: border-box; border-radius: var(--radius-full);
  border: var(--border-width-md) dashed var(--neutral-400);
  display: flex; align-items: center; justify-content: center;
}
.ls-dot.on { border: 0; background: var(--color-accent); color: var(--color-accent-text); }
.ls-dot .r-icon { width: 50%; height: 50%; stroke-width: 3; }
/* The merchant's own stamp mark (Portal «شكل الختم»): a round white slot, the mark drawn whole inside it (contain) —
   full strength when stamped, a ghost when empty. The slot is white on purpose: black line art stays readable on any
   card tint and in any theme. */
.ls-dot--ico { position: relative; overflow: hidden; background: #fff; border: var(--border-width-md) dashed var(--neutral-300, #d4d4d8); }
.ls-dot--ico.on { border: var(--border-width-md) solid var(--color-accent); background: #fff; }
.ls-dot--ico .ls-ico { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; opacity: 0.15; filter: grayscale(1); }
.ls-dot--ico.on .ls-ico { opacity: 1; filter: none; }
.ls-dot--fresh {
  box-shadow: 0 0 0 3px var(--receipt-card-bg), 0 0 0 5px var(--brand-300);
  animation: ls-pop var(--duration-slower) var(--ease-bounce);
}
@keyframes ls-pop { from { transform: scale(0.6); } }
.ls-count { margin: var(--space-2) 0 0; text-align: center; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-text-primary); }
.ls-join { display: flex; flex-direction: column; gap: var(--space-2_5); }
.ls-join[hidden], .ls-join .ls-btn[hidden] { display: none; }
.ls-line { margin: 0; text-align: center; font-size: var(--text-sm); line-height: 1.6; }
.ls-dot--pending {
  border-color: var(--color-accent); background: var(--receipt-accent-soft); color: var(--color-accent);
  font-size: var(--text-base); font-weight: var(--font-bold); line-height: 1;
}

.ls-pill--muted.badge {
  height: auto; min-height: 28px; white-space: normal; text-align: start;
  background: var(--color-bg-tertiary); color: var(--color-text-secondary); font-weight: var(--font-medium);
}
.ls-pill--accent.badge { background: var(--receipt-accent-soft); color: var(--color-accent); }

.ls-note:not(.badge) {
  display: flex; align-items: flex-start; gap: var(--space-2_5);
  padding: var(--space-3) var(--space-3_5); border-radius: var(--radius-lg);
  font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-primary);
}
.ls-note .r-icon { width: 18px; height: 18px; margin-top: 3px; }
.ls-note--muted { background: var(--color-bg-tertiary); }
.ls-note--muted .r-icon { color: var(--color-text-secondary); }
.ls-note--warning { background: var(--color-warning-bg); }
.ls-note--warning .r-icon { color: color-mix(in srgb, var(--color-warning) 60%, var(--color-text-primary)); }
.ls-note--error { background: var(--color-error-bg); }
.ls-note--error .r-icon { color: var(--color-error); }

.ls-card--reward { padding: var(--space-6); border: var(--border-width-md) solid var(--color-accent); }
.ls-card--reward .ls-title { font-size: var(--text-2xl); }
.ls-qrbox {
  width: 168px; max-width: 100%; aspect-ratio: 1; box-sizing: border-box; padding: var(--space-3);
  display: flex; align-items: center; justify-content: center;
  border: var(--border-width-thin) solid var(--color-border-primary); border-radius: var(--radius-xl);
  background: var(--receipt-card-bg);
}
.ls-qr { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ls-code { font-size: var(--text-xl); font-weight: var(--font-bold); letter-spacing: 2px; }
.ls-waiting { font-size: var(--text-base); font-weight: var(--font-medium); }

.ls-card--used { padding: var(--space-6); gap: var(--space-2_5); }
.ls-card--used .ls-title { font-size: var(--text-xl); }
.ls-card--used .ls-fine { font-size: var(--text-sm); }
.ls-used-icon.r-icon-tile { width: 48px; height: 48px; background: var(--color-bg-tertiary); color: var(--color-text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .ls-dot--fresh { animation: none; }
  .ra-sheet .btn[aria-busy="true"]::before,
  .ra-save .btn[aria-busy="true"]::before { animation-duration: calc(var(--duration-slower) * 4); }
}

/* ── Stamp card v2 (STAMP_CARD_V2, founder 2026-10-14): the card itself, one button, no warning colours.
   Store colours come from the page's accent tokens (white label = the merchant's). ── */
.ls2 { gap: var(--space-3); }
.ls2-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
/* The store's logo on the card is .mlogo--card (receipt.css, any shape); only the empty placeholder stays here. */
.ls2-logo {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-full);
  background: var(--receipt-card-bg); border: var(--border-width-sm, 1px) solid var(--color-border, var(--neutral-200));
}
.ls2-logo--blank { display: inline-block; background: var(--receipt-accent-soft); border: 0; }
.ls2-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ls2-store { margin: 0; text-wrap: balance; overflow-wrap: anywhere; font-size: var(--text-base); font-weight: var(--font-bold); line-height: 1.3; color: var(--color-text-primary); }
.ls2-label { font-size: var(--text-xs); color: var(--color-text-secondary); }
.ls2-plus { flex-shrink: 0; padding: var(--space-1) var(--space-2_5); border-radius: var(--radius-full); font-size: var(--text-xs); background: var(--receipt-accent-soft); color: var(--color-accent); font-weight: var(--font-bold); }
.ls2-dots { padding-block: var(--space-1); }
.ls2-count { margin: 0; text-align: center; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-text-primary); }
.ls2-reward { margin: 0; text-align: center; text-wrap: balance; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); }
.ls2-done { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3); border-radius: var(--radius-lg); text-align: start; text-wrap: pretty; background: var(--receipt-accent-soft); color: var(--color-accent); font-size: var(--text-sm); font-weight: var(--font-bold); line-height: 1.5; }
.ls2-done svg { flex-shrink: 0; width: 18px; height: 18px; }
.ls2-done__date { font-weight: var(--font-medium); color: var(--color-text-secondary); }
.ls2-ask { display: flex; flex-direction: column; gap: var(--space-2); }
.ls2-ask[hidden] { display: none; }
.ls2-btn.btn { height: 50px; font-size: var(--text-base); background: var(--color-accent); color: var(--color-accent-text); border-color: transparent; }
.ls2-btn.btn:hover:not(:disabled) { filter: brightness(0.95); }
.ls2-btn.btn[aria-busy="true"]::before {
  content: ""; width: 16px; height: 16px; box-sizing: border-box; flex-shrink: 0; margin-inline-end: var(--space-2);
  border-radius: var(--radius-full); border: var(--border-width-md) solid currentColor; border-inline-end-color: transparent;
  animation: ra-spin var(--duration-slower) linear infinite;
}
.ls2-fine { margin: 0; text-align: start; text-wrap: pretty; font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-secondary); }
.ls2-fine .r-link { font-weight: var(--font-medium); }
.ls2-linkbtn {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--color-text-link); font-weight: var(--font-medium);
}
.ls2-details-btn { display: inline-block; min-height: 32px; margin-inline-start: var(--space-1); }
.ls2-details { padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-bg-tertiary); }
.ls2-details[hidden] { display: none; }
.ls2-details__h { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-text-primary); }
.ls2-details__p { margin: 0 0 var(--space-2); text-align: start; font-size: var(--text-xs); line-height: 1.7; color: var(--color-text-secondary); }
.ls2-details__p:last-child { margin-bottom: 0; }
.ls2-status { margin: 0; text-align: start; font-size: var(--text-sm); color: var(--color-text-secondary); }
.ls2-offers { padding-top: var(--space-3); border-top: var(--border-width-sm, 1px) solid var(--color-border, var(--neutral-200)); }
.ls2-offers[hidden] { display: none; }
/* The one optional question after the result: a small secondary line, never a card of its own. */
.ls2-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.ls2-offer__q { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.ls2-offer__btns { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.ls2-offer__btns .ls2-linkbtn { min-height: 32px; padding-inline: var(--space-1); }
.ls2-offer__btns .ls2-linkbtn:disabled { opacity: .5; }
/* The join's own steps, inside the card: phone, code, working. */
.ls2-flow { display: flex; flex-direction: column; gap: var(--space-3); }
.ls2-flow .sbp-err:empty { display: none; }
.ls2-flow[hidden], .ls2-btn[hidden], .ls2-fine[hidden], .ls2-done[hidden] { display: none; }
.ls2-flow form, .ls2-flow .sbp-step { display: flex; flex-direction: column; gap: var(--space-3); }
.ls2-field { display: flex; flex-direction: column; gap: var(--space-1); }
.ls2-field label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-primary); }
.ls2-sent { margin: 0; text-align: start; font-size: var(--text-sm); color: var(--color-text-secondary); }
.ls2-codeRow { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); white-space: nowrap; }
.ls2-codeRow .sbp-link, .ls2-codeRow .sbp-resend { white-space: nowrap; }
.ls2-working { margin: 0; text-align: start; font-size: var(--text-sm); color: var(--color-text-secondary); }
.ls2 .r-num, .ls2-count, .ls2-done__date, .ls2 .sbp-code, .ls2 bdi[dir="ltr"] { font-variant-numeric: tabular-nums; }
.ls2 .ls2-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* The two languages of a line with links sit side by side; the page language shows one. */
html[lang="ar"] .ls2 [data-lang="en"],
html:not([lang="ar"]) .ls2 [data-lang="ar"] { display: none; }
@media (prefers-reduced-motion: reduce) { .ls2-btn.btn[aria-busy="true"]::before { animation: none; } }

/* ── Save card: the merchant's receipt_storage consent (MERCHANT_CONSENT_POLICY_GATE) ── */
.ra-savenow .ra-consent-line { margin: 0; text-align: center; font-size: var(--text-xs); line-height: 1.7; color: var(--color-text-secondary); }
.ra-savenow .ra-consent-details { padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-bg-tertiary); font-size: var(--text-xs); line-height: 1.7; color: var(--color-text-secondary); }
.ra-savenow .ra-consent-details[hidden] { display: none; }
html[lang="ar"] .ra-savenow [data-lang="en"],
html:not([lang="ar"]) .ra-savenow [data-lang="ar"] { display: none; }