/* ALLWAYS · customer tracking page (phone first, TR / EN / AR / KU, RTL aware) */
:root {
  --ground: #F5F4F0; --card: #fff; --ink: #15181E; --navy: #121925; --muted: #5B616E; --line: #E4E2DC;
  --green: #1F7A4D; --orange: #C2410C; --accent: #2B5A8C;
  --font: 'Manrope', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-rtl: 'Noto Sans Arabic', 'Manrope', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
html[dir="rtl"] body { font-family: var(--font-rtl); }
button, input { font: inherit; }
a { color: var(--accent); }
.tbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px; background: var(--navy); }
.tbar__brand { display: flex; flex-direction: column; gap: 3px; text-decoration: none; flex: 1; font-family: 'Manrope', sans-serif; }
.tbar__brand span { font-size: 15px; font-weight: 600; letter-spacing: .38em; color: #F2F3F5; line-height: 1; }
.tbar__brand small { font-size: 7px; font-weight: 600; letter-spacing: .5em; color: #8D95A3; line-height: 1; }
.tlang { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #1F2836; }
.tlang button { min-width: 42px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #C9CED8; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Manrope', 'Noto Sans Arabic', sans-serif; }
.tlang button.on { background: #F2F3F5; color: var(--navy); }
.tmain { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pad { padding: 16px; }
.code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.code { font-family: var(--mono); font-size: 15px; font-weight: 600; padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--ink); direction: ltr; }
.hero { height: 210px; background: repeating-linear-gradient(135deg, #EEF0F3 0 10px, #E6E9EE 10px 20px); display: flex; align-items: center; justify-content: center; color: #475467; font-size: 13px; font-weight: 600; position: relative; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero button { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; }
.vname { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.vsub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.mono { font-family: var(--mono); direction: ltr; unicode-bidi: embed; }
.stage { padding: 18px; border-radius: 16px; background: #FCE9DF; border: 1px solid #F4C9B3; color: #8A2F0B; display: flex; flex-direction: column; gap: 6px; }
.stage small { font-size: 12px; font-weight: 700; }
.stage b { font-size: 24px; font-weight: 800; }
.stage span { font-size: 12px; color: #6B3A22; }
.stage.done { background: #E3F4E8; border-color: #bfe3ca; color: #166534; }
.stage.done span { color: #166534; }
.stage.issue { background: #FDE7E5; border-color: #F6CFCB; color: #B42318; }
.stage.sea { background: #E5EDFF; border-color: #c9d6f7; color: #1E40AF; }
.stage.sea span { color: #1E40AF; }
.stage.port { background: #FBF0DA; border-color: #f0dcae; color: #8A4B08; }
.stage.port span { color: #8A4B08; }
.steps { list-style: none; margin: 0; padding: 16px; }
.step { display: flex; gap: 12px; }
.step__rail { display: flex; flex-direction: column; align-items: center; width: 28px; flex: none; }
.step__dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #C9CED8; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--muted); font-family: 'Manrope', sans-serif; }
.step__line { width: 2px; flex: 1; min-height: 18px; background: var(--line); }
.step.done .step__dot { background: var(--green); border-color: var(--green); color: #fff; }
.step.done .step__line { background: var(--green); }
.step.now .step__dot { background: var(--orange); border-color: var(--orange); color: #fff; }
.step:last-child .step__line { background: transparent; }
.step__txt { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 16px; }
.step__txt b { font-size: 14px; font-weight: 600; color: var(--muted); }
.step.done .step__txt b, .step.now .step__txt b { color: var(--ink); }
.step.now .step__txt b { font-weight: 800; }
.step__txt small { font-size: 12px; color: var(--muted); }
h2 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 0; border-top: 1px solid #F0EEE9; }
.kv:first-of-type { border-top: 0; }
.kv span { color: var(--muted); }
.kv b { font-weight: 700; text-align: end; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.big { font-size: 15px; font-weight: 700; }
.lbl { font-size: 12px; color: var(--muted); display: block; margin-bottom: 2px; }
.btn { height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--wa { background: var(--green); color: #fff; }
.btn--light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.media button { position: relative; aspect-ratio: 4 / 3; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: repeating-linear-gradient(135deg, #EEF0F3 0 10px, #E6E9EE 10px 20px); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media .tag { position: absolute; inset-inline: 6px; bottom: 6px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(18,25,37,.72); padding: 3px 7px; border-radius: 6px; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(18,25,37,.7); display: flex; align-items: center; justify-content: center; }
.media .play::after { content: ''; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.note { font-size: 14px; line-height: 1.5; }
.foot { text-align: center; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; align-items: center; padding-top: 6px; }
.foot b { color: var(--ink); }
.foot .row { display: flex; gap: 8px; width: 100%; }
.foot .row .btn { flex: 1; }
.entry { padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.entry h1 { margin: 0; font-size: 22px; }
.entry p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.entry input { height: 52px; border: 1px solid #D9D6CE; border-radius: 12px; padding: 0 14px; font-family: var(--mono); font-size: 20px; letter-spacing: .12em; text-transform: uppercase; text-align: center; direction: ltr; }
.entry input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #E6EEF7; }
.err { color: #B42318; font-size: 14px; font-weight: 600; }
.spinner { width: 22px; height: 22px; border: 3px solid #E6EEF7; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 30px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.lightbox { position: fixed; inset: 0; background: rgba(8,12,18,.94); z-index: 20; display: flex; align-items: center; justify-content: center; padding: 56px 10px; }
.lightbox img, .lightbox video { max-width: 100%; max-height: 100%; border-radius: 8px; }
.lightbox .x { position: absolute; top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; border-radius: 10px; border: 0; background: #fff; font-size: 18px; cursor: pointer; }
.lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 56px; border-radius: 10px; border: 0; background: rgba(255,255,255,.9); font-size: 26px; cursor: pointer; }
.lightbox .prev { left: 8px; } .lightbox .next { right: 8px; }
.lightbox .cap { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13px; }