/* LMS page shell */
.cf-lms-layout { display:flex;flex-direction:column; }

/* Course archive grid */
.cf-grid--3 { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 900px) { .cf-grid--3 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .cf-grid--3 { grid-template-columns: 1fr !important; } }





/* Top bar */
.cf-lms-topbar {
	display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
	padding:.75rem 1.5rem;border-bottom:1px solid var(--cf-border);
	background:var(--cf-bg);position:sticky;top:0;z-index:200;gap:1rem;
}
.cf-lms-topbar__left  { display:flex;align-items:center; }
.cf-lms-topbar__center{ text-align:center; }
.cf-lms-topbar__right { display:flex;align-items:center;justify-content:flex-end;gap:.5rem; }
.cf-lms-topbar__title { font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px;display:inline-block; }
.cf-lms-back { display:flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--cf-text-muted);text-decoration:none;white-space:nowrap; }
.cf-lms-back:hover { color:var(--cf-primary); }
.cf-lms-nav-btn { display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:.5rem;border:1px solid var(--cf-border);color:var(--cf-text);text-decoration:none;transition:all .15s; }
.cf-lms-nav-btn:hover { border-color:var(--cf-primary);color:var(--cf-primary); }

/* Body split */
.cf-lms-body { display:grid;grid-template-columns:1fr 300px;flex:1;min-height:0; }

/* Content area */
.cf-lms-content { padding:0;overflow-y:auto;min-width:0; }

/* Video wrapper — pure CSS viewport fit, no JS needed.
   Width = min(100% of column, height-available × 16/9) so aspect-ratio never overflows. */
.cf-lms-video-wrap {
	background:#000;
	width:min(100%, 820px);
	margin:1.25rem auto;
	aspect-ratio:16/9;
	position:relative;
	overflow:hidden;
	border-radius:12px;
	box-shadow:0 4px 24px rgba(0,0,0,.18);
}
/* Player shell */
.cf-lms-player {
	position:absolute;inset:0;background:#000;
	overflow:hidden;
	user-select:none;-webkit-user-select:none;
}
.cf-lms-player video {
	position:absolute;inset:0;width:100%;height:100%;border:none;display:block;
}
/* Iframe is created directly in JS — sizing set inline, nothing to override here */

/* Poster overlay */
.cf-lms-poster {
	position:absolute;inset:0;cursor:pointer;z-index:5;
	display:flex;align-items:center;justify-content:center;
}
.cf-lms-poster__img {
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.cf-lms-poster__blank { position:absolute;inset:0;background:#111; }
.cf-lms-poster__overlay {
	position:absolute;inset:0;background:rgba(0,0,0,.3);
	transition:background .2s;
}
.cf-lms-poster:hover .cf-lms-poster__overlay { background:rgba(0,0,0,.45); }
.cf-lms-play-btn {
	position:relative;z-index:1;background:none;border:none;cursor:pointer;
	padding:0;transition:transform .2s;
}
.cf-lms-poster:hover .cf-lms-play-btn { transform:scale(1.08); }
.cf-lms-poster.is-hidden { display:none; }

/* ── Custom controls ── */
.cf-cp {
	position:absolute;inset:0;z-index:10;
	display:flex;flex-direction:column;justify-content:flex-end;
	pointer-events:none; /* children opt in */
}
.cf-cp.is-idle .cf-cp__bar { opacity:0; }
.cf-cp.is-idle { cursor:none; }

/* Invisible click-to-pause layer */
.cf-cp__click {
	position:absolute;inset:0;z-index:0;pointer-events:auto;cursor:pointer;
}

/* Bottom gradient + bar */
.cf-cp__bar {
	position:relative;z-index:1;pointer-events:auto;
	background:linear-gradient(transparent, rgba(0,0,0,.75) 60%);
	padding:.5rem .75rem .6rem;
	transition:opacity .25s;
}

/* Progress track */
.cf-cp__progress {
	position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.25);
	cursor:pointer;margin-bottom:.55rem;
	transition:height .15s;
}
.cf-cp__progress:hover { height:6px; }
.cf-cp__buf   { position:absolute;left:0;top:0;height:100%;border-radius:2px;background:rgba(255,255,255,.35);pointer-events:none; }
.cf-cp__played{ position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--cf-primary,#7c3aed);pointer-events:none; }
.cf-cp__thumb {
	position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
	background:#fff;transform:translate(-50%,-50%);
	pointer-events:none;opacity:0;transition:opacity .15s;
	box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.cf-cp__progress:hover .cf-cp__thumb { opacity:1; }

/* Control row */
.cf-cp__row { display:flex;align-items:center;gap:.5rem; }
.cf-cp__btn {
	background:none;border:none;color:#fff;cursor:pointer;
	padding:.25rem;display:flex;align-items:center;justify-content:center;
	opacity:.9;transition:opacity .15s, transform .15s;flex-shrink:0;
}
.cf-cp__btn:hover { opacity:1;transform:scale(1.1); }

/* Time display */
.cf-cp__time { color:#fff;font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em; }

/* Volume */
.cf-cp__vol-wrap { display:flex;align-items:center;gap:.3rem; }
.cf-cp__vol-slider {
	position:relative;width:60px;height:4px;border-radius:2px;
	background:rgba(255,255,255,.25);cursor:pointer;
	transition:width .2s;
}
.cf-cp__vol-wrap:not(:hover) .cf-cp__vol-slider { width:0;overflow:hidden; }
.cf-cp__vol-fill { position:absolute;left:0;top:0;height:100%;border-radius:2px;background:#fff;pointer-events:none; }
.cf-cp__vol-thumb {
	position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
	background:#fff;transform:translate(-50%,-50%);pointer-events:none;
}

/* Quality control */
.cf-cp__quality-wrap { position:relative; }
.cf-cp__quality-btn  { font-size:.75rem;font-weight:700;min-width:34px;letter-spacing:.02em; }
.cf-cp__quality-menu {
	display:none;position:absolute;bottom:calc(100% + 8px);right:0;
	background:rgba(20,20,20,.95);border-radius:.5rem;overflow:hidden;
	min-width:80px;box-shadow:0 4px 16px rgba(0,0,0,.5);
	backdrop-filter:blur(8px);
}
.cf-cp__quality-wrap:hover .cf-cp__quality-menu,
.cf-cp__quality-wrap.is-open .cf-cp__quality-menu { display:block; }
.cf-cp__quality-menu button {
	display:block;width:100%;padding:.45rem .9rem;background:none;border:none;
	color:rgba(255,255,255,.8);font-size:.8rem;text-align:center;cursor:pointer;
	transition:background .12s;white-space:nowrap;
}
.cf-cp__quality-menu button:hover     { background:rgba(255,255,255,.12);color:#fff; }
.cf-cp__quality-menu button.is-active { color:var(--cf-primary,#7c3aed);font-weight:700; }

/* Speed control */
.cf-cp__speed-wrap { position:relative; }
.cf-cp__speed-btn  { font-size:.75rem;font-weight:700;min-width:28px;letter-spacing:.02em; }
.cf-cp__speed-menu {
	display:none;position:absolute;bottom:calc(100% + 8px);right:0;
	background:rgba(20,20,20,.95);border-radius:.5rem;overflow:hidden;
	min-width:72px;box-shadow:0 4px 16px rgba(0,0,0,.5);
	backdrop-filter:blur(8px);
}
.cf-cp__speed-wrap:hover .cf-cp__speed-menu,
.cf-cp__speed-wrap.is-open .cf-cp__speed-menu { display:block; }
.cf-cp__speed-menu button {
	display:block;width:100%;padding:.45rem .9rem;background:none;border:none;
	color:rgba(255,255,255,.8);font-size:.8rem;text-align:center;cursor:pointer;
	transition:background .12s;white-space:nowrap;
}
.cf-cp__speed-menu button:hover    { background:rgba(255,255,255,.12);color:#fff; }
.cf-cp__speed-menu button.is-active{ color:var(--cf-primary,#7c3aed);font-weight:700; }

/* Fullscreen */
.cf-lms-player.is-fullscreen { position:fixed!important;inset:0!important;z-index:9999!important;aspect-ratio:unset!important;border-radius:0!important; }
.cf-lms-player.is-fullscreen ~ * .cf-lms-video-wrap,
.cf-lms-layout:has(.cf-lms-player.is-fullscreen) .cf-lms-video-wrap { border-radius:0!important; }
.cf-lms-player.is-fullscreen .cf-lms-video-wrap { width:100%!important;height:100%!important;aspect-ratio:unset!important; }

/* Lesson header */
.cf-lms-lesson-header { display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:1.5rem 2rem 1rem;flex-wrap:wrap; }
.cf-lms-lesson-title  { font-size:1.5rem;font-weight:800;margin:0 0 .5rem; }
.cf-lms-lesson-meta   { display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:center;font-size:.8125rem;color:var(--cf-text-muted); }
.cf-lms-type-badge    { display:inline-block;padding:.15rem .55rem;border-radius:100px;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--cf-primary-alpha,#e0e7ff);color:var(--cf-primary); }

/* Tabs */
.cf-lms-tabs { display:flex;gap:0;border-bottom:1px solid var(--cf-border);padding:0 2rem; }
.cf-lms-tab  { background:none;border:none;border-bottom:2px solid transparent;padding:.6rem 1rem;font-size:.875rem;font-weight:600;color:var(--cf-text-muted);cursor:pointer;margin-bottom:-1px;transition:all .15s; }
.cf-lms-tab.is-active { color:var(--cf-primary);border-bottom-color:var(--cf-primary); }
.cf-lms-tab-content { display:none;padding:1.75rem 2rem; }
.cf-lms-tab-content.is-active { display:block; }

/* Resource card */
.cf-lms-resource-card { display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border:1px solid var(--cf-border);border-radius:.75rem;background:var(--cf-bg-2); }

/* Locked */
.cf-lms-locked { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 2rem;gap:.75rem; }
.cf-lms-locked__icon { font-size:3rem; }
.cf-lms-locked h2 { margin:0;font-size:1.375rem; }
.cf-lms-locked p  { margin:0;color:var(--cf-text-muted); }

/* Sidebar */
.cf-lms-sidebar {
	border-left:1px solid var(--cf-border);
	background:var(--cf-bg);
	display:flex;flex-direction:column;
	position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
}
.cf-lms-sidebar__head { padding:1.25rem 1.25rem .75rem;border-bottom:1px solid var(--cf-border); }

/* Curriculum list */
.cf-lms-curriculum { padding:0;margin:0; }
.cf-lms-curriculum__item { border-bottom:1px solid var(--cf-border); }
.cf-lms-curriculum__item.is-current .cf-lms-curriculum__link { background:var(--cf-primary-alpha,#ede9fe);border-left:3px solid var(--cf-primary); }
.cf-lms-curriculum__item.is-completed .cf-lms-curriculum__num { color:var(--cf-primary); }
.cf-lms-curriculum__link {
	display:flex;align-items:center;gap:.75rem;
	padding:.75rem 1.25rem;text-decoration:none;color:var(--cf-text);
	font-size:.875rem;transition:background .12s;border-left:3px solid transparent;
}
.cf-lms-curriculum__link:hover { background:var(--cf-bg-2); }
.cf-lms-curriculum__link.is-locked { opacity:.55;cursor:default; }
.cf-lms-curriculum__num   { font-size:.75rem;font-weight:700;color:var(--cf-text-muted);width:18px;flex-shrink:0;text-align:center;display:flex;align-items:center;justify-content:center; }
.cf-lms-curriculum__title { flex:1;line-height:1.35; }
.cf-lms-curriculum__right { display:flex;align-items:center;gap:.4rem;flex-shrink:0; }

/* Module accordion in sidebar */
.cf-lms-module { border-bottom:1px solid var(--cf-border); }
.cf-lms-module[open] > .cf-lms-module__head .cf-lms-module__chevron { transform:rotate(90deg); }
.cf-lms-module__head {
	display:flex;align-items:center;gap:.6rem;
	padding:.875rem 1.25rem;cursor:pointer;list-style:none;
	font-size:.8125rem;font-weight:700;color:var(--cf-text);
	background:var(--cf-bg-2);
	user-select:none;
}
.cf-lms-module__head::-webkit-details-marker { display:none; }
.cf-lms-module__chevron { flex-shrink:0;color:var(--cf-text-muted);transition:transform .2s; }
.cf-lms-module__title { flex:1; }
.cf-lms-module__count { font-size:.7rem;font-weight:600;color:var(--cf-text-muted);background:var(--cf-border);border-radius:100px;padding:.1rem .45rem; }
.cf-lms-module .cf-lms-curriculum__link { padding-left:1.75rem; }

/* Button-based module toggle */
.cf-lms-module__toggle {
	display:flex;align-items:center;gap:.6rem;width:100%;
	padding:.875rem 1.25rem;cursor:pointer;
	font-size:.8125rem;font-weight:700;color:var(--cf-text);
	background:var(--cf-bg-2);border:none;text-align:left;
	user-select:none;
}
.cf-lms-module__toggle:hover { background:var(--cf-border); }
.cf-lms-module__arrow { flex-shrink:0;color:var(--cf-text-muted);transition:transform .2s;margin-left:auto; }
.cf-lms-module__toggle.is-open .cf-lms-module__arrow { transform:rotate(180deg); }

/* Prose */
.cf-lms-prose h2 { font-size:1.25rem;font-weight:700;margin:1.75rem 0 .75rem; }
.cf-lms-prose h3 { font-size:1.05rem;font-weight:700;margin:1.5rem 0 .6rem; }
.cf-lms-prose p  { line-height:1.8;margin-bottom:1.25rem; }
.cf-lms-prose img { border-radius:.75rem;max-width:100%; }
.cf-lms-prose a   { color:var(--cf-primary);text-decoration:underline; }

/* Mobile */
@media (max-width:900px) {
	.cf-lms-body { grid-template-columns:1fr; }
	.cf-lms-sidebar { position:static;height:auto;border-left:none;border-top:1px solid var(--cf-border); }
	.cf-lms-topbar { grid-template-columns:1fr auto; }
	.cf-lms-topbar__center { display:none; }
	.cf-lms-lesson-header,.cf-lms-tabs,.cf-lms-tab-content { padding-left:1rem;padding-right:1rem; }
}