/* ============================================================
   Simple LMS — Frontend
   ============================================================ */

:root {
	--slms-fg:        #1a1d21;
	--slms-fg-muted:  #5b6b7c;
	--slms-bg:        #ffffff;
	--slms-bg-soft:   #f7f8fa;
	--slms-border:    #e5e7eb;
	--slms-accent:    #2563eb;
	--slms-accent-2:  #1d4ed8;
	--slms-success:   #16a34a;
	--slms-success-bg:#dcfce7;
	--slms-danger:    #dc2626;
	--slms-warning:   #d97706;
	--slms-radius:    10px;
	--slms-radius-sm: 6px;
	--slms-shadow:    0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06);
}

/* ============================================================
   Course page
   ============================================================ */
.slms-course-box {
	margin-top: 2em;
	padding: 1.75em;
	background: var(--slms-bg-soft);
	border-radius: var(--slms-radius);
	border: 1px solid var(--slms-border);
}
.slms-section-fe {
	margin-top: 1.75em;
	padding-top: 1.25em;
	border-top: 1px solid var(--slms-border);
}
.slms-section-fe:first-child { border-top: none; padding-top: 0; }
.slms-section-fe h3 { margin: 0 0 .6em; font-size: 1.05em; }

/* Lesson list (na stránce kurzu) */
.slms-lesson-list { list-style: none; padding: 0; margin: 0; }
.slms-lesson-list li {
	padding: 10px 12px;
	border-bottom: 1px solid var(--slms-border);
	display: flex;
	align-items: center;
	gap: 8px;
}
.slms-lesson-list li:last-child { border-bottom: none; }
.slms-lesson-list li.slms-done { opacity: .65; }
.slms-lesson-list .slms-check { color: var(--slms-success); margin-left: auto; font-weight: bold; }

/* Progress bar */
.slms-bar {
	background: var(--slms-border);
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
	margin: 10px 0 6px;
}
.slms-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #22c55e, #16a34a);
	transition: width .4s ease;
	border-radius: 999px;
}

/* ============================================================
   Lesson layout (2-column)
   ============================================================ */
.slms-lesson-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
	margin-top: 1em;
}
@media (max-width: 960px) {
	.slms-lesson-layout { grid-template-columns: 1fr; }
}

.slms-lesson-main { min-width: 0; }

/* Breadcrumb */
.slms-breadcrumb {
	font-size: 13px;
	color: var(--slms-fg-muted);
	margin-bottom: 12px;
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}
.slms-breadcrumb a {
	color: var(--slms-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s;
}
.slms-breadcrumb a:hover { border-bottom-color: var(--slms-accent); }
.slms-bc-sep { color: #cbd2d9; }
.slms-bc-current { color: var(--slms-fg); font-weight: 500; }

/* Header */
.slms-lesson-header { margin-bottom: 1.5em; }
.slms-lesson-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 8px;
}
.slms-lesson-badge.slms-type-text  { background: #dbeafe; color: #1e40af; }
.slms-lesson-badge.slms-type-video { background: #fed7aa; color: #9a3412; }
.slms-lesson-badge.slms-type-quiz  { background: #e9d5ff; color: #6b21a8; }

.slms-lesson-title {
	margin: 0;
	font-size: 2.2em;
	line-height: 1.2;
	font-weight: 700;
	color: var(--slms-fg);
}

/* Video wrapper — fully responsive 16:9 */
.slms-video-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 1.5em;
	border-radius: var(--slms-radius);
	overflow: hidden;
	background: #000;
	box-shadow: var(--slms-shadow);
}
.slms-video-wrap iframe,
.slms-video-wrap video,
.slms-video-wrap embed,
.slms-video-wrap object {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* Prose typography (lesson body) */
.slms-prose {
	font-size: 17px;
	line-height: 1.75;
	color: #2d3748;
	max-width: 720px;
}
.slms-prose > * + * { margin-top: 1.1em; }
.slms-prose h2 { font-size: 1.6em; line-height: 1.3; margin-top: 1.8em; font-weight: 700; }
.slms-prose h3 { font-size: 1.3em; line-height: 1.3; margin-top: 1.5em; font-weight: 600; }
.slms-prose p  { margin: 0 0 1em; }
.slms-prose a  { color: var(--slms-accent); text-decoration: underline; text-underline-offset: 3px; }
.slms-prose a:hover { color: var(--slms-accent-2); }
.slms-prose ul, .slms-prose ol { padding-left: 1.5em; margin: 0 0 1em; }
.slms-prose li { margin-bottom: .4em; }
.slms-prose blockquote {
	border-left: 4px solid var(--slms-accent);
	padding: .25em 0 .25em 1.25em;
	margin: 1.5em 0;
	color: var(--slms-fg-muted);
	font-style: italic;
	background: var(--slms-bg-soft);
	border-radius: 0 var(--slms-radius-sm) var(--slms-radius-sm) 0;
}
.slms-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--slms-radius-sm);
	box-shadow: var(--slms-shadow);
}
.slms-prose code {
	background: #f1f5f9;
	padding: .15em .35em;
	border-radius: 4px;
	font-size: .9em;
}
.slms-prose pre {
	background: #0f172a;
	color: #e2e8f0;
	padding: 1em 1.25em;
	border-radius: var(--slms-radius-sm);
	overflow-x: auto;
}
.slms-prose pre code { background: transparent; padding: 0; color: inherit; }

/* Mark complete */
.slms-mark-done { margin: 2em 0; }
.slms-complete-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--slms-accent);
	color: #fff;
	border: none;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--slms-radius);
	cursor: pointer;
	transition: all .15s;
	box-shadow: 0 1px 3px rgba(37,99,235,.3);
}
.slms-complete-btn:hover {
	background: var(--slms-accent-2);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(37,99,235,.4);
}
.slms-complete-btn:disabled { opacity: .7; cursor: wait; }
.slms-check-circle {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.7);
}

.slms-done-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--slms-success-bg);
	border: 1px solid #86efac;
	padding: 16px 20px;
	border-radius: var(--slms-radius);
	color: #166534;
}
.slms-done-card strong { display: block; font-size: 15px; }
.slms-done-card small { display: block; color: #15803d; font-size: 13px; }
.slms-done-icon {
	width: 36px;
	height: 36px;
	background: var(--slms-success);
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	flex-shrink: 0;
}

/* Lesson navigation cards */
.slms-lesson-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid var(--slms-border);
}
.slms-nav-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--slms-bg);
	border: 1px solid var(--slms-border);
	border-radius: var(--slms-radius);
	text-decoration: none !important;
	color: var(--slms-fg);
	transition: all .15s;
}
.slms-nav-card:hover {
	border-color: var(--slms-accent);
	box-shadow: var(--slms-shadow);
	transform: translateY(-1px);
}
.slms-nav-next { justify-content: flex-end; text-align: right; }
.slms-nav-meta small {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	color: var(--slms-fg-muted);
	letter-spacing: .5px;
}
.slms-nav-meta strong { display: block; font-size: 14px; }
.slms-nav-arrow { font-size: 22px; color: var(--slms-accent); }

/* ============================================================
   Notes section
   ============================================================ */
.slms-notes {
	margin: 2.5em 0 0;
	padding: 1.5em;
	background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid #fde68a;
	border-radius: var(--slms-radius);
}
.slms-notes-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.slms-notes-head h3 {
	margin: 0;
	font-size: 1.1em;
	font-weight: 600;
	color: #78350f;
}
.slms-notes-status {
	font-size: 12px;
	font-weight: 500;
	min-height: 16px;
	transition: opacity .2s;
}
.slms-notes-status.is-saving { color: var(--slms-fg-muted); }
.slms-notes-status.is-saved  { color: var(--slms-success); }
.slms-notes-status.is-error  { color: var(--slms-danger); }

.slms-notes .wp-editor-container { background: #fff; border-radius: var(--slms-radius-sm); }
.slms-notes .mce-toolbar-grp { background: #fffbeb !important; }
.slms-notes .mce-edit-area { background: #fff; }

.slms-notes-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
}
.slms-notes-actions small { color: #78350f; font-size: 12px; }

/* Generic buttons */
.slms-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: var(--slms-radius-sm);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--slms-border);
	background: #fff;
	color: var(--slms-fg);
	text-decoration: none;
	transition: all .15s;
}
.slms-btn:hover { border-color: var(--slms-accent); color: var(--slms-accent); }
.slms-btn-primary {
	background: var(--slms-accent);
	color: #fff;
	border-color: var(--slms-accent);
}
.slms-btn-primary:hover {
	background: var(--slms-accent-2);
	color: #fff;
	border-color: var(--slms-accent-2);
}
.slms-btn.is-loading { opacity: .7; cursor: wait; }

/* Locked card */
.slms-lock-card {
	background: var(--slms-bg-soft);
	border: 1px solid var(--slms-border);
	padding: 2em;
	border-radius: var(--slms-radius);
	text-align: center;
}

/* ============================================================
   Sidebar
   ============================================================ */
.slms-lesson-sidebar { position: sticky; top: 24px; }
.slms-sidebar-card {
	background: #fff;
	border: 1px solid var(--slms-border);
	border-radius: var(--slms-radius);
	padding: 16px 18px;
	margin-bottom: 14px;
	box-shadow: var(--slms-shadow);
}
.slms-sidebar-card small {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .5px;
	color: var(--slms-fg-muted);
	font-weight: 600;
}
.slms-sidebar-card h3 { margin: 4px 0 0; font-size: 1em; line-height: 1.3; }
.slms-sidebar-card h3 a { color: var(--slms-fg); text-decoration: none; }
.slms-sidebar-card h3 a:hover { color: var(--slms-accent); }
.slms-progress-meta { display: block; margin-top: 4px; color: var(--slms-fg-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }

.slms-curriculum h4 {
	margin: 0 0 10px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--slms-fg-muted);
}
.slms-sb-section {
	margin-bottom: 8px;
	border-radius: var(--slms-radius-sm);
	overflow: hidden;
}
.slms-sb-section summary {
	cursor: pointer;
	padding: 8px 10px;
	background: var(--slms-bg-soft);
	font-weight: 600;
	font-size: 13px;
	list-style: none;
	border-radius: var(--slms-radius-sm);
}
.slms-sb-section summary::-webkit-details-marker { display: none; }
.slms-sb-section summary::before {
	content: "▸";
	display: inline-block;
	margin-right: 6px;
	color: var(--slms-fg-muted);
	transition: transform .15s;
}
.slms-sb-section[open] summary::before { transform: rotate(90deg); }

.slms-sb-section ol {
	list-style: none;
	padding: 4px 0 4px 8px;
	margin: 0;
}
.slms-sb-section li { margin: 0; }
.slms-sb-section li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	text-decoration: none;
	color: var(--slms-fg);
	font-size: 13px;
	border-radius: var(--slms-radius-sm);
	transition: background .12s;
}
.slms-sb-section li a:hover { background: var(--slms-bg-soft); }
.slms-sb-section li.is-current a {
	background: #dbeafe;
	color: var(--slms-accent-2);
	font-weight: 600;
}
.slms-sb-section li.is-done a { color: var(--slms-fg-muted); }
.slms-sb-section li.is-done .slms-sb-icon { color: var(--slms-success); }
.slms-sb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 12px;
	color: var(--slms-fg-muted);
	flex-shrink: 0;
}

/* ============================================================
   Quiz styling
   ============================================================ */
.slms-quiz {
	background: #fff;
	border: 1px solid var(--slms-border);
	border-radius: var(--slms-radius);
	padding: 1.5em;
	margin: 2em 0;
	box-shadow: var(--slms-shadow);
}
.slms-quiz fieldset {
	border: none;
	padding: 1.25em;
	margin: 0 0 1em;
	background: var(--slms-bg-soft);
	border-radius: var(--slms-radius-sm);
}
.slms-quiz legend {
	font-weight: 600;
	font-size: 1.05em;
	color: var(--slms-fg);
	padding: 0;
	margin-bottom: .75em;
}
.slms-quiz label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
	border-radius: var(--slms-radius-sm);
	transition: background .12s;
	margin-bottom: 4px;
}
.slms-quiz label:hover { background: #fff; }
.slms-quiz input[type=radio], .slms-quiz input[type=checkbox] {
	width: 18px;
	height: 18px;
	accent-color: var(--slms-accent);
}

.slms-quiz-feedback {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-radius: var(--slms-radius);
	margin-top: 1em;
	font-size: 14px;
}
.slms-quiz-feedback.is-pass {
	background: var(--slms-success-bg);
	border: 1px solid #86efac;
	color: #166534;
}
.slms-quiz-feedback.is-fail {
	background: #fee2e2;
	border: 1px solid #fca5a5;
	color: #991b1b;
}

/* ============================================================
   Shortcodes
   ============================================================ */
.slms-my-courses { list-style: none; padding: 0; }
.slms-my-courses li {
	padding: 14px 16px;
	border: 1px solid var(--slms-border);
	margin-bottom: 10px;
	border-radius: var(--slms-radius);
	background: #fff;
	transition: all .15s;
}
.slms-my-courses li:hover { box-shadow: var(--slms-shadow); border-color: var(--slms-accent); }

.slms-certs { list-style: none; padding: 0; }
.slms-certs li {
	padding: 12px 14px;
	border-bottom: 1px solid var(--slms-border);
}