/* =========================================================
   DRE MULTI-SELECT LIST — CLEAN STABLE VERSION
========================================================= */

.dre-ms-list{
  --dre-blue:#18a5dd;
  --dre-pink:#ed4db4;
  --dre-grey-dark:#4F535D;

  width:100%;
  margin:0;
  padding:16px;

  font-family:Nunito, Arial, sans-serif;
  font-size:1rem;
  line-height:1.5;
  box-sizing:border-box;
}

.dre-ms-list *{
  box-sizing:border-box;
}

/* Reset option buttons only */
.dre-ms-list .dre-ms-option{
  all:unset;
  box-sizing:border-box;
}

/* =========================================================
   MAIN CARD
========================================================= */

.dre-ms-list-card{
  background:#ffffff;
  border:1px solid #e4e4e4;
  border-radius:14px 14px 0 0;
  padding:22px;
}

.dre-ms-list-question{
  margin:0 0 18px 0;
}

.dre-ms-list-question > p:first-child{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:0;
  font-weight:700;
  line-height:1.35;
}

.dre-ms-list .dre-disc-number{
  flex:0 0 var(--dre-disc-size);
  min-width:var(--dre-disc-size);
}

.dre-ms-list .dre-ms-question-disc::before{
  content:"?";
  background:var(--dre-blue);
  border-color:var(--dre-blue);
  color:#ffffff;
}

.dre-ms-list-instruction{
  margin:10px 0 0 0;
  color:var(--dre-grey-dark);
  font-size:0.95rem;
}

/* =========================================================
   OPTIONS
========================================================= */

.dre-ms-list-options{
  margin-top:14px;
}

.dre-ms-list .dre-ms-option{
  position:relative;
  display:block;
  width:100%;

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

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

  cursor:pointer;
  text-align:left;
}

.dre-ms-list .dre-ms-option::before{
  position:absolute;
  left:14px;
  top:14px;
}

.dre-ms-list
  .dre-ms-option.dre-disc-letter:not(.dre-disc--correct):not(.dre-disc--incorrect)::before{
  content:attr(data-choice);
}

.dre-ms-option-text{
  color:var(--dre-grey-dark);
  line-height:1.4;
}

/* =========================================================
   PRE-CHECK INTERACTION
========================================================= */

.dre-ms-list .dre-ms-option:not(.is-locked):hover{
  background:#f6f7f9;
}

.dre-ms-list .dre-ms-option:not(.is-locked):hover .dre-ms-option-text{
  color:var(--dre-blue);
  font-weight:inherit;
}

.dre-ms-list .dre-ms-option:not(.is-locked):focus-visible{
  outline:2px solid #d0d5db;
  outline-offset:2px;
}

.dre-ms-list .dre-ms-option.is-selected:not(.is-locked){
  background:#eef1f4;
  border-color:#d0d5db;
}

.dre-ms-list .dre-ms-option.is-selected:not(.is-locked),
.dre-ms-list .dre-ms-option.is-selected:not(.is-locked) *{
  color:var(--dre-blue);
  font-weight:inherit;
}

/* =========================================================
   POST-CHECK STATES
   Only selected answers are marked here.
   Missed correct answers are shown only in the feedback card.
========================================================= */

.dre-ms-list .dre-ms-option.is-locked{
  pointer-events:none;
}

.dre-ms-list .dre-ms-option.dre-disc--correct{
  background:#eaf7ee;
  border-color:#3ebe4e;
}

.dre-ms-list .dre-ms-option.dre-disc--incorrect{
  background:#f3f4f6;
  border-color:var(--dre-grey-dark);
}

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

/* =========================================================
   FOOTER
========================================================= */

.dre-ms-list-footer-card{
  margin-top:-1px;
  background:#ffffff;
  border:1px solid #e4e4e4;
  border-top:none;
  border-radius:0 0 14px 14px;
  padding:14px;
}

.dre-ms-list-footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  text-align:center;
}

.dre-ms-list-warning{
  margin:0;
  color:var(--dre-blue);
  font-size:0.95rem;
  min-height:1.2em;
  text-align:center;
}

.dre-ms-list-actions{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  width:100%;
}

/* =========================================================
   CHECK / REVIEW / TRY AGAIN BUTTONS
========================================================= */

.dre-ms-list .dre-ms-check,
.dre-ms-list .dre-ms-reset{
  all:unset;
  box-sizing:border-box;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:100%;
  max-width:220px;
  min-width:160px;
  height:40px;

  padding:0 22px;
  border-radius:26px;

  font-family:Nunito, Arial, sans-serif;
  font-size:1rem;
  font-weight:700;
  line-height:1.4;

  cursor:pointer;
  text-align:center;
}

/* Disabled */

.dre-ms-list .dre-ms-check.is-disabled{
  background:#ffffff !important;
  color:#bfc2c7 !important;
  border:1px solid #bfc2c7 !important;
  cursor:default !important;
}

.dre-ms-list .dre-ms-check.is-disabled:hover{
  background:#ffffff !important;
  color:#bfc2c7 !important;
  border-color:#bfc2c7 !important;
}

/* Check / Review */

.dre-ms-list .dre-ms-check.is-ready,
.dre-ms-list .dre-ms-check.is-review{
  background:#ffffff !important;
  color:var(--dre-pink) !important;
  border:2px solid var(--dre-pink) !important;
}

.dre-ms-list .dre-ms-check.is-ready:hover,
.dre-ms-list .dre-ms-check.is-review:hover{
  background:var(--dre-pink) !important;
  color:#ffffff !important;
  border-color:var(--dre-pink) !important;
}

/* Try again */

.dre-ms-list .dre-ms-reset{
  background:#ffffff !important;
  color:#b8bec7 !important;
  border:1px solid #b8bec7 !important;
}

.dre-ms-list .dre-ms-reset:hover{
  background:#eef1f4 !important;
  color:#8f98a3 !important;
  border-color:#b8bec7 !important;
}

.dre-ms-list .dre-ms-reset[hidden]{
  display:none !important;
}

/* Legacy hidden feedback node */

.dre-ms-list-feedback{
  display:none !important;
}

/* =========================================================
   REVIEW / FEEDBACK CARD
========================================================= */

.dre-ms-list-review{
  display:none;
  margin-top:24px;
  text-align:center;
}

.dre-ms-list-review.show{
  display:block;
}

.dre-ms-list-feedback-title{
  margin:0 auto 8px;
  text-align:center;
  color:var(--dre-grey-dark);
  font-size:1.25rem;
  font-weight:700;
}

.dre-ms-list-score{
  margin:0 auto 18px;
  text-align:center;
  color:var(--dre-grey-dark);
  font-size:1rem;
  font-weight:700;
}

.dre-ms-list-feedback-card{
  max-width:100%;
  margin:18px 12px 0;
  padding:16px 18px;
  background:#ffffff;
  border:1px solid #3ebe4e;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
}

.dre-ms-list-feedback-list{
  text-align:left;
}

.dre-ms-list-feedback-item{
  margin:8px 0 0;
  line-height:1.6;
  color:var(--dre-grey-dark);
}

.dre-ms-list-feedback-choice{
  font-weight:700;
  color:var(--dre-blue);
  margin-right:6px;
}

.dre-ms-list-feedback-item .answer{
  font-weight:700;
  color:var(--dre-grey-dark);
}

.dre-ms-list-feedback-status-row{
  display:block;
  margin-top:8px;
}

.dre-ms-list-feedback-status{
  font-weight:700;
}

.dre-ms-list-feedback-status.is-correct{
  color:#3ebe4e;
}

.dre-ms-list-feedback-status.is-missed{
  color:var(--dre-pink);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:640px){

  .dre-ms-list{
    padding-left:0;
    padding-right:0;
  }

  .dre-ms-list-card{
    padding:0;
    border:none;
    border-radius:0;
    background:transparent;
  }

  .dre-ms-list-question{
    padding:10px 0 8px;
    margin:0 0 8px 0;
  }

  .dre-ms-list-options{
    margin:0;
    padding:0;
  }

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

  .dre-ms-list .dre-ms-option + .dre-ms-option{
    border-top:1px solid #e4e4e4;
  }

  .dre-ms-list .dre-ms-option::before{
    left:12px;
    top:12px;
  }

  .dre-ms-list-footer-card{
    margin-top:12px;
    border-top:1px solid #e4e4e4;
    border-radius:14px;
  }

  .dre-ms-list .dre-ms-check,
  .dre-ms-list .dre-ms-reset{
    max-width:100%;
  }
}