/* ============================================================================
   הסיירת המובנית — עיצוב (#233, 27.8.2026)
   ============================================================================
   שכבת ההארה: ארבעה מלבנים כהים סביב היעד (החור אמיתי — אין אלמנט מעל
   היעד, ראו tour.js), טבעת זוהרת בצבעי המותג, ובועה RTL שמוצמדת ליעד —
   ובמובייל נצמדת לתחתית כסרגל קבוע.
   ⚠ **pointer-events: none על המלבנים — תוקן 27.8.2026 (#239).**
     בגרסה הראשונה למלבנים לא היה הכלל הזה, וההנחה הייתה ש"לחיצה על
     האזור המועם פשוט לא עושה כלום". סימולציית מגע אמיתית הוכיחה שזה
     שקר מסוכן: **גרירת אצבע מעל האזור המעומעם לא גללה את הדף בכלל**
     (נמדד: scrollY נשאר 0 אחרי swipe מלא) — כלומר המשתמשת נכלאה
     במסך אחד לאורך כל המסלול. גלגלת עבדה במחשב, ולכן הבאג לא נראה עד
     שנבדק במגע. המלבנים הם קישוט; כל אינטראקציה עוברת דרכם אל הדף.
   ============================================================================ */

.tour-shade {
  position: fixed;
  /* ⚠ 0.55 → 0.34 (#241): איתי אמר "המסך מוחשך מדי". עמעום חזק הופך
     את ההדרכה למסך חסימה — הלקוחה מאבדת את ההקשר (מה מסביב? איפה
     אני בעמוד?) ורואה רק חלון קטן. 0.34 עדיין מפנה את העין ליעד,
     ועדיין מאפשר לקרוא את מה שמסביב. */
  background: rgba(26, 10, 18, 0.34);
  z-index: 9000;
  display: none;
  pointer-events: none; /* ⚠ ראו למעלה — בלי זה אי אפשר לגלול בטלפון */
  opacity: 1;
  transition: opacity .3s ease;
}

/* בזמן נסיעה אל הצעד הבא — כמעט שקוף, כדי שרואים את הדרך עצמה (#241) */
.tour-shade.is-travel { opacity: .28; }

/* מעבר-במה: המלבנים מחליקים למקום החדש במקום לקפוץ.
   הטכניקה מ-Driver.js (MIT, driverjs.com) — הרעיון, לא הקוד. */
.tour-shade.is-morph {
  transition: left .42s cubic-bezier(.4,0,.2,1), top .42s cubic-bezier(.4,0,.2,1),
              width .42s cubic-bezier(.4,0,.2,1), height .42s cubic-bezier(.4,0,.2,1),
              opacity .3s ease;
}

.tour-ring {
  position: fixed;
  z-index: 9001;
  display: none;
  opacity: 1;
  transition: opacity .28s ease;
  pointer-events: none; /* הטבעת מעל החור — אסור שתחסום את הלחיצה */
  border: 3px solid #ff2d87;
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(255, 45, 135, 0.25), 0 0 18px rgba(255, 45, 135, 0.55);
  animation: tour-pulse 1.6s ease-in-out infinite;
}

.tour-ring.is-hidden { opacity: 0; }
.tour-ring.is-morph {
  transition: left .42s cubic-bezier(.4,0,.2,1), top .42s cubic-bezier(.4,0,.2,1),
              width .42s cubic-bezier(.4,0,.2,1), height .42s cubic-bezier(.4,0,.2,1),
              opacity .28s ease;
}

/* הבועה מתעמעמת קלות בזמן הנסיעה — הכיוון הוא המסך, לא הטקסט */
.tour-bubble.is-travel { opacity: .82; transition: opacity .3s ease; }

/* 🔴 #347 — הבועה זוחלת עם הבמה ולא קופצת אחריה. אותה עקומה ואותו משך
   של ‎.tour-shade.is-morph‎, ועל ‎left/top‎ ולא על transform — כי
   ‎positionBubble‎ כותב left/top מפורשים (מפרט 6.2). */
.tour-bubble.is-morph {
  transition: left .42s cubic-bezier(.4,0,.2,1), top .42s cubic-bezier(.4,0,.2,1),
              opacity .3s ease;
}

/* 🔴 #347 — מצב "כבוי" שניתן להנפשה. עד כה ההסתרה הייתה ‎display:none‎
   בלבד, ולכן ה-‎transition: opacity‎ שמוגדר למעלה מעולם לא רץ. */
.tour-shade.tour-out, .tour-ring.tour-out, .tour-bubble.tour-out { opacity: 0; }

/* ⚠ מי שביקש פחות תנועה מקבל פחות תנועה — בלי לאבד את ההדרכה. */
@media (prefers-reduced-motion: reduce) {
  .tour-shade, .tour-ring, .tour-shade.is-morph, .tour-ring.is-morph,
  .tour-bubble.is-morph, .tour-bubble.is-travel {
    transition: none;
    animation: none;
  }
}

@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 45, 135, 0.25), 0 0 18px rgba(255, 45, 135, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 45, 135, 0.12), 0 0 26px rgba(255, 45, 135, 0.75); }
}

.tour-bubble {
  position: fixed;
  z-index: 9002;
  display: none;
  width: min(340px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid #ffd6e8;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(122, 30, 88, 0.25);
  padding: 14px 16px;
  direction: rtl;
  text-align: right;
  outline: none;
}

/* מובייל: סרגל תחתון קבוע — הבועה לא מתחרה עם היעד על מסך קטן */
.tour-bubble-bottom {
  left: 8px !important;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  top: auto !important;
  width: auto;
}

.tour-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.tour-count { font-size: 12px; color: #9a8790; }
.tour-head-btns { display: flex; gap: 6px; }
.tour-mini {
  border: none; background: #fff2f8; border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 14px;
}
.tour-mini:active { background: #ffd6e8; }

.tour-title { font-size: 17px; margin: 0 0 4px; color: #1a1a1a; }
.tour-text { font-size: 14.5px; line-height: 1.55; color: #4d3f46; margin: 0 0 8px; }
.tour-note { font-size: 13px; color: #b3641a; background: #fdf3ee;
             border-radius: 8px; padding: 6px 10px; margin: 0 0 8px; }
/* כפתור בתוך שורת הודעה — "קחי אותי אליו" כשהיעד יצא מהמסך (#239) */
.tour-inline-btn {
  border: none; background: #ffd6e8; color: #b81f63; font-weight: 700;
  border-radius: 8px; padding: 3px 10px; margin-inline-start: 4px;
  font-size: 13px; cursor: pointer; font-family: inherit;
}
.tour-inline-btn:active { background: #ffb8d6; }

.tour-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tour-actions .btn-pill { font-size: 14px; }
.tour-hint { font-size: 13.5px; color: #b81f63; font-weight: 700; }

/* ── מסך ההשקה בלשונית מדריכים ── */
.tour-route-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tour-route-btn {
  text-align: right; direction: rtl; cursor: pointer;
  background: #fff; border: 1px solid #ffd6e8; border-radius: 14px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
  transition: box-shadow .15s;
}
.tour-route-btn:hover { box-shadow: 0 4px 14px rgba(122, 30, 88, 0.15); }
.tour-route-title { font-weight: 700; font-size: 15.5px; color: #b81f63; }
.tour-route-blurb { font-size: 13px; color: #6b5b62; }
#tour-launch { margin-bottom: 26px; }
#tour-launch #tour-resume { margin-top: 4px; }