/* =========================================================
   DRE TEXT FINDER — CLEAN STABLE VERSION
========================================================= */

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

  width:100%;
  max-width:none;
  margin:0;
  padding:16px;

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

.dre-text-finder *{
  box-sizing:border-box;
}

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

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

/* =========================================================
   TASK HEADER
========================================================= */

.dre-text-finder-task{
  margin:0 0 18px 0;
}

.dre-text-finder-task > p{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:0;
  font-weight:700;
  line-height:1.35;
}

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

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

.dre-text-finder-prompt{
  margin-top:12px;
  padding:12px 16px;
  background:#f6fbfe;
  border:1px solid #d7edf8;
  border-radius:12px;
  color:var(--dre-blue);
  font-weight:800;
}

/* =========================================================
   TEXT
========================================================= */

.dre-text-finder-text{
  color:var(--dre-grey-dark);
}

.dre-text-finder-text p{
  margin:0 0 16px 0;
}

.dre-text-finder-text p:last-child{
  margin-bottom:0;
}

.dre-tf-target{
  cursor:pointer;
  border-radius:6px;
  padding:1px 3px;
  transition:background 0.15s ease;
}

.dre-tf-target:hover{
  background:#eaf6fc;
}

.dre-tf-target.is-selected{
  background:#eaf6fc;
  color:var(--dre-blue);
  font-weight:inherit;
}

/* No instant correct/incorrect feedback during task */
.dre-tf-target.is-used{
  background:#eef1f4;
  color:var(--dre-grey-dark);
}

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

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

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

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

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

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

.dre-text-finder .dre-tf-check,
.dre-text-finder .dre-tf-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;
}


/* Check / Review - normal state only */

.dre-text-finder .dre-tf-check:not(.dre-native-completed-btn){
  background:#ffffff !important;
  color:var(--dre-pink) !important;
  border:2px solid var(--dre-pink) !important;
}

.dre-text-finder .dre-tf-check:not(.dre-native-completed-btn):hover,
.dre-text-finder .dre-tf-check:not(.dre-native-completed-btn):active{
  background:var(--dre-pink) !important;
  color:#ffffff !important;
  border-color:var(--dre-pink) !important;
}
/* Try again */

.dre-text-finder .dre-tf-reset{
  background:#ffffff !important;
  color:#b8bec7 !important;
  border:1px solid #b8bec7 !important;
}

.dre-text-finder .dre-tf-reset:hover{
  background:#eef1f4 !important;
  color:#8f98a3 !important;
  border-color:#b8bec7 !important;
}

.dre-text-finder .dre-tf-reset[hidden]{
  display:none !important;
}

/* =========================================================
   FEEDBACK + TALLY
========================================================= */

.dre-text-finder-feedback{
  margin-top:10px;
  color:var(--dre-blue);
  font-weight:700;
  text-align:center;
}

.dre-text-finder-tally{
  margin-top:6px;
  color:#9aa0a6;
  font-size:0.95rem;
  font-weight:700;
  text-align:center;
}

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

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

.dre-text-finder-review.is-visible{
  display:block;
}

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

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

.dre-tf-review-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-tf-review-list{
  text-align:left;
}

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

.dre-tf-review-num{
  font-weight:700;
  color:var(--dre-blue);
  margin-right:6px;
}

.dre-tf-review-prompt{
  color:var(--dre-grey-dark);
  font-weight:400;
}

.dre-tf-review-answer{
  color:var(--dre-grey-dark);
  font-weight:800;
}

.dre-tf-review-status-row{
  display:block;
  margin-top:8px;
}

.dre-tf-review-status{
  font-weight:700;
}

.dre-tf-review-status.is-correct{
  color:#3ebe4e;
}

.dre-tf-review-status.is-wrong{
  color:var(--dre-pink);
}

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

@media (max-width:640px){

  .dre-text-finder{
    padding-left:0;
    padding-right:0;
    max-width:none;
  }

  .dre-text-finder-card{
    padding:0;
    border:none;
    border-radius:0;
    background:transparent;
    overflow:visible;
  }

  .dre-text-finder-task{
    padding:10px 0 8px;
    margin:0 0 8px 0;
  }

  .dre-text-finder-prompt{
    margin-top:10px;
  }

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

  .dre-text-finder .dre-tf-check,
  .dre-text-finder .dre-tf-reset{
    max-width:100%;
  }
}