/*
 * bills-compare.css: דפי ההשוואה של "חשבונות הבית" (קטגוריה / נחיתה / ספק / חבילה / זו-מול-זו).
 * פורט של ה-CSS מהמוקאפ המאושר (cellular-b-fit-first.html): אותם טוקני --kg-* מ-bills.css, mobile-first, RTL,
 * gutter 16px (מגיע מ-#main ב-bills.css), tap >= 44px. כל כלל תחום ל-.bl-cmp-page (opt-in, לקח 4).
 * הסרגל הדביק: top שלם (לקח 59), רקע אטום בלי backdrop-filter (56), spacer ב-JS (52), top לא משנה זרימה (60).
 *   דסקטופ: אין הדר קבוע ⇒ top:0. מובייל (<992px): #searchBox קבוע 68px ⇒ top: 60px (68 - 8px כרית) + safe-area.
 * "התאימו לי": רצועה קומפקטית (A) כברירת מחדל; מ-992px הירו (B) עם תשובה מיידית (.bl-fit__result).
 */
.bl-cmp-page {
    --bl-page: #f7faf8;
    --bl-navy: #224970;
    --bl-amber: #c77700;
    --bl-red-bg: #fef3f2;
    --bl-fbar-top: 0px;
    --bl-fbar-h: 0px;
    --bl-radius: 14px;
    font-size: 16px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    padding-bottom: 92px; /* הפס הדביק במובייל */
}

@media (min-width: 992px) {
    .bl-cmp-page { padding-bottom: 40px; }
    body.bl-tray-on .bl-cmp-page { padding-bottom: 96px; }
}

@media (max-width: 991.98px) {
    .bl-cmp-page { --bl-fbar-top: calc(60px + env(safe-area-inset-top, 0px)); }
}

.bl-cmp-page *, .bl-cmp-page *::before, .bl-cmp-page *::after { box-sizing: border-box; }
/* :where מוריד את הספציפיות ל-(0,1,0): הכלל הישן ".bl-cmp-page a" (0,1,1) גבר על .bl-btn--primary / .bl-mbar__cmp (0,1,0)
   וצבע כפתורי ה-<a> הירוקים היה ירוק-על-ירוק עד ה-hover (QA רונן 2026-09-18) */
.bl-cmp-page :where(a) { color: var(--kg-brand); }
.bl-cmp-page :focus-visible { outline: 3px solid rgba(23, 118, 90, .35); outline-offset: 2px; }
.bl-cmp-page button, .bl-cmp-page input, .bl-cmp-page select { font-family: inherit; }
.bl-cmp-page h1, .bl-cmp-page h2, .bl-cmp-page h3 { line-height: 1.25; }
.bl-cmp-page [id] { scroll-margin-top: calc(var(--bl-fbar-top) + var(--bl-fbar-h) + 12px); }
/* לוגואים של ספקים (ממצא רונן 3, 2026-09-19): תיבה קבועה לכל מיקום, object-fit: contain, רקע לבן; הלוגואים הרשמיים
   (svg/webp/png לפי slug, LogoResolver) נכנסים לאותה תיבה בלי לשנות פריסה. הגדלים: פיל 56x24 (44x20 במובייל; ממצא רונן א'
   2026-09-19: 40x20 היה קטן מדי לסימני מסחר אמיתיים) · שורה 120x60 (96x48 במובייל) · טבלה 80x40 · גריד 140x70 · הירו 160x80 */
.bl-plogo { display: block; object-fit: contain; background: #fff; flex: 0 0 auto; }
.bl-plogo--pill { width: 56px; height: 24px; border-radius: 4px; }
@media (max-width: 767.98px) { .bl-plogo--pill { width: 44px; height: 20px; } }
.bl-plogo--table { width: 80px; height: 40px; border: 1px solid var(--kg-line); border-radius: 8px; padding: 2px; margin: 0 0 6px; }
.bl-plogo--grid { width: 140px; height: 70px; border: 1px solid var(--kg-line); border-radius: 10px; padding: 4px; }
.bl-plogo--hero { width: 160px; height: 80px; border: 1px solid var(--kg-line); border-radius: 14px; padding: 6px; }
.bl-num { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.bl-cmp-page svg.kg-i { width: 1em; height: 1em; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* --- רצועת הכותרת ------------------------------------------------------------- */
.bl-cmp-page .bl-hero { position: relative; padding: 6px 0 4px; }
.bl-h1 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; margin: 8px 0 6px; letter-spacing: -.01em; text-wrap: balance; color: var(--kg-ink); }
.bl-h1__prov { display: block; font-size: 15px; font-weight: 500; color: var(--kg-muted); margin-top: 4px; }
.bl-value { font-size: 17px; line-height: 1.65; color: var(--kg-muted); margin: 0 0 10px; max-width: 88ch; }
.bl-value b { color: var(--kg-ink); font-weight: 600; }
.bl-cmp-page .bl-facts { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; padding: 0; margin: 0 0 12px; font-size: 14.5px; color: var(--kg-muted); }
.bl-cmp-page .bl-facts li { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--kg-line); border-radius: 999px; padding: 5px 11px; min-height: 32px; }
.bl-cmp-page .bl-facts b { color: var(--kg-ink); }
/* ⚠️ ממצא רונן 21/09/2026: ה-H1 נמתח ל-1368px והפיסקה שמתחתיו נעצרה ב-696px, כלומר 672px של חלל ריק
   משמאל. הרחבה לכל הרוחב אינה פתרון (שורה של 1368px בעברית היא כ-160 תווים), ולכן החלל מנוצל:
   מגדרסת העובדות עוברת לעמודה שלה משמאל לפיסקה, באותו רוחב של סיידבר המאמרים. מתחת ל-1200px
   הכל חוזר לזרימה אנכית רגילה. */
@media (min-width: 1200px) {
    .bl-cmp-page .bl-hero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26%, 360px); column-gap: 32px; align-items: start; }
    .bl-cmp-page .bl-hero .bl-h1 { grid-column: 1 / -1; }
    .bl-cmp-page .bl-hero .bl-value { grid-column: 1; max-width: none; }
    .bl-cmp-page .bl-hero .bl-facts { grid-column: 2; flex-direction: column; align-items: stretch; gap: 6px; margin: 4px 0 12px; }
    .bl-cmp-page .bl-hero .bl-facts li { justify-content: center; }
}
.bl-cmp-page .bl-facts li.is-upd { background: transparent; border-color: transparent; padding-inline: 0; }

/* --- "התאימו לי": רצועה (מובייל) / הירו (דסקטופ) --------------------------------- */
.bl-fit { position: relative; background: #fff; border: 1.5px solid var(--kg-line); border-radius: var(--bl-radius); padding: 12px 14px; margin: 0 0 12px; box-shadow: 0 2px 10px rgba(15, 90, 71, .06); }
.bl-fit__h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15.5px; font-weight: 800; flex-wrap: wrap; }
.bl-fit__h small { font-weight: 400; color: var(--kg-muted); font-size: 13px; }
.bl-fit__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.bl-q__l { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; margin: 0 0 6px; }
.bl-q__l .bl-q__n { width: 22px; height: 22px; border-radius: 50%; background: var(--kg-brand); color: #fff; font-size: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.bl-q__hint { font-size: 12.5px; color: var(--kg-muted); margin: 4px 0 0; }
.bl-seg { display: inline-flex; border: 1.5px solid var(--kg-line); border-radius: 999px; background: #fff; overflow: hidden; max-width: 100%; }
.bl-seg button { border: 0; background: transparent; min-width: 44px; min-height: 44px; font-weight: 700; font-size: 14.5px; color: var(--kg-ink); cursor: pointer; padding: 0 12px; }
.bl-seg button + button { border-inline-start: 1px solid var(--kg-line); }
.bl-seg button.on { background: var(--kg-brand); color: #fff; }
.bl-seg--sm button { font-size: 13px; padding: 0 10px; }
.bl-range { display: flex; align-items: center; gap: 10px; }
.bl-range input[type=range] { flex: 1; accent-color: var(--kg-brand); height: 44px; margin: 0; min-width: 0; background: transparent; }
.bl-range output { min-width: 74px; font-weight: 800; font-size: 16px; text-align: center; background: var(--kg-soft); border-radius: 8px; padding: 9px 6px; white-space: nowrap; }
.bl-chip { font-size: 12.5px; font-weight: 600; color: var(--kg-brand-dark); background: #fff; border: 1.5px solid var(--kg-line); border-radius: 999px; padding: 0 12px; min-height: 44px; cursor: pointer; }
.bl-chip:hover, .bl-chip.on { border-color: var(--kg-brand); background: var(--kg-soft); }
.bl-checks { display: flex; gap: 6px; flex-wrap: wrap; }
.bl-checks label { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--kg-line); border-radius: 999px; padding: 0 12px; min-height: 44px; cursor: pointer; font-size: 14px; background: #fff; white-space: nowrap; }
.bl-checks label:has(input:checked) { border-color: var(--kg-brand); background: var(--kg-soft); color: var(--kg-brand-dark); font-weight: 700; }
.bl-checks input { accent-color: var(--kg-brand); margin: 0; width: 16px; height: 16px; }
.bl-fit__you { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--kg-line); font-size: 13.5px; color: var(--kg-muted); display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.bl-fit__you[hidden] { display: none; }
.bl-fit__you b { color: var(--kg-brand-dark); }
.bl-fit__result { display: none; } /* התשובה המיידית: רק בהירו של הדסקטופ */
/* מתג האופק 12/24 ב"התאימו לי": מובייל בלבד (ממצא רונן 5); בדסקטופ הוא בקבוצת "מיון" של הסרגל (.bl-fbar__h) */
.bl-fit__h-row { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--kg-line); }
.bl-fit__h-lab { font-size: 14px; font-weight: 700; }
.bl-fit .bl-q:not(:nth-child(2)) .bl-q__hint { display: none; }
/* באינטרנט ובטלוויזיה הרמז של השאלה הראשונה מסביר את הכלל עצמו ("יורדת לסוף ולא נעלמת"), ולכן גם במובייל.
   הכפתורים שם נושאים מילים ולא ספרה אחת, ולכן ריפוד צר יותר כדי שהרצועה לא תיחתך ב-375 */
/* ⚠️ הסלקטור כפול-מחלקה בכוונה: הכלל שמעליו הוא (0,4,0) בגלל ה-:not, ולכן ‎.bl-fit--internet .bl-q .bl-q__hint
   לבדו (0,3,0) היה מפסיד לו ולא חל בכלל (נמדד ב-getComputedStyle, לא בעין) */
.bl-fit.bl-fit--internet .bl-q .bl-q__hint, .bl-fit.bl-fit--tv .bl-q .bl-q__hint { display: block; }
.bl-fit--internet .bl-seg button, .bl-fit--tv .bl-seg button { padding: 0 9px; font-size: 14px; }
.bl-fit--internet .bl-seg, .bl-fit--tv .bl-seg { max-width: 100%; }

@media (min-width: 992px) {
    .bl-fit { background: linear-gradient(180deg, #eaf5ef 0%, #fff 70%); border-color: #cfe3da; padding: 18px 16px 16px; margin-top: 4px; }
    /* הערת רונן 2026-09-20: הרצועה נבלעת והעין יורדת ישר לתוצאות. הכותרת גדלה, שורת ההסבר יורדת לשורה משלה,
       שאלות 1 ו-3 מקבלות כרטיס לבן, והסליידר (2) מצטמצם כדי שלא יבלע את הרוחב. */
    .bl-fit__h { font-size: 23px; }
    .bl-fit__h small { flex-basis: 100%; font-size: 14px; margin-top: 2px; }
    .bl-fit__grid { grid-template-columns: auto minmax(200px, 0.7fr) minmax(0, 1.1fr); align-items: start; gap: 22px; }
    .bl-fit .bl-q--n1, .bl-fit .bl-q--n3 { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 12px; padding: 12px 14px; }
    .bl-fit .bl-q--n1 .bl-q__l, .bl-fit .bl-q--n3 .bl-q__l { font-size: 16px; }
    .bl-fit .bl-q--n1 .bl-q__n, .bl-fit .bl-q--n3 .bl-q__n { width: 25px; height: 25px; font-size: 13.5px; }
    .bl-fit .bl-q--n1 .bl-seg button { min-width: 52px; min-height: 48px; font-size: 16px; }
    /* באינטרנט ובטלוויזיה גם שאלה 2 היא רצועת כפתורים (ולא סליידר), ולכן אותו כרטיס לבן ואותו גודל */
    .bl-fit--internet .bl-q--n2, .bl-fit--tv .bl-q--n2 { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 12px; padding: 12px 14px; }
    .bl-fit--internet .bl-q--n2 .bl-q__l, .bl-fit--tv .bl-q--n2 .bl-q__l { font-size: 16px; }
    .bl-fit--internet .bl-q--n2 .bl-q__n, .bl-fit--tv .bl-q--n2 .bl-q__n { width: 25px; height: 25px; font-size: 13.5px; }
    .bl-fit--internet .bl-seg button, .bl-fit--tv .bl-seg button { min-height: 48px; font-size: 15px; padding: 0 12px; }
    .bl-fit .bl-q--n3 .bl-checks label { font-size: 15px; min-height: 46px; }
    .bl-fit .bl-q--n2 .bl-range { max-width: 300px; }
    .bl-fit .bl-q .bl-q__hint { display: block; }
    .bl-fit__result { display: grid; margin: 14px 0 0; background: #fff; border: 1.5px solid var(--kg-brand); border-radius: 12px; padding: 12px 14px; gap: 10px; }
    .bl-fit__result[hidden] { display: none; }
    .bl-fit__you { display: none; } /* בהירו התשובה כבר ב-.bl-fit__result */
    .bl-fit__h-row { display: none; }
}
.bl-fit__result-t { font-size: 15px; }
.bl-fit__result-t b { color: var(--kg-brand-dark); }
.bl-fit__actions { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; }
.bl-fit__skip { font-size: 13px; color: var(--kg-muted); }

/* --- הסרגל הדביק (פורט של kg-fbar) -------------------------------------------- */
.bl-sentinel { height: 1px; margin-bottom: -1px; visibility: hidden; }
.bl-fbar-wrap { position: sticky; top: var(--bl-fbar-top); z-index: 40; background: #fff; padding-top: 8px; margin-top: -8px; }
.bl-fbar { position: relative; background: #fff; border: 1.5px solid var(--kg-line); border-radius: var(--bl-radius); padding: 12px 14px 10px; box-shadow: 0 2px 10px rgba(15, 90, 71, .06); }
/* במצב דביק (דסקטופ) הכרטיס שומר את כל ארבע הפינות המעוגלות והגבול: העטיפה (רקע לבן, כרית 8px למעלה) היא מה שנוגע
   בקצה המסך, לא הכרטיס. ממצא רונן ב' (2026-09-19): פינות "חתוכות" למעלה = ה-border-radius 0 0 14px 14px הישן. במובייל
   הכרטיס נפרש מקצה לקצה (שוליים שליליים) ושם הפינות העליונות ישרות בכוונה (למטה, במדיה 767.98) */
.bl-fbar-wrap.stuck .bl-fbar { box-shadow: 0 8px 24px rgba(15, 90, 71, .12); }
/* תוויות הקבוצות (ממצא רונן 5): "חברות" / "סינון" / "מיון" כותרות קטנות מעל כל רצועה, בדסקטופ בלבד */
.bl-fbar__lab { display: none; font-size: 13px; font-weight: 700; color: var(--kg-muted); letter-spacing: .02em; margin: 0 2px 6px; line-height: 1.2; }
.bl-fbar__prov { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 16px; margin: 0; }
.bl-fbar__prov::-webkit-scrollbar { display: none; }
/* רצועות הגלילה (פורט של kg-scroller מ-gemel-modern.css): העטיפה .bl-xscroll היא הקשר המיקום לשני רמזי החץ,
   הרצועה עצמה ([data-bl-scroll]) גוללת בפנים. bills-compare.js כותב at-start / at-end / no-scroll / is-ready על העטיפה,
   ומוסיף גלגלת→אופקי וגרירת עכבר (בדסקטופ אין פס גלילה נראה, ולכן בלעדיהם הרצועה "לא זזה"; QA רונן 2026-09-18).
   ב-RTL "קדימה" = שמאלה: החץ קדימה בקצה השמאלי, חץ "חזרה" בימני. inset פיזי (inset-inline-start ב-RTL הוא ימין). */
.bl-xscroll { position: relative; --bl-sbg: #fff; }
.bl-xscroll--prov { margin: 0 0 8px; }
.bl-xscroll [data-bl-scroll] { overscroll-behavior-x: contain; }
.bl-xscroll.is-dragging, .bl-xscroll.is-dragging * { user-select: none; cursor: grabbing; }
.bl-xscroll img { -webkit-user-drag: none; user-select: none; }
.bl-xscroll__hint { display: flex; position: absolute; top: 0; bottom: 0; width: 44px; align-items: center; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .15s; }
.bl-xscroll__hint--fwd { left: 0; justify-content: flex-start; padding-left: 4px; background: linear-gradient(90deg, var(--bl-sbg) 45%, transparent); }
.bl-xscroll__hint--back { right: 0; justify-content: flex-end; padding-right: 4px; background: linear-gradient(270deg, var(--bl-sbg) 45%, transparent); }
.bl-xscroll__hint i { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #bfe0d2; background: #fff; color: var(--kg-brand-dark); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(15, 90, 71, .15); }
.bl-xscroll__hint .kg-i { width: 14px; height: 14px; stroke-width: 2.2; }
/* ⚠️ צאצא ישיר בלבד (תוקן 21/09/2026): משנוספה רצועה מקוננת (התגיות בתוך שורת הסינון),
   הסלקטורים היורשתיים תפסו גם את החצים הפנימיים: לרצועה החיצונית יש no-scroll בדסקטופ, והיא כיבתה
   את חץ התגיות גם כשהרצועה הפנימית באמת גוללת. */
.bl-xscroll.is-ready > .bl-xscroll__hint { opacity: 1; pointer-events: auto; }
.bl-xscroll.at-end > .bl-xscroll__hint--fwd,
.bl-xscroll.at-start > .bl-xscroll__hint--back,
.bl-xscroll.no-scroll > .bl-xscroll__hint { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bl-xscroll__hint { transition: none; } }
/* פילים וצ'יפים בשפת kg-pill (ממצא רונן 5, 2026-09-19): גבול 1.5px חזק, טקסט 16px בצבע הדיו, ספירה בתג מנוגד,
   הובר מעלה את הגבול למותג, נבחר = מילוי מותג + טקסט לבן (כמו .kg-fam .on בגמל) */
.bl-ppill, .bl-tchip { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--kg-line-strong); background: #fff; border-radius: 999px; padding: 0 14px; min-height: 44px; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--kg-ink); flex: 0 0 auto; transition: border-color .12s, background .12s, color .12s; }
.bl-ppill:hover, .bl-tchip:hover { border-color: var(--kg-brand); background: var(--kg-soft); }
.bl-ppill.on, .bl-tchip.on { border-color: var(--kg-brand); background: var(--kg-brand); color: #fff; font-weight: 700; }
.bl-ppill.is-zero, .bl-tchip.is-zero { opacity: .55; }
.bl-ppill .bl-plogo--pill { margin-inline-start: -4px; }
.bl-ppill__cnt { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--kg-soft2); color: var(--kg-brand-dark); font-size: 13px; font-weight: 700; line-height: 1; }
.bl-ppill.on .bl-ppill__cnt, .bl-tchip.on .bl-ppill__cnt { background: rgba(255, 255, 255, .24); color: #fff; }
.bl-fbar__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* הקבוצות "סינון"/"מיון": במובייל שקופות לפריסה (display: contents, לקח 72) כדי שהרצועה תישאר מיכל גלילה אחד; בדסקטופ עמודה = תווית + שורה */
.bl-fbar__grp, .bl-fbar__grp-in { display: contents; }
/* רצועת התגיות: במובייל שקופה לגמרי (כל השורה היא מיכל גלילה אחד), ולכן גם החיצים שלה מוסתרים */
.bl-xscroll--tags { display: contents; }
.bl-xscroll--tags > .bl-xscroll__hint { display: none; }
.bl-fbar__h { display: none; } /* מתג האופק בסרגל: דסקטופ בלבד; במובייל הוא ב"התאימו לי" (.bl-fit__h-row) */
.bl-select { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--kg-line-strong); border-radius: 999px; padding: 0 6px 0 12px; min-height: 44px; background: #fff; font-size: 16px; white-space: nowrap; color: var(--kg-ink); flex: 0 0 auto; }
.bl-select:hover { border-color: var(--kg-brand); }
.bl-select select { border: 0; background: transparent; font-weight: 700; font-size: 16px; color: var(--kg-brand-dark); min-height: 44px; cursor: pointer; max-width: 230px; padding: 0 4px; }
.bl-select select:focus { outline: 0; }
.bl-fbar__sort { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.bl-fbar__summary { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--kg-line); font-size: 14px; color: var(--kg-muted); }
@media (min-width: 992px) {
    .bl-fbar__lab { display: block; }
    .bl-fbar__row { align-items: flex-start; gap: 12px 28px; }
    .bl-fbar__grp { display: flex; flex-direction: column; min-width: 0; }
    /* ⚠️ min-width: 0 חיוני: בלעדיו קבוצת הסינון אינה מצטמצמת מתחת לרוחב התוכן שלה (ברירת המחדל
       של פריט flex היא min-width: auto), וקבוצת המיון נדחפת לשורה נפרדת ומוסיפה גובה לסרגל הדביק.
       ⚠️ ו-flex-basis: 0 ולא auto, כי ב-flex-wrap: wrap הדפדפן מחליט על השבירת השורה **לפני** שהוא מכווץ פריטים.
       עם basis: auto גודל הבסיס הוא רוחב כל הציפים בלי גלילה, ולכן קבוצת המיון המשיכה ליפול למטה גם אחרי min-width: 0. */
    .bl-fbar__grp--filter { flex: 1 1 0; min-width: 0; }
    .bl-fbar__grp--sort { flex: 0 0 auto; margin-inline-start: auto; }
    .bl-fbar__grp-in { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    /* ⚠️ בדסקטופ התגיות הן שורה אחת שגוללת ולא נשברת: בלי זה הסרגל הדביק משנה גובה בין קטגוריה
       לקטגוריה לפי מספר התגיות ואורך התוויות (רונן 21/09/2026: 357px באינטרנט ובטלוויזיה מול 225px בסלולר). */
    .bl-xscroll--tags { display: block; position: relative; flex: 1 1 auto; min-width: 0; --bl-sbg: #fff; }
    .bl-xscroll--tags > .bl-xscroll__hint { display: flex; }
    .bl-xscroll--tags > .bl-fbar__grp-in { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .bl-xscroll--tags > .bl-fbar__grp-in::-webkit-scrollbar { display: none; }
    .bl-fbar__sort { margin-inline-start: 0; }
    .bl-fbar__h { display: inline-flex; }
}
.bl-fbar__summary b { color: var(--kg-ink); }
.bl-achip { display: inline-flex; align-items: center; gap: 4px; background: var(--kg-soft2); color: var(--kg-brand-dark); border-radius: 999px; padding: 0 10px; font-size: 12.5px; border: 0; cursor: pointer; min-height: 32px; font-weight: 600; }
.bl-achip--static { cursor: default; }
.bl-clear { background: none; border: 0; color: var(--kg-brand-dark); text-decoration: underline; font-size: 13px; cursor: pointer; min-height: 32px; padding: 0 6px; }
.bl-fbar-spacer { height: 0; }

@media (max-width: 767.98px) {
    .bl-fbar-wrap.stuck { margin-left: -16px; margin-right: -16px; }
    .bl-fbar-wrap.stuck .bl-fbar { border-radius: 0 0 14px 14px; border-left: 0; border-right: 0; }
    .bl-fbar { padding: 8px 12px 6px; }
    /* העטיפה נושאת את השוליים השליליים כדי שהרמזים יישבו בקצות התיבה (לקח 72); הרצועה שומרת את הריפוד */
    .bl-xscroll--prov, .bl-xscroll--row { margin-left: -12px; margin-right: -12px; }
    .bl-fbar__prov { padding: 2px 12px 8px; }
    .bl-fbar__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 2px 12px; }
    .bl-fbar__row::-webkit-scrollbar { display: none; }
    .bl-fbar__sort { margin-inline-start: 0; display: contents; }
    .bl-select select { max-width: 170px; }
    .bl-fbar-wrap.stuck .bl-fbar__summary { display: none; } /* ה-spacer שומר את גובה הזרימה (לקח 52) */
}

/* =============================================================================
   השורות (מוקאפ C "שורות", הכרעת רונן 2026-09-19; _BillsPlanRow.cshtml)
   mobile-first: הבסיס הוא הכרטיס הקומפקטי (לוגו+שם, צ'יפים, מחיר גדול, CTA ברוחב מלא).
   .bl-rows--table (דף הקטגוריה/הספק): מ-768px שתי שורות בתוך השורה [ספק|חבילה]/[מחיר|פעולה], מ-992px ארבע עמודות
   קבועות [ספק 240 | חבילה | מחיר | פעולה] עם קווי הפרדה והובר (בלי זברה). .bl-rows--wrap (השורה בדף החבילה): 2x2 בלבד.
   בלי מודיפייר (הסיידבר של דף החבילה): הכרטיס הקומפקטי בכל רוחב.
   הקלטים של רונן: מחיר 40/44px (36 במובייל), ₪ משמאל לספרות (.bl-num = LTR isolate), "כמה תשלמו בפועל" 18px semi-bold + הפער,
   לוגו 120x60 בעמודה של 240px, שם ספק 17px, רשת 14px, טקסט גוף 16px, צ'יפים 14px.
   ============================================================================= */
.bl-cmp-page { --col-prov: 240px; --col-price: 280px; --col-cta: 190px; --bl-hover: #f2f8f5; --bl-row-line: #e6eeea; }
@media (min-width: 1300px) { .bl-cmp-page { --col-price: 300px; --col-cta: 200px; } }
/* כותרת העמודות (דסקטופ בלבד; ממצא רונן 2026-09-19): אותו גריד כמו השורות, padding-inline = 16px + גבול ה-<ol> (1.5px) כדי
   שהתוויות יתיישרו בדיוק עם העמודות; 15.5px/700/--kg-ink, קו תחתון --kg-line-strong, ומרווח 10px מהרשימה כדי שהמסגרת
   של השורה הראשונה לא תיגע בה */
.bl-rows__head { display: none; grid-template-columns: var(--col-prov) minmax(0, 1fr) var(--col-price) var(--col-cta); gap: 0 16px; padding: 10px calc(16px + 1.5px) 8px; margin: 0 0 10px; font-size: 15.5px; font-weight: 700; color: var(--kg-ink); border-bottom: 1px solid var(--kg-line-strong); }
.bl-rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; font-size: 16px; line-height: 1.45; }
.bl-rows__head + .bl-rows { margin-top: 0; }
.bl-row { position: relative; background: #fff; border: 1.5px solid var(--kg-line); border-radius: var(--bl-radius); transition: border-color .12s, box-shadow .12s, background .12s; }
.bl-row[hidden] { display: none; }
.bl-row:hover, .bl-row:focus-within { border-color: #b9d4c8; box-shadow: 0 6px 18px -8px rgba(15, 90, 71, .25); }
.bl-row.is-best { border: 2px solid var(--kg-brand); box-shadow: 0 8px 24px -12px rgba(15, 90, 71, .35); }
.bl-row.is-off { opacity: .8; }
.bl-row.is-off .bl-pb__big b { color: var(--kg-muted); }
/* שורת שירות סטרימינג (טלוויזיה, ServiceKind=Svod): אין ליד, אין ממיר ואין ערוצים לינאריים. מסומנת חזותית
   כשונה - פס צד בצבע אחר ורקע קריר - כדי שלא תיקרא כחבילת ערוצים של ספקית. הצבע מחוץ לפלטת המותג בכוונה */
.bl-row--svod { background: #fbfaff; }
.bl-row--svod::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; border-radius: var(--bl-radius) 0 0 var(--bl-radius); background: #6c5ce7; }
.bl-row--svod:hover, .bl-row--svod:focus-within { border-color: #c2b8f0; box-shadow: 0 6px 18px -8px rgba(108, 92, 231, .3); }
.bl-row__main { display: grid; grid-template-areas: "c1" "c2" "c3" "c4" "how"; grid-template-columns: minmax(0, 1fr); gap: 10px 12px; padding: 14px 16px; align-items: start; }
/* ⚠️ אין padding-top נוסף במובייל: שם .bl-c1 הוא לוגו + שם ספק בצד ימין, והפינה השמאלית פנויה ממילא */
.bl-c1 { grid-area: c1; }
.bl-c2 { grid-area: c2; }
.bl-c3 { grid-area: c3; }
.bl-c4 { grid-area: c4; }
.bl-tco-how { grid-area: how; }

/* עמודה 1: הלוגו (תיבה קבועה, object-fit: contain) + ספק + רשת מארחת */
.bl-c1 { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* ⚠️ flex ולא grid (נתפס 2026-09-20 באיסוף לוגואי האינטרנט והטלוויזיה): ב-grid עם place-items גובה מסלול השורה
   נקבע לפי התוכן, ולכן ל-height:100% של התמונה אין גובה מוגדר להתייחס אליו, והיא נחתכה למעלה ולמטה.
   הוט איבד 61%, בזק 57%, וגם בדף הסלולר שכבר אושר: הוט מובייל 66% ופלאפון 49%.
   ⚠️ לא לפתור בריפוד שקוף בתוך קובצי הלוגו: זה מקטין אותם בכל שאר התיבות שבהן הם מופיעים. */
.bl-logobox { width: 96px; height: 48px; border: 1px solid var(--kg-line); border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 6px; flex: 0 0 auto; overflow: hidden; }
.bl-logobox img { width: 100%; height: 100%; object-fit: contain; display: block; border: 0; padding: 0; border-radius: 0; }
.bl-logobox__t { font-size: 13px; font-weight: 800; color: var(--kg-muted); text-align: center; line-height: 1.15; }
.bl-c1__t { display: flex; flex-direction: column; min-width: 0; }
.bl-prov { font-size: 17px; font-weight: 700; color: var(--kg-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
.bl-cmp-page a.bl-prov { color: var(--kg-ink); }
.bl-prov:hover, .bl-cmp-page a.bl-prov:hover { color: var(--kg-brand-dark); text-decoration: underline; }
.bl-host { font-size: 14px; color: var(--kg-muted); margin-top: 2px; }

/* עמודה 2: שם החבילה, צ'יפים (14px), תגים, "נבדק" */
.bl-c2 { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bl-best { display: inline-flex; align-items: center; gap: 5px; background: var(--kg-brand); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 14px; font-weight: 700; width: max-content; max-width: 100%; }
.bl-best[hidden] { display: none; }
.bl-name { font-size: 18px; font-weight: 800; margin: 0; line-height: 1.3; }
.bl-name a, .bl-cmp-page .bl-name a { color: var(--kg-ink); text-decoration: none; display: inline-block; padding: 10px 0; margin: -10px 0; } /* tap >= 44px בלי להזיז את הפריסה */
.bl-name a:hover, .bl-cmp-page .bl-name a:hover { color: var(--kg-brand-dark); text-decoration: underline; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
/* ⚠️ white-space הוא normal ולא nowrap (תוקן 21/09/2026): תוכן הצ'יפ מגיע מה-DB, וצ'יפ ארוך
   שאינו נשבר דוחף את כל הדף. זה קרה בפועל: שורת Apple שנוספה ב-54 נושאת "שיתוף עם עד חמישה בני
   משפחה נוספים", וב-375px הדף קיבל גלילה אופקית של 95px. צ'יפ קצר ("5G", "500GB") נשאר בשורה אחת
   בלאו הכי כי אין בו רווח. צ'יפ שנשבר לשתי שורות הוא פגם קטן; דף שבור הוא לא. */
.bl-chips li { background: #f1f5f3; border-radius: 999px; padding: 4px 10px; font-size: 14px; white-space: normal; max-width: 100%; line-height: 1.4; }
.bl-chips li.is-key { font-weight: 800; background: var(--kg-soft2); color: var(--kg-brand-dark); font-size: 15px; }
.bl-c2__foot { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-tags:not(:has(.bl-badge:not([hidden]))) { display: none; }
.bl-cmp-page .bl-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0; }
.bl-cmp-page .bl-badge[hidden] { display: none; }
.bl-badge--soft { background: var(--kg-soft2); color: var(--kg-brand-dark); }
.bl-badge--warn { background: var(--kg-warn-bg); color: #b3431a; }
.bl-cmp-page .bl-badge--new { background: #fff6dc; color: #8a6a00; }
.bl-badge--gray { background: #eef0ef; color: var(--kg-muted); }
/* התג של כרטיס הסטרימינג: אותה משפחת צבע כמו פס הצד של .bl-row--svod (יחס ניגודיות 7.4:1) */
.bl-cmp-page .bl-badge--info { background: #efecff; color: #4a3bb5; }
.bl-meta { font-size: 14px; color: var(--kg-muted); display: inline-flex; gap: 5px; align-items: center; }

/* עמודה 3: בלוק המחיר. המחיר הגדול 36px (40/44 בדסקטופ), ₪ משמאל; "אחרי" 16px; "כמה תשלמו בפועל" 18px semi-bold עם הפער */
.bl-c3 { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 10px; border-top: 1px dashed var(--kg-line); }
.bl-pb__big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1; }
.bl-pb__big b { font-size: 36px; font-weight: 800; color: var(--kg-brand); letter-spacing: -.01em; }
.bl-pb__big b small { font-size: .55em; font-weight: 700; }
.bl-pb__sub { font-size: 14px; color: var(--kg-muted); }
.bl-pb__after { font-size: 16px; color: var(--kg-ink); }
.bl-pb__fixed { font-size: 16px; color: var(--kg-muted); }
.bl-pb__tco { font-size: 16px; display: flex; align-items: center; gap: 2px 6px; flex-wrap: wrap; margin-top: 2px; color: var(--kg-ink); }
.bl-pb__tco b { font-size: 18px; font-weight: 600; color: var(--kg-brand-dark); }
.bl-delta { font-size: 14px; font-weight: 600; color: var(--kg-muted); background: #f1f5f3; border-radius: 999px; padding: 2px 9px; line-height: 1.5; }
.bl-delta.is-up { color: #b3431a; background: var(--kg-warn-bg); }
.bl-pb__after[hidden], .bl-pb__fixed[hidden], .bl-pb__tco[hidden], .bl-pb__you[hidden], .bl-delta[hidden] { display: none; }
.bl-pb__you { font-size: 16px; background: var(--kg-soft2); color: var(--kg-brand-dark); border-radius: 8px; padding: 6px 10px; margin-top: 4px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.bl-pb__you b { font-size: 18px; }
.bl-info { width: 44px; height: 44px; margin: -11px -8px; border: 0; background: transparent; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.bl-info span { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #b9c9c2; color: var(--kg-muted); font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.bl-info:hover span, .bl-info[aria-expanded="true"] span { border-color: var(--kg-brand); color: var(--kg-brand); }
.bl-tco-how { font-size: 15px; color: var(--kg-muted); display: grid; gap: 6px; background: var(--kg-soft); border-radius: 10px; padding: 10px 14px; }
.bl-tco-how[hidden] { display: none; }
.bl-tco-how p { margin: 0; }
.bl-tco-how b { color: var(--kg-brand-dark); }
.bl-tco-how code { font-family: Consolas, Menlo, monospace; font-size: 14px; background: #fff; border-radius: 6px; padding: 4px 8px; direction: ltr; unicode-bidi: isolate; display: block; overflow-wrap: anywhere; color: var(--kg-ink); }

/* עמודה 4: CTA אחד (48px) + השוו + פרטים ותנאים */
.bl-c4 { display: flex; flex-direction: column; gap: 6px; }
.bl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; min-height: 46px; padding: 0 16px; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap; border: 0; }
/* הכפתור הראשי הוא גם <button> וגם <a> (מגש, הירו, "לאתר הספק"): אותו צבע טקסט בשלושת המצבים, בלי תלות בכללי הקישורים */
.bl-btn--primary, .bl-cmp-page a.bl-btn--primary { background: var(--kg-brand); color: #fff; }
.bl-btn--primary:hover, .bl-btn--primary:focus-visible, .bl-cmp-page a.bl-btn--primary:hover, .bl-cmp-page a.bl-btn--primary:focus-visible { background: var(--kg-brand-dark); color: #fff; }
.bl-btn--ghost, .bl-cmp-page a.bl-btn--ghost { border: 1.5px solid var(--kg-line); background: #fff; color: var(--kg-ink); font-weight: 600; font-size: 14px; padding: 0 14px; }
.bl-btn--ghost:hover, .bl-btn--ghost:focus-visible, .bl-cmp-page a.bl-btn--ghost:hover, .bl-cmp-page a.bl-btn--ghost:focus-visible { border-color: var(--kg-brand); color: var(--kg-brand-dark); }
/* "לאתר השירות": הפעולה היחידה של כרטיס סטרימינג (אין לו ליד). כפתור מלא ולא ghost, כדי שלשורה תהיה פעולה
   ברורה כמו לשאר השורות, בצבע של משפחת הסטרימינג (ניגודיות 6.1:1 מול לבן) ולא בירוק המותג של "השאירו פרטים" */
.bl-btn--service, .bl-cmp-page a.bl-btn--service { background: #4a3bb5; color: #fff; }
.bl-btn--service:hover, .bl-btn--service:focus-visible, .bl-cmp-page a.bl-btn--service:hover, .bl-cmp-page a.bl-btn--service:focus-visible { background: #382b8f; color: #fff; }
.bl-btn[disabled], .bl-btn.is-disabled { opacity: .5; cursor: default; }
.bl-c4 .bl-btn { width: 100%; min-height: 48px; font-size: 16px; }
.bl-c4__sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bl-cmp { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 2px; cursor: pointer; white-space: nowrap; color: var(--kg-ink); }
.bl-cmp:has(input:checked) { color: var(--kg-brand-dark); font-weight: 700; }
.bl-cmp input { accent-color: var(--kg-brand); width: 18px; height: 18px; margin: 0; }
.bl-more { background: none; border: 0; color: var(--kg-brand-dark); font-size: 15px; font-weight: 700; cursor: pointer; min-height: 44px; padding: 0 2px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bl-more:hover { text-decoration: underline; }
.bl-more .kg-i { transition: transform .15s; }
.bl-more[aria-expanded="true"] .kg-i { transform: rotate(180deg); }
/* --- שיתוף ושמירה בשורה (הערות רונן 2026-09-21, סעיפים 2 ו-4) -----------------
   שני אייקונים בלבד ובלי טקסט: הם פעולות משניות, ומילים לידן היו מתחרות ב-"השאירו פרטים".
   ⚠️ 44px מטרת מגע (AGENTS "מובייל") למרות שהאייקון 18px: השטח הלחיץ הוא הכפתור, לא הציור. */
/* ⚠️ הפינה השמאלית-העליונה של הכרטיס (הערת רונן 2026-09-21, סבב 2): בשורת הפעולות האייקונים
   נחתכו בעמודת ה-CTA הצרה והשיתוף כלל לא נראה. absolute מול .bl-row (שכבר position: relative),
   ולכן רוחב העמודה אינו נוגע בהם. הריווח העליון של .bl-row__main גדל כדי לפנות להם מקום. */
.bl-acts { position: absolute; top: 6px; inset-inline-end: 8px; z-index: 2; display: flex; align-items: flex-start; gap: 2px; }
.bl-act { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--kg-muted); border-radius: 50%; }
.bl-act .kg-i { width: 21px; height: 21px; }
/* ⚠️ התווית מרחפת (absolute) ואינה בזרימה: הצביר חייב להישאר 40px גם בריחוף, אחרת שורה שלמה זזה */
.bl-act__t { position: absolute; top: 100%; inset-inline-end: 0; margin-top: 2px; padding: 3px 7px; border-radius: 6px; background: var(--kg-ink); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.bl-act:hover, .bl-act:focus-visible, .bl-act.is-on { color: var(--kg-brand-dark); }
.bl-act:hover, .bl-act:focus-visible { background: var(--kg-soft); }
.bl-act:hover .bl-act__t, .bl-act:focus-visible .bl-act__t { opacity: 1; }
.bl-act:focus-visible { outline: 2px solid var(--kg-brand); outline-offset: 1px; }
/* הסימנייה במצב שמור: מתמלאת. .kg-i הוא stroke בלבד, ולכן המילוי נקבע כאן ולא בספרייט */
.bl-act.is-on .kg-i { fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .bl-act__t { transition: none; } }

/* תפריט השיתוף: נפתח מתחת לאייקון, נסגר בלחיצה בחוץ או ב-Escape */
.bl-sharepop { position: absolute; top: calc(100% + 2px); inset-inline-end: 0; z-index: 30; min-width: 190px; background: #fff; border: 1px solid var(--kg-line); border-radius: 12px; box-shadow: 0 10px 28px rgba(38, 61, 53, .16); padding: 6px; display: flex; flex-direction: column; }
.bl-sharepop__i { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 15px; font-weight: 600; color: var(--kg-ink); text-align: start; text-decoration: none; cursor: pointer; }
.bl-sharepop__i:hover { background: var(--kg-soft); color: var(--kg-brand-dark); text-decoration: none; }
.bl-sharepop__i:focus-visible { outline: 2px solid var(--kg-brand); outline-offset: -2px; }
.bl-sharepop__i .kg-i { width: 18px; height: 18px; color: var(--kg-brand); }

/* "השמורות שלי" ברצועת הסיכום: צ'יפ מתג, ולא חלון נוסף */
.bl-achip--fav { border: 1px solid var(--kg-line-strong); background: #fff; }
.bl-achip--fav.on { background: var(--kg-brand); border-color: var(--kg-brand); color: #fff; }
.bl-achip--fav .kg-i { width: 14px; height: 14px; }
.bl-achip--fav.on .kg-i { fill: currentColor; }


/* שורת הפרטים: נפתחת במקום מתחת לשורה, 16px. דסקטופ: [אותיות קטנות (ימין) | מפרט | טופס הליד (שמאל, מתחת ל-CTA)] */
.bl-row__details { border-top: 1px solid var(--kg-line); padding: 14px 16px 16px; display: grid; gap: 16px; font-size: 16px; line-height: 1.5; background: #fafcfb; border-radius: 0 0 12px 12px; grid-template-areas: "spec" "fine" "lead"; }
.bl-row__details[hidden] { display: none; }
.bl-row__spec { grid-area: spec; min-width: 0; }
.bl-row__fine { grid-area: fine; min-width: 0; }
.bl-row__lead { grid-area: lead; min-width: 0; }
.bl-row__lead:empty, .bl-row__fine:empty { display: none; }
.bl-row__lead, .bl-inline-lead { scroll-margin-top: calc(var(--bl-fbar-top) + var(--bl-fbar-h) + 12px); }
.bl-row__details h4 { font-size: 16px; font-weight: 800; margin: 0 0 6px; color: var(--kg-ink); }
.bl-row__details table { width: 100%; border-collapse: collapse; font-size: 16px; }
.bl-row__details th, .bl-row__details td { padding: 6px; border-bottom: 1px solid var(--bl-row-line); text-align: right; vertical-align: top; }
.bl-row__details th { color: var(--kg-muted); font-weight: 600; width: 40%; }
.bl-row__details p { margin: 8px 0 0; }
.bl-fine-html { line-height: 1.55; }
.bl-fine-html p, .bl-fine-html ul, .bl-fine-html ol { margin: 0 0 6px; }
.bl-fine-html ul, .bl-fine-html ol { padding-inline-start: 20px; }
.bl-row__fine-meta { font-size: 14px; color: var(--kg-muted); display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; }
.bl-row__lead .bl-inline-lead { margin-top: 0; }
.bl-inline-lead:empty { display: none; }
/* "שירותי סטרימינג שכלולים" (StreamingIncludedJson): בלוק ולא שורת מפרט, כי הוא נושא תקופה ומדרגת מחיר שאחריה,
   ובעיקר כדי שיהיה ברור שהוא תצוגה בלבד ואינו נכנס ל-"כמה תשלמו בפועל". 16px כמו שאר שורת הפרטים */
.bl-inc { margin-top: 12px; border: 1px solid #ddd7f4; background: #faf9ff; border-radius: 10px; padding: 10px 12px; }
.bl-inc h3, .bl-inc h4, .bl-row__details .bl-inc h4 { font-size: 16px; font-weight: 800; margin: 0 0 6px; color: #3d2f9e; }
.bl-inc ul { margin: 0; padding-inline-start: 18px; font-size: 16px; line-height: 1.5; }
.bl-inc li { margin: 0 0 3px; }
.bl-inc .bl-inc__note, .bl-row__details .bl-inc__note { font-size: 14px; color: var(--kg-muted); margin: 8px 0 0; }
@media (min-width: 768px) {
    .bl-row__details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "fine spec" "lead lead"; align-items: start; }
    .bl-row__details th { width: 36%; }
}

/* טאבלט 768-991 (וגם השורה בדף החבילה): שתי שורות בתוך השורה: [ספק | חבילה] / [מחיר | פעולה] */
@media (min-width: 768px) {
    .bl-rows--table .bl-row__main, .bl-rows--wrap .bl-row__main { grid-template-areas: "c1 c2" "c3 c4" "how how"; grid-template-columns: 200px minmax(0, 1fr); gap: 12px 16px; padding: 14px 16px; }
    .bl-rows--table .bl-c1, .bl-rows--wrap .bl-c1 { flex-direction: column; align-items: flex-start; }
    .bl-rows--table .bl-logobox, .bl-rows--wrap .bl-logobox { width: 120px; height: 60px; padding: 8px; }
    .bl-rows--table .bl-c3, .bl-rows--wrap .bl-c3 { border-top: 0; padding-top: 0; }
    .bl-rows--table .bl-c4, .bl-rows--wrap .bl-c4 { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
    .bl-rows--table .bl-c4 .bl-btn, .bl-rows--wrap .bl-c4 .bl-btn { width: auto; min-width: 220px; }
    .bl-rows--table .bl-pb__big b, .bl-rows--wrap .bl-pb__big b { font-size: 40px; }
}
/* דסקטופ >= 992: ארבע עמודות קבועות, קווי הפרדה + הובר (בלי זברה), השורה "הכי משתלם" מודגשת */
@media (min-width: 992px) {
    .bl-rows__head { display: grid; }
    .bl-rows--table { gap: 0; border: 1.5px solid var(--kg-line); border-radius: var(--bl-radius); background: #fff; overflow: hidden; }
    .bl-rows--table .bl-row { border: 0; border-radius: 0; border-top: 1px solid var(--kg-line); }
    /* ממצא רונן 2026-09-19 (פינות חתוכות): ה-<ol> עגול עם overflow:hidden, והמסגרת של .is-best היא box-shadow inset מרובע,
       ולכן בשורה הראשונה/האחרונה הפינות שלה נחתכו. הפתרון: לשורה הראשונה ולשורה הגלויה האחרונה (bills-compare.js מצרף את
       המוסתרות לסוף) רדיוס פנימי = רדיוס ה-<ol> פחות הגבול, וה-inset עוקב אחרי הרדיוס */
    .bl-rows--table .bl-row:first-child { border-top: 0; border-radius: calc(var(--bl-radius) - 1.5px) calc(var(--bl-radius) - 1.5px) 0 0; }
    .bl-rows--table .bl-row:not([hidden]):last-child, .bl-rows--table .bl-row:not([hidden]):has(+ .bl-row[hidden]) { border-radius: 0 0 calc(var(--bl-radius) - 1.5px) calc(var(--bl-radius) - 1.5px); }
    .bl-rows--table .bl-row:first-child:not([hidden]):last-child, .bl-rows--table .bl-row:first-child:not([hidden]):has(+ .bl-row[hidden]) { border-radius: calc(var(--bl-radius) - 1.5px); }
    .bl-rows--table .bl-row:hover, .bl-rows--table .bl-row:focus-within { background: var(--bl-hover); box-shadow: inset -4px 0 0 var(--kg-brand); border-color: var(--kg-line); }
    .bl-rows--table .bl-row.is-best { border: 0; box-shadow: inset -4px 0 0 var(--kg-brand), inset 0 0 0 2px var(--kg-brand); background: #f3faf6; }
    .bl-rows--table .bl-row.is-best + .bl-row { border-top-color: transparent; }
    .bl-rows--table .bl-row__main { grid-template-areas: "c1 c2 c3 c4" "how how how how"; grid-template-columns: var(--col-prov) minmax(0, 1fr) var(--col-price) var(--col-cta); gap: 0 16px; padding: 12px 16px 14px; align-items: center; }
    /* ⚠️ בפריסה הרחבה עמודת ה-CTA היא העמודה השמאלית, כלומר בדיוק מתחת לפינה שבה יושבים אייקוני
       השמירה והשיתוף. הריווח כאן (ולא על .bl-row__main) מגדיל את גובה השורה רק כמה שהצביר דורש. */
    .bl-rows--table .bl-c4 { padding-top: 40px; }
    .bl-rows--table .bl-c1 { flex-direction: row; align-items: center; gap: 12px; }
    .bl-rows--table .bl-c3 { border-top: 0; padding-top: 0; border-inline-start: 1px solid var(--bl-row-line); padding-inline-start: 16px; align-self: stretch; justify-content: center; }
    .bl-rows--table .bl-c4 { flex-direction: column; align-items: stretch; gap: 4px; align-self: stretch; justify-content: center; flex-wrap: nowrap; }
    .bl-rows--table .bl-c4 .bl-btn { width: 100%; min-width: 0; }
    .bl-rows--table .bl-tco-how { margin-top: 10px; }
    .bl-rows--table .bl-row__details { border-radius: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "fine spec"; }
    .bl-rows--table .bl-row__details:has(.bl-row__lead) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 360px; grid-template-areas: "fine spec lead"; }
    .bl-rows--table .bl-row__details th { width: 40%; }
}
@media (min-width: 1300px) { .bl-rows--table .bl-pb__big b { font-size: 44px; } }

/* "מקורות ומתודולוגיה": שורה לספק, הקישור היוצא היחיד בדף */
.bl-sources { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 16px; font-size: 15px; }
.bl-sources li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; min-height: 32px; }
.bl-sources li a { font-weight: 700; }
.bl-sources small { color: var(--kg-muted); font-size: 13.5px; }

/* יתרונות/חסרונות של חבילה (דף החבילה, נגזר מהנתונים) */
.bl-proscons--plan { margin-top: 14px; }
.bl-proscons--plan h2 { margin-top: 0; font-size: 19px; }
.bl-proscons__note { margin: 8px 0 0; font-size: 13.5px; color: var(--kg-muted); }
.bl-cmp-page .bl-empty { background: #fff; border: 1.5px dashed var(--kg-line); border-radius: 14px; padding: 24px 16px; text-align: center; display: grid; gap: 10px; justify-items: center; margin-top: 12px; color: var(--kg-muted); }
.bl-cmp-page .bl-empty[hidden] { display: none; }
.bl-cmp-page .bl-empty b { font-size: 17px; color: var(--kg-ink); }
.bl-cmp-page .bl-empty p { margin: 0; }
.bl-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: var(--kg-ink); color: #fff; border-radius: 999px; padding: 10px 16px; font-size: 13.5px; z-index: 1100; opacity: 0; pointer-events: none; transition: opacity .2s; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.bl-toast.is-on { opacity: 1; }

/* --- "לא רוצים לבחור?" ---------------------------------------------------------- */
.bl-bulk { position: relative; background: #fff; border: 1.5px solid var(--kg-line); border-radius: var(--bl-radius); padding: 16px; margin: 22px 0 0; }
.bl-bulk h2 { font-size: 19px; margin: 0 0 4px; }
.bl-bulk p { margin: 0 0 10px; color: var(--kg-muted); font-size: 14px; }
.bl-bulk__provs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
@media (min-width: 700px) { .bl-bulk__provs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bl-bulk__provs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.bl-bulk__provs label { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--kg-line); border-radius: 10px; padding: 0 10px; min-height: 48px; cursor: pointer; font-size: 13.5px; min-width: 0; }
.bl-bulk__provs label:has(input:checked) { border-color: var(--kg-brand); background: var(--kg-soft); font-weight: 700; }
.bl-bulk__provs input { accent-color: var(--kg-brand); margin: 0; width: 16px; height: 16px; flex: 0 0 auto; }
.bl-bulk__provs span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-bulk__foot { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; }
.bl-bulk__foot small { color: var(--kg-muted); font-size: 12.5px; }

/* --- הטבלה המשנית: שירותי סטרימינג (הכרעת רונן 2026-09-20; _BillsStreamingTable.cshtml) -----------------
   רשימה ולא דירוג: בלי תג "הכי משתלם", בלי צ'קבוקס השוואה ובלי ליד. סימון הצבע זהה ל-.bl-row--svod
   (סגול מחוץ לפלטת המותג) כדי שהקורא יזהה מיד שזה לא אותו סוג מוצר.
   mobile-first: כל שורה נערמת (לוגו+שם, מחיר, כפתור ברוחב מלא) ⇒ אפס גלילה אופקית ב-375px.
   מ-768px: [שם+צ'יפים | מחיר | פעולה] בשורה אחת, כמו טבלה, בלי <table> שדורש גלילה. */
.bl-svod { margin: 26px 0 0; }
.bl-svod h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--kg-ink); }
.bl-svod__lead { font-size: 16px; line-height: 1.55; color: var(--kg-muted); margin: 0 0 12px; max-width: 78ch; }
.bl-svod__note { font-size: 14px; color: var(--kg-muted); margin: 10px 0 0; max-width: 78ch; }
.bl-svod__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bl-svod__row { position: relative; background: #fbfaff; border: 1.5px solid #e2ddf6; border-radius: var(--bl-radius); padding: 14px 16px; display: grid; gap: 10px 16px; align-items: center; font-size: 16px; line-height: 1.45; }
.bl-svod__row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; border-radius: var(--bl-radius) 0 0 var(--bl-radius); background: #6c5ce7; }
.bl-svod__row:hover, .bl-svod__row:focus-within { border-color: #c2b8f0; box-shadow: 0 6px 18px -8px rgba(108, 92, 231, .3); }
.bl-svod__c1 { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bl-logobox--sm { width: 80px; height: 40px; padding: 5px; }
.bl-svod__t { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bl-svod__name { font-size: 18px; font-weight: 800; margin: 0; line-height: 1.3; }
.bl-svod__name a, .bl-cmp-page .bl-svod__name a { color: var(--kg-ink); text-decoration: none; display: inline-block; padding: 10px 0; margin: -10px 0; } /* tap >= 44px בלי להזיז את הפריסה */
.bl-svod__name a:hover, .bl-cmp-page .bl-svod__name a:hover { color: #3d2f9e; text-decoration: underline; }
.bl-svod__what { font-size: 16px; color: var(--kg-muted); margin: 0; }
.bl-svod__p { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1; }
.bl-svod__p b { font-size: 28px; font-weight: 800; color: #3d2f9e; letter-spacing: -.01em; }
.bl-svod__p b small { font-size: .55em; font-weight: 700; }
.bl-svod__p span { font-size: 14px; color: var(--kg-muted); }
.bl-svod__a .bl-btn { width: 100%; }
@media (min-width: 768px) {
    .bl-svod__row { grid-template-columns: minmax(0, 1fr) 150px 180px; }
    .bl-svod__p { justify-content: flex-start; }
    .bl-svod__a .bl-btn { width: auto; }
}

/* --- תוכן מתחת לרשימה ---------------------------------------------------------- */
.bl-content { position: relative; margin-top: 8px; }
/* המעטפת 1400px (תקן דפי ההשוואה); בלוקי טקסט נשארים ברוחב קריאה (~70ch) ולא נמתחים לכל הרוחב */
/* בלוקי טקסט נשארים ברוחב קריאה. ‎.bl-method יצא מהרשימה 2026-09-20 (שאלת רונן): הוא כרטיס נתונים
   (שורה לכל ספק בעמודות) ולא פרוזה, ובצמצום ל-900px הוא נראה כאילו נקטע באמצע הדף. */
/* ⚠️ ממצא רונן 21/09/2026: המעטפת היא 1400px ובלוקי הטקסט נעצרו ב-900px, ולכן הם נצמדו לימין
   והשאירו 468px של חלל ריק משמאל מתחת ל-H1 שכן נמתח לכל הרוחב. זה נקרא כתקלה ולא כהחלטה.
   הפתרון אינו להרחיב: שורה של 1368px בעברית היא כ-160 תווים ובלתי קריאה. במקום זה כל הקטע
   שמתחת לרשימה הופך לעמודה אחת ממורכזת, כולל ה-h2 שלו, כך שהרווח מתחלק לשני הצדדים.
   הרשימה עצמה נשארת ברוחב המלא: נתונים רוצים רוחב, פרוזה רוצה מידה. */
/* ⚠️ רונן 21/09/2026, סבב שלישי: הסיידבר שנוסה קודם הוסר ("עמוס מדי, קשה לקרוא,
   והמאמרים קופצים בחלק של השאלות"). כל הקטע שמתחת לרשימה עובר לרוחב מלא, בהתאם לדפוס
   שכתוב אצלנו (feedback-compare-results-ux-patterns §7: "רוחב מלא לדף חד-עמודתי").
   העומס מטופל בריווח ובחלוקה לפסקאות ולא בצמצום הרוחב. */
.bl-content { max-width: none; }
.bl-howto, .bl-content details.bl-faq, .bl-content > p { max-width: none; }
.bl-method p, .bl-method h3 { max-width: none; }
/* ריווח בין נושאים: כל h3 פותח בלוק ולא שורה נוספת ברצף */
.bl-howto h3 { margin-top: 34px; }
.bl-howto h3:first-of-type { margin-top: 18px; }
.bl-side__all { margin: 14px 0 0; }


.bl-content h2, .bl-about h2, .bl-versus h2, .bl-proscons h2, .bl-timeline-box h2, .bl-calc h2, .bl-spec h2, .bl-fine h2, .bl-plan-side h2, .bl-list > h2 { font-size: 22px; font-weight: 800; margin: 30px 0 10px; }
.bl-content h3, .bl-howto h3 { font-size: 18.5px; font-weight: 700; margin: 22px 0 8px; }
/* ריווח שורה נדיב במיוחד: ברוחב מלא השורה ארוכה, ומרווח הוא מה שמאפשר לעין למצוא את תחילת השורה הבאה */
.bl-content p, .bl-howto p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.95; }
.bl-howto h2 { font-size: 22px; font-weight: 800; margin: 30px 0 10px; }
.bl-howto ul, .bl-howto ol { padding-inline-start: 20px; font-size: 16.5px; line-height: 1.7; }
.bl-howto table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 12px; }
.bl-howto th, .bl-howto td { border: 1px solid var(--kg-line); padding: 6px 8px; text-align: right; }
.bl-provs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .bl-provs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bl-provs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* גריד הספקים: הלוגו 140x70 מעל השם (ממצא רונן 3) */
.bl-provs a { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--kg-line); border-radius: 10px; padding: 12px 10px; text-decoration: none; color: var(--kg-ink); font-size: 14px; min-width: 0; text-align: center; }
.bl-provs a:hover { border-color: var(--kg-brand); }
.bl-provs a small { display: block; color: var(--kg-muted); font-size: 12.5px; }
.bl-provs .bl-plogo--grid { max-width: 100%; }
.bl-provs span.t { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.bl-subcats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.bl-subcats a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--kg-line); border-radius: 999px; background: #fff; text-decoration: none; color: var(--kg-ink); font-size: 14px; }
.bl-subcats a:hover, .bl-subcats a.is-on { border-color: var(--kg-brand); background: var(--kg-soft); color: var(--kg-brand-dark); }
.bl-subcats a small { color: var(--kg-muted); }
details.bl-faq { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 10px; padding: 0 14px; margin: 0 0 8px; }
details.bl-faq summary { cursor: pointer; font-weight: 700; font-size: 16.5px; min-height: 48px; display: flex; align-items: center; gap: 8px; list-style: none; }
details.bl-faq summary::-webkit-details-marker { display: none; }
details.bl-faq summary::before { content: "+"; width: 22px; height: 22px; border-radius: 50%; background: var(--kg-soft2); color: var(--kg-brand-dark); display: grid; place-items: center; font-size: 15px; flex: 0 0 auto; }
details.bl-faq[open] summary::before { content: "\2013"; }
details.bl-faq .bl-faq__a { padding: 0 30px 14px 0; margin: 0; font-size: 16.5px; line-height: 1.95; color: var(--kg-ink); }
details.bl-faq .bl-faq__a p { margin: 0 0 6px; }
/* "להרחבה: {כותרת המדריך}" (רונן 21/09/2026): ניווט ולא המשך התשובה, ולכן קטן מגוף התשובה, מופרד בקו דק
   ובצבע המותג. הטקסט עלול להיות ארוך (כותרות מדריך מגיעות ל-60 תו), ולכן overflow-wrap ולא nowrap. */
details.bl-faq .bl-faq__more { margin: 0 30px 12px 0; padding-top: 10px; border-top: 1px solid var(--kg-line); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
details.bl-faq .bl-faq__more a { color: var(--kg-brand-dark); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--kg-line-strong); }
details.bl-faq .bl-faq__more a:hover, details.bl-faq .bl-faq__more a:focus-visible { border-bottom-color: var(--kg-brand-dark); }
.bl-method { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; font-size: 16px; }
.bl-method h3 { margin: 0; font-size: 17.5px; }
.bl-method p { margin: 0; }
.bl-method code { font-family: Consolas, Menlo, monospace; font-size: 12.5px; background: #f1f5f3; border-radius: 4px; padding: 2px 6px; direction: ltr; unicode-bidi: isolate; display: inline-block; overflow-wrap: anywhere; max-width: 100%; }

/* --- מגש ההשוואה (דסקטופ) ופס דביק (מובייל) ------------------------------------- */
.bl-tray { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: #fff; border-top: 1.5px solid var(--kg-line); box-shadow: 0 -6px 20px rgba(15, 90, 71, .12); transform: translateY(110%); transition: transform .2s; display: none; direction: rtl; }
.bl-tray.is-on { transform: none; }
@media (min-width: 992px) { .bl-tray { display: block; } }
.bl-tray__in { max-width: var(--bl-max); margin: 0 auto; padding: 10px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bl-tray__t { font-weight: 700; font-size: 14px; }
.bl-tray__chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.bl-tray__actions { display: flex; gap: 8px; margin-inline-start: auto; }
.bl-mbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: #fff; border-top: 1.5px solid var(--kg-line); box-shadow: 0 -6px 20px rgba(15, 90, 71, .12); padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; direction: rtl; }
@media (min-width: 992px) { .bl-mbar { display: none; } }
.bl-mbar__cnt { border: 0; background: transparent; font-size: 12.5px; color: var(--kg-muted); min-height: 44px; padding: 0 4px; cursor: pointer; line-height: 1.2; text-align: right; flex: 0 0 auto; }
.bl-mbar__cnt b { display: block; font-size: 15px; color: var(--kg-ink); }
.bl-mbar__cmp { display: inline-flex; align-items: center; border: 1.5px solid var(--kg-line-strong); background: #fff; border-radius: 10px; min-height: 46px; padding: 0 12px; font-size: 14px; font-weight: 700; color: var(--kg-brand-dark); cursor: pointer; white-space: nowrap; flex: 0 0 auto; text-decoration: none; font-family: inherit; }
.bl-mbar__cmp.is-disabled { color: var(--kg-muted); opacity: .6; }
.bl-mbar .bl-btn--primary { flex: 1; min-width: 0; padding: 0 10px; }

/* --- דף ספק --------------------------------------------------------------------- */
.bl-phero { background: #fff; border: 1.5px solid var(--kg-line); border-radius: var(--bl-radius); padding: 16px; margin: 6px 0 12px; display: grid; gap: 12px; }
.bl-phero__head { display: flex; gap: 14px; align-items: flex-start; }
.bl-phero .bl-h1 { margin-top: 0; }
.bl-phero__service { display: grid; grid-template-columns: 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
@media (min-width: 700px) { .bl-phero__service { grid-template-columns: repeat(3, minmax(0, auto)); } }
.bl-phero__service div { display: flex; gap: 6px; flex-wrap: wrap; }
.bl-phero__service dt { color: var(--kg-muted); }
.bl-phero__service dd { margin: 0; font-weight: 600; }
.bl-phero__cta { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; }
/* 375px (30/09/2026): כפתור ה-CTA הוא nowrap, ו"השאירו פרטים ונציג Partner Power יחזור אליכם" (357px) הרחיב את עמודת ה-grid והדף גלש 7-15px הצידה */
.bl-phero__cta .bl-btn { white-space: normal; max-width: 100%; }
.bl-phero__trust { font-size: 12.5px; color: var(--kg-muted); }
.bl-versus-t td.is-best { background: var(--kg-soft2); color: var(--kg-brand-dark); font-weight: 800; }
.bl-proscons__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .bl-proscons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bl-proscons__col { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 12px; padding: 12px 14px; }
.bl-proscons__col h3 { margin: 0 0 6px; font-size: 16px; color: var(--kg-pos); }
.bl-proscons__col--cons h3 { color: var(--kg-warn); }
.bl-proscons__col ul { margin: 0; padding-inline-start: 18px; font-size: 14px; display: grid; gap: 4px; }

/* --- דף חבילה ------------------------------------------------------------------- */
.bl-plan-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 992px) { .bl-plan-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; } .bl-plan-side { position: sticky; top: 16px; } }
.bl-plan-main { min-width: 0; }
.bl-timeline-box, .bl-calc, .bl-spec, .bl-fine { background: #fff; border: 1.5px solid var(--kg-line); border-radius: var(--bl-radius); padding: 14px 16px; margin-top: 14px; }
.bl-timeline-box h2, .bl-calc h2, .bl-spec h2, .bl-fine h2 { margin-top: 0; font-size: 19px; }
.bl-timeline { width: 100%; height: auto; display: block; max-width: 720px; }
.bl-tl-axis { stroke: var(--kg-line); stroke-width: 1; }
.bl-tl-promo, .bl-tl-legend .bl-tl-promo { fill: var(--kg-brand); background: var(--kg-brand); }
.bl-tl-full, .bl-tl-legend .bl-tl-full { fill: #9fb8ae; background: #9fb8ae; }
.bl-tl-equip, .bl-tl-legend .bl-tl-equip { fill: var(--bl-navy); background: var(--bl-navy); }
.bl-tl-one, .bl-tl-legend .bl-tl-one { fill: var(--bl-amber); background: var(--bl-amber); }
.bl-tl-label { font-size: 11px; fill: var(--kg-muted); font-family: inherit; }
.bl-tl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; color: var(--kg-muted); }
.bl-tl-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-inline-end: 4px; }
.bl-tl-totals { margin: 10px 0 0; font-size: 14.5px; }
.bl-tl-totals b { color: var(--kg-brand-dark); }
.bl-calc__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bl-calc__out { margin: 10px 0 0; font-size: 15px; }
.bl-calc__out b { color: var(--kg-brand-dark); font-size: 18px; }
.bl-spec-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.bl-spec-t th, .bl-spec-t td { padding: 8px 6px; border-bottom: 1px solid #eef2f0; text-align: right; vertical-align: top; }
.bl-spec-t th { color: var(--kg-muted); font-weight: 600; width: 34%; }

/* --- טבלת ההשוואה זו-מול-זו ------------------------------------------------------- */
.bl-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bl-cmp-t { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; background: #fff; }
.bl-cmp-t th, .bl-cmp-t td { padding: 8px 10px; border-bottom: 1px solid #eef2f0; text-align: right; vertical-align: top; }
.bl-cmp-t thead th { background: var(--kg-soft); font-weight: 800; position: sticky; top: 0; }
.bl-cmp-t thead th a { color: var(--kg-ink); text-decoration: none; }
.bl-cmp-t tbody th { color: var(--kg-muted); font-weight: 600; white-space: nowrap; }
.bl-cmp-t td.is-best { background: var(--kg-soft2); color: var(--kg-brand-dark); font-weight: 800; }
.bl-cmp-t tr[hidden] { display: none; }
/* ממצא רונן 6 (2026-09-19): הכרטיס העוטף נושא את הגבול והפינות המעוגלות; הגולל והטבלה בפנים בלי רדיוס.
   טבלה ב-border-collapse מתעלמת מ-border-radius ותאי הכותרת הדביקים צובעים רקע מלבני, ולכן רדיוס על הטבלה תמיד נחתך בפינות */
.bl-cmp-card { border: 1.5px solid var(--kg-line); border-radius: var(--bl-radius); background: #fff; overflow: hidden; }
.bl-cmp-card .bl-cmp-t { min-width: 0; }
.bl-cmp-t tbody tr:last-child th, .bl-cmp-t tbody tr:last-child td { border-bottom: 0; }
/* זו-מול-זו (Compare.cshtml): עמודות שוות. table-layout:fixed + <col> לעמודת התוויות ⇒ שאר העמודות מתחלקות שווה בשווה
   (QA רונן 2026-09-18: ברוחב אוטומטי העמודות נקבעו לפי אורך הטקסטים). --bl-cols מהשרת קובע רוחב מינימלי, ומתחתיו
   .bl-scroller גולל אופקית עם עמודת התוויות דביקה (inset-inline-start = ימין ב-RTL). */
.bl-cmp-t--fixed { table-layout: fixed; --bl-lab: 160px; min-width: max(100%, calc(var(--bl-lab) + var(--bl-cols, 2) * 110px)); }
.bl-cmp-t--fixed col.bl-cmp-t__lab { width: var(--bl-lab); }
.bl-cmp-t--fixed th, .bl-cmp-t--fixed td { overflow-wrap: anywhere; }
.bl-cmp-t--fixed thead th { vertical-align: top; }
.bl-cmp-t--fixed thead th .bl-plogo--table { margin: 0 0 6px; }
.bl-cmp-t--fixed thead th small { display: block; color: var(--kg-muted); font-weight: 500; font-size: 12.5px; }
.bl-cmp-t--fixed tbody th { white-space: normal; }
.bl-cmp-t--fixed thead th:first-child, .bl-cmp-t--fixed tbody th { position: sticky; inset-inline-start: 0; z-index: 2; background: #fff; box-shadow: -1px 0 0 #eef2f0 inset; }
.bl-cmp-t--fixed thead th:first-child { background: var(--kg-soft); z-index: 3; }
@media (max-width: 767.98px) {
    .bl-cmp-t--fixed { --bl-lab: 110px; font-size: 13px; }
    .bl-cmp-t--fixed th, .bl-cmp-t--fixed td { padding: 8px 6px; }
}
.bl-cmp-t__cta td { vertical-align: middle; }
.bl-cmp-t__cta .bl-btn { margin: 2px 0; min-height: 44px; font-size: 13.5px; padding: 0 10px; width: 100%; }
.bl-cmp__tools { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; font-size: 13.5px; }
.bl-cmp__tools label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; min-height: 44px; }
.bl-cmp__tools input { accent-color: var(--kg-brand); margin: 0; width: 18px; height: 18px; }

/* --- מודל ההשוואה מעל הרשימה (ממצא רונן 4, 2026-09-19; #bl-cmpm ב-_BillsCompareTray, הטבלה מ-bills-compare.js) ---------
   שפת פאנל ההשוואה המפורטת של הגמל: כותרת דביקה עם כרטיס לחבילה (לוגו 80x40, ספק, שם, מחיר), שורות עם "הטוב ביותר",
   "רק ההבדלים", CTA ליד לכל עמודה. z-index מתחת למודל הליד של Bootstrap (1055) כדי שהליד ייפתח מעליו. */
.bl-cmpm { position: fixed; inset: 0; z-index: 1040; display: grid; place-items: center; padding: 16px; direction: rtl; }
.bl-cmpm[hidden] { display: none; }
.bl-cmpm__backdrop { position: absolute; inset: 0; background: rgba(15, 40, 30, .55); }
.bl-cmpm__dlg { position: relative; width: min(var(--bl-max), 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 40, 30, .35); overflow: hidden; }
.bl-cmpm__head { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1.5px solid var(--kg-line); background: #fff; }
.bl-cmpm__title { margin: 0; font-size: 20px; font-weight: 800; }
.bl-cmpm__tools { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-inline-start: auto; font-size: 15px; }
.bl-cmpm__diff { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; margin: 0; font-weight: 600; }
.bl-cmpm__diff input { accent-color: var(--kg-brand); margin: 0; width: 18px; height: 18px; }
.bl-cmpm__copy { min-height: 44px; }
.bl-cmpm__url { flex: 1 1 260px; min-width: 0; min-height: 40px; border: 1.5px solid var(--kg-line-strong); border-radius: 8px; padding: 0 10px; font-family: inherit; font-size: 14px; direction: ltr; text-align: left; color: var(--kg-ink); background: var(--kg-soft); }
.bl-cmpm__url[hidden] { display: none; }
.bl-cmpm__x { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--kg-muted); font-size: 22px; margin-inline-end: -8px; }
.bl-cmpm__x:hover { background: var(--kg-soft); color: var(--kg-ink); }
.bl-cmpm__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.bl-cmpm__body .bl-cmp-t { min-width: max(100%, calc(var(--bl-lab) + var(--bl-cols, 2) * 200px)); }
.bl-cmpm__body .bl-cmp-t thead th { top: 0; box-shadow: 0 1px 0 var(--kg-line); vertical-align: top; }
.bl-cmpm__card { display: grid; gap: 4px; justify-items: start; font-weight: 500; }
.bl-cmpm__card small { display: block; color: var(--kg-muted); font-weight: 500; font-size: 12.5px; }
.bl-cmpm__card b { font-size: 15px; font-weight: 800; }
.bl-cmpm__card .bl-cmpm__price { font-size: 22px; font-weight: 800; color: var(--kg-brand); line-height: 1.1; }
.bl-cmpm__card .bl-cmpm__price small { display: inline; font-size: 12.5px; color: var(--kg-muted); font-weight: 500; }
.bl-cmpm__rm { border: 0; background: transparent; color: var(--kg-muted); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0; min-height: 32px; font-family: inherit; }
.bl-cmpm__rm:hover { color: var(--kg-neg); }
.bl-cmpm__empty { padding: 32px 16px; text-align: center; color: var(--kg-muted); }
body.bl-cmpm-open { overflow: hidden; }
@media (max-width: 767.98px) {
    .bl-cmpm { padding: 0; }
    .bl-cmpm__dlg { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
    .bl-cmpm__title { font-size: 17px; }
    .bl-cmpm__tools { margin-inline-start: 0; width: 100%; order: 3; font-size: 14px; }
    .bl-cmpm__x { margin-inline-start: auto; }
    .bl-cmpm__body .bl-cmp-t { min-width: max(100%, calc(var(--bl-lab) + var(--bl-cols, 2) * 150px)); }
    .bl-cmpm__card .bl-cmpm__price { font-size: 18px; }
}

@media print { .bl-mbar, .bl-tray, .bl-fbar-wrap, .bl-toast, .bl-cmpm { display: none !important; } }