/* ═══════════════════════════════════════════════════════════════════════════
   בלק צ'רי — שכבת החיפוש (הערת טליה #7, 27.7.26).
   ⚠ אין רכיב חיפוש בפיגמה של מרינה. הסגנון כאן נבנה מטוקני-המותג הקיימים
   (‏tokens.css) ומגיאומטריית המודאלים שכבר באתר, ולא ממציא שפה חדשה —
   כדי שהאשרור של מרינה יהיה על המיקום, לא על עיצוב זר. z-index 130: מעל
   מגירת-העגלה (120, cart.css) כי החיפוש נפתח גם מעליה.
   ═══════════════════════════════════════════════════════════════════════════ */

.search-layer {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(26, 26, 26, .45);
  display: flex; justify-content: center;
  padding: max(12vh, 64px) 20px 20px;
  overflow-y: auto;
  animation: sl-in .18s ease;
}
.search-layer[hidden] { display: none; }
@keyframes sl-in { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .search-layer { animation: none } }
html.a11y-nomotion .search-layer { animation: none }

.search-panel {
  inline-size: min(720px, 100%); block-size: fit-content;
  background: var(--bc-cream-card, #fffbf2);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(26, 26, 26, .28);
  overflow: hidden;
}

/* ── שורת החיפוש ── */
.search-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-block-end: 1px solid var(--bc-cream-warm, #f0e7dd);
}
.search-bar-ic { font-size: 19px; color: var(--bc-primary, #3b0f1a); flex: 0 0 auto; }
.search-bar input {
  flex: 1 1 auto; min-inline-size: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 18px; color: var(--bc-ink, #1a1a1a);
  padding-block: 6px;
}
.search-bar input::placeholder { color: #8a7f7f; }
/* ה-X המובנה של type=search כפול לכפתור הסגירה שלנו ומבלבל בקורא-מסך */
.search-bar input::-webkit-search-cancel-button { display: none; }
.search-close { flex: 0 0 auto; color: var(--bc-ink-soft, #47393b); }
.search-close:hover { background: rgba(59, 15, 26, .07); }

/* ── חיפושים נפוצים ── */
.search-quick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px 20px;
}
.search-quick[hidden] { display: none; }
.sq-label { font-size: 14px; color: var(--bc-ink-soft, #47393b); margin-inline-end: 4px; }
.search-quick button {
  border: 1px solid var(--bc-cream-warm, #f0e7dd);
  background: var(--bc-cream, #f9f5ed);
  color: var(--bc-primary, #3b0f1a);
  border-radius: 999px; padding: 6px 14px;
  font: inherit; font-size: 14.5px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.search-quick button:hover { background: var(--bc-cream-warm, #f0e7dd); }
.search-quick button:focus-visible { outline: 2px solid var(--bc-primary, #3b0f1a); outline-offset: 2px; }

/* ── תוצאות ── */
.search-results { max-block-size: min(56vh, 520px); overflow-y: auto; padding: 6px; }
.search-results[hidden] { display: none; }

.sr-group {
  font-size: 13px; font-weight: 600; letter-spacing: .4px;
  color: var(--bc-ink-soft, #47393b);
  padding: 12px 14px 6px;
}
.sr-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 10px;
  text-decoration: none; color: inherit;
}
.sr-item:hover, .sr-item.is-active { background: var(--bc-cream-warm, #f0e7dd); }
.sr-item:focus-visible { outline: 2px solid var(--bc-primary, #3b0f1a); outline-offset: -2px; }
.sr-thumb {
  flex: 0 0 auto; inline-size: 52px; block-size: 52px;
  border-radius: 8px; object-fit: cover;
  background: var(--bc-cream-warm, #f0e7dd);
}
.sr-thumb-ic {
  flex: 0 0 auto; inline-size: 52px; block-size: 52px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bc-cream-warm, #f0e7dd); color: var(--bc-primary, #3b0f1a);
  font-size: 19px;
}
.sr-txt { min-inline-size: 0; flex: 1 1 auto; }
/* display:block חובה — שניהם <span> (כדי לשבת בתוך ה-<a>), וכ-inline הם נדבקו
   באותה שורה: "מארז עוגיות מלוחות חלביקינוחים חלביים". נמצא בצילום חי 27.7. */
.sr-name {
  display: block;
  font-size: 16px; font-weight: 500; color: var(--bc-ink, #1a1a1a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-meta {
  display: block; margin-block-start: 2px;
  font-size: 13.5px; color: var(--bc-ink-soft, #47393b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── מצבי סטטוס: טוען · אין תוצאות · תקלה ──
   "אין תוצאות" הוא דרישה מפורשת של שילה (27.7) ולא רק העדר-רשימה: מסך ריק
   בלי מילים נקרא כתקלה, ולא כתשובה. */
.search-status { padding: 0 20px; }
.search-status:empty { padding: 0; }
.ss-box { padding: 22px 4px 26px; text-align: center; }
.ss-title { font-size: 17px; font-weight: 500; color: var(--bc-ink, #1a1a1a); margin-block-end: 6px; }
.ss-sub { font-size: 14.5px; color: var(--bc-ink-soft, #47393b); }
.ss-sub .ss-hint { display: block; margin-block-start: 10px; }
.ss-did { padding: 10px 14px 0; font-size: 14px; color: var(--bc-ink-soft, #47393b); }

@media (max-width: 640px) {
  .search-layer { padding: 0; }
  .search-panel { inline-size: 100%; border-radius: 0; block-size: 100%; display: flex; flex-direction: column; }
  .search-results { max-block-size: none; flex: 1 1 auto; }
  .search-bar input { font-size: 16px; } /* מתחת ל-16 iOS מזגזג zoom בפוקוס */
}