/**
 * Quiz Exercises Styles
 * Enhanced styling for quizzes and exercises
 */

/* ============================================
   EXERCISE FILTERS
   ============================================ */

.exercise-filters {
    display: flex; gap: 1rem; justify-content: center; margin: 2rem 0 3rem; flex-wrap: wrap; }

.exercise-filters .filter-btn {
    padding: 0.75rem 1.5rem; background: white; border: 2px solid var(--border-color); border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; font-size: 0.9rem; }

.exercise-filters .filter-btn:hover {
    border-color: var(--primary-color); color: var(--primary-color); }

/* ============================================
   ENHANCED EXERCISE CARDS
   ============================================ */

.exercise-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; }

.exercise-card:hover {
    transform: translateY(-5px); }

.exercise-header {
    align-items: center; padding-bottom: 1rem; border-bottom: 2px solid var(--border-color); }

.exercise-header h3 {
    flex: 1; }

.difficulty-badge {
    text-transform: capitalize; }

.exercise-body {
    margin-top: 1rem; }

.exercise-body .question {
    line-height: 1.8; }

/* ============================================
   EXERCISE OPTIONS (MULTIPLE CHOICE)
   ============================================ */

.exercise-options {
    list-style: none; }

.option-letter {
    width: 35px; height: 35px; flex-shrink: 0; }

.exercise-explanation {
    border-left: 4px solid var(--info-color); }

.exercise-solution pre {
    overflow-x: auto; }

.exercise-solution code {
    font-family: 'Courier New', monospace; }

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

.exercise-notification {
    position: fixed; bottom: 20px; right: 20px; z-index: 10001; opacity: 0; }

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

@media (max-width: 768px) {

    .exercise-filters .filter-btn {
        white-space: nowrap; }

    .exercise-header {
        flex-direction: column; }
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.stat-item {
    text-align: center; }

.stat-label {
    letter-spacing: 0.5px; }


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