.h5p-drag-text {
  --h5p-accent: #f1a52d !important;
  --h5p-green: #58cc6c !important;
  --h5p-purple: #7c6df2 !important;
  --h5p-bg: #f7f9fb !important;
  --h5p-text: #3c3c3c !important;
  --h5p-text-soft: #4b4b4b !important;
  --h5p-muted: #dcdfe4 !important;

  /* scalable sizing */
  --h5p-tile-height: clamp(2.55rem, 2.45rem + 0.2vw, 2.7rem) !important;
  --h5p-tile-height-compact: calc(var(--h5p-tile-height) - 0.25rem) !important;
  --h5p-dropzone-width: clamp(4.5rem, 4rem + 1vw, 6.25rem) !important;

  /* around 12–13px */
  --h5p-radius-sm: clamp(0.75rem, 0.73rem + 0.04vw, 0.8125rem) !important;
  --h5p-radius-md: clamp(1rem, 0.95rem + 0.2vw, 1.125rem) !important;
  --h5p-radius-lg: clamp(1rem, 0.92rem + 0.45vw, 1.25rem) !important;
}

.h5p-drag-text .h5p-question-main-content {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px !important;
  color: var(--h5p-text) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* introduction */
.h5p-drag-text .h5p-question-introduction {
  background: rgb(255 255 255 / 0.22) !important;
  border: 1px solid #e7ebf0 !important;
  border-radius: var(--h5p-radius-lg) !important;
  padding: 18px 20px 12px 20px !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.h5p-drag-text [id^="h5p-drag-text-"][id$="-introduction"] {
  margin: 0 !important;
}

.h5p-drag-text .h5p-question-introduction p {
  margin: 0 0 5px;
  line-height: 1.6 !important;
  font-size: 1rem !important;
  color: var(--h5p-text) !important;
}
.h5p-drag-text .h5p-question-introduction strong {
  font-weight: 600 !important;
}
.h5p-drag-text .h5p-question-introduction p strong {
  font-weight: 600 !important;
}
.h5p-drag-text .h5p-question-introduction p:last-child {
  margin-bottom: 0 !important;
}

.h5p-drag-text .h5p-question-content,
.h5p-drag-text .h5p-drag-inner,
.h5p-drag-text .h5p-drag-wide-screen {
  width: 100% !important;
}

/* task layout */
.h5p-drag-text .h5p-drag-task {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* place word bank above sentence area */
.h5p-drag-text .h5p-drag-draggables-container {
  order: 1 !important;
}

.h5p-drag-text .h5p-drag-droppable-words-container {
  order: 2 !important;
}

/* sentence / drop area */
.h5p-drag-text .h5p-drag-droppable-words-container {
  background: rgb(255 255 255 / 0.22) !important;
  border: 1px solid #e7ebf0 !important;
  border-radius: var(--h5p-radius-lg) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.h5p-drag-text .h5p-drag-droppable-words {
  display: block !important;
  color: var(--h5p-text-soft) !important;
  font-size: 1rem !important;
  line-height: 2.7 !important;
}

.h5p-drag-text .h5p-drag-droppable-words > span {
  color: var(--h5p-text-soft) !important;
}

/* outer inline dropzones */
.h5p-drag-text .h5p-dropzone,
.h5p-drag-text .h5p-dropzone--inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--h5p-tile-height-compact) !important;
  height: var(--h5p-tile-height-compact) !important;
  vertical-align: middle !important;
  border-radius: var(--h5p-radius-sm) !important;
}

/* inner dropzones */
.h5p-drag-text .h5p-dropzone .ui-droppable,
.h5p-drag-text .h5p-dropzone--inline .ui-droppable,
.h5p-drag-text .h5p-dropzone--inline [aria-dropeffect],
.h5p-drag-text .ui-droppable {
  min-width: var(--h5p-dropzone-width) !important;
  min-height: var(--h5p-tile-height-compact) !important;
  height: var(--h5p-tile-height-compact) !important;
  padding: 0 !important;
  background: rgb(247 249 251 / 0.95) !important;
  border: 2px dashed rgb(124 109 242 / 0.72) !important;
  border-radius: var(--h5p-radius-sm) !important;
  box-sizing: border-box !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease !important;
}

.h5p-drag-text .h5p-dropzone .ui-droppable:hover,
.h5p-drag-text .h5p-dropzone--inline .ui-droppable:hover,
.h5p-drag-text .h5p-dropzone--inline [aria-dropeffect]:hover,
.h5p-drag-text .ui-droppable:hover {
  background: #fff !important;
  border-color: var(--h5p-green) !important;
  box-shadow: 0 0 0 3px rgb(88 204 108 / 0.12) !important;
}

.h5p-drag-text .h5p-dropzone .ui-droppable:focus,
.h5p-drag-text .h5p-dropzone .ui-droppable:focus-visible,
.h5p-drag-text .h5p-dropzone--inline .ui-droppable:focus,
.h5p-drag-text .h5p-dropzone--inline .ui-droppable:focus-visible,
.h5p-drag-text .h5p-dropzone--inline [aria-dropeffect]:focus,
.h5p-drag-text .h5p-dropzone--inline [aria-dropeffect]:focus-visible,
.h5p-drag-text .ui-droppable:focus,
.h5p-drag-text .ui-droppable:focus-visible {
  outline: none !important;
  background: #fff !important;
  border-color: var(--h5p-accent) !important;
  box-shadow: 0 0 0 4px rgb(241 165 45 / 0.18) !important;
  transform: translateY(-1px) !important;
}

.h5p-drag-text .h5p-drag-show-solution-container {
  min-height: 10px !important;
  border-radius: var(--h5p-radius-sm) !important;
}

/* word bank */
.h5p-drag-text .h5p-drag-draggables-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  background: rgb(255 255 255 / 0.22) !important;
  border: 1px solid #e7ebf0 !important;
  border-radius: var(--h5p-radius-lg) !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  justify-content: center;
}

.h5p-drag-text .h5p-drag-wide-screen .h5p-drag-draggables-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

/* draggable cards */
.h5p-drag-text .h5p-draggable,
.h5p-drag-text .h5p-draggable--has-handle,
.h5p-drag-text .ui-draggable,
.h5p-drag-text .ui-draggable-handle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--h5p-tile-height-compact) !important;
  padding: 0 16px !important;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(247 249 251 / 0.96) 100%) !important;
  border: 1px solid rgb(220 223 228 / 0.95) !important;
  border-bottom: 3px solid rgb(220 223 228 / 0.95) !important;
  border-radius: var(--h5p-radius-sm) !important;
  color: var(--h5p-text) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  cursor: grab !important;
  user-select: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 6px 16px rgb(60 60 60 / 0.06) !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease !important;
}
.h5p-drag-text .h5p-drag-show-solution-container.incorrect {
    color: #51ba82!important;
    font-weight: 600!important;
    border: 1px dashed #51ba82a1!important;
    background-color: var(--h5p-theme-feedback-correct-secondary)!important;
    padding: var(--h5p-theme-spacing-xxs) var(--h5p-theme-spacing-xs)!important;
}
.h5p-drag-text .h5p-draggable:hover,
.h5p-drag-text .h5p-draggable--has-handle:hover,
.h5p-drag-text .ui-draggable:hover,
.h5p-drag-text .ui-draggable-handle:hover {
  transform: translateY(-1px) !important;
  border-color: rgb(241 165 45 / 0.55) !important;
  box-shadow: 0 8px 18px rgb(60 60 60 / 0.08) !important;
}

.h5p-drag-text .h5p-draggable:focus,
.h5p-drag-text .h5p-draggable:focus-visible,
.h5p-drag-text .h5p-draggable--has-handle:focus,
.h5p-drag-text .h5p-draggable--has-handle:focus-visible,
.h5p-drag-text .ui-draggable:focus,
.h5p-drag-text .ui-draggable:focus-visible,
.h5p-drag-text .ui-draggable-handle:focus,
.h5p-drag-text .ui-draggable-handle:focus-visible {
  outline: none !important;
  border-color: var(--h5p-purple) !important;
  box-shadow: 0 0 0 4px rgb(124 109 242 / 0.18) !important;
  transform: translateY(-1px) !important;
}

.h5p-drag-text .h5p-draggable[aria-grabbed="true"],
.h5p-drag-text .ui-draggable[aria-grabbed="true"] {
  background: rgb(255 248 236 / 0.96) !important;
  border-color: var(--h5p-accent) !important;
  box-shadow: 0 0 0 4px rgb(241 165 45 / 0.14) !important;
  cursor: grabbing !important;
}

/* accessible hidden content */
.h5p-drag-text .h5p-hidden-read {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.h5p-drag-text .h5p-question-read {
  margin-top: 16px !important;
}

/* tablet */
@media (max-width: 768px) {
  .h5p-drag-text {
    --h5p-tile-height: clamp(2.4rem, 2.3rem + 0.15vw, 2.55rem) !important;
  }

  .h5p-drag-text .h5p-question-main-content {
    padding: 1px !important;
  }

  .h5p-drag-text .h5p-question-introduction,
  .h5p-drag-text .h5p-drag-droppable-words-container,
  .h5p-drag-text .h5p-drag-draggables-container {
    padding: 10px !important;
    border-radius: var(--h5p-radius-md) !important;
  }

  .h5p-drag-text .h5p-drag-droppable-words {
    font-size: 1rem !important;
    line-height: 2.45 !important;
  }

  .h5p-drag-text .h5p-dropzone .ui-droppable,
  .h5p-drag-text .h5p-dropzone--inline .ui-droppable,
  .h5p-drag-text .h5p-dropzone--inline [aria-dropeffect],
  .h5p-drag-text .ui-droppable {
    min-width: clamp(4rem, 3.8rem + 0.5vw, 5.2rem) !important;
  }

  .h5p-drag-text .h5p-draggable,
  .h5p-drag-text .h5p-draggable--has-handle,
  .h5p-drag-text .ui-draggable,
  .h5p-drag-text .ui-draggable-handle {
    padding: 0 10px !important;
    font-size: 0.96rem !important;
  }
}
@media (max-width: 480px) {
  .h5p-drag-text .h5p-question-main-content {
    padding: 0px !important;
  }

  .h5p-drag-text .h5p-drag-droppable-words {
    line-height: 2.2 !important;
  }

  .h5p-drag-text .h5p-dropzone .ui-droppable,
  .h5p-drag-text .h5p-dropzone--inline .ui-droppable,
  .h5p-drag-text .h5p-dropzone--inline [aria-dropeffect],
  .h5p-drag-text .ui-droppable {
    min-width: clamp(3.6rem, 3.4rem + 0.45vw, 4.6rem) !important;
  }

  .h5p-drag-text .h5p-draggables-container,
  .h5p-drag-text .h5p-drag-draggables-container {
    gap: 10px !important;
  }
}