/* ============================================================================
   FADEZEN · Shell
   השלד שצף מעל המפה: סרגל עליון, מונה חי, כפתורי מפה, מסילת כרטיסים,
   תצוגת רשימה ופס ההזמנה הפעילה.
   ========================================================================= */

/* אלמנט fixed עם inset:0 כבר תופס בדיוק את החלון. הוספת height:100svh
   על גבי זה יוצרת אילוץ־יתר: הגובה מנצח, ה-bottom מתעלם, וכשה-svh קטן
   מהחלון (דפדפני מובייל, סרגלי כתובת) כל הממשק התחתון נתלש כלפי מעלה
   ומשאיר פס שחור. לכן — inset בלבד. */
#app{
  position: fixed; inset: 0;
  /* clip ולא hidden: hidden יוצר מיכל שאפשר לגלול בקוד (focus, scrollIntoView),
     ואז כל הממשק נדחף הצידה בלי שאף אחד ביקש. clip פשוט חותך. */
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

/* ------------------------------------------------------------------ topbar */
.topbar{
  position: absolute; z-index: var(--z-topbar);
  top: calc(var(--s-3) + var(--safe-t));
  inset-inline: calc(var(--s-3) + var(--safe-r)) calc(var(--s-3) + var(--safe-l));
  display: flex; flex-direction: column; gap: var(--s-2);
  pointer-events: none;
}
.topbar > *{ pointer-events: auto; }

.topbar__bar{
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2); border-radius: var(--r-xl);
}

.brand{ display: flex; align-items: center; gap: var(--s-2); flex: none; padding-inline-start: var(--s-1); }
/* ריבועי — קנבס הלוגו הוא 476×476. הצל מוגדר ב-14-logo.css */
.brand__mark{ width: 38px; height: 38px; flex: none; }
.brand__text{ display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand__name{
  font-family: var(--font-display); font-weight: 900; font-size: 16.5px; letter-spacing: .5px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand__tag{ font-size: var(--t-2xs); color: var(--ink-3); font-weight: 500; }
@media (max-width: 430px){ .brand__text{ display: none; } }

.search{
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--s-2);
  height: 42px; padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.055);
  border: 1px solid var(--line);
  transition: border-color var(--d-2), background var(--d-2);
}
.search:focus-within{ border-color: rgba(0,229,255,.55); background: var(--nav-dim); }
.search__ico{ flex: none; color: var(--ink-3); }
.search input{ flex: 1; min-width: 0; font-size: var(--t-md); font-weight: 500; }
.search input::placeholder{ color: var(--ink-4); }
.search__clear{
  flex: none; display: none; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.13); color: var(--ink-2);
}
.search.has-value .search__clear{ display: grid; }

/* שורת הסינון המהיר הוסרה. היא היתה רשימה קבועה בקוד שקפאה על שבעת
   השירותים הישנים, בזמן שחלון הסינון נבנה מהקטלוג — שני מקורות שהתפצלו.
   כל הסינון נמצא עכשיו בחלון הסינון בלבד. */

/* מונה חי */
.livecount{
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-3); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
}
.livecount b{ color: var(--live); font-family: var(--font-display); font-size: var(--t-sm); }
.livecount .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 8px var(--live);
  animation: bz-blink 1.9s ease-in-out infinite;
}

/* --------------------------------------------------------------- map fabs */
.fabs{
  position: absolute; z-index: var(--z-fab);
  inset-inline-start: calc(var(--s-3) + var(--safe-l));
  bottom: calc(var(--rail-h) + var(--s-2) + var(--safe-b));
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: opacity var(--d-3), transform var(--d-3) var(--ease-out);
}
.fab{
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--line); box-shadow: var(--e-2);
  color: var(--ink-1);
  transition: transform var(--d-1) var(--ease-out), background var(--d-2), color var(--d-2);
}
.fab:hover{ background: var(--glass-2); }
.fab:active{ transform: scale(.9); }
.fab--nav{ color: var(--nav); }
.fab.is-on{ color: var(--nav); border-color: rgba(0,229,255,.45); background: var(--nav-dim); }
.fabgroup{
  display: flex; flex-direction: column;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--line); box-shadow: var(--e-2);
}
.fabgroup .fab{ background: none; border: 0; box-shadow: none; border-radius: 0; height: 40px; }
.fabgroup .fab + .fab{ border-top: 1px solid var(--line); }

/* ------------------------------------------------------- barber-mode toggle */
.bmode{
  position: absolute; z-index: var(--z-fab);
  inset-inline-end: calc(var(--s-3) + var(--safe-r));
  /* מעל רצועת התור, לא עליה. שניהם ישבו באותו גובה מעל המסילה, ורצועת
     התור נמתחת לרוחב מלא — כך שהכפתור כיסה בדיוק את הפרטים שהספר
     צריך לראות. --bookingbar-h מתעדכן מ-shell.js לפי הגובה בפועל,
     ושווה 0 כשאין תור פעיל. */
  bottom: calc(var(--rail-h) + var(--s-2) + var(--safe-b) +
               var(--bookingbar-h, 0px) + var(--bmode-gap, 0px));
  transition: bottom var(--d-3) var(--ease-out);
  display: flex; align-items: center; gap: var(--s-2);
  height: 48px; padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, rgba(0,229,255,.17), rgba(0,230,118,.12));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(0,229,255,.42);
  box-shadow: var(--e-3), inset 0 0 0 1px rgba(0,229,255,.07);
  font-weight: 700; font-size: var(--t-md); color: #D8FCFF;
  transition: transform var(--d-2) var(--ease-out), opacity var(--d-3), background var(--d-3), border-color var(--d-3);
}
.bmode:active{ transform: scale(.94); }
/* הכפתור לא משנה מראה כשהמצב פעיל: הוא פשוט פותח את לוח הבקרה.
   הנקודה הירוקה והרקע הירוק הוסרו — הם דיווחו על מצב הכפתור עצמו,
   ולא על שום דבר שמעניין את הספר. */
.bmode__pulse{ display: none; }
@media (max-width: 360px){ .bmode__label{ display: none; } .bmode{ padding: 0 var(--s-3); } }

/* ------------------------------------------------------------------- rail */
.rail{
  position: absolute; z-index: var(--z-rail);
  inset-inline: 0; bottom: calc(var(--s-2) + var(--safe-b));
  display: flex; gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-3);
  /* ההנפשה של הגלילה מגיעה מכאן, כדי שהשמה ישירה ל-scrollLeft בקוד
     תיראה חלקה בלי להסתמך על behavior:'smooth' שנחסם בתוך wheel. */
  scroll-behavior: smooth;
  transition: transform var(--d-4) var(--ease-out), opacity var(--d-3);
}
/* הצמדה רק במסכי מגע.
   ההצמדה נועדה להחלקת אצבע, ובעכבר היא נלחמה בגלילה: כל נקישת גלגלת
   נמשכה בחזרה לנקודת ההצמדה, והמסילה נתקעה על הכרטיס הראשון. במחשב
   גלילה חופשית היא ההתנהגות הנכונה ממילא. */
@media (hover: none) and (pointer: coarse){
  .rail{ scroll-snap-type: x proximity; }
  .rail__card{ scroll-snap-align: center; }
}

.rail__card{
  flex: none; width: 262px;
  display: flex; gap: var(--s-3); align-items: center;
  padding: var(--s-3); border-radius: var(--r-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line); box-shadow: var(--e-3);
  text-align: start;
  animation: bz-rise var(--d-4) var(--ease-out) backwards;
  transition: transform var(--d-2) var(--ease-out), border-color var(--d-2), box-shadow var(--d-2);
}
.rail__card:hover{ border-color: var(--line-strong); }
.rail__card:active{ transform: scale(.975); }
.rail__card.is-selected{
  border-color: rgba(0,229,255,.6);
  box-shadow: var(--e-3), 0 0 0 1px rgba(0,229,255,.28);
}
.rail__name{ font-weight: 700; font-size: var(--t-md); }
.rail__shop{ font-size: var(--t-xs); color: var(--ink-3); }
.rail__tags{ display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-1); flex-wrap: wrap; }
.rail__empty{
  flex: 1; min-width: 0;
  border-radius: var(--r-lg); padding: var(--s-4);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line); box-shadow: var(--e-3);
}

/* ------------------------------------------------------------- list view */
.listview{
  position: absolute; z-index: var(--z-sheet);
  inset: 0; top: auto; height: 100%;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(18,19,22,.97), rgba(11,12,14,.99));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transform: translateY(100%);
  transition: transform var(--d-4) var(--ease-out);
  visibility: hidden;
}
.listview.is-open{ transform: translateY(0); visibility: visible; }
.listview__head{
  flex: none; display: flex; align-items: center; gap: var(--s-3);
  padding: calc(var(--s-4) + var(--safe-t)) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.listview__body{ flex: 1; padding: var(--s-3) var(--s-4) calc(var(--s-8) + var(--safe-b)); }

.lcard{
  display: block; width: 100%; text-align: start;
  border-radius: var(--r-lg); overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  margin-bottom: var(--s-3);
  animation: bz-rise var(--d-4) var(--ease-out) backwards;
  transition: transform var(--d-2) var(--ease-out), border-color var(--d-2);
}
.lcard:hover{ border-color: var(--line-strong); }
.lcard:active{ transform: scale(.985); }
.lcard__strip{ display: flex; gap: 2px; height: 76px; }
.lcard__strip img{ flex: 1; min-width: 0; height: 100%; object-fit: cover; }
.lcard__main{ display: flex; gap: var(--s-3); padding: var(--s-3); align-items: flex-start; }
.lcard__name{ font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); }
.lcard__shop{ font-size: var(--t-sm); color: var(--ink-3); }
.lcard__tags{ display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-2); }
.lcard__fav{ margin-inline-start: auto; }

/* ---------------------------------------------------- active booking strip */
.bookingbar{
  position: absolute; z-index: var(--z-rail);
  inset-inline: var(--s-3); bottom: calc(var(--rail-h) + var(--s-3) + var(--safe-b));
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(0,230,118,.2), rgba(0,229,255,.13));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(0,230,118,.42);
  box-shadow: var(--e-3);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--d-3), transform var(--d-3) var(--ease-out), visibility var(--d-3);
}
.bookingbar.is-open{ opacity: 1; transform: translateY(0); visibility: visible; }
/* המרווח נוסף רק כשיש רצועה — אחרת הכפתור היה מרחף באוויר בלי סיבה */
body:has(.bookingbar.is-open){ --bmode-gap: var(--s-2); }
.bookingbar b{
  font-size: var(--t-sm); line-height: 1.35;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bookingbar small{
  display: block; font-size: var(--t-2xs); color: var(--ink-2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bookingbar .grow{ min-width: 0; }              /* בלי זה ellipsis לא עובד בתוך flex */
.bookingbar .ava{ flex: none; }
.bookingbar .btn{ flex: none; }

/* ------------------------------------------------- state-driven visibility */
body.has-overlay .rail,
body.has-overlay .fabs,
body.has-overlay .bmode,
body.has-overlay .bookingbar{ opacity: 0; pointer-events: none; }
body.has-overlay .rail{ transform: translateY(140%); }

body.list-open .topbar{ opacity: 0; pointer-events: none; transition: opacity var(--d-2); }

@media (min-width: 900px){
  /* מכאן והלאה מאפיינים פיזיים (right/left) בכוונה ולא לוגיים.
     פאנל הצד מעוגן פיזית לימין המסך; ב-RTL דווקא inset-inline-END מתורגם
     לשמאל, כך שגרסה לוגית היתה דוחפת את הסרגל והמסילה אל *מתחת* לפאנל
     במקום להרחיק אותם ממנו. */
  .topbar{
    max-width: 640px;
    right: calc(var(--s-4) + var(--safe-r));
    left: auto;
  }
  body.panel-open .topbar{ right: calc(var(--panel-w) + var(--s-4) + var(--safe-r)); }

  .rail{ left: 0; right: 0; }
  body.panel-open .rail{
    right: calc(var(--panel-w) + var(--s-4));
    opacity: 1; pointer-events: auto; transform: translateY(0);
  }

  /* באנר התור: ברוחב מלא הוא נמתח על כל המסך והתוכן נדבק לשני הקצוות —
     כרטיס צר ומיושר לימין, כמו הסרגל העליון, נראה כמו חלק מהממשק.
     ה-64px מפנים את עמודת כפתורי המפה (45px + מרווח), אחרת הבאנר
     יושב בדיוק מתחת לכפתורי הזום והמיקום ומסתיר אותם. */
  .bookingbar{
    inset-inline: auto;
    right: calc(64px + var(--s-4) + var(--safe-r));
    left: auto;
    width: min(400px, 40vw);
  }
  body.panel-open .bookingbar{ right: calc(var(--panel-w) + 64px + var(--s-4) + var(--safe-r)); }
  .bookingbar{ transition: right var(--d-4) var(--ease-out), opacity var(--d-3), transform var(--d-3) var(--ease-out), visibility var(--d-3); }

  .topbar,
  .rail{ transition: right var(--d-4) var(--ease-out), transform var(--d-4) var(--ease-out), opacity var(--d-3); }

  body.panel-open .fabs,
  body.panel-open .bmode{ opacity: 1; pointer-events: auto; }

  /* תצוגת הרשימה תופסת את אותו מקום כמו פאנל הצד — הן אף פעם לא פתוחות יחד */
  .listview{ right: 0; left: auto; width: var(--panel-w); border-inline-end: 1px solid var(--line); }
}

/* ------------------------------------------------ המספרה של המשתמש עצמו
   נשארת בתוצאות כדי שהספר יראה איך הוא מוצג ללקוח, אבל מסומנת בבירור
   כדי שלא תיקרא כמו עוד מתחרה ברשימה. */
.tag--mine{
  background: rgba(0,229,255,.14);
  border-color: rgba(0,229,255,.4);
  color: var(--nav, #00E5FF);
  font-weight: 700;
}
.rail__card.is-mine,
.lcard.is-mine{
  border-color: rgba(0,229,255,.36);
  box-shadow: var(--e-3), inset 0 0 0 1px rgba(0,229,255,.08);
}

/* גרירה עם העכבר — רמז ויזואלי שאפשר לתפוס את המסילה */
@media (hover: hover) and (pointer: fine){
  .rail{ cursor: grab; }
  .rail.is-dragging{ cursor: grabbing; scroll-behavior: auto; }
  /* בזמן גרירה הכרטיסים לא נבחרים ולא נגררים כתמונות */
  .rail.is-dragging *{ user-select: none; -webkit-user-drag: none; pointer-events: none; }
}