/**
 * VELYON Professional LMS — Frontend Styles
 * Brand palette: black background, white text, #00ce2d green accents.
 */

/* ---------------------------------------------------------------
   Buttons — shared across every learner-facing tab (Mock Test,
   Video Lectures, Advanced Notes, etc). All of these buttons live
   on WHITE cards (test cards, video cards, note cards, the mock
   test runner's light modal) even though the page around them is
   dark, so — unlike the rest of this dark-themed stylesheet — these
   are deliberately light-surface buttons: a solid green primary and
   a bordered white/gray secondary, both with a real hover state
   (lift + shadow/border change) rather than the flat, un-styled
   default browser button that was rendering before this class
   existed anywhere in the public stylesheet.
--------------------------------------------------------------- */
.vln-pro-lms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: var(--vln-radius-s);
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.vln-pro-lms-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.vln-pro-lms-btn-primary {
	background: var(--vln-accent);
	color: #06210c;
}

.vln-pro-lms-btn-primary:hover {
	background: var(--vln-accent);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--vln-accent) 35%, transparent);
}

.vln-pro-lms-btn-primary:active {
	transform: translateY(0);
	box-shadow: none;
}

.vln-pro-lms-btn-secondary {
	background: var(--vln-surface);
	color: var(--vln-on-accent);
	border-color: rgba(0, 0, 0, 0.15);
}

.vln-pro-lms-btn-secondary:hover {
	border-color: var(--vln-accent);
	background: #f3fdf5;
	transform: translateY(-1px);
	box-shadow: var(--vln-shadow);
}

.vln-pro-lms-btn-secondary:active {
	transform: translateY(0);
	box-shadow: none;
}

.vln-pro-lms-btn-text {
	background: transparent;
	color: #666;
	padding: 6px 4px;
}

.vln-pro-lms-btn-text:hover {
	color: var(--vln-on-accent);
}

.vln-pro-lms-btn:disabled,
.vln-pro-lms-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------------
   Course List Shortcode — Search & Filter Bar
   (White theme — deliberately different from the dark landing page,
   per request: this listing page should be fully white, no dark
   colors, so cards read as light, engaging catalog tiles.)
--------------------------------------------------------------- */
.vln-pro-lms-course-filter-bar {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	margin-bottom: 24px;
}

@media (max-width: 640px) {
	.vln-pro-lms-course-filter-bar {
		flex-wrap: wrap;
	}
}

.vln-pro-lms-course-filter-search {
	flex: 1 1 auto;
	min-width: 0;
}

.vln-pro-lms-course-filter-search input {
	width: 100% !important;
	box-sizing: border-box;
	background: var(--vln-surface);
	border: 1px solid #d1d5db;
	color: var(--vln-on-accent);
	border-radius: var(--vln-radius-m);
	padding: 12px 16px;
	font-size: 14px;
}

.vln-pro-lms-course-filter-bar select {
	flex: 0 0 auto;
	width: auto !important;
	background: var(--vln-surface);
	border: 1px solid #d1d5db;
	color: var(--vln-on-accent);
	border-radius: var(--vln-radius-m);
	padding: 12px 16px;
	font-size: 14px;
}

.vln-pro-lms-course-filter-search input:focus,
.vln-pro-lms-course-filter-bar select:focus {
	outline: none;
	border-color: var(--vln-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vln-accent) 15%, transparent);
}

/* ---------------------------------------------------------------
   Course List Shortcode — Cards Grid
--------------------------------------------------------------- */
.vln-pro-lms-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 24px 0;
}

@media (min-width: 1000px) {
	.vln-pro-lms-course-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.vln-pro-lms-course-grid-empty {
	color: #6b7280;
	background: #f9fafb;
	padding: 40px;
	text-align: center;
	border: 1px solid #e5e7eb;
	border-radius: var(--vln-radius-m);
}

.vln-pro-lms-course-card {
	background: var(--vln-surface);
	border: 1px solid #e5e7eb;
	border-radius: var(--vln-radius-m);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--vln-shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	text-decoration: none !important;
	color: inherit;
	cursor: pointer;
}

.vln-pro-lms-course-card:hover {
	border-color: var(--vln-accent);
	box-shadow: var(--vln-shadow);
	transform: translateY(-4px);
}

.vln-pro-lms-course-card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #f3f4f6;
	overflow: hidden;
}

.vln-pro-lms-course-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vln-pro-lms-course-card-media-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f3f4f6 0%, #e6f9ea 100%);
}

.vln-pro-lms-course-card-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.vln-pro-lms-course-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(0, 0, 0, 0.72);
	color: #ffffff;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	backdrop-filter: blur(2px);
}

.vln-pro-lms-course-card-badge .dashicons {
	color: var(--vln-accent-text);
	font-size: 12px;
	width: 12px;
	height: 12px;
}

.vln-pro-lms-course-card-body {
	padding: 18px 20px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.vln-pro-lms-course-card-body h3 {
	color: var(--vln-text);
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.35;
}

.vln-pro-lms-course-card-tagline {
	color: color-mix(in srgb, var(--vln-text) 85%, transparent);
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 8px;
}

.vln-pro-lms-course-card-level {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	background: color-mix(in srgb, var(--vln-accent) 10%, transparent);
	color: var(--vln-accent-deep);
	border: 1px solid color-mix(in srgb, var(--vln-accent) 30%, transparent);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 12px;
}

.vln-pro-lms-course-card-level .dashicons {
	font-size: 12px;
	width: 12px;
	height: 12px;
}

.vln-pro-lms-course-card-facts {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vln-pro-lms-course-card-facts li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: var(--vln-text);
	font-size: 12.5px;
	line-height: 1.45;
}

.vln-pro-lms-course-card-facts .dashicons {
	color: var(--vln-accent-text);
	font-size: 14px;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	flex-shrink: 0;
}

.vln-pro-lms-course-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
	flex: 1;
}

.vln-pro-lms-course-card-tag {
	background: color-mix(in srgb, var(--vln-accent) 10%, transparent);
	color: var(--vln-accent-deep);
	border: 1px solid color-mix(in srgb, var(--vln-accent) 30%, transparent);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
}

.vln-pro-lms-course-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid #f0f0f0;
}

.vln-pro-lms-course-card-price {
	color: var(--vln-accent-deep);
	font-weight: 800;
	font-size: 17px;
}

.vln-pro-lms-course-card-price-free {
	font-size: 14px;
}

.vln-pro-lms-course-card-btn {
	display: inline-block;
	background: var(--vln-accent);
	color: var(--vln-on-accent) !important;
	border: 1px solid var(--vln-accent);
	border-radius: var(--vln-radius-s);
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vln-pro-lms-course-card:hover .vln-pro-lms-course-card-btn {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--vln-accent) 35%, transparent);
	color: var(--vln-on-accent) !important;
}

/* ---------------------------------------------------------------
   Internal Landing Page — Milestone 10
--------------------------------------------------------------- */
.vln-pro-lms-landing {
	background: var(--vln-bg);
	padding: 40px 20px 80px;
}

.vln-pro-lms-landing-breadcrumb {
	max-width: 1100px;
	margin: 0 auto 16px;
	font-size: 12px;
	color: color-mix(in srgb, var(--vln-text) 45%, transparent);
}

.vln-pro-lms-landing-breadcrumb a {
	color: color-mix(in srgb, var(--vln-text) 60%, transparent);
	text-decoration: none;
}

.vln-pro-lms-landing-breadcrumb a:hover {
	color: var(--vln-accent-text);
}

.vln-pro-lms-landing-breadcrumb span {
	margin: 0 6px;
}

.vln-pro-lms-landing-container {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 32px;
	align-items: start;
}

@media (max-width: 900px) {
	.vln-pro-lms-landing-container {
		grid-template-columns: 1fr;
	}
}

.vln-pro-lms-landing-title {
	color: var(--vln-text);
	font-size: 30px;
	line-height: 1.25;
	margin: 0 0 14px;
}

.vln-pro-lms-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.vln-pro-lms-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: color-mix(in srgb, var(--vln-accent) 12%, transparent);
	color: var(--vln-accent-text);
	border: 1px solid color-mix(in srgb, var(--vln-accent) 40%, transparent);
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.vln-pro-lms-pill-outline {
	background: transparent;
	color: color-mix(in srgb, var(--vln-text) 80%, transparent);
	border-color: color-mix(in srgb, var(--vln-text) 25%, transparent);
	text-transform: none;
	font-weight: 600;
}

.vln-pro-lms-pill .dashicons {
	font-size: 13px;
	width: 13px;
	height: 13px;
}

.vln-pro-lms-landing-hero-banner {
	position: relative;
	border-radius: var(--vln-radius-m);
	border: 1px solid color-mix(in srgb, var(--vln-accent) 30%, transparent);
	background: linear-gradient(135deg, var(--vln-surface) 0%, color-mix(in srgb, var(--vln-accent) 14%, var(--vln-surface)) 100%);
	background-size: cover;
	background-position: center;
	min-height: 220px;
	margin-bottom: 24px;
	overflow: hidden;
}

.vln-pro-lms-landing-hero-overlay {
	position: relative;
	height: 100%;
	min-height: 220px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.75) 100%);
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.vln-pro-lms-pill-level {
	align-self: flex-start;
	background: rgba(0, 0, 0, 0.75) !important;
	border-color: var(--vln-accent) !important;
}

.vln-pro-lms-landing-duration-badge {
	align-self: flex-end;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid var(--vln-accent);
	border-radius: var(--vln-radius-m);
	padding: 8px 16px;
	text-align: center;
	color: #ffffff;
}

.vln-pro-lms-landing-duration-badge strong {
	display: block;
	font-size: 20px;
	line-height: 1;
	color: var(--vln-accent-text);
}

.vln-pro-lms-landing-duration-badge span {
	font-size: 10px;
	letter-spacing: 0.05em;
}

.vln-pro-lms-landing-headline {
	color: var(--vln-text);
	font-size: 26px;
	line-height: 1.3;
	margin: 0 0 12px;
}

.vln-pro-lms-landing-subheadline {
	color: color-mix(in srgb, var(--vln-text) 70%, transparent);
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 16px;
}

.vln-pro-lms-landing-section {
	background: var(--vln-surface);
	border: 1px solid color-mix(in srgb, var(--vln-accent) 20%, transparent);
	border-radius: var(--vln-radius-m);
	padding: 28px;
	margin-bottom: 24px;
}

.vln-pro-lms-landing-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--vln-text);
	font-size: 18px;
	margin: 0 0 16px;
}

.vln-pro-lms-landing-section-title .dashicons {
	color: var(--vln-accent-text);
}

.vln-pro-lms-landing-section h4 {
	color: var(--vln-text);
	font-size: 15px;
	margin: 0 0 10px;
}

.vln-pro-lms-landing-prose {
	color: color-mix(in srgb, var(--vln-text) 75%, transparent);
	line-height: 1.7;
	font-size: 14px;
	margin-bottom: 16px;
}

/* Stats bar */
.vln-pro-lms-landing-stats-bar {
	max-width: 1100px;
	margin: 0 auto 24px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 12px;
	background: var(--vln-surface);
	border: 1px solid color-mix(in srgb, var(--vln-accent) 20%, transparent);
	border-radius: var(--vln-radius-m);
	padding: 20px;
}

.vln-pro-lms-landing-stat {
	text-align: center;
	color: var(--vln-text);
}

.vln-pro-lms-landing-stat .dashicons {
	color: var(--vln-accent-text);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.vln-pro-lms-landing-stat strong {
	display: block;
	font-size: 22px;
	margin: 4px 0 2px;
}

.vln-pro-lms-landing-stat span {
	font-size: 10px;
	color: color-mix(in srgb, var(--vln-text) 50%, transparent);
	letter-spacing: 0.04em;
}

/* Mentors */
.vln-pro-lms-mentors-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.vln-pro-lms-mentor-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	flex: 1;
	min-width: 220px;
}

.vln-pro-lms-mentor-card img,
.vln-pro-lms-mentor-card-placeholder {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--vln-accent);
	flex-shrink: 0;
}

.vln-pro-lms-mentor-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--vln-accent) 10%, transparent);
	color: var(--vln-accent-text);
	font-size: 22px;
}

.vln-pro-lms-mentor-card strong {
	color: var(--vln-text);
	display: block;
	font-size: 14px;
	margin-bottom: 2px;
}

.vln-pro-lms-mentor-card p {
	color: color-mix(in srgb, var(--vln-text) 60%, transparent);
	font-size: 13px;
	margin: 0;
	line-height: 1.5;
}

/* Checklist grid (What You'll Build / Master) */
.vln-pro-lms-landing-checklist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 8px 24px;
	margin-bottom: 20px;
}

.vln-pro-lms-landing-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vln-pro-lms-landing-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: color-mix(in srgb, var(--vln-text) 80%, transparent);
	font-size: 13px;
	line-height: 1.5;
}

.vln-pro-lms-landing-checklist .dashicons {
	color: var(--vln-accent-text);
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 1px;
}

/* Cohort Timeline */
.vln-pro-lms-timeline {
	position: relative;
	padding-left: 24px;
	border-left: 2px solid color-mix(in srgb, var(--vln-accent) 30%, transparent);
}

.vln-pro-lms-timeline-month {
	position: relative;
	margin-bottom: 24px;
}

.vln-pro-lms-timeline-marker {
	position: absolute;
	left: -30px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--vln-bg);
	border: 2px solid var(--vln-accent);
}

.vln-pro-lms-timeline-week {
	background: color-mix(in srgb, var(--vln-text) 3%, transparent);
	border: 1px solid color-mix(in srgb, var(--vln-text) 8%, transparent);
	border-radius: var(--vln-radius-s);
	padding: 10px 14px;
	margin-bottom: 8px;
}

.vln-pro-lms-timeline-week summary {
	color: var(--vln-accent-text);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}

.vln-pro-lms-timeline-week p {
	color: color-mix(in srgb, var(--vln-text) 70%, transparent);
	font-size: 13px;
	line-height: 1.6;
	margin: 8px 0 0;
}

.vln-pro-lms-timeline-finish h4 {
	color: var(--vln-accent-text);
}

.vln-pro-lms-timeline-finish p {
	color: color-mix(in srgb, var(--vln-text) 85%, transparent);
	font-size: 14px;
	line-height: 1.6;
	margin: 8px 0 0;
}

/* Trust section (Certificate + Joining Letter) */
.vln-pro-lms-landing-trust-card {
	background: linear-gradient(135deg, color-mix(in srgb, var(--vln-accent) 8%, transparent), color-mix(in srgb, var(--vln-accent) 2%, transparent));
	border: 1px solid color-mix(in srgb, var(--vln-accent) 40%, transparent);
	border-radius: var(--vln-radius-m);
	padding: 28px;
	margin-bottom: 24px;
	text-align: center;
}

.vln-pro-lms-landing-trust-card h3 {
	color: var(--vln-text);
	font-size: 19px;
	margin: 0 0 10px;
}

.vln-pro-lms-landing-trust-card p {
	color: color-mix(in srgb, var(--vln-text) 70%, transparent);
	font-size: 13px;
	max-width: 500px;
	margin: 0 auto 20px;
	line-height: 1.6;
}

.vln-pro-lms-trust-images {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.vln-pro-lms-trust-image img {
	max-width: 220px;
	border-radius: var(--vln-radius-m);
	border: 1px solid color-mix(in srgb, var(--vln-accent) 35%, transparent);
	display: block;
	margin-bottom: 6px;
}

.vln-pro-lms-trust-image span {
	color: color-mix(in srgb, var(--vln-text) 50%, transparent);
	font-size: 11px;
}

/* Fellowship upsell */
.vln-pro-lms-landing-upsell {
	border: 1px dashed color-mix(in srgb, var(--vln-text) 25%, transparent);
	border-radius: var(--vln-radius-m);
	padding: 24px;
	text-align: center;
}

.vln-pro-lms-landing-upsell h3 {
	color: var(--vln-text);
	font-size: 16px;
	margin: 0 0 6px;
}

.vln-pro-lms-landing-upsell p {
	color: color-mix(in srgb, var(--vln-text) 55%, transparent);
	font-size: 13px;
	margin-bottom: 16px;
}

.vln-pro-lms-btn-enroll-outline {
	background: transparent;
	border: 1px solid var(--vln-accent);
	color: var(--vln-accent-text);
}

/* Sidebar */
.vln-pro-lms-landing-sidebar {
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vln-pro-lms-landing-sidebar-card {
	background: var(--vln-surface);
	border: 1px solid color-mix(in srgb, var(--vln-accent) 25%, transparent);
	border-radius: var(--vln-radius-m);
	padding: 22px;
}

.vln-pro-lms-landing-sidebar-card h4 {
	color: var(--vln-text);
	font-size: 14px;
	margin: 0 0 12px;
}

.vln-pro-lms-sidebar-urgency {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: var(--vln-accent-text);
	font-size: 12px;
	line-height: 1.5;
	margin: 0 0 14px;
}

.vln-pro-lms-sidebar-urgency .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.vln-pro-lms-landing-price {
	color: var(--vln-accent-text);
	font-size: 28px;
	font-weight: 800;
	margin-bottom: 16px;
}

.vln-pro-lms-landing-price-free {
	font-size: 20px;
}

.vln-pro-lms-btn-enroll {
	display: inline-block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	background: var(--vln-accent);
	color: var(--vln-on-accent);
	border: none;
	border-radius: var(--vln-radius-m);
	padding: 14px 32px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.vln-pro-lms-btn-enroll:hover {
	opacity: 1;
	color: var(--vln-on-accent);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--vln-accent) 35%, transparent);
}

.vln-pro-lms-btn-enroll-outline:hover {
	color: var(--vln-on-accent) !important;
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--vln-accent) 35%, transparent);
}

.vln-pro-lms-btn-enroll:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.vln-pro-lms-landing-note {
	color: color-mix(in srgb, var(--vln-text) 45%, transparent);
	font-size: 13px;
	margin-top: 16px;
}

.vln-pro-lms-sidebar-meta {
	list-style: none;
	margin: 16px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid color-mix(in srgb, var(--vln-text) 10%, transparent);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vln-pro-lms-sidebar-meta li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: color-mix(in srgb, var(--vln-text) 70%, transparent);
	font-size: 12px;
	line-height: 1.5;
}

.vln-pro-lms-sidebar-meta .dashicons {
	color: var(--vln-accent-text);
	font-size: 14px;
	width: 14px;
	height: 14px;
	margin-top: 1px;
}

/* ---------------------------------------------------------------
   Professional Workspace — Enrolled Learner View
--------------------------------------------------------------- */
.vln-pro-lms-workspace {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--vln-bg);
	border-radius: var(--vln-radius-m);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--vln-accent) 30%, transparent);
}

.vln-pro-lms-workspace-sidebar {
	width: 260px;
	flex-shrink: 0;
	background: var(--vln-surface);
	border-right: 1px solid color-mix(in srgb, var(--vln-accent) 25%, transparent);
	padding: 20px 0;
	min-height: 520px;
}

.vln-pro-lms-workspace-course-name {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--vln-accent-text);
	font-weight: 700;
	font-size: 13px;
	padding: 0 20px 16px;
	border-bottom: 1px solid color-mix(in srgb, var(--vln-accent) 20%, transparent);
	margin-bottom: 8px;
}

.vln-pro-lms-workspace-course-name .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.vln-pro-lms-workspace-nav {
	display: flex;
	flex-direction: column;
}

.vln-pro-lms-workspace-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	color: color-mix(in srgb, var(--vln-text) 75%, transparent);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	border-left: 3px solid transparent;
	transition: background 0.15s ease, color 0.15s ease;
}

.vln-pro-lms-workspace-nav-item .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: color-mix(in srgb, var(--vln-text) 40%, transparent);
}

.vln-pro-lms-workspace-nav-item:hover {
	background: color-mix(in srgb, var(--vln-accent) 8%, transparent);
	color: var(--vln-text);
}

.vln-pro-lms-workspace-nav-item.is-active {
	background: var(--vln-accent);
	color: var(--vln-on-accent);
	border-left-color: var(--vln-accent);
}

.vln-pro-lms-workspace-nav-item.is-active .dashicons {
	color: var(--vln-on-accent);
}

/* Upsell sidebar item — subtly distinct even when not active, so it stands out */
.vln-pro-lms-workspace-nav-item-upsell {
	color: var(--vln-accent-text);
}

.vln-pro-lms-workspace-nav-item-upsell .dashicons {
	color: var(--vln-accent-text);
}

.vln-pro-lms-workspace-nav-item-upsell.is-active {
	color: var(--vln-on-accent);
}

.vln-pro-lms-workspace-nav-item-upsell.is-active .dashicons {
	color: var(--vln-on-accent);
}

/* Persistent upsell banner — shown above the tab content on every tab except Upgrade itself */
.vln-pro-lms-workspace-upsell-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--vln-accent) 14%, transparent), color-mix(in srgb, var(--vln-accent) 4%, transparent));
	border: 1px solid color-mix(in srgb, var(--vln-accent) 40%, transparent);
	border-radius: var(--vln-radius-m);
	padding: 12px 16px;
	margin-bottom: 16px;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.vln-pro-lms-workspace-upsell-banner:hover {
	border-color: var(--vln-accent);
	transform: translateY(-1px);
}

.vln-pro-lms-workspace-upsell-banner .dashicons {
	color: var(--vln-accent-text);
	font-size: 20px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.vln-pro-lms-workspace-upsell-banner-text {
	flex: 1;
	color: color-mix(in srgb, var(--vln-text) 85%, transparent);
	font-size: 13px;
}

.vln-pro-lms-workspace-upsell-banner-text strong {
	color: var(--vln-text);
	margin-right: 6px;
}

.vln-pro-lms-workspace-upsell-banner-cta {
	color: var(--vln-accent-text);
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
}

/* Dedicated Upgrade to Fellowship tab */
.vln-pro-lms-upgrade-tab {
	text-align: center;
	padding: 48px 32px;
}

.vln-pro-lms-upgrade-tab .dashicons {
	color: var(--vln-accent-text);
	font-size: 40px;
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
}

.vln-pro-lms-upgrade-tab p {
	max-width: 480px;
	margin: 0 auto 24px;
}

.vln-pro-lms-workspace-content {
	flex: 1;
	padding: 28px 28px 28px 0;
	min-height: 520px;
}

.vln-pro-lms-tab-card {
	background: var(--vln-surface);
	border: 1px solid color-mix(in srgb, var(--vln-accent) 25%, transparent);
	border-radius: var(--vln-radius-m);
	padding: 28px;
}

.vln-pro-lms-tab-card h2 {
	color: var(--vln-text);
	margin: 0 0 4px;
	font-size: 20px;
}

.vln-pro-lms-tab-subtext {
	color: var(--vln-accent-text);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 20px;
}

.vln-pro-lms-tab-card p {
	color: color-mix(in srgb, var(--vln-text) 75%, transparent);
	font-size: 14px;
	line-height: 1.6;
}

.vln-pro-lms-tab-note {
	color: color-mix(in srgb, var(--vln-text) 40%, transparent) !important;
	font-size: 12px !important;
	margin-top: 16px;
}

.vln-pro-lms-tab-body {
	color: color-mix(in srgb, var(--vln-text) 85%, transparent);
	line-height: 1.7;
}

.vln-pro-lms-tab-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	color: color-mix(in srgb, var(--vln-text) 45%, transparent);
	font-size: 13px;
	padding: 40px 20px;
}

.vln-pro-lms-tab-empty .dashicons {
	color: var(--vln-accent-text);
	font-size: 26px;
	width: 26px;
	height: 26px;
}

.vln-pro-lms-badge {
	display: inline-block;
	background: color-mix(in srgb, var(--vln-accent) 12%, transparent);
	color: var(--vln-accent-text);
	border: 1px solid color-mix(in srgb, var(--vln-accent) 40%, transparent);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 11px;
	font-weight: 700;
	margin-top: 16px;
}

.vln-pro-lms-progress-bar {
	background: color-mix(in srgb, var(--vln-text) 10%, transparent);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
	margin-bottom: 8px;
}

.vln-pro-lms-progress-bar-fill {
	background: var(--vln-accent);
	height: 100%;
	border-radius: 999px;
	transition: width 0.3s ease;
}

@media (max-width: 782px) {
	.vln-pro-lms-workspace-content {
		padding: 20px;
	}

}

/* Below 600px (the theme's dedicated small-phone breakpoint -- the
   drawer is phone-only; a tablet keeps the side-by-side collapsible
   sidebar), the inline sidebar is replaced by the drawer + floating
   button printed at wp_footer (vln-pro-lms-sidebar.css), and the
   content takes the full width. */
@media (max-width: 600px) {
	.vln-pro-lms-workspace {
		flex-direction: column;
	}

	.vln-pro-lms-workspace-sidebar {
		display: none;
	}

	.vln-pro-lms-workspace-content {
		width: 100%;
	}
}

/* Content-top greeting strip -- first name from the site's
   [vy_learner_name] shortcode, shown above the tab card on every
   tab with a line specific to that tab. Deliberately in the content
   area (not the sidebar): this is what the learner is looking at,
   so it reads as the page speaking to them personally. */
.vln-pro-lms-workspace-greeting {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-bottom: 14px;
	padding: 12px 18px;
	border-radius: var(--vln-radius-m);
	border: 1px solid var(--vln-border);
	background: linear-gradient(90deg, color-mix(in srgb, var(--vln-accent) 12%, transparent), transparent 70%);
}

.vln-pro-lms-workspace-greeting-hi {
	color: var(--vln-text-muted);
	font-size: 13px;
	font-weight: 600;
}

.vln-pro-lms-workspace-greeting strong {
	color: var(--vln-accent-text);
	font-size: 15px;
	overflow-wrap: anywhere;
}

.vln-pro-lms-workspace-greeting-line {
	color: var(--vln-text);
	font-size: 13.5px;
	opacity: 0.85;
}

@media (max-width: 782px) {
	.vln-pro-lms-workspace-greeting {
		padding: 10px 14px;
	}
}