/* DVT Users & Challenges Addon – Points Progress block
 *
 * Valores retirados diretamente do painel de código do Figma (fundo, cor de
 * texto, border-radius, padding, gap, tipografia da saudação e dos pontos)
 * — ver PLANO-DESENVOLVIMENTO.md secção 13. Ambos os textos usam a mesma
 * fonte de marca (GoodDogNewW00-Regular), só o tamanho/line-height muda.
 */

@font-face {
	font-family: 'GoodDogNewW00-Regular';
	src: url( '../fonts/GoodDogNewW00-Regular.ttf' ) format( 'truetype' );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.dvtuca-points-progress-wrap {
		display: flex;
		flex-direction: column;
		/* A pill de pontos tem width:100% (ocupa sempre a largura toda), mas a
		 * faixa "Semana" por baixo é width:fit-content — no Figma fica
		 * centrada por baixo da pill, não encostada à esquerda. */
		align-items: center;
		width: 100%;
		max-width: 100%;
	/* A faixa de semanas não consegue encolher (todo o conteúdo é
	 * flex:0 0 auto) — se o container onde este bloco vive (ex.: a barra
	 * do header, entre o logo e o menu) for mais estreito do que aquilo
	 * que a faixa precisa, sem isto a pill de pontos (que TEM uma parte
	 * flexível, a barra de progresso) encolhia sozinha e ficava mais
	 * estreita do que a faixa por baixo, que passava a sair para fora.
	 * Isto garante que o wrap — e por isso a pill, que é width:100% dele —
	 * nunca fica mais estreito do que o que a faixa de semanas precisa.
	 * !important porque, dentro do header (container Spectra/UAG), há uma
	 * regra gerada automaticamente pelo editor de blocos que força
	 * min-width:unset !important em qualquer filho direto do container —
	 * sem isto, este min-width nunca chegava a aplicar-se ali. */
	min-width: max-content !important;
}

.dvtuca-points-progress {
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
		max-width: 100%;
	padding: 8px 16px;
	/* Garante que a pill de pontos fica sempre maior do que a faixa de
	 * semanas por baixo (.dvtuca-points-progress__week), como no Figma —
	 * independentemente de variantes/overrides que mudem o conteúdo
	 * (mostrar/esconder saudação, ícone maior/menor, etc.). Ver o
	 * max-height correspondente em .dvtuca-points-progress__week. */
	min-height: 48px;
	border: 1px solid rgba( 0, 0, 0, 0 );
	border-radius: 40px;
	background: #222627;
	color: #ffffff;
	font-family: inherit;
	box-sizing: border-box;
}

.dvtuca-points-progress__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 999px;
	background: #ffffff;
	font-size: 1.4rem;
	line-height: 1;
}

.dvtuca-points-progress__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dvtuca-points-progress__greeting {
	flex: 0 0 auto;
	margin: 0;
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px; /* 175% */
	text-transform: uppercase;
	color: #eea617;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dvtuca-points-progress__track {
		position: relative;
		flex: 1 1 auto;
		/* Largura mínima da barra — no header Agros Play o espaço útil é menor
		 * do que o layout original de Figma (239px). 62px é o valor que mantém o
		 * efeito visual sem fazer a barra escapar do container em layouts mais
		 * estreitos. */
		min-width: min( 62px, 100% );
		height: 0.65rem;
		border-radius: 999px;
		background: #000000;
		overflow: hidden;
}

.dvtuca-points-progress__fill {
	position: relative;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient( 90deg, #eea617, #ffcc66 );
	transition: width 300ms ease-out;
}

.dvtuca-points-progress__points {
	flex: 0 0 auto;
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 32px; /* 160% */
	text-transform: uppercase;
	color: #eea617;
	white-space: nowrap;
}

.dvtuca-points-progress__points-value {
	display: inline-block;
	min-width: 2ch;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ── Animação ambiente: líquido ──────────────────────────────────────── */
.dvtuca-points-progress__fill--liquid {
	background-image: linear-gradient(
		90deg,
		#eea617 0%,
		#ffcc66 25%,
		#eea617 50%,
		#ffcc66 75%,
		#eea617 100%
	);
	background-size: 200% 100%;
	animation: dvtuca-liquid 3s linear infinite;
}

@keyframes dvtuca-liquid {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: -200% 0%;
	}
}

/* ── Animação ambiente: brilho (glow) ────────────────────────────────── */
.dvtuca-points-progress__fill--glow {
	animation: dvtuca-glow 1.8s ease-in-out infinite;
}

@keyframes dvtuca-glow {
	0%, 100% {
		box-shadow: 0 0 2px 0 rgba( 238, 166, 23, 0.4 );
	}
	50% {
		box-shadow: 0 0 10px 2px rgba( 238, 166, 23, 0.85 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dvtuca-points-progress__fill {
		transition: none;
		animation: none !important;
	}
}

/* ── Badge "Semana N" (Figma: Week Progress Badge) ───────────────────────
 * --attached: por baixo do pill de pontos (com sessão) — cantos só
 *   arredondados em baixo, encostado ao pill acima (sem gap).
 * --standalone: sozinho (sem sessão) — totalmente arredondado, sem os
 *   pontos do utilizador no fim.
 */
.dvtuca-points-progress__week {
	display: flex;
	align-items: center;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	padding: 4px 16px;
	background: rgba( 0, 0, 0, 0.25 );
	box-shadow: 0px 1px 1.5px rgba( 0, 0, 0, 0.08 );
	box-sizing: border-box;
	/* Nunca pode ficar tão alta como a pill de pontos acima (min-height
	 * 48px em .dvtuca-points-progress) — corta em vez de esticar se o
	 * texto/steps quiserem mais espaço do que isto. */
	max-height: 32px;
	overflow: hidden;
}

.dvtuca-points-progress__week--attached {
	border-radius: 0 0 20px 20px;
}

.dvtuca-points-progress__week--standalone {
	height: 44px;
	gap: 8px;
	border-radius: 46px;
}

.dvtuca-points-progress__week-label {
	flex: 0 0 auto;
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	text-transform: uppercase;
	color: #ffffff;
	white-space: nowrap;
}

.dvtuca-points-progress__week-steps {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.dvtuca-points-progress__week-step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border-radius: 9px;
	background: #849e93;
	opacity: 0.3;
	color: #222627;
	font-family: 'Inter', ui-sans-serif, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.dvtuca-points-progress__week-step.is-active {
	background: #05a564;
	opacity: 1;
	color: #ffffff;
}

.dvtuca-points-progress__week-connector {
	width: 18px;
	height: 2px;
	flex: 0 0 auto;
	border-radius: 1px;
	background: #849e93;
	opacity: 0.3;
}

.dvtuca-points-progress__week-points {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 8px;
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	text-transform: uppercase;
	color: #ffffff;
	white-space: nowrap;
}

/* ── Versão compacta: telemóvel / tablet ─────────────────────────────────
 * Figma "Header" mobile (node 232:7216): só a pílula escura com o avatar do
 * utilizador e os pontos TOTAIS — sem saudação, sem barra de progresso e sem a
 * faixa da semana. Aplica-se até 1024px, que é onde o Spectra mostra a linha
 * móvel do cabeçalho (.uag-hide-desktop) e esconde a de desktop, por isso o
 * bloco desktop completo e este nunca aparecem juntos.
 *
 * Valores do Figma: pílula #222627, raio 40px, padding 0 16px, gap 8px;
 * avatar 32x32 (o mesmo vaca.png, direto sobre a pílula, sem círculo);
 * pontos em GoodDog 16px / 28px, maiúsculas, #eea617.
 */
@media ( max-width: 1024px ) {
	.dvtuca-points-progress-wrap {
		width: auto;
	}

	.dvtuca-points-progress {
		width: auto;
		min-height: 0;
		padding: 0 16px;
		gap: 8px;
	}

	.dvtuca-points-progress__greeting,
	.dvtuca-points-progress__track {
		display: none;
	}

	.dvtuca-points-progress__icon {
		width: 32px;
		height: 32px;
		background: transparent;
		border-radius: 0;
		overflow: visible;
	}

	.dvtuca-points-progress__icon img {
		object-fit: contain;
	}

	.dvtuca-points-progress__points {
		font-size: 16px;
		line-height: 28px;
	}

	.dvtuca-points-progress__points-value {
		min-width: 0;
		text-align: left;
	}

	/* ── Barra da semana, colada por baixo do cabeçalho ──────────────────────
	 * Proposta para o mobile: a faixa "Semana 1-5 · pontos" cola-se à parte de baixo
	 * do cabeçalho, em vez de se perder. A faixa não tem cor própria: usa o mesmo
	 * fundo do cabeçalho (degradê escuro translúcido + desfoque), que se prolonga
	 * por baixo dela. A altura e o raio afinam-se pelas variáveis abaixo (podem
	 * ser redefinidas no CSS Adicional).
	 *
	 * Como encaixa: o .dt-hf-header é fixo e tem backdrop-filter (desfoque). Um
	 * desfoque dentro de outro desfoque não mostra o fundo da página, e a barra
	 * fora da caixa do cabeçalho não seria desfocada. Por isso o cabeçalho cresce
	 * a altura da barra (padding-bottom) e a barra fica absoluta nessa folga, por
	 * baixo da linha do menu — assim o desfoque do próprio cabeçalho cobre tudo. */
	:root {
		--dvtuca-week-h: 44px;
		--dvtuca-week-radius: 20px;
	}

	/* O cabeçalho cresce a altura da barra, com os cantos de baixo arredondados
	 * (o desfoque respeita o raio). O degradê escuro do cabeçalho estica-se por
	 * toda a altura nova, mas acaba com um pouco de escuro (em vez de 0) para o
	 * texto da barra continuar legível sobre imagens claras. Só quando há a barra
	 * da semana no cabeçalho. */
	.dt-hf-header:has( .dvtuca-points-progress__week ) {
		padding-bottom: var( --dvtuca-week-h );
		border-radius: 0 0 var( --dvtuca-week-radius ) var( --dvtuca-week-radius );
		background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0.8 ) 0, rgba( 0, 0, 0, 0.25 ) 100% );
	}

	/* Páginas interiores: o conteúdo começa por baixo do cabeçalho fixo com
	 * --dt-header-h (CSS Adicional, 96px) — tem de somar a barra. */
	:root:has( .dt-hf-header .dvtuca-points-progress__week ) {
		--dt-header-h: calc( 96px + var( --dvtuca-week-h ) );
	}

	/* A barra ancora-se à linha do cabeçalho (o contentor raiz, position:
	 * relative), por isso os antepassados intermédios deixam de ser o ponto de
	 * ancoragem. */
	.dvtuca-points-progress-wrap,
	.uagb-container-inner-blocks-wrap:has( .dvtuca-points-progress__week ),
	.wp-block-uagb-container:has( > .dvtuca-points-progress-wrap ) {
		/* !important: o Spectra define position: relative nestes contentores com
		 * regras mais específicas geradas pelo editor. */
		position: static !important;
	}

	.dvtuca-points-progress__week {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		height: var( --dvtuca-week-h );
		max-height: none;
		padding: 0 16px;
		gap: 16px;
		/* Conteúdo sempre centrado; o espaço que sobra fica nos cantos. */
		justify-content: center;
		overflow: visible;
		border-radius: 0 0 var( --dvtuca-week-radius ) var( --dvtuca-week-radius );
		background: none;
		/* Linha branca de 1px no topo (10%), a separar a barra do cabeçalho.
		 * Sombra interior em vez de border para não mexer na altura. */
		box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.1 );
	}

	.dvtuca-points-progress__week-label {
		font-size: 14px;
	}

	.dvtuca-points-progress__week-steps {
		gap: 2px;
	}

	.dvtuca-points-progress__week-step {
		width: 22px;
		height: 22px;
		border-radius: 11px;
		font-size: 13px;
	}

	.dvtuca-points-progress__week-step.is-active {
		box-shadow: 0 0 0 2px #ffffff;
	}

	.dvtuca-points-progress__week-connector {
		width: 6px;
	}

	.dvtuca-points-progress__week-points {
		margin-left: 0;
		padding-left: 0;
	}

	/* Linha móvel do cabeçalho: logo | pontos | menu. Cada contentor vinha com uma
	 * largura fixa (33%) pensada para 2 colunas, e o Spectra põe 20px entre eles;
	 * com 3, o logo e o botão do menu ficavam espremidos. Logo e menu passam a ter
	 * o mesmo espaço e os pontos ficam ao centro. Só
	 * com sessão iniciada (há pill); sem sessão o bloco é só a faixa, fora do fluxo.
	 * !important: as regras do Spectra são geradas pelo editor, mais específicas. */
	.dt-hf-header .uagb-container-inner-blocks-wrap:has( > .wp-block-uagb-container > .dvtuca-points-progress-wrap > .dvtuca-points-progress ) {
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between !important;
		gap: 8px !important;
	}

	.dt-hf-header .uagb-container-inner-blocks-wrap:has( > .wp-block-uagb-container > .dvtuca-points-progress-wrap > .dvtuca-points-progress ) > .wp-block-uagb-container {
		width: auto !important;
		/* Logo e menu com a mesma parte do espaço livre, para os pontos ficarem
		 * centrados no ecrã (e não só entre os dois). */
		flex: 1 1 0 !important;
		min-width: min-content !important;
	}

	.dt-hf-header .uagb-container-inner-blocks-wrap:has( > .wp-block-uagb-container > .dvtuca-points-progress-wrap > .dvtuca-points-progress ) > .wp-block-uagb-container:has( > .dvtuca-points-progress-wrap ) {
		flex: 0 0 auto !important;
		min-width: max-content !important;
		padding: 0 !important;
		justify-content: center;
	}

	/* Pill um pouco mais justa só na barra do cabeçalho, para caber entre o
	 * logo e o botão MENU num ecrã de 360px sem tocar em nenhum dos dois. */
	.dt-hf-header .dvtuca-points-progress {
		padding: 0 10px;
		gap: 6px;
	}
}