/* ==========================================================================
   Quiet Data v188: Liquid Glass layer
   Loaded LAST. It only changes looks (colour, gloss, edge, shadow, corner shape). It never changes layout,
   sizes, text, prices, buttons' behaviour, fonts or any script. Remove the one <link> in index.html and the
   site returns exactly to v187.

   Look (from the "Liquid Glass Kit" reference): pearl base with soft lilac / teal light, frosted white glass
   with a bright top edge, glossy pill buttons, round soft shadows.

   Readability rules used everywhere:
   - glass surfaces are at least ~70% opaque and sit on a solid fallback colour, so text never floats over busy colour;
   - text keeps the site's dark ink (light pages) or near-white (dark app); button text is white on deep colours
     (>= 4.5:1) or dark ink on the yellow MTN button;
   - blur is a bonus, never needed for legibility (see the fallbacks at the bottom).
   ========================================================================== */

/* ---------- 1. tokens ---------- */
html body.guest-mode{
  --lq-blur:blur(18px) saturate(1.6);
  --lq-fill:rgba(255,255,255,.74);--lq-fill2:rgba(255,255,255,.52);
  --lq-edge:rgba(255,255,255,.92);
  --lq-rim:rgba(var(--st-rgb,109,76,240),.16);
  --lq-sh:0 14px 34px rgba(var(--st-sh,60,40,140),.14),0 2px 6px rgba(var(--st-sh,60,40,140),.06);
  --lq-in:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -10px 22px rgba(var(--st-rgb,109,76,240),.05),inset 0 0 0 1px rgba(255,255,255,.4);
  --lq-gloss:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.12) 46%,rgba(255,255,255,0) 52%);
  --lq-teal:#0e8f86;--lq-teal2:#34c3b4;
}
html body:not(.guest-mode){
  --lq-blur:blur(16px) saturate(1.5);
  --lq-fill:rgba(255,255,255,.085);--lq-fill2:rgba(255,255,255,.03);
  --lq-edge:rgba(255,255,255,.2);
  --lq-sh:0 16px 40px rgba(2,6,18,.5),0 2px 8px rgba(2,6,18,.3);
  --lq-in:inset 0 1.5px 0 rgba(255,255,255,.3),inset 0 -12px 24px rgba(155,123,255,.07),inset 0 0 0 1px rgba(255,255,255,.05);
  --lq-gloss:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.08) 46%,rgba(255,255,255,0) 52%);
}

/* ---------- 2. pearl backdrop with lilac + teal light (guest page and store links) ---------- */
html body.guest-mode{
  background-image:
    radial-gradient(420px 360px at 92% 8%,rgba(52,195,180,.22),transparent 70%),
    radial-gradient(520px 420px at 6% 0%,rgba(var(--st-rgb,109,76,240),.24),transparent 70%),
    radial-gradient(480px 440px at 100% 46%,color-mix(in srgb,var(--st-g2,#6366f1) 20%,transparent),transparent 70%),
    radial-gradient(520px 420px at 0% 70%,rgba(255,190,214,.28),transparent 70%),
    radial-gradient(560px 480px at 100% 96%,rgba(52,195,180,.16),transparent 70%),
    linear-gradient(180deg,rgba(255,252,247,.55),rgba(255,252,247,0) 40%);
}
/* signed-in app: a little lilac and teal light in the existing night colours */
html body:not(.guest-mode){
  background-image:
    radial-gradient(800px 480px at 90% -8%,rgba(26,92,255,.16),transparent 62%),
    radial-gradient(520px 420px at 100% 55%,rgba(52,195,180,.07),transparent 65%),
    radial-gradient(640px 460px at -8% 12%,rgba(155,123,255,.12),transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg) 70%);
}

/* ---------- 3. glass cards: rounder, brighter top edge, soft depth ---------- */
html body.guest-mode .gx-acc,html body.guest-mode .mx-row,
html body.guest-mode .vc-card,html body.guest-mode .vc-how,html body.guest-mode .vc-tcard,html body.guest-mode .vt-card,
html body.guest-mode .surface,html body.guest-mode .card-form,html body.guest-mode .verification-card,html body.guest-mode .track-card,
html body.guest-mode .empty,html body.guest-mode .p-card,html body.guest-mode .net-card,
html body.guest-mode .order,html body.guest-mode .bundle,html body.guest-mode .gx-feat{
  background:var(--lq-gloss),linear-gradient(150deg,var(--lq-fill),var(--lq-fill2)),#fbfaff;
  border:1px solid var(--lq-edge);border-radius:26px;
  box-shadow:var(--lq-sh),var(--lq-in),0 0 0 1px var(--lq-rim);
  -webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur)}
html body.guest-mode .order,html body.guest-mode .bundle{-webkit-backdrop-filter:none;backdrop-filter:none}   /* many rows: no live blur */
html body.guest-mode .mx-row{border-radius:24px}

/* network bundle tiles: small frosted glass chips, still tinted per network */
html body.guest-mode .gx-bundle{border-radius:20px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -8px 16px rgba(var(--st-rgb,109,76,240),.05),0 6px 16px rgba(var(--st-sh,60,40,140),.1)}
html body.guest-mode .gx-bundle:active{transform:translateY(1px) scale(.99)}
html body.guest-mode .gx-header{background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur)}

/* signed-in app cards: dark glass on a solid night base (text stays near-white on dark) */
html body:not(.guest-mode) .surface,html body:not(.guest-mode) .card-form,html body:not(.guest-mode) .verification-card,
html body:not(.guest-mode) .track-card,html body:not(.guest-mode) .order,html body:not(.guest-mode) .empty,
html body:not(.guest-mode) .p-card,html body:not(.guest-mode) .net-card,html body:not(.guest-mode) .bundle{
  background:var(--lq-gloss),linear-gradient(150deg,var(--lq-fill),var(--lq-fill2)),var(--surface);
  border:1px solid var(--lq-edge);border-radius:26px;box-shadow:var(--lq-sh),var(--lq-in);
  -webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur)}
html body:not(.guest-mode) .order,html body:not(.guest-mode) .bundle{-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- 4. glossy pill buttons ---------- */
html body.guest-mode .btn:not(.ghost),
html body.guest-mode .auth-submit,
html body.guest-mode .co-btn:not(.ghost){
  border:1px solid rgba(255,255,255,.5);border-radius:999px;
  background:var(--lq-gloss),linear-gradient(135deg,var(--st-g1,#7c3aed),var(--st-g2,#6366f1));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(0,0,0,.14),0 12px 24px rgba(var(--st-rgb,109,76,240),.3),0 2px 5px rgba(var(--st-rgb,109,76,240),.2);
  text-shadow:0 1px 1px rgba(20,10,60,.28);transition:transform .15s,box-shadow .15s,filter .15s}
html body.guest-mode .btn:not(.ghost):active,html body.guest-mode .auth-submit:active,html body.guest-mode .co-btn:not(.ghost):active{transform:translateY(1px) scale(.985);filter:brightness(.97)}
html body.guest-mode .btn.ghost,html body.guest-mode .co-btn.ghost{
  border:1px solid var(--lq-edge);border-radius:999px;color:var(--text);
  background:var(--lq-gloss),linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  box-shadow:inset 0 1.5px 0 #fff,0 8px 18px rgba(var(--st-sh,60,40,140),.1),0 0 0 1px var(--lq-rim)}
/* small bundle "Buy" chips */
html body.guest-mode .gx-bundle em{background:var(--lq-gloss),linear-gradient(135deg,var(--st-g1,#7c3aed),var(--st-g2,#6366f1));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 10px rgba(var(--st-rgb,109,76,240),.25);text-shadow:0 1px 1px rgba(20,10,60,.25)}
html body.guest-mode .gx-bundle.net-mtn em{background:var(--lq-gloss),linear-gradient(135deg,#f4c400,#ff9f00);color:#1b1500;text-shadow:none}
html body.guest-mode .gx-bundle.net-airteltigo em{background:var(--lq-gloss),linear-gradient(135deg,#2a77e8,#1a56b8)}
html body.guest-mode .gx-bundle.net-telecel em{background:var(--lq-gloss),linear-gradient(135deg,#e53030,#b80000)}

/* signed-in buttons: same gloss, keeps each network's own colour through var(--accent-grad) and its own text colour */
html body:not(.guest-mode) .btn:not(.ghost),
html body:not(.guest-mode) .co-btn:not(.ghost),
html body:not(.guest-mode) .auth-submit{
  border:1px solid rgba(255,255,255,.34);border-radius:999px;
  background:var(--lq-gloss),var(--accent-grad);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(0,0,0,.18),0 12px 26px var(--glow)}
html body:not(.guest-mode) .auth-submit{background:var(--lq-gloss),linear-gradient(135deg,#1a5cff,#3f86ff)}
html body:not(.guest-mode)[data-theme="mtn"] .btn:not(.ghost),html body:not(.guest-mode)[data-theme="mtn"] .co-btn:not(.ghost){text-shadow:none}
html body:not(.guest-mode) .btn.ghost,html body:not(.guest-mode) .co-btn.ghost{
  border:1px solid var(--lq-edge);border-radius:999px;
  background:var(--lq-gloss),linear-gradient(150deg,var(--lq-fill),var(--lq-fill2));box-shadow:var(--lq-in)}

/* keep the two buttons that already have their own special look exactly as they were */
html body .p-hero .btn{border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line2);box-shadow:none;text-shadow:none;color:var(--text)}
html body .co-overlay.mx-checkout .co-btn{text-shadow:none}

/* ---------- 5. frosted inputs ---------- */
html body.guest-mode .field input,html body.guest-mode .co-field input,html body.guest-mode .card-form input,
html body.guest-mode .track-card input,html body.guest-mode .verification-card>input,html body.guest-mode .verification-card textarea,
html body.guest-mode .auth-field input{
  background:rgba(255,255,255,.92);border:1px solid rgba(var(--st-rgb,109,76,240),.26);border-radius:18px;color:var(--text);
  box-shadow:inset 0 2px 4px rgba(var(--st-sh,60,40,140),.08),0 6px 16px rgba(var(--st-sh,60,40,140),.07)}
html body.guest-mode .ord-search{background:rgba(255,255,255,.92);border:1px solid rgba(var(--st-rgb,109,76,240),.26);border-radius:999px;box-shadow:inset 0 2px 4px rgba(var(--st-sh,60,40,140),.07),0 8px 20px rgba(var(--st-sh,60,40,140),.09)}
html body.guest-mode .field input:focus,html body.guest-mode .co-field input:focus,html body.guest-mode .card-form input:focus,
html body.guest-mode .track-card input:focus,html body.guest-mode .verification-card>input:focus,html body.guest-mode .auth-field input:focus{
  border-color:var(--st-a,#6d4cf0);box-shadow:0 0 0 4px rgba(var(--st-rgb,109,76,240),.24),inset 0 2px 4px rgba(var(--st-sh,60,40,140),.06)}
html body:not(.guest-mode) .field input,html body:not(.guest-mode) .co-field input,html body:not(.guest-mode) .card-form input,
html body:not(.guest-mode) .track-card input,html body:not(.guest-mode) .auth-field input{
  border-radius:18px;border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.06)}
html body:not(.guest-mode) .field input:focus,html body:not(.guest-mode) .co-field input:focus,html body:not(.guest-mode) .card-form input:focus,
html body:not(.guest-mode) .track-card input:focus,html body:not(.guest-mode) .auth-field input:focus{box-shadow:0 0 0 4px rgba(63,134,255,.3),inset 0 2px 6px rgba(0,0,0,.2)}

/* ---------- 6. pop-ups (checkout etc.): glass panel over a soft blurred scrim ---------- */
html body.guest-mode .co-modal{
  background:var(--lq-gloss),linear-gradient(160deg,rgba(255,255,255,.97),rgba(246,243,255,.94)),#fff;
  border:1px solid var(--lq-edge);border-radius:30px;
  box-shadow:0 30px 80px rgba(var(--st-sh,60,40,140),.32),inset 0 1.5px 0 #fff,0 0 0 1px var(--lq-rim)}
html body:not(.guest-mode) .co-modal{
  background:var(--lq-gloss),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),var(--surface);
  border:1px solid var(--lq-edge);border-radius:30px;box-shadow:0 36px 100px rgba(2,6,18,.7),var(--lq-in)}

/* ---------- 7. bottom bar of the signed-in app: floating glass capsule ---------- */
html body:not(.guest-mode) .taskbar{
  bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 8px));border-radius:32px;
  background:var(--lq-gloss),linear-gradient(150deg,rgba(26,36,70,.9),rgba(14,22,45,.86));
  border:1px solid var(--lq-edge);box-shadow:var(--lq-sh),var(--lq-in);
  -webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur)}
html body:not(.guest-mode) .tab{border-radius:26px}
html body:not(.guest-mode) .tab.active{
  background:var(--lq-gloss),linear-gradient(135deg,#7a62f0,#5a7cf5 55%,#34c3b4);color:#fff;
  border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 8px 22px rgba(90,100,245,.45)}
html body:not(.guest-mode) .tab.active svg{filter:drop-shadow(0 1px 1px rgba(10,10,50,.35))}

/* ---------- 8. phones ---------- */
@media (max-width:380px){
  html body.guest-mode .gx-acc,html body.guest-mode .surface,html body.guest-mode .card-form,html body.guest-mode .track-card,
  html body.guest-mode .gx-feat,html body.guest-mode .p-card,html body:not(.guest-mode) .surface,html body:not(.guest-mode) .card-form{border-radius:22px}
}
/* iPhone and iPad (Safari): keep the safe areas clear, and keep the blur light on every card at once */
@supports (-webkit-touch-callout:none){
  html body.guest-mode{--lq-blur:blur(14px) saturate(1.45)}
  html body:not(.guest-mode){--lq-blur:blur(12px) saturate(1.4)}
}
/* Android: the existing android-lite.js already turns live blur off; the glass becomes more solid so text stays crisp */
html.is-android body.guest-mode{--lq-blur:none;--lq-fill:rgba(255,255,255,.9);--lq-fill2:rgba(255,255,255,.78)}
html.is-android body:not(.guest-mode){--lq-blur:none;--lq-fill:rgba(255,255,255,.1);--lq-fill2:rgba(255,255,255,.04)}

/* ---------- 9. accessibility and fallbacks: more solid, never less readable ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body.guest-mode{--lq-fill:rgba(255,255,255,.92);--lq-fill2:rgba(255,255,255,.84)}
  html body:not(.guest-mode){--lq-fill:rgba(255,255,255,.1);--lq-fill2:rgba(255,255,255,.04)}
}
@media (prefers-reduced-transparency:reduce){
  html body{--lq-blur:none}
  html body.guest-mode{--lq-fill:#fff;--lq-fill2:#fbfaff}
  html body:not(.guest-mode) .taskbar{background:var(--surface2)}
}
@media (prefers-contrast:more){
  html body{--lq-blur:none;--lq-gloss:none}
  html body.guest-mode{--lq-fill:#fff;--lq-fill2:#fff;--lq-edge:rgba(40,30,90,.55)}
  html body:not(.guest-mode){--lq-edge:rgba(255,255,255,.55)}
  html body.guest-mode .btn:not(.ghost),html body.guest-mode .auth-submit,html body.guest-mode .co-btn:not(.ghost){text-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  html body .btn,html body .co-btn,html body .auth-submit,html body .gx-bundle{transition:none}
}
@media (forced-colors:active){
  html body .btn,html body .co-btn,html body .auth-submit,html body .tab.active,html body .gx-acc,html body .surface{
    background:Canvas;color:ButtonText;border:1px solid ButtonText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:none}
}

/* ---------- 10. ui_style = "glass": the same glass without the glossy highlight ("glass3d" is the full look above) ---------- */
html[data-ui="glass"] body{--lq-gloss:none}

/* ==========================================================================
   11. LIQUID GLASS KIT (v191). Replaces the v190 "white glass".
   v190 made the cards almost solid white, so there was nothing left to see through and the colour looked washed out.
   This brings back real glass like the Liquid Glass Kit reference: a warm pearl page with soft lilac / teal / peach light
   BEHIND the cards, cards that are genuinely see-through (frosted blur + saturation boost), a bright rim along the top,
   a soft inner glow at the bottom and a round soft shadow. Text stays dark ink on a light glass, so it stays easy to read.
   - Guest page + agent store links: pearl glass (below).
   - Signed-in app: back to its original dark look. The v190 light tokens are gone, the dark glass from section 3 applies.
   - Offers network cards (all modes): small square tiles, same design as the guest page tiles (section 12).
   Everything lives in liquid.css, so Admin > Site design > off (classic) still returns the plain design.
   ========================================================================== */

html:has(body.guest-mode){background:#efeae5}
html body.guest-mode{
  background-color:#efeae5;
  --lq-blur:blur(22px) saturate(1.9);
  --lq-fill:rgba(255,255,255,.52);--lq-fill2:rgba(255,255,255,.28);
  --lq-edge:rgba(255,255,255,.88);
  --lq-rim:rgba(var(--st-rgb,109,76,240),.14);
  --lq-sh:0 18px 40px rgba(var(--st-sh,60,40,140),.16),0 3px 8px rgba(var(--st-sh,60,40,140),.07);
  --lq-in:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -14px 26px rgba(var(--st-rgb,109,76,240),.08),inset 0 0 0 1px rgba(255,255,255,.45);
  --lq-gloss:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.14) 44%,rgba(255,255,255,0) 52%);
  background-image:
    radial-gradient(360px 340px at 96% 3%,rgba(52,195,180,.40),transparent 70%),
    radial-gradient(420px 380px at 2% 9%,rgba(var(--st-rgb,109,76,240),.34),transparent 70%),
    radial-gradient(380px 360px at 104% 30%,color-mix(in srgb,var(--st-g2,#6366f1) 34%,transparent),transparent 70%),
    radial-gradient(420px 380px at -6% 47%,rgba(255,170,205,.42),transparent 70%),
    radial-gradient(400px 360px at 104% 64%,rgba(52,195,180,.34),transparent 70%),
    radial-gradient(420px 380px at -4% 82%,rgba(var(--st-rgb,109,76,240),.28),transparent 70%),
    radial-gradient(400px 360px at 100% 98%,rgba(255,190,150,.34),transparent 70%),
    linear-gradient(180deg,#f4f0eb,#ebe6e0 60%,#efeae5);
  background-attachment:scroll}
html.is-android body.guest-mode{--lq-fill:rgba(255,255,255,.7);--lq-fill2:rgba(255,255,255,.5)}

/* cards: see-through glass (the fill must stay thin or the page colour cannot show through) */
html body.guest-mode .gx-acc,html body.guest-mode .mx-row,
html body.guest-mode .vc-card,html body.guest-mode .vc-how,html body.guest-mode .vc-tcard,html body.guest-mode .vt-card,
html body.guest-mode .surface,html body.guest-mode .card-form,html body.guest-mode .verification-card,html body.guest-mode .track-card,
html body.guest-mode .empty,html body.guest-mode .p-card,html body.guest-mode .net-card,html body.guest-mode .gx-feat{
  background:var(--lq-gloss),linear-gradient(150deg,var(--lq-fill),var(--lq-fill2));
  border:1px solid var(--lq-edge)}
html body.guest-mode .order{background:var(--lq-gloss),linear-gradient(150deg,rgba(255,255,255,.66),rgba(255,255,255,.4));border:1px solid var(--lq-edge);box-shadow:var(--lq-sh),var(--lq-in)}
html body.guest-mode .gx-header{background:rgba(255,255,255,.62);-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);border-bottom:1px solid rgba(255,255,255,.85);box-shadow:0 8px 24px rgba(var(--st-sh,60,40,140),.1)}
html body.guest-mode .gx-acc-pad{border-top-color:rgba(var(--st-ink,76,60,160),.09)}

/* number tools card: same glass as the other cards */
html body.guest-mode .nt{background:var(--lq-gloss),linear-gradient(150deg,var(--lq-fill),var(--lq-fill2));border:1px solid var(--lq-edge);
  box-shadow:var(--lq-sh),var(--lq-in),0 0 0 1px var(--lq-rim);-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur)}

/* inputs: clear frosted wells */
html body.guest-mode .field input,html body.guest-mode .co-field input,html body.guest-mode .card-form input,
html body.guest-mode .track-card input,html body.guest-mode .verification-card>input,html body.guest-mode .verification-card textarea,
html body.guest-mode .auth-field input,html body.guest-mode .ord-search{
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 2px 5px rgba(var(--st-sh,60,40,140),.1),0 6px 16px rgba(var(--st-sh,60,40,140),.08),0 0 0 1px rgba(var(--st-rgb,109,76,240),.12)}

/* the checkout panel: a bright frosted sheet */
html body.guest-mode .co-modal{
  background:var(--lq-gloss),linear-gradient(160deg,rgba(255,255,255,.9),rgba(250,247,255,.8));
  -webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur)}

/* ---- signed-in app: original dark look ----
   Nothing to do here: section 3 (dark glass cards, floating glass bottom bar) and the site's own dark colour tokens apply again. */

/* ==========================================================================
   12. NETWORK BUNDLE TILES (v191): the small square tile of the guest page, now also on the Offers page of the signed-in app
   (and the guest Offers page). Same size, same order inside: size, "Data bundle", price, Buy chip. Pure CSS: the markup,
   the buttons and what they do are untouched. The network tag + wifi icon row is tucked away (the network is already
   shown by the tab above), like on the guest page.
   ========================================================================== */
html body .bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:560px){html body .bundle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){html body .bundle-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
html body .bundle{
  --bt:var(--accent,#6d4cf0);--bt-rgb:109,76,240;--bt-ink:var(--accent-text,#6d4cf0);
  display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:20px;text-align:left;overflow:hidden;
  transition:transform .15s,box-shadow .15s,border-color .15s}
html body .bundle .b-top{display:none}
html body .bundle h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:1.2}
html body .bundle p{margin:0;font-size:12.5px}
html body .bundle .b-foot{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:0;margin:0;padding:0;border:0}
html body .bundle .b-foot strong{margin-top:8px;font-size:16px;font-weight:800;letter-spacing:0;color:var(--bt-ink)}
html body .bundle .buy{
  margin-top:8px;align-self:flex-start;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:#fff;
  border:1px solid rgba(255,255,255,.5);
  background:var(--lq-gloss),linear-gradient(135deg,var(--st-g1,#7c3aed),var(--st-g2,#6366f1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 10px rgba(var(--bt-rgb),.28);text-shadow:0 1px 1px rgba(20,10,60,.25)}
html body .bundle:active{transform:translateY(1px) scale(.99)}
/* per-network colour */
html body .bundle.net-mtn{--bt-rgb:255,196,0}
html body .bundle.net-airteltigo{--bt-rgb:38,118,230}
html body .bundle.net-telecel{--bt-rgb:230,30,40}
html body .bundle.net-mtn .buy{background:var(--lq-gloss),linear-gradient(135deg,#f4c400,#ff9f00);color:#1b1500;text-shadow:none}
html body .bundle.net-airteltigo .buy{background:var(--lq-gloss),linear-gradient(135deg,#2a77e8,#1a56b8)}
html body .bundle.net-telecel .buy{background:var(--lq-gloss),linear-gradient(135deg,#e53030,#b80000)}
@media(max-width:380px){html body .bundle{padding:12px}html body .bundle h3{font-size:17px}}

/* tile glass on the light guest pages */
html body.guest-mode .bundle,html body.guest-mode .gx-bundle{
  background:var(--lq-gloss),linear-gradient(150deg,rgba(255,255,255,.7),rgba(var(--bt-rgb,var(--st-rgb,109,76,240)),.16));
  border:1px solid rgba(255,255,255,.9);border-radius:20px;
  box-shadow:inset 0 1.5px 0 #fff,inset 0 -10px 18px rgba(var(--bt-rgb,var(--st-rgb,109,76,240)),.1),0 10px 22px rgba(var(--bt-rgb,var(--st-rgb,109,76,240)),.2),0 0 0 1px rgba(var(--bt-rgb,var(--st-rgb,109,76,240)),.16);
  -webkit-backdrop-filter:none;backdrop-filter:none}
html body.guest-mode .gx-bundle{--bt-rgb:var(--st-rgb,109,76,240)}
html body.guest-mode .gx-bundle.net-mtn{--bt-rgb:255,196,0}
html body.guest-mode .gx-bundle.net-airteltigo{--bt-rgb:38,118,230}
html body.guest-mode .gx-bundle.net-telecel{--bt-rgb:230,30,40}
html body.guest-mode .gx-bundle:hover,html body.guest-mode .bundle:hover{border-color:rgba(255,255,255,1);box-shadow:inset 0 1.5px 0 #fff,inset 0 -10px 18px rgba(var(--bt-rgb),.12),0 14px 28px rgba(var(--bt-rgb),.28),0 0 0 1px rgba(var(--bt-rgb),.3)}
html body.guest-mode .bundle.net-mtn .b-foot strong,html body.guest-mode .gx-bundle.net-mtn strong{color:#8a5d00}
html body.guest-mode .bundle.net-airteltigo .b-foot strong{color:#1e5d9f}
html body.guest-mode .bundle.net-telecel .b-foot strong{color:#af242c}

/* tile glass in the dark signed-in app: dark frosted tile with a coloured glow, text stays near-white */
html body:not(.guest-mode) .bundle{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 60%),linear-gradient(150deg,rgba(255,255,255,.05),rgba(var(--bt-rgb),.15)),var(--surface);
  border:1px solid rgba(255,255,255,.2);border-radius:20px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),inset 0 -10px 20px rgba(var(--bt-rgb),.1),0 12px 26px rgba(2,6,18,.45);
  -webkit-backdrop-filter:none;backdrop-filter:none}
html body:not(.guest-mode) .bundle:hover{border-color:rgba(var(--bt-rgb),.7);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 14px 30px rgba(var(--bt-rgb),.3)}
html body:not(.guest-mode) .bundle.net-mtn .b-foot strong{color:#ffcc00}
html body:not(.guest-mode) .bundle.net-airteltigo .b-foot strong{color:#6aa5ff}
html body:not(.guest-mode) .bundle.net-telecel .b-foot strong{color:#ff6b6b}

@media (prefers-contrast:more){
  html body.guest-mode{--lq-fill:#fff;--lq-fill2:#fff;--lq-edge:rgba(40,30,90,.55)}
  html body.guest-mode .bundle,html body.guest-mode .gx-bundle{background:#fff;border-color:rgba(40,30,90,.55)}
}