/* ── CharlHE LMS – Frontend Styles ───────────────────────────────────────── */

:root {
    --clms-primary:   #1a3c5e;
    --clms-accent:    #e8a020;
    --clms-accent2:   #2ecc71;
    --clms-danger:    #e74c3c;
    --clms-text:      #2c3e50;
    --clms-muted:     #6b7a8d;
    --clms-border:    #e0e6ed;
    --clms-bg:        #f5f7fa;
    --clms-surface:   #ffffff;
    --clms-radius:    10px;
    --clms-shadow:    0 2px 16px rgba(0,0,0,.08);
    --clms-shadow-lg: 0 8px 40px rgba(0,0,0,.14);
}

/* ── Course Page Hero ─────────────────────────────────────────────────────── */
.clms-course-page { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.clms-course-hero {
    display: grid; grid-template-columns: 1fr 340px; gap: 40px;
    padding: 48px 0; align-items: start;
}
@media (max-width: 900px) { .clms-course-hero { grid-template-columns: 1fr; } }

.clms-hero-content {}

.clms-course-cats { margin-bottom: 12px; }
.clms-cat-badge {
    display: inline-block; padding: 4px 12px; border-radius: 20px;
    background: rgba(26,60,94,.1); color: var(--clms-primary);
    font-size: 12px; font-weight: 600; text-decoration: none; margin-right: 6px;
}
.clms-cat-badge:hover { background: var(--clms-primary); color: #fff; }

.clms-course-title { font-size: 36px; font-weight: 800; color: var(--clms-primary); margin: 0 0 16px; line-height: 1.2; }
.clms-course-excerpt { font-size: 17px; color: var(--clms-muted); line-height: 1.6; margin-bottom: 20px; }

.clms-course-meta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.clms-meta-item { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--clms-muted); }

.clms-alert { padding: 12px 16px; border-radius: 8px; margin-top: 16px; font-size: 14px; }
.clms-alert-warning { background: #fff8e1; border: 1px solid var(--clms-accent); color: #7a5c00; }

/* ── Course Card (sidebar) ────────────────────────────────────────────────── */
.clms-course-card {
    background: var(--clms-surface);
    border: 1px solid var(--clms-border);
    border-radius: var(--clms-radius);
    box-shadow: var(--clms-shadow-lg);
    overflow: hidden; position: sticky; top: 90px;
}
.clms-card-thumb img { width: 100%; height: 200px; object-fit: cover; display: block; }
.clms-card-body { padding: 20px; }

.clms-course-price { font-size: 28px; font-weight: 800; color: var(--clms-primary); margin-bottom: 12px; }
.clms-price-free, .clms-price-enrolled { font-size: 18px; font-weight: 700; color: var(--clms-accent2); margin-bottom: 10px; }

.clms-btn-primary, .clms-btn-secondary {
    display: block; text-align: center; padding: 13px 20px;
    border-radius: 8px; font-size: 15px; font-weight: 700;
    text-decoration: none; cursor: pointer; border: none;
    margin-bottom: 10px; transition: transform .1s, box-shadow .1s;
}
.clms-btn-primary { background: linear-gradient(135deg, var(--clms-accent), #c87010); color: #fff; }
.clms-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,160,32,.35); color: #fff; }
.clms-btn-secondary { background: var(--clms-primary); color: #fff; }
.clms-btn-secondary:hover { background: #2a5080; color: #fff; }
.clms-btn-full { width: 100%; box-sizing: border-box; }

.clms-progress-wrap { margin-bottom: 16px; }
.clms-progress-bar-outer { height: 8px; background: #e8ecf0; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.clms-progress-bar-inner { height: 100%; background: linear-gradient(90deg, var(--clms-accent2), #27ae60); border-radius: 4px; transition: width .4s ease; }
.clms-progress-label { font-size: 13px; color: var(--clms-muted); }

.clms-card-footer { padding: 16px 20px; background: var(--clms-bg); border-top: 1px solid var(--clms-border); }
.clms-includes-list strong { display: block; font-size: 13px; margin-bottom: 8px; }
.clms-includes-list ul { list-style: none; margin: 0; padding: 0; }
.clms-includes-list li { padding: 4px 0; font-size: 13px; color: var(--clms-muted); }

/* ── Course Body ─────────────────────────────────────────────────────────── */
.clms-course-body { padding-bottom: 60px; }
.clms-section { margin-bottom: 48px; }
.clms-section-title { font-size: 22px; font-weight: 700; color: var(--clms-primary); margin: 0 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--clms-border); }

/* ── Objectives Grid ─────────────────────────────────────────────────────── */
.clms-objectives-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 600px) { .clms-objectives-grid { grid-template-columns: 1fr; } }
.clms-objective-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: var(--clms-bg); border-radius: 8px; font-size: 14px; color: var(--clms-text); line-height: 1.5; }

/* ── Curriculum Accordion ────────────────────────────────────────────────── */
.clms-curriculum-module { border: 1px solid var(--clms-border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }

.clms-module-header-front {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; background: var(--clms-primary); color: #fff; cursor: pointer;
    user-select: none;
}
.clms-module-header-front:hover { background: #2a5080; }
.clms-module-title-wrap { display: flex; align-items: center; gap: 10px; }
.clms-module-title-wrap h3 { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }
.clms-module-toggle { font-size: 12px; transition: transform .2s; }
.clms-module-header-front.collapsed .clms-module-toggle { transform: rotate(-90deg); }
.clms-module-count { font-size: 13px; color: rgba(255,255,255,.75); }

.clms-curriculum-lessons { list-style: none; margin: 0; padding: 8px; background: var(--clms-surface); }
.clms-curriculum-lesson { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; font-size: 14px; transition: background .1s; }
.clms-curriculum-lesson:hover { background: var(--clms-bg); }
.clms-lesson-link { text-decoration: none; color: var(--clms-text); flex: 1; }
.clms-lesson-link:hover { color: var(--clms-primary); }
.clms-lesson-locked { color: var(--clms-muted); flex: 1; }
.clms-lesson-meta-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.clms-lesson-dur { font-size: 12px; color: var(--clms-muted); }

.clms-req-list { padding-left: 20px; }
.clms-req-list li { margin-bottom: 8px; font-size: 14px; color: var(--clms-text); }

/* ── Lesson Page ─────────────────────────────────────────────────────────── */
.clms-lesson-page { display: flex; min-height: calc(100vh - 80px); }

.clms-lesson-sidebar {
    width: 300px; flex-shrink: 0;
    background: var(--clms-primary);
    border-right: none;
    overflow-y: auto;
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
}
@media (max-width: 768px) { .clms-lesson-sidebar { display: none; } }

.clms-sidebar-header { padding: 20px 16px; background: rgba(0,0,0,.2); flex-shrink: 0; }
.clms-back-course { color: rgba(255,255,255,.75); font-size: 13px; text-decoration: none; display: block; margin-bottom: 12px; }
.clms-back-course:hover { color: #fff; }
.clms-course-progress-mini { }
.clms-course-progress-mini .clms-progress-bar-outer { background: rgba(255,255,255,.2); }
.clms-course-progress-mini .clms-progress-bar-inner { background: var(--clms-accent); }
.clms-course-progress-mini #clms-progress-text { font-size: 12px; color: rgba(255,255,255,.8); margin-top: 4px; display: block; }

.clms-sidebar-curriculum { overflow-y: auto; flex: 1; padding-bottom: 20px; }
.clms-sidebar-module { }
.clms-sidebar-module-title { padding: 12px 16px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.55); }
.clms-sidebar-lessons { list-style: none; margin: 0; padding: 0; }
.clms-sidebar-lesson a { display: flex; align-items: center; gap: 8px; padding: 9px 16px; color: rgba(255,255,255,.8); font-size: 13px; text-decoration: none; transition: background .1s; }
.clms-sidebar-lesson a:hover { background: rgba(255,255,255,.1); color: #fff; }
.clms-sidebar-lesson.clms-active a { background: rgba(232,160,32,.25); color: #fff; border-left: 3px solid var(--clms-accent); padding-left: 13px; }
.clms-sidebar-lesson.clms-les-completed a { color: rgba(255,255,255,.6); }
.clms-check { margin-left: auto; font-size: 12px; }
.clms-sidebar-icon { flex-shrink: 0; font-size: 14px; }

.clms-lesson-main { flex: 1; min-width: 0; padding: 36px 48px; max-width: 860px; }
@media (max-width: 900px) { .clms-lesson-main { padding: 24px 20px; } }

.clms-lesson-topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.clms-lesson-title { font-size: 28px; font-weight: 800; color: var(--clms-primary); margin: 0; flex: 1; }
.clms-lesson-dur-badge { background: var(--clms-bg); color: var(--clms-muted); padding: 4px 10px; border-radius: 20px; font-size: 12px; white-space: nowrap; }

/* ── Video Player ────────────────────────────────────────────────────────── */
.clms-video-container { margin-bottom: 28px; }
.clms-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px; background: #000; }
.clms-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.clms-video-direct { width: 100%; border-radius: 10px; }

/* ── Lesson Content ──────────────────────────────────────────────────────── */
.clms-lesson-content { font-size: 16px; line-height: 1.8; color: var(--clms-text); margin-bottom: 40px; }
.clms-lesson-content h1, .clms-lesson-content h2, .clms-lesson-content h3 { color: var(--clms-primary); }
.clms-lesson-content img { max-width: 100%; border-radius: 8px; }
.clms-lesson-content pre { background: #1e2736; color: #a8d8a8; padding: 16px; border-radius: 8px; overflow-x: auto; font-size: 14px; }
.clms-lesson-content blockquote { border-left: 4px solid var(--clms-accent); padding-left: 16px; color: var(--clms-muted); font-style: italic; }

/* ── Lesson Navigation ───────────────────────────────────────────────────── */
.clms-lesson-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 20px 0; border-top: 2px solid var(--clms-border); margin-top: 40px;
}
.clms-btn-nav {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
    text-decoration: none; background: var(--clms-bg); color: var(--clms-primary);
    border: 1px solid var(--clms-border); transition: all .15s;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clms-btn-nav:hover { background: var(--clms-primary); color: #fff; border-color: var(--clms-primary); }

.clms-complete-wrap { text-align: center; }
.clms-btn-complete {
    background: linear-gradient(135deg, var(--clms-accent), #c87010); color: #fff;
    border: none; padding: 12px 28px; border-radius: 8px; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.clms-btn-complete:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,160,32,.35); }
.clms-btn-complete:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.clms-btn-completed { background: var(--clms-accent2); color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: default; }
.clms-btn-finish { background: linear-gradient(135deg, var(--clms-accent2), #27ae60); color: #fff; border-color: var(--clms-accent2); }
.clms-btn-finish:hover { color: #fff; background: #27ae60; }

/* ── Course Catalog Grid ─────────────────────────────────────────────────── */
.clms-catalog { margin: 20px 0; }
.clms-course-grid { display: grid; gap: 24px; }
.clms-grid-1 { grid-template-columns: 1fr; }
.clms-grid-2 { grid-template-columns: repeat(2, 1fr); }
.clms-grid-3 { grid-template-columns: repeat(3, 1fr); }
.clms-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .clms-grid-4 { grid-template-columns: repeat(2, 1fr); } .clms-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .clms-course-grid { grid-template-columns: 1fr; } }

.clms-course-card-grid {
    border: 1px solid var(--clms-border);
    border-radius: var(--clms-radius);
    overflow: hidden; background: var(--clms-surface);
    box-shadow: var(--clms-shadow);
    transition: transform .15s, box-shadow .15s;
}
.clms-course-card-grid:hover { transform: translateY(-4px); box-shadow: var(--clms-shadow-lg); }
.clms-card-link { display: block; text-decoration: none; color: inherit; height: 100%; }

.clms-card-thumb-wrap { position: relative; overflow: hidden; height: 180px; background: var(--clms-bg); }
.clms-card-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.clms-course-card-grid:hover .clms-card-thumb-wrap img { transform: scale(1.04); }
.clms-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; }

.clms-level-badge { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.clms-level-beginner     { background: #d4edda; color: #155724; }
.clms-level-intermediate { background: #fff3cd; color: #856404; }
.clms-level-advanced     { background: #f8d7da; color: #721c24; }

.clms-card-content { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.clms-card-course-title { font-size: 16px; font-weight: 700; color: var(--clms-primary); margin: 0; line-height: 1.3; }
.clms-card-excerpt { font-size: 13px; color: var(--clms-muted); line-height: 1.5; margin: 0; }
.clms-card-meta { display: flex; gap: 12px; font-size: 12px; color: var(--clms-muted); }

.clms-card-progress { }
.clms-mini-progress { height: 4px; background: #e8ecf0; border-radius: 2px; overflow: hidden; }
.clms-mini-progress div { height: 100%; background: var(--clms-accent2); border-radius: 2px; }

.clms-card-footer-price { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--clms-border); }
.clms-price-tag { font-size: 16px; font-weight: 800; color: var(--clms-primary); }
.clms-free-tag { font-size: 14px; font-weight: 700; color: var(--clms-accent2); }
.clms-enrolled-badge { font-size: 12px; color: var(--clms-accent2); font-weight: 700; }
.clms-enrol-btn { font-size: 13px; font-weight: 600; color: var(--clms-accent); }

/* ── My Courses ──────────────────────────────────────────────────────────── */
.clms-my-courses { margin: 20px 0; }
.clms-my-courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .clms-my-courses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .clms-my-courses-grid { grid-template-columns: 1fr; } }

.clms-my-course-card {
    background: var(--clms-surface);
    border: 1px solid var(--clms-border);
    border-radius: var(--clms-radius);
    overflow: hidden; box-shadow: var(--clms-shadow);
    transition: transform .15s, box-shadow .15s;
}
.clms-my-course-card:hover { transform: translateY(-3px); box-shadow: var(--clms-shadow-lg); }
.clms-my-card-thumb { position: relative; height: 160px; overflow: hidden; }
.clms-my-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.clms-completed-badge { position: absolute; inset: 0; background: rgba(46,204,113,.85); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; }
.clms-my-card-body { padding: 16px; }
.clms-my-card-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.clms-my-card-title a { text-decoration: none; color: var(--clms-primary); }
.clms-my-card-meta { display: flex; gap: 12px; font-size: 12px; color: var(--clms-muted); margin-bottom: 12px; }
.clms-my-progress { margin-bottom: 14px; }

/* ── WooCommerce Thank-You Enrolment Panel ───────────────────────────────── */
.clms-thankyou-enrolment {
    background: linear-gradient(135deg, #eaf6ff 0%, #f0fff6 100%);
    border: 2px solid var(--clms-accent);
    border-radius: var(--clms-radius);
    padding: 28px 32px;
    margin: 28px 0;
}
.clms-thankyou-heading { margin: 0 0 8px; font-size: 20px; color: var(--clms-primary); }
.clms-thankyou-sub { margin: 0 0 20px; color: var(--clms-muted); font-size: 14px; }
.clms-thankyou-course-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.clms-thankyou-course-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--clms-border); border-radius: 8px; padding: 10px 14px; }
.clms-thankyou-thumb img,
.clms-thankyou-no-thumb { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.clms-thankyou-course-name { font-weight: 600; color: var(--clms-primary); text-decoration: none; font-size: 15px; }
.clms-thankyou-course-name:hover { color: var(--clms-accent); }
.clms-btn-career-path {
    display: inline-block;
    background: var(--clms-primary);
    color: #fff !important;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: background .2s;
}
.clms-btn-career-path:hover { background: var(--clms-accent); color: #fff !important; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.clms-empty-state { text-align: center; padding: 60px 24px; color: var(--clms-muted); }
.clms-empty-icon { font-size: 56px; margin-bottom: 16px; }
.clms-login-notice { background: var(--clms-bg); border: 1px solid var(--clms-border); border-radius: 8px; padding: 20px; text-align: center; }