/* ============================================================
   KosovaJob redesign — llogaritja-e-pages.php (KJSalary, Batch 1)
   Rebuilt 2026-09-12: the page was previously built off the OLD Figma PDF
   export (p22/p21) as a 2-column select-driven form. That did not match the
   Claude Design bundle's own rendered Salary page (KosovaJob Batch 1
   standalone.html, route #/paga) — a single card with a pill amount/toggle
   bar, inline Trusti +/- adjusters, a result+stat block, and the full
   breakdown table inside the same card. Every value below is measured off
   that bundle's own DOM (inline styles + the shared [data-stack]/[data-h1]/
   [data-side] responsive rules in its <style>), not eyeballed.
   Legacy JS/AJAX contract kept as-is (calcWage.php is a live endpoint and is
   not touched): ids #paga/#pagaType/#jobType/#kon_*_perc, the
   .middleContainerAreabzLeftRightNeto(H) classes, .incrBtns[ids],
   .questionsArea* toggle mechanics.
   2026-10-09 (docs/design/design-2026-10-09/components/KJSalary.html, items
   new-sections-12/13/14, measured on the bundle's own render at 1440/900/390):
   flat #F6F8FB page (no glow), 1100 wrap / padding 36 32 80 (16 gutters on
   phones), a two-tone 40px h1, ONE r22 card (padding 10 14, shadow-sm) holding
   the amount + segments row AND the hint + Trusti stepper row, the net figure
   a solid coral-600 42px. The JS contract above is untouched.
   ============================================================ */

.kj-bg { display: none; }
/* the design's page background: flat --bg-subtle (body rgb(246,248,251) on #/paga) */
body { background: var(--kj-b3-page, #F6F8FB); }

/* ---------- shared b1 wrap + eyebrow (this page loads tokens+base only,
   same duplication pattern as trajnime.css/about.css/signup.css) ---------- */
.kj-b1-wrap {
  width: 100%;
  max-width: var(--kj-b1-container, 1200px);
  margin: 0 auto;
  padding: 0 32px;
}
.kj-b1-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kj-coral-600);
}

/* (the hero glow component — the peach / pink radial blobs — left with the
   2026-10-09 design: the page is flat) */

/* ---------- Hero ----------
   design [data-wrap] max-width 1100, padding 36px 32px 80px (KJSalary.html:12);
   the side gutters come from .kj-b1-wrap (32px) */
.kj-calc {
  --kj-b1-container: 1100px;
  position: relative;
  padding-top: 36px;
  padding-bottom: 80px;
}
/* kicker: 12px/800, letter-spacing .12em, uppercase, coral-600, 10px above the h1 */
.kj-calc .kj-b1-eyebrow { letter-spacing: .12em; margin-bottom: 10px; }
/* h1 [data-h1]: 40px/800, line-height 1.08, letter-spacing -.03em, margin 0 0 8,
   navy, the second half a coral-600 span (KJSalary.html:15) */
.kj-calc__title {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--kj-b3-title);
  text-wrap: balance;
}
.kj-calc__title-em { color: var(--kj-coral-600); }
/* lede: 15px / 1.6, muted, max 620, margin 0 0 26 */
.kj-calc__sub {
  position: relative;
  z-index: 1;
  margin: 0 0 26px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kj-b3-muted);
}

/* ---------- THE CALCULATOR: one card (KJSalary.html:19-48) ----------
   section: #fff, 1px --border-subtle, r22, padding 10px 14px, shadow-sm.
   Row 1 [data-stack]: flex, gap 10, padding 8px 4px — the borderless amount
   (h56, 28px/800) with an absolute "€", then the two segmented pills.
   Row 2 [data-stack-start]: flex space-between, gap 12, padding 0 6px 10px —
   the hint and the Trusti steppers. Both rows INSIDE the card. */
.kj-calc__box {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 22px;
  padding: 10px 14px;
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4,30,66,.07));
}
.kj-calc__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.kj-calc__amt {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  min-width: 0;
}
.kj-calc__amt input {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 44px 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -.02em;
  color: var(--kj-b3-title);
  -webkit-appearance: none;
  appearance: none;
}
.kj-calc__amt input::-webkit-outer-spin-button,
.kj-calc__amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kj-calc__cur {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kj-b3-faint, #9BA7BC);
  pointer-events: none;
}
/* segmented pills: inline-flex, padding 3, r999, --gray-100; buttons h32,
   padding 0 14, 12.5px/800; active = #fff + coral-700 + shadow-xs */
.kj-calc__seg {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  background: var(--kj-b3-sunken, #EEF1F6);
  border-radius: 999px;
  flex: 0 0 auto;
}
.kj-calc__segbtn {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: var(--kj-b3-muted);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.kj-calc__segbtn.is-active {
  background: #fff;
  color: var(--kj-coral-700, #CE3340);
  box-shadow: var(--kj-b3-shadow-xs, 0 1px 2px rgba(4,30,66,.06));
}

/* ---------- Hint + Trusti adjusters row (row 2, inside the card) ---------- */
.kj-calc__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0 6px 10px;
  flex-wrap: nowrap;
}
.kj-calc__hint {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--kj-b3-muted);
}
.kj-calc__trusti {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--kj-b3-muted);
}
.kj-calc__trustilbl { font-weight: 700; color: var(--kj-b3-body); }
.kj-stepper2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kj-stepper2 strong {
  min-width: 26px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--kj-b3-title);
  font-variant-numeric: tabular-nums;
}
.kj-stepper2__btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  background: #fff;
  color: var(--kj-b3-title);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.kj-stepper2__btn:hover { border-color: var(--kj-coral-500, #FE616C); color: var(--kj-coral-600); }

/* ---------- Result card (KJSalary.html:51-68, item new-sections-14) ----------
   margin-top 14, #fff, 1px --border-subtle, r22, shadow-sm, a 4px gradient bar;
   [data-side] grid minmax(0,300px) minmax(0,1fr), gap 20, padding 22px 24px;
   kicker 12px/800 .06em uppercase --success; the net 42px/800, line-height 1,
   -.03em, SOLID --coral-600 (no gradient text); sub 13px muted 6 under;
   2×2 tiles gap 10 (align-content start), padding 12 14, r14, --bg-subtle,
   label 12px, value 17px/800 3 under. */
.kj-calc__resultcard {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 22px;
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4,30,66,.07));
  overflow: hidden;
}
.kj-calc__resultbar { height: 4px; background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%)); }
.kj-calc__resultbody {
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.kj-calc__resultlbl {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kj-b3-success, #1E9E6A);
}
.kj-calc__resultval {
  margin-top: 0;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 42px;
  letter-spacing: -.03em;
  line-height: 1;
  background: none;
  -webkit-text-fill-color: var(--kj-coral-600, #EE4753);
  color: var(--kj-coral-600, #EE4753);
}
.kj-calc__resultsub { font-size: 13px; color: var(--kj-b3-muted); margin-top: 6px; }
.kj-calc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.kj-calc__stat {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--kj-b3-page, #F6F8FB);   /* --bg-subtle */
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
}
.kj-calc__statlbl { font-size: 12px; color: var(--kj-b3-muted); margin-bottom: 0; }
.kj-calc__statval {
  margin-top: 3px;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0;
  color: var(--kj-b3-title);
  font-variant-numeric: tabular-nums;
}

/* ---------- Breakdown card ---------- */
.kj-calc__card {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  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));
  overflow: hidden;
}
.kj-calc__cardbody { padding: 22px 28px 26px; }
.kj-calc__card-title {
  margin: 0 0 10px;
  font-family: var(--kj-font);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--kj-b3-title);
}
.kj-ledger { display: flex; flex-direction: column; }
.kj-ledger__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--kj-b3-stroke, #E2E7EF);
}
.kj-ledger__row--nb { border-bottom: 0; padding-bottom: 2px; }
.kj-ledger__label { font-size: 14.5px; color: var(--kj-b3-body); }
.kj-ledger__val { font-weight: 700; font-size: 15px; color: var(--kj-b3-title); font-variant-numeric: tabular-nums; }
.kj-ledger__val--neg { color: #B4282C; }
.kj-ledger__val--muted { color: var(--kj-b3-muted); }
.kj-ledger__row--group .kj-ledger__label { font-weight: 700; color: var(--kj-b3-title); }
.kj-ledger__row--bracket { padding: 7px 0 7px 18px; }
.kj-ledger__row[hidden] { display: none; }
.kj-ledger__row--bracket .kj-ledger__label,
.kj-ledger__row--bracket .kj-ledger__val { font-size: 13.5px; }
.kj-ledger__row--bracket .kj-ledger__label { color: var(--kj-b3-muted); }
.kj-ledger__row--bracket .kj-ledger__val { color: var(--kj-b3-title); }

.kj-calc__totalrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
}
.kj-calc__totalrow--success { background: var(--kj-b3-success-bg, #E7F6EF); }
.kj-calc__totalrow--success span:first-child { font-weight: 700; color: var(--kj-b3-title); font-size: 16px; }
.kj-calc__totalrow--success span:last-child {
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 26px;
  color: #0F7A50;
  letter-spacing: -.02em;
}
.kj-calc__totalrow--muted {
  margin-top: 8px;
  padding: 12px 18px;
  background: var(--kj-b3-page, #F6F8FB);
  font-size: 14px;
  color: var(--kj-b3-muted);
}
.kj-calc__totalrow--muted span:last-child { font-weight: 700; color: var(--kj-b3-title); }

.kj-calc__actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.kj-calc__btn-outline,
.kj-calc__btn-text {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.kj-calc__btn-outline {
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  background: #fff;
  color: var(--kj-b3-title);
}
.kj-calc__btn-outline:hover { border-color: var(--kj-coral-500, #FE616C); }
.kj-calc__btn-text {
  border: 0;
  padding: 0 16px;
  background: transparent;
  color: var(--kj-coral-600);
}
.kj-calc__btn-text:hover { text-decoration: underline; }

/* ---------- FAQ ---------- */
.kj-faq {
  --kj-b1-container: 1100px;   /* 2026-10-09: the FAQ shares the calculator's 1100 column */
  background: var(--kj-b3-page, #F6F8FB);
  border-top: 1px solid var(--kj-b3-stroke, #E2E7EF);
  padding: 64px 0 80px;
}
.kj-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 1100px) {
  .kj-faq__grid { grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start; }
  .kj-faq__intro { position: sticky; top: 100px; }
}
.kj-faq__title {
  margin: 0 0 12px;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--kj-b3-title);
}
.kj-faq__intro-p { margin: 0 0 20px; font-size: 16px; color: var(--kj-b3-muted); line-height: 1.55; }
.kj-faq__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border: 1px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--kj-b3-title);
  background: transparent;
  text-decoration: none;
}
.kj-faq__cta:hover { border-color: var(--kj-coral-500, #FE616C); color: var(--kj-coral-600); }
.kj-faq__list { display: flex; flex-direction: column; gap: 10px; }

/* Accordion — legacy .questionsArea* toggle classes, re-skinned as cards */
.questionsArea {
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 18px;
  box-shadow: var(--kj-shadow-xs, 0 1px 2px rgba(16,24,40,.05));
  transition: .25s;
  cursor: pointer;
}
.questionsArea.questionsAreaClick {
  border-color: var(--kj-coral-200, #FFC2BC);
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4,30,66,.12));
}
.questionsAreaHeaders {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-family: var(--kj-font);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--kj-b3-title);
}
.questionsAreaHeaders::after {
  content: '';
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kj-b3-sunken, #EEF1F6);
  background-image:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--kj-b3-title) calc(50% - 1px), var(--kj-b3-title) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg,  transparent calc(50% - 1px), var(--kj-b3-title) calc(50% - 1px), var(--kj-b3-title) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 12px 12px, 12px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: .25s;
}
.questionsAreaHeaders.questionsAreaHeadersClick::after {
  background-color: transparent;
  background-image:
    linear-gradient(45deg,  transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)),
    var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  background-size: 12px 12px, 12px 12px, cover;
}
.questionsAreaTxt {
  display: none;
  padding: 0 20px 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--kj-b3-body);
}

/* ---------- Mobile ---------- */
@media (max-width: 759px) {
  /* the design at 390: [data-wrap] gutters 16; [data-h1] 28px (line-height
     1.08 / -.03em kept); [data-stack] row 1 stacks (stretch), [data-stack-start]
     row 2 stacks flex-start; the result's [data-side] grid and the 2×2 tiles go
     single-column; the net figure stays 42px and the pills keep h32 */
  .kj-calc { padding-left: 16px; padding-right: 16px; }
  .kj-faq .kj-b1-wrap { padding-left: 16px; padding-right: 16px; }
  .kj-calc__title { font-size: 28px; }
  .kj-calc__bar { flex-direction: column; align-items: stretch; }
  .kj-calc__meta { flex-direction: column; align-items: flex-start; }
  /* deliberate: the design's Trusti group (352px) overflows a 390px card by a few
     px; here the two steppers may wrap under "Trusti" instead */
  .kj-calc__trusti { flex-wrap: wrap; max-width: 100%; }
  .kj-calc__resultbody { grid-template-columns: minmax(0, 1fr); }
  .kj-calc__stats { grid-template-columns: minmax(0, 1fr); }
  .kj-calc__cardbody { padding: 20px 18px 22px; }
  .kj-faq__title { font-size: 26px; }
}