/* ============================================================
   DRE SNIPS1 — LAYOUT ONLY
   Desktop cards + Mobile strip mode
   Disc visuals handled globally
============================================================ */


/* ============================================================
   DESKTOP / TABLET (DEFAULT)
============================================================ */

/* Wrapper */
.dre-snips1{
  background:#f8f8f9;
  border-radius:12px;
  padding:28px 22px;
  margin:32px 0;
  counter-reset: snipnum;
}

/* Item card */
.dre-snips1-item{
  background:#ffffff;
  border:1px solid #e4e4e4;
  border-radius:14px;
  padding:22px;
  margin-bottom:26px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  counter-increment: snipnum;
  position:relative;
}

/* Header (number + audio) */
.dre-snips1-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

/* Number disc — positioning only */
.dre-snips1-numdisc{
  flex-shrink:0;
  user-select:none;
}

/* Sentence + gap */
.dre-snips1-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:14px 0;
}

.dre-snips1-sentence{
  margin:0;
  font-weight:600;
  color:#4F535D;
}

.dre-snips1-gap{
  display:inline-block;
  width:50px;
  border-bottom:2px dotted rgba(24,165,221,0.75);
  transform:translateY(-2px);
  font-weight:600;
}

.dre-snips1-gap.correct-fill{
  border-bottom-style:solid;
}

/* Input */
.dre-snips1-input{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border:1px solid #18a5dd;
  background:#fdfeff;
}

/* Feedback */
.dre-snips1-feedback{
  margin-top:10px;
  opacity:0;
  transform:translateY(6px);
  transition:.35s;
}

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

/* Buttons / score / answers */
.dre-snips1-check{
  margin-top:14px;
}

.dre-snips1-tally{
  margin:14px 0 6px;
  text-align:center;
  font-weight:700;
}

.dre-snips1-showanswers{
  display:none;
  margin:0 auto 24px;
}

.dre-snips1-answers-card{
  display:none;
  background:#ffffff;
  border-radius:12px;
  padding:18px 20px;
  border:1px solid #e4e4e4;
  box-shadow:0 2px 4px rgba(0,0,0,.06);
  margin-bottom:32px;
}
/* ============================================================
   SNIPS — ANSWERS VISIBILITY (JS-DRIVEN)
============================================================ */

/* Hidden by default */
.dre-snips1-showanswers{
  display:none !important;
}

/* Shown ONLY when JS allows it */
.dre-snips1-showanswers.show{
  display:block !important;
  margin-left:auto;
  margin-right:auto;
}

/* ============================================================
   SNIPS — CHECK BUTTON RESET (CRITICAL)
   Matches Swipe behaviour exactly
============================================================ */
.dre-snips1 .dre-snips1-check{
  display:block !important;
  float:none !important;
  align-self:auto !important;
}


/* ============================================================
   MOBILE — STRIP MODE (MATCH SWIPE)
   CLEANED — NO BEHAVIOUR CHANGE
============================================================ */

@media (max-width:640px){

  /* Snips stops being a visual container */
  .dre-snips1{
    background:none;
    padding:0;
    margin:0;
    border-radius:0;
  }

  /* Each snippet becomes the strip */
  .dre-snips1-item{
    background:#ffffff;
    padding:0;
    margin:0;

    border-radius:0;
    border-left:none;
    border-right:none;
    border-top:none;
    border-bottom:1px solid #e4e4e4;

    box-shadow:none;
  }

  /* Clear separation between snippets */
  .dre-snips1-item + .dre-snips1-item{
    border-top:8px solid #f8f8f9;
  }

  /* Content padding — SINGLE SOURCE OF TRUTH */
  .dre-snips1-header,
  .dre-snips1-row,
  .dre-snips1-input,
  .dre-snips1-feedback,
  .dre-snips1-check{
    padding-left:12px;
    padding-right:12px;
  }

  .dre-snips1-row{
    flex-wrap:wrap;
  }

  /* ✅ Check button — EXACT Swipe behaviour */
  .dre-snips1-check{
    display:block;
    width:100%;
    margin:16px 0;
    text-align:center;
  }

  /* Tally & answers align with content */
  .dre-snips1-tally,
  .dre-snips1-showanswers,
  .dre-snips1-answers-card{
    margin:16px 12px;
    border-radius:12px;
  }

  /* Disc + text alignment (kept minimal) */
  .dre-snips1-numdisc{
    margin-left:0;
  }

  .dre-snips1-sentence{
    margin-left:0;
  }
}
/* ⭐⭐⭐ SNIPS — FIX CHECK BUTTON (MATCH SWIPE) ⭐⭐⭐ */
@media (max-width:640px){

  .dre-snips1 .dre-snips1-check{
    display:block !important;     /* kill inline-flex */
    width:100% !important;        /* full strip width */
    margin:16px 0 !important;     /* no auto-centering */
    text-align:center;            /* label centred */
  }

}

/* ============================================================
   SNIPS — ALIGN TO SWIPE (FINAL POLISH)
============================================================ */

@media (max-width:640px){

  /* 1️⃣ MATCH SWIPE LEFT EDGE GEOMETRY */
  .dre-snips1 .dre-snips1-header,
  .dre-snips1 .dre-snips1-row,
  .dre-snips1 .dre-snips1-input,
  .dre-snips1 .dre-snips1-check,
  .dre-snips1 .dre-snips1-feedback{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  /* Number disc sits exactly on that edge */
  .dre-snips1 .dre-snips1-numdisc{
    margin-left:0 !important;
  }

  /* Sentence text flush with disc */
  .dre-snips1 .dre-snips1-sentence{
    margin-left:0 !important;
  }

  /* Gap stays inline, no drift */
  .dre-snips1 .dre-snips1-gapap,
  .dre-snips1 .dre-snips1-gap{
    margin-left:0 !important;
  }

  /* 2️⃣ INPUT — THIN BLUE LINE (CLEAN) */
  .dre-snips1 .dre-snips1-input{
    border:1px solid #18a5dd !important;
    box-shadow:none !important;
  }

  /* 3️⃣ ANSWERS BOX — TRUE CENTRE */
  .dre-snips1 .dre-snips1-showanswers{
    display:block;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center;
  }

  .dre-snips1 .dre-snips1-answers-card{
    margin-left:auto !important;
    margin-right:auto !important;
  }
	/* Header breathing room */
  .dre-snips1 .dre-snips1-header{
    padding-top:16px;
    padding-bottom:12px;
  }

  /* Sentence block */
  .dre-snips1 .dre-snips1-row{
    padding-top:8px;
    padding-bottom:12px;
  }

  /* Input spacing */
  .dre-snips1 .dre-snips1-input{
    margin-top:6px;
    margin-bottom:14px;
  }

  /* Check button spacing */
  .dre-snips1 .dre-snips1-check{
    margin-top:14px;
    margin-bottom:18px;
  }
/* ============================================================
   SNIPS — FORCE ANSWERS BUTTON CENTRE
============================================================ */
.dre-snips1 .dre-snips1-showanswers{
  display:block !important;
  width:fit-content;
  margin-left:auto !important;
  margin-right:auto !important;
}
	{

  .dre-snips1 .dre-snips1-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-left:12px;
    padding-right:12px;

    column-gap:16px; /* 👈 creates breathing space between disc & button */
  }

  /* Ensure disc hugs the left */
  .dre-snips1 .dre-snips1-numdisc{
    margin-left:0;
  }

  /* Ensure Listen button hugs the right */
  .dre-snips1 .dre-audio-btn{
    margin-left:auto;
  }
}
/* ============================================================
   SNIPS — INTRO / FIRST ITEM DEMARCATION
============================================================ */
@media (max-width:640px){

  /* Visual break between intro text and first snippet */
  .dre-snips1 .dre-snips1-item:first-child{
    border-top:12px solid #f0f2f5; /* soft divider */
  }
  /* Keep Answers hidden until JS adds .show */
  .dre-snips1-showanswers{
    display:none;
  }

  /* JS-controlled reveal */
  .dre-snips1-showanswers.show{
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
}