/* >>> MSL-SITE-SEARCH  ·  קיפול מ-design-kit/mockups/site-search-2026-06-30/search-ext.css
   רכיבי חיפוש-אתר: trigger · panel · suggest · empty · filterbar · עמוד-תוצאות.
   טוקנים בלבד · 0 inline · RTL + מובייל מובְנים · נשען על msl-kit.css + kit-extensions.css.
   קיפול: 2026-06-30  ·  MSL-SITE-SEARCH-FOLD-2026-06-30
================================================================================ */

/* ---- 1) TRIGGER — מצב סגור (אייקון בכותרת) ----------------------------------------- */
.msl-search-trigger{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--msl-sp-2);
  width:40px; height:40px; padding:0;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--msl-r-pill);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
  font-family:var(--msl-font); font-weight:var(--msl-w-bold); font-size:var(--msl-size-meta);
  transition:border-color .15s, background .15s, transform .12s;
}
.msl-search-trigger:hover{ border-color:var(--msl-amber); background:rgba(212,160,74,.14); transform:translateY(-1px); }
.msl-search-trigger:focus-visible{ outline:2px solid var(--msl-amber); outline-offset:2px; }
.msl-search-trigger svg{ width:18px; height:18px; flex:0 0 auto; }

/* ---- 2) PANEL — מצב פתוח (לוח רוחב-מלא מתחת לכותרת) -------------------------------- */
.msl-search-panel{
  display:none;
  position:relative; z-index:40;
  color:#fff;
  padding:var(--msl-sp-7) 0 var(--msl-sp-6);
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,160,74,.20), transparent 60%),
    radial-gradient(90% 70% at 88% 130%, rgba(58,120,180,.16), transparent 55%),
    linear-gradient(160deg, var(--msl-navy) 0%, var(--msl-navy-2) 60%, var(--msl-navy-3) 100%);
  box-shadow:var(--msl-shadow-2);
}
.msl-search-panel.is-open{ display:block; }

.msl-search-panel-inner{
  position:relative;
  max-width:760px; margin:0 auto; padding:0 var(--msl-sp-6);
  text-align:center;
}
.msl-search-panel .msl-kicker{ justify-content:center; color:var(--msl-amber); margin-bottom:var(--msl-sp-4); }
.msl-search-close{
  position:absolute; inset-block-start:-6px; inset-inline-start:var(--msl-sp-6);
  display:inline-flex; align-items:center; gap:var(--msl-sp-2);
  border:0; background:transparent; cursor:pointer;
  font-family:var(--msl-font); font-size:var(--msl-size-meta); font-weight:var(--msl-w-bold);
  color:rgba(255,255,255,.7); transition:color .15s;
}
.msl-search-close:hover{ color:#fff; }
.msl-search-close svg{ width:14px; height:14px; }

/* שדה-החיפוש */
.msl-search-field{
  position:relative; display:flex; align-items:center; gap:var(--msl-sp-3);
  max-width:620px; margin:0 auto;
  background:#fff; border:1.5px solid rgba(255,255,255,.55); border-radius:var(--msl-r-lg);
  padding:var(--msl-sp-4) var(--msl-sp-5);
  box-shadow:0 0 0 6px rgba(212,160,74,.14), var(--msl-shadow-2);
  transition:box-shadow .2s, border-color .2s;
}
.msl-search-field:focus-within{ border-color:var(--msl-amber); box-shadow:0 0 0 7px rgba(212,160,74,.28), var(--msl-shadow-2); }

/* FIX 2026-07-05: ה-PHP מזריק את ה-SVG בלי מחלקת -ic — בלי כלל-גודל ה-SVG מתנפח
   לרוחב-השדה (viewBox 1:1 → גובה ~380px). כלל-אלמנט מכסה את ה-markup בפועל. */
.msl-search-field > svg{ flex:0 0 auto; width:22px; height:22px; color:var(--msl-amber-deep); }
.msl-search-field input{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--msl-font); font-size:var(--msl-size-sub); font-weight:var(--msl-w-mid);
  color:var(--msl-ink-strong); text-align:right; padding:var(--msl-sp-2) 0;
}
.msl-search-field input::placeholder{ color:var(--msl-muted); font-weight:var(--msl-w-reg); }
.msl-search-field-clear{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border:0; border-radius:var(--msl-r-pill);
  background:var(--msl-cream-2); color:var(--msl-muted); cursor:pointer; transition:background .15s, color .15s;
}
.msl-search-field-clear:hover{ background:var(--msl-amber-soft); color:var(--msl-warn); }
.msl-search-field-clear svg{ width:12px; height:12px; }

.msl-search-hint{ margin:var(--msl-sp-4) 0 0; font-size:var(--msl-size-meta); color:rgba(255,255,255,.6); }

/* ---- 3) SUGGEST — מצב הקלדה --------------------------------------------------------- */
.msl-search-suggest{
  max-width:620px; margin:var(--msl-sp-5) auto 0;
  background:#fff; border-radius:var(--msl-r-lg); box-shadow:var(--msl-shadow-2);
  overflow:hidden; text-align:right; color:var(--msl-ink);
}
.msl-search-group{ padding:var(--msl-sp-4) var(--msl-sp-3) var(--msl-sp-3); border-top:1px solid var(--msl-line-light); }
.msl-search-group:first-child{ border-top:0; }
.msl-search-group-hd{
  display:flex; align-items:center; gap:var(--msl-sp-2);
  padding:0 var(--msl-sp-4) var(--msl-sp-2);
  font-size:11px; font-weight:var(--msl-w-black); letter-spacing:.12em; text-transform:uppercase;
  color:var(--msl-amber-deep);
}
.msl-search-group-hd .n{ color:var(--msl-muted); font-weight:var(--msl-w-bold); letter-spacing:0; }
.msl-search-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--msl-sp-4);
  padding:var(--msl-sp-3) var(--msl-sp-4); border-radius:var(--msl-r-sm);
  text-decoration:none; color:inherit; transition:background .12s;
}
.msl-search-row:hover, .msl-search-row.is-active{ background:var(--msl-cream); }
.msl-search-row-main{ min-width:0; }
.msl-search-row-title{ font-size:var(--msl-size-body); font-weight:var(--msl-w-bold); color:var(--msl-ink-strong); margin:0; line-height:1.3; }
.msl-search-row-dek{ font-size:var(--msl-size-meta); color:var(--msl-muted); margin:2px 0 0; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:42ch; }
.msl-search-row .msl-tag{ flex:0 0 auto; }
.msl-search-mark{ background:var(--msl-amber-soft); color:var(--msl-warn); border-radius:3px; padding:0 2px; font-weight:var(--msl-w-bold); }

.msl-search-all{
  display:flex; align-items:center; justify-content:center; gap:var(--msl-sp-2);
  padding:var(--msl-sp-4); border-top:1px solid var(--msl-line);
  font-family:var(--msl-font); font-size:var(--msl-size-small); font-weight:var(--msl-w-heavy);
  color:var(--msl-ink-strong); text-decoration:none; background:var(--msl-cream);
  transition:background .15s, color .15s;
}
.msl-search-all:hover{ background:var(--msl-cream-2); color:var(--msl-amber-deep); }
.msl-search-all .ar{ color:var(--msl-amber); }

/* ---- 4) EMPTY — אין-תוצאות ---------------------------------------------------------- */
.msl-search-empty{
  max-width:620px; margin:var(--msl-sp-5) auto 0;
  background:#fff; border-radius:var(--msl-r-lg); box-shadow:var(--msl-shadow-2);
  padding:var(--msl-sp-7) var(--msl-sp-6); text-align:center; color:var(--msl-ink);
}
.msl-search-empty-ic{
  width:54px; height:54px; margin:0 auto var(--msl-sp-4);
  display:flex; align-items:center; justify-content:center; border-radius:var(--msl-r-pill);
  background:var(--msl-cream-2); color:var(--msl-amber-deep);
}
.msl-search-empty-ic svg{ width:26px; height:26px; }
.msl-search-empty-title{ font-size:var(--msl-size-h4); font-weight:var(--msl-w-heavy); color:var(--msl-ink-strong); margin:0 0 var(--msl-sp-2); }
.msl-search-empty-title q{ color:var(--msl-amber-deep); font-style:normal; quotes:"«" "»"; }
.msl-search-empty-text{ font-size:var(--msl-size-small); color:var(--msl-muted); margin:0 0 var(--msl-sp-5); }
.msl-search-empty-lbl{ font-size:var(--msl-size-meta); font-weight:var(--msl-w-bold); color:var(--msl-ink-strong); margin:0 0 var(--msl-sp-3); }
.msl-search-empty .msl-chiprow{ margin-top:0; }

/* ---- 5) FILTERBAR — שורת-מסנני-סוג בעמוד-החיפוש ------------------------------------ */
.msl-filterbar{
  background:#fff; border-bottom:1px solid var(--msl-line);
  padding:var(--msl-sp-4) 0; position:sticky; top:0; z-index:30;
}
.msl-filterbar-inner{ display:flex; align-items:center; gap:var(--msl-sp-5); flex-wrap:wrap; }
.msl-filterbar-chips{ display:flex; align-items:center; gap:var(--msl-sp-2); flex-wrap:wrap; }
.msl-filterbar-count{ font-size:var(--msl-size-small); color:var(--msl-muted); margin:var(--msl-sp-3) 0 var(--msl-sp-6); }
.msl-pill{
  display:inline-flex; align-items:center; gap:var(--msl-sp-2);
  padding:var(--msl-sp-2) var(--msl-sp-4);
  border:1.5px solid var(--msl-line); border-radius:var(--msl-r-pill);
  background:#fff; cursor:pointer;
  font-family:var(--msl-font); font-size:var(--msl-size-small); font-weight:var(--msl-w-bold);
  color:var(--msl-ink); transition:.15s;
}
.msl-pill:hover{ border-color:var(--msl-amber); color:var(--msl-amber-deep); }
.msl-pill--active{ background:var(--msl-navy); border-color:var(--msl-navy); color:#fff; }
.msl-pill--active:hover{ background:var(--msl-navy-2); border-color:var(--msl-navy-2); color:#fff; }
.msl-pill-count{ font-size:10px; font-weight:var(--msl-w-black); background:rgba(0,0,0,.1); border-radius:var(--msl-r-pill); padding:0 5px; }
.msl-pill--active .msl-pill-count{ background:rgba(255,255,255,.18); }

/* ---- 6) עמוד-תוצאות —גיבור + כרטיסים ---------------------------------------------- */
.msl-search-hero{
  color:#fff; padding:var(--msl-sp-8) 0 var(--msl-sp-7); text-align:center;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,160,74,.20), transparent 60%),
    linear-gradient(160deg, var(--msl-navy) 0%, var(--msl-navy-2) 60%, var(--msl-navy-3) 100%);
}
.msl-search-hero-inner{ max-width:760px; margin:0 auto; padding:0 var(--msl-sp-6); }
.msl-search-hero .msl-kicker{ justify-content:center; color:var(--msl-amber); margin-bottom:var(--msl-sp-3); }
.msl-search-hero .msl-h1{ color:#fff; margin:0 auto var(--msl-sp-2); max-width:20ch; }
.msl-search-hero .msl-h1 q{ color:var(--msl-amber); font-style:normal; quotes:"«" "»"; }
.msl-search-hero-sub{ color:rgba(255,255,255,.72); font-size:var(--msl-size-lead); margin:0 auto var(--msl-sp-6); }
.msl-search-hero .msl-search-field{ margin-top:0; }

.msl-sresults{ display:flex; flex-direction:column; gap:var(--msl-sp-4); margin:var(--msl-sp-6) 0 0; }
.msl-sresult{
  display:block; background:#fff; border:1px solid var(--msl-line);
  border-radius:var(--msl-r-md); border-inline-start:3px solid transparent;
  padding:var(--msl-sp-5) var(--msl-sp-6);
  text-decoration:none; color:inherit; transition:.18s;
}
.msl-sresult:hover{ transform:translateY(-3px); box-shadow:var(--msl-shadow-2); border-inline-start-color:var(--msl-amber); }
.msl-sresult-top{ display:flex; align-items:center; gap:var(--msl-sp-3); margin-bottom:var(--msl-sp-2); }
.msl-sresult-title{ font-size:var(--msl-size-h4); font-weight:var(--msl-w-heavy); color:var(--msl-ink-strong); margin:0; line-height:1.3; }
.msl-sresult-dek{ font-size:var(--msl-size-small); color:var(--msl-ink); margin:0 0 var(--msl-sp-3); line-height:1.55; }
.msl-sresult-foot{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--msl-line-light); padding-top:var(--msl-sp-3);
  font-size:var(--msl-size-meta); color:var(--msl-muted); font-weight:var(--msl-w-mid);
}
.msl-sresult-go{ color:var(--msl-ink-strong); font-weight:var(--msl-w-heavy); }
.msl-sresult-go::after{ content:" \2190"; color:var(--msl-amber); }

/* מפריד בין מצבי-עמוד במוקאפ (לא נחוץ ב-Live — נשמר עבור תאימות-מבנה) */

/* ---- מובייל ----------------------------------------------------------------------- */
@media (max-width:600px){
  .msl-search-panel{ padding:var(--msl-sp-6) 0 var(--msl-sp-5); }
  .msl-search-close{ inset-block-start:-2px; }
  .msl-search-field{ padding:var(--msl-sp-3) var(--msl-sp-4); }
  .msl-search-field input{ font-size:var(--msl-size-lead); }
  .msl-search-row{ align-items:flex-start; flex-direction:row; }
  .msl-search-row-dek{ white-space:normal; }
  .msl-search-hero{ padding:var(--msl-sp-7) 0 var(--msl-sp-6); }
  .msl-sresult{ padding:var(--msl-sp-4) var(--msl-sp-5); }
  .msl-filterbar-chips{ gap:var(--msl-sp-2); }
}
@media (prefers-reduced-motion: reduce){
  .msl-search-trigger, .msl-search-field, .msl-sresult, .msl-search-row, .msl-search-all{ transition:none; }
}
/* <<< END MSL-SITE-SEARCH */