body.fullpage-model-active {
	pointer-events: auto !important;
	touch-action: auto !important;
}

/* Global scrollbar */
*::-webkit-scrollbar {
	width: 3px;
	height: 3px;
}
*::-webkit-scrollbar-track {
	background: transparent;
}
*::-webkit-scrollbar-thumb {
	background: #432e7e;
	border-radius: 3px;
}
* {
	scrollbar-width: thin;
	scrollbar-color: #432e7e transparent;
}

/* Layout */
div.app-body {
	background: #0f032f !important;
}

section.feature-screen {
	padding-top: 0 !important;
}

div#lobbyContainer {
	margin-top: 0 !important;
	margin-bottom: 16px !important;
}

/* Header */
header#header {
	background: #1f055b !important;
	border-bottom: 1px solid #432e7e !important;

	i.icon-support {
		color: #9898ff !important;
	}
}

button#header-signup-btn {
	color: #191000 !important;
	font-size: 10px !important;
	font-weight: 800 !important;
}

/* Header Logged In */
header#header .logo .header-logo-custom {
	display: inline-flex;
	align-items: center;
}
header#header .logo .header-logo-custom svg {
	width: 92px;
	height: 21px;
}

header#header nav.header__top-links {
	display: flex !important;
	gap: 6px !important;
	align-items: center !important;
	margin: 0 8px !important;
}

header#header nav.header__top-links .gap-list,
header#header .gap-list {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Texto dos itens do nav superior (Cassino, Esportes, Cassino ao vivo) —
   o site nativo aplica `text-overflow: ellipsis` em `.text-xs` dentro
   desses items, truncando "Cassino ao v...". Forçamos exibir completo. */
header#header nav.header__top-links li,
header#header nav.header__top-links li * {
	max-width: none !important;
	width: auto !important;
}

header#header nav.header__top-links li span,
header#header nav.header__top-links li .text-xs {
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: nowrap !important;
}

header#header .header-icon-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	background: #2b1077 !important;
	border: 1px solid rgba(128, 127, 255, 0.5) !important;
	border-radius: 8px !important;
	padding: 0 !important;
	cursor: pointer !important;
	position: relative !important;
}

header#header .header-icon-btn svg {
	width: 16px !important;
	height: 16px !important;
}

header#header .header-icon-btn i::before {
	content: none !important;
}

header#header .header-icon-btn i {
	position: static !important;
}

header#header .header-icon-btn i::after {
	position: absolute !important;
	top: -2px !important;
	right: 0px !important;
	bottom: auto !important;
	left: auto !important;
	width: 9px !important;
	height: 9px !important;
	border: 1.5px solid #1f055b !important;
}

header#header .header__ctas {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

header#header .header__ctas .user__balance {
	font-family: "Montserrat", sans-serif !important;
	font-weight: 700 !important;
	font-size: 11px !important;
	line-height: 16px !important;
	color: #f5f5f5 !important;
	white-space: nowrap !important;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1 !important;
}

header#header .header__ctas .header-deposit-cta {
	background: #f7f716 !important;
	border-radius: 8px !important;
	padding: 6px 8px !important;
	height: 28px !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	border: none !important;
}

header#header .header__ctas .header-deposit-cta i:has(svg)::before {
	content: none !important;
}

header#header .header__ctas .header-deposit-cta .header-deposit-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 16px !important;
	height: 16px !important;
}

header#header .header__ctas .header-deposit-cta span.header-deposit-label {
	font-family: "Montserrat", sans-serif !important;
	font-weight: 800 !important;
	font-size: 10px !important;
	color: #191000 !important;
	line-height: 16px !important;
	white-space: nowrap !important;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1 !important;
}

header#header .header__ctas .header-deposit-cta img {
	display: none !important;
}

header#header .smartico-inbox-cta {
	display: none !important;
}

header#header .header__ctas .user .avatar {
	background: rgba(199, 176, 7, 0.4) !important;
	border: 1px solid #c7b007 !important;
	border-radius: 42px !important;
	width: 28px !important;
	height: 28px !important;
	padding: 7px !important;
	box-sizing: border-box !important;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	line-height: 14px !important;
	color: #f7f716 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1 !important;
}

header#header .header__ctas .user .avatar.userblnc-overlay {
	margin: 0 !important;
}

header#header .header__ctas .user i.icon-chevron-down,
header#header .header__ctas .user i.icon-chevron-up,
header#header i.userblnc-overlay.icon-chevron-up,
header#header i.userblnc-overlay.icon-chevron-down {
	display: none !important;
}

/* Navbar */
nav#footer-sticky_wrap {
	background: #1f055b !important;
	border-top: 1px solid #887aff !important;
}

nav#footer-sticky_wrap i.icon-payment,
nav#footer-sticky_wrap i.icon-user {
	background: #e3d01e !important;
	color: #0f032f !important;
}

div.bottom-nav.active {
	background: #2f0888 !important;
}

div.bottom-nav {
	color: #d2d6ff !important;
}

div.bottom-nav.active,
div.bottom-nav.active div.bottom-nav--name {
	color: #e7de0b !important;
}

div.bottom-nav div.bottom-nav--name {
	color: #d2d6ff !important;
	font-weight: bold !important;
}

/* Navbar Icons */
i.bottom-nav--icon.icon-hamburger:has(svg)::before,
i.bottom-nav--icon.icon-slots:has(svg)::before,
i.bottom-nav--icon.icon-sports:has(svg)::before,
i.bottom-nav--icon.icon-livecasino:has(svg)::before {
	content: none !important;
}

i.bottom-nav--icon.icon-hamburger,
i.bottom-nav--icon.icon-slots,
i.bottom-nav--icon.icon-sports,
i.bottom-nav--icon.icon-livecasino {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

i.bottom-nav--icon svg {
	width: 1em;
	height: 1em;
}

/* Nav Filter Menu */
nav.nav-filter-menu {
	display: none !important;
	gap: 8px !important;
	align-items: center !important;
	width: 100% !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
	padding: 0 !important;
	margin-top: 16px !important;
	box-sizing: border-box !important;
}

body.custom-lobby-active nav.nav-filter-menu {
	display: flex !important;
}

nav.nav-filter-menu::-webkit-scrollbar {
	display: none;
}

nav.nav-filter-menu button.nav-filter-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 10px 12px 10px 8px;
	background: #1f055b;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

nav.nav-filter-menu button.nav-filter-btn span {
	font-family: "Raleway", sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: #e6e6e6;
}

nav.nav-filter-menu button.nav-filter-btn.active {
	border: 1px solid #e7de0b;
}

nav.nav-filter-menu button.nav-filter-btn.active span {
	color: #e7de0b;
}

nav.nav-filter-menu button.nav-filter-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

nav.nav-filter-menu button.nav-filter-btn.active svg path,
nav.nav-filter-menu button.nav-filter-btn.active svg circle,
nav.nav-filter-menu button.nav-filter-btn.active svg rect,
nav.nav-filter-menu button.nav-filter-btn.active svg ellipse,
nav.nav-filter-menu button.nav-filter-btn.active svg line,
nav.nav-filter-menu button.nav-filter-btn.active svg polygon,
nav.nav-filter-menu button.nav-filter-btn.active svg polyline {
	fill: #e7de0b !important;
}

nav.nav-filter-menu button.nav-filter-btn.active svg path[stroke],
nav.nav-filter-menu button.nav-filter-btn.active svg circle[stroke],
nav.nav-filter-menu button.nav-filter-btn.active svg line[stroke],
nav.nav-filter-menu button.nav-filter-btn.active svg polyline[stroke] {
	stroke: #e7de0b !important;
}

/* Top Ganhos */
/* Hide elements when search is active */
.search-active ~ .top-ganhos-container,
.search-active ~ div .top-ganhos-container {
	display: none !important;
}

body.body-scroll-locked .top-ganhos-container {
	display: none !important;
}

#gameSearch.body-scroll-locked nav.nav-filter-menu,
#gameSearch.search-active nav.nav-filter-menu {
	display: none !important;
}

#gameSearch.body-scroll-locked ~ .top-ganhos-container,
#gameSearch.body-scroll-locked ~ * .top-ganhos-container {
	display: none !important;
}

/* Top Ganhos Ticker */
.top-ganhos-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: 8px;
}

.top-ganhos-track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: top-ganhos-scroll 120s linear infinite;
	padding-left: 74px;
}

.top-ganhos-track:hover {
	animation-play-state: running;
}

@keyframes top-ganhos-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

a.top-ganhos-card {
	width: 188px;
	flex-shrink: 0;
	padding: 6px 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(
		102deg,
		#2b1077 2.35%,
		#1b0849 47.19%,
		#15043f 92.02%
	);
	border-right: 1px solid #2b1077;
	border-bottom: 1px solid #2b1077;
	border-left: 1px solid #2b1077;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
}

.top-ganhos-card-img {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	background: #0f032f;
}

.top-ganhos-card-info {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	min-width: 0;
}

.top-ganhos-card-meta {
	display: flex;
	flex-direction: column;
	width: 55px;
	flex-shrink: 0;
}

.top-ganhos-card-user {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 10px;
	line-height: 16px;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top-ganhos-card-game {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 10px;
	line-height: 12px;
	color: #878d8b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top-ganhos-card-amount {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 10px;
	line-height: 16px;
	color: #f7f716;
	white-space: nowrap;
}

/* Top Ganhos Badge (fixed left flag image) */
img.top-ganhos-badge {
	position: absolute;
	left: 0;
	top: 0;
	width: 74px;
	height: 100%;
	z-index: 5;
	object-fit: contain;
	object-position: left center;
	pointer-events: none;
}

/* Fade edges */
.top-ganhos-fade-left,
.top-ganhos-fade-right {
	position: absolute;
	top: 0;
	width: 52px;
	height: 100%;
	pointer-events: none;
	z-index: 3;
}

.top-ganhos-fade-left {
	left: 48px;
	width: 80px;
	background: linear-gradient(to right, #0f032f 30%, transparent);
	z-index: 4;
}

.top-ganhos-fade-right {
	right: 0;
	background: linear-gradient(to left, #0f032f, transparent);
}

/* Game Lobby Sections — collapse original lobby on Home, EXCEPT providers */
body.custom-lobby-active
	app-lobby-game-swiper
	.lobby_group--parent:not(:has(.g-providers)) {
	display: none !important;
}

/* Collapse Angular lobby wrappers globally to prevent empty space */
app-lobby-game-swiper,
app-lobby-game-group,
app-lobby-game-group > .lobby_group {
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
	min-height: 0 !important;
}

/* Banner principal: oculto apenas em mobile (substitui pelas Stories).
   Em desktop o banner reaparece acima do search/filtros. */
@media (max-width: 768px) {
	section#bannerSwiper {
		display: none !important;
	}
}

/* Ajustes do banner principal — DESKTOP-ONLY. Em mobile o banner está
   oculto via @media (max-width:768px) acima, portanto essas regras só
   precisam atuar em desktop. Isolado pra garantir zero regressão mobile. */
@media (min-width: 769px) {
	/* Esconde a paginação de bullets (faixa azul abaixo das setas).
	   Escopado em #bannerSwiper pra não afetar outros swipers. */
	section#bannerSwiper .swiper-pagination,
	section#bannerSwiper .swiper-pagination-bullets {
		display: none !important;
	}

	/* Remove o gap de 32px que o Angular aplica abaixo do swiper.
	   Estrutura real: `<section id="bannerSwiper" class="swiper banner ...">`
	   — `.banner` é classe do próprio section. `!important` pra vencer a
	   especificidade `_ngcontent-...` do componente Angular. */
	section#bannerSwiper.banner .swiper-wrapper,
	section#bannerSwiper .swiper-wrapper {
		margin-bottom: 0 !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP LEFT SIDEBAR — fixed à esquerda, abaixo do header. Empurra o
   conteúdo principal (.app) com padding-left. Mobile: nunca aparece.
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   SECTION HEADING ICON — DESKTOP-ONLY. Em mobile o título vira sem ícone
   (preserva o layout original). O wrapper `.lobby-section-heading-title`
   sempre existe (criado pelo JS), mas o ícone só é estilizado em desktop.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
	.lobby-section-heading-title {
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0; /* permite truncar o título se a coluna for estreita */
	}

	.lobby-section-heading-icon {
		width: 24px;
		height: 24px;
		flex-shrink: 0;
		object-fit: contain;
		display: block;
	}
}

/* Mobile — esconde o ícone para preservar o layout existente, intocado. */
@media (max-width: 768px) {
	.lobby-section-heading-icon {
		display: none !important;
	}
}

@media (min-width: 769px) {
	/* Header — sticky no topo da viewport. Em desktop o header fica fixo
	   enquanto o usuário rola; mobile preserva o comportamento original
	   (static). z-index alto pra ficar acima de cards/banner.
	   Altura 52px com padding vertical 10 dá 32px pros itens internos
	   (logo, depósito, avatar). */
	body header#header {
		position: sticky !important;
		top: 0 !important;
		z-index: 100 !important;
		background: #1f055b !important;
		padding: 10px 16px !important;
		min-height: 0 !important;
		max-height: 52px !important;
		overflow: hidden;
	}

	/* Itens internos do header — max 32px de altura (52 - 20 = 32). */
	header#header .container.header-flex,
	header#header .container.header-flex > * {
		max-height: 32px !important;
	}

	/* DESLOGADO — Esconde botão de suporte (headphone). Pode estar em
	   diferentes containers; selecionamos os mais comuns. */
	body header#header .header__ctas .smartico-inbox-cta,
	body header#header .header__ctas .btn-square[class*="support"],
	body header#header .header__ctas button[aria-label*="suporte" i],
	body header#header .header__ctas button[aria-label*="support" i],
	body header#header .header__ctas .lh-0.gap-list:has(svg) {
		display: none !important;
	}

	/* Botão Entrar — padding 6/8, font 12px, weight 700 */
	body header#header .header__ctas .site-btn__teritary,
	body
		header#header
		.header__ctas
		button:not(.site-btn__primary):where(
			[class*="entrar"],
			[data-testid*="login"]
		) {
		padding: 6px 8px !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		height: auto !important;
		min-height: 0 !important;
		line-height: 16px !important;
	}

	/* Botão Cadastrar — padding 6/8, font 10px, weight 700, width pelo
	   conteúdo (max-content). O site Multi aplica `min-width` fixo nesse
	   botão por padrão; sobrescrevemos pra que cole no texto. */
	body header#header .header__ctas .site-btn__primary:not(.header-deposit-cta) {
		padding: 6px 8px !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		height: auto !important;
		min-height: 0 !important;
		line-height: 16px !important;
		width: max-content !important;
		min-width: 0 !important;
	}

	/* Mesma lógica para "Entrar" — encosta no conteúdo. */
	body header#header .header__ctas .site-btn__teritary {
		width: max-content !important;
		min-width: 0 !important;
	}

	/* LOGADO — esconde "MULTI+" (smartico-inbox-cta da loja/multi+) e
	   o switch de idioma (lang-dropdown). */
	body header#header .header__ctas app-lang-dropdown,
	body header#header .header__ctas .lang-dropdown {
		display: none !important;
	}

	/* MULTI+ button — geralmente é um botão amarelo separado.
	   Procuramos por texto/aria-label e classes do site. */
	body
		header#header
		button.site-btn:has(.ng-star-inserted):not(.header-deposit-cta):not(
			.site-btn__teritary
		) {
		/* Se for o MULTI+ (que tem ico-btn ng-star-inserted) — esconde */
	}
	body
		header#header
		button.site-btn[class*="ico-btn"]:not(.header-deposit-cta) {
		display: none !important;
	}

	/* Botão Depósito — sem largura fixa, respeita conteúdo.
	   Spec design: bg amarelo, text preto, padding 6/12, font 12 weight 700.
	   Ícone original (download SVG) é substituído por um "+" via ::before
	   pra bater com o design Figma. */
	body header#header .header-deposit-cta {
		width: auto !important;
		min-width: 0 !important;
		padding: 6px 12px !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: 32px !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 16px !important;
		border-radius: 8px !important;
		gap: 4px !important;
	}

	/* Esconde o ícone download nativo do site Multi. Combo de regras
	   defensivas — Angular pode aplicar `display: flex !important`
	   inline via component scope, então usamos visibility + dimensions
	   zero como backup. */
	body header#header .header__ctas .header-deposit-cta i.header-deposit-icon,
	body header#header .header__ctas .header-deposit-cta > i {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		min-width: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
		font-size: 0 !important;
	}

	/* "+" do design Figma — pseudo-element que herda a cor do botão. */
	body header#header .header-deposit-cta::before {
		content: "+";
		font-family: "Montserrat", sans-serif;
		font-size: 16px;
		font-weight: 700;
		line-height: 16px;
		color: inherit;
	}

	/* Avatar do usuário (Profile button) — círculo 32x32. */
	body header#header .header__ctas .user .avatar,
	body header#header .header__ctas [class*="profile"] [class*="avatar"] {
		width: 32px !important;
		height: 32px !important;
		max-height: 32px !important;
		border-radius: 50% !important;
	}

	/* DESKTOP-only positioning — fixed no body, mount uma vez via JS e
	   visível em todas as rotas exceto /pb/sports (toggle pela classe
	   `body.ps-has-desktop-sidebar`). Antes era sticky DENTRO de
	   `app-game-lobby` (flex layout) — só funcionava em /pb/jogos e
	   /pb/jogosaovivo. Fixed no body permite exibir em /pb/myaccount,
	   /pb/promotions, /pb/gameplay/*, etc. */
	#ps-sidebar {
		position: fixed;
		top: 52px;
		left: 0;
		width: 288px;
		height: calc(100vh - 52px);
		padding: 32px 0;
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-width: thin;
		z-index: 50;
	}

	/* Empurra o conteúdo do app pra direita pra dar espaço ao sidebar
	   fixo (288 + 52 acima pra reservar lugar pro header — que vira
	   `position: fixed` quando a sidebar está ativa pra escapar do
	   `padding-left` do body e atravessar a viewport inteira).
	   `overflow-x: clip` (com fallback `hidden` pra browsers antigos)
	   garante que páginas da Multibet com larguras fixas que excedem
	   `viewport - 288` sejam clipadas pela direita em vez de gerar
	   scroll horizontal — fix global, sem precisar caçar componente
	   por componente. `clip` (Chrome 90+, FF 81+, Safari 16+) não
	   estabelece um scroll-container como `hidden` faz, então
	   sticky/fixed continuam funcionando normalmente. */
	body.ps-has-desktop-sidebar {
		padding-left: 288px;
		padding-top: 52px;
		overflow-x: hidden;
		overflow-x: clip;
	}

	/* Header convertido pra fixed quando a sidebar tá ativa. Sticky
	   herdaria o `padding-left: 288` do body (porque sticky calcula a
	   posição em relação ao container do flow), e o header acabava
	   shiftando pra direita junto com o resto. Fixed sai do flow do body,
	   ignora o padding e ocupa full viewport width. */
	body.ps-has-desktop-sidebar header#header {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
	}

	/* Constrói a largura disponível do conteúdo após o body padding. O
	   banner Bootstrap (`width: 1407.99px + margin-right: -146px`) e o
	   feature-screen do lobby precisam respeitar a viewport reduzida. */
	body.ps-has-desktop-sidebar app-game-lobby > section.feature-screen,
	body.ps-has-desktop-sidebar #lobbyContainer {
		overflow-x: hidden;
		max-width: 100%;
	}

	body.ps-has-desktop-sidebar .banner-nopadding-mobile.container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.ps-has-desktop-sidebar section#bannerSwiper {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   PS-SIDEBAR — pintura/espaçamento interno UNIVERSAL. Aplicável tanto no
   desktop (montado em `app-game-lobby`) quanto no mobile (montado dentro
   do `modal#left-hamburger-menu`). O posicionamento (sticky 288px desktop
   vs. inline full-width mobile) fica em blocos `@media` separados.
   ════════════════════════════════════════════════════════════════════════ */
#ps-sidebar {
	background: #1b0849; /* container color do design */
	border-right: 1px solid #2b1077;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* Greeting */
#ps-sidebar .ps-sidebar-greeting {
	padding: 0 16px;
	color: #e7e9ff;
	font-family: "Raleway", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
}

/* Divider 1px — separa o greeting do conteúdo, e bonus do nav.
   Cor #2B1077 do design system, ocupa 100% da width do asside,
   margin-y 18px. */
#ps-sidebar .ps-sidebar-divider {
	width: 100%;
	height: 1px;
	margin: 18px 0;
	border: 0;
	background: #2b1077;
	flex-shrink: 0;
}

/* ─── Bonuses section ─── */
#ps-sidebar .ps-sidebar-bonuses {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 12px;
}

/* `[hidden]` HTML attribute — `display: flex` acima vence o default
   `display: none`. Forçamos a regra de hidden pra esconder a seção
   quando a API não retorna bônus. */
#ps-sidebar .ps-sidebar-bonuses[hidden] {
	display: none !important;
}

/* Quando bonuses está hidden, oculta APENAS o divider DEPOIS dele
   (entre bonuses e nav). O divider ANTES (entre greeting e bonus/nav)
   continua visível porque ele separa o header da sidebar do conteúdo. */
#ps-sidebar .ps-sidebar-bonuses[hidden] + .ps-sidebar-divider {
	display: none !important;
}

#ps-sidebar .ps-sidebar-bonuses-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 32px;
}

#ps-sidebar .ps-sidebar-bonuses-header h3 {
	margin: 0;
	padding-left: 8px;
	color: #e7e9ff;
	font-family: "Be Vietnam Pro", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
}

/* Mesma visual + funcionalidade de `.lobby-scroll-arrows` / `.lobby-scroll-btn`
   (sections do home), só com nomes de classe diferentes pra preservar
   namespace do `#ps-sidebar`. Disabled state + chevrons em SVG. */
#ps-sidebar .ps-sidebar-bonuses-arrows {
	display: flex;
	gap: 8px;
	align-items: center;
}

#ps-sidebar .ps-sidebar-arrow {
	width: 24px;
	height: 24px;
	background: #2b1077;
	border: 1px solid rgba(128, 127, 255, 0.5);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.15s ease;
}

#ps-sidebar .ps-sidebar-arrow img {
	width: 14px;
	height: 14px;
}

#ps-sidebar .ps-sidebar-arrow.disabled {
	opacity: 0.5;
	cursor: default;
}

#ps-sidebar .ps-sidebar-bonus-track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

#ps-sidebar .ps-sidebar-bonus-track::-webkit-scrollbar {
	display: none;
}

#ps-sidebar .ps-sidebar-bonus-card {
	flex-shrink: 0;
	width: 168px;
	background: #1f0855;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 12px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.15s ease;
}

#ps-sidebar a.ps-sidebar-bonus-card:hover {
	transform: translateY(-2px);
}

#ps-sidebar a.ps-sidebar-bonus-card:link,
#ps-sidebar a.ps-sidebar-bonus-card:visited,
#ps-sidebar a.ps-sidebar-bonus-card:hover,
#ps-sidebar a.ps-sidebar-bonus-card:focus,
#ps-sidebar a.ps-sidebar-bonus-card:active {
	color: inherit;
	text-decoration: none;
}

/* Thumb 3:4 — replica a proporção dos cards de jogos do operador
   (ex.: BIG BASS SPLASH em /pb/promotions). 168 × 224. */
#ps-sidebar .ps-sidebar-bonus-card img {
	width: 100%;
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: cover;
	background: #0f172a;
	display: block;
	border-radius: 8px;
}

#ps-sidebar .ps-sidebar-bonus-card-title {
	padding: 0 12px;
	color: #ffffff;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CTA "Resgatar agora" — gradient amarelo, fonte Montserrat 700. */
#ps-sidebar .ps-sidebar-bonus-card-cta {
	margin: 4px 0 0;
	height: 32px;
	padding: 0 12px;
	border: 1px solid rgba(247, 247, 22, 0.5);
	border-radius: 8px;
	background: linear-gradient(180deg, #f7f716 0%, #d8d800 100%);
	color: #191000;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	cursor: pointer;
	transition: filter 0.15s ease;
}

#ps-sidebar .ps-sidebar-bonus-card-cta:hover {
	filter: brightness(0.95);
}

#ps-sidebar .ps-sidebar-bonus-card-cta:active {
	filter: brightness(0.9);
}

/* ─── BonusCard / BonusList — componente reusável ─────────────────────────
   Usado em ambas as sidebars (left + profile). Não escopado a nenhum
   container específico — funciona standalone. */
.ps-bonus-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ps-bonus-list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.ps-bonus-list-header h3 {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #fafafa;
}

.ps-bonus-list-arrows {
	display: flex;
	gap: 6px;
}
.ps-bonus-list-arrow {
	width: 24px;
	height: 24px;
	border-radius: 8px;
	border: 1px solid rgba(128, 127, 255, 0.3);
	background: #2b1077;
	color: #afb2ff;
	font-size: 14px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ps-bonus-list-track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.ps-bonus-list-track::-webkit-scrollbar {
	display: none;
}

/* Card 236×110 com layout horizontal: thumb à esquerda + info+CTA à direita.
   Specs do user: bg #2B1077, border #380FAF, padding 10, thumb 42×54 (7/9). */
.ps-bonus-card {
	width: 236px;
	height: fit-content;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 10px;
	background: #2b1077;
	border: 1px solid #380faf;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ps-bonus-card-top {
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 1;
	min-height: 0;
}

.ps-bonus-card-thumb {
	width: 42px;
	height: 54px;
	aspect-ratio: 7 / 9;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
	background: #0f032f;
}
.ps-bonus-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ps-bonus-card-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
}
.ps-bonus-card-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ps-bonus-card-subtitle {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	color: #9898ff;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: pre-line;
	gap: 4px;
	display: flex;
}

.ps-bonus-card-subtitle-spins {
	color: #e7e9ff;
}

.ps-bonus-card-cta {
	width: 100%;
	height: 32px;
	border-radius: 8px;
	border: 1px solid #e7de0b;
	background: linear-gradient(180deg, #c7b007 0%, #e7de0b 100%);
	color: #191000;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	cursor: pointer;
	flex-shrink: 0;
	transition: filter 0.15s ease;
}
.ps-bonus-card-cta:hover {
	filter: brightness(0.95);
}
.ps-bonus-card-cta:active {
	filter: brightness(0.9);
}

/* "Resgatar todos os bônus" — só na left sidebar (showRedeemAll). */
.ps-bonus-redeem-all {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
	border-radius: 8px;
	border: 1px solid #461cf3;
	background: #4303dd;
	color: #e7e9ff;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}
.ps-bonus-redeem-all:hover {
	filter: brightness(1.1);
}
.ps-bonus-redeem-all:active {
	filter: brightness(0.95);
}
.ps-bonus-redeem-all:link,
.ps-bonus-redeem-all:visited {
	color: #e7e9ff;
	text-decoration: none;
}

/* ─── Sections nav ─── */
#ps-sidebar .ps-sidebar-sections {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 12px;
}

#ps-sidebar .ps-sidebar-section-link {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 40px;
	padding: 0 8px;
	border-radius: 8px;
	text-decoration: none;
	color: #ffffff;
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	transition:
		background-color 0.15s ease,
		filter 0.15s ease;
}

#ps-sidebar .ps-sidebar-section-link:hover {
	background: rgba(255, 255, 255, 0.04);
	filter: brightness(1.1);
}

#ps-sidebar .ps-sidebar-section-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	object-fit: contain;
	display: block;
}

#ps-sidebar .ps-sidebar-section-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
   "ACESSAR O MULTI+" — CTA com gradient amarelo (Figma). Compartilhado
   entre a sidebar (mobile + desktop, 48px tall) e o header desktop
   (variante compacta 32px). A classe base `.ps-multi-cta` define
   gradient/cor/fonte/raio; modificadores controlam dimensões.
   ════════════════════════════════════════════════════════════════════════ */
.ps-multi-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, #c7b007 0%, #e7de0b 100%);
	color: #1f055b;
	font-family: "Be Vietnam Pro", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	cursor: pointer;
	transition: filter 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.ps-multi-cta:hover {
	filter: brightness(0.95);
}

.ps-multi-cta:active {
	filter: brightness(0.9);
}

.ps-multi-cta:focus,
.ps-multi-cta:focus-visible {
	outline: none;
}

.ps-multi-cta img {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Variante sidebar (mobile + desktop) — 48px tall, padding Figma 10/9.
   Margin lateral 12 alinhada com `.ps-sidebar-sections` e `.ps-sidebar-bonuses`. */
#ps-sidebar .ps-sidebar-multi-cta {
	height: 48px;
	padding: 10px 9px;
	margin: 0 12px 12px;
	flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP TOP GANHOS — re-estiliza ticker conforme design Figma.
   Cards 192×44 com gradient 51deg, bordas L/R/B brand-800, thumb 32×32
   rounded-8, info row com user (white 600), slot (zinc-500 400) e amount
   (yellow 700). Badge "Top Ganhos" 80×48 à esquerda.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
	.top-ganhos-container {
		height: 48px !important;
		margin-bottom: 16px !important;
	}

	.top-ganhos-track {
		padding-left: 80px !important; /* abre espaço pro badge 80px */
	}

	a.top-ganhos-card {
		width: 192px !important;
		height: 44px !important;
		padding: 6px 8px !important;
		gap: 6px !important;
		background: linear-gradient(
			51deg,
			#1f0855 0%,
			#2a1077 50%,
			#1f0855 100%
		) !important;
		border-left: 1px solid #2a1077 !important;
		border-right: 1px solid #2a1077 !important;
		border-bottom: 1px solid #2a1077 !important;
		border-top: 0 !important;
		box-sizing: border-box !important;
	}

	.top-ganhos-card-img {
		width: 32px !important;
		height: 32px !important;
		border-radius: 8px !important;
		background: #0f172a !important; /* slate-900 do Figma */
		flex-shrink: 0 !important;
	}

	.top-ganhos-card-info {
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
		flex: 1 !important;
		min-width: 0 !important;
	}

	.top-ganhos-card-meta {
		display: flex !important;
		flex-direction: column !important;
		min-width: 0 !important;
		flex: 1 !important;
		width: auto !important;
	}

	.top-ganhos-card-user {
		color: #ffffff !important;
		font-family: "Montserrat", sans-serif !important;
		font-size: 10px !important;
		font-weight: 600 !important;
		line-height: 16px !important;
	}

	.top-ganhos-card-game {
		color: #71717a !important; /* zinc-500 */
		font-family: "Montserrat", sans-serif !important;
		font-size: 10px !important;
		font-weight: 400 !important;
		line-height: 16px !important;
	}

	.top-ganhos-card-amount {
		color: #f7f716 !important; /* yellow-400 (paleta Multi) */
		font-family: "Montserrat", sans-serif !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		line-height: 16px !important;
		flex-shrink: 0 !important;
	}

	/* Badge "Top Ganhos" — 80×48 (mobile usa 74px e 100% altura). */
	img.top-ganhos-badge {
		width: 80px !important;
		height: 48px !important;
		object-fit: cover !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP HEADER NAV — re-estiliza CASSINO / ESPORTES / CASSINO AO VIVO
   conforme design Figma. Escopado em `nav.header__top-links.ps-desktop-nav`
   pra ser ativado SOMENTE quando o JS marcar (e nunca em mobile).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
	/* Header container — distância lateral 12px (full-width já é default). */
	body header#header {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	/* `.container.header-flex` é Bootstrap-like: max-width + margin auto +
	   padding 32px laterais. Pra ficar full-width como o Figma manda,
	   anulamos tudo isso e deixamos só o padding 12px do header decidir. */
	header#header .container.header-flex {
		max-width: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		gap: 32px !important;
		justify-content: flex-start !important;
		align-items: center !important;
	}

	/* Bootstrap aplica `::before` e `::after` com `content: ""` em containers
	   pra clearfix. Em flexbox eles CONTAM como itens e empurram o conteúdo
	   pelo gap (32px aqui). Removemos pra que o logo encoste na borda
	   esquerda (x=12, igual ao padding do header) e ctas encostem na direita. */
	header#header .container.header-flex::before,
	header#header .container.header-flex::after {
		content: none !important;
		display: none !important;
	}

	/* `header__ctas` é o grupo da direita (suporte/Entrar/Cadastrar/lang).
	   `margin-left: auto` empurra-o pro extremo direito, deixando logo + nav
	   agrupados à esquerda com gap 32 entre eles. */
	header#header .container.header-flex > .header__ctas {
		margin-left: auto !important;
	}

	/* Container do <ul> — gap 8px entre botões. */
	header#header nav.header__top-links.ps-desktop-nav ul {
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	/* Cada <li> = pílula 120×32 com ícone + texto centralizado.
	   Default (não-selecionado): bg transparente, conteúdo em lilás claro.
	   Selected (.active — routerLinkActive do Angular): bg roxo médio,
	   conteúdo em amarelo. */
	header#header nav.header__top-links.ps-desktop-nav li {
		display: flex !important;
		width: 120px !important;
		height: 32px !important;
		padding: 0 12px !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		border-radius: 32px !important;
		background: transparent !important;
		cursor: pointer !important;
		box-sizing: border-box !important;
		transition:
			background-color 0.15s ease,
			filter 0.15s ease;
	}

	header#header nav.header__top-links.ps-desktop-nav li:hover {
		filter: brightness(1.1);
	}

	/* Ícone 20×20 — CSS mask aplica a cor sobre o SVG (amarelo nativo).
	   Default: lilás secundário #afb2ff. */
	header#header nav.header__top-links.ps-desktop-nav li .ps-nav-icon {
		display: inline-block !important;
		width: 20px !important;
		height: 20px !important;
		flex-shrink: 0 !important;
		aspect-ratio: 1 / 1 !important;
		background-color: #afb2ff !important;
		mask-size: contain !important;
		-webkit-mask-size: contain !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-position: center !important;
		-webkit-mask-position: center !important;
		transition: background-color 0.15s ease;
	}

	/* Texto default: lilás secundário (mesmo do ícone), Montserrat 10/16/500.
	   Cancela `text-transform: uppercase` do Angular (.text-xs). */
	header#header nav.header__top-links.ps-desktop-nav li > span {
		color: #afb2ff !important;
		font-family: "Montserrat", sans-serif !important;
		font-size: 10px !important;
		font-style: normal !important;
		font-weight: 500 !important;
		line-height: 16px !important;
		text-transform: none !important;
		font-variant-numeric: lining-nums proportional-nums !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		transition: color 0.15s ease;
	}

	/* SELECTED (li.active) — pílula roxo médio + ícone+texto amarelo.
	   Angular aplica a class `active` via [routerLinkActive] na rota atual.
	   Cor de fundo `#2A1077` = brand-800 do design system. */
	header#header nav.header__top-links.ps-desktop-nav li.active {
		background: #2a1077 !important;
	}

	header#header nav.header__top-links.ps-desktop-nav li.active > span {
		color: #f7f716 !important;
	}

	header#header nav.header__top-links.ps-desktop-nav li.active .ps-nav-icon {
		background-color: #f7f716 !important;
	}

	/* Botão Promoções — quadradinho 28×28 à esquerda do saldo.
	   Movido pra dentro de .header__ctas pelo JS. `position: relative`
	   pra ancorar o bullet de notificação (::after). */
	body header#header .header__ctas li.ps-promo-square {
		display: inline-flex !important;
		width: 28px !important;
		height: 28px !important;
		min-width: 0 !important;
		max-width: none !important;
		padding: 0 !important;
		margin: 0 !important;
		justify-content: center !important;
		align-items: center !important;
		background: #2b1077 !important;
		border: 1px solid #5648bb !important;
		border-radius: 8px !important;
		cursor: pointer !important;
		box-sizing: border-box !important;
		flex-shrink: 0 !important;
		position: relative !important;
	}

	/* Bullet point de notificação no canto superior direito — replica o
	   comportamento do header mobile (que tem o indicador nativo Angular).
	   No desktop o `innerHTML = ""` em `movePromotionsButton` apagou o
	   indicador original; restauramos via pseudo-element. */
	body header#header .header__ctas li.ps-promo-square::after {
		content: "";
		position: absolute;
		top: -2px;
		right: -2px;
		width: 8px;
		height: 8px;
		background: #ff3b30;
		border: 2px solid #1f055b;
		border-radius: 50%;
		box-sizing: content-box;
		pointer-events: none;
	}

	/* Ícone do botão Promoções — promotion.svg via mask, cor lilás claro
	   pra contrastar com o bg roxo. */
	body header#header .header__ctas li.ps-promo-square .ps-promo-square-icon {
		display: inline-block !important;
		width: 16px !important;
		height: 16px !important;
		background-color: #afb2ff !important;
		mask-size: contain !important;
		-webkit-mask-size: contain !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-position: center !important;
		-webkit-mask-position: center !important;
	}

	body header#header .header__ctas li.ps-promo-square:hover {
		filter: brightness(1.15);
	}

	/* "Acessar o Multi+" no header desktop — variante compacta pra caber
	   nos 32px de altura útil dos itens do header. Mesmo gradient/font da
	   sidebar mas dimensões reduzidas. Inserido no nav após o
	   <li data-testid="header-livecasino"> via `restyleDesktopHeaderNav`. */
	header#header nav.header__top-links .ps-header-multi-cta {
		height: 32px !important;
		max-height: 32px !important;
		padding: 6px 12px !important;
		font-size: 13px !important;
		line-height: 16px !important;
		gap: 6px !important;
		margin-left: 8px;
		flex-shrink: 0;
		white-space: nowrap;
	}

	header#header nav.header__top-links .ps-header-multi-cta img {
		width: 16px !important;
		height: 16px !important;
	}
}

/* Hide Angular lobby tabs/filter globally — replaced by custom nav on Home, not needed elsewhere */
app-lobby-filter-group,
.lobby_group--tabs-cotnainer {
	display: none !important;
}

/* Esconde as setinhas (chevron-right/left) dos botões de navegação
   nativos dos swipers do Angular. Em todos os carrosseis temos nosso
   próprio `.lobby-scroll-arrows` acima — manter os dois é redundante. */
i.icon-chevron-right,
i.icon-chevron-left {
	display: none !important;
}

/* Collapse Angular lobby sections that are replaced by custom lobby.
   Preserve .lobby_group--parent:has(.g-providers) which is restyled, not replaced. */
body.custom-lobby-active .lobby_group--parent:not(:has(.g-providers)) {
	display: none !important;
}

#custom-lobby-wrapper,
#custom-aovivo-wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Grid mode: vertical card layout for Cassino filter */
#custom-lobby-wrapper.lobby-grid-mode .lobby-simple-cards,
#custom-lobby-wrapper.lobby-grid-mode .lobby-stats-cards {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	overflow-x: visible;
	padding: 0;
}

#custom-lobby-wrapper.lobby-grid-mode .lobby-section-cards {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	overflow-x: visible;
	padding: 0;
}

#custom-lobby-wrapper.lobby-grid-mode a.lobby-simple-card {
	width: auto;
}

#custom-lobby-wrapper.lobby-grid-mode .lobby-simple-card-thumb {
	width: 100%;
	height: 140px;
}

#custom-lobby-wrapper.lobby-grid-mode a.lobby-stats-card {
	width: auto;
	height: 164px;
}

#custom-lobby-wrapper.lobby-grid-mode .lobby-stats-card-thumb {
	width: 100%;
	height: 123px;
}

#custom-lobby-wrapper.lobby-grid-mode .lobby-stats-card-thumb img {
	width: 100%;
	height: 115%;
	top: -14%;
}

#custom-lobby-wrapper.lobby-grid-mode a.lobby-game-item {
	width: auto;
	height: 144px;
}

#custom-lobby-wrapper.lobby-grid-mode .lobby-game-rank {
	display: none;
}

#custom-lobby-wrapper.lobby-grid-mode .lobby-game-thumb {
	position: relative;
	width: 100%;
	height: 100%;
	right: auto;
	top: auto;
	border-radius: 8px;
}

/* Dynamic Filter Grid (Cassino / Cassino ao Vivo) */
.lobby-filter-dynamic {
	padding: 0;
}

.lobby-filter-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 12px;
	padding: 0;
}

/* Desktop: cards menores (~109×164) ao invés de 3 cols gigantes.
   `auto-fill, minmax(109px, 130px)` deixa cada card entre 109–130px de
   largura — o grid acomoda quantos couberem com pelo menos esse range,
   sem esticar absurdamente quando há muito espaço sobrando. */
@media (min-width: 769px) {
	.lobby-filter-grid {
		grid-template-columns: repeat(auto-fill, 109px);
		gap: 12px 8px;
		justify-content: start;
	}

	.lobby-filter-grid a.lobby-simple-card {
		gap: 2px;
	}

	.lobby-filter-grid .lobby-simple-card-thumb {
		aspect-ratio: 109 / 141;
	}

	/* Info menor pra card total ficar ~164px (thumb 141 + gap 2 + info ~21). */
	.lobby-filter-grid .lobby-simple-card-info {
		gap: 0;
	}

	.lobby-filter-grid .lobby-simple-card-name {
		font-size: 10px;
		line-height: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.lobby-filter-grid .lobby-simple-card-provider {
		font-size: 9px;
		line-height: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.lobby-filter-grid a.lobby-simple-card {
	width: auto;
	gap: 8px;
}

.lobby-filter-grid .lobby-simple-card-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 109 / 141;
	border-radius: 6px;
	overflow: hidden;
}

.lobby-filter-grid .lobby-simple-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lobby-filter-grid .lobby-simple-card-info {
	gap: 4px;
}

.lobby-filter-grid .lobby-simple-card-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	color: #ffffff;
}

.lobby-filter-grid .lobby-simple-card-provider {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: #878d8b;
}

.lobby-section {
	margin-bottom: 0;
}

.lobby-section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	margin-bottom: 12px;
}

.lobby-scroll-arrows {
	display: flex;
	gap: 8px;
	align-items: center;
}

.lobby-scroll-btn {
	width: 24px;
	height: 24px;
	background: #2b1077;
	border: 1px solid rgba(128, 127, 255, 0.5);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.15s ease;
}

.lobby-scroll-btn img {
	width: 14px;
	height: 14px;
}

.lobby-scroll-btn.disabled {
	opacity: 0.5;
	cursor: default;
}

.lobby-section-heading h2,
#custom-lobby-wrapper .lobby-section-heading h2 {
	font-family: "Montserrat", sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 20px !important;
	color: #ecedf2 !important;
	margin: 0 !important;
}

@media (max-width: 896px) and (orientation: landscape),
	(max-width: 767px) and (orientation: portrait) {
	.lobby-section-heading h2,
	#custom-lobby-wrapper .lobby-section-heading h2,
	#custom-lobby-wrapper h2 {
		font-size: 16px !important;
		line-height: 20px !important;
		margin: 0 !important;
	}
}

.lobby-section-cards {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-left: 0;
	overflow-y: hidden;
}

.lobby-section-cards::-webkit-scrollbar {
	display: none;
}

a.lobby-game-item {
	position: relative;
	width: 145px;
	height: 144px;
	flex-shrink: 0;
	cursor: pointer;
	display: block;
	text-decoration: none;
}

a.lobby-game-item.no-rank {
	width: 105px;
}

.lobby-game-rank {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	left: 68px;
	top: 87px;
	transform: translateX(-100%) translateY(-50%);
	line-height: 0;
}

.lobby-game-rank svg {
	display: block;
	height: auto;
	width: auto;
}

/* Number 10 is wider (2 digits) — shift rank right so it stays behind the card */
a.lobby-game-item:nth-child(10) {
	width: 165px;
}

a.lobby-game-item:nth-child(10) .lobby-game-rank {
	left: 123px;
}

.lobby-game-thumb {
	position: absolute;
	right: 0;
	top: 12px;
	width: 97px;
	height: 132px;
	border-radius: 10px;
	background: #212330;
	overflow: hidden;
	z-index: 1;
}

.lobby-game-thumb img {
	width: 102px;
	height: 132px;
	object-fit: cover;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.lobby-game-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 10px;
	color: #6b6fa8;
	text-align: center;
	padding: 8px;
	line-height: 1.3;
}

/* Game Lobby - Simple Cards (787:499) */
.lobby-simple-cards {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-left: 0;
}

.lobby-simple-cards::-webkit-scrollbar {
	display: none;
}

a.lobby-simple-card {
	width: 109px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	cursor: pointer;
}

.lobby-simple-card-thumb {
	width: 109px;
	height: 141px;
	border-radius: 6px;
	overflow: hidden;
	background: #212330;
}

.lobby-simple-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lobby-simple-card-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lobby-simple-card-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	color: #ffffff;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lobby-simple-card-provider {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: #878d8b;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

/* Game Lobby - League Cards (798:1313) */
.lobby-league-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
}

.lobby-league-row {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.lobby-league-row::-webkit-scrollbar {
	display: none;
}

a.lobby-league-card {
	display: flex;
	height: 52px;
	border: 0.5px solid #a3a3a3;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	flex-shrink: 0;
}

.lobby-league-card-img {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	overflow: hidden;
}

.lobby-league-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lobby-league-card-label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background: #2f0888;
	height: 100%;
}

.lobby-league-card-label span {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 12px;
	color: #f5f5f5;
	white-space: nowrap;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

/* Game Lobby - Tournament Cards (798:1316) */
.lobby-tournament-cards {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0;
}

.lobby-tournament-cards::-webkit-scrollbar {
	display: none;
}

.lobby-tournament-card {
	width: 296px;
	flex-shrink: 0;
	background: #1f055b;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.lobby-tournament-card-banner {
	width: 100%;
	height: 169px;
	background: #0f032f;
	overflow: hidden;
	position: relative;
}

.lobby-tournament-card-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lobby-tournament-card-badge {
	position: absolute;
	left: 8px;
	top: 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 4px;
	border-radius: 30px;
	background: rgba(14, 2, 43, 0.8);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 2;
}

.lobby-tournament-card-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22c55e;
}

.lobby-tournament-card-badge-count {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 8px;
	line-height: 16px;
	color: #fafafa;
	text-align: center;
	white-space: nowrap;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

.lobby-tournament-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 12px 0;
}

.lobby-tournament-card-countdown {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 16px;
	color: #f7f716;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

.lobby-tournament-card-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: normal;
	color: #ffffff;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lobby-tournament-card-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.lobby-tournament-card-info-row {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #2f0888;
	border-radius: 8px;
	padding: 4px 8px;
	width: 100%;
	box-sizing: border-box;
}

.lobby-tournament-card-info-row img {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.lobby-tournament-card-info-row-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
}

.lobby-tournament-card-info-label {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 10px;
	color: #e6e6e6;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

.lobby-tournament-card-info-value {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 10px;
	color: #fff7f5;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

.lobby-tournament-card-cta {
	margin: 12px;
	height: 32px;
	background: #f7f716;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 12px;
	color: #191000;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
	text-decoration: none;
}

/* Participando/Adquirido = mesmo visual do CTA ativo (amarelo), só inativo
   com opacidade 0.75. O `.disabled` cuida do pointer-events/cursor. */
.lobby-tournament-card-cta.participating {
	opacity: 0.75;
}

/* Skeleton card — placeholder visual enquanto Promoções/Smartico carregam.
   Mantém mesmo footprint do `.lobby-tournament-card` (296×~380) para evitar
   pulo de layout quando o conteúdo real chega. Sem mock, sem dado fake —
   apenas um shape vazio com shimmer. */
.lobby-skeleton-card {
	width: 296px;
	height: 380px;
	flex-shrink: 0;
	border-radius: 12px;
	background: linear-gradient(
			110deg,
			rgba(255, 255, 255, 0.04) 8%,
			rgba(255, 255, 255, 0.1) 22%,
			rgba(255, 255, 255, 0.04) 36%
		)
		#1f055b;
	background-size: 200% 100%;
	animation: lobby-skeleton-shimmer 1.4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes lobby-skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* Disabled CTA — Loja (Indisponível), Missões (bloqueada/concluída),
   Promoções (em andamento). Mantém o background e a cor do estado original;
   só escurece via filter para indicar inativo. */
.lobby-tournament-card-cta.disabled {
	cursor: not-allowed;
	pointer-events: none;
	filter: brightness(0.7);
}

/* Participando/Adquirido (já opted-in / já comprado): mantém o amarelo
   intacto — só `opacity: 0.75` indica o estado, sem brightness extra. */
.lobby-tournament-card-cta.participating.disabled {
	filter: none;
}

/* Hover/active — NÃO mudam a cor do texto (mantém a cor já setada).
   Aplicam filter brightness no botão inteiro. Travamos cor em todos os
   pseudo-estados de link (visited/hover/focus/active) porque o site host
   reseta `a:active`/`a:visited` para branco. */
.lobby-tournament-card-cta,
.lobby-tournament-card-cta:link,
.lobby-tournament-card-cta:visited,
.lobby-tournament-card-cta:hover,
.lobby-tournament-card-cta:focus,
.lobby-tournament-card-cta:focus-visible,
.lobby-tournament-card-cta:active {
	color: #191000;
}

.lobby-tournament-card-cta:hover,
.lobby-tournament-card-cta:focus-visible {
	filter: brightness(0.85);
}

.lobby-tournament-card-cta:active {
	filter: brightness(0.75);
}

/* Disabled tem precedência (já está escuro). */
.lobby-tournament-card-cta.disabled:hover,
.lobby-tournament-card-cta.disabled:focus-visible,
.lobby-tournament-card-cta.disabled:active {
	filter: brightness(0.7);
}

/* Participating disabled: mantém sem filter no hover/active também. */
.lobby-tournament-card-cta.participating.disabled:hover,
.lobby-tournament-card-cta.participating.disabled:focus-visible,
.lobby-tournament-card-cta.participating.disabled:active {
	filter: none;
}

/* Ícone do valor (16×16) renderizado ANTES do texto.
   Ex.: "[coin] 8.500 moedas" ou "[casino] Cassino". */
.lobby-tournament-card-info-value {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Specificity (0,2,0) precisa vencer `.lobby-tournament-card-info-row img`
   (0,1,1) que aplica 20×20 globalmente — por isso uso o seletor combinado. */
.lobby-tournament-card-info-row .lobby-tournament-card-info-value-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: inline-block;
	object-fit: contain;
}

/* Variante "mask" — usa CSS mask-image para que o SVG receba a cor
   passada via `background-color` (em vez de tentar recolorir o asset
   original com filter, que é frágil). Útil para normalizar ícones
   cujo asset vem com cor fixa (ex.: casino.svg / sports.svg amarelos). */
.lobby-tournament-card-info-value-icon--mask {
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
}

/* Banners das seções Missões e Loja: object-fit: contain pra mostrar
   a thumb completa (Smartico devolve imagens com padding/transparência —
   `cover` corta o desenho). */
.lobby-section[data-section="missions"] .lobby-tournament-card-banner img,
.lobby-section[data-section="store"] .lobby-tournament-card-banner img {
	object-fit: contain;
	background: #0f032f;
}

/* Banner vazio (placeholder colorido quando não há imagem) */
.lobby-tournament-card-banner-empty {
	background: linear-gradient(135deg, #2f0888 0%, #1f055b 100%);
}

/* Promotions Page (/pb/promotions/all) — wrapper customizado */
#custom-promotions-wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 16px 12px 32px;
}

/* Esconde o conteúdo Angular nativo da página de promoções quando o wrapper
   custom estiver ativo. Mantém apenas headers/menus globais.
   Anchor real em multi.bet.br é `<app-all-promotions>` — o resto é fallback. */
body.custom-promotions-active app-all-promotions,
body.custom-promotions-active app-promotion-banner-list,
body.custom-promotions-active app-promotions-list,
body.custom-promotions-active app-promotion-list,
body.custom-promotions-active app-promotions,
body.custom-promotions-active app-promotions-tab-component,
body.custom-promotions-active .promotions-list,
body.custom-promotions-active .promotion-list {
	display: none !important;
}

/* Game Lobby - Stats Cards (780:2602) */
.lobby-stats-cards {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-left: 0;
}

.lobby-stats-cards::-webkit-scrollbar {
	display: none;
}

a.lobby-stats-card {
	width: 109px;
	height: 164px;
	flex-shrink: 0;
	background: #1f055b;
	border: 1px solid #272727;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	display: block;
	cursor: pointer;
}
/* Remove tap/focus outline globally for all clickable lobby items */
a.lobby-stats-card,
a.lobby-simple-card,
a.lobby-game-item,
a.lobby-league-card,
a.lobby-promo-card,
a.lobby-ao-vivo-agora-card,
.lobby-tournament-card,
.lobby-tournament-card-cta {
	-webkit-tap-highlight-color: transparent;
}
a.lobby-stats-card:focus,
a.lobby-stats-card:focus-visible,
a.lobby-stats-card:active,
a.lobby-simple-card:focus,
a.lobby-simple-card:focus-visible,
a.lobby-simple-card:active,
a.lobby-game-item:focus,
a.lobby-game-item:focus-visible,
a.lobby-game-item:active,
a.lobby-league-card:focus,
a.lobby-league-card:focus-visible,
a.lobby-league-card:active,
a.lobby-promo-card:focus,
a.lobby-promo-card:focus-visible,
a.lobby-promo-card:active,
a.lobby-ao-vivo-agora-card:focus,
a.lobby-ao-vivo-agora-card:focus-visible,
a.lobby-ao-vivo-agora-card:active,
.lobby-tournament-card:focus,
.lobby-tournament-card:focus-visible,
.lobby-tournament-card:active,
.lobby-tournament-card-cta:focus,
.lobby-tournament-card-cta:focus-visible,
.lobby-tournament-card-cta:active {
	outline: none;
}

.lobby-stats-card-thumb {
	width: 109px;
	height: 123px;
	overflow: hidden;
	position: relative;
}

.lobby-stats-card-thumb img {
	width: 100%;
	height: 115%;
	object-fit: cover;
	position: relative;
	top: -14%;
}

.lobby-stats-card-info {
	position: absolute;
	left: 22px;
	top: 126px;
	width: 64px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
}

.lobby-stats-card-label {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 10px;
	line-height: 16px;
	color: #afb2ff;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
	width: 100%;
}

.lobby-stats-card-amount {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 10px;
	line-height: 16px;
	color: #e7de0b;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
	white-space: nowrap;
	width: 100%;
}

.lobby-stats-card-badge {
	position: absolute;
	left: 8px;
	top: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0 4px;
	border-radius: 30px;
	background: rgba(14, 2, 43, 0.8);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 2;
}

.lobby-stats-card-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22c55e;
}

.lobby-stats-card-badge-count {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 8px;
	line-height: 16px;
	color: #fafafa;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

/* ─── Influencers Multi cards ─── */
.lobby-influencer-cards {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.lobby-influencer-cards::-webkit-scrollbar {
	display: none;
}

a.lobby-influencer-card {
	width: 153px;
	height: 204px;
	flex-shrink: 0;
	box-sizing: border-box;
	border-radius: 16px;
	border: 1px solid rgba(128, 127, 255, 0.2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: #15043f;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		border-color 0.2s ease;
}
a.lobby-influencer-card:hover {
	border-color: rgba(128, 127, 255, 0.45);
}

/* Avatar background (top do card) — bg color + pattern hexagonal do branding:
   - Logo em 2× o tamanho natural (44×42) — cell SVG é 28.82×55.02 mas
     renderiza no dobro via background-size 57.64×110.04. Spacing 31%
     preservado proporcionalmente.
   - Cell tem column_pitch × 2*row_pitch (logo natural + spacing 31%):
       column_pitch base = 22 + 6.82 = 28.82  → 2× = 57.64
       row_pitch base    = 21 + 6.51 = 27.51  → 2× = 55.02 (= half cell)
   - 2 layers do mesmo cell-SVG; layer 2 com offset (col_pitch/2, row_pitch)
     = (28.82, 55.02) cria o staggering das linhas alternadas (efeito hex).
   - Pattern aplicado em ::before pra que o `opacity: 0.45` afete só o
     pattern (não o avatar, que é filho real e renderiza acima do ::before).
   - "Alignment top center" via `background-position: center top` da layer 1
     + offset proporcional na layer 2. */
.lobby-influencer-card-top {
	height: 148px;
	position: relative;
	background: #190746;
	overflow: hidden;
}
.lobby-influencer-card-top::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		url("../../assets/tags/platform-style/influencers/branding-bg-tile.svg"),
		url("../../assets/tags/platform-style/influencers/branding-bg-tile.svg");
	background-size:
		57.64px 110.04px,
		57.64px 110.04px;
	background-position:
		center top,
		calc(50% + 28.82px) 55.02px;
	background-repeat: repeat;
	opacity: 0.45;
	pointer-events: none;
}

/* Anel amarelo (outline 2px) com 3px de padding interno até o avatar.
   Centralizado horizontalmente; offset top de 24px conforme Figma. */
.lobby-influencer-avatar {
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	width: 96px;
	height: 96px;
	box-sizing: border-box;
	padding: 3px;
	border-radius: 50%;
	border: 2px solid #e7de0b;
	background: #15043f;
}
.lobby-influencer-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Painel inferior com gradiente 51deg (3 stops) e blur sutil — replica
   `bg-linear-51` + `backdrop-blur-[5px]` do Figma. Altura 54 = 204 (card)
   - 148 (top) - 2 (borders top+bottom) = 54. */
.lobby-influencer-card-bottom {
	height: 54px;
	padding: 8px;
	box-sizing: border-box;
	background: linear-gradient(51deg, #15043f 0%, #2b1077 50%, #15043f 100%);
	border-top: 1px solid rgba(128, 127, 255, 0.2);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow: hidden;
}

.lobby-influencer-name {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}
.lobby-influencer-name-text {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: #fafafa;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.lobby-influencer-verified {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lobby-influencer-verified svg {
	width: 14px;
	height: 14px;
	display: block;
}

.lobby-influencer-meta {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: #9898ff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Separador "·" em bold pra dar peso visual igual ao Figma. */
.lobby-influencer-meta-sep {
	font-weight: 700;
}

/* ─── Cassino ao vivo — seção destaque (dois blocos) ─── */
.ps-lcv {
	border-radius: 16px;
	border: 1px solid rgba(128, 127, 255, 0.2);
	overflow: hidden;
	background: #110336;
}

/* Block 1 — hero */
.ps-lcv-hero {
	position: relative;
	width: 100%;
	height: 162px;
	background-size: cover;
	background-position: center top;
	display: flex;
	align-items: flex-end;
}
.ps-lcv-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #2b1077 0%, rgba(51, 15, 154, 0) 100%);
	pointer-events: none;
}
.ps-lcv-hero-content {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 16px 20px;
	gap: 10px;
}
.ps-lcv-logo {
	width: 21px;
	height: 21px;
	object-fit: contain;
	/* Tint para #F7F716: brightness(0) → preto → colorize para amarelo vivo */
	filter: brightness(0) saturate(100%) invert(95%) sepia(94%) saturate(600%)
		hue-rotate(14deg) brightness(108%);
}
.ps-lcv-title {
	color: #fff;
	font-variant-numeric: lining-nums proportional-nums;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px;
}
.ps-lcv-cta {
	display: flex;
	height: 32px;
	padding: 16px 8px 16px 12px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	border-radius: 8px;
	border: 1px solid #e7de0b;
	background: linear-gradient(180deg, #c7b007 0%, #e7de0b 100%);

	/* Text */
	color: #191000;
	font-variant-numeric: lining-nums proportional-nums;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px;
}
.ps-lcv-cta:hover {
	opacity: 0.9;
}

/* Block 2 — games carousel */
@keyframes ps-marquee-right {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(var(--ps-mq-offset));
	}
}
@keyframes ps-marquee-left {
	from {
		transform: translateX(var(--ps-mq-offset));
	}
	to {
		transform: translateX(0);
	}
}
.ps-lcv-carousel {
	overflow: hidden;
	padding: 16px 0;
}
.ps-lcv-track {
	display: flex;
	gap: 16px;
	will-change: transform;
}
a.ps-lcv-game-card {
	width: 78px;
	height: 101px;
	flex-shrink: 0;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	display: block;
	text-decoration: none;
	cursor: pointer;
}
.ps-lcv-game-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Desktop: hero à esquerda (366×162px fixo) + carousel ocupa o restante */
@media (min-width: 769px) {
	.ps-lcv {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.ps-lcv-hero {
		width: 366px;
		height: 162px;
		flex-shrink: 0;
	}
	.ps-lcv-carousel {
		flex: 1;
		min-width: 0;
		padding: 0;
		align-self: stretch;
		display: flex;
		align-items: center;
		position: relative;
	}
	.ps-lcv-carousel::before,
	.ps-lcv-carousel::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 60px;
		z-index: 2;
		pointer-events: none;
	}
	.ps-lcv-carousel::before {
		left: 0;
		background: linear-gradient(to right, #110336 0%, transparent 100%);
	}
	.ps-lcv-carousel::after {
		right: 0;
		background: linear-gradient(to left, #110336 0%, transparent 100%);
	}
	a.ps-lcv-game-card {
		width: 100px;
		height: 130px;
	}
}

/* ─── Eventos & Temporada — hero + 2 linhas de carrossel ─── */
.ps-evt {
	border-radius: 16px;
	border: 1px solid rgba(128, 127, 255, 0.2);
	overflow: hidden;
	background: #110336;
}

/* Hero */
.ps-evt-hero {
	position: relative;
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: center top;
	display: flex;
	align-items: flex-end;
}
.ps-evt-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #2b1077 0%, rgba(51, 15, 154, 0) 100%);
	pointer-events: none;
}
.ps-evt-hero-content {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 16px 20px;
	gap: 10px;
}
.ps-evt-logo {
	width: 21px;
	height: 21px;
	object-fit: contain;
	/* Tint para #F7F716: brightness(0) → preto → colorize para amarelo vivo */
	filter: brightness(0) saturate(100%) invert(95%) sepia(94%) saturate(600%)
		hue-rotate(14deg) brightness(108%);
}
.ps-evt-title {
	color: #fff;
	font-variant-numeric: lining-nums proportional-nums;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px;
}
.ps-evt-cta {
	display: flex;
	height: 32px;
	padding: 16px 8px 16px 12px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	border-radius: 8px;
	border: 1px solid #e7de0b;
	background: linear-gradient(180deg, #c7b007 0%, #e7de0b 100%);

	/* Text */
	color: #191000;
	font-variant-numeric: lining-nums proportional-nums;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px;
}
.ps-evt-cta:hover {
	opacity: 0.9;
}

/* 2 linhas de carrossel */
.ps-evt-rows {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.ps-evt-carousel {
	overflow: hidden;
	padding: 12px 0;
}
.ps-evt-carousel:first-child {
	padding-bottom: 4px;
}
.ps-evt-carousel:last-child {
	padding-top: 4px;
}
.ps-evt-track {
	display: flex;
	gap: 16px;
	will-change: transform;
}

/* Cards */
a.ps-evt-game-card {
	width: 78px;
	height: 101px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	display: block;
	text-decoration: none;
	cursor: pointer;
}
.ps-evt-game-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Desktop: mesmo layout do ps-lcv — hero à esquerda + linha 1 ocupa o restante, linha 2 oculta */
@media (min-width: 769px) {
	.ps-evt-carousel:first-child {
		padding-bottom: 0px;
	}
	.ps-evt {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.ps-evt-hero {
		width: 366px;
		height: 162px;
		flex-shrink: 0;
	}
	.ps-evt-rows {
		flex: 1;
		min-width: 0;
		flex-direction: row;
		align-items: center;
	}
	.ps-evt-carousel {
		flex: 1;
		min-width: 0;
		padding: 0;
		align-self: stretch;
		display: flex;
		align-items: center;
		position: relative;
	}
	.ps-evt-carousel::before,
	.ps-evt-carousel::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 60px;
		z-index: 2;
		pointer-events: none;
	}
	.ps-evt-carousel::before {
		left: 0;
		background: linear-gradient(to right, #110336 0%, transparent 100%);
	}
	.ps-evt-carousel::after {
		right: 0;
		background: linear-gradient(to left, #110336 0%, transparent 100%);
	}
	.ps-evt-carousel:last-child {
		display: none;
	}
	a.ps-evt-game-card {
		width: 100px;
		height: 130px;
	}
}

/* ─── Recomendações da plataforma — spinner vertical ─── */
.ps-rec {
	display: flex;
	flex-direction: row;
	align-items: start;
	border-radius: 16px;
	border: 1px solid #380faf;
	background: linear-gradient(to right, #c7b007, #e7de0b);
	padding: 12px;
}

/* Bloco esquerdo: título + descrição + CTA */
.ps-rec-left {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	height: stretch;
	gap: 4px;
	flex: 1;
}

.ps-rec-title {
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #15043f;
	max-width: 175px;
}

.ps-rec-desc {
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: rgba(11, 11, 11, 0.7);
	max-width: 175px;
}

.ps-rec-cta {
	display: flex;
	margin-top: auto;
	display: flex;
	height: 56px;
	padding: 16px 16px 16px 12px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 12px;
	border: 1px solid #2b1077;
	background: #1b0849;
	color: #e7e9ff;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
}

.ps-rec-cta:hover {
	opacity: 0.88;
}
.ps-rec-cta:disabled {
	opacity: 0.5;
	cursor: default;
}
.ps-rec-cta-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Bloco direito: viewport spinner + seta */
.ps-rec-right {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	position: relative;
}
.ps-rec-viewport {
	width: 97px; /* matches frame-2 outer border width */
	height: 199px; /* frame top:41 + card:117 + bottom:41 */
	overflow-y: hidden;
	border-radius: 12px;
	margin-right: 24px;
}
/* Máscara de fade nas bordas para suavizar itens cortados */
.ps-rec-viewport::before,
.ps-rec-viewport::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 40px;
	z-index: 2;
	pointer-events: none;
}
.ps-rec-viewport::before {
	top: 0;
	background: linear-gradient(to bottom, #e7de0b 0%, transparent 60%);
}
.ps-rec-viewport::after {
	bottom: 0;
	background: linear-gradient(to top, #e3d80c 0%, transparent 60%);
}

/* Frame de seleção — borda sobre o item central */
.ps-rec-frame-1 {
	position: absolute;
	left: -9px;
	right: 0;
	top: 41px;
	height: 134px;
	width: 105px;
	border-radius: 12px;
	border: 2px solid #15043f;
	z-index: 3;
	pointer-events: none;
	margin-top: -9px;
}

.ps-rec-frame-2 {
	position: absolute;
	left: -9px;
	right: 0;
	top: 41px;
	height: 135px;
	width: 106px;
	border-radius: 12px;
	border: 2px solid #ff7c2a;
	z-index: 3;
	pointer-events: none;
	margin-top: -9px;
}

/* Track — lista vertical de itens */
.ps-rec-track {
	display: flex;
	flex-direction: column;
	gap: 11px;
	will-change: transform;
	pointer-events: none;
	touch-action: none;
	user-select: none;
	/* Centra os cards (88px) dentro do viewport (97px) */
	margin: 0 auto;
}
.ps-rec-item {
	width: 88px;
	height: 117px;
	flex-shrink: 0;
	border-radius: 10px;
	overflow: hidden;
}
.ps-rec-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* Seta para o item selecionado */
.ps-rec-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: absolute;
	right: -20%;
	z-index: 4;
}

/* Desktop: layout horizontal — left fixo 420px, spinner horizontal */
@media (min-width: 769px) {
	.ps-rec {
		align-items: stretch;
		padding: 0;
		min-height: 205px;
	}
	.ps-rec-left {
		width: 420px;
		flex: none;
		justify-content: center;
		padding: 12px;
	}
	.ps-rec-title {
		max-width: none;
		font-size: 24px;
	}
	.ps-rec-desc {
		max-width: none;
		font-size: 13px;
	}
	.ps-rec-cta {
		align-self: flex-start;
		width: 100%;
	}
	.ps-rec-right {
		flex: 1;
		display: flex;
		justify-content: center;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		gap: 0;
		position: relative;
		height: stretch;
	}
	/* Seta no topo centralizada, apontando para baixo */
	.ps-rec-arrow {
		position: absolute;
		top: -20px;
		left: 50%;
		right: auto;
		transform: translateX(-50%) rotate(-90deg);
		z-index: 10;
	}
	/* Viewport horizontal */
	.ps-rec-viewport {
		display: flex;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: visible;
		border-radius: 0;
		margin-right: 0;
		position: relative;
		align-items: center;
	}
	/* Fades horizontais nas bordas */
	.ps-rec-viewport::before,
	.ps-rec-viewport::after {
		display: block;
		top: 0;
		bottom: 0;
		height: auto;
		width: 120px;
	}
	.ps-rec-viewport::before {
		left: 0;
		right: auto;
		background: linear-gradient(to right, #d4c306 0%, transparent 100%);
	}
	.ps-rec-viewport::after {
		right: 0;
		left: auto;
		bottom: 0;
		background: linear-gradient(to left, #e7de0b 0%, transparent 100%);
	}
	/* Track vira linha */
	.ps-rec-track {
		flex-direction: row;
		gap: 11px;
		margin: 0;
	}
	/* Cards desktop: 114×161px */
	.ps-rec-item {
		width: 114px;
		height: 161px;
	}
	/* Frame-1 (dark): card + 4.5px cada lado → 123×170px, centrado */
	.ps-rec-frame-1 {
		left: 50%;
		right: auto;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 123px;
		height: 170px;
		margin-top: 0;
		border-radius: 12px;
	}
	/* Frame-2 (orange): 1px maior → 124×171px */
	.ps-rec-frame-2 {
		left: 50%;
		right: auto;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 124px;
		height: 171px;
		margin-top: 0;
		border-radius: 12px;
	}
}

/* ─── Altenar event cards (Brasileirão / sportbook) ─── */
/* ─── Altenar events list wrapper ─── */
.lobby-altenar-events {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.lobby-altenar-events::-webkit-scrollbar {
	display: none;
}

/* ─── Altenar event card ─── */
a.alt-card {
	width: 260px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-radius: 12px;
	border: 1px solid rgba(128, 127, 255, 0.2);
	background: #150434;
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	transition:
		transform 0.18s ease,
		border-color 0.18s ease;
}
a.alt-card:hover {
	border-color: rgba(128, 127, 255, 0.5);
}

/* Header */
.alt-card-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px 8px;
	border-bottom: 1px solid rgba(128, 127, 255, 0.12);
}
.alt-card-cal-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: 0.65;
}
.alt-card-date {
	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: #9898ff;
	white-space: nowrap;
}

/* Teams row */
.alt-card-teams {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 14px 12px 10px;
}
.alt-card-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1;
	min-width: 0;
}
.alt-card-team-name {
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #e7e9ff;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}

.alt-card-logo {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
}
.alt-card-logo-img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}
.alt-card-draw {
	flex-shrink: 0;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	font-weight: 800;
	color: #e7e9ff;
}

/* Odds row */
.alt-card-odds {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 0 12px 12px;
}
.alt-card-odd {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #4303dd;
	border-radius: 8px;
	transition:
		background 0.15s ease,
		border-color 0.15s ease;
	height: 40px;
}

.alt-card-odd:hover {
	filter: brightness(1.1);
}

.alt-card-odd-price {
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #e7e9ff;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

/* ─── Altenar events skeleton ─── */
@keyframes altenar-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}
.lobby-altenar-skeleton {
	display: flex;
	gap: 12px;
	overflow: hidden;
	padding: 0 12px;
}
.lobby-altenar-skeleton-card {
	width: 280px;
	flex-shrink: 0;
	box-sizing: border-box;
	border-radius: 12px;
	border: 1px solid rgba(128, 127, 255, 0.15);
	background: #15043f;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lobby-altenar-skeleton-line {
	border-radius: 4px;
	background: linear-gradient(90deg, #2b1077 25%, #3d1b99 50%, #2b1077 75%);
	background-size: 200% 100%;
	animation: altenar-shimmer 1.6s ease-in-out infinite;
}
.lobby-altenar-skeleton-header {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
.lobby-altenar-skeleton-header .lobby-altenar-skeleton-line:first-child {
	height: 10px;
	flex: 1;
}
.lobby-altenar-skeleton-header .lobby-altenar-skeleton-line:last-child {
	height: 10px;
	width: 48px;
	flex-shrink: 0;
}
.lobby-altenar-skeleton-team {
	height: 13px;
}
.lobby-altenar-skeleton-team + .lobby-altenar-skeleton-team {
	margin-top: 4px;
}
.lobby-altenar-skeleton-odds {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: 4px;
}
.lobby-altenar-skeleton-odd {
	height: 42px;
	border-radius: 6px;
}

/* Search Input */
input#casinoSearchInput {
	background: #1f055b !important;
	border: 1px solid #2f0888 !important;
}

input#casinoSearchInput::placeholder {
	color: #9898ff !important;
}

/* ─── Custom Search Fullscreen ─── */
.ps-search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background: #15043f;
	display: flex;
	flex-direction: column;
}

/* Header */
.ps-search-header {
	display: flex;
	height: 47px;
	padding: 8px 16px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-bottom: 1px solid #afb2ff;
	background: linear-gradient(
		102deg,
		#2b1077 2.35%,
		#1b0849 47.19%,
		#15043f 92.02%
	);
	flex-shrink: 0;
	gap: 8px;
}

.ps-search-header-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 1;
}

.ps-search-input {
	flex: 1;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	color: #fafafa !important;
	padding: 0px 8px !important;
	font-size: 14px;
	font-family: "Montserrat", sans-serif;
	caret-color: #afb2ff;
}

.ps-search-input::placeholder {
	color: #9898ff;
}

.ps-search-close {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	cursor: pointer;
	opacity: 1;
}

.ps-search-close:active {
	opacity: 1;
}

/* Body */
.ps-search-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 0 24px 0;
}

/* Sections */
.ps-search-section {
	padding: 0 12px;
	margin-bottom: 24px;
}

.ps-search-section-title {
	font-size: 16px;
	font-weight: 700;
	color: #e7e9ff;
	margin: 0 0 12px 0;
	font-family: "Montserrat", sans-serif;
}

/* Recent searches */
.ps-search-recent-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	cursor: pointer;
}

.ps-search-recent-item:last-child {
	border-bottom: none;
}

.ps-search-recent-icon {
	width: 16px;
	height: 16px;
	opacity: 1;
	flex-shrink: 0;
}

.ps-search-recent-item span {
	font-size: 14px;
	font-weight: 500;
	color: rgba(210, 214, 255, 0.5);
	font-family: "Montserrat", sans-serif;
	flex: 1;
}

.ps-search-recent-remove {
	width: 16px;
	height: 16px;
	opacity: 0.4;
	cursor: pointer;
	flex-shrink: 0;
}

.ps-search-recent-remove:active {
	opacity: 0.8;
}

/* Trending tags */
.ps-search-trending-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ps-search-trending-tag {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 8px;
	background: #1f055b;
	border: none;
	cursor: pointer;
	color: #9898ff;
	font-size: 12px;
	font-weight: 500;
	font-family: "Montserrat", sans-serif;
}

.ps-search-trending-tag:active {
	background: #2b1077;
}

.ps-search-trending-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Game item rows (results + mais jogados) */
.ps-search-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	cursor: pointer;
}

.ps-search-item:active {
	background: #15043f;
}

.ps-search-item-img {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	background: #15043f;
}

.ps-search-item-info {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
}

.ps-search-item-name {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: "Montserrat", sans-serif;
}

.ps-search-item-provider {
	font-size: 12px;
	font-weight: 500;
	color: #878d8b;
	white-space: nowrap;
	flex-shrink: 0;
	font-family: "Montserrat", sans-serif;
}

/* No results */
.ps-search-no-results {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 0px 12px 24px 12px;
}

.ps-search-no-results-icon {
	width: 16px;
	height: 16px;
	opacity: 1;
}

.ps-search-no-results span {
	color: rgba(210, 214, 255, 0.5);
	font-size: 14px;
	font-weight: 500;
	font-family: "Montserrat", sans-serif;
}

/* Ver Mais */
button.view-more-cta {
	color: #afb2ff !important;
	font-size: 12px !important;
	font-weight: 500 !important;

	background: #1f055b !important;
	border-radius: 7px !important;
	padding: 6px 8px !important;
}

/* Modal Login e Registro */
modal div.full-page-model__header.container {
	background: #1f055b !important;
	border-bottom: 1px solid #432e7e !important;

	button.btn-square.font-20 {
		background: #2b1077 !important;
		border: 1px solid rgba(128, 127, 255, 0.5) !important;
		border-radius: 8px !important;
		color: #afb2ff !important;
		width: 32px !important;
		height: 32px !important;
	}

	button.btn-square.font-20[data-testid="close"] {
		margin-left: 8px !important;
	}
}

modal div.full-page-model__container {
	background: #0f032f !important;

	div.full-page-model__hero-img.hero-img {
		padding: 12px !important;
		margin: 0 !important;
	}

	button.social_btn {
		background: #110840 !important;
		border: 1px solid #3b2898 !important;
		height: 48px !important;
		color: #fff !important;
		font-size: 15px !important;
		font-weight: 600 !important;
	}

	div.full-page-model__body {
		padding: 12px 12px !important;
	}

	form label {
		color: #e2e8f0 !important;
		font-size: 13px !important;
		font-weight: 600 !important;
	}

	form input {
		background: #15043f !important;
		border: 1px solid #2b1077 !important;
		height: 48px !important;
	}

	form input::placeholder {
		color: #afb2ff !important;
	}

	form span.pwd-show {
	}

	form i {
		color: #887aff !important;
	}

	button#loginButton,
	button#continueReg {
		background: #e7de0b !important;
		height: 52px !important;
		color: #0d0e1f !important;
	}

	button#loginButton:disabled,
	button#continueReg:disabled {
		opacity: 0.5 !important;
	}
}

/* Modal Banners */
.ps-modal-banner {
	display: block;
	width: 100%;
	border-radius: 12px;
	object-fit: cover;
}

/* Hide native hero images until replaced — APENAS em mobile.
   Em desktop o banner original do Angular fica visível, pois o JS
   `injectModalBanner` retorna early sem injetar a versão custom. */
@media (max-width: 768px) {
	.full-page-model__hero-img img:not(.ps-modal-banner),
	.full-page-model__hero_img img:not(.ps-modal-banner) {
		display: none !important;
	}
}

/* Padding for hero-img containers with our banners */
.full-page-model__hero-img:has(.ps-modal-banner),
.full-page-model__hero_img:has(.ps-modal-banner) {
	padding: 12px !important;
	box-sizing: border-box !important;
}

/* Modal Login */
modal#loginModal div.full-page-model__container {
	div.social_divider::after,
	div.social_divider::before {
		border-bottom: 1px solid #261b70 !important;
	}

	div.social_divider {
		span {
			color: #6b6fa8 !important;
			font-size: 12px !important;
			font-weight: 500 !important;
		}
	}

	form.login-popup__form span.pwd-show {
	}

	div.login-popup__form-frgtBtn button {
		color: #e7de0b !important;
		font-size: 12px !important;
		font-weight: 600 !important;
	}

	div.login-popup__form-register {
		justify-self: center !important;

		span {
			color: #94a3b8 !important;
		}

		button {
			color: #f5c518 !important;
		}
	}
}

/* Modal Registro */
modal#registrationModal div.full-page-model__container {
	div.custom-dropdown-selected {
		background: #15043f !important;
		border: 1px solid #2b1077 !important;
		height: 48px !important;
	}

	input#termsAndCondition {
		width: 18px !important;
		height: 18px !important;
		background: transparent !important;
		border: 1px solid rgba(175, 178, 255, 0.4) !important;
		border-radius: 4px !important;
		flex-shrink: 0 !important;
	}

	input#termsAndCondition:before {
		border-right: 2px solid #887aff !important;
		border-bottom: 2px solid #887aff !important;
	}

	span.register-popup__content {
		color: #94a3b8 !important;
		font-size: 12.5px !important;
		font-family: "Montserrat", sans-serif !important;
		font-weight: 500 !important;
		line-height: 20px !important;

		a {
			color: #e2e8f0 !important;
			font-weight: 700 !important;
			text-decoration: none !important;
		}

		a[href*="politica"] {
			color: #f5c518 !important;
			font-weight: 700 !important;
			text-decoration: underline !important;
		}
	}

	div.child-container.signup-container {
		padding: 0 0 0 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
	}

	form.register-popup__form {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
	}

	form.register-popup__form > .form-group,
	form.register-popup__form > .register-popup__areacode {
		margin-bottom: 12px !important;
		margin-top: 0 !important;
	}

	form.register-popup__form > .form-group.has-error,
	form.register-popup__form > .register-popup__areacode:has(.has-error) {
		margin-bottom: 28px !important;
	}

	form.register-popup__form .register-popup__areacode {
		margin-bottom: 0 !important;
		margin-top: 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	form.register-popup__form .register-popup__areacode > .register-form-label {
		width: 100% !important;
		margin-bottom: 0 !important;
	}

	form.register-popup__form .register-popup__terms {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		display: flex !important;
		gap: 10px !important;
		align-items: flex-start !important;
	}

	form.register-popup__form .register-popup__submit-btn {
		margin-top: 12px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		align-items: stretch !important;
	}

	form.register-popup__form input {
		border-radius: 8px !important;
	}

	form.register-popup__form input::placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		font-family: "Montserrat", sans-serif !important;
		font-weight: 400 !important;
		font-size: 14px !important;
	}

	h2.register-modal-title {
		font-family: "Montserrat", sans-serif !important;
		font-weight: 700 !important;
		font-size: 20px !important;
		line-height: 30px !important;
		color: #ffffff !important;
		margin: 0 !important;
	}

	.register-form-label {
		display: block !important;
		font-family: "Montserrat", sans-serif !important;
		font-weight: 600 !important;
		font-size: 13px !important;
		line-height: 19.5px !important;
		color: #e2e8f0 !important;
		margin-bottom: 8px !important;
	}

	.register-popup__form-login {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 4px !important;
		font-family: "Montserrat", sans-serif !important;
		font-size: 13px !important;
		line-height: 19.5px !important;
		margin-top: 0 !important;
		padding: 0 !important;
	}

	.register-popup__form-login span {
		color: #94a3b8 !important;
		font-weight: 400 !important;
		font-size: 13px !important;
	}

	.register-popup__form-login button {
		color: #f5c518 !important;
		font-weight: 700 !important;
		background: none !important;
		border: none !important;
		cursor: pointer !important;
		padding: 0 !important;
		font-family: "Montserrat", sans-serif !important;
		font-size: 13px !important;
	}
}

/* Modal Depósito */
section.cashier-page .full-page-model__body {
	padding: 24px 12px 12px !important;
}

section.cashier-page app-deposit-step1 h2,
section.cashier-page app-deposit-step1 p.text-xs {
	display: none !important;
}

.deposit-pix-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 1px 11px;
	background: rgba(34, 197, 94, 0.08);
	border: 1px solid rgba(34, 197, 94, 0.22);
	border-radius: 20px;
	height: 26.5px;
	margin-bottom: 12px;
}

.deposit-pix-badge img {
	width: 12px;
	height: 12px;
}

.deposit-pix-badge span {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 16.5px;
	color: #4ade80;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

section.cashier-page app-deposit-step1 .form_field--label {
	font-family: "Montserrat", sans-serif !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	line-height: 18px !important;
	color: #94a3b8 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
}

section.cashier-page app-deposit-step1 .form-group .controls {
	background: #15043f !important;
	border: 1px solid #2b1077 !important;
	border-radius: 10px !important;
	height: 56px !important;
	position: relative !important;
	padding: 0 15px !important;
}

section.cashier-page
	app-deposit-step1
	.form-group
	.controls
	> label.form_field--label {
	position: absolute !important;
	top: -22px !important;
	left: 0 !important;
}

section.cashier-page app-deposit-step1 .form-group {
	position: relative !important;
	padding-top: 22px !important;
}

section.cashier-page app-deposit-step1 .form-group .form-field--error-msg,
section.cashier-page app-deposit-step1 .form-group .form_fields--error {
	position: absolute !important;
	top: calc(100% + 4px) !important;
	left: 0 !important;
	z-index: 5 !important;
	padding-top: 0px !important;
	color: #fa240c !important;
}

section.cashier-page app-deposit-step1 .form-group.has-error {
	margin-bottom: 36px !important;
}

section.cashier-page app-deposit-step1 input.form-control {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 800 !important;
	font-size: 24px !important;
	color: transparent !important;
	padding: 0 15px !important;
	box-sizing: border-box !important;
	z-index: 2 !important;
	caret-color: #ffffff !important;
}

section.cashier-page app-deposit-step1 input.form-control::placeholder {
	font-family: "Montserrat", sans-serif !important;
	font-weight: 800 !important;
	font-size: 24px !important;
	color: rgba(255, 255, 255, 0.25) !important;
}

/* Display overlay that renders the value with styled R$ prefix */
.deposit-value-display {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: baseline;
	gap: 6px;
	pointer-events: none;
	z-index: 1;
}

.deposit-value-display .deposit-display-prefix {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #94a3b8;
	line-height: 27px;
}

.deposit-value-display .deposit-display-amount {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 24px;
	color: #ffffff;
	line-height: normal;
}

/* When input is empty, show placeholder-style prefix */
.deposit-value-display.is-empty .deposit-display-prefix {
	color: #94a3b8;
}

.deposit-value-display.is-empty .deposit-display-amount {
	color: rgba(255, 255, 255, 0.25);
}

section.cashier-page app-deposit-step1 h4 {
	display: none !important;
}

section.cashier-page app-deposit-step1 .qda-group {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 8px !important;
	margin-top: 12px !important;
}

section.cashier-page app-deposit-step1 .qda--btn {
	width: 100% !important;
	height: 52px !important;
	border-radius: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
}

section.cashier-page app-deposit-step1 .qda--btn input[type="radio"] {
	display: none !important;
}

section.cashier-page app-deposit-step1 .qda--btn.site-btn__secondary {
	background: #1f055b !important;
	border: 1px solid #2f0888 !important;
}

section.cashier-page app-deposit-step1 .qda--btn.site-btn__secondary label {
	color: #e2e8f0 !important;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 19.5px !important;
	text-align: center !important;
}

section.cashier-page app-deposit-step1 .qda--btn.site-btn__primary {
	background: #e3d01e !important;
	border: 1px solid #2f0888 !important;
}

section.cashier-page app-deposit-step1 .qda--btn.site-btn__primary label {
	color: #0f032f !important;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 19.5px !important;
	text-align: center !important;
}

section.cashier-page app-deposit-step1 .qda--btn .hot-label {
	display: none !important;
}

.deposit-hot-badge {
	position: absolute;
	top: -7px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 1px 7px;
	height: 16px;
	border-radius: 20px;
	border: 1px solid #22c55e;
	background: linear-gradient(to right, #12382b, #2d8868);
	white-space: nowrap;
	z-index: 3;
}

.deposit-hot-badge .deposit-hot-emoji {
	font-size: 8px;
	line-height: 12px;
}

.deposit-hot-badge .deposit-hot-text {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 8px;
	line-height: 12px;
	color: #86efac;
	letter-spacing: 0.48px;
	text-transform: uppercase;
}

section.cashier-page app-deposit-step1 button.site-btn.site-btn__primary.w-100 {
	background: #e7de0b !important;
	border-radius: 8px !important;
	height: 48px !important;
	font-family: "Inter", sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 22.5px !important;
	color: #0d0e1f !important;
	letter-spacing: 0.3px !important;
	border: none !important;
	margin-top: 20px !important;
}

.deposit-security-text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-top: 10px;
}

.deposit-security-text img {
	width: 11px;
	height: 11px;
}

.deposit-security-text span {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 11px;
	line-height: 16.5px;
	color: #94a3b8;
}

/* ─── Promotions Section ─── */
.lobby-promo-cards {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0;
}

.lobby-promo-cards::-webkit-scrollbar {
	display: none;
}

a.lobby-promo-card {
	width: 224px;
	height: 163px;
	flex-shrink: 0;
	background: #2f0888;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	cursor: pointer;
}

.lobby-promo-card-img {
	width: 224px;
	height: 128px;
	background: #0f032f;
	overflow: hidden;
	flex-shrink: 0;
}

.lobby-promo-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lobby-promo-card-title {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 0 12px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: normal;
	color: #ffffff;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

/* ─── Ao vivo agora ─── */
.lobby-ao-vivo-agora-cards {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0;
}

.lobby-ao-vivo-agora-cards::-webkit-scrollbar {
	display: none;
}

a.lobby-ao-vivo-agora-card {
	display: flex;
	flex-direction: column;
	width: 94px;
	height: 126px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	border: 0.5px solid rgba(163, 163, 163, 0.5);
	text-decoration: none;
	cursor: pointer;
}

.lobby-ao-vivo-agora-card-img {
	position: relative;
	width: 94px;
	height: 88px;
	flex-shrink: 0;
	background: linear-gradient(180deg, #1a0950 0%, #0e022b 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.lobby-ao-vivo-agora-card-img .live-card-bg-decor {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.35;
	z-index: 0;
}

.lobby-ao-vivo-agora-card-img .live-card-icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
	position: relative;
	z-index: 1;
}

.lobby-ao-vivo-agora-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	background: rgba(14, 2, 43, 0.8);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 30px;
	padding: 0 4px;
	z-index: 2;
}

.lobby-ao-vivo-agora-badge-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ef4444;
	flex-shrink: 0;
}

.lobby-ao-vivo-agora-badge-count {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 8px;
	line-height: 16px;
	color: #fafafa;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

.lobby-ao-vivo-agora-card-footer {
	flex: 1;
	background: #2f0888;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: normal;
	color: #f5f5f5;
	text-align: center;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1;
}

/* ─── Provedores de jogos — Figma (1676:3350) ─── */
.lobby_group--parent:has(.g-providers) {
	margin-bottom: 24px !important;
}

.lobby_group--parent:has(.g-providers) .lobby_group--header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 24px 0 0 0 !important;
	margin-bottom: 16px !important;
}

.lobby_group--parent:has(.g-providers) .lobby_group--title {
	font-family: "Montserrat", sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 16px !important;
	color: #ffffff !important;
	margin: 0 !important;
	font-feature-settings:
		"lnum" 1,
		"pnum" 1 !important;
}

.lobby_group--parent:has(.g-providers) .swiper_header--nav {
	display: none !important;
}

.lobby_group--parent:has(.g-providers) .swiper-wrapper {
	gap: 10px !important;
}

/* Provider cards — visual only (don't touch swiper-wrapper or swiper-slide layout) */
.lobby_group--parent:has(.g-providers) .gp-card {
	background: #1b0849 !important;
	border: 1px solid rgba(128, 127, 255, 0.24) !important;
	border-radius: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 48px !important;
	overflow: hidden !important;
	/* Reset game-page .gp-card styles that leak here */
	margin: 0 !important;
	padding: 8px 16px !important;
	gap: 0 !important;
	position: static !important;
	z-index: auto !important;
	box-sizing: border-box !important;
}

.lobby_group--parent:has(.g-providers) .gp-card .game-provider {
	background: transparent !important;
	border-radius: 0 !important;
	display: flex !important;
	width: 100% !important;
	height: 100% !important;
}

.lobby_group--parent:has(.g-providers) .gp-card .game-provider img {
	width: 62px !important;
	max-height: 31px !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
	padding: 0 !important;
	filter: none !important;
}

/* ─── Custom Footer ─── */
app-footer .footer-page {
	display: none !important;
}

.custom-footer {
	background: #1b0849;
	border-top: 1px solid #141414;
	padding: 25px 0 80px;
	font-family: "Montserrat", sans-serif;
}

.custom-footer-inner {
	padding: 0 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.custom-footer-logo {
	display: inline-flex;
	align-items: center;
}

.custom-footer-logo svg {
	width: 92px;
	height: 21px;
}

.custom-footer-links {
	display: flex;
	flex-wrap: wrap;
	padding: 16px 0;
}

.custom-footer-col {
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-right: 16px;
	margin-bottom: 16px;
	box-sizing: border-box;
}

.custom-footer-col-title {
	font-weight: 700;
	font-size: 11px;
	line-height: 16.5px;
	color: #887aff;
	text-transform: uppercase;
	letter-spacing: 0.66px;
}

.custom-footer-col-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.custom-footer-col-items a {
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	color: #94a3b8;
	text-decoration: none;
	padding: 2px 0;
}

.custom-footer-divider {
	width: 100%;
	height: 1px;
	background: rgba(136, 122, 255, 0.12);
}

.custom-footer-notices {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 0;
}

.custom-footer-notice-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.custom-footer-notice-icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.custom-footer-notice-icon img {
	width: 100%;
	height: 100%;
}

.custom-footer-notice-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.custom-footer-notice-title {
	display: flex;
	align-items: center;
	gap: 5px;
}

.custom-footer-notice-title img {
	width: 11px;
	height: 11px;
}

.custom-footer-notice-title span {
	font-weight: 700;
	font-size: 11px;
	line-height: 16.5px;
	color: #e7de0b;
}

.custom-footer-notice-text {
	font-weight: 400;
	font-size: 11px;
	line-height: 16px;
	color: #94a3b8;
}

.custom-footer-notice-text strong {
	font-weight: 700;
	color: #e3d01e;
}

.custom-footer-alert-text {
	font-weight: 400;
	font-size: 11px;
	line-height: 16px;
	color: rgba(148, 163, 184, 0.7);
}

.custom-footer-alert-text strong {
	font-weight: 400;
	color: #ffffff;
}

.custom-footer-legal {
	font-weight: 400;
	font-size: 10.5px;
	line-height: 16px;
	color: rgba(148, 163, 184, 0.72);
	padding: 0 8px;
}

.custom-footer-legal strong {
	font-weight: 700;
}

/* ─── Custom Footer — desktop only ───
   Figma node 3325-34930: tudo centralizado horizontalmente, max-width
   ~960px no inner, 4 cols inline (não 2x2), logo no topo centralizado,
   notices em linha (icon + texto inline), legal centralizado. */
@media (min-width: 769px) {
	.custom-footer {
		padding: 32px 0 40px;
	}

	.custom-footer-inner {
		max-width: 960px;
		margin: 0 auto;
		padding: 0 24px;
		gap: 24px;
		text-align: center;
	}

	.custom-footer-logo {
		align-self: center;
	}

	.custom-footer-logo svg {
		width: 132px;
		height: 30px;
	}

	.custom-footer-links {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 64px;
		padding: 24px 0;
	}

	.custom-footer-col {
		width: auto;
		padding-right: 0;
		margin-bottom: 0;
		gap: 12px;
		text-align: left;
		min-width: 140px;
	}

	.custom-footer-col-title {
		color: #e7de0b;
		font-size: 12px;
		letter-spacing: 0.72px;
	}

	.custom-footer-col-items a {
		font-size: 13px;
		color: #c4c8e7;
	}

	.custom-footer-notices {
		gap: 8px;
		padding: 24px 0;
		align-items: center;
	}

	.custom-footer-notice-row {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		max-width: 640px;
	}

	.custom-footer-notice-icon {
		width: 32px;
		height: 32px;
	}

	.custom-footer-notice-content {
		align-items: center;
		text-align: center;
	}

	.custom-footer-notice-title {
		justify-content: center;
	}

	.custom-footer-notice-text,
	.custom-footer-alert-text {
		font-size: 13px;
		line-height: 20px;
		text-align: center;
	}

	.custom-footer-legal {
		text-align: center;
		max-width: 760px;
		margin: 0 auto;
		padding: 16px 0 0;
		font-size: 12px;
		line-height: 18px;
	}
}

/* ─── Profile Sidebar ─── */
.profile-sidebar-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.profile-sidebar-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

.profile-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	width: 85%;
	max-width: 340px;
	height: 100%;
	background: #1b0849;
	z-index: 9999;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
}

.profile-sidebar.open {
	transform: translateX(0);
}

/* Hide native profile overlay permanently on mobile (replaced by custom sidebar) */
@media (max-width: 768px) {
	.header-userblnc-userdetails,
	.user-balance-popup,
	.userblnc-overlay-container {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
		height: 0 !important;
		overflow: hidden !important;
	}
}

/* Header */
.profile-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: #1b0849;
	border-bottom: 1px solid #2b1077;
}

.profile-sidebar-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.profile-sidebar-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(199, 176, 7, 0.4);
	border: 1px solid #c7b007;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 11px;
	color: #f7f716;
	text-transform: uppercase;
	flex-shrink: 0;
}

.profile-sidebar-user-info {
	display: flex;
	flex-direction: column;
}

.profile-sidebar-user-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: #ffffff;
}

.profile-sidebar-user-email {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 11px;
	line-height: 16px;
	color: #94a3b8;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}

.profile-sidebar-close {
	width: 28px;
	height: 28px;
	background: #2b1077;
	border: 1px solid rgba(128, 127, 255, 0.5);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.profile-sidebar-close img {
	width: 14px;
	height: 14px;
}

/* Wallet */
.profile-sidebar-wallet {
	margin: 16px;
	padding: 16px;
	background: #2b1077;
	border: 1px solid rgba(128, 127, 255, 0.3);
	border-radius: 12px;
}

.profile-sidebar-wallet-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.profile-sidebar-wallet-label {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: #9898ff;
}

.profile-sidebar-wallet-balance {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 22px;
	line-height: 28px;
	color: #ffffff;
}

.profile-sidebar-wallet-settings {
	padding: 0;
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	filter: brightness(0) saturate(100%) invert(56%) sepia(73%) saturate(487%)
		hue-rotate(203deg) brightness(102%) contrast(101%);
}

.profile-sidebar-wallet-settings img {
	width: 24px;
	height: 24px;
}

.profile-sidebar-wallet-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	margin-bottom: 16px;
	padding-top: 12px;
	border-top: 1px solid #380faf;
}

.profile-sidebar-wallet-item-label {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 11px;
	line-height: 16px;
	color: #9898ff;
}

.profile-sidebar-wallet-item-value {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 18px;
	color: #ffffff;
}

.profile-sidebar-wallet-actions {
	display: flex;
	gap: 8px;
}

.profile-sidebar-wallet-btn {
	flex: 1;
	height: 32px;
	max-height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	border: none;
	text-decoration: none;
}

.profile-sidebar-wallet-btn.deposit {
	background: #e7de0b;
	color: #0d0e1f;
}

.profile-sidebar-wallet-btn.deposit img {
	width: 14px;
	height: 14px;
}

.profile-sidebar-wallet-btn.withdraw {
	background: #4303dd;
	color: #ffffff;
	border: 1px solid #461cf3;
}

/* Menu */
.profile-sidebar-menu {
	margin: 0 16px 16px;
	padding: 12px;
	background: #2b1077;
	border: 1px solid rgba(128, 127, 255, 0.3);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Promoções link — separate from menu container */
.profile-sidebar-promo-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 16px 8px;
	padding: 14px 10px;
	background: #2b1077;
	border: 1px solid transparent;
	border-image: linear-gradient(180deg, #c4af0b 0%, #e7790b 100%) 1;
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	/* border-image breaks border-radius, so use outline + background-clip trick */
	position: relative;
	border: none;
}
.profile-sidebar-promo-link::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	padding: 1px;
	background: linear-gradient(180deg, #c4af0b 0%, #e7790b 100%);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.profile-sidebar-promo-link-left {
	display: flex;
	align-items: center;
	gap: 10px;
}
.profile-sidebar-promo-link-left img {
	width: 16px;
	height: 16px;
}
.profile-sidebar-promo-link-left span {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	color: #e7e9ff;
}
.profile-sidebar-promo-link svg path {
	stroke: #9898ff;
}

.profile-sidebar-accordion {
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: hidden;
}

.profile-sidebar-accordion + .profile-sidebar-accordion {
	border-top: 1px solid rgba(128, 127, 255, 0.15);
	margin-top: 8px;
	padding-top: 8px;
}

.profile-sidebar-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 4px;
	cursor: pointer;
	background: transparent;
	border: none;
	width: 100%;
}

.profile-sidebar-accordion-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.profile-sidebar-accordion-header img {
	width: 20px;
	height: 20px;
}

.profile-sidebar-accordion-header span {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #ffffff;
}

.profile-sidebar-accordion-chevron {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.profile-sidebar-accordion.open .profile-sidebar-accordion-chevron {
	transform: rotate(180deg);
}

.profile-sidebar-accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.profile-sidebar-accordion.open .profile-sidebar-accordion-content {
	max-height: 500px;
}

.profile-sidebar-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	cursor: pointer;
	text-decoration: none;
	background: #380faf;
	border-radius: 8px;
	margin-bottom: 6px;
	border: none;
	width: 100%;
	box-sizing: border-box;
}

.profile-sidebar-menu-item:last-child {
	margin-bottom: 0;
}

.profile-sidebar-menu-item img {
	width: 18px;
	height: 18px;
}

.profile-sidebar-menu-item span {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: #e2e8f0;
}

/* Notification badge */
.profile-sidebar-notif-badge {
	display: none;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	min-width: 21px;
	height: 16px;
	padding: 2px 4px 3px;
	background: #ef4444;
	border-radius: 33px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 10px;
	line-height: 12px;
	color: #fafafa;
	text-align: center;
	text-shadow: 0px 1px 0px black;
	box-sizing: border-box;
}

/* Logout */
.profile-sidebar-logout {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 4px 0;
	cursor: pointer;
	border: none;
	background: none;
	width: 100%;
	border-top: 1px solid rgba(128, 127, 255, 0.15);
	margin-top: 8px;
}

.profile-sidebar-logout img {
	width: 20px;
	height: 20px;
}

.profile-sidebar-logout span {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #ef4444;
}

/* Bonus listing inside profile sidebar — slot que `createBonusCard` popula.
   Mesmo card do left-sidebar (236×110), em carrossel HORIZONTAL com scroll
   (igual `ps-sidebar-bonus-track`). Sem heading nem "Resgatar todos".
   Margem combina com .profile-sidebar-support pra ficar alinhado. */
.profile-sidebar-bonuses {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0 16px 12px;
	padding: 0 0 4px;
}
.profile-sidebar-bonuses::-webkit-scrollbar {
	display: none;
}
.profile-sidebar-bonuses .ps-bonus-card {
	width: 236px;
	flex-shrink: 0;
}

/* Support button — same style as Promoções but with menu container border */
.profile-sidebar-support {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 16px 8px;
	padding: 14px 10px;
	background: #2b1077;
	border: 1px solid rgba(128, 127, 255, 0.3);
	border-radius: 12px;
	cursor: pointer;
	width: calc(100% - 32px);
	box-sizing: border-box;
}
.profile-sidebar-support img {
	width: 16px;
	height: 16px;
}
.profile-sidebar-support {
	max-height: 44px;
}
.profile-sidebar-support span {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #ffffff;
}

/* ─── Last Game Banner (fixed bottom, above navbar) ─── */
.last-game-banner {
	position: fixed;
	bottom: 70px;
	left: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px 8px 8px;
	background: rgba(43, 16, 119, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(128, 127, 255, 0.3);
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	z-index: 99;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.last-game-banner-thumb {
	width: 57px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	background: #0f032f;
	border: 2px solid rgba(128, 127, 255, 0.4);
	position: absolute;
	bottom: 8px;
}

.last-game-banner-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.last-game-banner-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
	margin-left: 64px;
}

.last-game-banner-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.last-game-banner-label {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 10px;
	line-height: 14px;
	color: #94a3b8;
}

.last-game-banner-close {
	width: 28px;
	height: 28px;
	background: #2b1077;
	border: 1px solid rgba(128, 127, 255, 0.5);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.last-game-banner-close svg {
	width: 14px;
	height: 14px;
}

.last-game-banner-close:hover {
	background: #380faf;
}

/* ─── Last Game Banner — desktop only ───
   No desktop, ancora apenas pelo canto inferior direito (sem left), com
   bottom 16px (em vez dos 70px do mobile). Largura colapsa pra conteúdo.
   Thumb e tipografia ampliados pra acomodar o card maior. */
@media (min-width: 769px) {
	.last-game-banner {
		bottom: 16px;
		left: auto;
		-webkit-backdrop-filter: none;
	}

	.last-game-banner-thumb {
		width: 89px;
		height: 118px;
	}

	.last-game-banner-info {
		margin-left: 96px;
	}

	.last-game-banner-name {
		font-size: 16px;
	}

	.last-game-banner-label {
		font-size: 12px;
	}
}

/* ─── Influencer Profile Drawer (mobile-first) ───
   Mesmo comportamento e dimensão do gp-drawer (full-screen slide-up no mobile).
   Quando vier desktop, adicionar bloco em @media (min-width: 769px) com grid
   espelhado ao do gp-drawer. */
.ip-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 299;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.ip-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

/* Elevate header above drawer when influencer page is open — mesmo padrão do
   gp-drawer pra manter o header principal sempre acima do overlay/drawer
   (visível e interativo). */
body.ip-open app-header {
	z-index: 300 !important;
}

.ip-drawer {
	position: fixed;
	top: 48px;
	left: 0;
	width: 100%;
	height: calc(100% - 48px);
	background: #15043f;
	z-index: 299;
	transform: translateY(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #432e7e transparent;
}
.ip-drawer::-webkit-scrollbar {
	width: 3px;
}
.ip-drawer::-webkit-scrollbar-track {
	background: transparent;
}
.ip-drawer::-webkit-scrollbar-thumb {
	background: #432e7e;
	border-radius: 3px;
}
.ip-drawer.open {
	transform: translateY(0);
}

/* Header — replica visual do gp-header (back, título, ação à direita) */
.ip-header {
	position: sticky;
	top: 0;
	z-index: 10;
	height: 48px;
	background: #1f055b;
	border-bottom: 1px solid #380faf;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	gap: 8px;
}
/* Spec do Figma — mesma forma em mobile e desktop. padding 0 7px combinado
   com width 28px deixa exatamente 14px de área interna pra acomodar o ícone
   chevron-left de 14×14 (display flex + center alinha verticalmente). */
.ip-header-back {
	display: flex;
	width: 28px;
	height: 28px;
	padding: 0 7px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	border: 1px solid rgba(128, 127, 255, 0.3);
	background: rgba(43, 16, 119, 0.6);
	cursor: pointer;
	box-sizing: border-box;
}
.ip-header-back img {
	width: 14px;
	height: 14px;
}
/* Title absoluto pra centralizar no header inteiro (sem balanceamento
   com botão à direita). pointer-events: none mantém o back button clicável
   se o título ficar largo o suficiente pra sobrepor. */
.ip-header-title {
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: #fafafa;
	text-align: center;
}
/* Content scroll area */
.ip-content {
	padding: 16px 12px 80px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Influencer Card — wallpaper + bottom panel + avatar overlapping */
.ip-card-wrap {
	position: relative;
}
.ip-card {
	border-radius: 16px;
	border: 1px solid rgba(128, 127, 255, 0.2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.ip-card-wallpaper {
	height: 76px;
	background: linear-gradient(135deg, #1f055b 0%, #2b1077 100%);
	overflow: hidden;
	position: relative;
}
.ip-card-wallpaper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ip-card-bottom {
	height: 56px;
	box-sizing: border-box;
	/* padding-left maior pra acomodar o avatar 80px (16 + 80) que sobressai */
	padding: 6px 16px 6px 108px;
	background: linear-gradient(51deg, #15043f 0%, #2b1077 50%, #15043f 100%);
	border-top: 1px solid rgba(128, 127, 255, 0.2);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	display: flex;
	flex-direction: column;
	justify-content: start;
	gap: 4px;
}

/* Avatar com anel amarelo, posicionado sobre a fronteira wallpaper/painel.
   `top: 36px` centra o avatar (80px) na fronteira (wallpaper de 76px):
   metade superior fica no wallpaper, metade inferior no painel. `left: 12px`
   igual Figma. */
.ip-avatar {
	position: absolute;
	top: 36px;
	left: 12px;
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	padding: 3px;
	border-radius: 50%;
	border: 2px solid #e7de0b;
	background: #15043f;
	box-shadow: -3px 5px 10px rgba(11, 11, 11, 0.7);
	z-index: 2;
}
.ip-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.ip-name {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: #fafafa;
	overflow: hidden;
}
.ip-name-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ip-name-verified {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ip-name-verified svg {
	width: 14px;
	height: 14px;
	display: block;
}
.ip-desc {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 10px;
	line-height: 12px;
	color: #9898ff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Sections container — reusa as classes `.lobby-section*` por dentro pra
   herdar todo o styling existente (rankeds, providers, torneios, promos). */
.ip-sections {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ─── Influencer Profile Drawer — desktop ───
   Mesma ocupação/comportamento do gp-drawer no desktop: drawer ancorado
   abaixo do header principal (52px) e à direita do sidebar (288px). Card
   do influencer mantém a MESMA estrutura semântica do mobile (wallpaper
   no topo + painel inferior com texto + avatar sobrepondo a fronteira) —
   apenas com dimensões maiores conforme Figma node 3815-31624. */
@media (min-width: 769px) {
	.ip-overlay {
		top: 52px;
		left: 288px;
		width: calc(100vw - 288px);
		height: calc(100vh - 52px);
		inset: auto;
		background: rgba(15, 4, 47, 0.85);
	}

	.ip-drawer {
		top: 52px;
		left: 288px;
		width: calc(100vw - 288px);
		height: calc(100vh - 52px);
		transform: translateY(20px);
		opacity: 0;
		transition:
			opacity 0.25s ease,
			transform 0.25s ease;
	}
	.ip-drawer.open {
		transform: translateY(0);
		opacity: 1;
	}

	/* Desktop: título encostado no botão back (gap 16px) na esquerda, em
	   vez do centralizado do mobile. */
	.ip-header {
		height: 56px;
		padding: 0 24px;
		justify-content: flex-start;
		gap: 16px;
	}
	/* Desktop volta pro flow normal — sem o absolute mobile. */
	.ip-header-title {
		position: static;
		pointer-events: auto;
		text-align: left;
	}

	.ip-content {
		padding: 16px 24px 40px;
		gap: 24px;
	}

	/* Wallpaper desktop = 144px (especificação Figma). Mantém position:
	   relative no fluxo normal — sem absolute/inset que descaracterizam
	   a estrutura. */
	.ip-card-wallpaper {
		height: 144px;
	}

	/* Painel inferior desktop = 96px. padding-left 184 = 24 (avatar left)
	   + 140 (avatar width) + 20 (gap até o texto). */
	.ip-card-bottom {
		height: 96px;
		padding: 12px 24px 12px 184px;
		gap: 8px;
	}

	/* Avatar 140px sobrepondo a fronteira wallpaper/painel.
	   `top: 74` = 144 - 70 → centro do avatar (74+70=144) na fronteira
	   wallpaper/painel: metade superior no wallpaper, metade inferior no
	   painel. `left: 24` igual padding-left do painel. */
	.ip-avatar {
		top: 74px;
		left: 24px;
		width: 140px;
		height: 140px;
	}

	/* Tipografia ligeiramente maior, mas conservadora (16/12 vs 14/10
	   do mobile) — mais próximo do Figma do que os 24px que eu tinha
	   colocado pro layout single-banner errado. */
	.ip-name-text {
		font-size: 16px;
		line-height: 20px;
	}
	.ip-name-verified,
	.ip-name-verified svg {
		width: 16px;
		height: 16px;
	}
	.ip-desc {
		font-size: 12px;
		line-height: 16px;
	}
}

/* ─── Game Page Drawer ─── */
.gp-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9000;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.gp-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

/* Elevate header above drawer when game page is open */
body.gp-open app-header {
	z-index: 9002 !important;
}

.gp-drawer {
	position: fixed;
	top: 48px;
	left: 0;
	width: 100%;
	height: calc(100% - 48px);
	background: #15043f;
	z-index: 9001;
	transform: translateY(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
.gp-drawer::-webkit-scrollbar {
	width: 3px;
}
.gp-drawer::-webkit-scrollbar-track {
	background: transparent;
}
.gp-drawer::-webkit-scrollbar-thumb {
	background: #432e7e;
	border-radius: 3px;
}
.gp-drawer {
	scrollbar-width: thin;
	scrollbar-color: #432e7e transparent;
}
.gp-drawer.open {
	transform: translateY(0);
}

/* Header */
.gp-header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 43px;
	padding: 0 8px;
	background: #1f055b;
	border-bottom: 1px solid #432e7e;
}
.gp-header-back {
	width: 28px;
	height: 28px;
	background: rgba(43, 16, 119, 0.6);
	border: 1px solid rgba(128, 127, 255, 0.3);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.gp-header-back img {
	width: 16px;
	height: 16px;
	transform: rotate(90deg);
}
.gp-header-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60%;
}

/* Hero banner (blurred background using game thumb) */
.gp-hero {
	position: relative;
	height: 124px;
	overflow: hidden;
}
.gp-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: blur(8px);
	transform: scale(1.15);
}
.gp-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(21, 4, 63, 0.5);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* Game info card */
.gp-card {
	margin: -75px 12px 0;
	padding: 12px;
	background: #2b1077;
	border: 1px solid rgba(128, 127, 255, 0.2);
	border-radius: 10px;
	display: flex;
	gap: 12px;
	position: relative;
	z-index: 2;
}
.gp-card-thumb {
	width: 115px;
	height: 150px;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
	margin-top: -25px;
}
.gp-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gp-card-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	min-width: 0;
	padding-top: 0;
}
.gp-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.gp-card-meta-left {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.gp-card-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #fafafa;
}
.gp-card-provider {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: #d3d3d3;
}
.gp-card-actions {
	display: flex;
	align-items: center;
}
.gp-card-actions img {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

/* RTP Bar */
.gp-rtp-bar {
	position: relative;
	height: 15px;
	border-radius: 22px;
	border: 1px solid #10b981;
	overflow: hidden;
	background: #2f0888;
}
.gp-rtp-fill {
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(160deg, #064e36, #10b981, #a7f3da);
}
.gp-rtp-label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 10px;
	color: #2f0888;
	white-space: nowrap;
}

/* Play button */
.gp-play-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px;
	background: linear-gradient(180deg, #c7b007, #e7de0b);
	border: 1px solid #e7de0b;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
}
.gp-play-btn span {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 12px;
	color: #191000;
}
.gp-play-btn img {
	width: 16px;
	height: 16px;
	filter: brightness(0);
}

/* Separator */
.gp-card-separator {
	height: 1px;
	margin-top: auto;
	background: rgba(128, 127, 255, 0.2);
	width: 100%;
}

/* RTP Progress Bar */
.gp-rtp-bar {
	position: relative;
	width: 100%;
	height: 15px;
	border-radius: 32px;
	background: #160441;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.gp-rtp-bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 32px;
	background: linear-gradient(
		102deg,
		#064e36 2.35%,
		#10b981 47.19%,
		#a7f3da 92.02%
	);
	transition: width 0.6s ease;
}

.gp-rtp-bar-label {
	position: relative;
	z-index: 1;
	width: 100%;
	text-align: center;
	color: #2f0888;
	font-family: "Montserrat", sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	font-variant-numeric: lining-nums proportional-nums;
}

/* Statistics section */
.gp-stats {
	margin: 12px 12px 0;
	padding: 12px;
	background: #2b1077;
	border: 1px solid rgba(128, 127, 255, 0.2);
	border-radius: 10px;
}
.gp-stats:not(.open) {
	height: 48px;
	box-sizing: border-box;
	overflow: hidden;
}
.gp-stats-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}
.gp-stats-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}
.gp-stats-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #fafafa;
}
.gp-stats-live-badge {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 8px 4px 4px;
	background: #2b1077;
	border: 1px solid #380faf;
	border-radius: 8px;
	height: 24px;
}
.gp-stats-live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22c55e;
	margin: 0 4px;
}
.gp-stats-live-text {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 11px;
	color: #d3d3d3;
	text-transform: uppercase;
}
.gp-stats-chevron {
	width: 20px;
	height: 20px;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.gp-stats.open .gp-stats-chevron {
	transform: rotate(180deg);
}

.gp-stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 12px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.gp-stats.open .gp-stats-grid {
	max-height: 500px;
}

.gp-stats-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: #380faf;
	border-radius: 6px;
}
.gp-stats-item img {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.gp-stats-item-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.gp-stats-item-label {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 10px;
	color: #9898ff;
}
.gp-stats-item-value {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 12px;
	color: #fafafa;
}

/* Game page sections container */
.gp-sections {
	padding: 16px 0 80px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.gp-sections .lobby-section-heading {
	padding: 0 12px;
}
.gp-sections .lobby-stats-cards {
	padding-left: 12px;
}

.gp-sections .lobby-tournament-cards {
	padding: 0 12px;
}

/* ─── Game Page — desktop layout (Figma node 3672-61101) ───
   No desktop o drawer NÃO cobre o sidebar (left: 288px). Usa CSS Grid
   pra colocar o game card e o stats card lado a lado abaixo do hero.
   Mobile permanece como drawer fullscreen (intocado). */
@media (min-width: 769px) {
	.gp-overlay {
		top: 52px;
		left: 288px;
		width: calc(100vw - 288px);
		height: calc(100vh - 52px);
		inset: auto;
		background: rgba(15, 4, 47, 0.85);
	}

	.gp-drawer {
		top: 52px;
		left: 288px;
		width: calc(100vw - 288px);
		height: calc(100vh - 52px);
		background: #15043f;
		transform: translateY(20px);
		opacity: 0;
		transition:
			opacity 0.25s ease,
			transform 0.25s ease;
		display: grid;
		grid-template-columns: 1fr 328px;
		/* Rows com altura natural do conteúdo. `align-content: start` é
		   essencial: sem isso, em viewports altos/zoom-out o grid distribui
		   o espaço livre entre as rows (default `align-content: normal` ≈
		   `stretch` quando o container tem altura definida), o que abre
		   gaps verticais entre header/hero/card/sections e quebra o
		   posicionamento -80px do card sobre o hero. */
		grid-template-rows: auto auto auto auto;
		grid-template-areas:
			"header header"
			"hero hero"
			"card stats"
			"sections sections";
		align-content: start;
		column-gap: 16px;
		row-gap: 0;
		padding: 0 24px 40px;
		box-sizing: border-box;
	}

	.gp-drawer.open {
		transform: translateY(0);
		opacity: 1;
	}

	.gp-header {
		grid-area: header;
		background: #1f055b !important;
		border-bottom: none !important;
		position: sticky;
		top: 0;
		height: 44px;
		padding: 0 24px;
		margin: 0 -24px;
		justify-content: flex-start;
		gap: 12px;
		z-index: 6;
	}

	/* Título encostado no botão back (não centralizado), gap pelo header */
	.gp-header-title {
		position: static;
		transform: none;
		left: auto;
		font-size: 16px;
		max-width: none;
		margin: 0;
	}

	/* Hero edge-to-edge horizontal (cancela o padding lateral do drawer).
	   Mantém um gradiente como fallback caso a imagem do jogo não carregue;
	   a `.gp-hero-bg` (position: absolute) cobre por cima quando estiver ok. */
	.gp-hero {
		grid-area: hero;
		height: 240px;
		margin: 0 -24px;
		border-radius: 0;
		overflow: hidden;
		background: linear-gradient(180deg, #15043f 0%, #2b1077 100%);
	}

	/* Game card (esquerda) — sobrepõe parcialmente o hero pelo margin
	   negativo (igual Figma). Altura natural do conteúdo. */
	.gp-card {
		grid-area: card;
		margin: -80px 0 0;
		padding: 16px;
		max-width: none;
		align-self: start;
		z-index: 5;
		display: flex;
		gap: 16px;
	}

	/* Thumb estoura 40px pra cima do card, entrando dentro do hero — efeito
	   "card popping out" do Figma. */
	.gp-card-thumb {
		width: 140px;
		height: 188px;
		margin-top: -40px;
		flex-shrink: 0;
		border-radius: 8px;
	}

	.gp-card-info {
		gap: 12px;
		justify-content: flex-start;
	}

	.gp-card-meta {
		margin-bottom: auto;
	}

	.gp-card-name {
		font-size: 16px;
	}

	.gp-card-provider {
		font-size: 13px;
	}

	/* Stats card (direita) — largura fixa 328 (Figma). Margin negativo
	   alinhado com `.gp-card` (-80px) pra que os topos das duas cards
	   fiquem na mesma linha, ambos sobrepondo o hero pelo mesmo offset. */
	.gp-stats {
		grid-area: stats;
		margin: -80px 0 0;
		padding: 12px;
		align-self: start;
		width: 328px;
		box-sizing: border-box;
		height: auto !important;
		z-index: 5;
		display: flex;
		flex-direction: column;
	}

	.gp-stats:not(.open) {
		height: auto;
		overflow: visible;
	}

	.gp-stats-chevron {
		display: none;
	}

	.gp-stats-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(2, auto);
		gap: 6px 8px;
		max-height: none !important;
		margin-top: 26px;
	}

	/* Quando o fetch de game-details falha, o JS remove `#gp-stats-section`.
	   Sem este fallback, a coluna direita do grid (328px) fica vazia e o
	   card do jogo aparece encolhido. Aqui colapsamos pra 1 coluna e o
	   card expande pro width inteiro. `:has` é suportado em todos os
	   browsers modernos do mercado. */
	.gp-drawer:not(:has(#gp-stats-section)) {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"hero"
			"card"
			"sections";
	}

	.gp-stats.open .gp-stats-grid,
	.gp-stats .gp-stats-grid {
		max-height: none;
	}

	.gp-stats-item {
		padding: 6px 8px;
		gap: 8px;
		background: #380faf;
	}

	.gp-stats-item img {
		width: 18px;
		height: 18px;
	}

	.gp-stats-item-label {
		font-size: 10px;
		color: #9898ff;
	}

	.gp-stats-item-value {
		font-size: 12px;
	}

	/* Sections row (Jogue e ganhe, Torneios) ocupa largura total abaixo */
	.gp-sections {
		grid-area: sections;
		padding: 32px 0 40px;
	}

	.gp-sections .lobby-section-heading {
		padding: 0;
	}

	.gp-sections .lobby-stats-cards,
	.gp-sections .lobby-tournament-cards {
		padding: 0;
	}
}

/* ─── Stories ─── */
#stories-container {
	padding: 0 16px;
}

.stories-carousel {
	display: flex;
	gap: 16px;
	padding: 16px 0 0 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.stories-carousel::-webkit-scrollbar {
	display: none;
}

.story-icon-wrapper {
	flex-shrink: 0;
	cursor: pointer;
	transition: transform 0.2s ease;
	position: relative;
}
.story-icon-wrapper:hover {
	transform: scale(1.05);
}

.story-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	padding: 2px;
	background: transparent;
	transition: background 0.15s ease;
}
.story-icon.loaded {
	background: linear-gradient(180deg, #9f55ff, #6b24f3);
}
.story-icon img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #1a1a2e;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.story-icon.loaded img {
	opacity: 1;
}

.story-title {
	display: none;
}

.story-tag {
	display: none;
}
.story-tag span {
	display: inline-block;
}
.story-tag.highlight {
	animation: story-pulse-seq 5s ease-in-out infinite;
}
.story-tag.highlight span {
	animation: story-roll-seq 5s ease-in-out infinite;
}
@keyframes story-pulse-seq {
	0% {
		transform: translateX(-50%) scale(1);
	}
	5% {
		transform: translateX(-50%) scale(1.2);
	}
	10% {
		transform: translateX(-50%) scale(1);
	}
	15% {
		transform: translateX(-50%) scale(1.2);
	}
	95% {
		transform: translateX(-50%) scale(1.2);
	}
	100% {
		transform: translateX(-50%) scale(1);
	}
}
@keyframes story-roll-seq {
	0%,
	40% {
		transform: translateY(0);
		opacity: 1;
	}
	42% {
		transform: translateY(100%);
		opacity: 0;
	}
	44% {
		transform: translateY(-100%);
		opacity: 0;
	}
	46%,
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Story modal */
.story-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.story-modal-content {
	position: relative;
	width: 100%;
	max-width: 420px;
	height: 100%;
	max-height: 90vh;
}
.story-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px;
}

.story-progress-container {
	position: absolute;
	top: 16px;
	left: 16px;
	right: 16px;
	display: flex;
	gap: 4px;
}
.story-progress-bar-touche-zone {
	flex: 1;
	cursor: pointer;
	height: 20px;
}
.story-progress-bar {
	flex: 1;
	height: 3px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 2px;
	overflow: hidden;
	cursor: pointer;
}
.story-progress-fill {
	height: 100%;
	background: #fff;
	width: 0%;
	transition: width 0.1s linear;
}
.story-progress-fill.complete {
	width: 100%;
}

.story-close {
	position: absolute;
	top: 55px;
	right: 16px;
	background: rgba(0, 0, 0, 0.5);
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.story-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.story-nav.prev {
	left: 16px;
}
.story-nav.next {
	right: 16px;
}

.story-cta {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	background: #f7f716;
	color: #000;
	border: none;
	padding: 12px 32px;
	border-radius: 24px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s;
	z-index: 1;
	width: max-content;
	max-width: 90%;
	text-align: center;
	font-family: "Montserrat", sans-serif;
}
.story-cta:hover {
	transform: translateX(-50%) scale(1.05);
}

.story-header {
	position: absolute;
	top: 50px;
	left: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.story-header-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.story-header-title {
	color: #fff;
	font-weight: 600;
	font-family: "Montserrat", sans-serif;
}

.touch-zones {
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
}
.touch-zone {
	flex: 1;
	cursor: pointer;
}

@media (min-width: 520px) {
	.story-close {
		right: -40px;
	}
	.story-nav.prev {
		left: -50px;
	}
	.story-nav.next {
		right: -50px;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   HAMBURGER MENU (mobile) — host pro #ps-sidebar.
   O conteúdo nativo do Angular dentro do `.modalBox__body` é escondido
   quando o JS aplica a classe `ps-mobile-sidebar-host`, e o `<aside
   id="ps-sidebar">` é injetado no lugar (mesmo elemento usado no desktop).
   Aqui só pintamos o wrapper/header do modal e neutralizamos as dimensões
   desktop do `#ps-sidebar` pra ele caber na largura do modal.
   ════════════════════════════════════════════════════════════════════════ */
modal#left-hamburger-menu .modalBox__backdrop {
	background: rgba(15, 3, 47, 0.7) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

modal#left-hamburger-menu .modalBox__wrapper {
	background: #1b0849 !important;
	border-right: 1px solid #2b1077 !important;
}

modal#left-hamburger-menu .modalBox__content {
	background: #1b0849 !important;
	color: #ffffff !important;
}

/* Header (deposit / lang dropdown / close) — sem border-bottom: o `<hr
   class="ps-sidebar-divider">` entre greeting e o resto da sidebar já cumpre
   o papel de separador, e o original criava uma linha dupla logo acima dele. */
modal#left-hamburger-menu .modalBox__header {
	background: #1b0849 !important;
	border-bottom: 0 !important;
}

/* Layout: [Depósito flag] ······· [X]. O space-between original espalhava
   o flag pro meio; agora os 2 primeiros ficam juntos à esquerda e o X é
   empurrado pra direita pelo `margin-left: auto` na regra `.btn-square`. */
modal#left-hamburger-menu .m-menu-head {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	min-height: 0 !important;
}

modal#left-hamburger-menu .m-menu-head .btn-square {
	margin-left: auto !important;
}

/* Botão Depósito — mesmo formato compacto do toggle de idioma ao lado
   (~32px de altura). Sem `mr-auto` empurrando os outros pra direita: o
   `m-menu-head` já distribui via space-between. */
modal#left-hamburger-menu .m-menu-head button.site-btn__primary {
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: 32px !important;
	padding: 6px 12px !important;
	margin-right: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 16px !important;
	border-radius: 8px !important;
}

modal#left-hamburger-menu .lang-dropdown__btn {
	background: transparent !important;
	border: 1px solid #2b1077 !important;
	border-radius: 8px !important;
	padding: 4px 8px !important;
	color: #e7e9ff !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	-webkit-tap-highlight-color: transparent;
}
modal#left-hamburger-menu .lang-dropdown__btn:focus,
modal#left-hamburger-menu .lang-dropdown__btn:focus-visible,
modal#left-hamburger-menu .lang-dropdown__btn:active {
	outline: none !important;
}

modal#left-hamburger-menu .p-dd {
	background: #1b0849 !important;
	border: 1px solid #2b1077 !important;
	border-radius: 8px !important;
	margin-top: 4px !important;
}

modal#left-hamburger-menu .btn-square {
	background: transparent !important;
	border: none !important;
	color: #e7e9ff !important;
	font-size: 18px !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	-webkit-tap-highlight-color: transparent;
	transition:
		background 0.15s ease,
		filter 0.15s ease;
}
modal#left-hamburger-menu .btn-square:hover,
modal#left-hamburger-menu .btn-square:active {
	background: rgba(255, 255, 255, 0.05) !important;
	color: #ffffff !important;
	filter: brightness(1.2);
}
modal#left-hamburger-menu .btn-square:focus,
modal#left-hamburger-menu .btn-square:focus-visible {
	outline: none !important;
}

/* Body container — host pro #ps-sidebar injetado pelo JS */
modal#left-hamburger-menu .modalBox__body,
modal#left-hamburger-menu .m-menu-body {
	background: #1b0849 !important;
	padding: 0 !important;
}

/* Esconde tudo o que o Angular renderizou nativamente dentro do body —
   o JS marca o body com `ps-mobile-sidebar-host` ao injetar o sidebar. */
modal#left-hamburger-menu
	.modalBox__body.ps-mobile-sidebar-host
	> *:not(#ps-sidebar),
modal#left-hamburger-menu
	.m-menu-body.ps-mobile-sidebar-host
	> *:not(#ps-sidebar) {
	display: none !important;
}

/* Adapta o #ps-sidebar (que tem styles desktop sticky/288px) ao modal:
   ocupa 100% da largura, sem sticky, sem borda direita, padding-y 16. */
modal#left-hamburger-menu #ps-sidebar {
	position: static !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 16px 0 !important;
	background: transparent !important;
	border-right: 0 !important;
	align-self: stretch !important;
	overflow-y: visible !important;
	overflow-x: hidden !important;
	flex-shrink: 1 !important;
	top: auto !important;
}