/* ==========================================================================
   Quiet Data v192: network bundle tiles. ALWAYS ON (it does not depend on the glass design, so Admin > Site design > off keeps it).
   The small square tile of the guest page, used for the bundle cards on every Offers page (signed-in app and guest).
   Plain, crisp and fast: solid tint, fine edge, soft coloured shadow, glossy chip. No blur, no see-through layers.
   Looks only: the markup, the Buy buttons and what they do are untouched. When the glass design is on, liquid.css (loaded after this)
   adds its own frosted finish on top of the same tiles.
   ========================================================================== */
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,html body .gx-bundle{
  --bt-rgb:109,76,240;
  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;-webkit-backdrop-filter:none;backdrop-filter:none}
html body .gx-bundle{--bt-rgb:var(--st-rgb,109,76,240)}
html body .bundle.net-mtn,html body .gx-bundle.net-mtn{--bt-rgb:255,196,0}
html body .bundle.net-airteltigo,html body .gx-bundle.net-airteltigo{--bt-rgb:38,118,230}
html body .bundle.net-telecel,html body .gx-bundle.net-telecel{--bt-rgb:230,30,40}

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}
html body .bundle .buy,html body .gx-bundle em{
  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:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 55%),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:not(.guest-mode) .bundle .buy{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),var(--accent-grad)}
html body .bundle.net-mtn .buy,html body .gx-bundle.net-mtn em{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 55%),linear-gradient(135deg,#f4c400,#ff9f00);color:#1b1500;text-shadow:none}
html body .bundle.net-airteltigo .buy,html body .gx-bundle.net-airteltigo em{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),linear-gradient(135deg,#2a77e8,#1a56b8)}
html body .bundle.net-telecel .buy,html body .gx-bundle.net-telecel em{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),linear-gradient(135deg,#e53030,#b80000)}
html body .bundle:active,html body .gx-bundle:active{transform:translateY(1px) scale(.99)}
@media(max-width:380px){html body .bundle,html body .gx-bundle{padding:12px}html body .bundle h3{font-size:17px}}

/* light guest pages and store links: pale solid tint */
html body.guest-mode .bundle,html body.guest-mode .gx-bundle{
  background:linear-gradient(150deg,#fff,rgba(var(--bt-rgb),.13));
  border:1px solid rgba(var(--bt-rgb),.3);
  box-shadow:inset 0 1.5px 0 #fff,inset 0 -10px 18px rgba(var(--bt-rgb),.07),0 8px 18px rgba(var(--bt-rgb),.18)}
html body.guest-mode .bundle:hover,html body.guest-mode .gx-bundle:hover{border-color:rgba(var(--bt-rgb),.6);box-shadow:inset 0 1.5px 0 #fff,0 12px 24px rgba(var(--bt-rgb),.26)}
html body.guest-mode .bundle .b-foot strong,html body.guest-mode .gx-bundle strong{color:var(--st-a,#6d4cf0)}
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,html body.guest-mode .gx-bundle.net-airteltigo strong{color:#1e5d9f}
html body.guest-mode .bundle.net-telecel .b-foot strong,html body.guest-mode .gx-bundle.net-telecel strong{color:#af242c}

/* signed-in app (dark): dark solid tile with a coloured edge and glow, text stays near-white */
html body:not(.guest-mode) .bundle{
  background:linear-gradient(180deg,rgba(255,255,255,.08),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(var(--bt-rgb),.38);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.2),inset 0 -10px 20px rgba(var(--bt-rgb),.08),0 10px 22px rgba(2,6,18,.42)}
html body:not(.guest-mode) .bundle:hover{border-color:rgba(var(--bt-rgb),.75);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.24),0 14px 28px rgba(var(--bt-rgb),.3)}
html body:not(.guest-mode) .bundle .b-foot strong{color:var(--accent-text)}
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 .bundle,html body.guest-mode .gx-bundle{background:#fff;border-color:rgba(40,30,90,.55)}}
@media (prefers-reduced-motion:reduce){html body .bundle,html body .gx-bundle{transition:none}}