/*
 * RSR Coming Soon Courses - course card / slider styles.
 * Per-course custom message CSS (for example .rsr-early-offer) is intentionally excluded.
 */
/* =========================================================
   RSR Coming Soon - Course cards / sliders
   ========================================================= */

.rsr-coming-soon-product .course-thumbnail-holder {
	position: relative;
	overflow: visible;
}

/*
 * "Coming Soon" burst badge.
 *
 * Visual language intentionally follows the theme's existing
 * .sale-perc / .sc_discount_badge badge:
 * - compact burst/scalloped shape
 * - stacked wording
 * - slightly outside the top-left image corner
 */
.rsr-coming-soon-product .course-item-inner,
.rsr-coming-soon-product .course-thumbnail-holder {
	overflow: visible !important;
}

/*
 * White layer behind the orange badge creates the same clean
 * separated edge that the theme discount badge has over images.
 */
.rsr-coming-soon-product .course-thumbnail-holder::before {
	content: "";
	position: absolute;
	top: -13px;
	left: -13px;
	z-index: 59;

	width: 62px;
	height: 62px;

	background: #ffffff;

	-webkit-clip-path: polygon(
		50% 0%,
		61% 6%,
		73% 3%,
		82% 13%,
		95% 17%,
		96% 30%,
		100% 41%,
		94% 52%,
		97% 65%,
		87% 74%,
		83% 87%,
		70% 91%,
		60% 100%,
		48% 95%,
		35% 100%,
		25% 91%,
		12% 87%,
		9% 74%,
		0% 65%,
		5% 52%,
		0% 40%,
		7% 29%,
		4% 16%,
		17% 10%,
		28% 1%,
		40% 5%
	);

	clip-path: polygon(
		50% 0%,
		61% 6%,
		73% 3%,
		82% 13%,
		95% 17%,
		96% 30%,
		100% 41%,
		94% 52%,
		97% 65%,
		87% 74%,
		83% 87%,
		70% 91%,
		60% 100%,
		48% 95%,
		35% 100%,
		25% 91%,
		12% 87%,
		9% 74%,
		0% 65%,
		5% 52%,
		0% 40%,
		7% 29%,
		4% 16%,
		17% 10%,
		28% 1%,
		40% 5%
	);

	pointer-events: none;
	transform: rotate(-7deg);
	transform-origin: center;
	filter: drop-shadow(0 5px 7px rgba(0,0,0,.16));

	animation: rsrComingSoonBurstBorder 3.2s ease-in-out infinite;
}

/*
 * Orange foreground + stacked Persian wording.
 * CSS \A creates the same two-line treatment as:
 * <span class="sc_offer_txt">...</span>...
 */
.rsr-coming-soon-product .course-thumbnail-holder::after {
	content: "به\A زودی";
	white-space: pre-line;

	position: absolute;
	top: -10px;
	left: -10px;
	right: auto;
	z-index: 60;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 56px;
	height: 56px;
	padding: 0;

	background: #FF7300;
	color: #ffffff;

	-webkit-clip-path: polygon(
		50% 0%,
		61% 6%,
		73% 3%,
		82% 13%,
		95% 17%,
		96% 30%,
		100% 41%,
		94% 52%,
		97% 65%,
		87% 74%,
		83% 87%,
		70% 91%,
		60% 100%,
		48% 95%,
		35% 100%,
		25% 91%,
		12% 87%,
		9% 74%,
		0% 65%,
		5% 52%,
		0% 40%,
		7% 29%,
		4% 16%,
		17% 10%,
		28% 1%,
		40% 5%
	);

	clip-path: polygon(
		50% 0%,
		61% 6%,
		73% 3%,
		82% 13%,
		95% 17%,
		96% 30%,
		100% 41%,
		94% 52%,
		97% 65%,
		87% 74%,
		83% 87%,
		70% 91%,
		60% 100%,
		48% 95%,
		35% 100%,
		25% 91%,
		12% 87%,
		9% 74%,
		0% 65%,
		5% 52%,
		0% 40%,
		7% 29%,
		4% 16%,
		17% 10%,
		28% 1%,
		40% 5%
	);

	font-size: 13px;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;

	pointer-events: none;
	transform: rotate(-7deg);
	transform-origin: center;

	animation: rsrComingSoonBurst 3.2s ease-in-out infinite;
}

/*
 * A short "attention" movement, then a long resting period.
 * This is more like a promotion badge than a continuously
 * floating UI element.
 */
@keyframes rsrComingSoonBurst {
	0%, 68%, 100% {
		transform: rotate(-7deg) scale(1);
	}

	72% {
		transform: rotate(-2deg) scale(1.11);
	}

	76% {
		transform: rotate(-10deg) scale(1.04);
	}

	80% {
		transform: rotate(-5deg) scale(1.08);
	}

	86% {
		transform: rotate(-7deg) scale(1);
	}
}

@keyframes rsrComingSoonBurstBorder {
	0%, 68%, 100% {
		transform: rotate(-7deg) scale(1);
	}

	72% {
		transform: rotate(-2deg) scale(1.11);
	}

	76% {
		transform: rotate(-10deg) scale(1.04);
	}

	80% {
		transform: rotate(-5deg) scale(1.08);
	}

	86% {
		transform: rotate(-7deg) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rsr-coming-soon-product .course-thumbnail-holder::after,
	.rsr-coming-soon-product .course-thumbnail-holder::before {
		animation: none !important;
	}
}

/*
 * Hide any duplicate theme-generated "Coming Soon" badge.
 */
.rsr-coming-soon-product .sc-badge-holder .sc_coming_soon_badge {
	display: none !important;
}

/*
 * Hide Studiare's quick-add basket on Coming Soon cards.
 */
.rsr-coming-soon-product .studi_add_in_shop,
.rsr-coming-soon-product a.add_to_cart_button.ajax_add_to_cart {
	display: none !important;
}

.rsr-coming-soon-product .rsr-coming-soon-view-course {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}