/* ============================================================
   ClassaaS Course Pages - Shared Styles
   ============================================================ */

:root {
  /* Black & white theme, matched to landing.html palette */
  --cs-primary: #0a0a0a;
  --cs-primary-dark: #000000;
  --cs-primary-light: #f0f0f0;
  --cs-success: #16a34a;
  --cs-warning: #f59e0b;
  --cs-danger: #dc2626;
  --cs-gray-50: #f9f9f9;
  --cs-gray-100: #f5f5f5;
  --cs-gray-200: #e8e8e8;
  --cs-gray-300: #cccccc;
  --cs-gray-500: #6b6b6b;
  --cs-gray-700: #404040;
  --cs-gray-900: #1a1a1a;
  --cs-radius: 12px;
  --cs-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --cs-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --cs-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--cs-gray-900); }

/* ---- Bootstrap overrides: black & white theme, pill buttons ---- */
.btn-primary { background: var(--cs-primary); border-color: var(--cs-primary); border-radius: 999px; font-weight: 600; padding: 10px 24px; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--cs-primary-dark); border-color: var(--cs-primary-dark); box-shadow: none; }
.btn-outline-primary { color: var(--cs-primary); border-color: var(--cs-gray-300); border-radius: 999px; font-weight: 600; padding: 10px 24px; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background: var(--cs-primary); border-color: var(--cs-primary); color: #fff; }
.text-primary { color: var(--cs-primary) !important; }
.bg-primary { background-color: var(--cs-primary) !important; }
.spinner-border.text-primary { color: var(--cs-primary) !important; }
a { color: var(--cs-primary); }
.form-control:focus, .form-select:focus { border-color: var(--cs-gray-500); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }

/* ---- Loading / Error ---- */
.cs-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: 16px; color: var(--cs-gray-500); }
.cs-error { display: none; text-align: center; padding: 60px 20px; color: var(--cs-danger); }
.cs-error i { font-size: 48px; margin-bottom: 16px; }

/* ---- Course Cards ---- */
.course-card { background: #fff; border-radius: var(--cs-radius); border: 1px solid var(--cs-gray-200); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; height: 100%; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--cs-shadow-lg); }
.course-card .card-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--cs-gray-100); }
.course-card .card-thumb-placeholder { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--cs-primary-light), var(--cs-gray-100)); display: flex; align-items: center; justify-content: center; }
.course-card .card-thumb-placeholder i { font-size: 48px; color: var(--cs-primary); opacity: 0.4; }
.course-card .card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.course-card .card-category { font-size: 12px; font-weight: 600; color: var(--cs-primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.course-card .card-title { font-size: 16px; font-weight: 600; color: var(--cs-gray-900); margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-card .card-meta { font-size: 13px; color: var(--cs-gray-500); margin-bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.course-card .card-meta span { display: flex; align-items: center; gap: 4px; }
.course-card .card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--cs-gray-100); }
.course-card .card-price { font-size: 18px; font-weight: 700; color: var(--cs-gray-900); }
.course-card .card-price.free { color: var(--cs-gray-900); }

/* ---- Top Nav ---- */
.cs-nav { background: #fff; border-bottom: 1px solid var(--cs-gray-200); padding: 14px 0; }
.cs-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cs-nav-logo img { height: 28px; display: block; }
.cs-nav-links { display: flex; gap: 1.5rem; font-size: 0.875rem; }
.cs-nav-links a { color: var(--cs-gray-700); text-decoration: none; font-weight: 500; }
.cs-nav-links a:hover { color: var(--cs-primary); }

/* ---- Hero ---- */
.cs-hero { background: #0a0a0a; color: #fff; padding: 60px 0; }
.cs-hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 16px; }
.cs-hero p { font-size: 1.125rem; opacity: 0.9; max-width: 600px; }
.cs-hero .search-box { max-width: 500px; margin-top: 24px; position: relative; }
.cs-hero .search-box input { width: 100%; padding: 14px 20px 14px 48px; border: none; border-radius: 50px; font-size: 16px; box-shadow: var(--cs-shadow-lg); }
.cs-hero .search-box i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--cs-gray-500); }

/* ---- Filters ---- */
.cs-filters { background: #fff; border-bottom: 1px solid var(--cs-gray-200); padding: 16px 0; position: sticky; top: 0; z-index: 10; }
.cs-filters .filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-filters .filter-pill { padding: 8px 16px; border-radius: 50px; border: 1px solid var(--cs-gray-300); background: #fff; font-size: 14px; color: var(--cs-gray-700); cursor: pointer; transition: all 0.2s; }
.cs-filters .filter-pill:hover, .cs-filters .filter-pill.active { background: var(--cs-primary); color: #fff; border-color: var(--cs-primary); }

/* ---- Course Detail Page ---- */
.cd-hero { background: #0a0a0a; color: #fff; padding: 48px 0; }
.cd-hero .breadcrumb { font-size: 14px; opacity: 0.8; margin-bottom: 16px; }
.cd-hero .breadcrumb a { color: #fff; text-decoration: underline; }
.cd-hero h1 { font-size: 2rem; font-weight: 700; margin-bottom: 12px; }
.cd-hero .subtitle { font-size: 1.125rem; opacity: 0.9; margin-bottom: 20px; }
.cd-hero .meta-row { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; opacity: 0.85; }
.cd-hero .meta-row span { display: flex; align-items: center; gap: 6px; }

.cd-sidebar { position: sticky; top: 80px; }
.cd-sidebar .price-card { background: #fff; border-radius: var(--cs-radius); box-shadow: var(--cs-shadow-lg); padding: 24px; }
.cd-sidebar .price-card .price { font-size: 32px; font-weight: 800; color: var(--cs-gray-900); }
.cd-sidebar .price-card .price.free { color: var(--cs-gray-900); }
.cd-sidebar .price-card .btn-enroll { width: 100%; padding: 14px; font-size: 16px; font-weight: 600; border-radius: 999px; margin-top: 16px; }

.cd-curriculum { margin-top: 32px; }
.cd-curriculum .section-header { background: var(--cs-gray-50); padding: 16px 20px; border: 1px solid var(--cs-gray-200); border-radius: 8px 8px 0 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.cd-curriculum .section-header h3 { font-size: 16px; font-weight: 600; margin: 0; }
.cd-curriculum .section-lessons { border: 1px solid var(--cs-gray-200); border-top: none; border-radius: 0 0 8px 8px; }
.cd-curriculum .lesson-row { padding: 12px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--cs-gray-100); font-size: 14px; }
.cd-curriculum .lesson-row:last-child { border-bottom: none; }
.cd-curriculum .lesson-row i { color: var(--cs-gray-500); width: 20px; text-align: center; }
.cd-curriculum .lesson-row .preview-badge { font-size: 11px; background: var(--cs-primary-light); color: var(--cs-primary); padding: 2px 8px; border-radius: 50px; font-weight: 600; }
.cd-curriculum .lesson-row .duration { margin-left: auto; color: var(--cs-gray-500); font-size: 13px; }

/* ---- Course Player / Learn Page ---- */
.cl-container { display: flex; min-height: 100vh; }

.cl-sidebar { width: 320px; min-width: 320px; background: #fff; border-right: 1px solid var(--cs-gray-200); overflow-y: auto; height: 100vh; position: sticky; top: 0; }
.cl-sidebar .sidebar-header { padding: 20px; border-bottom: 1px solid var(--cs-gray-200); }
.cl-sidebar .sidebar-header h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.cl-sidebar .sidebar-header .progress-info { font-size: 13px; color: var(--cs-gray-500); }

.cl-sidebar .section-group { border-bottom: 1px solid var(--cs-gray-100); }
.cl-sidebar .section-title { padding: 14px 20px; font-size: 13px; font-weight: 600; color: var(--cs-gray-500); text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: var(--cs-gray-50); }
.cl-sidebar .lesson-item { padding: 12px 20px 12px 36px; display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; transition: background 0.15s; border-left: 3px solid transparent; }
.cl-sidebar .lesson-item:hover { background: var(--cs-gray-50); }
.cl-sidebar .lesson-item.active { background: var(--cs-primary-light); border-left-color: var(--cs-primary); font-weight: 500; }
.cl-sidebar .lesson-item.completed .check-icon { color: var(--cs-success); }
.cl-sidebar .lesson-item .check-icon { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cs-gray-300); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.cl-sidebar .lesson-item.completed .check-icon { border-color: var(--cs-success); background: var(--cs-success); color: #fff; }
.cl-sidebar .lesson-item .type-icon { color: var(--cs-gray-500); width: 16px; text-align: center; }

.cl-main { flex: 1; display: flex; flex-direction: column; }
.cl-topbar { padding: 12px 24px; border-bottom: 1px solid var(--cs-gray-200); display: flex; justify-content: space-between; align-items: center; background: #fff; position: sticky; top: 0; z-index: 5; }
.cl-topbar .progress-bar-wrapper { flex: 1; max-width: 300px; margin: 0 24px; }
.cl-topbar .progress { height: 8px; border-radius: 4px; }

.cl-content { flex: 1; padding: 32px 48px; max-width: 900px; overflow-y: auto; }
.cl-content h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 24px; }
.cl-content .lesson-html-content { line-height: 1.8; font-size: 16px; }
.cl-content .lesson-html-content h2 { font-size: 1.5rem; margin: 32px 0 16px; font-weight: 600; }
.cl-content .lesson-html-content h3 { font-size: 1.25rem; margin: 24px 0 12px; font-weight: 600; }
.cl-content .lesson-html-content p { margin-bottom: 16px; }
.cl-content .lesson-html-content ul, .cl-content .lesson-html-content ol { margin-bottom: 16px; padding-left: 24px; }
.cl-content .lesson-html-content li { margin-bottom: 8px; }
.cl-content .lesson-html-content strong { font-weight: 600; }

.cl-video-wrapper { position: relative; width: 100%; max-width: 100%; background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
.cl-video-wrapper video { width: 100%; display: block; }

.cl-nav { padding: 16px 48px; border-top: 1px solid var(--cs-gray-200); display: flex; justify-content: space-between; background: #fff; }
.cl-nav .btn { min-width: 140px; }

/* ---- Quiz UI ---- */
.quiz-container { max-width: 700px; }
.quiz-question { background: #fff; border: 1px solid var(--cs-gray-200); border-radius: var(--cs-radius); padding: 24px; margin-bottom: 20px; }
.quiz-question .q-number { font-size: 12px; font-weight: 600; color: var(--cs-primary); text-transform: uppercase; margin-bottom: 8px; }
.quiz-question .q-text { font-size: 16px; font-weight: 500; margin-bottom: 16px; line-height: 1.5; }
.quiz-option { padding: 12px 16px; border: 2px solid var(--cs-gray-200); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 12px; }
.quiz-option:hover { border-color: var(--cs-primary); background: var(--cs-primary-light); }
.quiz-option.selected { border-color: var(--cs-primary); background: var(--cs-primary-light); }
.quiz-option.correct { border-color: var(--cs-success); background: #dcfce7; }
.quiz-option.incorrect { border-color: var(--cs-danger); background: #fef2f2; }
.quiz-option .option-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cs-gray-300); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.quiz-option.selected .option-radio { border-color: var(--cs-primary); background: var(--cs-primary); }
.quiz-option.selected .option-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

.quiz-result { background: #fff; border-radius: var(--cs-radius); padding: 32px; text-align: center; border: 2px solid var(--cs-gray-200); }
.quiz-result.passed { border-color: var(--cs-success); }
.quiz-result.failed { border-color: var(--cs-danger); }
.quiz-result .score { font-size: 48px; font-weight: 800; }
.quiz-result.passed .score { color: var(--cs-success); }
.quiz-result.failed .score { color: var(--cs-danger); }

/* ---- My Courses / Student Dashboard ---- */
.mc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.mc-stat-card { background: #fff; border: 1px solid var(--cs-gray-200); border-radius: var(--cs-radius); padding: 20px; }
.mc-stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--cs-gray-900); }
.mc-stat-card .stat-label { font-size: 13px; color: var(--cs-gray-500); margin-top: 4px; }

.mc-course-card { display: flex; background: #fff; border: 1px solid var(--cs-gray-200); border-radius: var(--cs-radius); overflow: hidden; transition: box-shadow 0.2s; }
.mc-course-card:hover { box-shadow: var(--cs-shadow-md); }
.mc-course-card .mc-thumb { width: 200px; min-width: 200px; object-fit: cover; background: var(--cs-gray-100); }
.mc-course-card .mc-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.mc-course-card .mc-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.mc-course-card .mc-category { font-size: 12px; color: var(--cs-primary); font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }
.mc-course-card .mc-progress { margin-top: auto; }
.mc-course-card .mc-progress .progress { height: 8px; border-radius: 4px; margin-bottom: 8px; }
.mc-course-card .mc-progress-text { font-size: 13px; color: var(--cs-gray-500); display: flex; justify-content: space-between; }

/* ---- Checkout ---- */
.checkout-container { max-width: 600px; margin: 40px auto; }
.checkout-card { background: #fff; border: 1px solid var(--cs-gray-200); border-radius: var(--cs-radius); padding: 32px; box-shadow: var(--cs-shadow-md); }
.checkout-card .course-summary { display: flex; gap: 16px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--cs-gray-100); }
.checkout-card .course-summary img { width: 120px; height: 68px; object-fit: cover; border-radius: 8px; }
.checkout-card .course-summary .summary-info h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.checkout-card .total-row { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; margin-bottom: 24px; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .cl-sidebar { width: 260px; min-width: 260px; }
  .cl-content { padding: 24px; }
  .cl-nav { padding: 16px 24px; }
}

@media (max-width: 767px) {
  .cs-hero h1 { font-size: 1.75rem; }
  .cl-container { flex-direction: column; }
  .cl-sidebar { width: 100%; min-width: 100%; height: auto; position: relative; max-height: 300px; }
  .cl-content { padding: 20px; }
  .cl-nav { padding: 16px 20px; }
  .mc-course-card { flex-direction: column; }
  .mc-course-card .mc-thumb { width: 100%; min-width: 100%; height: 160px; }
  .cd-hero h1 { font-size: 1.5rem; }
}