/* Base Styles (default for mobile-first) */
* {
	padding: 0;
	margin: 0;
	font-family: system-ui, sans-serif;
}

:root {
	--primary: #eff3f5;
	--primary-100: #00a1e5;
	--primary-200: #0076a9;
	--primary-300: #00648f;
	--primary-400: #004766;
	--primary-500: #00374f;
	--primary-700: #008061;
	--primary-800: #03624b;

	--secondary-600: #1a7ca0;
	--h3-font-size: 24px;
	--game-provider-offset: 68px;
	--secondary-100: #d4f3f9; /*secondary -50*/
	--secondary-200: #f50093; /* #cde3e8; */
	--secondary-800: #1f536b;
	--secondary-900: #1a3c4e; /* secondary -600 */
	--secondary-950: #0e2c3e;
	--neutral-100: #ffffff;
	--neutral-50: #ffffff;
	--page-margin-offset: 16px;
}

html,
body {
	height: 100%;
}

#wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#content {
	flex-grow: 1;
}

.margin-left-auto {
	margin-left: auto;
}

.margin-right-auto {
	margin-right: auto;
}

.color-primary-400 {
	color: var(--primary-400);
}

.color-primary-500 {
	color: var(--primary-500);
}

.bg-color-primary-200 {
	background-color: var(--primary-200);
}

a {
	all: unset;
	cursor: pointer;
}

.bg-color-primary-100 {
	background-color: var(--primary-100);
}

.border-0 {
	border: 0;
}

.height-1 {
	height: 1px;
}

.bg-color-primary-700 {
	background-color: #008061;
}

.bg-color-tertiary-500 {
	background-color: #fcac28;
}

.bg-image-tertiary-500 {
	background-image: linear-gradient(180deg, #ffc933 0%, #f7901d 100%);
}

.bg-color-secondary-900 {
	background-color: var(--secondary-900);
}

h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
p {
	color: var(--primary-500);
}

/* hr {
	border: solid 1px var(--secondary-800);
} */

details > summary {
	list-style: none;
}
details > summary::-webkit-details-marker {
	display: none;
}

details {
	background-color: #ffffff;
	border: solid 1px var(--secondary-900);
	border-radius: 8px;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
	max-width: 994px;
}

summary {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: var(--page-margin-offset);
	margin-block: 17px;
	gap: 8px;
	cursor: pointer;
}

summary .text {
	width: 100%;
}

.details-text {
	margin-inline: 32px;
	margin-top: 24px;
	margin-bottom: 32px;
}

.seo-content-title {
	color: var(--secondary-950);
}

.seo-content {
	color: var(--secondary-950);
	margin-inline: var(--page-margin-offset);
}

.collapsible-content {
	margin-inline: var(--page-margin-offset);
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: calc(100% - var(--page-margin-offset));
	align-items: center;
}

details summary .icon {
	display: inline-block;
	width: 20px; /* Set the width of the icon */
	height: 20px; /* Set the height of the icon */
	background-image: url('assets/images/icons/accordion-open.svg');
	background-size: cover;
	transition: transform 0.3s ease-in-out;
}

/* When <details> is open, change the icon */
details[open] summary .icon {
	background-image: url('assets/images/icons/accordion-closed.svg');
	transform: rotate(180deg); /* Optional: Adds a rotation effect */
}

.section-subtitle {
	margin-top: 24px;
}

.action-button {
	background-color: var(--neutral-50);
	/* border: 1px solid var(--secondary-900); */
	border-radius: 40px;
	padding-inline: 40px;
	padding-block: 8px;
	width: fit-content;
	height: fit-content;
}

.compliance-icons,
.payment-provider-icons {
	display: flex;
	gap: 10px;
}

.swiper-slide .game-item {
	width: 150px;
}

.game-item:first-child {
	margin-left: 16px;
}

.game-item:last-child {
	margin-right: 16px;
}

#casino-section {
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.highlights-item:first-child {
	margin-left: var(--page-margin-offset);
}

.highlights-item:last-child {
	margin-right: var(--page-margin-offset);
}

.highlights-item-title {
	color: var(--neutral-50);
	background-color: var(--primary-700);
	padding: 8px;
}

.casino-providers {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	flex-wrap: wrap;
	margin-top: var(--game-provider-offset);
}

.highlights-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 320px;
	height: 200px;
	background-image: url(https://placehold.co/320X200);
	flex: 0 0 auto;
}

.casino-highlights {
	width: 100vw;
	display: flex;
	overflow-x: auto;
	gap: 16px;
	margin-inline: var(--page-margin-offset);
	scroll-behavior: smooth;
	align-items: center;
	/* justify-content: center; */
}

.casino-highlights img {
	border-radius: 4px;
}

.game-list {
	width: 100vw;
	display: flex;
	overflow-x: auto;
	gap: 8px;
	margin-inline: var(--page-margin-offset);
	scroll-behavior: smooth;
	/* justify-content: center; */
	align-items: center;
}

.payment-provider-icons img {
	/* filter: invert(100%) brightness(2); */
	fill: white;
}

.game-item {
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	width: 168px;
	flex: 0 0 auto;
}

.game-item .jackpot {
	display: block;
	width: 100%;
	text-align: center;
	background-color: #1a3c4e;
	color: #fff;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

.game-item .game-details {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
}

.game-item .game-details .game-title {
	width: 70%;
}

.game-item .game-image {
	background-image: url(https://placehold.co/168x194);
	background-size: fill;
	width: 100%;
	height: 193px;
	display: flex;
	flex-direction: column;
	border-radius: 4px;
}

.section-container {
	background-color: var(--neutral-100);
}

.section-content {
	/* margin-inline: var(--page-margin-offset); */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.section-title {
	margin-top: 16px;
	font-size: var(--h3-font-size);
}

footer {
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--primary-100);
	color: var(--neutral-100);
}

.footer-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	margin-top: 48px;
}

.providers-section {
	/* border: 1px solid var(--secondary-800); */
	border-radius: 8px;
	margin-inline: var(--page-margin-offset);
}

.providers-section span {
	color: var(--neutral-100);
}

.provider-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px;
}

.responsible-gambling {
	text-align: center;
	justify-content: center;
	align-items: center;
}

.scroll-section,
.help-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-block: 12px;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin-inline: var(--page-margin-offset);
	margin-top: 24px;
	margin-bottom: 24px;
}

.help-button {
	/* background-color: var(--primary-300); */
	padding-block: 8px;
	width: 100%;
	border-radius: 4px;
	height: fit-content;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.help-button span {
	color: var(--neutral-50);
}

.compliance-text {
	color: var(--neutral-100);
}

/* Technical debt :D */
.no-margin {
	margin-inline: 0;
}

/* Media Queries for Breakpoints */

/* Small devices (mobile) - 320px */
@media (min-width: 320px) {
}

/* Medium devices (tablets) - 576px */
@media (min-width: 576px) {
	:root {
			--page-margin-offset: 24px;
	}

	.help-button {
			max-width: 300px;
	}
}

/* Large devices (small laptops and desktops) - 1024px */
@media (min-width: 1024px) {
	:root {
			--h3-font-size: 32px;
			--game-provider-offset: 56px;
			--page-margin-offset: 32px;
	}

	.casino-highlights {
			margin-inline: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			justify-content: center;
			width: auto;
	}

	.game-list {
			justify-content: center;
			width: auto;
	}

	.highlights-item {
			flex: 1;
			height: 200px;
	}

	.highlights-item:first-child {
			margin-left: 0;
	}

	.highlights-item:last-child {
			margin-right: 0;
	}

	.seo-content {
			margin-inline: 196px;
	}
}

/* Extra Large devices (large desktops) - 1440px */
@media (min-width: 1440px) {
	:root {
			--page-margin-offset: 240px;
	}

	.game-list {
			margin-inline: 0;
	}

	summary {
			margin-inline: 16px;
	}

	.seo-content {
			margin-inline: 393px;
	}
}

/* RESET? */
* {
	padding: 0;
	margin: 0;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
}

body {
	font-family: system-ui, sans-serif;
}

/* TAILFIRE */

.background-color-white {
	background-color: white;
}

.background-color-off-white {
	background: #f8f5f9;
}

.background-color-red {
	background-color: red;
}

.background-color-purple {
	background-color: purple;
}

.padding-5 {
	padding: 5px;
}

.padding-10 {
	padding: 10px;
}

.padding-16 {
	padding: 16px;
}

.padding-20 {
	padding: 20px;
}

.padding-top-10 {
	padding-top: 10px;
}

.padding-top-20 {
	padding-top: 20px;
}

.padding-left-0 {
	padding-left: 0;
}

.padding-right-0 {
	padding-right: 0;
}

.padding-left-10 {
	padding-left: 10px;
}

.padding-right-10 {
	padding-right: 10px;
}

.padding-left-16 {
	padding-left: 16px;
}

.padding-right-16 {
	padding-right: 16px;
}

.padding-left-20 {
	padding-left: 20px;
}

.padding-right-20 {
	padding-right: 20px;
}

.padding-bottom-10 {
	padding-bottom: 10px;
}

.padding-bottom-20 {
	padding-bottom: 20px;
}

.padding-bottom-30 {
	padding-bottom: 30px;
}

.padding-top-30 {
	padding-top: 30px;
}

.padding-top-8 {
	padding-top: 8px;
}

.padding-bottom-8 {
	padding-bottom: 8px;
}

.padding-top-12 {
	padding-top: 12px;
}

.padding-bottom-12 {
	padding-bottom: 12px;
}

.padding-top-16 {
	padding-top: 16px;
}

.padding-bottom-16 {
	padding-bottom: 16px;
}

.margin-top-20 {
	margin-top: 20px;
}

.margin-left-8 {
	margin-left: 8px;
}

.margin-left-10 {
	margin-left: 10px;
}

.margin-right-10 {
	margin-right: 10px;
}

.margin-left-16 {
	margin-left: 16px;
}

.margin-right-16 {
	margin-right: 16px;
}

.margin-bottom-10 {
	margin-bottom: 10px;
}

.margin-bottom-20 {
	margin-bottom: 20px;
}

.margin-top-30 {
	margin-top: 30px;
}

.margin-bottom-30 {
	margin-bottom: 30px;
}

.margin-bottom-40,
.page-welcome #banner.margin-bottom-40 {
	margin-bottom: 40px;
}

.margin-bottom--60 {
	margin-bottom: -60px;
}

.text-decoration-underline {
	text-decoration: underline;
}

.flex {
	display: flex;
}

.flex-direction-column {
	flex-direction: column;
}

.flex-direction-row {
	flex-direction: row;
}

.flex-shrink-0 {
	flex-shrink: 0;
}

.flex-no-wrap {
	flex-wrap: nowrap;
}

.flex-wrap {
	flex-wrap: wrap;
}

.justify-space-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

.align-items-center {
	align-items: center;
}

.gap-8 {
	gap: 8px;
}

.gap-10 {
	gap: 10px;
}

.gap-20 {
	gap: 20px;
}

.width-100p {
	width: 100%;
}

.width-150 {
	width: 150px;
}

.width-230 {
	width: 230px;
}

.width-300 {
	width: 300px;
}

.width-320 {
	width: 320px;
}

.width-400 {
	width: 400px;
}

.width-1000 {
	width: 1000px;
}

.text-align-center {
	text-align: center;
}

.filter-invert {
	filter: invert(1);
}

.display-inline-block {
	display: inline-block;
}

.bold-800 {
	font-weight: 800;
}

.font-size-14 {
	font-size: 14px;
}

.font-size-22 {
	font-size: 22px;
}

.font-size-32 {
	font-size: 32px;
}

.color-red {
	color: red;
}

.color-purple {
	color: #37194f;
}

.border-radius-4 {
	border-radius: 4px;
}

.border-radius-6 {
	border-radius: 6px;
}

.border-radius-40 {
	border-radius: 40px;
}

.drop-shadow-01 {
	box-shadow: 0px 10px 20px 0px #15002b1a;
}

.border-purple {
	border: 1px solid purple;
}

.border-gray {
	border: 1px solid #bdbdbd;
}

.border-bottom-1 {
	border-bottom: solid 1px;
}

.border-color-off-wite {
	border-color: #f5f5f5;
}

.overflow-x-auto {
	overflow-x: auto;
}

.box-sizing-border-box {
	box-sizing: border-box;
}

/* WIDGETS */

.widget.button a {
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	display: inline-block;
	/* background-color: green; */
	padding: 8px 16px;
	border-radius: 6px;
}
.widget.button.button-naked a {
	background-color: transparent;
}

/* RESPONSIVE */

/* MISC */
.hide {
	display: none;
}

/* TEMP */
.scaffold #wrapper > .wrapper {
	background-color: aliceblue;
}

.scaffold #wrapper > .wrapper:nth-child(even) {
	background-color: antiquewhite;
}

.scaffold .widget {
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

.special-text {
	position: relative;
	max-height: 174px;
	overflow: hidden;
	transition: max-height 1s ease;

	&.-expanded {
			max-height: fit-content;
	}
}

.special-text:not(.-expanded)::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(rgba(248, 248, 248, 0), rgba(248, 248, 248, 1));
}

.expand-button {
	color: var(--secondary-600);
	margin-bottom: 16px;
	text-decoration: underline;
}

/* ########### */

:root {
	--temp-blue: #0076a9;
	--color-alert-stroke-succes: #d3eee3;
	--color-alert-succes: #00513e;
	--color-alert-green: #94c7b4;
}

body {
	background: var(--primary);
}

.position-relative {
	position: relative;
}

.position-absolute {
	position: absolute;
}

.z-index-1 {
	z-index: 1;
}

.width-70 {
	width: 70px;
}

.top-n35 {
	top: -35px;
}

.color-primary-300 {
	color: var(--primary-300);
}

.gap-5 {
	gap: 5px;
}

.opacity-75 {
	opacity: 0.75;
}

.height-20 {
	height: 20px;
}

.max-width-304 {
	width: 100%;
	max-width: 304px;
}

.margin-bottom-5 {
	margin-bottom: 5px;
}

.margin-bottom-16 {
	margin-bottom: 16px;
}

.margin-bottom-24 {
	margin-bottom: 24px;
}

.padding-top-0 {
	padding-top: 0;
}

.padding-top-16 {
	padding-top: 16px;
}

.padding-top-32 {
	padding-top: 32px;
}

.padding-bottom-16 {
	padding-bottom: 16px;
}

.padding-8 {
	padding: 8px;
}

.padding-12p5,
.widget.button a.padding-12p5 {
	padding: 12.5px;
}

.width-100vw {
	width: 100vw;
}

.sticky {
	position: fixed;
	top: 0;
	z-index: 99;
	width: 100%;
	box-sizing: border-box;
}

.color-blue-green {
	color: #008061;
}

.border-color-gray {
	border-color: #dcdcdc;
}

.color-white,
.widget.button a.color-white {
	color: #fff;
}

.bg-color-pink-gradient-100 {
	background-image: linear-gradient(
			180deg,
			#fa57cc 0%,
			#f444b8 26.85%,
			#ed30a3 51.39%,
			#e51e8d 85.97%,
			#bb116d 100%
	);
}

.font-size-12 {
	font-size: 12px;
}

.font-size-16 {
	font-size: 16px;
}

.font-size-24 {
	font-size: 24px;
}

.font-size-38 {
	font-size: 38px;
}

.font-size-40 {
	font-size: 40px;
}

.font-weight-700 {
	font-weight: 700;
}

.line-height-1-2 {
	line-height: 1.2;
}

.line-height-1-4 {
	line-height: 1.4;
}

.bg-color-primary-800 {
	background-color: #03624b;
}

.width-327 {
	width: 327px;
}

.width-343 {
	width: 343px;
}

.max-width-unset {
	max-width: unset;
}

.margin-top-0 {
	margin-top: 0;
}

.margin-16 {
	margin: 16px;
}

.margin-left-0 {
	margin-left: 0;
}

.list-style-none {
	list-style: none;
}

.margin-right-0 {
	margin-right: 0;
}

.font-weight-normal,
.widget.button a.font-weight-normal {
	font-weight: normal;
}

.padding-9,
.widget.button a.padding-9 {
	padding: 9px;
}

.padding-11 {
	padding: 11px;
}

.padding-bottom-5 {
	padding-bottom: 5px;
}

.border-radius-8 {
	border-radius: 8px;
}

.top-unset {
	top: unset;
}

.widget.button a.border-radius-0,
.border-radius-0 {
	border-radius: 0;
}

.transition-all {
	transition: all;
}

.transition-duration-p25s {
	transition-duration: 0.25s;
}

.height-54 {
	height: 54px;
}

.widget.button a.flex {
	display: flex;
}

.opacity-0 {
	opacity: 0;
}

.opacity-1 {
	opacity: 1;
}

.bottom-n54 {
	bottom: -54px;
}

.bottom-0 {
	bottom: 0;
}

ol.darna {
	counter-reset: custom-counter;
	list-style: none;
	padding-left: 38px;
}

ol.darna li {
	counter-increment: custom-counter;
	position: relative;
	/* padding-left: 30px; */
}

ol.darna li::before {
	content: counter(custom-counter);
	position: absolute;
	left: -38px;
	color: var(--color-alert-succes);
	font-weight: bold;
	background-color: var(--color-alert-stroke-succes);
	height: 100%;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 8px;
	font-size: 24px;
	overflow: hidden;
	width: 32px;
	border: 1px solid var(--color-alert-green);
}

@media (min-width: 1024px) {
	ol.darna {
			padding-left: 0;
			gap: 24px;
	}

	ol.darna li {
			width: 100%;
			margin-left: 32px;
			box-sizing: border-box;
	}

	/* ol.darna li::before {
			left: 0;
	} */
}

/* Style the counter with ::marker for more basic use */
/* ol.darna li::marker {
	color: red;
	font-size: 18px;
	font-weight: bold;
} */

.widget.button a {
	color: #4d002e;
	text-transform: unset;
}

.widget.button.button-naked a {
	color: #fff;
	font-weight: normal;
}

/* START: /welcome/ */
.page-welcome #banner:before,
.page-welcome #banner:after {
	background-color: var(--temp-blue);
}

.page-welcome #banner {
	padding-bottom: 35px;
	margin-bottom: -30px;
}

/* END: /welcome/ */

/* green thing */
#banner {
	position: relative;
	padding-bottom: 50px;
	margin-bottom: -40px;
	background-color: var(--primary-100);
	background-image: url('/assets/images/banners/bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	clip-path: ellipse(300% 100% at 50% 0%);
}
#banner::before,
#banner::after {
	content: ' ';
	height: 100%;
	width: 50%;
	/* background: #f06; */
	background-color: var(----primary-500);
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: 0;
	border-radius: 100% / 3%;
	box-sizing: border-box;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background-image: url('/assets/images/banners/bg.png');
	display: none;
}
/* banner container */
#banner > .parent {
	position: relative;
	z-index: 1;
}

#banner::before {
	border-bottom-left-radius: 0;
}

#banner::after {
	/* background-color: aquamarine; */
	left: 0;
	border-bottom-right-radius: 0;
}

/* CTA */
#cta {
	position: relative;
	z-index: 1;
}

@keyframes neon-pulse {
	0%, 100% {
			box-shadow: 0 0 5px #ff0066, 0 0 10px #ff0066, 0 0 20px #ff0066, 0 0 40px #ff0066, 0 0 80px #ff0066;
	}
	50% {
			box-shadow: 0 0 10px #ff0066, 0 0 20px #ff0066, 0 0 30px #ff0066, 0 0 50px #ff0066, 0 0 100px #ff0066;
	}
}

.pulse-neon {
	animation: neon-pulse .5s infinite alternate;
}


/* RESPONSIVE */
@media (min-width: 1024px) {
	/* green thing */
	#banner::before,
	#banner::after {
			border-radius: 100% / 20%;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
	}
	#banner::before {
			border-bottom-left-radius: 0;
	}
	#banner::after {
			border-bottom-right-radius: 0;
	}

	.l-max-width-400 {
			max-width: 400px;
	}

	.l-width-1000 {
			width: 1000px;
	}

	.l-hide {
			display: none;
	}

	.l-margin-left-0 {
			margin-left: 0;
	}

	.l-margin-right-0 {
			margin-right: 0;
	}

	.l-flex-direction-row {
			flex-direction: row;
	}

	.l-justify-space-around {
			justify-content: space-around;
	}

	.l-flex-basis-100p {
			flex-basis: 100%;
	}

	.l-padding-left-0 {
			padding-left: 0;
	}

	.l-padding-right-0 {
			padding-right: 0;
	}

	.l-justify-center {
			justify-content: center;
	}

	.l-flex-wrap {
			flex-wrap: wrap;
	}
}

@media (min-width: 1440px) {
	#banner {
			clip-path: ellipse(80% 100% at 50% 0%);
	}
}