/**
 * Save Game - Sistema de Consentimento de Cookies
 */


/* =========================================================
   VARIÁVEIS
   ========================================================= */

:root {
	--sg-cookie-roxo: #8b5cf6;
	--sg-cookie-roxo-escuro: #6d3de8;
	--sg-cookie-roxo-claro: #f4efff;
	--sg-cookie-roxo-borda: #e7dcff;

	--sg-cookie-preto: #18181b;
	--sg-cookie-texto: #3f3f46;
	--sg-cookie-suave: #71717a;

	--sg-cookie-branco: #ffffff;
	--sg-cookie-fundo: #fafafa;
	--sg-cookie-borda: #e4e4e7;

	--sg-cookie-verde: #047857;
	--sg-cookie-verde-claro: #ecfdf5;
}


/* =========================================================
   ELEMENTOS OCULTOS
   ========================================================= */

#savegame-cookie-button.savegame-cookie-button[hidden],
#savegame-cookie-banner.savegame-cookie-banner[hidden],
#savegame-cookie-modal.savegame-cookie-modal[hidden] {
	display: none !important;
}


/* =========================================================
   BOTÃO FLUTUANTE
   ========================================================= */

#savegame-cookie-button.savegame-cookie-button {
	position: fixed !important;

	left: 12px !important;
	right: auto !important;

	bottom: 16px !important;
	top: auto !important;

	z-index: 99999 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 44px !important;
	height: 44px !important;

	min-width: 44px !important;
	min-height: 44px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 2px solid rgba(255, 255, 255, 0.85) !important;
	border-radius: 50% !important;

	background: var(--sg-cookie-roxo) !important;

	color: #ffffff !important;

	box-shadow:
		0 5px 16px rgba(0, 0, 0, 0.25) !important;

	font-size: 0 !important;
	line-height: 1 !important;

	cursor: pointer !important;

	appearance: none !important;
	-webkit-appearance: none !important;

	overflow: hidden !important;

	transition:
		background 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease !important;
}


#savegame-cookie-button svg {
	display: block !important;

	width: 20px !important;
	height: 20px !important;

	color: #ffffff !important;
	stroke: currentColor !important;

	pointer-events: none;
}


/* =========================================================
   BOTÃO - INTERAÇÃO
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

	#savegame-cookie-button.savegame-cookie-button:hover {
		background: var(--sg-cookie-roxo-escuro) !important;

		transform:
			translateY(-2px)
			scale(1.04) !important;

		box-shadow:
			0 8px 22px rgba(109, 61, 232, 0.34) !important;
	}

}


#savegame-cookie-button.savegame-cookie-button:active {
	background: var(--sg-cookie-roxo-escuro) !important;

	transform: scale(0.95) !important;
}


#savegame-cookie-button.savegame-cookie-button:focus {
	outline: none !important;
}


#savegame-cookie-button.savegame-cookie-button:focus-visible {
	outline:
		3px solid rgba(139, 92, 246, 0.40) !important;

	outline-offset: 4px !important;
}


/* =========================================================
   BANNER
   ========================================================= */

.savegame-cookie-banner {
	position: fixed;

	left: 50%;
	bottom: 18px;

	z-index: 100000;

	width: calc(100% - 36px);
	max-width: 1080px;

	padding: 22px;

	border: 1px solid var(--sg-cookie-borda);
	border-radius: 18px;

	background: rgba(255, 255, 255, 0.98);

	box-shadow:
		0 16px 50px rgba(0, 0, 0, 0.18);

	transform: translateX(-50%);

	font-family: inherit;

	box-sizing: border-box;
}


.savegame-cookie-banner *,
.savegame-cookie-modal * {
	box-sizing: border-box;
}


/* =========================================================
   CONTEÚDO DO BANNER
   ========================================================= */

.savegame-cookie-banner__conteudo {
	display: flex;
	align-items: flex-start;

	gap: 16px;
}


.savegame-cookie-banner__icone {
	flex: 0 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	border-radius: 12px;

	background: var(--sg-cookie-roxo-claro);

	color: var(--sg-cookie-roxo-escuro);
}


.savegame-cookie-banner__icone svg {
	width: 22px;
	height: 22px;
}


.savegame-cookie-banner__texto {
	flex: 1;

	min-width: 0;
}


.savegame-cookie-banner__texto h2 {
	margin: 0 0 7px;

	color: var(--sg-cookie-preto);

	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
}


.savegame-cookie-banner__texto p {
	max-width: 840px;

	margin: 0 0 8px;

	color: var(--sg-cookie-texto);

	font-size: 14px;
	line-height: 1.65;
}


.savegame-cookie-banner__link {
	color: var(--sg-cookie-roxo-escuro);

	font-size: 13px;
	font-weight: 700;

	text-decoration: underline;
	text-underline-offset: 3px;
}


/* =========================================================
   AÇÕES DO BANNER
   ========================================================= */

.savegame-cookie-banner__acoes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;

	gap: 10px;

	margin-top: 18px;
}


/* =========================================================
   BOTÕES GERAIS
   ========================================================= */

.savegame-cookie-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 44px;

	padding: 10px 17px;

	border-radius: 10px;

	font-family: inherit;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;

	cursor: pointer;

	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}


.savegame-cookie-action--primary {
	border: 1px solid var(--sg-cookie-roxo);

	background: var(--sg-cookie-roxo);

	color: #ffffff;
}


.savegame-cookie-action--primary:hover {
	border-color: var(--sg-cookie-roxo-escuro);

	background: var(--sg-cookie-roxo-escuro);
}


.savegame-cookie-action--secondary {
	border: 1px solid var(--sg-cookie-preto);

	background: var(--sg-cookie-preto);

	color: #ffffff;
}


.savegame-cookie-action--secondary:hover {
	background: #27272a;

	border-color: #27272a;
}


.savegame-cookie-action--outline {
	border: 1px solid var(--sg-cookie-borda);

	background: #ffffff;

	color: var(--sg-cookie-preto);
}


.savegame-cookie-action--outline:hover {
	border-color: var(--sg-cookie-roxo-borda);

	background: var(--sg-cookie-roxo-claro);

	color: var(--sg-cookie-roxo-escuro);
}


.savegame-cookie-action:focus-visible {
	outline:
		3px solid rgba(139, 92, 246, 0.30);

	outline-offset: 2px;
}


/* =========================================================
   MODAL
   ========================================================= */

.savegame-cookie-modal {
	position: fixed;

	inset: 0;

	z-index: 100001;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 24px;
}


.savegame-cookie-modal__backdrop {
	position: absolute;

	inset: 0;

	background:
		rgba(9, 9, 11, 0.70);

	backdrop-filter:
		blur(3px);

	-webkit-backdrop-filter:
		blur(3px);
}


.savegame-cookie-modal__dialog {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 680px;

	max-height:
		calc(100vh - 48px);

	overflow: hidden;

	display: flex;
	flex-direction: column;

	border: 1px solid var(--sg-cookie-borda);
	border-radius: 22px;

	background: #ffffff;

	box-shadow:
		0 24px 70px rgba(0, 0, 0, 0.28);

	font-family: inherit;
}


/* =========================================================
   HEADER DO MODAL
   ========================================================= */

.savegame-cookie-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 20px;

	padding: 26px 28px 22px;

	border-bottom:
		1px solid var(--sg-cookie-borda);
}


.savegame-cookie-modal__tag {
	display: block;

	margin-bottom: 5px;

	color: var(--sg-cookie-roxo-escuro);

	font-size: 11px;
	font-weight: 800;

	letter-spacing: 0.07em;
	text-transform: uppercase;
}


.savegame-cookie-modal__header h2 {
	margin: 0;

	color: var(--sg-cookie-preto);

	font-size: 27px;
	font-weight: 800;
	line-height: 1.2;

	letter-spacing: -0.025em;
}


.savegame-cookie-modal__close {
	flex: 0 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	padding: 0;

	border: 1px solid var(--sg-cookie-borda);
	border-radius: 10px;

	background: #ffffff;

	color: var(--sg-cookie-preto);

	font-family: inherit;

	font-size: 26px;
	font-weight: 400;
	line-height: 1;

	cursor: pointer;
}


.savegame-cookie-modal__close:hover {
	background: var(--sg-cookie-fundo);
}


/* =========================================================
   BODY DO MODAL
   ========================================================= */

.savegame-cookie-modal__body {
	overflow-y: auto;

	padding: 24px 28px;
}


.savegame-cookie-modal__intro {
	margin: 0 0 22px;

	color: var(--sg-cookie-texto);

	font-size: 14px;
	line-height: 1.7;
}


/* =========================================================
   PREFERÊNCIAS
   ========================================================= */

.savegame-cookie-preference {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 24px;

	padding: 20px 0;

	border-top:
		1px solid var(--sg-cookie-borda);
}


.savegame-cookie-preference:first-of-type {
	border-top: 0;
}


.savegame-cookie-preference__texto {
	flex: 1;

	min-width: 0;
}


.savegame-cookie-preference__titulo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 9px;
}


.savegame-cookie-preference h3 {
	margin: 0 0 7px;

	color: var(--sg-cookie-preto);

	font-size: 16px;
	font-weight: 750;
	line-height: 1.3;
}


.savegame-cookie-preference p {
	max-width: 500px;

	margin: 0;

	color: var(--sg-cookie-suave);

	font-size: 13px;
	line-height: 1.6;
}


.savegame-cookie-preference__status {
	display: inline-flex;

	padding: 4px 8px;

	margin-bottom: 7px;

	border-radius: 999px;

	background: var(--sg-cookie-verde-claro);

	color: var(--sg-cookie-verde);

	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
}


/* =========================================================
   SWITCH
   ========================================================= */

.savegame-cookie-switch {
	position: relative;

	flex: 0 0 auto;

	display: inline-flex;

	width: 46px;
	height: 26px;

	cursor: pointer;
}


.savegame-cookie-switch input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
}


.savegame-cookie-switch__controle {
	position: absolute;

	inset: 0;

	border-radius: 999px;

	background: #d4d4d8;

	transition:
		background 0.2s ease;
}


.savegame-cookie-switch__controle::after {
	content: "";

	position: absolute;

	width: 20px;
	height: 20px;

	left: 3px;
	top: 3px;

	border-radius: 50%;

	background: #ffffff;

	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.20);

	transition:
		transform 0.2s ease;
}


.savegame-cookie-switch input:checked +
.savegame-cookie-switch__controle {
	background: var(--sg-cookie-roxo);
}


.savegame-cookie-switch input:checked +
.savegame-cookie-switch__controle::after {
	transform:
		translateX(20px);
}


.savegame-cookie-switch input:focus-visible +
.savegame-cookie-switch__controle {
	outline:
		3px solid rgba(139, 92, 246, 0.30);

	outline-offset: 3px;
}


/* Necessário */

.savegame-cookie-switch--locked {
	cursor: default;
}


.savegame-cookie-switch--locked
.savegame-cookie-switch__controle {
	background: var(--sg-cookie-verde);
}


/* =========================================================
   POLÍTICA NO MODAL
   ========================================================= */

.savegame-cookie-modal__politica {
	margin-top: 8px;

	padding-top: 20px;

	border-top:
		1px solid var(--sg-cookie-borda);
}


.savegame-cookie-modal__politica a {
	color: var(--sg-cookie-roxo-escuro);

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;
}


.savegame-cookie-modal__politica a span {
	margin-left: 4px;
}


/* =========================================================
   FOOTER DO MODAL
   ========================================================= */

.savegame-cookie-modal__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;

	gap: 9px;

	padding: 20px 28px;

	border-top:
		1px solid var(--sg-cookie-borda);

	background:
		var(--sg-cookie-fundo);
}


/* =========================================================
   BODY COM MODAL ABERTO
   ========================================================= */

body.savegame-cookie-modal-open {
	overflow: hidden;
}


/* =========================================================
   SCREEN READER
   ========================================================= */

#savegame-cookie-button .screen-reader-text,
#savegame-cookie-live.screen-reader-text,
.savegame-cookie-switch .screen-reader-text {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	padding: 0 !important;
	margin: -1px !important;

	overflow: hidden !important;

	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

	.savegame-cookie-banner {
		max-width: 680px;
	}


	.savegame-cookie-banner__acoes {
		justify-content: stretch;
	}


	.savegame-cookie-banner__acoes
	.savegame-cookie-action {
		flex: 1 1 180px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

	/* Botão */

	#savegame-cookie-button.savegame-cookie-button {
		left: 12px !important;
		bottom: 16px !important;
	}


	/* Banner */

	.savegame-cookie-banner {
		width:
			calc(100% - 24px);

		bottom: 12px;

		padding: 18px;

		border-radius: 16px;
	}


	.savegame-cookie-banner__conteudo {
		gap: 12px;
	}


	.savegame-cookie-banner__icone {
		width: 38px;
		height: 38px;

		border-radius: 10px;
	}


	.savegame-cookie-banner__icone svg {
		width: 20px;
		height: 20px;
	}


	.savegame-cookie-banner__texto h2 {
		font-size: 17px;
	}


	.savegame-cookie-banner__texto p {
		font-size: 13px;
		line-height: 1.55;
	}


	.savegame-cookie-banner__acoes {
		display: grid;

		grid-template-columns: 1fr;

		gap: 8px;

		margin-top: 16px;
	}


	.savegame-cookie-banner__acoes
	.savegame-cookie-action {
		width: 100%;

		min-height: 44px;
	}


	/* Modal */

	.savegame-cookie-modal {
		align-items: flex-end;

		padding: 10px;
	}


	.savegame-cookie-modal__dialog {
		max-height:
			calc(100dvh - 20px);

		border-radius: 20px;
	}


	.savegame-cookie-modal__header {
		padding:
			22px
			20px
			18px;
	}


	.savegame-cookie-modal__header h2 {
		font-size: 23px;
	}


	.savegame-cookie-modal__body {
		padding: 20px;
	}


	.savegame-cookie-modal__intro {
		font-size: 13px;
	}


	.savegame-cookie-preference {
		gap: 15px;

		padding: 18px 0;
	}


	.savegame-cookie-preference h3 {
		font-size: 15px;
	}


	.savegame-cookie-preference p {
		font-size: 12px;
	}


	.savegame-cookie-modal__footer {
		display: grid;

		grid-template-columns: 1fr;

		padding:
			16px
			20px
			20px;
	}


	.savegame-cookie-modal__footer
	.savegame-cookie-action {
		width: 100%;
	}

}


/* =========================================================
   TELAS MUITO PEQUENAS
   ========================================================= */

@media (max-width: 380px) {

	.savegame-cookie-banner {
		width:
			calc(100% - 16px);

		bottom: 8px;

		padding: 16px;
	}


	.savegame-cookie-banner__icone {
		display: none;
	}


	.savegame-cookie-modal {
		padding: 6px;
	}


	.savegame-cookie-modal__dialog {
		max-height:
			calc(100dvh - 12px);
	}


	.savegame-cookie-modal__header {
		padding:
			20px
			17px
			16px;
	}


	.savegame-cookie-modal__body {
		padding:
			18px
			17px;
	}


	.savegame-cookie-modal__footer {
		padding:
			14px
			17px
			17px;
	}

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	#savegame-cookie-button.savegame-cookie-button,
	.savegame-cookie-action,
	.savegame-cookie-switch__controle,
	.savegame-cookie-switch__controle::after {
		transition: none !important;
	}


	#savegame-cookie-button.savegame-cookie-button:hover,
	#savegame-cookie-button.savegame-cookie-button:active {
		transform: none !important;
	}

}