/**
 * Estilos dos Widgets Webzoe EAD para Elementor (Etapa 2).
 *
 * DECISÃO (ajuste pedido pelo usuário após teste, 2026-07-22): Instructor e
 * Course FAQ inicialmente usavam os tokens --wzead-card/--wzead-text (fundo
 * branco fixo, sempre no tom "claro" configurado em Identidade Visual) —
 * destoava muito em sites com tema escuro, porque esses tokens são cores de
 * MARCA (roxo/textos escolhidos no admin), não uma paleta clara/escura que
 * segue o tema da página. Corrigido pra herdar por padrão: fundo
 * transparente + `color: inherit` (a cor de texto que a própria página já
 * usa, seja qual for o tema) — funciona em QUALQUER site sem configuração.
 * Cada widget expõe variáveis CSS próprias (--wzead-el-*-bg/-text/-accent)
 * com esse fallback neutro; os controles da aba "Estilo" no Elementor
 * (ver Course_Faq_Widget/Instructor_Widget) sobrescrevem só essas
 * variáveis por instância, pra quem quiser fugir do automático.
 *
 * DECISÃO 2 (2026-07-30, pedido do usuário): a cor de DESTAQUE (número,
 * ícone de play, preenchimento da barra, texto de link) sempre caía em
 * `var(--wzead-primary, #6D28D9)` — a cor de marca configurada em Webzoe
 * EAD → Identidade Visual, pensada pro site de referência (estilo
 * Netflix, roxo/escuro) mas sem relação nenhuma com o Kit Global do
 * Elementor de CADA site cliente. Corrigido pra herdar a cor "Primary"
 * do Kit Global do Elementor primeiro (`--e-global-color-primary`,
 * variável que o Elementor já expõe globalmente pras 4 cores do sistema),
 * caindo pra `--wzead-primary` só se o site não tiver Elementor ativo
 * (ou o Kit não tiver essa cor definida), e só então pro roxo fixo como
 * último recurso. Cadeia completa:
 * `var(--e-global-color-primary, var(--wzead-primary, #6D28D9))`.
 */

/* ---------- Course Metrics ---------- */
.wzead-el-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}
.wzead-el-metrics__item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.wzead-el-metrics__value {
	font-size: 1.375rem;
	font-weight: 700;
	color: var( --e-global-color-primary, var( --wzead-primary, #6D28D9 ) );
	line-height: 1.1;
}
.wzead-el-metrics__label {
	font-size: .8125rem;
	color: inherit;
	opacity: .75;
}

/* ---------- Instructor ---------- */
.wzead-el-instructor {
	--wzead-el-instructor-bg: transparent;
	--wzead-el-instructor-text: inherit;
	--wzead-el-instructor-border: rgba( 128, 128, 128, .35 );
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem;
	border: 1px solid var( --wzead-el-instructor-border );
	border-radius: var( --wzead-radius-sm, 8px );
	background: var( --wzead-el-instructor-bg );
	color: var( --wzead-el-instructor-text );
}
.wzead-el-instructor__photo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var( --wzead-el-instructor-color, var( --e-global-color-primary, var( --wzead-primary, #6D28D9 ) ) );
}
.wzead-el-instructor__name {
	font-weight: 700;
	font-size: 1.0625rem;
	color: inherit;
}
.wzead-el-instructor__role {
	font-size: .875rem;
	color: var( --wzead-el-instructor-color, var( --e-global-color-primary, var( --wzead-primary, #6D28D9 ) ) );
	margin-top: .15rem;
}
.wzead-el-instructor__bio {
	font-size: .9375rem;
	color: inherit;
	opacity: .75;
	margin: .5rem 0 0;
}
.wzead-el-instructor__social {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: .5rem;
}
.wzead-el-instructor__social a {
	font-size: .8125rem;
	color: var( --e-global-color-primary, var( --wzead-primary, #6D28D9 ) );
	text-decoration: none;
}
.wzead-el-instructor__social a:hover {
	text-decoration: underline;
}

/* ---------- Course Progress ---------- */
.wzead-el-progress {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.wzead-el-progress__bar {
	flex: 1 1 auto;
	height: .625rem;
	border-radius: 999px;
	background: rgba( 128, 128, 128, .25 );
	overflow: hidden;
}
.wzead-el-progress__fill {
	height: 100%;
	background: var( --e-global-color-primary, var( --wzead-primary, #6D28D9 ) );
	transition: width .3s ease;
}
.wzead-el-progress__text {
	font-size: .875rem;
	font-weight: 600;
	color: inherit;
	flex-shrink: 0;
}

/* ---------- Course FAQ ---------- */
.wzead-el-faq {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.wzead-el-faq__item {
	--wzead-el-faq-bg: transparent;
	--wzead-el-faq-text: inherit;
	--wzead-el-faq-accent: var( --e-global-color-primary, var( --wzead-primary, #6D28D9 ) );
	--wzead-el-faq-border: rgba( 128, 128, 128, .35 );
	border: 1px solid var( --wzead-el-faq-border );
	border-radius: var( --wzead-radius-sm, 8px );
	padding: .25rem .25rem;
	background: var( --wzead-el-faq-bg );
	color: var( --wzead-el-faq-text );
}
.wzead-el-faq__question {
	cursor: pointer;
	font-weight: 600;
	color: inherit;
	padding: .75rem 1rem;
	list-style: none;
}
.wzead-el-faq__question::-webkit-details-marker {
	display: none;
}
.wzead-el-faq__question::before {
	content: '+';
	display: inline-block;
	width: 1rem;
	margin-right: .5rem;
	color: var( --wzead-el-faq-accent );
	font-weight: 700;
}
.wzead-el-faq__item[open] .wzead-el-faq__question::before {
	content: '−';
}
.wzead-el-faq__answer {
	padding: 0 1rem 1rem 2.5rem;
	color: inherit;
	opacity: .8;
	font-size: .9375rem;
}

/* ---------- Course Lessons (lista de aulas) ---------- */
.wzead-el-lessons {
	--wzead-el-lessons-text: inherit;
	--wzead-el-lessons-accent: var( --e-global-color-primary, var( --wzead-primary, #6D28D9 ) );
	display: flex;
	flex-direction: column;
	gap: .5rem;
	color: var( --wzead-el-lessons-text );
}
.wzead-el-lessons__module {
	margin-top: .75rem;
	font-weight: 700;
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var( --wzead-el-lessons-accent );
	opacity: .85;
}
.wzead-el-lessons__module:first-child {
	margin-top: 0;
}
.wzead-el-lessons__item {
	--wzead-el-lessons-bg: transparent;
	--wzead-el-lessons-border: rgba( 128, 128, 128, .25 );
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .75rem 1rem;
	border: 1px solid var( --wzead-el-lessons-border );
	border-radius: var( --wzead-radius-sm, 8px );
	background: var( --wzead-el-lessons-bg );
	color: inherit;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.wzead-el-lessons__item:hover {
	border-color: var( --wzead-el-lessons-accent );
	text-decoration: none;
	color: inherit;
}
.wzead-el-lessons__index {
	flex-shrink: 0;
	width: 1.75rem;
	text-align: center;
	font-weight: 700;
	color: var( --wzead-el-lessons-accent );
	opacity: .8;
}
.wzead-el-lessons__thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var( --wzead-radius-sm, 8px );
	object-fit: cover;
}
.wzead-el-lessons__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}
.wzead-el-lessons__title {
	font-weight: 600;
	font-size: 1rem;
}
.wzead-el-lessons__desc {
	font-size: .8125rem;
	opacity: .7;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wzead-el-lessons__play {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var( --wzead-el-lessons-accent );
	color: #fff;
}
.wzead-el-lessons__play svg {
	/* leve deslocamento óptico: um triângulo centralizado matematicamente
	   parece puxado pra esquerda a olho nu. */
	margin-left: 2px;
}