/* Order tracking — v1.5.3 redesign. Brand colour: --esp-brand (default deep green), gold accent from logo. */
.esp-track-page{--b:var(--esp-brand,var(--nibras-primary,#114b5f));--b2:color-mix(in srgb,var(--b) 78%,#000);--gold:var(--esp-accent,var(--nibras-accent,#c49a4b));--ink:var(--nibras-text,#1b2a31);--mut:var(--nibras-muted,#62717a);--line:color-mix(in srgb,var(--b) 12%,#e4e8ea);--soft:color-mix(in srgb,var(--b) 8%,#fff);--soft2:color-mix(in srgb,var(--b) 7%,#eceff1);background:var(--esp-bg,var(--nibras-surface,#f2f6f8))}
.esp-i{flex:none;display:block}

/* ---------- header: back | logo | shop ---------- */
.esp-th{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:64px;padding:0 14px;padding-top:env(safe-area-inset-top,0);box-sizing:content-box;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.esp-th-brand{justify-self:center;display:flex;align-items:center;max-width:150px;text-decoration:none;color:var(--ink)}
.esp-th-brand .esp-th-logo,.esp-th-logo{height:38px!important;width:auto!important;max-width:150px;object-fit:contain}
.esp-th-name{font-weight:700;font-size:17px;white-space:nowrap}
.esp-th-btn{white-space:nowrap;line-height:1;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border-radius:99px;font-weight:600;font-size:14px;text-decoration:none;transition:background .15s,transform .1s}
.esp-th-btn:active{transform:scale(.97)}
.esp-th-back{justify-self:start;color:var(--ink)}.esp-th-back:hover{background:var(--soft)}
.esp-th-shop{justify-self:end;color:#fff;background:var(--b);padding:0 14px}.esp-th-shop:hover{background:var(--b2)}
/* back button: round icon-only on phones, labelled pill on wider screens */
.esp-th-back{width:40px;padding:0;justify-content:center;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px -2px rgba(0,0,0,.12)}.esp-th-back span{display:none}
@media(min-width:520px){.esp-th-back{width:auto;padding:0 16px 0 10px}.esp-th-back span{display:inline}}
@media(max-width:380px){.esp-th-shop span{display:none}.esp-th-shop{width:40px;padding:0;justify-content:center}.esp-th-brand,.esp-th-logo{max-width:120px}}

/* ---------- layout ---------- */
.esp-track{max-width:600px;margin:0 auto;padding:18px 14px 44px}
.esp-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;margin:0 0 14px;box-shadow:0 8px 28px -18px color-mix(in srgb,var(--b) 25%,transparent)}
.esp-h2{margin:0 0 14px;font-size:16px;font-weight:700;color:var(--ink)}
.esp-pagehead{padding:4px 4px 14px}.esp-pagehead h1{margin:0;font-size:26px;line-height:1.25}.esp-pagehead p{margin:4px 0 0;color:var(--mut);font-size:15px}

/* ---------- status chips ---------- */
.esp-chip{display:inline-block;white-space:nowrap;font-size:12.5px;font-weight:700;line-height:1;padding:7px 11px;border-radius:99px;background:var(--soft2);color:var(--nibras-muted,#4E5A50)}
.esp-chip.is-processing,.esp-chip.is-shipped{background:#e6f0ff;color:#1d4ed8}
.esp-chip.is-completed{background:#e3f4ea;color:var(--nibras-success,#157347)}
.esp-chip.is-pending,.esp-chip.is-on-hold{background:#fff4dc;color:var(--nibras-warning,#a15c00)}
.esp-chip.is-cancelled,.esp-chip.is-failed{background:#fdeaea;color:var(--nibras-danger,#b42318)}
.esp-chip.is-refunded{background:#f1e9fb;color:#6d3bb3}

/* ---------- hero (order detail) ---------- */
.esp-hero{padding:20px;background:linear-gradient(145deg,var(--b) 0%,var(--b2) 100%);border:0;color:#fff;position:relative;overflow:hidden}
.esp-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(176,141,79,.35),transparent 70%)}
.esp-hero.is-bad{background:linear-gradient(145deg,#8f2a22,#6b1b16)}
.esp-hero-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.esp-eyebrow{display:block;font-weight:700;font-size:15px}.esp-date{display:block;font-size:13px;opacity:.78;margin-top:2px}
.esp-hero .esp-chip{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px)}
.esp-hero-title{position:relative;z-index:1;margin:18px 0 4px;font-size:25px;line-height:1.3;font-weight:700;color:#fff}
.esp-hero-sub{position:relative;z-index:1;margin:0;font-size:14.5px;opacity:.85}
.esp-bar{position:relative;z-index:1;height:8px;border-radius:99px;background:rgba(255,255,255,.2);margin-top:18px;overflow:hidden}
.esp-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#d9bd7f,#fff);transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* ---------- timeline ---------- */
.esp-tl{list-style:none;margin:0;padding:0}
.esp-tl li{position:relative;display:flex;gap:14px;padding:0 0 24px}
.esp-tl li:last-child{padding-bottom:0}
.esp-tl li::before{content:"";position:absolute;left:19px;top:40px;bottom:2px;width:2px;background:var(--line)}
.esp-tl li:last-child::before{display:none}
.esp-tl li.done::before{background:var(--b)}
.esp-tl-dot{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#f1f4f2;color:var(--nibras-muted,#A8A494);border:2px solid var(--nibras-border,#e3e8e4);position:relative;z-index:1}
.esp-tl-dot .esp-i{width:19px;height:19px}
.esp-tl li.done .esp-tl-dot{background:var(--b);border-color:var(--b);color:#fff}
.esp-tl li.current .esp-tl-dot{background:var(--b);border-color:var(--b);color:#fff;box-shadow:0 0 0 6px rgba(23,75,58,.14);animation:espPulse 2s ease-out infinite}
.esp-tl li.cancelled .esp-tl-dot{background:var(--nibras-danger,#c62828);border-color:var(--nibras-danger,#c62828);color:#fff;box-shadow:0 0 0 0 rgba(198,40,40,.35);animation:espPulseBad 2s ease-out infinite}
.esp-tl-body{padding-top:2px}.esp-tl-body strong{display:block;font-size:15.5px;font-weight:700;color:var(--ink)}.esp-tl-body small{display:block;color:var(--mut);font-size:13px;margin-top:1px}
.esp-tl li.todo .esp-tl-body strong{color:var(--nibras-muted,#98a29b);font-weight:600}
.esp-tl li.current .esp-tl-body strong{color:var(--b)}.esp-tl li.cancelled .esp-tl-body strong{color:var(--nibras-danger,#b42318)}
@keyframes espPulse{0%{box-shadow:0 0 0 0 rgba(23,75,58,.35)}70%{box-shadow:0 0 0 10px rgba(23,75,58,0)}100%{box-shadow:0 0 0 0 rgba(23,75,58,0)}}
@keyframes espPulseBad{0%{box-shadow:0 0 0 0 rgba(198,40,40,.35)}70%{box-shadow:0 0 0 10px rgba(198,40,40,0)}100%{box-shadow:0 0 0 0 rgba(198,40,40,0)}}
@media(prefers-reduced-motion:reduce){.esp-tl li.current .esp-tl-dot,.esp-tl li.cancelled .esp-tl-dot{animation:none}.esp-bar i{transition:none}}

.esp-ship{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;background:var(--soft);border-radius:14px}
.esp-ship-ic{width:38px;height:38px;border-radius:12px;background:#fff;color:var(--b);display:grid;place-items:center;border:1px solid var(--line)}
.esp-ship small{display:block;color:var(--mut);font-size:12px}.esp-ship strong{font-size:15px}
.esp-ship-code{margin-left:auto;text-align:right}.esp-ship-code code{display:block;font-size:14px;font-weight:700;background:#fff;border:1px dashed var(--nibras-border,#b9c6bd);border-radius:8px;padding:3px 8px;word-break:break-all}

/* ---------- items & totals ---------- */
.esp-items{list-style:none;margin:0;padding:0}
.esp-items li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.esp-items li:first-child{padding-top:0}
.esp-thumb{flex:none;width:56px;height:56px;border-radius:12px;background:var(--soft);display:grid;place-items:center;color:var(--nibras-muted,#9aa69e);overflow:hidden;border:1px solid var(--line)}
.esp-thumb img{width:100%;height:100%;object-fit:cover}
.esp-it-name{flex:1;min-width:0}.esp-it-name strong{display:block;font-size:14.5px;line-height:1.4;font-weight:600}.esp-it-name small{color:var(--mut);font-size:13px}
.esp-it-price{font-weight:700;white-space:nowrap;font-size:15px}
.esp-sum{display:grid;gap:8px;padding-top:14px;font-size:14.5px;color:var(--nibras-text,#46514a)}.esp-sum>div{display:flex;justify-content:space-between}
.esp-sum-total{margin-top:4px;padding:12px 14px;border-radius:14px;background:var(--soft);font-size:17px;font-weight:700;color:var(--b)}

/* ---------- delivery info ---------- */
.esp-info{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.esp-info li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.esp-info .esp-i{margin-top:3px;color:var(--b)}.esp-info small{display:block;color:var(--mut);font-size:12.5px}

/* ---------- buttons ---------- */
.esp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.esp-actions .esp-btn-solid{grid-column:1/-1}
.esp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:14px;border:1.5px solid var(--b);color:var(--b);background:#fff;font:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .1s,background .15s}
.esp-btn:hover{background:var(--soft)}.esp-btn:active{transform:scale(.98)}
.esp-btn-solid{background:var(--b);color:#fff;box-shadow:0 10px 22px -12px rgba(23,75,58,.7)}.esp-btn-solid:hover{background:var(--b2)}

/* ---------- help ---------- */
.esp-help{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:#fbf6ea;border:1px solid #f0e3c3}
.esp-help-ic{color:var(--gold)}.esp-help strong{display:block;font-size:15px}.esp-help p{margin:0;font-size:13.5px;color:#6b5a33}.esp-help>div{flex:1}
.esp-help-call{display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#fff;font-weight:700;font-size:14px;text-decoration:none;padding:10px 14px;border-radius:99px;white-space:nowrap}

/* ---------- order list ---------- */
.esp-orders{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.esp-order-row{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line);color:inherit;text-decoration:none;box-shadow:0 8px 24px -20px color-mix(in srgb,var(--b) 35%,transparent);transition:border-color .15s,transform .1s;cursor:pointer}
.esp-order-row:hover,.esp-order-row:focus{border-color:var(--b);outline:none}.esp-order-row:active{transform:scale(.99)}
.esp-order-row>.esp-i{color:var(--nibras-muted,#A8A494)}
.esp-order-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--soft2);color:var(--nibras-muted,#4E5A50)}
.esp-order-ic.is-processing,.esp-order-ic.is-shipped{background:#e6f0ff;color:#1d4ed8}.esp-order-ic.is-completed{background:#e3f4ea;color:var(--nibras-success,#157347)}.esp-order-ic.is-pending,.esp-order-ic.is-on-hold{background:#fff4dc;color:var(--nibras-warning,#a15c00)}.esp-order-ic.is-cancelled,.esp-order-ic.is-failed{background:#fdeaea;color:var(--nibras-danger,#b42318)}.esp-order-ic.is-refunded{background:#f1e9fb;color:#6d3bb3}
.esp-order-main{flex:1;min-width:0}.esp-order-main strong{display:block;font-size:16px}.esp-order-main small{color:var(--mut);font-size:13px}
.esp-order-end{display:grid;justify-items:end;gap:6px}.esp-order-end b{font-size:15px;white-space:nowrap}
.esp-track-order-empty{padding:14px 0;color:var(--mut);text-align:center;list-style:none}

/* ---------- empty / find ---------- */
.esp-empty{text-align:center;display:grid;justify-items:center;gap:6px;padding:32px 20px}
.esp-empty-ic,.esp-find-ic{width:64px;height:64px;border-radius:20px;background:var(--soft);color:var(--b);display:grid;place-items:center}
.esp-empty p{margin:0 0 10px;color:var(--mut)}
.esp-find{padding:22px 18px}
.esp-find-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}.esp-find-ic{width:54px;height:54px;border-radius:16px;flex:none}
.esp-find-head h1{margin:0;font-size:22px;line-height:1.25}.esp-find-head p{margin:2px 0 0;color:var(--mut);font-size:14.5px}
.esp-login-box{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--soft);border:1px solid var(--line)}
.esp-login-box>div{flex:1}.esp-login-box strong{display:block;font-size:15px}.esp-login-box small{display:block;color:var(--mut);font-size:13px;line-height:1.4}
.esp-login-box .esp-btn{min-height:42px;padding:0 14px;font-size:14px;border-radius:12px}
.esp-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--mut);font-size:13px}.esp-or::before,.esp-or::after{content:"";flex:1;height:1px;background:var(--line)}
.esp-note{margin:0;font-size:13.5px;color:var(--mut)}.esp-note-c{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;text-align:center}.esp-note-c .esp-i{width:15px;height:15px}

/* ---------- forms ---------- */
.esp-track-form{display:grid;gap:14px}
.esp-track-form label{display:grid;gap:6px;font-weight:600;font-size:14px;color:var(--ink)}
.esp-track-form input{width:100%;border:1.5px solid var(--nibras-border,#d6ddd8);border-radius:12px;padding:13px 14px;font:inherit;font-size:16px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.esp-track-form input:focus{outline:none;border-color:var(--b);box-shadow:0 0 0 4px rgba(23,75,58,.12)}
.esp-track-form button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;min-height:50px;padding:0 16px;font:inherit;font-weight:700;font-size:16px;color:#fff;background:var(--b);cursor:pointer;box-shadow:0 10px 22px -12px rgba(23,75,58,.7)}
.esp-track-form button:disabled{opacity:.55;cursor:not-allowed}
.esp-track-err{background:#fdecec;color:var(--nibras-danger,#8a1c1c);border:1px solid #f5c2c2;border-radius:12px;padding:11px 14px;font-size:14px;margin-bottom:12px}
.esp-track-form .esp-track-err{margin-bottom:0}
.esp-track-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--soft2);border-radius:14px;margin-bottom:16px}
.esp-track-tab{border:0;background:transparent;border-radius:11px;padding:10px 8px;font:inherit;font-weight:600;font-size:14px;color:var(--nibras-muted,#4E5A50);cursor:pointer}
.esp-track-tab.active{background:#fff;color:var(--b);box-shadow:0 2px 8px rgba(0,0,0,.08)}
#esp-track-msg{background:var(--soft);border-radius:12px;padding:10px 14px;font-size:14px}#esp-track-msg.esp-track-err{background:#fdecec;color:var(--nibras-danger,#8a1c1c)}

.esp-l-foot{text-align:center;font-size:13px;color:var(--mut);padding:18px 0 0;opacity:1}
@media(min-width:640px){.esp-track{padding-top:28px}.esp-hero-title{font-size:28px}.esp-actions{grid-template-columns:repeat(3,1fr)}.esp-actions .esp-btn-solid{grid-column:auto}}
@media print{.esp-th,.esp-actions,.esp-help{display:none}}
.esp-track [hidden],.esp-track-page [hidden]{display:none!important}

.esp-sum-refund{color:#6d3bb3;font-weight:600}.esp-sum-total.is-closed{background:#f3f4f3;color:var(--nibras-muted,#4E5A50)}