/* پیگیری سفارش در حساب کاربری — انیمیشن سبک، بدون کتابخانه خارجی */

.pubix-orders{display:grid;gap:16px;color:var(--ink)}
.po-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.po-head .st{margin:0}
.po-count{font-size:12px;font-weight:700;color:var(--red);background:#eaf1ff;border-radius:999px;padding:4px 12px}
.po-list{display:grid;gap:14px}

.po-card{background:#fff;border:1px solid var(--bd);border-radius:18px;box-shadow:var(--sh);padding:18px;display:grid;gap:16px;animation:ot-rise .45s cubic-bezier(.2,.7,.2,1) both}
.po-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.po-kicker{display:block;font-size:11px;color:var(--mut)}
.po-id b{font-size:16px}
.po-meta{display:grid;justify-items:end;gap:2px;text-align:end}
.po-date{font-size:12px;color:var(--mut)}
.po-total{font-size:15px;font-weight:700}
.po-actions{display:flex;flex-wrap:wrap;gap:8px}
.po-actions .btn{display:inline-flex;align-items:center;gap:6px}
.po-pay{box-shadow:0 6px 14px rgba(29,92,219,.22)}
.po-empty{text-align:center;display:grid;justify-items:center;gap:8px;padding:34px 18px}
.po-empty .icon{color:var(--red)}

/* ---- نوار پیگیری ---- */
.ot{display:grid;gap:4px}
.ot-track{position:relative;padding:6px 4px 0}
.ot-bar{position:absolute;top:27px;inset-inline:10%;height:4px;border-radius:4px;background:var(--bd);overflow:hidden}
.ot-fill{display:block;height:100%;width:var(--p,0%);border-radius:4px;background:linear-gradient(90deg,var(--red2),var(--red));animation:ot-grow 1.1s cubic-bezier(.2,.7,.2,1) .25s both}
.ot-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;list-style:none;margin:0;padding:0}
.ot-step{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0;animation:ot-in .5s ease both;animation-delay:var(--d,0ms)}
.ot-dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--bd);color:#a3afc4;transition:background .3s,border-color .3s,color .3s}
.ot-dot .icon{width:18px;height:18px}
.ot-step.is-done .ot-dot{background:var(--g);border-color:var(--g);color:#fff}
.ot-step.is-current .ot-dot{background:var(--red);border-color:var(--red);color:#fff;animation:ot-pulse 1.8s ease-out infinite}
.ot-lbl{font-size:12px;font-weight:700;color:var(--mut);line-height:1.4}
.ot-step.is-done .ot-lbl,.ot-step.is-current .ot-lbl{color:var(--ink)}

.ot-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:12px}
.ot-status{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;background:#eaf1ff;color:var(--red)}
.ot-s-pending,.ot-s-on-hold{background:#fef3c7;color:#b45309}
.ot-s-processing{background:#eaf1ff;color:var(--red)}
.ot-s-completed{background:#dcfce7;color:#15803d}
.ot-s-cancelled,.ot-s-failed,.ot-s-refunded{background:#fee2e2;color:#b91c1c}
.ot-track-code,.ot-ship-date{font-size:12px;color:var(--mut)}
.ot-track-code b{color:var(--ink);letter-spacing:.5px}
.ot-note{font-size:13px;line-height:1.9;color:#33415c;background:#f4f7fd;border-radius:12px;padding:10px 14px}
.ot-alert{display:flex;gap:8px;align-items:center;padding:12px 14px;border-radius:12px;background:#fef2f2;color:#991b1b;font-weight:600;font-size:14px}
.ot-alert .icon{color:#b91c1c}

/* نسخه‌ی فشرده (لیست سفارش‌ها) */
.ot.is-compact .ot-dot{width:38px;height:38px}
.ot.is-compact .ot-dot .icon{width:16px;height:16px}
.ot.is-compact .ot-lbl{font-size:11px}
.ot.is-compact .ot-bar{top:23px}

/* ---- موبایل: خط عمودی ---- */
@media (max-width:560px){
  .ot-bar{display:none}
  .ot-track{padding:0}
  .ot-steps{grid-template-columns:1fr;gap:0}
  .ot-step{flex-direction:row;align-items:center;text-align:start;gap:12px;padding:6px 0;position:relative}
  .ot-step:not(:last-child)::after{content:"";position:absolute;inset-inline-start:21px;top:50px;bottom:-6px;width:2px;background:var(--bd);z-index:0}
  .ot-step.is-done:not(:last-child)::after{background:var(--g)}
  .ot-dot{position:relative;z-index:1}
  .ot.is-compact .ot-step{padding:3px 0}
  .ot.is-compact .ot-step:not(:last-child)::after{top:44px}
  .ot.is-compact .ot-dot{width:36px;height:36px}
  .po-card{padding:14px}
  .po-meta{justify-items:start;text-align:start}
  .po-actions .btn{flex:1 1 auto;justify-content:center}
}

@keyframes ot-grow{from{width:0}to{width:var(--p,0%)}}
@keyframes ot-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ot-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ot-pulse{0%{box-shadow:0 0 0 0 rgba(29,92,219,.45)}70%{box-shadow:0 0 0 12px rgba(29,92,219,0)}100%{box-shadow:0 0 0 0 rgba(29,92,219,0)}}

@media (prefers-reduced-motion:reduce){
  .pubix-orders *,.pubix-orders *::before,.pubix-orders *::after{animation:none!important;transition:none!important}
  .ot-fill{width:var(--p,0%)}
}