/* =============================================================
   Página de Aula — Fase 4, Opção B (v2, pós-screenshot)
   A LearnPress monta a tela como app fullscreen (position:fixed,
   flex, header/footer fixos) — em vez de brigar com isso, mantém
   o esqueleto e reposiciona: sidebar à DIREITA (340px), header
   branco com breadcrumb + progresso, tokens CEAD em tudo.
   Prefixo body.course-item-popup dá especificidade acima do CSS
   da LP (que carrega depois deste arquivo).
   ============================================================= */

body.course-item-popup #popup-course,
body.course-item-popup #popup-course * {
	font-family: var(--cead-font);
}

/* ---------- Esqueleto: sidebar vai pra direita ---------- */
body.course-item-popup #popup-course {
	flex-direction: row-reverse;
	background: var(--cead-white);
}

/* Sidebar como coluna flex — mata a matemática de offsets absolutos da LP
   (feedback 10/07: busca ficava oculta/atrás das aulas) */
body.course-item-popup #popup-sidebar {
	flex: 0 0 340px;
	margin-top: 70px;
	border-left: 1px solid var(--cead-border);
	box-shadow: none;
	background: var(--cead-white);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
body.course-item-popup #popup-sidebar .lp-course-curriculum {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
body.course-item-popup #popup-sidebar .course-curriculum {
	position: static !important;
	top: auto !important;
	width: 100% !important;
	flex: 1;
	min-height: 0;
	overflow: auto;
}

/* Header ocupa a largura toda, branco */
body.course-item-popup #popup-header {
	left: 0 !important;
	right: 0 !important;
	height: 70px;
	padding: 0 var(--cead-space-5);
	background: var(--cead-white) !important;
	border-bottom: 1px solid var(--cead-border);
	display: flex;
	flex-direction: row !important; /* tema aplica row-reverse no desktop */
	flex-wrap: nowrap !important;   /* sem quebra: breadcrumb/X colados no topo era wrap do tema */
	align-items: center;
	gap: var(--cead-space-4);
}
body.course-item-popup #popup-header .cead-lesson__sidebar-btn { order: 1; }
body.course-item-popup #popup-header .popup-header__inner       { order: 2; }
body.course-item-popup #popup-header .popup-header__inner {
	width: auto !important; /* LP força 100% e estoura o flex do header */
	flex: 1;
	max-width: none;
	display: flex;
	justify-content: space-between;
	align-items: center !important; /* conteúdo ficava colado no topo da barra */
	gap: var(--cead-space-6);
	padding: 0;
	min-width: 0;
	height: 100%;
}

/* Conteúdo: flex:1 já vem da LP; margens pro header/footer fixos.
   Padding lateral zerado — faixa de prévia e player são full-bleed */
body.course-item-popup #popup-content {
	margin-top: 70px;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: var(--cead-white);
}

/* Footer fixo: alinhado à coluna de conteúdo (desconta sidebar 340px) */
body.course-item-popup #popup-footer {
	left: 0 !important;
	right: 340px !important;
	max-width: none;
	width: auto;
	padding: var(--cead-space-3) var(--cead-space-5);
	border-top: 1px solid var(--cead-border);
	background: var(--cead-white);
}

/* ---------- Toggle da sidebar ---------- */
body.course-item-popup #sidebar-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
/* Botão hambúrguer — só aparece no mobile (display no media query) */
body.course-item-popup .cead-lesson__sidebar-btn {
	display: none;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border: 1px solid var(--cead-border) !important;
	border-radius: var(--cead-radius-md);
	background: var(--cead-white) !important;
	color: var(--cead-navy) !important;
	cursor: pointer;
	padding: 0 !important;
}
body.course-item-popup .cead-lesson__sidebar-btn svg {
	display: block;
	width: 18px;
	height: 18px;
	stroke: var(--cead-navy);
}

/* ---------- Marca no header (logo oficial) ---------- */
body.course-item-popup .cead-lesson__brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-right: var(--cead-space-2);
}
body.course-item-popup .cead-lesson__brand img {
	display: block;
	height: 26px;
	width: auto;
}

/* ---------- Breadcrumb (novo) ---------- */
.cead-lesson__crumbs {
	flex: 1; /* cola no logo à esquerda; progresso vai pra direita */
	font-size: var(--cead-text-xs);
	color: var(--cead-text-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.cead-lesson__crumbs a {
	color: var(--cead-text-soft);
	text-decoration: none;
}
.cead-lesson__crumbs a:hover {
	color: var(--cead-green);
}
.cead-lesson__crumbs .sep {
	margin: 0 var(--cead-space-2);
}
.cead-lesson__crumbs .cur {
	color: var(--cead-text);
	font-weight: var(--cead-font-semibold);
}

/* ---------- Grupo de ações do header (novo): avaliar, progresso,
   compartilhar, sair da aula — modelo do wireframe aprovado ---------- */
body.course-item-popup .cead-lesson__header-actions {
	display: flex;
	align-items: center;
	gap: var(--cead-space-3);
	flex: none;
}

/* Botão "Avaliar" — visual por ora (sem sistema de avaliação no backend) */
body.course-item-popup .cead-lesson__rate {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: var(--cead-space-1);
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: var(--cead-space-2) !important;
	font-family: var(--cead-font);
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-semibold);
	color: var(--cead-text-soft) !important;
	text-transform: none;
	cursor: pointer;
	white-space: nowrap;
}
body.course-item-popup .cead-lesson__rate svg { color: var(--cead-amber); flex: none; }
body.course-item-popup .cead-lesson__rate:hover { color: var(--cead-text) !important; }

/* Progresso — card arredondado: X/Y aulas + barra + porcentagem */
.cead-lesson__progress {
	display: flex;
	align-items: center;
	gap: var(--cead-space-2);
	flex: none;
	padding: var(--cead-space-2) var(--cead-space-3);
	border: 1px solid var(--cead-border);
	border-radius: var(--cead-radius-pill);
}
.cead-lesson__progress-count {
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-semibold);
	color: var(--cead-navy);
	white-space: nowrap;
}
.cead-lesson__progress-bar {
	width: 90px;
	height: 6px;
	border-radius: var(--cead-radius-pill);
	background: var(--cead-border);
	overflow: hidden;
	flex: none;
}
.cead-lesson__progress-bar div {
	height: 100%;
	background: var(--cead-green);
}
.cead-lesson__progress-pct {
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-semibold);
	color: var(--cead-text-soft);
	white-space: nowrap;
}

/* Botão "Compartilhar" + dropdown Facebook/X/Instagram(copiar link) */
body.course-item-popup .cead-lesson__share {
	position: relative;
	flex: none;
}
body.course-item-popup .cead-lesson__share-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: var(--cead-space-1);
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: var(--cead-space-2) !important;
	font-family: var(--cead-font);
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-semibold);
	color: var(--cead-text-soft) !important;
	text-transform: none;
	cursor: pointer;
	white-space: nowrap;
}
body.course-item-popup .cead-lesson__share-btn:hover,
body.course-item-popup .cead-lesson__share.is-open .cead-lesson__share-btn {
	color: var(--cead-text) !important;
}
body.course-item-popup .cead-lesson__share-menu {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	min-width: 190px;
	background: var(--cead-white);
	border: 1px solid var(--cead-border);
	border-radius: var(--cead-radius-md);
	box-shadow: var(--cead-shadow-lg);
	padding: var(--cead-space-2);
}
body.course-item-popup .cead-lesson__share.is-open .cead-lesson__share-menu {
	display: block;
}
body.course-item-popup .cead-lesson__share-menu a,
body.course-item-popup .cead-lesson__share-menu button {
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--cead-space-2);
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: var(--cead-space-2) var(--cead-space-2) !important;
	font-family: var(--cead-font);
	font-size: var(--cead-text-sm);
	font-weight: var(--cead-font-medium);
	color: var(--cead-text) !important;
	text-decoration: none !important;
	text-transform: none;
	text-align: left;
	border-radius: var(--cead-radius-sm);
	cursor: pointer;
}
body.course-item-popup .cead-lesson__share-menu a:hover,
body.course-item-popup .cead-lesson__share-menu button:hover {
	background: var(--cead-surface) !important;
}
body.course-item-popup .cead-lesson__share-menu svg { flex: none; color: var(--cead-text-soft); }

/* Botão "Sair da aula" — substitui o antigo X isolado (feedback 11/07) */
body.course-item-popup .cead-lesson__exit {
	display: inline-flex;
	align-items: center;
	gap: var(--cead-space-1);
	flex: none;
	padding: var(--cead-space-2) var(--cead-space-3) !important;
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-semibold);
	color: var(--cead-text-soft) !important;
	text-decoration: none !important;
	white-space: nowrap;
	border-radius: var(--cead-radius-md);
}
body.course-item-popup .cead-lesson__exit:hover {
	color: var(--cead-error, #dc2626) !important;
	background: var(--cead-surface);
}

/* ---------- Faixa de prévia gratuita — navy full-width (wireframe);
   o JS move pra fora do wrap, direto no topo do #popup-content.
   Sticky logo abaixo do header fixo (feedback 11/07 — travada ao rolar).
   #popup-content é quem rola (overflow:auto, nativo da LP) e já começa
   flush com a base do header fixo — por isso top:0, não 70px. */
body.course-item-popup .cead-lesson__preview-banner {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cead-space-4);
	flex-wrap: wrap;
	background: var(--cead-navy);
	border: none;
	border-radius: 0;
	padding: var(--cead-space-3) var(--cead-space-5);
	margin: 0;
	font-size: var(--cead-text-sm);
	color: var(--cead-text-white);
}
.cead-lesson__preview-banner span {
	display: flex;
	align-items: center;
	gap: var(--cead-space-2);
}
.cead-lesson__preview-banner strong {
	color: var(--cead-text-white);
}
.cead-lesson__preview-banner svg {
	flex: none;
	color: var(--cead-text-white);
	opacity: 0.85;
}
body.course-item-popup .cead-lesson__preview-banner .cead-btn {
	background: var(--cead-green);
	color: var(--cead-text-white);
	border-radius: var(--cead-radius-md);
	padding: 0.55rem 1.1rem;
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	white-space: nowrap;
}
body.course-item-popup .cead-lesson__preview-banner .cead-btn:hover {
	background: var(--cead-green-hover);
}

/* ---------- Conteúdo: respiro no topo (feedback 10/07: textos colados
   no limite superior) + laterais mais próximas da borda do player
   (feedback 11/07: wireframe alinha tabs/texto quase flush com o vídeo).
   Topo reduzido (feedback 13/07): space-6 deixava um vão grande demais
   entre o vídeo e as abas Sobre a aula/Materiais. ---------- */
body.course-item-popup #learn-press-content-item {
	padding: var(--cead-space-3) var(--cead-space-3) var(--cead-space-5);
}

/* ---------- Player de vídeo em destaque total, full-bleed no painel de
   conteúdo (feedback 10/07: não ocupava a área útil como no wireframe;
   o JS move o primeiro embed pro topo do #popup-content) ---------- */
body.course-item-popup .cead-lesson__player {
	background: #0b1420;
	border-radius: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	width: 100%;
	margin: 0;
}
.cead-lesson__player iframe,
.cead-lesson__player video,
.cead-lesson__player .epyt-video-wrapper {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
}

/* ---------- Título e corpo da aula ---------- */
body.course-item-popup .course-item-title.lesson-title {
	font-weight: var(--cead-font-bold);
	font-size: var(--cead-text-2xl);
	color: var(--cead-text);
	margin: 0 0 var(--cead-space-4);
}
body.course-item-popup .content-item-description {
	color: var(--cead-text);
	font-size: var(--cead-text-base);
	line-height: var(--cead-leading-relaxed);
}
body.course-item-popup .content-item-description iframe {
	max-width: 100%;
	border-radius: var(--cead-radius-lg);
}

/* ---------- Links sugeridos (certificado + YouTube) — reskin do markup
   JÁ EXISTENTE no corpo de ~6.181/6.183 aulas publicadas (botões
   <button class="button button2/button1"><a>...</a></button> gravados
   direto no post_content). Não duplicar o conteúdo — só reestilizar
   com ícone SVG (via mask, já que não dá pra editar o HTML aula a aula)
   no padrão de card do design system CEAD. ---------- */
body.course-item-popup .content-item-description center {
	text-align: left;
}
body.course-item-popup .content-item-description button.button {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 var(--cead-space-3);
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	text-transform: none;
	float: none;
}
body.course-item-popup .content-item-description button.button a {
	display: flex;
	align-items: center;
	gap: var(--cead-space-3);
	padding: var(--cead-space-3) var(--cead-space-4);
	background: var(--cead-surface);
	border-radius: var(--cead-radius-md);
	color: var(--cead-text) !important;
	font-size: var(--cead-text-sm);
	font-weight: var(--cead-font-medium);
	text-decoration: none !important;
	text-transform: none;
}
body.course-item-popup .content-item-description button.button a::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: var(--cead-green);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
body.course-item-popup .content-item-description button.button2 a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l7 3v6c0 5-3.4 8.4-7 10-3.6-1.6-7-5-7-10V5l7-3z'/%3E%3Cpath d='M9.5 12l1.8 1.8L15 10'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l7 3v6c0 5-3.4 8.4-7 10-3.6-1.6-7-5-7-10V5l7-3z'/%3E%3Cpath d='M9.5 12l1.8 1.8L15 10'/%3E%3C/svg%3E");
}
body.course-item-popup .content-item-description button.button1 a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='2' y='5' width='20' height='14' rx='4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10 9.5l5 2.5-5 2.5v-5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='2' y='5' width='20' height='14' rx='4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10 9.5l5 2.5-5 2.5v-5z'/%3E%3C/svg%3E");
}
body.course-item-popup .content-item-description button.button a:hover {
	background: var(--cead-green-light);
}

/* ---------- Abas (novo) — anula o estilo de button do tema ---------- */
body.course-item-popup .cead-lesson__tabs {
	display: flex;
	gap: var(--cead-space-6);
	border-bottom: 1px solid var(--cead-border);
	margin-bottom: var(--cead-space-5);
}
body.course-item-popup .cead-lesson__tabs button {
	appearance: none;
	-webkit-appearance: none;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer;
	padding: var(--cead-space-3) 2px !important;
	font-size: var(--cead-text-sm);
	font-weight: var(--cead-font-semibold);
	color: var(--cead-text-soft) !important;
	text-transform: none;
	letter-spacing: normal;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	margin: 0 0 -1px;
	line-height: 1.4;
}
body.course-item-popup .cead-lesson__tabs button.is-active {
	color: var(--cead-navy) !important;
	border-bottom-color: var(--cead-green) !important;
}
.cead-lesson__tabpanel {
	display: none;
}
.cead-lesson__tabpanel.is-active {
	display: block;
}

/* ---------- Materiais ---------- */
.cead-lesson__materials-empty {
	display: flex;
	align-items: center;
	gap: var(--cead-space-2);
	padding: var(--cead-space-4);
	border: 1px dashed var(--cead-border);
	border-radius: var(--cead-radius-md);
	color: var(--cead-text-soft);
	font-size: var(--cead-text-sm);
}
body.course-item-popup .course-material-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cead-text-sm);
}
body.course-item-popup .course-material-table th {
	text-align: left;
	font-size: var(--cead-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cead-text-soft);
	padding: var(--cead-space-2) var(--cead-space-3);
	border-bottom: 1px solid var(--cead-border);
}
body.course-item-popup .course-material-table td {
	padding: var(--cead-space-2) var(--cead-space-3);
	border-bottom: 1px solid var(--cead-border);
}
body.course-item-popup .lp-material-file-link a {
	color: var(--cead-blue);
}

/* ---------- Ações (concluir/finalizar — nativos, só reskin) ---------- */
.cead-lesson__actions {
	margin-top: var(--cead-space-6);
	padding-top: var(--cead-space-5);
	border-top: 1px solid var(--cead-border);
}
body.course-item-popup .cead-lesson__actions .lp-button {
	display: inline-flex;
	align-items: center;
	gap: var(--cead-space-2);
	padding: var(--cead-btn-py) var(--cead-btn-px);
	background: var(--cead-green);
	color: var(--cead-text-white);
	font-weight: var(--cead-font-semibold);
	font-size: var(--cead-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: none;
	border-radius: var(--cead-radius-md);
	cursor: pointer;
	float: none;
}
body.course-item-popup .cead-lesson__actions .lp-button:hover {
	background: var(--cead-green-hover);
}
body.course-item-popup .cead-lesson__actions .lp-button.completed {
	background: var(--cead-green-light);
	color: var(--cead-green);
	cursor: default;
}
body.course-item-popup .cead-lesson__actions .learn-press-message.success {
	color: var(--cead-green);
	font-size: var(--cead-text-sm);
	margin-bottom: var(--cead-space-3);
	background: none;
	padding: 0;
}

/* ---------- Sidebar: cabeçalho "Conteúdo do curso" (novo) ---------- */
body.course-item-popup .cead-lesson__sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cead-space-3);
	padding: var(--cead-space-4) var(--cead-space-4) var(--cead-space-3);
	background: var(--cead-white);
}
body.course-item-popup .cead-lesson__sidebar-head b {
	font-size: var(--cead-text-sm);
	font-weight: var(--cead-font-bold);
	color: var(--cead-text);
}
body.course-item-popup .cead-lesson__sidebar-head button {
	appearance: none;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-semibold);
	color: var(--cead-blue) !important;
	cursor: pointer;
	text-transform: none;
}
/* ---------- Sidebar: busca ---------- */
body.course-item-popup #popup-sidebar .search-course {
	flex: none;
	height: 56px;
	background: var(--cead-surface);
	border-bottom: 1px solid var(--cead-border);
}
body.course-item-popup #popup-sidebar .search-course input[name="s"] {
	font-size: var(--cead-text-sm);
	color: var(--cead-text);
}
body.course-item-popup #popup-sidebar .search-course input[name="s"]::placeholder {
	color: var(--cead-text-soft);
	opacity: 1;
}
body.course-item-popup #popup-sidebar .search-course button {
	height: 56px;
}

/* ---------- Sidebar: resumo do currículo ---------- */
body.course-item-popup .course-curriculum-info {
	color: var(--cead-text-soft);
	font-size: var(--cead-text-xs);
}
body.course-item-popup .course-toggle-all-sections {
	color: var(--cead-blue) !important;
	font-weight: var(--cead-font-semibold);
	text-transform: none !important;
	cursor: pointer;
}

/* ---------- Sidebar: módulos ---------- */
body.course-item-popup .course-section-header {
	background: var(--cead-surface) !important;
	position: sticky;
	top: 0;
	z-index: 2;
}
body.course-item-popup .course-section__title {
	font-weight: var(--cead-font-bold) !important;
	font-size: var(--cead-text-sm) !important;
	color: var(--cead-text) !important;
	text-transform: none !important;
}
body.course-item-popup .section-count-items {
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-semibold);
	color: var(--cead-text-soft);
	background: var(--cead-white);
	border: 1px solid var(--cead-border);
	border-radius: var(--cead-radius-pill);
	padding: 2px 10px;
}
body.course-item-popup .section-count-items.cead-progress-count {
	color: var(--cead-green);
	border-color: var(--cead-green-light);
	background: var(--cead-white);
}

/* ---------- Sidebar: itens de aula (escopado ao #popup-sidebar — o H1
   do conteúdo também usa .course-item-title) ---------- */
body.course-item-popup #popup-sidebar .course-item-title {
	color: var(--cead-text) !important;
	font-size: var(--cead-text-sm) !important;
}
/* Aula atual: UM destaque só — barra vertical verde na borda EXTERNA da
   linha (inset shadow no li, feedback 13/07). A barra interna que existia
   (border-left no link, colada no texto) foi removida, e a barra nativa da
   LP (::before absolute) continua suprimida — senão viram três. */
body.course-item-popup #popup-sidebar .course-item.current .course-item__link {
	background: transparent !important;
	border-left: none;
}
body.course-item-popup #popup-sidebar .course-item.current {
	box-shadow: inset 3px 0 0 var(--cead-green);
}
body.course-item-popup #popup-sidebar .course-item.current::before {
	display: none;
}

/* Ícone de TIPO da aula (à esquerda do nome) — some; o estado fica só
   no "checkbox" de status à direita */
body.course-item-popup .course-item__info .course-item-ico {
	display: none !important;
}

/* Ícone de STATUS vira checkbox geométrico */
body.course-item-popup .course-item__status .course-item-ico {
	width: 17px !important;
	height: 17px !important;
	border-radius: 50% !important;
	border: 1.5px solid var(--cead-border) !important;
	background: var(--cead-white) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
body.course-item-popup .course-item__status .course-item-ico::before {
	content: "";
	color: var(--cead-text-white);
	font-size: 10px;
	line-height: 1;
	font-weight: 700;
	font-family: var(--cead-font);
}
body.course-item-popup .course-item__status .course-item-ico.completed,
body.course-item-popup .course-item__status .course-item-ico.passed {
	background: var(--cead-green) !important;
	border-color: var(--cead-green) !important;
}
body.course-item-popup .course-item__status .course-item-ico.completed::before,
body.course-item-popup .course-item__status .course-item-ico.passed::before {
	content: "\2713";
}
body.course-item-popup .course-item__status .course-item-ico.failed {
	background: var(--cead-error, #dc2626) !important;
	border-color: var(--cead-error, #dc2626) !important;
}
body.course-item-popup .course-item__status .course-item-ico.failed::before {
	content: "\2715";
}
body.course-item-popup .course-item__status .course-item-ico.in-progress {
	border-color: var(--cead-green) !important;
	border-width: 2px !important;
}
body.course-item-popup .course-item__status .course-item-ico.locked {
	border-style: dashed !important;
}
body.course-item-popup .course-item__status .course-item-ico.preview {
	border-color: var(--cead-blue) !important;
}

/* ---------- Rodapé de navegação (Próximo/Anterior) ---------- */
body.course-item-popup #popup-footer .course-item-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--cead-space-4);
}
body.course-item-popup #popup-footer .course-item-nav[data-nav="next"] {
	justify-content: flex-end;
}
/* Navegação: só texto pequeno, sem borda (feedback 10/07 — o protagonista
   do rodapé é o "Concluir aula", movido pra cá via JS, na mesma linha) */
body.course-item-popup #popup-footer .course-item-nav {
	width: 100%;
	align-items: center;
}
/* Setas em fonte de ícone que a LP põe nas DIVs .prev/.next (lp-icon
   \f0d9/\f0da via ::before) — feedback 13/07: fora. O "‹/›" que fica é
   texto puro dentro do link (montado no JS junto com Anterior/Próximo). */
body.course-item-popup #popup-footer .course-item-nav .prev::before,
body.course-item-popup #popup-footer .course-item-nav .next::before {
	content: none !important;
	display: none !important;
}
body.course-item-popup #popup-footer .next > a,
body.course-item-popup #popup-footer .prev > a {
	display: inline-flex;
	align-items: center;
	gap: var(--cead-space-1);
	padding: 0.3rem 0.2rem;
	font-weight: var(--cead-font-medium);
	font-size: var(--cead-text-xs);
	text-transform: none;
	letter-spacing: 0;
	border: none;
	background: transparent;
	color: var(--cead-text-soft) !important;
	text-decoration: none !important;
	line-height: 1.4;
	white-space: nowrap; /* "‹ Anterior" quebrava em 2 linhas no mobile */
}
body.course-item-popup #popup-footer .next > a:hover,
body.course-item-popup #popup-footer .prev > a:hover {
	color: var(--cead-green) !important;
	background: transparent;
}
body.course-item-popup #popup-footer .course-item-nav__name {
	display: none; /* nome da próxima aula deixava o rodapé pesado */
}

/* "Concluir aula" dentro do rodapé (movido via JS), centralizado entre
   Anterior e Próximo */
body.course-item-popup #popup-footer .cead-lesson__actions.in-footer {
	margin: 0 auto;
	padding: 0;
	border: none;
	display: flex;
	align-items: center;
}
body.course-item-popup #popup-footer .cead-lesson__actions.in-footer .learn-press-message {
	display: none; /* mensagem "concluiu em..." não cabe no rodapé */
}
body.course-item-popup #popup-footer .cead-lesson__actions.in-footer form {
	margin: 0;
}
body.course-item-popup #popup-footer .cead-lesson__actions.in-footer .lp-button {
	padding: 0.6rem 1.6rem;
	font-size: var(--cead-text-xs);
}

/* =============================================================
   Mobile — sidebar vira off-canvas pela direita, controlada
   pelas classes de body que a própria LP alterna (__open/__close)
   ============================================================= */
@media (max-width: 900px) {
	body.course-item-popup #popup-header {
		display: flex !important;
		flex-wrap: nowrap;
		justify-content: flex-start !important; /* tema usa flex-end e empurra o hambúrguer pra fora da tela */
		padding: 0 var(--cead-space-3);
		gap: var(--cead-space-2);
	}
	body.course-item-popup #popup-header .popup-header__inner {
		flex: 1;
		min-width: 0 !important; /* tema (thim-style-inline-css) tem #popup-course #popup-header .popup-header__inner{min-width:100%} com 2 IDs de especificidade — sem !important o hambúrguer (order:2) é empurrado pra fora da tela, igual ao bug do #popup-header acima */
		justify-content: space-between !important; /* mesma regra do tema força justify-content:flex-end aqui também */
		gap: var(--cead-space-2); /* feedback 13/07: space-6 (24px) somado ao resto estourava a largura no mobile e cortava a pílula de progresso na borda da tela */
	}
	/* Clique fora fecha a sidebar de currículo via JS (cead-lesson-page.js);
	   sem backdrop escuro — pedido de 13/07 */
	/* Anterior/Próximo nas extremidades da barra, Concluir aula entre os
	   dois (feedback 14/07 — reverte o agrupamento centralizado de 13/07).
	   space-between com só 3 itens deixa o do meio visualmente centralizado
	   quando prev/next têm larguras parecidas, como aqui. */
	body.course-item-popup #popup-footer .course-item-nav {
		justify-content: space-between !important;
		gap: var(--cead-space-3);
	}
	body.course-item-popup #popup-footer .cead-lesson__actions.in-footer {
		margin: 0;
	}
	body.course-item-popup #popup-sidebar {
		position: fixed;
		top: 70px;
		right: 0;
		bottom: 0;
		z-index: 120;
		width: min(340px, 88vw);
		margin-top: 0;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
	}
	body.course-item-popup.cead-sidebar-open #popup-sidebar {
		transform: translateX(0);
	}
	body.course-item-popup .cead-lesson__sidebar-btn {
		display: inline-flex;
	}
	/* Header mobile (feedback 14/07): logo no canto esquerdo, hambúrguer no
	   canto direito, "Sair da aula" logo à esquerda do hambúrguer, progresso
	   centralizado no header inteiro. #popup-header é position:fixed (LP
	   core) — contexto de posicionamento pro progress absoluto abaixo. */
	body.course-item-popup #popup-header .popup-header__inner {
		order: 1;
	}
	body.course-item-popup #popup-header .cead-lesson__sidebar-btn {
		order: 2;
	}
	body.course-item-popup .cead-lesson__progress {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	body.course-item-popup #popup-footer {
		right: 0 !important;
	}
	.cead-lesson__preview-banner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Logo menor */
	body.course-item-popup .cead-lesson__brand img {
		height: 20px;
	}
	body.course-item-popup .cead-lesson__brand {
		margin-right: 0;
	}

	/* Header mobile enxuto (feedback 13/07 — elementos cortados na borda):
	   breadcrumb SAI (o título da aula já aparece no corpo; era ele que
	   disputava espaço e empurrava progresso/sair pra fora da tela).
	   Sobram: hambúrguer + logo à esquerda, progresso completo + sair à
	   direita — cabe folgado em 390px. */
	body.course-item-popup .cead-lesson__crumbs {
		display: none;
	}
	body.course-item-popup .cead-lesson__rate,
	body.course-item-popup .cead-lesson__share {
		display: none;
	}
	body.course-item-popup #popup-header .popup-header__inner {
		justify-content: space-between;
		overflow: hidden; /* nada além da borda, aconteça o que acontecer */
	}
	body.course-item-popup .cead-lesson__header-actions {
		gap: var(--cead-space-2);
	}
	body.course-item-popup .cead-lesson__progress {
		padding: 4px var(--cead-space-2);
		gap: var(--cead-space-1);
	}
	.cead-lesson__progress-pct {
		display: none; /* o "X/Y aulas" + barra já dizem tudo */
	}
	.cead-lesson__progress-bar {
		width: 44px;
	}
	body.course-item-popup .cead-lesson__exit span {
		display: none;
	}
	body.course-item-popup .cead-lesson__exit {
		padding: var(--cead-space-1) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.course-item-popup #popup-sidebar {
		transition: none;
	}
}