/* ═══════════════════════════════════════════════════════════════
   tp-curved-journey.css  v35.0
   TRUE 3D ISOMETRIC SVG Journey – enhanced visual quality
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

/* ══════════════ CONTAINER ══════════════ */
.rj-container {
  width: 100%;
  position: relative;
  font-family: 'Cairo', sans-serif;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,.28),
    0 8px 24px rgba(0,0,0,.18),
    0 2px 8px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.15);
  background: #1e40af;   /* fallback while SVG loads */
}

/* ── Root wrapper (SVG + popups) ── */
.rj-root {
  position: relative;
  width: 100%;
  background: transparent;
  direction: rtl;
  user-select: none;
  /* subtle inner border for depth */
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

/* ── SVG responsive ── */
.rj-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px 20px 0 0;
  /* very subtle scanline texture for premium feel */
  image-rendering: optimizeQuality;
}

/* ══════════════ POPUPS LAYER ══════════════ */
.rj-popups-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* ── Popup card ── */
.rj-popup {
  display: none;
  position: absolute;
  width: 200px;
  background: linear-gradient(160deg,
    rgba(15,23,42,.97) 0%,
    rgba(23,37,65,.97) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  padding: 12px 13px 10px;
  box-shadow:
    0 24px 48px rgba(0,0,0,.6),
    0 8px 16px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.1);
  pointer-events: auto;
  z-index: 30;
  animation: rj-popup-in .22s cubic-bezier(0.34,1.56,0.64,1) both;
  font-family: 'Cairo', sans-serif;
  direction: rtl;
}
.rj-popup.open { display: block; }

@keyframes rj-popup-in {
  from { opacity: 0; transform: translateY(-8px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

.rj-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #f1f5f9;
  font-size: .84rem;
  font-weight: 800;
  gap: 6px;
}
.rj-popup-head button {
  width: 24px; height: 24px;
  border: none; cursor: pointer;
  background: rgba(255,255,255,.1);
  border-radius: 6px;
  color: rgba(255,255,255,.55);
  font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.rj-popup-head button:hover {
  background: rgba(239,68,68,.35);
  color: #fca5a5;
}

/* Status pill */
.rj-popup-status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: 9px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: .3px;
}
.rj-popup-status-done   { background:rgba(22,163,74,.25);  color:#86efac; border:1px solid rgba(22,163,74,.3);  }
.rj-popup-status-active { background:rgba(234,179,8,.2);   color:#fde047; border:1px solid rgba(234,179,8,.3);  }
.rj-popup-status-wait   { background:rgba(148,163,184,.12);color:#94a3b8; border:1px solid rgba(148,163,184,.2);}

.rj-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: .73rem;
  color: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rj-popup-row:last-child { border: none; }
.rj-popup-row strong { color: #f1f5f9; font-weight: 700; }

.rj-popup-notes {
  font-size: .68rem;
  color: rgba(255,255,255,.48);
  background: rgba(255,255,255,.06);
  border-radius: 7px;
  padding: 5px 9px;
  margin: 6px 0 4px;
  line-height: 1.55;
  border: 1px solid rgba(255,255,255,.07);
}

.rj-popup-hint {
  font-size: .68rem;
  color: rgba(255,255,255,.35);
  text-align: center;
  padding: 6px 0 2px;
  font-style: italic;
}

.rj-popup-actions {
  margin-top: 9px;
  display: flex;
  gap: 6px;
}
.rj-popup-btn {
  flex: 1;
  padding: 7px 8px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  font-size: .73rem;
  font-weight: 700;
  transition: opacity .15s, transform .12s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.rj-popup-btn:hover  { opacity:.88; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.4); }
.rj-popup-btn:active { transform:translateY(0); }
.rj-popup-btn:disabled { opacity:.45; cursor:default; }
.rj-popup-btn-complete { color:#fff; }
.rj-popup-btn-reopen {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.15);
}

/* ══════════════ VEHICLE PICKER ══════════════ */
.rj-vehicle-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: linear-gradient(135deg,
    rgba(10,15,30,.96) 0%,
    rgba(15,23,42,.98) 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  direction: rtl;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
  /* bottom rounding matches container */
  border-radius: 0 0 20px 20px;
}
.rj-vehicle-picker::-webkit-scrollbar { height: 3px; }
.rj-vehicle-picker::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 2px;
}

.rj-vp-title {
  font-family: 'Cairo', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .4px;
}

.rj-vp-btns {
  display: flex;
  gap: 7px;
  align-items: center;
  flex: 1;
}

.rj-vp-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 11px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  cursor: pointer;
  transition: all .25s cubic-bezier(0.34,1.56,0.64,1);
  min-width: 66px;
  flex-shrink: 0;
  font-family: 'Cairo', sans-serif;
  position: relative;
  overflow: hidden;
}
/* gloss overlay */
.rj-vp-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), transparent);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
.rj-vp-btn:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 8px 22px rgba(0,0,0,.4),
    0 2px 6px rgba(0,0,0,.3);
}
.rj-vp-btn:active {
  transform: translateY(-1px) scale(1.02);
}

/* Selected / active state */
.rj-vp-btn.rj-vp-active {
  background: linear-gradient(145deg,
    rgba(99,102,241,.38) 0%,
    rgba(67,56,202,.32) 100%);
  border-color: #818cf8;
  box-shadow:
    0 0 0 2px rgba(99,102,241,.4),
    0 6px 18px rgba(99,102,241,.28);
  transform: translateY(-3px);
}
.rj-vp-btn.rj-vp-active .rj-vp-label { color: #c7d2fe; }

/* checkmark */
.rj-vp-btn.rj-vp-active::after {
  content: '✓';
  position: absolute;
  top: 3px; left: 6px;
  font-size: .58rem;
  color: #818cf8;
  font-weight: 900;
  line-height: 1;
}

.rj-vp-emoji {
  font-size: 1.65rem;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.45));
  transition: transform .22s cubic-bezier(0.34,1.56,0.64,1);
}
.rj-vp-btn:hover .rj-vp-emoji {
  transform: scale(1.18) rotate(-6deg);
}
.rj-vp-btn.rj-vp-active .rj-vp-emoji {
  animation: rj-vp-bounce .7s ease-in-out infinite alternate;
}
@keyframes rj-vp-bounce {
  from { transform: translateY(0) scale(1.08); }
  to   { transform: translateY(-4px) scale(1.12); }
}

.rj-vp-label {
  font-size: .62rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  transition: color .2s;
  font-family: 'Cairo', sans-serif;
  letter-spacing: .2px;
}
.rj-vp-btn:hover .rj-vp-label { color: rgba(255,255,255,.88); }

/* ══════════════ NEON STOP ANIMATIONS (v32) ══════════════ */
@keyframes rj-neon-ring-spin  { from { stroke-dashoffset: 0 }    to { stroke-dashoffset: -120 } }
@keyframes rj-neon-ring-spin2 { from { stroke-dashoffset: -40 }  to { stroke-dashoffset: -160 } }
@keyframes rj-neon-pulse-done { 0%,100% { opacity: .55; r: 24px } 50% { opacity: .9;  r: 26px } }
@keyframes rj-neon-pulse-wait { 0%,100% { opacity: .18 }          50% { opacity: .38 } }
@keyframes rj-beam-up  { 0%,100% { opacity:.35; transform:scaleY(1) } 50% { opacity:.65; transform:scaleY(1.08) } }
@keyframes rj-star-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes rj-neon-flicker {
  0%,88%,100% { opacity:1 }
  89% { opacity:.55 } 90% { opacity:1 }
  94% { opacity:.7 } 95% { opacity:1 }
}
@keyframes rj-active-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
/* نبضة توهج للمحطة النشطة */
@keyframes rj-active-glow {
  0%,100% { opacity:.35; transform:scale(1) }
  50%      { opacity:.65; transform:scale(1.08) }
}
/* شعاع هولوغرافي عمودي */
@keyframes rj-holo-beam {
  0%   { opacity:0;  transform:scaleY(0.2) translateY(20px) }
  20%  { opacity:.6; transform:scaleY(1)   translateY(0) }
  80%  { opacity:.5; transform:scaleY(1)   translateY(0) }
  100% { opacity:0;  transform:scaleY(0.2) translateY(-10px) }
}

.rj-neon-ring1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: rj-neon-ring-spin 1.6s linear infinite;
}
.rj-neon-ring2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: rj-neon-ring-spin2 2.4s linear infinite;
}
.rj-neon-done  { animation: rj-neon-pulse-done 2.2s ease-in-out infinite; }
.rj-neon-wait  { animation: rj-neon-pulse-wait 3s   ease-in-out infinite; }
.rj-beam-anim  {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: rj-beam-up 2s ease-in-out infinite;
}
.rj-star-spin  {
  transform-box: fill-box;
  transform-origin: center;
  animation: rj-star-spin 3.5s linear infinite;
}
.rj-flicker    { animation: rj-neon-flicker 3.5s ease-in-out infinite; }
.rj-active-bob {
  transform-box: fill-box;
  transform-origin: center;
  animation: rj-active-bob 1.1s ease-in-out infinite;
}
.rj-active-glow-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: rj-active-glow 1.4s ease-in-out infinite;
}
.rj-holo-beam {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: rj-holo-beam 2.8s ease-in-out infinite;
}


.rj-root svg [id^="rj-g-"] { cursor: pointer; }
.rj-root svg [id^="rj-g-"]:hover circle:not([fill="none"]) {
  filter: brightness(1.12) saturate(1.1);
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 768px) {
  .rj-container    { border-radius: 14px; }
  .rj-root         { border-radius: 14px 14px 0 0; }
  .rj-vehicle-picker { border-radius: 0 0 14px 14px; padding: 9px 12px; }
}
@media (max-width: 520px) {
  .rj-popup { width: 172px; }
  .rj-vp-btn { min-width: 54px; padding: 7px 8px; }
  .rj-vp-emoji { font-size: 1.4rem; }
  .rj-vp-label { font-size: .58rem; }
}
@media (max-width: 380px) {
  .rj-vp-title { display: none; }
  .rj-vp-btn   { min-width: 48px; padding: 6px 6px; }
}