/* Chapters Page Styles */

.chapters-content { padding: 2rem; }

/* Language Selector */
.lang-selector {
    display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.lang-select-btn {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full); border: 2px solid var(--card-border);
    background-color: var(--card-bg); color: var(--text-secondary); cursor: pointer;
    font-weight: 600; font-size: 1rem; transition: all 0.2s;
}
.lang-select-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); }
.lang-select-btn.active { background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)); color: #fff; border-color: transparent; box-shadow: var(--shadow-md); }
.lang-select-btn i { font-size: 1.1rem; }

/* Progress Overview */
.progress-overview {
    background-color: var(--card-bg); border-radius: var(--radius-xl);
    padding: 1.5rem; border: 2px solid var(--card-border); margin-bottom: 2rem;
}
.progress-info { font-weight: 700; color: var(--text-primary); margin-bottom: 0.75rem; font-size: 1.05rem; }
.progress-bar-wrapper { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.progress-bar-track { flex: 1; height: 12px; background-color: var(--gray-200); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)); border-radius: var(--radius-full); transition: width 0.6s ease; }
.progress-pct { font-size: 0.875rem; font-weight: 700; color: var(--primary-blue); white-space: nowrap; }
.progress-mini-stats { display: flex; gap: 2rem; font-size: 0.875rem; color: var(--text-secondary); }
.progress-mini-stats i { color: var(--primary-blue); }

/* Chapter Cards */
.chapter-card {
    background-color: var(--card-bg); border-radius: var(--radius-xl);
    border: 2px solid var(--card-border); margin-bottom: 1.5rem;
    overflow: hidden; transition: box-shadow 0.2s;
}
.chapter-card:hover { box-shadow: var(--shadow-lg); }

.chapter-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 1.75rem 2rem; gap: 1.5rem; border-bottom: 2px solid var(--card-border);
}
.chapter-title-section { flex: 1; }
.chapter-number { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary-blue); background: rgba(59,130,246,0.1); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); display: inline-block; margin-bottom: 0.5rem; }
.chapter-title { font-size: 1.375rem; color: var(--text-primary); margin-bottom: 0.5rem; }
.chapter-description { color: var(--text-secondary); font-size: 0.95rem; }

.chapter-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.chapter-status { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; padding: 0.35rem 0.875rem; border-radius: var(--radius-full); white-space: nowrap; }
.chapter-status.completed { background: rgba(16,185,129,0.15); color: var(--primary-green); }
.chapter-status.in-progress { background: rgba(59,130,246,0.15); color: var(--primary-blue); }
.chapter-status.available { background: var(--gray-100); color: var(--text-secondary); }

.chapter-progress { display: flex; align-items: center; gap: 0.75rem; }
.chapter-progress-bar { width: 120px; height: 8px; background-color: var(--gray-200); border-radius: var(--radius-full); overflow: hidden; }
.chapter-progress-fill { height: 100%; background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)); border-radius: var(--radius-full); transition: width 0.6s ease; }
.chapter-progress-text { font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }

/* Lessons */
.lessons-list { padding: 1rem 2rem; }
.lesson-item {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
    border-radius: var(--radius-lg); border: 2px solid var(--card-border);
    margin-bottom: 0.625rem; cursor: pointer; transition: all 0.2s;
}
.lesson-item:hover { border-color: var(--primary-blue); background: rgba(59,130,246,0.04); transform: translateX(4px); }
.lesson-item.completed { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); }
.lesson-icon { width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; transition: all 0.2s; }
.lesson-item.completed .lesson-icon { background: rgba(16,185,129,0.15); color: var(--primary-green); }
.lesson-item:hover .lesson-icon { background: rgba(59,130,246,0.15); color: var(--primary-blue); }
.lesson-info { flex: 1; }
.lesson-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.2rem; }
.lesson-duration { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.3rem; }
.lesson-reread-badge { font-size: 0.8rem; font-weight: 700; color: var(--primary-green); background: rgba(16,185,129,0.1); padding: 0.3rem 0.75rem; border-radius: var(--radius-full); display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.lesson-start-badge { font-size: 0.8rem; font-weight: 700; color: var(--primary-blue); background: rgba(59,130,246,0.1); padding: 0.3rem 0.75rem; border-radius: var(--radius-full); display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }

/* Lesson Modal Code */
.lesson-modal-body h4 { font-size: 1.125rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary-blue); }
.lesson-modal-body p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1rem; }
.lesson-code-block { background: #1e293b; color: #e2e8f0; padding: 1.5rem; border-radius: var(--radius-lg); font-family: 'Courier New', monospace; font-size: 0.875rem; overflow-x: auto; line-height: 1.7; margin-bottom: 1.25rem; white-space: pre; }
.lesson-tip { background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.08)); border-left: 4px solid var(--primary-blue); padding: 1rem 1.5rem; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin-bottom: 1rem; }
.lesson-tip strong { color: var(--primary-blue); }
.lesson-completed-badge { display: flex; align-items: center; gap: 0.5rem; color: var(--primary-green); font-weight: 700; font-size: 0.95rem; padding: 0.5rem 1rem; background: rgba(16,185,129,0.1); border-radius: var(--radius-full); }

/* Responsive */
@media (max-width: 768px) {
    .chapters-content { padding: 1rem; }
    .chapter-header { flex-direction: column; }
    .chapter-meta { align-items: flex-start; }
    .lessons-list { padding: 1rem; }
}