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

   הצבעים מגיעים מ-assets/design-system.css (‏--open-house ומשפחתו). הקובץ
   הזה נטען אחריו בכל דף שמשתמש בו.
   ============================================================================ */

/* ====== הסימן ======
   ה-SVG עצמו נבנה ב-assets/open-house.js. כאן רק המיקום שלו, ובעיקר
   ‏currentColor: כל אלמנט שמחזיק את הסימן קובע את צבעו בעצמו (אדום על רקע
   בהיר, לבן על רקע אדום), ולכן אין כאן ‎fill‎ קשיח. */
.oh-mark{display:block;flex:none;color:inherit}

/* ====== הסימן על רקע אדום ======
   צביעת הסימן בלבן על רצועה אדומה נראית נקייה — ומוחקת את התווית: היא
   לבנה עם קו לבן סביבה, ועל טיפה לבנה היא פשוט נעלמת, כלומר הסימן מאבד
   בדיוק את החלק שאומר "פתוח". במקום זה הוא נשאר בצבעיו ויושב על אריח לבן,
   וכך הוא זהה לעצמו בכל מקום באתר. */
.oh-tile{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;padding:8px;flex:none;
}
.oh-tile .oh-mark{color:var(--open-house,#c8102e)}

/* ====== הפין על המפה ======
   ל-divIcon של Leaflet יש iconSize 0×0, ולכן כל מה שבתוכו ממוקם אבסולוטית
   מנקודת הנכס עצמה — בדיוק כמו ‎.map-pin‎ ו-‎.map-pin-halo‎ ב-index.html.
   הסימן יושב *מעל* תווית המחיר ולא במקומה: המחיר הוא עדיין מה שמחפשים על
   המפה, והסימן הוא מה שאומר מה מיוחד בו. */
.oh-pin{
  position:absolute;top:0;left:0;
  transform:translate(-50%,calc(-100% - 12px));
  pointer-events:none;                 /* הלחיצה שייכת לתווית המחיר שמתחתיו */
  color:var(--open-house,#c8102e);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
/* במפת דף היריד אין תוויות מחיר לצד הסימן — כל הנכסים שם הם נכסי יריד,
   ותווית לכל אחד מהם הייתה שדה מלבנים. שם הסימן *הוא* הפין: החוד שלו יושב
   על הנקודה, והוא זה שנלחץ. */
.oh-pin.is-solo{
  transform:translate(-50%,-100%);
  pointer-events:auto;cursor:pointer;
}
.oh-pin.is-solo:hover{filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}

/* תווית המחיר של נכס ביריד: מסגרת אדומה סביב אותה תווית בצבע סוג העסקה.
   החלפת צבע הרקע הייתה שוברת את המקרא — "מכירה/השכרה/מסחרי" הוא מה שהצבע
   אומר שם — ולכן היריד מוסיף מסגרת ולא מחליף גוון. */
.map-pin.is-openhouse{
  box-shadow:0 0 0 2px var(--open-house,#c8102e), 0 2px 6px rgba(0,0,0,.3);
}
/* כשהתווית מתכווצת לנקודה (אשכול נכסים באותו רחוב) הסימן שמעליה נשאר —
   הוא מה שממשיך לספר שיש כאן בית פתוח, גם כשהמחיר ירד לנקודה. */
.map-pin.is-openhouse.is-dot{
  box-shadow:0 0 0 2px var(--open-house,#c8102e), 0 0 0 4px rgba(255,255,255,.85);
}

/* ====== התגית הקטנה ======
   "ללא עמלת תיווך · עד 14.10" — בשורת תוצאה, בכרטיס, בכל מקום שבו יש
   שורת טקסט אחת ולא יותר. */
.oh-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--open-house,#c8102e);color:#fff;
  font-size:.7rem;font-weight:800;line-height:1.35;padding:3px 9px;
  white-space:nowrap;
}
.oh-chip .oh-mark{color:#fff}
.oh-chip.is-soft{
  background:var(--open-house-tint,#fdecee);
  color:var(--open-house-deep,#9c0c24);
}

/* ====== הבאנר בדף הבית ======
   לפי המוקאפ: נייבי כהה, מסגרת זהב פנימית, "0%" עם שעון עצר ובניין.
   בדסקטופ רצועה אחת — הסדר ב-DOM הוא הסדר בעין ב-RTL: כותרת מימין,
   האיור, ההסבר, והכפתור בקצה השמאלי. מתחת ל-700px הוא נעשה כרטיס:
   האיור למעלה, "אל תחמיצו", הכותרת והכפתור, וטקסט ההסבר יורד (המוקאפ
   לנייד אינו נושא אותו, ובכרטיס צר הוא היה מכפיל את הגובה).

   הוא מוסתר לגמרי כשאין ולו נכס אחד ביריד (‏hidden ב-JS) — באנר שמוביל
   לעמוד ריק גרוע מהיעדר באנר.

   המסגרת היא ‎::before‎ ולא border: היא יושבת 6px פנימה מהקצה, והקצה
   עצמו נשאר כהה — כמו במוקאפ. */
.oh-promo{
  position:relative;isolation:isolate;
  display:flex;align-items:center;gap:22px;
  padding:16px 26px;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #25356b 0%, rgba(37,53,107,0) 60%),
    radial-gradient(60% 50% at 50% 115%, rgba(224,181,74,.35), rgba(224,181,74,0) 70%),
    #0e1938;
  color:#fff;text-decoration:none;
  box-shadow:0 14px 34px -20px rgba(6,14,40,.8);
}
.oh-promo::before{
  content:"";position:absolute;inset:6px;z-index:-1;border-radius:10px;pointer-events:none;
  border:1.5px solid rgba(224,181,74,.75);
}
.oh-promo:focus-visible{outline:3px solid #e0b54a;outline-offset:3px}
.oh-promo-title{
  flex:none;margin:0;font-size:1.75rem;font-weight:900;line-height:1.08;color:#fff;
  letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.oh-promo-art{flex:none;height:92px;width:auto;direction:ltr}
.oh-promo-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.oh-promo-kicker{font-size:1.25rem;font-weight:900;color:#e9c35c;line-height:1.2}
/* שתי שורות קבועות, משפט בכל אחת: ‏nowrap על כל משפט, והגופן מצטמצם עם
   הרוחב (‏clamp). נמדד: השורה הארוכה נכנסת בלי לגעת בכפתור עד ~1010px,
   ולכן מתחת ל-1040px (מרווח 34px לפחות) ההסבר יורד — ולא נשבר. */
.oh-promo-text{display:flex;flex-direction:column;font-size:clamp(.82rem,1.15vw,1rem);line-height:1.45;color:#eef2fb}
.oh-promo-text > span{white-space:nowrap}
.oh-promo-cta{
  flex:none;margin-inline-start:auto;
  padding:13px 24px;border-radius:9px;white-space:nowrap;
  font-size:1rem;font-weight:900;color:#1b1406;
  background:linear-gradient(180deg,#f7dc8a 0%,#e0b54a 45%,#b8862a 100%);
  border:1.5px solid #fbe7a1;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s ease,filter .15s ease;
}
.oh-promo:hover .oh-promo-cta{transform:translateY(-1px);filter:brightness(1.06)}

/* בין 700 ל-1040 פיקסלים ארבעת החלקים לא נכנסים בשורה: ההסבר יורד והרצועה
   נשארת רצועה. */
@media(max-width:1039px){
  .oh-promo-text{display:none}
}
@media(max-width:980px){
  .oh-promo-title{font-size:1.5rem}
}
/* ====== טלפון: כרטיס קומפקטי ======
   הכרטיס המרובע של המוקאפ (איור מעל, כותרת, כפתור) תפס 364px ב-390px —
   כמעט מסך שלם באמצע הגלילה של דף הבית. כאן האיור עובר **לצד** הטקסט
   ולא מעליו: גריד של שתי עמודות, "אל תחמיצו" והכותרת לצד ה-0%, והכפתור
   ברוחב מלא מתחת. אותם חלקים בדיוק, בערך בחצי הגובה. */
@media(max-width:699px){
  .oh-promo{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"art body" "art title" "cta cta";
    align-items:center;column-gap:12px;row-gap:3px;
    padding:12px 14px 14px;text-align:start;
  }
  .oh-promo::before{inset:5px}
  .oh-promo-art{grid-area:art;height:clamp(54px,16vw,66px);align-self:center}
  .oh-promo-body{grid-area:body;align-self:end}
  .oh-promo-title{grid-area:title;align-self:start;font-size:clamp(1.08rem,4.7vw,1.22rem);line-height:1.1}
  /* שורה אחת תמיד: הגופן נגזר מרוחב המסך, כדי ש"אל תחמיצו" לא יישבר
     ב-360px */
  .oh-promo-kicker{font-size:clamp(.8rem,3.9vw,.95rem);white-space:nowrap}
  .oh-promo-cta{grid-area:cta;margin:8px 0 0;text-align:center;padding:9px 16px;font-size:.96rem}
}
/* מתחת ל-360px (מכשירים ישנים וצרים) השורה לא נכנסת גם בגופן המוקטן —
   עדיף שתישבר מאשר שתגלוש מחוץ לכרטיס */
@media(max-width:359px){
  .oh-promo-kicker{white-space:normal}
}

/* ====== הרצועה בדף הנכס ======
   כאן ההבטחה היא כבר על נכס מסוים, ולכן היא נאמרת מלאה: מה מקבלים, עד
   מתי, ובאיזו שפה — "בלי עמלת תיווך" ולא "0%". */
.oh-band{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--open-house,#c8102e);color:#fff;padding:14px 18px;
}
.oh-band .oh-tile{padding:6px}
.oh-band-body{flex:1 1 240px;min-width:0}
/* ‏.oh-band-body ולא ‎.oh-band‎: האריח הלבן שמחזיק את הסימן הוא גם הוא
   ‎span‎ שיושב ישירות ברצועה, וכלל רחב היה הופך אותו לבלוק בגודל טקסט. */
.oh-band-body b{display:block;font-size:1rem;line-height:1.35}
.oh-band-body span{display:block;font-size:.8rem;line-height:1.5;opacity:.92}
/* ברצועה האדומה של דף הנכס המונה הוא לבן־שקוף על אדום, ולא אדום על אדום */
.oh-band .oh-countdown{flex:none;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34)}
.oh-band .oh-countdown.is-urgent{background:rgba(255,255,255,.3)}
.oh-band a{
  flex:none;background:#fff;color:var(--open-house-deep,#9c0c24);
  font-weight:800;font-size:.82rem;padding:9px 16px;text-decoration:none;white-space:nowrap;
}
.oh-band a:hover{background:rgba(255,255,255,.88)}
@media(max-width:559px){
  .oh-band{padding:13px 15px;gap:11px}
  .oh-band a{flex:1 0 100%;text-align:center}
}

/* ====== הספירה לאחור ======
   ‏"נותרו 3 ימים 04:12" — אותו רכיב על האריח, בשורת הרשימה שליד המפה
   וברצועה שבדף הנכס. ה-HTML נבנה ב-‎OpenHouse.countdownHtml()‎ וטיקר אחד
   מעדכן את כולם (‏data-oh-end).

   ‏tabular-nums הוא לא קישוט: בלעדיו הספרות ברוחב שונה זו מזו, והמונה
   "קופץ" הצידה בכל שנייה שמתחלפת. */
.oh-countdown{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:rgba(13,27,61,.72);color:#fff;
  font-size:.72rem;font-weight:700;line-height:1.3;padding:4px 9px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.oh-countdown svg{width:13px;height:13px;flex:none;opacity:.9}
.oh-cd-label{opacity:.82;font-weight:600}
/* חלק הימים ריק ברוב הזמן (מתחת ליממה), ואז הוא לא צריך לתפוס רווח */
.oh-cd-days:empty{display:none}
.oh-cd-value{font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* פחות מיממה: אדום היריד. זו לא אזהרה אלא מידע — וזה הרגע שבו הוא משנה
   התנהגות. */
.oh-countdown.is-urgent{background:var(--open-house,#c8102e)}
.oh-countdown.is-done{background:rgba(74,85,120,.8)}
.oh-countdown.is-plain{
  background:var(--open-house-tint,#fdecee);color:var(--open-house-deep,#9c0c24);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* על אריח הנכס במדף: בראש התמונה, בקצה הנגדי לתגיות ("למכירה", "ללא
   עמלת תיווך") שיושבות בראש מצדו השני.

   **לא בתחתית**: באריח הכיסוי (‏.prop-card.pc-cover) הטקסט — מחיר, כותרת,
   מיקום ומאפיינים — יושב על התמונה מלמטה, ומונה שהוצב שם נקרא מאחורי
   שורת המאפיינים. */
.oh-card-countdown{
  position:absolute;top:38px;inset-inline-end:9px;z-index:3;
  font-size:.68rem;padding:3px 8px;
}
/* 38px = ‏9px הריפוד של שורת התגיות + גובהה. שתי השורות זו מתחת לזו
   באותו קצה, ולא זו לצד זו: באריח ברוחב 250px "למכירה · ללא עמלת תיווך"
   כבר ממלא את השורה, והמונה היה נוחת עליהן. */
/* בשורה הדחוסה (טלפון) הוא יושב על התמונונת, בפינה התחתונה */
.oh-row-countdown{position:absolute;bottom:4px;inset-inline-start:4px;z-index:2;font-size:.66rem;padding:2px 6px}
.oh-row-countdown .oh-cd-label{display:none}

/* ====== מפה לצד רשימה ======
   שתי תצוגות של אותו מלאי, זו לצד זו: הרשימה מימין אומרת *מה* נגמר קרוב,
   והמפה משמאל אומרת *איפה*. ריחוף על שורה מדליק את הסימן שלה במפה — אותו
   קישור דו-כיווני של התצוגה המפוצלת בדף הבית.

   מתחת ל-1000px הן נערמות: מפה ברוחב חצי מסך טלפון אינה מפה. */
.oh-split{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:1000px){
  .oh-split{grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);align-items:stretch}
  /* בלי מפה (‏Leaflet שלא נטען) הרשימה לוקחת את כל הרוחב: עמודה ריקה
     בחצי המקטע נראית כמו מפה שנשברה, ולא כמו החלטה. */
  .oh-split.is-list-only{grid-template-columns:1fr}
}
.oh-split.is-list-only .oh-split-rows{max-height:none}
.oh-split-list{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--line,#e3e8f4);
}
.oh-split-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line,#e3e8f4);
}
.oh-split-head b{font-size:.92rem}
.oh-split-head span{font-size:.72rem;color:var(--ink-soft,#4a5578);white-space:nowrap}
/* הגלילה היא בתוך הרשימה ולא בדף: כך המפה שלצדה נשארת במקומה בזמן
   שעוברים על הנכסים. הגובה נגזר מגובה המפה כדי ששתי העמודות יסתיימו יחד. */
.oh-split-rows{overflow-y:auto;max-height:360px;-webkit-overflow-scrolling:touch}
@media(min-width:1000px){.oh-split-rows{max-height:430px}}
.oh-split-row{
  display:flex;gap:10px;align-items:stretch;padding:10px 12px;
  border-bottom:1px solid var(--hair,#eef1f8);color:inherit;text-decoration:none;
  transition:background .14s ease;
}
.oh-split-row:last-child{border-bottom:0}
.oh-split-row:hover,.oh-split-row:focus-visible{background:var(--open-house-tint,#fdecee);outline:none}
.oh-split-row.is-hot{background:var(--open-house-tint,#fdecee)}
.oh-split-thumb{
  flex:0 0 74px;height:66px;background:var(--field,#eef2fb) center/cover no-repeat;
  position:relative;overflow:hidden;
}
.oh-split-thumb .oh-mark{position:absolute;inset:0;margin:auto;color:var(--open-house,#c8102e);opacity:.35}
.oh-split-main{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px;justify-content:center}
.oh-split-title{
  font-size:.82rem;font-weight:700;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.oh-split-meta{font-size:.7rem;color:var(--ink-soft,#4a5578);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* מחיר ומונה באותה שורה כשהם נכנסים, ובשתי שורות כשלא (‏"₪1,500,000
   לחודש" + מונה של שלושה ימים לא נכנסים יחד בעמודה צרה). המונה כאן קטן
   במעט מזה שעל האריח, כדי שהמקרה הראשון יקרה לרוב. */
.oh-split-foot{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.oh-split-foot .oh-countdown{font-size:.66rem;padding:2px 7px;gap:4px}
.oh-split-foot .oh-countdown svg{width:11px;height:11px}
.oh-split-price{font-size:.84rem;font-weight:800;white-space:nowrap}
.oh-split-empty{padding:22px 14px;font-size:.82rem;color:var(--ink-soft,#4a5578);text-align:center}

/* ====== המונה ======
   "‏7 נכסים ביריד עכשיו" — אותו טקסט בבאנר, בראש דף היריד ובכותרת המדף. */
.oh-count{font-weight:800;color:var(--open-house-deep,#9c0c24)}