/* =============================================================
   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-border-subtle: rgba(148, 163, 184, .25);
	--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;
}

/* Impl: hide Continue Watching widget on My Learning page per site-owner request — widget/PHP/data intentionally left intact for future re-enable */
.bbssl-continue-watching {
	display: none;
}
.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;
}
/* Card is pinned to the dark surface tokens (#0B1220 / #26324A) in BOTH
   light and dark site themes — previously this only applied under
   html.bbss-dark-mode, so it rendered as a bright white box in light mode.
   Reuses colors already established for this exact card. Child text/badge
   colors below are pinned to their dark-mode equivalents to stay legible
   against the always-dark background regardless of site theme. */
.bbssl-project-progress__card {
	background: #0B1220;
	border: 1px solid #26324A;
	border-left: 4px solid #00C3FF;
	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: #F1F5F9;
}
.bbssl-project-progress__pct {
	font-size: 1.4rem;
	font-weight: 700;
	color: #00C3FF;
	white-space: nowrap;
}
.bbssl-project-progress__bar-wrap {
	width: 100%;
	height: 8px;
	background: #26324A;
	border-radius: 4px;
	overflow: hidden;
}
.bbssl-project-progress__bar-fill {
	height: 100%;
	background: #00C3FF;
	border-radius: 4px;
	transition: width .4s ease;
	min-width: 4px;
}
@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;
	display: flex;
	flex-direction: column;
}
.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-link {
    flex-shrink: 0;
}
.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;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.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;
}
/* Brand cyan instead of the native green ✅ emoji. The emoji glyph itself
   can't be recolored via CSS (browsers render color emoji regardless of
   surrounding text color), so the markup now uses a plain ✓ character here
   and on the matching "Project Completed" badge in the Continue Watching
   card (class-bbssl-frontend.php) — both share this one rule. */
.bbssl-completion-badge {
	color: #00C3FF;
	font-weight: 600;
	margin-bottom: 8px;
}
.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;
}
/* Row is pinned to the dark surface tokens (#0B1220 / #26324A) in BOTH
   light and dark site themes — previously this dark treatment only applied
   under html.bbss-dark-mode, so every lesson row rendered as a bright
   white box in light mode. Reuses colors already established for this
   exact row. Child text/badge colors below are pinned to their dark-mode
   equivalents so they stay legible against the always-dark background
   regardless of site theme. */
.bbssl-lesson-list__item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #0B1220;
	border: 1px solid #26324A;
	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: #0B1220;
}
.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: #F1F5F9;
	text-decoration: none;
}
.bbssl-lesson-list__title:hover {
	color: #00C3FF;
	text-decoration: underline;
}
.bbssl-lesson-list__title--locked {
	color: #8FA1BE;
	cursor: default;
}
.bbssl-lesson-list__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.bbssl-lesson-list__action {
	flex-shrink: 0;
}

/* ─── Lesson Thumbnail (Bunny Stream) ───────────────────────── */
.bbssl-lesson-list__thumb {
	flex-shrink: 0;
	width: 220px;
	max-width: 40%;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
}
.bbssl-lesson-list__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─── 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);
}
/* Lesson-list row is always dark now (see .bbssl-lesson-list__item above),
   so its duration chip is pinned to the matching dark-surface tokens too —
   otherwise it would still swap to a light chip in light-theme mode and
   clash with the row it sits on. Scoped to the lesson list only; the
   duration badge on the standalone lesson-detail page (lesson.php) keeps
   its normal theme-aware coloring. */
.bbssl-lesson-list__item .bbssl-lesson-badge--duration {
	background: #131C2E;
	color: #8FA1BE;
}
.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;
}
/* Brand accent (#00C3FF) instead of green — matches the "Register to watch
   free" theme-color request; the emoji glyph itself keeps its native color
   since browsers render color emoji regardless of surrounding CSS. */
.bbssl-lesson-badge--free {
	background: rgba(0, 195, 255, .1);
	color: #00C3FF;
}
/* Short contextual nudge next to a locked lesson's access badge — tells
   a guest/registered viewer exactly what unlocks it ("Register to watch
   free" / "Purchase to watch"). Muted + italic so it reads as a caption,
   not another badge; only rendered when the lesson is not yet accessible. */
.bbssl-lesson-badge-hint {
	display: inline-flex;
	align-items: center;
	font-size: .7rem;
	font-style: italic;
	color: var(--bbssl-text-muted);
}
/* NF#1004/1005: clickable variant of the locked-lesson hint text
   ("Purchase to watch" / "Register to watch free") — reuses the site's
   existing cyan brand accent (#00C3FF) and the same hover pattern used
   by .bbssl-lesson-list__title:hover, so the link fits the compact
   badge row without introducing a new colour token or a bulky button. */
.bbssl-lesson-badge-hint--link {
	color: #00C3FF;
	cursor: pointer;
	text-decoration: none;
}
.bbssl-lesson-badge-hint--link:hover,
.bbssl-lesson-badge-hint--link:focus-visible {
	text-decoration: underline;
}

/* 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;
}

/* ─── Category-card CTA — mobile touch target (NF#3E) ────────────
   Go to Category / Add to Cart / Renew Access / Start Learning /
   Continue Learning / View Details / Register to Start all render as
   .bbssl-btn inside .bbssl-category-card__ctas — this is the one
   markup/class pair reused by every page that shows a category-card
   grid (Home featured-categories block, the [bbssl_featured_categories]
   shortcode fragment embedded on Courses/Pricing, and the full
   Categories page grid). Scoped to this container specifically so it
   cannot affect any other .bbssl-btn usage elsewhere on the site
   (header, ASK BBSS, Contact, Payment, My Account, Tickets, etc.).
   "Coming Soon" renders only a badge span here (no CTA), so there is
   nothing to enlarge for that state. */
@media ( max-width: 768px ) {
	.bbssl-category-card__ctas .bbssl-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}
.bbssl-category-card__ctas {
    margin-top: auto;
}


/* ─── 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;
}

/* ─── Video Player — Responsive Embed (NF#3A) ────────────────────
   Real player markup (Bunny / YouTube / Custom <video>) rendered by
   BBSSL_Video_Player_Service::render() shares this exact wrapper
   structure: .bbssl-video-wrapper > .bbssl-video-responsive > iframe|video.
   These classes had no CSS at all, so the iframe/video rendered at its
   browser-default intrinsic size (~300x150) left-aligned inside a
   collapsed-height wrapper. Standard responsive-embed box, 16:9 to
   match .bbssl-video-placeholder above. ─────────────────────────── */
.bbssl-video-responsive {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	border-radius: var(--bbssl-radius);
	background: #000;
}
.bbssl-video-responsive iframe,
.bbssl-video-responsive video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 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;
}

.bbssl-notice--info {
	background: #f1ebfd;
	border-left: 4px solid var(--bbssl-primary);
	color: #3a1a78;
}
.bbssl-notice--info a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* ─── Billing Details / Checkout — Phone field (International Billing) ──
   Country flag/dial-code select + mobile number input, side by side.
   Reuses the same input/select styling as the rest of the form — no new
   visual language introduced. */
.bbssl-phone-field {
	display: flex;
	gap: 8px;
}
.bbssl-phone-field__country {
	flex: 0 0 auto;
	width: 40%;
	max-width: 220px;
}
.bbssl-phone-field__number {
	flex: 1 1 auto;
	min-width: 0;
}
@media ( max-width: 480px ) {
	.bbssl-phone-field {
		flex-wrap: wrap;
	}
	.bbssl-phone-field__country {
		width: 100%;
		max-width: none;
	}
}
.bbssl-form-help--section {
	margin: 4px 0 12px;
	font-style: italic;
}

/* Fallback so the new Checkout <select> fields (Phone Country, Country)
   are never left completely unstyled if the Customizer "Additional CSS"
   rule for .bbssl-input (checkout page's own styling, defined there rather
   than in this file) happens to target input/textarea elements only.
   Safe to keep even if redundant with Additional CSS. */
select.bbssl-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--bbssl-border);
	border-radius: 6px;
	font-size: .95rem;
	color: var(--bbssl-text);
	background: #fff;
}
input.bbssl-input[readonly] {
	background: var(--bbssl-bg-light, #f5f5f7);
	color: var(--bbssl-text-muted);
	cursor: not-allowed;
}

/* ─── 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 ──────────────────────────────────────── */
/* Was a solid light-green box (#d4edda), which also never adapted for dark
   mode. Switched to the site's brand cyan and a translucent tint instead of
   a solid fill, so it reads correctly against both the light and dark page
   background without needing a separate dark-mode override. */
.bbssl-completion-banner {
	background: rgba(0, 195, 255, .12);
	border-left: 4px solid #00C3FF;
	color: #00C3FF;
	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;
}
/* Brand cyan instead of green — matches the completion banner above. */
.bbssl-btn--completed {
	background: #00C3FF;
	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;
	/* !important needed: Blocksy's theme.css "textarea:focus" rule
	   (specificity 0,1,1) outranks this class selector (0,1,0) while
	   the field is focused -- i.e. exactly while the student is typing --
	   and its fallback var(--theme-text-color) renders as dark slate-gray
	   text on this dark card, which is unreadable. Neither of Blocksy's
	   competing rules use !important, so this safely wins in both states
	   without needing to duplicate a :focus rule or fight source order. */
	color: var(--bbssl-text) !important;
}
.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;
}

/* ─── Q&A Status/Tag Badges (Stage 3: private, video-scoped Q&A) ── */
.bbssl-qa-question__meta {
	flex-wrap: wrap;
}
.bbssl-qa-question__status {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.bbssl-qa-question__status--open {
	background: rgba(251, 191, 36, .18);
	color: #92400E;
}
.bbssl-qa-question__status--answered {
	background: rgba(0, 163, 42, .12);
	color: var(--bbssl-free);
}
.bbssl-qa-question__tag {
	display: inline-block;
	font-size: .72rem;
	font-weight: 600;
	color: var(--bbssl-text-muted);
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border);
	padding: 2px 9px;
	border-radius: 999px;
}

/* =============================================================
   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 );
}

/* ─── Cart Page ──────────────────────────────────────
   Cart table, coupon, Order Summary, CTAs and trust-signal footer
   previously had almost no dedicated desktop CSS (only a handful of
   mobile-only overrides below), so the table rendered as a bare,
   full-width HTML table with no card styling, the coupon field ran
   flush under it, and the trust-signal text had no color rule at all.
   Reuses the same design tokens as every other card on the site
   (--bbssl-bg-light / --bbssl-border / --bbssl-radius / --bbssl-shadow
   / --bbssl-text / --bbssl-text-muted), which already flip to their
   dark-mode equivalents via bbss-dark-mode.php — no new dark-mode
   rules needed for any of this. ─────────────────────────── */
.bbssl-cart-page {
	padding: 0 20px;
}
.bbssl-cart-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 32px;
	align-items: start;
}
.bbssl-cart-main {
	min-width: 0;
}

/* Cart table — bordered/shadowed card instead of a bare full-width table */
.bbssl-cart-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border-subtle);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	overflow: hidden;
}
.bbssl-cart-table thead tr:first-child th:first-child {
	border-top-left-radius: var(--bbssl-radius);
}
.bbssl-cart-table thead tr:first-child th:last-child {
	border-top-right-radius: var(--bbssl-radius);
}
.bbssl-cart-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: var(--bbssl-radius);
}
.bbssl-cart-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--bbssl-radius);
}
.bbssl-cart-table th {
	text-align: left;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--bbssl-text-muted);
	padding: 14px 20px;
	border-bottom: 2px solid var(--bbssl-border-subtle);
}
.bbssl-cart-table th.bbssl-cart-table__col-price,
.bbssl-cart-table td.bbssl-cart-table__col-price {
	text-align: right;
}
.bbssl-cart-table th.bbssl-cart-table__col-remove,
.bbssl-cart-table td.bbssl-cart-table__col-remove {
	width: 48px;
	text-align: center;
}
.bbssl-cart-row td {
	padding: 16px 20px;
	border-bottom: 1px solid var(--bbssl-border-subtle);
	color: var(--bbssl-text);
	vertical-align: middle;
}
.bbssl-cart-row:last-child td {
	border-bottom: none;
}
.bbssl-cart-table td.bbssl-cart-table__col-category {
	font-weight: 600;
}
.bbssl-cart-table td.bbssl-cart-table__col-price {
	font-weight: 600;
	white-space: nowrap;
}
.bbssl-cart-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--bbssl-text-muted);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.bbssl-cart-remove:hover {
	background: rgba(214, 54, 56, .12);
	color: var(--bbssl-paid);
}
/* Coupon — separated from the table with real vertical gap, and a
   highlighted card (accent left border) instead of sitting flush
   underneath it with an unstyled input */
.bbssl-coupon-section {
	margin-top: 28px;
	padding: 20px;
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border);
	border-left: 4px solid #00C3FF;
	border-radius: var(--bbssl-radius);
}
.bbssl-coupon-form__fields {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.bbssl-input {
	padding: 11px 14px;
	border: 1px solid var(--bbssl-border);
	border-radius: 6px;
	font-size: .95rem;
	background: #fff;
	color: var(--bbssl-text);
}
.bbssl-input:focus {
	outline: none;
	border-color: var(--bbssl-primary);
	box-shadow: 0 0 0 3px rgba(1, 30, 61, .12);
}
.bbssl-input--coupon {
	flex: 1;
	min-width: 0;
}
.bbssl-coupon-apply {
	flex-shrink: 0;
	white-space: nowrap;
}
.bbssl-coupon-error {
	margin: 10px 0 0;
	font-size: .85rem;
}
.bbssl-coupon-applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.bbssl-coupon-applied__label {
	font-weight: 600;
	color: var(--bbssl-free);
}

/* Ghost + small button modifiers — used by the coupon "Remove" button
   and "Continue Shopping" (already referenced in cart.php markup) but
   never defined anywhere in this stylesheet until now. */
.bbssl-btn--ghost {
	background: transparent;
	border: 1px solid var(--bbssl-border);
	color: var(--bbssl-text);
}
.bbssl-btn--ghost:hover {
	background: var(--bbssl-bg-light);
}
.bbssl-btn--sm {
	padding: 6px 12px;
	font-size: .8rem;
}
/* Order Summary — fixed-width card in the grid's right column instead
   of a full-page-width table */
.bbssl-cart-summary {
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	padding: 24px;
}
.bbssl-cart-summary__title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--bbssl-text);
	margin: 0 0 16px;
}
.bbssl-summary-table {
	width: 100%;
	border-collapse: collapse;
}
.bbssl-summary-table th,
.bbssl-summary-table td {
	text-align: left;
	font-weight: 400;
	padding: 10px 8px;
	color: var(--bbssl-text);
	font-size: .9rem;
}
.bbssl-summary-table td {
	text-align: right;
}
.bbssl-summary-table tr:not(:last-child) th,
.bbssl-summary-table tr:not(:last-child) td {
	border-bottom: 1px solid var(--bbssl-border-subtle);
}
.bbssl-summary-table .bbssl-summary-total th,
.bbssl-summary-table .bbssl-summary-total td {
	border-top: 2px solid var(--bbssl-border-subtle);
	border-bottom: none;
	padding-top: 14px;
	font-size: 1.05rem;
	font-weight: 700;
}
.bbssl-summary-discount td {
	color: var(--bbssl-free);
}

/* CTA buttons — clear gap above (was flush under the summary table)
   and a more prominent full-width primary/secondary pairing */
.bbssl-cart-actions {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bbssl-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}
.bbssl-cart-actions .bbssl-btn--primary {
	padding: 14px 20px;
	font-size: 1rem;
	background: #00C3FF;
	color: #011E3D;
	box-shadow: 0 4px 14px rgba(0, 195, 255, .35);
}
.bbssl-cart-actions .bbssl-btn--primary:hover {
	background: #00AEDD;
	color: #011E3D;
}
/* Trust signals footer — had no color rule at all before, so it could
   blend into the background depending on theme. Same variables as the
   rest of the page, which already adapt correctly in dark mode. */
.bbssl-trust-signals {
	list-style: none;
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--bbssl-border);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bbssl-trust-signal {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bbssl-trust-signal__title {
	font-weight: 700;
	font-size: .85rem;
	color: var(--bbssl-text);
}
.bbssl-trust-signal__desc {
	font-size: .8rem;
	line-height: 1.5;
	color: var(--bbssl-text-muted);
}
.bbssl-trust-signal__desc a {
	color: var(--bbssl-primary);
}

/* Tablet: collapse the two-column grid to a single column before the
   375px stacked-table breakpoint below, so the fixed 360px summary
   column isn't cramped on tablets / small laptops. */
@media ( max-width: 900px ) {
	.bbssl-cart-layout {
		grid-template-columns: 1fr;
	}
}

/* ─── Checkout Page ─────────────────────────────────────────
   Billing form + Order Summary previously had almost no dedicated
   desktop CSS (form fields, section headings, item list, totals
   table, Edit Cart link and Pay button were all unstyled), so the
   page rendered as a bare, full-width stack with a scattered,
   unstyled Pay button. Reuses the same card/grid/token pattern as
   the Cart Page section above — no new dark-mode rules needed. ──── */
.bbssl-checkout-page {
	padding: 0 20px;
}
.bbssl-checkout-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 32px;
	align-items: start;
}
.bbssl-checkout-main {
	min-width: 0;
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	padding: 28px;
}
.bbssl-checkout-section-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--bbssl-text);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bbssl-border);
}
.bbssl-checkout-section-title--optional {
	margin-top: 32px;
}
.bbssl-form-row {
	margin-bottom: 18px;
}
.bbssl-form-row--2col,
.bbssl-form-row--3col {
	display: grid;
	gap: 16px;
}
.bbssl-form-row--2col {
	grid-template-columns: 1fr 1fr;
}
.bbssl-form-row--3col {
	grid-template-columns: 1fr 1fr 1fr;
}
.bbssl-form-group label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .875rem;
	color: var(--bbssl-text);
}
.bbssl-form-group .bbssl-input {
	width: 100%;
}
.bbssl-required {
	color: var(--bbssl-paid);
}
.bbssl-checkout-error {
	margin-top: 4px;
}

/* Order Summary — fixed-width card, matches Cart page summary card */
.bbssl-checkout-summary {
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	padding: 24px;
}
.bbssl-checkout-items {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.bbssl-checkout-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bbssl-border);
}
.bbssl-checkout-item:first-child {
	padding-top: 0;
}
.bbssl-checkout-item__name {
	font-weight: 600;
	color: var(--bbssl-text);
}
.bbssl-checkout-item__validity {
	display: block;
	font-weight: 400;
	font-size: .8rem;
	color: var(--bbssl-text-muted);
	margin-top: 2px;
}
.bbssl-checkout-item__price {
	font-weight: 600;
	white-space: nowrap;
	color: var(--bbssl-text);
}
.bbssl-checkout-totals {
	width: 100%;
	border-collapse: collapse;
	margin-top: 4px;
}
.bbssl-checkout-totals th,
.bbssl-checkout-totals td {
	text-align: left;
	font-weight: 400;
	padding: 10px 8px;
	color: var(--bbssl-text);
	font-size: .9rem;
}
.bbssl-checkout-totals td {
	text-align: right;
}
.bbssl-checkout-totals tr:not(:last-child) th,
.bbssl-checkout-totals tr:not(:last-child) td {
	border-bottom: 1px solid var(--bbssl-border-subtle);
}
.bbssl-checkout-totals__grand th,
.bbssl-checkout-totals__grand td {
	border-top: 2px solid var(--bbssl-border-subtle);
	border-bottom: none;
	padding-top: 14px;
	font-size: 1.05rem;
	font-weight: 700;
}
.bbssl-checkout-totals__discount td {
	color: var(--bbssl-free);
}
.bbssl-back-link {
	display: inline-block;
	margin-top: 16px;
	font-size: .875rem;
	font-weight: 600;
	color: var(--bbssl-text);
	text-decoration: underline;
}
.bbssl-back-link:hover {
	opacity: .7;
}

/* Pay button — relocated below Order Summary / Edit Cart via a
   template change, and made prominent (larger padding, brand shadow,
   flex layout so the amount always has real gap from the label). */
button.bbssl-btn--pay {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 20px;
	font-size: 1.05rem;
	background: #00C3FF;
	color: #011E3D;
	box-shadow: 0 4px 14px rgba(0, 195, 255, .35);
}
button.bbssl-btn--pay:hover {
	background: #00AEDD;
	color: #011E3D;
}
.bbssl-checkout-summary .bbssl-trust-signals {
	margin-top: 24px;
}

@media (max-width: 900px) {
	.bbssl-checkout-layout {
		grid-template-columns: 1fr;
	}
}

/* =============================================================
   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;
	}

	/* ── My Tickets pagination: full touch targets, no overflow ─── */
	.bbssl-my-tickets-pagination {
		gap: 6px;
	}
	.bbssl-my-tickets-pagination__page {
		min-width: 44px;
		height: 44px;
	}
}

/* ─── Payment Success ─────────────────────────────── */
.bbssl-payment-success-page {
	max-width: 640px;
	margin: 48px auto;
	padding: 0 20px;
}
.bbssl-success-banner {
	text-align: center;
	margin-bottom: 32px;
}
.bbssl-success-banner__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--bbssl-free);
	color: #fff;
}
.bbssl-success-banner__heading {
	margin: 0 0 8px;
	font-size: 1.9rem;
	color: var(--bbssl-text);
}
.bbssl-success-banner__message {
	margin: 0;
	color: var(--bbssl-text-muted);
	font-size: 1rem;
}
.bbssl-success-details {
	background: var(--bbssl-bg-light);
	border: 1px solid var(--bbssl-border-subtle);
	border-radius: var(--bbssl-radius);
	box-shadow: var(--bbssl-shadow);
	padding: 24px 28px;
	margin-bottom: 32px;
}
.bbssl-success-meta {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bbssl-success-meta__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bbssl-border-subtle);
}
.bbssl-success-meta__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.bbssl-success-meta__row--total .bbssl-success-meta__value {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--bbssl-free);
}
.bbssl-success-meta__label {
	color: var(--bbssl-text-muted);
	font-size: .9rem;
}
.bbssl-success-meta__value {
	color: var(--bbssl-text);
	font-weight: 600;
	text-align: right;
}
.bbssl-success-items {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--bbssl-border-subtle);
}
.bbssl-success-items__title {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--bbssl-text);
}
.bbssl-success-items__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bbssl-success-items__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.bbssl-success-items__name {
	color: var(--bbssl-text);
	font-size: .95rem;
}
.bbssl-success-items__price {
	color: var(--bbssl-text-muted);
	font-size: .9rem;
	white-space: nowrap;
}
.bbssl-success-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.bbssl-success-actions .bbssl-btn {
	padding: 12px 22px;
}
.bbssl-payment-success-page .bbssl-btn--ghost {
	background: transparent;
	border: 2px solid transparent;
	color: var(--bbssl-text-muted);
}
.bbssl-payment-success-page .bbssl-btn--ghost:hover {
	color: var(--bbssl-text);
	background: var(--bbssl-bg-light);
}

/* ── 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 select,
.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 select:focus,
.bbssl-dashboard-form textarea:focus {
	outline: 2px solid var(--bbssl-primary);
	outline-offset: 1px;
}

.bbssl-dashboard-form input[readonly] {
	background: var(--bbssl-bg-light, #f5f5f7);
	color: var(--bbssl-text-muted);
	cursor: not-allowed;
}

.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;
}

/* ── My Tickets section ───────────────────────────────────────────
   Reuses .bbssl-dashboard-card / .bbssl-invoices-table / .bbssl-tag /
   .bbssl-dashboard-form / .bbssl-notice / .bbssl-empty-state as-is (all
   defined above) — only the handful of elements genuinely new to this
   section (conversation thread, unread badges, simplified status tag
   colours) get rules here. */
.bbssl-dashboard-my-tickets__empty-sub {
	color: var(--bbssl-text-muted);
	max-width: 420px;
	margin: 0 auto 20px;
}
.bbssl-dashboard-my-tickets__new {
	margin: 0 0 16px;
}
.bbssl-dashboard-my-tickets__new .bbssl-btn--primary,
.bbssl-dashboard-my-tickets .bbssl-empty-state .bbssl-btn--primary {
	background: #00C3FF;
	color: #011E3D;
	border-color: #00C3FF;
}
.bbssl-dashboard-my-tickets__new .bbssl-btn--primary:hover,
.bbssl-dashboard-my-tickets .bbssl-empty-state .bbssl-btn--primary:hover {
	background: #5DD9FF;
	border-color: #5DD9FF;
}
.bbssl-my-tickets-back {
	display: inline-block;
	margin-bottom: 12px;
	color: var(--bbssl-primary);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 600;
}
.bbssl-my-tickets-back:hover {
	text-decoration: underline;
}

/* Table-row ticket number + unread badge */
.bbssl-my-tickets-table__number {
	font-weight: 600;
	color: var(--bbssl-text);
	text-decoration: none;
}
.bbssl-my-tickets-table__number:hover {
	color: var(--bbssl-primary);
}
.bbssl-my-tickets-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	margin-left: 6px;
	border-radius: 999px;
	background: var(--bbssl-primary);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	line-height: 16px;
}

/* Simplified Open / Closed / Reopened status pills — same .bbssl-tag
   pill shape as the Orders payment-status pills above, new colours. */
.bbssl-tag--open {
	background: rgba(0, 195, 255, .1);
	color: #00a3d9;
}
.bbssl-tag--reopened {
	background: rgba(153, 102, 0, .1);
	color: #996600;
}
.bbssl-tag--closed {
	background: rgba(80, 87, 94, .1);
	color: #50575e;
}

/* Conversation thread */
.bbssl-my-tickets-thread {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.bbssl-my-tickets-thread__entry {
	border: 1px solid var(--bbssl-border);
	border-radius: 10px;
	padding: 14px 16px;
	background: var(--bbssl-bg-light);
}
.bbssl-my-tickets-thread__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-bottom: 8px;
	font-size: .8rem;
}
.bbssl-my-tickets-thread__author {
	font-weight: 700;
	color: var(--bbssl-primary);
}
.bbssl-my-tickets-thread__date,
.bbssl-my-tickets-thread__time {
	color: var(--bbssl-text-muted);
}
.bbssl-my-tickets-thread__message {
	color: var(--bbssl-text);
	line-height: 1.6;
	word-wrap: break-word;
}
.bbssl-my-tickets-thread__entry--system {
	background: transparent;
	border: none;
	padding: 0 4px;
	text-align: center;
}
.bbssl-my-tickets-thread__system {
	display: inline-block;
	font-size: .75rem;
	color: var(--bbssl-text-muted);
	font-style: italic;
}

/* Status row (bottom of detail view) — status pill + the single
   applicable action button (Close Ticket / Reopen Ticket, never both). */
.bbssl-my-tickets-status-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;
}
.bbssl-my-tickets-status-row__label {
	font-weight: 600;
	font-size: .875rem;
	color: var(--bbssl-text);
}
.bbssl-my-tickets-status-row__form {
	margin: 0 0 0 auto;
}

.bbssl-my-tickets-form__actions {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

.bbssl-my-tickets-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
.bbssl-my-tickets-pagination__nav--disabled {
	opacity: .45;
	pointer-events: none;
}
.bbssl-my-tickets-pagination__pages {
	display: flex;
	align-items: center;
	gap: 4px;
}
.bbssl-my-tickets-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: 8px;
	color: var(--bbssl-text);
	text-decoration: none;
	font-size: .875rem;
	font-weight: 600;
}
.bbssl-my-tickets-pagination__page:hover {
	background: var(--bbssl-bg-light);
}
.bbssl-my-tickets-pagination__page--current {
	background: var(--bbssl-primary);
	color: #fff;
}
.bbssl-my-tickets-pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	color: var(--bbssl-text-muted);
}

/* Sidebar nav unread-count badge (e.g. "My Tickets" with a pending
   reply) — visually distinct from the muted "Soon" badge it shares a
   base class with: solid accent fill instead of uppercase muted text. */
.bbssl-dashboard-nav__badge--count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--bbssl-primary);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	opacity: 1;
}

/* ── 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;
	}
	.bbssl-my-tickets-status-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.bbssl-my-tickets-status-row__form {
		margin-left: 0;
		width: 100%;
	}
	.bbssl-my-tickets-status-row__form .bbssl-btn {
		width: 100%;
	}
	.bbssl-my-tickets-form__actions {
		flex-direction: column;
	}
	.bbssl-my-tickets-form__actions .bbssl-btn {
		width: 100%;
		text-align: center;
	}

	.bbssl-my-tickets-pagination {
		gap: 6px;
	}
	.bbssl-my-tickets-pagination__page {
		min-width: 40px;
		height: 40px;
	}
}


/* =========================================================
   Payment Processing overlay (NF#1) — purely visual state
   shown while the existing Razorpay verification AJAX call
   is in flight. Self-contained dark panel, theme-invariant
   (matches Razorpay's own backdrop_color), cyan accent to
   match brand. No logic change — CSS/markup only.
   ========================================================= */
.bbssl-payment-processing {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 18, 32, 0.92);
	backdrop-filter: blur(2px);
	padding: 20px;
}

.bbssl-payment-processing[hidden] {
	display: none !important;
}

.bbssl-payment-processing__panel {
	background: #0B1220;
	border: 1px solid rgba(0, 195, 255, 0.35);
	border-radius: 14px;
	padding: 36px 40px;
	max-width: 320px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 195, 255, 0.08);
}

.bbssl-payment-processing__spinner {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid rgba(0, 195, 255, 0.18);
	border-top-color: #00C3FF;
	animation: bbssl-payment-processing-spin .8s linear infinite;
	margin-bottom: 18px;
}

@keyframes bbssl-payment-processing-spin {
	to { transform: rotate(360deg); }
}

.bbssl-payment-processing__title {
	color: #F5F9FF;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: 0.2px;
}

.bbssl-payment-processing__subtext {
	color: rgba(245, 249, 255, 0.65);
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 480px) {
	.bbssl-payment-processing__panel {
		padding: 28px 26px;
	}
}

/* ─── Lesson Thumbnail responsive (Bunny Stream) ────────────────── */
@media (max-width: 768px) {
	.bbssl-lesson-list__thumb {
		width: 140px;
	}
}
@media (max-width: 480px) {
	.bbssl-lesson-list__thumb {
		width: 96px;
	}
}
@media (max-width: 375px) {
	.bbssl-lesson-list__thumb {
		width: 72px;
	}
}

/* ─── Multi-Video Selector Cards (Impl#9) ───────────────────── */
.bbssl-video-select-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bbssl-video-card-item {
	margin: 0;
}
.bbssl-video-select-btn.bbssl-video-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	background: #0B1220;
	border: 1px solid #26324A;
	border-left: 4px solid transparent;
	border-radius: var(--bbssl-radius);
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	font: inherit;
	text-align: left;
	color: #F1F5F9;
	transition: border-color .15s, box-shadow .15s;
}
.bbssl-video-select-btn.bbssl-video-card:hover {
	border-left-color: #00C3FF;
}
.bbssl-video-select-btn.bbssl-video-card.is-active {
	border-left-color: #00C3FF;
	box-shadow: 0 0 0 1px #00C3FF inset;
}
.bbssl-video-select-btn.bbssl-video-card:focus-visible {
	outline: 3px solid #00C3FF;
	outline-offset: 2px;
}
.bbssl-video-card__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #1d1d1d;
	flex-shrink: 0;
}
.bbssl-video-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bbssl-video-card__thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2rem;
	color: #fff;
	opacity: .5;
}
.bbssl-video-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 14px 16px;
	min-width: 0;
}
.bbssl-video-card__title {
	font-size: .95rem;
	font-weight: 600;
	color: #F1F5F9;
	overflow-wrap: break-word;
	word-break: break-word;
}
.bbssl-video-card__status {
	font-size: .8rem;
	font-weight: 600;
	color: #94A3B8;
}
.bbssl-video-card__status--partial {
	color: #FBBF24;
}
.bbssl-video-card__status--watched {
	color: #00C3FF;
}
.bbssl-video-card__action {
	margin-top: 4px;
	pointer-events: none;
}
@media ( min-width: 640px ) {
	.bbssl-video-select-btn.bbssl-video-card {
		flex-direction: row;
		align-items: stretch;
	}
	.bbssl-video-card__thumb {
		width: 220px;
		max-width: 40%;
		aspect-ratio: 16 / 9;
	}
	.bbssl-video-card__body {
		flex: 1;
		justify-content: center;
	}
}

/* ─── Video Slot Active-Player Caption (fix: player-stacking-look bug) ──
   Root cause: .bbssl-video-slot__title was an unstyled <h3>, inheriting
   the theme's default heading typography (~32px/600/gray) — the same
   visual weight as the page title ("LS-lesson"). Directly under the
   compact video-selector cards, that made the active video's caption
   read as a brand-new page section rather than a label for the player
   beneath it, creating a "cards → new section → big player" stacked
   look even though only one .bbssl-video-slot is ever visible (the
   other two are correctly [hidden] -> display:none, verified in DOM).
   Restyle it as a small muted caption + divider so it visually belongs
   to the single player area below the cards. Purely additive CSS; no
   markup/JS/PHP change. ───────────────────────────────────────── */
.bbssl-video-slot {
	margin-top: 8px;
}
.bbssl-video-slot__title {
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #94A3B8;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #26324A;
}

/* --- YouTube-Style Player + Playlist Layout (multi-video redesign) -----
   Restructures the existing multi-video markup (unchanged DOM/JS) from
   "cards stacked above player" into a desktop layout with the active
   player on the left and the video playlist as a compact right-hand
   sidebar, and a mobile layout with the player on top and a compact
   playlist below it. Achieved purely with flexbox 'order' + width
   rules -- no changes to selectVideo(), the .bbssl-video-slot show/hide
   mechanism, or progress tracking. Single-video lessons are untouched
   because every rule below targets .bbssl-lesson-detail__video--multi
   or its descendants, which only exists when count( $lesson_videos ) > 1.
   ------------------------------------------------------------------- */

.bbssl-video-select-list .bbssl-video-select-btn.bbssl-video-card {
	flex-direction: row;
	align-items: stretch;
}
.bbssl-video-select-list .bbssl-video-card__thumb {
	width: 112px;
	max-width: 40%;
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
}
.bbssl-video-select-list .bbssl-video-card__body {
	flex: 1;
	justify-content: center;
	min-width: 0;
	padding: 10px 12px;
	gap: 4px;
}
.bbssl-video-select-list .bbssl-video-card__title {
	font-size: .85rem;
}
.bbssl-video-select-list .bbssl-video-card__status {
	font-size: .72rem;
}
.bbssl-video-select-list .bbssl-video-card__action {
	font-size: .72rem;
}

.bbssl-lesson-detail__video--multi {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.bbssl-lesson-detail__video--multi .bbssl-video-slot {
	order: -1;
	margin-top: 0;
	min-width: 0;
}
.bbssl-lesson-detail__video--multi .bbssl-video-select-list {
	order: 0;
	margin: 0;
}

@media (min-width: 1024px) {
	.bbssl-lesson-detail__video--multi {
		flex-direction: row;
		align-items: flex-start;
	}
	.bbssl-lesson-detail__video--multi .bbssl-video-slot {
		flex: 1 1 0;
	}
	.bbssl-lesson-detail__video--multi .bbssl-video-select-list {
		flex: 0 0 340px;
		max-width: 340px;
		max-height: 520px;
		overflow-y: auto;
		padding-right: 4px;
	}
	.bbssl-lesson-detail__resources.bbssl-video-resource-panel {
		max-width: calc(100% - 360px);
	}
}

/* ==========================================================================
   Stage 5: My Account -- "My Questions & Answers" section
   ========================================================================== */
.bbssl-myqa-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bbssl-myqa-item {
	border: 1px solid var(--bbssl-border);
	border-radius: 8px;
	padding: 16px;
	background: var(--bbssl-bg-light);
}
.bbssl-myqa-item--unread {
	border-color: #00C3FF;
	background: rgba(0, 195, 255, .08);
}
.bbssl-myqa-item__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--bbssl-text-muted);
}
.bbssl-myqa-item__lesson {
	font-weight: 600;
	color: var(--bbssl-text);
}
.bbssl-myqa-item__sep {
	opacity: .5;
}
.bbssl-myqa-item__unread-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #00C3FF;
	display: inline-block;
}
.bbssl-myqa-item__question {
	margin: 0 0 8px;
	color: var(--bbssl-text);
}
.bbssl-myqa-item__reply {
	background: var(--bbssl-border-subtle);
	border-radius: 6px;
	padding: 8px 12px;
	margin-bottom: 10px;
}
.bbssl-myqa-item__reply-label {
	font-size: 12px;
	font-weight: 600;
	color: #00C3FF;
	display: block;
	margin-bottom: 2px;
}
.bbssl-myqa-item__reply p {
	margin: 0;
	color: var(--bbssl-text);
}
.bbssl-tag--open {
	background: #FEF3C7;
	color: #92400E;
}
.bbssl-tag--answered {
	background: #DCFCE7;
	color: #166534;
}
@media (max-width: 480px) {
	.bbssl-myqa-item__meta {
		font-size: 12px;
	}
}