/* ============================================================================
   באנר מחפשי הנכס
   ----------------------------------------------------------------------------
   שורת הזמנה אחת, ומתחתיה — רק למי שלוחץ/ת — אשף בן שלושה שלבים ששומר
   חיפוש (‏saved-search-intake, ראו docs/smart-search-agent.md). ברוב
   העמודים הוא הרצועה הראשונה בפוטר; שם ישבה עד היום ההרשמה לרשימת
   התפוצה, ושתיהן ביקשו מאותו אדם את אותו דבר במילים אחרות — זו שומרת את
   **החיפוש** ולא רק את האימייל.

   ‏**‎.buyer-lead‎ ולא ‎.footer-lead‎.** הבאנר אינו של הפוטר, הוא רק ישב בו
   עד היום: בדף הנכס הוא יצא משם ועבר אל מתחת למפה, בתוך עמודת התוכן
   (ראו property.html). המארח נושא ‎.buyer-lead‎ בשני המקרים; בפוטר הוא
   נושא גם ‎.footer-lead‎, שהיא המרווח של הפוטר ב-assets/site-footer.css.

   שלושה כללים שמחזיקים את הקובץ עצמאי, ולכן ניתן להכללה בכל דף:

     1. **צבעים מפורשים ולא משתני CSS.** ‏var(--gold) קיים ב-design-system
        אבל לא בכל דף, וצ׳יפ נבחר שאין לו צבע אינו סימון.
     2. **הכול תחת ‎.buyer-lead‎.** ‏‎.chip‎, ‎.btn‎ ו-‎.wiz-*‎ הם שמות נפוצים
        שקיימים בחלק מהדפים בצבעים של רקע בהיר; הבאנר יושב על תכלת כהה,
        ובלי התיחום הזה טקסט לבן היה נופל על רקע לבן.
     3. **שום דבר לא נשען על ‎.wrap‎ של הדף המארח** — הבאנר הוא כרטיס בתוך
        המארח שלו, ורוחבו נקבע שם. בפוטר זה ‎.footer-wrap‎, ובדף הנכס
        עמודת התוכן — ולכן שם הוא יוצא בדיוק ברוחב המפה שמעליו.

   ההתנהגות (האשף, טעינת השכונות, השליחה) יושבת ב-assets/buyer-banner.js.
   העמודים שכבר נושאים אשף משלהם — index, agency, agent — אינם טוענים את
   שני הקבצים האלה; ראו docs/site-footer.md.
   ============================================================================ */

.buyer-lead{position:relative}

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

   ‏#1668a6 הוא הקצה הבהיר של המדרג, וטקסט לבן עליו הוא 5.9:1 — מעל
   4.5:1 גם בקצה הזה. פס הזהב העליון ‏(inset) והזוהר התכול שמתחת הם מה
   שמרים אותה מהפוטר: בלעדיהם אפילו התכלת נראית כמו עוד שכבה בו. */
.buyer-lead .lead-banner{
  color:#fff;border:1px solid rgba(201,162,39,.5);border-radius:0;overflow:hidden;
  background:linear-gradient(160deg,#093a6d,#1668a6);
  box-shadow:inset 0 3px 0 #c9a227, 0 14px 32px rgba(6,32,62,.45);
  font-family:'Heebo',sans-serif;line-height:1.6;
}
.buyer-lead .lead-banner *{box-sizing:border-box}

/* ====== שורת ההזמנה ======
   כפתור אחד ולא כותרת עם כפתור קטן בתוכה: כל השורה היא שטח לחיצה, וזה
   ההבדל בין שני מבקרים שפותחים את האשף לבין אחד. */
.buyer-lead .lead-teaser{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  width:100%;padding:15px 16px;text-align:right;color:#fff;
  background:transparent;border:0;font:inherit;cursor:pointer;
}
.buyer-lead .lead-teaser-icon{
  width:42px;height:42px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
}
.buyer-lead .lead-teaser-icon svg{width:23px;height:23px}
.buyer-lead .lead-teaser-copy{flex:1 1 55%;min-width:0;display:flex;flex-direction:column;gap:2px}
.buyer-lead .lead-teaser-title{font-size:1.02rem;font-weight:800;line-height:1.28}
/* ‏.9 ולא ‎.8‎: על התכלת הבהירה יותר, ‎.8‎ הוריד את שורת המשנה (‏12px)
   ל-4.4:1 — מתחת ל-4.5:1 שהתקן דורש לטקסט רגיל. */
.buyer-lead .lead-teaser-sub{font-size:.76rem;line-height:1.45;color:rgba(255,255,255,.9)}
/* זהב מלא עם טקסט כהה. זהב לעולם לא נושא טקסט לבן — יחס הניגודיות שם 2.4:1 */
.buyer-lead .lead-teaser-go{
  flex:none;padding:10px 15px;font-size:.82rem;font-weight:800;white-space:nowrap;
  background:#c9a227;color:#0d1b3d;border:0;
  transition:transform .15s ease, box-shadow .15s ease;
}
.buyer-lead .lead-teaser:hover .lead-teaser-go{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.3)}
.buyer-lead .lead-teaser-go-close{display:none}
.buyer-lead .lead-banner.is-open .lead-teaser-go-open{display:none}
.buyer-lead .lead-banner.is-open .lead-teaser-go-close{display:inline}
/* פתוח: אותה שורה הופכת לכותרת שאפשר לסגור בה, ולכן ה-CTA מתעמעם למסגרת —
   כפתור מלא מעל אשף פתוח הוא הבטחה כפולה. ‏.55 ולא ‎.35‎: זו המסגרת היחידה
   שמסמנת את גבול הכפתור, ו-WCAG 1.4.11 דורש 3:1 לגבול של פקד פעיל. */
.buyer-lead .lead-banner.is-open .lead-teaser-go{
  background:transparent;color:#fff;box-shadow:none;
  border:1.5px solid rgba(255,255,255,.55);
}
@media(max-width:400px){
  .buyer-lead .lead-teaser-go{flex:1 0 100%;text-align:center}
}

/* ====== האשף ====== */
.buyer-lead .lead-panel{padding:2px 16px 20px;text-align:center;animation:buyWizIn .24s ease}
.buyer-lead .owner-intro p{
  color:#D7E6F5;font-size:.9rem;line-height:1.5;max-width:42ch;margin:8px auto 0;
}
/* ‏text-align:right מחזיר את תוכן האשף ליישור RTL רגיל — רק ההודעה הסגורה
   ממורכזת; תוויות ושדות טופס ממורכזים היו נקראים גרוע. */
.buyer-lead .owner-wizard{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  padding:16px;text-align:right;max-width:520px;margin:16px auto 0;
}
.buyer-lead .wiz-steps{display:flex;gap:6px;list-style:none;margin:0 0 16px;padding:0}
.buyer-lead .wiz-steps li{
  flex:1;display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;
  color:rgba(255,255,255,.62);padding-bottom:8px;border-bottom:2px solid rgba(255,255,255,.22);
}
.buyer-lead .wiz-steps li.active{color:#fff;border-bottom-color:#c9a227}
.buyer-lead .wiz-steps li.done{color:#F0D6AA;border-bottom-color:#c9a227}
.buyer-lead .wiz-steps .dot{
  width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:.68rem;flex:0 0 auto;
}
.buyer-lead .wiz-steps li.active .dot,
.buyer-lead .wiz-steps li.done .dot{background:#c9a227;color:#0d1b3d}

.buyer-lead .wiz-panel{display:none}
.buyer-lead .wiz-panel.active{display:block;animation:buyWizIn .22s ease}
@keyframes buyWizIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.buyer-lead .wiz-q{color:#fff;font-weight:700;font-size:1rem;margin:0 0 12px}
.buyer-lead .wiz-label{display:block;font-size:.74rem;font-weight:700;color:#D7E6F5;margin:14px 0 6px}
/* ‎.wiz-label‎ הוא display:block, וכלל מחלקה גובר על ‎[hidden]‎ של הדפדפן */
.buyer-lead .wiz-label[hidden]{display:none}
.buyer-lead .wiz-hint{font-weight:600;font-size:.7rem;color:rgba(255,255,255,.72)}
.buyer-lead .wiz-input{
  width:100%;min-width:0;border:none;padding:12px;font-size:.9rem;
  font-family:inherit;color:#0d1b3d;background:#fff;
}
.buyer-lead .wiz-input.invalid{box-shadow:0 0 0 2px #c9a227}
.buyer-lead .wiz-err{color:#FFE3E3;font-size:.78rem;font-weight:700;margin:8px 0 0;min-height:1.1em}
.buyer-lead .wiz-nav{display:flex;gap:8px;margin-top:14px}

/* הכפתורים מוגדרים כאן במלואם ולא נשענים על ‎.btn‎ של הדף המארח — ‎.btn‎
   בדף בהיר הוא ספיר על לבן, וכאן הוא יושב על ספיר */
.buyer-lead .btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  padding:11px 16px;font-size:.85rem;font-weight:700;font-family:inherit;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.buyer-lead .btn-gold{background:#c9a227;border-color:#c9a227;color:#0d1b3d}
.buyer-lead .btn-gold:hover:not(:disabled){background:#dcb63c;border-color:#dcb63c}
.buyer-lead .btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.buyer-lead .btn-ghost-light:hover{background:rgba(255,255,255,.1)}
.buyer-lead .btn:disabled{opacity:.6;cursor:not-allowed}

/* ‎.lead-toggle‎ ולא ‎.deal-toggle‎: השם השני תפוס במודאל הסינון, שיושב על
   רקע בהיר — אותן מחלקות היו הופכות שם את הטקסט ללבן על לבן. */
.buyer-lead .lead-toggle{display:flex;flex-wrap:wrap;gap:8px}
.buyer-lead .lead-toggle button{
  flex:1 1 0;min-width:84px;padding:9px;font-size:.82rem;font-weight:700;
  background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;
  font-family:inherit;cursor:pointer;
}
.buyer-lead .lead-toggle button.active{background:#c9a227;border-color:#c9a227;color:#0d1b3d}

.buyer-lead .chip-row{display:flex;flex-wrap:wrap;gap:7px}
.buyer-lead .chip{
  padding:8px 14px;font-size:.82rem;font-weight:600;font-family:inherit;cursor:pointer;
  background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#fff;
}
.buyer-lead .chip[aria-pressed="true"]{background:#c9a227;border-color:#c9a227;color:#0d1b3d}

.buyer-lead .buy-range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.buyer-lead .buy-range-field{display:flex;flex-direction:column;gap:5px;font-size:.72rem;font-weight:700;color:#D7E6F5}
.buyer-lead .buy-check{
  display:flex;align-items:flex-start;gap:9px;margin-top:14px;cursor:pointer;
  font-size:.82rem;line-height:1.45;color:#fff;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);padding:11px 13px;
}
.buyer-lead .buy-check input{margin:2px 0 0;flex:none;accent-color:#c9a227}
.buyer-lead .buy-check:has(input:checked){background:rgba(232,200,138,.22);border-color:#c9a227}
.buyer-lead .buy-privacy{font-size:.72rem;color:rgba(255,255,255,.72);margin:10px 0 0}
/* סיכום מה שנבחר בשני השלבים הקודמים, מעל שדות הקשר: הוא מזכיר על מה
   חותמים בדיוק ברגע שמוסרים טלפון. */
.buyer-lead .buy-recap{
  font-size:.78rem;line-height:1.5;color:#D7E6F5;
  background:rgba(0,0,0,.18);padding:10px 12px;margin-bottom:4px;
}

.buyer-lead .wiz-done{text-align:center;padding:10px 0}
.buyer-lead .wiz-done-mark{
  width:52px;height:52px;border-radius:50%;background:#c9a227;color:#0d1b3d;
  font-size:1.6rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.buyer-lead .wiz-done h3{color:#fff;font-size:1.15rem;margin:0 0 6px;font-family:inherit}
.buyer-lead .wiz-done p{color:#D7E6F5;font-size:.88rem;margin:0 auto 14px;max-width:34ch}
.buyer-lead .wiz-done .btn{flex:0 1 auto;min-width:160px}

.buyer-lead :focus-visible{outline:2px solid #c9a227;outline-offset:2px}

@media(min-width:640px){
  .buyer-lead .lead-teaser{padding:20px 24px;gap:16px}
  .buyer-lead .lead-teaser-title{font-size:1.2rem}
  .buyer-lead .lead-teaser-sub{font-size:.83rem}
  .buyer-lead .lead-panel{padding:6px 32px 32px}
}

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

   ארבע שכבות מפרידות ביניהם — כולן לבן או שחור שקופים מעל הגוונים הקיימים,
   ולכן שום צבע כאן לא משתנה:
     1. שורת ההזמנה הפתוחה עולה (לבן 6%), הפאנל שמתחתיה שוקע (שחור 14%),
        וקו דק מפריד ביניהם.
     2. לכרטיס האשף יש גוף: מדרג לבן קל, מסגרת חזקה יותר וצל.
     3. לשבב שלא נבחר יש מילוי — 9% לבן ומסגרת 42% במקום שקוף עם 30%.
     4. לשבב שנבחר יש ✓ וטבעת בהירה, ול-CTA יש צל שמרים אותו מעליו: שניהם
        פליז מלא, ובלי המדרג הזה "נבחר" ו"להמשך" נראים אותו כפתור.

   אותה שכבה בדיוק יושבת ב-index/agency/agent, שנושאים אשף משלהם.
   ============================================================================ */

.buyer-lead .lead-banner{position:relative;isolation:isolate}
/* ברק רך בפינה: הרצועה מפסיקה להיות מלבן צבע אחיד. ‏z-index:-1 בתוך
   ה-‎isolation‎ של הבאנר — מעל הרקע שלו עצמו, מתחת לכל תוכן שבו. */
.buyer-lead .lead-banner::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 125% at 85% -25%,rgba(255,255,255,.14),rgba(255,255,255,0) 55%);
}
.buyer-lead .lead-banner.is-open .lead-teaser{
  background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.buyer-lead .lead-banner .lead-teaser-icon{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}
.buyer-lead .lead-banner .lead-panel{
  background:rgba(0,0,0,.14);
  box-shadow:inset 0 12px 22px -16px rgba(0,0,0,.6);
}
.buyer-lead .lead-banner .owner-wizard{
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.24);
  box-shadow:0 18px 38px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.14);
}
.buyer-lead .lead-banner .wiz-steps li{border-bottom-color:rgba(255,255,255,.2)}
.buyer-lead .lead-banner .wiz-steps li.active .dot{box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.buyer-lead .lead-banner .chip:not([aria-pressed="true"]),
.buyer-lead .lead-banner .lead-toggle button:not(.active){
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.42);
  transition:background .15s ease,border-color .15s ease;
}
.buyer-lead .lead-banner .chip:not([aria-pressed="true"]):hover,
.buyer-lead .lead-banner .lead-toggle button:not(.active):hover{
  background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6);
}
.buyer-lead .lead-banner .chip[aria-pressed="true"]::before{content:"✓";font-weight:800;margin-inline-end:6px}
.buyer-lead .lead-banner .chip[aria-pressed="true"],
.buyer-lead .lead-banner .lead-toggle button.active{box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.buyer-lead .lead-banner .btn-gold{font-weight:800;box-shadow:0 0 0 1.5px rgba(255,255,255,.35),0 10px 22px rgba(0,0,0,.28)}
.buyer-lead .lead-banner .btn-gold:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 0 1.5px rgba(255,255,255,.45),0 14px 26px rgba(0,0,0,.34)}
.buyer-lead .lead-banner .btn-gold:disabled{box-shadow:none;transform:none}
/* שדה לבן על רצועה כהה הוא הדבר הבוהק ביותר במסך; שקע פנימי קל מרכך אותו.
   טבעת המיקוד לבנה — טבעת פליז סביב שדה שיושב בתוך אשף שהסימונים בו פליז
   נבלעת בדיוק כמו כל השאר. */
.buyer-lead .lead-banner .wiz-input{box-shadow:inset 0 1px 3px rgba(13,27,61,.16)}
.buyer-lead .lead-banner .wiz-input::placeholder{color:#8792a8}
.buyer-lead .lead-banner .wiz-input.invalid{
  box-shadow:0 0 0 2px #c9a227,0 0 0 4px rgba(255,255,255,.45),inset 0 1px 3px rgba(13,27,61,.16);
}
.buyer-lead .lead-banner .wiz-input:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.55),inset 0 1px 3px rgba(13,27,61,.16);
}

/* ====== אוקטובר 2026: בפוטר - כרטיס שעולה מעל קו הפוטר ======
   כמו בדף הבית (‏index.html, ‏docs/home-page-sections.md): כרטיס ספיר עם מסגרת
   זהב שקופה ופינות מעוגלות, שחורג 36px מעל ראש הפוטר. רק בפוטר
   (‏.footer-lead) - בדף הנכס הבאנר יושב בעמודת התוכן ונשאר כמו שהוא.
   ‏footer.site בבורר: ‏design-system.css מיישר פינות ב-‎!important‎ ונטען
   אחרי הקובץ הזה. */
footer.site .buyer-lead.footer-lead{padding-inline:18px}
footer.site .buyer-lead.footer-lead .lead-banner{
  max-width:1180px;margin:0 auto;transform:translateY(-36px);margin-bottom:-12px;
  background:#0e2a6b;border:1px solid rgba(229,199,106,.45);border-radius:18px !important;
  box-shadow:0 18px 40px rgba(6,14,40,.35);
}
footer.site .buyer-lead.footer-lead .lead-teaser-icon{border-radius:12px !important;background:rgba(229,199,106,.14);border-color:rgba(229,199,106,.4);color:#e5c76a}
footer.site .buyer-lead.footer-lead .lead-teaser-go{border-radius:10px !important}
@media(max-width:759px){
  footer.site .buyer-lead.footer-lead .lead-banner{transform:translateY(-24px);margin-bottom:-8px}
}