// Category layout
@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.no-padding-course-block .thim-course-block-3 {
	padding-top: 0;
}
.thim-course-block-3 {
	padding-top: 65px;

	&.title-center .wrapper-title {
		margin-top: 5px;
		margin-bottom: 30px;
	}

	&.hide-label .wrapper {
		&:after,
		.new-course-label {
			display: none !important;
			opacity: 0 !important;
		}
	}

	.title {
		font-size: 36px;
		line-height: 1.25;
		font-weight: 500;
		text-align: center;
		text-transform: capitalize;
		max-width: 927px;
		margin: 0 auto 17px;
	}

	.masonry-filter {
		text-align: center;
		font-size: 18px;
		text-transform: capitalize;
		margin-bottom: 45px;

		.filter {
			margin-right: 54px;
			padding-bottom: 4px;
			border-bottom: 1px solid transparent;
			font-weight: 400;
			&.is-checked {
				border-bottom: 1px solid #1ea69a;
				color: #1ea69a;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}

	.masonry-items {
		margin-left: -15px;
		margin-right: -15px;
		.row {
			@include clearfix();
		}
	}
	.course-item {
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 30px;
		.wrapper {
			@include transition(all 0.5s);
			background-color: white;
			// @include box-shadow(0 4px 15px rgba(0, 0, 0, 0.05));
			border-radius: $thim_border_radius;
			overflow: hidden;
			border: 1px solid #e0e0e0;
			&:hover {
				// @include box-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
				box-shadow: 0px 4px 30px 0px #1c1c1b33;
			}
		}

		.featured-img {
			position: relative;
			margin-bottom: 20px;

			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: calc(100% - 10px);
				height: calc(100% - 47px);
				@include background-gradient(rgba(0, 0, 0, 0), rgba(102, 102, 102, 0.2));
			}

			img {
				// border: 5px solid #fff;
				width: 100%;
				object-fit: cover;
			}
		}

		.course-title {
			font-size: 16px;
			line-height: 1.25;
			padding: 0 20px 8px;
			margin-bottom: 0;
			font-weight: 500;
			cursor: pointer;
		}

		.participants {
			padding: 0 20px 20px;
			// font-size: 14px;
			// font-weight: 400;

			.instructor {
				margin-right: 5px;
				text-transform: capitalize;
			}

			.students {
				display: inline-block;
				color: #878787;
				display: none;
				&:before {
					content: "/";
					margin-right: 7px;
				}
			}
		}

		.course-meta {
			position: absolute;
			left: 10px;
			bottom: 10px;
			right: 10px;
			width: 100%;
			@include flexbox();
			justify-content: space-between;
			margin-bottom: 0;
			align-items: center;
			.price {
				@include flexbox();
				align-items: center;
				padding: 0 20px;
				height: 40px;
				background-color: #fff;
				text-transform: uppercase;
				font-size: 15px;
				font-weight: 500;
				border-radius: 4px;
				&:empty {
					display: none;
				}
				.course-origin-price {
					order: 2;
					padding-right: 0;
					font-size: 16px;
					font-style: italic;
					letter-spacing: 0.4px;
					color: #202121;
					font-weight: 300;
					padding-top: 3px;
					text-decoration: line-through;
				}

				span {
					margin-left: 7px;

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

				.course-price {
					letter-spacing: 0.4px;
					color: $thim_body_primary_color;
				}
			}

			.course-rating {
				color: #ddd;
				line-height: 20px;
				padding-right: 19px;
				display: flex;
				.review-stars-rated {
					width: 70px;
					margin-right: 6px;
					display: flex;
					margin-bottom: 0;
					svg {
						width: 10px;
					}
				}

				span {
					font-size: 14px;
					line-height: 17px;
					margin-top: 4px;
				}
			}
		}
	}

	.sale-course-label {
		position: absolute;
		top: 18px;
		left: 10px;
		@include rotate(-45deg);
		font-size: 16px;
		font-weight: 400;
		color: #fff;
		@include opacity(0.8);
		text-transform: uppercase;
	}

	.new-course-label {
		position: absolute;
		top: 18px;
		right: 10px;
		@include rotate(45deg);
		font-size: 16px;
		font-weight: 400;
		color: #fff;
		@include opacity(0.8);
		text-transform: uppercase;
	}
	.wrapper {
		.course-rating {
			color: $thim_font_body_color;
			line-height: 20px;
			// padding-right: 19px;
			padding: 0 20px;
			display: flex;
			margin-bottom: 12px;
			.review-stars-rated {
				width: 76px;
				margin-right: 6px;
				display: flex;
				margin-bottom: 0;
				gap: 4px;
				svg {
					width: 13px;
					height: 13px;
				}
				.lp-review-svg-star.far svg {
					stroke: #ffb60a;
				}
			}

			span {
				font-size: 14px;
				line-height: 17px;
				margin-top: 1px;
				margin-left: 8px;
			}
		}
	}
	.new-course {
		.wrapper {
			position: relative;
			&:after {
				content: "";
				position: absolute;
				z-index: 2;
				width: 0;
				height: 0;
				top: 0;
				right: 0;
				border-left: 86px solid transparent;
				border-top: 86px solid #f47e49;
			}

			.new-course-label {
				z-index: 3;
			}
		}
	}

	.sale {
		.wrapper {
			position: relative;

			&:before {
				content: "";
				position: absolute;
				z-index: 3;
				width: 0;
				height: 0;
				top: 0;
				left: 0;
				border-right: 86px solid transparent;
				border-top: 86px solid #f47e49;
			}

			.sale-course-label {
				z-index: 3;
			}
		}
	}

	.review-stars-rated .review-stars.empty,
	.review-stars-rated .review-stars.filled {
		font-size: 11px;
		height: 10px;
	}

	.wrapper-title {
		@include flexbox();
		justify-content: space-between;
		align-items: baseline;
		margin-bottom: 60px;

		.title {
			margin: 0;

			&.title-center {
				margin: 0 auto;
			}
		}

		.view-courses-button {
			font-size: 16px;
			color: $thim_font_body_color;
			font-weight: 500;
			text-transform: uppercase;
			// border-bottom: 1px solid;
			line-height: 0;
			padding-bottom: 7px;
		}
	}
}

.thim-course-block-3 .col-sm-3.course-item .course-meta .course-rating span {
	display: none;
}

// End Category layout