/**
 * =========================================================
 * SAVE GAME - FAVORITOS
 * =========================================================
 */


/* =========================================================
   BOTÃO PADRÃO DO ARTIGO
   ========================================================= */

.savegame-favorito-wrap {
	display: flex;

	width: 100%;

	margin: 10px 0 28px;
}

/* =========================================================
   EVITA FLASH E SALTO DE LAYOUT
   ========================================================= */

body.single-post .savegame-favorito-wrap {
	display: none;
}


/* Quando o JavaScript move para a ficha do Pal */

body.single-post
.savegame-favorito-wrap.savegame-favorito-wrap--bandeirinha {
	display: block;

	opacity: 1;

	animation: savegameFavoritoAparecer 0.15s ease;
}


/* Entrada suave */

@keyframes savegameFavoritoAparecer {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}

}


/* =========================================================
   BANDEIRINHA DE FAVORITO - FICHA DO PAL
   ========================================================= */

.pal-perfil--com-favorito {
	position: relative;
}


/* =========================================================
   CONTAINER DA BANDEIRINHA
   ========================================================= */

.savegame-favorito-wrap--bandeirinha {
	position: absolute;

	top: 0;
	right: 18px;

	z-index: 20;

	display: block;

	width: 44px;
	height: 62px;

	margin: 0;
}


/* =========================================================
   BOTÃO / MARCADOR
   ========================================================= */

.savegame-favorito-wrap--bandeirinha
.savegame-favorito-botao {
	position: relative;

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

	width: 44px;
	height: 62px;
	min-height: 0;

	margin: 0;
	padding: 12px 0 0;

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#faf8ff 100%
		);

	border: 1px solid rgba(146, 98, 250, 0.26);
	border-top: 0;
	border-radius: 0;

	color: #9262fa;

	box-shadow:
		0 7px 18px rgba(49, 38, 77, 0.10);

	cursor: pointer;

	text-decoration: none !important;

	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		50% 82%,
		0 100%
	);

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


/* =========================================================
   CORAÇÃO DA BANDEIRINHA
   ========================================================= */

.savegame-favorito-wrap--bandeirinha
.savegame-favorito-icone {
	position: relative;

	z-index: 2;

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

	width: 28px;
	height: 28px;

	font-size: 25px;
	line-height: 1;

	transition:
		transform 0.2s ease,
		color 0.2s ease;
}


/* =========================================================
   TEXTO OCULTO
   ========================================================= */

.savegame-favorito-wrap--bandeirinha
.savegame-favorito-texto {
	position: absolute;

	width: 1px;
	height: 1px;

	margin: -1px;
	padding: 0;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);

	white-space: nowrap;

	border: 0;
}


/* =========================================================
   HOVER DA BANDEIRINHA
   ========================================================= */

.savegame-favorito-wrap--bandeirinha
.savegame-favorito-botao:hover {
	background:
		linear-gradient(
			180deg,
			#fbf9ff 0%,
			#f4efff 100%
		);

	border-color: rgba(146, 98, 250, 0.45);

	color: #8252ed;

	transform: translateY(2px);

	box-shadow:
		0 5px 14px rgba(49, 38, 77, 0.13);
}


.savegame-favorito-wrap--bandeirinha
.savegame-favorito-botao:hover
.savegame-favorito-icone {
	transform: scale(1.08);
}


/* =========================================================
   FAVORITO ATIVO
   ========================================================= */

.savegame-favorito-wrap--bandeirinha
.savegame-favorito-botao--ativo {
	background:
		linear-gradient(
			180deg,
			#9d70fa 0%,
			#8758f5 100%
		);

	border-color: #8758f5;

	color: #ffffff;

	box-shadow:
		0 7px 18px rgba(135, 88, 245, 0.24);
}


.savegame-favorito-wrap--bandeirinha
.savegame-favorito-botao--ativo:hover {
	background:
		linear-gradient(
			180deg,
			#9567f7 0%,
			#7e4dec 100%
		);

	color: #ffffff;
}


/* =========================================================
   CARREGAMENTO DA BANDEIRINHA
   ========================================================= */

.savegame-favorito-wrap--bandeirinha
.savegame-favorito-botao--carregando {
	opacity: 0.55;

	pointer-events: none;

	cursor: wait;
}


/* =========================================================
   FAVORITOS - MINHA CONTA
   ========================================================= */

.savegame-conta-favoritos {
	display: flex;
	flex-direction: column;

	gap: 18px;

	width: 100%;

	padding: 18px;

	background: #f7f7f8;

	border: 1px solid #e4e4e7;
	border-radius: 12px;
}


/* =========================================================
   CABEÇALHO DOS FAVORITOS
   ========================================================= */

.savegame-conta-favoritos-header {
	display: flex;
	align-items: flex-start;

	gap: 12px;
}


.savegame-conta-favoritos-header h3 {
	margin: 0 0 4px;

	color: #161616;

	font-size: 17px;
	line-height: 1.35;
}


.savegame-conta-favoritos-header p {
	margin: 0;

	color: #606269;

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


/* =========================================================
   LISTA DE FAVORITOS
   ========================================================= */

.savegame-favoritos-lista {
	display: flex;
	flex-direction: column;

	gap: 12px;

	width: 100%;
}


/* =========================================================
   CARD DO FAVORITO
   ========================================================= */

.savegame-favorito-card {
	display: grid;

	grid-template-columns:
		110px
		minmax(0, 1fr);

	gap: 16px;

	width: 100%;

	padding: 12px;

	background: #ffffff;

	border: 1px solid #e4e4e7;
	border-radius: 12px;
}


/* =========================================================
   IMAGEM DO CARD
   ========================================================= */

.savegame-favorito-card-imagem {
	display: block;

	width: 110px;
	height: 78px;

	overflow: hidden;

	border-radius: 8px;

	text-decoration: none !important;
}


.savegame-favorito-card-imagem img {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0 !important;

	object-fit: cover;

	border-radius: 8px;
}


/* =========================================================
   CONTEÚDO DO CARD
   ========================================================= */

.savegame-favorito-card-conteudo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	min-width: 0;
}


.savegame-favorito-card h3 {
	margin: 0 0 10px;

	font-size: 16px;
	line-height: 1.35;
}


.savegame-favorito-card h3 a {
	color: #161616 !important;

	text-decoration: none !important;
}


.savegame-favorito-card h3 a:hover {
	color: #8758f5 !important;
}


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

.savegame-favorito-card-acoes {
	display: flex;
	align-items: center;

	gap: 12px;
}


.savegame-favorito-card-abrir {
	color: #8758f5 !important;

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

	text-decoration: none !important;
}


.savegame-favorito-card-abrir:hover {
	text-decoration: underline !important;
}


.savegame-favorito-card-remover {
	display: inline-flex;
	align-items: center;

	gap: 5px;

	margin: 0;
	padding: 0;

	background: transparent;

	border: 0;

	color: #74767d;

	font-family: inherit;
	font-size: 12px;

	cursor: pointer;

	transition:
		color 0.2s ease,
		opacity 0.2s ease;
}


.savegame-favorito-card-remover:hover {
	color: #c62828;
}


.savegame-favorito-card-remover
.savegame-favorito-icone {
	font-size: 15px;
}


/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.savegame-favoritos-vazio {
	width: 100%;

	padding: 28px 20px;

	background: #ffffff;

	border: 1px dashed #d7d7dc;
	border-radius: 12px;

	text-align: center;
}


.savegame-favoritos-vazio-icone {
	display: block;

	margin-bottom: 8px;

	color: #8758f5;

	font-size: 30px;
	line-height: 1;
}


.savegame-favoritos-vazio h3 {
	margin: 0 0 6px;

	color: #161616;

	font-size: 17px;
	line-height: 1.35;
}


.savegame-favoritos-vazio p {
	margin: 0;

	color: #606269;

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


.savegame-favoritos-vazio a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-top: 14px;
	padding: 9px 15px;

	background: #8758f5;

	border-radius: 8px;

	color: #ffffff !important;

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

	text-decoration: none !important;
}


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

@media (max-width: 600px) {

	/* =====================================
	   BOTÃO PADRÃO
	===================================== */

	.savegame-favorito-botao {
		width: 100%;
	}


	/* =====================================
	   BANDEIRINHA
	===================================== */

	.savegame-favorito-wrap--bandeirinha {
		right: 14px;

		width: 42px;
		height: 58px;
	}


	.savegame-favorito-wrap--bandeirinha
	.savegame-favorito-botao {
		width: 42px;
		height: 58px;

		padding-top: 11px;
	}


	.savegame-favorito-wrap--bandeirinha
	.savegame-favorito-icone {
		width: 26px;
		height: 26px;

		font-size: 23px;
	}


	/* =====================================
	   FAVORITOS - MINHA CONTA
	===================================== */

	.savegame-conta-favoritos {
		padding: 15px;
	}


	/* =====================================
	   CARD
	===================================== */

	.savegame-favorito-card {
		grid-template-columns:
			88px
			minmax(0, 1fr);

		gap: 12px;
	}


	.savegame-favorito-card-imagem {
		width: 88px;
		height: 70px;
	}


	.savegame-favorito-card-acoes {
		align-items: flex-start;
		flex-direction: column;

		gap: 7px;
	}

}