/* ==========================================================
   Job Quiz Engage v3 — frontend
   IMPORTANT: sab rules .jqe-wrap se scope + high specificity,
   taaki theme ka CSS override na kar sake (v2 ka bug).
   ========================================================== */

.jqe-wrap{
  --jqe-bg:#1c1917; --jqe-bg2:#292524; --jqe-bg3:#3a3430; --jqe-line:#44403c;
  --jqe-txt:#f5f5f4; --jqe-mut:#a8a29e;
  --jqe-acc:#f59e0b; --jqe-acc2:#d97706; --jqe-accTxt:#1c1917;
  --jqe-rad:14px; --jqe-pad:18px;

  position:relative !important; box-sizing:border-box !important;
  display:block !important;
  background:var(--jqe-bg) !important;
  border:1px solid var(--jqe-line) !important;
  border-radius:var(--jqe-rad) !important;
  padding:var(--jqe-pad) 16px !important;
  margin:28px 0 !important;
  color:var(--jqe-txt) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  font-size:14px !important; line-height:1.5 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  max-width:100% !important; overflow:hidden !important;
  text-align:left !important;
}

/* ---- HARD RESET: theme ke h3/h4/p/button ko neutralise ---- */
.jqe-wrap *,
.jqe-wrap *::before,
.jqe-wrap *::after{ box-sizing:border-box !important; }

.jqe-wrap h3, .jqe-wrap h4, .jqe-wrap p, .jqe-wrap div, .jqe-wrap span, .jqe-wrap em, .jqe-wrap button, .jqe-wrap a{
  font-family:inherit !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  text-shadow:none !important;
}
.jqe-wrap h3, .jqe-wrap h4{
  padding:0 !important; border:0 !important; background:none !important;
}
.jqe-wrap h3::before, .jqe-wrap h4::before,
.jqe-wrap h3::after, .jqe-wrap h4::after{ content:none !important; display:none !important; }
.jqe-wrap p{ padding:0 !important; }
/* Quiz ke andar sab <div> hai (Ad Inserter paragraph-count se bachne ke liye) —
   isliye text divs ko block-level defaults dene padte hain */
.jqe-wrap .jqe-sub, .jqe-wrap .jqe-q, .jqe-wrap .jqe-result-body,
.jqe-wrap .jqe-related-title, .jqe-wrap .jqe-note, .jqe-wrap .jqe-count,
.jqe-wrap .jqe-thanks, .jqe-wrap .jqe-loading-text{
  display:block !important; padding:0 !important; border:0 !important; background:none !important;
}
.jqe-wrap button{
  -webkit-appearance:none !important; appearance:none !important;
  box-shadow:none !important; text-decoration:none !important; line-height:1.4 !important;
  min-height:0 !important; height:auto !important; width:auto;
}

/* ---- Themes ---- */
.jqe-wrap.jqe-theme-blue{ --jqe-acc:#3b82f6; --jqe-acc2:#2563eb; --jqe-accTxt:#ffffff; --jqe-bg3:#2a3444; }
.jqe-wrap.jqe-theme-green{ --jqe-acc:#10b981; --jqe-acc2:#059669; --jqe-accTxt:#052e16; --jqe-bg3:#26332e; }
.jqe-wrap.jqe-theme-purple{ --jqe-acc:#a855f7; --jqe-acc2:#7e22ce; --jqe-accTxt:#ffffff; --jqe-bg3:#332a3f; }
.jqe-wrap.jqe-theme-red{ --jqe-acc:#ef4444; --jqe-acc2:#dc2626; --jqe-accTxt:#ffffff; --jqe-bg3:#3a2a2a; }

/* ==========================================================
   DESIGN TEMPLATES (5)
   ========================================================== */

/* --- T1: CARD (default) — clean dark card --- */
.jqe-tpl-card::before{
  content:"" !important; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--jqe-acc),var(--jqe-acc2)); display:block !important;
}

/* --- T2: CLASSIC — purane popup jaisa: gradient pink/magenta rows --- */
.jqe-tpl-classic{
  --jqe-bg:#ffffff; --jqe-bg2:#ffffff; --jqe-bg3:#fdf2f8;
  --jqe-txt:#1f2937; --jqe-mut:#6b7280; --jqe-line:#e5e7eb;
  --jqe-acc:#ec4899; --jqe-acc2:#a855f7; --jqe-accTxt:#ffffff;
  box-shadow:0 10px 40px rgba(0,0,0,.12);
}
.jqe-tpl-classic .jqe-opt{
  background:linear-gradient(90deg,#ec4899,#a855f7) !important;
  border:0 !important; color:#fff !important; font-weight:700 !important;
  border-radius:99px !important; padding:14px 18px !important;
}
.jqe-tpl-classic .jqe-opt:hover{ filter:brightness(1.08); background:linear-gradient(90deg,#ec4899,#a855f7) !important; }
.jqe-tpl-classic .jqe-opt-dot{ border-color:rgba(255,255,255,.7) !important; }
.jqe-tpl-classic .jqe-opt.is-picked .jqe-opt-dot{ background:#fff !important; border-color:#fff !important; }
.jqe-tpl-classic .jqe-opt-check{ color:#fff !important; }
.jqe-tpl-classic .jqe-title{ text-align:center !important; }
.jqe-tpl-classic .jqe-sub, .jqe-tpl-classic .jqe-q{ text-align:center !important; }
.jqe-tpl-classic .jqe-meta{ justify-content:center !important; }
.jqe-tpl-classic .jqe-time{ display:none !important; }

/* --- T3: MINIMAL — light, boxy, low-key --- */
.jqe-tpl-minimal{
  --jqe-bg:#ffffff; --jqe-bg2:#f9fafb; --jqe-bg3:#f3f4f6;
  --jqe-txt:#111827; --jqe-mut:#6b7280; --jqe-line:#e5e7eb;
  --jqe-accTxt:#ffffff; --jqe-rad:8px;
  box-shadow:none !important; border:1px solid #e5e7eb !important;
}
.jqe-tpl-minimal .jqe-badge{ background:var(--jqe-bg3) !important; color:var(--jqe-mut) !important; }
.jqe-tpl-minimal .jqe-opt{ border-radius:6px !important; }
.jqe-tpl-minimal .jqe-btn{ border-radius:6px !important; background:var(--jqe-acc) !important; }

/* --- T4: BANNER — compact horizontal, archive/top ke liye --- */
.jqe-tpl-banner{ --jqe-pad:14px; }
.jqe-tpl-banner .jqe-title{ font-size:16px !important; }
.jqe-tpl-banner .jqe-sub{ font-size:12px !important; }
.jqe-tpl-banner .jqe-opts{ display:grid !important; grid-template-columns:1fr 1fr; gap:7px !important; }
.jqe-tpl-banner .jqe-opt{ padding:11px 12px !important; font-size:13px !important; }
.jqe-tpl-banner .jqe-opt-check{ display:none !important; }
@media (max-width:480px){ .jqe-tpl-banner .jqe-opts{ grid-template-columns:1fr; } }

/* --- T5: BOLD — big accent header block --- */
.jqe-tpl-bold{ --jqe-pad:0; border:0 !important; }
.jqe-tpl-bold .jqe-head{
  background:linear-gradient(135deg,var(--jqe-acc),var(--jqe-acc2)) !important;
  padding:18px 16px !important; margin:0 0 0 !important;
}
.jqe-tpl-bold .jqe-title{ color:var(--jqe-accTxt) !important; font-size:20px !important; }
.jqe-tpl-bold .jqe-sub{ color:var(--jqe-accTxt) !important; opacity:.9; }
.jqe-tpl-bold .jqe-badge{ background:rgba(255,255,255,.25) !important; color:var(--jqe-accTxt) !important; }
.jqe-tpl-bold .jqe-time{ color:var(--jqe-accTxt) !important; opacity:.8; }
.jqe-tpl-bold .jqe-dots{ margin:0 !important; padding:0 16px !important; }
.jqe-tpl-bold .jqe-body{ padding:16px !important; }
.jqe-tpl-bold .jqe-count{ padding:0 16px 14px !important; margin:0 !important; }

/* ==========================================================
   CORE UI
   ========================================================== */
.jqe-wrap.jqe-corner-sharp{ --jqe-rad:2px; }

.jqe-wrap.jqe-reveal{ opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease; }
.jqe-wrap.jqe-reveal.is-in{ opacity:1; transform:none; }

.jqe-wrap .jqe-head{ margin:0 0 12px !important; }
.jqe-wrap .jqe-meta{ display:flex !important; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px !important; }
.jqe-wrap .jqe-badge{
  display:inline-block !important; background:var(--jqe-acc) !important; color:var(--jqe-accTxt) !important;
  font-size:10px !important; font-weight:800 !important; letter-spacing:.5px !important;
  text-transform:uppercase !important; padding:4px 10px !important; border-radius:99px !important;
  line-height:1.4 !important; margin:0 !important;
}
.jqe-wrap .jqe-time{ font-size:11px !important; color:var(--jqe-mut) !important; font-weight:600 !important; }

/* TITLES — high specificity, theme-proof */
.jqe-wrap h3.jqe-title{
  display:block !important; margin:0 0 4px !important;
  font-size:19px !important; font-weight:800 !important;
  color:var(--jqe-txt) !important; line-height:1.3 !important;
}
.jqe-wrap .jqe-sub{
  display:block !important; margin:0 !important;
  font-size:13px !important; color:var(--jqe-mut) !important; line-height:1.5 !important;
}
.jqe-wrap .jqe-center{ text-align:center !important; }

.jqe-wrap .jqe-dots{ display:flex !important; gap:5px; margin:12px 0 14px !important; }
.jqe-wrap .jqe-dot{ flex:1; height:3px; background:var(--jqe-bg2) !important; border-radius:99px; transition:background .3s ease; }
.jqe-wrap .jqe-dot.is-on{ background:var(--jqe-acc) !important; }

/* STEPS — sirf ek dikhna chahiye (v2 ka bug fix) */
.jqe-wrap .jqe-step{ display:none !important; }
.jqe-wrap .jqe-step.is-active{ display:block !important; animation:jqeIn .3s cubic-bezier(.16,1,.3,1); }
@keyframes jqeIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.jqe-wrap .jqe-q{
  display:block !important; margin:0 0 12px !important;
  font-size:15px !important; font-weight:700 !important; color:var(--jqe-txt) !important; line-height:1.4 !important;
}
.jqe-wrap .jqe-opts{ display:flex !important; flex-direction:column; gap:8px; }
.jqe-wrap button.jqe-opt{
  display:flex !important; align-items:center; gap:11px; width:100% !important;
  text-align:left !important; cursor:pointer !important;
  background:var(--jqe-bg2) !important; border:1.5px solid var(--jqe-line) !important;
  border-radius:10px !important; padding:13px 14px !important;
  color:var(--jqe-txt) !important; font-size:14px !important; font-weight:600 !important;
  margin:0 !important; transition:border-color .15s, background .15s, transform .08s;
}
.jqe-wrap button.jqe-opt:hover{ border-color:var(--jqe-acc) !important; background:var(--jqe-bg3) !important; }
.jqe-wrap button.jqe-opt:active{ transform:scale(.985); }
.jqe-wrap .jqe-opt-dot{
  width:16px !important; height:16px !important; border-radius:50% !important;
  border:2px solid var(--jqe-line) !important; flex-shrink:0; display:block !important;
  transition:border-color .15s, background .15s;
}
.jqe-wrap button.jqe-opt:hover .jqe-opt-dot{ border-color:var(--jqe-acc) !important; }
.jqe-wrap .jqe-opt-label{ flex:1; display:block !important; }
.jqe-wrap .jqe-opt-check{
  font-size:13px !important; color:var(--jqe-acc) !important; font-weight:900 !important;
  opacity:0; transition:opacity .15s; flex-shrink:0; display:block !important;
}
.jqe-wrap button.jqe-opt.is-picked{ border-color:var(--jqe-acc) !important; background:var(--jqe-bg3) !important; }
.jqe-wrap button.jqe-opt.is-picked .jqe-opt-dot{ border-color:var(--jqe-acc) !important; background:var(--jqe-acc) !important; }
.jqe-wrap button.jqe-opt.is-picked .jqe-opt-check{ opacity:1; }

.jqe-wrap button.jqe-back{
  display:inline-block !important; margin:10px 0 0 !important; padding:4px 0 !important;
  background:none !important; border:0 !important; color:var(--jqe-mut) !important;
  font-size:12px !important; font-weight:600 !important; cursor:pointer !important;
}
.jqe-wrap button.jqe-back:hover{ color:var(--jqe-acc) !important; }

.jqe-wrap .jqe-lock{ font-size:30px !important; text-align:center; margin:0 0 6px !important; display:block !important; }
.jqe-wrap .jqe-reward-step{ text-align:center !important; }
.jqe-wrap .jqe-reward-step .jqe-q{ text-align:center !important; }

/* BUTTONS */
.jqe-wrap .jqe-btn{
  display:block !important; width:100% !important; text-align:center !important; cursor:pointer !important;
  background:linear-gradient(180deg,var(--jqe-acc),var(--jqe-acc2)) !important;
  color:var(--jqe-accTxt) !important; border:0 !important; border-radius:10px !important;
  padding:14px 18px !important; font-size:15px !important; font-weight:800 !important;
  text-decoration:none !important; margin:12px 0 0 !important;
  transition:filter .15s, transform .08s;
}
.jqe-wrap .jqe-btn:hover{ filter:brightness(1.1); color:var(--jqe-accTxt) !important; }
.jqe-wrap .jqe-btn:active{ transform:scale(.99); }
.jqe-wrap .jqe-btn.is-loading{ opacity:.6; pointer-events:none; }

/* RESULT */
.jqe-wrap .jqe-result-head{ display:flex !important; align-items:center; justify-content:space-between; gap:8px; margin:0 0 10px !important; }
.jqe-wrap .jqe-result-badge{
  display:inline-block !important; background:var(--jqe-acc) !important; color:var(--jqe-accTxt) !important;
  font-size:10px !important; font-weight:800 !important; text-transform:uppercase !important;
  letter-spacing:.5px !important; padding:4px 10px !important; border-radius:99px !important; line-height:1.4 !important;
}
.jqe-wrap .jqe-score-pill{ font-size:11px !important; color:var(--jqe-mut) !important; font-weight:700 !important; }
.jqe-wrap h4.jqe-result-title{
  display:block !important; margin:0 0 8px !important;
  font-size:17px !important; font-weight:800 !important; color:var(--jqe-acc) !important; line-height:1.35 !important;
}
.jqe-wrap .jqe-result-body{
  display:block !important; margin:0 !important;
  font-size:14px !important; color:var(--jqe-txt) !important; line-height:1.65 !important;
}
.jqe-wrap .jqe-result-foot{ display:flex !important; gap:8px; margin:12px 0 0 !important; }
.jqe-wrap button.jqe-restart, .jqe-wrap button.jqe-share{
  flex:1; display:block !important; background:none !important;
  border:1px solid var(--jqe-line) !important; color:var(--jqe-mut) !important;
  border-radius:8px !important; padding:9px !important; margin:0 !important;
  font-size:12px !important; font-weight:600 !important; cursor:pointer !important;
  transition:border-color .15s, color .15s;
}
.jqe-wrap button.jqe-restart:hover, .jqe-wrap button.jqe-share:hover{ border-color:var(--jqe-acc) !important; color:var(--jqe-txt) !important; }

.jqe-wrap .jqe-note{ display:block !important; margin:8px 0 0 !important; font-size:11px !important; color:var(--jqe-mut) !important; text-align:center !important; }
.jqe-wrap .jqe-count{ display:block !important; margin:12px 0 0 !important; font-size:11px !important; color:var(--jqe-mut) !important; text-align:center !important; opacity:.85; }

.jqe-archive-top{ margin:0 0 20px !important; }

@media (min-width:640px){
  .jqe-wrap{ padding:22px 20px !important; }
  .jqe-wrap.jqe-tpl-bold{ padding:0 !important; }
  .jqe-wrap h3.jqe-title{ font-size:21px !important; }
  .jqe-wrap .jqe-btn{ width:auto !important; min-width:260px; margin-left:auto !important; margin-right:auto !important; }
  .jqe-wrap .jqe-result-foot{ max-width:340px; }
}

/* v3.1 — Continue button (ad ke baad) */
.jqe-wrap .jqe-continue{
  background:linear-gradient(180deg,var(--jqe-acc),var(--jqe-acc2)) !important;
  animation:jqePulse .5s ease;
}
@keyframes jqePulse{ 0%{transform:scale(.96);opacity:0} 100%{transform:scale(1);opacity:1} }
.jqe-wrap .jqe-result-foot:empty{ display:none !important; margin:0 !important; }

/* ==========================================================
   v3.2 — ARCHIVE FULL-WIDTH ROW
   Quiz ko post grid ke bahar, apni alag row mein rakhta hai
   taaki grid ke columns na tootein.
   ========================================================== */
.jqe-archive-top.jqe-full-row{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;      /* flex grid ke andar ho to poori row le */
  grid-column:1 / -1 !important;  /* CSS grid ke andar ho to poori row le */
  float:none !important;
  clear:both !important;
  margin:0 0 24px !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
.jqe-archive-top.jqe-full-row .jqe-wrap{
  margin:0 !important;
  width:100% !important;
  max-width:100% !important;
}
/* Grid parent ke direct child hone par bhi safe */
.jqe-archive-top{ order:-1; }

/* ==========================================================
   v3.3 — loading spinner, related posts
   ========================================================== */
.jqe-wrap .jqe-spinner{ display:flex !important; justify-content:center; gap:5px; margin:0 0 10px !important; }
.jqe-wrap .jqe-spinner span{
  width:8px; height:8px; border-radius:50%; background:var(--jqe-acc) !important;
  display:block !important; animation:jqeBounce 1.2s infinite ease-in-out both;
}
.jqe-wrap .jqe-spinner span:nth-child(1){ animation-delay:-.24s; }
.jqe-wrap .jqe-spinner span:nth-child(2){ animation-delay:-.12s; }
@keyframes jqeBounce{ 0%,80%,100%{ transform:scale(.6); opacity:.5 } 40%{ transform:scale(1); opacity:1 } }
.jqe-wrap .jqe-loading-text{ text-align:center !important; color:var(--jqe-mut) !important; font-weight:600 !important; }
.jqe-wrap .jqe-reward-btn.is-ready{ animation:jqePulse .4s ease; }

/* Related posts */
.jqe-wrap .jqe-related{
  margin:14px 0 0 !important; padding:12px 0 0 !important;
  border-top:1px solid var(--jqe-line) !important;
}
.jqe-wrap .jqe-related-title{
  display:block !important; margin:0 0 8px !important;
  font-size:12px !important; font-weight:800 !important; text-transform:uppercase !important;
  letter-spacing:.4px !important; color:var(--jqe-mut) !important;
}
.jqe-wrap ul.jqe-related-list{
  list-style:none !important; margin:0 !important; padding:0 !important;
}
.jqe-wrap ul.jqe-related-list li{
  list-style:none !important; margin:0 0 6px !important; padding:0 !important;
}
.jqe-wrap ul.jqe-related-list li::before,
.jqe-wrap ul.jqe-related-list li::marker{ content:none !important; display:none !important; }
.jqe-wrap ul.jqe-related-list a{
  display:flex !important; align-items:flex-start; gap:8px;
  background:var(--jqe-bg2) !important; border:1px solid var(--jqe-line) !important;
  border-radius:8px !important; padding:10px 12px !important;
  color:var(--jqe-txt) !important; font-size:13px !important; font-weight:600 !important;
  text-decoration:none !important; line-height:1.45 !important;
  transition:border-color .15s, background .15s;
}
.jqe-wrap ul.jqe-related-list a:hover{
  border-color:var(--jqe-acc) !important; background:var(--jqe-bg3) !important;
  color:var(--jqe-acc) !important;
}
.jqe-wrap .jqe-rel-arrow{ color:var(--jqe-acc) !important; font-weight:900 !important; flex-shrink:0; }

/* v3.5 — reward slot (result body ke neeche, related se upar) */
.jqe-wrap .jqe-reward-slot{ display:block !important; }
.jqe-wrap .jqe-reward-slot:empty{ display:none !important; }
.jqe-wrap .jqe-reward-slot .jqe-btn{ margin-top:14px !important; }
.jqe-wrap .jqe-thanks{
  display:block !important; margin:14px 0 0 !important; padding:10px 12px !important;
  background:var(--jqe-bg2) !important; border:1px solid var(--jqe-acc) !important;
  border-radius:8px !important; text-align:center !important;
  font-size:13px !important; font-weight:700 !important; color:var(--jqe-acc) !important;
  animation:jqePulse .4s ease;
}
/* Related ab reward slot ke baad aata hai — spacing adjust */
.jqe-wrap .jqe-reward-slot + .jqe-related{ margin-top:16px !important; }

/* v4.5 — Table of Contents mode */
.jqe-wrap .jqe-toc[hidden]{ display:none !important; }
.jqe-wrap .jqe-toc .jqe-related-list a{
  font-weight:600 !important;
}
.jqe-wrap .jqe-toc .jqe-rel-arrow{
  transform:rotate(90deg); display:inline-block;
}