/* 2. CSS for your Drupal .libraries.yml */
/* Note: Selectors are relative to the quiz container for safe scoping */
[id^="image-quiz-"] .quiz-image-area { position: relative; width: 100%; }
[id^="image-quiz-"] .quiz-image { display: block; width: 100%; height: auto; }

/* Image Question/Note Styles */
[id^="image-quiz-"] .quiz-image-question { font-size: 1.4em; font-weight: bold; color: #333; margin: 0 0 15px 0; padding: 0 10px; }
[id^="image-quiz-"] .quiz-image-note { font-size: 1em; color: #555; margin: 15px 0 0 0; padding: 0 10px; font-style: italic; }

[id^="image-quiz-"] #quiz-hotspot-wrapper { position: relative; width: 100%; }
[id^="image-quiz-"] .quiz-hotspot-point {
    position: absolute; width: 28px; height: 28px; background: #007bff; color: white; border: 2px solid white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); transform: translate(-50%, -50%); cursor: pointer; transition: all 0.2s ease; z-index: 10;
}
[id^="image-quiz-"] .quiz-hotspot-point:hover { background: #0056b3; transform: translate(-50%, -50%) scale(1.1); }
[id^="image-quiz-"] .quiz-hotspot-point.answered { background: #28a745; cursor: not-allowed; opacity: 0.7; }

[id^="image-quiz-"] #quiz-point-counter { font-size: 1.2em; font-weight: bold; color: #333; margin-top: 15px; }

/* Modal Styles */
[id^="image-quiz-"] .quiz-modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
[id^="image-quiz-"] .quiz-modal-content { background-color: #fefefe; margin: 15% auto; padding: 30px; border-radius: 8px; width: 90%; max-width: 600px; position: relative; text-align: left; box-sizing: border-box; }
[id^="image-quiz-"] .quiz-close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }

[id^="image-quiz-"] .quiz-choice { display: flex; align-items: center; margin: 12px 0; cursor: pointer; }
[id^="image-quiz-"] #quiz-answers label { font-size: 1.1em; margin-left: 10px; flex: 1; cursor: pointer; }
[id^="image-quiz-"] #quiz-answers input[type="radio"] { flex-shrink: 0; width: 20px; height: 20px; cursor: pointer; }
[id^="image-quiz-"] #quiz-feedback { margin-top: 15px; font-weight: bold; font-size: 1.1em; }

/* Button Styles */
[id^="image-quiz-"] #quiz-submit-answer, 
[id^="image-quiz-"] #quiz-next-image-btn, 
[id^="image-quiz-"] #quiz-reset-button { 
    padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; font-size: 1em; 
}
[id^="image-quiz-"] #quiz-submit-answer:disabled { background-color: #ccc; }
[id^="image-quiz-"] #quiz-next-image-btn { background-color: #28a745; }
[id^="image-quiz-"] #quiz-reset-button { background-color: #007bff; }


/* Results */
[id^="image-quiz-"] .quiz-results-container { text-align: center; padding: 20px; background-color: #eef; border-radius: 8px; margin-top: 20px; }
[id^="image-quiz-"] .hidden { display: none; }

/* Result Media Styles */
[id^="image-quiz-"] .quiz-result-media { margin: 0 auto 20px auto; max-width: 100%; }
[id^="image-quiz-"] .quiz-result-media img,
[id^="image-quiz-"] .quiz-result-media video { max-width: 100%; height: auto; border-radius: 8px; }
[id^="image-quiz-"] .youtube-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; max-width: 100%; }
[id^="image-quiz-"] .youtube-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }