/*
 * Webpapa PRO front-end styles.
 * Own naming and layout approach throughout — not a translation of
 * any other plugin's classes or values, just built from scratch for
 * what this plugin actually needs.
 */

/* Two master colours — Theme Colour (--wppro-accent-bg) and Secondary
   Colour (--wppro-secondary-bg) — that everything else below defaults
   to via var() fallback chains, rather than each holding its own
   independent hardcoded default. Change either master in Settings >
   Styling > Global and every one of these follows automatically;
   any of them can still be given its own separate override too. */
:root {
	--wppro-accent-bg: #128b83;
	--wppro-secondary-bg: #eceef0;

	--wppro-sidebar-bg: var( --wppro-secondary-bg );
	--wppro-header-bg: var( --wppro-accent-bg );
	--wppro-sidebar-text: #333333;
	--wppro-sidebar-hover-bg: #ececec;
	--wppro-header-text: #ffffff;
	--wppro-content-text: #333333;
	--wppro-tick-color: #2e7d32;
	--wppro-cross-color: #6b6b6b;
	--wppro-accent-text: #ffffff;
	--wppro-heart-color: #e0245e;
	--wppro-exit-bg: #ffffff;
	--wppro-exit-text: #000000;
	--wppro-content-font-size: 16px;
	--wppro-sidebar-font-size: 16px;
	--wppro-element-font-size: 14px;
	--wppro-content-max-width: 1100px;
	--wppro-content-padding: 30px;
	--wppro-qa-max-width: 500px;
	--wppro-popout-sidebar-top: 80px;
	--wppro-content-line-height: 1.5;
	--wppro-content-paragraph-gap-mobile: 1.5em;
	--wppro-accent-bg-light: color-mix( in srgb, var( --wppro-accent-bg ) 15%, #fff );
	/* Its own mix percentage, not accent-bg-light's 15% — darker, so the
	   glow actually reads as coloured rather than barely-there. */
	--wppro-glow-color: color-mix( in srgb, var( --wppro-accent-bg ) 35%, #fff );
	--wppro-bullet-color: var( --wppro-accent-bg );
	--wppro-featured-badge-bg: var( --wppro-accent-bg );
	--wppro-audio-color: var( --wppro-accent-bg );
	--wppro-caption-text: #666666;
	--wppro-caption-font-size: 0.9em;
	--wppro-caption-font-size-mobile: 0.9em;
	--wppro-caption-gap: 8px;
	--wppro-caption-weight: 400;
	--wppro-caption-style: normal;
	--wppro-caption-align: center;
	--wppro-grid-heading-bg: #e6e6e6;
	--wppro-grid-border-width: 0px;
	--wppro-grid-border-color: #ddd;
	--wppro-grid-gap: 24px;
	--wppro-title-font-size: 1.5em;
	--wppro-title-font-size-mobile: 1.3em;
	--wppro-subtitle-font-size: 1.2em;
	--wppro-subtitle-font-size-mobile: 1.1em;
}

/* A small set of ready-made utility classes, documented in Settings >
 * Styling, for a tutor to apply directly to a block or element (via the
 * block editor's own "Additional CSS class(es)" field, or by hand in
 * Code view) without ever needing to touch this stylesheet — which
 * wouldn't survive an update or reinstall anyway. Keep this list to a
 * handful of genuinely common needs; anything more involved belongs in
 * the site's own theme stylesheet instead. Adding a new one here also
 * needs a matching entry in wppro_get_utility_css_classes().
 */
.wppro-space-top-sm {
	margin-top: 15px;
}

.wppro-space-top {
	margin-top: 30px;
}

.wppro-space-top-lg {
	margin-top: 60px;
}

.wppro-space-bottom {
	margin-bottom: 30px;
}

.wppro-space-bottom-lg {
	margin-bottom: 60px;
}

.wppro-center {
	text-align: center;
}

.wppro-max-width-800 {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Width itself is set by JS (see wppro_print_utility_class_script() in
   assets.php) — a CSS percentage here would be relative to the container,
   not the video/image's own natural size, which is what this needs. */
.wppro-width-half {
	margin-left: auto;
	margin-right: auto;
}

.wppro-border-shadow {
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 6px 20px 2px rgba( 0, 0, 0, 0.3 );
}

/* For one specific photo worth calling out (e.g. a director's portrait, a
   historic photo), not tied to any particular photo style. A thick
   off-white margin, like a print frame, with a thin Theme Colour line
   just inside it as the "this one is notable" signal. */
.wppro-border-frame {
	border: 10px solid #faf9f7;
	border-radius: 2px;
	box-shadow:
		inset 0 0 0 1px color-mix( in srgb, var( --wppro-accent-bg ) 60%, transparent ),
		0 2px 10px rgba( 0, 0, 0, 0.15 );
}

/* An even halo on all sides, not an offset drop-shadow — a coloured glow
   rather than the neutral lift of wppro-border-shadow. Follows the Theme
   Colour automatically (as a light tint of it) unless its own colour is
   set under Settings > Styling > Interface Colours. */
.wppro-border-glow {
	border-radius: 4px;
	box-shadow: 0 0 20px 4px var( --wppro-glow-color );
}

/* A title/subtitle *within* a lesson's own content — never the lesson's
   own title, which the plugin already shows automatically above the body
   and must never be repeated inside it. Forced explicitly (not just
   inherited) so it overrides a theme's own heading styling (Divi's H1-H6
   settings, say) regardless of which block/tag it's applied to. */
.wppro-title {
	font-size: var( --wppro-title-font-size ) !important;
	font-weight: 700 !important;
	margin: 1em 0 0.5em !important;
	padding-bottom: 0 !important;
}

.wppro-subtitle {
	font-size: var( --wppro-subtitle-font-size ) !important;
	font-weight: 600 !important;
	margin: 0.8em 0 0.4em !important;
	padding-bottom: 0 !important;
}

/* The lesson/quiz body already has its own top padding, so a title or
   subtitle placed first doesn't also need its own margin-top on top of it. */
.wppro-lesson-body .wppro-title:first-child,
.wppro-quiz-body .wppro-title:first-child,
.wppro-lesson-body .wppro-subtitle:first-child,
.wppro-quiz-body .wppro-subtitle:first-child {
	margin-top: 0 !important;
}

@media ( max-width: 600px ) {
	.wppro-title {
		font-size: var( --wppro-title-font-size-mobile ) !important;
	}

	.wppro-subtitle {
		font-size: var( --wppro-subtitle-font-size-mobile ) !important;
	}
}

/* A quiet "start reading here" cue for a lesson's opening paragraph —
   larger and a bit bolder, not coloured, so it draws the eye without
   looking like a warning or a mistake. */
.wppro-lead {
	/* 50px from the edge of the content frame, whatever the content padding
	   is set to: the padding is subtracted so the margin may go negative. */
	margin-left: calc( 50px - var( --wppro-content-padding ) );
	margin-right: calc( 50px - var( --wppro-content-padding ) );
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1em;
}

/* A lighter-weight, smaller alternative to a theme's default bold image
   caption text, which reads as bulky against the surrounding content. */
.wppro-caption {
	line-height: 1.2em !important;
	font-weight: var( --wppro-caption-weight ) !important;
	font-style: var( --wppro-caption-style ) !important;
	font-size: var( --wppro-caption-font-size ) !important;
	color: var( --wppro-caption-text );
	text-align: var( --wppro-caption-align );
	margin-top: var( --wppro-caption-gap );
	padding-bottom: 30px;
}

@media ( max-width: 600px ) {
	.wppro-caption {
		font-size: var( --wppro-caption-font-size-mobile ) !important;
	}
}

/* Two callout styles, deliberately different: a quote is someone else's
   words, a key point is the lesson's own "remember this". Both keep the
   normal dark text colour; the difference comes from shape and tint. */

/* Someone else's words. One structure: a Paragraph block, with the source
   (if any) as a <cite> inside it — <p class="wppro-quotation">Text<cite>Source
   </cite></p>, added by hand in Code view. */
.wppro-quotation {
	position: relative;
	max-width: 85%;
	margin: 2.5em auto !important;
	padding: 8px 56px !important;
	border: none !important;
	background: none !important;
	/* Fixed to the configured content size, not a relative em bump — a
	   theme's own Quote block styling (e.g. Divi's) can already enlarge
	   blockquote text, and a further em-based increase here would
	   compound on top of that rather than replace it. */
	font-size: var( --wppro-content-font-size ) !important;
	line-height: var( --wppro-content-line-height ) !important;
	font-style: italic;
	color: var( --wppro-content-text );
}

.wppro-quotation::before {
	content: "\201C";
	position: absolute;
	/* External clearance (from whatever sits above the whole block) now
	   comes from the block's own margin-top instead of this offset, so
	   this can sit close to its natural spot beside the first line. */
	top: -0.05em;
	left: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4em;
	font-style: normal;
	line-height: 1;
	color: color-mix( in srgb, var( --wppro-accent-bg ) 45%, #fff );
}

/* Mirrors the opening mark exactly — bottom-right instead of top-left.
   Absolutely positioned against the whole block, so it's unaffected by
   line-height, wrapping, or where the citation (if any) happens to sit. */
.wppro-quotation::after {
	content: "\201D";
	position: absolute;
	bottom: -0.05em;
	right: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4em;
	font-style: normal;
	line-height: 1;
	color: color-mix( in srgb, var( --wppro-accent-bg ) 45%, #fff );
}

.wppro-quotation cite {
	display: block;
	margin-top: 10px;
	font-size: 0.8em;
	font-style: normal;
	color: #666;
}

/* If the class sits on a wrapper (e.g. a Quote block's <blockquote>) rather
   than directly on text, force the same size/spacing on the text inside it
   too — see the matching rule on .wppro-key-point for why. */
.wppro-quotation p {
	font-size: var( --wppro-content-font-size ) !important;
	line-height: var( --wppro-content-line-height ) !important;
	font-style: italic !important;
}

/* The lesson's own "remember this". Use once or twice per lesson at most,
   or it stops standing out. Apply to a Paragraph or Group block. */
.wppro-key-point {
	margin: 30px 0 40px !important;
	padding: 24px 20px !important;
	border-left: 8px solid var( --wppro-accent-bg );
	border-radius: 0 6px 6px 0;
	background: color-mix( in srgb, var( --wppro-accent-bg ) 8%, #fff );
	/* Forced explicitly (not just inherited) so it stays identical to
	   normal paragraph text even if applied to an element a theme gives
	   its own size/spacing, such as a blockquote. */
	font-size: var( --wppro-content-font-size ) !important;
	line-height: var( --wppro-content-line-height ) !important;
	font-style: normal;
	color: var( --wppro-content-text );
}

/* If the class sits on a wrapper (e.g. a Quote block's <blockquote>) rather
   than directly on text, force the same size/spacing on the text inside it
   too — an inherited value can still lose to the theme's own rule for that
   specific inner tag. */
.wppro-key-point p {
	font-size: var( --wppro-content-font-size ) !important;
	line-height: var( --wppro-content-line-height ) !important;
}

.wppro-key-point::before {
	content: "Key point";
	display: block;
	margin-bottom: 6px;
	font-size: 0.75em;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix( in srgb, var( --wppro-accent-bg ) 75%, black );
}

.wppro-key-point > :last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* A simple heading/subheading/item grid for comparison-style content (e.g.
   "which materials in which setting"), typed by hand in Code view. Heading
   background and cell borders are configured under Settings > Styling >
   Table Grid; subhead is always a lighter tint of whatever heading colour
   is set, so there's one colour to choose, not two. */
/* Flexbox, not CSS Grid: a grid's auto-placement fills rows strictly by
   document order, so once the column count changes on a narrower screen,
   subheadings and items just keep flowing in the same flat order and no
   longer land under the right subheading at all. Flexbox with each
   subheading + its own items wrapped in one .wppro-grid-column container
   moves that whole column as a single unit when it wraps. */
.wppro-grid {
	display: flex;
	flex-wrap: wrap;
	/* 24px with no borders (card-style spacing); 0 when borders are
	   switched on, so cells touch and share border lines like a real
	   table, rather than bordered boxes floating apart. */
	gap: var( --wppro-grid-gap );
	text-align: center;
	margin: 1.5em auto;
	max-width: 900px;
}

.wppro-grid-heading {
	width: 100%;
	background: var( --wppro-grid-heading-bg );
	padding: 12px;
	font-weight: 700;
	font-size: 1.1em;
	border-width: var( --wppro-grid-border-width );
	border-style: solid;
	border-color: var( --wppro-grid-border-color );
}

.wppro-grid-column {
	display: flex;
	flex-direction: column;
	/* Same floor as the old grid's minmax(220px, ...): at least 220px,
	   grows to share any extra space, wraps to its own row rather than
	   squeezing narrower once there's no room left. */
	flex: 1 1 220px;
}

.wppro-grid-subhead {
	background: color-mix( in srgb, var( --wppro-grid-heading-bg ) 50%, #fff );
	padding: 10px;
	font-weight: 700;
	border-width: var( --wppro-grid-border-width );
	border-style: solid;
	border-color: var( --wppro-grid-border-color );
}

.wppro-grid-item {
	/* Horizontal padding matters more once gap drops to 0 in border mode,
	   where it's the only thing keeping text off the border line. */
	padding: 6px 12px;
	border-width: var( --wppro-grid-border-width );
	border-style: solid;
	border-color: var( --wppro-grid-border-color );
}

@media ( max-width: 600px ) {
	.wppro-quotation {
		max-width: 100%;
		padding-left: 44px !important;
		padding-right: 44px !important;
	}

	.wppro-quotation::before,
	.wppro-quotation::after {
		font-size: 3.2em;
	}
}

/* Shared button style — every call-to-action button in the plugin
   (Enrol, Mark Complete, quiz Submit, Q&A Send, Continue Course, an
   active Wishlist button) uses this one class, so a single colour
   change in Settings restyles all of them together. */
.wppro-button {
	display: inline-block;
	background: var( --wppro-accent-bg );
	color: var( --wppro-accent-text );
	border: none;
	border-radius: 4px;
	padding: 10px 20px;
	font-size: 1em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.wppro-button:hover {
	filter: brightness( 0.92 );
	color: var( --wppro-accent-text );
}

/* A finished course's dashboard card button: "Review" rather than
   "Continue". A darker shade of the Theme Colour rather than the
   completed-tick green — green reads as "go"/active here, the same
   message as the normal button, not "done". Staying in the same colour
   family (just darker) signals a different state without introducing an
   unrelated colour. */
.wppro-button-complete {
	background: color-mix( in srgb, var( --wppro-accent-bg ) 70%, black );
}

/* The Courses page card has no progress bar, so this button is the only
   completion cue on it — a hardcoded neutral grey instead of a same-family
   shade, since it needs to read as clearly different at a glance, not a
   subtle variant someone might not notice. */
.wppro-button-complete-neutral {
	background: #585858;
}

/* Shared tag/badge style — a small, filled label. The "accent"
   variant (e.g. the Tutor badge) uses the same brand colour as
   buttons; the "neutral" variant (e.g. course Level/Duration) stays
   plain grey regardless of brand colour, since it's informational,
   not a call to action. */
.wppro-tag {
	display: inline-block;
	border-radius: 3px;
	padding: 2px 8px;
}

.wppro-tag-accent {
	background: var( --wppro-accent-bg );
	color: var( --wppro-accent-text );
}

.wppro-tag-neutral {
	background: #f2f2f2;
	color: #555;
}

/* A quiet, "ghost" pill rather than a solid call-to-action button or a
   plain theme-coloured text link — downloading a certificate already
   earned isn't a decision that needs selling, unlike Enrol/Continue. */
.wppro-cert-download {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var( --wppro-accent-bg );
	border-radius: 999px;
	padding: 4px 14px;
	background: transparent;
	color: var( --wppro-accent-bg );
	font-size: 0.9em;
	text-decoration: none;
	transition: box-shadow 0.15s ease, background 0.15s ease;
}

.wppro-cert-download svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.wppro-cert-download:hover {
	background: color-mix( in srgb, var( --wppro-accent-bg ) 10%, transparent );
	box-shadow: 0 0 8px color-mix( in srgb, var( --wppro-accent-bg ) 50%, transparent );
	color: var( --wppro-accent-bg );
}

/* Maintenance mode: the yellow notice across the top, a disabled button
   look for the In Maintenance label, and a matching tag on course cards. */
.wppro-maintenance-notice {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid #e0b400;
	border-left-width: 5px;
	border-radius: 6px;
	background: #fff4c2;
	color: #4a3b00;
	font-size: 1em;
	line-height: 1.5;
}

.wppro-button-disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.wppro-tag-maintenance {
	background: #fff4c2;
	border: 1px solid #e0b400;
	color: #4a3b00;
}

/* A course taken offline (Draft/Private): greyed, not clickable. */
.wppro-dashboard-course-unavailable {
	opacity: 0.6;
}

.wppro-dashboard-course-unavailable .wppro-dashboard-course-image a {
	cursor: default;
}

.wppro-dashboard-course-unavailable-label {
	display: inline-block;
	padding: 6px 14px;
	border: 1px dashed #b0b3b8;
	border-radius: 999px;
	color: #50575e;
	font-size: 0.9em;
}

/* Archive icon on a completed dashboard course card. */
.wppro-dashboard-archive-form {
	display: inline-flex;
	margin: 0 0 0 auto;
}

.wppro-archive-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: #787c82;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wppro-archive-icon svg {
	width: 18px;
	height: 18px;
}

.wppro-archive-icon:hover,
.wppro-archive-icon:focus-visible {
	background-color: rgba( 0, 0, 0, 0.04 );
	border-color: rgba( 0, 0, 0, 0.14 );
	color: #333;
}

/* Downloads paused (Settings > General): same pill, red, with an X. */
.wppro-cert-download.wppro-cert-download-paused,
.wppro-cert-download.wppro-cert-download-paused:hover {
	border-color: #b32d2e;
	color: #b32d2e;
	background: transparent;
	box-shadow: none;
	cursor: not-allowed;
}


.wppro-courses-archive {
	max-width: 1100px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 40px 20px;
}

.wppro-courses-pagination {
	margin-top: 30px;
}

.wppro-courses-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.wppro-courses-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 4px;
	text-decoration: none;
	color: #333;
	background: #f2f2f2;
}

.wppro-courses-pagination .page-numbers.current {
	background: var( --wppro-accent-bg );
	color: var( --wppro-accent-text );
}

.wppro-courses-pagination .page-numbers.dots {
	background: none;
}

.wppro-dashboard-pagination {
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/* Full-width themed banner, matching the coloured page headers already
   used in the plugin's own admin screens — but built on the front-end
   colour variables, so it follows the header colour set under
   Settings > Styling instead of a fixed admin colour. */
.wppro-page-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: var( --wppro-header-bg );
	border-radius: 8px;
	padding: 28px 32px;
	margin: 0 0 24px;
}

.wppro-page-banner-text {
	flex: 1 1 auto;
	min-width: 0;
}

.wppro-page-banner-icon {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.wppro-page-banner h1 {
	margin: 0 0 6px;
	padding: 0;
	color: var( --wppro-header-text );
	font-size: 24px;
}

.wppro-page-banner p {
	margin: 0;
	color: var( --wppro-header-text );
	opacity: 0.85;
	font-size: 14px;
}

.wppro-courses-toolbar-row .wppro-dashboard-courses-toolbar {
	margin-bottom: 0;
	/* Stays at the right even when there is no category filter beside it. */
	margin-left: auto;
}

.wppro-courses-toolbar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.wppro-course-category-filter {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wppro-courses-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) );
	gap: 24px;
}

.wppro-courses-grid-list {
	grid-template-columns: 1fr;
}

.wppro-courses-grid-list .wppro-course-card {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 30px;
}

.wppro-courses-grid-list .wppro-course-card-image img {
	width: 100%;
	height: 240px;
	display: block;
	vertical-align: top;
	margin: 0;
}

.wppro-courses-grid-list .wppro-course-card-body {
	height: 240px;
	grid-template-rows: 70px 90px 80px;
	overflow: hidden;
	display: grid;
}

.wppro-courses-grid-list .wppro-course-card-body > div {
	padding: 4px;
	box-sizing: border-box;
	overflow: hidden;
}

.wppro-course-card {
	position: relative;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
}

.wppro-course-card-featured {
	border-color: var( --wppro-accent-bg );
	box-shadow: 0 0 0 1px var( --wppro-accent-bg ), 0 2px 8px rgba( 0, 0, 0, 0.35 );
}

.wppro-course-card-featured-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	background: var( --wppro-featured-badge-bg );
	color: var( --wppro-accent-text );
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 10px;
	border-radius: 4px;
}

.wppro-course-card-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Shown when no Featured Image is set, or one was set but its attachment
   has since been deleted from the Media Library — see
   wppro_get_course_card_image_html(). The placeholder itself is a real
   <img> at the same 500x300 intrinsic size a Featured Image would be
   (a plain grey box, baked into the SVG), so every existing image-sizing
   rule above applies to it exactly as it would a real photo; this just
   centres the "No image" text on top of it. */
.wppro-course-card-image,
.wppro-dashboard-course-image {
	position: relative;
}

.wppro-course-card-no-image-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	color: #888;
	font-size: 1.2em;
	white-space: nowrap;
}

.wppro-course-card-body {
	padding: 14px 18px 18px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	font-size: 16px;
}

.wppro-course-card-title {
	margin: 0;
	font-size: 1.3em;
	font-weight: 700;
}

.wppro-course-card-title a {
	text-decoration: none;
	color: inherit;
}

.wppro-course-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 1em;
	color: #555;
}

.wppro-course-card-author {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wppro-course-card-author img {
	border-radius: 50%;
}

.wppro-course-card-meta .wppro-wishlist-icon-form {
	margin-left: auto;
}

.wppro-course-card-excerpt {
	padding-top: 8px !important;
	font-size: 0.95em;
	line-height: 1.4 !important;
	color: #555;
}

/* The padding-top and lack of bottom spacing above are tuned for the
   wide, fixed-height list row — Grid view's cards flow naturally, so
   they need the reverse: no extra top padding (the meta line's own
   margin already provides that gap) and a real gap before the button. */
.wppro-courses-grid:not( .wppro-courses-grid-list ) .wppro-course-card-excerpt {
	padding-top: 0 !important;
	margin-bottom: 16px;
}

.wppro-course-card-enrol {
	margin-top: 6px;
	font-size: 1em;
}

/* Grid view: the button sits at the bottom of every card, whatever the length of the text above it. */
.wppro-courses-grid:not(.wppro-courses-grid-list) .wppro-course-card-enrol {
	margin-top: auto;
	padding-top: 12px;
}

/* Progress bar — shared by the Dashboard and the lesson header. */

.wppro-progress-bar {
	width: 100%;
	max-width: 200px;
	height: 8px;
	border-radius: 4px;
	background: #eaeaea;
	overflow: hidden;
	margin: 8px 0;
}

.wppro-progress-bar-fill {
	height: 100%;
	background: var( --wppro-accent-bg );
	transition: width 0.3s ease;
}

/* Dashboard */

/* width:100% so the page keeps its full width inside a flex wrapper (a theme or the
   short-page CSS can make the content area a flex column, where auto side margins
   would otherwise shrink the page to fit its content). */
.wppro-dashboard-page {
	max-width: 1100px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 40px 20px;
}

.wppro-dashboard-layout {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.wppro-dashboard-sidebar {
	flex: 0 0 220px;
}

.wppro-dashboard-content {
	flex: 1;
	min-width: 0;
}

.wppro-dashboard-welcome {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.wppro-dashboard-welcome img {
	border-radius: 50%;
}

.wppro-dashboard-welcome h2 {
	margin: 0;
	font-size: 1.1em;
}

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

.wppro-dashboard-nav li {
	border-bottom: 1px solid #ccc;
}

.wppro-dashboard-nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 8px;
	text-decoration: none;
	color: #333;
	font-size: 1.1em;
	border-radius: 4px;
}

/* A plain open-book glyph, standing in for the bullet the list would
   otherwise not have (list-style is off elsewhere on this nav), and
   giving the sidebar a study theme rather than leaving it blank. */
.wppro-dashboard-nav a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	opacity: 0.55;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.5c-1.5-1.2-3.5-2-6-2-1 0-2 .1-3 .4v13c1-.3 2-.4 3-.4 2.5 0 4.5.8 6 2 1.5-1.2 3.5-2 6-2 1 0 2 .1 3 .4v-13c-1-.3-2-.4-3-.4-2.5 0-4.5.8-6 2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.5c-1.5-1.2-3.5-2-6-2-1 0-2 .1-3 .4v13c1-.3 2-.4 3-.4 2.5 0 4.5.8 6 2 1.5-1.2 3.5-2 6-2 1 0 2 .1 3 .4v-13c-1-.3-2-.4-3-.4-2.5 0-4.5.8-6 2z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wppro-dashboard-nav li.wppro-dashboard-nav-active a::before {
	opacity: 1;
}

.wppro-dashboard-nav li.wppro-dashboard-nav-active a {
	background: var( --wppro-accent-bg-light );
	color: var( --wppro-accent-bg );
	font-weight: 600;
}

.wppro-dashboard-courses {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	align-items: start;
	gap: 20px;
}

.wppro-dashboard-courses-list {
	grid-template-columns: 1fr;
}

.wppro-dashboard-courses-toolbar {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-bottom: 12px;
}

.wppro-dashboard-view-toggle {
	background: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #888;
}

.wppro-dashboard-view-toggle svg {
	width: 18px;
	height: 18px;
}

.wppro-dashboard-view-toggle-active {
	border-color: var( --wppro-accent-bg );
	color: var( --wppro-accent-bg );
}

.wppro-dashboard-form p {
	margin-bottom: 14px;
}

.wppro-dashboard-form input[type="text"],
.wppro-dashboard-form input[type="email"],
.wppro-dashboard-form input[type="password"] {
	width: 100%;
	max-width: 320px;
	padding: 8px;
}

.wppro-dashboard-notice-success {
	color: #2e7d32;
}

.wppro-dashboard-notice-error {
	color: #c62828;
}

.wppro-dashboard-notice-box {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 4px solid #e0a800;
	background: #fff8e1;
}

.wppro-dashboard-notice-box p {
	margin: 0;
}

.wppro-cert-name-box {
	margin: 0 0 24px;
	padding: 16px 18px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
}

.wppro-wishlist-form {
	display: inline-block;
	margin-left: 8px;
}

/* The wishlist button uses .wppro-button for shape/sizing, but when
   not yet wishlisted it should look secondary (outlined), not like
   the main call to action — only the active/wishlisted state gets
   the full filled accent look .wppro-button provides by default. */
.wppro-wishlist-button {
	background: none;
	color: var( --wppro-accent-bg );
	border: 1px solid var( --wppro-accent-bg );
	padding: 6px 12px;
	font-size: 0.85em;
}

.wppro-wishlist-button:hover {
	filter: none;
	background: var( --wppro-accent-bg );
	color: var( --wppro-accent-text );
}

.wppro-wishlist-button.wppro-wishlist-active {
	background: var( --wppro-accent-bg );
	border-color: var( --wppro-accent-bg );
	color: var( --wppro-accent-text );
}

.wppro-wishlist-icon-form {
	display: inline-block;
	line-height: 0;
}

.wppro-wishlist-icon {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 2em;
	line-height: 1;
	color: #ccc;
}

.wppro-wishlist-icon.wppro-wishlist-icon-active {
	color: var( --wppro-heart-color );
}

/* Grid view (the default): image on top spanning the full card width,
   same shape as the Courses archive cards, with everything else
   stacked below it — title, author/category meta, progress, then the
   completion stats, all shown plainly (no expand/collapse). */
.wppro-dashboard-course {
	display: flex;
	flex-direction: column;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.wppro-dashboard-course-image {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 3;
	height: auto;
}

.wppro-dashboard-course-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.wppro-dashboard-course-body {
	display: flex;
	flex-direction: column;
	padding: 18px;
}

.wppro-dashboard-course-title {
	margin: 0 0 10px;
	font-size: 1.3em;
	font-weight: 400;
}

.wppro-dashboard-course-title a {
	text-decoration: none;
	color: inherit;
}

.wppro-dashboard-course-percent {
	margin: 0;
	font-size: 14px;
	color: #555;
}

.wppro-dashboard-course-continue {
	margin: 10px 0 0;
	padding: 14px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.wppro-dashboard-course-level {
	font-size: 14px;
	flex-shrink: 0;
}

.wppro-dashboard-courses-list .wppro-dashboard-course {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 18px;
}

.wppro-dashboard-courses-list .wppro-dashboard-course-image img {
	width: 100%;
	height: 240px;
	display: block;
	vertical-align: top;
	margin: 0;
}

.wppro-dashboard-courses-list .wppro-dashboard-course-body {
	height: 240px;
	grid-template-rows: 100px 32px 68px 40px;
	overflow: hidden;
	display: grid;
	padding: 0;
}

.wppro-dashboard-courses-list .wppro-dashboard-course-body > div {
	padding: 4px;
	box-sizing: border-box;
	overflow: hidden;
}

.wppro-dashboard-courses-list .wppro-dashboard-course-title-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wppro-dashboard-courses-list .wppro-dashboard-course-body > .wppro-dashboard-course-continue {
	padding-right: 20px;
	padding-top: 14px;
	padding-bottom: 14px;
	margin-top: 0;
}

.wppro-dashboard-courses-list .wppro-dashboard-course-title {
	margin-bottom: 2px;
	line-height: 1.1;
}


.wppro-dashboard-course-featured {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var( --wppro-featured-badge-bg );
	color: var( --wppro-accent-text );
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 10px;
	border-radius: 4px;
}

.wppro-dashboard-course-meta {
	margin: 0 0 8px;
	font-size: 14px;
	color: #777;
}

.wppro-dashboard-courses-list .wppro-dashboard-course-progress {
	display: flex;
	align-items: center;
	gap: 40px;
}

.wppro-dashboard-courses-list .wppro-progress-bar {
	flex: 1;
	margin: 0;
}

.wppro-dashboard-courses-list .wppro-dashboard-course-percent {
	flex-shrink: 0;
	margin: 0;
}

.wppro-dashboard-course-meta .wppro-tag {
	margin-left: 6px;
	font-size: 0.85em;
}

.wppro-dashboard-courses-list .wppro-dashboard-course-meta {
	font-size: 14px;
	margin: 0;
}

.wppro-dashboard-courses-list .wppro-dashboard-course-meta .wppro-tag {
	font-size: 16px;
}

.wppro-dashboard-course-complete {
	border-color: #2e7d32;
}

.wppro-dashboard-course-inprogress {
	border-color: #b58a00;
}

/* A themed shadow ring rather than overriding border-color, since that's
   already carrying the more personally relevant complete/in-progress
   status colour above — this layers on top instead of competing with it. */
.wppro-dashboard-course-featured-card {
	box-shadow: 0 0 0 1px var( --wppro-accent-bg ), 0 6px 16px rgba( 0, 0, 0, 0.15 );
}

.wppro-dashboard-course-stats {
	list-style: none;
	margin: 10px 0 0;
	padding: 0 0 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Pins the stats row to the body's bottom padding regardless of how much
   content sits above it (meta line, quiz count, Final Test badge all vary
   per course) — otherwise a shorter card hits min-height's floor and the
   leftover space collects below the stats row instead of every card
   getting the same, consistent gap. */
.wppro-dashboard-courses-list .wppro-dashboard-course-stats {
	margin-top: 0;
	padding-top: 4px;
}

.wppro-dashboard-course-stats li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #555;
}

.wppro-dashboard-course-stats .wppro-nav-item-icon {
	width: 16px;
	height: 16px;
	color: #888;
	opacity: 1;
}

.wppro-dashboard-history {
	width: 100%;
	border-collapse: collapse;
}

.wppro-dashboard-history th,
.wppro-dashboard-history td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #e0e0e0;
}

.wppro-history-result-pass {
	background: #eaf6ea;
	color: #2e7d32;
}

.wppro-history-result-fail {
	background: #fdecea;
	color: #c62828;
}

/* Certificates list: same table as History, with a small grey download icon
   at the end of each row instead of a button, so many rows don't stack
   up a column of coloured buttons. */
.wppro-dashboard-cert-action-col {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

.wppro-dashboard-cert-action-col .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

.wppro-dashboard-cert-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #f6f7f7;
	color: #63686f;
	text-decoration: none;
	vertical-align: middle;
}

.wppro-dashboard-cert-icon svg {
	width: 16px;
	height: 16px;
}

a.wppro-dashboard-cert-icon:hover {
	background: #f0f0f1;
	border-color: #8c8f94;
	color: #63686f;
}

.wppro-dashboard-cert-icon-paused {
	color: #b32d2e;
	cursor: not-allowed;
}

/* Single course page — the overview before starting a lesson. */

.wppro-course-page {
	max-width: 900px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 40px 20px;
	font-size: 17px;
}

.wppro-course-page > h2 {
	margin: 0 0 14px;
	font-size: 1.2em;
}

.wppro-course-thumbnail {
	margin-bottom: 24px;
}

.wppro-course-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: cover;
	border-radius: 6px;
}

.wppro-course-header {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e5e5e5;
}

.wppro-course-header h1 {
	margin: 0 0 12px;
}

.wppro-course-header-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: 0.9em;
	color: #555;
}

.wppro-course-author {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wppro-course-author img {
	border-radius: 50%;
}

.wppro-course-body {
	line-height: 1.6;
	margin-bottom: 30px;
}

.wppro-course-body h3 {
	margin: 24px 0 8px;
	font-size: 1.05em;
	font-weight: 700;
}

.wppro-course-body p {
	margin: 0 0 10px;
}

.wppro-course-enrol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 20px;
	margin-bottom: 30px;
	background: #f7f7f7;
	border-radius: 6px;
}

.wppro-course-enrol p {
	margin: 0;
}

.wppro-course-enrol form {
	margin: 0;
}

.wppro-revise-note {
	margin: 8px 0 0;
	font-size: 0.9em;
	color: #666;
}

.wppro-course-start {
	margin-bottom: 16px;
}

.wppro-course-progress {
	margin-bottom: 30px;
}

.wppro-course-progress p {
	margin: 0 0 8px;
}

.wppro-course-final-status {
	margin: 0 0 20px;
	font-weight: 600;
	color: #555;
}

/* Single course page: banner, at-a-glance strip, main button, progress, index, boxed text. */

.wppro-course-banner {
	background: var( --wppro-secondary-bg );
	line-height: 0;
}

.wppro-course-banner img {
	display: block;
	width: 100%;
	max-width: 700px;
	height: auto;
	margin: 0 auto;
}

.wppro-course-header-wishlist {
	margin-left: 6px;
}

.wppro-course-header-wishlist .wppro-wishlist-icon {
	font-size: 1.7em;
	color: #a8a8a8;
}

.wppro-course-header-wishlist .wppro-wishlist-icon:hover {
	color: var( --wppro-heart-color );
}

.wppro-course-header-wishlist .wppro-wishlist-icon.wppro-wishlist-icon-active {
	color: var( --wppro-heart-color );
}

/* The stats on the left, the main button at the right of the same row. */
.wppro-course-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
}

.wppro-course-glance {
	margin: 0;
}

.wppro-course-glance-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wppro-course-glance-facts li {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 96px;
	padding: 12px 16px;
	margin: 0;
	background: #f7f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
}

.wppro-course-glance-value {
	font-size: 1.35em;
	font-weight: 600;
	line-height: 1.2;
	color: var( --wppro-accent-bg );
}

.wppro-course-glance-label {
	font-size: 0.85em;
	color: #666;
}

.wppro-course-glance-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.wppro-course-cta {
	margin: 0 0 0 auto;
}

.wppro-course-cta p,
.wppro-course-cta form {
	margin: 0;
}

.wppro-course-cta .wppro-button {
	padding: 12px 28px;
	font-size: 1.05em;
}

/* Progress bar with its text to the right, like the course cards. */
.wppro-course-progress {
	display: flex;
	align-items: center;
	gap: 40px;
	margin: 0 0 20px;
}

.wppro-course-progress .wppro-progress-bar {
	flex: 1;
	max-width: none;
	margin: 0;
}

.wppro-course-progress p {
	flex-shrink: 0;
	margin: 0;
}

/* The Course Index: a single-row accordion, opened to show Elements with their items indented. */
.wppro-course-index {
	margin: 0 0 24px;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	background: #fff;
}

.wppro-course-index summary {
	background: #f7f7f7;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.wppro-course-index summary::-webkit-details-marker {
	display: none;
}

/* A drawn triangle rather than a text glyph, which rendered as a tiny dot. */
.wppro-course-index summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 12px solid var( --wppro-accent-bg );
	transition: transform 0.15s ease;
}

.wppro-course-index[open] summary {
	border-bottom: 1px solid #e5e5e5;
	border-radius: 6px 6px 0 0;
}

.wppro-course-index[open] summary::after {
	transform: rotate( 180deg );
}

.wppro-course-index-list {
	padding: 4px 18px 16px;
}

.wppro-course-index-element h4 {
	margin: 16px 0 6px;
	font-size: 1em;
	font-weight: 600;
	text-transform: uppercase;
}

.wppro-course-index-element ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 22px;
}

.wppro-course-index-element li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 3px 0;
	color: #444;
}

.wppro-course-index .wppro-nav-item-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var( --wppro-accent-bg );
}

/* Description, Requirements and Who this course is for, each in its own bordered box. */
.wppro-course-section {
	margin: 0 0 20px;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
}

.wppro-course-section h3 {
	margin: 0 0 10px;
	font-size: 1.05em;
	font-weight: 600;
}

.wppro-course-section > :last-child {
	margin-bottom: 0;
}

.wppro-course-section ul {
	list-style: none !important;
	margin: 0 0 10px;
	padding-left: 0 !important;
}

.wppro-course-section ul li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 22px;
}

.wppro-course-section ul li::before {
	content: "\25B8";
	position: absolute;
	left: 2px;
	color: var( --wppro-accent-bg );
}

.wppro-course-page .button {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 8px 16px;
	color: #333;
	text-decoration: none;
	font-size: 0.9em;
}

/* Lesson / Quiz page — the core "taking a course" experience. */

/* Not user-configurable — a fixed base for the header/footer/timer,
   which aren't part of either the sidebar or the lesson/quiz body
   content those two Settings > Styling text-size fields target. */
.wppro-lesson-page,
.wppro-quiz-page {
	max-width: none;
	font-size: 16px;
}

/* Vertical padding doubled from the original 6px at the user's request,
   to make the header row more prominent — revert to 6px if that's ever wanted back. */
.wppro-lesson-header {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 70px;
	padding: 12px 24px 12px 12px;
	box-sizing: border-box;
	background: var( --wppro-header-bg );
	border-bottom: 1px solid #e5e5e5;
}

.wppro-lesson-header-titles {
	min-width: 0;
}

.wppro-lesson-header h1 {
	margin: 0;
	padding: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
	color: var( --wppro-header-text );
}

.wppro-lesson-header-eyebrow {
	margin: 0 0 2px;
	padding: 0;
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --wppro-header-text );
	opacity: 0.75;
}

/* Both toggles (left sidebar, right sidebar) sit together as one visual
   unit, same pattern as the Up/Down reorder buttons in the Course Builder
   admin screen: a thin line between them rather than two separate
   floating icons, transparent background at rest. */
.wppro-header-sidebar-toggles {
	display: inline-flex;
	align-items: stretch;
}

.wppro-sidebar-toggle,
.wppro-sidebar-toggle-right {
	background: none;
	border: none;
	/* A proper square button, not just padding hugging the icon — matches
	   the Course Builder's Up/Down buttons, sized to the header (70px
	   tall) without filling its full height. */
	width: 40px;
	height: 40px;
	line-height: 1;
	color: var( --wppro-header-text );
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wppro-sidebar-toggle-right {
	border-left: 1px solid rgba( 255, 255, 255, 0.25 );
}

.wppro-sidebar-toggle:hover,
.wppro-sidebar-toggle-right:hover {
	background: rgba( 255, 255, 255, 0.15 );
}

.wppro-sidebar-toggle svg,
.wppro-sidebar-toggle-right svg {
	width: 18px;
	height: 18px;
	transition: transform 0.15s ease;
}

.wppro-lesson-page.wppro-sidebar-collapsed .wppro-sidebar-toggle svg,
.wppro-quiz-page.wppro-sidebar-collapsed .wppro-sidebar-toggle svg {
	transform: rotate( 180deg );
}

.wppro-lesson-page.wppro-right-sidebar-collapsed .wppro-sidebar-toggle-right svg,
.wppro-quiz-page.wppro-right-sidebar-collapsed .wppro-sidebar-toggle-right svg {
	transform: rotate( 180deg );
}

.wppro-lesson-timer-wrap {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wppro-lesson-timer {
	font-size: 1.2em;
	color: var( --wppro-header-text );
	font-variant-numeric: tabular-nums;
}

.wppro-lesson-timer-pause {
	background: none;
	border: none;
	padding: 2px;
	font-size: 0.9em;
	line-height: 1;
	color: var( --wppro-header-text );
	cursor: pointer;
}

.wppro-lesson-timer-pause:hover {
	opacity: 0.7;
}

.wppro-lesson-timer-pause.wppro-lesson-timer-paused {
	opacity: 0.7;
}

.wppro-sidebar-toggle:hover {
	opacity: 0.7;
}

.wppro-lesson-page.wppro-sidebar-collapsed .wppro-lesson-sidebar-left,
.wppro-quiz-page.wppro-sidebar-collapsed .wppro-lesson-sidebar-left {
	display: none;
}

.wppro-lesson-page.wppro-right-sidebar-collapsed .wppro-lesson-sidebar-right,
.wppro-quiz-page.wppro-right-sidebar-collapsed .wppro-lesson-sidebar-right {
	display: none;
}

.wppro-lesson-layout {
	display: flex;
	align-items: flex-start;
}

/* Each sidebar is its own fixed-height column: a header bar that
   stays put (matching the central column's header in height/feel),
   with its actual content scrolling independently underneath —
   the header no longer scrolls away with the list. */
.wppro-lesson-sidebar-left,
.wppro-lesson-sidebar-right {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	font-size: var( --wppro-sidebar-font-size );
}

/* Sticky, not height-capped: tracks the page as the (often much taller)
   lesson content is scrolled, so the sidebar's own header and current
   item stay reachable without an arbitrary internal scrollbar cutting
   the nav list short on a screen tall enough to show all of it anyway.
   top/max-height account for the site's own ~80px navbar so the sidebar
   settles just below it, not hidden behind it. */
.wppro-lesson-sidebar-left {
	flex: 0 0 380px;
	width: 380px;
	position: sticky;
	top: var( --wppro-popout-sidebar-top );
	max-height: calc( 100vh - var( --wppro-popout-sidebar-top ) );
	border-right: 1px solid #e5e5e5;
}

body.admin-bar .wppro-lesson-sidebar-left {
	top: calc( var( --wppro-popout-sidebar-top ) + 32px );
	max-height: calc( 100vh - var( --wppro-popout-sidebar-top ) - 32px );
}

/* Deliberately no max-height here (unlike the left sidebar): Q&A and
   Notices each cap their own height below instead, in a mix of vh and
   plain pixels — capping the shared wrapper instead would trap both
   inside one screen-height box, forcing an inner scrollbar even when
   there's no real reason the page itself couldn't just grow taller
   and let the browser scroll normally, as any other page does. */
.wppro-lesson-sidebar-right {
	flex: 1 1 280px;
	width: auto;
	min-width: 280px;
	max-width: var( --wppro-qa-max-width );
	border-left: 1px solid #e5e5e5;
}

.wppro-sidebar-header {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	background: #fff;
	color: #333;
	font-weight: 700;
	border-bottom: 1px solid #e5e5e5;
}

/* Vertical padding doubled from the original 6px at the user's request,
   to match the lesson header row — revert to 6px if that's ever wanted back. */
.wppro-sidebar-header > span {
	display: flex;
	align-items: center;
	padding: 12px 24px;
}

/* aspect-ratio (not a fixed width) keeps this a true square against
   whatever height the header row ends up at, stretched by the parent's
   align-items:stretch — a fixed width went rectangular the moment the
   row's own height changed independently. */
.wppro-sidebar-exit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: auto;
	height: 100%;
	/* Never shrinks to just the width of the X, whatever the browser makes of the
	   aspect-ratio above: this is the only way out of a course, so it stays large. */
	min-width: 44px;
	box-sizing: border-box;
	border-left: 1px solid #e5e5e5;
	background: var( --wppro-exit-bg );
	color: var( --wppro-exit-text );
	text-decoration: none;
	text-align: center;
	font-size: 2em;
	font-weight: 600;
	line-height: 1;
}

.wppro-sidebar-exit > span[aria-hidden] {
	display: block;
	line-height: 1;
}

.wppro-sidebar-exit:hover {
	opacity: 0.8;
}

.wppro-sidebar-header-actions {
	display: flex;
	align-items: stretch;
}

/* The padding above is for the text label only. Left on this button area it made the
   header taller than the right-hand one and inset the Exit X inside a small frame. */
.wppro-sidebar-header > span.wppro-sidebar-header-actions {
	padding: 0;
	/* Laid over the right-hand end of the header, so it adds nothing to the header's height:
	   both sidebar headers then get their height from their label alone, and match. */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}

/* Hidden by default — only needed at the mid-width range where the sidebar
   renders as a floating overlay (see the 901-1320px rule further down),
   since that's the only case where the lesson header's own toggle can
   scroll out of reach while this header stays pinned. */
.wppro-sidebar-header-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: auto;
	border: none;
	border-left: 1px solid #e5e5e5;
	background: none;
	color: #333;
	cursor: pointer;
}

.wppro-sidebar-header-toggle:hover {
	opacity: 0.8;
}

/* This header is white, not the coloured header the default
   --wppro-header-text (white) was written for — without this override
   the icon is white on white, clickable but invisible. */
.wppro-sidebar-header .wppro-sidebar-toggle-right {
	display: none;
	color: #333;
}

@media ( min-width: 901px ) and ( max-width: 1320px ) {
	.wppro-sidebar-header-toggle {
		display: inline-flex;
	}

	.wppro-sidebar-header .wppro-sidebar-toggle-right {
		display: inline-flex;
	}
}

.wppro-course-navigation {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-anchor: none;
	padding: 0 0 16px 0;
}

.wppro-lesson-qa {
	flex: 0 1 auto;
	max-height: 80vh;
	overflow-y: auto;
	padding: 28px 24px 0;
	box-sizing: border-box;
}

/* The centre column: header/footer stay confined to this column's
   width instead of stretching the full page like before, but the
   lesson body itself is NOT height-capped — it needs to grow with
   whatever content (including images) is actually in the lesson, and
   the whole page scrolls normally, the way an article would. Capping
   it to a fixed height with its own scrollbar (matching the sidebars)
   seemed tidy with short placeholder text, but silently clipped any
   real image taller than that box. */
.wppro-lesson-center {
	display: flex;
	flex-direction: column;
	flex: 3 1 auto;
	min-width: 0;
	max-width: var( --wppro-content-max-width );
	box-sizing: border-box;
}

.wppro-lesson-center .wppro-lesson-header {
	flex: 0 0 auto;
}

.wppro-lesson-center .wppro-lesson-footer {
	flex: 0 0 auto;
}

.wppro-lesson-body,
.wppro-quiz-body {
	max-width: calc( var( --wppro-content-max-width ) - 2 * var( --wppro-content-padding ) );
	margin: 0 auto;
	padding: var( --wppro-content-padding );
	box-sizing: border-box;
	width: 100%;
}

.wppro-lesson-body,
.wppro-quiz-body {
	font-size: var( --wppro-content-font-size );
	color: var( --wppro-content-text );
}

/* Paragraph text only — headings, list items, etc. keep their own
   natural line-height, since Gutenberg's Paragraph block (and a raw
   <p> typed via the HTML block) both render as plain <p> tags on the
   front end, so this one selector reaches both without extra handling. */
.wppro-lesson-body p,
.wppro-quiz-body p {
	line-height: var( --wppro-content-line-height );
}

/* A link in lesson/quiz content: a soft background signals "clickable"
   instead of colour, so it never clashes with whatever Theme Colour a
   site has set for bullets/buttons. Text stays the normal content colour,
   not a separate link colour. */
.wppro-lesson-body a,
.wppro-quiz-body a {
	color: var( --wppro-content-text );
	background: var( --wppro-secondary-bg );
	padding: 0.05em 0.3em;
	border-radius: 3px;
	text-decoration: none;
}

.wppro-lesson-body a:hover,
.wppro-quiz-body a:hover {
	text-decoration: underline;
}

/* On narrow screens a paragraph wraps onto many short lines, so the theme's
   usual gap between paragraphs (about one line in Divi) stops standing out.
   Set here instead, adjustable under Settings > Styling. !important and
   padding reset because Divi spaces paragraphs with padding-bottom. */
@media ( max-width: 600px ) {
	.wppro-lesson-body p:not( .wppro-quotation ):not( .wppro-key-point ):not( .wppro-title ):not( .wppro-subtitle ),
	.wppro-quiz-body p:not( .wppro-quotation ):not( .wppro-key-point ):not( .wppro-title ):not( .wppro-subtitle ) {
		margin: 0 0 var( --wppro-content-paragraph-gap-mobile ) !important;
		padding-bottom: 0 !important;
	}

	.wppro-lesson-body .wppro-quotation > p:last-child,
	.wppro-lesson-body .wppro-key-point > p:last-child,
	.wppro-quiz-body .wppro-quotation > p:last-child,
	.wppro-quiz-body .wppro-key-point > p:last-child {
		margin-bottom: 0 !important;
	}
}

/* On a wide enough browser window, there's room for the sidebars to
   sit pinned at their fixed widths and still leave more than 240mm
   spare in the centre — let the reading column grow a bit further
   in that case, up to 300mm, rather than leaving that space empty. */
.wppro-lesson-body img {
	max-width: 100%;
	height: auto;
}

/* A figure's width is set directly in pixels by JS (see
   figure-caption-width.php), matching the image's own actual rendered
   width, so a figcaption inside it can never be wider than the picture
   above it. Not done in pure CSS: shrink-to-fit techniques (fit-content,
   display:table) size the figure to whichever child is widest, and an
   unconstrained caption's own preferred width (its full sentence on one
   line) is usually wider than the image, so the figure never actually
   shrunk to the image, just hit this max-width ceiling either way.
   This max-width/min-width/margin stays as a fallback for the brief moment
   before JS runs, and for anyone with JavaScript disabled. */
.wppro-lesson-body figure {
	max-width: 100%;
	/* Floor for a genuinely small image (e.g. a 120px thumbnail), so its
	   caption still gets a readable column instead of wrapping one word
	   per line. The caption ends up wider than the image in that case,
	   a reasonable trade-off against unreadable text. */
	min-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

/* Custom markers throughout (list-style:none + a ::before content),
   rather than native list markers, for two reasons: native marker-to-text
   spacing isn't something plain CSS can precisely control (it's fixed by
   the browser), and a theme's own global reset (e.g. Divi's) has already
   been seen silently overriding a plain padding-left/list-style here once
   before — !important makes sure that can't happen quietly again.
   The reserved indent lives on the li itself (not the marker), so it
   applies to every wrapped line, not just the first — a long item's
   second line lands under the first line's text, not back under the
   bullet. The marker is pulled back into that reserved space with a
   matching negative margin, then given its own fixed-width box so the
   gap to the text (margin-right) stays exactly 12px regardless of how
   wide the marker character itself is (a bullet vs. "iii.").
   Front-end only — Gutenberg's List Item block suppresses custom ::before
   content in the editor (it wants its own marker for editing purposes),
   so trying to mirror this into .editor-styles-wrapper only produced a
   broken layout there. The editor just shows its own native list styling
   instead; not a pixel match, but it works. */
.wppro-lesson-body ul,
.wppro-lesson-body ol {
	list-style: none !important;
	margin: 0 !important;
	padding-left: 0 !important;
}

.wppro-lesson-body li {
	padding-left: 40px;
	padding-top: 18px;
	line-height: 1.4em;
}

.wppro-lesson-body li:first-child {
	padding-top: 0;
}

/* A nested list's own first item follows the parent item's text, not
   the start of a heading/paragraph — it should keep the same gap rather
   than being treated as "the first item of a list" the way the very
   first bullet of the whole list is. */
.wppro-lesson-body li > ul > li:first-child,
.wppro-lesson-body li > ol > li:first-child {
	padding-top: 18px;
}

/* Breathing room after the whole list finishes, before whatever
   follows — only the outer list's own last item, so a nested sub-list
   ending mid-way through the list doesn't also get this. */
.wppro-lesson-body > ul > li:last-child,
.wppro-lesson-body > ol > li:last-child {
	padding-bottom: 20px;
}

.wppro-lesson-body ul > li::before,
.wppro-lesson-body ol > li::before {
	display: inline-block;
	width: 28px;
	margin: -0.25em 12px -0.25em -40px;
	font-size: 2em;
	line-height: 1;
	vertical-align: middle;
	text-align: right;
	color: var( --wppro-bullet-color );
}

/* Numbers/roman numerals are text, not an icon, so they stay at the
   surrounding text's own size rather than inheriting the 2em bump above
   (which is aimed at the dot and the nested triangle only). */
.wppro-lesson-body ol > li::before {
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 0;
}

.wppro-lesson-body ul > li::before {
	content: "\2022";
}

.wppro-lesson-body ol {
	counter-reset: wppro-list-counter;
}

.wppro-lesson-body ol > li {
	counter-increment: wppro-list-counter;
}

.wppro-lesson-body ol > li::before {
	content: counter( wppro-list-counter ) ".";
}

/* A nested bulleted list uses a triangle instead of repeating the
   parent's dot, so it reads clearly as one level down rather than
   blurring into the same list visually. Its own indent simply adds on
   top of the parent li's, via the same rules above — no separate
   handling needed. */
.wppro-lesson-body li > ul > li::before {
	content: "\25B8";
}

.wppro-lesson-thumbnail {
	margin-bottom: 24px;
}

.wppro-lesson-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Course navigation (left sidebar) */

.wppro-course-navigation h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 12px;
	background: var( --wppro-sidebar-bg );
	box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.05 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.05 );
	cursor: pointer;
	font-size: var( --wppro-element-font-size );
	line-height: 1.4;
	text-transform: uppercase;
	color: var( --wppro-sidebar-text );
	font-weight: 400;
}

.wppro-course-navigation h4:hover {
	background: var( --wppro-sidebar-hover-bg );
}

.wppro-nav-element-chevron {
	align-self: flex-start;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.wppro-nav-element.wppro-nav-collapsed .wppro-nav-element-chevron {
	transform: rotate( -90deg );
}

.wppro-nav-element.wppro-nav-collapsed ul {
	display: none;
}

.wppro-element-tick,
.wppro-element-cross {
	margin-left: auto;
}

.wppro-element-tick {
	color: var( --wppro-tick-color );
}

.wppro-element-cross {
	color: var( --wppro-cross-color );
}

/* Its own row under the Element's title, shown until the Final Test is submitted. */
.wppro-element-reminder {
	display: block;
	padding: 0 12px 10px 36px;
	background: var( --wppro-sidebar-bg );
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.3;
	color: #6b7075;
}

.wppro-course-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wppro-course-navigation li {
	border-left: 10px solid transparent;
	background: #fff;
	box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.05 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.05 );
}

.wppro-course-navigation li a,
.wppro-course-navigation li strong {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 17px 10px 17px 12px;
	line-height: 1.4;
}

.wppro-nav-item-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var( --wppro-sidebar-text );
	opacity: 0.6;
}

.wppro-nav-item-title {
	flex: 1 1 auto;
}

.wppro-nav-item-status {
	flex: 0 0 auto;
	align-self: center;
	margin-left: auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #ececec;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1em;
}

.wppro-nav-item-status.wppro-nav-item-complete {
	color: var( --wppro-tick-color );
}

.wppro-nav-item-status.wppro-nav-item-incomplete {
	color: var( --wppro-cross-color );
}

.wppro-course-navigation li a {
	color: var( --wppro-sidebar-text );
	text-decoration: none;
	border-radius: 3px;
}

.wppro-course-navigation li a:hover {
	background: var( --wppro-sidebar-hover-bg );
}

.wppro-course-navigation li.wppro-nav-current {
	border-left-color: var( --wppro-accent-bg );
}

.wppro-course-navigation li.wppro-nav-last-item {
	border-bottom: 3px solid var( --wppro-accent-bg );
}

.wppro-course-navigation li.wppro-nav-current strong {
	color: var( --wppro-accent-bg );
}

/* Footer navigation bar */

.wppro-lesson-footer {
	border-top: 1px solid #e5e5e5;
	padding: 16px 30px;
}

.wppro-lesson-footer-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
}

.wppro-nav-count {
	justify-self: center;
	color: #666;
	font-size: 1em;
	white-space: nowrap;
}

.wppro-nav-prev {
	justify-self: start;
}

.wppro-nav-next {
	justify-self: end;
}

.wppro-lesson-footer-nav a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: #333;
	font-weight: 600;
	font-size: 1.25em;
	/* A transparent border and padding, pulled back by the same amount of negative
	   margin, so the hover box below can appear without moving the text. */
	padding: 6px 12px;
	margin: -6px -12px;
	border: 1px solid transparent;
	border-radius: 6px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Ghost-button hover: a faint outline and a hint of grey on white. */
.wppro-lesson-footer-nav a:hover,
.wppro-lesson-footer-nav a:focus-visible {
	background-color: rgba( 0, 0, 0, 0.04 );
	border-color: rgba( 0, 0, 0, 0.14 );
	color: #333;
}

.wppro-nav-arrow {
	width: 1.2em;
	height: 1.2em;
	vertical-align: middle;
	color: var( --wppro-accent-bg );
}

/* Q&A (right sidebar) */

.wppro-lesson-qa h3 {
	margin: 0 0 12px;
	font-size: 1.05em;
	font-weight: 600;
}

.wppro-panel-intro {
	margin: 0 0 20px;
	color: #555;
	font-size: 0.8em;
	line-height: 1.35 !important;
}

/* A clear gap above the question box, and the Send button on the left. */
.wppro-lesson-qa #respond {
	margin: 24px 0 0 !important;
	padding: 0 !important;
}

/* The empty reply heading WordPress prints (and the theme pads) is not needed. */
.wppro-lesson-qa .comment-reply-title,
.wppro-lesson-qa #reply-title {
	display: none !important;
}

.wppro-lesson-qa .comment-form {
	margin: 0 !important;
	padding: 0 !important;
}

.wppro-lesson-qa .comment-form p {
	margin: 0 0 12px !important;
	padding: 0 !important;
}

.wppro-lesson-qa .comment-form p.form-submit {
	margin: 12px 0 0 !important;
	text-align: left !important;
	float: none !important;
}

.wppro-lesson-qa .form-submit input[type="submit"],
.wppro-lesson-qa .form-submit button {
	float: none !important;
	margin-left: 0;
}

.wppro-qa-question {
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}

.wppro-qa-reply {
	margin: 10px 0 0 16px;
	padding: 10px;
	background: #f7f7f7;
	border-radius: 4px;
}

.wppro-qa-reply-tutor {
	background: color-mix( in srgb, var( --wppro-accent-bg ) 12%, white );
}

.wppro-qa-tutor-badge {
	font-size: 0.75em;
	margin-right: 6px;
}

.wppro-lesson-qa textarea,
.wppro-lesson-qa #comment {
	width: 100%;
	font-size: 1em !important;
	box-sizing: border-box;
}

/* Broadcast messages from the tutor for the whole course, shown below
   Q&A. Taller than a single message needs, with its own scroll, so a
   handful of notices never push the rest of the sidebar out of view. */
.wppro-course-notices {
	padding: 28px 24px 60px;
	border-top: 2px solid #ccc;
	margin-top: 26px;
	min-height: 200px;
}

.wppro-course-notices h3 {
	margin: 0 0 12px;
	font-size: 1.05em;
	font-weight: 600;
}

.wppro-course-notices-list {
	background: #f0f0f0;
	border-radius: 4px;
	padding: 12px 16px;
	max-height: 480px;
	overflow-y: auto;
	box-sizing: border-box;
}

.wppro-course-notice {
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid #bbb;
}

.wppro-course-notice:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.wppro-course-notice-date {
	display: block;
	margin-top: 4px;
	font-size: 0.8em;
	color: #777;
}

/* padding-top, not margin-top: a margin here would collapse with the
   last content element's own bottom margin (the browser keeps whichever
   is larger, not the sum), which is why a tutor's own wppro-space-bottom
   class on the final paragraph had no visible effect. Padding never
   collapses, so that class now genuinely adds on top of this. */
.wppro-mark-complete-form {
	padding-top: 45px;
}

.wppro-lesson-completed {
	padding-top: 45px;
	color: var( --wppro-tick-color );
	font-weight: 600;
}

/* Quiz intro/splash screen — shown before Question 1 */

.wppro-quiz-intro {
	max-width: 560px;
	margin: 0 auto 20px;
	padding: 32px 24px;
	background: color-mix( in srgb, var( --wppro-accent-bg ) 8%, white );
	border: 1px solid color-mix( in srgb, var( --wppro-accent-bg ) 25%, white );
	border-radius: 12px;
	text-align: center;
}

.wppro-quiz-intro--final {
	background: color-mix( in srgb, #92400e 8%, white );
	border-color: color-mix( in srgb, #92400e 30%, white );
}

/* Carries the Final Test's tint through the questions themselves, not
   just the intro splash — previously it reverted to the plain default
   background the moment the quiz started, losing the "this one's
   different" signal for the rest of the attempt. */
.wppro-quiz-questions--final {
	background: color-mix( in srgb, #92400e 8%, white );
	border: 1px solid color-mix( in srgb, #92400e 30%, white );
	border-radius: 12px;
	padding: 24px;
}

.wppro-quiz-intro p {
	margin: 0 0 10px;
}

.wppro-quiz-intro-icon {
	color: var( --wppro-accent-bg );
	margin-bottom: 8px;
}

.wppro-quiz-intro--final .wppro-quiz-intro-icon {
	color: #92400e;
}

.wppro-quiz-intro-heading {
	margin: 0 0 8px;
	font-size: 22px;
}

.wppro-quiz-intro .wppro-quiz-intro-lede {
	margin: 0 0 20px;
	color: #555;
}

.wppro-quiz-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
}

.wppro-quiz-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 96px;
	padding: 12px 16px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
}

.wppro-quiz-stat-icon {
	color: var( --wppro-accent-bg );
	margin-bottom: 4px;
}

.wppro-quiz-intro--final .wppro-quiz-stat-icon {
	color: #92400e;
}

.wppro-quiz-stat-value {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
}

.wppro-quiz-stat-label {
	font-size: 12px;
	color: #777;
	margin-top: 2px;
}

.wppro-quiz-intro .wppro-quiz-attempts-used {
	font-size: 15px;
	color: #777;
}

.wppro-quiz-intro .wppro-quiz-attempt-warning {
	font-size: 14px;
	color: #555;
	margin-top: 10px;
}

.wppro-quiz-intro .wppro-quiz-start {
	margin-top: 6px;
}

.wppro-quiz-feedback-choice {
	border: none;
	padding: 0;
	margin: 14px 0 18px;
}

.wppro-quiz-feedback-choice legend {
	font-weight: 600;
	padding: 0 0 6px;
}

.wppro-quiz-feedback-choice label {
	display: block;
	margin-bottom: 6px;
	font-weight: normal;
}

.wppro-quiz-feedback-result {
	font-weight: 600;
	margin: 0 0 10px;
}

.wppro-quiz-feedback-result.wppro-correct {
	color: #2e7d32;
}

.wppro-quiz-feedback-result.wppro-incorrect {
	color: #c62828;
}

/* Quiz question form — one question box shown at a time */

.wppro-quiz-question {
	max-width: 640px;
	margin: 0 auto 20px;
	padding: 24px 28px;
	background: color-mix( in srgb, var( --wppro-accent-bg ) 8%, white );
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 );
}

.wppro-quiz-progress {
	font-size: 1em;
	color: #666;
	margin: 0 0 8px;
}

.wppro-quiz-question-text {
	margin: 0 0 14px;
	font-size: 1.25em;
	text-align: center;
}

.wppro-quiz-instruction {
	font-size: 1em;
	font-style: italic;
	color: #555;
	margin: 0 0 10px;
	text-align: center;
}

.wppro-quiz-question p {
	margin: 0 0 10px;
}

/* Higher specificity than ".wppro-quiz-question p" above (both match
   this element, a <p class="wppro-quiz-nav">) so the intended top
   margin actually wins instead of being silently zeroed out. */
.wppro-quiz-question .wppro-quiz-nav {
	margin: 20px 0 0;
	text-align: center;
}

/* Each answer option is its own boxed, full-width row — selecting it
   tints the whole row, not just the tiny control, via :has(). */
.wppro-quiz-question .wppro-quiz-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	font-size: 1.1em;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wppro-quiz-question .wppro-quiz-option:hover {
	border-color: var( --wppro-accent-bg );
}

.wppro-quiz-question .wppro-quiz-option:has( input:checked ) {
	background: color-mix( in srgb, var( --wppro-accent-bg ) 14%, white );
	border-color: var( --wppro-accent-bg );
}

.wppro-quiz-question input[type="checkbox"],
.wppro-quiz-question input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	margin: 0;
	flex-shrink: 0;
	border: 2px solid var( --wppro-accent-bg );
	position: relative;
	cursor: pointer;
}

.wppro-quiz-question input[type="checkbox"] {
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

.wppro-quiz-question input[type="radio"] {
	border-radius: 50%;
}

.wppro-quiz-question input[type="checkbox"]:checked {
	background: var( --wppro-accent-bg );
}

.wppro-quiz-question input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 2px;
	width: 8px;
	height: 15px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate( 45deg ) scale( 0 );
	animation: wppro-quiz-check-pop 0.2s ease-out forwards;
}

.wppro-quiz-question input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 13px;
	background: var( --wppro-accent-bg );
	border-radius: 50%;
	transform: translate( -50%, -50% ) scale( 0 );
	animation: wppro-quiz-radio-pop 0.2s ease-out forwards;
}

@keyframes wppro-quiz-check-pop {
	0% {
		transform: rotate( 45deg ) scale( 0 );
	}
	60% {
		transform: rotate( 45deg ) scale( 1.35 );
	}
	100% {
		transform: rotate( 45deg ) scale( 1 );
	}
}

@keyframes wppro-quiz-radio-pop {
	0% {
		transform: translate( -50%, -50% ) scale( 0 );
	}
	60% {
		transform: translate( -50%, -50% ) scale( 1.3 );
	}
	100% {
		transform: translate( -50%, -50% ) scale( 1 );
	}
}

/* Shared by the three "word bank + drop target" question types
   (hotspot, fill-blanks, matching pairs) — the bank holds loose
   chips, a drop target is an empty dashed box until a chip is
   physically moved into it by the drag engine in quiz-taking.php. */
.wppro-word-bank {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px;
	margin: 14px 0;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	min-height: 44px;
}

.wppro-word-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	background: var( --wppro-accent-bg );
	color: var( --wppro-accent-text );
	border-radius: 16px;
	font-size: 0.95em;
	line-height: normal;
	cursor: grab;
	user-select: none;
	touch-action: none;
}

.wppro-word-chip.is-dragging {
	cursor: grabbing;
	opacity: 0.85;
}

/* Once actually placed, a chip reads as plain text rather than a
   pill — the pill only ever meant "pick me up", and keeping that
   styling once it's sitting inside a small box is what caused it to
   visually fight the box's own sizing (shrinking paper-thin when an
   ancestor's line-height was 0, or inflating the whole line when an
   ancestor's line-height was large — both from a chip built to be a
   loose, free-standing pill inheriting layout meant for body text). */
.wppro-word-chip.is-placed {
	display: inline;
	padding: 0;
	background: none;
	color: #222;
	border-radius: 0;
	cursor: grab;
}

.wppro-drop-target {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 90px;
	min-height: 36px;
	padding: 4px 10px;
	border: 2px dashed #bbb;
	border-radius: 8px;
	background: #fafafa;
	line-height: normal;
}

.wppro-drop-target:has( .wppro-word-chip ) {
	border-style: solid;
	border-color: var( --wppro-accent-bg );
	background: #fff;
}

.wppro-reset-words {
	margin-top: 4px;
}

/* Label the Diagram: image with positioned boxes overlaid. */
.wppro-quiz-hotspot-canvas {
	position: relative;
	display: inline-block;
	line-height: 0;
	max-width: 100%;
	margin-bottom: 10px;
}

.wppro-quiz-hotspot-image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.wppro-quiz-hotspot-zone {
	position: absolute;
	transform: translate( -50%, -50% );
}

/* Fill in the Blanks: the sentence flows normally, with each blank
   an inline drop target sitting right in the text. */
.wppro-quiz-fillblanks-sentence {
	font-size: 1.1em;
	line-height: 2.4;
}

.wppro-quiz-fillblanks-blank {
	margin: 0 4px;
	vertical-align: middle;
}

/* Matching Pairs: fixed left column, empty target beside each term. */
.wppro-quiz-pair-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}

.wppro-quiz-pair-left {
	flex: 1 1 0;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
}

.wppro-quiz-pair-target {
	flex: 1 1 0;
	justify-content: flex-start;
}

/* Correct Sequence: a plain reorderable list, arrows only — no free
   drag, since that's notoriously unreliable on touch devices and the
   arrows already mirror the same control the tutor's own builder
   uses. */
.wppro-quiz-sequence-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	margin-bottom: 8px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
}

.wppro-quiz-sequence-text {
	flex: 1 1 auto;
}

.wppro-quiz-sequence-actions {
	display: flex;
	gap: 4px;
	flex: 0 0 auto;
}

.wppro-quiz-sequence-actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: #fff;
	color: #333;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
}

.wppro-quiz-sequence-actions button:hover {
	border-color: var( --wppro-accent-bg );
	color: var( --wppro-accent-bg );
}

.wppro-quiz-sequence-actions button .wppro-icon {
	width: 16px;
	height: 16px;
}

.wppro-quiz-report {
	max-width: 560px;
	margin: 0 auto 20px;
	padding: 28px 24px;
	background: color-mix( in srgb, var( --wppro-accent-bg ) 8%, white );
	border: 1px solid color-mix( in srgb, var( --wppro-accent-bg ) 25%, white );
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 );
	text-align: center;
}

.wppro-quiz-report ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	text-align: left;
}

.wppro-quiz-report li {
	padding: 4px 0;
}

.wppro-quiz-report li.wppro-correct {
	color: #2e7d32;
}

.wppro-quiz-report li.wppro-incorrect {
	color: #c62828;
}

.wppro-quiz-score-meta {
	margin: 6px 0 0;
	font-size: 0.95em;
	color: #555;
}

.wppro-quiz-score-feedback {
	margin: 14px 0 0;
	font-size: 0.95em;
	color: #444;
	text-align: left;
}

.wppro-quiz-retry-note {
	margin: 12px 0 0;
	font-size: 0.9em;
	font-style: italic;
	color: #555;
}

.wppro-quiz-retake,
.wppro-quiz-view-detail {
	margin: 14px 6px 0;
}

/* Full question-by-question review, revealed by "View Detailed
   Report" — each option's own row is colour-coded: green marks the
   correct answer when the student missed it, gold marks it when they
   got it right, red marks whichever wrong option they actually
   picked. Hidden by default (toggled via JS), not shown at all for a
   Final Test. The frame itself is a dark tint of the accent colour so
   the light question cards stand out against it, same light accent
   tint used for every other panel on this page. */
.wppro-quiz-detail-report {
	max-width: 640px;
	margin: 20px auto 0;
	padding: 20px;
	background: color-mix( in srgb, var( --wppro-accent-bg ) 8%, white );
	border: 1px solid color-mix( in srgb, var( --wppro-accent-bg ) 25%, white );
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 );
}

.wppro-quiz-detail-question {
	padding: 20px 24px;
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid #999;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.15 );
}

.wppro-quiz-detail-question:last-child {
	margin-bottom: 0;
}

.wppro-quiz-detail-progress {
	text-align: right;
	margin: 0 0 10px;
}

.wppro-quiz-detail-progress-badge {
	display: inline-block;
	font-size: 0.85em;
	font-weight: 600;
	color: var( --wppro-accent-text );
	background: var( --wppro-accent-bg );
	padding: 3px 10px;
	border-radius: 12px;
}

.wppro-quiz-detail-question-text {
	text-align: center;
	margin: 0 0 14px;
	font-size: 1.15em;
}

/* Deliberately muted, not red — a skipped question isn't a "failure"
   in the same sense as a wrong answer, just a gap, so it shouldn't
   carry the same alarm colour. */
.wppro-quiz-detail-not-answered {
	font-weight: normal;
	font-style: italic;
	font-size: 0.8em;
	color: #888;
}

.wppro-quiz-detail-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	margin-bottom: 8px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fafafa;
}

.wppro-quiz-detail-option-icon {
	flex-shrink: 0;
	display: flex;
}

/* The trophy is deliberately drawn larger than the row it sits in,
   so it visibly breaks out of the box, like a little prize being
   handed over rather than just another status icon. */
.wppro-quiz-detail-option-icon--trophy {
	margin: -10px 0;
}

.wppro-quiz-detail-option--green {
	background: #cdeed4;
	border-color: #74c489;
}

.wppro-quiz-detail-option--green .wppro-quiz-detail-option-icon {
	color: #2f7d3d;
}

.wppro-quiz-detail-option--gold {
	background: #ecd27e;
	border-color: #b8912a;
}

.wppro-quiz-detail-option--gold .wppro-quiz-detail-option-icon {
	color: #7a5e15;
}

.wppro-quiz-detail-option--red {
	background: #f0a3a7;
	border-color: #c73542;
}

.wppro-quiz-detail-option--red .wppro-quiz-detail-option-icon {
	color: #8f1e28;
}

/* Between the full mobile stack (900px, below) and a genuinely
   spacious desktop view, the fixed-width left sidebar starts eating
   into the centre column faster than the centre can shrink — there's
   no minimum width protecting it, so lesson text becomes cramped and
   then unreadable well before the mobile breakpoint kicks in. Taking
   the sidebar out of flow (fixed, floating over the content) instead
   of hiding it outright hands that width straight back to the centre
   and Q&A columns, while the toggle button (still visible here) can
   still bring the curriculum up as an overlay when needed — losing
   all access to the Lessons list at this width was worse than a
   floating panel. */
@media ( min-width: 901px ) and ( max-width: 1320px ) {
	.wppro-lesson-sidebar-left {
		position: fixed;
		/* Sits below the site's own sticky navbar (~80px) instead of the
		   very top of the screen — starting at 0 put the sidebar's own
		   header behind the navbar, invisible. Adjustable under Settings > General
		   > Course Page Layout, since navbar heights differ from site to site. */
		top: var( --wppro-popout-sidebar-top );
		bottom: 0;
		left: 0;
		z-index: 1000;
		max-height: none;
		background: #fff;
		box-shadow: 2px 0 16px rgba( 0, 0, 0, 0.3 );
	}

	/* Logged-in visitors additionally get WordPress's own fixed admin
	   toolbar (32px) above the site's navbar. */
	body.admin-bar .wppro-lesson-sidebar-left {
		top: calc( var( --wppro-popout-sidebar-top ) + 32px );
	}

	.wppro-lesson-page.wppro-sidebar-collapsed .wppro-lesson-sidebar-left,
	.wppro-quiz-page.wppro-sidebar-collapsed .wppro-lesson-sidebar-left {
		display: none;
	}

	/* The centre column starts at the same left edge as the overlay once the
	   sidebar is out of flow, so without its own stacking the toggle button
	   sits underneath the overlay when it's open — with no way to close it
	   again. Raising it above the overlay keeps it clickable either way. */
	.wppro-sidebar-toggle {
		position: relative;
		z-index: 1001;
	}
}

@media ( max-width: 900px ) {
	.wppro-lesson-layout {
		flex-direction: column;
	}

	.wppro-lesson-sidebar-left,
	.wppro-lesson-sidebar-right {
		/* Releases the position:fixed set by the 901-1320px rule above —
		   without this, nothing below 900px undoes it, so the sidebar
		   stayed a fixed, full-width overlay instead of flowing normally
		   in the stacked column layout. */
		position: static;
		flex-basis: auto;
		width: 100%;
		max-height: none;
		box-shadow: none;
		border: 1px solid #e5e5e5;
	}

	.wppro-lesson-center {
		width: 100%;
	}

	.wppro-lesson-body,
	.wppro-quiz-body {
		max-width: none;
	}
}

@media ( max-width: 700px ) {
	.wppro-dashboard-layout {
		flex-direction: column;
	}

	.wppro-dashboard-sidebar {
		flex-basis: auto;
		width: 100%;
	}

	.wppro-dashboard-content {
		min-width: 98%;
	}

	/* Once the sidebar stacks above and the courses grid takes the full
	   viewport width, a single remaining card would otherwise stretch
	   edge to edge — cap it so it reads as a centred card, not a full-
	   bleed block, matching the Courses page's own gutter.
	   grid-template-columns is forced to a single definite column here
	   too — auto-fill otherwise still reserves room for a second, empty
	   track at this width, leaving the one real card sitting left-
	   aligned instead of taking the full row. */
	.wppro-dashboard-courses {
		max-width: 98%;
		margin: 0 auto;
		grid-template-columns: 1fr;
	}
}

/* List view's side-by-side image+text row stops working well before
   phone widths — the fixed-width image column squeezes the text column
   thinner as the screen narrows, and on the Dashboard the sidebar eats
   into the available width even sooner. Force every card back to the
   plain stacked Grid-view layout (image on top, body below) regardless
   of which view is actually selected. */
@media ( max-width: 1050px ) {
	.wppro-courses-grid-list .wppro-course-card,
	.wppro-dashboard-courses-list .wppro-dashboard-course {
		display: flex;
		flex-direction: column;
	}

	.wppro-courses-grid-list .wppro-course-card-image,
	.wppro-dashboard-courses-list .wppro-dashboard-course-image {
		width: 100%;
		height: auto;
		margin-right: 0;
	}

	.wppro-courses-grid-list .wppro-course-card-image img,
	.wppro-dashboard-courses-list .wppro-dashboard-course-image img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	/* The list-row fixed-height/fixed-row-height body only works at the
	   wide, full-width row layout — once the card is this narrow, text
	   wraps more than those rows allow for, clipping the excerpt and
	   letting the button's own fixed track run into the wrapped title.
	   Let the body flow naturally instead, same as a real grid card. */
	.wppro-courses-grid-list .wppro-course-card-body {
		height: auto;
		display: flex;
		flex-direction: column;
		grid-template-rows: none;
		overflow: visible;
	}

	.wppro-courses-grid-list .wppro-course-card-body > div {
		padding: 0;
		overflow: visible;
	}

	/* Below this width, list view's cards are already stacked like grid
	   cards (see above) — so let the container use the same auto-fill
	   column logic as grid view instead of forcing straight to a single
	   column, giving a two-column stage before it drops to one. */
	.wppro-courses-grid-list {
		grid-template-columns: repeat( auto-fill, minmax( 340px, 1fr ) );
	}

	/* The excerpt's padding-top and lack of bottom spacing were tuned
	   for the wide, fixed-height list row above 1050px — in this
	   narrower, naturally-flowing layout they leave too big a gap
	   after the meta line and none at all before the button. */
	.wppro-courses-grid-list .wppro-course-card-excerpt {
		padding-top: 0 !important;
		margin-bottom: 16px;
	}

	/* Same reasoning as the excerpt above — the body's top padding was
	   tuned for the wide, fixed-height list row above 1050px, and adds
	   an unwanted gap between the image and the title in this narrower,
	   naturally-flowing layout. */
	.wppro-courses-grid-list .wppro-course-card-body {
		padding-top: 0;
	}

	/* Dashboard's list card has the exact same fixed-height/fixed-row
	   problem as the Courses card above once it's this narrow — same
	   fix: let the body flow naturally instead of clipping to fixed
	   row tracks, and give it real left/right padding since the wide
	   row's body relied on the generic 4px-per-child padding alone. */
	.wppro-dashboard-courses-list .wppro-dashboard-course-body {
		height: auto;
		display: flex;
		flex-direction: column;
		grid-template-rows: none;
		overflow: visible;
		padding: 0 18px 18px;
	}

	.wppro-dashboard-courses-list .wppro-dashboard-course-body > div {
		padding: 0;
		overflow: visible;
	}

	/* Same two-column stage as Courses, instead of jumping straight
	   to a single column next to the sidebar. The sidebar eats extra
	   width the Courses page doesn't have to account for, so this
	   needs a smaller minimum to keep two columns down to ~900px. */
	.wppro-dashboard-courses-list {
		grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	}
}

/* Buffering/ready overlay for a video given the wppro-video-buffering
   class (see the Video Code helper in the Lesson editor) — the wrap and
   overlay elements themselves are added by JS, not typed by hand. */
.wppro-video-buffering-wrap {
	position: relative;
}

.wppro-video-buffering-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: color-mix( in srgb, var( --wppro-accent-bg, #128b83 ) 8%, #fff );
	color: #333;
	font-size: 1.1em;
	text-align: center;
	padding: 20px;
	transition: opacity 0.2s ease;
	/* Purely informational — never blocks clicking the video's own
	   controls underneath it, even while shown. */
	pointer-events: none;
}

.wppro-video-buffering-icon {
	display: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: var( --wppro-accent-bg, #128b83 );
	color: #fff;
}

.wppro-video-buffering-icon svg {
	width: 26px;
	height: 26px;
	margin-left: 3px;
}

.wppro-video-buffering-icon-visible {
	display: flex;
}

/* With a poster image behind it, the overlay itself goes transparent
   (the poster already solves the blank-black-video problem on its own)
   and only the text gets a small dark chip, since a poster could be any
   brightness and plain text on top of it may not stay legible. */
.wppro-video-buffering-overlay.wppro-video-buffering-has-poster {
	background: transparent;
}

.wppro-video-buffering-has-poster .wppro-video-buffering-text {
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	padding: 4px 12px;
	border-radius: 4px;
}

.wppro-video-buffering-overlay.wppro-video-buffering-hidden {
	opacity: 0;
	pointer-events: none;
}

/* "Set my certificate name" message above the button (course cards and course page). */
.wppro-enrol-name-notice {
	margin: 0 0 8px;
	padding: 8px 12px;
	border-left: 4px solid #e0a800;
	background: #fff8e1;
	font-size: 0.9em;
	line-height: 1.35;
}

.wppro-enrol-name-button {
	margin: 0;
}

/* On a course card the theme's paragraph spacing would push the button out of its row. */
.wppro-course-card-enrol p {
	margin: 0;
}

.wppro-course-card-enrol p.wppro-enrol-name-notice {
	margin-bottom: 8px;
}

/* List view has a fixed-height row for the button, so the button alone is shown there. */
.wppro-courses-grid-list .wppro-enrol-name-notice {
	display: none;
}