@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

@keyframes slideIn {
	0% {
		transform: translateX(120%);
		opacity: 0;
	}

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

@keyframes slideUp {
	0% {
		transform: translateY(120%);
		opacity: 0;
	}

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

@keyframes slideDown {
	0% {
		transform: translateY(-120%);
		opacity: 0;
	}

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

@keyframes rotateX {
	0% {
		transform: rotateX(90deg);
		opacity: 0;
	}

	100% {
		transform: rotateX(0deg);
		opacity: 1;
	}
}

@keyframes shadowPulse {

	0%,
	100% {
		box-shadow:
			0 10px 15px -3px rgb(var(--surface-500) / 1),
			0 4px 6px -4px rgb(var(--surface-500) / 1);
	}

	50% {
		box-shadow:
			0 8px 10px -3px rgb(var(--surface-700) / 1),
			0 3px 5px -4px rgb(var(--surface-700) / 1);
	}
}

:root {
	--subBlockBG: var(--quinary-300);
}

html {
	background-color: rgb(var(--blockBG));
}

/* DATE Picker */

.air-datepicker-global-container {
	z-index: 999999;
}

header {
	height: 3.5rem;
	max-height: 3.5rem;
	display: block;
}

/*  */

.base-wrapper {
	display: flex;
	justify-content: center;
	background-color: rgb(var(--blockBG));
}

.containerPlayerHistory .base-wrapper.center {
	width: 100%;
}

.containerPlayerHistory>.base-wrapper>div>p {
	color: rgb(var(--primary-300));
}

.base-wrapper {
	min-height: 100vh;
}

.base {
	width: 100%;
	max-width: 2560px;
	background-color: rgb(var(--blockBG));
}

/* SIDEBAR */

.base aside.sidenav {
	position: sticky;
	top: 0px;
	max-height: 100vh;
	overflow-y: auto;
	padding-bottom: 1rem;
	/* border-right: 1px solid rgb(var(--surface-700)); */
}

.base .infonav {
	height: 100svh;
	max-height: 100vh;
	position: sticky;
	top: 0px;
	/* h-[calc(100vh-3.5rem)] */
}

.dark {
	--subBlockBG: var(--quinary-600);
}

/* CONTENT */

.base main {
	/* w-[calc(100%-13rem)] */
	height: 100%;
	max-height: 100vh;
	width: 100%;
	padding-top: 0px;
}

@media (min-width: 640px) {
	.base main {
		height: calc(100vh - 3.5rem);
	}
}

.base main {
	position: relative;
	border-top-left-radius: 0.375rem;
	border-top-right-radius: 0.375rem;
	border-top-width: 1px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-color: rgb(var(--surface-300) / 0.3);
	--bgOne:
		radial-gradient(farthest-corner at 92% 100%, #273362ff 0%, #27336200 36%),
		radial-gradient(farthest-corner at 0% 0%, #273362ff 0%, #101226ff 62%);
	--bgTwo:
		radial-gradient(farthest-corner at 92% 100%, #273362ff 0%, #27336200 36%),
		radial-gradient(farthest-corner at 0% 0%, #212c54ff 0%, #101226ff 62%);
	/* background-color: #e5e5f7; */
	/* background-image: radial-gradient(rgb(var(--surface-900)) 0.5px, rgb(var(--surface-800)) 0.8px); */
	/* background-image: radial-gradient(rgb(35 35 149) 0.5px, rgb(6 7 31) 0.8px);
		background-size: 10px 10px; */
	background: var(--bgTwo);
}

.base main .hero-bottom {
	display: block;
}

.base main .hero-bottom img {
	width: 100%;
	height: auto;
	border-radius: 1rem;
	border: 1px solid rgb(var(--surface-50) / 0.1);
	transition: all 0.3s ease;
	display: block;
}

.hero.hero-home.hero-bottom img:hover {
	transform: translateY(-4px);
	border-color: rgb(var(--primary-400) / 0.5);
	box-shadow:
		0 10px 20px -5px rgba(0, 0, 0, 0.5),
		0 0 15px rgb(var(--primary-500) / 0.1);
}

.hero-bottom {
	display: flex;
	gap: 1.5rem;
	margin-top: 2rem;
}

@media (max-width: 1024px) {
	.hero {
		gap: 0.75rem;
	}
}

@media (max-width: 640px) {
	.hero.hero-home.hero-bottom {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 0.5rem !important;
		justify-content: center;
	}

	.hero.hero-home.hero-bottom a,
	.hero.hero-home.hero-bottom div {
		flex: 0 0 calc(50% - 0.25rem) !important;
	}

	.hero img {
		border-radius: 0.5rem;
	}

	.hero.hero-home.hero-bottom img {
		border-radius: 0.5rem;
	}

	#chat_button_adaptive_container {
		bottom: 70px !important;
	}

	#announcement .modalContainer {
		margin: auto;
		justify-content: center;
	}
}

.headerContent {
	height: 3.5rem;
	max-height: 3.5rem;
}

.headerContent .left {
	display: flex;
	min-width: 0px;
}

.containerPlayerHistory .headerContent .left.center {
	width: 100%;
}

.containerPlayerHistory>.headerContent .left>div>p {
	color: rgb(var(--primary-300));
}

.headerContent .mid {
	align-items: center;
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.headerContent .mid {
		display: flex;
	}
}

.headerNavDropdown {
	background-color: rgb(var(--surface-700) / 0.8) !important;
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -4px rgba(0, 0, 0, 0.1);
	border-radius: 0.75rem;
	padding: 0.25rem;
}

@media (min-width: 640px) {
	.headerNavDropdown {
		padding: 0.5rem;
	}
}

/* Mobile: Slim dropdown with reduced padding */
@media (max-width: 1024px) {
	.container {
		margin: 0 auto !important;
	}
}

@media (max-width: 640px) {
	.menuTitle {
		display: none !important;
	}

	.filterProvider span {
		display: none !important;
	}

	.headerNavDropdown {
		padding: 0.125rem;
	}

	.headerNavDropdownTop {
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	.linkProfileMenu {
		height: 2rem;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		font-size: 0.75rem;
		line-height: 1rem;
	}

	/* Slim all dropdowns, accordions, and collapsible elements on mobile */

	details,
	.accordion,
	.dropdown,
	summary {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		font-size: 0.875rem;
		line-height: 1.25rem;
	}

	summary {
		min-height: 2.5rem;
	}

	/* Reduce spacing in page article content */

	.pageArticle {
		gap: 0.75rem;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.pageArticleBody {
		gap: 0.5rem;
	}
}

.loyaltyStatus p {
	color: rgb(var(--surface-200));
}

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

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

.dark .carousel {
	background-color: transparent !important;
}

/* .carousel {
    margin: 10px 0px !important;
} */

.carousel {
	/* margin: 10px -20px !important; */
}

@media (min-width: 1280px) {
	.carousel {
		/* margin: 10px -50px !important; */
	}
}

.hero-top.hero-home>*:last-child {
	margin: 0 -10px !important;
}

.hero-top.hero-home>*:first-child {
	margin: 0 -10px !important;
}

@media (min-width: 1280px) {
	.hero-top.hero-home>*:last-child {
		margin: 0 -80px 0 0 !important;
	}

	.hero-top.hero-home>*:first-child {
		margin: 0 0 0 -50px !important;
	}
}

/* SideBar Navigation */

aside.sidenav .navDefault,
aside.sidenav .navUser,
aside.sidenav .navFastLinks {
	gap: 0.25rem;
}

.navFastLinks {
	position: sticky;
	top: 1.25rem;
}

/* SIDEBAR */

aside.sidenav .navDefault,
aside.sidenav .navUser {
	padding-bottom: 1rem;
}

aside.sidenav .navBarLink {
	font-family: 'Jost', sans-serif;
	padding-left: 1rem;
	padding-right: 1rem;
}

aside.sidenav .navBarLink>svg {
	margin-right: 1rem;
	height: 1.25rem;
	width: 1.25rem;
}

aside.sidenav>div:not(:last-of-type) {
	border-bottom-width: 1px;
	border-color: rgb(var(--surface-300) / 0.5);
}

/* Game Type Category Page Filters: */

.filterFirstLine .filterCategory {
	background-color: rgb(var(--blockBG) / 0.5);
}

.filterFirstLine .filterCategory.selected {
	color: rgb(var(--primary-500));
	background-color: rgb(var(--blockBG));
}

.filterSecondLine .filterProvider {
	border-radius: 0.75rem;
	border-width: 1px;
	border-color: rgb(var(--surface-200) / 0.2);
	background-color: rgb(var(--blockBG) / 0.5);
}

.filterFirstLine .filterCategory {
	border-radius: 0.75rem;
	border-width: 1px;
	border-color: rgb(var(--surface-200) / 0.1);
	background: radial-gradient(circle at 50% 50%,
			rgb(var(--surface-600) / 0.2),
			rgb(var(--surface-800) / 0.5));
}

/* Game Category Titles */

.gameCategoryTitle.text-sectionTitle {
	color: rgb(var(--secondary-300));
}

/* Game Category: See more */

main a.seeMore {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.875rem;
	line-height: 1.25rem;
	text-transform: uppercase;
	color: rgb(var(--surface-200));
}

@media (min-width: 640px) {
	main a.seeMore {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

/* Search */

.searchBar {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.searchBar input.filterSearch,
.searchBar select.gameTypeSelector,
.searchBar .providerSelector {
	border-radius: 0.75rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	background-color: rgb(var(--surface-800) / 0.7);
	color: rgb(var(--primary-50));
	border-color: rgb(var(--surface-50) / 0.1);
}

.searchBar input.filterSearch:focus,
.searchBar select.gameTypeSelector:focus,
.searchBar .providerSelector:focus {
	border-color: rgb(var(--surface-50) / 0.2);
	background-color: rgb(var(--surface-800));
}

.searchBar .providerSelector,
.searchBar select.gameTypeSelector {
	border-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: none;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

.searchBar .providerSelector:focus,
.searchBar .providerSelector:active,
.searchBar .providerSelector:focus-visible,
.searchBar select.gameTypeSelector:focus,
.searchBar select.gameTypeSelector:active,
.searchBar select.gameTypeSelector:focus-visible {
	outline: none;
	border-color: transparent;

	.searchBar .filterSearchResults {
		display: none !important;
	}
}

/* Result Holder */

.searchBar .filterSearchResults {
	width: 100%;
	background-color: rgb(var(--surface-900) / 0.7);
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
	background-color: rgb(var(--blockBG) / 0.5);
	justify-content: space-evenly;
}

.searchBar .filterSearchResults>div:hover {
	background-color: rgb(var(--surface-600));
}

/* Jackpot Bar */

.infonav .jackpotBar .jackpotItem {
	transform: translateX(120%);
	animation: slideIn 1s ease-in-out forwards;
	animation-delay: calc(var(--i) * 0.2s);
}

/* Jackpot Block */

.jackpotBlock .jPage {
	position: absolute;
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.containerPlayerHistory .jackpotBlock .jPage {
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.containerPlayerHistory .jackpotBlock .jPage {
		gap: 1rem;
	}
}

.jackpotBlock .jackpotItem {
	transform: rotateX(90deg);
	animation: rotateX 1s ease-in-out forwards;
	animation-delay: calc(var(--i) * 0.2s);
}

/* 
	.jackpotBlock .jackpotItem:nth-child(-n + 4) {
		transform: translateY(-120%);
		animation: slideDown 1s ease-in-out forwards;
		animation-delay: calc(var(--i) * 0.2s);
	}

	.jackpotBlock .jackpotItem:last-child(-n + 4) {
		transform: translateY(-120%);
		animation: slideDown 1s ease-in-out forwards;
		animation-delay: calc(var(--i) * 0.2s);
	} */

/* Player Profile */

.playerCard,
.profileSection {
	background-color: rgb(var(--subBlockBG));
}

.paymentMethodsContainer .paymentMethod {
	background-color: rgb(var(--quinary-400));
}

.profileMenu .btnSecondary {
	border-radius: 0.75rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	background-color: rgb(var(--surface-800) / 0.7);
	color: rgb(var(--primary-50));
	border-color: rgb(var(--surface-50) / 0.1);
}

.profileMenu .btnSecondary:focus {
	border-color: rgb(var(--surface-50) / 0.2);
	background-color: rgb(var(--surface-800));
}

.profileMenu .btnSecondary.hollow {
	background-color: transparent;
	color: rgb(var(--primary-50));
	animation: shadowPulse 3s infinite;
}

.walletActions {
	border-color: rgb(var(--surface-50) / 0.1);
}

.walletActionsBtn {
	border-color: rgb(var(--surface-50) / 0.2);
	background-color: rgb(var(--blockBG) / 0.8);
	color: rgb(var(--primary-50));
	color: white;
}

.walletActionsBtnWithdraw {
	border-color: rgb(var(--primary-400) / 0.6);
	background-color: rgb(var(--primary-500) / 0.8);
	color: white;
}

.profileTabs {
	border-color: rgb(var(--surface-50) / 0.1);
}

.pageLayoutSidebarInner {
	border-color: rgb(var(--surface-50) / 0.2) !important;
	background-color: rgb(var(--blockBG)) !important;
	color: rgb(var(--primary-50)) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.pageArticle {
	border-color: rgb(var(--surface-50) / 0.2) !important;
	background-color: rgb(var(--blockBG)) !important;
	color: rgb(var(--primary-50)) !important;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.sm-mob>div {
	gap: 0.5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* Mobile Side Menu Links */

.sm-mob .linkStyled {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0.75rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}

.containerPlayerHistory .sm-mob .linkStyled.center {
	width: 100%;
}

.containerPlayerHistory>.sm-mob .linkStyled>div>p {
	color: rgb(var(--primary-300));
}

.sm-mob .linkStyled {
	background-color: rgb(var(--surface-800) / 0.4);
	color: rgb(var(--primary-50));
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
	white-space: nowrap;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow:
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.sm-mob .linkStyled:hover {
	border-color: rgb(var(--primary-400) / 0.3);
	background-color: rgb(var(--surface-700) / 0.6);
	color: rgb(var(--primary-100));
}

.sm-mob .linkStyled[aria-selected='true'] {
	border-color: rgb(var(--primary-500) / 0.5);
	background-color: rgb(var(--primary-600) / 0.2);
	color: rgb(var(--primary-50));
}

.sm-mob .linkStyled svg {
	color: rgb(var(--surface-400));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
	height: 1.25rem;
	width: 1.25rem;
}

.sm-mob .linkStyled:hover svg,
.sm-mob .linkStyled[aria-selected='true'] svg {
	color: rgb(var(--primary-400));
}

.pageArticlePrint {
	border-color: rgb(var(--surface-50) / 0.3);
	color: rgb(var(--primary-200));
}

.pageArticlePrint:hover {
	color: rgb(var(--primary-50));
}

.pageArticleFooter {
	color: rgb(var(--primary-200));
}

/* Header Customization for Right Sidebar */

/* CUSTOM HEADER BUTTONS */

button.btnHeader.profile,
a.btnHeader.profile {
	border: none;
	background-color: rgb(var(--primary-500));
	width: 2.5rem;
	height: 2.5rem;
}

/* button.btnHeader.profile > svg {
		position: absolute;
		transform: translateY(-50%);
		top: 85%;
		width: 3rem;
		height: 3rem;
		transition: all 0.3s;
	} */

/* button.btnHeader.profile:hover > svg {
		top: 75%;
		width: 2.5rem;
		height: 2.5rem;
	} */

button.wallet {
	width: 100px;
	position: relative;
	overflow: hidden;
	height: 3.5rem;
	margin-bottom: -1rem;
}

button.wallet .button__text {
	position: relative;
	top: -1rem;
	z-index: 10;
	color: rgb(var(--primary-500));
}

button.wallet .button__text:hover {
	top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: black;
}

button.wallet .button__text {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

button.wallet:hover .button__text {
	top: 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: black;
}

button.wallet .wallet__svg {
	position: absolute;
	width: 91px;
	top: -17px;
	aspect-ratio: 1 / 1;
}

@media (hover: hover) {
	#creditcard {
		/*  set start position */
		transform: translateY(110px);
		transition: transform 0.1s ease-in-out;
		/*  set transition for mouse enter & exit */
	}

	#money {
		/*  set start position */
		transform: translateY(180px);
		transition: transform 0.1s ease-in-out;
		/*  set transition for mouse enter & exit */
	}

	.wallet:hover #creditcard {
		transform: translateY(0px);
		transition: transform 0.2s ease-in-out;
		/*  overide transition for mouse enter */
	}

	.wallet:hover #money {
		transform: translateY(0px);
		transition: transform 0.3s ease-in-out;
		/*  overide transition for mouse enter */
	}
}

@keyframes bounce {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-0.25rem);
	}

	100% {
		transform: translateY(0);
	}
}

/* Search */

.spotlightSearch .spotlightBackdrop {
	background: rgba(0, 0, 0, 0.6);
}

@media (max-width: 640px) {
	.spotlightSearch .spotlightBackdrop {
		height: 100%;
		height: 100vh;
		height: 100dvh;
	}
}

.spotlightSearch .spotlightSearchBox {
	background-color: rgb(var(--surface-900));
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.spotlightSearch .spotlightSearchInputWrapper {
	border-bottom-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
	background-color: rgb(var(--surface-800));
}

.spotlightSearch .spotlightSearchInputWrapper:focus-within {
	border-color: rgb(var(--primary-400) / 0.5);
}

.spotlightSearch .spotlightSearchInput {
	color: rgb(var(--primary-50));
}

.spotlightSearch .spotlightSearchInput::placeholder {
	color: rgb(var(--surface-400));
}

.spotlightSearch .spotlightSearchResults {
	background-color: rgb(var(--surface-900));
}

.spotlightSearch .spotlightSearchResults::-webkit-scrollbar-track {
	background-color: rgb(var(--surface-800) / 0.5);
}

.spotlightSearch .spotlightSearchResults::-webkit-scrollbar-thumb {
	background-color: rgb(var(--surface-600));
}

.spotlightSearch .spotlightSearchResults::-webkit-scrollbar-thumb:hover {
	background-color: rgb(var(--surface-500));
}

.spotlightSearch .spotlightSearchResults {
	scrollbar-color: rgb(var(--surface-600)) rgb(var(--surface-800) / 0.5);
}

.spotlightSearch .spotlightSearchResultItem {
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
	background-color: rgb(var(--blockBG) / 0.5);
	color: rgb(var(--primary-50));
}

.spotlightSearch .spotlightSearchResultItem:hover {
	border-color: rgb(var(--surface-50) / 0.2);
	background-color: rgb(var(--surface-700) / 0.5);
}

.spotlightSearch .spotlightSearchResultItem.selected {
	border-color: rgb(var(--primary-400) / 0.5);
	background-color: rgb(var(--surface-700) / 0.7);
}

.spotlightSearch .spotlightSearchItemImage {
	background: rgba(30, 30, 50, 0.3);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.spotlightSearch .spotlightSearchItemContent:hover .spotlightSearchItemImage {
	border-color: rgba(59, 130, 246, 0.4);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(59, 130, 246, 0.2) inset,
		0 0 20px rgba(59, 130, 246, 0.1);
}

.spotlightSearch .spotlightSearchItemContent:hover .spotlightSearchItemImg {
	filter: brightness(1.1);
}

.spotlightSearch .spotlightSearchItemOverlay {
	background-color: rgb(0 0 0 / 0.3);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.spotlightSearch .spotlightSearchItemPlayIcon {
	background-color: rgb(var(--primary-500) / 0.9);
	color: white;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.spotlightSearch .spotlightSearchItemContent:hover .spotlightSearchItemPlayIcon {
	background-color: rgb(var(--primary-500));
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.spotlightSearch .spotlightSearchItemGradient {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.spotlightSearch .spotlightSearchItemName {
	color: rgb(var(--primary-50));
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.spotlightSearch .spotlightSearchItemContent:hover .spotlightSearchItemName {
	color: rgb(var(--primary-300));
}

.spotlightSearch .spotlightSearchEmptyText {
	color: rgb(var(--surface-300));
}

/* Modal - Glassmorphism & Colors */

.modal .modalBackdropBlur {
	position: fixed;
	inset: 0px;
	z-index: 9997;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
}

.modal .modalBackdrop {
	background-color: rgb(0 0 0 / 0.3);
}

@media (max-width: 640px) {
	.modal .modalBackdropBlur {
		height: 100%;
		height: 100vh;
		height: 100dvh;
		backdrop-filter: blur(25px) saturate(180%);
		-webkit-backdrop-filter: blur(25px) saturate(180%);
	}

	.modal .modalBackdrop {
		height: 100%;
		height: 100vh;
		height: 100dvh;
	}
}

.modal .modalBox {
	/* Glassmorphism Effect */
	background: rgba(30, 30, 50, 0.4);
	backdrop-filter: blur(40px) saturate(180%);
	-webkit-backdrop-filter: blur(40px) saturate(180%);
	/* Glass border */
	border: 1px solid rgba(255, 255, 255, 0.18);
	/* Glass shadow with glow */
	box-shadow:
		0 8px 32px 0 rgba(0, 0, 0, 0.37),
		0 0 0 1px rgba(255, 255, 255, 0.1) inset,
		0 0 40px rgba(59, 130, 246, 0.1);
}

.authPageCard {
	background: rgba(30, 30, 50, 0.4) !important;
	backdrop-filter: blur(40px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(40px) saturate(180%) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	box-shadow:
		0 8px 32px 0 rgba(0, 0, 0, 0.37),
		0 0 0 1px rgba(255, 255, 255, 0.1) inset,
		0 0 40px rgba(59, 130, 246, 0.1) !important;
}

/* Gradient overlay for depth */

.modal .modalBox::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	/* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); */
	pointer-events: none;
}

.modal .modalHeader {
	/* Glass border */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	/* Subtle glass background */
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.modal .modalTitle {
	color: rgb(var(--primary-400));
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.modal .modalCloseButton {
	color: rgb(var(--surface-300));
}

.modal .modalCloseButton:hover {
	color: rgb(var(--primary-50));
}

.modal .modalCloseButton {
	/* Glass button effect */
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal .modalCloseButton:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal .modalCloseButton:active {
	transform: scale(0.95);
}

.modal .modalHeaderSlot {
	background: rgba(255, 255, 255, 0.05);
}

.modal .modalBody {
	color: rgb(var(--primary-50));
	/* Subtle glass background */
	background: rgba(255, 255, 255, 0.05);
}

.modal .modalBody::-webkit-scrollbar {
	width: 6px;
}

.modal .modalBody::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
}

.modal .modalBody::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal .modalBody::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3);
}

.modal .modalBody {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.modal .modalFooter {
	/* Glass border */
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	/* Subtle glass background */
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Responsive adjustments */

@media (max-width: 640px) {
	.modal .modalBox {
		backdrop-filter: blur(35px) saturate(180%);
		-webkit-backdrop-filter: blur(35px) saturate(180%);
		width: 90vw !important;
		height: 90vh !important;
		max-width: 90vw !important;
		max-height: 90vh !important;
	}
}

/* Modal Form Elements - Maca Style */

/* Input Styles */

.modal .modalBody .loginInput,
.modal .modalBody input.loginInput,
.modal .modalBody .loginFormInput,
.modal .modalBody .registerFormInput {
	width: 100%;
	border-radius: 0.75rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	background-color: rgb(var(--surface-800) / 0.7);
	color: rgb(var(--primary-50));
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
}

.modal .modalBody .loginInput::placeholder,
.modal .modalBody input.loginInput::placeholder,
.modal .modalBody .loginFormInput::placeholder,
.modal .modalBody .registerFormInput::placeholder {
	color: rgb(var(--surface-400));
}

.modal .modalBody .loginInput,
.modal .modalBody input.loginInput,
.modal .modalBody .loginFormInput,
.modal .modalBody .registerFormInput {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	/* Glassmorphism effect */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Focus state */

.modal .modalBody .loginInput:focus,
.modal .modalBody input.loginInput:focus,
.modal .modalBody .loginFormInput:focus,
.modal .modalBody .registerFormInput:focus {
	border-color: rgb(var(--primary-400) / 0.5);
	background-color: rgb(var(--surface-800));
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Error state */

.modal .modalBody .loginInput.error,
.modal .modalBody .loginInput:invalid,
.modal .modalBody input.loginInput.error,
.modal .modalBody input.loginInput:invalid,
.modal .modalBody .loginFormInput.error,
.modal .modalBody .loginFormInput:invalid,
.modal .modalBody .registerFormInput.error,
.modal .modalBody .registerFormInput:invalid {
	border-color: rgb(var(--warning-400) / 0.5);
	box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.2);
}

/* Success state */

.modal .modalBody .loginInput.ok,
.modal .modalBody input.loginInput.ok,
.modal .modalBody .loginFormInput.ok,
.modal .modalBody .registerFormInput.ok {
	border-color: rgb(var(--success-400) / 0.5);
	box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* Disabled state */

.modal .modalBody .loginInput:disabled,
.modal .modalBody input.loginInput:disabled,
.modal .modalBody .loginFormInput:disabled,
.modal .modalBody .registerFormInput:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	background-color: rgb(var(--surface-800) / 0.4);
}

/* Button Styles */

.modal .modalBody .btnPrimary,
.modal .modalBody .btnSecondary,
.modal .modalBody button.btnPrimary,
.modal .modalBody button.btnSecondary {
	border-radius: 0.75rem;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal .modalBody .btnPrimary {
	background-color: rgb(var(--primary-500) / 0.8);
	color: rgb(var(--primary-50));
}

.modal .modalBody .btnPrimary:hover {
	box-shadow:
		0 6px 16px rgba(59, 130, 246, 0.3),
		0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.modal .modalBody .btnSecondary {
	background-color: rgb(var(--surface-700) / 0.6);
	color: rgb(var(--primary-50));
}

.modal .modalBody .btnSecondary:hover {
	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.modal .modalBody .btnSecondary.hollow {
	border-color: rgb(var(--surface-50) / 0.2);
	background-color: transparent;
	color: rgb(var(--primary-50));
}

.modal .modalBody .btnSecondary.hollow:hover {
	border-color: rgb(var(--surface-50) / 0.3);
	background-color: rgb(var(--surface-700) / 0.4);
}

/* Text and Links */

.modal .modalBody p,
.modal .modalBody span {
	color: rgb(var(--primary-50));
}

.modal .modalBody .link,
.modal .modalBody button.link,
.modal .modalBody a,
.modal .modalBody button.cursor-pointer {
	color: rgb(var(--primary-400));
}

.modal .modalBody .link:hover,
.modal .modalBody button.link:hover,
.modal .modalBody a:hover,
.modal .modalBody button.cursor-pointer:hover {
	color: rgb(var(--primary-300));
}

.modal .modalBody .link,
.modal .modalBody button.link,
.modal .modalBody a,
.modal .modalBody button.cursor-pointer {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
}

/* Button as link style */

.modal .modalBody button.cursor-pointer {
	color: rgb(var(--primary-400));
}

.modal .modalBody button.cursor-pointer:hover {
	color: rgb(var(--primary-300));
}

.modal .modalBody button.cursor-pointer {
	border-width: 0px;
	background-color: transparent;
	padding: 0px;
}

.modal .modalBody .warning {
	color: rgb(var(--warning-400));
}

/* FormLine Labels */

.modal .modalBody label,
.modal .modalBody label.text-passive-500 {
	color: rgb(var(--surface-200));
	display: block;
}

/* FormLine Container */

.modal .modalBody .mb-4 label,
.modal .modalBody .child-p\\:mb-2 label {
	color: rgb(var(--surface-200));
	background-color: rgb(var(--surface-800) / 0.5);
}

.modal .modalBody .checkbox:checked {
	background-color: rgb(var(--primary-500));
	border-color: rgb(var(--primary-500));
	-webkit-backdrop-filter: blur(10px);
}

/* Select Elements */

.modal .modalBody select {
	width: 100%;
	border-radius: 0.75rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	background-color: rgb(var(--surface-800) / 0.7);
	color: rgb(var(--primary-50));
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
}

.modal .modalBody select:focus {
	border-color: rgb(var(--primary-400) / 0.5);
	background-color: rgb(var(--surface-800));
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Modal Footer Styles */

.modal .modalFooter .btnPrimary,
.modal .modalFooter .btnSecondary,
.modal .modalFooter button.btnPrimary,
.modal .modalFooter button.btnSecondary {
	border-radius: 0.75rem;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
}

.modal .modalFooter .link,
.modal .modalFooter button.link,
.modal .modalFooter a {
	color: rgb(var(--primary-400));
}

.modal .modalFooter .link:hover,
.modal .modalFooter button.link:hover,
.modal .modalFooter a:hover {
	color: rgb(var(--primary-300));
}

.modal .modalFooter p,
.modal .modalFooter span {
	color: rgb(var(--primary-50));
}

@media (max-width: 640px) {
	.modal .modalBox {
		margin-left: 0px;
		margin-right: 0px;
	}

	.filterFirstLine .category-container {
		padding-right: 2rem;
	}
}

/* FOOTER */

footer {
	background-color: transparent;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.dark footer {
	background-color: transparent;
}

.footer-l2 div {
	flex-direction: column;
	align-items: center;
}

@media (min-width: 640px) {
	.footer-l2 div {
		flex-direction: row;
	}
}

.footer-l2 .footer-cert {
	width: 4rem;
}

.mobileNavTab .items {
	margin-right: auto;
	margin-left: 0px;
}

.mobileNavTab .brand {
	display: none;
}

.footer .ftx-ft {
	display: none;
}

@media (min-width: 640px) {
	.footer .ftx-ft {
		display: block;
	}
}

.dark footer a {
	color: rgb(var(--surface-400));
}

.dark footer a:hover {
	color: rgb(var(--surface-600));
}

footer .container {
	border-radius: 1.5rem;
	background-color: rgb(var(--surface-800));
	padding: 1rem;
}

/* Promotion Card */

.promotionCard {
	background: rgba(30, 30, 50, 0.3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(255, 255, 255, 0.1) inset;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}

.promotionCard:hover {
	background: rgba(30, 30, 50, 0.4);
	border-color: rgba(59, 130, 246, 0.3);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(59, 130, 246, 0.2) inset,
		0 0 20px rgba(59, 130, 246, 0.1);
	transform: translateY(-2px);
}

.promotionCardImage {
	background-color: rgb(100, 116, 139);
}

.promotionCardImage::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
	pointer-events: none;
}

.promotionCardGradient {
	background: linear-gradient(to bottom, transparent, rgba(30, 30, 50, 0.6));
}

.promotionCardContent {
	background-color: transparent;
}

.promotionCardTitle {
	color: rgb(var(--primary-50));
	font-family: 'Jost', sans-serif;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.promotionCardDescription {
	color: rgb(var(--surface-300));
	line-height: 1.6;
}

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

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

.promotionCardLink {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
}

/* Header Bonus Progress MAÇA */

.navBonusProgress {
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
	background-color: rgb(var(--surface-900) / 0.4);
	color: rgb(var(--primary-50));
	display: flex;
	height: 2.5rem;
	align-items: center;
}

.containerPlayerHistory .navBonusProgress.center {
	width: 100%;
}

.containerPlayerHistory>.navBonusProgress>div>p {
	color: rgb(var(--primary-300));
}

.navBonusProgress {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	--bgColor: rgb(var(--surface-700) / 1);
	--borderColor1: rgb(var(--primary-500) / 0.7);
	--borderColor2: rgb(var(--surface-100) / 0.3);
	background:
		linear-gradient(var(--bgColor), var(--bgColor)) padding-box,
		linear-gradient(var(--angle), var(--borderColor2), var(--borderColor1)) border-box;
	border: 1px solid #0000;
	animation: 4s rotate linear infinite;
}

@property --angle {
	syntax: '<angle>';

	initial-value: 0deg;

	inherits: false;
}

.navBonusProgressLabel {
	font-size: 0.5rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgb(var(--primary-300));
}

.navBonusProgressRemaining {
	color: rgb(var(--primary-100));
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.navBonusProgressText {
	color: rgb(var(--surface-200));
}

.navBonusProgressBar {
	background: rgba(255, 255, 255, 0.08);
}

.navBonusProgressFill {
	background: linear-gradient(90deg, #68d391 0%, #38bdf8 50%, #c084fc 100%);
	box-shadow: 0 0 12px rgba(104, 211, 145, 0.6);
}

.navBonusProgressMeta {
	color: rgb(var(--surface-300));
}

.navBonusProgressPercent {
	font-size: 0.7rem;
	color: rgb(var(--primary-200));
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Bonus Ready State */

.navBonusProgressReady {
	background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(30, 30, 50, 0.3) 100%);
	border-color: rgba(251, 146, 60, 0.3);
}

.navBonusProgressReady:hover {
	background: linear-gradient(135deg, rgba(251, 146, 60, 0.25) 0%, rgba(30, 30, 50, 0.35) 100%);
	border-color: rgba(251, 146, 60, 0.5);
	box-shadow:
		0 6px 20px rgba(251, 146, 60, 0.2),
		0 0 0 1px rgba(251, 146, 60, 0.3) inset,
		0 0 24px rgba(251, 146, 60, 0.15);
}

.navBonusProgressReady .navBonusProgressRemaining {
	color: rgb(var(--warning-300));
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
	}
}

/* Maca Wallet Styles */

.walletbox {
	background: rgba(30, 30, 50, 0.25);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 1rem;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	color: rgb(var(--primary-50));
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.walletbox:hover {
	background: rgba(30, 30, 50, 0.35);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(59, 130, 246, 0.2) inset,
		0 0 20px rgba(59, 130, 246, 0.08);
}

/* Primary Wallet */

.walletbox.primary-wallet {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(30, 30, 50, 0.3) 100%);
	border-color: rgba(59, 130, 246, 0.25);
}

.walletbox.primary-wallet:hover {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(30, 30, 50, 0.35) 100%);
	border-color: rgba(59, 130, 246, 0.4);
	box-shadow:
		0 8px 24px rgba(59, 130, 246, 0.2),
		0 0 0 1px rgba(59, 130, 246, 0.3) inset,
		0 0 24px rgba(59, 130, 246, 0.15);
}

/* Bonus Wallet */

.walletbox.bonus-wallet {
	background: linear-gradient(135deg, rgba(251, 146, 60, 0.12) 0%, rgba(30, 30, 50, 0.3) 100%);
	border-color: rgba(251, 146, 60, 0.2);
}

.walletbox.bonus-wallet:hover {
	background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(30, 30, 50, 0.35) 100%);
	border-color: rgba(251, 146, 60, 0.35);
	box-shadow:
		0 8px 24px rgba(251, 146, 60, 0.15),
		0 0 0 1px rgba(251, 146, 60, 0.25) inset,
		0 0 24px rgba(251, 146, 60, 0.1);
}

/* Wallet with Balance */

.walletbox.got-balance .currency {
	color: rgb(var(--primary-300));
	text-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

/* Badge styling */

.walletbox .badge {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background-color: rgb(var(--surface-700) / 0.5);
	color: rgb(var(--primary-300));
	border-radius: 9999px;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.walletbox .badge.bonus-wallet {
	background-color: rgb(var(--warning-500) / 0.2);
	color: rgb(var(--warning-300));
	border-color: rgba(251, 146, 60, 0.3);
}

/* Currency label styling */

.walletbox .currency {
	color: rgb(var(--primary-200));
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	letter-spacing: 0.05em;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}

/* Amount display */

.walletbox p {
	color: rgb(var(--primary-50));
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* History Page */

.containerPlayerHistory {
	background-color: transparent;
}

.containerPlayerTitle {
	color: rgb(var(--primary-50));
	font-family: 'Jost', sans-serif;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.containerPlayerHistory .flex.center {
	width: 100%;
}

.containerPlayerHistory select,
.containerPlayerHistory input {
	width: 100%;
	border-radius: 0.75rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	background-color: rgb(var(--surface-800) / 0.7);
	color: rgb(var(--primary-50));
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
}

.containerPlayerHistory select::placeholder,
.containerPlayerHistory input::placeholder {
	color: rgb(var(--surface-400));
}

.containerPlayerHistory select,
.containerPlayerHistory input {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.containerPlayerHistory select:focus,
.containerPlayerHistory input:focus {
	border-color: rgb(var(--primary-400) / 0.5);
	background-color: rgb(var(--surface-800));
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.containerPlayerHistory .grid {
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.containerPlayerHistory .grid {
		gap: 1rem;
	}
}

.containerPlayerHistory>.flex>div>p {
	color: rgb(var(--primary-300));
}

.containerPlayerHistory .filterProvider {
	background-color: rgb(var(--primary-500) / 0.8);
	color: white;
	border-width: 1px;
	border-color: rgb(var(--primary-400) / 0.6);
	border-radius: 0.75rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
}

.containerPlayerHistory .filterProvider:hover {
	background-color: rgb(var(--primary-500));
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.containerPlayerHistory .filterProvider:hover {
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.containerPlayerHistory .animate-spin {
	color: rgb(var(--primary-400));
}

.transactionLine {
	background: rgba(30, 30, 50, 0.2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.transactionLine:hover {
	background: rgba(30, 30, 50, 0.3);
	border-color: rgba(59, 130, 246, 0.2);
	box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

.transactionBarBet {
	background-color: rgba(217, 119, 6, 0.8);
	box-shadow: 0 0 12px rgba(217, 119, 6, 0.4);
}

.transactionBarWin {
	background: linear-gradient(90deg, rgba(34, 197, 94, 0.8), rgba(74, 222, 128, 0.8));
	box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.transactionBarNeutral {
	background-color: rgba(100, 116, 139, 0.8);
	box-shadow: 0 0 12px rgba(100, 116, 139, 0.3);
}

.transactionTitle {
	color: rgb(var(--primary-100));
	font-family: 'Jost', sans-serif;
}

.transactionDescription {
	color: rgb(var(--surface-300));
}

.transactionAmount {
	color: rgb(var(--primary-50));
}

.transactionBadge {
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 9999px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.transactionBadgeSuccess {
	background-color: rgba(34, 197, 94, 0.2);
	color: rgb(var(--success-300));
}

.transactionBadgeWarning {
	background-color: rgba(251, 146, 60, 0.2);
	color: rgb(var(--warning-300));
}

.transactionBadgeDanger {
	background-color: rgba(220, 38, 38, 0.2);
	color: rgb(var(--danger-300));
}

.transactionSkeleton .h-2 {
	background-color: rgba(100, 116, 139, 0.4);
}

.transactionIcon {
	color: rgb(var(--warning-400));
}

/* Side Select */

.sideMenuSelect {
	--background: rgb(var(--surface-800) / 0.7);
	--backdrop-filter: blur(10px);
	--webkit-backdrop-filter: blur(10px);
	--input-color: rgb(var(--primary-50) / 1);
	--border: transparent;
	--border-hover: transparent;
	--border-focused: rgba(59, 130, 246, 0.2);
	--clear-select-focus-outline: 0 0 0 2px rgba(59, 130, 246, 0.2);
	--list-background: rgb(var(--surface-900) / 1);
	--item-color: rgb(var(--primary-50) / 1);
	--item-transition: all 0.2s;
	--padding: 0.5rem;
	--border-radius: 0.375rem;
}

.pageArticleHeader {
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.containerPlayerHistory .pageArticleHeader.center {
	width: 100%;
}

.containerPlayerHistory>.pageArticleHeader>div>p {
	color: rgb(var(--primary-300));
}

@media (min-width: 640px) {
	.pageArticleHeader {
		margin-bottom: 1.5rem;
	}
}

.pageArticleTitle {
	flex: 1 1 0%;
}

.pageArticleControls {
	flex-shrink: 0;
}

@keyframes rotate {
	to {
		--angle: 360deg;
	}
}

.containerPlayerEdit .profileFormInput,
.containerPlayerEdit input.profileFormInput,
.containerPlayerEdit .loginInput,
.containerPlayerEdit input.loginInput {
	width: 100%;
	border-radius: 0.75rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	background-color: rgb(var(--surface-800) / 0.7);
	color: rgb(var(--primary-50));
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.containerPlayerEdit .profileFormInput::placeholder,
.containerPlayerEdit input.profileFormInput::placeholder,
.containerPlayerEdit .loginInput::placeholder,
.containerPlayerEdit input.loginInput::placeholder {
	color: rgb(var(--surface-400));
}

/* Focus state */
.containerPlayerEdit .profileFormInput:focus,
.containerPlayerEdit input.profileFormInput:focus,
.containerPlayerEdit .loginInput:focus,
.containerPlayerEdit input.loginInput:focus {
	border-color: rgb(var(--primary-400) / 0.5);
	background-color: rgb(var(--surface-800));
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Error state */
.containerPlayerEdit .profileFormInput.error,
.containerPlayerEdit .profileFormInput:invalid,
.containerPlayerEdit input.profileFormInput.error,
.containerPlayerEdit input.profileFormInput:invalid,
.containerPlayerEdit .loginInput.error,
.containerPlayerEdit .loginInput:invalid,
.containerPlayerEdit input.loginInput.error,
.containerPlayerEdit input.loginInput:invalid {
	border-color: rgb(var(--warning-400) / 0.5);
	box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.2);
}

/* Success state */
.containerPlayerEdit .profileFormInput.ok,
.containerPlayerEdit input.profileFormInput.ok,
.containerPlayerEdit .loginInput.ok,
.containerPlayerEdit input.loginInput.ok {
	border-color: rgb(var(--success-400) / 0.5);
	box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* Disabled state */
.containerPlayerEdit .profileFormInput:disabled,
.containerPlayerEdit input.profileFormInput:disabled,
.containerPlayerEdit .loginInput:disabled,
.containerPlayerEdit input.loginInput:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	background-color: rgb(var(--surface-800) / 0.4);
}

/* Select Elements */
.containerPlayerEdit select,
.containerPlayerEdit .loginSelect select {
	width: 100%;
	border-radius: 0.75rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	background-color: rgb(var(--surface-800) / 0.7);
	color: rgb(var(--primary-50));
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.containerPlayerEdit select:focus,
.containerPlayerEdit .loginSelect select:focus {
	border-color: rgb(var(--primary-400) / 0.5);
	background-color: rgb(var(--surface-800));
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.containerPlayerEdit select:disabled,
.containerPlayerEdit .loginSelect select:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	background-color: rgb(var(--surface-800) / 0.4);
}

/* FormLine Labels */
.containerPlayerEdit .formLine p,
.containerPlayerEdit label {
	color: rgb(var(--surface-200));
	display: block;
}

/* FormLine Container */
.containerPlayerEdit .formLine {
	margin-bottom: 1rem;
}

/* Profile Menu Tabs */
.containerPlayerEdit .profileMenu {
	border-color: rgb(var(--surface-50) / 0.1);
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

/* Container Title */
.containerPlayerEdit .containerPlayerTitle {
	color: rgb(var(--primary-50));
	font-family: 'Jost', sans-serif;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	margin-bottom: 1rem;
}

/* Profile Edit - Success/Error Messages */
.containerPlayerEdit .formMessage {
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-width: 1px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	font-weight: 500;
}

/* Success Message */
.containerPlayerEdit .formMessage.success {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(30, 30, 50, 0.3) 100%);
	border-color: rgba(34, 197, 94, 0.3);
	color: rgb(var(--success-300));
	box-shadow:
		0 4px 12px rgba(34, 197, 94, 0.15),
		0 0 0 1px rgba(34, 197, 94, 0.2) inset;
}

.containerPlayerEdit .formMessage.success:hover {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(30, 30, 50, 0.35) 100%);
	border-color: rgba(34, 197, 94, 0.4);
	box-shadow:
		0 6px 20px rgba(34, 197, 94, 0.2),
		0 0 0 1px rgba(34, 197, 94, 0.3) inset;
}

/* Error Message */
.containerPlayerEdit .formMessage.error {
	background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(30, 30, 50, 0.3) 100%);
	border-color: rgba(220, 38, 38, 0.3);
	color: rgb(var(--danger-300));
	box-shadow:
		0 4px 12px rgba(220, 38, 38, 0.15),
		0 0 0 1px rgba(220, 38, 38, 0.2) inset;
}

.containerPlayerEdit .formMessage.error:hover {
	background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(30, 30, 50, 0.35) 100%);
	border-color: rgba(220, 38, 38, 0.4);
	box-shadow:
		0 6px 20px rgba(220, 38, 38, 0.2),
		0 0 0 1px rgba(220, 38, 38, 0.3) inset;
}

/* Profile Edit - FancyCheckbox (Subscriptions/Notifications) */
.containerPlayerEdit .fancyCheckbox {
	background: rgba(30, 30, 50, 0.25);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.75rem;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 1rem;
	margin-bottom: 1rem;
}

.containerPlayerEdit .fancyCheckbox:hover {
	background: rgba(30, 30, 50, 0.35);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(59, 130, 246, 0.2) inset,
		0 0 20px rgba(59, 130, 246, 0.08);
	transform: translateY(-1px);
}

.containerPlayerEdit .fancyCheckbox label {
	cursor: pointer;
}

.containerPlayerEdit .fancyCheckbox label p:first-child {
	color: rgb(var(--primary-50));
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.25rem;
	margin-bottom: 0.25rem;
}

.containerPlayerEdit .fancyCheckbox label p:last-child {
	color: rgb(var(--surface-300));
	font-size: 0.75rem;
	line-height: 1.125rem;
}

.containerPlayerEdit .fancyCheckbox .checkbox {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 0.375rem;
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.2);
	background-color: rgb(var(--surface-800) / 0.7);
	cursor: pointer;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	appearance: none;
	position: relative;
}

.containerPlayerEdit .fancyCheckbox .checkbox:checked {
	background-color: rgb(var(--primary-500));
	border-color: rgb(var(--primary-500));
	box-shadow:
		0 0 0 2px rgba(59, 130, 246, 0.2),
		0 0 12px rgba(59, 130, 246, 0.4);
}

.containerPlayerEdit .fancyCheckbox .checkbox:checked::before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 0.875rem;
	font-weight: bold;
	line-height: 1;
}

.containerPlayerEdit .fancyCheckbox .checkbox:hover {
	border-color: rgb(var(--primary-400) / 0.5);
	background-color: rgb(var(--surface-800));
}

.containerPlayerEdit .fancyCheckbox .checkbox:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Subscriptions Section Title */
.containerPlayerEdit h3.font-bold {
	color: rgb(var(--primary-50));
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5rem;
	margin-bottom: 1rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* TOTP Enabled State */
.totpEnabledCard {
	width: 100%;
	border-radius: 0.75rem;
	padding: 3rem 1.5rem;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(30, 30, 50, 0.3) 100%);
	border: 1px solid rgba(34, 197, 94, 0.3);
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 4px 12px rgba(34, 197, 94, 0.1),
		0 0 0 1px rgba(34, 197, 94, 0.1) inset;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

@media (min-width: 768px) {
	.totpEnabledCard {
		margin-top: 0;
	}
}

.totpEnabledIconContainer {
	position: relative;
	margin-bottom: 1.5rem;
}

.totpEnabledIconGlow {
	position: absolute;
	inset: 0;
	background-color: rgba(34, 197, 94, 0.4);
	filter: blur(20px);
	border-radius: 50%;
	opacity: 0.4;
	transform: scale(0.8);
}

.totpEnabledIconWrapper {
	position: relative;
	padding: 1.5rem;
	border-radius: 50%;
	background: rgba(34, 197, 94, 0.15);
	border: 1px solid rgba(34, 197, 94, 0.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.totpEnabledIcon {
	color: rgb(var(--success-400));
	filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.5));
}

.totpEnabledText {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: rgb(var(--primary-50));
	font-family: 'Jost', sans-serif;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	letter-spacing: 0.02em;
}

.totpEnabledDivider {
	height: 2px;
	width: 3rem;
	background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
	margin-top: 1.5rem;
	border-radius: 2px;
}

.menuTitle {
	margin-left: 0.5rem;
}

.filterSecondLine .content {
	max-height: 11.25rem;
	overflow-y: scroll !important;
	scrollbar-width: none !important;
}

.filterSecondLine.limitedItems .content {
	height: 11.25rem;
}

.annotationInline .badge {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.annotationInline .separator {
	color: #ffd700;
	opacity: 0.8;
}

.annotationInline .text {
	font-weight: 600;
}

/* variant: Minimal (Desktop Inline Premium Pill) */
.annotationInline.is-minimal {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgb(var(--primary-500) / 0.2);
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2);
	background: linear-gradient(135deg,
			rgb(var(--surface-800)) 0%,
			rgb(var(--surface-900)) 100%) !important;
	border-color: rgb(var(--primary-500) / 0.3) !important;
	color: rgb(var(--surface-50)) !important;
}

.annotationInline.is-minimal .tickerMessage .title {
	color: rgb(var(--surface-50)) !important;
	font-weight: 800;
}

.annotationInline.is-minimal .tickerMessage .separator {
	color: rgb(var(--surface-50)) !important;
	opacity: 0.5;
}

.annotationInline.is-minimal .smallClose {
	background: rgb(var(--primary-500) / 0.1);
	border: 1px solid rgb(var(--primary-500) / 0.2);
	cursor: pointer;
}

.annotationInline.is-minimal .smallClose svg {
	color: rgb(var(--surface-50)) !important;
}

/* variant: Full (Mobile - Elite Casino Ticker Style) */
.annotationInline.is-full {
	margin: 0;
	width: 100%;
	background: transparent;
	border-bottom: 1px solid rgb(var(--surface-50) / 0.1);
	color: #ffffff;
	height: 42px !important;
	position: relative;
	overflow: hidden;
	z-index: 40;
	display: flex;
	align-items: center;
}

/* Traveling Light Effect on bottom edge */
/* .annotationInline.is-full::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -150px;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            rgb(var(--primary-400)),
            #ffffff,
            rgb(var(--primary-400)),
            transparent);
    animation: travelingLight 4s infinite linear;
    filter: blur(1px);
}

@keyframes travelingLight {
    0% {
        left: -150px;
    }

    100% {
        left: 100%;
    }
} */

.annotationInline.is-full .tickerContainer {
	padding: 0 45px 0 12px;
}

.annotationInline.is-full .title {
	color: rgb(var(--primary-500));
	font-weight: 900;
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-right: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* Pulsing dot for a 'Live' feel */
.annotationInline.is-full .title::before {
	content: '';
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 50%;
	box-shadow: 0 0 8px currentColor;
	animation: tickerPulse 1s infinite alternate;
}

@keyframes tickerPulse {
	from {
		opacity: 0.4;
		transform: scale(0.8);
	}

	to {
		opacity: 1;
		transform: scale(1.1);
	}
}

.annotationInline.is-full .text {
	font-weight: 500;
	font-size: 0.8rem;
	color: rgb(var(--surface-200));
	white-space: nowrap;
}

.annotationInline.is-full .separator {
	color: rgb(var(--surface-700));
	margin: 0 1.5rem;
}

.annotationInline.is-full .smallClose {
	background: transparent;
	border: none;
	color: rgb(var(--surface-500));
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s;
}

.annotationInline.is-full .smallClose:hover {
	color: #fff;
}

.gameGrid.fw div:first-child {
	grid-column: auto !important;
}

.providerDrawerBtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: rgb(var(--surface-800) / 0.7);
	border: 1px solid rgb(var(--surface-50) / 0.1);
	border-radius: 0.75rem;
	color: rgb(var(--primary-50));
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.5rem;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.providerDrawerBtn:hover {
	background-color: rgb(var(--surface-700) / 0.6);
	border-color: rgb(var(--surface-50) / 0.2);
}

.providerDrawerBtn:active {
	transform: scale(0.95);
}

.bottomSheet.themeDrawer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background-color: rgb(var(--surface-900));
	border-top: 2px solid rgb(var(--primary-500) / 0.3);
	max-height: 85dvh;
	display: flex;
	flex-direction: column;
	transition: height 0.3s ease;
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.bottomSheet.themeDrawer:focus-within {
	height: 85dvh;
}

.bottomSheet.themeDrawer .bottomSheetMain {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.bottomSheet.themeDrawer .bottomSheetList {
	padding-bottom: env(safe-area-inset-bottom, 2rem);
}

.bottomSheetBackdrop.themeDrawer {
	position: fixed;
	inset: 0;
	z-index: 40;
	background-color: rgb(0 0 0 / 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	overscroll-behavior: contain;
}

.bottomSheetHeader.themeDrawer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1rem;
	flex-shrink: 0;
	border-bottom: 1px solid rgb(var(--surface-50) / 0.1);
	color: rgb(var(--primary-400));
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.bottomSheetItem.themeDrawer {
	width: 100%;
	padding: 1rem;
	border-bottom: 1px solid rgb(var(--surface-50) / 0.05);
	color: rgb(var(--primary-50));
	font-weight: 600;
	transition: all 0.2s ease;
}

.bottomSheetItem.themeDrawer:hover {
	background-color: rgb(var(--surface-700) / 0.5);
	border-color: rgb(var(--surface-50) / 0.2);
}

.bottomSheetItem.themeDrawer:active {
	background-color: rgb(var(--surface-700) / 0.7);
}

.bottomSheetItem.themeDrawer.selected {
	background-color: rgb(var(--surface-700) / 0.7);
	color: rgb(var(--primary-400));
	border-color: rgb(var(--primary-400) / 0.5);
}

.bottomSheetItem.themeDrawer.selected .providerLogo {
	filter: brightness(1.2);
}

.bottomSheetItem.themeDrawer .providerLogo {
	width: 3rem;
	height: 1.5rem;
	object-fit: contain;
	filter: grayscale(1) brightness(2);
}

.drawerSearchInput {
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	outline: none;
	background-color: rgb(var(--surface-800) / 0.7);
	border: 1px solid rgb(var(--surface-50) / 0.1);
	color: rgb(var(--primary-50));
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.drawerSearchInput::placeholder {
	color: rgb(var(--surface-400));
}

.drawerSearchInput:focus {
	border-color: rgb(var(--primary-500) / 0.5);
	background-color: rgb(var(--surface-400) / 0.5);
}

@media (max-width: 640px) {
	.bottomSheet.themeDrawer .bottomSheetList {
		padding-bottom: 20rem;
	}
}

.game-provider-logo>img {
	object-fit: contain;
	width: auto !important;
}

/* Grid Tabs and Slider Mobile Overlap Fixes */
@media (max-width: 640px) {
	.middleGameProductsTwo {
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: 0.75rem;
		padding-top: 0.25rem;
		margin-bottom: 1.5rem !important;
		padding-right: 120px !important;
		scrollbar-width: none;
		-ms-overflow-style: none;
		position: relative;
	}

	.middleGameProductsTwo::-webkit-scrollbar {
		display: none;
	}

	.tabActionContainer {
		top: -35px !important;
		right: 0;
		transform: none !important;
		z-index: 30;
		background: linear-gradient(to left, rgb(var(--blockBG)), transparent 25%);
		padding-left: 20px;
		height: 38px;
		display: flex;
		align-items: center;
	}

	.tabActionContainer .seeMore {
		background: rgb(var(--primary-500));
		color: white !important;
		padding: 4px 12px;
		border-radius: 1rem;
		font-size: 0.7rem !important;
		font-weight: 800;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
		text-transform: uppercase;
		margin-top: 4px;
	}

	.tabActionContainer button {
		display: none !important;
	}
}

.activeTabLink {
	color: rgb(var(--primary-400)) !important;
	font-weight: 800 !important;
	position: relative;
	text-decoration: none !important;
}

.activeTabLink::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: rgb(var(--primary-400));
}

.passiveTabLink {
	color: rgb(var(--surface-400)) !important;
	text-decoration: none !important;
}

.liveSupportFloat {
	position: fixed;
	bottom: 3.5rem;
	right: 0.7rem;
	height: 2.25rem;
	width: auto;
	min-width: 2.25rem;
	background: linear-gradient(135deg, rgb(var(--info-500)), rgb(var(--info-700)));
	border-radius: 1.5rem;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.35rem;
	padding: 0 0.75rem;
	box-shadow: 0 6px 20px rgb(var(--info-600) / 0.4);
	z-index: 30;
	border: 1px solid rgb(var(--surface-100) / 0.1);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	font-family: 'DM Sans', sans-serif;
}

.liveSupportFloat span {
	font-size: 0.65rem;
	font-weight: 700;
	white-space: nowrap;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.liveSupportFloat:active {
	transform: scale(0.95);
}

.liveSupportFloat:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 10px 25px rgb(var(--primary-500) / 0.5);
	padding-right: 0.85rem;
}

.liveSupportFloat svg {
	width: 16px;
	height: 16px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.mobile-bonus-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
	height: 2.5rem;
	width: 2.5rem;
	background: linear-gradient(135deg,
			rgb(var(--warning-500) / 0.15) 0%,
			rgb(var(--quinary-500) / 0.3) 100%);
	border: 1px solid rgb(var(--warning-500) / 0.3);
	color: rgb(var(--warning-300));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-bonus-icon:hover {
	background: linear-gradient(135deg,
			rgb(var(--warning-500) / 0.25) 0%,
			rgb(var(--quinary-500) / 0.35) 100%);
	border-color: rgb(var(--warning-500) / 0.5);
	box-shadow:
		0 6px 20px rgb(var(--warning-500) / 0.2),
		0 0 0 1px rgb(var(--warning-500) / 0.3) inset,
		0 0 24px rgb(var(--warning-500) / 0.15);
}

.floatingNav {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	width: calc(100% - 40px);
	max-width: 400px;
	/* transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}

.navContainer {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: rgba(var(--surface-800), 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(var(--primary-500), 0.4);
	border-radius: 24px;
	padding: 0px 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.navItem {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: rgb(var(--primary-200));
	font-size: 10px;
	font-weight: 600;
	background: none;
	border: none;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 4px 0;
	position: relative;
	overflow: hidden;
}

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

.navItem::after {
	content: '';
	position: absolute;
	bottom: 0px;
	left: 50%;
	width: 0;
	height: 2px;
	background: rgb(var(--primary-500));
	transition: all 0.3s ease;
	transform: translateX(-50%);
	border-radius: 1px;
}

.navItem.active::after {
	width: 12px;
}

.menuButton {
	position: relative;
	top: -15px;
	flex: 0 0 60px;
}

.menuIcon {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, rgb(var(--primary-500)), rgb(var(--primary-600)));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	box-shadow:
		0 4px 15px rgba(var(--primary-500), 0.5),
		0 0 0 2px rgba(var(--primary-500), 0.2);
	border: 4px solid rgb(var(--surface-800));
	margin-bottom: 2px;
	transition: all 0.3s ease;
}

.menuButton:hover .menuIcon {
	transform: scale(1.1) rotate(90deg);
}

.menuButton span {
	margin-top: -5px;
}

.navItem svg {
	transition: transform 0.3s ease;
}

.navItem:active svg {
	transform: scale(0.9);
}

.hidden-spotlight-triggers .headerNavButton,
.hidden-spotlight-triggers .spotlightMobileButton,
.hidden-spotlight-triggers .profile {
	/* triggers visibility */
}

/* -------------------------------------------------------------------------- */
/*                          ANNOUNCEMENT MODAL PREMIUM                        */
/* -------------------------------------------------------------------------- */

#announcement .modalBox {
	max-width: fit-content !important;
	width: auto !important;
	padding: 0 !important;
	overflow: visible !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}

#announcement .modalBox .modalContainer {
	background: transparent !important;
	max-height: none !important;
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	overflow: visible !important;
	width: fit-content !important;
}

/* Metin İçeriği Varsa Premium Kutu Modu */
#announcement .modalBox:has(.popupBodyText) {
	width: 95% !important;
	max-width: 900px !important;
	background: rgba(13, 16, 35, 0.85) !important;
	backdrop-filter: blur(40px) saturate(210%) !important;
	-webkit-backdrop-filter: blur(40px) saturate(210%) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 1) !important;
}

#announcement .popupBody {
	display: flex !important;
	flex-direction: column !important;
	border-radius: 28px !important;
	width: 100% !important;
	overflow: hidden !important;
}

@media (min-width: 768px) {
	#announcement .popupBody {
		flex-direction: row !important;
	}
}

#announcement .popupBodyImg {
	width: auto !important;
	height: auto !important;
	max-width: 90vw !important;
	max-height: 82vh !important;
	object-fit: contain !important;
	border-radius: 24px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
	margin: 0 !important;
}

#announcement .modalBox:has(.popupBodyText) .popupBodyImg {
	max-width: 100% !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

@media (min-width: 768px) {
	#announcement .modalBox:has(.popupBodyText) .popupBodyImg {
		width: 55% !important;
		margin: 1.5rem !important;
		border-radius: 20px !important;
	}
}

#announcement .popupBodyText {
	padding: 2.5rem !important;
	text-align: left !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

#announcement .popupBodyText h1 {
	font-family: 'Anton', sans-serif !important;
	font-size: 2.8rem !important;
	background: linear-gradient(135deg, #fff 0%, rgb(var(--primary-300)) 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	margin-bottom: 1rem !important;
	line-height: 1 !important;
}

#announcement .popupBodyText p {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 1.1rem !important;
	line-height: 1.6 !important;
	font-family: 'Jost', sans-serif !important;
}

#announcement .modalContainer .modalCloseButton {
	position: relative !important;
	margin: 0 0 0 auto !important;
	background: rgb(var(--primary-500)) !important;
	border: 3px solid white !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	z-index: 99999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
}

#announcement .modalContainer .modalCloseButton:hover {
	transform: scale(1.1) rotate(90deg) !important;
	background: #ff004c !important;
}

#announcement .modalContainer .modalCloseButton svg {
	width: 24px !important;
	height: 24px !important;
	color: white !important;
}

/* --- MAINTENANCE --- */
/* Bakım  Styles */
.maint-container {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	overflow: hidden;
	background: radial-gradient(circle at 50% 50%, rgb(49, 51, 89) 0%, rgb(16, 17, 30) 100%);
	font-family: 'Jost', sans-serif;
}

.maint-bg-glow {
	position: absolute;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
}

.maint-bg-glow::before,
.maint-bg-glow::after {
	content: '';
	position: absolute;
	width: 40vmax;
	height: 40vmax;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.15;
	animation: maint-float 20s infinite alternate linear;
}

.maint-bg-glow::before {
	background: rgb(226, 79, 110);
	top: -10%;
	left: -10%;
}

.maint-bg-glow::after {
	background: rgb(69, 57, 139);
	/* tertiary-500 */
	bottom: -10%;
	right: -10%;
	animation-delay: -10s;
}

@keyframes maint-float {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(10%, 10%);
	}
}

.maint-card {
	background: rgba(16, 17, 30, 0.7);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	border: 1px solid rgba(226, 79, 110, 0.3);
	border-radius: 2.5rem;
	padding: 4rem 2rem;
	max-width: 540px;
	width: 100%;
	box-shadow:
		0 0 0 1px rgba(226, 79, 110, 0.1),
		0 25px 50px -12px rgba(0, 0, 0, 0.8),
		inset 0 0 20px rgba(226, 79, 110, 0.05);
	position: relative;
	z-index: 10;
	text-align: center;
}

.maint-icon-wrapper {
	position: relative;
	margin-bottom: 2.5rem;
	display: flex;
	justify-content: center;
}

.maint-icon-bg {
	position: absolute;
	inset: -1rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(226, 79, 110, 0.3) 0%, transparent 70%);
	filter: blur(20px);
	animation: maint-icon-glow 4s infinite alternate ease-in-out;
}

@keyframes maint-icon-glow {
	from {
		transform: scale(0.8);
		opacity: 0.3;
	}

	to {
		transform: scale(1.2);
		opacity: 0.6;
	}
}

.maint-icon {
	position: relative;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2rem;
	background: linear-gradient(135deg, rgb(33, 34, 59), rgb(16, 17, 30));
	border: 2px solid rgba(226, 79, 110, 0.4);
	color: rgb(226, 79, 110);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	animation: maint-shake 10s infinite;
}

@keyframes maint-shake {

	0%,
	90%,
	100% {
		transform: rotate(0);
	}

	92% {
		transform: rotate(5deg);
	}

	94% {
		transform: rotate(-5deg);
	}

	96% {
		transform: rotate(3deg);
	}

	98% {
		transform: rotate(-3deg);
	}
}

.maint-title {
	font-family: 'Anton', sans-serif;
	font-size: 2.75rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	color: white;
	background: linear-gradient(to bottom, #ffffff 30%, rgb(238, 149, 168) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.maint-title::after {
	content: 'Size Daha İyi Bir Deneyim Sunmak İçin Kısa Bir Ara.';
}

.maint-desc {
	font-size: 1.25rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 2rem;
	padding: 0 1rem;
}

.maint-desc::after {
	content: 'Şu anda platformumuzda planlı bir bakım çalışması gerçekleştiriyoruz. Bakiyeniz ve tüm bilgileriniz güvendedir. Çok yakında daha hızlı ve kesintisiz bir hizmetle aranızda olacağız.';
}

.maint-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1.25rem;
	border-radius: 9999px;
	background: rgba(226, 79, 110, 0.15);
	border: 1px solid rgba(226, 79, 110, 0.3);
	color: white;
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 2.5rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	box-shadow: 0 0 15px rgba(226, 79, 110, 0.2);
}

.maint-status-badge::after {
	content: 'Bakım Çalışması';
}

.maint-status-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: rgb(226, 79, 110);
	box-shadow: 0 0 10px rgb(226, 79, 110);
	animation: maint-dot-pulse 1.5s infinite;
}

@keyframes maint-dot-pulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.4);
		opacity: 0.5;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.maint-footer::after {
	content: 'Anlayışınız için teşekkür ederiz.';
}

/* Yakında Styles */
.yakinda-reel-container {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	perspective: 1000px;
}

.yakinda-letter-box {
	position: relative;
	height: 5rem;
	width: 3.5rem;
	overflow: hidden;
	border: 2px solid rgba(226, 79, 110, 0.3);
	border-radius: 0.75rem;
	background: linear-gradient(to bottom, rgb(33, 34, 59), rgb(16, 17, 30), rgb(33, 34, 59));
	box-shadow:
		inset 0 5px 15px rgba(0, 0, 0, 0.5),
		0 10px 20px rgba(0, 0, 0, 0.3);
}

.yakinda-reel {
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 0;
	width: 100%;
}

.yakinda-letter {
	width: 100%;
	height: 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	font-weight: 900;
	font-family: 'Anton', sans-serif;
	color: rgb(226, 79, 110);
	text-shadow: 0 2px 10px rgba(226, 79, 110, 0.3);
}

@keyframes yakinda-slide {
	0% {
		top: -35rem;
	}

	/* 7 letters * 5rem */
	100% {
		top: 0;
	}
}

.yakinda-reel {
	animation: yakinda-slide 2s cubic-bezier(0.12, 0, 0.39, 0) forwards;
}

/* ENDED GAME SCREEN */
.gameEndedContainer {
	background-color: rgb(var(--blockBG));
}

.gameEndedBgDecoration {
	background-color: rgb(var(--primary-600) / 0.15);
	filter: blur(80px);
}

.gameEndedCard {
	background-color: rgb(var(--subBlockBG) / 0.7);
	border: 1px solid rgb(var(--surface-300) / 0.2);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow:
		0 10px 40px rgb(0 0 0 / 0.5),
		inset 0 1px 0 rgb(255 255 255 / 0.05);
	border-radius: 1.5rem !important;
}

.gameEndedCard:hover {
	border-color: rgb(var(--primary-500) / 0.5);
	box-shadow:
		0 10px 40px rgb(var(--primary-900) / 0.4),
		inset 0 1px 0 rgb(255 255 255 / 0.1);
}

.gameEndedIconGlow {
	background-color: rgb(var(--primary-500));
	opacity: 0.6;
	filter: blur(15px);
}

.gameEndedIconWrapper:hover .gameEndedIconGlow {
	opacity: 0.9;
}

.gameEndedIconBg {
	background: linear-gradient(135deg, rgb(var(--surface-700)), rgb(var(--surface-900)));
	border: 1px solid rgb(var(--surface-500));
	box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.1);
	border-radius: 50% !important;
}

.gameEndedIconBg svg {
	color: rgb(var(--primary-400)) !important;
}

.gameEndedBtnGlow {
	background: linear-gradient(90deg, transparent, rgb(var(--primary-500) / 0.3), transparent);
}

.gameEndedTitle {
	color: rgb(var(--primary-50));
	text-shadow: 0 2px 10px rgb(0 0 0 / 0.3);
}

.gameEndedBtn {
	background: linear-gradient(180deg, rgb(var(--surface-700)), rgb(var(--surface-900)));
	border: 1px solid rgb(var(--surface-600));
	color: rgb(var(--primary-50));
	box-shadow:
		0 4px 15px rgb(0 0 0 / 0.4),
		inset 0 1px 0 rgb(255 255 255 / 0.1);
	border-radius: 1rem !important;
}

.gameEndedBtn:hover {
	background: linear-gradient(180deg, rgb(var(--surface-600)), rgb(var(--surface-800)));
	border-color: rgb(var(--primary-500) / 0.5);
}


.date-time-field input {
	width: 100% !important;
	font-size: 1rem !important;
	border-radius: 0.75rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	background-color: rgb(var(--surface-800) / 0.7);
	color: rgb(var(--primary-50));
	border-width: 1px;
	border-color: rgb(var(--surface-50) / 0.1);
}

.date-time-picker {
	--date-picker-background: rgb(var(--surface-800)) !important;
	--date-picker-foreground: #ffffff !important;
	--date-picker-highlight-border: rgb(var(--primary-500)) !important;
	--date-picker-highlight-shadow: rgba(var(--primary-500), 0.4) !important;
	--date-picker-selected-background: rgb(var(--primary-500)) !important;
	--date-picker-selected-color: #ffffff !important;
	--date-picker-today-border: rgb(var(--secondary-500)) !important;

	background: var(--date-picker-background) !important;
	color: var(--date-picker-foreground) !important;
	border: 1px solid rgba(var(--primary-500), 0.2) !important;
	border-radius: 1rem !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
	backdrop-filter: blur(10px);
}

.date-time-picker select {
	background: transparent !important;
	color: #ffffff !important;
	border: none !important;
}

/* Fix for the month/year selects in the picker */
.date-time-picker .dummy-select {
	background: rgba(var(--surface-400), 0.4) !important;
	color: #ffffff !important;
	border: 1px solid rgba(var(--primary-500), 0.3) !important;
	border-radius: 0.5rem !important;
	padding: 0 0.5rem !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
}

.date-time-picker select:focus+.dummy-select {
	border-color: rgb(var(--primary-500)) !important;
	box-shadow: 0 0 8px rgba(var(--primary-500), 0.4) !important;
}

.date-time-picker .dropdown svg {
	fill: #ffffff !important;
	opacity: 1 !important;
	z-index: 2;
}

.date-time-picker .cell {
	border-radius: 0.5rem !important;
	transition: all 0.2s ease !important;
}

.date-time-picker .cell:hover:not(.disabled) {
	background: rgba(var(--primary-500), 0.2) !important;
}

.date-time-picker .page-button:hover {
	background: rgba(255, 255, 255, 0.1) !important;
}