/* نژا | پیگیری سفارش */
.trk-stage{ position:relative; overflow:hidden; min-height:calc(100vh - 140px); min-height:calc(100dvh - 140px); display:flex; align-items:center;
  background:linear-gradient(120deg,#fff 0%,#ffe3e3 25%,#e4252b 50%,#ffe3e3 75%,#fff 100%); background-size:300% 300%; animation:trkBg 14s ease-in-out infinite; }
@keyframes trkBg{ 0%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} 100%{ background-position:0% 50%;} }
.trk-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.trk-fl{ position:absolute; left:var(--x); top:var(--y); width:var(--s); height:auto; opacity:.9; filter:drop-shadow(0 14px 18px rgba(120,0,15,.3));
  animation:trkFloat var(--t) ease-in-out var(--d) infinite alternate, trkSpin calc(var(--t) * 1.6) linear var(--d) infinite; }
@keyframes trkFloat{ 0%{ transform:translate3d(0,0,0) rotate(var(--r)); } 50%{ transform:translate3d(18px,-34px,0) rotate(calc(var(--r) * -1)); } 100%{ transform:translate3d(-16px,22px,0) rotate(var(--r)); } }
@keyframes trkSpin{ 0%,100%{ filter:drop-shadow(0 14px 18px rgba(120,0,15,.3)) hue-rotate(0deg);} 50%{ filter:drop-shadow(0 22px 24px rgba(120,0,15,.4)) hue-rotate(-12deg);} }
.trk-wrap{ position:relative; z-index:1; display:flex; justify-content:center; padding-top:36px; padding-bottom:44px; width:100%; }
.trk-card{ width:100%; max-width:560px; padding:30px 24px; text-align:center; border-radius:28px; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -26px rgba(110,0,15,.65); border:1.5px solid rgba(255,255,255,.9); animation:trkIn .7s cubic-bezier(.2,1,.3,1) both; }
@keyframes trkIn{ from{ opacity:0; transform:translateY(30px) scale(.96);} to{ opacity:1; transform:none;} }
.trk-ico{ width:70px; height:70px; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; font-size:2rem; border-radius:22px; background:linear-gradient(135deg,#fff3d6,#ffd9d2); animation:qkFloat 2.6s ease-in-out infinite; }
@keyframes qkFloat{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-6px) rotate(4deg);} }
.trk-card h1{ font-size:1.5rem; margin:8px 0; }
.trk-sub{ margin:0 0 18px; color:#6d5a5d; line-height:1.9; font-size:.92rem; }
.trk-form{ display:grid; gap:10px; }
.trk-form input{ width:100%; padding:16px; font:inherit; font-size:18px; letter-spacing:.12em; text-align:center; border:2px solid #f0cfcf; border-radius:16px; background:#fff; transition:border-color .2s, box-shadow .2s; }
.trk-form input:focus{ outline:0; border-color:#e4252b; box-shadow:0 0 0 5px rgba(228,37,43,.15); }
.trk-btn{ position:relative; overflow:hidden; min-height:54px; border:0; border-radius:16px; cursor:pointer; font:inherit; font-weight:800; font-size:1rem; color:#fff; background:linear-gradient(135deg,#b3102a,#ff4d2e); box-shadow:0 14px 26px -12px rgba(179,16,42,.8); transition:transform .18s; }
.trk-btn:hover{ transform:translateY(-2px); }
.trk-btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%); transform:translateX(-120%); animation:trkShine 3s ease-in-out infinite; }
@keyframes trkShine{ 0%,55%{ transform:translateX(-120%);} 100%{ transform:translateX(120%);} }
.trk-err{ margin-top:14px; padding:12px 14px; border-radius:14px; background:#ffe9ec; color:#b3102a; font-weight:700; font-size:.88rem; line-height:1.8; animation:trkShake .4s; }
@keyframes trkShake{ 20%,60%{ transform:translateX(-6px);} 40%,80%{ transform:translateX(6px);} }
.trk-result{ margin-top:20px; text-align:right; animation:trkIn .6s .05s both; }
.trk-head{ display:flex; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:16px; background:#fff5f3; border:1.5px dashed #f2b9ae; }
.trk-head small{ display:block; color:#8a7578; font-size:.76rem; }
.trk-code{ font-family:ui-monospace,Menlo,Consolas,monospace; color:#b3102a; letter-spacing:.08em; font-size:1.15rem; }
.trk-title{ margin:12px 2px; font-weight:700; line-height:1.9; font-size:.92rem; }
.trk-steps{ list-style:none; margin:14px 0; padding:0; position:relative; }
.trk-steps::before{ content:""; position:absolute; right:19px; top:20px; bottom:20px; width:3px; background:#f0dcd8; border-radius:3px; }
.trk-steps li{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:9px 0; opacity:0; animation:trkRise .5s calc(var(--i) * 120ms + 200ms) both; color:#9b8a8d; }
@keyframes trkRise{ from{ opacity:0; transform:translateX(20px);} to{ opacity:1; transform:none;} }
.trk-steps .dot{ flex:none; z-index:1; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; background:#f3e9e7; color:#a99; border:3px solid #fff; box-shadow:0 0 0 2px #f0dcd8; }
.trk-steps li b{ display:block; padding-top:8px; }
.trk-steps li small{ display:block; margin-top:2px; font-size:.82rem; font-weight:500; line-height:1.8; }
.trk-steps li.done{ color:#136a38; } .trk-steps li.done .dot{ background:#16a34a; color:#fff; box-shadow:0 0 0 2px #bde8cb; }
.trk-steps li.now{ color:#b3102a; } .trk-steps li.now .dot{ background:#e4252b; color:#fff; box-shadow:0 0 0 2px #f7b4b8; animation:trkPulse 1.6s ease-in-out infinite; }
@keyframes trkPulse{ 0%,100%{ box-shadow:0 0 0 2px #f7b4b8, 0 0 0 2px rgba(228,37,43,.5);} 50%{ box-shadow:0 0 0 2px #f7b4b8, 0 0 0 12px rgba(228,37,43,0);} }
.trk-note{ margin-top:12px; padding:14px 16px; border-radius:16px; background:#eef5ff; border:1.5px solid #cfe0ff; }
.trk-note b{ display:block; color:#1d4ed8; margin-bottom:4px; } .trk-note p{ margin:0; line-height:2; font-size:.9rem; }
.trk-kyc{ margin-top:12px; padding:13px 15px; border-radius:16px; background:#fff8e6; border:1.5px solid #f3d98b; font-size:.86rem; line-height:2; color:#5f4a1a; }
.trk-kyc a{ color:#2563eb; font-weight:700; text-decoration:underline; }
.trk-cancel{ margin:12px 0; padding:14px; border-radius:14px; background:#ffe9ec; color:#b3102a; font-weight:700; line-height:1.9; }
@media (max-width:600px){
  .trk-card{ padding:24px 16px; border-radius:22px; }
  .trk-fl{ width:calc(var(--s) * .62); }
  .trk-wrap{ padding-top:22px; padding-bottom:30px; }
}
@media (prefers-reduced-motion:reduce){ .trk-stage,.trk-fl,.trk-steps li,.trk-ico{ animation-duration:.01s !important; animation-iteration-count:1 !important; } }