/* =============================================================
   Build By SS Learning — Frontend Styles (V1)
   ============================================================= */

/* ─── Variables ─────────────────────────────────────────────── */
:root {
	--bbssl-primary:       #6200ea;
	--bbssl-primary-dark:  #4a00b4;
	--bbssl-paid:          #d63638;
	--bbssl-free:          #00a32a;
	--bbssl-preview:       #2271b1;
	--bbssl-border:        #e0e0e0;
	--bbssl-bg-light:      #f8f8f8;
	--bbssl-text:          #1d2327;
	--bbssl-text-muted:    #757575;
	--bbssl-radius:        10px;
	--bbssl-shadow:        0 2px 12px rgba(0,0,0,.08);
}

/* ─── Page Header ────────────────────────────────────────────── */
.bbssl-page-header {
	margin-bottom: 32px;
}
.bbssl-page-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--bbssl-text);
	margin: 0 0 8px;
}
.bbssl-page-subtitle {
	color: var(--bbssl-text-muted);
	font-size: 1rem;
	margin: 0;
}

/* ─── Breadcrumb ─────────────────────────────────────────────── */
.bbssl-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .875rem;
	color: var(--bbssl-text-muted);
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.bbssl-breadcrumb a {
	color: var(--bbssl-primary);
	text-decoration: none;
}
.bbssl-breadcrumb a:hover {
	text-decoration: underline;
}
.bbssl-breadcrumb__sep {
	color: var(--bbssl-border);
}

/* ─── Continue Watching ──────────────────────────────────────── */
.bbssl-continue-watching {
	margin-bottom: 40px;
}
.bbssl-continue-watching__heading {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--bbssl-text);
	margin: 0 0 14px;
}
.bbssl-continue-watching__card {
	display: flex;
	align-items: center;
	gap: 24px;
	background: #fff;
	border: 1px solid var(--bbssl-border);
	border-left: 4px solid var(--bbssl-primary);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	padding: 20px 24px;
	flex-wrap: wrap;
}
.bbssl-continue-watching__info {
	flex: 1;
	min-width: 0;
}
.bbssl-continue-watching__project {
	font-size: .8rem;
	font-weight: 600;
	color: var(--bbssl-primary);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 4px;
}
.bbssl-continue-watching__lesson {
	font-size: 1rem;
	font-weight: 600;
	color: var(--bbssl-text);
	margin: 0 0 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bbssl-continue-watching__progress-bar {
	width: 100%;
	max-width: 360px;
	height: 6px;
	background: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 6px;
}
.bbssl-continue-watching__progress-fill {
	height: 100%;
	background: var(--bbssl-primary);
	border-radius: 3px;
	transition: width .3s ease;
}
.bbssl-continue-watching__pct {
	font-size: .8rem;
	color: var(--bbssl-text-muted);
	margin: 0;
}
.bbssl-continue-watching__action {
	flex-shrink: 0;
}
.bbssl-btn--resume {
	padding: 10px 22px;
	font-size: .9rem;
	white-space: nowrap;
}
@media ( max-width: 600px ) {
	.bbssl-continue-watching__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.bbssl-continue-watching__action {
		width: 100%;
	}
	.bbssl-btn--resume {
		display: block;
		text-align: center;
		width: 100%;
	}
}

/* ─── Project Progress Indicator ────────────────────────────── */
.bbssl-project-progress {
	margin-bottom: 28px;
}
.bbssl-project-progress__heading {
	font-size: 1rem;
	font-weight: 700;
	color: var(--bbssl-text);
	margin: 0 0 12px;
}
.bbssl-project-progress__card {
	background: #fff;
	border: 1px solid var(--bbssl-border);
	border-left: 4px solid var(--bbssl-free);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	padding: 18px 22px;
}
.bbssl-project-progress__stats {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.bbssl-project-progress__fraction {
	font-size: .95rem;
	font-weight: 600;
	color: var(--bbssl-text);
}
.bbssl-project-progress__pct {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--bbssl-free);
	white-space: nowrap;
}
.bbssl-project-progress__bar-wrap {
	width: 100%;
	height: 8px;
	background: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
}
.bbssl-project-progress__bar-fill {
	height: 100%;
	background: var(--bbssl-free);
	border-radius: 4px;
	transition: width .4s ease;
	min-width: 4px;
}
/* Turn bar amber when 100% complete */
.bbssl-project-progress__bar-fill[aria-valuenow="100"] {
	background: #f0a500;
}
@media ( max-width: 480px ) {
	.bbssl-project-progress__stats {
		flex-direction: column;
		gap: 4px;
	}
}

/* ─── Category Grid ──────────────────────────────────────────── */
.bbssl-category-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 24px;
}
.bbssl-category-card {
	background: #fff;
	border: 1px solid var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.bbssl-category-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.bbssl-category-card__link {
	text-decoration: none;
	color: inherit;
	display: block;
}
.bbssl-category-card__thumb {
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--bbssl-bg-light);
}
.bbssl-category-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bbssl-category-card__thumb-placeholder,
.bbssl-project-card__thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bbssl-bg-light);
}
.bbssl-thumb-icon {
	font-size: 3rem;
}
.bbssl-category-card__body {
	padding: 16px;
}
.bbssl-category-card__title {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--bbssl-text);
}
.bbssl-category-card__desc {
	font-size: .875rem;
	color: var(--bbssl-text-muted);
	margin: 0 0 12px;
	line-height: 1.5;
}
.bbssl-category-card__count {
	font-size: .8rem;
	font-weight: 600;
	color: var(--bbssl-primary);
	background: rgba(98, 0, 234, .08);
	padding: 3px 10px;
	border-radius: 20px;
	display: inline-block;
}
.bbssl-category-card__expiry {
	font-size: .8rem;
	color: var(--bbssl-text-muted);
	margin: 0 0 10px;
}
.bbssl-category-card__expiry--expired {
	color: var(--bbssl-paid);
}

/* Progress bar on My Learning purchased-category cards. Markup existed
   from the progress-visualization feature but had no styling — fixed
   here alongside the certificate button that depends on it being visible. */
.bbssl-category-card__progress {
	width: 100%;
	height: 6px;
	background: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 6px;
}
.bbssl-category-card__progress-bar {
	height: 100%;
	background: var(--bbssl-primary);
	border-radius: 3px;
}
.bbssl-category-card__progress-label {
	font-size: .8rem;
	color: var(--bbssl-text-muted);
	margin: 0 0 12px;
}

/* ─── Completion Certificate button (Phase C) ────────────────── */
.bbssl-certificate-btn {
	display: block;
	text-align: center;
	margin-bottom: 8px;
}
.bbssl-category-card__certificate-note {
	font-size: .8rem;
	color: var(--bbssl-text-muted);
	margin: 0 0 8px;
	line-height: 1.4;
}

/* ─── Project Grid ───────────────────────────────────────────── */
.bbssl-project-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 24px;
}
/* ─── "Show all" link — shared by featured categories/projects grids
   when the underlying set is capped at 4 cards for display. Left
   uncoloured so it inherits the site's existing link colour handling
   (theme default in light mode, --theme-link-initial-color in dark
   mode), instead of hardcoding a colour that would need to be kept in
   sync with the theme separately. */
.bbssl-show-all {
	text-align: center;
	margin-top: 24px;
}
.bbssl-show-all-link {
	font-weight: 600;
	text-decoration: none;
}
.bbssl-show-all-link:hover {
	text-decoration: underline;
}
/* Instant AJAX filter (Phase B): dim the grid briefly while a new
   result set is loading, so the swap doesn't feel abrupt. */
#bbssl-projects-grid {
	transition: opacity .15s ease;
}
#bbssl-projects-grid[aria-busy="true"] {
	opacity: .5;
}
.bbssl-project-card {
	position: relative; /* anchors the wishlist toggle overlay */
	background: #fff;
	border: 1px solid var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.bbssl-project-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.bbssl-project-card__link {
	text-decoration: none;
	color: inherit;
	display: block;
}
.bbssl-project-card__thumb {
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	position: relative;
	background: var(--bbssl-bg-light);
}
.bbssl-project-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─── Hover preview (Phase C) ─────────────────────────────────
   Reveals short_description (already fetched with every project
   row) as an overlay on the thumbnail when the card is hovered.
   CSS-only — no JS, no extra query. Mouse/pointer devices only;
   touch devices simply never trigger :hover, which is fine since
   tapping the card still goes straight to the project. */
.bbssl-project-card__preview {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 20, .88);
	color: #fff;
	padding: 14px;
	display: flex;
	align-items: center;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.bbssl-project-card:hover .bbssl-project-card__preview {
	opacity: 1;
	transform: translateY(0);
}
.bbssl-project-card__preview p {
	margin: 0;
	font-size: .8rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (hover: none) {
	/* No hover capability (touch) — never show the overlay, avoid it
	   getting stuck visible after a tap. */
	.bbssl-project-card__preview {
		display: none;
	}
}
.bbssl-project-card__body {
	padding: 16px;
}
.bbssl-project-card__title {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--bbssl-text);
}
.bbssl-project-card__desc {
	font-size: .875rem;
	color: var(--bbssl-text-muted);
	margin: 0 0 12px;
	line-height: 1.5;
}
.bbssl-project-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

/* ─── Wishlist / Saved for Later toggle (Phase C) ───────────────
   Grid-card variant: a small circular icon button overlaid on the
   top-right corner of the card, above the thumbnail. Detail-page
   variant (.bbssl-wishlist-toggle--detail) sits inline instead. */
.bbssl-wishlist-toggle {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.9);
	border: 1px solid var(--bbssl-border);
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: var(--bbssl-text-muted);
	transition: transform .15s ease, color .15s ease;
}
.bbssl-wishlist-toggle:hover {
	transform: scale(1.08);
}
.bbssl-wishlist-toggle--active {
	color: #00C3FF;
}
.bbssl-wishlist-toggle[aria-busy="true"] {
	opacity: .6;
	cursor: default;
}
.bbssl-wishlist-toggle--detail {
	position: static;
	display: inline-flex;
	width: auto;
	height: auto;
	border-radius: var(--bbssl-radius);
	padding: 8px 16px;
	gap: 8px;
	/* Was a hardcoded solid white — read as a bright, jarring block next to
	   the dark page background (and low-contrast against its own muted-grey
	   label text). Swapped for the theme-aware surface token so it renders
	   as a subtle grey card in light mode and a dark, low-contrast surface
	   in dark mode — same token already used for the site's other soft
	   "card" backgrounds (e.g. .bbssl-qa-question). */
	background: var(--bbssl-bg-light);
	margin-top: 12px;
}
.bbssl-wishlist-toggle--detail .bbssl-wishlist-toggle__icon {
	font-size: 18px;
}
.bbssl-wishlist-empty {
	color: var(--bbssl-text-muted);
}

/* ─── Access Badges ──────────────────────────────────────────── */
.bbssl-access-badge {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 3px 9px;
	border-radius: 4px;
}
.bbssl-access-badge--paid {
	background: var(--bbssl-paid);
	color: #fff;
}
/* Brand accent (#00C3FF) instead of the --bbssl-free variable directly
   — that variable is also read elsewhere for unrelated semantic status
   colour (progress bars, success notices, the "completed" button
   state), which stay their original green since that's a functional
   status colour, not a tag. Paid/Preview badges are left red/blue —
   they signal access level (locked vs preview vs free), and making
   every badge the same colour would remove that distinction. */
.bbssl-access-badge--free {
	background: #00C3FF;
	color: #fff;
}
.bbssl-project-card__thumb .bbssl-access-badge {
	position: absolute;
	top: 8px;
	right: 8px;
}

/* ─── Tags ───────────────────────────────────────────────────── */
.bbssl-tag {
	display: inline-block;
	font-size: .75rem;
	background: rgba(0, 195, 255, .08);
	color: #00C3FF;
	padding: 2px 9px;
	border-radius: 20px;
}

/* ─── Project Detail ─────────────────────────────────────────── */
.bbssl-project-detail__header {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 32px;
	align-items: start;
	margin-bottom: 32px;
}
@media ( max-width: 768px ) {
	.bbssl-project-detail__header {
		grid-template-columns: 1fr;
	}
}
.bbssl-project-detail__thumb img {
	width: 100%;
	border-radius: var(--bbssl-radius);
	display: block;
}
.bbssl-project-detail__title {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 12px;
}
.bbssl-project-detail__build-time {
	color: var(--bbssl-text-muted);
	font-size: .9rem;
	margin: 0 0 12px;
}
.bbssl-project-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.bbssl-project-detail__description {
	margin-bottom: 32px;
}
.bbssl-project-detail__description h2,
.bbssl-project-detail__resources h2,
.bbssl-project-detail__lessons h2,
.bbssl-project-progress__heading,
.bbssl-lesson-detail__description h2,
.bbssl-lesson-detail__resources h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 16px;
	border-bottom: 2px solid var(--bbssl-border);
	padding-bottom: 8px;
}
/* Progress heading is smaller — override the shared rule above */
.bbssl-project-progress__heading {
	font-size: 1rem;
	margin: 0 0 12px;
	border-bottom: none;
	padding-bottom: 0;
}

/* ─── Resource List ──────────────────────────────────────────── */
.bbssl-resource-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.bbssl-resource-list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border);
	color: var(--bbssl-primary);
	padding: 8px 16px;
	border-radius: 6px;
	text-decoration: none;
	font-size: .875rem;
	font-weight: 500;
	transition: background .15s;
}
.bbssl-resource-list a:hover {
	background: rgba(98, 0, 234, .06);
}

/* ─── Lesson List (inside project) ──────────────────────────── */
.bbssl-lesson-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bbssl-lesson-list__item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--bbssl-border);
	border-radius: 8px;
	padding: 14px 16px;
	transition: box-shadow .15s;
}
.bbssl-lesson-list__item:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.bbssl-lesson-list__item.bbssl-lesson--locked {
	opacity: .75;
	background: var(--bbssl-bg-light);
}
.bbssl-lesson-list__number {
	min-width: 32px;
	height: 32px;
	background: var(--bbssl-primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	font-weight: 700;
	flex-shrink: 0;
}
.bbssl-lesson-list__info {
	flex: 1;
}
.bbssl-lesson-list__title {
	font-size: .95rem;
	font-weight: 600;
	color: var(--bbssl-text);
	text-decoration: none;
}
.bbssl-lesson-list__title:hover {
	color: var(--bbssl-primary);
	text-decoration: underline;
}
.bbssl-lesson-list__title--locked {
	color: var(--bbssl-text-muted);
	cursor: default;
}
.bbssl-lesson-list__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.bbssl-lesson-list__action {
	flex-shrink: 0;
}

/* ─── Lesson Badges ──────────────────────────────────────────── */
.bbssl-lesson-badge {
	display: inline-block;
	font-size: .7rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
}
.bbssl-lesson-badge--duration {
	/* Hardcoded light-grey background never adapted for dark mode, so it
	   rendered as a bright chip against the dark page. var(--bbssl-bg-light)
	   is the same theme-aware surface token used elsewhere on this page. */
	background: var(--bbssl-bg-light);
	color: var(--bbssl-text-muted);
}
.bbssl-lesson-badge--preview {
	background: rgba(34, 113, 177, .1);
	color: var(--bbssl-preview);
}
/* Brand accent (#00C3FF) instead of red — "Builder Pass" signals a paywall
   tier, not an error, and red read as an alarm. Kept the same translucent-
   tint treatment as the other badges, just recoloured to match. */
.bbssl-lesson-badge--paid {
	background: rgba(0, 195, 255, .1);
	color: #00C3FF;
}
.bbssl-lesson-badge--free {
	background: rgba(0, 163, 42, .1);
	color: var(--bbssl-free);
}
/* Emoji glyphs (⏱ 🔒 etc.) render as full-colour icons regardless of the
   surrounding text colour, which reads as visually loud/cartoonish next to
   the site's flat, monochrome badge style. Dimmed via opacity — works
   uniformly in both themes without needing a monochrome icon replacement. */
.bbssl-badge-icon {
	opacity: .55;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.bbssl-btn {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}
.bbssl-btn--primary {
	background: var(--bbssl-primary);
	color: #fff;
}
.bbssl-btn--primary:hover {
	background: var(--bbssl-primary-dark);
	color: #fff;
}
.bbssl-btn--nav {
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border);
	color: var(--bbssl-text);
}
.bbssl-btn--nav:hover {
	background: #ebebeb;
}
.bbssl-btn--locked {
	/* Same theme-aware swap as the duration badge above — was a hardcoded
	   light-grey chip that never adapted for dark mode. */
	background: var(--bbssl-bg-light);
	color: var(--bbssl-text-muted);
	cursor: not-allowed;
	font-size: 1rem;
	padding: 6px 12px;
}

/* ─── Lesson Detail ──────────────────────────────────────────── */
.bbssl-lesson-detail__header {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.bbssl-lesson-detail__title {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0;
	flex: 1;
}

/* ─── Video Placeholder ──────────────────────────────────────── */
.bbssl-lesson-detail__video {
	margin-bottom: 32px;
}
.bbssl-video-placeholder {
	background: #1d1d1d;
	color: #fff;
	border-radius: var(--bbssl-radius);
	aspect-ratio: 16/9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	padding: 24px;
}
.bbssl-video-placeholder__icon {
	font-size: 3rem;
	opacity: .4;
}
.bbssl-video-placeholder__text {
	font-size: 1rem;
	opacity: .6;
	margin: 0;
}
.bbssl-video-placeholder__provider {
	font-size: .8rem;
	opacity: .4;
	margin: 0;
}

/* ─── Access Denied ──────────────────────────────────────────── */
.bbssl-access-denied {
	text-align: center;
	padding: 48px 24px;
	background: var(--bbssl-bg-light);
	border: 2px dashed var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	margin-bottom: 32px;
}
.bbssl-access-denied__icon {
	font-size: 3rem;
	margin-bottom: 16px;
}
.bbssl-access-denied__message {
	font-size: 1rem;
	color: var(--bbssl-text-muted);
	margin: 0;
}

/* ─── Lesson Navigation ──────────────────────────────────────── */
.bbssl-lesson-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--bbssl-border);
	flex-wrap: wrap;
}
.bbssl-lesson-nav__prev,
.bbssl-lesson-nav__next {
	max-width: 45%;
}
.bbssl-lesson-nav__next {
	margin-left: auto;
	text-align: right;
}

/* ─── Notices ────────────────────────────────────────────────── */
.bbssl-notice {
	padding: 14px 18px;
	border-radius: 6px;
	margin-bottom: 16px;
}
.bbssl-notice p {
	margin: 0;
}
.bbssl-notice--warning {
	background: #fff3cd;
	border-left: 4px solid #ffc107;
	color: #664d03;
}
.bbssl-notice--error {
	background: #fce8e8;
	border-left: 4px solid var(--bbssl-paid);
	color: #6b1212;
}

/* ─── Empty State ────────────────────────────────────────────── */
.bbssl-empty-state {
	padding: 40px;
	text-align: center;
	color: var(--bbssl-text-muted);
	background: var(--bbssl-bg-light);
	border-radius: var(--bbssl-radius);
	border: 1px solid var(--bbssl-border);
}

/* ─── Completion Banner ──────────────────────────────────────── */
.bbssl-completion-banner {
	background: #d4edda;
	border-left: 4px solid var(--bbssl-free);
	color: #155724;
	padding: 14px 18px;
	border-radius: 6px;
	margin-bottom: 24px;
	font-weight: 600;
}

/* ─── Manual Completion ──────────────────────────────────────── */
.bbssl-manual-complete {
	margin-bottom: 32px;
}
.bbssl-btn--outline {
	background: transparent;
	border: 2px solid var(--bbssl-primary);
	color: var(--bbssl-primary);
}
.bbssl-btn--outline:hover {
	background: var(--bbssl-primary);
	color: #fff;
}
.bbssl-btn--completed {
	background: var(--bbssl-free);
	color: #fff;
	cursor: default;
}
.bbssl-btn--completed:disabled {
	opacity: 1;
}

/* ─── Lesson Description ─────────────────────────────────────── */
.bbssl-lesson-detail__description {
	margin-bottom: 32px;
}
.bbssl-lesson-detail__description-content {
	line-height: 1.7;
	color: var(--bbssl-text);
}

/* ─── Lesson Q&A (Phase C) ────────────────────────────────────── */
.bbssl-qa {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--bbssl-border);
}
.bbssl-qa__heading {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 16px;
}
.bbssl-qa__guest-notice {
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	padding: 14px 18px;
	color: var(--bbssl-text-muted);
	font-size: .9rem;
	margin: 0 0 24px;
}
.bbssl-qa__guest-notice a {
	color: var(--bbssl-primary);
	font-weight: 600;
}
.bbssl-qa__empty {
	color: var(--bbssl-text-muted);
	font-size: .9rem;
}

.bbssl-qa-form {
	margin-bottom: 24px;
}
.bbssl-qa-form__textarea {
	width: 100%;
	min-height: 80px;
	padding: 12px 14px;
	border: 1px solid var(--bbssl-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: .9rem;
	resize: vertical;
}
.bbssl-qa-form__textarea:focus {
	outline: none;
	border-color: var(--bbssl-primary);
}
.bbssl-qa-form__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}
.bbssl-qa-form__error {
	color: var(--bbssl-paid);
	font-size: .8rem;
}

.bbssl-qa-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.bbssl-qa-question {
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	padding: 16px 18px;
}
.bbssl-qa-question__meta,
.bbssl-qa-reply__meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 6px;
}
.bbssl-qa-question__author,
.bbssl-qa-reply__author {
	font-weight: 600;
	font-size: .875rem;
}
.bbssl-qa-question__date,
.bbssl-qa-reply__date {
	color: var(--bbssl-text-muted);
	font-size: .75rem;
}
.bbssl-qa-question__body,
.bbssl-qa-reply__body {
	margin: 0 0 10px;
	line-height: 1.6;
	font-size: .9rem;
	white-space: pre-wrap;
}
.bbssl-qa-replies {
	list-style: none;
	margin: 12px 0 12px 20px;
	padding: 12px 0 0 16px;
	border-left: 2px solid var(--bbssl-border);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bbssl-qa-reply-toggle {
	background: none;
	border: none;
	color: var(--bbssl-primary);
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}
.bbssl-qa-reply-toggle:hover {
	text-decoration: underline;
}
.bbssl-qa-reply-form {
	margin-top: 12px;
}

#bbssl-qa-load-more {
	margin-top: 8px;
}

/* =============================================================
   Projects Filter Bar — base layout (desktop and up)
   No base rule previously existed for .bbssl-filter-form / __field /
   -search / -select outside the 375px snippet below — at normal
   widths the form rendered as plain stacked <div>s with the browser's
   own intrinsic input/select sizing: the search box collapsed to a
   ~32px minimum with its placeholder text overflowing past its own
   border, and both dropdowns were fully unstyled/native (native white
   popup in both themes). This adds the missing base layout + field
   skin only; the 375px stacking rule further down is untouched, and
   .bbssl-select is used nowhere else in the plugin so this can't
   affect any other page.
   ============================================================= */
.bbssl-projects-filters {
	margin-bottom: 32px;
}
.bbssl-filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	padding: 16px;
}
.bbssl-filter-form__field {
	display: flex;
	flex: 1 1 160px;
	min-width: 140px;
}
.bbssl-filter-form__field--search {
	flex: 2 1 240px;
}
.bbssl-filter-search,
.bbssl-select {
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--bbssl-border);
	border-radius: 8px;
	font-size: .9rem;
	font-family: inherit;
	background-color: #FFFFFF;
	color: var(--bbssl-text);
	color-scheme: light; /* keeps the select's native open-list popup light
	                         even if the visitor's OS is set to dark, so it
	                         always matches the SITE theme, not the OS one —
	                         the dark-mode override below flips this. */
}
.bbssl-select {
	cursor: pointer;
}
.bbssl-filter-search {
	/* Normalizes WebKit's native type="search" decoration (which renders a
	   few px shorter than a plain text input at the same box-model height)
	   so it lines up exactly with the two selects beside it. */
	-webkit-appearance: none;
	appearance: none;
}
.bbssl-filter-search:focus,
.bbssl-select:focus {
	outline: none;
	border-color: #00C3FF;
	box-shadow: 0 0 0 3px rgba( 0, 195, 255, .15 );
}

/* =============================================================
   B56 — Mobile Responsiveness (375px viewport)
   Covers all 13 frontend pages. Ensures:
     • No horizontal scroll
     • Text ≥ 14px
     • Touch targets ≥ 44px height
     • Forms usable with mobile keyboard
   ============================================================= */

@media ( max-width: 375px ) {

	/* ── Global / Page layout ──────────────────────────────── */
	.bbssl-page-title {
		font-size: 1.4rem;
	}

	/* ── Buttons: enforce 44px min touch target ─────────────── */
	.bbssl-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: .9rem;
	}
	.bbssl-btn--block {
		display: flex;
		width: 100%;
	}

	/* ── Category grid: single column ───────────────────────── */
	.bbssl-category-grid {
		grid-template-columns: 1fr;
	}

	/* ── Project grid: single column ────────────────────────── */
	.bbssl-project-grid {
		grid-template-columns: 1fr;
	}

	/* ── Filter form: stack fields ───────────────────────────── */
	.bbssl-filter-form {
		flex-direction: column;
	}
	.bbssl-filter-form__field,
	.bbssl-filter-search,
	.bbssl-filter-select {
		width: 100%;
	}
	.bbssl-filter-form .bbssl-btn {
		width: 100%;
	}

	/* ── Single project: single-column header ────────────────── */
	.bbssl-project-detail__header {
		grid-template-columns: 1fr;
	}
	.bbssl-project-detail__title {
		font-size: 1.3rem;
	}

	/* ── Lesson list: wrap action below info ─────────────────── */
	.bbssl-lesson-list__item {
		flex-wrap: wrap;
		gap: 10px;
	}
	.bbssl-lesson-list__action {
		width: 100%;
	}
	.bbssl-lesson-list__action .bbssl-btn {
		width: 100%;
	}

	/* ── Lesson detail: smaller title ────────────────────────── */
	.bbssl-lesson-detail__title {
		font-size: 1.3rem;
	}
	.bbssl-lesson-detail__header {
		flex-direction: column;
		align-items: flex-start;
	}

	/* ── Lesson nav: full-width buttons ──────────────────────── */
	.bbssl-lesson-nav {
		flex-direction: column;
		gap: 12px;
	}
	.bbssl-lesson-nav__prev,
	.bbssl-lesson-nav__next {
		max-width: 100%;
		width: 100%;
		text-align: center;
		margin-left: 0;
	}

	/* ── Cart: single-column table → stacked rows ────────────── */
	.bbssl-cart-table thead {
		display: none;
	}
	.bbssl-cart-table,
	.bbssl-cart-table tbody,
	.bbssl-cart-table tr,
	.bbssl-cart-table td {
		display: block;
		width: 100%;
	}
	.bbssl-cart-table tr {
		border: 1px solid var(--bbssl-border);
		border-radius: var(--bbssl-radius);
		margin-bottom: 12px;
		padding: 12px;
	}
	.bbssl-cart-table td {
		padding: 4px 0;
		font-size: .9rem;
	}
	.bbssl-cart-remove {
		min-height: 44px;
		min-width: 44px;
	}
	.bbssl-cart-layout {
		display: block;
	}
	.bbssl-cart-summary {
		margin-top: 24px;
	}

	/* ── Checkout: single-column layout ──────────────────────── */
	.bbssl-checkout-layout {
		display: block;
	}
	.bbssl-checkout-summary {
		margin-top: 24px;
	}
	.bbssl-form-row--2col,
	.bbssl-form-row--3col {
		grid-template-columns: 1fr;
	}
	.bbssl-input {
		font-size: 16px; /* Prevent iOS auto-zoom on focus */
		min-height: 44px;
	}
	.bbssl-btn--pay {
		min-height: 52px;
	}

	/* ── Payment success: single-column ──────────────────────── */
	.bbssl-success-actions {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.bbssl-success-actions .bbssl-btn {
		width: 100%;
		text-align: center;
	}

	/* ── My Learning: full-width category cards ──────────────── */
	.bbssl-my-learning-section .bbssl-category-grid {
		grid-template-columns: 1fr;
	}

	/* ── Continue watching: already handled at 600px;
	      ensure text truncation doesn't cause overflow ──────── */
	.bbssl-continue-watching__lesson {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
	}

	/* ── Login / Register forms ──────────────────────────────── */
	.bbssl-auth-form {
		padding: 20px 16px;
	}
	.bbssl-auth-form .bbssl-btn {
		width: 100%;
		min-height: 48px;
	}
	.bbssl-auth-input,
	.bbssl-auth-form input[type="email"],
	.bbssl-auth-form input[type="password"],
	.bbssl-auth-form input[type="text"] {
		font-size: 16px; /* Prevent iOS auto-zoom */
		min-height: 44px;
	}

	/* ── My Invoices table: stacked ──────────────────────────── */
	.bbssl-invoices-table thead {
		display: none;
	}
	.bbssl-invoices-table,
	.bbssl-invoices-table tbody,
	.bbssl-invoices-table tr,
	.bbssl-invoices-table td {
		display: block;
		width: 100%;
	}
	.bbssl-invoices-table tr {
		border: 1px solid var(--bbssl-border);
		border-radius: var(--bbssl-radius);
		margin-bottom: 12px;
		padding: 12px;
	}
	.bbssl-invoices-table td {
		padding: 4px 0;
		font-size: .9rem;
	}
	.bbssl-invoices-table .bbssl-btn {
		width: 100%;
		margin-top: 8px;
	}

	/* ── Completion badge ────────────────────────────────────── */
	.bbssl-completion-badge {
		font-size: .85rem;
	}

	/* ── Coupon form ─────────────────────────────────────────── */
	.bbssl-coupon-form__fields {
		flex-direction: column;
	}
	.bbssl-input--coupon {
		width: 100%;
		font-size: 16px;
		min-height: 44px;
	}
	.bbssl-coupon-apply {
		width: 100%;
		min-height: 44px;
	}

	/* ── Lesson Q&A ───────────────────────────────────────────── */
	.bbssl-qa-form__textarea {
		font-size: 16px; /* Prevent iOS auto-zoom */
	}
	.bbssl-qa-form__actions .bbssl-btn,
	#bbssl-qa-load-more {
		min-height: 44px;
	}
	.bbssl-qa-replies {
		margin-left: 8px;
		padding-left: 10px;
	}
}

/* ── Knowledge Base — [bbssl_faq] shortcode ──────────────────────────
   Reuses the site's existing native <details>/<summary> FAQ accordion
   markup and typography/colours verbatim (see the "FAQ" reusable block
   on the Pricing page) — this only tightens the default core-block gap
   between the question (summary) and its answer paragraph from the
   theme default (~27px) down to a compact 10px, per spec. No redesign:
   same fonts, same colours, same animation (none — native browser
   <details> toggle), same responsive behaviour. */
.bbssl-faq-list .wp-block-details summary {
	margin-bottom: 10px;
}

/* Items beyond the current reveal count are hidden via the `hidden`
   attribute (not display:none in JS) so no extra specificity is needed
   here — this rule exists only as a safety net for older browsers that
   render [hidden] with lower priority than other display rules. */
.bbssl-faq-list [hidden] {
	display: none !important;
}

.bbssl-faq-load-more-wrap {
	text-align: center;
	margin-top: 24px;
}

.bbssl-faq-load-more,
.bbssl-faq-load-more:visited {
	display: inline-block;
	color: #00C3FF;
	cursor: pointer;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
}

.bbssl-faq-load-more:hover,
.bbssl-faq-load-more:focus-visible {
	text-decoration: underline;
}

/* Light theme: brand cyan (#00C3FF) fails contrast on a white/light
   background — same darker-cyan substitution already used for header
   and footer links in this theme (see bbss-premium-refinements.php).
   !important matches the same precedent set there (line ~109): the
   theme's own `a { color: var(--theme-link-initial-color) }` rule
   and (since this is an <a href="#">) the theme's `a:visited` rule
   both need to be beaten the same way. The base rule above explicitly
   covers :visited too, so its specificity already matches Blocksy's
   `a:visited`, but !important here keeps both states pinned in light
   mode regardless of visited status. */
html:not(.bbss-dark-mode) .bbssl-faq-load-more,
html:not(.bbss-dark-mode) .bbssl-faq-load-more:visited {
	color: #0891B2 !important;
}

/* ═══════════════════════════════════════════════════════════════
   MEMBER DASHBOARD (Phase 1) — [bbssl_member_dashboard]
   Reuses existing tokens (--bbssl-primary, --bbssl-border,
   --bbssl-radius, --bbssl-shadow, .bbssl-btn, .bbssl-notice,
   .bbssl-section-title) so dark mode / premium-refinement overrides
   already targeting those selectors apply automatically — no
   separate dark-mode stylesheet needed.
   ═══════════════════════════════════════════════════════════════ */

.bbssl-notice--success {
	background: #e6f7ec;
	border-left: 4px solid var(--bbssl-free);
	color: #0f5132;
}

.bbssl-dashboard-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 32px;
	align-items: start;
}

.bbssl-dashboard-sidebar {
	position: sticky;
	top: 24px;
	background: #fff;
	border: 1px solid var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	padding: 12px;
}

.bbssl-dashboard-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bbssl-dashboard-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--bbssl-text);
	text-decoration: none;
	font-weight: 500;
	font-size: .95rem;
}

.bbssl-dashboard-nav__link:hover {
	background: var(--bbssl-bg-light);
}

.bbssl-dashboard-nav__link.is-active {
	background: var(--bbssl-primary);
	color: #fff;
}

.bbssl-dashboard-nav__badge {
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	opacity: .65;
}

.bbssl-dashboard-nav__divider {
	height: 1px;
	background: var(--bbssl-border);
	margin: 8px 6px;
}

.bbssl-dashboard-nav__link--logout {
	color: var(--bbssl-paid);
}

.bbssl-dashboard-content {
	min-width: 0;
}

.bbssl-dashboard-card {
	background: #fff;
	border: 1px solid var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	padding: 20px 24px;
	margin-bottom: 20px;
}

.bbssl-dashboard-card__title {
	margin: 0 0 16px;
	font-size: 1.05rem;
	color: var(--bbssl-text);
}

.bbssl-dashboard-avatar-card {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.bbssl-dashboard-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--bbssl-border);
	flex-shrink: 0;
}

.bbssl-dashboard-avatar-form {
	flex: 1;
	min-width: 200px;
}

.bbssl-dashboard-form .bbssl-form-row {
	margin-bottom: 16px;
}

.bbssl-dashboard-form .bbssl-form-row--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.bbssl-form-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .875rem;
	color: var(--bbssl-text);
}

.bbssl-dashboard-form input[type="text"],
.bbssl-dashboard-form input[type="email"],
.bbssl-dashboard-form input[type="tel"],
.bbssl-dashboard-form input[type="password"],
.bbssl-dashboard-form input[type="file"],
.bbssl-dashboard-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--bbssl-border);
	border-radius: 6px;
	font-size: .95rem;
	color: var(--bbssl-text);
	background: #fff;
}

.bbssl-dashboard-form input:focus,
.bbssl-dashboard-form textarea:focus {
	outline: 2px solid var(--bbssl-primary);
	outline-offset: 1px;
}

.bbssl-form-help {
	margin: 6px 0 0;
	font-size: .8rem;
	color: var(--bbssl-text-muted);
}

.bbssl-dashboard-learning__browse-more {
	margin: 0 0 20px;
}

.bbssl-dashboard-section-intro {
	color: var(--bbssl-text-muted);
	margin-top: -8px;
	margin-bottom: 20px;
}

/* ── Orders & Invoices: payment-status pills ─────────────────────
   Reuses the existing .bbssl-tag pill shape/sizing (see the Free
   Resources / project tag styling above); only the colour differs
   per status, mirroring the admin Orders list's own status colours. */
.bbssl-tag--paid {
	background: rgba(0, 163, 42, .1);
	color: #00a32a;
}
.bbssl-tag--pending {
	background: rgba(153, 102, 0, .1);
	color: #996600;
}
.bbssl-tag--failed {
	background: rgba(214, 54, 56, .1);
	color: #d63638;
}
.bbssl-tag--refunded {
	background: rgba(80, 87, 94, .1);
	color: #50575e;
}

/* ── Certificates: card grid reuses .bbssl-category-grid /
   .bbssl-category-card as-is; only the inner content needs a little
   spacing since certificate cards have no thumbnail image. ───────── */
.bbssl-dashboard-certificate-card__name {
	font-size: 1.05rem;
	margin: 0 0 4px;
}
.bbssl-dashboard-certificate-card__category {
	color: var(--bbssl-text-muted);
	margin: 0 0 4px;
}
.bbssl-dashboard-certificate-card__date {
	color: var(--bbssl-text-muted);
	font-size: .85rem;
	margin: 0 0 16px;
}
.bbssl-dashboard-certificate-card__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ── ASK BBSS section ─────────────────────────────────────────── */
.bbssl-dashboard-askbbss__heading {
	margin: 0 0 8px;
	font-size: 1.1rem;
}

/* ── Header cart icon badge (logged-in users only) ──────────────
   Reuses the .bbssl-cart-count class that assets/js/bbssl-frontend.js
   already updates on every successful add-to-cart response — no new
   JS needed for the badge to stay in sync. */
.bbssl-header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bbssl-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--bbssl-primary);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* ── Responsive: stack sidebar above content on tablet/mobile ──── */
@media (max-width: 782px) {
	.bbssl-dashboard-layout {
		grid-template-columns: 1fr;
	}
	.bbssl-dashboard-sidebar {
		position: static;
	}
	.bbssl-dashboard-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}
	.bbssl-dashboard-nav li {
		flex: 1 1 auto;
	}
	.bbssl-dashboard-nav__divider {
		display: none;
	}
	.bbssl-dashboard-nav__link--logout {
		flex: 1 1 100%;
	}
	.bbssl-dashboard-form .bbssl-form-row--half {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.bbssl-dashboard-avatar-card {
		flex-direction: column;
		align-items: flex-start;
	}
}