/**
 * ReceiptWave Design System
 * rw-design-system.css — v1.0 — March 2026
 *
 * USAGE: Import this file into every ReceiptWave web surface.
 *   <link rel="stylesheet" href="/css/rw-design-system.css">
 *
 * Covers: CSS variables, typography, buttons, cards, inputs,
 *         badges, sidebar/nav, layout, loading states, empty states,
 *         animations, accessibility, utility classes.
 *
 * ⚠ DO NOT override these variables inline. Edit this file only.
 * ⚠ Surfaces covered: Business Portal · Admin Portal · Capture Software UI
 *                     Marketing Website · Consumer Receipt Page · Emails
 */

/* ═══════════════════════════════════════════════════════════════
   1. BRAND TOKENS
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand colours */
  --rw-navy:          #1B2A4A;
  --rw-teal:          #2EBFA5;
  --rw-teal-active:   #2DD4BF;
  --rw-teal-hover:    #26a692;
  --rw-orange:        #F5911E;   /* Consumer App only */
  --rw-orange-hover:  #d97b18;   /* Consumer App only */

  /* UI colours */
  --rw-slate:         #94A3B8;
  --rw-body:          #1E293B;
  --rw-bg:            #F8FAFC;
  --rw-border:        #E2E8F0;
  --rw-white:         #FFFFFF;

  /* Semantic colours */
  --rw-success:       #22C55E;
  --rw-success-bg:    rgba(34, 197, 94, 0.10);
  --rw-warning:       #F59E0B;
  --rw-warning-bg:    rgba(245, 158, 11, 0.10);
  --rw-error:         #EF4444;
  --rw-error-bg:      rgba(239, 68, 68, 0.10);
  --rw-info-bg:       rgba(46, 191, 165, 0.10);

  /* Typography */
  --font-heading:     'Sora', sans-serif;
  --font-body:        'Inter', sans-serif;

  /* Spacing scale */
  --space-xs:         4px;
  --space-sm:         8px;
  --space-md:         16px;
  --space-lg:         24px;
  --space-xl:         40px;
  --space-2xl:        64px;

  /* Border radius scale */
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        16px;
  --radius-xl:        24px;
  --radius-full:      9999px;

  /* Shadows */
  --shadow-card:      0 1px 4px rgba(27, 42, 74, 0.06);
  --shadow-dropdown:  0 4px 16px rgba(27, 42, 74, 0.12);
  --shadow-modal:     0 8px 32px rgba(27, 42, 74, 0.18);

  /* Transitions */
  --transition-fast:  150ms ease-in-out;
  --transition-base:  200ms ease-in-out;
  --transition-slow:  300ms ease-in-out;

  /* Sidebar width */
  --sidebar-width:    240px;
}

/* ── Receipt design tokens ─────────────────────────────────────
   Mirror of /receipt-design-tokens.json. When values change here,
   also update the JSON and receiptwave-consumer-app/constants/receiptTokens.ts.
   See /receipt-design-tokens.README.md.
   ───────────────────────────────────────────────────────────── */
:root {
  --rw-receipt-paper:           #fbfaf5;
  --rw-receipt-text-primary:    #1a1a1c;
  --rw-receipt-text-secondary:  #555555;
  --rw-receipt-divider:         #aaaaaa;
  --rw-receipt-shadow:          rgba(0, 0, 0, 0.08);
  --rw-receipt-anim-duration:   2000ms;
  --rw-receipt-anim-easing:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --rw-receipt-anim-footer-delay: 2100ms;
  --rw-receipt-data-font:       'Courier New', Courier, monospace;
  --rw-receipt-width-pct:       86%;
  --rw-receipt-shadow-offset-y: 4px;
  --rw-receipt-shadow-blur:     14px;
  --rw-receipt-perforation-h:   8px;
  --rw-receipt-perforation-tooth-w: 12px;
  --rw-receipt-perforation-tooth-r: 3.5px;
}

/* ═══════════════════════════════════════════════════════════════
   2. GOOGLE FONTS IMPORT
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   3. RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--rw-body);
  background-color: var(--rw-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════
   4. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--rw-navy);
  line-height: 1.2;
}

/* Page hero */
.rw-h1, h1 { font-size: 3rem; }        /* 48px */
/* Section heading */
.rw-h2, h2 { font-size: 2rem; }        /* 32px */
/* Card / modal heading */
.rw-h3, h3 { font-size: 1.25rem; }     /* 20px */
/* Sub-heading */
.rw-h4, h4 { font-size: 1.125rem; }    /* 18px */

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

.rw-text-secondary { color: var(--rw-slate); font-size: 14px; }
.rw-text-sm        { font-size: 14px; }
.rw-text-xs        { font-size: 12px; }
.rw-text-teal      { color: var(--rw-teal); }
.rw-text-navy      { color: var(--rw-navy); }
.rw-text-white     { color: var(--rw-white); }
.rw-text-error     { color: var(--rw-error); }
.rw-text-success   { color: var(--rw-success); }

/* Wordmark — use with the icon SVG */
.rw-wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}
.rw-wordmark .receipt { color: var(--rw-navy); }
.rw-wordmark .wave    { color: var(--rw-teal); }
/* On dark backgrounds */
.rw-wordmark--white .receipt { color: var(--rw-white); }
.rw-wordmark--white .wave    { color: var(--rw-teal); }

/* ═══════════════════════════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.rw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-fast);
  white-space: nowrap;
  min-height: 44px; /* Accessibility: minimum touch target */
}

.rw-btn:focus-visible {
  outline: 2px solid var(--rw-teal);
  outline-offset: 2px;
}

.rw-btn:active { transform: scale(0.98); }

.rw-btn:disabled,
.rw-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — Business (teal) */
.rw-btn-primary {
  background: var(--rw-teal);
  color: var(--rw-white);
}
.rw-btn-primary:hover { background: var(--rw-teal-hover); }

/* Primary — Consumer (orange) */
.rw-btn-primary-consumer {
  background: var(--rw-orange);
  color: var(--rw-white);
}
.rw-btn-primary-consumer:hover { background: var(--rw-orange-hover); }

/* Ghost / Secondary */
.rw-btn-ghost {
  background: transparent;
  color: var(--rw-navy);
  border: 1.5px solid var(--rw-border);
}
.rw-btn-ghost:hover {
  background: var(--rw-bg);
  border-color: var(--rw-teal);
}

/* Navy */
.rw-btn-navy {
  background: var(--rw-navy);
  color: var(--rw-white);
}
.rw-btn-navy:hover { background: #243660; }

/* Destructive */
.rw-btn-danger {
  background: var(--rw-error);
  color: var(--rw-white);
}
.rw-btn-danger:hover { background: #dc2626; }

/* Sizes */
.rw-btn-sm { font-size: 12px; padding: 6px 14px; min-height: 36px; }
.rw-btn-lg { font-size: 16px; padding: 14px 28px; min-height: 52px; }
.rw-btn-full { width: 100%; }

/* Icon-only button */
.rw-btn-icon {
  padding: 10px;
  border-radius: var(--radius-md);
  min-width: 44px;
}

/* ═══════════════════════════════════════════════════════════════
   6. CARDS
   ═══════════════════════════════════════════════════════════════ */

.rw-card {
  background: var(--rw-white);
  border: 1px solid var(--rw-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.rw-card-sm { padding: var(--space-md); border-radius: var(--radius-md); }
.rw-card-lg { padding: var(--space-xl); }

.rw-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--rw-border);
  margin-bottom: var(--space-md);
}

.rw-card-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--rw-navy);
}

/* Stat card */
.rw-stat-card {
  background: var(--rw-white);
  border: 1px solid var(--rw-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}
.rw-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--rw-slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-xs);
}
.rw-stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  color: var(--rw-navy);
  line-height: 1;
}
.rw-stat-change {
  font-size: 13px;
  font-weight: 500;
  margin-top: var(--space-xs);
}
.rw-stat-change--up   { color: var(--rw-success); }
.rw-stat-change--down { color: var(--rw-error); }

/* ═══════════════════════════════════════════════════════════════
   7. FORM INPUTS
   ═══════════════════════════════════════════════════════════════ */

.rw-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.rw-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--rw-body);
}

.rw-input,
.rw-select,
.rw-textarea {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--rw-body);
  background: var(--rw-white);
  border: 1.5px solid var(--rw-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  width: 100%;
  min-height: 44px;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.rw-input::placeholder,
.rw-textarea::placeholder {
  color: var(--rw-slate);
}

.rw-input:focus,
.rw-select:focus,
.rw-textarea:focus {
  border-color: var(--rw-teal);
  box-shadow: 0 0 0 3px rgba(46, 191, 165, 0.15);
}

.rw-input--error,
.rw-select--error,
.rw-textarea--error {
  border-color: var(--rw-error);
}
.rw-input--error:focus,
.rw-select--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.rw-input-hint {
  font-size: 12px;
  color: var(--rw-slate);
}
.rw-input-error-msg {
  font-size: 12px;
  color: var(--rw-error);
  font-weight: 500;
}

.rw-textarea { min-height: 100px; resize: vertical; }

/* Search input */
.rw-search-wrap {
  position: relative;
}
.rw-search-wrap .rw-input {
  padding-left: 40px;
}
.rw-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  stroke: var(--rw-slate);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   8. STATUS BADGES
   ═══════════════════════════════════════════════════════════════ */

.rw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.rw-badge-success { background: var(--rw-success-bg); color: var(--rw-success); }
.rw-badge-error   { background: var(--rw-error-bg);   color: var(--rw-error); }
.rw-badge-warning { background: var(--rw-warning-bg); color: var(--rw-warning); }
.rw-badge-info    { background: var(--rw-info-bg);    color: var(--rw-teal); }
.rw-badge-navy    { background: rgba(27,42,74,0.08);  color: var(--rw-navy); }

/* Status dot */
.rw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.rw-dot-success { background: var(--rw-success); }
.rw-dot-error   { background: var(--rw-error); }
.rw-dot-warning { background: var(--rw-warning); }
.rw-dot-teal    { background: var(--rw-teal); }

/* ═══════════════════════════════════════════════════════════════
   9. SIDEBAR & NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.rw-sidebar {
  width: var(--sidebar-width);
  background: var(--rw-navy);
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  overflow-y: auto;
  z-index: 100;
}

.rw-sidebar-logo {
  padding: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rw-sidebar-nav {
  flex: 1;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.rw-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: background var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
  border-left: 3px solid transparent;
  cursor: pointer;
}

.rw-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

/* Business active state */
.rw-nav-item--active,
.rw-nav-item.active {
  background: rgba(46, 191, 165, 0.15);
  color: var(--rw-teal);
  border-left-color: var(--rw-teal);
  font-weight: 600;
}

/* Consumer active state */
.rw-nav-item--active-consumer {
  background: rgba(245, 145, 30, 0.12);
  color: var(--rw-orange);
  border-left-color: var(--rw-orange);
  font-weight: 600;
}

.rw-nav-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
  padding: var(--space-md) var(--space-md) var(--space-xs);
  margin-top: var(--space-sm);
}

.rw-sidebar-footer {
  padding: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Main layout with sidebar */
.rw-layout {
  display: flex;
  min-height: 100vh;
}
.rw-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background: var(--rw-bg);
}

/* Top nav bar */
.rw-topbar {
  background: var(--rw-white);
  border-bottom: 1px solid var(--rw-border);
  padding: 0 var(--space-lg);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.rw-page-content {
  padding: var(--space-xl) var(--space-lg);
  max-width: 1200px;
}

/* ═══════════════════════════════════════════════════════════════
   10. ICONS
   ═══════════════════════════════════════════════════════════════ */

.rw-icon {
  stroke: var(--rw-slate);
  fill: none;
  width: 24px;
  height: 24px;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.rw-icon--active  { stroke: var(--rw-teal-active); }
.rw-icon--orange  { stroke: var(--rw-orange); }
.rw-icon--white   { stroke: var(--rw-white); }
.rw-icon--navy    { stroke: var(--rw-navy); }
.rw-icon--success { stroke: var(--rw-success); }
.rw-icon--error   { stroke: var(--rw-error); }
.rw-icon--warning { stroke: var(--rw-warning); }

.rw-icon--sm { width: 16px; height: 16px; stroke-width: 2; }
.rw-icon--lg { width: 32px; height: 32px; }

/* ═══════════════════════════════════════════════════════════════
   11. LOADING STATES
   ═══════════════════════════════════════════════════════════════ */

/* Skeleton loader */
@keyframes rw-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.rw-skeleton {
  background: linear-gradient(90deg,
    var(--rw-border) 25%,
    #f0f4f8 50%,
    var(--rw-border) 75%
  );
  background-size: 200% 100%;
  animation: rw-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

.rw-skeleton-text  { height: 16px; margin-bottom: var(--space-sm); }
.rw-skeleton-title { height: 24px; width: 60%; margin-bottom: var(--space-md); }
.rw-skeleton-card  {
  height: 80px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
}

/* Spinner */
@keyframes rw-spin {
  to { transform: rotate(360deg); }
}

.rw-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--rw-border);
  border-top-color: var(--rw-teal);
  border-radius: 50%;
  animation: rw-spin 0.7s linear infinite;
  display: inline-block;
}
.rw-spinner--sm  { width: 16px; height: 16px; border-width: 2px; }
.rw-spinner--lg  { width: 40px; height: 40px; border-width: 3px; }
.rw-spinner--white { border-color: rgba(255,255,255,0.3); border-top-color: var(--rw-white); }

/* Full page loading */
.rw-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: var(--space-md);
  color: var(--rw-slate);
  font-size: 14px;
}

/* Branded loading (replaces blank screen — fixes Architecture Review UI-03) */
.rw-branded-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--rw-bg);
  gap: var(--space-lg);
}

/* ═══════════════════════════════════════════════════════════════
   12. EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */

.rw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  gap: var(--space-md);
}

.rw-empty-icon {
  width: 64px;
  height: 64px;
  background: var(--rw-bg);
  border: 1px solid var(--rw-border);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rw-empty-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--rw-navy);
}

.rw-empty-desc {
  font-size: 14px;
  color: var(--rw-slate);
  max-width: 320px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   13. TABLES
   ═══════════════════════════════════════════════════════════════ */

.rw-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rw-border);
}

.rw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.rw-table th {
  background: var(--rw-bg);
  color: var(--rw-slate);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--rw-border);
  white-space: nowrap;
}

.rw-table td {
  padding: 14px var(--space-md);
  border-bottom: 1px solid var(--rw-border);
  color: var(--rw-body);
  vertical-align: middle;
}

.rw-table tr:last-child td { border-bottom: none; }

.rw-table tbody tr:hover { background: rgba(248, 250, 252, 0.8); }

/* ═══════════════════════════════════════════════════════════════
   14. MODALS & OVERLAYS
   ═══════════════════════════════════════════════════════════════ */

.rw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 42, 74, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-md);
}

.rw-modal {
  background: var(--rw-white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.rw-modal-header {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--rw-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rw-modal-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--rw-navy);
}

.rw-modal-body    { padding: var(--space-lg); }
.rw-modal-footer  {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--rw-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════════
   15. ALERTS & NOTIFICATIONS (inline)
   ═══════════════════════════════════════════════════════════════ */

.rw-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 12px var(--space-md);
  border-radius: var(--radius-md);
  font-size: 14px;
  border-left: 3px solid;
}

.rw-alert-success { background: var(--rw-success-bg); border-color: var(--rw-success); color: #166534; }
.rw-alert-error   { background: var(--rw-error-bg);   border-color: var(--rw-error);   color: #991b1b; }
.rw-alert-warning { background: var(--rw-warning-bg); border-color: var(--rw-warning); color: #92400e; }
.rw-alert-info    { background: var(--rw-info-bg);    border-color: var(--rw-teal);    color: #0f6e56; }

/* ═══════════════════════════════════════════════════════════════
   16. ANIMATIONS & TRANSITIONS
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  /* Page enter */
  @keyframes rw-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .rw-animate-in {
    animation: rw-fade-in 200ms ease-out forwards;
  }

  /* Slide up (modals, bottom sheets) */
  @keyframes rw-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .rw-slide-up {
    animation: rw-slide-up 250ms ease-out forwards;
  }

  /* Pulse (for live/connected indicators) */
  @keyframes rw-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
  }
  .rw-pulse { animation: rw-pulse 2s ease-in-out infinite; }
}

/* Transition helpers */
.rw-transition     { transition: all var(--transition-base); }
.rw-transition-fast { transition: all var(--transition-fast); }

/* ═══════════════════════════════════════════════════════════════
   17. CONSUMER RECEIPT PAGE
   (Mobile-first — fixes Architecture Review UI-04)
   ═══════════════════════════════════════════════════════════════ */

.rw-receipt-page {
  min-height: 100vh;
  background: var(--rw-bg);
  font-family: var(--font-body);
}

.rw-receipt-merchant-header {
  background: var(--rw-navy);
  min-height: 100px;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.rw-receipt-merchant-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
  object-fit: contain;
}

.rw-receipt-merchant-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--rw-white);
  margin-bottom: 2px;
}

.rw-receipt-merchant-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}

.rw-receipt-teal-line {
  height: 3px;
  background: var(--rw-teal);
}

.rw-receipt-card {
  background: var(--rw-white);
  margin: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rw-border);
  overflow: hidden;
}

.rw-receipt-amount {
  text-align: center;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}

.rw-receipt-amount-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--rw-slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
}

.rw-receipt-amount-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--rw-navy);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.rw-receipt-datetime {
  font-size: 13px;
  color: var(--rw-slate);
}

.rw-receipt-divider {
  border: none;
  border-top: 1px dashed var(--rw-border);
  margin: 0 var(--space-md);
}

.rw-receipt-line-items { padding: var(--space-md); }

.rw-receipt-line-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}

.rw-receipt-line-item-name { color: var(--rw-body); }
.rw-receipt-line-item-price { color: var(--rw-body); font-weight: 500; }

.rw-receipt-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-top: 1px solid var(--rw-border);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--rw-navy);
}

.rw-receipt-gst-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
  color: var(--rw-slate);
  border-top: 1px solid var(--rw-border);
}

.rw-receipt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.rw-receipt-wallet-btn {
  grid-column: 1 / -1;
}

.rw-receipt-footer {
  text-align: center;
  padding: var(--space-md) var(--space-md) var(--space-xl);
}

.rw-receipt-privacy {
  font-size: 10px;
  color: var(--rw-slate);
  margin-bottom: var(--space-md);
}

.rw-receipt-powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: 12px;
  color: var(--rw-slate);
}

/* ═══════════════════════════════════════════════════════════════
   18. ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */

/* Skip link */
.rw-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--rw-navy);
  color: var(--rw-white);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
}
.rw-skip-link:focus { top: var(--space-md); }

/* Minimum touch targets */
.rw-touch-target {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--rw-teal);
  outline-offset: 2px;
}

/* Screen reader only */
.rw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   19. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */

/* Spacing */
.rw-mt-sm { margin-top: var(--space-sm); }
.rw-mt-md { margin-top: var(--space-md); }
.rw-mt-lg { margin-top: var(--space-lg); }
.rw-mb-sm { margin-bottom: var(--space-sm); }
.rw-mb-md { margin-bottom: var(--space-md); }
.rw-mb-lg { margin-bottom: var(--space-lg); }

/* Flex helpers */
.rw-flex       { display: flex; }
.rw-flex-center { display: flex; align-items: center; justify-content: center; }
.rw-flex-between { display: flex; align-items: center; justify-content: space-between; }
.rw-flex-col   { display: flex; flex-direction: column; }
.rw-gap-sm     { gap: var(--space-sm); }
.rw-gap-md     { gap: var(--space-md); }

/* Grid */
.rw-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.rw-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.rw-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

/* Divider */
.rw-divider {
  border: none;
  border-top: 1px solid var(--rw-border);
  margin: var(--space-lg) 0;
}

/* ═══════════════════════════════════════════════════════════════
   20. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .rw-h1, h1 { font-size: 2rem; }
  .rw-h2, h2 { font-size: 1.5rem; }

  .rw-sidebar { transform: translateX(-100%); transition: transform var(--transition-base); }
  .rw-sidebar--open { transform: translateX(0); }
  .rw-main { margin-left: 0; }

  .rw-grid-2,
  .rw-grid-3,
  .rw-grid-4 { grid-template-columns: 1fr; }

  .rw-modal { max-width: 100%; margin: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .rw-overlay { align-items: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════
   21. TORN-PAPER RECEIPT
   Web port of the in-app PaperReceiptView.tsx (consumer-app repo).
   Polygon points mirror utils/buildPaperPath.ts so a paper torn on
   the web looks identical to one rendered in-app — see
   components/ReceiptPaperShape.tsx for the RN reference.
   ═══════════════════════════════════════════════════════════════ */

.rw-torn-paper {
  background: #ECEEF1;
  margin: 16px;
  padding: 30px 24px;
  /* Non-periodic jagged edges — 57 top points L-to-R, 57 bottom points R-to-L.
     X in percent so the silhouette stretches to any viewport width.
     Y is pixel-fixed so peaks stay at 1-10px regardless of width. */
  clip-path: polygon(
    0 10px, 2% 3px, 4% 8px, 5.5% 1px,
    7.5% 7px, 9% 2px, 11% 9px, 12.5% 3px,
    14.5% 10px, 16% 2px, 18% 8px, 19.5% 1px,
    21.5% 7px, 23% 3px, 25% 10px, 26.5% 1px,
    28.5% 8px, 30% 3px, 32% 10px, 33.5% 1px,
    35.5% 7px, 37% 3px, 39% 9px, 40.5% 1px,
    42.5% 8px, 44% 2px, 46% 10px, 47.5% 1px,
    50% 7px, 51% 3px, 53% 9px, 54.5% 1px,
    56.5% 8px, 58% 2px, 60% 10px, 61.5% 1px,
    63.5% 7px, 65% 3px, 67% 9px, 68.5% 2px,
    70.5% 8px, 72% 1px, 74% 10px, 75.5% 2px,
    77.5% 7px, 79% 3px, 81% 9px, 82.5% 1px,
    84.5% 8px, 86% 2px, 88% 10px, 89.5% 1px,
    91.5% 7px, 93% 3px, 95% 9px, 96.5% 2px,
    98.5% 8px, 100% 10px, 100% calc(100% - 8px), 98% calc(100% - 9px),
    96% calc(100% - 2px), 94.5% calc(100% - 7px), 92.5% calc(100% - 1px), 91% calc(100% - 10px),
    89% calc(100% - 3px), 87.5% calc(100% - 8px), 85.5% calc(100% - 2px), 84% calc(100% - 9px),
    82% calc(100% - 1px), 80.5% calc(100% - 7px), 78.5% calc(100% - 3px), 77% calc(100% - 10px),
    75% calc(100% - 2px), 73.5% calc(100% - 8px), 71.5% calc(100% - 1px), 70% calc(100% - 9px),
    68% calc(100% - 3px), 66.5% calc(100% - 7px), 64.5% calc(100% - 2px), 63% calc(100% - 10px),
    61% calc(100% - 1px), 59.5% calc(100% - 8px), 57.5% calc(100% - 3px), 56% calc(100% - 9px),
    54% calc(100% - 2px), 52.5% calc(100% - 7px), 50.5% calc(100% - 1px), 49% calc(100% - 10px),
    47% calc(100% - 3px), 45.5% calc(100% - 8px), 43.5% calc(100% - 2px), 42% calc(100% - 9px),
    40% calc(100% - 1px), 38.5% calc(100% - 7px), 36.5% calc(100% - 3px), 35% calc(100% - 10px),
    33% calc(100% - 2px), 31.5% calc(100% - 8px), 29.5% calc(100% - 1px), 28% calc(100% - 9px),
    26% calc(100% - 3px), 24.5% calc(100% - 7px), 22.5% calc(100% - 2px), 21% calc(100% - 10px),
    19% calc(100% - 1px), 17.5% calc(100% - 8px), 15.5% calc(100% - 3px), 14% calc(100% - 9px),
    12% calc(100% - 2px), 10.5% calc(100% - 7px), 8.5% calc(100% - 1px), 7% calc(100% - 10px),
    5% calc(100% - 3px), 3.5% calc(100% - 9px), 2% calc(100% - 2px), 0 calc(100% - 8px)
  );
  /* Layered navy drop-shadows — tight hairline, mid ambient, and a
     diffuse far shadow so the paper reads as floating on web where
     (unlike native) there's no system-level ambient lighting. */
  filter:
    drop-shadow(0 1px 0 rgba(27, 42, 74, 0.14))
    drop-shadow(0 3px 6px rgba(27, 42, 74, 0.22))
    drop-shadow(0 12px 24px rgba(27, 42, 74, 0.18));
}

@media (min-width: 500px) {
  .rw-torn-paper {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Merchant identity block (replaces the navy header on the web). */
.rw-tp-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}
.rw-tp-logo-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: #F1F5F9;
}
.rw-tp-logo-initial {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #FFFFFF;
  font: 700 20px/44px 'Sora', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  text-align: center;
}

.rw-tp-merchant {
  text-align: center;
  font: 700 14px/1.2 'Sora', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #1B2A4A;
}
.rw-tp-abn {
  text-align: center;
  font-size: 9px;
  color: #94A3B8;
  margin-top: 2px;
}
.rw-tp-address {
  text-align: center;
  font-size: 8px;
  color: #94A3B8;
  margin-top: 1px;
}
.rw-tp-italic { font-style: italic; }

.rw-tp-sep-solid {
  height: 1px;
  background: #D5D8DD;
  margin-top: 10px;
}
.rw-tp-sep-dashed {
  border-top: 1px dashed #C8CCD2;
  height: 0;
  margin: 0;
}

.rw-tp-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 3px;
  font-size: 13px;
  color: #1E293B;
}
.rw-tp-item-name { flex: 1; margin-right: 8px; }
.rw-tp-item-price { font-weight: 500; font-variant-numeric: tabular-nums; }

.rw-tp-amount-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 11px;
  color: #1E293B;
}
.rw-tp-amount-row > :last-child { font-weight: 500; font-variant-numeric: tabular-nums; }

.rw-tp-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.rw-tp-total-label { font-size: 12px; color: #1B2A4A; }
.rw-tp-total-value {
  font: 800 18px/1 'Sora', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #1B2A4A;
  font-variant-numeric: tabular-nums;
}

.rw-tp-date {
  text-align: center;
  font-size: 9px;
  color: #94A3B8;
  padding-top: 6px;
}
.rw-tp-payment-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 8px;
  color: #94A3B8;
}
.rw-tp-powered-by {
  text-align: center;
  font-size: 7px;
  color: #B0B5BD;
  padding-top: 6px;
  letter-spacing: 0.3px;
}

/* Print: keep the torn silhouette but drop the filter (shadow) which
   can cause large offscreen rasters. */
@media print {
  .rw-torn-paper {
    filter: none;
    margin: 0;
  }
}

/* Neutralise the legacy white-card chrome from receipt.css when the
   torn-paper receipt is in use, so drop-shadow isn't clipped and the
   paper floats on the page background. */
.receipt-scroll-zone .rw-torn-paper,
.receipt-scroll-zone .rw-torn-paper ~ * { position: relative; }
.receipt:has(.rw-torn-paper),
.card:has(.rw-torn-paper) {
  background: transparent;
  box-shadow: none;
  overflow: visible;
  border-radius: 0;
}
/* Fallback for engines without :has() — the Razor page sets
   .rw-torn-parent when the torn paper is inside. */
.receipt.rw-torn-parent,
.card.rw-torn-parent {
  background: transparent;
  box-shadow: none;
  overflow: visible;
  border-radius: 0;
}
/* /t/ page page-level compatibility: body is flex-centered with padding;
   the torn paper's max-width inside needs to cap at the same 420px the
   old .card capped at so the jags don't go edge-to-edge on tablets. */
.card.rw-torn-parent .rw-torn-paper {
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   22. TORN-PAPER RECEIPT WEB (Index.cshtml  /r/{claimCode})
   Second-generation torn paper for the claim-code page. Uses inline
   SVG top+bottom edge strips with preserveAspectRatio="none" (stretches
   horizontally, Y stays at 1-10px peaks) — a literal port of the
   57-point non-periodic edges from the in-app buildPaperPath.ts.
   Separate from section 21 so /t/ keeps its older clip-path version
   while /r/ gets the spec-locked redesign (ROW1+ROW2 hero card,
   Wallet text link, slide-in animation).
   ═══════════════════════════════════════════════════════════════ */

/* ── Page frame ────────────────────────────────────────────────── */
.rw-page {
  min-height: 100%;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 20px;
  box-sizing: border-box;
  background: #F8FAFC;
}
/* ── Scroll zone (Option A: sticky-bottom hero) ───────────────── */
.rw-scroll-zone {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  /* Breathing room so drop-shadow isn't visually clipped at scroll edges. */
  padding: 4px 2px 12px;
  margin: -4px -2px -12px;
  -webkit-overflow-scrolling: touch;
}

.rw-footer-zone {
  flex-shrink: 0;
  padding-top: 16px;
}

/* ── Torn paper: top edge + body + bottom edge ────────────────── */
/* receipt redesign */
.rw-receipt-paper {
  position: relative;
  width: var(--rw-receipt-width-pct);
  margin: 0 auto;
  filter: drop-shadow(0 var(--rw-receipt-shadow-offset-y) var(--rw-receipt-shadow-blur) var(--rw-receipt-shadow));
}
.rw-receipt-paper-top-edge,
.rw-receipt-paper-bottom-edge {
  display: block;
  width: 100%;
  height: 10px;
  line-height: 0;
}
.rw-receipt-paper-top-edge svg,
.rw-receipt-paper-bottom-edge svg {
  display: block;
  width: 100%;
  height: 10px;
  fill: var(--rw-receipt-paper);
}
.rw-receipt-paper-top-edge svg path,
.rw-receipt-paper-bottom-edge svg path {
  fill: var(--rw-receipt-paper);
}
.rw-receipt-paper-body {
  background: var(--rw-receipt-paper);
  color: var(--rw-receipt-text-primary);
  padding: var(--rw-receipt-padding-top, 14px) var(--rw-receipt-padding-horizontal, 18px) var(--rw-receipt-padding-bottom, 20px);
  /* Overlap a hairline with each edge to avoid sub-pixel seam. */
  margin-top: -1px;
  margin-bottom: -1px;
}

/* ── Receipt content (inside torn paper) ──────────────────────── */
.rw-rp-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rw-rp-logo-img,
.rw-rp-logo-initial {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
}
.rw-rp-logo-img {
  object-fit: contain;
  background: #F1F5F9;
}
.rw-rp-logo-initial {
  color: #FFFFFF;
  font: 700 20px/44px 'Sora', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  text-align: center;
}
/* receipt redesign */
.rw-rp-merchant {
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-body), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: var(--rw-receipt-text-primary);
}
.rw-rp-abn {
  margin-top: 2px;
  text-align: center;
  font-size: 9px;
  color: var(--rw-receipt-text-secondary);
}
.rw-rp-italic { font-style: italic; }
.rw-rp-address {
  margin-top: 1px;
  text-align: center;
  font-size: 8px;
  color: var(--rw-receipt-text-secondary);
}
.rw-rp-sep-solid {
  height: 1px;
  background: var(--rw-receipt-divider);
}
.rw-rp-sep-before-items { margin-top: 16px; }
.rw-rp-items { margin-top: 12px; }
/* receipt redesign — monospace data rows */
.rw-rp-item {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-family: var(--rw-receipt-data-font);
  font-size: 13px;
  color: var(--rw-receipt-text-primary);
}
.rw-rp-item-name { flex: 1; margin-right: 8px; font-family: var(--rw-receipt-data-font); }
.rw-rp-item-price { font-variant-numeric: tabular-nums; font-family: var(--rw-receipt-data-font); }
.rw-rp-sep-after-items { margin-top: 12px; }
.rw-rp-subtotal-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-family: var(--rw-receipt-data-font);
  font-size: 12px;
  color: var(--rw-receipt-text-primary);
}
.rw-rp-subtotal-row > :last-child { font-variant-numeric: tabular-nums; }
.rw-rp-sep-dashed {
  margin-top: 8px;
  border-top: 1px dashed var(--rw-receipt-divider);
  height: 0;
}
.rw-rp-gst-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-family: var(--rw-receipt-data-font);
  font-size: 12px;
  color: var(--rw-receipt-text-secondary);
}
.rw-rp-gst-row > :last-child { font-variant-numeric: tabular-nums; }
.rw-rp-sep-before-total { margin-top: 8px; }
.rw-rp-total-row {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rw-rp-total-label {
  font-family: var(--rw-receipt-data-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--rw-receipt-text-primary);
}
.rw-rp-total-value {
  font-family: var(--rw-receipt-data-font);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--rw-receipt-text-primary);
  font-variant-numeric: tabular-nums;
}
.rw-rp-date {
  margin-top: 18px;
  text-align: center;
  font-size: 9px;
  color: var(--rw-receipt-text-secondary);
}
.rw-rp-payment {
  margin-top: 1px;
  text-align: center;
  font-family: var(--rw-receipt-data-font);
  font-size: 8px;
  color: var(--rw-receipt-text-secondary);
}
/* receipt redesign */
.rw-rp-footer-message {
  text-align: center;
  font-family: var(--font-body);   /* Inter, not monospace */
  font-size: 10px;
  color: var(--rw-receipt-text-secondary);
  margin-top: 12px;
  padding: 0 4px;
  line-height: 1.4;
  word-break: break-word;
}

/* ── Test Mode (Apple App Store compliance — Rule 2 on consumer side) ──
   Rendered when Receipt.IsTest = true. Banner sits above the receipt
   surface; badge sits inside, near the merchant header. Both use the
   ReceiptWave brand orange so the visual matches the in-app banner. */
.rw-rp-test-banner {
  background: #F5911E;
  color: #FFFFFF;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(245, 145, 30, 0.25);
}
.rw-rp-test-badge {
  display: inline-block;
  margin: 8px auto 0;
  background: #F5911E;
  color: #FFFFFF;
  font: 700 10px/1 'Sora', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
}
.rw-rp-test-badge-wrap {
  text-align: center;
}

/* ── Captured-image XOR (matches in-app either/or branching) ── */
.rw-captured-image-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(27, 42, 74, 0.08);
}
.rw-captured-image-card img {
  display: block;
  width: 100%;
}
.rw-captured-image-card .rw-captured-image-hint {
  font-size: 12px;
  color: #94A3B8;
  text-align: center;
  padding: 8px 12px;
}

/* ── Navy hero card (Follow {merchant} + Get app) ─────────────── */
.rw-hero-card {
  display: block;
  background: #1B2A4A;
  border-radius: 10px;
  padding: 8px 11px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(245, 145, 30, 0.2);
}
.rw-hero-row1 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
}
.rw-hero-logo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.rw-hero-merchant {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}
.rw-hero-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rw-hero-sub {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.8);
}
.rw-hero-pill {
  flex-shrink: 0;
  background: #F5911E;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.2;
}

/* ── Small Apple/Google Wallet text link ──────────────────────── */
.rw-wallet-link-wrap {
  text-align: center;
  margin-top: 10px;
}
.rw-wallet-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 11px;
  color: #94A3B8;
  background: none;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rw-wallet-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Error (not found / expired) ──────────────────────────────── */
.rw-r-error {
  margin-top: 40px;
  text-align: center;
  padding: 32px 24px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
}
.rw-r-error h1 {
  font: 800 22px/1.2 'Sora', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #1B2A4A;
  margin: 0 0 12px;
}
.rw-r-error p {
  font-size: 14px;
  color: #475569;
  margin: 0 0 8px;
  line-height: 1.5;
}
.rw-r-error p.rw-r-error-hint {
  font-size: 13px;
  color: #94A3B8;
  margin-top: 12px;
}

/* ── Slide-in animation ───────────────────────────────────────── */
/* receipt redesign */
html.rw-r-anim .rw-receipt-paper,
html.rw-r-anim .rw-captured-image-card {
  opacity: 1;
  transform: translateY(100vh);
  will-change: transform;
}
html.rw-r-anim .rw-footer-zone {
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
}
html.rw-r-anim.rw-r-play .rw-receipt-paper,
html.rw-r-anim.rw-r-play .rw-captured-image-card {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform var(--rw-receipt-anim-duration) var(--rw-receipt-anim-easing);
}
html.rw-r-anim.rw-r-play .rw-footer-zone {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 300ms ease-out var(--rw-receipt-anim-footer-delay),
    opacity 360ms ease-out var(--rw-receipt-anim-footer-delay);
}
@media (prefers-reduced-motion: reduce) {
  html.rw-r-anim .rw-receipt-paper,
  html.rw-r-anim .rw-captured-image-card,
  html.rw-r-anim .rw-footer-zone {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Print (simplify, drop the shadow) ────────────────────────── */
@media print {
  .rw-receipt-paper { filter: none; }
  .rw-footer-zone { display: none; }
  .rw-scroll-zone { overflow: visible; padding: 0; margin: 0; }
  .rw-page { display: block; padding: 0; max-width: none; }
}