/* SGH glass surfaces: depth without sacrificing readability in either theme. */
:root {
  --topup-panel:rgba(28,20,43,.72);
  --topup-tile:rgba(255,255,255,.045);
  --topup-edge:rgba(255,255,255,.10);
  --topup-highlight:rgba(255,255,255,.08);
  --topup-shadow:rgba(3,1,10,.18);
  --topup-accent:rgba(169,130,227,.32);
}
html[data-theme=light] {
  --topup-panel:rgba(255,255,255,.72);
  --topup-tile:rgba(255,255,255,.55);
  --topup-edge:rgba(87,62,126,.14);
  --topup-highlight:rgba(255,255,255,.9);
  --topup-shadow:rgba(55,35,84,.06);
  --topup-accent:rgba(125,81,178,.4);
}
body {
  background-image:radial-gradient(ellipse at 10% 20%,rgba(136,94,191,.10),transparent 48%),radial-gradient(ellipse at 95% 70%,rgba(91,119,180,.07),transparent 44%);
  background-attachment:fixed;
}
html[data-theme] body .section,html[data-theme] body .box,html[data-theme] body .method {
  background:var(--topup-panel);
  border:1px solid var(--topup-edge);
  box-shadow:inset 0 1px 0 var(--topup-highlight),0 12px 32px var(--topup-shadow);
  backdrop-filter:blur(28px) saturate(135%);
  -webkit-backdrop-filter:blur(28px) saturate(135%);
}
html[data-theme] body .package {
  background:var(--topup-tile);
  border:1px solid var(--topup-edge);
  box-shadow:inset 0 1px 0 var(--topup-highlight);
}
html[data-theme] body .package:hover,html[data-theme] body .package.selected,html[data-theme] body .method.selected {
  border-color:var(--topup-accent)!important;
  background:linear-gradient(135deg,rgba(161,118,224,.15),rgba(142,116,193,.06)),var(--topup-tile);
  box-shadow:inset 0 1px 0 var(--topup-highlight),0 4px 16px var(--topup-shadow);
}
button:focus-visible,a:focus-visible{outline:2px solid #a78bda;outline-offset:4px}
[hidden]{display:none!important}
.quantity{display:flex;align-items:center;justify-content:space-between;gap:8px}
.quantity button{width:40px;height:40px;border-radius:12px;background:var(--topup-tile);border:1px solid var(--topup-edge);font-size:20px}
.quantity button:disabled{opacity:.3;cursor:not-allowed}
.quantity output{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}
#packageSummary{max-width:65%;text-align:right;overflow-wrap:anywhere}
.receipt-line{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--topup-edge)}
.receipt-line small{display:block;opacity:.65;margin-top:4px}
.receipt-line strong{white-space:nowrap}
html[data-theme=light] .primary{color:#fff!important}
@supports not (backdrop-filter:blur(1px)) {
  html[data-theme] body .section,html[data-theme] body .box,html[data-theme] body .method{background:#21182d}
  html[data-theme=light] body .section,html[data-theme=light] body .box,html[data-theme=light] body .method{background:#fff}
}
@media(prefers-reduced-transparency:reduce) {
  html[data-theme] body .section,html[data-theme] body .box,html[data-theme] body .method{backdrop-filter:none;-webkit-backdrop-filter:none;background:#21182d}
  html[data-theme=light] body .section,html[data-theme=light] body .box,html[data-theme=light] body .method{background:#fff}
}