/* KGE premium styling for H5P Drag and Drop activities */
.h5p-dragquestion {
  font-family: Montserrat, Arial, sans-serif !important;
  background: #fcfcfb;
}

.h5p-dragquestion .h5p-draggable {
  box-sizing: border-box !important;
  border: 1px solid #c5a059 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #f7e7bb 0%, #e5c98d 46%, #c5a059 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 31, 24, .16) !important;
  color: #001f18 !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 10px !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  overflow: hidden !important;
  transition: box-shadow .18s ease, transform .18s ease !important;
}

.h5p-dragquestion .h5p-draggable:hover,
.h5p-dragquestion .h5p-draggable:focus {
  box-shadow: 0 7px 16px rgba(0, 31, 24, .22) !important;
  transform: translateY(-1px);
}

.h5p-dragquestion .h5p-draggable p {
  margin: 0 !important;
  padding: 4px 5px !important;
  color: #001f18 !important;
}

.h5p-dragquestion .h5p-dropzone {
  border: 1.5px dashed #1c59a1 !important;
  border-radius: 10px !important;
  background: rgba(245, 249, 254, .84) !important;
}

.h5p-dragquestion .h5p-dropzone.h5p-drag-over {
  border-color: #c5a059 !important;
  background: rgba(229, 201, 141, .24) !important;
}

.h5p-dragquestion .h5p-question-check-answer,
.h5p-dragquestion .h5p-question-try-again,
.h5p-dragquestion .h5p-question-show-solution {
  border: 1px solid #c5a059 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #e5c98d 0%, #c5a059 58%, #a9823f 100%) !important;
  box-shadow: 0 4px 12px rgba(0, 31, 24, .18) !important;
  color: #001f18 !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-weight: 700 !important;
}

.h5p-dragquestion .h5p-question-check-answer:hover,
.h5p-dragquestion .h5p-question-try-again:hover,
.h5p-dragquestion .h5p-question-show-solution:hover {
  background: linear-gradient(135deg, #f0dba6 0%, #d4b36f 58%, #a9823f 100%) !important;
}

.h5p-dragquestion .h5p-question-scorebar {
  border-color: #c5a059 !important;
}

/* KGE v1.8 — compact typography for ALL draggable answer labels */
.h5p-dragquestion .h5p-draggable,
.h5p-dragquestion .h5p-draggable *,
.h5p-dragquestion .h5p-draggable .h5p-inner,
.h5p-dragquestion .h5p-draggable .h5p-advanced-text,
.h5p-dragquestion .h5p-draggable .h5p-advanced-text *,
.h5p-dragquestion .h5p-draggable p,
.h5p-dragquestion .h5p-dropzone .h5p-draggable,
.h5p-dragquestion .h5p-dropzone .h5p-draggable *,
.h5p-dragquestion .h5p-dropzone .h5p-draggable p {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
}

/* KGE v1.9 — identical draggable typography in every interaction state */
.h5p-dragquestion .h5p-draggable,
.h5p-dragquestion .h5p-draggable *,
.h5p-dragquestion .h5p-draggable.ui-draggable,
.h5p-dragquestion .h5p-draggable.ui-draggable *,
.h5p-dragquestion .h5p-draggable.h5p-draggable-dropped,
.h5p-dragquestion .h5p-draggable.h5p-draggable-dropped *,
.h5p-dragquestion .h5p-dropzone .h5p-draggable,
.h5p-dragquestion .h5p-dropzone .h5p-draggable *,
.h5p-dragquestion .h5p-dropzone .h5p-draggable .h5p-inner,
.h5p-dragquestion .h5p-dropzone .h5p-draggable .h5p-advanced-text,
.h5p-dragquestion .h5p-dropzone .h5p-draggable .h5p-advanced-text *,
.h5p-dragquestion .h5p-dropzone .h5p-draggable p {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
}

/* =========================================================
   KGE v3.0 — CLEAN H5P.SortParagraphs styling
   Uses the actual native 0.11 DOM/classes from the library source.
   ========================================================= */

.h5p-sort-paragraphs,
.h5p-sort-paragraphs * {
  box-sizing:border-box;
  font-family:"Montserrat",Arial,sans-serif !important;
}

.h5p-sort-paragraphs {
  --h5p-theme-main-cta-base:#C5A059 !important;
  --h5p-theme-text-primary:#001F18 !important;
  --h5p-theme-text-secondary:#001F18 !important;
  --h5p-theme-feedback-correct-secondary:#F4F9F4 !important;
  --h5p-theme-feedback-correct-third:#3B7543 !important;
  --h5p-theme-feedback-correct-main:#3B7543 !important;
  --h5p-theme-feedback-incorrect-secondary:#FBF3F4 !important;
  --h5p-theme-feedback-incorrect-third:#8A1F2D !important;
  --h5p-theme-feedback-incorrect-main:#8A1F2D !important;
}

/* Intro panel */
.h5p-sort-paragraphs .h5p-question-introduction,
.h5p-sort-paragraphs .h5p-sort-paragraphs-task-description {
  margin-bottom:16px !important;
  padding:18px 22px !important;
  background:#FFFFFF !important;
  border:1.5px solid #D9BC78 !important;
  border-radius:12px !important;
  box-shadow:0 3px 8px rgba(0,31,24,.08) !important;
  color:#001F18 !important;
}
.h5p-sort-paragraphs .h5p-question-introduction p,
.h5p-sort-paragraphs .h5p-sort-paragraphs-task-description p {
  color:#001F18 !important;
}

/* One clean statement card */
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important; /* true vertical centring */
  gap:10px !important;
  min-height:74px !important;
  margin:10px 0 !important;
  padding:10px 10px 10px 18px !important;
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFCFB 100%) !important;
  border:1.5px solid #D9BC78 !important;
  border-radius:12px !important;
  box-shadow:0 4px 10px rgba(0,31,24,.10) !important;
  color:#001F18 !important;
}

/* Text area */
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-container {
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-self:stretch !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:6px 8px 6px 0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-container p {
  margin:0 !important;
  color:#001F18 !important;
  font-size:15px !important;
  line-height:1.4 !important;
  font-weight:500 !important;
}

/* The ACTUAL native button holder. Stretch to full card height, then centre its contents. */
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-button-container {
  display:flex !important;
  flex:0 0 auto !important;
  flex-direction:row !important;
  align-items:center !important;
  align-self:stretch !important;
  justify-content:center !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Native arrow pair container */
.h5p-sort-paragraphs .h5p-sort-paragraphs-buttons-container,
.h5p-sort-paragraphs .h5p-sort-paragraphs-buttons-container.vertical,
.h5p-sort-paragraphs .h5p-sort-paragraphs-buttons-container:not(.vertical) {
  position:static !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;
  gap:10px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Arrow buttons themselves: no positional hacks at all */
.h5p-sort-paragraphs .h5p-sort-paragraphs-buttons-container button,
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-button-container button {
  position:static !important;
  inset:auto !important;
  transform:none !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(135deg,#00382B 0%,#001F18 100%) !important;
  border:1px solid #C5A059 !important;
  border-radius:8px !important;
  box-shadow:0 3px 7px rgba(0,31,24,.14) !important;
  color:#E5C98D !important;
  line-height:1 !important;
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-buttons-container button::before,
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-button-container button::before {
  position:static !important;
  transform:none !important;
  margin:0 !important;
  color:#E5C98D !important;
  line-height:1 !important;
}

/* Disabled end-of-list arrow */
.h5p-sort-paragraphs .h5p-sort-paragraphs-buttons-container button:disabled,
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph-button-container button:disabled {
  background:#E9E9E7 !important;
  border-color:#D7D7D2 !important;
  color:#8A8A84 !important;
  box-shadow:none !important;
  opacity:1 !important;
}

/* Action buttons */
.h5p-sort-paragraphs .h5p-question-check-answer,
.h5p-question .h5p-question-check-answer {
  padding:10px 18px !important;
  background:linear-gradient(135deg,#00382B 0%,#001F18 100%) !important;
  border:1px solid #C5A059 !important;
  border-radius:10px !important;
  color:#FFFFFF !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:700 !important;
  box-shadow:0 3px 8px rgba(0,31,24,.14) !important;
}
.h5p-sort-paragraphs .h5p-question-try-again,
.h5p-sort-paragraphs .h5p-question-show-solution {
  background:linear-gradient(135deg,#F7E7BB 0%,#E5C98D 46%,#C5A059 100%) !important;
  border:1px solid #C5A059 !important;
  border-radius:10px !important;
  color:#001F18 !important;
  font-weight:700 !important;
}

/* Feedback */
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph.h5p-sort-paragraphs-correct {
  background:#F4F9F4 !important;
  border-color:#3B7543 !important;
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph.h5p-sort-paragraphs-wrong {
  background:#FBF3F4 !important;
  border-color:#8A1F2D !important;
}