/**
 * SkinPoint Academy — Front-end styles.
 *
 * Mobile-first, BEM naming, Astra-compatible.
 * Uses CSS custom properties for easy theming.
 *
 * Architecture:
 *   .sp-dash__*       — Student dashboard (sidebar, nav, tabs, login, settings)
 *   .sp-dashboard__*  — Dashboard content blocks (course cards, certificates, stats)
 *   .sp-course*       — Single course & archive pages
 *   .sp-lesson*       — Single lesson page
 *   .sp-certificate*  — Certificate verification page
 *   .sp-btn*          — Shared button system
 *   .sp-progress*     — Shared progress bars
 *   .sp-teaser*       — Gated content teaser
 */

/* ── Custom Properties ─────────────────────────────────── */
:root {
	--sp-color-primary: #2563eb;
	--sp-color-primary-hover: #1d4ed8;
	--sp-color-primary-light: rgba(37, 99, 235, 0.08);
	--sp-color-success: #10b981;
	--sp-color-success-light: rgba(16, 185, 129, 0.08);
	--sp-color-danger: #ef4444;
	--sp-color-warning: #f59e0b;
	--sp-color-bg: #ffffff;
	--sp-color-bg-alt: #f8fafc;
	--sp-color-bg-dark: #f1f5f9;
	--sp-color-border: #e2e8f0;
	--sp-color-text: #1e293b;
	--sp-color-text-muted: #64748b;
	--sp-color-sidebar-bg: #1e293b;
	--sp-color-sidebar-text: #cbd5e1;
	--sp-color-sidebar-active: #ffffff;
	--sp-radius: 0.75rem;
	--sp-radius-sm: 0.5rem;
	--sp-radius-lg: 1rem;
	--sp-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--sp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--sp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--sp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	--sp-transition: 0.2s ease;
	--sp-transition-slow: 0.3s ease;
	--sp-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 1: SHARED COMPONENTS (buttons, progress, teaser)
 * ══════════════════════════════════════════════════════════ */

/* ── Screen Reader Only ───────────────────────────────── */
.sp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Buttons ───────────────────────────────────────────── */
.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: var(--sp-radius-sm);
	font-size: 0.938rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--sp-transition),
		transform var(--sp-transition),
		box-shadow var(--sp-transition),
		opacity var(--sp-transition);
}

.sp-btn:active {
	transform: scale(0.98);
}

.sp-btn--primary {
	background-color: var(--sp-color-primary);
	color: #fff;
}

.sp-btn--primary:hover,
.sp-btn--primary:focus-visible {
	background-color: var(--sp-color-primary-hover);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.sp-btn--secondary {
	background-color: transparent;
	color: var(--sp-color-primary);
	border: 2px solid var(--sp-color-primary);
}

.sp-btn--secondary:hover,
.sp-btn--secondary:focus-visible {
	background-color: var(--sp-color-primary);
	color: #fff;
	text-decoration: none;
}

.sp-btn--full {
	width: 100%;
}

.sp-btn--small {
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
	white-space: nowrap;
}

.sp-btn--outline {
	background: transparent;
	color: var(--sp-color-primary);
	border: 1.5px solid var(--sp-color-primary);
}

.sp-btn--outline:hover,
.sp-btn--outline:focus-visible {
	background: var(--sp-color-primary-light);
	color: var(--sp-color-primary-hover);
}

.sp-btn--complete {
	background-color: var(--sp-color-success);
	color: #fff;
}

.sp-btn--complete:hover,
.sp-btn--complete:focus-visible {
	opacity: 0.9;
}

.sp-btn--complete:disabled {
	opacity: 0.6;
	cursor: wait;
}

.sp-btn--continue {
	background: var(--sp-color-primary);
	color: #fff;
	text-align: center;
	padding: 0.6rem 1rem;
	border-radius: var(--sp-radius-sm);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: all var(--sp-transition);
	margin-top: auto;
}

.sp-btn--continue:hover {
	background: var(--sp-color-primary-hover);
	color: #fff;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.sp-btn--start {
	background: var(--sp-color-success);
	color: #fff;
	text-align: center;
	padding: 0.6rem 1rem;
	border-radius: var(--sp-radius-sm);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: all var(--sp-transition);
	margin-top: auto;
}

.sp-btn--start:hover {
	background: #059669;
	color: #fff;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.sp-btn--completed {
	background: transparent;
	color: var(--sp-color-success);
	text-align: center;
	padding: 0.6rem 1rem;
	border: 2px solid var(--sp-color-success);
	border-radius: var(--sp-radius-sm);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: all var(--sp-transition);
	margin-top: auto;
}

.sp-btn--completed:hover {
	background: var(--sp-color-success);
	color: #fff;
}

.sp-btn--pdf {
	background-color: #1e3a5f;
	color: #fff;
}

.sp-btn--pdf:hover,
.sp-btn--pdf:focus-visible {
	background-color: #14293f;
	color: #fff;
	text-decoration: none;
}

/* ── Progress Bar (single definition) ─────────────────── */
.sp-progress-bar {
	flex: 1;
	width: 100%;
	height: 0.5rem;
	background-color: var(--sp-color-border);
	border-radius: 1rem;
	overflow: hidden;
}

.sp-progress-bar__fill {
	height: 100%;
	border-radius: 1rem;
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Default gradient */
.sp-progress-bar__fill {
	background: linear-gradient(90deg, var(--sp-color-primary), #6366f1);
}

/* Contextual progress colors */
.sp-progress--low .sp-progress-bar__fill {
	background: linear-gradient(90deg, #ef4444, #f97316);
}

.sp-progress--mid .sp-progress-bar__fill {
	background: linear-gradient(90deg, #f97316, #eab308);
}

.sp-progress--high .sp-progress-bar__fill {
	background: linear-gradient(90deg, #22c55e, #10b981);
}

.sp-progress-bar__text {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--sp-color-text-muted);
	min-width: 36px;
	text-align: right;
}

/* ── Teaser (gated content) ────────────────────────────── */
.sp-teaser {
	text-align: center;
	padding: 3rem 1.5rem;
	background-color: var(--sp-color-bg-alt);
	border-radius: var(--sp-radius);
	border: 1px dashed var(--sp-color-border);
}

.sp-teaser__message {
	margin-bottom: 1.5rem;
	font-size: 1.125rem;
	color: var(--sp-color-text-muted);
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 2: STUDENT DASHBOARD (sp-dash__*)
 *  Rendered by Dashboard.php via [sp_dashboard] shortcode
 * ══════════════════════════════════════════════════════════ */

/* ── Main Container ───────────────────────────────────── */
.sp-dash {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1rem;
	gap: 0;
	min-height: 70vh;
}

/* ── Sidebar ──────────────────────────────────────────── */
.sp-dash__sidebar {
	background: var(--sp-color-sidebar-bg);
	border-radius: var(--sp-radius-lg);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--sp-shadow-md);
}

.sp-dash__profile {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-dash__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
}

.sp-dash__profile-name {
	color: var(--sp-color-sidebar-active);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
}

/* ── Navigation ───────────────────────────────────────── */
.sp-dash__nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.sp-dash__nav-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	border-radius: var(--sp-radius-sm);
	color: var(--sp-color-sidebar-text);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	transition: all var(--sp-transition);
	white-space: nowrap;
}

.sp-dash__nav-link:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--sp-color-sidebar-active);
	text-decoration: none;
}

.sp-dash__nav-link--active {
	background: rgba(37, 99, 235, 0.2);
	color: #fff;
	font-weight: 600;
}

.sp-dash__nav-link--logout {
	margin-top: 0.25rem;
	color: #f87171;
}

.sp-dash__nav-link--logout:hover {
	background: rgba(248, 113, 113, 0.15);
	color: #fca5a5;
}

.sp-dash__nav-icon {
	font-size: 1.125rem;
	line-height: 1;
	flex-shrink: 0;
}

/* ── Main Content ─────────────────────────────────────── */
.sp-dash__main {
	flex: 1;
	min-width: 0;
}

/* ── Dashboard Header (Welcome banner) ────────────────── */
.sp-dash__header {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2rem;
	padding: 2rem;
	background: linear-gradient(135deg, var(--sp-color-primary), #4f46e5, #7c3aed);
	border-radius: var(--sp-radius-lg);
	color: #fff;
	box-shadow: 0 8px 32px rgba(37, 99, 235, 0.25);
	position: relative;
	overflow: hidden;
}

/* Decorative background pattern */
.sp-dash__header::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	pointer-events: none;
}

.sp-dash__header::after {
	content: '';
	position: absolute;
	bottom: -40%;
	left: 10%;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

.sp-dash__title {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	position: relative;
	z-index: 1;
}

.sp-dash__subtitle {
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	font-size: 0.938rem;
	position: relative;
	z-index: 1;
}

/* ── Stats Row ────────────────────────────────────────── */
.sp-dash__stats {
	display: flex;
	gap: 1rem;
	position: relative;
	z-index: 1;
}

.sp-dash__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	min-width: 72px;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--sp-radius-sm);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.sp-dash__stat-icon {
	font-size: 1.25rem;
	line-height: 1;
}

.sp-dash__stat-value {
	font-size: 1.375rem;
	font-weight: 700;
	color: #fff;
}

.sp-dash__stat-label {
	font-size: 0.688rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.8;
}

/* ── Section Titles & Headers ─────────────────────────── */
.sp-dash__section-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 1.75rem 0 1rem;
	color: var(--sp-color-text);
}

.sp-dash__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
}

.sp-dash__view-all {
	font-size: 0.875rem;
	color: var(--sp-color-primary);
	text-decoration: none;
	font-weight: 500;
	transition: opacity var(--sp-transition);
}

.sp-dash__view-all:hover {
	opacity: 0.8;
}

/* ── Dashboard Course Cards ───────────────────────────── */
.sp-dash__courses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

/* ── Empty States ─────────────────────────────────────── */
.sp-dash__empty-card {
	text-align: center;
	padding: 3rem 2rem;
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow);
}

.sp-dash__empty-icon {
	font-size: 3rem;
	display: block;
	margin-bottom: 1rem;
}

.sp-dash__empty-card h2 {
	font-size: 1.375rem;
	margin: 0 0 0.75rem;
	color: var(--sp-color-text);
}

.sp-dash__empty-card p {
	color: var(--sp-color-text-muted);
	margin: 0 0 1.5rem;
	line-height: 1.6;
}

/* ── Orders Table ─────────────────────────────────────── */
.sp-dash__orders-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow);
	background: var(--sp-color-bg);
}

.sp-dash__orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.sp-dash__orders-table thead {
	background: var(--sp-color-bg-alt);
}

.sp-dash__orders-table th {
	padding: 0.875rem 1rem;
	text-align: left;
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sp-color-text-muted);
	border-bottom: 2px solid var(--sp-color-border);
}

.sp-dash__orders-table td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--sp-color-border);
	vertical-align: middle;
}

.sp-dash__orders-table tr:last-child td {
	border-bottom: none;
}

.sp-dash__orders-table tr:hover td {
	background-color: var(--sp-color-bg-alt);
}

/* Order status badges */
.sp-dash__status {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sp-dash__status--completed,
.sp-dash__status--processing {
	background-color: var(--sp-color-success-light);
	color: #059669;
}

.sp-dash__status--on-hold,
.sp-dash__status--pending {
	background-color: rgba(245, 158, 11, 0.1);
	color: #d97706;
}

.sp-dash__status--cancelled,
.sp-dash__status--refunded,
.sp-dash__status--failed {
	background-color: rgba(239, 68, 68, 0.1);
	color: #dc2626;
}

/* ── Settings Form ────────────────────────────────────── */
.sp-dash__settings-form {
	max-width: 560px;
	background: var(--sp-color-bg);
	padding: 2rem;
	border-radius: var(--sp-radius-lg);
	border: 1px solid var(--sp-color-border);
	box-shadow: var(--sp-shadow);
}

.sp-dash__field {
	margin-bottom: 1.25rem;
}

.sp-dash__field label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--sp-color-text);
}

.sp-dash__field input[type="text"],
.sp-dash__field input[type="email"],
.sp-dash__field input[type="password"] {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-sm);
	font-size: 0.938rem;
	font-family: inherit;
	background: var(--sp-color-bg);
	color: var(--sp-color-text);
	transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
	box-sizing: border-box;
}

.sp-dash__field input:focus {
	outline: none;
	border-color: var(--sp-color-primary);
	box-shadow: 0 0 0 3px var(--sp-color-primary-light);
}

.sp-dash__field input:disabled {
	background: var(--sp-color-bg-dark);
	color: var(--sp-color-text-muted);
	cursor: not-allowed;
}

.sp-dash__field-hint {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8rem;
	color: var(--sp-color-text-muted);
}

.sp-dash__divider {
	border: none;
	border-top: 1px solid var(--sp-color-border);
	margin: 1.5rem 0;
}

.sp-dash__form-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.sp-dash__form-msg {
	font-size: 0.875rem;
	font-weight: 500;
	transition: opacity var(--sp-transition);
}

.sp-dash__form-msg--ok {
	color: var(--sp-color-success);
}

.sp-dash__form-msg--error {
	color: var(--sp-color-danger);
}

/* ── Guest Login State ────────────────────────────────── */
.sp-dash--guest {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
	padding: 2rem;
}

.sp-login-card {
	width: 100%;
	max-width: 440px;
	background: var(--sp-color-bg);
	padding: 2.5rem 2rem;
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow-xl);
	border: 1px solid var(--sp-color-border);
}

.sp-login-heading {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1.75rem;
	color: var(--sp-color-text);
}

.sp-login-card .woocommerce-form-row {
	margin-bottom: 1rem;
}

.sp-login-card .woocommerce-Input--text,
.sp-login-card .input-text {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-sm);
	font-size: 0.938rem;
	font-family: inherit;
	background: var(--sp-color-bg);
	color: var(--sp-color-text);
	transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
	box-sizing: border-box;
}

.sp-login-card .woocommerce-Input--text:focus,
.sp-login-card .input-text:focus {
	outline: none;
	border-color: var(--sp-color-primary);
	box-shadow: 0 0 0 3px var(--sp-color-primary-light);
}

.sp-login-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0.75rem 0 1.25rem;
	font-size: 0.875rem;
}

.sp-login-options .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--sp-color-text-muted);
	cursor: pointer;
}

.sp-forgot-password {
	color: var(--sp-color-primary);
	text-decoration: none;
	font-weight: 500;
	transition: opacity var(--sp-transition);
}

.sp-forgot-password:hover {
	opacity: 0.8;
}

.sp-login-button {
	width: 100%;
	padding: 0.875rem 1.5rem;
	background: var(--sp-color-primary);
	color: #fff;
	border: none;
	border-radius: var(--sp-radius-sm);
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: all var(--sp-transition);
}

.sp-login-button:hover {
	background: var(--sp-color-primary-hover);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.sp-password-row {
	position: relative;
}

/* Social login separator (rendered by SocialLogin.php hook)
   PHP generates .sp-social-divider; sp-academy had .sp-social-separator */
.sp-login-card .sp-social-separator,
.sp-social-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem 0;
	color: var(--sp-color-text-muted);
	font-size: 0.85rem;
}

.sp-login-card .sp-social-separator::before,
.sp-login-card .sp-social-separator::after,
.sp-social-divider::before,
.sp-social-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--sp-color-border);
}

/* Hide DM Suite pseudo-element "lub" when PHP renders physical divider */
.sp-social-login-area::before {
	display: none !important;
}

/* Keep the gradient line from DM Suite but only on .sp-social-login (legacy) */
.sp-social-login-area::after {
	display: none !important;
}

/* Social buttons container (generated by SocialLogin.php) */
.sp-social-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

/* ── Certificates List (Dashboard) ────────────────────── */
.sp-dash__certs-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* ── Responsive Dashboard Layout ──────────────────────── */
@media (min-width: 40rem) {
	.sp-dash__nav {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.sp-dash__courses {
		grid-template-columns: repeat(2, 1fr);
	}

	.sp-dash__header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 64rem) {
	.sp-dash {
		flex-direction: row;
		gap: 2rem;
	}

	.sp-dash__sidebar {
		width: 260px;
		flex-shrink: 0;
		margin-bottom: 0;
		position: sticky;
		top: 2rem;
		align-self: flex-start;
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
		border-radius: var(--sp-radius-lg);
	}

	.sp-dash__main {
		flex: 1;
		min-width: 0;
	}

	.sp-dash__nav {
		flex-direction: column;
	}
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 3: DASHBOARD CONTENT BLOCKS (sp-dashboard__*)
 *  Course cards, certificates, stats within dashboard tabs
 * ══════════════════════════════════════════════════════════ */

/* ── Course Cards Grid ────────────────────────────────── */
.sp-dashboard__courses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 40rem) {
	.sp-dashboard__courses {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Single Course Card */
.sp-dashboard__card {
	display: flex;
	flex-direction: column;
	background: var(--sp-color-bg);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow);
	overflow: hidden;
	transition: transform var(--sp-transition), box-shadow var(--sp-transition);
	border: 1px solid var(--sp-color-border);
}

.sp-dashboard__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sp-shadow-lg);
}

.sp-dashboard__card--complete {
	border-color: var(--sp-color-success);
	border-width: 2px;
}

.sp-dashboard__card-image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.sp-dashboard__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sp-transition-slow);
}

.sp-dashboard__card:hover .sp-dashboard__card-image img {
	transform: scale(1.04);
}

.sp-dashboard__badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: var(--sp-color-success);
	color: #fff;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.78rem;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.sp-dashboard__card-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.sp-dashboard__card-title {
	font-size: 1.1rem;
	margin: 0;
	line-height: 1.3;
}

.sp-dashboard__card-title a {
	color: var(--sp-color-text);
	text-decoration: none;
	transition: color var(--sp-transition);
}

.sp-dashboard__card-title a:hover {
	color: var(--sp-color-primary);
}

.sp-dashboard__card-meta {
	color: var(--sp-color-text-muted);
	font-size: 0.85rem;
	margin: 0;
}

/* Card Progress */
.sp-dashboard__card-progress {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* ── Certificates Section ─────────────────────────────── */
.sp-dashboard__certificates {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sp-color-border);
}

.sp-dashboard__section-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

.sp-dashboard__certs-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sp-dashboard__cert-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	gap: 1rem;
	transition: box-shadow var(--sp-transition);
}

.sp-dashboard__cert-row:hover {
	box-shadow: var(--sp-shadow-md);
}

.sp-dashboard__cert-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.sp-dashboard__cert-icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.sp-dashboard__cert-course {
	display: block;
	font-weight: 600;
	line-height: 1.4;
}

.sp-dashboard__cert-meta {
	display: block;
	font-size: 0.85rem;
	color: var(--sp-color-text-muted);
	margin-top: 0.15rem;
}

.sp-dashboard__cert-actions {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* ── Guest / Empty Card ───────────────────────────────── */
.sp-dashboard--guest,
.sp-dashboard--empty {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 50vh;
	padding: 2rem;
}

.sp-dashboard__guest-card,
.sp-dashboard__empty-card {
	text-align: center;
	max-width: 460px;
	padding: 3rem 2rem;
	background: var(--sp-color-bg);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow-lg);
	border: 1px solid var(--sp-color-border);
}

.sp-dashboard__guest-icon,
.sp-dashboard__empty-icon {
	font-size: 3rem;
	display: block;
	margin-bottom: 1rem;
}

.sp-dashboard__guest-card h2,
.sp-dashboard__empty-card h2 {
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
}

.sp-dashboard__guest-card p,
.sp-dashboard__empty-card p {
	color: var(--sp-color-text-muted);
	margin: 0 0 1.5rem;
	line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 4: SINGLE COURSE PAGE
 * ══════════════════════════════════════════════════════════ */

.sp-course {
	max-width: 72rem;
	margin: 0 auto;
	padding: 1.5rem 1rem;
}

.sp-course__hero {
	margin-bottom: 2rem;
}

.sp-course__thumbnail {
	margin-bottom: 1.5rem;
}

.sp-course__image {
	width: 100%;
	height: auto;
	border-radius: var(--sp-radius);
	object-fit: cover;
}

.sp-course__title {
	font-size: 1.75rem;
	margin-bottom: 0.75rem;
}

.sp-course__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	color: var(--sp-color-text-muted);
	font-size: 0.875rem;
}

.sp-course__meta span::before {
	content: "";
}

.sp-course__meta span + span::before {
	content: "·  ";
}

.sp-course__content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.sp-course__main {
	flex: 1;
	min-width: 0;
}

.sp-course__description {
	margin-bottom: 2rem;
	line-height: 1.7;
}

/* Benefits */
.sp-course__benefits {
	margin-bottom: 2rem;
	padding: 1.5rem;
	background-color: var(--sp-color-bg-alt);
	border-radius: var(--sp-radius);
}

.sp-course__benefits h3 {
	margin-bottom: 1rem;
}

.sp-course__benefits-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sp-course__benefits-list li {
	padding: 0.375rem 0 0.375rem 1.5rem;
	position: relative;
}

.sp-course__benefits-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--sp-color-success);
	font-weight: 700;
}

/* Syllabus */
.sp-course__syllabus {
	margin-bottom: 2rem;
}

.sp-course__syllabus h3 {
	margin-bottom: 1rem;
}

.sp-syllabus__topic {
	margin-bottom: 1.5rem;
}

.sp-syllabus__topic-title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--sp-color-border);
}

.sp-syllabus__lessons {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sp-syllabus__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--sp-radius-sm);
	transition: background-color var(--sp-transition);
}

.sp-syllabus__item:hover {
	background-color: var(--sp-color-bg-alt);
}

.sp-syllabus__item--current {
	background-color: var(--sp-color-primary-light);
	font-weight: 600;
}

.sp-syllabus__item--completed .sp-syllabus__link {
	color: var(--sp-color-text-muted);
}

.sp-syllabus__icon {
	flex-shrink: 0;
	width: 1.25rem;
	text-align: center;
	font-size: 0.875rem;
}

.sp-syllabus__link {
	color: var(--sp-color-text);
	text-decoration: none;
	font-size: 0.938rem;
}

.sp-syllabus__link:hover {
	color: var(--sp-color-primary);
}

.sp-syllabus__link--locked {
	color: var(--sp-color-text-muted);
	cursor: default;
}

.sp-syllabus__link--current {
	color: var(--sp-color-primary);
}

.sp-syllabus__empty {
	color: var(--sp-color-text-muted);
	font-style: italic;
}

/* Course Sidebar Card */
.sp-course__sidebar {
	width: 100%;
}

.sp-course__card {
	background-color: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	padding: 1.5rem;
	box-shadow: var(--sp-shadow-md);
}

.sp-course__price {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--sp-color-primary);
}

.sp-course__alert {
	padding: 0.75rem 1rem;
	border-radius: var(--sp-radius-sm);
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.sp-course__alert--warning {
	background-color: #fef3cd;
	color: #856404;
	border: 1px solid #ffc107;
}

.sp-course__progress {
	margin: 1rem 0;
}

.sp-course__progress-text {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.813rem;
	color: var(--sp-color-text-muted);
}

.sp-course__details {
	list-style: none;
	padding: 1rem 0 0;
	margin: 1.25rem 0 0;
	border-top: 1px solid var(--sp-color-border);
}

.sp-course__details li {
	padding: 0.375rem 0;
	font-size: 0.875rem;
	display: flex;
	justify-content: space-between;
}

.sp-course__details strong {
	color: var(--sp-color-text-muted);
	font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 5: SINGLE LESSON PAGE
 * ══════════════════════════════════════════════════════════ */

.sp-lesson {
	max-width: 72rem;
	margin: 0 auto;
	padding: 1rem;
}

.sp-lesson__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--sp-color-border);
}

.sp-lesson__back {
	color: var(--sp-color-text-muted);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: color var(--sp-transition);
}

.sp-lesson__back:hover {
	color: var(--sp-color-primary);
}

.sp-lesson__progress {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
	max-width: 20rem;
}

.sp-lesson__progress span {
	font-size: 0.813rem;
	color: var(--sp-color-text-muted);
	white-space: nowrap;
}

.sp-lesson__content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.sp-lesson__main {
	flex: 1;
	min-width: 0;
}

.sp-lesson__title {
	font-size: 1.75rem;
	margin-bottom: 1.5rem;
}

.sp-lesson__body {
	line-height: 1.7;
	margin-bottom: 2rem;
}

.sp-lesson__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sp-radius);
}

.sp-lesson__actions {
	padding: 1.5rem 0;
	border-top: 1px solid var(--sp-color-border);
}

.sp-lesson__completed {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--sp-color-success);
	font-weight: 600;
	font-size: 1rem;
}

/* Lesson Navigation */
.sp-lesson__nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	border-top: 1px solid var(--sp-color-border);
	border-bottom: 1px solid var(--sp-color-border);
}

.sp-lesson__prev,
.sp-lesson__next {
	color: var(--sp-color-primary);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: opacity var(--sp-transition);
}

.sp-lesson__prev:hover,
.sp-lesson__next:hover {
	opacity: 0.8;
}

.sp-lesson__prev--disabled,
.sp-lesson__next--disabled {
	visibility: hidden;
}

.sp-lesson__next {
	margin-left: auto;
}

/* Lesson Sidebar */
.sp-lesson__sidebar {
	width: 100%;
}

.sp-lesson__sidebar-title {
	font-size: 1.125rem;
	margin-bottom: 1rem;
}

.sp-lesson__sidebar-title a {
	color: var(--sp-color-text);
	text-decoration: none;
}

.sp-lesson__sidebar-title a:hover {
	color: var(--sp-color-primary);
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 6: COURSE ARCHIVE PAGE
 * ══════════════════════════════════════════════════════════ */

.sp-courses-archive {
	max-width: 72rem;
	margin: 0 auto;
	padding: 1.5rem 1rem;
}

.sp-courses-archive__header {
	margin-bottom: 2rem;
}

.sp-courses-archive__title {
	font-size: 2rem;
}

.sp-courses-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.sp-course-card {
	background-color: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	overflow: hidden;
	box-shadow: var(--sp-shadow);
	transition: box-shadow var(--sp-transition), transform var(--sp-transition);
}

.sp-course-card:hover {
	box-shadow: var(--sp-shadow-lg);
	transform: translateY(-3px);
}

.sp-course-card__thumbnail {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.sp-course-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sp-transition-slow);
}

.sp-course-card:hover .sp-course-card__image {
	transform: scale(1.03);
}

.sp-course-card__body {
	padding: 1.25rem;
}

.sp-course-card__title {
	font-size: 1.125rem;
	margin-bottom: 0.75rem;
	line-height: 1.3;
}

.sp-course-card__title a {
	color: var(--sp-color-text);
	text-decoration: none;
}

.sp-course-card__title a:hover {
	color: var(--sp-color-primary);
}

.sp-course-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1rem;
	margin-bottom: 0.75rem;
	font-size: 0.813rem;
	color: var(--sp-color-text-muted);
}

.sp-course-card__price {
	color: var(--sp-color-primary);
	font-weight: 700;
}

.sp-course-card__excerpt {
	font-size: 0.875rem;
	color: var(--sp-color-text-muted);
	margin-bottom: 1rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sp-courses-archive__pagination {
	margin-top: 2rem;
	text-align: center;
}

.sp-courses-archive__empty {
	text-align: center;
	color: var(--sp-color-text-muted);
	font-size: 1.125rem;
	padding: 3rem 1rem;
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 7: CERTIFICATE VERIFICATION PAGE
 * ══════════════════════════════════════════════════════════ */

.sp-certificate-verify {
	max-width: 600px;
	margin: 3rem auto;
	padding: 0 1rem;
}

.sp-certificate-verify__card {
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-lg);
	padding: 2.5rem 2rem;
	text-align: center;
	box-shadow: var(--sp-shadow-lg);
}

.sp-certificate-verify__card--valid {
	border-top: 4px solid var(--sp-color-success);
}

.sp-certificate-verify__card--revoked {
	border-top: 4px solid var(--sp-color-warning);
}

.sp-certificate-verify__card--invalid {
	border-top: 4px solid var(--sp-color-danger);
}

.sp-certificate-verify__badge {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.sp-certificate-verify__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.sp-certificate-verify__subtitle {
	color: var(--sp-color-text-muted);
	margin: 0 0 2rem;
	font-size: 1rem;
}

.sp-certificate-verify__details {
	text-align: left;
	border-top: 1px solid var(--sp-color-border);
	padding-top: 1.5rem;
	margin-top: 1rem;
}

.sp-certificate-verify__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--sp-color-border);
}

.sp-certificate-verify__row:last-child {
	border-bottom: none;
}

.sp-certificate-verify__label {
	font-weight: 500;
	color: var(--sp-color-text-muted);
	font-size: 0.9rem;
}

.sp-certificate-verify__value {
	font-weight: 600;
	text-align: right;
}

.sp-certificate-verify__status--valid {
	color: var(--sp-color-success);
}

.sp-certificate-verify__status--revoked {
	color: var(--sp-color-danger);
}

.sp-certificate-verify__issuer {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--sp-color-border);
	color: var(--sp-color-text-muted);
	font-size: 0.85rem;
}

.sp-certificate-verify__issuer p {
	margin: 0 0 0.25rem;
}

.sp-certificate-verify__download {
	margin-top: 1.5rem;
	text-align: center;
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 7b: NEW DASHBOARD TABS
 *  Quiz attempts, Assignments, Q&A, Reviews, Wishlist
 * ══════════════════════════════════════════════════════════ */

/* ── Quiz Attempts Table ─────────────────────────────── */
.sp-dash__quiz-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow);
	background: var(--sp-color-bg);
}

.sp-dash__quiz-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.sp-dash__quiz-table thead {
	background: var(--sp-color-bg-alt);
}

.sp-dash__quiz-table th {
	padding: 0.875rem 1rem;
	text-align: left;
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sp-color-text-muted);
	border-bottom: 2px solid var(--sp-color-border);
}

.sp-dash__quiz-table td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--sp-color-border);
	vertical-align: middle;
}

.sp-dash__quiz-table tr:last-child td {
	border-bottom: none;
}

.sp-dash__quiz-table tr:hover td {
	background-color: var(--sp-color-bg-alt);
}

/* Quiz status badges */
.sp-dash__status--passed {
	background-color: var(--sp-color-success-light);
	color: #059669;
}

.sp-dash__status--failed {
	background-color: rgba(239, 68, 68, 0.1);
	color: #dc2626;
}

/* ── Assignments Table ───────────────────────────────── */
.sp-dash__assignments-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow);
	background: var(--sp-color-bg);
}

.sp-dash__assignments-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.sp-dash__assignments-table thead {
	background: var(--sp-color-bg-alt);
}

.sp-dash__assignments-table th {
	padding: 0.875rem 1rem;
	text-align: left;
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sp-color-text-muted);
	border-bottom: 2px solid var(--sp-color-border);
}

.sp-dash__assignments-table td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--sp-color-border);
	vertical-align: middle;
}

.sp-dash__assignments-table tr:last-child td {
	border-bottom: none;
}

.sp-dash__assignments-table tr:hover td {
	background-color: var(--sp-color-bg-alt);
}

/* Assignment status badges */
.sp-dash__status--submitted {
	background-color: var(--sp-color-primary-light);
	color: var(--sp-color-primary);
}

.sp-dash__status--graded {
	background-color: var(--sp-color-success-light);
	color: #059669;
}

.sp-dash__status--pending {
	background-color: rgba(245, 158, 11, 0.1);
	color: #d97706;
}

/* ── Q&A List ────────────────────────────────────────── */
.sp-dash__qa-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sp-dash__qa-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	transition: box-shadow var(--sp-transition);
}

.sp-dash__qa-item:hover {
	box-shadow: var(--sp-shadow-md);
}

.sp-dash__qa-body {
	flex: 1;
	min-width: 0;
}

.sp-dash__qa-text {
	margin: 0 0 0.5rem;
	font-size: 0.938rem;
	line-height: 1.5;
	color: var(--sp-color-text);
}

.sp-dash__qa-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	font-size: 0.813rem;
	color: var(--sp-color-text-muted);
}

.sp-dash__qa-lesson {
	font-weight: 500;
}

.sp-dash__qa-replies {
	color: var(--sp-color-primary);
	font-weight: 500;
}

/* ── Reviews List ────────────────────────────────────── */
.sp-dash__reviews-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sp-dash__review-item {
	padding: 1.25rem;
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	transition: box-shadow var(--sp-transition);
}

.sp-dash__review-item:hover {
	box-shadow: var(--sp-shadow-md);
}

.sp-dash__review-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.sp-dash__review-course {
	font-weight: 600;
	color: var(--sp-color-text);
	text-decoration: none;
	transition: color var(--sp-transition);
}

.sp-dash__review-course:hover {
	color: var(--sp-color-primary);
}

.sp-dash__review-date {
	font-size: 0.813rem;
	color: var(--sp-color-text-muted);
	flex-shrink: 0;
}

.sp-dash__review-stars {
	font-size: 1.25rem;
	color: #f59e0b;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	line-height: 1;
}

.sp-dash__review-text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--sp-color-text-muted);
	line-height: 1.6;
}

/* ── Wishlist Grid ───────────────────────────────────── */
.sp-dash__wishlist-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.sp-dash__wishlist-card {
	display: flex;
	flex-direction: column;
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	overflow: hidden;
	box-shadow: var(--sp-shadow);
	transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-dash__wishlist-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sp-shadow-lg);
}

.sp-dash__wishlist-thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.sp-dash__wishlist-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sp-transition-slow);
}

.sp-dash__wishlist-card:hover .sp-dash__wishlist-thumb img {
	transform: scale(1.04);
}

.sp-dash__wishlist-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sp-dash__wishlist-title {
	font-size: 1.05rem;
	margin: 0;
	line-height: 1.3;
}

.sp-dash__wishlist-title a {
	color: var(--sp-color-text);
	text-decoration: none;
	transition: color var(--sp-transition);
}

.sp-dash__wishlist-title a:hover {
	color: var(--sp-color-primary);
}

.sp-dash__wishlist-price {
	font-weight: 700;
	color: var(--sp-color-primary);
	font-size: 1.1rem;
}

/* ── Standalone Wishlist shortcode aliases ────────────── */
/* Wishlist.php uses sp-wishlist__* ; Dashboard uses sp-dash__wishlist-*
   These aliases ensure both render correctly. */
.sp-wishlist { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
.sp-wishlist__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.sp-wishlist__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.sp-wishlist__card { display: flex; flex-direction: column; background: var(--sp-color-bg); border: 1px solid var(--sp-color-border); border-radius: var(--sp-radius); overflow: hidden; box-shadow: var(--sp-shadow); transition: box-shadow var(--sp-transition), transform var(--sp-transition); }
.sp-wishlist__card:hover { box-shadow: var(--sp-shadow-md); transform: translateY(-2px); }
.sp-wishlist__card-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }
.sp-wishlist__card-body { padding: 1rem; flex: 1; }
.sp-wishlist__card-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; }
.sp-wishlist__card-title a { color: var(--sp-color-text); text-decoration: none; }
.sp-wishlist__card-title a:hover { color: var(--sp-color-primary); }
.sp-wishlist__card-rating { color: #f59e0b; font-size: 0.9rem; display: block; margin-bottom: 0.25rem; }
.sp-wishlist__card-price { font-weight: 700; color: var(--sp-color-primary); font-size: 1.1rem; }
.sp-wishlist__remove { margin-top: 0.5rem; }

@media (min-width: 40rem) {
	.sp-wishlist__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
	.sp-wishlist__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Danger button for wishlist remove */
.sp-btn--danger {
	background-color: transparent;
	color: var(--sp-color-danger);
	border: 1px solid var(--sp-color-danger);
}

.sp-btn--danger:hover,
.sp-btn--danger:focus-visible {
	background-color: var(--sp-color-danger);
	color: #fff;
	text-decoration: none;
}

/* ── Responsive: New Dashboard Tabs ──────────────────── */
@media (min-width: 40rem) {
	.sp-dash__wishlist-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.sp-dash__wishlist-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.sp-dash__qa-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.sp-dash__qa-item .sp-btn {
		width: 100%;
		text-align: center;
	}

	.sp-dash__review-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.sp-dash__quiz-table,
	.sp-dash__assignments-table {
		font-size: 0.8rem;
	}

	.sp-dash__quiz-table th,
	.sp-dash__quiz-table td,
	.sp-dash__assignments-table th,
	.sp-dash__assignments-table td {
		padding: 0.625rem 0.5rem;
	}
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 8: RESPONSIVE BREAKPOINTS
 * ══════════════════════════════════════════════════════════ */

/* Tablet (640px+) */
@media (min-width: 40rem) {
	.sp-courses-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sp-course__title,
	.sp-lesson__title {
		font-size: 2rem;
	}
}

/* Desktop (1024px+) */
@media (min-width: 64rem) {
	.sp-courses-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.sp-course__content {
		flex-direction: row;
	}

	.sp-course__sidebar {
		width: 22rem;
		flex-shrink: 0;
	}

	.sp-course__card {
		position: sticky;
		top: 2rem;
	}

	.sp-lesson__content {
		display: grid;
		grid-template-columns: 1fr 18rem;
		grid-template-rows: auto auto;
		gap: 2rem;
	}

	.sp-lesson__main {
		grid-column: 1;
		grid-row: 1;
	}

	.sp-lesson__nav {
		grid-column: 1;
		grid-row: 2;
		border-bottom: none;
	}

	.sp-lesson__sidebar {
		grid-column: 2;
		grid-row: 1 / -1;
		width: auto;
		position: sticky;
		top: 2rem;
		align-self: start;
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
	}
}

/* Mobile adjustments */
@media (max-width: 600px) {
	.sp-certificate-verify__row {
		flex-direction: column;
		gap: 0.25rem;
	}

	.sp-certificate-verify__value {
		text-align: left;
	}

	.sp-dashboard__cert-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.sp-dashboard__cert-actions {
		flex-direction: column;
		width: 100%;
	}

	.sp-dashboard__cert-actions .sp-btn--small {
		width: 100%;
		text-align: center;
	}

	.sp-dash__sidebar {
		border-radius: var(--sp-radius);
		padding: 1rem;
	}

	.sp-dash__profile {
		padding-bottom: 0.75rem;
		margin-bottom: 0.75rem;
	}

	.sp-dash__stat {
		min-width: 60px;
		padding: 0.5rem;
	}

	.sp-dash__stat-value {
		font-size: 1.125rem;
	}

	.sp-dash__orders-table {
		font-size: 0.8rem;
	}

	.sp-dash__orders-table th,
	.sp-dash__orders-table td {
		padding: 0.625rem 0.5rem;
	}

	.sp-login-card {
		padding: 2rem 1.25rem;
	}

	.sp-dash__settings-form {
		padding: 1.25rem;
	}
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 9: INSTRUCTOR DASHBOARD (.sp-idash)
 * ══════════════════════════════════════════════════════════ */

/* ── Layout (mobile-first: single column) ─── */
.sp-idash {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--sp-color-bg-alt);
	font-family: inherit;
}

/* ── Sidebar (mobile: top bar) ─── */
.sp-idash__sidebar {
	background: var(--sp-color-sidebar-bg);
	color: var(--sp-color-sidebar-text);
	padding: 1rem;
}

.sp-idash__profile {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-idash__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--sp-color-primary);
	object-fit: cover;
}

.sp-idash__profile-name {
	font-weight: 600;
	color: var(--sp-color-sidebar-active);
	font-size: 0.9rem;
}

.sp-idash__profile-role {
	display: block;
	font-size: 0.75rem;
	color: var(--sp-color-sidebar-text);
	margin-top: 2px;
}

/* ── Nav (mobile: horizontal scroll) ─── */
.sp-idash__nav {
	display: flex;
	flex-direction: row;
	gap: 0.25rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
}

.sp-idash__nav::-webkit-scrollbar {
	display: none;
}

.sp-idash__nav-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--sp-radius-sm);
	color: var(--sp-color-sidebar-text);
	text-decoration: none;
	font-size: 0.85rem;
	white-space: nowrap;
	transition: background var(--sp-transition), color var(--sp-transition);
}

.sp-idash__nav-link:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--sp-color-sidebar-active);
}

.sp-idash__nav-link--active {
	background: rgba(255, 255, 255, 0.12);
	color: var(--sp-color-sidebar-active);
	font-weight: 600;
}

.sp-idash__nav-link--secondary {
	opacity: 0.7;
}

.sp-idash__nav-link--logout {
	margin-top: 0.5rem;
	color: var(--sp-color-danger);
}

.sp-idash__nav-icon {
	font-size: 1.1rem;
	flex-shrink: 0;
}

/* ── Main content area ─── */
.sp-idash__main {
	flex: 1;
	padding: 1.25rem 1rem;
	max-width: 100%;
	overflow-x: hidden;
}

.sp-idash__header {
	margin-bottom: 1.5rem;
}

.sp-idash__title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--sp-color-text);
	margin: 0 0 0.25rem;
}

.sp-idash__subtitle {
	font-size: 0.9rem;
	color: var(--sp-color-text-muted);
	margin: 0;
}

.sp-idash__section-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--sp-color-text);
	margin: 1.5rem 0 1rem;
}

/* ── Stats grid ─── */
.sp-idash__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.sp-idash__stat {
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	padding: 1rem;
	text-align: center;
	box-shadow: var(--sp-shadow);
}

.sp-idash__stat-icon {
	font-size: 1.5rem;
	display: block;
	margin-bottom: 0.25rem;
}

.sp-idash__stat-value {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--sp-color-text);
	display: block;
}

.sp-idash__stat-label {
	font-size: 0.75rem;
	color: var(--sp-color-text-muted);
	display: block;
	margin-top: 0.125rem;
}

/* ── Course grid (overview) ─── */
.sp-idash__course-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.sp-idash__course-card {
	display: flex;
	flex-direction: column;
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	overflow: hidden;
	box-shadow: var(--sp-shadow);
	transition: box-shadow var(--sp-transition), transform var(--sp-transition);
}

.sp-idash__course-card:hover {
	box-shadow: var(--sp-shadow-md);
	transform: translateY(-2px);
}

.sp-idash__course-thumb img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.sp-idash__course-info {
	padding: 0.75rem 1rem;
	flex: 1;
}

.sp-idash__course-info h4 {
	font-size: 0.95rem;
	margin: 0 0 0.25rem;
	line-height: 1.3;
}

.sp-idash__course-info h4 a {
	color: var(--sp-color-text);
	text-decoration: none;
}

.sp-idash__course-info h4 a:hover {
	color: var(--sp-color-primary);
}

.sp-idash__course-meta {
	font-size: 0.8rem;
	color: var(--sp-color-text-muted);
}

.sp-idash__course-card > .sp-btn {
	margin: 0 1rem 0.75rem;
}

/* ── Tables (horizontal scroll) ─── */
.sp-idash__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	background: var(--sp-color-bg);
	box-shadow: var(--sp-shadow);
}

.sp-idash__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 600px;
	font-size: 0.85rem;
}

.sp-idash__table thead {
	background: var(--sp-color-bg-alt);
	border-bottom: 2px solid var(--sp-color-border);
}

.sp-idash__table th {
	text-align: left;
	padding: 0.75rem 1rem;
	font-weight: 600;
	color: var(--sp-color-text-muted);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.sp-idash__table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--sp-color-border);
	vertical-align: middle;
}

.sp-idash__table tbody tr:last-child td {
	border-bottom: none;
}

.sp-idash__table tbody tr:hover {
	background: var(--sp-color-primary-light);
}

.sp-idash__student-cell {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sp-idash__student-cell img {
	border-radius: 50%;
	flex-shrink: 0;
}

.sp-idash__pct {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--sp-color-text);
	margin-left: 0.5rem;
}

.sp-idash__status {
	font-size: 0.82rem;
}

/* ── Small progress bar (in tables) ─── */
.sp-progress-bar--small {
	height: 6px;
	min-width: 60px;
	display: inline-block;
	vertical-align: middle;
}

/* ── Filter / Select ─── */
.sp-idash__filter {
	margin-bottom: 1rem;
}

.sp-idash__select {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-sm);
	background: var(--sp-color-bg);
	font-size: 0.9rem;
	color: var(--sp-color-text);
	appearance: none;
	cursor: pointer;
}

/* ── Q&A list ─── */
.sp-idash__qa-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sp-idash__qa-item {
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	padding: 1rem;
	box-shadow: var(--sp-shadow);
}

.sp-idash__qa-item--unanswered {
	border-left: 3px solid var(--sp-color-danger);
}

.sp-idash__qa-header {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}

.sp-idash__qa-header img {
	border-radius: 50%;
	flex-shrink: 0;
}

.sp-idash__qa-meta {
	flex: 1;
	min-width: 0;
}

.sp-idash__qa-meta strong {
	display: block;
	font-size: 0.9rem;
}

.sp-idash__qa-meta span {
	display: block;
	font-size: 0.78rem;
	color: var(--sp-color-text-muted);
}

.sp-idash__qa-badge {
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.sp-idash__qa-body {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--sp-color-text);
}

.sp-idash__qa-body p {
	margin: 0;
}

.sp-idash__qa-reply {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--sp-color-border);
}

.sp-idash__qa-reply textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-sm);
	font-size: 0.85rem;
	resize: vertical;
	font-family: inherit;
}

/* ── Announcements ─── */
.sp-idash__announce-form {
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--sp-shadow);
}

.sp-idash__announce-form h3 {
	font-size: 1rem;
	margin: 0 0 1rem;
}

.sp-idash__field {
	margin-bottom: 0.75rem;
}

.sp-idash__field label {
	display: block;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--sp-color-text);
	margin-bottom: 0.25rem;
}

.sp-idash__field input[type="text"],
.sp-idash__field input[type="number"],
.sp-idash__field textarea,
.sp-idash__field select {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius-sm);
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--sp-color-text);
	background: var(--sp-color-bg);
	transition: border-color var(--sp-transition);
}

.sp-idash__field input:focus,
.sp-idash__field textarea:focus,
.sp-idash__field select:focus {
	outline: none;
	border-color: var(--sp-color-primary);
	box-shadow: 0 0 0 3px var(--sp-color-primary-light);
}

.sp-idash__field-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.sp-idash__announce-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sp-idash__announce-item {
	background: var(--sp-color-bg);
	border: 1px solid var(--sp-color-border);
	border-radius: var(--sp-radius);
	padding: 1rem;
}

.sp-idash__announce-header h4 {
	font-size: 0.95rem;
	margin: 0 0 0.25rem;
}

.sp-idash__announce-header span {
	font-size: 0.78rem;
	color: var(--sp-color-text-muted);
}

.sp-idash__announce-item p {
	font-size: 0.85rem;
	color: var(--sp-color-text);
	margin: 0.5rem 0 0;
	line-height: 1.5;
}

/* ── Empty states ─── */
.sp-idash__empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--sp-color-text-muted);
}

.sp-idash__empty-icon {
	font-size: 2.5rem;
	display: block;
	margin-bottom: 0.75rem;
}

.sp-idash__empty p {
	font-size: 0.95rem;
	margin: 0;
}

/* ── Access denied ─── */
.sp-idash__access-denied {
	text-align: center;
	padding: 3rem 1.5rem;
	max-width: 420px;
	margin: 4rem auto;
	background: var(--sp-color-bg);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow-md);
}

.sp-idash__access-denied p {
	font-size: 1rem;
	color: var(--sp-color-text-muted);
	margin-bottom: 1.25rem;
}

/* ── Grading modal ─── */
.sp-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-modal[hidden] {
	display: none;
}

.sp-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.sp-modal__content {
	position: relative;
	background: var(--sp-color-bg);
	border-radius: var(--sp-radius-lg);
	padding: 1.5rem;
	width: min(90vw, 480px);
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--sp-shadow-xl);
}

.sp-modal__content h3 {
	font-size: 1.15rem;
	margin: 0 0 0.75rem;
}

/* ── Instructor link in student dash ─── */
.sp-dash__nav-link--instructor {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 0.5rem;
	padding-top: 0.75rem;
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 10: INSTRUCTOR DASHBOARD — TABLET (640px+)
 * ══════════════════════════════════════════════════════════ */
@media (min-width: 40rem) {
	.sp-idash__stats {
		grid-template-columns: repeat(4, 1fr);
	}

	.sp-idash__course-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sp-idash__nav {
		flex-wrap: wrap;
	}

	.sp-idash__select {
		max-width: 320px;
	}

	.sp-idash__qa-reply {
		flex-direction: row;
		align-items: flex-end;
	}

	.sp-idash__qa-reply textarea {
		flex: 1;
	}
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 11: INSTRUCTOR DASHBOARD — DESKTOP (1024px+)
 * ══════════════════════════════════════════════════════════ */
@media (min-width: 64rem) {
	.sp-idash {
		flex-direction: row;
	}

	.sp-idash__sidebar {
		width: 260px;
		min-height: 100vh;
		position: sticky;
		top: 0;
		overflow-y: auto;
		flex-shrink: 0;
	}

	.sp-idash__nav {
		flex-direction: column;
		overflow-x: visible;
	}

	.sp-idash__nav-link--logout {
		margin-top: auto;
	}

	.sp-idash__main {
		padding: 2rem;
	}

	.sp-idash__title {
		font-size: 1.6rem;
	}

	.sp-idash__course-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ══════════════════════════════════════════════════════════
 *  SECTION 12: GLOBAL TABLE SCROLL FIX (mobile)
 * ══════════════════════════════════════════════════════════ */

/* Existing dashboard tables — add scroll wrapper where missing */
.sp-dash__orders-table-wrap,
.sp-dash__earnings-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}