/* ============================================================================
   Rate Company — the "Vlerëso këtë kompani" dialog, shared by every page that
   offers it (business.php, jobs.php, kompanite.php, company-similar.php,
   company-stay-updated.php). Markup + flow: rate-company-modal.php.

   SOURCE OF TRUTH (2026-09-17): the handoff "KosovaJob — Vlerëso këtë kompani
   (card + flow)" (index.html). Every number below is that file's, block for
   block. The PDF-measured 904px frame and the interim 720px frame are gone.
   The rail-card half of the same handoff lives in company.css (.kj-co-rate*).

   Shell    600 max-width, 24/28 padding, r28, max-height 90vh — the DIALOG
            scrolls, not the page; backdrop navy 55 % + blur 6; scale-in.
   Close    40 circle at 16/16.
   Step 1   relation buttons 14/16 padding r16, 44 r12 icon tile, gap 10;
            privacy note 12/14 r12.
   Step 2   38 chips, 30 stars (20 glyph, gap 2, rows 9/0 + hairline),
            50 Po/Jo r14, 3-row textarea r12, 48 text "Kthehu" + 56 primary.
            NO privacy note on this step (the handoff has none).
   Step 3   96 coral disc with the KJ mark, reminder card 14/16 r14, 56 primary.
   Mobile   < 640: bottom sheet (r24 top corners, 22/18 padding, 94vh), Po/Jo
            and the footer stack.
   Type     Mulish body (--kj-font-mulish), Plus Jakarta Sans titles (--kj-font).
   Colours  the handoff's DS subset, scoped as --kjr-* on the overlay so no
            global token moves.
   Test     tests/kj-rate-modal.test.php
   ========================================================================== */

@keyframes kjRateFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes kjRateFadeUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes kjRateScaleIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kjRatePop     { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* ---- overlay = the handoff's .kj-modal-wrap + .kj-backdrop in one element -- */
.kj-rate-ov {
  --kjr-coral-50: #FFF1F2;
  --kjr-coral-100: #FFE0E3;
  --kjr-coral-300: #FFA3AA;
  --kjr-coral-400: #FF8A93;
  --kjr-coral-500: #FE7680;
  --kjr-coral-600: #FE616C;
  --kjr-coral-700: #E04A55;
  --kjr-gradient: linear-gradient(120deg, #FFC473 0%, #FE616C 100%);
  --kjr-surface-muted: #F1F4F9;
  --kjr-gray-100: #EEF1F6;
  --kjr-gray-300: #C9D2E0;
  --kjr-text-strong: #0B1B33;
  --kjr-text-body: #2E3D55;
  --kjr-text-muted: #5B6B84;
  --kjr-border-subtle: #E6EAF1;
  --kjr-border-default: #D5DCE7;
  --kjr-shadow-accent: 0 8px 20px -8px rgba(254, 97, 108, .6);
  --kjr-ring: 0 0 0 4px rgba(254, 97, 108, .18);
  --kjr-ease-out: cubic-bezier(.2, .8, .2, 1);
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 30, 66, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}
.kj-rate-ov.is-open { display: flex; animation: kjRateFade .25s both; }
body.kj-rate-lock { overflow: hidden; }

/* ---- dialog ---------------------------------------------------------------- */
.kj-rate {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
  padding: 24px 28px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 30px 80px -20px rgba(4, 30, 66, .45);
  color: var(--kjr-text-strong);
  font-family: var(--kj-font-mulish, 'Mulish', system-ui, sans-serif);
  line-height: 1.4;
  text-align: left;
  animation: kjRateScaleIn .32s var(--kjr-ease-out) both;
}
.kj-rate__step { display: none; }
.kj-rate__step.is-active { display: block; animation: kjRateFadeUp .3s var(--kjr-ease-out) both; }

/* ---- close ----------------------------------------------------------------- */
.kj-rate__x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--kjr-border-subtle);
  border-radius: 50%;
  background: #fff;
  color: var(--kjr-text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kj-rate__x svg { width: 18px; height: 18px; display: block; }
.kj-rate__x:hover { background: var(--kjr-surface-muted); }

/* ---- type ------------------------------------------------------------------ */
.kj-rate__h {
  margin: 0 0 6px;
  padding-right: 44px;              /* clears the close button */
  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(--kjr-text-strong);
  overflow-wrap: anywhere;
}
.kj-rate__sub {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--kjr-text-muted);
}

/* ---- privacy note (step 1) ------------------------------------------------- */
.kj-rate__note {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--kjr-surface-muted);
  font-size: 13px;
  line-height: 1.5;
  color: var(--kjr-text-muted);
  text-align: left;
}
.kj-rate__note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* ---- step 1: how do you know the company ----------------------------------- */
.kj-rate__opts { display: flex; flex-direction: column; gap: 10px; }
.kj-rate__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--kjr-border-subtle);
  border-radius: 16px;
  background: #fff;
  color: var(--kjr-text-strong);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .2s;
}
.kj-rate__opt:hover { border-color: var(--kjr-coral-300); box-shadow: 0 6px 18px rgba(4, 30, 66, .12); transform: translateY(-1px); }
/* the two boxes wait while the dialog asks whether this person rated the company already (2026-10-06) */
.kj-rate__opt:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: none; }
.kj-rate__ico {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kjr-gray-100);
  color: var(--kjr-text-strong);
}
.kj-rate__ico--in { background: var(--kjr-coral-50); color: var(--kjr-coral-600); }
.kj-rate__ico svg { width: 20px; height: 20px; display: block; }
.kj-rate__otx { display: block; min-width: 0; }
.kj-rate__ot { display: block; font-weight: 700; font-size: 15px; }
.kj-rate__os { display: block; margin-top: 2px; font-size: 13px; color: var(--kjr-text-muted); }

/* ---- the questionnaire: one question per screen (2026-09-26) ----------------
   Header: back + "Pyetja i nga n" (+ "Ruaj dhe përfundo" in the details), a
   4px progress bar, the question (20/800 Jakarta), an optional hint. Answers
   are full-width rows (48px min, r14, 1.5px border); rating rows carry a 28px
   number tile, and the "no score" answers sit apart as chips below them, so
   1..5 and "Nuk zbatohet" never look like one scale (L17). Multi rows carry a
   check box; single / rating answers move on by themselves. */
.kj-rate__qhead { display: flex; align-items: center; gap: 12px; min-height: 40px; margin: 0 48px 10px 0; }
.kj-rate__qback { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px 0 4px; border: 0; border-radius: 999px; background: transparent; color: var(--kjr-coral-600); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.kj-rate__qback:hover { background: var(--kjr-coral-50); }
.kj-rate__qback[hidden] { display: none; }   /* the first detail question (2026-10-01) */
.kj-rate__qcount { font-size: 13px; font-weight: 600; color: var(--kjr-text-muted); }
.kj-rate__qdone { margin-left: auto; height: 32px; padding: 0 12px; border: 1.5px solid var(--kjr-border-default); border-radius: 999px; background: #fff; color: var(--kjr-text-body); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.kj-rate__qdone:hover { border-color: var(--kjr-coral-300); color: var(--kjr-coral-700); }
.kj-rate__bar { height: 4px; border-radius: 999px; background: var(--kjr-gray-100); overflow: hidden; }
.kj-rate__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--kjr-gradient); transition: width .3s var(--kjr-ease-out); }
.kj-rate__qpart { margin: 14px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kjr-coral-600); }
.kj-rate__qtitle { margin: 14px 0 6px; font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif); font-weight: 800; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; color: var(--kjr-text-strong); outline: none; }
.kj-rate__qpart:not([hidden]) + .kj-rate__qtitle { margin-top: 6px; }
.kj-rate__qhint { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--kjr-text-muted); }
.kj-rate__qbody { margin-top: 14px; }
.kj-rate__qhint:not([hidden]) + .kj-rate__qbody { margin-top: 0; }
.kj-rate__qopts { display: flex; flex-direction: column; gap: 8px; }
.kj-rate__qopt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--kjr-border-subtle);
  border-radius: 14px;
  background: #fff;
  color: var(--kjr-text-strong);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.kj-rate__qopt:hover { border-color: var(--kjr-coral-300); }
.kj-rate__qopt.is-on { border-color: var(--kjr-coral-300); background: var(--kjr-coral-50); color: var(--kjr-coral-700); }
.kj-rate__qnum { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--kjr-gray-100); color: var(--kjr-text-body); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.kj-rate__qopt.is-on .kj-rate__qnum { background: var(--kjr-gradient); color: #fff; }
.kj-rate__qbox { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--kjr-border-default); background: #fff; color: transparent; display: inline-flex; align-items: center; justify-content: center; }
.kj-rate__qopt.is-on .kj-rate__qbox { border-color: transparent; background: var(--kjr-gradient); color: #fff; }
.kj-rate__qlbl { min-width: 0; }
.kj-rate__qna { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kj-rate__qchip { height: auto; min-height: 36px; padding: 7px 14px; border: 1.5px solid var(--kjr-border-default); border-radius: 18px; line-height: 1.3; text-align: left; background: #fff; color: var(--kjr-text-body); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.kj-rate__qchip:hover { border-color: var(--kjr-coral-300); }
.kj-rate__qchip.is-on { border-color: var(--kjr-coral-300); background: var(--kjr-coral-50); color: var(--kjr-coral-700); }
.kj-rate__qother { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 700; }
.kj-rate__qother[hidden] { display: none; }
.kj-rate__qchars { margin-top: 6px; text-align: right; font-size: 12px; color: var(--kjr-text-muted); }
.kj-rate__qfoot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.kj-rate__qfoot[hidden],
.kj-rate__qfoot [hidden] { display: none; }
.kj-rate__qlock { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 12px; color: var(--kjr-text-muted); }
.kj-rate__qlock svg { flex: none; width: 14px; height: 14px; }
.kj-rate__back--wide { width: 100%; margin-top: 8px; }
.kj-rate__ta--line { height: 44px; resize: none; }

/* free-text answers (E11, E12, C19, P04) and the "Tjetër" note */
.kj-rate__ta {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--kjr-border-default);
  border-radius: 12px;
  background: #fff;
  color: var(--kjr-text-strong);
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}
.kj-rate__ta:focus { outline: none; border-color: var(--kjr-coral-400); box-shadow: var(--kjr-ring); }
.kj-rate__ta::placeholder { color: var(--kjr-text-muted); opacity: 1; }

.kj-rate__err { display: none; margin-top: 12px; font-size: 14px; font-weight: 600; color: #B4282C; }
.kj-rate__err.is-on { display: block; }

.kj-rate__back {
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--kjr-coral-600);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.kj-rate__back:hover { background: var(--kjr-coral-50); }

/* the handoff's .kj-primary.lg — Submit fills the footer, "Kthehu te profili" is full width */
.kj-rate__submit,
.kj-rate__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--kjr-gradient);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--kjr-shadow-accent);
  transition: transform .2s var(--kjr-ease-out), box-shadow .2s;
}
.kj-rate__submit { flex: 1; }
.kj-rate__home { width: 100%; }
.kj-rate__submit:hover,
.kj-rate__home:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(254, 97, 108, .65); }
.kj-rate__submit:active,
.kj-rate__home:active { transform: scale(.98); }
.kj-rate__submit[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---- step 3: thank you + reminder ------------------------------------------ */
.kj-rate__s3 { text-align: center; }
.kj-rate__badge {
  width: 96px;
  height: 96px;
  margin: 6px auto 18px;
  border-radius: 50%;
  background: var(--kjr-coral-50);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: kjRatePop .5s var(--kjr-ease-out) both;
}
.kj-rate__badge svg { width: 30px; height: 42px; display: block; }
.kj-rate__s3 .kj-rate__h { padding-right: 0; margin-bottom: 8px; }

/* ---- "Pothuajse gati!" (2026-10-01): the loading screen after the core -------
   Replaces the thank-you + "add details?" choice (people closed the dialog
   there). A coral/amber arc spins round the mark, the mark breathes, and the
   bar fills from ~60 % to full in 2.2 s (= MORE_MS in rate-company-modal.php),
   then the first detail question appears. The animations restart each time
   the step is shown (display: none -> block). */
@keyframes kjRateSpin  { to { transform: rotate(360deg); } }
@keyframes kjRateBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes kjRateFill  { from { transform: scaleX(.6); } to { transform: scaleX(1); } }
.kj-rate__badge--load { position: relative; }
.kj-rate__badge--load::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--kjr-coral-500, #FE616C);
  border-right-color: #FFC473;
  animation: kjRateSpin .9s linear infinite;
}
.kj-rate__badge--load svg { animation: kjRateBreath 1.4s ease-in-out infinite; }
.kj-rate__lbar {
  width: 260px;
  max-width: 100%;
  height: 6px;
  margin: 2px auto 8px;
  border-radius: 999px;
  background: var(--kjr-coral-50);
  overflow: hidden;
}
.kj-rate__lbar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #FFC473, #FE616C);
  transform-origin: left center;
  animation: kjRateFill 2.2s ease-in-out both;
}
.kj-rate__done-p {
  max-width: 440px;
  margin: 0 auto 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--kjr-text-muted);
}
.kj-rate__rem {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--kjr-coral-100);
  border-radius: 14px;
  background: var(--kjr-coral-50);
  text-align: left;
}
.kj-rate__rem-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--kjr-coral-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kj-rate__rem-ic svg { width: 17px; height: 17px; display: block; }
.kj-rate__rem b { display: block; font-weight: 800; font-size: 14px; }
.kj-rate__rem small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--kjr-text-body); }

/* ---- entry points on the company / job / companies pages (unchanged) ------- */
.kj-rate-open {
  border: 1px solid #FF5067;
  background: #FFFEFD;
  color: #FF5067;
  font-weight: 600;
  font-size: 16px;
  height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  cursor: pointer;
}
.kj-rate-open:hover { background: #FFF7F7; }
/* Text-link variant — matches the bundle's own job-sidebar trigger exactly
   (a subtle muted link with a small gold star, NOT a solid CTA competing
   with Follow above it). */
.kj-rate-open--text {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 12px auto 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6B7890;
  font-size: 14px;
  font-weight: 700;
}
.kj-rate-open--text:hover { background: #F6F8FB; }
.kj-rate-open--text img { display: block; width: 15px; height: 15px; }
.kj-rate-hint { display: none; }

/* ---- mobile: bottom sheet (handoff breakpoint 639) ------------------------- */
@media (max-width: 639px) {
  .kj-rate-ov { padding: 0; align-items: flex-end; }
  .kj-rate { max-height: 94vh; border-radius: 24px 24px 0 0; padding: 22px 18px; }
  .kj-rate__qtitle { font-size: 18px; }
  .kj-rate__qhead { margin-right: 44px; }
  .kj-rate__qfoot { flex-direction: column-reverse; align-items: stretch; }
  .kj-rate__qfoot .kj-rate__back { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .kj-rate-ov.is-open, .kj-rate, .kj-rate__step.is-active, .kj-rate__badge { animation: none; }
  /* "Pothuajse gati!": no spin, no breathing; the bar just shows full */
  .kj-rate__badge--load::after, .kj-rate__badge--load svg { animation: none; }
  .kj-rate__lbar span { animation: none; transform: none; }
}