/* ============================================================================
 * replica.css — the wallet's screens, styled to match the product.
 *
 * Everything is scoped to .rep so the product's palette can never leak into
 * the marketing chrome around it, and so the marketing font never changes the
 * measured width of a screen.
 * ==========================================================================*/

.rep {
  font-family: 'Figtree', 'Figtree Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dw-ink);
  background: var(--dw-bg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-font-smoothing: antialiased;
}
.rep *, .rep *::before, .rep *::after { box-sizing: border-box; }
.rep svg { width: 1em; height: 1em; display: block; }

/* A screen keeps the product's ink even inside a dark band, which turns the
 * marketing headings around it white. Equal specificity to `.band--dark h4`,
 * and replica.css is loaded after layout.css, so this wins. */
.rep h1, .rep h2, .rep h3, .rep h4 { color: var(--dw-ink); }


/* --- header -------------------------------------------------------------- */
.rep .w-head { display: flex; align-items: center; gap: 10px; }
.rep .w-avatar {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, #5B7DEB, #7E3CC3);
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em;
  display: grid; place-items: center;
}
.rep .w-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep .w-who > b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.rep .w-powered { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--dw-ink-soft); }
.rep .w-powered b { color: var(--dw-purple); font-weight: 700; }
.rep .w-powered__mark {
  width: 13px; height: 13px; border-radius: 4px; flex: none;
  background: linear-gradient(135deg, #6930C3, #60BCCA);
  position: relative;
}
.rep .w-powered__mark::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 4px; height: 4px; border-radius: 50%; background: #fff;
}
.rep .w-bell { margin-left: auto; position: relative; color: var(--dw-ink); font-size: 19px; flex: none; }
.rep .w-bell i {
  position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--dw-topup); color: #fff;
  font-size: 9px; font-weight: 700; font-style: normal; display: grid; place-items: center;
}

/* --- low balance --------------------------------------------------------- */
.rep .w-lowbal {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 14px; background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff;
}
.rep .w-lowbal__icon { font-size: 20px; flex: none; opacity: .95; }
.rep .w-lowbal > span { display: flex; flex-direction: column; }
.rep .w-lowbal b { font-size: 13px; }
.rep .w-lowbal i { font-style: italic; font-size: 11px; opacity: .95; }
.rep .w-lowbal__btn {
  margin-left: auto; flex: none; background: #fff; color: #C2410C;
  font-weight: 700; font-size: 12px; padding: 7px 14px; border-radius: 8px;
}

/* --- balance ------------------------------------------------------------- */
.rep .w-hero {
  border-radius: 16px; padding: 16px;
  background: linear-gradient(110deg, var(--dw-hero-personal-from) 0%, #7B5FD6 45%, #63B6CE 100%);
  color: #fff; box-shadow: 0 12px 26px rgba(86, 47, 173, .28);
}
.rep .w-hero__label { font-size: 11.5px; opacity: .92; display: block; }
.rep .w-hero__amount { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.rep .w-months { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.rep .w-month {
  background: rgba(255, 255, 255, .17); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px; padding: 8px 9px;
}
.rep .w-month > span { display: block; font-size: 9.5px; opacity: .92; }
.rep .w-month b { display: block; font-size: 12.5px; font-weight: 700; margin-top: 1px; }

/* --- actions ------------------------------------------------------------- */
.rep .w-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.rep .w-action {
  border-radius: 14px; padding: 12px 9px; color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  box-shadow: 0 8px 18px rgba(17, 24, 39, .14);
}
.rep .w-action svg { font-size: 17px; padding: 6px; width: 29px; height: 29px; border-radius: 9px; background: rgba(255, 255, 255, .22); }
.rep .w-action b { font-size: 13px; font-weight: 700; }
.rep .w-action > span { font-size: 9.5px; opacity: .95; line-height: 1.25; }
.rep .w-action--topup { background: linear-gradient(160deg, var(--dw-topup), var(--dw-topup-deep)); }
.rep .w-action--transfer { background: linear-gradient(160deg, #3B82F6, var(--dw-transfer-deep)); }
.rep .w-action--withdraw { background: linear-gradient(160deg, var(--dw-withdraw), var(--dw-withdraw-deep)); }

/* --- cards, tabs, transactions ------------------------------------------- */
.rep .w-card { background: var(--dw-surface); border-radius: 16px; padding: 12px; box-shadow: 0 8px 20px rgba(17, 24, 39, .06); }
.rep .w-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.rep .w-card__head b { color: var(--dw-heading); font-size: 14px; font-weight: 700; }
.rep .w-link { color: var(--dw-heading); font-size: 11px; font-weight: 600; border: 1px solid #CFE0FF; border-radius: 8px; padding: 4px 9px; }
.rep .w-tabs { display: flex; gap: 3px; background: #F4F6FA; border-radius: 9px; padding: 3px; margin-bottom: 9px; overflow: hidden; }
.rep .w-tab { flex: 1; text-align: center; font-size: 10px; color: #64748B; padding: 6px 2px; border-radius: 7px; white-space: nowrap; }
.rep .w-tab.is-on { background: #fff; color: var(--dw-heading); font-weight: 700; box-shadow: 0 1px 3px rgba(17, 24, 39, .08); }
.rep .w-txs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rep .w-tx { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid #F1F4F9; }
.rep .w-tx:first-child { border-top: 0; }
.rep .w-tx__icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 15px; flex: none; }
.rep .w-tx--in .w-tx__icon { background: var(--dw-topup); }
.rep .w-tx--out .w-tx__icon { background: var(--dw-withdraw); }
.rep .w-tx--mid .w-tx__icon { background: var(--dw-transfer); }
.rep .w-tx--pay .w-tx__icon { background: #F59E0B; }
.rep .w-tx__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rep .w-tx__body b { font-size: 12px; font-weight: 700; }
.rep .w-tx__body span { font-size: 10px; color: var(--dw-ink-soft); }
.rep .w-tx__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.rep .w-tx__amt { font-size: 12px; font-weight: 700; white-space: nowrap; }
.rep .is-pos { color: var(--dw-pos); }
.rep .is-neg { color: var(--dw-neg); }
.rep .w-empty { text-align: center; color: var(--dw-ink-soft); font-size: 11.5px; padding: 26px 12px; margin: 0; }

.rep .w-pill { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.rep .w-pill--settled { color: var(--dw-pill-settled-fg); background: var(--dw-pill-settled-bg); }
.rep .w-pill--pending { color: var(--dw-pill-pending-fg); background: var(--dw-pill-pending-bg); }
.rep .w-pill--paidout { color: var(--dw-pill-paidout-fg); background: var(--dw-pill-paidout-bg); }
.rep .w-pill--rejected { color: var(--dw-pill-rejected-fg); background: var(--dw-pill-rejected-bg); }

/* --- wizards ------------------------------------------------------------- */
.rep .wz { background: var(--dw-bg); border-radius: 14px; display: flex; flex-direction: column; gap: 11px; }
.rep .wz-head { position: relative; background: var(--dw-surface); border-radius: 12px; padding: 12px 14px; }
.rep .wz-head b { display: block; font-size: 15px; font-weight: 700; }
.rep .wz-head > span { font-size: 11px; color: var(--dw-ink-soft); }
.rep .wz-x { position: absolute; top: 12px; right: 14px; font-style: normal; font-size: 17px; color: var(--dw-ink-soft); }
.rep .wz-steps { display: flex; align-items: center; gap: 6px; background: var(--dw-surface); border-radius: 12px; padding: 12px; }
.rep .wz-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.rep .wz-step i {
  width: 26px; height: 26px; border-radius: 50%; background: #EEF1F6; color: #9AA3B2;
  font-style: normal; font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.rep .wz-step span { font-size: 10px; color: #9AA3B2; }
.rep .wz-steps--topup .wz-step.is-on i { background: var(--dw-topup); color: #fff; }
.rep .wz-steps--transfer .wz-step.is-on i { background: var(--dw-transfer); color: #fff; }
.rep .wz-steps--withdraw .wz-step.is-on i { background: var(--dw-withdraw); color: #fff; }
.rep .wz-step.is-on span { color: var(--dw-ink); font-weight: 700; }
.rep .wz-card { background: var(--dw-surface); border-radius: 14px; padding: 13px; box-shadow: 0 6px 16px rgba(17, 24, 39, .05); }
.rep .wz-card h4 { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; }
.rep .wz-balance {
  border-radius: 12px; padding: 10px 12px; color: #fff; margin-bottom: 10px;
  background: linear-gradient(110deg, var(--dw-purple), #7B5FD6);
}
.rep .wz-balance > span { display: block; font-size: 10.5px; opacity: .92; }
.rep .wz-balance b { font-size: 17px; font-weight: 800; }
.rep .wz-amount { border: 1px solid #E3E7EF; background: #F7F8FC; border-radius: 10px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; }
.rep .wz-amount > span { font-size: 10.5px; color: var(--dw-ink-soft); }
.rep .wz-amount b { font-size: 15px; font-weight: 700; }
.rep .wz-amount--topup b { color: var(--dw-topup); }
.rep .wz-amount--transfer b { color: var(--dw-transfer); }
.rep .wz-amount--withdraw b { color: var(--dw-withdraw); }
.rep .wz-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 9px; }
.rep .wz-chip {
  border: 1px solid #E3E7EF; border-radius: 10px; padding: 7px 4px; text-align: center;
  font-size: 10.5px; font-weight: 700; display: flex; flex-direction: column; gap: 1px;
}
.rep .wz-chip i { font-style: normal; font-weight: 500; font-size: 9px; color: var(--dw-ink-soft); }
.rep .wz-chips--topup .wz-chip.is-on { background: var(--dw-topup); border-color: var(--dw-topup); color: #fff; }
.rep .wz-chips--transfer .wz-chip.is-on { background: var(--dw-transfer); border-color: var(--dw-transfer); color: #fff; }
.rep .wz-chips--withdraw .wz-chip.is-on { background: var(--dw-withdraw); border-color: var(--dw-withdraw); color: #fff; }
.rep .wz-chip.is-on i { color: rgba(255, 255, 255, .9); }
.rep .wz-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.rep .wz-toggle span { text-align: center; border: 1px solid #E3E7EF; border-radius: 10px; padding: 9px; font-size: 11.5px; font-weight: 600; }
.rep .wz-toggle--topup .is-on { background: var(--dw-topup); border-color: var(--dw-topup); color: #fff; }
.rep .wz-toggle--transfer .is-on { background: var(--dw-transfer); border-color: var(--dw-transfer); color: #fff; }
.rep .wz-toggle--withdraw .is-on { background: var(--dw-withdraw); border-color: var(--dw-withdraw); color: #fff; }
.rep .wz-method { display: flex; align-items: center; gap: 9px; border: 1px solid #E3E7EF; border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; }
.rep .wz-method.is-on { border-color: var(--dw-purple); background: #F7F3FE; }
.rep .wz-method b { font-size: 11.5px; }
.rep .wz-method span { font-size: 10px; color: var(--dw-ink-soft); }
.rep .wz-brand { width: 30px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #2D55E6, #4C7DF0); flex: none; }
.rep .wz-radio { margin-left: auto; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #CBD2DE; flex: none; }
.rep .wz-radio.is-on { border-color: var(--dw-purple); background: radial-gradient(circle, var(--dw-purple) 45%, transparent 46%); }
.rep .wz-field { display: block; border: 1px solid #E3E7EF; border-radius: 10px; padding: 8px 11px; margin-bottom: 7px; }
.rep .wz-field span { display: block; font-size: 9.5px; color: var(--dw-ink-soft); }
.rep .wz-field b { font-size: 12px; font-family: var(--font-mono); }
.rep .wz-field i { font-style: normal; font-size: 12px; color: #B4BDCB; }
.rep .wz-bank { border: 1px solid #E3E7EF; border-radius: 10px; padding: 11px; }
.rep .wz-bank > b { font-size: 12.5px; }
.rep .wz-bank dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 9px 0 0; }
.rep .wz-bank dt { font-size: 9.5px; color: var(--dw-ink-soft); }
.rep .wz-bank dd { margin: 0; font-size: 11px; font-weight: 700; }
.rep .wz-sum { margin: 0; }
.rep .wz-sum > div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 11.5px; }
.rep .wz-sum dt { color: var(--dw-ink-soft); }
.rep .wz-sum dd { margin: 0; font-weight: 700; }
.rep .wz-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #E7EBF2; margin-top: 6px; padding-top: 9px; }
.rep .wz-total span { font-size: 12.5px; font-weight: 700; }
.rep .wz-total b { font-size: 15px; font-weight: 800; }
.rep .wz-total--topup b { color: var(--dw-topup); }
.rep .wz-total--transfer b { color: var(--dw-transfer); }
.rep .wz-total--withdraw b { color: var(--dw-withdraw); }
.rep .wz-warn {
  background: var(--dw-banner); border: 1px solid var(--dw-banner-border); color: var(--dw-banner-text);
  border-radius: 10px; padding: 9px 11px; font-size: 10.5px; margin: 0; line-height: 1.45;
}
.rep .wz-note { font-size: 10px; color: var(--dw-ink-soft); margin: 0; font-style: italic; }
.rep .wz-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 10px; font-style: italic; color: var(--dw-ink-soft); }
.rep .wz-box { width: 15px; height: 15px; border: 2px solid var(--dw-heading); border-radius: 4px; flex: none; }
.rep .wz-submit { display: block; text-align: center; border-radius: 10px; padding: 12px; color: #fff; font-size: 13px; font-weight: 700; }
.rep .wz-submit--topup { background: var(--dw-topup); }
.rep .wz-submit--transfer { background: var(--dw-transfer); }
.rep .wz-submit--withdraw { background: var(--dw-withdraw); }
.rep .wz-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--dw-heading); font-weight: 600; }

/* --- merchant ------------------------------------------------------------ */
.rep .mc { display: flex; flex-direction: column; gap: 12px; }
.rep .mc-top { display: flex; align-items: center; gap: 10px; }
.rep .mc-top > b { font-size: 15px; font-weight: 700; }
.rep .mc-top .w-powered { margin-left: auto; }
.rep .mc-hero {
  border-radius: 14px; padding: 14px 16px; color: #fff;
  background: linear-gradient(110deg, var(--dw-purple), #7B5FD6 60%, #63B6CE);
}
.rep .mc-hero > span { font-size: 11px; opacity: .92; display: block; }
.rep .mc-hero strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.rep .mc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rep .mc-stat { background: var(--dw-surface); border-radius: 12px; padding: 11px; box-shadow: 0 6px 16px rgba(17, 24, 39, .05); }
.rep .mc-stat > span { font-size: 10px; color: var(--dw-ink-soft); display: block; }
.rep .mc-stat b { font-size: 15px; font-weight: 800; display: block; margin: 2px 0 1px; }
.rep .mc-stat i { font-style: normal; font-size: 9.5px; color: var(--dw-text-soft); }
.rep .mc-stat--ok b { color: var(--dw-topup); }
.rep .mc-stat--info b { color: var(--dw-transfer); }
.rep .mc-stat--warn b { color: #D97706; }
.rep .mc-banner {
  display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 10px 13px;
  background: var(--dw-banner); border: 1px solid var(--dw-banner-border); color: var(--dw-banner-text);
}
.rep .mc-banner b { font-size: 12px; }
.rep .mc-banner > span { font-size: 10.5px; opacity: .9; }
.rep .mc-banner i { margin-left: auto; font-style: normal; font-weight: 800; font-size: 13px; }
.rep .mc-rows { list-style: none; margin: 0; padding: 0; }
.rep .mc-rows li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F1F4F9; }
.rep .mc-rows li:first-child { border-top: 0; }
.rep .mc-row__icon { width: 29px; height: 29px; border-radius: 9px; background: #EDE9FE; color: #7C3AED; display: grid; place-items: center; font-size: 15px; flex: none; }
.rep .mc-row__body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rep .mc-row__body b { font-size: 12px; }
.rep .mc-row__body span { font-size: 10px; color: var(--dw-ink-soft); }
.rep .mc-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rep .mc-row__right b { font-size: 12.5px; font-weight: 700; }

/* --- confirm ------------------------------------------------------------- */
/* The confirmation arrives over the wallet the customer was already in, so the
 * home screen sits behind it, dimmed, and the sheet sits on top. 802px is the
 * height of the phone frame at this screen's 393px width. */
.rep .ct-stage { position: relative; margin: -14px; height: 802px; overflow: hidden; }
.rep .ct-behind { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.rep .ct-scrim { position: absolute; inset: 0; background: rgba(13, 19, 51, 0.62); }
.rep .ct--sheet {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  box-shadow: var(--dw-shadow-raised);
}

.rep .ct { background: var(--dw-surface); border-radius: 14px; padding: 16px; text-align: center; }
.rep .ct h4 { margin: 0; font-size: 16px; font-weight: 700; }
.rep .ct > p { margin: 4px 0 12px; font-size: 11px; color: var(--dw-ink-soft); font-style: italic; }
.rep .ct-card { border: 1px solid #E7EBF2; border-radius: 12px; padding: 12px; text-align: left; }
.rep .ct-app { display: flex; align-items: center; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid #F1F4F9; }
.rep .ct-logo { width: 30px; height: 30px; border-radius: 9px; background: var(--dw-purple); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.rep .ct-card dl { margin: 9px 0 0; }
.rep .ct-card dl > div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 11px; }
.rep .ct-card dt { color: var(--dw-ink-soft); }
.rep .ct-card dd { margin: 0; font-weight: 700; }
.rep .ct-total { display: flex; justify-content: space-between; border-top: 1px solid #E7EBF2; margin-top: 7px; padding-top: 9px; }
.rep .ct-total b { font-size: 15px; font-weight: 800; }
.rep .ct-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.rep .ct-btns > span { border-radius: 9px; padding: 11px; color: #fff; font-size: 12.5px; font-weight: 700; text-align: center; }
.rep .ct-cancel { background: #DC2626; }
.rep .ct-confirm { background: #0D9F6E; }
.rep .ct-terms { font-size: 9.5px; color: var(--dw-ink-soft); font-style: italic; margin: 9px 0 0; }

/* --- split amount: the figure leads, the currency code follows quietly ---- */
.rep [data-money-style="split"] i {
  font-style: normal; font-weight: 600; font-size: .52em; opacity: .82;
  margin-left: .35em; letter-spacing: .02em;
}
.rep .w-hero__amount [data-money-style="split"] i,
.rep .mc-hero strong [data-money-style="split"] i { font-size: .46em; }

/* --- my cards ------------------------------------------------------------ */
.rep .w-mycard { display: flex; align-items: center; gap: 9px; border: 1px solid #E3E7EF; border-radius: 10px; padding: 9px 11px; }
.rep .w-mycard b { font-size: 11.5px; }
.rep .w-mycard span { font-size: 10px; color: var(--dw-ink-soft); }
.rep .w-mycard i { margin-left: auto; }
.rep .w-mycard__chip { width: 30px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #6D3BD0, #9152E6); flex: none; }
.rep .w-cardnote { font-size: 9.5px; color: var(--dw-text-soft); margin: 8px 0 0; line-height: 1.4; }