#challengesPage
{
    padding:0px 50px 50px 50px;
	position:relative;
}

/* PROVIDER FILTER */
#challengesPage #divProviderFilter
{
	display:none;
}

#challengesPage.active #divProviderFilter
{
	display:block;
}

#challengesPage .divProviderFilterScroller
{
	overflow-x:auto;
	scrollbar-width:none;
	-ms-overflow-style:none;
}

#challengesPage .divProviderFilterScroller::-webkit-scrollbar
{
	display:none;
}

#challengesPage .divProviderFilterItems
{
	display:flex;
	gap:10px;
}

#challengesPage .divProviderFilterItem
{
	align-items:center;
	background-color:#181a20;
	border:2px solid #3f4656;
	border-radius:10px;
	box-sizing:border-box;
	color:#ffffff;
	cursor:pointer;
	display:flex;
	flex-shrink:0;
	font-size:14px;
	height:50px;
	justify-content:center;
	min-width:100px;
	padding:8px 15px;
	transition:border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

#challengesPage .divProviderFilterItem:hover
{
	border-color:#5d2894;
}

#challengesPage .divProviderFilterItem.selected
{
	border-color:#5d2894;
	box-shadow:0px 0px 10px 0px rgba(93, 40, 148, 0.5);
}

#challengesPage .divProviderFilterItem .imgProviderFilter
{
	height:30px;
	object-fit:contain;
}

#challengesPage #divActiveChallenges, #challengesPage #divCompletedChallenges, #challengesPage .divHowItWorks
{
    display:none;
	margin-top:14px;
	min-height:200px;
}

#challengesPage.active #divActiveChallenges, #challengesPage.completed #divCompletedChallenges
{
    display:flex;
	flex-wrap:wrap;
	gap:15px;
}

#challengesPage #divActiveChallenges:after, #challengesPage #divCompletedChallenges:after
{
	clear:both;
	content:"";
	display:block;
}

#challengesPage.howItWorks .divHowItWorks
{
	background-image:url('images/example.webp');
	background-repeat:no-repeat;
	background-size:300px;
	display:block;
	min-height:590px;
	padding-left:320px;
}

#challengesPage .divChallenge
{
    background-color:#181a20;
    border:12px solid #210841;
    border-radius:15px;
	box-sizing:border-box;
	box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	flex:0 0 calc((100% / 4) - 12px);
	position:relative;
}

#challengesPage .divChallenge.expired
{
	filter:grayscale(1);
}

#challengesPage .divChallenge:before
{
	background-image:url('../../images/promotions/challenges/topCorner.webp'), url('../../images/promotions/challenges/bottomCorner.webp');
	background-position:top -3px left -3px, bottom -3px left -3px;
	background-repeat:no-repeat;
	content:"";
	display:block;
	filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));
	height:calc(100% + 24px);
	left:-12px;
	pointer-events:none;
	position:absolute;
	top:-12px;
	transform:scaleX(-1);
	width:calc(100% + 24px);
	z-index:1;
}

#challengesPage .divChallenge:after
{
	background-image:url('../../images/promotions/challenges/topCorner.webp'), url('../../images/promotions/challenges/bottomCorner.webp');
	background-position:top -3px left -3px, bottom -3px left -3px;
	background-repeat:no-repeat;
	content:"";
	display:block;
	filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));
	height:calc(100% + 24px);
	left:-12px;
	pointer-events:none;
	position:absolute;
	top:-12px;
	width:calc(100% + 24px);
}

#challengesPage .divChallengeBorder
{
	border:1px solid #5d2894;
	border-radius:5px;
	box-shadow:0px 0px 5px 0px rgba(255, 255, 255, 0.25), inset 0px 0px 5px 0px rgba(255, 255, 255, 0.25);
	height:calc(100% + 11px);
	left:-7px;
	pointer-events:none;
	position:absolute;
	top:-8px;
	transform:scaleX(-1);
	width:calc(100% + 13px);
	z-index:2;
}

/* CARD FLIP */
#challengesPage .divChallenge
{
	cursor:pointer;
	perspective:1600px;
}

#challengesPage .challengeFlipInner
{
	position:relative;
	transform-style:preserve-3d;
	transition:transform 0.7s cubic-bezier(0.34, 1.45, 0.4, 1);
}

#challengesPage .divChallenge.flipped .challengeFlipInner
{
	transform:rotateY(180deg);
}

#challengesPage .challengeFlipBack
{
	pointer-events:none;
}

#challengesPage .divChallenge.flipped .challengeFlipBack
{
	pointer-events:auto;
}

#challengesPage .divChallenge.flipped .challengeFlipFront
{
	pointer-events:none;
}

/* Desktop (real pointer): flip on hover */
@media (hover: hover) and (pointer: fine)
{
	#challengesPage .divChallenge:hover .challengeFlipInner
	{
		transform:rotateY(180deg);
	}

	#challengesPage .divChallenge:hover .challengeFlipBack
	{
		pointer-events:auto;
	}

	#challengesPage .divChallenge:hover .challengeFlipFront
	{
		pointer-events:none;
	}
}

#challengesPage .challengeFlipFront
{
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

#challengesPage .challengeFlipBack
{
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	background-color:#13141a;
	border-radius:4px;
	bottom:0px;
	left:0px;
	overflow-x:hidden;
	overflow-y:auto;
	position:absolute;
	right:0px;
	top:0px;
	transform:rotateY(180deg);
}

@media (prefers-reduced-motion: reduce)
{
	#challengesPage .challengeFlipInner
	{
		transition:none;
	}
}

/* MOBILE — tap a card to expand it into a near-fullscreen, scrollable detail view */
#challengesPage .btnChallengeClose
{
	display:none;
}

#challengesPage .challengeExpandBackdrop
{
	background:rgba(0, 0, 0, 0.78);
	inset:0;
	opacity:0;
	pointer-events:none;
	position:fixed;
	transition:opacity 0.3s ease;
	z-index:1000;
}

#challengesPage .challengeExpandBackdrop.show
{
	opacity:1;
	pointer-events:auto;
}

#challengesPage .divChallenge.expanded
{
	animation:challengeExpandIn 0.3s ease-out;
	flex:none;
	height:calc(100dvh - 80px);
	left:50%;
	margin:0;
	max-height:calc(100dvh - 80px);
	position:fixed;
	top:50%;
	transform:translate(-50%, -50%);
	width:min(440px, calc(100vw - 24px));
	z-index:1001;
}

#challengesPage .divChallenge.expanded .challengeFlipInner,
#challengesPage .divChallenge.expanded .challengeFlipFront
{
	height:100%;
}

#challengesPage .divChallenge.expanded .btnChallengeClose
{
	align-items:center;
	background:rgba(20, 20, 26, 0.9);
	border:1px solid #5d2894;
	border-radius:50%;
	box-shadow:0 0 8px rgba(0, 0, 0, 0.6);
	box-sizing:border-box;
	color:#ffffff;
	cursor:pointer;
	display:flex;
	flex:none;
	font-size:20px;
	height:34px;
	justify-content:center;
	line-height:1;
	min-width:0;
	padding:0;
	position:absolute;
	right:30px;
	top:4px;
	width:34px;
	z-index:6;
}

@keyframes challengeExpandIn
{
	from { opacity:0.3; transform:translate(-50%, -50%) scale(0.85); }
	to   { opacity:1;   transform:translate(-50%, -50%) scale(1); }
}

/* CARD BACK — CHALLENGE DETAILS */
#challengesPage .challengeFlipBack
{
	scrollbar-width:thin;
	scrollbar-color:#5d2894 transparent;
}

#challengesPage .challengeFlipBack::-webkit-scrollbar
{
	width:6px;
}

#challengesPage .challengeFlipBack::-webkit-scrollbar-thumb
{
	background-color:#5d2894;
	border-radius:3px;
}

#challengesPage .challengeFlipBack::-webkit-scrollbar-track
{
	background-color:transparent;
}

#challengesPage .divBackScroll
{
	padding:12px;
}

#challengesPage .divBackHeader
{
	color:#ffffff;
	font-size:18px;
	font-weight:bold;
	padding-bottom:10px;
	text-align:center;
	text-shadow:0px 0px 8px rgba(1, 239, 249, 0.5);
}

#challengesPage .divBackStats
{
	background-color:#181a20;
	border:1px solid #2a2140;
	border-radius:10px;
	box-shadow:inset 0px 0px 8px 0px rgba(93, 40, 148, 0.25);
	margin-bottom:12px;
	padding:2px 10px;
}

#challengesPage .divBackStatRow
{
	align-items:center;
	border-bottom:1px solid rgba(93, 40, 148, 0.3);
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	padding:9px 0px;
}

#challengesPage .divBackStatRow:last-child
{
	border-bottom:none;
}

#challengesPage .divBackStatIcon
{
	color:#b07ff0;
	font-size:14px;
	text-align:center;
	width:18px;
}

#challengesPage .divBackStatLabel
{
	color:#c9c9d6;
	font-size:13px;
}

#challengesPage .divBackStatValue
{
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	margin-left:auto;
	text-align:right;
}

#challengesPage .divBackStatSub
{
	color:#ffffff;
	font-size:11px;
	margin-left:auto;
	text-align:right;
	width:100%;
}

#challengesPage .divBackStatSub .textBlue
{
	color:#ffffff;
	text-shadow:none;
}

#challengesPage .btnBackJoin
{
	color:#ffffff;
	margin-bottom:14px;
	text-shadow:0px 0px 5px #01eff9;
	width:100%;
}

#challengesPage .divBackMoreTitle
{
	color:#01eff9;
	font-size:15px;
	font-weight:bold;
	margin-bottom:8px;
	text-shadow:0px 0px 6px rgba(1, 239, 249, 0.4);
}

#challengesPage .divBackInfoCard
{
	background-color:#181a20;
	border:1px solid #2a2140;
	border-radius:10px;
	margin-bottom:10px;
	padding:10px;
}

#challengesPage .divBackInfoHead
{
	color:#ffffff;
	font-size:13px;
	font-weight:bold;
	margin-bottom:5px;
}

#challengesPage .divBackInfoHead .fa
{
	color:#b07ff0;
	margin-right:7px;
}

#challengesPage .divBackInfoText
{
	color:#b8b8c6;
	font-size:12px;
	line-height:17px;
	margin-bottom:3px;
}

#challengesPage .divBackExample
{
	background-color:#11121a;
	border:1px solid #243a4a;
	border-radius:8px;
	margin-top:8px;
	padding:8px;
}

#challengesPage .divBackExampleTitle
{
	color:#01eff9;
	font-size:12px;
	font-weight:bold;
	margin-bottom:7px;
}

#challengesPage .divBackExampleRow
{
	align-items:center;
	color:#ffffff;
	display:flex;
	flex-wrap:wrap;
	font-size:12px;
	gap:6px;
	margin-bottom:7px;
}

#challengesPage .divBackExampleRow .fa-database,
#challengesPage .divBackExampleRow .fa-shopping-cart
{
	color:#b07ff0;
}

#challengesPage .divBackArrow
{
	color:#01eff9;
}

#challengesPage .divBackTip
{
	background-color:rgba(255, 185, 76, 0.08);
	border:1px solid rgba(255, 185, 76, 0.4);
}

#challengesPage .divBackTip .divBackInfoHead,
#challengesPage .divBackTip .divBackInfoHead .fa
{
	color:#ffb94c;
}

#challengesPage .divBackTip .textGold
{
	color:#ffb94c;
}

#challengesPage .divVideoContainer
{
	box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.5);
	font-size:0px;
	height:0px;
	padding-bottom:100%;
	position:relative;
	width:100%;
}

#challengesPage .vidChallenge
{
	object-fit:cover;
	position:relative;
	top:0px;
	width:100%;
}

#challengesPage .imgChallenge
{
	box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.5);
	object-fit:cover;
	width:100%;
}

#challengesPage .divChallengeDetails
{
	padding:10px;
	position:relative;
}

#challengesPage .divChallengeDetails:before
{
	background-image:url('../../images/other/completedStamp.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	content:"";
	display:none;
	filter:drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
	height:77px;
	left:0px;
	position:absolute;
	top:-75px;
	width:100px;
}

#challengesPage .completed .divChallengeDetails:before
{
	display:block;
}

#challengesPage .divChallengeReward
{
    color:#ffffff;
    padding:0px 10px;
}

#challengesPage .divChallengeRewardValue
{
    color:#ffffff;
    font-size:28px;
	line-height:28px;
    padding:10px;
}

#challengesPage .divChallengeRewardValue:before
{
    color:#05c287;
	content:"Instant Reward";
	display:block;
	font-size:14px;
	line-height:14px;
    padding-bottom:5px;
}

#challengesPage .divChallengeRewardStatus
{
    color:#ffb94c;
	font-size:16px;
    padding:0px 10px;
}

#challengesPage .divChallengePrizesLeft
{
	color:#ffffff;
	font-size:12px;
    padding:0px 10px 10px 10px;
}

#challengesPage .active .divChallengePrizesLeft
{
	color:#ffb94c;
	font-size:14px;
}

#challengesPage .divChallengeUserCount
{
	display:none;
	font-family:"Jost", sans-serif;
	margin:10px 0px 0px 8px;
	position:absolute;
	z-index:1;
}

#challengesPage .divChallengeUserCount:before
{
	font:normal normal normal 20px/1 FontAwesome;
	margin-right:5px;
}

#challengesPage .active .divChallengeUserCount
{
	display:block;
}

#challengesPage .btnOptOut
{
    color:#ffffff;
	margin-bottom:10px;
	position:relative;
	text-shadow:0px 0px 5px #e600ff;
	width:100%;
}

#challengesPage .btnOptOut:before
{
    background-color:#1b1c20;
	border:2px solid #3f4656;
	border-radius:50%;
	content:"";
	display:block;
	height:20px;
	position:absolute;
	right:6px;
	top:6px;
	width:20px;
}

#challengesPage .btnOptIn
{
    color:#ffffff;
	margin-bottom:10px;
	position:relative;
	text-shadow:0px 0px 5px #01eff9;
	width:100%;
}

#challengesPage .btnOptIn:before
{
    background-color:#1b1c20;
	border:2px solid #3f4656;
	border-radius:50%;
	content:"";
	display:block;
	height:20px;
	position:absolute;
	right:6px;
	top:6px;
	width:20px;
}

#challengesPage .btnOptOut:after
{
	background-color:#ffffff;
	border-radius:50%;
	box-shadow:inset 0px 0px 5px #00ff00, 0px 0px 5px #00ff00;
	content:"";
	display:block;
	height:20px;
	position:absolute;
	right:8px;
	top:8px;
	width:20px;
}

#challengesPage .btnPlayNow
{
	color:#ffffff;
	text-shadow:0px 0px 5px #01eff9;
	width:100%;
}

#challengesPage .divChallengeTimer .countdownTimer .divTimerLabel
{
	padding-top:0px;
}

#challengesPage .divChallengeTimer .countdownTimer
{
	height:85px;
	margin-left:-20px;
	width:calc(100% + 40px);
}

#challengesPage .divChallengeTimer .countdownTimer .divTimerLabel
{
	font-size:14px;
}

#challengesPage .divChallengeTimer .countdownTimer .divTimerLabel:before
{
	height:1px;
	left:20px;
	top:10px;
}

#challengesPage .divChallengeTimer .countdownTimer .divTimerLabel:after
{
	height:1px;
	right:20px;
	top:10px;
}

#challengesPage .divChallengeTimer .countdownTimer .divDaysValue, #challengesPage .divChallengeTimer .countdownTimer .divHoursValue, #challengesPage .divChallengeTimer .countdownTimer .divMinutesValue, #challengesPage .divChallengeTimer .countdownTimer .divSecondsValue
{
	font-size:14px;
	height:25px;
	line-height:25px;
	top:25px;
	width:30px;
}

/* TERMS AND CONDITIONS */
#challengesPage #divTermsAndConditions
{
	height:40px;
	margin-top:50px;
	overflow:hidden;
}

#challengesPage #divTermsAndConditions.show
{
	height:auto;
}

#challengesPage #h3TermsAndConditions
{
	color:#cffdff;
	cursor:pointer;
	display:block;
	font-size:20px;
	line-height:22px;
	padding-bottom:20px;
	text-decoration:underline;
	text-shadow:0px 0px 5px #01eff9;
}

#challengesPage #divTermsAndConditions hr
{
	border-color:rgba(255, 255, 255, 0.25);
	margin:20px 0px;
}

#challengesPage #divTermsAndConditions h4
{
	margin-bottom:5px;
	margin-top:15px;
}

/* MEDIA QUERIES */
@media (max-width:1400px)
{
    #challengesPage .divChallenge
	{
		flex:0 0 calc((100% / 3) - 10px);
	}
}

@media (max-width:1200px)
{
    #challengesPage
    {
        padding:0px 30px 30px 30px;
    }
}

@media (max-width:800px)
{
    #challengesPage
    {
        padding:0px 20px 20px 20px;
    }

	#challengesPage.howItWorks .divHowItWorks
	{
		background-size:260px;
		min-height:510px;
		padding-left:280px;
	}

	#challengesPage .divChallenge
	{
		flex:0 0 calc((100% / 2) - 8px);
	}
}

@media (max-width:600px)
{
    #challengesPage
    {
        padding:0px 15px 15px 15px;
    }

	#challengesPage.active #divActiveChallenges, #challengesPage.completed #divCompletedChallenges
	{
		gap:10px;
	}

	#challengesPage.howItWorks .divHowItWorks
	{
		background-size:100%;
		margin-top:10px;
		padding-left:0px;
		padding-top:200%;
	}

	#challengesPage .divChallenge
	{
		flex:0 0 calc((100% / 2) - 5px);
	}
}

@media (max-width:500px)
{
	#challengesPage .divChallengeDetails
	{
		padding:10px 5px;
	}

	#challengesPage .divChallengeReward
	{
		font-size:14px;
		padding:0px 5px;
	}

	#challengesPage .divChallengeRewardValue
	{
		font-size:22px;
		line-height:22px;
		padding:10px 5px;
	}

	#challengesPage .divChallengePrizesLeft
	{
		font-size:13px;
		padding:0px 5px 10px 5px;
	}

	#challengesPage .divChallengeUserCount
	{
		font-size:12px;
		margin:14px 0px 0px 8px;
	}

	#challengesPage .divChallengeUserCount:before
	{
		font:normal normal normal 12px/1 FontAwesome;
		margin-right:3px;
	}

	#challengesPage .btnOptOut, #challengesPage .btnOptIn
	{
		font-size:12px;
		padding-left:20px;
	}
}

@media (max-width:360px)
{
	#challengesPage.active #divActiveChallenges, #challengesPage.completed #divCompletedChallenges
	{
		gap:20px;
	}
	
	#challengesPage .divChallenge
	{
		flex:0 0 100%;
	}

	#challengesPage .divChallengePrizesLeft
	{
		font-size:12px;
	}
}