[data-simplebar] {
  position: relative;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.simplebar-wrapper {
  overflow: hidden;
  width: inherit;
  height: inherit;
  max-width: inherit;
  max-height: inherit;
}

.simplebar-mask {
  direction: inherit;
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto !important;
  height: auto !important;
  z-index: 0;
}

.simplebar-offset {
  direction: inherit !important;
  box-sizing: inherit !important;
  resize: none !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.simplebar-content-wrapper {
  direction: inherit;
  box-sizing: border-box !important;
  position: relative;
  display: block;
  height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
  width: auto;
  max-width: 100%; /* Not required for horizontal scroll to trigger */
  max-height: 100%; /* Needed for vertical scroll to trigger */
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.simplebar-content:before,
.simplebar-content:after {
  content: ' ';
  display: table;
}

.simplebar-placeholder {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  pointer-events: none;
}

.simplebar-height-auto-observer-wrapper {
  box-sizing: inherit !important;
  height: 100%;
  width: 100%;
  max-width: 1px;
  position: relative;
  float: left;
  max-height: 1px;
  overflow: hidden;
  z-index: -1;
  padding: 0;
  margin: 0;
  pointer-events: none;
  flex-grow: inherit;
  flex-shrink: 0;
  flex-basis: 0;
}

.simplebar-height-auto-observer {
  box-sizing: inherit;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 1000%;
  width: 1000%;
  min-height: 1px;
  min-width: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.simplebar-track {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

[data-simplebar].simplebar-dragging {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[data-simplebar].simplebar-dragging .simplebar-content {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[data-simplebar].simplebar-dragging .simplebar-track {
  pointer-events: all;
}

.simplebar-scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 10px;
}

.simplebar-scrollbar:before {
  position: absolute;
  content: '';
  background: black;
  border-radius: 7px;
  left: 2px;
  right: 2px;
  opacity: 0;
  transition: opacity 0.2s 0.5s linear;
}

.simplebar-scrollbar.simplebar-visible:before {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0s;
}

.simplebar-track.simplebar-vertical {
  top: 0;
  width: 11px;
}

.simplebar-scrollbar:before {
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
}

.simplebar-track.simplebar-horizontal {
  left: 0;
  height: 11px;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  right: auto;
  left: 0;
  top: 0;
  bottom: 0;
  min-height: 0;
  min-width: 10px;
  width: auto;
}

/* Rtl support */
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
  right: auto;
  left: 0;
}

.simplebar-dummy-scrollbar-size {
  direction: rtl;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  height: 500px;
  width: 500px;
  overflow-y: hidden;
  overflow-x: scroll;
  -ms-overflow-style: scrollbar !important;
}

.simplebar-dummy-scrollbar-size > div {
  width: 200%;
  height: 200%;
  margin: 10px 0;
}

.simplebar-hide-scrollbar {
  position: fixed;
  left: 0;
  visibility: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

	
/* #wrapper
{
	display: flex;
} */

.collape-menu
{
	width: 310px;
	/* flex-shrink: 0; */
	position: fixed;
	padding: 10px;
	z-index: 1;
	background-color: #06080a;
}

.fullsite-container
{
margin-left: 320px;
}

.ui-btn
{
	align-items: center;
  align-self: stretch;
  display: flex;
  flex: auto;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
}

.w-100
{
	width: 100%;
}

.btn-dark-new
{
	background:#222426;
	color: #ffffff;
}

.btn-dark-new:hover
{
	color: #ffffff;
}

.menu-cate-container
{
	display: flex;
	flex-wrap: wrap;
	gap: 0px 10px;
	align-items: center;
}

.menu-cate
{
	width: 48.2%;
	height: 100px;
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
	background:#222426;
	position: relative;
	border-radius:4px;
	margin-top:10px;
	display: flex;
	align-items: center;
	flex-flow: column;
	justify-content: center;
	color: #fff;
}

.menu-cate:hover
{
	color: #fff;
}

a:hover {
    text-decoration: none;
}

.active-item::before
{
	background-color:#fff;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  left: .9375rem;
  right: .9375rem;
  bottom: 0;
  content: "";
  height: 3px;
  opacity: 1;
  position: absolute;
  z-index: 1;
  /* filter: grayscale(0); */
}



.filters-container
{
	background:#111111;
	height:calc(88vh - 400px);
	margin-bottom: 30px;
}


.simple-bar {

}

.filter-item
{
	
}

.filter-item-head
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: #222426 solid 1px;
	padding:7px;
}

.filters-item-head_title
{
	display: flex;
	align-items: center;
	gap: 2px;
	text-transform: uppercase;
	color: #ffffff;
}


.filters-item-head_title img
{
	width: 18px;
}

.arrow-trigger
{
	background:#222426;
	border-radius:3px;
	padding: 0px 0px;
	/* width: 24px;
	height: 24px; */
	display: inline-block;
	margin-left: 5px;
}

.filters-item-head_title-right a
{
	color: #ffffff;
	text-transform: uppercase;
	text-decoration: underline;
}

.filter-item-main
{
	padding:7px;
}

.filter-search .search-bg
{
	background:#222426 !important;
}

.filter-search .search-btn
{
	background:#222426 !important;
}

.filter-search .search-btn img
{
	width: 16px;
}



.filter-option-container
{
	display: flex;
	flex-wrap: wrap;
	gap: 0px 10px;
	align-items: center;
	align-items: stretch;
	max-height: 280px;
	min-height:100px;
	margin-top: 5px;
}


.filter-option-item
{
	width: 47.8%;
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
	background:#222426;
	position: relative;
	border-radius:4px;
	margin-top:10px;
	display: flex;
	align-items: center;
	flex-flow: column;
	justify-content: center;
	color: #fff;
	border:none;
	
}

/* .filter-option-item:hover {
    opacity: 1;
    border-bottom: .1875em solid #90c534;
    filter: none
} */

.close-item
{
	display: none;
}


.filter-option-item img
{
	/*-webkit-filter: invert(100%);  Safari/Chrome */
	filter: grayscale(1);
	height:40px;
}
.filter-option-item img:hover
{
	/*-webkit-filter: invert(100%);  Safari/Chrome */
	filter: grayscale(0);
	
}
.filter-option-container .simplebar-content
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


.simplebar-content::before
{
	display: none !important;
}

.arrow-trigger img
{
	transition: .5s all;
}

.arrow-trigger.open img
{transform: rotate(180deg)
	
}


  /* Custom tooltip color for right placement */
  .tooltip.right .tooltip-inner {
    background-color: #3498db; /* Replace with your desired color */
    color: white; /* Adjust text color for readability */
}

/* Optional: Customize the tooltip arrow */
.tooltip.right .tooltip-arrow {
    border-right-color: #3498db; /* Match the tooltip background color */
}



/* Custom tooltip color for bottom placement */
.tooltip.bottom .tooltip-inner {
    background-color: #ffffff; /* Replace with your desired color */
    color: #222; /* Adjust text color for readability */
	padding: 5px !important;
}

/* Customize the tooltip arrow */
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #ffffff; /* Match the tooltip background color */
}


/* Custom tooltip color for bottom placement */
.tooltip.top .tooltip-inner {
    background-color: #ffffff; /* Replace with your desired color */
    color: #222222; /* Adjust text color for readability */
	padding: 5px !important;
}

/* Customize the tooltip arrow */
.tooltip.top .tooltip-arrow {
    border-top-color: #ffffff; /* Match the tooltip background color */
}

.tooltip-inner
{
	padding: 5px 10px !important;
	font-size: 16px;
}



/* -------------------menu hide options ------------------*/


.collape-menu.shrink
{
width: 100px !important;
}

.collape-menu.shrink .menu-cate {
	width: 100%;
	height: 65px;
	margin-top: 0px;
	border-radius: 0px !important;
}

.menu-cate:hover
{
background:#111111;
}

.collape-menu.shrink .menu-cate img
{
	width: 28px;
}




.fullsite-container.shrink
{
margin-left: 90px;
}





.collape-menu.shrink .btn-dark-new
{

	margin-bottom:5px;
}

.collape-menu.shrink .btn-dark-new img
{
	width: 28px;
}


.collape-menu.shrink .hide-options
{
	display: none;
} 
.collape-menu, .fullsite-container {
    transition: all 0.3s ease; /* Adjust duration and easing for smoothness */
}




/* -------Mobile menu start------------- */


.mobile-menu-top
{
	text-align: center;
}

.mobile-menu-top img
{
	width: 32px;
}

.mobile-menu-options
{
	 background: #222426; 
}

.mobile-menu-options .menu-cate {
	width: 48.2%;
	padding: 5px;
	text-align: center;
	text-transform: uppercase;
	background: #222426;
	position: relative;
	border-radius: 0px;
	margin-top: 0px;
	display: flex;
	align-items: center;
	flex-flow: column;
	justify-content: center;
	color: #fff;
	height: 50px;
	font-size: 10px;
}

.mobile-menu-options .menu-cate img
{
	width: 20px;
	
}

.mobile-menu-container
{
	/* background: #222222; */
	/* padding:5px; */
	position: fixed;
	bottom:0px;
	z-index: 99;
	width: 100%;
}

.mobile-menu-options
{
	display: flex;
	justify-content: space-between;
}

.mobile-trigger
{
	background: #222426;
	padding: 0px 5px 0px 5px;
	height: 30px;
	display: inline-block;
	border-radius:5px 5px 0px 0px;
	
}




.mobile-menu
{
	width: 100%;
	height: 100%;
	background: #222426;
	position: fixed;
	z-index: 9999;
	top:0px;
	display: none;
}


.mobile-menu.open
{
	display: block;
}




.mobile-menu  .filters-container
{
	background:#111111;
	height:calc(100vh - 245px);
	margin-bottom: 30px;
}


.mobile-menu .menu-cate
{
	margin-top: 0px;
	height: 70px;
	font-size: 12px;
	background: #111111;
	margin-top:5px;
}

.mobile-menu .menu-cate img
{
	height: 24px;
}


.mobile-menu .filter-option-container
{
	display: flex;
	flex-wrap: wrap;
	gap: 0px 10px;
	align-items: center;
	align-items: stretch;
	max-height: 280px;
	min-height:100px;
	margin-top: 5px;
}

.mobile-menu .menu-cate-container {
	padding: 0px 10px;
}


.mobile-menu .btn
{
	font-size: inherit !important;
}

.mobile-menu .filter-search .search-btn {
	background: #222426 !important;
	height: 34px;
}

.mobile-menu .btn.btn-dark-new.w-100 {
	background: #111;
	margin-bottom: 5px;
}

.mobile-menu .btn.btn-dark-new img
{
	height: 25px;
}

.mobile-menu-container
{
	display: none;
}



/* -------Mobile menu end------------- */


/* Responsive styles */
/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 


	.mobile-menu-container
	{
		display: block;
	}
	.collape-menu
	{
		display: none;
	}
	
	.fullsite-container.shrink, .fullsite-container {
		margin-left: 0px;
	}

}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
	.mobile-menu-container
	{
		display: block;
	}

	.collape-menu
	{
		display: none;
	}
	
	.fullsite-container.shrink, .fullsite-container {
		margin-left: 0px;
	}
	
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
	
	
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
   
}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1400.98px) {
   
}

/* // For 2k Monitors, (more than 1401 px) */
@media (min-width: 1401px) and (max-width: 1599.98px) {
  
}

@media (min-width: 1600px) and (max-width: 2559.98px) {
   
}

@media (min-width: 2560px) {

}
/* skeleton + lazy fade-in */
.viewslots img.lazy { opacity: 0; transition: opacity .25s ease; will-change: opacity; }
.viewslots img.lazy.is-loaded { opacity: 1; }

.game-skel .wellhd { position: relative; overflow: hidden; }
.game-skel .sk-thumb { width: 100%; height: 120px; border-radius: 6px; }
.game-skel .sk-line { height: 12px; border-radius: 6px; margin-top: 10px; }
.game-skel .sk-line.sm { width: 60%; }
.game-skel .sk-line.md { width: 85%; }
.game-skel .sk-meta { display:flex; justify-content:space-between; margin-top:10px; gap:10px; }
.game-skel .sk-pill { height: 12px; width: 35%; border-radius: 999px; }

.game-skel .sk {
  background: #2b2f3a;
  background-image: linear-gradient(90deg, #2b2f3a 0px, #3a4050 40px, #2b2f3a 80px);
  background-size: 500px 100%;
  animation: sksh 1.1s infinite linear;
}
@keyframes sksh { 0%{background-position:-500px 0} 100%{background-position:500px 0} }

/* Clear-filters injected button styling */
.clear-filters-btn {
  display:block; width:100%;
  margin: 10px 0 14px;
}
/* Mobile overlay menu should scroll */
@media (max-width: 768px) {
  .collape-menu.mobile-menu.open {
    display: block !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 90px; /* space for bottom bar */
  }

  /* Keep the bottom menu always visible */
  .mobile-menu-container {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10000;
  }

  /* Give the overlay room (avoid bottom bar overlap) */
  .collape-menu.mobile-menu .filters-container {
    height: auto !important;
    max-height: none !important;
    margin-bottom: 20px;
  }
}
.mask a.infoslots:only-child {
  margin: 0 auto;
  display: block;
}
/* =========================
   CLS PERFECT (thumbs 512x288 => 16:9)
   ========================= */

/* 16:9 partout */
:root{
  --game-thumb-w: 16;
  --game-thumb-h: 9;
  --game-card-title-lines: 1; /* mets 2 si tu veux 2 lignes réservées */
}

/* Reserve EXACT space for thumbnails (prevents CLS) */
.viewslots.viewslots-eighth{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0f0f0f;
  aspect-ratio: var(--game-thumb-w) / var(--game-thumb-h);
}

/* Ensure media fills the reserved slot */
.viewslots.viewslots-eighth > img,
.viewslots.viewslots-eighth > video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Lazy fade-in only (opacity doesn't shift layout) */
img.lazy{ opacity: 0; }
img.lazy.is-loaded{ opacity: 1; transition: opacity .18s linear; }

/* Reserve text/meta area so it doesn't reflow */
.video-title{
  display: block;
  line-height: 20px;
  min-height: calc(20px * var(--game-card-title-lines));
}
.ribbon-games{ min-height: 18px; }
.video-views{ min-height: 18px; }
.video-rating{ min-height: 18px; }

/* Loader/status: never collapse height */
#status{
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#status .loader-casino{ height: 72px; }

/* Menu icons: lock sizes to avoid tiny shifts */
.mobile-menu-options img,
.menu-cate-container img{
  width: 22px;
  height: 22px;
  display: inline-block;
}

/* Provider logos in filter: lock box */
.filter-option-item img.mw120{
  width: 120px;
  height: 40px;
  object-fit: contain;
  display: block;
}
/* ALWAYS the same space, active or not */
/* STATUS OVERLAY: never affects layout */
#status.status{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  height: 56px;
  z-index: 9999;

  pointer-events: none;    /* don't block clicks */
  display: block;

  /* smooth */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;

  contain: layout paint;
}

#status.status.is-active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* center the spinner inside the fixed bar */
#status.status .loader-casino{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
}
.footer-container{
  contain: layout paint;
}
.footer-container{ opacity: 1; }
.footer-container.is-ready{ opacity: 1; } /* nothing that affects size */

/* === STABILIZE ALL FOOTER IMAGES === */
.footer-container img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
}

/* Prevent images from affecting layout size */
.footer-container img{
  aspect-ratio: attr(width) / attr(height);
}
.game-thumb-wrap{ aspect-ratio:16/9; background:#111; }
.game-thumb-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.footer-container .social-icons img{
  width:24px;
  height:24px;
  object-fit:contain;
}
/* =========================
   Reuse the SAME CSS as sportsbook FAQ
   (drop once globally, no need to duplicate)
   If you already added it, you can skip this.
   ========================= */

.seo-faq{
  max-width: 980px;
  margin: 28px auto;
  padding: 18px 16px;
}

.seo-faq__heading{
  margin: 0 0 14px 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .2px;
}

.seo-faq__list{
  display: block;
}

.seo-faq__item{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  margin: 10px 0;
  overflow: hidden;
}

.seo-faq__q{
  list-style: none;
  cursor: pointer;
  padding: 14px 44px 14px 16px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  position: relative;
  user-select: none;
}

.seo-faq__q::-webkit-details-marker{ display:none; }
.seo-faq__q::marker{ content: ""; }

.seo-faq__q:focus{ outline: none; }

.seo-faq__q::after{
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.seo-faq__item[open] .seo-faq__q::after{ content: "–"; }

.seo-faq__a{
  padding: 0 16px 14px 16px;
}

.seo-faq__a p{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: .95;
}

.seo-faq__q:hover{
  background: rgba(255,255,255,.04);
}

@media (max-width: 640px){
  .seo-faq{
    padding: 14px 12px;
  }
  .seo-faq__heading{
    font-size: 20px;
  }
  .seo-faq__q{
    padding-right: 46px;
  }
}
  /* ✅ Infinite scroll sentinel (prevents footer from being the trigger) */
  #infinite-sentinel{
    width:100%;
    height:1px;
    pointer-events:none;
    clear:both;
  }