@import url("quizDynamicView.css");
@import url("shared_non_default_styles.css");
@import url("https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Fredoka:wght@400;500;600&display=swap");

/* KIDS THEME: Candy - bubblegum pastels, floating sweets */

:root {
  --q-font-base: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif;
  --q-font-head: 'Bubblegum Sans', 'Fredoka', cursive;
  --q-radius: 18px;
  --q-radius-lg: 24px;
  --q-shadow: 0 8px 20px rgba(232,74,155,.15);
  --q-shadow-sm: 0 2px 8px rgba(232,74,155,.10);
  --q-frame-bg: linear-gradient(160deg, #ffe5f3 0%, #fde3ff 50%, #e3f4ff 100%);
  --q-frame-text: #6b4a62;
  --q-frame-border: #ff8fc7;
  --q-panel: #ffffff;
  --q-panel-2: #fff0f7;
  --q-panel-text: #5a3b52;
  --q-muted: #8a6b80;
  --q-border: #ffd3e8;
  --q-title: #e84a9b;
  --q-accent: #ff5da2;
  --q-accent-2: #8ed0ff;
  --q-accent-contrast: #ffffff;
  --q-btn-bg: #ff5da2;
  --q-btn-text: #ffffff;
  --q-btn-hover-bg: #e84a9b;
  --q-btn-hover-text: #ffffff;
  --q-disabled-bg: #f3d7e6;
  --q-disabled-text: #b890a6;
  --q-correct-bg: #f0fff6;
  --q-correct-border: #4fd18b;
  --q-correct-text: #14532d;
  --q-note-bg: #fff6fb;
  --q-flag-bg: #c44fd1;
  --q-sep: #ffc7e3;
  --q-option-bg: #fff5fa;
  --q-option-border: #ffd3e8;
  --q-option-hover: #ffe9f3;
  --q-option-selected-bg: #ff5da2;
  --q-option-selected-text: #ffffff;
}

/* =====================================================================
   DECORATIVE APPLICATION  (shared across themes; values come from :root)
   Only colours / borders / fonts / radius / shadow are touched.
   Layout, display and positioning are intentionally left to the base CSS.
   ===================================================================== */

.quizBody {
  font-family: var(--q-font-base) !important;
  background: var(--q-frame-bg) !important;
  color: var(--q-frame-text) !important;
  border: 2px solid var(--q-frame-border) !important;
  border-radius: var(--q-radius-lg) !important;
  box-shadow: var(--q-shadow) !important;
}

h1, .quizTitle, .documentFirstHeading {
  color: var(--q-title) !important;
  font-family: var(--q-font-head) !important;
}

.section_title,
.fieldsetLegendStyle { color: var(--q-accent) !important; }

.questionTitleClass {
  color: var(--q-panel-text) !important;
  font-family: var(--q-font-head) !important;
}

/* Per-question reading surface (kept light & legible in every theme) */
.questionStyle {
  background: var(--q-panel) !important;
  color: var(--q-panel-text) !important;
  border: 1px solid var(--q-border) !important;
  border-radius: var(--q-radius) !important;
  box-shadow: var(--q-shadow-sm) !important;
}

/* Meta / info card */
.step1Meta {
  background: var(--q-panel) !important;
  border: 1px solid var(--q-border) !important;
  border-radius: var(--q-radius) !important;
  box-shadow: var(--q-shadow-sm) !important;
}
.metaLabel { color: var(--q-panel-text) !important; }
.metaValue { color: var(--q-muted) !important; }
.font-icon-wrapper {
  background: var(--q-panel) !important;
  color: var(--q-accent) !important;
  border-radius: var(--q-radius) !important;
}

/* Style / Mode option cards */
.option-card {
  background: var(--q-option-bg) !important;
  border: 2px solid var(--q-option-border) !important;
  border-radius: var(--q-radius) !important;
  color: var(--q-panel-text) !important;
}
.option-card:hover {
  background: var(--q-option-hover) !important;
  border-color: var(--q-accent) !important;
}
.option-card input[type="radio"]:checked + label::before {
  border-left-color: var(--q-accent) !important;
}

/* Buttons */
.navigationButton,
#startQuiz,
#buttonLayer input,
.show-answer-class,
.hide-answer-class,
.quiz-modal-footer button,
#statsViewDisplay button {
  background: var(--q-btn-bg) !important;
  color: var(--q-btn-text) !important;
  border: 1px solid var(--q-btn-bg) !important;
  border-radius: var(--q-radius) !important;
}
.navigationButton:hover,
#startQuiz:hover,
.quiz-modal-footer button:hover,
#statsViewDisplay button:hover {
  background: var(--q-btn-hover-bg) !important;
  color: var(--q-btn-hover-text) !important;
}
.navigationButton.disabled-button {
  background: var(--q-disabled-bg) !important;
  color: var(--q-disabled-text) !important;
}

/* Correct answer / explanation panel */
.correct-answer-class {
  background: var(--q-correct-bg) !important;
  border: 2px dotted var(--q-correct-border) !important;
  color: var(--q-correct-text) !important;
  border-radius: var(--q-radius) !important;
}

/* Notes, flag, action icons */
.notes-content {
  background: var(--q-note-bg) !important;
  border-left: 3px solid var(--q-accent) !important;
  box-shadow: inset 5px 0 0 0 var(--q-accent) !important;
  color: var(--q-muted) !important;
}
.add-question-notes,
.question-flag {
  background: var(--q-panel-2) !important;
  color: var(--q-panel-text) !important;
  border-radius: var(--q-radius) !important;
}
.question-flag.flagged { background: var(--q-flag-bg) !important; color: #fff !important; }
.quiz_actions, .quiz_action_text, .quiz_action_icon { color: var(--q-accent) !important; }

/* Separator / tracker / points / current question */
.q_separator { background: var(--q-sep) !important; }
#tracker .trackItem, .trackItem {
  background: var(--q-panel-2) !important;
  color: var(--q-panel-text) !important;
  border-radius: var(--q-radius) !important;
}
#currentQuestion { color: var(--q-accent) !important; }
.question-points { color: var(--q-muted) !important; }

/* Modals */
.modal-content,
#statsViewDisplay .modal-content {
  background: var(--q-panel) !important;
  color: var(--q-panel-text) !important;
  border-radius: var(--q-radius) !important;
}
.close_modal { background: var(--q-accent) !important; color: var(--q-accent-contrast) !important; }
.close_modal:hover { background: var(--q-accent-2) !important; }

/* Drag & drop answer chips */
.dragDropInplaceLocked {
  background: var(--q-accent) !important;
  border: 2px solid var(--q-accent-2) !important;
  color: var(--q-accent-contrast) !important;
}
.DragDropInplaceLockEditField,
.DragDropInplaceLockEditFieldDropped { background: var(--q-panel-2) !important; }
.DragDropInplaceLockEditAnswerOption { border-color: var(--q-accent) !important; color: var(--q-panel-text) !important; }

/* ---- Answer options (override answers_styles_formatter.css) ---- */
.q-answer-options-container label { color: var(--q-panel-text) !important; }
.q-answer-options-container:hover { background: var(--q-option-hover) !important; }
.button-style-input label {
  background: var(--q-option-bg) !important;
  color: var(--q-panel-text) !important;
}
.button-style-input:has(input:checked),
.button-style-input input:checked + label {
  background: var(--q-option-selected-bg) !important;
  color: var(--q-option-selected-text) !important;
}

/* =====================================================================
   PLAYFUL ANIMATED BACKGROUND  (CSS only, lives on .quizBody::before)
   ===================================================================== */
.quizBody { position: relative !important; }
.quizBody > * { position: relative; z-index: 1; }
.quizBody::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .10;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><text x='22' y='58' font-size='42'>🍬</text><text x='92' y='124' font-size='34'>🍭</text></svg>");
  background-size: 150px 150px;
  animation: q-theme-drift 52s linear infinite;
}
@keyframes q-theme-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 -1400px; }
}
@media (prefers-reduced-motion: reduce) {
  .quizBody::before { animation: none; }
}

/* Educator override: submit button footer - plain top border, no shadow */
#buttonLayer {
  margin-top: 30px !important;
  border-top: 2px solid grey !important;
  box-shadow: none !important;
}