/* =========================================================================
   Mobilecar Lesson Player  -  visual premium
   Cabecalho escuro cinematografico, sidebar clara refinada, palco de video,
   cartao de leitura e navegacao. Marca: azul #0083EE, navy, branco.
   Fontes do tema: Lexend Deca (titulos) e Hind (corpo).
   ========================================================================= */

:root {
	--mc-primary: #0083EE;
	--mc-primary-ink: #0067bd;
	--mc-primary-soft: rgba(0, 131, 238, 0.10);
	--mc-primary-soft-2: rgba(0, 131, 238, 0.16);
	--mc-navy: #0b1f3a;
	--mc-navy-2: #0f2c52;
	--mc-stage: #070d18;
	--mc-ink: #0b1524;
	--mc-text: #2b3a4f;
	--mc-muted: #6a7a90;
	--mc-on-dark: #ffffff;
	--mc-on-dark-soft: #9fb6d8;
	--mc-line: #e7edf5;
	--mc-line-soft: #eef2f7;
	--mc-bg: #eef2f7;
	--mc-white: #ffffff;
	--mc-green: #18b26b;
	--mc-radius: 16px;
	--mc-radius-sm: 12px;
	--mc-shadow: 0 10px 30px rgba(13, 35, 70, 0.10);
	--mc-shadow-sm: 0 2px 12px rgba(13, 35, 70, 0.07);
	--mc-touch: 44px;
}

.tutor-course-single-content-wrapper,
.tutor-course-single-content-wrapper .mc-lp-item-title,
.tutor-course-single-content-wrapper .tutor-course-topic-item-title {
	font-family: var(--tg-body-font-family, "Hind", system-ui, -apple-system, "Segoe UI", sans-serif);
}
.mc-lp-course-name,
.mc-lp-header-lesson,
.mc-lp-topic-title,
.tutor-course-spotlight-wrapper .tutor-fs-5 {
	font-family: var(--tg-heading-font-family, "Lexend Deca", system-ui, sans-serif);
}

.tutor-course-single-content-wrapper,
#tutor-single-entry-content {
	background: var(--mc-bg);
}

/* Foco visivel (teclado) */
.tutor-course-single-content-wrapper a:focus-visible,
.tutor-course-single-content-wrapper button:focus-visible,
.mc-lp-item-link:focus-visible,
.tutor-accordion-item-header:focus-visible {
	outline: 3px solid var(--mc-primary);
	outline-offset: 2px;
	border-radius: 8px;
}

/* =========================================================================
   1. CABECALHO  (dark premium, alto contraste)
   Vence a regra do Tutor (.tutor-course-topic-single-header { background:primary })
   ========================================================================= */
.tutor-course-single-content-wrapper .tutor-course-topic-single-header.mc-lp-header,
.mc-lp-header {
	background: linear-gradient(120deg, var(--mc-stage) 0%, var(--mc-navy) 55%, var(--mc-navy-2) 100%) !important;
	color: var(--mc-on-dark) !important;
	min-height: 64px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 6px 24px rgba(5, 10, 22, 0.28);
}

/* Botoes do topo: fantasma claro */
.mc-lp-header .tutor-iconic-btn {
	color: var(--mc-on-dark) !important;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	min-width: var(--mc-touch);
	min-height: var(--mc-touch);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
}
.mc-lp-header .tutor-iconic-btn:hover {
	background: rgba(255, 255, 255, 0.18);
	color: var(--mc-on-dark) !important;
	transform: translateY(-1px);
}

/* Titulos: curso (pequeno, com selo) + aula (branco, forte) */
.mc-lp-header-titles {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.25;
	min-width: 0;
	overflow: hidden;
}
.mc-lp-header-course {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mc-on-dark-soft) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mc-lp-header-course::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mc-primary);
	box-shadow: 0 0 0 4px rgba(0, 131, 238, 0.25);
	flex-shrink: 0;
}
.mc-lp-header-lesson {
	font-size: 16px;
	font-weight: 700;
	color: var(--mc-on-dark) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 2px;
}

.mc-lp-header-actions {
	gap: 18px;
}

/* Progresso no topo (desktop), claro sobre o escuro */
.mc-lp-header-progress {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mc-lp-header-progress-bar {
	display: inline-block;
	width: 130px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	overflow: hidden;
}
.mc-lp-header-progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--mc-primary), #4db5ff);
	transition: width 0.4s ease;
}
.mc-lp-header-progress-text {
	font-size: 13px;
	font-weight: 700;
	color: var(--mc-on-dark) !important;
	white-space: nowrap;
}

/* Botao "marcar como concluida" nativo dentro do topo escuro */
.mc-lp-header .tutor-topbar-mark-btn,
.mc-lp-header-actions .tutor-btn {
	border-radius: 10px !important;
	min-height: 40px;
}

/* Barra fina de progresso no mobile */
.mc-lp-mobile-progress {
	height: 4px;
	background: rgba(11, 31, 58, 0.12);
	width: 100%;
	overflow: hidden;
}
.mc-lp-mobile-progress-fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--mc-primary), #4db5ff);
	transition: width 0.4s ease;
}

/* =========================================================================
   2. SIDEBAR  "Conteudo do curso"
   ========================================================================= */
.tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper {
	background: var(--mc-white);
	border-right: 1px solid var(--mc-line);
}

.mc-lp-sidebar-title {
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--mc-line);
}
.mc-lp-sidebar-title .tutor-iconic-btn {
	border-radius: 10px;
}

.mc-lp-course-head {
	padding: 20px;
	border-bottom: 1px solid var(--mc-line);
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(0, 131, 238, 0.12) 0%, rgba(0, 131, 238, 0) 60%),
		var(--mc-white);
}
.mc-lp-course-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--mc-ink);
	margin: 0 0 14px;
	line-height: 1.3;
}

/* Progresso geral */
.mc-lp-progress-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 7px;
}
.mc-lp-progress-label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--mc-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.mc-lp-progress-pct {
	font-size: 15px;
	font-weight: 800;
	color: var(--mc-primary);
}
.mc-lp-bar {
	height: 10px;
	border-radius: 999px;
	background: var(--mc-line);
	overflow: hidden;
}
.mc-lp-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--mc-primary), #4db5ff);
	transition: width 0.5s ease;
}
.mc-lp-progress-count {
	margin-top: 7px;
	font-size: 12px;
	color: var(--mc-muted);
}

/* Topicos */
.mc-lp-topics {
	padding: 6px 0 20px;
}
.mc-lp-topic {
	border-bottom: 1px solid var(--mc-line-soft);
}
.mc-lp-topic:last-child {
	border-bottom: 0;
}
.mc-lp-topic-head {
	padding: 15px 20px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.mc-lp-topic-head:hover {
	background: var(--mc-bg);
}
.mc-lp-topic-head.is-active {
	background: linear-gradient(90deg, var(--mc-primary-soft), rgba(0, 131, 238, 0));
}
.mc-lp-topic-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--mc-ink);
	display: flex;
	align-items: center;
}

.mc-lp-topic-summary {
	display: flex;
	align-items: center;
	gap: 8px;
}
.mc-lp-mini-bar {
	display: inline-block;
	width: 44px;
	height: 6px;
	border-radius: 999px;
	background: var(--mc-line);
	overflow: hidden;
}
.mc-lp-mini-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--mc-primary);
	transition: width 0.4s ease;
}
.mc-lp-topic-count {
	font-weight: 700;
	font-size: 12px;
	color: var(--mc-muted);
	min-width: 30px;
	text-align: right;
}

/* Itens */
.mc-lp-item-link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px 12px 17px;
	min-height: var(--mc-touch);
	border-left: 3px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.mc-lp-item-link:hover {
	background: var(--mc-bg);
}
.mc-lp-item-main {
	align-items: center;
	min-width: 0;
}
.mc-lp-item-title {
	color: var(--mc-text);
	line-height: 1.35;
}
.mc-lp-type-icon {
	color: var(--mc-muted);
	font-size: 16px;
	flex-shrink: 0;
}

/* Aula ativa: destaque de marca */
.mc-lp-item.is-active .mc-lp-item-link {
	background: linear-gradient(90deg, var(--mc-primary-soft-2), rgba(0, 131, 238, 0.02));
	border-left-color: var(--mc-primary);
}
.mc-lp-item.is-active .mc-lp-item-title {
	color: var(--mc-primary-ink);
	font-weight: 700;
}
.mc-lp-item.is-active .mc-lp-type-icon {
	color: var(--mc-primary);
}

/* Check de status concluido */
.tutor-course-single-content-wrapper .mc-lp-check:checked,
.tutor-course-single-content-wrapper .tutor-form-check-circle:checked {
	background-color: var(--mc-green);
	border-color: var(--mc-green);
}

/* =========================================================================
   3. PALCO DO VIDEO  (cinematografico, 16:9)
   ========================================================================= */
#tutor-single-entry-content .tutor-course-topic-single-body {
	background: var(--mc-stage);
}
.tutor-video-player-wrapper {
	background: var(--mc-stage);
	display: flex;
	justify-content: center;
	padding: 28px 24px;
}
.tutor-video-player-wrapper > * {
	width: 100%;
	max-width: 1100px;
	border-radius: var(--mc-radius);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.tutor-video-player-wrapper .tutor-ratio-16x9,
.tutor-video-player-wrapper .tutor-ratio {
	aspect-ratio: 16 / 9;
}
@supports not (aspect-ratio: 16 / 9) {
	.tutor-video-player-wrapper .tutor-ratio-16x9 {
		position: relative;
		padding-top: 56.25%;
	}
	.tutor-video-player-wrapper .tutor-ratio-16x9 > * {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
}
.tutor-video-player-wrapper video,
.tutor-video-player-wrapper iframe {
	width: 100%;
	height: 100%;
	display: block;
}

/* =========================================================================
   4. SOBRE A LICAO  (abas + cartao de leitura)
   ========================================================================= */
.tutor-course-spotlight-wrapper {
	background: var(--mc-bg);
	padding: 0 0 12px;
}
.tutor-course-spotlight-nav {
	background: var(--mc-white);
	border-bottom: 1px solid var(--mc-line);
	box-shadow: var(--mc-shadow-sm);
	gap: 4px;
	padding: 0 14px;
}
.tutor-course-spotlight-nav .tutor-nav-link {
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--mc-muted);
	font-weight: 600;
	padding: 15px 16px;
	min-height: var(--mc-touch);
}
.tutor-course-spotlight-nav .tutor-nav-link:hover {
	color: var(--mc-primary-ink);
}
.tutor-course-spotlight-nav .tutor-nav-link.is-active {
	color: var(--mc-primary);
	border-bottom-color: var(--mc-primary);
	background: transparent;
}

.tutor-course-spotlight-tab .tutor-tab-item {
	padding: 28px 16px 44px;
}
.tutor-course-spotlight-tab .tutor-col-xl-8 {
	background: var(--mc-white);
	border-radius: var(--mc-radius);
	box-shadow: var(--mc-shadow);
	padding: 30px 34px;
	max-width: 820px;
	margin: 0 auto;
	float: none;
}
.tutor-course-spotlight-wrapper .tutor-fs-5 {
	color: var(--mc-ink);
	font-weight: 700;
	font-size: 19px;
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 16px;
}
.tutor-course-spotlight-wrapper .tutor-fs-5::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	border-radius: 3px;
	background: var(--mc-primary);
}
.tutor-lesson-wrapper {
	font-size: 16px;
	line-height: 1.85;
	color: var(--mc-text);
}
.tutor-lesson-wrapper p {
	margin: 0 0 1em;
}

/* Anexos clicaveis */
#tutor-course-spotlight-files a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	margin-top: 12px;
	background: var(--mc-white);
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-sm);
	color: var(--mc-text);
	font-weight: 600;
	min-height: var(--mc-touch);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
#tutor-course-spotlight-files a:hover {
	border-color: var(--mc-primary);
	box-shadow: var(--mc-shadow-sm);
	transform: translateY(-1px);
	color: var(--mc-primary-ink);
}
#tutor-course-spotlight-files a::before {
	content: "\e9c2";
	font-family: "tutor";
	color: var(--mc-primary);
	font-size: 18px;
}

/* =========================================================================
   5. RODAPE  (navegacao + concluir)
   ========================================================================= */
.mc-lp-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--mc-white);
	border-top: 1px solid var(--mc-line);
	box-shadow: 0 -4px 16px rgba(13, 35, 70, 0.05);
}
.mc-lp-nav-btn {
	min-height: var(--mc-touch);
	border-radius: 10px;
	font-weight: 600;
}
.mc-lp-nav-complete {
	flex: 1;
	display: flex;
	justify-content: center;
}
.mc-lp-nav-complete .tutor-btn,
.mc-lp-nav-complete button {
	background: var(--mc-green) !important;
	border-color: var(--mc-green) !important;
	color: #fff !important;
	min-height: var(--mc-touch);
	border-radius: 10px;
	font-weight: 700;
	padding-inline: 22px;
}
.mc-lp-nav-complete .tutor-btn:hover,
.mc-lp-nav-complete button:hover {
	filter: brightness(0.95);
}
.mc-lp-nav-btn-next {
	background: var(--mc-primary) !important;
	border-color: var(--mc-primary) !important;
	color: #fff !important;
}
.mc-lp-nav-btn-next:hover {
	background: var(--mc-primary-ink) !important;
	border-color: var(--mc-primary-ink) !important;
}
.mc-lp-nav-btn[disabled],
.mc-lp-nav-btn[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}

/* =========================================================================
   6. DRAWER MOBILE
   ========================================================================= */
.mc-lp-sidebar-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(7, 13, 24, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	z-index: 1040;
}
body.mc-lp-drawer-open .mc-lp-sidebar-backdrop {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 1199.98px) {
	.tutor-course-single-content-wrapper {
		display: block;
	}
	#tutor-single-entry-content {
		width: 100%;
	}

	.tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 86%;
		max-width: 360px;
		z-index: 1050;
		transform: translateX(-100%);
		transition: transform 0.28s ease;
		overflow-y: auto;
		box-shadow: 0 0 50px rgba(7, 13, 24, 0.3);
		border-right: 0;
	}
	.tutor-course-single-content-wrapper.tutor-course-single-sidebar-open .tutor-course-single-sidebar-wrapper {
		transform: translateX(0);
	}

	.mc-lp-item-link,
	.mc-lp-topic-head,
	.tutor-course-spotlight-nav .tutor-nav-link,
	.mc-lp-nav-btn {
		min-height: var(--mc-touch);
	}

	.tutor-video-player-wrapper {
		padding: 0;
		position: sticky;
		top: 0;
		z-index: 5;
	}
	.tutor-video-player-wrapper > * {
		max-width: 100%;
		border-radius: 0;
		box-shadow: none;
	}

	.tutor-course-spotlight-tab .tutor-col-xl-8 {
		padding: 22px 18px;
	}
}

@media (max-width: 575.98px) {
	.mc-lp-footer {
		flex-wrap: wrap;
	}
	.mc-lp-nav-complete {
		order: -1;
		flex-basis: 100%;
		margin-bottom: 8px;
	}
	.mc-lp-nav-complete .tutor-btn,
	.mc-lp-nav-complete button {
		width: 100%;
	}
}

body.tutor-overflow-hidden {
	overflow: hidden;
}