/* ============================================================
   DRE SW1 (SWIPE QUIZ) — PRODUCTION CSS (CONSOLIDATED)
   Scope: SW1 only
   Notes:
   - Disc & arrow visuals handled globally (elements)
   - This file handles layout + component states only
   - JS injects .dre-sw1-nav and .dre-sw1-check as siblings inside .dre-sw1-quiz
============================================================ */


/* ============================================================
   QUIZ CONTAINER
============================================================ */
.dre-sw1-quiz{
  width:100%;
  max-width:none;
  margin:24px 0;
  padding:16px;
}


/* ============================================================
   QUESTION CARD
============================================================ */
.dre-sw1-card{
  display:none;
  background:#ffffff;
  border:1px solid #e4e4e4;
  border-radius:14px;
  padding:24px;
  margin-left:0;
  margin-right:0;
  margin-bottom:24px;
}

.dre-sw1-card.active{
  display:block;
}


/* ============================================================
   SW1 FOOTER GRID — AUTHORITATIVE
   - .dre-sw1-nav and .dre-sw1-check are injected siblings
   - Do NOT move HTML
============================================================ */

/* Ensure injected controls share the same grid column */
.dre-sw1-nav,
.dre-sw1-check,
.dre-sw1-check-msg{
  grid-column:1;
}

/* ============================================================
   SW1 NAV (ARROWS) — AUTHORITATIVE
   Requirement:
   - Arrows separated (left/right)
   - Arrow group centred over Check button
   - Single source of truth (no competing rules)
============================================================ */
.dre-sw1-nav{
  display:grid;
  align-items:center;

  /* Nav itself should not add horizontal drift */
  padding:0;
  box-sizing:border-box;
}

/* Explicit arrow placement (2-column grid) */
.dre-sw1-prev{
  grid-column:1;
  justify-self:start;
}

.dre-sw1-next{
  grid-column:2;         /* FIX: was 3 */
  justify-self:end;
}

/* Arrow buttons (no UA button styles) */
.dre-sw1-prev,
.dre-sw1-next{
  all:unset;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
   background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}


/* ============================================================
   SW1 NAV WRAP
============================================================ */
.dre-sw1-nav-wrap {
  margin-top: 24px;
}

.dre-sw1-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.dre-sw1-review {
  margin-top: 24px;
}

/* ============================================================
   SW1 CHECK BUTTON — MATCH GLOBAL DRE BUTTON
============================================================ */
.dre-sw1-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:auto;
  max-width:none;

  border-radius:50px;
  white-space:nowrap;
}

/* ============================================================
   SW1 QUESTION — ALIGNMENT (DESKTOP + MOBILE)
   Single source of truth
============================================================ */
.dre-sw1-question{
  margin-bottom:18px;
  font-weight:700;
  line-height:1.35;

  display:flex;
  align-items:flex-start;
  gap:12px;

  transform:none; /* IMPORTANT: do not shift the whole row */
}

/* Disc column is fixed and stable */
.dre-sw1-question .dre-disc-number{
  flex:0 0 var(--dre-disc-size);
  min-width:var(--dre-disc-size);
  flex-shrink:0;

  transform:translateY(-2px); /* optional tiny nudge */
}

.dre-sw1-question .dre-disc-number::before{
  content:attr(data-num);
}

/* ============================================================
   OPTIONS — STRUCTURE ONLY
============================================================ */
.dre-sw1-option{
  position:relative;
  display:block;

  padding:14px 18px 14px 52px;
  margin-bottom:12px;

  border:1px solid #e4e4e4;
  border-radius:12px;
  background:#ffffff;

  cursor:pointer;
}


/* ============================================================
   SW1 OPTION STRIP — INTERACTION FEEDBACK
   Neutral, pre-check only
============================================================ */

/* Hover */
.dre-sw1-option:not(.checked):hover{
  background:#f6f7f9;
}

/* Pressed */
.dre-sw1-option:not(.checked):active{
  background:#eef1f4;
}

/* Keyboard focus */
.dre-sw1-option:not(.checked):focus-visible{
  outline:2px solid #d0d5db;
  outline-offset:2px;
}


/* ============================================================
   SW1 OPTION STRIP — SELECTED (PERSISTENT, PRE-CHECK)
============================================================ */
.dre-sw1-option.selected:not(.checked){
  background:#eef1f4;
}

.dre-sw1-option.selected:not(.checked),
.dre-sw1-option.selected:not(.checked) *{
  color:var(--dre-blue);
  font-weight:600;
}


/* ============================================================
   SW1 OPTION STRIP — POST-CHECK FEEDBACK (LOCKED)
============================================================ */

/* ✅ CORRECT OPTION */
.dre-sw1-option.dre-disc--correct{
  background:#EEF9F0;
  border-color:var(--dre-green);
}

.dre-sw1-option.dre-disc--correct,
.dre-sw1-option.dre-disc--correct *{
  color:var(--dre-grey-dark);
  font-weight:700;
}

/* ❌ INCORRECT OPTION */
.dre-sw1-option.dre-disc--incorrect{
  background:#F2F4F6;
  border-color:var(--dre-grey-dark);
}

.dre-sw1-option.dre-disc--incorrect,
.dre-sw1-option.dre-disc--incorrect *{
  color:var(--dre-grey-dark);
  font-weight:700;
}


/* ============================================================
   DISC POSITIONING ONLY (NO VISUALS)
============================================================ */
.dre-sw1-option::before{
  position:absolute;
  left:14px;
  top:14px;
}

/* Letter content (only when not marked correct/incorrect) */
.dre-sw1-option.dre-disc-letter:not(.dre-disc--correct):not(.dre-disc--incorrect)::before{
  content:attr(data-choice);
}


/* ============================================================
   SW1 CHECK MESSAGE — COMPLETION PROMPT
   (Vertical gap fix lives here)
============================================================ */
.dre-sw1-check-msg{
  margin:2px auto 6px;      /* tighter gap under arrows */
  text-align:center;
  font-size:0.95rem;
  font-weight:400;
  color:var(--dre-blue) !important;
  min-height:0.9em;       /* reserve a small line when message appears */
  line-height:1.1;
}

/* Collapse completely when empty (safe) */
.dre-sw1-check-msg:empty{
  min-height:0;
  margin-top:0;
}


/* ============================================================
   REVIEW / FEEDBACK PANEL (LAYOUT ONLY)
============================================================ */
.dre-sw1-review{
  display:none;
  margin-top:24px;
}

.dre-sw1-review.show{
  display:block;
}

.dre-sw1-score{
  text-align:center;
  font-weight:700;
  margin-bottom:16px;
}
/* ============================================================
   SW1 REVIEW FEEDBACK — MCQ CARD STYLE (CORRECT TARGETS)
============================================================ */

/* List wrapper from your JS */
.dre-sw1-review-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Card container (your JS uses .dre-sw1-feedback) */
.dre-sw1-feedback{
  margin:0;                          /* let the list gap handle spacing */
  padding:16px 16px;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);

  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease, border-color .2s ease;
}

.dre-sw1-feedback.show{
  opacity:1;
  transform:translateY(0);
}

/* Status border tint */
.dre-sw1-feedback.correct{   border-color: rgba(46,204,113,0.35); }
.dre-sw1-feedback.incorrect{ border-color: rgba(237,77,180,0.35); }
.dre-sw1-feedback.unanswered{border-color: rgba(120,120,120,0.25); }

/* Question line — THIS gives you the bold blue text */
.dre-sw1-feedback .feedback-qnum{
  font-weight:700;
  margin-right:6px;
  color:var(--dre-grey-dark,#4F535D);
}

/* Question text stays blue + bold */
.dre-sw1-feedback .feedback-qtext{
  color:var(--dre-blue,#18a5dd);
  font-weight:700;
}
/* Chosen answer text should NOT be blue */
.dre-sw1-feedback .feedback-answer{
  color:var(--dre-grey-dark,#4F535D) !important;
  font-weight:400 !important;
}

/* Clean label weight */
.dre-sw1-feedback strong{
  font-weight:700;
}

/* Ensure your inline styles don’t fight consistency */
.dre-sw1-feedback .feedback-status.correct{   color:var(--dre-green,#2ecc71) !important; font-weight:800 !important; }
.dre-sw1-feedback .feedback-status.incorrect{ color:var(--dre-pink,#ed4db4)  !important; font-weight:800 !important; }
.dre-sw1-feedback .feedback-status.unanswered{color:#777 !important; font-weight:700 !important; }

@media (max-width:640px){
  .dre-sw1-feedback{
    padding:14px 14px;
  }
}

.dre-sw1-feedback.show{
  opacity:1;
  transform:translateY(0);
}

/* ============================================================
   SW1 REVIEW STATE — HIDE QUIZ CONTROLS
   Feedback panel should stand alone
============================================================ */
/* Review mode: hide controls */
/* ============================================================
   SW1 REVIEW STATE
   Keep Try again visible, hide only arrows/message
============================================================ */

.dre-sw1--review .dre-sw1-prev,
.dre-sw1--review .dre-sw1-next,
.dre-sw1--review .dre-sw1-check-msg{
  display:none !important;
}

.dre-sw1--review .dre-sw1-nav{
  display:grid;
  grid-template-columns:auto;
  justify-content:center;
  margin:8px auto 18px;
}

.dre-sw1--review .dre-sw1-check{
  grid-column:1;
  display:inline-flex;
}

/* ============================================================
   ARROWS — FORCE NO BUTTON STYLING (SAFETY)
============================================================ */


.dre-sw1-prev .dre-arrow,
.dre-sw1-next .dre-arrow{
  background:transparent !important;
}
/* ============================================================
   SW1 ARROWS — HOVER COLOUR (BLUE)
============================================================ */
.dre-sw1-prev:hover .dre-arrow,
.dre-sw1-next:hover .dre-arrow{
  color: var(--dre-blue);
}

/* SVG arrows */
.dre-sw1-prev:hover .dre-arrow svg,
.dre-sw1-next:hover .dre-arrow svg{
  fill: var(--dre-blue);
  stroke: var(--dre-blue);
}


/* ============================================================
   FOOTER SPACING — SINGLE SOURCE OF TRUTH
   Controls distance between options ↔ arrows ↔ check
   IMPORTANT:
   - Keep horizontal centring by using auto left/right margins
============================================================ */

/* Desktop default rhythm */
@media (min-width:641px){
  .dre-sw1-nav{
    margin:8px auto 2px;   /* keep centred */
  }

  .dre-sw1-check{
    margin:4px auto 0;
  }
}

/* Mobile default rhythm */
@media (max-width:640px){
  .dre-sw1-nav{
    margin:6px auto 2px;
  }

  .dre-sw1-check{
    margin:2px auto 0;
  }
}


/* ============================================================
   MOBILE — STRIP LAYOUT
   Intentional: desktop and mobile are different
============================================================ */
@media (max-width:640px){

  .dre-sw1-quiz{
    padding-left:0;
    padding-right:0;
    max-width:none;
    overflow:visible;
  }

  .dre-sw1-card{
    margin:0;
    border-radius:0;
    border-left:none;
    border-right:none;
    border-top:none;
    border-bottom:1px solid #e4e4e4;
    padding:0;
  }

 

  .dre-sw1-option{
    border-radius:0;
    margin-bottom:0;
    border-left:none;
    border-right:none;
    padding-left:46px;
    padding-right:18px;
  }

  .dre-sw1-option + .dre-sw1-option{
    border-top:1px solid #e4e4e4;
  }
  
/* ============================================================
   SW1 MOBILE — DISC OPTICAL ALIGNMENT
============================================================ */

.dre-sw1-question .dre-disc-number{
  transform: translate(4px, 1px);   /* right, down */
}

  /* Disc positioning only (mobile) */
  .dre-sw1-option::before{
    left:12px;
    top:12px;
  }

  .dre-sw1-feedback{
    margin:12px 18px 0;
    border-radius:12px;
  }

  /* Arrow optical alignment (mobile) */
  .dre-sw1-prev .dre-arrow,
  .dre-sw1-next .dre-arrow{
    transform:translateY(-2px);
  }
}


/* ============================================================
   DESKTOP — ARROW OPTICAL ALIGNMENT ONLY
============================================================ */
@media (min-width:641px){
  .dre-sw1-prev .dre-arrow,
  .dre-sw1-next .dre-arrow{
    display:inline-block;
    line-height:1;
    transform:translateY(-1px);
  }
}
/* ============================================================
   SW1 NAV — 3 ITEM ROW: ◀  Check  ▶  (authoritative)
   Applies only when .dre-sw1-check is INSIDE .dre-sw1-nav
============================================================ */

.dre-sw1-quiz .dre-sw1-nav{
  display:grid;
  grid-template-columns:44px auto 44px; /* prev | check | next */
  justify-content:center;
  align-items:center;
  column-gap:14px;

  padding:0;
  box-sizing:border-box;
  margin:8px auto 2px; /* keep your rhythm */
}

/* Explicit placement (prevents overlap) */
.dre-sw1-quiz .dre-sw1-prev{ grid-column:1; justify-self:center; }
.dre-sw1-quiz .dre-sw1-check{ grid-column:2; justify-self:center; margin:0; }
.dre-sw1-quiz .dre-sw1-next{ grid-column:3; justify-self:center; }

/* Buttons */
.dre-sw1-quiz .dre-sw1-prev,
.dre-sw1-quiz .dre-sw1-next{
  all:unset;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Check button inside nav: keep it as an inline-flex control */
.dre-sw1-quiz .dre-sw1-nav .dre-sw1-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}