/**
 * Learn Page Fixes Styles
 * Additional styling for fixes and improvements
 */

/* ============================================
   QUIZ FIXES STYLES
   ============================================ */

.quiz-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 10000; overflow-y: auto; animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.quiz-body {
    min-height: 300px; }

.question-options {
    margin-top: 1.5rem; }

.option-item {
    cursor: pointer; transition: all 0.2s ease; }

.option-item:hover {
    transform: translateX(5px); }

.option-item.selected {
    border-color: var(--primary-color); }

.question-explanation {
    padding: 1rem; border-left: 4px solid var(--info-color); border-radius: 5px; }

@keyframes slideIn {
    from {
        opacity: 0; }
}

/* ============================================
   LINK NOTIFICATIONS
   ============================================ */

.link-notification {
    bottom: 20px; right: 20px; color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); max-width: 300px; }

/* ============================================
   QUIZ RESULTS ENHANCEMENTS
   ============================================ */

.quiz-results {
    text-align: center; }

@keyframes scaleIn {
}

.result-icon {
    font-size: 5rem; margin-bottom: 1rem; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.nav-links a::after {
    content: ''; }

/* ============================================
   REFERENCE LINKS ENHANCEMENTS
   ============================================ */

.ref-category a {
    padding-left: 20px; }

/* ============================================
   RESPONSIVE FIXES
   ============================================ */

@media (max-width: 768px) {
    .quiz-modal-content {
        margin: 0; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Focus styles for accessibility - Auto-added */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #0066cc; outline-offset: 2px; }