/* ==========================================================================
   Search Sheet — חיפוש חי (מובייל, LIVE)
   ---------------------------------------------------------------------------
   מקור פיגמה (טיקצ׳אק LIVE / UO0nhgcl5YIqYS16vYOXAE), 24/08/2026:
   · הסקשן «חיפוש כללי»      — node 41704:102208 (שורת-הקלט + כרטיס-התוצאות)
   · SearchResultItem         — node 41704:101786 (5 סוגים: artist/event/venue/region/city)
   · RegionCard (איורי אזורים) — node 41697:101778

   🔴 בלי סקרים שחור (אסף 24/08): «הסרגל הופך באנימציה לחיפוש» — אותו עיקרון
   כמו רצף סרגל→«לתשלום» (30/07): גוף אחד לאורך כל התנועה. מסגרת-הזכוכית של
   הסרגל התחתון נשארת; אייקוני-הניווט נמוגים ובתוכה מופיעים שורת-החיפוש
   («ביטול» + גלולת SearchInput לבנה 44) — והתוצאות צפות מעליו.

   הרכיב נותן: .ss-bar (מוזרק לתוך הסרגל של הדף) + .ss-results (כרטיס צף).
   מה שנשאר לדף: להנמיג את האייקונים שלו במצב is-search (הם קלאסים של הדף).
   ההרמה מעל המקלדת: משתנה ‎--ss-lift (נכתב ב-search-sheet.js).
   שימוש: search-sheet.js — SearchSheet.init({bar, ...נתונים}).
   ========================================================================== */

/* ── שורת-החיפוש בתוך מסגרת-הסרגל ─────────────────────────────────────────
   הפיגמה: שורה כהה עם «ביטול» + גלולה 44, ריפוד 16 וגאפ 8. כאן השורה חיה
   בתוך גלולת-הזכוכית 64 של הסרגל — הריפוד האופקי 8 כמו ריפוד-הסרגל, והגלולה
   44 ממורכזת אנכית (כמו מידות-היעד של כפתור-«לתשלום»: 10 מעל ומתחת). */
.ss-bar{
  position:absolute;left:0;right:0;z-index:3;
  /* צמוד לתחתית-המסגרת (מעל המקלדת/אזור-הבית) — המסגרת גדלה כלפי מעלה סביב הכרטיס */
  bottom:max(env(safe-area-inset-bottom), var(--ss-lift, 0px));
  height:76px;                                   /* 44 גלולה + 16×2 (פיגמה) */
  display:flex;align-items:center;gap:var(--space-sm);
  padding:0 var(--space-lg);                     /* 16 משני הצדדים (פיגמה) */
  opacity:0;pointer-events:none;
  transform:scale(.96);
  transition:opacity .24s ease, transform .30s cubic-bezier(.34,1.4,.5,1);
}
.is-search .ss-bar{
  opacity:1;pointer-events:auto;
  transform:none;
  transition-delay:.10s;   /* קודם האייקונים נמוגים, אז החיפוש נכנס — כמו ברצף-התשלום */
}

/* «ביטול» — טקסט לבן על מסגרת-הזכוכית (פיגמה: Rubik 400 · 16/20 · text/default) */
.ss-cancel{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:'Google Sans','Rubik',sans-serif;font-weight:400;
  font-size:var(--font-size-button-primary);line-height:20px;
  color:var(--tl-color-text-default);
  flex-shrink:0;
}

/* הגלולה — רכיב SearchInput של ה-DS (searchinput.css) בערכת live/default.
   כאן רק וריאנט-היריעה — ההבדלים מהפיגמה (41704:102208) מול המידה הרגילה:
   גובה 44 (במקום 32) · רקע לבן מלא (bg/baseAlt) ·
   עיגול-סינון 32 עם אייקון 20 (הגדלה פרופורציונלית של ‎26/16). */
/* ‎.ss-field — וריאנט-המידות בלבד לשדה-ההדר בנייח: 44 עם עיגול-סינון 32.
   הצבע מגיע מערכת-הרכיב עצמה — ההדר לובש ‎live inverse (שקוף-לבן על כהה),
   לא לבן (אסף 25/08). הלבן המלא שמור ליריעת-המובייל (.ss-bar). */
.ss-bar .search-wrap,
.ss-field .search-wrap{flex:1;min-width:0;padding:0;height:auto;}
/* שלוש רמות בסלקטור — כדי לגבור על ‎.live.default .search-input של הרכיב */
.ss-bar .search-wrap .search-input,
.ss-field .search-wrap .search-input{height:44px;}
.ss-bar .search-wrap .search-input,
.ss-bar .search-wrap .search-input:hover,
.ss-bar .search-wrap .search-input:focus-within,
.ss-bar .search-wrap .search-input.filled{background:var(--tl-color-bg-baseAlt);}
.ss-bar .si-icon{opacity:1;}          /* פיגמה: הזכוכית שחורה מלאה */
.ss-bar .si-filter,
.ss-field .si-filter{width:32px;height:32px;}
.ss-bar .si-filter svg,
.ss-field .si-filter svg{width:20px;height:20px;}

/* ── נייח: פאנל נפתח מתחת לשדה-החיפוש שבהדר ─────────────────────────────
   פיגמה Frame 23166 (41728:370656): עטיפה כהה 75%, רדיוס 24, ריפוד 16,
   ובתוכה אותו כרטיס-תוצאות. גובה 760 על מסך 1024 (מוקטן במסכים נמוכים).
   הרוחב = רוחב שדה-החיפוש (אסף 25/08) — הפאנל נמתח על עוגן-השדה. */
.ss-drop{
  position:absolute;top:calc(100% + 24px);left:0;right:0;z-index:1200;   /* 24 מהשדה (אסף 25/08, תוקן מ-40) */
  /* גובה גמיש לפי התוכן (‎--ss-drop-h נמדד ברכיב), עם מינימום — וקטום למסך (אסף 25/08) */
  height:clamp(240px, var(--ss-drop-h, 240px), calc(100vh - 120px));
  background:rgba(0,0,0,0.75);              /* פיגמה: rgba(0,0,0,.75) גולמי */
  border-radius:var(--border-radius-2xl);   /* 24 (פיגמה: space-xl) */
  padding:var(--space-lg);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,.61,.24,1),
    height .35s cubic-bezier(.22,.61,.24,1);
}
.ss-drop.is-open{opacity:1;transform:none;pointer-events:auto;}
/* בתוך הפאנל הכרטיס זורם וממלא — לא מעוגן-אבסולוטית כמו בסרגל-המובייל */
.ss-drop .ss-results{position:static;height:auto;max-height:none;flex:1;min-height:0;}

/* ── כרטיס-התוצאות — בתוך המסגרת הכהה, לא צף בנפרד (אסף 24/08) ─────────
   כמו בפיגמה (Frame 5771): המסגרת עוטפת את הכרטיס ואת שורת-הקלט יחד.
   הכרטיס מעוגן מעל השורה; המסגרת (הסרגל) גדלה סביבו לפי ‎--ss-results-h
   (נמדד ב-JS אחרי כל הקלדה) — וזו האנימציה: המסגרת נפתחת והכרטיס נחשף. */
.ss-results{
  position:absolute;z-index:3;
  left:var(--space-lg);right:var(--space-lg);    /* 16 מהצדדים בתוך המסגרת (פיגמה) */
  /* מעל שורת-החיפוש: 76 + מה שמאחורי המקלדת/אזור-הבית + מרווח 12 (פיגמה) */
  bottom:calc(76px + max(env(safe-area-inset-bottom), var(--ss-lift, 0px)) + var(--space-md));
  /* גובה קבוע — 95% מהשטח שמעל שורת-החיפוש (אסף 24/08): הכרטיס תמיד תופס
     את השטח, לא מתכווץ לפי כמות-התוצאות */
  height:calc((100dvh - 76px - max(env(safe-area-inset-bottom), var(--ss-lift, 0px))) * 0.95 - 28px);
  background:var(--tl-color-bg-baseAlt);
  border-radius:14px;                            /* פיגמה: 14 גולמי */
  padding:var(--space-lg) var(--space-md);       /* 16 אנכי · 12 אופקי */
  display:flex;flex-direction:column;gap:var(--space-lg);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.ss-results[hidden]{display:none;}

.ss-section{display:flex;flex-direction:column;gap:var(--space-sm);}
.ss-section__title{
  font-family:'Google Sans','Rubik',sans-serif;font-weight:400;
  font-size:var(--font-size-caption);line-height:22px;   /* פיגמה: 12/22 */
  color:#707070;                                          /* פיגמה גולמי (כמו sticker-picker) */
  text-align:right;
}
.ss-divider{
  border:none;margin:0;
  border-top:1px solid rgba(112,112,112,0.2);   /* פיגמה Line 324: ‎#707070 @20% */
}

/* ── שורת-תוצאה (SearchResultItem) ─────────────────────────────────────── */
.ss-item{
  display:flex;align-items:center;gap:var(--space-md);   /* 12 בין הוויזואל לטקסט */
  height:64px;                                            /* פיגמה: dimension-16 */
  /* השורה נשפכת עד קצות-הכרטיס (אסף 25/08) — שוליים שליליים כנגד ריפוד-הכרטיס
     (12), והריפוד-הפנימי מחזיר את התוכן ליישור; ה-hover נצבע מקצה לקצה */
  width:calc(100% + var(--space-md) * 2);
  margin-inline:calc(var(--space-md) * -1);
  background:none;border:none;padding:0 var(--space-md);cursor:pointer;
  text-align:right;
  font-family:'Google Sans','Rubik',sans-serif;
  /* hover — כמו רכיב ה-Item של ה-DS (item.css): רקע surface-hover באותו מעבר */
  transition:background .3s cubic-bezier(.4,0,.2,1);
}
.ss-item:hover{background:var(--tl-color-bg-surface-inv-hover);}   /* ‎rgba(0,0,0,.1) — המקבילה בלייב ל-Item hover */
/* ב-RTL הילד הראשון יושב בימין — הוויזואל (slot ימין) ראשון ב-DOM */
.ss-item__media{flex-shrink:0;width:48px;height:48px;}   /* size-3xl */
.ss-item__text{flex:1;min-width:0;}
.ss-item__title{
  font-weight:700;font-size:var(--font-size-body);line-height:20px;
  color:var(--tl-color-text-inverse-default);
}
.ss-item__sub{
  font-weight:400;font-size:var(--font-size-caption);line-height:16px;
  color:var(--tl-color-text-inverse-default);
}
/* אירוע ואזור — כותרת דחוסה יותר (פיגמה: 16/16) */
.ss-item--event .ss-item__title,
.ss-item--region .ss-item__title{line-height:16px;}

/* אמן — תמונה עגולה */
.ss-item--artist .ss-item__media img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
}

/* אולם / עיר — סיכת-מקום בתוך עיגול (פיגמה Frame 3831) */
.ss-item--venue .ss-item__media img,
.ss-item--city .ss-item__media img{width:100%;height:100%;}

/* אירוע — קוביית-תאריך (הרכיב «קוביה תראיך בחיפוש» 4923:38405).
   🔴 48×48 קשיח, מרובע (אסף 25/08): כל הוויזואלים בשורה — אווטאר, איור,
   סיכה — הם 48×48; הקובייה לא נמדדת מהתוכן אלא קבועה כמוהם. */
.ss-datecube{
  width:48px;height:48px;flex-shrink:0;
  border:1px solid var(--tl-color-border-inverse-default);
  border-radius:5px;                       /* פיגמה: 5 גולמי */
  padding:0 var(--space-xs);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-xs);                     /* 4 — הרכיב תוקן ע"י אסף 25/08: בלי חיתוך-Cap */
  color:var(--tl-color-text-inverse-default);
  text-align:center;
  overflow:hidden;
}
.ss-datecube__day{
  font-family:'Google Sans','Rubik',sans-serif;
  font-weight:700;font-size:20px;line-height:20px;   /* פיגמה: Rubik Bold 20, גובה-שורה 20 (leading-none) */
}
.ss-datecube__month{
  font-family:'Google Sans','Rubik',sans-serif;
  font-weight:400;font-size:10px;line-height:12px;   /* פיגמה: Rubik 10/12 גולמי */
}
/* מצב «אינסוף» — אירוע בלי תאריך (הרכיב 4923:38406, תוקן 25/08):
   מסגרת 1 (כמו מצב-התאריך) · רדיוס 4 · אייקון לוח-שנה-∞ 28 בעובי-קו 1 */
.ss-datecube--infinite{border-radius:4px;padding:0 3.2px;gap:0;}
.ss-datecube--infinite img{width:28px;height:28px;display:block;}

/* ── «אופס» — יש כתיבה אך אין התאמות (אסף 24/08): הנוסח מההפניה-לאירוע,
   בלי איור — טקסט ממורכז בלבד. */
.ss-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;}   /* ממורכז בכרטיס המלא */
.ss-empty__text{
  font-family:'Google Sans','Rubik',sans-serif;
  font-size:var(--font-size-body);line-height:20px;
  color:var(--tl-color-text-inverse-default);
}
.ss-empty__text b{font-weight:700;}

/* אזור — כרטיס-מפה (RegionCard): התמונות הן ייצוא-מרונדר מהפיגמה (×3) —
   המסגרת, הרדיוס והחיתוך כבר אפויים בקובץ, בלי קירוב-CSS (אסף 25/08) */
.ss-regioncard{width:100%;height:100%;}
.ss-regioncard img{width:100%;height:100%;display:block;}