/* ===== אמיר במות הרמה — מחשבון הובלות · עיצוב 2026 =====
   החלפה ישירה של css/styles.css. כל שמות המחלקות שמופיעים ב-js/app.js נשמרו. */

:root {
  /* ---- מיתוג ---- */
  --blue:      #0078C1;   /* הכחול של אמיר */
  --blue-hi:   #0083D1;
  --blue-dark: #005A93;
  --deep:      #003D66;
  --yellow:    #FFE102;
  --amber:     #F5A623;
  --green:     #0E9F6E;
  --red:       #D93025;

  /* ---- ניטרלים ---- */
  --ink:     #13293D;
  --muted:   #5C7189;
  --muted-2: #7B8FA3;
  --faint:   #93A7BA;
  --bg:      #EEF4F9;
  --card:    #FFFFFF;
  --soft:    #F8FBFE;   /* רקע שדות */
  --tint:    #F2F7FB;   /* רקע פקדים */
  --line:    #DCE7F0;
  --hair:    #E6EEF5;

  /* ---- סולם טיפוגרפי (6 גדלים בלבד) ---- */
  --fs-micro: 10.5px;
  --fs-xs:    11.5px;
  --fs-sm:    12.5px;
  --fs-md:    14px;
  --fs-lg:    15px;
  --fs-xl:    19px;
  --fs-price: 46px;

  /* ---- צורה ---- */
  --r-ctl:  10px;
  --r-fld:  11px;
  --r-card: 14px;
  --sh-sm:  0 1px 2px rgba(0, 61, 102, .06);
  --sh-md:  0 1px 2px rgba(0, 61, 102, .06), 0 4px 16px -8px rgba(0, 61, 102, .18);
  --sh-pop: 0 14px 34px -10px rgba(0, 61, 102, .34);
  --sh-hero: 0 12px 30px -12px rgba(0, 45, 77, .6);

  --header-h: 66px;
  --strip-h: 5px;
  --ease: cubic-bezier(.22, .7, .3, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Heebo", -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.hint { margin: 9px 2px 0; font-size: var(--fs-xs); color: var(--muted-2); line-height: 1.55; }
.linklike {
  background: none; border: none; padding: 0;
  color: var(--blue); font: inherit; font-size: var(--fs-xs);
  cursor: pointer; text-decoration: underline; white-space: nowrap;
}
.linklike:hover { color: var(--blue-dark); }

@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes listIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- כותרת: הלוגו עם הסלוגן מתחתיו ---------- */
.topbar {
  height: var(--header-h); flex: none;
  background: linear-gradient(180deg, var(--blue-hi) 0%, #0072B6 100%);
  color: #fff; display: flex; align-items: center;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.topbar-inner { display: flex; align-items: center; padding: 0 22px; width: 100%; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.brand-row { display: flex; align-items: center; gap: 16px; }
.logo { height: 30px; display: block; }
.brand .slogan {
  margin: 0; font-size: var(--fs-micro); font-weight: 400;
  letter-spacing: .15px; color: rgba(255, 255, 255, .88); white-space: nowrap;
}
.brand .slogan .dot { color: var(--yellow); }
.topbar-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, .28); }
.topbar-inner h1 { margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.1px; }

/* פס הצבעים של לשוניות הקטלוג — סימן הזיהוי של אמיר */
.tabstrip {
  height: var(--strip-h); flex: none;
  background: linear-gradient(to left,
    #F37424 0 9.09%, #D2D3D5 0 18.18%, #743633 0 27.27%, #FFCF86 0 36.36%,
    #5A8CA3 0 45.45%, #7DA06E 0 54.54%, #9DBDD4 0 63.63%, #B9549F 0 72.72%,
    #C9B7A8 0 81.81%, #FFE102 0 90.9%, #DAB960 0 100%);
}

/* ---------- פריסה ---------- */
body { display: flex; flex-direction: column; overflow: hidden; }
.layout { display: flex; flex: 1 1 auto; min-height: 0; }
.map-pane { flex: 1 1 auto; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; direction: ltr; background: #DCE7F0; }

.panel {
  width: 436px; max-width: 46vw; flex: none;
  display: flex; flex-direction: column;
  background: var(--bg); border-right: 1px solid #DFE9F1;
}
/* אזור הגלילה — כרטיס התוצאה נשאר נעוץ מתחתיו */
.panel-scroll {
  flex: 1 1 auto; overflow-y: auto;
  padding: 12px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.panel-scroll::-webkit-scrollbar { width: 9px; }
.panel-scroll::-webkit-scrollbar-thumb { background: #CFDEEA; border-radius: 9px; border: 2px solid var(--bg); }

/* ---------- כרטיסים ---------- */
.card {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-card); box-shadow: var(--sh-md);
  padding: 13px 14px 14px;
  animation: riseIn .34s var(--ease) both;
}
#step-dest { animation-delay: .06s; }
.card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.card-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--deep); letter-spacing: -.1px; }
.step-num {
  width: 21px; height: 21px; flex: none;
  background: var(--blue); color: #fff; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}

/* ---------- שדות חיפוש והשלמה אוטומטית ---------- */
.combo { position: relative; }
.combo input {
  width: 100%; height: 42px;
  padding: 0 36px 0 36px;
  border: 1.5px solid var(--line); border-radius: var(--r-fld);
  font: inherit; font-size: var(--fs-lg); font-weight: 500;
  color: var(--ink); background: var(--soft);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.combo input::placeholder { color: var(--faint); font-weight: 400; }
.combo input:focus {
  outline: none; border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3.5px rgba(0, 120, 193, .13);
}
/* זכוכית מגדלת בתחילת השדה */
.combo::before {
  content: ""; position: absolute; right: 12px; top: 13px;
  width: 16px; height: 16px; pointer-events: none; z-index: 2;
  background: no-repeat center/16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2393A7BA'><path d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/></svg>");
}
.combo-clear {
  position: absolute; left: 8px; top: 9px;
  width: 24px; height: 24px; border: none; background: none;
  color: var(--faint); font-size: 12px; cursor: pointer;
  border-radius: 7px; transition: background .14s, color .14s;
}
.combo-clear:hover { background: var(--bg); color: var(--ink); }

.combo-list {
  position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 1200;
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--sh-pop);
  max-height: 300px; overflow-y: auto;
  animation: listIn .18s ease both;
}
.combo-group {
  padding: 7px 13px 5px; font-size: var(--fs-micro); font-weight: 700;
  color: var(--muted-2); letter-spacing: .3px;
  border-bottom: 1px solid #F1F6FA;
  position: sticky; top: 0; background: #fff;
}
.combo-item {
  padding: 9px 13px; cursor: pointer;
  display: flex; align-items: baseline; gap: 9px;
  border-bottom: 1px solid #F5F9FC;
  transition: background .12s;
}
.combo-item:last-child { border-bottom: none; }
.combo-item:hover, .combo-item.active { background: #EAF4FC; }
.combo-item .ci-main { font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.combo-item .ci-main .auto-tag { color: var(--amber); font-size: 11px; }
.combo-item .ci-sub { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.combo-item .ci-side { font-size: var(--fs-xs); color: var(--blue); font-weight: 600; white-space: nowrap; margin-right: auto; }
.combo-empty { padding: 13px; font-size: var(--fs-sm); color: var(--muted); text-align: center; }

/* ---------- רשימת הבמות שבהובלה ---------- */
.lift-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.lift-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-fld); padding: 8px 11px;
  transition: box-shadow .16s, border-color .16s;
  animation: riseIn .3s var(--ease) both;
}
.lift-row:hover { border-color: #BFD8EA; box-shadow: 0 3px 10px -4px rgba(0, 61, 102, .2); }
.lift-name { flex: 1; min-width: 0; line-height: 1.3; font-weight: 700; font-size: var(--fs-md); color: var(--deep); }
.lift-name small {
  display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lift-flag {
  background: var(--yellow); color: var(--ink);
  font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; vertical-align: 1px;
}
.lift-flag.tow { background: #CDEBDD; color: #06543A; }
.lift-qty {
  display: flex; align-items: center; flex: none; height: 28px; overflow: hidden;
  background: var(--tint); border: 1px solid #E1EBF3; border-radius: 8px;
}
.lift-qty button {
  width: 26px; height: 26px; padding: 0; border: none; background: transparent;
  color: var(--deep); font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s;
}
.lift-qty button:hover { background: #E1EFF9; }
.lift-qty b { min-width: 22px; text-align: center; font-size: var(--fs-sm); font-weight: 700; }
.lift-w {
  flex: none; font-weight: 600; color: var(--ink); font-size: var(--fs-sm);
  min-width: 62px; text-align: left; font-variant-numeric: tabular-nums;
}
.lift-del {
  flex: none; width: 24px; height: 24px; border: none; background: none;
  color: var(--faint); cursor: pointer; font-size: var(--fs-sm);
  border-radius: 7px; transition: background .14s, color .14s;
}
.lift-del:hover { background: #FDECEA; color: var(--red); }
.lift-sum {
  margin-top: 10px; font-size: var(--fs-sm); color: var(--muted);
  line-height: 1.5;
}
.lift-sum b { font-weight: 700; color: var(--deep); font-variant-numeric: tabular-nums; }
.lift-note {
  margin-top: 8px; font-size: var(--fs-xs); color: #7A6410;
  background: #FFFCEC; border: 1px solid #F0E6B4;
  border-radius: var(--r-ctl); padding: 7px 11px; line-height: 1.55;
}

/* כרטיס דגם בודד (תצוגה מקוצרת) */
.model-card {
  margin-top: 9px; background: var(--soft); border: 1px solid #E4EDF4;
  border-radius: var(--r-fld); padding: 9px 12px;
  font-size: var(--fs-sm); line-height: 1.5;
}
.model-card .mc-title { font-weight: 700; color: var(--deep); font-size: var(--fs-md); }
.model-card .mc-line { color: var(--muted); }
.model-card .mc-warn { color: #8A6400; margin-top: 3px; font-size: var(--fs-xs); }
.model-card b { color: var(--ink); }

/* ---------- סוג הובלה — סגמנט אחד ---------- */
.truck-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.truck-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); flex: none; }
.chips {
  display: flex; flex: 1; gap: 3px; padding: 3px;
  background: var(--tint); border: 1px solid #E1EBF3; border-radius: var(--r-ctl);
}
.chip {
  flex: 1; height: 30px; border: none; border-radius: 8px;
  background: transparent; color: #6C8199;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.chip:hover { color: var(--deep); }
.chip.on { background: #fff; color: var(--deep); box-shadow: 0 1px 3px rgba(0, 61, 102, .18); }
.chip.on .auto-tag { color: var(--blue); }
.chip.blocked, .chip.blocked:hover {
  opacity: .4; cursor: not-allowed; background: transparent; color: var(--muted-2);
}
.auto-tag { font-size: 10px; font-weight: 500; }
#truck-auto { display: block; margin-top: 8px; }
.gear {
  flex: none; width: 30px; height: 30px; margin-right: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--faint); cursor: pointer;
  border-radius: 9px; transition: background .14s, color .14s;
}
.gear:hover { background: var(--tint); color: var(--blue); }

/* ספי משקל */
.thresholds {
  margin-top: 10px; padding: 11px 12px;
  background: #FFFCEC; border: 1px solid #F0E6B4;
  border-radius: var(--r-fld); font-size: var(--fs-sm);
}
.th-row { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.th-row label { flex: 1; color: #6B5A15; }
.th-row input {
  width: 84px; height: 28px; padding: 0 8px;
  border: 1px solid #E4D9A8; border-radius: 8px;
  font: inherit; font-size: var(--fs-sm); background: #fff; color: var(--ink);
}
.th-row.muted {
  display: block; margin: 8px 0 0; font-size: var(--fs-xs);
  color: #8A7A35; line-height: 1.6;
}
.th-row.muted b { color: #6B5A15; }
.th-row.muted .linklike { font-size: var(--fs-xs); }

/* ---------- יעד ---------- */
.dest-row { display: flex; gap: 8px; align-items: stretch; }
.grow { flex: 1; }
.pin-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); background: #fff; color: var(--deep);
  padding: 0 13px; border-radius: var(--r-fld);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: border-color .16s, color .16s, background .16s, box-shadow .16s;
}
.pin-btn:hover {
  border-color: var(--blue); color: var(--blue); background: #F6FBFF;
  box-shadow: 0 2px 8px -3px rgba(0, 120, 193, .3);
}
.pin-btn.on {
  background: var(--yellow); border-color: #D9BF00; color: var(--ink);
  box-shadow: 0 3px 12px -4px rgba(217, 191, 0, .8);
}

/* ---------- מוקדי יציאה ---------- */
.hub-row { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.hub-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); flex: none; }
.hub-seg { display: flex; gap: 6px; margin-top: 7px; }
.hub-btn {
  flex: 1; min-width: 0; cursor: pointer; font: inherit; text-align: center;
  border: 1.5px solid var(--line); background: #fff;
  border-radius: var(--r-fld); padding: 7px 5px 15px;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.hub-btn:hover { border-color: #9FC6E2; background: var(--soft); }
.hub-btn .hb-name { display: block; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.hub-btn .hb-sub {
  display: block; font-size: 10px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-btn.on {
  border-color: var(--blue); background: linear-gradient(180deg, var(--blue-hi), #0072B6);
  padding-bottom: 7px; box-shadow: 0 3px 10px -4px rgba(0, 120, 193, .5);
}
.hub-btn.on .hb-name, .hub-btn.on .hb-sub { color: #fff; }
.hub-btn.on .hb-sub { color: rgba(255, 255, 255, .85); }
.hub-btn.on .auto-tag { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 700; color: var(--yellow); }
.hub-btn.locked { opacity: .42; cursor: not-allowed; }
.hub-btn.locked:hover { border-color: var(--line); background: #fff; }

/* ---------- שכבות על המפה ---------- */
.pin-banner {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1000;
  background: var(--ink); color: #fff;
  padding: 9px 16px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .55);
  display: flex; gap: 12px; align-items: center;
  animation: listIn .22s ease both;
}
.pin-banner button {
  background: rgba(255, 255, 255, .18); color: #fff; border: none;
  border-radius: 999px; padding: 4px 12px;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: background .16s;
}
.pin-banner button:hover { background: rgba(255, 255, 255, .32); }
.map-pane.pinning #map { cursor: crosshair; }

/* מתגי המפה הוסרו מהתצוגה — הפקדים מוסתרים ב-index.html */
#show-dots, #show-poi { display: none; }

/* ---------- כרטיס התוצאה — הגיבור, נעוץ בתחתית הפאנל ---------- */
.result-card {
  flex: none; margin: 0 14px 14px;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, #00517F 0%, var(--deep) 55%, #012E4D 100%);
  color: #fff; box-shadow: var(--sh-hero);
  animation: riseIn .4s var(--ease) .12s both;
}
.result-card::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(to left, var(--yellow), var(--amber));
}
#result-body, .result-empty, .result-loading, .result-error { padding: 14px 16px 15px; }

.result-empty { text-align: center; padding: 20px 16px 22px; }
.result-empty svg { width: 34px; height: 34px; opacity: .3; fill: #fff; }
.result-empty svg path { fill: #fff; }
.result-empty p { margin: 8px 0 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); line-height: 1.6; }

.price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.price-big {
  font-size: var(--fs-price); font-weight: 800; line-height: .95;
  letter-spacing: -1.5px; font-variant-numeric: tabular-nums; color: #fff;
}
.price-big small { font-size: 20px; font-weight: 600; color: rgba(255, 255, 255, .7); letter-spacing: 0; }
.price-self { font-size: 26px; font-weight: 800; line-height: 1.1; color: #fff; }
/* שורת המרחק/הזמן — מופרדת בקו דק, כמו שורת עובדות */
.price-sub {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12px; color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
}

/* שורת העובדות מתחת למחיר — נוצרת ב-app.js לפי PATCH-app.js.md */
.result-facts {
  display: grid; grid-template-columns: repeat(3, auto);
  justify-content: space-between; gap: 3px 10px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12px;
}
.result-facts .rf-k { color: rgba(255, 255, 255, .55); font-size: var(--fs-micro); white-space: nowrap; }
.result-facts b { font-weight: 600; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }

.badge {
  padding: 4px 11px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; border: 1px solid;
}
.badge.listed   { background: rgba(255, 225, 2, .14);  color: var(--yellow); border-color: rgba(255, 225, 2, .35); }
.badge.estimate { background: rgba(245, 166, 35, .16); color: #FFC978;      border-color: rgba(245, 166, 35, .5); }
.badge.rough    { background: rgba(217, 48, 37, .18);  color: #FFC1BA;      border-color: rgba(255, 150, 140, .45); }
.badge.selftow  { background: rgba(14, 159, 110, .18); color: #8FE9C4;      border-color: rgba(14, 159, 110, .45); }

.result-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 14px; margin-top: 10px; font-size: 12px;
}
.rm-item { display: flex; gap: 6px; align-items: baseline; }
.rm-item .rm-k { color: rgba(255, 255, 255, .55); flex: none; }
.rm-item .rm-v { font-weight: 600; color: #fff; }

.anchor-note {
  margin-top: 10px;
  background: rgba(255, 225, 2, .1);
  border: 1px solid rgba(255, 225, 2, .28);
  border-radius: var(--r-ctl);
  padding: 7px 10px; font-size: 11px; line-height: 1.5;
  color: rgba(255, 255, 255, .75);
}
.anchor-note b { color: #fff; font-weight: 700; }

details.breakdown { margin-top: 11px; font-size: var(--fs-sm); }
details.breakdown summary {
  cursor: pointer; color: #8FD0F5; font-weight: 600; font-size: var(--fs-sm);
  list-style: none;
}
details.breakdown summary::-webkit-details-marker { display: none; }
details.breakdown summary::after { content: " ▾"; font-size: 9px; }
details.breakdown[open] summary::after { content: " ▴"; }
details.breakdown .result-meta { margin-top: 10px; margin-bottom: 2px; }
details.breakdown .anchor-note { margin-top: 10px; }

.bk-table { width: 100%; border-collapse: collapse; margin-top: 9px; }
.bk-table th, .bk-table td {
  text-align: right; padding: 5px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-xs); color: #fff;
}
.bk-table th { color: rgba(255, 255, 255, .55); font-weight: 600; }
.bk-note { margin-top: 9px; color: rgba(255, 255, 255, .6); font-size: var(--fs-xs); line-height: 1.6; }

/* כפתור ״העתקת סיכום״ הוסר מהתצוגה לפי בקשה.
   app.js עדיין מייצר אותו — להחזרה: display: flex; */
.result-actions { margin-top: 13px; display: none; gap: 8px; }
.btn-copy {
  flex: 1; height: 38px; border: none; border-radius: var(--r-ctl);
  background: #fff; color: var(--deep);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  transition: transform .14s, box-shadow .16s, background .16s;
}
.btn-copy:hover { background: var(--yellow); box-shadow: 0 6px 16px -6px rgba(255, 225, 2, .7); }
.btn-copy:active { transform: translateY(1px); }

.result-error {
  background: rgba(217, 48, 37, .18);
  border: 1px solid rgba(255, 150, 140, .45);
  border-radius: var(--r-fld);
  margin: 14px 16px 15px; padding: 12px 14px;
  font-size: var(--fs-sm); line-height: 1.6; color: rgba(255, 255, 255, .8);
}
.result-error b { display: block; font-weight: 700; font-size: var(--fs-md); color: #FFD9D5; }

.result-loading { text-align: center; padding: 26px 16px; }
.spin {
  width: 22px; height: 22px; margin: 0 auto;
  border: 3px solid rgba(255, 255, 255, .22); border-top-color: var(--yellow);
  border-radius: 50%; animation: spin .8s linear infinite;
}
.result-loading p { margin: 10px 0 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); }

/* ---------- תחתית ---------- */
.panel-footer { padding: 2px 8px 4px; font-size: var(--fs-micro); color: #8497A9; line-height: 1.6; }
.panel-footer p { margin: 3px 0 0; }
.panel-footer p:first-child { margin-top: 0; }
.copyright {
  margin-top: 7px !important; padding-top: 7px;
  border-top: 1px solid #DFE9F1; font-size: 10px; color: var(--faint);
}
.copyright span { unicode-bidi: isolate; }

/* ---------- סמנים ופקדים של המפה ---------- */
.hub-icon {
  background: var(--blue); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 45, 77, .45);
  cursor: pointer; box-sizing: border-box;
}
.hub-icon.sel { background: var(--deep); box-shadow: 0 0 0 5px rgba(0, 120, 193, .3), 0 2px 8px rgba(0, 45, 77, .45); }
.dest-pin { cursor: default; line-height: 0; }
.dest-pin svg { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.maplibregl-container { font-family: "Heebo", sans-serif; }
.maplibregl-popup.city-tip .maplibregl-popup-content {
  direction: rtl; font-family: "Heebo", sans-serif;
  font-size: var(--fs-sm); padding: 5px 10px; border-radius: 8px;
  box-shadow: 0 4px 14px -4px rgba(0, 61, 102, .4);
}
.maplibregl-popup.city-tip .maplibregl-popup-tip { border-top-color: #fff; }
.maplibregl-ctrl-attrib { direction: ltr; font-size: 10px; }
.maplibregl-canvas { outline: none; }

.maplibregl-ctrl-top-right { top: 12px; left: auto; right: 12px; }
.maplibregl-ctrl-group {
  border-radius: 12px !important; overflow: hidden;
  box-shadow: 0 4px 16px -4px rgba(0, 61, 102, .28) !important;
}
.maplibregl-ctrl-group .map-btn-home,
.maplibregl-ctrl-group .map-btn-3d {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--deep); background: #fff; border: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  font-family: "Heebo", sans-serif;
  transition: background .16s, color .16s;
}
.maplibregl-ctrl-group .map-btn-home + .map-btn-3d { border-top: 1px solid var(--hair); }
.maplibregl-ctrl-group .map-btn-home:hover,
.maplibregl-ctrl-group .map-btn-3d:hover { background: #EAF4FC; color: var(--blue); }
.maplibregl-ctrl-group .map-btn-3d.on { background: var(--blue); color: #fff; }

/* ---------- מסכים צרים ---------- */
@media (max-width: 940px) {
  body { overflow: auto; }
  .layout { flex-direction: column; }
  .map-pane { order: -1; height: 42vh; min-height: 300px; flex: none; }
  .panel { width: 100%; max-width: none; border-right: none; }
  .panel-scroll { overflow: visible; }
  .result-card { position: sticky; bottom: 0; }
  :root { --fs-price: 40px; }
}

/* ---------- סימון מיידי של סוג המחיר ----------
   מחיר מחירון = ירוק יציב ("נעול"), הערכה = כתום שנושם — כדי שיהיה ברור
   במבט אחד אם המספר מדויק או מוערך. */
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(245, 166, 35, 0);   border-color: rgba(245, 166, 35, .40); }
  50%      { box-shadow: 0 0 16px rgba(245, 166, 35, .60); border-color: rgba(245, 166, 35, .95); }
}
@keyframes badgeGlowRough {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 120, 105, 0);   border-color: rgba(255, 150, 140, .40); }
  50%      { box-shadow: 0 0 16px rgba(255, 120, 105, .55); border-color: rgba(255, 150, 140, .95); }
}

.badge.listed {
  background: rgba(14, 159, 110, .20);
  color: #6BE7B0;
  border-color: rgba(14, 159, 110, .60);
  box-shadow: 0 0 14px rgba(14, 159, 110, .42);
}
.badge.estimate {
  background: rgba(245, 166, 35, .18);
  color: #FFC978;
  animation: badgeGlow 1.9s var(--ease) infinite;
}
.badge.rough {
  background: rgba(217, 48, 37, .20);
  color: #FFC1BA;
  animation: badgeGlowRough 1.9s var(--ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
  /* בלי הבהוב — נשארת הילה קבועה שעדיין מבדילה בין מדויק למוערך */
  .badge.estimate, .badge.rough { animation: none; }
  .badge.estimate { border-color: rgba(245, 166, 35, .9); box-shadow: 0 0 12px rgba(245, 166, 35, .5); }
  .badge.rough    { border-color: rgba(255, 150, 140, .9); box-shadow: 0 0 12px rgba(255, 120, 105, .45); }
}

/* ---------- מניעת זום אוטומטי בטלפון ----------
   ספארי ב-iOS מגדיל את כל הדף כשמתמקדים בשדה שהגופן שלו קטן מ-16px, וזה
   משבש את הפרופורציות. במכשירי מגע מעלים את השדות ל-16px בדיוק — הזום נעלם.
   לא נוגעים ב-maximum-scale/user-scalable, כדי שזום בצביטה יישאר זמין. */
@media (pointer: coarse), (max-width: 940px) {
  .combo input,
  .th-row input { font-size: 16px; }
}

/* ---------- סדר שכבות בין הכרטיסים ----------
   לכל .card יש animation: riseIn עם fill both, שמשאיר transform קבוע — ולכן
   כל כרטיס הוא הקשר-ערימה (stacking context) בפני עצמו. התוצאה: ה-z-index
   של רשימת ההשלמה "כלוא" בתוך הכרטיס שלה, וכרטיס היעד (מאוחר יותר ב-DOM)
   מצויר מעליה. הכרטיסים הם פריטי flex, ולכן z-index חל עליהם ישירות. */
.panel-scroll > .card { position: relative; }
#step-model { z-index: 3; }
#step-dest  { z-index: 2; }
/* הכרטיס שבו מקלידים תמיד עולה מעל האחרים.
   חייב סלקטור עם מזהה — אחרת #step-dest (1,0,0) גובר על .card:focus-within. */
#step-model:focus-within,
#step-dest:focus-within { z-index: 20; }