/* ======================================================================
   fund-loans.css — הלוואה כנגד חיסכון (Loans/LoanAgainstSavings.aspx)
   -----------------------------------------------------------------------------
   נגזר מהמוקאפ .agents/briefs/loans-v2/fund-loans-mockup-v2.html (טוקני mc-* של מחשבון המשכנתא
   ורכיבי fl-*), כשכל כלל תחום תחת .sm-fl-page. קובץ אחד, בלי תלות ב-mortgage-calculator.css.
   ⚠️ .supermarkerArticle div הגלובלי מגדיר text-align:center; מאופס למטה.
   ⚡ ביצועים: קובץ בודד וחוסם רינדור (הכלי הוא הדף, נחוץ בציור הראשון), כ-26KB לא מוקטן (כ-5KB ב-brotli),
   עם ?v= מזמן הכתיבה (LoanAgainstSavings.aspx.cs). לא בבאנדל כדי לא לגעת ב-BundleConfig.cs.
   ============================================================================= */
.sm-fl-page div, .sm-fl-page p, .sm-fl-page li, .sm-fl-page h2, .sm-fl-page h3, .sm-fl-page summary, .sm-fl-page td, .sm-fl-page th { text-align: right; }
.sm-fl-page .fl-tbl td, .sm-fl-page .fl-tbl th, .sm-fl-page .mc-cmp td, .sm-fl-page .mc-cmp th { text-align: center; }
.sm-fl-page .fl-tbl td:first-child, .sm-fl-page .fl-tbl th:first-child, .sm-fl-page .mc-cmp td:first-child, .sm-fl-page .mc-cmp th:first-child { text-align: right; }
.sm-fl-page { direction: rtl; color: #16302a; font-family: "Noto Sans Hebrew", Arial, sans-serif; font-size: 15px; line-height: 1.5; }
.sm-fl-page *, .sm-fl-page *::before, .sm-fl-page *::after { box-sizing: border-box; }
.sm-fl-page label { display: inline; margin: 0; font-weight: inherit; }
/* ---------- כרטיס הליד (11/2026: "צריך להבליט, אחרת לא נייצר לידים") ----------
   ⚠️ תחום ל-#lead.fl-lead__in ולא ל-.sm-fl-page: בדסקטופ leads-bootstrap.js מעביר את #lead למודל (#leadBootstrapModal), מחוץ
      לעטיפת הדף, ושם טוקני --mc-* לא קיימים. לכן צבעים מפורשים כאן. #lead מקבל גם רקע וריפוד מ-modern-article.css
      (.sm-modern-article #lead / #leadBootstrapModal #lead), ומאופסים כאן.
   ⚠️ .topLeft הגלובלי (compareTables.css) הוא float:left ברוחב 300px; כאן הוא רק עוגן ההחזרה מהמודל. */
.sm-fl-page .fl-lead { margin: 0 0 20px; scroll-margin-top: 90px; }
.sm-fl-page .fl-lead .topLeft.fl-lead__home { position: static; float: none; width: auto; height: auto; border: 0; }
#lead.fl-lead__in .kg-v2-yatzranim, #lead.fl-lead__in #kerenDetailsTR2, #lead.fl-lead__in #kerenCurrentTR2, #lead.fl-lead__in #kerenSumTR2, #lead.fl-lead__in .kg-v2-purpose { display: none !important; }
#lead.fl-lead__in { direction: rtl; text-align: right; font-family: "Noto Sans Hebrew", Arial, sans-serif; color: #16302a; background: #eef4f1; border: 2px solid #17765a; border-radius: 12px; padding: 0; overflow: hidden; box-shadow: 0 6px 22px rgba(23,118,90,.16); }
#lead.fl-lead__in *, #lead.fl-lead__in *::before, #lead.fl-lead__in *::after { box-sizing: border-box; }
#lead.fl-lead__in .fl-lead__title { margin: 0; background: #17765a; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.35; padding: 14px 20px; text-align: right; text-wrap: balance; }
#lead.fl-lead__in .fl-lead__grid { display: grid; gap: 18px; grid-template-columns: minmax(0,1fr); padding: 16px 20px 18px; }
@media (min-width: 900px) { .sm-fl-page #lead.fl-lead__in .fl-lead__grid { grid-template-columns: minmax(0,1fr) minmax(320px,420px); align-items: start; gap: 24px; } }
#lead.fl-lead__in ul.fl-lead__pts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
#lead.fl-lead__in ul.fl-lead__pts li { position: relative; margin: 0; padding: 0 30px 0 0; font-family: inherit; font-size: 15.5px; font-weight: 400; line-height: 1.5; color: #263d35; text-align: right; }
#lead.fl-lead__in ul.fl-lead__pts li::before { content: ""; position: absolute; right: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #17765a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.4l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center/14px no-repeat; }
#lead.fl-lead__in ul.fl-lead__pts li b { color: #0f5a47; font-weight: 800; }
#lead.fl-lead__in ul.fl-lead__pts li.fl-lead__pt--key { background: #fff; border: 1px solid #cfe6da; border-radius: 10px; padding: 10px 40px 10px 12px; }
#lead.fl-lead__in ul.fl-lead__pts li.fl-lead__pt--key::before { right: 11px; top: 12px; background-color: #c77700; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 1.5a3.5 3.5 0 0 0-3.5 3.5v2H4a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-.5V5A3.5 3.5 0 0 0 8 1.5zM6 5a2 2 0 1 1 4 0v2H6V5z'/%3E%3C/svg%3E"); background-size: 12px; }
#lead.fl-lead__in .fl-lead__sumlab { margin: 0 0 4px; font-size: 13px; color: #6b7f77; text-align: right; }
#lead.fl-lead__in .fl-lead__sum { margin: 0; font-size: 13.5px; line-height: 1.5; color: #3d524a; background: #f5f9f7; border: 1px dashed #c5d6ce; border-radius: 8px; padding: 8px 12px; text-align: right; }
/* הטופס: כרטיס לבן בתוך הכרטיס הירוק, ושורת האמון צמודה לכפתור (הרשימה של הקונטרול; אייקוני bi לא נטענים בדף, ולכן ✓ ב-CSS) */
#lead.fl-lead__in .fl-lead__form { background: #fff; border: 1px solid #cfe6da; border-radius: 10px; padding: 14px 14px 10px; min-width: 0; }
#lead.fl-lead__in .kg-v2-lede, #leadBootstrapModal #lead.fl-lead__in .leadDescription.kg-v2-lede { margin: 0; padding: 0; }
#lead.fl-lead__in .kg-v2-trust { margin-top: 8px; padding-top: 8px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
#lead.fl-lead__in .kg-v2-trust li { font-size: 13px; font-weight: 600; color: #0f5a47; gap: 4px; }
#lead.fl-lead__in .kg-v2-trust li i { display: none; }
#lead.fl-lead__in .kg-v2-trust li::before { content: "✓"; color: #17765a; font-weight: 800; }
@media (max-width: 599.98px) {
    #lead.fl-lead__in .fl-lead__title { font-size: 18px; padding: 12px 14px; }
    #lead.fl-lead__in .fl-lead__grid { padding: 14px 12px 14px; gap: 14px; }
    #lead.fl-lead__in ul.fl-lead__pts li { font-size: 15px; }
    #lead.fl-lead__in .fl-lead__form { padding: 12px 10px 8px; }
}
/* במודל: עמודה אחת וקומפקטי. נשארות הכותרת, נקודת הנעילה וסיכום הסימולציה; שתי הנקודות האחרות מוסתרות כדי לקצר */
#leadBootstrapModal .lead-modal-dialog:has(#lead.fl-lead__in) { max-width: 520px; width: calc(100% - 2rem); }
#leadBootstrapModal #lead.fl-lead__in { border: 0; border-radius: 0; box-shadow: none; padding: 0; background: #eef4f1; }
#leadBootstrapModal #lead.fl-lead__in .fl-lead__title { font-size: 18px; padding: 14px 18px 14px 60px; }
/* ה-X: לבן על הכותרת הירוקה, כולו בתוך המסגרת (project-lead-form-visual-system.md, גוצ'ה 5: invert תלוי ברקע כהה) */
#leadBootstrapModal:has(#lead.fl-lead__in) .lead-modal-close { top: 8px; left: 8px; right: auto; width: 44px; height: 44px; margin: 0; padding: 0; background-color: transparent; background-size: 16px; border: 0; border-radius: 50%; box-shadow: none; filter: invert(1) grayscale(1) brightness(2); opacity: 1; z-index: 20; }
#leadBootstrapModal:has(#lead.fl-lead__in) .lead-modal-close:hover, #leadBootstrapModal:has(#lead.fl-lead__in) .lead-modal-close:focus-visible { background-color: rgba(0,0,0,.25); border: 0; outline: 2px solid #000; outline-offset: -2px; }
/* כפתור השליחה ברוחב השדות (modern-article.css מגביל את כפתור הליד ל-280px). רק בדף הזה ובמודל שלו */
#lead.fl-lead__in .kg-v2-submit__btn, #leadBootstrapModal #lead.fl-lead__in .kg-v2-submit__btn { max-width: none !important; width: 100% !important; }
#leadBootstrapModal #lead.fl-lead__in .fl-lead__grid { padding: 12px 16px 14px; gap: 12px; }
#leadBootstrapModal #lead.fl-lead__in ul.fl-lead__pts { margin-bottom: 10px; }
#leadBootstrapModal #lead.fl-lead__in ul.fl-lead__pts li:not(.fl-lead__pt--key) { display: none; }
#leadBootstrapModal #lead.fl-lead__in ul.fl-lead__pts li.fl-lead__pt--key { font-size: 14.5px; }
#leadBootstrapModal #lead.fl-lead__in .fl-lead__sum { font-size: 12.5px; }
/* CTA הליד בתוצאות: ירוק מלא, בולט יותר מהמסגרת הבהירה של mc__cta */
.sm-fl-page .sm-mc .mc__cta.fl-cta-lead { background: #17765a; border-color: #17765a; color: #fff; }
.sm-fl-page .sm-mc .mc__cta.fl-cta-lead .mc__cta-txt span { color: #e3f1ea; }
.sm-fl-page .sm-mc .mc__cta.fl-cta-lead .mc-btn--primary { background: #fff; color: #0f5a47; border-color: #fff; min-width: 180px; }
.sm-fl-page .sm-mc .mc__cta.fl-cta-lead .mc-btn--primary:hover { background: #eaf5ef; }
/* ---------- הפס הדביק (#fl-sticky). מחוץ ל-.sm-fl-page, ולכן צבעים מפורשים ---------- */
.fl-sticky { position: fixed; z-index: 1035; left: 0; right: 0; bottom: 0; direction: rtl; font-family: "Noto Sans Hebrew", Arial, sans-serif; transition: transform .25s ease, opacity .25s ease, visibility 0s linear 0s; }
.fl-sticky.is-off { transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s; }
.fl-sticky__a { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); background: #17765a; color: #fff !important; text-decoration: none !important; box-shadow: 0 -4px 16px rgba(0,0,0,.18); }
.fl-sticky__a:hover, .fl-sticky__a:focus-visible { background: #115c46; }
.fl-sticky__a:focus-visible { outline: 3px solid #ffd666; outline-offset: -3px; }
.fl-sticky__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; }
.fl-sticky__ic svg { fill: #fff; width: 22px; height: 22px; }
.fl-sticky__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; text-align: right; }
.fl-sticky__txt b { font-size: 15px; font-weight: 800; }
.fl-sticky__txt span { font-size: 12.5px; color: #dcefe6; }
.fl-sticky__btn { flex: 0 0 auto; background: #fff; color: #0f5a47; font-weight: 800; font-size: 15px; border-radius: 8px; padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; }
body.fl-has-sticky { padding-bottom: 76px; }
@media (min-width: 992px) {
    .fl-sticky { left: 50%; right: auto; bottom: 16px; width: 720px; max-width: calc(100% - 32px); transform: translateX(-50%); }
    .fl-sticky.is-off { transform: translate(-50%, 140%); }
    .fl-sticky__a { border-radius: 12px; padding: 10px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.22); }
    .fl-sticky__txt b { font-size: 16px; }
    .fl-sticky__txt span { font-size: 13.5px; }
    body.fl-has-sticky { padding-bottom: 90px; }
}
@media (max-width: 340px) { .fl-sticky__txt span { display: none; } }
@media (prefers-reduced-motion: reduce) { .fl-sticky, .fl-sticky.is-off { transition: none; } }
.sm-fl-page .fl-src-line { font-size: 13px; color: var(--mc-ink-3); margin: 8px 0 0; }
/* 09/11/2026: ההערה המשפטית מתחת לשורת המקורות, קטנה מעט ממנה (כמו .lcmp-legal בדף ההשוואה) */
.sm-fl-page .fl-legal { font-size: 12.5px; line-height: 1.55; color: var(--mc-ink-3); margin: 6px 0 0; }
/* מוקאפ V2: הלוואה כנגד חיסכון לפי מסלול. טוקנים ורכיבים מ-fund-loans-mockup.html (v1) ומ-mortgage-calculator.css (mc-*). קידומת: fl-* */
.sm-fl-page {
  --mc-ink: #16302a; --mc-ink-2: #3d524a; --mc-ink-3: #6b7f77;
  --mc-line: #d9e6e1; --mc-line-2: #c5d6ce; --mc-wash: #eef4f1; --mc-wash-2: #eaf5ef; --mc-wash-3: #f5f9f7; --mc-surface: #fff;
  --mc-brand: #17765a; --mc-brand-2: #198754; --mc-brand-hover: #157347; --mc-brand-ink: #14654b;
  --mc-navy: #224970; --mc-navy-hover: #1b3b5b; --mc-navy-wash: #eef3f8;
  --mc-amber: #c77700; --mc-amber-bg: #fff9ec; --mc-amber-line: #ffe69c; --mc-amber-ink: #8a5300;
  --mc-red: #b42318; --mc-red-bg: #fef3f2; --mc-red-line: #fecdca;
  --mc-radius: 10px; font-variant-numeric: tabular-nums;
  max-width: 1240px; margin: 0 auto; padding: 0 16px 40px;
}
.sm-fl-page :focus-visible { outline: 3px solid rgba(34,73,112,.35); outline-offset: 2px; }
.sm-fl-page h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; line-height: 1.2; text-wrap: balance; }
.sm-fl-page .mc-intro { color: var(--mc-ink-2); margin: 0 0 6px; max-width: 78ch; font-size: 16px; }
.sm-fl-page .mc-upd { font-size: 13px; color: var(--mc-ink-3); margin: 0 0 16px; display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; }
.sm-fl-page .mc-card { background: var(--mc-surface); border: 1px solid var(--mc-line); border-radius: var(--mc-radius); }
.sm-fl-page .mc-card--pad { padding: 18px 20px; }
.sm-fl-page .mc-h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; line-height: 1.25; }
.sm-fl-page .mc-muted { color: var(--mc-ink-3); }
.sm-fl-page .mc-small { font-size: 13px; }
.sm-fl-page a { color: var(--mc-brand); }
.sm-fl-page p { margin: 0 0 10px; }
.sm-fl-page [hidden] { display: none !important; }
.sm-fl-page .mc-btn { font: inherit; font-weight: 700; font-size: 15px; border-radius: 8px; padding: 11px 18px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; line-height: 1.3; cursor: pointer; border: 1px solid transparent; }
.sm-fl-page .mc-btn--primary { background: var(--mc-brand-2); color: #fff; border-color: var(--mc-brand-2); }
.sm-fl-page .mc-btn--primary:hover { background: var(--mc-brand-hover); }
.sm-fl-page .fl-sim { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--mc-navy); background: var(--mc-navy-wash); border: 1px solid #cddbe9; border-radius: 999px; padding: 2px 10px; }
/* שדות משותפים */
.sm-fl-page .mc__field { margin-bottom: 14px; }
.sm-fl-page .mc__field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sm-fl-page .mc__field label, .sm-fl-page .mc__label { font-size: 14.5px; font-weight: 600; color: var(--mc-ink); }
.sm-fl-page .mc__hint { font-size: 13.5px; color: var(--mc-ink-3); }
.sm-fl-page .mc__hint button, .sm-fl-page .mc__linkbtn { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--mc-brand); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.sm-fl-page .mc__num { display: flex; align-items: center; border: 1px solid var(--mc-line-2); border-radius: 8px; background: #fff; height: 44px; margin-top: 6px; overflow: hidden; }
.sm-fl-page .mc__num:focus-within { border-color: var(--mc-navy); box-shadow: 0 0 0 3px rgba(34,73,112,.12); }
.sm-fl-page .mc__unit { padding: 0 10px; color: var(--mc-ink-3); font-size: 14px; border-inline-end: 1px solid var(--mc-line); height: 100%; display: flex; align-items: center; background: #fbfcfc; white-space: nowrap; }
.sm-fl-page .mc__num input { border: 0; outline: 0; flex: 1 1 0; width: 0; min-width: 0; height: 100%; padding: 0 10px; margin: 0; font: inherit; font-size: 17px; font-weight: 600; color: var(--mc-navy); direction: ltr; text-align: right; background: transparent; }
.sm-fl-page .mc__num input::placeholder { color: #9aaba4; font-weight: 500; font-size: 14px; }
.sm-fl-page .mc__step { border: 0; background: transparent; width: 38px; height: 100%; cursor: pointer; color: var(--mc-ink-2); font-size: 18px; line-height: 1; border-inline-start: 1px solid var(--mc-line); padding: 0; }
.sm-fl-page .mc__step:hover { background: var(--mc-wash); }
.sm-fl-page input[type=range] { width: 100%; margin: 8px 0 2px; accent-color: var(--mc-navy); height: 24px; padding: 0; background: transparent; }
.sm-fl-page .mc__chips, .sm-fl-page .fl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sm-fl-page .mc__chips button, .sm-fl-page .mc__chip, .sm-fl-page .fl-chips button { font: inherit; font-size: 14px; font-weight: 600; color: var(--mc-ink-2); background: #fff; border: 1px solid var(--mc-line-2); border-radius: 999px; padding: 4px 11px; cursor: pointer; line-height: 1.4; min-height: 34px; }
.sm-fl-page .mc__chips button:hover, .sm-fl-page .mc__chips button.is-on, .sm-fl-page .fl-chips button:hover, .sm-fl-page .fl-chips button.is-on { border-color: var(--mc-navy); color: var(--mc-navy); background: var(--mc-navy-wash); }
.sm-fl-page .fl-chips button.is-on { background: var(--mc-navy); color: #fff; }
.sm-fl-page .mc__chips button:disabled { opacity: .45; cursor: not-allowed; }
@media (pointer: coarse) {
.sm-fl-page .mc__chips button, .sm-fl-page .fl-chips button { min-height: 44px; padding: 8px 14px; }
.sm-fl-page .mc__num { height: 48px; }
.sm-fl-page .mc__step { width: 44px; }
}
.sm-fl-page select.mc__select, .sm-fl-page .fl-select { font: inherit; font-size: 14px; font-weight: 600; color: var(--mc-ink); height: 44px; border: 1px solid var(--mc-line-2); border-radius: 8px; background: #fff; padding: 0 10px; width: 100%; margin-top: 6px; max-width: 100%; }
.sm-fl-page .mc__seg { display: flex; border: 1px solid var(--mc-line-2); border-radius: 8px; overflow: hidden; margin-top: 6px; background: #fff; }
.sm-fl-page .mc__seg button { flex: 1; font: inherit; font-size: 14.5px; font-weight: 600; padding: 10px 6px; cursor: pointer; color: var(--mc-ink-2); background: #fff; border: 0; min-height: 42px; }
.sm-fl-page .mc__seg button + button { border-inline-start: 1px solid var(--mc-line-2); }
.sm-fl-page .mc__seg button.is-on { background: var(--mc-navy); color: #fff; }
.sm-fl-page .mc__seg button:disabled { opacity: .5; cursor: not-allowed; }
.sm-fl-page details.mc__adv summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; color: var(--mc-navy); padding: 6px 0; min-height: 40px; border-top: 1px solid var(--mc-line); margin-top: 4px; }
.sm-fl-page details summary::-webkit-details-marker { display: none; }
.sm-fl-page .mc__chev { transition: transform .2s; width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.sm-fl-page details[open] > summary .mc__chev { transform: rotate(180deg); }
.sm-fl-page .mc__switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; }
.sm-fl-page .mc__switch-row .mc__t { font-weight: 600; font-size: 14.5px; display: block; }
.sm-fl-page .mc__switch-row .mc__s { font-size: 13.5px; color: var(--mc-ink-3); display: block; }
.sm-fl-page .mc__switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; margin: 2px 0 0; display: block; }
.sm-fl-page .mc__switch input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.sm-fl-page .mc__switch i { position: absolute; inset: 0; border-radius: 999px; background: #c9d4cf; transition: .2s; }
.sm-fl-page .mc__switch i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: .2s; }
.sm-fl-page .mc__switch input:checked + i { background: var(--mc-brand-2); }
.sm-fl-page .mc__switch input:checked + i::after { transform: translateX(-20px); }
.sm-fl-page .mc-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.sm-fl-page .mc-grid3 .mc__field label { font-size: 14px; }
/* הסטפר */
.sm-fl-page .fl-steps { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
@media (min-width: 640px) {
.sm-fl-page .fl-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* דסקטופ: שלוש עמודות. החברה והמסלול (2 ו-3) באותה עמודה, אחד מעל השני, כי הם צעד אחד בפועל;
   כך אין עמודה ריקה, והגובה מתאזן מול עמודת היתרה (4) שהיא הארוכה. */
@media (min-width: 960px) {
.sm-fl-page .fl-steps { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.15fr); grid-template-areas: "s1 s2 s4" "s1 s3 s4"; grid-template-rows: auto 1fr; }
.sm-fl-page #step1 { grid-area: s1; }
.sm-fl-page #step2 { grid-area: s2; }
.sm-fl-page #step3 { grid-area: s3; }
.sm-fl-page #step4 { grid-area: s4; }
}
.sm-fl-page .fl-step { padding: 14px 16px 12px; border-top: 1px solid var(--mc-line); min-width: 0; }
.sm-fl-page .fl-step:first-child { border-top: 0; }
@media (min-width: 640px) {
.sm-fl-page .fl-step { border-top: 0; border-inline-start: 1px solid var(--mc-line); }
.sm-fl-page .fl-step:nth-child(2n+1) { border-inline-start: 0; }
.sm-fl-page .fl-step:nth-child(n+3) { border-top: 1px solid var(--mc-line); }
}
@media (min-width: 960px) {
.sm-fl-page .fl-step, .sm-fl-page .fl-step:nth-child(n+3) { border-top: 0; border-inline-start: 1px solid var(--mc-line); }
.sm-fl-page .fl-step:first-child, .sm-fl-page .fl-step:nth-child(2n+1):first-child { border-inline-start: 0; }
.sm-fl-page .fl-step:nth-child(3) { border-inline-start: 1px solid var(--mc-line); border-top: 1px dashed var(--mc-line); }
.sm-fl-page #step2 { padding-bottom: 10px; }
}
.sm-fl-page .fl-step .mc__field { margin-bottom: 8px; }
.sm-fl-page .fl-step__t { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; margin: 0 0 4px; }
.sm-fl-page .fl-step__n { width: 24px; height: 24px; border-radius: 50%; background: var(--mc-navy); color: #fff; font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sm-fl-page .fl-step.is-done .fl-step__n { background: var(--mc-brand-2); }
.sm-fl-page .fl-step.is-todo .fl-step__n { background: #fff; color: var(--mc-navy); border: 2px solid var(--mc-navy); }
.sm-fl-page .fl-step .mc__chips button { font-size: 14.5px; padding: 4px 12px; min-height: 36px; }
@media (pointer: coarse) {
.sm-fl-page .fl-step .mc__chips button { min-height: 40px; padding: 6px 12px; }
}
.sm-fl-page .fl-step .mc__select, .sm-fl-page .fl-step .mc__num { margin-top: 4px; }
/* מובייל: שישה סוגי קופה בשתי עמודות שוות במקום שורות בגדלים שונים */
@media (max-width: 639.98px) {
.sm-fl-page #fund-chips { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.sm-fl-page #fund-chips button { width: 100%; }
}
/* חיפוש מסלול */
.sm-fl-page .fl-ac { position: relative; margin-top: 4px; }
.sm-fl-page .fl-ac input { width: 100%; height: 44px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--mc-ink); border: 1px solid var(--mc-line-2); border-radius: 8px; padding: 0 36px 0 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7f77'%3E%3Cpath d='M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 9.5 16a6.5 6.5 0 0 0 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E") no-repeat right 10px center / 18px; }
.sm-fl-page .fl-ac input:focus { outline: 0; border-color: var(--mc-navy); box-shadow: 0 0 0 3px rgba(34,73,112,.12); }
.sm-fl-page .fl-ac input::placeholder { color: #8fa39b; font-weight: 500; }
.sm-fl-page .fl-ac__list { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 20; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--mc-line-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(22,48,42,.14); max-height: 300px; overflow-y: auto; }
.sm-fl-page .fl-ac__list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14.5px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sm-fl-page .fl-ac__list li:hover, .sm-fl-page .fl-ac__list li.is-act { background: var(--mc-navy-wash); }
.sm-fl-page .fl-ac__list li .num { font-size: 13px; color: var(--mc-ink-3); white-space: nowrap; direction: ltr; }
.sm-fl-page .fl-ac__list li .nm { min-width: 0; }
.sm-fl-page .fl-ac__list li .nm mark { background: #fff1b8; color: inherit; padding: 0; }
.sm-fl-page .fl-ac__list li.is-empty { color: var(--mc-ink-3); cursor: default; }
.sm-fl-page .fl-ac__list li.is-empty:hover { background: transparent; }
.sm-fl-page .fl-picked { margin-top: 6px; font-size: 14px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.sm-fl-page .fl-picked b { font-weight: 700; }
.sm-fl-page .fl-picked .num { font-size: 13px; color: var(--mc-ink-3); direction: ltr; }
.sm-fl-page .fl-browse { margin: 8px 0 0; border: 1px solid var(--mc-line); border-radius: 8px; max-height: 240px; overflow-y: auto; background: #fff; }
.sm-fl-page .fl-browse button { display: flex; width: 100%; justify-content: space-between; gap: 8px; font: inherit; font-size: 14px; text-align: right; background: none; border: 0; border-top: 1px solid var(--mc-line); padding: 8px 10px; cursor: pointer; color: var(--mc-ink); }
.sm-fl-page .fl-browse button:first-child { border-top: 0; }
.sm-fl-page .fl-browse button:hover, .sm-fl-page .fl-browse button.is-on { background: var(--mc-navy-wash); }
.sm-fl-page .fl-browse button .num { font-size: 13px; color: var(--mc-ink-3); direction: ltr; white-space: nowrap; }
.sm-fl-page .fl-browse .grp { font-size: 13px; font-weight: 700; color: var(--mc-ink-3); background: var(--mc-wash); padding: 4px 10px; position: sticky; top: 0; }
/* זיהוי */
.sm-fl-page .fl-ident { border-top: 1px solid var(--mc-line); padding: 12px 16px; background: var(--mc-wash-2); display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; font-size: 14.5px; }
.sm-fl-page .fl-ident.is-warn { background: var(--mc-amber-bg); }
.sm-fl-page .fl-ident.is-bad { background: var(--mc-red-bg); }
.sm-fl-page .fl-ident .ic { width: 20px; height: 20px; fill: var(--mc-brand); flex-shrink: 0; }
.sm-fl-page .fl-ident.is-warn .ic { fill: var(--mc-amber); }
.sm-fl-page .fl-ident.is-bad .ic { fill: var(--mc-red); }
.sm-fl-page .fl-ident .tx { flex: 1 1 280px; min-width: 0; }
.sm-fl-page .fl-ident .tx b { font-weight: 800; }
.sm-fl-page .fl-ident .ov { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sm-fl-page .fl-ident .ov .mc__chips { margin: 0; }
.sm-fl-page .fl-ident .ov .mc__chips button { min-height: 32px; padding: 3px 11px; font-size: 14px; }
.sm-fl-page .fl-cat { display: inline-block; font-size: 13px; font-weight: 700; border-radius: 6px; padding: 0 7px; line-height: 1.6; border: 1px solid transparent; vertical-align: middle; }
.sm-fl-page .fl-cat--general { background: var(--mc-wash-2); color: var(--mc-brand-ink); border-color: #cfe6da; }
.sm-fl-page .fl-cat--equity { background: var(--mc-navy-wash); color: var(--mc-navy); border-color: #cddbe9; }
.sm-fl-page .fl-cat--noLoan { background: var(--mc-red-bg); color: var(--mc-red); border-color: var(--mc-red-line); }
.sm-fl-page .fl-cat--unknown { background: var(--mc-amber-bg); color: var(--mc-amber-ink); border-color: var(--mc-amber-line); }
/* המחשבון */
.sm-fl-page .sm-mc { position: relative; margin: 0 0 20px; }
.sm-fl-page .sm-mc .mc__card { background: #fff; border: 1px solid var(--mc-line); border-radius: var(--mc-radius); min-width: 0; overflow: hidden; }
.sm-fl-page .sm-mc .mc__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; align-items: start; }
@media (min-width: 900px) {
.sm-fl-page .sm-mc .mc__grid { grid-template-columns: minmax(280px,320px) minmax(0,1fr); }
}
.sm-fl-page .sm-mc .mc__grid > * { min-width: 0; }
.sm-fl-page .sm-mc .mc__inputs { padding: 16px; background: var(--mc-wash-3); border-top: 1px solid var(--mc-line); }
@media (min-width: 900px) {
.sm-fl-page .sm-mc .mc__inputs { border-inline-start: 1px solid var(--mc-line); border-top: 0; min-height: 100%; }
}
.sm-fl-page .sm-mc .mc__results { padding: 16px 18px; }
/* ⚠️ גיליון גלובלי של האתר מגדיר #results { height: 30px; padding: 30px 0 20px } במובייל, וזה חתך את כל כרטיס התוצאות
   (הסימולציה, המסלולים וה-CTA) לגובה של 50px. ה-id בבורר כדי לגבור עליו. */
.sm-fl-page #results { height: auto; margin: 0; padding: 16px 18px; }
@media (max-width: 599.98px) { .sm-fl-page #results { padding: 14px 14px 16px; } }
.sm-fl-page .sm-mc .mc__h { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--mc-ink-3); text-transform: uppercase; }
.sm-fl-page .sm-mc .mc__hero-lbl { font-size: 14px; color: var(--mc-ink-2); font-weight: 600; margin: 0; }
.sm-fl-page .sm-mc .mc__hero { font-size: clamp(28px, 5vw, 38px); font-weight: 800; color: var(--mc-brand-ink); line-height: 1.1; margin: 2px 0 0; }
.sm-fl-page .sm-mc .mc__hero .n { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.sm-fl-page .sm-mc .mc__hero.is-na { color: var(--mc-ink-3); font-size: clamp(20px, 4vw, 26px); }
.sm-fl-page .sm-mc .mc__hero-after { font-size: 14px; color: var(--mc-ink-3); margin: 4px 0 0; }
.sm-fl-page .sm-mc .mc__insight { background: var(--mc-wash-2); border: 1px solid #cfe6da; border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 10px 0; display: flex; gap: 8px; align-items: flex-start; }
.sm-fl-page .sm-mc .mc__insight > div { min-width: 0; flex: 1 1 auto; }
.sm-fl-page .sm-mc .mc__insight svg { width: 18px; height: 18px; fill: var(--mc-brand); flex-shrink: 0; margin-top: 3px; }
.sm-fl-page .sm-mc .mc__insight--watch { background: var(--mc-amber-bg); border-color: var(--mc-amber-line); }
.sm-fl-page .sm-mc .mc__insight--watch svg { fill: var(--mc-amber); }
.sm-fl-page .sm-mc .mc__insight--bad { background: var(--mc-red-bg); border-color: var(--mc-red-line); }
.sm-fl-page .sm-mc .mc__insight--bad svg { fill: var(--mc-red); }
.sm-fl-page .sm-mc .mc__insight--plain { background: #fff; border-color: var(--mc-line); }
.sm-fl-page .sm-mc .mc__insight--plain svg { fill: var(--mc-ink-3); }
.sm-fl-page .sm-mc .mc__sub-title { margin: 18px 0 6px; font-size: 16px; font-weight: 700; }
.sm-fl-page .mc-scroller, .sm-fl-page .fl-scroller { overflow-x: auto; border: 1px solid var(--mc-line); border-radius: 8px; -webkit-overflow-scrolling: touch; max-width: 100%; }
.sm-fl-page table.mc-cmp, .sm-fl-page table.fl-tbl { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0; }
.sm-fl-page .mc-cmp th, .sm-fl-page .mc-cmp td, .sm-fl-page .fl-tbl th, .sm-fl-page .fl-tbl td { padding: 8px 10px; border-top: 1px solid var(--mc-line); text-align: center; white-space: nowrap; }
.sm-fl-page .mc-cmp th, .sm-fl-page .fl-tbl th { background: var(--mc-wash); color: var(--mc-ink-2); font-weight: 700; font-size: 14px; border-top: 0; }
.sm-fl-page .mc-cmp td:first-child, .sm-fl-page .mc-cmp th:first-child, .sm-fl-page .fl-tbl td:first-child, .sm-fl-page .fl-tbl th:first-child { text-align: right; }
.sm-fl-page .mc-cmp tr.is-me td, .sm-fl-page .fl-tbl tr.is-me td { background: var(--mc-navy-wash); font-weight: 700; }
.sm-fl-page .mc-cmp td.is-best, .sm-fl-page .fl-tbl td.is-best { color: var(--mc-brand-ink); font-weight: 800; background: var(--mc-wash-2); }
.sm-fl-page .mc-cmp td.is-worse { color: var(--mc-red); }
.sm-fl-page .fl-tag { display: inline-block; font-size: 13px; font-weight: 700; background: var(--mc-brand-2); color: #fff; border-radius: 999px; padding: 1px 7px; margin-inline-start: 6px; vertical-align: middle; }
.sm-fl-page .fl-tag--navy { background: var(--mc-navy-wash); color: var(--mc-navy); }
.sm-fl-page .fl-tag--warn { background: var(--mc-amber-bg); color: var(--mc-amber-ink); border: 1px solid var(--mc-amber-line); }
.sm-fl-page .fl-na { color: var(--mc-ink-3); font-weight: 500; }
.sm-fl-page .fl-src { display: inline-block; font-size: 13px; font-weight: 600; color: var(--mc-ink-3); border: 1px solid var(--mc-line-2); border-radius: 999px; padding: 0 7px; line-height: 1.6; white-space: nowrap; vertical-align: middle; }
.sm-fl-page .fl-src--official { color: var(--mc-brand-ink); border-color: #b9dcc9; background: #f3faf6; }
.sm-fl-page .fl-src--outline { color: var(--mc-amber-ink); border-color: var(--mc-amber-line); background: var(--mc-amber-bg); }
/* כרטיסי מסלול */
.sm-fl-page .fl-tracks { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) {
.sm-fl-page .fl-tracks { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
.sm-fl-page .fl-track { border: 1px solid var(--mc-line); border-radius: 8px; padding: 10px 12px; background: #fff; min-width: 0; position: relative; }
.sm-fl-page .fl-track.is-best { border-color: var(--mc-brand-2); box-shadow: 0 0 0 1px var(--mc-brand-2); }
.sm-fl-page .fl-track .n { font-size: 14px; font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sm-fl-page .fl-track .r { font-size: 23px; font-weight: 800; color: var(--mc-navy); line-height: 1.1; margin: 4px 0 0; }
.sm-fl-page .fl-track .r small { font-size: 13px; font-weight: 600; color: var(--mc-ink-3); }
.sm-fl-page .fl-track .pay { font-size: 20px; font-weight: 800; color: var(--mc-brand-ink); margin-top: 6px; }
.sm-fl-page .fl-track .pay .n { display: inline; direction: ltr; unicode-bidi: isolate; font-size: inherit; }
.sm-fl-page .fl-track .pay small { font-size: 13px; font-weight: 600; color: var(--mc-ink-2); }
.sm-fl-page .fl-track .d { font-size: 14px; color: var(--mc-ink-3); margin-top: 4px; line-height: 1.4; }
.sm-fl-page .fl-track .d b { color: var(--mc-ink-2); font-weight: 600; }
.sm-fl-page .fl-track .srcline { margin-top: 6px; border-top: 1px dashed var(--mc-line); padding-top: 5px; font-size: 13px; color: var(--mc-ink-3); }
.sm-fl-page .fl-pill { display: inline-block; font-size: 13.5px; font-weight: 600; border-radius: 6px; padding: 1px 7px; line-height: 1.5; margin: 1px 0; white-space: nowrap; border: 1px solid transparent; }
.sm-fl-page .fl-pill--p { background: var(--mc-navy-wash); color: var(--mc-navy); border-color: #cddbe9; }
.sm-fl-page .fl-pill--c { background: var(--mc-amber-bg); color: var(--mc-amber-ink); border-color: var(--mc-amber-line); }
.sm-fl-page .fl-pill--f { background: var(--mc-wash-2); color: var(--mc-brand-ink); border-color: #cfe6da; }
.sm-fl-page .fl-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.sm-fl-page .fl-pct { font-size: 18px; font-weight: 800; color: var(--mc-ink); }
/* שימו לב */
.sm-fl-page .fl-notice { margin-top: 16px; border: 1px solid var(--mc-amber-line); background: var(--mc-amber-bg); border-radius: 10px; padding: 12px 14px; }
.sm-fl-page .fl-notice h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 800; color: var(--mc-amber-ink); }
.sm-fl-page .fl-notice ul { margin: 0; padding-inline-start: 18px; font-size: 14px; }
.sm-fl-page .fl-notice li { margin: 3px 0; }
/* CTA */
.sm-fl-page .sm-mc .mc__cta { margin-top: 18px; background: linear-gradient(180deg, #f3f9f6, #eaf5ef); border: 1px solid #cfe6da; border-radius: 10px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sm-fl-page .sm-mc .mc__cta-txt { min-width: 0; flex: 1 1 280px; }
.sm-fl-page .sm-mc .mc__cta-txt b { font-size: 17px; display: block; }
.sm-fl-page .sm-mc .mc__cta-txt span { font-size: 14px; color: var(--mc-ink-2); }
.sm-fl-page .sm-mc .mc__cta-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sm-fl-page .sm-mc .mc__cta-chips .mc__chip { background: #fff; cursor: default; font-size: 13px; min-height: 30px; padding: 3px 10px; }
.sm-fl-page .sm-mc .mc__cta-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 767.98px) {
.sm-fl-page .sm-mc .mc__cta-r { width: 100%; align-items: center; }
.sm-fl-page .sm-mc .mc__cta-r .mc-btn { width: 100%; }
}
/* placeholder לתוצאות */
.sm-fl-page .fl-empty { border: 1px dashed var(--mc-line-2); border-radius: 10px; padding: 18px 16px; background: var(--mc-wash-3); }
.sm-fl-page .fl-empty b { display: block; font-size: 16px; margin-bottom: 4px; }
.sm-fl-page .fl-empty p { font-size: 14px; color: var(--mc-ink-2); margin: 0 0 6px; }
/* סעיפים */
.sm-fl-page .fl-sect { margin: 0 0 20px; }
.sm-fl-page .fl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sm-fl-page .fl-head .mc-h3 { margin: 0; }
.sm-fl-page .fl-filters { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px 14px; padding: 12px 14px; background: var(--mc-wash-3); border: 1px solid var(--mc-line); border-radius: 8px; margin-bottom: 12px; }
@media (min-width: 720px) {
.sm-fl-page .fl-filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.sm-fl-page .fl-filters .span2 { grid-column: 1 / -1; }
}
.sm-fl-page .fl-filters > * { min-width: 0; }
.sm-fl-page .fl-filters .mc__label { font-size: 14px; font-weight: 700; display: block; }
.sm-fl-page .fl-filters .fl-select { margin-top: 4px; height: 40px; }
.sm-fl-page .fl-filters .fl-chips button { min-height: 34px; padding: 4px 12px; font-size: 14.5px; }
.sm-fl-page .fl-seg { display: inline-flex; border: 1px solid var(--mc-line-2); border-radius: 8px; overflow: hidden; margin-top: 4px; background: #fff; }
.sm-fl-page .fl-seg button { font: inherit; font-size: 14.5px; font-weight: 600; padding: 8px 14px; cursor: pointer; color: var(--mc-ink-2); background: #fff; border: 0; min-height: 40px; }
.sm-fl-page .fl-seg button + button { border-inline-start: 1px solid var(--mc-line-2); }
.sm-fl-page .fl-seg button.is-on { background: var(--mc-navy); color: #fff; }
.sm-fl-page .fl-tbl td { white-space: normal; vertical-align: top; }
.sm-fl-page .fl-tbl td.nw { white-space: nowrap; }
.sm-fl-page .fl-tbl td .raw { font-size: 13.5px; color: var(--mc-ink-3); display: block; max-width: 34ch; line-height: 1.35; }
.sm-fl-page .fl-tbl tr.is-na td { color: var(--mc-ink-3); }
.sm-fl-page .fl-count { font-size: 13px; color: var(--mc-ink-3); margin: 8px 0 0; }
@media (max-width: 899.98px) {
.sm-fl-page .fl-full { border: 0; border-radius: 0; overflow: visible; }
.sm-fl-page table.fl-full, .sm-fl-page .fl-full tbody, .sm-fl-page .fl-full tr, .sm-fl-page .fl-full td { display: block; }
.sm-fl-page .fl-full thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sm-fl-page .fl-full tbody tr { background: #fff; border: 1px solid var(--mc-line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 12px; }
.sm-fl-page .fl-full tbody tr.is-me { background: var(--mc-navy-wash); border-color: #cddbe9; }
.sm-fl-page .fl-full td { border: 0; padding: 0; text-align: right !important; white-space: normal; }
.sm-fl-page .fl-full td[data-k]::before { content: attr(data-k); display: block; font-size: 13px; color: var(--mc-ink-3); line-height: 1.3; }
.sm-fl-page .fl-full td.c-prod { grid-column: 1 / -1; font-size: 16px; font-weight: 800; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sm-fl-page .fl-full td.c-prod::before { display: none; }
.sm-fl-page .fl-full td.c-wide { grid-column: 1 / -1; }
.sm-fl-page .fl-full td .raw { max-width: none; }
.sm-fl-page .fl-full tr.is-me td { background: transparent; }
}
/* תוכן */
.sm-fl-page .mc-content { display: grid; gap: 18px; }
.sm-fl-page .mc-content p, .sm-fl-page .mc-content li { line-height: 1.6; }
.sm-fl-page .mc-content p { max-width: 78ch; }
.sm-fl-page .mc-ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.sm-fl-page .mc-ex div { border: 1px solid var(--mc-line); border-radius: 8px; padding: 12px 14px; background: var(--mc-wash-3); }
.sm-fl-page .mc-ex b { display: block; margin-bottom: 4px; }
.sm-fl-page .mc-ex p { margin: 0; font-size: 14px; }
.sm-fl-page details.mc-faq { border-top: 1px solid var(--mc-line); }
.sm-fl-page details.mc-faq:last-of-type { border-bottom: 1px solid var(--mc-line); }
.sm-fl-page details.mc-faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; }
.sm-fl-page details.mc-faq summary::after { content: "+"; font-size: 20px; color: var(--mc-navy); font-weight: 400; flex-shrink: 0; }
.sm-fl-page details.mc-faq[open] summary::after { content: "\2212"; }
.sm-fl-page details.mc-faq p { margin: 0 0 12px; color: var(--mc-ink-2); }
.sm-fl-page .mc-bridge { border: 1px dashed var(--mc-line-2); border-radius: 10px; padding: 12px 14px; background: #fff; }
.sm-fl-page .mc-bridge p { margin: 0 0 6px; font-size: 14px; color: var(--mc-ink-2); }
.sm-fl-page .mc-bridge p b { color: var(--mc-ink); display: block; font-size: 15px; }
.sm-fl-page .mc-bridge .fl-chips a { font-size: 14px; font-weight: 600; color: var(--mc-navy); background: #fff; border: 1px solid var(--mc-line-2); border-radius: 999px; padding: 6px 12px; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
@media (max-width: 767px) {
.sm-fl-page input[type=text], .sm-fl-page select { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
.sm-fl-page * { transition: none !important; }
}

/* רוחב מלא: ה-CSS הישן של האתר נותן ל-.mainIndex float:right ו-width:665px (פריסת מאמר + סיידבר).
   בדף הזה אין סיידבר, ולכן העמודה נמתחת לכל הרוחב (אותו דפוס כמו gemel-modern.css, gemel-compare-main). */
.sm-fl-page > .mainIndex { float: none !important; width: 100% !important; max-width: none !important; flex: 1 1 auto; min-width: 0; border-left: none !important; padding-left: 0; padding-right: 0; }

/* טאבים בעיצוב ובהתנהגות של טאבי המוצרים בהשוואת קופות הגמל (.kg-fam ב-kupat-gemel.css):
   קישורים בין דפים, הטאב הפעיל הוא span עם קו תחתון ירוק, ובמובייל גלילה אופקית בלי התווית. */
.sm-fl-page .lcmp-tabs { display: flex; gap: 2px; align-items: flex-end; flex-wrap: nowrap; border-bottom: 2px solid #dce8e3; padding: 0 4px; margin: 0 0 14px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sm-fl-page .lcmp-tabs .lcmp-tabs__lab { align-self: center; padding: 0 6px 6px 10px; font-size: 13px; font-weight: 400; color: #5a6e66; white-space: nowrap; }
.sm-fl-page .lcmp-tabs a, .sm-fl-page .lcmp-tabs .on { position: relative; border: 0; background: none; border-radius: 10px 10px 0 0; padding: 9px 14px 11px; font-size: 15px; font-weight: 500; color: #263d35; white-space: nowrap; text-decoration: none; transition: background .12s; display: inline-block; }
.sm-fl-page .lcmp-tabs a:hover { background: #e8efec; color: #263d35; text-decoration: none; }
.sm-fl-page .lcmp-tabs a:focus-visible { outline: 2px solid #17765a; outline-offset: -2px; }
.sm-fl-page .lcmp-tabs .on { background: #fff; color: #0f5a47; font-weight: 800; }
.sm-fl-page .lcmp-tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: #17765a; border-radius: 3px 3px 0 0; }
@media (max-width: 767px) { .sm-fl-page .lcmp-tabs a, .sm-fl-page .lcmp-tabs .on { padding: 9px 12px 11px; font-size: 14px; } .sm-fl-page .lcmp-tabs .lcmp-tabs__lab { display: none; } }
@media (prefers-reduced-motion: reduce) { .sm-fl-page .lcmp-tabs a { transition: none; } }

/* חיפוש לפי שם גם בפנסיה, ביטוח מנהלים ופוליסה: הבורר הפשוט מתחת לחיפוש (גיבוי). קישור לדף ההלוואות באתר היצרן */
.sm-fl-page #trk-wrap:not([hidden]) + #simple-wrap { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mc-line-2); }
.sm-fl-page .fl-prodlink { display: inline-block; font-size: 13.5px; font-weight: 600; margin-top: 4px; white-space: nowrap; }
.sm-fl-page .fl-tbl td .fl-prodlink { display: block; }

/* לוגו היצרן בטבלאות ובתצוגה המקדימה (YM_FundLoanProducer.LogoUrl, Database/FundLoans/06_producer_logo.sql).
   בלי לוגו: ראשי תיבות בעיגול בעיצוב אחיד (כמו lcmp-logo--txt בדף ההשוואה ו-kg-logo בדפי הגמל). */
.sm-fl-page .fl-co { display: inline-flex; align-items: center; gap: 8px; min-width: 0; vertical-align: middle; }
.sm-fl-page .fl-co__n { font-weight: 700; color: var(--mc-ink); }
.sm-fl-page .fl-co .fl-tag { margin-inline-start: 2px; }
.sm-fl-page .fl-logo { width: 64px; height: 32px; flex: 0 0 64px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mc-line); border-radius: 6px; background: #fff; overflow: hidden; }
.sm-fl-page .fl-logo img { max-width: 56px; max-height: 26px; width: auto; height: auto; object-fit: contain; display: block; }
.sm-fl-page .fl-logo--txt { width: 32px; flex-basis: 32px; border-radius: 50%; font-size: 13px; font-weight: 800; color: var(--mc-navy); background: var(--mc-navy-wash); border-color: #cddbe9; }
.sm-fl-page .fl-tbl td, .sm-fl-page .fl-tbl td.nw { vertical-align: middle; }

/* כל תנאי ההלוואות: עמודת המקור צרה (תווית + קישור + "הערות ותנאים"), וההערות בשורה מלאה שנפתחת מתחת */
.sm-fl-page .fl-full td.c-src { white-space: normal; min-width: 150px; }
.sm-fl-page .fl-full td.c-src .fl-prodlink { display: block; margin-top: 4px; }
.sm-fl-page .fl-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--mc-navy); background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline; min-height: 28px; }
.sm-fl-page .fl-more::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.sm-fl-page .fl-more[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
@media (pointer: coarse) { .sm-fl-page .fl-more { min-height: 44px; } }
.sm-fl-page .fl-full tr.fl-note td { border-top: 0; background: var(--mc-wash-3); text-align: right; white-space: normal; padding: 4px 14px 12px; }
.sm-fl-page .fl-note ul { margin: 0; padding-inline-start: 18px; font-size: 14px; color: var(--mc-ink-2); line-height: 1.5; max-width: 110ch; }
.sm-fl-page .fl-note li { margin: 2px 0; text-align: right; }
@media (max-width: 899.98px) {
.sm-fl-page .fl-full tbody tr.fl-note { display: block; margin: -11px 0 10px; border-top: 0; border-radius: 0 0 10px 10px; padding: 0 14px 12px; background: #fff; }
.sm-fl-page .fl-full tbody tr.fl-note[hidden] { display: none; }
.sm-fl-page .fl-full tbody tr.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.sm-fl-page .fl-full tr.fl-note td { display: block; background: transparent; padding: 8px 0 0; border-top: 1px dashed var(--mc-line); }
.sm-fl-page .fl-full td.c-src .fl-prodlink { display: inline-block; margin: 0 0 0 10px; }
.sm-fl-page .fl-full td.c-src { min-width: 0; }
/* שתי הטבלאות ככרטיסים: בלי המסגרת של אזור הגלילה מסביב, ובלי גלילה אופקית (#others הייתה ברוחב 988px בתוך 300px) */
.sm-fl-page .fl-scroller--cards { border: 0; border-radius: 0; overflow: visible; background: transparent !important; }
.sm-fl-page .fl-full td.c-empty { display: none; }
.sm-fl-page .fl-full .fl-pills { justify-content: flex-start; }
.sm-fl-page .fl-full .fl-pill { white-space: normal; }
}
/* הטבלאות הקטנות בתוצאות (תקופות, מול הבנק): במובייל שוברות שורה במקום גלילה הצידה */
@media (max-width: 599.98px) {
.sm-fl-page .mc-cmp th, .sm-fl-page .mc-cmp td { white-space: normal; padding: 8px 4px; }
.sm-fl-page .mc-cmp th:first-child, .sm-fl-page .mc-cmp td:first-child { padding-right: 8px; }
.sm-fl-page table.mc-cmp { font-size: 13.5px; }
.sm-fl-page .mc-cmp th { font-size: 13px; }
.sm-fl-page .mc-cmp .fl-pill { white-space: normal; font-size: 13px; padding: 1px 5px; }
}

/* כרטיס התוצאות לפני בחירה: הודעה קצרה ומתחתיה שלוש החברות הזולות (במקום תיבה מקווקוות ושטח ריק) */
.sm-fl-page .fl-empty--sm { padding: 12px 14px; }
.sm-fl-page .fl-empty--sm p:last-child { margin-bottom: 0; }
.sm-fl-page .fl-prev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sm-fl-page .fl-prev__b { width: 100%; display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); align-items: center; gap: 8px 14px; font: inherit; color: inherit; text-align: right; background: #fff; border: 1px solid var(--mc-line); border-radius: 8px; padding: 10px 12px; cursor: pointer; min-height: 56px; }
.sm-fl-page .fl-prev__b:hover, .sm-fl-page .fl-prev__b:focus-visible { border-color: var(--mc-navy); background: var(--mc-navy-wash); }
.sm-fl-page .fl-prev__b.is-me { border-color: #cddbe9; background: var(--mc-navy-wash); }
.sm-fl-page .fl-prev__v { display: flex; flex-direction: column; min-width: 0; text-align: right; }
.sm-fl-page .fl-prev__v small { font-size: 13px; color: var(--mc-ink-3); line-height: 1.3; }
.sm-fl-page .fl-prev__v b { font-size: 16px; font-weight: 800; color: var(--mc-navy); white-space: nowrap; }
@media (max-width: 599.98px) {
.sm-fl-page .fl-prev__b { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sm-fl-page .fl-prev__b .fl-co { grid-column: 1 / -1; }
.sm-fl-page .fl-prev__v b { font-size: 15px; }
}

/* ===== 07/11/2026: עיצוב A של סרגל הסינון בדף ההשוואה (compare-loans.css, .lcmp-bar), גם כאן (רונן) =====
   כרטיס בחירת הקופה וחלונית "תנאי ההלוואה": הירוק הבהיר של הליד, כותרת בירוק של האתר, צ'יפים לבנים, הנבחר ירוק מלא. */
.sm-fl-page #fl-pick .mc__card { background: #eef4f1; border: 1px solid #d9e6e1; border-radius: 12px; }
.sm-fl-page .fl-pick__title { margin: 0; background: #17765a; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.3; padding: 11px 20px; text-align: right; }
.sm-fl-page #fl-pick .fl-step { border-color: #d9e6e1; }
.sm-fl-page #fl-pick .fl-step__t { color: #0f5a47; font-weight: 800; }
.sm-fl-page #fl-pick .fl-step__n { background: #17765a; }
.sm-fl-page #fl-pick .fl-step.is-todo .fl-step__n { background: #fff; color: #17765a; border-color: #17765a; }
.sm-fl-page #fl-pick .fl-step.is-done .fl-step__n { background: #0f5a47; }
.sm-fl-page #fl-pick .mc__chips button, .sm-fl-page .mc__inputs .mc__chips button { background: #fff; border-color: #cfe0d8; color: #263d35; }
.sm-fl-page #fl-pick .mc__chips button.is-on, .sm-fl-page .mc__inputs .mc__chips button.is-on { background: #17765a; border-color: #17765a; color: #fff; font-weight: 700; }
.sm-fl-page #fl-pick .mc__chips button:hover:not(.is-on), .sm-fl-page .mc__inputs .mc__chips button:hover:not(.is-on) { border-color: #17765a; }
.sm-fl-page .mc__inputs .mc__seg button.is-on { background: #17765a; color: #fff; }
.sm-fl-page #fl-pick .mc__num, .sm-fl-page #fl-pick .mc__select, .sm-fl-page #fl-pick input[type=search], .sm-fl-page #fl-pick input[type=text] { background-color: #fff; border-color: #bcd3c8; }
.sm-fl-page #fl-pick .mc__field-row label { color: #0f5a47; }
.sm-fl-page #fl-pick .fl-ident { background: #fff; border-top-color: #d9e6e1; }
.sm-fl-page .mc__inputs { background: #eef4f1; }
.sm-fl-page .mc__inputs .mc__h { color: #0f5a47; font-weight: 800; }
.sm-fl-page .mc__inputs .mc__num, .sm-fl-page .mc__inputs .mc__select { background-color: #fff; border-color: #bcd3c8; }
@media (max-width: 991.98px) { .sm-fl-page .fl-pick__title { padding: 10px 14px; font-size: 17px; } }