/* ============================================================
   portfolio-modern.css
   סגנונות משותפים לדפי ניהול התיקים המודרניים (pm-*):
   ComparePortfolioManagement / PortfolioManagement / ComparePortfolioManagementDetails
   משלים את kupat-gemel.css + gemel-modern.css (kg-*) — לא מחליף אותם.
   ============================================================ */

/* --- Disclaimer (SMdisclaimer) ---
   ⚠️ compareTables.css קובע גלובלית width:96% + קופסה ירוקה-זיתית ישנה
   (#edf1d8/border #d8dbb0) — צר משאר האלמנטים ומתנגש עם עיצוב הכרטיסים
   הלבנים החדש. #main.gemel-compare-wide מתווסף ע"י ה-script המשותף
   בראש כל שלושת דפי ניהול התיקים (רשימה/מוצר/השוואה) — סקופ אחיד לשלושתם.
   דסקטופ+מובייל: רוחב מלא, קופסה לבנה תואמת ל-pm-section/pm-trust-box. */
#main.gemel-compare-wide .SMdisclaimer {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    box-sizing: border-box;
    margin: 16px 0 20px !important;
    padding: 14px 18px !important;
    background: #f8fafb;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    font-size: .85rem;
    line-height: 1.6;
    color: #6c757d;
}
#main.gemel-compare-wide .SMdisclaimer p { margin: 0; }

/* --- צ'יפים לסינון תקציב --- */
.pm-budget-label { font-weight: bold; margin-bottom: 8px; display: block; }
.pm-budget-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-budget-chip {
    border: 1px solid #cfd8e3; background: #fff; color: #2d3a38;
    border-radius: 999px; padding: 7px 16px; font-size: .9rem; cursor: pointer;
    transition: all .15s ease;
}
.pm-budget-chip:hover { border-color: #17765a; color: #17765a; }
.pm-budget-chip.active { background: #17765a; border-color: #17765a; color: #fff; font-weight: bold; }
.pm-filtered-count { font-size: .85rem; color: #17765a; margin-top: 8px; min-height: 1.2em; }

/* --- כרטיסי בתי ההשקעות (דף הרשימה) --- */
.pm-cards { display: flex; flex-direction: column; gap: 14px; }
.pm-card {
    background: #fff; border: 1px solid #e3e8ee; border-radius: 12px;
    padding: 16px 18px 0; overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.pm-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.07); border-color: #cfe0d9; }
.pm-card__main {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 14px;
}
.pm-card__brand { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; min-width: 0; }
.pm-company-logo {
    width: 84px; height: 54px; object-fit: contain; flex: 0 0 auto;
    background: #fff; border: 1px solid #eef1f4; border-radius: 6px; padding: 3px;
}
.pm-company-name { font-weight: bold; font-size: 1.02rem; color: #17765a; text-decoration: none; display: block; }
.pm-company-name:hover { text-decoration: underline; color: #0f5a44; }
.pm-badges { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.pm-badge {
    display: inline-block; background: #e8f3ef; color: #17765a;
    border-radius: 999px; padding: 1px 9px; font-size: .72rem; white-space: nowrap;
}
.pm-card__stats { display: flex; gap: 14px; flex: 1 1 300px; }
.pm-stat {
    flex: 1 1 0; background: #f8fafb; border: 1px solid #eef1f4; border-radius: 10px;
    padding: 10px 12px; text-align: center; min-width: 0;
}
.pm-stat__label { display: block; font-size: .75rem; color: #6c757d; margin-bottom: 3px; }
.pm-stat__value { display: block; font-weight: bold; font-size: 1.05rem; direction: ltr; }
.pm-stat__value--text { font-weight: normal; font-size: .85rem; direction: rtl; line-height: 1.45; }
.pm-card__actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    flex: 0 0 auto; min-width: 132px; text-align: center;
}
.pm-card__actions .pm-btn-review, .pm-card__actions .pm-btn-offer { margin: 0; }
.pm-compare-check { text-align: center; }

/* "עוד פרטים" — פס פתיחה ברוחב הכרטיס + תוכן נגלל */
.pm-toggle-desc {
    display: block; width: calc(100% + 36px); margin: 0 -18px;
    border: 0; border-top: 1px solid #eef1f4; background: #fafcfb;
    color: #17765a; font-size: .85rem; font-weight: bold; padding: 9px 18px; cursor: pointer;
    text-align: center;
}
.pm-toggle-desc:hover { background: #f0f7f4; }
.pm-toggle-desc .bi { transition: transform .15s ease; display: inline-block; }
.pm-toggle-desc--open .bi { transform: rotate(180deg); }
.pm-card__desc {
    display: none; margin: 0 -18px; padding: 14px 18px; background: #f8fafb;
    border-top: 1px solid #eef1f4; font-size: .9rem; line-height: 1.6; text-align: right;
}
.pm-card__desc.is-open { display: block; }
.pm-card__desc h4 { font-size: .95rem; font-weight: bold; margin: 0 0 6px; }

/* מובייל: הכרטיס נערם לעמודה, הפעולות בשורה */
@media (max-width: 767px) {
    /* ⚠️ .kg-calc-grid מוגדר width:100% — margin היה יוצר 100%+20px → גלישה
       אופקית שמטה את כל הדף (כולל ההדר). לכן ריווח פנימי עם border-box,
       שנשאר בתוך ה-100% ולא גולש. (מרווחי הצד של שאר הכרטיסים ברוחב-אוטומטי
       מוגדרים בבלוק בסוף הקובץ — חייב לבוא אחרי הגדרות ה-base כדי לגבור על
       ה-margin shorthand שלהן.) */
    .kg-calc-grid {
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }

    .pm-card__main { flex-direction: column; align-items: stretch; gap: 12px; }
    /* ⚠️ בציר עמודה ה-flex-basis האופקי (240px/300px) הופך לגובה מינימלי
       ויוצר רווחים ענקיים — מאפסים לגובה-תוכן */
    .pm-card__brand,
    .pm-card__stats,
    .pm-card__actions { flex: 0 0 auto; min-width: 0; }

    .pm-card__stats { width: 100%; }
    .pm-card__actions {
        flex-direction: row; justify-content: center; align-items: center;
        flex-wrap: wrap;
    }
}
@media (max-width: 420px) {
    .pm-card__stats { flex-direction: column; gap: 8px; }
    .pm-card__stats .pm-stat { flex: 0 0 auto; }
}

/* שורת הבקרות מעל הרשימה: תוצאות מימין, מיון משמאל.
   ⚠️ .indexControlsButtonsBox/.searchResultsNum הם מחלקות legacy עם
   width:650px;height:60px קבועים ו-float:right;position:relative;top:50px
   (compareTables.css) — גורמים לתיבה קפואה ולטקסט/כפתור שיושבים
   במקום אקראי במקום זה-ליד-זה. מאפסים במפורש, ממוקד לדף הזה בלבד. */
.pm-list-controls.indexControlsButtonsBox {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.pm-list-controls .searchResultsNum {
    float: none !important;
    position: static !important;
    top: auto !important;
    font-size: .85rem;
    color: #495057;
}
.pm-sort-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid #cfd8e3; background: #fff; color: #2d3a38;
    border-radius: 8px; padding: 6px 14px; font-size: .85rem; cursor: pointer;
}
.pm-sort-btn:hover { border-color: #17765a; color: #17765a; }
.pm-sort-icon { font-weight: bold; }

@media (max-width: 480px) {
    .pm-list-controls.indexControlsButtonsBox { flex-direction: column; align-items: stretch; }
    .pm-list-controls .searchResultsNum { text-align: center; }
    .pm-sort-btn { width: 100%; padding: 10px 14px; }
}

/* --- כפתורים --- */
.pm-btn-review {
    display: inline-block; border: 1px solid #17765a; color: #17765a; background: #fff;
    border-radius: 8px; padding: 7px 14px; font-size: .85rem; text-decoration: none; margin: 2px;
}
.pm-btn-review:hover { background: #e8f3ef; color: #0f5a44; text-decoration: none; }
.pm-btn-offer {
    display: inline-block; background: #17765a; color: #fff; border: 1px solid #17765a;
    border-radius: 8px; padding: 7px 14px; font-size: .85rem; font-weight: bold; text-decoration: none; margin: 2px;
}
.pm-btn-offer:hover { background: #0f5a44; color: #fff; text-decoration: none; }

/* --- בלוק "הטבות" (משותף לכרטיסי הרשימה, דף המוצר וההשוואה המפורטת) --- */
.pm-expand-hatava { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #d7e0e8; }

/* --- קופסת אמון "איך ההשוואה עובדת" --- */
.pm-trust-box {
    background: #f6f9f8; border: 1px solid #d9e6e1; border-radius: 12px;
    padding: 18px 20px; margin: 24px 0;
}
.pm-trust-box h3 { font-size: 1.05rem; font-weight: bold; margin: 0 0 10px; color: #17765a; }
.pm-trust-box ul { margin: 0; padding-inline-start: 1.2rem; font-size: .9rem; line-height: 1.7; }

/* --- כרטיס "בדיקה תקופתית" בסיידבר (למי שכבר מנהל תיק) ---
   כוונה משלימה ללידים ולאשף ההתאמה: בדיקת תיק קיים. עיצוב תואם
   pm-trust-box / kg-sidebar-wizard; CTA דומיננטי אחד עם עוגן-זמן. */
.pm-review-card {
    background: #fff;
    border: 1px solid #d9e6e1;
    border-radius: 12px;
    padding: 18px 18px 16px;
    margin: 0;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.pm-review-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: #e8f3ef; color: #17765a; font-size: 26px; margin-bottom: 10px;
}
.pm-review-card__title { font-size: 1.1rem; font-weight: bold; color: #17765a; margin: 0 0 6px; line-height: 1.3; }
.pm-review-card__lede { font-size: .85rem; color: #6c757d; line-height: 1.5; margin: 0 0 14px; }
.pm-review-card__list {
    list-style: none; margin: 0 0 16px; padding: 0; text-align: right;
}
.pm-review-card__list li {
    position: relative; padding: 6px 26px 6px 0; font-size: .88rem;
    line-height: 1.4; color: #2d3a38; border-bottom: 1px dashed #eef1f4;
}
.pm-review-card__list li:last-child { border-bottom: 0; }
.pm-review-card__list li:before {
    content: '\F26E'; /* bi-check-lg */
    font-family: 'bootstrap-icons'; font-size: .95rem;
    position: absolute; right: 0; top: 6px; color: #17765a;
}
.pm-review-card__cta,
.pm-review-card__cta:link,
.pm-review-card__cta:visited {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box;
    background: #17765a; color: #fff;
    padding: 12px 16px; border-radius: 8px;
    font-weight: bold; font-size: .95rem; text-decoration: none;
    border: 0; transition: background .15s ease;
}
.pm-review-card__cta:hover,
.pm-review-card__cta:focus { background: #0f5a44; color: #fff; text-decoration: none; }
.pm-review-card__trust { font-size: .78rem; color: #8a949e; margin: 10px 0 0; }

/* --- מחשבון דמי ניהול --- */
.pm-fee-sim {
    background: #fff; border: 1px solid #d9e6e1; border-radius: 12px;
    padding: 20px; margin: 24px 0; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.pm-fee-sim h3 { font-size: 1.15rem; font-weight: bold; margin: 0 0 4px; color: #17765a; }
.pm-fee-sim .pm-fee-sim-lede { font-size: .9rem; color: #6c757d; margin-bottom: 14px; }
.pm-fee-sim-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 991px) { .pm-fee-sim-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pm-fee-sim-grid { grid-template-columns: 1fr; } }

/* תאי המחשבון: התווית תופסת את הגובה המשתנה (שורה/שתיים) וה-input מוצמד
   לקו תחתון אחיד — כל השדות מיושרים לאותו baseline. */
.pm-fee-sim-grid > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.pm-fee-sim-grid label {
    display: block;
    text-align: right;
    font-weight: bold;
    font-size: .82rem;
    line-height: 1.3;
    margin: 0 0 6px;
    color: #2d3a38;
}
/* עיצוב input מפורש — לא מסתמך על form-control של Bootstrap; !important
   מנטרל דליפות מה-CSS הישן (ביטול מסגרות/גבהים קבועים) שיצרו שדות לא-אחידים. */
.pm-fee-sim-grid input {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #cfd8e3 !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 9px 10px !important;
    height: 42px !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    direction: ltr;
    text-align: center;
    color: #2d3a38;
}
.pm-fee-sim-grid input:focus {
    outline: none;
    border-color: #17765a !important;
    box-shadow: 0 0 0 3px rgba(23, 118, 90, .15);
}
.pm-fee-sim-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 991px) { .pm-fee-sim-results { grid-template-columns: repeat(2, 1fr); } }
.pm-fee-sim-result {
    background: #f8fafb; border: 1px solid #e3e8ee; border-radius: 10px;
    padding: 12px; text-align: center;
}
.pm-fee-sim-result .pm-out-label { font-size: .78rem; color: #6c757d; display: block; margin-bottom: 4px; }
.pm-fee-sim-result .pm-out-value { font-size: 1.15rem; font-weight: bold; direction: ltr; display: block; }
.pm-fee-sim-result--cost .pm-out-value { color: #dc3545; }
.pm-fee-sim-result--diff .pm-out-value { color: #17765a; }
.pm-fee-sim-chart-wrap { position: relative; height: 300px; margin-top: 16px; }
.pm-fee-sim-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
    background: #eef6f3; border: 1px solid #cfe6dd; border-radius: 10px;
    padding: 14px 18px; margin-top: 16px; text-align: center;
}
.pm-fee-sim-cta p { margin: 0; flex: 1 1 300px; font-size: .95rem; }
.pm-fee-sim-disclaimer { font-size: .75rem; color: #8a949e; margin-top: 10px; }

/* --- גריד כרטיסי שאלונים/מחשבונים (דפוס kg-calc-grid של הפנסיה) --- */
.kg-calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; margin: 1.5rem 0 2rem; }
.kg-calc-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 22px 16px; background: #fff; border: 1px solid #e3e8ee; border-radius: 12px;
    text-decoration: none; color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.kg-calc-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); border-color: #17765a; text-decoration: none; }
.kg-calc-card__inner { display: contents; }
.kg-calc-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #e8f3ef; color: #17765a; font-size: 26px; margin-bottom: 12px;
}
.kg-calc-card__title { font-weight: bold; font-size: 1.05rem; line-height: 1.3; color: #17765a; margin: 0 0 6px; }
.kg-calc-card__desc { font-size: .85rem; line-height: 1.45; color: #6c757d; margin: 0; }
@media (max-width: 991px) { .kg-calc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kg-calc-grid { grid-template-columns: 1fr; } }

/* --- FAQ (ה-markup המקורי נשמר verbatim; אקורדיון קל ב-JS של הדף) --- */
.faqH3 { margin: 2.5em 0 1em; font-size: 22px; font-weight: bold; }
.FAQ {
    border: 1px solid #e3e8ee; border-radius: 10px; margin-bottom: 10px;
    background: #fff; overflow: hidden;
}
.FAQ > h3 {
    font-size: 17px !important; font-weight: bold; margin: 0; padding: 14px 16px;
    cursor: pointer; position: relative; padding-left: 40px;
}
.FAQ > h3:hover { background: #f6f9f8; }
.FAQ > h3:after {
    content: '+'; position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%); font-size: 20px; color: #17765a;
}
.FAQ.pm-faq-open > h3:after { content: '−'; }
.FAQ > div[itemprop] { display: none; padding: 0 16px 14px; }
.FAQ.pm-faq-open > div[itemprop] { display: block; }
.FAQ p, .FAQ li { font-size: 15px !important; line-height: 1.7; }

/* --- רשימת מאמרים בסיידבר (ה-markup המקורי נשמר) --- */
#articleList { list-style: none; padding: 0; margin: 0; }
#articleList li { margin-bottom: 10px; }
#articleList a { text-decoration: none; color: inherit; }
.article-item { display: flex; align-items: center; gap: 10px; }
.article-item:hover .article-text span { color: #17765a; text-decoration: underline; }
.article-image img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.article-text span { font-size: .85rem; line-height: 1.4; }

/* --- דף המוצר: hero + כרטיסי תוכן --- */
.pm-hero {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e3e8ee; border-radius: 12px;
    padding: 18px 20px; margin-bottom: 16px;
}
.pm-hero-logo {
    width: 130px; height: 84px; object-fit: contain; flex: 0 0 auto;
    border: 1px solid #eef1f4; border-radius: 8px; background: #fff; padding: 4px;
}
.pm-hero-body { flex: 1 1 280px; }
.pm-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pm-hero-chip {
    background: #f6f9f8; border: 1px solid #d9e6e1; border-radius: 999px;
    padding: 4px 14px; font-size: .85rem;
}
.pm-hero-chip strong { color: #17765a; }
.pm-hero-cta { flex: 0 0 auto; }

/* anchor nav (דפוס kg-anchor-nav של הפנסיה, בגרסה עצמאית) */
.pm-anchor-nav {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px;
    position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.97);
    padding: 8px 0; border-bottom: 1px solid #eef1f4;
}
.pm-anchor-nav a {
    border: 1px solid #cfd8e3; border-radius: 999px; background: #fff;
    color: #2d3a38; font-size: .85rem; padding: 5px 14px; text-decoration: none; white-space: nowrap;
}
.pm-anchor-nav a:hover { border-color: #17765a; color: #17765a; text-decoration: none; }

.pm-section {
    background: #fff; border: 1px solid #e3e8ee; border-radius: 12px;
    padding: 18px 20px; margin-bottom: 14px; scroll-margin-top: 70px;
}
.pm-section h2 {
    font-size: 1.15rem; font-weight: bold; margin: 0 0 10px; color: #17765a;
    display: flex; align-items: center; gap: 8px;
}
.pm-section .pm-section-body { font-size: .95rem; line-height: 1.7; }

/* --- דף ההשוואה המפורטת: פריסת רוחב-מלא ---
   ⚠️ הטבלה נדחסה לימין עם שטח מת משמאל. כופים רוחב-מלא בכל שלב בשרשרת
   (‎.main → .table-responsive → table) + מבטלים את ה-float הלגסי של .main
   ושל .topLeft (compareTables.css). ממוקד דרך .pm-compare-details-main. */
.pm-compare-details-main {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: block;
    top: 0;
    margin: 0;
}
.pm-compare-details-main .topLeft {
    float: none !important;
    width: 100% !important;
}
.pm-compare-details-main .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
}
/* הטבלה נפרשת לרוחב מלא; table-layout:fixed מבטיח שהעמודות מתחלקות שווה
   (עמודת התוויות צרה, עמודות בתי ההשקעות שוות) במקום לפי אורך הטקסט. */
.pm-compare-details-main .pm-compare-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed;
    margin: 0;
}
.pm-compare-details-main .pm-compare-table .pm-row-label { width: 150px; white-space: normal; }
.pm-compare-details-main .pm-compare-table td { overflow-wrap: anywhere; }

/* מובייל: לא לדחוס את כל העמודות לרוחב המסך (טקסט שנשבר מילה-בשורה). במקום זה —
   רוחב-עמודה קריא + גלילה אופקית של ה-.table-responsive, כמו בדף הפנסיה.
   עמודת התוויות נשארת דביקה מימין (position:sticky ב-base) ולכן גלויה תוך כדי גלילה. */
@media (max-width: 767px) {
    .pm-compare-details-main .pm-compare-table {
        table-layout: auto !important;
        width: auto !important;
        min-width: 100% !important;
    }
    /* עמודות בתי ההשקעות — רוחב מינימלי קריא → דוחף את הטבלה מעבר לרוחב המסך → גלילה */
    .pm-compare-details-main .pm-compare-table th,
    .pm-compare-details-main .pm-compare-table td {
        min-width: 165px;
    }
    /* עמודת התוויות צרה יותר */
    .pm-compare-details-main .pm-compare-table th.pm-row-label,
    .pm-compare-details-main .pm-compare-table td.pm-row-label {
        width: 110px;
        min-width: 110px;
    }
    /* לוגו קטן יותר שיתאים לרוחב העמודה */
    .pm-compare-details-main .pm-compare-head-logo { width: 90px; height: 56px; }
}

/* --- דף ההשוואה המפורטת: טבלה --- */
.pm-compare-table { width: 100%; border-collapse: collapse; background: #fff; }
.pm-compare-table th, .pm-compare-table td {
    border: 1px solid #e3e8ee; padding: 12px 14px; vertical-align: top;
    font-size: .9rem; line-height: 1.6; text-align: right;
}
.pm-compare-table thead th { background: #f6f9f8; text-align: center; vertical-align: middle; }
.pm-compare-table .pm-row-label {
    background: #f6f9f8; font-weight: bold; white-space: nowrap; width: 1%;
    position: sticky; right: 0; z-index: 2;
}
.pm-compare-table .pm-compare-minsum { font-weight: bold; font-size: 1.05rem; direction: ltr; text-align: center; }
.pm-compare-table tr.pm-compare-fees-row td { background: #fdf7ee; }
.pm-compare-head-logo { width: 110px; height: 70px; object-fit: contain; display: block; margin: 0 auto 8px; }
.pm-compare-head-name { font-weight: bold; display: block; margin-bottom: 8px; }

/* מובייל: הבלוק השיווקי בטופס הליד מקוצר — 3 bullets בלבד */
@media (max-width: 991px) {
    #lead .checkList li:nth-child(4),
    #lead .checkList li:nth-child(5) { display: none; }
}

/* ============================================================
   מודל הליד בדסקטופ — קומפקטי + רחב.
   חל רק כש-#lead נמצא בתוך #leadBootstrapModal (המודל של leads-bootstrap.js),
   ורק בדפי ניהול התיקים (הקובץ הזה נטען רק בהם) — טופס הסיידבר/העמוד
   וטפסי V2 של מוצרים אחרים לא מושפעים.
   ============================================================ */

/* ⚠️ CookieManager.ascx מזליג גלובלית ‎.modal-content{max-width:600px;width:90%;padding:30px}
   (מיועד למודל העוגיות שלו, תופס כל מודל באתר) — דוחס את מודל הליד ומסיט אותו מהמרכז.
   אותו תקדים כמו מודל גרף התשואות בגמל (ראו הדריסה ב-kupat-gemel.css ל-#modalTsuot). */
#leadBootstrapModal .modal-content,
#leadBootstrapModal .lead-modal-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

/* רשימת ה-bullets השיווקית מיותרת במודל — המשתמש כבר השתכנע ולחץ.
   ⚠️ .leadSubTitle דווקא כן נשארת: היא נושאת את הצעת הערך ("שיחה
   ראשונית... ללא התחייבות"), וההסתרה שלה השאירה את המודל בלי שום
   תשובה ל"למה שאמלא את זה". מעוצבת קומפקטית בהמשך הקובץ. */
#leadBootstrapModal .checkList { display: none !important; }

/* שדה העשרה אופציונלי — נשאר רק בטופס שבעמוד, לא במודל הממוקד */
#leadBootstrapModal .kg-v2-purpose { display: none !important; }

/* קישור פתיחת בורר בתי ההשקעות (טפסי הסיידבר/העמוד) — affordance של כפתור,
   לא קישור טקסט סמוי. חל רק בדפי ניהול התיקים (הקובץ נטען רק בהם). */
.kg-lead-form-v2 #expandYazranim {
    display: block;
    width: 100%;              /* רוחב מלא — לא רוחב-תוכן חלקי */
    box-sizing: border-box;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    background: #fff;
    padding: 10px 36px 10px 12px;
    color: #17765a;
    font-weight: bold;
    font-size: .9rem;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

/* רשימת היצרנים בטפסי העמוד/סיידבר — שתי עמודות ברוחב מלא, שמות מלאים בלי
   ellipsis (מבטל רוחב קשיח/float מה-CSS הישן שגרם להצטופפות בימין ולשטח מת).
   בתוך המודל — כללי .pm-modal-side הספציפיים יותר גוברים (שורה מלאה לכל חברה). */
.kg-lead-form-v2 #yatzranimDiv {
    width: 100% !important;
    max-width: none !important;
    text-align: right;
    direction: rtl;
}
.kg-lead-form-v2 #yatzranimDiv .yazranimList {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    width: 49%;
    box-sizing: border-box;
    direction: rtl;
    float: none !important;
    vertical-align: top;
    padding: 3px 0;
}
.kg-lead-form-v2 #yatzranimDiv .yazranimList input {
    flex: 0 0 auto;
    margin: 2px 0 0;
}
.kg-lead-form-v2 #yatzranimDiv .yazranimList label,
.kg-lead-form-v2 #yatzranimDiv .yazranimEllipsisLeads {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0;
    cursor: pointer;
    text-align: right;
    font-size: .85rem;
    line-height: 1.3;
}
.kg-lead-form-v2 #expandYazranim:after {
    content: '▾';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #17765a;
}
.kg-lead-form-v2 #expandYazranim:hover { border-color: #17765a; background: #f6f9f8; }

/* דסקטופ: מודל רחב בפריסת שני אזורים (Best Practice המרות — שדות בטור יחיד):
   העמודה הראשונה (ימין ב-RTL) = שדות הטופס זה-מתחת-לזה ברוחב מלא;
   העמודה השנייה = פאנל בחירת בתי ההשקעות, פתוח וגלוי.
   pmLeadOpen.js מוסיף את .pm-modal-split ומעביר את בורר החברות לילד ישיר של הטופס.
   ה-selector של הדיאלוג כולל .modal כדי לגבור על width:fit-content/max-width:520px
   שמוגדרים ב-kupat-gemel.css/gemel-modern.css. */
@media (min-width: 992px) {
    #leadBootstrapModal.modal .lead-modal-dialog {
        width: 100%;
        max-width: 1060px;
    }
    #leadBootstrapModal .lead { width: auto; max-width: none; }
    #leadBootstrapModal .kg-lead-form-v2 { max-width: none; }
    #leadBootstrapModal .pm-details-lead { max-width: none; }

    /* flex ולא grid: בפריסת grid הפאנל הגבוה משמאל מותח את שורות עמודת הטופס
       ומפזר רווחים אקראיים בין השדות לכפתור. ב-flex הגבהים בלתי-תלויים. */
    #leadBootstrapModal .kg-lead-form-v2.pm-modal-split {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 16px 26px;
    }
    /* עמודת הטופס (pmLeadOpen.js עוטף) — שדות זה-מתחת-לזה בגובה טבעי */
    #leadBootstrapModal .pm-modal-split > .pm-modal-main {
        flex: 1 1 0;
        min-width: 320px;
    }
    /* ⚠️ הריווח בעמודת הטופס מגיע מה-‎gap‎ של ‎.kg-v2-stage‎ (flex-column).
       ה-‎margin-bottom‎ שהיה כאן נוסף עליו ויצר ריווח כפול — מאופס. */
    #leadBootstrapModal .pm-modal-main .kg-v2-field { margin-bottom: 0; }
    #leadBootstrapModal .pm-modal-main .kg-v2-stage-1 .kg-v2-field { margin-bottom: 0; }
    #leadBootstrapModal .pm-modal-main .kg-v2-consent { margin: 14px 0 16px; }
    #leadBootstrapModal .pm-modal-main .kg-v2-submit { margin: 0; }

    /* שורת הערך — רצועה מלאה מתחת לכותרת, בהזחה של המודל */
    #leadBootstrapModal .leadSubTitle {
        padding: 12px 22px;
    }

    /* badges האמון — שורה מלאה מתחת לשני האזורים */
    #leadBootstrapModal .pm-modal-split > .kg-v2-trust { flex: 1 1 100%; margin-top: 0; }

    /* עמודת הצד (pmLeadOpen.js מרכיב אותה): פאנל החברות + תיבות המטרה.
       direction:rtl מפורש — בתוך המודל הכיווניות לא נורשת נכון וה-checkbox
       בורח לקצה השמאלי במקום לשבת מימין, צמוד לשם. */
    #leadBootstrapModal .pm-modal-split > .pm-modal-side {
        flex: 0 0 400px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0;
        direction: rtl;
        text-align: right;
    }

    /* כפתור הסגירה (X) יושב על פס הכותרת הירוק — הופך ללבן כדי שלא ייבלע */
    #leadBootstrapModal .lead-modal-close {
        top: 14px !important;
        left: 14px !important;
        right: auto !important;
        filter: invert(1) grayscale(100%) brightness(200%) !important;
        opacity: .85;
        z-index: 5;
    }
    #leadBootstrapModal .lead-modal-close:hover,
    #leadBootstrapModal .lead-modal-close:focus {
        opacity: 1;
    }

    /* פאנל בתי ההשקעות */
    #leadBootstrapModal .pm-modal-side .kg-v2-yatzranim {
        background: #f6f9f8;
        border: 1px solid #d9e6e1;
        border-radius: 10px;
        padding: 12px 14px;
        max-height: 330px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    /* הרשימה תמיד פתוחה בפאנל (!important גובר על ה-inline style של ExpandYazranim),
       וברוחב הפאנל — מבטל רוחב קשיח מה-CSS הישן שיצר גלילה אופקית */
    #leadBootstrapModal .pm-modal-side #yatzranimDiv {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
    }
    /* הקישור הופך לכותרת הפאנל — לא לחיץ, בלי מסגרת כפתור */
    #leadBootstrapModal .pm-modal-side #expandYazranim {
        pointer-events: none;
        cursor: default;
        border: 0;
        background: transparent;
        padding: 0 0 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid #d9e6e1;
        border-radius: 0;
        white-space: normal;
        overflow: visible;
    }
    #leadBootstrapModal .pm-modal-side #expandYazranim:after { content: ''; }
    /* פריטי הרשימה — שורה מלאה, checkbox מימין (RTL), שם בלי חיתוך/ellipsis */
    #leadBootstrapModal .pm-modal-side #yatzranimDiv .yazranimList {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        direction: rtl;
        gap: 8px;
        float: none !important;
        width: 100% !important;
        padding: 5px 2px;
    }
    #leadBootstrapModal .pm-modal-side #yatzranimDiv .yazranimList input { flex: 0 0 auto; margin: 0; }
    #leadBootstrapModal .pm-modal-side #yatzranimDiv .yazranimList label,
    #leadBootstrapModal .pm-modal-side #yatzranimDiv .yazranimEllipsisLeads {
        margin: 0;
        cursor: pointer;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        width: auto !important;
        max-width: none !important;
        float: none !important;
        text-align: right;
        font-size: .88rem;
        line-height: 1.35;
    }

    /* תיבות "מה מעניין אותך לבדוק" — חוזרות במודל הרחב, מתחת לפאנל החברות
       (גובר על ההסתרה הכללית של kg-v2-purpose במודל) */
    #leadBootstrapModal .pm-modal-side .kg-v2-purpose {
        display: block !important;
        background: #fff;
        border: 1px solid #d9e6e1;
        border-radius: 10px;
        padding: 12px 14px;
        margin: 0;
    }
    #leadBootstrapModal .pm-modal-side .kg-v2-purpose .kg-v2-purpose__legend {
        font-size: .9rem;
        font-weight: bold;
        color: #17765a;
        padding: 0 0 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid #d9e6e1;
        width: 100%;
    }
    /* טור יחיד — בפאנל צר שתי עמודות נדחסות ונשברות */
    #leadBootstrapModal .pm-modal-side .kg-v2-purpose .kg-v2-purpose__options {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    #leadBootstrapModal .pm-modal-side .kg-v2-purpose .kg-v2-purpose__opt {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        direction: rtl;
        gap: 8px;
        padding: 4px 2px;
        margin: 0;
        width: 100%;
        font-size: .88rem;
        cursor: pointer;
    }
    #leadBootstrapModal .pm-modal-side .kg-v2-purpose .kg-v2-purpose__opt input { flex: 0 0 auto; margin: 0; }
}

/* ============================================================
   מרווחי צד במובייל לכרטיסי תוכן ברוחב-אוטומטי.
   ⚠️ ממוקם בסוף הקובץ במכוון: הגדרות ה-base של כרטיסים אלו משתמשות
   ב-margin shorthand (למשל .pm-trust-box/.pm-fee-sim = margin:24px 0,
   .pm-review-card = margin:0) שמאפס margin-left/right. בלוק זה חייב לבוא
   אחריהן בסדר המקור כדי לגבור (אותה ספציפיות → מנצח האחרון).
   .kg-calc-grid לא כאן — הוא width:100% ומטופל ב-padding למעלה. ============================================================ */
@media (max-width: 767px) {
    .pm-cards,
    .pm-trust-box,
    .pm-fee-sim,
    .pm-review-card {
        margin-left: 10px;
        margin-right: 10px;
    }
}

/* ============================================================
   מפרידי הסיידבר (.border-box) — קו דק ניטרלי.
   themarker.css הגלובלי מגדיר ‎border-top:5px solid #BCCC00‎ (ליים
   צהבהב, המיתוג הישן — אותה משפחה כמו ה-#edf1d8 שהוחלף). אחרי
   שכל בלוק בסיידבר הפך לכרטיס עם גבול משלו, מפריד צבעוני עבה הוא
   רעש כפול. קו 1px בגוון הגבול של הכרטיסים (#d9e6e1) — עקבי ושקט.
   תחום לדפי ניהול התיקים; ההחלפה הגלובלית — משימה נפרדת
   (ראו project-lead-form-visual-system.md).
   ============================================================ */
.border-box {
    border-top: 1px solid #d9e6e1;
    padding-top: 0;
}

/* ============================================================
   מחשבונים בסיידבר (#calcs) — רשימת אייקונים מודרנית.
   מחליף את טבלת הלגאסי (calcTD / calc.png הליים / חיצי sprite).
   ⚠️ הסלקטורים תחומים כ-#calcs.pm-calcs במכוון: gemel-modern.css מגדיר
   ‎#calcs a{display:inline-block;height:36px;line-height:36px}‎ (ספציפיות
   1,0,1) — בלי ה-id הכללים כאן היו מפסידים. ה-id נשמר גם כעוגן היסטורי.
   ============================================================ */
#calcs.pm-calcs {
    background: #fff;
    border: 1px solid #d9e6e1;
    border-radius: 12px;
    padding: 14px 16px;
}
#calcs.pm-calcs .pm-calcs__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding-bottom: 9px;
    border-bottom: 1px solid #d9e6e1;
    color: #16302a;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}
#calcs.pm-calcs .pm-calcs__title i {
    color: #17765a;
    font-size: 1.15rem;
}
/* reset מלא על ה-<a> — דורס את inline-block/36px של הלגאסי */
#calcs.pm-calcs a.pm-calcs__item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    min-height: 44px;
    line-height: 1.35;
    padding: 5px 4px;
    border-bottom: 1px solid #eef2f0;
    border-radius: 8px;
    color: #16302a;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.12s ease;
}
#calcs.pm-calcs a.pm-calcs__item:last-child { border-bottom: 0; }
#calcs.pm-calcs .pm-calcs__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f6f9f8;
    color: #17765a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
#calcs.pm-calcs .pm-calcs__label { flex: 1 1 auto; }
/* חץ "המשך" — שמאלה ב-RTL (קדימה בכיוון הקריאה) */
#calcs.pm-calcs .pm-calcs__chevron {
    flex: 0 0 auto;
    color: #9db3ab;
    font-size: 0.78rem;
    transition: transform 0.12s ease, color 0.12s ease;
}
#calcs.pm-calcs a.pm-calcs__item:hover,
#calcs.pm-calcs a.pm-calcs__item:focus-visible {
    background: #f6f9f8;
    color: #0f5340;
}
#calcs.pm-calcs a.pm-calcs__item:hover .pm-calcs__chevron {
    color: #17765a;
    transform: translateX(-3px);
}
#calcs.pm-calcs a.pm-calcs__item:hover .pm-calcs__icon {
    background: #e8f3ef;
}

/* ============================================================
   טופס הליד מחוץ למודל (מובייל + סיידבר) — ניצול רוחב ויישור.
   חל עד 991px בלבד: מ-992 ומעלה נפתח המודל, שיש לו פריסה משלו.
   ============================================================ */
@media (max-width: 991.98px) {
    /* בורר החברות: ההורה הוא grid בעמודה אחת, ולכן כל חברה תפסה שורה
       שלמה (13 שורות) והצד השמאלי נשאר ריק — הכפלת גלילה מיותרת.
       ‎auto-fit‎ נותן שתי עמודות כשיש רוחב, וחוזר לאחת במסך צר מאוד. */
    .kg-lead-form-v2 #yatzranimDiv {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 2px 12px;
        align-items: start;
    }
    /* הפריט חוזר לרוחב התא (ה-‎width:49%‎ נועד לפריסת inline ישנה) */
    .kg-lead-form-v2 #yatzranimDiv .yazranimList {
        width: auto !important;
        display: flex;
        align-items: flex-start;
        min-height: 34px;
    }

    /* "מה מעניין אותך לבדוק": שתי עמודות — חוסך מחצית מהגובה.
       חוסר היישור המקורי נבע מכך שהתוויות נשברו לשתי שורות בעוד
       ‎align-items:flex-start‎ הצמיד את התיבה לראש הבלוק. הפתרון כאן
       משלים את קיצור התוויות ב-ascx: כל תווית נכנסת בשורה אחת,
       ‎align-items:center‎ מיישר תיבה מול טקסט, וכל השורות שוות גובה. */
    .kg-lead-form-v2 .kg-v2-purpose__options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 10px;
        align-items: stretch;
    }
    /* ‎min-height:44px‎ — יעד המגע המינימלי המומלץ במובייל */
    .kg-lead-form-v2 .kg-v2-purpose__opt {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-height: 44px;
        font-size: 0.85rem;
        line-height: 1.3;
    }
    .kg-lead-form-v2 .kg-v2-purpose__opt input {
        flex: 0 0 auto;
        margin: 0;
    }
    .kg-lead-form-v2 .kg-v2-purpose__opt span {
        flex: 0 1 auto;
    }
}

/* ============================================================
   ליטוש עיצובי לטופס הליד — פלטה אחידה ומראה מקצועי.
   ⚠️ ממוקם בסוף הקובץ במכוון: רוב הכללים כאן דורסים את בסיס ה-V2
   ב-kupat-gemel.css באותה ספציפיות — סדר המקור מכריע (מנצח האחרון).
   ⚠️ הקובץ נטען אך ורק בשלושת דפי ניהול התיקים, ולכן כללים "עירומים"
   כמו .kg-v2-submit__btn בטוחים: הם לא נוגעים בגמל/פנסיה/מנהלים.
   חל על שלושת ההקשרים — מודל דסקטופ, טופס הסיידבר, ומובייל.
   ============================================================ */

/* --- 1. תיקון המרווח האסימטרי במודל הדסקטופ ------------------
   pmLeadOpen.js מזריק inline ‎width:99.4%‎ ל-#leadMobile (שריד מהפופאפ
   הישן של fancybox). ב-RTL הבלוק נצמד לימין, ולכן 0.6% הנותרים
   מתגלים כרצועה ריקה ‎(~6px)‎ בצד שמאל בלבד — הקצה הימני מיושר.
   ‎!important‎ נדרש כדי לגבור על ה-inline style. */
#leadBootstrapModal #leadMobile {
    width: 100% !important;
}

/* --- 2א. משטח הליד — החלפת ה"חאקי" הגלובלי -------------------
   ‎cssSupermarker‎ קובע ‎.lead{background:#edf1d8}‎ — טוקן ותיק המשמש
   בכ-35 סלקטורים באתר (טבלאות, ‎.SMdisclaimer‎, שורות גמל ועוד).
   הבעיה: ‎#edf1d8‎ הוא צהוב-ירוק (גוון ~70°) מול ירוק המותג ‎#17765a‎
   (~163°, כחול-ירוק) — משפחות רחוקות, ומכאן ההתנגשות הוויזואלית.
   ‎#eef4f1‎ שומר על אותו תפקיד (משטח מובחן מלבן, בהירות ~94%) אך
   באותה משפחת גוונים של המותג.
   ⚠️ מוגבל כאן לדפי ניהול התיקים בלבד. החלפת הטוקן הגלובלי
   ב-cssSupermarker תשפיע על עשרות דפים ומחייבת בדיקת רגרסיה נפרדת.
   להחלפה לחלופה הקרירה: ‎#eff2f6‎. */
#lead.lead,
#leadBootstrapModal .lead {
    background-color: #eef4f1;
}

/* --- 2. כותרת הליד — ירוק המותג של הדף -----------------------
   ‎#17765a‎ הוא בדיוק הגוון של ‎.pm-btn-offer‎ ושל ‎.pm-budget-chip.active‎
   בדף, ולכן הכותרת "יושבת" במערכת הצבעים הקיימת. שטוח ולא גרדיאנט —
   כל שאר רכיבי הדף שטוחים, וגרדיאנט היה יוצא חריג.
   ‎!important‎ על ה-font-size: cssSupermarker קובע 18px. */
.leadH3Title,
#leadBootstrapModal .lead .leadH3Title {
    background: #17765a !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 1.25rem !important;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    padding: 15px 18px;
    margin: 0;
    border: 0;
    border-radius: 8px 8px 0 0;
}

/* --- 3. ה-CTA — הכפתור שממיר ---------------------------------
   הבסיס מותיר ‎border-color:#fff‎ שנקרא כתקלה, ומאפס את הצל.
   ‎background-image‎ מפורש: הבסיס מגדיר ‎background-image:none !important‎. */
.kg-v2-submit__btn {
    background: #17765a !important;
    background-image: linear-gradient(135deg, #17765a 0%, #125c46 100%) !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 0.9rem 1rem !important;
    box-shadow: 0 6px 18px rgba(23, 118, 90, 0.30) !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}
.kg-v2-submit__btn:hover,
.kg-v2-submit__btn:focus {
    background-image: linear-gradient(135deg, #17765a 0%, #0f5340 100%) !important;
    box-shadow: 0 9px 24px rgba(23, 118, 90, 0.38) !important;
    transform: translateY(-1px);
}

/* אייקוני שורת האמון — האקצנט הירוק היחיד שנשאר מלבד ה-CTA
   (סמל "מאומת" נושא כאן משמעות, בניגוד למשטחי הרקע) */
.kg-v2-trust i {
    color: #17765a;
}

/* --- 3ב. סימון ירוק לכל התיבות ------------------------------
   ‎kupat-gemel.css‎ מגדיר ‎accent-color‎ רק ל-‎.kg-v2-purpose__opt input‎
   ול-‎.kg-v2-consent input‎, ולכן תיבות בורר החברות נשארו על ברירת
   המחדל הכחולה של הדפדפן — שתי שפות צבע באותו טופס.
   כאן: ירוק המותג לכל תיבה ולחצן-רדיו בטופס.
   הערך מיושר ל-‎#17765a‎ (צבע ה-CTA) ולא ל-‎#1f8a6a‎ הישן. */
.kg-lead-form-v2 input[type="checkbox"],
.kg-lead-form-v2 input[type="radio"] {
    accent-color: #17765a;
}

/* בורר החברות בטופס שבעמוד/מובייל — אותו איפוס מרווח כמו במודל:
   ‎margin-right:30px‎ מה-CSS הישן מזיח את הרשימה ביחס לשאר השדות. */
.kg-lead-form-v2 #yatzranimDiv {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* --- 3א. היררכיה: שורת ערך, חיווי התקדמות, ריווח -------------
   הבעיה שנותרה אחרי יישוב הצבעים: כל הרכיבים באותו משקל ויזואלי,
   ואין תשובה מוקדמת ל"למה למלא". שלושה תיקונים ממוקדים. */

/* שורת הערך מתחת לכותרת — משנית לכותרת, ראשית לשדות */
.leadSubTitle {
    margin: 0;
    padding: 10px 18px;
    background: #fff;
    border-bottom: 1px solid #e4ece9;
    color: #4a5f58;
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 400;
}

/* חיווי ההתקדמות בראש שלב 2 — ממסגר את חשיפת השדות כסיום קרוב
   ולא כ"הטופס מתארך" */
.kg-v2-stage-hint {
    margin: 0 0 2px;
    color: #17765a;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
}

/* ריווח נדיב יותר בין קבוצות — נשימה מייצרת תחושת אמינות,
   וההפרדה בין "פרטים אישיים" ל"פרטי הפנייה" נעשית קריאה */
.kg-lead-form-v2 .kg-v2-stage-0 {
    gap: 0.85rem;
}
.kg-lead-form-v2 .kg-v2-stage-1.is-open {
    margin-top: 1.15rem;
    padding-top: 1.05rem;
    border-top: 1px solid #e4ece9;
    gap: 0.85rem;
}
.kg-lead-form-v2 .kg-v2-consent {
    margin-top: 1rem;
}

/* --- 4. שדות — רדיוס אחיד ומיקוד מותג ------------------------
   (המבנה והתוכן של השדות נשמרים — רק הליטוש) */
.kg-v2-field .form-floating > .form-control,
.kg-v2-field .form-floating > .form-select {
    border-radius: 10px;
}
.kg-v2-field .form-floating > .form-control:focus,
.kg-v2-field .form-floating > .form-select:focus {
    border-color: #17765a;
    box-shadow: 0 0 0 0.18rem rgba(23, 118, 90, 0.15);
}

/* --- 5. מעטפת המודל בדסקטופ ---------------------------------- */
@media (min-width: 992px) {
    #leadBootstrapModal .lead-modal-content {
        border-radius: 12px;
        box-shadow: 0 24px 60px rgba(10, 40, 30, 0.28);
    }
    /* הכותרת מיישרת פינות למעטפת */
    #leadBootstrapModal .lead .leadH3Title {
        border-radius: 12px 12px 0 0;
        padding: 16px 22px;
    }
    /* אזור הטופס נקי ולבן — הפאנלים הם שנושאים את הגוון */
    #leadBootstrapModal .modal-body {
        background: #fff;
    }
    #leadBootstrapModal .kg-lead-form-v2.pm-modal-split {
        padding: 20px 22px 18px;
        gap: 18px 28px;
    }
    /* שני הפאנלים באזור הבחירה — אותו משטח בדיוק כמו ‎.pm-trust-box‎
       בדף (‎#f6f9f8‎ על גבול ‎#d9e6e1‎), כדי שהליד ישתלב במערכת הצבעים
       הקיימת ולא יכניס אפור זר. */
    #leadBootstrapModal .pm-modal-side .kg-v2-yatzranim,
    #leadBootstrapModal .pm-modal-side .kg-v2-purpose {
        background: #f6f9f8;
        border: 1px solid #d9e6e1;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(16, 60, 45, 0.05);
        padding: 14px 16px;
    }
    #leadBootstrapModal .pm-modal-side .kg-v2-yatzranim {
        max-height: 300px;
    }
    #leadBootstrapModal .pm-modal-side #expandYazranim,
    #leadBootstrapModal .pm-modal-side .kg-v2-purpose .kg-v2-purpose__legend {
        color: #17765a;
        font-weight: 700;
        border-bottom: 1px solid #d9e6e1;
        padding-bottom: 9px;
        margin-bottom: 8px;
    }

    /* ⚠️ יישור תיבות הסימון בין שני הפאנלים.
       ‎#yatzranimDiv‎ יורש ‎margin-right:30px‎ מה-CSS הישן, שדוחף את כל
       רשימת היצרנים 30px פנימה ביחס לתיבות "מה מעניין אותך לבדוק".
       איפוס המרווח מיישר את שתי הרשימות לאותו קו. */
    #leadBootstrapModal .pm-modal-side #yatzranimDiv {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    /* שורת האמון — מופרדת בקו עדין מהאזורים שמעליה */
    #leadBootstrapModal .pm-modal-split > .kg-v2-trust {
        border-top: 1px solid #eef2f0;
        padding-top: 12px;
    }
}