/*
	BLACK FRIDAY 2026

	Built the same way as the Maldives page (pages/winATrip):
	- BACKGROUND LAYER: .divPageBackground, an empty div behind everything that shows
	  images/background.webp, swapped for images/backgroundMobile.webp at 800px and narrower.
	- FOREGROUND LAYER: #imgPageHeading, the logo artwork as its own transparent image
	  (images/heading.webp, or images/headingCyberMonday.webp on the Cyber Monday tab - see
	  CYBER MONDAY further down for the colours that change with it),
	  followed by the content panels, which are all drawn in CSS.

	Desktop styles come first; the mobile styles are in the media queries at the bottom.
*/

/* MONTSERRAT (variable, weights 100 to 900, Latin subset - SIL Open Font License, see fonts/OFL.txt) */
@font-face
{
	font-family:'Montserrat';
	font-display:swap;
	font-weight:100 900;
	src:url('fonts/montserrat.woff2') format('woff2');
}

#blackFridayPage
{
	--colorGold:#f6dc8f;
	--colorInk:#07071c;
	--colorLilac:#c7b5ff;
	--colorPanel:rgba(9, 9, 34, 0.82);
	--colorPurple:#7a4df0;
	--colorPurpleLight:#a98bff;
	--colorStroke:rgba(169, 139, 255, 0.35);
	--widthContent:640px;

	background-color:var(--colorInk);
	color:#ffffff;
	font-family:"Montserrat", "Jost", sans-serif;
	margin-bottom:50px;
	min-height:700px;
	overflow:hidden;
	padding-bottom:40px;
	position:relative;
}

#blackFridayPage *
{
	box-sizing:border-box;
}

/* BACKGROUND LAYER */
#blackFridayPage .divPageBackground
{
	background-image:url('images/background.webp'), linear-gradient(180deg, #9a6fd0 0%, #5a48c4 16%, #2b2a7a 38%, #11113a 62%, #07071c 100%);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
}

#blackFridayPage .divPageBackground::after
{
	background:linear-gradient(180deg, rgba(7, 7, 28, 0) 0%, rgba(7, 7, 28, 0.55) 55%, rgba(7, 7, 28, 0.9) 100%);
	bottom:0px;
	content:"";
	height:65%;
	left:0px;
	position:absolute;
	width:100%;
}

/* FOREGROUND LAYER */
#blackFridayPage #imgPageHeading
{
	display:block;
	filter:drop-shadow(0px 20px 30px rgba(7, 7, 28, 0.6));
	margin:16px auto -8px;
	max-width:calc(100% - 32px);
	position:relative;
	width:540px;
}

/* TABS */
#blackFridayPage #divOfferTabs
{
	display:grid;
	gap:12px;
	grid-template-columns:1fr 1fr;
	margin:0px auto;
	max-width:calc(100% - 32px);
	position:relative;
	width:var(--widthContent);
}

#blackFridayPage .divOfferTab
{
	background:rgba(9, 9, 34, 0.85);
	border:1px solid var(--colorStroke);
	border-radius:12px;
	color:var(--colorLilac);
	cursor:pointer;
	font-size:13px;
	font-weight:800;
	letter-spacing:1.5px;
	padding:10px 8px;
	text-align:center;
	transition:background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
	user-select:none;
}

#blackFridayPage .divOfferTab span
{
	display:block;
	font-size:11px;
	font-weight:600;
	letter-spacing:0.5px;
	margin-top:2px;
	opacity:0.8;
}

#blackFridayPage .divOfferTab:hover, #blackFridayPage .divOfferTab:focus
{
	border-color:var(--colorPurpleLight);
	color:#ffffff;
}

#blackFridayPage .divOfferTab.selected
{
	background:linear-gradient(180deg, #7a5be0 0%, #4a2fa8 100%);
	border-color:#cdbcff;
	box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.35), 0px 0px 18px rgba(122, 77, 240, 0.55);
	color:#ffffff;
	cursor:default;
}

/* OFFER */
#blackFridayPage .divOffer
{
	display:none;
	margin:24px auto 0px;
	max-width:calc(100% - 32px);
	position:relative;
	text-align:center;
	width:var(--widthContent);
}

#blackFridayPage:not(.cyberMonday) #divFridayOffer, #blackFridayPage.cyberMonday #divCyberMondayOffer
{
	animation:blackFridayShowOffer 0.35s ease-out;
	display:block;
}

@keyframes blackFridayShowOffer
{
	0%
	{
		opacity:0;
		transform:translateY(8px);
	}

	100%
	{
		opacity:1;
		transform:translateY(0px);
	}
}

#blackFridayPage .divOfferEyebrow
{
	align-items:center;
	color:var(--colorLilac);
	display:flex;
	font-size:12px;
	font-weight:700;
	gap:14px;
	justify-content:center;
	letter-spacing:3px;
}

#blackFridayPage .divOfferEyebrow::before, #blackFridayPage .divOfferEyebrow::after
{
	background-color:var(--colorPurpleLight);
	content:"";
	height:1px;
	opacity:0.7;
	width:22px;
}

#blackFridayPage .divOfferHeading
{
	font-size:36px;
	font-weight:900;
	letter-spacing:0.5px;
	line-height:1;
	margin-top:10px;
	text-shadow:0px 4px 18px rgba(7, 7, 28, 0.8);
}

#blackFridayPage .divOfferPill
{
	background:linear-gradient(180deg, #d9ccff 0%, #a98bff 100%);
	border-radius:30px;
	box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 18px rgba(169, 139, 255, 0.5);
	color:#16103d;
	display:inline-block;
	font-size:16px;
	font-weight:900;
	letter-spacing:3px;
	margin-top:12px;
	padding:8px 22px;
}

#blackFridayPage .divOfferDetails
{
	font-size:15px;
	font-weight:500;
	margin-top:12px;
	text-shadow:0px 2px 8px rgba(7, 7, 28, 0.9);
}

/* CASHBACK TIERS */
#blackFridayPage #divCashbackTiers
{
	display:grid;
	gap:12px;
	grid-template-columns:repeat(3, 1fr);
	margin-top:18px;
}

#blackFridayPage .divCashbackTier
{
	background:var(--colorPanel);
	border:1px solid var(--colorStroke);
	border-radius:14px;
	cursor:pointer;
	padding:14px 6px 12px;
	transition:background 0.25s, border-color 0.25s, box-shadow 0.25s;
	user-select:none;
}

#blackFridayPage .divCashbackTier:hover, #blackFridayPage .divCashbackTier:focus
{
	border-color:var(--colorPurpleLight);
}

#blackFridayPage .divCashbackTier.selected
{
	background:linear-gradient(180deg, rgba(74, 47, 168, 0.75) 0%, rgba(9, 9, 34, 0.9) 100%);
	border-color:#cdbcff;
	box-shadow:0px 0px 18px rgba(122, 77, 240, 0.5);
}

#blackFridayPage .divCashbackTierLabel
{
	color:#e4dcff;
	font-size:13px;
	font-weight:700;
}

#blackFridayPage .divCashbackTierRate
{
	font-size:44px;
	font-weight:900;
	line-height:1.15;
}

#blackFridayPage .divCashbackTierBack
{
	color:var(--colorLilac);
	font-size:12px;
	font-weight:800;
	letter-spacing:2.5px;
}

/* CASHBACK TRACKER */
#blackFridayPage #divCashbackTracker
{
	background:linear-gradient(180deg, rgba(38, 24, 92, 0.78) 0%, rgba(9, 9, 34, 0.88) 100%);
	border:1px solid rgba(205, 188, 255, 0.55);
	border-radius:16px;
	box-shadow:0px 0px 24px rgba(122, 77, 240, 0.3);
	margin-top:16px;
	padding:16px;
	text-align:left;
}

#blackFridayPage .divTrackerHeader
{
	align-items:center;
	display:flex;
	justify-content:space-between;
}

#blackFridayPage .divTrackerHeading
{
	font-size:14px;
	font-weight:800;
	letter-spacing:2px;
}

#blackFridayPage .divTrackerLive
{
	align-items:center;
	color:var(--colorLilac);
	display:flex;
	font-size:12px;
	font-weight:800;
	gap:7px;
	letter-spacing:1.5px;
}

#blackFridayPage .divTrackerLive::before
{
	animation:blackFridayLivePulse 1.6s ease-out infinite;
	background-color:#6fe08a;
	border-radius:50%;
	content:"";
	height:9px;
	width:9px;
}

@keyframes blackFridayLivePulse
{
	0%
	{
		box-shadow:0px 0px 0px 0px rgba(111, 224, 138, 0.7);
	}

	100%
	{
		box-shadow:0px 0px 0px 8px rgba(111, 224, 138, 0);
	}
}

#blackFridayPage .divTrackerStats
{
	display:grid;
	gap:10px;
	grid-template-columns:repeat(3, 1fr);
	margin-top:12px;
}

#blackFridayPage .divTrackerStat
{
	background:rgba(7, 7, 28, 0.75);
	border:1px solid var(--colorStroke);
	border-radius:10px;
	color:#d8cfff;
	font-size:10px;
	font-weight:700;
	letter-spacing:1px;
	padding:10px 6px;
	text-align:center;
}

#blackFridayPage .divTrackerStat span
{
	color:#ffffff;
	display:block;
	font-size:17px;
	font-variant-numeric:tabular-nums;
	font-weight:800;
	letter-spacing:0px;
	margin-top:3px;
}

#blackFridayPage .divTrackerCashback
{
	align-items:center;
	background:linear-gradient(90deg, rgba(7, 7, 28, 0.75) 0%, rgba(58, 38, 134, 0.6) 100%);
	border:1px solid rgba(205, 188, 255, 0.5);
	border-radius:10px;
	display:flex;
	gap:10px;
	justify-content:space-between;
	margin-top:10px;
	padding:8px 16px;
}

#blackFridayPage .divTrackerCashbackLabel
{
	font-size:12px;
	font-weight:700;
	letter-spacing:1.5px;
}

#blackFridayPage #divCashbackSoFar
{
	color:var(--colorGold);
	font-size:30px;
	font-variant-numeric:tabular-nums;
	font-weight:900;
	text-shadow:0px 0px 14px rgba(246, 220, 143, 0.45);
	white-space:nowrap;
}

#blackFridayPage #divCashbackBreakdown
{
	color:#d8cfff;
	font-size:11px;
	font-weight:500;
	margin-top:8px;
	min-height:14px;
	text-align:right;
}

#blackFridayPage #divTrackerTiers
{
	display:grid;
	gap:10px;
	grid-template-columns:repeat(3, 1fr);
	margin-top:8px;
}

#blackFridayPage .divTrackerTier
{
	background:rgba(7, 7, 28, 0.6);
	border:1px solid var(--colorStroke);
	border-radius:8px;
	color:rgba(255, 255, 255, 0.55);
	cursor:pointer;
	font-size:14px;
	font-weight:800;
	padding:6px 4px;
	text-align:center;
	transition:background 0.25s, border-color 0.25s, color 0.25s;
	user-select:none;
}

#blackFridayPage .divTrackerTier:hover, #blackFridayPage .divTrackerTier:focus
{
	border-color:var(--colorPurpleLight);
}

#blackFridayPage .divTrackerTier span
{
	display:block;
	font-size:10px;
	font-weight:600;
}

#blackFridayPage .divTrackerTier.reached
{
	background:linear-gradient(180deg, rgba(122, 91, 224, 0.75) 0%, rgba(74, 47, 168, 0.75) 100%);
	border-color:rgba(205, 188, 255, 0.6);
	color:#ffffff;
}

#blackFridayPage .divTrackerTier.current
{
	border-color:var(--colorGold);
	box-shadow:0px 0px 10px rgba(246, 220, 143, 0.35);
	color:var(--colorGold);
}

/* ACTIONS */
#blackFridayPage #divOfferActions
{
	margin:20px auto 0px;
	max-width:calc(100% - 32px);
	position:relative;
	text-align:center;
	width:var(--widthContent);
}

#blackFridayPage #btnDepositNow
{
	background:linear-gradient(180deg, #a98bff 0%, #7a4df0 55%, #5a2fd0 100%);
	border:1px solid #d9ccff;
	border-radius:30px;
	box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 0px 26px rgba(122, 77, 240, 0.7);
	cursor:pointer;
	font-size:17px;
	font-weight:900;
	letter-spacing:4px;
	padding:15px 10px;
	transition:box-shadow 0.25s, filter 0.25s, transform 0.1s;
	user-select:none;
}

#blackFridayPage #btnDepositNow:hover, #blackFridayPage #btnDepositNow:focus
{
	box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 0px 36px rgba(169, 139, 255, 0.9);
	filter:brightness(1.1);
}

#blackFridayPage #btnDepositNow:active
{
	transform:scale(0.985);
}

#blackFridayPage #divCyberMondayNote
{
	color:#e4dcff;
	font-size:14px;
	font-weight:600;
	margin-top:16px;
}

#blackFridayPage.cyberMonday #divCyberMondayNote
{
	display:none;
}

#blackFridayPage #btnOfferDetails
{
	cursor:pointer;
	display:inline-block;
	font-size:14px;
	font-weight:600;
	margin-top:12px;
	text-decoration:underline;
	text-underline-offset:4px;
	transition:color 0.25s;
}

#blackFridayPage #btnOfferDetails:hover, #blackFridayPage #btnOfferDetails:focus
{
	color:var(--colorLilac);
}

#blackFridayPage .divOfferFooter
{
	border-top:1px solid rgba(169, 139, 255, 0.25);
	color:#b9b3d6;
	font-size:12px;
	font-weight:500;
	margin-top:16px;
	padding-top:14px;
}

/*
	CYBER MONDAY
	The page gets the class "cyberMonday" while the Cyber Monday tab is selected (setTab() in
	blackFriday.js). The logo swaps to images/headingCyberMonday.webp and the rules below recolour
	the selected tab, the pill and the DEPOSIT NOW button from Black Friday purple to Cyber Monday
	teal and green. The background is shared.
*/
#blackFridayPage.cyberMonday .divOfferTab:hover, #blackFridayPage.cyberMonday .divOfferTab:focus
{
	border-color:#7af0d6;
}

#blackFridayPage.cyberMonday .divOfferTab.selected
{
	background:linear-gradient(180deg, #1f8d92 0%, #0e4a60 100%);
	border-color:#9cf7e4;
	box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.35), 0px 0px 18px rgba(64, 224, 190, 0.55);
}

#blackFridayPage.cyberMonday .divOfferEyebrow::before, #blackFridayPage.cyberMonday .divOfferEyebrow::after
{
	background-color:#7af0d6;
}

#blackFridayPage.cyberMonday .divOfferPill
{
	background:linear-gradient(90deg, #35c6ee 0%, #3fe3a2 100%);
	box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.6), 0px 0px 18px rgba(63, 227, 162, 0.5);
	color:#ffffff;
	text-shadow:0px 1px 2px rgba(6, 60, 70, 0.6);
}

#blackFridayPage.cyberMonday #btnDepositNow
{
	background:linear-gradient(180deg, #5cecae 0%, #22c98b 55%, #129e72 100%);
	border-color:#b9ffe2;
	box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 0px 26px rgba(40, 220, 150, 0.65);
	text-shadow:0px 1px 2px rgba(6, 70, 50, 0.55);
}

#blackFridayPage.cyberMonday #btnDepositNow:hover, #blackFridayPage.cyberMonday #btnDepositNow:focus
{
	box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 0px 36px rgba(92, 236, 174, 0.9);
}

#blackFridayPage.cyberMonday #btnOfferDetails:hover, #blackFridayPage.cyberMonday #btnOfferDetails:focus
{
	color:#7af0d6;
}

/* OFFER DETAILS POPUP */
#blackFridayPage #divTermsAndConditions
{
	background-color:rgba(0, 0, 0, 0.75);
	display:none;
	height:100%;
	left:0%;
	position:fixed;
	top:0%;
	width:100%;
	z-index:15;
}

#blackFridayPage #divTermsAndConditions.show
{
	animation:blackFridayShowPopup 0.25s;
	display:block;
}

@keyframes blackFridayShowPopup
{
	0%
	{
		opacity:0;
	}

	100%
	{
		opacity:1;
	}
}

#blackFridayPage .divTermsAndConditionsPopup
{
	background:linear-gradient(180deg, #2b1f6e 0%, #11113a 35%, #07071c 100%);
	border:1px solid rgba(205, 188, 255, 0.45);
	border-radius:14px;
	box-shadow:0px 0px 50px #000000;
	left:50%;
	max-height:calc(100% - 60px);
	max-width:calc(100% - 32px);
	overflow:hidden;
	padding:30px 8px 30px 30px;
	position:absolute;
	top:30px;
	transform:translateX(-50%);
	width:500px;
}

#blackFridayPage #btnCloseTermsAndConditions
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:0px;
	top:0px;
	width:40px;
	z-index:1;
}

#blackFridayPage #btnCloseTermsAndConditions::before, #blackFridayPage #btnCloseTermsAndConditions::after
{
	background-color:var(--colorLilac);
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
	transition:background-color 0.25s;
	width:24px;
}

#blackFridayPage #btnCloseTermsAndConditions::after
{
	transform:rotate(-45deg);
}

#blackFridayPage #btnCloseTermsAndConditions:hover::before, #blackFridayPage #btnCloseTermsAndConditions:hover::after
{
	background-color:#ffffff;
}

#blackFridayPage .divTermsAndConditionsContent
{
	color:#d8d4ea;
	font-size:14px;
	font-weight:500;
	line-height:1.5;
	max-height:calc(100vh - 122px);
	overflow-y:auto;
	padding-right:22px;
}

#blackFridayPage .divTermsAndConditionsContent p
{
	margin:0px 0px 6px;
}

#blackFridayPage .divTermsAndConditionsContent a
{
	color:var(--colorLilac);
}

#blackFridayPage .divTermAndConditionsHeading
{
	color:#ffffff;
	font-size:22px;
	font-weight:900;
	letter-spacing:1px;
	text-align:center;
}

#blackFridayPage .divTermAndConditionsSubHeading
{
	color:var(--colorLilac);
	font-size:12px;
	font-weight:800;
	letter-spacing:2.5px;
	margin:4px 0px 16px;
	text-align:center;
}

/* MOBILE - same 800px switch as the Maldives page: mobile background and narrower layout */
@media (max-width: 800px)
{
	#blackFridayPage .divPageBackground
	{
		background-image:url('images/backgroundMobile.webp'), linear-gradient(180deg, #9a6fd0 0%, #5a48c4 14%, #2b2a7a 34%, #11113a 58%, #07071c 100%);
	}

	#blackFridayPage #imgPageHeading
	{
		margin-top:8px;
		width:460px;
	}
}

@media (max-width: 500px)
{
	#blackFridayPage #divOfferTabs, #blackFridayPage #divCashbackTiers, #blackFridayPage .divTrackerStats, #blackFridayPage #divTrackerTiers
	{
		gap:8px;
	}

	#blackFridayPage .divOfferTab
	{
		font-size:12px;
		letter-spacing:1px;
	}

	#blackFridayPage .divOfferHeading
	{
		font-size:30px;
	}

	#blackFridayPage .divCashbackTierLabel
	{
		font-size:11px;
	}

	#blackFridayPage .divCashbackTierRate
	{
		font-size:32px;
	}

	#blackFridayPage #divCashbackTracker
	{
		padding:14px 12px;
	}

	#blackFridayPage .divTrackerHeading
	{
		font-size:12px;
		letter-spacing:1.5px;
	}

	#blackFridayPage .divTrackerStat
	{
		font-size:9px;
		letter-spacing:0.5px;
		padding:9px 3px;
	}

	#blackFridayPage .divTrackerStat span
	{
		font-size:14px;
	}

	#blackFridayPage .divTrackerCashback
	{
		padding:8px 12px;
	}

	#blackFridayPage .divTrackerCashbackLabel
	{
		font-size:10px;
		letter-spacing:1px;
	}

	#blackFridayPage #divCashbackSoFar
	{
		font-size:24px;
	}

	#blackFridayPage #divCashbackBreakdown
	{
		font-size:10px;
	}

	#blackFridayPage .divTrackerTier
	{
		font-size:13px;
	}

	#blackFridayPage .divTermsAndConditionsPopup
	{
		padding:30px 4px 20px 18px;
		top:16px;
	}

	#blackFridayPage .divTermsAndConditionsContent
	{
		padding-right:14px;
	}
}

@media (prefers-reduced-motion: reduce)
{
	#blackFridayPage .divOffer, #blackFridayPage .divTrackerLive::before, #blackFridayPage #divTermsAndConditions.show
	{
		animation:none !important;
	}
}