/* ============================================================================
   השוואת ביטוח נסיעות לחו"ל V2 — CSS ייעודי לדף (סשן B)
   ----------------------------------------------------------------------------
   scoped לדף בלבד (קלאסים ti-*). לא נוגע בבאנדלים הגלובליים.
   גוצ'ות שנדרסות כאן:
   - compareTables.css כופה על #main.centerDesign רוחב קבוע 980px  → ti-page-wide
   - compareTables.css כופה על .SMdisclaimer רוחב 95.5% וקופסה ליים → נדרס
   - gutter 16px בכל הרוחבים (לא רק ב-media query של דסקטופ!)
   ============================================================================ */

/* ShareBar — מרווח בלבד. ⚠️ העיצוב עצמו בבעלות Content/share-bar.css:
   אסור לגעת ב-.sm-share-btn (בפרט min-width/min-height — 44×44 במובייל
   נשבר כך במאמר ה-S&P ותוקן ב-7a16e45a). */
#main.ti-page-wide .sm-share-bar.ti-share-top { margin: .25rem 0 .9rem; }

:root {
    --ti-brand: #17765a;
    --ti-brand-dark: #0f5440;
    --ti-brand-light: #eef4f1;
    /* צבעי התגים: כחול לרמת שירות (גוון "רגולטור", מובחן מהירוק המותגי),
       ענבר למשולב (ממשיך את שורת העובדה הענברית). */
    --ti-svc-blue: #1d4f91;
    --ti-svc-blue-light: #e8eef8;
    /* ⚠️ הענבר הוכהה מ-#b07d1a: טקסט לבן עליו נמדד 3.62:1 — מתחת לסף AA
       (4.5:1). התג הוא 12px/700, שאינו "טקסט גדול" לפי WCAG, ולכן הסף המלא
       חל עליו. #8a6210 נותן 5.48:1 ונשאר ענבר מובהק מול הירוק והכחול. */
    --ti-value: #8a6210;
    /* גוון כהה יותר לטקסט ענבר על רקע לבן (שורת העובדה, אחרי שהרקע ירד
       בליטוש הצבעים): 7.71:1. */
    --ti-value-text: #6b4e12;
    --ti-ink: #1f2d2a;
    --ti-muted: #5f6f6b;
    --ti-line: #d9e6e1;
    --ti-gold: #b7791f;
    /* ⭐ פאלטת ההרחבות (מוקאפ ב׳, סבב 2 — 4/9/26). רונן: "זהב לא משתלב
       בפאלטה", והביא #d8eded (תכלת אפרפר). שם ההרחבה בכחול-טורקיז כהה —
       גוון שיושב בין הירוק של המותג לתכלת של "כלול", ולא מתחרה בהם. */
    --ti-ext-name: #1f4b5e;
    --ti-inc-bg: #d8eded;
    --ti-inc-line: #9ccaca;
    --ti-inc-bar: #6fa8a8;
    /* ⚠️ `--ti-gold` כבר היה מוגדר כאן (צבע הטקסט של צ'יפ ה-perk), ואני
       הגדרתי אותו שוב מעליו ב-2026-08-16 — ההגדרה המאוחרת ניצחה בשקט
       והמסגרות יצאו בגוון אחר מזה שכתבתי. משתמשים בקיים; רק השניים
       הבאים, לפקדי הבחירה בבלוק המצב הרפואי, הם חדשים. */
    --ti-gold-soft: #fdfaf3;
    /* ⚠️⚠️ הזהב הרך למסגרת החיצונית. הגרסה הראשונה (#c9a961) הייתה
       **2.12:1** מול רקע הבלוק — מתחת ל-3:1 שנדרש בגבול של פקד
       (WCAG 1.4.11). הוכהה ל-#b5882c, שהוא הגוון הרך **ביותר** שעדיין
       עומד בסף: 3.03:1. מדוד, לא משוער.
       ⚠️ כל הכהיה נוספת מרחיקה מהאופי הרך שנבחר, וכל הבהרה יורדת מתחת
       לסף — זה בדיוק הגבול, ולכן אין כאן מרווח לשחק בו. */
    --ti-gold-line: #b5882c;
    --ti-danger: #b23b3b;
    /* ⚠️⚠️ אדום חזק להודעות "אין הצעה" (הכרעת רונן 3/9/26: "צריכות להראות
       ברור יותר, בצבע אדום חזק יותר ובפונט מודגש"). #a4161a על לבן הוא
       **7.76:1** — גבוה יותר מ---ti-danger הרגיל (5.86:1) וגם רווי יותר,
       ולכן הוא בולט בלי לרדת בנגישות. מדוד, לא משוער.
       ⚠️ שמור ל**חסימות בפועל** בלבד. אם כל הערה תיצבע בו, שום דבר לא
       יבלוט — וזו בדיוק הבעיה שהוא בא לפתור. */
    --ti-danger-strong: #a4161a;
    /* ⚠️ ירוק חי לאייקונים בלבד — אותה משפחה כמו --ti-brand, רק רווי
       יותר. 3.6:1 על לבן; האייקון aria-hidden ולכן אינו חייב יחס
       טקסט, אבל נשמר קריא. */
    --ti-brand-live: #159c6e;
    --ti-radius: 14px;
}

/* ---------- רוחב הדף (דפוס mi-page-wide / gemel-compare-wide) ---------- */
body.ti-wide-body {
    width: 100% !important;
    max-width: none !important;
}

/* 1400px = הסטנדרט של דפי ההשוואה המשודרגים (mi-page-wide, gemel-compare-wide,
   ראו docs/compare-pages-wide-layout.md). 1180px השאיר רצועות ריקות בדסקטופ
   והדף נראה צר משכניו. הרכיבים הפנימיים ב-100% וגדלים איתו. */
#main.ti-page-wide {
    width: 100% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* gutter בסיס לכל הרוחבים — מובייל כלול */
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    #main.ti-page-wide {
        padding-left: 20px;
        padding-right: 20px;
    }
}

#main.ti-page-wide {
    color: var(--ti-ink);
}

/* אין גלילה אופקית של הדף */
#main.ti-page-wide img,
#main.ti-page-wide table {
    max-width: 100%;
}

/* ---------- ראש הדף: breadcrumbs + שיתוף ----------
   מיושר לדפוס של דפי ההשוואה האחרים (#sitemap ב-Gemel/css/gemel-modern.css):
   רקע שקוף, קישורים בירוק המותגי, מפריד "›", והפריט הפעיל בטקסט כהה.
   ⚠️ הדף הזה משתמש ב-id="breadcrumb" ולא ב-id="sitemap", ולכן הכללים של
   gemel-modern.css לא חלו עליו כלל — הוא קיבל את ברירת המחדל האפורה של
   Bootstrap. הכללים משוכפלים כאן ולא ב-gemel-modern.css כי הקובץ ההוא
   נטען רק בדפי גמל/מנהלים ואינו חלק מהבאנדלים של הדף הזה. */
#breadcrumb .breadcrumb {
    background: transparent;
    padding: 0.5rem 0;
    margin-bottom: 0;
}

#breadcrumb .breadcrumb-item {
    padding-inline: 0.35rem;
}

/* ברירת המחדל של Bootstrap שמה מפריד ב-::before של הפריט השני והלאה;
   ב-RTL זה נוחת בצד הלא נכון. מפריד ב-::after אחרי כל פריט מלבד האחרון. */
#breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: none;
}

#breadcrumb .breadcrumb-item:not(:last-child)::after {
    padding-inline: 0.5rem;
    color: var(--ti-brand);
    content: "\203A";
}

#breadcrumb .breadcrumb-item a {
    color: var(--ti-brand);
    text-decoration: none;
}

#breadcrumb .breadcrumb-item a:hover,
#breadcrumb .breadcrumb-item a:focus {
    color: var(--ti-brand-dark);
    text-decoration: underline;
}

#breadcrumb .breadcrumb-item.active {
    color: var(--ti-ink);
}

/* רצועת השיתוף. הבסיס (Content/share-bar.css) כבר גלובלי מהמאסטר ומטפל
   במובייל: מתחת ל-576px הטקסט נעלם והכפתורים הופכים ל-44x44 אייקונים.
   כאן רק ריווח מול הכותרת ומול ה-breadcrumb. */
.sm-share-bar.ti-share-top {
    margin: 4px 0 6px;
}

@media (max-width: 767.98px) {
    /* יישור לשוליים הפנימיים של הדף — בלי זה הכפתורים נצמדים לקצה ה-gutter
       ונראים מוזחים מול הכותרת. אותו תיקון כמו .gemel-share-top. */
    .sm-share-bar.ti-share-top {
        padding-inline-start: 1.5%;
    }
}

.ti-lede {
    color: var(--ti-muted);
    font-size: 1rem;
    margin: 0 0 16px;
}

.ti-h2 {
    font-size: 1.25rem;
    margin: 22px 0 12px;
}

/* ---------- כרטיס כללי ---------- */
.ti-card {
    background: #fff;
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    padding: 18px;
    margin-bottom: 18px;
}

/* ---------- פס הצעדים ----------
   ⚠️ הפס היה <ol> שקוף עם margin-bottom בלבד, כלומר הוא נקרא כשורה נוספת
   בתוך אותו בלוק שבו יושבים השדות — ולכן "הצעדים" ו"תוכן הצעד" נראו כרצף
   אחד בלי היררכיה. עכשיו הוא רצועת-כותרת של הכרטיס: נשפך לרוחב המלא של
   הכרטיס דרך margin שלילי שמנטרל את ה-padding של .ti-card, נושא רקע מותגי
   בהיר וקו הפרדה תחתון.
   ⚠️ המספרים כאן קשורים ל-padding של .ti-card (18px) ולרדיוס שלו — שינוי
   שם מחייב עדכון כאן, אחרת הרצועה לא תיצמד לקצוות. */
.ti-steps {
    display: flex;
    list-style: none;
    counter-reset: ti-st;
    margin: -18px -18px 20px;
    padding: 18px 16px 14px;
    background: var(--ti-brand-light);
    border-bottom: 1px solid var(--ti-line);
    /* פינות עליונות בלבד — הרצועה יושבת בראש הכרטיס */
    border-radius: var(--ti-radius) var(--ti-radius) 0 0;
}

.ti-steps li {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ti-muted);
    position: relative;
    padding-top: 36px;
}

/* מתחת ל-380px שלוש התוויות נלחצות; הקטנה קלה מונעת שבירה מכוערת
   באמצע מילה בלי לפגוע בקריאות.
   ⚠️ חייב לבוא *אחרי* `.ti-steps li` — media query אינו מוסיף specificity,
   ולכן כלל מאוחר יותר באותה רמה היה דורס אותו בכל הרוחבים. */
@media (max-width: 379.98px) {
    .ti-steps li {
        font-size: 0.78rem;
    }
}

.ti-steps li::before {
    counter-increment: ti-st;
    content: counter(ti-st);
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #dfe9e5;
    color: var(--ti-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.ti-steps li.is-on {
    color: var(--ti-brand);
    font-weight: 700;
}

.ti-steps li.is-on::before {
    background: var(--ti-brand);
    color: #fff;
}

.ti-steps li.is-done::before {
    background: var(--ti-brand-light);
    color: var(--ti-brand);
    content: "\2713";
}

/* ⚠️ בר השלבים (`.ti-steps`) נמחק מה-markup ב-28/8/2026 — שורות הפנקס
   הן הבר. הכללים שלו נשארים כאן בינתיים ואינם מיושמים על דבר; יוסרו
   בשלב ה של תוכנית הפנקס, יחד עם שאר הניקוי. */

/* ⭐ כמה מהדף נשאר גלוי מעל הפנקס כשמיישרים אליו (`alignSec`).
   ⚠️ 130px ולא 14 (משוב רונן, 28/8): הצמדה לקצה גללה עמוק מדי וחשפה את
   תחתית הדף — אזור שעדיין אינו רלוונטי — בזמן שההקשר שלמעלה (פת הלחם
   ושורת ה-lede) נעלם. הערך נמדד: ה-lede יושב 59px מעל הפנקס ופת הלחם
   115px, ולכן 130 מחזיר את שניהם לתמונה.
   ⚠️ במובייל פחות — גובה המסך יקר שם, ו-60px מספיקים ל-lede. */
#tiAcc { scroll-margin-top: 130px; }

/* ⚠️⚠️ ביטול scroll anchoring של הדפדפן בדף כולו (משוב רונן 30/8,
   "עדיין קופצני"): במורף של הפנקס הגבהים משתנים פריים-פריים, והעיגון
   האוטומטי של Chrome מזיז את הגלילה כדי "לייצב" עוגן שבחר בעצמו —
   בדיוק במקביל לגלילה שלנו. שתי ידיים על אותו הגה = ריצוד. הגלילה
   בדף הזה מנוהלת במפורש (frameLedger, openExtKeeping), והעיגון
   האוטומטי רק נלחם בה. */
.ti-wide-body { overflow-anchor: none; }

/* ⚠️⚠️ ביטול ה-smooth הגלובלי של תבנית הביטוח (travel-insurance-modern
   שורה 14: html{scroll-behavior:smooth}) — הוא הפך כל גלילה "מיידית"
   של הדף הזה לאנימציה: החיתוך הנקי של הקיפול, פיצוי העיגון של
   המיני-פנקס — כולם רצו כגלישה איטית, וזו הקפיצה שרונן ראה שוב ושוב.
   הקובץ הזה נטען אחרי ה-modern ולכן גובר. חלקות נשארת רק היכן שהיא
   מפורשת: frameLedger בדסקטופ ושתי הגלילות היזומות (תוצאות, תאריכון). */
/* ⚠️ html:root ולא html: ה-smooth מגיע מ-bundle האתר (cssSupermarker)
   שנטען **אחרי** הקובץ הזה — סלקטור שווה-ספציפיות היה מפסיד לו. */
html:root { scroll-behavior: auto; }

@media (max-width: 767.98px) {
    #tiAcc { scroll-margin-top: 60px; }
}

/* ---------- שורת פנקס: תת-כותרת בתוך גוף השורה ----------
   ⭐ נדרשה כשהיעד והתאריכים אוחדו לשורה אחת: הגוף מכיל שתי שאלות, וצריך
   הפרדה ויזואלית שאינה שורת פנקס נוספת. */
/* ⚠️ 700 ולא 800, ובגודל של שאר הכותרות (משוב רונן, 30/8): המשקל
   הכבד גרם ל"לאן נוסעים?" ו"מתי נוסעים?" להיקרא כפונט זר בתוך
   הוויזארד. אותו משקל כמו .ti-sec-t ו-.ti-health-q. */
.ti-subq {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ti-ink);
    margin: 0 0 4px;
}

.ti-subq-2 {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--ti-line);
}

/* ⭐ שני טורים בשורת פרטי הנסיעה (משוב רונן, 28/8): היעד מימין והתאריכון
   משמאל — האזור הריק משמאל נעלם, והתאריכון נראה בלי לגלול.
   ⚠️ 992px: מתחת לזה שני לוחות-חודש + עמודת יעד לא נכנסים בכבוד. */
@media (min-width: 992px) {
    .ti-trip-cols {
        display: grid;
        grid-template-columns: 1fr 1.15fr;   /* לתאריכון קצת יותר מקום */
        gap: 8px 28px;
        align-items: start;
    }
    /* בטורים אין "מעבר נושא" אנכי — כל טור מתחיל מראשו */
    .ti-trip-cols .ti-subq-2 { margin-top: 0; padding-top: 0; border-top: 0; }
    /* הקיצור לתאריכון מיותר כשהתאריכון ממילא לצד היעד */
    .ti-trip-cols .ti-btn-mini { display: none; }
}

/* ---------- שורה עתידית (נעולה) ----------
   ⚠️⚠️ מוצגת ולא מוסתרת: כל ערך הפנקס הוא שהגולש רואה את **כל** הדרך
   מראש. אבל היא נעולה, כי פתיחתה מייצרת מצב לא תקין (למשל שאלות בריאות
   לפני שידוע מי הנוסעים).
   ⚠️ `disabled` על הכותרת ⇒ לא ממוקדת במקלדת ומוכרזת כמושבתת. */
.ti-sec.is-future .ti-sec-head { cursor: default; }
.ti-sec.is-future .ti-sec-t,
.ti-sec.is-future .ti-sec-sum { color: var(--ti-muted); opacity: 0.75; }
.ti-sec.is-future .ti-sec-num { background: #eef2f0; color: #9fb0a8; }
.ti-sec.is-future .ti-sec-edit { display: none; }
/* ⚠️ הסימן (+/−) יורד: הוא מבטיח פתיחה שלא תקרה */
.ti-sec.is-future .ti-sec-sign { visibility: hidden; }

/* ---------- חזרה: קישור, לא כפתור ----------
   ⭐ הכרעת רונן (28/8): החזרה הייתה `ti-btn-sec` עם מסגרת מותג, כלומר
   התחרתה ויזואלית ב-CTA הראשי. היא פעולה משנית ולכן היא נראית כקישור.
   ⚠️⚠️ נשארת `<button>` ולא הופכת ל-`<a>`: היא משנה מצב בדף ואינה
   מנווטת. העיצוב הוא של קישור, הסמנטיקה נשארת של כפתור.
   ⚠️ min-height 44px למרות הטקסט הקטן — WCAG 2.5.8 דורש 24×24 מינימום
   ו-44×44 מומלץ; קישור טקסט קטן נכשל בזה במובייל. */
.ti-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 10px 2px;
    min-height: 44px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ti-brand-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ti-back:hover { color: var(--ti-brand); }

.ti-back:focus-visible {
    outline: 2px solid var(--ti-brand);
    outline-offset: 2px;
}

/* ⭐ החץ כ-SVG ולא כתו טקסט (‏← / →): התווים דקים, תלויי גופן — ולכן
   "לא נראים כמו חץ" — וחשופים לבלבול דו-כיווני ב-RTL.
   ⚠️ aria-hidden על ה-SVG עצמו: הטקסט נושא את המשמעות, וחץ שמוכרז
   לקורא מסך הוא רעש.
   ⚠️ הכיוונים ב-RTL: קדימה = שמאלה, חזרה = ימינה. */
.ti-arrow {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- פאנלי הצעדים ---------- */
.ti-step-panel {
    display: none;
}

.ti-step-panel.is-open {
    display: block;
}

.ti-grid2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .ti-grid2 {
        grid-template-columns: 1fr 1fr;
    }
}

.ti-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.ti-mt {
    margin-top: 16px;
}

.ti-sublabel {
    display: block;
    font-size: 0.8rem;
    color: var(--ti-muted);
    margin-bottom: 4px;
}

/* ⚠️ ההנחיות לגולש הן טקסט תפעולי, לא הערת שוליים: 0.8rem באפור בהיר
   נקרא כ"אפשר לדלג". הוגדל ל-0.9rem והוכהה ל---ti-ink (כמעט שחור),
   ‏15.3:1 על לבן. --ti-muted נשאר לתוויות משניות בלבד. */
.ti-why {
    font-size: 0.9rem;
    color: var(--ti-ink);
    margin: 8px 0 0;
}

/* ---------- יעדים ---------- */
.ti-dests {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.ti-dest {
    border: 1.5px solid var(--ti-line);
    border-radius: 12px;
    padding: 6px 8px;
    text-align: center;
    background: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    min-height: 44px; /* tap target */
    color: inherit;
}

/* ⚠️ 44px הוא כלל ה-tap target למסך מגע. בעכבר (pointer:fine) הדיוק
   גבוה בהרבה, ו-44px על צ'יפ בן שורה אחת נראה מנופח — שם 34px, שעדיין
   הרבה מעל מינימום WCAG 2.5.8 (24×24). המדיה מבטיחה שבמובייל שום דבר
   לא קטן. */
@media (pointer: fine) {
    .ti-dest,
    .ti-chip {
        min-height: 34px;
    }

    .ti-chip { padding: 6px 16px; }
}

.ti-dest .ti-flag {
    font-size: 1.4rem;
    display: block;
    margin-bottom: 4px;
}

.ti-dest.is-sel {
    border-color: var(--ti-brand);
    background: var(--ti-brand-light);
    font-weight: 700;
}

/* ---------- תאריכים ----------
   ⚠️ שדות התאריך יורשים את .form-control של Bootstrap שגובהו ~38px —
   מתחת לסף ה-44px. הדריסה ממוקדת לדף (.ti-dates) ולא נוגעת ב-Bootstrap
   הגלובלי. ה-selector כולל את שם המחלקה כדי לנצח את הספציפיות של
   .form-control (0,1,0 מול 0,2,0). */
.ti-dates input[type="date"].form-control {
    min-height: 44px;   /* tap target */
}

/* ---------- נוסעים ---------- */
/* ⚠️ grid ולא flex: ב-flex התאים נדחסו לשורות לא אחידות במובייל והתצוגה
   נראתה שבורה. שתי עמודות במובייל, ארבע בדסקטופ. */
.ti-travelers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

@media (min-width: 600px) {
    .ti-travelers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ti-traveler {
    border: 1px solid var(--ti-line);
    border-radius: 12px;
    padding: 8px 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    min-height: 76px;
}

.ti-traveler span { font-size: 0.75rem; color: var(--ti-muted); }

.ti-traveler input {
    width: 100%;
    min-height: 44px;   /* tap target */
    text-align: center;
    border: 1px solid var(--ti-line);
    border-radius: 8px;
    padding: 4px 6px;
    font-size: 1rem;
}

/* שדה ריק מסומן במקווקו — "טרם מולא" מבחין את עצמו מגיל שהוזן */
.ti-traveler input:placeholder-shown { border-style: dashed; }

/* ============================================================================
   אקורדיון "פרטי הנסיעה" — ארבע שאלות ממוקדות
   ----------------------------------------------------------------------------
   ⚠️ אין נעילה בין החלקים; הבדיקה נעשית פעם אחת במעבר לבחירת הכיסויים.
   כותרת חלק סגור נושאת את הערך שנבחר, ולכן היא יכולה להתארך — ראו את
   הטיפול במובייל למטה, שם סיכום ארוך גלש מעבר למסגרת.
   ============================================================================ */
.ti-acc { margin-bottom: 4px; }

.ti-sec {
    border: 1px solid var(--ti-line);
    border-radius: 12px;
    margin-bottom: 12px;
    background: #fff;
}

.ti-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    min-height: 56px;   /* tap target */
    padding: 12px 14px;
    background: none;
    border: none;
    text-align: right;
    font: inherit;
    cursor: pointer;
}

.ti-sec-num {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #dfe9e5;
    color: var(--ti-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.ti-sec.is-open .ti-sec-num { background: var(--ti-brand); color: #fff; }
.ti-sec.is-filled:not(.is-open) .ti-sec-num { background: var(--ti-brand-light); color: var(--ti-brand); }

.ti-sec-t { font-weight: 700; }

/* ⚠️ min-width:0 + overflow-wrap — בלי זה סיכום ארוך ("יוון + ארה"ב · 12 ימים")
   דוחף את הכותרת מעבר למסגרת הכרטיס במובייל. */
.ti-sec-sum {
    margin-inline-start: auto;
    min-width: 0;
    text-align: left;
    color: var(--ti-brand-dark);
    font-size: 0.85rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ti-sec-sum.is-empty { color: var(--ti-muted); font-weight: 400; }

.ti-sec-edit { flex: 0 0 auto; color: var(--ti-muted); font-size: 0.8rem; }
.ti-sec.is-open .ti-sec-sum,
.ti-sec.is-open .ti-sec-edit { display: none; }

/* ⚠️⚠️ הסימן +/− הוסר מהתצוגה (משוב רונן, 30/8): הוא היה מיותר ליד
   העיגול הממוספר — המספר, ה-✓ וה"עריכה ✎" כבר אומרים את מצב השורה,
   והסימן רק הוסיף רעש לפני המספר.
   ⚠️ האלמנט **נשאר ב-DOM** (aria-hidden) ולא נמחק: הוא מקום שמור לחיווי
   מצב עתידי, והסרתו מה-markup הייתה שוברת את מבנה הכותרת בכל ארבע
   השורות. המצב מוכרז ממילא דרך aria-expanded על הכותרת. */
.ti-sec-sign { display: none; }

@media (max-width: 599.98px) {
    /* הסיכום יורד לשורה משלו ברוחב מלא במקום להידחס לצד הכותרת */
    .ti-sec-head { align-items: flex-start; }
    .ti-sec-sum { flex: 1 0 100%; margin-inline-start: 38px; text-align: right; }
    .ti-sec-edit { margin-inline-start: auto; }
}

.ti-sec.is-open { border-color: var(--ti-brand); box-shadow: 0 0 0 1px var(--ti-brand); }
.ti-sec.is-miss { border-color: var(--ti-danger); box-shadow: 0 0 0 1px var(--ti-danger); }

/* ---------- פתיחה/סגירה של שורת פנקס: מורף ולא הבזק ----------
   ⚠️⚠️ עד 28/8 הסגירה הייתה display:none — הבזק שמעלים ~600px בבת אחת,
   וכל מה שמתחת קפץ. עכשיו grid-template-rows מונפש (0fr↔1fr): הגובה
   זורם ברצף שהעין יכולה לעקוב אחריו, וה-JS מעגן את הכותרת של השורה
   שנפתחת כך שהיא לא זזה בכלל (ראו anchorDuring).
   ⚠️⚠️ ילדים ישירים בלבד (>): ‎.ti-sec משמש גם את קבוצות ההרחבות,
   שאינן מתקפלות — ומאז שלב ג הן יושבות **בתוך** tiAcc (גוף שורה 4),
   כך שסלקטור צאצא רגיל היה מחיל עליהן grid ושובר אותן בשקט.
   ⚠️ visibility ולא רק overflow: גוף סגור נשאר ב-DOM (SEO), אבל בלי
   visibility:hidden הפקדים שבו היו נשארים נגישים ל-Tab ולקורא מסך. */
/* ⚠️⚠️ המורף הוא **דסקטופ בלבד** (משוב רונן, 28/8): במובייל המרחקים
   גדולים (השורה גבוהה ממסך שלם), וכל שילוב של הנפשת פריסה עם גלילה —
   מקבילי או עוקב — נקלט כ"מעלית שעולה ויורדת". במובייל אין תנועה בכלל:
   חיתוך נקי בפריים אחד למצב הסופי הממוסגר (ראו frameLedger). אין מסע ⇒
   אין מעלית. בדסקטופ המרחקים קטנים והמורף (0.15s) אושר. */
#tiAcc > .ti-sec {
    display: grid;
    grid-template-rows: auto 0fr;
}

#tiAcc > .ti-sec.is-open { grid-template-rows: auto 1fr; }

#tiAcc > .ti-sec > .ti-sec-body {
    display: block;
    overflow: hidden;
    min-height: 0;
    padding: 0 14px;
    border-top: 1px solid transparent;
    visibility: hidden;
}

#tiAcc > .ti-sec.is-open > .ti-sec-body {
    padding: 2px 14px 16px;
    border-top-color: var(--ti-line);
    visibility: visible;
}

/* ⭐⭐ "המשך" של שורת פרטי הנסיעה — בשורת הימים, בדסקטופ (רונן 10/9/26).

   גלגול שני. הראשון (9/9) היה sticky לתחתית המסך, ורונן פסל אותו: "מסתיר
   חלק מהמסך, וזה גם לא מסייע בכלום, כי במילא צריך לגלול להצגת כל
   התאריכון ושדה הימים". הוא צודק בדיוק כאן: שדה הימים הוא **השדה האחרון**
   בשורה, ולכן מי שהגיע אליו כבר גלל — והכפתור צריך להיות שם, לא דבוק
   לתחתית המסך מעל התאריכון.
   נמדד (1440×900): עמודת התאריכים 594px (שני חודשים 328 + שורת החצים 44 +
   שורת הימים 57), ומתחתיה שורה נפרדת של 64px רק לכפתור. בשורת הימים יש
   חצי ריק משמאל — הכפתור עובר לשם והשורה הנפרדת נעלמת.
   ⚠️ מראש הדף זה **לא** נכנס בקיפול בשום פתרון: הוויזרד מתחיל 468px מתחת
   לראש הדף ב-1440×900. המטרה היא שכשהשורה בראש המסך, כולה נראית.
   ⚠️ ה-overflow:visible שהוסף עבור ה-sticky הוחזר ל-hidden (ברירת המחדל
   של הכלל הסגור) — בלי sticky אין לו תפקיד, ושינוי שאין לו תפקיד הוא סחף.
   ⚠️ margin-inline-start:auto ב-RTL דוחף את הכפתור לקצה **השמאלי** של
   השורה — בדיוק "משמאל לשדה הימים".
   ⚠️ מובייל נשאר כשהיה: שורת הימים צרה שם, והכפתור מתחת לעמודות. */
.ti-daysfield .ti-btn-next--inrow { display: none; }

@media (min-width: 768px) {
    /* ⚠️⚠️ inline-block ולא inline-flex (רונן 10/9/26: "החץ בו לא מיושר").
       שאר כפתורי .ti-btn הם בזרימת טקסט רגילה, והחץ ממורכז שם ע"י
       vertical-align:middle. ב-inline-flex ה-vertical-align מתעלם, יישור
       ברירת המחדל של flex הקפיץ את החץ 4px למעלה, והרווח מהטקסט נעלם.
       ה-margin-inline-start:auto עובד בכל מקרה — הכפתור הוא פריט flex של
       .ti-daysfield, ללא קשר ל-display שלו עצמו. */
    .ti-daysfield .ti-btn-next--inrow {
        display: inline-block;
        margin-inline-start: auto;
    }
    .ti-sec-body > .ti-actions-trip { display: none; }
}

/* ⚠️⚠️ אין הנפשת קיפול — בשום רוחב (הכרעת רונן, 30/8: "עדיף להשתמש
   באותה דרך של המובייל, שם המעברים חלקים יותר").
   הדרך הארוכה לכאן: מורף 0.15s בדסקטופ + גלישה מקבילה עבד בתנאי מעבדה,
   אבל כל שינוי גובה נוסף (שורה 4 הגבוהה, מעבר פוקוס, גובה תאריכון
   משתנה) הוסיף תנועה משלו על אותו ציר — והעין קלטה את הסכום כקפיצה.
   פריים אחד למצב הסופי הוא לא "פחות יפה": הוא היחיד שאין בו מסע שהעין
   מנסה לעקוב אחריו. זה בדיוק מה שמובייל עשה מהיום הראשון.
   ⚠️ לכן גם אין כאן @media ואין prefers-reduced-motion: אין מה להנפיש. */

/* ============ דחיסת מובייל (28/8/2026, משוב רונן) ============
   שתי מטרות קשורות: (א) שורת חיפוש היעד תיראה בלי לגלול — במדידה ישבו
   ~420px של כותרות/שיתוף/פירורים מעל הוויזארד; (ב) הקטנת גובה שורת
   פרטי הנסיעה — ככל שהיא נמוכה יותר, מרחק הגלישה של הקיפול קטן יותר
   והקפיצה מתמתנת. הסלקטורים בהיקף הדף (ti-wide-body) — לא נוגעים
   בתבנית האתר. */
@media (max-width: 767.98px) {
    .ti-wide-body h1.h1Title { margin: 4px 0 2px; }
    .ti-wide-body .h2Title { font-size: 0.82rem; line-height: 1.45; margin: 2px 0 6px; }
    /* ⚠️⚠️ שני הכללים האלה היו מתים מ-28/8 (נמצא 11/9/26, רונן: "תקטין את
       הרווח בין כפתורי השיתוף ודף הבית"): ‎#main.ti-page-wide .sm-share-bar.ti-share-top‎
       ו-‎#breadcrumb .breadcrumb‎ גוברים ב-specificity על ‎.ti-wide-body …‎, והכלל
       הגלובלי ‎#breadcrumb { margin: 2em 0 }‎ (cssSupermarker) הוסיף 32px מעל
       הפירורים. נמדד: 40px בין השיתוף ל"דף הבית" → 8px. */
    body.ti-wide-body #main.ti-page-wide .sm-share-bar.ti-share-top { margin: 0 0 6px; }
    body.ti-wide-body #breadcrumb { margin-top: 0; }
    body.ti-wide-body #breadcrumb .breadcrumb { padding: 2px 0; }
    .ti-lede { font-size: 0.88rem; margin-bottom: 8px; }

    #tiAcc .ti-why { margin: 2px 0 6px; font-size: 0.85rem; }
    /* ⚠️ 44 ולא פחות — שער T1 סורק min-height ואינו מבחין בין מכל לרכיב */
    .ti-dest-tags { margin-top: 6px; }
    .ti-poplabel { margin: 8px 0 6px; }

    /* ⭐ חודש אחד במקום שניים נערמים (חוסך ~385px — הלוח היה 769px,
       יותר ממסך שלם). מעבר חודש בחצים, כמו בכל תאריכון מובייל. */
    .ti-cal-months .ti-mon + .ti-mon { display: none; }
}

.ti-btn-next { padding: 11px 22px; font-size: 0.95rem; }

/* ⭐ כפתור-מיני בתוך גוף שורה ("לבחירת התאריכים"): פעולה מקומית, קטן
   מ"המשך" בכוונה — הוא לא מקדם שלב, רק גולש לחלק הבא של אותה שורה. */
.ti-btn-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--ti-brand-dark);
    border: 1.5px solid var(--ti-line);
    border-radius: 20px;
    padding: 8px 16px;
    min-height: 44px;   /* יעד מגע — שער T1 אוכף */
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.ti-btn-mini:hover { border-color: var(--ti-brand); background: var(--ti-brand-light); }

.ti-btn-mini:focus-visible { outline: 2px solid var(--ti-brand); outline-offset: 2px; }

.ti-acc-err {
    background: #fdf1f1;
    border: 1px solid #e8bcbc;
    color: var(--ti-danger);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    margin: 0 0 12px;
}

.ti-poplabel { font-size: 0.82rem; color: var(--ti-muted); margin: 14px 0 8px; }

/* ⚠️ שלושת הצ'יפים האחרונים יורדים במובייל — 13 יעדים תופסים שם ארבע
   שורות ודוחקים את שאר השאלה מתחת לקיפול. */
@media (max-width: 599.98px) {
    .ti-dests .ti-dest:nth-child(n+11) { display: none; }
}

/* שורת ההקשר של התוצאות. שני מצבים:
   is-sample — הפרטים לא מולאו, המחירים על ערכי ברירת מחדל (ענבר).
   is-mine   — הפרטים מולאו, ההשוואה מותאמת לגולש (ירוק מותגי).
   ⚠️ הגוון מבחין בין השניים: אותה קופסה בשני מצבים שונים לגמרי. */
.ti-sample-note {
    display: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    margin: 0 0 10px;
}

.ti-sample-note.is-on { display: block; }

.ti-sample-note.is-sample {
    background: #fdf6e6;
    border: 1px solid #e8d9a8;
    color: var(--ti-value-text);
}

.ti-sample-note.is-mine {
    background: var(--ti-brand-light);
    border: 1px solid var(--ti-line);
    color: var(--ti-brand-dark);
    font-weight: 700;
}

/* ---------- אזור ההרחבות (שלב 2) ----------
   ⚠️⚠️ עוצב מחדש ב-2026-08-15 בשפה של שלב 1. הבעיה שזה פתר: הכותרות,
   המסגרות והחלוקה לכרטיסיות היו שונות לגמרי בין שני השלבים, והדף נקרא
   כשני אתרים. הפתרון אינו שפה שלישית אלא מיחזור הקיימת:
   .ti-extsec משתמש ב-.ti-sec, ב-.ti-sec-num וב-.ti-sec-t של שלב 1. */

/* ⭐⭐ עיצוב נקי (הכרעת רונן, 31/8): הקבוצה אינה כרטיס אלא **כותרת עם
   קו**. עד כאן היו ארבע רמות מסגרת זו בתוך זו — שורת הפנקס, כרטיס
   הקבוצה, כרטיס לכל הרחבה, ומסגרת אזור הפרטים — וכל רמה גבתה padding
   משלה. נשארה אחת: המסגרת של שורת הפנקס.
   ⚠️ העיגול הממוספר של הקבוצה ירד: הוא התחרה במספור הפנקס (1-4) על
   אותו תפקיד ויזואלי בדיוק. */
.ti-extsec {
    border: 0;
    border-radius: 0;
    background: none;
    margin-bottom: 0;
}

.ti-extsec + .ti-extsec { margin-top: 14px; }

/* ⭐⭐ מוקאפ ב׳ (הכרעת רונן 4/9/26): "סוג ההרחבה" נקרא לפני השם. הכותרת
   היא פס עם ריבוע צבעוני — תכלת אפרפר = כלול, ירוק = פופולריות,
   כחול-טורקיז = מיוחדות. הצבע מגיע מ-data-cat על הסעיף, כלומר מהטקסונומיה. */
.ti-extsec-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 0;
    padding: 10px 2px 6px;
    border-bottom: 2px solid var(--ti-brand-light);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--ti-brand-dark);
}
.ti-extsec-head .ti-sec-t::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    background: var(--ti-brand);
    margin-inline-end: 7px;
    vertical-align: baseline;
}
.ti-extsec[data-cat="5"] .ti-sec-t::before { background: var(--ti-inc-bar); }
.ti-extsec[data-cat="3"] .ti-sec-t::before { background: var(--ti-ext-name); }

/* המונה — טקסט שקט ליד הכותרת, לא תג */
.ti-extsec-cnt {
    margin-inline-start: auto;
    color: var(--ti-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.ti-extsec-body { padding: 2px 0 0; }

/* ⭐ רשת שתי עמודות בדסקטופ (מוקאפ "רשת 2 עמודות + כיסויים נלווים",
   חלופה ב — הכרעת רונן 28/8/2026).
   ⚠️ 992px ולא 768: בטאבלט לרוחב שתי עמודות עדיין צרות מדי להסבר, והרשת
   הפכה לשתי עמודות של טקסט קטוע.
   ⚠️ align-items:start — בלעדיו כל הכרטיסים בשורה נמתחים לגובה הגבוה
   שבהם, וכרטיס פתוח היה מותח את שכנו הסגור לגובה ריק.
   ⚠️ כרטיס פתוח **אינו** נפרס לרוחב מלא בכוונה: פריסה כזו מזיזה את כל
   הכרטיסים שאחריו בכל פתיחה וסגירה, והגולש מאבד את המקום שבו הסתכל. */
@media (min-width: 992px) {
    .ti-extsec-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* ⚠️ אפס מרווח אנכי: קווי השיער של השורות הם המפריד, ומרווח
           נוסף היה יוצר "חלונות" בין קו לקו. */
        gap: 0 26px;
        align-items: start;
    }
    /* ⚠️⚠️ min-width:0 — בלעדיו שורת ההמלצה (nowrap) קובעת את רוחב
       min-content של פריט הרשת, העמודות מתנפחות לרוחב הטקסט המלא
       (נמדד: 1275px לעמודה) והדף כולו גולש אופקית. ellipsis עובד רק
       כשמותר לפריט להתכווץ מתחת לתוכנו. */
    .ti-extsec-body > .ti-ext { min-width: 0; }
    /* קבוצה מקוננת שלמה (כיסויים נלווים) תופסת את שתי העמודות */
    .ti-extsec-body > .ti-sec { grid-column: 1 / -1; }
}

/* ⭐ חלופה ב: רמז בשורה הסגורה. הגולש יודע שהכיסוי הנלווה קיים בלי
   לפתוח דבר — בחלופה א הוא היה מתגלה רק אחרי פתיחה, וכיסוי שאיש אינו
   יודע עליו שווה כמו כיסוי שאינו קיים. */
/* ⚠️ מוקאפ ב׳: הרמז מושתק ולא זהב. הזהב שמור עכשיו ל"כלול", ורמז צהוב
   בשורה לבנה נראה כמו אזהרה. הוא שורת תיאור, ולכן בגוון של שורת תיאור. */
.ti-ext-hint {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ti-muted);
}

/* ⚠️ אין "+" מוביל: מאז 28/8 הנוסח הוא "קיימות הרחבות ל..." — משפט
   שמתאר מציאות, ולא קריאה לפעולה שסימן חיבור מתאים לה. */

/* ⚠️ ברגע שההרחבה נבחרה, האזור המקונן עצמו מוצג ב-ti-ext-detail —
   הרמז מיותר ורק מכפיל את אותה אמירה. */
.ti-ext.is-on .ti-ext-hint { display: none; }

/* ⭐ שורת הרחבה — קו שיער תחתון במקום כרטיס ממוסגר (עיצוב נקי, 31/8) */
/* (הכלל הישן של קו-השיער הוחלף ב-.ti-ext שלמעלה — מוקאפ ב׳) */
.ti-ext { min-width: 0; }

/* ⭐⭐ מוקאפ ב׳: שלושה מצבים ויזואליים בלבד, ולא יותר —
     כלול      זהב, מסגרת מקווקווה, גלולה "כלול"
     נבחר      ירוק מלא, פס-צד עבה, גלולה "נבחרה · N"
     לבחירה    לבן, קו דק, גלולה מושתקת
   ⚠️ ה-gradient המתמוגג הוסר: הוא היה הבחנה עדינה, ורונן ביקש את
   ההפך — "הכל בדף בערך באותו צבע, אותה הדגשה ואותו גודל". */
.ti-ext {
    border-radius: 10px;
    border: 1.5px solid var(--ti-line);
    padding: 2px 10px;
    margin-bottom: 8px;
    background: #fff;
}
.ti-ext.is-on {
    border: 2px solid var(--ti-brand);
    border-inline-start: 6px solid var(--ti-brand);
    background: var(--ti-brand-light);
}
/* ⚠️ התכלת = "כלול" בפועל, ולכן רק כשהשורה גם דלוקה. כיסוי בסיס שהגולש
   הסיר (או קישור עמוק בלי הקוד שלו) נראה כמו כל שורת "לבחירה". */
.ti-ext.is-base.is-on {
    border: 1.5px dashed var(--ti-inc-line);
    border-inline-start: 6px solid var(--ti-inc-bar);
    background: var(--ti-inc-bg);
}

/* ⚠️ 44 ולא 56: שטח הנגיעה הנדרש (WCAG 2.5.8) הוא 44, והכרטיס הישן
   הוסיף 12 מיותרים על כל שורה — ‎12px × 9 הרחבות בכל טור. הכפתור
   שבתוכה (44) ממשיך לשאת את היעד בעצמו. */
.ti-ext-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    min-height: 44px;
}

.ti-ext-main { flex: 1; min-width: 0; }
/* ⭐ השם הוא ההדגשה (מוקאפ ב׳, סבב 2): **לא** בפונט/משקל שונה (רונן: "לא על
   ידי פונט שונה") אלא בגודל ובצבע משלו — אין עוד טקסט בשורה בגודל או
   בצבע הזה. */
.ti-ext-t { font-weight: 700; font-size: 1.1rem; line-height: 1.25; color: var(--ti-ext-name); }

/* ⭐ שלב ג (הכרעת המוקאפ, 28/8): צ'ק-בוקס אמיתי במקום כפתור ה-toggle —
   אותו פקד כמו בפריטי הציוד המקוננים, אותה שפה בכל המיני-פנקס.
   ⚠️ שטח הנגיעה מושלם ע"י ה-padding של השורה וה-label — לא ע"י ניפוח
   הריבוע עצמו, שהיה הופך אותו לפקד ענק ומוזר. */
.ti-ext-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--ti-brand);
    cursor: pointer;
}

.ti-ext-t { cursor: pointer; }

/* ⭐⭐ חיווי בחירה לא-צבעוני (חלופה א, אישור רונן 31/8): WCAG 1.4.1
   אוסר להעביר מידע בצבע בלבד, ופס-הצד והגוון שניהם צבע. מילה אחת
   שעובדת גם בצילום שחור-לבן, גם בעיוורון צבעים וגם בהגדלה.
   ⚠️ מוסתרת בשורה מקופלת: שם ה-✓ של הסיכום כבר אומר את זה. */
/* ⚠️ גלולת "נבחרה/לבחירה" (.ti-ext-state) הייתה כאן שעות ספורות ב-4/9/26
   וירדה — רונן: "מיותר ומעמיס. מספיק שה-V יהיה נוכח יותר". החיווי הוא
   הצ'ק-בוקס, ובשורה מקופלת ה-✓ המודגש (.ti-ext-ok). */

/* "הסבר מלא" — קישור-כפתור שקט בקצה השורה. פותח את אזור ההחלפה של
   הקבוצה; ההמלצה כבר גלויה בשורה, כך שהקישור הוא העמקה ולא גילוי. */
.ti-ext-info {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--ti-brand-dark);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 6px;
    /* ⚠️ 44 — שער T1 סורק min-height מוצהר */
    min-height: 44px;
}

/* ⚠️ במובייל השורה נשברת בחן: שם ארוך + תווית/קישור לא נדחסים
   לשורה אחת ("הוצאות רפואיות בחו"ל" נשבר סביב הגלולה). */
@media (max-width: 767.98px) {
    .ti-ext-row { flex-wrap: wrap; }
    .ti-ext-row .ti-ext-main { flex: 1 1 60%; }
}

/* ✓ של השורה המקופלת במיני-פנקס — מוצג רק בקיפול */
/* ⭐ ה-✓ של השורה המקופלת (סבב 2, 4/9/26): "עכשיו הוא דק ונבלע". עיגול
   ירוק מלא עם ✓ לבן, בגודל הצ'ק-בוקס שהוא מחליף — נוכח בלי מילה. */
.ti-ext-ok {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ti-brand);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
}

/* ---------- כרטיסיית הכיסוי הבסיסי ----------
   ⚠️⚠️ הבעיה שעוצבה כאן מחדש (2026-08-16): שורת "כלול תמיד" קיבלה בדיוק
   את אותו טיפול ויזואלי כמו שורה **נבחרת** (מסגרת מותגית + רקע בהיר),
   ולכן אי אפשר היה להבחין בין מה שלא ניתן להסרה לבין מה שהגולש בחר.
   שלוש הרמות מובחנות עכשיו:
     כלול תמיד   → נייטרלי לגמרי + תווית מצב. אין כאן החלטה.
     נבחר        → מסגרת מותגית. זו בחירה פעילה.
     לא נבחר     → מסגרת רגילה. */
/* ⭐ מוקאפ ב׳: "כלול תמיד" הוא חלק ממדרגת "כלול" — כמו הכלולות, רק בלי
   צ'ק-בוקס. לפני כן היה לבן-נייטרלי, ובלט לרעה בתוך קבוצה צבועה. */
.ti-ext.is-always {
    border: 1.5px dashed var(--ti-inc-line);
    border-inline-start: 6px solid var(--ti-inc-bar);
    background: var(--ti-inc-bg);
}

/* תווית מצב, לא פקד: גלולה שקטה בלי מסגרת שמזמינה לחיצה */
.ti-ext-fixed {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    color: var(--ti-ext-name);
    background: #fff;
    border: 1px solid var(--ti-inc-line);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.74rem;
    font-weight: 800;
}
/* ⭐ שורת "כלול תמיד" בדסקטופ: התווית ו"קרא עוד" צמודות לשם ולא
   נדחפות לקצה (משוב רונן, 31/8). הדחיפה נבעה מ-.ti-ext-main שתופס את
   כל הרוחב הפנוי (flex:1) — כאן הוא מתכווץ לתוכנו.
   ⚠️ רק מ-992px: מתחת לזה השורה נשברת ממילא, ו-flex קבוע היה מונע
   מהשם הארוך להתכווץ. */
@media (min-width: 992px) {
    .ti-ext.is-always .ti-ext-main { flex: 0 1 auto; }
}

/* ✓ צורני לצד המילים — לא רק צבע (WCAG 1.4.1) */
.ti-ext-fixed::before { content: "\2713"; font-size: 0.9rem; line-height: 1; }

/* ⚠️ שורות הבסיס הניתנות להסרה נושאות פס צד מותגי דק. הן מסומנות מראש
   ולכן נראות "נבחרות", וצריך משהו שיאמר "זו המלצה שלנו" בלי להוסיף עוד
   תג צבעוני לכרטיס שכבר עמוס. */
/* ⚠️ פס-הצד המותגי של שורות הבסיס ירד: מאז שכל שורה **נבחרת** נושאת
   פס-צד (is-on), פס נוסף על שורות הבסיס יצר שתי שפות לאותו סימן. */

/* ⭐ חלופה א (הכרעת רונן, 31/8): "כלול תמיד" בשורה משלו ברוחב מלא,
   ושתי ההרחבות הניתנות להסרה זו לצד זו ברשת. ⚠️ לא בשורה אחת עם
   השתיים: הוא עובדה ולא בחירה, וערבובו עם צ'ק-בוקסים מזמין לחיצות
   סרק וגם מוחק את שורות ההמלצה שלהן. */
@media (min-width: 992px) {
    .ti-extsec-body > .ti-ext.is-always { grid-column: 1 / -1; }
}

/* ⭐ משוב רונן (30/8): ההסבר נפתח **במקום** ולא באזור החלפה משותף.
   בהרחבות הוא גלוי וקצוץ לשתי שורות (ההמלצה ראשונה) עם "קרא עוד"
   שמתרחב במקומו; בכיסוי הבסיסי הוא נפתח מתחת לשם הכיסוי בלחיצת
   "הסבר מלא". בכל המצבים הטקסט המלא ב-DOM (SEO + קורא מסך) —
   הקיצוץ ויזואלי בלבד (line-clamp), וההסתרה בבסיס היא display
   כי שם אין טיזר. */
.ti-ext-explain { padding: 0 12px 10px; font-size: 0.86rem; color: var(--ti-ink); }
.ti-ext-explain p { margin: 0; }

/* הכיסוי הבסיסי: נפתח לפי בקשה, מתחת לשם הכיסוי עצמו */
.ti-ext.is-base .ti-ext-explain,
.ti-ext.is-always .ti-ext-explain { display: none; }
.ti-ext.is-base.is-exp .ti-ext-explain,
.ti-ext.is-always.is-exp .ti-ext-explain { display: block; }

/* הרחבות: קצוץ ל**שורה אחת** עד "קרא עוד" (רונן 4/9/26: "המסך עמוס
   מדי"). ⚠️ line-clamp ולא display:none — התוכן נשאר ב-DOM ומאונדקס
   במלואו; רק התצוגה נגזמת.
   ⚠️ שתי שורות × תשע הרחבות היו תשע פסקאות פתוחות בו-זמנית, וכל אחת
   נקטעת באמצע משפט — הגולש קרא חצאים ולא קיבל מהם החלטה. שורה אחת היא
   טיזר; מי שרוצה את המלל לוחץ "קרא עוד". */
.ti-ext:not(.is-base):not(.is-always) .ti-ext-txt:not(.is-open) {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* ⭐ מוקאפ ב׳: השורה הקצוצה היא תיאור, ולכן מושתקת וקטנה מהשם */
    font-size: 0.8rem;
    color: var(--ti-muted);
}

/* "קרא עוד" / "הצג פחות" — כפתורי טקסט שקטים בדפוס המקובל */
.ti-exp-btn,
.ti-less-btn {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    color: var(--ti-brand-dark);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 0;
    /* ⚠️ 44 — שער T1 סורק min-height מוצהר */
    min-height: 44px;
}

/* ⚠️⚠️ ירידת שורה שהוקלדה באדמין תרונדר. בלי זה HTML מכווץ כל רצף
   רווחים ושורות לרווח בודד, ומי שהזין פסקאות ראה גוש אחד — ואז הפיתוי
   הוא להוסיף <br> בשדה, שיוצג כטקסט (הטקסט מוברח ב-HtmlEncode).
   pre-line מקפל שורות ארוכות כרגיל ומכבד רק את מה שהוקלד, ולכן הוא
   נותן את היכולת בלי לפתוח שום פתח ל-HTML מנתוני ה-DB. */
.ti-ext-explain p,
.ti-ext-txt p,
.ti-ext-recline,
.ti-ext-price { white-space: pre-line; }

/* ⚠️ `pre-line` **מוסר** בתוך הרשימה. ה-<li> נוצר משורה אחת שכבר נגזמה,
   ואין בו ירידות שורה לשמר; להשאיר אותו שם היה מותיר את הרווח שאחרי
   התבליט כרווח מודפס. הרשימה נותנת מה שהטקסט לא יכול היה לתת:
   הזחה תלויה — פריט שנשבר לשורה שנייה מיושר מתחת לטקסט ולא לשוליים,
   וזה מה שהופך אותו לקריא במובייל. */
.ti-txt-list {
    white-space: normal;
    margin: 6px 0 0;
    padding-inline-start: 1.15em;
    list-style: disc;
}

.ti-txt-list li { margin: 0 0 3px; }
.ti-txt-list li:last-child { margin-bottom: 0; }

/* ⚠️ שורת ההמלצה בתוך ההסבר, מודגשת. ההדגשה כאן ולא בתגית שמגיעה
   מה-DB: הטקסט נפלט דרך HtmlEncode, ולכן <strong> משם היה מוצג כטקסט —
   וביטול ההצפנה היה פותח XSS מנתונים. */
.ti-ext-recline {
    font-weight: 700;
    color: var(--ti-brand-dark);
    /* ⚠️ ההמלצה ראשונה מאז 30/8 — היא מה שנראה בשורות הקצוצות */
    margin: 0 0 4px;
}

/* ⭐ ההמלצה של שורות הבסיס — אחות של השורה ולא בתוך ההסבר הנסתר
   (משוב רונן, 31/8). קצוצה לשורה אחת כמו בשאר ההרחבות, ומיושרת עם
   שם ההרחבה (מעבר לצ'ק-בוקס: 20px + 8px מרווח). */
.ti-ext > .ti-ext-recline {
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--ti-ink);
    padding: 0 30px 6px 2px;
    margin: -2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ב"כלול תמיד" אין צ'ק-בוקס — אין למה ליישר */
.ti-ext.is-always > .ti-ext-recline { padding-inline-start: 2px; }

/* ⭐ במסך צר ההמלצה מוצגת **במלואה** מלכתחילה (משוב רונן, 31/8):
   השורה פרוסה על הרוחב המלא (אין רשת שתי עמודות מתחת ל-992), ויש
   מקום לשתיים-שלוש שורות טקסט. הקיצוץ שם רק הסתיר מידע בלי להרוויח
   מקום אמיתי. */
@media (max-width: 991.98px) {
    .ti-ext > .ti-ext-recline {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ⚠️ ובדסקטופ — נפתח עם "קרא עוד": ההמלצה יצאה מבלוק ההסבר (31/8),
   ולכן הרחבתו לא שחררה אותה והיא נשארה קטועה גם כשהכול פתוח. */
.ti-ext.is-exp > .ti-ext-recline {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.ti-ext > .ti-ext-recline p { margin: 0; display: inline; }

/* המלצת המצב הרפואי — נושאת את מראה ה-recline; רק מרווח משלה */
.ti-health-rec { margin: 12px 0 0; }

/* ⚠️ .ti-ext-rec (שורת המלצה נפרדת בשורה, גלגול שלב ג) הוסרה ב-30/8
   לבקשת רונן: ההמלצה חזרה לראש ההסבר הקצוץ, ששתי שורותיו מציגות אותה
   ועוד התחלה של ההסבר — במקום שורה נפרדת שגזלה את המקום הזה. */

/* ---------- אזור הפרטים של ההרחבה (חלופה A) ----------
   ⚠️ נפתח **במקום**, מתחת לשורה, ולא במודל. מרונדר תמיד ומוסתר ב-CSS:
   כך ה-JS לא בונה DOM, וההסבר נשאר מאונדקס.
   ⚠️ מוצג רק כשההרחבה נבחרה — לפני הבחירה אין מה לדייק. */
/* ⚠️ בלי קו עליון ובלי מסגרת — ההזחה והרקע הרך מספיקים כדי לומר
   "זה שייך לשורה שמעליי" (עיצוב נקי, 31/8). */
.ti-ext-detail { display: none; background: var(--ti-soft, #fbfdfc); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px 0; }
/* ⭐ שלב ג: מוצג רק בהרחבה **הפתוחה** — נבחרת שאינה extOpen מקופלת */
.ti-ext.is-on:not(.is-folded) .ti-ext-detail { display: block; }

/* ⭐⭐ ההורה אינו מסומן אך פריט מקונן כן (מצלמה בלי כבודה — הפריטים
   עצמאיים, הכרעת רונן 30/8): האזור נפתח, אבל **רק** החלק המקונן.
   שאלות ההורה (למי? כמה ימים? טווח המחיר) חסרות משמעות כשהוא לא נבחר,
   והצגתן הייתה נקראת כאילו ההרחבה כן נרכשת. */
/* ⚠️ :not(.is-folded) — כשהשורה מקופלת היא מציגה סיכום ועט בלבד
   (הכרעת רונן, 30/8); האזור נפתח רק בלחיצה עליה. */
.ti-ext.is-nestonly:not(.is-folded) .ti-ext-detail { display: block; }
.ti-ext.is-nestonly .ti-ext-detail > .ti-ext-q,
.ti-ext.is-nestonly .ti-ext-detail > .ti-ext-pax,
.ti-ext.is-nestonly .ti-ext-detail > .ti-ext-paxnote,
.ti-ext.is-nestonly .ti-ext-detail > .ti-ext-days,
.ti-ext.is-nestonly .ti-ext-detail > .ti-ext-price { display: none; }

/* טווח המחיר — מובלט, מעל בחירת הנוסעים */
/* ⚠️ הוקטן ב-30/8 (משוב רונן): הרקע המותגי הפך את המחיר לרכיב הבולט
   בכרטיס והאפיל על ההמלצה. עכשיו שורה שקטה — ההיררכיה המלאה (המלצה
   מעל מחיר) מחכה להכרעה על המוקאפ. */
.ti-ext-price {
    font-size: 0.82rem;
    color: var(--ti-muted);
    margin: 0 0 8px;
}

.ti-ext-q { font-size: 0.85rem; font-weight: 700; margin: 0 0 8px; }
.ti-ext-pax { display: flex; flex-wrap: wrap; gap: 8px; }
.ti-ext-paxnote { margin: 8px 0 0; }

/* ⚠️ אין אף נוסע בגיל המכוסה — אדום ומודגש (הכרעת רונן, 30/8): זו
   חסימה בפועל ולא הערה. אותו --ti-danger של שאר השגיאות בדף, בלי
   קופסה: הוא יושב בתוך אזור פרטי ההרחבה שכבר ממוסגר. */
.ti-ext-nopax {
    color: var(--ti-danger);
    font-weight: 700;
}

/* שורת הסיכום בשורה הסגורה — הדפוס של .ti-sec-sum בשלב 1 */
.ti-ext-sum {
    display: block;
    font-size: 0.82rem;
    color: var(--ti-brand-dark);
    font-weight: 700;
    margin-top: 2px;
}
.ti-ext-sum:empty { display: none; }
/* כשההרחבה פתוחה הפרטים עצמם על המסך — הסיכום רק מכפיל אותם */
.ti-ext.is-on:not(.is-folded) .ti-ext-sum { display: none; }

/* ---------- השורה המקופלת של המיני-פנקס (שלב ג) ----------
   "✓ שם · הנוסעים · כולל..." — שורה דקה, כמו שורת פנקס סגורה. הצ'ק-בוקס
   וההמלצה מוסתרים; לחיצה בכל מקום בשורה פותחת חזרה (ה-JS חוסם את
   ברירת המחדל של ה-label כדי שהלחיצה לא תבטל את ההרחבה). */
/* ⚠️ השורה המקופלת שומרת את גוון "נבחר" (מוקאפ ב׳): הלבן-כמעט הקודם ביטל
   את הרקע הירוק בדיוק במצב שבו רוב ההרחבות הנבחרות נמצאות. */
.ti-ext.is-folded { background: var(--ti-brand-light); }
.ti-ext.is-folded .ti-ext-row { min-height: 44px; padding: 6px 12px; cursor: pointer; }
.ti-ext.is-folded .ti-ext-check,
.ti-ext.is-folded .ti-ext-explain,
.ti-ext.is-folded .ti-ext-hint { display: none; }
.ti-ext.is-folded .ti-ext-ok { display: inline-flex; }
.ti-ext.is-folded .ti-ext-sum { display: block; }

/* פס הסיכום */
/* ⭐⭐ פס הסיכום — המבט-על (מוקאפ ב׳). בתחתית האזור, מעל כפתור ההשוואה,
   גדול, עם צ'יפ ירוק לכל הרחבה שנבחרה. ⚠️ סבב 2: ירד מהראש לתחתית —
   במובייל הוא "לא עוזר כי הוא למעלה"; גדול ולמטה הוא נקרא לפני הפעולה. */
.ti-ext-sumbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--ti-brand-light);
    border: 1.5px solid var(--ti-brand);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 14px 0 0;
    font-size: 0.9rem;
}
.ti-ext-sumbar:empty { display: none; }
.ti-ext-sumbar .ti-sb-lbl { font-weight: 800; color: var(--ti-brand-dark); white-space: nowrap; }
.ti-ext-sumbar .ti-sb-chip {
    background: var(--ti-brand); color: #fff;
    border-radius: 999px; padding: 3px 11px;
    font-weight: 700; font-size: 0.84rem;
}
.ti-ext-sumbar .ti-sb-left { margin-inline-start: auto; color: var(--ti-muted); font-size: 0.84rem; }
.ti-ext-sumbar .ti-sb-left b { color: var(--ti-ink); }

/* ---------- תאריכון טווח ----------
   תאריכון אחד לשני הקצוות: נוח יותר משני שדות date נפרדים, וחוסך את
   בדיקות התאימות ביניהם (חזרה לפני יציאה וכו'). */
/* ⚠️ ריווח אחיד: שורת ההסבר קיבלה margin תחתון משלה כי היא נצמדה
   לשדות שמתחתיה, ושדות התאריך הונמכו מ-56 ל-48 (הם היו גבוהים
   משמעותית משאר השדות בדף ושברו את הקצב האנכי). */
.ti-why-lead { margin-bottom: 14px; }

.ti-range { display: flex; gap: 10px; flex-wrap: wrap; max-width: 400px; }

/* ⭐ תצוגה בלבד (הכרעת רונן 28/8, דפוס שוקה): בלי מסגרת, בלי רקע, בלי
   cursor — שום דבר שנראה כמו שדה קלט. ההזנה בתאריכון; זו רק ההשתקפות.
   שני גלגולים קודמים נכשלו כאן: כפתור עם box-shadow נקרא כשדה בפוקוס,
   וגם בלי הטבעת המסגרת לבדה הזמינה הקלדה. */
.ti-rf {
    flex: 0 1 auto;
    text-align: right;
    padding: 2px 0;
}

.ti-rf + .ti-rf { margin-inline-start: 22px; }

/* ⭐ המוקד האמיתי: התא שממנו מתחילים בתאריכון (מחר, או היציאה שנבחרה).
   זה גם התא היחיד שניתן ל-Tab (roving tabindex), ולכן הסימון הוויזואלי
   והסמנטי מספרים את אותו סיפור.
   ⚠️ מסגרת מקווקוות ולא מלאה — כדי שלא תתחזה לתאריך **נבחר**. */
#tiCalMonths button[tabindex="0"]:not(.is-edge):not(.is-in) {
    outline: 2px dashed var(--ti-brand);
    outline-offset: -3px;
    font-weight: 700;
    color: var(--ti-brand-dark);
}
.ti-rf small { display: block; color: var(--ti-muted); font-size: 0.72rem; line-height: 1.3; }
.ti-rf b { font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.ti-rf b.is-empty { color: var(--ti-muted); font-weight: 400; }

/* שדה הימים יושב בתחתית מסגרת התאריכון (דפוס שוקה) ולא מעליה */
.ti-daysfield {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ti-line);
}

.ti-daysfield label { font-size: 0.85rem; color: var(--ti-muted); }
.ti-daysfield-in { display: flex; align-items: center; gap: 8px; }

.ti-daysfield-in input {
    width: 86px;
    min-height: 44px;   /* tap target */
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid var(--ti-line);
    border-radius: 12px;
}

.ti-daysfield-in input:focus { outline: 2px solid var(--ti-brand); border-color: var(--ti-brand); }
.ti-daysfield-in span { font-size: 0.85rem; color: var(--ti-muted); }

.ti-cal {
    display: none;
    margin-top: 12px;
    border: 1px solid var(--ti-line);
    border-radius: 12px;
    padding: 12px;
    max-width: 640px;
    background: #fff;
}

.ti-cal.is-open { display: block; }

/* צמצום ה-padding במובייל כדי לפנות רוחב לשבע העמודות */
@media (max-width: 599.98px) {
    .ti-cal { padding: 10px 4px; }
.ti-grid { gap: 1px; }
}
.ti-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.ti-cal-nav {
    min-width: 44px;
    min-height: 44px;   /* tap target */
    border: 1px solid var(--ti-line);
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
}

.ti-cal-nav:disabled { opacity: .4; cursor: not-allowed; }

.ti-cal-months { display: grid; grid-template-columns: 1fr; gap: 18px; }

@media (min-width: 700px) {
    .ti-cal-months { grid-template-columns: 1fr 1fr; }
}

.ti-mon h5 { margin: 0 0 8px; text-align: center; font-size: 0.95rem; }

/* ⚠️ גובה התאריכון קבוע בין חודשים — הריפוד לשש שורות נעשה ב-JS
   (monthGridHtml), בתאים ולא בפיקסלים, כדי שיהיה נכון בכל רוחב. */
.ti-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ti-dow { text-align: center; font-size: 0.72rem; color: var(--ti-muted); padding: 4px 0; }

/* ⚠️ שבע עמודות × 44px רוחב אינן נכנסות ב-375px (נשארים ~36px לתא אחרי
   ה-gutter וה-paddings). הגובה נשמר על 44px — הציר שקובע בפועל בלחיצה
   ברשימה אנכית — והרוחב מתכווץ. עדיין מעל מינימום WCAG 2.5.8 (24×24). */
.ti-grid button {
    min-height: 44px;   /* tap target */
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    border-radius: 8px;
    padding: 0;
}

/* ⚠️⚠️ תא ריק חייב גובה משלו. הריפוד לשש שורות (monthGridHtml) נכשל
   בלעדיו: שורת ריפוד שכולה תאים ריקים התמוטטה לגובה 0, והגובה המשיך
   להשתנות בין חודשים (נמדד 44px הפרש). התאים שלפני ה-1 בחודש עבדו רק
   כי בשורתם ישבו גם כפתורים. אותו 44 כמו הכפתור. */
.ti-grid > div:not(.ti-dow) { min-height: 44px; }

.ti-grid button:disabled { color: #c9d6d1; cursor: not-allowed; }
.ti-grid button.is-in { background: var(--ti-brand-light); border-radius: 0; }
.ti-grid button.is-edge { background: var(--ti-brand); color: #fff; font-weight: 700; }
/* ב-RTL היום המוקדם יושב מימין — ולכן הפינות של קצה ההתחלה הן הימניות */
.ti-grid button.is-edge.is-start { border-radius: 0 8px 8px 0; }
.ti-grid button.is-edge.is-end { border-radius: 8px 0 0 8px; }
.ti-grid button.is-edge.is-one { border-radius: 8px; }
.ti-grid button:hover:not(:disabled):not(.is-edge) { outline: 1px solid var(--ti-brand); }

.ti-cap-warn { color: var(--ti-danger); font-size: 0.85rem; margin: 6px 0 0; }

/* ---------- בחירת יעד: חיפוש + תגים ----------
   הקלט הראשי הוא חיפוש מדינה/עיר; צ'יפי האזור נשארים כ-fallback.
   התעריף אחיד פרט לארה"ב/קנדה, ולכן הבחירה היא נוחות — לא גיאוגרפיה. */
.ti-dest-search {
    position: relative;
    max-width: 420px;
}

.ti-dest-search input {
    width: 100%;
    min-height: 44px;   /* tap target */
    border: 1px solid var(--ti-line);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 1rem;
}

.ti-dest-search input:focus {
    outline: 2px solid var(--ti-brand);
    border-color: var(--ti-brand);
}

.ti-dest-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    background: #fff;
    border: 1px solid var(--ti-line);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    max-height: 260px;
    overflow-y: auto;
    z-index: 30;   /* מעל שדות התאריך שלצדו ב-grid */
    display: none;
}

.ti-dest-list.is-open {
    display: block;
}

.ti-dest-list button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    padding: 10px 14px;
    font-size: 0.95rem;
    cursor: pointer;
    min-height: 44px;   /* tap target */
}

.ti-dest-list button:hover,
.ti-dest-list button:focus {
    background: var(--ti-brand-light);
}

.ti-dest-tier {
    color: var(--ti-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.ti-dest-none {
    padding: 12px 14px;
    color: var(--ti-muted);
    font-size: 0.9rem;
}

/* ⚠️ השורה שמורה גם כשהיא ריקה (משוב רונן, 28/8): בחירת יעד הוסיפה תג
   ודחפה את כל מה שמתחת — היעדים המבוקשים, התאריכון — והתנועה הזו הציקה.
   min-height בגובה שורת תגים אחת ⇒ התג הראשון נכנס למקום ששמור לו,
   ורק שורת תגים שנייה (נדיר) מזיזה משהו. */
.ti-dest-tags {
    display: flex;
    flex-wrap: wrap;
    /* ⚠️ 10 בין שורות ולא 8: שטח הנגיעה של כל ✕ חורג 5px מתחת ומעל לתג
       (::after), ובשורה שנייה של תגים שני ✕ צמודים אנכית חפפו — נמדד 10/9/26 */
    gap: 10px 8px;
    margin-top: 10px;
    /* ⚠️ בגובה התג (34) ולא 44 — מאז 10/9/26 התג נמוך גם במגע (ראו למטה) */
    min-height: 34px;
}

/* ⚠️ התג היה כמעט ריבועי לשמות קצרים, והטקסט נגע במסגרת. עכשיו:
   padding אמיתי משני הצדדים, min-width שמייצב שמות קצרים, ו-white-space
   שמונע שבירה של שם ארוך ("הרפובליקה הדומיניקנית") לשתי שורות. */
.ti-dest-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--ti-brand);
    color: #fff;
    border-radius: 999px;
    padding: 2px 16px 2px 2px;
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
    min-width: 104px;
    justify-content: space-between;
    /* ⭐ 34 גם במגע (רונן 10/9/26: "תצר קצת את כפתורי היעדים שנבחרו", כדי
       שהיעדים המבוקשים יעלו ויראו יותר מהם). התג עצמו אינו נלחץ — רק ה-✕,
       ושטח הנגיעה שלו נשאר 44 דרך ::after (שער T-dest). */
    min-height: 34px;
}

/* בריבוי יעדים — סימון מי קובע את התעריף, בלי לפתוח שאלות */
.ti-dest-tag.is-eff small {
    font-size: 0.72rem;
    opacity: .85;
}

.ti-dest-tag button {
    background: rgba(255, 255, 255, .25);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    font-size: 0.8rem;
    /* עיגול גלוי 30px; שטח הנגיעה 44 — ה-::after שלמטה */
    position: relative;
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* ⚠️⚠️ שטח הנגיעה של ה-✕: 30 + 2×7 = 44 (כלל ה-44 של AGENTS.md). ה-✕ היה
   עיגול גלוי של 44px, וזה מה שהפך את התג לגבוה. עכשיו הגודל הגלוי וגודל
   הנגיעה נפרדים — אותו דפוס כמו המצב שהיה בעכבר בלבד עד 10/9/26.
   ⚠️ מי שמקטין את ה-inset שובר את שטח הנגיעה בשקט; שער T-dest מודד. */
.ti-dest-tag button::after {
    content: "";
    position: absolute;
    inset: -7px;
}

/* ⚠️ שגיאה כטקסט אדום קטן לא נקלטת. קופסה עם רקע ומסגרת, צמודה לשדה
   שאליו היא מתייחסת — לא בתחתית הדף. */
.ti-field-err,
/* ⚠️ .ti-summary.is-error חולק את הכלל עם שגיאות האשף (רונן 10/9/26: "בסגנון
   הודעות השגיאה האדומות לאורך הויזארד") — מקור אחד למראה, ולכן שינוי עתידי
   בגוון השגיאה יחול על שתיהן. */
.ti-sec-err,
.ti-summary.is-error {
    background: #fdf1f1;
    border: 1px solid #e8bcbc;
    border-radius: 10px;
    color: var(--ti-danger);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 10px 14px;
    margin: 12px 0 0;
}

/* ⚠️ התראת עדכון מאוחר: לא שגיאה (אדום) ולא הערה שקטה — משהו השתנה
   מתחת לידיו של הגולש והוא צריך לפעול. הזהב הרך של האתר, עם פס צד
   שמבדיל אותה מטקסט רגיל. */
.ti-notice {
    background: var(--ti-gold-soft, #fdf8ec);
    border: 1px solid var(--ti-gold-line, #e3d3a8);
    border-inline-start: 4px solid var(--ti-gold, #a8842c);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 12px;
}
.ti-notice[hidden] { display: none; }
.ti-notice-line {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ti-ink);
}
.ti-notice-line + .ti-notice-line { margin-top: 6px; }

/* ⚠️ ההודעה בתוך שורה: צמודה לכפתור ההמשך שמשחרר אותה */
.ti-sec-body .ti-notice { margin: 4px 0 12px; }

/* ⭐⭐ נעילת עדכון (הכרעת רונן, 30/8): הדף נשאר גלוי אבל אינו מגיב,
   כדי שהגולש יישאר באזור השינוי עד שיאשר את ההודעה ב"המשך".
   ⚠️ opacity ולא הסתרה — הגולש חייב להמשיך לראות את מה שכתוב. */
.ti-update-lock-off,
#tiWizard.is-update-lock .ti-sec-head[disabled],
#tiWizard.is-update-lock #tiCompare[disabled] { opacity: 0.5; cursor: not-allowed; }
/* (קישורי העריכה הישנים נמחקו בשלב ד; הנעילה חלה על שבבי הסרגל) */

/* "חזרה" בראש שלב הכיסויים — מעל התוכן, לא צמוד אליו */
.ti-actions-top { margin: 0 0 16px; }

/* ⚠️ כפתור רכישה כשחסרים פרטים: **לא אפור ולא מנוטרל** — כפתור מנוטרל
   בלי הסבר הוא סוג אחר של שתיקה, והגולש נוטש בלי לדעת שהוא במרחק קליק.
   הוא נשאר פעיל וצבעוני, בגוון משני, והלחיצה מכוונת לשלב החסר. */
/* ⚠️⚠️ ‎!important חובה: ל-.ti-buy יש color:#fff !important (כדי לנצח את
   ‎`a { color:#000 }` הגלובלי של האתר), והוא ניצח גם את הווריאנט הזה —
   טקסט לבן על רקע לבן, כפתור שנראה ריק עד שעוברים עליו עם העכבר. */
.ti-buy.is-pending {
    background: #fff !important;
    color: var(--ti-brand-dark) !important;
    border: 1.5px solid var(--ti-brand);
}

/* ⚠️ גם ל-.ti-buy:hover יש color:#fff !important — בלי הכלל הזה הכפתור
   חוזר להיות לבן-על-לבן ברגע שעוברים עליו. ב-hover הוא מתמלא בירוק,
   וכך הטקסט הלבן דווקא נכון. */
.ti-buy.is-pending:hover,
.ti-buy.is-pending:focus {
    background: var(--ti-brand) !important;
    color: #fff !important;
}

/* ---------- שתי התשובות לשאלה הרפואית ----------
   ⚠️ "אף אחד" ו"נוסע N" הן תשובות סותרות, ולכן ההפרדה מבנית ולא רק
   בצבע: שורה נפרדת, מפריד "או", וכותרת לרשימה. הבחנה בצבע בלבד אינה
   נגישה (WCAG 1.4.1), ולכן כל מצב נבחר נושא גם ✓. */
#tiHealth {
    display: block;   /* דורס את ה-flex של .ti-chips */
}

/* הבקשה לסמן נוסעים — מופיעה רק כשיש "כן" באחת השאלות */
.ti-health-ask { font-weight: 700; font-size: 0.9rem; margin: 0 0 8px; }

/* הערת התוצאה צמודה לצ'יפים שמעליה */
.ti-health-why { margin: 8px 0 0; }

/* ⚠️ נוסע יחיד נעול: ה"כן" כבר מייחס אותו ואין למי אחר לשייך. הוא נראה
   מסומן לגמרי (לא מעומעם) — זו עובדה נגזרת ולא שדה מנוטרל — אבל אינו
   מזמין לחיצה. ביטול היה יוצר "כן" בלי אף נוסע, מצב שחוסם בלי דרך לתקן. */
.ti-chip.is-locked { cursor: default; }

.ti-chip-mark {
    margin-inline-end: 6px;
    font-weight: 700;
}

/* ⚠️ נמחקו ב-2026-08-15 עם המעבר למודל חמש השאלות: .ti-health-or (המפריד
   "או"), .ti-health-none ו-.ti-chip-none (התשובה השלילית כצ'יפ), ו-
   .ti-health-list-label. אין יותר שתי תשובות סותרות שצריך להפריד ביניהן —
   השלילה היא "לא" בכל חמש השאלות, ורשימת הנוסעים פשוט אינה קיימת אז. */

.ti-health-pax {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* שאלת המצב הרפואי — הרשימה היא חלק מהשאלה ולכן בצבע ובגודל הטקסט הרגיל */
/* ⚠️ אותו משקל וגודל כמו .ti-subq ו-.ti-sec-t — פונטים אחידים בוויזארד
   (משוב רונן, 30/8). */
.ti-health-q { font-weight: 700; font-size: 0.9rem; margin: 0 0 8px; }

/* ⚠️ שורת הדיוק של שלב 2 — חלה על **כל** ההרחבות ולא על המצב הרפואי
   בלבד, ולכן היא בראש השלב ולא בתוך בלוק הבריאות. טקסט רגיל ולא
   "אזהרה": מסגרת או צבע התראה היו הופכים הסבר למשהו שצריך לדאוג ממנו. */
.ti-accuracy-note {
    font-size: 0.88rem;
    color: var(--ti-ink);
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ---- חמש שאלות כן/לא (2026-08-15) ----
   כל שורה: טקסט השאלה + זוג רדיו. במובייל הזוג יורד מתחת לשאלה, כי
   שאלה ארוכה + שני כפתורים באותה שורה מוחצת את הטקסט לעמודה של 2-3 מילים. */
.ti-medqs {
    margin: 0 0 12px;
    border: 1px solid var(--ti-line);
    border-radius: 10px;
    overflow: hidden;
}

.ti-medq {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* ⚠️⚠️ הריווח צומצם ל-7px (משוב רונן 30/8) אבל min-height 44 נשאר:
       הכפתור ירד ל-32px, והשורה היא זו שנושאת את שטח הנגיעה (WCAG 2.5.8).
       הורדת ה-min-height כאן שוברת נגישות בלי ששום בדיקה על הכפתור
       עצמו תתלונן. */
    padding: 7px 12px;
    min-height: 44px;
    font-size: 0.88rem;
    color: var(--ti-ink);
}

.ti-medq + .ti-medq,
.ti-medq + .ti-medq-note,
.ti-medq-note + .ti-medq { border-top: 1px solid var(--ti-line); }

/* שורת ה-ⓘ בתוך קופסת השאלות, צמודה לשאלה 1.
   ⚠️ רקע מעט שונה כדי שתיקרא כהערה ולא כשאלה נוספת בלי כפתורים. */
.ti-medq-note { padding: 5px 12px; background: var(--ti-soft, #fafafa); }

/* בתוך הקופסה ה-details לא צריך מסגרת משלו — הקופסה כבר תוחמת */
.ti-medq-note .ti-info { border: 0; margin: 0; background: none; }

/* ⭐ שורת קישור ולא כפתור-קופסה (משוב רונן, 30/8): המסגרת והרקע של
   ה-details הכלליים הפכו את ההערה לרכיב שלישי בתוך קופסת השאלות.
   ⚠️ נשאר <summary> בתוך <details> — נגיש במקלדת ובלי JS; רק המראה
   הוא של קישור. ה-+/− נשאר: הוא מה שאומר שיש כאן מה לפתוח. */
/* ⚠️⚠️ 44px שטח נגיעה, בלי לגדול על המסך: הבלוק הרפואי צומצם בכוונה
   (הכרעת רונן), ולכן הגובה מוחזר ל-44 והמרווח השלילי מחזיר את הצפיפות
   החזותית. WCAG 2.5.5 מודד את **שטח הלחיצה**, לא את הפיקסלים הצבועים. */
.ti-medq-note .ti-info-toggle {
    font-size: 0.82rem;
    padding: 4px 0;
    min-height: 44px;
    margin-block: -5px;
    background: none;
    border: 0;
    color: var(--ti-brand-dark);
    text-decoration: underline;
}

.ti-medq-t { flex: 1; }

.ti-medq-opts {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* ⚠️ ה-label נושא את 44px ולא ה-input (אותו דפוס כמו .ti-svc-filter)
   ⚠️ מסגרת זהובה ופנים שמנת (בחירת רונן): האפור הנייטרלי לא נקרא כפקד
   שמזמין לחיצה, והשאלות הרפואיות הן הפעולה החשובה ביותר בשלב.
   הזהב יושב על אותו ציר של רקע השמנת של הבלוק ולכן אינו צבע זר —
   בשונה מהירוק המותגי, ששמור למצב **נבחר** ולפעולות ראשיות. */
/* ⚠️ אותה פרופורציה של גלולה כמו כפתורי ההרחבות: גובה 36 ו-min-width
   שנגזר מהתוכן. 44px עם min-width קבוע נקרא כמלבן מעוגל. שטח הנגיעה
   מושלם ב-padding של שורת השאלה (.ti-medq). */
/* ⭐ שפת ההרחבות (הכרעת רונן, 30/8): מרובע-מעוגל ולא גלולה, גובה 32,
   וללא הזהב — הוא היה הצבע היחיד בוויזארד מחוץ לפלטה, ונבחר בשעתו כדי
   למשוך תשומת לב. מאז שהשאלות ישבו בשורת פנקס משלהן הן בולטות ממילא,
   והזהב רק סימן "כאן משהו אחר".
   ⚠️ הגובה 32 והשורה נושאת את ה-44 (ראו .ti-medq). */
.ti-yn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--ti-line);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    font-size: 0.85rem;
    user-select: none;
}

/* ⚠️⚠️ הרדיו מצויר מאפס (`appearance:none`) ולא מסתמך על `accent-color`.
   שתי סיבות, ושתיהן עלו מ-QA של רונן:
   1. הניסיון הקודם השתמש ב-`outline` כדי לצבוע את העיגול — ו-outline
      נמשך סביב **תיבת** האלמנט, כלומר ריבוע דק סביב עיגול. זה מה שרונן
      ראה. `border` על radio מובנה נלחם עם הרינדור של הדפדפן, ולכן
      הפתרון היחיד שנותן שליטה מלאה הוא לצייר את הפקד.
   2. `accent-color` צובע **רק** את המצב המסומן; העיגול הריק נשאר אפור
      ברירת-מחדל של המערכת ולא נקרא כפקד שמזמין לחיצה. */
/* ⚠️⚠️ הגבול של עיגול הרדיו הוא מה שמזהה את הפקד, ולכן הוא זה שחייב
   3:1 מול הרקע (WCAG 1.4.11) — לא מסגרת הכפתור, שהיא קישוט.
   ti-muted מול לבן = 4.5:1. שער L48 מודד את זה בפועל. */
.ti-yn input {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    flex: 0 0 auto;
    border: 1.5px solid var(--ti-muted);
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}

/* ⚠️⚠️ הנקודה הפנימית מצוירת ב-`background-image` ולא ב-`::before`.
   הניסיון עם pseudo נכשל בדפדפן: `:checked` אכן תפס (המסגרת התחלפה
   לירוק) אבל ה-`transform` על ה-`::before` נשאר `scale(0)` — פסאודו על
   פקד טופס הוא שטח לא-אחיד בין מנועים, כי הוא אלמנט מוחלף.
   radial-gradient מצייר על האלמנט עצמו ולכן חסין לזה לגמרי. */
.ti-yn input:checked {
    border-color: var(--ti-brand);
    background-image: radial-gradient(circle at center,
        var(--ti-brand) 0 4px, transparent 4px);
}

/* ⚠️ הסימון אינו בצבע בלבד: הנקודה המלאה היא הסמן הצורני (WCAG 1.4.1) */
.ti-yn.is-on {
    border-color: var(--ti-brand);
    background: var(--ti-brand-light);
    color: var(--ti-brand-dark);
    font-weight: 700;
}

/* מסגרת מובחנת גם בריחוף ובפוקוס מקלדת */
@media (hover: hover) and (pointer: fine) {
    .ti-yn:hover { border-color: var(--ti-brand); }
}
.ti-yn input:focus-visible { outline: 2px solid var(--ti-brand); outline-offset: 2px; }

@media (max-width: 560px) {
    .ti-medq { flex-direction: column; align-items: stretch; gap: 8px; }
    .ti-medq-opts { justify-content: flex-start; }
}

/* השאלות שטרם נענו מסומנות כשנחסם המעבר */
.ti-medq.is-miss { background: #fdecec; }

/* הערת הגיל המבוגר — מידע, לא שגיאה: ענבר ולא אדום */
/* (.ti-senior-note נמחקה ב-31/8 עם הערת גיל 75+) */

.ti-health.is-miss {
    border-color: var(--ti-danger);
    box-shadow: 0 0 0 1px var(--ti-danger);
}

.ti-traveler input.is-bad {
    border-color: var(--ti-danger);
    border-style: solid;
    box-shadow: 0 0 0 1px var(--ti-danger);
}

/* ---------- פקד מספר הנוסעים (stepper) ----------
   מחליף את "+ הוספת נוסע": שם המשתמש היה צריך לגלות את מספר הנוסעים
   בלחיצות חוזרות, וכאן הוא פשוט אומר אותו. שדות הגיל נגזרים מהמספר. */
.ti-paxpicker {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--ti-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.ti-pax-step {
    background: transparent;
    border: none;
    color: var(--ti-brand);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;   /* tap target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ti-pax-step:hover:not(:disabled) {
    background: var(--ti-brand-light);
}

/* בקצוות (1 ו-10) הכפתור מנוטרל בפועל ע"י ה-JS — כפתור שנראה פעיל ולא
   עושה כלום נקרא כתקלה. ההסבר נמסר ב-#tiPaxNote שמתחלף איתו. */
.ti-pax-step:disabled {
    color: var(--ti-muted);
    cursor: not-allowed;
    opacity: .5;
}

.ti-pax-count {
    width: 56px;
    min-height: 44px;   /* tap target */
    text-align: center;
    border: none;
    border-inline: 1px solid var(--ti-line);
    border-radius: 0;
    padding: 4px 2px;
    font-size: 1rem;
    font-weight: 700;
    /* ⚠️ הספינר המובנה של הדפדפן מצטופף ליד כפתורי ה-±‎ ומייצר שני
       מנגנוני הגדלה זה לצד זה. הכפתורים שלנו הם הפקד. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.ti-pax-count::-webkit-outer-spin-button,
.ti-pax-count::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- כפתורים ---------- */
.ti-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* ⭐ בלי "סיום" מתחת להודעת שינוי הגיל (רונן 10/9/26). "סיום" הפעיל נמצא
   בתחתית הפנקס, מתחת לשורת ההרחבות. המחלקה נקבעת ב-lockRowActions, רק
   בעריכה מסרגל התוצאות ורק בשורה שבה מוצגת ההודעה. */
.ti-actions.is-hidden-by-notice { display: none; }
/* ⚠️ גם כפתור ההמשך שבשורת הימים (דסקטופ). 0,3,0 — גובר על כלל התצוגה
   שלו בתוך ה-media query, בלי תלות בסדר הכללים בקובץ. */
.ti-daysfield .ti-btn-next--inrow.is-hidden-by-notice { display: none; }

.ti-btn {
    background: var(--ti-brand);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 28px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
}

.ti-btn:hover {
    background: var(--ti-brand-dark);
    color: #fff;
}

.ti-btn-sec {
    background: #fff;
    color: var(--ti-brand);
    border: 1.5px solid var(--ti-brand);
}

.ti-btn-sec:hover {
    background: var(--ti-brand-light);
    color: var(--ti-brand-dark);
}

.ti-foot-note {
    font-size: 0.78rem;
    color: var(--ti-muted);
}

/* ---------- צ'יפים ---------- */
.ti-covgroup {
    margin-bottom: 18px;
}

.ti-covgroup-title {
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.ti-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ti-chip {
    border: 1.5px solid var(--ti-line);
    border-radius: 24px;
    padding: 10px 18px;
    background: #fff;
    cursor: pointer;
    font-size: 0.88rem;
    min-height: 44px;
    color: inherit;
}

.ti-chip.is-sel {
    border-color: var(--ti-brand);
    background: var(--ti-brand-light);
    font-weight: 700;
    color: var(--ti-brand-dark);
}

/* ⚠️ שמנת ולא ענבר (2026-08-15, בחירת רונן): הענבר הקודם (#fdf8ec על
   #e7d9b8) לא השתלב בפלטת הירוק-אפור של הדף ומשך תשומת לב כמו אזהרה.
   הבלוק צריך להיות **מובחן** משאר ההרחבות (הוא חוסם את המעבר) אבל לא
   להיקרא כהתראה. */
/* ⚠️ קופסת השמנת ירדה (משוב רונן, 30/8): הבלוק יושב בתוך שורת פנקס
   שכבר ממוסגרת, ומסגרת בתוך מסגרת + גוון חם שאינו בפלטה הפכו אותו
   לאלמנט הזר והגדול ביותר בוויזארד. */
.ti-health { margin-top: 2px; }

.ti-health p {
    margin: 6px 0 10px;
}

/* ---------- ⓘ "תרופה קבועה אינה בהכרח מצב רפואי קיים" ----------
   <details> ולא tooltip: עובד בלי JS, נגיש במקלדת, ובמובייל הוא נפתח
   במקום להיעלם בהובר. הרשימה ארוכה מכדי להיות tooltip ממילא. */
.ti-info {
    margin-top: 10px;
    border-top: 1px dashed #e0d3b3;
    padding-top: 6px;
}

/* ⚠️ הכותרת נראתה כטקסט ולא כפקד. עכשיו היא קופסה עם רקע, מסגרת
   וסימן +/− מתחלף — אותה שפה של האקורדיון למעלה. */
.ti-info-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;   /* tap target */
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ti-brand-dark);
    list-style: none;
    background: var(--ti-brand-light);
    border: 1px solid var(--ti-line);
    border-radius: 10px;
    padding: 8px 12px;
}

.ti-info-toggle:hover {
    border-color: var(--ti-brand);
}

/* הסימן בקצה הימני, כמו בכותרות האקורדיון */
/* ⚠️ הסימן הוא ::before ויושב **ראשון**, כלומר בקצה הימני ב-RTL.
   קודם הוא היה ::after עם `margin-inline-start:auto`, מה שדחף אותו
   לקצה השמאלי. זה בדיוק הכלל שכבר הוכרע עבור סעיפי האקורדיון ונאכף
   ב-L25b ("בעברית העין נמשכת לימין, וסמן בקצה השמאלי לא נקרא") —
   ה-ⓘ פשוט לא יושר אליו עד 2026-08-16.
   ⚠️ רוחב קבוע: בלי זה "+" ו-"−" רחבים שונה והכותרת קופצת בפתיחה. */
.ti-info-toggle::before {
    content: "+";
    flex: 0 0 auto;
    width: 14px;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--ti-brand);
}

.ti-info[open] .ti-info-toggle::before { content: "\2212"; }

/* חץ ברירת המחדל של Safari/Chrome מופיע בצד הלא נכון ב-RTL */
.ti-info-toggle::-webkit-details-marker {
    display: none;
}

.ti-info-mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ti-brand);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ti-info-body {
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--ti-ink);
    padding-bottom: 4px;
}

.ti-info-body p {
    margin: 0 0 8px;
}

.ti-info-body ul {
    margin: 0 0 10px;
    padding-inline-start: 20px;
}

.ti-info-note {
    color: var(--ti-muted);
}

.ti-step3-text {
    margin: 0;
    color: var(--ti-muted);
}

/* ---------- פריסת תוצאות ---------- */
.ti-res-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

/* ⚠️ שלב ד: הסיידבר (tiEditBox) וכללי שתי-העמודות נמחקו — התוצאות
   ברוחב מלא, והעריכה עברה לסרגל הדביק. */

/* ---------- הסרגל הדביק (שלב ד) ----------
   דפוס Booking/Skyscanner: סיכום החיפוש נשאר צמוד לראש המסך לאורך כל
   התוצאות, ולחיצה על פרט פותחת אותו לעריכה — בלי גלילה חזרה, שהיא
   נקודת נטישה מוכרת. עליון גם במובייל (הכרעת רונן): תחתון מתנגש עם
   כפתורי הרכישה. */
.ti-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    background: #fff;
    border: 1px solid var(--ti-line);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 8px rgba(20, 40, 30, 0.08);
    padding: 8px 12px;
    margin: 0 0 14px;
}
.ti-bar[hidden] { display: none; }
/* מסגרת האשף — נסתרת במצב החשוף (applyMode), כשהפנקס מתקפל לסרגל */
#tiWizard[hidden] { display: none; }

/* ⭐ "סיום" אחד בכל רגע בעריכה מהסרגל (syncFinishButtons, רונן 11/9/26):
   כשלשורה הפתוחה יש "סיום" משלה, זה שבתחתית הפנקס מוסתר. */
.ti-acc-foot .ti-actions.is-dup-hidden { display: none; }

/* ⭐ "סיום" צף — מובייל בלבד, ורק כשהכפתור האמיתי מחוץ למסך (syncFloatFinish) */
.ti-float-finish {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -2px 10px rgba(20, 40, 30, 0.12);
}
.ti-float-finish[hidden] { display: none; }
.ti-float-finish .ti-btn {
    width: 100%;
    min-height: 44px;   /* tap target */
    text-align: center;
}
@media (min-width: 768px) {
    .ti-float-finish { display: none !important; }
}

.ti-bar-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--ti-line);
    border-radius: 999px;
    background: var(--ti-brand-light);
    color: var(--ti-brand-dark);
    font: inherit;
    font-size: 0.82rem;
    padding: 6px 12px;
    /* ⚠️ 44 — יעד מגע (שער T1) */
    min-height: 44px;
    cursor: pointer;
}
.ti-bar-chip b { font-weight: 700; }

/* ⭐ נוסח ארוך בדסקטופ, קצר במובייל (renderBar, רונן 10/9/26) */
.ti-bar-short { display: none; }
@media (max-width: 767px) {
    .ti-bar-long { display: none; }
    .ti-bar-short { display: inline; }
    .ti-bar { gap: 6px; padding: 8px 10px; }
    .ti-bar-chip { padding: 0 10px; gap: 3px; }
}
.ti-bar-chip .ti-bar-pen { color: var(--ti-muted); font-weight: 400; }
.ti-bar-chip[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
    .ti-bar-chip:hover { border-color: var(--ti-brand); }
}

/* כותרת מצב המשוערים — מעל התוצאות המעומעמות בלבד */
.ti-est-head {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ti-brand-dark);
    margin: 0 0 10px;
}
.ti-est-head[hidden] { display: none; }

/* ---------- עמעום התוצאות (שלב ד) ----------
   ⚠️ opacity ולא הסתרה — "נוכחות בלי תחרות": המחירים החיים הם הטיזר
   שמושך להשלים. ה-inert (ב-JS) מוציא את התוכן מהמקלדת ומקורא המסך;
   לחיצה על האזור מנתבת לפער החסר (אישור רונן 31/8) — לא פיקסלים מתים.
   ⚠️ בלי transition — חיתוך נקי, כמו כל המעברים (הכרעת 30/8). */
#tiResultsSection.is-dim .ti-res-layout { opacity: 0.45; }
#tiResultsSection.is-dim { cursor: pointer; }

/* ⭐ הערת הטבה שהוחלה: קטנה ומושתקת, צמודה למחיר שהיא מסבירה.
   ⚠️ לא בסגנון האזהרה (.ti-warn): אזהרה היא סייג, וזו בשורה טובה —
   ובעיקר, אזהרה בולטת ליד מחיר זול נקראת כאילו משהו לא בסדר בו. */
.ti-benefit-note {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--ti-muted);
    margin: 4px 0 0;
}

.ti-summary {
    font-size: 0.85rem;
    color: var(--ti-muted);
    margin-bottom: 12px;
}

/* הפרמטרים המודגשים בסיכום — הגולש סורק אותם כאימות של מה שביקש */
.ti-summary b {
    color: var(--ti-ink);
    font-weight: 700;
}

/* ⚠️ הכלל המשותף עם .ti-sec-err קובע margin: 12px 0 0 — כלומר רווח
   **מעל** ואפס מתחת, והקופסה האדומה הייתה נדבקת לסרגל המיון שמתחתיה.
   ‎.ti-summary.is-error‎ הוא 0,2,0 ולכן גובר על שני הכללים. */
.ti-summary.is-error { margin: 0 0 12px; }

/* מעבר רך בעדכון תוצאות חי (מוחלף ע"י ה-JS בכל רינדור) */
.ti-results-fade {
    animation: tiResultsFade .3s ease;
}

@keyframes tiResultsFade {
    from { opacity: .35; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* ---------- כרטיס תוצאה ---------- */
.ti-result-card {
    background: #fff;
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    padding: 18px;
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    position: relative;
}

@media (min-width: 768px) {
    .ti-result-card {
        grid-template-columns: 130px 1fr 190px;
    }
}

/* בדסקטופ רחב: עמודת המחיר והלוגו מקבלות אוויר, ורוב התוספת הולכת
   לעמודת האמצע (ההדגשים) — שם הטקסט נשבר לשלוש שורות במקום שתיים. */
@media (min-width: 1200px) {
    .ti-result-card {
        grid-template-columns: 150px 1fr 220px;
        padding: 20px 22px;
    }
}

/* ---------- גבול ההצעות החלקיות (8/9/26) ----------
   רונן: "למה פספורטכארד מוצגת בתוצאות שמתאימות לנסיעה". המיון כבר הוריד
   אותה לתחתית, אבל CoversAllRequested לא היה מיוצג בשום צורה ב-UI —
   ולכן כרטיס שחסר בו כיסוי נראה כמו כל תוצאה אחרת. סדר לבדו אינו קיבוץ.
   ⚠️ ענבר ולא אדום: זו אינה שגיאה אלא הסתייגות, והאדום שמור לאזהרות
   שבתוך הכרטיס עצמו (.ti-warn / .ti-uw-alert) — שניים באותו גוון היו
   נקראים כרשימה אחת. */
.ti-partial-sep {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 22px 0 14px;
    padding: 10px 14px;
    border-top: 2px solid var(--ti-value);
    background: #fdf6e8;
    border-radius: 0 0 8px 8px;
}

.ti-partial-sep b {
    font-size: 0.95rem;
    color: var(--ti-value-text);
}

.ti-partial-sep span {
    font-size: 0.82rem;
    color: var(--ti-muted);
}

/* הכרטיס עצמו — מושתק, כדי שההפרדה תחזיק גם אחרי שגוללים מעבר לקו.
   ⚠️ בלי אפקט על הטקסט או על המחיר: הם עדיין נתונים אמיתיים שהגולש
   משווה. רק המסגרת והרקע אומרים "קבוצה אחרת". */
.ti-result-card.is-partial {
    border-color: #e6dcc4;
    background: #fdfcf9;
}

/* ---------- תגי הכרטיס ----------
   שלושה תגים, צבע נבדל לכל אחד, תג אחד לכל היותר לכרטיס (נאכף ב-Presenter).
   ⚠️ המסגרת המלאה שמורה ל-"מחיר ושירות מובילים" ולא לזול ביותר: בדפי השוואה
   מובילים ההבלטה החזקה ביותר היא על ה-value pick, ובביטוח נסיעות רמת השירות
   אינה פחות חשובה מהמחיר. הזול נשאר עם תג — העוגן נשמר, בעוצמה נמוכה יותר. */
.ti-result-card.is-value {
    border: 2px solid var(--ti-value);
    box-shadow: 0 2px 10px rgba(138, 98, 16, .14);
}

/* ---------- hover בדסקטופ ----------
   הכרטיס "עונה" למצביע: הגבהה קלה + צל. זה מה שמפריד כרטיס מכרטיס כשהצבע
   ירד לפסטל, ובלי להוסיף שום צבע חדש.
   ⚠️ `@media (hover:hover)` בלבד — במסך מגע דפדפנים מדביקים את מצב ה-hover
   אחרי נגיעה, והכרטיס נשאר "מורם" עד שנוגעים במקום אחר.
   ⚠️ `prefers-reduced-motion` מבטל את התזוזה (התנועה, לא הצל). */
@media (hover: hover) and (pointer: fine) {
    .ti-result-card {
        transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    }

    .ti-result-card:hover {
        box-shadow: 0 6px 18px rgba(31, 45, 42, .12);
        transform: translateY(-2px);
        border-color: #c9d6d1;
    }

    /* לכרטיס מסומן יש כבר מסגרת צבעונית — לא דורסים אותה בהובר */
    .ti-result-card.is-value:hover,
    .ti-sorted-price .ti-result-card.is-price:hover,
    .ti-sorted-service .ti-result-card.is-svc:hover {
        border-color: inherit;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ti-result-card,
    .ti-result-card:hover {
        transition: box-shadow .15s ease;
        transform: none;
    }
}

/* ---------- ההדגשה עוקבת אחרי המיון ----------
   הערת רונן: במיון לפי רמת שירות / משוקלל "הכרטיסים המובילים לא נצבעו".
   המנצח של המיון הפעיל מקבל מסגרת מלאה בצבעו; ה-container נושא
   .ti-sorted-{price|service|value} (ב-SSR מהשרת, בעדכון חי מ-syncSortClass).
   המשולב ממוסגר תמיד (ה-value pick של הדף); הזול והמדורג — רק כשהם
   המנצחים של המיון הנוכחי, אחרת תג בלבד. */
.ti-sorted-price .ti-result-card.is-price {
    border: 2px solid var(--ti-brand);
    box-shadow: 0 2px 10px rgba(23, 118, 90, .12);
}

.ti-sorted-service .ti-result-card.is-svc {
    border: 2px solid var(--ti-svc-blue);
    box-shadow: 0 2px 10px rgba(29, 79, 145, .12);
}

.ti-badge {
    position: absolute;
    top: -12px;
    right: 18px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 12px;
    padding: 3px 12px;
}

.ti-badge-price { background: var(--ti-brand); }
.ti-badge-service { background: var(--ti-svc-blue); }
.ti-badge-value { background: var(--ti-value); }

.ti-card-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.ti-card-logo img {
    max-width: 106px;
    height: auto;
}

/* שם המסלול = מידע שמשפיע על החלטה (פלטינום מול LOW COST), לא כיתוב קטן.
   הקהל כולל גילאי 70+ — לא יורדים מ-15px. המחיר (27px) נשאר הדומיננטי. */
.ti-maslul {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--ti-ink);
}

/* ============================================================================
   רמת השירות (מדד השירות של רשות שוק ההון)
   ----------------------------------------------------------------------------
   צ'יפ ציון ולא כוכבים: כוכבים מסמנים דירוג גולשים, וזה ציון מתודולוגי של
   רגולטור. הרצועות של הטבלה הרשמית נשמרות — אבל בפסטל, ראה הערה למטה.
   ============================================================================ */
.ti-svc {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* הוגדל בסבב QA: בגודל הקודם (52px / ציון 1rem) הצ'יפ כמעט לא נקלט,
       ורמת השירות היא בדיוק מה שאמור להתחרות במחיר על תשומת הלב. */
    min-width: 64px;
    padding: 6px 10px;
    margin-top: 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    line-height: 1.15;
}

.ti-svc b { font-size: 1.3rem; font-weight: 800; }
.ti-svc small { font-size: .68rem; opacity: .9; white-space: nowrap; }

/* ⚠️ פסטל, לא רקע מלא. משוב משתמש: "מספר רב של צבעים וקשה להבחין
   בכרטיסים" — והשורש היה כאן: **כל** שבעת הכרטיסים נשאו צ'יפ ברקע רווי,
   וכשהכול צבעוני שום דבר לא בולט. רקע בהיר + טקסט כהה שומר על ארבע
   הרצועות של הרגולטור וקורא היטב, בלי להתחרות בתגים ובמסגרות.
   ניגודיות הטקסט נמדדה בדפדפן: 6.49–7.03 בכל ארבע הרצועות (AA בנוחות). */
.ti-svc-excellent { background: #e3f3ea; border-color: #b9e0cc; color: #16613f; }
.ti-svc-good { background: #edf5e4; border-color: #cfe3b8; color: #3c5a25; }
.ti-svc-mid { background: #faf1df; border-color: #ecd9b2; color: #6b5312; }
.ti-svc-low { background: #f9e8e6; border-color: #eac5c1; color: #8a2f28; }

/* --- שורת העובדה שמוכיחה את התג ---
   התג טוען, השורה מוכיחה. ⚠️ טקסט צבעוני בלבד — הרקע והמסגרת ירדו בליטוש
   הצבעים: הן היו קופסה שלישית על כרטיס שכבר נושא תג ומסגרת, והוסיפו רעש
   בלי להוסיף מידע. הגוון תואם לתג (ענבר למשולב, כחול לרמת שירות). */
.ti-value-note {
    margin: 8px 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ti-value-text);
    padding: 0;
}

.ti-value-note-svc {
    color: var(--ti-svc-blue);
}

/* קישור ההסבר בסרגל המיון — מוביל לשאלה ב-FAQ */
.ti-svc-explain {
    font-size: .8rem;
    color: var(--ti-svc-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;   /* tap target */
    padding: 0 6px;
}

.ti-svc-explain:hover { text-decoration: underline; color: var(--ti-svc-blue); }

/* --- סרגל מיון וסינון --- */
/* ⚠️ ה-badge "המחיר הזול ביותר" יושב ב-top:-12px ולכן בולע 12px מהמרווח —
   ב-margin-bottom:12px הכפתורים נגעו בכרטיס הראשון. 24px משאיר 12px בפועל. */
.ti-sortbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.ti-sortbar-label {
    font-size: .82rem;
    color: var(--ti-muted);
    font-weight: 700;
}

.ti-sort-btn {
    border: 1px solid var(--ti-line);
    background: #fff;
    color: var(--ti-ink);
    border-radius: 22px;
    padding: 7px 16px;
    font-size: .83rem;
    cursor: pointer;
    min-height: 44px;   /* tap target */
}

.ti-sort-btn.is-on {
    background: var(--ti-brand-light);
    border-color: var(--ti-brand);
    color: var(--ti-brand-dark);
    font-weight: 700;
}

/* ה-label הוא שטח הלחיצה (מקיף גם את הטקסט), ולכן הוא שנושא את 44px */
.ti-svc-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--ti-muted);
    cursor: pointer;
    margin-inline-start: 4px;
    padding: 0 6px;
    min-height: 44px;   /* tap target */
}

/* תיבת הסימון עצמה — 16px היה קטן מדי גם לעין וגם לאצבע */
.ti-svc-filter input {
    accent-color: var(--ti-brand);
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
}

/* קבוצת כפתורי המיון — בדסקטופ שקופה לפריסה (אותו מראה כמו לפני 10/9/26) */
.ti-sort-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* סימן השאלה — רק במובייל; בדסקטופ הטקסט המלא */
.ti-svc-q { display: none; }

/* ⭐⭐ סרגל המיון במובייל: שתי שורות ולא שלוש (רונן 10/9/26 — נמדד 148px
   ב-375px). הגופן לא הוקטן ("הוא ברור בגודל הנוכחי") וגם לא גובה המגע (44,
   AGENTS.md) — מה שירד הוא הריפוד הצידי והמסגרות הנפרדות:
     שורה 1 — "מיון:" + פקד מקוטע אחד (שלושת הכפתורים צמודים, מסגרת אחת);
     שורה 2 — "רק רמת שירות 90+" + "?" שמוביל להסבר.
   ⚠️ ה-"?" יושב ליד הסינון ולא בתוך הפקד המקוטע: קישור בתוך קבוצת כפתורים
   הוא פקד מקונן, והסינון הוא ממילא הפריט הנוסף שעוסק ברמת שירות. */
@media (max-width: 767px) {
    .ti-sortbar { gap: 4px 8px; }

    .ti-sort-seg {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 0;
        border: 1px solid var(--ti-line);
        border-radius: 22px;
        overflow: hidden;
        background: #fff;
    }

    .ti-sort-seg .ti-sort-btn {
        flex: 1 1 auto;
        border: 0;
        border-radius: 0;
        padding: 0 10px;
        white-space: nowrap;
        min-height: 44px;   /* tap target */
    }

    /* קו מפריד בין הקטעים; בכפתור הפעיל הרקע עצמו מפריד */
    .ti-sort-seg .ti-sort-btn + .ti-sort-btn { border-inline-start: 1px solid var(--ti-line); }
    .ti-sort-seg .ti-sort-btn.is-on { box-shadow: inset 0 0 0 1px var(--ti-brand); }

    .ti-svc-filter { margin-inline-start: 0; padding: 0 4px; }

    .ti-svc-explain {
        min-width: 44px;
        justify-content: center;
        padding: 0;
    }

    .ti-svc-q {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1.5px solid var(--ti-svc-blue);
        font-weight: 700;
        font-size: 0.85rem;
        line-height: 1;
    }

    /* מוסתר ויזואלית בלבד — נשאר השם הנגיש של הקישור */
    .ti-svc-explain-txt {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

.ti-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 6px;
    font-size: 0.86rem;
}

.ti-highlights li {
    padding: 3px 0;
    padding-inline-start: 20px;
    position: relative;
}

.ti-highlights li::before {
    content: "\2713";
    color: var(--ti-brand);
    font-weight: 800;
    position: absolute;
    inset-inline-start: 0;
}

.ti-perk {
    display: inline-block;
    background: #fdf3e3;
    color: var(--ti-gold);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    margin: 6px 0 0 6px;
}

/* ⚠️ אזהרות הכרטיס — מודגשות ובאדום החזק (הכרעת רונן 3/9/26). קודם הן היו
   0.78rem במשקל רגיל ובגוון הרך, ונקראו כמו הערת שוליים בדיוק במקום שבו הן
   מסבירות למה אי אפשר לקנות. */
.ti-warn {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ti-danger-strong);
    margin: 6px 0 0;
}

/* ⚠️⚠️ הערת החיתום כשהיא בראש הכרטיס — ההודעה הראשית של כרטיס חסום-גיל.
   הפס הצדדי הוא מה שמפריד אותה מהאזהרות שמתחתיה: שתיהן אדומות ומודגשות,
   ובלי סימן נוסף הן היו נקראות כרשימה אחת ארוכה. */
/* ⚠️ בלי פס צדדי (רונן 4/9/26). הוא נוסף 3/9 כדי להפריד את הערת החיתום
   מהאזהרות שמתחתיה, אבל ברקע הוורוד הוא כבר לא הפריד — הוא רק הוסיף קו
   אדום שלישי לאזור שכולו אדום. הרקע לבדו עושה את ההפרדה. */
.ti-uw-alert {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ti-danger-strong);
    background: #fdf0ef;
    border-radius: 6px;
    padding: 7px 10px;
    margin: 8px 0 0;
}

.ti-card-links {
    margin: 10px 0 0;
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* כפתור "פרטים נוספים" — קישור-כפתור עם שברון שמתהפך בפתיחה.
   ⚠️ השברון ב-CSS ולא ב-SVG בתוך הכפתור: הכפתור נבנה בשני מקומות
   (SSR ו-JS), וכל תו בתוכו הוא עוד דבר שצריך להישאר זהה ביניהם. */
.ti-details-toggle {
    background: none;
    border: none;
    color: var(--ti-brand);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ti-details-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}

.ti-details-toggle[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
}

.ti-details-toggle:hover { color: var(--ti-brand-dark); text-decoration: underline; }

.ti-policy {
    color: var(--ti-muted);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* פסקת הפתיחה של "מידע כללי" — בגוף הכרטיס, בגוון הטקסט הרגיל (לא
   מושתק: זה תיאור הביטוח, לא הערת שוליים). */
.ti-card-intro {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ti-ink);
    margin: 8px 0 0;
}

/* ---------- "פרטים נוספים" (מוקאפ ב׳, רונן 8/9/26) ----------
   הבלוק פרוש על כל רוחב הכרטיס, מתחת לשלוש העמודות. ה-HTML נבנה בשרת
   (TravelCardDetails) ומשמש גם את ה-SSR וגם את הרינדור החי.
   ⚠️ [hidden] — display:none חייב לנצח את ה-grid-column, אחרת הבלוק
   "הסגור" עדיין תופס שורה ריקה בגריד. */
.ti-breakdown {
    grid-column: 1 / -1;
    border-top: 1px dashed var(--ti-line);
    margin-top: 2px;
    padding-top: 10px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--ti-ink);
    display: grid;
    gap: 10px;
}

.ti-breakdown[hidden] { display: none; }

/* סעיף — <details> עם summary בסגנון ⓘ הקיים (+/− בקצה הימני) */
.ti-bd-sec {
    border: 1px solid var(--ti-line);
    border-radius: 10px;
    padding: 0 12px;
}

.ti-bd-h {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;   /* tap target */
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ti-brand-dark);
    cursor: pointer;
    list-style: none;
}

.ti-bd-h::-webkit-details-marker { display: none; }

/* ⚠️ הסימן ::before — ראשון, כלומר בקצה הימני ב-RTL (הכלל של L25b) */
.ti-bd-h::before {
    content: "+";
    flex: 0 0 auto;
    width: 14px;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--ti-brand);
}

.ti-bd-sec[open] > .ti-bd-h::before { content: "\2212"; }

/* כותרת סטטית (רשימת ההרחבות — הסעיף עצמו אינו מתקפל, ההרחבות כן) */
.ti-bd-h-static { cursor: default; }
.ti-bd-h-static::before { content: none; }

.ti-bd-body { padding: 0 0 12px; }
.ti-bd-body p { margin: 0 0 6px; white-space: pre-line; }
.ti-bd-body p:last-child { margin-bottom: 0; }

/* ---- 1. כיסויי הבסיס: תווית · ערך, שורה לכל שדה ---- */
.ti-cover { margin: 0; display: grid; gap: 0; }

.ti-cover-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px 14px;
    padding: 7px 0;
    border-top: 1px solid #edf3f0;
}

.ti-cover-row:first-child { border-top: none; padding-top: 0; }

.ti-cover-row dt {
    font-weight: 700;
    color: var(--ti-muted);
}

.ti-cover-row dd { margin: 0; }

@media (min-width: 768px) {
    .ti-cover-row { grid-template-columns: 150px 1fr; }
}

/* גבול הכיסוי הרפואי — שורה אחת מודגשת; המלל הארוך מקופל מתחתיה */
.ti-cover-sum { color: var(--ti-brand-dark); }

.ti-bd-sub { margin-top: 4px; }

.ti-bd-sub > summary {
    cursor: pointer;
    color: var(--ti-brand);
    font-weight: 700;
    font-size: 0.8rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
}

.ti-bd-sub > summary::-webkit-details-marker { display: none; }

.ti-bd-sub > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.ti-bd-sub[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

.ti-bd-subbody { padding: 2px 0 4px; }

/* ---- 2. ההרחבות שנבחרו: שורה להרחבה, נפתחת בנפרד ---- */
.ti-bd-exts { display: grid; gap: 6px; padding-bottom: 12px; }

.ti-bd-ext {
    border: 1px solid #e4ede9;
    border-radius: 8px;
    background: #fafcfb;
}

.ti-bd-ext > summary,
div.ti-bd-ext {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 9px 12px;
    min-height: 44px;   /* tap target */
    list-style: none;
}

.ti-bd-ext > summary { cursor: pointer; }
.ti-bd-ext > summary::-webkit-details-marker { display: none; }

/* השברון יושב אחרי המחיר, בקצה השמאלי — כמו בשורות ההרחבה של הוויזרד */
.ti-bd-ext > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--ti-muted);
    transform: translateY(-2px) rotate(45deg);
}

.ti-bd-ext[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.ti-bd-ext[open] { background: var(--ti-inc-bg); border-color: var(--ti-inc-line); }
.ti-bd-ext[open] > summary { border-bottom: 1px dashed var(--ti-inc-line); }
.ti-bd-ext > .ti-bd-body { padding: 8px 12px 10px; }

.ti-bd-ext-name {
    font-weight: 700;
    color: var(--ti-ext-name);
}

.ti-bd-ext-price {
    margin-inline-start: auto;
    font-weight: 700;
    color: var(--ti-ink);
    font-variant-numeric: tabular-nums;
}

/* הרחבה שהחברה אינה מוכרת — מושתקת; האזהרה בגוף הכרטיס כבר אמרה זאת */
.ti-bd-ext.is-missing { background: transparent; border-style: dashed; }
.ti-bd-ext.is-missing .ti-bd-ext-name { color: var(--ti-muted); font-weight: 400; }
.ti-bd-ext.is-missing .ti-bd-ext-price { color: var(--ti-muted); font-weight: 400; font-size: 0.8rem; }

/* גבול אחריות · השתתפות עצמית — שורת מטא קטנה לפני התיאור */
.ti-bd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: var(--ti-muted);
    font-size: 0.8rem;
}

.ti-bd-meta b { color: var(--ti-ink); }

/* ---- 3. עוד על הביטוח: צ'יפי ההטבות ואז שאר "מידע כללי" ---- */
.ti-bd-perks { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
.ti-bd-perks .ti-perk { margin: 0; }

/* ⚠️⚠️ רשימת הנוסעים גלויה תמיד (הכרעת רונן 3/9/26). היא ההקשר שהופך את
   שורות ההסבר למובנות, ולכן היא יושבת בגוף הכרטיס ולא מאחורי כפתור. */
/* ⚠️⚠️ ti-card-travelers ולא ti-travelers: השם השני כבר תפוס בוויזרד
   (#tiTravelers, גריד של שתי עמודות לשדות הגיל). כשנתתי לרשימה בכרטיס
   את אותו שם היא ירשה את הגריד, ושני נוסעים נחתו זה לצד זה בשורה אחת
   במקום זה מתחת לזה. נתפס רק אחרי שהמחיר קורב לתווית וההצמדה חשפה את
   הצירוף. ⚠️ block מפורש כדי שהשורות ייערמו גם אם ייווסף כלל אב. */
.ti-card-travelers {
    display: block;
    border-top: 1px dashed var(--ti-line);
    margin-top: 10px;
    padding-top: 8px;
    font-size: 0.82rem;
}

/* שורת נוסע שאין לו מחיר — מושתקת, כדי שהאדום יישאר על ההסבר עצמו. */
.ti-bd-row.is-noprice span:first-child { color: var(--ti-muted); }
.ti-bd-row.is-noprice span:last-child {
    color: var(--ti-muted);
    font-size: 0.78rem;
}

/* ⚠️⚠️ המחיר צמוד לנוסע שלו ולא נדחף לקצה (רונן 4/9/26).
   space-between מתח את השניים לשני קצוות הכרטיס הרחב, והמספר נחת רחוק
   מהשם שהוא שייך לו — אותה בעיה בדיוק שרונן תיאר קודם על "אין מחיר"
   ("המיקום שלה, בחלק השמאלי ביותר של המסגרת, מקשה על ההבנה").
   ⚠️ flex-start עם gap ולא רוחב קבוע: תוויות הנוסעים כמעט זהות באורכן
   ("נוסע/ת בגיל NN"), ולכן המחירים מיושרים בפועל בלי לקבע מידה. */
.ti-bd-row {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    padding: 3px 0;
}

.ti-bd-note {
    color: var(--ti-muted);
    margin: 6px 0 0;
    font-size: 0.78rem;
}

.ti-card-buy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 6px;
    border-top: 1px dashed var(--ti-line);
    padding-top: 12px;
}

@media (min-width: 768px) {
    .ti-card-buy {
        border-top: none;
        border-inline-start: 1px dashed var(--ti-line);
        padding-top: 0;
        padding-inline-start: 16px;
    }
}

/* מחיר מחירון לפני הנחת החברה — מוצג רק כשיש הנחה */
.ti-list-price {
    font-size: 0.82rem;
    color: var(--ti-muted);
    margin-bottom: 2px;
    /* המחיר הוא ביטוי LTR בתוך דף RTL — בלי זה סימן ה-$ נודד */
    direction: ltr;
    unicode-bidi: isolate;
    text-align: center;
}

.ti-disc-badge {
    display: inline-block;
    background: #fdf3e3;
    color: #b7791f;
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 700;
    font-size: 0.72rem;
    direction: rtl;
}

.ti-price {
    font-size: 1.7rem;
    font-weight: 800;
}

.ti-price small {
    display: block;
    font-size: 0.72rem;
    color: var(--ti-muted);
    font-weight: 400;
}

/* ⚠️ "אין הצעה" — נקרא כמחיר מבחינת מיקום ומבנה, אבל לא מתחזה למספר:
   גודל קטן יותר, משקל רגיל וצבע מושתק. אדום נשקל ונדחה — זו אינה שגיאה
   של הגולש אלא מגבלה של החברה, והכרטיס עדיין נושא מידע שימושי. */
.ti-price-none {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ti-muted);
}

.ti-buy {
    display: inline-block;
    background: var(--ti-brand);
    color: #fff !important;
    border-radius: 12px;
    padding: 12px 10px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    min-height: 44px;
}

.ti-buy:hover {
    background: var(--ti-brand-dark);
    color: #fff !important;
    text-decoration: none;
}

.ti-trust {
    font-size: 0.72rem;
    color: var(--ti-muted);
}

/* כל חצי-משפט נשאר שלם, כך שהשבירה נופלת על המפריד ולא משאירה
   מילה יתומה בשורה שנייה (נצפה במובייל בעמודה הצרה). */
.ti-trust span { white-space: nowrap; }

/* סעיף שאין לו תוכן ליעד הנוכחי (למשל עמוד יעד שטרם נכתב).
   ⚠️ CSS ולא Visible="false": אלמנט עם Visible="false" אינו נפלט ל-HTML
   כלל, וזו מלכודת "אלמנט שנעלם בשקט" שמתועדת ב-AGENTS.md. */
.ti-hidden-section {
    display: none;
}

.ti-no-results {
    border: 1px dashed var(--ti-line);
    border-radius: 12px;
    padding: 18px;
    color: var(--ti-muted);
}

.ti-loader {
    padding: 18px;
    text-align: center;
    color: var(--ti-muted);
}

/* ---------- דיסקליימר (דריסת compareTables.css) ---------- */
#main.ti-page-wide .SMdisclaimer {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    box-sizing: border-box;
    margin: 16px 0 20px !important;
    padding: 14px 18px !important;
    background: #f8fafb;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #6c757d;
}

#main.ti-page-wide .SMdisclaimer p {
    margin: 0 0 8px;
}

/* ---------- טיפים ---------- */
.ti-tips {
    margin: 0;
    padding-inline-start: 20px;
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ---------- FAQ — המראה של המאמרים (רונן 11/9/26) ----------
   הדפוס של SnP500IndexInvestmentGuide (css/modern-article.css): כל שאלה כרטיס
   לבן עם צל רך, ריבוע ירוק עם "+" בראשה, ורקע ירוק בהיר לשאלה הפתוחה.
   ⚠️ משוכפל ולא נטען מ-modern-article.css — אותו נימוק כמו בבלוק המחשבונים
   למטה: הקובץ קובע גם את רוחב #main ואת פריסת ‎.sm-modern-article‎, וטעינתו
   הייתה מזיזה את כל הדף. ⚠️ הצבעים מהפלטה של הדף (--ti-brand ‎#17765a‎ מול
   ‎#198754‎ במאמר) — הבדל שאינו נראה, והדף נשאר בגוון אחד. */
#faq-travel {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#faq-travel .faq-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#faq-travel .faq-question {
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    padding: 20px;
    padding-inline-start: 38px;   /* 20 + מרווח הריבוע מהשוליים, כמו במאמר */
    background: #fff;
    border-bottom: 1px solid #eee;
    min-height: 44px;
    transition: background-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    #faq-travel .faq-question:hover { background: #f5f5f5; }
}

#faq-travel .faq-question.active { background: var(--ti-brand-light); }

#faq-travel .faq-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--ti-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    transition: transform 0.3s ease;
}

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

#faq-travel .faq-text {
    flex: 1;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    /* ⚠️ במפורש, כמו במאמר: כלל גלובלי של ‎.supermarkerArticle‎ ממרכז */
    text-align: right;
}

#faq-travel .faq-answer {
    display: none;
    background: #fff;
}

#faq-travel .faq-answer.open {
    display: block;
}

#faq-travel .faq-answer p,
#faq-travel .faq-answer ul,
#faq-travel .faq-answer ol {
    margin: 0;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

/* ⚠️ ברשימה הריפוד הצדדי הוא גם המקום של התבליטים */
#faq-travel .faq-answer ul,
#faq-travel .faq-answer ol { padding-inline-start: 40px; }

@media (prefers-reduced-motion: reduce) {
    #faq-travel .faq-question,
    #faq-travel .faq-icon { transition: none; }
}

@media (max-width: 768px) {
    #faq-travel .faq-question { padding: 15px; padding-inline-start: 28px; gap: 13px; }
    #faq-travel .faq-icon { flex-basis: 25px; width: 25px; height: 25px; font-size: 16px; }
    #faq-travel .faq-text { font-size: 16px; }
    #faq-travel .faq-answer p,
    #faq-travel .faq-answer ul,
    #faq-travel .faq-answer ol { padding: 15px; }
    #faq-travel .faq-answer ul,
    #faq-travel .faq-answer ol { padding-inline-start: 32px; }
}

/* ⚠️⚠️ יישור לימין לתשובות (רונן 4/9/26). הן היו **ממורכזות**, וזה לא
   הגיע מהעיצוב של הדף אלא מכלל גלובלי ישן ב-cssSupermarker:
   `.supermarkerArticle div { text-align: center }` — שמרכז כל div בתוך
   מאמר, והתשובות הן div.

   ⚠️ העקיפה ממוקדת ל-#faq-travel ואינה נוגעת בכלל הגלובלי: הוא חל על
   25 דפים, ושינוי שלו כאן היה מזיז פריסות בדפים שלא נבדקו.
   ⚠️ גם הצאצאים מיושרים במפורש — הכלל הגלובלי תופס כל div מקונן, ולכן
   יישור ההורה לבדו לא היה מספיק. */
#faq-travel .faq-answer,
#faq-travel .faq-answer div,
#faq-travel .faq-answer p,
#faq-travel .faq-answer ul,
#faq-travel .faq-answer ol,
#faq-travel .faq-answer li {
    text-align: right;
}

/* ---------- רצועת סיום: מאמרים + מחשבונים ---------- */
.ti-footer-band {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 992px) {
    .ti-footer-band {
        grid-template-columns: 2fr 1fr;
    }
}

.ti-articles,
.ti-calcs {
    background: #fff;
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    padding: 16px;
}

.ti-articles-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 576px) {
    .ti-articles-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ti-articles-grid .article-item {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ti-articles-grid .article-image img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
}

.ti-articles-grid .article-text span {
    font-size: 0.85rem;
}

.ti-calcs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ti-calcs-list li {
    border-bottom: 1px dashed var(--ti-line);
}

.ti-calcs-list a {
    display: block;
    padding: 11px 0;
    font-size: 0.88rem;
    min-height: 44px;
}

/* ============================================================================
   סשן C — מסך המעבר וערכת הנסיעה
   ----------------------------------------------------------------------------
   ⚠️ CookieManager.ascx מגדיר גלובלית .modal-content{max-width:600px} — לכן
      המודל כאן בנוי ממחלקות ti-* בלבד ולא מ-.modal של Bootstrap.
   ⚠️ direction:rtl מפורש: המודל נשתל ב-body ועלול לא לרשת מה-wrapper.
   ============================================================================ */

.ti-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 35, 31, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1080;
    direction: rtl;
}

.ti-overlay[hidden] { display: none; }

.ti-modal {
    background: #fff;
    border-radius: 18px;
    padding: 26px 22px 20px;
    width: 100%;
    max-width: 540px;
    max-height: 92vh;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
    position: relative;
}

.ti-modal-close {
    position: absolute;
    inset-inline-end: 12px;
    top: 10px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ti-muted);
    cursor: pointer;
}

.ti-modal-close:hover { color: var(--ti-ink); }

/* שורת הפתיחה — חיסכון (כשנבחר הזול) או המסר החיובי של המסלול.
   טקסט חלק ולא כותרת ממוסגרת: היא תומכת, לא מתחרה בבלוק הזהות על
   הפיקסציה הראשונה. */
.ti-save-line {
    color: var(--ti-brand-dark);
    font-size: .85rem;
    font-weight: 700;
    margin: 0 0 14px;
}

.ti-hops {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}

.ti-hop {
    min-width: 92px;
    height: 52px;
    border: 1px solid var(--ti-line);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .8rem;
    background: #fafcfb;
    padding: 4px 8px;
}

.ti-hop img { max-width: 74px; max-height: 40px; }
.ti-hop-from { color: var(--ti-brand); }

.ti-hop-arrow {
    flex: 0 0 70px;
    height: 4px;
    background: var(--ti-line);
    border-radius: 2px;
    overflow: hidden;
}

/* משך המילוי נקבע ב-JS לפי אורך הספירה (AUTO_GO_SECONDS) — הפס הוא
   הוויזואליזציה של המעבר האוטומטי, ובהשהיה הוא קופא ברוחבו הנוכחי. */
.ti-hop-arrow i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--ti-brand);
}

/* --- בלוק הזהות — הגיבור של המסך ---------------------------------
   הירוק הממולא היחיד במסך. הכפתור ירד למתאר: המעבר אוטומטי ממילא,
   והדומיננטיות שלו היא שקברה את הזהות בגרסה הקודמת. */
.ti-agent {
    background: var(--ti-brand-light);
    border-radius: 14px;
    padding: 16px 14px;
    margin: 0 0 10px;
}

.ti-agent-lead {
    font-size: .85rem;
    color: var(--ti-muted);
    margin: 0 0 8px;
}

/* איור בלוק הזהות (SVG inline). height:auto עם viewBox — מתכוונן לרוחב
   בלי לשבור יחס. הקווים מוגדרים ב-SVG עצמו ולא כאן, כדי שהאיור יישאר
   יחידה אחת שאפשר להחליף בשורה אחת. */
.ti-agent-art {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto 6px;
}

/* ⚠️ קשירת הצבע היא מנגנון הזיהוי של המסך: השם, "Supermarker" ברצף
   הלוגואים (.ti-hop-from) וברכת הסיום (.ti-signoff) חולקים בדיוק את
   --ti-brand. העין מחברת מותג↔אדם בלי לקרוא מילה. אין לגוון אף אחד
   מהשלושה בנפרד — זה שובר את הקשר. */
.ti-agent-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ti-brand);
    margin: 0 0 3px;
}

.ti-agent-title {
    font-size: .85rem;
    color: var(--ti-muted);
    margin: 0;
}

/* כיתוב מיקרו במקום שורת ⓘ שלמה: חמש מילים שסוגרות את פונקציית הזיהוי
   בלי לדרוש עיבוד. מסך שנעלם אחרי 5 שניות לא סובל פסקת הסבר. */
.ti-agent-hint {
    font-size: .75rem;
    color: var(--ti-muted);
    margin: 7px 0 0;
}

/* כפתור מתאר: קיים לחסרי סבלנות בלבד — המעבר קורה גם בלעדיו */
.ti-go-btn {
    display: block;
    width: 100%;
    background: #fff;
    color: var(--ti-brand);
    border: 1.5px solid var(--ti-brand);
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    min-height: 48px;
}

.ti-go-btn:hover, .ti-go-btn:focus { background: var(--ti-brand-light); color: var(--ti-brand-dark); }

.ti-countdown {
    font-size: .78rem;
    color: var(--ti-muted);
    margin-top: 7px;
}

/* ברכת סיום — נימה חמה במקום זנב אינפורמטיבי (דפוס שוקה) */
.ti-signoff {
    color: var(--ti-brand);
    font-size: 1rem;
    font-weight: 800;
    margin: 14px 0 0;
}

/* בדסקטופ המודל גדל במתינות: נקרא ב-5 שניות, אבל נשאר "רגע מעבר"
   ולא "עמוד" — מעבר ל~600px הדחיפות נעלמת. */
@media (min-width: 768px) {
    .ti-modal { max-width: 600px; padding: 30px 28px 22px; }
    .ti-agent { padding: 20px 16px; }
    .ti-agent-art { max-width: 230px; }
    .ti-agent-name { font-size: 1.4rem; }
    .ti-agent-lead, .ti-agent-title { font-size: .9rem; }
    .ti-agent-hint { font-size: .8rem; }
    .ti-go-btn { font-size: 1.05rem; }
    .ti-signoff { font-size: 1.1rem; }
}

/* --- ערכת הנסיעה --- */
.ti-kit {
    border: 1px solid var(--ti-line);
    border-radius: 14px;
    padding: 14px;
    text-align: start;
    margin-top: 16px;
    background: #f6f9f8;
}

.ti-kit h4 {
    font-size: .95rem;
    font-weight: 800;
    margin: 0 0 9px;
}

.ti-kit h4 span { color: var(--ti-brand); }

.ti-kit ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ti-kit li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 6px 0;
    font-size: .85rem;
    line-height: 1.5;
}

.ti-kit-ic {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--ti-brand-light);
    color: var(--ti-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}

.ti-kit a { color: var(--ti-brand); font-weight: 700; }

/* מספרי טלפון: ביטוי LTR בתוך RTL — בלי בידוד הסימנים נודדים */
.ti-kit .ti-num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* .ti-applinks הוסר: קישורי החנויות ישבו ברשימת הערכה שבתוך המודל,
   והערכה עברה ל-TravelKit.aspx. הכללים נשארו יתומים (וגם הפרו 44px). */

/* --- שליחת הערכה במייל (ליד רך, שדה אחד) --- */
.ti-kit-mail { display: flex; gap: 7px; margin-top: 11px; }

.ti-kit-mail input[type="email"] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ti-line);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .9rem;
    min-height: 44px;
}

.ti-kit-mail button {
    background: #fff;
    color: var(--ti-brand);
    border: 1.5px solid var(--ti-brand);
    border-radius: 10px;
    padding: 8px 15px;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    min-height: 44px;
    white-space: nowrap;
}

.ti-kit-mail button:hover { background: var(--ti-brand-light); }
.ti-kit-mail button[disabled] { opacity: .6; cursor: default; }

/* honeypot — ⚠️ אסור left:-9999px: בדף RTL הקנבס מתרחב שמאלה והדף
   נהיה רחב ~10,000px (מוצג במובייל כ"דף ריק"). תבנית visually-hidden בלבד. */
.ti-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ti-kit-note { font-size: .78rem; margin-top: 7px; min-height: 1em; }
.ti-kit-note.ok { color: var(--ti-brand-dark); font-weight: 700; }
.ti-kit-note.err { color: var(--ti-danger); }

.ti-modal-legal {
    font-size: .7rem;
    color: var(--ti-muted);
    margin: 13px 0 0;
    line-height: 1.5;
}

/* --- רצועת ערכת הנסיעה בדף התוצאות (ערך מעבר למחיר) --- */
.ti-kit-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    border: 1px solid var(--ti-brand);
    background: var(--ti-brand-light);
    border-radius: var(--ti-radius);
    padding: 14px 16px;
    margin-top: 18px;
}

.ti-kit-teaser-txt { flex: 1 1 260px; }

.ti-kit-teaser-txt b {
    display: block;
    font-size: .95rem;
    color: var(--ti-brand-dark);
    margin-bottom: 3px;
}

.ti-kit-teaser-txt span {
    font-size: .83rem;
    color: var(--ti-muted);
    line-height: 1.5;
}

.ti-kit-teaser-link {
    background: var(--ti-brand);
    color: #fff;
    border-radius: 10px;
    padding: 11px 20px;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.ti-kit-teaser-link:hover, .ti-kit-teaser-link:focus {
    background: var(--ti-brand-dark);
    color: #fff;
}

/* שורת הערכה במודל — נפתחת בלשונית נפרדת ולכן שורדת את המעבר */
.ti-kit-line {
    font-size: .8rem;
    color: var(--ti-muted);
    margin: 12px 0 0;
    line-height: 1.5;
}

.ti-kit-line a { color: var(--ti-brand); font-weight: 700; }

/* --- TravelKit.aspx — עמוד הערכה --- */
/* ‏.ti-kit-page הוסרה בסשן D2: בלוק הערכה הוחלף בכרטיסים (.ti-kit-cards) */
.ti-kit-mailbox { margin-top: 18px; }

.ti-kit-mailbox-sub {
    font-size: .85rem;
    color: var(--ti-muted);
    margin: 0 0 4px;
}

.ti-kit-cta {
    max-width: 420px;
    text-align: center;
    margin: 6px 0 20px;
}

.ti-tips-section { margin: 22px 0; }

.ti-tips-list {
    margin: 0;
    padding-inline-start: 20px;
}

.ti-tips-list li {
    padding: 6px 0;
    font-size: .92rem;
    line-height: 1.6;
}

.ti-kit-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ti-kit-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--ti-line);
    border-radius: 20px;
    font-size: .85rem;
    color: var(--ti-brand);
    text-decoration: none;
}

.ti-kit-links a:hover { background: var(--ti-brand-light); }

@media (max-width: 575px) {
    .ti-modal { padding: 22px 16px 16px; max-height: 94vh; }
    .ti-kit-mail { flex-direction: column; }
    .ti-kit-mail button { width: 100%; }
    .ti-kit-cta { max-width: none; }
}

/* ============================================================
   שלב 2 — שדות ההרחבה (סשן T, 26/8/2026)
   שדה ימים, והרחבה מקוננת (פריט יקר ערך / כרטיסי בילוי).
   ============================================================ */

/* --- שדה "לכמה ימים מתוך הנסיעה?" --- */
.ti-ext-days { margin-top: 14px; }

.ti-num { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ti-num-btn {
    width: 38px; height: 38px;            /* ⚠️ 38px ולא פחות — יעד מגע (tap-target-check) */
    border: 1px solid var(--ti-line);
    background: #fff; border-radius: 8px;
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    color: var(--ti-ink);
}
.ti-num-btn:hover { border-color: var(--ti-green); }

.ti-num-in {
    width: 68px; height: 38px; text-align: center;
    border: 1px solid var(--ti-line); border-radius: 8px;
    font-size: 0.95rem; font-weight: 700; color: var(--ti-ink);
    /* ⚠️ החצים המובנים מוסתרים: הם צרים מדי לאצבע, ויש כפתורים משלנו */
    -moz-appearance: textfield;
}
.ti-num-in::-webkit-outer-spin-button,
.ti-num-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ti-num-note { font-size: 0.8rem; color: var(--ti-muted); }

/* ⭐ פתיחה/כיווץ של ההרחבה — סבב 3, לפי המוקאפ של רונן (10/9/26).
   כפתור **עם מסגרת** בקצה השמאלי של כותרת ההרחבה: "פרטים ואפשרויות" כשהיא
   סגורה, "הקטן תצוגה" כשהיא פתוחה, עם חץ. כפתור תאום בתחתית ההרחבה
   הפתוחה (.ti-ext-foldfoot), כדי שמי שגלל עד סוף הפרטים לא יחזור לראש.
   הגלגולים הקודמים: "כווץ" בתחתית בלבד (5/9) · חץ לבד בקצה (8/9, "קטן
   מידי... בקושי שמים אליו לב") · "הצג/סגור" כקישוט צמוד לשם (9/9).
   ⚠️ align-self:flex-start — מיושר לשורת השם ולא למרכז של שם+סיכום.
   ⚠️ החץ הוא בורדר מסובב ולא תו: תו (▲/▼) נופל לפונט מערכת ומשנה גובה
      שורה בין דפדפנים. */
.ti-ext-fold {
    flex: 0 0 auto;
    align-self: flex-start;
    display: none;   /* ⚠️ אין מה לפתוח בשורה שלא נבחרה — ראו has-content */
    align-items: center;
    gap: 10px;
    min-height: 44px;   /* tap target */
    padding: 8px 18px;
    border: 1.5px solid var(--ti-brand);
    border-radius: 10px;
    background: #fff;
    color: var(--ti-brand-dark);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.ti-ext.has-content .ti-ext-fold { display: inline-flex; }
.ti-ext-fold:hover { background: var(--ti-brand-light); }

/* הכפתור התחתון — מופרד מהפרטים בקו, ובאותו קצה (שמאל) כמו העליון */
.ti-ext-foldfoot {
    display: flex;
    justify-content: flex-end;   /* ב-RTL: קצה שמאל */
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ti-line);
}
.ti-ext-foldfoot .ti-ext-fold { align-self: auto; }

.ti-ext-fold::after {
    content: "";
    width: 8px;
    height: 8px;
    border-inline-end: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);   /* סגור ⇒ מצביע מטה */
    transition: transform .15s ease;
}

.ti-ext-fold[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);  /* פתוח ⇒ מצביע מעלה */
}

@media (prefers-reduced-motion: reduce) {
    .ti-ext-fold::after { transition: none; }
}

/* ---------- הודעת סינון רמת השירות (9/9/26) ----------
   רונן סימן "רק 90+", קיבל רשימה בלי אף הצעה מלאה, ולא היה לו איך לדעת
   שהחברות שכן מציעות נמצאות מתחת לרף ולכן סוננו בשקט.
   ⚠️ ענבר ולא אדום: זו אינה שגיאה אלא תוצאה של בחירה שהגולש עשה, והוא
   יכול לחזור בו בלחיצה אחת. */
.ti-svc-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 1px solid var(--ti-value);
    border-radius: 10px;
    background: #fdf6e8;
    color: var(--ti-value-text);
    font-size: 0.88rem;
    font-weight: 600;
}

.ti-svc-notice-btn {
    margin-inline-start: auto;
    min-height: 44px;   /* tap target (WCAG 2.5.8) — שער T1 */
    padding: 8px 16px;
    border: 1px solid var(--ti-value);
    border-radius: 999px;
    background: #fff;
    color: var(--ti-value-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ti-svc-notice-btn:hover { background: var(--ti-value); color: #fff; }

/* --- הרחבה מקוננת --- */
/* ⚠️ מסגרת ורקע ולא רק מרווח: בלעדיהם האזור נקרא כהמשך של ההרחבה
   הראשית, והגולש לא מבחין שמדובר בכיסוי נוסף בתשלום. */
.ti-ext-nest {
    margin-top: 16px; padding: 14px;
    border: 1px solid var(--ti-line); border-radius: 10px;
    background: var(--ti-soft, #f7f9f8);
}

.ti-ext-nest-t {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ti-muted);
    letter-spacing: 0.02em;
}

/* ⭐⭐ רשימת פריטים עם צ'ק-בוקס לכל אחד (28/8/2026, חלופה א).
   הבורר no/both/only ירד: הוא הניח ילד יחיד, ו"שתי ההרחבות" הפך לשקר
   כשנכנסו ארבעה. הפריטים עצמאיים זה מזה וממנו — ולכן `only` מיותר:
   טלפון בלי כבודה = מסמנים טלפון ומבטלים כבודה. */
.ti-nest-item { border-top: 1px dashed var(--ti-line); }
.ti-nest-item:first-of-type { border-top: 0; }

.ti-nest-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
}

/* ⚠️ צ'ק-בוקס אמיתי ולא כפתור מסוגנן: נגיש מהמקלדת, מוכרז נכון לקורא
   מסך, ומצבו נקרא גם בלי CSS. מוגדל ל-21px — ברירת המחדל (13px) קטנה
   מדי לאצבע. */
.ti-nest-check {
    width: 21px;
    height: 21px;
    margin: 2px 0 0;
    flex: none;
    accent-color: var(--ti-brand);
    cursor: pointer;
}

.ti-nest-label { flex: 1; min-width: 0; cursor: pointer; }

.ti-nest-name { display: block; font-weight: 700; font-size: 0.92rem; }

/* ⚠️ תווית רק לחריג (פריט יקר ערך): תווית "עצמאית" על שלושת האחרים
   הייתה רעש שמטביע דווקא את מה שצריך לבלוט. העצמאות כתובה במלל. */
.ti-nest-badge {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--ti-gold-soft);
    color: var(--ti-gold);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

/* קצוץ לשתי שורות כמו בכרטיסים הראשיים — הטקסט המלא נפתח בסימון */
.ti-nest-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 1px;
    font-size: 0.82rem;
    color: var(--ti-muted);
    white-space: pre-line;
}

.ti-nest-item.is-on .ti-nest-sub { -webkit-line-clamp: initial; overflow: visible; }

/* ⭐ ההמלצה בפריט מקונן (12/9/26) — אותו גוון כמו .ti-ext-recline בהרחבה
   רגילה, בגודל של שורת ההסבר שמתחתיה */
.ti-nest-rec {
    display: block;
    margin-top: 2px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ti-brand-dark);
    white-space: pre-line;
}
.ti-nest-rec p { margin: 0; display: inline; }

/* ⚠️ מוזח ליישור עם הטקסט ולא עם הצ'ק-בוקס */
.ti-nest-more { padding: 0 31px 10px 0; }
.ti-nest-more[hidden] { display: none; }
/* ============================================================================
   TravelKit.aspx — פריסת שתי עמודות (סשן D2)
   ⚠️ הכל תחת #main.ti-kit-page-v2, שנוספת ב-JS יחד עם ti-page-wide. עד סשן D2
   הדף שם את ti-page-wide על div פנימי, ולכן לא קיבל אף כלל של האפיק: העמודה
   נשארה 980px (#main.centerDesign) והדיסקליימר נפל ל-.SMdisclaimer הגלובלי.
   ============================================================================ */

#main.ti-kit-page-v2 .ti-h1 {
    font-size: 1.6rem;
    margin: 0 0 6px;
}

#main.ti-kit-page-v2 .ti-sub {
    color: var(--ti-muted);
    font-size: .92rem;
    line-height: 1.65;
    max-width: 760px;
    margin: 0 0 20px;
}

/* --- הגריד: תוכן + סיידבר דביק --- */
#main.ti-kit-page-v2 .ti-kit-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 26px;
    align-items: start;
}

#main.ti-kit-page-v2 .ti-kit-main { min-width: 0; }

#main.ti-kit-page-v2 .ti-kit-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
}

#main.ti-kit-page-v2 .ti-kit-side-card {
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    padding: 16px;
    background: #fff;
}

#main.ti-kit-page-v2 .ti-kit-side-primary {
    background: var(--ti-brand-light);
    border-color: #bcd8ce;
}

#main.ti-kit-page-v2 .ti-kit-side-h {
    font-size: 1rem;
    margin: 0 0 6px;
}

#main.ti-kit-page-v2 .ti-kit-side-primary p {
    font-size: .82rem;
    color: var(--ti-muted);
    line-height: 1.6;
    margin: 0 0 12px;
}

/* בסיידבר ה-CTA הוא ברוחב מלא ובלי המרווח התחתון של הגרסה הישנה */
#main.ti-kit-page-v2 .ti-kit-side .ti-kit-cta {
    display: block;
    max-width: none;
    margin: 0;
}

/* תיבת המייל בסיידבר: כרטיס ולא סקציה רוחבית */
#main.ti-kit-page-v2 .ti-kit-side .ti-kit-mailbox {
    margin: 0;
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    padding: 16px;
    background: #fff;
}

#main.ti-kit-page-v2 .ti-kit-side .ti-kit-mailbox h4 { margin: 0 0 4px; }

/* בעמודה של 340px השדה והכפתור לא נכנסים זה לצד זה */
#main.ti-kit-page-v2 .ti-kit-side .ti-kit-mail { flex-direction: column; }
#main.ti-kit-page-v2 .ti-kit-side .ti-kit-mail button { width: 100%; }

/* --- שלושת כרטיסי החירום --- */
#main.ti-kit-page-v2 .ti-kit-cards-h2 { margin-bottom: 12px; }

#main.ti-kit-page-v2 .ti-kit-cards {
    display: grid;
    /* auto-fit: יעד בלי מספר חירום או בלי מפה מאזן את השורה מעצמו */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

#main.ti-kit-page-v2 .ti-kit-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    padding: 16px;
    background: #fff;
}

#main.ti-kit-page-v2 .ti-kit-card .ti-kit-ic {
    font-size: 1.5rem;
    line-height: 1;
}

#main.ti-kit-page-v2 .ti-kit-card-lbl {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ti-muted);
}

#main.ti-kit-page-v2 .ti-kit-card-val {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .5px;
}

#main.ti-kit-page-v2 .ti-kit-card-hint {
    font-size: .75rem;
    color: var(--ti-muted);
    line-height: 1.5;
}

#main.ti-kit-page-v2 .ti-kit-card a {
    /* יעד מגע 44px — הקישור הוא הפעולה של הכרטיס */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ti-brand);
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
}

#main.ti-kit-page-v2 .ti-kit-card a:hover { text-decoration: underline; }

/* מספר החירום הוא המספר הגדול בדף */
#main.ti-kit-page-v2 .ti-kit-card-urgent {
    background: #fff6f6;
    border-color: #eccccc;
}

#main.ti-kit-page-v2 .ti-kit-card-urgent .ti-kit-card-val { color: var(--ti-danger); }

/* --- הטיפים לשתי עמודות --- */
#main.ti-kit-page-v2 .ti-tips-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#main.ti-kit-page-v2 .ti-tips-list li {
    display: flex;
    gap: 9px;
    border: 1px solid var(--ti-line);
    border-radius: 12px;
    padding: 13px 14px;
    background: #fbfdfc;
    font-size: .88rem;
    line-height: 1.65;
}

#main.ti-kit-page-v2 .ti-tips-list li::before {
    content: "\2713";
    color: var(--ti-brand);
    font-weight: 800;
    flex: none;
}

/* --- נקודות שבירה --- */
@media (max-width: 1100px) {
    #main.ti-kit-page-v2 .ti-kit-cols { grid-template-columns: 1fr; }
    #main.ti-kit-page-v2 .ti-kit-side { position: static; }
}

@media (max-width: 767px) {
    #main.ti-kit-page-v2 .ti-tips-list { grid-template-columns: 1fr; }
    #main.ti-kit-page-v2 .ti-h1 { font-size: 1.35rem; }
}

/* ============================================================================
   רוחב אזור השאלות והתשובות — יישור לוויזארד ולתוצאות (רונן 7/9/2026)
   ----------------------------------------------------------------------------
   ⚠️⚠️ המצרים הם שני כללים **משותפים לכל דפי המאמרים באתר**, ואין לגעת בהם:
       .supermarkerArticle  →  max-width: 800px
       .indexArticle        →  width: 95%; padding: 1% 2% 1% 5%
   לכן העקיפה כאן בהיקף הדף בלבד (body.ti-wide-body), ומבטלת גם את הריפוד
   האופקי — הכרטיסים אינם נסוגים פנימה, ובלי איפוסו הקצוות לא יתיישרו.
   ⚠️ הריפוד האנכי נשמר; רק האופקי מאופס.
   ============================================================================ */
@media (min-width: 992px) {
    body.ti-wide-body #mainContainer > section.indexArticle {
        width: 100%;
        max-width: none;
        padding-inline: 0;
    }

    /* ⚠️⚠️ הקופסה מתרחבת, הטקסט לא. שורת תשובה על פני 1360px היא כ-200 תווים
       ובלתי קריאה — 800px התוכן היה שם מסיבה טובה. ההתאמה שהתבקשה היא של
       **הקצוות**, ולכן הקופסה מתיישרת לכרטיסים והפסקה נשארת ברוחב קריא. */
    body.ti-wide-body #faq-travel .faq-answer > * {
        max-width: 95ch;
    }
}

/* ============================================================================
   בלוק המחשבונים — מראה אחיד עם המאמרים (רונן 7/9/2026)
   ----------------------------------------------------------------------------
   הדפוס נלקח מ-SnP500IndexInvestmentGuide: כרטיס לבן לכל מחשבון, תווית
   מודגשת וחץ בעיגול. ⚠️ הכללים משוכפלים לכאן ולא נטענים מ-modern-article.css:
   אותו קובץ קובע גם ‎#main.centerDesign{width:min(...,1320px)}‎ ואת פריסת
   ‎.sm-modern-article‎, וטעינתו בדף ההשוואה (שרוחבו 1400px) הייתה מזיזה את
   כל העמוד. שכפול של ~40 שורות עדיף על שינוי פריסה שלא ביקשנו.
   ============================================================================ */
#calcs .article-calculator-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #198754;
    font-size: 28px;
    line-height: 1;
}

#calcs .calculator-links-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.2rem;
    color: #17765a;
}

#calcs .calculator-links-intro {
    margin: 0 0 0.75rem;
    color: #52665f;
    font-size: 14px;
    line-height: 1.4;
}

#calcs .calculator-link-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#calcs .calculator-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d1e7dd;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    color: #245044;
    font: 600 15px 'Noto Sans Hebrew', Arial, sans-serif;
    line-height: 1.35;
    text-align: right;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

#calcs .calculator-link__arrow {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eaf5ef;
    color: #17765a;
    font-size: 13px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#calcs .calculator-link:hover,
#calcs .calculator-link:active {
    border-color: #198754;
    background: #eaf5ef;
    color: #0f6048;
}

#calcs .calculator-link:hover .calculator-link__arrow,
#calcs .calculator-link:active .calculator-link__arrow {
    background: #198754;
    color: #fff;
    transform: translateX(-2px);
}

#calcs .calculator-link:focus-visible {
    border-color: #198754;
    outline: 3px solid rgba(25, 135, 84, 0.25);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   שתי הרשימות האחיות בדף ההשוואה — סקירות לפי חברה וביטוח לפי יעד
   (רונן 7/9/2026)
   ⚠️ הן חולקות את ‎.ti-calcs-list‎ עם בלוק המחשבונים, ולכן אחרי שהמחשבונים
   קיבלו כרטיסים הן נשארו קישורים כחולים חשופים ליד בלוק מעוצב. אותו מראה,
   בלי לגעת ב-markup שלהן.
   ⚠️ החץ הוא ‎background-image‎ ולא ‎content‎: תוכן שנוצר ב-CSS נקרא בחלק
   מקוראי המסך, וחץ דקורטיבי אינו אמור להיאמר.
   ---------------------------------------------------------------------------- */
.ti-calcs:not(.ti-calcs--plain) .ti-calcs-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ti-calcs:not(.ti-calcs--plain) .ti-calcs-list li { margin: 0; }

.ti-calcs:not(.ti-calcs--plain) .ti-calcs-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d1e7dd;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    color: #245044;
    font: 600 15px 'Noto Sans Hebrew', Arial, sans-serif;
    line-height: 1.35;
    text-align: right;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ti-calcs:not(.ti-calcs--plain) .ti-calcs-list a::after {
    content: '';
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eaf5ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2317765a'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ti-calcs:not(.ti-calcs--plain) .ti-calcs-list a:hover,
.ti-calcs:not(.ti-calcs--plain) .ti-calcs-list a:active {
    border-color: #198754;
    background: #eaf5ef;
    color: #0f6048;
}

.ti-calcs:not(.ti-calcs--plain) .ti-calcs-list a:hover::after,
.ti-calcs:not(.ti-calcs--plain) .ti-calcs-list a:active::after {
    background-color: #198754;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E");
    transform: translateX(-2px);
}

.ti-calcs:not(.ti-calcs--plain) .ti-calcs-list a:focus-visible {
    border-color: #198754;
    outline: 3px solid rgba(25, 135, 84, 0.25);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   רשימות הקישורים — בסגנון קופות הגמל (רונן 8/9/2026)
   ----------------------------------------------------------------------------
   הדפוס נלקח מ-Gemel/CompareKupotGemel.aspx (טבלת ‎.funds-by-type‎): רשימת
   קישורים ממורכזת בירוק, בלי כרטיסים ובלי חצים, עם רקע עדין ב-hover.
   ⚠️ בלוק היעדים והמחשבונים באותו דף **נשארים כרטיסים** — לכן כללי הכרטיס
   צומצמו ב-‎:not(.ti-calcs--plain)‎ ולא נדרסים כאן. שתי מערכות כללים
   שנאבקות על אותו אלמנט הן הדרך הקצרה לבאג התצוגה הבא.
   ---------------------------------------------------------------------------- */
.ti-calcs--plain .ti-calcs-list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ti-calcs--plain .ti-calcs-list li {
    margin: 0;
}

.ti-calcs--plain .ti-calcs-list a {
    display: block;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #17765a;
    font: 400 16px 'Noto Sans Hebrew', Arial, sans-serif;
    line-height: 36px;
    text-align: start;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ⚠️ ‎#f7f7f3‎ הוא בדיוק גוון ה-hover של קופות הגמל — לא גוון "דומה". */
.ti-calcs--plain .ti-calcs-list a:hover,
.ti-calcs--plain .ti-calcs-list a:active {
    background-color: #f7f7f3;
    color: #0f6048;
}

.ti-calcs--plain .ti-calcs-list a:focus-visible {
    outline: 3px solid rgba(25, 135, 84, 0.25);
    outline-offset: 2px;
}