/* ============================================================================
   שכבת העיצוב של שוק הנדל״ן — ספיר וזהב
   ----------------------------------------------------------------------------
   קובץ אחד שמחזיק את השפה הוויזואלית של האתר: פלטה, טיפוגרפיה, מקצב מרווחים,
   צורת המשטחים והרכיבים החוזרים (כפתורים, תגיות, תו האמון, סרט "מקודם",
   שלד טעינה, הרקע הנע). הוא נטען בכל עמוד ציבורי **אחרי** ה-<style> הפנימי
   ואחרי site-footer.css, ולכן הוא זה שקובע כשיש התנגשות.

   שלושה כללים שמסבירים כמעט כל שורה כאן:

     1. **הפלטה נכתבת מחדש דרך שמות הטוקנים הקיימים.** הדפים כבר מדברים
        ‎var(--teal)‎ / ‎var(--gold)‎ / ‎var(--paper)‎ בכל מקום, ולכן החלפת
        *הערך* מחליפה את מראה האתר כולו בלי לגעת ב-450KB של CSS פנימי.
     2. **‏--teal ו---gold נגזרים מ---brand ומ---accent.** דף המשרד ודף
        הסוכן/ת מזריקים את צבעי המשרד ב-JS ישירות על ‎documentElement.style‎,
        וסגנון inline גובר על הקובץ הזה — כך המיתוג הפרטי של כל משרד שורד את
        המעבר, ומי שלא בחר צבעים מקבל את ספיר ברירת המחדל.
     3. **זהב אמיתי הוא ‎--brass‎ ולא ‎--gold‎.** ‏--gold הוא תפקיד: "משטח מלא
        שנושא טקסט לבן" (כל ‎.btn-gold‎ באתר), ולכן הוא ספיר. הזהב ‎#c9a227‎
        לעולם לא נושא טקסט לבן — הוא טבעת תו האמון, סרט "מקודם", ה-✦ של
        ההדמיות והקווים הדקים — ולכן הוא טוקן נפרד.

   ‏!important מופיע כאן רק בשני מקומות שבהם השכבה מתווכחת עם כללים פנימיים
   בעלי ספציפיות גבוהה יותר: איפוס עיגול הפינות, וצבעי הפוטר שנכתבו בקובץ
   הפוטר בכוונה כערכים מפורשים. בכל שאר הקובץ הקדימות מגיעה מסדר הטעינה.
   ============================================================================ */

/* ====== 1. טוקנים ====== */
:root{
  /* ---- ספיר: הצבע הראשי. פעולות, קישורים, כותרות, הדגשת נתונים ---- */
  --sapphire:        #0e2a6b;
  --sapphire-deep:   #0d1b3d;
  --sapphire-hover:  #08194a;

  /* ---- זהב: אקסנט בלבד. אף פעם לא רקע לטקסט לבן ---- */
  --brass:           #c9a227;
  --brass-light:     #e5c76a;   /* זהב כטקסט על רקע כהה */
  --brass-ink:       #8a6d10;   /* זהב כטקסט על רקע בהיר — 4.6:1 מול לבן */
  --brass-tint:      #f7f1e2;

  /* ---- בורדו: אך ורק תגית "למכירה". לא כפתור ולא קישור ---- */
  --burgundy:        #6e1022;

  /* ---- ירוקים ---- */
  --wa:              #25a55a;   /* וואטסאפ בלבד */
  --wa-dark:         #1c8546;
  --positive:        #21a565;   /* "12 נכסים נוספו היום", "נמכר עכשיו" */

  /* ---- הבסיס שממנו נגזרים --teal/--gold; דף המשרד דורס אותו ב-JS ---- */
  --brand:           #0e2a6b;
  --brand-dark:      #0d1b3d;
  --accent:          #0e2a6b;
  --accent-dark:     #08194a;
  --accent-ink:      #0e2a6b;
  --on-brand:        #fff;
  --on-accent:       #fff;
  /* ‏"‎-fill‎" = טקסט על משטח שצבוע בגוון המותג, להבדיל מטקסט על רצועה
     כהה. בדף המשרד השניים נפרדים: הרצועות ספיר קבוע (סעיף 7 למטה) בעוד
     שכפתור מלא שבתוכן עדיין בגוון המשרד, ולכן ‎--on-brand‎ נדרס שם ללבן
     ואילו ‎--on-brand-fill‎ ממשיך להימדד מול הגוון עצמו. בשאר הדפים אין
     ‏JS שמחשב אותם והם פשוט לבן, כמו קודם. */
  --on-brand-fill:   #fff;
  --on-accent-fill:  #fff;

  /* ---- מיפוי הטוקנים ההיסטוריים ---- */
  --teal:            var(--brand);
  --teal-dark:       var(--brand-dark);
  --teal-tint:       #eaf0fb;
  --gold:            var(--accent);
  --gold-dark:       var(--accent-dark);
  --gold-tint:       var(--brass-tint);
  --brick:           var(--burgundy);
  --live:            var(--positive);

  --ink:             #0d1b3d;
  --ink-soft:        #4a5578;
  --ink-muted:       #6b7796;
  --ink-faint:       #8b93b0;

  --paper:           #f4f7fe;   /* רקע העמוד */
  --paper-raised:    #ffffff;
  --surface:         #ffffff;
  --surface-soft:    #f8faff;
  --hero-ground:     #eaf0fb;
  --field:           #eef2fb;   /* מסלולי טאבים, צ׳יפים מהירים */

  --line:            #e3e8f4;
  --hair:            #eef1f8;
  --hair-strong:     #dde3f2;

  /* ---- צבע לכל סוג עסקה. אותו קוד בפין במפה, במקרא ובתגית בכרטיס ---- */
  --deal-sale:       #6e1022;   /* למכירה — הבורדו, ורק כאן */
  --deal-rent:       #0e2a6b;   /* להשכרה — ספיר */
  --deal-commercial: #9a4e00;   /* מסחרי — חום־כתום; 4.6:1 מול טקסט לבן */

  /* ---- יריד הבתים הפתוחים ----
     האדום היחיד באתר שאינו הבורדו של "למכירה", ובכוונה: שתי התגיות
     יושבות זו לצד זו על אותו אריח, והן אומרות דברים שונים לגמרי — האחת
     "זו עסקת מכירה" והשנייה "אין כאן עמלת תיווך". בורדו כהה (‏#6e1022)
     ליד סקרלט (‏#c8102e) נקראים כשני מצבים של אותו דבר, ולכן הפער ביניהם
     מכוון. שייך ליריד בלבד: לא כפתור, לא שגיאה ולא קישור. */
  --open-house:      #c8102e;
  --open-house-deep: #9c0c24;   /* אותו אדום כטקסט על רקע בהיר — 5.9:1 */
  --open-house-tint: #fdecee;

  /* ---- כוכבים ותו אמון ---- */
  --star:            #c9a227;
  --star-off:        #d3daea;
  /* ‏--verified משמש *כטקסט* על ‎--verified-tint‎ ולא כצבע מילוי (תגית
     "משרד מאומת"). ‏#21a565 הוא ירוק המילוי של המערכת — ‎--positive‎ —
     ועל טינט בהיר הוא נתן 2.8:1. הגוון הכהה נשאר באותה משפחת ירוק
     ומגיע ל-5.4:1. ‏--positive עצמו לא נגע: שם הוא באמת מילוי. */
  --verified:        #14713f;
  --verified-tint:   #e5f5ed;

  /* ---- צורה: פינות מעוגלות (אוקטובר 2026; עד אז הכול היה מרובע) ----
     סולם אחד לכל האתר - ראו סעיף 3 למטה. */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 24px; --radius: 12px;

  /* ---- צללים: ספיר מדולל, לא שחור ---- */
  --shadow-xs: 0 1px 2px rgba(14,42,107,.06);
  --shadow-sm: 0 6px 18px -14px rgba(14,42,107,.5);
  --shadow:    0 10px 30px -24px rgba(14,42,107,.5);
  --shadow-md: 0 10px 30px -24px rgba(14,42,107,.5);
  --shadow-lg: 0 22px 50px -30px rgba(14,42,107,.5);
  --shadow-card: 0 10px 30px -24px rgba(14,42,107,.5);
  --shadow-lift: 0 22px 50px -30px rgba(14,42,107,.5);
  --shadow-search: 0 26px 60px -34px rgba(14,42,107,.55);

  /* ---- שכבות זכוכית ---- */
  --glass:        rgba(255,255,255,.78);
  --glass-strong: rgba(255,255,255,.9);

  /* ---- ורידים שדפים מסוימים מגדירים לעצמם ---- */
  --bronze: #8a6d10; --bronze-soft: #c9a227; --bronze-tint: #f7f1e2;
  --veil-ink: #0d1b3d;
  --brand-veil: rgba(13,27,61,.62);
  --accent-veil: rgba(14,42,107,.86);
  --cover-veil-strong: rgba(13,27,61,.5);
  --cover-veil-soft: rgba(13,27,61,.05);
}

/* ====== 2. יסודות ====== */
/* ‏margin:0 — ‏8px של ברירת המחדל של הדפדפן, שאיש לא ביקש. רוב הדפים
   מאפסים אותו ב-style שלהם, ובעשרה שאין בהם כלל ‎body{}‎ משלהם (אודות,
   נגישות, המשרדים, המתווכים, הכתבות, תנאי השימוש ועוד) הוא שרד בשקט:
   התוכן שם יושב ממילא בתוך ‎.wrap‎ ממורכז, ולכן 8px נוספים מכל צד לא
   נראו. מה שכן נראה הוא כל מה שאמור להגיע לקצה המסך — סרגל הכותרת
   הדביק, הפוטר, ורצועת מחפשי הנכס שבראשו — שנעצרו 8px לפני הקצה. */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Heebo',system-ui,sans-serif;
  font-weight:400;
}

/* קול טיפוגרפי אחד: Heebo בכל המשקלים במקום שילוב serif+sans. הכותרות
   דחוסות (letter-spacing שלילי) — זה מה שנותן להן את הנוכחות, לא הגופן. */
h1,h2,h3,h4,.display,.logo-word,.footer-brand .footer-logo span{
  font-family:'Heebo',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
}
h4,h5,h6{font-weight:700}

/* גוף הטקסט ב-16px ובניגודיות ‎≥4.5:1‎ — כדי שתפריט הנגישות יהיה עזר
   ולא תנאי לקריאת האתר. */
body,p,li,input,select,textarea{font-size:16px}
p{color:var(--ink-soft);line-height:1.7}

a{color:inherit}
a:hover{color:var(--sapphire-hover)}

/* מיקוד גלוי ואחיד בכל האתר. מוגדר פעם אחת כאן ולא בכל דף. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}

::selection{background:rgba(14,42,107,.16)}

/* ====== 3. צורה: פינות מעוגלות ======
   ‏**אוקטובר 2026: ההעדפה היא פינות מעוגלות** (עד אז הכול היה מרובע, בכלל
   אחד של ‎border-radius:0 !important‎ על תבניות מחלקה רחבות). הסולם:

     כפתורים, שדות, לשוניות     10px
     כרטיסים                    16px
     חלונות (מודאל)             18px
     גלולות וצ׳יפים             999px
     תגיות קטנות (badge)        6px

   ‏!important נשאר, מאותה סיבה שהיה: הרבה כללים בדפים עצמם כותבים
   ‎border-radius:0‎ מפורש (מהתקופה המרובעת), וממוענים בשתי מחלקות.

   ‏**התבניות כאן צרות יותר מבעבר, בכוונה.** הכלל המרובע תפס כל מחלקה שמכילה
   ‎-tab‎, ‎-panel‎ או ‎-modal‎ - וזה לא שינה כלום כשהערך היה 0. עם עיגול זה
   היה מעגל גם את מה שאינו רכיב: שכבת הרקע של חלון (‏‎.filter-modal-overlay‎,
   מסך מלא), הכותרת והתחתית שבתוכו, מעטפת של טבלה (‏‎.cma-table‎), ופאנל צד
   של המפה. לכן כאן - רק הרכיב עצמו.

   כרטיסי הנכסים (‏‎.prop-card‎) מעוגלים גם הם, ו-‎overflow:hidden‎ שלהם (‏property-card)
   חותך את התמונה לפי הפינה. ‏docs/home-page-sections.md, "פינות". */
.btn,.cta,.footer-cta a,.hamburger,
[class*="-btn"]:not([class*="-btns"]),
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,
[class*="-tabs"] > button,[class*="-tabs"] > a,.tab-btn,.bp-tab,.bn-tab{
  border-radius:10px !important;
}
.card,.prop-card,[class*="-card"]:not([class*="-cards"]),.thumb,.lead-banner,.state,.oh-how > ol{
  border-radius:16px !important;
}
.filter-modal,.calc-modal .mlead,.qb-modal,.mlead-panel,.a11y-panel,.bell-panel,.match-panel,.profile-panel,.dash-panel,.mobile-menu .menu-panel{
  border-radius:18px !important;
}
.chip,.pill,.tag,.footer-chip,.footer-seo-links a,
[class*="-chip"]:not([class*="-chips"]):not([class*="-chip-row"]):not([class*="-chip-x"]){
  border-radius:999px !important;
}
.badge,.pc-badges span,.pc-badge,.ad-slot .tag,.prop-card .ribbon,
[class*="-badge"]:not([class*="-badges"]):not([class*="-badge-"]):not(.qb-badge){
  border-radius:6px !important;
}
/* מה שנשאר ישר: התמונה שבתוך כרטיס (הכרטיס חותך), והמגירה של התפריט */
.pc-media,.pc-thumb,.prop-card .thumb,.mobile-menu{border-radius:0 !important}
/* חריגים: מה שהוא באמת דיסקה. הרשימה מפורשת ולא ‎[class*="dot"]‎ — התבנית
   הרחבה תפסה גם מכולות (‏.cf-dots), כלומר משטח רחב שקיבל פינות של עיגול.

   ‏**תו האמון מופיע כאן בארבע צורות ולא באחת.** ברוב הדפים הוא נבנה ע"י
   ‎assets/quality-badge.js‎ ואז הוא ‎.qb-badge img‎ — תמונה בלי מחלקה, שכלל
   האיפוס למעלה כלל לא נוגע בה. אבל בשלושה מקומות הוא ‎<img>‎ שנושא מחלקה
   משלו, ומחלקה שמסתיימת ב-‎-badge‎ נופלת ישירות לתוך ‎[class*="-badge"]‎
   למעלה — ואז ‎border-radius:50%‎ שכתוב בדף עצמו נדרס ב-‎!important‎, והחותמת
   העגולה מוגשת כריבוע:

     ‎.dm-badge‎ — קרוסלת "האנשים מאחורי העסקאות" בדף הבית
     ‎.ag-badge‎ — אריחי רשימת המתווכים (‏agents.html)
     ‎.pp-badge‎ — התצוגה המקדימה של הפרופיל ב-CRM

   שלושתן חייבות להופיע כאן בשמן. מי שמוסיף/ה מקום רביעי שבו החותמת היא
   ‎<img class="...-badge">‎ צריך/ה להוסיף אותו לרשימה — או, עדיף, לא לקרוא
   למחלקה ‎-badge‎ מלכתחילה. */
.qb-badge img,.dm-badge,.ag-badge,.pp-badge,
.avatar,.agent-avatar,.pc-avatar,
[class*="avatar"],[class*="medal"],
.live-dot,.info-dot,.ai-handle,
.cf-dots button,
.leaflet-marker-icon,.leaflet-marker-icon *{
  border-radius:50% !important;
}
/* ‏**שני הסלקטורים האלה חייבים לשבת כל אחד בכלל משלו**, ולא ברשימה שלמעלה.
   סלקטור עם קידומת של יצרן אחד אינו מוכר אצל היצרן השני, וכלל שברשימת
   הסלקטורים שלו יש אחד שאינו מוכר — **נזרק כולו**. כך זה היה כאן: הרשימה
   למעלה הכילה ‎::-moz-range-thumb‎, ולכן ב-Chrome כל כלל החריגים לא נטען
   בכלל, וכל מה שברשימה — תו האמון, תמונות הפרופיל, נקודות המצב — איבד את
   העיגול. הכשל שקט לחלוטין: אין שגיאה בקונסול, ה-CSS נראה תקין בקובץ, ורק
   התוצאה על המסך מרובעת. */
.calc-range::-webkit-slider-thumb{border-radius:50% !important}
.calc-range::-moz-range-thumb{border-radius:50% !important}

/* ====== 4. כפתורים ======
   על רקע בהיר יש **צבע כפתור מלא אחד** — ספיר. ‏.btn-gold ו-.btn-teal
   נראים זהים בכוונה: ההיררכיה נוצרת ממלא־מול־מתאר, לא משני צבעים מלאים
   שמתחרים על אותה תשומת לב. */
.btn{
  font-family:'Heebo',system-ui,sans-serif;
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  padding:13px 24px;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
/* ‏--on-brand-fill ולא ‎--on-brand‎: הרקע כאן הוא ‎--teal‎, כלומר גוון המשרד
   עצמו — גם כשהכפתור יושב בתוך רצועה שנצבעה בספיר ו---on-brand נדרס שם
   ללבן. משרד עם גוון ראשי בהיר קיבל בדיוק את הצירוף הזה: לבן על זהב. */
.btn-gold,.btn-teal{background:var(--teal);color:var(--on-brand-fill);box-shadow:none}
.btn-gold:hover,.btn-teal:hover{
  background:var(--sapphire-hover);color:#fff;transform:none;box-shadow:none;
}
.btn-ghost{background:transparent;border:1.5px solid var(--hair-strong);color:var(--sapphire)}
.btn-ghost:hover{background:var(--teal-tint);border-color:var(--sapphire);color:var(--sapphire)}

/* הכפתור הזהוב קיים בהקשר אחד בלבד: פעולה ראשית על רצועה כהה, שם ספיר
   על ספיר לא נקרא. הטקסט עליו כהה — זהב אף פעם לא נושא לבן. */
.btn-brass{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brass);color:var(--sapphire-deep);
  font-weight:800;padding:13px 24px;border:none;
}
.btn-brass:hover{background:#dcb63c;color:var(--sapphire-deep)}

/* וואטסאפ הוא הצבע היחיד שנשאר ירוק — ואחד למסך. */
[class*="wa-btn"],[class*="whatsapp"]{background:var(--wa)}

/* ====== 5. משטחים ====== */
.card,.prop-card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
hr,.divider{border:none;border-top:1px solid var(--hair)}

/* ====== 6. כותרות סקציה ======
   ה-eyebrow הוא הקו הזהוב היחיד בגוף העמוד — הוא מסמן "כאן מתחיל פרק"
   ומחזיק את הזהב בשימוש עקבי לאורך כל האתר. */
.eyebrow{color:var(--brass-ink);font-weight:800;letter-spacing:.14em;font-size:.7rem}
.eyebrow::before{background:var(--brass);height:2px;width:20px}
.section-head h2,.section-head h3{color:var(--ink)}

/* ====== 7. הכותרת העליונה ====== */
header.site{
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
header.site .primary a{color:var(--ink-soft);font-weight:500}
header.site .primary a:hover{color:var(--sapphire)}
/* הפריט הפעיל מסומן בקו זהוב 2px מתחתיו — אותו זהב של ה-eyebrow. */
header.site .primary a[aria-current],header.site .primary a.is-active{
  color:var(--sapphire);font-weight:700;
  box-shadow:inset 0 -2px 0 var(--brass);
}
.logo-word{font-family:'Heebo',system-ui,sans-serif;font-weight:800;letter-spacing:-.035em}
.logo-word span{color:var(--brass-ink)}

/* ---- הנעילה של הלוגו ----
   הסמל, ומצדו שתי שורות: שם האתר, קו זהב דק ברוחב השם, ומתחתיו האזור
   במרווח אותיות פתוח. הקו הוא מה שהופך שתי שורות טקסט ליחידה אחת, והוא
   אותו זהב של ה-eyebrow ושל סרט "מקודם" — הלוגו לא מביא צבע משלו. */
.logo-word{
  display:flex;flex-direction:column;align-items:stretch;
  font-size:21px;line-height:1.05;color:var(--ink);white-space:nowrap;
}
.logo-word>span{
  font-size:9px;font-weight:600;letter-spacing:.18em;
  color:var(--ink-muted);margin-top:3px;padding-top:3px;
  border-top:1px solid var(--brass);
}
@media(max-width:520px){
  .logo-word{font-size:17px}
  .logo-word>span{font-size:8px;letter-spacing:.14em}
}

/* ---- רצועות כהות (הערכת שווי, מחפשי נכס, המחשבונים) ----
   קודם הן היו חצי־שקופות מעל הרקע הזורם, ולכן כל אחת קיבלה גוון אחר לפי
   מה שבמקרה עבר מתחתיה — משטח שאמור להיות "הבמה" של קריאה לפעולה יצא
   אפרפר ובוצי. עכשיו כולן על אותו ספיר אטום.

   ‏**והטקסט שעליהן לבן — כאן, ליד הרקע שקובע זאת.** בדף המשרד הרצועות
   נצבעו בגוון שהמשרד בחר, והטקסט עליהן נקרא ‎--on-accent‎ / ‎--on-brand‎:
   משתנים ש-agency.html מחשב לפי ניגודיות מול אותו גוון, ומחזירים דיו כהה
   כשהמשרד בחר גוון בהיר. הכלל הזה לקח מהן את הרקע והשאיר להן את הטקסט,
   ולכן משרד עם אקסנט זהוב קיבל דיו כהה על ספיר כהה — כותרת, שאלות האשף,
   התוויות והשבבים, כולם בלתי נראים. שני משרדים מתוך ארבעה היו במצב הזה.

   התיקון יושב כאן ולא בדף: הרקע והצבע שנקרא מולו חייבים להיקבע באותו
   מקום, אחרת הם ייפרדו שוב בשינוי הבא. דריסת המשתנים (ולא רק ‎color‎)
   נחוצה כי צאצאים רבים בתוך הרצועה מציינים ‎color:var(--on-brand)‎
   במפורש ולכן אינם יורשים.

   ‏--on-gold נשאר כפי שהוא: הוא הטקסט על שבבי הזהב *בתוך* הרצועה, והם
   עדיין בגוון המשרד.

   באנר מחפשי הנכס יצא מכאן בפועל: בדפי המשרד והסוכן/ת הוא נצבע בתכלת
   קבועה דרך ‎.lead-banner.buyer-banner‎ — שתי מחלקות, כדי לגבור על הכלל
   הזה — ובכל שאר העמודים דרך ‎.footer-lead‎. הוא נשאר ברשימה כרשת ביטחון
   למקרה שרצועה כזו תופיע בעמוד שאין בו אף אחד מהשניים. */
.owner-banner,.buyer-banner{
  background:linear-gradient(160deg,var(--sapphire) 0%,var(--sapphire-deep) 100%);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  --on-brand:#fff;
  --on-accent:#fff;
}

/* ====== 8. תגיות עסקה ======
   בורדו = למכירה, ספיר = להשכרה, חום־כתום = מסחרי. אותו קוד צבע בפין
   שבמפה, במקרא שמתחתיה ובתגית שעל הכרטיס. */
.pc-badge.is-sale{background:var(--deal-sale)}
.pc-badge.is-rent{background:var(--deal-rent)}
.pc-badge.is-commercial{background:var(--deal-commercial)}
.pc-badge.is-excl{background:var(--sapphire-deep)}
.pc-badge.is-ai{background:var(--sapphire-deep)}
.pc-badge{font-weight:800;letter-spacing:.02em;font-size:11px}
:root{
  --pc-sale-bg:var(--deal-sale);
  --pc-rent-bg:var(--deal-rent);
  --pc-commercial-bg:var(--deal-commercial);
  --pc-excl-bg:var(--sapphire-deep);
  --pc-ai-bg:var(--sapphire-deep);
}

/* ====== 9. סרט "מקודם" ======
   מסומן זהב עם יהלום, בגודל אחד ובפינה אחת בכל האתר — כך הקידום נקרא
   כשפה משלו ולא מתחרה בתגיות העסקה.

   **הצבע נקבע כאן ורק כאן, לכל צורות התצוגה של הנכס.** אריח הכיסוי
   (‏.prop-card .ribbon), השורה הדחוסה של מדפי דף הבית (‏.prop-row .pr-promo)
   ושורת תוצאת החיפוש (‏.sr-thumb .ribbon) הן אותו נכס באותו קידום, ולכן
   סרט זהב באחת וסרט ספיר בשנייה נקרא כשני דברים שונים — בדיוק בעמוד שבו
   שתיהן מוצגות זו מתחת לזו. המידות נשארות מקומיות: ‎.pr-promo‎ יושב על
   תמונונת של 96px ולא על אריח. */
.prop-card .ribbon,.prop-row .pr-promo,.sr-thumb .ribbon,.promoted-flag{
  background:var(--brass);color:var(--sapphire-deep);
  font-weight:800;letter-spacing:.04em;border:none;box-shadow:none;
}
.prop-card .ribbon,.sr-thumb .ribbon,.promoted-flag{font-size:11px;padding:4px 9px}
.prop-card .ribbon::before,.prop-row .pr-promo::before,
.sr-thumb .ribbon::before,.promoted-flag::before{content:"◆ ";font-size:.85em}

/* ====== 10. תו האמון ======
   התו עצמו הוא הקישור להסבר הדירוג — אין לצדו קישור טקסט. הטבעת הזהובה
   היא מה שמסמן אותו כאלמנט אינטראקטיבי. */
.qb-badge img{
  box-shadow:0 0 0 2px var(--brass),0 2px 8px rgba(13,27,61,.2);
  filter:none;
}
/* ‏44×44 שטח נגיעה גם כשהדיסקה קטנה יותר — כלל נגישות, לא קישוט. */
.qb-badge{min-width:44px;min-height:44px}

/* ====== 11. צ׳יפ הדמיית AI ====== */
.ai-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--sapphire-deep);color:var(--brass-light);
  font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 9px;
}
.ai-chip::before{content:"✦";color:var(--brass)}

/* ====== 12. שלד טעינה ======
   מלבן שנושם בגאומטריה הסופית של הכרטיס. אף פעם לא "טוען…" כטקסט:
   טקסט טעינה מזיז את הפריסה כשהתוכן מגיע, שלד לא. */
.skeleton,[class*="skeleton"]{
  background:linear-gradient(90deg,var(--field) 25%,#e4ebf9 37%,var(--field) 63%);
  background-size:400% 100%;
  animation:dsShimmer 1.4s ease-in-out infinite;
}
@keyframes dsShimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ====== 13. שדות ====== */
input,select,textarea{
  background:var(--surface);
  border:1px solid var(--hair-strong);
  color:var(--ink);
}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input:focus,select:focus,textarea:focus{border-color:var(--sapphire)}

/* ====== 14א. רצועת המבזקים ======
   רצועה דקה על משטח לבן: תגית זהובה, כותרת בספיר. קודם הרצועה ישבה על
   משטח שמנת עם תגית בורדו — צירוף שקרא כבאנר פרסומי ולא כשורת עדכון. */
.ticker{background:var(--surface);border-block:1px solid var(--line);padding:9px 0}
.ticker-flag{background:var(--brass);color:var(--sapphire-deep);font-weight:800}
.ticker-flag .live-dot{background:var(--sapphire-deep)}
.ticker-text{color:var(--sapphire);font-weight:600}
.ticker-more{color:var(--brass-ink);font-weight:700}

/* ====== 15. הרקע הנע ======
   מוגדר במלואו ב-assets/page-bg.js (שכבות, צבעים ואנימציות), ומורכב בכל דף
   שטוען אותו עם ‎data-auto‎. הוא לא חוזר כאן כדי שלא יהיו לו שתי הגדרות. */

/* ====== 16. הפוטר ======
   הצבעים עצמם יושבים ב-site-footer.css (הקובץ ההוא חייב לעמוד בפני עצמו גם
   בדף בלי טוקנים), ולכן כאן נשארת רק ההתאמה שלא ניתן לבטא שם: הכותרות
   בלבן מלא מול גוף הטקסט הכחלחל. */
footer.site h3,footer.site h4,.footer-brand .footer-logo span{color:#fff}

/* ====== 17. תנועה מופחתת ======
   הכלל הזה מכבה **כל** אנימציה באתר, לא רק את אלה של הקובץ הזה. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
html.a11y-nomotion *,html.a11y-nomotion *::before,html.a11y-nomotion *::after{
  animation:none !important;
}

/* ====== שבירת שורות: לא באמצע משפט ======
   ‏balance לכותרות (שורות באורך דומה, בלי מילה יתומה בשורה האחרונה), ו-pretty
   לפסקאות (מונע שורה אחרונה של מילה אחת). זה שיפור הדרגתי: דפדפן שלא מכיר
   את המאפיין פשוט שובר כמו קודם. איפה שצירוף חייב להישאר יחד ("פחות מדקה",
   "עם גבריאלה") - ‏‎.nw‎ (‏white-space:nowrap) על הצירוף עצמו, ב-HTML. */
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,figcaption,blockquote{text-wrap:pretty}
.nw{white-space:nowrap}