/* ==========================================================================
   SearchInput — Tickchak Design System
   4 states: empty / hover / typing / filled
   4 themes: app/live × default/inverse
   Required: tokens.css
   Usage: <div class="search-wrap app default"><div class="search-input">...</div></div>
   ========================================================================== */

.search-wrap{
  width:100%;height:64px;
  padding:var(--space-lg);
  display:flex;flex-direction:column;justify-content:center;
}

.search-input{
  width:100%;height:var(--dim-8,32px);
  border-radius:100px;
  border:none;outline:none;
  padding:0 var(--space-lg) 0 var(--space-xs);   /* שמאל 4 — צד האיקס (אסף, 16/07). ימין 16 — צד הזכוכית. */
  display:flex;align-items:center;
  gap:var(--space-sm);
  direction:rtl;
  cursor:text;
  transition:background .3s cubic-bezier(.4,0,.2,1);
  position:relative;
}

/* Search icon */
.search-input .si-icon{
  width:var(--dim-5);height:var(--dim-5);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0.6;
}

/* Placeholder / text */
.search-input .si-text{
  flex:1;min-width:0;
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-btn-cat);font-weight:400;
  line-height:16px;
  text-align:right;
  border:none;outline:none;background:none;
  width:100%;
}
/* iOS Safari מזמזם אוטומטית כשלוחצים על input עם font-size<16px.
   במובייל מעלים ל-16px כדי למנוע את הזום (בלי לגעת ב-viewport maximum-scale — נגישות). */
@media (max-width:1024px){
  .search-input .si-text{ font-size:16px; }
}

/* Cursor blink for typing state */
.search-input .si-cursor{
  width:1px;height:16px;
  background:currentColor;
  animation:si-blink 1s step-end infinite;
  flex-shrink:0;
}
@keyframes si-blink{0%,100%{opacity:1;}50%{opacity:0;}}

/* Clear button — יושב בין הטקסט לכפתור הסינון (לא נצמד לקצה — הסינון הוא ה-leading) */
/* Chrome מוסיף איקס-ניקוי משלו לכל type=search. לקומפוננט יש si-clear משלו (מהפיגמה),
   אז המובנה מוסתר — אחרת מופיעים שני איקסים זה ליד זה (אסף ראה, 16/07).
   ממוקד ל-.si-text בכוונה: שדות-חיפוש שאינם הקומפוננט (למשל .site-search בהדר) אין להם
   si-clear ולכן הם צריכים דווקא לשמור על המובנה. */
.search-input .si-text::-webkit-search-cancel-button{display:none;}

.search-input .si-clear{
  width:var(--dim-5);height:var(--dim-5);
  border-radius:50%;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  margin-inline-start:auto;
  transition:transform .2s, opacity .2s;
  opacity:1;
}
.search-input .si-clear:hover{opacity:1;transform:scale(1.15);}
.search-input .si-clear:active{transform:scale(0.9);}

/* === APP DEFAULT === */
.app.default .search-input{background:var(--ta-color-bg-surface);color:var(--ta-color-text-default);}
.app.default .search-input:hover{background:var(--ta-color-bg-surface-hover);}
.app.default .search-input:focus-within{background:var(--ta-color-bg-surface);}   /* בפוקוס נשאר רקע רגיל */
.app.default .si-text{color:var(--ta-color-text-default);}
.app.default .si-text::placeholder{color:var(--ta-color-text-default);opacity:1;}  /* Figma: text/default, full */
.app.default .si-clear{background:var(--color-grays-600);color:#fff;}

/* === APP INVERSE === */
.app.inverse .search-input{background:var(--ta-color-bg-surface-inv);color:var(--ta-color-text-inverse);}
.app.inverse .search-input:hover{background:var(--ta-color-bg-surface-inv-hover);}
.app.inverse .search-input:focus-within{background:var(--ta-color-bg-surface-inv);}
.app.inverse .si-text{color:var(--ta-color-text-inverse);}
.app.inverse .si-text::placeholder{color:var(--ta-color-text-inverse);opacity:1;}  /* was --tl- by mistake */
.app.inverse .si-clear{background:var(--color-grays-600);color:#fff;}

/* === LIVE DEFAULT (baseAlt) === */
.live.default .search-input{background:var(--tl-color-bg-surface-inv);color:var(--ta-color-text-default);}
.live.default .search-input:hover{background:var(--tl-color-bg-surface-inv-hover);}
.live.default .search-input:focus-within{background:var(--tl-color-bg-surface-inv);}   /* בפוקוס נשאר רקע רגיל */
.live.default .si-text{color:var(--tl-color-text-inverse-default);font-family:'Google Sans','Rubik',sans-serif;}  /* was --ta- by mistake */
.live.default .si-text::placeholder{color:var(--tl-color-text-inverse-default);opacity:1;}
.live.default .si-clear{background:var(--color-grays-600);color:#fff;}

/* === LIVE INVERSE === */
.live.inverse .search-input{background:var(--tl-color-bg-surface);color:var(--tl-color-text-default);}
.live.inverse .search-input:hover{background:var(--tl-color-bg-surface-hover);}
.live.inverse .search-input:focus-within{background:var(--tl-color-bg-surface);}
.live.inverse .si-text{color:var(--tl-color-text-default);font-family:'Google Sans','Rubik',sans-serif;}
.live.inverse .si-text::placeholder{color:var(--tl-color-text-default);opacity:1;}
.live.inverse .si-clear{background:var(--color-grays-600);color:#fff;}

/* Filled bg — נשאר רקע רגיל בכתיבה (כמו ב-focus) */
.app.default .search-input.filled{background:var(--ta-color-bg-surface);}
.live.default .search-input.filled{background:var(--tl-color-bg-surface-inv);}

/* ==========================================================================
   Filter button (כפתור סינון) — leading element (השמאלי ביותר ב-RTL)
   אייקון סליידרים מהפיגמה (icon 875:5181), עיגול surface 26px, אייקון 16px
   ========================================================================== */
/* כשיש כפתור סינון — צד שמאל (RTL) נצמד 4px לקצה (לא 16) */
.search-input:has(.si-filter){ padding-inline-end:var(--space-xs); }

.search-input .si-filter{
  width:26px;height:26px;flex-shrink:0;
  border:none;border-radius:50%;
  padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s, background .3s cubic-bezier(.4,0,.2,1);
}
.search-input .si-filter svg{width:16px;height:16px;display:block;}
.search-input .si-filter:hover{transform:scale(1.08);}
.search-input .si-filter:active{transform:scale(0.92);}

/* theme — רקע העיגול נגזר מ-surface של ה-pill, האייקון בצבע הטקסט */
.app.default  .si-filter{background:var(--ta-color-bg-surface);color:var(--ta-color-text-default);}
.app.inverse  .si-filter{background:var(--ta-color-bg-surface-inv);color:var(--ta-color-text-inverse);}
.live.default .si-filter{background:var(--tl-color-bg-surface-inv);color:var(--tl-color-text-inverse-default);}
.live.inverse .si-filter{background:var(--tl-color-bg-surface);color:var(--tl-color-text-default);}

/* === Counter badge (Counter=True) — pill מספר על כפתור הסינון (Figma 12195:4517) ===
   באדג': Assistant 14/20, רקע baseAlt, טקסט inverse. הכפתור מתרחב ל-pill. */
.si-filter-count{ display:none; }
.show-counter .si-filter{
  width:auto;height:28px;border-radius:100px;
  gap:var(--space-sm);
  padding-inline-start:var(--space-sm);   /* צד האייקון (ימין ב-RTL) */
  padding-inline-end:var(--space-xs);     /* צד הבאדג' (שמאל ב-RTL) */
}
.show-counter .si-filter-count{
  display:flex;align-items:center;justify-content:center;
  height:20px;min-width:20px;padding:0 var(--space-xs);
  border-radius:100px;
  font-family:'Google Sans','Assistant',sans-serif;font-weight:400;font-size:14px;line-height:20px;
}
.default .si-filter-count{background:var(--ta-color-bg-baseAlt);color:var(--ta-color-text-inverse);}   /* #000 / #fff */
.inverse .si-filter-count{background:var(--ta-color-bg-base);color:var(--ta-color-text-default);}        /* #fff / #000 */

/* === QA — הסתרת כפתור הסינון (טוגל בדף הדמו) === */
.hide-filter .si-filter{ display:none; }
/* X-הניקוי נשמע ל-hidden — בלי זה display:flex גובר והדפים עקפו אחד-אחד (אסף 23/08) */
.search-input .si-clear[hidden]{display:none;}