/* =========================================================
   Community Quiz – Custom fixes (DEMO)
   ========================================================= */

/* 1) Hide Community Quiz internal navbar */
#cj-wrapper nav.navbar,
#cj-wrapper nav.navbar * {
  display: none !important;
}

/* =========================================================
   2) Force English content inside Community Quiz to LTR
   NOTE: Do NOT force LTR on all <p> blindly (kept commented).
   ========================================================= */

/*
#cj-wrapper p,
#cj-wrapper .question-text,
#cj-wrapper .quiz-question {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext;
}
*/

/* Answers (keep English LTR) */
#cj-wrapper li,
#cj-wrapper label,
#cj-wrapper .answer-text {
  direction: ltr !important;
  text-align: left !important;
}

 /* Buttons (keep English LTR) */
#cj-wrapper button,
#cj-wrapper input[type="button"],
#cj-wrapper input[type="submit"] {
  direction: ltr !important;
  text-align: left !important;
}

/* Question containers (English default for CQ) */
#cj-wrapper .question-text,
#cj-wrapper .quiz-question {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext;
}

/* תמיד להסתיר טבלת תשובות במסך Answer Explanation */
body:not(.cq-final-report) #cj-wrapper table.quiz-result-question{
  display: none !important;
}

body:not(.cq-final-report) #cj-wrapper table.quiz-result-question{
  display: none !important;
}

/* =========================================================
   3) Hebrew RTL only where the HTML marks it (dir/lang)
   ========================================================= */

/* Hebrew blocks that arrive with dir="rtl" */
#cj-wrapper p[dir="rtl"],
#cj-wrapper div[dir="rtl"] {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: isolate-override !important;
}

/* Hebrew spans (per Inspect: lang="HE" and/or dir="RTL") */
#cj-wrapper span[lang="HE"],
#cj-wrapper span[dir="RTL"],
#cj-wrapper span[dir="rtl"] {
  direction: rtl !important;
  unicode-bidi: isolate !important;
  text-align: right !important;
}

/* =========================================================
   4) Cleanup: remove empty LTR spans injected by Word/CQ
   ========================================================= */

/*
  Community Quiz (and pasted Word HTML) injects empty spans like:
  <span dir="LTR"></span>

  These empty LTR spans can:
  - break RTL flow
  - create visual artifacts (dots/spacing)
  This hides ONLY empty LTR spans inside #cj-wrapper.
*/
#cj-wrapper span[dir="LTR"]:empty {
  display: none !important;
}

/* =========================================================
   5) Remove the extra bullet before answer list (CQ)
   ========================================================= */

#cj-wrapper ul,
#cj-wrapper ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#cj-wrapper li::marker {
  content: "" !important;
}

/* Fallback if theme/plugin uses pseudo bullets */
#cj-wrapper li::before {
  content: none !important;
}

/* =========================================================
   Fix: Hebrew bullet list in explanations (Word HTML)
   Why: We globally force #cj-wrapper li to LTR for answers,
        but explanation lists come as <ul dir="rtl"> and must stay RTL.
   This override applies ONLY to lists explicitly marked dir="rtl".
   ========================================================= */

#cj-wrapper ul[dir="rtl"],
#cj-wrapper ul[dir="rtl"] li {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: isolate-override !important;
}

#cj-wrapper span[dir="LTR"]:empty { display:none !important; }

/* ======================================================================
   Community Quiz – Results table + CORRECT / WRONG labels (FINAL)
   ====================================================================== */

/* 1) להסתיר טבלת תשובות בזמן המבחן */
#cj-wrapper table.quiz-result-question{
  display: none !important;
}

/* 2) להציג אותה רק בדוח הסופי (class מגיע מ-user.js) */
body.cq-final-report #cj-wrapper table.quiz-result-question{
  display: table !important;
}

/* 3) הודעת CORRECT / WRONG מתחת לטבלה (card-footer בלבד) */
#cj-wrapper .card-footer .text-danger{
  font-weight: 700;
  color: #c40000 !important;
  font-size: 0 !important;
}
#cj-wrapper .card-footer .text-danger::before{
  content: "WRONG ANSWER";
  font-size: 16px;
}

#cj-wrapper .card-footer .text-success{
  font-weight: 700;
  color: #0a8a0a !important;
  font-size: 0 !important;
}
#cj-wrapper .card-footer .text-success::before{
  content: "CORRECT ANSWER";
  font-size: 16px;
}

/* Center CORRECT / WRONG label */
#cj-wrapper .card-footer .text-danger,
#cj-wrapper .card-footer .text-success{
  text-align: center !important;
}


/* 4) עיצוב הסימונים שאנחנו נזריק מה-JS */
#cj-wrapper table.quiz-result-question td.cq-mark{
  text-align: center !important;
  vertical-align: middle !important;
  color: transparent !important;
}


/* =========================================================
   FINAL REPORT table – stable layout (wide answers) + SVG marks
   ========================================================= */

/* Table: let the browser allocate width naturally */
body.cq-final-report #cj-wrapper table.quiz-result-question{
  width: 100% !important;
  direction: ltr !important;
  table-layout: auto !important;     /* IMPORTANT: not fixed */
  border-collapse: collapse;
}

/* Headers */
body.cq-final-report #cj-wrapper table.quiz-result-question th{
  vertical-align: middle !important;
  text-align: center !important;
}

/* Mark columns (Your / Answer) – force narrow & centered */
body.cq-final-report #cj-wrapper table.quiz-result-question th:nth-child(1),
body.cq-final-report #cj-wrapper table.quiz-result-question td:nth-child(1),
body.cq-final-report #cj-wrapper table.quiz-result-question th:nth-child(2),
body.cq-final-report #cj-wrapper table.quiz-result-question td:nth-child(2){
  width: 90px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Answer text column – take the rest and wrap nicely */
body.cq-final-report #cj-wrapper table.quiz-result-question td.cq-answer-text{
  width: auto !important;            /* take remaining space */
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important; /* prevents “one word per line” */
  word-break: normal !important;
  line-height: 1.35 !important;
  padding: 6px 16px 6px 8px !important;
}

/* Hide raw V/X and draw icons */
body.cq-final-report #cj-wrapper table.quiz-result-question td.cq-mark{
  width: 90px !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-size: 0 !important;           /* hide text */
  color: transparent !important;
  padding: 0 !important;
}

body.cq-final-report #cj-wrapper table.quiz-result-question td.cq-mark::before{
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ✅ Green thumbs up */
body.cq-final-report #cj-wrapper table.quiz-result-question td.cq-mark.is-v::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230a8a0a' d='M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.3l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13 1 7.59 6.41C7.22 6.78 7 7.3 7 7.83V19c0 1.1.9 2 2 2h8c.82 0 1.54-.5 1.84-1.22l3-7.05c.1-.23.16-.47.16-.73v-2z'/%3E%3C/svg%3E");
}

/* ❌ Red X */
body.cq-final-report #cj-wrapper table.quiz-result-question td.cq-mark.is-x::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c40000' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.9 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.9a1 1 0 0 0 1.41-1.41L13.41 12l4.9-4.89a1 1 0 0 0-.01-1.4z'/%3E%3C/svg%3E");
}

/* ===== Improve readability: row separators + spacing ===== */

/* subtle line between answers */
body.cq-final-report #cj-wrapper table.quiz-result-question tbody tr{
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

/* a bit more vertical padding so each answer feels like a block */
body.cq-final-report #cj-wrapper table.quiz-result-question td{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* optional: light highlight on hover (helps scanning) */
body.cq-final-report #cj-wrapper table.quiz-result-question tbody tr:hover{
  background: rgba(0,0,0,0.03);
}
body.cq-final-report #cj-wrapper table.quiz-result-question tbody tr{
  border-left: 4px solid transparent;
}
body.cq-final-report #cj-wrapper table.quiz-result-question tbody tr:hover{
  border-left-color: rgba(0,0,0,0.15);
}
body.cq-final-report #cj-wrapper .cq-answer-explanation-title{
  text-align: left !important;
  font-weight: 800 !important;
  display: block !important;
}
/* Answer Explanation title */
#cj-wrapper .cq-answer-explanation-title{
  text-align: left !important;
  font-weight: 800 !important;
  display: block !important;
  margin: 8px 0 10px !important;
}

/* Answer Explanation – left + bold + color by correct/wrong */
#cj-wrapper .cq-answer-explanation-title{
  text-align: left !important;
  font-weight: 800 !important;
  display: block !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

#cj-wrapper .cq-correct .cq-answer-explanation-title,
#cj-wrapper .cq-correct .cq-answer-explanation-title *{
  color:#0a8a0a !important;
}

#cj-wrapper .cq-wrong .cq-answer-explanation-title,
#cj-wrapper .cq-wrong .cq-answer-explanation-title *{
  color:#c40000 !important;
}

#cj-wrapper .cq-correct .cq-answer-explanation-content,
#cj-wrapper .cq-correct .cq-answer-explanation-content *{
  color:#0a8a0a !important;
}

#cj-wrapper .cq-wrong .cq-answer-explanation-content,
#cj-wrapper .cq-wrong .cq-answer-explanation-content *{
  color:#c40000 !important;
}

/* Final Report summary: centered + LTR */
body.cq-final-report #cj-wrapper .cq-final-summary{
  direction: ltr !important;
  text-align: center !important;
  margin: 0 auto 20px auto !important;
  display: block;
}


/* =========================================================
   FINAL REPORT – center the whole summary block + tidy table
   ========================================================= */

body.cq-final-report #cj-wrapper .cq-final-summary{
  direction: ltr !important;
  max-width: 780px !important;
  margin: 0 auto 22px auto !important;   /* center block */
  text-align: center !important;          /* center the heading */
}

/* The summary is usually a table – center it */
body.cq-final-report #cj-wrapper .cq-final-summary table{
  margin: 0 auto !important;              /* center table */
  border-collapse: collapse;
}

/* Make rows readable */
body.cq-final-report #cj-wrapper .cq-final-summary td{
  padding: 6px 14px !important;
  vertical-align: middle !important;
}

/* Labels column */
body.cq-final-report #cj-wrapper .cq-final-summary td:first-child{
  text-align: left !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

/* Values column */
body.cq-final-report #cj-wrapper .cq-final-summary td:last-child{
  text-align: right !important;
  white-space: nowrap;
}
body.cq-final-report #cj-wrapper .cq-final-message{
  text-align: center;
  margin: 14px auto 26px auto;
  max-width: 900px;
}

/* Align the quiz page title to the left on ALL quiz pages */
#cj-wrapper h1,
#cj-wrapper .page-header h1,
#cj-wrapper .item-title,
#cj-wrapper .page-title{
  text-align: left !important;
  direction: ltr !important;
}
/* Divider between Final Report block and questions */
body.cq-final-report #cj-wrapper .cq-final-message::after{
  content: "";
  display: block;
  height: 1px;
  margin: 28px auto 24px auto;
  max-width: 780px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,0.25),
    transparent
  );
}

/* FINAL REPORT – force the answer TEXT cell (1st td in each row) to be LTR + left aligned */
body.cq-final-report #cj-wrapper table.quiz-result-question tr.choice-answer td:first-child{
  text-align: left !important;
  direction: ltr !important;
  unicode-bidi: plaintext !important;

  /* keeps A./B./C./D in the same line and prevents weird centering */
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;

  /* small padding so it looks clean */
  padding-left: 14px !important;
  padding-right: 16px !important;
}

/* also force any nested spans/divs inside that cell to obey left alignment */
body.cq-final-report #cj-wrapper table.quiz-result-question tr.choice-answer td:first-child *{
  text-align: left !important;
  direction: ltr !important;
  unicode-bidi: plaintext !important;
  margin: 0 !important;
}

/* =========================================================
   FINAL REPORT - GRID layout
   ========================================================= */

body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report{
  width: 100% !important;
  table-layout: fixed !important;
  /* direction: rtl !important; */ /* זה מה שהופך ויזואלית כמו תמונה 3 */
  border-collapse: collapse !important;
}

/* כל הכותרות והתאים מיושרים אנכית */
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report th,
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td{
  vertical-align: middle !important;
}

/* התא הראשון במקור = טקסט השורה, וב-RTL הוא יוצג בצד ימין */
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report th:first-child,
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td:first-child,
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-grid-text{
  width: auto !important;
  text-align: right !important;
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.45 !important;
  padding-right: 14px !important;
  padding-left: 10px !important;
}

/* כל שאר עמודות הסימון */
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report th:not(:first-child),
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td:not(:first-child){
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  text-align: center !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  padding: 0 !important;
}

/* גם תוכן פנימי בעמודת הטקסט */
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-grid-text *{
  text-align: right !important;
  direction: rtl !important;
  unicode-bidi: plaintext !important;
}

/* לא להראות אייקונים מקוריים בתאים שסומנו */
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-mark{
  font-size: 0 !important;
  color: transparent !important;
  background: transparent !important;
  padding: 0 !important;
}

body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-mark i,
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-mark span,
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-mark svg,
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-mark input,
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-mark label{
  display: none !important;
}

body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-mark::before{
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 👍 ירוק */
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-mark.is-v::before{
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230a8a0a' d='M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.3l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13 1 7.59 6.41C7.22 6.78 7 7.3 7 7.83V19c0 1.1.9 2 2 2h8c.82 0 1.54-.5 1.84-1.22l3-7.05c.1-.23.16-.47.16-.73v-2z'/%3E%3C/svg%3E");
}

/* ❌ אדום */
body.cq-final-report #cj-wrapper table.quiz-result-question.cq-grid-report td.cq-mark.is-x::before{
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c40000' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.9 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.9a1 1 0 0 0 1.41-1.41L13.41 12l4.9-4.89a1 1 0 0 0-.01-1.4z'/%3E%3C/svg%3E");
}

/* ===== Answer Explanation - uniform size everywhere ===== */
#cj-wrapper .cq-answer-explanation-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 10px 0 6px !important;
}

#cj-wrapper .cq-answer-explanation-content {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

#cj-wrapper .cq-answer-explanation-content ul {
  margin: 8px 0 8px 18px !important;
}

#cj-wrapper .cq-answer-explanation-content li {
  margin-bottom: 6px !important;
}