/* ============================================================================
   KJHOME + KJSEARCH — page stylesheet for index.php (Batch 1 "Job Seeker").

   index.php is ONE page with TWO layouts:
     body.kj-b1--browse   the homepage (hero + featured + standard + employer CTA)
     body.kj-b1--search   the ?q= / ?jobTitle= results state (hero + rail + list)

   Everything below was read off the Batch-1 artboards' own computed styles at
   1512 (document width 1502, content column 1136), never eyeballed:

     wrap          max-width 1200, padding 0 32  -> column 1136 (x 183..1319)
     body ground   #FFFEFD (--bg-page). #F6F8FB is --bg-subtle and is only
                   painted by panels ON TOP of it.
     hero          section padding 32px 0 0; h1 [183,105,1136,47.52]
                   44/800 lh 47.52 ls -1.32px #041E42, margin 0 0 22px
     search box    [183,175,1136,66]  r28 pad 8  1px #E2E7EF
                   shadow 0 8px 20px -6px rgba(4,30,66,.12)     (cards.css)
     featured sec  padding 24px 32px 0   box [151,287,1200,851.5]
     header bar    [183,311,1136,57.5] r14 1px #E2E7EF pad 14px 24px
                   shadow 0 2px 6px rgba(4,30,66,.07)
                   h2 22/700 lh 27.5 ls -0.22px #EE4753 centred
     featured grid [183,384,1136,314]  368/368/368  gap 16
                   banner grid-column 3 / grid-row span 3  -> 3*94+2*16 = 314
     standard sec  padding 40px 32px 0   header bar [183,1178,1136,57.5]
     standard grid [183,1252,1136,408.5] 369.33 x3 gap 14  (compact cards)
     employer sec  padding 64px 32px 80px
     employer panel[183,1724,1136,221.8] r32 pad 48/56 gap 40
                   grid minmax(0,1fr) auto  -> 526.7 / 457.3
                   h2 32/800 lh 36.8 ls -0.64px #fff
     search state  wrap padding 14px 32px 80px
     interp card   [183,255,1136,149] r20 1px #FFC2BC pad 18/22/16
                   shadow 0 12px 32px -18px rgba(254,97,108,.5)
     body grid     [183,426,1136] 272px + 840px, gap 24, align-items start
     rail          sticky top 92
     result card   [479,494,840,86]  gap 12   (cards.css, variant `full`)

   The card and the search box are the SHARED components (kj-jobcard.php /
   kj-searchbox.php + new-ui/cards.css). Nothing about them is redefined here —
   this sheet only positions them.
   ========================================================================== */

/* ---------------------------------------------------------------- page ---- */
body.kj-b1 {
  position: relative;
  background: var(--kj-b1-page, #FFFEFD);
  color: var(--kj-b3-body, #313C53);
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* The Batch-1 wrap. Deliberately a SECOND class next to .kj-container rather
   than an override of it: the chrome's header and footer carry their own
   1200/32 rules, and widening the plain .kj-container selector here would
   fight the footer's own vertical padding. */
.kj-b1wrap {
  max-width: var(--kj-b1-container, 1200px);
  padding-left: 32px;
  padding-right: 32px;
}

/* ---------------------------------------------------------------- glow ----
   Two masked radial circles behind the hero. It starts ABOVE the header
   (top:-72px) and fades out under the search bar, so there is deliberately no
   section edge — the header is translucent and the glow shows through it. */
.kj-bg {
  position: absolute;
  top: -72px;
  left: 0;
  right: 0;
  height: 900px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, 0) 78%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, 0) 78%);
}
.kj-bg::before,
.kj-bg::after {
  content: '';
  position: absolute;
  width: 820px;
  height: 820px;
  border-radius: 50%;
}
.kj-bg::before {
  top: -300px;
  left: -320px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 196, 115, .30) 0%, rgba(254, 97, 108, .15) 52%, rgba(254, 97, 108, 0) 72%);
}
.kj-bg::after {
  top: -160px;
  right: -300px;
  background: radial-gradient(circle at 50% 50%, rgba(254, 97, 108, .20) 0%, rgba(255, 196, 115, .13) 52%, rgba(255, 196, 115, 0) 72%);
}

/* ---------------------------------------------------------------- hero ---- */
.kj-hero {
  position: relative;
  z-index: 5;
  padding: 32px 0 0;
}
.kj-hero__title {
  margin: 0 0 22px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: var(--kj-fs-display-lg, 44px);
  font-weight: 800;
  line-height: var(--kj-lh-tight, 1.08);
  letter-spacing: var(--kj-ls-tighter, -.03em);
  color: var(--kj-b3-title, #041E42);
  text-wrap: balance;
  animation: kjFadeUp .5s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-hero__title em { font-style: normal; color: var(--kj-coral-600, #EE4753); }
/* the animated headline's rules (.kj-hero__rot / .kj-hero__part) live in
   cards.css since 2026-09-27 — the companies page uses the same component. */

/* the shared search box, one step later than the headline */
.kj-hero .kj-sb-wrap { animation: kjFadeUp .55s .08s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both; }

/* The suggestion dropdown (POST /suggest_1 -> #kjSuggest) was removed on
   2026-09-26 — the box searches anything, so only the visitor's own recent
   searches drop down (cards.css .kj-sb__recents). */

/* The legacy filter shell (homesearch-NEW.php) stays in the DOM, never shown:
   it defines the URL helpers the page's legacy handlers reference. Nothing
   fills it since 2026-09-23 — the Filtro dropdowns it fed are gone. */
.kj-filter-panel { display: none !important; }

/* ------------------------------------------------------------- sections --- */
.kj-main { position: relative; z-index: 1; }
.kj-b1sec--feat { padding: 24px 0 0; }
.kj-b1sec--std  { padding: 40px 0 0; }

/* section header bar (legacy .jobListHeaders — re-skinned by selector only) */
.jobListHeaders {
  margin: 0 0 16px;
  padding: 14px 24px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: var(--kj-b1-r-md, 14px);
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4, 30, 66, .07));
}
.jobListHeaders h2 {
  margin: 0;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: var(--kj-fs-h3, 22px);
  font-weight: 700;
  line-height: var(--kj-lh-snug, 1.25);
  letter-spacing: -.01em;
  color: var(--kj-coral-600, #EE4753);
  text-align: center;
}

/* --------------------------------------------------------------- grids ---- */
/* align-items: stretch (2026-09-26, was start): job titles may wrap to two
   lines now (cards.css), so a card can be a little taller than its
   row-mates; stretching gives every card in a row the same height (the card
   centres its content). */
.listCnt.kj-feat,
.listCnt.kj-std {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.listCnt.kj-feat { gap: 16px; }
.listCnt.kj-std  { gap: 14px; }

/* In-list ad tile (legacy .creativeSpaceCnt, Revive zone 1). The artboard pins
   a banner to the third column beside a full block of cards; span 3 makes it
   exactly 3*94 + 2*16 = 314px in the featured grid. Only the featured grid
   has tiles: none between standard ads and none in the results rail since
   2026-10-03 (operator). */
.creativeSpaceCnt {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--kj-b3-page, #F6F8FB);
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4, 30, 66, .07));
  transition: transform .25s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)), box-shadow .25s;
  min-height: 120px;
}
.creativeSpaceCnt:hover { transform: translateY(-3px); box-shadow: var(--kj-shadow-lg, 0 18px 40px -12px rgba(4, 30, 66, .18)); }
.creativeSpaceCnt ins,
.creativeSpaceCnt iframe,
.creativeSpaceCnt img,
.creativeSpaceCnt a { display: block; width: 100%; height: 100%; border: 0; }
.creativeSpaceCnt img { object-fit: cover; }
.kj-feat .creativeSpaceCnt { grid-column: 3; grid-row: span 3; }
/* The grids are align-items:start, so the tile kept the creative's own height
   and its top/bottom drifted off the card rows. Stretch it to exactly the rows
   it spans; the image inside already covers. */
.kj-feat .creativeSpaceCnt { align-self: stretch; }

/* ============================================================================
   KJSEARCH — the ?q= / ?jobTitle= results state
   ========================================================================== */
.kj-srch { position: relative; z-index: 1; padding: 14px 0 80px; }

/* ---- the AI search "thinking" card (kj-search-thinking.php) ----
   display:none unless <body> is .kj-b1--thinking, which index.php's inline
   <body> script sets only for a visitor who just searched; while it is set the
   results body is hidden underneath, and the card's own script swaps the two
   back when its run ends. */
.kj-think {
  display: none;
  margin-bottom: 22px;
  padding: 22px 26px 20px;
  background: #fff;
  border: 1px solid var(--kj-coral-200, #FFC2BC);
  border-radius: var(--kj-b1-r-lg, 20px);
  box-shadow: 0 12px 32px -18px rgba(254, 97, 108, .5);
  animation: kjFadeUp .35s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
  transition: opacity .3s ease, transform .3s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1));
}
.kj-b1--thinking .kj-think { display: block; }
.kj-b1--thinking .kj-srch__read,
.kj-b1--thinking .kj-srch__grid { display: none; }
.kj-think.is-leaving { opacity: 0; transform: translateY(-6px); }
.kj-think__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kj-think__head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: var(--kj-fs-h3, 22px);
  font-weight: 700;
  line-height: var(--kj-lh-snug, 1.25);
  letter-spacing: -.01em;
  color: var(--kj-b3-title, #041E42);
}
.kj-think__head h2 svg { flex: none; }
.kj-think__pct {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: var(--kj-coral-600, #EE4753);
  font-variant-numeric: tabular-nums;
}
.kj-think__bar {
  height: 8px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--kj-surface-3, #DFE3E8);
  overflow: hidden;
}
.kj-think__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--kj-gradient, linear-gradient(90deg, #FFC163 0%, #FF5168 100%));
}
.kj-think__steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.kj-think__step {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--kj-text-disabled, #BBBBBB);
  transition: color .25s;
}
.kj-think__step.is-active,
.kj-think__step.is-done { color: var(--kj-b3-body, #313C53); }
.kj-think__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border: 2px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 50%;
  color: #fff;
  transition: background .25s, border-color .25s;
}
.kj-think__ico svg { opacity: 0; transition: opacity .2s; }
.kj-think__step.is-active .kj-think__ico {
  border-color: var(--kj-coral-200, #FFC2BC);
  border-top-color: var(--kj-coral-500, #FE616C);
  animation: kjSpin .8s linear infinite;
}
.kj-think__step.is-done .kj-think__ico {
  background: var(--kj-success, #079455);
  border-color: var(--kj-success, #079455);
  animation: none;
}
.kj-think__step.is-done .kj-think__ico svg { opacity: 1; }
/* the results were display:none during the run, so fade them up on hand-over */
.kj-b1--revealed .kj-srch__grid { animation: kjFadeUp .4s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both; }

/* ---- "Si e kuptuam kërkesën tënde" ---- */
.kj-srch__read {
  margin-bottom: 22px;
  padding: 18px 22px 16px;
  background: #fff;
  border: 1px solid var(--kj-coral-200, #FFC2BC);
  border-radius: var(--kj-b1-r-lg, 20px);
  box-shadow: 0 12px 32px -18px rgba(254, 97, 108, .5);
  animation: kjFadeUp .35s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-srch__readhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kj-srch__readhead h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: var(--kj-fs-h3, 22px);
  font-weight: 700;
  line-height: var(--kj-lh-snug, 1.25);
  letter-spacing: -.01em;
  color: var(--kj-b3-title, #041E42);
}
.kj-srch__readhead h2 svg { flex: none; }
.kj-srch__clearall {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--kj-b3-muted, #6B7890);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kj-srch__clearall:hover { color: var(--kj-coral-600, #EE4753); }
.kj-srch__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.kj-chip--read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 999px;
  background: #fff;
  color: var(--kj-b3-body, #313C53);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kj-chip--read i { font-style: normal; font-weight: 600; color: var(--kj-b3-muted, #6B7890); margin-right: -1px; }
.kj-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: -4px;
  border-radius: 50%;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-chip__x:hover { background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-600, #EE4753); }
/* every criterion has an × since 2026-09-27: a 34px invisible hit area for thumbs */
.kj-chip--read .kj-chip__x { position: relative; }
.kj-chip--read .kj-chip__x::after { content: ''; position: absolute; inset: -8px; }
/* more than six understood positions (2026-10-21): the rest behind one "+N pozita të tjera" chip —
   a native <details>, so it opens with JS off; opened, the hidden chips take a row of their own */
.kj-srch__xroles { display: inline-flex; flex-wrap: wrap; align-items: flex-start; max-width: 100%; }
.kj-srch__xroles > summary { list-style: none; cursor: pointer; }
.kj-srch__xroles > summary::-webkit-details-marker { display: none; }
.kj-srch__xroles[open] { flex-basis: 100%; }
.kj-chip--more { border-style: dashed; color: var(--kj-coral-600, #EE4753); }
.kj-chip--more:hover { background: var(--kj-coral-50, #FFF1EF); }
.kj-chip--more:focus-visible { outline: 2px solid var(--kj-coral-600, #EE4753); outline-offset: 2px; }
.kj-srch__xchips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.kj-srch__hint { margin: 12px 0 0; font-size: 14px; color: var(--kj-b3-muted, #6B7890); }

/* ---- two-column body ---- */
.kj-srch__grid {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  /* item 5 (2026-10-03): the results script decides the scroll after a filter /
     sort / page change; Chrome's scroll anchoring used to follow a surviving
     card up or down the list and drag the sticky rail with it */
  overflow-anchor: none;
}
.kj-srch__rail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---- filter card ---- */
.kj-srch__fcard {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: var(--kj-b1-r-lg, 20px);
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4, 30, 66, .07));
}
.kj-srch__fhead { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.kj-srch__fhead svg { flex: none; color: var(--kj-coral-500, #FE616C); }
.kj-srch__fhead strong {
  flex: 1;
  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-srch__fclear {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-srch__fclear:hover { color: var(--kj-coral-600, #EE4753); }
.kj-srch__glbl {
  margin: 20px 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-srch__fcard > .kj-srch__glbl:first-of-type { margin-top: 0; }
.kj-srch__sel {
  width: 100%;
  height: 46px;
  padding: 0 36px 0 14px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7890' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--kj-b3-title, #041E42);
  cursor: pointer;
}
.kj-srch__sel:focus { outline: 0; border-color: var(--kj-coral-400, #FE8079); box-shadow: var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30)); }
.kj-srch__opts { display: flex; flex-direction: column; gap: 10px; }
.kj-srch__opt { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--kj-b3-body, #313C53); }
.kj-srch__opt input { width: 18px; height: 18px; flex: none; accent-color: var(--kj-coral-500, #FE616C); cursor: pointer; }
.kj-srch__opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-srch__opt b { flex: none; font-weight: 400; font-size: 12px; color: var(--kj-b3-faint, #9BA7BC); font-variant-numeric: tabular-nums; }
/* the hidden attribute lost to display:flex above, so the 7th+ categories never
   hid and "Shfaq të gjitha kategoritë" only changed its own label (item 5) */
.kj-srch__opt[hidden] { display: none; }
.kj-srch__more {
  margin-top: 10px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--kj-coral-600, #EE4753);
}
.kj-srch__more:hover { text-decoration: underline; }

/* ---- job-alert card ---- */
.kj-srch__alert {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: var(--kj-b1-r-lg, 20px);
  background: var(--kj-b3-navy, #041E42);
  color: var(--kj-b3-on-navy, #FFFEFD);
}
.kj-srch__alert::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(254, 97, 108, .30) 0%, rgba(254, 97, 108, 0) 70%);
  pointer-events: none;
}
.kj-srch__alert strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 6px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
}
.kj-srch__alert p {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: var(--kj-lh-normal, 1.5);
  color: var(--kj-b3-on-navy-muted, #A9B6CC);
}
.kj-srch__alertbtn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45));
}
.kj-srch__alertbtn:hover { transform: translateY(-1px); text-decoration: none; }

/* ---- results column ---- */
.kj-srch__col { min-width: 0; }
.kj-srch__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.kj-srch__top h2 {
  margin: 0;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: var(--kj-fs-h3, 22px);
  font-weight: 700;
  line-height: var(--kj-lh-snug, 1.25);
  letter-spacing: -.01em;
  color: var(--kj-b3-title, #041E42);
}
.kj-srch__sub { margin: 4px 0 0; font-size: 14px; color: var(--kj-b3-muted, #6B7890); }
.kj-srch__tools { display: flex; align-items: center; gap: 10px; }
.kj-srch__sort {
  width: 220px;
  height: 46px;
  padding: 0 36px 0 14px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7890' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--kj-b3-title, #041E42);
  cursor: pointer;
}
.kj-srch__sort:focus { outline: 0; border-color: var(--kj-coral-400, #FE8079); box-shadow: var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30)); }
.kj-srch__mobf {
  display: none;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--kj-b3-title, #041E42);
}
.kj-srch__mobn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.kj-srch__mobn[hidden] { display: none; }

.listCnt.kj-srch__list { display: flex; flex-direction: column; gap: 12px; }
.kj-srch__list .jobListCnts[hidden] { display: none; }

/* ---- pagination ---- */
.kj-srch__pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.kj-srch__pager[hidden] { display: none; }
.kj-srch__range { font-size: 14px; color: var(--kj-b3-muted, #6B7890); }
.kj-srch__pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kj-srch__pg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 999px;
  background: #fff;
  color: var(--kj-b3-body, #313C53);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}
.kj-srch__pg:hover:not([disabled]) { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); }
.kj-srch__pg.is-on { background: var(--kj-b3-navy, #041E42); border-color: transparent; color: #fff; }
.kj-srch__pg[disabled] { cursor: default; opacity: .4; }
.kj-srch__pg--arw { padding: 0; }
.kj-srch__gap { padding: 0 2px; color: var(--kj-b3-faint, #9BA7BC); }

/* ---- empty states ----
   the design's box (KJSearch.html:123): r24 — not the --kj-b1-r-2xl token, which is 36 — with 72 / 28 / 64
   and the 18 / 500 line at EVERY width (2026-10-11, f3-prefs-batch: the phone block no longer shrinks it;
   measured at 390 the box was 350×178 where the design draws 358×256). The line has 12 px under it
   (KJSearch.html:125 — 18 made the visitor's box 6 px taller than the design's: 262 / 235 for 256 / 229),
   and the pill hovers as the design's CTA (KJSearch.html:130: 1 px up, the deeper shadow; its transition
   is the house motion layer's, base.css "Motion layer") — the f3 fix round, 2026-10-11 */
.kj-srch__empty,
.kj-srch__none {
  padding: 72px 28px 64px;
  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));
  text-align: center;
  animation: kjFadeUp .4s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-srch__none[hidden] { display: none; }
.kj-srch__empty p,
.kj-srch__none p { margin: 0 0 12px; font-size: 18px; font-weight: 500; color: var(--kj-b3-muted, #6B7890); }
.kj-srch__emptybtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45));
}
.kj-srch__emptybtn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(254, 97, 108, .55); text-decoration: none; }

/* ---- mobile filter sheet ---- */
.kj-srch__sheet { position: fixed; inset: 0; z-index: 130; }
.kj-srch__sheet[hidden] { display: none; }
.kj-srch__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 30, 66, .5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  animation: kjFade .25s both;
  touch-action: none;   /* a drag on the scrim must not pan the page behind (iOS) */
}
.kj-srch__sheetp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  max-height: 88dvh;   /* the visible viewport: a phone toolbar can't push the top off screen */
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: var(--kj-shadow-xl, 0 30px 70px -20px rgba(4, 30, 66, .28));
  animation: kjSlideUp .34s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-srch__sheeth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--kj-b3-stroke, #E2E7EF);
}
.kj-srch__sheeth strong { font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 18px; font-weight: 800; color: var(--kj-b3-title, #041E42); }
.kj-srch__sheeth .kj-srch__fclear { font-size: 14px; font-weight: 700; color: var(--kj-coral-600, #EE4753); }
.kj-srch__sheetb { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; }
.kj-srch__sheetb .kj-srch__fcard { border: 0; box-shadow: none; padding: 0; }
.kj-srch__sheetb .kj-srch__fhead { display: none; }
/* the sheet lists every category and has no "Shfaq të gjitha kategoritë": a
   sheet pinned to the bottom edge would grow and shrink from its top and move
   the controls up and down (item 5) */
.kj-srch__sheetb .kj-srch__opt[hidden] { display: flex; }
.kj-srch__sheetb .kj-srch__more { display: none; }
.kj-srch__sheetf { padding: 12px 20px 24px; border-top: 1px solid var(--kj-b3-stroke, #E2E7EF); }
.kj-srch__sheetgo {
  display: block;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45));
}

/* mobile app bottom banner (legacy, chrome-owned markup) */
.appBottomImgCnt { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; }
.appBottomImgCnt img { width: 100%; display: block; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1099px) {
  .kj-b1wrap { padding-left: 24px; padding-right: 24px; }
  /* home-lists-18 (2026-10-16): no 36px step here — 1099 down to 768 is the design's 44 / 47.5
     (refs README; KJUserHome.html:25, KJHome.html:20, KJCompanies.html:20, KJLogin.html:25). */
  .listCnt.kj-feat,
  .listCnt.kj-std { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kj-feat .creativeSpaceCnt { grid-column: 2; grid-row: span 2; }

  .kj-srch__grid { grid-template-columns: minmax(0, 1fr); }
  .kj-srch__rail { position: static; }
  .kj-srch__rail[data-desk] { display: none; }
  .kj-srch__mobf { display: inline-flex; }
}

@media (max-width: 759px) {
  .kj-b1wrap { padding-left: 20px; padding-right: 20px; }
  /* home-lists-18 (2026-10-16): the design's phone headline — 28px / 30.2 (root.x-dc.txt:179), the
     hero's top padding 24 (root.x-dc.txt:108) and the base margin 22 kept (no margin step here). */
  .kj-hero { padding-top: 24px; }
  .kj-hero__title { font-size: 28px; }
  .kj-b1sec--feat { padding-top: 16px; }
  .kj-b1sec--std  { padding-top: 28px; }
  .listCnt.kj-feat,
  .listCnt.kj-std { grid-template-columns: minmax(0, 1fr); }
  .kj-feat .creativeSpaceCnt { grid-column: 1; grid-row: auto; aspect-ratio: 640 / 532; min-height: 0; }
  /* phones (2026-09-27, operator request): the section headers ("Konkurset
     Ultra & Premium+", "Konkurset Standard") step back — a glassy strip on the
     page's gradient instead of a white card, softer coral, a size smaller */
  .jobListHeaders { padding: 10px 16px; background: rgba(255, 255, 255, .32); border-color: rgba(255, 255, 255, .7); box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .jobListHeaders h2 { font-size: 17px; color: rgba(238, 71, 83, .85); }
  .kj-srch { padding-bottom: 56px; }
  .kj-srch__read { padding: 16px 16px 14px; }
  .kj-srch__readhead h2 { font-size: 18px; }
  .kj-think { padding: 16px 16px 14px; }
  .kj-think__head h2 { font-size: 18px; }
  .kj-think__step { font-size: 15px; gap: 12px; }
  .kj-srch__top { flex-direction: column; align-items: stretch; }
  .kj-srch__tools { justify-content: space-between; }
  .kj-srch__sort { flex: 1; width: auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kj-hero__title,
  .kj-hero .kj-sb-wrap,
  .kj-think,
  .kj-srch__read,
  .kj-srch__empty,
  .kj-srch__none,
  .kj-srch__sheetp,
  .kj-srch__scrim { animation: none !important; }
  .creativeSpaceCnt,
  .kj-srch__alertbtn,
  .kj-srch__emptybtn { transition: none !important; }
}