/* ============================================================
   upay as the host app

   The app opens as upay and carries UCB Digital Banking inside it,
   so the wallet's own home and login are drawn here, from the
   shipping upay app: a yellow top band with the round mark, the
   customer's name and number, and a blue "tap for balance" pill;
   a white service grid beneath it.

   Yellow is a fill that always carries dark ink — yellow-on-white
   type fails contrast at every size (see tokens.css).
   ============================================================ */

/* ---------- Top band ---------- */
.upay-top {
  position: relative;
  flex-shrink: 0;
  margin-top: calc(-1 * var(--statusbar-h));
  padding: calc(12px + var(--statusbar-h)) 18px 42px;
  background:
    radial-gradient(120% 90% at 92% -12%, rgba(255, 255, 255, 0.4), transparent 56%),
    linear-gradient(180deg, #FFE24F 0%, var(--upay-yellow, #FFD500) 62%);
  color: var(--upay-blue-900, #012B59);
  overflow: hidden;
}
.upay-top::after {
  content: '';
  position: absolute;
  width: 210px; height: 210px;
  left: -80px; bottom: -120px;
  border-radius: 50%;
  border: 26px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.upay-top-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upay-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.upay-id-logo {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(1, 43, 89, 0.16);
  flex-shrink: 0;
}
.upay-id-logo img { width: 34px; height: 34px; display: block; }
.upay-id-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upay-id-no {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.72;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* The language switch sits on yellow, so the selected half is blue with white
   type rather than the brand fill. */
.upay-lang {
  display: flex; align-items: center;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(1, 43, 89, 0.1);
  cursor: pointer;
  flex-shrink: 0;
}
.upay-lang span {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--upay-blue-900, #012B59);
  opacity: 0.7;
}
.upay-lang span.on { background: var(--upay-blue, #0154A8); color: #fff; opacity: 1; }

/* "Tap for balance". upay does not show the balance on arrival — it reveals it
   for a few seconds on tap, so the figure is never left on screen. */
.upay-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  padding: 5px 16px 5px 5px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--upay-blue, #0154A8);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(1, 84, 168, 0.3);
  transition: transform 0.15s, background 0.2s;
}
.upay-balance-pill:active { transform: scale(0.96); }
.upay-balance-pill.shown { background: var(--upay-blue-700, #013F80); }
.upay-balance-coin {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--upay-blue, #0154A8);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.45s var(--ease-drawer);
}
.upay-balance-pill.shown .upay-balance-coin { transform: rotate(360deg); }

.upay-top-icons { display: flex; gap: 8px; }
.upay-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(1, 43, 89, 0.08);
  color: var(--upay-blue-900, #012B59);
  cursor: pointer;
  transition: transform 0.15s;
}
.upay-icon-btn:active { transform: scale(0.9); }

/* ============================================================
   Home hero — balance first

   The wallet home leads with the figure the customer opened the app to see,
   then the four things they do with it, and the service shelf rides up over
   the band's bottom edge. The balance still starts masked: showing it is a
   tap, not the default, because the screen is read in public.
   ============================================================ */
.upay-top.upay-hero {
  padding-bottom: 54px;
  isolation: isolate;
}

/* Three light pools drifting across the brand yellow. Slow enough (26s) to
   read as light on a surface rather than as an animation playing — a wallet
   home that visibly loops looks like a screensaver. Pure CSS, one compositor
   layer, no image required. */
.upay-hero-glow {
  position: absolute;
  inset: -22% -12% auto -12%;
  height: 160%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 16% 20%, rgba(255, 255, 255, 0.78), transparent 62%),
    radial-gradient(32% 36% at 88% 6%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(46% 48% at 64% 92%, rgba(255, 186, 0, 0.6), transparent 66%);
  animation: upayDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes upayDrift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.08); }
}

/* Optional generated texture, gated by UPAY_HERO_ART so a missing file is
   never requested. */
.upay-hero.has-art .upay-hero-glow {
  background-image:
    url('../assets/upay/hero-texture.png'),
    radial-gradient(38% 42% at 16% 20%, rgba(255, 255, 255, 0.72), transparent 62%),
    radial-gradient(46% 48% at 64% 92%, rgba(255, 186, 0, 0.55), transparent 66%);
  background-size: cover, auto, auto;
  background-position: center;
  opacity: 0.96;
}

/* The hero deliberately does not compact on scroll. It is not pinned, so it
   scrolls away like any other content; shrinking it at the same time drags the
   action row into the status bar and reads as a rendering fault rather than as
   a transition. Bringing the balance back on scroll needs a separate pinned
   bar, not a smaller hero. */

.upay-hero-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.upay-hero-name .upay-id-logo { width: 38px; height: 38px; }
.upay-hero-name .upay-id-logo img { width: 28px; height: 28px; }
.upay-hero-hello { font-size: 11.5px; font-weight: 700; opacity: 0.7; line-height: 1.2; }

.upay-balance-block {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  text-align: center;
}
.upay-balance-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.76;
}
.upay-balance-eye {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--upay-blue-900, #012B59);
  cursor: pointer;
  transition: transform 0.15s;
}
.upay-balance-eye:active { transform: scale(0.88); }
.upay-balance-amount {
  margin-top: 4px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.upay-balance-amount .dec { font-size: 19px; opacity: 0.66; }
.upay-balance-amount.masked { letter-spacing: 3px; }
.upay-balance-total {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Four actions on the band. The bank's door wears the bank's red so it reads
   as a different destination, not another wallet function. */
.upay-hero-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 20px;
}
.upay-hero-action {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: none; background: none; padding: 0;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s;
}
.upay-hero-action:active { transform: scale(0.92); }
.upay-hero-action-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  color: var(--upay-blue, #0154A8);
  box-shadow: 0 4px 12px rgba(1, 43, 89, 0.12);
}
.upay-hero-action-icon.bank { background: #fff; color: var(--ucb-red); }
.upay-hero-action-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* ---------- Service panel ---------- */
.upay-panel {
  position: relative;
  margin-top: -34px;
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 4px 14px 16px;
}
.upay-panel-tabs {
  display: flex;
  gap: 26px;
  padding: 0 4px;
  border-bottom: 1px solid var(--color-border-2);
}
.upay-tab {
  position: relative;
  border: none; background: none;
  padding: 13px 2px 11px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.18s;
}
.upay-tab.on { color: var(--color-text-main); }
.upay-tab.on::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  border-radius: 3px;
  background: var(--upay-blue, #0154A8);
}
.upay-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 4px;
  padding: 16px 0 2px;
}
.upay-tile-grid .upay-mini-label { font-size: 10.5px; }

/* ---------- depth and motion ----------
   The panel is glass over the band rather than a flat card, the icons have a
   light source, and both react to a press. Everything here is decoration: the
   layout underneath is unchanged, and the reduced-motion block at the end of
   this file takes all of it away for anyone who asked for that. */
.upay-panel {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 18px 42px rgba(1, 43, 89, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
/* One diagonal pass of light as the panel arrives — a highlight, not a loop. */
.upay-panel::after {
  content: '';
  position: absolute;
  top: 0; left: -65%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-12deg);
  pointer-events: none;
  animation: upaySweep 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s 1 both;
}
@keyframes upaySweep { to { left: 125%; } }

.upay-tile-grid .upay-mini {
  animation: revealUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 26ms + 80ms);
}
.upay-tile-grid .upay-mini-icon {
  background: linear-gradient(160deg, var(--tint) 0%, #fff 120%);
  box-shadow:
    0 6px 14px rgba(1, 43, 89, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 0.18s var(--ease-drawer), box-shadow 0.18s;
}
.upay-tile-grid .upay-mini:active .upay-mini-icon {
  transform: translateY(1px) scale(0.93);
  box-shadow: 0 2px 8px rgba(1, 43, 89, 0.14);
}

.upay-hero-action-icon {
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 8px 18px rgba(1, 43, 89, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.18s var(--ease-drawer), box-shadow 0.18s;
}
.upay-hero-action:active .upay-hero-action-icon {
  transform: translateY(2px) scale(0.92);
  box-shadow: 0 3px 10px rgba(1, 43, 89, 0.18);
}

.upay-balance-amount { text-shadow: 0 8px 22px rgba(1, 43, 89, 0.16); }
.upay-balance-eye { transition: transform 0.18s var(--ease-drawer), background 0.2s; }
.upay-balance-eye:hover { background: rgba(255, 255, 255, 0.8); }

/* The tab underline slides between the two labels instead of cutting. */
.upay-tab::after { transition: transform 0.28s var(--ease-drawer), opacity 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .upay-hero-glow,
  .upay-panel::after,
  .upay-tile-grid .upay-mini { animation: none !important; }
  .upay-hero,
  .upay-hero-hello,
  .upay-balance-total,
  .upay-balance-amount,
  .upay-hero-action-icon,
  .upay-tile-grid .upay-mini-icon { transition: none !important; }
}

/* ---------- Recently used mini-apps ---------- */
.upay-apps-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}
.upay-apps-row::-webkit-scrollbar { display: none; }
.upay-app {
  flex: 0 0 auto;
  width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: none; background: none; padding: 0;
  cursor: pointer;
  transition: transform 0.15s;
}
.upay-app:active { transform: scale(0.92); }
.upay-app-logo {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.upay-app-logo img { width: 34px; height: 34px; object-fit: contain; display: block; }
.upay-app-name {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--color-text-general);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Body ---------- */
.home-body.upay-body { margin-top: -24px; }
.home-body.upay-body.upay-body-hero { margin-top: 0; padding-top: 0; }

.upay-grid-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 8px 14px;
}
/* The Banking tile is the one door into the bank, so it wears the bank's red
   while everything around it is the wallet's blue. */
.upay-action-icon.bank {
  background: var(--ucb-red-100);
  color: var(--ucb-red);
  border-color: rgba(225, 28, 40, 0.25);
}

/* ---------- Digital Banking entry ---------- */
.db-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius-lg);
  text-align: left;
  color: #fff;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(120deg, var(--ucb-maroon-800) 0%, var(--ucb-red-600) 100%);
  box-shadow: 0 8px 22px rgba(110, 12, 18, 0.28);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s;
}
.db-entry:active { transform: scale(0.985); }
.db-entry-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.db-entry-mark img { width: 40px; height: 40px; display: block; }
.db-entry-title { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; }
.db-entry-sub { display: block; font-size: 11.5px; opacity: 0.86; margin-top: 3px; line-height: 1.35; }
.db-entry-go {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ---------- Digital Banking home header ---------- */
.db-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.db-brand .ucb-mark {
  font-size: 17px;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}
.db-brand-title { font-size: 15px; font-weight: 800; line-height: 1.1; }
.db-brand-sub { font-size: 10px; opacity: 0.78; margin-top: 2px; letter-spacing: 0.2px; }

/* ---------- upay Payments ---------- */
.upay-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 4px; }
.upay-mini {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: none; background: none; padding: 0;
  cursor: pointer;
  transition: transform 0.15s;
}
.upay-mini:active { transform: scale(0.92); }
.upay-mini-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint);
  color: var(--ink);
}
/* Generated icon art sits inside the same tinted chip the line icons use, so a
   shelf that mixes the two still reads as one row. */
.upay-mini-icon.art { padding: 2px; }
.upay-mini-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.upay-mini-label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--color-text-main);
}

/* ---------- Login ---------- */
.login-upay-top {
  margin: calc(-1 * var(--statusbar-h)) -22px 0;
  padding: calc(14px + var(--statusbar-h)) 22px 26px;
  border-radius: 0 0 28px 28px;
  background:
    radial-gradient(120% 90% at 90% -10%, rgba(255, 255, 255, 0.4), transparent 56%),
    linear-gradient(180deg, #FFE24F 0%, var(--upay-yellow, #FFD500) 70%);
  color: var(--upay-blue-900, #012B59);
}
.login-upay-top .login-top { padding-top: 0; }
.login-upay-company { font-size: 11.5px; font-weight: 700; opacity: 0.72; }
.login-upay-top .login-lang {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(1, 43, 89, 0.1);
}
.device[data-brand="upay"] .login-lang span.on { background: var(--upay-blue); color: #fff; }
.login-upay-logo {
  width: 86px; height: 86px;
  margin: 18px auto 0;
  border-radius: 26px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(1, 43, 89, 0.18);
}
.login-upay-logo img { width: 66px; height: 66px; display: block; }
.login-upay-name {
  margin-top: 14px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.login-upay-tagline {
  margin: 6px auto 0;
  max-width: 290px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  opacity: 0.78;
}
.login-cc {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-secondary);
  padding-right: 8px;
  border-right: 1px solid var(--color-border-1);
}