/* ===========================================
   INTERACTIVE COMPONENTS
   Flashcards, Quizzes, Diagrams, Mock Exams, Mind Maps
   =========================================== */

/* ============ FLASHCARD COMPONENT ============ */
.flashcards-section {
  margin: 3rem 0;
  padding: 2rem 0;
}

.flashcard-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.flashcard-counter {
  font-family: var(--font-handwritten);
  font-size: 1.2rem;
  color: var(--ocean-deep);
  min-width: 120px;
  text-align: center;
}

.flashcard-deck {
  perspective: 1000px;
  width: 100%;
  max-width: 500px;
  height: 300px;
  margin: 0 auto 1.5rem;
  cursor: pointer;
}

.flashcard {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flashcard.flipped {
  transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border-radius: 3px;
  box-shadow: var(--shadow-postit);
}

.flashcard-front {
  background: var(--postit-yellow);
  transform: rotate(-1deg);
}

.flashcard-front .term {
  font-family: var(--font-handwritten);
  font-size: 1.8rem;
  color: var(--text-primary);
  text-align: center;
}

.flashcard-front .tap-hint {
  position: absolute;
  bottom: 15px;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.4);
  font-family: var(--font-body);
}

.flashcard-back {
  background: var(--postit-blue);
  transform: rotateY(180deg) rotate(1deg);
}

.flashcard-back .definition {
  font-family: var(--font-handwritten);
  font-size: 1.3rem;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.5;
}

.flashcard-back .subtopic-ref {
  position: absolute;
  bottom: 15px;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.4);
  font-family: var(--font-body);
}

/* ============ QUIZ COMPONENT ============ */
.quiz-section {
  margin: 3rem 0;
  padding: 2rem 0;
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.quiz-score {
  font-family: var(--font-handwritten);
  font-size: 1.4rem;
  color: var(--ocean-deep);
  padding: 0.5rem 1rem;
  background: var(--postit-green);
  box-shadow: var(--shadow-postit);
  transform: rotate(1deg);
  display: none;
}

.quiz-score.visible { display: block; }

.quiz-question {
  background: white;
  border-left: 5px solid var(--ocean-light);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  border-radius: 0 8px 8px 0;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.3s;
}

.quiz-question.correct {
  border-left-color: var(--kelp);
  background: #f0faf0;
}

.quiz-question.incorrect {
  border-left-color: var(--coral);
  background: #faf0f0;
}

.quiz-question .q-number {
  font-family: var(--font-handwritten);
  font-size: 1.1rem;
  color: var(--ocean-mid);
  margin-bottom: 0.5rem;
}

.quiz-question .q-text {
  font-size: 1.05rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Multiple choice options */
.quiz-options {
  list-style: none;
}

.quiz-options li {
  margin-bottom: 0.5rem;
}

.quiz-options label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 0.95rem;
}

.quiz-options label:hover {
  background: var(--ocean-surface);
}

.quiz-options input[type="radio"],
.quiz-options input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--ocean-mid);
}

/* Short answer */
.quiz-short-answer {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--ocean-surface);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s;
}

.quiz-short-answer:focus {
  outline: none;
  border-color: var(--ocean-mid);
}

/* Answer reveal */
.quiz-answer {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  display: none;
}

.quiz-answer.visible { display: block; }

.quiz-answer.correct-answer {
  background: #e8f5e9;
  border-left: 4px solid var(--kelp);
}

.quiz-answer.incorrect-answer {
  background: #fce4e4;
  border-left: 4px solid var(--coral);
}

.quiz-answer .answer-label {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.quiz-answer .explanation {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.quiz-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ============ DIAGRAM COMPONENT ============ */
.diagram-container {
  margin: 2rem 0;
  text-align: center;
}

.diagram-container h4 {
  margin-bottom: 1rem;
}

.diagram-wrapper {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: inline-block;
  max-width: 100%;
  position: relative;
}

.diagram-wrapper svg {
  max-width: 100%;
  height: auto;
}

.diagram-controls {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

/* SVG label styling */
.diagram-label {
  cursor: pointer;
  transition: opacity 0.3s;
}

.diagram-label text {
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  fill: var(--ocean-deep);
}

.diagram-label.hidden text {
  fill: transparent;
}

.diagram-label.hidden rect {
  stroke: var(--ocean-light);
  stroke-dasharray: 4 2;
  fill: rgba(184, 228, 240, 0.3);
}

.diagram-label.revealed text {
  fill: var(--ocean-deep);
}

.diagram-label.revealed rect {
  fill: rgba(255, 247, 64, 0.4);
  stroke: none;
}

/* ============ MOCK EXAM COMPONENT ============ */
.mock-exam-section {
  margin: 3rem 0;
  padding: 2rem 0;
}

.mock-exam-intro {
  background: var(--postit-lavender);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-postit);
  transform: rotate(-0.3deg);
  font-family: var(--font-handwritten);
  font-size: 1.05rem;
}

.mock-exam-question {
  background: white;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  border-top: 4px solid var(--ocean-mid);
}

.mock-exam-question .context {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--sand);
  border-radius: 6px;
}

.exam-part {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border-left: 3px solid var(--ocean-surface);
}

.exam-part .part-label {
  font-weight: 700;
  color: var(--ocean-deep);
  font-size: 1rem;
}

.exam-part .question-text {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.mark-allocation {
  display: inline-block;
  background: var(--ocean-deep);
  color: white;
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 0.5rem;
}

.model-answer {
  margin-top: 0.75rem;
  padding: 1rem;
  background: #e8f5e9;
  border-radius: 8px;
  display: none;
  border-left: 4px solid var(--kelp);
}

.model-answer.visible { display: block; }

.model-answer .answer-heading {
  font-weight: 700;
  color: var(--kelp);
  margin-bottom: 0.5rem;
  font-family: var(--font-handwritten);
  font-size: 1.1rem;
}

.model-answer .examiner-tip {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--postit-orange);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: var(--font-handwritten);
}

.model-answer .examiner-tip::before {
  content: 'Examiner Tip: ';
  font-weight: 700;
}

.mock-total-marks {
  text-align: right;
  font-family: var(--font-handwritten);
  font-size: 1.3rem;
  color: var(--ocean-deep);
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--postit-yellow);
  box-shadow: var(--shadow-postit);
  display: inline-block;
  float: right;
  transform: rotate(1deg);
}

/* ============ MIND MAP COMPONENT ============ */
.mindmap-section {
  margin: 3rem 0;
  padding: 2rem 0;
}

.mindmap-container {
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.mindmap-container svg {
  width: 100%;
  min-width: 600px;
  height: auto;
}

.mindmap-node {
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}

.mindmap-node:hover {
  filter: brightness(1.1);
}

.mindmap-node text {
  font-family: 'Patrick Hand', cursive;
  fill: var(--text-primary);
  pointer-events: none;
}

.mindmap-node rect,
.mindmap-node ellipse {
  stroke-width: 2;
  transition: stroke-width 0.2s;
}

.mindmap-node:hover rect,
.mindmap-node:hover ellipse {
  stroke-width: 3;
}

.mindmap-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.mindmap-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Mind map tooltip */
.mindmap-tooltip {
  position: absolute;
  background: var(--postit-yellow);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  box-shadow: var(--shadow-postit);
  font-family: var(--font-handwritten);
  font-size: 0.9rem;
  max-width: 250px;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s;
}

.mindmap-tooltip.visible {
  opacity: 1;
}

/* ============ ANSWER REVEAL BUTTON ============ */
.reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.9rem;
  background: var(--ocean-surface);
  border: 2px solid var(--ocean-light);
  border-radius: 20px;
  font-family: var(--font-handwritten);
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--ocean-deep);
  transition: all 0.2s;
  margin-top: 0.5rem;
}

.reveal-btn:hover {
  background: var(--seafoam);
  border-color: var(--ocean-mid);
}

/* ============ COLLAPSIBLE SECTIONS ============ */
.collapsible-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: var(--ocean-surface);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-handwritten);
  font-size: 1.2rem;
  color: var(--ocean-deep);
  text-align: left;
  transition: background 0.2s;
  margin-bottom: 0.5rem;
}

.collapsible-trigger:hover {
  background: var(--seafoam);
}

.collapsible-trigger .arrow {
  transition: transform 0.3s;
  font-size: 0.8rem;
}

.collapsible-trigger.active .arrow {
  transform: rotate(90deg);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible-content.open {
  max-height: 5000px;
}

/* ============ TABLE STYLES ============ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}

.data-table th {
  background: var(--ocean-mid);
  color: white;
  padding: 0.7rem 1rem;
  text-align: left;
  font-family: var(--font-handwritten);
  font-size: 1.05rem;
}

.data-table td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--ocean-surface);
}

.data-table tr:nth-child(even) {
  background: rgba(184, 228, 240, 0.15);
}

.data-table tr:hover {
  background: rgba(115, 210, 222, 0.15);
}

/* ============ EQUATION / FORMULA BOX ============ */
.equation-box {
  background: white;
  border: 2px solid var(--ocean-light);
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2rem;
  font-family: var(--font-handwritten);
  color: var(--ocean-deep);
}

.equation-box .equation-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-family: var(--font-body);
  margin-bottom: 0.3rem;
}

/* ============ RESPONSIVE ADJUSTMENTS ============ */
@media (max-width: 768px) {
  .flashcard-deck {
    height: 250px;
    max-width: 100%;
  }

  .flashcard-front .term {
    font-size: 1.4rem;
  }

  .flashcard-back .definition {
    font-size: 1.1rem;
  }

  .mock-exam-question {
    padding: 1rem;
  }

  .exam-part {
    padding: 0.75rem;
  }

  .mindmap-container {
    padding: 0.75rem;
  }

  .quiz-buttons {
    flex-direction: column;
  }

  .quiz-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}