/* ==========================================================================
   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;
  /* 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:40px 40px 32px;
  text-align:right;
  /* גלילה בתוך הכרטיס ולא בדף: כשהמקלדת נפתחת במובייל והחלון מתקצר,
     הכרטיס גולל בעצמו ושדה הטלפון נשאר בהישג יד */
  max-height:calc(100dvh - 48px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
}

/* ---- כפתור הסגירה ---- */
/* 44px מלאים לאזור הלחיצה גם כשה-X עצמו קטן - זה המינימום שאצבע פוגעת בו */
.pop__x{
  position:absolute;top:14px;left:14px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-pill);background:none;
  color:var(--muted);cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.pop__x svg{width:22px;height:22px;}
.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:100%;max-width:100%;
    inset:auto 0 0 0;
    margin:0;
    max-height:78dvh;
    transform:translateY(100%);
  }
  .pop[open]{transform:none;}
  @starting-style{ .pop[open]{transform:translateY(100%);opacity:1;} }
  .pop__panel{
    border-radius:24px 24px 0 0;
    padding:32px 24px calc(24px + env(safe-area-inset-bottom));
    max-height:78dvh;
  }
  /* ידית קטנה בראש המגירה - הרמז הוויזואלי שזה משהו שנפתח מלמטה */
  .pop__panel::before{
    content:"";position:absolute;top:10px;inset-inline:0;margin-inline:auto;
    width:44px;height:4px;border-radius:var(--r-pill);background:var(--line);
  }
  .pop__x{top:18px;left:8px;}
  .pop .s16__form h2{padding-inline-start:40px;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;}