/* ============================================================================
   FADEZEN · Panels
   מגירה תחתונה (מובייל) / פאנל צד (דסקטופ), פרופיל ספר, גלריה, ביקורות,
   מודאלים, גיליון סינון וארגז אור.
   ========================================================================= */

/* ------------------------------------------------------------------ scrim */
.scrim{
  position: absolute; inset: 0; z-index: var(--z-scrim);
  background: rgba(4,5,7,.56);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-3) var(--ease-out);
}
.scrim.is-open{ opacity: 1; pointer-events: auto; }

/* בדסקטופ המגירה היא פאנל צד קבוע ולא כיסוי מסך — עמעום כבד על המפה לידו
   נראה כמו תקלה. כשזו השכבה היחידה, מחלישים. מודאל מעליה מחזיר עמעום מלא. */
@media (min-width: 900px){
  body.panel-open .scrim[data-depth="1"]{
    background: rgba(4,5,7,.26);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ------------------------------------------------------------------ sheet */
.sheet{
  position: absolute; z-index: var(--z-sheet);
  inset-inline: 0; bottom: 0;
  max-height: var(--sheet-max);
  display: flex; flex-direction: column;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: linear-gradient(180deg, rgba(29,31,36,.95), rgba(17,18,21,.98));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line); border-bottom: 0;
  box-shadow: var(--e-4);
  padding-bottom: var(--safe-b);
  transform: translateY(101%);
  visibility: hidden;
  transition: transform var(--d-4) var(--ease-out), visibility var(--d-4);
}
.sheet.is-open{ transform: translateY(0); visibility: visible; }
.sheet.is-dragging{ transition: none; }

.sheet__grab{
  flex: none; display: grid; place-items: center;
  padding: var(--s-3) 0 var(--s-1);
  cursor: grab; touch-action: none;
}
.sheet__grab i{ width: 44px; height: 4.5px; border-radius: var(--r-pill); background: rgba(255,255,255,.22); }
.sheet__close{
  position: absolute; z-index: 3; top: var(--s-3); inset-inline-end: var(--s-3);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45); border: 1px solid var(--line);
  color: var(--ink-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* touch-action: pan-y — הדפדפן מתעלם מתנועת אצבע אופקית על הגיליון.
   זו חגורה נוספת מעבר ל-overflow-x:hidden: גם אם ילד כלשהו יגלוש
   בעתיד, אי אפשר יהיה לגרור את התוכן הצידה ולחתוך אותו. */
.sheet__body{
  padding: 0 var(--s-4) var(--s-5);
  touch-action: pan-y;
  overscroll-behavior-x: none;
}
.sheet{ touch-action: pan-y; }

@media (min-width: 900px){
  .sheet{
    inset-inline: auto; right: 0; left: auto;
    top: 0; bottom: 0; width: var(--panel-w);
    max-height: none; height: 100%;
    border-radius: 0; border-top: 0;
    border-inline-start: 1px solid var(--line);
    padding-bottom: 0;
    transform: translateX(101%);
    box-shadow: -20px 0 60px rgba(0,0,0,.55);
  }
  .sheet.is-open{ transform: translateX(0); }
  .sheet__grab{ display: none; }
  .sheet__body{ padding-top: var(--s-5); }
}

/* ------------------------------------------------------------ profile head */
.phead{ display: flex; gap: var(--s-3); align-items: flex-start; padding-top: var(--s-1); }
.phead__info{ flex: 1; min-width: 0; padding-top: 2px; }
.phead__name{ font-family: var(--font-display); font-weight: 700; font-size: var(--t-2xl); line-height: var(--lh-tight); }
.phead__shop{ font-size: var(--t-sm); color: var(--ink-2); margin-top: 1px; }
.phead__addr{ display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; }
.phead__badges{ display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-2); }
.phead__bio{ font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s-3); line-height: var(--lh-body); }

/* --------------------------------------------------------------- rating box */
.ratebox{
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: start;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: rgba(255,255,255,.045); border: 1px solid var(--line);
  transition: background var(--d-2);
}
.ratebox:hover{ background: rgba(255,255,255,.07); }
.ratebox__score{ font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 900; line-height: 1; color: var(--gold); }
.ratebox__meta{ font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; }
.ratebox__chev{ margin-inline-start: auto; color: var(--ink-3); transition: transform var(--d-3) var(--ease-out); }
.ratebox.is-open .ratebox__chev{ transform: rotate(180deg); }

.reviews{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-4) var(--ease-out), margin-top var(--d-4);
}
.reviews.is-open{ grid-template-rows: 1fr; margin-top: var(--s-2); }
.reviews__inner{ overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: var(--s-2); }

.review{ padding: var(--s-3); border-radius: var(--r-sm); background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.review__head{ display: flex; align-items: center; gap: var(--s-2); }
.review__name{ font-weight: 700; font-size: var(--t-sm); }
.review__date{ font-size: var(--t-2xs); color: var(--ink-3); }
.review__text{ font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s-2); line-height: var(--lh-body); }
.review__mine{ border-color: rgba(0,229,255,.3); background: var(--nav-dim); }

/* ---------------------------------------------------------------- gallery */
.gallery{ display: flex; gap: var(--s-2); padding-bottom: var(--s-1); scroll-snap-type: x mandatory; }
.gallery__item{
  flex: none; position: relative; scroll-snap-align: start;
  width: 138px; height: 172px;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: var(--c-surface-2);
  transition: transform var(--d-2) var(--ease-out);
}
.gallery__item:active{ transform: scale(.96); }
.gallery__item img{ width: 100%; height: 100%; object-fit: cover; }
.gallery__item figcaption{
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--s-5) var(--s-2) var(--s-2);
  font-size: var(--t-xs); font-weight: 600; text-align: start;
  background: linear-gradient(transparent, rgba(0,0,0,.84));
}

/* --------------------------------------------------------------- services */
.services{ display: flex; flex-direction: column; gap: 1px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.service{
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.035);
  text-align: start; width: 100%;
  transition: background var(--d-2);
}
.service:hover{ background: rgba(255,255,255,.07); }
.service__ico{
  flex: none; width: 32px; height: 32px; border-radius: var(--r-xs);
  display: grid; place-items: center; font-size: 16px;
  background: rgba(255,255,255,.06);
}
.service__name{ font-size: var(--t-md); font-weight: 500; }
.service__desc{ font-size: var(--t-xs); color: var(--ink-3); }
.service__price{ margin-inline-start: auto; font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); color: var(--live); }

/* ------------------------------------------------------------------ hours */
.hours{ display: flex; flex-direction: column; gap: 1px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.hours__row{ display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: rgba(255,255,255,.03); font-size: var(--t-sm); }
.hours__row.is-today{ background: var(--nav-dim); font-weight: 700; }
.hours__row span:last-child{ margin-inline-start: auto; color: var(--ink-2); }
.hours__row.is-closed span:last-child{ color: var(--ink-4); }

/* --------------------------------------------------------- sticky actions */
.actions{
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: var(--s-2); min-width: 0;
  margin: var(--s-5) calc(var(--s-4) * -1) 0;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + var(--safe-b));
  background: linear-gradient(transparent, rgba(16,17,20,.94) 26%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (min-width: 900px){ .actions{ padding-bottom: var(--s-4); } }

/* ----------------------------------------------------------------- modals */
.modal{
  position: absolute; z-index: var(--z-modal);
  inset-inline: 0; bottom: 0;
  max-height: 90%;
  display: flex; flex-direction: column;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: linear-gradient(180deg, rgba(30,32,37,.97), rgba(15,16,19,.99));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line); border-bottom: 0;
  box-shadow: var(--e-4);
  padding-bottom: var(--safe-b);
  transform: translateY(101%);
  visibility: hidden;
  transition: transform var(--d-4) var(--ease-out), visibility var(--d-4);
}
.modal.is-open{ transform: translateY(0); visibility: visible; }
.modal__head{
  flex: none; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.modal__head h2{ font-size: var(--t-xl); }
.modal__head .sub{ font-size: var(--t-xs); color: var(--ink-3); }
.modal__body{ padding: var(--s-4); }
.modal__foot{
  flex: none; display: flex; gap: var(--s-2);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + var(--safe-b));
  border-top: 1px solid var(--line);
}
@media (min-width: 900px){
  .modal{
    inset: 0; margin: auto;
    width: min(520px, 92vw); height: max-content; max-height: 86vh;
    border-radius: var(--r-xl); border: 1px solid var(--line);
    padding-bottom: 0;
    transform: translateY(24px) scale(.97); opacity: 0;
    transition: transform var(--d-3) var(--ease-out), opacity var(--d-3), visibility var(--d-3);
  }
  .modal.is-open{ transform: translateY(0) scale(1); opacity: 1; }
  .modal__foot{ padding-bottom: var(--s-4); }
}

/* ------------------------------------------------------------ booking flow */
.steps{ display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.step{ display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--ink-4); }
.step__n{
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: var(--t-2xs);
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
  transition: background var(--d-3), color var(--d-3), border-color var(--d-3);
}
.step.is-active{ color: var(--ink-1); font-weight: 700; }
.step.is-active .step__n{ background: var(--nav); color: var(--ink-on-nav); border-color: transparent; }
.step.is-done .step__n{ background: var(--live-dim); color: var(--live); border-color: rgba(0,230,118,.4); }
.steps__bar{ flex: 1; height: 2px; border-radius: 2px; background: var(--line); }

.slots{ display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--s-2); }
.slot{
  height: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
  transition: background var(--d-2), border-color var(--d-2), transform var(--d-1) var(--ease-out);
}
.slot:hover:not(:disabled){ background: rgba(255,255,255,.1); }
.slot:active:not(:disabled){ transform: scale(.94); }
.slot.is-on{ background: var(--nav-dim); border-color: rgba(0,229,255,.6); color: var(--nav-ink); }
.slot:disabled{ opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.slot--soon{ border-color: rgba(0,230,118,.4); color: var(--live-ink); }

.pickrow{
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: start;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  margin-bottom: var(--s-2);
  transition: background var(--d-2), border-color var(--d-2);
}
.pickrow:hover{ background: rgba(255,255,255,.07); }
.pickrow.is-on{ background: var(--nav-dim); border-color: rgba(0,229,255,.55); }
.pickrow__check{
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid; place-items: center;
  transition: background var(--d-2), border-color var(--d-2);
}
.pickrow.is-on .pickrow__check{ background: var(--nav); border-color: var(--nav); color: var(--ink-on-nav); }

.receipt{ padding: var(--s-4); border-radius: var(--r-md); background: rgba(255,255,255,.04); border: 1px dashed var(--line-strong); }
.receipt__row{ display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); padding: var(--s-1) 0; }
.receipt__row span:last-child{ margin-inline-start: auto; font-weight: 700; }
.receipt__total{ border-top: 1px solid var(--line); margin-top: var(--s-2); padding-top: var(--s-3); font-size: var(--t-lg); }
.receipt__total span:last-child{ color: var(--live); font-family: var(--font-display); font-weight: 900; }

.success{ text-align: center; padding: var(--s-6) var(--s-4) var(--s-4); }
.success__ring{
  width: 92px; height: 92px; margin: 0 auto var(--s-4);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--live-dim); border: 2px solid rgba(0,230,118,.45);
  animation: bz-pop var(--d-5) var(--ease-spring) backwards;
}
.success__ring svg{ color: var(--live); }
.success__ring svg path{
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: bz-draw .5s var(--ease-out) .18s forwards;
}
.success h2{ font-size: var(--t-2xl); }
.success p{ color: var(--ink-2); font-size: var(--t-sm); margin-top: var(--s-2); }
.success__code{
  display: inline-block; margin-top: var(--s-4);
  padding: var(--s-2) var(--s-5); border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); border: 1px dashed var(--line-strong);
  font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 700;
  letter-spacing: 3px; color: var(--nav);
}

/* ------------------------------------------------------------ filter sheet */
.filtergroup{ margin-bottom: var(--s-5); }
.filtergroup__label{
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--t-xs); font-weight: 700; color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.filtergroup__value{ margin-inline-start: auto; color: var(--nav); font-family: var(--font-display); font-weight: 700; }
/* גלילה אופקית ולא שבירת שורה: ימים בשבוע הם רצף, ושורה שנייה
   עם שני צ'יפים באמצע נראית כמו תקלה. */
/* עוטף שורות במקום לגלול לרוחב.
   קודם זה היה nowrap + overflow-x עם סרגל מוסתר, והתוצאה הייתה שהצ'יפ
   האחרון נחתך באמצע בלי שום רמז שיש עוד — במסך סינון זה אומר שהמשתמש
   פשוט לא יודע שקיים סינון נוסף. */
.filtergroup .chips-wrap{
  display: flex; gap: var(--s-2);
  flex-wrap: wrap;
  padding-bottom: 2px;
}
.filtergroup .chips-wrap > .chip{ flex: 0 0 auto; }
.filtergroup .chip{ box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.05); }

/* --------------------------------------------------------------- lightbox */
.lightbox{
  position: absolute; inset: 0; z-index: var(--z-lightbox);
  display: grid; place-items: center;
  background: rgba(5,6,8,.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity var(--d-3), visibility var(--d-3);
}
.lightbox.is-open{ opacity: 1; pointer-events: auto; visibility: visible; }
.lightbox img{
  max-width: 88vw; max-height: 66%;
  border-radius: var(--r-lg);
  box-shadow: 0 26px 72px rgba(0,0,0,.8);
  animation: bz-pop var(--d-4) var(--ease-out);
}
.lightbox__cap{
  position: absolute; bottom: calc(var(--s-8) + var(--safe-b));
  text-align: center; font-size: var(--t-md); font-weight: 600; color: var(--ink-2);
}
.lightbox__cap b{ display: block; color: var(--ink-1); font-size: var(--t-lg); font-family: var(--font-display); }
.lightbox__close{
  position: absolute; top: calc(var(--s-4) + var(--safe-t)); inset-inline-end: var(--s-4);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1); border: 1px solid var(--line);
}
.lightbox__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1); border: 1px solid var(--line);
}
.lightbox__nav--prev{ inset-inline-end: var(--s-3); }
.lightbox__nav--next{ inset-inline-start: var(--s-3); }
.lightbox__dots{ position: absolute; bottom: calc(var(--s-4) + var(--safe-b)); display: flex; gap: 6px; }
.lightbox__dots i{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.26); transition: background var(--d-2), width var(--d-2); }
.lightbox__dots i.is-on{ background: var(--nav); width: 18px; border-radius: var(--r-pill); }

/* ----------------------------------------------------------------- toasts */
.toasts{
  position: absolute; z-index: var(--z-toast);
  top: calc(var(--topbar-h) + var(--s-2) + var(--safe-t));
  inset-inline: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  pointer-events: none;
}
/* כששכבת־על פתוחה היא מכסה כמעט את כל המסך. ההתראות עולות לפס הצר
   שמעליה — שם הן נקראות בלי להסתיר תוכן, במקום לצוף מעל הגלריה. */
body.has-overlay .toasts{ top: calc(var(--s-3) + var(--safe-t)); }
@media (min-width: 900px){
  body.has-overlay .toasts{ top: calc(var(--topbar-h) + var(--s-2) + var(--safe-t)); }
}
.toast{
  pointer-events: auto;
  max-width: min(92vw, 440px);
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line-strong); box-shadow: var(--e-3);
  font-size: var(--t-sm); font-weight: 600;
  animation: bz-toast-in var(--d-3) var(--ease-out);
}
.toast.is-leaving{ animation: bz-toast-out var(--d-2) var(--ease-out) forwards; }
.toast__dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--live); box-shadow: 0 0 9px var(--live); }
.toast--busy .toast__dot{ background: var(--busy); box-shadow: 0 0 9px var(--busy); }
.toast--info .toast__dot{ background: var(--nav);  box-shadow: 0 0 9px var(--nav); }
.toast--gold .toast__dot{ background: var(--gold); box-shadow: 0 0 9px var(--gold); }
.toast__action{ margin-inline-start: var(--s-2); color: var(--nav); font-weight: 700; white-space: nowrap; }

/* הבהרת "אפשר להגיע בלי תור".
   ממוקמת מתחת לשעות הפעילות כי שם השאלה עולה — הלקוח בודק מתי פתוח
   ומיד תוהה אם הוא חייב לקבוע מראש. */
.walkin{
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-3); padding: var(--s-3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2);
}
.walkin svg{ flex: none; margin-top: 2px; color: var(--ink-3); }
.walkin b{ color: var(--ink-1); }
.walkin--on{
  background: rgba(0,230,118,.08);
  border-color: rgba(0,230,118,.28);
}
.walkin--on svg{ color: var(--c-green, #00E676); }

/* ------------------------------------------------------- דיווח על מספרה */
.reportlink{
  display: block; width: 100%;
  margin-top: var(--s-4); padding: var(--s-2);
  font-size: var(--t-xs); color: var(--ink-4); text-align: center;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--d-2);
}
.reportlink:hover{ color: var(--ink-2); }

.reasons{ display: flex; flex-direction: column; gap: 1px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.reason{
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); cursor: pointer;
  background: rgba(255,255,255,.035);
  font-size: var(--t-sm);
  transition: background var(--d-2);
}
.reason:hover{ background: rgba(255,255,255,.07); }
.reason input{ accent-color: var(--c-cyan, #00E5FF); width: 17px; height: 17px; flex: none; }
.reason:has(input:checked){ background: var(--nav-dim); }

/* --------------------------------------------- תמונות בביקורות */
.rvphotos{ display: flex; gap: var(--s-2); flex-wrap: wrap; }
.rvphotos__cell{
  position: relative; width: 84px; height: 84px;
  border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line);
}
.rvphotos__cell img{ width: 100%; height: 100%; object-fit: cover; }
.rvphotos__del{
  position: absolute; top: 4px; inset-inline-end: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.65); color: #fff;
}
.rvphotos__add{
  width: 84px; height: 84px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: var(--r-sm); border: 1px dashed var(--line);
  color: var(--ink-3); font-size: var(--t-2xs);
  transition: border-color var(--d-2), color var(--d-2);
}
.rvphotos__add:hover{ border-color: var(--c-cyan, #00E5FF); color: var(--ink-2); }

.review__pics{ display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.review__pics img{
  width: 74px; height: 74px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--line);
}

/* ------------------------------------------------- רצועת ימים בהזמנת תור
   גלילה אופקית עם הצמדה. כל יום מציג שם, תאריך ומה מצבו — כדי שיום
   מושבת לא ייראה כמו תקלה אלא כמו מידע. */
.daystrip {
  display: flex;
  gap: var(--s-2, 8px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 0 8px;
  margin-bottom: var(--s-2, 8px);
  -webkit-overflow-scrolling: touch;
}
.daystrip::-webkit-scrollbar { height: 4px; }
.daystrip::-webkit-scrollbar-thumb { background: var(--line, rgba(255,255,255,.12)); border-radius: 4px; }

.dayb {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 10px;
  background: var(--c-surface-2, #1A1D21);
  border: 1.5px solid var(--line, rgba(255,255,255,.09));
  border-radius: var(--r-2, 12px);
  color: var(--ink-2, rgba(255,255,255,.78));
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.dayb:hover:not(:disabled) { border-color: var(--line-strong, rgba(255,255,255,.2)); }
.dayb:active:not(:disabled) { transform: translateY(1px); }

.dayb.is-on {
  border-color: var(--live, #00E676);
  background: rgba(0, 230, 118, .09);
  color: var(--ink-1, #fff);
}

.dayb.is-off { opacity: .4; cursor: not-allowed; }

.dayb__name { font: 800 13px/1.2 var(--font-ui, Heebo, sans-serif); }
.dayb__date { font-size: 10.5px; color: var(--ink-4, rgba(255,255,255,.34)); }
.dayb__note { font-size: 10.5px; color: var(--ink-3, rgba(255,255,255,.55)); }
.dayb.is-on .dayb__note { color: var(--live, #00E676); font-weight: 700; }

/* ------------------------------------------------ שורת דירוג + כתיבת ביקורת
   הכפתור יושב על השורה עצמה במקום להיות כפתור נפרד מתחת לרשימה. */
.ratebar { display: flex; align-items: stretch; gap: var(--s-2, 8px); }
.ratebar .ratebox { flex: 1; min-width: 0; margin: 0 !important; }

.ratebar__write {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 var(--s-3, 12px);
  background: var(--c-surface-2, #1A1D21);
  border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: var(--r-2, 12px);
  color: var(--gold, #FFC700);
  font: 700 12.5px/1 var(--font-ui, Heebo, sans-serif);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.ratebar__write:hover { border-color: rgba(255,199,0,.5); background: rgba(255,199,0,.08); }
.ratebar__write:active { transform: translateY(1px); }

@media (max-width: 400px) {
  .ratebar { flex-direction: column; }
  .ratebar__write { justify-content: center; padding: 10px; }
}