/* ==========================================================================
   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}
}


/* Your package is ready (photos of the packed parcel on the tracking page) */
.mm-pkg { background: linear-gradient(135deg, var(--teal-bg) 0%, var(--soft) 100%); border: 1px solid var(--soft-2); border-radius: var(--r-lg); padding: 16px; margin: 0 0 16px; }

.mm-pkg__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.mm-pkg__head > div { flex: 1; min-width: 0; }

.mm-pkg__head h3 { margin: 0; font-size: 16px; }

.mm-pkg__head p { margin: 2px 0 0; color: var(--mute); font-size: 13px; }

.mm-pkg__ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--pri); color: #fff; }

.mm-pkg__ic .mm-ico { width: 19px; height: 19px; }

.mm-pkg__grid { display: grid; gap: 10px; grid-template-columns: 1fr; }

.mm-pkg__grid.is-multi { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.mm-pkg figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }

.mm-pkg img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; cursor: zoom-in; }

.mm-pkg .is-multi img { height: 130px; }

.mm-pkg figcaption { padding: 6px 10px; color: var(--mute); font-size: 12px; }

/* Several parcels: one tracking row each. */
.mm-trk__awb + .mm-trk__awb { margin-top: 10px; }