/* ==========================================================================
   pop - חלון הטופס הצף
   נבנה על <dialog> נייטיב. הדפדפן הוא זה שנותן שכבה עליונה אמיתית, מלכודת
   פוקוס, סגירה ב-Esc ורקע שלא ניתן לטאב אליו. כל ניסיון לחקות את זה עם div
   נכשל באחד מהם, ובדרך כלל דווקא במובייל.
   ========================================================================== */

.pop{
  /* ה-dialog מגיע עם border, padding ורוחב ברירת מחדל של הדפדפן. מאפסים */
  border:0;padding:0;background:none;
  width:min(560px, calc(100vw - 32px));max-width:none;
  max-height:calc(100dvh - 48px);
  overflow:visible;
  color:var(--ink);
  position:fixed;inset:0;
  z-index:120;
  height:max-content;
  /* טור: כפתור הסגירה מעל הכרטיס ולא בתוכו */
  display:flex;flex-direction:column;
  /* margin:auto ממרכז את החלון בשני הצירים בשכבה העליונה */
  margin:auto;
}
.pop__panel{
  box-shadow:0 24px 60px rgba(11,16,32,.28), 0 2px 8px rgba(11,16,32,.10);
}

/* ---- הכרטיס ---- */
.pop__panel{
  background:#fff;border-radius:var(--r-card);
  padding:36px 40px 32px;
  text-align:right;
  /* גלילה בתוך הכרטיס ולא בדף: כשהמקלדת נפתחת במובייל והחלון מתקצר,
     הכרטיס גולל בעצמו ושדה הטלפון נשאר בהישג יד */
  max-height:calc(100dvh - 48px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
}

/* ---- כפתור הסגירה ---- */
/* 44px מלאים לאזור הלחיצה גם כשה-X עצמו קטן - זה המינימום שאצבע פוגעת בו */
.pop__x{
  /* מחוץ לכרטיס, בפינה הימנית העליונה. flex-start בעברית = ימין */
  align-self:flex-start;margin:0 0 10px;
  min-width:44px;height:44px;
  padding-inline:10px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--f-body);font-weight:600;font-size:22px;line-height:1;
  border:0;border-radius:var(--r-pill);background:none;
  color:var(--navy);cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.pop__x svg{width:22px;height:22px;flex:none;}
.pop__x:hover{background:var(--card-off);color:var(--ink);}
.pop__x:focus-visible{outline:2px solid var(--sky-deep);outline-offset:2px;}

/* ---- הטופס עצמו ---- */
/* הכרטיס הלבן הוא עכשיו הפאנל, ולכן הטופס מוותר על הרקע והריפוד שהיו לו
   כשישב בתוך הסקשן. הכיתה נשארת זהה כדי שכל שאר הכללים ימשיכו לחול */
.pop .s16__form{
  background:none;border-radius:0;padding:0;margin-bottom:0;
}
.pop .s16__form h2{padding-inline-start:36px;}   /* לא נכנס מתחת ל-X */

/* ---- אנימציית פתיחה ---- */
/* transition על display ו-overlay עם allow-discrete: כך גם הסגירה מקבלת
   אנימציה, בלי setTimeout ובלי מחלקת is-closing ב-JS */
.pop{
  opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1),
             overlay .22s allow-discrete, display .22s allow-discrete;
}
.pop[open]{opacity:1;transform:none;}
@starting-style{
  .pop[open]{opacity:0;transform:translateY(12px) scale(.98);}
}

/* ---- מובייל: חלון במרכז המסך, כמו הרפרנס שטל בחר ---- */
@media (max-width:1199px){
  .pop{
    width:calc(100vw - 32px);max-width:420px;
    inset:0;
    margin:auto;
    max-height:calc(100dvh - 32px);
  }
  .pop__panel{
    border-radius:24px;
    padding:28px 22px calc(24px + env(safe-area-inset-bottom));
    /* 52 = גובה כפתור הסגירה שמעל הכרטיס */
    max-height:calc(100dvh - 32px - 52px);
  }
  .pop__x{margin-bottom:8px;}
  .pop .s16__form h2{font-size:26px;line-height:34px;}
}

/* ---- נגישות ---- */
@media (prefers-reduced-motion:reduce){
  .pop{transition:none;}
  .pop{transform:none;}
  @starting-style{ .pop[open]{transform:none;} }
}

/* בלי JS אין showModal, ולכן ה-dialog פשוט לא קיים. במקרה כזה הוא מוצג
   כתוכן רגיל בתוך הסקשן, כדי שהטופס לא ייעלם לגמרי */
html:not(.js) .pop{display:block;position:static;opacity:1;transform:none;max-width:560px;}
html:not(.js) .pop__x{display:none;}


/* ---- מחוון שני השלבים ----
   שני עיגולים על קו אחד בראש החלון. הוא לא אינטראקטיבי: תפקידו רק
   לומר ״שני מסכים, לא טופס פתוח״, ולכן הקו מתחתם ולא ביניהם -
   כך אין רושם של כפתורים שאפשר ללחוץ עליהם */
.pop__steps{
  list-style:none;margin:0 0 22px;padding:0;
  display:flex;align-items:center;justify-content:center;gap:0;
  position:relative;
  width:min(220px,60%);margin-inline:auto;
}
.pop__steps::before{
  content:"";position:absolute;inset-inline:22px;top:50%;
  height:4px;margin-top:-2px;border-radius:2px;
  background:var(--sky-tint);
}
.pop__step{
  position:relative;z-index:1;
  width:34px;height:34px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--sky-tint);
  color:var(--sky-deep);
  font-family:var(--f-head);font-weight:800;font-size:19px;line-height:1;
}
.pop__step:first-child{margin-inline-end:auto;}
.pop__step.is-on{background:var(--sky-deep);color:#fff;}

@media (max-width:1199px){
  .pop__steps{margin-bottom:18px;}
}