/* ============================================================
   KosovaJob redesign — Companies directory (kompanite.php)
   Figma: desktop 610:58042 (Companies 1512x2346), mobile 610:58077
   (393x3598). Loads on top of new-ui/tokens.css + base.css only.
   ============================================================ */

/* ---------- Page column ----------
   Batch-1 KJCompanies: wrap max-width 1200 / padding 32px 32px 8px (hero) or
   24px 32px 80px (results) -> 1136 content column, same as the header/footer
   (--kj-b1-container). Replaces the older PDF-p26-sourced 1400px wrap. */
.kj-comp-hero .kj-container,
.kj-comp-main .kj-container {
  max-width: var(--kj-b1-container, 1200px);
  padding-left: 32px;
  padding-right: 32px;
}

/* ---------- Page ground + hero glow (2026-09-15) ----------
   KJCompanies has no background of its own: it sits on the Root's --bg-page
   (#FFFEFD) and draws the SAME two masked radial circles the homepage draws
   (top:-72px behind the translucent header, 900px tall, fading out at 78%).
   Values are the bundle's inline styles, identical to home.css's .kj-bg. */
body.kj-comp-page { background: var(--kj-b1-page, #FFFEFD); }
.kj-comp-page .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-comp-page .kj-bg::before,
.kj-comp-page .kj-bg::after {
  content: '';
  position: absolute;
  width: 820px;
  height: 820px;
  border-radius: 50%;
}
.kj-comp-page .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-comp-page .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 ----------
   Bundle rhythm: hero wrap padding 32px 32px 8px (title, pill, then the chip
   row at margin-top 14 INSIDE the hero) -> results wrap padding 24px 32px
   80px. Here the chips live in .kj-comp-main, so the numbers are folded:
   pill -> chips = 14 (hero 0 + main 14), chips -> results bar = 32 (8 + 24). */
.kj-comp-hero {
  text-align: left;
  padding: 32px 0 0;
  position: relative;
  z-index: 5;
}
.kj-comp-hero__title {
  max-width: none;
  margin: 0 0 22px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--kj-b3-title, #041E42);
  text-wrap: balance;
}
.kj-comp-hero__title em {
  font-style: normal;
  background: var(--kj-b3-gradient, linear-gradient(120deg,#FFC473 0%,#FE616C 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* the animated headline (kj-hero-title.php, 2026-09-27): the swapping word is
   the homepage's solid coral — same component, same look on both pages. The
   plain h1 (no JS) keeps the gradient above. */
.kj-comp-hero__title .kj-hero__part em {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--kj-coral-600, #EE4753);
}

/* search pill (base .kj-search) — full 1136 width, left-aligned */
.kj-comp-search {
  position: relative;   /* the search panel (kj_searchbox_panel) hangs under it */
  max-width: none;
  width: 100%;
  margin: 0;
  height: 66px;
  padding: 8px 8px 8px 24px;
  gap: 10px;
  text-align: left;
  border-radius: 28px;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4,30,66,.12));
}
.kj-comp-search input { padding-left: 10px; font-size: 16px; }
.kj-comp-search .kj-search__submit {
  /* the homepage's round AI search button at every width (2026-09-27; was a
     48px "Kërko" pill on desktop). The icon and its twinkle come from cards.css. */
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
}
.kj-comp-search .kj-sb__goico--ai { display: block; }
.kj-comp-search__ico { flex: 0 0 auto; }
.kj-comp-search input::placeholder { color: var(--kj-b3-faint, #9BA7BC); font-weight: 400; }
/* no focus box around the input inside the pill (operator 2026-10-21, as on the homepage pill): (0,3,1) beats base.css's
   body:has(.kj-nav-wrap) input:focus ring (0,2,2); guest /kompanite and the signed-in .kj-ki__search form both carry these classes */
.kj-search.kj-comp-search input:focus { outline: 0; box-shadow: none; }
/* KJCompanies.clearQ: 34px disc, --surface-muted / --text-muted, coral on hover */
.kj-comp-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--kj-b3-sunken, #EEF1F6);
  color: var(--kj-b3-muted, #6B7890);
  transition: background .2s ease, color .2s ease;
}
.kj-comp-search__clear:hover { background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-600, #EE4753); }
.kj-comp-search__clear svg { display: block; }

/* ---------- Industry chips ---------- */
.kj-comp-main { position: relative; z-index: 1; padding: 28px 0 80px; }   /* 28: no chip row between the search and the results since 2026-09-27 */

/* (the "Industria:" chip row — classes kj-comp-chips / kj-comp-chip — was removed
   2026-09-27 at the operator's request, phones and desktop) */

/* ---------- Results bar ---------- */
.kj-comp-resbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.kj-comp-rescount {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--kj-b3-title, #041E42);
}
/* KJCompanies.matchNote: h28 pill, --coral-50 / --coral-700, 700 13px */
.kj-comp-matchnote {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--kj-coral-50, #FFF1EF);
  color: var(--kj-coral-700, #CE3340);
  font-family: var(--kj-font-mulish, var(--kj-font));
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.kj-comp-sortform { display: flex; }
.kj-comp-sort {
  width: 220px;
  height: 46px;
  padding: 0 36px 0 16px;
  border-radius: 14px;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  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 14px center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--kj-b3-body, #313C53);
  cursor: pointer;
}
@media (max-width: 640px) {
  .kj-comp-resbar { flex-direction: column; align-items: stretch; }
  .kj-comp-sort { width: 100%; }
}

/* ---------- Grid ----------
   PDF p26: cards 80..509 / 541..970 / 1003..1432 (pitch 461.33, w 429.33)
   => column-gap 32; rows top 662 and 1235 with card height 541 => row-gap 32 */
/* Batch-1: 3 columns, 16px gap -> 368px columns (matches KJCompanyCard's own
   368x305 measurement in cards.css). The card's real visual styling now comes
   entirely from cards.css's .kj-cc* rules — kj_company_card_html() also still
   emits the legacy .kj-comp-card* class names for selector compatibility, but
   this file no longer styles them (removed to avoid two stylesheets fighting
   over the same properties); see kj-companycard.php's header comment. */
.kj-comp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 760px)  { .kj-comp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kj-comp-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Empty state (KJCompanies.noResults) ----------
   #fff card, 1px --border-subtle, r24, pad 56px 28px, --shadow-sm; 72px
   --coral-50 disc with the --coral-500 building glyph; h 22/700 title;
   15px --text-muted hint; outline md Button "Pastro kërkimin". */
.kj-comp-empty {
  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;
  padding: 56px 28px;
}
.kj-comp-empty__ico {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: var(--kj-coral-50, #FFF1EF);
  color: var(--kj-coral-500, #FE616C);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kj-comp-empty__h {
  margin: 0 0 8px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--kj-b3-title, #041E42);
}
.kj-comp-empty p {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-comp-empty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  background: #fff;
  color: var(--kj-b3-title, #041E42);
  font-weight: 700;
  font-size: 14px;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.kj-comp-empty__btn:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); background: var(--kj-coral-50, #FFF1EF); }

/* ---------- Pagination bar ---------- */
.kj-comp-pagebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 44px;
}
.kj-comp-showing { font-size: 14px; color: #919191; }

.kj-comp-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.kj-comp-pager__num,
.kj-comp-pager__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  color: #383838;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.kj-comp-pager__arrow { padding: 0; }
a.kj-comp-pager__num:hover,
.kj-comp-pager__arrow:hover { background: #fff; box-shadow: var(--kj-shadow-xs); }
.kj-comp-pager__num.is-current {
  background: #fff;
  color: #1E1E1E;
  border: 1px solid var(--kj-stroke);
  box-shadow: var(--kj-shadow-xs);
}
.kj-comp-pager__gap { color: #919191; padding: 0 4px; font-size: 14px; }

/* ---------- Responsive ----------
   The headline is the design's shared one (KJCompanies.html:20, as KJHome / KJLogin): 44 / 1.08 from 760 up — the 48 px
   step at 760-1099 is gone — and [data-h1]'s 28 px on phones (root.x-dc.txt:179; home.css:723 does the same), 2026-10-18 */
/* ---------- Mobile (PDF p25, 393x3598) ---------- */
@media (max-width: 759px) {
  /* cards / search span x=24..369 => 345 content, 24px gutters */
  .kj-comp-hero .kj-container,
  .kj-comp-main .kj-container { padding: 0 24px; }

  /* bundle <=767: the hero wrap keeps its 32px top, [data-h1] -> 28px (the line stays 1.08, -.03em: KJCompanies.html:20),
     [data-wrap] gutters 20px, [data-sec-end] -> 56px bottom */
  .kj-comp-hero { padding: 32px 0 0; }
  .kj-comp-hero__title { font-size: 28px; line-height: 1.08; letter-spacing: -.03em; }
  .kj-comp-search { margin-top: 22px; height: 64px; padding: 8px 8px 8px 20px; gap: 10px; }
  .kj-comp-search__ico { width: 22px; height: 22px; }

  .kj-comp-main { padding-top: 24px; padding-bottom: 56px; }

  .kj-comp-pagebar {
    flex-direction: column;
    justify-content: center;
    margin-top: 36px;
    gap: 14px;
  }
  .kj-comp-showing { font-size: 13px; }
  .kj-comp-pager { justify-content: center; }
}

/* ============================================================
   SIGNED IN (2026-10-10) — kompanite-in.php: the 2026-10-09 design's
   KJUserCompanies (operator: "this isnt like in the new design"), i.e. this
   page's layout + the signed-in extras, three tabs (all · mine · explore).
   Every number below is the bundle's own, measured in its render at 1440 /
   1024 / 390 (scratchpad wf-kompanite/design-measures.md): wrap 1280 with
   32 32 48; headline 40/800 lh 1.1 -.03em, 20 under it; the box a 66px pill
   (r999, padding 8, gap 8, icon 21 at +21); the explore card r20 14 18; the
   filter row chips h38 0 16 13.5/700 + "N kompani" 13.5 muted + a 200×46 r10
   select; the grid 3 × gap 14 (align stretch, the actions at the foot); the
   dashed empty box. The reason chips are the card's (cards.css section 2).
   House breakpoints 1099 / 759 for the design's 899 / 767 (base.css data-*).
   Scoped to .kj-ki / body.kj-comp-in: the guest page above is untouched.
   ============================================================ */
body.kj-comp-page.kj-comp-in { background: var(--kj-b3-page, #F6F8FB); }
.kj-ki {
  position: relative;
  font-family: var(--kj-font-mulish, 'Mulish', system-ui, sans-serif);
  color: var(--kj-b3-body, #313C53);
}
/* the bundle's glow: a 620px block from 72px above the page (under the sub-nav), masked out at 78% */
.kj-ki__glow {
  position: absolute;
  top: -72px;
  left: 0;
  right: 0;
  height: 620px;
  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-ki__glow::before,
.kj-ki__glow::after {
  content: '';
  position: absolute;
  width: 820px;
  height: 820px;
  border-radius: 50%;
}
.kj-ki__glow::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-ki__glow::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%); }

/* [data-wrap] (base.css) brings the centring and the 32 / 16px gutters */
.kj-ki__wrap {
  position: relative;
  z-index: 1;
  max-width: var(--kj-b3-container, 1280px);
  padding-top: 32px;
  padding-bottom: 48px;
}

/* ---- the headline: "Kërko <në Prishtinë|…>." rotating on the shared engine
   (kj-hero-title.php), still for mine / explore / a filter; [data-h1] = 28px on phones */
.kj-ki__h1 {
  margin: 0 0 20px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--kj-b3-title, #041E42);
  text-wrap: balance;
  animation: kjFadeUp .45s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-ki__h1 em { font-style: normal; color: var(--kj-coral-600, #EE4753); }
.kj-ki .kj-ki__h1.is-rot .kj-hero__rot { height: 1.1em; line-height: 1.1; }   /* the design's 44px line (the engine's 1.2 in cards.css, which loads later) */

/* ---- the search box: the public box (.kj-comp-search, its panel, its AI button) at the design's geometry */
.kj-ki__find {
  position: relative;
  margin-bottom: 18px;
  z-index: 5;                        /* the search panel hangs over the rows below */
  animation: kjFadeUp .5s .06s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-ki .kj-ki__search {
  margin: 0;
  height: 66px;
  padding: 8px 8px 8px 20px;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  background: #fff;
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4, 30, 66, .12));
}
.kj-ki .kj-ki__search .kj-ki__ico { flex: none; width: 21px; height: 21px; margin-right: 2px; }   /* icon → field 10, the design's gap */
.kj-ki .kj-ki__search input[type="text"] {
  height: 48px;
  padding-left: 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--kj-b3-title, #041E42);
}
.kj-ki .kj-ki__search .kj-search__submit {
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  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));
}
.kj-ki .kj-ki__search .kj-search__submit:hover { filter: none; transform: translateY(-1px); }

/* ---- Eksploro: what the recommendations are built on */
.kj-ki__prefs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 20px;
  box-shadow: var(--kj-b3-shadow-xs, 0 1px 2px rgba(4, 30, 66, .06));
  margin-bottom: 14px;
}
.kj-ki__prefs-main { min-width: 0; max-width: 100%; }
.kj-ki__prefs-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 14px;
  line-height: 21px;
  color: var(--kj-b3-title, #041E42);
}
.kj-ki__prefs-title svg { flex: none; }
.kj-ki__prefs-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kj-ki__pchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  max-width: 100%;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--kj-b3-page, #F6F8FB);
  color: var(--kj-b3-body, #313C53);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.kj-ki__pchip > span { flex: none; color: var(--kj-b3-faint, #9BA7BC); font-weight: 600; }
.kj-ki__pchip > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: inherit; }
.kj-ki__pchip > i { flex: none; margin-left: -1px; font-style: normal; }
.kj-ki__prefs-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--kj-b3-muted, #6B7890); }   /* where the chips would be */
.kj-ki__prefs-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  background: #fff;
  color: var(--kj-b3-title, #041E42);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.kj-ki__prefs-btn:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-700, #CE3340); text-decoration: none; }
.kj-ki__prefs-btn svg { flex: none; }

/* ---- the filter row: industry chips · "N kompani" · the order, on ONE line */
.kj-ki__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.kj-ki__chips {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;                  /* without the script the row scrolls; with it, it fits */
  scrollbar-width: none;
}
.kj-ki__chips::-webkit-scrollbar { display: none; }
.kj-ki__chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  background: #fff;
  color: var(--kj-b3-title, #041E42);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.kj-ki__chip[hidden] { display: none; }
.kj-ki__chip:hover { color: var(--kj-b3-title, #041E42); text-decoration: none; }
.kj-ki__chip.is-active {
  background: var(--kj-b3-navy, #041E42);
  border-color: var(--kj-b3-navy, #041E42);
  color: #fff;
}
.kj-ki__right { display: flex; align-items: center; gap: 12px; flex: none; }
.kj-ki__count {
  font-size: 13.5px;
  color: var(--kj-b3-muted, #6B7890);
  white-space: nowrap;
}
.kj-ki__sortform { display: flex; margin: 0; }
.kj-ki__sort { width: 200px; }
/* the design system's Select: h46, 0 42 0 16, 1.5px #CBD3E0, r10, 15px, the 18px chevron at right 14 */
.kj-ki__select {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 42px 0 16px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7890' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--kj-b3-title, #041E42);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.kj-ki__select:focus { outline: none; border-color: var(--kj-coral-400, #FE8079); box-shadow: var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30)); }

/* ---- the grid: 3 / 2 (≤1099) / 1 (≤759) via [data-cols-3]; one height per row, the buttons at the foot */
.kj-ki__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.kj-ki .kj-comp-card.kj-cc { display: flex; flex-direction: column; }
.kj-ki .kj-comp-card.kj-cc .kj-cc__cover { flex: none; }
.kj-ki .kj-comp-card.kj-cc .kj-cc__body { flex: 1 1 auto; }
.kj-ki .kj-cc .kj-comp-card__actions.kj-cc__actions { margin-top: auto; }
.kj-ki .kj-cc .kj-cc__follow.is-busy { opacity: .6; cursor: progress; }
/* the bundle's KJCompanyCard face, on THIS page only (business.php's strip, the guest page and
   every other kj_company_card_html() caller keep theirs — cards.css section 2 is untouched):
   the figures 20/800 lh 30 in a two-cell grid up to 230 wide (the design: 115 + 115), the two
   pills in the body face, and the follow pill as icon · 7 · word (the shared pill has the
   collapsed text node between its two pseudo-elements, i.e. two 7px gaps). */
.kj-ki .kj-cc .kj-comp-card__stats.kj-cc__stats { width: 100%; max-width: 300px; }
.kj-ki .kj-cc .kj-comp-card__stats.kj-cc__stats--2 { max-width: 230px; }
.kj-ki .kj-cc .kj-cc__stats--2 > .kj-comp-card__stat.kj-cc__stat { padding: 0; }
.kj-ki .kj-cc .kj-cc__stat b { font-size: 20px; line-height: 30px; }
.kj-ki .kj-cc .kj-cc__follow,
.kj-ki .kj-cc .kj-cc__rate { font-family: inherit; }   /* the design's buttons are the body face (Mulish), the shared card's Plus Jakarta Sans */
.kj-ki .kj-cc .kj-cc__follow { gap: 0; }
.kj-ki .kj-cc .kj-cc__follow::before,
.kj-ki .kj-cc .kj-cc__follow[type="1"]::before { margin-right: 7px; }
/* "Kompanitë e mia": an unfollowed card leaves */
.kj-ki .kj-comp-card.kj-cc.is-leaving { opacity: 0; transform: scale(.97); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }

/* ---- the empty states (the bundle's dashed box) */
.kj-ki__empty {
  padding: 40px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 20px;
  color: var(--kj-b3-muted, #6B7890);
  font-size: 14.5px;
}
.kj-ki__empty[hidden] { display: none; }

@media (max-width: 759px) {
  /* [data-stack-start] makes the rows columns; the chip row stays the wrap's width so it can scroll */
  .kj-ki__chips { align-self: stretch; max-width: 100%; }
  .kj-ki__right { align-self: stretch; }
  .kj-ki__sortform { flex: 1 1 auto; min-width: 0; }
  .kj-ki__sort { width: 100%; }
  .kj-ki .kj-ki__search { height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .kj-ki__h1, .kj-ki__find { animation: none; }
  .kj-ki .kj-comp-card.kj-cc.is-leaving { transition: none; }
}

/* ============================================================
   FIX ROUND (2026-10-10, after the three verifications) — the bundle's
   KJCompanyCard details on THIS page only (.kj-ki), the "+N" chip that
   keeps every industry reachable, the "Menaxho njoftimet" bell and its
   dialog (body.kj-comp-in). The guest page and every other
   kj_company_card_html() caller are untouched (cards.css section 2 too).
   ============================================================ */

/* ---- the card: the design's tag on EVERY cover (KJCompanyCard hasTag): 12 / 12 from the
   corner, h24, r8, dark glass with a hairline, the body face 10.5/800 .07em, white. The shared
   card keeps its frosted chip (logo-bloom handoff, 2026-09-17) everywhere else. */
.kj-ki .kj-cvr__ind {
  top: 12px;
  height: 24px;
  padding: 0 11px;
  border-radius: 8px;
  background: rgba(4, 30, 66, .62);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(4, 30, 66, .5);
  color: #fff;
  font-family: inherit;
  letter-spacing: .07em;
  max-width: calc(100% - 120px);
}
/* the verified badge inherits the body face in the design (the shared card's is Plus Jakarta Sans) */
.kj-ki .kj-cc__ver { font-family: inherit; }
/* only the follow pill brightens on hover in the design; Vlerëso just recolours */
.kj-ki .kj-cc .kj-cc__rate:hover { filter: none; }
/* the whole card opens the company (KJCompanyCard: role=link, cursor pointer): the name link is
   stretched over the body (a real link — middle-click and "open in new tab" work); the pill, the
   bell and Vlerëso sit above it and keep their own handlers; the cover and the logo are links
   of their own already */
.kj-ki .kj-comp-card.kj-cc { cursor: pointer; }
.kj-ki .kj-cc .kj-cc__name a { cursor: pointer; }
.kj-ki .kj-cc .kj-cc__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.kj-ki .kj-cc .kj-comp-card__actions.kj-cc__actions {
  position: relative;
  z-index: 2;
}
/* "industry · city" keeps to one line (a 13-city line made its whole grid row 39px taller) */
.kj-ki .kj-cc .kj-comp-card__line.kj-cc__line {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "Menaxho njoftimet" ("Kompanitë e mia" only, kj_company_card_html option 'manage'): a 38px
   disc in the Vlerëso recipe between the pill and Vlerëso — the old /my-companies cog, which was
   the only place a follower could change followers.subscriptionPackage */
.kj-ki .kj-cc .kj-cc__manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  background: #fff;
  color: var(--kj-b3-title, #041E42);
  cursor: pointer;
  transition: all .2s;
}
.kj-ki .kj-cc .kj-cc__manage:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); background: var(--kj-coral-50, #FFF1EF); }
.kj-ki .kj-cc .kj-cc__manage:focus-visible { outline: none; box-shadow: var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30)); }
.kj-ki .kj-cc .kj-cc__manage svg { display: block; }

/* ---- the chip row from 760px up: "+N" holds the chips that do not fit the one line (the script
   measures); open = the whole row, wrapped, "Më pak" — the count and the order stay at the top
   right. Phones scroll the row instead ([data-tabs-m]), nothing hidden, no "+N". */
.kj-ki__more {
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.kj-ki__more:hover { border-color: var(--kj-b3-stroke-2, #CBD3E0); background: var(--kj-b3-page, #F6F8FB); }
.kj-ki__more:focus-visible { outline: none; box-shadow: var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30)); }
.kj-ki__chips.is-open {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 8px;
  padding-top: 4px;                  /* the first line stays centred on the 46px select */
}
.kj-ki__bar.is-open { align-items: flex-start; }

/* ---- the notifications dialog: getFollowPopUp (type 1) in the legacy shells
   (.fixedPopUpCnt = the scrim, .fixedPopUpCntSub = the panel, kj_ki_dialog_shells), drawn as
   the design's modal the way rate.css builds it on this page — the navy .55 + blur 6 scrim, a
   white r28 panel, a bottom sheet on phones (the design's [data-modal] rule, 767 → house 759).
   jQuery .show() / .hide() toggle them (kj_ki_script), so both start display none. */
html.kj-ki-lock, html.kj-ki-lock body { overflow: hidden; }
body.kj-comp-in .fixedPopUpCnt {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(4, 30, 66, .55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: kjKiFade .25s both;
}
body.kj-comp-in .fixedPopUpCntSub {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 151;
  width: min(460px, calc(100% - 32px));
  max-height: 90vh;
  overflow: auto;
  padding: 28px 26px 24px;
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--kj-shadow-xl, 0 30px 70px -20px rgba(4, 30, 66, .28));
  color: var(--kj-b3-title, #041E42);
  font-family: var(--kj-font-mulish, 'Mulish', system-ui, sans-serif);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: kjKiDlgIn .32s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
body.kj-comp-in .fixedPopUpCntSub:focus { outline: none; }
body.kj-comp-in .fixedPopUpCntSub .divider { display: none; }
body.kj-comp-in .fixedPopUpCntSub .popUpCloseBtn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 50%;
  cursor: pointer;
  background: #fff 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='%23041E42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
body.kj-comp-in .fixedPopUpCntSub .popUpCloseBtn:hover { background-color: var(--kj-b3-page, #F6F8FB); }
body.kj-comp-in .fixedPopUpCntSub .popUpCloseBtn:focus-visible { outline: none; box-shadow: var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30)); }
/* the company's logo (the script copies the card's), the title, the line under it */
body.kj-comp-in .fixedPopUpCntSubDarkCover {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  padding: 6px;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 18px;
  background-color: #fff;
  background-origin: content-box;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
body.kj-comp-in .fixedPopUpCntSubDarkCoverH {
  margin: 0 0 6px;
  padding: 0 32px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--kj-b3-title, #041E42);
}
body.kj-comp-in .fixedPopUpCntSubDarkCoverHD {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kj-b3-muted, #6B7890);
}
/* the two boxes (translation 689 / 690), each a row; the error line only when none is ticked */
body.kj-comp-in .fixedPopUpCntSubDarkCoverCnt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 14px;
  background: #fff;
  text-align: left;
}
body.kj-comp-in .fixedPopUpCntSubDarkCoverCnt label {
  font-size: 14px;
  line-height: 1.45;
  color: var(--kj-b3-body, #313C53);
  cursor: pointer;
}
body.kj-comp-in .fixedPopUpCntSubDarkCoverCnt .checkboxes {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--kj-coral-600, #EE4753);
  cursor: pointer;
}
body.kj-comp-in .fixedPopUpCntSubDarkCoverCntErr { display: none; }
body.kj-comp-in .fixedPopUpCntSub .fixedPopUpCntSubDarkCoverCntErr { border: 0; padding: 2px 4px 0; }
body.kj-comp-in .fixedPopUpCntSubDarkCoverCntErr label { font-size: 13px; font-weight: 700; color: var(--kj-coral-600, #EE4753); }
/* the save (gradient) and the secondary (outline) pills */
body.kj-comp-in .fixedPopUpCntSub .subscribeBTn,
body.kj-comp-in .fixedPopUpCntSub .subscribeBTnNoBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 44px;
  margin: 14px 4px 0;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)), border-color .2s, color .2s;
}
body.kj-comp-in .fixedPopUpCntSub .subscribeBTn {
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45));
}
body.kj-comp-in .fixedPopUpCntSub .subscribeBTn:hover { transform: translateY(-1px); }
body.kj-comp-in .fixedPopUpCntSub .subscribeBTnNoBtn {
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  background: #fff;
  color: var(--kj-b3-title, #041E42);
}
body.kj-comp-in .fixedPopUpCntSub .subscribeBTnNoBtn:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); }
body.kj-comp-in .fixedPopUpCntSub .subscribeBTn:focus-visible,
body.kj-comp-in .fixedPopUpCntSub .subscribeBTnNoBtn:focus-visible { outline: none; box-shadow: var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30)); }
@keyframes kjKiFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes kjKiDlgIn   { from { opacity: 0; transform: translate(-50%, -50%) translateY(12px) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes kjKiSheetIn { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 759px) {
  /* the design's [data-modal] on phones (base.css, 767 → house 759): a bottom sheet, r24 on top */
  body.kj-comp-in .fixedPopUpCntSub {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 92vh;
    padding: 24px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    transform: none;
    animation: kjKiSheetIn .35s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
  }
  body.kj-comp-in .fixedPopUpCntSub .subscribeBTn,
  body.kj-comp-in .fixedPopUpCntSub .subscribeBTnNoBtn { width: 100%; margin: 10px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.kj-comp-in .fixedPopUpCnt, body.kj-comp-in .fixedPopUpCntSub { animation: none; }
  .kj-ki .kj-cc .kj-cc__manage, .kj-ki__more, body.kj-comp-in .fixedPopUpCntSub .subscribeBTn { transition: none; }
}