/* ============================================
   EDU247 QUIZ - FRONTEND STYLES (extracted)
   Moved from user/user-quiz.php <style> block
============================================= */

.edu247-quiz-wrapper * {
    box-sizing: border-box;
}

/* Font stack with emoji support for all browsers including Firefox */
.edu247-quiz-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Symbol', 'Segoe UI Emoji', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
    min-height: 100vh;
    position: relative;
}

/* Header */
.edu247-quiz-wrapper .edu247-header {
    background: white;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.edu247-quiz-wrapper .edu247-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edu247-quiz-wrapper .edu247-logo-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.edu247-quiz-wrapper .edu247-logo-text h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}

.edu247-quiz-wrapper .edu247-logo-text p {
    margin: 2px 0 0 0;
    font-size: 13px;
    color: #64748b;
}

/* Section Titles */
.edu247-quiz-wrapper .edu247-section-title {
    text-align: center;
    margin-bottom: 32px;
}

.edu247-quiz-wrapper .edu247-section-title h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.edu247-quiz-wrapper .edu247-section-title p {
    font-size: 16px;
    color: #64748b;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Category Filter */
.edu247-quiz-wrapper .edu247-category-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.edu247-quiz-wrapper .edu247-cat-btn {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
}

.edu247-quiz-wrapper .edu247-cat-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.edu247-quiz-wrapper .edu247-cat-btn.active {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    border-color: transparent;
    color: white;
}

/* Quiz Cards Grid */
.edu247-quiz-wrapper .edu247-quiz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.edu247-quiz-wrapper .edu247-quiz-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.edu247-quiz-wrapper .edu247-quiz-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: #3b82f6;
}

.edu247-quiz-wrapper .edu247-card-image {
    height: 160px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    position: relative;
    overflow: hidden;
}

.edu247-quiz-wrapper .edu247-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edu247-quiz-wrapper .edu247-card-image .edu247-emoji {
    filter: grayscale(0);
}

.edu247-quiz-wrapper .edu247-card-body {
    padding: 24px;
}

.edu247-quiz-wrapper .edu247-card-category {
    display: inline-block;
    padding: 4px 12px;
    background: #ede9fe;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.edu247-quiz-wrapper .edu247-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.edu247-quiz-wrapper .edu247-card-desc {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.edu247-quiz-wrapper .edu247-card-footer {
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.edu247-quiz-wrapper .edu247-question-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.edu247-quiz-wrapper .edu247-start-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #3b82f6;
}

/* Dropdown Section */
.edu247-quiz-wrapper .edu247-dropdown-section {
    background: white;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 32px;
}

.edu247-quiz-wrapper .edu247-dropdown-section label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
}

.edu247-quiz-wrapper .edu247-dropdown-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.edu247-quiz-wrapper .edu247-dropdown-row select {
    flex: 1;
    min-width: 280px;
    padding: 14px 18px;
    font-size: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    color: #1e293b;
    cursor: pointer;
    transition: border-color 0.3s;
}

.edu247-quiz-wrapper .edu247-dropdown-row select:focus {
    outline: none;
    border-color: #3b82f6;
}

.edu247-quiz-wrapper .edu247-btn {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.edu247-quiz-wrapper .edu247-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: white;
}

.edu247-quiz-wrapper .edu247-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.edu247-quiz-wrapper .edu247-btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.edu247-quiz-wrapper .edu247-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.edu247-quiz-wrapper .edu247-btn-secondary {
    background: #f1f5f9;
    color: #475569;
}

.edu247-quiz-wrapper .edu247-btn-secondary:hover {
    background: #e2e8f0;
}

/* (Remaining styles: progress view, question card, options, nav, dots, results, loading, toast, responsive)
   For brevity the rest of the styles remain identical but are namespaced under .edu247-quiz-wrapper
*/

/* Quiz Progress / Question / Options / Results / Loading / Toast */
.edu247-quiz-wrapper .edu247-progress-header { background: white; border-radius: 20px; padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.edu247-quiz-wrapper .edu247-progress-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.edu247-quiz-wrapper .edu247-progress-info h2 { font-size:24px; font-weight:700; color:#1e293b; margin:0 0 4px 0; }
.edu247-quiz-wrapper .edu247-progress-info p { font-size:14px; color:#64748b; margin:0; }
.edu247-quiz-wrapper .edu247-progress-stats { display:flex; align-items:center; gap:24px; }
.edu247-quiz-wrapper .edu247-timer { display:flex; align-items:center; gap:8px; background:#f1f5f9; padding:10px 18px; border-radius:12px; }
.edu247-quiz-wrapper .edu247-timer-text { font-family:'Courier New', monospace; font-size:18px; font-weight:700; color:#1e293b; }
.edu247-quiz-wrapper .edu247-counter-num { font-size:22px; font-weight:700; color:#3b82f6; }
.edu247-quiz-wrapper .edu247-progress-bar { height:10px; background:#e2e8f0; border-radius:10px; overflow:hidden; }
.edu247-quiz-wrapper .edu247-progress-fill { height:100%; background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%); border-radius:10px; transition: width 0.5s ease; width:0%; }
.edu247-quiz-wrapper .edu247-question-card { background:white; border-radius:20px; padding:32px; box-shadow:0 4px 15px rgba(0,0,0,0.08); margin-bottom:24px; }
.edu247-quiz-wrapper .edu247-options { display:flex; flex-direction:column; gap:14px; }
.edu247-quiz-wrapper .edu247-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
}
/* Hide native radio visually but keep it accessible for screen readers */
.edu247-quiz-wrapper .edu247-option-radio { position: absolute !important; left: -9999px !important; }
.edu247-quiz-wrapper .edu247-option:hover {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
    transform: translateX(6px);
}
.edu247-quiz-wrapper .edu247-option.selected {
    border-color: #3b82f6 !important;
    background: #dbeafe !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.edu247-quiz-wrapper .edu247-option.correct { border-color:#10b981; background:#d1fae5; }
.edu247-quiz-wrapper .edu247-option.incorrect { border-color:#ef4444; background:#fee2e2; }
.edu247-quiz-wrapper .edu247-option-letter {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #475569;
    flex-shrink: 0;
    transition: all 0.25s ease;
    min-width: 44px;
}
.edu247-quiz-wrapper .edu247-option.selected .edu247-option-letter {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: white !important;
    box-shadow: 0 0 0 2px #dbeafe;
}
.edu247-quiz-wrapper .edu247-option-text { font-size:16px; color:#334155; line-height:1.5; }
.edu247-quiz-wrapper .edu247-nav-buttons { display:flex; justify-content:space-between; margin-top:32px; padding-top:24px; border-top:2px solid #f1f5f9; }
.edu247-quiz-wrapper .edu247-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }
.edu247-quiz-wrapper .edu247-dots-container { background:white; border-radius:20px; padding:20px 24px; box-shadow:0 4px 15px rgba(0,0,0,0.08); }
.edu247-quiz-wrapper .edu247-dots-label { font-size:12px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:1px; margin:0 0 14px 0; }
.edu247-quiz-wrapper .edu247-dot { width:36px; height:36px; border-radius:50%; border:2px solid #e2e8f0; background:white; font-size:13px; font-weight:600; color:#64748b; cursor:pointer; transition:all 0.25s ease; display:flex; align-items:center; justify-content:center; }
.edu247-quiz-wrapper .edu247-dot.current { background:#3b82f6; border-color:#3b82f6; color:white; }

/* Results Card */
.edu247-quiz-wrapper .edu247-results-card { background:white; border-radius:24px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,0.12); }
.edu247-quiz-wrapper .edu247-results-header { padding:48px 32px; text-align:center; color:white; background:linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); }
.edu247-quiz-wrapper .edu247-results-header.excellent { background:linear-gradient(135deg, #10b981 0%, #059669 100%); }
.edu247-quiz-wrapper .edu247-results-header.good { background:linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); }
.edu247-quiz-wrapper .edu247-results-header.average { background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.edu247-quiz-wrapper .edu247-results-header.poor { background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.edu247-quiz-wrapper .edu247-score-circle { width:150px; height:150px; background:rgba(255,255,255,0.2); border-radius:50%; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; animation:scaleIn 0.6s ease; }
@keyframes scaleIn { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }
.edu247-quiz-wrapper .edu247-score-percent { font-size:52px; font-weight:800; }
.edu247-quiz-wrapper .edu247-results-header h2 { font-size:28px; font-weight:700; margin:0 0 8px 0; }
.edu247-quiz-wrapper .edu247-results-header p { font-size:16px; opacity:0.9; margin:0; }
.edu247-quiz-wrapper .edu247-stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:#e2e8f0; }
.edu247-quiz-wrapper .edu247-stat { background:#f8fafc; padding:24px; text-align:center; }
.edu247-quiz-wrapper .edu247-stat-value { font-size:32px; font-weight:800; margin:0 0 4px 0; }
.edu247-quiz-wrapper .edu247-stat-value.correct { color:#10b981; }
.edu247-quiz-wrapper .edu247-stat-value.incorrect { color:#ef4444; }
.edu247-quiz-wrapper .edu247-stat-value.skipped { color:#64748b; }
.edu247-quiz-wrapper .edu247-stat-value.time { color:#3b82f6; }
.edu247-quiz-wrapper .edu247-stat-label { font-size:14px; color:#64748b; margin:0; }

/* Review Section */
.edu247-quiz-wrapper .edu247-review-section { padding:28px; }
.edu247-quiz-wrapper .edu247-review-title { font-size:20px; font-weight:700; color:#1e293b; margin:0 0 20px 0; display:flex; align-items:center; gap:10px; }
.edu247-quiz-wrapper .edu247-review-list { max-height:450px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.edu247-quiz-wrapper .edu247-review-description { font-size:14px; color:#475569; margin:6px 0 0 0; }
.edu247-quiz-wrapper .edu247-review-item { padding:20px; border-radius:16px; border:1px solid #e2e8f0; }
.edu247-quiz-wrapper .edu247-review-item.correct { background:#f0fdf4; border-color:#bbf7d0; }
.edu247-quiz-wrapper .edu247-review-item.incorrect { background:#fef2f2; border-color:#fecaca; }
.edu247-quiz-wrapper .edu247-review-item.skipped { background:#f8fafc; border-color:#e2e8f0; }
.edu247-quiz-wrapper .edu247-review-item-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.edu247-quiz-wrapper .edu247-review-question { font-size:16px; font-weight:600; color:#1e293b; margin:0 0 10px 0; }
.edu247-quiz-wrapper .edu247-review-question span { color:#94a3b8; margin-right:8px; }
.edu247-quiz-wrapper .edu247-review-answer { font-size:14px; color:#475569; margin:0 0 6px 0; }
.edu247-quiz-wrapper .edu247-review-correct { font-size:14px; color:#10b981; margin:0; font-weight:500; }
.edu247-quiz-wrapper .edu247-review-status { text-align:center; flex-shrink:0; }
.edu247-quiz-wrapper .edu247-review-icon { font-size:28px; }
.edu247-quiz-wrapper .edu247-review-status-text { font-size:11px; font-weight:700; margin:4px 0 0 0; }
.edu247-quiz-wrapper .edu247-review-status-text.correct { color:#10b981; }
.edu247-quiz-wrapper .edu247-review-status-text.incorrect { color:#ef4444; }
.edu247-quiz-wrapper .edu247-review-status-text.skipped { color:#64748b; }
.edu247-quiz-wrapper .edu247-results-actions { padding:24px 28px; background:#f8fafc; border-top:1px solid #e2e8f0; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* Loading / Toast / Misc */
.edu247-loading {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    visibility: hidden !important;
}
.edu247-loading.show {
    display: flex !important;
    visibility: visible !important;
}
.edu247-quiz-wrapper .edu247-loading-box { background:white; border-radius:20px; padding:40px; text-align:center; }
.edu247-quiz-wrapper .edu247-spinner { width:56px; height:56px; border:5px solid #e2e8f0; border-top-color:#3b82f6; border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 16px; }
@keyframes spin { to { transform:rotate(360deg); } }
.edu247-quiz-wrapper .edu247-loading-text { font-size:16px; color:#475569; margin:0; font-weight:500; }
.edu247-quiz-wrapper .edu247-toast { position:fixed; bottom:24px; right:24px; background:#1e293b; color:white; padding:16px 24px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.2); transform:translateY(120px); opacity:0; transition:all 0.4s ease; z-index:99999; font-size:15px; font-weight:500; }
.edu247-quiz-wrapper .edu247-toast.show { transform:translateY(0); opacity:1; }
.edu247-quiz-wrapper .edu247-no-quizzes { text-align:center; padding:64px 24px; background:white; border-radius:20px; box-shadow:0 4px 15px rgba(0,0,0,0.08); }
.edu247-quiz-wrapper .edu247-no-quizzes-icon { font-size:64px; margin-bottom:16px; }
.edu247-quiz-wrapper .edu247-no-quizzes h3 { font-size:22px; color:#1e293b; margin:0 0 8px 0; }
.edu247-quiz-wrapper .edu247-no-quizzes p { font-size:15px; color:#64748b; margin:0; }
.edu247-quiz-wrapper .edu247-fade-in { animation:fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
.edu247-quiz-wrapper .edu247-view {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: relative;
    opacity: 0 !important;
    pointer-events: none !important;
}
.edu247-quiz-wrapper .edu247-view.active {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Question-specific styles */
.edu247-quiz-wrapper .edu247-question-badge { display:inline-block; padding:6px 16px; background:linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%); color:#3b82f6; font-size:13px; font-weight:700; border-radius:20px; margin-bottom:16px; }
.edu247-quiz-wrapper .edu247-question-title { font-size:22px; font-weight:600; color:#1e293b; line-height:1.5; margin:0 0 8px 0; }
.edu247-quiz-wrapper .edu247-question-desc { font-size:15px; color:#64748b; margin:0 0 24px 0; }
.edu247-quiz-wrapper .edu247-question-image { margin-bottom:24px; text-align:center; }
.edu247-quiz-wrapper .edu247-question-image img { max-width:100%; max-height:300px; border-radius:16px; object-fit:contain; }

@media (max-width: 768px) {
    .edu247-quiz-wrapper { padding: 16px; }
    .edu247-quiz-wrapper .edu247-quiz-grid { grid-template-columns: 1fr; }
    .edu247-quiz-wrapper .edu247-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .edu247-quiz-wrapper .edu247-progress-top { flex-direction: column; align-items: flex-start; }
    .edu247-quiz-wrapper .edu247-nav-buttons { flex-direction: column; gap: 12px; }
    .edu247-quiz-wrapper .edu247-nav-buttons .edu247-btn { width: 100%; justify-content: center; }
}