.hero.topup-hero{background-image:linear-gradient(90deg,#17152bb3,#17152b99),url('assets/topup-hero.png');background-size:cover;background-position:center;background-repeat:no-repeat}
:is(#bank-transfer,#fpx,#e-wallet,#qr-payment){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:70px}
:is(#bank-transfer,#fpx,#e-wallet,#qr-payment) .topup-body{min-width:0;width:100%}
:is(#bank-transfer,#fpx,#e-wallet,#qr-payment) .payment-steps{display:block;margin-top:24px}
.step-gallery{margin:28px auto 0;max-width:440px;text-align:left}
.step-gallery-track{display:flex;position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#c8b9e5 transparent;border:1px solid #d9d0e8;border-radius:12px;background:#ede5f7}
.step-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.step-slide img{display:block;width:100%;height:auto}
.step-gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.step-gallery-controls button{width:38px;height:38px;border:1px solid #d6cbe6;background:white;color:var(--teal);border-radius:50%;font-size:19px}
.step-gallery-controls button:disabled{opacity:.35;cursor:default}
.gallery-status{font-size:12px;color:var(--muted)}
.payment-steps .step-select{display:block;width:100%;text-align:left;border:0;background:transparent;padding:0;color:inherit;font-size:inherit;line-height:inherit;border-radius:5px;transition:color .15s}
.payment-steps .step-select.active{font-weight:700;color:var(--ink)}
.payment-steps li:has(.step-select.active){background:#ffffff85;border-radius:6px;box-shadow:inset 3px 0 var(--teal)}
.payment-steps .step-select:hover{color:var(--teal)}
@media(max-width:1150px){:is(#bank-transfer,#fpx,#e-wallet,#qr-payment){gap:40px}}
@media(max-width:900px){:is(#bank-transfer,#fpx,#e-wallet,#qr-payment){display:block}.step-gallery{max-width:400px;margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){.payment-steps .step-select{transition:none}}
/* Solid payment-method buttons remain distinct over the hero image. */
.topup-hero .method-navigation a{background:#29223f;border:1px solid #8d7eac;box-shadow:0 4px 12px #00000025;color:#fff}
.topup-hero .method-navigation a:hover{background:#403157;border-color:#cfb7f5}
.topup-hero .method-navigation a:focus-visible{outline:3px solid var(--lime);outline-offset:4px}