/* The source buyItem / pupOver palette, proportions and two-column choices.
   No selectors escape this surface or alter shared invoice interaction rules. */
.classic-topup { width: min(100%,480px); min-width: 0; margin: 0 auto; background: #379285; color: #147662; font: 15px/1.35 Arial,sans-serif; }
.classic-topup *, .classic-topup *::before, .classic-topup *::after { box-sizing: border-box; }
.classic-topup .classic-topup-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px 0 22px; }
.classic-topup .classic-topup-content > div:empty { display: none; }
.classic-topup .classic-topup-create { position: relative; width: min(408px,calc(100% - 24px)); margin: 0 auto; padding: 0 0 8px; border-radius: 6px; color: #b9fff0; background: #2f9d86; box-shadow: 0 0 4px #0004; }
.classic-topup .classic-topup-create[hidden] { display: none; }
.classic-topup .classic-topup-form-heading { display: flex; align-items: center; justify-content: center; position: relative; padding: 8px 38px; min-height: 42px; }
.classic-topup .classic-topup-form-heading h2 { margin: 0; color: #b9fff0; font-size: 20px; line-height: 1.3; letter-spacing: 0; }
.classic-topup .classic-topup-close { position: absolute; top: 3px; right: 4px; width: 36px; height: 36px; padding: 0; color: #b9fff0; background: transparent; border: 0; font: 26px/1 Arial,sans-serif; cursor: pointer; }
.classic-topup .classic-topup-fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.classic-topup .classic-topup-fieldset legend { float: left; display: block; width: 100%; min-height: 49px; padding: 10px 4px; border-radius: 2px; background: #32a78e; color: #b9fff0; text-align: center; font-size: 22px; font-weight: 700; line-height: 1.3; }
.classic-topup .classic-topup-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 7px; clear: both; width: 95.6%; margin: 0 auto; padding: 13px 0; }
.classic-topup .classic-topup-choice { position: relative; min-width: 0; }
.classic-topup .classic-topup-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.classic-topup .classic-topup-choice label { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 45px; padding: 3px; margin: 0; border: 3px solid transparent; border-radius: 4px; background: #fcffdd; color: #147662; text-align: center; font-size: 20px; line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; cursor: pointer; }
/* Keep the full rupiah amount on one line; the page scrolls through all choices. */
.classic-topup .classic-topup-amounts label { min-height: 48px; height: 100%; font-size: clamp(16px,calc(3.125vw + 6px),20px); font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.classic-topup .classic-topup-choice input:checked + label { border-color: #f85959; border-radius: 6px; }
.classic-topup .classic-topup-choice input:focus-visible + label, .classic-topup .classic-topup-close:focus-visible, .classic-topup .classic-topup-submit:focus-visible { outline: 3px solid #ffdb61; outline-offset: 2px; }
.classic-topup .classic-topup-methods label { padding: 0; min-height: 48px; }
.classic-topup .classic-topup-methods img { display: block; max-width: 100%; width: 100%; height: 45px; object-fit: contain; }
.classic-topup .classic-topup-methods label > span { padding: 6px; font-size: 15px; }
.classic-topup .classic-topup-empty { grid-column: 1/-1; margin: 0; padding: 7px; color: #e1fff7; font-size: 13px; text-align: center; }
.classic-topup .classic-topup-submit { display: block; width: min(197px,70%); height: 51px; margin: 6px auto 10px; padding: 0; border: 0; border-radius: 0; background: url('/images/classic/btn_recharge_pup.png') center/100% 100% no-repeat; cursor: pointer; }
.classic-topup .classic-topup-submit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.classic-topup .classic-topup-submit:disabled { cursor: not-allowed; opacity: .5; }
.classic-topup .classic-topup-payment-note { margin: 0; padding: 0 12px 7px; color: #e1fff7; font-size: 11px; text-align: center; }
.classic-topup #topup-blocker, .classic-topup .classic-topup-notice { padding: 0 10px; }
.classic-topup #bank-invoice-selector, .classic-topup #bank-invoice-region { min-width: 0; padding: 0 8px; color: #23352f; }
.classic-topup #bank-invoice-selector .panel, .classic-topup #bank-invoice-region .panel { margin: 0; }
.classic-topup #bank-invoice-selector .panel-header, .classic-topup #bank-invoice-selector .panel-pad, .classic-topup #bank-invoice-region .panel-pad { padding: 14px; }
.classic-topup #bank-invoice-selector h2, .classic-topup #bank-invoice-region h2 { font-size: 20px; letter-spacing: 0; }
.classic-topup #bank-invoice-selector .invoice-search-row { min-width: 0; }
.classic-topup #bank-invoice-selector .invoice-picker-list { width: 100%; min-width: 0; }
.classic-topup .invoice-hero { padding: 16px; }
.classic-topup .invoice-hero-facts { grid-template-columns: 1fr; }
.classic-topup .invoice-hero-amount { font-size: clamp(24px,7vw,34px); overflow-wrap: anywhere; }
.classic-topup .invoice-bank-heading { flex-wrap: nowrap; gap: 10px; }
.classic-topup .invoice-va-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.classic-topup .invoice-va-row input { min-width: 0; max-width: 100%; }
.classic-topup .bank-logo-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.classic-topup .invoice-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.classic-topup .invoice-secondary-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.classic-topup .invoice-actions .button { white-space: normal; }
@media (max-width: 390px) {
  .classic-topup .classic-header-title { gap: 8px; padding-inline: 10px; }
  .classic-topup .classic-header-title h1 { font-size: 18px; white-space: nowrap; }
  .classic-topup .classic-topup-button { width: 60px; flex-basis: 60px; }
}
@media (max-width: 380px) {
  .classic-topup .classic-topup-fieldset legend { min-height: 44px; font-size: 19px; }
  .classic-topup .classic-topup-methods label { font-size: 16px; }
  .classic-topup .classic-topup-choices { gap: 8px 5px; }
}