/* Payment method drawer: full height, with a narrow strip of the page visible. */
html.site-pearl body.public-ui dialog.topup-chooser {
  --tm-bg:var(--compact-surface,#fff);
  --tm-soft:var(--compact-soft,#f7fbfe);
  --tm-line:var(--compact-line,#e3ebf1);
  --tm-ink:var(--compact-ink,#1c2c3c);
  --tm-muted:var(--compact-muted,#778596);
  --tm-blue:var(--compact-blue,#079fe0);
  --tm-tint:var(--compact-tint,#ecf8ff);
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0; border-radius:0;
  background:transparent; box-shadow:none; overflow:hidden; color:var(--tm-ink);
  font:400 12px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.topup-chooser:not([open]) {display:none!important}
.topup-chooser[open] {display:block!important}
.topup-chooser * {box-sizing:border-box}
.topup-chooser [hidden] {display:none!important}
.topup-chooser::backdrop {background:#12233480; animation:tm-backdrop-in .32s ease both}
.topup-chooser.is-closing::backdrop {animation:tm-backdrop-out .23s ease both}
.topup-chooser :is(button,a) {font:inherit; -webkit-tap-highlight-color:transparent}
.topup-chooser button {appearance:none; cursor:pointer; touch-action:manipulation}
.topup-chooser :is(button,a):focus-visible {outline:2px solid var(--tm-blue); outline-offset:-4px}
.topup-chooser-stage {
  position:absolute; right:0; bottom:var(--mobile-viewport-bottom,0px); left:auto;
  width:min(420px,calc(100% - 56px)); height:var(--mobile-viewport-height,100dvh);
  max-height:100%; margin:0; isolation:isolate; pointer-events:auto;
}
.topup-chooser[open] .topup-chooser-stage {animation:tm-drawer-enter .38s cubic-bezier(.22,1,.36,1) both}
.topup-chooser-card {
  position:relative; display:flex; flex-direction:column; width:100%; height:100%;
  overflow:hidden; border:0; border-left:1px solid var(--tm-line); border-radius:0;
  background:var(--tm-bg); box-shadow:-12px 0 40px #0e2b4d1f;
}
.topup-chooser-heading {
  display:flex; align-items:center; justify-content:center; flex:none; gap:8px;
  min-height:64px; padding:calc(18px + env(safe-area-inset-top,0px)) 18px 18px;
  border-bottom:1px solid var(--tm-line);
}
.topup-chooser-mark {display:grid; place-items:center; flex:none; color:var(--tm-blue)}
.topup-chooser-mark>.ui-symbol {width:21px; height:21px}
.topup-chooser-heading>div {min-width:0}
html.site-pearl body.public-ui dialog.topup-chooser h2 {
  margin:0!important; font-size:14px!important; font-weight:650!important;
  line-height:1.5!important; color:var(--tm-blue)!important; letter-spacing:0!important;
  text-shadow:none!important; -webkit-text-fill-color:currentColor;
}
/* Retain useful descriptions without making the rows visually heavy. */
.topup-chooser .topup-chooser-sr-only {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.topup-chooser .topup-chooser-close {
  position:absolute; left:-20px; right:auto; top:calc(18px + env(safe-area-inset-top,0px));
  z-index:3; display:grid; place-items:center; width:40px; height:40px; min-height:40px;
  padding:11px; border:1px solid var(--tm-line); border-radius:50%;
  background:var(--tm-bg); color:var(--tm-ink); box-shadow:0 3px 12px #10233f26;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.topup-chooser-close::before {content:""; position:absolute; inset:-3px; border-radius:50%}
.topup-chooser-close>.ui-symbol {width:17px; height:17px}
.topup-chooser .topup-chooser-close:focus-visible {outline-offset:3px}
.topup-chooser-methods {
  display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--tm-line) transparent;
}
.topup-chooser .topup-choice {
  --choice-color:#119dd5; --choice-tint:var(--tm-tint);
  display:flex; align-items:center; flex:none; gap:11px; min-width:0; width:100%; min-height:56px;
  position:relative; padding:12px 18px; border:0; border-bottom:1px solid var(--tm-line);
  border-radius:0; background:transparent; color:var(--tm-ink); text-align:left;
  transition:background-color .18s ease,color .18s ease;
}
.topup-chooser .topup-choice--card {--choice-color:#8b75df; --choice-tint:#f1edfc}
.topup-chooser[open] .topup-choice {animation:tm-method-enter .3s ease .12s backwards}
.topup-chooser[open] .topup-choice--card {animation-delay:.19s}
.topup-choice-icon {
  display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border:0;
  border-radius:50%; background:var(--choice-tint); color:var(--choice-color);
}
.topup-choice-icon>.ui-symbol {width:18px; height:18px; stroke-width:1.7}
.topup-choice-copy {display:flex; flex:1; min-width:0}
.topup-choice-copy>strong {font-size:14px; font-weight:550; line-height:1.5; overflow-wrap:anywhere}
.topup-choice-arrow {display:grid; place-items:center; flex:none; color:var(--tm-muted); transition:transform .18s ease,color .18s ease}
.topup-choice-arrow>.ui-symbol {width:15px; height:15px}
.topup-chooser .topup-choice[aria-current=page] {background:var(--tm-tint); color:var(--tm-blue)}
.topup-chooser .topup-choice:active {background:var(--tm-soft)}
.topup-chooser-footer {
  display:flex; align-items:center; justify-content:center; flex:none;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--tm-line);
  background:var(--tm-bg); color:var(--tm-muted); font-size:11px;
}
.topup-chooser-footer>a {display:inline-flex; align-items:center; gap:7px; color:var(--tm-blue); text-decoration:none; min-height:28px}
.topup-chooser-footer .ui-symbol {width:14px; height:14px}
.topup-chooser-footer>a:hover {text-decoration:underline}
.topup-chooser.is-closing {pointer-events:none}
.topup-chooser.is-closing .topup-chooser-stage {animation:tm-drawer-exit .23s cubic-bezier(.4,0,1,1) both}
.topup-chooser.is-closing .topup-choice {animation:none}
.mobile-topup-menu>[data-topup-chooser] {transition:background-color .2s,color .2s}
.mobile-topup-menu>[data-topup-chooser][aria-expanded=true] {background:var(--compact-tint); color:var(--compact-blue)}
html.site-dark .topup-chooser-card {box-shadow:-12px 0 40px #0005}
html.site-dark .topup-chooser::backdrop {background:#0009}
html.site-dark .topup-chooser .topup-choice {--choice-color:#69c6ec}
html.site-dark .topup-chooser .topup-choice--card {--choice-color:#b3a0ef; --choice-tint:#302a46}
@media(hover:hover) {
  .topup-chooser .topup-choice:hover {background:var(--tm-soft); color:var(--choice-color)}
  .topup-choice:hover .topup-choice-arrow {transform:translateX(2px); color:var(--choice-color)}
  .topup-chooser .topup-chooser-close:hover {background:var(--tm-tint); color:var(--tm-blue); transform:rotate(6deg)}
}
@media(max-width:359px) {
  .topup-chooser-stage {width:calc(100% - 48px)}
  .topup-chooser-heading {padding-inline:14px; gap:6px}
  html.site-pearl body.public-ui dialog.topup-chooser h2 {font-size:12px!important}
  .topup-chooser .topup-choice {padding-inline:14px}
}
@keyframes tm-drawer-enter {from {transform:translateX(calc(100% + 30px))} to {transform:none}}
@keyframes tm-drawer-exit {from {transform:none} to {transform:translateX(calc(100% + 30px))}}
@keyframes tm-method-enter {from {opacity:0; transform:translateX(10px)} to {opacity:1; transform:none}}
@keyframes tm-backdrop-in {from {opacity:0} to {opacity:1}}
@keyframes tm-backdrop-out {from {opacity:1} to {opacity:0}}
@media(prefers-reduced-motion:reduce) {
  .topup-chooser,.topup-chooser::backdrop,.topup-chooser *,.topup-chooser *::before,.topup-chooser *::after,
  .mobile-topup-menu>[data-topup-chooser] {animation:none!important; transition:none!important}
}