/* =========================================================
   H5P Single Choice Set - ENDE
   Modern LMS / Duolingo-inspired UI
   Scoped to the result slide only
   ========================================================= */

/* ========================================
   H5P Flashcards - START
   Circle with "i" inside
   Scoped to cardholder
   ======================================== */

.h5p-cardholder .h5p-imagetext .joubel-tip-container {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin-left: 0.4rem !important;
  border-radius: 50% !important;
  background: #f7f9fb !important;
  border: 1.5px solid #dcdfe4 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.15s ease !important;
}
.joubel-icon-tip-normal .h5p-icon-info:before {
    content: '\e905';
    margin-left: 0px !important;
    color: rgb(108 95 198) !important;
    font-size: 1.5em !important;
    margin-bottom: 5px !important;
}
.h5p-cardholder .h5p-imagetext .joubel-tip-container:hover {
  background: #ede9ff !important;
  border-color: #b7abf5 !important;
  transform: translateY(-1px) !important;
}

.h5p-cardholder .h5p-imagetext .joubel-tip-container:active {
  transform: translateY(0) scale(0.96) !important;
}

.h5p-cardholder .h5p-imagetext .joubel-tip-container:focus,
.h5p-cardholder .h5p-imagetext .joubel-tip-container:focus-visible {
  outline: 2px solid rgba(124, 109, 242, 0.22) !important;
  outline-offset: 2px !important;
}

/* hide the old H5P icon layers */
.h5p-cardholder .h5p-imagetext .joubel-tip-container .h5p-icon-shadow,
.h5p-cardholder .h5p-imagetext .joubel-tip-container .h5p-icon-speech-bubble {
  display: none !important;
}

/* wrapper */
.h5p-cardholder .h5p-imagetext .joubel-tip-container .joubel-icon-tip-normal {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* make the "i" the only visible icon */
.h5p-cardholder .h5p-imagetext .joubel-tip-container .h5p-icon-info {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #7c6df2 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* optional inline alignment with the word */
.h5p-cardholder .h5p-imagetext {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.1rem !important;
}
/* ----------------------------------------
   Single visible card
   ---------------------------------------- */
.h5p-inner .h5p-card {
  box-sizing: border-box !important;
}

.h5p-inner .h5p-cardholder {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;

  background: var(--fc-surface) !important;
  border: 1px solid var(--fc-border) !important;
  border-radius: var(--fc-radius-xl) !important;
  box-shadow: var(--fc-shadow) !important;
}

/* Emphasize the active card slightly more */
.h5p-inner .h5p-card.h5p-current .h5p-cardholder {
  border-color: rgb(88 204 108 / 0.28) !important;
  box-shadow:
    0 16px 36px rgb(60 60 60 / 0.10),
    0 0 0 4px rgb(88 204 108 / 0.08) !important;
}

/* ----------------------------------------
   Image area
   ---------------------------------------- */
.h5p-inner .h5p-imageholder {
  position: relative !important;
    overflow: hidden !important;
    background: #ffffff00 !important;
    border-bottom: none !important;
    margin: 0px !important;
    border-radius: 0px !important;
}

.h5p-inner .h5p-clue {
  display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    background: white !important;
    max-height: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    transition: transform 0.15s !important;
    border-radius: 0px !important;
}

/* Optional soft image gloss */
.h5p-inner .h5p-imageholder::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.18) 0%,
      rgb(255 255 255 / 0) 35%
    ) !important;
  pointer-events: none !important;
}

/* ----------------------------------------
   Bottom content area
   ---------------------------------------- */
.h5p-inner .h5p-foot {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  padding: 1rem .2rem .3rem!important;  
  background: var(--fc-surface) !important;
  box-sizing: border-box !important;
}

/* German clue word */
.h5p-inner .h5p-imagetext {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;

  min-height: 2.75rem !important;
  padding: 0.65rem 1rem !important;
  margin: 0 !important;

  background: linear-gradient(180deg, #fff8eb 0%, #fff2d4 100%) !important;
  border: 1px solid rgb(241 165 45 / 0.22) !important;
  border-radius: 999px !important;

  color: #8a5a00 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
  box-sizing: border-box !important;
}

/* ----------------------------------------
   Answer area
   ---------------------------------------- */
.h5p-inner .h5p-answer {
  width: 100% !important;
  margin: 0 !important;
}

.h5p-inner .h5p-input.h5p-theme-input {
  display: flex !important;
  align-items: stretch !important;
  gap: 0.2rem !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Text input */
.h5p-inner .h5p-textinput {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 3.25rem !important;
  padding: 0 1rem !important;
  background: var(--fc-surface-soft) !important;
  border: 2px solid var(--fc-border) !important;
  border-radius: var(--fc-radius-md) !important;
  color: var(--fc-text) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  outline: none !important;
  box-shadow: none !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    transform 0.15s ease !important;
  box-sizing: border-box !important;
  text-align: center!important;
}

.h5p-inner .h5p-textinput::placeholder {
  color: var(--fc-text-soft) !important;
  font-weight: 500 !important;
}
/* Strong accessible focus */
.h5p-inner .h5p-textinput:focus,
.h5p-inner .h5p-textinput:focus-visible {
  background: #ffffff !important;
  border-color: var(--fc-purple) !important;
  box-shadow: 0 0 0 4px rgb(124 109 242 / 0.14) !important;
}

/* ----------------------------------------
   Check button
   ---------------------------------------- */
.h5p-inner .h5p-theme-check {
  flex: 0 0 auto !important;
  min-height: 3.25rem !important;
  padding: 0 1.2rem !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  background: #2e7d05 !important;
  border: none !important;
  border-bottom: 4px solid #215a04 !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition:
    transform 0.15s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.h5p-inner .h5p-theme-check:hover {
  filter: brightness(1.03) !important;
}

.h5p-inner .h5p-theme-check:active {
  transform: translateY(2px) !important;
  border-bottom-width: 2px !important;
}

.h5p-inner .h5p-theme-check:focus,
.h5p-inner .h5p-theme-check:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgb(88 204 108 / 0.2) !important;
}

/* Keep label clean */
.h5p-inner .h5p-theme-check .h5p-theme-label {
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
}

/* ----------------------------------------
   Slightly soften non-current cards
   ---------------------------------------- */
.h5p-inner .h5p-card[aria-hidden="true"] .h5p-cardholder {
  opacity: 0.92 !important;
}

/* ----------------------------------------
   Tablet / smaller screens
   ---------------------------------------- */
@media (max-width: 768px) {

.h5p-flashcards .h5p-answer .h5p-correct .h5p-feedback-label, .h5p-flashcards .h5p-answer .h5p-wrong .h5p-feedback-label{
  justify-content: center !important;
    display: flex;
}
  .h5p-inner .h5p-clue {
    padding: 0rem !important;
  }

  .h5p-inner .h5p-foot {
    padding: 0.7rem 0 0 0 !important;
    gap: 0.85rem !important;
  }

  .h5p-inner .h5p-imagetext {
    width: 100% !important;
    font-size: 1rem !important;
  }

  .h5p-inner .h5p-input.h5p-theme-input {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .h5p-inner .h5p-theme-check {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ----------------------------------------
   Mobile
   ---------------------------------------- */
@media (max-width: 480px) {
  .h5p-inner .h5p-cardholder {
    border-radius: 20px !important;
  }

  .h5p-inner .h5p-clue {
    padding: 0rem !important;
  }

  .h5p-inner .h5p-foot {
    padding: 0.7rem 0 0 0 !important;
  }

  .h5p-inner .h5p-imagetext {
    min-height: 2.5rem !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.96rem !important;
  }

  .h5p-inner .h5p-textinput,
  .h5p-inner .h5p-theme-check {
    min-height: 3rem !important;
  }
}
/* =========================================================
   H5P Navigation
   Duolingo-like progress bar for:
   .h5p-navigation .h5p-visual-progress
   ========================================================= */

/* Navigation layout */
.h5p-navigation {
  display: grid !important;
  grid-template-columns: auto minmax(180px, 420px) auto !important;
  align-items: center !important;
  gap: 0.9rem !important;
  width: 96% !important;
  max-width:96% !important;
  background-color: #ffffff00!important;
}

/* Hide empty button space more gracefully if a button is invisible */
.h5p-navigation .h5p-visibility-hidden {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================
   Progress Bar Track
   Adapted from your JoubelUI code
   ========================= */
.h5p-navigation .h5p-visual-progress {
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 420px !important;
  height: 14px !important;
  margin: 0 auto !important;
  background: #ebf0f4 !important;
  border-radius: 999px !important;
  box-shadow:rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset !important;
  border: none !important;
    padding: 0 0 2px 0 !important;
}

/* =========================
   Filled Part
   Adapted from your JoubelUI code
   ========================= */
.h5p-navigation .h5p-visual-progress-inner {
  position: relative !important;
  height: 13px !important;
  min-width: 14px !important; /* keeps rounded look even at low % */
  border-radius: 999px !important;
  background: linear-gradient(180deg, #58cc6c 0%, #46b85a 100%) !important;
  box-shadow:
    0 3px 0 #3ca24d,
    0 6px 12px rgb(88 204 108 / 0.22) !important;
}

/* Glossy highlight like Duolingo */
.h5p-navigation .h5p-visual-progress-inner::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 8px !important;
  right: 8px !important;
  height: 38% !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / 0.24) !important;
  pointer-events: none !important;
}

/* =========================
   Navigation Buttons
   Optional polish so the bar matches the buttons
   ========================= */
.h5p-navigation .h5p-theme-nav-button,
.h5p-navigation .h5p-theme-show-results {
  min-height: 42px !important;
  padding: 0 1rem !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition:
    transform 0.15s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease !important;
}

.h5p-navigation .h5p-theme-next,
.h5p-navigation .h5p-theme-show-results {
  background: linear-gradient(180deg, #6153d6 0%, #5546c4 100%) !important;
  color: #fff !important;
  box-shadow:none !important;
}

.h5p-navigation .h5p-theme-previous {
  background: #ffffff !important;
  color: #6d7280 !important;
  border: 1px solid #e5e9ef !important;
  box-shadow:
    0 2px 6px rgb(60 60 60 / 0.05) !important;
}

.h5p-navigation .h5p-theme-next:hover,
.h5p-navigation .h5p-theme-show-results:hover,
.h5p-navigation .h5p-theme-previous:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.02) !important;
}

.h5p-navigation .h5p-theme-next:active,
.h5p-navigation .h5p-theme-show-results:active,
.h5p-navigation .h5p-theme-previous:active {
  transform: translateY(2px) scale(0.99) !important;
}

/* Label styling */
.h5p-navigation .h5p-theme-label {
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 680px) {
  .h5p-navigation {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 1em 0 0 0 !important;
    margin-left: 10px!important;
  }

  .h5p-navigation .h5p-visual-progress {
    grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
  }

  .h5p-theme .h5p-navigation > .h5p-theme-previous,
  .h5p-theme .h5p-navigation > .h5p-theme-next {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    padding: 0 !important;
    justify-self: center !important;
    justify-content: center!important;
  }

  .h5p-navigation .h5p-theme-show-results {
    width: 100% !important;
  }
}

/* =========================================
   H5P Evaluation Area — Duolingo-inspired
   Clean, friendly, app-like UI
   ========================================= */
   .h5p-question-evaluation-container.evaluation-mode {
  --duo-orange: #f1a52d;
  --duo-orange-dark: #d98d17;
  --duo-purple: #7c6df2;
  --duo-purple-dark: #6857e6;
  --duo-green: #58cc6c;
  --duo-red-soft: #fff4f1;
  --duo-yellow-soft: #fff8e8;
  --duo-surface: #ffffff;
  --duo-surface-soft: #f7f9fb;
  --duo-border: #e7ebf0;
  --duo-text: #3c3c3c;
  --duo-text-soft: #5f6b7a;
  --duo-shadow:
    0 10px 30px rgb(60 60 60 / 0.08),
    0 2px 8px rgb(60 60 60 / 0.04);

  display: flex !important;
  gap: 1rem !important;
  margin-top: 1.25rem !important;
  padding: 1rem !important;
  background-color: rgb(255 255 255 / 0.22) !important;
  border: 1px solid var(--duo-border) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px) {
.h5p-theme .h5p-question-evaluation-container.evaluation-mode.container-column{
  margin-top: 0px !important;
  gap: 10px !important;
}
}
/* mobile */
@media (max-width: 640px) {
  .h5p-question-evaluation-container.evaluation-mode {
    padding: 0.85rem !important;
    border-radius: 20px !important;
  }

  .h5p-question-evaluation-container.evaluation-mode .h5p-joubelui-score-bar {
    align-items: stretch !important;
  }

  .h5p-question-evaluation-container.evaluation-mode .h5p-joubelui-score-numeric {
    align-self: flex-start !important;
  }

  .h5p-question-evaluation-container.evaluation-mode .h5p-question-buttons.h5p-question-visible.has-scorebar {
    justify-content: stretch !important;
  }

  .h5p-question-evaluation-container.evaluation-mode .h5p-theme-button.h5p-theme-secondary-cta {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

html.h5p-iframe .h5p-content {
    width: 99.5%!important;
    justify-content: center!important;
}