/* One enclosing panel; physical payment cards have no individual panels. */
html.site-pearl body.public-ui .site-main .topup-hub.topup-showcase {
  --th-ink:var(--compact-ink,#203450); --th-muted:var(--compact-muted,#718099);
  min-width:0; padding:17px!important; margin:0!important; border:1px solid var(--compact-line,#dfe7f3)!important;
  border-radius:24px!important; background:var(--compact-surface,#fff)!important; box-shadow:0 5px 20px #243f6505!important;
}
.topup-showcase :is(a,div,span,i) { box-sizing:border-box; }
.topup-showcase a { text-decoration:none; }
html.site-pearl body.public-ui .site-main .topup-showcase .th-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 5px!important; }
.topup-showcase .th-identity { display:flex; align-items:center; gap:9px; min-width:0; }
html.site-pearl body.public-ui .site-main .topup-showcase .th-wallet { display:grid; place-items:center; width:30px!important; height:32px!important; background:none!important; border:0!important; color:#4671ce; font-size:20px; }
.topup-showcase .th-eyebrow { margin-bottom:3px; color:var(--th-muted); font-size:8px; font-weight:750; letter-spacing:1.1px; }
html.site-pearl body.public-ui .site-main .topup-showcase h2 { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0; color:var(--th-ink)!important; font-size:16px!important; font-weight:800; line-height:1.4; letter-spacing:-.4px; }
.topup-showcase h2>span { padding:2px 5px; background:#e4f6ef; color:#218467; border-radius:5px; font-size:9px; letter-spacing:0; }
.topup-showcase .th-history { display:flex; align-items:center; gap:6px; min-height:36px; padding:5px; color:var(--th-muted); font-size:10px; }
html.site-pearl body.public-ui .site-main .topup-showcase .th-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; }
html.site-pearl body.public-ui .site-main .topup-hub.topup-showcase .th-method {
  --th-accent:#658eff; --th-card-turn:-7deg;
  display:block; position:relative; min-width:0; min-height:0!important; padding:0!important;
  border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important;
  overflow:visible!important; color:var(--th-ink)!important; transition:transform .25s ease;
  -webkit-tap-highlight-color:transparent;
}
html.site-pearl body.public-ui .site-main .topup-hub.topup-showcase .th-method-card { --th-accent:#a384e9; --th-card-turn:6deg; }
.topup-showcase .th-card-stage { display:grid; place-items:center; position:relative; isolation:isolate; overflow:clip; width:100%; padding:27px 13px 24px; perspective:800px; }
.topup-showcase .th-card-stage::before { content:""; position:absolute; inset:15% 0 0; z-index:-2; border-radius:50%; background:radial-gradient(ellipse,#7494ff22,transparent 68%); }
.topup-showcase .th-method-card .th-card-stage::before { background:radial-gradient(ellipse,#b696ee29,transparent 68%); }
.topup-showcase :is(.th-payment-card,.th-card-back) { width:90%; max-width:260px; aspect-ratio:1.65; border-radius:12px; }
.topup-showcase .th-card-back { position:absolute; top:50%; left:50%; z-index:-1; background:linear-gradient(125deg,#92b1f1,#d0e8fa); box-shadow:0 3px 10px #3e61ad0d; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.topup-showcase .th-card-back-far { opacity:.55; transform:translate(-48%,-56%) rotate(7deg) scale(.91); }
.topup-showcase .th-card-back-near { opacity:.8; transform:translate(-51%,-51%) rotate(1deg) scale(.96); }
.topup-showcase .th-method-card .th-card-back { background:linear-gradient(125deg,#bfa9eb,#e8ddfb); }
.topup-showcase .th-method-card .th-card-back-far { transform:translate(-53%,-56%) rotate(-8deg) scale(.91); }
.topup-showcase .th-method-card .th-card-back-near { transform:translate(-49%,-51%) rotate(-1deg) scale(.96); }
.topup-showcase .th-payment-card {
  position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; min-height:106px;
  padding:clamp(10px,1.3vw,17px); color:#fff; background:radial-gradient(ellipse at 100% 0,#56bcb8aa,transparent 64%),linear-gradient(120deg,#172c5f,#365c9c 65%,#3a85a4);
  box-shadow:0 12px 20px -12px #22467c99,inset 0 1px #ffffff50,inset 0 0 0 1px #ffffff16;
  transform:rotate(var(--th-card-turn)); transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
  animation:th-card-arrive .8s cubic-bezier(.2,.8,.2,1) backwards;
}
.topup-showcase .th-payment-card::before { content:""; position:absolute; width:160%; aspect-ratio:1; left:22%; top:10%; border:1px solid #ffffff15; border-radius:44%; box-shadow:0 0 0 18px #ffffff05,0 0 0 38px #ffffff05,0 0 0 60px #ffffff04; transform:rotate(-25deg); pointer-events:none; }
.topup-showcase .th-payment-card::after { content:""; position:absolute; inset:-70%; background:linear-gradient(110deg,transparent 40%,#ffffff22 49%,transparent 58%); transform:translateX(-70%); animation:th-card-sheen 7s ease-in-out infinite; pointer-events:none; }
.topup-showcase .th-card-topline,.topup-showcase .th-card-baseline { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:5px; }
.topup-showcase .th-card-brand { display:flex; align-items:center; gap:5px; font-size:clamp(9px,1vw,12px); font-weight:800; letter-spacing:1.4px; }
.topup-showcase .th-card-brand i { font-size:11px; }
.topup-showcase .th-card-tag { font-size:7px; font-weight:700; letter-spacing:1px; opacity:.8; }
.topup-showcase .th-chip-row { display:flex; align-items:center; gap:9px; margin:9px 0 7px; }
.topup-showcase .th-chip { width:26px; height:20px; border-radius:4px; border:1px solid #f2dba6; background:linear-gradient(90deg,transparent 30%,#ad8e53 31%,transparent 35%,transparent 65%,#ad8e53 66%,transparent 70%),linear-gradient(0deg,transparent 44%,#ad8e53 45%,transparent 52%),linear-gradient(130deg,#fae7b0,#c5a66b); }
.topup-showcase .th-chip-row>i { transform:rotate(90deg); color:#c8e4ff; font-size:12px; }
.topup-showcase .th-card-digits { font-family:monospace; font-size:clamp(9px,1.2vw,14px); letter-spacing:1px; color:#e2efff; white-space:nowrap; }
.topup-showcase .th-card-baseline { margin-top:9px; min-height:14px; font-size:6px; letter-spacing:1px; color:#e0ecff; }
.topup-showcase .th-card-circles { position:relative; width:29px; height:17px; }
.topup-showcase .th-card-circles::before,.topup-showcase .th-card-circles::after { content:""; position:absolute; width:17px; height:17px; border-radius:50%; background:#b8dbff7a; }
.topup-showcase .th-card-circles::after { right:0; background:#b7fff17a; }
.topup-showcase .th-method-card .th-payment-card { color:#514075; background:radial-gradient(ellipse at 100% 0,#fffaff,transparent 70%),linear-gradient(125deg,#efe5ff,#d7c4f4 65%,#d1d8ff); box-shadow:0 12px 20px -12px #7861aa88,inset 0 1px #fff,inset 0 0 0 1px #ffffff80; animation-delay:.12s; }
.topup-showcase .th-method-card .th-payment-card::before { border-color:#ffffff80; box-shadow:0 0 0 18px #ffffff16,0 0 0 38px #ffffff12; }
.topup-showcase .th-prepaid-name { display:flex; align-items:center; justify-content:space-between; margin:10px 0 8px; font-size:clamp(13px,1.6vw,20px); font-weight:900; letter-spacing:1.5px; }
.topup-showcase .th-prepaid-name>span { color:#9670cc; font-size:23px; }
.topup-showcase .th-scratch-strip { position:relative; overflow:hidden; display:grid; place-items:center; min-height:25px; border-radius:5px; color:#725892; background:#f6edff; font:11px monospace; }
.topup-showcase .th-scratch-foil { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; color:#656978; background:repeating-linear-gradient(120deg,#e5e7ee 0,#f8f9fc 2px,#d7dbe6 4px); font:700 6px/1.4 sans-serif; letter-spacing:.5px; clip-path:inset(0); transition:clip-path .65s ease; }
.topup-showcase .th-method-card .th-card-baseline { color:#695786; letter-spacing:0; font-size:6px; }
.topup-showcase .th-barcode { width:30px; height:14px; background:repeating-linear-gradient(90deg,#7d6895 0 1px,transparent 1px 3px,#7d6895 3px 5px,transparent 5px 6px); opacity:.7; }
.topup-showcase .th-card-caption { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 7px; }
html.site-pearl body.public-ui .site-main .topup-showcase .th-card-caption h3 { margin:0 0 4px!important; color:var(--th-ink)!important; font-size:13px!important; line-height:1.4; font-weight:800; letter-spacing:-.2px; }
.topup-showcase .th-card-caption p { margin:0; color:var(--th-muted); font-size:10px; line-height:1.5; }
.topup-showcase .th-caption-arrow { color:#7b8da8; font-size:11px; transition:color .2s,transform .2s; }
.topup-showcase .th-wave { position:absolute; top:50%; left:50%; z-index:-2; width:70px; height:70px; border:1px solid var(--th-accent); border-radius:50%; opacity:0; animation:th-card-wave 3.8s ease-out infinite; }
.topup-showcase .th-particles { position:absolute; inset:0; pointer-events:none; }
.topup-showcase .th-particles>i { position:absolute; left:50%; top:50%; width:3px; height:3px; border-radius:50%; background:var(--th-accent); opacity:0; animation:th-card-particle 3.2s ease-out var(--delay) infinite; }
.topup-showcase .th-particles>i:nth-child(3n) { width:6px; height:6px; border-radius:1px; clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%); }
html.site-pearl body.public-ui .site-main .topup-showcase .th-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-top:15px!important; padding:0 7px!important; }
.topup-showcase .th-status { display:flex; align-items:center; gap:6px; color:var(--th-muted); font-size:9px; }
.topup-showcase .th-status>span { width:5px; height:5px; background:#34b58c; border-radius:50%; box-shadow:0 0 0 3px #34b58c12; }
.topup-showcase .th-help { display:flex; align-items:center; gap:6px; min-height:28px; color:var(--th-muted); font-size:9px; }
.topup-showcase a:focus-visible { outline:2px solid #6389e9!important; outline-offset:5px; border-radius:8px!important; }
.topup-showcase .th-method:is(:hover,:focus-visible) .th-payment-card { transform:translateY(-5px) rotate(0deg); box-shadow:0 18px 25px -14px #4455a599,inset 0 1px #ffffff70; }
.topup-showcase .th-method:is(:hover,:focus-visible) .th-card-back-far { transform:translate(-48%,-60%) rotate(13deg) scale(.92); }
.topup-showcase .th-method:is(:hover,:focus-visible) .th-card-back-near { transform:translate(-52%,-54%) rotate(-9deg) scale(.96); }
.topup-showcase .th-method:is(:hover,:focus-visible) .th-scratch-foil { clip-path:inset(0 0 0 100%); }
.topup-showcase .th-method:is(:hover,:focus-visible) .th-caption-arrow { color:#6485d4; transform:translate(2px,-2px); }
@keyframes th-card-arrive { from { opacity:0; transform:translateY(14px) rotate(0deg) scale(.94); } to { opacity:1; transform:rotate(var(--th-card-turn)); } }
@keyframes th-card-sheen { 0%,65% { transform:translateX(-70%); } 90%,100% { transform:translateX(70%); } }
@keyframes th-card-particle { 0% { opacity:0; transform:translate(calc(var(--px)*.45),calc(var(--py)*.45)) scale(.2); } 25% { opacity:.75; } 85%,100% { opacity:0; transform:translate(var(--px),var(--py)) scale(.5); } }
@keyframes th-card-wave { 0% { opacity:0; transform:translate(-50%,-50%) scale(.7); } 15% { opacity:.17; } 85%,100% { opacity:0; transform:translate(-50%,-50%) scale(2.8); } }
@media(min-width:1600px) { .topup-showcase .th-card-stage { padding-block:30px; } }
@media(max-width:600px) {
  html.site-pearl body.public-ui .site-main .topup-hub.topup-showcase { padding:14px 12px!important; border-radius:22px!important; }
  html.site-pearl body.public-ui .site-main .topup-showcase .th-methods { gap:10px!important; }
  .topup-showcase .th-card-stage { padding:25px 7px 22px; }
  .topup-showcase .th-payment-card { width:96%; padding:10px; border-radius:9px; }
  .topup-showcase .th-card-back { width:94%; border-radius:9px; }
  .topup-showcase .th-card-caption { padding-inline:2px; }
  .topup-showcase .th-card-caption p { font-size:9px; }
  .topup-showcase .th-card-brand { font-size:9px; letter-spacing:.7px; }
  .topup-showcase .th-history>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .topup-showcase .th-card-digits { font-size:10px; letter-spacing:.4px; }
  .topup-showcase .th-card-baseline { font-size:5px; letter-spacing:.5px; margin-top:7px; }
  .topup-showcase .th-prepaid-name { font-size:14px; margin:8px 0 6px; }
  .topup-showcase .th-method-card .th-card-baseline { font-size:5px; }
}
@media(max-width:359px) {
  .topup-showcase .th-payment-card { padding:8px; }
  .topup-showcase .th-card-tag { font-size:6px; }
  .topup-showcase .th-chip { width:22px; height:17px; }
  .topup-showcase .th-card-digits { font-size:8px; }
  .topup-showcase .th-scratch-foil { font-size:5px; }
  .topup-showcase .th-scratch-strip { min-height:22px; }
  .topup-showcase .th-barcode { width:19px; }
  html.site-pearl body.public-ui .site-main .topup-showcase .th-card-caption h3 { font-size:11px!important; }
}
@media(prefers-reduced-motion:reduce) {
  .topup-showcase *,.topup-showcase *::before,.topup-showcase *::after { animation:none!important; transition:none!important; }
  .topup-showcase :is(.th-particles,.th-wave) { display:none; }
}