/**
 * 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.
 */

/* ---------- 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( --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( --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( --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( --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( --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( --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( --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;
	color: var( --wzead-el-lessons-accent );
	font-size: .875rem;
}