.bb-rl-courses-grid {
	display: grid;
	gap: var(--bb-rl-space-200);
	padding-bottom: var(--bb-rl-space-400);

	&.grid {
		grid-template-columns: repeat(4, 1fr);

		.bb-rl-course-card {

			.bb-rl-course-footer {
				border-top: 1px solid var(--bb-rl-border-secondary-color);
				margin-left: calc(var(--bb-rl-space-200) * -1);
				margin-right: calc(var(--bb-rl-space-200) * -1);
				padding: 12px var(--bb-rl-space-200) 0;
			}
		}

		@media screen and (max-width: $xl) {
			grid-template-columns: repeat(3, 1fr);
		}

		@media screen and (max-width: $md) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media screen and (max-width: $sm) {
			grid-template-columns: 1fr;
		}
	}

	&.list {
		grid-template-columns: 1fr;

		.bb-rl-course-card {

			.bb-rl-course-item {
				flex-direction: row;
				border: 1px solid var(--bb-rl-border-secondary-color);
				padding: var(--bb-rl-space-200);
				gap: var(--bb-rl-space-300);

				.bb-rl-course-link {
					width: 80%;
				}
			}

			.bb-rl-course-category {
				margin-bottom: var(--bb-rl-space-100);
			}

			.bb-rl-course-excerpt {
				margin-top: var(--bb-rl-space-50);
			}

			.bb-rl-course-status {
				flex-direction: row;

				.bb-rl-course-progress {
					flex: 0 0 66.66%;
				}

				.bb-rl-course-link-wrap {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: end;
				}
			}

			.bb-rl-course-card-content {
				border: 0;
				border-radius: 0;
				padding: 0;
				flex-direction: row;
				flex: 1;
				gap: var(--bb-rl-space-200);
			}

			.bb-rl-course-body {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.bb-rl-course-meta {
				margin-top: auto;
			}

			.bb-rl-course-footer {
				flex: 0 0 33.33%;
				display: flex;
				justify-content: flex-end;
				align-items: flex-start;
				margin-top: 0;
			}

			.bb-rl-course-footer-meta {
				flex-direction: column;
				align-items: flex-end;
			}
		}

		.bb-rl-course-image {
			width: 272px;

			a {
				border-radius: var(--bb-rl-radius-lg);
			}
		}
	}
}

.bb-rl-course-card {
	position: relative;

	.bb-rl-course-item {
		display: flex;
		flex-direction: column;
		border-radius: var(--bb-rl-radius-lg);
		height: 100%;
		background-color: var(--bb-rl-background-color);
	}

	.bb-rl-course-image {
		position: relative;

		a {
			position: relative;
			display: block;
			height: 100%;
			padding-top: 160px;
			border-radius: var(--bb-rl-radius-lg) var(--bb-rl-radius-lg) 0 0;
			overflow: hidden;
			background-color: var(--bb-rl-background-tertiary-color);
		}

		img {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			object-fit: cover;
			height: 100%;
			width: 100%;
		}

		.ld-status {
			position: absolute;
			top: var(--bb-rl-space-100);
			left: var(--bb-rl-space-100);
			z-index: 3;
		}
	}

	.bb-rl-course-card-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: var(--bb-rl-space-200);
		border: 1px solid var(--bb-rl-border-secondary-color);
		border-top: 0;
		border-radius: 0 0 var(--bb-rl-radius-lg) var(--bb-rl-radius-lg);
	}

	.bb-rl-course-body {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.bb-rl-course-title {

		@include bb-rl-base-heading;
		margin: 0 0 var(--bb-rl-space-50);

		a {
			color: var(--bb-rl-text-color);

			&:hover {
				border-bottom: 1px solid var(--bb-rl-text-color);
				text-decoration: none;
			}
		}
	}

	.bb-rl-course-excerpt {

		@include bb-rl-label-heading;
		color: var(--bb-rl-text-tertiary-color);
		margin: var(--bb-rl-space-200) 0 0;
	}

	.bb-rl-course-footer-meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--bb-rl-space-100);
	}

	.bb-rl-course-meta {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.bb-rl-course-category {

		@include bb-rl-label-heading-bolder;
		color: var(--bb-rl-text-color);
		margin: 0 0 var(--bb-rl-space-200);

		+ .bb-rl-course-excerpt {
			margin-top: 0;
		}
	}

	.bb-rl-course-status {
		display: flex;
		flex-direction: column;
		gap: var(--bb-rl-space-200);
		margin-top: auto;
	}

	.bb-rl-course-link {
		width: 100%;
		display: inline-flex;
		align-items: center;
		gap: var(--bb-rl-space-50);
		white-space: nowrap;
	}

	.bb-rl-course-footer {
		margin-top: auto;

		.bb-rl-price {

			@include bb-rl-base-heading-xl;
			line-height: var(--bb-rl-base-line);
			color: var(--bb-rl-text-color);
		}
	}

	.bb-rl-course-author {
		display: flex;
		align-items: center;
		gap: var(--bb-rl-space-50);
		margin: var(--bb-rl-space-200) 0;
		flex-flow: wrap;

		h4 {

			@include bb-rl-base-heading;
			color: var(--bb-rl-text-color);
			margin: 0 0 var(--bb-rl-space-100);
			width: 100%;
		}

		.bb-rl-author-avatar img {
			width: 24px;
			height: auto;
			border-radius: 50%;
		}

		.bb-rl-author-name {

			@include bb-rl-label-heading-bolder;
			color: var(--bb-rl-text-secondary-color);

			a {
				color: var(--bb-rl-text-color);
			}
		}
	}

	.bb-rl-instructor-item {
		display: flex;
		align-items: center;
		gap: var(--bb-rl-space-100);
		flex: 0 0 48%;
	}
}

.bb-rl-course-card {

	.bb-rl-course-card-popup {
		position: absolute;
		z-index: 99;
		top: var(--bb-rl-space-300);
		width: 296px;
		background-color: var(--bb-rl-background-color);
		border-radius: var(--bb-rl-radius-base);
		box-shadow: 0 16px 16.6px 0 rgba(0, 0, 0, 0.38);
		padding: var(--bb-rl-space-200);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

		// Default positioning (right side)
		&.bb-rl-popup-right {
			left: calc(100% - var(--bb-rl-space-50));
		}

		// Left side positioning
		&.bb-rl-popup-left {
			right: calc(100% - var(--bb-rl-space-50));
		}

		// Top positioning (for list view)
		&.bb-rl-popup-top {
			top: unset;
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
		}

		// Bottom positioning (for list view)
		&.bb-rl-popup-bottom {
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
		}

		// Fallback for when no positioning class is applied
		&:not(.bb-rl-popup-left):not(.bb-rl-popup-right):not(.bb-rl-popup-top):not(.bb-rl-popup-bottom) {
			right: 0;
		}

		// Ensure popup doesn't overflow on small screens
		@media screen and (max-width: 768px) {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: calc(100vw - var(--bb-rl-space-400));
			max-width: 320px;

			&.bb-rl-popup-left,
			&.bb-rl-popup-right,
			&.bb-rl-popup-top,
			&.bb-rl-popup-bottom {
				left: 50%;
				right: auto;
				top: 50%;
				bottom: auto;
				transform: translate(-50%, -50%);
			}

			// Hide arrows on mobile
			&::before {
				display: none;
			}
		}

		&.bb-rl-popup-right::before {
			content: "";
			position: absolute;
			top: var(--bb-rl-space-400);
			left: -8px;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-top: 8px solid transparent;
			border-bottom: 8px solid transparent;
			border-right: 8px solid var(--bb-rl-background-color);
			filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1));
		}

		&.bb-rl-popup-left::before {
			content: "";
			position: absolute;
			top: var(--bb-rl-space-400);
			right: -8px;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-top: 8px solid transparent;
			border-bottom: 8px solid transparent;
			border-left: 8px solid var(--bb-rl-background-color);
			filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1));
		}

		// Arrow for top positioning
		&.bb-rl-popup-top::before {
			content: "";
			position: absolute;
			bottom: -8px;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-top: 8px solid var(--bb-rl-background-color);
			filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
		}

		// Arrow for bottom positioning
		&.bb-rl-popup-bottom::before {
			content: "";
			position: absolute;
			top: -8px;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid var(--bb-rl-background-color);
			filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
		}
	}

	&.bb-rl-card-popup-active {

		.bb-rl-course-card-popup {
			opacity: 1;
			visibility: visible;
		}
	}
}

.bb-rl-course-card-popup {

	.bb-rl-course-popup-caption {

		@include bb-rl-label-heading;
		color: var(--bb-rl-text-tertiary-color);
		margin: var(--bb-rl-space-100) 0 var(--bb-rl-space-200);
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.bb-rl-course-popup-actions {
		margin-top: var(--bb-rl-space-300);

		.bb-rl-course-link {
			width: 100%;
			gap: var(--bb-rl-space-50);
		}
	}

	.bb-rl-course-timestamp {

		@include bb-rl-label-heading-bolder;
		color: var(--bb-rl-text-positive-primary-color);
	}

	.bb-rl-course-popup-meta {
		display: flex;
		gap: var(--bb-rl-space-100);
		margin: var(--bb-rl-space-100) 0 0;
	}

	.bb-rl-course-meta-tag {

		@include bb-rl-label-heading;
	}
}

.bb-rl-lms-inner-block {
	max-width: 864px;
	margin: 0 auto;
	padding: var(--bb-rl-space-400) var(--bb-rl-space-400);

	&.bb-rl-lesson-block,
	&.bb-rl-topic-block {
		padding-bottom: 0;
	}

	.bb-rl-entry-header {
		margin: 0 0 var(--bb-rl-space-300);
	}

	.bb-rl-heading {
		margin: 0 0 var(--bb-rl-space-200);

		.bb-rl-lms-inner-count {
			margin-bottom: var(--bb-rl-space-50);
		}
	}

	.bb-rl-entry-title {

		@include bb-rl-base-heading-2xl;
		color: var(--bb-rl-text-color);
	}

	.bb-rl-entry-content {

		@include bb-rl-label-heading-md-thin;
		color: var(--bb-rl-text-secondary-color);
	}

	@media screen and (max-width: $md) {
		padding-left: var(--bb-rl-space-200);
		padding-right: var(--bb-rl-space-200);
	}
}

.bb-rl-course-content-comments {
	padding-bottom: var(--bb-rl-space-300);
}

.bb-rl-comments-area,
.bb-rl-course-content-comments {

	.comments-title {

		@include bb-rl-base-heading;
		color: var(--bb-rl-text-color);
		margin: 0 0 var(--bb-rl-space-200);
	}

	.logged-in-as {
		margin-bottom: var(--bb-rl-space-300);
	}

	.comment-notes {

		@include bb-rl-label-heading-md-thin;
		margin-bottom: var(--bb-rl-space-100);
	}

	.comment-form-comment {
		margin-bottom: var(--bb-rl-space-100);

		textarea {
			width: 100%;
			max-height: 100px;
		}

		label {

			@include bb-rl-label-heading;
			display: block;
			width: 100%;
			margin: 0 0 var(--bb-rl-space-50);
		}
	}

	.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		margin-bottom: var(--bb-rl-space-100);

		label {

			@include bb-rl-label-heading;
			display: block;
			width: 100%;
			margin: 0 0 var(--bb-rl-space-50);
		}

		input {
			width: 100%;
		}
	}

	.comment-form-cookies-consent {

		label {

			@include bb-rl-label-heading;
		}
	}

	.form-submit {
		margin-top: var(--bb-rl-space-200);

		#cancel-comment-reply-link {

			@include bb-rl-button;
			@include bb-rl-button-secondary-fill;
			@include bb-rl-button--small;
			margin-right: var(--bb-rl-space-100);
		}

		input.submit {

			@include bb-rl-button;
			@include bb-rl-button--brand-fill;
			@include bb-rl-button--small;
		}
	}

	.comment-respond {
		margin: var(--bb-rl-space-200) 0 var(--bb-rl-space-300);
		background-color: var(--bb-rl-background-color);
		padding: var(--bb-rl-space-200);
		border-radius: var(--bb-rl-radius-lg);
		border: 1px solid var(--bb-rl-border-secondary-color);

		.comment-reply-title {

			@include bb-rl-label-heading-md;
			color: var(--bb-rl-text-color);
			margin: 0 0 var(--bb-rl-space-100);

			small {
				padding-left: var(--bb-rl-space-50);

				a {

					@include bb-rl-button--tertiary-link;
					@include bb-rl-label-heading-md-thin;
				}
			}
		}
	}

	.comment-list,
	.commentlist {
		list-style: none;
		padding: 0;
		margin: 0;

		ol.children {
			list-style: none;
			margin-top: var(--bb-rl-space-200);
		}

		li {
			margin-bottom: var(--bb-rl-space-300);

			&:last-child {
				margin-bottom: 0;
			}
		}

		.comment-body,
		.course-comment {
			display: flex;
			align-items: flex-start;
			background-color: var(--bb-rl-background-color);
			padding: var(--bb-rl-space-200);
			border-radius: var(--bb-rl-radius-lg);
			border: 1px solid var(--bb-rl-border-secondary-color);

			.comment-author.vcard {
				flex: 0 0 48px;
				max-width: 48px;
				margin-right: var(--bb-rl-space-200);
			}

			.fn {
				display: block;
				font-style: normal;

				a {

					@include bb-rl-label-heading-md;
					color: var(--bb-rl-text-color);
				}
			}

			.comment-date {

				@include bb-rl-label-heading;
				color: var(--bb-rl-text-tertiary-color);
			}

			.comment-text,
			.comment-content {

				@include bb-rl-label-heading-md-thin;
				margin: var(--bb-rl-space-200) 0;
			}

			.comment-awaiting-moderation {

				@include bb-rl-label-heading-md-thin;
				color: var(--bb-rl-text-tertiary-color);
			}

			.comment-footer a,
			.comment-reply-link,
			.comment-edit-link {

				@include bb-rl-button;
				@include bb-rl-button--secondary-outline;
				@include bb-rl-button--small;
			}
		}
	}

	.comment-author {

		@include bb-rl-label-heading-md;
		display: flex;
		align-items: center;

		.avatar {
			width: 48px;
			height: 48px;
			border-radius: 50%;
			margin-right: var(--bb-rl-space-100);
		}

		.name {
			color: var(--bb-rl-text-color);
		}

		.says {
			color: var(--bb-rl-text-tertiary-color);
			padding-left: var(--bb-rl-space-50);
		}
	}

	.comments-area {

		> .comment-navigation {

			a {

				@include bb-rl-button--tertiary-link;
				display: inline-flex;
				font-size: var(--bb-rl-font-size-sm);
			}

			+ .comment-list {
				margin-top: var(--bb-rl-space-200);
			}
		}

		.comment-list + .comment-navigation {
			margin-top: var(--bb-rl-space-200);
		}
	}
}

.bb-rl-comments-area,
.bb-rl-course-content-comments {

	> h3 {

		@include bb-rl-base-heading;
		margin-bottom: var(--bb-rl-space-200);

		+ .navigation {
			display: none;
		}
	}

	.commentlist {

		.comment-body {
			flex-direction: column;
			width: 100%;

			.comment-author.vcard {
				flex: 1;
				max-width: none;
			}

			footer.comment-meta {
				display: flex;
				align-items: center;
				width: 100%;
				justify-content: space-between;
				flex-flow: wrap;

				.comment-metadata {
					display: inline-flex;
					align-items: center;
					gap: var(--bb-rl-space-100);

					@include bb-rl-label-heading-md;

					> a {
						color: var(--bb-rl-text-tertiary-color);
					}

					.comment-edit-link {

						@include bb-rl-button--tertiary-link;
					}
				}
			}
		}

		.children {
			list-style: none;
			margin-top: var(--bb-rl-space-200);
		}
	}

	.comment-respond {

		.logged-in-as {

			@include bb-rl-label-heading-md-thin;

			> a {

				@include bb-rl-button--tertiary-link;
				border-bottom: 0;
			}
		}
	}

	.comment-list {

		.course-comment {
			flex-direction: column;
			width: 100%;

			.course-comment-info {
				display: flex;
				align-items: center;
				width: 100%;
				justify-content: flex-start;
			}

			.course-comment-author.vcard {

				@include bb-rl-label-heading-md;
				display: inline-flex;
				align-items: center;
				gap: var(--bb-rl-space-50);
			}

			.course-comment-time {

				a {

					@include bb-rl-button--tertiary-link;
				}
			}

			.course-comment-avatar-wrap {

				img {
					width: 48px;
					height: 48px;
					border-radius: 50%;
					margin-right: var(--bb-rl-space-100);
				}
			}

			.course-comment-content {

				@include bb-rl-label-heading-md-thin;
				margin: var(--bb-rl-space-200) 0 0;

				.course-comment-edit-reply-wrap {
					margin-top: var(--bb-rl-space-200);
				}
			}
		}
	}
}
