/* Mashup offers. Built from the site's own card, pill and checkout classes and tokens, so it follows the site's dark and light looks.
   Mashup is an MTN product, so only its accents are MTN yellow, scoped the same way the Orders page scopes MTN
   (only inside .mx / .mx-pill / the Mashup popup). Nothing here changes any other part of the site. */
.mx,.co-overlay.mx-checkout,.mx-pill{
  --mx:#ffcc00;--mx-grad:linear-gradient(135deg,#f4c400,#ff9f00);--mx-ink:#1b1500;--mx-deep:#ffd84d;--mx-glow:rgba(255,200,0,.28);
  --mx-tag-bg:rgba(139,92,246,.22);--mx-tag-bd:rgba(167,139,250,.5);--mx-tag-tx:#c9b6ff}
body.guest-mode .mx,body.guest-mode .co-overlay.mx-checkout,body.guest-mode .mx-pill{--mx-deep:#9a6900;--mx-glow:rgba(233,170,0,.28);--mx-tag-bg:rgba(124,92,255,.12);--mx-tag-bd:rgba(124,92,255,.42);--mx-tag-tx:#5b3fd1}

/* compact row (dashboard, guest page, agent stores) */
.mx{margin:10px 0 6px}
body.guest-mode .mx{margin:10px 0 14px}
.mx-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
body.guest-mode .mx-row{box-shadow:0 8px 24px rgba(var(--st-sh,60,40,140),.08)}
.mx-row:hover{transform:translateY(-1px);border-color:var(--mx);box-shadow:0 8px 22px var(--mx-glow)}
.mx-row:focus-visible,.mx-pill:focus-visible{outline:2px solid var(--mx);outline-offset:3px}
.mx-ico{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--mx-grad);color:var(--mx-ink)}
.mx-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mx-info{flex:1;min-width:0;display:block}
.mx-info b{display:block;font-size:15.5px;letter-spacing:-.2px;color:var(--text)}
.mx-info small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px;line-height:1.35}
.mx-go{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);color:var(--mx-deep)}
.mx-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* pill on the Offers page, next to the last voucher */
.mx-pill{--offers-voucher-accent:#d89700}
.mx-pill .offers-voucher-art{display:grid;place-items:center;background:var(--mx-grad);color:var(--mx-ink);padding:0}
.mx-pill .offers-voucher-art svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* popup: the checkout's own classes with yellow accents (guest pages would otherwise recolour them purple) */
.co-overlay.mx-checkout{--hl:var(--mx-deep);--ring:#e3ad18;--grad:var(--mx-grad);--on:var(--mx-ink);--glow-btn:var(--mx-glow);--chip-bg:rgba(244,196,0,.14);--chip-bd:rgba(216,151,0,.45);--chip-tx:var(--mx-deep)}
.co-overlay.mx-checkout .co-btn{background:var(--mx-grad);color:var(--mx-ink);box-shadow:0 10px 24px var(--mx-glow)}
.co-overlay.mx-checkout .co-btn.ghost{background:transparent;color:var(--mx-deep);border:1px solid var(--chip-bd);box-shadow:none}
.co-overlay.mx-checkout .co-chip small,.co-overlay.mx-checkout .co-chip strong,.co-overlay.mx-checkout .co-sum .total b{color:var(--mx-deep)}
.co-overlay.mx-checkout .co-field input:focus{border-color:#e3ad18;box-shadow:0 0 0 3px var(--mx-glow)}
.co-overlay.mx-checkout .tick{background:var(--chip-bg);border-color:#d89700;color:var(--mx-deep)}
.mx-list{display:grid;gap:10px;margin:4px 0 6px}
.mx-offer{display:block;width:100%;padding:16px 16px 14px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.mx-offer:hover{border-color:var(--mx);box-shadow:0 6px 18px var(--mx-glow)}
.mx-offer .mx-tag{display:inline-block;margin:0 0 9px;padding:3px 11px;border-radius:999px;background:var(--mx-tag-bg);border:1px solid var(--mx-tag-bd);color:var(--mx-tag-tx);font-size:11px;font-weight:700;letter-spacing:.2px}
.mx-offer b{display:block;font-size:16px;letter-spacing:-.2px}
.mx-offer small{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.4}
.mx-offer strong{display:block;margin-top:10px;color:var(--text);font-size:22px;font-weight:800;letter-spacing:-.4px}
.mx-empty{padding:18px;border-radius:16px;background:var(--card);border:1px dashed var(--line);color:var(--muted);font-size:13px;text-align:center}
.mx-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 10px;padding:0;border:0;background:none;color:var(--mx-deep);font:700 13px Inter,Arial,sans-serif;cursor:pointer}
.mx-note{margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}
@media(prefers-reduced-motion:reduce){.mx-row{transition:none}.mx-row:hover{transform:none}}

/* Track order: Data bundle / Mashup switch and Mashup result (v157) */
.tk-kind{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.08)}
.tk-kind button{height:42px;border:0;border-radius:11px;background:none;color:#9ca3af;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.tk-kind button.on{background:#2563eb;color:#fff}
.tk-kind button:not(.on):hover{color:#e5e7eb}
.tk-kind button:focus-visible{outline:3px solid rgba(96,165,250,.55);outline-offset:2px}
.tk-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 2px}
.tk-rail i{display:block;height:5px;border-radius:99px;background:var(--line)}
.tk-rail i.on{background:var(--amber)}
.tk-rail.s3 i.on{background:var(--green)}
.tk-rail-l{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-size:11.5px;color:var(--muted2)}
.tk-rail-l span:nth-child(2){text-align:center}.tk-rail-l span:nth-child(3){text-align:right}
@media (prefers-reduced-motion:reduce){.tk-kind button{transition:none}}

/* My Orders / agent Orders: Mashup rows (v158) */
.r-dot.mashup{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff}
.order .mx-line{margin:12px 0 0;font-size:13px;line-height:1.5}
.agd-subdetail{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.agd-subdetail>b{display:block;margin-bottom:6px;font-size:13.5px}

/* Mashup row: first on the page, bigger, and it pops so new users notice it (v159).
   Sits above Results checkers on the dashboard, the guest page and agent store links.
   Same size as the Results checkers card; float, ring and dot copy the guest Menu button. */
.mx{margin:24px 0 0}
body.guest-mode .mx{margin:24px 0 0}
.mx+[data-voucher-slot] .vc-teaser{margin-top:14px}
.mx-row{position:relative;gap:14px;padding:16px;border-radius:20px;border:1.5px solid var(--mx);
  background:linear-gradient(135deg,rgba(255,204,0,.14),rgba(255,159,0,.05)) , var(--surface);
  box-shadow:0 8px 22px var(--mx-glow);
  animation:mxPop .5s cubic-bezier(.34,1.56,.64,1) both,mxFloat 3.2s ease-in-out .5s infinite}
body.guest-mode .mx-row{box-shadow:0 8px 22px var(--mx-glow)}
.mx-row::before{content:"";position:absolute;inset:-4px;border-radius:24px;border:2px solid var(--mx);opacity:0;pointer-events:none;animation:mxRing 2.4s ease-out infinite}
.mx-row::after{content:"";position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:#f59e0b;border:2px solid var(--surface);box-shadow:0 0 0 0 rgba(245,158,11,.6);animation:mxDot 2s ease-out infinite}
.mx-row:hover{transform:none;box-shadow:0 12px 28px var(--mx-glow);filter:brightness(1.04)}
.mx-row:active{transform:scale(.98)}
.mx-ico{width:52px;height:52px;border-radius:16px;animation:mxIcon 2.4s ease-out infinite}
.mx-ico svg{width:26px;height:26px}
.mx-info b{display:flex;align-items:center;gap:8px;font-size:17px}
.mx-info small{margin-top:3px;font-size:13px}
.mx-new{display:inline-block;padding:2px 8px;border-radius:999px;background:#f59e0b;color:#1b1500;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.6px;line-height:1.5}
.mx-go{width:34px;height:34px}
.mx-go svg{width:18px;height:18px}
@keyframes mxPop{0%{opacity:0;transform:scale(.88) translateY(8px)}100%{opacity:1;transform:none}}
@keyframes mxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes mxRing{0%{opacity:.75;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.06)}}
@keyframes mxDot{0%{box-shadow:0 0 0 0 rgba(245,158,11,.6)}70%,100%{box-shadow:0 0 0 9px rgba(245,158,11,0)}}
@keyframes mxIcon{0%{box-shadow:0 0 0 0 var(--mx-glow)}70%,100%{box-shadow:0 0 0 10px rgba(255,200,0,0)}}
@media(prefers-reduced-motion:reduce){.mx-row,.mx-ico,.mx-row::after{animation:none}.mx-row::before{animation:none;opacity:.45}.mx-row:active{transform:none}}

/* v162: cheap twins of the dot ripple and the icon glow. They are hidden everywhere; Android signed-in pages switch them on (android-lite.js)
   in place of the two shadow animations above, because growing and fading a disc is drawn by the phone's graphics chip, a moving shadow is not. */
.mx-pulse{display:none}
.mx-ico::after{content:none}
@keyframes mxDotGrow{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(2.29);opacity:0}}
@keyframes mxIcoGrow{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(1.38);opacity:0}}
@media(prefers-reduced-motion:reduce){.mx-pulse,.mx-ico::after{animation:none!important;opacity:0!important}}