/* ==========================================================================
   לשם 770 — חלונות קופצים  |  scope: .l770pop
   כל כלל משויך לקידומת הזו. הסימולטור שבתוך חלון היציאה מעוצב
   ב-l770-simulator.css; כאן רק המעטפת.

   חימוש ב-!important: Hello Elementor ו-Elementor Kit צובעים
   כפתורים, קישורים ושדות בעצמם, וכלל גורף שלהם מנצח מחלקה שלנו.
   ========================================================================== */

.l770pop{
  --pop-nv:#0C1722;
  --pop-nv2:#172735;
  --pop-nvDeep:#0A1420;
  --pop-gold:#D8B57A;
  --pop-goldL:#ECD3A4;
  --pop-goldD:#947043;
  --pop-goldText:#8A6639;
  --pop-cream:#F8F6F1;
  --pop-paper:#FFFDF8;
  --pop-ink:#101C27;
  --pop-body:#2B3845;
  --pop-muted:#4E5B67;
  --pop-line:rgba(12,23,34,.14);
  --pop-err:#B3261E;
  --pop-ease:cubic-bezier(.22,.61,.36,1);

  direction:rtl;
  text-align:right;
  font-family:'Heebo','Assistant','Rubik',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}

.l770pop *,
.l770pop *::before,
.l770pop *::after{box-sizing:border-box;}

:where(.l770pop) h2,
:where(.l770pop) p,
:where(.l770pop) form,
:where(.l770pop) label{margin:0;padding:0;border:0;}

:where(.l770pop) svg{display:block;}

/* ============================================================
   הרקע הכהה
   ============================================================ */

.l770pop__back{
  position:fixed;
  inset:0;
  z-index:999999;          /* מעל ההדר הדביק ומעל החלונית הצפה */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,3vw,34px);
  background:rgba(7,13,20,.72);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .28s var(--pop-ease);
  overflow-y:auto;
  overscroll-behavior:contain;
}

.l770pop__back[hidden]{display:none !important;}
.l770pop__back.is-in{opacity:1;}

/* ============================================================
   החלון
   ============================================================ */

.l770pop__dialog{
  position:relative;
  width:100%;
  max-width:520px;
  max-height:calc(100vh - 28px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(24px,3vw,36px);
  border:1px solid rgba(216,181,122,.3);
  border-radius:20px;
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(216,181,122,.1) 0%,rgba(216,181,122,0) 58%),
    linear-gradient(165deg,var(--pop-nv2) 0%,var(--pop-nv) 58%,var(--pop-nvDeep) 100%);
  box-shadow:0 44px 96px -44px rgba(0,0,0,.9);
  transform:translateY(14px) scale(.985);
  transition:transform .32s var(--pop-ease);
}

.l770pop__back.is-in .l770pop__dialog{transform:none;}

/* חלון היציאה רחב יותר — יש בו שאלון */
.l770pop__dialog--wide{
  max-width:940px;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:start;
  gap:clamp(20px,2.4vw,34px);
}

/* ---------- כפתור הסגירה ---------- */

.l770pop__x{
  position:absolute;
  top:12px;
  /* ‎inset-inline-end‎ ולא ‎start‎: בעברית הטקסט מתחיל מימין,
     ולכן כפתור הסגירה שייך לפינה השמאלית — אחרת הוא יושב בדיוק
     במקום שבו מתחילה הכותרת. */
  inset-inline-end:12px;
  z-index:3;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:38px !important;
  height:38px !important;
  min-width:0 !important;
  padding:0 !important;
  border:1px solid rgba(248,246,241,.2) !important;
  border-radius:50% !important;
  background:rgba(248,246,241,.08) !important;
  box-shadow:none !important;
  color:#F8F6F1 !important;
  cursor:pointer;
  transition:background-color .2s var(--pop-ease),border-color .2s var(--pop-ease);
}

.l770pop__x:hover{
  background:rgba(248,246,241,.17) !important;
  border-color:rgba(248,246,241,.34) !important;
  color:#FFFFFF !important;
}

.l770pop__x:focus-visible{
  outline:2px solid var(--pop-goldL) !important;
  outline-offset:2px !important;
}

.l770pop__x svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
}

/* ---------- הטקסט ---------- */

.l770pop__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding-top:14px;
}

.l770pop__eyebrow{
  /* מרווח שמונע מכותרת עליונה ארוכה להיכנס מתחת לכפתור הסגירה */
  padding-inline-end:46px;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  letter-spacing:.16em;
  color:var(--pop-gold) !important;
  margin-bottom:11px !important;
}

.l770pop__title{
  font-size:clamp(21px,2.2vw,28px) !important;
  font-weight:800 !important;
  line-height:1.22 !important;
  letter-spacing:-.015em;
  color:#FFFFFF !important;
}

.l770pop__title:focus{outline:none !important;box-shadow:none !important;}

.l770pop__text{
  margin-top:12px !important;
  font-size:15.5px !important;
  font-weight:300 !important;
  line-height:1.8 !important;
  color:rgba(248,246,241,.82) !important;
}

.l770pop__legal{
  margin-top:14px !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  line-height:1.7 !important;
  color:rgba(248,246,241,.6) !important;
}

/* ---------- הפאנל הבהיר של הסימולטור ---------- */

.l770pop__panel{
  min-width:0;
  padding:clamp(16px,1.8vw,24px);
  background:var(--pop-cream);
  border-radius:16px;
  box-shadow:0 20px 48px -26px rgba(0,0,0,.6);
}

.l770pop__panel .l770sim{max-width:none;}

.l770pop__panel .l770sim__card{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* ============================================================
   הטופס הקצר
   ============================================================ */

.l770pop__form{padding-top:14px;}

.l770pop__field{margin-top:15px;}

.l770pop__label{
  display:block;
  margin-bottom:6px;
  font-size:13.5px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  color:rgba(248,246,241,.9) !important;
}

.l770pop__input{
  display:block !important;
  width:100% !important;
  height:auto !important;
  padding:13px 15px !important;
  border:1.5px solid rgba(248,246,241,.22) !important;
  border-radius:12px !important;
  background:rgba(248,246,241,.07) !important;
  background-image:none !important;
  font-family:inherit !important;
  font-size:16px !important;      /* 16px מונע זום אוטומטי ב-iOS */
  font-weight:400 !important;
  line-height:1.4 !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
  transition:border-color .2s var(--pop-ease),background-color .2s var(--pop-ease);
}

.l770pop__input::placeholder{color:rgba(248,246,241,.45) !important;opacity:1;}

.l770pop__input:focus{
  border-color:var(--pop-gold) !important;
  background:rgba(248,246,241,.12) !important;
  outline:none !important;
}

.l770pop__input:focus-visible{
  outline:2px solid var(--pop-goldL) !important;
  outline-offset:2px !important;
}

.l770pop__input.is-invalid{border-color:#FF9B93 !important;}

.l770pop__err{
  display:none;
  margin-top:7px !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.5 !important;
  color:#FF9B93 !important;
}

.l770pop__err.is-on{display:block;}
.l770pop__err--block{margin-top:12px !important;}

/* ---------- ההסכמה ---------- */

.l770pop__consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:16px;
  cursor:pointer;
  font-size:13.5px !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  color:rgba(248,246,241,.82) !important;
}

.l770pop__consent input{
  flex:0 0 auto !important;
  width:19px !important;
  height:19px !important;
  margin:2px 0 0 !important;
  accent-color:var(--pop-goldD);
  cursor:pointer;
}

.l770pop__consent input:focus-visible{
  outline:2px solid var(--pop-goldL) !important;
  outline-offset:2px !important;
}

.l770pop__consent a{
  color:var(--pop-goldL) !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}

.l770pop__consent a:hover{color:#FFFFFF !important;}

/* ---------- מלכודת הבוטים ---------- */

.l770pop__hp{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
  pointer-events:none !important;
}

/* ---------- כפתור השליחה ---------- */

.l770pop__submit{
  display:block !important;
  width:100% !important;
  margin-top:18px !important;
  padding:15px 22px !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,var(--pop-goldL) 0%,var(--pop-gold) 46%,var(--pop-goldD) 100%) !important;
  background-image:linear-gradient(135deg,var(--pop-goldL) 0%,var(--pop-gold) 46%,var(--pop-goldD) 100%) !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  color:var(--pop-nv) !important;
  text-align:center !important;
  text-transform:none !important;
  cursor:pointer;
  box-shadow:0 16px 34px -20px rgba(216,181,122,.8) !important;
  transition:transform .22s var(--pop-ease),box-shadow .22s var(--pop-ease);
}

.l770pop__submit:hover{
  color:var(--pop-nv) !important;
  transform:translateY(-1px);
  box-shadow:0 20px 40px -20px rgba(216,181,122,.9) !important;
}

.l770pop__submit:focus-visible{
  outline:3px solid var(--pop-nv) !important;
  outline-offset:2px !important;
}

.l770pop__submit[disabled]{opacity:.6;cursor:default;transform:none;}

.l770pop__note{
  margin-top:13px !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  line-height:1.7 !important;
  color:rgba(248,246,241,.6) !important;
}

/* ---------- מסך הסיום ---------- */

.l770pop__done{
  padding:18px 0 6px;
  text-align:center;
}

.l770pop__check{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  margin:0 auto 16px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pop-goldL),var(--pop-gold));
}

.l770pop__check svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:var(--pop-nv);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.l770pop__doneTitle{
  font-size:21px !important;
  font-weight:800 !important;
  line-height:1.3 !important;
  color:#FFFFFF !important;
}

.l770pop__doneTitle:focus{outline:none !important;box-shadow:none !important;}

.l770pop__done .l770pop__text{text-align:center;}

/* ============================================================
   רספונסיביות
   ============================================================ */

@media (max-width:900px){
  .l770pop__dialog--wide{
    grid-template-columns:minmax(0,1fr);
    max-width:520px;
    gap:16px;
  }

  /* הכותרת קודמת לשאלון, גם בעמודה אחת.
     בגרסה קודמת הקדמתי כאן את השאלון, וזו הייתה טעות: בחלון
     יציאה המשפט שעוצר את הגולש הוא כל הסיבה שהחלון נפתח, ואם
     הוא מתחת לקפל הגולש רואה טופס בלי להבין למה. */
  .l770pop__dialog--wide .l770pop__copy{order:1;padding-top:4px;}
  .l770pop__dialog--wide .l770pop__panel{order:2;margin-top:0;}

  /* הטקסט מתהדק כדי שהשאלון יישאר קרוב */
  .l770pop__dialog--wide .l770pop__text{
    margin-top:9px !important;
    font-size:14.5px !important;
    line-height:1.65 !important;
  }
  .l770pop__dialog--wide .l770pop__legal{
    margin-top:9px !important;
    font-size:12px !important;
  }
}

@media (max-width:620px){
  .l770pop__back{
    padding:0;
    align-items:flex-end;
  }

  .l770pop__dialog{
    max-width:none;
    max-height:92vh;
    padding:22px 18px 26px;
    border-radius:20px 20px 0 0;
    border-inline:0;
    border-bottom:0;
    transform:translateY(26px);
  }

  .l770pop__title{font-size:21px !important;}
  .l770pop__text{font-size:15px !important;}
  .l770pop__panel{padding:14px;border-radius:14px;}
  .l770pop__x{top:10px;inset-inline-end:10px;}
}

/* ============================================================
   תנועה מופחתת
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  .l770pop__back,
  .l770pop__dialog,
  .l770pop__submit,
  .l770pop__x{
    transition-duration:.001ms !important;
    animation:none !important;
  }
  .l770pop__dialog{transform:none !important;}
  .l770pop__submit:hover{transform:none !important;}
}
