/*
 * BeerExpert — alterações de layout do LMS (LearnPress v4).
 * Carregado pelo functions.php a seguir ao CSS do LearnPress.
 *
 * Página de referência:
 * https://staging.beerexpert.pt/curso/beer-expert-em-7dias/lessons/a-malte/
 */

/* =========================================================================
 * TAREFA 3 — CTAs de navegação (Anterior / Seguinte) como botões
 *
 * Aplica em TODAS as larguras (mobile + desktop), por pedido.
 * "Seguinte →" = primário (dourado de marca #efb635 + texto navy, contraste
 * ok). "← Anterior" = secundário (contorno cinzento). Alvo de toque ~46px.
 * Só estilo dos <a> existentes — sem mexer no layout.
 * ====================================================================== */
#popup-footer .course-item-nav .prev,
#popup-footer .course-item-nav .next {
	flex: 1;
}

/* As setas antigas vivem em .prev::before/.next::before (fora do <a>);
   escondemo-las e pomos setas dentro do próprio botão. */
#popup-footer .course-item-nav .prev:before,
#popup-footer .course-item-nav .prev:after,
#popup-footer .course-item-nav .next:before,
#popup-footer .course-item-nav .next:after {
	display: none !important;
}

#popup-footer .course-item-nav .prev a,
#popup-footer .course-item-nav .next a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 46px;
	padding: 10px 22px !important;
	border-radius: 10px;
	font-weight: 700 !important;
	font-size: 15px;
	line-height: 1.1;
	text-decoration: none !important;
	transition: 0.2s ease;
}

/* Primário: Seguinte → (dourado de marca, texto navy). */
#popup-footer .course-item-nav .next a {
	background: #efb635 !important;
	color: #14213d !important;
	box-shadow: 0 2px 8px rgba(239, 182, 53, 0.35);
}
#popup-footer .course-item-nav .next a:hover,
#popup-footer .course-item-nav .next a:focus {
	background: #e0a91f !important;
	color: #14213d !important;
}
#popup-footer .course-item-nav .next a:after {
	content: "\2192"; /* → */
	font-weight: 700;
}

/* Secundário: ← Anterior (contorno cinzento). */
#popup-footer .course-item-nav .prev a {
	background: transparent !important;
	color: #555 !important;
	border: 1px solid #ccc !important;
}
#popup-footer .course-item-nav .prev a:hover,
#popup-footer .course-item-nav .prev a:focus {
	border-color: #999 !important;
	color: #14213d !important;
}
#popup-footer .course-item-nav .prev a:before {
	content: "\2190"; /* ← */
	font-weight: 700;
}

/* Tooltip do nome da lição (prev/next) no hover: estava a renderizar ATRÁS
   do botão. Pomos à frente (z-index) com um visual limpo. */
#popup-footer .course-item-nav .course-item-nav__name {
	z-index: 20 !important;
	background: #14213d !important;
	color: #ffffff !important;
	padding: 5px 10px !important;
	border-radius: 6px !important;
	white-space: nowrap;
	font-size: 13px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* =========================================================================
 * "Seguinte" conclui + avança (ver assets/js/lms.js).
 * Escondemos o botão "Concluir" separado — fica UM só CTA: "Seguinte →".
 * O form continua no DOM (só invisível) para o JS o poder submeter.
 * ====================================================================== */
#popup-content .lp-btn-complete-item,
#popup-content .button-complete-lesson {
	display: none !important;
}

/* =========================================================================
 * Pills do currículo (tempo / nº de perguntas): cores neutras.
 * O vermelho/verde pareciam estado de certo/errado — passamos a cinzento.
 * ====================================================================== */
#popup-sidebar .duration,
#popup-sidebar .question-count {
	color: #4b5563 !important;
	background: #eef0f3 !important;
}

/* =========================================================================
 * Botão de dica nas perguntas do quiz: "?" -> ícone + "Mostrar dica".
 * O botão tem um <span>Dica</span> escondido e o "?" no ::before;
 * escondemos o span e pomos um rótulo claro.
 * ====================================================================== */
/* Botão de dica: pílula AZUL (estilo do "Ver respostas", mas azul),
   apresentada depois das respostas (posição default do LearnPress). */
#popup-content .btn-show-hint {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto !important;
	height: auto !important;
	min-height: 44px;
	margin-top: 12px;
	padding: 10px 22px !important;
	border-radius: 24px;
	background: #2f6fed !important;
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
#popup-content .btn-show-hint:hover {
	background: #2559c4 !important;
}
#popup-content .btn-show-hint > span {
	display: none !important;
}
#popup-content .btn-show-hint::before {
	display: none !important; /* esconde o "?" */
}
#popup-content .btn-show-hint::after {
	content: "Mostrar dica";
	font-size: 14px;
	font-weight: 600;
}

/* Botão "Seguinte" da paginação do quiz: pílula amarela (CTA principal).
   "Anterior" fica secundário (contorno). Os números ficam neutros. */
#popup-content .questions-pagination .page-numbers.next {
	display: inline-flex !important;
	align-items: center;
	min-height: 44px;
	padding: 10px 24px !important;
	border: 0 !important;
	border-radius: 24px !important;
	background: #efb635 !important;
	color: #14213d !important;
	font-weight: 700 !important;
}
#popup-content .questions-pagination .page-numbers.next:hover {
	background: #e0a91f !important;
}
#popup-content .questions-pagination .page-numbers.prev {
	display: inline-flex !important;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px !important;
	border: 1px solid #ccc !important;
	border-radius: 24px !important;
	background: transparent !important;
	color: #555 !important;
}

/* "Começar o quiz" — sem capitalização forçada (evita "Começar O Quiz"). */
#popup-content .lp-button.start {
	text-transform: none !important;
}

/* Nota mínima: mostrar "80%" em vez de "80" (o valor vem só como número). */
#popup-content .quiz-intro-item--passing-grade .quiz-intro-item__content::after {
	content: "%";
}

/* Esconder o "back to top" (Edubin) dentro do LMS — só faz sentido nas
   páginas normais do site, não no curso/quiz. */
.single-lp_course .pixelcurve-progress-parent,
body.course-item-popup .pixelcurve-progress-parent {
	display: none !important;
}

/* Paginação do quiz no mobile: os números não cabem todos. Mostrar só
   "Anterior", o número ATUAL e "Seguinte" (esconder os outros números e os "…"). */
@media (max-width: 768px) {
	#popup-content .questions-pagination .nav-links .page-numbers:not(.current):not(.prev):not(.next),
	#popup-content .questions-pagination .nav-links .page-numbers.dots {
		display: none !important;
	}
}

/* =========================================================================
 * Mobile: aliviar o topo do quiz (menos scroll até às perguntas).
 * Classes be-quiz-started / be-last-question são postas pelo lms.js.
 * ====================================================================== */

/* "Concluir questionário" só na ÚLTIMA pergunta (em todas as larguras). */
#content-item-quiz:not(.be-last-question) .submit-quiz {
	display: none !important;
}

@media (max-width: 768px) {
	/* Esconder o título "Quiz Módulo X" enquanto se responde (mantém-se no
	   ecrã inicial e no resultado). */
	#content-item-quiz.be-quiz-started > .course-item-title,
	#content-item-quiz.be-quiz-started .quiz-title {
		display: none !important;
	}

	/* Reduzir a altura da barra navy (Pergunta / timer). */
	#popup-content .quiz-status {
		padding: 12px 16px !important;
	}
	#popup-content .quiz-status .questions-index {
		margin: 0 !important;
	}
	/* "Earned Point" ocupa espaço e não é essencial no mobile. */
	#popup-content .quiz-status .current-point {
		display: none !important;
	}
}

/* =========================================================================
 * Barra de estado do quiz (Pergunta X de X | tempo): colada ao topo (sticky)
 * e mais fina. Aplica em todas as larguras.
 * ====================================================================== */
#popup-content .quiz-status {
	position: static !important; /* não-sticky: rola com o conteúdo (sem gaps/saltos) */
	margin: 0 0 16px !important;
	padding: 8px 16px !important;
	min-height: 0 !important;
}
/* Uma só linha: Pergunta (esquerda) + tempo/Concluir (direita). */
#popup-content .quiz-status > div {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
}
#popup-content .quiz-status > div > div:last-child {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 12px;
}
#popup-content .quiz-status .questions-index,
#popup-content .quiz-status .questions-index *,
#popup-content .quiz-status .countdown,
#popup-content .quiz-status .countdown * {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 15px !important;
	line-height: 1.25 !important;
}

/* Mobile: o LearnPress empilha a barra (coluna) e usa um box inset. Forçamos
   uma só linha, full-width (edge-to-edge), fina e com o tempo alinhado.
   Especificidade alta (#content-item-quiz) + !important para bater o LP. */
@media (max-width: 768px) {
	#content-item-quiz .quiz-status > div {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 10px !important;
		max-width: none !important;
		width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		border-radius: 0 !important;
		padding: 10px 18px !important;
	}
	#content-item-quiz .quiz-status .questions-index {
		width: auto !important;
		flex: 0 1 auto !important;
		text-align: left !important;
	}
	#content-item-quiz .quiz-status > div > div {
		width: auto !important;
		flex: 0 0 auto !important;
		flex-direction: row !important;
		justify-content: flex-end !important;
		gap: 8px !important;
	}
	#content-item-quiz .quiz-status .countdown {
		padding: 0 !important;
		min-height: 0 !important;
	}

	/* Subir a barra: o .content-item-wrap tem padding-top:60px (gap no topo).
	   No quiz (título escondido) reduzimos para a barra ficar logo a seguir
	   ao header. :has é suportado no Safari iOS moderno. */
	.content-item-wrap:has(#content-item-quiz) {
		padding-top: 10px !important;
	}
}

/* =========================================================================
 * TAREFA 2.1 — Progresso visual (sem plugin).
 * Barra de % do curso no topo da sidebar + "concluídos/total" por módulo.
 * (Elementos criados pelo lms.js a partir do currículo já renderizado.)
 * ====================================================================== */
.be-course-progress {
	position: sticky;
	top: 0;
	z-index: 6;
	background: #ffffff;
	border-bottom: 1px solid #ececec;
	padding: 14px 20px;
}
.be-course-progress .be-cp-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	font-weight: 600;
	color: #14213d;
	margin-bottom: 8px;
}
.be-course-progress .be-cp-pct {
	font-weight: 700;
}
.be-course-progress .be-cp-track {
	position: relative;
	height: 8px;
	background: #eef0f3;
	border-radius: 5px;
	overflow: hidden;
}
/* Marcos 25/50/75% POR CIMA do preenchimento (visíveis mesmo na zona dourada). */
.be-course-progress .be-cp-track::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(20, 33, 61, 0.3), rgba(20, 33, 61, 0.3)),
		linear-gradient(rgba(20, 33, 61, 0.3), rgba(20, 33, 61, 0.3)),
		linear-gradient(rgba(20, 33, 61, 0.3), rgba(20, 33, 61, 0.3));
	background-size: 2px 100%;
	background-position: 25% 0, 50% 0, 75% 0;
	background-repeat: no-repeat;
}
.be-course-progress .be-cp-fill {
	height: 100%;
	background: #efb635;
	border-radius: 5px;
	transition: width 0.4s ease;
}
.be-course-progress .be-cp-msg {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
}
.be-course-progress .be-cp-msg:empty {
	display: none;
}

/* "Concluir curso": escondido por defeito (header/conteúdo). Só aparece aos
   100%, dentro da barra de progresso (.be-finish-shown, posto pelo lms.js). */
.form-button-finish-course {
	display: none !important;
}
.be-course-progress .form-button-finish-course.be-finish-shown {
	display: block !important;
	margin-top: 12px;
}
.be-course-progress .form-button-finish-course .btn-finish-course,
.be-course-progress .form-button-finish-course .lp-btn-finish-course {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 10px 18px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #efb635 !important;
	color: #14213d !important;
	font-weight: 700 !important;
}
/* Badge da secção "X/Y": pílula limpa e centrada (consistente desktop+mobile;
   no mobile o LP forçava um quadrado branco). */
#popup-sidebar .section-count-items.be-section-xy {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 0 !important;
	height: 24px !important;
	padding: 0 10px !important;
	border-radius: 12px !important;
	background: #eef0f3 !important;
	color: #4b5563 !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1 !important;
	white-space: nowrap;
	box-shadow: none !important;
}

/* Paginação do quiz: número atual limpo e centrado (alinhado com Anterior/Seguinte). */
#popup-content .questions-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
#popup-content .questions-pagination .nav-links .page-numbers.current {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 8px;
	border: 1px solid #e3e6ea;
	border-radius: 12px;
	background: #ffffff;
	color: #14213d;
	font-weight: 700;
}

/* "Concluir questionário": NÃO no topo (barra navy) nem no corpo da última
   pergunta. Fica à DIREITA da paginação, DENTRO da barra fixa do fundo.
   A paginação (.button-left.fixed) é position:fixed; bottom:0 — o lms.js move
   o .button-right para dentro dela e aqui alinhamo-lo à direita. */
#content-item-quiz .quiz-status .submit-quiz {
	display: none !important;
}
#content-item-quiz .quiz-buttons .button-left.fixed {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important; /* paginação + Concluir centrados como grupo */
	gap: 12px !important;
}
#content-item-quiz .quiz-buttons .button-left.fixed .questions-pagination {
	flex: 0 1 auto !important;
}
/* Concluir LOGO a seguir à paginação (mesmo slot do "Seguinte"), dentro do
   grupo centrado — assim a última pergunta fica alinhada como as 1-9. */
#content-item-quiz .quiz-buttons .button-left.fixed .button-right {
	position: static !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	width: auto !important;
}
/* Botão "Concluir" como pílula dourada (na barra, à direita) — mesma
   altura/raio do "Anterior" para ficar alinhado e do mesmo tamanho. */
#content-item-quiz .quiz-buttons .button-right .submit-quiz {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0 !important;
	padding: 10px 24px !important; /* = "Seguinte" */
	border: 0 !important;
	border-radius: 24px !important;
	background: #efb635 !important;
	color: #14213d !important;
	font-size: 16px !important; /* herdava 15px do .lp-button */
	line-height: 1 !important;
	font-weight: 700 !important;
	white-space: nowrap;
}

/* Resultado do quiz: "Refazer Quiz" + "Rever Respostas" na MESMA linha,
   centrados e com espaço. (Safety: se o .button-right ficar aninhado no
   .button-left, este flex põe-nos lado a lado; o lms.js também o repõe.) */
#content-item-quiz .quiz-buttons .button-left:not(.fixed) {
	display: flex !important;
	flex-direction: row-reverse !important;
	align-items: center;
	justify-content: center;
	gap: 16px !important;
}
#content-item-quiz .quiz-buttons .button-left:not(.fixed) .button-right {
	margin: 0 !important;
}

/* Modais de confirmação do quiz (submeter/refazer): o tema força
   text-transform:capitalize nos botões, o que mostrava "voltar" como "Voltar".
   Mantemos o texto tal como definido no i18n ("voltar" minúsculo, "Sim"). */
.lp-button.modal-button-cancel,
.lp-button.modal-button-ok {
	text-transform: none !important;
	margin: 0 8px !important; /* espaço entre os dois botões */
}
/* "voltar" = secundário, branco/ghost (como o "Anterior" da paginação). */
.lp-button.modal-button-cancel {
	background: transparent !important;
	border: 1px solid #ccc !important;
	color: #555 !important;
}
.lp-button.modal-button-cancel:hover {
	border-color: #999 !important;
	color: #14213d !important;
}

/* Timer do quiz (.countdown) no header escuro: cinzento -> branco legível. */
#popup-content .countdown,
#popup-content .countdown * {
	color: #ffffff !important;
}

/* =========================================================================
 * Spinner de loading ao carregar em Anterior/Seguinte (feedback de transição).
 * A classe .be-loading e o <span class="be-spin"> são adicionados pelo JS.
 * ====================================================================== */
#popup-footer .course-item-nav a.be-loading {
	pointer-events: none;
	opacity: 0.85;
}
.be-spin {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(20, 33, 61, 0.25);
	border-top-color: #14213d;
	border-radius: 50%;
	animation: be-spin 0.6s linear infinite;
}
/* No botão primário (dourado) o texto é navy; no ghost é cinzento. */
#popup-footer .course-item-nav .prev a .be-spin {
	border-color: rgba(85, 85, 85, 0.25);
	border-top-color: #555;
}
@keyframes be-spin {
	to {
		transform: rotate(360deg);
	}
}