/* ==========================================================================
   Quiet Data: guest experience layer
   Everything here is scoped to body.guest-mode or .gx-* classes, so the
   signed-in dashboard (ui.css) is not affected.
   ========================================================================== */

/* ---------- light tokens for guests (other views + checkout inherit them) ---------- */
body.guest-mode{
  --bg:var(--st-bg,#f5f4fb);--bg2:var(--st-bg,#f5f4fb);
  --surface:#ffffff;--surface2:var(--st-t2,#f1effa);
  --line:rgba(var(--st-ink,76,60,160),.12);--line2:rgba(var(--st-ink,76,60,160),.2);
  --text:#1c1838;--muted:#6b6786;--muted2:#8b87a3;
  --blue:var(--st-a,#6d4cf0);--blue2:var(--st-a2,#7a55f2);
  --input:#faf9ff;--ov:rgba(24,18,56,.55);
  --sh:rgba(var(--st-sh,60,40,140),.14);
  --accent:var(--st-a,#6d4cf0);--accent-grad:linear-gradient(135deg,var(--st-g1,#7c3aed),var(--st-g2,#6366f1));--on:#fff;--accent-text:var(--st-a,#6d4cf0);--glow:rgba(var(--st-rgb,109,76,240),.3);
  --chip-bg:rgba(var(--st-rgb,109,76,240),.08);--chip-bd:rgba(var(--st-rgb,109,76,240),.3);--chip-tx:var(--st-d,#5b3fd6);
  padding-bottom:28px;
  background:var(--st-bg,#f5f4fb);
}
html:has(body.guest-mode){background:var(--st-bg,#f5f4fb)}
body.guest-mode[data-theme]{--accent:var(--st-a,#6d4cf0);--accent-grad:linear-gradient(135deg,var(--st-g1,#7c3aed),var(--st-g2,#6366f1));--on:#fff;--accent-text:var(--st-a,#6d4cf0)}
body.guest-mode .top,
body.guest-mode .taskbar{display:none!important}
body.guest-mode .surface,body.guest-mode .card-form,body.guest-mode .verification-card,body.guest-mode .track-card,
body.guest-mode .order,body.guest-mode .empty,body.guest-mode .p-card,body.guest-mode .bundle,body.guest-mode .net-card{
  background:#fff;box-shadow:0 8px 24px rgba(var(--st-sh,60,40,140),.08)}
body.guest-mode .btn{background:linear-gradient(135deg,var(--st-g1,#7c3aed),var(--st-g2,#6366f1));box-shadow:0 10px 22px rgba(var(--st-rgb,109,76,240),.28)}
body.guest-mode .btn.ghost{background:#fff;color:var(--text);box-shadow:none}
body.guest-mode .page-title em,body.guest-mode .eyebrow,body.guest-mode .sec-head a{color:var(--st-a,#6d4cf0)}
body.guest-mode .wrap{width:100%;max-width:560px;padding:0 0 24px}
body.guest-mode #v-offers,body.guest-mode #v-orders,body.guest-mode #v-track,body.guest-mode #v-profile{padding:18px 16px 0}
body.guest-mode .ai-fab{bottom:20px;background:linear-gradient(135deg,var(--st-g1,#7c3aed),var(--st-g2,#6366f1));box-shadow:0 8px 22px rgba(var(--st-rgb,109,76,240),.4)}
body.guest-mode .ai-panel{bottom:68px}
body.guest-mode .co-modal{background:#fff;color:var(--text)}

/* ---------- header ---------- */
.gx-header{display:none}
body.guest-mode .gx-header{display:flex;position:sticky;top:0;z-index:40;align-items:center;justify-content:space-between;gap:12px;
  height:64px;padding:0 16px;max-width:560px;margin:0 auto;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.gx-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#1c1838;font-weight:800;font-size:18px;letter-spacing:-.2px}
.gx-brand img{width:38px;height:38px;border-radius:10px;display:block}
.gx-menu-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:var(--st-t,#ece8fd);color:var(--st-a,#6d4cf0);font-weight:700;font-size:15px;padding:10px 16px;border-radius:12px;transition:.15s}
.gx-menu-btn:hover{background:var(--st-t3,#e3ddfc)}
.gx-menu-btn svg{width:18px;height:18px}

/* ---------- guest home ---------- */
#v-guest{padding:0 0 8px}
.gx-hero{margin:0;padding:34px 22px 44px;text-align:center;color:#fff;border-radius:0 0 34px 34px;
  background:radial-gradient(380px 200px at 100% 0%,rgba(255,255,255,.18),transparent 65%),linear-gradient(135deg,var(--st-h1,#8b3dea),var(--st-g2,#6366f1))}
.gx-hero-pill{display:inline-block;font-size:13px;font-weight:600;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
.gx-hero h1{margin:22px 0 12px;font-size:clamp(30px,8.5vw,40px);letter-spacing:-1px;line-height:1.1;font-weight:800}
.gx-hero p{margin:0 auto;max-width:360px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.88)}
.gx-body{padding:0 16px}

/* latest order card */
.gx-latest{margin:18px 0 8px;padding:16px 18px;border-radius:18px;background:#eef6ff;border:1.5px solid #bcdcf8;color:#10335f;box-shadow:0 6px 18px rgba(26,92,255,.08)}
.gx-latest[hidden]{display:none}
.gx-lat-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.gx-lat-top .r-dot{flex:none}
.gx-lat-main{min-width:0}
.gx-latest h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.2}
.gx-latest small{display:block;font-size:13px;color:#2a5c94;margin:2px 0 0}
.gx-latest p{margin:0 0 12px;font-size:15px;line-height:1.5;word-break:break-word}
.gx-eta{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#dcecfb;color:#1c5a96;font-size:13px;font-weight:700;line-height:1.3}
.gx-eta.ok{background:#dcf5e6;color:#12703a}
.gx-eta svg{width:16px;height:16px;flex:none}
.ord-latest{margin:0 0 16px}

/* section label */
.gx-label{margin:30px 4px 12px;font-size:17px;font-weight:600;color:var(--muted)}

/* accordion (networks, number tools) */
.gx-acc{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 20px rgba(var(--st-sh,60,40,140),.08);margin-bottom:14px;overflow:hidden}
.gx-acc-head{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;color:var(--text);padding:20px 18px}
.gx-acc-head:focus-visible{outline:2px solid var(--st-a,#6d4cf0);outline-offset:-2px}
.gx-tag{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;flex:none;font-weight:800;font-size:19px;color:#fff}
.gx-tag.mtn{background:#ffc400;color:#fff;font-size:17px}
.gx-tag.airteltigo{background:#2f7bf5}
.gx-tag.telecel{background:#ee2b36}
.gx-tag.tool{background:var(--st-t,#ece8fd);color:var(--st-a,#6d4cf0)}
.gx-tag.tool svg{width:26px;height:26px}
.gx-acc-info{flex:1;min-width:0}
.gx-acc-info b{display:block;font-size:19px;font-weight:700;letter-spacing:-.3px}
.gx-acc-info small{display:block;margin-top:2px;font-size:14.5px;color:var(--muted)}
.gx-acc-cta{display:flex;align-items:center;gap:6px;color:var(--st-a,#6d4cf0);font-weight:700;font-size:16px;text-align:right;line-height:1.3}
.gx-acc-cta svg{width:18px;height:18px;transition:transform .25s ease}
.gx-acc.open .gx-acc-cta svg{transform:rotate(90deg)}
.gx-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.gx-acc.open .gx-acc-panel{grid-template-rows:1fr}
.gx-acc-inner{overflow:hidden;min-height:0}
.gx-acc-pad{padding:4px 14px 16px;border-top:1px solid var(--line)}

/* bundle rows inside a network */
.gx-bundles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:14px}
.gx-bundle{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:14px;background:#f6f3ff;border:1px solid rgba(var(--st-rgb,109,76,240),.16);text-align:left;cursor:pointer;color:var(--text);transition:.15s}
.gx-bundle:hover{border-color:var(--st-a,#6d4cf0);transform:translateY(-1px)}
.gx-bundle b{font-size:19px;font-weight:800;letter-spacing:-.4px}
.gx-bundle span{font-size:12.5px;color:var(--muted)}
.gx-bundle strong{margin-top:8px;font-size:16px;color:var(--st-a,#6d4cf0);font-weight:800}
.gx-bundle em{font-style:normal;margin-top:8px;display:inline-block;align-self:flex-start;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--st-g1,#7c3aed),var(--st-g2,#6366f1));padding:6px 12px;border-radius:999px}
/* Keep guest and store-link bundle cards in the same palette as Offers. */
.gx-bundle.net-mtn{background:#fffbed;border-color:#eadc9d}
.gx-bundle.net-mtn:hover{border-color:#d89700}
.gx-bundle.net-mtn strong{color:#9a6900}
.gx-bundle.net-mtn em{background:linear-gradient(135deg,#f4c400,#ff9f00)}
.gx-bundle.net-airteltigo{background:#f4f9ff;border-color:#c9d8f0}
.gx-bundle.net-airteltigo:hover{border-color:#347fe3}
.gx-bundle.net-airteltigo strong{color:#1e5d9f}
.gx-bundle.net-airteltigo em{background:linear-gradient(135deg,#1476d4,#e12655)}
.gx-bundle.net-telecel{background:#fff7f7;border-color:#efcdd0}
.gx-bundle.net-telecel:hover{border-color:#d62532}
.gx-bundle.net-telecel strong{color:#af242c}
.gx-bundle.net-telecel em{background:linear-gradient(135deg,#e21d2a,#ff6a67)}

/* number tools inside accordions */
.gx-tool{display:grid;gap:12px;padding-top:14px}
.gx-tool p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.gx-tool textarea,.gx-tool input[type=text],.gx-tool input:not([type]){width:100%;border:1px solid var(--line2);border-radius:14px;background:var(--input);color:var(--text);font:15px Inter,Arial,sans-serif;padding:14px 15px;outline:0}
.gx-tool textarea{resize:vertical;min-height:84px}
.gx-tool textarea:focus,.gx-tool input:focus{border-color:var(--st-a,#6d4cf0);box-shadow:0 0 0 3px rgba(var(--st-rgb,109,76,240),.18)}
.gx-tool .btn{justify-self:stretch}

/* trust features */
.gx-trust{margin:34px -16px 0;padding:34px 24px 10px;border-top:1px solid var(--line);background:#f1f0f9;text-align:center}
.gx-feat{margin-bottom:30px}
.gx-feat-ico{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;margin:0 auto 14px}
.gx-feat-ico svg{width:34px;height:34px}
.gx-feat-ico.green{background:#d9f7e6;color:#1f9d57}
.gx-feat-ico.amber{background:#ffe9d6;color:#e8671a}
.gx-feat-ico.violet{background:var(--st-t,#e9e4fb);color:var(--st-a,#6d4cf0)}
.gx-feat h3{margin:0 0 6px;font-size:21px;font-weight:700;letter-spacing:-.3px}
.gx-feat p{margin:0 auto;max-width:330px;font-size:15.5px;line-height:1.6;color:var(--muted)}

/* footer */
.gx-foot{margin:0 -16px;padding:26px 20px 8px;text-align:center;color:var(--muted);font-size:15px;line-height:1.9;border-top:1px solid var(--line);background:#fff}
.gx-foot b{color:var(--st-a,#6d4cf0);font-weight:700}
.gx-foot a,.gx-foot button.gx-link{color:var(--st-a,#6d4cf0);font-weight:600;background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- right-side drawer ---------- */
.gx-drawer-scrim{position:fixed;inset:0;z-index:150;background:rgba(24,18,56,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.gx-drawer{position:fixed;top:0;right:0;bottom:0;z-index:160;width:min(340px,86vw);display:flex;flex-direction:column;background:#fff;color:#1c1838;
  box-shadow:-18px 0 50px rgba(30,20,80,.25);transform:translateX(102%);visibility:hidden;transition:transform .3s cubic-bezier(.22,.8,.3,1),visibility 0s linear .3s}
body.gx-open .gx-drawer-scrim{opacity:1;visibility:visible;transition:opacity .25s ease}
body.gx-open .gx-drawer{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.22,.8,.3,1)}
body.gx-open{overflow:hidden}
.gx-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid rgba(var(--st-ink,76,60,160),.1)}
.gx-drawer-head b{font-size:18px;font-weight:800}
.gx-drawer-close{width:38px;height:38px;border-radius:12px;border:0;background:var(--st-t2,#f1effa);color:var(--st-a,#6d4cf0);font-size:22px;line-height:1;cursor:pointer}
.gx-nav{padding:12px;display:grid;gap:4px;overflow:auto;flex:1;align-content:start}
.gx-nav a,.gx-nav button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;text-decoration:none;color:#1c1838;font-size:16px;font-weight:600;padding:14px;border-radius:14px;transition:.15s}
.gx-nav a:hover,.gx-nav button:hover{background:#f4f1ff}
.gx-nav .ni{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--st-t,#ece8fd);color:var(--st-a,#6d4cf0);flex:none}
.gx-nav .ni svg{width:20px;height:20px}
.gx-nav small{display:block;font-weight:500;font-size:12.5px;color:#6b6786;margin-top:1px}
.gx-nav hr{border:0;border-top:1px solid rgba(var(--st-ink,76,60,160),.1);margin:8px 6px}
.gx-drawer-foot{padding:14px 18px 20px;display:grid;gap:10px;border-top:1px solid rgba(var(--st-ink,76,60,160),.1)}
.gx-drawer-foot button{border:0;cursor:pointer;font-weight:700;font-size:15px;padding:14px;border-radius:14px}
.gx-drawer-foot .primary{background:linear-gradient(135deg,var(--st-g1,#7c3aed),var(--st-g2,#6366f1));color:#fff;box-shadow:0 10px 22px rgba(var(--st-rgb,109,76,240),.28)}
.gx-drawer-foot .ghost{background:var(--st-t2,#f1effa);color:var(--st-d,#5b3fd6)}

@media(min-width:561px){
  body.guest-mode .gx-hero{border-radius:0 0 34px 34px}
}
@media(prefers-reduced-motion:reduce){
  .gx-acc-panel,.gx-drawer,.gx-drawer-scrim,.gx-acc-cta svg{transition:none}
}

/* narrow-phone polish: stack the CTA label, keep subtitles on one line */
.gx-acc-info small{font-size:13.5px;line-height:1.35}
.gx-acc-cta>span:first-child{display:block;max-width:74px;text-align:center}
.gx-acc.open .gx-acc-cta>span:first-child{max-width:none}
.gx-tool-cta{display:flex}
@media(max-width:380px){.gx-tag{width:50px;height:50px;font-size:16px}.gx-acc-head{gap:12px;padding:18px 14px}}

/* Reference-inspired order history controls: only the site's real statuses and networks. */
.ord-history{display:grid;gap:14px;margin-top:18px}.ord-search{display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px solid var(--line2);border-radius:18px;background:var(--surface2);box-shadow:0 5px 18px rgba(15,30,70,.05)}.ord-search .i{width:22px;height:22px;flex:none;color:var(--muted)}.ord-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:16px Inter,Arial,sans-serif}.ord-search input::placeholder{color:var(--muted)}.ord-filter-row{display:flex;gap:10px;overflow-x:auto;padding:1px 1px 3px;scrollbar-width:none}.ord-filter-row::-webkit-scrollbar{display:none}.ord-filter-row button{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--muted);padding:10px 15px;font:700 13px Inter,Arial,sans-serif;cursor:pointer;transition:.18s}.ord-filter-row button:hover{border-color:var(--accent-text);color:var(--text)}.ord-filter-row button.on{background:var(--accent-grad);border-color:transparent;color:var(--on,#fff);box-shadow:0 6px 15px var(--glow)}.ord-filter-row button b{min-width:22px;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.16);font-size:11px}.ord-filter-row button:not(.on) b{background:var(--surface2);color:var(--muted)}.ord-networks button{padding:10px 17px}.ord-history-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 8px 24px rgba(15,30,70,.055)}.ord-history-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 20px 16px;border-bottom:1px solid var(--line)}.ord-history-head h2{margin:0;font-size:20px;letter-spacing:-.4px}.ord-history-head p{margin:4px 0 0;color:var(--muted);font-size:13px}.ord-refresh-all{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);font:700 13px Inter,Arial,sans-serif;cursor:pointer;padding:8px;border-radius:10px}.ord-refresh-all:hover{background:var(--surface2);color:var(--text)}.ord-refresh-all .i{width:22px;height:22px}.ord-refresh-all.spin .i{animation:ordSpin .7s linear infinite}.ord-history-card>.orders{max-width:none;gap:0}.ord-history-card>.orders .order{border:0;border-radius:0;border-bottom:1px solid var(--line);box-shadow:none}.ord-history-card>.orders .order:last-child{border-bottom:0}.ord-history-card .o-head{padding:17px 20px}.ord-history-card .o-main b{font-size:16px}.ord-history-card .o-side strong{font-size:17px}.ord-history-card .r-dot{width:52px;height:52px;border-radius:15px;font-size:14px;font-weight:800}.ord-history-card .o-inner{margin:0 20px}.ord-history-card .empty{padding:38px 20px}.ord-history-card .order-refresh{margin-bottom:2px}@keyframes ordSpin{to{transform:rotate(360deg)}}
@media(max-width:560px){.ord-history-head{padding:17px 16px 14px}.ord-history-head h2{font-size:18px}.ord-history-head p{font-size:12px}.ord-refresh-all span{display:none}.ord-history-card .o-head{padding:15px 14px;gap:10px}.ord-history-card .r-dot{width:48px;height:48px}.ord-history-card .o-main b{font-size:15px}.ord-history-card .o-side strong{font-size:16px}.ord-history-card .o-inner{margin:0 14px}.ord-filter-row button{padding:9px 13px}}

/* ===== Orders page: colours follow the website theme and the network cards/logos ===== */
/* tiles: same colours as the logos on the network cards (MTN yellow + blue, AT white + red, Telecel red + white) */
.r-dot.mtn{background:#ffcc00;color:#004f9f}
.r-dot.airteltigo{background:#fff;color:#e4002b;box-shadow:inset 0 0 0 1.5px rgba(0,87,184,.28)}
.r-dot.telecel{background:#e60000;color:#fff}
/* when a network is picked, the whole orders page takes that network's theme (same values as body[data-theme]) */
#v-orders[data-net="mtn"]{--accent:#ffcc00;--accent-grad:linear-gradient(135deg,#ffd21f,#ffb400);--on:#1b1500;--accent-text:#ffd84d;--glow:rgba(255,200,0,.28)}
#v-orders[data-net="airteltigo"]{--accent:#e4002b;--accent-grad:linear-gradient(135deg,#2a77e8,#e4002b);--on:#fff;--accent-text:#ff7a93;--glow:rgba(228,0,43,.3)}
#v-orders[data-net="telecel"]{--accent:#e60000;--accent-grad:linear-gradient(135deg,#f02a2a,#c70000);--on:#fff;--accent-text:#ff7b7b;--glow:rgba(230,0,0,.3)}
/* network chips: a small brand dot, and the full brand colour when selected */
.ord-networks button[data-ord-network]:not([data-ord-network="all"])::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:var(--nc)}
.ord-networks button[data-ord-network="mtn"]{--nc:#ffcc00}
.ord-networks button[data-ord-network="airteltigo"]{--nc:linear-gradient(135deg,#2a77e8,#e4002b)}
.ord-networks button[data-ord-network="telecel"]{--nc:#e60000}
.ord-networks button.on:not([data-ord-network="all"])::before{background:currentColor}
.ord-networks button[data-ord-network="mtn"].on{background:linear-gradient(135deg,#ffd21f,#ffb400);color:#1b1500;box-shadow:0 6px 15px rgba(255,200,0,.28)}
.ord-networks button[data-ord-network="airteltigo"].on{background:linear-gradient(135deg,#2a77e8,#e4002b);color:#fff;box-shadow:0 6px 15px rgba(228,0,43,.3)}
.ord-networks button[data-ord-network="telecel"].on{background:linear-gradient(135deg,#f02a2a,#c70000);color:#fff;box-shadow:0 6px 15px rgba(230,0,0,.3)}
.ord-networks button.on[data-ord-network="mtn"] b,.ord-networks button.on[data-ord-network="airteltigo"] b,.ord-networks button.on[data-ord-network="telecel"] b{background:rgba(255,255,255,.2)}
/* order rows: tinted details, chevron and refresh button in the network colour */
.ord-history-card .order[data-network="mtn"]{--nc:#ffcc00}
.ord-history-card .order[data-network="airteltigo"]{--nc:#e4002b}
.ord-history-card .order[data-network="telecel"]{--nc:#e60000}
.ord-history-card .order.open{box-shadow:inset 3px 0 0 var(--nc,var(--accent))}
.ord-history-card .order.open .o-chev{color:var(--nc,var(--accent-text))}
.ord-history-card .order-refresh:hover{border-color:var(--nc,var(--accent));color:var(--nc,var(--accent-text))}
.ord-refresh-all:hover{color:var(--accent-text)}
.ord-refresh-all:disabled{cursor:default}
.ord-refresh-all.spin .i{color:var(--accent-text)}
@media(prefers-reduced-motion:reduce){.ord-refresh-all.spin .i{animation-duration:2s}}