/* Order Tracking page (user-view/tracking/*) — dark site theme, RTL-safe (logical properties). */
.trk-bg { background: #0d0f12; width: 100%; min-height: 100vh; }
.trk { max-width: 980px; margin: 0 auto; padding: 120px 16px 80px; color: #fff; }
.trk h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 10px; }
.trk p.trk-intro { color: rgba(255,255,255,.75); margin: 0 0 28px; max-width: 640px; }
.trk-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 22px 24px; margin-bottom: 18px; }
.trk-card h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 14px; letter-spacing: .02em; }
.trk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .trk-grid { grid-template-columns: 1fr; } .trk { padding-top: 96px; } }

.trk-form label { display: block; font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: 6px; }
.trk-form input { width: 100%; background: #111418; border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 4px; padding: 12px 14px; font-size: 1rem; margin-bottom: 16px; }
.trk-form input:focus { outline: none; border-color: #fff; }
.trk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #1A1E24; border: 0; border-radius: 4px; padding: 12px 22px; font-weight: 700; cursor: pointer; text-decoration: none; }
.trk-btn:hover { color: #1A1E24; opacity: .9; text-decoration: none; }
.trk-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.trk-btn--ghost:hover { color: #fff; border-color: #fff; }
.trk-btn[disabled] { opacity: .5; cursor: not-allowed; }
.trk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.trk-alert { border-radius: 4px; padding: 12px 14px; margin-bottom: 16px; font-size: .92rem; }
.trk-alert--error { background: rgba(248,113,113,.12); border-inline-start: 4px solid #f87171; }
.trk-alert--ok { background: rgba(52,211,153,.12); border-inline-start: 4px solid #34d399; }
.trk-alert--warn { background: rgba(251,191,36,.10); border-inline-start: 4px solid #fbbf24; }
.trk-note { font-size: .8rem; color: rgba(255,255,255,.55); margin-top: 6px; }

.trk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px; }
.trk-no { background: #fff; color: #1A1E24; font-weight: 800; padding: 6px 14px; border-radius: 4px; font-size: 1.05rem; letter-spacing: .03em; }
.trk-status { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.trk-status--ok { background: rgba(52,211,153,.15); color: #6ee7b7; }
.trk-status--warn { background: rgba(251,191,36,.15); color: #fcd34d; }
.trk-status--muted { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.trk-help { color: rgba(255,255,255,.8); margin: 10px 0 0; }

.trk-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: .92rem; }
.trk-dl dt { color: rgba(255,255,255,.6); font-weight: 400; }
.trk-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
[dir="rtl"] .trk-dl dd[dir="ltr"], [dir="rtl"] .trk-table td[dir="ltr"] { text-align: right; }
.trk-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); vertical-align: -1px; margin-inline-end: 6px; }

.trk-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.trk-steps li { position: relative; padding: 12px 12px 12px 36px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); font-size: .88rem; }
[dir="rtl"] .trk-steps li { padding: 12px 36px 12px 12px; }
.trk-steps li::before { content: ""; position: absolute; inset-inline-start: 12px; top: 15px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); }
.trk-steps li.is-done::before { background: #34d399; border-color: #34d399; }
.trk-steps li.is-current { border-color: #fbbf24; }
.trk-steps li.is-current::before { border-color: #fbbf24; }
.trk-steps li.is-closed::before { background: #9ca3af; border-color: #9ca3af; }
.trk-steps li.is-upcoming { opacity: .55; }
.trk-steps small { display: block; color: rgba(255,255,255,.6); margin-top: 2px; }

.trk-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.trk-table th, .trk-table td { text-align: start; padding: 9px 8px; border-bottom: 1px solid rgba(255,255,255,.1); vertical-align: top; }
.trk-table th { color: rgba(255,255,255,.6); font-weight: 600; font-size: .78rem; }
.trk-table-wrap { overflow-x: auto; }
.trk-mono { font-family: Consolas, Monaco, monospace; }
.trk-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 8px; }