/* ===========================================================================
   c-loja - loja de moedas da Loja Especial

   So tokens do base.css: nenhuma cor, espaco ou raio literal aqui. Breakpoints
   apenas 480/640/768/900/1024, max-width, desktop-first -- a regra esta
   comentada no topo do base.css.
   =========================================================================== */

.c-loja { padding-top: var(--e-4); }

/* ------------------------------------------------- respiro entre as faixas --
   `.faixa` e global e vale 9rem (144px) em CIMA e EMBAIXO. Entre duas faixas
   seguidas isso vira 288px de preto -- numa pagina de secoes independentes faz
   sentido, mas a loja e UM fluxo so: chamada, pacote, selos, termos. Medido
   antes: 288px de nada entre o titulo e o cartao, e o jogador tinha de rolar
   para descobrir que havia algo a comprar.

   Nao mexo no `.faixa` global: a regra fica presa a `.c-loja`. */
.c-loja > .faixa { padding-block: var(--e-5); }

.c-loja > .faixa:first-child { padding-bottom: var(--e-3); }

/* A faixa do pacote cola na chamada: as duas sao a mesma ideia. */
.c-loja > .faixa:first-child + .faixa { padding-top: 0; }

/* O recibo so existe depois de pagar; escondido ele nao pode deixar respiro. */
.c-loja__reciboFaixa[hidden] { display: none; }

/* ------------------------------------------------------------------ topo */

/* A moeda do jogo atras do titulo, grande e de canto. Nao e enfeite: a pagina
   abria com texto solto sobre preto e nao parecia loja de nada. A arte ja
   existia (assets/loja/moeda.webp, gerada do money@2x.tga do cliente) e so
   estava sendo usada em 96px dentro do cartao. */
.c-loja > .faixa:first-child {
	position: relative;
	overflow: hidden;
}

.c-loja > .faixa:first-child::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--e-4) * -1);
	width: min(38vw, 30rem);
	aspect-ratio: 1;
	transform: translateY(-50%);
	background: url("/assets/loja/moeda.webp") no-repeat center / contain;
	opacity: .1;
	filter: blur(1px);
	pointer-events: none;
}

/* Abaixo de 900px a moeda sai: ali ela fica ATRAS do texto em vez de ao lado,
   e fundo atras de paragrafo custa legibilidade sem dar nada em troca. */
@media (max-width: 900px) {
	.c-loja > .faixa:first-child::before { display: none; }
}

.c-loja__topo {
	position: relative;
	max-width: 720px;
}

.c-loja__saldo {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	margin-top: var(--e-2);
	padding: var(--e-1) var(--e-2);
	border: 1px solid var(--linha-forte);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ouro-claro);
	font-variant-numeric: tabular-nums;
}

/* A moeda do jogo, desenhada em CSS: um PNG de 16px so para isto seria uma
   requisicao a mais para um circulo. */
.c-loja__saldoIcone {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--ouro-claro), var(--ouro) 55%,
	                            var(--ouro-escuro));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
	flex: none;
}

/* ----------------------------------------------------------------- avisos */
.c-loja__aviso,
.c-loja__divida {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.c-loja__divida { border-color: var(--brasa); }

.c-loja__avisoTitulo {
	margin: var(--e-1) 0 var(--e-2);
	font-size: 1.25rem;
	color: var(--ink);
}

/* ---------------------------------------------------------------- pacotes */
.c-loja__grade {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* auto-fit + minmax: com um pacote so ele nao estica pela largura toda
	   (o max-width abaixo segura), e com quatro a grade se ajeita sozinha. */
	grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
	justify-content: center;
	gap: var(--e-3);
}

.c-loja__pacote {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--e-2);
	transition: border-color var(--transicao), transform var(--transicao);
}

.c-loja__pacote:hover { border-color: var(--ouro-escuro); }

.c-loja__compra {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-2);
	width: 100%;
}

.c-loja__arte {
	width: 100%;
	border-radius: var(--raio-sm);
	overflow: hidden;
	background: var(--bg-alt);
}

.c-loja__arte img {
	display: block;
	width: 100%;
	height: auto;
}

/* ====================================================== UM PACOTE SO =======
   Hoje o catalogo tem um pacote (db/001_loja.sql). Desenhado como celula de
   grade, ele ficava com 340px no meio de uma pagina de 1425: um cartao
   pequeno e sozinho num deserto preto, com o preco do tamanho de um subtitulo.

   Com UM filho a grade vira VITRINE: a arte ocupa um lado inteiro e a compra
   (quantidade, preco, botao) o outro. `:only-child` faz isso sem markup novo e
   sem `:has()` -- e no dia em que entrar um segundo pacote a regra para de
   valer sozinha e a grade volta, sem ninguem lembrar de desfazer nada. */
@media (min-width: 768px) {
	.c-loja__grade:has(> .c-loja__pacote:only-child) {
		grid-template-columns: minmax(0, 1fr);
		max-width: 56rem;
		margin-inline: auto;
	}

	.c-loja__pacote:only-child {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--e-4);
		text-align: left;
		padding: var(--e-3);
	}

	.c-loja__pacote:only-child .c-loja__compra {
		align-items: flex-start;
		text-align: left;
		gap: var(--e-2);
	}

	.c-loja__pacote:only-child .c-loja__preco { font-size: 3.4rem; }

	.c-loja__pacote:only-child .c-loja__pacoteTitulo { font-size: 1.6rem; }
}

/* `:has()` nao chega em todo navegador. Sem ele a grade segue como era (uma
   coluna de 340px centrada), que e o estado antigo -- feio, mas inteiro. O
   cartao em si ja melhora pelo `:only-child`, que e suportado em tudo. */
@supports not selector(:has(*)) {
	@media (min-width: 768px) {
		.c-loja__pacote:only-child { max-width: 52rem; }
	}
}

/* O monte de ouro com a luz que ele tem no jogo. A arte vem com fundo escuro
   proprio; a sombra dourada aqui e o que a tira de "imagem colada no cartao". */
.c-loja__pacote:only-child .c-loja__arte {
	position: relative;
	border: 1px solid var(--linha);
}

.c-loja__pacote:only-child .c-loja__arte::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 var(--e-5) rgba(217, 180, 90, .14);
	pointer-events: none;
}

.c-loja__pacoteTitulo {
	margin: 0;
	font-size: 1.35rem;
	color: var(--ink);
}

.c-loja__preco {
	margin: 0;
	font-size: 2.1rem;
	line-height: 1;
	font-weight: 700;
	color: var(--ouro);
	font-variant-numeric: tabular-nums;
}

.c-loja__precoMoeda {
	font-size: .9rem;
	font-weight: 500;
	color: var(--ink-2);
	margin-right: .25em;
	vertical-align: .55em;
}

/* O SDK do PayPal desenha o botao dentro deste div; a altura minima evita a
   pagina pular quando ele termina de carregar. */
.c-loja__botao {
	width: 100%;
	min-height: 52px;
}

.c-loja__estado {
	margin: 0;
	min-height: 1.2em;
	font-size: .9rem;
	color: var(--ink-2);
}

.c-loja__estado--ok    { color: var(--ouro-claro); }
.c-loja__estado--erro  { color: var(--brasa); }
.c-loja__estado--aviso { color: var(--ouro); }

.c-loja__nota {
	margin: 0;
	font-size: .85rem;
	color: var(--ink-3);
}

.c-loja__notaPreco {
	max-width: 620px;
	margin: var(--e-3) auto 0;
	text-align: center;
}

.c-loja__notaPagamento {
	margin-top: var(--e-1);
	max-width: 30ch;
}

/* ------------------------------------------------------------------ selos --
   As tres duvidas de quem esta com o cartao na mao. Ficavam na lista de termos
   la embaixo, ou seja, so eram lidas DEPOIS de decidir. */
.c-loja__selos {
	list-style: none;
	margin: var(--e-4) auto 0;
	padding: var(--e-3) 0 0;
	max-width: 56rem;
	border-top: 1px solid var(--linha);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--e-3);
}

.c-loja__selo {
	display: flex;
	align-items: flex-start;
	gap: var(--e-2);
}

.c-loja__seloTitulo {
	margin: 0 0 .15rem;
	color: var(--ink);
	font-weight: 600;
	font-size: .98rem;
}

.c-loja__seloTexto {
	margin: 0;
	color: var(--ink-3);
	font-size: .88rem;
	line-height: 1.5;
}

/* Os tres icones sao CSS, nao arquivo: sao formas simples (ponteiro, duas
   fichas, escudo) e tres requisicoes a mais numa pagina de pagamento custam
   mais do que valem. Mesma escolha do .c-loja__saldoIcone, que ja era assim. */
.c-loja__seloIcone {
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid var(--linha-forte);
	background: var(--surface);
	position: relative;
}

.c-loja__seloIcone::before,
.c-loja__seloIcone::after {
	content: "";
	position: absolute;
	background: var(--ouro);
}

/* relogio: dois ponteiros saindo do centro */
.c-loja__seloIcone--relogio::before {
	inset: 25% auto auto 50%;
	width: 1.5px;
	height: 28%;
	transform: translateX(-50%);
	border-radius: 1px;
}

.c-loja__seloIcone--relogio::after {
	inset: 50% auto auto 50%;
	width: 24%;
	height: 1.5px;
	transform-origin: 0 50%;
	transform: rotate(18deg);
	border-radius: 1px;
}

/* conta: duas fichas sobrepostas, como o saldo */
.c-loja__seloIcone--conta::before {
	inset: 30% auto auto 26%;
	width: 36%;
	height: 36%;
	border-radius: 50%;
	background: var(--ouro-escuro);
}

.c-loja__seloIcone--conta::after {
	inset: 36% auto auto 40%;
	width: 36%;
	height: 36%;
	border-radius: 50%;
	background: var(--ouro);
}

/* escudo: um losango de cantos arredondados, ponta para baixo */
.c-loja__seloIcone--escudo::before {
	inset: 26% auto auto 50%;
	width: 42%;
	height: 42%;
	transform: translateX(-50%) rotate(45deg);
	border-radius: 2px 2px 4px 2px;
	background: var(--ouro);
}

.c-loja__seloIcone--escudo::after { display: none; }

/* ----------------------------------------------------------------- recibo */
.c-loja__recibo {
	max-width: 520px;
	margin-inline: auto;
	text-align: center;
	border-color: var(--ouro-escuro);
}

.c-loja__reciboTitulo {
	margin: 0 0 var(--e-2);
	font-size: 1.4rem;
	color: var(--ouro-claro);
}

.c-loja__reciboMoedas {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.c-loja__reciboPedido,
.c-loja__reciboQuando {
	margin: var(--e-1) 0 0;
	color: var(--ink-2);
	font-size: .92rem;
}

.c-loja__recibo .btn { margin-top: var(--e-3); }

/* ----------------------------------------------------------------- termos */
/* Duas colunas a partir de 900px: seis itens em coluna unica de 760px viravam
   um paragrafo longo que ninguem le, e e justamente aqui que esta a regra de
   reembolso. */
.c-loja__termos { max-width: 72rem; }

.c-loja__termosTitulo {
	font-size: 1.1rem;
	color: var(--ink-2);
	margin: 0 0 var(--e-2);
}

.c-loja__termosLista {
	margin: 0;
	padding-left: 1.1em;
	color: var(--ink-3);
	font-size: .9rem;
	line-height: 1.6;
}

.c-loja__termosLista li + li { margin-top: var(--e-1); }

@media (min-width: 900px) {
	.c-loja__termosLista {
		columns: 2;
		column-gap: var(--e-4);
	}

	.c-loja__termosLista li {
		break-inside: avoid;
		margin-top: 0;
	}

	.c-loja__termosLista li + li { margin-top: var(--e-2); }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 640px) {
	.c-loja__grade { grid-template-columns: minmax(0, 1fr); }
	.c-loja__preco { font-size: 2.4rem; }
	.c-loja__reciboMoedas { font-size: 1.6rem; }
	.c-loja__selos { gap: var(--e-2); }
	.c-loja__notaPagamento { max-width: none; }
}

/* Quem pediu menos movimento nao precisa do scroll animado nem do hover. */
@media (prefers-reduced-motion: reduce) {
	.c-loja__pacote { transition: none; }
}