/* ============================================================================
   FADEZEN · 12-nav
   פאנל הניווט הפנימי: סיכום מסלול, בורר אופן הגעה ורשימת הוראות.
   יושב מעל המפה — במובייל בתחתית, בדסקטופ כפאנל צד.
   ========================================================================= */

.nav {
  position: fixed;
  z-index: 95;
  right: 0; left: 0; bottom: 0;
  padding: 0 10px calc(10px + var(--safe-b, 0px));
  pointer-events: none;
}

.nav[hidden] { display: none; }

.nav__card {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  max-height: min(66vh, 520px);
  padding: 14px 14px 12px;
  border-radius: var(--r-xl, 26px);
  background: var(--glass-3, rgba(18, 19, 22, .94));
  -webkit-backdrop-filter: var(--glass-blur, blur(20px));
  backdrop-filter: var(--glass-blur, blur(20px));
  border: 1px solid var(--line, rgba(255, 255, 255, .085));
  box-shadow: var(--e-4, 0 -22px 64px rgba(0, 0, 0, .66));
  animation: nav-in .38s var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}

@keyframes nav-in { from { opacity: 0; transform: translateY(30px); } }

@media (min-width: 900px) {
  .nav {
    right: auto; left: 14px;
    top: 88px; bottom: 14px;
    width: 380px;
    padding: 0;
    display: flex; align-items: stretch;
  }
  .nav__card { max-height: 100%; width: 100%; }
}

/* -------------------------------------------------------------- כותרת */

.nav__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-faint, rgba(255, 255, 255, .05));
}

.nav__head b {
  display: block;
  font: 800 15px/1.25 var(--font-display, Rubik, sans-serif);
  color: var(--ink-1, #F4F5F7);
}

.nav__head small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-3, #71787F);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------- בורר אופן הגעה */

.nav__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  margin: 12px 0 0;
  background: rgba(255, 255, 255, .04);
  border-radius: 13px;
}

.nav__mode {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: var(--ink-3, #71787F);
  font: 700 13px/1 var(--font-ui, Heebo, sans-serif);
  padding: 10px 6px;
  border-radius: 10px;
  transition: background var(--d-2, .22s), color var(--d-2, .22s);
}

.nav__mode.is-on {
  background: rgba(0, 229, 255, .16);
  color: var(--nav-ink, #9DEEFF);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset;
}

/* -------------------------------------------------------------- סיכום */

.nav__sum {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 2px 12px;
}

.nav__big {
  font: 900 34px/1 var(--font-display, Rubik, sans-serif);
  color: var(--live, #00E676);
  letter-spacing: -.02em;
}

.nav__big small {
  font: 700 13px/1 var(--font-ui, Heebo, sans-serif);
  color: var(--ink-3, #71787F);
  margin-right: 4px;
}

.nav__meta {
  display: grid;
  gap: 3px;
  font-size: 12.5px;
  color: var(--ink-2, #A9AFB9);
}

.nav__meta span:last-child { color: var(--ink-3, #71787F); font-size: 11.5px; }

/* ------------------------------------------------------------- הוראות */

.nav__steps {
  flex: 1;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-faint, rgba(255, 255, 255, .05));
  overflow-y: auto;
}

.nav__step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line-faint, rgba(255, 255, 255, .05));
  cursor: pointer;
  transition: background var(--d-1, .14s);
}

.nav__step:last-child { border-bottom: 0; }
.nav__step:hover { background: rgba(255, 255, 255, .035); }

.nav__step.is-on {
  background: rgba(0, 229, 255, .09);
  border-radius: 10px;
}

.nav__ico { flex: none; font-size: 16px; line-height: 1.3; width: 22px; text-align: center; }

.nav__txt {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-1, #F4F5F7);
}

.nav__len {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3, #71787F);
  padding-top: 1px;
}

.nav__note {
  padding: 14px 2px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3, #71787F);
  border-top: 1px solid var(--line-faint, rgba(255, 255, 255, .05));
}

/* -------------------------------------------------------------- פעולות */

.nav__acts {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid var(--line-faint, rgba(255, 255, 255, .05));
}

.nav__acts .btn { text-decoration: none; }

.nav__skel { display: grid; gap: 9px; padding: 18px 2px; }
.nav__skel i { display: block; height: 13px; border-radius: 7px; }
.nav__skel i:nth-child(1) { width: 55%; }
.nav__skel i:nth-child(2) { width: 85%; }
.nav__skel i:nth-child(3) { width: 70%; }

/* ------------------------------------------------- קו המסלול על המפה */

.bz-nav-line {
  stroke: var(--nav, #00E5FF);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, .55));
}

.bz-nav-halo {
  stroke: rgba(0, 0, 0, .55);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* נקודת התמרון הנוכחית */
.navdot {
  width: 20px; height: 20px;
  margin: 3px;
  border-radius: 50%;
  background: var(--nav, #00E5FF);
  border: 3px solid #06171C;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, .35), 0 2px 8px rgba(0, 0, 0, .5);
}

/* בזמן ניווט מפנים מקום: מסילת הכרטיסים ופס ההזמנה יורדים מהמסך */
body.nav-open .rail,
body.nav-open .bookingbar,
body.nav-open .bmode { opacity: 0; pointer-events: none; }

@media (min-width: 900px) {
  body.nav-open .rail,
  body.nav-open .bookingbar,
  body.nav-open .bmode { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__card { animation: none; }
}

/* ------------------------------------------------- כרטיס התמרון הפעיל
   מה שמסתכלים עליו תוך כדי הליכה: הוראה אחת גדולה ומרחק שיורד.
   רשימת השלבים המלאה נשארת מתחת, לתכנון ולא לביצוע. */
.nav__cue{
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(0,230,118,.18), rgba(0,229,255,.10));
  border: 1px solid rgba(0,230,118,.38);
}
.nav__cue__ico{ font-size: 30px; line-height: 1; flex: none; }
.nav__cue__txt{ min-width: 0; }
.nav__cue__txt b{
  display: block; font-size: var(--t-lg); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
}
.nav__cue__txt small{ display: block; color: var(--ink-2); font-size: var(--t-xs); margin-top: 2px; }

/* סמן המיקום החי — נפרד מסמן ההתמצאות הרגיל, כדי שיהיה ברור
   שהוא מוצמד למסלול ולא צף לצדו. */
.navme{
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--nav, #00E5FF);
  border: 3px solid #06121a;
  box-shadow: 0 0 0 3px rgba(0,229,255,.35), 0 0 14px rgba(0,229,255,.7);
}

/* ============================================================ מצב נהיגה
   כשהניווט פעיל המסך מחליף תפקיד: לא כרטיס תכנון מעל המפה אלא מסך
   ניווט. ההוראה למעלה, המפה באמצע, שורת המצב למטה — כמו בכל אפליקציית
   ניווט, וכדי שאפשר יהיה להסתכל על זה במבט חטוף תוך כדי נסיעה. */
body.nav-live .nav{
  top: 0; bottom: 0; right: 0; left: 0;
  padding: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
body.nav-live .nav__drive{
  pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%;
}
body.nav-live .nav__cue--big{
  pointer-events: auto;
  margin: calc(var(--safe-t, 0px) + 10px) 10px 0;
  padding: 16px 18px;
  border-radius: var(--r-xl, 26px);
  box-shadow: var(--e-4, 0 18px 60px rgba(0,0,0,.6));
  position: relative;
}
body.nav-live .nav__cue--big .nav__cue__ico{ font-size: 42px; }
body.nav-live .nav__cue--big .nav__cue__txt b{ font-size: 21px; }
body.nav-live .nav__cue--big .nav__cue__txt small{ font-size: 14px; }

.nav__min{
  position: absolute; inset-inline-end: 8px; top: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.4); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 15px; line-height: 1;
}

.nav__then{
  pointer-events: auto; align-self: flex-start;
  margin: 8px 10px 0; padding: 7px 13px;
  border-radius: var(--r-pill, 999px);
  background: var(--glass-3, rgba(18,19,22,.9));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
  max-width: calc(100% - 20px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav__bottom{
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  margin: 0 10px calc(10px + var(--safe-b, 0px));
  padding: 12px 14px;
  border-radius: var(--r-xl, 26px);
  background: var(--glass-3, rgba(18,19,22,.94));
  -webkit-backdrop-filter: var(--glass-blur, blur(20px));
  backdrop-filter: var(--glass-blur, blur(20px));
  border: 1px solid var(--line);
  box-shadow: var(--e-4, 0 -22px 64px rgba(0,0,0,.66));
}
.nav__bottom__stat{ flex: 1; min-width: 0; }
.nav__bottom__stat b{ display: block; font: 800 22px/1 var(--font-display, Rubik, sans-serif); color: var(--live-ink, #00E676); }
.nav__bottom__stat b small{ font-size: 12px; font-weight: 700; }
.nav__bottom__stat > small{ display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }

/* --------------------------------------------------------- מצב מוקטן
   הניווט ממשיך לרוץ ברקע. זה ההבדל בין "להקטין" ל"לסגור", והוא מה
   שהיה חסר: כל סגירה הרגה את הניווט באמצע הדרך. */
body.nav-mini .nav{ top: auto; bottom: 0; }
.nav__mini{
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  margin: 0 10px calc(10px + var(--safe-b, 0px));
  padding: 10px 12px;
  border-radius: var(--r-xl, 26px);
  background: linear-gradient(120deg, rgba(0,230,118,.2), rgba(0,229,255,.12));
  -webkit-backdrop-filter: var(--glass-blur, blur(20px));
  backdrop-filter: var(--glass-blur, blur(20px));
  border: 1px solid rgba(0,230,118,.4);
  box-shadow: var(--e-4, 0 -22px 64px rgba(0,0,0,.66));
}
.nav__mini__ico{ font-size: 24px; flex: none; }
.nav__mini__txt{ min-width: 0; flex: 1; }
.nav__mini__txt b{ display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__mini__txt small{ display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }
.nav__mini__x{
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.4); border: 1px solid var(--line); color: var(--ink-2);
}

/* כפתורי פעולה בפריסת עמודה — "נווט בגוגל מפות" הוא הפעולה הראשית */
.nav__acts--stack{ flex-direction: column; gap: 8px; }
.nav__acts--stack .btn{ width: 100%; }

@media (min-width: 900px){
  body.nav-live .nav{ right: auto; left: 14px; width: 400px; top: 0; bottom: 0; }
}