/* Tampilan soal Wello buat Interactive Video. Dipasang pemutar (main.js) dan paket
   SCORM kalau kontennya dibikin editor dengan tema nyala (content.json: wello.tema),
   dan dipakai pratinjau di atas video di editor (buat.js), jadi yang dilihat
   pembuat soal = yang dilihat murid. Satuan em: Interactive Video ngeskala font
   ikut lebar video. Platform lain (Moodle, Lumi) nggak kenal file ini, di sana
   soalnya tampil bawaan H5P. */
.h5p-interactive-video {
  --tema-aksen: #a94f36;
  --tema-gelap: #2c3e38;
  --tema-redup: #56707a;
  --tema-lembut: #f6f4ec;
  --tema-garis: #e2ddcc;
}

/* Kotak soal besar */
.h5p-interactive-video .h5p-interaction.h5p-poster:not(.h5p-link-interaction) {
  border-top: 0.3em solid var(--tema-aksen);
  border-radius: 0.9em;
  background: #fff;
  box-shadow: 0 0.6em 2em rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  color: var(--tema-gelap);
}
.h5p-interactive-video .h5p-interaction.h5p-poster:not(.h5p-link-interaction) .h5p-interaction-inner { padding: 0.4em 0.6em 0; box-sizing: border-box; }
.h5p-interactive-video .h5p-question-introduction {
  margin: 0.4em 0 0.8em;
  color: var(--tema-gelap);
  font-weight: 600;
  line-height: 1.45;
}
.h5p-interactive-video .h5p-question-introduction p { margin: 0 0 0.4em; }
.h5p-interactive-video .h5p-question-introduction strong {
  display: inline-block;
  margin-bottom: 0.15em;
  color: var(--tema-aksen);
  font-size: 0.8em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Pilihan ganda dan benar/salah: tiap pilihan jadi kartu. Kartunya di
   .h5p-alternative-container (begitu H5P nyusunnya); yang udah dinilai benar/salah
   dibiarin pakai warna hijau/merah bawaan H5P. */
.h5p-interactive-video .h5p-multichoice .h5p-answers { margin: 0; padding: 0; list-style: none; }
.h5p-interactive-video .h5p-multichoice .h5p-answer:not(.h5p-correct):not(.h5p-wrong) .h5p-alternative-container,
.h5p-interactive-video .h5p-true-false-answer:not(.correct):not(.wrong) {
  border: 1px solid var(--tema-garis);
  border-radius: 0.6em;
  background: var(--tema-lembut);
  box-shadow: none;
  color: var(--tema-gelap);
  transition: border-color 0.15s, background 0.15s;
}
.h5p-interactive-video .h5p-multichoice .h5p-answer:not([aria-disabled="true"]):not(.h5p-correct):not(.h5p-wrong):hover .h5p-alternative-container,
.h5p-interactive-video .h5p-true-false-answer:not([aria-disabled="true"]):not(.correct):not(.wrong):hover {
  border-color: var(--tema-aksen);
  background: #fff;
}
.h5p-interactive-video .h5p-multichoice .h5p-answer[aria-checked="true"]:not(.h5p-correct):not(.h5p-wrong) .h5p-alternative-container,
.h5p-interactive-video .h5p-true-false-answer[aria-checked="true"]:not(.correct):not(.wrong) {
  border-color: var(--tema-aksen);
  background: #fbefe9;
  box-shadow: inset 0 0 0 1px var(--tema-aksen);
  color: var(--tema-gelap);
}
.h5p-interactive-video .h5p-multichoice .h5p-answer[aria-checked="true"] .h5p-alternative-container:before { color: var(--tema-aksen); }
.h5p-interactive-video .h5p-true-false-answer { font-weight: 600; }

/* Isian, seret kata, tandai kata */
.h5p-interactive-video .h5p-blanks .h5p-text-input {
  border: 1px solid var(--tema-redup);
  border-radius: 0.4em;
  padding: 0.15em 0.4em;
  background: #fff;
}
.h5p-interactive-video .h5p-blanks .h5p-text-input:focus { outline: 2px solid var(--tema-aksen); outline-offset: 1px; }
.h5p-interactive-video .h5p-drag-text .h5p-drag-dropzone-container .ui-droppable {
  border: 1px dashed var(--tema-redup);
  border-radius: 0.4em;
  background: var(--tema-lembut);
}
.h5p-interactive-video .h5p-drag-text .h5p-drag-draggables-container .ui-draggable,
.h5p-interactive-video .h5p-drag-text .h5p-drag-dropzone-container .ui-draggable {
  border: 1px solid var(--tema-aksen);
  border-radius: 0.4em;
  background: #fff;
  color: var(--tema-gelap);
  font-weight: 600;
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.12);
}
.h5p-interactive-video .h5p-mark-the-words .h5p-word-selectable-words [role="option"] { border-radius: 0.3em; }
.h5p-interactive-video .h5p-mark-the-words [aria-selected="true"] { background: #fbefe9; box-shadow: inset 0 -2px 0 var(--tema-aksen); }

/* Tombol Periksa, Coba lagi, Lihat jawaban */
.h5p-interactive-video .h5p-question-buttons { padding-top: 0.2em; }
.h5p-interactive-video .h5p-joubelui-button {
  border-radius: 0.5em;
  background: var(--tema-aksen);
  color: #fff;
  font-weight: 600;
}
.h5p-interactive-video .h5p-joubelui-button:hover,
.h5p-interactive-video .h5p-joubelui-button:focus { background: var(--tema-gelap); }
.h5p-interactive-video .h5p-joubelui-button:focus-visible { outline: 2px solid #f4cd76; outline-offset: 2px; }

/* Soal yang tampil sebagai tombol di video */
.h5p-interactive-video div > .h5p-interaction-button { background-color: var(--tema-aksen); }
.h5p-interactive-video div:hover > .h5p-interaction-button { background-color: var(--tema-gelap); }
.h5p-interactive-video div:focus > .h5p-interaction-button { border-color: #f4cd76; }
.h5p-interactive-video .h5p-interaction-label { background: rgba(44, 62, 56, 0.92); }