/* השדה הראשי הגבוה ותשובות המחשבונים */
/* ===== שדה ראשי גבוה: משפט ארוך (למשל מחשבון משכנתא) עובר לשתי שורות, והשדה גדל לגובה.
   בדף הפתיחה הוא גדל כלפי מטה, ובצ'אט (השדה בתחתית) כלפי מעלה. כפתור השליחה נשאר למטה */
.command-box.is-tall {
  height: auto;
  min-height: 58px;
  align-items: flex-end;
  padding-top: 16px;
  padding-bottom: 9px;
}
.command-box.is-tall .command-field {
  height: auto;
  align-self: stretch;
  padding-bottom: 7px;
}
.command-box.is-tall .command-overlay {
  position: static;
  display: block;
  white-space: pre-wrap;
  /* מילה ארוכה בלי רווחים (למשל רצף אותיות) נשברת בסוף השורה, ולא יוצאת מהשדה */
  overflow-wrap: anywhere;
  overflow: visible;
}
/* השדה עצמו (textarea, שקוף) מעל השכבה, ויורד שורות בדיוק כמוה: אותו גופן, רוחב ושבירת שורות.
   לכן הסמן שלו, הלחיצה בעכבר והסימון נמצאים בדיוק על הטקסט שרואים */
.command-box.is-tall .command-input {
  top: 0;
  bottom: 0;
  height: auto;
  margin-top: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* ===== תשובת מחשבון (משכנתא) ===== */
.calc-answer {
  display: block;
  white-space: normal;
  font-weight: 400;
}
.calc-answer .calc-row {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  font-size: calc(15px * var(--a11y-text, 1));
  line-height: calc(28px * var(--a11y-text, 1));
}
.calc-answer .calc-row span:first-child:not(.answer-range) {
  color: var(--c-707070);
}
/* השוואה ("="): טבלה של שתי הצעות. עמודת השמות מימין, ושתי עמודות ערכים שוות */
.calc-answer .cmp-table {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) minmax(0, auto);
  column-gap: 40px;
  font-size: calc(15px * var(--a11y-text, 1));
  line-height: calc(28px * var(--a11y-text, 1));
}
.calc-answer .cmp-head {
  font-weight: 600;
  text-align: left;
  padding-bottom: 4px;
}
.calc-answer .cmp-label {
  color: var(--c-707070);
}
.calc-answer .cmp-val {
  text-align: left;
  white-space: nowrap;
}
.calc-answer .cmp-val.is-better {
  color: var(--selected);
  font-weight: 600;
}
.calc-answer .calc-sep {
  border-top: 1px dashed var(--c-CFCFCF);
  margin: 10px 0;
}
.calc-answer .calc-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 30px;
}
.calc-answer .calc-result span:first-child {
  font-weight: 500;
}
.calc-answer .calc-big {
  white-space: nowrap;
  font-size: calc(28px * var(--a11y-text, 1));
  font-weight: 600;
  color: var(--selected);
}
/* "כדי לשמור את החישוב בהיסטוריה, התחברו." (רק למשתמש לא מחובר) */
/* אזהרה בתשובת מחשבון (למשל עליית מדד חריגה): 14, בצבע כתום-אדום */
.calc-answer .calc-warning {
  margin: 0;
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1.5;
  color: #D93025;
}
.calc-answer .calc-login {
  margin: 0;
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1.5;
  color: var(--c-707070);
}
.calc-answer .calc-parts {
  margin-top: 14px;
}
.calc-answer .calc-part {
  margin-bottom: 12px;
}
.calc-answer .calc-part-top {
  display: flex;
  justify-content: space-between;
  font-size: calc(14px * var(--a11y-text, 1));
}
.calc-answer .calc-part-top span:first-child {
  color: var(--c-707070);
}
.calc-answer .calc-track {
  height: 6px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--c-EEEEEE);
}
.calc-answer .calc-track div {
  height: 6px;
  border-radius: 3px;
}
/* container מאפיינים: 15 פיקסלים מכל צד. כותרת שחורה, ומתחתיה 4 כפתורי בחירה בשתי שורות */
#features-menu {
  width: 200px;
  height: auto;
  padding: 15px;
}
#features-menu .command-menu-title {
  color: var(--text);
}
/* הכפתורים: שתי עמודות, 15 מתחת לכותרת, 10 בין כפתור לכפתור ובין שורה לשורה.
   כל עמודה ברוחב של הכפתור הרחב בה, כך ש"חניה" ברוחב של "מרפסת" ו"ממ"ד" ברוחב של "מעלית" */
.features-options {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
  margin-top: 15px;
}
/* כפתור בחירה: בלי מילוי, מסגרת 1 #DDDDDD, פינות 8, גובה 40, רוחב לפי הטקסט.
   הטקסט #9A9A9A. כשהמאפיין נבחר, הטקסט והמסגרת נצבעים בשחור */
.feature-option {
  height: 40px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid var(--box-stroke);
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 400;
  line-height: 1;
  color: var(--placeholder);
  white-space: nowrap;
  cursor: pointer;
}
.feature-option[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--text);
}
.feature-option:focus-visible {
  outline: 2px solid var(--send-active);
  outline-offset: 2px;
}
/* חלונות הזנה (עיר, תקציב): אותו עיצוב, במידות 190 על 101 */
.entry-menu {
  width: 190px;
  height: 101px;
}
/* הצעות ערים מתחת לשדה החיפוש: עד 3, כל אחת בגובה 30, ברוחב השדה.
   הטקסט מיושר לטקסט שבשדה (14 פיקסלים מימין). hover: רקע var(--c-EEEEEE) */
.city-suggestions {
  position: absolute;
  right: 15px;
  width: 158px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.city-suggestions[hidden] {
  display: none;
}
.city-suggestion {
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0 14px;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  line-height: calc(30px * var(--a11y-text, 1));
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
@media (hover: hover) {
  :where(html:not(.phone-ui)) .city-suggestion:hover{
    background: var(--sidebar-bg);
  }
}
/* "הזינו עיר" / "הזינו תקציב": כמו פריט ברשימה, אבל בלי לחיצה ובלי hover */
.field-menu-label {
  margin: 0;
  color: var(--text);
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  line-height: 1;
  text-align: right;
}
/* חלון חיפוש עיר / הזנת תקציב: 158 על 40, בלי צל, מסגרת #DDDDDD ופינות 8.
   המיקום נקבע בסקריפט */
.entry-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 158px;
  height: 40px;
  background: var(--box-bg);
  border: 1px solid var(--box-stroke);
  border-radius: 8px;
  /* שדה להזנת עיר: הטקסט 14 פיקסלים מימין, ונעצר 15 פיקסלים לפני הצד השמאלי */
  margin: 0;
  padding: 0 14px 0 15px;
  outline: none;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  color: var(--text);
  text-align: right;
}
.entry-box::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
/* הזנת תקציב: ה-₪ בצד שמאל, 14 פיקסלים מהקצה, ממורכז לגובה.
   הוא לא לחיץ ולא ניתן למחיקה (הוא לא חלק מהטקסט בשדה) */
.budget-box {
  padding: 0;
}
.budget-currency {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  display: flex;
  align-items: center;
  color: var(--text);
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.budget-input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
/* המספר נכתב משמאל לימין, ומתחיל מימין ל-₪ (הריווח נקבע בסקריפט) */
.budget-input {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 14px 0 0;
  border: none;
  border-radius: inherit;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  color: var(--text);
  direction: ltr;
  text-align: left;
}
/* חלון עם גלילה (מושג): הרשימה נגללת בתוך החלון, עם פס גלילה משלנו */
.scroll-menu {
  width: 200px;
  padding: 0;
  overflow: hidden;
}
/* חלון המושגים: חיפוש למעלה, והרשימה הנגללת מתחתיו */
.scroll-menu:not([hidden]) {
  display: flex;
  flex-direction: column;
}
/* container חיפוש מושג: 158 על 40, רקע #FFFFFF, מסגרת 1 #DDDDDD, פינות 8.
   15 מלמעלה, 15 מימין ו-15 מלמטה (עד תחילת הרשימה) */
.term-search-wrap {
  flex: none;
  position: relative;
  /* 158 בחלון ברוחב הרגיל (200). בחלון רחב יותר (אפשרות ארוכה) השדה מתרחב איתו */
  width: calc(100% - 42px);
  height: 40px;
  /* 15 מלמעלה ומימין. המרווח של 15 מתחתיו נמדד עד ראש האותיות של המושג הראשון (בסקריפט) */
  margin: 15px 15px 0 0;
  align-self: flex-start;
}
.term-search {
  width: 100%;
  height: 100%;
  margin: 0;
  /* הטקסט מתחיל 10 פיקסלים משמאל לסמל (15 + 15 + 10 = 40), ונעצר 15 לפני הצד השמאלי */
  padding: 0 40px 0 15px;
  background: var(--box-bg);
  border: 1px solid var(--box-stroke);
  border-radius: 8px;
  outline: none;
  font-family: inherit;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  color: var(--text);
  text-align: right;
}
.term-search::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
/* סמל זכוכית מגדלת: 15 על 15, עובי קו 1.5, #9A9A9A, 15 פיקסלים מימין, ממורכז לגובה */
.term-search-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: var(--placeholder);
  pointer-events: none;
}
/* הרשימה הנגללת, עם הפסים העליון והתחתון ופס הגלילה, תופסת את שאר הגובה */
.menu-scroll-area {
  position: relative;
  flex: 1;
  min-height: 0;
}
/* כשאין מושג שמתאים לחיפוש */
.term-empty {
  margin: 0;
  padding: 15px 15px 0 0;
  color: var(--placeholder);
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 500;
  line-height: 1;
  text-align: right;
}
.term-empty[hidden] {
  display: none;
}
.menu-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 15 פיקסלים מימין. המרווח העליון והתחתון מחושבים בסקריפט מגוף האותיות */
  padding: 0 15px 0 0;
  scrollbar-width: none;
}
.menu-scroll::-webkit-scrollbar {
  display: none;
}
/* כל מושג בשורה אחת */
.item-text {
  display: block;
  white-space: nowrap;
}
/* פסים ברקע החלון בחלק העליון והתחתון, כדי שהמרווח נשאר בזמן גלילה.
   הגובה נקבע בסקריפט (18 פיקסלים) */
.menu-edge {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--menu-bg);
  z-index: 1;
}
.menu-edge-top { top: 0; }
.menu-edge-bottom { bottom: 0; }
/* פס הגלילה: 2 על 15, פינות 1, 5 פיקסלים מימין. המיקום לגובה נקבע בסקריפט */
.menu-thumb {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 5px;
  width: 2px;
  height: 15px;
  border-radius: 1px;
  background: var(--box-stroke);
  pointer-events: none;
}
.command-menu[hidden] {
  display: none;
}

/* "לא קשורה לתחום": קישור לדיווח בסוף התשובה. כחול עם קו תחתון, כמו "דיווח על תקלה" */
.qa-report {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--selected);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ===== עיצוב התשובות, גרסה 2 (22.10.2026): מחלקה a2 על .calc-answer =====
   כותרת, תוכן לפי סוג השאלה, "כדאי לדעת" עם פס כחול בצד, ושורת סיום עם "מקורות ▾".
   הצבעים מהמשתנים של האתר, כך שהמצב הכהה והניגודיות הגבוהה עובדים אוטומטית */
:root {
  --a2-hair: #F0F0F0;
  --a2-tint: #F6F9FF;
  --a2-warn-bg: #FFF8E6;
  --a2-warn-text: #5C4400;
  --a2-warn-icon: #B07D00;
  --a2-risk: #DC2626;
  --a2-law-bg: #FBFBFC;
  --a2-law-border: #E3E7EE;
  --a2-law-chip: #EEF1F5;
  --a2-law-head: #334155;
  --a2-law-muted: #64748B;
  --a2-law-text: #374151;
}
.calc-answer.a2 {
  display: block;
  font-size: calc(15px * var(--a11y-text, 1));
  line-height: 1.55;
}
.calc-answer.a2 p {
  margin: 0;
}
.calc-answer.a2 .a2-title {
  margin: 0 0 12px;
  font-size: calc(17px * var(--a11y-text, 1));
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
/* התשובה החד משמעית (כן / לא / מספר בערך): טקסט מודגש בלי מסגרת ורקע, לפני הנתונים */
.calc-answer p.a2-lead {
  margin: 0 0 14px;
  font-size: calc(16px * var(--a11y-text, 1));
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
}
.calc-answer.a2 .a2-kicker {
  margin: 0 0 2px;
  font-size: calc(12.5px * var(--a11y-text, 1));
  font-weight: 600;
  color: var(--selected);
}
.calc-answer.a2 .a2-title.a2-title-big {
  margin-bottom: 8px;
  font-size: calc(20px * var(--a11y-text, 1));
}
.calc-answer.a2 .a2-p {
  font-size: calc(15px * var(--a11y-text, 1));
  line-height: 1.7;
  color: var(--text);
}
.calc-answer.a2 .a2-p + .a2-p,
.calc-answer.a2 :is(.a2-table, .a2-check, .a2-steps, .a2-docs) + .a2-p {
  margin-top: 12px;
}
.calc-answer.a2 .a2-sub {
  margin: 16px 0 4px;
  font-size: calc(13px * var(--a11y-text, 1));
  font-weight: 600;
  color: var(--c-707070);
}
/* רשימת בדיקה */
.calc-answer.a2 .a2-check,
.calc-answer.a2 .a2-steps,
.calc-answer.a2 .a2-docs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.calc-answer.a2 .a2-check li {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--a2-hair);
}
.calc-answer.a2 .a2-check li:first-child {
  border-top: none;
  padding-top: 2px;
}
.calc-answer.a2 .a2-ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--c-EEF4FF);
  color: var(--selected);
}
.calc-answer.a2 .a2-ic svg {
  width: 12px;
  height: 12px;
}
.calc-answer.a2 .a2-body {
  min-width: 0;
}
.calc-answer.a2 .a2-lbl {
  font-size: calc(15px * var(--a11y-text, 1));
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}
.calc-answer.a2 .a2-lbl.a2-plain {
  font-weight: 400;
}
.calc-answer.a2 .a2-val {
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1.5;
  color: var(--c-707070);
}
/* שלבים ממוספרים */
.calc-answer.a2 .a2-steps li {
  display: flex;
  gap: 12px;
  padding: 7px 0;
}
.calc-answer.a2 .a2-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--c-EEF4FF);
  color: var(--selected);
  font-size: calc(12px * var(--a11y-text, 1));
  font-weight: 700;
  line-height: 1;
}
.calc-answer.a2 .a2-step {
  font-size: calc(14.5px * var(--a11y-text, 1));
  line-height: 1.55;
  color: var(--text);
}
/* טבלה בשני טורים: הנושא באפור בטור צר מימין (36%), הערך בצבע הטקסט בטור הרחב משמאל.
   שני הטורים מתחילים באותו קו, וטקסט ארוך עובר שורה בתוך הטור שלו. קו דק בין השורות */
.calc-answer.a2 .a2-table {
  display: flex;
  flex-direction: column;
}
.calc-answer.a2 .a2-tr {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--a2-hair);
  font-size: calc(14.5px * var(--a11y-text, 1));
  line-height: 1.5;
}
.calc-answer.a2 .a2-tr:first-child {
  border-top: none;
  padding-top: 2px;
}
.calc-answer.a2 .a2-k {
  flex: 0 0 36%;
  min-width: 0;
  font-size: calc(13.5px * var(--a11y-text, 1));
  color: var(--c-9A9A9A);
}
.calc-answer.a2 .a2-v {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-weight: 500;
  color: var(--text);
}
.calc-answer.a2 .a2-th {
  padding-top: 0;
  font-size: calc(12.5px * var(--a11y-text, 1));
}
.calc-answer.a2 .a2-th .a2-k,
.calc-answer.a2 .a2-th .a2-v {
  font-size: calc(12.5px * var(--a11y-text, 1));
  font-weight: 500;
  color: var(--c-9A9A9A);
}
/* "כדאי לדעת": פס כחול בצד ימין, רקע תכלת בהיר */
.calc-answer.a2 .a2-tip {
  margin-top: 14px;
  padding: 10px 12px;
  border-right: 3px solid var(--selected);
  border-radius: 4px 10px 10px 4px;
  background: var(--a2-tint);
}
.calc-answer.a2 .a2-tip-text {
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1.6;
  color: var(--text);
}
.calc-answer.a2 .a2-tip-text b {
  font-weight: 600;
  color: var(--selected);
}
/* "כדאי לדעת", "מתי ניתן לחייב אותך" ו"מה החוק אומר" (תשובה לשאלה חופשית): שלוש תיבות שנפתחות בלחיצה,
   באותו גובה כשהן סגורות, באותו עיגול פינות ובאותו מרווח זו מזו. "כדאי לדעת": מסגרת כחולה דקה (9.11.2026) */
.calc-answer.a2 .a2-fold {
  margin-top: 14px;
  padding: 0;
  border: 1px solid var(--selected);
  border-radius: 12px;
  background: var(--a2-tint);
}
.calc-answer.a2 .a2-fold + .a2-fold,
.calc-answer.a2 .a2-fold + .a2-law { margin-top: 12px; }
.calc-answer.a2 .a2-fold-head {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: none;
  font: inherit;
  text-align: right;
  cursor: pointer;
}
.calc-answer.a2 .a2-fold-ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--selected);
}
.calc-answer.a2 .a2-fold-ic svg { display: block; width: 18px; height: 18px; }
.calc-answer.a2 .a2-fold-title {
  white-space: nowrap;
  font-size: calc(14.5px * var(--a11y-text, 1));
  font-weight: 700;
  color: var(--selected);
}
.calc-answer.a2 .a2-fold-arrow {
  margin-inline-start: auto;
  color: var(--selected);
}
/* חץ הפתיחה (9.11.2026): חץ דק בגוון של התיבה, שמסתובב למעלה כשהתיבה פתוחה */
.calc-answer.a2 .a2-fold-arrow,
.calc-answer.a2 .a2-law-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(22px * var(--a11y-text, 1));
  height: calc(22px * var(--a11y-text, 1));
  transition: transform .2s ease;
}
.calc-answer.a2 .a2-fold-arrow svg,
.calc-answer.a2 .a2-law-arrow svg { display: block; width: 82%; height: 82%; }
.calc-answer.a2 [aria-expanded="true"] > .a2-fold-arrow,
.calc-answer.a2 [aria-expanded="true"] > .a2-law-arrow { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .calc-answer.a2 .a2-fold-arrow,
  .calc-answer.a2 .a2-law-arrow { transition: none; }
}
.calc-answer.a2 .a2-fold-body { margin: 0; padding: 0 14px 12px; }
/* "מתי ניתן לחייב אותך": מסגרת אדומה דקה, בלי רקע */
.calc-answer.a2 .a2-fold-warn {
  border-color: var(--a2-risk);
  background: transparent;
}
.calc-answer.a2 .a2-fold-warn .a2-fold-ic,
.calc-answer.a2 .a2-fold-warn .a2-fold-title,
.calc-answer.a2 .a2-fold-warn .a2-fold-arrow { color: var(--a2-risk); }
.calc-answer.a2 .a2-fold-warn .a2-fold-body { color: var(--text); }
/* הודעה בולטת (שאלה כללית בלי מקור רשמי) */
.calc-answer.a2 .a2-notice {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--a2-warn-bg);
}
.calc-answer.a2 .a2-notice-ic {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--a2-warn-icon);
}
.calc-answer.a2 .a2-notice-ic svg {
  display: block;
  width: 18px;
  height: 18px;
}
.calc-answer.a2 .a2-notice-text {
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1.6;
  color: var(--a2-warn-text);
}
/* "ההסבר המלא ▾" ו"מקורות ▾": כפתורי טקסט כחולים */
.calc-answer .a2-toggle {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: calc(13.5px * var(--a11y-text, 1));
  color: var(--selected);
  cursor: pointer;
}
.calc-answer.a2 .a2-more {
  margin-top: 10px;
}
.calc-answer.a2 .a2-more-body {
  margin-top: 6px;
}
/* שורת הסיום */
.calc-answer.a2 .a2-foot {
  margin-top: 14px;
}
.calc-answer.a2 .a2-note {
  font-size: calc(12px * var(--a11y-text, 1));
  line-height: 1.6;
  color: var(--c-9A9A9A);
}
/* הבסיס של התשובה (חוקים וסעיפים): המקור הראשון ו"הצג עוד ▾" שפותח את כולו. ההסתייגות מתחתיו בשורה משלה */
/* "הצג עוד" בצבע הטקסט הראשי: לבן במצב כהה, שחור במצב בהיר */
.calc-answer .a2-basis-toggle {
  display: block;
  margin: 2px 0 6px;
  color: var(--text);
  font-size: calc(12.5px * var(--a11y-text, 1));
}
.calc-answer .a2-src-toggle {
  margin-top: 2px;
  font-size: calc(12.5px * var(--a11y-text, 1));
}
.calc-answer .a2-src {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: calc(12.5px * var(--a11y-text, 1));
  line-height: 1.6;
}
.calc-answer .a2-src li + li {
  margin-top: 2px;
}
.calc-answer .a2-src a {
  color: var(--selected);
  text-decoration: underline;
  overflow-wrap: anywhere;
}
/* איפה בודקים: הגוף הרשמי בכרטיס, וכפתור כחול לאתר הרשמי */
.calc-answer.a2 .a2-org {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--box-stroke);
  border-radius: 10px;
}
.calc-answer.a2 .a2-org-ic {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--selected);
}
.calc-answer.a2 .a2-org-ic svg {
  display: block;
  width: 22px;
  height: 22px;
}
.calc-answer.a2 .a2-org-name {
  font-size: calc(14.5px * var(--a11y-text, 1));
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}
.calc-answer.a2 .a2-btn {
  display: inline-block;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--send-active);
  color: #FFFFFF;
  font-size: calc(14px * var(--a11y-text, 1));
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.calc-answer.a2 .a2-local {
  margin-top: 10px;
  font-size: calc(14px * var(--a11y-text, 1));
  color: var(--c-707070);
}
/* מי משלם: התשובה גדולה ובולטת */
.calc-answer.a2 .a2-payer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: var(--a2-tint);
}
.calc-answer.a2 .a2-payer-ic {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--selected);
}
.calc-answer.a2 .a2-payer-ic svg {
  display: block;
  width: 30px;
  height: 30px;
}
.calc-answer.a2 .a2-payer-what {
  font-size: calc(13px * var(--a11y-text, 1));
  color: var(--c-707070);
}
.calc-answer.a2 .a2-payer-who {
  font-size: calc(21px * var(--a11y-text, 1));
  font-weight: 700;
  line-height: 1.35;
  color: var(--selected);
}
/* מה ההבדל: בקצרה למעלה, ומתחתיו השוואה בשתי עמודות */
.calc-answer.a2 .a2-sum {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--c-F6F6F6);
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1.6;
  color: var(--text);
}
.calc-answer.a2 .a2-diff {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
  font-size: calc(14px * var(--a11y-text, 1));
  line-height: 1.55;
}
.calc-answer.a2 .a2-pill {
  margin-bottom: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-EEF4FF);
  color: var(--selected);
  font-weight: 600;
  text-align: center;
}
.calc-answer.a2 .a2-diff-k,
.calc-answer.a2 .a2-diff-v {
  padding: 9px 0;
  border-top: 1px solid var(--a2-hair);
}
.calc-answer.a2 .a2-diff-k {
  color: var(--c-707070);
}
.calc-answer.a2 .a2-diff-v {
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* אילו מסמכים: רשימת סימון */
.calc-answer.a2 .a2-docs li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--a2-hair);
}
.calc-answer.a2 .a2-docs li:first-child {
  border-top: none;
  padding-top: 2px;
}
.calc-answer.a2 .a2-box {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 2px solid var(--c-DCE7FD);
  border-radius: 5px;
}
.calc-answer.a2 .a2-doc {
  font-size: calc(15px * var(--a11y-text, 1));
  line-height: 1.5;
  color: var(--text);
}
@media (max-width: 767px) {
  .calc-answer.a2 .a2-title {
    font-size: calc(16px * var(--a11y-text, 1));
  }
  .calc-answer.a2 .a2-title.a2-title-big {
    font-size: calc(18px * var(--a11y-text, 1));
  }
  /* מה ההבדל בטלפון: במקום שלוש עמודות צרות, כל היבט הוא כותרת, ומתחתיה ערך לכל מושג עם השם שלו */
  .calc-answer.a2 .a2-diff {
    display: block;
  }
  .calc-answer.a2 .a2-diff-corner,
  .calc-answer.a2 .a2-pill {
    display: none;
  }
  .calc-answer.a2 .a2-diff-k {
    display: block;
    padding: 10px 0 2px;
    font-size: calc(13px * var(--a11y-text, 1));
    font-weight: 600;
  }
  .calc-answer.a2 .a2-diff-v {
    display: block;
    padding: 3px 0;
    border-top: none;
  }
  .calc-answer.a2 .a2-diff-v::before {
    content: attr(data-name) ": ";
    font-weight: 600;
    color: var(--selected);
  }
  /* טבלת השורות בטלפון: הנושא (באפור) בשורה משלו, והערך מתחתיו ברוחב מלא */
  .calc-answer.a2 .a2-tr {
    flex-direction: column;
    gap: 3px;
  }
  .calc-answer.a2 .a2-k,
  .calc-answer.a2 .a2-v {
    flex: none;
    width: 100%;
  }
}
/* תשובה חד משמעית מתחת לכותרת של מחירים בעיר */
.calc-answer .data-title + p.a2-lead {
  margin-top: 8px;
}
/* ההסבר לפני הנתונים: רווח בין ההסבר לטבלה, לרשימה או לשלבים שאחריו */
.calc-answer.a2 :is(.a2-p, .a2-more) + :is(.a2-table, .a2-check, .a2-steps) {
  margin-top: 12px;
}
.calc-answer.a2 p.a2-lead + .a2-more {
  margin-top: 0;
}
/* "מקור ▾" בתשובות של פקודות (מחשבונים, נתוני הלמ"ס, מחירים בעיר): מתחת להסתייגות */
.calc-answer .src-foot {
  margin-top: 6px;
}
.calc-answer .a2-src {
  color: var(--placeholder);
}

/* "מה החוק אומר" (תשובות מהמוח): תיבה אפורה, סגורה כברירת מחדל ונפתחת בלחיצה. בכל סעיף: תגית עם מספר הסעיף וציטוט מהנוסח */
.calc-answer.a2 .a2-law {
  margin-top: 14px;
  border: 1px solid var(--a2-law-border);
  border-radius: 12px;
  background: var(--a2-law-bg);
}
.calc-answer.a2 .a2-law-head {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: none;
  font: inherit;
  text-align: right;
  cursor: pointer;
}
.calc-answer.a2 .a2-law-ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--a2-law-muted);
}
.calc-answer.a2 .a2-law-ic svg { display: block; width: 18px; height: 18px; }
.calc-answer.a2 .a2-law-title {
  flex: none;
  white-space: nowrap;
  font-weight: 700;
  font-size: calc(14.5px * var(--a11y-text, 1));
  color: var(--a2-law-head);
}
.calc-answer.a2 .a2-law-sub {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(12.5px * var(--a11y-text, 1));
  color: var(--a2-law-muted);
}
.calc-answer.a2 .a2-law-arrow {
  margin-inline-start: auto;
  color: var(--a2-law-muted);
}
.calc-answer.a2 .a2-law-body { padding: 0 14px 4px; }
/* בכל סעיף: התגית עם מספר הסעיף למעלה, והנוסח מתחתיה */
.calc-answer.a2 .a2-law-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--a2-law-border);
}
.calc-answer.a2 .a2-law-sec {
  flex: none;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--a2-law-chip);
  font-size: calc(12px * var(--a11y-text, 1));
  font-weight: 600;
  color: var(--a2-law-muted);
  white-space: nowrap;
}
.calc-answer.a2 .a2-law-text {
  font-size: calc(14.5px * var(--a11y-text, 1));
  line-height: 1.7;
  color: var(--a2-law-text);
}

/* שאלה מורכבת: תשובה נפרדת לכל נושא. בראש כל בועה: "נושא 1 מתוך 3" ושם הנושא */
.calc-answer.a2 .a2-multi-intro {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--a2-law-muted);
}
.calc-answer.a2 .a2-multi-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}
.calc-answer.a2 .a2-multi-num {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--a2-law-muted);
  background: var(--a2-law-chip);
}
.calc-answer.a2 .a2-multi-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--selected);
}