/* ============================================================
   Jobby.co.il — שורת משרה + עמוד משרה  ·  v9
   ------------------------------------------------------------
   נטען אחרי main.css ו-jobby-theme.css:

     <link rel="stylesheet" href="<?= SITE_URL ?>/assets/css/main.css?v=19">
     <link rel="stylesheet" href="<?= SITE_URL ?>/assets/css/jobby-theme.css?v=9">
     <link rel="stylesheet" href="<?= SITE_URL ?>/assets/css/job-rows.css?v=9">

   ⚠️ v2 דורש את job_card.php המעודכן. הם זוג — אל תעלה אחד בלי השני.
      v1 עבד על ה-markup הישן; v2 מניח את החדש.

   v9: התיאור מוצג כפסקאות ורשימות (.job-bullets) במקום nl2br
        עם "-" גולמי. דורש job.php של v9.

   v8: עמוד המשרה עבר לשתי עמודות ולראש לבן. דורש job.php של v8.

   v7: מצבי ה"אחרי" של ההגשה (.ja-*). דורש את job.php המעודכן —
        הם זוג. בלי ה-CSS המצבים ייראו כטקסט חשוף.

   v6: ענף ההגשה של משתמש מחובר קיבל כרטיס. עד עכשיו הקובץ,
        מכתב המוטיבציה, הכפתור וה"שמור" ריחפו כארבע תיבות לבנות
        נפרדות על הסגול — רק לאורח היה #guest-apply-box שאיחד
        אותם. אין שינוי באורח ובמשרה נעולה.

   v5: עמוד המשרה — התיבה הימנית 230px ← 344px, וה-hero והגוף
        משוחררים מ-max-width:820px אל רוחב ה-container המלא
        (1160px). לפני כן הכרטיס נגמר ב-820 בעוד רצועת השיתוף
        והפרימיום שמתחתיו כבר היו 1160 — קפיצה שנראתה כמו באג.
        CSS בלבד. אין שינוי ב-job.php.

   v4: נוספה שורת הנתונים בעמוד המשרה (.job-facts) — עיר, היקף
        ותחום. דורש את job.php המעודכן.

   v3: תוקן חסימת flex-direction:column של main.css במובייל
        (208px ← 159px בטלפון). שאר הקובץ זהה ל-v2.

   מה השתנה מ-v1:
     [T1] הפס והרקע עברו לכאן מ-style= inline שהיה על ה-<article>.
     [T2] .jicon — אייקוני SVG במקום אימוג'י.
     [T3] .job-row-head ו-.job-row-meta — התגיות עלו לשורת המטא.
          142px ← ~95px.
     חדש: .job-row-logo — לוגו החברה היה float:left ונשבר בתוך
          flex. עכשיו הוא פריט flex אמיתי.

   על !important: jobby-theme.css הקיים משתמש בו על .jbtn-apply
   ועל .jtag-cat. בלעדיו כאן, שתי ההצהרות האלה לא נכנסות. מוגבל
   אך ורק לתכונות שהקובץ הקיים כבר תפס.
   ============================================================ */

/* ---------- 1. הכרטיס ---------- */

.job-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #E6E8F0;
  border-right: 3px solid #4F46E5;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  transition: box-shadow .18s ease, border-color .18s ease;
}

.job-row:hover {
  box-shadow: 0 8px 22px rgba(30, 27, 75, .10);
  transform: none;                 /* main.css:934 מזיז את השורה 2px הצידה */
}

/* --- מצבי השורה. הסדר כאן הוא סדר העדיפות: --- */
/*     רגילה < קרולר < פרימיום < חבילה < הוגשה   */

.job-row-ai       { border-right-color: #818CF8; }

.job-row-featured {
  border-color: #C4B5FD;
  border-right-color: #7C3AED;
  background: #FDFCFF;
}

.job-row-pack {
  border-color: #A7F3D0;
  border-right-color: #047857;
  background: #FBFEFC;
}

.job-row-applied {
  border-color: #E6E8F0;
  border-right-color: #CBD5E1;
  background: #FBFCFE;
}

.job-row-applied .job-row-title { color: #64748B; font-weight: 500; }

/* ---------- 2. לוגו החברה ---------- */
/* היה float:left — נשבר ברגע ש-.job-row-main הפך ל-flex. */

.job-row-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid #E6E8F0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.job-row-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---------- 3. גוף השורה ---------- */

.job-row-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}

.job-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.job-row-title {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #0F172A;
  text-decoration: none;
}

.job-row-title:hover { color: #4F46E5; text-decoration: none; }

/* [T3] שורה אחת: חברה · זמן · תחום · אזור */
.job-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #64748B;
}

.job-row-company { font-weight: 500; color: #475569; }
.job-row-company.is-locked { color: #6D28D9; font-weight: 600; }
.job-row-sep { color: #CBD5E1; margin: 0; }

/* התקציר נשאר ב-HTML למען גוגל, ומוסתר ברשימה.
   רוצה אותו בחזרה? החלף display:none בבלוק המוער שמתחת. */
.job-row-summary { display: none; }

/*
.job-row-summary {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.5;
  color: #64748B;
}
*/

/* ---------- 4. אייקונים ---------- */

.jicon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.125em;
}

/* ---------- 5. תגיות ---------- */

.jtag,
.jtag-cat,
.jtag-region {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: #F4F6FA !important;
  color: #475569 !important;
  border-radius: 8px !important;
  padding: 4px 9px !important;
  font-size: 12.5px !important;
  font-weight: 400;
  white-space: nowrap;
}

.jtag-applied {
  background: #ECFDF5 !important;
  color: #047857 !important;
  font-weight: 600;
}

/* צ'יפ ליד הכותרת — פרימיום / מקודמת */
.jchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.jchip-feat { background: #F5F3FF; border: 1px solid #DDD6FE; color: #6D28D9; }
.jchip-pack { background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857; }

/* ---------- 6. פעולות ---------- */

.job-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;                      /* חייב — אחרת סעיף 8 בולע אותן */
}

.jsave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #E6E8F0;
  border-radius: 12px;
  background: #fff;
  color: #94A3B8;
  font-size: 19px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}

.jsave:hover { color: #4F46E5; border-color: #D9DCF7; background: #F7F8FE; }

.jsave.saved {
  background: #EEF0FC;
  border-color: #D9DCF7;
  color: #4F46E5;
}

.jsave.saved .jicon { fill: currentColor; }

/* הכפתור הכתום → קישור שקט.
   הכתום נשמר לפעולה ראשית אחת בעמוד (כפתור החיפוש). */
.jbtn-apply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  border: 0;
  box-shadow: none;
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  background: none !important;
  color: #4F46E5 !important;
  padding: 0 8px !important;
  border-radius: 0 !important;
}

.jbtn-apply:hover { color: #4338CA !important; text-decoration: none; }

/* ---------- 7. תג הצד ---------- */

.job-row-badge {
  flex: 0 0 auto;
  order: 2;
  margin: 0;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ECFDF5;
  font-size: 12.5px;
  font-weight: 600;
  color: #047857;                  /* עובר AA. #15803d הקודם גבולי */
  white-space: nowrap;
}

/* badge-ai שומר על העיצוב שלו מ-main.css, כולל אנימציית הברק —
   רק האייקון שבתוכו התחלף מאימוג'י ל-SVG. */
.badge-ai .jicon { stroke-width: 2; }

/* ---------- 8. כל הכרטיס לחיץ ---------- */
/* הכותרת נפרסת מעל שטח הכרטיס. ה-tracking האינליני משתמש
   ב-e.target.closest('a') ולכן ממשיך לעבוד בדיוק כמו קודם.
   רוצה שרק הכותרת תהיה לחיצה? מחק את הבלוק. */

.job-row-title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ---------- 9. מובייל ---------- */
/* ⚠️ main.css:983 קובע .job-row{flex-direction:column} מתחת ל-600px.
   בלי לאפס אותו כאן, כל ילד מקבל שורה משלו — התג והפעולות ירדו
   לשתי שורות נפרדות והשורה תפחה ל-208px. */

@media (max-width: 640px) {
  .job-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
    padding: 12px 13px;
  }

  .job-row-logo    { order: 0; }
  .job-row-main    { order: 1; flex: 1 1 100%; min-width: 0; }
  .job-row-badge   { order: 2; flex: 0 0 auto; margin: 0; }
  .job-row-actions { order: 3; flex: 1 1 auto; justify-content: flex-end; gap: 6px; }

  .job-row-head  { gap: 6px; }
  .job-row-title { font-size: 15.5px; }

  .jbtn-apply { min-height: 40px; }
  .jsave      { width: 40px; height: 40px; }
}


/* ============================================================
   10. עמוד משרה — שורת הנתונים          [v4 · 02/09/2026]
   ------------------------------------------------------------
   city ו-job_type היו במסד ונשלחו רק ל-JSON-LD. כאן הם נראים.
   מספר העמודות נקבע ב-PHP לפי מה שקיים בפועל, כדי שלא תישאר
   משבצת ריקה במשרה בלי תחום או בלי עיר.
   ============================================================ */

.job-facts {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  margin: 14px 0 12px;
  background: #F6F7FB;
  border-radius: 14px;
}

.job-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.job-fact-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
}

.job-fact-val {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #0F172A;
}

.job-fact-sub {
  font-size: 12.5px;
  line-height: 1.35;
  color: #64748B;
}

/* שורת המטא מתחת — פורסם · צפיות · תג אימות */
.job-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 13.5px;
  color: #64748B;
}

.job-hero-dot {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: #CBD5E1;
}

@media (max-width: 700px) {
  .job-facts { gap: 8px; padding: 12px; }
  .job-fact-lbl { font-size: 11px; }
  .job-fact-val { font-size: 13.5px; }
  .job-fact-sub { font-size: 11.5px; }
}

/* ============================================================
   11. עמוד משרה — ניגודיות ב-hero        [v4 · 02/09/2026]
   ------------------------------------------------------------
   jobby-theme.css:108 צובע את .job-hero בגרדיאנט אינדיגו עם
   !important, אבל main.css:995-996 השאיר את הכותרת ב-#1e2a4a
   ואת שם החברה ב-#4f46e5 — אינדיגו על אינדיגו.

   שם החברה היה כמעט בלתי קריא. זה לא נגרם מהשינוי שלנו; זה
   נחשף כשהסתכלנו על האזור.
   ============================================================ */

.job-hero-title   { color: #FFFFFF; }
/* jobby-theme.css:98 קובע כאן #4f46e5 עם !important — אינדיגו
   על אינדיגו. חייבים !important כדי לגבור. */
.job-hero-company { color: #C7D2FE !important; }
.job-hero-meta    { color: rgba(255,255,255,.78); }
.job-hero-dot     { background: rgba(255,255,255,.45); }

/* קופסת הנתונים נשארת בהירה — היא הניגוד שמושך את העין */
.job-facts { background: #FFFFFF; box-shadow: 0 2px 10px rgba(15,12,50,.12); }

/* ============================================================
   12. עמוד משרה — פריסה ותיבת ההגשה     [v5 · 02/09/2026]
   ------------------------------------------------------------
   מדידה על החי (job.php?id=65093, 1440px):
     .container      1160px
     .job-hero        820px   ← max-width ב-main.css:991
     .job-body        820px   ← max-width ב-main.css:652
     .job-share-wrap 1160px
     <section> פרימיום 1160px

   כלומר שני הבלוקים הראשיים היו צרים ב-340px מכל מה שמתחתיהם.
   הקפיצה הזו היא מה שגרם לעמוד להיראות לא מיושר.

   התיבה הימנית הייתה 230px. שישה ענפי הגשה נדחסו לתוכה — טופס
   האורח עם שלושה שדות, קובץ, תיבת הסכמה וכפתור. 344px הוא הרוחב
   מהמוקאפ, והוא לא בא על חשבון הכותרת: העמודה הראשית עולה
   505px ← 715px, כי ה-hero כולו התרחב.

   ⚠️ !important נדרש כאן משתי סיבות שונות:
      · max-width ו-width — main.css:991/999 קובע אותם בסלקטור
        זהה (.job-hero / .job-hero-side), וזה נטען אחריו אז
        למעשה מיותר — אבל jobby-theme.css:108 כבר תופס .job-hero
        עם !important, ועדיף לא להסתמך על סדר.
      · השדות בתוך התיבה — ל-job.php יש style= inline על כל
        input. inline גובר על גיליון חיצוני; רק !important עוקף.
        לכן כל ההצהרות כאן ממוקדות ל-.job-hero-apply בלבד.
   ============================================================ */

/* --- פריסה: שחרור מ-820px --- */
.job-hero { max-width: 100% !important; padding: 26px 32px !important; gap: 32px !important; }
.job-body { max-width: 100% !important; }
.job-hero-main { min-width: 0 !important; }

/* הגוף התרחב ל-1160 — הטקסט לא צריך להתרחב איתו.
   780px ≈ 75 תווים בשורה, הטווח הקריא. */
.job-desc-content, .job-body h2 { max-width: 780px; }

/* שורת הנתונים על 715px נמתחה לרוחב ריק. 560 מספיק לשלוש. */
.job-facts { max-width: 560px; }

/* --- התיבה: 230px ← 344px --- */
/* מוגבל ל-701px ומעלה. מתחת לזה main.css:1007 קובע 100%,
   וזה נכון — אין שם שתי עמודות. */
@media (min-width: 701px) {
  .job-hero-side { width: 344px !important; }
}

/* --- שדות ההגשה (שני הענפים: אורח ומחובר) --- */
.job-hero-apply input[type="text"],
.job-hero-apply input[type="email"],
.job-hero-apply input[type="tel"] {
  box-sizing: border-box !important;
  height: 46px !important;
  padding: 0 13px !important;
  border: 1.5px solid #DCE0EA !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  margin-bottom: 9px !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
}

.job-hero-apply textarea {
  box-sizing: border-box !important;
  padding: 11px 13px !important;
  border: 1.5px solid #DCE0EA !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  font-family: inherit !important;
  line-height: 1.55 !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* מצב פוקוס — לא היה קודם בכלל. מי שממלא בטלפון לא ידע איפה הוא. */
.job-hero-apply input[type="text"]:focus,
.job-hero-apply input[type="email"]:focus,
.job-hero-apply input[type="tel"]:focus,
.job-hero-apply textarea:focus {
  border-color: #4F46E5 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .13) !important;
}

.job-hero-apply input[type="file"] {
  box-sizing: border-box !important;
  padding: 12px !important;
  border: 1.5px dashed #C7CBDA !important;
  border-radius: 12px !important;
  background: #FAFBFD !important;
  font-size: 13px !important;
}

/* --- כרטיס האורח --- */
#guest-apply-box {
  padding: 18px !important;
  border-radius: 16px !important;
  border: 1px solid #E6E8F0 !important;
  box-shadow: 0 4px 18px rgba(15, 12, 50, .10) !important;
}
#guest-apply-box > div:first-child { font-size: 16px !important; margin-bottom: 12px !important; }
#guest-apply-box label {
  border-radius: 12px !important;
  padding: 12px !important;
  border-color: #DCE0EA !important;
}

/* --- הכפתור הראשי --- */
/* כתום ה-CTA שכבר קיים באתר (.jbtn-apply ב-jobby-theme.css:104),
   מכהה ל-#D4451F כדי לעמוד ב-AA על לבן. אינדיגו על כרטיס לבן
   בתוך hero אינדיגו לא בלט כפעולה הראשית. */
.job-hero-apply .btn-primary {
  height: 52px !important;
  font-size: 16.5px !important;
  border-radius: 13px !important;
  font-weight: 600 !important;
  background: #D4451F !important;
  border-color: #D4451F !important;
  color: #FFFFFF !important;
}
.job-hero-apply .btn-primary:hover { background: #B93A18 !important; }

#save-job-btn { height: 46px !important; border-radius: 12px !important; font-size: 14px !important; }

/* --- מובייל --- */
/* הכותרת הייתה 30px גם ב-375px — שש שורות לפני שראו משהו אחר. */
@media (max-width: 700px) {
  .job-hero { padding: 18px 16px !important; gap: 16px !important; }
  .job-hero-title { font-size: 22px !important; line-height: 1.3 !important; }
  .job-hero-company { font-size: 14.5px !important; }
  #guest-apply-box { padding: 14px !important; }
}

/* ============================================================
   13. עמוד משרה — כרטיס ההגשה למחובר    [v6 · 02/09/2026]
   ------------------------------------------------------------
   job.php עוטף את טופס האורח ב-#guest-apply-box — כרטיס לבן
   אחד. חמשת הענפים האחרים לא עוטפים כלום: הילדים יושבים ישירות
   ב-.job-hero-apply, וכל אחד מהם מקבל רקע לבן משלו. על ה-hero
   הסגול זה נראה כארבע תיבות מרחפות במקום טופס אחד.

   :has() פותר את זה בלי לגעת ב-PHP — הכרטיס נכנס רק כשאין
   #guest-apply-box (שם כבר יש כרטיס) ואין .job-hero-lock (שם
   הטקסט מיועד לרקע סגול, וכרטיס לבן היה מבליע את
   "כבר מנוי? התחבר" שהוא לבן על שקוף).

   @supports — דפדפן בלי :has() מקבל בדיוק את מה שיש היום.
   ============================================================ */

@supports selector(:has(*)) {
  .job-hero-apply:not(:has(#guest-apply-box)):not(:has(.job-hero-lock)) {
    background: #FFFFFF;
    border: 1px solid #E6E8F0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 18px rgba(15, 12, 50, .10);
    gap: 10px;
  }
  /* כותרת — רק לענף שבאמת מגישים בו. :has(#apply-btn) מדייק:
     למעסיק ("זו המשרה שלך") ולמשרה חיצונית אין כפתור כזה, ו-
     "הגשת מועמדות" מעליהם היה שקר. */
  .job-hero-apply:has(#apply-btn)::before {
    content: "הגשת מועמדות";
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 2px;
  }
}

/* אפור על אפור-בהיר. עכשיו הכרטיס לבן — צריך גבול, לא רקע. */
#save-job-btn { background: #FFFFFF !important; border: 1.5px solid #DCE0EA !important; color: #475569 !important; }
#save-job-btn:hover { border-color: #4F46E5 !important; color: #4F46E5 !important; }

/* ============================================================
   14. עמוד משרה — מצבי ההגשה (.ja-*)     [v7 · 02/09/2026]
   ------------------------------------------------------------
   ⚠️ דורש job.php של v7. הם זוג.

   ארבעת המצבים כבר היו קיימים ב-JS — הם פשוט מעולם לא עוצבו,
   ונכתבו כ-style= inline בתוך מחרוזות JavaScript. עכשיו הם
   מחלקות, וההבחנה החשובה נשמרת:

     ja-done  (ירוק)  = נשלח למעסיק. יש קובץ.
     ja-pend  (כתום)  = נרשם, לא הוגש. אין קובץ.

   אסור לכתוב "מועמדותך נשלחה" כשהיא ממתינה לקובץ — זה מה
   שההפרדה הזו מגנה עליו.
   ============================================================ */

.ja-ic, .ja-ic-lg {
  flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round;
}
.ja-ic    { width: 18px; height: 18px; stroke-width: 2;   margin-top: 1px; }
.ja-ic-lg { width: 24px; height: 24px; stroke-width: 2.6; stroke: #FFFFFF; margin: 0; }

.ja-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: #0F172A; margin-bottom: 12px;
}
.ja-row { display: flex; align-items: flex-start; gap: 9px; }

/* --- אין קובץ: הצעה, לא חסימה --- */
.ja-warn {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; background: #FFFBEB;
  border: 1px solid #FDE68A; border-radius: 13px;
  color: #92400E; text-align: right;
}
.ja-warn-slim { flex-direction: row; align-items: flex-start; gap: 9px; padding: 12px; }
.ja-warn-t { display: block; font-size: 14.5px; font-weight: 700; color: #7C2D12; margin-bottom: 4px; }
.ja-warn-s { font-size: 13px; line-height: 1.6; color: #92400E; }
.ja-acts   { display: flex; gap: 8px; }
.ja-mini {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1; height: 42px; border-radius: 11px;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; border: 0;
}
.ja-mini-fill { background: #4F46E5; color: #FFFFFF; }
.ja-mini-fill:hover { background: #4338CA; }
.ja-mini-out  { background: #FFFFFF; border: 1px solid #FDE68A; color: #92400E; }
.ja-mini-out:hover { background: #FFFBEB; }

/* --- מצבי סיום --- */
.ja-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 16px; border-radius: 13px; text-align: center;
}
.ja-badge {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
}
.ja-state-t { font-size: 16.5px; font-weight: 700; }
.ja-state-s { font-size: 13.5px; line-height: 1.6; }

.ja-done            { background: #ECFDF5; border: 1px solid #A7F3D0; }
.ja-done .ja-badge  { background: #047857; }
.ja-done .ja-state-t{ color: #065F46; }
.ja-done .ja-state-s{ color: #047857; }

/* כתום ולא ירוק — במכוון. הוא נרשם, הוא לא הגיש. */
.ja-pend            { background: #FFF7ED; border: 1px solid #FED7AA; }
.ja-pend .ja-badge  { background: #C2410C; }
.ja-pend .ja-state-t{ color: #7C2D12; }
.ja-pend .ja-state-s{ color: #9A3412; }

/* מופיע רק כש-data.registered חוזר אמת — כלומר רק למי שבאמת
   נוצר לו חשבון עכשיו, לא למי שכבר היה מחובר. */
.ja-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 10px; padding: 12px;
  background: #EEF0FC; border-radius: 12px;
  font-size: 13px; line-height: 1.6; color: #312E81; text-align: right;
}
.ja-note .ja-ic { stroke: #4F46E5; }
.ja-note b { font-weight: 600; }

/* --- שגיאה --- */
.ja-err {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 13px; background: #FEF2F2;
  border: 1px solid #FECACA; border-radius: 12px;
  font-size: 13.5px; line-height: 1.6; color: #991B1B; text-align: right;
}
.ja-err .ja-ic { stroke: #B91C1C; }
.ja-err a { color: #991B1B; font-weight: 600; text-decoration: underline; }
/* השדה שנפל מסומן — אף אחד לא ממלא טופס פעמיים */
.ja-field-err { border-color: #FCA5A5 !important; background: #FFFBFB !important; }

/* --- כפתורי ההמשך --- */
.ja-after {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; margin-top: 10px; border-radius: 12px;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.ja-after-cta   { background: #D4451F; color: #FFFFFF; }
.ja-after-cta:hover { background: #B93A18; color: #FFFFFF; }
.ja-after-out   { border: 1px solid #D9DCF7; color: #4F46E5; }
.ja-after-out:hover { background: #EEF0FC; color: #4F46E5; }
.ja-after-ghost { height: 42px; margin-top: 6px; color: #64748B; font-weight: 500; }
.ja-after-ghost:hover { color: #4F46E5; }

/* שם הקובץ שנבחר — היה אימוג'י ✅, עכשיו ✓ בירוק */
.ja-file-ok { color: #047857 !important; font-weight: 600; }

/* ============================================================
   15. עמוד משרה — שתי עמודות וראש לבן      [v8 · 02/09/2026]
   ------------------------------------------------------------
   ⚠️ דורש job.php של v8 (‎.job-layout / ‎.job-col-*).

   שתי החלטות:

   1. תיבת ההגשה יצאה מתוך ה-hero. עד כה היא הייתה ילד של
      ‎.job-hero, ולכן נגמרה איפה שהוא נגמר — והתיאור רץ לבדו
      מתחתיה על כל הרוחב, עם שטח ריק ענק לצדו. עכשיו היא עמודה
      שמלווה את העמוד, ו-sticky כדי שתישאר בשדה הראייה בגלילה.

   2. הראש לבן. jobby-theme.css:108 צובע את ‎.job-hero בגרדיאנט
      אינדיגו עם ‎!important; זה בא משם ולא ממנו. אינדיגו נשאר
      בכפתורים, בקישורים ובתגיות — כלומר במקומות שבהם הוא אומר
      משהו — ולא כרקע ל-560px של טקסט.
      זה מחליף את סעיף 11, שכייל ניגודיות מול הסגול.
   ============================================================ */

.job-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  gap: 24px;
  align-items: start;
  margin: 16px 0 0;
}
.job-col-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.job-col-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }

/* --- הראש --- */
/* !important — jobby-theme.css:108 תופס את הרקע. */
.job-hero {
  /* !important רק על הרקע — שם jobby-theme.css:108 תופס.
     ה-border בלי, כדי שהפס הימני ה-inline (כחול/תכלת = משרת AI)
     יישאר. עם !important הוא נמחק, וזה סימון אמיתי. */
  background: #FFFFFF !important;
  border: 1px solid #E6E8F0;
  border-radius: 16px;
  padding: 24px 26px;
  margin: 0;
  max-width: 100%;
  display: block;
}
.job-hero-main { min-width: 0; }

.job-hero-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.job-hero-headtext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.job-hero-logo {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex-shrink: 0;
  background: #FFFFFF; border: 1px solid #E6E8F0; border-radius: 14px; overflow: hidden;
}
.job-hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* אין לוגו — ראשי תיבות. לא רקע ריק. */
.job-hero-ini {
  background: #EEF0FC; border-color: #E0E3F8; color: #4F46E5;
  font-size: 18px; font-weight: 600; letter-spacing: -.5px;
}

.job-hero-title {
  margin: 0 !important;
  font-size: 27px !important; font-weight: 700 !important;
  line-height: 1.25 !important; letter-spacing: -.4px;
  color: #0F172A !important;
}
.job-hero-company {
  margin: 0 !important;
  font-size: 15.5px !important; font-weight: 600 !important;
  color: #4F46E5 !important;
}
.job-hero-hidden { color: #7C3AED; }

/* על לבן — אפור, לא שקיפות לבנה */
.job-hero-meta { margin: 12px 0 0 !important; color: #64748B !important; }
.job-hero-dot  { background: #CBD5E1 !important; }

/* שורת הנתונים חוזרת לאפור בהיר: על ראש לבן, כרטיס לבן נעלם */
.job-facts {
  background: #F6F7FB !important;
  box-shadow: none !important;
  max-width: none;
  padding: 16px !important;
  border-radius: 14px !important;
  margin: 0 !important;
}
.job-fact-val { font-size: 16px; }

/* --- הגוף --- */
.job-body {
  margin: 0;
  max-width: 100%;
  border: 1px solid #E6E8F0;
  border-radius: 16px;
  padding: 24px 26px;
}
/* קו מתחת לכל כותרת היה מחלק את הכרטיס לרצועות. המרווח מספיק. */
.job-description h2 { border-bottom: 0; padding-bottom: 0; margin: 24px 0 12px; font-size: 18px; }
.job-description h2:first-child { margin-top: 0; }
.job-desc-content, .job-body h2 { max-width: none; }

/* --- דרישות כרשימה --- */
.job-req { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.job-req li { display: flex; align-items: flex-start; gap: 10px; }
.job-req-ic { stroke: #047857; stroke-width: 2.5; margin-top: 4px; width: 16px; height: 16px; }
.job-req li span { font-size: 15.5px; line-height: 1.65; color: #334155; }

/* --- סוכן המשרות --- */
.job-alert-box { background: #EEF0FC; border: 1px solid #DDE1F9; border-radius: 16px; padding: 18px; }
.job-alert-t {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: #312E81; margin-bottom: 6px;
}
.job-alert-t .ja-ic { stroke: #4F46E5; margin-top: 0; }
.job-alert-s { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: #4C51A8; }
.job-alert-btn {
  display: flex; align-items: center; justify-content: center;
  height: 44px; border-radius: 12px;
  background: #4F46E5; color: #FFFFFF;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.job-alert-btn:hover { background: #4338CA; color: #FFFFFF; }

/* --- הטופס: תוויות ואזור גרירה --- */
.ja-sub { margin: -6px 0 14px; font-size: 13px; line-height: 1.55; color: #64748B; }
.ja-lbl { display: block; font-size: 13px; font-weight: 500; color: #475569; margin-bottom: 5px; }
.job-hero-apply input[type="text"],
.job-hero-apply input[type="email"],
.job-hero-apply input[type="tel"] { margin-bottom: 12px !important; }

.ja-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 14px; margin-bottom: 8px;
  border: 1.5px dashed #C7CBDA; border-radius: 13px;
  background: #FAFBFD; cursor: pointer; text-align: center;
}
.ja-drop:hover, .ja-drop-over { border-color: #4F46E5; background: #F5F5FE; }
.ja-drop .ja-ic { stroke: #4F46E5; margin: 0 0 2px; }
.ja-drop-t { font-size: 14px; font-weight: 600; color: #4F46E5; }
.ja-drop-s { font-size: 12px; color: #64748B; }
/* ה-input עצמו מוסתר — ה-label פותח אותו. לא display:none:
   הוא עדיין צריך לקבל פוקוס מהמקלדת. */
.ja-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ja-fname { font-size: 12px; color: #64748B; min-height: 15px; }
.ja-hint  { margin: 2px 0 8px; font-size: 12px; color: #94A3B8; }

/* --- מובייל: עמודה אחת, ההגשה למטה --- */
/* מובייל — עמודה אחת, אבל ההגשה עולה מעל התיאור.
   בלי זה היא נופלת אחרי 640px של טקסט, וזו נסיגה מהמצב הקודם
   שבו היא ישבה בתוך ה-hero. display:contents מפרק את שתי
   העמודות כדי ש-order יוכל לסדר את ארבעת הבלוקים. */
@media (max-width: 900px) {
  .job-layout { display: flex; flex-direction: column; gap: 16px; }
  .job-col-main, .job-col-side { display: contents; }
  .job-hero      { order: 1; }
  .job-hero-side { order: 2; width: 100% !important; }
  .job-body      { order: 3; }
  .job-alert-box { order: 4; }
}
@media (max-width: 700px) {
  .job-hero, .job-body { padding: 18px 16px !important; }
  .job-hero-title { font-size: 21px !important; }
  .job-hero-logo { width: 46px; height: 46px; border-radius: 12px; }
  .job-hero-ini { font-size: 15px; }
  .job-req li span { font-size: 15px; }
}

/* ============================================================
   16. עמוד משרה — טקסט חופשי                [v9 · 02/09/2026]
   ------------------------------------------------------------
   ⚠️ דורש job.php של v9 (jobby_rich_text).

   עד כה התיאור עבר nl2br, וה-"-" שהמעסיק הקליד הופיע כתו.
   מתחתיו הדרישות כבר היו רשימה עם ✓ — שני שדות זהים במקור
   שנראו שונה לגמרי.

   כאן הסימון עדין: נקודה, לא ✓. הדרישות הן רשימת תנאים ולכן
   מקבלות סימון חיובי; התיאור הוא פירוט, וסימון חזק מדי בו היה
   מתחרה עם הדרישות במקום לשרת אותן.
   ============================================================ */

.job-desc-content > p { margin: 0 0 12px; }
.job-desc-content > p:last-child { margin-bottom: 0; }

.job-bullets {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.job-bullets:last-child { margin-bottom: 0; }
.job-bullets li {
  position: relative;
  margin: 0 !important;
  padding-right: 17px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #334155;
}
.job-bullets li::before {
  content: "";
  position: absolute;
  right: 4px;
  top: .72em;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: #A5B4FC;
}