/* דף חיפוש */
.srch { padding: 26px 20px 10px; }
.srch-head { margin-bottom: 18px; }
.srch-head .hint { margin: 6px 0 0; }

.srch-bar { display: flex; gap: 10px; margin-bottom: 20px; }
.srch-bar .input { flex-grow: 1; }
.srch-toggle { display: none; }

.srch-body { display: grid; grid-template-columns: 244px 1fr; gap: 26px; align-items: start; }

/* ⚠️ בלי max-height ובלי overflow-y.
   הגרסה הקודמת יצרה תיבה עם פס-גלילה פנימי משלה — נראתה כמו iframe
   מוטמע באמצע הדף, והגלילה בתוכה "נתקעת" ביחס לגלילת הדף. הפאנל פשוט
   נמשך לגובהו וגולל עם הדף, כמו כל תוכן אחר. */
.filters {
  position: sticky; top: calc(var(--nav-h) + 14px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--sh-1);
}
/* ─── קבוצות סינון כאקורדיון ─────────────────────────────────────────────
   ⚠️ `<details>` נייטיבי ולא JS. הוא נפתח ונסגר במקלדת, קורא מסך מכריז
   עליו כ"מכווץ/מורחב", והוא עובד גם אם הסקריפט לא נטען — אקורדיון
   שמימשנו לבד היה צריך את כל השלושה מחדש ובדרך כלל מפספס לפחות אחד.

   ⚠️ הקבוצה נפתחת מראש **רק אם יש בה סינון פעיל** (ר' `open` ב-search.php).
   זה מה שפותר את התלונה שהסינון "בלתי נגמר עד שמגיעים לכפתור סנן":
   פאנל סגור הוא שבע שורות במקום מסך וחצי. */
.f-grp { margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.f-grp:last-child { margin-bottom: 0; border-bottom: none; }
.f-h {
  font-size: 13.5px; font-weight: 700; color: var(--navy-900);
  letter-spacing: .01em; margin-bottom: 0;
  /* ⚠️ 44px — יעד המגע המינימלי. כותרת קטנה שצריך לכוון אליה באצבע
     היא בדיוק מה שהופך סינון במובייל למעצבן. */
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 4px 2px; cursor: pointer;
  list-style: none;
}
/* ⚠️ ספארי מציג משולש ברירת-מחדל שאי אפשר לכבות ב-list-style בלבד. */
.f-h::-webkit-details-marker { display: none; }
/* 🛑🛑 גבולות **פיזיים** ולא לוגיים — 27.8.2026, דווח על ידי רוני:
   *"החיצים של המיקום ורמת הכשרות הפוכים"*.

   החץ נבנה מ-`border-inline-end`, שהוא גבול **לוגי** ומתהפך לשמאל
   ב-RTL. ערכי ה-`rotate` לעומת זאת קבועים. התוצאה:

     | | LTR (מה שתוכנן) | RTL (מה שקרה) |
     | סגור  | ↓ למטה   | ← שמאלה  |
     | פתוח  | ↑ למעלה  | → ימינה  |

   כלומר כל האתר, שהוא RTL, הציג חצי-פתיחה כחצים אופקיים — והפתוח
   הצביע לכיוון ההפוך מהסגור.

   ⚠️ הפתרון אינו להתאים את זוויות הסיבוב ל-RTL: **חץ פתיחה/סגירה
   אינו כיווני.** הוא תמיד למטה כשסגור ולמעלה כשפתוח, בשתי השפות.
   גבול פיזי מנתק אותו מכיוון הטקסט, וזו הסיבה שהוא הפתרון הנכון
   ולא עקיפה. (שונה מחצי דפדוף, שכן כיווניים — ר' המוסכמה
   "הבאה=שמאלה" ב-CLAUDE.md.) */
.f-h::after {
  content: ''; width: 9px; height: 9px; flex-shrink: 0; margin-inline-start: 8px;
  border-right: 2px solid var(--ink-400); border-bottom: 2px solid var(--ink-400);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.f-grp[open] > .f-h::after { transform: rotate(-135deg) translateY(2px); }
.f-h:hover { color: var(--teal-800); }
.f-h:hover::after { border-color: var(--teal-600); }
/* מרווח לתוכן שנפתח, כדי שלא יידבק לכותרת */
.f-grp[open] > .f-h { margin-bottom: 8px; }
.f-grp > :last-child { margin-bottom: 12px; }
.f-row {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink-700); min-height: 44px;
}
.f-row:hover { background: var(--teal-50); color: var(--teal-800); text-decoration: none; }
.f-row.on { background: var(--teal-50); color: var(--teal-800); font-weight: 700; }
.f-n { color: var(--ink-400); font-size: 13px; font-weight: 500; }
.f-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.f-chips .tag { min-height: 36px; padding: 7px 13px; font-size: 14px; }
.f-chips .tag:hover { border-color: var(--teal-500); text-decoration: none; }

.results { min-width: 0; }
.empty { text-align: center; padding: 60px 20px; background: var(--bg); border-radius: var(--r-lg); }
.empty h2 { margin-bottom: 8px; }
.empty .hint { margin-bottom: 18px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 30px 0 10px; flex-wrap: wrap; }
.pager-n { font-size: 14.5px; color: var(--ink-500); }
.pager-edge { font-size: 14px; padding: 10px 16px; }
.pager-nums { display: flex; align-items: center; gap: 4px; }
.pager-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 8px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; color: var(--ink-700);
}
.pager-num:hover { background: var(--teal-50); text-decoration: none; }
.pager-num.is-active { background: var(--navy-900); color: #fff; }
.pager-dots { color: var(--ink-400); padding: 0 2px; font-size: 14.5px; }

@media (max-width: 480px) {
  /* ⚠️ בלי זה 5 מספרים + ראשון/הקודם/הבא/אחרון לא נכנסים בשורה במסך צר -
     מסתירים את הקצוות (ראשון/אחרון) ומשאירים רק הקודם/מספרים/הבא. */
  .pager-edge { display: none; }
}

@media (max-width: 980px) {
  .srch-body { grid-template-columns: 1fr; }
  .srch-toggle { display: inline-flex; }
  .filters { display: none; position: static; }
  .filters.open { display: block; margin-bottom: 20px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  /* ⚠️ 25.8.2026: לא לקרוס `.grid-3` בחזרה ל-1fr כאן - זהה לכלל ב-
     brand.css (ר' שם למעלה). זה בדיוק הקובץ שדרס את התיקון בפעם
     הראשונה, כי search.css נטען אחרי brand.css ומנצח באותה ספציפיות. */
  .srch-bar { flex-wrap: wrap; }
  .srch-bar .input { flex: 1 1 100%; }
  .srch-bar .btn { flex: 1 1 0; }
}

/* ─── פאנל הסינון: בחירה מרובה שמוחלת רק ב"סנן" ─────────────────────────────
   ⚠️ הקלט האמיתי מוסתר ויזואלית אבל **נשאר במיקוד** (לא display:none),
   אחרת ניווט במקלדת מדלג עליו וקורא מסך לא מודיע על מצב הסימון. */
.f-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink-700); min-height: 44px; cursor: pointer;
}
.f-opt:hover { background: var(--teal-50); }
.f-opt input { accent-color: var(--teal-700); width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
.f-opt input:checked ~ span { color: var(--teal-800); font-weight: 700; }
.f-opt .f-n { margin-inline-start: auto; }
.f-opt:has(input:focus-visible) { outline: 2px solid var(--teal-600); outline-offset: 1px; }

/* צ׳יפ בשרי/חלבי/פרווה — צ׳קבוקס שנראה כמו תגית */
.f-chip { position: relative; display: inline-flex; cursor: pointer; }
.f-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
/* ⚠️ `:not(.f-count)` — בלעדיו הספירה שבתוך הכפתור מקבלת גם היא
   מסגרת ורקע ונראית ככפתור שני. ר' search.php. */
.f-chip span:not(.f-count) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 7px 15px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; color: var(--ink-700); background: #fff;
  transition: background .12s, border-color .12s, color .12s;
}
.f-chip:hover span:not(.f-count) { border-color: var(--teal-500); }
.f-chip input:focus-visible + span:not(.f-count) { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.f-chip-meat  input:checked + span:not(.f-count) { background: var(--meat-bg);  border-color: var(--meat-line);  color: var(--meat); }
.f-chip-milk  input:checked + span:not(.f-count) { background: var(--milk-bg);  border-color: var(--milk-line);  color: var(--milk); }
.f-chip-parve input:checked + span:not(.f-count) { background: var(--parve-bg); border-color: var(--parve-line); color: var(--parve); }

/* מחוון רדיוס */
.f-range { display: flex; align-items: center; gap: 11px; padding: 4px 2px; }
.f-range input[type="range"] { flex-grow: 1; accent-color: var(--teal-600); }
.f-range output { font-size: 13.5px; font-weight: 700; color: var(--teal-800); white-space: nowrap; min-width: 58px; }

/* ⚠️ נדבק לתחתית הפאנל: אפשר לבחור עשרה סינונים ולגלול, וכפתור "סנן"
   חייב להישאר בהישג יד. בלעדיו הבחירות נראות כאילו לא עשו כלום. */
.f-apply {
  position: sticky; bottom: -18px;
  margin: 18px -18px -18px; padding: 14px 18px;
  background: #fff; border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: grid; gap: 8px;
}

@media (max-width: 980px) {
  /* במובייל הפאנל נפתח ונשאר פתוח עד "סנן" — הוא לא נסגר על כל בחירה */
  .f-apply { position: sticky; bottom: 0; margin-inline: -18px; }
}

/* מונה הסינונים שנבחרו, על כפתור "סינון" */
.srch-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 7px;
  border-radius: var(--r-pill); background: var(--teal-700); color: #fff;
  font-size: 12px; font-weight: 700;
}

/* מיקום בפאנל הסינון */
.f-geo .btn { justify-content: center; gap: 8px; }
.f-radius { margin-top: 12px; }
.f-geo-off {
  background: none; border: 0; padding: 6px 2px 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink-500); text-decoration: underline;
}
.f-geo-off:hover { color: var(--danger); }

/* ─── סינון לפי הערת התעודה ──────────────────────────────────────────────────
   ⚠️ האזהרות מופרדות ויזואלית מההחמרות. "מכיל חלב נוכרי" ו"בישול ישראל
   בית יוסף" הם שני סוגי מידע הפוכים, ואם הם ייראו אותו דבר ברשימה אחת
   משתמש יסמן אזהרה בטעות ויקבל בדיוק את מה שהוא מנסה להימנע ממנו. */
.f-rtags .f-note {
  margin: -4px 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-500);
}
.f-h-warn {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--warn-line);
  color: var(--warn);
}
.f-opt-warn input { accent-color: var(--warn); }
.f-opt-warn:hover { background: var(--warn-bg); }
.f-opt-warn input:checked ~ span { color: var(--warn); }

/* אייקון "לא נמצא" — מרמז ולא מתחרה על תשומת הלב עם הכפתור */
.empty-ico { color: var(--ink-400); margin-bottom: 14px; }

/* הודעת "מוצגים מקומות לאכול בהם" */
.eatery-note {
  margin: -6px 0 16px; padding: 9px 13px;
  background: var(--teal-50); border: 1px solid var(--teal-200);
  border-radius: var(--r-sm); font-size: 13.5px;
}

/* ─── סינון מהיר מעל התוצאות ─────────────────────────────────────────────
   ⚠️ גלילה אופקית במובייל ולא גלישה לשורה שנייה: שורה אחת שומרת את
   התוצאות גבוה על המסך, וזו כל הנקודה בכפתור מהיר. */
.quick-filters {
  display: flex; gap: 8px; margin-bottom: 16px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.quick-filters::-webkit-scrollbar { display: none; }
.qf {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  min-height: 40px; padding: 8px 15px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: #fff;
  font-size: 14.5px; font-weight: 600; color: var(--ink-700); white-space: nowrap;
}
.qf:hover { border-color: var(--teal-500); color: var(--teal-800); text-decoration: none; }
.qf svg { color: var(--ink-400); }
/* ⚠️ המצב הפעיל חייב להיות מובחן גם בלי צבע — מי שלא מבחין בירוק
   צריך לראות שהכפתור לחוץ. לכן גם מסגרת עבה יותר וגם משקל כבד. */
.qf-on {
  background: var(--teal-600); border-color: var(--teal-700); color: #fff; font-weight: 800;
}
.qf-on svg { color: #fff; }
.qf-on:hover { color: #fff; background: var(--teal-700); }

.f-opt-now span { font-weight: 700; }

/* ═══ מסנן כשרות מהדרין ═══
   ר' hechsher_filter_options() ב-includes/functions.php. */
.f-opt-hech {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* ⚠️ min-width:0 — שם ארוך של גוף כשרות שובר אחרת את השורה */
    min-width: 0;
}
.f-hech-logo {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
}
.f-opt-hech > span:not(.f-count) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-grp.f-hech summary::before { content: none; }

/* ─── ספירות חיות במסננים (26.8.2026) ────────────────────────────────
   הספירה שליד כל אפשרות מתארת כמה תוצאות יתקבלו אם ילחצו עליה **עכשיו**,
   בהינתן שאר הסינונים הפעילים. ר' includes/search_facets.php. */
.f-count {
  margin-inline-start: auto;
  color: var(--ink-400);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;   /* המספר לא "רוקד" כשהוא משתנה */
}
/* ⚠️ הצ׳יפים של סוג-המנה הם inline-flex עם רקע — הספירה נכנסת לתוך
   הכיתוב עצמו ולא נדחפת לקצה השורה כמו בשאר הקבוצות. */
.f-chip .f-count { margin-inline-start: 6px; opacity: .65; }

/* ⚠️ מעומעם, לא מוסתר: אפשרות שנעלמת מקפיצה את הרשימה מתחת ליד תוך
   כדי סימון, וזה נקרא כתקלה. משאירים אותה לחיצה — היא מאפסת את שאר
   הסינון ולכן עדיין שימושית. */
.f-opt-empty { opacity: .45; }

/* חיווי עדין בזמן שהספירות בדרך. בלי ספינר — הן חוזרות תוך פחות משנייה,
   וספינר על כל סימון תיבה הוא רעש. */
.f-loading .f-count { opacity: .4; transition: opacity .12s; }

/* ⚠️ חיווי "מוצג לפי המיקום שלכם" + דרך לבטל (27.8.2026).
   כשהמיקום מגיע מהעוגייה ולא מהכתובת, הגולש לא ביקש אותו בדף הזה —
   בלי הדרך לבטל הוא כלוא ברדיוס בלי להבין למה יש מעט תוצאות. */
.srch-geo-note { margin-top: 4px; font-size: 13.5px; }
.srch-geo-note a { margin-inline-start: 6px; }

/* ═══ ספירה בתוך כפתור סינון ═══ 27.8.2026
 * ⚠️ מוצגת כמספר צמוד לטקסט, לא כתגית נפרדת. ר' search.php להסבר
 * מלא — בקצרה: כשהיא הייתה span אח היא קיבלה את כל עיצוב הכפתור
 * ונראתה כמסנן נוסף בשם "1". */
.f-chip span:not(.f-count) > .f-count {
  margin-inline-start: 6px; opacity: .6;
  font-weight: 600; font-size: 12.5px;
  border: 0; padding: 0; background: none; min-height: 0;
}
/* ⚠️ אפשרות ללא תוצאות נשארת גלויה אבל מעומעמת: הסתרה מוחלטת גורמת
   לרשימת המסננים לקפוץ בכל חיפוש, ולחיצה עליה מחזירה מסך ריק. */
/* ⚠️ `f-opt-empty` ולא שם חדש: זה השם ש-`site.js` כבר מדליק ומכבה
   בסינון החי (paint()). שם שני לאותו מצב היה מתעדכן במקום אחד
   ולא בשני. */
.f-chip.f-opt-empty { opacity: .45; }
.f-chip.f-opt-empty span:not(.f-count) { border-style: dashed; }