/* Minification failed. Returning unminified contents.
(1003,28): run-time error CSS1030: Expected identifier, found '+'
(1003,40): run-time error CSS1031: Expected selector, found ')'
(1003,40): run-time error CSS1025: Expected comma or open brace, found ')'
(1170,32): run-time error CSS1030: Expected identifier, found '.'
(1170,56): run-time error CSS1031: Expected selector, found ')'
(1170,56): run-time error CSS1025: Expected comma or open brace, found ')'
(2781,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-secondary-color'
(3335,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3336,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3337,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3338,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3339,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3340,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3341,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3342,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3343,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3344,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3345,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3346,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3352,75): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3352,245): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3353,38): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3353,62): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3354,32): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3354,63): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3358,75): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3366,90): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3366,245): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3367,37): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3368,53): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3369,34): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3369,63): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft'
(3369,86): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3372,34): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3376,121): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3377,47): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3378,149): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3380,113): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3387,150): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3388,42): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3389,27): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3390,43): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3392,82): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft'
(3392,132): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3393,51): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3394,167): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3395,42): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3396,64): run-time error CSS1039: Token not allowed after unary operator: '-kg-warn'
(3398,124): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3399,47): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3399,179): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3402,127): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3403,63): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3403,162): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3404,42): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3404,71): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft'
(3408,150): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3408,199): run-time error CSS1039: Token not allowed after unary operator: '-kg-shadow'
(3410,115): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3412,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3413,134): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3415,108): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3416,66): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3418,72): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3419,40): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3422,125): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3423,32): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3425,37): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3425,271): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3426,37): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3427,34): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3427,63): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft'
(3427,86): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3428,46): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3436,24): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3437,86): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3441,36): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft'
(3444,44): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3444,75): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3447,72): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3448,92): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3449,75): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3454,78): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3454,243): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3456,35): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3456,75): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft'
(3458,62): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3458,104): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3462,147): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3463,62): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3464,71): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3537,1): run-time error CSS1019: Unexpected token, found '}'
(3558,69): run-time error CSS1039: Token not allowed after unary operator: '-kg-fbar-h'
(3566,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-xp-w'
(3567,21): run-time error CSS1039: Token not allowed after unary operator: '-kg-xp-w'
(3605,36): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3622,32): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3633,27): run-time error CSS1030: Expected identifier, found '#leadOffer'
(3633,51): run-time error CSS1031: Expected selector, found ')'
(3633,51): run-time error CSS1025: Expected comma or open brace, found ')'
(3684,73): run-time error CSS1039: Token not allowed after unary operator: '-kg-fbar-h'
(3698,97): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3704,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3724,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3732,35): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3736,51): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3737,79): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3757,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3766,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3791,79): run-time error CSS1039: Token not allowed after unary operator: '-kg-pos'
(3792,77): run-time error CSS1039: Token not allowed after unary operator: '-kg-neg'
(3796,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3798,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3805,57): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3805,92): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3807,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3808,24): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3814,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft'
(3815,35): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3832,28): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3835,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3843,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft'
(3844,24): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(3845,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3852,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3869,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3881,35): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3882,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3922,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3931,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3958,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(3968,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(3977,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3988,35): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(3989,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(3994,69): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(4005,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink'
(4017,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(4031,102): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(4032,92): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(4056,28): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(4058,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft'
(4059,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(4083,28): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(4092,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(4124,28): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft2'
(4125,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(4133,37): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(4140,29): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(4142,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4143,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4159,71): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(4161,94): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(4162,101): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(4170,104): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(4175,86): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(4177,104): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(4178,93): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(4179,71): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark'
(4180,84): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(4185,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(4189,56): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(4201,69): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(4205,41): run-time error CSS1039: Token not allowed after unary operator: '-kg-line'
(4212,129): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(4218,93): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(4221,117): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(4239,91): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
(4245,74): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand'
(4247,69): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted'
 */
/* ייצוב רוחב viewport (מניעת "קפיצה" כשפס גלילה מופיע/נעלם)
   חשוב במיוחד בדפי השוואה שבהם בלוק 650px ממורכז זז כשה-viewport משתנה בכמה פיקסלים.
   הגדרה על html בלבד: שני מיכלי גלילה (html+body) גרמו בעבר לתחושת "תקיעה"
   ב-iOS/Android — תחושת scroll שנבלע ע"י ה-body לפני שמגיע ל-html. */
html {
    overflow-y: scroll; /* תמיד שומרים מקום ל-scrollbar (Windows) */
}
@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
    }
}

/*
 * דפי השוואת גמל/השתלמות (רק כשנטען gemel-modern): compareTables.css מגדיר #main ו-#mainContainer עם height:100%.
 * בשילוב עם header קבוע (#searchBox) ו-overflow-y על html/body זה גורם במובייל (ולפעמים בדסקטופ) לגלילה שנתקעת
 * עד שמבצעים כמה מחוות — התוכן מתחת לכותרות קיים אבל לא נגלל. auto מחזיר גלילה נורמלית ל-document.
 */
#main.centerDesign {
    height: auto !important;
    min-height: 0;
}

#main.centerDesign #mainContainer {
    height: auto !important;
    min-height: 0;
}

/* Breadcrumb – רווחים נאותים בין פריטים, תמיכה ב-RTL */
#sitemap .breadcrumb {
    background: transparent;
    padding: 0.5rem 0;
    margin-bottom: 0;
}
#sitemap .breadcrumb-item {
    padding-inline: 0.35rem;
}
/* Bootstrap default: ::before on 2nd+ items – ב-RTL יוצר מפריד מיותר בסוף. שימוש ב-::after אחרי כל פריט מלבד האחרון */
#sitemap .breadcrumb-item + .breadcrumb-item::before {
    content: none; /* ביטול ברירת מחדל */
}
#sitemap .breadcrumb-item:not(:last-child)::after {
    padding-inline: 0.5rem;
    color: #17765a;
    content: "›";
}
#sitemap .breadcrumb-item a {
    color: #17765a;
    text-decoration: none;
}
#sitemap .breadcrumb-item a:hover {
    color: #0f5a42;
    text-decoration: underline;
}
#sitemap .breadcrumb-item.active {
    color: #212529;
}

/* Override Bootstrap styles for Gemel table to match original design */

/* Desktop: Modern compare button styling (smaller for desktop panel) */
.compareDiv #compare {
    background-color: #17765a !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 13px !important; /* Reduced by ~20% (from 8px 16px) */
    font-weight: 600 !important;
    font-size: 14px !important; /* Smaller font for desktop */
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    background-image: none !important; /* Override background-image from compareTables.css */
    height: auto !important; /* Override height: 25px from compareTables.css */
    width: auto !important; /* Override width: 80px from inline style */
    min-width: 112px !important; /* Reduced by 20% (from 140px) */
    max-width: 100% !important; /* Prevent overflow */
    box-sizing: border-box !important;
    vertical-align: middle !important; /* Center vertically */
}

    .compareDiv #compare:hover {
        background-color: #0f5a42 !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) !important;
        transform: translateY(-1px) !important;
    }

    .compareDiv #compare:active {
        transform: translateY(0) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    }

/* Override compareTables.css styles for compareDiv on desktop */
/* Only apply to desktop (not mobile) - use min-width to avoid conflicts */
@media (min-width: 769px) {
    /* Keep original panel layout - don't use flexbox */
    .comparePanelBox {
        /* display נקבע ב-JavaScript - לא כאן */
        width: 650px !important; /* align with search area and table */
        height: 102px !important; /* Keep original height */
        position: relative !important; /* Required for absolute positioning of #closeAll */
    }

    .compareDiv {
        background-image: none !important; /* Remove background image */
        top: 34px !important; /* 5px from top (was 35px in original) */
        height: auto !important; /* Override height: 25px */
        width: auto !important; /* Override width: 101px */
        padding-top: 0 !important; /* Override padding-top: 1px */
        position: relative !important; /* Relative positioning */
        display: inline-block !important;
        margin: 0 !important;
        margin-right: 10px !important; /* Original margin-right */
        float: none !important; /* Remove any float */
    }

        .compareDiv #compare {
            display: inline-block !important;
        }

    /* Make product names in compare boxes smaller on desktop - same size as table names */
    .compareBox h5.dot-dot-dot {
        font-size: 12px !important; /* Same size as product names in main table */
        line-height: 1.4 !important;
        margin: 2px 0 !important;
    }
}

/* ============================================
   CLOSE BUTTON ALTERNATIVES FOR COMPARE BOXES
   ============================================ */

/* Ensure compareBox is positioned relative for absolute positioning of close button */
.compareBox {
    position: relative !important; /* Required for absolute positioning of .close */
}

/* שם המוצר בריבוע ההשוואה — .dot-dot-dot מגדיר nowrap+ellipsis אך ללא רוחב מוגבל,
   ולכן שם ארוך "זלג" מחוץ לריבוע (בולט במיוחד כשהלוגו חסר). מגבילים את הרוחב כך
   שה-ellipsis יחתוך בתוך גבולות הריבוע, ושומרים על הלוגו fit נקי. */
.comparePanelBox .compareBox h5.dot-dot-dot {
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 4px;
}
.comparePanelBox .compareBox .compareImg {
    object-fit: contain;
}

    /* Close button - restore original position (left top) and styling */
    .compareBox .close {
        padding: 0 !important;
        cursor: pointer !important;
        background: transparent !important;
        border: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        font-size: 20px !important; /* Original size */
        font-weight: bold !important; /* Original weight */
        line-height: 20px !important; /* Original line-height */
        text-shadow: 0 1px 0 #ffffff !important; /* Original text-shadow */
        opacity: 1.0 !important; /* Original opacity */
        color: #829a2c !important; /* Original green color */
        display: block !important; /* Changed from inline-flex to block for float */
        position: absolute !important;
        top: 0px !important;
        left: 5px !important; /* Changed from right to left - original position */
        right: auto !important; /* Reset right */
        z-index: 10 !important;
        margin: 0 !important;
        float: left !important; /* Original float */
    }

        .compareBox .close:hover {
            color: #AD5A50 !important; /* Original hover color - red */
            text-decoration: none !important;
            opacity: 1.0 !important; /* Keep full opacity on hover */
        }

/* Close All button - same style as .compareBox .close but larger */
.closeAll,
#closeAll {
    padding: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-size: 28px !important; /* Larger than .compareBox .close (20px) */
    font-weight: bold !important;
    line-height: 24px !important;
    text-shadow: 0 1px 0 #ffffff !important;
    opacity: 1.0 !important;
    color: #829a2c !important; /* Original green color */
    display: block !important; /* Same as .compareBox .close */
    position: absolute !important;
    top: 0px !important; /* Same as .compareBox .close */
    left: 5px !important; /* Same position as .compareBox .close (left, not right) */
    right: auto !important;
    z-index: 10 !important;
    margin: 0 !important;
    float: left !important; /* Same as .compareBox .close */
}

    .closeAll:hover,
    #closeAll:hover {
        color: #AD5A50 !important; /* Original hover color - red */
        text-decoration: none !important;
        opacity: 1.0 !important; /* Keep full opacity on hover */
    }

.compareBox .close:focus {
    opacity: 0.75 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25) !important;
}

/* Option 2: Modern rounded X button with background (Alternative) */
/* Uncomment to use this style instead of Option 1 */
/*
.compareBox .close {
    padding: 0 !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #666 !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s ease-in-out !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 5 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.compareBox .close:hover {
    background: #f44336 !important;
    color: white !important;
    border-color: #f44336 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 2px 5px rgba(244, 67, 54, 0.3) !important;
}
*/

/* Option 3: Minimalist with colored border (Alternative) */
/* Uncomment to use this style instead of Option 1 */
/*
.compareBox .close {
    padding: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 2px solid #829a2c !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #829a2c !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    transition: all 0.2s ease-in-out !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 5 !important;
}

.compareBox .close:hover {
    background: #AD5A50 !important;
    color: white !important;
    border-color: #AD5A50 !important;
    transform: rotate(90deg) !important;
}
*/

/* Main table styling - override Bootstrap table styles */
table.gemelMainTable,
.gemelMainTable {
    color: #333333 !important;
    width: 650px !important;
    max-width: 650px !important;
    table-layout: fixed !important; /* keep column widths stable when expandable row opens */
    border-collapse: separate !important; /* Required for border-radius to work */
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important; /* Ensure border-radius is visible */
}

    /* Remove Bootstrap table striped effect */
    table.gemelMainTable tbody tr,
    .gemelMainTable tbody tr {
        color: #333333 !important;
        background-color: #EDF1D8 !important;
    }

        /* Remove Bootstrap striped effect on even rows */
        table.gemelMainTable tbody tr:nth-of-type(even),
        .gemelMainTable tbody tr:nth-of-type(even) {
            background-color: #EDF1D8 !important;
        }

        /* Remove Bootstrap hover effect and apply original hover */
        table.gemelMainTable tbody tr:hover,
        .gemelMainTable tbody tr:hover {
            background-color: #d8dbb0 !important;
        }

    /* Table cells - override Bootstrap */
    table.gemelMainTable td,
    .gemelMainTable td {
        direction: ltr !important;
        vertical-align: middle !important;
        text-align: center !important;
        height: 30px !important;
        border-bottom: 1px solid White !important;
        border-left: none !important; /* No vertical borders between columns */
        border-top: 1px solid White !important;
        border-right: none !important; /* No vertical borders between columns */
        font-family: 'Noto Sans Hebrew', sans-serif !important;
        color: #5e5558 !important;
        padding: 4px 4px 4px 4px !important;
        font-size: 14px !important;
    }

    /* Table headers - override Bootstrap */
    table.gemelMainTable th,
    .gemelMainTable th,
    .gemelHeaderTD {
        height: 40px !important;
        background-color: #d7d9b4 !important;
        border-left: none !important; /* No vertical borders between columns */
        border-bottom: 1px solid White !important;
        border-top: 1px solid White !important;
        border-right: none !important; /* No vertical borders between columns */
        padding: 4px 0px 4px 0px !important;
        color: #333333 !important;
        /*font-weight: normal !important;*/
        text-align: center !important;
        vertical-align: top !important;
    }

        .gemelHeaderTD a {
            color: #333333 !important;
            text-decoration: none !important;
        }

            .gemelHeaderTD a:hover {
                color: #333333 !important;
                text-decoration: underline !important;
            }

/* Cell classes */
.gemelCell {
    direction: ltr !important;
    vertical-align: middle !important;
    text-align: center !important;
    height: 30px !important;
    border-bottom: 1px solid White !important;
    border-left: none !important; /* No vertical borders between columns */
    border-top: 1px solid White !important;
    border-right: none !important; /* No vertical borders between columns */
    font-family: 'Noto Sans Hebrew', sans-serif !important;
    color: #5e5558 !important;
    padding: 4px 4px 4px 4px !important;
    font-size: 14px !important;
}

.gemelCell1 {
    font-weight: bold !important;
    width: 70px !important;
    text-align: center !important;
}

.gemelCell2 {
    width: 75px !important;
    text-align: center !important;
}

.gemelCell3 {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Color classes for positive/negative returns */
.gemelCellGreen {
    color: #006633 !important;
    font-weight: bold !important;
    width: 75px !important;
}

.gemelCellRed {
    color: #ad5a50 !important;
    font-weight: bold !important;
    width: 75px !important;
}

/* Keep white borders - do not remove them */
/* Bootstrap borders are already overridden by specific border rules above */

/* Override Bootstrap table responsive wrapper if needed */
.table-responsive {
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: auto !important;
    max-width: 650px !important;
}

/* Compare pages: keep main table container width stable (prevents small horizontal "jump"
   when expandable details open/close and layout recalculates). */
#gemelTableContainer.table-responsive {
    box-sizing: border-box;
}
#gemelTable {
    width: 100%;
}

/* Mobile: Enable horizontal scrolling like original .gridview-container */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto !important; /* Enable horizontal scrolling */
        overflow-y: visible !important;
        max-width: 100% !important; /* Container takes full width */
        width: 100% !important;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        /*
         * touch-action: pan-x pan-y — בלי זה iOS "נועל" את הכיוון לאופקי ברגע
         * שמזהה מחווה אלכסונית עם נטייה אופקית, ואז הגלילה האנכית של הדף נבלמת.
         * pan-y מאפשר לדפדפן גם להעביר את הגלילה האנכית לדף מעל.
         */
        touch-action: pan-x pan-y;
    }
    #gemelTableContainer.table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

/* Desktop: lock compare table width to prevent reflow "jump" */
@media (min-width: 769px) {
    #gemelTableContainer.table-responsive {
        width: 650px !important;     /* fixed width => stable when expandable opens */
        max-width: 650px !important;
        margin: 0 auto !important;
    }
}

/*
 * דסקטופ: גלילה אופקית + גרירת עכבר (fundDetailsLoader.enableDragScrollForRanking).
 * אותה רשת עמודות כמו במובייל (783px). גופן מעט מתחת ל־1rem (0.95rem) — קרוב לפרטי הקופה (0.9rem).
 */
@media (min-width: 769px) {
    .expandable-inner .fund-ranking-section .table-responsive {
        overflow-x: auto !important;
        overflow-y: visible !important;
        width: 100%;
        max-width: 100%;
        direction: rtl;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
    }

    .expandable-inner .fund-ranking-section .table-responsive.is-dragging {
        cursor: grabbing;
        user-select: none;
    }

    .expandable-inner .fund-ranking-section .table-responsive .fund-ranking-scroll-pad {
        display: inline-block;
        vertical-align: top;
        box-sizing: content-box;
        padding-inline-end: 300px;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table {
        direction: rtl;
        table-layout: fixed !important;
        width: 783px !important;
        min-width: 783px !important;
        max-width: 783px !important;
        box-sizing: border-box;
        font-size: 0.95rem !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table thead th {
        white-space: normal !important;
        line-height: 1.3 !important;
        font-size: 0.95rem !important;
        vertical-align: top !important;
        word-break: break-word;
        overflow: visible !important;
        overflow-wrap: anywhere;
        padding-top: 0.4rem !important;
        padding-bottom: 0.5rem !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td,
    .expandable-inner .fund-ranking-section .fund-ranking-table tfoot td {
        font-size: 0.95rem !important;
        line-height: 1.28 !important;
        vertical-align: middle;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(1) {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        box-sizing: border-box;
        padding-inline-end: 0.45rem !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(1) {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        box-sizing: border-box;
        padding-inline-end: 0.45rem !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table thead th.fund-ranking-col-name,
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td.fund-ranking-col-name {
        width: 285px !important;
        min-width: 285px !important;
        max-width: 285px !important;
        box-sizing: border-box;
        padding-inline-start: 0.5rem !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(4),
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(5) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        box-sizing: border-box;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        padding-left: 0.06rem !important;
        padding-right: 0.06rem !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(4),
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(5) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        box-sizing: border-box;
        white-space: nowrap;
        padding-left: 0.06rem !important;
        padding-right: 0.06rem !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(3) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        box-sizing: border-box;
        white-space: nowrap;
        padding-left: 0.06rem !important;
        padding-right: 0.06rem !important;
    }

    /* תשואה שנה — כותרת צרה כדי ש«שנה» ירד שורה */
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(3) {
        width: 2.75rem !important;
        min-width: 2.5rem !important;
        max-width: 2.85rem !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1.12 !important;
        vertical-align: top !important;
        padding-left: 0.12rem !important;
        padding-right: 0.12rem !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(6),
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(7),
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(8) {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        box-sizing: border-box;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(6),
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(7),
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(8) {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(9) {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        box-sizing: border-box;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(9) {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(10),
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(10) {
        width: 102px !important;
        min-width: 102px !important;
        max-width: 102px !important;
        box-sizing: border-box;
        white-space: normal;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(10) .btn {
        white-space: normal;
        line-height: 1.22 !important;
        padding: 0.22rem 0.4rem !important;
        font-size: 13px !important;
    }
}

/* ===== מודל טופס ליד (Bootstrap) – מראה אחיד כמו בקופת גמל ===== */
/* רוחב המודל צמוד לטופס, דומה ל-Fancybox הישן */
#leadBootstrapModal.modal .lead-modal-dialog {
    width: fit-content;
    max-width: 520px;
    margin: 1rem auto;
}

/* מעטפת התוכן של המודל */
#leadBootstrapModal .lead-modal-content {
    position: relative;
    width: 100%;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    overflow: visible;
}

/* כפתור סגירה X בפינה העליונה */
#leadBootstrapModal .lead-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    left: auto;
    z-index: 10;
    opacity: 0.85;
    filter: invert(0);
    background-size: 1em;
}

/* התאמת מיקום X ב-RTL אם צריך */
#leadBootstrapModal [dir="rtl"] .lead-modal-close,
[dir="rtl"] #leadBootstrapModal .lead-modal-close {
    right: auto;
    left: 0.1rem;
}

#leadBootstrapModal .lead-modal-close:hover {
    opacity: 1;
}

/* רקע גוף המודל – אפור בהיר, בלי padding פנימי כפול */
#leadBootstrapModal .modal-body {
    background: #f9f9f9;
    padding: 0;
}

/* כותרת הליד (h3) בתוך המודל – רקע ירוק, טקסט לבן, כמו בקופת גמל */
#leadBootstrapModal .lead .h3Title,
#leadBootstrapModal .lead .leadH3Title,
#leadBootstrapModal .lead .leadTitle {
    background-color: #17765a;
    color: #fff !important;
    font-weight: 600;
    margin: 0;
    padding: 0.75rem;
    border-radius: 4px 4px 0 0;
}

[dir="rtl"] #leadBootstrapModal .lead .h3Title,
[dir="rtl"] #leadBootstrapModal .lead .leadH3Title,
[dir="rtl"] #leadBootstrapModal .lead .leadTitle {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* ===== כפתור CTA צף לקבלת הצעה (leadOffer) – בלי קו תחתון, צבע רקע אחד #17765a ===== */
#leadOffer.kg-lead-offer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    background-color: #17765a;
    transition: background-color 0.15s ease;
}
#leadOffer.kg-lead-offer:hover {
    background-color: #3d6b6b;
}

#openLead.kg-lead-cta-btn,
.kg-lead-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1.25rem;
    border: none;
    background-color: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#openLead.kg-lead-cta-btn:hover,
#openLead.kg-lead-cta-btn:focus,
.kg-lead-cta-btn:hover,
.kg-lead-cta-btn:focus {
    text-decoration: none !important;
    background-color: transparent;
    color: #fff;
}

#openLead.kg-lead-cta-btn:active,
.kg-lead-cta-btn:active {
    text-decoration: none !important;
    color: #fff;
    background-color: rgba(0,0,0,0.15);
}

/* Align search/filter area with table width (desktop) */
#searchCriteria {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
}

/* Align tab group with search/filter area on desktop (same 650px centered) */
.tab_holder {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
}

/* Align compare panel with search/filter area and table on desktop (same 650px centered) */
@media (min-width: 769px) {
    .comparePanel {
        max-width: 650px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* Table container spacing */
#gemelTableContainer {
    margin: 0 auto;
    width: auto;
    max-width: 650px;
    clear: both;
    padding-top: 0 !important;
    margin-top: 30px !important; /* Add space above table to prevent overlap with sorting row */
}

/* Ensure controls box doesn't get overlapped - match original styling */
.indexControlsButtonsBox {
    width: 650px !important;
    max-width: 650px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    height: auto !important;
    min-height: 60px !important;
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
}
/* Ensure floats inside controls box don't collapse/overlap following content */
.indexControlsButtonsBox::after {
    content: "";
    display: block;
    clear: both;
}

/* Prevent the results counter from overlapping the table header when it wraps */
.indexControlsButtonsBox .searchResultsNum {
    float: right !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    top: 8px !important;
}

/* Table wrapper to ensure proper spacing */
div[style*="position: relative"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Sort indicators */
.gemelHeaderTD.sortable {
    cursor: pointer !important;
}

    .gemelHeaderTD.sortable:hover {
        background-color: #c5c7a0 !important;
    }

.gemelHeaderTD.active {
    background-color: #b5b890 !important;
}

.gemelHeaderTD.sort-asc::after {
    content: " ↑";
    color: #333333;
}

.gemelHeaderTD.sort-desc::after {
    content: " ↓";
    color: #333333;
}

/* Border radius for top corners – RTL: first-child מימין, last-child משמאל */
.gemelMainTable thead tr:first-child th:first-child {
    border-top-right-radius: 4px !important;
    border-top: 1px solid White !important;
    overflow: hidden !important;
}

.gemelMainTable thead tr:first-child th:last-child {
    border-top-left-radius: 4px !important;
    border-top: 1px solid White !important;
    overflow: hidden !important;
}

/* Ensure first row has top border */
.gemelMainTable thead tr:first-child th {
    border-top: 1px solid White !important;
}

/* Wrapper for fund name and toggle icon - icon fixed at right edge */
.gemelCell .fund-name-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* RTL: start = right, so icon stays right-aligned */
    direction: rtl !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    gap: 6px !important;
}

/* מרווח מהשווה למשולש / משולש לשם — בלי להרחיב את תא השם מעבר לרוחב שהוקצה בטבלה */
#gemelTable.gemelMainTable .gemelCell3 + .gemelCell .fund-name-wrapper {
    padding-inline-start: 6px !important;
    gap: 10px !important;
}

/* Fund name takes remaining space so toggle icon stays in same position in every row */
.gemelCell .fund-name-wrapper .gemelClick,
.gemelCell .fund-name-wrapper a.gemelClick {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: right !important;
}

/* Name column (שם קופה) - align to right */
.gemelCell .gemelClick,
.gemelCell a.gemelClick,
.gemelClick.polisa {
    text-align: right !important;
    direction: rtl !important;
    display: inline !important;
    vertical-align: middle !important;
}

/* Specific override for name column - using adjacent selector approach */
.gemelCell3 + .gemelCell {
    text-align: right !important;
    direction: rtl !important;
    box-sizing: border-box !important;
}

/*
 * טבלת השוואה #gemelTable — רוחבי עמודות קבועים (650px). ללא min-width חופשי על השם שלא ידרוס תשואות.
 * 54 + 116 + 68*7 = 646px (+ פיזור) — עמודת השווה צרה; שם קופה נשבר לשורות בתוך רוחב התא.
 */
#gemelTable.gemelMainTable thead tr:first-child th:nth-child(1),
#gemelTable.gemelMainTable tbody tr:not(.expandable-row) td:nth-child(1) {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    padding: 2px 1px !important;
    box-sizing: border-box !important;
}

/* כותרת שם קופה — כמו שאר ה-th: צמוד למעלה (לא vertical-align: middle של תאי הגוף) */
#gemelTable.gemelMainTable thead tr:first-child th:nth-child(2) {
    width: 116px !important;
    max-width: 116px !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 4px 2px !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}

#gemelTable.gemelMainTable tbody tr:not(.expandable-row) td:nth-child(2) {
    width: 116px !important;
    max-width: 116px !important;
    min-width: 0 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 30px !important;
    padding: 4px 2px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

#gemelTable.gemelMainTable thead tr:first-child th:nth-child(n + 3),
#gemelTable.gemelMainTable tbody tr:not(.expandable-row) td:nth-child(n + 3) {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* גובה שורה לפי תוכן — כששם הקופה נשבר לכמה שורות */
#gemelTable.gemelMainTable tbody tr:not(.expandable-row) td {
    height: auto !important;
    min-height: 30px !important;
}

#gemelTable.gemelMainTable .gemelCell3 + .gemelCell .fund-name-wrapper .gemelClick,
#gemelTable.gemelMainTable .gemelCell3 + .gemelCell .fund-name-wrapper a.gemelClick {
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
}

/* שורה גבוהה כשהשם נשבר — שאר התאים באמצע אנכית */
#gemelTable.gemelMainTable tbody tr:not(.expandable-row) td:nth-child(1),
#gemelTable.gemelMainTable tbody tr:not(.expandable-row) td:nth-child(n + 3) {
    vertical-align: middle !important;
}

/* All other cells should be centered */
.gemelCell:not(.gemelCell3 + .gemelCell) {
    text-align: center !important;
}

/* Checkbox styling - Bootstrap 5 toggle button — ריפוד מצומצם (מנוצח ע"י #gemelTable td:nth-child(1)) */
.gemelCell3 {
    text-align: center !important;
    vertical-align: middle !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    padding-inline: 2px !important;
    box-sizing: border-box !important;
}

    .gemelCell3 > div {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }

/* כפתור "השווה" צמוד יותר לגבולות התא */
#gemelTable.gemelMainTable .gemelCell3 .btn.compare1,
#gemelTable.gemelMainTable .gemelCell3 .compare1.btn {
    padding: 3px 4px !important;
}

/* Hide the actual checkbox input - Bootstrap 5 standard approach */
.btn-check {
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border: 0 !important;
}

    /* Style the label as a button - matching original design */
    /* Default state (unchecked) - like original page */
    .btn-check + .btn.compare1,
    .compare1.btn {
        font: bold 11px arial !important;
        color: #5e5558 !important; /* Same color as name column */
        background-color: white !important; /* White background */
        border: 1px solid #d7d9b4 !important; /* Same color as header */
        padding: 4px 8px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        border-radius: 3px !important;
        margin: 0 !important;
        cursor: pointer !important;
        display: inline-block !important;
        vertical-align: middle !important;
        text-align: center !important;
        white-space: nowrap !important;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
    }

    /* Active/checked state - green button with white text */
    .btn-check:checked + .btn.compare1,
    .btn-check:checked + .compare1.btn {
        background-color: #17765a !important;
        border-color: #17765a !important;
        color: white !important;
    }

    /* Hover state for unchecked */
    .btn-check:not(:checked):not(:disabled):not(.disabled) + .btn.compare1:hover,
    .btn-check:not(:checked):not(:disabled):not(.disabled) + .compare1.btn:hover {
        background-color: #f5f5f5 !important;
        border-color: #d7d9b4 !important;
        color: #5e5558 !important;
    }

    /* Hover state for checked */
    .btn-check:checked:not(:disabled):not(.disabled) + .btn.compare1:hover,
    .btn-check:checked:not(:disabled):not(.disabled) + .compare1.btn:hover {
        background-color: #0f5a42 !important;
        border-color: #0f5a42 !important;
        color: white !important;
    }

    /* Focus state */
    .btn-check:focus + .btn.compare1,
    .btn-check:focus + .compare1.btn {
        box-shadow: 0 0 0 0.25rem rgba(23, 118, 90, 0.25) !important;
    }

    /* Disabled state */
    .btn-check:disabled + .btn.compare1,
    .btn-check:disabled + .compare1.btn {
        opacity: 0.65 !important;
        cursor: not-allowed !important;
    }

/* Name column (שם קופה) text color - match original */
.gemelCell .gemelClick,
.gemelCell a.gemelClick,
.gemelClick.polisa,
a.gemelClick.polisa {
    /*color: #5e5558 !important;*/
    color: #000 !important;
    text-decoration: none !important;
}

    .gemelCell .gemelClick:hover,
    .gemelCell a.gemelClick:hover,
    .gemelClick.polisa:hover,
    a.gemelClick.polisa:hover {
        color: #5e5558 !important;
        text-decoration: underline !important;
    }

/* Ensure color classes work properly - must override all other color rules */
.gemelCellGreen,
td.gemelCellGreen,
.gemelCell2.gemelCellGreen,
.gemelCell.gemelCellGreen,
.tsua-cell.gemelCellGreen {
    color: #006633 !important;
    font-weight: bold !important;
}

.gemelCellRed,
td.gemelCellRed,
.gemelCell2.gemelCellRed,
.gemelCell.gemelCellRed,
.tsua-cell.gemelCellRed {
    color: #ad5a50 !important;
    font-weight: bold !important;
}

/* Mobile responsive - enable horizontal scrolling for table */
@media (max-width: 768px) {
    /* Tab holder: no bottom border on mobile */
    .tab_holder {
        border-bottom: none !important;
    }

    /* Search/filter area: full width with equal horizontal margin so shadow is visible on both sides */
    #searchCriteria {
        max-width: 100% !important;
        margin-left: 0.250rem !important;
        margin-right: 0.375rem !important;
    }

    /* Keep table at its original width to enable horizontal scrolling */
    table.gemelMainTable,
    .gemelMainTable {
        width: 650px !important; /* Keep original width for horizontal scroll */
        max-width: none !important; /* Remove max-width restriction */
        min-width: 650px !important; /* Ensure minimum width */
    }

    /* Allow table container to be full width on mobile */
    #gemelTableContainer {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: auto; /* Additional safety for horizontal scroll */
    }

    /* פתיחת שורה: לא לחתוך full-bleed של .table-responsive בתוך פרטי קופה */
    table.gemelMainTable:has(tr.expandable-row.expanded),
    .gemelMainTable:has(tr.expandable-row.expanded) {
        overflow: visible !important;
    }

    .gemelMainTable td.expandable-content {
        overflow-x: visible;
    }

    /* Allow controls box to be full width on mobile; מרווח מ-inline-start (ב-RTL = ימין מסך) */
    .indexControlsButtonsBox {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-inline-start: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
        padding-inline-end: 0.35rem !important;
    }
}

/* Tab styling - center text horizontally and vertically, white text color */
/* Override compareTables.css to fix alignment and text color */
.tab_selected_sub,
.tab_not_selected {
    display: flex !important;
    align-items: center !important; /* Center vertically */
    justify-content: center !important; /* Center horizontally */
    text-align: center !important;
}

    /* White text color for selected tab only */
    .tab_selected_sub,
    .tab_selected_sub span {
        color: white !important;
    }

    /* Black text color for unselected tabs */
    .tab_not_selected,
    .tab_not_selected a {
        color: #000 !important;
    }

        /* Remove the top offset that was causing misalignment */
        .tab_selected_sub span,
        .tab_not_selected a {
            position: static !important;
            top: auto !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
        }

/* Search button - Modern Bootstrap style */
#lbSearch.btn-primary {
    background-color: #17765a !important;
    border-color: #17765a !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

    #lbSearch.btn-primary:hover {
        background-color: #0f5a42 !important;
        border-color: #0f5a42 !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) !important;
        transform: translateY(-1px) !important;
    }

    #lbSearch.btn-primary:active {
        transform: translateY(0) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    }

    /* Ensure icon and text are properly aligned */
    #lbSearch.btn-primary i {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
    }

/* Mobile responsive - Compare Panel: 2 rows of 2 boxes, button below */
@media (max-width: 768px) {
    /* Compare Panel - full width on mobile */
    .comparePanel {
        display: none !important; /* מוסתר כברירת מחדל - יוצג רק אם יש קופות ב-cookie */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* הסתר גם את comparePanelBox ו-#comparePanel כברירת מחדל */
    .comparePanelBox,
    #comparePanel {
        display: none !important; /* מוסתר כברירת מחדל - יוצג רק אם יש קופות ב-cookie */
    }

    /* Compare Panel Box - responsive layout */
    /* Override compareTables.css height: 102px */
    /* Override desktop flexbox - use block layout for mobile */
    .comparePanelBox {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; /* Override fixed height from compareTables.css */
        margin: 0 !important; /* לא להשאיר שוליים – יצמד לפאנל */
        padding: 22px 6px 12px 6px !important; /* פחות גובה עבור כפתור × ופחות רווח למטה */
        box-sizing: border-box !important;
        position: relative !important;
        /* display נקבע ב-JavaScript - לא כאן */
        overflow: visible !important; /* Allow content to be visible */
        align-items: normal !important; /* Reset flexbox alignment */
        justify-content: normal !important; /* Reset flexbox justification */
    }

        /* Same padding-bottom for both single and double row */
        #comparePanel.has-second-row.comparePanelBox,
        .comparePanelBox.has-second-row,
        #comparePanel.has-second-row,
        .comparePanelBox:not(.has-second-row),
        #comparePanel:not(.has-second-row) {
            height: auto !important; /* Override fixed height: 102px from compareTables.css */
            padding-bottom: 25px !important; /* Consistent padding for all cases */
        }

        /* Clear floats and create 2-column layout */
        .comparePanelBox::before {
            content: '';
            display: table;
            clear: both;
            width: 100%;
        }

        /* Ensure compareDiv clears all floats */
        .comparePanelBox::after {
            content: '';
            display: table;
            clear: both;
            width: 100%;
        }

    /* Compare Box - 2 per row (50% width each) */
    .compareBox {
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        float: right !important;
        margin: 0 0 6px 4px !important; /* פחות רווחים בין הקופסאות */
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 40px !important; /* קופסה נמוכה יותר */
    }

        /* במובייל – הסתרת לוגו היצרן בתוך comparePanel כדי לחסוך גובה */
        .comparePanelBox .compareImg {
            display: none !important;
        }

        /* Hide or minimize empty boxes to reduce panel height */
        .compareBox.empty {
            height: 0 !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            overflow: hidden !important;
        }

        /* Force 3rd box to start second row */
        .compareBox:nth-child(3) {
            clear: right !important;
        }

        /* 4th box stays in second row (no clear) */
        .compareBox:nth-child(4) {
            clear: none !important;
        }

    /* Compare button - below boxes, centered, inside panel */
    /* Override compareTables.css top: 35px and other styles */
    .compareDiv {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px 0 0 0 !important; /* Margin above button - consistent spacing */
        margin-top: 15px !important; /* Explicit margin-top to override any other margin rules */
        padding: 0 !important;
        padding-top: 0 !important; /* Override padding-top: 1px from compareTables.css */
        position: relative !important; /* Changed from static to relative for better positioning */
        top: 0 !important; /* Override top: 35px from compareTables.css */
        background-image: none !important;
        background-color: transparent !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        clear: both !important; /* Ensure button is below floated boxes */
        z-index: 1 !important; /* Ensure button is above empty boxes */
        height: auto !important; /* Override height: 25px from compareTables.css */
    }

        .compareDiv #compare {
            width: auto !important;
            min-width: 200px !important;
            height: auto !important;
            padding: 14px 28px !important;
            float: none !important;
            display: inline-block !important;
            background-color: #17765a !important;
            color: white !important;
            border-radius: 6px !important;
            text-align: center !important;
            text-decoration: none !important;
            font-weight: 600 !important;
            font-size: 18px !important;
            line-height: 1.5 !important;
        }

            .compareDiv #compare:hover {
                background-color: #0f5a42 !important;
            }

    /* Reduce font size for product name in compare box on mobile */
    .compareBox h5.dot-dot-dot {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin: 2px 0 !important;
        padding: 0 2px !important;
    }

    /* Ensure compare image fits well in smaller boxes (מושבת – במובייל הסתרנו את הלוגו) */
    .compareBox .compareImg {
        display: none !important;
    }
}

/* ============================================
   Pagination - Override Bootstrap to match original design
   ============================================ */

/* Override Bootstrap pagination list styles */
.catPagesDiv .pagination {
    display: inline !important;
    list-style-type: none !important;
    padding: 2px !important;
    margin: 2px !important;
    direction: rtl !important;
    justify-content: flex-start !important; /* Override justify-content-center */
    text-align: right !important;
}

    /* Override Bootstrap page-item styles to match original */
    .catPagesDiv .pagination .page-item {
        background-color: #17765a !important;
        color: #CCCCCC !important;
        float: right !important;
        list-style-type: none !important;
        margin-left: 12px !important;
        margin-top: 5px !important;
        padding: 1px 6px !important;
        border: none !important;
        border-radius: 0 !important;
        display: inline-block !important;
    }

        /* Active/Selected page item - gray background like original */
        .catPagesDiv .pagination .page-item.active,
        .catPagesDiv .pagination .page-item.selected {
            background-color: #5A5A5C !important;
            color: White !important;
            float: right !important;
            list-style-type: none !important;
            margin-left: 12px !important;
            margin-top: 5px !important;
            padding: 1px 6px !important;
        }

        /* Override Bootstrap page-link styles */
        .catPagesDiv .pagination .page-item .page-link {
            color: #FFFFFF !important;
            font-size: 14px !important;
            font-weight: bold !important;
            text-decoration: none !important;
            background-color: transparent !important;
            border: none !important;
            padding: 0 !important;
            display: block !important;
        }

            /* Hover state for page links */
            .catPagesDiv .pagination .page-item .page-link:hover {
                color: #FFFFFF !important;
                font-size: 14px !important;
                text-decoration: none !important;
                background-color: transparent !important;
            }

        /* Active/Selected page link */
        .catPagesDiv .pagination .page-item.active .page-link,
        .catPagesDiv .pagination .page-item.selected .page-link {
            color: #FFFFFF !important;
            background-color: transparent !important;
        }

/* ============================================
   Sticky Compare Panel - Desktop Only
   ============================================ */

/* Sticky panel for desktop - fixed position when scrolled past */
/* ה-top, left, width נקבעים ב-JavaScript כדי לשמור על המיקום המקורי */
.comparePanel.stick {
    position: fixed !important;
    /* top, left, width נקבעים ב-JavaScript - לא full width */
    z-index: 1000 !important; /* גבוה מספיק מעל תוכן אחר */
    box-shadow: none !important; /* הסרת box-shadow */
    background-color: transparent !important; /* הסרת רקע לבן */
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /*
     * touch-action: pan-y — מאפשר לדפדפן לבצע גלילה אנכית של הדף
     * גם כשמחווה מתחילה בתוך הפאנל ה-fixed (z-index גבוה יכל "ללכוד" את המגע).
     */
    touch-action: pan-y;
}

    /* במובייל/טאבלט – כשהפאנל sticky, לא לדחוף אותו פנימה מהצד הימני */
@media (max-width: 1024px) {
    .comparePanel.stick .comparePanelBox,
    .comparePanel.stick #comparePanel {
        margin-right: 0 !important;
    }
}

/* opt-in (hidePanelPastTable): הסתרת הפאנל הדביק מתחת לסוף טבלת ההשוואה.
   משתמשים ב-visibility/opacity (ולא display) כדי לא להתנגש עם ה-display שנקבע
   ע"י לוגיקת הבחירה. הקלאס מתווסף ע"י modernGemelCompare.js רק בדפים שמגדירים את הדגל. */
.comparePanel {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.comparePanel.kg-compare-past-table {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* תיקון סטייה ימינה - ה-margin-right על comparePanelBox כשהוא sticky (דסקטופ בלבד) */
@media (min-width: 1025px) {
    .comparePanel.stick .comparePanelBox,
    .comparePanel.stick #comparePanel {
        margin-right: 0.75em !important; /* תיקון סטייה ימינה */
    }
}

/* Glyphicons Halflings font - only what we need for toggle icons */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/fonts/glyphicons-halflings-regular.eot');
    src: url('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'), url('/fonts/glyphicons-halflings-regular.eot') format('embedded-opentype'), url('/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.glyphicon-chevron-up:before {
    content: "\e113";
}

.glyphicon-chevron-down:before {
    content: "\e114";
}

/* Toggle icon for expandable rows */
.toggle-icon {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    cursor: pointer;
    transition: transform 0.3s ease;
    font-size: 16px;
    color: #5e5558;
    user-select: none;
    flex-shrink: 0 !important;
}

    .toggle-icon .glyphicon {
        font-family: 'Glyphicons Halflings' !important;
        font-size: 14px !important;
        color: #5e5558 !important;
    }

    .toggle-icon:hover {
        color: #333333;
    }

        .toggle-icon:hover .glyphicon {
            color: #333333 !important;
        }

/* Expandable row - hidden by default */
.expandable-row {
    display: none !important;
}

    .expandable-row.expanded {
        display: table-row !important;
    }

.expandable-content {
    padding: 20px;
    min-height: 250px; /* גובה מינימום 250px */
    /* אופציה 1 (פעיל): מינט */
    /*background-color: #e8f4f0 !important;
    border: 1px solid #b8d4c8 !important;
    border-top: 3px solid #17765a !important;
    box-shadow: 0 2px 8px rgba(23, 118, 90, 0.08);*/
    /* אופציה 2: נייטרלי */
    /* background-color: #f5f7f5 !important; */
    /* border: 1px solid #dee2e6 !important; */
    /* border-top: 2px solid #c5c7a0 !important; */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
    /* אופציה 3: כמעט לבן + פס צד */
     background-color: #fafbf9 !important; 
     border: 1px solid #e0e2e0 !important; 
     border-top: 1px solid #e0e2e0 !important; 
     border-inline-start: 4px solid #17765a; 
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 
}

.expandable-inner {
    width: 100%;
}

/* CTA בפרטי קופה (אחרי טבלאות מידע בסיסי ותשואות, לפני דירוג קופות מובילות) */
.expandable-inner .kg-cta-block {
    text-align: center;
    padding: 0.5rem 0;
}
.expandable-inner .kg-cta-btn,
.expandable-inner .kg-cta-btn-expandable {
    display: inline-block;
    max-width: 420px;
    width: 100%;
    padding: 0.65rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #4a7c7c;
    border: none;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.expandable-inner .kg-cta-btn:hover,
.expandable-inner .kg-cta-btn-expandable:hover {
    background-color: #3d6b6b;
    color: #fff;
}
.expandable-inner .kg-cta-sub {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: #6c757d;
}
/* CTA משני "value-first" בפאנל הנפתח: קישור למחשבון הצבירה של הקופה הספציפית
   ("כמה היית מרוויח לפי ביצועי עבר"). מעוצב כ-utility-link (outline) מתחת לכפתור
   הליד הראשי — כפוף לו ויזואלית כדי לשמור היררכיה (ליד = ראשי, מחשבון = משני). */
.expandable-inner .kg-cta-calc-link,
.expandable-inner .kg-cta-calc-link:link,
.expandable-inner .kg-cta-calc-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    max-width: 420px;
    width: 100%;
    margin: 0.6rem auto 0;
    padding: 0.5rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    color: #17765a;
    background: #fff;
    border: 1px solid rgba(23, 118, 90, 0.4);
    border-radius: 8px;
    box-sizing: border-box;
}
.expandable-inner .kg-cta-calc-link:hover,
.expandable-inner .kg-cta-calc-link:active {
    background: #f0faf6;
    border-color: rgba(23, 118, 90, 0.6);
    color: #0f5a44;
}
.expandable-inner .kg-cta-calc-link i {
    font-size: 1.05em;
    flex: 0 0 auto;
}

/* כפתור "לפרטים המלאים" בתחתית הפאנל הנפתח (דפי מנהלים/חיסכון): בדסקטופ
   הוא מיושר לשמאל (text-start) ונראה טוב. במובייל/טאבלט הפאנל עלול לגלוש
   אופקית, והכפתור בשמאל יוצא מהמסך — צריך לגלול שמאלה כדי לראותו. מיישרים
   אותו לימין, שזו נקודת ההתחלה הגלויה בקריאת RTL. */
@media (max-width: 991.98px) {
    /* שני classes (.fund-details-container + .menahalim-panel-details-link) כדי
       לנצח את .text-start של Bootstrap (class יחיד עם !important) ללא תלות בסדר הטעינה. */
    .fund-details-container .menahalim-panel-details-link {
        text-align: right !important;
    }
}

/* Fund Details Styles */
.fund-details-container {
    direction: rtl;
    text-align: right;
}

.fund-details-header h5 {
    color: #17765a;
    font-weight: 600;
}

.fund-specialization-text {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    margin-top: 0.5rem;
    line-height: 1.6;
}

    .fund-specialization-text .specialization-item {
        display: inline-block;
        margin-left: 1rem;
        margin-bottom: 0.25rem;
        padding: 0.25rem 0.5rem;
        background-color: #f8f9fa;
        border-radius: 0.25rem;
        vertical-align: top;
    }

        .fund-specialization-text .specialization-item:first-child {
            margin-left: 0;
        }

        .fund-specialization-text .specialization-item strong {
            color: #17765a;
            font-weight: 600;
            margin-left: 0.25rem;
        }

.fund-details-card {
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .fund-details-card .card-title {
        color: #17765a;
        font-weight: 600;
        font-size: 1rem;
    }

    .fund-details-card dt {
        font-weight: 500;
        color: #666;
        font-size: 0.9rem;
    }

    .fund-details-card dd {
        font-weight: 600;
        color: #333;
        font-size: 0.9rem;
    }

/* New fund details list format - label and value on same line */
.fund-details-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fund-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.fund-detail-item:last-child {
    border-bottom: none;
}

.fund-detail-label {
    font-weight: 500;
    color: #666;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.fund-detail-value {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    text-align: left;
    direction: ltr;
    display: inline-block;
}

/* שורת חברה מנהלת – ירידת שורה מיושרת ימינה מתחת לתחילת השם */
.fund-details-list .fund-detail-item:first-child .fund-detail-value {
    text-align: right !important;
    direction: rtl;
}

/* יתרת נכסים – מספר ימינה, "אלף" אחריו (סדר נכון ב-RTL) */
.fund-details-list .fund-detail-item:nth-child(3) .fund-detail-value {
    direction: rtl;
    text-align: right;
}

/* Ranking Table Styles — רק בהשוואה (.expandable-inner); דף KupatGemel משתמש ב-kupat-gemel + #kg-dynamic-returns-table */
.expandable-inner .fund-ranking-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #dee2e6;
}

.expandable-inner .fund-ranking-header {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    margin-bottom: 1rem;
}

.expandable-inner .fund-ranking-title {
    color: #17765a;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

/* תג «דירוג הקופה» (bg-primary) — גדול מברירת מחדל של Bootstrap */
.expandable-inner .fund-ranking-section #rankingBadge.badge.bg-primary {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 0.45rem 0.8rem;
}

.fund-specialization-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.specialization-badge {
    background-color: #e7f3f0;
    color: #0c5460;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    border: 1px solid #bee5eb;
}

    .specialization-badge strong {
        color: #17765a;
        font-weight: 600;
    }

.expandable-inner .fund-ranking-section h6 {
    color: #17765a;
    font-weight: 600;
}

.expandable-inner .fund-ranking-section .fund-ranking-table {
    font-size: 0.95rem;
    margin-bottom: 0;
}

.expandable-inner .fund-ranking-section .fund-ranking-table th,
.expandable-inner .fund-ranking-section .fund-ranking-table td {
    font-size: 0.95rem;
}

/* מספרים/אחוזים בטבלת דירוג (wrapNumericLtr ב-JS) — מינוס לפני המספר בדף RTL */
.expandable-inner .fund-ranking-section .fund-ranking-table .kg-numeric-ltr {
    display: inline-block;
    unicode-bidi: isolate;
    direction: ltr;
}

    /* עמודת שם קופה: רוחב מינימלי מוגדל ב־25%; במובייל ראה media query */
    .expandable-inner .fund-ranking-section .fund-ranking-table th.fund-ranking-col-name,
    .expandable-inner .fund-ranking-section .fund-ranking-table td.fund-ranking-col-name {
        min-width: calc(20ch * 1.25);
        max-width: none;
        box-sizing: border-box;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table thead th {
        background-color: #f8f9fa !important;
        color: #17765a;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
        /* יישור ל־kupat-gemel: #kg-dynamic-returns-table / .kg-page */
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /*
     * טבלת דירוג בפרטי קופה (expandable בהשוואה): עוקף את nowrap למעלה — בכל רוחב viewport.
     * קודם היה רק בתוך @media 768px ולכן בדסקטופ הכותרות (במיוחד 7–9) נשארו בשורה אחת ונחתכו.
     */
    .expandable-inner .fund-ranking-section table.fund-ranking-table.table thead th,
    .expandable-inner .fund-ranking-section table.fund-ranking-table thead th {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        overflow: visible !important;
        text-overflow: clip !important;
        height: auto !important;
        max-height: none !important;
        vertical-align: top !important;
        line-height: 1.3 !important;
    }

    .expandable-inner .fund-ranking-section table.fund-ranking-table thead th.sortable-header {
        white-space: normal !important;
    }

        .expandable-inner .fund-ranking-section .fund-ranking-table thead th.sortable-header {
            cursor: pointer;
            user-select: none;
            transition: background-color 0.2s ease;
            position: relative;
        }

            .expandable-inner .fund-ranking-section .fund-ranking-table thead th.sortable-header:hover {
                background-color: #e9ecef !important;
            }

            .expandable-inner .fund-ranking-section .fund-ranking-table thead th.sortable-header:active {
                background-color: #dee2e6 !important;
            }

            /* כותרת פעילה - רקע קבוע */
            .expandable-inner .fund-ranking-section .fund-ranking-table thead th.sortable-header.sort-active {
                background-color: #d1ecf1 !important;
                color: #0c5460;
            }

                .expandable-inner .fund-ranking-section .fund-ranking-table thead th.sortable-header.sort-active:hover {
                    background-color: #bee5eb !important;
                }

    .expandable-inner .fund-ranking-section .fund-ranking-table tbody tr:hover {
        background-color: #f8f9fa;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table tbody tr.table-primary {
        background-color: #cfe2ff !important;
        font-weight: 600;
    }

        .expandable-inner .fund-ranking-section .fund-ranking-table tbody tr.table-primary:hover {
            background-color: #b6d4fe !important;
        }
    /* Fund Link Styling */
    .expandable-inner .fund-ranking-section .fund-ranking-table .fund-link {
        color: #17765a;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s ease;
    }

        .expandable-inner .fund-ranking-section .fund-ranking-table .fund-link:hover {
            color: #0f5a42;
            text-decoration: underline;
        }

        .expandable-inner .fund-ranking-section .fund-ranking-table .fund-link:visited {
            color: #17765a;
        }
/* Loading State */
.fund-details-loading {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Error State */
.fund-details-error {
    margin: 0;
}

/* Chart Section Styles */
.fund-chart-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #dee2e6;
    direction: rtl;
}

    .fund-chart-section h6 {
        color: #17765a;
        font-weight: 600;
    }

.chart-container {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* כפתורי מיון מתחת לגרף תשואה מול סיכון (expandable) */
.fund-chart-section .kg-chart-sort-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.35rem;
    margin-bottom: 0;
}
.fund-chart-section .kg-chart-sort-actions .btn-group {
    display: inline-flex;
}
.fund-chart-section .kg-chart-sort-btn {
    cursor: pointer;
}
.fund-chart-section .kg-chart-sort-btn.active {
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .fund-details-card {
        margin-bottom: 1rem;
    }

    .fund-specialization-text {
        font-size: 0.9rem;
    }

        .fund-specialization-text .specialization-item {
            display: block;
            margin-left: 0;
            margin-bottom: 0.5rem;
        }

            .fund-specialization-text .specialization-item:last-child {
                margin-bottom: 0;
            }

    .expandable-inner .fund-ranking-header {
        padding: 0.75rem;
        max-width: 100vw;
        box-sizing: border-box;
        overflow: hidden;
    }

    .expandable-inner .fund-ranking-title {
        font-size: 1.1rem;
    }

    .fund-specialization-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .specialization-badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table {
        font-size: 0.95rem;
    }

    .expandable-inner .fund-ranking-section .fund-ranking-table th.fund-ranking-col-name,
    .expandable-inner .fund-ranking-section .fund-ranking-table td.fund-ranking-col-name {
        /* מובייל: עמודת שם קופה לא תתפוס יותר מ-30% מרוחב המסך */
        width: 30vw;
        max-width: 30vw !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

        .expandable-inner .fund-ranking-section .fund-ranking-table th,
        .expandable-inner .fund-ranking-section .fund-ranking-table td {
            padding: 0.4rem 0.2rem;
        }

    .fund-details-card dt,
    .fund-details-card dd {
        font-size: 0.85rem;
    }

    .fund-detail-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .fund-detail-label {
        margin-left: 0;
        margin-bottom: 0.125rem;
    }

    .fund-detail-value {
        text-align: right;
        direction: rtl;
    }

    .chart-container {
        height: 300px !important;
        padding: 0.5rem;
    }

    /* פרטי קופה בפתיחה: RTL (המידע מתחיל מימין), התאמה לרוחב מסך, גלילה רק בטבלת דירוג */
    .expandable-inner .fund-details-container {
        direction: rtl;
        text-align: right;
    }
    /* כותרת, CTA, גרף – לא יוצאים מהמסך */
    .expandable-inner .fund-details-container .fund-details-header,
    .expandable-inner .fund-details-container .kg-cta-block,
    .expandable-inner .fund-details-container .fund-chart-section {
        max-width: 97vw;
        box-sizing: border-box;
    }
    /* שורת מידע בסיסי + תשואות – מותאמת לדסקטופי (קצת יותר מרוחב מסך כדי ליישר) */
    .expandable-inner .fund-details-container .row.mb-4 {
        max-width: 101vw;
        box-sizing: border-box;
    }
    /* לא לחתוך את מיכל ה-full-bleed של הטבלה */
    .expandable-inner .fund-ranking-section {
        max-width: 100%;
        overflow-x: visible;
    }
    /*
     * גלילה RTL טבעית: התחלה מימין (דירוג), גלילה שמאלה לעמודות הבאות — בלי scaleX שהפך את כיוון המחווה.
     * full-bleed נשאר; ריפוד פנימי מגדיל scrollWidth כדי לא לחתוך עמודת הכפתור (inline-end ב-RTL = שמאל פיזי).
     */
    .expandable-inner .fund-ranking-section .table-responsive {
        direction: rtl;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        box-sizing: border-box;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        padding-inline-start: max(12px, env(safe-area-inset-right, 0px));
        padding-inline-end: max(12px, env(safe-area-inset-left, 0px));
        scroll-padding-inline-start: max(12px, env(safe-area-inset-right, 0px));
        scroll-padding-inline-end: max(64px, env(safe-area-inset-left, 0px));
    }
    .expandable-inner .fund-ranking-section .table-responsive .fund-ranking-scroll-pad {
        display: inline-block;
        vertical-align: top;
        box-sizing: content-box;
        /* padding-inline-start: 20px; */
        padding-inline-end: 355px;
    }
    /* 783px = 28+285+40×3+56×3+80+102 — שם קופה +15% מ־248px */
    .expandable-inner .fund-ranking-section .fund-ranking-table {
        direction: rtl;
        table-layout: fixed !important;
        width: 783px !important;
        min-width: 783px !important;
        max-width: 783px !important;
        box-sizing: border-box;
    }
    /* מעט מתחת ל־15px של דף הקופה — עקביות עם דסקטופ Compare (0.95rem) */
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th {
        white-space: normal !important;
        line-height: 1.3 !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        padding-top: 0.4rem !important;
        padding-bottom: 0.5rem !important;
        font-size: 14px !important;
        vertical-align: top !important;
        word-break: normal;
        overflow: visible !important;
        overflow-wrap: normal;
        hyphens: manual;
        height: auto !important;
    }
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td,
    .expandable-inner .fund-ranking-section .fund-ranking-table tfoot td {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        font-size: 14px !important;
        line-height: 1.28 !important;
        vertical-align: middle;
    }
    /* דירוג — צר */
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(1) {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        box-sizing: border-box;
        white-space: normal !important;
        overflow-wrap: anywhere;
        padding-inline-end: 0.45rem !important;
    }
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(1) {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        box-sizing: border-box;
        padding-inline-end: 0.45rem !important;
    }
    /* שם קופה — רוחב מורחב (מרבית המסך יחד עם 3 תשואות) */
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th.fund-ranking-col-name,
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td.fund-ranking-col-name {
        width: 285px !important;
        min-width: 285px !important;
        max-width: 285px !important;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        padding-inline-start: 0.5rem !important;
    }
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td.fund-ranking-col-name .fund-link {
        display: inline;
        word-break: break-word;
    }
    /* תשואה שנה / 3 שנים / 5 שנים — צרות כדי שייכנסו במסך עם שם מורחב */
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(3),
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(4),
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(5) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        box-sizing: border-box;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        padding-left: 0.06rem !important;
        padding-right: 0.06rem !important;
    }
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(3),
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(4),
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(5) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        box-sizing: border-box;
        white-space: nowrap;
        line-height: 1.28 !important;
        padding-left: 0.06rem !important;
        padding-right: 0.06rem !important;
    }
    /* דמי ניהול, ישירים, שארפ — נגלות בגלילה שמאלה */
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(6),
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(7),
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(8) {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        box-sizing: border-box;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(6),
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(7),
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(8) {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        box-sizing: border-box;
        white-space: nowrap;
    }
    /* היקף נכסים — עמודה 9 */
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(9) {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        box-sizing: border-box;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(9) {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        box-sizing: border-box;
        white-space: nowrap;
    }
    /* פרטים והצעה — עמודה 10 */
    .expandable-inner .fund-ranking-section .fund-ranking-table thead th:nth-child(10),
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(10) {
        width: 102px !important;
        min-width: 102px !important;
        max-width: 102px !important;
        box-sizing: border-box;
        white-space: normal;
    }
    .expandable-inner .fund-ranking-section .fund-ranking-table tbody td:nth-child(10) .btn {
        white-space: normal;
        line-height: 1.22 !important;
        padding: 0.22rem 0.4rem !important;
        font-size: 13px !important;
    }

    .expandable-inner .fund-chart-section .chart-container {
        max-width: 100%;
        overflow-x: hidden;
    }
    /* כותרת דירוג – התג בשורה נפרדת במובייל כדי שלא ייחתך */
    .expandable-inner .fund-ranking-section .fund-ranking-title .badge,
    .expandable-inner .fund-ranking-section .fund-ranking-title #rankingBadge {
        display: block !important;
        margin-top: 0.35rem !important;
        margin-inline-start: 0 !important;
        width: fit-content;
        white-space: normal;
    }
}

/* דסקטופ: התג דירוג באותה שורה כמו הכותרת */
@media (min-width: 769px) {
    .expandable-inner .fund-ranking-section .fund-ranking-title .badge,
    .expandable-inner .fund-ranking-section .fund-ranking-title #rankingBadge {
        display: inline-block !important;
        margin-top: 0 !important;
    }
}

/* Reset Bootstrap typography inside legacy lead control - match compareTables.css (14px) */
.lead-legacy-font-reset {
    font-size: 14px;
}
.lead-legacy-font-reset input,
.lead-legacy-font-reset select,
.lead-legacy-font-reset textarea,
.lead-legacy-font-reset label,
.lead-legacy-font-reset .leadFieldName {
    font-size: inherit;
}
.lead-legacy-font-reset .tbLead,
.lead-legacy-font-reset .leadInputText {
    font-size: 14px !important;
    height: 32px !important;
}
.lead-legacy-font-reset .kidomet.selectLead,
.lead-legacy-font-reset .kidomet {
    font-size: 14px !important;
    height: 34px !important;
}
.lead-legacy-font-reset #cbTnaim,
.lead-legacy-font-reset input[type="checkbox"] {
    vertical-align: middle !important;
}

/* אייקון מחשבון בכותרת "מחשבונים" */
#calcs .h3Heading .calc-heading-icon {
    float: left;
    vertical-align: middle;
    margin-left: 6px;
    color: inherit;
    flex-shrink: 0;
}

/* קופות גמל לפי חברה, לפי מסלול (funds-by-type), לפי סוג (funds-by-sug), מחשבונים (#calcs) – צבע קישורים, hover ו-vertical middle */
.funds-by-company .calcTD td,
.funds-by-type .calcTD td,
.funds-by-sug .calcTD td,
#calcs .calcTD td {
    vertical-align: middle;
}
.funds-by-company a,
.funds-by-company .calcLinks,
.funds-by-company .calcLinksSubPage,
.funds-by-type a,
.funds-by-type .calcLinks,
.funds-by-type .calcLinksSubPage,
.funds-by-sug a,
.funds-by-sug .calcLinks,
.funds-by-sug .calcLinksSubPage,
#calcs a,
#calcs .calcLinks,
#calcs .calcLinksSubPage {
    color: #17765a;
    text-decoration: none;
    vertical-align: middle;
    line-height: 36px;
    height: 36px;
    display: inline-block;
    box-sizing: border-box;
}
.funds-by-company tr.calcTD:hover td,
.funds-by-company .calcTD .calcLinks:hover,
.funds-by-company .calcTD a:hover,
.funds-by-type tr.calcTD:hover td,
.funds-by-type .calcTD .calcLinks:hover,
.funds-by-type .calcTD a:hover,
.funds-by-sug tr.calcTD:hover td,
.funds-by-sug .calcTD .calcLinks:hover,
.funds-by-sug .calcTD a:hover,
#calcs tr.calcTD:hover td,
#calcs .calcTD .calcLinks:hover,
#calcs .calcTD a:hover {
    background-color: #f7f7f3;
}
.funds-by-company .calcTD td,
.funds-by-company .calcTD .calcLinks,
.funds-by-type .calcTD td,
.funds-by-type .calcTD .calcLinks,
.funds-by-sug .calcTD td,
.funds-by-sug .calcTD .calcLinks,
#calcs .calcTD td,
#calcs .calcTD .calcLinks {
    transition: background-color 0.15s ease;
}

/* Mobile: arrow icon fixed to left edge of row (funds-by-type, funds-by-company, etc.) */
@media (max-width: 768px) {
    .funds-by-type .calcTD td a,
    .funds-by-company .calcTD td a,
    .funds-by-sug .calcTD td a,
    #calcs .calcTD td a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .funds-by-type .calcTD .calcLinks,
    .funds-by-type .calcTD .calcLinksSubPage,
    .funds-by-company .calcTD .calcLinks,
    .funds-by-company .calcTD .calcLinksSubPage,
    .funds-by-sug .calcTD .calcLinks,
    .funds-by-sug .calcTD .calcLinksSubPage,
    #calcs .calcTD .calcLinks,
    #calcs .calcTD .calcLinksSubPage {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        background-position: left center;
        padding-left: 28px;
    }
}

/* ============================================
   מקטעי-תוכן בתחתית דפי ההשוואה — כותרת אחידה (.moreArticles) + טבלת מדד שירות
   (#serviceIndex). משותף כדי שכל דף שיוסיף את ה-markup יהיה אחיד.
   ============================================ */
.moreArticles {
    font-size: 1.25rem;
    line-height: 1.333;
    font-weight: bold;
    margin-top: 22px; /* ריווח מהמקטע שמעליו */
}

/* קו מפריד מתחת לכותרת המקטע — מעודן (דק, בצבע האתר) ובמלוא הרוחב, במקום הפס הכהה
   העבה. ממוקד רק למפריד שצמוד ל-.moreArticles → border-box10 בשאר האתר לא מושפע. */
.moreArticles + .border-box10 {
    border-top: 2px solid #17765a;
    padding: 0;
    height: 0;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
}

#serviceIndex {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.95rem;
}
#serviceIndex th,
#serviceIndex td {
    border: 1px solid #e0e0e0;
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}
#serviceIndex tr:first-child th {
    background: #17765a; /* כותרת בצבע האתר */
    color: #fff;
    font-weight: bold;
}
#serviceIndex td:first-child,
#serviceIndex tr:first-child th:first-child {
    text-align: right; /* עמודת החברה — יישור לתחילת השורה (RTL) */
}
#serviceIndex td:first-child { font-weight: bold; }
#serviceIndex td { background: #fff; }
#serviceIndex tr:nth-child(even) td { background: #f0f6f3; } /* zebra ירקרק עדין */
#serviceIndex tr:not(:first-child):hover td { background: #e7efea; }

/* ============================================
   "מדריכים ומאמרים נוספים" — teaser-grid למדריכים בתחתית דפי ההשוואה.
   ממוקם על #articlesBox; משותף כדי שכל דף שיוסיף את ה-markup יהיה אחיד.
   ============================================ */
#articlesBox {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 24px;
    margin-top: 22px; /* ריווח מהחלק שמעליו */
}
#articlesBox > .moreArticles,
#articlesBox > .border-box10 { grid-column: 1 / -1; }
#articlesBox .moreArticles { font-size: 1.25rem; line-height: 1.333; margin: 0; }
#articlesBox .g__cell { width: auto; padding-left: 0; display: block; margin: 0; }
#articlesBox .teaserEvent { display: block; text-decoration: none; }
#articlesBox .teaserEvent img {
    width: 100%; height: 180px; object-fit: cover; display: block; border-radius: 6px;
}
#articlesBox .teaserEvent .font3 {
    color: #17765a; margin: 10px 0 0; line-height: 1.3; font-size: 1.1rem !important;
}
#articlesBox .teaserEvent:hover .font3 span { text-decoration: underline; }
@media (max-width: 600px) { #articlesBox { grid-template-columns: 1fr; } }

/* ============================================
   FAQ Section - indexArticle, tableOfContent, faq-container
   (from original CompareKupotGemel + compareTablesV2)
   ============================================ */

/* indexArticle / supermarkerArticle wrapper */
.mainIndex .indexArticle.supermarkerArticle,
.indexArticle.supermarkerArticle {
    margin-top: 5%;
    width: 95%;
    max-width: 100%;
    font-size: 15px;
    padding: 1% 2% 1% 5%;
    direction: rtl;
    text-align: right;
}

.mainIndex .indexArticle h2,
.indexArticle.supermarkerArticle h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5em;
    text-align: right;
}

.mainIndex .indexArticle p,
.indexArticle.supermarkerArticle p {
    margin-bottom: 1em;
    text-align: right;
}

.mainIndex .indexArticle h4,
.indexArticle h4 {
    font-size: 18px;
}

.mainIndex .indexArticle h5,
.indexArticle h5 {
    font-size: 15px;
}

.mainIndex .indexArticle a,
.indexArticle.supermarkerArticle a {
    color: #0d6efd;
}

.mainIndex .indexArticle a:hover,
.indexArticle.supermarkerArticle a:hover {
    text-decoration: underline;
}

/* Table of content */
.mainIndex .tableOfContent,
.tableOfContent {
    margin: 2em 0;
    text-align: right !important;
}

.mainIndex #tableOfContent,
#tableOfContent {
    list-style: none;
    border-right: 2px solid #e0e0e0;
    margin-right: 1em;
    padding-right: 1em;
}

.mainIndex #tableOfContent a,
#tableOfContent a {
    text-decoration: none;
    color: #333;
}

.mainIndex #tableOfContent a:hover,
#tableOfContent a:hover {
    text-decoration: underline;
}

.mainIndex #tableOfContent li,
#tableOfContent li {
    margin-bottom: 5px;
}

/* FAQ Styles */
#faq-services {
    margin: 0 0 30px 0;
    padding-top: 30px;
}

#faq-services h3 {
    text-align: right;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* המרווח בין השאלות: .faq-item מקוננות בתוך עטיפת ה-FAQPage (#faq-services / #faq-savings)
   ולא ישירות תחת .faq-container, ולכן ה-gap של .faq-container לא חל עליהן. מחילים flex+gap
   על העטיפה עצמה כדי שיהיה מרווח אחיד בין כל השאלות (בכל הדפים: גמל/השתלמות/מנהלים/חיסכון). */
.faq-container > [itemtype="https://schema.org/FAQPage"] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: #fafdfb;
    border: 1px solid #cfe8de;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(23, 118, 90, 0.06);
    overflow: hidden;
}

.faq-question {
    display: flex;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    background: #fff;
    border-bottom: 1px solid #e8f0ed;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background: #f5fbf8;
}

.faq-question.active {
    background: #e8f4f0;
    border-bottom-color: #cfe8de;
}

.faq-icon {
    background: #17765a;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    margin-right: 1em;
    transition: transform 0.3s ease;
}

.faq-question.active .faq-icon {
    transform: scale(1.1);
}

.faq-text {
    flex: 1;
    margin: 0;
    padding: 0;
}

h4.faq-text {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f3a33;
    text-align: right !important;
    direction: rtl;
    width: 100%;
    margin-right: 1em;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
}

.faq-answer.open {
    max-height: 1500px;
}

.faq-answer p {
    padding: 20px;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #33534a;
    text-align: right;
}

.faq-answer ul {
    padding: 20px;
    margin: 0;
    text-align: right !important;
    direction: rtl;
}

.faq-answer li {
    text-align: right;
    direction: rtl;
}

.faq-answer a {
    color: #17765a;
    text-decoration: underline;
}

.faq-answer a:hover,
.faq-answer a:focus {
    color: #125a46;
}

/* FAQ Mobile Responsive */
@media (max-width: 768px) {
    #faq-services {
        padding-top: 20px;
    }

    .faq-question {
        padding: 15px;
    }

    .faq-icon {
        width: 25px;
        height: 25px;
        font-size: 16px;
        margin-right: 0.8em;
    }

    h4.faq-text,
    .faq-text h4 {
        font-size: 16px;
    }

    .faq-answer p {
        padding: 15px;
        font-size: 16px;
    }

    .faq-answer ul {
        padding: 15px;
        text-align: right !important;
        direction: rtl;
    }

    .faq-answer li {
        text-align: right;
        direction: rtl;
    }

    .mainIndex .indexArticle.supermarkerArticle,
    .indexArticle.supermarkerArticle {
        width: 100%;
        padding: 1em;
    }
}

/* כיתוב משני — fundDetailsLoader / מודאל פרטי קופה (דפים עם cssGemelModern בלבד) */
.kg-muted-caption {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--bs-secondary-color);
}

/* Migrated from inline <style> in CompareKupotGemel/CompareHishtalmutFunds head (Apr 2026) */
.autocomplete-wrapper {
    position: relative;
    direction: rtl;
    width: 100%;
    display: block;
}

.autocomplete-wrapper input {
    width: 100%;
    box-sizing: border-box;
}

.autocomplete-wrapper .list-group {
    direction: rtl;
    text-align: right;
    right: 0 !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    /* Override Chrome default ul styles */
    padding-inline-start: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    list-style-type: none !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.autocomplete-wrapper .list-group-item {
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(0,0,0,.125);
    transition: background-color 0.15s ease-in-out;
    font-size: 0.85rem;
    line-height: 1.3;
    min-height: auto;
}

.autocomplete-wrapper .list-group-item:hover,
.autocomplete-wrapper .list-group-item.active {
    background-color: #0d6efd;
    color: white;
    z-index: 1;
}

.autocomplete-wrapper .list-group-item mark {
    background-color: #ffc107;
    padding: 0;
    font-weight: bold;
}

.autocomplete-wrapper .list-group-item.active mark {
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Mobile: Fix autocomplete dropdown overflow - allow text to wrap to multiple lines */
@media (max-width: 768px) {
    .autocomplete-wrapper {
        /* Don't use overflow-x: hidden - it hides the absolute positioned dropdown */
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important; /* Ensure positioning context */
    }

    .autocomplete-wrapper .list-group {
        max-width: 100% !important; /* Limit dropdown width to container */
        width: 100% !important;
        min-width: 100% !important; /* Ensure it takes full width */
        left: auto !important; /* Reset left positioning */
        right: 0 !important; /* Align to right edge of container (RTL) */
        box-sizing: border-box !important;
    }

    .autocomplete-wrapper .list-group-item {
        word-wrap: break-word !important; /* Allow text to wrap to next line */
        overflow-wrap: break-word !important; /* Modern property for word breaking */
        white-space: normal !important; /* Allow text to wrap (not single line) */
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-right: 0.6rem !important;
        padding-left: 0.6rem !important;
        min-height: auto !important; /* Allow row to grow in height */
        height: auto !important; /* Allow row to grow in height */
        line-height: 1.5 !important; /* Better line spacing for multi-line text */
    }

    /* Ensure input doesn't overflow */
    .autocomplete-wrapper input {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Modern Combobox Styles */
.combobox-wrapper {
    position: relative;
}

.combobox-wrapper .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    margin-top: 2px;
    top: 100% !important; /* Position below the input group */
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    z-index: 1050; /* Ensure it's above other elements but not blocking input */
}

/* Ensure input group has proper positioning context */
.combobox-wrapper .input-group {
    position: relative;
}

.combobox-wrapper .dropdown-item {
    cursor: pointer;
    white-space: normal;
    word-wrap: break-word;
}

.combobox-wrapper .dropdown-item:hover,
.combobox-wrapper .dropdown-item.active {
    background-color: #0d6efd;
    color: white;
}

.combobox-wrapper .dropdown-item mark {
    background-color: #ffc107;
    padding: 0;
    font-weight: bold;
}

.combobox-wrapper .dropdown-item.active mark {
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Fix combobox button borders for RTL */
.combobox-wrapper .input-group {
    direction: rtl;
}

/* Input (on the right in RTL): right border with radius, left border without radius (connects to button) */
/* Override Bootstrap's .input-group>:not(:first-child) rule with higher specificity */
.combobox-wrapper .input-group > #comboboxInput:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback),
.combobox-wrapper .input-group #comboboxInput.form-control,
.combobox-wrapper .input-group > .form-control#comboboxInput {
    margin-left: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid #ced4da !important;
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Button (on the left in RTL): left border with radius, right border without radius (connects to input) */
/* Override Bootstrap's .input-group>:not(:first-child) rule with higher specificity */
.combobox-wrapper .input-group > #comboboxToggle:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback),
.combobox-wrapper .input-group #comboboxToggle.btn,
.combobox-wrapper .input-group > .btn#comboboxToggle {
    margin-left: 0 !important;
    border-right: 0 !important;
    border-left: 1px solid #ced4da !important;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.combobox-wrapper .input-group .btn:focus {
    z-index: 3;
}

/* RTL Support for Bootstrap 5 - Add this after the autocomplete styles */
/* Set RTL direction for the entire page content */
#searchCriteria,
#searchCriteria * {
    direction: rtl;
    text-align: right;
}

/* Fix Bootstrap form-select dropdown alignment in RTL */
.form-select {
    direction: rtl;
    text-align: right;
    padding-right: 0.75rem;
    padding-left: 2.25rem; /* Space for arrow on left */
    background-position: left 0.75rem center;
}

/* Fix select options alignment */
.form-select option {
    direction: rtl;
    text-align: right;
}

/* Fix Bootstrap table alignment for RTL */
.table {
    direction: rtl;
}

.table th,
.table td {
    text-align: right;
}

/* Fix Bootstrap grid system for RTL */
.row {
    direction: rtl;
}

/* Fix Bootstrap form controls */
.form-control,
.form-select {
    direction: rtl;
    text-align: right;
}

/* Override Bootstrap's default LTR padding for RTL */
.text-end {
    text-align: right !important;
}

/* Fix any Bootstrap utilities that might be LTR */
.ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

.me-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Fix Bootstrap spacing utilities for RTL */
.me-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

.ms-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* השוואות גמל/השתלמות: ריווח קל לימין של סט כפתורי השיתוף במובייל */
@media (max-width: 767.98px) {
    .sm-share-bar.gemel-share-top {
        padding-inline-start: 1.5%;
    }
}

/* ============================================================
   רוחב דסקטופ מלא לדפי השוואת רשימה (ביטוחי מנהלים / פוליסות חיסכון)
   ------------------------------------------------------------
   ברירת המחדל של המעטפת (#main.centerDesign ב-compareTables.css)
   נועלת את הדף על 980px קבוע, עם .mainIndex(665px)+.topLeft(300px)
   בפריסת float. כאן אנחנו:
     1) מרחיבים את #main ל-100% עד 1400px ממורכז (כמו דפי הפרטים).
     2) ממירים את ה-float ל-Bootstrap row (.gemel-compare-main)
        עם עמודות col-12/col-lg-9/col-lg-3 שמוגדרות ב-aspx.
   הקלאסים gemel-compare-wide / gemel-compare-body מתווספים
   ע"י סקריפט inline בראש הדף. מובייל לא מושפע (העמודות נערמות).
   ============================================================ */
body.gemel-compare-body {
    width: 100% !important;
    max-width: none !important;
}

#main.gemel-compare-wide {
    width: 100% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ניטרול ה-margin השלילי של .row: .main אינו יושב בתוך container
   עם padding, ולכן ה-gutter השלילי היה גורם לגלילה אופקית קלה.
   ביטול ה-margin משאיר את ה-padding של העמודות → inset סימטרי קל
   בקצוות ומרווח תקין (1.5rem) בין התוכן לסיידבר. */
.gemel-compare-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* פרטי הפאנל הנפתח: אם תווית+ערך לא נכנסים ברוחב הכרטיס (בעיקר בטאבלט,
   שם הכרטיסים צרים יחסית), הערך יורד לשורה חדשה במקום לגלוש מהרוחב.
   flex-wrap גורם לכך רק כשאין מקום — כשיש מקום נשאר באותה שורה. */
#main.gemel-compare-wide .fund-detail-item {
    flex-wrap: wrap;
}

/* סיידבר רספונסיבי בדפי הפוליסות: רכיבי ה-300px הישנים מ-compareTables.css
   (.lead / טופס הליד / #checkList / טבלאות הקישורים) ממלאים את רוחב העמודה
   (.topLeft = col-lg-3 בדסקטופ, col-12 במובייל) בכל מכשיר, במקום 300px קבוע. */
#main.gemel-compare-wide .topLeft .lead,
#main.gemel-compare-wide .topLeft .leadBox,
#main.gemel-compare-wide .topLeft #checkList,
#main.gemel-compare-wide .topLeft .articlesBox,
#main.gemel-compare-wide .topLeft #calcs,
#main.gemel-compare-wide .topLeft #gemelByYatzranim {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
#main.gemel-compare-wide .topLeft #checkList ul,
#main.gemel-compare-wide .topLeft #checkList table,
#main.gemel-compare-wide .topLeft #calcs table,
#main.gemel-compare-wide .topLeft .articlesBox table {
    width: 100% !important;
    max-width: 100% !important;
}

/* קישורי "לפי חברה" / "לפי מסלול/סוג" / מחשבונים בסיידבר: .calcLinks נעול
   ל-300px ב-compareTables עם חץ ב-background-position:left — אז החץ יושב
   בשמאל תיבת ה-300px ולא בקצה השורה. הופכים את הקישור למלא-רוחב, חץ צמוד
   לשמאל עם רווח קטן, וטקסט מימין עם רווח קטן (כך שלא ייגעו בשולי המכשיר).
   מכוּון ל-.topLeft (ולא ל-#gemelByYatzranim/#calcs בלבד) כדי לכסות גם את
   דפי הגמל/השתלמות שעוטפים את הקישורים ב-.articlesBox ללא ה-IDs האלה. */
#main.gemel-compare-wide .topLeft .calcTD td a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
}
#main.gemel-compare-wide .topLeft .calcLinks,
#main.gemel-compare-wide .topLeft .calcLinksSubPage {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    background-position: left 8px center !important;  /* חץ עם רווח קטן משמאל */
    padding-left: 30px !important;                     /* מקום לחץ + רווח */
    padding-right: 10px !important;                    /* רווח לטקסט מימין */
}

/* מובייל/טאבלט (<992px): העמודות נערמות, אז ה-padding של gutter ה-Bootstrap
   (gx-4 ≈ 0.75rem לכל צד) רק מצר את התוכן ללא תועלת — וגרם לפילטרים להיות
   צרים יותר מאשר בדפי גמל (שעדיין float ללא padding כזה). מבטלים אותו כדי
   שהתוכן ימלא את הרוחב כמו בגמל. הפרדת התוכן/סיידבר בדסקטופ נשמרת ע"י ה-gap. */
@media (max-width: 991.98px) {
    /* במובייל/טאבלט .main חוזר ל-block (כמו דפי הגמל) — אין צורך ב-flex כי
       העמודות נערמות ממילא, וה-flex+overflow:visible של הפאנל הנפתח גרם
       לתוכן ה-650px לפרוץ את הדף במקום להיות מוכל בגלילת #gemelTableContainer.
       .row הוא display:flex תמיד, לכן דורסים אותו במפורש. */
    .gemel-compare-main {
        display: block !important;
        /* הערה: הרווח התחתון לכפתור ה-CTA הקבוע מסופק ע"י kupat-gemel.css
           (body:has(#leadOffer.kg-lead-offer){padding-bottom:100px}) — אין צורך כאן. */
    }
    .gemel-compare-main > .mainIndex,
    .gemel-compare-main > .topLeft {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        /* פריט flex עם min-width:auto (ברירת מחדל) לא מתכווץ מתחת לרוחב התוכן
           הרחב ביותר (טבלת הדירוג: min-width:783/100vw) → העמודה מתנפחת מעבר
           ל-viewport וכל הטבלאות בפאנל נסחבות. min-width:0 מאפשר התכווצות ל-
           viewport, וה-overflow נשאר מוכל פר-טבלה (.table-responsive) כמו במקור. */
        min-width: 0 !important;
    }
}

/* דסקטופ בלבד: פריסה חסינה.
   ה-CSS הישן (compareTables) קובע ל-.mainIndex float:right;width:665px
   ול-.topLeft float:left;width:300px. כדי לא להסתמך על סדר טעינת CSS
   או על קרבות ספציפיות מול col-lg, אנחנו אוכפים flex מפורש בספציפיות
   גבוהה (#main.gemel-compare-wide ... > ...) עם !important:
     - .gemel-compare-main = flex row אמיתי (מבטל float).
     - .mainIndex = גדל וממלא את כל הרוחב הפנוי (flex:1).
     - .topLeft = רוחב קבוע 320px לצד שמאל.
   כך התוכן תמיד ממלא את הרוחב, ללא פערים. */
@media (min-width: 992px) {
    #main.gemel-compare-wide .gemel-compare-main {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start;
        gap: 1.5rem;
        float: none !important;
        width: 100% !important;
    }
    #main.gemel-compare-wide .gemel-compare-main > .mainIndex {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;       /* מאפשר ל-.table-responsive לכווץ במקום לדחוף */
        float: none !important;
        border-left: none !important;
    }
    #main.gemel-compare-wide .gemel-compare-main > .topLeft {
        flex: 0 0 27% !important;   /* פרופורציונלי — גדל עם רוחב הדף */
        width: 27% !important;
        max-width: 27% !important;
        min-width: 300px !important; /* רצפה כדי שטופס הליד לא יצטמצם מדי במסכים בינוניים */
        float: none !important;
        border: none !important;
    }
    /* שארית ה-clear:both הופכת לפריט flex מיותר — להסתיר */
    #main.gemel-compare-wide .gemel-compare-main > div[style*="clear"] {
        display: none !important;
    }

    /* תיבת החיפוש/סינון נעולה ל-650px ממורכז (#searchCriteria); בדפים
       הרחבים מבטלים את הנעילה כדי שתתיישר לרוחב התוכן כמו הטבלה. */
    #main.gemel-compare-wide #searchCriteria {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* קבוצת הטאבים (.tab_holder) ופס הבקרה (.indexControlsButtonsBox —
       תאריך עדכון + מונה תוצאות) נעולים גם הם ל-650px ממורכז. מותחים
       לרוחב התוכן ומיישרים לימין (RTL) כמו שאר הרכיבים. */
    #main.gemel-compare-wide .tab_holder,
    #main.gemel-compare-wide .indexControlsButtonsBox {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* מעטפת הטבלה (#gemelTableContainer.table-responsive) נעולה ל-650px
       ב-@media(min-width:769px) — זה מה שבלם את ההתרחבות בפועל. בדפי
       הרשימה הרחבים מבטלים את הנעילה והמעטפת ממלאת את העמודה. */
    #main.gemel-compare-wide #gemelTableContainer.table-responsive,
    #main.gemel-compare-wide #gemelTableContainer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* הטבלה עצמה נעולה ל-650px; מותחים למלוא רוחב המעטפת
       (table-layout:fixed מחלק את העמודות פרופורציונלית). */
    #main.gemel-compare-wide .gemelMainTable,
    #main.gemel-compare-wide table.gemelMainTable {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* פרופורציות עמודות לרוחב המלא (table-layout:fixed לוקח רוחב
       מהשורה הראשונה): "השווה" צרה, "שם פוליסה" רחבה, ושאר 7
       עמודות התשואה/דמי-ניהול מתחלקות שווה בשאר הרוחב. */
    #main.gemel-compare-wide #gemelTable thead th:nth-child(1) {
        width: 6% !important;
    }
    #main.gemel-compare-wide #gemelTable thead th:nth-child(2) {
        width: 27% !important;
    }
}

/* ============================================================
   פאנל נפתח — טבלת הדירוג: בדסקטופ רחב מאוד (≥1200px) יש מספיק
   מקום ל-8 העמודות, ולכן מבטלים את הרוחב הקבוע (783px) ואת ה-
   scroll-pad (300px) שתוכננו ל-layout הצר. הטבלה ממלאת את הרוחב
   ללא גלילה אופקית מיותרת. בטווח 992–1199 משאירים את הגלילה
   (אין מספיק מקום) — שמירה על רספונסיביות מלאה.
   ============================================================ */
@media (min-width: 1200px) {
    #main.gemel-compare-wide .expandable-inner .fund-ranking-section .table-responsive {
        overflow-x: visible !important;   /* מספיק רוחב — אין צורך בגלילה */
        width: 100% !important;
        max-width: 100% !important;       /* דריסת הכלל הגנרי .table-responsive{max-width:650px!important} */
    }
    #main.gemel-compare-wide .expandable-inner .fund-ranking-section .table-responsive .fund-ranking-scroll-pad {
        display: block !important;        /* היה inline-block (shrink-to-fit) — מנע מהטבלה למלא רוחב */
        width: 100% !important;
        padding-inline-end: 0 !important; /* ביטול ה-pad שנועד לחשיפת גלילה */
    }
    #main.gemel-compare-wide .expandable-inner .fund-ranking-section .fund-ranking-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    /* שחרור תקרות הרוחב של העמודות כדי שיתמתחו וימלאו את הרוחב
       (table-layout:fixed מחלק את העודף לפי ה-width היחסי הקיים). */
    #main.gemel-compare-wide .expandable-inner .fund-ranking-section .fund-ranking-table thead th,
    #main.gemel-compare-wide .expandable-inner .fund-ranking-section .fund-ranking-table tbody td,
    #main.gemel-compare-wide .expandable-inner .fund-ranking-section .fund-ranking-table tfoot td {
        max-width: none !important;
    }
}

/* ============================================================
   באנר CTA לאיסוף לידים בסוף התוכן (דפי פוליסות חיסכון / ביטוחי מנהלים).
   רוחב מלא, ירוק-מותג, נערם במובייל. class ייחודי — לא משפיע על גמל.
   ============================================================ */
.menahalim-leadbanner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    background: #eef5f1;
    border: 1px solid #cfe3d8;
    border-inline-start: 5px solid #17765a;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    direction: rtl;
    text-align: right;
}
.menahalim-leadbanner__text {
    margin: 0;
    flex: 1 1 320px;
    font-size: 1rem;
    line-height: 1.5;
    color: #2c3e36;
}
.menahalim-leadbanner__text strong { color: #17765a; }
.menahalim-leadbanner__btn,
.menahalim-leadbanner__btn:link,
.menahalim-leadbanner__btn:visited {
    flex: 0 0 auto;
    display: inline-block;
    background: #17765a;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.menahalim-leadbanner__btn:hover,
.menahalim-leadbanner__btn:focus {
    background: #0f5a44;
    color: #fff;
    text-decoration: none;
}
@media (max-width: 575.98px) {
    .menahalim-leadbanner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        flex-wrap: nowrap;
    }
    /* בעמודה (column) ה-flex-basis של 320px נמדד על הציר האנכי וכופה גובה ריק על הטקסט —
       מאפסים כך שהטקסט ייצמד לתוכן ולא ייווצר חלל באמצע הבאנר. */
    .menahalim-leadbanner__text { flex: 0 0 auto; }
    .menahalim-leadbanner__btn { text-align: center; }
}


/* ════════════════════════════════════════════════════════════════════════════
   סרגל הסינון החדש (2026-08, feature/compare-filters-modern) — דפי ההשוואה
   Opt-in: נטען רק כשהדף מרנדר את המבנה .kg-fbar (modernFilterBar.js).
   tokens משותפים לשלושת דפי הגמל (גם ב-kupat-gemel.css):
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --kg-brand: #17765a;
    --kg-brand-dark: #0f5a47;
    --kg-line: #dce8e3;
    --kg-soft: #eef4f1;
    --kg-soft2: #e3f3ec;
    --kg-ink: #263d35;
    --kg-muted: #5a6e66;
    --kg-warn: #c05a2e;
    --kg-warn-bg: #fdf1ea;
    --kg-pos: #1b7f4d;
    --kg-neg: #b3261e;
    --kg-shadow: 0 10px 30px rgba(15, 90, 71, .14);
}
.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; }

/* ── מחליף מוצר (במקום .tab_holder) ── */
.kg-fam { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; padding: 0; list-style: none; }
.kg-fam a, .kg-fam span { text-decoration: none; border: 1.5px solid var(--kg-line); background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; color: var(--kg-ink); }
.kg-fam a:hover { border-color: var(--kg-brand); color: var(--kg-ink); text-decoration: none; }
.kg-fam .on { background: var(--kg-brand); border-color: var(--kg-brand); color: #fff; font-weight: bold; }

/* ── הסרגל ── */
.kg-fbar-wrap { position: sticky; top: 0; z-index: 40; }
.kg-fbar { position: relative; background: #fff; border: 1.5px solid var(--kg-line); border-radius: 16px; padding: 12px 14px 10px; box-shadow: 0 2px 10px rgba(15, 90, 71, .06); margin-bottom: 12px; }
.kg-fbar-wrap.stuck .kg-fbar { border-radius: 0 0 16px 16px; box-shadow: 0 8px 24px rgba(15, 90, 71, .12); }
/* ⚠⚠ שתי שכבות במכוון: בדסקטופ __row נושאת את הפריסה ו-__pills הוא
   display:contents, כלומר הכפתורים נשארים ילדים ישירים של אותו flex עם אותם
   ערכים שהיו — ולכן הדסקטופ זהה לחלוטין. במובייל __pills הופך
   למיכל גלילה משלו, והחיפוש יוצא ממנו לשורה נפרדת. */
.kg-fbar__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kg-fbar__pills { display: contents; }
.kg-pill { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--kg-line); background: #fff; border-radius: 999px; padding: 0 14px; min-height: 44px; font-size: 14.5px; cursor: pointer; white-space: nowrap; color: var(--kg-ink); position: relative; font-family: inherit; transition: border-color .12s, background .12s; }
.kg-pill:hover { border-color: var(--kg-brand); }
.kg-pill[aria-expanded="true"] { border-color: var(--kg-brand); box-shadow: 0 0 0 3px rgba(23, 118, 90, .12); }
.kg-pill.on { border-color: var(--kg-brand); background: var(--kg-soft); color: var(--kg-brand-dark); font-weight: bold; }
.kg-pill .kg-chev { transition: transform .15s; }
.kg-pill[aria-expanded="true"] .kg-chev { transform: rotate(180deg); }
.kg-pill__cnt { background: var(--kg-brand); color: #fff; border-radius: 999px; font-size: 12px; min-width: 20px; height: 20px; line-height: 20px; text-align: center; padding: 0 6px; font-weight: bold; }
.kg-pill__val { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.kg-pill--more { border-style: dashed; }
/* שדה החיפוש */
.kg-psearch { flex: 1 1 260px; min-width: 220px; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--kg-line); border-radius: 999px; padding: 0 14px; min-height: 44px; background: #fff; position: relative; }
.kg-psearch:focus-within { border-color: var(--kg-brand); box-shadow: 0 0 0 3px rgba(23, 118, 90, .12); }
.kg-psearch input { border: 0 !important; outline: 0; background: transparent; font: inherit; font-size: 14.5px; flex: 1; min-width: 0; color: var(--kg-ink); box-shadow: none !important; padding: 0; height: auto; }
.kg-psearch input::placeholder { color: #8a9a93; }
.kg-psearch .kg-psearch__clear { border: 0; background: transparent; cursor: pointer; padding: 4px; color: var(--kg-muted); display: inline-flex; }
.kg-psearch .kg-psearch__clear[hidden] { display: none; }
/* ה-autocomplete הקיים (modernFundFilters) עוטף את ה-input ב-.autocomplete-wrapper — שומרים אותו גמיש */
.kg-psearch .autocomplete-wrapper { flex: 1; min-width: 0; }
.kg-psearch .autocomplete-wrapper .list-group { right: 0; left: auto; }

/* שורת הסיכום */
.kg-fbar__summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--kg-line); min-height: 36px; }
.kg-count { font-size: 14px; color: var(--kg-muted); white-space: nowrap; }
.kg-count b { color: var(--kg-ink); font-size: 16px; }
.kg-asof { font-size: 12.5px; color: var(--kg-muted); white-space: nowrap; }
.kg-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kg-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--kg-soft); border: 1px solid #cfe3da; color: var(--kg-brand-dark); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 13px; font-weight: bold; line-height: 1; }
.kg-chip small { font-weight: normal; color: var(--kg-muted); }
.kg-chip button { border: 0; background: #fff; border-radius: 50%; width: 20px; height: 20px; display: inline-grid; place-items: center; cursor: pointer; color: var(--kg-brand-dark); padding: 0; }
.kg-chip button:hover { background: var(--kg-brand); color: #fff; }
.kg-clearall { border: 0; background: transparent; color: var(--kg-warn); font-weight: bold; cursor: pointer; font-size: 13px; padding: 4px 6px; text-decoration: underline; white-space: nowrap; font-family: inherit; }
.kg-clearall[hidden] { display: none; }
.kg-sortbox { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--kg-muted); white-space: nowrap; margin-bottom: 0; }
.kg-sortbox select { border: 1.5px solid var(--kg-line); border-radius: 10px; padding: 6px 8px; font: inherit; font-size: 13.5px; background: #fff; min-height: 36px; color: var(--kg-ink); }

/* חיפושים פופולריים */
.kg-presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 2px 14px; font-size: 13px; color: var(--kg-muted); }
.kg-presets a { text-decoration: none; border: 1px solid var(--kg-line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--kg-brand-dark); display: inline-flex; gap: 6px; align-items: center; }
.kg-presets a:hover { border-color: var(--kg-brand); background: var(--kg-soft); text-decoration: none; }

/* ── פופאובר / bottom sheet ── */
.kg-backdrop { position: fixed; inset: 0; background: rgba(20, 40, 34, .35); z-index: 45; display: none; }
.kg-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 460px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--kg-line); border-radius: 16px; box-shadow: var(--kg-shadow); z-index: 60; display: none; flex-direction: column; max-height: min(72vh, 640px); text-align: right; }
.kg-pop.open { display: flex; }
.kg-pop__h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; border-bottom: 1px solid var(--kg-line); }
.kg-pop__h h3 { margin: 0; font-size: 16px; font-weight: bold; }
.kg-pop__hint { font-size: 12.5px; color: var(--kg-muted); margin-inline-start: auto; }
.kg-pop__x { border: 0; background: transparent; cursor: pointer; padding: 6px; margin-inline-start: 4px; display: none; color: var(--kg-muted); }
.kg-pop__b { padding: 12px 16px; overflow: auto; flex: 1; }
.kg-pop__f { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--kg-line); background: #fbfdfc; border-radius: 0 0 16px 16px; }
.kg-pop__reset { border: 0; background: transparent; color: var(--kg-muted); cursor: pointer; font-size: 14px; text-decoration: underline; padding: 6px 4px; font-family: inherit; }
.kg-pop__reset:disabled { opacity: .45; text-decoration: none; cursor: default; }
.kg-btn-apply { margin-inline-start: auto; border: 0; background: var(--kg-brand); color: #fff; border-radius: 999px; padding: 0 22px; min-height: 44px; font-size: 15px; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; }
.kg-btn-apply:hover { background: var(--kg-brand-dark); }
.kg-btn-apply.zero { background: #a9b8b2; }
.kg-grp { margin-bottom: 14px; }
.kg-grp__h { display: flex; align-items: center; gap: 8px; font-weight: bold; font-size: 14px; margin: 0 0 8px; color: var(--kg-ink); }
.kg-grp__h .kg-i { color: var(--kg-brand); font-size: 18px; }
.kg-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.kg-tile { border: 1.5px solid var(--kg-line); background: #fff; border-radius: 10px; min-height: 42px; padding: 7px 12px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: border-color .12s, background .12s; color: var(--kg-ink); font-family: inherit; }
.kg-tile:hover { border-color: var(--kg-brand); }
.kg-tile.on { border-color: var(--kg-brand); background: var(--kg-soft); color: var(--kg-brand-dark); font-weight: bold; }
.kg-tile__n { font-size: 11.5px; color: var(--kg-muted); font-weight: normal; background: #f1f5f3; border-radius: 999px; padding: 1px 6px; }
.kg-tile.on .kg-tile__n { background: #fff; }
.kg-tile.zero { opacity: .45; }
.kg-tile > .kg-i { display: none; font-size: 14px; }
.kg-tile.on > .kg-i { display: inline-block; }
.kg-sub { margin-top: 12px; padding: 10px 12px; background: #f7faf8; border: 1px dashed #cfe3da; border-radius: 12px; }
.kg-sub .kg-grp__h { font-size: 13.5px; }
.kg-sub .kg-tile { min-height: 36px; padding: 5px 10px; font-size: 13.5px; }
.kg-note { color: var(--kg-muted); font-size: 12.5px; margin: 8px 0 0; }
.kg-csearch { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--kg-line); border-radius: 10px; padding: 0 10px; min-height: 40px; margin-bottom: 10px; }
.kg-csearch input { border: 0 !important; outline: 0; font: inherit; font-size: 14px; flex: 1; min-width: 0; background: transparent; box-shadow: none !important; }
.kg-clist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.kg-citem { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; font-size: 14px; min-height: 40px; margin: 0; font-weight: normal; }
.kg-citem:hover { background: var(--kg-soft); }
.kg-citem.zero { opacity: .45; }
.kg-citem input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1.5px solid #b9cbc3; border-radius: 6px; display: grid; place-items: center; margin: 0; cursor: pointer; flex: 0 0 auto; background: #fff; }
.kg-citem input:checked { background: var(--kg-brand); border-color: var(--kg-brand); }
.kg-citem input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.kg-citem__l { min-width: 0; }
.kg-citem__n { margin-inline-start: auto; font-size: 12px; color: var(--kg-muted); }
.kg-logo { width: 30px; height: 30px; border-radius: 8px; background: #e7efeb; color: var(--kg-brand-dark); font-size: 12px; font-weight: bold; display: grid; place-items: center; flex: 0 0 auto; }
details.kg-sect summary { cursor: pointer; font-size: 13.5px; color: var(--kg-brand-dark); font-weight: bold; padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 6px; }
details.kg-sect summary::-webkit-details-marker { display: none; }
details.kg-sect[open] summary .kg-chev { transform: rotate(180deg); }

/* ── המשולש הקטן (פתיחת פרטי הקופה) — כפתור עגול במקום glyphicon ── */
.kg-tg { flex: 0 0 auto; width: 28px; height: 28px; border: 1.5px solid var(--kg-line) !important; border-radius: 50% !important; background: #fff !important; display: inline-grid !important; place-items: center; cursor: pointer; color: var(--kg-brand-dark) !important; padding: 0 !important; position: relative; font-size: 13px !important; transition: background .12s, border-color .12s; }
.kg-tg::after { content: ""; position: absolute; inset: -8px; } /* אזור לחיצה 44px */
.kg-tg:hover { border-color: var(--kg-brand) !important; background: var(--kg-soft) !important; }
.kg-tg .kg-i { transition: transform .15s; }
.kg-tg.open, .kg-tg[aria-expanded="true"] { background: var(--kg-brand) !important; border-color: var(--kg-brand) !important; color: #fff !important; }
.kg-tg.open .kg-i, .kg-tg[aria-expanded="true"] .kg-i { transform: rotate(180deg); }

/* ── "הצג עוד" + קישורי עמודים ── */
.kg-loadmore { display: block; text-align: center; text-decoration: none; padding: 14px 12px 6px; font-size: 15px; font-weight: bold; color: var(--kg-brand-dark); }
.kg-loadmore:hover { text-decoration: underline; color: var(--kg-brand-dark); }
.kg-loadmore small { display: block; font-weight: normal; color: var(--kg-muted); font-size: 12.5px; margin-top: 2px; }
.kg-loadmore.loading { opacity: .5; pointer-events: none; }
.kg-loadmore[hidden] { display: none; }
.kg-legacy-filters[hidden], .indexControlsButtonsBox[hidden] { display: none !important; }

/* ── מובייל ── */
@media (max-width: 767px) {
    /* ⚠️ בלי margin שלילי: במובייל .mainIndex ללא padding (gemel-compare-wide) — שוליים שליליים גולשים 16px משמאל */
    /* ⚠⚠ במובייל הרצועה גולשת לשתי שורות ולא גוללת (החלטת רונן 2026-09-02).
       קודם היתה nowrap+overflow-x:auto, והתוצאה: ב-375px רוחב התוכן 570px מול 351px נראים,
       הרצועה נטענת ב-scrollLeft:0 ולכן **הפריט הפעיל ישב מחוץ למסך**
       כשבוחרים ביטוחי מנהלים (x=-85) או פוליסות חיסכון (x=-207) — המשתמש לא רואה איפה הוא.
       לא שינינו סדר פר-דף במכוון: הרצועה היא מפה של משפחת המוצרים,
       וסדר משתנה הורס זיכרון מיקומי — ומזיז את הפריט שעליו בדיוק לחצו.
       חמישה פריטים קבועים לא מצדיקים גלילה אופקית; המחיר הוא 46px גובה (38→84).
       בונוס: אין צורך במסכת דהייה כחיווי גלילה, ואין חשבון scrollLeft שלילי של RTL.
       (הכלל הבסיסי ב-.kg-fam כבר flex-wrap:wrap — כאן רק מפסיקים לדרוס אותו.) */
    .kg-fam { margin: 0 12px 10px; padding: 0; }
    .kg-fam a, .kg-fam span { white-space: nowrap; padding: 7px 13px; font-size: 13.5px; min-height: 38px; }
    /* gutter 12px לכרטיס המעוגל (AGENTS: כרטיס לא נצמד לקצה); כשנצמד למעלה — full-bleed כמו header */
    .kg-fbar-wrap { margin: 0 12px; padding: 0; }
    .kg-fbar-wrap.stuck { margin: 0; }
    .kg-presets { margin: 0 14px 14px; }
    .kg-fbar { border-radius: 14px; padding: 10px 12px 8px; }
    .kg-fbar__pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px; }
    .kg-fbar__pills::-webkit-scrollbar { display: none; }
    /* ⚠⚠ החיפוש בשורה משלו, הכפתורים גוללים לבד (החלטת רונן 2026-09-02).
       קודם החיפוש ישב בתוך רצועת הגלילה וברוחב 255px לקח 73% מ-349px הנראים,
       וכל ארבעת הסינונים התחילו מחוץ למסך. עכשיו שניים נכנסים במלואם
       והשלישי נחתך בקצה — רמז גלילה אמיתי. */
    .kg-fbar__row { display: block; }
    .kg-psearch { width: 100%; min-width: 0; margin-bottom: 8px; }
    .kg-fbar__pills { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap;
        overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px; }
    .kg-fbar__pills::-webkit-scrollbar { display: none; }
    .kg-pill__val { max-width: 120px; }
    .kg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; flex: 1 1 auto; }
    .kg-chips::-webkit-scrollbar { display: none; }
    .kg-asof { display: none; }
    .kg-sortbox { margin-inline-start: 0; flex: 1 0 100%; justify-content: space-between; padding-top: 4px; }
    .kg-sortbox select { flex: 1; max-width: 260px; }
    /* sticky קומפקטי: רק שורת ה-pills */
    /* ⚠⚠ במצב הדביק החיפוש יורד והסרגל מחזיק את הסינונים במקומו.
       זו כל הנקודה של החלופה: הגובה הדביק נשאר כשהיה, ומה שיושב בו
       מתחלף משדה חיפוש (הכי פחות שימושי באמצע רשימה) לסינונים עצמם.
       כשסינון פעיל, הכפתור נושא את הערך שנבחר (kg-pill.on) — ולכן
       המשתמש רואה את הבחירה שלו תוך כדי גלילה. */
    .kg-fbar-wrap.stuck .kg-psearch { display: none; }
    /* הסיכום מוסתר בדביק — חוץ מ-"נקה הכל". הכפתור נושא hidden מה-JS
       כשאין סינון פעיל, ולכן הוא עולה גובה רק כשבאמת יש מה לנקות.
       בלעדיו הדרך היחידה לנקות באמצע הדף היא פתיחת כל פופאפ בנפרד. */
    /* ⚠ min-height:0 חיוני: לסיכום יש min-height:36px בבסיס, ובלעדיו השורה
       נשארת 36px גם כשכל ילדיה display:none — והסרגל הדביק תפח ל-114px. */
    .kg-fbar-wrap.stuck .kg-fbar__summary { display: flex; gap: 6px; padding: 0; margin: 0; border: 0; min-height: 0; }
    .kg-fbar-wrap.stuck .kg-fbar__summary > *:not(.kg-clearall) { display: none; }
    .kg-fbar-wrap.stuck .kg-clearall { margin-top: 8px; }
    .kg-fbar-wrap.stuck .kg-fbar { padding-bottom: 10px; border-radius: 0 0 14px 14px; }
    /* bottom sheet */
    .kg-pop { position: fixed; top: auto; bottom: 0; right: 0; left: 0; width: auto !important; max-width: none; border-radius: 20px 20px 0 0; max-height: 88dvh; animation: kgSheetUp .22s ease-out; }
    @keyframes kgSheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
    .kg-pop::before { content: ""; width: 42px; height: 4px; border-radius: 999px; background: #cfd9d4; margin: 8px auto 0; }
    .kg-pop__x { display: inline-flex; }
    .kg-pop__f { position: sticky; bottom: 0; border-radius: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    .kg-btn-apply { flex: 1; justify-content: center; }
    .kg-clist { grid-template-columns: 1fr; }
    body.kg-sheet-open { overflow: hidden; }
    /* ⚠️ באג שנתפס בשלב 2 (2026-08-27) וקיים גם בדף הגמל: .kg-fbar-wrap הוא stacking context
       (position:sticky + z-index:40), ולכן ה-sheet שבתוכו (#kgPop z:60) נצבע בפועל ב-40 —
       מתחת ל-backdrop (45) ומתחת לסטיקי של הליד (1040). התוצאה: האריחים וכפתור "הצג N"
       לא לחיצים במובייל (elementFromPoint החזיר kg-backdrop / kg-lead-offer__opt).
       מרימים את כל העטיפה מעל שניהם — רק כשה-sheet פתוח, כך שדסקטופ לא מושפע. */
    body.kg-sheet-open .kg-fbar-wrap { z-index: 1050; }
    body.kg-sheet-open .kg-backdrop { z-index: 1045; }
}

/* ── סבב QA של רונן (2026-08-28) ──────────────────────────────────────────────
   1) עוגנים בתוך הדף (השאלות והתשובות): הסרגל הדביק מכסה את ראש היעד אחרי הקפיצה.
      scroll-margin-top בגובה השכבות הדביקות, לפי המצב הגרוע — הסרגל **לא** נכנס למצב הקומפקטי
      אחרי קפיצת עוגן ולכן הוא בגובה המלא: דסקטופ 124px, טלפון 68 (header קבוע) + 163.
      ⚠️ הערך אינו זהה למרווח בפועל: בטלפון הדפדפן מוסיף 83px קבועים (scroll-padding-top גלובלי
      + ה-header), בדסקטופ אפס — נמדד, לא הונח. המשך לקח 10.
   2) הפאנל הנפתח בתוך הטבלה: הטבלה נגללת אופקית במובייל (650px בתוך scrollport של ~374px),
      ולכן הפאנל — שהוא תוכן ולא נתונים טבלאיים — קיבל את רוחב הטבלה וכ-280px ממנו ישבו
      מחוץ למסך. sticky בקצה ההתחלה + רוחב ה-scrollport (משתנה שנקבע ב-modernFilterBar)
      מחזיקים אותו תמיד בתוך המסך. טבלת הדירוג שבתוכו ממשיכה לגלול אופקית בעצמה — שם זה נכון. */
/* ⚠️ סבב QA של רונן (2026-08-30): הערך הקבוע נמדד על הגמל, שסרגלו נכנס
   לשורה אחת. בביטוחי מנהלים יש חמישה מסננים והסרגל גולש לשתיים: נמדד
   125px ב-1265 אבל 163px ב-700 וב-500, ולכן השאלה נחתה 27px מתחת לסרגל.
   --kg-fbar-h הוא הגובה האמיתי ש-modernFilterBar.bindFbarHeight מודד ומעדכן
   ב-resize/ResizeObserver. max() שומר על הערך הישן כרצפה: המרווח יכול רק לגדול,
   דף שבו 136 כבר הספיק לא משתנה, ובלי JS התוצאה זהה לקודם. */
#main.kg-fbar-page .faq-text,
#main.kg-fbar-page h2[id],
#main.kg-fbar-page h3[id],
#main.kg-fbar-page h4[id] { scroll-margin-top: max(136px, calc(var(--kg-fbar-h, 0px) + 12px)); }

#main.kg-fbar-page tr.expandable-row > td.expandable-content > .expandable-inner {
    position: sticky;
    /* שני הקצוות יחד: ה-td ו-הטבלה מעורבבי כיוון (הטבלה rtl, התא ltr), וכשרק אחד מהם
       מוגדר הפאנל נצמד לקצה אחד וזולג בשני. עם רוחב מוגדר + left/right — תמיד בתוך ה-scrollport. */
    left: 0;
    right: 0;
    width: var(--kg-xp-w, 100%);
    max-width: var(--kg-xp-w, 100%);
    box-sizing: border-box;
    /* הריווח הצדדי עבר מה-td אל כאן, אחרת הוא מתווסף לרוחב ה-scrollport והפאנל זולג החוצה */
    padding: 0 10px;
}

@media (max-width: 480px) {
    /* 3 עמודות ב-374px = ~112px לאריח; שתיים נושמות ומאפשרות לשורת ההפרש לא להישבר */
    #main.kg-fbar-page .kg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── CTA דביק גם בדסקטופ (הכרעת רונן, 2026-08-28) ─────────────────────────────
   בדף רשימה שאורכו ~10,000px טופס הליד שבסיידבר נגלל למעלה ומשם ואילך אין שום
   נקודת המרה. kupat-gemel.css מסתיר את הרצועה מ-992px — נכון לדף הקופה שבו הסיידבר
   קצר, שגוי כאן. מחזירים אותה בדף הרשימה בלבד, בשתי הסתרות בלתי-תלויות:
   `--hidden` (טופס הליד נראה במסך; הסקריפט שבדף) ו-`--busy` (סל ההשוואה פעיל —
   הפאנל שלו יושב באותו מקום; modernFilterBar.bindLeadCta). */
@media (min-width: 992px) {
    /* אותה גיאומטריה של הרצועה במובייל (הכלל ב-kupat-gemel.css חל רק עד 991.98px):
       .getOffer הלגאסי נותן width:200px; right:1% — בלי הביטול הזה מתקבל כפתור קטן בפינה. */
    body.kg-fbar-body #leadOffer.kg-lead-offer.kg-lead-offer--v2 {
        display: flex !important;
        border-radius: 0;
        z-index: 1040;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* בדסקטופ הרצועה היא משטח ניטרלי ושני הכפתורים הם pills. בלי זה מתקבלים שני
       "כתמי צבע": הכפתור הירוק נבלע ברקע הירוק של הרצועה והכחול מרחף באמצע (הערת רונן). */
    body.kg-fbar-body #leadOffer.kg-lead-offer.kg-lead-offer--v2,
    body.kg-fbar-body #leadOffer.kg-lead-offer.kg-lead-offer--v2:hover {
        background-color: #fff !important;
        border: 0;
        border-top: 1px solid var(--kg-line);
        box-shadow: 0 -6px 20px rgba(15, 90, 71, .10);
        min-height: 58px;
    }
    /* שני כפתורים ברוחב 1400px הם מטרה ענקית וחסרת פוקוס — מרכוז ורוחב סביר */
    body.kg-fbar-body #leadOffer.kg-lead-offer .kg-lead-offer__split {
        max-width: 620px;
        margin: 0 auto;
        gap: 10px;
        padding: 0 12px;
    }
    body.kg-fbar-body #leadOffer.kg-lead-offer .kg-lead-offer__opt {
        border-radius: 10px;
        min-height: 42px;
        font-weight: bold;
    }
    body.kg-fbar-body #leadOffer.kg-lead-offer .kg-lead-offer__opt--call {
        background-color: var(--kg-brand) !important;
        color: #fff !important;
    }
    body.kg-fbar-body #leadOffer.kg-lead-offer .kg-lead-offer__opt--email {
        background-color: #eef3fd !important;
        color: #1f52ab !important;
    }
    body.kg-fbar-body #leadOffer.kg-lead-offer .kg-lead-offer__opt--email:hover {
        background-color: #e2ebfb !important;
    }
    /* מקום לרצועה בתחתית הדף — הכלל הקיים מאפס אותו מ-992px כי שם היא מוסתרת */
    body.kg-fbar-body:has(#leadOffer.kg-lead-offer) { padding-bottom: 70px !important; }
}
body.kg-fbar-body #leadOffer.kg-lead-offer.kg-lead-offer--busy {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    body.kg-fbar-body #leadOffer.kg-lead-offer.kg-lead-offer--busy { transform: none; visibility: hidden; }
}

/* ⚠️ לקח 10 על דף הרשימה (נתפס בשלב 2, 2026-08-27): cssSupermarker קובע לטלפונים
   את .searchBox כ-position:fixed בגובה ~68px ו-z-index 99. סרגל דביק עם top:0 נדבק *מאחוריו*
   — ה-pills לא לחיצים (elementFromPoint מחזיר את כפתור ההמבורגר). חייב להיות
   באותו media query בדיוק (device-width) כדי ששני הכללים יידלקו וייכבו יחד. */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* בטלפון ה-header קבוע (68px) ו-#main מתחיל 32px מתחתיו — רצועת רקע #f4f7f6 שנקראת
       כ"בורדר צהבהב" זר מעל הכותרת (הערת רונן, 2026-08-28). הכרטיס הלבן מתחיל עכשיו
       מיד מתחת ל-header והריווח עבר פנימה. אותו media query של הכלל שקובע .searchBox
       כ-fixed, כדי ששניהם יידלקו וייכבו יחד (לקח 27).
       ⚠️ QA פנסיה 2026-08-28: הערך הישן (44px) כויל בטעות מול פיקסל-מעקב של מערך הפרסום
       שמוזרק כ-<img> בראש ה-body ויוצר line-box של ~24px — 44+24=68. בדף שבו הפיקסל לא
       הוזרק (פנסיה) הכרטיס נבלע מאחורי ה-header והכותרת נגעה בו. עכשיו: הפיקסל מוצא
       מהזרימה (position:absolute — נשאר נטען, המדידה שלו לא תלויה במיקום) וה-margin
       הוא 68px מלאים — דטרמיניסטי בכל דפי kg-fbar, עם פיקסל ובלעדיו. */
    body.kg-fbar-body > img { position: absolute; top: 0; }
    #main.kg-fbar-page { margin-top: 68px !important; padding-top: 12px; }

    /* ⚠️ QA רונן: "רווח קטן מה-header ואז ריצוד תוך כדי גלילה" — בדף הרשימה המעטפת שקופה ובלי padding,
       ולכן אין כאן רצועה — אבל התפר עצמו חשוף: מתחת למעטפת השקופה נגלל תוכן הדף.
       כל תזוזה של פיקסל בתפר בין ה-fixed ל-sticky מציגה אותו — ובמובייל השניים מתעדכנים
       במנגנונים שונים בזמן גלילה (סרגל כתובת שנסגר, קומפוזיטור), ולכן התפר "מרצד".
       התיקון: מקדימים את נקודת ההיצמדות ב-6px ומחזירים אותם כ-padding — הכרטיס נוחת
       בדיוק על 68, ו-6px של רקע אטום נשארים **מתחת ל-header** ככרית לתפר.
       ה-margin השלילי מבטל את התוספת בזרימה ⇒ אפס שינוי layout. */
    /* ⚠️ QA רונן — שתי טעויות שלי מהסבב הקודם, שתיהן מתוקנות כאן:
       (1) **חצי פיקסל.** ‎top:62px‎ אצל רונן (DPR=1.25, תצוגת Windows ב-125%) יוצא
           62×1.25 = **77.5** פיקסלי-מכשיר. אלמנט דביק שנעצר על חצי פיקסל נצמד
           מחדש לפיקסל אחר בכל פריים בזמן גלילה ⇒ רעד של פיקסל, בכל דף, בלי שום
           שינוי שנראה ב-layout. ‎60‎ נופל על שלם בכל ה-DPR הנפוצים
           (1 · 1.25 · 1.5 · 1.75 · 2 · 3), וכך גם ‎68‎ של ה-header עצמו.
       (2) **התעסקות מיותרת ב-margin.** ‎top‎ משפיע רק על מיקום ההיצמדות ולא על
           הזרימה — כדי שהכרטיס ינחת על 68 מספיק ‎top:60‎ עם ה-‎padding-top:8‎ שכבר
           היה. הקיזוזים ב-margin נמחקו והזרימה חוזרת בדיוק למה שהייתה. */
    #main.kg-fbar-page .kg-fbar-wrap { top: 60px; padding-top: 8px; margin-top: -8px; background: #fff; }
    /* ‎.stuck‎ מאפס את ה-margin בשורטהנד — להחזיר את הקיזוז */
    #main.kg-fbar-page .kg-fbar-wrap.stuck { margin-top: -8px; }
    /* אותה קפיצה לעוגן, אבל כאן מתווסף גם ה-header הקבוע */
    #main.kg-fbar-page .faq-text,
    #main.kg-fbar-page h2[id],
    #main.kg-fbar-page h3[id],
    #main.kg-fbar-page h4[id] { scroll-margin-top: max(160px, calc(var(--kg-fbar-h, 0px) + 12px)); }
}


/* ════════════════════════════════════════════════════════════════════════════
   מעטפת העיצוב המלאה של המוקאפ — שלב 1 המשך (2026-08-23, אישור רונן "לך על מלא")
   Opt-in בלבד: body.kg-fbar-body / #main.kg-fbar-page — היום רק CompareKupotGemel.
   הבלוק יושב בסוף הקובץ ולכן גובר על כללי הלגאסי (#EDF1D8/#d7d9b4, !important)
   של cssSupermarker ושל הבלוק הישן למעלה — בלי לגעת בהם ובלי להשפיע על
   שאר 7 הדפים שטוענים את cssGemelModern.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── מעטפת הדף: רקע + טיפוגרפיה (כמו במוקאפ; המאסטר-פייג' לא משתנה) ── */
body.kg-fbar-body { background-color: #f4f7f6 !important; }
#main.kg-fbar-page { font-family: 'Noto Sans Hebrew', Arial, Helvetica, sans-serif; color: var(--kg-ink); }
#main.kg-fbar-page .h1Title, #main.kg-fbar-page .h2Title { font-family: inherit; }

/* ── הטבלה ככרטיס ── */
#main.kg-fbar-page #gemelTableContainer {
    background: #fff;
    border: 1.5px solid var(--kg-line);
    border-radius: 16px;
    overflow-x: auto;
    padding: 0;
}
#main.kg-fbar-page table.gemelMainTable,
#main.kg-fbar-page .gemelMainTable {
    width: 100% !important;
    max-width: none !important;
    min-width: 650px !important; /* מתחת לזה — גלילה אופקית בתוך הכרטיס (מובייל) */
    background: #fff !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}

/* כותרות: רקע רך, יישור לימין, 12.5px — כמו במוקאפ */
#main.kg-fbar-page #gemelTable > thead > tr > th,
#main.kg-fbar-page #gemelTable > thead > tr > th.gemelHeaderTD {
    background-color: #f1f5f3 !important;
    color: var(--kg-ink) !important;
    font-size: 12.5px !important;
    font-weight: bold !important;
    text-align: right !important;
    vertical-align: middle !important;
    height: auto !important;
    padding: 10px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kg-line) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}
#main.kg-fbar-page .gemelHeaderTD a { color: var(--kg-ink) !important; }
#main.kg-fbar-page th.sort-asc, #main.kg-fbar-page th.sort-desc { color: var(--kg-brand-dark) !important; }

/* שורות: לבן נקי, בלי זברה זיתית; hover עדין */
/* ⚠️ ילדים ישירים בלבד (`>`): טבלת הדירוג שבפאנל הנפתח מקוננת בתוך td של הטבלה הראשית,
   וסלקטור צאצאים היה דורס לה את ההדגשות (שורת הקופה הנוכחית + כותרת המיון). QA רונן 2026-08-24 */
#main.kg-fbar-page #gemelTable > tbody > tr,
#main.kg-fbar-page #gemelTable > tbody > tr:nth-of-type(even) {
    background-color: #fff !important;
}
#main.kg-fbar-page #gemelTable > tbody > tr:hover {
    background-color: #fbfdfc !important;
}

/* תאים: צבע דיו, קו הפרדה עדין */
#main.kg-fbar-page #gemelTable > tbody > tr > td,
#main.kg-fbar-page #gemelTable > tbody > tr > td.gemelCell,
#main.kg-fbar-page #gemelTable > tbody > tr > td.gemelCell1,
#main.kg-fbar-page #gemelTable > tbody > tr > td.gemelCell2,
#main.kg-fbar-page #gemelTable > tbody > tr > td.gemelCell3 {
    background-color: transparent !important;
    color: var(--kg-ink) !important;
    font-size: 13.5px !important;
    height: auto !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f0 !important;
    text-align: right !important;
}
#main.kg-fbar-page #gemelTable > tbody > tr > td .fund-name-wrapper a.gemelClick {
    color: var(--kg-brand-dark) !important;
    font-weight: bold;
}

/* ⚠️ מובייל: מחזירים את הריפוד הצר של הטבלה המקורית (QA רונן 2026-08-30).
   הכלל שמעליו נותן לכל התאים padding של 9px/10px — נכון לדסקטופ, והורס בטלפון.
   עמודת השם רחבה 116px קבועים, ולכן 10px ריפוד מכל צד גוזלים ששית מרוחב
   הטקסט: 97px במקום 113px. נמדד ב-375px על אותו שם — גובה התא קפץ
   מ-73px ל-140px, והשם הארוך בדף (67 תווים) נשבר לשמונה שורות במקום חמש.
   הערכים כאן זהים לכלל המקורי (thead/tbody td:nth-child(2) למעלה בקובץ),
   שעדיין מה שמוגש בייצור. הדסקטופ לא מושפע. */
@media (max-width: 767.98px) {
    #main.kg-fbar-page #gemelTable > tbody > tr > td,
    #main.kg-fbar-page #gemelTable > tbody > tr > td.gemelCell,
    #main.kg-fbar-page #gemelTable > tbody > tr > td.gemelCell1,
    #main.kg-fbar-page #gemelTable > tbody > tr > td.gemelCell2,
    #main.kg-fbar-page #gemelTable > tbody > tr > td.gemelCell3 {
        padding: 4px 2px !important;
        font-size: 14px !important;
    }
    #main.kg-fbar-page #gemelTable > thead > tr > th {
        padding: 4px 2px !important;
    }
}
/* תשואות: הסמנטיקה של המערכת (הסלקטור כולל table+td כדי לגבור על כלל התאים הכללי שמעליו) */
#main.kg-fbar-page #gemelTable > tbody > tr > td.gemelCellGreen { color: var(--kg-pos) !important; font-weight: bold; }
#main.kg-fbar-page #gemelTable > tbody > tr > td.gemelCellRed { color: var(--kg-neg) !important; font-weight: bold; }

/* כפתור "השווה": pill מתאר; מסומן → מלא מותג */
#main.kg-fbar-page .compare1 {
    border: 1.5px solid var(--kg-line) !important;
    background: #fff !important;
    color: var(--kg-ink) !important;
    border-radius: 999px !important;
    padding: 3px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
#main.kg-fbar-page .compare1:hover { border-color: var(--kg-brand) !important; color: var(--kg-brand-dark) !important; }
#main.kg-fbar-page .btn-check:checked + .compare1 {
    background: var(--kg-brand) !important;
    border-color: var(--kg-brand) !important;
    color: #fff !important;
}

/* הפאנל הנפתח: רקע רך + קו מותג תחתון (הכרטיס הלבן kg-xp כבר בפנים) */
#main.kg-fbar-page .expandable-content {
    background: var(--kg-soft) !important;
    border-bottom: 2px solid var(--kg-brand) !important;
    padding: 12px 10px 16px !important;
}
/* ⚠️ התא של הפאנל חייב סלקטור בעוצמת הכלל של תאי הטבלה (2 ids + !important, למעלה),
   אחרת הוא מקבל padding אופקי של 10px — וה-10px האלה הם בדיוק הסטייה שהפאנל הדביק
   "נודד" בה בזמן גלילה אופקית (הם מצמצמים את מלבן ההצמדה של ה-sticky בשני הקצוות).
   הריווח האופקי יושב במקום זאת על .expandable-inner, שם הוא חלק מרוחב ה-scrollport. */
#main.kg-fbar-page #gemelTable > tbody > tr.expandable-row > td.expandable-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* עמודי SSR (זחלנים / בלי JS): pills קטנים וניטרליים מתחת ל"הצג עוד" */
#main.kg-fbar-page .catPagesDiv { margin-top: 4px; }
#main.kg-fbar-page .catPagesDiv .pagination { gap: 6px; }
#main.kg-fbar-page .catPagesDiv .pagination a,
#main.kg-fbar-page .catPagesDiv .pagination .page-link {
    border: 1px solid var(--kg-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--kg-ink) !important;
    font-size: 12.5px !important;
    min-width: 28px;
    text-align: center;
    box-shadow: none !important;
}
#main.kg-fbar-page .catPagesDiv .pagination .active .page-link,
#main.kg-fbar-page .catPagesDiv .pagination a.active {
    background: var(--kg-soft) !important;
    border-color: var(--kg-brand) !important;
    color: var(--kg-brand-dark) !important;
    font-weight: bold;
}

/* פאנל ההשוואה הצף: עטיפה בשפת הכרטיסים (הפנימיים נשארים) */
#main.kg-fbar-page .comparePanelBox {
    background: #fff !important;
    border: 1.5px solid var(--kg-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(15, 90, 71, .06) !important;
}

/* ה-disclaimer, הבאנר וה-FAQ יורשים את הטיפוגרפיה מ-#main — בלי שינוי מבני */


/* ════════════════════════════════════════════════════════════════════════════
   סבב QA של רונן (2026-08-23) — 5 הערות. הכל scoped ל-#main.kg-fbar-page (דף הגמל בלבד).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── (1) הסיידבר בשפת הכרטיסים של המוקאפ ── */
/* בלוקי תוכן ככרטיסים לבנים */
#main.kg-fbar-page .topLeft .articlesBox,
#main.kg-fbar-page .topLeft #checkList {
    background: #fff;
    border: 1.5px solid var(--kg-line);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
/* כותרת כרטיס אחידה (דורס inline line-height:44px על ה-span) */
#main.kg-fbar-page .topLeft .h3Heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px !important;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--kg-line);
    color: var(--kg-ink);
    font-size: 15px !important;
    font-weight: bold;
    line-height: 1.3;
}
#main.kg-fbar-page .topLeft .h3Heading span { line-height: 1.3 !important; }
#main.kg-fbar-page .topLeft .h3Heading .calc-heading-icon { display: none; }
/* המפרידים הליים (5px ירוק-ליים) מיותרים כשיש כרטיסים */
#main.kg-fbar-page .topLeft .border-box { display: none !important; }
/* המפריד שמתחת ל-header (SupermarkerMasterPage → #ymheader). הבאנדל הגלובלי נותן לו
   5px #BCCC00 — ליים, שריד המיתוג הישן של TheMarker, שצורם ליד הרכיבים החדשים.

   ⚠️ סבב QA של רונן (2026-08-30): קודם הוא הוסתר כאן לגמרי (display:none), והתוצאה
   היתה שלושה מראים שונים באתר: דפי הרשימה בלי קו כלל, דף המוצר וההשוואה
   המפורטת עם הליים 5px, וניהול תיקים עם קו דק 1px. רונן ביקש את של ניהול
   התיקים בכל הדפים ששודרגו. אותם ערכים בדיוק כמו ב-portfolio-modern.css.
   המאסטר-פייג' לא משתנה — הקישור ל-body כי המפריד יושב מחוץ ל-#main. */
body.kg-fbar-body #ymheader .border-box,
body.kg-fund-body #ymheader .border-box,
body.kg-cmp-body  #ymheader .border-box {
    display: block !important;
    border-top: 1px solid #d9e6e1 !important;
    padding-top: 0 !important;
}
/* קישורי "לפי מסלול / לפי סוג / לפי חברה / למד על" — רשימה נקייה בלי sprite החץ */
#main.kg-fbar-page .topLeft .calcTD td { padding: 0 !important; background: none !important; }
#main.kg-fbar-page .topLeft .calcTD a {
    display: flex;
    align-items: center;
    min-height: 38px;
    text-decoration: none;
    border-bottom: 1px solid #eef2f0;
    border-radius: 8px;
    padding: 4px 4px;
}
#main.kg-fbar-page .topLeft .calcTD:last-child a { border-bottom: 0; }
#main.kg-fbar-page .topLeft .calcTD a:hover { background: #f6f9f8; }
#main.kg-fbar-page .topLeft .calcLinks {
    background: none !important;   /* מבטל את arrowLeft.png */
    padding: 0 !important;
    color: var(--kg-brand-dark) !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    height: auto !important;
    display: block !important;
}
/* טיפים: טיפוגרפיה אחידה במקום arial 14 inline */
#main.kg-fbar-page .topLeft #checkList ul {
    font: 400 13.5px 'Noto Sans Hebrew', Arial, sans-serif !important;
    color: var(--kg-ink);
    margin: 0;
    padding-inline-start: 18px;
    display: grid;
    gap: 6px;
}
/* טופס הליד: עטיפה רכה במקום רקע הזית #EDF1D8 (הפנים — V2 — לא משתנה) */
#main.kg-fbar-page .topLeft #lead.lead {
    background: linear-gradient(180deg, #f3faf7, #fff) !important;
    border: 1.5px solid #bfe0d2 !important;
    border-radius: 14px !important;
    padding: 14px 16px;
    margin-bottom: 14px;
}
/* כותרת הליד: cssSupermarker נותן ל-.leadH3Title פס ירוק מלא ול-.lead רוחב קבוע 470px —
   על הכרטיס החדש זה יצר ירוק-על-ירוק וגלישה מהסיידבר (QA רונן 2026-08-23) */
#main.kg-fbar-page .topLeft #lead.lead {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
}
#main.kg-fbar-page .topLeft #lead .leadH3Title,
#main.kg-fbar-page .topLeft #lead .h3Title {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--kg-brand-dark) !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    padding: 0 0 4px !important;
    margin: 0 0 2px !important;
    text-align: center;
}
#main.kg-fbar-page .topLeft #lead .leadSubTitle {
    color: var(--kg-muted) !important;
    font-size: 13.5px !important;
    text-align: center;
    margin: 0 0 8px !important;
}

/* ── (4) מחשבונים — דפוס pm-calcs של השוואת ניהול תיקים (scoped; לא נוגע בעמוד התיקים) ── */
#main.kg-fbar-page #calcs.pm-calcs {
    background: #fff;
    border: 1.5px solid var(--kg-line);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
#main.kg-fbar-page #calcs.pm-calcs .pm-calcs__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--kg-line);
    color: var(--kg-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}
#main.kg-fbar-page #calcs.pm-calcs .pm-calcs__title i { color: var(--kg-brand); font-size: 1.15rem; }
#main.kg-fbar-page #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: var(--kg-ink);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.12s ease;
}
#main.kg-fbar-page #calcs.pm-calcs a.pm-calcs__item:last-child { border-bottom: 0; }
#main.kg-fbar-page #calcs.pm-calcs .pm-calcs__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f6f9f8;
    color: var(--kg-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
#main.kg-fbar-page #calcs.pm-calcs .pm-calcs__label { flex: 1 1 auto; }
#main.kg-fbar-page #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;
}
#main.kg-fbar-page #calcs.pm-calcs a.pm-calcs__item:hover,
#main.kg-fbar-page #calcs.pm-calcs a.pm-calcs__item:focus-visible { background: #f6f9f8; color: var(--kg-brand-dark); }
#main.kg-fbar-page #calcs.pm-calcs a.pm-calcs__item:hover .pm-calcs__chevron { color: var(--kg-brand); transform: translateX(-3px); }
#main.kg-fbar-page #calcs.pm-calcs a.pm-calcs__item:hover .pm-calcs__icon { background: #e8f3ef; }

/* ── (2) עימוד: ביטול שכבת bulletListHorizontal הישנה — נשארת רק שכבת ה-pills ── */
#main.kg-fbar-page .catPagesDiv .pagination {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}
#main.kg-fbar-page .catPagesDiv .pagination li,
#main.kg-fbar-page .catPagesDiv .pagination .page-item {
    display: inline-flex !important;
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
}
#main.kg-fbar-page .catPagesDiv .pagination .page-item.active {
    /* העמוד הנוכחי — טקסט בלי קישור: אותו pill, מודגש */
    border: 1px solid var(--kg-brand) !important;
    border-radius: 8px !important;
    background: var(--kg-soft) !important;
    color: var(--kg-brand-dark) !important;
    font-weight: bold;
    font-size: 12.5px;
    min-width: 28px;
    min-height: 26px;
    align-items: center;
    justify-content: center;
}
#main.kg-fbar-page .catPagesDiv .pagination a,
#main.kg-fbar-page .catPagesDiv .pagination .page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 6px !important;
}

/* ── (3) הדיסקליימר — כרטיס עדין כמו בביטוח חיים (טקסט רגולטורי, לא CTA) ── */
#main.kg-fbar-page .SMdisclaimer {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    background: #f8f9fa !important;
    border: 1px solid var(--kg-line) !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    margin: 1rem 0 !important;
}
#main.kg-fbar-page .SMdisclaimer p {
    margin: 0;
    font-size: 0.85rem !important;
    line-height: 1.6;
    color: var(--kg-muted) !important;
    font-family: inherit;
}

/* ── (5) פאנל ההשוואה: רצועה דביקה בתחתית (comparison tray) במקום להתחרות בסרגל למעלה.
       ה-JS המשותף (modernGemelCompare) מציב top:0 inline — !important כאן גובר עליו,
       כך שאין שינוי JS ואפס השפעה על השתלמות/מנהלים/פנסיה. ── */
#main.kg-fbar-page .comparePanel.stick {
    top: auto !important;
    bottom: 12px !important;
    z-index: 42 !important; /* מעל הסרגל (40), מתחת ל-backdrop/sheet של הסינון (45/60) */
}
#main.kg-fbar-page .comparePanel.stick .comparePanelBox {
    box-shadow: 0 10px 30px rgba(15, 90, 71, .18) !important;
}
/* ⚠️ אין כאן היסט ל-CTA הדביק: הוא מוסתר (`--busy`) בדיוק כשהמגש מוצג — שניהם
   מופעלים מאותו תנאי (יש מוצר בסל), ולכן היסט של 64px היה משאיר רווח ריק מתחת למגש
   (הערת רונן, 2026-08-28). הערך זהה עכשיו בכל הרוחבים. */


/* ── QA רונן 2026-08-24: הדגשות בטבלת הדירוג שבפאנל, בשפת המערכת ──
   ההדגשות הישנות (כחול bootstrap #cfe2ff / תכלת #d1ecf1) חיות מעל בכללי ה-.expandable-inner.
   כאן מחליפים אותן לירוק המערכת ומחזקים ברמת ה-td, כי תא צובע מעל השורה. */
#main.kg-fbar-page .expandable-inner .fund-ranking-table tbody tr.table-primary > td {
    background-color: #cdeadb !important;
    font-weight: bold;
}
#main.kg-fbar-page .expandable-inner .fund-ranking-table tbody tr.table-primary:hover > td {
    background-color: #c2e4d2 !important;
}
/* כותרת המיון הפעיל — רקע רך + טקסט מותג + חץ, כך שהמיון הנוכחי נקרא במבט */
#main.kg-fbar-page .expandable-inner .fund-ranking-table thead th.sortable-header.sort-active {
    background-color: var(--kg-soft2) !important;
    color: var(--kg-brand-dark) !important;
    font-weight: bold;
}
#main.kg-fbar-page .expandable-inner .fund-ranking-table thead th.sortable-header.sort-active:hover {
    background-color: #d7ece2 !important;
}
/* שורת הקופה הנוכחית — פס זיהוי בצד ההתחלה (RTL: ימין) */
#main.kg-fbar-page .expandable-inner .fund-ranking-table tbody tr.table-primary > td:first-child {
    box-shadow: inset -3px 0 0 var(--kg-brand);
}

/* ── מסלול משני צמוד למסלול הנבחר (הוכרע מול מוקאפ 2026-08-27) ──
   הסקשן נפתח מיד אחרי הקבוצה של המסלול שנלחץ (לא בתחתית הפאנל, שם לא ראו אותו),
   עם מסגרת מודגשת, מחבר ↳ והבהוב כניסה חד-פעמי. */
.kg-sub { margin: 10px 0 14px; border: 1.5px solid #bfe0d2; }
.kg-sub__conn { color: var(--kg-brand); font-weight: bold; margin-left: 4px; }
.kg-sub--in { animation: kgSubIn .45s ease-out; }
@keyframes kgSubIn {
    0% { background: #d7ece2; transform: translateY(-4px); opacity: .4; }
    100% { background: #f7faf8; transform: none; opacity: 1; }
}
.kg-sub__loading { margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) {
    .kg-sub--in { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   פאנל פרטי קרן הפנסיה ברשימה — אופציה ג' (pension-expand-mockup.html, אישור
   רונן 2026-08-28). scoped לדפי הרשימה (kg-fbar-page) בתוך הפאנל הנפתח בלבד;
   kg-tag / kg-logo / kg-kpis / kg-kpi / kg-seg מגיעים ממערכת העיצוב שב-
   kupat-gemel.css. ערכי מספרים ב-ltr; יתרת נכסים ב-rtl מפורש (מיקום ה-₪).
   ════════════════════════════════════════════════════════════════════════════ */
#main.kg-fbar-page .expandable-inner .kg-pxp-h { display: flex; align-items: flex-start; gap: 12px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-h h5 { margin: 0 0 6px; font-size: 16px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-h h5 small { color: var(--kg-muted); font-weight: normal; }
#main.kg-fbar-page .expandable-inner .kg-pxp-h__meta { display: flex; gap: 6px; flex-wrap: wrap; }
#main.kg-fbar-page .expandable-inner .kg-pxp-h__lnk { margin-inline-start: auto; color: var(--kg-brand-dark); font-weight: bold; text-decoration: none; font-size: 13px; white-space: nowrap; }
#main.kg-fbar-page .expandable-inner .kg-pxp-h__lnk:hover { text-decoration: underline; color: var(--kg-brand-dark); }

#main.kg-fbar-page .expandable-inner .kg-pxp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

#main.kg-fbar-page .expandable-inner .kg-pxp-strips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
#main.kg-fbar-page .expandable-inner .kg-pxp-strip,
#main.kg-fbar-page .expandable-inner .kg-pxp-act { border: 1px solid #e3ede8; border-radius: 12px; padding: 12px 14px; background: #fbfdfc; }
#main.kg-fbar-page .expandable-inner .kg-pxp-strip > h6,
#main.kg-fbar-page .expandable-inner .kg-pxp-act > h6 { margin: 0 0 10px; font-size: 13px; color: var(--kg-brand-dark); display: flex; align-items: center; gap: 6px; border: 0; padding: 0; }
#main.kg-fbar-page .expandable-inner .kg-pxp-act > h6 { margin-bottom: 4px; }

#main.kg-fbar-page .expandable-inner .kg-pxp-fee { display: flex; align-items: stretch; gap: 0; text-align: center; }
#main.kg-fbar-page .expandable-inner .kg-pxp-fee > div { flex: 1; padding: 2px 4px; min-width: 0; }
#main.kg-fbar-page .expandable-inner .kg-pxp-fee small { display: block; color: var(--kg-muted); font-size: 11.5px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-fee b { font-size: 17px; direction: ltr; unicode-bidi: isolate; display: inline-block; }
#main.kg-fbar-page .expandable-inner .kg-pxp-fee__op { align-self: center; flex: 0 0 auto; color: var(--kg-muted); font-size: 15px; padding: 0 2px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-fee__tot { border-inline-start: 2px solid var(--kg-line); }
#main.kg-fbar-page .expandable-inner .kg-pxp-fee__tot b { color: var(--kg-brand-dark); }
#main.kg-fbar-page .expandable-inner .kg-pxp-note { font-size: 11.5px; color: var(--kg-muted); margin: 8px 0 0; }

/* מתג בסיס דמי הניהול במחשבון הצבירה — מוצג רק בפוליסות מדור 1991-2003.
   ⚠️ ממוקם בתוך המחשבון ולא מעליו, כי הוא משנה שדה שבתוכו. */
.kg-sim-feemode {
    padding: 10px 12px; border: 1px solid var(--kg-line); border-radius: 8px;
    background: rgba(232, 87, 29, 0.045);
}
.kg-sim-feemode__head { font-size: 13.5px; margin-bottom: 7px; }
.kg-sim-feemode__note { font-size: 11.5px; color: var(--kg-muted); margin-top: 7px; }
@media (max-width: 575.98px) {
    /* ⚠️ מתחת ל-576px שני הכפתורים לא נכנסים בשורה — btn-group מקבל עמודה,
       אחרת הטקסט נחתך והמספר (שהוא כל העניין) נעלם. */
    .kg-sim-feemode .btn-group { display: flex; width: 100%; }
    .kg-sim-feemode .btn-group .btn { flex: 1 1 0; font-size: 12.5px; padding-inline: 6px; }
}

/* העלות האפקטיבית — דמי ניהול משתנים בפוליסות משתתפות ברווחים (דור 1991-2003).
   רצועה משנית מתחת לעלות המוצהרת: מופרדת בקו עליון כדי שיהיה ברור שזה **מספר
   אחר** ולא המשך של החיבור שמעליה, ובגוון אזהרה כי הוא תמיד גבוה מהמוצהר. */
#main.kg-fbar-page .expandable-inner .kg-pxp-fee--effective {
    margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--kg-line);
}
#main.kg-fbar-page .expandable-inner .kg-pxp-fee--effective b { color: #a33; }
#main.kg-fbar-page .expandable-inner .kg-pxp-fee--effective > div + div {
    border-inline-start: 1px solid var(--kg-line);
}

#main.kg-fbar-page .expandable-inner .kg-pxp-meter { margin: 7px 0; }
#main.kg-fbar-page .expandable-inner .kg-pxp-meter__lbl { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-meter__lbl b { direction: ltr; unicode-bidi: isolate; }
#main.kg-fbar-page .expandable-inner .kg-pxp-meter__bar { height: 8px; border-radius: 99px; background: #e8efec; overflow: hidden; }
#main.kg-fbar-page .expandable-inner .kg-pxp-meter__bar i { display: block; height: 100%; border-radius: 99px; background: var(--kg-brand); }

#main.kg-fbar-page .expandable-inner .kg-pxp-act { margin: 0 0 12px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-act__cap { margin: 0 0 10px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-act__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-act__stats > div { background: #fff; border: 1px solid #e3ede8; border-radius: 10px; padding: 8px 10px; text-align: center; min-width: 0; }
#main.kg-fbar-page .expandable-inner .kg-pxp-act__stats small { display: block; color: var(--kg-muted); font-size: 11px; white-space: nowrap; }
#main.kg-fbar-page .expandable-inner .kg-pxp-act__stats b { font-size: 15.5px; direction: ltr; unicode-bidi: isolate; display: inline-block; }
#main.kg-fbar-page .expandable-inner .kg-pxp-act__stats b.kg-pxp-act__vs { direction: rtl; font-size: 13.5px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-act__stats > div > span { display: block; font-size: 11px; color: var(--kg-muted); margin-top: 1px; direction: ltr; unicode-bidi: isolate; }

#main.kg-fbar-page .expandable-inner .kg-pxp-seg { margin-inline-start: auto; }
#main.kg-fbar-page .expandable-inner .kg-pxp .fund-ranking-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#main.kg-fbar-page .expandable-inner .kg-pxp .fund-ranking-header .fund-specialization-info { flex-basis: 100%; }
#main.kg-fbar-page .expandable-inner .kg-pxp-hidden { display: none !important; }

/* ── תוספות שלב 4ד: הפאנל של המנהלים/חיסכון (menahalim-expand-mockup.html,
   savings-expand-mockup.html — אישור רונן 2026-08-28). ממשיך את אותו בלוק
   ואת אותו scoping; הפנסיה לא מושפעת כי היא לא מוסיפה את המחלקות האלה. ── */
#main.kg-fbar-page .expandable-inner .kg-pxp-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#main.kg-fbar-page .expandable-inner .kg-pxp-strips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* מקור חלקי לממוצע ("מ-2") — כשלא כל העמיתות מדווחות את השדה */
#main.kg-fbar-page .expandable-inner .kg-pxp-src { font-weight: normal; opacity: .75; }
/* רצועת "תנאי הפוליסה" (ביטוחי מנהלים) */
#main.kg-fbar-page .expandable-inner .kg-pxp-terms { display: grid; gap: 6px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-terms > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; border-bottom: 1px dashed #e6eeea; padding-bottom: 5px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-terms > div:last-child { border-bottom: 0; padding-bottom: 0; }
#main.kg-fbar-page .expandable-inner .kg-pxp-terms > div > span:first-child { color: var(--kg-muted); }
#main.kg-fbar-page .expandable-inner .kg-pxp-terms > div > span:last-child { font-weight: bold; text-align: left; }
#main.kg-fbar-page .expandable-inner .kg-pxp-badge { display: block; background: #eef2fb; color: #2b4a8f; border-radius: 8px; padding: 6px 10px; font-size: 11.5px; margin: 8px 0 0; line-height: 1.45; }
/* רצועת "נזילות ומיסוי" (פוליסות חיסכון) */
#main.kg-fbar-page .expandable-inner .kg-pxp-liq { display: grid; gap: 8px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-liq > div { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
#main.kg-fbar-page .expandable-inner .kg-pxp-liq > div > i { color: var(--kg-brand); margin-top: 2px; flex: 0 0 auto; }
#main.kg-fbar-page .expandable-inner .kg-pxp-liq b { display: block; }
#main.kg-fbar-page .expandable-inner .kg-pxp-liq span { color: var(--kg-muted); font-size: 11.5px; }
/* מצב "לבד בקטגוריה" — 13 מתוך 32 ביטוחי המנהלים הם היחידים במסלולם */
#main.kg-fbar-page .expandable-inner .kg-pxp-alone { background: #fff6e5; border: 1px solid #f0e0b8; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: #6b5500; margin: 10px 0 0; }
#main.kg-fbar-page .expandable-inner .kg-pxp-alone a { color: #8a6a00; font-weight: bold; }
/* תג תקופת הקמה */
#main.kg-fbar-page .expandable-inner .kg-tag--era { background: #eef2fb; color: #2b4a8f; }
#main.kg-fbar-page .expandable-inner .kg-act-col,
#main.kg-fbar-page .expandable-inner .kg-act-cell { white-space: nowrap; }

@media (max-width: 767.98px) {
    #main.kg-fbar-page .expandable-inner .kg-pxp-kpis { grid-template-columns: repeat(2, 1fr); }
    #main.kg-fbar-page .expandable-inner .kg-pxp-strips { grid-template-columns: 1fr; }
    #main.kg-fbar-page .expandable-inner .kg-pxp-strips--3 { grid-template-columns: 1fr; }
    #main.kg-fbar-page .expandable-inner .kg-pxp-kpis--5 { grid-template-columns: repeat(2, 1fr); }
    #main.kg-fbar-page .expandable-inner .kg-pxp-act__stats { grid-template-columns: repeat(2, 1fr); }
    #main.kg-fbar-page .expandable-inner .kg-pxp-h { flex-wrap: wrap; }
    #main.kg-fbar-page .expandable-inner .kg-pxp-h__lnk { flex-basis: 100%; margin-inline-start: 52px; }
}