/* ==========================================================================
   Account: order tracking page (the account hub rules follow below).
   ========================================================================== */
.mm-trk { padding-bottom: 48px; }
.mm-trk__title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mm-trk__title h1 { font-size: 28px; margin: 0; }
.mm-trk__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.mm-trk__main, .mm-trk__aside { display: grid; gap: 16px; }
.mm-trk__hero { background: linear-gradient(135deg, #351e63 0%, var(--pri) 60%, #6a45b4 100%); color: #fff; border-radius: var(--r-lg); padding: 22px; }
.mm-trk__meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-trk__meta small { color: rgba(255, 255, 255, .8); font-size: 13.5px; }
.mm-trk__hero h2 { color: #fff; font-size: 26px; margin: 8px 0 4px; }
.mm-trk__hero p { margin: 0 0 18px; color: rgba(255, 255, 255, .85); }
.mm-trk__awb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .12); }
.mm-trk__awb > div { flex: 1; min-width: 160px; }
.mm-trk__awb small { display: block; color: rgba(255, 255, 255, .75); font-size: 12.5px; }
.mm-trk__awb code { font: 700 16px var(--display); color: #fff; }
.mm-trk__carrier { color: rgba(255, 255, 255, .75); }
.mm-trk__updates h3, .mm-trk__aside h3 { font-size: 18px; margin: 0 0 14px; }

/* Shipment updates: oldest at the top, newest/upcoming below */
.mm-events { list-style: none; margin: 0; padding: 0; }
.mm-events li { position: relative; display: grid; gap: 1px; padding: 0 0 22px 34px; color: var(--subtle); }
.mm-events li:last-child { padding-bottom: 0; }
.mm-events li::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: -2px; width: 2px; background: var(--line); }
.mm-events li:last-child::before { display: none; }
.mm-events li.is-done::before { background: var(--teal); }
.mm-events li.is-now::before { background: linear-gradient(var(--teal), var(--line)); }
.mm-events i { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--line); }
.mm-events .is-done i { background: var(--teal); border-color: var(--teal); }
.mm-events .is-now i { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 5px rgba(0, 184, 169, .18); }
.mm-events b { font-size: 15.5px; color: inherit; }
.mm-events span { font-size: 13.5px; }
.mm-events .is-done, .mm-events .is-now { color: var(--ink); }
.mm-events .is-done span, .mm-events .is-now span { color: var(--mute); }
.mm-trk__strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mm-trk__strip small { display: block; color: var(--mute); }
.mm-trk__btns { display: flex; gap: 8px; }
.mm-trk__addr { font-style: normal; line-height: 1.6; color: var(--ink); }
.mm-trk__help { background: var(--teal); color: var(--ink); border-radius: var(--r-lg); padding: 20px; }
.mm-trk__help h3 { color: #fff; margin-bottom: 6px; }
.mm-trk__help p { color: rgba(255, 255, 255, .92); }
.mm-trk__acts { display: grid; gap: 8px; }
@media (max-width: 960px) { .mm-trk__grid { grid-template-columns: 1fr; } }

/* Orders list header */
.mm-trackpage__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mm-trackpage__head h1 { margin: 0; font-size: 28px; }


/* ---- account: page-level rules ported from the previous design, one rule per selector ---- */
.mm-continue{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px 20px;font-weight:700;font-size:14px;color:var(--ink);text-decoration:none!important}
.mm-continue .mm-ico{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){
.acct-panel{transition:none}
}
.mm-acct{--p:#4f2d90;--pd:#351e63;--pl:#7b52c1;--pxl:#a888e0;--pbg:#f2edfb;--teal:#00b8a9;--abg:#fef3c7;--at:#b45309;--gbg:#dcfce7;--shl:0 10px 48px rgba(79,45,144,.16);--rl:16px;background:var(--bg);padding-bottom:56px;overflow-x:clip}
.mm-acct *{box-sizing:border-box}
.mm-acct *::before{box-sizing:border-box}
.mm-acct *::after{box-sizing:border-box}
.mm-acct .acct-hero{background:linear-gradient(140deg,#351e63 0%,var(--p) 50%,#6a45b4 100%);color:#fff;padding:34px 0 70px}
.mm-acct .acct-hh{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mm-acct .acct-av{width:72px;height:72px;border-radius:50%;background:#fff;color:var(--p);font:900 26px/1 var(--display);display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.25);flex:none}
.mm-acct .acct-hero h1{color:#fff;font-size:30px;font-weight:900;margin:0}
.mm-acct .acct-hero p{color:rgba(255,255,255,.75);font-size:14px;margin:2px 0 0}
.mm-acct .acct-sp{flex:1;min-width:0}
.mm-acct .acct-stats{display:flex;gap:12px;flex-wrap:wrap}
.mm-acct .acct-stats div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:10px 18px;min-width:104px}
.mm-acct .acct-stats b{display:block;font:800 20px/1.2 var(--display);color:#fff}
.mm-acct .acct-stats span{font-size:12px;color:rgba(255,255,255,.75)}
.mm-acct .acct-lay{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start;margin-top:-40px;position:relative}
.mm-acct .acct-side{background:#fff;border:1.5px solid var(--line);border-radius:var(--rl);padding:10px;box-shadow:var(--shl);position:sticky;top:130px}
.mm-acct .acct-side>button{display:flex;width:100%;align-items:center;gap:12px;background:none;border:0;border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:500;color:var(--body);text-align:left;text-decoration:none!important;font-family:inherit;cursor:pointer}
.mm-acct .acct-side>a{display:flex;width:100%;align-items:center;gap:12px;background:none;border:0;border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:500;color:var(--body);text-align:left;text-decoration:none!important;font-family:inherit;cursor:pointer}
.mm-acct .acct-side>button:hover{background:var(--pbg)}
.mm-acct .acct-side>a:hover{background:var(--pbg)}
.mm-acct .acct-side .on{background:var(--pbg);color:var(--p);font-weight:700}
.mm-acct .acct-side svg{width:18px;height:18px;flex:none}
.mm-acct .acct-side hr{border:0;border-top:1px solid var(--line);margin:8px 6px}
.mm-acct .acct-side .out{color:var(--red)}
.mm-acct .acct-side .sub{display:none}
.mm-acct .acct-side .chev{display:none}
.mm-acct .tx{flex:1;min-width:0}
.mm-acct .panel{display:none}
.mm-acct .panel.on{display:block}
.mm-acct .acct-flash{margin-bottom:16px}
.mm-acct .card{background:#fff;border:1.5px solid var(--line);border-radius:var(--rl);padding:28px;box-shadow:var(--shl);margin:0}
.mm-acct .card+.card{margin-top:20px;box-shadow:none}
.mm-acct .ch{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.mm-acct .ch h2{font-size:22px;font-weight:800;margin:0}
.mm-acct .ch p{font-size:13.5px;color:var(--mute);margin:4px 0 0}
.mm-acct .fg{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mm-acct .fg[hidden]{display:none}
.mm-acct .f{display:flex;flex-direction:column;gap:6px;min-width:0}
.mm-acct .f.w{grid-column:1/-1}
.mm-acct .fg-full{grid-column:1/-1}
.mm-acct label{font-size:12.5px;font-weight:600;color:var(--ink)}
.mm-acct input[type=text]{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .16s;margin:0;min-height:46px;box-shadow:none;height:auto}
.mm-acct input[type=email]{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .16s;margin:0;min-height:46px;box-shadow:none;height:auto}
.mm-acct input[type=tel]{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .16s;margin:0;min-height:46px;box-shadow:none;height:auto}
.mm-acct input[type=password]{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .16s;margin:0;min-height:46px;box-shadow:none;height:auto}
.mm-acct input[type=date]{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .16s;margin:0;min-height:46px;box-shadow:none;height:auto}
.mm-acct select{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .16s;margin:0;min-height:46px;box-shadow:none;height:auto}
.mm-acct input:focus{border-color:var(--pl);box-shadow:0 0 0 3px var(--pbg)}
.mm-acct select:focus{border-color:var(--pl);box-shadow:0 0 0 3px var(--pbg)}
.mm-acct .hint{font-size:12px;color:var(--mute)}
.mm-acct .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--p);color:#fff;border:1.5px solid var(--p);border-radius:9px;padding:11px 22px;font:inherit;font-size:13.5px;font-weight:600;transition:background .16s;text-decoration:none!important;cursor:pointer;min-height:44px}
.mm-acct .btn:hover{background:var(--pd);color:#fff}
.mm-acct .btn.o{background:none;color:var(--p);border:1.5px solid var(--pl)}
.mm-acct .btn.o:hover{background:var(--pbg);color:var(--p)}
.mm-acct .btn.s{padding:8px 14px;font-size:12.5px;min-height:38px}
.mm-acct .btn.done{background:var(--green);border-color:var(--green)}
.mm-acct .acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;align-items:center}
.mm-acct .acts.fg-full{margin-top:6px}
.mm-acct .tag{font-size:12px;font-weight:700;border-radius:99px;padding:3px 11px;white-space:nowrap}
.mm-acct .tag.ok{background:var(--gbg);color:var(--green)}
.mm-acct .tag.due{background:var(--abg);color:var(--at)}
.mm-acct .tag.no{background:var(--pbg);color:var(--p)}
.mm-acct .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mm-acct .ac{border:1.5px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.mm-acct .ac.def{border-color:var(--pl);background:linear-gradient(135deg,#faf8fe,#fff)}
.mm-acct .ac b{color:var(--ink);font-family:var(--display);font-size:14px}
.mm-acct .ac p{font-size:13.5px;color:var(--body);margin:0}
.mm-acct .ac .r{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.mm-acct .ac .r form{margin:0}
.mm-acct .ac .r button{background:none;border:0;color:var(--p);font:inherit;font-size:12.5px;font-weight:700;padding:0;cursor:pointer}
.mm-acct .ac .r .d{color:var(--red)}
.mm-acct .add{border:1.5px dashed var(--pxl);border-radius:14px;min-height:130px;display:grid;place-items:center;background:none;color:var(--p);font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.mm-acct .add:hover{background:var(--pbg)}
.mm-acct .acct-addrform{background:var(--bg);border-radius:14px;padding:18px;margin-bottom:18px}
.mm-acct .rx{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.mm-acct .ch+.rx{border-top:0;padding-top:0}
.mm-acct .rxi{flex:none;width:46px;height:46px;border-radius:12px;background:var(--pbg);display:grid;place-items:center;color:var(--p)}
.mm-acct .rxi svg{width:22px;height:22px}
.mm-acct .rx b{color:var(--ink);font-size:14px;display:block}
.mm-acct .rx span.m{font-size:12.5px;color:var(--mute)}
.mm-acct .drop{display:block;margin-top:20px;border:1.5px dashed var(--pxl);border-radius:14px;padding:26px;text-align:center;background:var(--pbg);cursor:pointer;font-size:inherit}
.mm-acct .drop.is-over{border-color:var(--p)}
.mm-acct .drop b{color:var(--ink);display:block;font-size:14px}
.mm-acct .drop span{font-size:12.5px;color:var(--mute)}
.mm-acct .tg{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.mm-acct .ch+.tg{border-top:0;padding-top:0}
.mm-acct .tg b{color:var(--ink);font-size:14px;display:block}
.mm-acct .tg span.m{font-size:12.5px;color:var(--mute)}
.mm-acct .tg select{width:auto;min-width:130px}
.mm-acct .sw{position:relative;flex:none;width:44px;height:26px;display:block}
.mm-acct .sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1;width:100%;height:100%;min-height:0}
.mm-acct .sw i{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .16s}
.mm-acct .sw i:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .16s}
.mm-acct .sw input:checked+i{background:var(--teal)}
.mm-acct .sw input:checked+i:after{transform:translateX(18px)}
.mm-acct .dz{border-color:#fecaca}
.mm-acct .dz h3{color:var(--red);font-size:16px;margin:0}
.mm-acct .bar{display:none}
@media(max-width:960px){
.mm-acct .acct-lay{display:block;margin-top:-34px}
.mm-acct .acct-side{position:static;padding:0;overflow:hidden}
.mm-acct .acct-side>button{padding:15px 16px;border-radius:0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink);min-height:64px}
.mm-acct .acct-side>a{padding:15px 16px;border-radius:0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink);min-height:64px}
.mm-acct .acct-side>button:active{background:var(--pbg)}
.mm-acct .acct-side>a:active{background:var(--pbg)}
.mm-acct .acct-side svg{width:40px;height:40px;padding:10px;border-radius:12px;background:var(--pbg);color:var(--p)}
.mm-acct .acct-side .sub{display:block;font-size:12.5px;font-weight:400;color:var(--mute);margin-top:1px}
.mm-acct .acct-side .chev{display:block;width:9px;height:9px;border-right:2px solid var(--pxl);border-top:2px solid var(--pxl);transform:rotate(45deg);flex:none;margin-right:4px}
.mm-acct .acct-side hr{display:block;border:0;height:12px;background:var(--bg);margin:0}
.mm-acct .acct-side .out{color:var(--red);border-bottom:0}
.mm-acct .acct-side .out svg{color:var(--red);background:#fee2e2}
.mm-acct .acct-side .on{background:none;color:var(--ink)}
.mm-acct .panel{display:block;position:fixed;inset:0;z-index:150;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transform:translateX(100%);visibility:hidden;transition:transform .28s cubic-bezier(.3,.8,.3,1),visibility 0s .28s;box-shadow:-12px 0 40px rgba(0,0,0,.18)}
.mm-acct .panel.open{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.3,.8,.3,1)}
.mm-acct .panel.drag{transition:none}
.mm-acct .bar{display:flex;align-items:center;position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--line);padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px;min-height:56px}
.mm-acct .bar button{width:44px;height:44px;border:0;background:none;border-radius:50%;display:grid;place-items:center;color:var(--p);cursor:pointer}
.mm-acct .bar button:active{background:var(--pbg)}
.mm-acct .bar svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mm-acct .bar h2{flex:1;text-align:center;font-size:17px;font-weight:800;padding-right:44px;margin:0}
.mm-acct .panel .card{border-radius:0;border-left:0;border-right:0;box-shadow:none;margin:0}
.mm-acct .panel .card+.card{margin-top:12px}
.mm-acct .panel .ch h2{display:none}
.mm-acct .panel .ch{margin-bottom:16px}
.mm-acct .panel>.card:last-child{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.mm-acct .acct-flash{margin:0 0 12px}
}
@media(max-width:600px){
.mm-acct .fg{grid-template-columns:1fr}
.mm-acct .grid{grid-template-columns:1fr}
.mm-acct .card{padding:20px}
.mm-acct .acct-stats div{min-width:0;flex:1}
.mm-acct .acct-hero h1{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
.mm-acct .panel{transition:none}
.mm-acct .panel.open{transition:none}
}
.mm-ordlist{padding-block:16px 56px}
.mm-ordcard{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:14px;box-shadow:var(--sh-xs)}
.mm-ordcard__top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mm-ordcard__no{font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);text-decoration:none!important}
.mm-ordcard__top small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px}
.mm-ordcard__end{text-align:right}
.mm-ordcard__end b{display:block;font-family:var(--display);font-size:17px;color:var(--ink)}
.mm-ordcard__end .tag{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;border-radius:99px;padding:3px 11px;background:var(--soft);color:var(--pri)}
.mm-ordcard__bar{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:18px 0 12px}
.mm-ordcard__bar i{display:block;height:5px;border-radius:99px;background:var(--line);margin-bottom:6px}
.mm-ordcard__bar .is-done i{background:var(--teal)}
.mm-ordcard__bar span{font-size:12px;color:var(--mute)}
.mm-ordcard__bar .is-done span{color:var(--ink);font-weight:600}
.mm-ordcard__items{font-size:13px;color:var(--body);margin-bottom:14px}
.mm-ordcard__btns{display:flex;gap:10px}
.mm-ordcard .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--pri);color:#fff;border:1.5px solid var(--pri);border-radius:9px;padding:8px 16px;font:inherit;font-size:12.5px;font-weight:600;text-decoration:none!important;cursor:pointer;min-height:38px}
.mm-ordcard .btn.o{background:none;color:var(--pri);border-color:var(--pri-l)}
@media(max-width:600px){
.mm-ordcard__bar span{display:none}
}