/**
 * TBB Quiz Design
 * -----------------------------------------------------------------------------
 * Visual layer for single course pages that are actually quizzes.
 *
 * SCOPE: every rule is prefixed with `body.tbb-quiz-design`, a class added only
 * on single course pages in TBB_Quiz_Relabel::QUIZ_CATEGORIES. Real courses and
 * every other page on the site are untouched by this file.
 *
 * The `body.` prefix also buys one point of specificity over Tutor's own
 * `.tutor-*` rules; combined with a late enqueue (priority 100) that is enough
 * to win without a single !important.
 *
 * Markup targeted here is Tutor LMS 4.0.4 core templates:
 *   templates/single-course.php
 *   templates/single/course/lead-info.php
 *   templates/single/course/course-topics.php
 *   templates/single/course/course-entry-box.php
 *   templates/single/course/enrolled/nav.php
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
   1. TOKENS
   Lab-notebook palette. Neutrals carry a green-teal bias so nothing reads as
   default grey. Light only by design: the tutorstarter theme has no dark mode,
   so a dark variant here would only ever appear half-applied.
   ========================================================================== */
body.tbb-quiz-design {
	--tbb-paper: #f2f5f1;
	--tbb-surface: #ffffff;
	--tbb-surface-2: #e9eee8;
	--tbb-line: #d5ded6;
	--tbb-line-strong: #bfccc1;
	--tbb-ink: #0c1518;
	--tbb-ink-2: #39494d;
	--tbb-muted: #6b7e82;

	--tbb-teal: #0d6e78;
	--tbb-teal-dark: #095057;
	--tbb-teal-soft: rgba(13, 110, 120, 0.09);

	--tbb-hl: #c7e33f;
	--tbb-hl-deep: #afcc2a;
	--tbb-hl-ink: #141c05;

	--tbb-done: #158a5d;
	--tbb-done-soft: rgba(21, 138, 93, 0.12);
	--tbb-alert: #c8404e;

	--tbb-grid: rgba(12, 21, 24, 0.055);
	--tbb-radius: 12px;
	--tbb-shadow: 0 1px 2px rgba(12, 21, 24, 0.05), 0 12px 28px -18px rgba(12, 21, 24, 0.35);
	--tbb-shadow-lift: 0 2px 4px rgba(12, 21, 24, 0.06), 0 18px 40px -20px rgba(12, 21, 24, 0.4);

	--tbb-display: "Archivo", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
	--tbb-mono: "IBM Plex Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;

	background: var(--tbb-paper);
	color: var(--tbb-ink);
}

/* Body face is inherited from the theme Customizer on purpose, so the quiz
   pages still read as part of the same site. Only display + data faces are
   introduced here. */

/* =============================================================================
   2. PAGE SHELL
   ========================================================================== */
/* Space above the header card.
   tutorstarter's applicable rule is `.single-courses .site-content{padding:40px 0}`.
   (Its `.site-content{margin-top:60px}` is scoped to `body.woocommerce-page`
   and never fires here — an earlier version of this file misread that and
   ADDED a 32px margin, making the gap worse. Do not reintroduce it.)

   The single 24px gap is set as padding on .tutor-full-width-course-top rather
   than on .site-content. That is deliberate: zeroing .site-content's padding
   alone removes the barrier that was preventing margin collapse, letting a
   child's top margin escape the wrapper and push the whole block down. Padding
   on the inner wrapper re-establishes the barrier and owns the spacing. */
body.tbb-quiz-design .site-content {
	margin-top: 0;
	padding-top: 0;
}

body.tbb-quiz-design .tutor-full-width-course-top {
	margin-top: 0;
	padding-top: 24px;
	background: var(--tbb-paper);
}

body.tbb-quiz-design .tutor-course-details-page {
	padding-top: 0;
	padding-bottom: 56px;
}

/* Align the two columns at the top of the row.
   Tutor hangs its own `tutor-mt-*` utility on the content column (and a smaller
   one on the sidebar), so the tab card started ~32px lower than the Progress
   card and the two read as unaligned. Zeroing the offset on BOTH sides — rather
   than pulling only the tab card up by a hand-measured amount — means the row
   top is the single thing that decides where they start, so a Tutor update that
   changes either utility class cannot reintroduce the mismatch.

   Every selector hangs off the same `.tutor-course-details-page > .tutor-row`
   path on purpose: if a Tutor update changes that structure, all four rules stop
   matching together and the layout falls back to stock Tutor, rather than half
   applying and leaving the stacked layout with no separation.

   `row-gap` restores that stacked separation without a media query, and so
   without needing to know which breakpoint (lg or xl) Tutor splits these columns
   at: a gap between flex LINES only exists once the columns wrap, and side by
   side they are a single line. padding-top is zeroed alongside margin-top
   because Tutor's grid columns carry horizontal gutters only — no vertical
   padding is being discarded here. */
body.tbb-quiz-design .tutor-course-details-page > .tutor-row {
	row-gap: 24px;
}

body.tbb-quiz-design .tutor-course-details-page > .tutor-row > [class*="tutor-col"],
body.tbb-quiz-design .tutor-course-details-page > .tutor-row .tutor-course-details-tab,
body.tbb-quiz-design .tutor-course-details-page > .tutor-row .tutor-single-course-sidebar {
	margin-top: 0;
	padding-top: 0;
}

/* Featured image on the SINGLE course page only. Tutor prints it
   unconditionally in single-course.php with no filter to skip it, so it is
   hidden here.

   Scope note: this rule can only ever match where the tbb-quiz-design body
   class is present, i.e. single course pages in a quiz category. Listing and
   archive card thumbnails are NOT affected and must keep working.

   The file is still fetched by the browser even though it is hidden. Do NOT
   "fix" that by deleting the course's featured image — the same image feeds the
   listing cards, og:image/twitter:image and the schema.org course image. To kill
   the fetch, filter `tutor_course_thumb_url` to a 1x1 data URI on single quiz
   pages; that filter only affects the rendered <img>, not the social/SEO tags,
   which read get_tutor_course_thumbnail_src() instead. */
body.tbb-quiz-design .tutor-course-thumbnail {
	display: none;
}

/* =============================================================================
   3. HERO — lab-notebook graph paper behind the title block
   lead-info.php > header.tutor-course-details-header
   ========================================================================== */
/* The graph paper and its fade are BOTH background layers, not an overlay.
   Background layers always paint beneath content, so the fade can never wash
   out text no matter how the children are laid out.

   Do NOT reimplement the fade as an absolutely-positioned ::after. That was the
   original approach and it required a `.tutor-course-details-header > *`
   rule to lift content above it — which silently stops working when a wrapper
   is set to `display: contents` (as the mobile block does), because a
   contents-box generates no box for z-index to apply to. The result was Exam,
   Subject and Wishlist rendering under a white wash on mobile. */
body.tbb-quiz-design .tutor-course-details-header {
	position: relative;
	margin-bottom: 28px;
	padding: 26px 34px 28px;
	border: 1px solid var(--tbb-line);
	border-radius: 16px;
	background-color: var(--tbb-surface);
	background-image:
		/* Layer 1 (topmost): fades the grid out toward the bottom. */
		linear-gradient(to bottom, transparent 30%, var(--tbb-surface) 100%),
		/* Layers 2-3: the grid itself. */
		linear-gradient(var(--tbb-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--tbb-grid) 1px, transparent 1px);
	background-size: auto, 26px 26px, 26px 26px;
	background-repeat: no-repeat, repeat, repeat;
	box-shadow: var(--tbb-shadow);
	overflow: hidden;
}

body.tbb-quiz-design .tutor-course-details-title {
	font-family: var(--tbb-display);
	font-stretch: 92%;
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.14;
	letter-spacing: -0.005em;
	text-wrap: balance;
	color: var(--tbb-ink);
	max-width: 24ch;
}

/* Author + categories row */
body.tbb-quiz-design .tutor-course-details-info {
	font-size: 14.5px;
	color: var(--tbb-muted);
}

body.tbb-quiz-design .tutor-course-details-info a {
	color: var(--tbb-teal);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

body.tbb-quiz-design .tutor-course-details-info a:hover {
	border-bottom-color: var(--tbb-teal);
}

/* Exam (category) links as pills, matching the Subject chips below them.
   lead-info.php nests the author link inside <span class="tutor-mr-16"> and
   gives the avatar link .tutor-d-flex, so `> div > a` excluding that class
   isolates the category links — the author and avatar keep their own styling
   whether or not "show author" is enabled.
   Specificity here (0,3,3) deliberately beats the plain link rule above. */
body.tbb-quiz-design .tutor-course-details-info > div > a:not(.tutor-d-flex) {
	display: inline-block;
	vertical-align: middle;
	padding: 4px 12px;
	border: 1px solid var(--tbb-line-strong);
	border-radius: 999px;
	font-family: var(--tbb-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tbb-ink-2);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

body.tbb-quiz-design .tutor-course-details-info > div > a:not(.tutor-d-flex):hover {
	color: var(--tbb-teal);
	border-color: var(--tbb-teal);
	background: var(--tbb-teal-soft);
}

/* Wishlist / Share */
body.tbb-quiz-design .tutor-course-details-actions .tutor-btn-ghost {
	border: 1px solid var(--tbb-line-strong);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 14px;
	color: var(--tbb-ink-2);
	background: var(--tbb-surface);
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

body.tbb-quiz-design .tutor-course-details-actions .tutor-btn-ghost:hover {
	color: var(--tbb-teal);
	border-color: var(--tbb-teal);
	background: var(--tbb-teal-soft);
}

/* =============================================================================
   4a. TAG ROW — injected by TBB_Quiz_Design::build_tag_row()
   Sits directly under the categories line so both read as one meta block.
   ========================================================================== */
body.tbb-quiz-design .tbb-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
}

body.tbb-quiz-design .tbb-tags-label {
	margin-right: 1px;
	font-size: 14.5px;
	color: var(--tbb-muted);
}

body.tbb-quiz-design .tbb-tag {
	padding: 4px 12px;
	border: 1px solid var(--tbb-line-strong);
	border-radius: 999px;
	font-family: var(--tbb-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tbb-ink-2);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

body.tbb-quiz-design a.tbb-tag:hover {
	color: var(--tbb-teal);
	border-color: var(--tbb-teal);
	background: var(--tbb-teal-soft);
}

/* =============================================================================
   5. TABS — enrolled/nav.php > nav.tutor-nav
   ========================================================================== */
body.tbb-quiz-design .tutor-course-details-tab {
	border: 1px solid var(--tbb-line);
	border-radius: 14px;
	background: var(--tbb-surface);
	box-shadow: var(--tbb-shadow);
	overflow: hidden;
}

/* Exactly one horizontal rule under the tab row. The sticky wrapper Tutor puts
   around the nav carries its own border; drop it so it cannot double up. */
body.tbb-quiz-design .tutor-course-details-tab .tutor-is-sticky {
	border-bottom: 0;
	background: transparent;
}

body.tbb-quiz-design .tutor-course-details-tab .tutor-nav {
	gap: 4px;
	padding: 6px 6px 0;
	margin: 0;
	border-bottom: 1px solid var(--tbb-line);
	background: var(--tbb-surface);
}

/* The active indicator is Tutor's own border-bottom, recoloured — NOT a second
   bar drawn with ::after. Adding one stacked it on top of Tutor's and read as
   a double underline. */
body.tbb-quiz-design .tutor-course-details-tab .tutor-nav-link {
	position: relative;
	padding: 13px 18px 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	border-radius: 8px 8px 0 0;
	font-family: var(--tbb-display);
	font-stretch: 92%;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: 0.015em;
	color: var(--tbb-muted);
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

body.tbb-quiz-design .tutor-course-details-tab .tutor-nav-link:hover {
	color: var(--tbb-ink);
	background: var(--tbb-teal-soft);
}

body.tbb-quiz-design .tutor-course-details-tab .tutor-nav-link.is-active {
	color: var(--tbb-teal);
	background: transparent;
	border-bottom-color: var(--tbb-teal);
}

body.tbb-quiz-design .tutor-course-details-tab .tutor-tab {
	padding: 26px;
}

/* =============================================================================
   6. CURRICULUM — course-topics.php
   Topic accordions become part lanes; content rows get OMR answer bubbles.
   ========================================================================== */
/* The "Course Content" heading is hidden rather than renamed, so Tutor keeps
   its own string and nothing needs keeping in sync. The tab already says
   "Quiz Info", which makes the heading redundant. */
body.tbb-quiz-design .tutor-course-content-title {
	display: none;
}

body.tbb-quiz-design .tutor-accordion {
	border: 1px solid var(--tbb-line);
	border-radius: var(--tbb-radius);
	overflow: hidden;
	background: var(--tbb-surface);
}

body.tbb-quiz-design .tutor-accordion-item {
	border: 0;
	border-top: 1px solid var(--tbb-line);
}

body.tbb-quiz-design .tutor-accordion-item:first-child {
	border-top: 0;
}

body.tbb-quiz-design .tutor-accordion-item-header {
	padding: 15px 18px;
	background: var(--tbb-surface-2);
	font-family: var(--tbb-display);
	font-stretch: 92%;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--tbb-ink);
	transition: background 0.15s ease;
}

body.tbb-quiz-design .tutor-accordion-item-header:hover {
	background: var(--tbb-teal-soft);
}

body.tbb-quiz-design .tutor-accordion-item-body {
	background: var(--tbb-surface);
}

body.tbb-quiz-design .tutor-course-content-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.tbb-quiz-design .tutor-course-content-list-item {
	position: relative;
	gap: 16px;
	padding: 14px 18px;
	border-top: 1px solid var(--tbb-line);
	transition: background 0.15s ease;
}

body.tbb-quiz-design .tutor-course-content-list-item:first-child {
	border-top: 0;
}

body.tbb-quiz-design .tutor-course-content-list-item:hover {
	background: var(--tbb-teal-soft);
}

/* Hover rail */
body.tbb-quiz-design .tutor-course-content-list-item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: transparent;
	transition: background 0.15s ease;
}

body.tbb-quiz-design .tutor-course-content-list-item:hover::before {
	background: var(--tbb-teal);
}

/* The OMR answer bubble: Tutor's own content-type icon, recast as a bubble. */
body.tbb-quiz-design .tutor-course-content-list-item-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	margin-top: 0;
	border: 2px solid var(--tbb-line-strong);
	border-radius: 50%;
	font-size: 15px;
	color: var(--tbb-muted);
	background: var(--tbb-surface);
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

body.tbb-quiz-design .tutor-course-content-list-item:hover .tutor-course-content-list-item-icon {
	border-color: var(--tbb-teal);
	color: var(--tbb-teal);
}

body.tbb-quiz-design .tutor-course-content-list-item-title {
	font-family: var(--tbb-display);
	font-stretch: 92%;
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.35;
	color: var(--tbb-ink);
}

body.tbb-quiz-design .tutor-course-content-list-item-title a {
	color: inherit;
	text-decoration: none;
}

body.tbb-quiz-design .tutor-course-content-list-item-title a:hover {
	color: var(--tbb-teal);
}

body.tbb-quiz-design .tutor-course-content-list-item-duration,
body.tbb-quiz-design .tutor-course-content-list-item-status {
	font-family: var(--tbb-mono);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	color: var(--tbb-muted);
}

/* Locked rows read as unavailable, not merely quiet. */
body.tbb-quiz-design .tutor-course-content-list-item-status.tutor-icon-lock-line {
	color: var(--tbb-line-strong);
}

/* =============================================================================
   7. SIDEBAR — course-entry-box.php > .tutor-sidebar-card
   ========================================================================== */
/* overflow:hidden clips child backgrounds to the rounded corners. Without it a
   square-cornered child background (the theme paints one on the card interior)
   paints over the top corners and the border appears to stop short there.
   Safe here: nothing in this card overflows its bounds — no dropdowns, no
   tooltips. Do not copy it onto cards that have any. */
body.tbb-quiz-design .tutor-single-course-sidebar .tutor-card,
body.tbb-quiz-design .tutor-sidebar-card {
	border: 1px solid var(--tbb-line);
	border-radius: 14px;
	background: var(--tbb-surface);
	box-shadow: var(--tbb-shadow);
	overflow: hidden;
}

body.tbb-quiz-design .tutor-sidebar-card .tutor-card-body {
	padding: 22px;
}

body.tbb-quiz-design .tutor-sidebar-card .tutor-card-footer {
	padding: 18px 22px;
	border-top: 1px solid var(--tbb-line);
	background: var(--tbb-surface-2);
	border-radius: 0 0 14px 14px;
}

body.tbb-quiz-design .tutor-sidebar-card .tutor-card-footer .tutor-ul li {
	font-size: 14px;
	color: var(--tbb-ink-2);
}

/* --- Progress ------------------------------------------------------------ */
body.tbb-quiz-design .tutor-course-progress-wrapper h3 {
	font-family: var(--tbb-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--tbb-muted);
}

body.tbb-quiz-design .list-item-progress .progress-steps,
body.tbb-quiz-design .list-item-progress .progress-percentage {
	font-family: var(--tbb-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--tbb-ink-2);
}

body.tbb-quiz-design .list-item-progress .progress-percentage {
	font-weight: 600;
	color: var(--tbb-done);
}

/* Tutor already exposes --tutor-progress-value, so the bar only needs skinning. */
body.tbb-quiz-design .tutor-progress-bar {
	height: 9px;
	border-radius: 4px;
	background: var(--tbb-surface-2);
	overflow: hidden;
}

body.tbb-quiz-design .tutor-progress-bar .tutor-progress-value {
	display: block;
	width: var(--tutor-progress-value, 0%);
	height: 100%;
	border-radius: 4px;
	background: var(--tbb-done);
	transition: width 0.6s cubic-bezier(0.3, 0.8, 0.3, 1);
}

/* --- Enrolled-on line ---------------------------------------------------- */
body.tbb-quiz-design .tutor-enrolled-info-text {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--tbb-ink-2);
}

body.tbb-quiz-design .tutor-enrolled-info-date {
	font-family: var(--tbb-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--tbb-done);
	white-space: nowrap;
}

/* --- Price --------------------------------------------------------------- */
body.tbb-quiz-design .tutor-course-single-pricing span {
	font-family: var(--tbb-display);
	font-stretch: 92%;
	font-size: 32px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--tbb-ink);
}

/* =============================================================================
   8. BUTTONS
   Highlighter chartreuse is the single loud colour on the page, and it is
   spent only on the primary action.
   ========================================================================== */
body.tbb-quiz-design .tutor-btn-primary {
	border: 0;
	border-radius: 10px;
	padding: 13px 26px;
	font-family: var(--tbb-display);
	font-stretch: 92%;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tbb-hl-ink);
	background: var(--tbb-hl);
	box-shadow: 0 2px 0 var(--tbb-hl-deep);
	transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body.tbb-quiz-design .tutor-btn-primary:hover,
body.tbb-quiz-design .tutor-btn-primary:focus {
	color: var(--tbb-hl-ink);
	background: var(--tbb-hl);
	transform: translateY(-2px);
	box-shadow: 0 4px 0 var(--tbb-hl-deep), 0 12px 22px -12px rgba(12, 21, 24, 0.5);
}

body.tbb-quiz-design .tutor-btn-outline-primary {
	border: 1.5px solid var(--tbb-line-strong);
	border-radius: 10px;
	padding: 12px 24px;
	font-family: var(--tbb-display);
	font-stretch: 92%;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--tbb-ink);
	background: transparent;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

body.tbb-quiz-design .tutor-btn-outline-primary:hover,
body.tbb-quiz-design .tutor-btn-outline-primary:focus {
	color: var(--tbb-teal);
	border-color: var(--tbb-teal);
	background: var(--tbb-teal-soft);
}

/* Keyboard focus stays visible on every control. */
body.tbb-quiz-design a:focus-visible,
body.tbb-quiz-design button:focus-visible,
body.tbb-quiz-design .tutor-nav-link:focus-visible {
	outline: 2.5px solid var(--tbb-teal);
	outline-offset: 3px;
	border-radius: 4px;
}

/* =============================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
	body.tbb-quiz-design .tutor-course-details-header {
		padding: 24px 20px 20px;
	}

	body.tbb-quiz-design .tutor-course-details-tab .tutor-tab {
		padding: 20px 16px;
	}
}

/* Mobile header order: title -> categories -> tags -> wishlist/share.
   Wishlist/Share sit in .tutor-course-details-top > .tutor-row > .tutor-col-auto,
   while the injected tag row is a SIBLING of .tutor-course-details-top. Being in
   different parents, `order` alone cannot interleave them.
   `display: contents` dissolves those two wrappers so the columns and the tag
   row all become flex children of the header and can be ordered freely. Both
   wrappers are plain layout divs, so nothing semantic is lost.
   Desktop is untouched — there the actions belong on the right of the row. */
@media (max-width: 767px) {
	body.tbb-quiz-design .tutor-course-details-header {
		display: flex;
		flex-direction: column;
	}

	body.tbb-quiz-design .tutor-course-details-top,
	body.tbb-quiz-design .tutor-course-details-top .tutor-row {
		display: contents;
	}

	/* Tutor's .tutor-col* carry gutter padding that .tutor-row normally cancels
	   with a negative margin. Dissolving the row removed the compensation but
	   left the padding, indenting Exam / Subject / Wishlist relative to the
	   title. Zero it so everything shares the title's left edge. */
	body.tbb-quiz-design .tutor-course-details-top .tutor-col,
	body.tbb-quiz-design .tutor-course-details-top .tutor-col-auto {
		padding-right: 0;
		padding-left: 0;
	}

	/* Same reason: the 16px gap under the title comes from Tutor's
	   `tutor-mt-16` class on .tutor-course-details-top, and a contents-box's
	   own margin is discarded. Reapply it to the column that now sits directly
	   under the title, so mobile matches the desktop rhythm. */
	body.tbb-quiz-design .tutor-course-details-top .tutor-col {
		margin-top: 16px;
	}

	body.tbb-quiz-design .tutor-course-details-ratings {
		order: 1;
	}

	body.tbb-quiz-design .tutor-course-details-title {
		order: 2;
	}

	body.tbb-quiz-design .tutor-course-details-top .tutor-col {
		order: 3;
	}

	body.tbb-quiz-design .tbb-tags {
		order: 4;
	}

	body.tbb-quiz-design .tutor-course-details-top .tutor-col-auto {
		order: 5;
	}

	/* Left-align the buttons now that they own a full-width row. */
	body.tbb-quiz-design .tutor-course-details-actions {
		justify-content: flex-start;
		margin-top: 16px;
	}
}

@media (max-width: 575px) {
	body.tbb-quiz-design .tutor-course-content-list-item {
		padding: 12px 14px;
	}

	body.tbb-quiz-design .tutor-course-content-list-item-icon {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}
}

/* =============================================================================
   10. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	body.tbb-quiz-design *,
	body.tbb-quiz-design *::before,
	body.tbb-quiz-design *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}