/* PUVARLI Order Tracking 2.0 — colors come from CSS variables set by the plugin
   (light = white/ink/violet by default, dark optional). Every text color pair is >= 4.5:1. */
.pv-track{background:var(--pv-bg,#fff);color:var(--pv-ink,#111);max-width:1100px;margin:24px auto 80px;padding:clamp(22px,5vw,64px);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
.pv-track--dark{border-radius:0}
.pv-track *{box-sizing:border-box}
.pv-track :is(h1,h2,p,span,strong,small,li,label,time,em,div){color:inherit}

/* Header */
.pv-track-head{padding-bottom:34px;border-bottom:1px solid var(--pv-line)}
.pv-track-overline{margin:0;font-size:11px;font-weight:700;letter-spacing:.25em;color:var(--pv-accent)!important}
.pv-track h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:400;font-size:clamp(54px,10vw,128px);line-height:.92;letter-spacing:-.02em;margin:26px 0 22px;color:var(--pv-ink)}
.pv-track h1 em{font-style:normal;color:transparent!important;-webkit-text-stroke:2px var(--pv-ink)}
.pv-track-sub{margin:0;font-size:16px;color:var(--pv-muted)!important}

/* Form */
.pv-track-form{padding:34px 0 10px}
.pv-track-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pv-field label{display:block;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px;color:var(--pv-ink)}
html body .pv-track.pv-track.pv-track form input.pv-input{display:block;width:100%;height:56px;padding:0 16px;margin:0;background:var(--pv-field)!important;border:1px solid var(--pv-fieldline)!important;border-radius:0!important;color:var(--pv-ink)!important;-webkit-text-fill-color:var(--pv-ink)!important;font-size:16px;box-shadow:none}
html body .pv-track.pv-track.pv-track form input.pv-input::placeholder{color:var(--pv-muted)!important;-webkit-text-fill-color:var(--pv-muted)!important;opacity:1}
html body .pv-track.pv-track.pv-track form input.pv-input:focus{border-color:var(--pv-accent)!important;box-shadow:0 0 0 3px var(--pv-accent-soft)!important;outline:0}
.pv-track :is(a,button):focus-visible{outline:2px solid var(--pv-accent);outline-offset:3px}

/* Buttons */
html body .pv-track.pv-track .pv-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;margin-top:22px;padding:0 26px;height:54px;background:var(--pv-ink)!important;color:var(--pv-bg)!important;-webkit-text-fill-color:var(--pv-bg)!important;border:1px solid var(--pv-ink)!important;border-radius:0;font:800 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .18s,color .18s,transform .18s}
html body .pv-track.pv-track .pv-btn:hover{background:var(--pv-accent)!important;border-color:var(--pv-accent)!important;color:var(--pv-on-accent)!important;-webkit-text-fill-color:var(--pv-on-accent)!important}
html body .pv-track.pv-track .pv-btn *{color:inherit!important;-webkit-text-fill-color:inherit!important}
html body .pv-track.pv-track .pv-btn:active{transform:translateY(1px)}
html body .pv-track.pv-track .pv-btn.is-loading{opacity:.75;pointer-events:none}
.pv-btn--sm{margin-top:20px;height:48px}
.pv-track-help{margin:18px 0 0;font-size:13px;color:var(--pv-muted)!important}
.pv-track a:not(.pv-btn){color:var(--pv-accent)!important;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Alerts */
.pv-track-alert{margin:22px 0 0;padding:16px 18px;border:1px solid var(--pv-bad);border-left-width:4px;background:var(--pv-panel);color:var(--pv-ink)!important}

/* Result cards */
.pv-track-result{padding-top:26px;outline:0;animation:pv-rise .45s ease both}
.pv-card{background:var(--pv-panel);border:1px solid var(--pv-line);padding:clamp(18px,3vw,30px);margin-bottom:16px}
.pv-card h2{margin:0 0 20px;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pv-ink)}
.pv-k{display:block;margin-bottom:6px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pv-muted)!important}
.pv-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:22px 28px}
.pv-summary strong{font-size:18px}
.pv-badge{display:inline-block;padding:6px 12px;border:1px solid currentColor;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.pv-badge--info{color:var(--pv-accent)!important}
.pv-badge--ok{color:var(--pv-ok)!important}
.pv-badge--bad{color:var(--pv-bad)!important}

/* Timeline */
.pv-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.pv-steps li{position:relative;padding:32px 12px 0 0;font-size:13px;color:var(--pv-muted)}
.pv-steps li strong{display:block;font-size:13px;color:var(--pv-muted)}
.pv-steps li small{display:block;margin-top:4px;font-size:12px;color:var(--pv-muted)}
.pv-steps li::before{content:"";position:absolute;top:9px;left:20px;right:0;height:2px;background:var(--pv-line)}
.pv-steps li:last-child::before{display:none}
.pv-steps li.is-done::before{background:var(--pv-accent)}
.pv-dot{position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:var(--pv-bg);border:2px solid var(--pv-fieldline)}
.pv-steps li.is-done .pv-dot{background:var(--pv-accent);border-color:var(--pv-accent)}
.pv-steps li.is-done .pv-dot::after{content:"";position:absolute;left:5px;top:3px;width:7px;height:4px;border:solid var(--pv-on-accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.pv-steps li.is-current .pv-dot{border-color:var(--pv-accent);box-shadow:0 0 0 5px var(--pv-accent-soft)}
.pv-steps li.is-current .pv-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--pv-accent);animation:pv-pulse 1.8s ease-in-out infinite}
.pv-steps li.is-done strong,.pv-steps li.is-current strong{color:var(--pv-ink)}
.pv-steps li.is-final.is-done .pv-dot{background:var(--pv-ok);border-color:var(--pv-ok)}
.pv-steps li.is-final.is-done .pv-dot::after{border-color:var(--pv-bg)}
.pv-eta{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--pv-line);font-size:14px;color:var(--pv-ink)}
.pv-eta--bad{color:var(--pv-bad)}

/* Shipment */
.pv-ship-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
.pv-ship strong{font-size:18px}
.pv-copy{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pv-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;word-break:break-all}
html body .pv-track.pv-track .pv-copy-btn{height:32px;padding:0 14px;background:transparent!important;color:var(--pv-ink)!important;-webkit-text-fill-color:var(--pv-ink)!important;border:1px solid var(--pv-fieldline)!important;border-radius:999px;font:700 11px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
html body .pv-track.pv-track .pv-copy-btn:hover,html body .pv-track.pv-track .pv-copy-btn.is-copied{border-color:var(--pv-accent)!important;color:var(--pv-accent)!important;-webkit-text-fill-color:var(--pv-accent)!important}

/* Updates feed */
.pv-feed{list-style:none;margin:0;padding:0}
.pv-feed li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--pv-line);font-size:14px}
.pv-feed li:first-child{border-top:0;padding-top:0}
.pv-feed time{color:var(--pv-muted)}
.pv-feed span strong{display:block}
.pv-feed span small{display:block;margin-top:2px;font-size:13px;color:var(--pv-muted)}

/* Items */
.pv-items{list-style:none;margin:0;padding:0}
.pv-items li{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--pv-line)}
.pv-items li:first-child{border-top:0;padding-top:0}
.pv-thumb{width:64px;height:64px;background:var(--pv-bg);border:1px solid var(--pv-line);display:block;overflow:hidden}
.pv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pv-item-text small{display:block;margin-top:3px;font-size:12px;color:var(--pv-muted)}
.pv-qty{font-weight:700;color:var(--pv-ink)}

@keyframes pv-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pv-pulse{0%,100%{transform:scale(1)}50%{transform:scale(.55)}}
@media(prefers-reduced-motion:reduce){.pv-track-result,.pv-steps li.is-current .pv-dot::after{animation:none}.pv-btn{transition:none}}

/* Mobile: stacked fields and a vertical timeline */
@media(max-width:700px){
 .pv-track-fields{grid-template-columns:1fr}
 .pv-steps{grid-template-columns:1fr}
 .pv-steps li{padding:0 0 24px 38px;min-height:44px}
 .pv-steps li::before{top:22px;bottom:0;left:9px;right:auto;width:2px;height:auto}
 .pv-feed li{grid-template-columns:1fr;gap:2px}
 .pv-btn{width:100%}
}