/* ============================================================
   DRE SWIPE-GAPS1 — CLEAN STABLE LAYOUT
   FINAL, STRUCTURALLY CORRECT
============================================================ */


/* ============================================================
   BASE / DESKTOP-FIRST STYLES
   (Apply to all sizes unless overridden below)
============================================================ */


/* ============================================================
   QUIZ CONTAINER
============================================================ */
.dre-swipe-gaps1{
  max-width:720px;
  margin:24px auto;
  padding:12px;
}


/* ============================================================
   QUESTION CARD
============================================================ */
.dre-swipe-gaps1-card{
  display:none;
  background:#ffffff;
  border:1px solid #e4e4e4;
  border-radius:14px;
  padding:22px;
  margin-bottom:22px;
}

.dre-swipe-gaps1-card.active{
  display:block;
}


/* ============================================================
   CARD TOP (DISC ONLY)
============================================================ */
.dre-swipe-gaps1-card-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:6px;
}


/* ============================================================
   AUDIO BUTTON
============================================================ */
.dre-swipe-gaps1 .dre-audio-btn{
  display:block;
  margin:10px auto 12px;
}

.dre-audio-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}


/* ============================================================
   GAPPED SENTENCE
============================================================ */
.dre-swipe-gaps1-sentence{
  text-align:center;
  font-size:1.3rem;
  line-height:1.6;
  margin:12px auto;
  background:#F6FBFE;
}


/* ============================================================
   GAP VISUAL
============================================================ */
.dre-swipe-gaps1-gap-visual{
  display:inline-block;
  width:20px;
  height:0.9em;
  margin:0 6px;
  vertical-align:baseline;
  border-bottom:3px dotted var(--dre-blue);
}

.dre-swipe-gaps1-card.is-correct .dre-swipe-gaps1-gap-visual{
  border-bottom-color:var(--dre-green);
}


/* ============================================================
   GAP INPUT — BASE (DESKTOP + MOBILE)
============================================================ */
.dre-swipe-gaps1 input.dre-swipe-gaps1-gap{
  display:block;
  min-width:240px;
  max-width:360px;
  margin:14px auto 0;
  padding:10px 12px;

  font-family:inherit;
  font-size:1em;
  text-align:center;

  background:#ffffff;
  border:2px solid var(--dre-blue);
  border-radius:8px;
  box-sizing:border-box;
  outline:none;
}

.dre-swipe-gaps1 input.dre-swipe-gaps1-gap:focus{
  box-shadow:0 0 0 3px rgba(24,165,221,0.15);
}

/* ============================================================
   GAP INPUT — CORRECT STATE
============================================================ */
.dre-swipe-gaps1-card.is-correct input.dre-swipe-gaps1-gap{
  border-color:var(--dre-green);
}


/* ============================================================
   ATTEMPT / WARNING MESSAGE
============================================================ */
.dre-swipe-gaps1-attempt-msg{
  margin:8px auto 0;
  text-align:center;
  font-size:0.95rem;
  font-weight:400;
  color:var(--dre-blue);
  min-height:1.2em;
}

/* ============================================================
   ATTEMPT MESSAGE — CORRECT STATE
============================================================ */
.dre-swipe-gaps1-card.is-correct .dre-swipe-gaps1-attempt-msg{
  color: var(--dre-green, #2ecc71);
  font-weight: 500;
}


/* ============================================================
   NAVIGATION — BASE GRID (DESKTOP-FIRST)
============================================================ */
.dre-swipe-gaps1-nav{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;

  width:100%;
  margin:16px 0;
  padding:0 12px;
  box-sizing:border-box;
}


/* Arrow buttons */
.dre-swipe-gaps1-prev,
.dre-swipe-gaps1-next{
  all:unset;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}


/* Check button */
.dre-swipe-gaps1-check{
  justify-self:center;
  margin:0;
  white-space:nowrap;
}


/* Arrow optical alignment (desktop baseline) */
.dre-swipe-gaps1-prev .dre-arrow,
.dre-swipe-gaps1-next .dre-arrow{
  display:inline-block;
  line-height:1;
  transform:translateY(-1px);
}


/* ============================================================
   DISC NUMBER — AUTHORITATIVE
============================================================ */
.dre-swipe-gaps1 .dre-disc-number::before{
  content: attr(data-num);
}
/* ============================================================
   DISC — CORRECT STATE (GREEN TICK)
============================================================ */
.dre-swipe-gaps1 .dre-disc-number.dre-disc--correct::before{
  content: "✓";
  color: var(--dre-green, #2ecc71);
  font-weight: 700;
}

.dre-swipe-gaps1 .dre-disc-number.dre-disc--correct{
  border-color: var(--dre-green, #2ecc71);
}

/* ============================================================
   REVIEW / FEEDBACK PANEL — BASE
============================================================ */
.dre-swipe-gaps1-review{
  display:none;
  margin-top:24px;
}

.dre-swipe-gaps1-review.show{
  display:block;
}


/* ============================================================
   FEEDBACK CARD (MATCHES SWIPE FEEDBACK CARD)
============================================================ */
.dre-swipe-gaps1-feedback-list{
  margin:18px 12px 0;
  padding:16px 18px;

  background:#ffffff;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);

  display:flex;
  flex-direction:column;
  gap:12px;

  opacity:0;
  transform:translateY(6px);
  transition:.35s;
}

.dre-swipe-gaps1-review.show .dre-swipe-gaps1-feedback-list{
  opacity:1;
  transform:translateY(0);
}


/* ============================================================
   FEEDBACK ITEM CONTENT
============================================================ */
.dre-swipe-gaps1-feedback-item{
  font-size:1rem;
  line-height:1.6;
  color:var(--dre-grey-dark);
}

.dre-swipe-gaps1-feedback-item .num{
  font-weight:700;
  color:var(--dre-blue);
  margin-right:6px;
}

.dre-swipe-gaps1-feedback-item .answer{
  font-weight:700;
  color:var(--dre-blue);
}


/* ============================================================
   ARROW VISUAL CLEANUP
============================================================ */
.dre-swipe-gaps1-prev,
.dre-swipe-gaps1-next,
.dre-swipe-gaps1-prev:hover,
.dre-swipe-gaps1-next:hover,
.dre-swipe-gaps1-prev:focus,
.dre-swipe-gaps1-next:focus,
.dre-swipe-gaps1-prev:active,
.dre-swipe-gaps1-next:active{
  background:transparent;
  box-shadow:none;
  outline:none;
}

.dre-swipe-gaps1-prev .dre-arrow,
.dre-swipe-gaps1-next .dre-arrow{
  background:transparent;
}

/* ============================================================
   ARROW HOVER COLOUR
============================================================ */
.dre-swipe-gaps1-prev:hover .dre-arrow,
.dre-swipe-gaps1-next:hover .dre-arrow{
  color:var(--dre-blue);
}

/* ============================================================
   FINAL ACTION — TEXT ONLY
============================================================ */
.dre-swipe-gaps1-final-actions{
  margin-top:16px;
  text-align:center;
}

.dre-swipe-gaps1-show-answers{
  display:inline-block;
  font-size:0.95rem;
  font-weight:400;
  color:var(--dre-grey);
  cursor:pointer;
  user-select:none;
}

.dre-swipe-gaps1-show-answers:hover,
.dre-swipe-gaps1-show-answers:active{
  color:var(--dre-blue);
}

.dre-swipe-gaps1-show-answers:focus-visible{
  outline:2px solid rgba(24,165,221,0.3);
  outline-offset:2px;
}


/* ============================================================
   MOBILE ONLY OVERRIDES
   max-width: 640px
============================================================ */
@media (max-width:640px){

  /* Gap input narrower on mobile */
  .dre-swipe-gaps1 input.dre-swipe-gaps1-gap{
    min-width:180px;
    max-width:260px;
  }

  /* Nav padding tighter */
  .dre-swipe-gaps1-nav{
    padding:0 10px;
  }

  /* Arrow optical nudge */
  .dre-swipe-gaps1-prev .dre-arrow,
  .dre-swipe-gaps1-next .dre-arrow{
    transform:translateY(-2px);
  }

  /* Feedback spacing tighter */
  .dre-swipe-gaps1-feedback-list{
    margin:12px 18px 0;
    padding:14px 16px;
  }

  /* Square-card strip layout */
  .dre-swipe-gaps1--square-cards .dre-swipe-gaps1-card{
    border-radius:0;
    margin-left:-12px;
    margin-right:-12px;
    margin-bottom:22px;
    box-shadow:none;
  }

  .dre-swipe-gaps1--square-cards .dre-swipe-gaps1-nav{
    margin-left:0px;
    margin-right:0px;
    padding:0 10px;
  }

}


/* ============================================================
   DESKTOP ONLY OVERRIDES
   min-width: 641px
============================================================ */
@media (min-width:641px){

  .dre-swipe-gaps1--square-cards .dre-swipe-gaps1-card{
    border-radius:14px;
    margin-left:0;
    margin-right:0;
    box-shadow:0 6px 18px rgba(0,0,0,0.04);
  }

  .dre-swipe-gaps1--square-cards .dre-swipe-gaps1-nav{
    margin-left:0;
    margin-right:0;
    padding:0 12px;
  }
	
 .dre-swipe-gaps1-nav{
    grid-template-columns:44px auto 44px;
    justify-content:center;
    column-gap:24px;
  }
  .dre-swipe-gaps1{
    padding:16px;
  }
}


/* ============================================================
   WIDE DESKTOP
   min-width: 960px
============================================================ */
@media (min-width:960px){
  .dre-swipe-gaps1{
    max-width:960px;
  }
}