/**
 * Monetix — Quiz Reward
 * Usado no front e na pré-visualização do bloco no editor.
 *
 * Cores: --mtx-primary/--mtx-secondary (respondido, verde), --mtx-accent
 * (pendente e desbloqueio, dourado). Os tons derivados saem por color-mix,
 * com valores fixos como reserva para navegadores sem suporte.
 */

/* =========================================================
   Base e paleta
========================================================= */
.mtx-quiz {
	--mtx-primary: #16a34a;
	--mtx-secondary: #22c55e;
	--mtx-title: #1f2937;
	--mtx-text: #4b5563;
	--mtx-accent: #f5c518;
	--mtx-cta-text: #1f2937;
	--mtx-muted: #9ca3af;
	--mtx-line: #e8eaf0;

	/* Derivados (reserva para o dourado e o verde padrão). */
	--mtx-accent-bg: #fefaea;
	--mtx-accent-line: #f7e3a1;
	--mtx-accent-soft: rgba(245, 197, 24, 0.45);
	--mtx-accent-ink: #8a6a09;
	--mtx-accent-strong: #d6a30b;
	--mtx-primary-bg: #eaf7ef;
	--mtx-primary-line: #a8ddbc;

	position: relative;
	box-sizing: border-box;
	max-width: 560px;
	margin: 28px auto;
	padding: 0 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

@supports (color: color-mix(in srgb, red 50%, white)) {
	.mtx-quiz {
		--mtx-accent-bg: color-mix(in srgb, var(--mtx-accent) 13%, #fff);
		--mtx-accent-line: color-mix(in srgb, var(--mtx-accent) 45%, #fff);
		--mtx-accent-soft: color-mix(in srgb, var(--mtx-accent) 45%, transparent);
		--mtx-accent-ink: color-mix(in srgb, var(--mtx-accent) 55%, #4a3800);
		--mtx-accent-strong: color-mix(in srgb, var(--mtx-accent) 82%, #6b4e00);
		--mtx-primary-bg: color-mix(in srgb, var(--mtx-primary) 10%, #fff);
		--mtx-primary-line: color-mix(in srgb, var(--mtx-primary) 35%, #fff);
	}
}

.mtx-quiz *,
.mtx-quiz *::before,
.mtx-quiz *::after {
	box-sizing: border-box;
}

/* Alguns temas sobrescrevem display em divs; garante o hidden dos painéis. */
.mtx-quiz [hidden] {
	display: none !important;
}

/* Brilho por trás do card. */
.mtx-quiz__aura {
	position: absolute;
	inset: 10px 24px;
	z-index: 0;
	border-radius: 26px;
	background: linear-gradient(120deg, var(--mtx-primary), var(--mtx-accent));
	filter: blur(26px);
	opacity: 0.16;
	pointer-events: none;
	animation: mtx-aura 4.5s ease-in-out infinite;
}

@keyframes mtx-aura {
	0%, 100% { opacity: 0.1;  transform: scale(0.99); }
	50%      { opacity: 0.22; transform: scale(1.01); }
}

.mtx-quiz__card {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 26px 22px;
	background: #ffffff;
	border: 1px solid rgba(17, 24, 39, 0.07);
	border-radius: 22px;
	box-shadow: 0 18px 46px -16px rgba(17, 24, 39, 0.22), 0 3px 12px rgba(17, 24, 39, 0.04);
	animation: mtx-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mtx-enter {
	from { opacity: 0; transform: translateY(16px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   Cabeçalho
========================================================= */
.mtx-quiz__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.3px;
	text-align: center;
	color: var(--mtx-title);
}

.mtx-quiz__subtitle {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.5;
	text-align: center;
	color: var(--mtx-muted);
}

/* =========================================================
   Trilha de progresso
========================================================= */
.mtx-quiz__steps {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 0 2px;
}

.mtx-quiz__dots {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
}

.mtx-quiz__dot {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	/* Pendente: dourado claro com anel, em vez do cinza morto. */
	background: var(--mtx-accent-bg);
	box-shadow: inset 0 0 0 2px var(--mtx-accent-line);
	color: #ffffff;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

.mtx-quiz__dot svg {
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.mtx-quiz__dot.is-done {
	background: var(--mtx-primary);
	box-shadow: 0 3px 8px -3px var(--mtx-primary);
}

.mtx-quiz__dot.is-done svg {
	opacity: 1;
	transform: scale(1);
}

.mtx-quiz__bar {
	flex: 1 1 auto;
	height: 3px;
	min-width: 12px;
	background: var(--mtx-accent-line);
	border-radius: 999px;
	transition: background 0.3s ease;
}

.mtx-quiz__bar.is-done {
	background: var(--mtx-primary);
}

.mtx-quiz__status {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--mtx-accent-ink);
	transition: color 0.25s ease;
}

.mtx-quiz__status.is-complete {
	color: var(--mtx-primary);
}

/* =========================================================
   Perguntas
========================================================= */
.mtx-quiz__fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mtx-quiz__field {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	/* Pendente: fundo levemente dourado, para o cartão não ficar apagado. */
	background: linear-gradient(180deg, var(--mtx-accent-bg), #ffffff 70%);
	border: 1px solid var(--mtx-accent-line);
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(17, 24, 39, 0.04);
	transition: background 0.25s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mtx-quiz__field.is-answered {
	background: linear-gradient(180deg, var(--mtx-primary-bg), #ffffff 70%);
	border-color: var(--mtx-primary-line);
	box-shadow: 0 3px 10px -4px var(--mtx-primary);
}

.mtx-quiz__number {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	color: var(--mtx-cta-text);
	background: var(--mtx-accent);
	border-radius: 50%;
	box-shadow: 0 3px 8px -3px var(--mtx-accent-soft);
	transition: background 0.25s ease, color 0.25s ease;
}

.mtx-quiz__field.is-answered .mtx-quiz__number {
	color: #ffffff;
	background: var(--mtx-primary);
	box-shadow: 0 3px 8px -3px var(--mtx-primary);
}

.mtx-quiz__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--mtx-accent-ink);
	background: var(--mtx-accent-bg);
	border: 1px solid var(--mtx-accent-line);
	border-radius: 10px;
	transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.mtx-quiz__icon svg {
	width: 20px;
	height: 20px;
}

.mtx-quiz__field.is-answered .mtx-quiz__icon {
	color: var(--mtx-primary);
	background: var(--mtx-primary-bg);
	border-color: var(--mtx-primary-line);
}

.mtx-quiz__body {
	flex: 1 1 auto;
	min-width: 0;
}

.mtx-quiz__label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mtx-title);
}

/* Select */
.mtx-quiz__select-wrap {
	position: relative;
	margin-top: 8px;
}

.mtx-quiz__select {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 11px 40px 11px 13px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mtx-text);
	background: #ffffff;
	border: 1.5px solid var(--mtx-accent-line);
	border-radius: 11px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mtx-quiz__select:hover {
	border-color: var(--mtx-accent);
}

.mtx-quiz__select:focus {
	outline: none;
	border-color: var(--mtx-accent);
	box-shadow: 0 0 0 3.5px var(--mtx-accent-soft);
}

/* Seta do select (o nativo some com appearance:none). */
.mtx-quiz__chevron {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--mtx-accent-ink);
	border-bottom: 2px solid var(--mtx-accent-ink);
	transform: rotate(45deg);
	pointer-events: none;
}

/* Resposta escolhida */
.mtx-quiz__answer {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 3px 0 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mtx-primary);
	animation: mtx-fade 0.3s ease;
}

.mtx-quiz__answer-check {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	color: #ffffff;
	background: var(--mtx-primary);
	border-radius: 50%;
}

.mtx-quiz__answer-check svg {
	width: 10px;
	height: 10px;
}

@keyframes mtx-fade {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Botão de editar */
.mtx-quiz__edit {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--mtx-primary);
	background: #ffffff;
	border: 1px solid var(--mtx-primary-line);
	border-radius: 10px;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.mtx-quiz__edit:hover {
	color: #ffffff;
	background: var(--mtx-primary);
	border-color: var(--mtx-primary);
}

/* =========================================================
   Painel de desbloqueio
========================================================= */
.mtx-quiz__reveal {
	position: relative;
	margin-top: 38px;
	padding: 34px 20px 20px;
	text-align: center;
	background: var(--mtx-accent-bg);
	border: 1px solid var(--mtx-accent-line);
	border-radius: 18px;
}

.mtx-quiz__reveal.is-visible {
	animation: mtx-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mtx-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Cadeado com brilhos, encaixado na borda de cima do painel. */
.mtx-quiz__lock {
	position: absolute;
	top: 0;
	left: 50%;
	width: 88px;
	height: 52px;
	transform: translate(-50%, -50%);
	color: var(--mtx-accent);
	pointer-events: none;
}

.mtx-quiz__lock-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	color: var(--mtx-cta-text);
	background: var(--mtx-accent);
	background: linear-gradient(150deg, var(--mtx-accent), color-mix(in srgb, var(--mtx-accent) 72%, #fff));
	border: 3px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 8px 18px -8px var(--mtx-accent);
	transform: translate(-50%, -50%);
}

.mtx-quiz__spark {
	position: absolute;
	animation: mtx-twinkle 2.4s ease-in-out infinite;
}

.mtx-quiz__spark--a { top: 2px;  left: 6px; }
.mtx-quiz__spark--b { top: 12px; right: 4px; animation-delay: 0.5s; }
.mtx-quiz__spark--c { bottom: 4px; left: 14px; animation-delay: 1.1s; }

@keyframes mtx-twinkle {
	0%, 100% { opacity: 0.35; transform: scale(0.8); }
	50%      { opacity: 1;    transform: scale(1.15); }
}

.mtx-quiz__reveal-title {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.3px;
	color: var(--mtx-title);
}

/* Trecho marcado com *asteriscos* no editor. */
.mtx-quiz__hl {
	color: var(--mtx-accent-strong);
}

.mtx-quiz__reveal-text {
	max-width: 400px;
	margin: 0 auto 18px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--mtx-title);
}

.mtx-quiz__reveal-lock {
	display: inline-flex;
	vertical-align: -3px;
	margin-right: 6px;
	color: var(--mtx-accent-ink);
}

/* =========================================================
   CTA
========================================================= */
.mtx-quiz__cta,
.mtx-quiz__cta:hover,
.mtx-quiz__cta:focus,
.mtx-quiz__cta:active,
.mtx-quiz__cta:visited {
	position: relative;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 11px !important;
	overflow: hidden;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 17px 20px !important;
	font-family: inherit;
	font-size: 16.5px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	text-align: center !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: 0.2px;
	color: var(--mtx-cta-text) !important;
	text-shadow: none;
	background: var(--mtx-accent) !important;
	border: none !important;
	border-radius: 13px !important;
	cursor: pointer;
	animation: mtx-pulse 1.7s ease-in-out infinite;
}

.mtx-quiz__cta:hover {
	filter: brightness(1.05);
}

.mtx-quiz__cta:active {
	transform: scale(0.99);
}

/* Pulsação: o botão respira e solta um anel na cor de destaque. */
@keyframes mtx-pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 8px 18px -10px rgba(17, 24, 39, 0.55), 0 0 0 0 var(--mtx-accent-soft);
	}
	55% {
		transform: scale(1.04);
		box-shadow: 0 20px 34px -12px rgba(17, 24, 39, 0.5), 0 0 0 16px transparent;
	}
	100% {
		transform: scale(1);
		box-shadow: 0 8px 18px -10px rgba(17, 24, 39, 0.55), 0 0 0 0 transparent;
	}
}

.mtx-quiz__cta-label,
.mtx-quiz__cta-icon {
	position: relative;
	z-index: 1;
}

.mtx-quiz__cta-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

.mtx-quiz__play-bg {
	fill: var(--mtx-cta-text);
}

.mtx-quiz__play-tri {
	fill: var(--mtx-accent);
}

/* Brilho passando por cima do botão. */
.mtx-quiz__cta-shine {
	position: absolute;
	top: 0;
	left: -120%;
	width: 55%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	animation: mtx-shine 3.2s infinite;
}

@keyframes mtx-shine {
	0%        { left: -120%; }
	55%, 100% { left: 130%; }
}

/* Estado "carregando o anúncio". */
.mtx-quiz__cta.is-loading {
	cursor: progress;
	opacity: 0.9;
	animation: none;
	pointer-events: none;
}

.mtx-quiz__cta.is-loading .mtx-quiz__cta-shine {
	display: none;
}

.mtx-quiz__cta.is-loading .mtx-quiz__cta-icon {
	width: 22px;
	height: 22px;
	border: 2.5px solid rgba(31, 41, 55, 0.25);
	border-top-color: var(--mtx-cta-text);
	border-radius: 50%;
	animation: mtx-spin 0.8s linear infinite;
}

.mtx-quiz__cta.is-loading .mtx-quiz__cta-icon svg {
	display: none;
}

@keyframes mtx-spin {
	to { transform: rotate(360deg); }
}

.mtx-quiz__footnote {
	margin: 13px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mtx-muted);
}

.mtx-quiz__error {
	margin: 12px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #c0392b;
}

/* =========================================================
   Responsivo e acessibilidade
========================================================= */
@media (max-width: 480px) {
	.mtx-quiz {
		margin: 18px auto;
		padding: 0 10px;
	}

	.mtx-quiz__card {
		padding: 20px 14px;
		border-radius: 18px;
	}

	.mtx-quiz__title {
		font-size: 19px;
	}

	.mtx-quiz__field {
		gap: 10px;
		padding: 12px;
	}

	.mtx-quiz__icon {
		display: none;
	}

	.mtx-quiz__label {
		font-size: 14.5px;
	}

	.mtx-quiz__select {
		font-size: 15px;
	}

	.mtx-quiz__reveal {
		padding: 32px 14px 18px;
	}

	.mtx-quiz__reveal-title {
		font-size: 18.5px;
	}

	.mtx-quiz__cta {
		padding: 16px !important;
		font-size: 15px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtx-quiz *,
	.mtx-quiz *::before,
	.mtx-quiz *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* =========================================================
   Só no editor
   A classe abaixo não existe no site: é o invólucro da
   pré-visualização do bloco.
========================================================= */

/*
 * O quiz renderizado é apenas visual dentro do editor. Sem isto, o clique
 * cai no <select> ou no link e o WordPress não consegue selecionar o bloco.
 */
.mtx-quiz-editor-preview > * {
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Área clicável mínima, mesmo enquanto a pré-visualização carrega. */
.mtx-quiz-editor-preview {
	position: relative;
	min-height: 60px;
}