/* Matchii Quiz — cores do design-system.json (docs/design-system.json).
   Único arquivo de marca do plugin, junto com data/perguntas.json. */

.wcaq-quiz {
	--wcaq-primaria: #B0701E;
	--wcaq-primaria-hover: #955C16;
	--wcaq-on-primaria: #FFFFFF;
	--wcaq-superficie: #F7F2E9;
	--wcaq-fundo: #EDE6DB;
	--wcaq-borda: #DACFBE;
	--wcaq-texto-forte: #2B2016;
	--wcaq-texto-corpo: #4A3D2E;
	--wcaq-texto-sutil: #7A6B58;

	max-width: 560px;
	margin: 0 auto;
	font-family: "Inter", Arial, Helvetica, sans-serif;
	color: var(--wcaq-texto-corpo);
}

.wcaq-card {
	/* Branco (nao a superficie #F7F2E9): o card e o unico objeto da pagina,
	   sentado direto sobre o fundo #EDE6DB — as duas cremes ficavam quase
	   iguais e o card lia como uma caixa solta, sem separacao nenhuma da
	   secao. Sombra de resistencia (nao so no hover, como o card de produto)
	   e o que da o "elevado" que a home usa em todo cartao. */
	background: #FFFFFF;
	border: 1px solid var(--wcaq-borda);
	border-radius: 20px;
	box-shadow: 0 10px 32px rgba(43, 32, 22, .08);
	padding: 36px 32px;
}

.wcaq-card--intro {
	text-align: center;
}

.wcaq-titulo {
	font-family: "Fraunces", Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	color: var(--wcaq-texto-forte);
	margin: 0 0 10px;
	letter-spacing: -0.4px;
}

.wcaq-intro {
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 24px;
}

.wcaq-pergunta {
	font-family: "Fraunces", Georgia, serif;
	font-size: 21px;
	font-weight: 600;
	color: var(--wcaq-texto-forte);
	margin: 18px 0 20px;
	letter-spacing: -0.2px;
}

.wcaq-progresso {
	display: flex;
	gap: 6px;
}

.wcaq-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--wcaq-borda);
}

.wcaq-dot--ativo {
	background: var(--wcaq-primaria);
}

.wcaq-opcoes {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wcaq-opcao {
	text-align: left;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	/* O tema (Woodmart) capitaliza cada palavra de <button> por padrão — aqui
	   o texto é frase de verdade ("Cítrico e vivo"), não rótulo de botão. */
	text-transform: none;
	color: var(--wcaq-texto-forte);
	/* Mesma razao do .wcaq-produto: o card virou branco, entao a opcao
	   precisa da superficie (creme) pra continuar visivel como botao. */
	background: var(--wcaq-superficie);
	border: 1px solid var(--wcaq-borda);
	border-radius: 14px;
	padding: 14px 18px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}

.wcaq-opcao:hover {
	border-color: var(--wcaq-primaria);
	background: #FFF9F0;
}

.wcaq-opcao--selecionada {
	border-color: var(--wcaq-primaria);
	background: #FFF9F0;
}

.wcaq-btn {
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	text-transform: none;
	border-radius: 999px;
	padding: 14px 28px;
	border: none;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
}

.wcaq-btn--primario {
	background: var(--wcaq-primaria);
	color: var(--wcaq-on-primaria);
}

.wcaq-btn--primario:hover {
	background: var(--wcaq-primaria-hover);
}

.wcaq-btn--texto {
	background: transparent;
	color: var(--wcaq-texto-sutil);
	padding: 14px 0;
	margin-top: 8px;
}

.wcaq-btn--texto:hover {
	color: var(--wcaq-primaria);
}

.wcaq-card--carregando {
	text-align: center;
	color: var(--wcaq-texto-sutil);
}

.wcaq-layering {
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-size: 16px;
	color: var(--wcaq-texto-sutil);
	border-left: 2px solid var(--wcaq-primaria);
	padding-left: 16px;
	margin: 0 0 20px;
}

.wcaq-resultado-grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin: 8px 0 22px;
}

.wcaq-produto {
	display: block;
	text-decoration: none;
	color: inherit;
	/* O card externo agora e branco; o produto fica na superficie (creme)
	   pra continuar se destacando do fundo em vez de somar com ele. */
	background: var(--wcaq-superficie);
	border: 1px solid var(--wcaq-borda);
	border-radius: 14px;
	overflow: hidden;
	transition: box-shadow .3s ease, transform .3s ease;
}

.wcaq-produto:hover {
	box-shadow: 0 14px 32px rgba(43, 32, 22, .12);
	transform: translateY(-3px);
}

.wcaq-produto-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.wcaq-produto-nome {
	font-size: 14px;
	font-weight: 600;
	color: var(--wcaq-texto-forte);
	padding: 12px 14px 2px;
}

.wcaq-produto-preco {
	font-size: 14px;
	font-weight: 600;
	color: var(--wcaq-primaria);
	padding: 0 14px 14px;
}

/* Kit sugerido: mesma peça de produto, prioridade visual menor — título
   pequeno e neutro (não repete o serifado do título principal), grade sem a
   margem inferior grande, cartão levemente reduzido. */
.wcaq-kit-titulo {
	font-size: 13px;
	font-weight: 600;
	color: var(--wcaq-texto-sutil);
	margin: 4px 0 10px;
}

.wcaq-resultado-grade--kit {
	margin-bottom: 14px;
	max-width: 200px;
}

.wcaq-produto--kit .wcaq-produto-nome {
	font-size: 13px;
}

.wcaq-produto--kit .wcaq-produto-preco {
	font-size: 13px;
}

@media (max-width: 600px) {
	.wcaq-card {
		padding: 28px 22px;
		border-radius: 16px;
	}
}