/* ============ 16 · ההצעה + הטופס ============
   Figma: desktop 279:571 (1280×800) / מובייל 279:609 (390×1354).

   הסקשן שכל הדף מוביל אליו. הוא כהה כדי שהטופס הלבן יהיה הדבר הבהיר
   ביותר במסך ברגע שמגיעים אליו - זה כל הטריק, אין כאן שום אפקט.

   סדר ה-DOM: קודם הטופס, אחר כך טל. בדסקטופ ה-grid מציב את הטופס
   בעמודה הראשונה (ימין ב-RTL) ואת טל משמאל, ובמובייל הסדר הטבעי כבר
   נכון - הטופס למעלה, טל מתחת. */

/* z-index כדי שטל יוכל לחרוג אל תוך הפוטר בלי שרקע הפוטר יכסה אותו.
   שני הסקשנים באותו כחול כהה, ולכן החריגה נראית כמו רצף אחד */
.s16{
  background:var(--navy);
  /* מסך מלא בדיוק: זה הסקשן שסוגר את הדף, והוא צריך למלא את המסך בלי
     שיישאר מתחתיו עוד חצי מסך של כלום. אין padding למטה - הקצה התחתון
     של הסקשן הוא קו הפוטר, וזה מה שמאפשר לטל להיצמד אליו בדיוק */
  min-height:100vh;
  /* flex-end ולא center: הקצה התחתון של התוכן חייב להיות הקצה התחתון
     של הסקשן, אחרת נשאר פס ריק בין טל לפוטר. העודף נופל למעלה */
  display:flex;align-items:flex-end;
  padding-block:48px 0;
  position:relative;z-index:1;
}
.s16__wrap{
  flex:1 1 auto;
  width:100%;max-width:var(--content);margin-inline:auto;
  display:grid;
  grid-template-columns:560px 460px;   /* 560 + 60 + 460 = 1080 */
  gap:60px;
  /* stretch כדי שהעמודה של טל תקבל בדיוק את הגובה של הטופס. זה מה
     שמאפשר לעגן את תיבת ההודעה לקו התחתון של הטופס במקום לנחש גובה */
  align-items:stretch;
}

/* ---------- הטופס ---------- */
.s16__form{
  background:#fff;border-radius:var(--r-card);
  padding:36px 40px;
  /* ה-margin התחתון הוא מה שמרחיק את הטופס מקו הפוטר. הוא גם מגדיל את
     גובה השורה, ולכן העמודה של טל נמתחת עד לקצה התחתון של הסקשן - שם
     הוא נצמד לפוטר, בעוד הטופס עוצר 48 פיקסל מעליו */
  margin-bottom:48px;
  text-align:right;
}
.s16__form h2{
  font-family:var(--f-head);font-weight:800;
  font-size:32px;line-height:42px;
  color:var(--ink);
  letter-spacing:-.01em;
}
.s16__form .s16__lede{
  margin-top:18px;
  font-family:var(--f-body);font-weight:400;
  font-size:23px;line-height:34px;
  color:var(--body);
}
.s16__field{margin-top:28px;display:block;}
.s16__field + .s16__field{margin-top:22px;}
.s16__field > span{
  display:block;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:28px;
  color:var(--muted);
}
/* שדה בלי מסגרת, רק קו תחתון - זה מה שמונע מהטופס להיראות כמו טופס
   של מערכת. הקו מקבל את צבע המותג ברגע שנוגעים בשדה */
.s16__field input{
  width:100%;
  margin-top:10px;padding-block:0 10px;
  border:0;border-bottom:1px solid #d9d9d6;
  border-radius:0;background:transparent;
  font-family:var(--f-body);font-weight:400;
  font-size:24px;line-height:34px;
  color:var(--ink);
  direction:rtl;text-align:right;
  transition:border-color .2s var(--ease);
}
.s16__field input::placeholder{color:#9e9e9e;}
.s16__field input:focus{outline:0;border-bottom-color:var(--sky-deep);}
.s16__field input:focus-visible{outline:2px solid var(--sky-deep);outline-offset:6px;}

/* כפתור השליחה הוא רכיב ה-CTA עצמו, לא כפתור נפרד: אותו עיגול קרם, אותה
   מסילת חצים, אותו הובר. הדבר היחיד שנדרס כאן הוא הרוחב - בפיגמה הוא
   נמתח על כל הטופס, וזה גם מה שהופך אותו ליעד הגדול ביותר במסך */
.cta--send{
  width:100%;margin-top:28px;
  font-family:var(--f-head);
}
.s16__fine{
  margin-top:16px;
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:30px;
  color:var(--muted);
  text-align:center;
}

/* ---------- טל + תיבת ההודעה ---------- */
.s16__tal{
  position:relative;
  min-height:560px;
}
/* bottom:0 והעמודה נגמרת בדיוק בקצה התחתון של הסקשן - כלומר קו החיתוך
   של טל הוא קו הפוטר עצמו. הוא לא חורג פנימה ולא תלוי באוויר מעליו */
.s16__tal img{
  position:absolute;bottom:0;right:0;
  width:330px;height:660px;object-fit:contain;object-position:bottom;
}
/* התיבה יושבת על הכתף של טל בכוונה: היא ההבטחה שלו, לא כותרת של הדף */
/* התיבה מיישרת קו תחתון עם הטופס: שני הבלוקים נגמרים באותו קו, וזה מה
   שמחזיק את הסקשן כשני עמודים ולא כשני אלמנטים שצפים בנפרד */
.s16__note{
  /* אותם 48 פיקסל של הטופס: שתי העמודות נגמרות באותו קו תחתון */
  position:absolute;bottom:48px;left:0;
  width:320px;
  background:rgba(255,255,255,.92);
  border-radius:var(--r-card);
  padding:26px;
  text-align:right;
}
.s16__note h3{
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:30px;
  color:var(--sky-deep);
}
.s16__note ul{margin-top:14px;list-style:none;}
.s16__note li{
  padding-block:9px;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:32px;
  color:var(--ink);
}
.s16__note li:first-child{padding-top:0;}

/* ============ mobile ============ */
@media (max-width:1199px){
  /* במובייל התוכן ממילא גבוה ממסך אחד, ולכן ה-100vh הוא רק רצפה */
  .s16{padding-block:60px 0;}
  .s16__wrap{
    display:flex;flex-direction:column;gap:32px;
    align-items:stretch;
  }
  .s16__form{margin-bottom:32px;padding:32px 24px;}
  .s16__form h2{font-size:27px;line-height:36px;}
  .s16__form .s16__lede{margin-top:16px;font-size:22px;line-height:32px;}
  .s16__field{margin-top:28px;}
  .s16__field + .s16__field{margin-top:22px;}
  .s16__field input{font-size:22px;line-height:32px;}
  .cta--send{margin-top:28px;white-space:normal;}
  .s16__fine{margin-top:16px;}
  .s16__tal{min-height:510px;height:auto;}
  .s16__tal img{top:auto;bottom:0;right:40px;width:258px;height:530px;}
  .s16__note{top:auto;bottom:32px;left:11px;width:min(320px,100%);}
}

/* ---------- הודעת הטופס ---------- */
/* הודעה אחת מתחת לשדות, ולא בועה מרחפת ליד כל שדה: הבועה של הדפדפן
   מגיעה באנגלית ובכיוון הפוך, ולכן הטופס נושא novalidate והבדיקה היא
   שלנו. השדה עצמו נצבע באדום, וההודעה אומרת מה לתקן ולא מה נכשל */
.s16__msg{
  min-height:0;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:30px;
  color:var(--red);
}
.s16__msg:empty{display:none;}
.s16__field input.is-bad{
  border-color:var(--red);
  background:var(--red-tint);
}

/* ============ אישור מדיניות ============
   ריבוע מצויר ב-CSS ולא ה-checkbox המקורי: אי אפשר לעצב את המקורי בלי
   appearance:none, וברגע שמאפסים אותו מאבדים גם את סימן הוי במובייל.
   לכן ה-input האמיתי נשאר קיים, פעיל ובמסלול המקלדת, ורק שקוף ופרוס
   על כל ה-label - כך שלחיצה בכל מקום בטקסט מסמנת, וקוראי מסך מקבלים
   שדה תקני עם התווית המלאה. */
.s16__consent{
  margin-top:26px;
  display:flex;align-items:flex-start;gap:12px;
  position:relative;cursor:pointer;
}
.s16__consent input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;margin:0;cursor:pointer;
}
.s16__consent-box{
  flex:0 0 auto;
  width:26px;height:26px;margin-top:3px;
  border:2px solid var(--line);
  border-radius:6px;
  background:#fff;
  position:relative;
  transition:border-color .15s ease, background-color .15s ease;
}
/* הוי מצויר משני קווים מסובבים ולא מ-SVG: אלמנט אחד פחות בעמוד */
.s16__consent-box::after{
  content:'';position:absolute;
  left:7px;top:3px;width:7px;height:13px;
  border:solid #fff;border-width:0 2.6px 2.6px 0;
  transform:rotate(45deg) scale(.5);
  opacity:0;transition:opacity .12s ease, transform .12s ease;
}
.s16__consent input:checked ~ .s16__consent-box{
  background:var(--sky-deep);border-color:var(--sky-deep);
}
.s16__consent input:checked ~ .s16__consent-box::after{opacity:1;transform:rotate(45deg) scale(1);}
.s16__consent input:focus-visible ~ .s16__consent-box{outline:2px solid var(--sky-deep);outline-offset:3px;}

.s16__consent-txt{
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:30px;
  color:var(--muted);
}
.s16__consent-txt a{color:var(--sky-deep);text-decoration:underline;text-underline-offset:3px;}
.s16__consent-txt a:hover{color:var(--navy);}

/* מצב שגיאה: מסומן על ה-label כי הריבוע הנראה הוא span ולא ה-input */
.s16__consent.is-bad .s16__consent-box{border-color:var(--red);}

@media (max-width:767px){
  .s16__consent{margin-top:22px;gap:10px;}
  .s16__consent-box{width:24px;height:24px;}
  .s16__consent-box::after{left:6px;top:3px;width:6px;height:12px;}
  .s16__consent-txt{font-size:22px;line-height:30px;}
}