/* wizard.css: הרחבות לשאלון ההשוואה. בעלים: B6.
   הבסיס (.wz, .wz-head, .wz-progress, .wz-title, .wz-row, .choices, .lead ...) יושב
   ב-styles.css, סעיפים 13 עד 15. כאן רק מה שחסר שם, והכול בתחילית wz- (או lead-- למצב השאלון).
   רק טוקנים מ-:root. חוקי RTL: עיגון חזותי עם left / right פיזיים.
   הכיוון (7.11.2026): כרטיס לבן אחד על רצועה אפורה חמה, אריחי בחירה בצורת גלולה,
   תוצאות ככרטיסי מחיר זה לצד זה. בלי קו דיו. */

/* ---------- עמוד ההשוואה: ראש נמוך, כדי שהשאלון יופיע מעל הקפל ---------- */
.wz-pagehead{padding-block:var(--s-5) var(--s-8)}
.wz-pagehead .hub-head-grid .photo-frame{aspect-ratio:16/5}
.wz-pagehead .hub-head-copy{max-width:min(64%,720px)}
.wz-page .hub-rail .section-head h2{font-size:var(--fs-h3)}
.wz-pagetitle{max-width:none}
.wz-pageintro{max-width:60ch}
/* הרצועה האפורה שעליה יושבים השאלון והעמודה הצדדית */
.wz-band{padding-block:var(--s-8) var(--s-12)}
.wz-pagegrid{padding-top:0}
.wz-page .hub-rail .databox,.wz-page .hub-rail .steps li{background:var(--surface)}
@media (max-width:980px){.wz-band{padding-block:var(--s-6) var(--s-10)}}
@media (max-width:860px){.wz-pagehead .hub-head-grid .photo-frame{aspect-ratio:5/2}}
@media (max-width:640px){.wz-pagehead{padding-block:var(--s-4) var(--s-5)}.wz-pagehead .crumbs{display:none}.wz-band{padding-block:var(--s-5) var(--s-8)}}

/* ---------- שלד ---------- */
.wz{scroll-margin-top:calc(var(--s-16) + var(--s-2))}
.wz [hidden]{display:none !important}

/* גובה שמור לצעד שאלה: הכפתורים נשארים במקום כשהשאלות מתחלפות */
.wz[data-variant="page"] form.wz-step{display:flex;flex-direction:column;min-height:23rem}
.wz[data-variant="page"] form.wz-step > .wz-nav{margin-top:auto;padding-top:var(--s-6)}
.wz[data-variant="page"] form.wz-step > .wz-note{margin-top:var(--s-4)}
.wz-title:focus{outline:none}
.wz-title:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.wz-help a{color:inherit;font-weight:600}
.wz-nav--solo{justify-content:flex-end}
.wz .error{margin-top:var(--s-2)}
.wz-q .field{margin-bottom:0}

/* מסך ראשון: "לוקח פחות מדקה" וזווית ההוזלה. גוון חול, אייקון שעון. */
.wz-quick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2);align-items:start;margin:0 0 var(--s-5);padding:var(--s-3) var(--s-4);background:var(--tint-sand);border-radius:var(--radius);font-size:var(--fs-14);line-height:1.5;color:var(--ink-2)}
.wz-quick .ic{margin-top:.1em;color:var(--anchor)}
.wz-quick b{color:var(--ink)}
/* "שתי שאלות אחרונות וסיימנו": גלולה קטנה מעל השאלה */
.wz-almost{display:inline-flex;margin:0 0 var(--s-3);padding:.25em .8em;border-radius:var(--radius-pill);background:var(--tint-sage);font-size:var(--fs-13);font-weight:600;line-height:1.4;color:var(--anchor)}

/* ---------- קבוצות בתוך צעד ---------- */
.wz-sub{border:0;padding:0;margin:0 0 var(--s-5);min-width:0}
.wz-sub:last-child{margin-bottom:0}
.wz-sub > legend{padding:0;margin-bottom:var(--s-2)}
.wz-choices-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wz-choices-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wz-choices-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.wz-choices-3 .choice span,.wz-choices-5 .choice span{padding-inline:var(--s-2)}
/* מחיר בתוך אריח (span.ils): ".choice span" מצייר גלולה לכל span, גם לפנימי. מבטלים אותה. */
.choice span .ils{display:inline;min-height:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;font:inherit;color:inherit;transition:none}
@media (max-width:480px){.wz-choices-5{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* אדם שני: כרטיס אפור חם במקום קו מפריד */
.wz-person + .wz-person{margin-top:var(--s-5);padding:var(--s-5);background:var(--paper-2);border-radius:var(--radius-lg)}
.wz-person-h{margin:0 0 var(--s-3);font-size:var(--fs-13);font-weight:600;color:var(--accent-strong)}
.wz-pair{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:var(--s-4);align-items:start}
.wz-pair > .wz-sub{margin:0}
.wz-num{max-width:11rem}
.wz-reveal{margin-top:var(--s-5)}
.wz-kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));gap:var(--s-3);margin:var(--s-2) 0}
.wz-kids label{font-size:var(--fs-14);font-weight:500;color:var(--ink-2)}
@media (max-width:380px){.wz-pair{grid-template-columns:minmax(0,1fr)}}

/* ---------- מסך התוצאות ---------- */
.wz-res{margin-top:var(--s-10)}
.wz-res .kicker{margin-bottom:var(--s-3)}
.wz-res-title{margin:0 0 var(--s-3);font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);line-height:1.15;color:var(--ink);text-wrap:balance}
.wz-res-sub{margin:var(--s-8) 0 var(--s-3);font-family:var(--font-body);font-size:var(--fs-15);font-weight:600;line-height:1.4;color:var(--ink)}
.wz-res-note{margin:0 0 var(--s-3);font-size:var(--fs-14);line-height:1.6;color:var(--muted)}
.wz-res-miss{margin:var(--s-4) 0;padding:var(--s-4) var(--s-5);background:var(--tint-sand);border-radius:var(--radius-lg);font-size:var(--fs-15);line-height:1.65;color:var(--ink-2)}

/* כרטיס של אדם אחד: קבוצה אפורה חמה שבתוכה פס הטווח ושני כרטיסי מחיר זה לצד זה.
   "הנמוך במחירון" על המשטח הכהה עם מספר גדול; "הגבוה" על לבן. */
.wz-res-person{margin-top:var(--s-6);padding:var(--s-5);background:var(--paper-2);border-radius:var(--radius-xl)}
.wz-res-who{margin:0;font-weight:600;color:var(--ink);line-height:1.4}
.wz-res-who small{display:block;font-size:var(--fs-13);font-weight:400;color:var(--muted)}
.wz-res-n{margin:var(--s-3) 0 0;font-size:var(--fs-13);line-height:1.55;color:var(--muted)}

/* קו לכל חברה על פס הטווח. הפס הוא ציר מספרי (LTR), לכן left פיזי. */
.wz-range{margin:var(--s-5) 0 0}
.wz-range .range-track{background:var(--paper-3)}
.wz-range .range-track i{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--anchor);opacity:.55}
.wz-range .range-band{opacity:.9}
.wz-range .range-ends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-4);font-size:var(--fs-13)}
.wz-range .range-ends > span{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--s-1);min-width:0;padding:var(--s-5);background:var(--surface);border-radius:var(--radius-lg);color:var(--muted);text-align:start;line-height:1.4}
.wz-range .range-ends > :first-child{text-align:start}
.wz-range .range-ends b{font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,1.4rem + 1.8vw,2.6rem);line-height:1;color:var(--ink);letter-spacing:-.01em}
/* המינימום (הילד הראשון) על המשטח הכהה */
.wz-range .range-ends > :first-child{background:var(--anchor);color:var(--tint-sage)}
.wz-range .range-ends > :first-child b{color:var(--on-anchor)}
@media (max-width:420px){.wz-range .range-ends{grid-template-columns:minmax(0,1fr)}.wz-range .range-ends > span{padding:var(--s-4)}}

/* הסכום לשניים: כרטיס אפרסק עם מספר גדול */
.wz-total{display:grid;gap:var(--s-1);margin:var(--s-5) 0 0;padding:var(--s-5) var(--s-6);background:var(--tint-peach);border-radius:var(--radius-lg)}
.wz-total > span{font-size:var(--fs-13);font-weight:600;color:var(--accent-strong)}
.wz-total b{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);line-height:1.15;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
/* המחירים בתוך המספר הגדול הם span.ils: לא מקטינים אותם */
.wz-total b .ils{font-size:inherit;font-weight:inherit;color:inherit}
.wz-total small{font-size:var(--fs-13);color:var(--muted)}

.wz-factors{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.wz-factors li{position:relative;padding-inline-start:1.3em;font-size:var(--fs-15);line-height:1.6;color:var(--ink-2)}
.wz-factors li::before{content:"";position:absolute;right:.1em;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.wz-factors a,.wz-res-note a,.wz-res-miss a{font-weight:600}

.wz-more{margin-top:var(--s-4);padding:0 var(--s-4);background:var(--paper-2);border-radius:var(--radius);font-size:var(--fs-14);color:var(--ink-2)}
.wz-more summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);cursor:pointer;font-weight:600;color:var(--ink);list-style:none}
.wz-more summary::-webkit-details-marker{display:none}
.wz-more summary::after{content:"";flex:none;width:9px;height:9px;border-bottom:2px solid var(--ink);border-left:2px solid var(--ink);transform:rotate(-45deg) translateY(-3px);transition:transform var(--dur-1) var(--ease)}
.wz-more[open] summary::after{transform:rotate(135deg) translateY(-3px)}
.wz-more ul{display:grid;gap:var(--s-2);margin:0;padding:0 0 var(--s-4);list-style:none;line-height:1.6}
.wz-parts{margin-top:var(--s-4);font-size:var(--fs-14)}
.wz-res-person .table-wrap{margin-top:var(--s-4);border-radius:var(--radius)}
table.data.wz-parts{min-width:0;margin-top:0}
.wz .wz-summary{margin:0}
.wz .wz-summary .ic{flex:none}

/* ---------- טופס פרטי הקשר בתוך התוצאות ----------
   כרטיס בגוון מרווה (כמו תיבת הפנייה בדף הבית), הטופס עצמו על לוח לבן. */
.wz-contact{margin-top:var(--s-12);padding:var(--s-6);background:var(--tint-sage);border-radius:var(--radius-xl);scroll-margin-top:calc(var(--s-16) + var(--s-2))}
.wz-contact:focus{outline:none}
.wz-contact .kicker{background:rgba(255,255,255,.7);color:var(--anchor)}
.wz-contact-title{margin:0 0 var(--s-2);font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);line-height:1.15;color:var(--ink);text-wrap:balance}
.wz-contact > p{margin:0 0 var(--s-5);max-width:60ch;color:var(--ink-2)}
.wz-contact [data-contact]{background:var(--surface);border-radius:var(--radius-lg);padding:var(--s-6)}
.wz-contact [data-contact] .mount-fallback{margin:0}
.lead-chips{border:0;padding:0;min-width:0}
.lead-chips > legend{padding:0;margin-bottom:var(--s-2)}
.lead-chips .choices{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.lead-chips .choice span{min-height:48px;padding-inline:var(--s-2)}
.lead-status > .error{margin:0 0 var(--s-3)}
.lead-alt{margin:0 0 var(--s-3)}
.lead--wizard .check{margin-bottom:var(--s-3)}
@media (max-width:560px){.wz-contact{padding:var(--s-5) var(--s-4)}.wz-contact [data-contact]{padding:var(--s-5) var(--s-4)}}
/* דף נחיתה q: מסך פרטי הקשר לבד, לפני התוצאות */
.wz-contact--solo{margin-top:var(--s-2)}
/* דף נחיתה p: שם וטלפון במסך הראשון. שני השדות זה לצד זה גם בנייד, כדי שהכפתור יישאר מעל הקפל. */
.wz-phone .mount-fallback{margin:0}
.lead--phone > .field--half{grid-column:auto}
.lead--phone .field{margin-bottom:var(--s-3)}
.lead--phone .check{margin-bottom:var(--s-2)}
@media (max-width:340px){.lead--phone > .field--half{grid-column:1 / -1}}

/* דף נחיתה q / p: הודעת "הפנייה התקבלה" מעל התוצאות */
.wz-step > .lead-ok + .wz-title{margin-top:var(--s-8)}
.wz-disclaimer{margin:var(--s-8) 0 0;padding:var(--s-4) var(--s-5);background:var(--paper-2);border-radius:var(--radius);font-size:var(--fs-13);line-height:1.65;color:var(--muted)}
.wz [data-step="done"] .lead-ok:focus{outline:none}

/* ---------- הפותחן: hero / inline ---------- */
.wz--starter .wz-step{animation:none}
.wz--starter[data-variant="inline"]{border:0;padding:0;background:none;box-shadow:none;font-size:var(--fs-15)}
.wz--starter[data-variant="inline"] .wz-title{font-family:var(--font-body);font-size:var(--fs-16);font-weight:600;line-height:1.4;margin-bottom:var(--s-3)}
.wz--starter .wz-nav{margin-top:var(--s-4)}
.wz--starter .wz-note{margin-top:var(--s-3)}
.wz-picks{display:grid;gap:var(--s-2);margin:var(--s-4) 0 0;padding:0;list-style:none}
.wz-pick{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:52px;padding:var(--s-3) var(--s-4) var(--s-3) var(--s-5);background:var(--surface);color:var(--ink);border:1px solid var(--field-border);border-radius:var(--radius-pill);font-weight:500;line-height:1.3;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.wz-pick:hover{border-color:var(--anchor);color:var(--anchor);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.wz-pick:active{transform:scale(.98)}
.wz-pick .ic{flex:none;width:18px;height:18px;color:var(--muted);transition:transform var(--dur-1) var(--ease)}
.wz-pick:hover .ic{transform:translateX(-3px);color:var(--anchor)}
.wz-pick--alt{font-weight:400}
.wz-resume a{font-weight:600}

@media print{
  .wz-nav,.wz-contact,.wz-progress{display:none !important}
}

/* בנייד, בעמוד ההשוואה: כפתור הוואטסאפ הצף מכסה את "המשך". הקישור לוואטסאפ נשאר
   במסך התודה, בהודעת הכישלון ובפוטר. כפתור הנגישות נשאר תמיד. */
@media (max-width:820px){.wz-page .wa-fab{display:none}}

/* פס דביק בתחתית מסך התוצאות, בנייד בלבד. מפנה מקום מימין לכפתור הנגישות (עיגון פיזי, חוק RTL מס' 1). */
.wz-jump{display:none}
@media (max-width:820px){
  .wz-jump{display:block;position:sticky;bottom:0;z-index:5;margin-top:var(--s-5);padding:var(--s-2) 0 calc(var(--s-2) + env(safe-area-inset-bottom));padding-right:var(--s-16);background:var(--surface);border-top:1px solid var(--rule);transition:transform var(--dur-3) var(--ease),opacity var(--dur-3) var(--ease),visibility var(--dur-3)}
  .wz-jump.is-away{transform:translateY(110%);opacity:0;visibility:hidden}
}
@media print{.wz-jump{display:none !important}}

/* בטלפון קטן כל ארבע האפשרויות של הפותחן צריכות להיכנס מעל הקפל:
   48px עדיין מעל רף המגע של 44px. אותו כלל חל על הגיבוי בלי JS (home.css). */
@media (max-width:480px){
  .wz-picks{gap:var(--s-2)}
  .wz-pick{min-height:48px;padding-block:var(--s-2)}
}

@media (prefers-reduced-motion:reduce){
  .wz-pick:hover{transform:none}
}