/* ============================================================================
   SFIDA E PUNËS ("Test Yourself") quiz modal.
   2026-09-12 rewrite: every value below is copied verbatim from the bundle's
   own rendered DOM (KJJob's quiz dialog, extracted via CDP outerHTML across
   all three states — question / answered / results) and its :root computed
   custom properties, resolved via getComputedStyle. The previous version of
   this file was built from an older PDF export (a 902px grey-shell modal with
   68px pill options) that predates the current bundle and no longer matches
   it at all — superseded entirely below.
   ========================================================================== */

/* trigger, sits next to Apply Now in the job header */
.kj-tychal {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 18px;
  border: 1.5px solid #FF9D96; border-radius: 999px;
  background: #fff; color: #EE4753;
  font-weight: 700; font-size: 15px; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: .2s;
}
.kj-tychal:hover { background: #FFF1EF; }
.kj-tychal img { width: 20px; height: 20px; display: block; }

/* Completed state — the design swaps the medal for a tick and relabels the
   button; it stays clickable so the challenge can be retaken. */
.kj-tychal__tick { width: 18px; height: 18px; display: none; }
.kj-tychal.is-done .kj-tychal__medal { display: none; }
.kj-tychal.is-done .kj-tychal__tick  { display: block; }

/* "Rezultati yt 80%. Më mirë se 17% e 120 që e provuan." — sits under the CTA
   row. Green because it reports an achievement, not an action. */
.kj-tyres {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: 15px; font-weight: 500; color: #1E9E6A;
}
.kj-tyres.is-hidden { display: none; }
.kj-tyres svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 759px) { .kj-tyres { font-size: 14px; } }

/* ---- shell ---- bundle: data-modal-wrap fixed inset, centered, 24px pad;
   backdrop rgba(4,30,66,.55) + blur(6px); modal max-width 620px, radius 28 */
.kj-ch-wrap {
  position: fixed; inset: 0; z-index: 9500;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.kj-ch-wrap.is-on { display: flex; }
.kj-ch-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 30, 66, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.kj-ch {
  position: relative;
  width: 100%; max-width: 620px; max-height: 90vh; overflow: auto;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 30px 70px -20px rgba(4, 30, 66, 0.28);
}
.kj-ch__head {
  display: flex; align-items: center; gap: 14px;
  padding: 20px;
  border-bottom: 1px solid #E2E7EF;
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  border-radius: 28px 28px 0 0;
}
.kj-ch__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #FFF1EF;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.kj-ch__t { flex: 1 1 auto; min-width: 0; }
.kj-ch__t b { display: block; font-family: var(--kj-font); font-weight: 800; font-size: 18px; color: #041E42; line-height: 1.2; }
.kj-ch__t span { display: block; font-size: 13px; color: #6B7890; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-ch__x {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #E2E7EF; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: #041E42;
}
.kj-ch__x:hover { background: #F6F8FB; }
.kj-ch__body { padding: 22px 24px 26px; }

/* ---- the learning-only notice --- */
.kj-ch-note {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 18px;
  border-radius: 12px; background: #F6F8FB;
  font-size: 13px; color: #6B7890; line-height: 1.4;
}
.kj-ch-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: #FE616C; }

/* ---- progress ---- 8px bar + gradient fill + trailing % (not a step count) */
.kj-ch-prog { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.kj-ch-prog__t { flex: 1 1 auto; height: 8px; border-radius: 8px; background: #EEF1F6; overflow: hidden; }
.kj-ch-prog__b {
  height: 100%; width: 0;
  border-radius: 8px;
  background: linear-gradient(120deg, #FFC473 0%, #FE616C 100%);
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.kj-ch-prog__n { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #6B7890; }

/* ---- question ---- */
.kj-ch-stage { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #EE4753; margin-bottom: 8px; }
.kj-ch-q { font-family: var(--kj-font); font-weight: 700; font-size: 18px; line-height: 1.35; color: #041E42; margin-bottom: 16px; overflow-wrap: anywhere; }

.kj-ch-opts { display: flex; flex-direction: column; gap: 10px; }
.kj-ch-opt {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 12px 14px;
  border: 1.5px solid #E2E7EF; border-radius: 14px;
  background: #fff; cursor: pointer; text-align: left;
  font: inherit; color: #041E42;
  transition: all .2s cubic-bezier(.22,.61,.36,1);
}
.kj-ch-opt:hover:not([disabled]) { border-color: #FF9D96; }
.kj-ch-opt[disabled] { cursor: default; }
.kj-ch-opt__k {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: #EEF1F6; color: #041E42;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.kj-ch-opt__txt { flex: 1 1 auto; text-align: left; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.kj-ch-opt.is-correct { border-color: #1E9E6A; background: #E7F6EF; }
.kj-ch-opt.is-correct .kj-ch-opt__k { background: #1E9E6A; color: #fff; }
.kj-ch-opt.is-wrong { border-color: #E5484D; background: #FDECEC; }
.kj-ch-opt.is-wrong .kj-ch-opt__k { background: #E5484D; color: #fff; }
.kj-ch-opt__tag { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0F7A50; flex: 0 0 auto; }

.kj-ch-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; min-height: 46px; }
.kj-ch-hint { font-size: 13px; color: #9BA7BC; }
.kj-ch-fb { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.kj-ch-fb.is-correct { color: #0F7A50; }
.kj-ch-fb.is-wrong { color: #6B7890; font-weight: 600; font-size: 14px; }
.kj-ch-fb svg { width: 18px; height: 18px; flex: 0 0 auto; }
.kj-ch-next {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
  background: linear-gradient(120deg, #FFC473 0%, #FE616C 100%);
  color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(254, 97, 108, 0.45);
  white-space: nowrap;
}

/* ---- result ---- 132px ring, SAKTË label + %, standing line, title, blurb,
   Provo përsëri (gradient) + Mbyll (outline) side by side, recommendations */
.kj-ch-res { text-align: center; animation: kjChFadeUp .4s cubic-bezier(.22,.61,.36,1) both; }
.kj-ch-ring { position: relative; width: 132px; height: 132px; margin: 6px auto 14px; }
.kj-ch-ring__in {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.kj-ch-ring__in span { font-size: 11px; font-weight: 700; color: #6B7890; letter-spacing: .04em; }
.kj-ch-ring__in b { font-family: var(--kj-font); font-weight: 800; font-size: 30px; color: #041E42; line-height: 1; }
.kj-ch-better {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #EE4753; margin-bottom: 4px;
}
.kj-ch-better svg { width: 16px; height: 16px; }
.kj-ch-res h3 { margin: 12px 0 6px; font-family: var(--kj-font); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; color: #041E42; }
.kj-ch-res p { margin: 0 auto 18px; max-width: 440px; font-size: 15px; color: #6B7890; line-height: 1.5; }
.kj-ch-res-cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.kj-ch-again {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
  background: linear-gradient(120deg, #FFC473 0%, #FE616C 100%);
  color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(254, 97, 108, 0.45);
}
.kj-ch-close {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px; border: 1px solid #CBD3E0; border-radius: 999px;
  background: transparent; color: #041E42; font-weight: 700; font-size: 15px; cursor: pointer;
}
.kj-ch-recs { margin-top: 26px; text-align: left; }
.kj-ch-recs__h { font-family: var(--kj-font); font-weight: 700; font-size: 17px; color: #041E42; margin-bottom: 10px; }
.kj-ch-rec {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid #E2E7EF; border-radius: 14px;
  text-decoration: none; color: inherit;
}
.kj-ch-rec:hover { border-color: #FF9D96; }
.kj-ch-rec__ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: #FFF1EF; color: #EE4753;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.kj-ch-rec__t { display: block; }
.kj-ch-rec__t b { display: block; font-weight: 700; font-size: 15px; color: #041E42; }
.kj-ch-rec__t span { display: block; font-size: 13px; color: #6B7890; margin-top: 1px; }

.kj-ch-load { padding: 50px 0; text-align: center; color: #6B7890; font-size: 15px; }
.kj-ch-err  { padding: 40px 0; text-align: center; color: #041E42; font-size: 15px; }

/* ---- a completed challenge reopened (2026-10-20, bug 18): the result screen above, with the date of the
   attempt in the notice's box (same geometry, a green tick) and, when its picks were kept, the review ---- */
.kj-ch-when {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 18px;
  border-radius: 12px; background: #F6F8FB;
  font-size: 13px; font-weight: 600; color: #313C53; line-height: 1.4;
}
.kj-ch-when svg { width: 16px; height: 16px; flex: 0 0 auto; color: #1E9E6A; }
.kj-ch-rev { margin-top: 26px; text-align: left; }
.kj-ch-rev__h { font-family: var(--kj-font); font-weight: 700; font-size: 17px; color: #041E42; margin-bottom: 10px; }
.kj-ch-rev__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kj-ch-rev__it {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1px solid #E2E7EF; border-radius: 14px; background: #fff;
}
.kj-ch-rev__ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.kj-ch-rev__it.is-ok .kj-ch-rev__ico  { background: #1E9E6A; }
.kj-ch-rev__it.is-bad .kj-ch-rev__ico { background: #E5484D; }
.kj-ch-rev__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kj-ch-rev__q { font-weight: 700; font-size: 14.5px; line-height: 1.4; color: #041E42; overflow-wrap: anywhere; }
.kj-ch-rev__a { font-size: 13.5px; line-height: 1.45; color: #6B7890; overflow-wrap: anywhere; }
.kj-ch-rev__a b { font-weight: 600; color: #041E42; }
.kj-ch-rev__a.is-ok b { color: #0F7A50; }
.kj-ch-rev__tag { margin-left: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0F7A50; white-space: nowrap; }
/* fix round (2026-10-20): where no new attempt can be made (an ad that is no longer live, no question set to take) the reopened
   result says why above "Mbyll", which then stands alone; a long unbroken token (a URL) in a question, an option or a review line
   wraps (overflow-wrap above) instead of pushing the 390 sheet sideways */
.kj-ch-closed {
  margin: -4px auto 16px; max-width: 440px; text-align: center;
  font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #313C53;
}
/* inline, so the icon stays at the first word when the sentence wraps (390, and Albanian at 1440) */
.kj-ch-closed svg { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: #9BA7BC; }

/* a PRIVATE name: this sheet loads after base.css on jobs.php and the apply form, and a shared `kjFadeUp` here
   redefined base.css's 18px entrance for every element on those pages (2026-10-11) */
@keyframes kjChFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 759px) {
  .kj-ch-wrap { padding: 0; align-items: flex-end; }
  .kj-ch { max-width: none; max-height: 92vh; border-radius: 24px 24px 0 0; }
  .kj-ch__head { border-radius: 24px 24px 0 0; padding: 16px 18px; }
  .kj-ch__body { padding: 18px 18px 22px; }
  .kj-ch-q { font-size: 17px; }
  .kj-ch-opt { padding: 10px 12px; }
  .kj-ch-opt__k { width: 30px; height: 30px; font-size: 13px; }
  .kj-ch-foot { flex-wrap: wrap; }
  .kj-ch-ring, .kj-ch-ring svg { width: 112px; height: 112px; }
}