/* ============================================================================
   v2 wallet — the rewards screen reshaped along the lines of the Jollibee
   Rewards tab.

   The structural move: this is a TAB, not a pushed screen. Jollibee's has no
   back arrow and keeps the nav bar, so this one does too — you leave it the
   way you arrived, through the nav. The accordions of the v1 wallet collapse
   into a single outlined card: a red hero holding the brand lockup and the
   balance, then one row per destination. Below it, Shop Rewards.

   Loads after wallet.css and reuses its QR panel for the full-screen code.
   ========================================================================= */

:root {
  --w2-amber: #EDAE49;    /* the Redeem pill; the wallet's own Suki colour */
}

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

/* no bottom padding of its own — the closing band carries the nav inset, so
   the grey runs all the way down to the nav the way the reference does */
.w2scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 var(--geo-gutter);
}
.w2scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ── the rewards card: red hero + rows, inside one outlined shell ───────── */
.w2card {
  margin-top: 16px;
  border: 1px solid var(--c-prim);
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-white);
}
/* A thin bar, not a banner: the mark sits small on the left the way the home
   card wears it, and the balance sits beside it. The home card uses the
   diamond mark alone, which only exists in red — on red this has to be the
   white lockup, matched to the same height. */
.w2hero {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: var(--c-chrome);
}
.w2hero img { height: 44px; width: auto; }
.w2hero__pts { font-size: 14px; font-weight: var(--fw-semi); color: var(--c-white); }
.w2hero__pts b { font-size: 20px; font-weight: var(--fw-bold); }

.w2row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 18px;
  background: none; border: 0; border-top: 1px solid var(--c-n10); cursor: pointer;
  text-align: left;
}
.w2row:first-of-type { border-top: 0; }
.w2row__ic { flex: 0 0 30px; display: flex; color: var(--c-prim); }
.w2row__ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w2row__label { flex: 1; font-family: var(--font); font-size: 16px; font-weight: var(--fw-reg); color: var(--c-txt); }
.w2row__chev { flex: 0 0 auto; display: flex; color: var(--c-prim); }
.w2row__chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── Redeem with Points ──────────────────────────────────────────────────
   One outlined card per merchant, each headed by its own mark on the red
   bar — the brand is the header, so nothing is stacked on top of it. The
   pill rail sits above the cards, at section level, the way the
   E-Marketplace's filters sit above its blocks. */
.w2redeem { margin-top: 24px; }
.w2redeem__hd { margin: 0 2px 10px; }   /* type comes from components.css */

.w2pills {
  display: flex; gap: 8px; margin-bottom: 14px;
  overflow-x: auto; scrollbar-width: none;
}
.w2pills::-webkit-scrollbar { width: 0; height: 0; }
.w2pill {
  flex: 0 0 auto;
  padding: 8px 16px; border: 0; border-radius: 999px;
  background: var(--c-tab-idle); cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: var(--fw-med); color: var(--c-txt-pill);
  white-space: nowrap;
}
.w2pill[aria-pressed='true'] { background: var(--c-chrome); color: var(--c-white); }

.w2mer {
  border: 1px solid var(--c-prim);
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-white);
}
.w2mer + .w2mer { margin-top: 16px; }
.w2mer__hd {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--c-chrome);
}
/* The Seafood City mark is red on transparent and would vanish on the red
   bar, so both marks sit in a white chip. */
.w2mer__logo {
  flex: 0 0 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  padding: 3px; border-radius: 8px; background: var(--c-white);
}
.w2mer__logo img { width: 100%; height: 100%; object-fit: contain; }
.w2mer__name {
  margin: 0;
  font-size: 17px; font-weight: var(--fw-bold); color: var(--c-white);
}

.w2item { display: flex; gap: 16px; padding: 18px; border-top: 1px solid var(--c-n10); }
.w2item:first-of-type { border-top: 0; }
.w2item__thumb {
  flex: 0 0 76px; height: 76px;
  border-radius: 10px; overflow: hidden; background: var(--c-white);
}
/* real product shots, square and already matted on white — so they fill the
   tile rather than sitting inset on a grey one the way the brand mark did */
.w2item__thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.2);   /* the shots carry a wide white matte — crop into it */
}
.w2item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.w2item__name { font-size: 15px; font-weight: var(--fw-bold); color: var(--c-txt); }
.w2item__note { font-size: 13px; color: var(--c-txt-2); line-height: 1.4; }
.w2item__exp  { font-size: 13px; color: var(--c-n50); }
.w2item__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.w2item__pts { font-size: 15px; font-weight: var(--fw-bold); color: var(--c-txt); }
.w2item__pts b { color: var(--c-prim); }
.w2item__cta {
  padding: 10px 18px; border: 0; border-radius: 20px;
  background: var(--w2-amber); cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: var(--fw-bold); color: #4A3708;
}

/* ── the closing band ───────────────────────────────────────────────────────
   Full-bleed grey, so it negates the scroller's gutter, and it absorbs the
   nav inset so the grey meets the nav with no white gap. The reference's nav
   is flat; ours has a FAB that overhangs it, so the link clears that too. */
.w2terms {
  margin: 28px calc(var(--geo-gutter) * -1) 0;
  padding: 18px var(--geo-gutter)
           calc(var(--geo-nav-slant) + var(--geo-nav-bar) + var(--geo-safe-bottom)
                + var(--geo-nav-fab) * 0.6 + 18px);
  background: var(--c-panel);
  text-align: center;
}
.w2terms__copy { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-txt); }
.w2terms__link {
  margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: var(--fw-semi);
  color: var(--c-prim);
}