/* Brand-neutral pretend order tracking. Inherits the shop's accent and type. */
.tracking-dialog{--tracking-accent:var(--rust,#245c4b);--tracking-ink:var(--ink,#202c28);width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 28px);border-radius:22px;background:var(--paper,#fff);color:var(--tracking-ink);font-family:var(--sans,Arial,sans-serif);padding:0;overflow:auto;overscroll-behavior:contain}
.tracking-dialog::backdrop{background:#10172573;backdrop-filter:blur(5px)}
.tracking-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 0;gap:10px}
.tracking-top>span{font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--muted,#687184)}
.tracking-close{border:0;border-radius:50%;background:#151f3010;color:inherit;width:36px;height:36px;font:400 26px/1 Arial,sans-serif;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.tracking-close:hover{background:#151f3020}
.tracking-scene{height:165px;position:relative;isolation:isolate;margin:0 24px 7px;overflow:hidden}
.tracking-scene::before{content:'';position:absolute;width:166px;height:166px;border-radius:50%;background:color-mix(in srgb,var(--tracking-accent) 8%,white);top:0;left:calc(50% - 83px);z-index:-2}
.tracking-route{position:absolute;left:14%;right:14%;bottom:30px;border-bottom:2px dashed color-mix(in srgb,var(--tracking-accent) 24%,white);height:16px;z-index:-1}
.tracking-route__start{position:absolute;width:7px;height:7px;background:var(--tracking-accent);border-radius:50%;left:0;bottom:-4px}
.tracking-route__finish{position:absolute;right:-8px;bottom:-11px;font-size:28px;line-height:1;color:var(--tracking-accent)}
.tracking-route__trail{position:absolute;bottom:-2px;left:0;height:2px;background:var(--tracking-accent);width:calc(var(--tracking-progress,0) * 100%);transition:width 1s linear}
.tracking-parcel{position:absolute;width:105px;height:100px;top:27px;left:calc(50% - 52px);border-radius:3px 3px 8px 8px;background:linear-gradient(115deg,#e9c38b,#d8a963);box-shadow:inset -9px 0 0 #80592516,0 12px 20px #27334c10;transform:rotate(-7deg);transition:transform .6s cubic-bezier(.2,.8,.3,1);animation:tracking-float 3.5s ease-in-out infinite}
.tracking-parcel__top{position:absolute;left:0;top:-12px;height:15px;width:105px;background:#f2d9b1;clip-path:polygon(7% 0,89% 0,100% 100%,0 100%)}
.tracking-parcel__tape{position:absolute;width:19px;height:100%;background:#f9e9c47a;left:43px;top:0;border-inline:1px solid #a47d2c14}
.tracking-parcel__tape::before{content:'';position:absolute;top:-12px;left:-1px;width:19px;height:13px;background:#fff0d5a6;transform:skewX(-13deg)}
.tracking-parcel__label{display:block;position:absolute;top:26px;left:13px;width:69px;height:49px;background:#fffef5;border-radius:2px;transform:rotate(4deg);padding:9px;box-sizing:border-box;color:#30343b}
.tracking-parcel__label b{font-size:8px;font-weight:800;line-height:1.05;letter-spacing:.035em;display:block;padding-left:18px}
.tracking-parcel__label i{position:absolute;top:10px;left:8px;width:2px;height:27px;background:#27313a}
.tracking-parcel__label i:nth-child(2){left:12px;width:1px}.tracking-parcel__label i:nth-child(3){left:15px;width:3px}
.tracking-parcel__stamp{position:absolute;bottom:7px;right:6px;font-size:15px;line-height:1;color:#745326}
.tracking-scene__shadow{position:absolute;bottom:15px;left:calc(50% - 44px);width:88px;height:9px;border-radius:50%;background:#26334913;filter:blur(2px);animation:tracking-shadow 3.5s ease-in-out infinite}
.tracking-scene__spark{position:absolute;font-size:24px;color:var(--tracking-accent);line-height:1}.tracking-scene__spark--one{left:24%;top:27px;transform:rotate(15deg)}.tracking-scene__spark--two{right:22%;top:77px;font-size:33px;transform:rotate(-10deg)}
.tracking-scene__delivered{position:absolute;right:calc(50% - 75px);top:90px;width:34px;height:34px;background:var(--tracking-accent);color:#fff;border:4px solid var(--paper,#fff);border-radius:50%;font-weight:700;display:grid;place-items:center;opacity:0;transform:scale(.5);transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .25s}
.tracking-dialog[data-stage="packing"] .tracking-parcel{animation:tracking-pack 1.8s ease-in-out infinite}
.tracking-dialog[data-stage="transit"] .tracking-parcel{animation:tracking-transit 1.7s ease-in-out infinite}
.tracking-dialog[data-stage="delivered"] .tracking-parcel{animation:none;transform:rotate(0)}
.tracking-dialog[data-stage="delivered"] .tracking-scene__shadow{animation:none}
.tracking-dialog[data-stage="delivered"] .tracking-scene__delivered{opacity:1;transform:scale(1)}
.tracking-body{padding:0 26px 21px;text-align:center}
.tracking-status{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--tracking-accent);font-size:10px;letter-spacing:.02em;margin:0 0 11px}
.tracking-status>span{width:6px;height:6px;background:currentColor;border-radius:50%}
.tracking-body h2{font-family:var(--sans,Arial,sans-serif);font-weight:700;font-size:31px;line-height:1.05;letter-spacing:-.055em;margin:0 auto 10px;max-width:320px;text-wrap:balance}
.tracking-copy{font-size:12px;line-height:1.55;color:var(--muted,#687184);margin:0 auto 23px;max-width:285px;min-height:37px;text-wrap:balance}
.tracking-progress{height:4px;border-radius:4px;background:#1a263a10;overflow:hidden}
.tracking-progress>span{height:100%;display:block;width:calc(var(--tracking-progress,0) * 100%);background:var(--tracking-accent);border-radius:inherit;transition:width 1s linear}
.tracking-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;list-style:none;padding:0;margin:13px 0 22px}
.tracking-steps li{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted,#687184)}
.tracking-steps li>span{width:19px;height:19px;border:1px solid #1722371c;display:grid;place-items:center;border-radius:50%;font-size:9px;line-height:1}
.tracking-steps li>strong{font-size:9px;font-weight:500;line-height:1.2;white-space:nowrap}
.tracking-steps li[data-state="done"]>span,.tracking-steps li[data-state="current"]>span{background:var(--tracking-accent);border-color:var(--tracking-accent);color:white}
.tracking-steps li[data-state="current"]{color:var(--tracking-ink)}.tracking-steps li[data-state="current"]>strong{font-weight:700}
.tracking-arrival{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.tracking-arrival>strong{font-size:13px;font-weight:600}.tracking-arrival>span{font-size:10px;color:var(--muted,#687184);font-variant-numeric:tabular-nums}
.tracking-items{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 10px;margin:0 0 18px;background:#18213a05;border:1px solid #1722370d;border-radius:12px;text-align:left}
.tracking-items__photos{display:flex;padding-left:8px}
.tracking-items__photos img{display:block;object-fit:cover;border:2px solid var(--paper,#fff);border-radius:9px;width:40px;height:40px;margin-left:-8px;box-sizing:border-box}
.tracking-items>span{font-size:11px;font-weight:600;line-height:1.4}.tracking-items small{display:block;font-size:9px;color:var(--muted,#687184);font-weight:400}.tracking-items small strong{color:var(--tracking-ink);font-weight:600}
.tracking-primary{width:100%;justify-content:center;min-height:48px;font-size:12px}
.tracking-links{display:flex;align-items:center;justify-content:center;gap:11px;margin:18px 0 12px}
.tracking-links button{font:inherit;font-size:11px;color:var(--tracking-ink);background:none;border:0;padding:6px 0;cursor:pointer;min-height:32px}.tracking-links button:hover{text-decoration:underline;text-underline-offset:3px}.tracking-links>span{color:var(--muted,#687184);font-size:10px}
.tracking-disclosure{font-size:9px;line-height:1.4;margin:0;color:var(--muted,#687184)}
.tracking-dialog button:focus-visible{outline:3px solid var(--tracking-accent);outline-offset:4px}
@keyframes tracking-float{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-7px) rotate(-4deg)}}
@keyframes tracking-shadow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.85);opacity:.6}}
@keyframes tracking-pack{0%,75%,100%{transform:rotate(-4deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(1deg)}}
@keyframes tracking-transit{0%,100%{transform:translate(-9px,0) rotate(-7deg)}50%{transform:translate(9px,-5px) rotate(4deg)}}
@media(max-width:360px){.tracking-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:17px}.tracking-top{padding:12px 16px 0}.tracking-body{padding:0 18px 17px}.tracking-body h2{font-size:28px}.tracking-scene{height:145px;margin-inline:12px}.tracking-copy{font-size:11px;margin-bottom:18px}.tracking-steps li>strong{font-size:8px}.tracking-links{gap:9px}}
@media(prefers-reduced-motion:reduce){.tracking-dialog *{animation:none!important;transition:none!important}.tracking-parcel{transform:rotate(-4deg)}}
