/* =============================================================================
   bills-electricity.css: דפי החשמל (שלב 3, מוקאפ A "המחשבון קודם"; _BillsElectricityBody / _BillsElectricityRow).
   נטען רק בדפי החשמל, אחרי bills-compare.css, ומשתמש באותם טוקנים (--kg-*) ובאותה שורה (.bl-rows--table).
   כאן רק מה שאין לסלולר: הכלי (קובץ + מחשבון מהיר + תוצאה + גרף), פס 24 השעות והימים, האחוז הגדול והחיסכון,
   הצ'יפים של החשמל, ושורת ההנחה ליד המיון. RTL מלא, gutter 16px מגיע מהמעטפת, tap >= 44px.
   ============================================================================= */
.bl-cmp-page { --el-win: #17765a; --el-win2: #224970; --el-win3: #c77700; --el-track: #e4ece8; --bl-amber-bg: #fff9ec; --el-cash: #4a3bb5; }

/* --- כפתורים ותוויות קטנות ------------------------------------------------ */
.bl-est { display: inline-flex; align-items: center; border-radius: 999px; background: var(--bl-amber-bg); color: #8a5300; border: 1px solid #f0d9a6; font-size: 12.5px; font-weight: 700; padding: 1px 8px; line-height: 1.5; white-space: nowrap; }
.el-linkbtn { border: 0; background: none; color: var(--kg-brand-dark); font-weight: 700; font-size: 14.5px; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 2px; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }

/* =============================================================================
   הכלי
   ============================================================================= */
.el-tool { position: relative; background: linear-gradient(180deg, #eaf5ef 0%, #fff 80%); border: 1.5px solid #cfe3da; border-radius: var(--bl-radius, 14px); padding: 18px 16px 16px; margin: 4px 0 14px; box-shadow: 0 2px 10px rgba(15, 90, 71, .06); }
.el-tool__h { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 21px; font-weight: 800; }
.el-tool__h small { font-weight: 400; color: var(--kg-muted); font-size: 15px; }
.el-tabs { display: flex; margin: 0 0 12px; width: 100%; }
.el-tabs button { flex: 1 1 50%; }
.el-panels { display: grid; gap: 16px; }
.el-panels[hidden] { display: none; }
.el-panel { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 12px; padding: 14px; min-width: 0; }
.el-panel__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; font-weight: 800; margin: 0 0 10px; }
.el-tagline { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 1px 9px; background: var(--kg-soft2); color: var(--kg-brand-dark); }
.el-tagline.is-q { background: #eef0ef; color: var(--kg-muted); }
.el-panels[data-show="file"] .el-quick, .el-panels[data-show="quick"] .el-file { display: none; }

/* תיבת הגרירה */
.el-drop { border: 2px dashed #9cc3b3; border-radius: 12px; background: #f6fbf8; padding: 18px 14px; display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer; transition: background .12s, border-color .12s; }
.el-drop:hover, .el-drop.is-over { background: var(--kg-soft2); border-color: var(--kg-brand); }
.el-drop.is-busy { opacity: .6; pointer-events: none; }
.el-drop > svg.kg-i { width: 34px; height: 34px; color: var(--kg-brand); }
.el-drop b { font-size: 17px; }
.el-drop small { color: var(--kg-muted); font-size: 13.5px; }
.el-drop .bl-btn { min-height: 44px; }
.el-file__status { margin: 8px 0 0; font-size: 14.5px; color: var(--kg-muted); }
.el-file__err { margin: 10px 0 0; font-size: 15px; color: var(--kg-neg); background: #fef3f2; border-radius: 10px; padding: 8px 12px; font-weight: 600; }
.el-file__err[hidden], .el-file__status[hidden] { display: none; }
.el-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--kg-brand-dark); background: var(--kg-soft); border-radius: 10px; padding: 8px 12px; margin: 10px 0 0; }
.el-privacy svg.kg-i { width: 20px; height: 20px; margin-top: 2px; }
.el-steps__h { margin: 12px 0 0; font-weight: 700; }
.el-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: st; }
.el-steps li { counter-increment: st; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14.5px; line-height: 1.45; }
.el-steps li::before { content: counter(st); width: 24px; height: 24px; border-radius: 50%; background: var(--kg-brand); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }
.el-steps .el-path { color: var(--kg-muted); }
.el-steps .el-path b { color: var(--kg-ink); font-weight: 700; }
.el-steps__note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--kg-muted); }
.el-file__foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; font-size: 14px; color: var(--kg-muted); }

/* המחשבון המהיר */
.el-q { margin: 0 0 12px; }
.el-q__l { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.el-q__n { width: 22px; height: 22px; border-radius: 50%; background: var(--kg-brand); color: #fff; font-size: 12.5px; display: grid; place-items: center; flex: 0 0 auto; }
.el-bill { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.el-money { display: inline-flex; align-items: center; border: 1.5px solid var(--kg-line-strong); border-radius: 10px; background: #fff; min-height: 48px; padding: 0 10px; gap: 6px; }
.el-money input { border: 0; outline: 0; width: 110px; font-size: 18px; font-weight: 700; min-height: 44px; background: transparent; direction: ltr; text-align: right; font-family: inherit; }
.el-money:focus-within { border-color: var(--kg-brand); box-shadow: 0 0 0 3px rgba(23, 118, 90, .15); }
.el-quick .bl-seg { flex-wrap: nowrap; }
.el-quick__out { border: 1.5px solid var(--kg-brand); background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 15.5px; display: grid; gap: 4px; }
.el-quick__out[hidden] { display: none; }
.el-quick__out .el-range { font-size: 22px; font-weight: 800; color: var(--kg-brand-dark); }
.el-quick__out small { color: var(--kg-muted); font-size: 13.5px; }
.el-quick__out.is-err { border-color: var(--kg-neg); color: var(--kg-neg); }
.el-quick__hint { color: var(--kg-muted); font-size: 14px; margin: 0; }

/* התוצאה של הקובץ */
.el-result { display: grid; gap: 12px; }
.el-result[hidden] { display: none; }
.el-result__head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; background: #fff; border: 1.5px solid var(--kg-brand); border-radius: 12px; padding: 12px 14px; }
.el-result__head > svg.kg-i { width: 26px; height: 26px; color: var(--kg-brand); margin-top: 2px; }
.el-result__sum { flex: 1 1 260px; margin: 0; font-size: 16px; }
.el-result__sum b { font-size: 18px; }
.el-result__sum .el-sep { color: #b9c9c2; margin: 0 4px; }
.el-result__sum small { display: block; font-size: 13.5px; color: var(--kg-muted); margin-top: 2px; }
.el-result__side { display: grid; gap: 12px; min-width: 0; align-content: start; }
.el-result__side p { margin: 0; }
.el-result__note { font-size: 15.5px; }
.el-chartbox { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 12px; padding: 12px 12px 10px; min-width: 0; }
.el-chartbox h3 { font-size: 16px; font-weight: 800; margin: 0 0 2px; }
.el-cap { font-size: 13.5px; color: var(--kg-muted); margin: 0 0 8px; }
.el-chart { width: 100%; min-height: 150px; }
.el-chart svg { display: block; width: 100%; height: auto; }
.el-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.el-legend li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.el-legend i { width: 22px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.el-legend .el-lg-save { margin-inline-start: auto; font-weight: 800; color: var(--kg-brand-dark); }
.el-inline-link { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.el-why { font-size: 15.5px; background: var(--kg-soft); border-radius: 10px; padding: 10px 12px; }
.el-why[hidden] { display: none; }
.el-why b { color: var(--kg-brand-dark); }

@media (min-width: 992px) {
    .el-tabs { display: none; }
    .el-panels { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
    .el-panels[data-show] .el-file, .el-panels[data-show] .el-quick { display: block; }
    .el-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
}
@media (min-width: 1200px) {
    .el-file__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
    .el-file__grid .el-steps { grid-template-columns: 1fr; margin-top: 6px; }
    .el-file__grid .el-steps__h { margin-top: 0; }
    .el-result__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
}
@media (max-width: 991.98px) { .el-result__grid { display: grid; gap: 12px; } }
@media (max-width: 767.98px) {
    .el-tool { padding: 14px 12px 12px; }
    .el-tool__h { font-size: 19px; }
    .el-panel { padding: 12px; }
}

/* =============================================================================
   הסרגל וההנחה ליד המיון
   ============================================================================= */
.el-tchip input { accent-color: var(--kg-brand); width: 18px; height: 18px; margin: 0; }
.el-tchip:has(input:checked) { border-color: var(--kg-brand); background: var(--kg-brand); color: #fff; }
.el-tchip:has(input:checked) .bl-ppill__cnt { background: rgba(255, 255, 255, .24); color: #fff; }
.el-assume { font-size: 13.5px; color: var(--kg-muted); display: inline-flex; align-items: center; gap: 6px; }
.el-assume b { color: var(--kg-ink); font-weight: 700; }
.el-assume a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.el-assume--bar { display: none; white-space: nowrap; }
.el-listhead { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; margin: 10px 0 0; font-size: 14.5px; color: var(--kg-muted); }
.el-listhead h2 { font-size: 20px; font-weight: 800; margin: 0; color: var(--kg-ink); }
.el-listhead .el-assume { display: block; line-height: 1.7; }
.el-listhead .el-assume a { display: inline; min-height: 0; margin: 0; padding: 12px 0; }
@media (min-width: 992px) {
    .el-assume--bar { display: inline-flex; }
    .el-listhead .el-assume { display: none; }
}

/* =============================================================================
   השורה (מעל .bl-rows--table של bills-compare.css)
   ============================================================================= */
.bl-cmp-page .el-row.is-last { background: #fcfcfa; }
@media (min-width: 992px) {
    /* אין בשורת החשמל שמירה/שיתוף, ולכן העמודה הרביעית לא צריכה את הריווח העליון שלהם */
    .bl-rows--table .el-row .bl-c4 { padding-top: 0; }
}
.el-chips li { display: inline-flex; align-items: center; gap: 5px; white-space: normal; max-width: 100%; line-height: 1.45; }
.el-chips li[hidden] { display: none; }
.el-chips li.is-need { background: #eef3fa; color: #1d4169; }
.el-chips li.is-free { background: var(--kg-soft2); color: var(--kg-brand-dark); }
.el-chips li.is-cond { background: var(--bl-amber-bg); color: #8a5300; font-weight: 700; }
.el-chips li.is-fee { background: var(--kg-warn-bg); color: #9c3a14; font-weight: 700; }
.el-chips li.is-cash { background: #f3efff; color: var(--el-cash); font-weight: 700; }

/* פס 24 השעות + ימי השבוע */
.el-when { display: grid; gap: 6px; max-width: 600px; }
.el-when__vis { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: flex-start; }
.el-when__vis .el-band { flex: 1 1 200px; min-width: 0; max-width: 380px; }
.el-when__vis .el-days { flex: 0 0 auto; }
.el-when__t { font-size: 15px; display: flex; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; }
.el-when__t b { font-weight: 800; }
.el-cross { font-size: 13px; color: var(--kg-muted); }
.el-band { direction: ltr; position: relative; padding-bottom: 16px; }
.el-band__track { position: relative; height: 14px; border-radius: 7px; background: var(--el-track); overflow: hidden; }
.el-band__track i { position: absolute; top: 0; bottom: 0; background: var(--el-win); }
.el-band__track::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255, 255, 255, .85) calc(25% - 1px), rgba(255, 255, 255, .85) 25%); pointer-events: none; }
.el-band__ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 15px; font-size: 11.5px; color: var(--kg-muted); }
.el-band__ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.el-band__ticks span:first-child { transform: none; }
.el-band__ticks span:last-child { transform: translateX(-100%); }
.el-days { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; }
.el-days li { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: #f1f4f2; color: #7d918a; }
.el-days li.on { background: var(--kg-soft2); color: var(--kg-brand-dark); box-shadow: inset 0 0 0 1.5px var(--kg-brand); }

/* עמודה 3: האחוז הגדול + החיסכון */
.el-pct { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1; }
.el-pct b { font-size: 36px; font-weight: 800; color: var(--kg-brand); letter-spacing: -.01em; }
.el-pct b small { font-size: .6em; font-weight: 800; }
.el-pct b .el-upto { font-size: .45em; font-weight: 700; margin-inline-end: 3px; }
.el-pct > span { font-size: 14px; color: var(--kg-muted); line-height: 1.3; max-width: 170px; }
.el-pct.is-cash b { color: var(--el-cash); }
.el-save { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; font-size: 15px; margin-top: 4px; }
.el-save > span:first-child { color: var(--kg-ink); }
.el-save b { font-size: 21px; font-weight: 800; color: var(--kg-brand-dark); }
.el-save b small { font-size: .7em; }
.el-save b.el-neg, .el-save__sub .el-neg { color: var(--kg-neg); }
.el-save b.el-cashnum { color: var(--el-cash); }
.el-save__sub { font-size: 13.5px; color: var(--kg-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.el-inwin { font-size: 13.5px; color: var(--kg-muted); }
.el-inwin b { color: var(--kg-ink); }
.el-calc { font-size: 14px; color: var(--kg-muted); background: var(--kg-soft); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.el-calc code { color: var(--kg-ink); font-size: 13.5px; font-family: inherit; direction: rtl; unicode-bidi: isolate; display: inline-block; background: #fff; border-radius: 5px; padding: 1px 6px; overflow-wrap: anywhere; white-space: normal; }

@media (min-width: 768px) { .el-pct b { font-size: 40px; } }
@media (min-width: 992px) { .bl-c2 .el-when { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1300px) { .el-pct b { font-size: 44px; } }
@media (max-width: 767.98px) {
    .el-when { max-width: none; }
    .el-when__vis .el-band { flex-basis: 100%; max-width: none; }
    .el-row .bl-c3 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; }
    .el-row .bl-c3 .el-pct { grid-row: span 3; flex-direction: column; align-items: flex-start; gap: 2px; }
    .el-row .bl-c3 .el-save { margin-top: 0; }
    .el-row .bl-c4 { flex-direction: row; align-items: center; gap: 8px; }
    .el-row .bl-c4 .bl-btn { flex: 1 1 auto; width: auto; }
    .el-row .bl-c4 .bl-more { flex: 0 0 auto; padding: 0 4px; }
}

/* =============================================================================
   "השוו" (עד 4): המגש, הפס והמודל הם של הסלולר (bills-compare.css: .bl-tray, .bl-mbar, .bl-cmpm, .bl-cmp-t).
   כאן רק מה שמיוחד לחשמל: פס 24 שעות קטן בתא, תג (זכאות / הערכה / לא מאומת) שמותר לו להישבר, האחוז הגדול בכותרת העמודה,
   והפס במובייל שמופיע רק אחרי הסימון הראשון (בלי "השאירו פרטים" כללי אין בו מה להציג לפני כן).
   ============================================================================= */
.el-band--mini { display: block; padding-bottom: 0; max-width: 200px; margin: 3px 0 6px; }
.el-band--mini .el-band__track { display: block; height: 10px; border-radius: 5px; }
.el-cmp-tag { white-space: normal; margin-top: 2px; font-weight: 700; }
.bl-cmp-t td.is-best .el-cmp-tag { font-weight: 700; }
.el-cmp-src { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 600; }
.el-cmpm__card .bl-btn { min-height: 44px; font-size: 14px; padding: 0 10px; width: 100%; max-width: 200px; margin-top: 2px; }
.bl-cmpm__price.is-cash { color: var(--el-cash); }
.bl-cmpm__price .bl-num small { font-size: .55em; font-weight: 700; color: inherit; }
/* /compare של חשמל: הטקסטים ארוכים מאלה של הסלולר (תנאים, צבירה), ולכן לכל עמודה רוחב מינימלי והטבלה נגללת בתוך .bl-scroller */
.bl-cmp-card .bl-cmp-t.el-cmp-t { min-width: max(100%, calc(var(--bl-lab) + var(--bl-cols, 2) * 150px)); }
.bl-cmp-t thead .el-cmp-pct { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; color: var(--kg-brand); line-height: 1.1; }
.bl-cmp-t thead .el-cmp-pct.is-cash { color: var(--el-cash); }
.bl-cmp-t--fixed thead th .el-cmp-pct small { display: inline; } /* גובר על "thead th small { display: block }" של bills-compare.css */
.bl-cmp-t--fixed thead th .el-cmp-pct > small { font-size: 12.5px; color: var(--kg-muted); font-weight: 500; }
.bl-cmp-t--fixed thead th .el-cmp-pct .bl-num small { font-size: .55em; font-weight: 700; color: inherit; }
.el-cmpm__card b a { display: inline-block; padding: 12px 0; margin: -12px 0; } /* tap >= 44px בלי להזיז את הפריסה */
.el-cmpm__card .bl-cmpm__rm { min-height: 44px; margin: -4px 0 -8px; }
.bl-cmp-page[data-category="electricity"] .bl-mbar__cmp { flex: 1 1 auto; justify-content: center; }
.bl-cmp-page[data-category="electricity"] .bl-mbar__cmp:not(.is-disabled) { background: var(--kg-brand); border-color: var(--kg-brand); color: #fff; }
body:not(.bl-tray-on) .bl-cmp-page[data-category="electricity"] .bl-mbar { display: none; }
@media (max-width: 767.98px) {
    /* בכרטיס המובייל: "השאירו פרטים" ברוחב מלא, ומתחתיו "השוו" מול "פרטים ותנאים" (כמו בסלולר) */
    .el-row .bl-c4.el-c4--cmp { flex-direction: column; align-items: stretch; gap: 4px; }
    .el-row .bl-c4.el-c4--cmp .bl-btn { width: 100%; }
    /* הכותרת הדביקה של המודל לא תאכל את המסך: לוגו נמוך ורווחים צפופים */
    .el-cmpm__card { gap: 2px; }
    .el-cmp-t thead th .el-cmpm__card .bl-plogo--table { height: 28px; width: 56px; margin: 0 0 2px; }
}

/* מסך ההצלחה של ספק בלי ערוץ לידים (הכרעה 13; _LeadModal [data-lead-ok-nochannel]) */
.bl-lead__join { margin-top: 8px; }

@media print { .el-tool { display: none !important; } }

/* קישורי "להרחבה" למדריכים בדף ההשוואה (מופיעים רק כשהמדריך ברשימות) */
.el-more { margin: 10px 0 0; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.el-more a { color: var(--kg-brand-dark); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--kg-line-strong); display: inline-block; padding: 6px 0; }
.el-more a:hover, .el-more a:focus-visible { border-bottom-color: var(--kg-brand-dark); }
.el-more--hero { margin-top: 12px; }