/* ==========================================================================
   mtemps6 — POINTS (pts)  "رحلة النقلة": طريق رأسي (كحلي بخطوط متقطعة) والعربية
   (منظر من فوق) بتنزل عليه مع السكرول، والخط اللي اتمشى بيتلوّن أصفر،
   وكل محطة (إشارة مرور دايرية) بتنوّر لما العربية تعدّيها.
   موبايل: الطريق على جنب البداية — ديسكتوب: في النص والكروت متبادلة.
   ========================================================================== */
.mtemps6-pts-route { position: relative; --mtemps6-road-w: 4rem; }
.mtemps6-pts-road { position: absolute; inset-block: 0 4.5rem; inset-inline-start: 0; width: var(--mtemps6-road-w); border-radius: var(--mtemps6-r-md); background-color: var(--mtemps6-deep); background-image: linear-gradient(90deg, var(--mtemps6-on-deep-muted) 0 2px, transparent 2px calc(100% - 2px), var(--mtemps6-on-deep-muted) calc(100% - 2px)), repeating-linear-gradient(180deg, var(--mtemps6-deep-3) 0 22px, transparent 22px 40px); background-size: 100% 100%, 4px 100%; background-position: 0 0, 50% 0; background-repeat: no-repeat; box-shadow: 0 0 0 6px var(--mtemps6-bg-2); }
.mtemps6-pts-road-done { position: absolute; inset-block: 0; inset-inline-start: 50%; width: 4px; margin-inline-start: -2px; background: var(--mtemps6-accent); transform-origin: top; transform: scaleY(var(--mtemps6-road-p, 0)); }
.mtemps6-pts-truck { position: absolute; inset-block-start: 0; inset-inline-start: 50%; z-index: 2; width: 2.5rem; margin-inline-start: -1.25rem; transform: translateY(var(--mtemps6-truck-y, 0px)); filter: drop-shadow(0 6px 6px var(--mtemps6-deep)); }
.mtemps6-pts-truck svg { width: 100%; height: auto; }
.mtemps6-pts-truck-box { fill: var(--mtemps6-cardboard); stroke: var(--mtemps6-cardboard-2); stroke-width: 2; }
.mtemps6-pts-truck-tape { fill: var(--mtemps6-accent); }
.mtemps6-pts-truck-cab { fill: var(--mtemps6-primary); }
.mtemps6-pts-truck-glass { fill: var(--mtemps6-paper); opacity: 0.85; }
.mtemps6-pts-truck-light { fill: var(--mtemps6-accent); }

.mtemps6-pts-list { display: grid; gap: clamp(2rem, 5vw, 3rem); margin: 0; padding: 0; list-style: none; }
.mtemps6-pts-step { position: relative; padding-inline-start: calc(var(--mtemps6-road-w) + var(--mtemps6-sp-5)); }
.mtemps6-pts-sign { position: absolute; inset-block-start: 0.75rem; inset-inline-start: calc(var(--mtemps6-road-w) / 2 - 1.5rem); z-index: 3; display: grid; place-items: center; width: 3rem; height: 3rem; border: 3px solid var(--mtemps6-deep); border-radius: 50%; background: var(--mtemps6-paper); color: var(--mtemps6-deep); font-size: var(--mtemps6-fs-sm); font-variant-numeric: tabular-nums; transition: background-color var(--mtemps6-dur-3), transform var(--mtemps6-dur-3) var(--mtemps6-ease-spring), box-shadow var(--mtemps6-dur-3); }
.mtemps6-pts-step.mtemps6-is-passed .mtemps6-pts-sign { background: var(--mtemps6-accent); transform: scale(1.12); box-shadow: 0 0 0 6px var(--mtemps6-accent-soft); }
.mtemps6-pts-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--mtemps6-sp-2) var(--mtemps6-sp-4); padding: var(--mtemps6-pad-card); border: var(--mtemps6-hair) solid var(--mtemps6-line-2); border-radius: var(--mtemps6-r-md); background: var(--mtemps6-surface); box-shadow: var(--mtemps6-shadow-box); transition: border-color var(--mtemps6-dur-3), box-shadow var(--mtemps6-dur-3); }
.mtemps6-pts-step.mtemps6-is-passed .mtemps6-pts-card { border-color: var(--mtemps6-deep); box-shadow: 0 8px 0 -2px var(--mtemps6-accent); }
.mtemps6-pts-ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--mtemps6-r-sm); background: var(--mtemps6-bg-2); color: var(--mtemps6-deep); font-size: 1.35rem; }
.mtemps6-pts-title { align-self: center; font-size: var(--mtemps6-fs-lg); }
.mtemps6-pts-text { grid-column: 1 / -1; color: var(--mtemps6-muted); }
.mtemps6-pts-finish { position: relative; z-index: 3; display: flex; align-items: center; gap: var(--mtemps6-sp-3); width: max-content; max-width: 100%; margin-block-start: var(--mtemps6-sp-6); padding: var(--mtemps6-sp-3) var(--mtemps6-sp-5); border-radius: var(--mtemps6-r-sm); background: var(--mtemps6-deep); color: var(--mtemps6-on-deep); font-weight: var(--mtemps6-fw-bold); }
.mtemps6-pts-finish i { color: var(--mtemps6-accent); }

@media (min-width: 900px) {
  .mtemps6-pts-road { inset-inline-start: 50%; margin-inline-start: calc(var(--mtemps6-road-w) / -2); }
  .mtemps6-pts-list { gap: var(--mtemps6-sp-4); }
  .mtemps6-pts-step { display: grid; grid-template-columns: 1fr var(--mtemps6-road-w) 1fr; column-gap: var(--mtemps6-sp-7); padding-inline-start: 0; }
  .mtemps6-pts-card { grid-column: 1; }
  .mtemps6-pts-step:nth-child(even) .mtemps6-pts-card { grid-column: 3; }
  .mtemps6-pts-sign { inset-inline-start: 50%; margin-inline-start: -1.5rem; }
  .mtemps6-pts-card::after { content: ""; position: absolute; inset-block-start: 2.1rem; inset-inline-end: calc(var(--mtemps6-sp-7) * -1); width: var(--mtemps6-sp-7); border-block-start: 3px dashed var(--mtemps6-line-2); }
  .mtemps6-pts-step:nth-child(even) .mtemps6-pts-card::after { inset-inline-end: auto; inset-inline-start: calc(var(--mtemps6-sp-7) * -1); }
  .mtemps6-pts-finish { margin-inline: auto; }
}