/* umego.app/wallet — Ume Wallet top-up. Builds on premium.20261105.css: the
   steps, fields, summary and result are the checkout's own. Only the amount
   tiles and the ৳ mark are new. */

.wl-defs { position: absolute; }

.wl-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wl-pack { position: relative; display: grid; gap: 6px; align-content: start; min-height: 128px; padding: 20px 18px 18px; border: 0; border-radius: 22px; background: var(--u-card); color: var(--u-ink); text-align: left; cursor: pointer; font: inherit; box-shadow: inset 0 0 0 1.5px var(--u-line); transition: box-shadow .25s, transform .25s var(--u-ease); }
.wl-pack:hover { transform: translateY(-2px); }
.wl-pack:focus-visible { outline: 2px solid var(--u-ink); outline-offset: 2px; }
.wl-pack[aria-checked="true"] { box-shadow: inset 0 0 0 2.5px var(--u-ink), var(--u-shadow-2); }
.wl-price { font: 800 32px/1 var(--u-display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.wl-coins { font-size: 15px; color: var(--u-muted); }
.wl-free { justify-self: start; margin-top: 4px; height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--u-sky-soft); color: var(--u-sky-ink); }
.wl-worth { font-size: 13.5px; color: var(--u-muted); }
.wl-note { margin: 16px 2px 0; font-size: 14px; line-height: 1.5; color: var(--u-muted); }

/* The app's money mark: onyx, with a thin champagne sign. */
.wl-mark { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #0D0D0E; box-shadow: inset 0 0 0 1px rgb(230 207 158 / .55); }
.wl-mark svg { width: 23px; height: 23px; fill: #E6CF9E; }

@media (max-width: 700px) {
  .wl-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-pack { min-height: 118px; padding: 16px; }
  .wl-price { font-size: 28px; }
}

/* Nothing sits above the result once the page header is hidden. */
.wl .pp-result { padding-top: clamp(32px, 6vw, 64px); }