/*
 * Enquete por Etapas: estilos do front.
 * Tudo é controlado por variáveis; cada tema (.eqe-theme-*) só troca os valores.
 * Tamanhos em em, relativos a --eqe-size (definido por enquete no admin).
 */
.eqe-poll {
	--eqe-accent: #e4572e;
	--eqe-bg: #fff;
	--eqe-text: #1d1d1f;
	--eqe-muted: #6b6b70;
	--eqe-border: #e2e2e6;
	--eqe-soft: #f4f4f6;
	--eqe-hover-border: var(--eqe-accent);
	--eqe-sel-bg: var(--eqe-bg);
	--eqe-sel-text: var(--eqe-text);
	--eqe-sel-border: var(--eqe-accent);
	--eqe-btn-bg: var(--eqe-accent);
	--eqe-btn-text: #fff;
	--eqe-track: var(--eqe-soft);
	--eqe-bar: #b9b9c0;
	--eqe-bar-mine: var(--eqe-accent);
	--eqe-kicker-bg: transparent;
	--eqe-kicker-text: var(--eqe-accent);
	--eqe-kicker-pad: 0;
	--eqe-step-off: #DCDCE1;
	--eqe-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	--eqe-radius: 12px;
	margin: 2em 0;
	color: var(--eqe-text);
	font-size: var(--eqe-size, 15px);
	line-height: 1.45;
	text-align: left;
}
.eqe-poll *, .eqe-poll *::before, .eqe-poll *::after { box-sizing: border-box; }
.eqe-poll[hidden], .eqe-poll [hidden] { display: none !important; }

/* ---------- Temas (paleta 0B0C0C · 2A2E34 · E9EAEC · FBE134 · E4B61A) ---------- */

.eqe-poll.eqe-theme-noite {
	--eqe-step-off: #2A2E34;
	--eqe-bg: #0B0C0C; --eqe-text: #E9EAEC; --eqe-muted: #A3A8AF; --eqe-border: #2A2E34; --eqe-soft: #2A2E34;
	--eqe-accent: #FBE134; --eqe-hover-border: #FBE134;
	--eqe-sel-bg: #FBE134; --eqe-sel-text: #0B0C0C; --eqe-sel-border: #FBE134;
	--eqe-btn-bg: #FBE134; --eqe-btn-text: #0B0C0C;
	--eqe-track: #2A2E34; --eqe-bar: #5E646D; --eqe-bar-mine: #FBE134;
	--eqe-kicker-text: #FBE134; --eqe-shadow: none;
}
.eqe-poll.eqe-theme-grafite {
	--eqe-step-off: #1A1D21;
	--eqe-bg: #2A2E34; --eqe-text: #E9EAEC; --eqe-muted: #B7BBC1; --eqe-border: #3A3F47; --eqe-soft: #1A1D21;
	--eqe-accent: #E4B61A; --eqe-hover-border: #E4B61A;
	--eqe-sel-bg: #E4B61A; --eqe-sel-text: #0B0C0C; --eqe-sel-border: #E4B61A;
	--eqe-btn-bg: #E4B61A; --eqe-btn-text: #0B0C0C;
	--eqe-track: #1A1D21; --eqe-bar: #6B717B; --eqe-bar-mine: #E4B61A;
	--eqe-kicker-text: #E4B61A; --eqe-shadow: none;
}
.eqe-poll.eqe-theme-claro {
	--eqe-step-off: #D5D7DB;
	--eqe-bg: #FFFFFF; --eqe-text: #0B0C0C; --eqe-muted: #52575E; --eqe-border: #E9EAEC; --eqe-soft: #E9EAEC;
	--eqe-accent: #E4B61A; --eqe-hover-border: #2A2E34;
	--eqe-sel-bg: #FBE134; --eqe-sel-text: #0B0C0C; --eqe-sel-border: #E4B61A;
	--eqe-btn-bg: #0B0C0C; --eqe-btn-text: #FBE134;
	--eqe-track: #E9EAEC; --eqe-bar: #B5B9BF; --eqe-bar-mine: #E4B61A;
	--eqe-kicker-bg: #FBE134; --eqe-kicker-text: #0B0C0C; --eqe-kicker-pad: .25em .6em;
}
.eqe-poll.eqe-theme-nevoa {
	--eqe-step-off: #FFFFFF;
	--eqe-bg: #E9EAEC; --eqe-text: #0B0C0C; --eqe-muted: #4A4F56; --eqe-border: #D5D7DB; --eqe-soft: #FFFFFF;
	--eqe-accent: #2A2E34; --eqe-hover-border: #2A2E34;
	--eqe-sel-bg: #2A2E34; --eqe-sel-text: #FBE134; --eqe-sel-border: #2A2E34;
	--eqe-btn-bg: #2A2E34; --eqe-btn-text: #FBE134;
	--eqe-track: #FFFFFF; --eqe-bar: #B5B9BF; --eqe-bar-mine: #2A2E34;
	--eqe-kicker-bg: #0B0C0C; --eqe-kicker-text: #FBE134; --eqe-kicker-pad: .25em .6em;
	--eqe-shadow: none;
}
.eqe-poll.eqe-theme-amarelo {
	--eqe-step-off: rgba(11, 12, 12, .15);
	--eqe-bg: #FBE134; --eqe-text: #0B0C0C; --eqe-muted: #2A2E34; --eqe-border: #E4B61A; --eqe-soft: rgba(255, 255, 255, .55);
	--eqe-accent: #0B0C0C; --eqe-hover-border: #0B0C0C;
	--eqe-sel-bg: #0B0C0C; --eqe-sel-text: #FBE134; --eqe-sel-border: #0B0C0C;
	--eqe-btn-bg: #0B0C0C; --eqe-btn-text: #FBE134;
	--eqe-track: rgba(11, 12, 12, .12); --eqe-bar: rgba(11, 12, 12, .35); --eqe-bar-mine: #0B0C0C;
	--eqe-kicker-bg: #0B0C0C; --eqe-kicker-text: #FBE134; --eqe-kicker-pad: .25em .6em;
	--eqe-shadow: none;
}
.eqe-poll.eqe-theme-dourado {
	--eqe-step-off: rgba(11, 12, 12, .18);
	--eqe-bg: #E4B61A; --eqe-text: #0B0C0C; --eqe-muted: #2A2E34; --eqe-border: rgba(11, 12, 12, .15); --eqe-soft: #FBE134;
	--eqe-accent: #0B0C0C; --eqe-hover-border: #0B0C0C;
	--eqe-sel-bg: #0B0C0C; --eqe-sel-text: #FBE134; --eqe-sel-border: #0B0C0C;
	--eqe-btn-bg: #0B0C0C; --eqe-btn-text: #FBE134;
	--eqe-track: rgba(11, 12, 12, .15); --eqe-bar: rgba(11, 12, 12, .35); --eqe-bar-mine: #0B0C0C;
	--eqe-kicker-bg: #0B0C0C; --eqe-kicker-text: #FBE134; --eqe-kicker-pad: .25em .6em;
	--eqe-shadow: none;
}

/* ---------- Fontes ---------- */

.eqe-poll.eqe-font-custom { font-family: var(--eqe-font); }
.eqe-poll button { font-family: inherit; }
.eqe-poll.eqe-title-custom .eqe-kicker,
.eqe-poll.eqe-title-custom .eqe-question,
.eqe-poll.eqe-title-custom .eqe-results-title,
.eqe-poll.eqe-title-custom .eqe-res-q,
.eqe-poll.eqe-title-custom .eqe-next { font-family: var(--eqe-font-title); }

/* ---------- Estrutura ---------- */

.eqe-steps { display: flex; gap: 6px; margin-bottom: 1.1em; }
.eqe-steps span { flex: 1 1 0; max-width: 56px; height: 4px; border-radius: 4px; background: var(--eqe-step-off); transition: background .3s ease; }
.eqe-steps .is-done, .eqe-steps .is-current { background: var(--eqe-bar-mine); }
.eqe-steps .is-done { opacity: .55; }

.eqe-card {
	background: var(--eqe-bg);
	border: 1px solid var(--eqe-border);
	border-radius: var(--eqe-radius);
	padding: 1.6em;
	box-shadow: var(--eqe-shadow);
}
.eqe-poll .eqe-kicker {
	display: inline-block;
	font-size: .75em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--eqe-kicker-text);
	background: var(--eqe-kicker-bg);
	padding: var(--eqe-kicker-pad);
	border-radius: 4px;
	margin-bottom: .6em;
}
.eqe-poll .eqe-count, .eqe-poll .eqe-muted, .eqe-poll .eqe-hint { display: block; font-size: .85em; color: var(--eqe-muted); }
.eqe-poll .eqe-question {
	font-size: var(--eqe-q-size, 1.4em);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	margin: .2em 0 .5em;
	padding: 0;
	border: 0;
	color: inherit;
}
.eqe-poll .eqe-desc { color: var(--eqe-muted); margin-bottom: 1em; }
.eqe-poll .eqe-desc > :last-child { margin-bottom: 0; }
.eqe-poll .eqe-hint { margin-bottom: .7em; }

.eqe-options { display: grid; gap: 10px; margin-top: .8em; }
/*
 * Medidas das opções com !important: temas costumam dar altura fixa, line-height e
 * padding próprios a todo <button>, o que espremia o texto quando ele quebrava em 2+ linhas.
 */
.eqe-poll .eqe-options .eqe-option {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: auto !important;
	min-height: 52px !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 14px 18px !important;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.35 !important;
	white-space: normal !important;
	overflow-wrap: anywhere;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	color: var(--eqe-text);
	background: var(--eqe-soft);
	border: 2px solid transparent;
	border-radius: 10px;
	box-shadow: none;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.eqe-poll .eqe-option:hover, .eqe-poll .eqe-option:focus-visible { border-color: var(--eqe-hover-border); background: var(--eqe-soft); color: var(--eqe-text); outline: none; }
.eqe-poll .eqe-option.is-selected { border-color: var(--eqe-sel-border); background: var(--eqe-sel-bg); color: var(--eqe-sel-text); }
.eqe-poll .eqe-check input { width: 1.15em; height: 1.15em; margin: 0; flex: none; accent-color: var(--eqe-btn-bg); }
.eqe-poll .eqe-opt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eqe-poll .eqe-opt-label { display: block; }
.eqe-poll .eqe-opt-hint { display: block; font-size: .85em; font-weight: 400; line-height: 1.4; opacity: .75; }
.eqe-poll .eqe-option.is-selected input { accent-color: var(--eqe-sel-text); }

.eqe-footer { display: flex; align-items: center; margin-top: 1em; gap: .5em; }
.eqe-spacer { flex: 1; }
.eqe-poll .eqe-back {
	background: none; border: 0; padding: .5em 0; margin: 0; font-size: .9em; line-height: 1.2;
	color: var(--eqe-muted); cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none;
}
.eqe-poll .eqe-back:hover { color: var(--eqe-text); background: none; }
.eqe-poll .eqe-next {
	background: var(--eqe-btn-bg); color: var(--eqe-btn-text); border: 0; border-radius: 10px; padding: .75em 1.5em;
	margin: 0; font-size: 1em; font-weight: 700; line-height: 1.2; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none;
}
.eqe-poll .eqe-next:hover { background: var(--eqe-btn-bg); color: var(--eqe-btn-text); filter: brightness(1.08); }
.eqe-poll .eqe-next:disabled { opacity: .4; cursor: not-allowed; filter: none; }

.eqe-results { margin-top: 1.3em; border-top: 1px solid var(--eqe-border); padding-top: 1.1em; }
.eqe-poll .eqe-results-title { font-weight: 700; font-size: 1.05em; margin-bottom: .8em; }
.eqe-res-step { margin-bottom: 1.2em; }
.eqe-res-step:last-child { margin-bottom: 0; }
.eqe-poll .eqe-res-q { font-weight: 600; }
.eqe-res-row { margin-top: .55em; }
.eqe-res-label { display: flex; justify-content: space-between; gap: .8em; font-size: .93em; margin-bottom: .25em; }
.eqe-res-row.is-mine .eqe-res-label { font-weight: 700; }
.eqe-bar { height: 8px; background: var(--eqe-track); border-radius: 4px; overflow: hidden; }
.eqe-bar span { display: block; height: 100%; background: var(--eqe-bar); border-radius: 4px; transition: width .6s ease; }
.eqe-res-row.is-mine .eqe-bar span { background: var(--eqe-bar-mine); }

@media (max-width: 480px) {
	.eqe-card { padding: 1.2em 1em; }
}

.eqe-poll .eqe-test-badge {
	margin: -.4em 0 1em; padding: .45em .8em; border-radius: 6px;
	background: repeating-linear-gradient(45deg, #FBE134, #FBE134 10px, #F2D52A 10px, #F2D52A 20px);
	color: #0B0C0C; font-size: .8em; font-weight: 700;
}

.eqe-poll .eqe-closing { margin: 1em 0 0; font-size: .78em; color: var(--eqe-muted); opacity: .85; }