/**
 * MindElements — camisa personalizada.
 * A prévia imita as costas da camisa: nome em cima, número grande embaixo.
 */

.mind-jersey {
	--mjs-borda: #e6e6ee;
	--mjs-texto: #1a1a22;
	--mjs-suave: #6b6b78;
	--mjs-destaque: #8b3dff;
	--mjs-previa-bg: #14141c;
	--mjs-previa-cor: #ffffff;
	--mjs-numero-tamanho: 96px;
	--mjs-nome-espaco: 6px;

	margin: 0 0 22px;
	padding: 18px;
	border: 1px solid var(--mjs-borda);
	border-radius: 14px;
}

.mind-jersey__titulo {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--mjs-texto);
}

.mind-jersey__campos {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.mind-jersey__campo {
	margin: 0;
	flex: 1 1 180px;
}

.mind-jersey__campo--numero {
	flex: 0 0 96px;
}

.mind-jersey label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mjs-texto);
}

.mind-jersey input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--mjs-borda);
	border-radius: 10px;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mind-jersey input:focus {
	border-color: var(--mjs-destaque);
	outline: 2px solid color-mix(in srgb, var(--mjs-destaque) 25%, transparent);
}

.mind-jersey__campo--numero input {
	text-align: center;
	font-weight: 700;
}

.mind-jersey__contador {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--mjs-suave);
}

.mind-jersey__contador.is-cheio {
	color: var(--mjs-destaque);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Prévia — só aparece quando há algo para mostrar, senão fica um retângulo
 * preto vazio ocupando a página.
 * ----------------------------------------------------------------------- */
.mind-jersey__previa {
	display: none;
	margin-top: 16px;
	padding: 22px 16px;
	border-radius: 12px;
	background: var(--mjs-previa-bg);
	color: var(--mjs-previa-cor);
	text-align: center;
}

.mind-jersey.tem-conteudo .mind-jersey__previa {
	display: block;
}

.mind-jersey__previa-nome {
	display: block;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: var(--mjs-nome-espaco);
	text-transform: uppercase;
	word-break: break-word;
}

.mind-jersey__previa-numero {
	display: block;
	margin-top: 6px;
	font-size: var(--mjs-numero-tamanho);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 2px;
}

.mind-jersey__preco {
	margin: 12px 0 0;
	font-size: 13.5px;
	color: var(--mjs-suave);
}

.mind-jersey__preco .amount {
	color: var(--mjs-texto);
	font-weight: 700;
}

@media (max-width: 480px) {
	.mind-jersey {
		--mjs-numero-tamanho: 72px;
	}
}