/* ============================================================
   KosovaJob redesign — Job details (jobs.php)
   Figma frames: 64:5307 (desktop 1512), 64:5639 (mobile 393).
   Measured off the 1:1 Figma render: card #FFFEFD r16 pad 56,
   logo tile 132px #F5F5F5 r24, meta text #383838 + #FF5067 icons,
   deadline bar #F4F6F9 + 1px #ECECF2 r16, related cards = home
   job-card pattern (72px logo, #919191 meta w/ pin+clock icons).
   IMPORTANT: legacy class names (.mobileOnlyCats #mobile_*,
   .socialBtns*, .addToFavsBtn, .followCompanyBtn, .listsSimilar*,
   .fixedPopUpCnt*, .applyNowBtnPopUp, .defaultSettings, ...) are
   kept in the markup because inline JS / injected AJAX markup key
   on them — restyle, never rename.
   ============================================================ */

/* ---------- decorative page tint (same as homepage hero) ---------- */
.kj-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1200px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.kj-bg::before, .kj-bg::after {
  content: '';
  position: absolute;
  width: 682px;
  height: 682px;
  border-radius: 50%;
  background: var(--kj-gradient);
  filter: blur(182px);
  opacity: .08;
}
.kj-bg::before { top: 80px; left: -267px; }
.kj-bg::after  { top: 50px; right: -227px; }

/* ---------- layout ---------- */
/* The breadcrumb sits in its own full-width row ABOVE the two-column grid, so
   the sidebar card and the job card start on the same line (it used to live
   inside the left column, which pushed the job card down by the crumb's height
   while the sidebar stayed at the top). Same box as .kj-job-layout. */
.kj-job-crumbwrap {
  max-width: var(--kj-b1-container, 1200px);
  margin: 0 auto;
  padding: 24px 32px 0;
}
/* 18px under the row: the 2026-10-09 bundle (KJJob.html:16); this rule outranks the
   2026-09-15 `.kj-crumb { margin-bottom: 18px }` below, so it has to say 18 too (it pinned 16). */
.kj-job-crumbwrap .kj-crumb { margin: 0 0 18px; }
.kj-job-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 8px;
  /* Batch-1 KJJob artboard: wrap max-width 1200 / padding 24px 32px 80px ->
     content column 1136 (772 + 24 gap + 340), matching the b1 container the
     header/footer already use (--kj-b1-container). This replaces the older
     PDF-p14-sourced 1360/24px-gutter box. */
  max-width: var(--kj-b1-container, 1200px);
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 0;
}
/* 2026-10-10 (the signed-in ad page): base.css widens every .kj-container after the signed-in
   header to --kj-b3-container with a two-class selector (`.kj-nav-wrap--auth ~ * .kj-container`,
   1280 / 32), which beat the one-class rule above — the fixed 772 + 24 + 340 grid then started
   40px left of the crumb row and of the design (main at x 112 instead of 152 at 1440). Two
   classes, loaded after base.css: the grid keeps the 1200 box under both chromes, like
   .kj-job-crumbwrap. Measured: tests/kj-job-signed-2026.test.php. */
.kj-job-shell .kj-job-layout { max-width: var(--kj-b1-container, 1200px); }
@media (min-width: 1100px) {
  .kj-job-layout {
    /* Batch-1: 772px main / 340px sidebar, gap 24 -> 1136. */
    grid-template-columns: 772px 340px;
    gap: 24px;
    align-items: start;
    padding-top: 0;
  }
  .kj-side    { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .kj-related { grid-column: 1; grid-row: 2; }
}
.kj-main, .kj-side { min-width: 0; }

/* visually-hidden labels for the icon-only meta rows */
.kj-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- success alert (?alert=1) ---------- */
.popAlertArea {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 48px 14px 20px;
  background: rgba(7, 148, 85, 0.08);
  border: 1px solid rgba(7, 148, 85, 0.35);
  border-radius: var(--kj-r-md);
  color: var(--kj-success);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}
.homePopExitBtn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--kj-success);
}

/* ---------- breadcrumb (Batch-1) ---------- */
.kj-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-crumb a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.kj-crumb a:hover { color: var(--kj-b3-title, #041E42); }
.kj-crumb__cur { color: var(--kj-b3-title, #041E42); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }

/* ---------- job header card ---------- */
.kj-jobhead {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 24px; /* Batch-1: 24px (not on the --kj-b1-r-* scale, used literally) */
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4,30,66,.07));
  padding: 24px 28px;
}
.kj-jobhead__actions {
  /* Batch-1: the action circles sit INLINE in the CTA row (bell/bookmark/share),
     not pinned to the card's top-right corner. */
  position: static;
  display: flex;
  gap: 8px;
  z-index: 2;
  order: 3;
}
.kj-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  color: var(--kj-b3-body, #313C53);
  cursor: pointer;
  transition: box-shadow .15s ease;
}
.kj-iconbtn:hover { box-shadow: var(--kj-shadow-card); }
/* saved-jobs bookmark (anonymous -> /login link); label text hidden, icon drawn.
   Batch-1 uses a BOOKMARK glyph (not a heart) at 42px to match the job-card save
   button and the KJJob action-row spec. */
.addToFavsBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23313C53' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v16l-6-4-6 4V4z'/%3E%3C/svg%3E") center / 18px no-repeat;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  cursor: pointer;
  font-size: 0;
  color: transparent;
  transition: box-shadow .15s ease;
}
.addToFavsBtn:hover { box-shadow: var(--kj-shadow-card); }

.kj-jobhead__top {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.kj-jobhead__logo {
  flex: 0 0 92px;                    /* 84px +10%, no outline */
  width: 92px;
  height: 92px;
  border-radius: 14px;
  background-color: #F5F5F5;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: content-box;
  padding: 8px;
  border: 0;
  box-sizing: border-box;
}
.kj-jobhead__id {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* the company line (2026-10-04, operator: "reposition the package type … close to the
   company name"): name, verified tick, then the ULTRA / PREMIUM+ tag and "E re" on the
   same line. The pills (20px, 11px text) match the 15px company text; a long name
   simply wraps the pills to the next line. No row of their own above the name. */
.kj-jobhead__coline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.kj-jobhead__badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kj-jobhead__comp {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: #606060;
  margin-bottom: 8px;
}
.kj-jobhead__comp b, .kj-jobhead__comp .containerLeftAreaTopAreaRightTitleComp { font-weight: 500; }
/* verified-company badge — companyVerified table, row existence = verified,
   admin-set only (kj-companyextras.php, already used on the company profile
   header). No verified companies exist yet on this platform, so this simply
   never renders today, honestly, until an admin verifies one. */
.kj-ph__verified {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  color: #1D9BF0;
  cursor: help;
}
.kj-ph__verified svg { display: block; width: 100%; height: 100%; }
.containerLeftAreaTopAreaRightTitleCompT:hover { color: var(--kj-primary); }
.kj-jobhead__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.kj-jobhead__title h1 {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 32px;
  font-weight: 800;
  color: var(--kj-b3-title, #041E42);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
}
/* ULTRA / PREMIUM+ — Batch-1 soft-chip badge row (Badge size=sm). The job type is
   not a badge: it shows once, in the meta row (2026-10-03). "E re" beside them is the
   shared pill since 2026-10-10 (operator: "apply the same logic on all pages where e re is
   used"): kj-newpill.php, styled by base.css only — no rule in this file restyles it, so
   it measures exactly as the cards' (47.6 x 20, the dot + sheen). */
.kj-jbadge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 11px;
  white-space: nowrap;
  vertical-align: middle;
}
.kj-jbadge--ultra { color: #9A6312; background: #FFEFD2; }
.kj-jbadge--prem  { color: #CE3340; background: #FFF1EF; }
/* Apply Now + Testo veten share this row (design p20). */
.kj-jobhead__cta { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* PDF p14: the CTA is content-width, not a fixed pill — "Apply Now" runs
   x=312..444 = 133px = 24 + 84 (text) + 24, i.e. plain .kj-btn padding.
   The old min-width:170px stretched it 37px past the design. */

.kj-divider, .divider {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--kj-stroke);
  border: 0;
}
/* PDF p14: the header rule reads #DFE3E8 at FULL coverage on row y=351 (and the
   same on mobile p13 row y=500). Total ink is 37/31/24, so with a1<=1 the line is
   <=1.16px thick — it mathematically cannot be #ECECF2 at any thickness. It is
   Surface/Tertiary. Spans x=156..923 = the 768px content width. */
.kj-divider { margin: 32px 0 24px; background: var(--kj-surface-3); }
.divider { margin: 24px 0; }

/* ---------- meta row (legacy .mobileOnlyCats + #mobile_* ids, now the
   design meta row on ALL viewports; values server-rendered AND refilled
   by the legacy inline JS with identical content) ---------- */
.kj-jobmeta {
  display: flex;
  flex-wrap: wrap;
  /* PDF p14: item box gaps measure 18.3 / 18.2 / 17.1 (text advance end 278.19 ->
     next 20px icon box left 296.5, 399.27 -> 417.5, 635.90 -> 653). Ink-to-ink is
     exactly 20px in all three. Was 32. */
  gap: 14px 18px;
}
.kj-jobmeta__item {
  display: inline-flex;
  align-items: center;
  /* PDF p14: icon box right + 12 = label xMin on all four items
     (176->190 [x2 SVG inset], 316.5->329, 437.5->450, 673->686) */
  gap: 12px;
  font-size: 16px;   /* PDF p14: word bbox h=25.54 / 1.596 = 16.0 (was 15) */
  font-weight: 500;
  color: #383838;    /* PDF p14: darkest ink in "London, UK" = #383838 */
  min-width: 0;
}
.kj-jobmeta__item svg { flex: 0 0 auto; color: var(--kj-primary); }
/* Design assets (Location / Briefcase / Category / event .svg) replaced the
   hand-drawn inline icons; they carry their own #FF5067 fill. */
.kj-jobmeta__ico { flex: 0 0 auto; width: 24px; height: 24px; display: block; }
.kj-jobmeta__item .compTitlteOtherS { min-width: 0; }
.kj-jobmeta__item .compTitlteOtherS a { color: inherit; }

/* ---------- tags ---------- */
.kj-tags {
  /* Tags hidden on the job-detail page (operator request 2026-07-30). The markup and the
     /?q= links stay in the DOM — this only hides them, so it is a one-line revert.
     Covers both copies: .tagsAreaBotoomDesk (jobs.php:573) and .tagsAreaBotoomMob (:631). */
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.kj-tags .tagsAreaBotoomLett {
  font-size: 12px;
  font-weight: 600;
  color: #919191;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.kj-tags .tagsAreaBotoomLettRight {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.tagCnt {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-surface-warm);
  border: 1px solid var(--kj-stroke);
  font-size: 12px;
  font-weight: 500;
  color: #383838;
  white-space: nowrap;
}
.tagCnt:hover { border-color: var(--kj-primary); color: var(--kj-primary); }
/* desktop block lives in the header, mobile twin lives after the description */
/* Tags hidden (operator request). These two responsive toggles come AFTER .kj-tags and carry
   the SAME specificity (0,1,0), so they were overriding the display:none above — that is why the
   tags were still visible. Both are pinned to none here; the media-query pair below is likewise
   neutralised. To restore: put back `display:flex` on Desk (and Mob inside the <=1099 query). */
.tagsAreaBotoomDesk { display: none; }
.tagsAreaBotoomMob  { display: none; }
@media (max-width: 759px) {
  .tagsAreaBotoomDesk { display: none; }
  .tagsAreaBotoomMob  { display: none; }   /* was flex — tags hidden, see note above */
}

/* ---------- share rows (socialButtons*.php) ---------- */
.socialBtns { margin-top: 24px; }
.socialBtnsBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.socialBtnsIcons {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #33589c;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  background-image: url(/images/iconmonstr-facebook-1-240.png);
  transition: filter .15s ease, box-shadow .15s ease;
}
.socialBtnsIcons:hover { filter: brightness(1.08); box-shadow: var(--kj-shadow-card); }
.socialBtnsIconsViber     { background-color: #7b519d; background-image: url(/images/iconmonstr-viber-1-240.png); }
.socialBtnsIconsMessenger { background-color: #007cff; background-image: url(/images/iconmonstr-facebook-messenger-1-240.png); }
.socialBtnsIconsWhatsapp  { background-color: #25D366; background-image: url(/images/iconmonstr-whatsapp-1-240.png); }
.socialBtnsIconsCopyLink  { background-color: #565656; background-image: url(/images/iconmonstr-link-1-240.png); }
.socialBtnsIconsEmail     { background-color: #0CB971; background-image: url(/images/iconmonstr-email-2-240.png); }
.socialBtnsIconsLinked    { background-color: #0077B5; background-image: url(/images/iconmonstr-linkedin-1-240.png); }
.socialBtnsIconsCopyLinkTag {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  background: #383838;
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  padding: 5px 8px;
  border-radius: 6px;
  white-space: nowrap;
  display: none;
  z-index: 3;
}
.socialBtnsIconsCopyLinkTagActive {
  display: block;
  animation: kjCopyFade 5s forwards;
}
@keyframes kjCopyFade {
  0% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}
/* duplicate legacy share blocks: features stay in the DOM (their JS also
   defines the share popups), only the redundant visuals are hidden */
/* The share buttons belong INSIDE the header popover, not inline in the description flow.
   This rule previously read ".kj-share-b .socialBtns, .socialBtns3, .socialBtns2" — the
   descendant combinator binds only to the FIRST selector, so it hid the popover's own copy
   (leaving the popover empty) while the standalone inline copy from jobs.php:590 stayed
   visible. Inverted: hide every standalone row, then re-show the one in the popover. */
.socialBtns, .socialBtns2, .socialBtns3 { display: none !important; }
.kj-share-b .socialBtns { display: flex !important; }
/* .socialBtns carries margin-top:24px for its in-page use further down the
   article; inside the popover that margin is what made the top gap uneven. */
.kj-share-b .socialBtns { margin-top: 0; }
.kj-share-b .socialBtnsBox { flex-wrap: nowrap; }

/* ---------- description ---------- */
/* Gap between the header block (meta row) and the description.
   Measured on design p20: the meta row's line box ends at y409.8 and the first
   description heading ("Rreth Pozitës:") starts at y437.7 => 28px. Was 4px,
   which read as the description being glued to the header. */
.kj-desc { margin-top: 28px; }
.kj-desc pre.defaultSettings {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  /* PDF p14: body words bbox h=25.54 => 16px; line pitch is exactly 20px
     (482.33->502.33, 597.33/617.33/637.33/657.33, 742.33/762.33/782.33)
     => line-height 1.25, the Figma "auto" leading for Plus Jakarta Sans. */
  font-size: 16px;
  line-height: 1.25;
  color: #383838;
  overflow-x: auto;
}
/* TinyMCE (readonly) replaces the <pre>. Its chrome/border reset now lives in
   base.css (shared by every page that embeds a read-only editor). */
.kj-desc pre img { max-width: 100%; height: auto; }
.inTextDiv { position: relative; width: 100%; margin: 8px 0 0; }
.inTextDiv iframe, #akademiaIframe { width: 100%; border: 0; display: block; }
/* legacy email-apply hooks (.DKV0MdRepalce/.DKV0MdRepalces) — now a pill */
.DKV0MdRepalces { position: relative; width: 100%; margin-top: 10px; }
.DKV0MdRepalce  { margin: 0; }

/* ---------- deadline bar (Figma: #F4F6F9, 1px #ECECF2, r16) ---------- */
.kj-deadline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
  padding: 16px;
  background: #F6F8FB;
  border: 1px solid #E2E7EF;
  border-radius: 16px;
}
.kj-deadline__txt {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #313C53;
  min-width: 0;
}
.kj-deadline__txt svg { flex: 0 0 auto; color: var(--kj-primary); }
.kj-deadline__txt strong { color: #041E42; }
.kj-deadline__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kj-deadline__remind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border: 1.5px solid #CBD3E0;
  border-radius: 999px;
  background: #fff;
  color: #041E42;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.kj-deadline__remind:hover { border-color: #041E42; }

/* ---------- sidebar ---------- */
.kj-side {
  display: flex;
  flex-direction: column;
  /* PDF p14: company card bottom y=800, next sidebar block top y=833 (scanned at
     the column centre x=1212, clear of the corner radii) => 32px */
  gap: 32px;
}
/* legacy details rows: kept in the DOM for parity, visually replaced by
   the header meta row */
.kj-legacy-details { display: none !important; }

/* ---------- Job-Fit check — guest teaser (Batch-1) ---------- */
.kj-fitguest-card {
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 24px;
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4,30,66,.07));
  padding: 20px;
}
.kj-fitguest-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--kj-b3-title, #041E42);
}
.kj-fitguest {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.kj-fitguest-ringwrap {
  position: relative;
  width: 74px;
  height: 74px;
  margin: 4px auto 14px;
  filter: blur(3px);
  opacity: .55;
}
.kj-fitguest-ring { display: block; }
.kj-fitguest-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--kj-b3-title, #041E42);
}
.kj-fitguest-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4,30,66,.12));
  color: var(--kj-b3-title, #041E42);
  filter: none;
  opacity: 1;
}
.kj-fitguest-text {
  filter: blur(3px);
  opacity: .55;
  user-select: none;
  font-size: 14px;
  line-height: 1.5;
}
.kj-fitguest-text strong { display: block; color: var(--kj-b3-title, #041E42); }
.kj-fitguest-text p { margin: 2px 0 0; color: var(--kj-b3-muted, #6B7890); }
.kj-fitguest-pitch {
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-fitguest-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  border-radius: 999px;
  background: var(--kj-b3-gradient, linear-gradient(120deg,#FFC473 0%,#FE616C 100%));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254,97,108,.45));
  box-sizing: border-box;
}

/* ============================================================================
   2026-09-12 rewrite: every value below is copied verbatim from the bundle's
   own rendered sidebar company card (KJJob, extracted via CDP outerHTML — the
   real markup/inline styles, not a screenshot) and its :root computed custom
   properties. The block this replaces was measured from an old PDF export
   that predates the current bundle and no longer matches it — do not go back
   to citing that PDF; the bundle is the only source of truth from here. */
.kj-compcard {
  position: relative;
  background: #fff;
  border: 1px solid #E2E7EF;
  border-radius: 24px;
  box-shadow: 0 2px 6px rgba(4, 30, 66, 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 22px 20px;
}
/* Cover band: real coverPictureC when the company has one, the same navy
   gradient the rest of the site uses as its "no real cover photo" fallback
   otherwise — never a fabricated photo. */
.kj-compcard__cover {
  width: calc(100% + 44px);
  margin: 0 -22px;
  height: 96px;
  background-image: linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%);
  background-size: cover;
  background-position: center;
}
.kj-compcard__logo {
  margin-top: -40px;
  position: relative;
  border: 0;
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background-color: #041E42;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: content-box;
  padding: 10px;
  box-sizing: border-box;
}
.kj-compcard__name {
  margin: 12px 0 0;
  font-family: var(--kj-font);
  font-size: 18px;
  font-weight: 700;
  color: #041E42;
  line-height: 1.3;
}
.kj-compcard__sub {
  margin-top: 2px;
  font-size: 14px;
  color: #6B7890;
}
.kj-compcard__about {
  margin-top: 14px;
  padding: 8px 14px;
  width: 100%;
  background: #F6F8FB;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #6B7890;
  text-align: left;
  box-sizing: border-box;
}
/* 3 columns when all three real stats exist, 2 when the honest "hires this
   year" figure doesn't exist for this company (there is no such data source
   anywhere in the schema — never fabricate the third cell). */
.kj-compcard__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 6px;
  margin: 18px 0;
}
.kj-compcard__stats--2 { grid-template-columns: repeat(2, 1fr); }   /* unused since 2026-10-10: the card always prints three */
.kj-compcard__stats > div {
  padding: 0 4px;
}
.kj-compcard__stats > div + div { border-left: 1px solid #E2E7EF; }
.kj-compcard__stats strong { display: block; font-family: var(--kj-font); font-size: 20px; font-weight: 800; color: #EE4753; }
.kj-compcard__stats span   { display: block; font-size: 12px; color: #6B7890; margin-top: 2px; }
.kj-compcard__btns { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.kj-compcard > a, .kj-compcard__btns > a { width: 100%; }
.followCompanyBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, #FFC473 0%, #FE616C 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(254, 97, 108, 0.45);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s ease;
}
.followCompanyBtn::before { content: '+'; font-weight: 700; margin-right: 8px; font-size: 15px; line-height: 1; }
.followCompanyBtn:hover { filter: brightness(1.04); }
.kj-compcard__profile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 1.5px solid #CBD3E0;
  border-radius: 999px;
  color: #041E42;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.kj-compcard__profile:hover { border-color: #041E42; }
.readMoreAbtThisCmp {
  margin-top: 14px;
  font-size: 13px;
  color: #919191;
  cursor: pointer;
}
.readMoreAbtThisCmp:hover { color: var(--kj-primary); text-decoration: underline; }

/* rroga salary widget card */
.kj-rroga {
  background: var(--kj-surface-warm);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-shadow-xs);
  overflow: hidden;
  padding: 10px;
}
.kj-rroga iframe { display: block; width: 100%; border: 0; }

/* compID 451 company profile card (companyIframe.php, legacy classes) */
.compPrIframeCnt {
  background: var(--kj-surface-warm);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-shadow-xs);
  overflow: hidden;
  padding-bottom: 24px;
}
.businessCoverCntF {
  height: 120px;
  background-color: var(--kj-surface-3);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.compPrIframeCntSw { padding: 0 20px; }
.businessOtherCntPPPs {
  width: 92px;
  height: 92px;
  margin-top: -30px;
  border-radius: 20px;
  border: 1px solid var(--kj-stroke);
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
}
.businessDetailsCnt { margin-top: 14px; }
.businessDetailsCntFH { font-size: 20px; font-weight: 700; color: #1E1E1E; line-height: 1.3; }
.businessDetailsCntFH2 { font-size: 14px; color: #606060; margin-top: 4px; }
.businessDetailsCntFH22 { font-size: 13px; color: #919191; margin-top: 2px; }
.businessFollowers, .noOfJobs {
  display: inline-block;
  margin: 12px 20px 0 0;
  padding-left: 28px;
  font-size: 18px;
  font-weight: 700;
  color: #1E1E1E;
  line-height: 22px;
  background: url(/images/followersIcon.svg) left center / 22px no-repeat;
}
.noOfJobs { background-image: url(/images/briefCaseICon.svg); }
.businessDetailsCntFF { height: 1px; background: var(--kj-stroke); margin: 16px 0; }
.visitProfileBnt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-gradient);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
}
.visitProfileBnt:hover { filter: brightness(1.05); }
.compPrIframeCnt .followCompanyBtn { margin-top: 10px; }

/* ---------- related jobs (legacy .listsSimilar markup, home-card skin) ---------- */
/* No extra margin: the layout row-gap alone matches the design. PDF p14 main card
   bottom y=977 -> "Related Jobs" glyph box top y=1005 (28px, layout gap is 32);
   PDF p13 ad bottom y=2585 -> title top y=2605 (20px, layout gap is 24). The 8px
   that used to be here pushed both past the measured value. */
.kj-related { min-width: 0; margin-top: 0; }
/* heading + "Shiko të gjitha" sit on one row — the bundle's own KJJob related
   section, not the standalone centred title this replaced. */
.kj-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.kj-related__title {
  font-family: var(--kj-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #041E42;
  margin: 0;
}
.kj-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  grid-auto-flow: dense;
  grid-auto-rows: 1fr;               /* every row as tall as the tallest card — the 2-col grid and the phone list */
}
@media (min-width: 760px)  { .kj-related__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .kj-related__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
/* "Konkurse të ngjashme" = the design's "mine" card (home-lists-14, 2026-10-16;
   KJJobCard.html:75 `padding: compact ? 12 : mine ? 13 : 14`, `avatarSize ... mine ? 52`,
   `titleSize: compact ? '15px' : '16px'`; KJJob.html:93 prints the list with variant "mine").
   Ref lists-home/job-similar-cards__1440__sq: card 379 x 80 (13 pad + 52 logo + 13 pad + 2
   border), the inner row 351 x 52 at +14 / +14, the body column 285 x 44.5 (title 20 =
   16 x 1.25 ONE line + 5 + the 19.5 items row), the bookmark 30 x 30 at +343 / +39.3 = 6 px
   inside the right edge. 358 x 80 at 390. The 2026-10-03 equal-size box (title min-height
   2.5em + a nowrap items row + a rigid deadline) went with this item: the design's title is
   ONE line with an ellipsis from 768 up and a two-line clamp at <= 767 (the house's 759 tier),
   and the items row wraps as cards.css draws it everywhere else.
   cards.css loads after this file: the extra .kj-related class is what makes these win.
   Test: tests/kj-related-cards.test.php; doc: docs/pages/job-ad.md "Related jobs". */
.kj-related .jobListCnts.kj-jc { padding: 13px; }
.kj-related .kj-jc .jobListImage.kj-jc__logo { width: 52px; height: 52px; }
.kj-related .kj-jc .kj-jc__logo--initials { font-size: 19.76px; }   /* 0.38 x 52, as cards.css sizes every other initials tile */
.kj-related .kj-jc .jobListTitle.kj-jc__title { font-size: 16px; -webkit-line-clamp: 1; line-clamp: 1; }
@media (max-width: 759px) {
  /* the design's <= 767 clamp (root.x-dc.txt): two lines rather than a cut title on a phone */
  .kj-related .kj-jc .jobListTitle.kj-jc__title { -webkit-line-clamp: 2; line-clamp: 2; }
}
.listsSimilar { min-width: 0; }
.listsSimilar > a {
  position: relative;
  display: flex;
  align-items: center;
  /* PDF p14: card1 x=100..527, card2 x=552..979 (428 wide, 24 gutter), height 104
     (y=1068..1171 at x=300). Logo tile x=116..195 / y=1080..1159 => 16px side pad,
     (104-80)/2 = 12px vertical pad. Title xMin 208 => 12px gap after the tile. */
  gap: 12px;
  min-height: 104px;
  height: 100%;
  padding: 12px 16px;
  background: var(--kj-surface-warm);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-shadow-xs);
  transition: box-shadow .15s ease;
}
.listsSimilar > a:hover { box-shadow: var(--kj-shadow-card); }
/* premium context: soft glow (design token: no border) + bigger title */
.jobListPrm > a { box-shadow: 0 0 8px rgba(255, 80, 103, 0.24); }
.jobListPrm > a:hover { box-shadow: 0 0 8px rgba(255, 80, 103, 0.24), var(--kj-shadow-card); }
.listsImage2JobAd { flex: 0 0 80px; }
.listsImage2Similar {
  /* PDF p14: 80x80 tile filled with #F4F4F3 (= #F5F5F5, the same tile colour the
     header logo uses); the white->tile transition at x=116 / y=1080 is direct,
     so there is no 1px stroke around it. */
  width: 80px;
  height: 80px;
  border-radius: var(--kj-r-md);
  border: 0;
  background-color: #F5F5F5;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/* legacy echoes badges inside the logo wrapper too — meta-row copies win */
.listsImage2JobAd .newJobOpeningCnt, .listsImage2JobAd .premiumListCnt { display: none; }
.similarInfo { min-width: 0; flex: 1; }
.listsPositionSimilar {
  font-weight: 600;
  font-size: 16px;   /* PDF p14: card title bbox h=25.54 => 16px (was 14) */
  color: #1E1E1E;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jobListPrm .listsPositionSimilar { font-size: 16px; }
.listsOtherSimilar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
}
.listsCitySimilar, .listsDeadlineSimilar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #919191;
  min-width: 0;
}
.listsCitySimilar::before, .listsDeadlineSimilar::before {
  content: '';
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.listsCitySimilar::before     { background: url('/new-ui/img/ico-location.svg') center / contain no-repeat; }
.listsDeadlineSimilar::before { background: url('/new-ui/img/ico-expire.svg') center / contain no-repeat; }
.listsOtherSimilar .newJobOpeningCnt {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-surface-warm);
  border: 1px solid var(--kj-stroke);
  box-shadow: var(--kj-shadow-xs);
  color: var(--kj-primary);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.6;
}
.listsOtherSimilar .premiumListCnt { display: inline-flex; }
.listsOtherSimilar .premiumListCnt img { width: 14px; height: 14px; }
/* ---------- sidebar Revive ad slot ----------
   PDF p14: x=1012..1411 (the full 400px sidebar column), y=833..1172 (339 tall),
   32px under the company card (that 32px is the .kj-side gap, no extra margin).
   PDF p13 (mobile): x=24..369 (full content width), y=2246..2585 (339 tall), and
   48px under the card => +16 on top of the 32px .kj-side gap.
   2026-10-11: that phone +16 is gone (the rail is the 2026-10-09 design's now — .kj-side gap 18 at every width,
   below): the salary survey card (kj-salary-survey.php) sits right above this slot, and the extra margin made
   card → Revive 34 px at <= 759 where the design's rail keeps 18 (docs/features/salary-survey.md).
   No card chrome: the creative is its own artwork, so a white panel + padding
   around it only framed it in dead space. The live creative is a fixed 320x266 GIF
   (creatives.kosovajob.com zone 5, served with max-width:100%), so it cannot fill
   the 400px column — it is centred at its native size, never upscaled. */
.kj-side__ad {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  background: transparent;
  border-radius: var(--kj-r-lg);
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}
.kj-side__ad iframe { border-radius: var(--kj-r-lg); display: block; }
.kj-side__ad iframe { max-width: 100%; border: 0; }
/* the salary survey card's start button (kj-salary-survey.php — the card renders on this page only, in the rail): base.css's
   motion layer (body:has(.kj-nav-wrap) button, 0,1,2) outranks salary-survey.css's .kj-sal__start (0,1,0) and lifted it at
   .18s; the design's KJSalarySurvey start is transform .15s cubic-bezier(.22,.61,.36,1) (fix round 2026-10-11).
   salary-survey.css's reduced-motion rule (!important) still wins. */
.kj-side .kj-sal__start { transition: transform .15s cubic-bezier(.22, .61, .36, 1); }
/* the survey dialog's option rows and pay pills (salary-survey.js mounts .kj-salm from that card): the same motion layer
   outranked salary-survey.css's `transition: all .16s` (the design's KJSalarySurvey) — (0,2,0) restores it (FU1,
   2026-10-11). base.css's reduced-motion rule (!important) still wins. */
.kj-salm .kj-salm__opt, .kj-salm .kj-salm__pill { transition: all .16s; }
.kj-related__all {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 4px;
  color: #EE4753;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  flex: 0 0 auto;
}
.kj-related__all:hover { text-decoration: underline; }

/* ---------- apply-via-email popup (markup injected by
   applyNowViaEmailPopUp.php — legacy classes, restyled) ---------- */
.fixedPopUpCnt {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(21, 23, 55, 0.55);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 32px 16px 48px;
}
.fixedPopUpCntSub {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--kj-r-lg);
  padding: 36px 32px 12px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.2);
}
@media (max-width: 759px) { .fixedPopUpCntSub { padding: 32px 20px 12px; } }
.fixedPopUpCntSub .divider { margin: 20px 0; }
.popUpCloseBtn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kj-surface-2);
  cursor: pointer;
  z-index: 2;
}
.popUpCloseBtn::before, .popUpCloseBtn::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 9px;
  width: 14px;
  height: 2px;
  background: #383838;
  border-radius: 2px;
}
.popUpCloseBtn::before { transform: rotate(45deg); }
.popUpCloseBtn::after  { transform: rotate(-45deg); }
.fixedPopUpCntSub .companyLogo {
  width: 110px;
  height: 110px;
  margin: 4px auto 0;
  border-radius: 20px;
  background-color: #F5F5F5;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: content-box;
  padding: 10px;
  box-sizing: border-box;
}
.companyDescriptionTitleC { font-size: 15px; font-weight: 500; color: #606060; }
.companyDescriptionTitle { margin-top: 6px; font-size: 20px; font-weight: 700; color: #1E1E1E; line-height: 1.3; }
.requirementsCnt { text-align: left; }
.reqCntBigIn { width: 100%; }
.reqCntBigTitlesIn {
  font-size: 12px;
  font-weight: 600;
  color: #383838;
  margin-bottom: 6px;
  text-align: left;
}
.filterInputs {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--kj-stroke);
  border-radius: var(--kj-r-md);
  background: #fff;
  font-size: 15px;
  color: #1E1E1E;
  outline: none;
  box-sizing: border-box;
}
.filterInputs::placeholder { color: #919191; }
.filterInputs:focus { border-color: var(--kj-primary); }
.formErr { border-color: #F90000 !important; }
/* bug 31 (2026-10-21, the operator: "This selection and unselection of documents can be very tricky - let's put X so when pressed,
   the document is removed"): the pop-up's documents. One row per document with ONE button — "+" chooses a profile CV (the whole row
   is its target: the button sits static and its ::after fills the row), "×" removes a chosen one (its 28 px box, the target 8 px
   around it). The redesign's document rows — KJUserApply.html:174-221 "anything beyond the CV"; stage's .kj-af__xitem /
   .kj-af__x--x / .kj-af__xadd (new-ui/apply-flow.css) — on the B3 tokens, a chosen row in the coral tint; at the cap (3) the rows
   left over and «Ngarko» dim and the amber line of a closed ad's notice (apply-closed.css) says why. The ✓ of a chosen row is gone.
   Script: jobs.php <script id="kjMailDocsUi">. Test: tests/kj-apply-mail-docs-2026.test.php. */
.cvsCntBigs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.kj-amd__doc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px 9px 12px;
  border: 1px solid var(--kj-b3-stroke);
  border-radius: 14px;
  background: var(--kj-surface);
  text-align: left;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.kj-amd__doc:not(.cvslsjbfdjlCActive) { cursor: pointer; }
.kj-amd__doc:not(.cvslsjbfdjlCActive):not(.is-off):hover { background: var(--kj-b3-page); border-color: var(--kj-b3-stroke-2); }
.kj-amd__doc.cvslsjbfdjlCActive { border-color: var(--kj-coral-400); background: var(--kj-coral-50); }
.kj-amd__doc.is-off { opacity: .55; cursor: not-allowed; }
.kj-amd__doc:has(.kj-amd__act:focus-visible) { box-shadow: var(--kj-ring); }
.kj-amd__ext {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--kj-coral-50);
  color: var(--kj-coral-600);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.cvslsjbfdjlCActive .kj-amd__ext { background: var(--kj-surface); }
.kj-amd__main { display: block; flex: 1; min-width: 0; }
.kj-amd__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--kj-b3-title);
}
.kj-amd__meta { display: block; margin-top: 1px; font-size: 12px; line-height: 1.5; color: var(--kj-b3-muted); }
.kj-amd__act {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--kj-b3-stroke);
  border-radius: 8px;
  background: var(--kj-surface);
  color: var(--kj-b3-muted);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kj-amd__doc:not(.cvslsjbfdjlCActive) .kj-amd__act { position: static; }
.kj-amd__doc:not(.cvslsjbfdjlCActive) .kj-amd__act::after { content: ''; position: absolute; inset: 0; border-radius: 13px; }
/* no press scale on that "+": base.css's B3 feedback (body:has(.kj-nav-wrap) button:not(:disabled):active { transform: scale(.97) })
   made the button the containing block of its ::after mid-press — the press ended beside the button and chose nothing (measured on
   the live page, 2026-10-21). The row answers the press instead. */
.kj-amd__doc:not(.cvslsjbfdjlCActive) .kj-amd__act:active { transform: none; }
.kj-amd__doc:not(.cvslsjbfdjlCActive):not(.is-off):active { background: var(--kj-coral-50); }
.cvslsjbfdjlCActive .kj-amd__act::before { content: ''; position: absolute; inset: -8px; border-radius: 12px; }
.kj-amd__act:hover { border-color: var(--kj-coral-400); color: var(--kj-coral-600); }
.kj-amd__doc:not(.cvslsjbfdjlCActive):not(.is-off):hover .kj-amd__act { border-color: var(--kj-coral-400); background: var(--kj-coral-50); color: var(--kj-coral-600); }
.kj-amd__act:focus-visible { outline: 2px solid var(--kj-coral-600); outline-offset: 2px; }
.kj-amd__doc.is-off .kj-amd__act,
.kj-amd__doc.is-off .kj-amd__act:hover { border-color: var(--kj-b3-stroke); background: var(--kj-surface); color: var(--kj-b3-muted); cursor: not-allowed; }
.kj-amd__i { display: block; flex: none; pointer-events: none; }
.kj-amd__i--rm,
.cvslsjbfdjlCActive .kj-amd__i--pick { display: none; }
.cvslsjbfdjlCActive .kj-amd__i--rm { display: block; }
/* «Ngarko»: the design's dashed "add" pill (KJUserApply.html:197; .kj-af__xadd), a real button since bug 31 */
.needsclick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 17px;
  margin-top: 10px;
  border: 1.5px dashed var(--kj-b3-stroke-2);
  border-radius: 999px;
  background: var(--kj-surface);
  color: var(--kj-b3-title);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  line-height: normal;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.needsclick svg { flex: none; }
.needsclick:hover { border-color: var(--kj-coral-400); color: var(--kj-coral-600); }
.needsclick:focus-visible { outline: 2px solid var(--kj-coral-600); outline-offset: 2px; }
.needsclick[aria-disabled="true"],
.needsclick[aria-disabled="true"]:hover { border-color: var(--kj-b3-stroke-2); color: var(--kj-b3-title); opacity: .55; cursor: not-allowed; }
.kj-amd__cap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--kj-gold-300);
  border-radius: 12px;
  background: var(--kj-b3-warning-bg);
  color: var(--kj-b3-title);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}
.kj-amd__cap[hidden] { display: none; }
.kj-amd__cap svg { flex: none; margin-top: 1px; color: var(--kj-gold-600); }
.file_uploadUploading2 {
  color: transparent !important;
  background-image: url(/images/loadingAjaxW.gif), linear-gradient(90deg, #FFC163 0%, #FF5168 100%) !important;
  background-size: 56px, cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-color: transparent !important;
  pointer-events: none;
  min-width: 44px;
}
.uploadSubHeaderErr2, .comErrCl {
  display: none;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #F90000;
  text-align: left;
}
.fieldAreaSectionN {
  margin-top: 16px;
  font-size: 11px;
  color: #797979;
  line-height: 1.5;
  text-align: center;
}
.applyViaEmailBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 200px;
  padding: 0 32px;
  margin: 20px auto 20px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-gradient);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
}
.applyViaEmailBtn:hover { filter: brightness(1.05); }
.thankyouNoteF {
  padding: 16px;
  border-radius: var(--kj-r-md);
  background: rgba(7, 148, 85, 0.08);
  border: 1px solid rgba(7, 148, 85, 0.35);
  color: var(--kj-success);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin: 8px 0;
}

/* ---------- legacy mobile chrome ---------- */
/* (the bottom-right "shuffle" arrow to a random other job — class nextJobAdLink —
   was removed 2026-09-27 at the operator's request: markup, lookup and styles.) */
/* mobile app bottom banner (footer_new; same rules as home.css) */
.appBottomImgCnt { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; }
.appBottomImgCnt img { width: 100%; display: block; }
.appBottomImgCnt .closeNotifier {
  position: absolute; top: -14px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--kj-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  cursor: pointer;
}

/* ---------- responsive: tablet ---------- */
@media (max-width: 1099px) {
  .kj-jobhead { padding: 36px 32px; }
  .kj-jobhead__actions { top: 24px; right: 24px; }
  .kj-jobhead__id { padding-right: 0; }
  .kj-jobhead__top { padding-right: 110px; } /* clear the circles */
}

/* ---------- responsive: mobile (Figma 64:5639) ---------- */
@media (max-width: 759px) {
  /* PDF p13 (393 frame): page gutter 24 — the card runs x=24..368 (345 wide) */
  .kj-job-layout { padding: 0 24px; }
  /* PDF p13: card y=128..1493; the two circles are y=152..199 (24 below the card
     top) and the logo tile follows at y=212, so flow pad-top = 24+48+12 = 84.
     Deadline bar ends y=1453 with the card at 1493 => 40px bottom pad.
     Content column x=48..344 => 24px sides (divider spans exactly 48..345). */
  .kj-jobhead { padding: 84px 24px 40px; }
  .kj-jobhead__actions { top: 24px; right: 24px; }
  .kj-jobhead__top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding-right: 0;
  }
  .kj-jobhead__id { align-items: center; }
  .kj-jobhead__comp { margin-bottom: 4px; }
  .kj-jobhead__title { justify-content: center; }
  .kj-jobhead__title h1 { font-size: 20px; }   /* PDF p13: "Pizza"/"Man," bbox h=31.83 => 20 (was 24) */
  .kj-jobhead__cta { width: 100%; margin-top: 16px; }
  /* PDF p13: the CTA pill is full-width x=48..344 and y=385..429 => 44px, the
     same .kj-btn height as desktop (was forced to 52) */
  .kj-jobhead__cta .kj-btn { width: 100%; height: 44px; }
  .kj-divider { margin: 24px 0 20px; }
  .kj-jobmeta { gap: 14px 24px; }
  .kj-jobmeta__item { font-size: 16px; }   /* PDF p13: meta words bbox h=25.46 => 16 */
  .kj-deadline { flex-direction: column; align-items: stretch; padding: 20px; }
  .kj-deadline__btn { width: 100%; }
  .kj-related__title { font-size: 24px; }
  /* PDF p13: the cover is flush with the company-card top edge here too
     (card top = cover top y=1518); the old 28px top pad pushed it down and
     desynced the -24px full-bleed cover. */
  .kj-compcard { padding: 0 24px 28px; }
}


/* ---------- Share popover ----------
   The share icon in the job header toggles this; it used to be a permanently
   visible row under the tags, which is not what the design shows.
   NOTE: .kj-jobhead__actions must stay position:absolute (declared above). It
   used to be re-declared position:relative here, which — being the later rule —
   dropped the circles back into normal flow at the top-LEFT of the card and
   pushed the logo/title down. PDF p14 puts them at x=820..923, y=196..243,
   overlapping the header row, so absolute is required. An absolutely positioned
   parent is still a containing block for .kj-share-b, so the popover is fine. */
.kj-share-b {
  display: none;
  position: absolute;
  /* Size to content: the popover is absolutely positioned inside the small
     .kj-jobhead__actions box, so without this it collapses to that box's width and the
     six 36px icons wrap one-per-line (vertical stack). max-content + nowrap keeps the
     row horizontal, as the design shows. */
  width: max-content;
  max-width: min(92vw, 420px);
  z-index: 40;
  right: 0;
  bottom: calc(100% + 12px);
  /* Even on all four sides. It used to be `6px 14px`, and .socialBtns inside
     it still carried its page-level `margin-top: 24px` — so the gap above the
     icons was 6+24=30px against 6px below and 14px either side. 10px matches
     the gap BETWEEN the icons, so the whole popover reads as one rhythm. */
  padding: 10px;
  background: var(--kj-surface-warm);
  border: 1px solid var(--kj-stroke);
  border-radius: var(--kj-r-lg);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
}
.kj-share-b.is-open { display: block; }
.kj-share-b::after {           /* little pointer toward the share button */
  content: '';
  position: absolute;
  /* Aim at the SHARE icon. Actions row (right-anchored) is share(48) + gap(8) + heart(48):
     from the right edge the heart centre is 24px and the share centre is 80px. The triangle is
     14px wide (2x7 border), so right:73px centres it on 80px. Was 18px = the heart. */
  right: 73px; top: 100%;
  border: 7px solid transparent;
  border-top-color: var(--kj-surface-warm);
}

/* ============================================================================
   2026-09-15 — KJJob parity pass (bundle KJJob.dc.html is the source; every
   number below is its inline style). Later rules win, so this block sits at
   the end of the sheet and overrides the older measurements above:
     page      bg-subtle, two radial glows (520 @ -200/-160 coral .10,
               560 @ 120/-200 gold .14) inside an overflow-hidden shell
     wrap      1200 / 24 32 80; crumb 14 muted gap 8 mb 18, current 600
     card      r24, header block 24 28 → meta row (mt 20, pt 18, border-top,
               15/500 body, 17px coral icons, gap 8 18) → actions row (mt 20,
               gap 10, Apply md 46, Testo 46, 46px circles right) → full-bleed
               1px rule → description block 24 28 → deadline bar 0 32 28
     related   mt 36, head mb 16, grid 2 × gap 14
     sidebar   gap 18; company card cover 96 / Avatar 80 (#fff, 3px #fff,
               shadow-md) / name 18 / "industry · city" / 3 stats 20/800 coral
     Job-Fit   row: 74 ring + text, lock 44 centred, pitch 14 muted, CTA 40
     remind    modal 480 r28 pad 28, options 2-col r14 1.5px, submit lg 56
   ============================================================================ */
body.kj-job-page { background: var(--kj-b3-page, #F6F8FB); }
.kj-bg { display: none; }
.kj-job-shell { position: relative; overflow: hidden; }
.kj-job-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.kj-job-glow--a { top: -200px; left: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(254, 97, 108, .10), transparent 68%); }
.kj-job-glow--b { top: 120px; right: -200px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(255, 196, 115, .14), transparent 68%); }
.kj-job-shell .containerHolder { position: relative; z-index: 1; }
.kj-job-layout { padding-top: 24px; padding-bottom: 80px; }
.kj-crumb { gap: 8px; margin-bottom: 18px; }
.kj-crumb a { gap: 6px; }
.kj-crumb a:hover { color: var(--kj-coral-600); }
.kj-crumb__cur { font-weight: 600; }
/* 2026-10-09 bundle (KJJob.html:17-19): the "/" — the row's only bare span — reads in
   --text-faint, and the chevron is 15px with a 2px stroke (jobs.php prints the svg with
   width/height 14 and stroke-width 2.2; the CSS properties win over the attributes, and
   the path, which sets no stroke-width of its own, inherits the 2). */
.kj-crumb > span:not(.kj-crumb__cur) { color: var(--kj-b3-faint, #9BA7BC); }
.kj-crumb a > svg { width: 15px; height: 15px; stroke-width: 2; }

/* ---- header card ---- */
.kj-jobhead { padding: 0; overflow: hidden; }
.kj-jobhead__hd { padding: 24px 28px; }
.kj-jobhead__line { height: 1px; background: var(--kj-b3-stroke, #E2E7EF); }
.kj-jobhead__top { gap: 20px; padding-right: 0; }
.kj-jobhead__logo { background-color: #fff; }
.kj-jobhead__comp { font-size: 15px; font-weight: 700; color: var(--kj-b3-muted, #6B7890); margin-bottom: 0; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.kj-jobhead__comp b, .kj-jobhead__comp .containerLeftAreaTopAreaRightTitleComp { font-weight: 700; }
.kj-jobhead__comp:hover, .kj-jobhead__comp:hover .containerLeftAreaTopAreaRightTitleCompT { color: var(--kj-coral-600); }
.kj-jobhead__title { margin-top: 4px; }
/* 2026-10-10 — operator review ("/aurora-group/kamariere - this space is bigger then in the
   new design"): in KJJob the title ends 20px over the divider above the meta row — its text
   column (tier row 20 + 8, company 22.5, title) is taller than the 84px logo. Here the pills
   sit on the company line (operator 2026-10-04), so a one-line title made the column 63.3px
   beside the 92px tile and the gap read 48.7px. The column now sits on the tile's bottom edge,
   which puts the company line, the title and the divider within ~1.5px of the design's
   (company +28.7 / title end +92 / rule +112 vs the design's +30 / +93.3 / +113.3); a column
   taller than the tile (a wrapping title) is unchanged. Phones stack the tile over the column
   (<= 767), so this is the row layout only. */
@media (min-width: 768px) {
  .kj-jobhead__id { align-self: flex-end; }
}
.kj-jobmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--kj-b3-stroke, #E2E7EF);
  font-size: 15px;
  color: var(--kj-b3-body, #313C53);
  font-weight: 500;
}
.kj-jobmeta__item { gap: 7px; font-size: 15px; font-weight: 500; color: var(--kj-b3-body, #313C53); white-space: nowrap; }
.kj-jobmeta__item svg { color: var(--kj-coral-500, #FE616C); flex: none; }
.kj-jobmeta__item--salary { font-weight: 700; color: var(--kj-b3-title, #041E42); }
/* the deadline stands out (operator 2026-10-05; weight 800 since the 2026-10-09 bundle,
   KJJob.html:41 "Skadon më …" font-weight 800 in --text-strong — the other items stay 500).
   On the item, not inside #mobile_exp — the page's script rewrites that span's html. */
.kj-jobmeta__item--deadline { font-weight: 800; color: var(--kj-b3-title, #041E42); }
.kj-jobmeta__item .compTitlteOtherS { white-space: normal; }
.kj-jobhead__cta { margin-top: 20px; gap: 10px; }
.kj-jobhead__actions { margin-left: auto; gap: 8px; order: 0; }
.kj-jobhead .kj-btn--primary, .kj-deadline .kj-btn--primary {
  height: 46px;
  padding: 0 22px;
  font-family: var(--kj-font-mulish, inherit);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--kj-b3-gradient);
  color: #fff;
  box-shadow: var(--kj-shadow-accent);
  transition: transform .15s var(--kj-ease-out), box-shadow .2s var(--kj-ease-out);
}
.kj-jobhead .kj-btn--primary:hover, .kj-deadline .kj-btn--primary:hover { filter: none; transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(254, 97, 108, .55); }
/* DS IconButton md / circle / outline */
.kj-jobhead .kj-iconbtn, .kj-jobhead .addToFavsBtn, .kj-jobhead .kj-shr-btn--circle {
  width: 46px;
  height: 46px;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  background-color: #fff;
  color: var(--kj-b3-title, #041E42);
  padding: 0;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.kj-jobhead .kj-iconbtn:hover, .kj-jobhead .addToFavsBtn:hover, .kj-jobhead .kj-shr-btn--circle:hover { box-shadow: none; background-color: var(--kj-b3-page, #F6F8FB); border-color: var(--kj-b3-title, #041E42); }
.kj-jobhead .kj-iconbtn { cursor: pointer; font-family: inherit; box-sizing: border-box; }
.kj-jobhead .addToFavsBtn { background-size: 19px; }
.kj-remind-open.is-on, .kj-jobhead .kj-iconbtn.kj-remind-open.is-on { background-color: var(--kj-coral-50, #FFF1EF); border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-700, #CE3340); }
/* The round button's filled bell is part of .is-on too (2026-10-05). It used to be a
   fill attribute only PHP printed, so a reminder set in the dialog — which adds the
   class — stayed an outline until a reload. The clapper keeps its own fill="none";
   the labelled button in the deadline bar keeps an outline bell in both states. */
.kj-iconbtn.kj-remind-open.is-on svg { fill: currentColor; }
.kj-tyres { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--kj-b3-success-bg, #E7F6EF); color: #0F7A50; font-size: 14px; font-weight: 600; gap: 10px; }
.kj-tyres.is-hidden { display: none; }

/* ---- description block + deadline bar ---- */
.kj-desc { margin-top: 0; padding: 24px 28px 28px; }
.kj-desc pre.defaultSettings { font-size: 16px; line-height: 1.7; color: var(--kj-b3-body, #313C53); }
.kj-desc .divider { display: none; }
.kj-deadline {
  margin: 24px 4px 0;
  padding: 16px;
  border-radius: 16px;
  background: var(--kj-b3-page, #F6F8FB);
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  gap: 14px;
}
.kj-deadline__txt { gap: 10px; font-size: 15px; color: var(--kj-b3-body, #313C53); }
.kj-deadline__txt svg { color: var(--kj-coral-500, #FE616C); }
.kj-deadline__txt strong { color: var(--kj-b3-title, #041E42); font-weight: 700; }
.kj-deadline__remind {
  height: 46px;
  padding: 0 18px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 999px;
  background: #fff;
  color: var(--kj-b3-title, #041E42);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all .2s;
}
.kj-deadline__remind:hover { background: var(--kj-coral-50, #FFF1EF); border-color: var(--kj-coral-300, #FF9D96); }
.kj-deadline__remind.is-on { border-color: var(--kj-coral-300, #FF9D96); background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-700, #CE3340); }

/* ---- related ---- */
.kj-related { margin-top: 12px; }
.kj-related__head { margin-bottom: 16px; }
.kj-related__all { color: var(--kj-coral-600, #EE4753); }
@media (min-width: 760px)  { .kj-related__grid { gap: 14px; } }
@media (min-width: 1100px) { .kj-related__grid { gap: 14px; } }

/* ---- sidebar ---- */
.kj-side { gap: 18px; }
/* 2026-10-10 — operator review ("also company widget is not the same"): the card is
   KJJob.html:100-121 + its script, measured on the design's render (#/pune/j2 / j1):
     card   340 x 438, #fff, 1px #E2E7EF, r24, shadow-sm, overflow hidden
     band   96px --gradient-navy; a REAL cover photo is an <img> (object-fit: cover) in it —
            no logo bloom / tint / hatch / industry chip / hue on THIS card (the
            kj-company-cover.php handoff stays for /kompanite, similar companies, the hero)
     logo   80 x 80 r14, #fff, 3px #fff frame, shadow-md, CENTRED — the source's
            sideLogoStyle "margin: 0 auto" (the prototype drops that inline style, so its
            render shows the tile flush-left and frameless; the source wins). The logo is
            contained in the frame's 74px box, never cropped; no logo = the navy initials tile
            (the DS Avatar: --gradient-navy, white Plus Jakarta Sans 700 at 0.38 x 80)
     name   18/700 on 27 (1.5), 12 under the tile; "industry · city" 14 on 21, 2 under
     stats  always three, 1fr x 3 gap 6, margin 18 0; 20/800 on 30 coral-600 over 12 on 18
            muted (no gap); the MIDDLE cell carries the 1px rules left and right
     follow 42 r999 14/800 gap 8 (+ / check icon 16); hover brightness(.97) in both states
     rate   inline-flex gap 7, margin 12 auto 0, padding 6 10, r10, muted 14/700 on a normal
            line (30 high — rate.css's entry pill sets 48), 15px gold-500 star */
.kj-compcard__cover { position: relative; overflow: hidden; background-image: var(--kj-b3-gradient-navy, linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%)); }
.kj-compcard__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.kj-compcard__logo {
  z-index: 1;
  background-color: #fff;
  border: 3px solid #fff;
  border-radius: 14px;
  padding: 0;
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4, 30, 66, .12));
}
.kj-compcard__logo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--kj-b3-gradient-navy, linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%));
  color: #fff;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 30.4px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
}
.kj-compcard__name { line-height: 1.5; }
.kj-compcard__sub { margin-top: 2px; }
.kj-compcard__stats > div { padding: 0; }
.kj-compcard__stats > div + div { border-left: 0; }
.kj-compcard__stats > div:nth-child(2) { border-left: 1px solid var(--kj-b3-stroke, #E2E7EF); border-right: 1px solid var(--kj-b3-stroke, #E2E7EF); }
.kj-compcard__stats strong { color: var(--kj-coral-600, #EE4753); }
.kj-compcard__stats span { margin-top: 0; }
.kj-compcard .followCompanyBtn:hover { filter: brightness(.97); }
.followCompanyBtn.kj-jobfollow--gate { gap: 8px; }
.followCompanyBtn.kj-jobfollow--gate::before { content: none; }
.followCompanyBtn.kj-jobfollow--gate svg { flex: none; }
.kj-compcard__btns .kj-compcard__profile { border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0); }
.kj-compcard__btns .kj-compcard__profile:hover { border-color: var(--kj-b3-stroke-2, #CBD3E0); background: var(--kj-b3-page, #F6F8FB); }
.kj-compcard .kj-rate-open--text { height: auto; line-height: normal; transition: all .2s; }
.kj-compcard .kj-rate-open--text:hover { background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-600, #EE4753); }
.kj-compcard .kj-rate-open--text svg { flex: none; fill: var(--kj-gold-500, #F7AF4F); stroke: var(--kj-gold-500, #F7AF4F); }
.kj-rroga { background: #fff; border: 1px solid var(--kj-b3-stroke, #E2E7EF); border-radius: 24px; box-shadow: var(--kj-shadow-sm); padding: 10px; }

/* Job-Fit teaser — the bundle's row layout */
.kj-fitguest-head { gap: 10px; }
.kj-fitguest { text-align: left; }
.kj-fitguest-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 6px 0 2px; }
.kj-fitguest-ringwrap { margin: 0; flex: none; pointer-events: none; }
.kj-fitguest-text { flex: 1; min-width: 0; pointer-events: none; }
.kj-fitguest-text p { margin: 0; }
.kj-fitguest-lock { color: var(--kj-b3-navy, #041E42); }
.kj-fitguest-pitch { margin: 12px 0 12px; text-align: left; }
.kj-fitguest-cta { font-family: inherit; }

/* ---- "Më kujto të aplikoj" dialog ---- */
.kj-rm[hidden] { display: none; }
.kj-rm__wrap { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 30, 66, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: kjFade .2s both; }
.kj-rm__card { position: relative; width: 100%; max-width: 480px; background: #fff; border-radius: 28px; box-shadow: var(--kj-shadow-xl, 0 30px 80px -30px rgba(4, 30, 66, .35)); padding: 28px; animation: kjScaleIn .3s var(--kj-ease-out) both; max-height: 92vh; overflow: auto; }
.kj-rm__x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--kj-b3-page, #F6F8FB); color: var(--kj-b3-muted, #6B7890); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kj-rm__x:hover { background: var(--kj-b3-sunken, #EEF1F6); color: var(--kj-b3-title, #041E42); }
.kj-rm__form[hidden], .kj-rm__done[hidden] { display: none; }
.kj-rm__ico { width: 52px; height: 52px; border-radius: 16px; background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-600, #EE4753); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.kj-rm__h { margin: 0 0 6px; font-family: var(--kj-font); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; color: var(--kj-b3-title, #041E42); }
.kj-rm__p { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--kj-b3-muted, #6B7890); }
.kj-rm__p strong { color: var(--kj-b3-title, #041E42); }
.kj-rm__lbl { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; color: var(--kj-b3-title, #041E42); }
.kj-rm__lbl input { height: 48px; padding: 0 16px; border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0); border-radius: 12px; font-size: 15px; color: var(--kj-b3-title, #041E42); font-family: inherit; width: 100%; outline: 0; transition: border-color .2s, box-shadow .2s; }
.kj-rm__lbl input:focus { border-color: var(--kj-coral-400, #FE8079); box-shadow: var(--kj-ring); }
.kj-rm__when { font-size: 14px; font-weight: 600; color: var(--kj-b3-title, #041E42); margin: 18px 0 8px; }
.kj-rm__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.kj-rm__opt { padding: 10px 14px; border-radius: 14px; text-align: left; cursor: pointer; font-family: inherit; transition: all .2s; border: 1.5px solid var(--kj-b3-stroke, #E2E7EF); background: #fff; color: var(--kj-b3-title, #041E42); }
.kj-rm__opt.is-on { border-color: var(--kj-coral-300, #FF9D96); background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-700, #CE3340); }
.kj-rm__optl { display: block; font-weight: 700; font-size: 14px; }
.kj-rm__optd { display: block; font-size: 12px; margin-top: 2px; opacity: .8; }
.kj-rm__err { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--kj-b3-danger-bg, #FDECEC); color: #B4282C; font-size: 14px; font-weight: 600; animation: kjFadeUp .25s both; }
.kj-rm__err[hidden] { display: none; }
.kj-rm__submit { display: flex; width: 100%; align-items: center; justify-content: center; height: 56px; padding: 0 30px; margin-top: 4px; border: 1px solid transparent; border-radius: 999px; background: var(--kj-b3-gradient); color: #fff; font-family: var(--kj-font-mulish, inherit); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: .01em; box-shadow: var(--kj-shadow-accent); cursor: pointer; transition: transform .15s var(--kj-ease-out), box-shadow .2s; }
.kj-rm__submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(254, 97, 108, .55); }
.kj-rm__submit:disabled { opacity: .55; pointer-events: none; }
.kj-rm__note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--kj-b3-faint, #9BA7BC); text-align: center; }
.kj-rm__done { text-align: center; animation: kjFadeUp .3s var(--kj-ease-out) both; }
.kj-rm__tick { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px; background: var(--kj-b3-success-bg, #E7F6EF); color: #0F7A50; display: flex; align-items: center; justify-content: center; animation: kjPop .5s var(--kj-ease-out) both; }
.kj-rm__done .kj-rm__h { margin-bottom: 8px; }
.kj-rm__donep { margin: 0 auto 18px; max-width: 380px; font-size: 15px; line-height: 1.55; color: var(--kj-b3-body, #313C53); overflow-wrap: anywhere; /* a long address wraps instead of widening the sheet (2026-10-05) */ }
.kj-rm__donep strong { color: var(--kj-b3-title, #041E42); }
.kj-rm__spam { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--kj-gold-50, #FFF8EA); border: 1px solid var(--kj-gold-200, #FFE1A6); text-align: left; margin-bottom: 20px; font-size: 13px; line-height: 1.5; color: var(--kj-b3-body, #313C53); }
.kj-rm__spam strong { display: block; color: var(--kj-b3-title, #041E42); font-size: 14px; }
.kj-rm__spamico { width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #8A5A00; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kj-rm__ok { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 46px; padding: 0 22px; border: 1px solid var(--kj-b3-stroke-2, #CBD3E0); border-radius: 999px; background: transparent; color: var(--kj-b3-title, #041E42); font-family: var(--kj-font-mulish, inherit); font-weight: 700; font-size: 15px; letter-spacing: .01em; cursor: pointer; }
.kj-rm__ok:hover { border-color: var(--kj-b3-title, #041E42); background: var(--kj-b3-page, #F6F8FB); }
/* 2026-10-05 — the dialog on a reminder that is already set (kj-remind-modal.php): what
   is set, in place of the deadline line, and "Hiq kujtesën" under the submit — the
   outline pill of "Në rregull", full width. */
.kj-rm__p[hidden], .kj-rm__cur[hidden], .kj-rm__remove[hidden] { display: none; }
.kj-rm__cur { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 20px; padding: 12px 14px; border-radius: 14px; background: var(--kj-b3-success-bg, #E7F6EF); font-size: 14px; line-height: 1.5; color: var(--kj-b3-body, #313C53); overflow-wrap: anywhere; }
.kj-rm__curico { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #0F7A50; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kj-rm__cur strong { color: var(--kj-b3-title, #041E42); }
.kj-rm__cur .kj-rm__curh { display: block; color: #0F7A50; font-weight: 700; }
.kj-rm__remove { display: flex; width: 100%; align-items: center; justify-content: center; height: 46px; margin-top: 10px; padding: 0 22px; border: 1px solid var(--kj-b3-stroke-2, #CBD3E0); border-radius: 999px; background: transparent; color: var(--kj-b3-title, #041E42); font-family: var(--kj-font-mulish, inherit); font-weight: 700; font-size: 15px; letter-spacing: .01em; cursor: pointer; }
.kj-rm__remove:hover { border-color: var(--kj-b3-title, #041E42); background: var(--kj-b3-page, #F6F8FB); }
.kj-rm__remove:disabled { opacity: .55; pointer-events: none; }

/* ---- responsive (bundle data-* rules: @1023 side → 1 col, @767 stacks) ---- */
@media (max-width: 1099px) {
  .kj-jobhead { padding: 0; }
  .kj-jobhead__top { padding-right: 0; }
}
@media (max-width: 767px) {
  /* phones (2026-09-27): no breadcrumb row — the header's logo and the browser's
     back cover it, and it cost ~70px above the job. Desktop keeps it. The page
     gutter is 12px (was 20) and the description card pads 16px at the sides
     (was 20) so the text column is ~24px wider; the reading size itself is set
     inside TinyMCE's iframe (content_style in jobs.php, @media max-width:560px). */
  .kj-job-crumbwrap { display: none; }
  .kj-job-layout { padding: 12px 12px 56px; }
  /* base.css sets a 20px phone gutter on every .kj-container after the header with
     a two-class selector; this file loads after it, so two classes win here */
  .kj-job-shell .kj-job-layout { padding-left: 12px; padding-right: 12px; }
  .kj-jobhead { padding: 0; }
  /* 22 px at the sides (2026-10-18, T-pages): the design's hero content starts at x 35 and is 320 wide at 390 (the 16 px
     [data-wrap] gutter + 1 + [data-pad-m] 18, KJJob.html:26); with this page's 12 px gutter that is 22 — the apply button
     was 324 wide at x 33 */
  .kj-jobhead__hd { padding: 20px 22px; }
  .kj-desc { padding: 18px 16px 24px; }
  /* the raw <pre> is what shows when TinyMCE (Tiny Cloud) does not load */
  .kj-desc pre.defaultSettings { font-size: 15px; line-height: 1.6; color: #1F2A44; }
  .kj-jobhead__top { flex-direction: column; align-items: flex-start; text-align: left; gap: 16px; }
  .kj-jobhead__id { align-items: flex-start; }
  .kj-jobhead__title { justify-content: flex-start; }
  .kj-jobhead__title h1 { font-size: 26px; }
  .kj-jobhead__cta { flex-direction: column; align-items: stretch; margin-top: 20px; }
  .kj-jobhead__cta .kj-btn, .kj-jobhead .kj-tychal { width: 100%; justify-content: center; height: 46px; }
  .kj-jobhead__actions { margin-left: 0; justify-content: center; }
  .kj-jobmeta { gap: 8px 18px; }
  .kj-jobmeta__item { white-space: normal; }
  .kj-related__title { font-size: 20px; }
  /* data-sticky-cta: the deadline bar docks to the bottom of the phone screen */
  .kj-deadline { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; padding: 12px 16px; border-radius: 0; background: #fff; border: 0; box-shadow: 0 -8px 24px rgba(4, 30, 66, .12); flex-direction: row; align-items: center; }
  .kj-deadline__txt { display: none; }
  .kj-deadline__actions { width: 100%; flex-wrap: nowrap; }
  .kj-deadline__actions > * { flex: 1; justify-content: center; }
  body.kj-job-page { padding-bottom: 72px; }
  .kj-rm__wrap { align-items: flex-end; padding: 0; }
  .kj-rm__card { border-radius: 24px 24px 0 0; max-height: 92vh; }
  .kj-compcard { padding: 0 22px 20px; }
}
/* bugs-1020 (2026-10-20, R2): an employer session without a candidate profile gets no reminder button, so on an ad without an
   apply route its deadline bar holds no action at all — docked to a phone's screen it was an empty white strip (24 px and its
   shadow) with 72 px kept for it under the footer. Not drawn then, and the page keeps no room for it; a bar with any action is
   unchanged. (Whitespace between the PHP tags makes :empty miss, so the rule asks for no child ELEMENT.) */
@media (max-width: 767px) {
  .kj-deadline:not(:has(.kj-deadline__actions > *)) { display: none; }
  body.kj-job-page:not(:has(.kj-deadline__actions > *)) { padding-bottom: 0; }
}
/* a VISITOR's bar (the guest's text pill .kj-deadline__remind is in it) is the design's phone apply bar, which shows only
   once the ad has scrolled past 320 px (KJJob.html:313-325, :370 _barCheck: max-width 899px && scrollY > 320; the in-card
   deadline block is display none on phones, root.x-dc.txt:175) — so at load the hero's apply button is the one apply
   button on the screen, not two (2026-10-18, T-pages). A scroll-driven animation on the root scroller, so no script; it
   appears at 320 at once (the design's reduced-motion look: CSS cannot start its .28 s rise from a scroll position).
   Without scroll timelines the bar stays docked from the start, as before. A candidate's bar (the 44 px bell circle,
   the tab bar under it) is unchanged. */
@supports (animation-timeline: scroll()) {
  @media (max-width: 767px) {
    .kj-deadline:has(.kj-deadline__remind) { animation: kjDeadlineRise linear both; animation-timeline: scroll(root block); animation-range: 320px 321px; }
  }
}
@keyframes kjDeadlineRise {
  from { transform: translateY(calc(100% + 24px)); visibility: hidden; }
  to   { transform: none; visibility: visible; }
}

/* ============================================================================
   2026-10-10 — the SIGNED-IN ad page (design 2026-10-09 KJJob, ROADMAP P1-ad-page).
   The /my-jobs reader pane is retired; its candidate features render here. The
   geometry is KJJob.html's inline styles (the pixel authority); the fit pieces
   are kj-fit.php's helpers under new-ui/fit.css, restyled only where the card
   says so. Guests keep every rule above (the "??%" teaser, the e-mail dialog).
   Measured: tests/kj-job-signed-2026.test.php.
   ========================================================================== */
.kj-fitcard [hidden], .kj-jd-remnote[hidden], .kj-jbadge--follow[hidden] { display: none !important; }
html.exfd-hidden-scroll { overflow: hidden; }

/* --- "E ndjek këtë kompani" on the company line (KJJobCard search variant: 21px pill, success tint, 11/800, a check) --- */
.kj-jbadge--follow { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px 0 6px; border-radius: 999px; background: var(--kj-b3-success-bg, #E7F6EF); color: #0F7A50; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; vertical-align: middle; }
.kj-jbadge--follow svg { flex: none; }

/* --- "Ke aplikuar më … · …" under the action row (KJJob.html:54 — the testDone banner's box) --- */
.kj-jobapplied { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--kj-b3-success-bg, #E7F6EF); color: #0F7A50; font-size: 14px; font-weight: 600; line-height: 1.4; animation: kjFadeUp .35s var(--kj-ease-out) both; }
.kj-jobapplied svg { flex: none; }
.kj-jobapplied b { font-weight: 700; }

/* --- the header bell for a candidate (.kj-jd-remind: the modal's data contract) — the guest's circle, the guest's "set" look --- */
.kj-jobhead .kj-iconbtn.kj-jd-remind.is-on { background-color: var(--kj-coral-50, #FFF1EF); border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-700, #CE3340); }
.kj-jobhead .kj-iconbtn.kj-jd-remind.is-on svg { fill: currentColor; }
/* the candidate's bookmark: saved = the coral bookmark on the coral tint */
.kj-jobhead .addToFavsBtn.removeToFavsBtnIcon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EE4753' stroke='%23EE4753' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v16l-6-4-6 4V4z'/%3E%3C/svg%3E"); background-color: var(--kj-coral-50, #FFF1EF); border-color: var(--kj-coral-300, #FF9D96); }

/* --- the deadline bar: kjReminderButtonHtml()'s pill as KJJob's remind button (h46, pad 0 18, 1.5px #CBD3E0, 15/700) + its note line under the bar --- */
.kj-deadline__actions .kj-jd-remind { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0); border-radius: 999px; background: #fff; color: var(--kj-b3-title, #041E42); font-family: inherit; font-weight: 700; font-size: 15px; white-space: nowrap; cursor: pointer; transition: all .2s; }
.kj-deadline__actions .kj-jd-remind:hover { background: var(--kj-coral-50, #FFF1EF); border-color: var(--kj-coral-300, #FF9D96); }
.kj-deadline__actions .kj-jd-remind.is-on { border-color: var(--kj-coral-300, #FF9D96); background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-700, #CE3340); }
.kj-deadline__actions .kj-jd-remind svg { flex: none; }
.kj-deadline .kj-jd-remnote { flex: 0 0 100%; display: inline-flex; align-items: center; gap: 6px; margin-top: -4px; font-size: 12.5px; color: var(--kj-b3-muted, #6B7890); }
.kj-deadline .kj-jd-remnote i { width: 7px; height: 7px; border-radius: 50%; background: var(--kj-coral-500, #FE616C); display: inline-block; flex: none; }
.kj-deadline .kj-jd-remnote b { font-weight: 700; color: var(--kj-b3-title, #041E42); }

/* --- the sidebar's follow button for a candidate (KJJob.html:115,:459): "Ndiqe" + plus on the gradient; "Po e ndjek" + check on the success tint --- */
.followCompanyBtn.kj-jobfollow { gap: 8px; border: 0; font-family: inherit; }
.followCompanyBtn.kj-jobfollow::before { content: none; }
.followCompanyBtn.kj-jobfollow svg { flex: none; }
.followCompanyBtn.kj-jobfollow.is-on { background: var(--kj-b3-success-bg, #E7F6EF); color: #0F7A50; box-shadow: none; }
.followCompanyBtn.kj-jobfollow.is-on:hover { filter: brightness(.97); }
.followCompanyBtn.kj-jobfollow[disabled] { opacity: .7; cursor: default; }

/* --- the Job-Fit card (KJJob.html:122-194): r22, 1px #E2E7EF, pad 22, the coral glow; head 17/800 PJS;
       148px ring (kjFitRingHtml) with the 34px scan icon while idle; prompt 13.5/1.55 muted; 46px gradient
       button; a 64px slot where the running line and the verdict share one place; rows 13px / 7px; foot.
       Fix round 2026-10-10 (verifier findings): verdict title on 1.5; the DONE marks in the design's tints
       with the "–" glyph; the foot kept at opacity 0 while busy; no verdict fade for a stored card --- */
.kj-fitcard { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--kj-b3-stroke, #E2E7EF); border-radius: 22px; padding: 22px; box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4, 30, 66, .07)); }
.kj-fitcard__glow { position: absolute; top: -90px; right: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(254, 97, 108, .13), rgba(254, 97, 108, 0)); pointer-events: none; }
.kj-fitcard__head { position: relative; display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.kj-fitcard__head svg { flex: none; }
.kj-fitcard__head strong { font-family: var(--kj-font, 'Plus Jakarta Sans', sans-serif); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--kj-b3-title, #041E42); }
.kj-fitcard__ringwrap { position: relative; display: flex; justify-content: center; margin-bottom: 15px; }
.kj-fitcard .kj-fitring { position: relative; }
.kj-fitcard .kj-fitring > svg circle { transition: stroke-dashoffset .09s linear, stroke .6s var(--kj-ease-out); }
/* the design's ring is stroke 11 in a 128 box; the shared helper draws a 64 box, so 5.5 here = 12.72 px at 148 (2026-10-11) */
.kj-fitcard .kj-fitring > svg circle { stroke-width: 5.5; }
.kj-fitcard .kj-fitring__in { font-size: 34px !important; letter-spacing: -.03em; gap: 1px; }
.kj-fitcard .kj-fitring__cap { margin-top: 0; font-size: 10px; letter-spacing: .14em; }
.kj-fitcard.is-idle .kj-fitring__in { display: none; }
.kj-fitcard.is-idle .kj-fitring > svg circle + circle { stroke-dashoffset: 169.6; }
.kj-fitcard__scan { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: block; pointer-events: none; }
.kj-fitcard__scan svg { display: block; animation: kjScan 6.5s ease-in-out infinite; }
.kj-fitcard:not(.is-idle) .kj-fitcard__scan { display: none; }
.kj-fitcard__spin { position: absolute; left: 50%; top: 50%; width: 168px; height: 168px; margin: -84px 0 0 -84px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(254, 97, 108, 0) 0deg, rgba(254, 97, 108, .30) 120deg, rgba(255, 196, 115, .38) 200deg, rgba(254, 97, 108, 0) 320deg); filter: blur(10px); animation: kjSpin 3.6s linear infinite; display: none; pointer-events: none; }
.kj-fitcard.is-busy .kj-fitcard__spin { display: block; }
.kj-fitcard__prompt { position: relative; margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--kj-b3-muted, #6B7890); text-align: center; }
.kj-fitcard__run { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border: 0; border-radius: 999px; background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%)); color: #fff; font-family: inherit; font-weight: 800; font-size: 14.5px; cursor: pointer; box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45)); transition: transform .15s var(--kj-ease-out), box-shadow .2s; }
.kj-fitcard__run:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -8px rgba(254, 97, 108, .55); }
.kj-fitcard__run svg { flex: none; }
.kj-fitcard__slot { position: relative; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kj-fitcard__busy { font-size: 13.5px; font-weight: 700; color: var(--kj-b3-body, #313C53); }
.kj-fitcard__verdict { animation: kjFade .6s var(--kj-ease-out) both; }
.kj-fitcard[data-stored] .kj-fitcard__verdict { animation: none; }   /* a stored check printed DONE at load is static (the design fades a RUN's verdict in, KJJob.html:163); busyOn() drops the flag for a re-run */
.kj-fitcard__title { display: block; font-family: var(--kj-font, 'Plus Jakarta Sans', sans-serif); font-weight: 800; font-size: 17px; line-height: 1.5; color: var(--kj-b3-title, #041E42); }   /* 1.5 = the design's inherited line-height (25.5px): the title span sets none (KJJob.html:164) */
.kj-fitcard[data-band="strong"] .kj-fitcard__title { color: var(--kj-b3-success, #1E9E6A); }
.kj-fitcard[data-band="good"] .kj-fitcard__title { color: var(--kj-gold-500, #F7AF4F); }
.kj-fitcard[data-band="weak"] .kj-fitcard__title { color: var(--kj-coral-500, #FE616C); }
.kj-fitcard__desc { display: block; font-size: 13px; color: var(--kj-b3-muted, #6B7890); margin-top: 3px; line-height: 1.5; }
.kj-fitcard__rows { position: relative; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--kj-b3-stroke, #E2E7EF); }
.kj-fitcard .kj-fitcrit__list { gap: 0; }
.kj-fitcard .kj-fitcrit__row { gap: 9px; padding: 7px 0; font-size: 13px; align-items: flex-start; }
.kj-fitcard .kj-fitcrit__mark { width: 20px; height: 20px; font-size: 11px; margin-top: 1px; box-sizing: border-box; }
/* the settled marks are the design's soft tints (KJJob.html:397 DOT), not fit.css's solid discs: met = success-bg + success "✓";
   not met = gray-100 + text-faint with the design's "–". The shared helper (kj-fit.php, every FIT surface) prints "✗" for a missed
   criterion; it is aria-hidden, so this card draws the design's glyph over it (the text at 0, the dash as ::before) — fix round 2026-10-10 */
.kj-fitcard .kj-fitcrit__mark { font-weight: 900; }
.kj-fitcard .kj-fitcrit__mark--ok { background: var(--kj-b3-success-bg, #E7F6EF); color: var(--kj-b3-success, #1E9E6A); }
.kj-fitcard .kj-fitcrit__mark--no { background: var(--kj-b3-sunken, #EEF1F6); color: var(--kj-b3-faint, #9BA7BC); font-size: 0; }
.kj-fitcard .kj-fitcrit__mark--no::before { content: '\2013'; font-size: 11px; }
.kj-fitcard .kj-fitcrit__txt { position: relative; min-width: 0; line-height: 1.45; transition: opacity .4s var(--kj-ease-out); }
.kj-fitcard.is-busy .kj-fitcrit__row:not(.is-settled) .kj-fitcrit__txt { opacity: 0; }
.kj-fitcard.is-busy .kj-fitcrit__row:not(.is-settled) .kj-fitcrit__mark { background: transparent; color: transparent; border: 2px dashed var(--kj-b3-stroke-2, #CBD3E0); }
.kj-fitcard.is-busy .kj-fitcrit__row.is-active .kj-fitcrit__mark { border: 2px solid var(--kj-coral-400, #FE8079); animation: kjPulse 1.1s var(--kj-ease-out) infinite; }
.kj-fitcard.is-busy .kj-fitcrit__row:not(.is-settled)::after { content: ''; position: absolute; left: 29px; top: 12px; height: 9px; width: 60%; border-radius: 9px; background: var(--kj-b3-sunken, #EEF1F6); }
.kj-fitcard .kj-fitcrit__row { position: relative; }
.kj-fitcard .kj-fitcrit__row.is-settled { animation: kjFade .45s var(--kj-ease-out) both; }
.kj-fitcard .kj-fitcrit__empty { margin: 0; font-size: 13px; }
.kj-fitcard.is-none .kj-fitcrit__empty { text-align: center; }
.kj-fitcard__foot { position: relative; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kj-b3-stroke, #E2E7EF); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; transition: opacity .45s var(--kj-ease-out); }
.kj-fitcard.is-busy .kj-fitcard__foot { opacity: 0; pointer-events: none; }   /* in the layout through the run, invisible until done (the design's fitFootStyle, KJJob.html:462): the card keeps its final height, nothing below it jumps */
.kj-fitcard__met { font-size: 12.5px; font-weight: 700; color: var(--kj-b3-body, #313C53); }
.kj-fitcard__redo { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--kj-b3-stroke, #E2E7EF); background: #fff; color: var(--kj-b3-muted, #6B7890); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.kj-fitcard__redo:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); }
@keyframes kjScan { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(5px, -4px) rotate(8deg); } 50% { transform: translate(-3px, 5px) rotate(-6deg); } 75% { transform: translate(4px, 3px) rotate(4deg); } }
@keyframes kjPulse { 0% { box-shadow: 0 0 0 0 rgba(254, 97, 108, .35); } 100% { box-shadow: 0 0 0 8px rgba(254, 97, 108, 0); } }
/* the FIT card's three endless motions stop under reduced motion: base.css only shortens every duration to .001 s there,
   under which an infinite animation turns into a 1 ms loop (a flicker) — Batch 3 w3-animations, fix round 2026-10-14
   (incidental, found by its safety verification); applied 2026-10-16 (wf-1016 P-home, apply-anim-job-11) */
@media (prefers-reduced-motion: reduce) { .kj-fitcard__scan svg, .kj-fitcard__spin, .kj-fitcard.is-busy .kj-fitcrit__row.is-active .kj-fitcrit__mark { animation: none; } }

/* --- "Më kujto të aplikoj" — the /my-jobs Batch 3 modal (#kjRm3) + the pill toast, as new-ui/myjobs.css draws them
       (overlay rgba(4,30,66,.55) + blur 6; box 460 r24 pad 24 26; close 36 r10; bell tile 48 r14; h2 22/800;
       2x2 options r14 13.5/700 1.5px; channel chips h30; note 12.5 faint; Hiq outline + Ruaj primary 46px) --- */
.kj-rm3 { position: fixed; inset: 0; z-index: 9400; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 30, 66, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kj-rm3.is-open { display: flex; animation: kjFade .25s both; }
.kj-rm3__box { position: relative; width: 100%; max-width: 460px; background: #fff; border-radius: 24px; box-shadow: var(--kj-shadow-xl); padding: 24px 26px; animation: kjScaleIn .35s var(--kj-ease-out) both; }
.kj-rm3__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--kj-b3-sunken, #EEF1F6); color: var(--kj-b3-title); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kj-rm3__ico { width: 48px; height: 48px; border-radius: 14px; background: var(--kj-coral-50); color: var(--kj-coral-600); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.kj-rm3__h { margin: 0 0 4px; font-family: var(--kj-font); font-weight: 800; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; color: var(--kj-b3-title); }
.kj-rm3__p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--kj-b3-muted); }
.kj-rm3__p b { color: var(--kj-b3-title); font-weight: 700; }
.kj-rm3__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kj-rm3__opt { padding: 12px 14px; border-radius: 14px; text-align: left; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13.5px; line-height: 1.3; border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0); background: #fff; color: var(--kj-b3-title); }
.kj-rm3__opt.is-on { border-color: var(--kj-coral-400); background: var(--kj-coral-50); color: var(--kj-coral-700); }
.kj-rm3__opt[disabled] { opacity: .45; cursor: not-allowed; }
.kj-rm3__chs { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.kj-rm3__ch { height: 30px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0); background: #fff; color: var(--kj-b3-title); font-family: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.kj-rm3__ch.is-on { border-color: var(--kj-b3-title); background: var(--kj-b3-title); color: #fff; }
.kj-rm3__note { margin: 14px 0 16px; font-size: 12.5px; line-height: 1.45; color: var(--kj-b3-faint, #9BA7BC); }
.kj-rm3__acts { display: flex; gap: 8px; }
.kj-rm3__rm { flex: none; height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0); background: #fff; color: var(--kj-b3-title); font-family: inherit; font-weight: 800; font-size: 14.5px; cursor: pointer; white-space: nowrap; }
.kj-rm3__save { flex: 1 1 auto; height: 46px; border-radius: 999px; border: 0; background: var(--kj-b3-gradient); color: #fff; font-family: inherit; font-weight: 800; font-size: 14.5px; cursor: pointer; box-shadow: var(--kj-shadow-accent); }
.kj-rm3__save[disabled], .kj-rm3__rm[disabled] { opacity: .6; cursor: default; }
.kj-mj-toast { position: fixed; left: 50%; bottom: 28px; z-index: 9500; transform: translate(-50%, 12px); padding: 10px 16px; border-radius: 999px; background: var(--kj-b3-navy, #041E42); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; max-width: calc(100vw - 32px); box-shadow: 0 18px 40px -12px rgba(4, 30, 66, .35); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.kj-mj-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 759px) {
  .kj-rm3 { align-items: flex-end; padding: 0; }
  .kj-rm3__box { border-radius: 24px 24px 0 0; max-width: none; }
  .kj-rm3__acts { flex-wrap: wrap; }
  .kj-rm3__rm { flex: 1 1 100%; }
}

/* --- phones: the docked deadline bar (767, the rule above) — the pill's note has no room in it --- */
@media (max-width: 767px) {
  .kj-deadline .kj-jd-remnote { display: none; }
  /* the EPI launcher (kj-epi-widget.php, signed-in pages only) stands at the desktop 24px from 760 to
     767, where the bar is already docked at the foot (70px): lifted 16px over the bar */
  body.kj-job-page .kj-epifab { bottom: 86px; }
  .kj-jobhead__coline .kj-jbadge--follow { margin-top: 4px; }
  /* the candidate's reminder in the docked bar is KJJob's barBell (KJJob.html:323, :474): a 44px
     circle with the 18px bell alone, flex none — the apply button takes the rest of the bar (the
     text pill split it in half). The tints stay the pill's own (.is-on above); the guest's text pill
     (.kj-deadline__remind, 2026-09-27) is untouched. The label is the button's only name
     (kjReminderButtonHtml() prints no aria-label), so it is hidden visually, never display:none —
     screen readers still read it (the design's barBell carries aria-label + title).
     Only BESIDE the apply button (:has): an ad with no apply route (no online form, no applicationLink —
     268 of 422 live ads on 2026-10-10, e.g. 70825) prints none, and the circle stood alone at the left of
     an empty bar. There the reminder is the bar's only control and keeps its text pill across the bar
     (`.kj-deadline__actions > * { flex: 1 }` above), like the guest's pill on the same ad. */
  .kj-deadline__actions:has(.kj-deadline__btn) .kj-jd-remind { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; box-sizing: border-box; }
  .kj-deadline__actions:has(.kj-deadline__btn) .kj-jd-remind span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .kj-deadline__actions:has(.kj-deadline__btn) .kj-jd-remind svg { width: 18px; height: 18px; }
}
/* --- signed-in phones: the chrome's 64px tab bar (base.css shows it at 759 and below — the selector
       below matches whenever the element is in the page, so the offsets sit at ITS breakpoint, or from
       760 to 767 the bar floated 64px over a hidden tab bar). The docked bar sits on the tab bar
       (KJJob.html:469 "bottom: calc(64px + env(safe-area-inset-bottom))") and the page pads for both
       (72 + 64). The EPI launcher: epi-widget.css stands it at 76, which is this bar's band (64 to 134)
       and covered the end of the apply button; the design's shell lifts it to 142 on phones
       (root.x-dc.txt:167, [data-epi-fab]) — 8px over the bar, like apply-flow.css:670 for its own. --- */
@media (max-width: 759px) {
  body.kj-job-page:has(.kj-tabbar) { padding-bottom: 136px; }
  body:has(.kj-tabbar) .kj-deadline { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.kj-job-page:has(.kj-tabbar) .kj-epifab { bottom: calc(142px + env(safe-area-inset-bottom, 0px)); }
}
/* base.css's .kj-iconbtn carries `flex: 0 0 48px`, which beats the 46px width above inside the flex
   action row: the bell measured 48 × 46 next to the 46 × 46 bookmark and share circles. The design's
   three circles are 46 (KJJob.html:48-50) — the same basis for the guest's and the candidate's bell. */
.kj-jobhead .kj-iconbtn { flex: 0 0 46px; }