/* ============================================================================
   SFC+ Wallet — the screen behind "My Rewards" / the points card.

   Mirrors, and names, the components it comes from:
     WalletHome.tsx          the page, the card colours, Need Help
     CommonHeader.tsx        the back arrow + centred title + rule
     AccordionCard.tsx       each coloured card, "Tap to expand", the info icon
     SukiQr.tsx              the open Suki Points panel
     QrTimer.tsx             the 30s ring that reissues the code
     QrCode.tsx / Barcode.tsx  the white QR panel and the barcode toggle

   Card colours are the app's own literals, not sampled from a screenshot.
   ========================================================================= */

:root {
  --w-checking:  #B91303;   /* Easy Digital Checking Account */
  --w-suki:      #EDAE49;   /* Suki Points */
  --w-cards:     #00798D;   /* Saved Cards */
  --w-vouchers:  #30638E;   /* Vouchers */
  --w-remit:     #003D5B;   /* SFC+ Remit */
  --w-chip:      #FFC9C966; /* the "= $5.30" pill */
  --w-qr-label:  #FFE2CE;   /* "New QR Code in" */
}

.app--wallet { display: flex; flex-direction: column; background: var(--c-white); }

/* ── CommonHeader.tsx ────────────────────────────────────────────────────── */
.wbar {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 0;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-sep);
}
.wbar__back {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--c-txt-2);
}
.wbar__back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wbar__title { font-size: 20px; font-weight: var(--fw-semi); color: var(--c-txt-2); }

/* ── the scrolling body ──────────────────────────────────────────────────── */
.wscroll { flex: 1; min-height: 0; overflow-y: auto; background: var(--c-white); }
.wscroll::-webkit-scrollbar { width: 0; height: 0; }
.wname {
  margin: 20px 0;
  font-size: 24px; font-weight: var(--fw-semi); color: #303030; text-align: center;
}
.wbody { padding: 0 var(--geo-gutter); display: flex; flex-direction: column; gap: 10px; }

/* ── AccordionCard.tsx ───────────────────────────────────────────────────── */
.acc { border-radius: 5px; overflow: hidden; background: var(--acc-bg); }
.acc__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 15px 20px;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.acc__title { max-width: 60%; font-family: var(--font); font-size: 18px; font-weight: var(--fw-semi); color: var(--c-white); }
.acc__hint { font-family: var(--font); font-size: 14px; font-weight: var(--fw-reg); color: var(--c-white); }
.acc__info {
  align-self: flex-start;
  display: flex; padding: 0; background: none; border: 0; cursor: pointer; color: var(--c-white);
}
.acc__info svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
/* closed cards show the hint; open ones show the info icon, as the component does */
.acc:not([data-open='true']) .acc__info,
.acc[data-open='true'] .acc__hint { display: none; }
.acc__rule { height: 1px; background: #FFFEFE; }
.acc__body { padding: 0 20px; }
.acc:not([data-open='true']) .acc__rule,
.acc:not([data-open='true']) .acc__body { display: none; }

/* ── SukiQr.tsx ──────────────────────────────────────────────────────────── */
.suki { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }
.suki__top { margin: 10px 0 4px; }
.suki__row { display: flex; align-items: center; justify-content: space-between; }
.suki__label { width: 50%; font-size: 14px; font-weight: var(--fw-med); color: var(--c-white); }
.suki__timerwrap { display: flex; align-items: center; gap: 6px; }
.suki__timerlabel { font-size: 12px; font-weight: var(--fw-med); color: var(--w-qr-label); }
.suki__balance { display: flex; align-items: center; gap: 10px; margin: -2px 0 2px; }
.suki__pts { font-size: 40px; font-weight: var(--fw-semi); color: var(--c-white); line-height: 1.15; }
.suki__cash {
  padding: 6px 12px 6px 10px; border-radius: 20px;
  background: var(--w-chip);
  font-size: 18px; font-weight: var(--fw-med); color: var(--c-white);
}
.suki__note { font-size: 14px; font-weight: var(--fw-med); color: var(--c-white); text-align: center; }

/* QrTimer.tsx — a 33px ring that empties over 30s, then reissues the code */
.qtimer { position: relative; width: 33px; height: 33px; flex: 0 0 33px; }
.qtimer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qtimer circle { fill: none; stroke-width: 4; }
.qtimer .qtimer__track { stroke: rgba(255, 255, 255, 0.35); }
.qtimer .qtimer__fill  { stroke: var(--c-white); stroke-linecap: round; transition: stroke-dashoffset 100ms linear; }
.qtimer span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--fw-med); color: var(--c-white);
}

/* CommonButton — the two outlined actions */
.wbtn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 44px;
  border-radius: 12px; border: 1px solid var(--c-white);
  background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 16px; font-weight: var(--fw-semi); color: var(--c-white);
}

/* ── QrCode.tsx — the white panel ────────────────────────────────────────── */
.qrpanel { background: var(--c-white); border-radius: 12px; overflow: hidden; }
.qrpanel__act {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 16px; font-weight: var(--fw-med); color: var(--c-txt);
}
.qrpanel__act img { width: 16px; height: 16px; object-fit: contain; }
.qrpanel__act--dl { font-weight: var(--fw-semi); color: var(--c-chrome); }
.qrpanel__act--dl svg { width: 20px; height: 20px; fill: none; stroke: var(--c-prim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qrpanel__rule { height: 1px; background: var(--c-n10); }
/* the logo sits over the code, so the pair needs a positioned wrapper of
   their own — the code element itself is rebuilt on every reissue */
.qrpanel__codewrap { position: relative; display: flex; align-items: center; justify-content: center; }
.qrpanel__code { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 0 4px; }
.qrpanel__code svg { width: 91%; height: auto; display: block; }
.qrpanel__logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 25.5%; height: auto;   /* 28% of the 91%-wide code */
}
/* the barcode reuses the panel, just wider than it is tall */
.qrpanel__code--bar svg { width: 91%; height: 90px; }

/* ── Need Help ───────────────────────────────────────────────────────────── */
.whelp { margin: 20px var(--geo-gutter) 30px; }
.whelp h2 { margin: 0 0 2px; font-size: 16px; font-weight: var(--fw-bold); color: #14181C; }
.whelp p { margin: 0; font-size: 14px; font-weight: var(--fw-reg); color: #777; line-height: 1.5; }

/* The home-indicator inset stays brand red on this screen, as on the device. */
.wsafe { flex: 0 0 auto; height: var(--geo-safe-bottom); background: var(--c-chrome); }