/* ================================================================
   CTA / LEAD FORM — רכיב משותף לכל האתר (.hp-cta-form)
   נטען בכל עמוד כדי שהטופס ייראה זהה בבית, אודות, מגזין וכו'.
   רקע #f5f5f5 (בסיס האתר), שדות לבנים עם מסגרת קנונית #c4c4c4 + צל עדין, כפתור כהה.
   חוק: מסגרת שדה קלט בכל האתר = #c4c4c4 בלבד. בהיר מדי (#dbdbdb/#dddddd) נעלם
   על #f5f5f5+זוהר וזה הבאג ה"חוזר". כרטיסים (לא שדות) נשארים #e3e3e3 - לא לבלבל.
================================================================ */

/* ================================================================
   FLOATING LABEL — רכיב קנוני אחד לכל הטפסים באתר (.ff-field)
   הרמז עולה לכותרת בפוקוס/מילוי. אין placeholder עירום בשום מקום.
   דרישות מבנה:
     <label class="<field-class> ff-field">
       <span class="ff-label">שם השדה</span>
       <input ... placeholder=" ">   ← רווח בודד כדי ש-:placeholder-shown יזהה ריק
     </label>
   עובד עם CF7 (input עטוף ב-span.wpcf7-form-control-wrap) דרך :has().
   נגישות: ה-<label> עוטף את ה-input => קישור implicit; הכותרת נשארת גלויה תמיד.
================================================================ */
.ff-field {
  position: relative;
  display: block;
}

/* הכותרת הצפה - במנוחה יושבת כמו placeholder בתוך השדה, מיושרת ימין.
   z-index: מעל ה-input - כשה-input עם רקע לבן אטום (cform) הוא מצויר אחרי
   התווית ב-DOM ומכסה אותה בלי זה. pointer-events:none אז לא חוסם קליקים. */
.ff-label {
  position: absolute;
  z-index: 1;
  top: 50%;
  inset-inline-start: var(--ff-label-x, 20px);
  transform: translateY(-50%);
  transform-origin: right center;
  color: #9e9e9e;
  font-size: var(--ff-rest-size, 1rem);
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  background: transparent;
  transition:
    top var(--dur-fast, .16s) var(--ease, ease),
    transform var(--dur-fast, .16s) var(--ease, ease),
    color var(--dur-fast, .16s) var(--ease, ease),
    font-size var(--dur-fast, .16s) var(--ease, ease);
}

/* מצב צף: השדה בפוקוס או מלא.
   המילוי נקבע ע"י .is-filled (מסומן ע"י ff-fields.js) - אמין עם CF7 שמנקה placeholder.
   חשוב: .is-filled יושב ב-rule נפרד מ-:has(). חלק מהדפדפנים זורקים rule שלם של
   group selector אם אחד מאיבריו מכיל :has() שאינו נתמך - לכן ה-.is-filled לא משותף ל-group. */
.ff-field.is-filled .ff-label {
  top: var(--ff-float-top, 9px);
  transform: translateY(0) scale(0.82);
  color: #585858;
  font-weight: 500;
}
.ff-field.is-filled input {
  padding-top: var(--ff-input-pad-top, 14px);
}

/* fallback CSS-only (כשה-placeholder שורד או JS לא רץ) - rule נפרד עם :has() */
.ff-field:has(input:focus) .ff-label,
.ff-field:has(textarea:focus) .ff-label,
.ff-field:has(input:not(:placeholder-shown)) .ff-label,
.ff-field:has(textarea:not(:placeholder-shown)) .ff-label {
  top: var(--ff-float-top, 9px);
  transform: translateY(0) scale(0.82);
  color: #585858;
  font-weight: 500;
}

.ff-field:has(input:focus) .ff-label,
.ff-field:has(textarea:focus) .ff-label {
  color: #242424;
}

/* כשהכותרת צפה - דוחפים את הטקסט בתוך ה-input מטה כדי שלא יחפוף לכותרת */
.ff-field:has(input:focus) input,
.ff-field:has(input:not(:placeholder-shown)) input {
  padding-top: var(--ff-input-pad-top, 14px);
}

@media (prefers-reduced-motion: reduce) {
  .ff-label { transition: none; }
}

.hp-cta-form {
  position: relative;
  overflow: hidden;
  /* שקוף - הרקע של האתר ממשיך מאחורי הסקשن, אין פריים/בלוק לבן */
  background: transparent;
}
/* זוהר ירוק עולה מלמטה, מאחורי הטופס, נמוג רך אל הרקע.
   הדרגתי עד transparent ב-100% (לא 68%) כדי שלא ייווצר קצה/קו גלוי
   כשה-overflow:hidden חותך את ראש הזוהר. ראה reference-edrone-bg / glow seam fix. */
.hp-cta-form::after {
  content: "";
  position: absolute;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1600px;
  max-width: 130%;
  height: 760px;
  background: radial-gradient(
    ellipse 70% 100% at 50% 100%,
    rgba(195, 232, 91, .20) 0%,
    rgba(195, 232, 91, .10) 30%,
    rgba(195, 232, 91, .04) 55%,
    transparent 100%
  );
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}
.hp-cta-form__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1000px;
  margin-inline: auto;
}

.hp-cta-form__title {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  color: #242424;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}
.hp-cta-form__sub {
  font-size: 1.125rem;
  color: #424242;
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

/* ----------------------------------------------------------------
   פריסת הטופס - DOM: fields -> consent -> submit (הסכמה לפני שליחה).
   דסקטופ (≥769): grid עם areas מחזיר את submit לשורת השדות (זהה למקור).
   מובייל (≤768): flex-column בסדר ה-DOM הטבעי - שדות -> הסכמה -> שליחה.
---------------------------------------------------------------- */
.hp-cta-form__form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "fields submit"
    "consent consent";
  column-gap: var(--space-3);
  align-items: start;
}
.hp-cta-form__fields       { grid-area: fields; }
.hp-cta-form__consent-wrap { grid-area: consent; }
.hp-cta-form__form > .hp-cta-form__submit { grid-area: submit; align-self: stretch; }

/* שורת קפסולות נפרדות - כל שדה קפסולה לבנה עם רווחים */
.hp-cta-form__fields {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  flex-wrap: nowrap;
}
/* רווח מתחת לשורה רק כשיש שגיאה (אחרת הפריסה נשארת צפופה) */
.hp-cta-form__fields:has(.wpcf7-not-valid) { margin-bottom: 30px; }

.hp-cta-form__field {
  position: relative; /* עיגון הודעת השגיאה הממוקמת מתחת */
  flex: 1;
  min-width: 0;
  background: #ffffff;
  /* מסגרת שדה קנונית: #c4c4c4 + צל עדין. בהירה מדי (#dbdbdb) נעלמת על #f5f5f5+זוהר. */
  border: 1px solid #c4c4c4;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.hp-cta-form__field:focus-within {
  border-color: #242424;
  box-shadow: 0 0 0 1px rgba(36, 36, 36, .12);
}

/* CF7 עוטף כל input ב-span - שיתפוס את הקפסולה */
.hp-cta-form__field .wpcf7-form-control-wrap { display: block; }

.hp-cta-form__field input {
  width: 100%;
  height: 52px; /* הוגדל מ-46 כדי לפנות מקום לכותרת הצפה */
  padding: 0 var(--space-5);
  border: none;
  border-radius: 16px;
  background: transparent;
  font-size: 1rem;
  font-family: var(--font-base);
  color: #242424;
  text-align: right;
  outline: none;
}
.hp-cta-form__field input::placeholder { color: transparent; } /* placeholder=" " לא נראה - הכותרת הצפה מחליפה אותו */

/* כיוונון floating label לשדות ה-CTA (pill 52px) */
.hp-cta-form__field.ff-field {
  --ff-label-x: 20px;
  --ff-rest-size: 1rem;
  --ff-float-top: 8px;
  --ff-input-pad-top: 16px;
}

/* כפתור שליחה כהה (פיגמה) - דסקטופ: pill 80px בשורת השדות.
   אייקון מטוס-נייר (send) בצד שמאל של הטקסט, כרקע SVG (עובד גם על input[type=submit]). */
.hp-cta-form__submit {
  flex-shrink: 0;
  height: 52px; /* תואם גובה השדות */
  padding: 0 40px 0 52px; /* מקום לאייקון בשמאל */
  border-radius: 80px;
  white-space: nowrap;
  background: #1a1a1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4 20-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 22px center;
  color: #ffffff;
  border: 1px solid #1a1a1a;
}
.hp-cta-form__submit:hover {
  background-color: #000000;
  border-color: #000000;
}

/* הסכמה - מיושר לימין, checkbox כהה (CF7 acceptance או fallback) */
.hp-cta-form__consent-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-5);
}
.hp-cta-form__consent-wrap .wpcf7-form-control-wrap,
.hp-cta-form__consent-wrap .wpcf7-acceptance,
.hp-cta-form__consent-wrap .wpcf7-list-item {
  display: inline-block;
  margin: 0;
}
.hp-cta-form__consent-wrap label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #6b6b6b;
  line-height: 1.4;
  cursor: pointer;
}
.hp-cta-form__consent-wrap input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1a1a1a;
  cursor: pointer;
}

/* CF7 feedback - נפרש על כל רוחב ה-grid */
.hp-cta-form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: var(--space-5) 0 0;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  text-align: center;
}
.hp-cta-form .wpcf7-form.sent .wpcf7-response-output {
  border-color: color-mix(in srgb, var(--color-cta) 60%, #cfcfcf);
  background: color-mix(in srgb, var(--color-cta) 18%, #ffffff);
  color: #2c3a12;
}
.hp-cta-form .wpcf7-form.invalid .wpcf7-response-output,
.hp-cta-form .wpcf7-form.failed .wpcf7-response-output {
  border-color: #e6b3b3;
  background: #fdf2f2;
  color: #8a2b2b;
}
/* הודעת שגיאה לכל שדה: ממוקמת מתחת לקפסולה (absolute) כדי לא להגדיל אותה.
   הקפסולה נשארת בגובה קבוע, רק מקבלת מסגרת אדומה. */
.hp-cta-form .wpcf7-not-valid-tip {
  position: absolute;
  top: calc(100% + 5px);
  right: 4px;
  left: 4px;
  font-size: 0.6875rem;
  line-height: 1.35;
  font-weight: 500;
  color: #d04545;
  text-align: right;
  pointer-events: none;
}
.hp-cta-form__field:has(.wpcf7-not-valid) {
  border-color: #d98a8a;
  box-shadow: 0 0 0 1px rgba(208, 69, 69, .15);
}
.hp-cta-form .wpcf7-spinner { margin-inline-start: 8px; }

/* responsive
   ----------------------------------------------------------------
   ≤1024 (טאבלט): grid עמודה אחת, סדר DOM טבעי (שדות→הסכמה→שליחה),
   השדות עוברים ל-2 בשורה, submit רוחב מלא נשאר pill.
   ≤768 (מובייל): כל שדה בשורה משלו, submit מלבני (radius 16) גובה 52. */
@media (max-width: 1024px) {
  .hp-cta-form__form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "fields"
      "consent"
      "submit";
    row-gap: var(--space-5);
  }
  .hp-cta-form__fields { flex-wrap: wrap; }
  .hp-cta-form__field { flex: 1 1 calc(50% - var(--space-3)); }
  .hp-cta-form__consent-wrap { margin-top: 0; }
  .hp-cta-form__form > .hp-cta-form__submit { width: 100%; align-self: auto; }
  /* שדות עוברים לשורות - הגדל רווח בין שורות רק כשיש שגיאה (tip לא יחפוף לשדה הבא) */
  .hp-cta-form__fields:has(.wpcf7-not-valid) { row-gap: 32px; }
}
@media (max-width: 768px) {
  .hp-cta-form__form { row-gap: var(--space-4); }
  .hp-cta-form__fields { flex-direction: column; gap: var(--space-3); }
  .hp-cta-form__field { flex: 1 1 100%; }
  .hp-cta-form__fields:has(.wpcf7-not-valid) { gap: 32px; }
  /* כפתור שליחה מובייל: לא pill שחור שנראה כשדה רביעי - מלבני תואם שדות */
  .hp-cta-form__form > .hp-cta-form__submit {
    width: 100%;
    height: 52px;
    padding: 0;
    border-radius: 16px;
    margin-top: 8px;
    font-size: 1.0625rem;
    font-weight: 600;
  }
}