/* ============================================================================
   SFC+ home screen. Each block names the component it mirrors in
   talino-labs/sfc-plus-app so the two can be diffed later.
   ========================================================================= */

/* ── HalfCircleBackground.tsx ────────────────────────────────────────────────
   A rounded rect parked above the fold; only its curved bottom edge shows,
   which is the soft grey arc behind the balance card. Same arithmetic as the
   component: bottom edge = CARD_TOP + CARD_HEIGHT * 0.75. */
.arc {
  position: absolute; z-index: 50;
  width: calc(var(--geo-screen-w) * 1.75);
  height: var(--geo-screen-w);
  left: calc(var(--geo-screen-w) * -0.375);
  top: calc(var(--geo-card-top) + (var(--geo-card-h) * 0.75) - var(--geo-screen-w));
  border-radius: calc(var(--geo-screen-w) / 2);
  background: var(--c-arc);
  pointer-events: none;
}

/* ── Header.tsx ───────────────────────────────────────────────────────────── */
.head {
  position: relative; z-index: 99;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px var(--geo-gutter) 5px;
  background: var(--c-chrome);
}
.head__greet { display: flex; flex-direction: column; }
.head__hi   { font-size: 14px; font-weight: var(--fw-reg);  color: var(--c-white); line-height: 1.35; }
.head__name { font-size: 24px; font-weight: var(--fw-semi); color: var(--c-white); line-height: 1.25; }
.head__logo { width: 115px; height: 55px; object-fit: contain; }

/* ── TotalSukiPoints.tsx ─────────────────────────────────────────────────────
   Absolutely placed over the header + arc, so the content beneath scrolls
   under it. That is the app's behaviour, not a prototype shortcut. */
.balance {
  position: absolute; z-index: 100;
  top: var(--geo-card-top); left: 50%; transform: translateX(-50%);
  width: var(--geo-card-w);
  min-height: var(--geo-card-h);
  display: flex; flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: url('../assets/brand/suki-points-card-red.png') center / cover no-repeat;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.balance__head { padding: 20px 20px 5px; display: flex; flex-direction: column; gap: 4px; }
.balance__label { font-size: 14px; font-weight: var(--fw-reg); color: var(--c-white); }
.balance__value { font-size: 42px; font-weight: var(--fw-semi); color: var(--c-white); line-height: 1.1; }
.balance__cash {
  align-self: flex-start; margin-top: 6px;
  padding: 4px 12px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 16px; font-weight: var(--fw-med); color: var(--c-white);
}
.balance__cta {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--c-white);
}
.balance__cta img { width: 20px; height: 20px; }

/* ── Home.tsx scroll structure ───────────────────────────────────────────────
   Two nested scrollers, as shipped: an outer one padded 200px clear of the
   card, and an inner one capped at 48vh. The cap is why the content stops
   short of the nav bar on a real device. */
.scroll-outer { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 50px; }
.scroll-pad   { padding-top: var(--geo-content-top); margin-bottom: 50px; }
.scroll-inner { max-height: var(--geo-scroll-h); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scroll-outer::-webkit-scrollbar, .scroll-inner::-webkit-scrollbar { width: 0; height: 0; }

/* ── CarouselSliderContent.tsx ───────────────────────────────────────────────
   Slides are full screen width; the artwork inside is (width − 80) wide. */
.carousel { position: relative; margin-top: 24px; height: 137px; }
.carousel__viewport { height: 100%; overflow: hidden; }
.carousel__track { display: flex; width: 100%; height: 100%; transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.carousel__slide {
  flex: 0 0 var(--geo-screen-w);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.carousel__slide img {
  width: calc(var(--geo-screen-w) - 80px); height: 137px;
  object-fit: cover; border-radius: 13px;
}
.carousel__dots {
  position: absolute; bottom: -20px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
}
.carousel__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px;
  background: rgba(0, 0, 0, 0.2); cursor: pointer;
}
.carousel__dots button[aria-current='true'] { background: var(--c-chrome); }

/* ── ServicesButtons.tsx ─────────────────────────────────────────────────── */
.explore { width: calc(var(--geo-screen-w) - 40px); min-width: 330px; margin: 34px auto 0; }
.explore__title {
  margin: 0 0 10px;
  font-size: 18px; font-weight: var(--fw-med); color: var(--c-section-title);
}

.filters { display: flex; gap: 8px; align-items: flex-start; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { width: 0; height: 0; }
.filter {
  flex: 0 0 64px;
  height: 66px; padding: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 4px;
  border: 1px solid transparent; border-radius: 8px;
  background: var(--c-panel); cursor: pointer;
}
/* Selected pill grows 10px and squares off its foot so it fuses with the
   panel below — the app's own affordance for "this filter owns this grid". */
.filter[aria-pressed='true'] {
  height: 76px; padding-bottom: 10px;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.filter img { width: 24px; height: 24px; object-fit: contain; }
.filter span {
  font-size: 10px; font-weight: var(--fw-med); color: var(--c-txt-pill);
  text-align: center; line-height: 1.2; white-space: pre-line;
}

.grid-panel { background: var(--c-panel); border-radius: 8px; padding: 8px; }
.grid-note {
  margin: 0 0 8px;
  font-size: 14px; font-weight: var(--fw-med); font-style: italic;
  color: var(--c-n); text-align: center;
}
.grid-pages { overflow: hidden; }
.grid-track { display: flex; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.grid-page {
  flex: 0 0 calc(var(--geo-screen-w) - 56px);   /* container − 16 panel padding */
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.grid-cell { display: flex; justify-content: center; margin: 10px 0; padding: 0 2px; }
.tile {
  width: 100%; max-width: 77px; padding: 1px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
}
.tile:active { background: linear-gradient(135deg, #FF2A17, #FF9A41, #FF963A, #FF9A41, #FF2A17); padding: 2px; }
.tile__inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 70px; height: 70px; margin: 0 auto; padding-top: 8px;
  background: var(--c-white); border-radius: 7px;
}
.tile__ic { height: 32px; display: flex; align-items: center; justify-content: center; }
.tile__ic img { width: 40px; height: 32px; object-fit: contain; }
.tile__label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 8px; font-weight: var(--fw-med);
  color: var(--c-txt); text-align: center; line-height: 1.25;
}
.grid-dots { display: flex; justify-content: center; gap: 8px; margin: 10px 0 8px; }
.grid-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--c-dot-idle); }
.grid-dots i.is-on { background: var(--c-dot-active); }

/* ── RecentTransactionsAndRewards.tsx ─────────────────────────────────────── */
.activity { margin: var(--geo-gutter); }
.activity__title {
  margin: 0 0 10px;
  font-size: 18px; font-weight: var(--fw-semi); color: var(--c-txt-heading);
}
.tabs { display: flex; gap: 2px; position: relative; z-index: 1; top: 1px; }
.tab {
  padding: 12px 20px; border: 0; cursor: pointer;
  border-radius: 10px 10px 0 0;
  font-family: var(--font); font-size: 13px; letter-spacing: 0.3px;
  background: var(--c-tab-idle); color: var(--c-txt-heading); font-weight: var(--fw-reg);
}
.tab[aria-selected='true'] {
  background: var(--c-white); color: var(--c-txt-tab-active); font-weight: var(--fw-semi);
  box-shadow: 0 -5px 4px rgba(0, 0, 0, 0.06);
}
.activity__panel {
  position: relative; z-index: 0;
  background: var(--c-white);
  border-radius: 0 10px 10px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ── TransactionHistory.tsx / PurchaseTransactionHistory.tsx ─────────────── */
.txn { padding: 0 var(--geo-gutter); }
.txn__body { padding: 20px 0; }
.txn__top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.txn__ic { width: 35px; height: 35px; flex: 0 0 35px; object-fit: contain; }
.txn__line { display: flex; align-items: center; flex: 1; }
.txn__name {
  width: 60%; font-size: 13px; font-weight: var(--fw-med); color: var(--c-txt); line-height: 1.3;
}
.txn__amt { width: 40%; text-align: right; font-size: 13px; font-weight: var(--fw-med); }
.txn__amt.is-up   { color: var(--c-points-up); }
.txn__amt.is-down { color: var(--c-points-down); }
.txn__amt.is-cash { color: var(--c-txt); font-weight: var(--fw-reg); }
.txn__meta { display: flex; justify-content: space-between; gap: 30px; font-size: 10px; color: var(--c-txt-meta); }
.txn__meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txn + .txn .txn__body,
.txn__body.has-rule { border-top: 1px solid var(--c-sep); }
.viewall {
  display: block; width: 100%; padding: 20px 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 16px; font-weight: var(--fw-med); color: var(--c-txt-2);
}

/* ── NavigationBar.tsx ───────────────────────────────────────────────────────
   The bar's top edge rises 5px to a point at centre — drawn as an SVG path,
   exactly as the component does it. */
.nav {
  position: absolute; z-index: 150;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--geo-nav-slant) + var(--geo-nav-bar) + var(--geo-safe-bottom));
}
.nav__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nav__row {
  position: absolute; left: 0; right: 0;
  top: var(--geo-nav-slant); bottom: var(--geo-safe-bottom);
  display: flex; align-items: center;
}
.nav__tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}
.nav__tab img { width: 24px; height: 24px; object-fit: contain; }
/* The relabelled tabs have no shipped PNG — their glyphs are drawn, sized
   to match the ones that do. */
.nav__tab svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--c-white); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav__tab span {
  margin-top: 4px;
  font-family: var(--font); font-size: 10px; font-weight: var(--fw-med); color: var(--c-white);
}
.nav__tab--spacer { pointer-events: none; }
.nav__tab--spacer i { display: block; width: 24px; height: 24px; }
.nav__fab {
  position: absolute; z-index: 10;
  left: 50%; transform: translateX(-50%);
  top: calc(var(--geo-nav-fab) / -2);
  width: var(--geo-nav-fab); height: var(--geo-nav-fab);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-white);
  border: var(--geo-nav-border) solid var(--c-chrome);
  cursor: pointer;
}
.nav__fab img { width: 35px; height: 35px; object-fit: contain; }

/* ── v2's section headers ────────────────────────────────────────────────
      The shipped build gives "EXPLORE THE APP" a treatment nothing else on
      the screen has: 18px medium, in the section red, set in caps. v2 uses it
      for every section header so the screens read as one family. v1 gets the
      caps from the literal text in its markup; v2 sets the case here, so its
      markup stays readable. Scoped to the v2 screens — v1 stays as shipped,
      where only Explore the App wears it. */
.app--v2 .hsvc__title,
.app--v2 .activity__title,
.app--walletv2 .w2redeem__hd,
.app--services .svcsection__hd {
  font-size: 18px;
  font-weight: var(--fw-med);
  color: var(--c-section-title);
  text-transform: uppercase;
}

/* ── v2's screen title bar: a title and a rule, nothing else. Shared by the
      rewards tab and E-Marketplace, neither of which is pushed, so neither
      carries a back arrow. ─────────────────────────────────────────────────── */
.w2bar {
  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);
}
.w2bar__title { font-size: 20px; font-weight: var(--fw-semi); color: var(--c-txt); }

/* ── toast: stands in for the screens this prototype does not cover ──────── */
.toast {
  position: absolute; z-index: 300;
  left: 50%; bottom: 90px; transform: translate(-50%, 8px);
  max-width: 300px; padding: 10px 16px;
  border-radius: 20px;
  background: rgba(29, 36, 51, 0.92);
  color: var(--c-white); font-size: 13px; font-weight: var(--fw-med); text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── ViewFullScreenModal.tsx ─────────────────────────────────────────────────
   Shared: the v1 wallet throws it over the Suki accordion, the Suki QR page
   over either of its two codes. Lives here rather than in one screen's file
   because both reach for it. */
.wfull {
  position: absolute; inset: 0; z-index: 400;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 24px; background: var(--c-white);
}
.wfull[data-open='true'] { display: flex; }
.wfull__codewrap { position: relative; display: flex; align-items: center; justify-content: center; width: 80%; }
.wfull__code { display: flex; align-items: center; justify-content: center; width: 100%; }
.wfull__code svg { width: 100%; height: auto; }
.wfull__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28%; }
.wfull__close {
  padding: 10px 24px; border: 0; border-radius: 22px;
  background: var(--c-chrome); color: var(--c-white); cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: var(--fw-semi);
}