/* ============================================================================
   new-ui/cards.css — the shared PUBLIC components of Batch 1 "Job Seeker":
     KJJobCard      (.kj-jc, on the legacy .jobListCnts skeleton)
     KJCompanyCard  (.kj-cc, on the legacy .kj-comp-card skeleton)
     KJSearchBox    (.kj-sb, on the legacy #kjSearchForm skeleton)
     KJShare        (.kj-shr)

   EVERY legacy class name in here is a JS hook, not a style hook. The redesign
   is applied BY SELECTOR — nothing is renamed. See the header of each PHP
   partial for the full contract.

   Numbers are measured off the Batch-1 bundle rendered at 1512 (not read off a
   token sheet, not eyeballed): job card home 368x94 / compact 369x71 /
   full 840x86, company card 368x305, search box 1136x66, share panel 480 wide.

   Colours come from new-ui/tokens.css's additive --kj-b3-* block; the handful
   the bundle ships that the block does not yet carry are declared here with the
   bundle's exact values, so this file is self-sufficient and adding them to
   tokens.css later changes nothing.
   ============================================================================ */

:root {
  /* Bundle values absent from tokens.css today. Same names the design uses,
     --kj-b1-* namespaced so nothing existing can collide. */
  --kj-b1-white:   #FFFEFD;                 /* --bg-page */
  --kj-b1-gold-tx: #9A6312;                 /* the fg the bundle pairs with gold-100 */
  --kj-b1-green-tx:#0F7A50;                 /* the fg it pairs with success-bg */
  --kj-b1-gradient-navy: linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%);
  --kj-b1-r-md: 14px;
  --kj-b1-r-lg: 20px;
  --kj-b1-r-xl: 28px;
}

@keyframes kjPop  { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes kjGlow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .78; transform: scale(1.08); } }

/* ============================================================================
   1. KJJobCard
   ============================================================================ */

.jobListCnts.kj-jc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: var(--kj-b1-r-lg);
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4, 30, 66, .07));
  cursor: pointer;
  /* the design system's interactive Card (ds-bundle.js Card.jsx): transform + box-shadow over
     --dur-base 200 ms --ease-out, the border over 200 ms */
  transition: transform .2s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)),
              box-shadow .2s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)),
              border-color .2s;
}
/* hover = lift 3 px, --shadow-lg, border --coral-200 (2026-10-10: the coral border was missing) */
.jobListCnts.kj-jc:hover,
.jobListCnts.kj-jc:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--kj-shadow-lg, 0 18px 40px -12px rgba(4, 30, 66, .18));
  border-color: var(--kj-coral-200, #FFC2BC);
}
.jobListCnts.kj-jc--compact { padding: 12px; }
/* `backwards`, not `both`: a held end frame (transform: none) beats :hover, so cards that faded in
   (/kerko, "more") never lifted — 2026-10-10 */
.kj-jc--in { animation: kjFadeUp .4s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) backwards; }

/* The whole card is one click target and one crawlable href. A <button> (the
   bookmark) may not sit inside an <a>, so the link is a stretched overlay and
   the interactive children are lifted above it. `.jobListCnts > a` still
   matches — this selector is deliberately more specific than the legacy
   `.jobListCnts > a` rules in new-ui/home.css so load order cannot matter. */
.jobListCnts.kj-jc > a.kj-jc__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: none;
  box-shadow: none;                  /* home.css paints the legacy card on > a */
  border-radius: inherit;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.jobListCnts.kj-jc > a.kj-jc__hit:focus-visible {
  outline: 2px solid var(--kj-coral-500, #FE616C);
  outline-offset: 2px;
}

/* ---- logo / initials avatar --------------------------------------------- */
.kj-jc .jobListImage.kj-jc__logo {
  position: relative;
  z-index: 2;
  flex: none;
  width: 70px;                       /* bundle sizes +10%: 64/56/44 -> 70/62/48 */
  height: 70px;
  border-radius: var(--kj-b1-r-md);
  background-color: #fff;
  background-size: contain;          /* a company mark, not a photo — never crop */
  background-position: center;
  background-repeat: no-repeat;
  border: 0;                         /* no outline — the tile sits flat on the card */
  pointer-events: none;
}
.kj-jc--full    .jobListImage.kj-jc__logo { width: 62px; height: 62px; }
.kj-jc--compact .jobListImage.kj-jc__logo { width: 48px; height: 48px; }

.kj-jc__logo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--kj-b1-gradient-navy);
  color: #fff;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  line-height: 1;
  font-size: 26.6px;                 /* 0.38 x 70 — the bundle's ratio */
}
.kj-jc--full    .kj-jc__logo--initials { font-size: 23.56px; }   /* 0.38 x 62 */
.kj-jc--compact .kj-jc__logo--initials { font-size: 18.24px; }   /* 0.38 x 48 */

/* ---- text column --------------------------------------------------------- */
.kj-jc .jobListCntsInner.kj-jc__body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
  pointer-events: none;              /* clicks fall through to the hit link ... */
}
.kj-jc__body a,
.kj-jc__body button { pointer-events: auto; }   /* ... except real controls */

.kj-jc__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.kj-jc__titlecol { flex: 1; min-width: 0; }

/* Titles wrap to TWO lines, one step smaller (operator, 2026-09-26). The design
   drew exactly one line, but long titles ("Agjent/e të Call Center-it -
   Outbound…") lost their meaning at the ellipsis. 15px x 1.25 = two 18.75px
   lines + 5 + the 19.5px meta row = 62px — inside the 62/70px logo of the full
   / home cards, so those cards keep their height. Compact (48px logo) grows by
   ~12px only when a title actually wraps; home.css stretches grid rows so its
   neighbours match. A third line is cut with "…". */
.kj-jc .jobListTitle.kj-jc__title {
  margin: 0;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--kj-b3-title, #041E42);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;           /* an unbroken token never overflows the card */
}
.kj-jc--compact .jobListTitle.kj-jc__title { font-size: 14px; }

/* ---- the right column: pills only (2026-10-13, design of 2026-10-12 — KJJobCard.html:31-41;
   b3-myjobs-14, decision D40). The bookmark and the bells left it for the meta line
   (.kj-jc__acts below), so it lost the negative margin that pulled a 30 px button to the pad.
   The design's column is two rows 3 px apart, the second one (the follow mark) usually empty:
   a flat column reproduces it with 3 px under the pills — measured on the design, a card with
   "E re" has a 23 px first line (20 + 3), a card without a pill a 0 x 3 column.
   With a caller's `fol` the card prints the two rows itself (.kj-jc__right--2). */
.kj-jc__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding-bottom: 3px;
}
.kj-jc .kj-jc__right--2 { flex-direction: column; align-items: flex-end; gap: 3px; padding-bottom: 0; }
.kj-jc__r1, .kj-jc__r2 { display: flex; align-items: center; gap: 6px; }

/* ---- the company line under the title — only with the `company` option (b3-myjobs-16;
   KJJobCard.html:27: 14 / 600 text-muted, margin-top 3, gap 5, one line with an ellipsis).
   The verified check after the name (2026-10-16, home-lists-25): its own 14 × 14 box, never shrunk. */
.kj-jc__co {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  min-width: 0;
  font-family: var(--kj-font-mulish, 'Mulish', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-jc__co > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-jc__co > .kj-jc__vf { flex: none; display: block; }

/* ---- tier badge (legacy .newJobOpeningCnt) ------------------------------- */
.kj-jc .newJobOpeningCnt.kj-jc__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  /* the body face (2026-10-09 bundle, KJJobCard.html:84 — the pill inherits
     Mulish; only the title is var(--font-display)) */
  font-family: var(--kj-font-mulish, 'Mulish', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 11px;
  letter-spacing: .01em;
  white-space: nowrap;
  margin: 0;                         /* home.css: margin-left 8px */
  box-shadow: none;
  vertical-align: baseline;
  float: none;                       /* legacy style-v3 sets a global float */
}
.kj-jc__badge--gold   { background: var(--kj-gold-100, #FFEFD2); color: var(--kj-b1-gold-tx); }
.kj-jc__badge--accent { background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-700, #CE3340); }

/* ---- "E re" pill — the 2026-10-09 design (operator, 2026-10-10: "E re is not the same as
   in the design"). KJJobCard.html:35 + :84-86, keyframes root.x-dc.txt:34-35, measured on
   the design's render (#/ signed in, 1440): 47.6 x 20, padding 0 9 0 7, gap 5, 800 / 11 px,
   coral-50 / coral-700, a 6 px coral-500 dot 7 px in, the word 18 px in. Every card that shows
   "E re" gets it (the design draws it wherever the card is used); it replaces the 2026-10-03
   homepage-only halo (the "lazy animation on the New sign" the operator asked for then is now
   the design's own: a sheen crosses the pill once every 7.5 s and the dot rings once).
   Motion without compositing layers: the design moves its sheen with transform, but a running
   transform animation makes Chrome assume it overlaps every later card element (that is what
   gave 184 layers instead of 55 for 45 pills in 2026-10-03); here the sheen is a background
   on a span that covers the pill and its background-position moves — the same path (-130 % →
   230 % of a 38 %-wide sheen = -79.7 % → 141 % as background-position) at the same timing,
   painted, with no layer. The dot's ring is a box-shadow, as in the design.
   Reduced motion: both stop (animation: none in the reduced-motion block near the end of
   this file — an infinite animation under the chrome's .001 s duration rule would flicker). */
.kj-jc .newJobOpeningCnt.kj-jc__badge--new {
  position: relative;
  overflow: hidden;
  gap: 5px;
  padding: 0 9px 0 7px;
  font-weight: 800;
}
.kj-jc .kj-jc__new-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kj-coral-500, #FE616C);
  flex: none;
  animation: kjNewGlow 7.5s ease-in-out infinite;
}
.kj-jc .kj-jc__new-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 50%, rgba(255,255,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 38% 100%;
  background-position: -79.7% 0;
  animation: kjNewSheen 7.5s ease-in-out infinite;
}
@keyframes kjNewSheen {
  0%, 86% { background-position: -79.7% 0; }
  94%, 100% { background-position: 141% 0; }
}
@keyframes kjNewGlow {
  0%, 82%, 100% { box-shadow: 0 0 0 0 rgba(254,97,108,0); }
  89% { box-shadow: 0 0 0 3px rgba(254,97,108,.26); }
}
/* ---- bookmark (legacy .addToFavsBtn) ------------------------------------- */
.kj-jc .addToFavsBtn.kj-jc__save {
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--kj-b3-faint, #9BA7BC);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  -webkit-appearance: none;
  appearance: none;
}
.kj-jc .addToFavsBtn.kj-jc__save svg { display: block; }
/* 2026-10-10: the 2026-10-09 design keeps the bookmark's background transparent in every state
   (KJJobCard.html:36 bmBg, :99) — hover is the coral colour only, saved a filled coral
   bookmark; stage drew a coral-50 disc for both until then */
.kj-jc .addToFavsBtn.kj-jc__save:hover,
.kj-jc .addToFavsBtn.kj-jc__save:focus-visible {
  color: var(--kj-coral-600, #EE4753);
}
/* saved state — the two -Icon classes are the live JS's own toggle */
.kj-jc .addToFavsBtn.removeToFavsBtnIcon.kj-jc__save {
  background: transparent;
  color: var(--kj-coral-600, #EE4753);
}
.kj-jc .addToFavsBtn.removeToFavsBtnIcon.kj-jc__save svg path { fill: currentColor; }
.kj-jc .addToFavsBtn.kj-jc__save svg.kj-pop { animation: kjPop .45s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both; }

/* ---- meta row ------------------------------------------------------------
   2026-10-13 (design of 2026-10-12, KJJobCard.html:43-50): the row holds the items block
   (.kj-jc__meta — flex 1, wraps) and, at its end, the action group (.kj-jc__acts): the caller's
   controls, the notify bell and the bookmark, with no gap. The group's negative margin lets its
   30 / 32 px buttons overhang the 19.5 px row instead of stretching it: 7 px inside the card's
   right edge (border 1 + padding 14 − 8) and 7 px under the row. The text column lets clicks
   through to the stretched link except on real controls (.kj-jc__body a / button above), so the
   buttons take the pointer and the group's empty parts do not. */
.kj-jc__mrow {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 5px;
  min-width: 0;
}
.kj-jc__acts {
  flex: none;
  display: flex;
  align-items: center;
  margin: -8px -8px -7px 0;
}
/* one keyboard focus ring for every control of the group (design verification, 2026-10-13): the
   notify bell had the house ring (kj_card_notify_css()), the bookmark and a caller's bell the
   browser's default — three buttons side by side with two different rings. The design draws
   none (a prototype defect), so the house ring it is. */
.kj-jc__acts > :focus-visible {
  outline: 2px solid var(--kj-coral-500, #FE616C);
  outline-offset: 1px;
}
/* A city that does not fit beside the group (fix round 2026-10-13; docs/features/job-card.md):
   the items WRAP — the days go under the city — and the city is never cut while it fits a
   line of its own. The card grows by what the second line needs beyond its logo (measured):
   home (70 px logo) keeps its 100 px under a one-line title (18.75 + 5 + 43 = 66.75) and is
   115.5 px under a two-line one; a results row (62 px) 92 → 96.75 / 115.5; compact (48 px)
   74 → 91.5, 85.5 → 109. The grids stretch the row. Do not answer that with `nowrap` here:
   it cuts the city on every narrow card, also where the wrap costs nothing. The job page's
   similar jobs alone keep one line (the operator's "every card the same size", job.css). */
.kj-jc__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  /* the body face (2026-10-09 bundle, KJJobCard.html:44-48: the city / days row
     inherits Mulish; the title alone is var(--font-display) Plus Jakarta Sans) */
  font-family: var(--kj-font-mulish, 'Mulish', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-jc .kj-jc__meta .kj-jc__m {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  min-width: 0;
  margin: 0;
  float: none;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.kj-jc .kj-jc__meta .kj-jc__m > svg { flex: none; color: var(--kj-b3-faint, #9BA7BC); }
.kj-jc .kj-jc__meta .kj-jc__m > span { overflow: hidden; text-overflow: ellipsis; }
.kj-jc .kj-jc__meta .kj-jc__m--sal  { color: var(--kj-b3-title, #041E42); font-weight: 700; }
.kj-jc .kj-jc__meta .kj-jc__m--test { color: var(--kj-coral-600, #EE4753); font-weight: 700; }
.kj-jc .kj-jc__meta .kj-jc__m--test > svg { color: inherit; }

/* home.css paints the city / expiry icons as ::before background images; the
   design's are inline SVGs, so the pseudo-elements must go or every meta item
   renders two icons. */
.kj-jc .jobListCity::before,
.kj-jc .jobListExpires::before { content: none; display: none; }

/* ---- banner variant (image ad) ------------------------------------------ */
.kj-jc-banner {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  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 var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1));
}
.kj-jc-banner:hover { transform: translateY(-3px); box-shadow: var(--kj-shadow-lg, 0 18px 40px -12px rgba(4, 30, 66, .18)); }
.kj-jc-banner__a { display: block; width: 100%; height: 100%; }
.kj-jc-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The artboard pins the banner with align-self:stretch AND aspect-ratio
   640/532, which derives a 378px width inside a 368px column — a 10px
   overflow, i.e. an artboard bug. Stretched (pinned) banners take their height
   from the row span and cover; a free-standing one keeps the ratio. */
.kj-jc-banner { height: 100%; }
.kj-jc-banner--ratio { height: auto; aspect-ratio: 640 / 532; }

/* ============================================================================
   2. KJCompanyCard
   ============================================================================ */

.kj-comp-card.kj-cc {
  position: relative;
  display: block;
  height: 100%;
  padding: 0;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: var(--kj-b1-r-lg);
  overflow: hidden;
  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 var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)),
              border-color .25s;
}
.kj-comp-card.kj-cc:hover,
.kj-comp-card.kj-cc:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--kj-shadow-lg, 0 18px 40px -12px rgba(4, 30, 66, .18));
  border-color: var(--kj-coral-200, #FFC2BC);
}
.kj-cc--in { animation: kjFadeUp .4s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) backwards; }   /* see .kj-jc--in */

.kj-comp-card.kj-cc .kj-cc__cover {
  position: relative;
  display: block;
  height: 84px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--kj-b1-gradient-navy);
  background-size: cover;
  background-position: center;
}

/* ---- company cover: the photo, or the "logo bloom" (handoff, 2026-09-17) ----
   Every company cover band is a .kj-cvr and gets its layers from
   kj-company-cover.php. A cover photo -> .kj-cvr__photo + tint, nothing
   generated. No photo -> the company's own logo, enlarged, tilted -8deg and
   blurred into a colour bloom under the navy (.kj-cvr__bloom); no logo either
   -> a radial bloom in a hue derived from the company id (.kj-cvr__fb, --hue),
   the same hue the initials tile uses. Then the tint, a faint diagonal hatch
   and (cards only) the industry as a frosted chip. Hero sizes on .kj-cvr--hero.
   CSS + one <img>; nothing is processed on the server. */
.kj-cvr { position: relative; overflow: hidden; background: var(--kj-b1-gradient-navy, linear-gradient(135deg, #041E42 0%, #0B2D5C 100%)); }
.kj-cvr__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kj-cvr__bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: auto;
  transform: translate(-50%, -50%) rotate(-8deg);
  filter: blur(26px) saturate(1.5);
  opacity: .8;
  pointer-events: none;
}
.kj-cvr__fb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 260%;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: radial-gradient(ellipse at center, var(--hue, #FE616C) 0%, rgba(4, 30, 66, 0) 65%);
  opacity: .85;
  pointer-events: none;
}
.kj-cvr__tint  { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 30, 66, .25) 0%, rgba(4, 30, 66, .6) 100%); pointer-events: none; }
.kj-cvr__hatch { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 12px); pointer-events: none; }
.kj-cvr__ind {
  position: absolute;
  left: 12px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .9);
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.kj-cvr--hero .kj-cvr__bloom { width: 110%; filter: blur(56px) saturate(1.5); opacity: .75; }
.kj-cvr--hero .kj-cvr__fb    { width: 90%; height: 240%; opacity: .75; }
.kj-cvr--hero .kj-cvr__tint  { background: linear-gradient(180deg, rgba(4, 30, 66, .15), rgba(4, 30, 66, .55)); }
.kj-cvr--hero .kj-cvr__hatch { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 14px); }
/* whatever a page lays over the band (verified badge, breadcrumb) stays above the layers */
.kj-cvr > .kj-cc__ver, .kj-cvr > .kj-co-crumb { position: relative; z-index: 2; }
.kj-cvr > .kj-cc__ver { position: absolute; }
/* no-logo companies: the initials tile takes the same hue as their bloom */
.kj-cc__logo--initials { background: var(--hue, var(--kj-b1-gradient-navy)); }
.kj-cc__ver {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: var(--kj-b1-green-tx);
  white-space: nowrap;
}
.kj-cc__ver svg { flex: none; }

.kj-cc__body {
  position: relative;
  z-index: 1;
  margin-top: -34px;                 /* the avatar straddles the band */
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kj-cc .kj-comp-card__logohold.kj-cc__logohold { margin: 0; padding: 0; background: none; }

.kj-cc .kj-comp-card__logo.kj-cc__logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 auto;
  flex: none;
  border-radius: var(--kj-b1-r-md);
  border: 3px solid #fff;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: padding-box;    /* companies.css: content-box + 14px pad */
  padding: 0;
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4, 30, 66, .12));
}
.kj-cc__logo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kj-b1-gradient-navy);
  color: #fff;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 25.84px;                /* 0.38 x 68 */
  line-height: 1;
  text-decoration: none;
}

.kj-cc .kj-comp-card__name.kj-cc__name {
  margin: 10px 0 0;
  padding: 0;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--kj-b3-title, #041E42);
}
.kj-cc__name a { color: inherit; text-decoration: none; }
.kj-cc__name a:hover { text-decoration: none; }

.kj-cc .kj-comp-card__line.kj-cc__line {
  margin: 3px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
  color: var(--kj-b3-muted, #6B7890);
}

/* -- match reasons (2026-10-10, KJCompanyCard `hasMatch`; /kompanite?tab=explore) --
   "why this came up: the preferences it actually matched": a wrapping, centred row
   9px under the line, chips h23 · padding 0 9 0 7 · success-bg / #0F7A50 · 11.5/700
   with an 11px check (measured on the bundle: "1 pozitë që të përshtatet" 165×23). */
.kj-cc .kj-cc__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 9px;
}
.kj-cc .kj-cc__reason {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 23px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  background: var(--kj-b3-success-bg, #E7F6EF);
  color: var(--kj-b1-green-tx, #0F7A50);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.kj-cc .kj-cc__reason svg { flex: none; }

.kj-cc .kj-comp-card__stats.kj-cc__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 16px 0 14px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.kj-cc .kj-comp-card__stats.kj-cc__stats--2 { grid-template-columns: 1fr 1fr; }

.kj-cc .kj-comp-card__stat.kj-cc__stat { padding: 0; border: 0; }
/* the design puts the dividers on the MIDDLE cell, not between all three */
.kj-cc .kj-cc__stats > .kj-comp-card__stat.kj-cc__stat:nth-child(2) {
  border-left: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-right: 1px solid var(--kj-b3-stroke, #E2E7EF);
}
/* no `hires` source -> a two-cell row: one divider, and a little room so the
   figures do not touch it (the three-cell row is the artboard's own metric) */
.kj-cc .kj-cc__stats--2 > .kj-comp-card__stat.kj-cc__stat:nth-child(2) { border-right: 0; }
.kj-cc .kj-cc__stats--2 > .kj-comp-card__stat.kj-cc__stat { padding: 0 14px; }
.kj-cc .kj-cc__stat b {
  display: block;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 18px;
  line-height: 27px;
  color: var(--kj-coral-600, #EE4753);
}
.kj-cc .kj-cc__stat span {
  display: block;
  margin: 0;                         /* companies.css: margin-top 4px */
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--kj-b3-muted, #6B7890);
}
/* a company the /kompanite search found by its NAME, with no live ad (go-live 2026-10-21): the openings cell holds
   "Nuk ka pozita të hapura tani" / "No open positions right now" in the label's face, centred in the row's height
   (the figure + label beside it) instead of a "0" */
.kj-cc .kj-comp-card__stat.kj-cc__stat--none {
  display: flex;
  align-items: center;
  justify-content: center;
}
.kj-cc .kj-cc__stat--none span { line-height: 16px; }

.kj-cc .kj-comp-card__actions.kj-cc__actions {
  display: flex;
  flex-direction: row;               /* companies.css stacks them in a column */
  flex-wrap: nowrap;                 /* KJCompanyCard: one row, never stacked */
  gap: 8px;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
}
.kj-cc .kj-cc__follow,
.kj-cc .kj-cc__rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all .2s;
  -webkit-appearance: none;
  appearance: none;
}
.kj-cc .kj-cc__follow:hover, .kj-cc .kj-cc__rate:hover { filter: brightness(.97); }

/* -- follow ---------------------------------------------------------------
   saveSubscribe.php answers with a bare label and the page handler does
   .html(data), which would wipe an inline <svg> AND print translation 685/686
   ("Follow"/"Unfollow", English in BOTH languages). So the icon is a ::before
   and the word is an ::after, both switched on the `type` attribute the same
   handler maintains; the server-rendered text node is the no-CSS fallback and
   is collapsed here. Same transport Batch 3 used for .kj-jcard__ver. */
.kj-cc .kj-cc__follow {
  position: relative;
  width: auto;
  min-width: 0;                      /* company.css .followCompanyBtn: 176px */
  box-shadow: none;                  /* …and its accent shadow */
  border: 1.5px solid var(--kj-coral-300, #FF9D96);
  background: #fff;
  color: var(--kj-coral-600, #EE4753);
  font-weight: 800;
  font-size: 0;                      /* collapse the injected text node */
}
/* Every selector below carries `.kj-cc` + an attribute so it outranks the
   page-level `.followCompanyBtn[type="1"]::before` / `[data-lbl]::after`
   rules in company.css (header CTA: 16px white plus, 15px label) that
   otherwise leak into these cards on the company profile — the plus came out
   white-on-white and the label 15px (2026-09-16). */
.kj-cc .kj-cc__follow::before,
.kj-cc .kj-cc__follow[type="1"]::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--kj-cc-follow-ico) center / 15px 15px no-repeat;
  mask: var(--kj-cc-follow-ico) center / 15px 15px no-repeat;
  --kj-cc-follow-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.kj-cc .kj-cc__follow::after,
.kj-cc .kj-cc__follow[data-lbl]::after { content: attr(data-lbl); font-size: 14px; font-weight: 800; line-height: 1; }
.kj-cc .kj-cc__follow[type="2"] {
  border-color: var(--kj-b3-success, #1E9E6A);
  background: var(--kj-b3-success-bg, #E7F6EF);
  color: #0F7A50;                    /* KJCompanyCard following state */
}
.kj-cc .kj-cc__follow[type="2"]::before {
  background: currentColor;
  --kj-cc-follow-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.kj-cc .kj-cc__follow[type="2"]::after,
.kj-cc .kj-cc__follow[data-lbl][type="2"]::after { content: attr(data-lbl-on); }

.kj-cc .kj-cc__rate {
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  background: #fff;
  color: var(--kj-b3-title, #041E42);
  font-weight: 700;
  padding: 0 16px;
}
.kj-cc .kj-cc__rate:hover {
  border-color: var(--kj-coral-300, #FF9D96);
  color: var(--kj-coral-600, #EE4753);
  background: var(--kj-coral-50, #FFF1EF);
}
.kj-cc__rate svg { flex: none; }
.kj-cc__rate img { display: none; }

/* ============================================================================
   3. KJSearchBox
   ============================================================================ */

.kj-sb-wrap { position: relative; }

.kj-search.kj-sb {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: var(--kj-b1-r-xl);
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4, 30, 66, .12));
  overflow: visible;
  height: auto;                      /* base.css pins .kj-search to 64px */
  min-height: 0;
  gap: 0;
}
.kj-sb-wrap--dark .kj-search.kj-sb {
  border-color: rgba(255, 255, 255, .4);
  box-shadow: var(--kj-shadow-xl, 0 30px 70px -20px rgba(4, 30, 66, .28));
}
.kj-sb__row { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* ---- the AI badge -----------------------------------------------------------
   2026-09-23: "Filtro" (keyword / industry / city) was removed from the
   homepage box, so the old AI | Filtro switch (a 172px track of two 40px tabs)
   became one static badge: a <label> for the field (a click focuses it),
   smaller than the old tab, carrying the gradient sparkle that used to sit
   inside the field — the phrase starts right after it. Phones: see the 620px
   block (32px badge, 4px lead-in). */
.kj-sb__badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 10px;
  margin: 0;
  border-radius: 999px;
  background: var(--kj-coral-50, #FFF1EF);
  box-shadow: inset 0 0 0 1px var(--kj-coral-100, #FFE0DC);
  color: var(--kj-coral-600, #EE4753);
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  cursor: text;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.kj-sb__badge .kj-sb__spark { width: 16px; height: 16px; }

/* ---- AI field ------------------------------------------------------------ */
.kj-search__ai.kj-sb__ai {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 0 0 10px;
  margin: 0;
  border: 0;
  background: none;
}
.kj-sb__spark { flex: none; animation: kjGlow 3s ease-in-out infinite; }
.kj-sb .kj-sb__ai input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 48px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 16px;                   /* never below 16: iOS zooms on focus */
  color: var(--kj-b3-title, #041E42);
  box-shadow: none;
  text-overflow: ellipsis;           /* a long placeholder ends in "…" on phones */
}
.kj-sb .kj-sb__ai input::placeholder { color: var(--kj-b3-muted, #6B7890); opacity: 1; }
/* 2026-10-21 (operator: "when you click the search field there is this on:focus border — remove that border"): the
   borderless fields INSIDE the search pill draw no focus ring of their own. base.css gives every focused input a 4px
   coral ring (body:has(.kj-nav-wrap) input:focus, specificity 0,2,2), which drew a rectangle inside the pill; these
   selectors (0,3,1) win. The caret marks focus in the field; every other form field keeps the ring. */
.kj-sb .kj-sb__ai input:focus,
.kj-sb .kj-sb__field input:focus { outline: 0; box-shadow: none; }

/* ---- companies field group ----------------------------------------------- */
.kj-sb__co {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.kj-sb__div { width: 1px; height: 24px; flex: none; background: var(--kj-b3-stroke-2, #CBD3E0); }

.kj-sb .kj-fseg.kj-sb__field {
  flex: 1.3;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  margin: 0;
  border: 0;
  background: none;
}
.kj-sb__co .kj-fseg.kj-sb__field { flex: 1.4; }
.kj-sb__field > svg { flex: none; color: var(--kj-b3-faint, #9BA7BC); }
.kj-sb__co .kj-sb__field > svg { color: var(--kj-coral-500, #FE616C); }
.kj-sb .kj-sb__field input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 15px;
  color: var(--kj-b3-title, #041E42);
  box-shadow: none;
}
.kj-sb .kj-sb__co .kj-sb__field input { font-size: 16px; }
.kj-sb .kj-sb__field input::placeholder { color: var(--kj-b3-muted, #6B7890); opacity: 1; }

.kj-sb__clear {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--kj-b3-page, #F6F8FB);
  color: var(--kj-b3-muted, #6B7890);
  cursor: pointer;
}
.kj-sb__clear[hidden] { display: none; }
.kj-sb__clear:hover { background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-600, #EE4753); }
.kj-sb__co .kj-sb__clear { width: 34px; height: 34px; }

/* ---- dropdown trigger ---------------------------------------------------- */
.kj-sb .kj-fseg.kj-sb__dd {
  position: static;                  /* the panel spans the whole box */
  flex: 1;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.kj-sb__sel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); }
.kj-sb__trig {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--kj-b1-r-lg);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  transition: background .2s;
  -webkit-appearance: none;
  appearance: none;
}
.kj-sb__trig:hover,
.kj-sb__dd.is-open .kj-sb__trig { background: var(--kj-b3-page, #F6F8FB); }
.kj-sb__trig > svg:first-child { flex: none; color: var(--kj-b3-faint, #9BA7BC); }
.kj-sb__trigtxt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 400;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-sb__trig.is-set .kj-sb__trigtxt { color: var(--kj-b3-title, #041E42); font-weight: 600; }
.kj-sb__chev {
  flex: none;
  color: var(--kj-b3-muted, #6B7890);
  transition: transform .25s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1));
}
.kj-sb__dd.is-open .kj-sb__chev { transform: rotate(180deg); }

/* ---- dropdown (companies scope) ------------------------------------------ */
.kj-sb__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: var(--kj-b1-r-lg);
  box-shadow: var(--kj-shadow-xl, 0 30px 70px -20px rgba(4, 30, 66, .28));
  padding: 14px 8px 8px;
  animation: kjScaleIn .22s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
  text-align: left;
}
.kj-sb__panel   { max-height: min(420px, 60vh); }
/* the dropdown's own head (title + Pastro) — was .kj-sb__phead, shared with the
   old recents list until 2026-09-27 */
.kj-sb__dhead { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 10px; }
.kj-sb__dhead > span { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kj-b3-muted, #6B7890); }
.kj-sb__dhead button { border: 0; background: transparent; color: var(--kj-coral-600, #EE4753); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; }
.kj-sb__dhead button:hover { text-decoration: underline; }

/* ---- the search panel (kj_searchbox_panel) — the operator's mock, ONE design
   at every width since 2026-09-27 (desktop: "the same things in search,
   trending and your searches"): a pill track with two tabs, rows with a 30px
   grey tile and the count on the right, the source line, and a "Pastro
   kërkimet e mia" footer under a hairline. Desktop (@900) lays the rows in
   two columns so they do not stretch across the whole box. ------------------ */
.kj-sb__recents {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 60;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 22px;
  box-shadow: 0 24px 60px -18px rgba(4, 30, 66, .30);
  padding: 12px;
  max-height: min(560px, 74vh);
  animation: kjScaleIn .22s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
  text-align: left;
}

.kj-sb__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.kj-sb__grid[data-two] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kj-sb__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--kj-b3-title, #041E42);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  transition: background .15s;
}
.kj-sb__opt:hover { background: var(--kj-b3-page, #F6F8FB); }
.kj-sb__opt.is-on {
  background: var(--kj-coral-50, #FFF1EF);
  color: var(--kj-coral-700, #CE3340);
  font-weight: 700;
}
.kj-sb__opt.is-on svg { color: var(--kj-coral-600, #EE4753); flex: none; }
.kj-sb__optlbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-sb__optn { flex: none; font-size: 12px; color: var(--kj-b3-faint, #9BA7BC); font-variant-numeric: tabular-nums; }

.kj-sb__rrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--kj-b3-title, #041E42);
}
.kj-sb__rrow:hover { background: var(--kj-b3-page, #F6F8FB); text-decoration: none; }
.kj-sb__rico { display: inline-flex; flex: none; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 9px; background: var(--kj-b3-sunken, #EEF1F6); color: var(--kj-b3-muted, #6B7890); }
.kj-sb__ico-redo { display: block; }
/* [hidden] always wins here, so the runtime can switch panes whatever display
   a rule gives them */
.kj-sb__recents [hidden] { display: none !important; }
.kj-sb__ptabs { display: flex; gap: 4px; margin: 0 0 8px; padding: 4px; border-radius: 999px; background: var(--kj-b3-sunken, #EEF1F6); }
.kj-sb__ptab { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--kj-b3-muted, #6B7890); font-family: var(--kj-font-mulish, inherit); font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.kj-sb__ptab span { overflow: hidden; text-overflow: ellipsis; }
.kj-sb__ptab svg { flex: none; }
.kj-sb__ptab:hover { color: var(--kj-b3-title, #041E42); }
.kj-sb__ptab[aria-selected="true"] { background: #fff; color: var(--kj-coral-600, #EE4753); box-shadow: 0 2px 10px rgba(4, 30, 66, .10); }
.kj-sb__trows { display: block; }
.kj-sb__rq { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-sb__rn { flex: none; font-size: 13px; color: var(--kj-b3-faint, #9BA7BC); }
.kj-sb__rempty { display: block; margin: 0; padding: 18px 12px 14px; text-align: center; font-size: 14px; color: var(--kj-b3-muted, #6B7890); }
.kj-sb__tnote { margin: 6px 8px 2px; font-size: 12px; color: var(--kj-b3-faint, #9BA7BC); }
.kj-sb__pfoot { display: block; margin: 6px -12px -4px; padding: 4px 12px 0; border-top: 1px solid var(--kj-b3-stroke, #E2E7EF); }
.kj-sb__pclear { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border: 0; background: transparent; color: var(--kj-coral-600, #EE4753); font-family: var(--kj-font-mulish, inherit); font-size: 14.5px; font-weight: 700; cursor: pointer; }
.kj-sb__pclear:hover { text-decoration: underline; }
@media (min-width: 900px) {
  /* desktop: the box is ~1136px wide — a compact tab track, the rows in two
     columns (history and trending alike), a little more air */
  .kj-sb__recents { padding: 14px 16px; }
  .kj-sb__ptabs { max-width: 440px; margin-bottom: 10px; }
  .kj-sb__rrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .kj-sb__tnote { grid-column: 1 / -1; }
  .kj-sb__pfoot { margin: 8px -16px -6px; padding: 4px 16px 0; }
  .kj-sb__pclear { width: auto; margin: 0 auto; padding: 0 18px; }
}

/* ---- submit -------------------------------------------------------------- */
.kj-search__submit.kj-sb__go {
  flex: none;
  width: auto;                       /* base.css pins it to 48px */
  height: 48px;
  min-width: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45));
  transition: transform .15s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)), box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.kj-search__submit.kj-sb__go:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px rgba(254, 97, 108, .55);
}
.kj-sb__golbl {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.kj-sb-wrap--compact .kj-search__submit.kj-sb__go { padding: 0 14px; }
/* The AI search icon (.kj-sb__goico*, magnifier + sparkle + dot) and its
   twinkle live in base.css since 2026-09-27 — the homepage, /kompanite and
   /blog all use it. The 620px block below swaps it in on the jobs box. */
/* set by the submit handler for the round-trip; cleared on pageshow (bfcache) */
.kj-search__submit.kj-sb__go.is-busy { position: relative; pointer-events: none; }
.kj-search__submit.kj-sb__go.is-busy > svg,
.kj-search__submit.kj-sb__go.is-busy > .kj-sb__golbl { visibility: hidden; }
.kj-search__submit.kj-sb__go.is-busy::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  animation: kjSpin .7s linear infinite;
}

/* ---- "Provo:" chips ------------------------------------------------------ */
.kj-hero__chips.kj-sb__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.kj-sb__chipslbl {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-sb-wrap--dark .kj-sb__chipslbl { color: rgba(255, 255, 255, .7); }
.kj-chip.kj-sb__chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 999px;
  background: #fff;
  color: var(--kj-b3-body, #313C53);
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: all .2s;
}
.kj-chip.kj-sb__chip:hover {
  border-color: var(--kj-coral-300, #FF9D96);
  color: var(--kj-coral-700, #CE3340);
  background: var(--kj-coral-50, #FFF1EF);
  text-decoration: none;
}
.kj-sb-wrap--dark .kj-chip.kj-sb__chip {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
/* "Provo:" rotation (2026-10-01): kj_searchbox_chips_rotate_js() swaps the five
   names on desktop — out (fade up), swap, in (from below), staggered by --i.
   The stagger is on opacity/transform only, so hover colours stay instant. */
.kj-sb__chips[data-kj-chips-pool] .kj-sb__chip {
  transition: opacity .26s ease calc(var(--i, 0) * 50ms), transform .26s ease calc(var(--i, 0) * 50ms), border-color .2s, color .2s, background .2s;
}
.kj-sb__chips.is-out .kj-sb__chip {
  opacity: 0;
  transform: translateY(-6px);
}
.kj-sb__chips.is-in .kj-sb__chip {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}
.kj-chip.kj-sb__chip[hidden] { display: none; }

/* ============================================================================
   4. KJShare
   ============================================================================ */

html.kj-shr-lock { overflow: hidden; }

.kj-shr {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.kj-shr[hidden] { display: none; }
.kj-shr__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 30, 66, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: kjFade .25s both;
}
.kj-shr__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 26px 26px 24px;
  background: #fff;
  border-radius: var(--kj-b1-r-xl);
  box-shadow: var(--kj-shadow-xl, 0 30px 70px -20px rgba(4, 30, 66, .28));
  animation: kjScaleIn .3s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-shr__x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 50%;
  background: #fff;
  color: var(--kj-b3-muted, #6B7890);
  cursor: pointer;
}
.kj-shr__x:hover { background: var(--kj-b3-page, #F6F8FB); color: var(--kj-b3-title, #041E42); }
.kj-shr__t {
  margin: 0 0 4px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--kj-b3-title, #041E42);
}
.kj-shr__sub {
  margin: 0 0 18px;
  padding-right: 36px;
  font-size: 14px;
  color: var(--kj-b3-muted, #6B7890);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kj-shr__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kj-shr__tg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 4px 10px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--kj-b3-body, #313C53);
  transition: background .18s;
}
.kj-shr__tg:hover { background: var(--kj-b3-page, #F6F8FB); text-decoration: none; }
.kj-shr__disc {
  width: 48px;
  height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4, 30, 66, .07));
}
.kj-shr__lbl { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; }

/* triggers */
.kj-shr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  background: #fff;
  color: var(--kj-b3-body, #313C53);
  cursor: pointer;
  transition: all .2s;
  -webkit-appearance: none;
  appearance: none;
}
.kj-shr-btn:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); background: var(--kj-coral-50, #FFF1EF); }
.kj-shr-btn--circle  { width: 42px; height: 42px; border-radius: 50%; padding: 0; }
.kj-shr-btn--outline { height: 40px; padding: 0 16px; border-radius: 999px; font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 14px; font-weight: 700; }

.kj-shr-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 170;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--kj-b3-navy, #041E42);
  color: #fff;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--kj-shadow-lg, 0 18px 40px -12px rgba(4, 30, 66, .18));
  animation: kjToast .25s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-shr-toast[hidden] { display: none; }

/* ---- KJHeroTitle: the animated headline (kj-hero-title.php) ---------------
   Shared by the homepage and /kompanite (moved here from home.css 2026-09-27). */
/* shown once the script (kj-hero-title.php, 2026-09-27) has added .is-rot —
   script has added .is-rot. ONE line at every width: on phones short phrases
   (navy lead, coral word, navy full stop), on wider screens the whole brand
   sentence with only the coral word swapping. The parts that change swap:
   out = up + fade + blur (.24s), in = rise from below while the part's width
   eases to the new word (.38s), so whatever follows glides. The h1's text
   (the brand line) stays for screen readers; the script only lowers
   --kj-rot-fs (one size for all phrases) where the longest would not fit. */
.kj-hero__rot { display: none; }
.kj-hero__rotm { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: nowrap; font-size: 100px; }
.kj-hero__title.is-rot .kj-hero__still { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* home-lists-18 (2026-10-16): the rotor's line box is the headline's — 1.08, so a swapped word sits in
   the design's 47.5px line (it was 1.2 = 52.8 at 44px). The rise (-.35em) and the .4em entry stay inside it. */
.kj-hero__title.is-rot .kj-hero__rot { display: flex; align-items: baseline; height: 1.08em; white-space: nowrap; font-size: var(--kj-rot-fs, 1em); line-height: 1.08; }
.kj-hero__part { display: inline-block; white-space: pre; transition: width .38s cubic-bezier(.22, .61, .36, 1), opacity .38s cubic-bezier(.22, .61, .36, 1), transform .38s cubic-bezier(.22, .61, .36, 1), filter .38s; }
.kj-hero__part em { font-style: normal; color: var(--kj-coral-600, #EE4753); }
.kj-hero__part.is-out { opacity: 0; transform: translateY(-.35em); filter: blur(3px); transition-duration: .24s; transition-timing-function: ease-in; }
.kj-hero__part.is-pre { opacity: 0; transform: translateY(.4em); filter: blur(3px); transition: none; }
/* 'login' set (2026-10-05): a second line that never changes, under the animated one. Only
   with the script — without it the h1's own text is the whole sentence. It takes the size the
   script gives the animated line, so the two never differ. */
.kj-hero__after { display: none; }
.kj-hero__title.is-rot .kj-hero__after { display: block; font-size: var(--kj-rot-fs, 1em); }

/* ============================================================================
   5. Responsive — the bundle's data-* intent
   ============================================================================ */
@media (max-width: 860px) {
  .kj-sb__row { flex-wrap: wrap; }
  .kj-sb__co { flex: 1 1 100%; flex-wrap: wrap; }
  .kj-sb .kj-fseg.kj-sb__field,
  .kj-sb .kj-fseg.kj-sb__dd { flex: 1 1 100%; }
  .kj-sb__div[data-hide-phone] { display: none; }
  .kj-sb__grid[data-two] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  /* phones (2026-09-27, operator request): no "Provo:" row — the panel's "Më të
     kërkuarat" tab does that job now. Desktop keeps the chips (crawlable /?q= links). */
  .kj-hero__chips.kj-sb__chips { display: none; }
  .kj-sb__golbl[data-hide-m] { display: none; }
  /* phones (2026-09-26): no "AI" badge — it cost the phrase ~70px. The AI cue
     moves onto the submit, now a round 48px button with the AI search icon;
     the phrase starts 20px from the box edge (8 box padding + 12). */
  .kj-sb__badge { display: none; }
  .kj-search__ai.kj-sb__ai { padding-left: 12px; }
  .kj-search__submit.kj-sb__go.kj-sb__go--ai { width: 48px; padding: 0; }
  .kj-sb__go--ai .kj-sb__goico--plain { display: none; }
  .kj-sb__go--ai .kj-sb__goico--ai { display: block; }
  .kj-shr__panel { padding: 22px 18px 20px; border-radius: 24px; }
  .kj-shr__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .kj-shr__disc { width: 44px; height: 44px; }
  .kj-shr__lbl { font-size: 11.5px; }
  .kj-cc .kj-cc__stats--2 > .kj-comp-card__stat.kj-cc__stat { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .jobListCnts.kj-jc,
  .kj-comp-card.kj-cc,
  .kj-jc-banner { transition: none; }
  .jobListCnts.kj-jc:hover,
  .kj-comp-card.kj-cc:hover,
  .kj-jc-banner:hover { transform: none; }
  .kj-jc--in, .kj-cc--in, .kj-sb__panel, .kj-sb__recents,
  .kj-shr__panel, .kj-shr__scrim, .kj-shr-toast,
  .kj-sb__spark, .kj-jc__save svg.kj-pop { animation: none !important; }
  /* the "E re" pill's sheen and dot ring stop (2026-10-10; the rules are next to the badge rules) */
  .kj-jc .kj-jc__new-sheen, .kj-jc .kj-jc__new-dot { animation: none !important; }
  .kj-hero__part { transition: none; }
}