/* ============================================================================
   FADEZEN · Map
   דריסות ל-Leaflet, סיכות מותאמות, סמן משתמש, וקו המסלול.
   ========================================================================= */

#map{
  position: absolute; inset: 0; z-index: var(--z-map);
  background: #0C0D0F;
}

/* רקע האזור שעוד לא נטען.
   שחור מלא נקרא כמו תקלה. רשת עדינה על גוון כהה קצת בהיר יותר
   נקראת כמו מפה שעוד נטענת — בדיוק ההבדל בין "נשבר" ל"רגע". */
.leaflet-container{
  font-family: var(--font-ui);
  background-color: #14161A;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  outline: none;
}

/* אריח נכנס בהעלמה קצרה במקום להופיע בבת אחת — מרכך את התפר
   בין מה שכבר ירד למה שרק הגיע. */
.leaflet-tile{ transition: opacity .22s ease-out; }
/*
  אריחי OSM הרגילים הם מפה בהירה — הם נבחרו כי רק הם מתייגים בעברית.
  ההיפוך כאן הופך אותם למפה כהה: invert מכהה, hue-rotate מחזיר את הגוונים
  (ים כחול נשאר כחול), והשאר מרגיע את הרוויה.
  הפילטר על שכבת האריחים בלבד — הסיכות, סמן המשתמש וקו המסלול יושבים
  בשכבות אחרות ולכן לא מתהפכים.
*/
.leaflet-tile-pane{
  filter: invert(1) hue-rotate(205deg) brightness(.84) contrast(1.18) saturate(.4);
}

/* ספק הגיבוי כבר כהה מלכתחילה — היפוך שני היה מחזיר מפה לבנה */
body.tiles-fallback .leaflet-tile-pane{
  filter: saturate(.7) contrast(1.07) brightness(.9);
}

.leaflet-control-attribution{
  background: rgba(8,9,11,.62) !important;
  color: var(--ink-4) !important;
  font-size: 9.5px !important;
  padding: 1px 8px !important;
  border-radius: var(--r-xs) 0 0 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.leaflet-control-attribution a{ color: var(--ink-3) !important; }
.leaflet-bottom.leaflet-right{ margin-bottom: 0; }

.leaflet-tooltip.bz-tip{
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--line-strong);
  color: var(--ink-1);
  font-size: var(--t-xs); font-weight: 700;
  border-radius: var(--r-pill); padding: 4px 10px;
  box-shadow: var(--e-2);
}
.leaflet-tooltip.bz-tip::before{ display: none; }

/* ---------------------------------------------------------------- markers */
.bz-marker{ background: none !important; border: 0 !important; }

.pin{
  position: relative; width: 46px; height: 54px;
  transform-origin: 50% 100%;
  animation: bz-pin-in var(--d-4) var(--ease-spring) backwards;
  cursor: pointer;
}
.pin__pulse{
  position: absolute; left: 11px; top: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,230,118,.5);
  opacity: 0; pointer-events: none;
}
.pin__body{
  position: absolute; left: 3px; top: 0;
  width: 40px; height: 40px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2.5px solid rgba(255,255,255,.9);
  box-shadow: 0 7px 18px rgba(0,0,0,.62);
  overflow: hidden;
  transition: background var(--d-3), border-color var(--d-3), box-shadow var(--d-3), transform var(--d-3) var(--ease-spring);
}
/* התמונה גדולה מהמסגרת ומסובבת חזרה ליישור, כדי שתמלא את הטיפה גם אחרי
   סיבוב ההורה. שלוש מלכודות שנפתרות כאן:
   1. גודל קבוע בפיקסלים — אחוזים בתוך grid מסובב מתפוצצים לגודל הטבעי.
   2. max-width:none — ה-reset מגביל תמונות ל-100% מהמסגרת הקטנה.
   3. מרכוז ב-translate ולא ב-margin:auto — במיקום אבסולוטי "עודף מוגבל"
      עם מרווחים שליליים, RTL דוחף הכל לצד אחד במקום לחלק שווה בשווה. */
.pin__face{
  position: absolute; top: 50%; left: 50%;
  width: 52px; height: 52px; max-width: none;
  transform: translate(-50%, -50%) rotate(45deg);
  object-fit: cover;
  opacity: .92;
}
.pin__badge{
  position: absolute; inset-inline-start: 50%; transform: translateX(50%);
  white-space: nowrap; line-height: 1;
  font-weight: 900; font-size: var(--t-2xs);
  padding: 3px 6px; border-radius: var(--r-pill);
  box-shadow: var(--e-1);
}
.pin__badge--me{ top: -6px; background: var(--nav); color: var(--ink-on-nav); }
.pin__badge--wait{
  bottom: 6px; background: #0F1114; color: var(--ink-2);
  border: 1px solid var(--line-strong); font-weight: 700;
}
.pin__badge--fav{
  top: -6px; inset-inline-start: auto; inset-inline-end: -2px; transform: none;
  background: var(--busy); color: #fff; padding: 3px 5px;
}

.pin.is-live .pin__body{
  background: var(--grad-live);
  border-color: #CFFFE6;
  box-shadow: var(--e-glow-live);
}
.pin.is-live .pin__pulse{ opacity: 1; animation: bz-pulse 2.2s ease-out infinite; }
.pin.is-busy .pin__body{ background: linear-gradient(150deg,#4C505A,#33363C); border-color: rgba(255,255,255,.5); }
.pin.is-busy .pin__face{ filter: grayscale(.85) brightness(.72); }
.pin.is-closed .pin__body{ background: linear-gradient(150deg,#FF5252,#C22B33); border-color: #FFD6D6; }
.pin.is-closed .pin__face{ filter: grayscale(.6) brightness(.75); }

.pin.is-selected{ z-index: 900; }
.pin.is-selected .pin__body{
  transform: rotate(-45deg) scale(1.2);
  box-shadow: 0 0 0 3px rgba(0,229,255,.6), 0 12px 30px rgba(0,0,0,.66);
}
.pin.is-dim{ opacity: .3; filter: saturate(.35); transition: opacity var(--d-3), filter var(--d-3); }

/* סמן המשתמש */
.me{ position: relative; width: 28px; height: 28px; }
.me__core{
  position: absolute; inset: 7px; border-radius: 50%;
  background: var(--nav); border: 2.5px solid #fff;
  box-shadow: 0 0 16px rgba(0,229,255,.9);
}
.me__ring{
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,229,255,.32);
  animation: bz-pulse 2.8s ease-out infinite;
}
.me__cone{
  position: absolute; left: -20px; top: -20px; width: 68px; height: 68px;
  border-radius: 50%;
  background: conic-gradient(from -40deg, rgba(0,229,255,.34), rgba(0,229,255,0) 82deg);
  animation: bz-sweep 5.5s linear infinite;
}
/* יש קריאה אמיתית מהמצפן: עוצרים את הסיבוב הדקורטיבי ונועלים על הכיוון.
   המעבר מרכך את הקפיצות בין קריאות חיישן רועשות. */
.me--fixed .me__cone{
  animation: none;
  transition: transform .18s linear;
}

/* ------------------------------------------------------------------ route */
.bz-route{
  stroke: var(--nav);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 2 14;
  filter: drop-shadow(0 0 6px rgba(0,229,255,.7));
  animation: bz-dash 1.1s linear infinite;
}
.bz-route-halo{
  stroke: rgba(0,229,255,.16);
  stroke-width: 13;
  stroke-linecap: round;
}