/* ========================================
   MISSIONS COURSES - Frontend CSS
   ======================================== */
:root {
    --mc-primary: #6c5ce7;
    --mc-primary-light: #a29bfe;
    --mc-success: #00e676;
    --mc-warning: #ffd740;
    --mc-error: #ff5252;
    --mc-bg: #0a0e27;
    --mc-card: #141832;
    --mc-border: rgba(255,255,255,0.08);
    --mc-text: #e8eaf6;
    --mc-muted: #7f8c9b;
}

/* ===== COURSES GRID ===== */
.mc-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.mc-course-card { border-radius: 14px; overflow: hidden; transition: all 0.3s; position: relative; }
.mc-card-link { display: block; text-decoration: none; color: inherit; background: var(--mc-card); border: 1px solid var(--mc-border); border-radius: 14px; overflow: hidden; }
.mc-card-link:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }

/* States */
.mc-state-completed .mc-card-link { border-color: var(--mc-success); box-shadow: 0 0 20px rgba(0, 230, 118, 0.15); }
.mc-state-in_progress .mc-card-link { border-color: var(--mc-warning); box-shadow: 0 0 20px rgba(255, 215, 64, 0.15); }
.mc-state-locked .mc-card-link { opacity: 0.45; filter: saturate(0.3); }
.mc-state-locked .mc-card-link:hover { opacity: 0.6; transform: none; }

.mc-card-image { position: relative; height: 180px; overflow: hidden; }
.mc-card-image img { width: 100%; height: 100%; object-fit: cover; }
.mc-card-completed-overlay, .mc-card-locked-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 48px; background: rgba(0,0,0,0.4);
}
.mc-card-completed-overlay { background: rgba(0, 230, 118, 0.15); }

.mc-diff-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 3px 10px; border-radius: 6px;
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    z-index: 2;
}
.mc-diff-easy { background: var(--mc-success); color: #000; }
.mc-diff-medium, .mc-diff-ușor { background: var(--mc-warning); color: #000; }
.mc-diff-hard, .mc-diff-dificil { background: #ff6b6b; color: #fff; }
.mc-diff-expert { background: var(--mc-primary); color: #fff; }

.mc-card-body { padding: 16px; }
.mc-card-body h3 { color: #fff; margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.mc-card-meta { display: flex; gap: 10px; font-size: 12px; color: var(--mc-muted); flex-wrap: wrap; }

.mc-card-progress { margin-top: 10px; }
.mc-card-progress-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.mc-card-progress-fill { height: 100%; background: var(--mc-warning); border-radius: 3px; transition: width 0.3s; }
.mc-card-progress small { color: var(--mc-muted); font-size: 11px; }

/* ===== HERO CARD (Homepage) ===== */
.mc-hero-card {
    display: flex; text-decoration: none; color: inherit;
    background: var(--mc-card); border: 2px solid var(--mc-border); border-radius: 16px;
    overflow: hidden; transition: all 0.3s; max-width: 900px; margin: 0 auto;
}
.mc-hero-card:hover { border-color: var(--mc-primary); transform: translateY(-4px); box-shadow: 0 8px 30px rgba(108,92,231,0.2); }
.mc-hero-active { border-color: var(--mc-warning); }
.mc-hero-image { width: 40%; min-height: 250px; }
.mc-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.mc-hero-body { flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.mc-hero-body h2 { color: #fff; margin: 0 0 10px; font-size: 24px; }
.mc-hero-body p { color: var(--mc-muted); margin: 0 0 16px; line-height: 1.6; }
.mc-hero-status { display: inline-block; background: var(--mc-warning); color: #000; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 800; margin-bottom: 10px; }

@media (max-width: 768px) {
    .mc-hero-card { flex-direction: column; }
    .mc-hero-image { width: 100%; min-height: 200px; }
}

/* ===== SINGLE COURSE ===== */
.mc-single-course { max-width: 900px; margin: 0 auto; padding: 0 20px; color: var(--mc-text); }

.mc-course-hero { margin-bottom: 24px; }
.mc-hero-img { border-radius: 16px; overflow: hidden; max-height: 350px; margin-bottom: 20px; }
.mc-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-hero-info h1 { color: #fff; font-size: 32px; margin: 10px 0; }
.mc-hero-desc { color: var(--mc-muted); line-height: 1.7; margin-bottom: 12px; }
.mc-hero-desc p { margin: 0 0 10px; }
.mc-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mc-tag { background: rgba(108,92,231,0.15); color: var(--mc-primary-light); padding: 4px 12px; border-radius: 20px; font-size: 12px; }
.mc-hero-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--mc-muted); font-weight: 600; }

/* Prerequisites */
.mc-prereqs-box {
    background: var(--mc-card); border: 1px solid var(--mc-border); border-radius: 12px;
    padding: 16px 20px; margin-bottom: 20px;
}
.mc-prereq-item {
    display: inline-block; margin: 4px 8px; padding: 6px 14px;
    border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600;
}
.mc-prereq-done { background: rgba(0,230,118,0.1); color: var(--mc-success); border: 1px solid rgba(0,230,118,0.2); }
.mc-prereq-pending { background: rgba(255,82,82,0.1); color: var(--mc-error); border: 1px solid rgba(255,82,82,0.2); }

/* CTA boxes */
.mc-cta-box {
    text-align: center; padding: 40px 30px; background: var(--mc-card);
    border: 2px solid var(--mc-border); border-radius: 16px; margin-bottom: 24px;
}
.mc-cta-box h2 { color: #fff; margin: 10px 0; }
.mc-cta-box p { color: var(--mc-muted); font-size: 16px; }
.mc-cta-locked { border-color: var(--mc-error); }
.mc-cta-completed { border-color: var(--mc-success); background: rgba(0,230,118,0.05); }

/* Lesson navigation dots */
.mc-lesson-nav {
    display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; margin-bottom: 20px;
}
.mc-lnav-item {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 12px; border-radius: 10px; min-width: 70px; text-align: center;
    background: var(--mc-card); border: 2px solid var(--mc-border);
}
.mc-lnav-done { border-color: var(--mc-success); background: rgba(0,230,118,0.08); }
.mc-lnav-current { border-color: var(--mc-primary); background: rgba(108,92,231,0.12); box-shadow: 0 0 15px rgba(108,92,231,0.3); }
.mc-lnav-locked { opacity: 0.4; }
.mc-lnav-num { font-size: 18px; font-weight: 800; color: #fff; }
.mc-lnav-title { font-size: 9px; color: var(--mc-muted); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lesson content */
.mc-lesson-content {
    background: var(--mc-card); border: 1px solid var(--mc-border); border-radius: 16px;
    padding: 30px; margin-bottom: 20px;
}
.mc-lesson-content h2 { color: var(--mc-primary-light); margin: 0 0 16px; }
.mc-lesson-image { width: 100%; max-height: 300px; object-fit: cover; border-radius: 12px; margin-bottom: 16px; }
.mc-lesson-text { color: var(--mc-text); line-height: 1.8; font-size: 15px; }
.mc-lesson-text h3 { color: #fff; margin-top: 20px; }
.mc-lesson-text code { background: rgba(108,92,231,0.15); padding: 2px 6px; border-radius: 4px; color: var(--mc-primary-light); }
.mc-lesson-text ul { padding-left: 20px; }

/* Quiz section */
.mc-quiz-section {
    background: var(--mc-card); border: 1px solid var(--mc-border); border-radius: 16px;
    padding: 24px; margin-bottom: 20px;
}
.mc-quiz-section h3 { color: var(--mc-warning); margin: 0 0 8px; }
.mc-quiz-hint { color: var(--mc-muted); font-size: 13px; margin-bottom: 20px; }

.mc-result-passed {
    text-align: center; padding: 24px;
    background: rgba(108,92,231,0.08); border: 2px solid var(--mc-primary); border-radius: 12px;
}
.mc-result-passed h2 { color: var(--mc-primary-light); }

/* Lesson passed */
.mc-lesson-passed {
    text-align: center; padding: 30px; background: rgba(0,230,118,0.06);
    border: 2px solid var(--mc-success); border-radius: 16px; margin-bottom: 20px;
}
.mc-lesson-passed h3 { color: var(--mc-success); }

/* Lessons overview */
.mc-lessons-overview {
    background: var(--mc-card); border: 1px solid var(--mc-border); border-radius: 16px;
    padding: 24px; margin-top: 20px;
}
.mc-lessons-overview h3 { color: #fff; margin: 0 0 16px; }
.mc-overview-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mc-ov-icon { font-size: 18px; flex-shrink: 0; }
.mc-ov-title { flex: 1; color: #fff; font-size: 14px; font-weight: 600; }
.mc-ov-meta { color: var(--mc-muted); font-size: 12px; white-space: nowrap; }
.mc-ov-done .mc-ov-title { color: var(--mc-success); }
.mc-ov-current .mc-ov-title { color: var(--mc-primary-light); }
.mc-ov-locked .mc-ov-title { color: var(--mc-muted); opacity: 0.5; }

/* Course badges in profile */
.mc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mc-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(108,92,231,0.1); border: 1px solid rgba(108,92,231,0.3);
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;
    color: var(--mc-primary-light);
}