@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-courses-carousel {
	position: relative;

	svg {
		display: none;
	}

	.inner-carousel {
		z-index: 2;
	}

	.owl-stage-outer {
		padding: 0 30px 30px 30px;
		margin-left: -30px;
		margin-right: -30px;
	}

	.carousel-bg {
		background: #f6f6f7;
		content: "";
		width: 100%;
		bottom: 0;
		z-index: 1;
		display: block;
		position: absolute;
	}

	.owl-nav {
		margin-top: 0;

		.owl-prev,
		.owl-next {
			background: transparent;
			position: absolute;
			top: 40%;
			left: -103px;
			font-size: 70px;
			opacity: 0.6;
			color: #fff;

			&:hover {
				background: transparent;
				opacity: 1;
				cursor: pointer;
				color: #fff;
			}
		}

		.owl-next {
			left: auto;
			right: -103px;
		}
	}

	.owl-dots {
		padding: 0 0 60px;
		margin-top: 0 !important;
		.owl-dot {
			margin: 0 5px;
			border: 0;
			span {
				width: 10px;
				height: 10px;
				margin: 0;
			}

			&.active {
				background: $thim_body_primary_color;
				border-radius: 50%;
			}
		}
	}

	.content {
		border-radius: $thim_border_radius;
		overflow: hidden;
		border: 1px solid #e0e0e0;
		// box-shadow: 0px 4px 30px 0px #1c1c1b33;
		.thumbnail {
			overflow: hidden;
			position: relative;

			.img_thumbnail:before {
				content: "";
				top: 0;
				right: -1px;
				bottom: 0;
				left: 0;
				z-index: 1;
				display: block;
				position: absolute;
				overflow: hidden;
				@include background-gradient(rgba(255, 255, 255, 0), rgba(32, 33, 33, 0.7));

				img {
					transform: scale(1);
				}
			}

			.img_thumbnail {
				img {
					@include transition(0.5s ease-in-out);
				}

				&:hover {
					img {
						transform: scale(1.2);
					}
				}
			}

			.price {
				position: absolute;
				bottom: 0;
				left: 0;
				font-size: 20px;
				font-weight: 500;
				line-height: 1.1;
				letter-spacing: 0.4px;
				padding: 11px 28px;
				@include flexbox();
				background: #f6f6f7;
				text-transform: uppercase;
				z-index: 999;

				.course-origin-price {
					font-size: 15px;
					font-style: normal;
					margin-left: 10px;
					text-decoration: line-through;
					color: #ff3b30;
					// order: 2;
				}

				// .course-price {
				// 	font-size: 20px;
				// 	line-height: 1.5;
				// 	letter-spacing: 0;
				// }
			}

			.sale {
				width: 0;
				height: 0;
				border-top: 86px solid #ffae00;
				border-right: 86px solid transparent;
				display: inline-block;
				position: absolute;
				z-index: 999;

				.text-sale {
					@include transform(rotate(-45deg));
					position: absolute;
					top: -68px;
					display: inline-block;
					left: 10px;
					color: #fff;
					font-size: 16px;
					font-weight: 500;
					text-transform: uppercase;
				}
			}

			.review {
				.sc-review-stars {
					z-index: 999;
					position: absolute;
					right: 15px;
					bottom: 0;
					height: 27px;

					.review-stars-rated {
						width: 55px;
						margin-left: 60px;
						height: 27px;
						margin-top: 0;

						.filled {
							right: 0;
						}

						.empty,
						.filled {
							font-size: 11px;
							color: #e5e5e6;
						}
					}
				}

				&.review-course {
					.vote {
						position: absolute;
						font-size: 14px;
						line-height: 24px;
						color: #e5e5e6;
						z-index: 2;
						bottom: 30px;
						right: 45px;
						display: inline;
					}
				}
			}
		}

		.sub-content {
			background: #fff;
			height: auto;
			padding-bottom: 15px;

			.title {
				// padding: 20px 30px 10px;
				// line-height: 1.38;

				a {
					font-size: 18px;
					line-height: 1.556;
					font-weight: 400;
					text-transform: capitalize;
				}
			}

			.data-comment {
				padding: 0 28px;
				font-size: 14px;
				font-weight: 400;
				line-height: 1.714;
				color: #878787;
			}
			.wrap-author {
				// padding: 0 30px;
				display: flex;
				align-items: center;

				img {
					float: left;
					width: 50px;
					height: 50px;
					border-radius: 50%;
				}

				.name {
					float: left;
					padding-left: 16px;

					div {
						font-size: 14px;
						line-height: 21px;
						font-weight: 400;
						// font-style: italic;
						// text-align: left;
						margin-bottom: 4px;
						color: $thim_font_body_color;
					}

					a {
						text-transform: capitalize;
						font-size: 16px;
						line-height: 24px;
						font-weight: 500;
						text-align: left;
						.instructor-display-name {
							font-weight: inherit;
						}
					}
				}
			}
		}

		&:hover {
			.thumbnail {
				.price {
					background: #ffffff;
					@include transition(0.3s ease-in-out);
				}
			}

			.sub-content {
				@include box-shadow(12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08));
				@include transition(0.3s ease-in-out);
				background: #ffffff;
			}
		}
	}

	&.style-1 {
		margin-left: -14px;

		svg {
			display: inline-block;
			width: 46px;
			height: 46px;
		}

		&:after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			border-bottom: 1px solid rgba(232, 232, 232, 0.7);
			margin: 0 auto;
		}

		.carousel-bg {
			display: none !important;
		}

		.sc-review-stars {
			svg {
				width: 16px;
				height: 16px;
			}
			.review-star {
				display: inline-block;
			}
		}

		.content {
			&:hover {
				.hover-content {
					opacity: 1;
				}
			}

			.thumbnail {
				border-radius: $thim_border_radius;
				&:before {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
					content: "";
					opacity: 0.8;
					background: linear-gradient(354.09deg, #000000 10.31%, rgba(0, 0, 0, 0) 95.31%);
					// background-image: linear-gradient(to bottom, #00000038 59%, #1fb8fc 68%);
				}

				.price {
					position: static;
					background: none;
				}

				.img_thumbnail {
					img {
						transform: scale(1) !important;
					}

					&:before {
						display: none;
					}
				}
			}

			.sub-content {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				right: 0;
				padding: 0 30px 30px;
				background: none;
				z-index: 2;

				.title {
					font-size: 20px;
					line-height: 25px;
					margin-bottom: 12px;
					margin-top: 16px;
					font-weight: 500;
					color: #ffffff;
					padding: 0;
				}

				.author {
					color: #ffffff;
					text-transform: capitalize;
					margin-bottom: 5px;
					font-size: 14px;
					line-height: 1.5;
					font-weight: 400;
					display: flex;
					gap: 12px;
					align-items: center;
					img {
						width: 32px;
						height: 32px;
						object-fit: cover;
						border-radius: 50%;
					}
				}
				.price,
				.price > span {
					padding: 0;
					text-transform: capitalize;
					color: white;
					font-size: 20px;
					line-height: 25px;
					font-weight: 500;
					flex-direction: row;
				}
				.price > span {
					&.course-origin-price {
						color: #ff3b30;
						font-weight: 400;
						font-style: normal;
						order: 0;
						margin-right: 8px;
						margin-left: 0;
					}
					&.course-price {
						order: 1;
					}
				}
			}

			.hover-content {
				background: #fff;
				position: absolute;
				width: 100%;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 10;
				display: flex;
				padding: 30px;
				flex-direction: column;
				justify-content: flex-end;
				opacity: 0;
				@include transition(all 0.5s);
				box-shadow: 0 15px 35px 0 rgba(0, 29, 44, 0.1);
				border-radius: $thim_border_radius;
				border: 1px solid $border-color;
				.title {
					margin-bottom: 12px;

					a {
						font-weight: 500;
						font-size: 20px;
						line-height: 25px;
						color: $thim_font_title_color;
						&:hover {
							color: $thim_body_primary_color;
						}
					}
				}

				.description {
					margin-top: 30px;
					font-weight: 400;
					display: -webkit-box;
					-webkit-line-clamp: 4;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					max-height: calc(1.5em * 4);
					a {
						color: #5a5a5a;
						font-size: 15px;
						line-height: 25px;
						font-weight: 400;
						&:hover {
							color: $thim_body_primary_color;
						}
					}
				}

				.review {
					position: relative;
					padding-bottom: 10px;

					&:after {
						position: absolute;
						content: "";
						left: 0;
						bottom: 0;
						width: 40px;
						height: 1px;
						background: #e0e0e0;
					}

					span.vote {
						display: none;
					}

					.sc-review-stars {
						display: inline-block;
						padding-top: 4px;
						font-size: 12px;

						.review-stars {
							color: #f47e49 !important;
						}

						.review-stars-rated {
							width: auto;
							position: relative;
							display: inline-block;
						}
					}
				}

				.wrap-author {
					margin-top: 100px;
					display: flex;
					align-items: center;

					img {
						float: left;
						width: 60px;
						height: 60px;
						border-radius: 50%;
					}

					.name {
						float: left;
						padding-left: 16px;

						div {
							font-size: 14px;
							line-height: 21px;
							font-weight: 400;
							// font-style: italic;
							// text-align: left;
							color: $thim_font_body_color;
						}

						a {
							text-transform: capitalize;
							font-size: 16px;
							line-height: 24px;
							font-weight: 500;
							text-align: left;
						}
					}
				}
			}
		}

		.has-video {
			.format {
				background-color: #1fb8fc;

				&:before {
					font-size: 35px;
					content: "\f487";
				}
			}
		}

		.format {
			display: none;
			position: absolute;
			z-index: 1;
			top: 25px;
			border-radius: 50%;
			right: 25px;
			// display: inline-block;
			width: 56px;
			text-align: center;
			height: 56px;
			line-height: 56px;
			box-shadow: 12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08);

			&:before {
				content: "\f471";
				font-family: Ionicons;
				font-size: 30px;
				font-weight: normal;
				letter-spacing: normal;
				text-align: center;
				color: #ffffff;
				margin-left: 5px;
			}
		}

		.owl-dots {
			background: none !important;
		}

		.inner-carousel {
			width: 1132px;
			margin: 0 auto;
		}

		.owl-stage-outer {
			margin: 0 -28px;
		}

		.owl-nav {
			.owl-prev,
			.owl-next {
				width: 46px;
				height: 46px;
				line-height: 46px;
				top: 50%;
				font-size: 30px;
				margin-top: -53px;
				border-radius: 50%;
				opacity: 1;
				padding: 0;
				background-origin: border-box;
				background-clip: content-box, border-box;
			}

			.owl-prev {
				left: -86px;

				i {
					position: absolute;
					width: 46px;
					height: 46px;
					line-height: 46px;
					top: 2px;
					left: 0;
				}
			}

			.owl-next {
				right: -86px;

				i {
					position: absolute;
					width: 46px;
					height: 46px;
					line-height: 46px;
					top: 2px;
					left: 0;
				}
			}
		}
	}
}

.vc_row-has-fill {
	.thim-sc-courses-carousel {
		.owl-nav {
			.owl-prev,
			.owl-next {
				color: #ffffff;

				&:hover {
					color: #ffffff;
					opacity: 1;
				}
			}
		}
	}
}

article.sidebar-right {
	.thim-sc-courses-carousel {
		max-width: 1100px;
		margin-left: -50px;

		.owl-nav {
			.owl-prev,
			.owl-next {
				left: -85px;
			}

			.owl-next {
				left: auto;
				right: -85px;
			}
		}
	}
}

.thim-sc-courses-carousel.style-1 .owl-nav {
	.owl-prev,
	.owl-next {
		&.disabled {
			cursor: not-allowed;
		}

		&:not(.disabled) {
			&:hover i {
				-webkit-animation-name: hvr-icon-wobble-horizontal;
				animation-name: hvr-icon-wobble-horizontal;
				-webkit-animation-duration: 1s;
				animation-duration: 1s;
				-webkit-animation-timing-function: ease-in-out;
				animation-timing-function: ease-in-out;
				-webkit-animation-iteration-count: 1;
				animation-iteration-count: 1;
				//-webkit-animation-name: hvr-icon-pulse-grow;
				//animation-name: hvr-icon-pulse-grow;
				//-webkit-animation-duration: 0.3s;
				//animation-duration: 0.3s;
				//-webkit-animation-timing-function: linear;
				//animation-timing-function: linear;
				//-webkit-animation-iteration-count: infinite;
				//animation-iteration-count: infinite;
				//-webkit-animation-direction: alternate;
				//animation-direction: alternate;
			}

			i {
				-webkit-transform: translateZ(0);
				transform: translateZ(0);
				-webkit-transition-timing-function: ease-out;
				transition-timing-function: ease-out;
			}
		}
	}
}

body {
	&.post-type-archive-lp_course,
	&.tax-course_category {
		.learn-press-courses,
		.thim-sc-courses-carousel,
		.archive-courses {
			.content {
				.thumbnail {
					.review {
						.sc-review-stars {
							.review-stars-rated {
								display: flex;
								margin-left: 0;
								width: 100%;
								margin-bottom: 0;
							}
						}
					}
				}
			}

			svg {
				display: block;
				width: 14px;
			}
		}
		.learn-press-courses,
		.archive-courses,
		.thim-related-course {
			.content {
				.content-list {
					.courses_list_info {
						.review {
							.sc-review-stars {
								.review-stars-rated {
									display: flex;
									margin-left: 0;
									width: 100%;
									margin-bottom: 0;
								}
							}
						}
					}
				}

				.thumbnail {
					.review {
						.sc-review-stars {
							right: 3px;
							left: auto;
						}
					}
				}
			}

			// svg {
			// 	width: 10px;
			// }
		}
	}

	.thim-related-course {
		.owl-stage-outer {
			.wrapper-course-thumbnail {
				.course-rating {
					right: 23px;
					height: 30px;

					.review-stars-rated {
						display: flex;
						margin-left: 0;
						width: 100%;
						margin-bottom: 0;

						svg {
							width: 13px;
						}
					}
				}
			}
		}
	}

	&.single-lp_course {
		&.single {
			.course-info {
				.list-inline {
					.list-inline-item.item-review {
						.review-stars-rated {
							display: flex;
							margin-left: 0;
							width: 100%;
							margin-bottom: 0;

							svg {
								width: 14px;
								height: 14px;
							}
						}
					}
				}
			}
		}
	}

	.lp-content-area.lp-4 {
		.content {
			.thumbnail {
				.price {
					padding: 11px;
				}

				.review {
					.sc-review-stars {
						right: 7px;

						.review-stars-rated {
							display: flex;
							margin-left: 0;
							width: 100%;
							margin-bottom: 0;

							svg {
								width: 10px;
							}
						}
					}
				}
			}
		}
	}

	&.lp-landing {
		.reviews {
			.average-rating {
				.review-stars-rated {
					display: flex;
					margin-left: 0;
					width: 100%;
					margin-bottom: 17px;
					justify-content: center;
				}
			}
		}
	}
}

body.single .learn-press-tab-panel-reviews .reviews .average-rating .review-stars-rated,
body.single .course-tab-panel-reviews .reviews .average-rating .review-stars-rated {
	display: flex;
	margin-left: 0;
	width: 100%;
	margin-bottom: 5px;
	justify-content: center;
}